:root {
    --White: rgb(255, 255, 255); /*#ffffff*/
    --BlueL: rgb(236, 248, 252); /*#ecf8fc*/
    --BlueC: rgb(63, 180, 229); /*#3fb4e5*/
    --BlueM: rgb(23, 81, 163); /*#1751a3*/
    --BlueD: rgb(8, 27, 57); /*#081b39*/
    --bs-BlueL-rgb: 236, 248, 252;
    --bs-BlueC-rgb: 63, 180, 229;
    --bs-BlueM-rgb: 23, 81, 163;
    --bs-BlueD-rgb: 8, 27, 57;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}


/*----- BACKGROUND COLOR - start ----*/
.bg-BlueC {
    background-color: var(--BlueC) !important;
}

.bg-BlueD {
    background-color: var(--BlueD) !important;
}

.bg-BlueL {
    background-color: var(--BlueL) !important;
}

.bg-BlueM {
    background-color: var(--BlueM) !important;
}

.bg-Red {
    background-color: red !important;
}
/*----- BACKGROUND COLOR - end ----*/


/*----- TEXT COLOR - start ----*/
.text-BlueC {
    color: var(--BlueC) !important;
}

.text-BlueD {
    color: var(--BlueD) !important;
}

.text-BlueL {
    color: var(--BlueL) !important;
}

.text-BlueM {
    color: var(--BlueM) !important;
}
/*----- TEXT COLOR - end ----*/

.border-BlueC {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-BlueC-rgb), var(--bs-border-opacity)) !important;
}

.border-BlueD {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-BlueD-rgb), var(--bs-border-opacity)) !important;
}

.border-BlueL {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-BlueL-rgb), var(--bs-border-opacity)) !important;
}

.border-BlueM {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-BlueM-rgb), var(--bs-border-opacity)) !important;
}

/*----- BUTTONS - start ----*/
.btn-BlueC {
    color: #fff;
    background-color: var(--BlueC);
    border-color: var(--BlueC);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--BlueC);
}

    .btn-BlueC:hover {
        color: #fff;
        background-color: var(--BlueD);
        border-color: var(--BlueC);
    }

.btn-BlueD {
    color: #fff;
    background-color: var(--BlueD);
    border-color: var(--BlueC);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--BlueD);
}

    .btn-BlueD:hover {
        color: #fff;
        background-color: var(--BlueC);
        border-color: var(--BlueC);
    }

.btn-BlueL {
    color: #fff;
    background-color: var(--BlueL);
    border-color: var(--BlueL);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--BlueL);
}

    .btn-BlueL:hover {
        color: #fff;
        background-color: var(--BlueC);
        border-color: var(--BlueL);
    }

.btn-BlueM {
    color: #fff;
    background-color: var(--BlueM);
    border-color: var(--BlueM);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--BlueM);
}

    .btn-BlueM:hover {
        color: #fff;
        background-color: var(--BlueC);
        border-color: var(--BlueM);
    }

.btn-White {
    color: var(--BlueM);
    background-color: white;
    border-color: white;
}

    .btn-White:hover {
        color: white;
        background-color: var(--BlueM);
        border-color: white;
    }
/*----- BUTTONS - end ----*/

.btn-xs {
    padding: 0.25rem 0.5rem; /* Ajuste la taille du padding pour réduire la taille du bouton */
    font-size: 0.75rem; /* Réduit la taille de la police */
    line-height: 1.5; /* Ajuste la hauteur de ligne */
    border-radius: 0.2rem; /* Modifie le coins arrondis du bouton */
    display: inline-block; /* Assure que le bouton se comporte comme un élément en ligne */
    text-align: center; /* Centrer le texte à l'intérieur du bouton */
    /* Ajoutez des couleurs et des styles supplémentaires selon vos besoins */
}


.btn-xl, .btn-group-xl > .btn {
    padding: 0.5rem 2rem;
    font-size: 2rem;
    font-weight: 600;
    border-radius: 0.3rem;
}

/*----- CUSTOM FORMS - start ----*/
.customized-form {
    background-color: var(--BlueM);
    color: white;
}

.btn.btn-wicse:focus {
    box-shadow: none;
}


.form-label-wicse {
    /*color: white;*/
}
/*    .customized-form .form-control {
        background-color: transparent;
        border-radius: unset;
        border-color: transparent;
        border-bottom-color: white;
    }*/

.form-control.form-control-wicse {
    background-color: transparent;
    border-radius: unset;
    border-color: transparent;
    border-bottom-color: white;
    font-size: unset;
}

    /*.customized-form .form-control:focus {
    box-shadow: none;
    border-color: transparent;
    border-bottom-color: var(--BlueC);
}*/
    .form-control.form-control-wicse:focus {
        box-shadow: none;
        border-color: transparent;
        border-bottom-color: var(--BlueC);
    }

