:root {
    --ncalendar-btn-color: #fff;
    --ncalendar-bg-color: #2980B9;
    --ncalendar-text-color: #ffffff;
    --ncalenadar-link-color-rgb: 41, 128, 185;
    --ncalendar-alink-color-rgb: 41, 128, 185;
    --ncalendar-a-color-rgb: 36, 115, 166;
    --ncalendar-btn-hover-bg: #1c5d87;
    --ncalendar-choices-bg-color: #42789c;
    --ncalendar-choices-border-color: #346281;
    --ncalendar-btn-focus-shadow-rgb: 49, 132, 253;
    --ncalendar-nav-link-hover-color: #64a4de;
    --ncalendar-upload-section-form-color: #8cb3d4;
    --ncalendar-sideBar-bg-light-color-rgb: 241, 241, 241;
    --ncalendar-sideBar-bg-dark-color-rgb: 44, 46, 50;
    --ncalendar-btn-active-shadow: rgba(0, 0, 0, 0.125);
    --ncalendar-nav-tabs-link-active-border-color-light: #dee2e6 #dee2e6 #fff;
    --ncalendar-nav-tabs-link-active-border-color-dark: #495057 #495057 #212529;
    --ncalendar-nav-tabs-link-active-bg: rgb(255,255,255);
    --ncalendar-nav-tabs-link-active-color-light: rgb(0,0,0);
    --ncalendar-nav-tabs-link-active-color-dark: rgb(255, 255, 255);
    --ncalendar-nav-tabs-link-color-light: #507ba6;
    --ncalendar-nav-tabs-link-color-dark: #88a8d3;
    --ncalendar-nav-tabs-link-hover-color-light: #6b97c0;
    --ncalendar-nav-tabs-link-hover-color-dark: #b0c9e5;
    --ncalendar-icon-primary-color: #1f81e0;
    --ncalendar-icon-tooltip-color: #3a81b1;
    --ncalendar-icon-remove-primary-color: #2b68a4;
    --success-color: #198754;
    --error-color: #d12626;
    --ncalendar-userinterface-light-bg-color-rgb: 250, 249, 249;
    --ncalendar-userinterface-dark-bg-color-rgb: 49, 53, 59;
    --ncalendar-choices-inner-bg-dark-color: #222529;
    --ncalendar-choices-inner-bg-light-color: #f9f9f9;
    --ncalendar-choices-inner-bg-light2-color: #fff;
    --ncalendar-choices-inner-bg-dark-border: #4a5056;
    --ncalendar-choices-inner-bg-light-border: #ddd;
    --ncalendar-loading-modal-bg-dark-rgba: 44, 48, 53, .8;
    --ncalendar-loading-modal-bg-light-rgba: 255, 255, 255, .8;
    --ncalendar-login-area-card-bg-dark-rgb: 44,48,53;
    --ncalendar-login-area-card-bg-light-rgb: 248, 249, 250;
    --ncalendar-dataTable-selectElement-color-rgb: 32, 37, 41;
    --ncalendar-dataTable-cellDark-color: #a2a9b0;
    --ncalendar-dataTable-cellLight-color: #202529;
    --ncalendar-dataTable-cellCustomReq-color: #1f81e0;
    --ncalendar-calendar-regular-color: #0082bb;
    --ncalendar-calendar-iregularcolor: #cb444a;
    --ncalendar-calendar-iregularFadedcolor: #ed8a8f;
    --ncalendar-calendar-cancellationcolor: #6ba8d1;
    --ncalendar-calendar-changecolor: #ffc234;
    --ncalendar-calendar-changefadedcolor: #fcdc9a;
    --ncalendar-calendar-darktextcolor: #ffffff;
    --ncalendar-calendar-lighttextcolor: #000000;
    --ncalendar-calendar-fadedtextcolor: #8c8c8c;
    --ncalendar-message-success-color-rgb: 28, 135, 28;
    --ncalendar-message-error-color-rgb: 187, 45, 45;
    --ncalendar-uploadPreList-svg-color: #6C7279;
    --ncalendar-uploadPreList-svghover-color: #FAF9F9;
    --ncalendar-uploadSection-progress-row-color: #e9f0ff;
    --ncalendar-progressBar-color: #458dd1;
    --ncalendar-invalidShiftPopup-color-rgba: 255, 0, 0, 0.8;
    --ncalendar-invalidTableSelect-color-rgb: 255, 0, 0;
    --ncalendar-custom-popover-alert-color-rgb: 203,68,74;
    --ncalendar-custom-popover-alertheader-color-rgb: white;
    --ncalendar-custom-popover-success-color-rgb: 0,135,86;
    --ncalendar-custom-popover-successheader-color-rgb: white;
    --ncalendar-custom-popover-warning-color-rgb: 245,195,68;
    --ncalendar-custom-popover-warningheader-color-rgb: black;
    --ncalendar-forgotpwd-code-input-color: #007bff;
    --ncalendar-forgotpwd-code-boxshadow-color-rgba: 0, 123, 255, 0.5;
}

.footer .copyright {
    padding: 25px 0;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
  
.footer .copyright .p {
    margin-bottom: 0;
}

#copyRightSection {
    font-size: 12px;
}

.base_content {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.base_content.page-enter {
    opacity: 1;
    animation: fadeIn 0.25s ease-in;
}

.base_content.page-exit {
    opacity: 0;
    animation: fadeOut 0.25s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.text-ncalendar {
    --bs-text-opacity: 1;
    color: rgba(var(--ncalendar-a-color-rgb),var(--bs-text-opacity))!important;
}

.form-check-input:checked{
    background-color: var(--ncalendar-bg-color);
    border-color: var(--ncalendar-bg-color);
}

.btn-ncalendar {
    --bs-btn-color: var(--ncalendar-btn-color);
    --bs-btn-bg: var(--ncalendar-bg-color);
    --bs-btn-border-color: var(--ncalendar-bg-color);
    --bs-btn-hover-color: var(--ncalendar-btn-color);
    --bs-btn-hover-bg: var(--ncalendar-btn-hover-bg);
    --bs-btn-hover-border-color: var(--ncalendar-btn-hover-bg);
    --bs-btn-focus-shadow-rgb: var(--ncalendar-btn-focus-shadow-rgb);
    --bs-btn-active-color: var(--ncalendar-btn-color);
    --bs-btn-active-bg: var(--ncalendar-btn-hover-bg);
    --bs-btn-active-border-color: var(--ncalendar-btn-hover-bg);
    --bs-btn-active-shadow: inset 0 3px 5px var(--ncalendar-btn-active-shadow);
    --bs-btn-disabled-color: var(--ncalendar-btn-color);
    --bs-btn-disabled-bg: var(--ncalendar-bg-color);
    --bs-btn-disabled-border-color: var(--ncalendar-bg-color);
}

.btn-outline-ncalendar {
    --bs-btn-color: var(--ncalendar-bg-color);
    --bs-btn-border-color: var(--ncalendar-bg-color);
    --bs-btn-hover-color: var(--ncalendar-btn-color);
    --bs-btn-hover-bg: var(--ncalendar-bg-color);
    --bs-btn-hover-border-color: var(--ncalendar-bg-color);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: var(--ncalendar-btn-color);
    --bs-btn-active-bg: var(--ncalendar-bg-color);
    --bs-btn-active-border-color: var(--ncalendar-bg-color);
    --bs-btn-active-shadow: inset 0 3px 5px var(--ncalendar-btn-active-shadow);
    --bs-btn-disabled-color: var(--ncalendar-bg-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ncalendar-bg-color);
    --bs-gradient: none;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--ncalendar-nav-tabs-link-active-color-light) !important;
    background-color: var(--bs-body-bg);
    border-color: var(--ncalendar-nav-tabs-link-active-border-color-light);
}

[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link,
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--ncalendar-nav-tabs-link-active-color-dark) !important;
    background-color: var(--bs-body-bg);
    border-color: var(--ncalendar-nav-tabs-link-active-border-color-dark);
}

