@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --var-FontStyledMain: "Poppins", sans-serif;

    --var-ColorBackground: #F9F6EF;
    --var-ColorDestaque: #FFC626;
    --var-ColorTerciario: #2a7c11;
    --var-ColorCardSchedule: #A5C8FF;
    --var-ColorTextBase: #161616;
    --var-ColorNeutro: #8C8C8C;
    --var-ColorNeutroClear: #cccccc;
}

*{
    border: 0px;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;

    -webkit-tap-highlight-color: transparent;
}

body{
    background-color: var(--var-ColorBackground);
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.messageCard{
    padding-top: 10px;
}
.messageCard p{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: gray;
}

/*DETALHES UNIVERSAIS DE FORMULÁRIOS*/
.contentInputEditForm{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 5px;
}
.contentInputEditForm p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: #8c8c8c;
    padding-left: 10px;
}

/*MENU*/
.menuDashboard{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    background-color: var(--var-ColorTextBase);
    width: max-content;
    height: 100%;
    border-radius: 10px;
    padding: 20px;
    gap: 50px;
}
.header-menu{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transform: translateY(-10px);
    width: 100%;
    height: 30px;
    transition: 1s;
}
.headerMenu-open{
    width: 180px;
    flex-direction: row;
}
.headerMenu-close{
    width: 20px;
    flex-direction: row-reverse;
}
.logoMenu{
    text-decoration: none;
    font-size: 15pt;
    font-weight: 600;
    font-family: var(--var-FontStyledMain);
    color: var(--var-ColorBackground);
}
.logoMenu-active{
    display: block;
}
.logoMenu-inactive{
    display: none;
}
@keyframes logoMenu {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.header-menu button{
    background: none;
    height: 20px;
    width: 20px;
    cursor: pointer;
}
.header-menu button img{
    height: 100%;
    width: 100%;
}

.nav-menu{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
}
.nav-menu-active{
    display: flex;
}
.nav-menu-inactive{
    display: flex;
}

.nav-menu ul{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 12px;
}
.btnSelectDisplay{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    gap: 20px;
    cursor: pointer;
    height: 30px;
}
.btnSelectDisplay img{
    height: 20px;
    width: 20px;
}
.nameLinkMenu{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    text-wrap: none;
}
.nameLinkMenu-active{
    display: flex;
    width: 100%;
}
.nameLinkMenu-inactive{
    display: none;
}
@keyframes motionDisplaySelector {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.inactive-menu{
    color: var(--var-ColorBackground);
}
.active-menu{
    color: var(--var-ColorNeutro);
}
.active-menu img{
    filter: brightness(0) saturate(100%) invert(55%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%);
}

/*RESPONSIVIDADE MENU*/
@media (max-width: 1280px) {
    .headerMenu-open{
        width: 100%;
    }
    .headerMenu-close{
        width: 20px;
    }
    .btnSelectDisplay img{
        height: 20px;
        width: 20px;
    }
    .btnSelectDisplay p{
        font-family: var(--var-FontStyledMain);
        font-size: 10pt;
        font-weight: 500;
    }
}
@media (max-width: 800px) {
    .menuDashboard{
        padding: 17px 20px;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1000;
    }
    .menuDashboard-inactive{
        height: max-content;
    }
    .header-menu{
        width: 160px;
        transform: translateY(0px);
        transition: 0s;
    }

    .headerMenu-close{
        width: 20px;
    }

    .nav-menu-active{
        display: flex;
    }
    .nav-menu-inactive{
        display: none;
    }

    .btnSelectDisplay-active{
        display: flex;
    }

    .btnSelectDisplay-inactive{
        display: none;
    }

    .iconMenu-active{
        display: flex;
    }
    .iconMenu-inactive{
        display: none;
    }

    .nameLinkMenu-active{
        display: flex;
        width: 100px;
    }
    .nameLinkMenu-inactive{
        width: 0px;
    }
}

/*DISPLAY*/
.container-display{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    gap: 10px;
    border-radius: 10px;
    margin-left: 10px;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}
.active-display{
    display: flex;
}
.inactive-display{
    display: none;
}
.containerNotify{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    transition: 0.5s;
}
.containerNotify p{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.containerNotify button{
    background: none;
    height: 20px;
    width: 20px;
    cursor: pointer;
}
.containerNotify button img{
    height: 100%;
    width: 100%;
}
.active-notify{
    position: absolute;
    top: 0px;
    left: 0px;
}
.inactive-notify{
    position: absolute;
    top: -80px;
    left: 0px;
}
@media (max-width: 800px) {
    .containerNotify{
        padding: 20px;
        width: calc(100% - 90px);
        transition: 0.5s;
    }
    .active-notify{
        position: fixed;
        top: 11px;
        left: 80px;
    }
    .inactive-notify{
        position: fixed;
        top: -80px;
        left: 70px;
    }
}

/*-------------DASHBOARD MAIN----------------------------------------*/
.boxMSGDashboard{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
    position: absolute;
    
    width: max-content;
    padding: 0px;
    height: auto;
    top: 0px;
    justify-self: center;
    z-index: 2000;
    gap: 10px;
}
.boxMSGDashboard img{
    height: 15px;
    width: auto;
}
.boxMSGDashboard p{
    text-align: center;
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.mainDashboard{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    transition: 1s;
    padding-top: 0px;
}
.notifyInMain{
    height: calc(100% - 80px);
    margin-top: 40px;
    overflow-y: scroll;
    align-items: start;
}
.partOneDashboard{
    width: 60%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.containerFastCards{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 200px;
    gap: 10px;
}
.cardDashboard{
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.048);
    border-radius: 10px;
    padding: 20px;
    position: relative;
}
.header-cardDashboard{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 5px;
}
.header-cardDashboard h2{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
}

#selectAgendamentosPeriodo, #selectClientesPeriodo, #selectReceitaPeriodo {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border: none;
    outline: none;
}

#selectAgendamentosPeriodo, #selectClientesPeriodo, #selectReceitaPeriodo {
    font-family: var(--var-FontStyledMain);
    font-weight: 400;
    display: block;
    width: max-content;
    font-size: 9pt;
    color: var(--var-ColorTextBase);
    cursor: pointer;
    text-decoration: underline;
    text-align: start;
}

.container-DataCard{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 5px;
    position: absolute;
    top: 80px;
}
.container-DataCard h3{
    font-family: var(--var-FontStyledMain);
    font-size: 22pt;
    font-weight: 500;
    color: grey;
}

.cifraCardDashboard{
    color: var(--var-ColorTextBase) !important;

}

.containerGraphics-Dashboard{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% - 230px);
    width: 100%;
    gap: 10px;
}
.headerGraphic{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.headerGraphic h2{
    font-size: 12pt;
    font-family: var(--var-FontStyledMain);
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
#containerTaxaConclusao{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: grey;
}
.line-graphics{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50%;
    width: 100%;
}
.containerGraphic{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    height: 100%;
    width: 100%;
    padding: 20px;
    gap: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    border-radius: 10px;
}
.pizza-graphics{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50%;
}

.containLineGraphic {
    position: relative;
    width: 100%;
    height: 240px;
}
#scheduleGraphic {
    display: block;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}
.containerGraphicService, .containGraphicProfession{
    position: relative;
    width: 100%;
    height: 100%;
}
#serviceGraphic, #professionGraphic{
    display: block;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.partTwoDashboard{
    width: 40%;
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
}
.containerFastInfo{
    background-color: white;
    width: calc(100% - 10px);
    height: calc(100% - 20px);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.055);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

.nextSchedule{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: 50%;
}
.headerContainerFastInfo{
    width: 100%;
}
.headerContainerFastInfo h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
}
.titleColumn{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    margin-top: 20px;
}
.titleColumn p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    width: 30%;
}
.titleColumn p:nth-child(1){
    width: 130px;
}
.titleColumn p:nth-child(2){
    width: 100px;
}
.containerSchedule{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 5px;
}
.ConfirmSchedule{
    cursor: pointer;
}
.schedule{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    margin-top: 10px;
}
.scheduleCard{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 30%;
}
.scheduleCard:nth-child(1){
    width: 130px;
}
.scheduleCard:nth-child(1) p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
}
.scheduleCard:nth-child(2){
    width: 100px;
}
.scheduleCard:nth-child(3){
    max-width: calc(100% - 30% - 100px);
}
.scheduleCard:nth-child(3) p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
}
.scheduleCard img{
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 100%;
}
.scheduleCard p{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.containerCheckSchedule{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: 50%;
}
/*FINALIZAR AGENDAMENTO=================================*/
.detailsConfirmPresense{
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.055);
    backdrop-filter: blur(3px);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 1;
    cursor: default;
}
.detailsConfirmPresenseActive{
    display: flex;
}
.detailsConfirmPresenseInactive{
    display: none;
}
.backDetailsConfirmPresense{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 20px;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.085);
    border-radius: 20px;
    gap: 30px;
    width: 90%;
    max-width: 400px;
}
.title-detail-confirm-presense{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.title-detail-confirm-presense h1{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.detailsConfirmPresense section{
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    gap: 15px
}
.parteInfoDetails{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: calc(100% - 20px);
    border: 1px solid rgb(134, 134, 134);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.021);
}
.card-dados-agendamento{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 5px;
    width: 100%;
}
.card-dados-agendamento h2{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.card-dados-agendamento span{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: 5px;
}
.card-dados-agendamento div{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: grey;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card-dados-agendamento img{
    height: 40px;
    width: 40px;
    border-radius: 10px;
    object-fit: cover;
}
.card-dados-agendamento span div{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}
.card-dados-agendamento span img{
    height: 60px;
    width: 60px;
    border-radius: 10px;
    object-fit: cover;
}
.title-cardDadosLastSchedule{
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: start;
    gap: 5px;
}
.title-cardDadosLastSchedule img{
    height: 20px;
    width: 20px;
    border-radius: 0px;
    object-fit: cover;
}
.desc-card-dados-lastSchedule{
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: start;
    gap: 15px;
}
.desc-card-dados-lastSchedule p{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.desc-card-dados-lastSchedule p img{
    border-radius: 0px;
    height: 15px;
    width: 15px;
    object-fit: cover;
}

.partOneButtonsLastSchedule{
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: max-content;
    gap: 5px;
}
.partOneButtonsLastSchedule label{
    width: 50%;
    height: 40px;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: white;
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    text-align: center;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    padding: 0px 10px;
}
.partOneButtonsLastSchedule label:has(input:checked){
    border: 2px solid var(--var-ColorDestaque);
}

.partOneButtonsLastSchedule label input[type="radio"]{
    accent-color: var(--var-ColorDestaque);
}
.partTwoButtonsLastSchedule{
    display: flex;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 5px;
}
.partTwoButtonsLastSchedule label{
    width: 100%;
    height: 40px;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: white;
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    text-align: center;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    padding: 0px 10px;
}
.partTwoButtonsLastSchedule label:has(input:checked){
    border: 2px solid var(--var-ColorDestaque);
}
.partTwoButtonsLastSchedule label input[type="radio"]{
    accent-color: var(--var-ColorDestaque);
}

.confirmStatusAgedamento-dashboardHOME{
    background-color: #1877F2;
    width: 100%;
    height: 35px;
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.041);
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
}
@keyframes leConfirmAgendamentoDashboardHome {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.loadElementConfirmStatusAgedamento-dashboardHOME{
    height: 20px;
    width: 20px;
    border: 2px solid white;
    border-bottom: 2px solid transparent;
    display: none;
    border-radius: 100%;
    animation-name: leConfirmAgendamentoDashboardHome;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

.fecharDetail{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-bottom: 2px solid var(--var-ColorDestaque);
    gap: 5px;
    align-self: center;
    background: none;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    cursor: pointer;
}
.fecharDetail img{
    height: 15px;
    width: auto;
    object-fit: cover;
}

.ConfirmSchedule{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    margin-top: 10px;
}

.confirmAllSchedule{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    margin-top: 30px;
}

#btnCheckAllSchedule{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--var-ColorDestaque);
    color: var(--var-ColorTextBase);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 600;
    width: 40%;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
}
#btnCheckAllSchedule img{
    height: 20px;
}

/*RESPONSIVIDADE DASHBOARD MAIN-----------------------------------------------*/
@media (max-width: 1780px) {
    .header-cardDashboard{
        align-items: start;
    }
}
@media (max-width: 1660px) {
    #btnCheckAllSchedule{
        font-size: 9pt;
        width: 200px;
    }
    .confirmAllSchedule{
        margin-top: 10px;
    }
}


@media (max-height: 860px) {
    .titleColumn{
        margin-top: 10px;
    }
}
@media (max-height: 820px) {
    .scheduleCard img{
        height: 30px;
        width: 30px;
    }
    #btnCheckAllSchedule{
        padding: 5px 15px;
    }
    .confirmAllSchedule{
        margin-top: 10px;
    }
}

@media (max-width: 1580px) {
    .header-cardDashboard h2{
        font-size: 10pt;
    }
    .headerGraphic h2{
        font-size: 10pt;
    }
    .container-DataCard h3{
        font-size: 15pt;
    }
}
@media (max-width: 1520px) {
    .containerFastCards{
        height: 150px;
    }
    .containerGraphics-Dashboard{
        height: calc(100% - 180px);
    }
}
@media (max-width: 1460px) {
    .headerContainerFastInfo h2{
        font-size: 10pt;
    }
    .titleColumn p{
        font-size: 9pt;
    }
    .scheduleCard p{
        font-size: 10pt;
    }
}
@media (max-width: 1300px) {
    .header-cardDashboard h2{
        font-size: 9pt;
    }
    .headerGraphic h2{
        font-size: 9pt;
    }
}
@media (max-width: 1220px) {
    .mainDashboard{
        flex-direction: column;
        overflow-y: scroll;
        align-items: start;
        justify-content: start;
        gap: 10px;
    }
    .partOneDashboard{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }
    .containerGraphics-Dashboard{
        height: 800px;
    }

    .partTwoDashboard{
        width: 100%;
        height: max-content;
        display: flex;
        align-items: start;
        justify-content: start;
        gap: 10px;
    }
    .containerFastInfo{
        height: max-content;
        width: 100%;
    }

    .nextSchedule{
        height: max-content;
    }

    .containerCheckSchedule{
        height: max-content;
    }
}
@media (max-width: 800px) {
    .mainDashboard{
        padding-top: 75px;
    }
    .container-display{
        margin-left: 0px;
    }
    .notifyInMain{
        height: 100%;
        margin-top: 0px;
        align-items: start;
    }
    .partOneDashboard{
        width: 100%;
        height: max-content;
    }
    .containerFastCards{
        height: 150px;
    }
    .containerGraphics-Dashboard{
        height: 1000px;
    }
    .line-graphics{
        height: 300px;
    }
    .pizza-graphics{
        flex-direction: column;
        height: 800px;
    }

    .partTwoDashboard{
        height: max-content;
    }
    .containerFastInfo{
        height: max-content;
    }

    .nextSchedule{
        height: max-content;
    }

    .containerCheckSchedule{
        height: max-content;
    }
}
@media (max-width: 700px) {
    .partOneDashboard{
        position: relative;
    }
    .containerFastCards{
        overflow-x: scroll;
        width: 100%;
        gap: 10px;
        justify-content: start;
    }
    .cardDashboard{
        flex: 0 0 230px;
    }
    .header-cardDashboard h2{
        font-size: 10pt;
    }
}

@media (max-width: 470px) {
    .detailsConfirmPresense{
        width: 100%;
    }
    .backDetailsConfirmPresense{
        width: 90%;
    }
}


/*AGENDAMENTOS------------------------------------------------------------------=====================================*/
#popMessagesAgendamentos{
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    z-index: 10000;
}
#popMessagesAgendamentos > div{
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 10px 20px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    gap: 10px;
    border-radius: 10px;
}
#popMessagesAgendamentos > div > img{
    height: 20px;
    width: 20px;
}
#popMessagesAgendamentos > div > p{
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}


