@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

html,
body {
    height: 100%;
    font-family: 'Poppins', 'sans-sarif';
    scroll-behavior: smooth;
    scroll-padding-top: 200px;
}

body {
    scrollbar-width: thin !important;
    scrollbar-color: #006699 #e5f5fa !important;
}

#container {
    padding-bottom: 100px;
}

.full-height {
    height: 100%;
}

.font{
    font-family: 'Poppins','sans-sarif' !important;
}
.relative{
    position: relative;
}
.searchByName{
    float: right;
    position: absolute;
    right: 10%;
    top: -25px;
    z-index: 11;
    background: white;
    min-width: 180px;
    border: 2px solid #428bca;
}
.searchByName #customerNames .searchResults a{
    margin-left: 0rem;
}

h2{
    font-family: 'Poppins', 'sans-sarif';
    color: #006699;
    font-size: 25px;
}
h3{
    font-family: 'Poppins', 'sans-sarif';
    color: #006699;
}
h5,
h4,
h6,
h1{
    font-family: 'Poppins', 'sans-sarif';
    color: #006699;
}


.VueTables__table{
    border: 3px solid #006699;
position: relative;
}
.VueTables__sortable {
    background-color: #e5f5fa;
    height: 35px !important;
    font-size: 0.8rem;
    color: #006699;
}
.flex-box {
    display: flex;
    margin-left: 20px;
    margin-top: 8px;
}

.mods {
    margin-right: 0px;
    padding: 0px 1px;
    font-size: 14px;
    border-radius: 5px;
    width: 100%;
    color: white !important;
    height: 23px;
    margin-top: 5px;
}


.sticky-enabled .table-responsive {
    position: relative !important;
    height: auto !important;
    overflow-y: auto !important;
    /* height: calc(100vh - 330px) !important */
}

.table thead th {
    position: sticky !important;
    top: 0px;
    z-index: 10;
    border-bottom: 2px solid #006699;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

.border-table-outside[class*="26"] {
    margin-top: 0px !important;
    padding-top: 20px;
}
.border-table-outside.t1{
    margin-top: 0px !important;
    padding-top: 20px;
}
.border-table-outside.t18{
    margin-top: 0px !important;
    padding-top: 20px;
}
.border-table-outside.t45{
    margin-top: 0px !important;
    padding-top: 20px;
}
.border-table-outside.t19{
    margin-top: 0px !important;
    padding-top: 20px;
}
.border-table-outside.t17{
    margin-top: 0px !important;
    padding-top: 20px;
}
.border-table-outside.t8{
    margin-top: 0px !important;
    padding-top: 20px;
}
.mod {
    margin-right: 36px;
    padding: 10px 28px;
    font-size: 18px;
    border-radius: 5px;
}
.cke_chrome{
    border: 2px solid #006699 !important;
    border-radius: 10px !important;
    padding: 0.1rem 0.4rem;
    overflow: hidden;
}
.ship {
    color: #fff;
    background-color: #CC9933 !important;
    border-color: #CC9933;
}

.pickup {
    color: #fff;
    background-color: #5cb85c !important;
    border-color: #4cae4c;
}

.deliver {
    color: #fff;
    background-color: #E27D60 !important;
    border-color: #f0a38d;
}
.normalized-risk{
  background-color:  #FFC8C8 !important;
  color:black;
}

.unknown {
    color: #fff;
    background-color: #ccc !important;
    border-color:#ccc;
}

/** Make the header stick on the top when scrolling**/
.preparetoship th {
    position: sticky;
    top: 80px;
    background: white;
}

thead{
    position: static !important;
}
hr{
    color: #006699 !important;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none !important;
}

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.text-primary-color{
    color: #006699;
}


.text-secondary-color{
    color: #cc9933 !important;
}

.text-muted-color{
    color: #7c7c7c;
}

.underline{
    text-decoration: underline;
}

.primary-text-white {
    color: #fff !important;
}

.searchicon {
    position: relative;
}
  
.searchicon i{
    position: absolute;
    left: 20px;
    top: 30px;
    color: #006699;
}

.settings-input:focus + .fa-lg {display: none;}

.alert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    /* width: 75%; */
    text-align: center;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.nav-logo {
    width: 40%;
}

.nav-link.active .tabLabelButton{
    color: #fff;
}

.nav-link .tabLabelButton{
    color: #006699;
}

.btn-color-pack-settings {
    background-color: #CC9933;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    width: 35%;
    padding: 2px;
    border-radius: 10px;
    margin-top: -5px;
}

.btn-color-pack-settings:hover {
    background-color: #CC9933;
    color: #fff;
}

.fa-nav-icons{
    color: #006699;
    font-size: 1.3rem !important;
}

.nav-link.active i .fa-settings-basic-icons{
    color: #fff;
}

.fa-settings-icons{
    color: #006699;
    font-size: 1.3rem !important;
    margin-right: 15px;
}

.fa-white-icons{
    color: #fff;
    font-size: 1.3rem !important;
    margin-right: 0.5rem !important;
}

.fa-settings-basic-icons{
    color: #006699;
    font-size: 1rem !important;
    margin-right: 5px;
}

.fa-info-basic-icons{
    color: #006699;
    font-size: 4rem !important;
    margin-right: 5px;
}

.fa-add-basic-icons {
    color: #006699;
    font-size: 2rem !important;
    margin-right: 5px;
}

.fa-print-basic-icons {
    color: #006699;
    font-size: 1.5rem;
    /* margin-top: 1.3rem !important; */
}

.add-manually-label{
    margin-bottom: 2.7rem;
    margin-top: 2.7rem;
    font-size: 1.2rem;
}

.btn-color-view-failed{
    background-color: #006699;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-size: 0.7rem;
    border-radius: 10px;
}

.badge-icon{
    margin-left: -20%;
    font-size: 0.6rem;
}

.me-10{
    margin-right: 10rem;
}

.icon-labels{
    font-size: 12px;
}

.mt-2rem{
    margin-top: 2rem;
}
.mt-1rem{
    margin-top: 1rem;
}
.ml-25{
    margin-left: 25%;
}
.ms-20{
    margin-left: 20rem;
}

.ms-9{
    margin-left: 9rem;
}

.ms-8{
    margin-left: 8rem;
}

.ms-1p9{
    margin-left: 1.9rem;
}

.ms-8p5{
    margin-left: 8.5rem;
}

.no-mb{
    margin-bottom: 0rem;
}

.ms-10{
    margin-left: 10rem;
}

.dot .font1{
    position: relative;
    top: 10%;
    left: 2%;
}

.dot-custom {
    height: 30px;
    width: 30px;
    margin-top: 0;
    bottom: 15%;
    position: relative;
    background-color: #006699;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 5px #ffc107; /* Ring effect */
    animation: ring-blink 1s infinite; /* Blinking animation for the ring */
  }
  
  @keyframes ring-blink {
    0% {
      box-shadow: 0 0 0 5px #ffc107; /* Ring visible */
    }
    50% {
      box-shadow: 0 0 0 5px transparent; /* Ring invisible */
    }
    100% {
      box-shadow: 0 0 0 5px #ffc107; /* Ring visible */
    }
  }
  
  .dot {
    height: 30px;
    width: 30px;
    margin-top: 0;
    bottom: 15%;
    position: relative;
    background-color: #006699;
    border-radius: 50%;
    display: inline-block;
  }

.vl{
    border-left: 3px solid #006699;
    margin-top: -10px;
    /* margin-bottom: 10px; */
}

hr.settings{
    border: 1px solid #006699;
    margin: 0 !important;
}

.nav-title-row{
    background-color: #006699;
}

.nav-count-row{
    background-color: #CC9933;
    height: 20px;
}

.modal.fade.show {
    backdrop-filter: blur(5px);
}

.modal-footer .btn-danger{
    color: #fff !important;
}

.pack-settings-modal-dialog {
    /* max-width: 75%; */
    margin-top: 40px;
}

.prepare-to-ship-modal-dialog {
    max-width: 90%;
    height: 80% !important;
    /* margin-top: 40px; */
}
.pack-modal-dialog {
    max-width: 95%;
    height: 80% !important;
    /* margin-top: 40px; */
}
.pack-settings-modal-title{
    color: #006699;
    font-size: 1.5rem;
}

.modal-footer .btn-success{
    color: #fff !important;
}

.notext-decoration{
    text-decoration: none !important;
    cursor: pointer;
    color: white;
}

.ml-neg-1rem{
    margin-left: -1rem;
}

.mt-neg-1rem{
    margin-top: -1rem;
}

.ml-ng-06rem{
    margin-left: -0.6rem;
}

.w3-badge {
    border-radius: 30%;
    padding: 5px;
    margin: 5px;
}

.w3-info {
    color: #fff !important;
    background-color: #cc9933 !important;
}

.w3-green {
    color: #fff !important;
    background-color: #cc9933 !important;
}

.w3-warning {
    color: #fff !important;
    background-color: #cc9933 !important;
}

.w3-pink {
    color: #fff !important;
    background-color: #cc9933 !important;
}

.w3-black {
    color: #fff !important;
    background-color: #cc9933 !important;
}

.no-decoration{
    text-decoration: none !important;
    cursor: pointer; 
    color: #006699;
}
.no-decoration:hover{
    text-decoration: none !important;
    cursor: pointer; 
    color: #006699;
}

.notext-decoration:hover{
    color: white;
}

.nav-title-text-color{
    font-size: 1rem;
    color: white;
    font-weight: 600;
}

.nav-menu-text-color{
    font-size: 0.7rem;
    color: #006699;
    font-weight: 400;
    margin: -15px;
    text-decoration: none !important;
}
.settings-modal-top{
    margin-top: 10%;
}

.settings-modal-title{
    font-size: 2rem;
}

.nav-count-text-color{
    font-size: 0.8rem;
    color: white;
}

.settings-modal{
    background-color: #006699;
    color: #fff;
}

.pickup-modal{
    background-color: #fff;
    color: #006699;
}

.pickup-modal-dialog {
    max-width: 75%;
}

.pickup-modal-title {
    font-size: 1.5rem;
}

.settings-modal-dialog {
    max-width: 80%;
}

.modal-title-center{
    margin-left: auto;
}

.close-white{
    color: white;
}

.modal-backdrop.fade.show{
    display: none;
}


/* Basic Settings - Left Tabs */
/* Style the tab */
.tab {
    /* float: right; */
    /* border: 1px solid #ccc; */
    /* background-color: #f1f1f1; */
    width: 100%;
    height: 100%;
  }
  /* Style the buttons inside the tab */
  .tab button {
    display: block;
    background-color: inherit;
    color: #006699;
    padding: 8px 15px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 15px;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #0099cc36;
  }
  
  /* Create an active/current "tab button" class */
  .tab button.active {
    background-color: #c93;
    color: white;
  }

  .tab button.active .fa-settings-icons{
    color: #fff;
  }
  
  /* Style the tab content */
  .tabcontent {
    /* float: left; */
    padding: 0px 12px;
    /* border: 3px solid #006699; */
    /* width: 90%; */
    border-right: none;
    border-top: none;
    border-bottom: none;
    height: 100%;
  }

  .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #006699;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.settings-title{
    font-size: 1rem;
    color: #006699;
}

