:root {
    --primary-color: #001B18;
    --secondary: #003B3A;
    --primary-light: #0d753c;
    --primary-dark: #06572a;
    --secondary-color: #DDD;
    --link: #6ea8fe;
    --link-dark: #4174c2;
    --link-light: #7aabf5;
    --success: #198754;
    --success-dark: #0e633b;
    --success-light: #2aa36b;
    --alert-success: #7bd4aa;
    --danger: #dc3545;
    --danger-dark: #aa1e2c;
    --danger-light: #db4655;
    --alert-danger: #eb9099;
    --warning: #ffc107;
    --warning-dark: #ce9c07;
    --warning-light: #f8bf14;
    --alert-warning: #ebd593;
    --info: #0dcaf0;
    --info-dark: #07a3c2;
    --info-light: #25ccee;
    --alert-info: #9ce0ee;
    --light: #f8f9fa;
    --dark: #212529;
    --dark-light: #2b2f33;
}

.alert-error {
    color: #fff !important;
    background-color: #d13535;
    border-color: #d13535;
}

.alert-error {
    --bs-alert-color: #fdf2f5;
    --bs-alert-bg: #d82c5b;
    --bs-alert-border-color: #d82c5b;
}

.toast {
    opacity: 1 !important;
}


.grayscale {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.dataTables_length {
    margin-top: 10px;
    margin-bottom: 10px;

}

.font-bold {
    font-weight: bold !important;
}

.text-editor {
    padding: 0;
    margin-bottom: 10px !important;
}

.main-timeline {
    position: relative
}

.main-timeline:before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: #c6c6c6;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.main-timeline .timeline {
    margin-bottom: 40px;
    position: relative
}

.main-timeline .timeline:after {
    content: "";
    display: block;
    clear: both
}

.main-timeline .icon {
    width: 18px;
    height: 18px;
    line-height: 18px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.main-timeline .icon:before,
.main-timeline .icon:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.33s ease-out 0s
}

.main-timeline .icon:before {
    background: #fff;
    border: 2px solid #232323;
    left: -3px
}

.main-timeline .icon:after {
    border: 2px solid #c6c6c6;
    left: 3px
}

.main-timeline .timeline:hover .icon:before {
    left: 3px
}

.main-timeline .timeline:hover .icon:after {
    left: -3px
}

.main-timeline .date-content {
    width: 50%;
    float: left;
    margin-top: 22px;
    position: relative
}

.main-timeline .date-content:before {
    content: "";
    width: 36.5%;
    height: 2px;
    background: #c6c6c6;
    margin: auto 0;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0
}

.main-timeline .date-outer {
    width: 125px;
    height: 125px;
    font-size: 16px;
    text-align: center;
    margin: auto;
    z-index: 1
}

.main-timeline .date-outer:before,
.main-timeline .date-outer:after {
    content: "";
    width: 125px;
    height: 125px;
    margin: 0 auto;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.33s ease-out 0s
}

.main-timeline .date-outer:before {
    background: #fff;
    border: 2px solid #232323;
    left: -6px
}

.main-timeline .date-outer:after {
    border: 2px solid #c6c6c6;
    left: 6px
}

.main-timeline .timeline:hover .date-outer:before {
    left: 6px
}

.main-timeline .timeline:hover .date-outer:after {
    left: -6px
}

.main-timeline .date {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 27%;
    left: 0
}

.main-timeline .month {
    font-size: 18px;
    font-weight: 700
}

.main-timeline .year {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #232323;
    line-height: 36px
}

.main-timeline .timeline-content {
    width: 50%;
    padding: 20px 0 20px 50px;
    float: right
}

.main-timeline .title {
    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 0 15px 0
}

.main-timeline .description {
    margin-bottom: 0
}

.main-timeline .timeline:nth-child(2n) .date-content {
    float: right
}

.main-timeline .timeline:nth-child(2n) .date-content:before {
    left: 10px
}

.main-timeline .timeline:nth-child(2n) .timeline-content {
    padding: 20px 50px 20px 0;
    text-align: right
}

.sidenav {
    background: var(--primary-color) !important;
    width: 3.4rem!important;
    height: 100vh;
    position: fixed;
    padding: 0px!important;
    top: 0;
    z-index: 9;
    align-items: stretch;
}

.sidenav ul{
    list-style: none;
    padding: 1.5rem 0px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    justify-items: center;
    text-align: center;
}
.sidenav li a{
    border-radius: 5px!important;
    cursor: pointer;
    padding: .8rem!important;
}

.sidenav li a:hover{
    background: var(--secondary);
}

.sidenav li a svg{
    width: 1.4rem;
    height: 1.4rem;
}

.hide-mobile{
    display: block;
}
.hide-desktop{
    display: none;
}

.navbar {
    transition-duration: .3s;
    z-index: 99;
    background: var(--primary-color) !important;
    width: 3.6rem;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(0%);
    flex-direction: column;
    padding: 0px;
}

.navbar .navbar-nav{
    width: 100%;
    padding: 10px 0px;
    height: 100dvh;
    display: flex;
    justify-content: space-between;
}

.navbar.show .navbar-nav{
    height: 100dvh;
    width: 95%;
    padding: 10px 30px;
}

.navbar .arrow-nav-dropdown{
    display: none;
}
.navbar.show .arrow-nav-dropdown{
    display: inline-block;
}
.nav-item.nav-submenu {
    padding-left: 0rem;
}
.nav-item.show .nav-label ~ .nav-link{
    padding-left: 1.6rem!important;
}

