#app {
    display: none;
}

[v-cloak] {
  display: none;
}

/* Custom Scrollbar */
*::-webkit-scrollbar {
    width: 4px;
    height: 1px;
}

*::-webkit-scrollbar-track {
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
    background: #bababa;
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #a6a6a6;
}


/*polichat*/
.plcht_btns_channels {
   height: 70px!important;
   width: 70px!important;
}

/* google trend component */
.google-trend {
    margin-bottom: 15px;
}

.google-trend .remove-btn {
    position: absolute;
    float: right;
    left: calc(100% - 37px);
    padding-top: 12px;
    font-size: 25px;
    font-weight: 400;
    color: #333652;
}

.google-trend .remove-btn:hover {
    color: #FCC917;
}


/* data widget component */
.positiveGreen {
    color: rgb(16, 150, 24)
}

.negativeRed {
    color: rgb(220, 57, 18)
}


/* table chart component */
.table-google-chart th, .table-google-chart td {
    text-align: center !important;
}

.table-google-chart .content-limit-td {
    max-width: 250px;
    text-align: left !important;
}


/* loading spinner component */
.loading-spinner {
    position: fixed;
    /* move the element half way across the screen */
    left: 50%;
    /* allow the width to be calculated dynamically */
    width: auto;
    z-index: 10;
    top: 40%;
    /* then move the element back again using a transform */
    transform: translateX(-50%);
}

.loading-spinner .preloader-wrapper {
    width: 90px;
    height: 90px;
}

.loading-overlay {
    z-index: 2000 !important;
    background: #e9e9e9 !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100% !important;
    opacity: 0.5;
}

/* campaign date component */
.filter-report {
    width: calc(100% - 320px);
    right: 30px;
}

/*search-terms-filter*/
.terms-filter{
    border-style: groove;
    border-width: 1px;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
}

@media (max-width: 991px) {
    .filter-report {
        width: calc(100% - 60px);
        right: 30px;
    }
}

.report-filter {
    position: fixed;
    right: 27px;
    z-index: 950;
}

/*exclusion list*/
.exclusion {
    place-self: center;
    grid-template-columns: 1fr;
    padding: 1px 15px;
}

.exclusion table{
    background-color:white;
    overflow: auto;
    box-shadow: 0 10px 20px
    rgba(0,0,0,0.19), 0 6px 6px
    rgba(0,0,0,0.23);
    margin-bottom: 0px;
}

/* negative words modal component */

.modal{
    padding-right: 0px !important;
}

.confirm-delete .chips .input {
    width: 100% !important;
}

.confirm-delete .modal-dialog{
    max-width: unset;
    margin: 0px;
}

.confirm-delete .modal-body .row{
    padding-top: 20px;
}

.confirm-delete .modal-footer{
    background: #ffffff;
}

.confirm-delete .modal-header h3{
    font-size: 2.1rem;
}

#first-chips.input-field {
    margin-bottom: 0.5rem;
    margin-top: -0.3rem;
}

.chips.focus {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: black;
    box-shadow: 0 1px 0 0 black;
}

.modal .label {
    color: #666666;
}

/*summary grades card*/
.tabs .tab a{
    color: #333652; /*color of the text in tab*/
    font-weight: normal;
}

.tabs .tab a:focus.active {
  color:#333652; /* text color while active */
  background-color: #ffe178; /* background color while activing */
}

.tabs .tab a:hover {
  color:#FCC917; /* text color on hover*/
}

.tabs .tab a.active {
    background-color:#ffe178; /* background color when a tab is active */
    color:#333652; /* text color when a tab is active */
}

.tabs .indicator {
    background-color:#FCC917; /* color of underline */
}

.row-eq-height .card{
    height: 100%;
}

.summary-grades {
    background-color: #f5f5f5;
}
.summary-grades .card-content{
    background-color: white;
}

.summary-grades .grey{
    padding-bottom: 0px !important;
}


