/* ====================================== */
/* Navigation bar */
/* ====================================== */
.navbar {
    display: block;
    padding: 0;
}

/* ====================================== */
/* Sidebar */
/* ====================================== */
/* - Icon */
ul.treeview-menu > li > a > i {
    padding: 0 4px 0 0;
}

ul.treeview-menu > li > a > i.fa-circle {
    font-size: 12px;
    padding: 2px 4px 0 0;
}


/* Style for manddatory field with asterick */
.mandatory-indicator {
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

/* ====================================== */
/* DataTables Custom CSS */
/* ====================================== */
/* DataTables's search input pane  */
.Datatables-search-input {
    right: 0;
    padding-top: 10px;
    padding-right: 35px;
    display: flex;
    position:absolute;
}

/* DataTables's footer */
.Datatables-foot-input {
    background-color: #1e282c;
    color: #ecf0f5;
    font-size: 14px;
}

.Datatables-foot-input tr.bg-blue {
    color: #fff;
    background-color: #3c8dbc !important;
}

.Datatables-header-input {
    float: left;
    display: flex;
    padding-top: 0 !important; /* Reduce the padding gap between the DataTables listing and search input, button export file and column visibility */
    width: 100%;
    background-color: #1e282c;
}

.Datatables-header-input > div.row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-top: 4px;
}

.Datatables-header-input table {
    border-radius: 5px;
    text-align: center;
    color: darkgrey;
    width: 100%;
}

.Datatables-header-input span {
    font-size: 20px;
    color: #ecf0f5;
    }

/* Style for data table */
.table-background {
    background-color: #ecf0f5;
}

/*style for odd stripe*/
.table.dataTable.table.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: rgb(223, 240, 245) !important;
}

/*style for even stripe*/
.table.dataTable.table > tbody > tr {
    background-color: white !important;
}

.table-hover tbody tr:hover td {
    background-color: rgba(255, 215, 0, 0.52);
}


.table-sm > thead > tr > th, .table-sm > tbody > tr > th, .table-sm > tfoot > tr > th, .table-sm > thead > tr > td, .table-sm > tbody > tr > td, .table-sm > tfoot > tr > td {
    padding: 4px 6px !important;
    vertical-align: top;
}

.table-cols {
    width: 100% !important;
    background-color: rgb(249, 249, 249);
}

div.dt-length {
    float: left;
    padding: 10px 10px 0 10px;
    margin-bottom: 0.5rem;
}

div.dt-search {
    text-align: right;
    float: right;
    padding-right: 10px;
    padding-top: 10px;
}

/* DataTables buttons */
@media screen and (max-width: 1055px) {
    div.dt-buttons {
        position: relative;
        float: left;
        padding-top: 8px;
        text-align: left;
    }
}

