@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/* Dashboard CSS */
:root {
    --brand-color: #2563EB;
    --secondary-colors: #202124;
    --white: #FFFFFF;
    --sidebar-hover: #eff4ff;
    --task-list-border: #d6d6d6;
    --text-color: #434343;
    --button-border: #eaf0ff;
    --background-color: #eaf0ff;
    --light-upcoming-color: #d6d3fb;
    --light-pending-color: #ffedda;
    --light-Approvals-color: #c9ffd7;
    --upcoming-color: #6F39CE;
    --pending-color: #FF9535;
    --Approvals-color: #00B580;
    --font-weight: 600;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
}

body {
    background-color: var(--background-color);
    /* display: flex; */
}

.body-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: visible;
}

.logut-conatiner {
    background-color: #262626;
    padding: 0.4rem;
    color: #fff;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    margin-top: 0.1rem;
}

.sidebar {
    position: relative;
    width: 256px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 70px;
    background-color: #fff;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 4px;
    transition: all 0.3s;
}

    .sidebar .head {
        display: flex;
        justify-content: center;
        padding-bottom: 1rem;
        border-bottom: 1px solid #f6f6f6;
    }

.Brand-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

    .Brand-img img {
        width: 100%;
        object-fit: cover;
    }

.nav {
    flex: 1;
}

.menu ul li {
    position: relative;
    list-style: none;
    margin-bottom: 5px;
}

.icon-change i {
    height: 24px;
    font-size: 24px;
    width: 24px;
}

.menu ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: var(--font-weight);
    color: var(--text-color);
    text-decoration: none;
    padding: 12px 8px;
    border-radius: 8px;
    transition: all 0.3s;
}

.menu ul li i {
    font-size: 18px;
}

/* A group header is a link that stays on the page when clicked, so it keeps focus. With no :focus
   rule of the sidebar's own, Bootstrap's `.nav-link:focus` (specificity 0,2,0) outranks
   `.menu ul li a` (0,1,3) the moment the group closes and its `.active` rule stops applying, and
   repaints the header with a colour meant for Bootstrap nav bars - near-invisible on this white
   sidebar. Measured in Chrome: #434343 before, brand blue while open, a DIFFERENT colour after
   closing while still focused, #434343 again only once focus left.
   This rule is 0,2,3, so the sidebar's own colour wins. It sits BEFORE the hover/active rule
   below, so hovering, or a group that is open, still turns the header blue. */
.menu ul li > a:focus {
    color: var(--text-color);
}

/* Keyboard focus still gets a visible ring - just the sidebar's own, not Bootstrap's glow. */
.menu ul li > a:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.45);
    outline-offset: 2px;
    box-shadow: none;
}

.menu ul li > a:hover,
.menu ul li.active > a {
    color: var(--brand-color);
}

/* Icons keep their own colour, as they do on UAT: WhatsApp green, the AI queues blue, triage
   amber, failed mail red. An earlier version of this rule forced `color: inherit` so an icon
   always matched its label; that read as tidier but cost the sidebar its at-a-glance scanning,
   and the colours are what people navigate by.

   Nothing here sets a colour on the icon itself — the Bootstrap text-* utility on each <i> in
   _Layout.cshtml does. This comment exists because the obvious "fix" is to re-add
   `.menu ul li a i { color: inherit }`, which silently beats those utilities on specificity
   (0,1,4 against 0,1,0) and turns the whole menu grey again. */

/* The chevron on a collapsed group is chrome, not content: keep it quieter than the label so the
   eye lands on the words first. */
.menu ul li > a .arrow {
    color: var(--text-color);
    opacity: .45;
}

.menu ul li.active > a .arrow,
.menu ul li > a:hover .arrow {
    color: inherit;
    opacity: .85;
}

/* The active item is marked by its TEXT turning brand blue and nothing else — no tinted block
   behind the row. A filled background made the whole row read as a pressed button, and beside the
   coloured icons it left the menu looking busy. `.menu ul li.active > a` above already supplies
   the colour; this note is here only to record that the absence is deliberate. */

