@media print {
        .document {padding: 20px;}
        #body-content {display: none !important;}
        #print-content{
            display: block !important; 
            -webkit-print-color-adjust: exact !important; 
            print-color-adjust: exact !important;
        }
    
        #body-content {display: none !important;}
        
        .ui-dialog {display: none !important;}
    
        .hiddenItems {
            display: block !important;
        }

        footer {display: none !important;}
    }

    @media (max-width: 1200px) {
        .ui-dialog {
            width: 90% !important; 
        }
    }

    @media (max-width: 600px){
        .dialogue-content .left-content{
            width: 100% !important; 
        }	
    
        .dialogue-content .right-content{
            width: 100% !important;
        }
    }

    aside {
        transform: translateX(-100%);/* Hide sidebar off-screen */ z-index: 10;
    }

    #main_content {
        left: 0px !important; z-index: 0;
    }

    aside.expanded {
        transform: translateX(0);  /* Hide sidebar off-screen */
    }

    .hr4{
        margin: 5px;
    }
    .bold {
        font-weight: bold;
    }

    body {
        color: black;
    }

    .progress {
        margin-bottom: 0px;
    }

    .progress-error{
        max-height:100px; overflow-y: auto;
    }

    .ui-widget-header{
        background: -webkit-linear-gradient(top,#e8e8e8 0,#d4d4d4 100%);
        border: 0px; line-height: 18px;
        /*background: -webkit-linear-gradient(top,rgba(120,177,237,1) 0,rgba(65,123,181,1) 100%);*/
        /* background: -webkit-linear-gradient(top,rgba(54,111,172,1) 0,rgba(24,75,130,1) 100%); */
    }

    .ui-dialog-title{
        /* color: #4b4b4b; */
        /*color: white; */
        color: #333333; text-shadow: 0 1px 0 #fff;
    }

    #header_toolbar{
        background: -webkit-linear-gradient(top,rgba(54,111,172,1) 0,rgba(24,75,130,1) 100%);
        /*background: #2e5681 url(../img/external/jquery-ui/ui-bg_highlight-soft_30_2e5681_1x100.png) 50% 50% repeat-x;*/
        /*background: -webkit-linear-gradient(top,#49afcd 0,#2e5681 100%);*/
    }

    #nav_main a{
        color: #4a4a4a;
    }

    .tooltip {
        font-size:15px;
        font-family:Georgia;
    }

    aside.instanceAdmin {
        transform: translateX(-100%);/* Hide sidebar off-screen */ z-index: 10;
    }

    #main_content.instanceAdmin  {
        left: 0px !important; z-index: 0;
    }

    aside{
        position: fixed;
        top: 37px;
        bottom: 15px;
        left: 0px; 
        margin-bottom: 0px;
    }

    aside .sidebarMenu {
        margin-top: 10px;
        display: flex;
        flex-direction: column; /* Allow vertical growth */
        height: 100%; /* Limit the maximum height to the viewport height */
        overflow-y: auto; /* Enable vertical scrolling when necessary */
        margin-left:30px !important;
        padding-bottom: 10px;  /*Allow content to grow and fill available space */
    }

    aside .sidebarMenu {
        flex-grow: 1;  /*Allow content to grow and fill available space */
    }

    .sidebar-open{
        left: -300px; /* Show the sidebar */
    }

    aside nav a {
        color: black;
    }

    aside .menu_links{
        width: 75% !important;
        margin-left:7% !important;
    }

    aside h1{
        margin-left:4% !important;
    }

    aside h3{
        width: 75% !important;
        margin-left:7% !important;
    }

    aside select{
        width: 87% !important;
    }

    aside input{
        width: 82% !important;
    }

    aside .divider{
        margin-left:7% !important;
        width: 76% !important;
    }

    .filterLoading{
        margin-left: 90px;
    }

    .filterForm .filterSearch, .filterForm .dateInput, .filterForm .selectInput{ 
        margin-bottom: 0px !important;
    }

    .filterForm .filterInput, .filterForm .filterSelect, .filterForm .filterDate{
        margin-bottom: 10px;
    }

    .tag-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px; /* Space between the input and the tags */
        padding-left: 5px;
    }

    .highlight-green{
        color: green !important; font-weight: bold;
    }

    .tag {
        background-color: #e0e0e0;
        padding: 3px;
        font-size: 12px;
        white-space: nowrap;
        cursor: pointer;
    }
    
    .filterInput{
        position: relative;
    }

    .grid_12 {
        width:100%;
    }

    .container_12{
        width: 98%;
        margin-left: 2%;
    }

    .dropdown-menu{
        font-size:14px !important;
        overflow-y: auto;
        max-height: 300px;
    }

    .errorDisplay .alert-error{
        line-height: 1;font-size: 16px;padding: 10px;border: 1px solid;
        padding: 10px;
    }
    
    form .tab2, form .tab3{
        display: none;
    }
    
    #loginForm .content::after{
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .content .overflow-mid{
        max-height:275px;overflow: auto;
    }

    .content .overflow-max{
        max-height:360px;overflow: auto;
    }

    .checkBoxDiv{
        padding-bottom: 10px;border-bottom: 1px solid;max-height:150px; overflow:auto;
    }

    .dialogue-content .printHtml{
        max-height: 350px;
    }
    
    .dialogue-content{
        line-height:1;
        padding: 10px;
        font-size: 15px;
    }

    .dialogue-content .content{
        overflow-y: auto; /* scroll within */
        padding: 10px;
    }

    .dialogue-content .modal-footer{
        padding: 10px;
    }

    .dialogue-content .middle-content{
        overflow-y: auto; /* scroll within */
        margin-bottom: 10px;
        max-height: 20vh;
        clear: both; 
    }

    .dialogue-content .middle-content-large{
        overflow-y: auto; /* scroll within */
        margin-bottom: 10px;
        max-height: 40vh;
        clear: both; 
    }

    .dialogue-content .middle-content-xlarge{
        overflow-y: auto; /* scroll within */
        margin-bottom: 10px;
        max-height: 70vh;
        clear: both; 
    }

    .dialogue-content .left-content{
        width: 50%; 
        float: left;
        max-height: 20vh;
        overflow-y:auto;
        margin-bottom: 10px;
    }	

    .dialogue-content .right-content{
        width: 50%;
        float: right; 
        max-height: 20vh;
        overflow-y: auto;
        margin-bottom: 10px;
    }

    .dialogue-content .searchQty {
        margin-bottom: 10px;
    }

    .table .action-field{
        /*background-color: white;*/
        text-align:center;
        white-space:nowrap;
    }

    .table td{
        vertical-align:middle !important; 
    }

    .table.detailsTable{
        font-size: 15px;
    }

    .table-dropdown{
        position: absolute;
        right: 129px;
        background: white;
        padding: 10px;
        border-radius: 10px;
        top: 5px;
        background: #f8f8f8;
    }

    .moduleList {
        display: flex;
        flex-direction: column; /* Allow vertical growth */
        height: 100%; /* Limit the maximum height to the viewport height */
        overflow-y: auto; /* Enable vertical scrolling when necessary */
    }

    .table-container {
        display: flex;
        flex-direction: column; /* Allow vertical growth */
        height: 100%; /* Limit the maximum height to the viewport height */
        overflow-y: auto; /* Enable vertical scrolling when necessary */
    }

    .table .tableexport-caption{
        display: none;
    }

    .scroll-content {
        flex-grow: 1;  /*Allow content to grow and fill available space */
        overflow-y: auto;
        overflow-x: hidden;
    }

    .dialogue-content .table th{
        white-space:nowrap;
    }
    
    .dialogue-content .table .data-name{
        text-align: center;
    }

    .dialogue-content .table .data-value{
        background-color:white; text-align: center;
    }

    .table td{
        padding-top: 15px;
    }	

    .table td.white{
        background-color:white;
    }

    .table form{
        margin: 0px;
    }
    
    .center{
        text-align: center !important;
    }

    .left{
        float: left;
    }

    .right{
        float: right;
    }

    .table.center th, .table.center td{
        text-align: center;
    }

    .hiddenItems{
        display: none;
    }

    .printHtml{
        overflow-x: hidden;
        padding: 10px;
    }

    .search-content{
        padding: 0px !important;
    }

    .custom-content:after, .search-content:after{
        height: 0; 
    }

    .custom-content{
        padding: 0px;
    }

    #main_content .box{
        margin-top: 0px;
    }

    .box .header {
        background: -webkit-linear-gradient(top,#e8e8e8 0,#d4d4d4 100%);
        border: 0px;
    }

    .box .header h3, .box .header h4{
        color: #333333; text-shadow: 0 1px 0 #fff;
    }
    
    .box .header h4{
        color: #333333; text-shadow: 0 1px 0 #fff; margin-top: 0px;margin-left: 37px;
    }

    #main_content .box .content{
        border: 0px; 
    }

    #main_content .search-bar{
        width: 100%;
        white-space:nowrap;
        text-align: center;
        margin-left: 1%;
    }

    #main_content .searchInput, #main_content .searchList{
        width: 60%; margin-right: 5px;
    }

    #main_content .search-bar select {
        margin-top: 10px;
    }   

    #main_content .searchLimitForm{
        width: 5%;
    }

    #main_content .searchLoadingForm{
        margin-left: 5px;margin-top: 25px;
    }

    #main_content{
        position: absolute;
        left: 280px;
        top: 35px;
        right: 0px;
        bottom: 25px;
        padding: 5px; 
        display: flex;
        flex-direction: column;
    }

    /* Cursor style while dragging */
    .menu-content{
        display: flex; 
        justify-content: center;
        width: 100%; 
        background: -webkit-linear-gradient(top,rgba(54,111,172,1) 0,rgba(24,75,130,1) 100%);
    }

    .menu-wrapper {
        display: flex;
        justify-content: center; /* Center horizontally */
        overflow: hidden; /* Hide overflow of scroll-container */
    }

    .menu-container {
        overflow-x: auto; /* Enable horizontal scroll */
        white-space: nowrap; /* Prevent text wrapping */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
        background: -webkit-linear-gradient(top,rgba(54,111,172,1) 0,rgba(24,75,130,1) 100%);
        width: 100%;
        height: 37px;
    }

    .menu-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar for WebKit browsers */
    }

    .menu-container:active {
        cursor: pointer;
    }

    /* Reset list styles */
    .menu-container ul {
        list-style: none;
        padding: 5px;
        margin: 0;
        display: flex;
        width: 100%; margin: auto;
    }

    /* List items */
    .menu-container li {
        padding: 4px 30px;
        position: relative;
        cursor: pointer;
    }

    .menu-container li a {
        color: white;
    }

    /* Right separator */
    .menu-container li:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 60%; /* Adjust height as needed */
        width: 1px;
        background-color: #ccc;
    }

    #header-menu {
        position: absolute; top: 0px; right: 2px;cursor: pointer;
    }

    /* #header-menu .menu-btn {
        color: white !important; text-align: center; padding: 8px 15px; text-decoration: none;
    } */

    /* #header-menu .menu-span {
        color: yellow; 
    }  */

    #header-menu .menu-btn {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;      /* overall width */
        height: 15px;     /* overall height */
        cursor: pointer;
        text-decoration: none;
    }

    #header-menu .menu-btn span {
        display: block;
        height: 2px;       /* thickness of bars */
        width: 18px;       /* width of bars */
        background: white; /* color of bars */
        border-radius: 2px;
    }

    #header-menu .dropdown-menu {
        position: absolute;
        right: 0; /* align to right side of button */
        top: 30px; /* directly under button */
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 6px;
        list-style: none;
        margin: 0px;
        padding: 0px;
        min-width: 100px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    #header-menu .dropdown-menu li a {
        text-decoration: none;
        color: #333;
        display: block;
        text-align: center;
        padding: 8px;
    }

    #header-menu .dropdown-menu li:hover {
        background: #f2f2f2;
    }

    .form-horizontal .control-label {
        width: 25%;
    }

    .form-horizontal .controls {
        margin-left: 35%;
    }

    .form-horizontal input[type="text"], .form-horizontal input[type="number"], .form-horizontal textarea, .form-horizontal input[type="password"], .form-horizontal input[type="email"] {
        width: 65%; min-width: 50px;
    }

    .form-horizontal .input-append,  .form-horizontal .input-prepend{
        width: 100%;
    }

    .form-horizontal .input-append input {
        width: 60%;
    }

    .form-horizontal .input-prepend input {
        width: 55%;
    }

    .form-horizontal select {
        width: 67.5%;
    }

    .form-horizontal .itemList{
        text-align: center;
    }

    .dialogue-content .searchLimitForm{
        float:left; width: 4% !important;margin-left:10px; margin-top:0px;
    }

    .dialogue-content .searchLoadingForm{
        float:left; margin-top:0px;
    }

    .spacer{
        margin-bottom: 10px;
    }

    .search-box {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid #ccc;
    }

    .search-content {
        flex: 0 0 auto;
        padding: 10px;
        text-align: center;
    }

    .search-body {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .search-body .search-btn {
        padding: 8px;
        text-align: center;
        width: 90%;
    }

    .search-body .sortList td {
        padding: 5px !important;
    }

    .search-footer {
        flex: 0 0 auto;
        margin-top: 5px;
        padding: 3px;
        background: -webkit-linear-gradient(top,#e8e8e8 0,#d4d4d4 100%);
    }

    .scroll-menu-container{
        display: flex; 
        justify-content: center; 
        width: 100%; 
    }

    .scroll-menu-wrapper{
        display: flex;
        justify-content: center; /* Center horizontally */
        overflow: hidden; /* Hide overflow of scroll-container */
        padding: 2px;
    }

    .scroll-menu {
        width: 100%;
        overflow-x: auto; /* Enable horizontal scroll */
        white-space: nowrap; /* Prevent text wrapping */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    }
    
    .scroll-menu .btn{
        margin-right: 3px;
    }

    .scroll-menu::-webkit-scrollbar {
        display: none; /* Hide the scrollbar */
    }

    .scroll-menu:active {
        cursor: pointer;
    }

    .btnList{
        text-align: center; margin:25px;
    }

    .btnList span{
        margin-top: 20px;margin-bottom: 20px; margin-right: 10px;
    }

    .menuList a{
        margin: 5px; padding:10px; display: block;
    }

    /* .search-content .searchTable th, .search-content .searchTable td{
        text-align: center !important;
    }

    .search-content .searchTable td{
        vertical-align: middle !important;
    }

    .search-content .searchTable select{
        width: 90%;
        margin-bottom: 0px;
    }

    .search-content .searchTable input, .middle-content input{
        width: 70%; margin: 0px;
    } */

    html{
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-y: hidden; overflow-x: hidden;
    }
    
    .page-container {
        position: fixed;    
        height: 100%;
        width: 100%;
        top: 0px;
    }    

    footer {
        position: fixed;
        bottom: 0;
        height: 30px;
        background: -webkit-linear-gradient(top,rgba(54,111,172,1) 0,rgba(24,75,130,1) 100%);
    }

    .footer-right{
        display: inline;
        float: right;
        padding-right: 2px;
    }

    .message-content{
        text-align: center;
        text-shadow: none;
        padding-top:0px;
    }

    .dropdown-menu{
        font-size:14px !important;
        overflow-y: auto;
        max-height: 200px;
    }

    .search-list {
        padding: 0px;
        margin: 2px 0 0;
        list-style: none;
        background-color: #ffffff;
        border: 1px solid #ccc;
    }

    .search-list li a {
        padding: 5px;
    }

    .search-list li a:hover{
        text-decoration: none;
        color: #ffffff;
        background-color: #0081c2;

        background-image: linear-gradient(to bottom, #0088cc, #0077b3);
        background-repeat: repeat-x;
    }

    .search-list li a{
        display: block;
        clear: both;
        font-weight: normal;
        line-height: 30px;
        color: #333333;
        white-space: nowrap;
        text-align: center;
    }

    .search-list li{
        border-bottom:  1px solid #cdcdcd;
    }

    .btn {
        font-size: 13px;
    }

    .ui-dialog .ui-dialog-titlebar-close {
        position: absolute;
        right: 0.3em;
        top: 40%;
        width: 30px;
        margin: -10px 0 0 0;
        padding: 1px;
        height: 25px;
        border-radius: 5px;
    }

    .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
        border-top-right-radius: 3px;
    }

    .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
        border-top-left-radius: 3px;
    }

    .ui-button-icon-only {
        width: 2em;
        box-sizing: border-box;
        text-indent: -9999px;
        white-space: nowrap;
    }

    .ui-button {
        padding: 0.4em 1em;
        display: inline-block;
        position: relative;
        line-height: normal;
        margin-right: 0.1em;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow: visible;
    }
    
    .ui-button-icon-only .ui-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8.5px;
        margin-left: -8px;
    }

    .ui-icon-closethick {
        background-position: -96px -128px;
    }

    .ui-icon {
        width: 16px;
        height: 16px;
    }
    

    .ui-icon {
        display: inline-block;
        vertical-align: middle;
        margin-top: -0.25em;
        position: relative;
        text-indent: -99999px;
        overflow: hidden;
        background-repeat: no-repeat;
    }


    .ui-button-icon-only {
        width: 2em;
        box-sizing: border-box;
        text-indent: -9999px;
        white-space: nowrap;
    }

    .ui-button {
        padding: 0.4em 1em;
        display: inline-block;
        position: relative;
        line-height: normal;
        margin-right: 0.1em;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: -webkit-linear-gradient(top,#e8e8e8 0,#d4d4d4 100%);
    }

    /* CSS For TWITTER TYPE AHEAD */
    .twitter-typeahead{
        width: 100%;
    }

    .tt-menu{
        margin: 2px 0 0;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        max-height: 200px;
        overflow-y: auto;
        padding: 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        z-index: 2000;
        width: auto;
        white-space: nowrap;
    }
      
      /* Styling for each suggestion item */
      .tt-suggestion {
        padding: 6px;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 4px;
        margin-bottom: 4px;
        cursor: pointer;
      }
      
      .tt-suggestion.active-suggestion{
        background-color: #0081c2;
        color: #fff;
      }

      .dt-container .dt-layout-table{
        background: url("../img/sprites/tables/table-head-bg.png") repeat-x scroll top left #ddd;
    }

    .custom-header-class, .custom-footer-class {
        float: right;
    }

    .dt-container .custom-header-class .dt-layout-start{
        margin: 7px; float: left;
    }

    .dt-container .custom-header-class .dt-layout-end{
        margin: 7px; float: right;
    }

    .dt-container .custom-footer-class .dt-layout-start{
        margin: 7px; float: left;
    }

    .dt-container .custom-footer-class .dt-layout-end{
        margin: 7px; float: right;
    }

    .dt-container .dt-layout-start select{
        margin: 0px; width: 70px; 
    }

    .dt-container .dt-info{
        margin-top: 5px;
    }

    .dt-container .dt-layout-end input{
        margin: 0px; width: 150px;
    }

    .dt-container label{
        display: none;
    }

    .dt-container .dt-paging button{
        width: 40px; height: 30px; margin: 1px;
    }

    .dt-container ul{
        list-style: none; padding: 0px; margin: 0px;
    }

    .dt-container tr.child td{
        text-align: center;
    }

    .dt-container ul li{
        margin: 5px; height: 30px; border-bottom: 1px solid black;
    }

    .dt-container .dtr-title{
        float: left;
    }

    .dt-container .dtr-data{
        float: right;
    }
    /*.ui-tooltip-content
        {
            font-size:30px;
            font-family:Calibri;
        } */