div.dt-buttons {
    float: left !important;
    padding-top: 8px;
    padding-right: 5px;
    padding-bottom: 10px;
}

    div.dt-buttons > .dt-button {
        font-size: 12px !important;
        background: linear-gradient(to bottom, white 0%, #99D9EA 100%) !important;
    }

div.dt-button-collection .dt-button.buttons-columnVisibility {
    white-space: normal !important;
    opacity: 0.6;
    background: linear-gradient(to bottom, white 0%, #99D9EA 100%) !important;
}

    div.dt-button-collection .dt-button.buttons-columnVisibility > span {
        padding-right: 1em;
    }

div.dt-button-collection .dt-button.dt-button-active,
div.dt-button-collection .dt-button.buttons-colvisRestore {
    opacity: 1; /* Set full opacity for active buttons */
    background: linear-gradient(to bottom, white 0%, #99D9EA 100%) !important;
}

div.dt-button-collection .dt-button:focus {
    outline: none;
}

.dt-head-center .custombtn {
    margin-left: 1.7px;
    margin-right: 1.7px;
    border-radius: 2px;
}

/* DataTables Ordering button style */
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: .4;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: 1;
}

/* Change datatable column header center */
.dt-head-center {
    text-align: center !important;
}

/* Column Visibility's column buttons */
button.dt-button-active {
    padding-right: 2em; /* Adjust this value to create space for the icon */
}

/* Datatable Loading Container Styles (Overwrite Default from dataTables.boostrap4.min.css) */
div.dt-container div.dt-processing {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
}

div.dt-processing > div:last-child > div {
    top: 20%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

    div.dt-processing > div:last-child > div:nth-child(1) {
        left: 10px !important;
        animation: datatables-loader-1 0.6s infinite, colorChange 1.5s infinite !important;
    }

    div.dt-processing > div:last-child > div:nth-child(2) {
        left: 10px !important;
        animation: datatables-loader-2 0.6s infinite, colorChange 1.5s infinite !important;
    }

    div.dt-processing > div:last-child > div:nth-child(3) {
        left: 34px !important;
        animation: datatables-loader-2 0.6s infinite, colorChange 1.5s infinite !important;
    }

    div.dt-processing > div:last-child > div:nth-child(4) {
        left: 58px !important;
        animation: datatables-loader-3 0.6s infinite, colorChange 1.5s infinite !important;
    }


@keyframes colorChange {
    0% {
        background: rgb(255, 0, 0); /* Red */
    }

    25% {
        background: rgb(255, 100, 0); /* Orange */
    }

    50% {
        background: rgb(255, 193, 7); /* Yellow */
    }

    75% {
        background: rgb(144, 238, 144); /* Light Green */
    }

    100% {
        background: rgb(0, 255, 0); /* Blue */
    }
}

/* Data Table ''Showing x to y of z entries' */
div.dt-info, div.dt-paging, div#paginationContainer, div#paginationContainer1, div#paginationContainer2, div#paginationContainer3 {
    padding: 10px 0 10px 0;
}

div.dt-container div.dt-paging ul.pagination {
    flex-wrap: nowrap;
}

@media only screen and (max-width: 468px) {
    .page-link {
        padding: 8px 10px;
    }
}

@media only screen and (max-width: 435px) {
    .page-link {
        padding: 8px 8px;
    }
}

@media only screen and (max-width: 345px) {
    .page-link {
        padding: 8px 6px;
    }
}

/* DataTables Filter Styles */
.column-filter {
    font-size: 11px;
    position: relative;
    width: 75%; /* If width more than 85 then it would use width 75% for bigger column */
    min-width: 85px; /* Ensure not too small width and let narrow column have 100% width instead of 75%*/
    max-width: 100%; /* keeps input inside cell */
}

    .column-filter > button > span.filtered-indicator {
        right: 14.5px;
    }

.column-filter > input {
    width: 100%;
    font-size: 11px;
}

    /* For focus inputs in column filtering */
    .column-filter > input:focus {
        border: 1px solid rgb(210, 214, 222) !important;
        outline: none;
        box-shadow: 0 0 5px #5897fb;
    }

    .column-filter textarea {
        width: 100%;
        font-size: 11px;
        padding: 2px 12px 2px 2px;
        border: 1px solid #777;
        border-radius: 2px;
        box-sizing: border-box;
        resize: none;
        overflow: hidden;
        min-height: 20px;
        line-height: 14px;
    }

        /* For focus inputs in column filtering */
        .column-filter textarea:focus {
            border: 1px solid rgb(210, 214, 222) !important;
            outline: none;
            box-shadow: 0 0 5px #5897fb;
        }

.column-filter.input-container {
    display: inline-flex;
    align-items: center;
}

/* overwrite datatable css so that arrow is at align right */
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after {
    right: 0;
}

.dropdown-container.column-filter > button {
    padding: 2.25px 2.75px;
    color: black;
    background-color: white;
    border: 1px solid #777777;
    width: 100%;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

    .dropdown-container.column-filter > button > span.dropdown-arrow {
        margin-left: 12px;
        border-top: 5px solid black;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        display: inline-block;
    }

.dropdown-menu.filter-dropdown {
    border: 1px solid #ccc;
    padding: 10px;
    position: absolute;
}

@media(max-width:576px) {
    .dropdown-menu.filter-dropdown {
        max-width: 215px;
    }
}

.dropdown-menu.filter-dropdown > .checkbox-container {
    flex-direction: column;
    display: flex;
    gap: 2px;
    max-height: 145px;
    overflow-y: auto;
}

.dropdown-menu.filter-dropdown > .filter-content-container > .content-item-wrapper >
.set-date-container {
    position: relative;
    margin-bottom: 5px;
}

.dropdown-menu.filter-dropdown > .filter-content-container > .content-item-wrapper >
.set-date-container > .set-date-menu {
    padding: 0.5rem;
}

.dropdown-menu.filter-dropdown > .filter-content-container > .content-item-wrapper >
.input-range {
    display: flex;
    align-items: center;
}

@media(max-width:576px) {
    .dropdown-menu.filter-dropdown > .filter-content-container > .date-item-wrapper >
    .input-range {
        flex-wrap: wrap;
    }
}

.dropdown-menu.filter-dropdown > .button-container {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.dropdown-menu.filter-dropdown > .button-container > button {
    width: 60px;
}

.dropdown-menu.dropdown-menu-sm.filter-dropdown {
    max-width: 200px;
}

.dropdown-menu.dropdown-menu-sm.filter-dropdown > .button-container > button {
    width: 100%;
}

.filtered-indicator {
    font-size: 10px;
    position: absolute;
    right: 3px;
}

.dropdown-menu.filter-dropdown > .checkbox-container > .checkbox-item-wrapper {
    display: inline-flex;
    gap: 8px;
}

.dropdown-menu.filter-dropdown > .checkbox-container > .checkbox-item-wrapper > label {
    margin: 0;
}

.checkbox-top {
    display: inline-flex;
    align-items: flex-start;
}

.checkbox-input-top {
    margin-right: 5px;
    margin-top: 3px;
}
/* Style for table in DIV */
div.form-table {
    border: 1px solid #d2d6de;
    border-top: none;
    display: table;
    width: 100%;
}

/* DataTables text-align */
.dataTable > tbody {
    vertical-align: top !important;
}

div.form-tb-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
}

div.form-tr {
    /*border: 1px solid rgb(0, 0, 0);*/
    display: table-row;
    width: 100%;
}

div.form-tb-col-1 {
    display: table-cell;
    width: 35%;
    background-color: #3c8dbc;
    color: white;
    vertical-align: top;
}

input.form-tb-col-2, div.form-tb-col-2 {
    display: table-cell;
    height: auto !important;
}

.form-table .form-control {
    border-bottom: none;
    border-right: none;
    border-left: none;
}

.input-group-append:not(.pagination) {
    margin-left: 0 !important;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    border-left: 0;
}

.input-group-append.form-tb-col-2 {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    border-bottom: 0;
    border-right: 0;
}

.form-control:focus {
    position: relative;
    border-top: 1px solid rgb(210, 214, 222) !important;
    outline: none;
    box-shadow: 0 0 5px #5897fb;
    z-index: 10;
}

.form-tr:has(.form-control:disabled),
.form-tr:has(.form-control[readonly]) {
    background-color: #e9ecef;
}


/* Disable cursor */
.form-control:disabled, .form-control[readonly] {
    cursor: not-allowed;
}

/* add border at eye icon that missing border */
#showText1 {
    border-left: 0.5px solid #d2d6de;
}

#showText2 {
    border-left: 0.5px solid #d2d6de;
}

/* styles for validation helpers */
.validation-summary-valid {
    display:none;
}


/*.validation-summary-errors {
    border: 1px solid #F69D9D;
    background-color: #FEEFEF;
    background: transparent url(Images/WarningHeader.gif) no-repeat 12px 30px;
    padding: 10px 0px 0px 0px;
}*/

/*.validation-summary-errors ul {
    padding-top: 5px;
    padding-left: 5px;
    list-style: none;
}

.validation-summary-errors ul li {
    padding: 2px 0px 0px 15px;
    background-image: url(Images/Warning.gif);
}*/


.field-validation-error {
    border: 1px solid #F69D9D;
    background-color: #FEEFEF;
    display: flex;
    text-align: justify;
    font-size:0.8rem;
}

.input-validation-error{
    border: 1px solid #F69D9D !important;
}

.input-group-append {
    margin-left: 0 !important;
}

.field-validation-error:before {
    content: "\e403";
    font: 0.8rem/1 WebComponentsIcons;
    display: inline-block;
    color: #dc3545;
    padding: 2.5px 5px 0 5px;
}

.field-validation-error > * {
    display: inline-block;
    margin-right:5px;
}

/* Style for Scroll to top button */
.scroll-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: none;
    font-size: 20px;
    width: 45px;
    height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(90,92,105,.5);
    line-height: 46px
}

.scroll-to-top:focus, .scroll-to-top:hover {
    color: #fff;
}

.scroll-to-top:hover {
    background: #5a5c69;
}

.scroll-to-top i {
    font-weight: 800;
}

.rounded {
    border-radius: .35rem !important;
}

/* Style for export */
#divExport {
    float: right;
    padding-right: 10px;
    padding-top: 10px;
}

/* ====================================== */
/* Create Button CSS */
/* ====================================== */

#divCreate, .divCreate {
    float: left;
    padding-top: 8px;
    padding-bottom: 8px;
}

.btn-create-new {
    box-sizing: border-box;
    background-color: #10a444;
    color: white;
    border: 1px solid #10a444;
    font-size: 12px;
    padding: .5em 1em;
    height: 33.2px;
    display: inline-block;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
}

    /* Brighter on hover and keyboard focus */
    .btn-create-new:hover, .btn-create-new:focus-visible, .btn-create-new:active {
        background-color: #16c35a;
        border-color: #16c35a;
        color: white;
    }

    /* Remain font color on close modal it auto focus back to button */
    .btn-create-new:focus {
        outline: none;
        text-decoration: none;
        color: white;
    }

