:root {
    --white_color: #FFFFFF;
    --input_bg: #E6EFFC;
    --primary_color: #214AB0;
    --secondary_color: #BE1911;
    --hover_color: #1802DD;
    --font_dark: #120820;
    --font_dark2: #000000;
    --font_grey: #777777;
    --fs_sm: 14px;
    --fs_md: 16px;
    --fs_lg: 18px;
    --fs_xl: 20px;
    --fw_normal: 400;
    --fw_medium: 500;
    --fw_semibold: 600;
    --fw_bold: 700;
    --fw_xxl: 800;
    --br_sm: 5px;
    --br_md: 10px;
    --primary_font-family: 'Inter', sans-serif;
    --background: white; /* Align with theme naming */
    --text: black;
    --card-bg: #FFFFFF; /* Default for unthemed elements */
    --primary: #214AB0; /* Align with --primary_color */
}

/* Apply Inter font to login form elements */
#loginForm,
#loginForm * {
    font-family: 'Inter', sans-serif !important;
}

    /* Ensure specific ASP.NET controls use Inter font */
    #loginForm .form-control,
    #loginForm .btn,
    #loginForm .form-check-label,
    #loginForm .text-danger,
    #loginForm h2,
    #loginForm a,
    #loginForm label {
        font-family: 'Inter', sans-serif !important;
    }

    /* Optional: Adjust font weights and sizes for consistency */
    #loginForm h2 {
        font-weight: 600; /* Medium-bold for headings */
        font-size: 1.5rem;
    }

    #loginForm .form-control,
    #loginForm .btn {
        font-size: 1rem; /* Standard size for inputs and buttons */
    }

    #loginForm .form-check-label,
    #loginForm a,
    #loginForm .text-danger {
        font-size: 0.875rem; /* Slightly smaller for labels and links */
    }

    #loginForm label {
        font-weight: 400; /* Regular weight for labels */
    }
html body {
    background-color: var(--background);
    font-family: var(--font);
}
html body a{text-decoration: none;}
html body ul{list-style: none;padding: 0;margin: 0;}
body .btn.btn-primary{color: var(--white_color);font-size: var(--fs_md);font-weight: var(--fw_semibold);display: flex;align-items: center;justify-content: center;text-align: center;
background-color: var(--primary_color);padding: 9px 16px;border-radius: 6px;transition: 0.5s;border: 0;line-height: 1.2; cursor:pointer;}
body .btn.btn-primary:hover{background-color: var(--hover_color);}
.login_screen,.login_screen .container,.login_wrapper{min-height: 100vh;position: relative;}
.login_screen{background-image: url(../Images/qaastic/qaastic_login_bg);width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;}
.login_wrapper{display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 2rem 0;}
.login_img{width: 100%;max-width: 250px;margin: 0 0 30px 0;}
.login_img img{object-fit: contain;width: 100%;}
.login_box{background-color: var(--white_color);padding: 36px 27px;border-radius: var(--br_md);width: 100%;max-width: 400px;min-width: 400px;position: relative;overflow: hidden;display: flex;
    flex-direction: column;}
.login_box::before{content: "";background-color: var(--secondary_color);width: 50px;height: 10px;top: -5px;left: 30px;position: absolute;border-radius: 4px;}
.login_box .btn.btn.btn-primary{padding: 18px 16px;font-weight: var(--fw_bold);}
.login_box h2{font-size: 24px;font-weight: var(--fw_bold);color: var(--font_dark2);margin: 0 0 1.5rem 0;}
.login_box .form-control{font-size: var(--fs_md);font-weight: var(--fw_bold);color: var(--font_grey);background-color: var(--input_bg);border: 0;border-radius: 8px;
min-height: 60px;margin: 12px 0 6px 0; padding-left:1rem;}
    .login_box .text-danger{font-size:14px; color:orangered;}
    .login_box .form-control:focus {
        box-shadow: 0 0 0 .15rem #214ab07a;
    }
.login_box .form-check label{color: var(--font_grey);font-size: var(--fs_md);font-weight: var(--fw_bold);margin: 0;}
    .login_box .form-check {
        margin: 0.2rem 0 1.2rem 0;
        padding-left: 0;
    }

body .form-check-input:checked{background-color: var(--primary_color);border-color: var(--primary_color);}
body .form-check-input:focus{box-shadow: none;}
.sidebar_btn{display: none;}

/* ////////////// header*/
header .navbar-brand{max-width: 158px;}
header .navbar-brand img{object-fit: contain;}
/* header .navbar{padding: 10px 0;background-color: var(--white_color);border-bottom: 1px solid #DEDEDE;} */
/* ////////////// */
.main{display: flex;}
/* .sidebar{background-color: var(--white_color);height: calc(100vh - 72px);width: 100%;max-width: 345px;} */
.sidebar_top_heading{display: flex;justify-content: space-between;gap: 5px;align-items: center;margin: 1rem 0 0.5rem 1rem;}
.sidebar_top_heading h4{color: var(--font_grey);font-size: var(--fs_lg);font-weight: var(--fw_bold);margin: 0;}
.sidebar_top_heading a{width: 35px;height: 35px;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: 0.5s;}
.sidebar_top_heading a:hover{background-color: #FCEBED;}
.sidebar_top_heading svg path{transition: 0.5s;}
.sidebar_top_heading a:hover svg path{stroke: var(--secondary_color);}
/*.qh_list{height: 84%;background-color: var(--white_color);padding: 1rem;overflow-y: auto;display: flex;flex-direction: column;padding-top:0;scrollbar-width: thin;
    scrollbar-color: var(--primary_color) #E6EFFC;min-height: 130px;padding-right: 5px;} */
.qh_list {
    height: 84%;
    background-color: var(--card-bg);
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--primary_color) #E6EFFC;
    min-height: 130px;
    padding-right: 5px;
}
.qh_list li a{font-size: var(--fs_sm);color: var(--font_grey);font-weight: var(--fw_normal);transition: 0.5s;border-radius: 6px;padding: 8px 10px 8px 0px;display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}
.qh_list li:hover a{background-color: #E8E7E9;}

/* .td_list{height: 84%;background-color: var(--white_color);padding: 1rem;overflow-y: auto;display: flex;flex-direction: column;padding-top: 0;
    scrollbar-width: thin;scrollbar-color: var(--primary_color) #E6EFFC;min-height: 130px;padding-right: 5px;} */
.td_list {
    height: 84%;
    background-color: var(--card-bg);
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--primary_color) #E6EFFC;
    min-height: 130px;
    padding-right: 5px;
}
.td_list li a{transition: 0.5s all;border-radius: 6px;padding: 6px 10px 6px 0;display: flex;align-items: center;justify-content: space-between;gap: 10px;width: 100%;}
.td_list li a:hover{background-color: #E8E7E9;}
.td_list_inner{display: flex;align-items: center;justify-content: space-between;gap: 5px;}
.td_list li h6{font-size: var(--fs_md);color: var(--font_dark);font-weight: var(--fw_bold);margin: 0;}
.td_list li small{font-size: var(--fs_sm);color: var(--font_grey);font-weight: var(--fw_normal);}
.td_list li .badge_danger{color: var(--secondary_color);font-size: var(--fs_sm);background-color: #F8E8E7;border-radius: 8px;display: flex;align-items: center;justify-content: center;
padding: 2.5px 6.5px;}
.sidebar_top_ques_col,.sidebar_top_database_col{min-height: 300px;position: relative;height: 50%;background: var(--white_color);padding: 0 10px 0 0;}
.sidebar_top_ques_col:after{content: "";position: absolute;bottom: -30px;z-index: 1;background-color: #DEDEDE;width: 100px;height: 1px;right: 0;left: 0;margin: 0 auto;}
.sidebar_inner{height: 100%;width: 100%;display: flex;flex-direction: column;justify-content: space-between;gap: 20px;padding: 0px 0 5px 0;}

.main_body {
    padding: 20px;
       width: calc(100vw - 345px);
       margin-left: auto;
       padding: 20px 50px;
       height: 100%;
   }

html body textarea.form-control:focus {
    box-shadow: 0 0 0 .15rem #214ab07a;
}

.ques_box {
    max-width: 810px;
    margin: 0 auto 10px;
    padding: 12px;
    background-color: var(--white_color);
    border-radius: var(--br_md);
    width: 100%;
}

.ques_box textarea {
    width: 100%;
    height: 60px;
    resize: none;
    background-color: var(--input_bg);
    border-radius: var(--br_md);
    border: 0;
    padding: 18px;
    font-size: var(--fs_md);
    color: var(--font_dark);
    font-weight: var(--fw_normal);
   }

.ques_box textarea::placeholder{
    font-size: var(--fs_md);
    color: var(--font_dark);
    font-weight: var(--fw_normal);

}

.ques_boxinput {
    width: 100%;
    box-sizing: border-box; /* Include padding and borders in width */
    white-space: normal; /* Allow text to wrap at the right edge */
    border-radius: var(--br_md);
    padding: 10px 10px 0 10px; /* Top: 10px, Right: 10px, Bottom: 0, Left: 10px */
    resize: vertical;
    overflow: auto; /* Ensure scrollbars appear if content overflows */
    overflow-wrap: break-word; /* Ensure long words break correctly */
    background-color: var(--input_bg);
    border: 0;
    font-size: var(--fs_md);
    color: var(--font_dark);
    font-weight: var(--fw_normal);
}

/* Override any conflicting form-control styles */
.form-control.ques_boxinput {
    background-color: ghostwhite !important;
    max-width: 100%; /* Prevent max-width constraints */
    min-width: 100%; /* Ensure minimum width is full */
    display: block; /* Ensure block-level display */
}
    /* Optional: Style the resize handle for better visibility */
    .ques_boxinput::-webkit-resizer {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="var(--font_dark, #333)" d="M10 2L2 10M6 2L2 6"/></svg>') no-repeat bottom right;
        background-size: 12px 12px;
        width: 16px;
        height: 16px;
    }

/* For Firefox, which doesn't support ::-webkit-resizer */
@supports (-moz-appearance: none) {
    .ques_boxinput {
        /* Firefox uses a default resize handle, but we can hint at it */
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="var(--font_dark, #333)" d="M10 2L2 10M6 2L2 6"/></svg>') no-repeat bottom right;
        background-size: 12px 12px;
    }
}

        .ques_boxinput::placeholder {
            font-size: var(--fs_md);
            color: var(--font_dark);
            font-weight: var(--fw_normal);
        }

.ans_box {
    background-color: var(--white_color);
    border-radius: var(--br_md);
    padding: 12px;
    max-width: 810px;
    margin: 0 auto;
    position: relative;
}

.ans_box_inner {
    width: 100%;
    display: block; /* Ensure block behavior for <span> */
    background-color: ghostwhite; /* Match inline style */
    padding: 10px 10px 10px 10px; /* Match ques_boxinput padding */
    min-height: 300px; /* From original ans_box_inner for textarea */
    border-radius: 5px; /* From original ans_box_inner */
    border: 0;
    font-size: var(--fs_md);
    font-weight: var(--fw_normal);
    display: block;
    color: var(--font_dark);
    overflow: auto;
    white-space: normal; /* Allow text to wrap at the right edge */
    overflow-wrap: break-word; /* Ensure long words break correctly */
}

    .ans_box_inner:focus {
        box-shadow: none; /* Match original for textarea */
    }

    .ans_box_inner::-webkit-scrollbar {
        width: 10px; /* Match typical GridView scrollbar width */
    }

    .ans_box_inner::-webkit-scrollbar-track {
        background: var(--input_bg, #f5f5f5); /* Match background of ans_box_inner */
        border-radius: var(--br_md, 10px); /* Consistent with element's border-radius */
    }

    .ans_box_inner::-webkit-scrollbar-thumb {
        background: var(--primary, #214ab0); /* Match theme's primary color */
        border-radius: var(--br_md, 10px); /* Rounded thumb for modern look */
    }

        .ans_box_inner::-webkit-scrollbar-thumb:hover {
            background: #1a3c8c; /* Slightly darker on hover, derived from --primary */
        }

/* Firefox scrollbar styling */
.ans_box_inner {
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    scrollbar-color: var(--primary, #214ab0) var(--input_bg, #f5f5f5); /* Thumb and track colors */
}


.ques_textarea{position: relative;}
.textarea_inner_btn{display: flex;align-items: center;gap: 23px;position: absolute;right: 12px;top: 60px;}
.textarea_inner_btn svg path{transition: 0.5s all;}
.textarea_inner_btn svg:hover path{stroke: var(--hover_color);}
.text_checks{display: flex;align-items: center;gap: 15px;margin: 10px 0 0 5px;}
.text_checks label{font-size: var(--fs_md);color: var(--font_grey);font-weight: var(--fw_normal);}
.ans_box{background-color: var(--white_color);border-radius: var(--br_md);padding: 12px;max-width: 810px;margin: 0 auto;position: relative;}
/*.ans_box textarea.ans_box_inner{background-color: #FCF3F3;padding: 20px;min-height: 430px;border-radius: 5px;border: 0;font-size: var(--fs_md);font-weight: var(--fw_normal);
color: var(--font_dark);} Replaced by ans_box style June 13,2025 jlc */
.ans_box textarea.ans_box_inner:focus{box-shadow: none;}
.ans_box::before{content: "";position: absolute;top: 15px;left: -45px;background-image: url(../Images/qaastic/qicon.svg);background-repeat: no-repeat;
    background-size: contain;width: 36px;height: 36px; display:none;}

.textarea_inner_btn .file-input__input {width: 0.1px;height: 0.1px;opacity: 0;overflow: hidden;position: absolute;z-index: -1;}
.textarea_inner_btn .file-input__label {cursor: pointer;}
.textarea_inner_btn .file-input{display: flex;}

.sidebar_top_database_col .input-group{padding: 0px 0 15px 0;width: 100%;}
.file_upload_box span{display:block; font-size:12px; color:orangered; width:100%;}

/* Ensure the body-content container takes at least the full viewport height */
.container.body-content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    padding-top: 20px !important;
    padding-bottom: var(--footer-height, 40px); /* Space for fixed footer */
    padding-left: 250px; /* Clear fixed sidebar (width: 250px) */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    background-color: var(--main-content-bg);
    color: var(--main-content-text);
}

/* Main content area should take available space */
asp|ContentPlaceHolder#MainContent {
    flex: 1 0 auto; /* Grow to fill available space */
    padding-left: 250px; /* Adjust to match sidebar width + margin */
}


@media screen and (max-width: 991px) {
    .sidebar {
        transition: 0.5s all ease;
        position: fixed;
        z-index: 99;
        overflow-x: visible;
        padding-left: 0 !important;
        width: 250px;
    }

    .sidebar.sidebar_expand {
        transform: translateX(-345px);
        transition: 0.5s all ease;
    }
    

    .col-md-5.p-3 {
        padding-left: 0 !important;
    }

    asp|ContentPlaceHolder#MainContent {
        margin-left: 0; /* Remove margin when sidebar is collapsed */
    }

    .col-md-8.p-3 {
        padding-left: 0 !important; /* Remove Bootstrap column padding */
    }
    .main_body{width: 100%;transition: 0.5s all ease;padding: 20px;}
    .main_body.main_body_expand{width: 100%;transition: 0.5s all ease;}
    .sidebar_btn{position: fixed;bottom: 25px;right: 25px;display: flex;z-index: 99;background-color: var(--primary_color);width: 60px;height: 60px;border-radius: 50%;
    align-items: center;justify-content: center;}
    .sidebar_btn img{width: 50%;}
    .ans_box::before{top: 25px;left: -13px;}
    
}

@media screen and (max-width: 575px){
    :root{
        --fs_sm: 13px;
        --fs_md: 15px;
        --fs_lg: 17px;
    }
    .login_box{padding: 20px;min-width: 100%;}
    .login_box::before{left: 20px;}
    .login_box h2{font-size: var(--fs_xl);}
    .main_body{padding: 15px;}
    body .ques_box textarea{min-height: 120px;padding: 15px;padding-bottom: 50px;}
    body .ques_boxinput {
        min-height: 120px;
        padding: 10px;
        padding-bottom: 50px;
    }
    .textarea_inner_btn {
        top: 75px;
        gap: 15px;
    }
    .ans_box textarea.ans_box_inner {padding: 15px;}
    .ans_box::before{top: 20px;}
}

.sidebar_top_heading h4 span {
    color: var(--font_grey);
    font-size: var(--fs_lg);
    font-weight: var(--fw_bold);
    margin: 0;
}
.st_icon {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.94922 5.5H4.61589H17.9492' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M16.2826 5.49996V17.1666C16.2826 17.6087 16.107 18.0326 15.7944 18.3451C15.4819 18.6577 15.0579 18.8333 14.6159 18.8333H6.28257C5.84054 18.8333 5.41662 18.6577 5.10406 18.3451C4.7915 18.0326 4.61591 17.6087 4.61591 17.1666V5.49996M7.11591 5.49996V3.83329C7.11591 3.39127 7.2915 2.96734 7.60406 2.65478C7.91662 2.34222 8.34055 2.16663 8.78257 2.16663H12.1159C12.5579 2.16663 12.9819 2.34222 13.2944 2.65478C13.607 2.96734 13.7826 3.39127 13.7826 3.83329V5.49996' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M8.78253 9.66663V14.6666' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M12.1159 9.66663V14.6666' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    border: 0;
    background-color: transparent;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}
    .st_icon:hover {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.94922 5.5H4.61589H17.9492' stroke='%23be1911' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M16.2826 5.49996V17.1666C16.2826 17.6087 16.107 18.0326 15.7944 18.3451C15.4819 18.6577 15.0579 18.8333 14.6159 18.8333H6.28257C5.84054 18.8333 5.41662 18.6577 5.10406 18.3451C4.7915 18.0326 4.61591 17.6087 4.61591 17.1666V5.49996M7.11591 5.49996V3.83329C7.11591 3.39127 7.2915 2.96734 7.60406 2.65478C7.91662 2.34222 8.34055 2.16663 8.78257 2.16663H12.1159C12.5579 2.16663 12.9819 2.34222 13.2944 2.65478C13.607 2.96734 13.7826 3.39127 13.7826 3.83329V5.49996' stroke='%23be1911' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M8.78253 9.66663V14.6666' stroke='%23be1911' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M12.1159 9.66663V14.6666' stroke='%23be1911' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
    }
.st_icon:hover{
    background-color: #FCEBED;
}
.choose_icon {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.8893 11.05L12.6993 20.24C11.5734 21.3659 10.0464 21.9984 8.45426 21.9984C6.86208 21.9984 5.33511 21.3659 4.20926 20.24C3.08342 19.1142 2.45093 17.5872 2.45093 15.995C2.45093 14.4029 3.08342 12.8759 4.20926 11.75L13.3993 2.56004C14.1498 1.80948 15.1678 1.38782 16.2293 1.38782C17.2907 1.38782 18.3087 1.80948 19.0593 2.56004C19.8098 3.3106 20.2315 4.32859 20.2315 5.39004C20.2315 6.4515 19.8098 7.46948 19.0593 8.22004L9.85926 17.41C9.48398 17.7853 8.97499 17.9962 8.44426 17.9962C7.91354 17.9962 7.40455 17.7853 7.02926 17.41C6.65398 17.0348 6.44315 16.5258 6.44315 15.995C6.44315 15.4643 6.65398 14.9553 7.02926 14.58L15.5193 6.10004' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    border: 0;
    background-color: transparent;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}
.icon_btn {
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    border: 0;
    background-color: transparent;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}
    .icon_btn:hover {
        background-color: rgba(0,0,0,0.05);
    }
    .doc_file_icon {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6666 1.66663H4.99998C4.55795 1.66663 4.13403 1.84222 3.82147 2.15478C3.50891 2.46734 3.33331 2.89127 3.33331 3.33329V16.6666C3.33331 17.1087 3.50891 17.5326 3.82147 17.8451C4.13403 18.1577 4.55795 18.3333 4.99998 18.3333H15C15.442 18.3333 15.8659 18.1577 16.1785 17.8451C16.4911 17.5326 16.6666 17.1087 16.6666 16.6666V6.66663L11.6666 1.66663Z' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.6667 1.66663V6.66663H16.6667' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.3334 10.8334H6.66669' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.3334 14.1666H6.66669' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.33335 7.5H7.50002H6.66669' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    }

    .choose_icon:hover {
        background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.8893 11.05L12.6993 20.24C11.5734 21.3659 10.0464 21.9984 8.45426 21.9984C6.86208 21.9984 5.33511 21.3659 4.20926 20.24C3.08342 19.1142 2.45093 17.5872 2.45093 15.995C2.45093 14.4029 3.08342 12.8759 4.20926 11.75L13.3993 2.56004C14.1498 1.80948 15.1678 1.38782 16.2293 1.38782C17.2907 1.38782 18.3087 1.80948 19.0593 2.56004C19.8098 3.3106 20.2315 4.32859 20.2315 5.39004C20.2315 6.4515 19.8098 7.46948 19.0593 8.22004L9.85926 17.41C9.48398 17.7853 8.97499 17.9962 8.44426 17.9962C7.91354 17.9962 7.40455 17.7853 7.02926 17.41C6.65398 17.0348 6.44315 16.5258 6.44315 15.995C6.44315 15.4643 6.65398 14.9553 7.02926 14.58L15.5193 6.10004' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
    }

    .choose_icon:hover {
        background-color: #FCEBED;
    }

.sidebar_inner .list_box_select {
    border: 0;
    width: 100% !important;
    height: 84%;
    background-color: var(--card-bg);
    padding: 0.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--primary_color) #E6EFFC;
    min-height: 130px;
    padding-right: 5px;
}
    .sidebar_inner .list_box_select:focus-visible{outline: 0;border: 0;}
    .container.body-content {
        width: 100%;
        padding: 0;
        max-width: 100%;overflow-x: hidden;
    }

.list_box_select option {
    font-size: var(--fs_sm);
    color: var(--font_grey);
    font-weight: var(--fw_normal);
    transition: 0.5s;
    border-radius: 6px;
    padding: 8px 10px 8px 8px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 2px 0;
}
select.internal-list-box option:checked {
    background-color: var(--primary_color);
}
select.list_box_select option:hover {
    background-color: #E8E7E9;
}
.text_checks .form-check{padding: 0;}
    .text_checks .form-check input{
        width: 16px;height: 16px;border-radius: 4px;
    }
.text_checks .form-check input:checked {
    background-color: var(--primary_color);
    border-color: var(--primary_color);
}
.text_checks .form-check-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.text_checks .form-check input {
    accent-color: var(--primary_color);
}
.textarea_inner_btn .file-input {
    max-width: 220px;
}

.upload_svg{position: relative;}
.upload_svg:after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.8893 11.05L12.6993 20.24C11.5734 21.3659 10.0464 21.9984 8.45426 21.9984C6.86208 21.9984 5.33511 21.3659 4.20926 20.24C3.08342 19.1142 2.45093 17.5872 2.45093 15.995C2.45093 14.4029 3.08342 12.8759 4.20926 11.75L13.3993 2.56004C14.1498 1.80948 15.1678 1.38782 16.2293 1.38782C17.2907 1.38782 18.3087 1.80948 19.0593 2.56004C19.8098 3.3106 20.2315 4.32859 20.2315 5.39004C20.2315 6.4515 19.8098 7.46948 19.0593 8.22004L9.85926 17.41C9.48398 17.7853 8.97499 17.9962 8.44426 17.9962C7.91354 17.9962 7.40455 17.7853 7.02926 17.41C6.65398 17.0348 6.44315 16.5258 6.44315 15.995C6.44315 15.4643 6.65398 14.9553 7.02926 14.58L15.5193 6.10004' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    right: 0;
    background-position: center;
}
.data_table {
    width: 100%;
    border: 0;
    width: 100% !important;
    height: 62%;
    /*background-color: var(--white_color);*/
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--primary_color) #E6EFFC;
    min-height: 130px;
}
.data_table table {
    width: 100%;
    border: 0;
}

    .data_table table tr th {
        font-size: var(--fs_sm);
        color: var(--font_grey);
        padding-bottom: 10px;
        padding-left: 5px
    }
    .data_table table tr th:nth-child(1) {
        padding-left: 0px !important;
    }
 
    .data_table table tr {
        vertical-align: middle;
    }
    .data_table table tr td {
        margin-bottom: 2px !important;
        margin-top: 2px !important;
    }
    .data_table table tr td:nth-child(1) {
        font-size: var(--fs_sm);
        color: var(--font_dark);
        font-weight: var(--fw_bold);
        margin: 0;
        padding-left: 0px !important;
    }
    .data_table table tr td:nth-child(2) {
        font-size: var(--fs_sm);
        color: var(--font_grey);
        font-weight: var(--fw_normal);
        padding-left: 5px !important;text-align:center;
    }
    .data_table table tr td:last-child {
        color: var(--secondary_color);
        font-size: 11px;white-space: nowrap;
        background-color: #F8E8E7;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2.5px 6.5px;
        border-radius: 0;
        margin: 0 0 0 5px;
        border-radius: 6px;
        border: 0;
    }
