: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*/
}

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 0;
}

input:-webkit-autofill,
input:-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;
}
/*----- 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(--BlueC), var(--bs-border-opacity)) !important;
}

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

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

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

/*----- BUTTONS - start ----*/
.btn-BlueC {
    color: #fff;
    background-color: var(--BlueC);
    border-color: 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);
}

    .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);
}

    .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);
}

    .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-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;
}

    /*.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/bootstrap-5.0.2-dist/select.svg");
        }

            /*        .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 {
    font-size: x-large;
}

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

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

.required::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::-webkit-scrollbar {
    width: 6px;
}

/* 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);*/
    background: rgba(0,0,0,0.15);
    -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;
}

.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%;
}