.customized-form .input-group-text {
    color: black;
    background-color: white;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    border-bottom: 1px solid white;
}

/*    .customized-form .form-select {
        background-color: transparent;
        border-radius: unset;
        border-color: transparent;
        border-bottom-color: white;
        background-image: url("/App_Themes/WICSE_Project/bootstrap-5.0.2-dist/select.svg");
    }*/
.form-select.form-select-wicse {
    background-color: transparent;
    border-radius: unset;
    border-color: transparent;
    border-bottom-color: white;
    background-image: url("/App_Themes/WICSE_Project/bootstrap5/select.svg");
    font-size: unset;
}

    /*        .customized-form .form-select option {
            background-color: var(--BlueD);
            border-color: transparent;
        }
.customized-form .form-select:focus {
    box-shadow: none;
    border-color: transparent;
    border-bottom-color: var(--BlueC);
}

    .customized-form .form-check {
        font-size: x-large;
    }

        .customized-form .form-check .form-check-input {
            background-color: black;
        }

            .customized-form .form-check .form-check-input:focus {
                box-shadow: none;
            }
*/
    .form-select.form-select-wicse option {
        background-color: var(--BlueD);
        border-color: transparent;
    }

    .form-select.form-select-wicse:focus {
        box-shadow: none;
        border-color: transparent;
        border-bottom-color: var(--BlueC);
    }

.form-check.form-check-wicse {
}

    .form-check.form-check-wicse .form-check-input {
        background-color: black;
    }

        .form-check.form-check-wicse .form-check-input:focus {
            box-shadow: none;
        }

label.required::after {
    content: '*';
    display: inline-block;
    padding-left: 5px;
}


.form-item.required label:first-child::after {
    content: '*';
    display: inline-block;
    padding-left: 5px;
}

/*----- CUSTOM FORMS - updates ----*/
.valid-feedback {
    padding: 2px;
    background-color: #198754;
    color: white;
    width: fit-content;
}

.invalid-feedback {
    padding: 2px;
    background-color: #dc3545;
    color: white;
    width: fit-content;
}

/*----- CUSTOM FORMS - addons ----*/

.form-check-xs {
    font-size: x-small;
}

.form-check-sm {
    font-size: small;
}

.form-check-md {
    font-size: medium;
}

.form-check-lg {
    font-size: large;
}

.form-check-xl {
    font-size: x-large;
}

.form-check-xxl {
    font-size: xx-large;
}

/*----- CUSTOM FORMS - end ----*/

/*----- CUSTOM SCROLLBAR - start ----*/

.custom-scrollbar {
    overflow: overlay;
}

.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
    width: 6px;
    cursor: pointer;
}

/* Track */
.custom-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
.custom-scrollbar::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--BlueC);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

    .custom-scrollbar::-webkit-scrollbar-thumb:window-inactive {
        background: var(--BlueC);
    }



/*----- CUSTOM SCROLLBAR - end ----*/


.bg-image {
    background: url(/imgs/login-bg.jpg) no-repeat;
    background-size: cover;
    background-position:center center;
}

.form-control.noFocus:focus {
    box-shadow: none;
}

.form-select:focus {
    box-shadow: none;
}

.row-cols-7 > * {
    flex: 0 0 auto;
    width: 14.2857%;
}

.row-cols-8 > * {
    flex: 0 0 auto;
    width: 12.5%;
}

.row-cols-9 > * {
    flex: 0 0 auto;
    width: 11.1111%;
}

.row-cols-10 > * {
    flex: 0 0 auto;
    width: 10%;
}

.row-cols-11 > * {
    flex: 0 0 auto;
    width: 9.0909%;
}

.row-cols-12 > * {
    flex: 0 0 auto;
    width: 8.3333%;
}

.row-cols-13 > * {
    flex: 0 0 auto;
    width: 7.6923%;
}

.row-cols-14 > * {
    flex: 0 0 auto;
    width: 7.1428%;
}

.row-cols-15 > * {
    flex: 0 0 auto;
    width: 6.6666%;
}

.row-cols-16 > * {
    flex: 0 0 auto;
    width: 6.25%;
}

.row-cols-17 > * {
    flex: 0 0 auto;
    width: 5.8823%;
}

.row-cols-18 > * {
    flex: 0 0 auto;
    width: 5.5555%;
}

.row-cols-19 > * {
    flex: 0 0 auto;
    width: 5.2631%;
}

.row-cols-20 > * {
    flex: 0 0 auto;
    width: 5.0000%;
}

.fs-vw-05 {
    font-size: 0.5vw !important;
}

.fs-vw-15 {
    font-size: 1.5vw !important;
}

.fs-vw-2 {
    font-size: 2vw !important;
}

.me-vw-05 {
    margin-right: 0.5vw !important;
}