.hidden {
    display: none;
}
/* //////////////17-6 history screen Start*/
.btn.btn-primary-outline {
    color: var(--primary_color);
    font-size: var(--fs_md);
    font-weight: var(--fw_semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--white_color);
    padding: 9px 16px;
    border-radius: 6px;
    transition: 0.5s;
    border: 1px solid var(--primary_color);
    line-height: 1.2;
}

/* Override for btn-primary-outline */
.theme-toggle-btn.btn-primary-outline {
    background-color: transparent; /* Ensure transparent */
    border: none;
    width: 80px; /* Ensure consistent size */
    height: 45px;
    padding: 8px;
}

body svg path {
    transition: 0.5s all ease;
}

.btn.btn-primary-outline:hover {
    background-color: var(--hover_color);
}

header .nav-item .btn-primary-outline {
    width: 38px;
    height: 38px;
    padding: 5px;
}

.btn.btn-primary-outline:hover svg path {
    fill: #fff;
}

/* Header navigation */
header .navbar-nav {
    display: flex;
    align-items: center;
    gap: 10px; /* Existing gap between nav items */
}

header .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
    header .nav-item .btn-primary-outline {
        width: 38px;
        height: 38px;
        padding: 5px;
    }

    /* Theme selector nav item */
    header .nav-item.dropdown {
        margin-right: 15px; /* Add padding between theme selector and username */
    }

    /* Ensure username label aligns properly */
    header .nav-item a[href="../default.aspx"] {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }


.history_main {
    padding: 30px 0 60px 0;
}

    .history_main .container {
        max-width: 1200px;
    }

.history_main_topheading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px 0;
}

    .history_main_topheading h2 {
        color: var(--text) !important; /* Apply theme text color */
        font-size: var(--fs_xl);
        line-height: 1.2;
        margin: 0 0 0px 0;
        font-weight: var(--fw_bold);
    }

    .history_main_topheading svg {
        margin: -3px 0 0 0;
        transition: 0.5s;
    }

        .history_main_topheading svg:hover {
            transform: translateX(-3px);
        }

    /* Style for the SVG arrow in the back link */
    .history_main_topheading a svg path {
        stroke: var(--text) !important; /* Apply theme text color to SVG stroke */
    }

    /* Optional: Hover effect for the arrow */
    .history_main_topheading a:hover svg path {
        stroke: var(--primary) !important; /* Change to primary color on hover for feedback */
    }

.card {
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: var(--br_md);
    padding: 12px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto 20px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

        .card.card-body {
            background-color: transparent;
            border: 1px solid var(--primary);
            border-radius: var(--br_md);
            padding: 12px;
            box-sizing: border-box;
            max-width: 100%;
            margin: 0 auto 20px;
            display: flex;
            align-items: flex-end;
            gap: 10px;
        }

.history_topcard {
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: var(--br_md);
    padding: 12px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto 20px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.hist_tc_formcontrol {
    flex: 1; /* Allow controls to grow and share space */
    min-width: 200px; /* Prevent controls from becoming too narrow */
    width: auto; /* Override width: 100% */
}

    .hist_tc_formcontrol.d-flex {
        display: flex;
        align-items: center; /* Vertically center label and textbox */
        margin-bottom: 1rem; /* Space between form controls */
    }

    .hist_tc_formcontrol .col-form-label {
        margin-bottom: 0; /* Remove default margin for inline layout */
        white-space: nowrap; /* Prevent label wrapping */
        flex: 0 0 auto; /* Labels take only needed space */
    }

    .hist_tc_formcontrol .form-control {
        flex: 1; /* Expand to fill available space */
        max-width: 300px; /* Cap width to prevent overflow */
        min-height: 38px; /* Consistent with master stylesheet */
        margin-left: 0.5rem; /* Space from label */
        box-sizing: border-box; /* Include padding in width */
    }

    .hist_tc_formcontrol.justify-content-end {
        justify-content: flex-end; /* Right-align button and validator */
        gap: 0.5rem; /* Space between validator and button */
    }
    
.history_topcard label {
    color: var(--font_dark);
    font-weight: var(--fw_normal);
    font-size: var(--fs_md);
    margin: 0 0 4px 0;
}

/* History top card row */
.hist_tc_row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    justify-content: flex-start; /* Align controls to the left */
    gap: 10px; /* Match history_topcard gap */
    width: 100%;
    align-items: flex-end; /* Match history_topcard alignment */
    margin-bottom: 8px; /* Reduced from 12px */
}

/* Clear icon styling */
.clear-icon {
    width: 28px;
    height: auto;
    margin-right: 0.5rem; /* Space between icon and button */
    cursor: pointer;
}

/* Adjust history_topcard for rows */
.history_topcard {
    flex-direction: column; /* Stack rows vertically */
    align-items: stretch; /* Ensure rows take full width */
    gap: 1rem; /* Space between rows */
}

body input.form-control {
    width: 100%;
    background-color: var(--input_bg);
    border-radius: 8px;
    border: 0;
    font-size: var(--fs_md);
    color: var(--font_dark);
    min-height: 38px;
    font-weight: var(--fw_normal);
    width: 100%;
}

body input.form-control::placeholder {
    font-size: var(--font_grey);
}

body .btn.btn-primary {
    border-radius: 8px;
    min-height: 38px;
}

html body .form-control:focus {
    box-shadow: 0 0 0 .15rem #214ab07a;
}

.ques_grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.hist_ques_box {
    background-color: var(--white_color);
    border-radius: var(--br_md);
    padding: 12px;
    width: 100%;
    max-width: 500px;
}

    .hist_ques_box h2 {
        color: var(--font_dark2);
        font-size: var(--fs_lg);
        line-height: 1.2;
        margin: 0 0 10px 0;
        font-weight: var(--fw_bold);
        display:none;
    }

    .hist_ques_box ul li a {
        font-size: var(--fs_sm);
        color: var(--font_grey);
        font-weight: var(--fw_normal);
        transition: 0.5s;
        border-radius: 6px;
        padding: 8px 10px 8px 8px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .hist_ques_box ul li a:hover {
            background-color: #E8E7E9;
        }

    .hist_ques_box .divide_line {
        position: relative;
        border-top: 1px solid #F8E8E7;
        margin-top: 15px;
        margin-bottom: 15px;
    }

        .hist_ques_box .divide_line .badge_danger {
            position: absolute;
            color: var(--secondary_color);
            font-size: var(--fs_sm);
            font-weight: var(--fw_normal);
            background-color: #F8E8E7;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2px 6px;
            top: -15px;
            width: fit-content;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

.hist_ques_box_inner .divHistoryBox select {
    height: calc(100vh - 580px);
    min-height: 350px;
    width: 100%;
    border: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #E6EFFC;
}

.ans_box span.ans_box_inner {
    background-color: var(--input_bg); /* Match txtInput */
    padding: 20px;
    min-height: 300px; /* Compact starting height, matches Default.aspx */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds max height */
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid var(--primary);
    font-size: var(--fs_md);
    font-weight: var(--fw_normal);
    color: var(--text); /* Theme-aware text color */
    display: block;
    width: 100%;
    overflow: auto;
}

.ans_box textarea.ans_box_inner {
    background-color: var(--input_bg); /* Match txtInput */
    padding: 20px;
    min-height: 300px;
    border-radius: 5px;
    border: 1px solid var(--primary); /* Update to match */
    font-size: var(--fs_md);
    font-weight: var(--fw_normal);
    color: var(--font_dark);
}

.detailedans_box {
    width: 100%;
    max-width: 800px;
    padding: 12px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 0;
    background-color: transparent !important;
    border-radius: var(--br_md);
    overflow: visible !important;
}

    .detailedans_box h2 {
        margin: 0 0 8px 0;
        padding: 0;
        font-size: 24px;
        line-height: 1.0;
        color: var(--text, #000);
        position: relative;
        z-index: 10;
    }

.detailedans_box_inner {
    width: 100%;
    max-width: 800px;
    margin: 0 0 0 0;
    margin-top: 4px !important; 
    padding: 0;
    box-sizing: border-box;
    align-self: flex-start;
    position: relative;
    z-index: 0;
}

.detailedans_box_text {
    width: 100%;
    max-width: 800px;
    margin: 0;
    padding: 0;
    text-align: left;
}

.detailedans_box_text textarea {
    background-color: transparent;
    border: none;
}

.detailedans_box_text svg {
    max-width: 30px;
}

    .detailedans_box_text span#txtAnswer {
        width: 100% !important; /* Override inline width: 650px */
        max-width: 100%;
        height: 400px;
        overflow-y: auto;
        display: block;
        text-align: left;
        background-color: ghostwhite;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px;
    }

    .detailedans_box_text p {
        color: var(--secondary_color);
        font-size: var(--fs_sm);
        font-weight: var(--fw_normal);
    }

#MainContent_txtAnswer {
    width: 100%;
    max-width: 800px;
    height: 380px;
    overflow-y: auto;
    display: block;
    text-align: left;
    background-color: ghostwhite;
    border: 1px solid var(--primary);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
    margin: 0;
    color: black;
    position: relative;
    z-index: 0;
}

    /* WebKit scrollbar styles */
    #MainContent_txtAnswer::-webkit-scrollbar {
        width: 12px;
    }

    #MainContent_txtAnswer::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
    }

    #MainContent_txtAnswer::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 10px;
        border: 3px solid ghostwhite;
    }

        #MainContent_txtAnswer::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