.agendamentosDashboard{
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: calc(100dvh - 20px);
    gap: 10px;
}
.header-agendamentos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.left-headerAgendamentos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.btnCalender{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: black;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.045);
    cursor: pointer;
}
.btnCalender img{
    height: 100%;
    width: 100%;
}

.containSearchSchedule{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 5px;
    border-radius: 30px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    gap: 5px;
}

#searchSchedule{
    background-color: transparent;
    color: var(--var-ColorTextBase);
    font-family: var(--var-FontStyledMain);
    font-weight: 400;
    font-size: 10pt;
    outline: none;
    padding-left: 10px;
}
.btnSearch{
    background-color: var(--var-ColorDestaque);
    height: 30px;
    width: 30px;
    padding: 5px;
    border-radius: 100%;
    cursor: pointer;
}
.btnSearch img{
    height: 100%;
    width: 100%;
}

.right-headerAgendamentos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    height: max-content;
    gap: 10px;
}

.btnReturnTabela{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: var(--var-FontStyledMain);
    font-weight: 400;
    font-size: 9pt;
    color: var(--var-ColorTextBase);
    padding: 0px 20px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    background-color: white;
    border: 1px solid white;
    gap: 10px
}
.btnReturnTabela img{
    height: 20px;
}
.activeTabela{
    border: 1px solid var(--var-ColorDestaque);
}
.inactiveTabela{
    background-color: white;
}

.btnNewSchedule{
    background-color: var(--var-ColorDestaque);
    height: 40px;
    width: 120px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.021);
    cursor: pointer;
}
.btnNewSchedule img{
    display: flex;
    height: 20px;
    width: 20px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
.btnNewSchedule p{
    display: flex;
    font-size: 11pt;
    font-family: var((--var-FontStyledMain));
    font-weight: 600;
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.048);
}

@keyframes loadElNewSchedule {
    0%{
        rotate: 0deg;
    }
    100%{
        rotate: 360deg;
    }
}
.loadElementNovoAgendamento{
    height: 20px;
    width: 20px;
    border-radius: 100%;
    border: 3px solid white;
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    background: transparent;
    animation-name: loadElNewSchedule;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    display: none;
}

.container-btnConflito{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: white;
    height: 35px;
    padding-left: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.06);
}
.container-btnConflito span{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.btnConflitos{
    background-color: var(--var-ColorDestaque);
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 20px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    cursor: pointer;
}

.mainSchedule{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 10px;
    position: relative;
    border-radius: 10px;
}
.leftMainSchedule{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    height: 100%;
    width: max-content;
    position: absolute;
    left: 0px;
    top: 0px;
    height: max-content;
    z-index: 20;
}
.inactive-LeftMainSchedule{
    display: none;
}
.active-LeftMainSchedule{
    display: flex;
}
.ContainerTableSchedule{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: calc(100% - 50px);
    border-radius: 10px;
}

.Container-agendamento-procurados{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding-top: 10px;
    gap: 5px;
}
.inactiveSearchAgendamentos{
    display: none;
}
.activeSearchAgendamentos{
    display: flex;
}

.agendamentoFormatList{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 5px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    border-radius: 2px;
    background-color: transparent;
    padding-bottom: 45px;
}
.inactiveAgendamentoList{
    display: none;
}
.activeAgendamentoList{
    display: flex;
}
.titleAgendamentos{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
}
.titleAgendamentos span{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: grey;
    padding-right: 20px;
}
.titleAgendamentos span:nth-child(1){
    width: 200px;
}
.titleAgendamentos span:nth-child(2){
    width: 200px;
}
.titleAgendamentos span:nth-child(3){
    width: 200px;
}
.titleAgendamentos span:nth-child(4){
    width: 120px;
}
.titleAgendamentos span:nth-child(5){
    width: 100px;
}
.titleAgendamentos span:nth-child(6){
    width: 100px;
}
.agendamentoProcurado{
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
}
.agendamentoProcurado span{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}
.titleAgendamentoProcurado{
    display: none;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.agendamentoProcurado span p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: grey;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agendamentoProcurado span:nth-child(1){
    width: 200px;
    gap: 5px;
}
.agendamentoProcurado span:nth-child(1) img{
    height: 30px;
    width: 30px;
    border-radius: 100%;
    object-fit: cover;
}
.agendamentoProcurado span:nth-child(2){
    width: 200px;
}
.agendamentoProcurado span:nth-child(3){
    width: 200px;
}
.agendamentoProcurado span:nth-child(4){
    width: 120px;
}
.agendamentoProcurado span:nth-child(5){
    width: 100px;
}
.agendamentoProcurado span:nth-child(6){
    width: 100px;
}

.agendamentoProcurado > .dataAgendamento{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.horarioAgendamento{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.horarioAgendamento p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
/*AGENDA---------------================================================================================*/
/* ===========================
   CONTAINER PRINCIPAL
=========================== */
.agendaContainer {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #eee;
    background-color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.inactiveContainerTabela{
    display: none;
}
.activeContainerTabela{
    display: flex;
}

/* ===========================
   HEADER FIXO (profissionais)
=========================== */
.agendaHeaderWrapper {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 20;
    background: white;
    border-bottom: 1px solid rgb(207, 207, 207);
    padding: 12px 0;
    width: 100%;
    overflow-x: hidden;
}

/* Espaço para alinhar com os horários */
.agendaTimesHeader {
    width: 70px; /* mesmo width da coluna de horários */
    min-width: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.agendaTimesHeader p{
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    padding-bottom: 2px;
    border-bottom: 2px solid var(--var-ColorDestaque);
}

.agendaHeader {
    display: flex;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #bbb #f1f1f1;
    width: 100%;
}

.agendaHeader::-webkit-scrollbar {
    height: 8px;
}

.agendaHeader::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.agendaHeader::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 4px;
}

.agendaHeader::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.profHeader {
    text-align: center;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 200px;
}

.profHeader img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.profHeader span{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}

/* ===========================
   CORPO DA AGENDA (scroll vertical)
=========================== */
.agendaBody {
    display: flex;
    flex: 1;
    height: 100%;      /* importante — o pai precisa ter altura definida */
    overflow-y: auto;  /* SCROLL VERTICAL AQUI */
    overflow-x: auto;
    position: relative;
}

/* ===========================
   COLUNA DE HORÁRIOS (fixa no scroll horizontal)
=========================== */
.agendaTimes {
    width: 70px;
    min-width: 70px;
    
    position: sticky;
    left: 0;       /* fixa apenas horizontalmente */
    top: unset;    /* garante que NÃO fixe verticalmente */
    
    z-index: 10;
    height: max-content;
    border-right: 1px solid #ddd;
    
}

.timeCell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 13px;
    color: var(--var-ColorTextBase);
    font-family: var(--var-FontStyledMain);
    font-size: 9pt;
}

/* ===========================
   ÁREA SCROLL HORIZONTAL
=========================== */
.agendaScrollX {
    width: calc(100% - 80px);
    height: var(--full-schedule-height);
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none; /* Firefox */
}

.agendaScrollX::-webkit-scrollbar {
  display: none; /* Chrome, Edge, Safari */
}

/* ===========================
   COLUNAS DOS PROFISSIONAIS
=========================== */
.agendaColumns {
    display: flex;
    height: 100%;
}

.profColumn {
    min-width: 200px;       /* largura mínima para scroll horizontal */
    position: relative;
    border-left: 1px solid rgb(214, 214, 214);
    height: var(--full-schedule-height);
}

/* ===========================
   EVENTOS
=========================== */
.eventBox {
    position: absolute;
    width: calc(100% - 4px);
    left: 2px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    overflow-y: hidden;
    padding: 5px;
}
.eventBox p {
    font-family: var(--var-FontStyledMain);
    font-size: 9pt;
    font-weight: 500;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.062);
    color: var(--var-ColorTextBase);
    width: 100%;
    text-align: start;
    width: 100%;
}
.eventBox p:nth-child(3) {
    color: #757575;
    font-weight: 600;
}

.evConcluido{
    background-color: #B4F5A0;
    border-left: 2px solid #29AE00;
}
.evAgendado{
    background-color: var(--var-ColorCardSchedule);
    border-left: 2px solid #6EA6FF;
}
.evCancelado{
    background-color: #FF8183;
    border-left: 2px solid #B1090C;
}
.evFaltou{
    background-color: #FFD04C;
    border-left: 2px solid #CD9700;
}

/*POP DE DETALHES DO AGENDAMENTO*/
.detailsSchedule{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: calc(100% - 30px);
    background-color: rgba(0, 0, 0, 0.062);
    backdrop-filter: blur(3px);
    border-radius: 10px;
    z-index: 1000;
}
.detailsScheduleMain{
    display: flex;
    height: max-content;
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.034);
    padding: 20px;
}
@media (max-height: 835px) {
    .detailsScheduleMain{
        width: 100%;
        height: 100%;
    }
}
@media (max-width: 800px) {
    .detailsScheduleMain{
        width: 100%;
        height: 100%;
    }
}
.headerDetailsSchedule{
    min-width: 300px;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid rgb(184, 184, 184);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.headerDetailsSchedule h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
}
#btnCloseDetailSchedule{
    width: max-content;
    height: max-content;
    background-color: transparent;
    cursor: pointer;
}
#btnCloseDetailSchedule img{
    width: 20px;
    height: 20px;
}