.navbar .nav-item {
    cursor: pointer;
    padding: 0px;
    border-radius: 5px;
    margin: 5px 0px;
}

.navbar.show .nav-item {
    cursor: pointer;
    padding: 0px 1rem 0px 1rem;
    border-radius: 5px;
    margin: 2px 0px;
}

.navbar hr {
    margin: 7px;
    display: none;
}

.navbar.show hr {
    display: block;
}



.navbar .navbar-body .nav-item a span{
    display: none;
}
.navbar.show .navbar-body .nav-item a span{
    display: inline-block;
}

.navbar.show .navbar-body .nav-item .nav-link, .close-menu{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12px !important;
    padding-top: 12px !important;
}

.navbar .navbar-body .nav-item .nav-link{
    display: flex;
    justify-items: center;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.navbar.show .navbar-body .nav-item .nav-link{
    display: flex;
    justify-items: center;
    align-items: center;
    justify-content: start;
}
.navbar .navbar-body .nav-item .nav-link .nav-link-icon{
    padding: 0px;
    text-align: center;
}

.navbar .navbar-body .nav-item.dropdown.dropdown-nav.sidenav-options-parent .nav-link{
    margin-left: 0.8rem;
}

.navbar.show .navbar-body .nav-item .nav-link .nav-link-icon{
    padding: 0px;
    width: 1.2rem;
    height: 1.4rem;
    margin-right: .4rem;
}
.navbar.show .navbar-body .nav-submenu .nav-link{
    margin-left: .8rem;
}

.navbar .nav-label{
    display: none;
    color: #999 !important;
    font-size: .7rem;
    font-weight: 700;
    margin:0px;
    padding: 0px;
}
.navbar.show .nav-label{
    display: inline-block;
    color: #999 !important;
    font-size: .7rem;
    font-weight: 700;
    margin-bottom: 0px;
    margin-top: 5px;
    padding-bottom: 0px;
    padding-left: 1rem;
}

.navbar.show .close-menu svg{
    rotate: 0deg;
}
.close-menu svg, .navbar-toggler svg {
    color:#FFF;
}

.navbar .close-menu svg{
    rotate: 180deg;
}


.navbar.show .nav-logo {
    display: flex;
    flex-grow: 1;
    align-items: flex-end;
}
.navbar .nav-logo {
    display: inline-block;
}

.navbar .nav-logo:hover{
    background: var(--secondary);
}

.navbar.show .nav-logo:hover{
    background: transparent;
}

.navbar .nav-logo > svg{
    display: none;
}
.navbar.show .nav-logo > svg{
    display: inline-block;
    height: 50px;
    width: 18rem;
    padding-left: 25%;
}
.navbar.show .nav-logo > .close-menu{
    padding-left: 0px!important;
    margin-right: 20px!important;
    margin-bottom: 18px!important;
}

.navbar .navbar-body .nav-item.nav-submenu{
    width: 100%;
    margin-left: 0px!important;
}

.navbar.show{
    transform: translateX(0%);
    width: 24rem;
}
.navbar.show~main {
    margin-left: 27.5rem;
}

main {
    margin-left: 8rem;
    margin-right: 3rem;
    transition-duration: .2s;
}

.search {
    display: grid;
    grid-template-columns: 60% 28%;
    justify-content: space-between;
    width: 100%;
    border-bottom: 2px solid #e9eaed;
    padding-bottom: 1.5rem;
    padding-right: 0rem;
}

.nav-link span,
.btn-light svg,.nav-link span,
.btn-white svg, .btn-light a, .btn-white a {
    color: #555;
}

.nav-link span,
.btn-dark svg {
    color: #FFF;
}

.nav-item:hover,
.nav-submenu:hover {
    background: var(--secondary);
}

.navbar .nav-item.dropdown:hover {
    background: var(--secondary);
}

.navbar.show .nav-item.dropdown:hover {
    background: transparent;
}

.nav-submenu.active,
.nav-submenu:has(.nav-link.active){
    background: var(--secondary);
}

/* Estilo específico para o menu registro cartorário */
.registro-cartorario-menu {
    display: none !important;
    width: 100%;
    background: transparent;
    padding: 0;
    margin: 0;
}

.registro-cartorario-menu.show {
    display: block !important;
}

.navbar.show .registro-cartorario-menu {
    display: block !important;
}

.navbar:not(.show) .registro-cartorario-menu {
    display: none !important;
}

/* Força o comportamento correto dos collapse menus */
#registroCartorarioCollapse {
    display: none !important;
    transition: none !important;
}

#registroCartorarioCollapse.show {
    display: block !important;
}

.navbar.show #registroCartorarioCollapse.show {
    display: block !important;
}

.navbar:not(.show) #registroCartorarioCollapse {
    display: none !important;
}

.suporte-menu {
    display: none !important;
    width: 100%;
    background: transparent;
    padding: 0;
    margin: 0;
}

.suporte-menu.show {
    display: block !important;
}

#emailCollapse {
    display: none !important;
    transition: none !important;
}

#emailCollapse.show {
    display: block !important;
}

.navbar.show #emailCollapse.show {
    display: block !important;
}

.navbar:not(.show) #emailCollapse {
    display: none !important;
}