.btn-add {
    box-sizing: border-box;
    background-color: #10a444;
    color: white;
    border: 1px solid #10a444;
    font-size: 12px;
    padding: .5em 1em;
    display: inline-block;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
}

    /* Brighter on hover */
    .btn-add:hover {
        background-color: #16c35a !important;
        border-color: #16c35a !important;
        color: white !important;
    }

.dt-buttons-wrapper {
    display: inline-block;
}

.tableFixHead {
    overflow-y: auto;
    height: 200px;
    padding: 0rem;
}
.tableFixHead thead tr th {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: rgb(223, 240, 245) !important;
}

/* Style for dataTables' action column */
.clsDanger {
    color: #EB6C61;
    width: 1.75em;
}

.clsEdit {
    color: #20c9a6;
    width: 1.75em;
}

.clsInfo {
    color: #36b9cc;
    width: 1.75em;
}


div.row-margin {
    margin-top: 4rem;
}

.clsHref {
    color: #4e73df;
    cursor: pointer;
    background-color: transparent;
}

.keyGeneratorHref {
    text-decoration: underline;
    color: gold;
    float: right;
    cursor: pointer;
}

/* Style for displaying image. Keep aspect ratio */
.imgContainer {
    height: 150px;
}

.imgDisplay {
    display: block;
    height: 100%;
    max-width: 100%;
    border: 1px solid darkgray;
}

/*Dropdownlist button at Transaction Report*/
.ddloverflow-sm {
    height: auto;
    max-height:200px;
    overflow-y: scroll;
}

.ddloverflow-lg {
    height: 30rem;
    overflow-y: scroll;
}

/*Dropdown Advance Search Button*/
@media(max-width:576px) {
    #ddlAdvSearch {
        height: 18rem;
        overflow: auto;
    }
}
@media(max-width:767px) {
    .Datatables-search-input {
        width:100%;
    }
}
@media(min-width:576px) and (max-width:768px) {
    #ddlAdvSearch {
        height: 18rem;
    }
}

@media(min-width:768px) and (max-width:992px) {
    #ddlAdvSearch {
        width: 26rem;
    }
}

@media(min-width:768px) and (max-width:1100px) {
    #divInboxCategory, #divinboxCategory {
        flex: 0 0 90% !important;
        max-width: 90% !important;
        margin: auto;
    }
}

@media(min-width:992px) {
    #ddlAdvSearch {
        /*Remove Height in the serch window, add padding top and padding bottom*/
        /*height: 15rem;*/
        padding-top: 15px;
        padding-bottom: 15px;
        width: 26rem;
    }
}


/*Wrap pagination control when the screen size width is lesser then 825 pixels*/
@media(max-width:825px) {
    ul.pagination {
        flex-wrap: wrap;
    }
}

.break-word {
    word-break: break-word;
    min-width: 100px;
}

/*Reset width of Txn Date column defined in datatable class name when view table in laptop*/
@media only screen and (max-width: 1366px) {
    table td.date-width {
        white-space:nowrap;
    }
}

/*PDF,Excel,CSV, command Column Visibility button in Datatables*/
div.dt-buttonsinside {
    position: relative;
    float: left;
    padding-top: 8px
}

/*Dropdown Advance Search Button*/
.dropdown-menu1 {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    /*transform: translate3d(5px, 35px, 0px) !important;*/
}

.dropdown-menu-right1 {
    right: 0;
    left: auto;
}

/* Button Background Color */
.colbgcolor-green {
    color: #fff;
    background-color: #66ac7c;
    border-color: #66ac7c;
}

.colbgcolor-red {
    background-color: #dd4b39;
    border-color: #d73925;
    color: #fff;
}

.colbgcolor-darkgrey {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.colbgcolor-lightgrey {
    color: #fff;
    background-color: #A9A9A9;
    border-color: #A9A9A9;
}

.colbgcolor-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.colbgcolor-orange {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.colbgcolor-yellow {
    color: #212529;
    background-color: #FFFF00;
    border-color: #ffc107;
}
.colbgcolor-blue {
    color: white;
    background-color: #5DADE2;
    border-color: #5DADE2;
}

.colbgcolor-tiffany {
    color: #212529;
    background-color: #A3E4D7;
    border-color: #A3E4D7;
}

.colbgcolor-brown {
    color: #212529;
    background-color: #F0B27A;
    border-color: #F0B27A;
}

.colbgcolor-pink {
    color: #212529;
    background-color: #E6B0AA;
    border-color: #E6B0AA;
}

.colbgcolor-purple {
    color: #fff;
    background-color: #A800A8;
    border-color: #ffc107;
}

.colbgcolor-green, .colbgcolor-red, .colbgcolor-darkgrey,
.colbgcolor-lightgrey, .colbgcolor-dark, .colbgcolor-orange,
.colbgcolor-yellow, .colbgcolor-purple, .colbgcolor-pink, .colbgcolor-brown, .colbgcolor-tiffany, .colbgcolor-blue {
    width: 100%;
    display: inline-block;
    padding: 1px 5px;
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
    border-radius: 2px;
}

.colbgcolor-action-blue {
    color: #fff;
    background-color: #4491bd;
    border-color: #4491bd;
    cursor: pointer !important;
    display: inline-block;
    padding: 1px 10px;
    -webkit-user-select: text;
    user-select: text;
}

    .colbgcolor-action-blue:hover {
        color: #fff;
        background-color: #4491bd;
        border-color: #4491bd;
    }

    .colbgcolor-action-blue:focus {
        color: #fff;
        background-color: #4491bd;
        border-color: #4491bd;
        box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
    }

.colbgcolor-action-green {
    color: #fff;
    background-color: #66ac7c;
    border-color: #66ac7c;
    cursor: pointer !important;
    display: inline-block;
    padding: 1px 10px;
    -webkit-user-select: text;
    user-select: text;
}

    .colbgcolor-action-green:hover {
        color: #fff;
        background-color: #66ac7c;
        border-color: #66ac7c;
    }

    .colbgcolor-action-green:focus {
        color: #fff;
        background-color: #66ac7c;
        border-color: #66ac7c;
        box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
    }

.colbgcolor-action-red {
    color: #fff;
    background-color: #dd4b39;
    border-color: #d73925;
    cursor: pointer !important;
    display: inline-block;
    padding: 1px 10px;
    -webkit-user-select: text;
    user-select: text;
}

    .colbgcolor-action-red:hover {
        color: #fff;
        background-color: #dd4b39;
        border-color: #d73925;
    }

    .colbgcolor-action-red:focus {
        color: #fff;
        background-color: #c82333;
        border-color: #bd2130;
        box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
    }

.colbgcolor-action-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
    cursor: pointer !important;
    display: inline-block;
    padding: 1px 10px;
    -webkit-user-select: text;
    user-select: text;
}

    .colbgcolor-action-dark:hover {
        color: #fff;
        background-color: #23272b;
        border-color: #1d2124;
    }

    .colbgcolor-action-dark:focus {
        color: #fff;
        background-color: #23272b;
        border-color: #1d2124;
        box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
    }

.colbgcolor-action-lightblue {
    color: #fff;
    background-color: #00c0ef;
    border-color: #00c0ef;
    cursor: pointer !important;
    display: inline-block;
    padding: 1px 10px;
    -webkit-user-select: text;
    user-select: text;
}

    .colbgcolor-action-lightblue:hover {
        color: #fff;
        background-color: #00c0ef;
        border-color: #00c0ef;
    }

.colbgcolor-action-lightblue:focus {
    color: #fff;
    background-color: #00c0ef;
    border-color: #00c0ef;
    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}


.colbgcolor-action-yellow {
    color: #fff;
    background-color: #ffc107;
    border-color: #ffc107;
    cursor: pointer !important;
    display: inline-block;
    padding: 1px 10px;
    -webkit-user-select: text;
    user-select: text;
}

    .colbgcolor-action-yellow:hover {
        color: #fff;
        background-color: #ffc107;
        border-color: #ffc107;
    }

    .colbgcolor-action-yellow:focus {
        color: #fff;
        background-color: #ffc107;
        border-color: #ffc107;
        box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
    }

.disabled {
    pointer-events: none;
    opacity: 0.65;
}

.btn-primary.disabled, .btn-success.disabled, .btn-warning.disabled, .colbgcolor-action-red.disabled,
.colbgcolor-action-green.disabled, .colbgcolor-action-lightblue.disabled, .colbgcolor-action-blue.disabled, .colbgcolor-action-yellow.disabled {
    background-color: #929ba2;
    border-color: #929ba2;
}

/* Date Period Radio Button CSS */
.chkDate, .chkDate2, .chkDate3, .chkDate4 {
    margin-bottom: 2px;
    vertical-align: middle;
}

#divDate td, #divDate2 td, #divDate3 td, #divDate4 td {
    padding-left: 6px;
}

