body {
    background: #f1f1f1;
    position: relative;
    font-family: 'Work Sans', sans-serif;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Light.eot');
    src: local('Work Sans Light'), local('WorkSans-Light'), url('../fonts/WorkSans-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/WorkSans-Light.woff2') format('woff2'), url('../fonts/WorkSans-Light.woff') format('woff'), url('../fonts/WorkSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Regular.eot');
    src: local('Work Sans'), local('WorkSans-Regular'), url('../fonts/WorkSans-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/WorkSans-Regular.woff2') format('woff2'), url('../fonts/WorkSans-Regular.woff') format('woff'), url('../fonts/WorkSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Bold.eot');
    src: local('Work Sans Bold'), local('WorkSans-Bold'), url('../fonts/WorkSans-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/WorkSans-Bold.woff2') format('woff2'), url('../fonts/WorkSans-Bold.woff') format('woff'), url('../fonts/WorkSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

blockquote {
    border-left: 5px solid #2e6589;
    background-color: white;
}

a {
    color: #006671;
}

    a, a:hover, a:active, a:visited, a:focus, .btn-add:hover, .btn-add:active, .btn-add:visited, .btn-add:focus {
        outline: 0px none;
        text-decoration: none;
    }

        a:hover, a:focus {
            color: #69cce6;
        }

.clearfix:after, .clearfix:before {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*#Search-Records, #Excel-Records {*/
/*margin-top: 30px;*/
/*}*/
.capitalize-first-letter {
    text-transform: capitalize;
}

#header {
    box-sizing: border-box;
    background-color: #0f4e65;
    border-bottom: 1px solid rgba(0, 0, 0, 0.24);
    box-shadow: 0px 1px 8px 0px #0a2129;
    position: relative;
    padding: 3px;
    z-index: 999;
}

header .navbar-default {
    background: none;
    border: none;
    float: right;
    margin: 0;
}

header .logo {
    padding: 5px 0;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
    line-height: 30px;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color: #fff;
    background-color: rgb(15, 103, 179);
}

.main-content {
    padding: 0 20px;
    margin-top: 0;
}

    .main-content h2 {
        margin: 0;
    }

#loginBox li {
    display: inline-block;
    color: #fff;
}

    #loginBox li a {
        color: #fff;
    }

#loginBox .navbar {
    min-height: auto;
    margin-bottom: 0;
}

.nav > li > a:focus, .nav > li > a:hover {
    background: transparent;
}

.title {
    padding: 10px 0;
    border-radius: 2px 2px 0 0;
    margin-bottom: 10px;
    color: #444;
}

    .title h3 {
        margin: 0px;
        font-size: 20px;
        font-weight: 600;
    }

        .title h3::before {
            content: "\f0f6";
            font-family: FontAwesome;
            padding-right: 5px;
        }

.title-2 {
    background: #2e6589;
    color: #fff;
    border-radius: 2px 2px 0 0;
    margin-bottom: 10px;
    padding: 10px 20px;
}

    .title-2 h3 {
        margin: 0;
        font-size: 18px;
    }

.title-3 h3 {
    margin-top: 0;
    font-weight: 600;
    margin-bottom: 20px;
    color: #000;
    font-size: 16px;
}

.title-4 h4 {
    background: #2e6589;
    color: #fff;
    font-size: 20px;
    margin-bottom: 10px;
    padding: 10px 20px;
    margin-top: 0;
    margin-left: -15px;
    margin-right: -15px;
    border-radius: 0;
}

.btn-add {
    background: #0f97c7;
    color: #ffffff;
    text-shadow: 1px 1px 0px #0f97c7;
    box-shadow: 1px 1px 0px 0px #0f97c7 inset;
    border-radius: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    display: inline-block !important;
}

td .btn-add {
    margin-bottom: 0 !important;
}

.btn:active, .btn:focus, .btn:hover {
    background: #0f4e65;
    color: #ffffff;
}

.table > tbody > tr > td a.btn i {
    color: inherit;
}

.btn-add:active i, .btn-add:focus i, .btn-add:hover i {
    color: #fff;
}

.btn-delete {
    color: #FFF;
    border-radius: 0px;
    padding: 4px 10px;
}

#content-wrap {
    background: #f1f1f1;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
}

.left-menu {
    background: #054556;
    box-shadow: 1px 0 6px 1px #0b2c38;
    position: relative;
    z-index: 99;
}

.right-container {
    margin-top: 0;
    flex: 1;
    -ms-flex: 1;
}

    .right-container .modal-dialog {
        margin-top: 115px;
    }

    .right-container .modal-content {
        border-radius: 0;
        border-bottom: 5px solid #005986;
        padding: 5px;
    }

.border-box {
    background: #d86767;
    border: 1px solid #ddd;
    padding: 3px 10px;
    margin-bottom: 6px;
}

    .border-box label {
        color: #fff;
    }

.modal-header {
    background: #005986;
    color: #fff;
    text-shadow: 1px 1px 0px #000;
    padding: 6px 15px;
    border-radius: 0;
}

.modal-title {
    font-weight: 600;
}

.modal-header .close {
    margin-top: -6px;
    color: #fff;
    /*background: #f90000;*/
    /*height: 22px;*/
    /*width: 22px;*/
    font-size: 35px;
    border-radius: 22px;
    opacity: 1;
    text-align: center;
    font-weight: 600;
}

    .modal-header .close:hover {
        color: #0f97c7;
    }

.modal-footer {
    padding: 0;
}

.form-grop_padding {
    margin-bottom: 10px;
}

fieldset {
    background: #fff;
    border: 1px solid #005680;
    padding: 10px;
    margin-bottom: 6px;
}

legend {
    display: block;
    width: auto;
    padding: 0 6px;
    margin-bottom: 0px;
    font-size: 16px;
    line-height: inherit;
    color: #005680;
    font-weight: 600;
    border: 0;
}

.form-control:focus, .form-control:hover, .form-control:active, .form-control::selection {
    border-color: #d86767;
}

::-moz-selection {
    color: white;
    background: blue;
}

::selection {
    color: white;
    background: blue;
}

label {
    font-weight: 600;
    color: #252525;
    font-size: 13px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.required-field::after {
    content: " *";
    color: #BF0000;
}

.input-group-addon {
    background: #fff;
}

    .input-group-addon i {
        color: #909090;
        font-size: 1.1em;
    }

.input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn {
    border-radius: 0;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background: #f9f9f9;
}

.aside-particular {
    background: #d86767;
    padding: 5px 10px;
    border: 1px solid #a53737;
}

    .aside-particular fieldset {
        border: 1px solid #a53737;
    }

        .aside-particular fieldset legend {
            color: #fff;
            background: #d86767;
        }

.table-bordered {
    border: 0 none;
}

    .table-bordered > thead > tr > th {
        border-bottom-width: 1px;
        background: #3e8198;
        color: #fff;
        border-color: #2c738a;
        font-size: 14px;
    }

content-table {
    margin-bottom: 30px;
}

.content-table .table > tbody > tr > td, .content-table .table > thead > tr > td {
    vertical-align: middle;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 5px 8px;
}

.table-bordered > thead > tr > th {
    padding: 8px 8px;
}

.table-bordered > tr > td {
    font-size: 12px;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background: #f7f7f7;
}

.table > tbody > tr > td a {
    display: block;
    color: #0f97c7;
    font-weight: 600;
}

    .table > tbody > tr > td a i {
        color: #23b500;
        border-right: 1px solid #c7c7c7;
        display: inline-block;
        padding-right: 5px;
        margin-right: 5px;
    }

    .table > tbody > tr > td a:hover i, .table > tbody > tr > td a:focus i {
        color: #f70000;
    }

.width-30 {
    width: 30px;
}

.width-105 {
    width: 105px;
}

.border-none {
    border: none;
}


.btn-groups {
    border-top: 1px solid #DADADA;
    margin-top: 10px;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    text-align: right;
    width: 100%;
}

.btn-group-1 > .btn {
    margin-bottom: 10px;
}

.btn-groups .btn {
    margin-left: 5px;
    border-radius: 2px;
    /*padding: 3px 10px;*/
    display: inline-block;
}


.btn-groups .btn-save {
    box-shadow: 1px 1px 0px 0px #1888E6 inset;
}

.btn-groups .btn-edit {
    background: #ED8600;
}

.btn {
    padding: 5px 15px;
}

    .btn i {
        margin-right: 5px;
    }

.group-btn-2 > a,
.group-btn-2 > button {
    margin-bottom: 10px;
}

.border-top {
    border-top: 1px solid #d8d8d8;
    padding-top: 6px;
}

.add-purchase-item-section {
    padding-top: 20px;
    margin-bottom: 10px;
}

    .add-purchase-item-section .btn-add {
        margin-top: 15px;
    }

.align-t-items-middle.add-purchase-item-section .add-items:after,
.align-t-items-middle.add-purchase-item-section .add-items:before {
    display: none;
}

.align-t-items-middle .add-items fieldset {
    width: 400px;
    margin: 0 auto;
    position: relative;
}

.align-t-items-middle.add-purchase-item-section .purchase-items {
    flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    max-width: 100%;
    margin-right: 0;
}

.align-t-items-middle .purchase-items fieldset {
    width: 600px;
    position: relative;
    margin: 0 auto;
}

.align-t-items-middle .subject-items {
    width: 100%;
    position: relative;
    margin: 0 auto;
}

.align-t-items-middle .add-items fieldset:after {
    content: '';
    left: 0;
    right: 0;
    bottom: -55px;
    position: absolute;
    width: 80px;
    height: 12px;
    background: #0f97c7;
    margin: 0 auto;
}

.align-t-items-middle .add-items fieldset:before {
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    background: #0f97c7;
    font-size: 35px;
    width: 40px;
    margin: 0 auto;
    height: 52px;
    top: 100%;
}

.align-t-items-middle.add-purchase-item-section .add-items .btn-add {
    margin-top: 20px;
}

.main-content img {
    max-width: 100%;
}

.main-content .content-table img {
    max-height: 100px;
    margin-bottom: 15px;
    height: auto;
}

.nav-side-menu .brand {
    font-size: 18px;
    background: #2e6589;
    line-height: 1.3;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: #ffb83d;
}

.nav .menu-dropdown > a {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    background: #2e6589;
    max-width: 100%;
    border-radius: 5px;
    padding: 10px 25px 10px 35px;
    text-align: center;
}

.site-header .nav {
    padding-top: 0px;
}

.menu-dropdown .dropdown-menu {
    top: 100%;
    right: 0;
    background-color: #0f4e65;
    left: auto;
    padding-top: 0;
    padding-bottom: 0;
}

    .menu-dropdown .dropdown-menu a i {
        min-width: 10px;
        padding-right: 5px;
    }

    .menu-dropdown .dropdown-menu a {
        color: #fff;
    }

        .menu-dropdown .dropdown-menu a:hover,
        .menu-dropdown .dropdown-menu a:focus {
            background: #2d89c5;
        }

.menu-dropdown > a > i {
    font-size: 19px;
    vertical-align: middle;
}


/*  Menu css*/
.right-container {
    max-width: calc(100% - 50px);
    -webkit-transition: max-width 0.3s linear;
    -moz-transition: max-width 0.3s linear;
    -ms-transition: max-width 0.3s linear;
    -o-transition: max-width 0.3s linear;
    transition: max-width 0.3s linear;
}

.left-menu {
    max-width: 50px;
    flex: 0 0 50px;
    -ms-flex: 0 0 50px;
    -webkit-transition: max-width 0.3s linear;
    -moz-transition: max-width 0.3s linear;
    -ms-transition: max-width 0.3s linear;
    -o-transition: max-width 0.3s linear;
    transition: max-width 0.3s linear;
}

#menu-content.collapse {
    display: block;
    visibility: visible;
}

    #menu-content.collapse > li a {
        text-align: center;
        font-size: 16px;
    }

#menu-content .sub-menu.collapse {
    height: 0;
    -webkit-transition: height 0.5s linear;
    -moz-transition: height 0.5s linear;
    -ms-transition: height 0.5s linear;
    -o-transition: height 0.5s linear;
    transition: height 0.5s linear;
}

    #menu-content .sub-menu.collapse.in {
        height: 100%;
    }


.nav-side-menu .brand {
    padding: 0;
    font-size: 25px;
    text-align: center !important;
    position: relative;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}


#content-wrap.d-menu ul li.nav-list .sub-menu.collapse.in {
    display: block;
}

.menu-content li.nav-list > a {
    background: #265675;
}

.menu-content li.nav-list.collapsed a {
    background: #054556;
}

.menu-content li.nav-list > a:hover {
    background: #265675;
}

#menu-content .nav-list:before,
#menu-content .nav-list.collapsed:before,
.nav-side-menu .brand span {
    display: none;
}

.nav-side-menu .brand i {
    display: block;
}

#menu-content.collapse > li > a > .menu-text {
    display: none;
    visibility: hidden;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.left-menu .nav-side-menu .toggle-btn {
    position: static;
    width: 100%;
    background: none;
    font-size: 25px;
    padding: 15px;
    cursor: pointer;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#content-wrap.d-menu .left-menu {
    max-width: 250px;
    flex: 0 0 250px;
    -ms-flex: 0 0 250px;
}

#content-wrap.d-menu .right-container {
    max-width: calc(100% - 250px);
}

#menu-content.collapse.in > li a {
    text-align: left;
    font-size: 15px;
}

#content-wrap.d-menu .left-menu .toggle-btn {
    position: absolute;
    right: 10px;
    top: 7px;
    width: auto;
    padding: 0;
    font-size: 30px;
    background: none;
    text-align: right;
}

    #content-wrap.d-menu .left-menu .toggle-btn:hover {
        color: #00b6ff;
    }

    #content-wrap.d-menu .left-menu .toggle-btn:before {
        content: '\f100';
    }

#menu-content li.nav-list .sub-menu {
    position: absolute;
    left: 56px;
    top: 0;
    z-index: 9999;
    width: 200px;
}
/*#menu-content li.nav-list .sub-menu.collapse.in{*/
/*display: block;*/
/*}*/

.nav-side-menu li.nav-list ul.sub-menu li a {
    background: #0f4e65;
    text-align: left !important;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
}

#content-wrap.d-menu ul li.nav-list .sub-menu {
    position: static;
    left: auto;
    z-index: 9999;
    width: 100%;
}

    #content-wrap.d-menu ul li.nav-list .sub-menu li a {
        text-align: center;
        color: #fff;
        font-size: 12px;
        background-color: #04303c;
    }
        /*.nav-side-menu .menu-content > li.nav-list > a{*/
        /*background: #08C;*/
        /*}*/
        /*#content-wrap.d-menu ul > li.nav-list > a,*/
        /*.nav-side-menu .menu-content > li.nav-list.collapsed > a{*/
        /*background: none;*/
        /*}*/
        .nav-side-menu li.nav-list ul.sub-menu li a:hover,
        #content-wrap.d-menu ul li.nav-list ul.sub-menu li.active a,
        #content-wrap.d-menu ul li.nav-list .sub-menu li a:hover {
            background: #08C;
            color: #fff;
        }




#menu-content.in .nav-list.collapsed:before,
#content-wrap.d-menu .nav-side-menu .brand span,
#menu-content.collapse.in .nav-side-menu .brand span,
#menu-content.navbar-collapse.in > li a .menu-text {
    display: inline-block;
    visibility: visible;
}

#content-wrap.d-menu .nav-side-menu .brand span {
    padding-top: 10px;
    padding-bottom: 10px;
}

#content-wrap.d-menu ul .nav-list:before {
    display: block;
}

/*End menu css*/

.header-logo {
    float: left;
    padding-right: 20px;
}

.header-date {
    padding: 0 0 10px 0;
    color: #fff;
}

.site-header.navbar {
    margin-bottom: 0;
}

.site-heading {
    display: inline-block;
    text-align: center;
}

    .site-heading h2 {
        color: #f8f8f8;
        padding-top: 0px;
        margin-top: 0;
        font-size:20px;
    }

    .site-heading h3 {
        color: #f8f8f8;
        padding-top: 0px;
        margin-top: 0;
        font-size: 25px;
    }

/*ul.nav {*/
/*float: right;*/
/*}*/

.header-logo a {
    display: block;
}

.header-logo img {
    width: 55px;
    margin: 0 auto;
    display: block;
}

#loginButton {
    /*display: inline-block;*/
    z-index: 30;
    cursor: pointer;
    display: none;
    behavior: url(../pie/PIE.htc);
    position: relative;
}

#loginBox {
    position: relative;
}

    #loginBox i {
        padding-right: 7px;
    }

.nav-side-menu .toggle-btn:hover {
    background-color: #00b6ff;
}

.file {
    visibility: hidden;
    position: absolute;
}

.bulk-entry label {
    display: block;
    width: 100%;
}

.btn {
    border-radius: 2px;
}

    .btn, .btn:hover, .btn:focus {
        outline: none !important;
        color: #fff;
        border: none;
    }

.aside-particular table tr th {
    padding-right: 15px;
}

.bulk-entry {
    padding-bottom: 10px;
}

.pad-left-0, .print-pad-left-0 {
    padding-left: 0px;
}

.aside-particular input {
    margin-bottom: 15px;
}

.aside-particular {
    margin-bottom: 10px;
}

.pad-left-0 .btn-add, .user-top .form-group .btn-add {
    margin-bottom: 0;
}

.print-pad-left-0 .display, .user-top .form-group .btn-add, .hotp #Search-btn, .radl .btn, .iibi button, .ut a.btn-success, .search-sec3 .btn-primary, .search-sec3 .btn-info, .hotp .btn-add {
    margin-top: 20px;
}

.rimd #Search-Records {
    margin-top: 0px;
}

.table-responsive {
    /*max-height: 600px;*/
    font-size: 13px;
}

.validation {
    color: red;
}

.short-description {
    overflow: hidden;
    max-width: 50ch;
}

.search-enquiry {
    float: right;
    margin-top: 3px;
    margin-right: 10px;
}

.divenquiry {
    width: 750px;
}

.divenquiryuser {
    font-weight: bold;
}

.divenquirycontent {
    word-wrap: break-word;
}

/*grand total label css*/
.show-grand-total label {
    display: block;
}

.show-grand-total .grand-total-value {
    font-size: 30px;
    border-bottom: 1px solid #444;
    padding: 5px;
}

.legacy-site-footer p {
    padding: 0;
    margin: 0;
}