.card-tabs .tab .tab-text{
    font-size: 0.9rem;
    padding: 2px;
}

.card-tabs .tab .tab-icon{
    font-size: 1.1rem;
    padding: 2px;
}

.card-tabs .tab .tab-icon i{
    margin-top: 10px;
}

.summary-grades .card-content .row .col-1{
    padding: 0px !important;
}

.summary-grades .card-content .row .col-1 i{
    margin-top: 10px;
}

.summary-grades .card-content .row .col-11{
    padding: 0px !important;
}

.summary-grades .card-content .row .col-11 p i{
    font-size: 1.0rem;
}

/*grade card*/
.grades .card-header {
    padding-top: 18px;
    padding-bottom: 12px;
    padding-left: 15px;
    padding-right: 15px;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14);
    margin: -20px 15px 0;
    border-radius: 3px;
    background-color: #999999;
    position: relative;
    height: 90px;
}

.grades .card-header i.material-icons {
   width: 65px;
   height: 65px;
   font-size: 75px;
   color: white;
   margin-left: -9%;
}

.grade-card {
    margin-top: 20px;
}

.grade-card .card-header{
    width: 93px;
    margin-bottom: 20px;
}

.grade-card .card-header i{
    text-align: center;
    margin-bottom: -6px;
}

.grade-card .card-text{
    margin-top: -103px;
    padding-bottom: 0px;
}

.grade-card .card-content h5{
    text-align: right;
    margin-bottom: 0px;
    margin-top: 5px;
}

.grade-card .card-content h5 i{
    font-size: 1.3rem;
}

.grade-card .card-content h5 span.progress-value{
    font-weight: 100;
}

/*info modal*/
.simple-modal .modal-content h4{
    text-align: center;
}

.simple-modal .modal-content h4 i{
    color: #FCC917;
}

.simple-modal .modal-content p{
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 0px;
}

.simple-modal .modal-footer{
    justify-content: center;
}

.simple-modal .modal-footer button{
    background-color: #333652 !important;
    color:#FCC917;
}

#combochart_markgrade {
    height: 350px !important;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14);
    background-color: #fef7da;
}

.loading-message{
    position: relative;
}