[data-bs-theme="dark"] .choices__inner {
    background-color: var(--ncalendar-choices-inner-bg-dark-color) !important;
    border: 1px solid var(--ncalendar-choices-inner-bg-dark-border) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown {
    background-color: var(--ncalendar-choices-inner-bg-dark-color) !important;
    border: 1px solid var(--ncalendar-choices-inner-bg-dark-border) !important;
}

[data-bs-theme="dark"] .choices__input--cloned {
    background-color: var(--ncalendar-choices-inner-bg-dark-color) !important;
}

.choices__list--multiple .choices__item {
    background-color: var(--ncalendar-choices-bg-color) !important;
    border: 1px solid var(--ncalendar-choices-border-color) !important;
}
.choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button {
    border-left: 1px solid var(--ncalendar-choices-border-color) !important;
}

.nav-link {
    color: var(--ncalendar-nav-tabs-link-color-light); 
}

.nav-link:hover {
    color: var(--ncalendar-nav-tabs-link-hover-color-light); 
}

a {
    color: rgba(var(--ncalenadar-link-color-rgb),var(--bs-link-opacity,1));
}

a.nav-link {
    color: var(--ncalendar-bg-color);
}

a.nav-link:hover {
    color: var(--ncalendar-nav-link-hover-color);
}

.pill-text {
    vertical-align: middle;
}

.custom-alertpopover {
    --bs-popover-border-color: rgb(var(--ncalendar-custom-popover-alert-color-rgb));
    --bs-popover-header-bg: rgb(var(--ncalendar-custom-popover-alert-color-rgb));
    --bs-popover-header-color: var(--ncalendar-custom-popover-alertheader-color-rgb);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}

.custom-successpopover {
    --bs-popover-border-color: rgb(var(--ncalendar-custom-popover-success-color-rgb));
    --bs-popover-header-bg: rgb(var(--ncalendar-custom-popover-success-color-rgb));
    --bs-popover-header-color: var(--ncalendar-custom-popover-alertheader-color-rgb);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}

.custom-warningpopover {
    --bs-popover-border-color: rgb(var(--ncalendar-custom-popover-warning-color-rgb));
    --bs-popover-header-bg: rgb(var(--ncalendar-custom-popover-warning-color-rgb));
    --bs-popover-header-color: var(--ncalendar-custom-popover-warningheader-color-rgb);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}

.invalid-select {
    border: 2px solid rgb(var(--ncalendar-invalidTableSelect-color-rgb));
    outline: none;
}
  
.invalid-shift-popup {
    display: none;
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(var(--ncalendar-invalidShiftPopup-color-rgba));
    color: var(--ncalendar-choices-inner-bg-light-color); 
    padding: 10px;
    border-radius: 5px;
    z-index: 9999;
    font-size: 16px;
}

.user-avatar {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background-color: var(--ncalendar-bg-color); 
    color: var(--ncalendar-choices-inner-bg-light-color);
    border-radius: 50%;
}
.avatar-container {
    padding-top: 20px;
}

.avatar-lg {
    font-size: 32px; 
    width: 50px; 
    height: 50px; 
    background-color: var(--ncalendar-bg-color); 
    color: var(--ncalendar-choices-inner-bg-light-color); 
    border-radius: 50%; 
    margin: 0 auto; 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.user-details {
    padding-top: 10px;
}

.code-container {
    margin-left: 0.5%;
    margin-right: 0.5%;
    gap: 2.5%;
}

.code-input:focus {
    border-color: var(--ncalendar-forgotpwd-code-input-color); 
    box-shadow: 0 0 5px rgba(var(--ncalendar-forgotpwd-code-boxshadow-color-rgba));
}

.sticky-panel {
    position: sticky;
    top: 0;
}

.offcanvas {
    z-index: 1065 !important;
}

.offcanvas-backdrop {
    z-index: 1060 !important;
}

.upload-section {
    max-width: 310px;
    margin: auto;
}

.upload-section form {
    border: 2px dashed var(--ncalendar-upload-section-form-color);
    height: 160px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 1rem 0;
    position: relative;
}

.upload-section form :where(svg, p) {
    color: var(--ncalendar-upload-section-form-color);
    fill: var(--ncalendar-upload-section-form-color);
}

.upload-section form svg {
    height: 36px;
    width: 36px;
}

.upload-section form :where(p) {
    font-size: 16px;
}

.upload-section section .progress-row {
    background-color: var(--ncalendar-uploadSection-progress-row-color);
    margin-bottom: 10px;
    list-style: none;
    padding: 15px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upload-section section .progress-row svg {
    font-size: 26px;
    fill: var(--ncalendar-progressBar-color);
}

.upload-section section .progress-row span {
    font-size: 14px;
}

.upload-section section .progress-row .progress-content {
    width: 100%;
}

.upload-section section .progress-details span {
    font-size: 14px;
}

.progress-area .progress-content {
    width: 100%;
    margin-left: 1rem;
}

.progress-area .progress-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.uploaded-area .progress-row .progress-details {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
}

.progress-area .progress-bar {
    height: 6px;
    width: 100%;
    background: var(--ncalendar-btn-color);
    margin-top: 4px;
    margin-bottom: 4px;
    border-radius: 30px;
}

.progress-area .progress {
    height: 100%;
    width: 0%;
    background: var(--ncalendar-progressBar-color);
    border-radius: inherit;
}


.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 75%;
}

.icon-center {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.icon-end {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    cursor: default;
    margin-left: 0.5rem;
}

.icon-end-title {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    cursor: default;
    margin-left: 0.5rem;
}

.delete-icon {
    fill: var(--error-color);
    cursor: pointer;
}

.delete-icon-disabled {
    fill: var(--error-color);
    cursor: none;
}

.message-delete-icon {
    fill: var(--error-color);
    cursor: none;
}

.mentor-config {
    fill: var(--ncalendar-icon-primary-color);
    cursor: pointer;
}

.mentor-config-disabled {
    fill: var(--ncalendar-icon-primary-color);
    pointer-events: none;
}

.mentor-remove {
    fill: var(--ncalendar-icon-remove-primary-color);
    cursor: pointer;
}

.plan-mentor-config {
    fill:var(--ncalendar-icon-primary-color);
    cursor: pointer;
}

.plan-mentor-config-disabled {
    fill: var(--ncalendar-icon-primary-color);
    pointer-events: none;
}

.plan-mentor-remove {
    fill: var(--ncalendar-icon-remove-primary-color);
    cursor: pointer;
}

.edit-icon {
    fill: rgb(207, 207, 76);
    cursor: pointer;
}

.account-icon {
    fill:var(--ncalendar-icon-primary-color);
    cursor: pointer;
}

.accountdisabled-icon {
    fill:var(--ncalendar-icon-primary-color);
    opacity: 0.5;
    pointer-events: none;
}

.resetpass-icon {
    fill:var(--ncalendar-icon-primary-color);
    cursor: pointer;
}

.resetpassdisabled-icon {
    fill:var(--ncalendar-icon-primary-color);
    opacity: 0.5;
    pointer-events: none;
}

.mail-icon {
    fill:var(--ncalendar-icon-primary-color);
    cursor: pointer;
}

.shiftplan-icon {
    fill:var(--ncalendar-icon-primary-color);
    cursor: pointer;
}

.shiftdetails-icon {
    fill:var(--ncalendar-icon-primary-color);
    cursor: pointer;
}

.sent-icon {
    fill:#198754;
    cursor: pointer;
}

.calendarView-icon {
    fill:var(--ncalendar-icon-primary-color);
    cursor: pointer;
}

.calendarViewDisabled-icon {
    fill: var(--ncalendar-calendar-regular-color);
    cursor: none;
}

.calendarAccept-icon {
    fill:var(--success-color);
    cursor: pointer;
}

.calendarReject-icon {
    fill: var(--error-color);
    cursor: pointer;
}

.hidden {
    display: none;
}

.success-message {
    color: rgb(var(--ncalendar-message-success-color-rgb));
}

.error-message {
    color: rgb(var(--ncalendar-message-error-color-rgb));
}

.loading-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(var(--ncalendar-loading-modal-bg-dark-rgba));
    background-image: url('../img/spinner/engine-loading-blue.gif');
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.list-group-item.tutorial.hidden {
    display: none !important;
}

.tooltip-inner {
    background-color: var(--ncalendar-icon-tooltip-color) !important;
    color: var(--ncalendar-text-color) !important;
}

.title-tooltip-inner {
    background-color: var(--ncalendar-icon-tooltip-color) !important;
    color: var(--ncalendar-text-color) !important;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--ncalendar-icon-tooltip-color);  
}

.bs-tooltip-auto[data-popper-placement^=right] .title-tooltip-arrow::before {
    border-top-color: var(--ncalendar-icon-tooltip-color);  
}

table {
    position: relative;
}

thead {
    position: sticky;
    top: 0;
}

html, body {
    height: 100%; /* Ensure the page takes full height */
    margin: 0;    /* Remove default margin */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

main {
    flex: 1; /* Take up remaining space between header and footer */
    overflow-y: auto; /* Allow scrolling if content overflows */
}

[data-bs-theme="dark"] footer {
    flex-shrink: 0; /* Prevent the footer from shrinking */
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important;
    padding: 1px 0; /* Optional: padding */
    text-align: center;
}

footer {
    flex-shrink: 0; /* Prevent the footer from shrinking */
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important;
    padding: 1px 0; /* Optional: padding */
    text-align: center;
}

body.loading .loading-modal {
    overflow: hidden;   
}

body.loading .loading-modal {
    display: block;
}

img, svg{
    vertical-align: text-top;
}

[data-bs-theme="dark"] #loginCardArea, #unauthorizedCardArea {
    background-color: rgb(var(--ncalendar-login-area-card-bg-dark-rgb));
}

#loginCardArea, #unauthorizedCardArea {
    background-color: rgb(var(--ncalendar-login-area-card-bg-light-rgb));
}

[data-bs-theme="dark"] #appSidebar-area {
    background-color: rgb(var(--ncalendar-sideBar-bg-dark-color-rgb));
    position: relative;
}

