/* importando a fonte OpenSans */
@import url("fonts.css");

@import url("../css/variables.css");

html {
    font-size: 100%;
}

@media (max-width: 1080px) {
    html {
        font-size: 93.75% !important;
    }
}

@media (max-width: 720px) {
    html {
        font-size: 87.5% !important;
    }
}

/* Works on Firefox */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans';
    scrollbar-width: thin;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--gray-100);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--gray-100);
    border-radius: 20px;
    border: 2px solid var(--gray-300);
}


/*PÁGINA EM MANUTENÇÃO*/

.gradient {

    background: linear-gradient(162deg, rgba(10, 88, 202, 1) 1%, rgb(5, 22, 172) 53%, rgb(1, 166, 255) 100%);
    background-size: 200% 200%;
    /* Adicione essa linha */
    animation: gradientLoop 10s ease infinite;
}

@keyframes gradientLoop {

    0%,
    100% {
        background-position: 0 25%;
        background-size: 90%;
    }

    50% {
        background-position: 25% 0%;
        background-size: 110%;


    }
}

/* Page Loader ================================= */
.page-loader-wrapper {
    z-index: 99999999;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--blue-300);
    overflow: hidden;
    text-align: center;
}

.page-loader-wrapper p {
    font-size: 13px;
    margin-top: 10px;
    font-weight: bold;
    color: var(--white);
}

.page-loader-wrapper .loader {
    position: relative;
    top: calc(50% - 30px);
}

.page-loader-wrapper .loader-message {
    color: var(--white);
}

.page-loader-wrapper .md-preloader {
    color: var(--azul-itec-500);
}

.page-first-conteudo {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;

}

.page-first-login {
    width: 60vw !important;
    position: relative;
    display: flex;
    height: 75vh;
    justify-content: center;
    align-items: center;
    margin: 120px auto auto auto;
    border-radius: 10px;

}

.page-first-login h2 {
    color: var(--azul-itec-500);
}

@media screen and (max-width: 576px) {

    /*Area Login*/
    .main-area-novo-cadastro {
        width: 100vw !important;
    }

    /*Area primeiro acesso

   */
    .page-first-login {
        width: 100vw !important;
        position: relative;
        display: flex;
        height: 130vh;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin: 120px auto auto auto;
        border-radius: 10px;
    }

    .form-check-input-primeiro-login {
        width: 30px !important;
        height: 30px !important;
    }

    /*Area Criar Grupo
    ================ */

    .area-new-group-01,
    .area-new-group-02 {

        width: 360px !important;
    }

}


@media screen and (min-width: 200px) and (max-width:767px) {
    #ms-id_select_permissoes {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
}

@media screen and (min-width: 768px) and (max-width:1558px) {
    #ms-id_select_permissoes {
        display: flex !important;
    }
}

.bg-first-login {
    background: rgba(0, 0, 0, 0.25);
}

.form-check-input-primeiro-login {

    width: 15px;
    height: 15px;
}

.header_ {

    cursor: not-allowed !important;
}

.text-confirmo {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
}

.page-loader-wrapper p {
    font-size: 13px;
    margin-top: 10px;
    font-weight: bold;
    color: var(--gray-800);
}

.page-loader-wrapper .loader {
    position: relative;
    top: calc(50% - 30px);
}

/* Preloader ================================== */
.md-preloader .pl-red {
    stroke: var(--red-500);
}

.md-preloader {
    font-size: 0;
    display: inline-block;
    width: 50px;
}

.md-preloader svg {
    -webkit-animation: inner 1320ms linear infinite;
    animation: inner 1320ms linear infinite;
}

.md-preloader svg circle {
    fill: none;
    stroke: var(--blue-400);
    stroke-linecap: square;
    -webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
    animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
}

@-webkit-keyframes outer {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

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

@keyframes outer {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

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

@-webkit-keyframes inner {
    0% {
        -webkit-transform: rotate(-100.8deg);
        transform: rotate(-100.8deg);
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@keyframes inner {
    0% {
        -webkit-transform: rotate(-100.8deg);
        transform: rotate(-100.8deg);
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@-webkit-keyframes arc {
    0% {
        stroke-dasharray: 1 210.48670779px;
        stroke-dashoffset: 0;
    }

    40% {
        stroke-dasharray: 151.55042961px, 210.48670779px;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 1 210.48670779px;
        stroke-dashoffset: -151.55042961px;
    }
}

@keyframes arc {
    0% {
        stroke-dasharray: 1 210.48670779px;
        stroke-dashoffset: 0;
    }

    40% {
        stroke-dasharray: 151.55042961px, 210.48670779px;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 1 210.48670779px;
        stroke-dashoffset: -151.55042961px;
    }
}

/* ###### DASHBOARD ###### */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--gray-100);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--gray-600);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--gray-700);
}


*,
::before,
::after {
    box-sizing: border-box;
}

#body-pd {
    position: relative;
    margin: var(--header-top-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--gray-100);
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

.header {
    width: 100%;
    height: var(--header-top-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    --padding: 0 1rem;
    background: var(--azul-itec-500);
    background: linear-gradient(90deg, rgba(0,92,160,1) 35%, rgba(0,54,99,1) 100%);
    z-index: var(--z-fixed);
    transition: 0.5s;
}

.header_toggle {
    color: var(--gray-700);
    background-color: var(--gray-300);
    font-size: 1.5rem;
    cursor: pointer;
    align-items: center;
    column-gap: 1rem;
    margin: 0 auto;
    margin-left: 2px;
    width: 100%;
    border-radius: 0 !important;
    transition: all 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: all 1s;
    transform: rotate(-360deg);
}

@media screen and (min-width: 768px) {


    /*MENU LATERAL CONFIGS*/



    .display-none {
        display: none !important;
        -webkit-transition: 0.9s;
        -moz-transition: 0.9s;
        -o-transition: 0.9s;
        -ms-transition: 0.9s;
        transition: all 0.9s;

    }

    .bi-chevron-left{
        -webkit-transition: 0.7s;
        -moz-transition: 0.7s;
        -o-transition: 0.7s;
        -ms-transition: 0.7s;
        transition: all 0.7s;
        transform: rotate(-180deg);
        color: var(--gray-700);
    }

    .bi-chevron-right {
        -webkit-transition: 0.7s;
        -moz-transition: 0.7s;
        -o-transition: 0.7s;
        -ms-transition: 0.7s;
        transition: all 0.7s;
        transform: rotate(180deg);
        color: var(--gray-700);
    }

    .bi-chevron-compact-right {
        -webkit-transition: 0.7s;
        -moz-transition: 0.7s;
        -o-transition: 0.7s;
        -ms-transition: 0.7s;
        transition: all 0.7s;
        transform: rotate(-360deg);
    }


    /*lista para mobile*/
    .withSideBarList .ulMobile {
        list-style: none;
        width: 10rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 0 0 0 !important;
        z-index: 2;
        position: absolute;
        margin-top: -1px;
        left: 4.26rem;
        background-color: var(--gray-100);
        border-right: 2px solid var(--gray-400);
        border-top: 2px solid var(--gray-400);
        border-bottom: 2px solid var(--gray-400);
    }

    /*****************/
    .nav_ {
        position: fixed;
        left: 0;
        top: 5.2rem;
        bottom: 0%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: stretch;
        width: var(--menu-collapse-width);
        height: calc(100vh - 5.2rem);
        background-color: var(--gray-100);
        border-right: 2px solid var(--gray-400);
        color: var(--gray-700);
        -webkit-transition: 0.8s;
        -moz-transition: 0.8s;
        -o-transition: 0.8s;
        -ms-transition: 0.8s;
        transition: all 0.8s;

    }

    .nav_ div {
        max-width: var(--menu-collapse-width);
        min-width: var(--menu-collapsed-width);
    }


    .nav_ a {
        text-decoration: none;
        width: 100%;

    }

    .nav_ a:hover {
        background-color: var(--blue-100);
        width: 102%;
        color: var(--azul-itec-500);
    }

    /***Header Menu lateral ***/

    #headerSideBar {
        background-color: var(--gray-300);

    }

    #headerSideBar button {
        display: flex;
        align-items: center;
        width: 100%;
        height: 4.25rem;
        border: none;
    }

    /* .section-pd #headerSideBar button i {
        width: 3rem;
        text-align: center;
        font-size: 2rem;

    } */

    .section-pd #headerSideBar button i {
        width: 3rem;
        text-align: center;
    }

    #headerSideBar button i {
        width: 4.25rem;
        text-align: center;
        font-size: 1.5rem;
    }

    #headerSideBar button .bi-chevron-right {
        font-size: 1.5rem;
    }

    #headerSideBar button span {
        width: 8.25rem;
        text-align: start;
        color: var(--gray-600);
    }

    /***Body Menu lateral ***/

    .nav_ #bodySideBar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: 100%;
        overflow-y: auto;
    }

    /*******************************/
    .noSideBarList,
    .withSideBarList {
        width: 100%;


    }

    .noSideBarList,
    .withSideBarList a {
        color: var(--gray-700);

    }

    /***formatação sem drop lista ***/

    .noSideBarList a {
        width: 100%;
        display: flex;
        align-items: center;
        width: 100%;
        height: 4.25rem;
        color: var(--gray-700);
    }

    .section-pd .noSideBarList a i {
        width: 3rem;
        text-align: center;
        font-size: 24px;
    }

    .noSideBarList a i {
        width: 4.25rem;
        text-align: center;
        font-size: 24px;
    }

    .noSideBarList a span {
        width: 8.25rem;
        text-align: start;
    }

    /***formatação com drop lista ***/


    .withSideBarList {
        display: flex;
        flex-direction: column;

    }

    .withSideBarList>a:first-child {
        display: flex;
        height: 4.25rem;
        align-items: center;
    }

    .section-pd .withSideBarList a>i:first-child {
        width: 3rem;
        text-align: center;
        font-size: 24px;
    }

    .withSideBarList a>i:first-child {
        width: 4.25rem;
        text-align: center;
        font-size: 24px;
    }

    .withSideBarList a span {
        width: 8.25rem;
        display: flex;
        justify-content: space-between;
    }

    .withSideBarList a span>i {
        position: relative;
    }

    .withSideBarList .ul {
        list-style: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 0 0 0 0 !important;
    }

    .withSideBarList .ul li {
        width: 100%;
        display: flex;
        align-items: center;
        height: 4.25rem;
        justify-content: flex-start;
    }

    .withSideBarList .ul li:hover {


        display: flex;

    }

    .withSideBarList .ul li>a {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
    }


    /***footer Menu lateral ***/

    #footerSideBar {
        width: 100%;


    }

    #footerSideBar>a {
        width: 90%;
        display: flex;
        align-items: center;
        height: 4.25rem;
        justify-content: center;
        padding: 0 3px;
    }

    #footerSideBar a>i {
        width: 4.25rem;
        height: 4.25rem;
        text-align: center;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    #footerSideBar a span {
        width: 8.25rem;
        text-align: start;
        display: flex;
        flex-wrap: wrap;
        line-height: 20px;
        color: var(--gray-900);
        font-weight: 600;
    }

    /**********************/

}