.menu ul li .icon {
    font-size: 20px;
}

.menu ul li .text {
    flex: 1;
}

.menu ul li .arrow {
    font-size: 14px;
    transition: all 0.3s;
}

.menu ul li.active .arrow {
    transform: rotate(180deg);
}

.menu .sub-menu {
    display: none;
    margin-left: 20px;
    padding-left: 20px;
    padding-top: 5px;
    border-left: 1px solid var(--brand-color);
}

    .menu .sub-menu li a {
        padding: 10px 8px;
        font-size: 12px;
    }

.menu-btn {
    position: absolute;
    right: 0px;
    top: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--white);
    border: 4px solid var(--button-border);
    background-color: var(--brand-color);
    z-index: 1002;
}
/* .menu-btn:hover i {
  color: #000;
} */
/* .menu-btn i {
  transition: all 0.3s;
} */
.sidebar.active {
    width: 92px;
}

    .sidebar.active .menu-btn i {
        transform: rotate(180deg);
    }

    .sidebar.active .menu .title {
        text-align: center;
    }

    .sidebar.active .menu ul li .arrow {
        display: none;
    }

    .sidebar.active .menu > ul > li > a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .sidebar.active .menu > ul > li > a .text {
            position: absolute;
            left: 70px;
            top: 50%;
            transform: translateY(-50%);
            padding: 10px;
            border-radius: 4px;
            color: #fff;
            background-color: #000;
            opacity: 1;
            visibility: hidden;
        }

            .sidebar.active .menu > ul > li > a .text::after {
                content: "";
                position: absolute;
                left: -5px;
                top: 20%;
                width: 20px;
                height: 20px;
                border-radius: 2px;
                background-color: #000;
                transform: rotate(45deg);
                z-index: -1;
            }

.Online {
    color: var(--Approvals-color);
    font-size: 12px;
    padding: 0.5rem;
    border-radius: 0.4rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
/*Hide tooltip 02/02/2026*/
/*.sidebar.active .menu > ul > li > a:hover .text {
    left: 50px;
    opacity: 1;
    z-index: 999;
    visibility: visible;
}
*/
.sidebar.active .menu .sub-menu {
    position: absolute;
    top: 0;
    left: 20px;
    width: 200px;
    border-radius: 20px;
    padding: 10px 20px;
    border: 1px solid #f6f6f6;
    background-color: #fff;
    box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.1);
}
/* main container start here */
.main-container {
    background-color: var(--background-color);
    width: 100%;
    padding: 1rem;
    flex: 1;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative; /* ensures form elements render normally */
    margin-top: 70px; /* adjust based on your header height */
    min-width: 0; /* allows flex item to shrink below content size */
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    background-color: var(--white);
    padding: 0.7rem 1.1rem;
    margin-bottom: 1rem;
    align-items: center;
    border-radius: 0.75rem;
    border: 1px solid #e8edf6;
    box-shadow: 0 1px 2px rgba(16, 32, 64, 0.04);
}

.user-info {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    min-width: 0;
}

/* Name over role, right-aligned so both run back to the avatar. */
.user-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    min-width: 0;
}

/* Both lines truncate rather than wrap: a long designation must not push the header taller and
   move every tile on the page down with it. */
.user-role {
    font-size: 0.7rem;
    font-weight: 500;
    color: #7c879b;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    /* A ring in the page's own background rather than a shadow, so it reads as a token on the
       card instead of floating above it. */
    box-shadow: 0 0 0 3px #eaf1fe;
}

.side-top-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem;
}

.checkin-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
}