/* Firefox scrollbar styles */
#MainContent_txtAnswer {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

    #MainContent_txtAnswer * {
        max-width: 100% !important;
        word-wrap: break-word !important;
        box-sizing: border-box !important;
    }

.hist_footer {
    background-color: #120820;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
}

    .hist_footer p {
        color: var(--white_color);
        font-size: 12px;
        font-weight: var(--fw_normal);
        margin: 0;
    }
.white_card {
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: var(--br_md);
    padding: 12px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto 20px;
}

.theme-label {
    color: var(--text) !important; /* Your theme color */
    font-size: 18px;
    font-weight: bold;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: calc(var(--navbar-height, 56px) + 1px) !important;
    height: calc(100vh - var(--navbar-height, 56px) - var(--footer-height, 40px) - 1px) !important;
    left: 0;
    width: 250px;    
    color: var(--text);
    padding: 20px 10px !important; /* Ensure consistent padding */
    transition: transform 0.3s ease-in-out;
    z-index: 1200;
    overflow-y: auto;
    display: flex !important; /* Enforce flexbox */
    flex-direction: column !important;
    justify-content: flex-start !important; /* Align items at the top */
    align-items: flex-start !important; /* Ensure horizontal alignment */
    gap: 5px !important; /* Consistent spacing between items */
    background: var(--content-bg) !important;
    border-right: 0px solid var(--primary);
    margin: 0 !important; /* Remove any external margins */
}

    /* Second thin line using pseudo-element */
    .sidebar::after {
        content: '';
        position: fixed;
        top: var(--navbar-height, 56px);
        left: calc(225px - 5px);
        width: 0px;
        height: calc(100vh - var(--navbar-height, 56px) - var(--status-bar-height, 60px));
        background-color: var(--primary);
        z-index: 1201;
    }

/* Sidebar toggle */
.sidebar-toggle {
    position: relative !important; /* Change to relative to stay in flow */
    margin-bottom: 10px !important; /* Space below toggle */
    padding: 10px !important;
    width: 100% !important; /* Full width to align with items */
    display: flex !important;
    justify-content: flex-end !important; /* Align triangle to the right */
}

/* Reduce spacing between menu items */
.sidebar > * {
    margin: 0 0 5px 0 !important; /* Consistent spacing, no top margin */
}

/* Sidebar links and items */
.sidebar a, .sidebar .sidebar-item {
    color: var(--text) !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: background-color 0.3s !important;
    width: 100% !important; /* Ensure full width */
}

/* Ensure lines are visible when sidebar is collapsed */
.sidebar.collapsed {
    border-right: 1px solid var(--primary); /* Maintain first line */
}

    .sidebar.collapsed::after {
        left: calc(225px * 0.25 - 2px); /* Adjust for 75% collapse (translateX(-75%)) */
    }

    /* Sidebar links */
    .sidebar a, .sidebar .sidebar-toggle {
        color: var(--text) !important;
        padding: 10px;
        display: flex;
        align-items: center;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        transition: background-color 0.3s;
    }

        .sidebar a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .sidebar a i {
            font-size: 18px;
            min-width: 30px;
            text-align: center;
            flex-shrink: 0;
        }

        .sidebar a span {
            margin-left: 10px;
        }

    /* Collapsed sidebar */
    .sidebar.collapsed {
        transform: translateX(-75%); /* Hide sidebar off-screen */        
    }

        .sidebar.collapsed a span {
            opacity: 0;
            visibility: hidden;
        }

        .sidebar.collapsed a i {
            margin: 0;
        }

        .sidebar.collapsed .sub-menu,
        .sidebar.collapsed .admin-sub-menu {
            display: none !important; /* Prevent dropdowns in collapsed state */
        }

        .sidebar.collapsed .dropdown-toggle {
            pointer-events: none; /* Disable clicks on toggles */
            opacity: 0.6; /* Visual cue */
        }

/* Sidebar toggle */
.sidebar-toggle {
    position: absolute;
    top: 10px; /* Centers vertically; adjust if you want a specific vertical position */
    right: 25px; /* Positions the triangle on the right side with some padding */
    left: auto; /* Explicitly unset any left positioning */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 15px; /* Triangle pointing left when sidebar is open */
    border-color: transparent transparent transparent #ffffff; /* White triangle */
    cursor: pointer;
    transition: border-color 0.3s ease;
    z-index: 1100; /* Ensures toggle is above other sidebar content */
}

sidebar.collapsed .sidebar-toggle {
    border-width: 10px 15px 10px 0; /* Triangle pointing right when sidebar is collapsed */
    border-color: transparent #ffffff transparent transparent;
}
.sidebar-toggle:hover {
    border-color: transparent transparent transparent #cccccc; /* Hover effect for open state */
}

.sidebar.collapsed .sidebar-toggle:hover {
    border-color: transparent #cccccc transparent transparent; /* Hover effect for collapsed state */
}

/* Ensure sidebar items don’t overlap the toggle */
.sidebar > *:not(.sidebar-toggle) {
    margin-top: 30px; /* Adds space below the toggle to prevent overlap with menu items */
}

/* Dropdown sections */
.sidebar-item {
    margin: 0 0 5px 0; /* Match .sidebar > * margin, reducing from 10px 0 */
    display: flex;
    flex-direction: column;
}

/* Ensure sidebar gap remains consistent */
.sidebar {
    gap: 5px !important; /* Reinforce the 5px gap between all items */
}

.section-toggle, .admin-toggle {
    display: flex;
    align-items: center;
    padding: 10px;
    transition: background-color 0.3s;
}

    .section-toggle:hover, .admin-toggle:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .section-toggle .toggle-icon, .admin-toggle .toggle-icon {
        margin-left: auto;
        transition: transform 0.3s ease;
    }

    .section-toggle[aria-expanded="true"] .toggle-icon,
    .admin-toggle[aria-expanded="true"] .toggle-icon {
        transform: rotate(180deg);
    }

/* Dropdown menus */
.sub-menu, .admin-sub-menu {
    display: none; /* Hidden by default */
    flex-direction: column;
    padding: 0;
    margin: 0;
    background: var(--card-bg);
    border: none;
    box-shadow: none;
    position: static; /* Stay in normal flow */
    width: 100%;
    z-index: auto;
    opacity: 1; /* Ensure visible when shown */
    list-style: none; /* Remove default list styling */
}


    .sub-menu.show, .admin-sub-menu.show {
        display: flex; /* Show when active */
    }

/* Sidebar toggle triangle */
.sidebar-toggle-triangle {
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    margin-left: 0.5em;
    vertical-align: 0.255em;
    cursor: pointer;
    position: relative;
    color: inherit; /* Inherit theme text color */
}

    .sidebar-toggle-triangle::after {
        content: "";
        display: block;
        border-top: 0.3em solid currentColor;
        border-right: 0.3em solid transparent;
        border-left: 0.3em solid transparent;
        transition: transform 0.2s ease-in-out;
    }

/* Rotate triangle when sidebar is collapsed (adjust based on your JavaScript toggle logic) */
.sidebar.collapsed .sidebar-toggle-triangle::after {
    transform: rotate(90deg); /* Rotates to point right when collapsed */
}

/* Ensure sidebar toggle is positioned correctly */
.sidebar-toggle-triangle {
    padding: 10px;
    background-color: transparent;
}

/* Match Bootstrap dropdown-toggle triangle styling */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid currentColor; /* Use currentColor for consistency */
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

/* Optional: Hover effect for consistency */
.sidebar-toggle-triangle:hover::after,
.dropdown-toggle:hover::after {
    border-top-color: #ccc; /* Lighter color on hover */
}

.sidebar.collapsed ~ asp|ContentPlaceHolder#MainContent {
    padding-left: 0; /* Remove padding when sidebar is collapsed */
}

/* End of Sidebar styling*/

/* Status bar styling */
.status-bar {
    flex-shrink: 0; /* Prevent shrinking */
    width: 100%;
    background-color: #e9ecef; /* Optional: distinct background for visibility */
    padding: 10px;
    box-sizing: border-box;
    position: relative; /* Ensure it stays in flow but at the bottom */
}

    /* Ensure progress group and status boxes are styled appropriately */
    .status-bar .status-boxes {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }

    .status-bar .progress-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.master-status-bar-container {
    width: 100%;
    height: 10px;
    background-color: #dee2e6;
    border-radius: 5px;
    overflow: hidden;
}

.master-status-bar {
    height: 100%;
    width: 0%;
    background-color: #007bff;
    transition: width 0.3s ease-in-out;
}   

/*End status bar styling */

/* Theme selector button */
.theme-selector-container.dropdown {
    position: relative;
    display: inline-block; /* Ensure container fits content */
}

/* Theme toggle button */
.theme-toggle-btn {
    display: flex !important; /* Override any conflicting display */
    align-items: center;
    justify-content: center;
    width: 120px !important; /* Increased width to accommodate icons */
    height: 50px !important; /* Consistent height */
    padding: 12px !important; /* Ensure padding surrounds icons */
    border-radius: 8px !important;
    background-color: transparent !important;
    border: none !important; /* Visible border */
    color: var(--text) !important;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    position: relative; /* Ensure button contains absolutely positioned children */
    overflow: visible; /* Prevent clipping of icons */
    cursor: pointer;
}

    .theme-toggle-btn:hover {
        background: var(--primary);
        color: white;
        border-color: var(--primary) !important; /* Maintain border on hover */
    }

    /* Hide dropdown arrow for theme toggle button */
    .theme-toggle-btn.dropdown-toggle::after {
        display: none !important; /* Remove default Bootstrap arrow */
    }

    /* Override conflicting btn-primary-outline styles */
    .theme-toggle-btn.btn-primary-outline {
        background-color: transparent !important;
        border: none !important;
        width: 120px !important; /* Match theme-toggle-btn */
        height: 50px !important;
        padding: 12px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }


/* Theme icon label */
.theme-icon-label {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced from 3px for tighter spacing */
    color: inherit;
    margin: 0; /* Remove any margins */
    padding: 0; /* Remove any padding */
}

    .theme-icon-label .fa-moon,
    .theme-icon-label .fa-sun {
        font-size: 16px;
    }

    .theme-icon-label .ellipses {
        font-size: 18px;
        font-weight: bold;
    }

.theme-menu {
    z-index: 1000; /* Ensure dropdown appears above other elements */
}

#themeMenu.dropdown-menu {
    background: #F8F8FF !important; /* Ghostwhite, opaque */
    opacity: 1; /* Ensure fully opaque */
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 120px;
    z-index: 2000; /* Above navbar */
    padding: 5px 0; /* Consistent padding */
}

#themeMenu .dropdown-item {
    color: #000000 !important; /* Force black text color */
    font-size: 14px;
    padding: 8px 15px;
    transition: background-color 0.3s, color 0.3s;
}

    #themeMenu .dropdown-item:hover {
        background: var(--primary); /* Keep theme-specific primary color for hover background */
        color: #FFFFFF !important; /* White text on hover for contrast */
    }

/* Prevent theme-specific overrides */
[data-theme="light"] #themeMenu.dropdown-menu,
[data-theme="dark"] #themeMenu.dropdown-menu,
[data-theme="Nature"] #themeMenu.dropdown-menu,
[data-theme="Sunset"] #themeMenu.dropdown-menu,
[data-theme="Neon"] #themeMenu.dropdown-menu,
[data-theme="Vintage"] #themeMenu.dropdown-menu,
[data-theme="Gizmo"] #themeMenu.dropdown-menu {
    background: #F8F8FF !important; /* Consistent ghostwhite */
    border-color: var(--primary-color);
}

/* Dropdown items (ensure readable text) */
#themeMenu .dropdown-item {
    color: var(--text);
    font-size: 14px;
    padding: 8px 15px;
    transition: background-color 0.3s, color 0.3s;
}

    #themeMenu .dropdown-item:hover {
        background: var(--primary);
        color: var(--white_color);
    }

/* Override Bootstrap's dropdown-menu for sidebar */
.sidebar .dropdown-menu {
    position: static !important; /* Override absolute positioning */
    float: none !important; /* Remove float */
    margin: 0 !important; /* Remove margins */
    padding: 0 !important; /* Remove padding */
    border: none !important; /* Remove border */
    box-shadow: none !important; /* Remove shadow */
    min-width: auto !important; /* Remove min-width */
    background: transparent !important; /* Inherit sidebar background */
    transform: none !important; /* Remove transforms */
}

