:root {
    /*--body_gradient_left: #00b2fc;
    --body_gradient_right: #d3edfe;*/
    /*--body_gradient_left: #b1d1b9;
    --body_gradient_right: #ffffff;*/
    /*--body_gradient_left: #d3dbd5;
    --body_gradient_right: #ffffff;*/
    --body_gradient_left: #cdc1bb;
    --body_gradient_right: #ffffff;
    --form_bg: #ffffff;
    --input_bg: #e5e5e5;
    --input_hover: #eaeaea;
    --submit_bg: #1fcc44;
    --submit_hover: #40e263;
    --icon_color: #6b6b6b;
}

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

html {
    /*background-color: #028df4;*/
    background-color: #8b8b8b;
    height: 100%;
}


body {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
    background-image: linear-gradient( to right, var(--body_gradient_left), var(--body_gradient_right) );
    padding-top: 50px;
}

#index-bg {
    position: fixed;
    bottom: 0px;
    margin-bottom: -100px;
    margin-left: -100px;
    width: 75%;
    filter: opacity(0.1);
    z-index: 1;
}

#index-bg img {
    width: 100%;
}

.heading-block {
    margin-bottom: 50px
}

.yellowColor {
    background-color: #ffdc73;
}

.k-notification {
    border: 0;
    height: 150px;
}

.k-notification-novidade {
    background: rgba(0,204,102,.7);
    color: #fff;
}

.novidade {
    width: 350px;
    height: 100px;
}

    .novidade h3 {
        font-size: 14px;
        font-weight: 700;
        padding: 15px 20px 45px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .novidade img {
        float: left;
        margin: 5px 15px 30px 30px;
    }

    .novidade p {
        margin: 5px 20px 20px;
        line-height: 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }

.k-notification-novidade2 {
    background: rgba(255, 216, 0,.7);
    color: #fff;
}

#form_wrapper {
    width: 1000px;
    height: 600px;
    margin: 50px auto 50px auto;
    background-color: var(--form_bg);
    border-radius: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2vw;
    padding: 5vh 15px;
    box-shadow: 0px 3px 4px 0px rgb(0 0 0 / 0.08);
    z-index: 2;
}

#form_left {
    display: flex;
    justify-content: center;
}

    #form_left img {
        width: 350px;
        height: 450px;
    }

#form_right {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    padding: 10% 5%;
}

.input_container {
    background-color: var(--input_bg);
    display: flex;
    align-items: center;
    padding-left: 20px;
}

    .input_container:hover {
        background-color: var(--input_hover);
    }

.input_container,
#input_submit {
    height: 60px;
    border-radius: 30px;
    width: 100%;
}

.input_field {
    color: var(--icon_color);
    background-color: inherit;
    width: 90%;
    border: none;
    font-size: 1.3rem;
    font-weight: 400;
    padding-left: 30px;
}

    .input_field:hover,
    .input_field:focus {
        outline: none;
    }

#input_submit {
    background-color: var(--submit_bg);
    padding-left: 0;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

    #input_submit:hover {
     background-color: var(--submit_hover);
     transition: background-color, 1s;
     cursor: pointer;
    }

h1,
span {
    text-align: center;
}

#create_account {
    display: block;
    position: relative;
    top: 30px;
}

a {
    text-decoration: none;
    color: var(--submit_bg);
    font-weight: bold;
}

    a:hover {
        color: var(--submit_hover);
    }

i {
    color: var(--icon_color);
}

#mensagem-login {
    margin-top: 20px;
    color: red;
}

#sistemamodular-div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 8%;
    right: 10%;
    width: 300px;
    /*background-color: #00c4ff;*/
    background-color: #5e9f53;
    color: white;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 3px 4px 5px #8080804a;
    z-index: 3;
}

    #sistemamodular-div a {
        background-color: #e0f1da;
        color: #0e4974;
        border: none;
    }

        #sistemamodular-div a:hover {
            filter: brightness(103%);
        }

#index-footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    /*background-color: #028df4;*/
    background-color: #8b8b8b;
    color: white;
    text-align: center;
    font-size: 14px;
    padding: 5px 0px;
    z-index: 4;
}

label {
    display: inline-block;
    font-size: 14px !important;
    font-weight: bold;
    margin-bottom: 2px;
    margin-top: 5px;
}

.form-control {
    margin-bottom: 7px;
}

    .form-control:focus {
        border-color: #f1bca2 !important;
        box-shadow: 0 0 0 0.25rem rgb(253 46 13 / 8%) !important;
    }

form button {
    /*background-color: #00cef7;*/
    background-color: #e9602c !important;
    border-color: #c37640 !important;
    color: white !important;
    margin-top: 20px;
    
}

form button:focus, form button:hover {
    outline-offset: 0px !important;
    box-shadow: none !important;
}

select {
    cursor: pointer;
}

.error {
    position: fixed;
    top: 8%;
    left: 10%;
    max-width: 600px;
    z-index: 1000;
    background-color: red;
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    border-radius: 15px;
    padding: 2%;
    box-shadow: 7px 4px 4px hsl(0deg 0% 50% / 32%);
}

/* #media */
@media (max-width: 1440px) {
    #form_wrapper {
        margin-top: 0px !important;
        scale: 90%;
    }
}

/* CSS mostrar a senha */

.password-container {
    position: relative;
    width: 100%;
}

.password-container input[type="password"],
.password-container input[type="text"] {
    width: 100%;
    padding-right: 40px;
}

.toggle-password {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #555;
    font-size: 1.0rem;
    z-index: 10;
    background-color: #eee;
    padding: 10px 9px;
    border-radius: 0;
    border-left: 1px solid #ccc;
}

.toggle-password:hover {
    color: #000;
}


/* Container principal para o input e os ícones */
.password-container.input-with-dual-icons {
    position: relative;
    width: 100%; 
}

 /* Estilo do campo de input */
.password-container.input-with-dual-icons input[type="password"],
.password-container.input-with-dual-icons input[type="text"] {
    width: 100%;
    padding-left: 40px;
    }

/* Estilo para o ícone */
.input-left-icon {
    position: absolute;
    left: 13px; 
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    font-size: 1.0rem;
    z-index: 10;
}

/* Estilo para o select */
.password-container.input-with-dual-icons select.form-select {
    width: 100%;
    padding-left: 40px;
}

/* Hover botão entrar */

#botaoEntrar:hover {
    background-color: #f38d5e !important;
    border-color: #f38d5e !important;
}