[data-bs-theme="dark"] #cardBody1_dashComp1, #cardBody1_dashComp2, #cardBody1_dashComp3 {
    background-color: rgb(var(--ncalendar-login-area-card-bg-dark-rgb));
}

#appSidebar-area {
    background-color: rgb(var(--ncalendar-sideBar-bg-light-color-rgb));
    position: relative;
}

[data-bs-theme="dark"] #appUserInterface-area {
    background-color: rgb(var(--ncalendar-userinterface-dark-bg-color-rgb));
}

#appUserInterface-area{
    background-color: rgb(var(--ncalendar-userinterface-light-bg-color-rgb));
}

#table1_dashComp2_wrapper, #table1_dashComp3_wrapper, #savedTable-wrapper, #savedDataTable1_wrapper {
    overflow-x: auto;
}

#table1_dashComp2_filter, #table1_dashComp3_filter {
    margin-right: 0.1%;
}

#planViewTable_wrapper {
    overflow-x: auto;
    overflow-y: auto;
}

#uploadInput {
    opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

#uploadPreInput {
    opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

#appSB-uploadPreList svg path {
    fill: var(--ncalendar-uploadPreList-svg-color);
    color: var(--ncalendar-uploadPreList-svg-color);
}

#appSB-uploadPreList:hover svg path {
    fill: var(--ncalendar-uploadPreList-svghover-color);
    color: var(--ncalendar-uploadPreList-svghover-color);
}

#engineHandlerModal thead {
    top: -17.25px;
}

#appSavedSchemaModal thead {
    top: -17.25px;
}

#changeHandlerModal thead {
    top: -17.25px !important;
}

#publishHandlerModal thead {
    top: -17.25px;
}

#publishRemoteHandlerModal thead {
    top: -17.25px;
}

#extractAllButton {
    white-space: nowrap;
}

#engineDataResulSave, #extractAllButton {
    width: 10rem;
}

#tutorialVideoList {
    max-height: 410px;
    overflow-y: auto;
}

#staffSelectionList {
    max-height: 455px;
    overflow-y: auto;
}

#publishUpdateCalendarView {
    height: 650px;
}