/* Generic Section Styling for Tree Structure */
.sidebar-item {
    margin: 10px 0;
}

.section-toggle {
    display: flex;
    align-items: center;
    padding: 10px;
    transition: background-color 0.3s;
}

    .section-toggle:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .section-toggle .toggle-icon {
        margin-left: auto;
        transition: transform 0.3s ease;
    }

    .section-toggle[aria-expanded="true"] .toggle-icon {
        transform: rotate(180deg);
    }

    .section-toggle i {
        margin-right: 2px; /* Reduce spacing after icon */
    }

    .section-toggle span {
        margin-left: 2px; /* Reduce spacing before label */
    }

.sub-menu {
    margin-left: 16px; /* Match .admin-sub-menu */
    padding-left: 0; /* Remove extra indentation */
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.sub-item {
    padding: 8px 10px;
    display: flex;
    align-items: center;
}

    .sub-item span {
        font-size: 13px;
        margin-left: 8px;
        line-height: 1.1;
    }

    .sub-item i {
        font-size: 12px;
        min-width: 24px;
        margin-right: 8px;
    }

/* Add new styles for User Settings sub-items */
/* Styles for User Settings sub-items */
.user-settings-section {
    margin: 10px 0; /* Match .admin-section */
    padding: 0; /* Ensure no extra padding */
}

.sidebar .user-settings-sub-item {
    padding: 8px 10px; /* Match .admin-sub-item for vertical spacing */
    display: flex;
    align-items: center;
    font-size: 14px !important;
    margin-left: 8px !important; /* Consistent with .admin-sub-item */
    line-height: 1.1 !important;
}

    .sidebar .user-settings-sub-item span {
        font-size: 14px; /* Match .sidebar .admin-sub-item span */
        margin-left: 0;
        line-height: 1.1; /* Match .sub-item for tight spacing */
    }

    .sidebar .user-settings-sub-item i {
        font-size: 11.5px; /* Slightly smaller to match .admin-sub-item i effective size */
        min-width: 24px; /* Match .sidebar .admin-sub-item i */
        margin-right: 8px;
    }

/* Ensure sub-menu is hidden by default */
.sub-menu[style*="display: none"] {
    max-height: 0;
    opacity: 0;
}

.sub-menu[style*="display: block"] {
    max-height: 500px; /* Adjust based on content */
    opacity: 1;
}


/* Icon and text alignment */
.sidebar-item a i,
.sidebar-item a span {
    vertical-align: middle;
}

.sidebar-item a i {
    margin-right: 10px;
}

/* Admin-specific classes (unchanged for compatibility) */
.admin-section {
    margin: 10px 0;
}

.admin-toggle {
    display: flex;
    align-items: center;
    padding: 10px;
    transition: background-color 0.3s;
}

    .admin-toggle:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .admin-toggle .toggle-icon {
        margin-left: auto;
        transition: transform 0.3s ease;
    }

    .admin-toggle[aria-expanded="true"] .toggle-icon {
        transform: rotate(180deg);
    }

    .admin-toggle i {
        margin-right: 2px; /* Match .section-toggle i */
    }

    .admin-toggle span {
        margin-left: 2px; /* Match .section-toggle span */
    }

.admin-sub-menu {
    padding-left: 0; /* Match .sub-menu */
    margin-left: 16px; /* Match .sub-menu */
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.admin-sub-item {
    padding: 8px 10px; /* Match .sidebar .user-settings-sub-item */
    display: flex; /* Match .user-settings-sub-item */
    align-items: center;
    font-size: 14px !important; /* Match user-settings-sub-item */
    margin-left: 8px !important; /* Consistent with user-settings-sub-item */
    line-height: 1.1 !important; /* Consistent with user-settings-sub-item */
}

    .admin-sub-item i {
        font-size: 11.5px; /* Match .sidebar .user-settings-sub-item i */
        margin-right: 8px;
    }

.admin-sub-menu[style*="display: none"] {
    max-height: 0;
    opacity: 0;
}

.admin-sub-menu[style*="display: block"] {
    max-height: 500px;
    opacity: 1;
}

sidebar .user-settings-sub-item i {
    font-size: 11.5px;
    min-width: 24px;
    margin-right: 8px;
}

.sidebar .admin-sub-item i {
    font-size: 11.5px;
    min-width: 24px;
    margin-right: 8px;
}

/* End Sidebar */

/* Gridview */

    .gridview-scroll-container {
    height: auto; /* Match old version */
    min-height: 400px; /* Match old version */
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    border:none; /* Uses the --primary variable for consistency */
    background: transparent;
    color: var(--text);
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

    .gridview-scroll-container::-webkit-scrollbar {
        width: 6px;
    }

    .gridview-scroll-container::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 4px;
    }

    .gridview-scroll-container::-webkit-scrollbar-thumb {
        background-color: #3399FF;
        border-radius: 4px;
    }

        .gridview-scroll-container::-webkit-scrollbar-thumb:hover {
            background: #FFD700;
        }

.gridview-modern.table {
    background: transparent;
    border: none;
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs_md, 16px);
    color: var(--text);
}

    .gridview-modern.table tr,
    .gridview-modern.table td,
    .gridview-modern.table th {
        background: transparent !important;
        color: var(--text-color);
        border: none;
    }

.gridview-modern {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    width: 100%;
    background: var(--background);
    border-collapse: collapse; /* Prevent layout issues */
}

    .gridview-modern th {
        background-color: #1a2a6c !important;
        color: var(--text);
        font-weight: 600;
        padding: 10px !important;
        border-bottom: 2px solid #0f1a44;
        text-align: left;
        font-size: 14px;
        display: none; /* Hide headers to match old version */
    }

    .gridview-modern td {
        padding: 10px !important; /* Match old version */
        vertical-align: middle;
        border-bottom: none;
        font-size: 14px;
        color: var(--text);
        background: transparent !important;
        text-align: left;
    }

    .gridview-modern tr {
        background: transparent !important;
        cursor: pointer;
    }

        .gridview-modern tr:hover {
            background: rgba(0, 51, 160, 0.5) !important;
            transition: background-color 0.2s;
        }

            .gridview-modern tr:hover td {
                background: transparent !important;
            }

    .gridview-modern .date-column {
        width: 100px; /* Match old version CSS */
        text-align: left;
        font-weight: normal;
        padding: 4px 8px; /* Match old version */
        color: var(--text);
    }

    .gridview-modern .question-column {
        max-width: 300px; /* Match old version */
        word-wrap: break-word;
        padding: 4px 8px; /* Match old version */
        color: var(--text);
        width: auto; /* Allow question column to take remaining space */
        min-width: 200px; /* Ensure minimum readability */
    }

        .gridview-modern .question-column .fw-bold {
            font-weight: 600;
            color: var(--text);
        }

        .gridview-modern .question-column .text-muted {
            color: var(--text);
            font-size: 12px;
        }

    .gridview-modern .hidden-column {
        display: none;
    }

    .gridview-modern .date-column {
        width: 70px; /* Slightly reduce for mobile */
    }

   
    * Ensure Question text is bold in selected row */
    gridview-modern .selected-row .question-column .theme-text {
        font-weight: var(--fw_bold); /* 700, matches fw-bold */
    }

.short-gridview-scroll-container {
    height: auto; 
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    border: none;
    background: transparent;
    color: var(--text);
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
    position: relative; /* Provide positioning context for sticky header */
}

    .short-gridview-scroll-container::-webkit-scrollbar {
        width: 6px;
    }

    .short-gridview-scroll-container::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 4px;
    }

    .short-gridview-scroll-container::-webkit-scrollbar-thumb {
        background-color: #3399FF;
        border-radius: 4px;
    }

        .short-gridview-scroll-container::-webkit-scrollbar-thumb:hover {
            background: #FFD700;
        }

.short-gridview-modern.table {
    background: transparent;
    border: none;
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs_md, 16px);
    color: var(--text);
    table-layout: fixed;
}

    .short-gridview-modern.table tr,
    .short-gridview-modern.table td,
    .short-gridview-modern.table th {
        background: transparent !important;
        color: var(--text);
        border: none;
        box-sizing: border-box;
    }

.short-gridview-modern {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    width: 100%;
    background: var(--background);
    border-collapse: collapse; /* Prevent layout issues */
}

    .short-gridview-modern th {
        background-color: #1a2a6c !important;
        color: var(--text);
        font-weight: 600;
        padding: 10px !important;
        border-bottom: 2px solid #0f1a44;
        text-align: left;
        font-size: 14px;
        display: table-cell !important; /* Show headers */
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }

    .short-gridview-modern td {
        padding: 10px !important; /* Match old version */
        vertical-align: middle;
        border-bottom: none;
        font-size: 14px;
        color: var(--text);
        background: transparent !important;
        text-align: left;
    }

    .short-gridview-modern tr {
        background: transparent !important;
        cursor: pointer;
    }

        .short-gridview-modern tr:hover {
            background: rgba(0, 51, 160, 0.5) !important;
            transition: background-color 0.2s;
        }

            .short-gridview-modern tr:hover td {
                background: transparent !important;
            }

    .short-gridview-modern .date-column {
        width: 100px; /* Match old version CSS */
        text-align: left;
        font-weight: normal;
        padding: 4px 8px; /* Match old version */
        color: var(--text);
    }

    .short-gridview-modern .question-column {
        max-width: 300px; /* Match old version */
        word-wrap: break-word;
        padding: 4px 8px; /* Match old version */
        color: var(--text);
        width: auto; /* Allow question column to take remaining space */
        min-width: 200px; /* Ensure minimum readability */
    }

        .short-gridview-modern .question-column .fw-bold {
            font-weight: 600;
            color: var(--text);
        }

        .short-gridview-modern .question-column .text-muted {
            color: var(--text);
            font-size: 12px;
        }

    .short-gridview-modern .hidden-column {
        display: none;
    }

    .short-gridview-modern .date-column {
        width: 70px; /* Slightly reduce for mobile */
    }

    .short-gridview-modern .filename-column {
        padding-right: 20px !important; /* Increase right padding to add space between Filename and FileUploadedDate */
    }


* Ensure Question text is bold in selected row */
gridview-modern .selected-row .question-column .theme-text {
    font-weight: var(--fw_bold); /* 700, matches fw-bold */
}

    /* End Gridview */


/* Themes*/

/* Define theme-specific variables and styles */


[data-theme="light"] {
    --background: #F5F5F5;
    --text: #000000;
    --primary: #007BFF;
    --card-bg: #F8F8FF; /* Ghostwhite for sidebar and navbar */
    --content-bg: #F5F5F5;
    --accent: #666666;
    --font: 'Inter', sans-serif;
    --main-content-bg: #E9ECEF; /* Cool gray for main content */
    --main-content-text: #000000;
}

    [data-theme="light"] .content-wrapper,
    [data-theme="light"] .content,
    [data-theme="light"] .container.body-content {
        background: var(--main-content-bg) !important; /* Ensure override */
        color: var(--main-content-text);
        border-radius: 8px;
        padding: 20px;
    }

    [data-theme="light"] .sidebar,
    [data-theme="light"] .navbar {
        background: var(--card-bg) !important;
        color: var(--main-content-text);
    }

    [data-theme="light"] .navbar {
        border-bottom: 1px solid var(--primary) !important;
    }

    [data-theme="light"] .sidebar {
        border: 1px solid var(--primary) !important;
        border-top: none !important; /* Remove top border to prevent merge with navbar */
    }

    [data-theme="light"] .question-interaction-panel,
    [data-theme="light"] .middle-panel,
    [data-theme="light"] .middle-panel-inner,
    [data-theme="light"] .history_main .container,
    [data-theme="light"] .history_main .row {
        background: transparent !important;
        color: var(--main-content-text);
    }

    [data-theme="light"] .status-bar {
        background-color: #D3D8DD !important; /* Subtle gray-blue */
        color: var(--main-content-text) !important;
        border-radius: 0 0 8px 8px;
    }

        [data-theme="light"] .status-bar .status-box {
            background-color: #C4C9CE !important; /* Darker gray-blue */
            color: var(--main-content-text) !important;
        }

    [data-theme="light"] .gridview-modern,
    [data-theme="light"] .gridview-modern tr,
    [data-theme="light"] .gridview-modern td,
    [data-theme="light"] .gridview-modern th {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="light"] .gridview-modern th {
            background-color: var(--card-bg) !important;
            color: var(--main-content-text) !important;
        }

        [data-theme="light"] .gridview-modern tr:nth-child(even) {
            background: var(--main-content-bg) !important; /* Match main content */
        }

        [data-theme="light"] .gridview-modern tr:hover,
        [data-theme="light"] .short-gridview-modern tr:hover {
            background: #E0E0E0 !important;
        }

    [data-theme="light"] .ans_box {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="light"] .ans_box .form-control {
            background: ghostwhite !important;
            color: var(--main-content-text) !important;
            border: 1px solid var(--accent);
        }

        [data-theme="light"] .ans_box h2,
        [data-theme="light"] .ans_box label,
        [data-theme="light"] .parameters-panel label {
            color: var(--main-content-text) !important;
        }

    [data-theme="light"] .form-control,
    [data-theme="light"] .full-width-control,
    [data-theme="light"] .short-textbox {
        background: var(--card-bg) !important;
        color: var(--main-content-text);
        border: 1px solid var(--accent);
    }

        [data-theme="light"] .form-control:hover,
        [data-theme="light"] .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
        }

    [data-theme="light"] .btn-primary,
    [data-theme="light"] .middle-panel button {
        background-color: var(--primary);
        color: white;
    }

        [data-theme="light"] .btn-primary:hover,
        [data-theme="light"] .middle-panel button:hover {
            background-color: #0056B3;
            color: white;
        }

        [data-theme="light"] .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
        }

    [data-theme="light"] .context-menu {
        background: var(--card-bg);
        color: var(--main-content-text);
        border: 1px solid var(--accent);
    }

        [data-theme="light"] .context-menu li {
            color: var(--main-content-text);
        }

            [data-theme="light"] .context-menu li:hover {
                background: var(--main-content-bg);
            }

    [data-theme="light"] .gridview-scroll-container::-webkit-scrollbar-thumb,
    [data-theme="light"] .question-interaction-panel::-webkit-scrollbar-thumb {
        background-color: var(--primary);
    }

    [data-theme="light"] .gridview-scroll-container::-webkit-scrollbar-track,
    [data-theme="light"] .question-interaction-panel::-webkit-scrollbar-track {
        background: var(--main-content-bg); /* Match main content */
    }

    [data-theme="light"] .divider,
    [data-theme="light"] .question-interaction-panel .divider {
        background-color: var(--primary) !important;
    }

    [data-theme="light"] .login-panel {
        background: var(--card-bg);
        color: var(--main-content-text);
    }

    [data-theme="light"] .dropdown-menu {
        background: var(--card-bg);
        border-color: var(--primary);
        color: var(--main-content-text);
    }

    [data-theme="light"] .dropdown-item {
        color: var(--main-content-text);
    }

