:root {
    --Height-Warehouse-Container: calc(100vh - 114px);
    --main-bg-color: brown;
    --header-height: 30px;
    --spacer-height: 100px;
    --content-height: calc(100vh - var(--header-height) - var(--spacer-height));
    --Location-Zoom-Factor: 1.4;
    --Warehouse-Map-Width: 510px;
    --Warehouse-Map-Height: 510px;
    --Warehouse-Map-Header-Height: 58px;
    --Warehouse-Map-Background-color: rgb(211, 210, 214);
    --ds-shadow-overlay: inset 0px 0px 0px 1px #BCD6F01F, 0px 8px 12px #0304045C, 0px 0px 1px #03040480;
    --Popup-Rack-Width: 500px;
    --Popup-Rack-Height: 625px;
    --Popup-SmallRack-Width: 420px;
    --Popup-SmallRack-Height: 300px;
    --Location-Bay-Width: 36px;
    --Location-Bay-Height: 100px;
    --Location-Bay-Top: 40px;
    --Location-Bay-Door-Top: -1px;
    --Location-Bay-Door-Height: 4px;
    --Location-Bay-Door-Width: 24px;
    --Office-Left: calc(((var(--Location-Bay-Door-Width) + 3px) *  8) + (var(--Location-Isle-Width) *  5) + var(--Row-Rack-Width));
    --Office-Height: 45px;
    --Office-Width: 120px;
    --Secured-Area-Height: calc(var(--Row-Rack-Width) + 10px);
    --Secured-Area-Top: calc(var(--Warehouse-Map-Height) - var(--Secured-Area-Height));
    --Secured-Area-Left: calc((var(--Row-Rack-Width) * 2) + var(--Location-Isle-Width));
    --Secured-Area-Width: calc((var(--Row-Rack-Width) * 9) + (var(--Location-Isle-Width) * 5));
    --CAGECORNER-Area-Height: calc(var(--Row-Rack-Width) + 25px);
    --CAGECORNER-Area-Top: calc(var(--Warehouse-Map-Height) - var(--CAGECORNER-Area-Height));
    --CAGECORNER-Area-Left: 0px;
    --CAGECORNER-Area-Width: calc((var(--Row-Rack-Width) * 2) + var(--Location-Isle-Width) - 1px);
    --Shop-Floor-Height: 110px;
    --Shop-Floor-Top: 150px;
    --Small-Storage-Top: 30px;
    --Small-Storage-Width: 12px;
    --Small-Storage-Spacer: 1px;
    --Small-Storage-Height: 110px;
    --Small-Storage-Row-1-Height: calc(var(--Small-Storage-Height) / 5);
    --Small-Storage-Row-2-Height: 20px;
    --Warehouse-Map-Bottom-Left-Nook-top: 260px;
    --Warehouse-Map-Bottom-Left-Nook-Height: calc(var(--Warehouse-Map-Height) - var(--Shop-Floor-Height) - var(--Shop-Floor-Top));
    --Warehouse-Map-Bottom-Left-Nook-Width: 90px;
    --Integration-Top: calc(var(--Office-Height) + var(--Location-Isle-Width));
    --Integration-Left: calc(var(--Office-Left) + var(--Small-Storage-Width) + var(--Location-Isle-Width));
    --Integration-Height: calc(var(--Shop-Floor-Top) - var(--Office-Height) - var(--Location-Isle-Width) - var(--Location-Isle-Width));
    --Integration-Width: calc(var(--Warehouse-Map-Width) - var(--Office-Left) - var(--Small-Storage-Width) - var(--Location-Isle-Width) - var(--Location-Isle-Width));
    --Main-Columns-Top: 185px;
    --Column-Rack-Height: 240px;
    --Row-Rack-Height: calc(var(--Column-Rack-Height) / 20);
    --Row-Rack-Width: 20px;
    --Unspecified-Locations-Area-Top: 4px;
    --Unspecified-Locations-Area-Left: calc(var(--Row-Rack-Width) + var(--Location-Isle-Width));
    --Unspecified-Locations-Area-Height: calc(var(--Location-Bay-Top) - (2 * var(--Unspecified-Locations-Area-Top)));
    --Unspecified-Locations-Area-Width: calc(var(--Row-Rack-Width) + var(--Location-Isle-Width) + ((var(--Location-Bay-Width) + 3px) * 6));
    --Floor-Row-Rack-Width: calc(var(--Row-Rack-Width) / 2);
    --Location-Isle-Width: 20px;
    --red-10: #8e2626;
    --red-9: #993c3c;
    --red-8: #a55151;
    --red-7: #b06767;
    --red-6: #bb7d7d;
    --red-5: #c79393;
    --red-4: #d2a8a8;
    --red-3: #ddbebe;
    --red-2: #e8d4d4;
    --red-1: #f4e9e9;
    --red-0: #fff;
    --Muted-Primary: #446085;
    --Muted-Light: #818486;
    --Muted-Success: #49675C;
    --Muted-Danger: #785157;
    --Muted-Warning: #817448;
    --Muted-Info: #467883;
    --feddata-blue: #25327B;
    --dark-blue: #232f3e;
    --dark-blue-3: #3d536e;
    --dark-blue-5: #6b91bf;
    --dark-blue-8: #81aee6;
    --blue-gray: #88a0bd;
    --dark-gray-8: #9d9fa3;
    --dark-gray-5: #84868a;
    --dark-gray-2: #76777a;
    --feddata-gray: #4C4D4F;
    --customer-quickstart: #9F8FEF;
    --customer-quickstart-text: #2B2451;
}
.toolbar .btn.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.toolbar .btn:not(.active) {
    /*background-color: #6c757d;*/
    border-color: #6c757d;
    color: #fff;
}

