/* -------------------------------------------------------- elements default*/
.comps__padding--10{
    padding: 10px;
    box-sizing: border-box;
}
.comps__padding--20{
    padding: 20px;
    box-sizing: border-box;
}
.comps__padding--30{
    padding: 30px;
    box-sizing: border-box;
}
legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px; 
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    max-width: 50% !important;
}
/*barra de filtros*/
.bar-filter {
    padding-bottom: 10px !important;
    border-bottom: solid 1px rgb(173, 173, 173);
}
/*serach filter*/
.serach-filter-button {
    font-size: 25px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.6s;
}
.serach-filter-button:hover {
    font-size: 35px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}


/*======================cards padrões*/
/*card padrão image*/
.card-comps-imageModeCover {
    height: 150px;
    width: 100%;
    background-position: center;
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}
/* Indicador dos cards*/
.card-comps-indicator {
    border-top: 1px solid var(--app-soft-gray);
    padding: 5px;
    box-sizing: border-box;
    font-size: 16px !important;
    font-family: var(--app-default-font) !important;
}
.card-comps-indicator {
    font-size: 16px !important;
    font-family: var(--app-default-font);
}
.card-comps-indicator-value {
    font-size: 16px !important;
    font-family: var( --app-default-font-2);
    font-weight: 700;
}
/*card badged*/
.card-comps-label {
    display: flex;
    padding: 0 10px;
    line-height: 1.5;
    font-size: 0.875rem;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 2px;
    text-transform: uppercase;
    top: 0;
    right: 0;
    border-top-right-radius: var(--a-default-radius);
}
.card-comps-label-left {
    left: 0 !important;
    width: 60px;
    border-top-right-radius: 0 !important;
    border-top-left-radius: var(--mb-default-radius) !important;
}


.card-comps-header {
    display: flex;
    justify-content: flex-start;
    padding: 5px;
    align-items: center;
}

.card-comps-Image {}

.card-comps-icon {
    width: 38px;
    height: 38px;
    border-radius: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    background: #4A00E0;
    background-size: cover;
    background-position: center;
}
.card-comps-header-info {
    margin-left: 10px;
}
.card-comps-img {
    margin-right: 8px;
}
.card-comps-Title {
    margin: 0;
    font-size: 16px;
    font-family: var(--default-font);
    font-weight: 500;
}
.card-comps-SubTitle {
    margin: 0;
    font-size: 14px;
    color: var(--a-text-color-3);
}

/*====cards padrões*/