.collapse .nav-link {
    color: #c6c6c6 !important;
}

.collapse.show{
    width: 100%;
    display: block !important;
}

.collapse:not(.show) {
    display: none !important;
}

.navbar .navbar-nav .collapsing, .navbar .navbar-nav .collapse.show {
    display: none!important;
}
.navbar.show .navbar-nav .collapsing, .navbar.show .navbar-nav .collapse.show {
    display: block!important;
}

/* Força exibição correta dos collapse quando navbar está expandido */
.navbar.show .collapse.show {
    display: block !important;
}

.navbar .collapse.show {
    display: none !important;
}

.container-card-menu {
    display: flex;
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    position: relative;
    cursor: pointer;
}

.user-photo {
    width: 40px;
    height: 40px;
    border-radius: 10%;
    margin-right: 10px !important;
}

.navbar .user-info {
    display: none;
}

.navbar.show .user-info {
    margin-left: .6rem !important;
    display: inline-block;
    width: 200px;
    display: block;
}

.user-info h2 {
    margin: 0;
    font-size: 14px;
    color: #c6c6c6;
    text-overflow: ellipsis;
    white-space: nowrap; /* Impede que o texto pule para a próxima linha */
    overflow: hidden; /* Esconde o texto que ultrapassa o contêiner */
    width: 100%; /* Define a largura do contêiner */
}

.user-info p {
    margin: 0;
    color: #A0B5B1;
    text-overflow: ellipsis;
    white-space: nowrap; /* Impede que o texto pule para a próxima linha */
    overflow: hidden; /* Esconde o texto que ultrapassa o contêiner */
    width: 100%; /* Define a largura do contêiner */
}

.user-info span {
    display: none;
    position: absolute;
    padding: 3px 5px;
    background: var(--primary-color);
    color: #FFF;
    left: 1rem;
    width: 95%;
    font-size: .8rem;
}
.user-info p:hover ~ span {
   display: flex;
}

.navbar .user-card{
    padding: 0px;
    border-radius: 7px;
}

.navbar.show .user-card{
    padding: 10px 10px;
    border-radius: 7px;
}

.navbar .user-options {
    display: block;
    z-index: 2;
    width: 20rem;
    background-color: #FFF !important;
    padding: 20px 10px;
    position: absolute;
    top: 1vh;
    left: 4rem;
    border-radius: 5px;
    color: var(--primary-color);
    visibility: hidden;
    opacity: 0.0;
    transition-duration: .3s;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2)!important;
}
.navbar.show .user-options {
    width: 100%;
    left: 0;
    top: 0;
}
.user-options.active {
    visibility: visible;
    opacity: 1;
    top: -1vh;
}

.user-options a {
    padding: 5px 1.5rem;
    color: #000 !important;
}

.dropdown-item-text {
    justify-content: center;
    padding: 0px 10px;
    margin-bottom: 20px;
}

.dropdown-btn {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.dropdown-nav .arrow-nav-dropdown {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 22px;
    transform: translateY(-50%);
}


.dropdown-btn:hover {
    color: #A0B5B1;
}

.navbar.show .user-card .avatar {
    width: auto;
    height: auto;
}

.navbar .user-card .avatar {
    margin-right: 0px;
    width: auto;
    height: auto;
}



.btn-primary button{
    border: none!important;
    background: transparent;
}

#modalDepartamentos .modal-content {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

#modalDepartamentos .input-group-text button {
    border: none;
    background-color: transparent;
}

