/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
    scroll-behavior: smooth;
}

body {
    /*font-family: "Open Sans", sans-serif;*/
    background: #f6f9ff;
    color: #444444;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.container-fluidPassword {
    padding-right: 0;
    padding-left: 0;
}

.HidPwd {
    /* Hide the original text */
    font-size: 0;
    color: transparent; /* Ensure text is not visible even if font-size fails */
}

.HidPwd::after {
    /* Display the asterisk */
    content: "******";
    font-size: initial; /* Reset font-size to make the asterisk visible */
    color: initial; /* Reset color to make the asterisk visible */
}

a {
    color: #4154f1;
    text-decoration: none;
}

    a:hover {
        color: #717ff5;
        text-decoration: underline;
    }

.msgHighlight {
    background: yellow;
    font-weight: bold;
    color: red;
      position: fixed;
    width: 100%;
    padding: 0px 10px;
    bottom: 0;
    right: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Nunito", sanss-serif;
}

.disabled-link {
    cursor: not-allowed;
    text-decoration: none;
    /* Prevents all click events from firing */
    pointer-events: none;
}

.MemoLst {
    height: 65vh;
    overflow-y: scroll;
    width: 100%;
}

.gridView {
    width:100%;
    border:0;
    font-size:small;
}

    .gridView span {
        font-size: smaller;
        color: Red;
    }

.gridViewHeader, .gridViewRow {
    border-color: rgb(206 212 218 / 27%)
}

.gridViewRow td {
    background-color: transparent;
    color: #333333;
    padding: 1px 10px
}


.gridTermViewHeader, .gridTermViewRow {
    border-color: rgb(206 212 218 / 27%)
}

    .gridTermViewRow td {
        margin: 0 0;
        font-size: 1rem;
        /* margin-bottom: 0; */
        line-height: 0.1;
    }

.gridPad {
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.ScrollBar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
    background-color: rgba(255,255,255,0.3);
}

.ScrollBar::-webkit-scrollbar {
    width: 3px;
    background-color: rgba(255,255,255,0.3);
}

.ScrollBar::-webkit-scrollbar-thumb {
    background-color: #0d6efd;
}


.input-group table td {
    border-style: hidden;
}

/*--------------------------------------------------------------
# Login (Cat C) 
--------------------------------------------------------------*/

.bgPPE {
    background-color: #e6f7ff;
    border-radius: 5px;
    box-shadow: 1px 1px 9px 0px #00000045;
}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background: #4154f1;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

    .back-to-top i {
        font-size: 24px;
        color: #fff;
        line-height: 0;
    }

    .back-to-top:hover {
        background: #6776f4;
        color: #fff;
    }

    .back-to-top.active {
        visibility: visible;
        opacity: 1;
    }


.lblmsg {
    text-align: left;
    color: red;
    padding-top: 5px;
}
/*--------------------------------------------------------------
# Login
--------------------------------------------------------------*/
.logo {
    max-width: 40%;
}

.page-title {
    font-size: 3rem;
    color: #2e4b78;
    font-family: "Georgia", "";
    /* font-family: "ui-monospace"; */
    letter-spacing: -1px
}

.main-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.HeaderFooter {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.Header {
    display: flex;
    height: 100vh;
}


footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: start;
}

    footer span {
        padding: 0 10px;
        width: 100%;
        background: #062c5feb;
    }

/* Left pane styles */
.left-pane {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 10px #50505073;
    justify-content: end;
    background: rgba(255, 255, 255, 0.75);
}

.left-inner {
    display: flex;
    flex-direction: column;
    flex: 0 0 90%;
}

/* Right pane styles */
.right-pane {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 10px #50505073;
    justify-content: end;
}

.right-inner {
    display: flex;
    flex-direction: column;
    flex: 0 0 70%;
}

.area-a {
    /* flex: 1;*/
    display: flex;
    align-items: start;
    justify-content: flex-start;
    padding: 10px 20px;
    width: 100%
}

.area-b {
    bottom: 0;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    margin-top: 10px;
}

.area-c {
    width: 100%;
    display: flex;
    padding: 10px 20px;
    box-sizing: border-box;
}

.links-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    flex: 1;
    justify-content: end;
}

.links-list2 table {
    background-color: transparent;
    color: #333333;
    padding: 1px 0px;
    border-color: transparent;
    font-size: small;
}

