.no-bar {
        overflow-y: auto !important;
        -ms-overflow-style: none !important;
        /* IE and Edge */
        scrollbar-width: none !important;
        /* Firefox */
    }

    .no-bar::-webkit-scrollbar {
        display: none !important;
    }

    .card-body-pref::-webkit-scrollbar {
        display: none;
    }

    .card-body-info::-webkit-scrollbar {
        display: none;
    }

    main:not(.wbar)::-webkit-scrollbar {
        display: none;
    }

    input[type="money"] {
        text-align: right;
    }

    .wscroll,
    .w-pointer {
        cursor: pointer;
    }

    table.table {
        padding: 0px !important;
        margin: 0px !important;
    }

    input,
    select {
        font-size: inherit !important;
    }

    /*MODAL XL*/
    @media screen and (min-width: 600px) {
        .modal-xxl {
            max-width: 90% !important;
        }

        #CardProInfo {
            overflow-y: hidden;
        }
    }

    /*FIELDSET*/
    fieldset.scheduler-border {
        border: 1px groove #ddd !important;
        padding: 0 1.4em 1.4em 1.4em !important;
        margin: 0 0 1.5em 0 !important;
        -webkit-box-shadow: 0px 0px 0px 0px #000;
        box-shadow: 0px 0px 0px 0px #000;
    }

    legend.scheduler-border {
        font-size: 1.2em !important;
        font-weight: bold !important;
        text-align: left !important;
        width: auto;
        padding: 0 10px;
        border-bottom: none;
    }

    /*SIMPLE BLINKER*/
    .blink_me {
        animation: blinker 1s linear infinite;
    }

    .blink_once {
        animation: blinker 1s linear;
    }

    @keyframes blinker {
        50% {
            opacity: 0;
        }
    }

    th,
    td {
        vertical-align: middle !important;
    }

    p {
        line-height: 1;
    }

    .bom-sm-text,
    .tbl-sm-text {
        /*        font-size: 13px !important;*/
    }

    .tbl-md-text {
        /*        font-size: 15px !important;*/
    }

    .no-space {
        white-space: nowrap;
    }

    #list-dept-item {
        user-select: none;
        /*      font-size: 15px;*/
    }

    #list-dept input[type="checkbox"] {
        display: none;
    }

    #list-dept input[type="checkbox"]+#list-dept-item {
        cursor: pointer;
    }

    #list-dept input[type="checkbox"]+#list-dept-item:before {
        content: "\2713";
        color: transparent;
        font-weight: bold;
        margin-right: 1em;
    }

    #list-dept input[type="checkbox"]:checked+#list-dept-item {
        background-color: #0275D8;
        color: #FFF;
    }

    #list-dept input[type="checkbox"]:checked+#list-dept-item:before {
        color: inherit;
    }

    #list-dept input[type="radio"] {
        display: none;
    }

    #list-dept input[type="radio"]+#list-dept-item {
        cursor: pointer;
    }

    #list-dept input[type="radio"]+#list-dept-item:before {
        content: "\2022";
        color: transparent;
        font-weight: bold;
        margin-right: 1em;
    }

    #list-dept input[type="radio"]:checked+#list-dept-item {
        background-color: #0275D8;
        color: #FFF;
    }

    #list-dept input[type="radio"]:checked+#list-dept-item:before {
        color: inherit;
    }

    /*Table Hover Responsive*/
    table {
        border-collapse: separate;
        border-spacing: 0;
        cursor: pointer;
    }

    td>* {
        vertical-align: middle !important;
    }

    .table-rsp td {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 1px solid #C8C8C8;
    }

    .table-rsp tr>td:hover {
        overflow: visible;
        white-space: unset;
    }

    thead.table-rsp-head tr:nth-child(1) th {
        background: white;
        position: sticky;
        top: 0;
        /*        z-index: 10;*/
    }

    /*tbody*/
    td.rsp {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*tbody*/
    td.rspi {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    td.rsp:hover {
        overflow: visible;
        white-space: unset;
    }

    /*thead*/
    th.rsp {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*th.rsp:hover {
        overflow: visible;
        white-space: unset;
    }*/

    div.rsp {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    div.rsp:hover {
        overflow: visible;
        white-space: unset;
    }

    /*thead*/
    div.rsp {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*tbody*/

    /*NOTES*/
    .notepro {
        max-height: 500px;
        overflow-y: auto;
        overflow-anchor: auto;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .notepro::-webkit-scrollbar {
        display: none;

    }

    .notice {
        padding: 2%;
        background-color: #fafafa;
        border-left: 6px solid #7f7f84;
        margin-bottom: 5px;
        border-color: #45ABCD;
        /*        font-size: 12.5px !important;*/

    }

    /*Remove Rounded Edge*/
    input,
    select,
    nav,
    .nav-link {
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        border-radius: 0 !important;
    }

    *[data-toggle="popover"] {
        cursor: pointer;
    }

    *[data-parent="#accordionSidebar"] {
        z-index: 20 !important;
    }

    /*NEW SETTLEMENT*/
    .table-pane {
        border-top: 6px solid #7f7f84;
        margin-bottom: 5px;
        border-color: #224abe;
    }

    main.main {
        overflow-y: auto;
    }

    /*main.roles::-webkit-scrollbar {
        display: none;
    }*/
    main.roles {
        max-height: 150px;
        overflow-y: auto;
    }

    th {
        background: white;
        position: sticky;
        /* See https://caniuse.com/css-sticky */
        top: 0;
        /* Don't forget this, required for the stickiness */
    }

    div.line {
        border-bottom: 2px solid #7f7f84;
        margin: 2px 0px;
        border-color: #224abe;
        padding-bottom: 2px;
    }

    .title-head {
        color: #224abe;
        font-weight: bold;
        cursor: pointer;
        padding-bottom: 5px;
    }

    .title-sm {
        /*        font-size: 12px;*/
        color: #224abe;
        font-weight: bold;
        cursor: pointer;
        padding-bottom: 5px;
    }

    label {
        cursor: pointer;
    }

    /*TEXT BUTTON*/
    .btn-text {
        display: none;
    }

    .btn:hover .btn-text {
        display: unset;
    }

    /*.btn:active .btn-text{
        display: unset;
    }*/

    /*CURENCY*/
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    input[type="number"] {
        text-align: right !important;
    }

    .alerts-border {
        border: 1px #ff0000 solid;

        animation: blink 1s infinite;
    }

    @keyframes blink {
        50% {
            border-color: #fff;
        }
    }

    /*GREEN GREY*/
    .bg-striped-gg {
        background: repeating-linear-gradient(45deg, #ccc, #ccc 1px, #28a745 1px, #28a745 10px);
    }

    /*GREEN WHITE*/
    .bg-striped-grw {
        background: repeating-linear-gradient(45deg, #ccc, #ccc 1px, #28a745 1px, #28a745 10px);
    }

    /*BLACK WHITE*/
    .bg-striped-bw {
        background: repeating-linear-gradient(45deg, #000, #000 1px, #fff 1px, #fff 10px);
    }

    /*GREY WHITE*/
    .bg-striped-gw {
        background: repeating-linear-gradient(45deg, #fff, #fff 1px, #ccc 1px, #ccc 10px);
    }

    /*text Size*/
    /*@media screen and (min-width: 800px) {
        .txt-md{
            font-size: 1vw;
        }
        .txt-sm{
            font-size: 0.7vw;
        }
        .txt-xs{
            font-size: 0.6vw;
        }
    }

    @media screen and (max-width: 800px) {
        .txt-md{
            font-size: 2vw;
        }
        .txt-sm{
            font-size: 1.5vw;
        }
        .txt-xs{
            font-size: 1vw;
        }
    }

    @media screen and (max-width: 600px) {
        .txt-md{
            font-size: 3.5vw;
        }
        .txt-sm{
            font-size: 3vw;
        }
        .txt-xs{
            font-size: 2.5vw;
        }
    }*/

    /*FULLSCREEN MODAL*/
    .modal.modal-fullscreen .modal-dialog {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        max-width: none;
    }

    .modal.modal-fullscreen .modal-content {
        height: auto;
        height: 100vh;
        border-radius: 0;
        border: none;
    }

    .modal.modal-fullscreen .modal-body {
        overflow-y: auto;
    }

    /*FILTER*/
    [data-parent="#formFilter"] {
        max-height: 260px;
        max-width: 100%;
        overflow-y: auto;
        white-space: nowrap;
        overflow-x: hidden;
    }

    .modalMaster {
        cursor: pointer !important;
    }

    .modalMaster:hover {
        color: blue !important;
    }

    .marquee-container {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 50px;
        /* Adjust height as needed */
    }

    .marquee-content {
        position: absolute;
        white-space: nowrap;
        animation: marquee-animation 10s linear infinite;
    }

    @keyframes marquee-animation {
        0% {
            left: 100%;
        }

        100% {
            left: -100%;
        }
    }

    .offcanvas-collapse {
        position: fixed;
        margin-top: 10%;
        top: 56px;
        bottom: 0;
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        /*background-color: var(--gray-dark);*/
        transition: transform 0.3s ease-in-out;
        /* Combine multiple transition properties into one */
        transform: translateX(-100%);
        z-index: 2 !important;
    }

    .offcanvas-collapse.open {
        transform: translateX(0);
        /* Slide in from left to right */
    }

    .offcanvas-collapse-right {
        position: fixed;
        bottom: 0;
        width: 100%;
        right: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        /*background-color: var(--gray-dark);*/
        transition: transform 0.3s ease-in-out;
        /* Combine multiple transition properties into one */
        transform: translateX(100%);
        z-index: 2 !important;
    }

    .offcanvas-collapse-right.open {
        transform: translateX(0);
        /* Slide in from left to right */
    }

    @media (max-width: 400px) {
        #formSpage {
            position: relative;
            padding: 0px;
        }

        #formFilterCard>.card-header {
            overflow-x: auto;
        }
    }

    @media (min-width: 400px) {
        #formSpage {
            position: absolute;
            top: 1px;
            right: 1px;
        }
    }

    #sideFilter .card-body {
        overflow-y: auto;
    }

    #sideFilter .fa-power-off {
        cursor: pointer;
    }

    .btn-group .btn input[type="radio"] {
        display: none;
    }

    /* checked radio styles the button */
    .btn-group .btn input[type="radio"]:checked+span,
    .btn-group .btn input[type="radio"]:checked {
        background-color: #007bff;
        color: #fff;
    }

    /* cleaner approach (recommended) */
    .btn-group .btn:has(input[type="radio"]:checked) {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }

    .dropdown,
    .dropleft,
    .dropright,
    .dropup {
        position: static !important;
    }