/*================ Widgets Shifts para informações detalhadas*/
.comps-innerShift {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.comps-innerShift-list {
    padding: 8px;
    box-sizing: border-box;
}
.comps-innerShift-g3 {
    width: 33.33%;
}
.comps-innerShift-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid 0.25px var(--a-pri-color);
    justify-content: center;
    border-radius: 4px;
    width: 100%;
}
.comps-innerShift-description {
    height: 40px;
    width: 100%;
    display: flex;
    font-family: var(--default-font);
    color: var(--a-text-color);
    font-size: 14px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.comps-innerShift-value {
    height: 50px;
    display: flex;
    align-items: center;
}
.comps-innerShift-value h2 {
    font-family: var(--default-font);
    color: var(--a-text-color);
    font-size: 16px;
    margin: 0;
}

/* ====================== painel de headers*/
.comps-panel-header {
    font-size: 18px;
    color: rgb(32, 32, 32);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(179, 179, 179);
}
/* ====================== headers de páginas*/
.comps-header-action button {
    border-radius: 80px !important;
}

.comps-title-header {
    font-size: 18px;
    color: rgb(32, 32, 32);
    font-family: 'Roboto', sans-serif;
}
.default-radius {
    border-radius: var(--app-default-radius) !important;
}


/* ========= ============================================================== 
============================================================================
============================================================================
Versão 1.0 do Comps 
===========================================================================
===========================================================================
========================================================================= */

/*------------------------------------------------Componente Botões*/
.comps-button {
    border-radius: 150px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
    cursor: pointer;
    text-transform: uppercase;
    outline: none;
}

.comps-button-default {
    border-radius: 150px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
    cursor: pointer;
    text-transform: uppercase;
    outline: none;
}
.comps-button-default-2 {
    border-radius: 150px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
    cursor: pointer;
    text-transform: uppercase;
}
.comps__btn__whats__text{
    color: rgb(2, 173, 45);
}
.comps__btn__text{
    font-size: 16px;
    background-color: transparent;
    font-family: var(--app-default-font-2);
    font-weight: 700;
    cursor: pointer;
    border: none;


}
.comps__btn__text--2{
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    background-color: transparent;
    font-family: var(--app-default-font-2);
    font-weight: 600;
    cursor: pointer;
    border-radius: 150px;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    text-transform: uppercase;
    outline: none;
}
.comps__btn__search{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    color: #19b0ea;
    cursor: pointer;
}
.comps__btn__back{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.comps__btn__remove{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    color: var(--app-soft-red);
    cursor: pointer;
}
.comps__btn__add{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    color: #29b392;
    cursor: pointer;
}
.comps__btn__more{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    color: var(--app-primary-color);
    cursor: pointer;
}
.comps__btn__more__item{
    font-size: 16px;
    font-family: var(--app-default-font-2);
    cursor: pointer;

}
.comps__btn__more__selected::after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058";
    color: #65e6ab;
    margin-left: 10px;
}
.comps__btn__more__selected{
    font-size: 16px;
    font-family: var(--app-default-font-2);
    color: black;
    font-weight: 700;
    background-color: aliceblue;
    padding-right: 25px;
    padding-left: 25px;
    border-radius: 150px;

}

.comps__btn__edit{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    color: var( --app-soft-blue);
    cursor: pointer;
}
.comps__btn__historic{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    color: #eaae01;
    cursor: pointer;
}
.comps__btn__Instagram{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    color: #ef075b;
}
.comps__btn__facebook{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    color: #0081fa;
}
.comps__btn__twitter{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    color: #076bef;
}
.comps__btn__filter{
    font-size: 25px !important;
    background-color: transparent;
    border: none;
    color: var(--app-text-color-1);
}

/*===============Acordeon de dição em massa de conteúdo*/

.uk-checkbox:checked {
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
    background-repeat: no-repeat !important;
    background-position: center !important;
}
/* tamanho de textos padrão do comps */
.comps-text-small {
    font-size: var(--app-text-small);
    font-family: var(--app-default-font-2);
}
.comps-text {
    font-size: var(--app-text-medium);
    font-family: var(--app-default-font-2);
}

.comps-title-medium {
    font-size: var(--app-title-size-medium);
    font-family: var(--app-default-font-2);
    font-weight: 500;
}
.comps-title-small {
    font-size: var(--app-title-size-small);
    font-family: var(--app-default-font-2);
    font-weight: 500;
}

/* =====================================Cards padrão do sistema*/
.comps-card-edit {
    font-size: 22px;
    color: rgb(0, 153, 255);
    background-color: transparent;
    border: none;
    padding: 0;
    transition: 0.6s;
    border-radius: 10px;
}
.comps-card-remove {
    font-size: 22px;
    color: rgb(255, 131, 131);
    background-color: transparent;
    border: none;
    padding: 0;
    transition: 0.6s;
    border-radius: 10px;
}
.comps-card-tag {
    font-size: 22px;
    color: rgb(12, 160, 140);
    background-color: transparent;
    border: none;
    padding: 0;
    transition: 0.6s;
    border-radius: 10px;
}
.comps-card-save {
    font-size: 32px;
    color: rgb(5, 216, 146);
    background-color: transparent;
    border: none;
    padding: 0;
    transition: 0.6s;
    border-radius: 10px;
}

.comps-card-button-text {
    font-size: 12px;
    font-family: var(--app-default-font-2);
}
.comps-card-button-text--employer{
    font-size: 12px !important;
    font-family: var(--app-default-font-2);
    color: rgb(19, 230, 184);
    font-weight: 700;font-size: 16px;
    background-color: rgba(255, 0, 0, 0);
    border: none;
    text-transform: uppercase;
    padding: 5px;
    padding: 0px;
    display: flex;

}

.comps-card-text-action {
    font-size: 16px;
    font-family: var(--app-default-font-2);
    font-weight: 600;
    cursor: pointer;
}
.comps-card-text-action:active {
    background-color: rgb(233, 233, 233);
    padding: 5px;
    box-sizing: border-box;
}
.comps-card-footer {
    padding: 5px;
    box-sizing: border-box;
    
}

.comps-card-footer button {
    cursor: pointer;
    outline: none;
}
.comps-card-footer button i:hover {
    font-size: 25px;

}
.comps-card-title {
    font-size: 16px;
    font-family: var(--app-default-font-2);
    font-weight: 600;
}
/*card com imagem*/
.comps-card-img {}

/*badge dos cards*/
.comps-card-badge {
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
    text-transform: uppercase;
}

.comps-card-badge-left {
    border-top-left-radius: var(--app-default-radius);
}
.comps-card-badge-right {
    border-top-right-radius: var(--app-default-radius);
    right: 0;
}

.comps-card-price {
    font-size: var(--app-title-size-small);
    font-family: var(--app-default-font-2);
    font-weight: 700;

}
.comps-card-sale {
    font-size: var(--app-text-small);
    font-family: var(--app-default-font-2);
    font-weight: 500;
    text-decoration: line-through;
}
.comps__content__scroll{
    min-height: 330px;
    height: 330px;
    overflow-y: auto;
}

/* ====================================================================
versão 1.1 do comps 
A partir desse ponto estamos adotando a convensão BEM
=====================================================================*/
.vav__bar {}
/* ----------------------------------- hr divider*/
.comps__hr{
    margin-top: 0px;
    margin-bottom: 0px;
    color: black;
    border-bottom: solid 1px rgb(216, 216, 216);

}
.hr{
    margin-top: 0px;
    margin-bottom: 0px;
    color: black;
    border-bottom: solid 1px rgb(216, 216, 216);
}
.nav__bar--fixed {
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
}


/*=====================================Off canvas ===========================*/
/* X  mobile*/
@media screen and (min-width:320px) and (max-width:680px) {
    .b-offCavanas {
        width: 100%;
    }

    .offcanvas__header {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        background-color: #e8e8e8;
    }

    .offcanvas__title {
        font-size: var(--app-default-font-2);
        font-size: 19px;
        font-weight: 600;
        color: var(--app-dark-gray);
        margin: 0;
    }

    .offcanvas__content {
        box-sizing: border-box;
    }

    .offcanvas__nav {
        padding: 8px;
        box-sizing: border-box;
        width: 100%;
        background-color: #e9e8ff;
    }

    .offcanvas__nav__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .offcanvas__nav__item {
        padding: 8px;
        box-sizing: border-box;
    }

    .offcanvas__toggle {
        font-size: 22px;
    }
    .offcanvas__toggle__item {
        font-size: 16px;
    }

}


/*=====================================Dropdownl ===========================*/
.dropdown__item {
    margin-top: 5px;
    margin-bottom: 2px;
}
.dropdown__link {
    font-size: var(--app-default-font-2);
    font-size: 14px;
    font-weight: 400;
}
/*=====================================Cards ===========================*/
.comps-card__header__acction{
    display: flex;
    justify-content: space-between;
    padding: 8px;
    padding-top: 0px;
    padding-bottom: 0px;
    box-sizing: border-box;
}
.comps-card__header__button{
    font-size: 22px;
    cursor: pointer;
    transition: 0.6s;

}
.comps-card__header__button:hover{
    background-color: rgb(255, 255, 255);
    color: black;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.b-card {}
.card__section {
    padding: 5px;
    box-sizing: border-box;
    font-size: 16px !important;
    font-family: var(--app-default-font) !important;

}
.comps__card{
    cursor: pointer;
}
.comps-card__section{
    padding: 5px;
    box-sizing: border-box;
    border: solid 0.25px var(--mb-gray-dark) ;
}
.comps-card__section__box{
    padding: 8px;
    box-sizing: border-box;
}
.comps-card__section__box__label{
    font-size: 14px;
    font-family: var( --app-default-font-2);
    font-weight: 300;
}
.comps-card__section__box__title{
    font-size: 12px;
    font-family: var( --app-default-font-2);
    font-weight: 700;
  }
.comps-card__section__box__value{
    font-size: 16px;
    font-family: var( --app-default-font-2);
    font-weight: 700;
}
.comps__card__image{
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
    margin-right: 5px;
    position: relative !important;
}
.comps-card__title{
    font-size: 18px;
    font-family: var( --app-default-font-2);
    font-weight: 800;
}
.comps__card__title{
    font-size: 12px;
    font-family: var( --app-default-font-2);
    font-weight: 600;
}

.comps__card__primary__action {
    font-family: var(--app-default-font-2);
    font-weight: 700 ;
    margin: 0;
    font-size: 12px;
    text-decoration: none ;
  }
  .comps__card__secondary__action {
    font-family: var(--app-default-font-2);
    font-weight: 400 !important;
    margin: 0;
    font-size: 15px;
    text-decoration: none !important;
  }
  .comps__card__primary__action:hover{
    text-decoration: none ;
  }
.comps-card__subtitle{
    font-size: 14px;
    font-family: var( --app-default-font-2);
    font-weight: 800;
}
.comps__card__footer{
    padding: 3px ;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}
.comps-card__inner__card{
    padding: 8px;
    box-sizing: border-box;
  }
.comps-card__footer{
    padding-top: 3px ;
    padding-bottom: 3px ;
    box-sizing: border-box;
}
.comps-card__accordion__content{
    margin-top: 0px !important;
}
.comps-card__flag{
    font-size: 12px;
    font-family: var( --app-default-font-2);
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: var(--app-default-radius);
    border-top-right-radius: var(--app-default-radius);
}
.comps__dot__flag{
    width: 15px !important;
    max-width: 15px;
    height: 15px;
    border-radius: 150px;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
}
.comps-card__image__icon{
    width: 45px;
    height: 45px;
    background-size: cover;
    background-position: center;
    border-radius: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    
}
.comps-card__link_area{
    text-decoration: none;
    font-family: var( --app-default-font-2);
    display: block;
}
.comps-card__link_area:hover{
    text-decoration: none; 
}
/* ----- Accordion for cards*/
.comps-card__accordion__title{
    font-size: 16px !important;
    font-family: var( --app-default-font-2);
    font-weight: 300;
}
.comps-card__app__accordion{
    margin-bottom: 0px;
    margin-top: 0px;
    box-sizing: border-box;
}

/* cards icon */
.card__button__icon{
    width: 50px;
    height: 50px;
    border-radius: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    padding: 9px;
    box-sizing: border-box;
}

.comps-card__section__box--button{
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
}
.card__button__text{
    font-family: var( --app-default-font-2);
    margin-top: 10px;
    font-size: 16px;
    font-weight: 400;
}

/* ===============================================================================================================================================
==========================================================================================================================snippet*/
/*posicionamento das imagens nos cards de produtos*/
.comps-card-img .imageCartSchedule {
    position: inherit !important;
    padding: 0 !important;
}

.text__limiter {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}
/*=====================================table ==============================*/
.comps-table__col--mkt-resume{
  

}
.comps-table__header--mkt-resume{
    
}
/*===================================== Tabs ==============================*/
.comps__title__tabs{
    font-family: var(--app-default-font-2) ;
    font-weight: 400 ;
    font-size: 14px !important;
}
.comps__tabs{
    margin-top: 20px;
}
.syst__tabs__item{
    font-family: var(--app-default-font-2) ;
    font-weight: 600 ;
    font-size: 12px  !important;
}
/*===================================== Widgets ===========================*/
.comps__widget__wrap {
    min-width: 130px;
}
@media only screen and (min-width:300px) and (max-width:480px) {
    .comps__widget__wrap {
        min-width: 100%;
        box-sizing: border-box;
    }
}
@media only screen and (min-width:480px) and (max-width:600px) {
    .comps__widget__wrap {
        min-width: 50%;
        box-sizing: border-box;
    }
}
.comps-widgets__space {}
.comps-widget__card {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.062);
    border-radius: var(--a-default-radius);
}
.comps-widget__card__section {
    padding: 8px;
    box-sizing: border-box;
}
.comps-widget__card--flex {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.062);
    border-radius: var(--a-default-radius);
    display: flex;

}

