/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
:root {
    --ligo-neutral-50: rgba(247, 250, 252, 1);
    --ligo-neutral-100:  rgba(242, 245, 250, 1);
    --ligo-neutral-200: rgba(225, 232, 241, 1);
    --ligo-neutral-300: rgba(204, 216, 227, 1);
    --ligo-neutral-400: rgba(150, 167, 188, 1);
    --ligo-neutral-600: rgba(77, 92, 112, 1);
    --ligo-neutral-800: #1c354f;
    --ligo-neutral-900: rgba(24, 34, 54, 1);
    --ligo-blue-500-cta: rgba(77, 112, 255, 1);
    --ligo-blue-600: rgba(46, 84, 235, 1);
    --ligo-blue-950: rgba(23, 32, 83, 1);
    --colors-base-white: rgba(255, 255, 255, 1);
    --colors-green-100: rgba(220, 252, 231, 1);
    --colors-green-200:  rgba(167, 243, 208, 1);
    --colors-green-500: rgba(34, 197, 94, 1);
    --colors-green-600:  rgba(22, 163, 74, 1);
    --colors-green-700: rgba(21, 128, 61, 1);
    --colors-red-100: rgba(254, 226, 226, 1);
    --colors-red-200: rgba(252, 165, 165, 1);
    --colors-red-500: rgba(239, 68, 68, 1);
    --colors-red-600: rgba(220, 38, 38, 1);
    --colors-red-700: rgba(185, 28, 28, 1);
    --colors-blue-100: rgba(219, 234, 254, 1);
    --colors-blue-200: rgba(191, 219, 254, 1);
    --colors-blue-700: rgba(29, 78, 216, 1);
    --colors-orange-100:  rgba(255, 237, 213, 1);
    --colors-orange-200:  rgba(255, 186, 116, 1);
    --colors-orange-500:   rgba(255, 128, 0, 1);
    --colors-orange-600:  rgba(255, 102, 0, 1);
    --colors-orange-700:  rgba(204, 85, 0, 1);
    --colors-purple-100: rgba(238, 233, 255, 1);
    --colors-purple-200: rgba(211, 174, 255, 1);
    --colors-purple-700: rgba(85, 29, 157, 1);
}

*{
    font-family: "Lexend", serif !important;
}

body{
    margin: 0;
    padding: 0;
    background-color: #F8F2E6;
}

/* login page */
.container_login{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.login-form {
    width: 355px;
    position: absolute;
    top: calc(50% - 175px);
    left: calc(50% - 175px);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--ligo-neutral-200);
    background: var( --colors-base-white);
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    img {
        align-self: center;
    }
}

.loginLabel{
    font-size: 14px;
    font-weight: 400;
    color: var(--ligo-neutral-900);
    margin-bottom: 0;
}


.Formlogin input{
    border: 1px solid var(--ligo-neutral-300);
    background: var(--colors-base-white);
    height: 40px !important;
    gap: 0px;
    border-radius: 8px;
    margin-bottom: 16px;
    color: var(--ligo-neutral-600);
    transition: all 0.2s ease-in-out;
    &:focus, &:hover {
        transition: all 0.2s ease-in-out;
        border: 1px solid var(--ligo-blue-500-cta) !important;
        box-shadow: 0px 0px 0px 4px #4d70ff33 !important;
    }
}

.Formlogin input::placeholder{
    color: #EAEFF5;
}

.Formlogin button{
    background-color: var(--ligo-blue-500-cta) !important;
    height: 40px;
    width: 100%;
    border: 1px solid var(--ligo-blue-600);
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.16) inset !important;
    color: var(--colors-base-white);
    padding: 10px 14px 10px 14px;
    gap: 6px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    &:hover {
        background-color: var(--ligo-blue-600) !important;
    }
}


/* dialogo page */

.blue-text{
    font-weight: bold;
    color: blue;
}

.orange-text{
    font-weight: bold;
    color: orange;
}

.navbar{
    display: flex;
    justify-content: space-between;
    /* background-color: #86C3B4; */
    background-color: #74a579;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.navbar a{
    color: #EAEFF5;
    text-decoration: none;
}

.navbar a:hover{
    border-bottom: 3px solid #EAEFF5;
}

.navbar .btn{
    color: #EAEFF5;
}

.navbar .btn:hover{
    border-bottom: 3px solid #EAEFF5;
}

.form-pesquisa{
    /* background: #86C3B4; */
    background-color: #74a579;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3%;
}

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
}

.form-pesquisa input{
    margin-left: 1%;
    border: none;
    border-bottom: 2px solid #EAEFF5;
    flex: 1;
    background-color: transparent;
}

.form-pesquisa input::placeholder{
    color: #EAEFF5;
}

.form-pesquisa input[type="date"]{
    color: #EAEFF5;
}

.form-pesquisa .btn{
    margin-left: 1%;
    color: #EAEFF5;
    border: 2px solid#EAEFF5;
}

.form-pesquisa .btn:hover{
    color: black;
    background-color: #EAEFF5;
}

.div-sessoes{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 2%;
}

#centro {
    color: black;
    margin-top: 2%;
    width: 100%;
    text-wrap: normal;
    background-color: #EAEFF5;
    padding-bottom: 20px;
}

.text{
   color:black;
    padding-left: 10px;
    width: 70%;
    margin-left: 28%;
    position: absolute;
    display: flex;
    position: relative;
    flex-direction: column;
    overflow-y: auto;
}

table:{
    text-align: center;
    width: 100%;
    position: relative;
}

table td:{
    text-align: center;
    width: 33%;
}

#popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #8DA990;
    padding: 20px;
    z-index: 1000;
}
#popup ul {
    list-style-type: none;
    padding: 0;
}
#popup ul li {
    margin: 10px 0;
    cursor: pointer;
}
#popup .close {
    cursor: pointer;
    color: red;
    float: right;
}

.msg_direction{
    width: 12%;
    margin-left: 15%;
    position: absolute;
    text-align: right !important;
    

}

.m3 {
    color: blue;
    border-right: 2px solid blue;
}

.msg_cr {
    color: orange;
    border-right: 2px solid orange;
}

.msg_in {
    color: green;
    border-right: 2px solid green;
}

.msg_log {
    color: gray;
    border-right: 2px solid gray;
}

.msg_out {
    color: green;
    border-right: 2px solid green;
    margin-left: 10%;
}


.graby_bg{
    background-color: #f7f7f7 !important;
}

.orange_bg{
    background-color: #fff5bf !important;
}

.text, .m3, .msg_cr, .msg_log, .msg_in, .msg_out {
    padding-right: 5px;
    text-align: left;
    float: left;
    width: 90%;
    display: flex;
}

.box{
    position: relative;
    font-size: 11pt;
    display: flex;
    padding: 2%;
    word-break: break-all;
    overflow-warp: break-word;
}

.horario{
    color: black;
    padding-left: 10px;
    float: left;
    width: 15% !important;
    text-align: left;
    position: absolute;
}

.titulo-form{
    color:black;   
}

.Usuario-Manager{
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: 1%;
}

.Table-User{
    background-color: #063b88;
    border-radius: 7px;
    padding: 2%;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.4);
    gap: 5px
}

.modal-content{
    background-color: #063b88;
    border-radius: 7px;
    padding: 2%;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.4);
    gap: 5px
}

.formSenha .btn{
    color: #EAEFF5;
    border: 2px solid#EAEFF5;
}

.formSenha .btn:hover{
    color: black;
    background-color: #EAEFF5;
}

.dropdown-menu{
    background-color: #063b88;
    border-radius: 7px;
    padding: 2%;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.4);
    gap: 5px
}