.links-list2 a {
    padding: 0;
    color: #51678f;
}

.lbltitle {
    font-size: x-large;
}

.lbldesc {
    font-size: small;
}

.login-box {
    max-width: 400px;
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.right-pane .card {
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    overflow: auto;
    border: none;
    background-color: rgba(255, 255, 255, 0.45);
    /*  padding: 15px 0;*/
}

.right-pane .card-header {
    padding: 20px;
    text-align: center;
}

    .right-pane .card-header h4 {
        color: #51678f;
        font-family: "Georgia", "";
        margin: auto;
    }

.right-pane .card-body {
    text-align: center;
}

.right-pane .input-group-text {
    border: 1px solid gray;
    background-color: transparent;
}

.mobile-footer {
    display: none;
    width: 100%;
    font-weight: 500;
    background: #e6f7ff8f;
}

    .mobile-footer .area-b {
        padding: 0 20px;
        margin-top: 5px
    }

    .mobile-footer .links-list2 a {
        color: #2e4b78;
    }


.input-group table td {
    padding-right: 1rem !important;
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (max-width: 992px) {

    .Header {
        display: flex;
        flex-direction: column; 

    }

    .logo {
        max-width: 20%;
    }

    .main-layout {
        flex-direction: column;
        background: #ffffff21;
    }

    .Mol-Area-c {
        PADDING: 10px 15px;
        background: #e6f7ff;
    }

    .bgPPE {
        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
    }

    .links-list {
        flex-direction: row;
        justify-content: start;
        width: 100%;
        padding: 10px;
        background: rgba(255, 255, 255, 0.75);
    }

    .h2.page-title {
        margin: 0 0;
        font-size: 1rem;
        line-height: 1.5;
    }

    .links-list, .bgPPE, .right-pane, .area-c, footer {
        order: 1; /* Default order for small devices */
    }

    .links-list {
        order: 2; /* First item */
    }

    .bgPPE {
        order: 3; /* Second item */
    }

    .Header .right-pane {
        order: 4; /* Third item */
    }

    .area-c {
        order: 5; /* Fourth item */
    }

    footer {
        order: 6; /* Last item */
    }

    .left-pane {
        justify-content: start;
        box-shadow: none;
        background: none;
        flex: 0;
    }

    .right-pane {
        box-shadow: none;
        margin: 15px 0;
        width: 100%;
    }


    .area-a {
        flex-direction: column;
        padding: 0 2px;
    }

    .area-b {
        margin-top: auto;
    }

    .MemoLst {
        height: unset;
        overflow-y: unset;
        width: 100%;
    }

    .mobile-footer {
        display: flex
    }

    .card-header {
        padding: 10px;
    }
}


@media (min-width: 481px) and (max-width: 767px) {}


@media (min-width: 320px) and (max-width: 480px) {
    .px-4 {
        padding-right: 2px !important;
        padding-left: 2px !important;
    }



    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        font-size: calc(5vw);
    }

    .links-list {
        padding: 15px 10px;
    }

    body, .lbltitle, .input-group-text {
        font-size: 14px;
    }

    .h2.page-title {
        font-size: 16px;
    }

    .area-a {
        padding: 0;
    }

    .area-b, .card-header {
        padding: 10px;
    }

    .bgPPE {

        padding: 10px !important
    }

    .lbldesc {
        font-size: calc(3vw);
    }

    .card-body .m-3 {
        margin: auto !important;
    }

    .right-pane {
        box-shadow: none;
    }

    .input-group {
        padding: 10px 0;
    }
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
    border-radius: 4px;
    padding: 10px 0;
    animation-name: dropdown-animate;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    border: 0;
    box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
    text-align: center;
    font-size: 15px;
    padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
    color: #444444;
    text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
    text-decoration: none;
}

.dropdown-menu .dropdown-divider {
    color: #a5c5fe;
    margin: 0;
}

.dropdown-menu .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #f6f9ff;
}


@keyframes dropdown-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

/* Styles for tablets and smaller screens */
@media screen and (max-width: 1023px) {

    .dropdown-menu-arrow::before {
        content: "";
        width: 13px;
        height: 13px;
        background: #fff;
        position: absolute;
        top: -7px;
        right: 20px;
        transform: rotate(45deg);
        border-top: 1px solid #eaedf1;
        border-left: 1px solid #eaedf1;
    }
}