.containInfoDetailAgendamento{
    width: 100%;
    height: max-content;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(184, 184, 184);
}
.headerInfoDetailAgendamento{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.headerInfoDetailAgendamento img{
    height: 23px;
    width: 23px;
}
.headerInfoDetailAgendamento h3{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
}

.nameClienteDetailAgendamento{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
}
.contatoClienteDetailAgendamento{
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    color: var(--var-FontStyledMain);
}
.dataDetailAgendamento, .horarioDetailAgendamento{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: var(--var-FontStyledMain);
}
.profissionalDetailAgendamento{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}
.profissionalDetailAgendamento img{
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 100%;
}
.profissionalDetailAgendamento p{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}

.deleteAgendamentoByDetail{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    margin-top: 10px;
}
#btnDeleteAgendamentoByDetail{
    cursor: pointer;
    width: 100px;
    height: 40px;
    background-color: #FF8183;
    border-radius: 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.034);
}
.nomeServicoDetailAgendamento{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

@media (max-width: 1200px) {
    .titleAgendamentos{
        display: none;
    }
    .Container-agendamento-procurados{
        padding-top: 0px;
        gap: 10px;
    }
    .agendamentoProcurado{
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 10px;
    }
    .agendamentoProcurado span{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
    }
    .agendamentoProcurado span:nth-child(1){
        width: 100%;
    }
    .agendamentoProcurado span:nth-child(2){
        width: 100%;
    }
    .agendamentoProcurado span:nth-child(3){
        width: 100%;
    }
    .agendamentoProcurado span:nth-child(4){
        width: 100%;
    }
    .agendamentoProcurado span:nth-child(5){
        width: 100%;
    }
    .agendamentoProcurado span:nth-child(6){
        width: 100%;
    }
    .titleAgendamentoProcurado{
        display: flex;
    }
}

@media (max-width: 800px) {
    .agendamentosDashboard{
        padding-top: 75px;
    }
    .btnNewSchedule{
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 19;
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }
    .btnNewSchedule p{
        display: none;
    }
    
}
@media (max-width: 400px) {
    .btnReturnTabela{
        font-weight: 500;
        font-size: 12px;
        padding: 0px 20px;
        height: 40px;
        position: absolute;
        top: 0px;
    }

}

/*============popUp NOVO AGENDAMENTO=========================================*/
.active-agendar{
    display: flex;
}
.inactive-agendar{
    display: none;
}

/*UPGRADE AGENDAMENTOS*/
.containerUpgradeAgendamentos{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 10px;
    background-color: white;
}
.headerUpgradeAbaAgendamentos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    width: 100%;
}
.headerUpgradeAbaAgendamentos h2{
    text-align: center;
    font-family: var(--var-FontStyledMain);
    font-size: 15pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    width: 90%;
}
.headerUpgradeAbaAgendamentos p{
    text-align: center;
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    width: 90%;
    max-width: 400px;
}

#btnReturnFromUpgradeAgendamentos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding-left: 20px;
    padding-right: 20px;
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: var(--var-ColorDestaque);
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.055);
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px;
}

.containerBoxUpgradeAbaAgendamentos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: max-content;
    gap: 10px;
}

.containCTAActiveRelAgendamentos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 50px;
    width: 100%;
}
.containCTAActiveRelAgendamentos p{
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    text-align: center;
    width: 90%;

}
.containCTAActiveRelAgendamentos button{
    font-family: var(--var-FontStyledMain);
    font-size: 14px;
    font-weight: 500;
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.041);
    width: 90%;
    max-width: 350px;
    height: 40px;
    border-radius: 10px;
    background-color: #1877F2;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.containCTAActiveRelAgendamentos button:hover{
    scale: 1.1;   
}
@keyframes rotateLE {
    0%{
        rotate: 0deg;
    }
    100%{
        rotate: 360deg
    }
}
.LEActivePlanoProByAgendamentos{
    display: none;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: transparent;
    border: 3px solid white;
    border-bottom: 3px solid transparent;
    animation-name: rotateLE;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
.textActivePlanoProByAgendamentos{
    font-family: var(--var-FontStyledMain);
    font-size: 14px;
    font-weight: 500;
    color: white !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@media (max-width: 570px) {
    .headerUpgradeAbaAgendamentos{
        padding-top: 50px;
    }
}
/*===========================================================*/

.popUp-agendar{
    position: absolute;
    background-color: var(--var-ColorBackground);
    z-index: 100;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}
.form-agendar{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 30px;
    padding-bottom: 50px;
    overflow-y: auto;
    margin-top: 30px;
}
.popUp-agendar header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.popUp-agendar header h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.close-agendar{
    position: absolute;
    height: 25px;
    width: 25px;
    background: none;
    cursor: pointer;
    right: 0px;
}
.close-agendar img{
    height: 100%;
    width: 100%;
}
.partForm{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 10px;
    width: 500px;
}
.partForm h3{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.showCadClientes{
    background-color: white;
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.055);
    cursor: pointer;
}
.showCadClientesActive{
    background-color: var(--var-ColorDestaque);
}
.infoClienteAgendar{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 10px;
    width: 100%;
}
.infoClienteAgendar input{
    background-color: white;
    padding: 10px 20px;
    width: 100%;
    border: 1px solid var(--var-ColorNeutro);
    border-radius: 10px;
    outline-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.container-select-agendar{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.055);
    width: 100%;
    height: 200px;
    border-radius: 10px;
}
.container-select-agendar div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    width: 100%;
}
.labelFormAgendar{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    border-radius: 10px;
    gap: 20px;
}
.labelFormAgendar:hover{
    background-color: rgb(226, 226, 226);
}
.labelFormAgendar:has(input:checked){
    border: 1px solid var(--var-ColorDestaque);
}
.labelFormAgendar span{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
}
.labelFormAgendar img{
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 100%;
}
.labelFormAgendar input{
    opacity: 0;
}
.render-freeHorario{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}
.label-freeHour{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.042);
    border-radius: 10px;
    padding: 10px;
}
.label-freeHour input{
    display: none;
}
.container-freeHour{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
}
.label-freeHour:has(input:checked){
    border: 1px solid var(--var-ColorDestaque);
}

.container-buttonForm{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

@keyframes leSaveAgendamento {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}


.btnSaveNewSchedule{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--var-ColorDestaque);
    padding: 10px;
    width: 100%;
    border-radius: 30px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    cursor: pointer;
}
.leSaveAgendamento{
    display: none;
    height: 20px;
    width: 20px;
    border: 2px solid white;
    border-bottom: 2px solid transparent;
    border-radius: 100%;
    animation-name: leSaveAgendamento;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
.textSaveAgendamento{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.055);
}

@media (max-width: 800px) {
    /*.popUp-agendar{
        top: -55px;
        height: calc(100dvh - 55px);
        padding: 10px;
    }*/
    .form-agendar{
        width: 100%;
        padding: 0px;
        padding-bottom: 100px;
    }
    .partForm{
        width: 100%;
    }
}

/*popUp CONFLITOS===================================================================*/
.popUp-conflitos{
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
    background-color: var(--var-ColorBackground);
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 99;
    padding: 20px;
    gap: 50px;
} 
.active-conflitos{
    display: flex;
}
.inactive-conflitos{
    display: none;
}
.header-conflitos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.header-conflitos h2{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btnInfoConflitos{
    height: 20px;
    width: 20px;
    background: none;
    cursor: pointer;
}
.btnInfoConflitos img{
    height: 100%;
    width: 100%;
}

.btnClose-conflitos{
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: var(--var-ColorDestaque);
    padding: 10px 20px;
    border-radius: 30px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.048);
}
.mainConflitos{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: calc(100% - 60px);
    gap: 20px;
}
.titleConflitos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 20px;
    padding-left: 10px;
}
.titleConflitos span{
    font-family: var(--var-FontStyledMain);
    font-weight: 400;
    font-size: 10pt;
    color: var(--var-ColorTextBase);
}

/*as larguras das colunas devem ser condizentes*/
.titleConflitos span:nth-child(1){
    width: 250px;
}
.titleConflitos span:nth-child(2){
    width: 200px;
}
.titleConflitos span:nth-child(3){
    width: 130px;
}
.titleConflitos span:nth-child(4){
    width: 300px;
}

.containerCardsConflitos{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    flex: 1;
    gap: 10px;
    overflow-y: auto;
}
.cardConflito{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 60px;
    padding: 10px 10px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.048);
}
.partConflito{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.partConflito img{
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 100%;
}
.partConflito span{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}

/*devem obedecer o tamanho do título*/
.partProfissional-conflito{
    width: 249px;
}
.partCliente-conflito{
    width: 200px;
}
.partData-conflito{
    width: 130px;
}
.partServico-conflito{
    width: 200px;
}

.containerBtn-openConflito{
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    right: 30px;
}
.btnOpenConflito{
    background-color: var(--var-ColorDestaque);
    padding: 10px 20px;
    font-weight: 400;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    color: var(--var-ColorTextBase);
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}
.btnOpenConflito img{
    height: 20px;
    width: auto;
}

.containerResolve-conflito{
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    background-color: var(--var-ColorBackground);
    height: 100%;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding: 10px;
}
.active-detalheConflito{
    display: flex;
}
.container-selectSolution{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}
.header-solutionSchedule{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.header-solutionSchedule h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.header-solutionSchedule p{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.option-resolveButtons{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-top: 50px;
    gap: 10px;
}
.labelresolveConflito{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 200px;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.042);
    padding: 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    border-radius: 30px;
    cursor: pointer;
}
.labelresolveConflito:has(input:checked){
    background-color: var(--var-ColorDestaque);
}
.labelresolveConflito input{
    display: none;
}
.footerConflito{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    position: absolute;
    bottom: 50px;
}
.container-progressConflito{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.container-progressConflito span{
    display: block;
}
.boxProgressConflito{
    height: 20px;
    width: 20px;
    background-color: rgb(228, 228, 228);
    border-radius: 100%;
}
.barProgressConflito{
    height: 3px;
    width: 150px;
    background-color: rgb(228, 228, 228);
}
.activeProgressConflito{
    background-color: var(--var-ColorDestaque);
}

.buttonContinueConflito{
    background-color: var(--var-ColorDestaque);
    padding: 10px;
    width: 400px;
    border-radius: 30px;
    cursor: pointer;
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}

/*=======================================ABA DE PROFISSIONAIS=====================================================================================================*/
@keyframes leProf {
    0%{
        rotate: 0deg
    }
    100%{
        rotate: 360deg
    }
}
.loadElementProf{
    display: none;
    height: 18px;
    width: 18px;
    border: 2px solid white;
    border-bottom: 2px solid transparent;
    border-radius: 100%;
    animation-name: leProf;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}



.containerMessageProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: max-content;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 10;
}
.containerMessageProf > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 30px;
    max-width: 90%;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.051);
    border-radius: 10px;
}
.containerMessageProf > div > img{
    height: 20px;
    width: auto;
}
.containerMessageProf > div > p{
    font-family: var(--var-FontStyledMain);
    font-size: 14px;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.fadeOutPopProf{
    opacity: 0;
}

@media (max-width: 800px) {
    .containerMessageProf{
        align-items: end;
        width: calc(100% - 70px);
    }
    .containerMessageProf > div{
        padding: 10px 20px;
        max-width: 100%;
        min-height: 65px;
    }
}


.profissinaisDashboard{
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: 100%;
    gap: 10px;
}
.headerProfissionais{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    height: 30px;
}
.btnNewProfession{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--var-ColorDestaque);
    padding: 5px 15px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
}
.imgBtnNewProf{
    height: 18px;
    width: 18px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}