.checkin-date-time {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.checkin-head {
    font-size: 12px;
    color: #19193E;
    font-weight: 700;
}

.checkin-time {
    font-size: 12px;
    color: #00C880;
    font-weight: 600;
}

.devider {
    border-right: 2px solid #dadada;
    height: 40px;
}

.devider-list {
    border-right: 1px solid #d6d6d6;
    height: 40px;
}

.user-name {
    font-size: 0.875rem;
    margin-bottom: 0;
    font-weight: 700;
    color: #14213a;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.haeder-title {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

/* .head-info is shared with the KPI tiles, where centring is correct. Scoped here so the page
   title stops being centred inside a flex item that is already the width of its text. */
.haeder-title .head-info {
    text-align: left;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

.head-info {
    color: var(--text-color);
    text-align: center;
    font-size: 1.125rem;
    font-weight: var(--font-weight);
}

.sub-text {
    color: #64748B;
    font-size: 14px;
}

.sub-head {
    color: var(--brand-color);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--font-weight);
}

.header-container {
    background: linear-gradient(93deg, #00123A 1.28%, #528BFF 97.63%);
    padding: 0.3rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* full width */
    z-index: 1052; /* maximum z-index to keep it above all other elements */
    background-color: #fff; /* give it a background so content doesn't show through */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* optional: subtle shadow */
}

.main-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.header-head-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.task-details-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#RFI-container {
    display: flex;
    justify-content: space-evenly;
}

    #RFI-container > div {
        flex: 0 0 24%;
    }

#RFI-sub-container {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
    flex-direction: column;
}

.Page-login-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}
/* Left side (image) */
.side-image-container {
    flex: 0 0 70%;
    height: 100vh; /* match container height */
}

.side-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* keep image proportional */
}
/* Right side (login box) */
.login-box {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* center vertically */
    padding: 30px 25px;
    background: #e6f0ff;
    border-radius: 12px 0 0 12px;
    text-align: center;
    align-items: center;
    height: 100vh; /* match container */
    overflow-y: auto; /* if form gets too tall on small screens */
}

    /* Scale the login panel content to 75% so the full form (header + fields +
       CAPTCHA) fits within the viewport without triggering a scrollbar. */
    .login-box .head,
    .login-box .head-text-bpgrs,
    .login-box .input-container {
        zoom: 0.75;
    }

    /* Typography & form elements */
    .login-box h2 {
        font-weight: 600;
        margin-bottom: 25px;
        color: #1a3e72;
    }

    .login-box label {
        display: block;
        text-align: left;
        margin-bottom: 5px;
        font-weight: 500;
    }

    .login-box input {
        width: 100%;
        padding: 10px 12px;
        margin-bottom: 15px;
        border-radius: 6px;
        border: 1px solid #ced4da;
    }

.input-container {
    width: 100%;
}
/* Buttons */
.btn-primary {
    width: 100%;
    padding: 10px;
    background-color: #1a3e72;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    color: #fff;
}

    .btn-primary:hover {
        background-color: #0f2a55;
    }

/* SCOPED CORRECTION for the rule above.
   That `.btn-primary` selector is unscoped: it was written for the login box (note its
   neighbours — .login-box input, .input-container) but it applies to EVERY primary button in
   the application, forcing width:100% and padding:10px on all of them. Inside an action row
   that makes one button stretch across the entire card while its siblings size to their
   labels. The Conversation button on the Email Review / Triage cards hit this exactly: it
   switches from .btn-outline-primary to .btn-primary when a citizen reply is unread, which is
   why the button only ballooned on cards that had a new reply.
   A .btn-sm is an inline action button by definition — never a full-width form submit — so
   restoring natural sizing for that combination is safe and leaves the login button untouched.
   Padding is handed back to Bootstrap's own size variables instead of a hard-coded value, so
   the button matches its .btn-sm siblings exactly. */
.btn-primary.btn-sm {
    width: auto;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    /* The rule above also sets `border: none`, which leaves these 2px shorter than their
       bordered siblings and 1px out of vertical alignment in an action row. Restore a border
       in the button's own colour so the height matches exactly with no visible seam. */
    border: var(--bs-btn-border-width) solid #1a3e72;
}

    .btn-primary.btn-sm:hover {
        border-color: #0f2a55; /* follow the hover background set above */
    }

/* Resend link */
.resend {
    margin-top: 15px;
    font-size: 0.9rem;
}

    .resend a {
        color: #1a3e72;
        text-decoration: none;
        font-weight: 500;
    }

        .resend a:hover {
            text-decoration: underline;
        }