/* Estilo base do tooltip */
.tooltip-garantia {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Caixa de texto do tooltip */
.tooltip-garantia::after {
    content: attr(data-tip);
    position: absolute;
    background-color: var(--primary-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

/* Estilo base do tooltip */
.alt{
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Caixa de texto do tooltip */
.alt::after {
    content: attr(data-tip);
    position: absolute;
    background-color: var(--primary-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}



/* Exibir o tooltip quando hover */
.tooltip-garantia:hover::after,
.tooltip-garantia:hover::before {
    opacity: 1;
    visibility: visible;
}


/* Exibir o tooltip quando hover */
.alt:hover::after,
.alt:hover::before {
    opacity: 1;
    visibility: visible;
}

.navbar.show .navbar-nav .tooltip-garantia:hover::after,
.navbar.show .navbar-nav .tooltip-garantia:hover::before{
    display: none!important;
}



/* Seta do tooltip */
.tooltip-garantia::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

/* Seta do tooltip */
.alt::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

/* Tooltip à direita (right) */
.tooltip-garantia[data-tip-position="right"]::after, .alt[data-tip-position="right"]::after {
    top: 50%;
    left: 100%; /* Posiciona à direita do elemento */
    transform: translateY(-50%);
    margin-left: 8px;
}
.tooltip-garantia[data-tip-position="right"]::before, .alt[data-tip-position="right"]::before {
    top: 50%;
    left: calc(105% + 1px); /* Seta alinhada com o tooltip à direita */
    transform: translateY(-50%);
    border-color: transparent var(--primary-color) transparent transparent; /* Seta apontando para a esquerda */
    border-width: 5px 5px 5px 0; /* Ajuste da largura da borda para a seta */
}

/* Tooltip à esquerda (left) */
.tooltip-garantia[data-tip-position="left"]::after {
    top: 50%;
    right: 100%; /* Posiciona à esquerda do elemento */
    transform: translateY(-50%);
    margin-right: 8px;
}
.tooltip-garantia[data-tip-position="left"]::before {
    top: 50%;
    right: 99%; /* Seta alinhada com o tooltip à esquerda */
    transform: translateY(-50%);
    border-color: transparent transparent transparent var(--primary-color); /* Seta apontando para a direita */
    border-width: 5px 0 5px 5px; /* Ajuste da largura da borda para a seta */
}

/* Tooltip abaixo (bottom) */
.tooltip-garantia[data-tip-position="bottom"]::after, .alt[data-tip-position="bottom"]::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
}
.tooltip-garantia[data-tip-position="bottom"]::before, .alt[data-tip-position="bottom"]::before {
    top: 99%;
    left: 50%;
    transform: translateX(-50%);
    border-color: transparent transparent var(--primary-color) transparent;
}

/* Tooltip acima (top) */
.tooltip-garantia[data-tip-position="top"]::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}
.tooltip-garantia[data-tip-position="top"]::before {
    bottom: 99%;
    left: 50%;
    transform: translateX(-50%);
    border-color: var(--primary-color) transparent transparent transparent;
}


.sidenav-options {
    display: none!important;
    position: absolute;
    min-width: 200px;
    left: 100%;
    margin-top: -3.8rem!important;
    background: #FFF;
    height: fit-content!important;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    padding: 0px!important;
    transition-duration: .5s;
}


.sidenav-options li {
    width: 100%;
}

.sidenav-options .legend{
    font-weight: 700;
    text-align: left;
    padding: 10px 15px;
}

.sidenav-options li a {
    padding: 10px 15px;
    text-decoration: none;
    color: var(--primary-color)!important;
    padding: 7px 15px!important;
    width: 100%;
    border-radius: 0px!important;
}

.sidenav-options li a:hover {
    background-color: var(--secondary)!important;
    color: #FFF!important;
}

.navbar .sidenav-options-parent:hover .sidenav-options, .navbar .sidenav-options-parent .avatar:hover .sidenav-options {
    display: block!important;
}

.navbar.show .sidenav-options-parent:hover .sidenav-options, .navbar.show .sidenav-options-parent .avatar:hover .sidenav-options {
    display: none!important;
}

/* Desabilita o hover menu quando o collapse está ativo */
.navbar .sidenav-options-parent.collapse-active:hover .sidenav-options {
    display: none!important;
}

@media only screen and (max-width: 991px) {
    .search {
        margin-top: 10vh!important;
        display: block;
        grid-template-columns: 100% 100%;
        align-items: center;
        justify-content: center;
        justify-items: center;text-align: center;
        width: 100%;
    }

    .footer small, .footer .termos span{
        text-align: center!important;
        margin-top: 10px;
        display: block;

    }

    .input-group input {
    height: 2.5rem;
    }

    .hide-mobile{
        display: none;
    }
    .hide-desktop{
        display: block;
    }
    .sidenav {
        background: var(--primary-color) !important;
        width: 100%!important;
        height: 7vh;
    }
    .sidenav ul{
        align-items: baseline!important;
        justify-content: baseline!important;
        justify-items: baseline!important;
        align-content: baseline!important;
        height: fit-content!important;
        padding-top: 1vh;
    }

    .sidenav ul a{
        border-radius: 0px;
        padding: 7px 10px!important;
        margin: 0px!important;
    }

    .nav-item{
        font-size: .7rem!important;
        padding: 0px!important;
        margin: 0px!important;
    }
    .nav-link{
        padding: 0px 15px!important;
        margin: 0px!important;
    }

    .navbar .navbar-body .nav-item .nav-link, .close-menu{
        padding-bottom: 10px!important;
        padding-top: 10px!important;
    }
    .navbar .navbar-body .nav-item .nav-link .nav-link-icon{
        width: 1.2rem!important;
    }
    .navbar .navbar-body .nav-item a span{
        display: inline-block;
        font-size: .7rem;
    }
    .navbar .nav-submenu .nav-link{
        margin-left: .4rem!important;
    }
    .navbar .nav-label{
        margin: 10px 0px 10px .8rem!important;
    }

    .navbar .nav-logo:hover {
        background: transparent;
    }
    .navbar .nav-logo {
        display: flex!important;
        flex-grow: 1!important; /* Faz o elemento ocupar o espaço restante */
        align-items: flex-end!important;
        padding: 50px 0px 0px 0px!important;
        margin:0px!important;
        width: 100%!important;
    }
    .navbar .nav-logo > svg{
        display: inline-block!important;
        height: 50px!important;
        width: 55%!important;
        margin-left: 20%;
    }

    .navbar .nav-logo > a{
        width: 10%!important;
        padding: 0px!important;
        margin:0px 10px 0px 0px!important;
        rotate: 180deg;
        float: right;
    }

    .breadcrumb{
        margin-bottom: 1rem;
        font-size: 14px!important;
    }

    .breadcrumb .nav-link{
        padding:0px!important;
    }

    .breadcrumb .separator {
        margin: 0 2px!important;
        color: #9e9e9e!important;
    }

    .breadcrumb svg {
        width: 14px!important;
        height: 14px!important;
        margin-right: 6px!important;
    }

    .navbar .sidenav-options-parent:hover .sidenav-options, .navbar .sidenav-options-parent .avatar:hover .sidenav-options {
        display: none!important;
    }

    .navbar.show .sidenav-options-parent:hover .sidenav-options, .navbar.show .sidenav-options-parent .avatar:hover .sidenav-options {
        display: block!important;
    }

    .navbar .navbar-nav .collapsing, .navbar .navbar-nav .collapse.show {
        display: inline-block!important;
    }
    .navbar.show .navbar-nav .collapsing, .navbar.show .navbar-nav .collapse.show {
        display: inline-block!important;
    }


    .navbar.show .navbar-nav .collapsing, .navbar.show .navbar-nav .collapse.show {
        display: inline-block!important;
    }

    .navbar .user-options {
        width: 100%;
        left: 0;
        top: 0;
    }

    .close-menu{
        margin-right: 50px;
    }

    .navbar-nav{
        height: 100dvh!important;
    }
    .navbar{
        transform: translateX(0%)!important;
        flex-direction: row;
        align-items: baseline;
        width: 80vw;
        height: 100vh;
    }
    .navbar-nav{
        padding: 1.5rem 0px!important;
    }
    .navbar-body{
        width: 80%;
        margin-left: 10%;
    }
    .navbar.show{
        transform: translateX(-100%)!important;
    }
    .navbar .user-info{
        margin-left: .6rem !important;
        display: inline-block;
    }
    .arrow-nav-dropdown, .nav-label{
        display: inline-block!important;
    }
    .navbar .nav-logo > svg {
        display: inline-block!important;
    }

    .navbar hr {
        margin: 7px;
        display: block;
    }

    .navbar .nav-item, .navbar .nav-link{
        display: inline-block!important;
    }

    main{
        margin-left: 0px!important;
    }
    .main-timeline .date-content {
        margin-top: 35px
    }

    .main-timeline .date-content:before {
        width: 22.5%
    }

    .main-timeline .timeline-content {
        padding: 10px 0 10px 30px
    }

    .main-timeline .title {
        font-size: 17px
    }

    .main-timeline .timeline:nth-child(2n) .timeline-content {
        padding: 10px 30px 10px 0
    }
}

@media only screen and (max-width: 767px) {
    .main-timeline:before {
        margin: 0;
        left: 7px
    }

    .main-timeline .timeline {
        margin-bottom: 20px
    }

    .main-timeline .timeline:last-child {
        margin-bottom: 0
    }

    .main-timeline .icon {
        margin: auto 0
    }

    .main-timeline .date-content {
        width: 95%;
        float: right;
        margin-top: 0
    }

    .main-timeline .date-content:before {
        display: none
    }

    .main-timeline .date-outer {
        width: 110px;
        height: 110px
    }

    .main-timeline .date-outer:before,
    .main-timeline .date-outer:after {
        width: 110px;
        height: 110px
    }

    .main-timeline .date {
        top: 30%
    }

    .main-timeline .year {
        font-size: 24px
    }

    .main-timeline .timeline-content,
    .main-timeline .timeline:nth-child(2n) .timeline-content {
        width: 95%;
        text-align: center;
        padding: 10px 0
    }

    .main-timeline .title {
        margin-bottom: 10px
    }
}


.alert-info {
    color: #FFF;
    background-color: #31708f;
    border-color: #bce8f1;
    font-size: 16px;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.dashboard-stat {
    position: relative;
    display: block;
    margin: 0 0 25px;
    overflow: hidden;
    border-radius: 4px;
}

.dashboard-stat .visual {
    width: 80px;
    height: 80px;
    display: block;
    float: left;
    padding-top: 10px;
    padding-left: 15px;
    margin-bottom: 15px;
    font-size: 35px;
    line-height: 35px;
}

.dashboard-stat .visual>i {
    margin-left: -15px;
    font-size: 110px;
    line-height: 110px;
    color: #fff;
    opacity: 0.1;
}

.dashboard-stat .details {
    position: absolute;
    left: 15px;
    color: #fff;
    padding: 5px 15px;
    font-weight: bold;
}

.dashboard-stat .details .number {
    padding-top: 25px;
    text-align: right;
    font-size: 34px;
    line-height: 36px;
    letter-spacing: -1px;
    margin-bottom: 0;
    font-weight: 300;
}

.dashboard-stat .details .number .desc {
    text-transform: capitalize;
    text-align: right;
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 300;
}

.dashboard-stat.blue {
    background-color: #337ab7;
}

.dashboard-stat.red {
    background-color: #e7505a;
}

.dashboard-stat.orange {
    background-color: #e79e50;
}

.dashboard-stat.yellow {
    background-color: #e7bc50;
}

.dashboard-stat.purple {
    background-color: #8E44AD;
}

.dashboard-stat.hoki {
    background-color: rgba(7, 133, 82, 0.5);
}

.dashboard-stat.trodi {
    background-color: rgba(7, 122, 133, 0.5);
}


.dashboard-stat.success {
    background-color: rgba(28, 154, 18, 0.7);
}

.dashboard-stat.dark {
    background-color: rgba(0, 0, 0, 0.7);
}

.dashboard-stat.light-green {
    background-color: rgba(28, 154, 18, 0.5);
}


.splide__arrow {
    top: 40% !important;
}

.template-wrapper {
    margin-bottom: 20px !important;
    border-bottom: 3px #edeef0 solid !important;
}


.helptext {
    color: #31708f;
}

#criar-ticket p {
    margin-bottom: 10px !important;
}

#criar-ticket label {
    font-size: .75rem;
    font-weight: 700;
    margin-bottom: 0.3125rem;
}



@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

.input-group {
    display: flex;
    border: 1px solid #e9eaed; /* Ajuste conforme necessário */
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    height: 2.5rem;
  }

  .input-group input {
    flex: 1;
    border: none;
    padding: 0px 15px!important;
    font-size: 12px;
  }

  .input-group input:focus {
    outline: none;
    border-bottom: 1px solid var(--secondary);
  }


  .input-group button {
    border: none;
    padding: 0px 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #017D7B;
  }

  .input-group svg {
    width: 16px;
    height: 16px;
  }

  .input-group button:focus {
    outline: none;
  }

  .arrow-nav-dropdown{
    position: absolute;
    right: .9rem;
  }

  .dropdown-nav a[aria-expanded="true"] > .arrow-nav-dropdown {
    transform: translateY(-50%) rotate(180deg);
    margin-right: 5px;
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1.2rem;
    color: #0d1912;
    width: 100%;
}

/* Espaçamento entre os itens do breadcrumb */
.breadcrumb a {
    text-decoration: none;
    color: var(--primary-color)!important;
}

/* Estilo dos separadores */
.breadcrumb .separator {
    margin: 0 5px; /* Espaçamento dos separadores */
    color: #9e9e9e!important; /* Cor do separador */
}

/* Ícone de início do breadcrumb */
.breadcrumb svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    stroke: var(--primary-color); /* Cor do contorno */
    fill: none;
}

.breadcrumb.nav-item:hover{
    background: transparent!important;
}

.actions-control{
    width: 100%;
    height: 6rem;
    background-color: #f7f7f7;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 1rem;
    padding: 0px 5rem;
}
.footer-base{
    margin-bottom: 10rem;
}

#id-botao-voltar,#id-botao-cancelar,#botao-checklist-voltar, #cancelarEnvio{
    background: #f7f7f7;
    border: 1px solid #017D7B;
    color: #017D7B;
}