.textBtnNewProf{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 600;
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.041);
}
.mainProfissional{
    width: 100%;
    height: calc(100% - 40px); /*altura total menos o headerPrincipal e o gap*/
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 15px;
    overflow: hidden;
}
.headerMainProfissinal{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
}
.headerMainProfissinal span{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.headerMainProfissinal span:nth-child(1){
    width: 200px;
}
.headerMainProfissinal span:nth-child(2){
    width: 250px;
}
.headerMainProfissinal span:nth-child(3){
    width: 200px;
}

.containerCardProfession{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: 100%;
    gap: 10px;
    overflow-y: auto;
}
.cardProfession{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 60px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
}
.secCardProf{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
    width: 200px;
    gap: 10px;
}
.secCardProf img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 100%;
}
.dataProfissionalCard{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}
.dataProfissionalCard span{
    font-family: var(--var-FontStyledMain);
    font-size: 9pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.secCardAgendamentos{
    width: 250px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}
.downBox{
    height: 20px;
    background-color: #EFEFEF;
    width: 85%;
    overflow: hidden;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    position: relative;
}
.percentBarDownBox{/*a largura deve ser passada dinamicamente via JS*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    height: 100%;
    background-color: var(--var-ColorDestaque);
}
.descPercentBarDownBox{
    font-family: var(--var-FontStyledMain);
    font-size: 9pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    position: absolute;
    width: 30px;
    left: calc(50% - 17px);
    cursor: default;
}
.secCardStatusProf{
    width: 100px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}
.btnStatusProfissional{
    background-color: #EFEFEF;
    width: 50px;
    height: 20px;
    border-radius: 30px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    cursor: pointer;
    position: relative;
}
.active-btnStatusBarProfissional{
    width: 100%;
}
.inactive-btnStatusBarProfissional{
    width: 0%;
}
.active-btnStatusBoxProfissional{
    left: 70%;
}
.inactive-btnStatusBoxProfissional{
    left: -10px;
}
.barBtnStatusProfissional{
    background-color: var(--var-ColorDestaque);
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    height: 100%;
    border-radius: 30px;
    transition: 0.5s;
}
.boxBarBtnStatusProfissional{
    background-color: var(--var-ColorDestaque);
    position: absolute;
    z-index: 2;
    height: 24px;
    width: 24px;
    top: -2px;
    background-color: white;
    border-radius: 100%;
    border: 1px solid grey;
    transition: 0.5s;
}

.containBttsCardProfissional{
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 10px;
}
.containBttsCardProfissional button{
    background: none;
    height: 20px;
    width: 20px;
    cursor: pointer;
}
.containBttsCardProfissional button img{
    height: 100%;
    width: auto ;
}

@media (max-width: 800px) {
    .profissinaisDashboard{
        padding-top: 75px;
    }
    .headerProfissionais{
        justify-content: end;
        height: max-content;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }
    .btnNewProfession{
        gap: 0px;
        background-color: var(--var-ColorDestaque);
        padding: 15px 15px;
    }
    .imgBtnNewProf{
        height: 22px;
        width: 22px;
    }
    .textBtnNewProf{
        display: none;
    }
    .mainProfissional{
        height: 100%;
        padding-top: 0px;
        overflow-y: auto;
    }

    .headerMainProfissinal span:nth-child(1){
        width: 200px;
    }
    .headerMainProfissinal span:nth-child(2){
        width: max-content;
    }
}

/*DELETAR PROFISSIONAL----------------------*/
.container-popDeleteProf{
    position: fixed;
    height: 100dvh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    top: 0px;
    left: 0px;
}
.active-popDeleteProf{
    display: flex;
}
.inactive-popDeleteProf{
    display: none;
}
.popDeleteProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    padding: 20px 50px;
}
.popDeleteProf h3{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
    text-align: center;
}
.popDeleteProf p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    max-width: 300px;
    text-align: center;
}
.popDeleteProf div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    width: 300px;
}
.cancelDeleteProf, .confirmDeleteProf{
    width: 50%;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    padding: 5px 0px;
    border-radius: 30px;
    cursor: pointer;
}
.cancelDeleteProf{
    background-color: #EFEFEF;
}
.confirmDeleteProf{
    background-color: var(--var-ColorDestaque);
}

@media (max-width: 470px) {
    .popDeleteProf{
        width: calc(100% - 20px)
    }
}

/*container editar profissional*/
.containerEditProf{
    height: 100%;
    width: 100%;
    background-color: var(--var-ColorBackground);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px  rgba(0, 0, 0, 0.048);
    flex-direction: column;
    align-items: center;
    justify-content: start;
    position: absolute;
    top: 0px;
    z-index: 5;
    overflow: hidden;
    padding: 10px;
    padding-top: 10px;
}
.active-editProf{
    display: flex;
}
.inactive-editProf{
    display: none;
}
.containerEditProf header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.containerEditProf header h3{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
#returnFromEditProf{
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    padding: 5px 20px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.034);
}

.mainEditProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 500px;
    margin-top: 50px;
    height: 100%;
    overflow-y: auto;
}
.mainEditProf form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
}

.profPerfilForm{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 20px;
}
.containerPicProfForm{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--var-ColorNeutro);
    border-radius: 10px;
    height: 150px;
    width: 150px;
    position: relative;
}
.containerPicProfForm img{
    height: 100%;
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}
.btnEditFotoProf{
    position: absolute;
    background-color: var(--var-ColorDestaque);
    border-radius: 100%;
    box-shadow: 0px 0px 0px 4px var(--var-ColorBackground);
    bottom: -10px;
    right: -10px;
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.btnEditFotoProf img{
    height: 24px;
    width: auto;
}
.containerInfoPerfilProfForm{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: calc(100% - 170px);/*total menos containerPicProfImg menos gap do elemento pai*/
    height: 150px;
}
.input-PerfilProf{
    background-color: white;
    border-radius: 30px;
    padding: 10px 20px;
    width: 100%;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.021);
    outline-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-FontStyledMain);
}
.extraInfoProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    margin-top: 30px;
    gap: 10px;
}
.containerSelectProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 250px;
    gap: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.031);
    width: 100%;
    padding: 10px;
}
.containerSelectProf header{
    height: 30px;
    width: 100%;
}
.containerSelectProf header h4{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.selectEditProf{
    height: 170px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow-y: auto;
    gap: 10px;
}
.selectEditProf label{
    background-color: white;
    height: 90px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.selectEditProf label:hover{
    background-color: #EFEFEF;
}
.selectEditProf label:has(input:checked){
    background-color: var(--var-ColorDestaque);
}
.selectEditProf label input{
    display: none;
}

.container-editIntervaloProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding: 10px;
}
.container-editIntervaloProf header{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}
.container-editIntervaloProf header h4{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.container-editIntervaloProf div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    gap: 30px;
    margin-top: 15px;
}
.container-editIntervaloProf div input{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.container-editIntervaloProf div span{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.containerSaveEditProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.btnSaveEditProf{
    background-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.034);
    cursor: pointer;
}

@media (max-width: 800px) {
    .containerEditProf{
        padding-top: 75px;
    }
    .profPerfilForm{
        flex-direction: column;
        align-items: center;
    }
    .containerInfoPerfilProfForm{
        width: 100%;
        height: max-content;
    }
    .mainEditProf{
        width: 100%;
    }
}

/*container Cadastro profissional*/
.containerCadProf{
    height: 100%;
    width: 100%;
    background-color: var(--var-ColorBackground);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px  rgba(0, 0, 0, 0.048);
    flex-direction: column;
    align-items: center;
    justify-content: start;
    position: absolute;
    top: 0px;
    z-index: 5;
    overflow: hidden;
    padding: 10px;
}
.active-CadProf{
    display: flex;
}
.inactive-CadProf{
    display: none;
}
.containerCadProf header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.containerCadProf header h3{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.selectCadProf{
    height: 170px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow-y: auto;
    gap: 10px;
}
.selectCadProf label{
    background-color: white;
    height: 90px !important;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.selectCadProf label:hover{
    background-color: #EFEFEF;
}
.selectCadProf label:has(input:checked){
    background-color: var(--var-ColorDestaque);
}
.selectCadProf label input{
    display: none;
}
#returnFromCadProf{
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    padding: 5px 20px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.034);
}

.mainCadProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 500px;
    margin-top: 50px;
    height: 100%;
    overflow-y: auto;
}
.mainCadProf form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
}

#btnCadFotoProf{
    position: absolute;
    background-color: var(--var-ColorDestaque);
    border-radius: 100%;
    box-shadow: 0px 0px 0px 4px var(--var-ColorBackground);
    bottom: -10px;
    right: -10px;
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#btnCadFotoProf img{
    height: 24px;
    width: auto;
}

.containerSaveCadProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.container-CadIntervaloProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    padding: 10px;
}
.container-CadIntervaloProf header{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}
.container-CadIntervaloProf header h4{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.container-CadIntervaloProf div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    gap: 30px;
    margin-top: 15px;
}
.container-CadIntervaloProf div input{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.container-CadIntervaloProf div span{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.btnSaveCadProf{
    background-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.034);
    cursor: pointer;
}

@media (max-width: 800px) {
    .containerCadProf{
        padding-top: 75px;
    }
    .mainCadProf{
        width: 100%;
    }
}

/*RELATÓRIO DO PROFISSIONAL*/
.container-relProf{
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: 100%;
    background-color: var(--var-ColorBackground);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
    overflow-y: auto;
}

/*upgrade*/
.containerUpgradeProfissionais{
    width: 100%;
    background-color: white;
    height: 100%;
    overflow-y: auto;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.headerUpgradeAbaProf{
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 20px;
    gap: 10px;
}
.headerUpgradeAbaProf button{
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--var-ColorDestaque);
    width: 100px;
    height: 40px;
    border-radius: 20px;
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    color: white;
    cursor: pointer;
}
.containIconUpgradeAbaPProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.containIconUpgradeAbaPProf img{
    height: 25px;
    width: auto;
}
.headerUpgradeAbaProf h2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--var-FontStyledMain);
    font-weight: 500;
    font-size: 15pt;
    color: var(--var-ColorTextBase);
    width: 90%;
}
.headerUpgradeAbaProf p{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--var-FontStyledMain);
    font-weight: 400;
    font-size: 12pt;
    color: var(--var-ColorTextBase);
    max-width: 500px;
    width: 90%;
}
.containerBoxUpgradeAbaProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top: 10px;
    height: 100%;
    gap: 10px;
}
.planeImgUpgradProf{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.planeImgUpgradProf img{
    height: 150px;
}

.contain-planos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: max-content;
    gap: 30px;
}
.containValue{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 5px;
    width: 100%;
    border-bottom: 1px solid #BCBCBC;
}
.valueCard{
    font-family: var(--var-FontStyledMain);
    font-weight: 600;
    color: var(--var-ColorTextBase);
    font-size: 15pt;
}
.box-functions{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    margin-top: 20px;
    gap: 20px;
}
.box-functions p{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 5px;
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.box-functions p:nth-child(6){
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: 5px;
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.box-functions p img{
    height: 15px;
}


.card-plano h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.card-plano h2 img{
    transform: translateY(-2px);
    height: 20px;
}
.card-plano h2 span{
    padding: 5px 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    background-color: #ffc52621;
    color: #daa40f;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.048);
}
.card-plano{
    padding: 20px;
    width: 300px;
    height: max-content;
    background-color: white;
    border: 1px solid #BCBCBC;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
}
.plano-pro{
    border: 2px solid var(--var-ColorDestaque);
}
#descMensalAnual{
    font-family: var(--var-FontStyledMain);
    font-size: 15px;
    font-weight: 400;
    color: #808080;
}
@media (max-width: 700px) {
    .contain-planos{
        flex-direction: column;
    }
}
.containCTAActiveRelProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 50px;
}
.containCTAActiveRelProf p{
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    text-align: center;
    width: 90%;
}
.containCTAActiveRelProf button{
    font-family: var(--var-FontStyledMain);
    font-size: 14px;
    font-weight: 500;
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.041);
    width: 200px;
    height: 40px;
    border-radius: 10px;
    background-color: #1877F2;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.containCTAActiveRelProf button:hover{
    scale: 1.1;   
}
@keyframes rotateLE {
    0%{
        rotate: 0deg;
    }
    100%{
        rotate: 360deg
    }
}
.LEActivePlanoProByProf{
    display: none;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: transparent;
    border: 3px solid white;
    border-bottom: 3px solid transparent;
    animation-name: rotateLE;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
.textActivePlanoProByProf{
    font-family: var(--var-FontStyledMain);
    font-size: 14px;
    font-weight: 500;
    color: white !important;
}

@media (max-width: 500px) {
    .headerUpgradeAbaProf{
        padding-top: 65px;
    }
}




.inactive-relProf{
    display: none;
}
.active-relProf{
    display: flex;
}
.headerRelatorioProf{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.headerRelatorioProf h2{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.headerRelatorioProf button{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    background-color: var(--var-ColorDestaque);
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.034);
}
.perfilProfRel{
    background-color: white;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    position: relative;
    gap: 10px;
    margin-top: 5px;
}
.perfilProfRel div:nth-child(1){
    height: 60px;
    width: 60px;
}
.perfilProfRel div:nth-child(1) img{
    height: 60px;
    width: 60px;
    object-fit: cover;
    border-radius: 40px;
}
.perfilProfRel div:nth-child(2){
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 5px;
    padding-top: 5px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.btnExportRelProf{
    position: absolute;
    right: 10px;
    top: 10px;
    background: none;
    cursor: pointer;
    border-radius: 5px;
}
.pop-export{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: max-content;
    width: 150px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.094);
    position: absolute;
    transition: 0.5s;
}
@keyframes animationSurgePop {
    0%{
        opacity: 0;
        scale: 0;
    }
    90%{
        opacity: 0;
        scale: 0.9;
    }
    100%{
        opacity: 1;
        scale: 1;
    }
}
.active-popExport{
    display: flex;
    animation-name: animationSurgePop;
    animation-duration: 0.2s;
    right: 0px;
    top: 100%;
}
.inactive-popExport{
    display: none;
    right: 0px;
    top: 0px;
}
.pop-export button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100%;
    gap: 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    cursor: pointer;
    background: none;
}
.pop-export button img{
    height: 20px;
    width: auto;
}
.container-graphicsRelProf{
    width: 100%;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
}
.graphicBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.048);
    border-radius: 10px;
    padding: 10px;
    height: 300px;
    width: 100%;
}
.header-boxGraphics{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.header-boxGraphics h3{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorNeutro);
}
.header-boxGraphics select{
    font-family: var(--var-FontStyledMain);
    font-size: 9pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    outline: none;
    text-align: end;
    padding-right: 5px;
}
.contain-dataGraphic{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.contain-dataGraphic span{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 5px;
}
.contain-dataGraphic span div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.numBoxDataGraphic{
    font-family: var(--var-FontStyledMain);
    font-size: 15pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.descBoxDataGraphic{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorNeutro);
}
.contain-dataGraphic span img{
    height: 20px;
}
.conatainGraphicProfRel{
    height: 80%;
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    position: relative;
}
.conatainGraphicProfRel canvas{
    width: 100% !important;
    height: 100% !important;
}

.container-insightRelProf{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: max-content;
    margin-top: 10px;
}
.header-insightRelProf{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.header-insightRelProf span{
    width: 40%;
    height: 1px;
    background-color: var(--var-ColorNeutro);
}
.header-insightRelProf h3{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.container-BoxInsights{
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.box-Insight{
    width: 100%;
    height: 50px;
    background-color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding: 10px;
    gap: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.035);
    cursor: pointer;
}
.box-Insight img{
    height: 20px;
}
.box-Insight p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
@media (max-width: 800px) {
    .container-relProf{
        padding-top: 75px;
    }
    .container-graphicsRelProf{
        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        height: max-content;
        gap: 10px;
    }
    .graphicBox{
        height: 300px;
    }
}

/*=======ABA DE SERVIÇOS==================================================================*/

.servicosDashboard{
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: 100%;
    gap: 10px;
}
.headerServices{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    height: 30px;
}
.btnNewService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--var-ColorDestaque);
    color: var(--var-ColorTextBase);
    padding: 5px 15px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
}
.btnNewService img{
    height: 18px;
    width: 18px;
}
.btnNewService p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 600;
}

.mainServices{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.titleTableServices{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
}
.titleTableServices span{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorNeutro);
}
.titleTableServices span:nth-child(1){
    width: 200px;
}
.titleTableServices span:nth-child(2){
    width: 100px;
}
.titleTableServices span:nth-child(3){
    width: 100px;
}

.containerCardsServices{
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow-y: auto;
    padding-bottom: 50px;
}
.cardService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.048);
    height: 60px;
    margin-top: 10px;
}

.nameService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 200px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: #8c8c8c;
}
.valueService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: #8c8c8c;
}
.tempoService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: max-content;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: #8c8c8c;
}

.containerBtnService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 10px !important;
    margin-left: auto;
    justify-self: end;
}
.btnOpenDetailService{
    height: 30px;
    background: none;
    cursor: pointer;
}
.btnOpenDetailService img{
    height: 100%;
    width: auto;
}

/*DETAILS SERVICE*/
.detailsService{
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 998;
    background-color: var(--var-ColorBackground);
}
.inactive-detailService{
    display: none;
}
.active-detailService{
    display: flex;
}

.header-detailService{
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 30px;
}
.navigate-ByDisplay{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    gap: 5px;
}
.navigate-ByDisplay img{
    height: 20px;
}
.return-toServicesMain{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    background: none;
    cursor: pointer;
    font-family: var(--var-FontStyledMain);
    font-weight: 500;
    font-size: 15px;
    color: #8c8c8c;
}
.navigate-ByDisplay div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    background: none;
    cursor: pointer;
    font-family: var(--var-FontStyledMain);
    font-weight: 500;
    font-size: 15px;
    color: #8c8c8c;
}

.mainHeader-detailsService{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 100%;
    height: max-content;
}
.mainHeader-detailsService h2{
    font-family: var(--var-FontStyledMain);
    font-weight: 500;
    font-size: 20pt;
    color: var(--var-ColorTextBase);
    width: 100%;
    text-align: start;
}

.actionsHeaderServiceDetails{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.leftHeaderServiceDetails{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.btnEditService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.034);
    background-color: var(--var-ColorDestaque);
    height: 35px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
    border-radius: 10px;
}
.btnEditService p{
    font-family: var(--var-FontStyledMain);
    font-weight: 500 !important;
    font-size: 15px !important;
    color: white !important;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.055);
}
.btnEditService img{
    height: 15px;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.041));
}
.btnDeleteService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.034);
    background-color: white;
    height: 35px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
    border-radius: 10px;
}
.btnDeleteService p{
    font-family: var(--var-FontStyledMain);
    font-weight: 500 !important;
    font-size: 15px !important;
    color: var(--var-ColorTextBase) !important;
}
.btnDeleteService img{
    height: 15px
}