@media screen and (max-width: 768px) {
    /*
    menu bottom
    */


    /*
    --------classes de ações--------
    */


    .display-none {
        display: none !important;
        -webkit-transition: 0.9s;
        -moz-transition: 0.9s;
        -o-transition: 0.9s;
        -ms-transition: 0.9s;
        transition: all 0.9s;

    }

    .bi-chevron-compact-right {
        -webkit-transition: 0.7s;
        -moz-transition: 0.7s;
        -o-transition: 0.7s;
        -ms-transition: 0.7s;
        transition: all 0.7s;
        transform: rotate(-360deg);
    }


    /*lista para mobile*/
    .withSideBarList .ulDropClesed {
        list-style: none;
        width: 10rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 0 0 0 !important;
        z-index: 2;
        position: absolute;
        margin-top: -1px;
        left: 4.26rem;
        background-color: var(--gray-100);
        border-right: 2px solid var(--gray-400);
        border-top: 2px solid var(--gray-400);
        border-bottom: 2px solid var(--gray-400);
    }

    /*****************/
    #headerSideBar {
        display: none;
    }

    .nav_ {
        position: fixed;
        left: 0;
        bottom: 0%;
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        align-items: stretch;
        width: 100vw !important;
        height: 4.25rem;
        background-color: var(--gray-100);
        border-top: 2px solid var(--gray-400);
        color: var(--gray-700);
        z-index: 200;
        animation-name: aparecer;
        animation-duration: 0.8s;
    }

    @keyframes aparecer {
        from {
            width: 0px;
        }

        to {
            width: 100vw;
        }
    }


    .nav_ div {
        max-width: 100vw;

    }

    .nav_ a {
        text-decoration: none;
        width: 4.25rem;

    }



    /***Header Menu bottom ***/

    #headerSideBar {
        background-color: var(--gray-300);

    }

    #headerSideBar button {
        display: flex;
        align-items: center;
        width: 4.25rem;
        height: 4.25rem;
        border: none;
        justify-content: space-between;
    }

    #headerSideBar button i {
        width: 4.25rem;
        text-align: center;
        font-size: 2rem;

    }

    #headerSideBar button span {
        width: 8.25rem;
        text-align: start;
        color: var(--gray-600);
    }

    /***Body Menu bottom ***/

    .nav_ #bodySideBar {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        height: 4.25rem;
        width: 100%;
        overflow-x: auto;

        span,
        ul {
            display: none;
        }
    }


    /*******************************/
    .noSideBarList,
    .withSideBarList {
        width: 100%;

    }

    .noSideBarList,
    .withSideBarList a {
        color: var(--gray-700);

    }

    /***formatação sem drop lista ***/

    .noSideBarList a {
        width: 100%;
        display: flex;
        align-items: center;
        width: 100%;
        height: 4.25rem;
        justify-content: center;
        color: var(--gray-700);
    }

    .noSideBarList a i {
        width: 4.25rem;
        text-align: center;
        font-size: 24px;
    }

    .noSideBarList a span {
        width: 8.25rem;
        text-align: start;
    }

    /***formatação com drop lista ***/



    .withSideBarList>a:first-child {
        display: flex;
        justify-content: space-between;
        height: 4.25rem;
        align-items: center;
    }

    .withSideBarList a>i:first-child {
        width: 4.25rem;
        text-align: center;
        font-size: 24px;
    }

    .withSideBarList a span {
        width: 8.25rem;
        display: flex;
        justify-content: space-between;
        display: none;
    }

    .withSideBarList a span>i {
        position: relative;
        margin-right: 4px;

    }

    .withSideBarList .ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        padding: 0;
        margin: 0;
        list-style: none;
        position: absolute;
        top: -72px;
        background-color: var(--gray-100);
        z-index: 200;

    }

    .withSideBarList .ul li {

        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 64px;
        white-space: nowrap;
        text-align: center;
        font-size: 16px;

    }

    .withSideBarList .ul li:hover {

        background-color: var(--blue-100);

    }



    /***footer Menu bottom ***/

    #footerSideBar {

        display: none;


    }

    #footerSideBar>a {
        width: 100%;
        display: flex;
        align-items: center;
        height: 4.25rem;
        justify-content: space-between;

    }

    #footerSideBar a>i {
        width: 4.25rem;
        height: 4.25rem;
        text-align: center;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    #footerSideBar a span {
        width: 8.25rem;
        text-align: start;
        display: flex;
        flex-wrap: wrap;
        line-height: 20px;
        color: var(--gray-900);
        font-weight: 600;
    }

}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    white-space: break-spaces;

    .projeto-title {
        margin: 0;
        color: var(--white);
        text-align: start;
        font-family: 'Montserrat', sans-serif;
        font-weight: 900;
    }

    .projeto-orgao {
        margin: 0;
        font-size: 12px;
        text-align: start;
        color: var(--white);
        font-family: 'Cousine', sans-serif;
        letter-spacing: 0.25px;
    }
}