[data-theme="dark"] {
    --background: #001f4d;
    --text: #E0E0E0;
    --primary: #66b0ff;
    --card-bg: #1e1e1e;
    --content-bg: #001f4d;
    --accent: #999999;
    --font: 'Inter', sans-serif;
    --main-content-bg: linear-gradient(135deg, #4B0082, #000080); /* Diagonal gradient */
    --main-content-text: #E0E0E0;
}

    /* Remove global override and move to theme-specific -- Updated Oct 23 (JLC)*/
    [data-theme="dark"] .ques_box .ques_boxinput,
    [data-theme="dark"] .form-control.ques_boxinput
    [data-theme="dark"] .custom-select select,
    [data-theme="dark"] .custom-select select option
    [data-theme="dark"] .ans_box .form-control,
    [data-theme="dark"] .ans_box_inner {
        color: #000000 !important; /* Use neon text (#00FFCC) */
        -webkit-text-fill-color: #000000 !important; /* Counter iPhone contrast */
        -webkit-font-smoothing: antialiased; /* Improve iPhone rendering */
        text-rendering: optimizeSpeed; /* Prevent legibility tweaks */
        background: ghostwhite !important;
    }

    [data-theme="dark"] .content-wrapper,
    [data-theme="dark"] .content,
    [data-theme="dark"] .container.body-content {
        background: var(--main-content-bg); /* Purple to navy blue */
        color: var(--main-content-text);
    }

    [data-theme="dark"] .sidebar {
        background: linear-gradient(to bottom, #001f4d, #000080);
        color: var(--main-content-text);
    }

    [data-theme="dark"] .navbar {
        background: #001f4d !important;
        color: var(--main-content-text);
    }
    [data-theme="dark"] asp|ContentPlaceHolder#MainContent {
        background: var(--main-content-bg);
        color: var(--main-content-text);
    }

    [data-theme="dark"] .col-md-4,
    [data-theme="dark"] .col-md-8 {
        background: transparent; /* Ensure columns inherit gradient */
    }

    [data-theme="dark"] .question-interaction-panel,
    [data-theme="dark"] .middle-panel,
    [data-theme="dark"] .middle-panel-inner,
    [data-theme="dark"] .history_main .container,
    [data-theme="dark"] .history_main .row {
        background: transparent !important;
        color: var(--main-content-text);
    }

    [data-theme="dark"] asp|ContentPlaceHolder#MainContent {
        background: var(--main-content-bg);
        color: var(--main-content-text);
    }

    [data-theme="dark"] .status-bar {
        background-color: #C8C8C8 !important;
        color: #E0E0E0 !important;
    }

        [data-theme="dark"] .status-bar .status-box {
            background-color: #B5B5B5 !important;
            color: #E0E0E0 !important;
        }

    [data-theme="dark"] .gridview-modern,
    [data-theme="dark"] .gridview-modern tr,
    [data-theme="dark"] .gridview-modern td,
    [data-theme="dark"] .gridview-modern th {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="dark"] .gridview-modern th {
            background-color: #2A2A2A !important;
            color: #E0E0E0 !important;
        }

    [data-theme="dark"] .gridview-modern tr:hover
    [data-theme="dark"] .short-gridview-modern tr:hover {
        background: var(--primary-light) !important;
    }

    [data-theme="dark"] .ans_box {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="dark"] .ans_box .form-control {
            background: ghostwhite !important;
            color: #E0E0E0 !important;
        }

        [data-theme="dark"] .ans_box h2,
        [data-theme="dark"] .ans_box label,
        [data-theme="dark"] .parameters-panel label {
            color: #E0E0E0 !important;
        }

    [data-theme="dark"] .form-control,
    [data-theme="dark"] .full-width-control,
    [data-theme="dark"] .short-textbox {
        background: ghostwhite !important;
        color: var(--main-content-text); 
        border: 1px solid #66b0ff;
    }

    [data-theme="dark"] .btn-primary,
    [data-theme="dark"] .middle-panel button {
        background-color: var(--primary);
        color: #121212;
    }

        [data-theme="dark"] .btn-primary:hover,
        [data-theme="dark"] .middle-panel button:hover {
            background-color: #339FFF;
            color: #121212;
        }

    [data-theme="dark"] .context-menu {
        background: #1e1e1e;
        color: #E0E0E0;
        border: 1px solid #66b0ff;
    }

        [data-theme="dark"] .context-menu li {
            color: #E0E0E0;
        }

            [data-theme="dark"] .context-menu li:hover {
                background: #2A2A2A;
            }

    [data-theme="dark"] .gridview-scroll-container::-webkit-scrollbar-thumb,
    [data-theme="dark"] .question-interaction-panel::-webkit-scrollbar-thumb {
        background-color: #66b0ff;
    }

    [data-theme="dark"] .gridview-scroll-container::-webkit-scrollbar-track,
    [data-theme="dark"] .question-interaction-panel::-webkit-scrollbar-track {
        background: #001f4d;
    }

    [data-theme="dark"] .divider,
    [data-theme="dark"] .question-interaction-panel .divider {
        background-color: #66b0ff !important;
    }

    [data-theme="dark"] .login-panel {
        background: #1e1e1e;
        color: #E0E0E0;
    }

    [data-theme="dark"] .dropdown-menu {
        background: #1e1e1e;
        border-color: #66b0ff;
        color: var(--main-content-text);
    }

    [data-theme="dark"] .dropdown-item {
        color: #ffffff;
    }