.rightHeaderServiceDetails{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

.rightHeaderServiceDetails p{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.btnStatusService{
    width: 50px;
    height: 25px;
    border-radius: 15px;
    background-color: rgb(187, 187, 187);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.barBtnStatusService{
    height: 100%;
    background-color: var(--var-ColorDestaque);
    position: absolute;
    left: 0px;
    border-radius: 20px;
}
.boxBarBtnStatusService{
    transition: 0.5s;
    width: 18px !important;
    height: 18px;
    background-color: white;
    border-radius: 20px;
    position: absolute;
}
.active-btnStatusBarService{
    width: 100% !important;
}
.inactive-btnStatusBarService{
    width: 0% !important;
}
.active-btnStatusBoxService{
    left: calc(50px - 22px);
}
.inactive-btnStatusBoxService{
    left: 4px;
}

.containerDadosDetailService{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 20px;
    margin-top: 10px;
    height: calc(100% - 10px);
    width: 100%;
    background-color: white;
    border-radius: 10px;
    overflow-y: auto;
    padding: 10px;
}

.PartOneDetailService{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 10px;
}
.headerPartDetailService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
}
.headerPartDetailService h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}

.BoxDadosServiceDetails{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 10px;
    width: 100%;
    height: max-content;
}
.BoxDadosServiceDetails span{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 5px;
}
.BoxDadosServiceDetails span h3{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.BoxDadosServiceDetails span p{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: #8c8c8c;
}

.PartTwoDetailService{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 10px;
    width: 100%;
}
.boxProfAptos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.cardProfInService{
    width: 100% !important;
    height: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #efefef;
    cursor: pointer;
}


.cardProfInService img{
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 30px;
}
.cardProfInService p{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.profAptosInfo{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.checkboxRealProfApto{
    display:none;
}

.checkboxFakeProfApto{
    width:22px;
    height:22px;
    border-radius:5px;
    border:2px solid #cfcfcf;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.2s;
}

.checkboxFakeProfApto img{
    height:15px;
    opacity:0;
}

.checkboxRealProfApto:checked + .checkboxFakeProfApto{
  background:#f4b400;
  border-color:#f4b400;
}

.checkboxRealProfApto:checked + .checkboxFakeProfApto img{
  opacity:1;
}



.messageServiceAba {
    position: absolute;
    top: -100px;
    z-index: 100000;
    right: 10px;
    width: 100%;
    height: max-content;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.055);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    gap: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.messageServiceAba.active-popDeleteService {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  top: 0px;
}

.messageServiceAba.inactive-popDeleteService {
  display: none;
  top: -100px;
}

.headerBox-success{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.headerBox-success img{
    height: 15px;
}
.headerBox-success h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    text-align: center;
}

.bodyBox-seccess{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
}
.bodyBox-seccess p{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    text-align: center;
}

@media (max-width: 800px){
    .cardService{
        cursor: pointer;
        position: relative;
    }
    .detailsService {
        padding-top: 75px;
        position: fixed;
        top: 10px;
        left: 10px;
        width: calc(100vw - 20px);
        height: calc(100% - 20px);
    }
    .servicosDashboard{
        padding-top: 75px;
    }
    .headerServices{
        position: absolute;
        bottom: 20px;
        right: 0px;
        z-index: 997;
    }
    .header-detailService{
        gap: 10px;
    }
    .mainHeader-detailsService h2{
        font-weight: 600;
        font-size: 15pt;
    }
    .btnNewService{
        padding: 18px;
    }
    .btnNewService p{
        display: none;
    }
    .containerBtnService{
        width: 100% !important;
        height: 50px;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .btnOpenDetailService{
        height: 100%;
        width: 100%;
    }
    .btnOpenDetailService img{
        display: none;
    }
    .containerDadosDetailService{
        height: 100%;
    }

    .messageServiceAba {
        width: calc(100% - 75px);
    }
}

@media (max-width: 500px) {

    .titleTableServices span:nth-child(1){
        width: 50%;
    }
    .titleTableServices span:nth-child(2){
        width: 25%;
        transform: translateX(-5px);
    }
    .titleTableServices span:nth-child(3){
        width: 25%;
        transform: translateX(-5px);
    }

    .cardService{
        gap: 10px;
        border-bottom: 2px solid var(--var-ColorDestaque);
    }

    .nameService{
        width: 50% !important;
    }
    .nameService p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
    }
    .valueService{
        width: 25% !important;
    }
    .valueService p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tempoService{
        width: 25% !important;
    }
    .tempoService p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/*add service*/
.inactive-AddService{
    display: none;
}
.active-AddService{
    display: flex;
}
.container-AddService{
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
    background-color: var(--var-ColorBackground);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.header-AddService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.header-AddService h2{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.header-AddService button{
    position: absolute;
    right: 0px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    background-color: var(--var-ColorDestaque);
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
}
.contain-formNewService{
    margin-top: 50px;
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 30px;
}
.contain-formNewService form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.contain-formNewService form input{
    width: 100%;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    outline-color: var(--var-ColorDestaque);
    border-radius: 30px;
    padding: 15px 20px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.contain-formNewService textarea{
    width: 100%;
    height: 200px;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    outline-color: var(--var-ColorDestaque);
    border-radius: 30px;
    padding: 15px 20px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.btnSendNewService{
    background-color: var(--var-ColorDestaque);
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.048);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    cursor: pointer;
}

@media (max-width: 800px) {
    .container-AddService{
        padding-top: 75px;
    }
    .header-AddService button{
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .contain-formNewService{
        width: calc(100% - 20px);
    }
}



/*edit service*/
.inactive-EditService{
    display: none;
}
.active-EditService{
    display: flex;
}
.container-EditService{
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
    background-color: var(--var-ColorBackground);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    overflow-y: hidden;
}
.header-EditService{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 10px;
}
.header-EditService h2{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.header-EditService button{
    position: absolute;
    right: 0px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    background-color: var(--var-ColorDestaque);
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    z-index: 1;
}
.contain-formEditService{
    margin-top: 50px;
    width: 500px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 30px;
}
.contain-formEditService form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.contain-formEditService form input{
    width: 100%;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    outline-color: var(--var-ColorDestaque);
    border-radius: 10px;
    padding: 15px 20px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.contain-formEditService textarea{
    width: 100%;
    height: 200px;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    outline-color: var(--var-ColorDestaque);
    border-radius: 10px;
    padding: 15px 20px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.btnSendEditService{
    background-color: var(--var-ColorDestaque);
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.048);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    cursor: pointer;
}

@media (max-width: 800px) {
    .container-EditService{
        padding-top: 75px;
    }
    .btnCloseEditService{
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .contain-formEditService{
        width: calc(100% - 20px);
        margin-top: 30px;
    }
}

/*delete service ------*/
.container-popDeleteService{
    position: fixed;
    height: 100dvh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    top: 0px;
    left: 0px;
}
.active-popDeleteService{
    display: flex;
}
.inactive-popDeleteService{
    display: none;
}
.popDeleteService{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    padding: 20px 50px;
    width: 400px !important;
}
.popDeleteService h3{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
}
.popDeleteService p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    max-width: 300px;
    text-align: center;
}
.popDeleteService div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    width: 300px !important;
}
.cancelDeleteService, .confirmDeleteService{
    width: 50%;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    padding: 5px 0px;
    border-radius: 30px;
    cursor: pointer;
}
.cancelDeleteService{
    background-color: #EFEFEF;
}
.confirmDeleteService{
    background-color: var(--var-ColorDestaque);
}

@media (max-width: 800px) {
    .popDeleteService{
        width: calc(100% - 20px) !important;
    }
}

/*==================ABA DE CLIENTES===============================================================================*/
.clientesDashboard{
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: 100%;
    gap: 10px;
}
.header-abbaClientes{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.btnNewCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
}
.btnNewCliente img{
    height: 20px;
    width: auto;
}

.cotainer-searchCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    padding: 5px;
}
.inputSearchCliente{
    width: calc(100% - 35px);
    padding: 5px 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    background-color: transparent;
    outline: none;
}

.btnSearchCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 25px;
    background-color: var(--var-ColorDestaque);
    border-radius: 30px;
    cursor: pointer;
}
.btnSearchCliente img{
    height: 15px;
    width: 15px;
}

.mainClientes{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    gap: 10px;
}

.titleCardClientes{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
}
.titleCardClientes span{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorNeutro);
}
.titleCardClientes span:nth-child(1){
    width: 250px;
}
.titleCardClientes span:nth-child(2){
    width: max-content;
}

@media(max-width: 800px){
    .header-abbaClientes{
        padding-top: 0px;
    }
    .clientesDashboard{
        padding-top: 75px;
    }
}

/*card cliente*/
.container-cardsCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;
    gap: 10px;
}
.cardCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    background-color: white;
    width: 100%;
    padding: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.034);
    border-radius: 10px;
}

.secPerfilCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 250px;
    gap: 10px;
    height: 100%;
}
.containerImgClienteCard{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--var-ColorNeutro);
    border-radius: 100%;
    height: 45px;
    width: 45px;
    overflow: hidden;
}
.containerImgClienteCard img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.containerInfoClienteCard{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 5px;
    height: 100%;
}
.containerInfoClienteCard p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.containerBttsCarCliente{
    position: absolute;
    right: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.containerBttsCarCliente button{
    height: 20px;
    width: auto;
    background: none;
    cursor: pointer;
}
.containerBttsCarCliente button img{
    height: 100%;
    width: auto;
}

/*aba add clientes*/
.inactive-AddCliente{
    display: none;
}
.active-AddCliente{
    display: flex;
}
.container-AddCliente{
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
    background-color: var(--var-ColorBackground);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.header-AddCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: max-content;
    padding-top: 10px;
}
.header-AddCliente h2{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.header-AddCliente button{
    position: absolute;
    right: 0px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: white;

    background-color: var(--var-ColorDestaque);
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
}
.contain-formNewCliente{
    margin-top: 50px;
    width: 500px;
    height: 100%;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 30px;
}
.contain-formNewCliente form{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 15px;
    overflow-y: auto;
}
.perfilClienteForm{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 20px;
}
.containerPicClienteForm{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--var-ColorNeutro);
    border-radius: 10px;
    height: 150px;
    width: 150px;
    position: relative;
}
.containerPicClienteForm img{
    height: 100%;
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}
#btnCadClienteFoto{
    position: absolute;
    background-color: var(--var-ColorDestaque);
    border-radius: 100%;
    box-shadow: 0px 0px 0px 4px var(--var-ColorBackground);
    bottom: -10px;
    right: -10px;
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#btnCadClienteFoto img{
    height: 24px;
    width: auto;
}
.containerInfoClienteForm{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: calc(100% - 170px);/*total menos containerPicProfImg menos gap do elemento pai*/
    height: 150px;
}
.containerInfoClienteForm input{
    background-color: white;
    border-radius: 30px;
    padding: 10px 20px;
    width: 100%;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.021);
    outline-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-FontStyledMain);
}

.contain-formNewCliente form input{
    width: 100%;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    outline-color: var(--var-ColorDestaque);
    border-radius: 30px;
    padding: 15px 20px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.contain-birthCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    margin-top: 10px;
}
.contain-birthCliente p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorNeutro);
    text-align: start;
    width: 100%;
    padding-left: 20px;
}

.container-observ{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}
.headerObserv{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}
.headerObserv h2{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    padding-left: 10px;
}
.headerObserv button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 25px;
    background: none;
    cursor: pointer;
}
.headerObserv button img{
    height: 25px;
    width: auto;
}
.cardInfoObservCliente{
    position: absolute;
    right: 35px;
    top: 0px;
    display: none;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 20px;
    width: 400px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.048);
    z-index: 1;
}
.cardInfoObservCliente h3{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    color: var(--var-ColorNeutro);
}
.cardInfoObservCliente p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.btnInfoObserv:hover + .cardInfoObservCliente {
    display: flex;
}

.contain-addedObserv{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 5px;
    width: 100%;
}
.obserAdded{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    width: 100%;
    background-color: #EFEFEF;
    border-radius: 30px;
}
.obserAdded p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.obserAdded button{
    background: none;
    height: 20px;
    width: auto;
    cursor: pointer;
}
.obserAdded button img{
    height: 100%;
    width: auto;
}

.dataColectObserv{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 100%;
}
.dataColectObserv textarea{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorNeutro);
    width: 100%;
    height: 200px;
    padding: 20px;
    border-radius: 30px;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    outline-color: var(--var-ColorDestaque);
}
.addObservToListCad{
    width: 100%;
    background-color: var(--var-ColorTextBase);
    padding: 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorBackground);
    cursor: pointer;
    border-radius: 30px;
}

.btnSendNewCliente{
    background-color: var(--var-ColorDestaque);
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.048);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    cursor: pointer;
}

@media (max-width: 800px) {
    .container-AddCliente{
        padding-top: 75px;
    }
    .btnCloseNewCliente{
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .contain-formNewCliente{
        width: calc(100% - 20px)
    }
}

/*aba editar clientes*/
.inactive-EditCliente{
    display: none;
}
.active-EditCliente{
    display: flex;
}
.container-EditCliente{
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
    background-color: var(--var-ColorBackground);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
}
.header-EditCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: max-content;
    padding-top: 10px;
}
.header-EditCliente h2{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.header-EditCliente button{
    position: absolute;
    right: 0px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.048);
    background-color: var(--var-ColorDestaque);
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
}
.contain-formEditCliente{
    margin-top: 50px;
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 30px;
}
.contain-formEditCliente form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
#btnEditClienteFoto{
    position: absolute;
    background-color: var(--var-ColorDestaque);
    border-radius: 100%;
    box-shadow: 0px 0px 0px 4px var(--var-ColorBackground);
    bottom: -10px;
    right: -10px;
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#btnEditClienteFoto img{
    height: 24px;
    width: auto;
}
.contain-formEditCliente form input{
    width: 100%;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    outline-color: var(--var-ColorDestaque);
    border-radius: 30px;
    padding: 15px 20px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.contain-birthCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    margin-top: 10px;
}
.contain-birthCliente p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorNeutro);
    text-align: start;
    width: 100%;
    padding-left: 20px;
}
.btnSendEditCliente{
    background-color: var(--var-ColorDestaque);
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.048);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    cursor: pointer;
}

@media (max-width: 800px) {
    .container-EditCliente{
        padding-top: 75px;
    }
    .btnCloseEditCliente{
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .contain-formEditCliente{
        width: calc(100% - 20px);
    }
    .perfilClienteForm{
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }
    .containerInfoClienteForm{
        height: max-content;
        width: 100%;
    }
}

/*pop delete cliente*/
.container-popDeleteCliente{
    position: fixed;
    height: 100dvh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    top: 0px;
    left: 0px;
}
.active-popDeleteCliente{
    display: flex;
}
.inactive-popDeleteCliente{
    display: none;
}
.popDeleteCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    padding: 20px 50px;
    width: 400px !important;
}
.popDeleteCliente h3{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
    text-align: center;
}
.popDeleteCliente p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    max-width: 300px;
    text-align: center;
}
.popDeleteCliente div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    width: 300px !important;
}
.cancelDeleteCliente, .confirmDeleteCliente{
    width: 50%;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    padding: 5px 0px;
    border-radius: 30px;
    cursor: pointer;
}
.cancelDeleteClinte{
    background-color: #EFEFEF;
}
.confirmDeleteCliente{
    background-color: var(--var-ColorDestaque);
}