.legacy-site-footer {
    padding: 10px 0;
    background: #0f4e65;
    text-align: center;
    color: #fff;
    position: relative;
    box-shadow: 0 0 5px 1px #0b2c38;
    z-index: 999;
}

    .legacy-site-footer a.fb i {
        color: #fff;
        background: #3B5998;
        border-radius: 50%;
        height: 20px;
        width: 20px;
        font-size: 11px;
        line-height: 20px;
        text-align: center;
    }

.copyright-company {
    color: #fff;
}


/* new code */
.nav > li {
    outline: none;
}

.main-title {
    margin-bottom: 10px;
    border-bottom: 3px solid #0f4e65;
    padding-bottom: 0;
}

    .main-title h3 {
        background: #0f4e65;
        display: inline-block;
        color: #fff;
        padding: 10px 10px;
        margin-bottom: 0;
        margin-top: 0;
        font-size: 20px;
    }

.nav > li > a:focus,
.nav > li > a:hover,
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background: #2d89c5;
    border: none;
}

.nav > .menu-dropdown > a {
    position: relative;
}

    .nav > .menu-dropdown > a > i {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

.menu-dropdown > a > i.fa-user {
    left: 6px;
    border-right: 1px solid #fff;
    padding-right: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.menu-dropdown > a > i.fa-angle-down {
    right: 7px;
    font-size: 16px;
}

#menu-content .nav-list:before {
    position: absolute;
    right: 0;
    top: 5px;
    z-index: 9;
}

.nav-side-menu li {
    position: relative;
}

.nav-side-menu .sub-menu li a {
    padding-left: 35px;
    position: relative;
    line-height: 1.3;
    padding-top: 10px;
    padding-bottom: 10px;
}

.nav-side-menu ul .sub-menu li a:before {
    position: absolute;
    left: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 0;
}

.nav-side-menu li a {
    border-color: #000;
}

.nav-side-menu > li > a.nav-list {
    background: #2e6589;
    color: #fff;
}

#header.fixed-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    padding: 10px 0;
}

    #header.fixed-header .header-logo a,
    #header.fixed-header .site-heading h3,
    #header.fixed-header nav .header-date {
        display: none;
    }

.tabs_header > button {
    margin-bottom: 0;
}



/* animation css */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

.table-sty-1 {
    margin-bottom: 0;
    overflow: auto;
    max-height: 400px;
    padding-left: 2px;
}

    .table-sty-1 .table-header,
    .table-sty-1 .table-body {
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
    }

        .table-sty-1 .table-header > div {
            background-color: #054556;
            color: #fff;
        }

        .table-sty-1 .table-header > div,
        .table-sty-1 .table-body > div {
            padding: 5px 10px;
            border-bottom: 1px solid #000;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            margin-left: -2px;
            margin-right: 1px;
        }

    .table-sty-1 .item {
        -ms-flex: 0 0 150px;
        flex: 0 0 150px;
        max-width: 150px;
    }

    .table-sty-1 .sec-sn {
        -ms-flex: 0 0 45px;
        flex: 0 0 45px;
        max-width: 45px;
    }

    .table-sty-1 .sec-subject,
    .table-sty-1 .sec-fee-type,
    .table-sty-1 .sec-name {
        -ms-flex: 0 0 350px;
        flex: 0 0 350px;
        max-width: 350px;
    }

    .table-sty-1 .sec-dr-cr {
        -ms-flex: 0 0 85px;
        flex: 0 0 85px;
        max-width: 85px;
    }

    .table-sty-1 .width60 {
        -ms-flex: 0 0 60px;
        flex: 0 0 60px;
        max-width: 60px;
    }

    .table-sty-1 .sec-account-head {
        -ms-flex: 0 0 235px;
        flex: 0 0 235px;
        max-width: 235px;
    }

    .table-sty-1 .sec-current-balance {
        -ms-flex: 0 0 140px;
        flex: 0 0 140px;
        max-width: 140px;
    }

    .table-sty-1 .sec-amt {
        -ms-flex: 0 0 130px;
        flex: 0 0 130px;
        max-width: 130px;
        text-align: right;
    }

        .table-sty-1 .sec-amt input {
            text-align: right;
        }

    .table-sty-1 .sec-remuneration {
        -ms-flex: 0 0 260px;
        flex: 0 0 260px;
        max-width: 260px;
    }

    .table-sty-1 .sec-narration {
        -ms-flex: 0 0 304px;
        flex: 0 0 304px;
        max-width: 304px;
    }

    .table-sty-1 .sec-examiner {
        -ms-flex: 0 0 250px;
        flex: 0 0 250px;
        max-width: 250px;
    }

    .table-sty-1 .sec-tabs-sty-1 {
        -ms-flex: 0 0 300px;
        flex: 0 0 300px;
        max-width: 300px;
    }

    .table-sty-1 .sec-action {
        -ms-flex: 0 0 180px;
        flex: 0 0 180px;
        max-width: 180px;
    }

    .table-sty-1 #voucher-items .table-body > div {
        background: #fff;
    }

    .table-sty-1 #voucher-items .table-body:nth-child(even) > div {
        background: #eaeaea;
    }

.table-sty-3 tr.table-header > th,
.table-sty-3 tr.table-header > td {
    background: #054556;
    color: #fff;
}
.overflow-y-none{
    overflow-y:visible;
    overflow-x:auto;
    max-height:100%
}
.tabs-sty-1 {
    margin-bottom: 20px;
    padding: 0;
    border: 1px solid #ccc;
}

    .tabs-sty-1#journal-form {
        clear: both;
    }

    .tabs-sty-1 .well {
        border: none;
        box-shadow: none;
        position: relative;
        padding-top: 0;
        background: none;
        -webkit-box-shadow: none;
    }

    .tabs-sty-1 .voucher-header {
        margin-bottom: 20px;
    }

.total-section {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    border: 1px solid #ccc;
}

.total-section {
    background: #fff;
    border: 1px solid #000;
    margin-bottom: 30px;
}

    .total-section > div {
        flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        max-width: 50%;
        padding: 5px 10px;
    }

.table-body input,
.table-body textarea {
    width: 100%;
}

#remuneration-table-div.table-sty-1 .sec-amt {
    flex: 0 0 100px;
    -ms-flex: 0 0 100px;
    max-width: 100px;
}

#remuneration-table-div.table-sty-1 .sec-remuneration {
    flex: 0 0 500px;
    -ms-flex: 0 0 500px;
    max-width: 500px;
}

#remuneration-table-div.table-sty-1 .sec-amt {
    flex: 0 0 200px;
    -ms-flex: 0 0 200px;
    max-width: 200px;
}

.total-section .total-cr {
    border-left: 1px solid #000;
}

.total-section > div > span {
    font-weight: 600;
    color: #252525;
    font-size: 13px;
    margin-right: 10px;
}

.total-section > div input {
    background: none;
    text-align: center;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #000;
    border-radius: 0;
    font-weight: 600;
    color: #0f97c7;
}

#content-data-table_wrapper {
    background-color: #d2dcdc;
    padding: 10px;
    margin-bottom: 20px !important;
}


.tabs-sty-1 .well .add-field-btn > button + button {
    margin-left: 5px;
}

.tabs-sty-1 .well {
    margin-bottom: 0;
}

.form-control {
}

.tabs-sty-1 .well .add-field-btn {
    position: absolute;
    top: 0;
    right: 20px;
    z-index: 999;
}

.search-sty-1 {
    padding: 10px;
    margin-bottom: 10px;
    border: 3px solid #b1afaf;
}

    .search-sty-1 .select-sty,
    .select-sty-3 {
        display: flex !important;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -ms-flex-align: flex-end;
        align-items: flex-end;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: -15px;
        margin-right: -15px;
    }

.select-sty-3 {
    -ms-flex-align: start;
    align-items: start;
}
    /*.select-sty .form-group{*/
    /*margin-bottom: 0;*/
    /*}*/
    .search-sty-1 .select-sty > div label,
    .select-sty-3 > div label {
        margin-top: 0;
    }

.select-sty > div {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 10px;
    position: relative;
}

    .select-sty > div div {
        margin-bottom: 0;
    }

.search-sty-1 .select-sty > div + div:before,
.search-sty-1 #monthly-Search > div > div + div:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    background: #05455638;
    height: 34px;
    box-shadow: 0 0 4px 2px #306a902b;
}

.search-sty-2 .select-sty {
    display: flex !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.selection .select2-selection {
    width: 100%;
}

.search-sty-1 .select-sty > div.item,
.select-sty-3 > div.item,
.search-sty-2 .select-sty > div.item {
    flex: 0 0 20%;
    -ms-flex: 0 0 20%;
    max-width: 20%;
}

.select-sty-3 > div.mb0 {
    margin-bottom: 0;
}

.select-sty > div input,
.select-sty > div select {
    width: 100%;
    max-width: 100%;
}

.select2 {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.select-sty .selection .select2-selection {
    width: 100% !important;
    max-width: 100%;
    height: 34px;
}

.selection .select2-selection {
    height: 34px;
}

    .selection .select2-selection .select2-selection__rendered {
        padding: 3px 12px;
    }

    .selection .select2-selection .select2-selection__arrow {
        height: 34px;
    }

        .selection .select2-selection .select2-selection__arrow .presentation > b {
            border-color: #555 transparent transparent transparent;
            border-width: 7px 3px 0 3px;
        }

.select-sty > div input[type="checkbox"] {
    width: 30px;
}


.select-sty .inner-flex-gup {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

    .select-sty .inner-flex-gup .item {
        flex: 0 0 20%;
        -ms-flex: 0 0 20%;
        max-width: 20%;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 10px;
    }

.search-sty-1 .select-sty button[type="submit"] {
    margin-bottom: 0;
}

.search-sty-1 button[type="submit"] {
    padding: 8px 20px 8px 30px;
}

.checkbox-sty-1 {
    margin-bottom: 5px;
}

    .checkbox-sty-1 > div {
        position: relative;
        display: inline-block;
        padding-right: 25px;
    }

/*.checkbox-sty-1 input[type="checkbox"]{
    display:none;
}*/
.checkbox-sty-1 label,
.checkbox-sty-2 label{
    
    margin-top: 0;

}
.checkbox-sty-2 label{
    margin-bottom: 1px;
}

.checkbox-sty-1 > div input[type="checkbox"] + input + label:before,
.checkbox-sty-1 > div input[type="checkbox"] + input + input + label:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    height: 18px;
    width: 18px;
    border: 2px solid #0f97c7;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.checkbox-sty-1 > div input[type="checkbox"] + input + label:after,
.checkbox-sty-1 > div input[type="checkbox"] + input + input + label:after {
    content: '\f00c';
    position: absolute;
    top: 50%;
    right: 3px;
    font-weight: 100;
    font-family: FontAwesome;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    color: #fff;
}

.checkbox-sty-1 > div input[type="checkbox"]:checked + input + label:before,
.checkbox-sty-1 > div input[type="checkbox"]:checked + input + input + label:before,
.checkbox-sty-2 > div input[type="checkbox"]:checked + input + label:before,
.checkbox-sty-2 > div input[type="checkbox"]:checked + input + input + label:before {
    background: #0f97c7;
}

.checkbox-sty-1 > div input[type="checkbox"]:checked + input + label:after,
.checkbox-sty-1 > div input[type="checkbox"]:checked + input + input + label:after,
.checkbox-sty-2 > div input[type="checkbox"]:checked + input + label:after,
.checkbox-sty-2 > div input[type="checkbox"]:checked + input + input + label:after {
    opacity: 1;
}

.checkbox-sty-2 label {
    width: 100%;
    margin-bottom:1px;
    position: relative;
    margin-top: 10px;
}

/*.checkbox-sty-2 > div input[type="checkbox"] + input + label:before,
.checkbox-sty-2 > div input[type="checkbox"] + input + input + label:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    width: 30px;
    border: 2px solid #0f97c7;
}

.checkbox-sty-2 > div input[type="checkbox"] + input + label:after,
.checkbox-sty-2 > div input[type="checkbox"] + input + input + label:after {
    content: '\f00c';
    position: absolute;
    bottom: 5px;
    left: 9px;
    text-align: center;
    font-weight: 100;
    font-family: FontAwesome;
    opacity: 0;
    color: #fff;
}*/
.checkbox-sty-2 .form-control {
    width: 33px;
}


.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

.mt10 {
    margin-top: 10px;
}

.mb10 {
    margin-bottom: 10px;
}

.table-responsive .sec-roll input {
    width: 50px;
}

.light-b-t {
    padding-top: 5px;
    border-top: 1px solid #dad4d4;
    margin-top: 5px;
}

.lign-top-b {
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

.light-box-b {
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid #b1afaf;
}

.box-title {
    background-color: #0f97c7;
    padding: 10px;
    margin-bottom: 30px;
    font-size: 20px;
    color: #fff;
}

    .box-title label {
        font-size: 20px;
        margin-right: 5px;
        margin-top: 0;
        margin-bottom: 0;
    }

.blue-box-b {
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid #0f97c7;
}

.std-info-box > div {
    text-align: center;
}

    .std-info-box > div + div {
        border-left: 1px solid #dad4d4;
    }

    
/*commented by me
    .no-off-checkbox div input[type="checkbox"] {
    display: none;
}*/

.no-off-checkbox > div {
    position: relative;
}

/*.no-off-checkbox input[type="checkbox"] {
    display: none;
}*/

.no-off-checkbox > div label {
    font-size: 0;
    cursor: pointer;
}

.no-off-checkbox div input[type="checkbox"] + input + label:before {
    content: '\f204 ';
    font-size: 35px;
    font-family: FontAwesome;
    color: #0f97c7;
}

.no-off-checkbox div input[type="checkbox"]:checked + input + label:before {
    content: '\f205';
}
/*.table-overflow{*/
/*max-height: 580px;*/
/*overflow: auto;*/
/*}*/
.table-overflow .table-responsive {
    overflow-x: inherit;
    max-height: 100%;
    min-height: 100%;
}

.box-sty-2 {
    padding: 0 10px 10px 10px;
    position: relative;
}

    .box-sty-2 .title-2 {
        margin-bottom: 0;
        margin-left: -10px;
        margin-right: -10px;
    }

    .box-sty-2 .button-group-1 {
        position: absolute;
        right: 10px;
        top: 65px;
    }

        .box-sty-2 .button-group-1 .btn {
            margin-bottom: 0;
        }

.inner-section {
    padding-bottom: 20px;
}
/*.button-group-1 button{*/
/*margin-bottom: 0;*/
/*}*/
.box-sty-2 .table-body input,
.box-sty-2 .table-body textarea {
    width: 100%;
}

.table-sty-2 .search-sty-1 button[type="submit"] {
    margin-left: 10px;
}

.button-group-1 .button-item {
    display: inline-block;
}

.table-sty-2 .search-sty-1 .select-sty .item {
    flex: 0 0 19.33%;
    -ms-flex: 0 0 19.33%;
    max-width: 19.33%;
}

.select-sty .full-item {
    flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    max-width: 100%;
}

.box-border {
    padding: 10px;
    margin-bottom: 10px;
    border: 3px solid #b1afaf;
}

.box-border {
    position: relative;
}

    .box-border .button-items {
        position: absolute;
        top: 3px;
        right: 5px;
    }

.student-section.search-sty-1,
.employee-section.search-sty-1 {
    border: none;
    padding: 0;
    margin-bottom: 0;
}

.student-detail {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .student-detail > div {
        flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        max-width: 25%;
    }

.sub-title-2 h3 {
    color: #2e6589;
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 15px;
    padding-right: 5px;
    padding-left: 5px;
}

.bd-b-10 {
    border-bottom: 3px solid #000;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.bd-lb-5 {
    border-bottom: 2px solid #cacaca;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

#submitbutton {
    margin-right: 25px;
}

.box-sty-3 .select-sty-2 .form-grop_padding,
.box-sty-3 .select-sty-2 .form-group {
    margin-bottom: 0;
}

.box-sty-3 .table-responsive table {
    margin-bottom: 0;
}

/* ==========================================================================
   Universal Button Modernization & No Pseudo-Icons Standard
   ========================================================================== */
.btn::before, .btn::after,
button::before, button::after,
button#Search-Records::before, button#Search-Records::after,
button#btn-search::before, button#btn-search::after,
.btn-search::before, .btn-search::after,
.btn-primary::before, .btn-primary::after,
.btn-secondary::before, .btn-secondary::after,
.btn-danger::before, .btn-danger::after,
.btn-success::before, .btn-success::after,
.btn-info::before, .btn-info::after {
    display: none !important;
    content: none !important;
}

.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.btn > i {
    position: static !important;
    transform: none !important;
    line-height: 1 !important;
}

.btn-delete {
    background-color: #dc3545;
    border: none;
    box-shadow: none;
}

.table > tbody > tr > td .btn-view {
    color: #fff;
    display: inline-block;
}

.table > tbody > tr > td .btn {
    color: #fff;
}

.btn-excel-flie {
    background: #28a745;
    margin-bottom: 10px;
    text-shadow: none;
    box-shadow: none;
}

.login-input, .login-psw {
    overflow: hidden;
    clear: bottom;
}

.cancel-btn {
    color: #f1f1f1;
    font-size: 15px;
    background-color: #ea2a2a;
    text-shadow: none;
    box-shadow: none;
}
/*.cancel-btn:before{*/
/*content: '\f00d';*/
/*}*/
/*.print-btn:before{*/
/*content: '\f02f';*/
/*}*/



/**/
.l-r-side {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    margin-bottom: 10px;
}

    .l-r-side .left-side,
    .l-r-side .right-side {
        flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        max-width: 50%;
    }

.add-purchase-item-section {
    background: #fff;
    padding: 10px 5px;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}

    .add-purchase-item-section > div {
        position: relative;
    }

    .add-purchase-item-section .add-items {
        flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        max-width: 100%;
        padding-bottom: 40px;
    }

        .add-purchase-item-section .add-items .btn-add {
            margin-top: 37px;
            margin-bottom: 0;
        }

        .add-purchase-item-section .add-items:before {
            content: '';
            left: 0;
            position: absolute;
            right: 0;
            bottom: -11px;
            text-align: center;
            background: #0f97c7;
            font-size: 35px;
            width: 40px;
            margin: 0 auto;
            height: 52px;
        }

        .add-purchase-item-section .add-items:after {
            content: '';
            left: 0;
            right: 0;
            bottom: -11px;
            position: absolute;
            width: 80px;
            height: 12px;
            background: #0f97c7;
            margin: 0 auto;
        }

    .add-purchase-item-section > div > fieldset {
        margin-bottom: 0;
    }

    .add-purchase-item-section .purchase-items {
        flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        max-width: 75%;
        margin-right: 20px;
    }

    .add-purchase-item-section .show-grand-total {
        background-color: #2f6689;
        color: #fff;
        padding: 5px;
    }

    .add-purchase-item-section .show-grand-total {
        flex: 0 0 20%;
        -ms-flex: 0 0 20%;
        max-width: 20%;
    }

.show-grand-total label {
    font-size: 18px;
    color: #fff;
    margin-top: 0;
}


.m-top {
    padding-top: 200px;
}

.fav-menu a.fav-menu-item {
    display: flex;
    flex-direction: column;
    border: 2px solid #2d89c5;
    margin-bottom: 20px;
    height: 120px;
    background: #fff;
}

.fav-menu .fav-menu-item h4 {
    color: #fff;
    margin: 0;
    background-color: #2d89c5;
    padding: 5px;
    text-align: center;
}

.fav-menu .fav-menu-item .icon-holder {
    text-align: center;
    font-size: 45px;
    color: #2e6589;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.fav-section {
    margin-bottom: 10px;
}

.fav-nav {
    background-color: #2e6589;
    margin-bottom: 20px;
}

    .fav-nav h4 {
        color: #fff;
        padding-left: 15px;
    }

    .fav-nav h4 {
        float: left;
    }

    .fav-nav ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
        text-align: right;
    }

    .fav-nav li {
        display: inline-block;
        color: #fff;
    }

        .fav-nav li + li {
            margin-left: -5px;
        }

        .fav-nav li a,
        .fav-nav li button {
            color: #fff;
            font-size: 15px;
            padding: 10px;
            display: block;
            background: none;
            outline: none;
            border-left: 1px solid #ccc;
            border-right: none;
            border-top: none;
            border-bottom: none;
            position: relative;
            -webkit-transition: all 0.5s linear;
            -moz-transition: all 0.5s linear;
            -ms-transition: all 0.5s linear;
            -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
        }

        .fav-nav li button {
            padding-right: 30px;
        }

            .fav-nav li button:before {
                content: '\f106';
                position: absolute;
                top: 4px;
                right: 8px;
                font-size: 25px;
                font-family: FontAwesome;
            }

            .fav-nav li button:hover,
            .fav-nav li a:hover {
                background: #2d89c5;
            }

            .fav-nav li button.btn-dropdown.collapsed:before {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }

.box-sty-4 {
    border: 1px solid #2e6589;
    padding: 0 15px 20px 15px;
    background-color: #fff;
    margin-bottom: 20px;
}

    .box-sty-4 .title-2 {
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 0;
    }

    .box-sty-4 .img-holder {
        padding-top: 40px;
    }

    .box-sty-4 input[type="file"] {
        width: 100%;
    }

.box-sty-5 {
    border: 1px solid #2e6589;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 20px;
}

    .box-sty-5 label {
        display: block;
        color: #054556;
    }

    .box-sty-5 input {
        width: 100%;
    }

    .box-sty-5 .form-group {
        margin-top: 0;
    }

.box-sty-6 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #2e6589;
    margin-bottom: 10px;
    height: 100%;
}

    .box-sty-6 .img-holder {
        flex: 0 0 30%;
        -ms-flex: 0 0 30%;
        max-width: 30%;
        margin-right: 5px;
        margin-left: 5px;
        text-align: center;
    }

    .box-sty-6 .content {
        flex: 0 0 70%;
        -ms-flex: 0 0 70%;
        max-width: 70%;
        background: #fff;
        padding: 5px;
        height: 100%;
        word-break: break-word;
    }

.label-b label {
    color: #2e6589;
    display: block;
}

.box-sty-6 .content .employee-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .box-sty-6 .content .employee-info li {
        margin-bottom: 5px;
    }

        .box-sty-6 .content .employee-info li span {
            font-size: 14px;
            font-weight: 600;
        }

.box-sty-6 .content h4.sub-title-1 {
    margin-top: 0;
    padding: 10px 10px 10px 5px;
    background-color: #2e89c5;
    color: #fff;
    border-left: 10px solid #104f66;
    margin-bottom: 10px;
}

.sub-title-3 h3 {
    color: #0f97c7;
    border-bottom: 3px solid #000;
    margin-bottom: 20px;
    padding-bottom: 5px;
    margin-top: 0;
}

.equal-h {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.fee-breakdown-table table input[type="checkbox"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.modal .modal-content {
    padding: 0;
}

.status-section .info-holder > .row > div:nth-child(4) {
    clear: both;
    overflow: hidden;
}

.add-admission-fee .add-items,
.add-admission-fee .purchase-items {
    flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    max-width: 100%;
}

    .add-admission-fee .add-items > fieldset {
        max-width: 300px;
        margin: 0 auto;
    }

    .add-admission-fee .purchase-items > fieldset {
        margin: 0 auto;
        max-width: 80%;
    }

#content-wrap .dataTables_wrapper span > .paginate_button {
    background: #2e6589 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: inline-block;
    padding: 4px 10px !important;
}

#content-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
#content-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    background: #1a8ba9 !important;
    color: #fff !important;
    position: relative;
    cursor: pointer;
}

#content-wrap .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #17687d !important;
    border-color: #17687d !important;
}

#content-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.previous:before,
#content-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.next:before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: FontAwesome;
    font-size: 20px;
}

#content-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.previous:before {
    left: 8px;
    content: '\f100';
}