.comps-widget__body {
    box-sizing: border-box;
    width: 80%;
    max-width: 100%;
}
.comps-widget__body--expand {
    box-sizing: border-box;
    width: 100%;
}
.comps-widget__body--noicon {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.comps-widget__title {
    padding: 5px;
    box-sizing: border-box;
    min-height: 30px;
    display: flex;
    width: 100%;
    border-top-right-radius: var(--a-default-radius);
    font-family: var(--default-font);
    font-weight: 700;
    font-size: 13px;
}
.comps-widget__title--nobreak{
    padding: 5px;
    box-sizing: border-box;
    min-height: 30px;
    display: flex;
    width: 100%;
    border-top-right-radius: var(--a-default-radius);
    font-family: var(--default-font);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.comps-widget__icon {
    padding: 5px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    display: flex;
    border-top-left-radius: var(--a-default-radius);
    border-bottom-left-radius: var(--a-default-radius);
    width: 20%;
}
.comps-widget__value {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: var(--default-font);
    font-weight: 500;
    font-size: 13px;
}
.comps__widgets__titles{
    font-family: var(--default-font);
    font-weight: 500;
    font-size: 16px;
    color:rgb(150, 150, 150);
    width: 100%;
    
}
/*filtros com ícons color*/
.filter__item__icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    font-size: 32px;
}
/*===================================== funnel ===========================*/
.funnel__marketing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
}
.funnel__marketing__funnel {
    height: 80px;
    width: 450px;
    justify-content: center;
    transform: translate(0px);
    display: flex;
    align-items: center;
    position: relative;
    transition: 0.6s;
}
.funnel__marketing__label {
    width: 350px;
    height: 60px;
    margin-right: -150px;
}
.funnel__marketing__label {
    font-family: var(--default-font);
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
.funnel__marketing__icon {
    left: calc(50% - 25px);
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    border-radius: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
}
.funnel__marketing__wrap {
    width: 100%;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
}

.funnel__marketing__conversion {
    width: 30%
}
.funnel__marketing__row {
    display: flex;
    align-items: center;
}
.funnel__marketing__area {
    width: 70%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.funnel__marketing {
    width: 100%;
}
.funnel__marketing__funnel:hover {
    transform: translate(-30px);

}
.marketing__resume__section {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    box-sizing: border-box;
    align-items: center;
   
}
.marketing__resume__section__value{
    font-size: 25px;
    font-family: var(--default-font);
    font-weight: 400;
}
.marketing__resume__section__label{
    font-size: 16px;
    font-family: var(--default-font);
    font-weight: 500;
}
.funnel__marketing__arrow{
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-left: -140px;
}
.line-conecttio{
    border-top: solid 2px rgb(61, 61, 61);
    width: 40%;
    margin-left: auto;
    margin-right: 18%;
    position: relative;
    margin-top: 30px;
}
@media(max-width:992px){
    .line-conecttio{
        display: none;
    }
}
.line-conecttio-up-left{
    width: 2px;
    height: 50px;
    background-color: rgb(61, 61, 61);;
    margin-top: -0px;
    position: absolute;
    top: -50px;
}
.line-conecttio-up-right{
    width: 2px;
    height: 50px;
    background-color: rgb(61, 61, 61);;
    margin-top: -0px;
    position: absolute;
    top: -50px;
    right: 0px;
}
@media only screen and (min-width:300px) and (max-width:600px) {
    .funnel__marketing__conversion{
        margin-top: 50px;
    }
    .funnel__marketing__wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }

    .funnel__marketing__conversion {
        width: 100%
    }
    .funnel__marketing__area {
        width: 100%;
        display: block;

        overflow-x: auto;
        padding: 0;
    }
    .funnel__marketing {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex-direction: column;
    }
}
@media only screen and (min-width:601px) and (max-width: 992px){
    .funnel__marketing__conversion{
        margin-top: 50px;
    }
    .funnel__marketing__arrow{
        width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
        margin-left: -40px;
    }
    .funnel__marketing__wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }

    .funnel__marketing__conversion {
        width: 100%
    }
    .funnel__marketing__area {
        width: 100%;
        display: block;

        overflow-x: auto;
        padding: 0;
    }
    .funnel__marketing {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex-direction: column;
    }


}