.l-navbar.show {
    left: 0;
}

.nav-dropdown-container {
    display: none;
    padding-left: 8px;
}

.section-pd {
    padding-left: var(--menu-collapsed-width);

}

.section-pd-effect {
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: all 0.8s;
}


.nav_ a.active {
    color: var(--teal-600) !important;
    background-color: var(--teal-100) !important;
    border: 0;
    border-color: var(--gray-700) !important;
}

.nav_ a.active::before {
    content: "";
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--gray-700);
}

.height-100 {
    height: 100vh;
}

.nav-name-hidden {
    display: none;
}

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

.header_toogle_mobile {
    display: none;
}

#header-mobile {
    display: none;
}

.info-projeto-logo {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;
}

.info-user-header {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;
}

.nav-link-configuracao i{
    font-size: 24px;
}

.nav-link-configuracao.active i{
    color: var(--yellow-500);
}

/* Small devices (landscape phones, less than 768px) */
@media screen and (max-width: 767.98px) {
    #body-pd {
        margin: calc(var(--header-top-height) + 1rem) 0 0 0;
    }

    .header {
        height: calc(var(--header-top-height) + 1rem);
    }


    .main-content {
        padding: calc(var(--header-top-height) + -2rem) 0rem 0.5rem !important;
        min-height: 95vh;
    }
}

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    #body-pd {
        margin: calc(var(--header-top-height) + 1rem) 0 0 0;
        padding-left: 1rem;
    }

    .nav-name-hidden {
        display: contents;
    }

    .header_toogle_mobile {
        display: block;
        font-size: 30px;
        padding: 10px;
    }

    .brasao {
        display: none;
    }

    .info-user {
        display: none;
    }

    .info-user-mobile {
        display: block;
    }

    #header {
        display: none;
    }

    #header-mobile {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: space-around;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(90deg, rgba(0, 92, 160, 1) 35%, rgba(0, 54, 99, 1) 100%);
    }

    .btn-profile {
        margin-right: 0 !important;
    }

    #header-toggle {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    #body-pd {
        margin: calc(var(--header-top-height) + 1rem) 0 0 0;
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .header {
        height: calc(var(--header-top-height) + 1rem);
    }

    .header_img {
        width: 40px;
        height: 40px;
    }

    .header_img img {
        width: 45px;
    }

    .l-navbar {
        left: 0;
        top: calc(var(--header-top-height)+ 0.5em);
    }

    .l-navbar.show {
        width: var(--menu-collapse-width);
    }

    .section-pd {
        padding-left: calc(var(--menu-collapsed-width) + 14.6875rem) !important;
        padding-right: 5.625rem!important;
    }

}

.main-content {
    padding: calc(var(--header-top-height) + -3rem) 0 6.375rem 0.5rem;
    min-height: 100vh;
}

hr {
    margin-left: -7px;
}


.content-data {
    min-width: 100%;
    background: var(--white);
    min-height: calc(100vh - 150px);
    -webkit-box-shadow: 5px 6px 15px rgba(50, 50, 50, 0.77);
    -moz-box-shadow: 5px 6px 15px rgba(50, 50, 50, 0.77);
    box-shadow: 5px 6px 15px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 12px;
}

.content-data-modules {
    padding: 24px 48px;
}

.content-data-perfil {
    min-width: 100%;
}

.content-data-config {
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-sistema {
    height: 50px;
    margin-bottom: 68px;
}

/* end dashboard*/


/*AREA PRINCIPAL PROJETO*/
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid var(--gray-400);
    background-color: var(--blue-400);
    border-radius: 12px 12px 0 0;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color: var(--gray-100);
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: var(--white);
    color: var(--blue-400);
}

/* Create an main_active/current tablink class */
.tab button.main_active {
    background-color: var(--gray-400);
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid var(--gray-400);
    border-top: none;
    border-radius: 0px 0 12px 12px;
}

.code {
    background-color: black;
    color: var(--yellow-400);
    font-family: "courier-prime", monospace;
    padding: 40px 20px;
    word-break: break-all;
    line-height: 22px;
    font-size: 16px;
}

/* css do formulário de entrada do projeto */
.body-login-itec {
    /* background: var(--azul-itec-800) !important; */
    width: 100%;
    height: 100vh;
}

.h4-projeto {
    color: var(--gray-600)
}

div.card.sistema {
    background: rgb(0, 54, 95, 0.1);
    border: 1px solid var(--azul-itec-800);
    border-radius: 20px;
    box-shadow: -36px 42px 50px rgba(0, 0, 0, 0.15);
    width: 374px;
    height: 390px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: slide-left 0.7s linear;
}

.card.sistema>.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
}

.card.sistema>.card-body span {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    margin-top: 10px;
    color: var(--white);
}

.card.sistema>.card-body>.icone-projeto {
    display: flex;
}

.card.sistema>.card-body>.icone-projeto-mobile {
    display: none;
}