#content-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.next:before {
    right: 8px;
    content: '\f101 ';
}

#content-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    padding-right: 30px !important;
    padding-left: 10px !important;
    margin-left: 20px;
}

#content-wrap .dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    margin-right: 20px;
    padding-left: 30px !important;
    padding-right: 10px !important;
}

#content-wrap .dataTables_wrapper span > .paginate_button.current,
#content-wrap .dataTables_wrapper span > .paginate_button.current:hover {
    background-color: #0f97c7 !important;
}

.dataTables_info {
    color: #0f4e65 !important;
}

.dataTables_length label,
.dataTables_filter label {
    margin-top: 0;
    color: #2e6589;
}

    .dataTables_filter label input,
    .dataTables_length label select {
        color: #000;
    }

    .dataTables_filter label input {
        border: 1px solid #2e658975;
        padding: 5px;
        outline: none;
    }

.sms-form .sms-item textarea {
    width: 400px;
    height: 200px;
}

.sms-form .sms-item select,
.sms-form .sms-item input {
    width: 400px;
}

table#mytable thead .border-light,
table#ledger-detail-table thead .border-light {
    border: 1px solid #ddd;
}

.password-section input {
    width: 100%;
}

.tabs-sty-2 {
    margin-bottom: 30px;
}

    .tabs-sty-2 ul.tab-menu-3 {
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style: none;
        border-bottom: 5px solid #0f97c7;
    }

        .tabs-sty-2 ul.tab-menu-3 li {
            display: inline-block;
        }

            .tabs-sty-2 ul.tab-menu-3 li a {
                display: block;
                padding: 10px 24px 8px;
                background-color: #FFF;
                outline: none;
                margin-right: 46px;
                z-index: 2;
                position: relative;
                cursor: pointer;
                color: #777;
                text-transform: uppercase;
                font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif;
                transition: all 250ms ease;
            }

    .tabs-sty-2 .tab-items.tab-content {
        background: #fff;
        padding: 30px 15px 15px 15px;
    }

    .tabs-sty-2 ul.tab-menu-3 li a:before,
    .tabs-sty-2 ul.tab-menu-3 li a:after {
        display: block;
        content: " ";
        position: absolute;
        top: 0;
        height: 100%;
        width: 44px;
        background-color: #FFF;
        transition: all 250ms ease;
    }

    .tabs-sty-2 ul.tab-menu-3 li a:before {
        right: -24px;
        transform: skew(30deg, 0deg);
        box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
        border-radius: 0 8px 0 0;
    }

    .tabs-sty-2 ul.tab-menu-3 li a:after {
        left: -24px;
        transform: skew(-30deg, 0deg);
        box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
        border-radius: 8px 0 0 0;
    }

    .tabs-sty-2 ul.tab-menu-3 li.ui-tabs-active a {
        z-index: 3;
    }

    .tabs-sty-2 ul.tab-menu-3 li.ui-tabs-active.ui-state-active a,
    .tabs-sty-2 ul.tab-menu-3 li.ui-tabs-active.ui-state-active a:before,
    .tabs-sty-2 ul.tab-menu-3 li.ui-tabs-active.ui-state-active a:after {
        background-color: #0f97c7;
        color: #fff;
    }

#calender {
    margin-bottom: 30px;
}

    #calender .fc-header-toolbar {
        background-color: #054556;
        color: #fff;
        padding: 15px 30px;
        margin-bottom: 0;
        position: relative;
    }

    #calender .fc-content-skeleton .fc-day-top {
        font-size: 18px;
        padding: 10px 15px 0 15px;
    }
    /*.fc-content-skeleton .fc-day-grid-event .fc-content{*/
    /*white-space: normal;*/
    /*}*/
    #calender .fc-button-group .fc-state-default {
        background: #2d89c5;
        color: #fff;
        text-transform: capitalize;
    }

    #calender .fc-button-group .fc-prev-button,
    #calender .fc-button-group .fc-next-button {
        background: none;
    }

        #calender .fc-button-group .fc-prev-button:hover,
        #calender .fc-button-group .fc-next-button:hover {
            color: #2d89c5;
        }

    #calender .fc-left .fc-today-button {
        background-color: #2f6689;
        color: #fff;
        opacity: 0.50;
        text-shadow: none;
        font-size: 16px;
        text-transform: capitalize;
        position: absolute;
        left: 50%;
        background-image: inherit;
    }

        #calender .fc-left .fc-today-button:hover,
        #calender .fc-left .fc-today-button.fc-state-disabled {
            background-color: #2d89c5;
            opacity: 1;
        }

    #calender .fc-button-group .fc-state-default.fc-state-active {
        background-color: #fff;
        color: #000;
    }

    #calender table .fc-head-container.fc-widget-header thead tr {
        background-color: #2d89c5;
        color: #fff;
    }

    #calender table .fc-head-container.fc-widget-header thead tr {
        background-color: #2d89c5;
        color: #fff;
    }

    #calender table .fc-widget-header thead tr th {
        padding: 5px 0;
        font-size: 18px;
        border: 2px solid #fff;
    }

    #calender table .fc-week .fc-bg tr > .fc-day {
        background-color: #cccccc;
        border: 2px solid #fff;
    }

    #calender table .fc-content-skeleton tr td {
        border: none;
    }

.fc-button-group .fc-prev-button.fc-button,
.fc-button-group .fc-next-button.fc-button {
    top: 50%;
    position: absolute;
    z-index: 999;
    background: none;
    border: none;
    box-shadow: none;
    font-size: 24px;
    transform: translateY(-50%);
    padding: 0;
    outline: none;
}

.fc-button-group .fc-prev-button.fc-button {
    left: 20%;
    border-radius: 10px 0 0 10px;
}

.fc-button-group .fc-next-button.fc-button {
    right: 30%;
    border-radius: 0 10px 10px 0;
}
/* new code end */



/*nepali date time picker anchor display*/
div#npd-table-div table td.ndp-selected a,
div#npd-table-div table td.ndp-current a {
    display: block;
}

.ver-mode-txt {
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    display: -ms-flex;
    display: flex;
    width:100%;
    align-items: center;
}

table .enter-working-cell {
    width: 60px;
}

.menu-toggle{
   display:none;
}
@media only screen and (max-width: 1199px) {

    .nav-side-menu li a {
        font-size: 13px;
    }

    footer .content-wrapper .container.text-center {
        padding-left: 25%;
    }

    .print-pad-left-0 {
        padding-left: 15px;
    }

    .pad-left-0 {
        padding-left: 15px;
    }

        .pad-left-0 #Search-Records, .print-pad-left-0 .display, .search-sec3 .btn-info {
            margin-top: 0px;
        }

    .recpt-exc2 button {
        margin-top: 20px;
    }

    .hotp .btn-success {
        margin-left: -15px;
    }
}

@media only screen and (max-width: 991px) {
    .select-sty .inner-flex-gup .item {
        flex: 0 0 33.33%;
        -ms-flex: 0 0 33.33%;
        max-width: 33.33%;
    }

    .add-purchase-item-section .purchase-items {
        flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        max-width: 100%;
    }

    .add-purchase-item-section .show-grand-total {
        flex: 0 0 30%;
        -ms-flex: 0 0 30%;
        max-width: 30%;
        margin: 8px auto 0 auto;
    }

    .box-sty-4 .img-holder {
        padding-top: 0;
        text-align: center;
        margin-bottom: 20px;
    }

    .search-sty-1 .select-sty > div.item,
    .select-sty-3 div.item,
    .search-sty-2 .select-sty > div.item {
        flex: 0 0 33.33%;
        -ms-flex: 0 0 33.33%;
        max-width: 33.33%;
    }

    .box-sty-4 .img-holder .form-control-file {
        display: block;
    }

    .box-sty-4 .image-holder input[type="file"] {
        max-width: 100%;
        width: 200px;
        margin: 0 auto;
    }

    .navbar-default .navbar-nav > li {
        display: block;
        width: 100%;
    }

        .navbar-default .navbar-nav > li > a {
            line-height: 20px;
            padding-bottom: 5px;
            padding-top: 5px;
        }

    .user-top .form-group .btn-add, .recpt-exc2 button, .hotp #Search-btn, .radl .btn, .ut a.btn-success, .search-sec3 .btn-primary, .hotp .btn-add {
        margin-top: 0px;
    }

    .pad-left-0 {
        padding-left: 15px;
    }

    .pad-left-0, .recept-dept button {
        margin-top: 20px;
    }

    #bulk-entry-calculation {
        padding-top: 5px;
        border-top: 1px solid #fff;
    }

    .hotp .btn-success {
        margin-left: 0px;
    }

    .hotp .btn-add {
        float: right;
    }

    #loginBox {
        top: 4px;
        left: 0;
        z-index: 10;
        width: 71%;
        position: absolute;
        margin-top: 0px;
        display: none;
        padding: 8px;
        right: 14px;
        left: auto;
        padding: 15px 20px;
        padding-left: 0px;
        margin-bottom: 30px;
        border-radius: 4px;
        background: #fdfdfd;
        border: 1px solid #e5e5e5;
        border-color: rgba(49, 41, 35, 0) #e5e5e5 #e5e5e5;
        -moz-border-top-colors: none;
        -moz-border-right-colors: none;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        border-image: none;
        border-style: solid;
        color: #818080;
        background: #0088cc;
    }

    #loginButton {
        display: block;
        background: none;
        width: 40px;
        height: 35px;
        font-size: 24px;
        float: right;
        margin-top: 10px;
        border-radius: 4px;
        position: absolute;
        right: 15px;
        bottom: 18px;
        color: #7ddaff;
        border: 1px solid #7ddaff;
        text-align: center;
    }

        #loginButton:hover, #loginButton.active {
            color: #beecff;
            border-color: #beecff;
        }
}

@media only screen and (max-width: 768px) {
    
    body .mobile-hide{
        display: none !important;
    }
    #header.fixed-header .menu-dropdown{
        display:none;
    }
    body.menu-active-wrap{
        overflow:hidden;
    }
    .menu-toggle{
    display:inline-block;
    position: absolute;
    z-index: 9999;
    background: #fff;
    width: 35px;
    text-align: center;
    right: 0;
    top: 0;
    font-size: 10px;
    padding: 3px;
}
    .fav-menu a.fav-menu-item{
        height:80px;
    }
    .fav-menu .fav-menu-item .icon-holder{
        font-size:24px;
    }
    .fav-menu .col-xs-12{
            width: 50%;
    }
    .fav-menu .fav-menu-item h4{
        font-size:14px;
    }
    .search-sty-1 .select-sty > div.item,
    .search-sty-2 .select-sty > div.item,
    .select-sty-3 > div.item {
        flex: 0 0 50%;
        -ms-flex: 50%;
        max-width: 50%;
    }

    .select-sty .inner-flex-gup .item {
        flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        max-width: 50%;
    }

    #content-wrap .left-menu.active{
        position: fixed;
        top: 65px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99999;
        content: '';
        display: block !important;
        width: 100%;
        max-width: initial !important;
        overflow-y:auto;
    }
    #content-wrap .left-menu #menu-content{
        height: calc(100vh - 80px);
    }
#nav-side-menu{
    width:0;
    display:none;
}
.mobile-menu-list{
    background: #054556;
    box-shadow: 1px 0 6px 1px #0b2c38;
    color:#f1f1f1
}
.mobile-menu-list li a{
    color:#f1f1f1
}
.mobile-menu-list li{
    list-style:none;
}
#content-wrap .left-menu{
    display:none !important;
}
    .nav-side-menu .brand{
       display:none;
    }
    #header .brand {
    display: inline-block;
    color:#fff;
    position:absolute;
    right:10px;
    top:10px;
    z-index:9999;
    content:"";
}
#content-wrap.d-menu .right-container {
    max-width: initial;
}
    #menu-content{display:none;}
    #menu-content.collapse in{
        display:block;
    }
    .header-logo{
        display:none;
    }
    .site-heading{
        width:100% !important;
    }
   .site-header .header-date{
        float:left;
    }
    .site-heading h2,.site-heading h3 {
    font-size: 14px;
}
    .site-header .nav{
        padding-right:0 !important;
    }
    .site-header .nav .menu-dropdown > a{
        font-size:11px;
    }
    #content-wrap.d-menu .left-menu {   
     min-height:initial; 
}
    .total-section > div input {
        width: 100%;
    }

    #loginBox {
        width: 100%;
        padding-left: 20px;
        right: 0px;
        border-left: 0px;
        border-radius: 0px;
    }

    header .navbar-default {
        float: none;
    }



    .left-menu {
        width: 0;
    }

    .right-container {
        width: 100%;
        padding-top: 20px;
    }

    .right-container {
        margin-left: 0px;
    }

    .nav-side-menu ul {
        height: auto;
    }

    footer .content-wrapper .container.text-center {
        padding-left: 15px;
    }

    .nav-side-menu .brand {
        padding-top: 0px;
    }

    .search-sec2 #Search-Records {
        margin-top: 0px;
    }

    .search-sec .form-group {
        margin-bottom: 10px;
    }

    .pad-left-0 {
        margin-top: 0px;
    }

    .print-pad-left-0 {
        text-align: right;
    }

        .pad-left-0 #Search-Records, .print-pad-left-0 .display {
            margin-top: 20px;
        }
}