/*===================================== MENU DROP DOWN ===========================*/
.comps-dropmenu__card__value{
    font-size: 16px;
    font-family: var(--default-font);
    font-weight: 600;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0px;
    font-size: 22px;
    border-radius: 150px;
}

/*====================================== TAB BAR ===========================*/
.comps__tap__bar {
    width: 100%;
    position: fixed;
    bottom: 0px;
    background-color: white;
    list-style: none;
    padding: 5px 5px;
    box-sizing: border-box;
    z-index: 98;
    justify-content: space-between;
    margin: 0px;
    align-items: center;
    background-color: white;
    padding-left: 30px;
    padding-right: 30px;
    
}

.tap__bar__wrap__btn {
    font-size: 32px;
}

.tap__bar__wrap__btn--booking {
    font-size: 32px;
    border: solid 0px #010846;
    width: 50px;
    height: 50px;
    border-radius: 150px;
    margin-top: -35px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 15%);
}

.tapbar__up__drop__item{
    font-size: 14px;
}

/*====================================== acordeons types ===========================*/
.accordion__title{
    font-size: 16px;
    font-family: var(--default-font);
    font-weight: 600;
}
.accordion__action--schedule{
    display: flex;
    flex-wrap: wrap;

}
/*====================================== Speed Actions ===========================*/
.comps__speed__actions{
    list-style: none;
    padding: none;
    margin: none;
    position: fixed;
    left: 0px;
    top: 150px;
    background-color: white;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 15%);

}
.comps__speed__item{
    width: 35px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}
/*====================================== DOT screen Suporte ===========================*/
.comps__dot__support__screen{
    width: 50px;
    height: 50px;
    position: fixed;
    top: 50%;
    right: 0px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 15%);
    border-radius: var( --app-default-radius);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
}
.comps__dot__support__screen--inner{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 20%;
    right: 0px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 15%);
    border-radius: var( --app-default-radius);
    background-color: rgb(102, 77, 248);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
}
.comps__support__canvas{
    font-size: 16px;
    font-family: var(--default-font);
    font-weight: 400;
    background-color: white !important;
    color: var( --app-text-color-1) !important;
    box-shadow: 0px 6px 12px rgb(0 0 0 / 6%);
    margin-top: 15px;
    margin-bottom: 16px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

}
.comps__support__step{
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 15%);
    font-size: 16px;
    font-family: var(--default-font);
    font-weight: 400;
    margin-bottom: 5px;
    margin-bottom: 10px;
    display: flex;
    border-radius: var( --app-default-radius);
}
.comps__support__step__number{
    padding: 10px;
    box-sizing: border-box;
    background-color: var(--app-soft-green);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: var( --app-default-radius);
}
.comps__support__step__title{
    font-size: 16px;
    font-family: var(--app-default-font-2);
    font-weight: 700;
    margin-bottom: 8px;
}
.comps__support__step__des{
    margin: 0px;
}

.comps__dot__support__close{
    position: fixed !important;
    z-index: 1000;
    top: 32px !important;
    padding: 5px;
    right: none;
    left: 307px;
    width: 68px;
    border-radius: 150px !important;
    color: white !important;
    background-color: var(--app-soft-red) !important;
    padding: 8px !important;
    display: flex;
    text-align: left;
    padding-left: 17px !important;
}
.comps__support__canvas__title{
    font-size: 18px;
    font-family: var(--app-default-font-2);
    font-weight: 600;
    color: #5a5a5a !important;
    width: 100%;
    text-align: center;
}

/*====================================== Serviços em Lista  ===========================*/
.comps__list__service__wrap{
    list-style: none;
    padding: 0px;
    box-sizing: border-box;
    margin: 0px;
}

.comps__list__service__list{
    padding: 8px;
    box-sizing: border-box;
}
.comps__list__service__image{
    min-width: 50px;
    min-height: 50px;
    margin-right: 10px;
    
    background-position: center;
    background-size: cover;
}
.comps__list__service__name{
    margin: 0px;
    font-family: var(--app-default-font-2);
    font-size: 16px;
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 8px;
    margin-top: 5px;
}
.comps__list__service__name--inner{
    margin: 0px;
    font-family: var(--app-default-font-2);
    font-size: 16px;
}
.comps__list__service__price{
    margin: 0px;
    font-family: var(--app-default-font-2);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}
