:root {

    /* Colors: */
    --unnamed-color-06427f: #06427F;
    --unnamed-color-1daeef: #6bcaf4;
    --unnamed-color-bfbfbf: #BFBFBF;
    --unnamed-color-ebebeb: #EBEBEB;
    --unnamed-color-063591: #063591;
    --unnamed-color-2e57aa: #2E57AA;
    --unnamed-color-707070: #707070;
    --unnamed-color-cccccc: #CCCCCC;
    --unnamed-color-6e6e6e: #6E6E6E;
    --unnamed-color-1c539d: #1C539D;
    --unnamed-color-00aeef: #00AEEF;
    --unnamed-color-ffffff: #FFFFFF;
    --unnamed-color-692c90: #692C90;
    --unnamed-color-042669: #042669;
    --unnamed-color-f36f21: #F36F21;
    --unnamed-color-0d3d6e: #0D3D6E;
    --unnamed-color-1c66b3: #1C66B3;
    --unnamed-color-ffffff9e: #FFFFFF9E;
    --unnamed-color-2268b1: #2268B1;
    
    /* Font/text values */
    --unnamed-font-family-ubuntu: Ubuntu;
    --unnamed-font-family-roboto: Roboto;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-300: 300px;
    --unnamed-font-weight-bold: bold;
    --unnamed-font-weight-medium: medium;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-size-11: 11px;
    --unnamed-font-size-12: 12px;
    --unnamed-font-size-13: 13px;
    --unnamed-font-size-14: 14px;
    --unnamed-font-size-15: 15px;
    --unnamed-font-size-16: 16px;
    --unnamed-font-size-18: 18px;
    --unnamed-font-size-20: 20px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-character-spacing--0-6: -0.6px;
    --unnamed-character-spacing--0-42: -0.42px;
    --unnamed-character-spacing--0-48: -0.48px;
    --unnamed-character-spacing--0-54: -0.54px;
    --unnamed-line-spacing-16: 16px;
    --unnamed-line-spacing-18: 18px;
    --unnamed-line-spacing-20: 20px;
    --unnamed-line-spacing-22: 22px;
    --unnamed-line-spacing-36: 36px;
    --unnamed-decoration-strikethrough: line-through;
    }
    
    /* Character Styles */
    .unnamed-character-style-1 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-300);
    font-size: var(--unnamed-font-size-13);
    line-height: var(--unnamed-line-spacing-36);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
    }
    .unnamed-character-style-2 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-300);
    font-size: var(--unnamed-font-size-14);
    line-height: var(--unnamed-line-spacing-22);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
    }
    .unnamed-character-style-3 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-300);
    font-size: var(--unnamed-font-size-11);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-6e6e6e);
    text-decoration: var(--unnamed-decoration-strikethrough);
    }
    .unnamed-character-style-4 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-300);
    font-size: var(--unnamed-font-size-13);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-6e6e6e);
    }
    .unnamed-character-style-5 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-15);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-6e6e6e);
    }
    .unnamed-character-style-6 {
    font-family: var(--unnamed-font-family-ubuntu);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-20);
    line-height: var(--unnamed-line-spacing-20);
    letter-spacing: var(--unnamed-character-spacing--0-6);
    color: var(--unnamed-color-0d3d6e);
    }
    .unnamed-character-style-7 {
    font-family: var(--unnamed-font-family-ubuntu);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-medium);
    font-size: var(--unnamed-font-size-20);
    line-height: var(--unnamed-line-spacing-20);
    letter-spacing: var(--unnamed-character-spacing--0-6);
    color: var(--unnamed-color-0d3d6e);
    }
    .unnamed-character-style-8 {
    font-family: var(--unnamed-font-family-ubuntu);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-medium);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-20);
    letter-spacing: var(--unnamed-character-spacing--0-48);
    color: var(--unnamed-color-0d3d6e);
    }
    .unnamed-character-style-9 {
    font-family: var(--unnamed-font-family-ubuntu);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-medium);
    font-size: var(--unnamed-font-size-18);
    line-height: var(--unnamed-line-spacing-18);
    letter-spacing: var(--unnamed-character-spacing--0-54);
    color: var(--unnamed-color-1c66b3);
    }
    .unnamed-character-style-10 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-15);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-0d3d6e);
    }
    .unnamed-character-style-11 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-300);
    font-size: var(--unnamed-font-size-13);
    line-height: var(--unnamed-line-spacing-22);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-6e6e6e);
    }
    .unnamed-character-style-12 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-13);
    line-height: var(--unnamed-line-spacing-22);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-2268b1);
    }
    .unnamed-character-style-13 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-300);
    font-size: var(--unnamed-font-size-12);
    line-height: var(--unnamed-line-spacing-22);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff9e);
    }
    .unnamed-character-style-14 {
    font-family: var(--unnamed-font-family-ubuntu);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-medium);
    font-size: var(--unnamed-font-size-14);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing--0-42);
    color: var(--unnamed-color-ffffff);
    }

    section{
        overflow: clip; 
    }
    nav{
        padding-top: 2%;
    }

    #page{
        overflow: auto; 
        background-color: #6bcaf4;
    }

    /* MENU  */

    #menu_desktop {
        display: none;
    }

    #menu_mobile {
        display: none;
    }

    @media (min-width: 768px) {
        #menu_desktop {
            display: flex;
        }
    }

    @media (max-width: 767px) {
        #menu_mobile {
            display: flex;
        }
    }

    @media (min-width: 768px) {
        .menu-content {
            display: flex !important;
            position: static;
            flex-direction: row !important;
            justify-content: flex-end;
            width: auto;
            height: auto;
            background-color: transparent;
            opacity: 1;
        }

        .menu-content a {
            color: #000;
        }
    }

    /* PAGINATE  */
    .pagination {
        display: flex;
        width: 100%;
        justify-content: center;
        position: relative;
        margin-top: 2.5rem;
    }

    .pagination  ul {
        list-style: none;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        padding: 0;
    }

    .pagination  ul li {
        margin: 0px 22px;
        display: flex;
        font-size: 15px;
        line-height: 19px;
        letter-spacing: 0;
        color: #6bcaf4;

    }

    .pagination  ul li.active {
        font-size: 20px;
        color: #06427F;
    }

    .pagination  ul li:first-child,  .pagination  ul li:last-child {
        font-size: 25px;
        line-height: 20px;
        width: 43px;
        height: 43px;
        position: relative;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        color: #3d3d3d;
        background: #fff;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
    }
    .pagination  ul li:first-child:after {      
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 14px;
        height: 14px;
        z-index: 1;
        pointer-events: none;
    }

    /* MENU */

    .menu{
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-300) var(--unnamed-font-size-11)/17px var(--unnamed-font-family-ubuntu);
        color: var(--unnamed-color-ffffff);
        text-align: left;
        font: normal normal 300 11px/17px Ubuntu;
        letter-spacing: 5.5px;
        color: #FFFFFF;
        text-transform: uppercase;
        opacity: 1;
        padding-bottom: 2%;
        padding-left: 2%;
        width: 100%;        
    }

    .nome-usuario{
        letter-spacing: var(--unnamed-character-spacing-0);
        color: var(--unnamed-color-06427f);
        letter-spacing: 0px;
        color: #06427F;
        font-size: 12px;
        text-align: right;
        margin-top: 3.5%;
    }

    .nome-usuario strong{
        font-weight: bold;
    }
    /* TELA DE LOGIN */

    .img-login{
        width: 50%;
        padding-bottom: 4%;
    }

    .texto-login{
        border-radius: 30px;
        background-image: url('../img/azul.svg');
        background-size: cover; 
        background-position: center; 
        margin: 0 1%;
        width: 1000px;        
        height: 180px;
        text-align: center;
        color: var(--unnamed-color-ffffff);
        opacity: 1;

    }
    .texto-login h1{
        height: 68px;
        font: italic normal var(--unnamed-font-weight-normal) 61px/68px Philosopher;
        font: italic normal normal 61px/68px Philosopher;
        letter-spacing: -1.22px;
        margin-top: 1%;
    }

    .texto-login h1 span{
        font: italic normal var(--unnamed-font-weight-bold) 61px/68px Philosopher;
        color: var(--unnamed-color-1daeef);
    }

    @media (max-width: 700px) {
        .div-texto-login{
            padding: 0 2% 0 5%;
        }
        .texto-login h1, .texto-login h1 span{
            font-size: 30px;
        }
    }

    @media (min-width: 701px) and (max-width: 1024px) {
        .texto-login h1, .texto-login h1 span{
            font-size: 40px;
        }
    }

    
    .texto-login h2, .texto-login h3{
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-15)/17px var(--unnamed-font-family-ubuntu);
        letter-spacing: -0.3px;
    }

    .texto-login h2{
        font: normal normal bold 15px/17px Ubuntu;
    }
    
    .texto-login h3{
        font: normal normal 300 15px/17px Ubuntu;
    }
    #frm-login, #frm-enviar-elogio{
        color: var(--unnamed-color-ffffff);
        text-align: center;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        padding: 5% 20% 3% 20%;
        background-color: none;

    }


    #frm-login input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 30px #6bcaf4 inset;
    }
    
    /* Cor do texto do autocomplete */
    #frm-login input:-webkit-autofill {
        -webkit-text-fill-color: #fff !important;
    }

    .logo-hospital{
        width:10%;
        margin-bottom: 2%;
    }
    @media (max-width: 573px) {
        #frm-login{
            padding: 10% 3% 3% 5%;    
        }

        #frm-login button{
            margin-top: 5%;    
        }

        .logo-hospital{
            width:30%;
            margin-top: 10%;
            margin-bottom: 2%;
        }
    }

    #frm-login input, #frm-enviar-elogio input, #frm-enviar-elogio textarea, #frm-enviar-elogio select, .select2-selection, .select2-container--default .select2-selection--single{
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--unnamed-color-ffffff) !important; 
        padding: 5px !important; 
    }

    #frm-login input::placeholder , #frm-enviar-elogio input::placeholder{
        font: normal 300 15px/22px Roboto;
        letter-spacing: 0px;
        color: #FFFFFF;     
        font-family: 'Roboto', sans-serif;
        font-weight: 300; 
    }
    
    button:hover {
        transform: translateY(-5px);
    }

    #frm-login button, .home-elogios button, #frm-enviar-elogio button{
        background: var(--unnamed-color-06427f) 0% 0% no-repeat padding-box;
        background: #06427F 0% 0% no-repeat padding-box;
        border-radius: 100px;
        width: 200px;
        height: 45px;
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-16)/var(--unnamed-line-spacing-18) var(--unnamed-font-family-ubuntu);
        letter-spacing: var(--unnamed-character-spacing--0-48);
        color: var(--unnamed-color-ffffff);
        text-align: center;
        font: normal normal bold 16px/18px Ubuntu;
        letter-spacing: -0.48px;
        color: #FFFFFF;
        opacity: 1;
    }

    #frm-enviar-elogio button{
        margin-top: 2%;
    }

    #frm-login button:hover,
    #frm-enviar-elogio button:hover,
    .update-colaboradores button:hover {
        background: #BADAF4 0% 0% no-repeat padding-box;
        box-shadow: 0px 10px 20px #0000001A;
        opacity: 1;
        color: #0D3D6E;
    }

    #btn-enviar-elogios:hover, #btn-elogios-enviados:hover{
        background: #6bcaf4 0% 0% no-repeat padding-box;    
        color: #fff;   
    }

    /* TELA DE Reconhecimentos RECEBIDO */

    #btn-enviar-elogios{      
        width: 220px;
    }
    #btn-elogios-enviados{
        background: #6bcaf4 0% 0% no-repeat padding-box;       
        width: 220px;
    }

    #btn-elogios-enviados:hover{
        background: #06427F 0% 0% no-repeat padding-box;    
        color: #fff;   
    }
    

    .home-elogios{
        background-color: #fff;
        box-shadow: 0px 3px 40px #00000029;
        border-radius: 40px;
        min-height: 600px;
    }

    @media (max-width: 573px) {
        .home-elogios{
            margin-left: 3% !important;
        }
    }
    
    .titulo{
        margin-left: 2% !important;
        padding: 3% 3% 3% 5%;

    }
    .titulo h1{
        font: italic normal var(--unnamed-font-weight-normal) 41px/46px Philosopher;
        color: var(--unnamed-color-1daeef);
        text-align: left;
        font: italic normal normal 41px/46px Philosopher;
        letter-spacing: -0.82px;
        color: #6bcaf4;
    }

    .titulo h1 span{
        color: #06427F;
    }

    @media (max-width: 763px) {
        .titulo h1, .titulo h1 span{
            font-size: 30px;
            text-align: center;
        }
        .container{
            padding-left: 0 !important;
        }

        .container-elogios{
            width: 90% !important;
        }
    }

  
    @media (min-width: 768px) and (max-width: 1024px) {
        .titulo h1, .titulo h1 span{
            font-size: 30px;
        }
    }

    .elogios-recebidos div{
        padding: 0 2% 1% 3%;
    }
    .elogios-recebidos img{
        width: 130px;
        margin-top: -30px;
    }

    .elogios-recebidos h3{
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 22px/26px var(--unnamed-font-family-ubuntu);
        color: var(--unnamed-color-06427f);
        text-align: left;
        font: normal normal bold 22px/26px Ubuntu;
        letter-spacing: -0.44px;
        color: #06427F;
    }

    .elogios-recebidos p{
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-300) var(--unnamed-font-size-15)/25px var(--unnamed-font-family-ubuntu);
        color: var(--unnamed-color-707070);
        text-align: left;
        font: normal normal 300 15px/25px Ubuntu;
        letter-spacing: -0.3px;
        color: #707070;
        opacity: 1;
    }
    
    @media (max-width: 763px) {
        .elogios-recebidos h3{
            font-size: 16px;
        }

        .elogios-recebidos p{
            font-size: 12px;
        }
        /* .elogios-recebidos p{
            text-align: justify;
        } */

        .elogios-recebidos .col-12{
            margin-left: 2%;
        }

        .break-word {
            word-break: break-word;
            display: block;
        }
    }
    .image-container {
        position: relative;
        display: inline-block;
    }
    
    .usuario {
        display: block;
    }
    
    .aspas {
        position: absolute;
        right: 50px; 
        top: -10px; 
        width: 39px !important;
        margin-top: 30px !important;
    }
    
    /* TELA ENVIAR Reconhecimentos */

    #frm-enviar-elogio{
        padding: 2% 5% 4% 4%;
    }

    #frm-enviar-elogio input, #frm-enviar-elogio select, .select2-container--default .select2-selection--single{
        border-bottom: 1px solid #d3d3d3 !important;
        height: 40px !important;
        color: #06427F !important;
    }

    #frm-enviar-elogio textarea{
        border-bottom: 1px solid #d3d3d3 !important;
        color: #06427F !important;
    }
    #frm-enviar-elogio input::placeholder,  #frm-enviar-elogio textarea::placeholder, .select-color, .select-color option,.select2-container--default .select2-selection--single .select2-selection__placeholder{
        color: #06427F !important;
    }

    .select2-selection__rendered{
        text-align: left !important;
        padding-left: 0 !important;
    }

    .select2-selection{
        padding-left: 0 !important;
    }

    /* TELA RANKING  */

    .ranking-list{
        margin-top: -5% !important;
    }
    .ranking-list ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-around;
        padding-bottom: 5%;
    }
    .ranking-list ul li {
        padding: 10px 20px;
        background-color: #6bcaf4;
        border-radius: 40px;
        margin: 5px;
        text-align: center;
        cursor: pointer;
        color: #fff;
        font: normal normal bold 16px/18px Ubuntu;
    }

    .ranking-list ul li:hover{
        transform: translateY(-5px);
        background-color: #06427F;
    }

    .ranking-list .active {
        background-color: #06427F;
        color:#fff;
    }

    .ranking-list .active:hover {
        background-color: #6bcaf4;
    }

    .ranking-semanal {
        display: none;
    }

    .colaboradores_mais_elogiados{
        display: block
    }
    .titulo p, .elogios-recebidos span{
        color: var(--unnamed-color-707070);
        font: normal normal 300 15px/25px Ubuntu;
        letter-spacing: -0.3px;
        color: #707070;
    }

    .img-ranking{
        position: relative;
            display: inline-block;
    }
    .img-ranking img{
        display: block;
    }
    .img-ranking h1{
        position: absolute;
        top: -60px; 
        right: -5px; 
        margin: 0;
        padding: 5px; 
        font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 72px/78px Philosopher;
        color: var(--unnamed-color-1daeef);
        text-align: left;
        font: normal normal bold 72px/78px Philosopher;
        letter-spacing: -1.44px;
        color: #6bcaf4;
        font-size: 72px;
    }

    .ranking{
        padding-bottom: 6%;
    }

    .ranking p{
        letter-spacing: 2.6px;
    }

    .ranking span{
        letter-spacing: -0.54px;
    }

    .ranking h3{
        margin-bottom: 0%;
    }

    @media (max-width: 780px) {
        .ranking-list{
            margin-left: 1% !important;
        }
        .ranking-list ul li {
            flex: 1 1 100% !important;
            margin: 5px 0;
        }
    }

    @media (max-width: 780px) {
        .elogios-recebidos .col-12 col-3 {
            padding: 0;
        }
    }