.card.formulario {
    display: flex;
    width: 365px;
    height: 390px;
    padding: 35px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    z-index: 2;
    margin-left: -30px;
    border-radius: 20px;
    background: linear-gradient(117deg, #FFF 52.91%, rgba(255, 255, 255, 0.00) 141.93%);
    border: 0.5px solid var(--azul-itec-800);
    box-shadow: 28px 17px 51px 0px rgba(0, 92, 160, 0.10) inset;
    filter: drop-shadow(33px 42px 50px rgba(0, 0, 0, 0.15));
    animation: slide-right 0.7s linear;
}

.voltar-login {
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: var(--azul-itec-800);
    border: 2px solid var(--azul-itec-500);
    border-radius: 20px;
    background: transparent;
    font-weight: 600;
}

.voltar-login:hover {
    color: var(--roxo-itec-500);
    border: 2px solid var(--roxo-itec-500);
}

.email-or-cpf {
    border-radius: 20px;
    height: 45px;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
}

.email-or-cpf::placeholder {
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    color: var(--gray-500);
}

@keyframes slide-left {
    0% {
        transform: translateX(50%);
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes slide-right {
    0% {
        transform: translateX(-50%);
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@media (max-width: 767.97px) {

    div.content-card {
        flex-direction: column;
    }

    div.card.sistema {
        animation: slide-top 0.7s linear;
        width: 330px;
        border-bottom: none;
    }

    div.card.formulario {
        margin-left: 0;
        margin-top: -338px !important;
        animation: none;
        width: 330px;
    }

    @keyframes slide-top {
        0% {
            transform: translateY(30%);
            opacity: 0;
        }

        50% {
            opacity: 0;
        }

        100% {
            transform: translateY(0%);
            opacity: 1;
        }
    }

    .card.sistema>.card-body>.icone-projeto {
        display: none;
    }

    .card.sistema>.card-body>.icone-projeto-mobile {
        display: flex;
    }

    .card.sistema>.card-body {
        justify-content: flex-start;
        padding-top: 0;
    }

    div.main-tela-login {
        top: 8%;
    }

    div.logo-mobile {
        display: block !important;
    }

    div.logo-desktop {
        display: none !important;
    }

    .card-body {
        display: flex;
        margin-right: 0px!important;
    }

    .icone-projeto-mobile {
        display: flex;
        align-items: center;
        margin: 10px 0;
        gap: 10px;
    }

    .icone-projeto-mobile img {
        width: 32px;
        height: 32px;
    }

    .icone-projeto-mobile div {
        text-align: start;
        display: flex;
        flex-direction: column;
    }

    .icone-projeto-mobile div h6 {
        font-weight: 900;
        font-style: Italic;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
        color: var(--azul-itec-50);
    }

    .icone-projeto-mobile div span {
        display: block;
        margin-top: 5px!important;
    }
}

@media (max-width: 425px) {
    div.card.sistema, div.card.formulario {
        width: 295px;
    }
}

.formulario-login>.input-group {
    height: 45px;
    border-radius: 20px;
}


.input-focused-itec {
    border: 2px solid transparent !important;
    background: linear-gradient(white, white) padding-box, linear-gradient(to right, #4FB3FF, #005CA0, #82279E, #421450) border-box;
}

.span-focused-itec {
    background: var(--azul-itec-50) !important;
}

.formulario-login>.input-group:hover>span>svg>path {
    fill: var(--roxo-itec-500);
}

#span-cpf,
#span-password {
    border-radius: 20px 0 0 20px;
    background: transparent;
    border: none;
}

#cpf,
#password {
    border-radius: 0 20px 20px 0;
    background: transparent;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

#cpf::placeholder,
#password::placeholder {
    color: var(--blue-200);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

#cpf:focus,
#password:focus {
    background: var(--azul-itec-50);
    box-shadow: none;
}

.btn-login {
    display: flex;
    height: 45px;
    padding: 10px 17px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 25px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
}

.btn-login:hover {
    border: 3px solid transparent;
}

.btn-login:hover span {
    background-image: linear-gradient(to right, #4FB3FF, #CA83E0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--white);
}

.btn-login:hover svg path {
    fill: var(--azul-itec-300);
}

.forgot-password,
.cadastrar {
    color: var(--gray-600);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}

/* css do formulário de entrada do projeto - PADRÃO GOV */


.body-login-gov {
    width: 100%;
    height: 100vh;
}

.formulario-login>.input-padrao-gov {
    border-radius: 10px;
}

.formulario-login>.input-padrao-gov>span>svg>path {
    fill: var(--azul-itec-800);
}

.formulario-login>.input-padrao-gov:hover>span>svg>path {
    fill: var(--azul-itec-400);
}

.formulario-login>.input-padrao-gov>#cpf,
.formulario-login>.input-padrao-gov>#password {
    border-radius: 0 10px 10px 0;
}

.btn-login-gov {
    display: flex;
    height: 45px;
    padding: 10px 17px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 10px;
    color: var(--white);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
}

.btn-login-gov:hover {
    color: var(--white);
    background: var(--azul-itec-400);
}

.btn-login-gov:focus {
    background: var(--azul-itec-800);
}

.input-focused {
    background: var(--azul-itec-50);
    border: 2px solid var(--azul-itec-400) !important;
    box-shadow: 0px 0px 0px 2px rgba(0, 130, 198, 0.16);
}

span.span-focused>svg>path {
    fill: var(--azul-itec-400) !important;
}

.certificado-itec > span{
    color: var(--white);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: .5px;
    margin-bottom: 5px;
    display: block;
}

  .certificado-itec > div > span{
    color: var(--white);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: .5px;
    margin-bottom: 5px;
    max-width: 65px;
    display: flex;
    text-align: left;
    margin-right: 10px;
  }

div.logo-mobile {
    display: none;
}

.logo-desktop>div>h5 {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    justify-content: right;
    text-transform: uppercase;
}

.voltar-login-gov {
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: var(--azul-itec-800);
    border: 2px solid var(--azul-itec-500);
    border-radius: 10px;
    background: transparent;
    font-weight: 600;
}

.voltar-login-gov {
    border: 2px solid var(--azul-itec-500) !important;
}

.input-padrao-gov>.email-or-cpf {
    border-radius: 10px;
}

/* css da marca d'água da página de entrada do projeto - PADRÃO ITEC*/

.img-itec {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.img-gov-lateral {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

@media (max-width: 1024px) {

    .img-itec,
    .img-gov {
        width: 60%;
        height: auto;
    }
}

/* css da marca d'água da página de entrada do projeto - PADRÃO GOV*/

.background-gov {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    display: flex;
    justify-content: center;
}

.img-gov-central {
    z-index: 1;
    position: absolute;
    top: -10%;
    height: 140%;
    width: 95%;
}

/* css do gradiente em animação da página de entrada do projeto */

.grad1 {
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    filter: blur(190px);
    animation: gradiente1 linear infinite 10s;
    width: 50%;
    height: 50%;
}

.grad2 {
    z-index: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    filter: blur(190px);
    width: 50%;
    height: 70%;
    animation: gradiente2 linear infinite 10s;
    width: 50%;
    height: 50%;
}

.grad3 {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(190px);
    animation: gradiente3 linear infinite 10s;
    width: 50%;
    height: 50%;
}

.grad4 {
    z-index: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    filter: blur(190px);
    animation: gradiente4 linear infinite 10s;
    width: 50%;
    height: 50%;
}

.div-grad {
    z-index: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    left: 0;
}

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

    25% {
        transform: translateY(100%);
    }

    50% {
        transform: translateX(-100%) translateY(100%);
    }

    75% {
        transform: translateY(0%) translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}

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

    25% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateX(100%) translateY(-100%);
    }

    75% {
        transform: translateY(0%) translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes gradiente3 {
    0% {
        transform: translateX(0%);
    }

    25% {
        transform: translateX(100%);
    }

    50% {
        transform: translateY(100%) translateX(100%);
    }

    75% {
        transform: translateX(0%) translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes gradiente4 {
    0% {
        transform: translateX(0%);
    }

    25% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateY(-100%) translateX(-100%);
    }

    75% {
        transform: translateX(0%) translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }
}

/* css da logomarca e certificado itec */

.img-logo-itec {
    animation: zoom-in-zoom-out 1.4s ease-out;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(2, 2);
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

.certificado-itec {
    animation: fadein 1.6s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 1rem;
    align-items: center;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media (max-width: 425px) {
    .img-logo-itec {
        width: 240px;
        height: 43px;
        margin-top: 3rem;
    }

    .certificado-itec {
        width: 90%;
    }
}

/* css do footer identificador de ambiente de homologação */

.footer-debug {
    position: sticky;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--lp-red-500);
    z-index: 40;
    color: #fff;
    padding: 0.85rem 0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
}

.footer-debug__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.footer-debug__env {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
}

.footer-debug__env svg {
    flex-shrink: 0;
}

.footer-debug__project {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
}

.footer-debug__project-text {
    margin: 0;
    white-space: nowrap;
}

.footer-debug__logo {
    height: 28px;
    width: auto;
}

@media (max-width: 992px) {
    .footer-debug__container {
        flex-direction: column;
        text-align: center;
    }

    .footer-debug__project {
        flex-direction: column;
    }

    .footer-debug__project-text {
        white-space: normal;
    }
}

/*--------------------------------------------------*/

@media (max-width: 390px) {
    .body-login {
        background: var(--blue-700);
        background-repeat: no-repeat;
        background-image: url('../img/itec_.png');
        background-size: 100%;
        background-position: top;
    }

}

.body-logo-itec {
    width: 700px;
    position: absolute;
    padding: 15px;
    top: 3%;
    left: 6%;
    opacity: 0.3;
}

.main-tela-login {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    align-content: center;
    color: azure;
    position: absolute;
    top: 15%;
    left: 0;
}

.recovery-password-message {
    margin: 1.5rem 0;
    display: flex;
    width: 80%;
    height: auto;
    padding: 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    border-radius: 20px;
    background: linear-gradient(117deg, #FFF 52.91%, rgba(255, 255, 255, 0.00) 141.93%);
    border: 0.5px solid var(--azul-itec-800);
    box-shadow: 28px 17px 51px 0px rgba(0, 92, 160, 0.10) inset;

    h4 {
        color: var(--azul-itec-500);
        font-weight: 600;
        margin-bottom: 1rem;
    }

    p {
        color: var(--gray-700);
        font-weight: 400;
        text-align: justify;
    }

    .btn-return-login {
        margin-top: 1rem;
        border: 2px solid var(--azul-itec-500);
        color: var(--azul-itec-500);
        background-color: transparent;
        border-radius: 1.5rem;
        padding: 0.5rem 1rem;
        font-weight: 600;
    }
}

.formulario-login {
    background: transparent;
}

.formulario-login h3 {
    color: var(--azul-itec-500);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.footer-pagina-formulario {
    position: sticky;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 7vh;
    background-color: var(--red-400);
    align-self: self-end;
    justify-content: center;
    align-items: center;
    z-index: 2;
    display: flex;
}

.section-cadastro {
    width: 65%;
    height: 65%;
}

/* FIM --css do formulário de entrada do projeto */

/*AREA PRINCIPAL*/

.link-titulos {
    text-decoration: none;
    color: var(--gray-800);
}

.estado-de-alagoas {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: var(--white);
    font-size: small;
    left: 14px;
    position: relative;
}

.txt-brasao {
    line-height: 15px;
}

/*ESPAÇAMENTO DOS ITENS DO TOPO*/
.brasao {
    margin-left: 37px;
}

.brasao-alagoas-governo {
    position: relative;
    left: 5px;
    top: 5px;
    height: 30px;
}

.btn-profile {
    margin-right: 40px;
}

/*/ESPAÇAMENTO DOS ITENS DO TOPO*/

/*icone-notificacao*/

.icone-notificacao{
    margin-right: .4rem;
}

.icone-configuracao{
    margin-right: 1rem;
}

.nav-link-notificacao {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: 22px;
    font-weight: var(--bs-nav-link-font-weight);
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out;
}

.nav-link-notificacao.active{
    color: var(--yellow-500) !important;
}

/*ICONE PROFILLE ===============
==============================*/

#icon-person-menu {
    color: aliceblue;
    font-size: 30px;
    display: flex;
}

/* #icon-person-menu.active{
    color: var(--teal-500);
    background: var(--white);
    border-radius: 16px;
} */

/*fim icone-notificacao*/
/*area profile*/

.btnMenuTopo {
    width: 250px !important;
    height: 50px;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    background-color: var(--blue-400);
    border: none;
    justify-content: space-between;
    align-items: center;
}

.btnMenuTopo-selected {
    width: 250px !important;
    height: 50px;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    background-color: var(--teal-200) !important;

    /* .nomeSobrenome{
        color: var(--green-800);
    } */
}

.btnMenuTopo:hover {
    width: 250px !important;
    height: 50px;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    background-color: var(--cyan-500) !important;
}

.btnMenuTopo:focus {
    width: 250px !important;
    height: 50px;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    background-color: var(--blue-700) !important;
}

.btnMenuTopo-selected:hover {
    width: 250px !important;
    height: 50px;
    border-radius: 30px;
    display: flex;
    flex-direction: row;
    background-color: var(--green-200) !important;
}

.nomeSobrenome {
    vertical-align: middle;
    display: inline-flex;
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 16px;
    color: aliceblue;
    flex-direction: column;
    width: 185px;
}

/*nome do Usuário*/
.nomeSobrenome span:nth-child(1) {
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    left: 5px;
    position: relative;
}

/*permissão do usuário*/
.nomeSobrenome span:nth-child(2) {
    text-align: start;
}

.btnMenuTopoDropDown {
    margin-top: 14px !important;
    width: 250px !important;
    border-radius: 0px !important;
    background-color: var(--blue-400) !important;
    top: -1px !important;
    position: absolute !important;

    a{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        text-align: start !important;
        font-family: "Open Sans", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        line-height: 20px;
        align-items: center;
        color: var(--white) !important;
    }
}

.dropdown-item {
    text-indent: 10px;
    height: 50px !important;
    text-align: start !important;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    align-items: center;
    color: var(--white);

}

.linkMenuDrop:hover {
    text-indent: 10px;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    align-items: center;
    color: var(--white);
    background-color: var(--cyan-500);
}

/*CONTEUDO-PRINCIPAL*/

/* Estilizando a barra de rolagem */
.scrollbar::-webkit-scrollbar {
    width: 2px;
    /* Largura da barra de rolagem */
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--gray-100);
    /* Cor do polegar */
    border-radius: 20px;
    /* Borda arredondada */
}

.scrollbar::-webkit-scrollbar-track {
    background-color: var(--white);
    /* Cor da faixa */
}

/* Estilo da div */
.scrollbar {
    height: 70vh;
    /* Altura da div */
    overflow-y: auto;
    /* Ativar a rolagem vertical */
    width: 101%;
}

.texto-cabecalho {
    color: var(--gray-600);
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    margin-left: 15px;
}

hr {
    right: -8px;
    width: 100%;
    position: relative;
}

.conteudo-principal {
    height: 640px;
    background: var(--white);
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    overflow-y: scroll;
}

/* =====================
========= AREA PERFIL */
/*sobrescrevendo .card */
.card {
    width: 250px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.cards-perfil {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.card {
    margin-top: 15px !important;
    margin-bottom: auto !important;
    background: var(--white);
    box-shadow: 0  8px 16px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    width: 250px;
    height: auto;
}

/*fim sobrescrevendo .card */

/* style_fonts_cards*/
.card-body {
    color: var(--gray-700);

}

.card-body table {
    margin-left: -10px;

}

/*alterar foto do perfil */
.pencil {
    background-image: url("../img/pencil.png");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    background-color: var(--blue-400);
    border-radius: 100px;
    width: 37px;
    height: 37px;
}

.form-add-foto-perfil {
    z-index: 5;
    position: absolute;
    margin-top: -280px;
    left: 218px;
}

.form-check-input {
    margin-left: 100px !important;
}

/* =====================
========= AREA ALTERAR SENHA */
/*sobrescrevendo .card */

.button-ver-senha {
    background: var(--gray-300);
    border-radius: 30px;
}

/* =====================
========= AREA CONFIGURAÇÕES */
.hr-configuracoes {
    border-top: 1px solid var(--azul-itec-500);
    width: 100%;
    opacity: 1;
}

.area-configuracoes {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-config {
    width: 170px;
    height: 176px;
    cursor: pointer;
    transform: 1s;
    border: none;

    a{
        text-align: center;
    }

    p{
        font-weight: 600;
    }
}

.btn-config:hover {
    cursor: pointer;
    background-color: var(--azul-itec-500);

    p, i{
        color: var(--white) !important;
    }
}
.fs-2 {
    font-size: 3rem !important;
}

/* Pagination table */

.nav-table-pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
}

.page-item .page-link{
    color: var(--azul-itec-700);
    text-decoration: underline;
    padding: 4px 10px;
}

.page-item:first-child .page-link {
    border-radius: 3px 0px 0px 3px;
    text-decoration: none;
}

.page-item:last-child .page-link {
    border-radius: 0px 3px 3px 0px;
    text-decoration: none;
}

.active>.page-link, .page-link.active {
    z-index: 1;
    color: var(--white) !important;
    background-color:var(--azul-itec-700);
    border-color: var(--azul-itec-700);
    text-decoration: none;
}

/* tabela-add-usuario-configurações*/

.click-icons-tabela {
    cursor: pointer;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.click-icons-tabela:hover {
    cursor: pointer;
    transform: rotateX(180deg);

}

.btn-voltar_ {
    width: 90px;
    border-radius: 10px;
    border-color: var(--bs-secondary);
    position: absolute;
    margin-top: -19px;
    margin-left: 18px;
}

.btn-voltar {
    width: 90px;
    border-radius: 10px;
    border-color: var(--gray-300) !important;
    /* position: absolute; */
    align-items: center;
    display: flex;
    /* margin-top: -14px; */
    text-transform: capitalize;
}

/*Area Cadastros*/
.btn-voltar {
    height: 32px;
    border-radius: 20px;
}

.btn-border-style {
    height: 32px;
    border-radius: 3px !important;
    border: 1px solid var(--gray-300);
}

.btn-border-style-2 {
    display: flex;
    justify-items: center;
    height: 32px;
    text-align: center;
    border: 1px solid var(--gray-300);
}

.rodape-cadastros {
    bottom: 25px;
    margin: auto 0;
    position: absolute;
}

/*-----AREA PERMISSÕES E USUÁRIOS-----*/
.btn-add-grupo {
    width: 250px;
    border: none;
}

.btns-permissoes-e-usuarios {
    width: 166px;
    margin-top: 10px;
}

.area-gestao-usuarios {
    min-width: 439px;
    max-height: 331px;
}

/*-----AREA NOTIFICAÇÕES-----*/
input[type="date" i] {
    position: relative;
    font-family: monospace;
    padding-inline-start: 1px;
    cursor: default;
    align-items: center;
    display: inline-flex;
    overflow: hidden;
    padding: 0px;

}

.i-font-20 {
    font-size: 20px;
}

.header-blue {
    height: 120px;
    margin: -12px;
    background-color: var(--blue-100);
    color: var(--blue-200);
    left: 0;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    position: relative;
    padding: 0 2rem;
}

.header-blue-2 {
    height: 6rem;
    background-color: var(--blue-100);
    width: 80%;

}

.area-data {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 285px;
    background-color: var(--white);
    height: 38px;
    position: relative;
    border-radius: 5px;

}

#busca-notificacao {
    border: none;
    height: 100%;
    outline: 0;
    width: 90%;

}

.input-notificacao {
    background-color: var(--white);
    box-shadow: 0 0 0 0;
    border: 0px none;
    outline: 0;
    color: var(--gray-600);
}



.area-data span {
    width: 92px;
    height: 24px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    display: flex;
    align-items: center;
    color: var(--gray-600)
}

@media (max-width: 515px) {

    .header-blue {
        height: 7.8rem;
        background-color: var(--blue-100);
        width: 100vw - 12px;
    }

    .header-blue-2 {
        height: 7.8rem;
        background-color: var(--blue-100);
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    /* .main-area-notifificacoes{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    } */
}

.icon-blue {
    color: var(--blue-300);
}

.text-area-mensagens {
    background-color: var(--blue-100) !important;
    width: 94%;
    overflow-y: auto;
    height: 344px !important;
}

@media (max-width: 390px) {
    .text-area-mensagens {
        background-color: var(--blue-100) !important;
        width: 360px !important;
        position: relative;

    }
}

@media (min-width: 430px) and (max-width: 522px) {
    .text-area-mensagens {
        background-color: var(--blue-100) !important;
        width: 200vw !important;
    }
}

@media (max-width: 390px) {

    .area-nofificacoes {
        position: relative;
        margin-left: -9px !important;
        padding-top: 2px;
    }
}

@media (min-width:391px) and (max-width: 429px) {
    .text-area-mensagens {
        background-color: var(--blue-100) !important;
        width: 93vw;

    }
}

@media (min-width:390px) and (max-width: 767px) {
    .text-area-mensagens {
        background-color: var(--blue-100) !important;
        width: 93vw;
    }

    .header-blue-2 {
        height: 7.8rem;
        background-color: var(--blue-100);
        width: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

}

@media (min-width: 1281px) and (max-width: 1398px) {

    .area-nofificacoes {
        position: relative;
        max-width: 82%;
        margin-left: 230px !important;

    }
}


@media (min-width: 1399px) and (max-width: 1441px) {

    .area-nofificacoes {
        position: relative;
        max-width: 80%;
        margin-left: 230px !important;

    }
}

.offset-lg-5 a {
    position: absolute;
    margin-top: -19px;
    margin-left: -4%;
}

@media (max-width: 390px) {
    .offset-lg-5 a {
        position: relative;
        margin-top: -40px !important;
        width: 90px;
        margin-left: 7px;
    }

}

@media (min-width: 1281px) {
    .offset-lg-5 a {
        position: relative;
        margin-top: auto;
        margin-left: auto;
    }

}

/*Area Criar notificação*/

@media (max-width: 400px) {
    .area-criar-notificacao>a {
        margin-top: 20px;
    }

}

/*Gerenciar Usuários*/

.ativo {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;

    span.d-flex{
        background: var(--green-500);
        color: var(--white);
        border-radius: 12px;
        justify-content: center;
    }
}

.inativo {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;

    span.d-flex{
        background: var(--red-500);
        color: var(--white);
        border-radius: 12px;
        justify-content: center;
    }
}

.img-usuarios-tabela {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-right: 10px;
}

.clicked_ {
    cursor: pointer;
}

.btns-footer-historico-usuario-geral {
    margin-top: 4px;
    position: relative;
}

#tabela-user{
    vertical-align: middle;
}

#button-add-sm{
    white-space: nowrap;
}

#button-busca{
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

#busca-cadastro{
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

/*Gerenciar Tipo de Usuário*/
.search-form {
    width: 97%;
    left: 7px;
    display: flex;
    justify-content: center;
    border-radius: .4rem;
    border: .1rem solid var(--gray-400);
    position: relative;
    transition: all 300ms ease-in-out;

}

.search-form>.search-input {
    width: 100%;
    margin: 0 auto !important;
    border: none;
    background: none;
    outline: none;
    padding: 0.3rem;
    padding-right: 2.2rem;
    transition: all 300ms ease-in-out;

}

.search-button {
    position: absolute;
    border: none;
    background: var(--azul-itec-500);
    border-radius: 0 0.3rem 0.3rem 0;
    color: var(--blue-100);
    outline: none;
    padding: 0.3rem;
    padding-left: 1rem;
    top: 0;
    right: 0;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    transition: all 300ms ease-in-out;
}

.search-form:focus-within {
    border-color: var(--azul-itec-500);
}

.bi-search::before {
    content: "\f502";
    left: -6px;


    position: relative;
    top: -2px;
}

.lista-itens-usuarios {
    list-style: none;


}

.lista-itens-usuarios li {
    margin-top: 15px !important;

}

.over-flow-lista-usuarios {
    overflow-y: auto;
    height: 250px !important;


}

.lista-itens-usuarios li:hover {
    margin-top: 15px !important;
    background-color: var(--blue-100);

}

.btns-footer-1,
.btns-footer-2 {
    position: absolute;
    bottom: -1px;
    width: 101%;
    display: flex !important;
    justify-content: end !important;
    padding-top: 5px;
    align-items: center;
    left: -10px;

}

@media screen and (max-width: 761px) {

    .btns-footer-1,
    .btns-footer-2 {
        bottom: -1px;
        width: 101%;
        display: flex !important;
        justify-content: center !important;
        padding-top: 5px;
        align-items: center;
        left: -10px;
    }
}

#box-01 ul li,
#box-02 ul li {
    list-style: none;
    margin-top: 8px;

}

#box-01 ul li>label,
#box-02 ul li>label {
    padding-left: 4px;

}

.btns-footer-1>a:nth-child(1),
.btns-footer-2>a:nth-child(1) {
    position: relative;
    right: 0.5rem;


}

.btns-footer-1>a:nth-child(2),
.btns-footer-2>a:nth-child(2) {
    position: relative;



}

/*resetando form-check-input!*/

.form-check-input {
    margin-left: auto !important;
}

/*Area de Adicionar Usuário*/
#div_id_is_superuser {

    position: relative;
    margin-left: -1.4rem;
}

#id_is_superuser {
    position: relative;
    left: -12rem;
    width: 4rem;
}

#div_id_is_active {
    position: relative;
}

.form-check-radio input {
    display: none;
  }

.form-check-radio, .form-radio {
    --container_width: 160px;
    position: relative;
    display: flex;
    align-items: center;
    width: var(--container_width);
    overflow: hidden;
}

.form-check-radio label {
    width: 100%;
    padding: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Open sans', sans-serif;
    text-transform: uppercase;
}

.selecao {
    display: none;
    position: absolute;
    height: 100%;
    width: calc(var(--container_width) / 2);
    z-index: 0;
    left: 0;
    top: 0;
    transition: 0.15s ease;
}

.form-check-radio label:has(input:checked),
.form-check-radio div label:has(input:checked) {
    color: var(--white);
}

.form-check-radio div:nth-child(1),
.form-check-radio div:nth-child(2){
    width: 50%;
    text-align: center;
}

.form-check-radio label:nth-child(1),
.form-check-radio div:nth-child(1) label {
    border: 1px solid var(--green-500);
    color: var(--green-500);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.form-check-radio label:nth-child(2),
.form-check-radio div:nth-child(2) label {
    border: 1px solid var(--red-500);
    color: var(--red-500);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.form-check-radio label:nth-child(1):has(input:checked) ~ .selecao,
.form-check-radio div:nth-child(1) label:has(input:checked) {
    background-color: var(--green-500);
    display: inline-block;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.form-check-radio label:nth-child(2):has(input:checked) ~ .selecao,
.form-check-radio div:nth-child(2) label:has(input:checked) {
    background-color: var(--red-500);
    display: inline-block;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.form-check-radio label:nth-child(1):has(input:checked) ~ .selecao {
    transform: translateX(calc(var(--container_width) * 0 / 2));
}

.form-check-radio label:nth-child(2):has(input:checked) ~ .selecao {
    transform: translateX(calc(var(--container_width) * 1 / 2));
}

#div_id_groups > span > span.selection > span{
    border-color: var(--gray-400);
}

span.asteriskField {
    display: inline-flex;
    margin-left: 4px;
    color: var(--red-500);
}

@media screen and (min-width: 768px) and (max-width: 1530px) {
    #div_id_is_superuser {

        position: relative;
        margin-left: -1.4rem;
    }

    #id_is_superuser {

        position: relative;
        left: -9rem;
        width: 4rem;
    }

}

/*Sobrescrevendo form-select - bootstrap*/
.form-select {
    background-position: right 0.75rem center;
}

.upload {
    background-color: var(--gray-100);
    /*gray-100*/
    background-image: url(../img/upload-list-image-card.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 166px;
    height: 192px;
    cursor: pointer;
}

.upload_ {
    background-color: var(--gray-100);

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 166px;
    height: 192px;
    cursor: pointer;
}

.radio-area-adicionar-usuario {
    text-align: left !important;
    position: relative;
    left: -100px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 150%;
}

.radio-area-adicionar-usuario span:nth-child(1) {
    position: relative;
    left: 10px;

}

/*area editar usuário*/
.select-editar-user-ativo {

    background-color: var(--green-100);
    color: var(--green-500);

}

.select-editar-user-inativo {
    background-color: var(--red-500);
    color: var(--white);

}

#check-ativo-inativo {
    position: absolute;
    left: 1%;
}

#label-check-ativo-inativo {
    position: absolute;
    left: 18.6%;
}

.upload-user {
    background-color: var(--gray-100);
    background-image: url(../img/user-editar-usuario.png);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
    width: 166px;
    height: 192px;

}

.pencil-2 {
    background-image: url(../img/pencil.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    background-color: var(--blue-400);
    border-radius: 100px;
    width: 37px;
    height: 37px;
    cursor: pointer;
    left: 139px;
    position: relative;
    bottom: -82px;

}

.change-background-vinculo-ativo {

    background-color: var(--green-100);
    height: 40px;

}

.change-background-vinculo-inativo {
    background-color: var(--red-500);
    height: 40px;
    color: white;
}

@media screen and (max-width: 391px) {
    .btn-responsivo-user {
        font-size: 13px;
    }
}

/*area de histórico do usuário*/

.header-historico-geral {
    height: 126px;
    margin: -12px;
    background-color: var(--blue-100);
    color: var(--blue-300);
    left: 0;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

@media screen and (max-width: 391px) {

    .header-historico-geral {
        height: 126px;
        margin: -12px;
        background-color: var(--blue-100);
        color: var(--blue-300);
        left: 0;
        border-radius: 10px 10px 0px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .botoes-paginacao-historico {
        margin-top: 20px;
    }

}


@media screen and (min-width: 577px) and (max-width:890px) {

    .btns-footer-historico-usuario {

        position: absolute;
        margin-bottom: -10vh;


    }
}

/*mantém a paginação em baixo.*/
.btns-footer-historico-usuario {

    position: absolute;
    bottom: 14vh;
}

@media screen and (min-width: 900px) {
    .btns-footer-historico-usuario {
        left: 12%;
        width: 100%;
        position: absolute;

    }

    .baixar-historico {
        cursor: pointer;
    }

}

@media screen and (min-width: 1280px) {

    .btns-footer-historico-usuario {

        left: 12%;
        width: 75%;
        position: absolute;

    }

}


/*sobrescrevendo o bi-download*/
.bi-download {
    font-size: 20px !important;


}

.campo-data {
    width: 356px;
    background-color: var(--white);
    height: 38px;
    border-radius: 4px;
    color: var(--gray-600);

}

.data-inicio {
    position: absolute;
    top: 7px;
    width: 65px;
    opacity: 0;
    cursor: pointer;
}

.data-termino {
    position: absolute;
    top: 7px;
    width: 30px;
    cursor: pointer;
    opacity: 0;

}

/*Área Atualização Sistema*/
.text-atualizacao-sistema {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 190%;
    color: var(--gray-600);
    width: 90%;
}

.form-atualizacao-sistema>button {
    float: right !important;
    margin-top: 60px;
}

/* area manutenção sistema*/
.link-manutencao {
    width: 90px;
    border-radius: 10px;
}


/*----------------------*/
/*CHECKBOX-PERSONALIZADO*/

.check {
    cursor: pointer;
    position: relative;
    margin: auto;
    width: auto;
    height: 18px;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}

.check:before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(34, 50, 84, 0.03);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.check svg {
    position: relative;
    z-index: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--gray-400);
    stroke-width: 1.5;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s ease;
}

.check svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}

.check svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 66;
}

.check:hover:before {
    opacity: 1;
}

.check:hover svg {
    stroke: var(--blue-500);

}

.cbx:checked+.check svg {
    stroke: var(--blue-500);

}

.cbx:checked+.check svg path {
    stroke-dashoffset: 60;
    transition: all 0.3s linear;
}

.cbx:checked+.check svg polyline {
    stroke-dashoffset: 42;
    transition: all 0.2s linear;
    transition-delay: 0.15s;
}


.toggle {
    --toggle-width: 30px;
    --toggle-height: 15px;
    --toggle-offset: 3px;
    --toggle-outer-default: var(--gray-300);
    --toggle-outer-active: var(--blue-500);
    --toggle-inner-default: var(--white);
    --toggle-inner-active: var(--white);
    --toggle-transition: 200ms ease-out;
}

.toggle input {
    display: none;
}

.toggle label {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: var(--toggle-width);
    height: var(--toggle-height);
    background-color: var(--toggle-outer-default);
    border-radius: 5vw;
    cursor: pointer;
    transition: var(--toggle-transition);
}

.toggle input:checked+label {
    background-color: var(--toggle-outer-active);
}

.toggle label::before {
    content: "";
    position: absolute;
    top: var(--toggle-offset);
    left: var(--toggle-offset);
    bottom: var(--toggle-offset);
    aspect-ratio: 1 / 1;
    background-color: var(--toggle-inner-default);
    border-radius: 25%;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
    transition: var(--toggle-transition);
}

.toggle input:checked+label::before {
    background-color: var(--toggle-inner-active);
    transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
}

/* for accessibility */
.sr-only {
    border: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 120px !important;
    left: 39px;
}

.modal-backdrop.show {
    opacity: var(--bs-backdrop-opacity);
    width: 100%;
}

.footer-info-with-paginate {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-between;
    align-items: center;
}

/*Ativar ou desativar usuário em editar_usuário*/
/* .active_user {
    background-color: var(--green-500) !important;
}

.deactive_user {
    background-color: var(--red-500);
} */

/*Modais*/
.modal-success {
    position: relative;
    height: 56px;
    background-color: var(--green-100);
}

.close-x {
    color: white !important;
}

.close-x h4 {
    cursor: pointer;
}


.modal-danger {
    position: relative;
    height: 56px;
    background-color: var(--red-500);
}

.toast-alert {
    position: fixed !important;
    top: 50% !important;
    left: 50%;
    z-index: 1050 !important;
    min-width: 400px;
    transform: translate(-50%, -50%) !important;

    .toast{
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        padding: .1rem;
        box-shadow: 0 0.5rem 1rem 7px rgb(0 0 0 / 20%);
    }
    /* Ajuste conforme necessário */
}

.toast-alert-SUCESSO {
    background-color: var(--green-200);
    border: 1px solid var(--green-200) !important;
    color: var(--green-800);
}

.toast-alert-ERRO {
    background-color: var(--red-200);
    border: 1px solid var(--red-200) !important;
    color: var(--red-500);
}

.toast-alert-ATENÇÃO {
    background-color: var(--yellow-500);
    color: var(--white);
}

.text-primary.text-center {
    line-height: 25px;
    padding: 0 16px;
}
.text-primary,
.nav-link,
a,
.btn-outline-primary {
   /* removi o important do color a baixo por conta que estava afetando outras áreas esse "a" geral */
   color: var(--azul-itec-500);
   border-color: var(--azul-itec-500);
}
.btn-primary {
    background-color: var(--azul-itec-500);
    border: none;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active,
.btn-primary {
    color: var(--white) !important;
    background-color: var(--azul-itec-500);
 }

/* GESTÃO DE COTAS ------------------------ */

.container-gestao-cotas {
    .nav-tabs {
        padding-left: 0 !important;

        .nav-link {
            font-size: 16px;
            color: var(--blue-500);
            
            &.active {
                color: var(--gray-700);
            }
        }
    }

    .content-gestao-cotas {
        padding: 2rem;
        background: var(--white);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border: 1px solid var(--gray-300);
        border-top: none;

        .list-desktop {
            .table thead {
                border-bottom: 2px solid;
            }

            .table tr {
                vertical-align: middle;

                th {
                    white-space: nowrap;
                }

                td {
                    padding: .25rem .5rem;
                    white-space: nowrap;
                }
            }
        }

        .list-mobile {
            .card-cotas {
                margin-bottom: 1rem;
                border: 2px solid var(--gray-300);
                border-radius: 5px;
                padding: 1rem;
                .card-body {
                    display: block;
                }
            }
        }
    }

    .content-gestao-solicitacoes {
        padding: 2rem;
        background: var(--white);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border: 1px solid var(--gray-300);
        border-top: none;

        .filtros{
            padding: 1.5rem;
            border: 1px solid var(--gray-300);
            border-radius: 10px;

            .row {
                .btn, .form-label, .form-select, .form-control {
                    font-size: 14px;
                }
            } 
        }

        .status-badge {
            text-transform: uppercase;
        }

        .section-divider::before {
            content: "";
            display: block;
            flex: 1;
            height: 1px;
            background: var(--gray-500);
            opacity: 0.7;
        }

        .section-divider {
            color: var(--blue-500);
            font-size: 14px;
            font-weight: 700;
            font-family: 'Open Sans', sans-serif;
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .section-divider::after {
            content: "";
            display: block;
            flex: 55;
            height: 1px;
            background: var(--gray-500);
            opacity: 0.7;
        }

        .list-desktop {
            .table thead {
                border-bottom: 2px solid;
            }

            .table tr {
                vertical-align: middle;

                th {
                    white-space: nowrap;
                }

                td {
                    padding: .25rem .5rem;
                    white-space: nowrap;
                }
            }
        }

        .list-mobile {
            .card-solicitacao {
                margin-bottom: 1rem;
                border: 2px solid var(--gray-300);
                border-radius: 5px;
                padding: 1rem;
                .card-body {
                    display: block;
                }
            }
        }
    }
}

/* Alerts message ---------- */

.alert-SUCESSO {
    background-color: var(--green-100);
    border: 1px solid var(--green-200) !important;
    color: var(--green-500);
    font-size: 15px;
}

.alert-ERRO {
    background-color: var(--red-100);
    border: 1px solid var(--red-200) !important;
    color: var(--red-500);
    font-size: 15px;
}

.alert-ATENÇÃO {
    background-color: var(--yellow-100);
    color: var(--yellow-500);
    border: 1px solid var(--yellow-200);
    font-size: 15px;
}