.comps__list__service__inputData{
    margin-bottom: 8px;
}
.comps__list__service__input{
    font-size: 12px;
    transition: 0.6s;
    border-radius: 50px;
    padding-left: 8px;
}
.comps__list__service__inputData {
    align-items: center;
}
.comps__list__service__inputData i{
    font-size: 16px;
}
.comps__list__service__input{
    width: 100px;
}
.comps__list__service__input:focus{
    font-size: 14px;
    background-color: rgb(245, 245, 255);
}
.comps__list__service__returnName{
    margin: 0px;
    font-family: var(--app-default-font-2);
    font-size: 14px;
    font-weight: 400;
}
.comps__list__service__Return{
    margin: 0px;
    font-family: var(--app-default-font-2);
    font-size: 12px;
    padding: 5px;
    box-sizing: border-box;
    background-color: rgb(228, 224, 255);
    border-radius: 150px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.comps__list__service__item{
    display: flex;
    align-items: stretch;
    background-color: rgb(255, 255, 255);
    border-radius: 4px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.062);
    min-height: 50px;
    padding-left: 5px;

}
.comps__list__service__datails{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.comps__list__service__actions{
    display: flex;

}
.comps__list__service__select{
    display: flex;
    background-color: rgb(209, 255, 217);
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
}
.comps__list__service__inner{
    margin: 0px;
}
.comps__list__service__inner__card {
    margin-top: 0px !important;
    background-color: white;
    padding: 8px;
    box-sizing: border-box;
}
/*tarefas*/
.comps__list__job__wrap{
    list-style: none;
    padding: 0px;
    box-sizing: border-box;
    margin: 0px;
}
.comps__list__job__list{
    padding: 8px;
    box-sizing: border-box;
}
.comps__list__job__image{
    min-width: 40px;
    min-height: 40px;
    margin-right: 10px;
    
    background-position: center;
    background-size: cover;
}
.comps__list__job__name{
    margin: 0px;
    font-family: var(--app-default-font-);
    font-size: 16px;
    margin-bottom: 10px ;

}
.comps__list__job__prof{
    margin: 0px;
    font-family: var(--app-default-font-);
    font-size: 16px;
    margin-bottom: 10px ;


}
.comps__list__job__name--inner{
    margin: 0px;
    font-family: var(--app-default-font-);
    font-size: 16px;
}
.comps__list__job__price{
    margin: 0px;
    font-family: var(--app-default-font-);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px ;
}
.comps__list__job__prof{
    margin: 0px;
    font-family: var(--app-default-font-);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 10px ;
}
.comps__list__job__Return{
    margin: 0px;
    font-family: var(--app-default-font-);
    font-size: 12px;
    padding: 5px;
    box-sizing: border-box;
    background-color: rgb(228, 224, 255);
    border-radius: 150px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.comps__list__job__item{

    padding: 5px;
    align-items: stretch;
    flex-wrap: wrap;
    border-radius: 4px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.062);
    position: relative;
}
/* flag da tarefa*/
.comps__list__job__flag{
    width: 100%;
    padding:4px;
    padding-left: 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    border-radius: 150px;

    margin-top: -5px;
}
.comps__list__job__body{
   display: flex;
}
.comps__list__job__datails{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.comps__list__job__flag{

}
.comps__list__job__actions{
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 5px;
    background-color: rgb(243, 243, 243);
    padding: 10px 0px;
    box-sizing: border-box;
    border-radius: 10px;
    justify-content: center;
    

}
.comps__list__job__actions button{
    margin:5px 0px;
}
.comps__list__job__item{
    position: relative;
}
.comps__list__job__select{
    display: flex;
    background-color: rgb(209, 255, 217);
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
}
.comps__list__job__inner{
    margin: 0px;
}
.comps__list__job__inner__card {
    margin-top: 0px !important;
    background-color: white;
    padding: 8px;
    box-sizing: border-box;
}

.comps__job__accordion__content{
    padding: 8px;
    box-sizing: border-box;
}
.comps__grup__flags{
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    border-top-left-radius: 4px;
   margin-bottom: 8px;
   margin-left:-15px;
}
.comps__grup__flags--desktop{
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    border-top-left-radius: 4px;
   margin-bottom: 8px;
   flex-wrap: wrap;

}
  .comps__flags__item{
      padding-left: 8px;
      padding-right: 8px;
      padding-top: 2px;
      padding-bottom: 2px;
      border-radius: 50px;
      margin-right: 2px;
      font-size: 9px;
      margin-bottom: 2px;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-height: 18px;
      display: flex;
    align-items: center;
  }
/* ------------------------------------------ Guia de tela */
.comps__IneedHelp{
    position: fixed;
    left: -25px;
    bottom: 50px;
    height: 30px;
    width: 80px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.062);
    border: none;
    transform: rotate(90deg);
    background-color: var(--app-soft-green);
    font-size: 16px;
}

.comps__help__drop__item{
    font-size: 12px !important;
}
.comps__IneedHelp--default{
    position: fixed;
    right: -25px;
    top: 50%;
    height: 30px;
    width: 80px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 6%);
    border: none;
    transform: rotate(-90deg);
    background-color: #ffa2be;
    font-size: 16px;
    z-index: 100;
}
.comps__IneedHelp--schedulle{
    position: absolute;
    right: -25px;
    top: 20%;
    height: 30px;
    width: 80px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 6%);
    border: none;
    transform: rotate(-90deg);
    background-color: var(--app-soft-blue);
    color: white;
    font-size: 16px;
    z-index: 100;

}
.comps__IneedHelp-Dashboard{
    position: absolute;
    right: -25px;
    top: 200px;
    height: 30px;
    width: 80px;
    max-width: 80px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 6%);
    border: none;
    transform: rotate(-90deg);
    background-color: var(--app-soft-blue);
    color: white;
    font-size: 16px;
    z-index: 100;
}
.comps__IneedHelp-Dashboard-consuting{
    position: absolute;
    right: -44px;
    top: 312px;
    height: 30px;
    width: 120px;
    max-width: 120px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 6%);
    border: none;
    transform: rotate(-90deg);
    background-color: var(--app-soft-red);
    color: white;
    font-size: 16px;
    z-index: 100;
}
.comps__IneedHelp--schedulle-other{
    position: absolute;
    right: -25px;
    top: 25%;
    height: 30px;
    width: 80px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 6%);
    border: none;
    transform: rotate(-90deg);
    background-color: var(--app-soft-red);
    color: white;
    font-size: 16px;
    z-index: 100;
}
/*====================================== Campos  ===========================*/
.comps__input{
    font-size: 16px;
}
.comps__field{
    border-width: 0px !important;
    border-bottom-width: 1px !important;
}
.comps__legend{
    font-family: var(--app-default-font-2);
}
.comps__checkbox{
    display: flex;
    align-items: center;
}
.comps__checkbox__label{
    display: flex;
    align-items: center;

}
.comps__select__options{
    font-size: 16px;  
}
.comps__select{
    font-size: 16px !important;  
}
.comps__input::placeholder{
    font-size: 16px  ;
}
.comps__select{
    font-size: 16px ;
}
.comps__group__input{
    display: flex;
    align-items: center;
}
.comps__group__input__stack{
    display: flex;
    flex-direction: column;   
}
.comps__group__input__stack select{
    font-size: 12px ;
}
.comps__field__section{
    padding: 8px;
    box-sizing: border-box;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
    padding: 8px ;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: white;
}
.comps__stepform__item{
    width: 50px;
    height: 50px;
    font-size: 22px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 150px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 12;

}
.comps__stepform{
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    z-index: 2;
}
.comps__data__set{
    padding-bottom: 10px;
    padding-top: 10px;
}
/* Header de filtros*/
.comps__header__consulting{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
    
}
.comps__header__consulting__left{
    
}
.comps__header__consulting__center{
    
}
.comps__header__consulting__right{
    
}