/*change header title style*/
.box-header .box-title {
    font-family: 'Tinos'; /* Remove Paid Version Font - 19 August 2025*/
    font-weight: bold;
    background-color: #E8E8E8;
    border-radius: 25px;
    padding: 8px;
    border: 2px solid #3c8dbc;
}
/*google translate element*/
.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon {
    display: none !important;
}
/*google translate element*/
.goog-tooltip {
    display: none !important;
}

.tooltip-inner {
    text-align: left;
    font-size: 11px;
}

@media(min-width:500px) {
    .tooltip-inner {
        max-width: 500px;
    }
}

/*google translate element*/
body {
    top: 0px !important;
}

/*Translate language link*/
#malay {
    height: 28px;
}
#en {
    height: 28px;
}
#lang-multi > li {
    color: white;
    padding-top: 12px;
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}
#lang-multi-ms {
    margin-left: -2%;
}
#lang-multi-en {
    margin-right: -5%;
}
#goog-gt-tt {
    display: none !important;
   
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* customizing the ddl advance search box and the solid line */
#ddlAdvSearch {
    border: 1px solid #c7bcbc;
}

/* customizing the ddl advance search box Merchant */
#MerchantNo {
    border-color: #c7bcbc !important;
}

#MerchantName {
    border-color: #c7bcbc !important;
}

#Filename {
    border-color: #c7bcbc !important;
}

#StartDate {
    border-color: #c7bcbc !important;
}

#EndDate {
    border-color: #c7bcbc !important;
}

#orderNo {
    border-color: #c7bcbc !important;
}

#OrderNo {
    border-color: #c7bcbc !important;
}

#min_price {
    border-color: #c7bcbc !important;
}

#max_price {
    border-color: #c7bcbc !important;
}

#desc {
    border-color: #c7bcbc !important;
}

#myInput {
    margin-left: 6px;
}

#Title {
    border-color: #c7bcbc !important;
}

#Description {
    border-color: #c7bcbc !important;
}

#SearchKeyword {
    border-color: #c7bcbc !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
    color: #fff !important;
    background: inherit !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-body {
    background-color: #e6e6e6 !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer a {
    color: #fff !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background-color: #e6e6e6 !important;
    padding: 15px;
}

table.dataTable thead tr {
    color: #fff;
    background-color: #3c8dbc;
}

.dataTable > thead > tr > th > a > span.fas.fa-plus-circle {
    color: white;
}

.dataTable > thead > tr > th > a > span.fas.fa-minus-circle {
    color: rgb(237, 237, 237);
}

/* Reset button context menu for action cofirmation */
.ResetBtnConfirm {
    display: inline-block;
}

#confirmBtn, #noBtn {
    font-size: 11px;
}

.ResetBtnContent {
    list-style: none;
    margin-right: 0;
    padding-left: 0px;
    padding-right: 0px;
}

.ResetBtnContent .share .share-menu {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    bottom: 30px;
    /*transition: all 0.2s ease-in-out;*/
    bottom: 27px;
    left: 110px;
}

.ResetBtnContent .share-menu li {
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: center;
}

.ResetBtnContent .share:hover .share-menu {
    opacity: 1;
    pointer-events: auto;
    transition: 0.5s;
    transition-delay: 0.7s;
}

@media only screen and (max-height: 600px) {
    #ddlAdvSearch {
        max-height: 300px;
        overflow-y: auto;
    }
}

@media only screen and (max-width: 736px) {
    div.dt-button-collection.fixed.two-column {
        left: 358.359px !important;
    }
}

@media only screen and (max-width: 712px) {
    div.dt-button-collection.fixed.two-column {
        left: 383.359px !important;
    }
}

@media (max-width:576px) {
    #ddlAdvSearch, #ddlAdvSearch1, #ddlAdvSearch2 {
        width: 240px !important;
        max-height: 300px;
        overflow: auto;
    }
}

.row-nowrap {
    display: flex;
    flex-wrap: nowrap;
}

/*Scrollbar properties*/
::-webkit-scrollbar {
    -webkit-appearance: none;
    -webkit-overflow-scrolling: auto;
}

    ::-webkit-scrollbar:vertical {
        width: 14px;
    }

    ::-webkit-scrollbar:horizontal {
        height: 14px;
    }

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .36);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

/**Top scrollbar*/
.custom-scrollbar {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: 23px;
    display: none;
}

/**Custom pagination*/
#paginationContainer label {
    margin-right: 10px;
    margin-top: 12px;
}

.row .col-sm-12.col-md-6.col-xs-12:first-of-type,
.row .col-sm-12.col-md-8.col-xs-12:first-of-type,
.row .col-sm-12.col-md-4.col-xs-12:first-of-type {
    justify-content: flex-start;
}

.row .col-sm-12.col-md-6.col-xs-12:nth-of-type(2),
.row .col-sm-12.col-md-8.col-xs-12:nth-of-type(2),
.row .col-sm-12.col-md-4.col-xs-12:nth-of-type(2) {
    justify-content: flex-end;
}