@media only screen and (max-width: 767px) {
    .total-section > div input {
        width: 100%;
    }

    #loginBox {
        width: 100%;
        padding-left: 20px;
        right: 0px;
        border-left: 0px;
        border-radius: 0px;
    }

    header .navbar-default {
        float: none;
    }



    .left-menu {
        width: 0;
    }

    .right-container {
        width: 100%;
        padding-top: 20px;
    }

    .right-container {
        margin-left: 0px;
    }

    .nav-side-menu ul {
        height: 100% !important;
    }

    footer .content-wrapper .container.text-center {
        padding-left: 15px;
    }

    .nav-side-menu .brand {
        padding-top: 0px;
    }

    .search-sec2 #Search-Records {
        margin-top: 0px;
    }

    .search-sec .form-group {
        margin-bottom: 10px;
    }

    .pad-left-0 {
        margin-top: 0px;
    }

    .print-pad-left-0 {
        text-align: right;
    }

        .pad-left-0 #Search-Records, .print-pad-left-0 .display {
            margin-top: 20px;
        }

    /*.table-responsive {*/
    /*overflow-y: auto;*/
    /*}*/
}

@media only screen and (max-width: 667px) {
    .well .col-xs-2, .well .col-sm-7.col-xs-5 {
        display: block;
        width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    footer {
        padding-bottom: 10px;
    }

        footer p {
            margin-bottom: 5px;
        }

    .predes .col-xs-3 {
        width: 50%;
    }
}

@media only screen and (max-width: 568px) {
    .fc-toolbar .fc-right{
        margin-bottom:10px;
    }
    #calender .fc-left .fc-today-button.fc-state-disabled{
        padding: 0px 6px;
    }
    #calender .fc-left .fc-today-button{
        position: absolute;
        bottom: 8px;
        left: 60%;
    }
    #calender .fc-header-toolbar {
        background-color: #054556;
        color: #fff;
        padding: 15px 30px;
        margin-bottom: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #calender .fc-button-group .fc-prev-button{
        left: 15px;
        top: 73px
    }
    #calender .fc-button-group .fc-next-button{
        right: 15px;
        top: 73px;
    }
    .fc-toolbar .fc-right{
        float:none;
    }
    .fc button .fc-icon{
        font-size:18px;
    }
    .fc-button-group{
        margin-bottom:5px;
    }
    .fc-toolbar .fc-center{
        width: 100%;
        padding-left: 18px;
    }
    .fc-toolbar .fc-center h2{
        font-size:18px;
    }
    .recpt-exc .col-xs-6, .predes .col-xs-3, .predes .col-xs-6, .well-well .col-xs-6, .well .col-xs-6.form-group {
        display: block;
        width: 100%;
    }

    #bulk-entry-calculation .col-xs-4, #bulk-entry-calculation .col-xs-3, #bulk-entry-calculation .col-xs-2 {
        width: 48%;
    }

    #bulk-entry-calculation .text-right {
        float: none !important;
        text-align: left !important;
        margin-top: 10px;
    }

    #bulk-entry-calculation .col-xs-3 {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 500px) {
    .btn {
        font-size: 13px;
    }

    .main-content {
        min-height: 400px;
    }

    .navbar-default .navbar-nav > li > a, .table, .table > thead > tr > th {
        font-size: 13px;
    }

    .search-sec .col-xs-6, .mail-list .col-sm-5.col-xs-5, .mail-list .col-sm-7.col-xs-7, .mail-list .col-sm-7.col-xs-5, .recept-dept .col-xs-6, .recept-dept .col-xs-5, .rimd .col-xs-4, .rimd .col-xs-8, .iibi .col-xs-8, .iibi .col-xs-4 {
        display: block;
        width: 100%;
    }

    .search-sec #Search-Records {
        margin-top: 0px;
    }

    .mail-list .col-xs-4, .mail-list .col-xs-3 {
        width: 50%;
    }

    .recept-dept .col-xs-3 {
        width: 41%;
    }

    .recept-dept .col-xs-4 {
        width: 58%;
    }

    .iibi button {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 420px) {
    .main-content {
        min-height: 320px;
    }

    .user-top .form-group.col-xs-6, .radl .col-xs-4, .radl .col-xs-8, .search-sec3 .col-xs-6 {
        display: block;
        width: 100%;
    }

    fieldset .col-xs-4 {
        display: block;
        width: 100%;
    }

    #Search-Records {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 384px) {
    .main-content {
        min-height: 300px;
    }
}
@media only screen and (max-width: 340px) {
    .site-heading {
        width: 45%;
    }

    .site-header .nav {
        width: 55%;
    }

    .site-heading h2 {
        font-size: 15px;
    }

    .dropdown-menu > li > a {
        padding: 5px;
    }

    .dropdown-menu {
        width: 115px;
    }

    .menu-dropdown .dropdown-menu a i {
        font-size: 10px;
    }
}

@media only screen and (max-width: 320px) {

    #loginBox {
        padding: 10px 10px;
    }

    .navbar-default .navbar-nav > li > a {
        font-size: 12px;
        line-height: 18px;
    }

    .table, .table > thead > tr > th {
        font-size: 12px;
    }

    .recpt-exc2 .col-xs-6, .recpt-exc2 .col-xs-7, .recpt-exc2 .col-xs-5 {
        display: block;
        width: 100%;
    }

        .recpt-exc2 .col-xs-7.text-right {
            text-align: left !important;
        }
}

/* ==========================================================================
   Voucher Type Navigation Tabs
   ========================================================================== */
.voucher-tabs-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.voucher-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    color: #334155;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.voucher-tab-btn:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.voucher-tab-btn.active {
    background-color: #0090e7 !important;
    color: #ffffff !important;
    border-color: #0090e7 !important;
    box-shadow: 0 2px 4px rgba(0, 144, 231, 0.25);
}

.voucher-tab-btn.active i {
    color: #ffffff !important;
}

.voucher-tab-btn .shortcut-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.voucher-tab-btn.active .shortcut-badge {
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   DataTable & Mobile Responsive Sticky Left Columns Standard
   ========================================================================== */

/* Enhanced Table Container for Horizontal Scroll */
.table-responsive {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 1rem;
}

/* Vector Sort Icons (SVG) */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead td.sorting,
table.dataTable thead td.sorting_asc,
table.dataTable thead td.sorting_desc {
    cursor: pointer !important;
    padding-right: 28px !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    user-select: none;
}

table.dataTable thead th.sorting,
table.dataTable thead td.sorting {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath fill='%2394a3b8' d='M5 0.5L9 5H1L5 0.5zM5 13.5L1 9H9L5 13.5z'/%3E%3C/svg%3E") !important;
}

table.dataTable thead th.sorting_asc,
table.dataTable thead td.sorting_asc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath fill='%230090e7' d='M5 0.5L9 5H1L5 0.5z'/%3E%3Cpath fill='%23cbd5e1' d='M5 13.5L1 9H9L5 13.5z'/%3E%3C/svg%3E") !important;
}

table.dataTable thead th.sorting_desc,
table.dataTable thead td.sorting_desc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath fill='%23cbd5e1' d='M5 0.5L9 5H1L5 0.5z'/%3E%3Cpath fill='%230090e7' d='M5 13.5L1 9H9L5 13.5z'/%3E%3C/svg%3E") !important;
}

/* Sticky Left Column: Stock / Index Name Only */
.table-responsive table,
.table-responsive .table {
    border-collapse: separate;
    border-spacing: 0;
}

.table-responsive th,
.table-responsive td {
    white-space: nowrap;
}

/* S.N. Column (Regular non-sticky) */
th.num,
td.num {
    width: 50px;
    min-width: 50px;
    text-align: center;
}

/* Stock / Symbol / Index Name Column (Sticky at left: 0) */
th.stock,
td.stock,
th.col-sticky-1,
td.col-sticky-1 {
    position: sticky !important;
    left: 0 !important;
    min-width: 100px;
    background-color: #ffffff;
    z-index: 20;
    box-sizing: border-box;
}

thead th.stock,
thead th.col-sticky-1 {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    z-index: 30;
}

/* Rows & hover for sticky stock column (Must be 100% solid/opaque to prevent text bleed during scroll) */
tbody tr td.stock,
tbody tr td.col-sticky-1,
tbody tr:nth-child(even) td.stock,
tbody tr:nth-child(even) td.col-sticky-1 {
    background-color: #ffffff !important;
}

.table-hover > tbody > tr:hover > td.stock,
.table-hover > tbody > tr:hover > td.col-sticky-1,
tbody tr:hover > td.stock,
tbody tr:hover > td.col-sticky-1 {
    background-color: #eceeef !important;
}

/* Flat right divider without box shadow */
th.stock,
td.stock,
th.col-sticky-last,
td.col-sticky-last {
    border-right: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

/* Compact Table Row Height Standard */
.table-sm > :not(caption) > * > * {
    padding: 3.5px 8px !important;
    font-size: 0.8rem !important;
    vertical-align: middle !important;
}

/* Ensure sorting chevrons have dedicated right padding and do not overlap header text */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
.dataTables_wrapper thead th.sorting,
.dataTables_wrapper thead th.sorting_asc,
.dataTables_wrapper thead th.sorting_desc {
    padding-right: 22px !important;
}

/* ========================================================
   HOME PAGE RANKING TABLE MULTI-COLUMN STICKY (RANK + STOCK)
   ======================================================== */
#rankingReportTable th.ranking-sticky-rank,
#rankingReportTable td.ranking-sticky-rank {
    position: sticky !important;
    left: 0 !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    z-index: 21 !important;
    background-color: #ffffff !important;
    box-sizing: border-box;
}

#rankingReportTable th.ranking-sticky-stock,
#rankingReportTable td.ranking-sticky-stock {
    position: sticky !important;
    left: 72px !important;
    min-width: 110px !important;
    z-index: 20 !important;
    background-color: #ffffff !important;
    border-right: 1px solid #cbd5e1 !important;
    box-sizing: border-box;
}

#rankingReportTable thead th,
#rankingReportTable thead th.ranking-sticky-rank,
#rankingReportTable thead th.ranking-sticky-stock {
    background-color: #2f76a1 !important;
    color: #ffffff !important;
    border-color: #235b7d !important;
    font-weight: 700 !important;
    z-index: 32 !important;
}

/* Bright White Vector Sort Icons with Comfortable Gap for #2f76a1 Blue Header */
#rankingReportTable thead th.sorting,
#rankingReportTable thead th.sorting_asc,
#rankingReportTable thead th.sorting_desc {
    cursor: pointer !important;
    padding-right: 28px !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    user-select: none;
}

#rankingReportTable thead th.sorting {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath fill='%23ffffff' fill-opacity='0.65' d='M5 0.5L9 5H1L5 0.5zM5 13.5L1 9H9L5 13.5z'/%3E%3C/svg%3E") !important;
}

#rankingReportTable thead th.sorting_asc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath fill='%23ffffff' d='M5 0.5L9 5H1L5 0.5z'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M5 13.5L1 9H9L5 13.5z'/%3E%3C/svg%3E") !important;
}

#rankingReportTable thead th.sorting_desc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M5 0.5L9 5H1L5 0.5z'/%3E%3Cpath fill='%23ffffff' d='M5 13.5L1 9H9L5 13.5z'/%3E%3C/svg%3E") !important;
}

#rankingReportTable.table-hover tbody tr:hover > td.ranking-sticky-rank,
#rankingReportTable.table-hover tbody tr:hover > td.ranking-sticky-stock {
    background-color: #eceeef !important;
}

/* Centered Selected Sector Badge between Show entries and Search & Fixed Footer */
#rankingReportTable_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#rankingReportTable_wrapper .dataTables_length {
    margin-bottom: 0.5rem;
    flex: 0 0 auto;
}

.ranking-center-meta-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    flex: 1 1 auto;
    text-align: center;
}

#rankingReportTable_wrapper .dataTables_filter {
    margin-bottom: 0.5rem;
    flex: 0 0 auto;
    text-align: right;
}

#rankingReportTable_wrapper .table-responsive {
    flex: 0 0 100%;
    width: 100%;
}

#rankingReportTable_wrapper .dataTables_info {
    margin-top: 0.5rem;
    flex: 0 0 auto;
}

#rankingReportTable_wrapper .dataTables_paginate {
    margin-top: 0.5rem;
    margin-left: auto !important;
    flex: 0 0 auto;
    text-align: right !important;
}

.ranking-selected-sector-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 14px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 50rem;
    font-size: 0.815rem;
    line-height: 1.4;
}

/* DataTables UI Controls */
.dataTables_wrapper {
    padding: 0.25rem 0;
}
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 10px;
    margin-left: 6px;
    outline: none;
    font-size: 0.875rem;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #0090e7;
    box-shadow: 0 0 0 2px rgba(0, 144, 231, 0.2);
}
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 8px;
    margin: 0 4px;
    outline: none;
    font-size: 0.875rem;
}
.dataTables_wrapper .dataTables_info {
    font-size: 0.85rem;
    color: #64748b;
    padding-top: 0.75em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 4px !important;
    padding: 3px 8px !important;
    font-size: 0.85rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #0090e7 !important;
    color: #ffffff !important;
    border: 1px solid #0090e7 !important;
}

/* ==========================================================================
   Modern Nepali DatePicker Design System (Pixel-Perfect Clean UI)
   ========================================================================== */
div#ndp-nepali-box {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    position: absolute !important;
    z-index: 9999 !important;
    padding: 10px !important;
    margin-top: 4px !important;
    box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    border-radius: 12px !important;
    width: auto !important;
    box-sizing: border-box !important;
}

div#ndp-nepali-box .ndp-header {
    border: none !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 13px !important;
    line-height: normal !important;
    margin: 0 0 8px 0 !important;
    padding: 6px 36px !important;
    border-radius: 8px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

div#ndp-nepali-box .ndp-prev,
div#ndp-nepali-box .ndp-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    background-image: none !important;
    line-height: 24px !important;
    text-align: center !important;
}

div#ndp-nepali-box .ndp-prev:hover,
div#ndp-nepali-box .ndp-next:hover {
    background-color: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

div#ndp-nepali-box .ndp-prev {
    left: 6px !important;
}

div#ndp-nepali-box .ndp-next {
    right: 6px !important;
}

div#ndp-nepali-box .ndp-prev::before {
    content: "\f053" !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    color: #475569 !important;
}

div#ndp-nepali-box .ndp-next::before {
    content: "\f054" !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    color: #475569 !important;
}

div#ndp-nepali-box #currentMonth {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

div#ndp-nepali-box #currentMonth select,
div#ndp-nepali-box #currentMonth #npd-month-select,
div#ndp-nepali-box #currentMonth #npd-year-select {
    color: #0f172a !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    height: 28px !important;
    padding: 2px 8px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

div#ndp-nepali-box #currentMonth select:focus {
    border-color: #0090e7 !important;
    box-shadow: 0 0 0 2px rgba(0, 144, 231, 0.2) !important;
}

div#ndp-nepali-box div#npd-table-div {
    margin: 0 !important;
}

div#ndp-nepali-box table {
    width: 100% !important;
    margin: 0 !important;
    border-spacing: 3px !important;
    border-collapse: separate !important;
    background: transparent !important;
    border: none !important;
}

div#ndp-nepali-box thead th,
div#ndp-nepali-box .ndp-days th {
    padding: 4px 0 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    height: 24px !important;
    line-height: 24px !important;
}

div#ndp-nepali-box td {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 32px !important;
    height: 30px !important;
}

div#ndp-nepali-box td.ndp-date,
div#ndp-nepali-box td.ndp-current,
div#ndp-nepali-box td.ndp-selected {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

div#ndp-nepali-box td a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 28px !important;
    margin: 0 auto !important;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    transition: all 0.12s ease-in-out !important;
    background: transparent !important;
}

div#ndp-nepali-box td.ndp-date a:hover {
    background-color: #f1f5f9 !important;
    color: #0090e7 !important;
    border-color: #cbd5e1 !important;
    font-weight: 700 !important;
}

div#ndp-nepali-box td.ndp-current a {
    color: #0090e7 !important;
    border: 1.5px solid #0090e7 !important;
    background-color: #f0f9ff !important;
    font-weight: 700 !important;
}

div#ndp-nepali-box td.ndp-selected a {
    background-color: #0090e7 !important;
    border-color: #0090e7 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(0, 144, 231, 0.35) !important;
}

div#ndp-nepali-box a.ndp-disabled {
    color: #cbd5e1 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ========================================================
   LIVE AUTOSCROLLING TODAY PRICE TICKER
   ======================================================== */
body {
    /* overflow-x removed to preserve sticky header */
}

.sn-ticker-bar {
    background: #18181b;
    border-top: 1px solid #27272a;
    border-bottom: 1px solid #27272a;
    border-left: none;
    border-right: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    height: 38px;
    position: relative;
}

.sn-ticker-label {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    z-index: 3;
    flex-shrink: 0;
    box-shadow: 4px 0 10px rgba(0,0,0,0.3);
}

.sn-ticker-pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: snPulse 1.5s infinite;
}

@keyframes snPulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #22c55e; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.sn-ticker-viewport {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}

.sn-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: snTickerMarquee 960s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    transform: translate3d(0, 0, 0);
}

.sn-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes snTickerMarquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.sn-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #f8fafc;
    text-decoration: none;
    padding: 0 10px;
    transition: opacity 0.15s ease;
}

.sn-ticker-item:hover {
    opacity: 0.85;
}