.modal-wicse {
}

    .modal-wicse .modal-content {
        position: relative;
        border: 2px solid white !important;
        background: linear-gradient(45deg, var(--BlueD) 0%, var(--BlueM) 50%, var(--BlueD) 100%);
    }

        .modal-wicse .modal-content .modal-background {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: url(/imgs/w.png) no-repeat right bottom;
            background-size: auto 50%;
            /*background: linear-gradient(45deg, var(--BlueD) 0%, var(--BlueM) 50%, var(--BlueD) 100%);*/
        }

/*        .modal-wicse .modal-content .modal-background::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50%;
            height: 50%;
            background: url(/imgs/w.png) no-repeat right bottom;
            background-size: auto 100%;
            pointer-events: none;
        }*/
/*----- CUSTOM POPOVER TOOLTIP - begin ----*/

.custom-tooltip {
    border: 2px solid white;
    border-radius: 4px;
    font-size: 18px;
    max-width: 300px;
    text-align: center;
}

.custom-tooltip .popover-arrow::before {
    --bs-popover-arrow-border: white !important;
}

.custom-tooltip .popover-arrow::after {
    --bs-popover-bg: white !important;
}

.custom-tooltip .popover-body {
    --bs-popover-body-padding-y: 0px;
    --bs-popover-body-padding-x: 10px;
    --bs-popover-body-color: white;
}

    .custom-tooltip .popover-body .popover-text {
        padding: 5px;
    }

        .custom-tooltip .popover-body .popover-text p {
            margin: 0;
        }


.custom-tooltip-primary {
    background-color: var(--bs-primary);
    color: white;
}

.custom-tooltip-secondary {
    background-color: var(--bs-secondary);
    color: white;
}

.custom-tooltip-success {
    background-color: var(--bs-success);
    color: white;
}

.custom-tooltip-info {
    background-color: var(--bs-info);
    color: white;
}

.custom-tooltip-warning {
    background-color: var(--bs-warning);
    color: white;
}

.custom-tooltip-danger {
    background-color: var(--bs-danger);
    color: white;
}
/*----- CUSTOM POPOVER TOOLTIP - end ----*/


:root {
    --btn-blanc-color: #000; /* Texte noir */
    --btn-blanc-bg: #fff; /* Fond blanc */
    --btn-blanc-border-color: #ddd; /* Bordure grise claire */
    --btn-blanc-hover-color: #000;
    --btn-blanc-hover-bg: #f8f9fa; /* Fond légèrement gris clair */
    --btn-blanc-hover-border-color: #ccc; /* Bordure grise plus foncée */
    --btn-blanc-focus-shadow-rgb: 255, 255, 255; /* Ombre blanche */
    --btn-blanc-active-color: #000;
    --btn-blanc-active-bg: #e2e6ea; /* Fond gris moyen */
    --btn-blanc-active-border-color: #d6d8db; /* Bordure grise plus foncée */
    --btn-blanc-disabled-color: #aaa; /* Texte gris clair pour le bouton désactivé */
    --btn-blanc-disabled-bg: #f8f9fa; /* Fond gris clair pour le bouton désactivé */
    --btn-blanc-disabled-border-color: #ddd; /* Bordure grise pour le bouton désactivé */
    --btn-blanc-focus-outline: 0.25rem rgba(var(--btn-blanc-focus-shadow-rgb), 0.5); /* Ombre focus */
}


/* Style de base du bouton */
.btn-blanc {
    color: var(--btn-blanc-color);
    background-color: var(--btn-blanc-bg);
    border: 1px solid var(--btn-blanc-border-color);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
}

    /* État survolé */
    .btn-blanc:hover {
        color: var(--btn-blanc-hover-color);
        background-color: var(--btn-blanc-hover-bg);
        border-color: var(--btn-blanc-hover-border-color);
    }

    /* État focus */
    .btn-blanc:focus, .btn-blanc.focus {
        color: var(--btn-blanc-hover-color);
        background-color: var(--btn-blanc-hover-bg);
        border-color: var(--btn-blanc-hover-border-color);
        box-shadow: 0 0 0 var(--btn-blanc-focus-outline);
    }

    /* État actif */
    .btn-blanc:active, .btn-blanc.active,
    .show > .btn-blanc.dropdown-toggle {
        color: var(--btn-blanc-active-color);
        background-color: var(--btn-blanc-active-bg);
        border-color: var(--btn-blanc-active-border-color);
    }

    /* État désactivé */
    .btn-blanc:disabled, .btn-blanc.disabled {
        color: var(--btn-blanc-disabled-color);
        background-color: var(--btn-blanc-disabled-bg);
        border-color: var(--btn-blanc-disabled-border-color);
        cursor: not-allowed;
    }


.vh-75 {
    height: 75vh;
}