.loading-message h5{
    margin-top: 160px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* task */
.task-card .view-mode .row {
    margin-bottom: 5px;
}

.task-card .card-body.view-mode {
    padding-top: 2px;
    padding-bottom: 2px;
}

.list-ab-card {
    font-size: 12px;
}

.table-ab-list td, .table-ab-list th, .result-ab-list td, .result-ab-list th {
    font-size: 12px !important;
}

.card-list-status-header {
    padding-top: 5px;
    padding-bottom: 2px;
    width: 157px;
    padding-left: 20px;
}

.card-list-status-header.wait {
    background-color: rgba(51, 87, 119, 1);
    color: #fcca17;
}

.card-list-status-header.label-list {
    background-color: #fcca17;
    color: #000000;
}

.card-list-status-header i {
    font-size: 12px;
}

.label-set {
    margin-left: unset;
    font-weight: bolder;
}

.card-list-status-header.running {
    color: #ffffff;
    background: #2bbbad;
    width: 120px;
}

.card-list-status-header.other {
    color: #ffffff;
    background: blue;
    width: 120px;
}

.card-list-status-header.change-status {
    color: #ffffff;
    background: magenta;
    width: 120px;
}

.card-list-status-header.analytics {
    color: #ffffff;
    background: #e37400;
    width: 146px;
}

.card-list-status-header.paused {
    color: #ffffff;
    background: #666666;
    width: 120px;
}

.card-list-status-header.confident {
    color: #ffffff;
    background: #1b5e20;
    width: 120px;
}

.card-list-status-header.google {
    color: #ffffff;
    background: #d34836;
    width: 120px;
}

.card-list-status-header.facebook {
    color: #ffffff;
    background: #3b5998;
    width: 120px;
}

.btn-change-expand {
    width: 110px;
}

.btn-change-close {
    width: 32px;
}

.result-ab-list {
    margin-bottom: 3px;
}

.winner-line td {
    background: rgba(43, 187, 173, 0.7);
    border-radius: 0;
    font-weight: bolder;
}

.loser-line td {
    background: rgba(211, 72, 54, 0.7);
    border-radius: 0;
    font-weight: bolder;
}

.result-summary {
    padding: 8px;
    background-color: rgba(51, 87, 119, 1);
    color: #fcca17;
    font-weight: normal;
    font-size: 12px;
    margin-bottom: 12px;
}

.best-variation {
    font-size: 15px;
    font-weight: bolder;
}

/* search terms */
.search-terms-title {
    margin-bottom: 0px;
    padding-left: 15px;
}
.search-terms-table {
    padding: 15px;
}

.search-terms-table .card .label-title{
    padding-bottom: 0px;
}

.search-terms-table .card .label-description{
    padding-top: 0px;
}

.search-terms-table .card .label-table{
    padding: 10px;
}

.btn-back{
    background-color:#333652 !important;
    color: #FCC917 !important;
}

.btn-next{
    float: right ;
    background-color:#333652 !important;
    color: #FCC917 !important;
}

/* complex popout */
.popout-table{
    width: 100%;
}

.popout-table .expand-icon{
    padding: 0px;
    display: flex;
    justify-content: flex-end;
    padding-top: 7px;
    background-color: white;
}

.popout-table .expand-icon i{
    margin-right: 8px;
}
.search-terms-table .justify-content-center {
    font-size: 14px;
}

.popout-table .collapsible-header{
    color: #333652;
    font-weight: bolder;
    display: flex;
    align-items: center;
    padding-top: 0px;
    margin-top: -10px;
}

.popout-table .collapsible-header .row-icon {
    font-size: 1.2rem !important;
}

.popout-table .collapsible-header .row-content{
    width:100%;
    font-size:0.8rem;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
}

.pattern-col{
    text-align: center;
    padding: 0px;
    margin: 2px;
}

.pattern-col-examples{
    padding: 0px;
    background-color: #F0F0F0F0;
    margin: 2px;
    text-align: center;
    word-wrap: break-word;
}

.title-header-popout-table{
    margin-bottom: 0px;
    font-weight: bolder;
}

.pattern-col div{
    margin-bottom: 0px;
}

.header-icon{
    width: auto;
    padding-right: 4px;
    font-size:0.8rem;
    color: #FCC917;
    margin-right: 0px;
}

.header-text{
    width: auto;
    padding-right: 4px;
    font-size:0.8rem;
    margin-right: 0px;
    font-weight: bolder;
    margin-bottom: 0px;
}

.popout-table .collapsible-body .row-stats{
    width: auto !important;
    padding-bottom: 5px;
    color: #333652;
    font-weight: bolder;
}

.popout-table .collapsible-body .row-stats .row{
    margin-bottom: 0px;
    font-weight: bolder;
}

.popout-table .collapsible-body .row-stats .row i{
    padding-right: 4px;
    color: #FCC917;
}

.popout-table .collapsible-body .row-stats .row p{
    color: #FCC917;
    margin-right: 3px;
}

.popout-table .collapsible-body .row-action-button{
    width: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
}

.popout-table .collapsible-body .row-action-button .button-active{
    color: #ffffff;
}

.popout-table .row-action-button .button-disabled{
    color: #ffffff;
    box-shadow: unset;
    background: grey;
    pointer-events: none;
}

.download-excel-file {
    background-color: #34A853;
    color: white !important;
}

/* wordcloud */
.anychart-credits{
    width:10px;
    opacity: 0.5;
}

/*awake giants*/
.automatic-inclusion {
    background-color: #333652;
    color: #fcc917 !important;
}

.bmd-switch-track {
    display: none !important;
}

/*insights*/
.custom-pading-collapsible-body{
    padding: 14px !important;
}

/*ab test*/
.pattern-field-style{
    height: 36px !important;
}

/*vue multiselect*/
.multiselect__tags{
    min-height: 0px !important;
    padding-top: 0px !important;
}

.multiselect__select{
    height: 27px !important;
}

.multiselect__tag{
    padding: 4px 26px 4px 12px !important;
    border-radius: 44px !important;
}

.multiselect__tag span{
    font-size: 11px;
}

/* account settings */
.account-form textarea{
    font-size: 16px;
}

/* vue multiselect in account settings*/
.account-form .multiselect__single{
    margin-top: 8px;
    background-color: rgb(240, 240, 240);
}

.account-form .multiselect__select{
    margin-top: 6px;
}

.account-form .multiselect__tags{
    background-color: rgb(240, 240, 240);
}

.account-form .multiselect__tag i{
    margin-top: 2px;
}

.account-form .multiselect__tag span{
    font-size: 13px;
    font-weight: 400;
}

.account-form .multiselect__tag{
    line-height: 18px;
}

.account-form .multiselect__single{
    color: black;
    font-size: 16px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

/* customization over materialize chips */
.account-form .chip{
    background-color: #333652;
    color: #FCC917;
    font-weight: 400;
    height: 26px;
    line-height: 25px;
}

.account-form .chip i{
    color: #369a6e;;
    line-height: 25px;
    font-size: 12px;
}

/* media queries */
/* pcs and bigger screens */
@media (min-width: 641px) {
    /*exclusion table*/
    .icn-remove {
        display:none;
    }
    .btn-remove {
        display:inline-block;
    }
    .row-text {
        font-size: 15px;
    }

    /* card tabs */
    .tab-text {
        display: inline-block !important;
    }
    .tab-icon {
        display: none !important;
    }

    /*summary grade*/
    .col-1 i{
        font-size: 1.4rem;
    }

    /*search terms*/
    .title-header-popout-table{
        justify-content: end;
        text-align: initial;
    }

    .btn-download {
        display:inline-block;
    }

    .icn-download {
        display:none;
    }

    .btn-auto-inclusion {
        display:inline-block;
    }

    .icn-auto-inclusion {
        display:none;
    }

    /*table-list-checkbox*/
    .label-checkbox-header{
        font-size: 1rem !important;
    }
}

/* iphone 5/se and galaxy fold */
@media(max-width: 320px) {
    /* exclusion table */
    .btn-remove {
        display:none;
    }
    .icn-remove {
        display:inline-block;
    }
    .row-text {
        font-size: 10px;
    }
    .exclusion {
        margin: 10px 1px 20px;
    }

    /* card tabs */
    .tab-text {
        display: none !important;
    }
    .tab-icon {
        display: inline-block !important;
    }

    /* modal */
    .modal .btn {
        font-size: 70%;
    }

    /*grade cards*/
    .card-stats .card-content h5 {
        font-size: 12px !important;
    }

    .card-progress {
        margin-top: 19px !important;
    }

    .grade-card .card-header{
        width: 73px !important;
    }

    .grade-card .card-header .material-icons {
        font-size: 67px !important;
        margin-left: -27% !important;
        margin-top: 8% !important;
    }

    /*summary grade*/
    .col-1 i{
        font-size: 0.9rem;
    }

    .grades-bottom{
        margin-top: 45px;
    }

    /*search terms*/
    .title-header-popout-table{
        justify-content: center;
        text-align: center;
    }

    .btn-download {
        display:none;
    }

    .icn-download {
        display:inline-block;
    }

    .btn-auto-inclusion {
        display:none;
    }

    .icn-auto-inclusion {
        display:inline-block;
    }

    /*table-list-checkbox*/
    .label-checkbox-header{
        font-size: 0px !important;
    }

    /*awake giants*/
    .switch-automatic-awake{
        float: left !important;
    }
}

/*smartphone in general - exception case for awake giants*/
@media (min-width: 321px) and (max-width: 520px){
    /*awake giants*/
    .switch-automatic-awake{
        float: left !important;
    }
}

/* smartphones in general */
@media (min-width:321px) and (max-width: 640px) {
    /* exclusion table */
    .btn-remove {
        display:none;
    }
    .icn-remove {
        display:inline-block;
    }
    .row-text {
        font-size: 13px;
    }
    .exclusion {
        margin: 10px 15px 20px;
    }
    /* card tabs */
    .tab-text {
        display: none !important;
    }
    .tab-icon {
        display: inline-block !important;
    }

    /* modal */
    .modal .btn {
        font-size: 80%;
    }

    /*grade cards*/
    .card-stats .card-content h5 {
        font-size: 20px !important;
    }

    .card-progress{
        margin-top: 7px !important;
    }

    /*summary grades*/
    .col-1 i{
        font-size: 1.0rem;
    }

    .grades-bottom{
        margin-top: 45px;
    }

    /*search terms*/
    .title-header-popout-table{
        justify-content: center;
        text-align: center;
    }

    .btn-download {
        display:none;
    }

    .icn-download {
        display:inline-block;
    }

    .btn-auto-inclusion {
        display:none;
    }

    .icn-auto-inclusion {
        display:inline-block;
    }

    /*table-list-checkbox*/
    .label-checkbox-header{
        font-size: 0px !important;
    }
}

/* vue multiselect */
.multiselect__tags{
    border-style: groove !important;
    border-width: 1px !important;
    border-top: transparent !important;
    border-left: transparent !important;
    border-right: transparent !important;
    border-radius: 0px !important;
}

.multiselect__tag{
    background-color: #333652 !important;
    color: #FCC917 !important;
}

.multiselect__tag-icon:focus, .multiselect__tag-icon:hover {
    background: #ea4335 !important;
}

.multiselect__option--selected.multiselect__option--highlight:after {
    background: #b3b3b3 !important;
    color: black !important;
}

.multiselect__option--selected.multiselect__option--highlight {
    background: #b3b3b3;
    color: black;
}

.multiselect__content{
    display: inherit !important;
}

.multiselect__element [type="checkbox"]+span:not(.lever){
    padding-left: 25px !important;
}


/*small screens - exception case for goals*/
@media (min-width: 279px) and (max-width: 575px){
    /*columns in header*/
    .col-content-1 {
        width:10%;
    }

    .col-content-3{
        width: 33%;
    }

    .col-content-7{
        width: 75%;
    }
    .col-content-6{
        width: 50%;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-content-10{
        width: 75%;
    }

    .col-content-2{
        width: 20%;
    }
}

/*custom cols width (inspired on bootstrap*/

@media (min-width: 992px){
    /*divide 100% width in 5 parts of 20%*/
    .custom-col-lg-5{
        flex: 0 0 20%;
        max-width: 20%;
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 768px){
    .custom-col-lg-5{
        flex: 0 0 20%;
        max-width: 20%;
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 576px){
    .custom-col-lg-5{
        flex: 0 0 20%;
        max-width: 20%;
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
}

/*quill editor*/
.ql-editor strong{
    font-weight: bold !important;
}
/* Font Awesome 5 local (webfont): ícones de MARCA exigem a fonte Brands.
   O kit JS antigo resolvia "fa fa-facebook-f" pelo nome, em qualquer estilo;
   a webfont não — com prefixo solid o glifo não existe e o badge fica vazio.
   Blindagem para classes com prefixo errado (inclusive vindas de dados). */
.fa.fa-facebook-f, .fas.fa-facebook-f,
.fa.fa-facebook, .fas.fa-facebook,
.fa.fa-google, .fas.fa-google,
.fa.fa-instagram, .fas.fa-instagram,
.fa.fa-whatsapp, .fas.fa-whatsapp,
.fa.fa-youtube, .fas.fa-youtube,
.fa.fa-twitter, .fas.fa-twitter,
.fa.fa-linkedin, .fas.fa-linkedin {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
}