.sn-ticker-sym {
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.sn-ticker-ltp {
    font-weight: 600;
    color: #f1f5f9;
}

.sn-ticker-diff {
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.sn-ticker-diff.up {
    color: #4ade80;
}

.sn-ticker-diff.down {
    color: #f87171;
}

.sn-ticker-diff.neutral {
    color: #38bdf8;
}

.sn-ticker-vol {
    font-size: 0.8rem;
    font-weight: 500;
    color: #cbd5e1;
}

.sn-ticker-divider {
    color: #52525b;
    font-size: 0.8rem;
    padding: 0 4px;
    user-select: none;
}

/* ========================================================
   ANIMATED 3-STEP STRATEGY GUIDE
   ======================================================== */
.sn-step-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sn-step-timeline::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: linear-gradient(180deg, #0090e7 0%, #06b6d4 50%, #10b981 100%);
    border-radius: 2px;
    z-index: 1;
}

.sn-step-card {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.sn-step-card:hover {
    transform: translateX(4px);
    border-color: #0090e7;
    box-shadow: 0 6px 16px -2px rgba(0, 144, 231, 0.15);
    background: #f8fafc;
}

.sn-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.82rem;
    flex-shrink: 0;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease;
}

.sn-step-card:hover .sn-step-num {
    transform: scale(1.12);
}

.sn-step-1 .sn-step-num {
    background: linear-gradient(135deg, #0090e7 0%, #0284c7 100%);
    animation: stepNodePulse 3s infinite ease-in-out;
}

.sn-step-2 .sn-step-num {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.sn-step-3 .sn-step-num {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.sn-step-text {
    font-weight: 700;
    font-size: 0.875rem;
    color: #1e293b;
    line-height: 1.35;
    flex-grow: 1;
    letter-spacing: -0.15px;
}

.sn-step-icon {
    font-size: 0.95rem;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.sn-step-card:hover .sn-step-icon {
    opacity: 1;
    transform: scale(1.15);
}

@keyframes stepNodePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 144, 231, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(0, 144, 231, 0); }
}

/* ========================================================
   MODERN HIGH-CONTRAST PILL BUTTONS
   ======================================================== */
.sn-btn-pill {
    background-color: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50rem !important;
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
    cursor: pointer;
}

.sn-btn-pill:hover,
.sn-btn-pill:focus,
.sn-btn-pill:active,
.sn-btn-pill[aria-expanded="true"] {
    background-color: #0090e7 !important;
    color: #ffffff !important;
    border-color: #0090e7 !important;
    box-shadow: 0 4px 12px rgba(0, 144, 231, 0.25) !important;
    transform: translateY(-1px);
}

.sn-btn-pill:hover i,
.sn-btn-pill:focus i,
.sn-btn-pill:active i,
.sn-btn-pill[aria-expanded="true"] i {
    color: #ffffff !important;
}

.sn-btn-pill:hover span,
.sn-btn-pill:focus span,
.sn-btn-pill:active span,
.sn-btn-pill[aria-expanded="true"] span {
    color: #ffffff !important;
}

/* ========================================================
   TIMELINE STEP DOTS (HORIZONTAL CONNECTED ROADMAP)
   ======================================================== */
.sn-timeline-track-wrap {
    position: relative;
    width: 100%;
}

.sn-timeline-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 8px;
}

.sn-timeline-line {
    position: absolute;
    top: 13px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, #0090e7 0%, #38bdf8 50%, #0284c7 100%);
    z-index: 1;
    opacity: 0.35;
}

.sn-timeline-node {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sn-node-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0090e7;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #ffffff, 0 2px 6px rgba(0, 144, 231, 0.3);
    margin-bottom: 6px;
}

.sn-node-label {
    font-size: 0.775rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
    max-width: 180px;
}

@media (max-width: 575.98px) {
    .sn-timeline-steps {
        flex-direction: column;
        gap: 10px;
    }
    .sn-timeline-line {
        top: 0;
        bottom: 0;
        left: 13px;
        right: auto;
        width: 2px;
        height: 100%;
    }
    .sn-timeline-node {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 10px;
    }
    .sn-node-dot {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .sn-node-label {
        max-width: 100%;
        font-size: 0.76rem;
    }
}

.sn-hints-box {
    background-color: rgba(248, 250, 252, 0.95);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
}

/* Market Movers & Activity Tabs */
#moversTab .nav-link,
#activityTab .nav-link {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    transition: all 0.2s ease;
}

#moversTab .nav-link.active,
#activityTab .nav-link.active {
    background: #0090e7 !important;
    color: #ffffff !important;
    border-color: #0090e7 !important;
    box-shadow: 0 2px 6px rgba(0, 144, 231, 0.25) !important;
}

#moversTab #gainers-tab.active {
    background: #16a34a !important;
    border-color: #16a34a !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important;
}

#moversTab #losers-tab.active {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
}



#moversTabContent table th,
#moversTabContent table td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.8rem !important;
    vertical-align: middle !important;
}

/* ========================================================
   CARD TOP BLUE ACCENT LINE & SECTION HEADING PADDING
   ======================================================== */
.card.rounded-4,
.card.shadow-sm.rounded-4,
#daily-nepse-performance-card,
#unified-ranking-studio,
#youtube-video,
#stakeholders-directory,
#blogs-section,
#disclaimer {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
}

.card-header {
    padding-top: 0.95rem !important;
    padding-bottom: 0.75rem !important;
}

/* ========================================================
   REMOVE BUTTON HOVER TRANSLATION & SMALL FOCUS RING
   ======================================================== */
.btn,
.btn:hover,
.btn-primary,
.btn-primary:hover,
.btn-add,
.btn-add:hover,
#rankingSearchForm .btn,
#rankingSearchForm .btn:hover {
    transform: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease !important;
}

.form-select:focus,
.form-control:focus,
select:focus,
input:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #0090e7 !important;
    box-shadow: 0 0 0 2px rgba(0, 144, 231, 0.18) !important;
    outline: none !important;
}

/* ========================================================
   RANKING BUTTON HOVER EFFECT (COLOR SHIFT, NO BOX-SHADOW)
   ======================================================== */
.btn-rank-analyze {
    background-color: #0090e7 !important;
    background-image: linear-gradient(135deg, #0090e7 0%, #0077c2 100%) !important;
    border: none !important;
    height: 40px !important;
    font-size: 0.885rem !important;
    box-shadow: none !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, filter 0.2s ease !important;
}

.btn-rank-analyze:hover,
.btn-rank-analyze:focus,
.btn-rank-analyze:active {
    background-color: #006eb5 !important;
    background-image: linear-gradient(135deg, #007ac7 0%, #005f9e 100%) !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    filter: brightness(0.96) !important;
    color: #ffffff !important;
}

/* ========================================================
   EDITORIAL BENTO GRID BLOG STYLES (CLEAN WHITE THEME)
   ======================================================== */
.bento-hero-card,
.bento-sub-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.bento-hero-card:hover,
.bento-sub-card:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    border-color: #cbd5e1 !important;
}

.bento-hero-card .bento-img,
.bento-sub-card .bento-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: top center !important;
}

/* ========================================================
   MODERN FINANCIAL FOOTER STYLES
   ======================================================== */
.hover-primary {
    transition: color 0.15s ease !important;
}

.hover-primary:hover {
    color: #0090e7 !important;
    text-decoration: underline !important;
}


/* ========================================================
   DATATABLES RESPONSIVE TOP CONTROLS & SECTOR META
   ======================================================== */
.ranking-center-meta-wrap,
.dt-top-controls .ranking-center-meta-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

.ranking-selected-sector-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 2px 12px;
    height: 28px;
    font-size: 0.8125rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

.dt-top-controls,
.dataTables_wrapper .dt-top-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    margin-bottom: 0.6rem !important;
    width: 100% !important;
}

.dt-top-controls .dataTables_length,
.dataTables_wrapper .dt-top-controls .dataTables_length {
    order: 1 !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: 0.8125rem !important;
    color: #475569 !important;
    flex-shrink: 0 !important;
}

.dt-top-controls .ranking-center-meta-wrap {
    order: 2 !important;
}

.dt-top-controls .dataTables_length label,
.dataTables_wrapper .dt-top-controls .dataTables_length label {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    gap: 0.25rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 28px !important;
}

.dt-top-controls .dataTables_length select,
.dataTables_wrapper .dt-top-controls .dataTables_length select {
    font-size: 0.8rem !important;
    height: 28px !important;
    line-height: 26px !important;
    padding: 0 20px 0 8px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    margin: 0 4px !important;
    outline: none !important;
    cursor: pointer;
    box-sizing: border-box !important;
}

.dt-top-controls .dataTables_filter,
.dataTables_wrapper .dt-top-controls .dataTables_filter {
    order: 3 !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    flex: 0 1 auto !important;
    max-width: 220px !important;
}

.dt-top-controls .dataTables_filter label,
.dataTables_wrapper .dt-top-controls .dataTables_filter label {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    width: 100% !important;
    justify-content: flex-end !important;
    line-height: 28px !important;
}

.dt-top-controls .dataTables_filter input,
.dataTables_wrapper .dt-top-controls .dataTables_filter input {
    font-size: 0.8rem !important;
    height: 28px !important;
    line-height: 26px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    margin-left: 0 !important;
    width: 100% !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.dt-top-controls .dataTables_filter input:focus,
.dt-top-controls .dataTables_length select:focus {
    border-color: #0090e7 !important;
    box-shadow: 0 0 0 2px rgba(0, 144, 231, 0.18) !important;
}

@media screen and (max-width: 767px) {
    .stock-ranking-header-row {
        margin-top: 6px !important;
    }

    .dt-top-controls,
    .dataTables_wrapper .dt-top-controls {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        margin-bottom: 0.5rem !important;
    }

    .dt-top-controls .ranking-center-meta-wrap {
        order: 1 !important;
        width: 100% !important;
        justify-content: center !important;
        margin: 0 0 0.35rem 0 !important;
    }

    .dt-top-controls .dataTables_length,
    .dataTables_wrapper .dt-top-controls .dataTables_length {
        order: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        flex: 0 0 auto !important;
        font-size: 12.5px !important;
        margin: 0 !important;
        height: 32px !important;
    }

    .dt-top-controls .dataTables_length label,
    .dataTables_wrapper .dt-top-controls .dataTables_length label {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        gap: 3px !important;
        font-size: 12.5px !important;
        white-space: nowrap !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    .dt-top-controls .dataTables_length select,
    .dataTables_wrapper .dt-top-controls .dataTables_length select {
        font-size: 12px !important;
        height: 32px !important;
        line-height: 30px !important;
        padding: 0 18px 0 6px !important;
        margin: 0 2px !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    .dt-top-controls .dataTables_filter,
    .dataTables_wrapper .dt-top-controls .dataTables_filter {
        order: 3 !important;
        width: auto !important;
        flex: 1 1 auto !important;
        max-width: 170px !important;
        margin: 0 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        height: 32px !important;
    }

    .dt-top-controls .dataTables_filter label,
    .dataTables_wrapper .dt-top-controls .dataTables_filter label {
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    .dt-top-controls .dataTables_filter input,
    .dataTables_wrapper .dt-top-controls .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100px !important;
        height: 32px !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
}

/* ==========================================================================
   UNIFIED LOADER SYSTEM (TABLES & CHARTS)
   ========================================================================== */
.sn-loader-container {
    position: relative !important;
    min-height: 120px;
}

.sn-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sn-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    max-width: 280px;
    text-align: center;
}

.sn-spinner {
    width: 1.85rem;
    height: 1.85rem;
    border: 2.5px solid rgba(0, 144, 231, 0.15);
    border-top-color: #0090e7;
    border-radius: 50%;
    animation: sn-spin 0.7s linear infinite;
}

.sn-spinner-sm {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
}

.sn-spinner-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}

.sn-loader-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    letter-spacing: 0.2px;
}

.sn-loader-subtext {
    font-size: 0.7rem;
    color: #64748b;
    margin: 0;
}

@keyframes sn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* DataTables Processing Loader Standard */
.dataTables_wrapper .dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0.5rem 1.1rem !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    z-index: 60 !important;
    color: #1e293b !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Market Insights & Blog Design System Standards
   ========================================================================== */
.blog-header-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
}

.blog-col-main {
    width: 100%;
}

.blog-col-ads {
    width: 100%;
}

.blog-imp-card {
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #f59e0b !important;
}

.blog-imp-img-col {
    width: 100%;
}

.blog-imp-img-wrapper {
    height: 175px;
    max-height: 175px;
    border-bottom: 1px solid #f1f5f9;
}

.blog-imp-img {
    object-fit: cover;
    object-position: center top;
}

.blog-imp-fallback {
    background: linear-gradient(135deg, #1e293b 0%, #334155 60%, #0090e7 100%);
}

.blog-detail-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
}

.blog-detail-banner-wrapper {
    width: 100%;
    height: auto;
    max-height: none;
    background-color: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.blog-detail-banner-img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    display: block;
}

.btn-share-x {
    width: 32px;
    height: 32px;
    background-color: #000000 !important;
    border: none !important;
    color: #ffffff !important;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-share-x:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    color: #ffffff !important;
}

.btn-share-fb {
    width: 32px;
    height: 32px;
    background-color: #1877f2 !important;
    border: none !important;
    color: #ffffff !important;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-share-fb:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    color: #ffffff !important;
}

.btn-share-in {
    width: 32px;
    height: 32px;
    background-color: #0a66c2 !important;
    border: none !important;
    color: #ffffff !important;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn-share-in:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    color: #ffffff !important;
}

.btn-share-link {
    width: 32px;
    height: 32px;
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn-share-link:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
    transform: translateY(-1px);
}

.blog-ad-placeholder {
    border: 1px dashed #cbd5e1 !important;
    min-height: 480px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.blog-read-btn {
    font-size: 0.8rem;
    background: linear-gradient(135deg, #0090e7 0%, #0077c2 100%);
    border: none;
    color: #ffffff !important;
}

.blog-grid-card {
    border: 1px solid #e2e8f0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07) !important;
}

.blog-grid-img-wrap {
    height: 175px;
    max-height: 175px;
    border-bottom: 1px solid #f1f5f9;
}

.blog-grid-img {
    object-fit: cover;
    object-position: top center;
    transition: transform 0.35s ease;
}

.blog-grid-card:hover .blog-grid-img {
    transform: scale(1.04);
}

.blog-grid-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.75em;
}

.blog-card-date {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.76rem;
    line-height: 1;
}

.blog-card-date i {
    font-size: 0.8rem;
    margin-right: 0;
    vertical-align: middle;
}

.blog-card-read-link {
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
    color: #0090e7;
    text-decoration: none;
    transition: color 0.15s ease;
}

.blog-card-read-link i {
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    transform: translateY(0.5px);
    transition: transform 0.15s ease;
}

.blog-card-read-link:hover {
    color: #0077c2 !important;
}

.blog-card-read-link:hover i {
    transform: translateX(2px) translateY(0.5px);
}

.blog-meta-divider {
    border-color: #f1f5f9 !important;
}

.blog-article-content p {
    margin-bottom: 1.25rem;
}

.blog-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4 {
    color: #1e293b;
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.blog-article-content blockquote {
    border-left: 4px solid #0090e7;
    padding-left: 1rem;
    margin-left: 0;
    font-style: italic;
    color: #475569;
}

.blog-header-card {
    border: 1px solid #e2e8f0 !important;
}

.blog-header-card .card-header {
    padding-top: 1.35rem !important;
    padding-bottom: 1.35rem !important;
    border-bottom: 1px solid #f1f5f9;
}

.blog-detail-banner-wrapper {
    width: 100%;
    height: auto;
    max-height: 400px;
    background-color: #f8fafc;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.75rem;
    border: 1px solid #f1f5f9;
    text-align: center;
}

.blog-detail-banner-img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: fill;
    object-position: center;
    display: block;
}

.blog-detail-title {
    font-size: 1.75rem;
    line-height: 1.35;
    letter-spacing: -0.3px;
}

.blog-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    line-height: 1;
}

.blog-meta-item i {
    font-size: 0.85rem;
    margin-right: 0.15rem;
}