.col-sm-12.col-md-6.col-xs-12, .col-sm-12.col-md-8.col-xs-12, .col-sm-12.col-md-4.col-xs-12 {
    display: flex;
    flex-wrap: wrap;
    flex: 50;
    max-width: 100%;
}

.input-group-append.pagination {
    z-index: 10;
    position: absolute;
    top: 11px;
    right: 8px;
}

.btn_search_pagination {
    width: 20px;
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    div.dt-button-collection.fixed.two-column {
        left: 72% !important;
        width: 260px !important;
    }
}

@media only screen and (max-width: 320px) {
    .Datatables-details-input {
        font-size: 12px !important;
    }
    .Datatables-details-input span {
        font-size: 12px !important;
    }
}

/**Reduce the padding gap between the DataTables listing and search input, button export file and column visibility**/
.Datatables-details-input {
    padding-top: 0px !important;
}

/*modal layout design*/
.modal-header-primary {
    color: #fff;
    padding: 11.5px 20px 11.5px 20px;
    border-bottom: 0px solid #eee;
    background-color: #f39c12;
    display: flex; /* Use flexbox */
    justify-content: space-between; /* Space out title and close button */
    align-items: center;
}

    /* Style for close button */
    .modal-header-primary .close {
        color: white !important; /* Make the close button white */
        opacity: 1 !important; /* Ensure it's fully visible */
        transition: opacity 0.3s ease-in-out; /* Smooth transition effect */
        padding: 11px 16.5px !important;
    }

        /* Style for hover state of close button */
        .modal-header-primary .close:hover {
            opacity: 0.6 !important; /* Make the close button dimmer on hover */
            color: white !important; /* Ensure the color stays white when hovered */
        }

        .modal-header-primary .close:focus {
            outline: none !important;
            box-shadow: none !important;
        }

    .modal-header-primary > .modal-title {
        font-size: 18px;
    }

/* Datatables header font weight changed to normal */
table.dataTable > thead > tr > th {
    font-weight: normal;
}

table > thead > tr > th {
    font-weight: normal !important;
}

/* Change datatable border color*/
table.dataTable tr td, table.dataTable tr th {
    border: 1px solid #cccaca;
    position: relative;
}

table.dataTable tr th {
    border-bottom: none;
}

.table-bordered {
    border-top: none;
}

/* ====================================== */
/* DataTables Columns Resize customization */
/* ====================================== */
table.JColResizer > tbody > tr > td {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.table-responsive {
    overflow-y: hidden !important;
    width: 100%;
}

/* Change kendo grid border */
.k-grid table tr td {
    border: 1px solid #cccaca !important;
}

/* kendo grid input field focus color */
.k-grid input:focus {
    position: relative;
    border: none !important;
    outline: 0.5px solid #dcdee2;
    box-shadow: 0 0 5px #5897fb;
    z-index: 10;
}

/* kendo grid input field focus color */
.k-grid-edit-row td input:focus {
    position: relative;
    border: none !important;
    outline: 0.5px solid #dcdee2;
    box-shadow: 0 0 5px #5897fb;
    z-index: 10;
}

.k-grid-edit-row td input {
    padding-left: 0.5rem;
    border: 0.5px solid #cccaca;
}

.k-grid-content {
    height: inherit !important;
    max-height: 150px !important;
    min-height: 14px;
    overflow-y: auto;
}

.k-grid-content-expander {
    position: inherit;
}
/* Allow all k-grid-header to have no additional padding right */
.k-grid-header, .k-grid-footer {
    padding-right: 0 !important;
    border-bottom-width: 0 !important;
}
/* Allow all k-grid-header-wrapper to have no additional padding right */
.k-grid-header-wrap {
    padding-right: 0 !important;
    border-width: 0 0 0 0 !important;
}
/* Allow word break for table instead of ellipsis */
.k-grid td,
.k-grid .k-cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
}


/* Only applies to validation errors within Kendo Grids */
.k-grid .field-validation-error {
    text-align: left;
}

    .k-grid .field-validation-error > * {
        display: inline;
    }

    .k-grid .field-validation-error:before {
        padding: 2.5px 2px 0 0;
    }

.status-hover {
    cursor: help; /* Change the cursor to a help cursor */
}

button.dt-button, div.dt-button, a.dt-button {
    font-size: 12px !important;
}

.btn.btn-primary.dropdown-toggle {
    font-size: 12px !important;
}

/* Textarea */
textarea {
    min-height: 35px;
    resize: none;
    word-break: break-all;
    overflow: hidden;
}

#StartDate, #EndDate, #PaymentStartDate, #PaymentEndDate {
    border-left: none !important;
}

.k-input {
    border-left: none !important;
}

/* Global styles for all .k-button elements */
/* Minimize padding and height for k button in tbody*/
.k-grid tbody .k-button {
    height: unset;
    padding: 2px 10px;
}

.k-button {
    box-sizing: border-box;
    font-size: 12px;
    padding: 0.5em 1em;
    height: 28px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
}

    .k-button[aria-disabled="true"],
    .k-state-disabled {
        background-color: #ccc !important;
        border-color: #ccc !important;
        color: #666 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
        pointer-events: none !important;
    }
/* Match font size for kendo icon to fontawesome icons */
.k-icon:not(.fas):not(.fa) {
    font: 12px / 1 WebComponentsIcons;
}

/* Specific styles for .k-grid-add */
.k-grid .k-grid-add {
    background-color: #10a444;
    border-color: #10a444;
    color: white;
}

    .k-grid .k-grid-add:hover {
        background-color: #16c35a;
        border-color: #16c35a;
        color: white;
    }

/* Blue "Upload" button */
.k-grid-upload {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

    .k-grid-upload:hover {
        background-color: #339dff;
        border-color: #339dff;
        color: white;
    }
/* Purple "Download" button */
.k-grid-download {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: white !important;
}

    .k-grid-download:hover {
        background-color: #8a5be2 !important;
        border-color: #8a5be2 !important;
        color: white !important;
    }

/* Global container styling for all radio button groups (btn-group-) */
div[class*="btn-group-"] {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
    width: fit-content;
    display: flex;
    overflow: hidden;
    border: 1px solid #d2d6de;
    border-radius: 3px;
    height: 25px;
    justify-content: center;
    align-items: center;
}

    /* Radio buttons inside btn-group */
    div[class*="btn-group-"] input[type="radio"] {
        align-items: center;
        width: fit-content;
        height: 100%;
        box-sizing: border-box;
        text-align: center;
    }

        /* Checked state for radio buttons + adjacent labels inside btn-group */
        div[class*="btn-group-"] input[type="radio"]:checked + label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            height: 100%;
            box-sizing: border-box;
            text-align: center;
        }

/* Customize radio button to bootstrap switch/toggle design (For Yes / No , Active / Inactive, Enable / Disable) */
.toggle-portal, .toggle-stat-actv, .toggle-stat-inactv.toggle-status-actv1, .toggle-status-inactv1, .toggle-resp-yes, .toggle-resp-no,
.toggle-respOPA-yes, .toggle-respOPA-no, .toggle-sub, .toggle-unsub, .toggle-subEmoto-actv, .toggle-subEmoto-inactv, #radStatusActive, #radStatusInactive,
#radEnable_Y, #radEnable_N {
    display: none;
}