@media (max-width: 1020px) {
    #loginMainRow, #unauthMainRow, #resetPwdWToken {
        margin: 10% 5% 10% 5%;
    }
    #appLogin-Logo {
        width: 85%;
    }
    #appSidebar-area {
        width: 100%;
    }
    #appUserInterface-area {
        width: 100%;
    }
    #appSB-datepickerClear {
        height: 2.90rem;
    }
    /* #appSB-uploadPreList {
        height: 2.90rem;
    } */
    #appUserInterface-areaContent, #shiftTable, #appTabContent {
        margin: 0% 2.5% 0% 2.5%;
    }
    #appSidebar-areaContent {
        margin: 5% 2.5% 5% 2.5%;
    }
    #appUserInterface-area{
        padding-bottom: 5%;
    }
    #appUserInterface-titleContent {
        margin: 5% 2.5% 0% 2.5%;
    }
    #appUI-CoverAreaWarn {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    #mainTab1, #mainTab2, #mainTab3, #mainTab4, #mainTab5 {
        overflow-x: auto;
    }
    #cardBody1_dashComp2, #cardBody1_dashComp3 {
        overflow-x: auto;
        padding-top: 2.5%;
        padding-bottom: 2.5%;
        padding-right: 2.5%;
        padding-left: 2.5%;
    }
    #table1_dashComp2_filter, #table1_dashComp3_filter {
        margin-bottom: 2.5%;
    }
    #modalTab1, #modalTab2, #modalTab3, #modalTab4, #modalTab5 {
        overflow-x: auto;
    }
    #publishRemoteTab1, #publishRemoteTab2, #publishRemoteTab3, #publishRemoteTab4, #publishRemoteTab5 {
        overflow-x: auto;
    }
    #appSB-upload-inputDiv {
        justify-content: end;
    }
    #appSB-modelSaveSendGrid{
        display: grid;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-top: 2.5%;
        margin-bottom: 7.5%;
    }
    #appCreatAllErrorModalFooter {
        display: grid;
        grid-template-rows: 50% 50%;
        grid-template-columns: 100%;
        row-gap: 5%;
    }
    #engineHandlerActionGrid {
        display: grid;
        grid-template-rows: 70% 30%;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 2.5%;
    }
    #publishHandlerActionGrid {
        display: grid;
        grid-template-rows: 40% 50%;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 2.5%;
    }

    #savedHandlerActionGrid{
        display: grid;
        grid-template-columns: 100%;
        row-gap: 20%;
        margin-bottom: 15%;
    }
    #savedHandlerExtractContent{
        margin-top: 5%;
    }

    #engineHandlerActionContent {
        display: grid;
        grid-template-rows: 50% 50%;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 1.5%;
    }
    #savedSchemaSelectorGrid {
        width: 100%;
    }
    #savedTableGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 2.5%;
        margin-bottom: 2.5%;
    }
    #savedTableGridItem {
        margin-top: 20%;
    }
    #appStaffUpload-Sidebar {
        width: 100%;
    }
    #appStaffUpload-StaffInfo {
        width: 100%;
    }
    #staffListTitle {
        margin-top: 5%;
    }
    #appStaffUpload-SidebarContent, #appStaffUpload-StaffInfoContent { 
        margin: 0% 2.5% 0% 2.5%;
    }
    #userTableContent {
        overflow-x: auto;
    }
    #staffPropertiesGrid {
        margin-top: 2.5%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 20% 20% 20% 20% 20%;
        grid-row-gap: 10%;
    }
    #staffPropertiesActions {
        margin-top: 25%;
    }
    #userTableContent {
        margin-top: 2%;
    }
    #signupContent, #resetPasswordContent {
        margin: 10% 5% 10% 5%;
    }
    #remoteMngtContent, #parametersAreaContent, #customDaysAreaContent, #shiftMngtAreaContent, #forgotPasswordCarouselContent {
        width: 95.34%;
        margin-top: 1.1%;
        margin-left: 2.33%;
        margin-right: 2.33%;
        margin-bottom: 1.1%;
    }
    #dashContent, #reportingContent {
        width: 95.34%;
        margin-top: 1.1%;
        margin-left: 2.33%;
        margin-right: 2.33%;
        margin-bottom: 5.5%;
    }
    .code-input {
        width: 35px;
        height: 50px;
        text-align: center;
        font-size: 18px;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
        margin: 0 5px;
    }
    #wardTabPropertiesGrid, #cycleTabPropertiesGrid, #criteriaTabPropertiesGrid, 
    #xLevelTabPropertiesGrid, #speCasesTabPropertiesGrid, #speCaseShiftsTabPropertiesGrid,
    #engineOutputTabPropertiesGrid, #shiftsTabPropertiesGrid, #modulesTabPropertiesGrid,
    #initialAccessTabPropertiesGrid, #dashViewsTabPropertiesGrid, #reportingRefTabPropertiesGrid,
    #customLimitTabPropertiesGrid, #customTimeLimitTabPropertiesGrid, #countryTabPropertiesGrid, 
    #langTabPropertiesGrid, #tutorialLinksTabPropertiesGrid, #engineResponseTabPropertiesGrid, #sampleStaffListTabPropertiesGrid,
    #webUsersTabPropertiesGrid, #reportingStructureTabPropertiesGrid {
        margin-top: 2.5%;
        display: grid;
        height:max-content;
        grid-template-columns: 100%;
        grid-auto-rows: max-content;
        row-gap: 5%;
    }
    #wardFormMessageContent, #cycleFormMessageContent, #criteriaFormMessageContent,
    #xLevelFormMessageContent, #speCasesFormMessageContent, #speCaseShiftsFormMessageContent,
    #engineOutputFormMessageContent, #shiftsFormMessageContent, #modulesFormMessageContent,
    #credentialsFormMessageContent, #initialAccessFormMessageContent, #dashViewsFormMessageContent,
    #reportingRefFormMessageContent, #customLimitFormMessageContent, #customTimeLimitFormMessageContent, 
    #countryFormMessageContent, #langFormMessageContent, #tutorialLinksFormMessageContent, 
    #engineResponseFormMessageContent, #sampleStaffListFormMessageContent, #webUsersFormMessageContent,
    #reportingStructureFormMessageContent {
        margin-top: 25%;
    }
    #wardTableContent, #cycleTableContent, #criteriaTableContent, 
    #xLevelTableContent, #speCasesTableContent, #speCaseShiftsTableContent,
    #engineOutputTableContent, #shiftsTableContent, #modulesTableContent,
    #credentialsTableContent, #initialAccessTableContent, #dashViewsTableContent, 
    #reportingRefTableContent, #customLimitTableContent, #customTimeLimitTableConten, 
    #countryTableContent, #langTableContent, #tutorialLinksTableContent, 
    #engineResponseTableContent, #sampleStaffListTableContent, #webUsersTableContent, 
    #webUserlogsTableContent, #reportingPermTableContent, #reportingStructureTableContent {
        overflow-x: auto;
    }
    #dashCredsTabPropertiesGrid, #reportingPermTabPropertiesGrid {
        margin-top: 2.5%;
        padding-bottom: 35%;
        display: grid;
        height:max-content;
        grid-template-columns: 100%;
        grid-auto-rows: max-content;
        row-gap: 5%;
    }
    #dashCredsTableContent {
        overflow-x: auto;
    }
    #dashCredsFormMessage {
        margin-top: 25%;
    }
    #hospitalTabPropertiesGrid, #miscTabPropertiesGrid {
        margin-top: 2.5%;
        display: grid;
        height:max-content;
        grid-template-columns: 100%;
        grid-auto-rows: max-content;
        row-gap: 5%;
    }
    #hospitalFormMessageContent, #miscFormMessageContent {
        margin-top: 15%;
    }
    #hospitalTableContent, #miscTableContent {
        overflow-x: auto;
    }
    #mailDomainTabPropertiesGrid {
        margin-top: 2.5%;
        display: grid;
        height:max-content;
        grid-template-columns: 100%;
        grid-auto-rows: max-content;
        row-gap: 7.5%;
    }
    #mailDomainFormMessageContent {
        margin-top: 12.5%;
    }
    #dashCredsFormMessageContent, #reportingPermFormMessageContent {
        margin-top: 12.5%;
    }
    #miscFormMessageContent {
        margin-top: 12.5%;
    }
    #mailDomainTableContent {
        overflow-x: auto;
    }
    #countrySelectGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 5%;
        margin-bottom: 25%;
    }
    #countryFormMessageContent{
        margin-bottom: 1.4%;
    }
    #calendarTableContent {
        overflow-x: auto;
    }
    #customDaySelectGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 5%;
        margin-bottom: 25%;
    }
    #customDateFormMessageContent{
        margin-bottom: 1.4%;
    }
    #customDateTableContent {
        overflow-x: auto;
    }
    #schemaUpdateTableContent {
        overflow-x: auto;
    }
    #assignmentSelectGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 25%;
    }
    #respAssgnTableContent {
        overflow-x: auto;
    }
    #commsSelectGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 20%;
    }
    #commsButtonsGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 25%;
    }
    #commsTableView {
        overflow-x: auto;
    }
    #commsCardView {
        overflow-x: auto;
    }
    #commsUI-CoverAreaContent {
        margin-bottom: 10%;
    }
    #publish-mngtSelectGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 5%;
        margin-bottom: 25%;
    }
    #filter_dashComp1 {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 10%;
        margin-bottom: 17.5%;
    }
    #filter_dashComp2 {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 22.5%;
        margin-bottom: 11.5%;
    }
    #filter_dashComp3 {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 17.5%;
    }
    #publishUpdateTableContent {
        overflow-x: auto;
    }
    #plannerChangeTableContent {
        overflow-x: auto;
    }
    #dashViewGrid, #reportingViewGrid {
        width: 100%;
        margin-bottom: 5%;
    }
    #visuals_dashComp1, #visuals_dashComp2, #visuals_dashComp3 {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 2.5%;
        margin-bottom: 10%;
    }
    #remoteChangeTableContent {
        overflow-x: auto;
    }
    #remoteReqMngtSelectGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 25%;
    }
    #remotePubMngtSelectGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 25%;
    }
    #remoteChaMngtSelectGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 25%;
    }
    #remotePublishedTableContent {
        overflow-x: auto;
    }
    #remoteCalendarViewSelectGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 15%;
        margin-bottom: 5%;
    }
    #remoteCalendarViewListGrid {
        display: grid;
        grid-template-columns: 100%;
        row-gap: 2.5%;
        margin-bottom: 15%;
    }
    #calendarShiftView {
        height: 500px;
    }
    #publishChangeCalendarView {
        height: 500px;
    }
}