#id-lista-arquivos-confirmacao li, #id-lista-arquivos li{
    background: #F8FAFB;
    width: 95%!important;
    margin-left: 40px;
}


.select2-container--default .select2-selection--single {
    height: 36px;
    padding-top: 2px;
    line-height: 1.5rem;
    background: var(--bs-form-control-bg)!important;
    border: 1px solid var(--bs-gray-300)!important;
    color: var(--bs-gray-200)!important;
}

#custom-inserir{
    margin-left: 1rem;
    height: 36px;
    padding-top: 2px;
    border: 1px solid var(--bs-gray-300)!important;
}


/* Estilos personalizados para o alerta */
#alert-container{
    position: relative;
}
.alert-custom {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    transition-duration: .3s;
    font-size: .9rem!important;
    z-index: 1000; /* Garante que o alerta fique acima de outros elementos */
}

  .alert-success { background-color: #017B40; }
  .alert-error { background-color: #a71d2b; }
  .alert-info { background-color: #3796a5; }
  .alert-warning { background-color: #BDAB01; color: #FFF; }
  .alert-custom span{
    color: #FFF!important;
    fill: #FFF!important;
  }

  .alert-custom div svg {
    fill: currentColor;
  }
  .alert-custom .close-btn {
    margin-left: auto;
    cursor: pointer;
    color: #fff;
    font-size: 1.2rem;
  }

/* Estilo do loading */
.loading {
    transform: translate(-50%, -50%); /* Centraliza o loader no meio do botão */
    border: 3px solid #FFF; /* Cor de fundo */
    border-top: 3px solid #e9eaed; /* Cor da borda superior */
    border-radius: 50%; /* Tornar a div redonda */
    width: 15px; /* Ajuste para o tamanho desejado */
    height: 15px; /* Ajuste para o tamanho desejado */
    animation: spin 2s linear infinite; /* Animação de rotação */
    position: absolute;
    margin-top: -15px;
}

/* Animação de rotação */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.list-group-item svg{
    color: #333;
    fill: #333;
}

.login{
    font-family: 'Roboto', Arial, sans-serif;
}

.login .title{
    text-align: center;
    margin-top: 1rem;
}

.login .title h1{
    font-size:1.7rem;
    font-family: Raleway;
    font-weight: 600;
    line-height: 40px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.login .title p{
    font-size:.9rem;
}
.login input{
    border-radius: 5px!important;
    border: 1px solid #CCC;
}

.login .link-primary{
    color: var(--secondary)!important;
    font-size: .8rem;
}

.login button, .login .btn-confirm{
    width: 100%;
    height: Hug (48px)px;
    padding: 13px 20px 13px 24px;
    gap: 6px;
    border-radius: 4px;
    opacity: 0px;
    background: var(--Secundrias-Ciano-escuro-500, #017D7B);
}

.login .input-group button{
    background: transparent;
    border:none;
    position: absolute;
    right: 0px;
    color: #AAA!important;
    width: 15%;
}

.login .contato{
    text-align: center;
    display: block;
    margin: 0 auto;
}

.login .contato a, .termos a, .footer a{
    color: var(--Secundrias-Ciano-escuro-500, #017D7B)!important;
}

.image-login h3{
    font-family: Raleway;
    font-size: 3rem;
    font-weight: 600;
    line-height: 56.35px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    position: absolute;
    bottom: 2rem;
    left: 4rem;
}

.login svg{
    display: block;
    margin: 0 auto;
    margin-bottom: 2.5rem;
}
.login{
    height: 90vh;
    padding-top: 5vh ;
}
.footer{
    height: auto;
}
.footer .termos{
    text-align: left!important;
}

.footer small{
    text-align: right;
}
.recaptcha-container {
    max-width: 100%;
    align-items: center;
    justify-items: center;
    justify-content: center;
  }


  /* Define borda da tabela e das linhas */
#tabela-checklists-1 {
    border: none;
}

#tabela-checklists-1 tbody tr, #tabela-checklists-1 thead tr {
    border: 1px solid #e0e0e0; /* Define uma borda cinza nas linhas */
    border-radius: 5px;
    padding: 8px 16px;
}

.cursor-pointer{
    cursor: pointer;
}

.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
}

.custom-checkbox input[type="checkbox"] {
    display: none; /* Oculta o checkbox padrão */
}

.custom-checkbox .checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #017D7B;
    border-radius: 4px;
    margin-right: 8px;
    transition: background-color 0.3s, border-color 0.3s;
    position: relative;
}

.custom-checkbox span {
    display: none;
    color: #FFF;
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark {
    background-color: #017D7B;
    border-color: #017D7B;
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark span {
    display: inline; /* Exibe o ícone "✓" quando o checkbox está marcado */
}

.text-success{
    color: #056d3d!important;
}

.text-danger{
    color: rgb(121, 8, 8);
}

.form-check-input{
    border-color:#999;
}


.card-outline {
    background: #fff;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    width: 100%;
    padding: 1rem
}

.card-dados {
    display: flex;
}

.card-dados div {
    display: flex;
    flex-direction: row;
}

.card-dados .dados label {
    display: inline-block;
    font-size: 1rem;
    color: #777;
    font-weight: 500;
}

.card-dados .dados span {
    display: inline-block;
    color: #333;
    font-size: 1rem;
    font-weight: 600;
    margin-left: 2px;
}

.respostas {
    background: #F2F5F5;
    padding: 12px;
    border-radius: 6px;
    font-family: 'Arial', sans-serif;
    color: #333;
    position: relative;
    margin-left: 1.5rem;
    padding: 1rem 2rem;
}

.respostas::before {
    content: '';
    position: absolute;
    top: 0px;
    left: -22px;
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-top: 28px solid #f3f4f6;
}

.respostas .resposta {
    margin: 0;
    font-size: 14px;
}

.respostas .horario {
    font-size: 12px;
    color: #777;
    margin-right: 1rem;
}

.card-registro {
    padding: 1rem 2rem;
}

.btn-outline {
    border: 1px solid #00bac7;
    padding: 0px 10px !important;
    border-radius: 7px;
}

.btn-outline:hover {
    border: 1px solid #00bac7;
    color: #FFF;
}

.btn-outline-primary:hover {
    border: 1px solid #00bac7;
    color: #FFF!important;
}
.btn-outline-info:hover{
    background: transparent;
}
.btn-circle{
    border-radius: 20px!important;
}

.btn-rounded-circle{
    border-radius: 5px!important;
    font-weight: 500!important;
    color: #00bac7!important;
    font-size: 12px!important;
    width: min-content!important;
}
.btn-rounded-circle:visited {
    color: inherit!important; /* mesma cor após visitar */
  }

  .btn-rounded-circle:active {
    color: inherit!important; /* mesma cor enquanto clica */
  }

  .btn-rounded-circle:focus {
    color: inherit!important; /* mesma cor se focado via teclado */
    outline: none!important; /* remove a borda azul de foco, se quiser */
  }

.btn-border {
    border: 1px solid var(--status-border)!important;
    background: var(--status-background)!important;
    color: var(--status-color)!important;
    padding: 5px 10px !important;
    border-radius: 7px;
}

.btn-border:hover {
    border: 1px solid var(--status-color);
}

.btn-border.primary{
    --status-color: #003b3a;
    --status-background: #eff7f4;
    --status-border: #88b6a5;
}

.card-outline .d-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-outline .d-flex .btn-group {
    display: flex;
    gap: 8px;
}

.registro-chat{
    width: 100%;
}

.avatar-content p{
    font-weight: 600;
    font-size: .9rem;
    margin-top: 5px;
}
.registro-chat .btn{
    font-weight: 500;
    display: block;
    float: right;
}

.btn-rounded{
    border-radius: 3px!important;
    background: #016664!important;
    color: #FFF!important;
    border-radius:7px!important;
}


.btn-rounded:hover{
    background: #015352;
    color: #FFF;
}

.error-message {
    display: none;
    color: #e24444;
    font-size: 0.8rem;
    width: 100%;
}
.error-message i {
    color: #e24444;
    font-size: 0.8rem;
    text-align: right;
    float: right;
    margin-top: -30px;
    margin-right: 10px;
}

input.error, select.error {
    border-color: #e24444;
}

input.error ~ .error-message, select.error ~ .error-message{
    display: inline-block;
}

.accordion-header.error .accordion-button::before{
    content: "Com pendência";
    padding: 10px 7px;
    background: #FBF3D8;
    color:#6D6200;
    border-radius: 5px;
    position: absolute;
    right:100px;
    font-size: .7rem;
    line-height: 0;
}

.accordion-header.error .accordion-button{
    background: #FDFBF2!important;
}

.campos-adicionais{
    display: none;
}

.campos-adicionais.p-4.show{
    display: flex;
}
.campos-adicionais.col.show{
    display: inline-block;
}

.modal-partes-view p{
    line-height: 12px!important;
    margin-bottom: 2px!important;
    font-size: 1rem;
}

/* Spinner 1 - Circular Simple */
.spinner {
    display: inline-block;
}


.spinner-circle {
    width: 3rem;
    height: 3rem;
    border: 4px solid #ddd;
    border-top: 4px solid;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner 2 - Pulsing Dots */
.spinner-dot {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color);
    animation: pulse 1.2s infinite cubic-bezier(0.66, 0, 0.33, 1);
}

.spinner-primary {
    border-top: 4px solid var(--primary-color);
}

.spinner-success {
    border-top: 4px solid var(--success);
}

.spinner-danger {
    border-top: 4px solid var(--danger);
}

.spinner-warning {
    border-top: 4px solid var(--warning);
}

.spinner-info {
    border-top: 4px solid var(--info);
}

.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: .15rem;
}

.spinner-lg {
    width: 6rem;
    height: 6rem;
    border-width: .7rem;
}

.spinner-xlg {
    width: 9rem;
    height: 9rem;
    border-width: .9rem;
}

/* Efeito de pulsação */
@keyframes pulse {
    0% {
        transform: scale(0.4);
        opacity: 0.6;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.4);
        opacity: 0.6;
    }
}

/* Animations */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-15px);
    }
}