.nav-search{
    width: 100%;
    height: 90%;
    margin: 0 0 0 5px;
    background-color: transparent;
}

.multiselect__content-wrapper{
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.input-icon{
    position: absolute;
    right: 50px;
    top: 3px;
    color: #006699;
}
.input-wrapper{
    position: relative;
    margin-left: -30px;
    margin-top: -5px;
}

.input-icon2 {
    position: absolute;
    right: 10px;
    top: 8px;
    color: #006699;
}

.blueCheckbox{
    vertical-align: middle;
    bottom: 1px;
    background-color: #fff;
    border: 2px solid #006699;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
    top: 0px;
}
.saveMoveTO{
    background-color: #006699;
    color: #ffffff !important;
        border-radius: 10px;
}
.saveMoveTO:hover{
    border-color: #006699;
    color: #006699 !important;
    background-color: white !important;
}
.checkboxLabel{
    display: block;
    color: #006699 !important;
    font-size: 0.8rem !important;
}

.activeBtn{
    background-color: #006699 !important;
}

.inactiveBtn{
    background-color: #CC9933 !important;
}

input[type=checkbox]:checked
{
    background-color: #006699;
    background: #006699 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

.btn-color-sky {
    background-color: #006699;
    color: #ffffff;
    border-radius: 10px !important;
}

.input-group .btn {
    position: relative;
    z-index: 20;
}

.settings-input{
    border: 2px solid #006699 !important;
    border-radius: 10px !important;
    padding: 0.1rem 0.4rem;
}

.help-block1{
    font-size: 0.8rem;
    color: red;
}

.img-100{
    height: 100%;
    width: 100%;
    margin-left: 10px;
}

.settings-input1{
    border: 2px solid #006699;
    padding: 0.1rem 0.4rem;
}

.dropdowns-input{
    background-color: #cc9933;
    color: white !important;
    /* border-radius: 10px; */
    padding: 0.1rem 1rem;
}

.dropdowns-input:hover:not(:disabled),
.dropdowns-input:focus:not(:disabled),
.dropdowns-input:active:not(:disabled){
  background-color: #cc9933;
  color: white !important;
}

.dropdowns-input option {
    color: #006699 !important;
    background-color: white !important;
  }
  

:-ms-input-placeholder{
    color: #a9a9a9 !important;
}

::placeholder{
    color: #a9a9a9 !important;
}

input, select, textarea {
    color: #006699 !important;
}

.input:focus {
    outline: none !important;
}

.settings-row-background{
    background-color: #f8fdff;
    /* border-radius: 20px; */
}

.pickup-row-background{
    background-color: #CCEBF5;
    border-radius: 20px;
}

.communications-label{
    display: flex;
    color: #006699;
    font-size: 1rem;
}

.communication-input{
    border: 2px solid #006699;
    border-radius: 10px;
    padding: 0rem 0.5rem;
    width: 25%;
}

.hintText{
    display: block;
    color: #006699;
    font-size: 0.6rem;
}

.select-no-border{
    border: none;
    box-shadow: none !important;
}

.pack-settings-dropdown{
    color: #006699;
    background-color: #fff;
    border-color: #006699;
    border: 2px solid #006699;
    border-radius: 10px;
    font-size: 15px;
    margin-left: 10px;
    margin-top: 10px;
}

.btn-color{
    background-color: #CC9933;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    width: 15%;
    border-radius: 10px;
}

.btn-color:hover {
    background-color: #CC9933;
    color: #fff;
}

.btn-color-secondary{
    background-color: #CC9933;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}

.btn-color-success{
    background-color: #15a965;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}

.btn-color-success:hover {
    background-color: #15a965;
    color: #fff;
}

.btn-color-sky{
    background-color: #006699;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}

.btn-color-sky:hover {
    background-color: #006699;
    color: #fff;
}
.btn-color-danger{
    background-color: #df532d;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}

.btn-color-danger:hover {
    background-color: #df532d;
    color: #fff;
}

.btn-color-warning{
    background-color: #eab004;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}

.btn-color-warning:hover {
    background-color: #eab004;
    color: #fff;
}

.btn-color-warning-pink{
    background-color: #E27D60;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}

.btn-color-warning-pink:hover {
    background-color: #E27D60;
    color: #fff;
}


.btn-color-yellow{
    background-color: #bbb92c;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}

.btn-color-yellow:hover {
    background-color: #908f1e;
    color: #fff;
}
.btn-color-warning-olive{
    background-color: #5ac048;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}

.btn-color-warning-olive:hover {
    background-color: #5ac048;
    color: #fff;
}
.btn-color-muted{
    background-color: #9d9d9d;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}

.btn-color-muted:hover {
    background-color: #9d9d9d;
    color: #fff;
}

.btn-color-primary{
    background-color: #006699 !important;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}

.btn-color-primary:hover {
    background-color: #006699;
    color: #fff;
}

.update-btn-color {
    background-color: #CC9933;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    width: 25%;
    border-radius: 10px;
}

.update-btn-color:hover {
    background-color: #CC9933;
    color: #fff;
}

.btn-color-prep{
    background-color: #CC9933;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    width: 15%;
    height: 75%;
    padding: 2px 0px 10px 0px;
    margin-right: 10px;
    border-radius: 10px;
}

.btn-color-prep:hover {
    background-color: #CC9933;
    color: #fff;
}

.btn-color-settings{
    background-color: #CC9933;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    width: 75%;
    padding: 2px;
    border-radius: 10px;
    margin-top: -5px; 
}

.btn-color-settings:hover {
    background-color: #CC9933;
    color: #fff;
}

/* .tooltip{
    position: relative;
    opacity: 0;
    margin-top: 0px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #006699;
    color: #ffffff;
    border-radius: 5px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.tooltip:hover{
    opacity: 1;
} */

.card-header{
    background-color: #006699;
}

.accordion{
    padding: 0rem !important;
}

.accordionButton {
    background-color: #cc9933 !important;
    color: #ffffff !important;
}

.dropdown .btn-primary {
    color: #006699;
    background-color: #fff;
    border-color: #006699;
    border: 2px solid #006699;
    border-radius: 10px;
    font-size: 12px;
    margin-left: 10px;
    margin-top: -5px;
}

.single-line-text{
    white-space: nowrap;
}

.choose-file-css{
    margin-top: -5px;
    border: 0px;
}

input[type=file]::file-selector-button{
    background-color: #006699;
    color: #fff;
}

input[type=file]::file-selector-button:hover{
    background-color: #006699;
    color: #fff;
}

.choosefile-row-background {
    background-color: #E5F5FA;
    border-radius: 10px;
    padding: 20px 0px 15px 20px;
}

.companyinfo-input {
    border: 2px solid #006699;
    border-radius: 10px;
    padding: 0rem 0.5rem;
    margin-top: -5px;
}

.packsettings-input {
    border: 2px solid #006699;
    border-radius: 10px;
    padding: 0rem 0.5rem;
    width: 35%;
    margin-left: 15px !important;
    /* margin-top: -5px; */
}

.packsettings-label{
    display: flex;
    color: #006699;
    font-size: 0.8rem;
}

.packsettings-label2{
    /* display: flex; */
    color: #006699;
    font-size: 0.8rem;
}

.packsettings2-input {
    border: 2px solid #006699;
    border-radius: 10px;
    padding: 0rem 0.5rem;
    width: 20%;
    margin-left: 15px !important;
    margin-top: -5px;
}

.span-yellow{
    color: #CC9933;
    font-size: 0.8rem;
}

.prepsettings2-input {
    border: 2px solid #006699;
    border-radius: 10px;
    padding: 0rem 0.5rem;
    width: 40%;
    margin-left: 15px !important;
    margin-top: -5px;
}

.no-border{
    border: 0px solid rgba(0, 0, 0, 0.1);
}

.fixed-button-save {
    position: fixed;
    bottom: 25px;
    left: 42%;
}

.height85{
    height: 85px;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: #006699;
    border-color: #006699 #006699 #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.no-background-button{
    color: #006699;
    background-color: transparent !important;
}

.nav-link {
    color: #006699;
}

.width-10{
    width: 10%;
}

.width-15{
    width: 15%;
}

.width-20{
    width: 20%;
}

.width-25{
    width: 25%;
}

.width-24{
    width: 24%;
}

.width-30{
    width: 30%;
}

.width-101p5{
    width: 102%;
    margin-left: -2px;
}

.height-85{
    height: 85%;
}

.loadingDiv {
    margin: 0;
    position: fixed;
    height: 100%;
    z-index: 9999;
    text-align: center;
    padding-top: 200px;
    width: 100%;
    clear: none;
    background: #000;
    opacity: .5;
}

.loadingDiv img {
    left: 50%;
    position: absolute;
    top: 40%;
}

.mb-35{
margin-bottom: 35%;
}

.height-33{
    height: 33px;
}

.height-80{
    height: 80%;
}

.width-60{
    width: 60%;
}

.width-80{
    width: 80%;
}

.width-90 {
    width: 90%;
}

.width-100{
    width: 100%;
}

.width-130{
    width: 130%;
}

.width-135{
    width: 135%;
}

.width-145{
    width: 145px;
}

.width-200{
    width: 200%;
}

.bottom-border{
    border-bottom: 3px solid rgb(0 153 204);
}

.searchBtn-left{
    position: relative;
    left: -102%;
    background: #ffffff00 !important;
    color: #006699;
    border: 0px !important;
}
.searchBtn-left:hover{
    color: #006699 !important;
}

.searchBtn-left-nav{
    position: relative;
    left: 90%;
    top: -14%;
    z-index: 20;
}

.nav-tabs .nav-link {
    border: 0px solid transparent;
}

.nav-tabs .nav-link:hover {
    color: #CC9933;
}

.nav-tabs .nav-link.active:hover, .nav-tabs .nav-item.show .nav-link {
    color: #fff;
}

.btn-packsettings{
    color: #fff;
    background-color: #006699;
    width: 100%;
    margin-top: 10px;
}

.btn-packsettings:hover{
    color: #fff;
    background-color: #CC9933;
    width: 100%;
    margin-top: 10px;
}

.settings-dark-background{
    background-color: #006699;
    color: #fff;
}

.accordion-button.prep-setting-accordin{
    background-color: #E5F5FA;
}

.accordion-button.prep-setting-accordin:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230099cc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.width-47{
    width: 47%;
}
.width-100{
    width: 100%;
}
.width-3{
    width: 3%;
}
.width-25{
    width: 25%;
}
.auction_dates_align{
    display: flex;
    flex-direction: row;
}
.y-center{
    display: flex;
    align-items: center;
}
.auction_date {
    margin-right: 20px;
    margin-left: 10px;
}
.auction_dates_container {
    padding: 15px 15px;
    /* margin: 15px; */
}
.btn-auction {
    background-color: #CC9933;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
}
.btn-auction:hover {
    background-color: #006699;
    color: #fff;
}
.import_dates_container {
    background: #e5f5fa;
    padding: 11px 9px;
    border-radius: 15px;
    border: 2px black;
    border: 5px solid #006699;
    margin-bottom: 15px;
}

.new-locations {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    font: 300;
    font-size: 14px;
    color:black;
}

.table th{
    font-size: 0.8rem;
    color: #006699;
}
.table td{
    vertical-align: middle;
    color: #006699;
    font-size: 1rem;
}


.btn:focus, .btn:active{
    outline: none !important ;
    box-shadow: none;
}

.table-action-buttons{
    color: #006699;
    font-size: 1.5rem;
    margin-top: -5px;
    margin-left: -25px;
}

.table-action-buttons:hover{
    color: #cc9933;
}

.tabs-table th{
    border: 1px solid #013647 !important;
    border-collapse: collapse;
}

.tabs-table td{
    border: 1px solid #013647 !important;
    border-collapse: collapse;
}


.dataTables_info{
    margin-top: 2rem;
}

.border-table-outside{
    /* margin-top: 20px; */
    width: 100%;
    border: 2px solid #006699;
    position: relative;
    /* top: 20px; */
}

.wrapped-items.clearfix:after,
.boxed-items.clearfix:after,
.shipping-packages.clearfix:after {
    content: '';
    display: inline-block;
    width: 100px;
    height: 80px;
}

.onverflow_wrapTo_next{
    max-width: 140px;
    max-height: 120px;
    line-height: 1.2;
    height: 120px;
}
.table_note_w{
    min-width: 68px; 
    max-width: 120px; 
    word-wrap: break-word;
    word-break: break-word;
}
.table_note{
    min-width: 60px; 
    max-width: 120px; 
    word-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.note-content {
    display: flex;
    align-items: center;
}

.circle {
    width: 5px;
    height: 5px;
    background-color: #006699;
    border-radius: 50%;
    margin-right: 8px;
}


.two-line-height{
    line-height: 2 !important;
}
.multiselect__tags {
    border: none !important;
    background-color: transparent !important;
    border: none !important;
}
body.dark-mode .multiselect__input, .multiselect__single{
    background-color: transparent !important;
}
body.dark-mode .multiselect__content-wrapper{
    background-color: #333 !important;
    border: none !important;
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #006699;
    border-color: #006699;
}

.font06{
    font-size: 0.6rem;
}
.font07{
    font-size: 0.7rem !important;
}
.font08{
    font-size: 0.8rem !important;
}

.datetextfont{
    font-size: 1.2rem !important;
}
.datefont08{
    font-size: 0.8rem !important;
}
.dayfont1rem{
    font-size: 1.6rem;
    font-weight: 600;
}

.hover-yellow{
    color: #006699;
    text-decoration: none;
    cursor: pointer;
}

.hover-yellow:hover{
    color: #c93;
    text-decoration: none;
    cursor: pointer;
}
.h-fit{
    height: fit-content !important;
}
.prep-settings-label-input{
    width: 170%;
    margin-left: -25px;
}
.flex{
    display: flex;
}

.table th{
    /* border-color: transparent !important; */
    background-color: #e5f5fa;
    height: 35px !important;
}

.table > tbody {
    vertical-align: bottom;
    line-height: 1.5;
}

.table td{
    /* border-color: transparent !important; */
    
    cursor: context-menu;
}
.table tr{
    /* background-color: #fff; */
}

.table:not(.table-striped) > :not(caption) > * > * {
    box-shadow: none !important;
}

.table > :not(:last-child) > :last-child > * {
    /* border-bottom-color: transparent !important; */
}

.table-bordered > :not(caption) > * > * {
    /* border-width: 0 0px; */
}
.table-bordered > :not(caption) > * {
    border-width: 0px 0;
}
.borderless td, .borderless th{
    border: none !important;
}

.profilePicSize{
    width: 185px;
    height: 170px;
}

.user-details-span{
    color: #cc9933;
    font-size: 1rem;
}
td .fa:hover{
    color: #cc9933 !important;
}
td a:hover{
    color: #cc9933 !important;
}

div .btn:hover {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
.font-1{
    font-size: 1.3rem;
}

/* Mega Menu DropDown */
.dropdown-menu {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border: none;
    border-radius: 0;
    padding: 0.7em;
  }
  .dropdown-menu ul {
    list-style: none;
    padding: 0;
  }
  .dropdown-menu li .dropdown-item {
    color: #fff;
    font-size: 1em;
    padding: 0.5em 1em;
  }

  .dropdown-item.active, .dropdown-item:active{
    background-color: transparent;
    text-decoration: none;
  }

  .dropdown-menu li {
    color: #f1f1f1;
  }

  .dropdown-item:hover, .dropdown-item:focus {
    background-color: transparent !important;
  }

  .dropdown-menu li:first-child a {
    font-weight: bold;
    font-size: 1.2em;
    text-transform: uppercase;
    color: #fff;
  }

  .dropdown-menu {
    right: 0;
  }
.hamburgermenu{
 display: none;
}

.dropdown-menu {
    position: absolute;
    z-index: 2000;
    display: none;
    min-width: 10rem;
    padding: 1rem;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #006699 !important;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}
.lock_font{
    /* font-size: 26px !important; */
}
.marginb-75{
    margin-bottom: 75px !important;
}

.dropdown-menu-singleItem {
    min-width: 5rem !important;
    padding: 1rem 1rem !important;
    margin: 8px -105px 0px 0;
}

.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: auto !important;
    margin-top: 0.125rem;
}
.font-13
{
    font-size: 13px;
}
.font13{
    font-size: 1.3rem;
}
.font16px{
    font-size: 16px;
}
.font-15 {
    font-size: 15px;
}

.font1{
    font-size: 1rem;
}

.nav-title-text-color a{
    font-size: 1rem;
    color: white !important;
    font-weight: 600;
    text-decoration: none !important;
}

.nav-count-text-color a{
    font-size: 0.8rem;
    color: white;
    text-decoration: none !important;
}

.nav-count-text-color a span{
    font-size: 0.8rem;
    color: white;
    text-decoration: none !important;
}

.hidden{
    display: none !important;
    visibility: hidden !important;
}

td a {
    text-decoration: none !important;
    cursor: pointer !important;
    color: #006699 !important;
}


.prepare-to-ship-modal-dialog .modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100vh - 90px);
    overflow-y: scroll;
    margin-bottom: 10px;
}

form .modal-content {
    height: 95%;
}

.prepare-to-ship-modal-dialog .modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100vh - 90px);
    overflow-y: scroll;
}

.table-text td{
    font-size: 0.8rem !important;
}


/** READY TO PACK MODAL CSS **/

.btn-standard {
    background-color: #ffcccc;
    border: 4px solid #ffcccc;
    border-radius: 2px;
  }
  .btn-standard:hover {
    background-color: white;
    border: 4px solid #ffcccc;
    border-radius: 2px;
  }
  .btn-semi {
    background-color: #ff8080;
    border: 4px solid #ff8080;
    border-radius: 2px;
  }
  .btn-semi:hover {
    background-color: white;
    border: 4px solid #ff8080;
    border-radius: 2px;
  }
  .btn-fragile {
    background-color: #ff0000;
    border: 4px solid #ff0000;
    border-radius: 2px;
  }
  .btn-fragile:hover {
    background-color: white;
    border: 4px solid #ff0000;
    border-radius: 2px;
  }
  .btn-very {
    background-color: #800000;
    border: 4px solid #800000;
    border-radius: 2px;
  }
  .btn-very:hover {
    background-color: white;
    border: 4px solid #800000;
    border-radius: 2px;
  }
  .btn-delicate {
    background-color: #1a0000;
    border: 4px solid #1a0000;
    border-radius: 2px;
  }
  .btn-delicate:hover {
    background-color: white;
    border: 4px solid #1a0000;
    border-radius: 2px;
  }
  .packing-manager {
    user-select: none;
}
.shipping-packages,
.boxed-items,
.wrapped-items {
    border: solid 1px #eee;
    min-height: 79px;
}
.packing-icon .img-text {
    max-height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.wrapped-items .popover-button, .packing-icon .popover-button {
    position: absolute;
    bottom: 3px;
    right: 3px;
    top: auto;
}
.packing-icon.item {
    background-image: url(/images/wrapped-100.jpg);
    position: relative;
}

.img-text .bg-success {
    text-shadow: none;
}

.bg-success {
    background-color: #dff0d8 !important;
}
.text-success {
    color: #3c763d;
}
.img-text:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.05;
    z-index: -1;
}

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.packing-icon {
    float: left;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100px;
    height: 85px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    font-size:9px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
    touch-action: manipulation;
}
.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-family: "Raleway", sans-serif;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.6;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    font-size: 14px;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.popover.b-popover {
    display: block;
    opacity: 1;
    outline: 0;
}
.popover-body {
    padding: 9px 14px;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
}
.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.packing-icon.item {
    background-image: url('/images/wrapped-100.jpg');
    position: relative;
}

.packing-icon.item.checked {
    cursor: pointer;
}

.packing-icon.item:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #d9534f;
    opacity: 0.5;
}

.packing-icon.item.checked:before {
    display: none;
}

.packing-icon.box {
    background-image: url('/images/box-100.jpg');
    padding-top: 12px;
    background-color: #00000029;
    background-blend-mode: overlay;
}

.packing-icon.selected {
    border: inset 5px #006699;
}

.shipping-packages .packing-icon.box {
    background-image: url('/images/box-closed.jpg');
}

.package-item {
    border-bottom: 1px dashed;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.update-order-image{
    width: 25%;
}

#right-items, #right-receipt, #right-pack,#right-shipping {
    min-height: 50vh;
}
.hide {
    display: none !important;
}

.display-none {
    display: none;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{
    background-color: #006699;
    color: #fff;
    font-family: 'Poppins','sans-sarif';
    font-weight: 500;
    border-radius: 10px;
    text-decoration: none !important;
}

input::placeholder {
    font-size: 0.8rem;
}

.a-text{
    color: #fff;
    padding-left: 6px;
    /* text-decoration: none; */
}

.a-text:hover{
    color: #fff;
}

.x-none{
    overflow-x: hidden !important;
}

.y-none{
    overflow-y: hidden !important;
}

.x-block{
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.y-block{
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.collapsed{
    background-color: #e5f5fa !important;
    color: #006699 !important;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #006699;
    border-color: #006699;
}

.page-link {
    color: #006699;
}

.navHeading{
    font-weight: bold;
    font-size: 1.2em !important;
    text-transform: uppercase;
}

.navClose{
    font-size: 1.8rem !important;
    margin-top: -1rem;
    margin-left: 2rem;
}

.btn-color-view-failed:hover{
    border-color: #006699;
    color: #006699;
    background-color: white;
}

.list-group .list-group-item{
    font-size: 0.8rem !important;
}

.modal{
    background: #000000ab;
}

.notes{
    font-size:17px;
    border:1px solid #ff0000;
    border-radius: 5px;
    font-weight: bold;
    padding: 0 10px;
    width: fit-content;
}
.sub-notes{
    font-size:14px;
    font-weight:normal;
}

.flex-rows {
    display: flex !important;
    flex-direction: row !important;
    /* overflow-x: scroll !important; */
}

/* input, select, textarea {
    border: none !important;
} */
.w-full{
    width: 100% !important;
}
.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%; 
}

.sticky-header {
    position: sticky;
    width: 100%;
    top: -1px;
    z-index: 999;
}

.sticky-header1 {
    position: sticky;
    width: 100%;
    top: 54px;
    z-index: 998;
    padding-bottom: 20px;
}

.tt-dropdown-menu {
    margin: 0rem;
    padding: 0px;
    background-color: #fff;
    border: 5px solid #006699;
    border-radius: 8px;
    font-size: 15px;
    color: #006699;
    left: -135px !important;
    z-index: 10000 !important;
    background-color: white;
}
.tt-suggestion {
    padding: 5px;
    border-bottom: 2px solid #006699;
}

.tt-suggestion:hover {
    color: white;
    background-color: #006699;
}

.saint-suggestions-wrapper {
    position: relative;
}

.saint-suggestions {
    display: none;
    position: absolute;
    z-index: 100;
    background-color: #fff;
    border: solid 2px #069;
    min-width: 150px;
    margin-top: 5px;
}

.saint-suggestions.open {
    display: block;
}

.saint-suggestion {
    padding: 5px;
    border-bottom: solid 1px #069;
    color: #069;
    cursor: pointer;
}

.saint-suggestion:last-child {
    border-bottom: none;
}

.saint-suggestion:hover {
    color: #fff;
    background-color: #069;
}

.alert-danger {
    background-color: #ffcc66 !important;
    color: white;
    border-color: #cc9933;
    list-style: none;
}

.Pickupdates {
    padding: 20px;
    /* border: 2px solid #CC9933; */
    border-radius: 4px;
    margin-right: auto;
    margin-left: auto;
    /* width: 50%; */
    margin-top: 30px;
    /* display: flex;
    flex-direction: row; */
    justify-content: center;
    /* flex-wrap: wrap; */
}

.card-border{
    border: 2px solid #006699;
    border-radius: 10px;
}

div.date-whole-card {
    border-radius: 10px;
    /* width: 120px; */
    max-height: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

.fit-width{
    padding: 5px 15px !important;
    width: fit-content !important;
}

.items-between{
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}
date-whole-card {
    margin:3px;
}

.date-header-filled {
    background-color: #006699;
    color: white;
    padding: 10px 10px 0px 10px;
    font-size: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

div.date-container-day {
    padding: 10px;
    font-size: 18px;
}

.times {
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    /* width: 80%; */
}

.settings-border-background{
    border: 2px solid #006699;
    border-radius: 15px;
    width: 90%;
}

.one-hour-time-slot-split {
    margin-right: 10px;
}

.btn-hour {
    color: white;
    background-color: #cc9933;
    border-color: #cc9933;
    transition: 0.4s;
    width: 200px;
    border-radius: 5px !important;
}

.btn-hour:hover{
    color: white;
}

.time-displayed {
    margin-top: 5px;
}

.inactiveDate{
    border: 3px solid #006699 !important;
}

.activeDate{
    border: 3px solid #cc9933 !important;
}

.inactiveHeader{
    background-color: #006699 !important;
}

.activeHeader{
    background-color: #cc9933 !important;
}

.inactiveText{
    color: #006699 !important;
}

.activeText{
    color: #cc9933 !important;
}

.pickupLocation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
    clear: both;
    width: 435px;
    margin: 0 auto;
    padding: 10px 40px;
    border: 2px solid #006699;
    border-radius: 10px;
}

.input-group-addon {
    padding: 3px 12px;
    font-size: 14px;
    /* font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px; */
}
/* .tab-content{
    min-height: 150px;
} */
.popover-header
{
font-size: 0.8rem !important;
}

.error{
    color:red;
    font-size: 10px;
}
.flex-item
{
    padding-right: 8px;
}

#viewEditItemModelContent{
    height:70vh;overflow-y: auto
}
input[type="time"] {
    /* min-width: 120px !important; */
    line-height: 23px !important;
}
td a{
    text-underline-offset: 2px;
    text-decoration: underline !important;
}
.show
{
    display: block;
}

.max-wid
{
min-width: 250px;
}
.list-group-item.active > .text-primary-color{
    color:#fff !important;
}
.fw-bold
{
    font-weight: bolder;
}
#viewEditItemModelContent li {
    padding: 0.3rem 1rem;
}

.list-group-item.active .text-white-focus  {
    color: #fff !important;
}

.wh-100 {
    width: 100%;
    height: 100%;
}

.panel-default > .panel-heading {
    /* color: #59595a; */
    color: #006699;
    /* background-color: #eaecf6; */
    background-color: #e5f5fa;;
    border-color: #dcdff0;
}

.panel-default {
    border-color: #dcdff0;
}

/* Customs tab in ready to pack popup */

.panel {
    box-shadow: none;
    border-radius: 2px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #006699;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
body.dark-mode .panel {
    border: 1px solid #333 !important;
}
.panel-body {
    padding: 15px;
    a, a:hover, a:focus {
        color: #006699;
        text-decoration: none;
        outline: none;
        font-size: 15px;
    }
    a:hover, a:focus {
        color: #2a6496;
    }
}
.panel-heading {
    /* border-radius: 1; */
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
  }
  
  .red-block,
  #red-block {
    color: red !important;
  }
  
  .yellow-block,
  #yellow-block {
    color: #cccc00 !important;
  }
  
  .green-block,
  #green-block {
    color: green !important;
  }
  
  .blue-block,
  #blue-block {
    color: #357ebd !important;
  }
  
  .items-paid{
    background-color: #CCFFCC !important;
    color:black;
  }
  .reported-customer{
    background-color:  #FFCCCC!important;
    color:black;
  }
  .stage-notes{
    background-color: #f1f18e !important;
    color:black;
  }
  .risk-profile{
    background-color: #CCFFFF !important;
    color:black;
  }

  .api-created{
        background-color: #FFE8CC;
    }
  /* Notes: keep current yellow (#FFFFCC)
Paid: keep current green (#CCFFCC)
Potential warning: change to light red/pink (#FFCCCC)
Multiple orders: change to blue #CCFFFF */

  .zsiq_theme1 .zsiq_flt_rel{
    position: fixed !important;
    right: 2% !important;
    bottom: 5% !important;
    background-color: #006699 !important;
  }


  /* configuring table UI */
  .dataTables_filter label{
    color: #006699;
  }
  .dataTables_filter label .form-control.input-sm{
    border: 2px solid #006699;
    border-radius: 10px;
    padding: 0.1rem 0.4rem;
  }

  .dataTables_length label{
    color: #006699;
  }

  .dataTables_length label .form-control.input-sm{
    border: 2px solid #006699;
    border-radius: 10px;
    padding: 0.1rem 0.4rem;
  }
  /* .form-control{
    border: 2px solid #006699 !important;
    border-radius: 10px;
    padding: 0.1rem 0.4rem;
  } */
  .dataTables_info{
    color: #006699;
  }

    .VueTables__search-field{
      margin-top: 15px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
  .VueTables__search__input.form-control {
    border: 2px solid #006699;
    border-radius: 10px;
    padding: 0.1rem 0.4rem;
    width: 20%;
  }
  .VueTables__search-field label{
    color: #006699;
  }


  * {box-sizing: border-box;}
  
  body.dark-mode {background-color: #292c35;}
  
  .custome-check-box-toogle .checkbox {
    opacity: 0;
    position: absolute;
  }
  
  .checkbox-label {
    border: 1px solid;
    background-color: #111;
    width: 51px;
    height: 28px;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  body.dark-mode .checkbox-label{
    background-color: #ffffff;
    border: 1px solid #111;
  }

  .fa-moon {color: #f1c40f;}
  
  .fa-sun {color: #f39c12;}
  
  .checkbox-label .ball {
    background-color: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
  }
  body.dark-mode .checkbox-label .ball{
    background-color: #111;
  }
  .checkbox:checked + .checkbox-label .ball {
    transform: translateX(24px);
  }
  .b-button-remove{
    background: transparent;
    color: inherit;
    border: 0px;
    box-shadow: unset
  }
  .b-button-remove:hover{
    background: transparent;
    color: inherit;
    border: 0px;
    box-shadow: unset !important;
  }
  .note-content {
    max-width: 200px;       
    white-space: nowrap;  
    overflow: hidden;         
    text-overflow: ellipsis; 
  }
  .number-of-people{
    color: red;
}


  .popover-notes {
    max-width: 200px;
  }

.center-row{
    display: flex;
    align-items: center;
}




  /* Dark Mode CSS */


body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

body.dark-mode .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  }
  
  body.dark-mode .btn-default{
    color: #e0e0e0;
    background-color: #2c2c2c !important;
  }

  body.dark-mode .packing-icon {
    text-shadow: none;
}
body.dark-mode .accordion-collapse{
    background-color: #121212;
    color: #e0e0e0;
}
body.dark-mode .text-color-black{
    color: #e0e0e0;
}
body.dark-mode .accordion-item{
    background-color: #121212 !important;
    color: #e0e0e0;
}
body.dark-mode .blueCheckbox{
    background-color: #121212;
    border: 2px solid #ffff;
}
body.dark-mode .form-control{
    background-color: #121212 !important;
    color: #e0e0e0;
}

body.dark-mode .btn{
    color: #e0e0e0;
}

body.dark-mode .table td{
    /* background-color: #121212; */
    /* color: #e0e0e0 !important; */
}
body.dark-mode .full-page-loader{
    color: #000 !important;
    background-color:#000 !important;
}
body.dark-mode .darmode-text{
    color: #000 !important;
}
body.dark-mode .table th{
    background-color: #233841;
}
body.dark-mode .settings-row-background{
    background-color: #121212;
    color: #e0e0e0;
}

body.dark-mode .floatingLabalText{
    color: #e0e0e0;
}
body.dark-mode h2 {
    color: #006699;
}
body.dark-mode .bg-light{
    background-color: #121212 !important;
}
body.dark-mode .ship {
    background-color: #997a2b !important;
    border-color: #997a2b;
}

body.dark-mode .pickup {
    background-color: #3e8e41 !important;
    border-color: #337f3b;
}

body.dark-mode .deliver {
    background-color: #999973 !important;
    border-color: #999973;
}

body.dark-mode .unknown {
    background-color: #777 !important;
    border-color: #777;
}

body.dark-mode .preparetoship th {
    background-color: #333;
}

body.dark-mode hr {
    color: #006699 !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode button:focus {
    outline: none !important;
}

body.dark-mode .text-primary-color {
    color: #e9eded !important;
}

body.dark-mode .text-secondary-color {
    color: #b38f2d !important;
}

body.dark-mode .text-muted-color {
    color: #ffffff !important;
}

body.dark-mode .primary-text-white {
    color: #e0e0e0;
}

body.dark-mode .nav-title-row {
    background-color: #006699;
}

body.dark-mode .nav-count-row {
    background-color: #997a2b;
}

body.dark-mode .modal.fade.show {
    backdrop-filter: blur(5px);
    background-color: #2c2c2c;
}

body.dark-mode .settings-modal {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .pickup-modal {
    background-color: #2a2a2a;
    color: #006699;
}

body.dark-mode .btn-color-pack-settings {
    background-color: #997a2b;
    color: #e0e0e0;
}

body.dark-mode .accordion-button:not(.collapsed) {
    color: #e0e0e0;
    background-color: #006699;
}

body.dark-mode .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

body.dark-mode .accordion-button.prep-setting-accordin {
    background-color: #333;
}

body.dark-mode .accordion-button.prep-setting-accordin:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300ccff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

body.dark-mode .dropdown-menu {
    background-color: #333 !important;
    color: #e0e0e0;
}

body.dark-mode .tt-dropdown-menu {
    background-color: #333;
    border: 5px solid #006699;
    color: #006699;
}

body.dark-mode .alert-danger {
    background-color: #997a2b;
    border-color: #997a2b;
}

body.dark-mode .card-border {
    border: 2px solid #006699;
    background-color: #1a1a1a;
}

body.dark-mode .modal-content {
    border: 2px solid #006699;
    background-color: #1a1a1a;
    /* height: 95%; */
} 

body.dark-mode .bg-white{
    background-color: #1a1a1a !important;
} 

body.dark-mode .btn-default{
    background-color: #e0e0e0;
}

body.dark-mode .card{
    /* border: 0px !important; */
}

body.dark-mode .list-group{
    background-color: #e0e0e0 !important;
}

body.dark-mode input{
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .list-group-item{
    background-color: #1a1a1a !important;
    color: white;
}

body.dark-mode .items-paid{
    background-color: #9ac09a !important;
    color:black;
  }
  body.dark-mode .reported-customer{
    background-color:  #c49e9e!important;
    color:black;
  }
  body.dark-mode .stage-notes{
    background-color: #a8a862 !important;
    color:black;
  }
  body.dark-mode .risk-profile{
    background-color: #6dbcbc !important;
    color:black;
  }

body.dark-mode .date-header-filled {
    background-color: #006699;
}


body.dark-mode .panel-default > .panel-heading {
    background-color: #96a2a6;
}

body.dark-mode .collapsed{
    background-color: #96a2a6 !important;
}

body.dark-mode .table th{
    background-color: #96a2a6;
}

body.dark-mode .import_dates_container {
    background: #96a2a6;
}

body.dark-mode .VueTables__sortable {
    background-color: #96a2a6;
}

body.dark-mode .panel {
    background-color: #1a1a1a;
    border: 1px solid #006699;
}

body.dark-mode .panel-heading {
    background-color: #333;
    color: #006699;
}

body.dark-mode .panel-footer {
    background-color: #2a2a2a;
}

body.dark-mode .dataTables_filter label,
body.dark-mode .dataTables_length label,
body.dark-mode .dataTables_info {
    color: #006699;
}

body.dark-mode .VueTables__search__input.form-control {
    background-color: #333;
    border: 2px solid #006699;
    color: #006699;
}

body.dark-mode .list-group-item.active {
    background-color: #006699 !important;
    color: #e0e0e0 !important;
}


/* Add additional dark mode overrides as needed */

body.dark-mode input[type="date"].settings-input {
}
  
body.dark-mode input[type="date"].settings-input::-webkit-calendar-picker-indicator {
    filter: invert(1); 
}

body.dark-mode .popover.b-popover.bs-popover-bottom{
    background: #1a1a1a;
}
body.dark-mode .list-unstyled.text-center{
color: #fff;
}
body.dark-mode .flex-item input{
    color: #fff !important;
    border: 1px solid #ffff !important;
}

body.dark-mode .popover-header{
    color: #fff !important;
    background: #1a1a1a;
}
body.dark-mode .popover.b-popover.bs-popover-bottom{
    border: 1px solid #ffff;
}
body.dark-mode .btn-info{
    background-color: #006699;
}
body.dark-mode .vdp-datepicker__calendar{
    background: #222121 !important;
}

body.dark-mode .min-w-365 {
    border: 1px solid #ffffff;
}
body.dark-mode .admin .incoming {
    background-color: #0099cc;
}
body.dark-mode .text-color-blue{
    color: #ffffff;
}
/**
 * Vue transition styles
 */
.vue-slide-down-enter-active, .vue-slide-down-leave-active {
    transition: max-height 2s;
    overflow: hidden;
}
.vue-slide-down-sm-enter-active, .vue-slide-down-sm-leave-active {
    transition: max-height 1s;
    overflow: hidden;
}
.vue-slide-down-xs-enter-active, .vue-slide-down-xs-leave-active {
    transition: max-height 500ms;
    overflow: hidden;
}
.vue-slide-down-xs-enter,
.vue-slide-down-xs-leave-to,
.vue-slide-down-sm-leave-to,
.vue-slide-down-enter,
.vue-slide-down-leave-to,
.vue-slide-down-sm-enter {
    max-height: 0;
}
.vue-slide-down-leave,
.vue-slide-down-enter-to {
    max-height: 700px;
}
.vue-slide-down-sm-leave,
.vue-slide-down-sm-enter-to {
    max-height: 300px;
}
.vue-slide-down-xs-leave,
.vue-slide-down-xs-enter-to {
    max-height: 140px;
}

.vue-expand-enter-active, .vue-expand-leave-active {
    transition: max-height 2s, max-width 2s;
    overflow: hidden;
}
.vue-expand-leave-active {
    transition-duration: 0.8s;
}
.vue-expand-enter,
.vue-expand-leave-to {
    max-height: 0;
    max-width: 0;
}
.vue-expand-leave,
.vue-expand-enter-to {
    max-height: 500px;
    max-width: 1000px;
}
/* Vue fade transition */
.fade-enter-active, .fade-leave-active {
    transition: opacity 1s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}

/* Vue bounce transition */
.bounce-enter-active {
    animation: bounce-in .5s;
}

.bounce-leave-active {
    animation: bounce-in .5s reverse;
}
.deliver td a:hover {
  color: white !important;
}


@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

#editShippingForm{
    max-height: calc(100vh - 150px) !important;
    overflow: auto !important;
}

.hidden-by-toggle {
    display: none;
    overflow: hidden;
}

.toggle-visible:checked + .hidden-by-toggle {
    display: block;
}

.toggle-visible:checked ~ .toggle-message {
    display: none;
}

.hidden-by-toggle.toggle-slide-down {
    transition: max-height 1s;
    display: block;
    max-height: 0;
}

.toggle-visible:checked + .hidden-by-toggle.toggle-slide-down {
    max-height: 600px;
}

.custome-css.col-lg-12 .timer-container{
    width: 100%;
    padding-left: 50%;
}
.custome-css.col-lg-12 div .no-gutters div .card-header-tabs{
    width: 100%;
    padding-left: 50%;
}

/* Dark Mode CSS */

body.dark-mode {
    background-color: #121212;
    color: #fff; /* Default text color near white for dark mode */
}

body.dark-mode .checkboxLabel{
    color: #fff !important;
}
/* Adjust generic text elements for dark mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode a,
body.dark-mode span,
body.dark-mode label,
/* body.dark-mode div, */
body.dark-mode th,
body.dark-mode td {
    color: #fff !important; /* Set default text color to near white */
}

/* Preserve existing button colors */
body.dark-mode .btn {
    color: inherit; /* Retain button text color */
}

/* Text colors for panels, accordions, and form labels */
body.dark-mode .accordion-item,
body.dark-mode .accordion-button,
body.dark-mode .panel-heading,
body.dark-mode .list-group-item,
body.dark-mode .text-primary-color,
body.dark-mode .text-muted-color,
body.dark-mode .VueTables__sortable {
    color: #fff !important; /* Adjust text to near white for readability */
}

/* Specific adjustments for red and other colored text in dark mode */
body.dark-mode .text-danger,
body.dark-mode .error,
body.dark-mode .alert-danger,
body.dark-mode .red-block {
    color: #e50c0c !important; /* Lighten red text to maintain readability */
}

body.dark-mode .text-secondary-color {
    color: #fff !important; /* Maintain distinct look for secondary text, ensuring visibility */
}

/* Keep colors for icons, logos, and tooltips unchanged */
body.dark-mode i,
body.dark-mode .fa,
body.dark-mode .nav-logo,
body.dark-mode .input-icon,
body.dark-mode .checkbox-label .ball,
body.dark-mode .fa-settings-icons,
body.dark-mode .fa-add-basic-icons {
    color: inherit !important; /* Do not change color for icons and logos */
}

/* Adjust input fields and placeholders */
body.dark-mode .form-control,
body.dark-mode .settings-input,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    color: #fff !important;
}


body.dark-mode .settings-input,
/* body.dark-mode input, */
body.dark-mode select,
body.dark-mode textarea {
    background-color: #1a1a1a !important;
}

body.dark-mode ::placeholder {
    color: #b0b0b0 !important; /* Lighten placeholder color for better visibility */
}

/* Adjustments for popovers, tooltips, and dropdowns */
body.dark-mode .popover-header,
body.dark-mode .popover-body,
body.dark-mode .dropdown-menu {
    background-color: #1a1a1a !important;
    color: #fff !important;
}

/* Adjust accordion button colors and icons */
body.dark-mode .accordion-button:not(.collapsed)::after,
body.dark-mode .accordion-button.prep-setting-accordin:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Maintain button colors while improving text contrast for readability */
body.dark-mode .btn-color-pack-settings,
body.dark-mode .btn-color-primary,
body.dark-mode .btn-color-warning,
body.dark-mode .btn-color-muted,
body.dark-mode .btn-color-danger,
body.dark-mode .btn-color-success,
body.dark-mode .btn-color-sky,
body.dark-mode .btn-color-prep,
body.dark-mode .btn-color {
    color: #fff !important; /* Lighten button text for better contrast in dark mode */
}

/* Adjust other interface elements */
body.dark-mode .accordion-button,
body.dark-mode .VueTables__search-field label,
body.dark-mode .checkbox-label,
body.dark-mode .text-color-black {
    color: #fff !important; /* Make all regular text light for visibility */
}

body.dark-mode .VueTables__search__input.form-control,
body.dark-mode .panel {
    background-color: #1a1a1a !important;
    color: #fff !important; /* Light text on dark background for visibility */
}

/* Link color adjustments in dark mode */


body.dark-mode .hover-yellow:hover {
    color: #ff9933 !important; /* Highlight hover color for better contrast */
}

/* Ensure consistent tooltip and form label colors */
body.dark-mode .form-control[disabled],
body.dark-mode .popover.b-popover,
body.dark-mode .tooltip,
body.dark-mode .popover-header,
body.dark-mode .list-group-item {
    background-color: #1a1a1a !important;
    color: #fff !important; /* Text near white for better contrast */
}


body.dark-mode .border-table-outside{
    border: 2px solid #ffffff;
}

body.dark-mode .settings-input{
    border: 2px solid #ffffff !important;
}

body.dark-mode .bg-success{
    color: #006699 !important;
}

body.dark-mode .btn-color-primary:hover {
    /* background-color: #006699; */
    color: #006699 !important;
}

body.dark-mode .btn-color-view-failed:hover {
    /* background-color: #006699; */
    color: #006699 !important;
}
body.dark-mode .btn-color-primary:hover{
    background-color: #e0e0e0 !important;
    color: #006699 !important;

}
body.dark-mode .btn-primary:hover{
    background-color: #e0e0e0 !important;
    color: #006699 !important;

}
body.dark-mode .btn-info:hover{
    background-color: #e0e0e0 !important;
    color: #006699 !important;
}
body.dark-mode .btn-color-sky:hover{
    background-color: #e0e0e0 !important;
    color: #006699 !important;
}
.checkbox-large{
    width: 60px !important;
    height: 25px !important;
}
.thick-label{
    font-size: 1rem !important;
    font-weight: 600;
}
.flex-col-min{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.highlight-target-success :target {
    background-color: #dff0d8;
}

[v-cloak] {
    display: none;
}

#payment-received-app .modal-body .blink {
  animation: smooth-blink 1.5s infinite;
}

.scrollbox {
    width: 75%;
    height: 400px;
    resize: both;
    color: #000;
}