.btn-group-status, .btn-group-resp, .btn-group-respOPA, .btn-group-subscribe, .btn-group-subscribeEmoto, .btn-group-announceStat, .btn-group-websiteStat {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
    width: 145px;
    display: flex;
    overflow: hidden;
    border: 1px solid #d2d6de;
    border-radius: 3px;
}

#actv, #actv1, #y-resp, #y-respOPA, #sub, #sub_Emoto, #is_Active_Y, #actv_Stat {
    text-align: center !important;
    padding-left: 15px !important;
    padding-right: 16px !important;
    margin-bottom: 0;
}

#inactv, #inactv1, #n-resp, #n-respOPA, #unsub, #unsub_Emoto, #is_Active_N, #inActv_Stat {
    text-align: center !important;
    padding-left: 15px !important;
    padding-right: 18px !important;
    margin-bottom: 0;
}

/* Filepond CSS to ensure the error message wraps when the message is too long. */
.filepond--file-status > .filepond--file-status-main {
    word-wrap: break-word !important;
    white-space: normal !important;
    text-align: left !important;
}

.filepond--file-status > .filepond--file-status-sub {
    position: fixed !important;
    margin-top: 13.5px !important;
}

/* Input fields css */
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

a:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

/* ====================================== */
/* HTML Tags CSS */
/* ====================================== */
/* Heading Tags */
h1, .h1 {
    font-size: 2.25rem;
}

h2, .h2 {
    font-size: 1.875rem;
}

h3, .h3 {
    font-size: 1.5rem;
}

h4, .h4 {
    font-size: 1.125rem;
}

h5, .h5 {
    font-size: 0.875rem;
}

h6, .h6 {
    font-size: 0.75rem;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

small {
    font-size: 100%;
}

/* Body Tag */
body {
    font-size: 0.75rem;
    line-height: 1.42857143;
}

/* ====================================== */
/* Overwrite Bootstrap CSS */
/* ====================================== */
.btn {
    font-size: 0.75rem;
}

b,
strong {
    font-weight: bold;
}

.btn-sm, .btn-group-sm > .btn {
    padding: 5px 10px;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Custom Style for Toggle Set Date*/
.btn.btn-primary.btn-sm.toggle-set-date {
    background-color: #10a444;
    border-color: #10a444;
    color: white;
    padding: 0 4px;
}

    /* Toggle Set Date Hover effect */
    .btn.btn-primary.btn-sm.toggle-set-date:hover {
        background-color: #16c35a;
        border-color: #16c35a;
        color: white;
    }

.form-control-sm {
    height: 34px;
}

.form-control {
    font-size: 0.75rem;
}

.form-control-feedback {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #aaa;
}

.has-feedback {
    position: relative;
}

.has-feedback .form-control {
    padding-right: 42.5px;
}

.login-box-body .form-control:focus {
    border: 1px solid rgb(210, 214, 222) !important;
}

.dropdown-menu {
    font-size: 0.75rem;
}

.btn.disabled, .btn:disabled {
    pointer-events: none;
    color: #fff;
    background-color: #929ba2;
    border-color: #929ba2;
}

.page-item.active .page-link {
    background-color: #337ab7;
    border-color: #337ab7;
}

/* ====================================== */
/* Bootstrap Popup modal CSS */
/* ====================================== */
/* Custom settings */
@media (min-width: 1500px) {
    .modal-xl {
        max-width: 1425px;
    }
}

@media (min-width: 1920px) {
    .modal-xl {
        max-width: 1720px;
    }
}

.modal-icon {
    background-size: 30px auto;
    padding-right: 10px;
}

/* Header section */
.modal-header.info {
    background-color: #BDE5F8
}

.modal-header.errorMsg {
    background-color: #FFBABA
}

.modal-header.successMsg {
    background-color: #DFF2BF
}

.modal-header.warningMsg {
    background-color: #FEEFB3
}

/* -----------------------------------------------------------*/
/* Modal Popup at right sidebar */
/* -----------------------------------------------------------*/
.modal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: unset;
    width: 100%;
    background-color: transparent;
    padding-right: 0 !important;
    background: rgba(0, 0, 0, 0.3);
}

    .modal.fade .modal-dialog {
        transform: translateX(100%); /* Start offscreen to the right */
    }

    .modal.show .modal-dialog {
        transform: translateX(0); /* Slide in from the right */
    }

.modal-dialog {
    position: absolute;
    right: 0;
    min-width: 50%;
    margin: 0 !important;
    height: 100%;
}

.modal-sm {
    min-width: 40% !important;
}

.modal-content {
    height: 100%;
}

.modal-footer {
    margin: 0 5px 0 5px;
}

.modal-xl {
    position: absolute;
    right: 0;
    min-width: 80% !important;
    max-width: 0;
}
/* Confirmation modal */
#ConfirmationModal > .modal-dialog {
    background: rgba(0, 0, 0, 0.3);
    padding: 0px 10% !important;
    transform: initial;
    min-width: 50% !important;
}

    #ConfirmationModal > .modal-dialog > .modal-content {
        height: auto !important;
    }


#msgBoxModal .modal-dialog {
    margin: 1.75rem auto !important;
    left: 0;
    height: auto;
    min-width: 0 !important;
    transform: none;
}

@media (min-width: 1500px) {

    #ConfirmationModal > .modal-dialog {
        padding: 0px 15% !important;
    }
}

@media (max-width: 500px) {

    .modal-dialog {
        min-width: 100% !important;
    }
}

@media only screen and (max-width: 1300px) {
    /* For mobile phones: */
    .Datatables-search-input {
        right: unset; /* Removes the 'right' property */
        float: right;
        padding-top: 10px;
        padding-right: 10px;
        display: flex;
        position: unset; /* Removes the 'position' property */
    }
}

/* -----------------------------------------------------------*/
/* Content Header (Overwrite AdminLTE.css)*/
/* -----------------------------------------------------------*/

.content-header {
    padding: 10px 15px 10px 15px;
}

    .content-header h6 {
        margin-top: 0;
        margin-bottom: 0;
    }

    .content-header > .breadcrumb {
        top: 8px;
    }

    .content-header > h1 {
        font-size: 22px;
    }

.content {
    padding: 0 15px 15px 15px;
}

@media (max-width: 991px) {
    .content-header > .breadcrumb {
        top: 0;
    }
}

/* ---------------------------------------------------------------------*/
/* Notification Status Close Button (Override the style in AdminLTE.css)
/* ---------------------------------------------------------------------*/
.alert {
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
}

body .alert .close {
    color: #fff !important; /* bright white */
    text-shadow: 0 0 4px rgba(255, 255, 255, 0) !important; /* subtle glow effect */
    opacity: 1 !important; /* fully visible */
    padding-bottom: 0px;
    transform: scale(1.0);
    display: inline-block;
}