/* Accordion */

.accordion-item {
    border: 1px solid #ebeef4;
}

    .accordion-item .accordion-body {
        padding: 5px 15px;
        overflow: auto;
    }

.accordion-button:focus {
    outline: 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: #012970;
    background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
    padding: 15px 0;
    background: none;
    border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
    box-shadow: none;
    color: #4154f1;
}

.accordion-flush .accordion-body {
    padding: 0 0 15px 0;
    color: #3e4f6f;
    font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
    /*  font-size: 14px;*/
    font-family: "Nunito", sans-serif;
    color: #899bbd;
    font-weight: 600;
    background-color: transparent;
}

.breadcrumb a {
    color: #899bbd;
    transition: 0.3s;
}

.breadcrumb a:hover {
    color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
    color: #899bbd;
}

.breadcrumb .active {
    color: #51678f;
    font-weight: 600;
}

/* Bordered Tabs */
.nav-tabs-bordered {
    border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
    margin-bottom: -2px;
    border: none;
    color: #2c384e;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
    color: #4154f1;
}

.nav-tabs-bordered .nav-link.active {
    background-color: #fff;
    color: #4154f1;
    border-bottom: 2px solid #4154f1;
}


.modal.show .modal-dialog {
    max-width: 100%;
    margin: 0.5rem 1rem;
}

.modal-body {
    padding: 0.5rem 1rem;
    width: 100%;
}
    .modal-body .btn-close {
        float: right
    }
    .modal-body iframe {
        width: 100% !important;
        height: 85vh !important;
    }
/*--------------------------------------------------------------
# Pages
--------------------------------------------------------------*/
.MasterLayout {
    display: flex;
    flex-direction: column;
    /*height: 100vh;*/ /* Full viewport height */
}

.menu {
    transition: all 0.5s;
    z-index: 997;
    background-color: #034cb7;
    padding: 5px 0px;
    flex: 0 0 10%;
    display: flex;
    flex-direction: row;
    box-shadow: -1px 5px 8px 2px #50505073;
    justify-content: start;
    color: white;
    position: fixed;
    width: 100%;
    align-items: center;
}

.header-nav {
    padding-right: 20px
}

.menu-left {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: start;
    align-items: center
}

.menu .logo img {
    max-height: 36px;
    margin-right: 6px;
}

.menu .toggle-sidebar-btn {
    font-size: 32px;
    padding-left: 10px;
    cursor: pointer;
    color: wheat;
}

.menu-left {
    flex: 0 0 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.content {
    background-color: #ffffff; /* White background for content */
}

#loadingOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.MasterLayout .lblSysName {
    color: white
}

.bootstrap-table .fixed-table-container .table td, .bootstrap-table .fixed-table-container .table th {
    vertical-align: middle;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 400;
}
/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
    position: fixed;
    top: 60px;
   left: -400px;
    bottom: 0;
    width: 20%;
    z-index: 996;
    transition: all 0.3s;
    padding: 20px 2px;
   overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    box-shadow: 6px 5px 15px rgba(1, 41, 112, 0.4);
    background-color: #fff;
}


@media (max-width: 767px) {
    .sidebar {
        left: -400px;
    }
}

.sidebar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
    padding: 0px 20px;
    transition: all 0.3s;
    position: fixed;
    top: 60px;
    bottom: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    width: 100%;
    background: #f1f1f1;
    right: 0;
}

    #main .card-body {
        padding: calc(var(--bs-card-spacer-y) ) calc(var(--bs-card-spacer-x) / 3);
        background-color: transparent;
        font-size: 0.9rem;
    }

@media (min-width: 1200px) {

    #main,
    #footer {
        margin-left: 0;
    }
}

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

    #main {
      width:100%
    }

    .menu-left {
        flex: 0 0 80%;
    }
}


/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
    margin-bottom: 10px;
}

    .pagetitle h1 {
        font-size: 24px;
        margin-bottom: 0;
        font-weight: 600;
        color: #51678f;
    }


.toggle-sidebar #main,
.toggle-sidebar #footer {
    margin-left: 0px;
}

.toggle-sidebar .sidebar {
    left: 0;
    width: 50%
}


@media (max-width: 1024px) {
    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 0px;
    }

    .toggle-sidebar .sidebar {
        left: 0;
        width: 50%
    }
}