/* Grid */



/* Barra de progresso */

.progress-bar {
    position: relative;
    height: 25px;
    line-height: 25px;
    color: #fff;
    border-radius: 5px;
    margin-bottom: 20px;

    width: 100%;
    background-color: #ddd;
}

.steps .progress-bar {
    border-radius: 0px;
    height: .7rem;
}

.steps .progress-bar .progress-fill {
    border-radius: 0px;
}

.progress-bar.legend::after {
    content: attr(data-width) '%';
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translate(-50%, -50%);
    color: #000;
    text-shadow: #FFF 1px -1px, #FFF -1px 1px, #FFF 1px 1px, #FFF -1px -1px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.progress-fill {
    height: 100%;
    background-color: var(--color, var(--primary-color));
    width: 0;
    position: absolute;
    overflow: hidden;
    animation: fillProgress .8s ease-out forwards;
    border-radius: 5px;
}

.progress-static {
    background-color: var(--color, var(--primary-color));
    width: var(--width, 0);
    height: 100%;
    border-radius: 5px;
}

/* Efeito das barras inclinadas */
.progress-pattern {
    position: relative;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    background: repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.1) 10px,
            transparent 10px,
            transparent 20px);
}

.animated .progress-pattern {
    animation: moveStripes 1s linear infinite;
}