[data-theme="Nature"] {
    --background: #F0FFF4; /* Mint green */
    --text: #1A3C34; /* Deep teal */
    --text-secondary: #4C6B5F; /* Muted teal */
    --primary: #48BB78; /* Emerald green */
    --primary-dark: #2F855A; /* Darker green */
    --primary-light: #E6FFFA; /* Light mint */
    --card-bg: #F7FAFC; /* Off-white for sidebar and navbar */
    --content-bg: #F0FFF4; /* Matches background */
    --accent: #D69E2E; /* Golden yellow */
    --font: 'Inter', sans-serif; /* Body */
    --font-header: 'Inter', sans-serif; /* Headers */
    --main-content-bg: #C6E8D2; /* Soft green for main content */
    --main-content-text: #1A3C34; /* Deep teal */
    --status-bar-bg: #C6F6D5; /* Light green */
}

    [data-theme="Nature"] .content-wrapper,
    [data-theme="Nature"] .content,
    [data-theme="Nature"] .container.body-content {
        background: var(--main-content-bg) !important; /* Ensure override */
        color: var(--main-content-text);
        border-radius: 8px;
        padding: 20px;
        font-family: var(--font);
    }

    [data-theme="Nature"] .sidebar,
    [data-theme="Nature"] .navbar {
        background: var(--card-bg) !important;
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

    [data-theme="Nature"] .question-interaction-panel,
    [data-theme="Nature"] .middle-panel,
    [data-theme="Nature"] .middle-panel-inner,
    [data-theme="Nature"] .history_main .container,
    [data-theme="Nature"] .history_main .row {
        background: transparent !important;
        color: var(--main-content-text);
    }

    [data-theme="Nature"] .status-bar {
        background-color: var(--status-bar-bg) !important;
        color: var(--main-content-text) !important;
        border-radius: 0 0 8px 8px;
    }

        [data-theme="Nature"] .status-bar .status-box {
            background-color: #9AE6B4 !important; /* Darker green */
            color: var(--main-content-text) !important;
        }

    [data-theme="Nature"] .gridview-modern,
    [data-theme="Nature"] .gridview-modern tr,
    [data-theme="Nature"] .gridview-modern td,
    [data-theme="Nature"] .gridview-modern th {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Nature"] .gridview-modern th {
            background-color: var(--status-bar-bg) !important;
            color: var(--main-content-text) !important;
        }

        [data-theme="Nature"] .gridview-modern tr:nth-child(even) {
            background: var(--main-content-bg) !important; /* Match main content */
        }

        [data-theme="Nature"] .gridview-modern tr:hover
        [data-theme="Nature"] .short-gridview-modern tr:hover {
            background: var(--primary-light) !important;
        }

    [data-theme="Nature"] .ans_box {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Nature"] .ans_box .form-control {
            background: ghostwhite !important;
            color: #2E7D32 !important;
            border: 1px solid #A0AEC0;
        }

        [data-theme="Nature"] .ans_box h2,
        [data-theme="Nature"] .ans_box label,
        [data-theme="Nature"] .parameters-panel label {
            color: var(--text-secondary) !important;
            font-family: var(--font-header);
        }

    [data-theme="Nature"] .form-control,
    [data-theme="Nature"] .full-width-control,
    [data-theme="Nature"] .short-textbox {
        background: ghostwhite !important;
        color: #2E7D32;
        border: 1px solid #81C784;
    }

        [data-theme="Nature"] .form-control:hover,
        [data-theme="Nature"] .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(72,187,120,0.3);
        }

    [data-theme="Nature"] .btn-primary,
    [data-theme="Nature"] .middle-panel button {
        background-color: var(--primary);
        color: white;
        font-family: var(--font-header);
    }

        [data-theme="Nature"] .btn-primary:hover,
        [data-theme="Nature"] .middle-panel button:hover {
            background-color: var(--primary-dark);
            color: white;
        }

        [data-theme="Nature"] .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(72,187,120,0.3);
        }

    [data-theme="Nature"] .context-menu {
        background: var(--card-bg);
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

        [data-theme="Nature"] .context-menu li {
            color: var(--main-content-text);
        }

            [data-theme="Nature"] .context-menu li:hover {
                background: var(--primary-light);
            }

    [data-theme="Nature"] .gridview-scroll-container::-webkit-scrollbar-thumb,
    [data-theme="Nature"] .question-interaction-panel::-webkit-scrollbar-thumb {
        background-color: var(--primary);
    }

    [data-theme="Nature"] .gridview-scroll-container::-webkit-scrollbar-track,
    [data-theme="Nature"] .question-interaction-panel::-webkit-scrollbar-track {
        background: var(--main-content-bg); /* Match main content */
    }

    [data-theme="Nature"] .divider,
    [data-theme="Nature"] .question-interaction-panel .divider {
        background-color: var(--primary) !important;
    }

    [data-theme="Nature"] .login-panel {
        background: var(--card-bg);
        color: var(--main-content-text);
    }

    [data-theme="Nature"] .dropdown-menu {
        background: var(--card-bg);
        border-color: var(--primary);
        color: var(--main-content-text);
    }

    [data-theme="Nature"] .dropdown-item {
        color: var(--main-content-text);
    }

        [data-theme="Nature"] .dropdown-item:hover {
            background: var(--primary-light);
        }

    [data-theme="Nature"] h2 {
        font-family: var(--font-header);
        font-size: 18px;
    }

    [data-theme="Nature"] .theme-label {
        font-size: 16px;
        font-weight: bold;
        color: var(--text-secondary);
    }


[data-theme="Sunset"] {
    --background: #FEF5E7; /* Warm cream */
    --text: #5A2E2A; /* Deep reddish-brown */
    --text-secondary: #7B4F4A; /* Muted brown */
    --primary: #F56565; /* Coral red */
    --primary-dark: #C53030; /* Darker red */
    --primary-light: #FFF5F5; /* Light pink */
    --card-bg: #FFF5F5; /* Light pink for sidebar and navbar */
    --content-bg: #FEF5E7; /* Matches background */
    --accent: #F6E05E; /* Bright yellow */
    --font: 'Inter', sans-serif;
    --font-header: 'Inter', sans-serif;
    --main-content-bg: #FBD38D; /* Soft orange for main content */
    --main-content-text: #5A2E2A; /* Deep reddish-brown */
    --status-bar-bg: #FED7D7; /* Soft coral */
}

    [data-theme="Sunset"] .content-wrapper,
    [data-theme="Sunset"] .content,
    [data-theme="Sunset"] .container.body-content {
        background: var(--main-content-bg) !important; /* Ensure override */
        color: var(--main-content-text);
        border-radius: 8px;
        padding: 20px;
    }

    [data-theme="Sunset"] .sidebar,
    [data-theme="Sunset"] .navbar {
        background: var(--card-bg) !important;
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

    [data-theme="Sunset"] .question-interaction-panel,
    [data-theme="Sunset"] .middle-panel,
    [data-theme="Sunset"] .middle-panel-inner,
    [data-theme="Sunset"] .history_main .container,
    [data-theme="Sunset"] .history_main .row {
        background: transparent !important;
        color: var(--main-content-text);
    }

    [data-theme="Sunset"] .status-bar {
        background-color: var(--status-bar-bg) !important;
        color: var(--main-content-text) !important;
        border-radius: 0 0 8px 8px;
    }

        [data-theme="Sunset"] .status-bar .status-box {
            background-color: #FEB2B2 !important; /* Darker coral */
            color: var(--main-content-text) !important;
        }

    [data-theme="Sunset"] .gridview-modern,
    [data-theme="Sunset"] .gridview-modern tr,
    [data-theme="Sunset"] .gridview-modern td,
    [data-theme="Sunset"] .gridview-modern th {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Sunset"] .gridview-modern th {
            background-color: var(--status-bar-bg) !important;
            color: var(--main-content-text) !important;
        }

        [data-theme="Sunset"] .gridview-modern tr:nth-child(even) {
            background: var(--main-content-bg) !important; /* Match main content */
        }

        [data-theme="Sunset"] .gridview-modern tr:hover,
        [data-theme="Sunset"] .short-gridview-modern tr:hover {
            background: var(--primary-light) !important;
        }

    [data-theme="Sunset"] .ans_box {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Sunset"] .ans_box .form-control {
            background: ghostwhite !important;
            color: var(--main-content-text) !important;
            border: 1px solid var(--primary);
        }

        [data-theme="Sunset"] .ans_box h2,
        [data-theme="Sunset"] .ans_box label,
        [data-theme="Sunset"] .parameters-panel label {
            color: var(--text-secondary) !important;
            font-family: var(--font-header);
        }

    [data-theme="Sunset"] .form-control,
    [data-theme="Sunset"] .full-width-control,
    [data-theme="Sunset"] .short-textbox {
        background: var(--card-bg) !important; /* Light pink for consistency */
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

        [data-theme="Sunset"] .form-control:hover,
        [data-theme="Sunset"] .form-control:focus {
            border-color: var(--primary-dark);
            box-shadow: 0 0 0 3px rgba(245,101,101,0.3);
        }

    [data-theme="Sunset"] .btn-primary,
    [data-theme="Sunset"] .middle-panel button {
        background-color: var(--primary);
        color: white;
        font-family: var(--font-header);
    }

        [data-theme="Sunset"] .btn-primary:hover,
        [data-theme="Sunset"] .middle-panel button:hover {
            background-color: var(--primary-dark);
            color: white;
        }

        [data-theme="Sunset"] .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(245,101,101,0.3);
        }

    [data-theme="Sunset"] .context-menu {
        background: var(--card-bg);
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

        [data-theme="Sunset"] .context-menu li {
            color: var(--main-content-text);
        }

            [data-theme="Sunset"] .context-menu li:hover {
                background: var(--primary-light);
            }

    [data-theme="Sunset"] .gridview-scroll-container::-webkit-scrollbar-thumb,
    [data-theme="Sunset"] .question-interaction-panel::-webkit-scrollbar-thumb {
        background-color: var(--primary);
    }

    [data-theme="Sunset"] .gridview-scroll-container::-webkit-scrollbar-track,
    [data-theme="Sunset"] .question-interaction-panel::-webkit-scrollbar-track {
        background: var(--main-content-bg); /* Match main content */
    }

    [data-theme="Sunset"] .divider,
    [data-theme="Sunset"] .question-interaction-panel .divider {
        background-color: var(--primary) !important;
    }

    [data-theme="Sunset"] .login-panel {
        background: var(--card-bg);
        color: var(--main-content-text);
    }

    [data-theme="Sunset"] .dropdown-menu {
        background: var(--card-bg);
        border-color: var(--primary);
        color: var(--main-content-text);
    }

    [data-theme="Sunset"] .dropdown-item {
        color: var(--main-content-text);
    }

        [data-theme="Sunset"] .dropdown-item:hover {
            background: var(--primary-light);
        }

    [data-theme="Sunset"] h2 {
        font-family: var(--font-header);
        font-size: 18px;
    }

    [data-theme="Sunset"] .theme-label {
        font-size: 16px;
        font-weight: bold;
        color: var(--text-secondary);
    }


[data-theme="Neon"] {
    --background: #121212;
    --text: #00FFCC;
    --primary: #00E5FF;
    --card-bg: #1E1E1E; /* Dark gray for sidebar and navbar */
    --content-bg: #121212;
    --accent: #B0BEC5;
    --font: 'Inter', sans-serif;
    --main-content-bg: #2C3E50; /* Dark slate blue for main content */
    --main-content-text: #00FFCC;
}

    /* Remove global override and move to theme-specific -- Updated Oct 24 (JLC)*/
    [data-theme="Neon"] .ques_box .ques_boxinput,
    [data-theme="Neon"] .form-control.ques_boxinput
    [data-theme="Neon"] .custom-select select,
    [data-theme="Neon"] .custom-select select option
    [data-theme="Neon"] .ans_box .form-control,
    [data-theme="Neon"] .ans_box_inner {
        color: #000000 !important; /* Black text (#000000) */
        -webkit-text-fill-color: #000000 !important; /* Counter iPhone contrast */
        -webkit-font-smoothing: antialiased; /* Improve iPhone rendering */
        text-rendering: optimizeSpeed; /* Prevent legibility tweaks */
        background: ghostwhite !important;
    }

    [data-theme="Neon"] .content-wrapper,
    [data-theme="Neon"] .content,
    [data-theme="Neon"] .container.body-content {
        background: var(--main-content-bg) !important; /* Ensure override */
        color: var(--main-content-text);
    }

    [data-theme="Neon"] .sidebar,
    [data-theme="Neon"] .navbar {
        background: var(--card-bg) !important;
        color: var(--main-content-text);
    }

    [data-theme="Neon"] .question-interaction-panel,
    [data-theme="Neon"] .middle-panel,
    [data-theme="Neon"] .middle-panel-inner,
    [data-theme="Neon"] .history_main .container,
    [data-theme="Neon"] .history_main .row {
        background: transparent !important;
        color: var(--main-content-text);
    }

    [data-theme="Neon"] .status-bar {
        background-color: #C8C8C8 !important;
        color: #E0E0E0 !important;
    }

        [data-theme="Neon"] .status-bar .status-box {
            background-color: #B5B5B5 !important;
            color: #E0E0E0 !important;
        }

    [data-theme="Neon"] .gridview-modern,
    [data-theme="Neon"] .gridview-modern tr,
    [data-theme="Neon"] .gridview-modern td,
    [data-theme="Neon"] .gridview-modern th {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Neon"] .gridview-modern th {
            background-color: #2A2A2A !important;
            color: #E0E0E0 !important;
        }

        [data-theme="Neon"] .gridview-modern tr:nth-child(even) {
            background: var(--main-content-bg) !important; /* Match main content */
        }

        [data-theme="Neon"] .gridview-modern tr:hover,
        [data-theme="Neon"] .short-gridview-modern tr:hover {
            background: #2A2A2A !important;
        }

    [data-theme="Neon"] .ans_box {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Neon"] .ans_box .form-control {
            background: ghostwhite !important;
            color: #E0E0E0 !important;
            border: 1px solid var(--primary);
        }

        [data-theme="Neon"] .ans_box h2,
        [data-theme="Neon"] .ans_box label,
        [data-theme="Neon"] .parameters-panel label {
            color: #E0E0E0 !important;
        }

[data-theme="Neon"] .form-control,
[data-theme="Neon"] .full-width-control,
[data-theme="Neon"] .short-textbox {
    background: ghostwhite !important;
    color: #E0E0E0;
    border: 1px solid var(--primary);
}

    [data-theme="Neon"] .btn-primary,
    [data-theme="Neon"] .middle-panel button {
        background-color: var(--primary);
        color: #121212;
    }

        [data-theme="Neon"] .btn-primary:hover,
        [data-theme="Neon"] .middle-panel button:hover {
            background-color: #00B7EB;
            color: #121212;
        }

    [data-theme="Neon"] .context-menu {
        background: var(--card-bg);
        color: #E0E0E0;
        border: 1px solid var(--primary);
    }

        [data-theme="Neon"] .context-menu li {
            color: #E0E0E0;
        }

            [data-theme="Neon"] .context-menu li:hover {
                background: #2A2A2A;
            }

    [data-theme="Neon"] .gridview-scroll-container::-webkit-scrollbar-thumb,
    [data-theme="Neon"] .question-interaction-panel::-webkit-scrollbar-thumb {
        background-color: var(--primary);
    }

    [data-theme="Neon"] .gridview-scroll-container::-webkit-scrollbar-track,
    [data-theme="Neon"] .question-interaction-panel::-webkit-scrollbar-track {
        background: var(--main-content-bg); /* Match main content */
    }

    [data-theme="Neon"] .divider,
    [data-theme="Neon"] .question-interaction-panel .divider {
        background-color: var(--primary) !important;
    }

    [data-theme="Neon"] .login-panel {
        background: var(--card-bg);
        color: #E0E0E0;
    }

    [data-theme="Neon"] .dropdown-menu {
        background: var(--card-bg);
        border-color: var(--primary);
        color: var(--main-content-text);
    }

    [data-theme="Neon"] .dropdown-item {
        color: #E0E0E0;
    }

[data-theme="Modern Blues"] {
    --background: #223040;
    --text: #00BCD4; /* bright blue text from text-primary */
    --primary: #00BCD4; /* Vibrant blue from text-brand */
    --card-bg: #00182B; /* Light card background from background-card */
    --content-bg: #223040; /* Matches background */
    --accent: #6495ED; /* Muted teal-gray from text-secondary */
    --font: 'Arial', 'Helvetica', sans-serif; /* Kept from Vintage */
    --font-header: 'Inter', sans-serif; /* Updated Oct 20 (JLC)*/
    --main-content-bg: #223040; /* Light blue-teal for main content */
    --main-content-text: #00BCD4; /* Matches text-primary */
}

    /* Ensure question textbox text color -- Updated Oct 23 (JLC)*/
    [data-theme="Modern Blues"] .form-control 
    [data-theme="Modern Blues"] .ques_box .ques_boxinput,
    [data-theme="Modern Blues"] .form-control.ques_boxinput
    [data-theme="Modern Blues"] .custom-select select,
    [data-theme="Modern Blues"] .custom-select select option
    [data-theme="Modern Blues"] .ans_box .form-control,
    [data-theme="Modern Blues"] .ans_box_inner {
        color: #000000 !important; /* Use neon text (#00FFCC) */
        -webkit-text-fill-color: #000000 !important; /* Counter iPhone contrast */
        -webkit-font-smoothing: antialiased; /* Improve iPhone rendering */
        text-rendering: optimizeSpeed; /* Prevent legibility tweaks */
        background: ghostwhite !important;
    }

    /* Update form controls for consistency */
    data-theme="Modern Blues"] .full-width-control,
    [data-theme="Modern Blues"] .short-textbox {
        background: #f0f7ff !important;
        color: var(--main-content-text) !important;
        -webkit-text-fill-color: var(--main-content-text) !important;
        border: 1px solid var(--primary);
        -webkit-font-smoothing: antialiased;
    }
    [data-theme="Modern Blues"] .content-wrapper,
    [data-theme="Modern Blues"] .content,
    [data-theme="Modern Blues"] .container.body-content {
        background: var(--main-content-bg) !important;
        color: var(--main-content-text);
        border-radius: 8px;
        padding: 20px;
        /* Subtle wave texture for a watery, teal feel */
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQYV2NkYGD4z8DAwMCAwMDAwMDg/38AAH4ABGQUg3UAAAAASUVORK5CYII=');
        background-repeat: repeat;
    }

    [data-theme="Modern Blues"] .sidebar,
    [data-theme="Modern Blues"] .navbar {
        background: var(--card-bg) !important;
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

    [data-theme="Modern Blues"] .question-interaction-panel,
    [data-theme="Modern Blues"] .middle-panel,
    [data-theme="Modern Blues"] .middle-panel-inner,
    [data-theme="Modern Blues"] .history_main .container,
    [data-theme="Modern Blues"] .history_main .row {
        background: transparent !important;
        color: var(--main-content-text);
    }

    [data-theme="Modern Blues"] .status-bar {
        background-color: #d6e9ff !important; /* Light blue derived from primary */
        color: var(--main-content-text) !important;
        border-radius: 0 0 8px 8px;
    }

        [data-theme="Modern Blues"] .status-bar .status-box {
            background-color: #c7deff !important; /* Slightly darker blue */
            color: var(--main-content-text) !important;
        }

    [data-theme="Modern Blues"] .gridview-modern,
    [data-theme="Modern Blues"] .gridview-modern tr,
    [data-theme="Modern Blues"] .gridview-modern td,
    [data-theme="Modern Blues"] .gridview-modern th {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Modern Blues"] .gridview-modern th {
            background-color: var(--card-bg) !important;
            color: var(--main-content-text) !important;
        }

        [data-theme="Modern Blues"] .gridview-modern tr:nth-child(even) {
            background: var(--main-content-bg) !important;
        }

        [data-theme="Modern Blues"] .gridview-modern tr:hover,
        [data-theme="Modern Blues"] .short-gridview-modern tr:hover {
            background: #e0f2ff !important; /* Light hover blue */
        }

    [data-theme="Modern Blues"] .ans_box {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Modern Blues"] .ans_box .form-control {
            background: var(--fill-white) !important; /* White from fill-white */
            color: var(--main-content-text) !important;
            border: 1px solid var(--primary);
        }

        [data-theme="Modern Blues"] .ans_box h2,
        [data-theme="Modern Blues"] .ans_box label,
        [data-theme="Modern Blues"] .parameters-panel label {
            color: var(--accent) !important;
            font-family: var(--font-header);
        }

    [data-theme="Modern Blues"] .form-control,
    [data-theme="Modern Blues"] .full-width-control,
    [data-theme="Modern Blues"] .short-textbox {
        background: #f0f7ff !important; /* Very light blue */
        color: var(--main-content-text);
        border: 1px solid var(--primary);
        font-family: var(--font);
    }

        [data-theme="Modern Blues"] .form-control:hover,
        [data-theme="Modern Blues"] .form-control:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(83, 83, 80, 0.2); /* Teal-gray shadow */
        }

    [data-theme="Modern Blues"] .btn-primary,
    [data-theme="Modern Blues"] .middle-panel button {
        background-color: var(--primary);
        color: var(--text-white);
        font-family: var(--font-header);
    }

        [data-theme="Modern Blues"] .btn-primary:hover,
        [data-theme="Modern Blues"] .middle-panel button:hover {
            background-color: var(--accent);
            color: var(--text-white);
        }

        [data-theme="Modern Blues"] .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(0, 129, 242, 0.3); /* Blue shadow */
        }

    [data-theme="Modern Blues"] .context-menu {
        background: var(--card-bg);
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

        [data-theme="Modern Blues"] .context-menu li {
            color: var(--main-content-text);
        }

            [data-theme="Modern Blues"] .context-menu li:hover {
                background: #e0f2ff !important; /* Light blue hover */
            }

    [data-theme="Modern Blues"] .gridview-scroll-container::-webkit-scrollbar-thumb,
    [data-theme="Modern Blues"] .question-interaction-panel::-webkit-scrollbar-thumb {
        background-color: var(--primary);
    }

    [data-theme="Modern Blues"] .gridview-scroll-container::-webkit-scrollbar-track,
    [data-theme="Modern Blues"] .question-interaction-panel::-webkit-scrollbar-track {
        background: var(--main-content-bg);
    }

    [data-theme="Modern Blues"] .divider,
    [data-theme="Modern Blues"] .question-interaction-panel .divider {
        background-color: var(--primary) !important;
    }

    [data-theme="Modern Blues"] .login-panel {
        background: var(--card-bg);
        color: var(--main-content-text);
    }

    [data-theme="Modern Blues"] .dropdown-menu {
        background: var(--card-bg);
        border-color: var(--primary);
        color: var(--main-content-text);
    }

    [data-theme="Modern Blues"] .dropdown-item {
        color: var(--main-content-text);
    }

    [data-theme="Modern Blues"] h2 {
        font-family: var(--font-header);
        font-size: 18px;
    }

    [data-theme="Modern Blues"] .theme-label {
        font-size: 16px;
        font-weight: bold;
        color: var(--accent);
    }

[data-theme="Vintage"] {
    --background: #FDF6E3; /* Soft ivory */
    --text: #5D4037; /* Dark brown */
    --primary: #D76A3C; /* Burnt terracotta */
    --card-bg: #FFECB3; /* Light amber for sidebar and navbar */
    --content-bg: #FDF6E3; /* Matches background */
    --accent: #6B4E31; /* Rich brown */
    --font: 'Arial', 'Helvetica', sans-serif; /* Typewriter font */
    --font-header: 'Crimson Text', Georgia, serif; /* Vintage serif for headers */
    --main-content-bg: #E8D3A3; /* Aged parchment for main content */
    --main-content-text: #4A3728; /* Darker brown */
}

    [data-theme="Vintage"] .content-wrapper,
    [data-theme="Vintage"] .content,
    [data-theme="Vintage"] .container.body-content {
        background: var(--main-content-bg) !important; /* Ensure override */
        color: var(--main-content-text);
        border-radius: 8px;
        padding: 20px;
        /* Subtle paper texture */
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIW2P8//8/AwMDEwMDAwMA4g8B6S2z/gAAAABJRU5ErkJggg==');
        background-repeat: repeat;
    }

    [data-theme="Vintage"] .sidebar,
    [data-theme="Vintage"] .navbar {
        background: var(--card-bg) !important;
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

    [data-theme="Vintage"] .question-interaction-panel,
    [data-theme="Vintage"] .middle-panel,
    [data-theme="Vintage"] .middle-panel-inner,
    [data-theme="Vintage"] .history_main .container,
    [data-theme="Vintage"] .history_main .row {
        background: transparent !important;
        color: var(--main-content-text);
    }

    [data-theme="Vintage"] .status-bar {
        background-color: #E0D4B8 !important; /* Muted beige */
        color: var(--main-content-text) !important;
        border-radius: 0 0 8px 8px;
    }

        [data-theme="Vintage"] .status-bar .status-box {
            background-color: #D9C2A6 !important; /* Darker beige */
            color: var(--main-content-text) !important;
        }

    [data-theme="Vintage"] .gridview-modern,
    [data-theme="Vintage"] .gridview-modern tr,
    [data-theme="Vintage"] .gridview-modern td,
    [data-theme="Vintage"] .gridview-modern th {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Vintage"] .gridview-modern th {
            background-color: var(--card-bg) !important;
            color: var(--main-content-text) !important;
        }

        [data-theme="Vintage"] .gridview-modern tr:nth-child(even) {
            background: var(--main-content-bg) !important; /* Match main content */
        }

        [data-theme="Vintage"] .gridview-modern tr:hover,
        [data-theme="Vintage"] .short-gridview-modern tr:hover {
            background: #FFE0B2 !important;
        }

    [data-theme="Vintage"] .ans_box {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Vintage"] .ans_box .form-control {
            background: ghostwhite !important;
            color: var(--main-content-text) !important;
            border: 1px solid var(--primary);
        }

        [data-theme="Vintage"] .ans_box h2,
        [data-theme="Vintage"] .ans_box label,
        [data-theme="Vintage"] .parameters-panel label {
            color: var(--accent) !important;
            font-family: var(--font-header);
        }

    [data-theme="Vintage"] .form-control,
    [data-theme="Vintage"] .full-width-control,
    [data-theme="Vintage"] .short-textbox {
        background: #FFF8E1 !important;
        color: var(--main-content-text);
        border: 1px solid var(--primary);
        font-family: var(--font);
    }

        [data-theme="Vintage"] .form-control:hover,
        [data-theme="Vintage"] .form-control:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(107, 78, 49, 0.2);
        }

    [data-theme="Vintage"] .btn-primary,
    [data-theme="Vintage"] .middle-panel button {
        background-color: var(--primary);
        color: white;
        font-family: var(--font-header);
    }

        [data-theme="Vintage"] .btn-primary:hover,
        [data-theme="Vintage"] .middle-panel button:hover {
            background-color: var(--accent);
            color: white;
        }

        [data-theme="Vintage"] .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(215, 106, 60, 0.3);
        }

    [data-theme="Vintage"] .context-menu {
        background: var(--card-bg);
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

        [data-theme="Vintage"] .context-menu li {
            color: var(--main-content-text);
        }

            [data-theme="Vintage"] .context-menu li:hover {
                background: #FFE0B2;
            }

    [data-theme="Vintage"] .gridview-scroll-container::-webkit-scrollbar-thumb,
    [data-theme="Vintage"] .question-interaction-panel::-webkit-scrollbar-thumb {
        background-color: var(--primary);
    }

    [data-theme="Vintage"] .gridview-scroll-container::-webkit-scrollbar-track,
    [data-theme="Vintage"] .question-interaction-panel::-webkit-scrollbar-track {
        background: var(--main-content-bg); /* Match main content */
    }

    [data-theme="Vintage"] .divider,
    [data-theme="Vintage"] .question-interaction-panel .divider {
        background-color: var(--primary) !important;
    }

    [data-theme="Vintage"] .login-panel {
        background: var(--card-bg);
        color: var(--main-content-text);
    }

    [data-theme="Vintage"] .dropdown-menu {
        background: var(--card-bg);
        border-color: var(--primary);
        color: var(--main-content-text);
    }

    [data-theme="Vintage"] .dropdown-item {
        color: var(--main-content-text);
    }

    [data-theme="Vintage"] h2 {
        font-family: var(--font-header);
        font-size: 18px;
    }

    [data-theme="Vintage"] .theme-label {
        font-size: 16px;
        font-weight: bold;
        color: var(--accent);
    }

[data-theme="Gizmo"] {
    --background: #BBDEFB; /* Light blue */
    --text: #1A237E; /* Deep navy */
    --primary: #EF5350; /* Cherry red */
    --card-bg: #FFF176; /* Sunny yellow for sidebar and navbar */
    --content-bg: #BBDEFB; /* Matches background */
    --zigzag-divider: repeating-linear-gradient(135deg, #EF5350, #EF5350 5px, #BBDEFB 5px, #BBDEFB 10px);
    --accent: #43A047; /* Lime green */
    --font: 'Inter', sans-serif;
    --main-content-bg: #4DD0E1; /* Bright cyan for main content */
    --main-content-text: #1A237E; /* Deep navy */
}

    [data-theme="Gizmo"] .content-wrapper,
    [data-theme="Gizmo"] .content,
    [data-theme="Gizmo"] .container.body-content {
        background: var(--main-content-bg) !important; /* Ensure override */
        color: var(--main-content-text);
        border-radius: 8px;
        padding: 20px;
        background-image: url("https://www.transparenttextures.com/patterns/cartoon-clouds.png");
    }

    [data-theme="Gizmo"] .sidebar,
    [data-theme="Gizmo"] .navbar {
        background: var(--card-bg) !important;
        color: var(--main-content-text);
        border: 1px solid var(--primary); /* Add border for definition */
    }

    [data-theme="Gizmo"] .question-interaction-panel,
    [data-theme="Gizmo"] .middle-panel,
    [data-theme="Gizmo"] .middle-panel-inner,
    [data-theme="Gizmo"] .history_main .container,
    [data-theme="Gizmo"] .history_main .row {
        background: transparent !important;
        color: var(--main-content-text);
    }

    [data-theme="Gizmo"] .status-bar {
        background-color: var(--accent) !important; /* Lime green */
        color: var(--main-content-text) !important;
        border-radius: 0 0 8px 8px;
    }

        [data-theme="Gizmo"] .status-bar .status-box {
            background-color: #66BB6A !important; /* Darker green */
            color: var(--main-content-text) !important;
        }

    [data-theme="Gizmo"] .gridview-modern,
    [data-theme="Gizmo"] .gridview-modern tr,
    [data-theme="Gizmo"] .gridview-modern td,
    [data-theme="Gizmo"] .gridview-modern th {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Gizmo"] .gridview-modern th {
            background-color: var(--card-bg) !important;
            color: var(--main-content-text) !important;
        }

        [data-theme="Gizmo"] .gridview-modern tr:nth-child(even) {
            background: var(--main-content-bg) !important; /* Match main content */
        }

        [data-theme="Gizmo"] .gridview-modern tr:hover,
        [data-theme="Gizmo"] .short-gridview-modern tr:hover {
            background: #B2EBF2 !important; /* Lighter cyan */
        }

    [data-theme="Gizmo"] .ans_box {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="Gizmo"] .ans_box .form-control {
            background: ghostwhite !important;
            color: var(--main-content-text) !important;
            border: 1px solid var(--primary);
        }

        [data-theme="Gizmo"] .ans_box h2,
        [data-theme="Gizmo"] .ans_box label,
        [data-theme="Gizmo"] .parameters-panel label {
            color: var(--main-content-text) !important;
        }

    [data-theme="Gizmo"] .form-control,
    [data-theme="Gizmo"] .full-width-control,
    [data-theme="Gizmo"] .short-textbox {
        background: var(--card-bg) !important;
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

        [data-theme="Gizmo"] .form-control:hover,
        [data-theme="Gizmo"] .form-control:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.2);
        }

    [data-theme="Gizmo"] .btn-primary,
    [data-theme="Gizmo"] .middle-panel button {
        background-color: var(--primary);
        color: white;
    }

        [data-theme="Gizmo"] .btn-primary:hover,
        [data-theme="Gizmo"] .middle-panel button:hover {
            background-color: #E53935; /* Darker red */
            color: white;
        }

        [data-theme="Gizmo"] .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.3);
        }

    [data-theme="Gizmo"] .context-menu {
        background: var(--card-bg);
        color: var(--main-content-text);
        border: 1px solid var(--primary);
    }

        [data-theme="Gizmo"] .context-menu li {
            color: var(--main-content-text);
        }

            [data-theme="Gizmo"] .context-menu li:hover {
                background: #B2EBF2; /* Lighter cyan */
            }

    [data-theme="Gizmo"] .gridview-scroll-container::-webkit-scrollbar-thumb,
    [data-theme="Gizmo"] .question-interaction-panel::-webkit-scrollbar-thumb {
        background-color: var(--primary);
    }

    [data-theme="Gizmo"] .gridview-scroll-container::-webkit-scrollbar-track,
    [data-theme="Gizmo"] .question-interaction-panel::-webkit-scrollbar-track {
        background: var(--main-content-bg); /* Match main content */
    }

    [data-theme="Gizmo"] .divider,
    [data-theme="Gizmo"] .question-interaction-panel .divider {
        background-image: var(--zigzag-divider);
        height: 6px;
        border: none;
    }

    [data-theme="Gizmo"] .login-panel {
        background: var(--card-bg);
        color: var(--main-content-text);
    }

    [data-theme="Gizmo"] .dropdown-menu {
        background: var(--card-bg);
        border-color: var(--primary);
        color: var(--main-content-text);
    }

    [data-theme="Gizmo"] .dropdown-item {
        color: var(--main-content-text);
    }