@media (max-width: 800px) {
    .popDeleteCliente{
        width: calc(100% - 20px) !important;
    }
}

/*DETALHE CLIENTE*/
.inactive-detailCliente{
    display: none;
}
.active-detailCliente{
    display: flex;
}
.container-detailCliente{
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
    gap: 10px;
    background-color: var(--var-ColorBackground);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 4;
}
.headerDetailsCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.btnScheduleAgain{
    background-color: var(--var-ColorDestaque);
    padding: 5px 15px;
    border-radius: 20px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    cursor: pointer;
}
.headerDetailsCliente div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.headerDetailsCliente div h2{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    padding-right: 10px;
}
.headerDetailsCliente div button{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    padding: 5px 15px;
    border-radius: 20px;
    background-color: var(--var-ColorDestaque);
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
}

.main-DetailsCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    width: 100%;
    border-radius: 10px;
}
.partOne-DetailsCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 60%;
    height: 100%;
    overflow-y: auto;
}
.continer-FastCardsCliente{
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
}
.fastCard-cliente{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    background-color: white;
    padding: 10px;
    gap: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.034);
}
.headerFastCard-Cliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
}
.headerFastCard-Cliente p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorNeutro);
}
.containFastCard-Cliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}
.containFastCard-Cliente h2{
    font-family: var(--var-FontStyledMain);
    font-size: 15pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.containFastCard-Cliente h3{
    font-family: var(--var-FontStyledMain);
    font-size: 20pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.container-historicoServicosCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
    border-radius: 10px;
}
.title-historicoServicoCliente{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
}
.title-historicoServicoCliente span{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorNeutro);
}
.title-historicoServicoCliente span:nth-child(1){
    width: 100px;
}
.title-historicoServicoCliente span:nth-child(2){
    width: 150px;
}
.title-historicoServicoCliente span:nth-child(3){
    width: 150px;
}
.title-historicoServicoCliente span:nth-child(4){
    width: 120px;
}
.title-historicoServicoCliente span:nth-child(5){
    width: 100px;
}
.title-historicoServicoCliente span:nth-child(6){
    width: max-content;
}

.contain-CardHistoricServicesCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow-y: auto;
}
.card-historicServiceCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    width: 100%;
}
.card-historicServiceCliente span{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.card-historicServiceCliente span:nth-child(1){
    width: 100px;
}
.card-historicServiceCliente span:nth-child(2){
    width: 150px;
}
.card-historicServiceCliente span:nth-child(3){
    width: 150px;
}
.card-historicServiceCliente span:nth-child(4){
    width: 120px;
}
.card-historicServiceCliente span:nth-child(5){
    width: 100px;
}
.card-historicServiceCliente span:nth-child(6){
    width: max-content;
}

.partTwo-DetailsCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 40%;
    height: 100%;
    overflow-y: auto;
}
.containEditObservCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px  rgba(0, 0, 0, 0.041);
}
.header-editObservCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.header-editObservCliente h2{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.header-editObservCliente button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 25px;
    background-color: var(--var-ColorDestaque);
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.034);
}
.header-editObservCliente button img{
    height: 15px;
    width: auto;
}