/*====================================== Components Modal  ===========================*/
.comps__modal__header{
    margin: 0px;
    font-size: 16px;
    font-family: var(--app-default-font-2);
    padding: 10px;
    box-sizing: border-box;

}
.comps__modal__title{
    margin: 0px;
    font-size: 16px;
    font-family: var(--app-default-font-2);
}
.comps__modal__full{
    min-height: 100vh !important;
    background-color: white;
}
.comps__modal__full__body{
    min-height: 86vh !important;
}
.comps__modal__titles{
    margin: 0px;
    font-size: 16px;
    font-family: var(--app-default-font-2);
    font-weight: 700;
}
.comps__modal__subtitle{
    margin: 0px;
    font-size: 14px;
    font-family: var(--app-default-font-2);
    font-weight: 600;
}
.comps__modal__label{
    margin: 0px;
    font-size: 14px;
    font-family: var(--app-default-font-2);
    font-weight: 300;
    margin-bottom: 8px;
}
.comps__modal__data__group{
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: solid 1px rgb(230, 230, 230);
}
.comps__modal__text{
    margin: 0px;
    font-size: 13px;
    font-family: var(--app-default-font-2);
    font-weight: 300;
}
/*====================================== Modelos de Listagem  ===========================*/
.comps__get__wrap{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.comps__get__wrap--coll-2l{
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-wrap:wrap ;

}

.comps__get__wrap--coll-2l .comps__get__list{
    width: calc(50% - 20px);
}
.comps__get__list{
    padding: 8px;
    box-sizing: border-box;
}
.comps__get__list__item{
    width: 100%;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.062);
    background-color: white;
}
.comps__get__list__header{
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
.comps__get__list__name{
    font-size: 16px;
    font-family: var(--app-default-font-2);
}
.comps__get__list__viste{
    font-size: 16px;
    font-family: var(--app-default-font-2);
}
.comps__get__list__box{
    padding: 8px;
    box-sizing: border-box;
}
.comps__get__list__profileImg{
    width: 40px;
    height: 40px;
    border-radius: 150px;
    background-position: center;
    background-size: cover;
}
.comps__get__list__content{
    justify-content: space-between;
    align-items: center;
}
.comps__get__list__data{
    font-size: 14px;
    font-family: var(--app-default-font-2);
    margin: 0px;
    margin-bottom: 5px;
}
.comps__get__list__footer__data{
    
    font-size: 14px;
    font-family: var(--app-default-font-2);
    margin: 0px;
    margin-bottom: 10px;
}
.comps__get__list__footer{
    padding: 0px;
    box-sizing: border-box;
}
.comps__get__footer__content{
    font-size: 14px;
    font-family: var(--app-default-font-2);
    margin-top: 0px !important;
    padding: 8px;
    box-sizing: border-box;
}
.comps__get__list__flag{
    padding: 2px;
}
/*====================================== Profile Header  ===========================*/
.comps__profile__header{
    padding: 8px;
    display: flex;
    align-items: center;
    width: 100%;


}

.comps__profile__header__image{
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    margin-right: 10px;
    border-radius: 150px;
}
.comps__profile__header__datails{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.comps__profile__header__data{
    font-size: 15px;
    font-family: var(--app-default-font-2);
    margin-bottom: 5px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}
.comps__profile__name{
    font-size: 15px;
    font-family: var(--app-default-font-2);
    margin: 0px;
}
/*====================================== Listagem de horário : Time  ===========================*/
.comps__time__list{
    padding: 0px ;
    margin: 0px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

 
.comps__time__wrap__scroll  .comps__time__list{
    flex-wrap: nowrap;
    overflow: scroll;
}
.comps__time__item{
    padding-left: 4px;
    padding-right: 4px;
    width: 140px;
    min-width: 140px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: white;
    border-top: solid 1px  rgb(219, 219, 219);
    border-bottom: solid 1px  rgb(219, 219, 219);
    border-right: solid 1px  rgb(219, 219, 219);
    font-size: 14px;
    font-weight: 600;
    font-family: var( --app-default-font-2);
    cursor: pointer;
    flex-direction: column;
    transition: 0.6s;

}
.comps__time__item:hover{
    width: 160px;
    min-width: 160px;
}

.comps__time__wrap__scroll .comps__time__item:nth-child(2){
    margin-left: 140px;
}
.comps__time__dataInfo{
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: solid 1px rgb(211, 211, 211);
    margin-bottom: 5px;
    
    
}
.comps__time__item:hover  .comps__time__dataInfo{
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    
}
.time__dataInfo__text{
    font-size: 10px;
    transition: 0.6s;
}
.comps__time__item:hover .time__dataInfo__text{
    font-size: 12px
}
.comps__time__wrap__scroll .comps__time__item{
    
}
.comps__time__item:hover{
    background: #fffdef;
}
.comps__time__item:first-child{
    background-color: white;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.062);
    border-left: solid 1px  rgb(219, 219, 219);

}
.comps__time__wrap__scroll .comps__time__item:first-child{
    position: absolute;
    z-index: 10;
}
.comps__time__wrap__scroll .comps__time__list:hover .comps__time__item:first-child{
    position: absolute;
}
.comps__group__time__tag{
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
}
.comps__time__tag{
    width: 15px;
    height: 15px;
    border-radius: 80px;
    background: #0081fa;
    margin-right: 8px;
    cursor: pointer;

}
.comps__time__wrap__scroll{
    position: relative;
}
.comps__time__wrap__scroll:hover .comps__group__time__button{
    opacity: 0.9;
}
.comps__group__time__button{
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0.0;
}
#slideLeft__time{
    border: none;
    background: #0081fa;
    font-size: 19px;
    color: white;
}
#slideRight__time{
    border: none;
    background: #0081fa;
    font-size: 19px;
    color: white;
}
.drop__time{
    position: fixed !important;
    border-radius: 10px !important;
}
.drop__time__data{
    font-size: 16px;
}