@media (min-width: 1020px) {
    #loginMainRow {
        margin: 5% 32.5% 5% 32.5%;
    }
    #resetPwdWToken, #unauthMainRow { 
        margin: 5% 25% 5% 25%;
    }
    #appLogin-Logo {
        width: 75%;
    }
    #appSidebar-area {
        width: 25%;
    }
    #appUserInterface-area {
        width: 75%;
    }
    #appSidebar-areaContent {
        margin-bottom: 5%;
    }
    #appSB-InputGroupGrid {
        display: grid;
        grid-template-columns: 45% 27% 26%;
        column-gap: 1.4%;
    }
    #appSB-modelSaveSendGrid{
        display: grid;
        grid-template-columns: 24.5% 50% 22%;
        column-gap: 1rem;
        margin-bottom: 2.5%;
    }
    /* #appSB-uploadPreList {
        height: 2.90rem;
    } */
    #appUI-CoverAreaWarn {
        margin-top: 5%;
    }
    #engineHandlerActionGrid {
        display: grid;
        grid-template-columns:70% 30%;
    }
    #publishHandlerActionGrid {
        display: grid;
        grid-template-columns:40% 60%;
    }
    #engineHandlerActionContent {
        display: grid;
        grid-template-columns:57% 43%;
        column-gap: 1rem;
    }
    #engineHandlerModalFooter, #publishHandlerModalFooter, #appSavedSchemaModalFooter {
        display: inline !important;
    }
    #savedSchemaSelectorGrid {
        width: 45%;
    }
    #savedTableGrid {
        display: grid;
        grid-template-columns: 21.8% 31.8% 44%;
        column-gap: 1.2%;
        margin-bottom: 1.2%;
    }
    #appStaffUpload-Sidebar {
        width: 33.33%;
    }
    #appStaffUpload-StaffInfo {
        width: 66.67%;
    }
    #appTabContent {
        overflow-x: auto;
    }
    #staffPropertiesGrid {
        margin-top: 1.75%;
        display: grid;
        grid-template-columns: 31.5% 31.5% 32.5%;
        grid-row-gap: 20%;
        grid-column-gap: 2.5%;
    }
    #staffPropertiesActions {
        margin-top: 1.75%;
    }
    #staffPropertiesActionButtons {
        margin-bottom: 1.75%;
    }
    #signupContent {
        margin: 7.5% 35% 7.5% 35%;
    }
    #remoteMngtContent, #parametersAreaContent, #customDaysAreaContent, 
    #shiftMngtAreaContent, #dashContent, #reportingContent {
        width: 83.33%;
        margin-top: 1.1%;
        margin-left: 8.33%;
        margin-right: 8.33%;
        margin-bottom: 1.1%;
    }
    #forgotPasswordCarouselContent {
        margin-top: 1.5%;
        margin-left: 4.33%;
        margin-right: 4.33%;
        margin-bottom: 3%;
    }
    .code-input {
        width: 50px;
        height: 60px;
        text-align: center;
        font-size: 24px;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
        margin: 0 5px;
    }
    #resetPasswordContent {
        margin: 10% 32.5% 10% 32.5%;
    }
    #wardTabPropertiesGrid, #cycleTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 23% 23% 8.5%;
        column-gap: 2%;
    }
    #initialAccessTabPropertiesGrid, #customLimitTabPropertiesGrid, #customTimeLimitTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 2%;
    }
    #xLevelTabPropertiesGrid, #speCaseShiftsTabPropertiesGrid, #modulesTabPropertiesGrid,
    #dashViewsTabPropertiesGrid, #reportingRefTabPropertiesGrid, #countryTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        column-gap: 2%;
    }
    #reportingStructureTableContent {
        overflow-x: auto;
    }
    #reportingStructureTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto auto;
        column-gap: 2%;
        row-gap: 10%;
        padding-bottom: 2%;
    }
    #shiftsTabPropertiesGrid, #credentialsTabPropertiesGrid, #langTabPropertiesGrid,
    #engineResponseTabPropertiesGrid, #webUsersTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #criteriaTabPropertiesGrid, #engineOutputTabPropertiesGrid, #tutorialLinksTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #speCasesTabPropertiesGrid, #sampleStaffListTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #wardFormMessageContent, #cycleFormMessageContent, #criteriaFormMessageContent,
    #xLevelFormMessageContent, #speCasesFormMessageContent, #speCaseShiftsFormMessageContent,
    #engineOutputFormMessageContent, #shiftsFormMessageContent, #modulesFormMessageContent,
    #credentialsFormMessageContent, #initialAccessFormMessageContent, #dashViewsFormMessageContent,
    #reportingRefFormMessageContent, #customLimitFormMessageContent, #customTimeLimitFormMessageContent, 
    #countryFormMessageContent, #langFormMessageContent, #tutorialLinksFormMessageContent, 
    #engineResponseFormMessageContent, #sampleStaffListFormMessageContent, #webUsersFormMessageContent,
    #reportingStructureFormMessageContent {
        margin-top: 1.5%;
    }
    #dashCredsTabPropertiesGrid, #reportingPermTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 12% 12% 20% 20% 12% 11.5%;
        column-gap: 2%;
    }
    #dashCredsFormMessage {
        margin-top: 1.5%;
    }
    #hospitalTabPropertiesGrid, #miscTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 23% 8.5%;
        column-gap: 2%;
    }
    #hospitalFormMessageContent, #miscFormMessageContent {
        margin-top: 1.5%;
    }
    #mailDomainTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 8.5%;
        column-gap: 2%;
    }
    #mailDomainFormMessageContent {
        margin-top: 1.5%;
    }
    #dashCredsFormMessageContent, #reportingPermFormMessageContent {
        margin-top: 1.5%;
    }
    #miscFormMessageContent {
        margin-top: 1.5%;
    }
    #countrySelectGrid {
        display: grid;
        grid-template-columns: 23.5% 15% 15% 15% 20%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #countryFormMessageContent{
        margin-bottom: 1.4%;
    }
    #customDaySelectGrid {
        display: grid;
        grid-template-columns: 23.5% 15% 32% 23.5%;
        column-gap: 2%;
        row-gap: 16%;
        margin-bottom: 2.8%;
    }
    #customDateFormMessageContent{
        margin-bottom: 1.4%;
    }
    #assignmentSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 22.5% 22.5% 25.5%;
        column-gap: 2%;
        row-gap: 16%;
        margin-bottom: 1.4%;
    }
    #commsSelectGrid {
        display: grid;
        grid-template-columns: 22.5% 22.5% 51%;
        grid-template-rows: auto;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #commsButtonsGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
        grid-template-rows: auto;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #publish-mngtSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 17% 30%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #dashViewGrid, #reportingViewGrid {
        width: 50%;
        margin-bottom: 1.4%;
    }
    #filter_dashComp1 {
        display: grid;
        grid-template-columns: 50% 50%;
        row-gap: 20%;
        column-gap: 2%;
        margin-bottom: 3.5%;
    }
    #filter_dashComp2 {
        display: grid;
        grid-template-columns: 35% 32% 29%;
        column-gap: 2%;
        margin-bottom: 2.5%;
    }
    #filter_dashComp3 {
        display: grid;
        grid-template-columns: 46% 25% 25%;
        row-gap: 20%;
        column-gap: 2%;
        margin-bottom: 3.5%;
    }
    #visuals_dashComp1 {
        display: grid;
        grid-template-columns: 62.7% 17% 17.5%;
        grid-template-rows: 100%;
        column-gap: 1.4%;
    }
    #cardKPI1_dashComp1 {
        grid-column: 2;
        grid-row: 1;
    }
    #cardKPI2_dashComp1 {
        grid-column: 3;
        grid-row: 1;
    }
    #cardBody1_dashComp1, #cardBody1_dashComp2, #cardBody1_dashComp3 {
        padding-top: 1.4%;
        padding-bottom: 1.4%;
        padding-right: 1.4%;
        padding-left: 1.4%;
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    #remoteReqMngtSelectGrid {
        display: grid;
        grid-template-columns: 22% 26% 22% 24%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remotePubMngtSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 19%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteChaMngtSelectGrid {
        display: grid;
        grid-template-columns: 28.5% 28.5% 19%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteCalendarViewSelectGrid {
        display: grid;
        grid-template-columns: 32.5% 23.5%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteCalendarViewListGrid {
        display: grid;
        grid-template-columns: 70% 28%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
}


@media (min-width: 1400px) {
    #loginMainRow {
        margin: 5% 35% 5% 35%;
    }
    #resetPwdWToken, #unauthMainRow { 
        margin: 5% 32% 5% 32%;
    }
    #appLogin-Logo {
        width: 75%;
    }
    #appSidebar-area {
        width: 25%;
    }
    #appUserInterface-area {
        width: 75%;
    }
    #appSidebar-areaContent {
        margin-bottom: 5%;
    }
    #appSB-InputGroupGrid {
        display: grid;
        grid-template-columns: 40% 39% 18%;
        column-gap: 1.4%;
    }
    #appSB-modelSaveSendGrid{
        display: grid;
        grid-template-columns: 25% 50% 22%;
        column-gap: 1rem;
        margin-bottom: 2.5%;
    }
    /* #appSB-uploadPreList {
        height: 2.90rem;
    } */
    #appUI-CoverAreaWarn {
        margin-top: 5%;
    }
    #engineHandlerActionGrid, #savedHandlerActionGrid {
        display: grid;
        grid-template-columns:70% 30%;
    }
    #publishHandlerActionGrid {
        display: grid;
        grid-template-columns:40% 60%;
    }
    #engineHandlerActionContent {
        display: grid;
        grid-template-columns:57% 43%;
        column-gap: 1rem;
    }
    #savedHandlerActionContent {
        display: grid;
        grid-template-columns:50% 50%;
        column-gap: 1rem;
    }
    #engineHandlerModalFooter, #publishHandlerModalFooter, #appSavedSchemaModalFooter {
        display: inline !important;
    }
    #savedSchemaSelectorGrid {
        width: 45%;
    }
    #savedTableGrid {
        display: grid;
        grid-template-columns: 21.8% 31.8% 44%;
        column-gap: 1.2%;
        margin-bottom: 1.2%;
    }
    #appStaffUpload-Sidebar {
        width: 33.33%;
    }
    #appStaffUpload-StaffInfo {
        width: 66.67%;
    }
    #staffPropertiesGrid {
        margin-top: 1.75%;
        display: grid;
        grid-template-columns: 31.5% 31.5% 32.5%;
        grid-row-gap: 20%;
        grid-column-gap: 2.5%;
    }
    #staffPropertiesActions {
        margin-top: 1.75%;
    }
    #staffPropertiesActionButtons {
        margin-bottom: 1.75%;
    }
    #signupContent {
        margin: 7.5% 35% 7.5% 35%;
    }
    #remoteMngtContent, #parametersAreaContent, #customDaysAreaContent, 
    #shiftMngtAreaContent, #dashContent, #reportingContent {
        width: 83.33%;
        margin-top: 1.1%;
        margin-left: 8.33%;
        margin-right: 8.33%;
        margin-bottom: 1.1%;
    }
    #forgotPasswordCarouselContent {
        margin-top: 1.5%;
        margin-left: 4.33%;
        margin-right: 4.33%;
        margin-bottom: 3%;
    }
    .code-input {
        width: 50px;
        height: 60px;
        text-align: center;
        font-size: 24px;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
        margin: 0 5px;
    }
    #resetPasswordContent {
        margin: 10% 35% 10% 35%;
    }
    #dashCredsTabPropertiesGrid, #reportingPermTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 12% 12% 20% 20% 12% 11.5%;
        column-gap: 2%;
    }
    #dashCredsFormMessage {
        margin-top: 1.5%;
    }
    #wardTabPropertiesGrid, #cycleTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 23% 23% 8.5%;
        column-gap: 2%;
    }
    #initialAccessTabPropertiesGrid, #customLimitTabPropertiesGrid, #customTimeLimitTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 2%;
    }
    #xLevelTabPropertiesGrid, #speCaseShiftsTabPropertiesGrid, #modulesTabPropertiesGrid,
    #dashViewsTabPropertiesGrid, #reportingRefTabPropertiesGrid, #countryTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        column-gap: 2%;
    }
    #reportingStructureTableContent {
        overflow-x: auto;
    }
    #reportingStructureTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto auto;
        column-gap: 2%;
        row-gap: 7.5%;
        padding-bottom: 2%;
    }
    #shiftsTabPropertiesGrid, #credentialsTabPropertiesGrid, #langTabPropertiesGrid,
    #engineResponseTabPropertiesGrid, #webUsersTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #criteriaTabPropertiesGrid, #engineOutputTabPropertiesGrid, #tutorialLinksTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #speCasesTabPropertiesGrid, #sampleStaffListTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #wardFormMessageContent, #cycleFormMessageContent, #criteriaFormMessageContent,
    #xLevelFormMessageContent, #speCasesFormMessageContent, #speCaseShiftsFormMessageContent,
    #engineOutputFormMessageContent, #shiftsFormMessageContent, #modulesFormMessageContent,
    #credentialsFormMessageContent, #initialAccessFormMessageContent, #dashViewsFormMessageContent, 
    #reportingRefFormMessageContent, #customLimitFormMessageContent, #customTimeLimitFormMessageContent, 
    #countryFormMessageContent, #langFormMessageContent, #tutorialLinksFormMessageContent, 
    #engineResponseFormMessageContent, #sampleStaffListFormMessageContent, #webUsersFormMessageContent,
    #reportingStructureFormMessageContent {
        margin-top: 1.5%;
    }
    #hospitalTabPropertiesGrid, #miscTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 23% 8.5%;
        column-gap: 2%;
    }
    #hospitalFormMessageContent, #miscFormMessageContent {
        margin-top: 1.5%;
    }
    #mailDomainTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 8.5%;
        column-gap: 2%;
    }
    #mailDomainFormMessageContent {
        margin-top: 1.5%;
    }
    #dashCredsFormMessageContent, #reportingPermFormMessageContent {
        margin-top: 1.5%;
    }
    #miscFormMessageContent {
        margin-top: 1.5%;
    }
    #countrySelectGrid {
        display: grid;
        grid-template-columns: 23.5% 15% 15% 15% 20%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #countryFormMessageContent{
        margin-bottom: 1.4%;
    }
    #customDaySelectGrid {
        display: grid;
        grid-template-columns: 23.5% 15% 32% 23.5%;
        column-gap: 2%;
        row-gap: 16%;
        margin-bottom: 2.8%;
    }
    #customDateFormMessageContent{
        margin-bottom: 1.4%;
    }
    #assignmentSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
        column-gap: 2%;
        row-gap: 16%;
        margin-bottom: 1.4%;
    }
    #commsSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 49%;
        grid-template-rows: auto;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #commsButtonsGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
        grid-template-rows: auto;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #publish-mngtSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 15% 25%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #dashViewGrid, #reportingViewGrid {
        width: 40%;
        margin-bottom: 1.4%;
    }
    #filter_dashComp1 {
        display: grid;
        grid-template-columns: 20% 28.5% 29% 17%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #filter_dashComp2 {
        display: grid;
        grid-template-columns: 32% 32% 32%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #filter_dashComp3 {
        display: grid;
        grid-template-columns: 35% 17% 17% 25%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #visuals_dashComp1 {
        display: grid;
        grid-template-columns: 62.7% 17% 17.5%;
        grid-template-rows: 100%;
        column-gap: 1.4%;
    }
    #cardKPI1_dashComp1 {
        grid-column: 2;
        grid-row: 1;
    }
    #cardKPI2_dashComp1 {
        grid-column: 3;
        grid-row: 1;
    }
    #cardBody1_dashComp1, #cardBody1_dashComp2, #cardBody1_dashComp3 {
        padding-top: 1.4%;
        padding-bottom: 1.4%;
        padding-right: 1.4%;
        padding-left: 1.4%;
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    #remoteReqMngtSelectGrid {
        display: grid;
        grid-template-columns: 29% 20% 23.5% 21.5%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remotePubMngtSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 15%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteChaMngtSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 15%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteCalendarViewSelectGrid {
        display: grid;
        grid-template-columns: 28.5% 23.5%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteCalendarViewListGrid {
        display: grid;
        grid-template-columns: 70% 28%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
}

@media (min-width: 1500px) {
    #loginMainRow {
        margin: 5% 37.5% 5% 37.5%;
    }
    #resetPwdWToken, #unauthMainRow { 
        margin: 5% 34% 5% 34%;
    }
    #appLogin-Logo {
        width: 75%;
    }
    #appSidebar-area {
        width: 22.5%;
    }
    #appUserInterface-area {
        width: 77.5%;
    }
    #appSidebar-areaContent {
        margin-bottom: 5%;
    }
    #appSB-InputGroupGrid {
        display: grid;
        grid-template-columns: 40% 35% 20%;
        column-gap: 1rem;
    }
    #appSB-modelSaveSendGrid{
        display: grid;
        grid-template-columns: 25% 50% 22%;
        column-gap: 1rem;
        margin-bottom: 2.5%;
    }
    /* #appSB-uploadPreList {
        height: 2.90rem;
    } */
    #appUI-CoverAreaWarn {
        margin-top: 5%;
    }
    #engineHandlerActionGrid {
        display: grid;
        grid-template-columns:70% 30%;
    }
    #publishHandlerActionGrid {
        display: grid;
        grid-template-columns:40% 60%;
    }
    #engineHandlerActionContent {
        display: grid;
        grid-template-columns:57% 43%;
        column-gap: 1rem;
    }
    #engineHandlerModalFooter, #publishHandlerModalFooter, #appSavedSchemaModalFooter {
        display: inline !important;
    }
    #savedSchemaSelectorGrid {
        width: 45%;
    }
    #savedTableGrid {
        display: grid;
        grid-template-columns: 21.8% 31.8% 44%;
        column-gap: 1.2%;
        margin-bottom: 1.2%;
    }
    #appStaffUpload-Sidebar {
        width: 33.33%;
    }
    #appStaffUpload-StaffInfo {
        width: 66.67%;
    }
    #staffPropertiesGrid {
        margin-top: 1.75%;
        display: grid;
        grid-template-columns: 31.5% 31.5% 32.5%;
        grid-row-gap: 20%;
        grid-column-gap: 2.5%;
    }
    #staffPropertiesActions {
        margin-top: 1.75%;
    }
    #staffPropertiesActionButtons {
        margin-bottom: 1.75%;
    }
    #signupContent {
        margin: 7.5% 35% 7.5% 35%;
    }
    #remoteMngtContent, #parametersAreaContent, #customDaysAreaContent, 
    #shiftMngtAreaContent, #dashContent, #reportingContent {
        width: 83.33%;
        margin-top: 1.1%;
        margin-left: 8.33%;
        margin-right: 8.33%;
        margin-bottom: 1.1%;
    }
    #forgotPasswordCarouselContent {
        margin-top: 1.5%;
        margin-left: 4.33%;
        margin-right: 4.33%;
        margin-bottom: 3%;
    }
    .code-input {
        width: 50px;
        height: 60px;
        text-align: center;
        font-size: 24px;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
        margin: 0 5px;
    }
    #resetPasswordContent {
        margin: 10% 35% 10% 35%;
    }
    #dashCredsTabPropertiesGrid, #reportingPermTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 12% 12% 20% 20% 12% 11.5%;
        column-gap: 2%;
    }
    #dashCredsFormMessage {
        margin-top: 1.5%;
    }
    #wardTabPropertiesGrid, #cycleTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 23% 23% 8.5%;
        column-gap: 2%;
    }
    #initialAccessTabPropertiesGrid, #customLimitTabPropertiesGrid, #customTimeLimitTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 2%;
    }
    #xLevelTabPropertiesGrid, #speCaseShiftsTabPropertiesGrid, #modulesTabPropertiesGrid,
    #dashViewsTabPropertiesGrid, #reportingRefTabPropertiesGrid, #countryTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        column-gap: 2%;
    }
    #reportingStructureTableContent {
        overflow-x: auto;
    }
    #reportingStructureTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto auto;
        column-gap: 2%;
        row-gap: 5%;
        padding-bottom: 2%;
    }
    #shiftsTabPropertiesGrid, #credentialsTabPropertiesGrid, #langTabPropertiesGrid,
    #engineResponseTabPropertiesGrid, #webUsersTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #criteriaTabPropertiesGrid, #engineOutputTabPropertiesGrid, #tutorialLinksTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #speCasesTabPropertiesGrid, #sampleStaffListTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #wardFormMessageContent, #cycleFormMessageContent, #criteriaFormMessageContent,
    #xLevelFormMessageContent, #speCasesFormMessageContent, #speCaseShiftsFormMessageContent,
    #engineOutputFormMessageContent, #shiftsFormMessageContent, #modulesFormMessageContent,
    #credentialsFormMessageContent, #initialAccessFormMessageContent, #dashViewsFormMessageContent,
    #reportingRefFormMessageContent, #customLimitFormMessageContent, #customTimeLimitFormMessageContent, 
    #countryFormMessageContent, #langFormMessageContent, #tutorialLinksFormMessageContent, 
    #engineResponseFormMessageContent, #sampleStaffListFormMessageContent, #webUsersFormMessageContent,
    #reportingStructureFormMessageContent {
        margin-top: 1.5%;
    }
    #hospitalTabPropertiesGrid, #miscTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 23% 8.5%;
        column-gap: 2%;
    }
    #hospitalFormMessageContent, #miscFormMessageContent {
        margin-top: 1.5%;
    }
    #mailDomainTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 8.5%;
        column-gap: 2%;
    }
    #mailDomainFormMessageContent {
        margin-top: 1.5%;
    }
    #dashCredsFormMessageContent, #reportingPermFormMessageContent {
        margin-top: 1.5%;
    }
    #miscFormMessageContent {
        margin-top: 1.5%;
    }
    #countrySelectGrid {
        display: grid;
        grid-template-columns: 23.5% 15% 15% 15% 20%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #countryFormMessageContent{
        margin-bottom: 1.4%;
    }
    #customDaySelectGrid {
        display: grid;
        grid-template-columns: 23.5% 15% 32% 23.5%;
        column-gap: 2%;
        row-gap: 16%;
        margin-bottom: 2.8%;
    }
    #customDateFormMessageContent{
        margin-bottom: 1.4%;
    }
    #assignmentSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
        column-gap: 2%;
        row-gap: 16%;
        margin-bottom: 1.4%;
    }
    #commsSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 49%;
        grid-template-rows: auto;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #commsButtonsGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
        grid-template-rows: auto;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #publish-mngtSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 15% 25%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #dashViewGrid, #reportingViewGrid {
        width: 35%;
        margin-bottom: 1.4%;
    }
    #filter_dashComp1 {
        display: grid;
        grid-template-columns: 20% 28.5% 29% 17%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #filter_dashComp2 {
        display: grid;
        grid-template-columns: 32% 32% 32%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #filter_dashComp3 {
        display: grid;
        grid-template-columns: 35% 15% 15% 29%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #visuals_dashComp1 {
        display: grid;
        grid-template-columns: 62.7% 17% 17.5%;
        grid-template-rows: 100%;
        column-gap: 1.4%;
    }
    #cardKPI1_dashComp1 {
        grid-column: 2;
        grid-row: 1;
    }
    #cardKPI2_dashComp1 {
        grid-column: 3;
        grid-row: 1;
    }
    #cardBody1_dashComp1, #cardBody1_dashComp2, #cardBody1_dashComp3 {
        padding-top: 1.4%;
        padding-bottom: 1.4%;
        padding-right: 1.4%;
        padding-left: 1.4%;
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    #remoteReqMngtSelectGrid {
        display: grid;
        grid-template-columns: 29% 20% 23.5% 21.5%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remotePubMngtSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 15%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteChaMngtSelectGrid {
        display: grid;
        grid-template-columns: 23.5% 23.5% 15%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteCalendarViewSelectGrid {
        display: grid;
        grid-template-columns: 28.5% 23.5%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteCalendarViewListGrid {
        display: grid;
        grid-template-columns: 70% 28%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
}

@media (min-width: 1900px) {
    #loginMainRow {
        margin: 5% 40% 5% 40%;
    }
    #resetPwdWToken, #unauthMainRow { 
        margin: 5% 37% 5% 37%;
    }
    #appLogin-Logo {
        width: 75%;
    }
    #appSidebar-area {
        width: 20%;
    }
    #appUserInterface-area {
        width: 80%;
    }
    #appSidebar-areaContent {
        margin-bottom: 5%;
    }
    #appSB-InputGroupGrid {
        width: 75%;
        display: grid;
        grid-template-columns: 42.2% 35% 20%;
        column-gap: 1.4%;
    }
    #appSB-modelSaveSendGrid{
        display: grid;
        grid-template-columns: 25% 50% 22%;
        column-gap: 1rem;
        margin-bottom: 2.5%;
    }
    /* #appSB-uploadPreList {
        height: 2.90rem;
    } */
    #appUI-CoverAreaWarn {
        margin-top: 5%;
    }
    #engineHandlerActionGrid {
        display: grid;
        grid-template-columns:70% 30%;
    }
    #publishHandlerActionGrid {
        display: grid;
        grid-template-columns:40% 60%;
    }
    #engineHandlerActionContent {
        display: grid;
        grid-template-columns:57% 43%;
        column-gap: 1rem;
    }
    #engineHandlerModalFooter, #publishHandlerModalFooter, #appSavedSchemaModalFooter {
        display: inline !important;
    }
    #savedSchemaSelectorGrid {
        width: 45%;
    }
    #savedTableGrid {
        display: grid;
        grid-template-columns: 21.8% 31.8% 44%;
        column-gap: 1.2%;
        margin-bottom: 1.2%;
    }
    #appStaffUpload-Sidebar {
        width: 33.33%;
    }
    #appStaffUpload-StaffInfo {
        width: 66.67%;
    }
    #staffPropertiesGrid {
        margin-top: 1.75%;
        display: grid;
        grid-template-columns: 31.5% 31.5% 32.5%;
        grid-row-gap: 20%;
        grid-column-gap: 2.5%;
    }
    #staffPropertiesActions {
        margin-top: 1.75%;
    }
    #staffPropertiesActionButtons {
        margin-bottom: 1.75%;
    }
    #signupContent {
        margin: 7.5% 35% 7.5% 35%;
    }
    #remoteMngtContent, #parametersAreaContent, #customDaysAreaContent, 
    #shiftMngtAreaContent, #dashContent, #reportingContent {
        width: 83.33%;
        margin-top: 1.1%;
        margin-left: 8.33%;
        margin-right: 8.33%;
        margin-bottom: 1.1%;
    }
    #forgotPasswordCarouselContent {
        margin-top: 1.5%;
        margin-left: 4.33%;
        margin-right: 4.33%;
        margin-bottom: 3%;
    }
    .code-input {
        width: 50px;
        height: 60px;
        text-align: center;
        font-size: 24px;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
        margin: 0 5px;
    }
    #resetPasswordContent {
        margin: 10% 35% 10% 35%;
    }
    #dashCredsTabPropertiesGrid, #reportingPermTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 12% 12% 20% 20% 12% 11.5%;
        column-gap: 2%;
    }
    #dashCredsFormMessage {
        margin-top: 1.5%;
    }
    #wardTabPropertiesGrid, #cycleTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 23% 23% 8.5%;
        column-gap: 2%;
    }
    #initialAccessTabPropertiesGrid, #customLimitTabPropertiesGrid, #customTimeLimitTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 2%;
    }
    #xLevelTabPropertiesGrid, #speCaseShiftsTabPropertiesGrid, #modulesTabPropertiesGrid,
    #dashViewsTabPropertiesGrid, #reportingRefTabPropertiesGrid, #countryTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        column-gap: 2%;
    }
    #reportingStructureTableContent {
        overflow-x: auto;
    }
    #reportingStructureTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        grid-template-rows: auto auto;
        column-gap: 2%;
        row-gap: 10%;
        padding-bottom: 2%;
    }
    #shiftsTabPropertiesGrid, #credentialsTabPropertiesGrid, #langTabPropertiesGrid,
    #engineResponseTabPropertiesGrid, #webUsersTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #criteriaTabPropertiesGrid, #engineOutputTabPropertiesGrid, #tutorialLinksTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #speCasesTabPropertiesGrid, #sampleStaffListTabPropertiesGrid {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto auto;
        column-gap: 2%;
    }
    #wardFormMessageContent, #cycleFormMessageContent, #criteriaFormMessageContent,
    #xLevelFormMessageContent, #speCasesFormMessageContent, #speCaseShiftsFormMessageContent,
    #engineOutputFormMessageContent, #shiftsFormMessageContent, #modulesFormMessageContent, 
    #credentialsFormMessageContent, #initialAccessFormMessageContent, #dashViewsFormMessageContent,
    #reportingRefFormMessageContent, #customLimitFormMessageContent, #customTimeLimitFormMessageContent, 
    #countryFormMessageContent, #langFormMessageContent, #tutorialLinksFormMessageContent, 
    #engineResponseFormMessageContent, #sampleStaffListFormMessageContent, #webUsersFormMessageContent,
    #reportingStructureFormMessageContent {
        margin-top: 1.5%;
    }
    #hospitalTabPropertiesGrid, #miscTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 23% 8.5%;
        column-gap: 2%;
    }
    #hospitalFormMessageContent, #miscFormMessageContent {
        margin-top: 1.5%;
    }
    #mailDomainTabPropertiesGrid {
        display: grid;
        grid-template-columns: 6.50% 23% 8.5%;
        column-gap: 2%;
    }
    #mailDomainFormMessageContent {
        margin-top: 1.5%;
    }
    #dashCredsFormMessageContent, #reportingPermFormMessageContent {
        margin-top: 1.5%;
    }
    #miscFormMessageContent {
        margin-top: 1.5%;
    }
    #countrySelectGrid {
        display: grid;
        grid-template-columns: 23.5% 15% 15% 15% 20%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #countryFormMessageContent{
        margin-bottom: 1.4%;
    }
    #customDaySelectGrid {
        display: grid;
        grid-template-columns: 23.5% 15% 32% 23.5%;
        column-gap: 2%;
        row-gap: 16%;
        margin-bottom: 2.8%;
    }
    #customDateFormMessageContent{
        margin-bottom: 1.4%;
    }
    #assignmentSelectGrid {
        width: 70%;
        display: grid;
        grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
        column-gap: 2%;
        row-gap: 16%;
        margin-bottom: 1.4%;
    }
    #commsSelectGrid {
        width: 70%;
        display: grid;
        grid-template-columns: 23.5% 23.5% 49%;
        grid-template-rows: auto;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #commsButtonsGrid {
        width: 70%;
        display: grid;
        grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
        grid-template-rows: auto;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #publish-mngtSelectGrid {
        width: 70%;
        display: grid;
        grid-template-columns: 23.5% 23.5% 15% 30%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #dashViewGrid, #reportingViewGrid {
        width: 35%;
        margin-bottom: 1.4%;
    }
    #filter_dashComp1 {
        display: grid;
        grid-template-columns: 20% 28.5% 29% 17%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #filter_dashComp2 {
        display: grid;
        grid-template-columns: 32% 32% 32%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #filter_dashComp3 {
        display: grid;
        grid-template-columns: 24% 13% 13% 44%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #visuals_dashComp1 {
        display: grid;
        grid-template-columns: 62.7% 17% 17.5%;
        grid-template-rows: 100%;
        column-gap: 1.4%;
    }
    #cardKPI1_dashComp1 {
        grid-column: 2;
        grid-row: 1;
    }
    #cardKPI2_dashComp1 {
        grid-column: 3;
        grid-row: 1;
    }
    #cardBody1_dashComp1, #cardBody1_dashComp2, #cardBody1_dashComp3 {
        padding-top: 1.4%;
        padding-bottom: 1.4%;
        padding-right: 1.4%;
        padding-left: 1.4%;
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    #remoteReqMngtSelectGrid {
        width: 70%;
        display: grid;
        grid-template-columns: 29% 20% 23.5% 21.5%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remotePubMngtSelectGrid {
        width: 70%;
        display: grid;
        grid-template-columns: 23.5% 23.5% 15%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteChaMngtSelectGrid {
        width: 70%;
        display: grid;
        grid-template-columns: 23.5% 23.5% 15%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteCalendarViewSelectGrid {
        width: 70%;
        display: grid;
        grid-template-columns: 28.5% 23.5%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
    #remoteCalendarViewListGrid {
        display: grid;
        grid-template-columns: 80% 18%;
        column-gap: 2%;
        margin-bottom: 1.4%;
    }
}