[data-theme="CandyStore"] {
    --background: #FFF1F2; /* Pale rose */
    --text: #212121; /* Dark charcoal */
    --primary: #EF5350; /* Cherry red */
    --card-bg: #ECEFF1; /* Light silver gray for sidebar and navbar */
    --content-bg: #FFF1F2; /* Matches background */
    --accent: #B0BEC5; /* Medium gray */
    --font: 'Inter', sans-serif;
    --main-content-bg: #F48FB1; /* Bubblegum pink for main content */
    --main-content-text: #212121; /* Dark charcoal */
    --status-bar-bg: #F06292; /* Rose pink */
    --candy-stripe-divider: repeating-linear-gradient(45deg, #EF5350, #EF5350 5px, #FFF1F2 5px, #FFF1F2 10px);
}

    [data-theme="CandyStore"] .content-wrapper,
    [data-theme="CandyStore"] .content,
    [data-theme="CandyStore"] .container.body-content {
        background: var(--main-content-bg) !important; /* Bubblegum pink */
        color: var(--main-content-text);
        border-radius: 12px; /* Softer corners */
        padding: 20px;
    }

    [data-theme="CandyStore"] .sidebar,
    [data-theme="CandyStore"] .navbar {
        background: var(--card-bg) !important; /* Light silver gray */
        color: var(--main-content-text);
        border: 1px solid var(--primary); /* Cherry red border */
        border-radius: 8px;
    }

    [data-theme="CandyStore"] .question-interaction-panel,
    [data-theme="CandyStore"] .middle-panel,
    [data-theme="CandyStore"] .middle-panel-inner,
    [data-theme="CandyStore"] .history_main .container,
    [data-theme="CandyStore"] .history_main .row {
        background: transparent !important;
        color: var(--main-content-text);
    }

    [data-theme="CandyStore"] .status-bar {
        background-color: var(--status-bar-bg) !important; /* Rose pink */
        color: var(--main-content-text) !important;
        border-radius: 0 0 8px 8px;
    }

        [data-theme="CandyStore"] .status-bar .status-box {
            background-color: #EC407A !important; /* Darker rose */
            color: var(--main-content-text) !important;
            border-radius: 4px;
        }

    [data-theme="CandyStore"] .gridview-modern,
    [data-theme="CandyStore"] .gridview-modern tr,
    [data-theme="CandyStore"] .gridview-modern td,
    [data-theme="CandyStore"] .gridview-modern th {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="CandyStore"] .gridview-modern th {
            background-color: var(--card-bg) !important; /* Light silver gray */
            color: var(--main-content-text) !important;
        }

        [data-theme="CandyStore"] .gridview-modern tr:nth-child(even) {
            background: var(--main-content-bg) !important; /* Bubblegum pink */
        }

        [data-theme="CandyStore"] .gridview-modern tr:hover,
        [data-theme="CandyStore"] .short-gridview-modern tr:hover {
            background: #F8BBD0 !important; /* Lighter pink */
        }

    [data-theme="CandyStore"] .ans_box {
        background: transparent !important;
        color: var(--main-content-text);
    }

        [data-theme="CandyStore"] .ans_box .form-control {
            background: ghostwhite !important;
            color: var(--main-content-text) !important;
            border: 1px solid var(--primary);
            border-radius: 6px;
        }

        [data-theme="CandyStore"] .ans_box h2,
        [data-theme="CandyStore"] .ans_box label,
        [data-theme="CandyStore"] .parameters-panel label {
            color: var(--main-content-text) !important;
        }

    [data-theme="CandyStore"] .form-control,
    [data-theme="CandyStore"] .full-width-control,
    [data-theme="CandyStore"] .short-textbox {
        background: var(--card-bg) !important;
        color: var(--main-content-text);
        border: 1px solid var(--primary);
        border-radius: 6px;
    }

        [data-theme="CandyStore"] .form-control:hover,
        [data-theme="CandyStore"] .form-control:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(176, 190, 197, 0.2);
        }

    [data-theme="CandyStore"] .btn-primary,
    [data-theme="CandyStore"] .middle-panel button {
        background-color: var(--primary);
        color: white;
        border-radius: 6px;
    }

        [data-theme="CandyStore"] .btn-primary:hover,
        [data-theme="CandyStore"] .middle-panel button:hover {
            background-color: #E53935; /* Darker red */
            color: white;
        }

        [data-theme="CandyStore"] .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.3);
        }

    [data-theme="CandyStore"] .context-menu {
        background: var(--card-bg);
        color: var(--main-content-text);
        border: 1px solid var(--primary);
        border-radius: 6px;
    }

        [data-theme="CandyStore"] .context-menu li {
            color: var(--main-content-text);
        }

            [data-theme="CandyStore"] .context-menu li:hover {
                background: #F8BBD0; /* Lighter pink */
            }

    [data-theme="CandyStore"] .gridview-scroll-container::-webkit-scrollbar-thumb,
    [data-theme="CandyStore"] .question-interaction-panel::-webkit-scrollbar-thumb {
        background-color: var(--primary); /* Cherry red */
        border-radius: 10px;
    }

    [data-theme="CandyStore"] .gridview-scroll-container::-webkit-scrollbar-track,
    [data-theme="CandyStore"] .question-interaction-panel::-webkit-scrollbar-track {
        background: var(--main-content-bg); /* Bubblegum pink */
    }

    [data-theme="CandyStore"] .divider,
    [data-theme="CandyStore"] .question-interaction-panel .divider {
        background-image: var(--candy-stripe-divider); /* Red/rose stripes */
        height: 6px;
        border: none;
    }

    [data-theme="CandyStore"] .login-panel {
        background: var(--card-bg);
        color: var(--main-content-text);
        border-radius: 8px;
    }

    [data-theme="CandyStore"] .dropdown-menu {
        background: var(--card-bg);
        border-color: var(--primary);
        color: var(--main-content-text);
        border-radius: 6px;
    }

    [data-theme="CandyStore"] .dropdown-item {
        color: var(--main-content-text);
    }

    [data-theme="CandyStore"] h2 {
        font-family: var(--font);
        font-size: 18px;
        color: var(--main-content-text);
    }

    [data-theme="CandyStore"] .theme-label {
        font-size: 16px;
        font-weight: bold;
        color: var(--main-content-text);
    }

/* Themed button colors */

/* Light Theme */
[data-theme="light"] .btn-primary,
[data-theme="light"] .middle-panel button {
    background-color: #1A73E8 !important; /* Vibrant blue complementing #007BFF */
    color: white !important;
}

    [data-theme="light"] .btn-primary:hover,
    [data-theme="light"] .middle-panel button:hover {
        background-color: #1557B0 !important; /* Darker blue for hover */
        color: white !important;
    }

    [data-theme="light"] .btn-primary:focus {
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.3) !important; /* Match button color */
    }

/* Dark Theme */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .middle-panel button {
    background-color: #4A90E2 !important; /* Muted blue complementing #66b0ff */
    color: #121212 !important;
}

    [data-theme="dark"] .btn-primary:hover,
    [data-theme="dark"] .middle-panel button:hover {
        background-color: #357ABD !important; /* Darker shade for hover */
        color: #121212 !important;
    }

    [data-theme="dark"] .btn-primary:focus {
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3) !important; /* Match button color */
    }

/* Nature Theme */
[data-theme="Nature"] .btn-primary,
[data-theme="Nature"] .middle-panel button {
    background-color: #38A169 !important; /* Forest green complementing #48BB78 */
    color: white !important;
    font-family: var(--font-header);
}

    [data-theme="Nature"] .btn-primary:hover,
    [data-theme="Nature"] .middle-panel button:hover {
        background-color: #2E7D32 !important; /* Darker green for hover */
        color: white !important;
    }

    [data-theme="Nature"] .btn-primary:focus {
        box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.3) !important; /* Match button color */
    }