/* -------------------------------------------------------- smart table*/
.comps__table__smart__status {
    padding: 2px 20px;
    border-radius: 150px;
    text-align: center;
    font-size: 12px;
    max-width: 150px;
}
.smart__table__go .comps__smart__td--flex{
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}
.mode_card{
    border-radius: 50px;
    font-size: 12px;
    border: none;
    padding: 6px 25px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-family: var(--mb-default-font);
    font-weight: 500;
    outline: none;
    text-decoration: none;
    text-align: center;
    justify-content: center;
    max-height: 32px;
    cursor: pointer;
    margin-right: 5px;
}
.mode_list{
    border-radius: 50px;
    font-size: 12px;
    border: none;
    padding: 6px 25px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-family: var(--mb-default-font);
    font-weight: 500;
    outline: none;
    text-decoration: none;
    text-align: center;
    justify-content: center;
    max-height: 32px;
    cursor: pointer;
    margin-right: 5px;
}
/* -------------------------------------------------------- Componente Filtros*/

/* Filtros rápidos*/
.comps__fast__filters__ul{
    display: flex;
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-top: 20px;
    margin-bottom: 20px;

flex-wrap: wrap;
}
.comps__fast__filters__li{
    padding: 8px;
    box-sizing: border-box;
}
.comps__fast__filters__button{
    font-size: 12px;
    font-family: var(--app-default-font-2);
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.comps__search{
    display: flex;

}

/* Accordions de filtros */
.comps__filter__body{
    position: relative;
}
.comps__button__filter{
    position: absolute;
    right: 10px;
    top: 10px;
}
.comps__filters__section__title{
    font-size: 16px !important;
    font-family: var(--app-default-font-2);
    height: 22px;
    font-weight: 600;
}
.comps__filter__bar__action{
    position: absolute;
    top: 0px;
    position: absolute;
    top: -60px;
    right: 0px;
}
/* -------------------------------------------------------- Help Tooltips*/
.comps_tooltips_content {
    width: 100%;
    position: relative;
    padding: 8px;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}

.comps_tooltips_content {
    font-size: 15px;
}

.comps_tooltips_footer {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    background-color:transparent;
    border-top: solid 0.21px #545454;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    display: flex;
    justify-content: space-between;
}

.comps_tooltips__btn {
    border-radius: 150px;
    border: none;
    background-color: transparent;
}
.tooltips__btn__back{
    background-color: var(--app-soft-red);
}
.tooltips__btn__next{
    background-color: var(--app-soft-green);
}

.tippy-box[data-theme~='sistema303'] {
    background-color: #e2dffd;
    color: black;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.062);
}

.tippy-box[data-theme~='sistema303'][data-placement^='top']>.tippy-arrow::before {
    border-top-color: #e2dffd;
}

.tippy-box[data-theme~='sistema303'][data-placement^='bottom']>.tippy-arrow::before {
    border-bottom-color: #e2dffd;
}

.tippy-box[data-theme~='sistema303'][data-placement^='left']>.tippy-arrow::before {
    border-left-color: #e2dffd;
}

.tippy-box[data-theme~='sistema303'][data-placement^='right']>.tippy-arrow::before {
    border-right-color: #e2dffd;
}
/* ------------------------------- Charts*/
.comps__chart__wrap{
    position: relative;
}
.comps__chart--item-reports{
    width: 100%;
    max-height: 500px;
}
/* ------------------------------- 
Versão 1.2.1 do Comps 
*/

/* Detalhes da versão: 

    1 - A parti dessa versão todos os componentes vão começar a serem pesando para 
    SCSS/Less afi de otimizar o desempenho e de carregamento e diminuir a quantidade de 
    elementos soutos e afins

    2 - Adaptações de comentes/blocos devem seguir a estrutura 100% BEM 
    para preservar o bloco original.

    3 - Evitar usar cascatas para modificar componentes caso seja necessário 
    uma modificação especifica usar o modo BEM cmo enunciado na diretriz [2]

    4 - Sempre inserir a descrição detalha do que e para que o bloco
    de componente serve.

    5 - Usar sempre que possivel o theme-default para compor cores. O recomendo
    porém é o uso de cores em formato inline, dentro do arquivo php/html
    
?*

/* ------------------------------- 
Component Name: Widget de resumos [comps__widget__resume]
Descrição: estes são os elementos  de resumo no rodapé das tabelas e afins
por exemplo: para adicionar os valores totais de uma tabela ou tela
*/
:root{
    --c-default-radius:5px;
}
.comps__widget__resume{
    position: relative;
}
.comps__widget__resume-title{
    font-size: var(--app-text-small);
    font-family: var(--app-default-font-2);
    font-weight: 700;
    color: var(--app-dark-gray);
}
.comps__widget__resume-value{
    font-size: var(--app-text-large);
    font-family: var(--app-default-font-2);
    font-weight: 700;
    color: var(--app-dark-gray);
}
.comps__widget__resume-indicator-right{
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 19px;
    padding: 5px;
    box-sizing: border-box;
    border-top-right-radius:5px ;
    
}
/* ------------------------------- 
Component Name: Tamanho de textos  [comps__text]
Descrição: Este componente contra com base no theme-default o tamanho 
das fonts em elementos.

Você pode inserir por exemplo uma das classes de controle para aplicar um tamanho
de texto padrão em um componente.

*/
.comps__text__small{
    font-size:var(--app-text-small) ;
}
.comps__text__default{
    font-size:var( --app-text-default) ;
}