/* Divider */
hr {
    margin: 20px 0;
    border-top: 1px solid #dee2e6;
}

.task-details {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.header-sub-text {
    color: #fff;
}

.card-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 0.8rem;
    gap: 1rem;
}

.list-card-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

.list-card {
    width: 100%;
    padding: 0.8rem;
    cursor: pointer;
    border-radius: 8px;
    position: relative;
    display: inline-block;
    background-color: #fff;
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

.card-container-second {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
    gap: 1rem;
}
/* Slider css start here */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
    height: 330px;
}

.mySlides {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
    transition: transform 0.8s ease-in-out;
}

    .mySlides.active {
        display: block;
        transform: translateX(0);
    }

    .mySlides.prev {
        display: block;
        transform: translateX(-100%);
    }

    .mySlides img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

/* The dots/bullets/indicators */
.dot-container {
    text-align: center;
    padding: 10px 0;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.isactive {
    background-color: #FD740D;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
/* @media only screen and (max-width: 300px) {
  .text {font-size: 11px}
} */
/* slider css end here */

/* news latter section */
.news-latter-container {
    width: 100%;
    margin-top: 1rem;
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
}

.employee-slider-section {
    width: 65%;
}

.card {
    width: 100%;
    border-radius: 0.8rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.slider {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.slides {
    display: flex;
    width: 100%;
    animation: slide 6s infinite;
}

    .slides img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    33.33% {
        transform: translateX(-100%);
    }

    66.66% {
        transform: translateX(-200%);
    }

    99.99% {
        transform: translateX(-300%);
    }
}

.content {
    padding: 20px;
    text-align: center;
}

    .content h2 {
        margin: 0 0 10px;
        font-size: 1.5rem;
        color: #333;
    }

    .content p {
        font-size: 0.9rem;
        color: #666;
    }

/*  news latter section end  */

/* Project Information start section */
.new-project-container {
    width: 35%;
    background-color: #fff;
    border-radius: 0.8rem;
}

.card-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.image-container {
    width: 100%;
    cursor: pointer;
}

.image-project {
    position: relative;
    align-self: stretch;
    height: auto;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 10px;
    max-width: 100%;
    transition: transform 0.5s ease-in-out;
}

.image-container:hover .image-project {
    transform: scale(1.2);
}

.btn-tag {
    border-radius: 24px;
    color: #1a3e72;
    border: 1px solid #1a3e72;
}

    .btn-tag:hover {
        border-radius: 24px;
        color: #fff;
        background-color: #1a3e72;
    }

.project-name {
    color: #454545;
    font-weight: 700;
    font-size: 0.9rem;
}

.project-details {
    font-size: 0.9rem;
    color: #FD740D;
}
/* Project Information end section */

.side-icon {
    width: 32px;
    border-radius: 0.5rem;
}
/* Event and Update section start */
.Event-Update-container {
    width: 100%;
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.New-Event-container {
    width: 35%;
    background-color: #35008C;
    border-radius: 0.8rem;
}

.Event-latest-container {
    width: 65%;
    border-radius: 0.8rem;
}

.event-poster {
    width: 100%;
}

.event-poster-image {
    width: 100%;
}

.Event-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.Event-update {
    display: flex;
    justify-content: space-between;
}

.Event-date {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.Event-num {
    font-size: 1.5rem;
    color: #FD740D;
    font-weight: 800;
}

.Event-txt {
    font-size: 1.5rem;
    color: #FFFFFF;
}

.mid-box-update {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.Event-head {
    font-size: 2rem;
    color: #FFFFFF;
    font-weight: 700;
}

.Event-details {
    font-size: 2rem;
    color: #FD740D;
    font-weight: 700;
}

.bottom-box-update {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.Event-name {
    font-size: 2rem;
    color: #FD740D;
    font-weight: 900;
}

.Event-name-details {
    font-size: 2rem;
    color: #FFFFFF;
}
/* Event and Update Section End */

/* video container */
#youtube-placeholder iframe {
    width: 100%;
    height: 330px;
    border-radius: 12px;
    object-fit: cover;
}

.iframe-container {
    background: #fbf9ff;
    object-fit: cover;
    border: 10px solid #fbf9ff;
    border-radius: 20px;
    flex: 1; /* Allows it to resize dynamically */
    position: relative;
    overflow: hidden;
    width: 65%;
}

/* news updates section */
.news-update-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
    gap: 1rem;
}

.CBD-IBD-News {
    width: 100%;
    border-radius: 8px;
    padding: 0.8rem;
    background-color: var(--white);
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

.cbd-ibd-heading {
    color: var(--secondary-colors);
    font-size: 1rem;
    padding: 0.1rem 1rem 0.8rem 0.1rem;
    font-weight: var(--font-weight);
}

.list-contatnt {
    display: flex;
    gap: 0.9rem;
    border: 1px solid #c1c1c1;
    border-radius: 0.8rem;
    padding: 0.5rem;
    margin-bottom: 0.8rem;
}
/* .cbd-image-box{
  width: 100%;
} */
.cbd-image {
    width: 100px;
    border-radius: 0.5rem;
}

.cbd-ibd-list-head {
    font-size: 12px;
    font-weight: 700;
}

.cbd-ibd-list-subhead {
    font-size: 12px;
    color: #848484;
}

.cbd-ibd-containt {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cbd-ibd-list-time-date {
    font-size: 12px;
    color: var(--brand-color);
    font-weight: 600;
}
/* news updates section */
.link-card {
    width: 100%;
    padding: 1rem;
    cursor: pointer;
    border-radius: 8px;
    background-color: var(--white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

    .link-card:hover {
        transform: scale(1.05);
    }

.link-containt {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.heading-text {
    color: var(--text-color);
    font-size: 0.8rem;
    font-weight: var(--font-weight);
}

.Event-upcoming-image {
    width: 75%;
    object-fit: cover;
    margin: auto;
}

.Event-image-upcomig {
    width: 100%;
    border-radius: 12px;
}

.card-icons {
    width: 36px;
    height: 36px;
}

.link-btn {
    display: inline-flex;
    border: none;
    cursor: pointer;
    color: var(--brand-color);
    font-weight: var(--font-weight);
    padding: 0.1rem 0.5rem 0rem 0rem;
    justify-content: center;
    align-items: center;
}

.link-card a {
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}

.button-container {
    display: flex;
    cursor: pointer;
    align-items: center;
}

    .button-container a {
        cursor: pointer;
    }

    .button-container i {
        color: var(--brand-color);
        font-weight: 900;
    }
/* .link-btn:hover {
  filter: drop-shadow(0px 8px 8px rgba(236, 126, 43, 0.46));
} */

.task-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
    gap: 1rem;
}

.upcoming-card {
    width: 100%;
    border-radius: 8px;
    background-color: var(--white);
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

.Pending-card {
    width: 100%;
    border-radius: 8px;
    background-color: var(--white);
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

.Approvals-card {
    width: 100%;
    border-radius: 8px;
    background-color: var(--white);
    filter: drop-shadow(1px 10px 20px rgba(18, 61, 101, 0.05));
}

.upcoming-heading {
    color: var(--upcoming-color);
    font-size: 1rem;
    padding: 1rem 1rem 0.3rem 1rem;
    font-weight: var(--font-weight);
    border-radius: 0.5rem 0.5rem 0rem 0rem;
}

.pending-heading {
    color: var(--pending-color);
    font-size: 1rem;
    border-radius: 0.5rem 0.5rem 0rem 0rem;
    padding: 1rem 1rem 0.3rem 1rem;
    font-weight: var(--font-weight);
}

.Approvals-heading {
    color: var(--Approvals-color);
    font-size: 1rem;
    border-radius: 0.5rem 0.5rem 0rem 0rem;
    padding: 1rem 1rem 0.3rem 1rem;
    font-weight: var(--font-weight);
}

.Pending-task {
    color: var(--pending-color);
    font-size: 1rem;
    padding: 1rem 1rem 1rem 1rem;
    font-weight: 500;
}

.task-date-time {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.task-date {
    font-size: 14px;
    font-weight: 700;
    color: #6F39CE;
}

.pending-task-date {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-color)
}

.Approvals-task-date {
    font-size: 14px;
    font-weight: 700;
    color: var(--Approvals-color)
}

.task-time {
    font-size: 12px;
    color: #9d9d9d;
}

.list-item {
    display: flex;
    justify-content: space-around;
    padding: 0.8rem;
    margin: 0.8rem;
    border-top: solid 1px var(--task-list-border);
    border-bottom: solid 1px var(--task-list-border);
    border-left: solid 1px var(--task-list-border);
    border-right: solid 6px var(--upcoming-color);
    border-radius: 0.5rem;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pending-list-item {
    display: flex;
    justify-content: space-around;
    padding: 0.8rem;
    margin: 0.8rem;
    gap: 0.5rem;
    border-top: solid 1px var(--task-list-border);
    border-bottom: solid 1px var(--task-list-border);
    border-left: solid 1px var(--task-list-border);
    border-right: solid 6px var(--pending-color);
    border-radius: 0.5rem;
}

.Approvals-list-item {
    display: flex;
    justify-content: space-around;
    padding: 0.8rem;
    margin: 0.8rem;
    gap: 0.5rem;
    border-top: solid 1px var(--task-list-border);
    border-bottom: solid 1px var(--task-list-border);
    border-left: solid 1px var(--task-list-border);
    border-right: solid 6px var(--Approvals-color);
    border-radius: 0.5rem;
}

.task-name {
    font-weight: var(--font-weight);
    color: var(--text-color);
    font-size: 14px;
}

.task-details {
    font-size: 0.8rem;
    color: var(--text-color);
}
/* Responsive Fix */
@media (max-width: 992px) {
    body {
        overflow: auto; /* allow scroll on small screens */
        height: auto;
    }

    .login-box {
        width: 100%;
    }

    .input-container {
        width: 100%;
    }

    .Page-login-container {
        flex-direction: column; /* stack */
        background-color: #e6f0ff;
    }

    /* md */
    @media(max-width: 768px) {
        .card-container {
            flex-direction: column;
            width: 100%;
        }

        .list-card-container {
            flex-direction: column;
        }

        .card-container-second {
            flex-direction: column;
            width: 100%;
        }

        .Page-login-container {
            flex-direction: column;
        }

        .task-container {
            flex-direction: column;
            width: 100%;
        }

        .news-latter-container {
            flex-direction: column;
        }

        .employee-slider-section {
            width: 100%;
        }

        .Event-latest-container {
            width: 100%;
        }

        .new-project-container {
            width: 100%;
        }

        .Event-Update-container {
            flex-direction: column;
        }

        .New-Event-container {
            width: 100%;
        }

        .news-update-container {
            flex-direction: column;
        }

        .iframe-container {
            width: 100%;
        }

        .Event-image-upcomig {
            width: 100%;
        }

        .Event-upcoming-image {
            width: 100%;
        }

        #RFI-container > div {
            flex: 0 0 48%;
        }
    }
}

@media(max-width: 500px) {
    .Online {
        flex-direction: column;
        gap: 1rem;
    }

    .employee-slider-section {
        height: 140px;
    }

    .slides img {
        height: 140px;
    }

    .sidebar {
        width: 100%;
    }

    .header-wrapper {
        flex-direction: column;
    }

    .sidebar.active {
        position: absolute;
        width: 36px;
        left: 0;
        padding: 0.5rem;
    }

    .menu ul li i {
        font-size: 14px;
    }

    .haeder-title {
        margin-left: 1rem;
    }

    .menu-btn {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        z-index: 1002;
    }
}

@media(max-width: 992px) {
    .menu-btn {
        top: 10px;
        right: 10px;
    }
}

@media(max-width: 500px) {
    .new-card {
        padding: 0.2rem;
    }
}