/* Sunset Theme */
[data-theme="Sunset"] .btn-primary,
[data-theme="Sunset"] .middle-panel button {
    background-color: #E53E3E !important; /* Deep coral complementing #F56565 */
    color: white !important;
    font-family: var(--font-header);
}

    [data-theme="Sunset"] .btn-primary:hover,
    [data-theme="Sunset"] .middle-panel button:hover {
        background-color: #C53030 !important; /* Darker red for hover */
        color: white !important;
    }

    [data-theme="Sunset"] .btn-primary:focus {
        box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.3) !important; /* Match button color */
    }

/* Neon Theme */
[data-theme="Neon"] .btn-primary,
[data-theme="Neon"] .middle-panel button {
    background-color: #00C4B4 !important; /* Teal complementing #00E5FF */
    color: #121212 !important;
}

    [data-theme="Neon"] .btn-primary:hover,
    [data-theme="Neon"] .middle-panel button:hover {
        background-color: #00A399 !important; /* Darker teal for hover */
        color: #121212 !important;
    }

    [data-theme="Neon"] .btn-primary:focus {
        box-shadow: 0 0 0 3px rgba(0, 196, 180, 0.3) !important; /* Match button color */
    }

/* Vintage Theme */
[data-theme="Vintage"] .btn-primary,
[data-theme="Vintage"] .middle-panel button {
    background-color: #C2572A !important; /* Rich terracotta complementing #D76A3C */
    color: white !important;
    font-family: var(--font-header);
}

    [data-theme="Vintage"] .btn-primary:hover,
    [data-theme="Vintage"] .middle-panel button:hover {
        background-color: #A14724 !important; /* Darker terracotta for hover */
        color: white !important;
    }

    [data-theme="Vintage"] .btn-primary:focus {
        box-shadow: 0 0 0 3px rgba(194, 87, 42, 0.3) !important; /* Match button color */
    }

/* Gizmo Theme */
[data-theme="Gizmo"] .btn-primary,
[data-theme="Gizmo"] .middle-panel button {
    background-color: #D81B60 !important; /* Magenta complementing #EF5350 */
    color: white !important;
}

    [data-theme="Gizmo"] .btn-primary:hover,
    [data-theme="Gizmo"] .middle-panel button:hover {
        background-color: #B5174E !important; /* Darker magenta for hover */
        color: white !important;
    }

    [data-theme="Gizmo"] .btn-primary:focus {
        box-shadow: 0 0 0 3px rgba(216, 27, 96, 0.3) !important; /* Match button color */
    }

/* CandyStore Theme */
[data-theme="CandyStore"] .btn-primary,
[data-theme="CandyStore"] .middle-panel button {
    background-color: #F06292 !important; /* Rose pink complementing #EF5350 */
    color: white !important;
    border-radius: 6px;
}

    [data-theme="CandyStore"] .btn-primary:hover,
    [data-theme="CandyStore"] .middle-panel button:hover {
        background-color: #D81B60 !important; /* Darker pink for hover */
        color: white !important;
    }

    [data-theme="CandyStore"] .btn-primary:focus {
        box-shadow: 0 0 0 3px rgba(240, 98, 146, 0.3) !important; /* Match button color */
    }

[data-theme="CandyStore"] .context-menu {
    background: var(--card-bg);
    color: var(--main-content-text);
    border: 1px solid var(--primary);
    border-radius: 6px;
}

    [data-theme="CandyStore"] .context-menu li {
        color: var(--main-content-text);
    }

        [data-theme="CandyStore"] .context-menu li:hover {
            background: #F8BBD0; /* Lighter pink */
        }

[data-theme="CandyStore"] .gridview-scroll-container::-webkit-scrollbar-thumb,
[data-theme="CandyStore"] .question-interaction-panel::-webkit-scrollbar-thumb {
    background-color: var(--primary); /* Cherry red */
    border-radius: 10px;
}

[data-theme="CandyStore"] .gridview-scroll-container::-webkit-scrollbar-track,
[data-theme="CandyStore"] .question-interaction-panel::-webkit-scrollbar-track {
    background: var(--main-content-bg); /* Bubblegum pink */
}

[data-theme="CandyStore"] .divider,
[data-theme="CandyStore"] .question-interaction-panel .divider {
    background-image: var(--candy-stripe-divider); /* Red/rose stripes */
    height: 6px;
    border: none;
}

[data-theme="CandyStore"] .login-panel {
    background: var(--card-bg);
    color: var(--main-content-text);
    border-radius: 8px;
}

[data-theme="CandyStore"] .dropdown-menu {
    background: var(--card-bg);
    border-color: var(--primary);
    color: var(--main-content-text);
    border-radius: 6px;
}

[data-theme="CandyStore"] .dropdown-item {
    color: var(--main-content-text);
}

[data-theme="CandyStore"] h2 {
    font-family: var(--font);
    font-size: 24px;
    color: var(--main-content-text);
}

[data-theme="CandyStore"] .theme-label {
    font-size: 16px;
    font-weight: bold;
    color: var(--main-content-text);
}
/* General dropdown styles */
.theme-selector-container.dropdown,
.user-settings-section,
.admin-section {
    position: relative;
}

.dropdown-menu {
    z-index: 1000;
    background: var(--main-content-bg); /* Match theme */
    color: var(--main-content-text);
    border: 1px solid var(--primary);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 120px;
    padding: 5px 0;
}

.dropdown-item {
    cursor: pointer;
    color: var(--main-content-text);
    font-size: 14px;
    padding: 8px 15px;
    transition: background-color 0.3s, color 0.3s;
}

    .dropdown-item:hover {
        background: rgba(0, 0, 0, 0.1);
    }
/* Ensure theme selector dropdown remains ghostwhite */
#themeMenu.dropdown-menu {
    background: #F8F8FF !important;
    opacity: 1 !important;
    border: 1px solid var(--primary);
    z-index: 2000;
}

[data-theme="light"] #themeMenu.dropdown-menu,
[data-theme="dark"] #themeMenu.dropdown-menu,
[data-theme="Nature"] #themeMenu.dropdown-menu,
[data-theme="Sunset"] #themeMenu.dropdown-menu,
[data-theme="Neon"] #themeMenu.dropdown-menu,
[data-theme="Modern Blues"] #themeMenu.dropdown-menu,
[data-theme="Vintage"] #themeMenu.dropdown-menu,
[data-theme="Gizmo"] #themeMenu.dropdown-menu {
    background: #F8F8FF !important;
}
/* Define theme-text small for GridView PreferredLLMTitle */
.theme-text.small {
    font-size: 12px; /* Match existing .gridview-modern .question-column .text-muted */
}
/* Light Theme */
[data-theme="light"] .theme-text.small {
    color: var(--accent); /* #666666, medium gray */
}
/* Dark Theme */
[data-theme="dark"] .theme-text.small {
    color: var(--primary); /* #66b0ff, light blue */
}
/* Nature Theme */
[data-theme="Nature"] .theme-text.small {
    color: var(--accent); /* #D69E2E, golden yellow */
}
/* Sunset Theme */
[data-theme="Sunset"] .theme-text.small {
    color: var(--primary-dark); /* #F6E05E, bright yellow */
}
/* Neon Theme */
[data-theme="Neon"] .theme-text.small {
    color: var(--accent); /* #B0BEC5, light gray-blue */
}

/* Modern Blues Theme -- Added Oct 20 (JLC) */
[data-theme="Modern Blues"] .theme-text.small {
    color: var(--accent); /* #B0BEC5, light gray-blue */
}
/* Vintage Theme */
[data-theme="Vintage"] .theme-text.small {
    color: var(--accent); /* #6B4E31, rich brown */
}
/* Gizmo Theme */
[data-theme="Gizmo"] .theme-text.small {
    color: #2E7D32;
    ; /* #43A047, lime green */
}
/* CandyStore Theme */
[data-theme="CandyStore"] .theme-text.small {
    color: var(--accent); /* #B0BEC5, medium gray */
}
/* Override any conflicting .text-muted styles in GridView */
.gridview-modern .question-column .theme-text.small {
    font-size: 12px; /* Ensure consistency */
}
/* Sidebar dropdowns */
.sidebar .dropdown-menu {
    position: static !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-width: auto !important;
    background: transparent !important;
}



/* End of Themes */

@media screen and (max-width: 1200px) {
    .history_main .container {
        max-width: 1200px;
    }
}

@media screen and (max-width: 991px) {
    :root {
        --fs_xl: 18px;
    }

    .container.body-content {
        padding-left: 0; /* No sidebar offset on mobile */
    }

    .history_topcard label {
        font-size: var(--fs_sm);
    }

    .history_topcard input {
        font-size: var(--fs_sm);
    }

    .history_topcard .btn.btn-primary {
        font-size: var(--fs_sm);
    }

    .hist_ques_box {
        max-width: 320px;
    }

    .hist_ques_box_inner {
        padding: 0 0px;
    }

    .history_topcard {
        flex-wrap: wrap;
    }

      
    

    .hist_tc_formcontrol {
        width: 100%; /* Full width on smaller screens */
    }

    .history_main {
        padding: 15px 0 60px 0;
    }

    .gridview-scroll-container {
        max-width: 100%; /* Allow full width on smaller screens */
    }

   

}

@media (max-width: 768px) {
    .ans_box .ans_box_inner {
        min-height: 200px;
        max-height: 350px;
        width: 100%;
    }


    @media screen and (max-width: 767px) {
        :root {
            --fs_xl: 16px;
        }

        .history_topcard {
            margin: 0 0 10px 0;
        }

        .ques_grid {
            gap: 10px;
        }

        .hist_ques_box {
            max-width: 300px;
        }
    }

    @media screen and (max-width: 640px) {
        .ques_grid {
            flex-direction: column;
        }

        .hist_ques_box {
            max-width: 100%;
        }

        .hist_tc_formcontrol {
            width: 100%;
        }

        .hist_tc_row {
            flex-direction: column; /* Stack form controls vertically */
            gap: 0.5rem; /* Smaller gap for compact layout */
        }

        .hist_tc_formcontrol {
            width: 100%;
        }

            .hist_tc_formcontrol .form-control {
                width: 100%; /* Full-width controls on mobile */
            }

        .hist_footer {
            position: relative;
        }

        .history_main {
            padding: 15px 0 20px 0;
        }
    }
    /* //////////////17-6 history screen END*/
   



    /* The container must be positioned relative: */
    .custom-select {
        position: relative;
        top: 0px;
        left: 0px;
    }

        .custom-select select {
            width: 100%;
            height: 40px;
            background-color: var(--input_bg);
            border-radius: var(--br_md) !important;
            border: 1px solid var(--primary);
            padding: 5px 20px 5px 5px;
            font-size: var(--fs_md);
            /* color: var(--text); Commented out Oct 24 (JLC) */
            font-weight: var(--fw_normal);
        }

        .custom-select span {
            margin: 0 0 4px 0;
            display: block;
            font-size: var(--fs_md);
          /* color: var(--text); Commented out Oct 24 (JLC) */
            font-weight: var(--fw_normal);
        }

    html body .custom-select select:focus {
        box-shadow: 0 0 0 .15rem #214ab07a;
        outline: 0;
        border: 1px solid var(--primary);
    }

    .hist_ques_box table {
        border: 0;
    }

        .hist_ques_box table tr:nth-child(1) th {
            font-size: var(--fs_sm);
            color: var(--font_dark);
            font-weight: var(--fw_semibold);
            padding: 2px 5px 10px 5px;
        }

        .hist_ques_box table tr {
            transition: 0.5s all ease;
        }

            .hist_ques_box table tr td {
                font-size: var(--fs_sm);
                border-radius: 5px;
                padding: 2px 5px;
                color: var(--font_dark);
                font-weight: var(--fw_normal);
            }

                .hist_ques_box table tr td span {
                    font-size: var(--fs_sm);
                    color: var(--font_dark);
                    font-weight: var(--fw_normal);
                }

            .hist_ques_box table tr:hover {
                background-color: #E8E7E9;
            }

    /* Override navbar background */
    header .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--card-bg) !important;
        color: var(--text) !important;
        padding: 10px 15px;
        border-bottom: none;
        box-shadow: none !important;
        z-index: 1100;
    }

    /* Ensure navbar content inherits theme colors */
    header .navbar-brand,
    header .navbar-nav .nav-link,
    header .navbar-nav .nav-item {
        color: var(--text) !important;
    }

        header .navbar-brand:hover,
        header .navbar-nav .nav-link:hover {
            color: var(--primary) !important;
        }

    .checkbox-label {
        font-size: 16px; /* Matches --fs_sm */
        color: var(--text) !important; /* Use theme-defined text color */
        font-weight: normal; /* Override theme-label’s bold */
    }

    /* Ensure theme selector dropdown remains ghostwhite */
    #themeMenu.dropdown-menu {
        background: #F8F8FF !important;
        opacity: 1 !important;
        border: 1px solid var(--primary-color);
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        min-width: 120px;
        z-index: 2000;
        padding: 5px 0;
    }

    [data-theme="light"] #themeMenu.dropdown-menu,
    [data-theme="dark"] #themeMenu.dropdown-menu,
    [data-theme="Nature"] #themeMenu.dropdown-menu,
    [data-theme="Sunset"] #themeMenu.dropdown-menu,
    [data-theme="Neon"] #themeMenu.dropdown-menu,
    [data-theme="Modern Blues"] #themeMenu.dropdown-menu,
    [data-theme="Vintage"] #themeMenu.dropdown-menu,
    [data-theme="Gizmo"] #themeMenu.dropdown-menu {
        background: #F8F8FF !important;
    }

    /* Sidebar dropdowns remain transparent */
    .sidebar#sidebar .dropdown-menu {
        position: static !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        min-width: auto !important;
        background: transparent !important;
    }

    .dropdown-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        color: var(--text);
        flex-wrap: wrap;
        width: 100%;
    }

        .dropdown-row label,
        .dropdown-row select,
        .dropdown-row span {
            margin: 0;
            display: inline-block;
            color: var(--text); /* Ensure labels use theme color */
        }

        .custom-select select,
        .dropdown-row select {
            padding: 5px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: #fff;
            color: #000;
            width: auto;
        }

        @media (prefers-color-scheme: dark) {
            /* Apply to all themes when system dark mode is active */
            [data-theme="dark"],
            [data-theme="Neon"],
            [data-theme="Modern Blues"] {
                /* Ensure text inputs and dropdowns use theme-defined text colors */
                .ques_box .ques_boxinput, 
                .form-control.ques_boxinput, 
                .ans_box .form-control, 
                .ans_box_inner, 
                .custom-select select, 
                .custom-select select option {
                    color: #000000 !important;
                    -webkit-text-fill-color: #000000 !important;
                    background: var(--form-control-bg, ghostwhite) !important; /* Use theme-specific background or fallback */
                    -webkit-font-smoothing: antialiased;
                    text-rendering: optimizeSpeed;
                }
            }
        }


/* Ensure form controls are consistent */
.form-control,
.full-width-control,
.short-textbox {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    background: var(--form-control-bg, ghostwhite) !important; /* Use theme-specific or fallback */
    -webkit-font-smoothing: antialiased;
}

/* Neutralize filters to prevent iPhone contrast bugs */
* {
    -webkit-filter: none !important;
    filter: none !important;
}

/* Define form control background per theme */
[data-theme="dark"] {
    --form-control-bg: ghostwhite;
}

[data-theme="Neon"] {
    --form-control-bg: ghostwhite;
}

[data-theme="Modern Blues"] {
    --form-control-bg: ghostwhite;
}