/*Default.css*/



/*=====================GENERAL SETTINGS========================*/



body {

    background-color: rgba(0, 0, 0, 0.08); /* Light gray with 5% opacity */

}



#loadingOverlay {

    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */

}



.loader {

    border: 16px solid #f3f3f3; /* Light grey */

    border-top: 16px solid #3498db; /* Blue */

}



.form-before {

    border-color: white;

    background-color: transparent;

    color: white;

}



    .form-before:focus {

        border-color: white;

        background-color: transparent;

        color: white;

    }



/* Settings for desktop screens */

@media (min-width: 992px) {

    /* Top bar stays the same grey */

    header .navbar {

        background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;

    }



        header .navbar::before {

            color: white;

            /* Accent in the top-left corner (DB-driven) */

            background-color: var(--brand-header-accent-color, #0e1a58); /* default from old Default.css */

        }

}



.form-check-input {

    color: #343a40;

    border: 2px solid #343a40;

    background-color: transparent;

}



    .form-check-input.active,

    .form-check-input:checked {

        color: white;

        background-color: #343a40;

        border-color: #343a40;

    }



    .form-check-input:focus {

        box-shadow: none;

        border-color: #343a40;

    }



/*=======================COLOURS========================*/

/*Background Colours*/

.view-bg-login {

    background-color: var(--brand-login-card-color, rgba(0, 0, 0, 0.37))!important;

}

/*rgba(0, 0, 0, 0.37)*/

/* 8build:  background-color: rgba(29, 29, 27, 1);*/



/* LOGIN PAGE BACKGROUND (DB-driven) */

/* body gets class "view-bg-dark-blue" on login pages */

.view-bg-dark-blue {

    background-image: var(--brand-login-bg-image, none), linear-gradient( 170deg, var(--brand-login-bg-color, #172983) 0%, var(--brand-login-bg-color2, #340062) 100% );

    background-size: 90% auto, cover;

    background-position: 34.5% 50%, center center;

    background-repeat: no-repeat, no-repeat;

    background-attachment: fixed, fixed;

    background-color: var(--brand-login-bg-color, #172983);

}



/* If you still use this elsewhere, keep original gradient */

.view-bg-dark-blue-op {

    background: rgb(23,41,131);

    background: linear-gradient(279deg, rgba(23,41,131,1) 0%, rgba(52,0,98,1) 100%);

}



.view-bg-orange {

    background-color: #FFB471;

}



.view-bg-blue {

    background-color: #727092;

}



.view-bg-light-blue {

    background-color: #BCCAE8;

}



.view-bg-pink {

    background-color: #FFCBB3;

}



.view-bg-off-white {

    background-color: #E8EFF0;

}



.view-bg-white {

    background-color: #FFFFFF;

}



/*Text Colours*/

.view-text-orange {

    color: #FFB471;

}



.view-text-blue {

    color: #727092;

}



.view-text-dark-blue {

    color: #3B3446;

}



.view-text-light-blue {

    color: #BCCAE8;

}



.view-text-pink {

    color: #FFCBB3;

}



.view-text-off-white {

    color: #FFF7F7;

}



.text-grad {

    background: linear-gradient(90deg, rgba(23, 41, 131, 1) 0%, rgba(23, 47, 167, 1) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.dropdown-item:focus {

    background-color: gray;

}



/*=======================HEADER========================*/

/*Buttons-Toggles*/



/* Burger to X icon transition - adjustments not needed if using SVG directly in HTML */

.navbar-toggler {

    background: transparent;

}



    .navbar-toggler .navbar-toggler-icon {

        background-image: none; /* This line ensures no default styling is applied */

    }



.fa-bars, .fa-xmark {

    color: black; /* Or any color that fits your design */

}



/* Dropdown Content (Hidden by Default) */

.dropdown-content {

    background-color: #f1f1f1;

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

}



    /* Links inside the dropdown */

    .dropdown-content a {

        color: black;

    }



.navbar-brand {

    color: white !important;

}



/*==========================SIDEBAR==============================*/



.side-bar-button::before { /* Add this */

    background-color: rgba(255, 255, 255, 0.2);

}



.side-bar-button:hover {

    color: white;

}



.side-bar-button.active-link {

    color: white; /* Example style */

}



/* Sidebar background (DB-driven) */

.side-bar {

    background-image: linear-gradient( 170deg, var(--brand-sidebar-bg-color, #172983) 0%, var(--brand-sidebar-bg-color2, #340062) 100% );

}



/*==========================MAIN CONTENT==============================*/



.btn-primary {

    background: transparent;

    border-color: #343a40; /* Update border color to match, if desired */

    color: #343a40;

}



    .btn-primary:hover {

        background: #343a40;

        border-color: #343a40; /* Update border color to match, if desired */

        color:white;

    }



.btn-success {

    background: rgb(3,148,9);

    background: linear-gradient(138deg, rgba(3,148,9,1) 0%, rgba(25,135,84,1) 100%);

    border-color: rgb(3,148,9); /* Update border color to match, if desired */

}



    .btn-success:hover {

        background: rgb(1,125,6);

        background: linear-gradient(138deg, rgba(1,125,6,1) 41%, rgba(25,135,84,1) 100%);

        border-color: rgb(3,148,9); /* Update border color to match, if desired */

    }



.btn-account-reset {

    background: rgb(23,41,131);

    background: linear-gradient(170deg, rgba(23,41,131,1) 0%, rgba(52,0,98,1) 100%);

    border-color: White;

    color: white;

}



    .btn-account-reset:hover {

        color: white;

        background: linear-gradient(170deg, rgba(12,20,65,1) 0%, rgba(26,0,49,1) 100%);

    }



.btn-login {

    color: white;

    border-color: white;

    background-color: transparent;

}



    .btn-login:hover {

        background-color: rgba(0, 0, 0, 0.24);

        color: white;

    }



    .btn-login:focus {

        background-color: transparent;

        color: white;

    }







.star-rating .star {

    color: gray;

}



    .star-rating .star.selected {

        color: orange;

    }



.user-icon-color {

    background: #343a40;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.floating-email {

    background: rgb(23,41,131);

    background: linear-gradient( 170deg, var(--brand-sidebar-bg-color, #172983) 0%, var(--brand-sidebar-bg-color2, #340062) 100% );

    color: white;

}



    .floating-email:hover {

        background: rgb(23,41,131);

        background: linear-gradient( 170deg, var(--brand-sidebar-bg-color, #172983) 67%, var(--brand-sidebar-bg-color2, #340062) 100% );

        color: white;

    }



.card-notice {

    background: rgb(249,249,249);

    background: linear-gradient(138deg, rgba(249,249,249,1) 0%, rgba(250,250,250,1) 100%);

}



.edit-icon-link {

    border: 2px solid rgba(23, 41, 131, 1); /* Adds a border with the specified color */

}



    .edit-icon-link:hover {

        background-color: rgba(0, 0, 0, 0.1);

    }



.drop-item-header {

    background: rgb(247,247,247);

    background: linear-gradient(138deg, rgba(247,247,247,1) 41%, rgba(245,245,245,1) 100%);

}



.custom-remember-me label {

    color: white !important;

}



/*.form-check-input {

    background-color: transparent !important;

    color: white !important;

    border: 1px solid white !important;

}*/



.form-check-input:focus {

    box-shadow: none;

    outline: none;

}



/*=====================EXTRA MOBILE SETTINGS=======================*/

@media (max-width: 991px) {



    .navbar-collapse {

        background-color: white;

    }



    .navbar-brand {

        color: black;

    }

}



/* Adjust the height of the select2 selection box to match Bootstrap form-control */

.select2-container--default .select2-selection--single {

    color: #212529; /* Matches the text color */

    background-color: #fff; /* Matches the background color */

    background-clip: padding-box; /* Ensures the background is clipped by padding */

}