/* ------------------------------- 
Component Name: Raio da Borda Padrão  [default__radius]
Descrição: Classe para controle padrão do arredondamento das bordas
*/

.default__radius{
    border-radius: var(--c-default-radius);
}
.default__radius--top{
    border-top-left-radius: var(--c-default-radius);
    border-top-right-radius: var(--c-default-radius);
}
.default__radius--left-top{
    border-top-left-radius: var(--c-default-radius);
}
.default__radius--right-top{
    border-top-right-radius: var(--c-default-radius);
}
/* ------------------------------- 
Component Name: Card Accordions   [comps__accordion__card]
Descrição: É um tipo de accordion estilizado como Card usando o toggle do
uikit. É usando para ter um estilo de card em um elemento de accordion

Por exemplo, se você tem muitos dados para serem 3exibidos em um card pode usar essa
opção para ocultar o que não for prioritário

*/
.comps__accordion__card{
    position: relative;
}
.comps__accordion__card--header-label{
    font-size: var(--app-text-small);
    font-family: var(--app-default-font-2);
    font-weight: 700;
    color: var(--app-dark-gray);
    max-width: 100px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.comps__accordion__card--header-label{
    font-size: var(--app-text-small);
    font-family: var(--app-default-font-2);
    font-weight: 700;
    color: var(--app-dark-gray);
}
.comps__accordion__card--header-value{
    font-size: var(--app-text-medium);
    font-family: var(--app-default-font-2);
    font-weight: 700;
    color: var(--app-dark-gray);
    max-width: 100px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.comps__accordion__card--actions{
    margin-top: 5px;
    padding-top:5px;
    border-top-width: 1px;
    border-top-style: solid;
}
.comps__accordion__card-content-label{
    font-size:  14px;
    font-family: var(--app-default-font-2);
    font-weight: 600;
}
.comps__accordion__card--footer-right{
    position: absolute;
    right: -40px;
    top:-10px;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    box-sizing: border-box;
    min-height: 85px;

    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.062);
    font-size: 32px;
}
.comps__accordion__card-content-title{
    font-size: var(--app-text-small);
    font-family: var(--app-default-font-2);
    font-weight: 700;
    color: var(--app-dark-gray);

    display: block;


    font-size: 18px;
}

/* ------------------------------- 
Component Name: Section de conteudo   [comps__section]
Descrição: É um elemento que controla a largura do conteudo da página

Deve ser usado para ter por exemplo uma largura máxima de conteúdo. o valor 
base é de 70% da página. Para personalizar  os valores em páginas especificas
 deve ser usado manipuladores como no exemplo abaixo.

    .comps__section--80{
        max-width:80%
    }

    Dessa forma temos uma largura máxima de 80% da página ou o valor desejado


*/
.comps__section{
    width: 70%;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.comps__section__tittle{
    font-family:  var(--app-default-font-2);
    font-weight: 700;
    font-size: 16px;
    padding-bottom: 5px;
}
.comps__section__header{
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e5e5e5;
}
@media only screen and (min-width:1025px) and (max-width:1444px){
    .comps__section{
        width: 90%;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media only screen and (min-width:762px) and (max-width:1024px){
    .comps__section{
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (min-width:300px) and (max-width:761px){
    .comps__section{
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .comps__section__tittle{
        font-family:  var(--app-default-font-2);
        font-weight: 700;
        font-size: 12px;
        padding-bottom: 5px;
    }
}
/* ------------------------------- 
Component Name: Botões    [comps__button]
Descrição: É um elemento para botões padrões do sistema 303

*/
.comps__button{
    border-radius: 150px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    font-family:  var(--app-default-font-2);
    font-weight: 600;
}
.comps__button__primary{
    

}
.comps__button__text{
    font-family:  var(--app-default-font-2);
    font-weight: 700;
    background-color: transparent;
    border: none;
    font-size: 15px;
    cursor: pointer;
} 


.comps__button__icon i{
    margin-left: 40px;
    font-size: 22px;

}
.comps__button__exports{
    font-size: 32px;
}
.b-button {
    padding-left: 25px;
    padding-right: 25px;
    height: 32px;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    width: auto;
    border-radius: 150px;
    font-size: 12px;
}
.b-button__text {
    font-size: var(--app-default-font-2);
    font-size: 12px;
    font-weight: 400;
}
.comps__group__buttons {

}
.comps__button{
    position: relative;
}
.comps__button__count{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    top: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 150px;
    font-size: 12px;
}

/* ------------------------------- 
Component Name: Botões    [comps__header__screen]
Descrição: Elemento para titulos de páginas do sistema

exemplo do bloco:

<div class="uk-card uk-card-default comps__padding--10 default__radius comps__screen__tittle">
    Indique e Ganhe
</div>

*/

.comps__screen__tittle{
    font-family: var(--app-default-font-2);
    font-size: var(--app-title-size-small);
    font-weight: 700;
    color: var( --app-text-color-1);
}
.comps__screen__tittle--image{
    width: 80px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.comps__screen__tittle__inner{
    
}
/* ------------------------------- 
Component Name: Botões    [comps__vertical__tabs]
Descrição: tabs tipo accordion verticais

*/
.comps__vertical__tabs .uk-active{
    border-bottom: solid 4px var(--app-dark-blue);
}

/* ------------------------------- 
Component Name: Botões [comps__modal]
Descrição: Modal de contepudo baseado no uikit
*/

.comps__modal__title{
font-family: var(--app-default-font-2);
font-size: var(--app-title-size-small);
font-weight: 700;

}
@media only screen and (min-width:300px) and (max-width:726px){
    .comps__modal__full__mobile{
        padding: 0px !important;
    }
    .comps__modal__full__mobile .comps__modal__full__mobile--body{
        max-height: calc(100vh - 55px) !important;
    }
    .comps__modal__full__mobile--footer{
    position: fixed;
    bottom: -1px;
    width: 100%;
    background-color: white;
    left: 0px;
    max-width: 100%;
    box-sizing: border-box;
    }

}