.toolbar .select-all.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.toolbar .select-all:not(.active) {
    /*background-color: #6c757d;*/
    border-color: #6c757d;
    color: #fff;
}

.popover.syncpopover {
    width: 940px !important;
    max-width: 940px !important;
}
.bg-feddata-blue {
    background-color: var(--feddata-blue);
    color: whitesmoke;
}
.bg-feddata-gray {
    background-color: var(--feddata-gray);
    color: whitesmoke;
}
.red-0 {
    background-color: var(--red-0);
    color: var(--red-10);
}
.red-1 {
    color: #fff;
    background-color: var(--red-1);
}
.red-2 {
    color: #fff;
    background-color: var(--red-2);
}
.red-3 {
    color: #fff;
    background-color: var(--red-3);
}
.red-4 {
    color: #fff;
    background-color: var(--red-4);
}
.red-5 {
    color: #fff;
    background-color: var(--red-5);
}

.red-6 {
    color: #fff;
    background-color: var(--red-6);
}
.red-7 {
    color: #fff;
    background-color: var(--red-7);
}

.red-8 {
    color: #fff;
    background-color: var(--red-8);
}
.red-9 {
    color: #fff;
    background-color: var(--red-9);
}

.red-10 {
    color: var(--red-0);
    background-color: var(--red-10);
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.modal-xxl {
    min-width: 90%;
}
@media (min-width: 1800px) {
    .modal-xxl {
        max-width:1800px;
        min-width: inherit;
    }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    /*margin-bottom: 60px !important;*/
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

.header {
    z-index: 150 !important;
}

.short-text {
    display: inline-block;
}
@media (min-width: 768px) {
    .short-text {
        display: none;
    }
}

.full-text {
    display: none;
}
@media (min-width: 768px) {
    .full-text {
        display: inline-block;
    }
}

.short-badges {
    display: inline-block;
    padding: 0px;
    margin: 0px 0px 0px 4px;
    min-width: 50px;
    max-width: 120px;
}

@media (min-width: 768px) {
    .short-badges {
        display: none;
    }
}

.hh-hide {
    display: none;
}

@media (min-width: 350px) {
    .hh-hide {
        display: inline-block;
    }
}
.hh-show {
    display: inline-block;
}

@media (min-width: 350px) {
    .hh-show {
        display: none;
    }
}

.logosize {
    height: 25px;
}
@media (min-width: 400px) {
    .logosize {
        height: 30px;
    }
}

.xl-display {
    display: none;
}
@media (min-width: 1200px) {
    .xl-display {
        display: inline-block;
    }
}

.short-column {
    display: table-cell;
}

@media (min-width: 768px) {
    .short-column {
        display: none;
    }
}

.full-column {
    display: none;
}

@media (min-width: 768px) {
    .full-column {
        display: table-cell;
    }
}

.required {
    color: red;
    font-weight: bold;
}

.middle-div {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.fdstart {
    color: black;
    opacity: .75;
    font-family: arial;
    font-weight: bold; 
}

.fdend {
    color: navy;
    font-family: arial;
    font-weight: bold;
}

.show-at-sm {
    display: inline-block;
}

@media (min-width: 576px) {
    .show-at-sm {
        display: none;
    }
}

.show-at-md {
    display: inline-block;
}

@media (min-width: 768px) {
    .show-at-md {
        display: none;
    }
}
.show-at-lg {
    display: inline-block;
}

@media (min-width: 992px) {
    .show-at-lg {
        display: none;
    }
}
.show-at-xl {
    display: inline-block;
}

@media (min-width: 1200px) {
    .show-at-xl {
        display: none;
    }
}

.remove-at-sm {
    display: none;
}

@media (min-width: 576px) {
    .remove-at-sm {
        display: inline-block;
    }
}
.remove-at-md {
    display: none;
}

@media (min-width: 768px) {
    .remove-at-md {
        display: inline-block !important;
    }
}

.remove-at-lg {
    display: none;
}

@media (min-width: 992px) {
    .remove-at-lg {
        display: inline-block;
    }
}
.remove-at-xl {
    display: none;
}

@media (min-width: 1200px) {
    .remove-at-xl {
        display: inline-block;
    }
}
.remove-at-xxl {
    display: none;
}

@media (min-width: 1400px) {
    .remove-at-xxl {
        display: inline-block;
    }
}

.offcanvas-xl {
    width: 70vw;
    max-width: 70vw;
    height: 100vh;
}

/* Custom CSS */
@media (max-width: 991.98px) {
    .offcanvas-md-fullscreen {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
    }
}

@media (min-width: 350px) {
    .height-minus-header-at-sm {
        height: calc(100% - 43.25px) !important;
    }
}

@media (min-width: 768px) {
    .height-minus-header-at-md {
        height: calc(100% - 49px) !important;
    }
}

@media (min-width: 1200px) {
    .height-minus-header-at-lg {
        height: calc(100% - 59.39px) !important;
    }
}

.text-start-at-sm {
    text-align: start;
}

@media (min-width: 576px) {
    .text-start-at-sm {
        text-align: end;
    }
}

@media (max-height: 500px) {
    .modal-height-dialog-md {
        max-width: 100%;
        margin: 0;
        height: 100vh;
    }
}

/* For large devices: max-height 700px */
@media (max-height: 600px) {
    .modal-height-dialog-lg {
        max-width: 100%;
        margin: 0;
        height: 100vh;
    }
}

/* For extra large devices: max-height 800px */
@media (max-height: 700px) {
    .modal-height-dialog-xl {
        max-width: 100%;
        margin: 0;
        height: 100vh;
    }
}



/* Add the following styles to your existing CSS */
.nav-link-underline.nav-item.active .nav-link {
    color: var(--feddata-blue); /* Change this color to your desired active item color */
    position: relative;
}
.nav-link-underline:hover {
    color: var(--feddata-blue); /* Change this color to your desired hover item color */
    background-color: rgba(209,209,209, .2); /* Change this color to your desired hover item color */
}

.nav-link-underline.nav-item .nav-link::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--feddata-blue); /* Change this color to your desired underline color */
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.nav-link-underline.nav-item.active .nav-link::before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.HoverEffect:hover {
    background-color: rgba(55,55,55, .05);
    cursor: pointer;
}

.unselectable {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none; /* Standard syntax */
}

.form-floating.is-loading {
    position: relative; /* Ensure positioning context for the spinner */
}

    .form-floating.is-loading .form-control {
        border-color: gray;
        background-color: #e9ecef;
        animation: pulsate 2s infinite;
    }

    /* Spinner styling applied to the parent container */
    .form-floating.is-loading::after {
        content: '';
        display: block;
        position: absolute;
        width: 1em;
        height: 1em;
        right: 1rem; /* Adjusted for better alignment */
        top: 50%;
        transform: translateY(-50%);
        border: 2px solid gray;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }


@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes pulsate {
    0% {
        box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(108, 117, 125, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(108, 117, 125, 0);
    }
}

/* loading-feedback */

/* Loading feedback message styling */
.loading-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: gray;
}

.form-floating.is-loading .loading-feedback {
  display: block;
}

.loading-feedback .spinner-border {
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
}

.formcontrol-readonly {
    pointer-events: none; /* makes all mouse events pass through */
    background-color: #e9ecef; /* to mimic disabled styling */
    color: #6c757d; /* text color for “disabled” look */
}