.formNewObserveDatailCliente{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}
.formNewObserveDatailCliente input, .formNewObserveDatailCliente textarea{
    background-color: white;
    border-bottom: 1px solid #EFEFEF;
    width: 100%;
    padding: 10px;
    outline-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.container-SavedObservDetails{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 20px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    margin-top: 30px;
    overflow-y: auto;
    padding-top: 10px;
}
.cardObservEditable{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 10px;
    width: 100%;
}
.header-CardObservEditable{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.header-CardObservEditable input{
    background-color: white;
    padding: 0px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    outline-color: var(--var-ColorDestaque);
}
.contain-BttsSavedObservDetailsCliente{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.contain-BttsSavedObservDetailsCliente button{
    height: 20px;
    width: auto;
    cursor: pointer;
    background: none;
}
.contain-BttsSavedObservDetailsCliente button img{
    height: 100%;
}
.contain-DescObservDetails{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 100%;
}
.contain-DescObservDetails textarea{
    width: 100%;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorNeutro);
    outline-color: var(--var-ColorDestaque);
}
.saveEditObserv{
    background-color: var(--var-ColorTextBase);
    padding: 5px 20px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: var(--var-ColorBackground);
    cursor: pointer;
    border-radius: 10px;
}

/*ABA DE MEU LINK======================================================================================*/
.container-mainlink{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    position: absolute;
    top: 0px;
    gap: 10px;
}

.cardMeuLink{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    padding: 10px;
    width: 100%;
    gap: 20px;
}
.headerCardLink{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 100%;
}
.headerCardLink h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.mainLink{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.box-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5px;
    gap: 5px;
    border-radius: 5px;
    border: 1px solid #8c8c8c;
}
.iconLink{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-right: 1px solid #8c8c8c;
}
.iconLink img{
    height: 20px;
    width: 20px;
    object-fit: cover;
}
.contain-link{
    width: 400px;
    height: 25px;
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: #8c8c8c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btnCopyLink{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 90px;
    border-radius: 5px;
    color: white;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    cursor: pointer;
}
.not-copy{
    background-color: #1877F2;
}
.not-copy::after {
  content: "Copiar";
}
.copied{
    background-color: #13DF13;
}
.copied::after {
  content: "Copiado";
}
.contain-btnWhatsapp{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.contain-btnWhatsapp a{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background-color: #13DF13;
    text-decoration: none;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: white;
    gap: 5px;
    height: 30px;
    padding-left: 20px;
    padding-right: 20px;
}
.contain-btnWhatsapp a img{
    height: 20px;
    width: 20px;
    object-fit: cover;
}


.contain-btnStatus{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.statusLink{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    position: relative;
    width: max-content;
}
.barBtnLink{
    width: 40px;
    height: 14px;
    background-color: #EFEFEF;
    border-radius: 10px;
    position: absolute;
    left: 0px;
}
.boxBtnLink{
    display: block;
    width: 16px;
    height: 16px;
    background-color: white;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.096);
    border-radius: 100%;
    position: absolute;
}
.inactive-barBtnLink{
    left: 0px;
}
.active-barBtnLink{
    left: 0px;
    background-color: var(--var-ColorDestaque);
}
.inactive-boxBtnLink{
    left: 0px;
}
.active-boxBtnLink{
    left: 24px;
}
.descBtnLink{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: #8c8c8c;
    margin-left: 30px;
}
.contain-dataStatus{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: #8c8c8c;
}

.contain-btnLink{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 10px;
    padding-bottom: 20px;
}
.sub-title-abaLink{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: #8c8c8c;
}
.typeSelectProf, .typeScheduleWhatsapp{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    position: relative;
    width: max-content;
}

@media (max-width: 800px) {
    .container-mainlink{
        padding-top: 75px;
    }
    .mainLink{
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 20px;
    }
    .box-link{
        width: 100%;
    }
    .contain-link{
        width: calc(100% - 100px);
    }
}

/*===========CONFIGURAÇÕES==============================================================*/
.container-mainConfig{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    position: absolute;
    top: 0px;
    gap: 10px;
}

.containerPopsAbaConfig{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
    position: absolute;
    
    width: max-content;
    padding: 0px;
    height: auto;
    z-index: 2000;
    gap: 10px;
}
.popPositiveConfig{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    padding: 10px;
    gap: 10px;
    background-color: white;
    border: 1px solid rgb(233, 233, 233);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(255, 166, 0, 0.151);
}
.popPositiveConfig span img{
    height: 20px;
    width: 20px;
    object-fit: cover;
}
.popPositiveConfig p{
    width: max-content;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.tabConfigPage{
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.btnConfigTab{
    width: max-content;
    padding: 0px 10px;
    background-color: transparent;
    border-bottom: 2px solid rgba(255, 255, 255, 0);
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    cursor: pointer;
}
.activeButton-tabConfig{
    border-bottom: 2px solid var(--var-ColorDestaque);
}

.configEstab{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.055);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
}
.headerConfig{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    gap: 30px;
}
.headerConfig h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.openFormNewExpediente{
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #1877F2;
    padding: 5px 25px;
    border-radius: 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: white;
    cursor: pointer;
}
.openFormNewExpediente img{
    height: 20px;
    width: 20px;
}
.containerFormEstab{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 30px;
}
.partFormConfigAba{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 10px;
}
.partFormConfigAba h3{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: #8c8c8c;
}
.containerPicLogoForm{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 200px;
    height: 200px;
    background-color: transparent;
    border: 1px dashed #8c8c8c;
    border-radius: 10px;
}

.previewFotoLogo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.linkFalse{
    width: 30px;
    height: 30px;
}
#btnEditLogo{
    position: absolute;
    bottom: -15px;
    right: -15px;
    padding: 10px;
    height: 40px;
    width: 40px;
    background-color: var(--var-ColorDestaque);
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#btnEditLogo img{
    height: 20px;
    width: 20px;
}
.containerInputConfigEstab{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 500px;
}
.containerInputConfigEstab input{
    width: 100%;
    height: 40px;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #adadad;
    background-color: white;
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: gray;
    outline-color: var(--var-ColorDestaque);
}
.btnSaveChangesEstab{
    width: 500px;
    background-color: #1877F2;
    opacity: 1;
    color: white;
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 500;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.034);
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.configExped{
    display: none;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    background-color: white;
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    padding: 10px;
    border-radius: 10px;
    gap: 20px;
    position: relative;
}
.containerFormExped{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 10px;
    height: calc(100% - 40px);
    overflow-y: auto;
}
.boxExped{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    border: 1px solid #8c8c8c;
    width: 300px;
    height: max-content;
}
.headerExpedBox{
    background-color: #efefef;
    width: 100%;
    border-top-right-radius: 9px;
    border-top-left-radius: 9px;
    padding: 10px;
    border-bottom: 1px solid #8c8c8c;
}
.headerExpedBox input{
    width: 100%;
    background: none;
    outline: none;
    color: var(--var-ColorTextBase);
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
}
.headerExpedBox input::placeholder{
    color: var(--var-ColorTextBase);
}
.labelContain{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.containInputExped{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}
.daysExped{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 10px;
    height: max-content;
    width: 50%;
}
.daysExped label{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 5px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: #8c8c8c;
    cursor: pointer;
}
.containerCheckConfigExped{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 5px;
}

.horarioExped{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 50%;
    height: 100%;
}

.containerInputHoras{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-top: 10px;
    gap: 5px;
}

.hourExpediente{
    outline-color: var(--var-ColorDestaque);
    border: 1px solid #8c8c8c;
    padding: 10px;
    border-radius: 10px;
}
.containerInputHoras p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.boxBtnExped{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    gap: 10px;
}
.confirmChangesExped{
    width: calc(100% - 35px);
    height: 35px;
    border-radius: 5px;
    background-color: #1877F2;
    opacity: 0.5;
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.041);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    pointer-events: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.activeSaveExped{
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}
.deleteExpediente{
    width: 35px;
    height: 35px;
    background-color: var(--var-ColorTextBase);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.deleteExpediente img{
    height: 20px;
    width: 20px;
}

/*tela novo expediente*/
.displayNewExped{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}
.headerNewExped{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.headerNewExped{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.headerNewExped h3{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.closeNewExped{
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: var(--var-ColorDestaque);
    padding: 10px 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: white;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.041);
    cursor: pointer;
}
.closeNewExped img{
    height: 20px;
}

.containInputNewExped{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-top: 80px;
    gap: 30px;
}

.daysNewExped{
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 500px;
}
.labelContainNew{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: #8c8c8c;
}
.containerCheckConfigExpedNew{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    margin-top: 10px;
}
.containerCheckConfigExpedNew label{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    width: 40px;
    border: 1px solid rgb(209, 209, 209);
    border-radius: 15px;
    cursor: pointer;
}
.containerCheckConfigExpedNew label input{
    display: none;
}

.containerCheckConfigExpedNew label:has(input:checked){
    background-color: #1877F2;
    color: white;
}

.containerInputNewHorario{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 500px;
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    color: gray;
    gap: 10px;
}

.inputNewHorarioExped{
    border: 1px solid rgb(209, 209, 209);
    padding: 5px 10px;
    border-radius: 15px;
}

.saveNewExped{
    width: 500px;
    padding: 12px;
    border-radius: 10px;
    background-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: white;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.041);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

@media (max-width: 800px) {
    .container-mainConfig{
        padding-top: 75px;
    }
    .headerConfig{
        width: 100%;
    }
    .headerConfig h2{
        width: 100%;
        text-align: center;
        padding-top: 8px;
    }
    .partFormConfigAba{
        width: 100%;
        align-items: center;
    }
    .containerInputConfigEstab{
        width: 100%;
        align-items: center;
    }
    .btnSaveChangesEstab{
        width: 100%;
    }


    .containerFormExped{
        align-items: center;
        padding-top: 30px;
    }
    .openFormNewExpediente{
        height: 40px;
        width: 40px;
        padding: 0px;
        border-radius: 40px;
    }
    .openFormNewExpediente p{
        display: none;
    }
    .boxExped{
        width: 100%;
    }

    .headerNewExped h3{
        padding-top: 8px;
    }
    .closeNewExped{
        padding: 0px;
        width: 40px;
        height: 40px;
        border-radius: 40px;
    }
    .closeNewExped p{
        display: none;
    }
    .closeNewExped img{
        height: 20px;
        transform: rotate(180deg);
    }
    .containInputNewExped{
        width: 100%;
    }
    .daysNewExped{
        width: 100%;
        align-items: center;
    }
    .containerInputNewHorario{
        width: 100%;
        justify-content: center;
    }
    .saveNewExped{
        width: 100%;
    }
}



/*=================ANIMAÇÕES DE CARREGAMENTO=====================*/
.loadElementSaveEstab{
    display: none;
    height: 20px;
    width: 20px;
    border: 3px solid white;
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    border-radius: 100%;
    animation-name: loadElement;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

.loadElementDeleteExped{
    display: none;
    height: 20px;
    width: 20px;
    border: 3px solid var(--var-ColorTextBase);
    border-bottom: 3px solid white;
    border-radius: 100%;
    animation-name: loadElement;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

.loadElementNewExped{
    display: none;
    height: 20px;
    width: 20px;
    border: 3px solid white;
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    border-radius: 100%;
    animation-name: loadElement;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

.loadSaveChangesExped{
    display: none;
    height: 20px;
    width: 20px;
    border: 3px solid white;
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    border-radius: 100%;
    animation-name: loadElement;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

@keyframes loadElement {
    0%{
        rotate: 0deg;
    }
    100%{
        rotate: 360deg
    }
}

/*======ASSINATURAS DASHBOARD======================================================================================================*/
.assinaturasDashboard{
    background-color: white;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 10px;
}
.containerAssinaturas{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
}
.headerAssinaturas{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: max-content;
}

.headerAssinaturas h1{
    font-family: var(--var-FontStyledMain);
    font-size: 15pt;
    font-weight: 600;
    color: var(--var-FontStyledMain);
}
.rightHeaderPLANOSDASHBOARD{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btnPERIODPLANO{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 30px;
    width: 140px;
    height: 40px;
    cursor: pointer;
    background-color: #D9D9D9;
    position: relative;
    z-index: 1;
}

.deslizante{
    width: 50%;
    height: calc(100% - 6px);
    background-color: #64A0FF;
    border-radius: 30px;
    position: absolute;
    z-index: 1;
}
.anual-deslizante{
    left: auto;
    right: 3px;
}

.mensal-deslizante{
    left: 3px;
    right: auto;
}


.contain-text-deslizante{
    width: calc(100% - 30px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    z-index: 2;
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.041);
}

.textMensal-active{
    color: white;
}


.textAnual{
    transform: translateX(-5px);
}
.textAnual-active{
    color: white;
}

.containerBoxPlanosAbaAssinaturas{
    width: 100%;
    height: 100%;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.planoAbaBOXES{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;
    gap: 20px;
    position: relative;
}

.planoAbaBOXES > header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
}
.planoAbaBOXES > header h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.headerPRO-TRIAL{
    display: flex;
    flex-direction: column !important;
    align-items: start !important;
    justify-content: start !important;
    width: 100% !important;
    gap: 5px;
}
.headerPRO-TRIAL > p{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 10px;
    background-color: rgba(255, 0, 0, 0.082);
    border: 1px solid rgb(255, 69, 69);
    font-family: var(--var-FontStyledMain);
    font-weight: 400;
    font-size: 12px;
    color: rgb(255, 49, 49);
    width: 100%;
    position: relative;
}
.headerPRO-TRIAL > p > button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px 5px;
    background-color: rgba(255, 0, 0, 0.171);
    font-family: var(--var-FontStyledMain);
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    color: rgb(49, 0, 0);
    position: absolute;
    right: 2px;
}
.containBoxASSINATURA{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: 10px;
}
.boxFree{
    width: 300px;
    border: 2px solid var(--var-ColorTextBase);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.041);
    padding: 10px;
}

.headerFREE{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 10px;
}

.namePlano{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: white;
    background-color: var(--var-ColorTextBase);
    padding: 3px 8px;
    border-radius: 10px;
}

.containPrice{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.containPrice p:nth-child(1){
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
}
.containPrice p:nth-child(2){
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: gray;
}

.conteudoPlanoFreeSelected{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
}
.descFreeSelected{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.progressiveBarTotalAgendamentos{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    background-color: #1876f250;
    width: 100%;
    height: 7px;
    border-radius: 5px;
}
.progressiveBarTotalAgendamentos .trilho{
    height: 100%;
    border-radius: 5px;
    background-color: #1877F2;
}

.boxPRO{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 300px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--var-ColorTextBase);
}
.headerPlanoPro{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}
.headerPlanoPro p:nth-child(1){
    height: 25px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: white;
    padding-left: 8px;
    padding-right: 8px;
    background-color: var(--var-ColorTextBase);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.headerPlanoPro p:nth-child(2){
    height: 25px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    color: #D49E06;
    padding-left: 8px;
    padding-right: 8px;
    background-color: #ffc52633;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.conteudoPlanoPro{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 5px;
    width: 100%;
}
.containFunctionPlanoPro{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    margin-top: 20px;

    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 500;
    color: gray;
}
.containFunctionPlanoPro img{
    height: 18px;
    width: 18px;
}

.containCTAPROplanoFREEACTIVED{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.btnCTAassinePRO{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 35px;
    background-color: #1877F2;
    border-radius: 10px;
    cursor: pointer;
}
.btnCTAassinePRO:hover{
    scale: 1.01;
    transition: 0.2s;
}

.btnCTAassinePRO p{
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 600;
    color: white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.041);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btnCTAassinePRO img{
    height: 20px;
    width: 20px;
}

.LEproABAplanos{
    display: none;
    height: 18px;
    width: 18px;
    border-radius: 20px;
    border: 3px solid white;
    animation-name: loadElement;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    border-bottom: 3px solid rgba(255, 255, 255, 0);
}

.btnCTAGERENCIEPRO{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 35px;
    background-color: white;
    border: 1px solid var(--var-ColorTextBase);
    border-radius: 10px;
    cursor: pointer;
}
.btnCTAGERENCIEPRORO:hover{
    scale: 1.01;
    transition: 0.2s;
}
.btnCTAGERENCIEPRO p{
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 600;
    color: var(--var-ColorTextBase);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.activedPlano{
    background-color: #ffc52615;
    border: 1px solid #FFC626;
}

@media (max-width: 845px) {
    .containBoxASSINATURA{
        flex-direction: column;
        align-items: start;
        justify-content: start;
        height: 100%;
        overflow-y: auto;
        padding-bottom: 40px;
    }
}
@media (max-width: 800px) {
    .assinaturasDashboard{
        margin-top: 150px;
    }
    .containerBoxPlanosAbaAssinaturas{
        height: calc(100% - 150px);
    }
}

/*=====ABA GERENCIAR PLANO==================================================================================*/
.abaGerenciarPlanos{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    overflow-y: auto;
    border-radius: 10px;
    padding: 10px;
    z-index: 100;
}
.headerAbaGerenciarAssinatura{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.leftHeaderAbaGerenciarAssinatura{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.leftHeaderAbaGerenciarAssinatura h2{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
}
.rightHeaderAbaGerenciarAssinatura{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#btnVoltarAssinatura{
    background-color: var(--var-ColorDestaque);
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.068);
    height: 35px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 20px;
    cursor: pointer;
}

.containerDadosAssinaturas{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: auto;
    gap: 10px;
}
.resumoDadosAssinaturas{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: max-content;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--var-ColorTextBase);
}
.partOne-dadosAssinatura{
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 20px;
}
.partOne-dadosAssinatura span{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
}
.partOne-dadosAssinatura span h3{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
}
.partOne-dadosAssinatura span p{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}
.partTwo-dadosAssinatura{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: calc(100% - 300px);
    height: 100%;
    max-height: 250px;
    border-left: 1px solid gray;
}
.partTwo-dadosAssinatura h3{
    padding-left: 10px;
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 600;
    color: var(--var-ColorTextBase);
}
.historicoDePagamentos{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    overflow-y: auto;
    padding-left: 10px;
}
.historicoDePagamentos p{
    font-family: var(--var-FontStyledMain);
    font-size: 11pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
}

.buttonsAssinatura{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

#alterarCartao{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #1877F2;
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.068);
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    height: 35px;
    cursor: pointer;
}
#alterarCartao img{
    height: 15px;
    width: auto;
}

#cancelarAssinatura{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--var-ColorTextBase);
    font-family: var(--var-FontStyledMain);
    font-size: 12px;
    font-weight: 500;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    height: 35px;
    cursor: pointer;
}



.popAlterarCartao{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.048);
    backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
}
.boxPopGerenciar{
    width: 90%;
    max-width: 400px;
    height: max-content;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.034);
}
.boxPopGerenciar h4{
    font-family: var(--var-FontStyledMain);
    font-size: 12pt;
    font-weight: 500;
    color: var(--var-ColorTextBase);
    text-align: center;
}
.boxPopGerenciar p{
    font-family: var(--var-FontStyledMain);
    font-size: 10pt;
    font-weight: 400;
    color: var(--var-ColorTextBase);
    text-align: center;
}


.containButtonPopAssinatura{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.containButtonPopAssinatura button{
    font-family: var(--var-FontStyledMain);
    font-weight: 500;
    font-size: 12px;
    color: white;
    width: 50%;
    height: 35px;
    cursor: pointer;
    border-radius: 10px;
}
.containButtonPopAssinatura button:nth-child(1){
    background-color: var(--var-ColorDestaque);
}
.containButtonPopAssinatura button:nth-child(2){
    background-color: #1877F2;
}


.popCancelarAssinatura{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.048);
    backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
}

@media (max-width: 870px) {
    .resumoDadosAssinaturas{
        flex-direction: column;
        height: max-content;
        gap: 10px;
    }
    .partOne-dadosAssinatura{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 20px;
    }
    .partTwo-dadosAssinatura{
        width: 100%;
        height: 100%;
        max-height: 250px;
        border-left: 0px solid gray;
        border-top: 1px solid gray;
        padding-top: 10px;
    }
    .partTwo-dadosAssinatura h3{
        padding-left: 0px;
    }
    .historicoDePagamentos{
        padding-left: 0px;
    }
}
@media (max-width: 800px) {
    .abaGerenciarPlanos{
        margin-top: 70px;
    }
    .buttonsAssinatura{
        width: 100%;
        gap: 10px;
    }
    #alterarCartao{
        width: 50%;
    }

    #cancelarAssinatura{
        width: 50%;
    }
}