.sidebar-nav {
    padding: 0 10px;
    margin: 0;
    list-style: none;
}

    .sidebar-nav li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .sidebar-nav .nav-item {
        margin-bottom: 5px;
        padding: 2px 5px;
    }

    .sidebar-nav .nav-heading {
        font-size: 11px;
        text-transform: uppercase;
        color: #899bbd;
        font-weight: 600;
        margin: 10px 0 5px 15px;
    }

    .sidebar-nav .nav-link {
        display: flex;
        align-items: center;
        /* font-size: 15px;
font-weight: 600;*/
        color: #4154f1;
        transition: 0.3;
        background: #f6f9ff;
        padding: 5px;
        border-radius: 4px;
    }

        .sidebar-nav .nav-link i {
            font-size: 16px;
            margin-right: 10px;
            color: #4154f1;
        }

        .sidebar-nav .nav-link.collapsed {
            color: #012970;
            background: #fff;
        }

            .sidebar-nav .nav-link.collapsed i {
                color: #899bbd;
            }

        .sidebar-nav .nav-link:hover {
            color: #4154f1;
            background: #f6f9ff;
        }

            .sidebar-nav .nav-link:hover i {
                color: #4154f1;
            }

        .sidebar-nav .nav-link .bi-chevron-down {
            margin-right: 0;
            transition: transform 0.2s ease-in-out;
        }

        .sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
            transform: rotate(180deg);
        }

    .sidebar-nav .nav-content {
        padding: 5px 0 0 0;
        margin: 0;
        list-style: none;
    }

        .sidebar-nav .nav-content a {
            display: flex;
            align-items: center;
            /*  font-size: 14px;
font-weight: 600;*/
            color: #012970;
            transition: 0.3;
            padding: 3px 0 3px 10px;
            transition: 0.3s;
        }

            .sidebar-nav .nav-content a i {
                font-size: 6px;
                margin-right: 8px;
                line-height: 0;
                border-radius: 50%;
            }

            .sidebar-nav .nav-content a:hover,
            .sidebar-nav .nav-content a.active {
                color: #4154f1;
            }

                .sidebar-nav .nav-content a.active i {
                    background-color: #4154f1;
                }


    .sidebar-nav ul {
        padding-left:  0px;
    }
        .sidebar-nav ul li {
            padding-top: 10px;
        }

        .sidebar-nav ul li i{
            font-size: 8px;
            text-align: left;
        }

        .card-body table {
    font-size: small;
    /*  border-bottom: 1px solid #4444;*/
    border-collapse: separate;
}

    .card-body table th {
        font-weight: bold;
        padding: 0 5px;
    }


    .card-body table td {
        text-align: left;
        padding: 0 5px;
    }

.lblName {
    color: #012970;
    /* font-weight: 600; */
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 10px;
    font-size: 15px;
}

#main .card {
    background-color: #f1f1f1;
    margin-top:1rem;
}

#main .pagetitle {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin-bottom: 0;
}


#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
    font-family: "Nunito", sans-serif;
    margin-bottom: 0;
}

#main .pagetitle h1 {
    font-weight: 200;
    color: #012970;
    justify-content: start;
}

.a button {
    width: auto; /* Normal button width */
    padding: 10px 20px;
}


.tab-space {
    display: inline-block;
    margin-left: 4em;
}

/* Layout containers */
.DivCover {
    display: flex;
    align-items: stretch;
    background-color: transparent;
    flex-wrap: wrap;
}