body .alert .close:hover {
  opacity: 0.6 !important; /* makes it slightly darker */
  color: #fff !important; /* darkens the button slightly */
}

.alert .close:not(:hover) {
  opacity: 1 !important;
  filter: none !important;
}

.alert .close:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ====================================== */
/* Page Title Description  (Refer to Merchant Details Annual Fee for standardized format) */
/* ====================================== */

/* Overall Title Description Style */
.title-description {
    background-color: #fff3cd;
    border: 1px solid #ffe8a1;
    color: #333;
    display: flex;
    align-items: stretch;
    padding: 0;
    border-radius: 3px;
    margin: 4px 0 0 0;
    font-size: 11px;
    line-height: 1.2;
    position: relative;
}

.title-description-content {
    flex: 1;
    padding: 4px 24px 4px 8px;
    position: relative;
}

/* Title Senteces and text styles */
.description-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .description-text.expanded {
        -webkit-line-clamp: unset;
    }

.description-sentence {
    display: block;
    margin-bottom: 4px;
    padding-right: 18px;
}

    .description-sentence:last-child {
        margin-bottom: 0;
    }

.description-sentence-break {
    height: 4px;
    display: block;
}

/* Description Alert Icon */
.description-icon {
    background-color: #ffe8a1;
    padding: 3px 8px;
    display: flex;
    align-items: flex-start;
}

    .description-icon i {
        font-size: 12px;
        color: #856404;
        margin-top: 1px;
    }

/* Collapse button styles */
.description-collapse-btn {
    position: absolute;
    right: 10px;
    top: 12px;
    font-size: 11px;
    width: 14px;
    height: 14px;
    display: flex;
    cursor: pointer;
    color: #856404;
    transition: transform 0.2s ease;
    z-index: 10;
}

    .description-collapse-btn.expanded {
        transform: rotate(180deg);
    }

#titleDescCollapseBtn {
    display: none; /* Hide by default */
}

/* -------------------------------------------------*/
/* Radio Button classes that used to toggle color 
/* -------------------------------------------------*/

/* Status Toggle */
.toggle-stat-actv,
.toggle-stat-inactv,
.toggle-stat-portal {
    display: none;
}
/* Green */
.toggle-stat-actv:checked + label {
    background-color: #66ac7c !important;
    border-color: #66ac7c !important;
}
/* Red */
.toggle-stat-inactv:checked + label {
    background-color: #d73925 !important;
    border-color: #d73925 !important;
}
/* Blue */
.toggle-stat-portal:checked + label {
    background-color: #337ab7 !important;
    border-color: #337ab7 !important;
}

.toggle-stat-actv:checked + label,
.toggle-stat-inactv:checked + label,
.toggle-stat-portal:checked + label {
    color: #fff !important;
}
/* Status Button Group */
.btn-group-status {
    display: inline-flex; /* inline to let content dictate size */
    overflow: hidden;
    border: 1px solid #d2d6de;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 3px 8px rgba(0,0,0,0.19);
    flex-wrap: nowrap;
}
/* Add a right border between all children inside .btn-group-status */
.btn-group-status > * {
    border-right: 1px solid #d2d6de;
}
/* Remove the right border from the last child */
.btn-group-status > *:last-child {
    border-right: none;
}
/* Form Check */
.form-check-input {
    position: absolute;
    margin-top: 3px;
    margin-left: -1.25rem;
    border: 1px solid rgb(33, 37, 41);
}

.btn-group-status .form-check-label {
    padding: 6px 16px;
    text-align: center;
    margin: 0;
    font-weight: 500;
    user-select: none;
    white-space: nowrap; /* Prevents text from wrapping */
    display: flex; /* Align content inside */
    align-items: center;
    justify-content: center; /* Horizontal centering */
}
/* -------------------------------------------------*/
/*              Tooltip Css
/* -------------------------------------------------*/
/* Token theme. Add attributes to any element you want to attach a tooltip as below: 
     - data-tooltip-theme= "default" | "customize"  

     Note: If you did not include this attribute into the element where tooltip is set,
           then it will automatically use default theme (*-default). 

    You may change the Hex Colors for overall or add new hex colors buttons in CSS under the theme and adjust accordingly in CSS,
    but if add or changed class Name (Ex: *-customize). Please refer to Control/JavaScriptTooltipControl.js to make changes.) 
*/

/* default */
.custom-tooltip.theme-default {
    --tt-main: #f39c12; /* orange */
}

/*Customized theme. Example usage: data-tooltip-theme="customize"*/
.custom-tooltip.theme-customize {
    --tt-main: #3c8dbc; /* blue */
}

.custom-tooltip {
    --tt-main: #f39c12; /* fallback -> orange */
    z-index: 9999;
    background: #fff;
    color: #333;
    border-radius: 8px;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    border: 1.5px solid var(--tt-main);
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease;
    padding: 1px;
    opacity: 0;
    transform: translateZ(0);
}

    .custom-tooltip.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .custom-tooltip.mode-simple {
        background: var(--tt-main);
    }


.custom-tooltip-header {
    padding: 6px 8px;
    font-size: 12px;
    color: #fff;
    background: var(--tt-main);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin: -2px -2px 2px -2px;
}

.custom-tooltip-content {
    padding: 4px 8px 4px 8px;
    color: #555;
    font-size: 12px;
    line-height: 1.4;
}

.custom-tooltip.mode-simple .custom-tooltip-content {
    color: #fff;
    font-size: 12px;
}

.custom-tooltip.mode-simple code {
    color: #fff;
    font-size: 12px;
}

/* Footer buttons (single page or pagination) */
.custom-tooltip-footer {
    font-size: 12px;
    gap: 6px;
    padding: 5px 8px 3px 10px;
}

    .custom-tooltip-footer button {
        font-size: 12px;
        padding: 4px 10px;
        border: none;
        border-radius: 4px;
        background: var(--tt-main);
        color: #fff;
        cursor: pointer;
        margin: -3px 3px 3px;
    }

        .custom-tooltip-footer button:hover {
            opacity: .9;
        }

        .custom-tooltip-footer button.force-outline {
            outline: 5px auto -webkit-focus-ring-color !important; /*Fix Unable to focus on Modal*/
        }

/* Pagination "Back/Next" keep neutral colour */
.custom-tooltip-pagination button {
    font-size: 12px;
    background: #dfe6e9;
    color: #000;
}

.custom-tooltip-btn.got-it-btn {
    background: var(--tt-main) !important;
    color: white !important;
}

.custom-tooltip-page-indicator {
    font-size: 12px;
    color: #666;
    margin-right: auto;
}

/* ------------- Tooltip Arrows ------------- */
.custom-tooltip-arrow {
    width: 0;
    height: 0;
    position: absolute;
    margin: 0;
    visibility: hidden;
}

.custom-tooltip.show .custom-tooltip-arrow {
    visibility: visible;
}