.bar-sm {
    height: .5rem;
}

.bar-lg {
    height: 2.5rem;
}

.bar-xlg {
    height: 3.5rem;
}

/* Animação de preenchimento */
@keyframes fillProgress {
    from {
        width: 0;
    }

    to {
        width: var(--width);
    }
}

/* Movimento das barras inclinadas */
@keyframes moveStripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -29px 0;
    }
}


.backdrop{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    z-index: 9999999;
    background: rgba(0,0,0,0.5);
    display: none;
}

#addFileButton{
    background: #017674!important;
    color: #F2F5F5!important;
}
#addFileButton i {
    color: #F2F5F5!important;
    font-size: 1.2rem;
    line-height: 0;
    padding: 0;
    margin: 0;
}

.frase2-upload{
    text-align: center;
}

#resultadosClearance{
    padding: 10px 0px;
}
#resultadosClearance li{
    margin-top: 5px;
}

.chat-averbacao img {
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chat-averbacao img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    filter: brightness(0.8);
}

/* Estilos do Modal */
.imgModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh!important;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.imgModal img{
    max-height: 60%;
    width: auto;
}

.imgModal-header {
    position: absolute;
    top: 20px;
    right: 30px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.imgModal-close {
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.imgModal-download {
    color: #FFF!important;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, 32%);
    gap: 1%;
    justify-content: start;
  }

  .is-invalid {
    border: 1px solid red !important;
    background-color: #ffe5e5;
}

.input-wrapper.input-loading::after {
    content: '';
    position: absolute;
    top: 30%;
    right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    transform: translateY(-50%);
    pointer-events: none;
  }

.btn-ia{
background: #017D7B!important;
color: #FFF!important;
}

#confirmacao-checklists .dt-control::before{
    display: none!important;
}

.toggle-icon {
    transition: transform 0.3s ease;
    cursor: pointer;
  }

.shown .toggle-icon {
transform: rotate(180deg);
}

.botao-desativado {
    cursor: not-allowed!important; /* cursor de bloqueio */
}

.status-chip{
    margin: 8px;
    display: inline-block;
    padding: 0.35em 0.7em;
    border-radius: 0.8em;
    font-weight: bold;
    white-space: nowrap;
}

.status-AGUARDANDO{
    background-color: #4DA3FF40;
    color: #00000090;
}
.status-PROCESSANDO{
    background-color: #F6C34440;
    color: #00000090;
}
.status-CONCLUIDO{
    background-color: #2ECC7140;
    color: #00000090;
}
.status-ERRO{
    background-color: #E74C3C40;
    color: #00000090;
}