/* Reset Defaults */
html, body, div, p, h1, h2, h3, h4, h5, h6, blockquote, ol, li, dl, dt, td, dd, form, fieldset, a, img, button, input, textarea {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Base Typography & Font Sizes */
html, body, div, p, blockquote, ol, li, dl, dt, td, dd, form, fieldset, a, img, button, input, select, textarea {
    font-size: 14px;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.TextBox, .NumericTextbox {
    width: 187px;
    padding: 1px;
    margin-top: 1px;
}

.Dropdown {
    width: 187px;
    padding: 1px;
    margin-top: 1px;
}

.TextBoxDatePicker {
    width: 167px;
    margin-top: 1px;
}

.TextboxLogin {
    width: 90%;
    padding: 1px;
    margin-top: 1px;
}

.CalenderImage {
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

/* Layout Adjustments for Screen Sizes */
@media (min-width: 1440px) {
    html {
        font-size: 15px;
    }

    .TextBox, .NumericTextbox {
        width: 220px;
        padding: 4px;
        margin-top: 3px;
    }

    .Dropdown {
        width: 225px;
        padding: 4px;
        margin-top: 3px;
    }

    .TextBoxDatePicker {
        width: 200px;
        padding: 4px;
        margin-top: 3px;
    }

    .CalenderImage {
        width: 20px;
        height: 16px;
        margin-top: 3px;
    }

    .Button {
        height: 26px;
        padding: 4px 16px;
        margin-top: 3px;
    }
}

@media (min-width: 1900px) {
    html {
        font-size: 16px;
    }

    .TextBox, .NumericTextbox {
        width: 260px;
        padding: 6px;
        margin-top: 5px;
    }

    .Dropdown {
        width: 265px;
        padding: 5px;
        margin-top: 5px;
    }

    .TextBoxDatePicker {
        width: 240px;
        padding: 5px;
        margin-top: 5px;
    }

    .CalenderImage {
        width: 24px;
        height: 29px;
        margin-top: 5px;
    }

    .Button {
        height: 32px;
        padding: 5px 20px;
        margin-top: 5px;
    }
}

/* Text Fields */
.TextBox,
.TextboxLogin,
.TextBoxDatePicker,
.NumericTextbox {
    border: 1px solid #A7C5EB;
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: 4px;
}

    .TextBox:disabled,
    .NumericTextbox:disabled,
    .TextBox:read-only,
    .NumericTextbox:read-only {
        background-color: #F5F7FA;
        color: #999999;
        cursor: not-allowed;
    }

/* Dropdown */
.Dropdown {
    border: 1px solid #A7C5EB;
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: 4px;
}

/* Buttons */
.Button {
    border: none;
    background: linear-gradient(145deg, #4A90E2, #3C75C6);
    color: white;
    border-radius: 4px;
    font-weight: 500;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    transition: background 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    padding: 2px 8px;
}

    .Button:hover {
        background: linear-gradient(145deg, #3C75C6, #3361AD);
        transform: translateY(-2px);
    }

    .Button:active {
        transform: translateY(1px);
        background: #2B5BAA;
    }

    .Button:disabled {
        background: #CBD6E2;
        color: #888;
        box-shadow: none;
        cursor: not-allowed;
    }

/* Header Styles */
.MasterTable {
    background-color: #f7f9fb;
    width: 100%;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
}

.headerMid {
    background: #2C3E50;
    color: white;
    padding: 12px;
}

.headerLeft {
    font-size: xx-large;
    text-align: left;
    padding-left: 20px;
    color: white;
}

    .headerLeft:hover {
        color: #CCCCCC;
    }

/* Navigation & Sidebar */
.LeftColumn {
    background-color: #D5E4F0;
    border-left: 2px solid #B8CCE4;
    border-top: 2px solid #B8CCE4;
}

.MainNavigation {
    background-color: #A9C2DA;
}

.MainContent {
    background-color: #F7F9FB;
    border: 2px solid #B8CCE4;
}

/* Grid Styles */
.gridRowStyleHeader, .gridFooterStyle td, .gridRowStyleHeader th a {
    background: linear-gradient(145deg, #535d68, #4d5c6c) !important;
    text-align: center !important;
    font-weight: bold !important;
    color: white !important;
}

.gridRowStyle td, .gridAlternateRowStyle td {
    border: 1px solid #A7C5EB;
    padding: 6px;
}

.gridRowStyle td {
    background-color: #FFFFFF;
}

.gridAlternateRowStyle td {
    background-color: #F1F6FA;
}

.DashBoardStyle td {
    border: 1px solid #A7C5EB;
    text-align: center;
}

/* Modal Background */
.modalBackground, .ModalProgressContainer, .ModalProgressContainer_IE6 {
    background-color: rgba(0,0,0,0.5);
}

/* Labels & Text */
.Label, .Label1, .RadioButtonList, .SectionHeader {
    color: #1A1A1A;
}

.SectionHeader {
    font-weight: bold;
    text-align: justify;
    text-transform: capitalize;
}

.Mandatory {
    color: #E74C3C;
}

.MandatoryMessage {
    color: #2C3E50;
}

/* Tabs and Menu */
.TabControl {
    background-color: #F1F6FA;
}

.TabControlMainPanel {
    background-color: #D5E4F0;
}

.Menu {
    background: #2878b4 !important;
    border: 1px solid #ccd9e0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 10pt !important;
    padding: 5px !important;
    z-index: 1000 !important;
}

/* Menu items with visual separation via margin and subtle box-shadow */
.ctl00_loginViewMaster_mainMenu_1.item {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 8px 8px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    color: #1A1A1A !important;
    background: linear-gradient(145deg, #EAF1F9, #D9E4F0) !important;
}

    /* hover state */
    .ctl00_loginViewMaster_mainMenu_1.item:hover,
    .aspNet-Menu-Selected {
        background: linear-gradient(145deg, #4A90E2, #3C75C6) !important;
        color: #fff !important;
    }

/* Last item without margin */
.item:last-child {
    margin-bottom: 0 !important;
}

/* Hover and selected styles */
.hover, .item:hover, .aspNet-Menu-Selected {
    background: linear-gradient(145deg, #4A90E2, #3C75C6) !important;
    color: white !important;
    border: none !important;
}


/* Hyperlinks */
.HyperLink {
    color: #3C75C6;
    font-weight: bold;
    transition: all 0.3s ease;
}

    .HyperLink:hover {
        color: #2C3E50;
        text-decoration: underline;
    }

    .HyperLink:focus {
        outline: 2px solid #4A90E2;
    }

    .HyperLink:active {
        color: #1C3F7A;
    }

.Links {
    color: #000000;
}

.HeaderWhiteLinks {
    color: white;
}

.disabledHyperlink {
    color: #888 !important;
}

/* Misc Elements */
.CalenderImage {
    vertical-align: middle;
}

.TanTextLeft {
    background: #FFFFFF;
    border: 1px solid #A7C5EB;
    padding: 4px;
    border-radius: 4px;
    text-align: left;
}

.gridItemAlignRight {
    text-align: right;
}

.GridItemTextRight {
    text-align: right !important;
}

.Menuul {
    list-style: none;
    padding: 0;
}

.ExheaderLeft {
    background: url("Images/NSDL_logo.svg") center no-repeat;
    background-color: white;
    height: 62px;
}

/* Additional Responsive Enhancements */
body {
    background-color: #F9FBFD;
    text-align: center;
}

    /* Image Cleanup */
    body:nth-of-type(1) img[src*="Blank.gif"] {
        display: none;
    }

input[type="radio"] + label {
    padding-left: 4px;
}

input[type="checkbox"] {
    margin-right: 4px;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
}

#container {
    height: 100vh;
    width: 100%;
    background-color: #f0f0f0; /* Example background */
}

/*Css Changes for Req 1024 Start*/

.MainContent {
    position: relative;
    z-index: 0;
}

#detailsMissingTable, #renewalTable, #OthersTable {
    border-collapse: separate;
    border-spacing: 6px;
}

.notifBtn {
    position: relative;
    color: yellow;
    display: inline-block;
    padding-right: 2px;
    padding-bottom: 2px;
    cursor: pointer;
}

/*    .btn .badge {
                position: absolute;
                top: -10px;
                right: -10px;
                padding: 2px 5px;
                border-radius: 25%;
                background-color: red;
                color: white;
            }*/

.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    column-span: inherit;
    height: 575px;
    z-index: 4000;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: inherit;
    border-color: #3d7896;
    border-style: solid;
    transition: width 0.2s ease-out;
}

#divNotifHeading {
    font-family: Arial, Sans-Serif;
    font-weight: 300;
    text-align: center;
    color: white;
    background-color: #3d7896;
    padding: 5px 5px 5px 1px;
}

.accordion {
    cursor: pointer;
    background-color: inherit;
}

.accordion-item {
    color: white;
    margin-bottom: 7px;
}

.accordion-item-header {
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: 300;
    display: flex;
    justify-content: space-between;
    background-color: #8DB5AF;
    color: white;
    padding: 4px 1px 4px 5px;
}

    .accordion-item-header::after {
        /*            content:'\25be';
*/ float: right;
        color: white;
        font-weight: bold;
        margin-left: 5px;
        left: 10px;
    }
/*     .accordion-item-header.active::after {
              content:"\25b4";
        }*/
.accordion-item-body {
    max-height: 0;
    transition: max-height 0.2s ease-out;
    /*            display:none;
*/ overflow: hidden;
}

.accordion-item-body-content {
    padding: 4px 1px 4px 5px;
    color: red;
    overflow-y: auto;
    height: 130px;
    /*          height:auto;
*/
}

.tooltiptext {
    font-family: Sans-Serif;
    font-size: xx-small;
    /*            visibility: hidden;
*/ position: absolute;
    text-align: center;
    position: absolute;
    z-index: 5000;
    height: 23px;
    width: 79px;
    top: -30px;
    left: -4px;
    cursor: default;
}

    .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        left: 13%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: yellow transparent transparent transparent;
    }

/* .notifBtn:hover .tooltiptext {
  visibility: visible;
}*/
.accordion-item-header:hover {
    background-color: cadetblue;
}
/*.sidebar {
            position: absolute;
            top: 62px;
            left: 672px;
            height: 575px;
            width: 307px;
            z-index: 10;
            background-color:lightblue;
        }*/

/*   .sidebar div {
                width: 98%;
                height: 30%;
                padding: 1px;
            }*/

/*Css Changes for Req 1024 End*/
.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    margin-left: 5px; /* ensures it comes AFTER the text */
}

    .copy-btn svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
    }

    .copy-btn:hover {
        color: #28306c
    }

.copy-msg {
    position: absolute;
    left: 100%; /* place it to the right of the icon */
    top: 50%;
    transform: translateY(-50%); /* vertically center with the icon */
    margin-left: 6px; /* small gap */
    font-size: 0.85rem;
    color: #21234d;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    opacity: 0;
    white-space: nowrap;
    transition: opacity .18s ease;
    pointer-events: none;
}

    .copy-msg.show {
        opacity: 1;
    }

.inr-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.inr-symbol {
    margin-right: 6px; /* gap between ₹ and value */
    font-size: 1rem;
    font-weight: bold;
    color: #666;
    pointer-events: none;
}

.password-wrapper {
    display: flex;
    justify-content: left; /* center horizontally */
    width: 100%;
}

/* Toggle button on right */
.toggle-password {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -18px; /* overlaps input edge */
    z-index: 1;
    margin-top: -2px;
}

    .toggle-password svg {
        stroke: gray; /* icon color */
        transition: stroke 0.2s ease;
    }

    .toggle-password:hover svg {
        stroke: black;
    }
/* Root menu container */
.prefMenu-root {
    background: #2c3e50; /* dark navy */
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    gap: 15px;
}

/* Root level items */
.prefMenu-item {
    list-style: none;
    padding: 6px 12px;
    color: #ecf0f1;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

    /* Hover on root */
    .prefMenu-hover,
    .prefMenu-item:hover {
        background: #3498db;
        color: #fff;
        border-radius: 4px;
    }

/* Submenu container */
.prefMenu-submenu {
    background: #34495e;
    border-radius: 4px;
    padding: 4px 0;
    margin-top: 5px;
}

/* Submenu items */
.prefMenu-subitem {
    display: block;
    padding: 6px 12px;
    color: #ecf0f1;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.2s ease;
}

    /* Submenu hover */
    .prefMenu-subhover,
    .prefMenu-subitem:hover {
        background: #2980b9;
        color: #fff;
        font-weight: bold;
    }

/*Pagination*/
.Menuul .selected.static {
    background-color: white !important;
    color: black !important;
    font-weight: bold;
    border: 1px solid #999;
    border-radius: 4px;
    padding: 2px 5px;
}

.Menuul span {
    background-color: white !important;
    color: black !important;
    font-weight: bold;
    border: 1px solid #999;
    border-radius: 4px;
    padding: 2px 5px;
}

.Menuul a {
    padding: 3px 3px !important;
    margin: 0 4px;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
}

.Menuul a:hover {
    background-color: #ccc;
    color: black;
}