.custom-tooltip-arrow.bottom {
    top: -10px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid var(--tt-main);
}

.custom-tooltip-arrow.top {
    bottom: -10px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--tt-main);
}

.custom-tooltip-arrow.left {
    right: -10px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid var(--tt-main);
}

.custom-tooltip-arrow.right {
    left: -10px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid var(--tt-main);
}

/* === Tooltip TOP animations === */
@keyframes tooltip-fade-top-in {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 -15px 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 -15px 0);
    }
}

@keyframes tooltip-fade-top-out {
    0% {
        opacity: 1;
        clip-path: inset(0 0 -15px 0);
    }

    100% {
        opacity: 0;
        clip-path: inset(100% 0 -15px 0);
    }
}

/* === Tooltip BOTTOM animations === */
@keyframes tooltip-fade-bottom-in {
    0% {
        opacity: 0;
        clip-path: inset(-15px 0 100% 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(-15px 0 0 0);
    }
}

@keyframes tooltip-fade-bottom-out {
    0% {
        opacity: 1;
        clip-path: inset(-15px 0 0 0);
    }

    100% {
        opacity: 0;
        clip-path: inset(-15px 0 100% 0);
    }
}

/* === Tooltip RIGHT animations === */
@keyframes tooltip-fade-left-in {
    0% {
        opacity: 0;
        clip-path: inset(0 -15px 0 100%);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 -15px 0 0);
    }
}

@keyframes tooltip-fade-left-out {
    0% {
        opacity: 1;
        clip-path: inset(0 -15px 0 0);
    }

    100% {
        opacity: 0;
        clip-path: inset(0 -15px 0 100%);
    }
}

/* === Tooltip LEFT animations === */
@keyframes tooltip-fade-right-in {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 -15px);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 -15px);
    }
}

@keyframes tooltip-fade-right-out {
    0% {
        opacity: 1;
        clip-path: inset(0 0 0 -15px);
    }

    100% {
        opacity: 0;
        clip-path: inset(0 100% 0 -15px);
    }
}

/* === Tooltip Animation classes === */
.tooltip-animate-in-top {
    animation: tooltip-fade-top-in .15s ease-out forwards;
}

.tooltip-animate-out-top {
    animation: tooltip-fade-top-out .15s ease-in forwards;
}

.tooltip-animate-in-bottom {
    animation: tooltip-fade-bottom-in .15s ease-out forwards;
}

.tooltip-animate-out-bottom {
    animation: tooltip-fade-bottom-out .15s ease-in forwards;
}

.tooltip-animate-in-left {
    animation: tooltip-fade-left-in .15s ease-out forwards;
}

.tooltip-animate-out-left {
    animation: tooltip-fade-left-out .15s ease-in forwards;
}

.tooltip-animate-in-right {
    animation: tooltip-fade-right-in .15s ease-out forwards;
}

.tooltip-animate-out-right {
    animation: tooltip-fade-right-out .15s ease-in forwards;
}

.tooltip-animate-in {
    opacity: 1;
}

/* ------------- Show More/ Show Less Buttons Style ------------- */
.toggleMoreLessBtn {
    background-color: #3c8dbc;
    color: #ffffff;
    border: none;
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin-top: 3px;
}

    .toggleMoreLessBtn:hover {
        background-color: #367fa9;
        outline: none;
    }

    .toggleMoreLessBtn .icon {
        font-size: 9px;
    }

/* -----------------------------------------------------------*/
/* Overwrite Bootstrap 5 CSS (Including DataTables)           */
/* -----------------------------------------------------------*/
[class^="col-"],
[class*=" col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

.form-row > .col, .form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.form-group {
    margin-bottom: 1rem;
}

.btn-block {
    width: 100%;
}

a {
    text-decoration: none;
}

.page-link {
    font-size: inherit;
}

.form-select {
    background-position: right 0.25rem center;
    background-size: 11px 12px;
}

.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
    opacity: 1;
}

.form-check {
    min-height: unset;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}

.pagination {
    --bs-pagination-color: inherit;
}

/* Modal close button css */
.modal-header .close {
    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem auto;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

    .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
        opacity: .75;
    }

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem 1.25rem;
    color: inherit;
}

.alert {
    padding: 0.75rem 1rem;
}

.dropdown-menu {
    z-index: 1000;
    float: left;
    min-width: 8rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* DataTables Bootstrap 5 */
div.dt-container {
    position: static;
}

table.dataTable thead > tr > th div.dt-column-header {
    display: block;
}

table.dataTable.table-sm > thead > tr th.dt-orderable-asc, table.dataTable.table-sm > thead > tr th.dt-orderable-desc, table.dataTable.table-sm > thead > tr th.dt-ordering-asc, table.dataTable.table-sm > thead > tr th.dt-ordering-desc,
table.dataTable.table-sm > thead > tr td.dt-orderable-asc, table.dataTable.table-sm > thead > tr td.dt-orderable-desc, table.dataTable.table-sm > thead > tr td.dt-ordering-asc, table.dataTable.table-sm > thead > tr td.dt-ordering-desc {
    padding-right: 20px;
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    height: 100%;
}

table.dataTable.table-sm > thead > tr th.dt-orderable-asc span.dt-column-order, table.dataTable.table-sm > thead > tr th.dt-orderable-desc span.dt-column-order, table.dataTable.table-sm > thead > tr th.dt-ordering-asc span.dt-column-order,
table.dataTable.table-sm > thead > tr th.dt-ordering-desc span.dt-column-order, table.dataTable.table-sm > thead > tr td.dt-orderable-asc span.dt-column-order, table.dataTable.table-sm > thead > tr td.dt-orderable-desc span.dt-column-order,
table.dataTable.table-sm > thead > tr td.dt-ordering-asc span.dt-column-order, table.dataTable.table-sm > thead > tr td.dt-ordering-desc span.dt-column-order {
    text-align: center;
    right: 0;
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    right: 1px;
}

table.table.dataTable > thead > tr > th {
    color: #fff;
    background-color: #3c8dbc;
}

.table > :not(caption) > * > * {
    padding: inherit;
    color: inherit;
    background-color: inherit;
    border-bottom-width: inherit;
    box-shadow: inherit;
}

table.table.dataTable > :not(caption) > * > * {
    background-color: inherit;
}

.table .btn:not(.btn-dark) i {
    color: #fff;
}

.dt-column-header {
    gap: 0px !important;
}

th:not(.dt-orderable-none) > .dt-column-header {
    margin-right: 15px;
}

/* Slim Select */
.ss-main .ss-single-selected .placeholder, .ss-main .ss-single-selected .placeholder * {
    background-color: transparent !important;
    opacity: 1 !important;
    cursor: default !important;
}

/* ------------- Sub Group Title Style ------------- */
.categoryTitle {
    font-size: 15px;
    background-color: #E8E8E8;
    width: 100%;
    height: 33px;
    padding-top: 0;
    padding-left: 12px;
    border-bottom: none;
}