.btn-back-blogs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.btn-back-blogs:hover {
    background-color: #f1f5f9;
    color: #0090e7;
    border-color: #cbd5e1;
    transform: translateX(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.btn-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-share-x {
    background-color: #0f172a;
    color: #ffffff !important;
}

.btn-share-x:hover {
    background-color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.btn-share-fb {
    background-color: #1877f2;
    color: #ffffff !important;
}

.btn-share-fb:hover {
    background-color: #166fe5;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(24, 119, 242, 0.35);
}

.btn-share-in {
    background-color: #0a66c2;
    color: #ffffff !important;
}

.btn-share-in:hover {
    background-color: #095196;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(10, 102, 194, 0.35);
}

.btn-share-copy {
    background-color: #f1f5f9;
    color: #475569 !important;
    border: 1px solid #cbd5e1;
}

.btn-share-copy:hover {
    background-color: #e2e8f0;
    color: #0f172a !important;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767.98px) {
    .blog-detail-card .card-body {
        padding: 1.25rem !important;
    }
    .blog-detail-title {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.75rem !important;
    }
    .blog-detail-banner-wrapper {
        max-height: 220px;
        margin-bottom: 1.25rem;
        border-radius: 8px;
    }
    .blog-detail-banner-img {
        max-height: 220px;
    }
}

@media (min-width: 576px) {
    .blog-imp-img-wrapper {
        height: 195px;
        max-height: 195px;
    }
}

@media (min-width: 992px) {
    .blog-col-main {
        flex: 0 0 auto;
        width: 80%;
    }
    .blog-col-ads {
        flex: 0 0 auto;
        width: 20%;
    }
}

@media (min-width: 1200px) {
    .blog-imp-img-col {
        flex: 0 0 420px;
        width: 420px !important;
        max-width: 420px !important;
    }
    .blog-imp-img-wrapper {
        height: 240px;
        max-height: 240px;
        border-bottom: none;
    }
    .blog-imp-img {
        object-fit: fill;
    }
}

/* ==========================================
   Admin Content & Notice Management Forms
   ========================================== */
.content-form-section {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.content-form-header {
    background: linear-gradient(135deg, #0090e7 0%, #007bc4 100%);
    border-bottom: 1px solid #0070b3;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-form-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.content-form-title i {
    font-size: 0.95rem;
    color: #ffffff !important;
}

.content-form-header-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

.content-form-page-banner {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0090e7;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.content-form-body {
    padding: 1.25rem;
}

.form-control-36 {
    height: 36px !important;
    font-size: 0.875rem;
    border-color: #cbd5e1;
    border-radius: 6px;
}

.form-control-36:focus {
    border-color: #0090e7;
    box-shadow: 0 0 0 3px rgba(0, 144, 231, 0.15);
}

.form-slug-addon {
    font-size: 0.78rem;
    background-color: #f1f5f9;
    color: #64748b;
    border-color: #cbd5e1;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.form-switch-card {
    height: 36px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.form-switch-card:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.form-switch-card label {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0;
}

.form-switch-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-top: 0;
}

.form-image-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: #f8fafc;
    margin-top: 0.5rem;
}

.form-image-preview img {
    width: 55px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
}

.form-image-preview-text {
    font-size: 0.75rem;
    color: #64748b;
}

.form-editor-badge {
    font-size: 0.72rem;
    background-color: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    font-weight: 600;
}

/* ==========================================
   Frontend Root Theme & Navbar Standards
   ========================================== */
:root {
    --sn-primary: #0090e7;
    --sn-primary-dark: #0077c2;
    --sn-text-main: #0f172a;
    --sn-text-muted: #64748b;
    --sn-border-light: #e2e8f0;
    --sn-bg-surface: #ffffff;
    --sn-bg-page: #f8fafc;
}

.admin-topbar-strip {
    background-color: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8125rem;
    z-index: 1035;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.admin-topbar-link {
    transition: all 0.2s ease;
    padding: 3px 14px;
    letter-spacing: 0.3px;
}

.admin-topbar-strip a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.sn-navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.sn-navbar .nav-link {
    color: #334155 !important;
    font-weight: 600;
    font-size: 0.885rem;
    padding: 0.5rem 0.85rem !important;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.sn-navbar .nav-link:hover,
.sn-navbar .nav-link:focus,
.sn-navbar .nav-link.active {
    color: var(--sn-primary) !important;
    background-color: #f1f5f9;
}

.sn-navbar .dropdown-menu {
    background-color: #f0f0f0 !important;
    border: 1px solid #dcdcdc !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px;
    padding: 0.5rem;
}

.sn-navbar .nav-link i {
    color: #64748b;
    transition: color 0.15s ease;
}

.sn-navbar .nav-link:hover i,
.sn-navbar .nav-link.active i {
    color: var(--sn-primary);
}

.sn-navbar .dropdown-item {
    font-size: 0.84rem;
    font-weight: 500;
    color: #0f172a !important;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.12s ease;
}

.sn-navbar .dropdown-divider {
    border-color: #c4c4c4 !important;
    opacity: 0.8;
}

.sn-navbar .dropdown-item i {
    width: 18px;
    text-align: center;
    color: #475569 !important;
    transition: color 0.15s ease, transform 0.15s ease;
}

.sn-navbar .dropdown-item:hover {
    background-color: #ffffff !important;
    color: var(--sn-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sn-navbar .dropdown-item:hover i {
    color: var(--sn-primary) !important;
    transform: translateX(1px);
}

.btn-nav-signin {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-size: 0.835rem;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-nav-signin i {
    color: #64748b !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.btn-nav-signin:hover,
.btn-nav-signin:focus,
.btn-nav-signin:active {
    background-color: #f0f7ff !important;
    border-color: #0090e7 !important;
    color: #0077c2 !important;
    box-shadow: 0 2px 8px rgba(0, 144, 231, 0.15) !important;
    transform: translateY(-1px);
}

.btn-nav-signin:hover i,
.btn-nav-signin:focus i,
.btn-nav-signin:active i {
    color: #0090e7 !important;
    transform: translateX(1px);
}

.btn-nav-register {
    background: linear-gradient(135deg, #0090e7 0%, #0077c2 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.835rem;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 144, 231, 0.25);
}

.btn-nav-register:hover,
.btn-nav-register:focus,
.btn-nav-register:active {
    background: linear-gradient(135deg, #0077c2 0%, #005fa3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 144, 231, 0.35) !important;
    transform: translateY(-1px);
}

/* ==========================================
   Change Password Modern Form Styles
   ========================================== */
.change-pwd-card {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff;
}

.change-pwd-icon-box {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, rgba(0, 144, 231, 0.12) 0%, rgba(0, 119, 194, 0.08) 100%);
    color: #0090e7;
}

.change-pwd-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.change-pwd-input-wrap .input-icon-left {
    position: absolute;
    left: 0.9rem;
    color: #94a3b8;
    font-size: 0.9rem;
    pointer-events: none;
    transition: color 0.15s ease;
    z-index: 4;
}

.change-pwd-input-wrap .form-control {
    height: 44px;
    padding-left: 2.6rem;
    padding-right: 2.75rem;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    font-size: 0.885rem;
    color: #0f172a;
    background-color: #f8fafc;
    transition: all 0.15s ease;
}

.change-pwd-input-wrap .form-control:focus {
    background-color: #ffffff;
    border-color: #0090e7;
    box-shadow: 0 0 0 3px rgba(0, 144, 231, 0.12);
    outline: none;
}

.change-pwd-input-wrap .form-control:focus ~ .input-icon-left {
    color: #0090e7;
}

.change-pwd-toggle-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    border-radius: 6px;
    transition: all 0.15s ease;
    z-index: 5;
}

.change-pwd-toggle-btn:hover {
    color: #0090e7;
    background-color: #f1f5f9;
}

.btn-cancel-pwd {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    transition: all 0.15s ease;
}

.btn-cancel-pwd:hover {
    background-color: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.nav-search-input-box {
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-search-input-box:focus-within {
    background: #ffffff !important;
    border-color: #0090e7 !important;
    box-shadow: 0 0 0 3px rgba(0, 144, 231, 0.15) !important;
}

.nav-search-input-box input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    .sn-navbar .navbar-collapse {
        background: #ffffff;
        padding: 1rem 0.5rem;
        margin-top: 0.5rem;
        border-top: 1px solid #f1f5f9;
        border-radius: 12px;
    }
    .nav-search-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.75rem 0 !important;
    }
}

/* ==========================================
   Frontend Portfolio Dashboard & Ledger
   ========================================== */
.portfolio-kpi-card {
    border-radius: 12px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}

.portfolio-kpi-card:hover {
    transform: translateY(-2px);
}

.portfolio-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

#txTable thead th,
#txTable thead th *,
.portfolio-table thead th,
.portfolio-table thead th *,
.portfolio-table thead th.stock,
.portfolio-table thead th.col-sticky-1,
table.dataTable thead th,
table.portfolio-table thead th {
    background: #e2e8f0 !important;
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    padding: 8px 8px !important;
    border: 1px solid #cbd5e1 !important;
    vertical-align: middle !important;
    line-height: 1.25 !important;
}

.btn-table-edit,
.btn-table-delete {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-table-edit {
    background-color: #2172b3 !important;
    border: 1px solid #1a5c91 !important;
    color: #ffffff !important;
}

.btn-table-delete {
    background-color: #cb403d !important;
    border: 1px solid #b91c1c !important;
    color: #ffffff !important;
}

.btn-table-edit i,
.btn-table-delete i {
    font-size: 11px !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.portfolio-table tbody td {
    padding: 7px 8px !important;
    font-size: 13px !important;
    border: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
}

.portfolio-table tbody tr:hover td {
    background-color: #f8fafc !important;
}

.text-profit {
    color: #16a34a !important;
    font-weight: 700 !important;
}

.text-loss {
    color: #dc2626 !important;
    font-weight: 700 !important;
}

.badge-profit {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
}

.badge-loss {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
}

.btn-action-buy {
    background-color: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    color: #16a34a !important;
}

.btn-action-buy:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

.btn-action-sell {
    background-color: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
}

.btn-action-sell:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

.btn-action-chart {
    background-color: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    color: #0284c7 !important;
}

.btn-action-chart:hover {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

.pulse-live {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 rgba(34, 197, 94, 0.6);
    animation: pulseLive 1.8s infinite;
}

@keyframes pulseLive {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ==========================================
   Frontend Indicator Chips & Filter Pills
   ========================================== */
.indicator-pill-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 11px !important;
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 50rem !important;
    cursor: pointer !important;
    margin: 1px 0 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    user-select: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transform: none !important;
}

.indicator-pill-label .indicator-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #64748b;
}

.indicator-pill-label .indicator-category-badge {
    background-color: #f1f5f9;
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    margin-left: 2px;
}

.indicator-pill-label:hover {
    border-color: #0090e7 !important;
    color: #0090e7 !important;
    background-color: #f0f9ff !important;
    transform: none !important;
}

.indicator-pill-label:hover .indicator-check-icon {
    color: #0090e7 !important;
}

.btn-check:checked + .indicator-pill-label {
    background-color: #0090e7 !important;
    border-color: #0090e7 !important;
    color: #ffffff !important;
    transform: none !important;
}

.btn-check:checked + .indicator-pill-label .indicator-check-icon {
    color: #ffffff !important;
}

.btn-check:checked + .indicator-pill-label .indicator-check-icon i:before {
    content: "\f00c";
}

.btn-check:checked + .indicator-pill-label .indicator-category-badge {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ==========================================
   Frontend Company Blog Cards & Widgets
   ========================================== */
.company-blog-card {
    border: 1px solid #e2e8f0 !important;
}

.company-blog-thumb {
    height: 160px;
}

.company-blog-img {
    object-fit: cover;
    object-position: top center;
}

.company-blog-placeholder {
    background: linear-gradient(135deg, #1e293b 0%, #334155 60%, #0090e7 100%);
}

.company-blog-placeholder-tag {
    font-size: 0.62rem;
    letter-spacing: 1px;
}

.company-blog-title {
    font-size: 0.9rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.company-blog-excerpt {
    font-size: 0.8rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.company-blog-footer {
    font-size: 0.74rem;
}

.company-blog-readmore {
    font-size: 0.76rem;
}

.company-blog-readmore i {
    font-size: 0.62rem;
}

.company-blog-empty {
    border-color: #e2e8f0 !important;
}

.company-blog-empty-desc {
    max-width: 460px;
    margin: 0 auto;
    font-size: 0.78rem;
}

/* Indicator Toolbar & Buttons */
.indicator-chip-header {
    border-color: #f1f5f9 !important;
}

.indicator-badge-count {
    font-size: 0.725rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.indicator-badge-count.badge-indicator-active {
    background-color: rgba(0, 144, 231, 0.12) !important;
    color: #0090e7 !important;
    border-color: rgba(0, 144, 231, 0.25) !important;
}

.indicator-badge-count.badge-indicator-empty {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
}

.btn-indicator-select-all {
    font-size: 0.735rem;
    background: #ffffff;
    color: #0090e7;
    border: 1px solid #cbd5e1;
}

.btn-indicator-select-all:hover {
    background: #f0f9ff;
    color: #0077c2;
    border-color: #0090e7;
}

.btn-indicator-clear {
    font-size: 0.735rem;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.btn-indicator-clear:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* Report Grid & Ranking Disclaimer */
.table-col-ltp {
    min-width: 80px;
}

.table-col-metric {
    min-width: 85px;
}

.table-col-stock {
    min-width: 120px;
}

.stock-fullname-truncate {
    max-width: 160px;
}

.ranking-disclaimer-box {
    background-color: #fffbeb !important;
    border-color: #fef08a !important;
}

.ranking-disclaimer-text {
    font-size: 0.8rem;
    line-height: 1.55;
    color: #b45309;
}

.ranking-disclaimer-title {
    color: #92400e;
}

/* Layout & Global Utility Classes */
.navbar-brand-logo-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #0090e7 0%, #0077c2 100%);
}

.navbar-brand-link {
    color: #0f172a;
    font-size: 1.18rem;
    letter-spacing: -0.3px;
}

.nav-badge-free {
    font-size: 0.68rem;
    font-weight: 600;
}

.nav-badge-premium {
    font-size: 0.68rem;
    font-weight: 700;
    color: #b45309 !important;
}

.nav-search-container {
    min-width: 250px;
    max-width: 320px;
}

.nav-search-input {
    font-size: 0.835rem;
    color: #0f172a !important;
}

.nav-search-spinner {
    width: 14px;
    height: 14px;
}

.nav-stock-dropdown-menu {
    min-width: 320px;
    max-height: 350px;
    overflow-y: auto;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999999 !important;
    background: #ffffff !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16) !important;
    border: 1px solid #e2e8f0 !important;
}

.nav-avatar-circle {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    font-weight: 700;
}


.main-content-container {
    max-width: 1440px;
    margin-top: 15px;
}

/* ==========================================
   MODERN FINANCIAL SUITE FOOTER
   ========================================== */
.site-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
    color: #475569 !important;
    position: relative;
    text-align: left !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.02);
}

.site-footer a {
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s ease;
}

.site-footer a:hover {
    color: #0090e7;
}

.footer-brand-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: #ffffff;
    background: linear-gradient(135deg, #0090e7 0%, #0077c2 100%);
    box-shadow: 0 2px 8px rgba(0, 144, 231, 0.25);
    flex-shrink: 0;
}

.footer-brand-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.4px;
    margin: 0;
    line-height: 1.2;
}

.footer-desc {
    max-width: 340px;
    font-size: 0.835rem;
    line-height: 1.6;
    color: #64748b;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
}

.footer-whatsapp-box {
    margin-top: 0.5rem;
}

.btn-whatsapp-chat {
    background-color: #25D366;
    border: none;
    color: #ffffff !important;
    font-size: 0.835rem;
    font-weight: 600;
    padding: 0.55rem 1.25rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
}

.btn-whatsapp-chat:hover {
    background-color: #20bd5a;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

.footer-heading {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 1.15rem;
    line-height: 1.3;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.835rem;
}

.footer-links-list li a {
    display: inline-block;
    color: #64748b;
    transition: all 0.2s ease;
}

.footer-links-list li a:hover {
    color: #0090e7;
    transform: translateX(3px);
}

.footer-app-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.footer-app-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-app-box {
    width: 72px;
    height: 72px;
    padding: 6px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.footer-app-box:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.footer-app-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.835rem;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #64748b !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-contact-item:hover {
    color: #0090e7 !important;
}

.footer-contact-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0090e7;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.footer-social-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.15rem;
}

.footer-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.footer-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.footer-social-fb {
    color: #1877f2;
}

.footer-social-fb:hover {
    background-color: #1877f2;
    color: #ffffff !important;
    border-color: #1877f2;
}

.footer-social-yt {
    color: #ff0000;
}

.footer-social-yt:hover {
    background-color: #ff0000;
    color: #ffffff !important;
    border-color: #ff0000;
}

.footer-social-wa {
    color: #25D366;
}

.footer-social-wa:hover {
    background-color: #25D366;
    color: #ffffff !important;
    border-color: #25D366;
}

.footer-bottom-bar {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.footer-bottom-bar a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom-bar a:hover {
    color: #0090e7;
}

/* Responsive Mobile & Tablet Footer Styling */
@media (max-width: 767.98px) {
    .site-footer {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .footer-desc {
        max-width: 100%;
        font-size: 0.8125rem;
    }

    .btn-whatsapp-chat {
        width: 100%;
        max-width: 240px;
    }

    .footer-app-box {
        width: 66px;
        height: 66px;
    }

    .footer-social-btn {
        width: 38px;
        height: 38px;
    }

    .footer-bottom-bar {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        font-size: 0.775rem;
    }
}


.nav-stock-header {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
}

.nav-stock-symbol {
    font-size: 13.5px;
}

.nav-stock-name {
    font-size: 12px;
    max-width: 200px;
}

.nav-stock-badge {
    font-size: 11px;
    font-weight: 500;
}

/* Card & Widget Utility Classes */
.widget-card {
    border-color: #e2e8f0 !important;
}

.widget-card-header {
    border-color: #f1f5f9 !important;
    white-space: nowrap;
}

.widget-card-title {
    font-size: 0.825rem;
    font-weight: 700;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.widget-card-title i {
    margin-right: 7px !important;
    font-size: 0.875rem;
    display: inline-block;
}

.widget-nav-pills {
    font-size: 0.75rem;
    flex-wrap: nowrap !important;
}

.widget-nav-pills .nav-link {
    color: #64748b;
    background-color: #f1f5f9;
    font-size: 0.715rem;
    font-weight: 700;
    padding: 3px 8px !important;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.widget-nav-pills .nav-link:hover:not(.active) {
    background-color: #e2e8f0;
    color: #0f172a;
}

#gainers-tab.active {
    background-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

#losers-tab.active {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}

#turnover-tab.active {
    background-color: #0090e7 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 144, 231, 0.3);
}

#volume-tab.active {
    background-color: #0891b2 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);
}

.widget-table {
    font-size: 0.8125rem;
}

.widget-thead-tr {
    font-size: 0.7rem;
    letter-spacing: 0.3px;
}

.widget-thead-tr th {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #e2e8f0;
}

.widget-table tbody td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.widget-col-sn {
    width: 28px;
}

.widget-td-sn {
    font-size: 0.75rem;
}

.widget-diff-pct {
    font-size: 0.72rem;
    opacity: 0.85;
}

/* Stock Ranking Component Classes */
.stock-ranking-header-row {
    margin-top: -12px;
}

.stock-ranking-title {
    font-size: 1.25rem;
    letter-spacing: -0.3px;
    border-bottom: 2px solid #0090e7;
    padding-bottom: 2px !important;
}

.modal-icon-badge {
    width: 30px;
    height: 30px;
}

.modal-title-text {
    font-size: 0.95rem;
}

.modal-abbr-table {
    font-size: 0.825rem;
}

.modal-abbr-thead-tr {
    font-size: 0.72rem;
}

.modal-abbr-col {
    width: 90px;
}

.btn-toggle-search {
    font-size: 0.775rem;
    font-weight: 600;
    background-color: #0090e7;
    border-color: #0090e7;
}

.btn-abbr-trigger {
    font-size: 0.775rem;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    border-color: #cbd5e1 !important;
}

.ranking-form-box {
    border-color: #e2e8f0 !important;
}

.ranking-form-label {
    font-size: 0.8rem;
}

.ranking-form-select {
    height: 36px;
    border-color: #cbd5e1;
    font-size: 0.825rem;
    font-weight: 500;
}

.ranking-indicators-container {
    padding: 8px !important;
    border-color: #e2e8f0 !important;
}

.ranking-hint-circle {
    width: 22px;
    height: 22px;
    border-color: #cbd5e1 !important;
}

.ranking-hint-text {
    font-size: 0.785rem;
}

.ranking-result-table-box {
    border-color: #e2e8f0 !important;
}

.ranking-result-div {
    min-height: 320px;
}

.ranking-empty-circle {
    width: 50px;
    height: 50px;
    border: 1px solid #e2e8f0;
}

.ranking-empty-desc {
    max-width: 380px;
    font-size: 0.8rem;
}

/* Offer Banner Classes */
.offer-banner-box {
    border-color: #e2e8f0 !important;
}

.offer-banner-badge {
    font-size: 0.68rem;
    letter-spacing: 0.5px;
}

.offer-banner-img {
    max-height: 240px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* Nepse Performance Component Classes */
.nepse-perf-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
}

.nepse-perf-header {
    border-color: #f1f5f9 !important;
}

.nepse-perf-icon-badge {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.nepse-perf-title {
    letter-spacing: 0.4px;
    font-size: 0.95rem;
}

.nepse-index-input-prefix {
    font-size: 0.75rem;
    border-color: #cbd5e1;
    height: 30px;
}

.nepse-index-select {
    font-size: 0.75rem;
    height: 30px;
    border-color: #cbd5e1;
    cursor: pointer;
    min-width: 140px;
    background-color: #ffffff;
}

.nepse-interval-btn-active {
    font-weight: 600;
    font-size: 11.5px;
    height: 28px !important;
    min-height: 28px !important;
    line-height: 26px !important;
    background-color: #0090e7 !important;
    border-color: #0090e7 !important;
    color: #ffffff !important;
}

.nepse-interval-btn-inactive {
    font-weight: 600;
    font-size: 11.5px;
    height: 28px !important;
    min-height: 28px !important;
    line-height: 26px !important;
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

.nepse-metric-date-text {
    font-size: 0.75rem;
}

.nepse-metric-icon {
    font-size: 0.85rem;
}

.nepse-metric-lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.nepse-metric-val {
    font-size: 0.9rem;
}

.nepse-range-box {
    font-size: 0.775rem;
}

.nepse-chart-body {
    height: 410px;
    min-height: 410px;
}

.nepse-chart-legend {
    z-index: 10;
    pointer-events: none;
    font-size: 11px;
}

.nepse-chart-legend-volsma {
    color: #2563eb;
}

.nepse-pointer-date {
    display: none;
    bottom: 4px;
    z-index: 25;
    pointer-events: none;
    transform: translateX(-50%);
    font-size: 11px;
    border: 1px solid #334155;
    letter-spacing: 0.3px;
}

.nepse-tv-chart-container {
    width: 100%;
    height: 390px !important;
    min-height: 390px !important;
}

/* Market Index Summary Classes */
.idx-summary-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
}

.idx-summary-header {
    border-color: #f1f5f9 !important;
}

.idx-summary-icon-box {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(0, 144, 231, 0.2);
}

.idx-summary-icon {
    font-size: 0.8rem;
}

.idx-summary-title {
    font-size: 0.875rem;
}

.idx-summary-date-badge {
    font-size: 0.68rem;
}

.idx-summary-thead {
    background-color: #e2e8f0;
}

.idx-summary-thead-tr {
    font-size: 11px;
    letter-spacing: 0.3px;
    color: #0f172a;
    font-weight: 700;
}

.idx-summary-th {
    padding: 5px 10px !important;
}

.idx-summary-td-name {
    padding: 4.5px 10px !important;
    font-size: 0.815rem;
    white-space: nowrap;
    line-height: 1.4;
}

.idx-summary-td-val {
    padding: 4.5px 10px !important;
    font-size: 0.815rem;
    line-height: 1.4;
}

.idx-summary-td-chg {
    padding: 4.5px 10px !important;
    white-space: nowrap;
    line-height: 1.4;
    font-size: 0.8rem;
}

.idx-summary-pct-sub {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.9;
    line-height: 1.2;
}

.table-row-hover-transition {
    transition: background-color 0.15s ease;
}

/* Bento Grid Blog Component Classes */
.blog-section-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
}

.blog-section-header {
    border-color: #f1f5f9 !important;
}

.blog-section-icon-badge {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #0090e7 0%, #0077c2 100%);
    box-shadow: 0 2px 6px rgba(0, 144, 231, 0.25);
}

.blog-section-icon {
    font-size: 16px;
}

.blog-section-title {
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.blog-section-desc {
    font-size: 0.78rem;
    line-height: 1.4;
}

.btn-view-all-blogs {
    background: linear-gradient(135deg, #0090e7 0%, #0077c2 100%);
    border: none;
    font-size: 0.825rem;
    color: #ffffff !important;
}

.bento-card-box {
    border: 1px solid #e2e8f0 !important;
}

.bento-hero-img-box {
    height: 300px;
}

.bento-sub-img-box {
    height: 155px;
}

.bento-mobile-img-box {
    height: 175px;
}

.bento-img-top-cover {
    object-fit: cover;
    object-position: top center;
}

.bento-placeholder-bg {
    background: linear-gradient(135deg, #1e293b 0%, #334155 60%, #0090e7 100%);
}

.bento-placeholder-hero-text {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
}

.bento-placeholder-sub-text {
    font-size: 0.62rem;
    letter-spacing: 1px;
}

.bento-badge-hero {
    font-size: 0.72rem;
}

.bento-badge-hero-dark {
    font-size: 0.72rem;
    backdrop-filter: blur(4px);
}

.bento-badge-sub {
    font-size: 0.65rem;
}

.bento-badge-sub-dark {
    font-size: 0.65rem;
    backdrop-filter: blur(4px);
}

.bento-sym-badge {
    font-size: 0.72rem;
}

.bento-sym-badge-sub {
    font-size: 0.68rem;
}

.bento-sym-plus-badge {
    font-size: 0.7rem;
}

.bento-sym-plus-badge-sub {
    font-size: 0.65rem;
}

.bento-hero-title {
    font-size: 1.08rem;
    line-height: 1.45;
}

.bento-sub-title {
    font-size: 0.885rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.bento-mobile-title {
    font-size: 0.92rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.bento-hero-desc {
    font-size: 0.835rem;
    line-height: 1.6;
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bento-card-footer {
    border-color: #f1f5f9 !important;
    font-size: 0.76rem;
}

.bento-sub-footer {
    border-color: #f1f5f9 !important;
    font-size: 0.72rem;
}

.bento-mobile-footer {
    border-color: #f1f5f9 !important;
    font-size: 0.74rem;
}

.bento-read-btn-hero {
    font-size: 0.78rem;
}

.bento-read-btn-sub {
    font-size: 0.74rem;
}

.bento-read-btn-mobile {
    font-size: 0.76rem;
}

.table-col-sn-48 {
    width: 48px;
}

.table-col-sn-45 {
    width: 45px;
}

.table-col-type-90 {
    width: 90px;
}

.table-col-action-100 {
    width: 100px;
}

.table-col-date-100 {
    min-width: 100px;
}

.table-col-index-140 {
    min-width: 140px;
}

@media (max-width: 767.98px) {
    .table-col-index-140,
    th.col-sticky-1.table-col-index-140,
    td.col-sticky-1.table-col-index-140 {
        min-width: 95px !important;
        max-width: 105px !important;
        width: 100px !important;
    }
}

.input-w-140 {
    width: 140px;
}

.input-w-160 {
    width: 160px;
}

.input-w-180 {
    width: 180px;
}

.input-w-200 {
    width: 200px;
}

.min-w-0 {
    min-width: 0;
}

.control-h-36 {
    height: 36px;
}

/* Technical Scanner & Chart Studio Styles */
.chart-h-450 {
    height: 450px;
}

.chart-h-500 {
    height: 500px;
}

.chart-min-h-400 {
    min-height: 400px;
}

.chart-wrapper-box {
    height: 500px;
}

.chart-pointer-date-badge {
    display: none;
    bottom: 4px;
    z-index: 25;
    pointer-events: none;
    transform: translateX(-50%);
    font-size: 11px;
    border: 1px solid #334155;
    letter-spacing: 0.3px;
}

.chart-stock-select-wrap {
    max-width: 200px;
    min-width: 100px;
}

.chart-canvas-inner {
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
}

.btn-chart-nav {
    height: 28px !important;
    min-height: 28px !important;
    line-height: 26px !important;
    font-size: 11px;
}

.btn-chart-interval {
    font-weight: 600;
    font-size: 11.5px;
    height: 28px !important;
    min-height: 28px !important;
    line-height: 26px !important;
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

.btn-chart-interval.active {
    background-color: #0090e7 !important;
    border-color: #0090e7 !important;
    color: #ffffff !important;
}

.btn-details-interval {
    font-weight: 600;
    font-size: 11.5px;
    height: 26px !important;
    min-height: 26px !important;
    line-height: 24px !important;
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

.btn-details-interval.active {
    background-color: #0090e7 !important;
    border-color: #0090e7 !important;
    color: #ffffff !important;
}

.btn-details-chart-ext {
    height: 26px !important;
    min-height: 26px !important;
    line-height: 24px !important;
}

.btn-details-chart-ext i {
    font-size: 11px;
}

.badge-ema9 {
    border-color: #93c5fd !important;
}

.badge-ema20 {
    border-color: #fde68a !important;
}

.mobile-scroll-gutter {
    width: 22px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    touch-action: pan-y;
    z-index: 5;
    opacity: 0.85;
}

.mobile-scroll-text {
    font-size: 8px;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    user-select: none;
}

.mobile-scroll-icon {
    font-size: 9px;
}

.chart-stats-card-bg {
    background: #f8fafc;
}

.chart-hud-text {
    font-size: 11.5px;
}

.chart-hud-symbol {
    font-size: 12px;
}

.chart-hud-ltp {
    font-size: 13px;
}

.chart-hud-change {
    font-size: 11.5px;
}

.chart-hud-secondary {
    font-size: 11px;
}

/* Stock Details Page Elements */
.stock-badge-hero {
    min-width: 65px;
    text-align: center;
}

.stock-details-meta {
    font-size: 0.775rem;
}

.stock-details-stat-label {
    font-size: 9.5px;
    letter-spacing: 0.3px;
}

.stock-details-stat-val-52w {
    font-size: 10.5px;
}

.stock-badge-pos {
    background-color: #ecfdf5;
    color: #059669;
    font-size: 0.775rem;
}

.stock-badge-neg {
    background-color: #fef2f2;
    color: #dc2626;
    font-size: 0.775rem;
}

.fin-cat-header {
    background: #e2e8f0;
    border-bottom: 2px solid #cbd5e1;
}

.fin-cat-icon {
    font-size: 9px;
}

.fin-cat-title {
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

.fin-cat-unit-badge {
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
}

.fin-cat-unit-text {
    font-size: 10.5px;
    text-transform: none;
    letter-spacing: 0;
}

.fin-row-label {
    font-size: 12.5px;
    width: 60%;
}

.fin-row-val {
    font-size: 12.5px;
    width: 40%;
}

.stock-details-fin-scroll {
    max-height: 540px;
    overflow-y: auto;
}

.stock-details-chart-box {
    min-height: 480px;
    height: 500px;
}

.stock-details-blogs-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
}

.stock-details-blogs-header {
    border-color: #f1f5f9 !important;
}

.stock-details-blogs-title {
    letter-spacing: -0.2px;
}

.stock-details-blogs-btn {
    font-size: 0.8rem;
}

.stock-details-th-cat {
    background: #e2e8f0;
    border-bottom: 2px solid #cbd5e1;
}

.stock-details-th-cat-icon {
    font-size: 9px;
}

.stock-details-th-cat-title {
    font-size: 11.5px;
    letter-spacing: 0.5px;
}

/* Home Page Specific Elements */
.stakeholder-modal-content {
    border: 1px solid #e2e8f0;
}

.stakeholder-modal-header {
    border-color: #f1f5f9 !important;
}

.stakeholder-modal-icon-wrapper {
    width: 38px;
    height: 38px;
    background-color: rgba(0, 144, 231, 0.1);
}

.stakeholder-modal-icon {
    color: #0090e7;
}

.stakeholder-modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.stakeholder-modal-badge {
    font-size: 0.7rem;
    background-color: #eff6ff;
    color: #0090e7;
    border: 1px solid rgba(0, 144, 231, 0.25);
}

.stakeholder-modal-card {
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.stakeholder-modal-category {
    font-size: 0.75rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.stakeholder-modal-body {
    font-size: 0.885rem;
    line-height: 1.7;
    text-align: justify;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.stakeholder-modal-footer {
    border-color: #f1f5f9 !important;
}

.stakeholder-modal-btn {
    font-size: 0.825rem;
    font-weight: 500;
}

.unified-ranking-studio-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
}

.ranking-calc-title {
    font-size: 0.95rem;
}

.ranking-calc-desc {
    max-width: 420px;
    font-size: 0.8rem;
}

.tutorial-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
}

.tutorial-icon-box {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.tutorial-title {
    font-size: 0.95rem;
}

.tutorial-badge {
    font-size: 0.7rem;
}

.tutorial-heading {
    font-size: 0.885rem;
}

.tutorial-desc {
    font-size: 0.8rem;
    line-height: 1.5;
}

.tutorial-takeaways-box {
    border-color: #e2e8f0 !important;
}

.tutorial-takeaways-title {
    font-size: 0.825rem;
}

.tutorial-takeaways-list {
    font-size: 0.775rem;
    line-height: 1.6;
}

.stakeholders-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
}

.stakeholders-icon-box {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(0, 144, 231, 0.2);
}

.stakeholders-title {
    font-size: 0.95rem;
}

.stakeholders-badge {
    font-size: 0.7rem;
}

.stakeholders-desc {
    font-size: 0.815rem;
    line-height: 1.5;
}

.stakeholder-item-box {
    border-color: #e2e8f0 !important;
}

.stakeholder-item-title {
    font-size: 0.84rem;
}

.stakeholder-item-role {
    font-size: 0.68rem;
}

.stakeholder-item-desc {
    font-size: 0.775rem;
    line-height: 1.55;
    text-align: justify;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Blogs Page & Blog Detail Styles */
.blog-header-title {
    letter-spacing: -0.3px;
}

.blog-hero-featured-tag {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
}

.blog-featured-badge {
    font-size: 0.72rem;
}

.blog-sym-badge {
    font-size: 0.72rem;
}

.blog-meta-date-read {
    font-size: 0.75rem;
}

.blog-headline-title {
    font-size: 1.15rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-excerpt-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sticky-sidebar-ad,
.blog-sticky-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 96px !important;
    z-index: 10 !important;
}

/* Accommodate full-width administration topbar strip when present */
body:has(.admin-topbar-strip) .sticky-sidebar-ad,
body:has(.admin-topbar-strip) .blog-sticky-sidebar {
    top: 138px !important;
}

.blog-ad-badge {
    font-size: 0.68rem;
}

.blog-ad-title {
    font-size: 0.88rem;
}

.blog-ad-desc {
    font-size: 0.74rem;
    max-width: 170px;
}

.blog-section-subhead {
    letter-spacing: -0.2px;
}

.blog-card-fallback-text {
    font-size: 0.62rem;
    letter-spacing: 1px;
}

.blog-grid-sym-badge {
    font-size: 0.7rem;
}

.blog-grid-more-badge {
    font-size: 0.68rem;
}

.blog-detail-tag-badge {
    font-size: 0.76rem;
}

.blog-detail-article-content {
    font-size: 0.95rem;
    line-height: 1.8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.blog-detail-stock-btn {
    font-size: 0.8rem;
}

.blog-detail-share-label {
    font-size: 0.82rem;
}

/* Authentication (Login / Register) Styles */
.login-brand-icon {
    font-size: 2.5rem;
}

.login-alert-success {
    font-size: 0.85rem;
    border-radius: 8px;
}

.login-alert-danger {
    font-size: 0.825rem;
    border-radius: 8px;
}

.register-card-container {
    max-width: 480px;
}

.register-brand-icon {
    font-size: 2.3rem;
}

.captcha-input {
    letter-spacing: 1.5px;
}

.captcha-img {
    height: 38px;
    width: 100%;
    object-fit: contain;
    background: #f8fafc;
}

.captcha-refresh-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

/* Portfolio Module Styles */
.portfolio-title-heading {
    letter-spacing: -0.3px;
}

.portfolio-title-icon-wrap {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #0090e7 0%, #0077c2 100%);
}

.portfolio-title-icon {
    font-size: 16px;
}

.portfolio-nav-btn {
    height: 36px;
    font-weight: 600;
    background: #ffffff;
    color: #334155;
    border-color: #cbd5e1;
    border-radius: 6px;
}

.portfolio-action-btn {
    height: 36px;
    font-weight: 600;
    border-radius: 6px;
}

.portfolio-btn-h36 {
    height: 36px;
}

.portfolio-control-h36 {
    height: 36px;
}

.portfolio-badge-sm {
    font-size: 11px;
}

.portfolio-action-icon-btn {
    width: 28px;
    height: 28px;
}

.portfolio-action-icon {
    font-size: 11px;
}

.portfolio-table-tfoot {
    border-top: 2px solid #64748b;
    font-weight: bold;
    background: #f8fafc;
}

.portfolio-kpi-blue {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}

.portfolio-kpi-green {
    background: linear-gradient(135deg, #065f46 0%, #059669 100%);
}

.portfolio-kpi-red {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
}

.portfolio-kpi-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.portfolio-kpi-title {
    font-size: 11px;
    letter-spacing: 0.6px;
}

.portfolio-kpi-icon-wrap {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
}

.portfolio-kpi-icon {
    font-size: 12px;
}

.portfolio-kpi-val {
    font-size: 1.45rem;
}

.portfolio-kpi-sub {
    font-size: 11px;
}

.portfolio-tx-hint {
    font-size: 11px;
}

.portfolio-summary-sublabel {
    font-size: 11px;
    letter-spacing: 0.5px;
}

.portfolio-kpi-teal {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

.portfolio-kpi-rose {
    background: linear-gradient(135deg, #881337 0%, #f43f5e 100%);
}

.portfolio-kpi-cyan {
    background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%);
}

.portfolio-kpi-orange {
    background: linear-gradient(135deg, #c2410c 0%, #f97316 100%);
}

.portfolio-kpi-purple {
    background: linear-gradient(135deg, #581c87 0%, #8b5cf6 100%);
}

.portfolio-kpi-burgundy {
    background: linear-gradient(135deg, #4c0519 0%, #be123c 100%);
}

.portfolio-kpi-amber {
    background: linear-gradient(135deg, #78350f 0%, #f59e0b 100%);
}

.portfolio-badge-xs {
    font-size: 10.5px;
}

.portfolio-icon-box-30 {
    width: 30px;
    height: 30px;
}

.portfolio-icon-box-28 {
    width: 28px;
    height: 28px;
}

.portfolio-icon-13 {
    font-size: 13px;
}

.portfolio-btn-h32 {
    height: 32px;
    font-weight: 600;
    border-radius: 6px;
}

.portfolio-symbol-badge {
    font-size: 13px;
}

.portfolio-comp-truncate {
    max-width: 220px;
}

.portfolio-sector-badge {
    font-size: 10.5px;
}

.portfolio-empty-icon-box {
    width: 72px;
    height: 72px;
}

.portfolio-empty-text {
    max-width: 420px;
    margin: 0 auto;
}

.table-col-stock-110 {
    min-width: 110px;
}

.table-col-comp-180 {
    min-width: 180px;
}

.table-col-pnl-90 {
    min-width: 90px;
}

.table-col-action-110 {
    width: 110px;
}

/* Navbar Search Focus */
.navbar-search-box.navbar-search-focused,
.navbar-search-box:focus-within {
    background: #ffffff !important;
    border-color: #0090e7 !important;
    box-shadow: 0 0 0 3px rgba(0, 144, 231, 0.15) !important;
}

/* Stakeholder Modal Badges & Icons */
.stakeholder-badge-sebon {
    background-color: rgba(0, 144, 231, 0.12) !important;
    color: #0090e7 !important;
    border: 1px solid #0090e7 !important;
}
.stakeholder-icon-sebon {
    background-color: rgba(0, 144, 231, 0.12) !important;
    color: #0090e7 !important;
}

.stakeholder-badge-nepse {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
    border: 1px solid #10b981 !important;
}
.stakeholder-icon-nepse {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
}

.stakeholder-badge-nrb {
    background-color: rgba(6, 182, 212, 0.12) !important;
    color: #06b6d4 !important;
    border: 1px solid #06b6d4 !important;
}
.stakeholder-icon-nrb {
    background-color: rgba(6, 182, 212, 0.12) !important;
    color: #06b6d4 !important;
}

.stakeholder-badge-mutualfunds {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
    border: 1px solid #f59e0b !important;
}
.stakeholder-icon-mutualfunds {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

.stakeholder-badge-nif {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
    border: 1px solid #ef4444 !important;
}
.stakeholder-icon-nif {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
}

.stakeholder-badge-listedcompanies {
    background-color: rgba(100, 116, 139, 0.12) !important;
    color: #64748b !important;
    border: 1px solid #64748b !important;
}
.stakeholder-icon-listedcompanies {
    background-color: rgba(100, 116, 139, 0.12) !important;
    color: #64748b !important;
}

.bg-success-soft {
    background-color: rgba(16, 185, 129, 0.1) !important;
}
.bg-danger-soft {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* ==========================================================================
   User Profile Account Dropdown Modernization
   ========================================================================== */
.user-dropdown-menu {
    min-width: 230px !important;
    padding: 6px !important;
    border-radius: 10px !important;
    border: 1px solid #dcdcdc !important;
    background: #f0f0f0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    margin-top: 6px !important;
    animation: fadeInDown 0.15s ease-out;
}

.user-dropdown-item {
    font-size: 13.5px;
    color: #0f172a !important;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    line-height: 1.4;
}

.user-dropdown-item.dropdown-item-text {
    color: #334155 !important;
    background: transparent !important;
}

a.user-dropdown-item:hover,
button.user-dropdown-item:hover {
    background-color: #ffffff !important;
    color: var(--sn-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.user-dropdown-item .user-dropdown-item-icon {
    width: 20px;
    text-align: center;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    margin-right: 10px;
}

.user-dropdown-logout {
    color: #dc3545 !important;
}

.user-dropdown-logout:hover {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}

.user-dropdown-logout:hover .user-dropdown-item-icon {
    color: #b91c1c !important;
}

/* ==========================================================================
   Mobile Drilldown Navigation (Mobile Only - d-lg-none)
   ========================================================================== */
@media (max-width: 991.98px) {
    .mobile-nav-offcanvas {
        max-width: 330px !important;
        width: 86% !important;
        margin-top: -15px !important;
        border-right: 1px solid #e2e8f0;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    }

    .mobile-nav-offcanvas .offcanvas-body {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 65px);
        overflow: hidden !important;
    }

    .mobile-drilldown-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
    }

    .mobile-drilldown-panels {
        height: 100%;
        display: flex;
        flex-shrink: 0;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    .mobile-drilldown-panel {
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .mobile-panel-top {
        flex-grow: 1;
        overflow-y: auto;
    }

    .mobile-panel-bottom {
        margin-top: auto;
        flex-shrink: 0;
        background-color: #ffffff;
    }

    .mobile-nav-icon {
        width: 22px !important;
        min-width: 22px !important;
        text-align: center !important;
        margin-right: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        flex-shrink: 0 !important;
    }

    .mobile-nav-item {
        font-size: 14px;
        font-weight: 500;
        color: #1e293b;
        padding: 9px 12px;
        border-radius: 8px;
        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
        text-decoration: none;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:active {
        background-color: #f1f5f9;
        color: #0f172a;
    }

    .mobile-nav-logout {
        color: #dc3545 !important;
    }

    .mobile-nav-logout:hover {
        background-color: #fef2f2 !important;
        color: #b91c1c !important;
    }

    .mobile-nav-logout:hover .mobile-nav-icon {
        color: #b91c1c !important;
    }

    .mobile-drill-btn {
        cursor: pointer;
    }

    .mobile-drill-header {
        background: #f8fafc !important;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-drill-back {
        border-color: #cbd5e1 !important;
        color: #475569 !important;
        transition: all 0.15s ease-in-out;
    }

    .mobile-drill-back:hover {
        background-color: #e2e8f0 !important;
        color: #0f172a !important;
    }
}

/* ==========================================================================
   Sticky Header Animation & Footer Collision Standard
   ========================================================================== */
header.site-header,
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    background-color: #ffffff !important;
    transition: box-shadow 0.2s ease !important;
}

header.site-header.header-scrolled,
.sn-navbar.navbar-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* ==========================================================================
   Mobile Search Overlay & Dropdown Standards
   ========================================================================== */
.mobile-search-open-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    transition: all 0.15s ease-in-out;
}

.mobile-search-open-btn:hover,
.mobile-search-open-btn:active {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

.mobile-search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    z-index: 1035;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    animation: mobileSearchSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mobileSearchSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-search-inner {
    min-height: 56px;
}

.mobile-search-input-wrap {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transition: all 0.15s ease-in-out;
}

.mobile-search-input-wrap:focus-within {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.mobile-search-input {
    font-size: 0.9rem !important;
    color: #0f172a !important;
}

.mobile-search-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.mobile-search-close-btn {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b !important;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.15s ease-in-out;
}

.mobile-search-close-btn:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

.mobile-stock-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    background: #ffffff;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

.mobile-stock-dropdown .nav-stock-item {
    transition: background-color 0.15s ease;
}

.mobile-stock-dropdown .nav-stock-item:hover,
.mobile-stock-dropdown .nav-stock-item.active {
    background-color: #f8fafc !important;
}

/* ==========================================
   SITEMAP PAGE STYLING
   ========================================== */
.sitemap-wrapper {
    max-width: 1040px;
    margin: 1.75rem auto 4rem auto;
    padding: 0 1rem;
}

.sitemap-header {
    text-align: center;
    margin-bottom: 3rem;
}

.sitemap-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-bottom: 0.75rem;
}

.sitemap-subtitle {
    font-size: 0.95rem;
    color: #64748b;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

.sitemap-section {
    margin-bottom: 2.5rem;
}

.sitemap-section-title {
    text-align: center;
    font-size: 1.175rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.15rem;
    letter-spacing: -0.2px;
}

.sitemap-card {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.75rem 2.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.sitemap-links-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 1.75rem;
}

.sitemap-link-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sitemap-bullet {
    width: 6px;
    height: 6px;
    background-color: #94a3b8;
    border-radius: 1.5px;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.sitemap-link-item:hover {
    color: #0090e7;
    transform: translateY(-1px);
}

.sitemap-link-item:hover .sitemap-bullet {
    background-color: #0090e7;
}

@media (max-width: 767.98px) {
    .sitemap-wrapper {
        margin-top: 1rem;
        margin-bottom: 2.5rem;
        padding: 0 0.5rem;
    }

    .sitemap-title {
        font-size: 1.75rem;
    }

    .sitemap-subtitle {
        font-size: 0.85rem;
    }

    .sitemap-section-title {
        font-size: 1.05rem;
        margin-bottom: 0.85rem;
    }

    .sitemap-card {
        padding: 1.25rem 1rem;
    }

    .sitemap-links-grid {
        justify-content: flex-start;
        gap: 0.6rem 1.25rem;
    }

    .sitemap-link-item {
        font-size: 0.835rem;
    }
}

/* ========================================================
   MOBILE RESPONSIVE COLUMN SIZING & COMPACT TABLE (< 768px)
   ======================================================== */
@media (max-width: 767.98px) {
    /* Global Compact Table Typography & Cell Padding */
    table.dataTable,
    .table-responsive > .table,
    .table-responsive table,
    .table-mobile-compact,
    .dataTables_wrapper table {
        font-size: 0.775rem !important;
    }

    table.dataTable th,
    table.dataTable td,
    .table-responsive > .table th,
    .table-responsive > .table td,
    .table-responsive table th,
    .table-responsive table td,
    .table-mobile-compact th,
    .table-mobile-compact td {
        padding: 5px 4px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }

    /* S.N. Column (All DataTables & Standard Reports) */
    th.num,
    td.num,
    .table-col-sn,
    .table-col-sn-48,
    .table-col-sn-45,
    table.dataTable th.num,
    table.dataTable td.num,
    #rankingReportTable th.table-col-sn,
    #rankingReportTable td.table-col-sn {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 36px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        text-align: center !important;
        font-size: 0.75rem !important;
    }

    /* Sticky Rank Column (Stock Ranking) */
    #rankingReportTable th.ranking-sticky-rank,
    #rankingReportTable td.ranking-sticky-rank {
        left: 0 !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        padding-left: 3px !important;
        padding-right: 12px !important;
        font-size: 0.75rem !important;
    }

    /* Sticky Stock Column for Ranking Table (Left offset 46px after Rank) */
    #rankingReportTable th.ranking-sticky-stock,
    #rankingReportTable td.ranking-sticky-stock {
        left: 46px !important;
        width: 68px !important;
        min-width: 68px !important;
        max-width: 72px !important;
        padding-left: 4px !important;
        padding-right: 12px !important;
        font-size: 0.775rem !important;
    }

    /* Sticky Stock / Symbol Column (Single-Column Sticky Standard Reports: TodayPrice, Graham, Pivot, etc.) */
    th.stock,
    td.stock,
    th.col-sticky-1,
    td.col-sticky-1,
    .table-col-stock,
    .table-col-stock-110,
    table.dataTable th.stock,
    table.dataTable td.stock {
        left: 0 !important;
        width: 58px !important;
        min-width: 58px !important;
        max-width: 66px !important;
        padding-left: 3px !important;
        padding-right: 10px !important;
        font-size: 0.76rem !important;
    }

    .stock-fullname-truncate {
        max-width: 80px !important;
        font-size: 0.68rem !important;
    }

    /* LTP Column */
    .table-col-ltp,
    #rankingReportTable th.table-col-ltp,
    #rankingReportTable td.table-col-ltp {
        min-width: 56px !important;
        width: 58px !important;
        padding-left: 3px !important;
        padding-right: 10px !important;
        font-size: 0.775rem !important;
    }

    /* Metric & Numerical Columns (EPS, PBV, PE, BV, P/L, Turnover, Volume, etc.) */
    .table-col-metric,
    .table-col-pnl-90,
    table.dataTable th.text-end,
    table.dataTable td.text-end,
    .table-responsive table th.text-end,
    .table-responsive table td.text-end {
        min-width: 48px !important;
        padding-left: 2px !important;
        padding-right: 8px !important;
        font-size: 0.775rem !important;
    }

    /* Action & Status Columns */
    .table-col-action,
    .table-col-action-100,
    .table-col-action-110,
    .table-col-actions {
        width: 55px !important;
        min-width: 55px !important;
        padding: 3px 4px !important;
    }

    .table-responsive table .badge,
    table.dataTable .badge {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }

    /* Slim Sorting Icons on Mobile Headers */
    table.dataTable thead > tr > th.sorting,
    table.dataTable thead > tr > th.sorting_asc,
    table.dataTable thead > tr > th.sorting_desc,
    .dataTables_wrapper thead th.sorting,
    .dataTables_wrapper thead th.sorting_asc,
    .dataTables_wrapper thead th.sorting_desc,
    #rankingReportTable thead th.sorting,
    #rankingReportTable thead th.sorting_asc,
    #rankingReportTable thead th.sorting_desc {
        padding-right: 12px !important;
        background-position: right 2px center !important;
        background-size: 7px 10px !important;
    }

    /* DataTables Top & Bottom Controls on Mobile */
    .dataTables_wrapper {
        gap: 0.35rem;
    }

    #rankingReportTable_wrapper {
        gap: 0.35rem;
    }

    .ranking-center-meta-wrap {
        order: 1;
        width: 100%;
        margin-bottom: 0.35rem;
    }

    .dataTables_wrapper .dataTables_length,
    #rankingReportTable_wrapper .dataTables_length {
        order: 2;
        margin-bottom: 0.35rem;
        font-size: 0.8rem;
    }

    .dataTables_wrapper .dataTables_filter,
    #rankingReportTable_wrapper .dataTables_filter {
        order: 3;
        margin-bottom: 0.35rem;
        margin-left: auto;
        font-size: 0.8rem;
    }

    .dataTables_wrapper .dataTables_filter input,
    #rankingReportTable_wrapper .dataTables_filter input {
        max-width: 130px;
        height: 32px;
        font-size: 0.78rem;
        padding: 2px 6px;
    }

    .dataTables_wrapper .dataTables_length select,
    #rankingReportTable_wrapper .dataTables_length select {
        height: 32px;
        font-size: 0.78rem;
        padding: 2px 4px;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 0.75rem;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 2px 6px !important;
        font-size: 0.75rem !important;
    }

    .ranking-selected-sector-pill {
        font-size: 0.75rem;
        padding: 2px 10px;
    }
}

/* Admin Form Controls & Standard 36px Height Utilities */
.form-control-36,
.form-select-36 {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 0.875rem !important;
}

.btn-36 {
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* DataTables Header & Footer Flex Layout (Justify Between) */
.dataTables_wrapper .dt-top-controls,
.dataTables_wrapper .dt-bottom-controls {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.dataTables_wrapper .dt-top-controls .dataTables_length,
.dataTables_wrapper .dt-bottom-controls .dataTables_info {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.dataTables_wrapper .dt-top-controls .dataTables_filter,
.dataTables_wrapper .dt-bottom-controls .dataTables_paginate {
    margin: 0 !important;
    margin-left: auto !important;
    text-align: right !important;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5rem !important;
    display: inline-block !important;
    width: auto !important;
}

/* Table Scroll Container Standard (Scrolls Only Table, Header Stays at Top: 0) */
.table-scroll-container {
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    position: relative !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
}

.table-scroll-container table,
.table-responsive table,
table.dataTable,
#rankingReportTable {
    width: 100% !important;
    min-width: 100% !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#rankingReportTable_wrapper .table-scroll-container,
#rankingReportTable_wrapper .table-responsive,
#todayPriceTable_wrapper .table-scroll-container,
#todayPriceTable_wrapper .table-responsive {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
}

/* Sticky Table Header (Pinned to top: 0 inside scroll container) */
.table-scroll-container thead th,
#todayPriceTable thead th,
.table-sticky-header thead th,
.table-sticky-thead thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    box-shadow: inset 0 -1px 0 #cbd5e1 !important;
}

/* Sticky Symbol Column inside table scroll container */
.table-scroll-container tbody td.stock,
.table-scroll-container tbody td.col-sticky-1,
#todayPriceTable tbody td.stock,
#todayPriceTable tbody td.col-sticky-1 {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background-color: #ffffff !important;
    border-right: 1px solid #cbd5e1 !important;
}

/* Top-Left Intersection (Header + Symbol / S.N. Column) */
.table-scroll-container thead th.stock,
.table-scroll-container thead th.col-sticky-1,
#todayPriceTable thead th.stock,
#todayPriceTable thead th.col-sticky-1 {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 25 !important;
    background-color: #e2e8f0 !important;
    border-right: 1px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

/* Top Blue Accent Line with Rounded Corners */
#today-price-section,
#technical-blogs-section,
#recommendation-header-section,
#recommendation-section,
#index-recommendation-header-section,
#index-recommendation-section {
    border: 1px solid #e2e8f0 !important;
    border-top: 3.5px solid #0090e7 !important;
    border-radius: 12px !important;
}

#technical-blogs-section {
    margin-top: 50px !important;
}

/* ==========================================================================
   Stock Ranking & Comparison Multi-Column Sticky & Header Alignment Standard
   ========================================================================== */
#rankingReportTable thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
    background-color: #2f76a1 !important;
    color: #ffffff !important;
    border-color: #235b7d !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* Rank column (Left: 0, non-wrapping) - Desktop */
#rankingReportTable th.ranking-sticky-rank,
#rankingReportTable td.ranking-sticky-rank {
    position: sticky !important;
    left: 0 !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

#rankingReportTable td.ranking-sticky-rank {
    z-index: 15 !important;
    background-color: #ffffff !important;
}

/* Stock column (Left: 80px, pinned after Rank) - Desktop */
#rankingReportTable th.ranking-sticky-stock,
#rankingReportTable td.ranking-sticky-stock {
    position: sticky !important;
    left: 80px !important;
    min-width: 100px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

#rankingReportTable td.ranking-sticky-stock {
    z-index: 14 !important;
    background-color: #ffffff !important;
    border-right: 2px solid #cbd5e1 !important;
}

/* Top-Left Header Intersections - Desktop */
#rankingReportTable thead th.ranking-sticky-rank {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 40 !important;
    background-color: #2f76a1 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    padding-right: 24px !important;
}

#rankingReportTable thead th.ranking-sticky-stock {
    position: sticky !important;
    top: 0 !important;
    left: 80px !important;
    z-index: 39 !important;
    background-color: #2f76a1 !important;
    color: #ffffff !important;
    border-right: 2px solid #235b7d !important;
    white-space: nowrap !important;
}

#rankingReportTable.table-hover tbody tr:hover > td.ranking-sticky-rank,
#rankingReportTable.table-hover tbody tr:hover > td.ranking-sticky-stock {
    background-color: #f1f5f9 !important;
}

/* ==========================================================================
   Mobile Responsive Sizing (< 768px): Compact Rank & Stock Columns
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Compact Rank Column on Mobile */
    #rankingReportTable th.ranking-sticky-rank,
    #rankingReportTable td.ranking-sticky-rank {
        left: 0 !important;
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        padding-left: 2px !important;
        padding-right: 14px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    /* Compact Stock Column on Mobile (Pinned tightly at left: 54px right after Rank) */
    #rankingReportTable th.ranking-sticky-stock,
    #rankingReportTable td.ranking-sticky-stock {
        left: 54px !important;
        width: 66px !important;
        min-width: 66px !important;
        max-width: 72px !important;
        padding-left: 3px !important;
        padding-right: 6px !important;
        font-size: 0.775rem !important;
        white-space: nowrap !important;
    }

    #rankingReportTable thead th.ranking-sticky-rank {
        top: 0 !important;
        left: 0 !important;
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        padding-right: 14px !important;
    }

    #rankingReportTable thead th.ranking-sticky-stock {
        top: 0 !important;
        left: 54px !important;
        width: 66px !important;
        min-width: 66px !important;
        max-width: 72px !important;
        padding-right: 6px !important;
    }

    /* General Stock Symbol Column for other single-column sticky reports */
    th.stock,
    td.stock,
    th.col-sticky-1,
    td.col-sticky-1,
    .table-col-stock {
        left: 0 !important;
        width: 58px !important;
        min-width: 58px !important;
        max-width: 64px !important;
        padding-left: 3px !important;
        padding-right: 6px !important;
        font-size: 0.76rem !important;
    }
}