.DivCoverMemo {
    display: flex;
    align-items: stretch;
    background-color: transparent;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.DivSub {
    align-items: center;
    margin-bottom: 5px;
    flex: 0 0 33.33%;
    max-width: 33.33%;
    box-sizing: border-box;
}

.DivSub20 {
    align-items: center;
    margin-bottom: 5px;
    flex: 0 0 20.00%;
    max-width: 20.00%;
    box-sizing: border-box;
}
.DivSub30 {
    align-items: center;
    margin-bottom: 5px;
    flex: 0 0 30.00%;
    max-width: 30.00%;
    box-sizing: border-box;
}

.DivSub40 {
    align-items: center;
    margin-bottom: 5px;
    flex: 0 0 40%;
    max-width: 40%;
    box-sizing: border-box;
}

.DivSub45 {
    align-items: center;
    margin-bottom: 5px;
    flex: 0 0 45%;
    max-width: 45%;
    box-sizing: border-box;
}



.DivSub50 {
    align-items: center;
    margin-bottom: 5px;
    flex: 0 0 50%;
    max-width: 50%;
    box-sizing: border-box;
}

.DivSubMemo50 {
    align-items: end;
    margin-bottom: 5px;
    flex: 0 0 50%;
    max-width: 50%;
    box-sizing: border-box;
}

.DivSub60 {
    align-items: center;
    margin-bottom: 5px;
    flex: 0 0 60%;
    max-width: 60%;
    box-sizing: border-box;
}

.DivSub60Memo {
    text-align: right;
    margin-bottom: 5px;
    flex: 0 0 60%;
    max-width: 60%;
    box-sizing: border-box;
    position: absolute;
    left: 660px;
}

.DivSub100 {
    align-items: center;
    margin-bottom: 5px;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.DivSub100Memo {
    padding-right: 10px;
    align-items: self-end;
    margin-bottom: 5px;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: right; /* Keeps text aligned to the right */
    position: relative; /* Ensure positioning is relative */
    left: -92px; /* Adjusts the element's position 50px from the left */
}

.divSubInline {
    display: inline-block;
    width: 70%;
}
.FG1 {
    flex-grow: 1;
}

.FG2 {
    flex-grow: 2;
}

.FG3 {
    flex-grow: 3;
}

.FG4 {
    flex-grow: 4;
}

.FG6 {
    flex-grow: 6;
}

.FG8 {
    flex-grow: 8;
    text-align: right
}

.FG9 {
    flex-grow: 9;
}

.FG10 {
    flex-grow: 10;
}

.AR {
    text-align: right
}

.DivSub:last-child {
    margin-right: 0; /* Remove margin for the last item */
}

.main .col-form-labeltop {
    font-size: small !important;
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
}


.main .col-form-label {
    font-size: small !important;
    font-weight: bold;
    display: inline-block;
    width: 150px;
    padding: 0 10px;
    vertical-align: top;
}

.main .col-form-labelReport {
    font-size: small !important;
    font-weight: bold;
    display: inline-block; /* or block */
    width: 100px;
    line-height: 1.5;
}

.main .col-form-labelSurvey {
    font-size: small !important;
    font-weight: bold;
    display: inline-block; /* or block */
    width: 100%;
    color: Maroon;
}


.main .col-form-labelAddVendor {
    font-size: small !important;
    font-weight: bold;
    display: inline-block; /* or block */
    width: 55px;
}


.form-control[type=file]:not(:disabled):not([readonly]) {
    padding: 0.25rem 0.2rem;
}
    /* Underline-style inputs and selects */
.main .form-control, .main input[type="text"], .main input:not([type]), .main textarea, .main select, .label.form-control {
    outline: none;
    padding: 2px 2px;
    font-size: 13px;
    border-radius: 3px;
    background-color: white;
    border-radius: 3px;
    flex-grow: 1; /* Allow input to take available space */
    min-width: 300px;
    max-width: 100%;
    width: auto;
    display: inline;
        
}
    .main select.ShortWidth{
        outline: none;
        padding: 2px 2px;
        border: 1px solid #ced4da;
        border-radius: 3px;
        font-size: 13px;
        background-color: white;
        flex-grow: 1; /* Allow input to take available space */
        width: auto;
        display: inline;
        min-width: 50px;
        max-width: 150px;
    }

    .main .form-control:disabled, .main input[type="text"]:disabled, .main input:not([type]):disabled, .main textarea:disabled, .main select:disabled, .label.form-control:disabled {
        outline: none;
        padding: 2px 2px;
        font-size: 13px;
        background-color: transparent;
        border-radius: 3px;
        flex-grow: 1; /* Allow input to take available space */
        min-width: 300px;
        max-width: 100%;
        width: auto;
        display: inline;
    }


    .main input[type="text"].LongWidth, .main input:not([type]).LongWidth, .main textarea.LongWidth, .main select.LongWidth, .label.form-control.LongWidth {
        outline: none;
        padding: 2px 2px;
        border: 1px solid #ced4da;
        border-radius: 3px;
        font-size: 13px;
        background-color: white;
        flex-grow: 1; /* Allow input to take available space */
        width: auto;
        display: inline;
        max-width: 300px;
    }

    .main input[type="text"].ShtWidth, .main input:not([type]).ShtWidth, .main textarea.ShtWidth, .main select.ShtWidth, .label.form-control.ShtWidth, .main input[type="date"].ShtWidth {
        outline: none;
        padding: 2px 2px;
        border: 1px solid #ced4da;
        border-radius: 3px;
        font-size: 13px;
        background-color: white;
        flex-grow: 1; /* Allow input to take available space */
        width: auto;
        display: inline;
        min-width: 50px;
        max-width: 150px;
    }

    .main input[type="text"].LongWidth:disabled, .main input:not([type]).LongWidth:disabled, .main textarea.LongWidth:disabled, .main select.LongWidth:disabled, .label.form-control.LongWidth:disabled {
        outline: none;
        padding: 2px 2px;
        border: 1px solid #ced4da;
        border-radius: 3px;
        font-size: 13px;
        background-color: transparent;
        flex-grow: 1; /* Allow input to take available space */
        width: auto;
        display: inline;
        max-width: 300px;
    }

    .main input[type="text"].ShtWidth:disabled, .main input:not([type]).ShtWidth:disabled, .main textarea.ShtWidth:disabled, .main select.ShtWidth, .label.form-control.ShtWidth:disabled, .main input[type="date"].ShtWidth:disabled {
        outline: none;
        padding: 2px 2px;
        border: 1px solid #ced4da;
        border-radius: 3px;
        font-size: 13px;
        background-color: transparent;
        flex-grow: 1; /* Allow input to take available space */
        width: auto;
        display: inline;
        min-width: 50px;
        max-width: 150px;
    }

    .main input[type="text"]:disabled {
        background-color: transparent;
        border: 1px solid #ccc;
    }

    /* Focus state for accessibility */
    .main input[type="text"]:focus,
    .main textarea:focus,
    .main select:focus {
        border-bottom-color: white;
        outline: none;
        box-shadow: 0px 1px 1px #50505073;
    }

@media (max-width: 992px) {
    .main,
    .main input,
    .main textarea,
    .main select {
        margin-right: 5px;
        font-size: 14px;
        margin-bottom: 5px;
    }

    .DivCover {
        flex-direction: column;
    }

    .DivCoverMemo {
        flex-direction: column;
    }

    .main .AR {
        text-align: left
    }

    .main input[type="text"], .main input:not([type]), .main textarea, .main select, .label.form-control {
        min-width: none;
        max-width: 70%;
    }

    .DivSub20, .DivSub40, .DivSub45, .DivSub50 {
        flex: 0 0 100%;
        margin-right: 0;
        max-width: unset;
    }

    .main .col-form-label {
        min-width: 150px;
        width: auto;
    }
}

@media (max-width: 480px) {
    .main,
    .main input,
    .main textarea,
    .main select {
        margin-right: 2px;
        font-size: 12px;
        margin-bottom: 2px;
    }

    .DivCover {
        flex-direction: column
    }

    .main .AR {
        text-align: left
    }

    .main input[type="text"], .main input:not([type]), .main textarea, .main select, .label.form-control {
        min-width: none;
        max-width: 70%;
    }
}

@media print {
    /* Print-specific styles go here */
    body {
        font-size: 12px !important;
    }

    .menu, #main {
        position: unset !important;
    }

  
}

.btn {
min-width:100px
}

/* No Wrap */

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

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.popUpPanel {
    position: fixed;
    top: 60%; 
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    padding-bottom: 60px; 
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow-y: auto; 
}

.myBold {
    font-weight: bold;
}

.small-font {
    font-size: 12px; /* Adjust the size as needed */
}

.scrollable-table-container {
    overflow-y: auto;
}


.TabContainer {
    padding: 0.2rem 0;
}

    .TabContainer a {
        border-top: 1px solid white;
        border-left: none;
        border-right: 1px solid #aaaaaa;
        border-bottom: none;
        text-decoration: none;
        padding: 0.3em 1rem;
        border-radius: 5px 5px 0px 0px;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
    }

a.TabItemActive {
   
    background-color: #4472C4;
    color: white;
    
   
}
a.TabItemInactive {
    
    background-color: white;
    color: #4472C4;
  
}