@font-face {
    font-family: Roboto;
    src: url("../assets/fonts/Roboto/roboto.ttf");
}

@font-face {
    font-family: Synorix;
    src: url("../assets/fonts/logo/synorix/Synorix.ttf");
}


:root {
    --primary-color: #00a991;
    --primary-color-hover: #009883;
    --primary-color-active: #008774;

    --primary-color-shadow-sm: rgba(0, 169, 144, 0.16);
    --primary-color-shadow-md: rgba(0, 169, 144, 0.24);
    --primary-color-shadow-xl: rgba(0, 169, 144, 0.38);

    --primary-color--dark: #007f6d;
    --primary-color--dark-hover : #006557;
    --primary-color--dark-active : #004c41;

    --primary-color--light: #e6f6f4;
    --primary-color--light-hover: #d9f2ef;
    --primary-color--light-active: #b0e4dd;



    --body-bg : #F8F9FA;
    --text-color: #333333;
    --font-family: 'Arial, sans-serif';
    --border-radius: 5px;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content {
    min-height: 70vh;
    box-shadow: 0em 0em 2em 0.05em var(--primary-color-shadow-sm) ;
}

.content_login {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.content_login_reverse {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.illustration_reverse {
    display: flex;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.illustration {
    display: flex;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.bg_custom {
    background-color: var(--primary-color--light);
}

body {
    font-family: Roboto;
    background-color: var(--body-bg) !important;
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

.police {
    font-family: 'Courier New', Courier, monospace;
}

.logo {
    font-family: Synorix;
    font-size: 2em;
}

.btn-primary-theme {
    background-color: var(--primary-color--dark);
    color: white;
}

.btn-primary-theme:hover {
    background-color: var(--primary-color--dark-hover) !important;
    color: white;

}

.btn-primary-theme:active, .btn-primary-theme:focus-visible {
    background-color: var(--primary-color--dark-active) !important;
    color: white !important;
    border: none;
}

input:focus {
    border: var(--primary-color--dark-active) !important;
    box-shadow: 0 0 0 .25rem var(--primary-color-shadow-md) !important;
}

input:focus-visible {
    border: var(--primary-color--dark-active) !important;
    box-shadow: 0 0 0 .25rem var(--primary-color-shadow-md) !important;
}

form div a {
    text-decoration: none;
    color: var(--primary-color);
    font-size: small;
}

form div a:hover {
    color: var(--primary-color-active);
}


.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color--dark) !important;
}

.form-check-input:focus {
    border-color: var(--primary-color--dark-active) !important;
    box-shadow: 0 0 0 .25rem var(--primary-color-shadow-md) !important;
}
.link_custom {
    text-decoration: none;
    color: var(--primary-color);
}

.link_custom:hover {
    color: var(--primary-color-active);
}

.form-floating ul {
    list-style: none;
    text-decoration: none;
    font-size: small;
    padding-left: 0;
}
.form-floating>.form-control {
    height: auto;
    min-height: fit-content;
}  


.imgProfile {
    width: min(300px, 80vw);
    height: min(300px, 80vw); 
    border-radius: 50%;
    object-fit: cover;
}




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

    .illustration {
        display: none;
    }
    .illustration_reverse {
        display: none;
    }

    .content_login {
        border-radius: 20px;
    }
    
}

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

 .login-container {
    margin: 0;
    padding: 0;
 }   
     .content_login {
        border-radius: 0;
    }
    .content_login_reverse {
        border-radius: 0;
    }
}

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

 .login-container {
    margin: 0;
    padding: 0;
 }   
}