/* General styling */
body {
    font-family: system-ui;
}
p{
    text-align:justify !important;
    font-size:15px !important;
}
/* Sidebar */
.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
}

/* Main content */
.container-fluid {
    margin-left: 260px;
}

/* Stylish table */
th {
    background-color: #007bff;
    color: white;
}
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 13px;
    margin: 0;
    background-color: #c4e0eb;
}

.header {
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    /* padding: 0 3%; */
    background-color: #0d528c;
    width: 73%;
    border-bottom: 5px solid #3c9fc3;
}

    .header img {
        max-width: 99px;
    }
.box h4 {
    font-weight: bold;
    color: #2e94ba;
    font-family: revert;
    text-align: left;
    padding-bottom: 0%;

}
.main-container {
    display: flex;
    flex: 1;
}

.content-container {
    width: 73%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c4e0eb;
    margin-top: 4.1%;
    overflow-y: auto;
    max-height: 659px;
    padding: 0;
    position:relative;
}
.qr-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c4e0eb;
    padding: 3% 5%;
}
.box {
    background: #f5f3f3;
    padding: 3% 5%;
    width: 100%;
    position:relative;
}

.login-box {
    max-width: 47%;
    text-align: center;
    padding: 4% 5%;
    border-radius: 10px;
}
.signup-box {
    max-width: 100%;
    height: 100%;
    padding:5%;
}


.btn-primary {
    background-color: #0d528c;
    border: none;
    transition: 0.3s;
}

    .btn-primary:hover {
        background-color: #0056b3;
    }

.image-container {
    width: 27%;
    background-color: #3c9fc3;
}

.footer {
    left: 0;
    text-align: center;
  
    background: #2e94ba;
    color: #ffffff;
    font-size: 13px;
    width: 73%;
    position: fixed;
    bottom: 0;line-height:30px;
}

a {
    text-decoration: none;
    color: #4871e7 !important;
}

.login-box img {
    max-width: 44%;
    margin-bottom: 12%;
}

.profile-img {
    margin-top: 11%;
}
.no-bg{
    background:none;
}

a.btn
{
    color:#fff !important;
}

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgb(117 120 124 / 62%);
    margin: 8px 0px;
}

    .hr-sect::before,
    .hr-sect::after {
        content: "";
        flex-grow: 1;
        background: rgb(117 120 124 / 38%);
        height: 1px;
        font-size: 0px;
        line-height: 0px;
        margin: 0px 8px;
    }

/* Add a black background color to the top navigation */
.topnav {
    overflow: hidden;
}

    /* Style the links inside the navigation bar */
    .topnav a {
        float: left;
        display: block;
        color: #f5f3f3 !important;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 14px;
        transition: 0.4s;
        line-height:30px;
    }

        /* Change the color of links on hover */
        .topnav a:hover {
            background-color: #f5f3f3;
            color: #3c9fc3 !important;
        }

        /* Add an active class to highlight the current page */
        .topnav a.active {
            background-color: #f5f3f3;
            color: #3c9fc3 !important;
        }

    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
        display: none;
    }

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */




img {
    vertical-align: middle;
}



/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #3c9fc3;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1s;
    animation-fill-mode:revert

}

@keyframes fade {
    from {
        opacity: .7
    }

    to {
        opacity: 1
    }
}

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    width: 90% !important;
    transition: opacity 0.3s ease-in-out;
}
    .toast-container hr {
        margin: 0 !important;
        white-space: normal !important;
        display: block;
        margin-block-start: 0 !important;
        margin-block-end:0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
    }
.alert {
    white-space: normal;
}
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100%;
    background-size: contain;
    object-fit: contain;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    z-index: 0;
    object-fit:cover;
}

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter:grayscale(25%)
    }

    .slide.active {
        opacity: 1;
        z-index: 1;
    }
.social {
    color: #0d528c;
    list-style-type: none;
    margin-top: 10%;
    margin-left: 6%;
    
}
    .social li {
        margin-bottom: 10px;
        font-size: 15px;
        font-family: monospace;
    }
    .social i {
        color: #3c9fc3;
        margin-right: 1%;
        font-size: 1.2rem;
    }
.border-left-dashed {
    border-left: 9px solid #c4e0eb;
    border-radius: 25px;
    margin-left:3%;
}
.form-label {
    color: #0d528c;
}
.scroller {
    --scrollbar-color-thumb: #c4e0eb;
    --scrollbar-color-track: #3c9fc3;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }

    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }

    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}
.scroller::-webkit-scrollbar-thumb {
    background: transparent;
}

.scroller::-webkit-scrollbar-track {
    background: transparent;
}

.scroller:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}

.scroller:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

.scroller:hover {
    --fix:; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}
.question {
    background: none;
    border: none;
    width: 41px;
    color: #f00;

}
.alert {
    position: absolute;
    right: 1%;
    width: 30%;
    z-index: 6;
    top: 2%;
white-space: pre-line;
}
.logout {
    text-decoration: auto;
    font-size: 14px;
    background: none;
    float: right;
    border: none;
    padding: 16px;
}
.logout span{
    color:#fff;
}
    .logout a {
        float: none;
        display: inline-block;
        color: #f00 !important;
        text-align: center;
        padding: 0;
        text-decoration: none;
        font-size: inherit;
        transition: 0.4s;
        line-height: inherit;
        padding: 3px 3px;
    }

@media screen and (max-width: 600px) {
    .image-container {
        display: none !important;
    }

    .content-container {
        width: 100%;
        max-height: 100%;
        padding-bottom: 5%;
        margin-top: 11%;
    }

    .w-25 {
        width: 100% !important;
    }

    .header, .footer {
        width: 100%;
        z-index: 11;
    }

    .topnav.responsive {
        position: relative;
    }

    .login-box {
        max-width: 90%;
    }

    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
        color: #3c9fc3 !important;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .logout a {
        display: inline-block !important;
        width: 100%;
    }

    .logout > span {
        display: none;
    }

    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
        width: 90% !important;
        transition: opacity 0.3s ease-in-out;
    }
}