@font-face {
    font-family: Montserrat5818 src: url("../fonts/Montserrat/Montserrat-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: Open Sans;
    src: url("../fonts/OpenSans/OpenSans-Light.ttf");
    font-weight: 300;
}

@font-face {
    font-family: Open Sans;
    src: url("../fonts/OpenSans/OpenSans-Medium.ttf");
    font-weight: 400;
}

@font-face {
    font-family: Open Sans;
    src: url("../fonts/OpenSans/OpenSans-Regular.ttf");
    font-weight: 500;
}

@font-face {
    font-family: Open Sans;
    src: url("../fonts/OpenSans/OpenSans-Semibold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: Open Sans;
    src: url("../fonts/OpenSans/OpenSans-bold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: Open Sans;
    src: url("../fonts/OpenSans/OpenSans-ExtraBold.ttf");
    font-weight: 800;
}

@font-face {
    font-family: Fira Sans;
    src: url("../fonts/FiraSans/FiraSans-Regular.ttf");
    font-weight: 600;
}

.msgtext {
    color: red;
    font-size: 10px;
    line-height: 14px;
}

:root {
    --text-link: #1bd0cb;
    --title: #d4d5d7;
    --text-contrast: #ffffff;
    --primary-dark: #f26247;
    --primary-darker: #cb3f23;
    --secondary-dark: #717c84;
    --secondary-darker: #606a71;
    --text_primary_accent: #f7ba62;
    --text-secondary_accent: #f7fafc;
    --text-grey-light: #9ca7af;
    --background-secondary: #292f38;
    --background-primary: #1f242b;
    --background-blur: #788494;
    --background-dark: #15191f;
    --text-lighter: #ffffffb3;
    --text-light: #cdd1d4;
    --navbar-dark: #252b33;
    --nav-link: #9ea2a8;
    --card-header: #3d4450;
    --status-green-dark: #016c4f;
    --status-green-light: #0c8e6b;
    --status-yellow-dark: #c38a0b;
    --status-yellow-light: #e2a213;
    --status-red-dark: #892121;
    --status-red-light: #d92c2b;
    --status-green-darker: #337427;
    --status-green-lighter: #52a743;
    --status-blue-dark: #2886b1;
    --status-blue-light: #105879;
    --status-orange-dark: #a36100;
    --status-orange-light: #e59119;
}

body,
html {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    background-color: #f2f2f2 !important;
}

#blurContainer {
    height: 100vh;
    width: 100%;
    position: absolute;
    filter: blur(0.9rem);
    opacity: 0.7;
    background: url("../imgs/background2.PNG");
    background-repeat: no-repeat;
    background-size: cover;
}

#greyContainer {
    height: 100vh;
    width: 100%;
    position: absolute;
    background: var(--background-blur);
    opacity: 0.5;
}

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

a {
    color: #0366d6;
    text-decoration: none;
}

sup {
    font: normal normal bold 13px/24px Open Sans;
    vertical-align: baseline;
}

.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;
}

::-webkit-scrollbar {
    width: 0.4rem;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px var(--background-dark);
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #0266FF !important;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

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

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

.box-shadow {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

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

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

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

/* home page  */

/*.center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}*/

::placeholder {
    text-align: left;
    font: normal normal normal 16px/22px Open Sans;
    letter-spacing: 0px;
    color: var(--text-contrast);
    opacity: 0.4;
}

.message {
    text-align: center;
    font: normal normal normal 14px/20px Open Sans;
    letter-spacing: 0px;
    color: var(--text-contrast);
    width: 19rem;
    margin-top: 1.5rem;
}

/*.backgroundContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
*/
.logo {
    overflow: visible !important;
}

.signInContainer,
.resetContainer,
.letsStartContainer,
.otpContainer,
.personalDetailsContainer,
.idDetailsContainer,
.congratsContainer,
.almostDoneContainer,
.selectPlanContainer,
.finalStepContainer,
.newPasswordContainer {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    /*display: flex;*/
    text-align: center;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    /*width: 500px;*/
    padding: 1rem 0;
    /*height: 500px;*/
    margin: 0;
    padding: 50px;
}

.signInContainer {
    padding: 100px 50px 65px;
}

::-webkit-scrollbar {
    width: 0.4rem;
    height: 8px;
}

.more.context-menu i.fa {
    font-size: 4px;
    letter-spacing: 2px;
}

button.shipp-btn.service.requested.–.basic.photos-status {
    width: 146px;
    margin-top: -6px;
}

.sign-in-label {
    color: var(--text-contrast);
}

.user-icon,
.password-icon {
    position: relative;
    right: 1.5rem;
}

.create-icon {
    margin: auto;
    margin-left: 0.5rem;
    position: relative;
    bottom: 2px;
}

.close-btn {
    position: absolute;
    right: 16px;
    top: 16px;
}

    .close-btn img {
        height: 28px;
    }

.back-btn {
    position: absolute;
    left: 16px;
    top: 16px;
    height: 24px;
    z-index: 1;
}

#btnSkip {
    outline: none;
    background: none;
    color: var(--text-link);
    border: none;
    font: normal normal 600 16px/20px Open Sans;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    height: 24px;
}

.btn-label {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-contrast);
    margin: auto 0;
    margin-left: 6px;
}

.sign-in-btn,
.btn {
    border: none;
    background: #0266FF;
    width: 100%;
    padding: 10px !important;
    border-radius: 12px;
    margin-top: 15px;
}

#signinEmail {
    position: relative;
    top: 1.5rem;
    margin-bottom: 2rem;
    background: transparent linear-gradient(266deg, #2d343e 0%, #2d343e 100%) 0% 0% no-repeat padding-box;
}
/*
#signinSub {
    position: relative;
    top: 1rem;
    margin-bottom: 0.5rem;
}*/

.btn-icon {
    margin: auto 0;
}

.label {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #15191f;
    margin-top: 40px;
    margin-bottom: 5px;
}

p.signin-text {
    font-size: 13px;
    font-weight: 400;
    width: 75%;
    margin: auto;
    margin-bottom: 40px;
}

.create-account-label {
    color: var(--text-link);
    font-size: 14px;
    font: normal normal 600 14px/15px Open Sans;
    margin: auto;
}

.forgot-password-label {
    font: normal normal normal 14px/20px Open Sans;
    letter-spacing: 0px;
    color: var(--text-secondary_accent);
}

.reset-option {
    font: normal normal 600 14px/20px Open Sans;
    letter-spacing: 0px;
    color: #bf4b33 !important;
}

.account-label {
    font: normal normal normal 12px/20px Open Sans;
    letter-spacing: 0px;
    color: var(--text-secondary_accent);
    margin: 1rem 0 0 0;
}

/* Reset Password */

.resetContainer.message {
    color: var(--text-contrast);
    width: 15rem;
    font-size: 14px;
    text-align: center;
}

.title,
.almost-done-title {
    text-align: center;
    font: normal normal 600 20px/24px Montserrat;
    letter-spacing: 0px;
    color: var(--text_primary_accent);
    position: absolute;
    top: 2rem;
}

/* lets start */

.lets-start-title {
    text-align: center;
    font: normal normal 600 20px/24px Montserrat;
    letter-spacing: 0px;
    color: var(--text_primary_accent);
    margin-top: 1.5rem;
}

.form-wrapper {
    display: flex;
}

.letsStartContainer .send-otp-btn {
    position: relative;
    top: 2rem;
    left: 0;
}

.letsStartContainer .note {
    width: 21rem;
    color: var(--text-grey-light);
    font-size: 14px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font: normal normal normal 14px/20px Open Sans;
    margin-top: 1.3rem;
    text-align: center;
}

.letsStartContainer .form-feild {
    padding-left: 0;
    position: relative;
}

    .letsStartContainer .form-feild:nth-child(2) {
        padding-left: 10px;
        position: relative;
    }

.letsStartContainer .progress {
    top: 0rem;
    margin: 1rem;
}

.otpContainer .progress .bar {
    width: 5rem;
}

.code-feild,
.number-feild {
    font: normal normal normal 16px/22px Open Sans;
}

.code-feild {
    width: 8rem !important;
}

#mNumber {
    width: 225px !important;
}
/* .number-feild {
  width: 12.5rem !important;
} */
.phone-icon,
.dropdown-icon {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

/* enter otp  */

.resetContainer .message {
    color: var(--text-contrast);
    width: 17rem;
    text-align: center;
    margin-top: 6rem;
    font: normal normal normal 14px/20px Open Sans;
}

.resetContainer .input-feild {
    width: 345px !important;
    position: relative;
    left: 47%;
    transform: translateX(-50%);
}

.resend-option {
    display: flex;
    justify-content: center;
}

.resend {
    color: var(--text-lighter);
    font: normal normal normal 14px/20px Open Sans;
    letter-spacing: 1.4px;
}

    .resend:hover,
    .resend-link,
    .resend-link-pwd:hover {
        text-decoration: none;
        color: var(--text-contrast);
    }

.resend-link,
.resend-link-pwd {
    color: var(--text-lighter);
    font: normal normal normal 14px/20px Open Sans;
}

.timer {
    color: var(--text-contrast);
    font: normal normal 600 14px/20px Open Sans;
    padding-left: 0.5rem;
}

.otp-container {
    display: flex;
    justify-content: space-evenly;
    margin: 8rem 0 1rem;
    width: 22rem;
}

.otp {
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--background-dark);
    border-radius: 4px;
    text-align: center;
    color: var(--text-contrast);
    caret-color: var(--primary-darker);
    font-size: 28px;
    border: none;
    outline: none;
}

.otpContainer .message {
    color: var(--text-contrast);
    width: 15rem;
    text-align: center;
    position: relative;
    top: 7rem;
    font: normal normal normal 14px/20px Open Sans;
}

.next-btn,
.pay-btn {
    position: relative;
    top: 4rem;
    left: 50%;
    transform: translatex(-50%);
}

#btnOtp {
    margin-top: 4rem;
}

/* id details */
/* .t-0{
   top:0 !important;
} */
.idDetailsContainer .message {
    color: var(--text-contrast);
    text-align: center;
    margin-top: 5.5rem;
    font: normal normal normal 14px/20px Open Sans;
}

.uploadFilesContainer {
    position: relative;
}

    .uploadFilesContainer p {
        text-align: center;
    }

    .uploadFilesContainer .custom-file-input {
        height: 0;
    }

.upload-icon {
    position: relative;
    top: 0.7rem;
}

.idDetailsContainer .note {
    text-align: center;
    font: normal normal normal 16px/22px Open Sans;
    letter-spacing: 0px;
    color: var(--text-contrast);
    margin-top: 1rem;
}

.idDetailsContainer .progress .bar {
    width: 10rem;
}

#img-preview {
    width: 100%;
    height: 175px;
    border-radius: 0.5rem;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px dotted #f7ba62;
    cursor: pointer;
}

#image-preview {
    width: 100%;
    height: 175px;
    border-radius: 0.5rem;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px dotted #f7ba62;
    cursor: pointer;
}

.change-img {
    position: absolute;
    width: 100%;
    bottom: -125px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    background: linear-gradient(50deg, #000000ce, #000000a8);
}

    .change-img .change-label {
        font: normal normal 600 12px/21px Open Sans;
        letter-spacing: 1.2px;
        color: #fff;
        text-align: center;
        margin-bottom: 0;
        padding: 6px;
    }

/* delivery address */
.deliveryAddressContainer,
.retailCenterContainer {
    width: 786px;
    position: relative;
    background-color: var(--background-primary);
    border-radius: 8px;
    padding: 1rem 0;
    height: 500px;
}

    .retailCenterContainer .deliveryAddressContainer .progress {
        top: 3.5rem;
    }

    .deliveryAddressContainer .progress .bar {
        width: 15rem;
    }

    .deliveryAddressContainer .message {
        margin-top: 5rem !important;
    }

    .deliveryAddressContainer .btn {
        left: 49%;
    }

.addressContainer {
    width: 51%;
    background-color: var(--background-primary);
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

    .addressContainer .message {
        text-align: center;
        font: normal normal normal 14px/20px Open Sans;
        letter-spacing: 0px;
        color: var(--text-contrast);
        width: 100%;
    }

    .addressContainer .title {
        position: relative !important;
    }

    .addressContainer .scroll .scroll-hide {
        position: relative;
        left: 5px;
        width: 360px;
        padding-right: 10px;
    }

.search-container {
    position: relative;
    left: 49%;
    transform: translateX(-50%);
    width: 345px !important;
    height: 3rem !important;
    font: normal normal normal 16px/22px Open Sans;
}

.mapAreaContainer {
    width: 50%;
    background-color: var(--text-grey-light);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.btn-shadow {
    box-shadow: 0px -5px 8px 16px var(--background-primary);
}

.retailCenterContainer .addressContainer .progress {
    top: 2.5rem !important;
}

    .retailCenterContainer .addressContainer .progress .bar {
        width: 17.5rem;
    }

.retailCenterContainer .message {
    margin-top: 4rem;
}

.retailCenterContainer .btn {
    box-shadow: 0px -5px 8px 16px var(--background-primary);
    left: 49%;
}
/* input feilds  */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-container {
    /*display: flex;*/
    position: relative;
    /*width: 345px;*/
}

.form-group {
    position: relative;
    /*width: 300px;*/
    max-width: 100%;
    margin-bottom: 0 !important;
    /*height: 54px;*/
    right:unset!important;
}

.input-feild {
    background-color: var(--background-dark);
    padding: 0.5rem;
    border: none;
    outline: none;
    border-radius: 4px;
    color: var(--text-contrast);
    caret-color: var(--primary-darker);
}

.form-group input::placeholder {
    font-size: 14px;
    letter-spacing: 0px;
    color: #605757;
}

.form-group input {
    border: none;
    color: #424242;
    font: normal normal 600 14px/22px Open Sans;
    display: block;
    background-color: var(--background-dark);
    padding-left: 12px;
    padding-bottom: 0;
    padding-top: 16px;
    width: 100%;
    border-radius: 10px;
    padding: 15px 20px;
    background: #F7F8FD;
}

.signInContainer .form-group img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    /*mix-blend-mode:multiply;*/
}

.signInContainer .form-group span {
    cursor: pointer;
}

.form-group label,
input:placeholder-shown + .form-control-placeholder {
    color: var(--text-lighter);
    font: normal normal normal 12px/22px Open Sans;
    position: absolute;
    pointer-events: none;
    top: 0;
    transform: translate(12px, 24px);
    transition: all 0.2s ease-in-out;
    left: 0px;
    opacity: 0.4;
}

.form-group input:valid,
.form-group input:focus {
    outline: none;
}


.float {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    /* background-color: var(--background-dark); */
    height: 3.4rem;
    width: 3rem;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-contrast);
    box-shadow: 0 0 0 30px var(--background-dark) inset !important;
    border-radius: 4px;
    caret-color: var(--primary-darker);
    border: 4px solid var(--background-dark);
    padding-left: 7px;
}*/

/* congrates screen  */
.congrates-img {
    position: relative;
    top: 2rem;
}

h1 {
    text-align: center;
    font: normal normal normal 32px/20px Open Sans;
    letter-spacing: 0px;
    color: var(--text-link);
    font-weight: 600;
    margin: 1rem 0;
}

.card-container {
    width: 22rem !important;
}

.cards-types {
    width: 18rem;
    display: flex;
    justify-content: space-around;
    margin: 1rem;
}

.flex {
    display: flex;
}

.expiry,
.cvv {
    width: 10.3rem !important;
}

.cvv-container {
    position: relative;
    left: 0.7rem;
}

.expiry-container {
    position: relative;
    left: 11rem;
}

#adCardNumber,
#adCVV {
    height: 54px !important;
    text-align: left !important;
    font-size: 16px !important;
}

/* retail center  */
.retail-details-container {
    background-color: var(--background-secondary);
    margin: 0 1.3rem 0.5rem;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    margin: 0;
    margin-bottom: 1rem;
}

.checkbox-container {
    width: 10%;
}

.retail-areaname {
    font: normal normal 600 16px/20px Open Sans;
    color: var(--text-contrast);
    margin-bottom: 0px;
    margin-top: 4px;
}

.distance {
    font: normal normal normal 12px/20px Open Sans;
    color: var(--text-contrast);
}

.retail-address {
    font: normal normal normal 12px/18px Open Sans;
    color: var(--text-light);
    margin-bottom: 0;
    margin-top: -4px;
}

/* almost done screen  */

.almostDoneContainer .message {
    margin-top: 5rem;
}

.almostDoneContainer .progress {
    top: 3.5rem !important;
}

    .almostDoneContainer .progress .bar {
        width: 20rem !important;
    }

.almostDoneContainer .next-btn {
    top: 2rem !important;
}

/* select plan screen  */

.selectPlanContainer p {
    margin: 0;
}

.selectPlanContainer .message {
    margin-top: 5.5rem;
    width: 20rem;
}

.selectPlanContainer .flex {
    border-bottom: 1px solid var(--text-grey-light);
}

.selectPlanContainer .progress .bar {
    width: 12.5rem;
}

.plan-container,
.summary-container {
    box-shadow: 0px 4px 10px 10px var(--background-dark);
    border-radius: 4px;
    width: 345px;
    margin-top: 1.5rem;
    border: 1px solid var(--secondary-dark);
}

.plan-title {
    font: normal normal 600 16px/19px Montserrat;
    letter-spacing: 1.6px;
    color: var(--text-contrast);
    background: transparent linear-gradient( 261deg, var(--secondary-dark) 0%, var(--secondary-darker) 100% ) 0% 0% no-repeat padding-box;
    margin: 0;
    padding: 1rem;
    position: relative;
}

ul {
    margin: 0.5rem 0;
}

.features > li {
    font: normal normal 600 14px/20px Open Sans;
    letter-spacing: 0px;
    color: var(--text-contrast);
    font-weight: 400;
    position: relative;
    left: 2.5rem;
    padding: 0.1rem;
}

.price {
    font: normal normal 600 36px/49px Open Sans;
    color: var(--text-contrast);
    padding-left: 1rem;
}

.currency {
    font: normal normal 600 14px/19px Open Sans;
    letter-spacing: 1.4px;
    color: var(--text-contrast);
    text-transform: uppercase;
    padding: 0.5rem 0 0 0.5rem;
}

.validity {
    font: normal normal 300 14px/19px Open Sans;
    letter-spacing: 0px;
    color: var(--text-contrast);
    text-transform: capitalize;
    padding: 0 0 0 0.5rem;
}

.selectPlanContainer .next-btn {
    top: 1rem !important;
    box-shadow: 0px -5px 8px 16px var(--background-primary);
}

.selectPlanContainer .checkbox-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-100%);
}

.selectPlanContainer .scroll .scroll-hide {
    max-height: 17rem !important;
    padding-right: 8px;
    position: relative;
    left: 7px;
    margin-top: 24px;
}

.searchWrapper {
    width: 380px;
    height: 40px;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
}

.msterpopfld {
    min-height: 40px !important;
    background: #f6f7f8;
    border: none;
    width: 100%;
    padding: 8px;
    height: 40px;
    vertical-align: top;
    margin-bottom: 15px;
    margin: 0 auto 15px;
}


div#NotificationData_length label,
.dataTables_wrapper .dataTables_filter input,
div#NotificationData_filter label,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font: normal normal 400 14px/20px "Open Sans";
    color: #15191f !important;
}

button#btnsearch {
    border: none;
}

button#btnModalFilter {
    border: none;
    background: #fff;
}

#planList {
    position: relative;
    bottom: 24px;
}

/* final step screen  */

.final-step-title {
    font: normal normal normal 14px/20px Open Sans;
    color: var(--text-contrast);
    margin-top: 4.5rem;
}


.apply-btn p {
    margin: auto;
}

.summary-container {
    width: 345px;
    margin-top: 1.2rem;
}

    .summary-container .flex {
        justify-content: space-between;
        margin: 0 0.8rem;
    }

        .summary-container .flex span {
            font: normal normal normal 16px/22px Open Sans;
            letter-spacing: 0px;
            color: var(--text-contrast);
            text-transform: capitalize;
            margin: 0.5rem 0;
        }

.pay-btn {
    top: 0;
    box-shadow: 0px -5px 8px 16px var(--background-primary);
}

.total-amt {
    background-color: var(--text-link);
    margin: 0 !important;
}

    .total-amt span {
        margin: 1rem !important;
    }

.finalStepContainer .footnote {
    text-align: center;
    font: normal normal normal 14px/20px Open Sans;
    color: var(--text-contrast);
    width: 22rem;
}

.finalStepContainer .message {
    margin-top: 0 !important;
}

.security {
    font: normal normal 600 14px/20px Open Sans;
    color: var(--text-link);
    text-align: center;
    margin: 1rem 0;
}

.finalStepContainer .scroll .scroll-hide {
    max-height: 15rem !important;
    position: relative;
    left: 6px;
}

.finalStepContainer .progress {
    top: 3.5rem !important;
}

    .finalStepContainer .progress .bar {
        width: 15rem;
    }

/* personal details screen  */

.personalDetailsContainer .message {
    margin-top: 5.5rem;
}

.personalDetailsContainer .scroll .scroll-hide {
    max-height: 14rem;
    position: relative;
    left: 8px;
    padding-right: 8px;
}

.personalDetailsContainer .progress .bar {
    width: 7.5rem;
}

.personalDetailsContainer .square {
    right: 10rem;
    top: 1.5rem;
}

.terms {
    font: normal normal normal 14px/20px Open Sans;
    color: var(--text-contrast);
}

    .terms span {
        color: var(--text-link);
    }

.terms-and-condition {
    margin-top: 1rem;
}

.scroll .scroll-hide {
    max-height: 12rem;
    overflow: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    overflow-x: hidden !important;
}

    .scroll .scroll-hide::-webkit-scrollbar {
        width: 0.4rem;
    }

    .scroll .scroll-hide::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px var(--background-dark);
    }

    .scroll .scroll-hide::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: transparent linear-gradient(260deg, var(--primary-dark) 0%, var(--primary-darker) 100%) 0%;
    }

.progress {
    height: 0.4rem;
    width: 345px;
    border-radius: 1rem;
    background-color: var(--background-dark);
    position: relative;
    top: 4rem;
}

    .progress .bar {
        height: 0.3rem;
        background-color: var(--text-link);
        width: 2.5rem;
        border-radius: 1rem;
    }

/* checkbox  */

.square {
    position: relative;
}

    .square label {
        background-color: var(--background-dark);
        border-radius: 20%;
        cursor: pointer;
        height: 20px;
        left: 0;
        position: absolute;
        top: 0;
        width: 20px;
    }

        .square label:after {
            border: 2px solid #fff;
            border-top: none;
            border-right: none;
            content: "";
            height: 4px;
            left: 5px;
            position: absolute;
            top: 7px;
            transform: rotate(-45deg);
            width: 12px;
            opacity: 0;
        }

    .square input[type="checkbox"] {
        visibility: hidden;
    }

        .square input[type="checkbox"]:checked + label {
            background-color: var(--text-link);
        }

            .square input[type="checkbox"]:checked + label:after {
                opacity: 1;
            }

/* circular checkbox  */

.circular-checkbox-container {
    display: block;
    position: absolute;
    padding-left: 39px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    right: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .circular-checkbox-container .round {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: 0;
    height: 25px;
    width: 25px;
    background-color: var(--background-dark);
    border-radius: 5px;
}

.circular-checkbox-container:hover .round ~ .checkmark {
    background-color: var(--background-dark);
}

.circular-checkbox-container .round:checked ~ .checkmark {
    background-color: #1b395cfa;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.circular-checkbox-container .round:checked ~ .checkmark:after {
    display: block;
}

.circular-checkbox-container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 7px;
    height: 13px;
    border: 0.5px solid var(--text-contrast);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.circular-checkbox-container2 {
    display: block;
    position: absolute;
    padding-left: 39px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    right: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .circular-checkbox-container2 .round2 {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark2 {
    position: absolute;
    top: 6px;
    height: 17px;
    width: 17px;
    background-color: #707070;
    right: 207px;
    border-radius: 5px;
}

.circular-checkbox-container2:hover .round2 ~ .checkmark2 {
    background-color: var(--background-dark);
}

.circular-checkbox-container2 .round2:checked ~ .checkmark2 {
    background-color: #1b395cfa;
}

.checkmark2:after {
    content: "";
    position: absolute;
    display: none;
}

.circular-checkbox-container2 .round2:checked ~ .checkmark2:after {
    display: block;
}

.circular-checkbox-container2 .checkmark2:after {
    left: 6px;
    top: 2px;
    width: 7px;
    height: 13px;
    border: 0.5px solid var(--text-contrast);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* new password generate screen  */
.newPasswordContainer .message {
    width: 13rem !important;
    margin-top: 6rem;
}

.newPasswordContainer .change-btn {
    top: 5rem !important;
}

/* short-hand stylings */
.m-auto {
    margin: auto;
}

.flex {
    display: flex;
}

.center-x {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.send-otp {
    margin-top: 8rem;
}

@media only screen and (max-width: 425px) {
    .s2d-navbar.nav_new .navbar-nav .s2d-nav-link {
        margin-left: 10px;
    }

    .searchWrapper {
        width: 78%;
    }

    .search-switch {
        display: flex;
        justify-content: flex-start;
    }

    /*ul.navbar-nav.flex-grow-1.nav-menu {
        flex-direction: column;
        height: auto;
        display: block;
        position: absolute;
        top: 67px;
        left: 0;
        background-color: #202020;
        z-index: 100;
        width: 100%;
        border-radius: 5px;
    }
*/
    /*.signInContainer,
    .resetContainer,
    .letsStartContainer,
    .otpContainer,
    .personalDetailsContainer,
    .idDetailsContainer,
    .congratsContainer,
    .almostDoneContainer,
    .selectPlanContainer,
    .finalStepContainer,
    .newPasswordContainer {
        width: 90vw;
    }*/


    /*
    .form-group input {
        width: 300px !important;
    }*/

    .sign-in-btn,
    .btn {
        width: 260px;
    }

    .progress {
        width: 300px;
        position: absolute;
        top: 8rem !important;
    }

    .letsStartContainer .note {
        font-size: 13px;
    }

    .number-feild {
        width: 11rem !important;
    }

    .message,
    .idDetailsContainer .message {
        font-size: 12px;
    }

    .change-img {
        bottom: -55px;
    }

    .selectPlanContainer .scroll .scroll-hide {
        width: 300px;
    }

    .apply-btn {
        right: 5rem;
    }

    .plan-container,
    .summary-container {
        margin-top: 12px;
        position: relative;
        left: 2px;
        width: 295px;
    }

    .finalStepContainer .scroll .scroll-hide {
        max-height: 19rem !important;
    }

    .cards-types {
        margin-top: 2rem;
    }

    .almostDoneContainer .flex {
        width: 600px;
    }

    .almostDoneContainer .expiry,
    .almostDoneContainer .cvv {
        width: 140px;
    }

    .addressContainer .scroll .scroll-hide {
        position: relative;
        width: 310px;
        left: 3px;
        padding-bottom: 4rem;
        bottom: 6px;
    }

    .deliveryAddressContainer .btn {
        left: 50%;
        bottom: 8px;
    }

    .scroll .scroll-hide {
        max-height: 10rem;
    }

    .addressContainer {
        width: 100%;
    }

    .search-container {
        width: 300px !important;
    }

    .addressContainer {
        width: 100%;
    }

    .mapAreaContainer {
        width: 100%;
        height: 45%;
        position: absolute;
        top: 81px;
        right: 0;
        border-radius: 0;
    }

    .deliveryAddressContainer,
    .retailCenterContainer {
        width: 320px;
        height: 600px;
    }

    .mobile-view {
        height: 625px !important;
    }

    .mmt-19 {
        margin-top: 19rem;
    }

    .retailCenterContainer .btn {
        left: 50%;
        position: absolute !important;
        bottom: 8px;
    }

    .congrates-img {
        width: 16rem;
        margin-top: 2rem;
    }

    .resetContainer .input-feild {
        width: 295px !important;
    }

    .retailCenterContainer .btn {
        box-shadow: 0px -5px 8px 8px var(--background-primary);
    }

    .retailCenterContainer .message {
        margin-top: 24rem;
    }

    .retailCenterContainer .addressContainer .progress {
        top: 4.5rem !important;
    }

    #mNumber {
        width: 182px !important;
    }
}

/* navbar styling */

.s2d-navbar {
    background-color: var(--navbar-dark);
    border-radius: 6px;
}

    .s2d-navbar .navbar-nav .s2d-nav-link {
        color: var(--nav-link);
        font: normal normal 600 16px/20px Open Sans;
    }

/* dashboard styling */
.user-greet {
    margin: 24px 0;
}

#features-container {
    margin-top: 24px;
}

.package-container .flex-container,
#shipment-container .flex-container {
    display: flex;
    justify-content: space-between;
}

#user-name {
    font: normal normal 600 24px/29px Montserrat;
    color: var(--text_primary_accent);
}

#shipment-title,
#shipments-title,
#packages-title,
#items-in-title,
#package-history-title,
#shipment-history-title {
    font: normal normal bold 14px/20px "Open Sans";
    color: #15191f;
}

#packages-title {
    /* margin: 8px 0 20px; */
}

#packages-title,
#shipment-title,
.total-package-count {
    color: #15191f !important;
}

.packages-body-scroll {
    max-height: 75vh;
    overflow: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    overflow-x: hidden !important;
}

    .packages-body-scroll::-webkit-scrollbar {
        width: 0.4rem;
    }

    .packages-body-scroll::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px var(--background-dark);
    }

    .packages-body-scroll::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: transparent linear-gradient(260deg, var(--primary-dark) 0%, var(--primary-darker) 100%) 0%;
    }

#auto-ship-container {
    background: #f4f6f8;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 5px;
}

.card-body {
    background-color: var(--background-secondary);
}

.card-header {
    background-color: var(--card-header);
    padding: 7px 15px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.txt-center {
    text-align: center;
}

.package-id,
.shipment-id,
.item-id {
    margin: 0;
    font: normal normal 600 10px/17px "Open Sans";
    color: #fff;
}

.package-from,
.shipment-from,
.item-name {
    margin: 0;
    font: italic normal normal 12px/17px "Open Sans";
    color: #fff;
}

.received-title,
.shipment-title,
.total-val-title,
.weight-title,
.total-weight-title,
.estimate-title,
.total-declared-title,
.total-item-title,
.order-total-title {
    margin: 0;
    font: normal normal 300 10px/14px "Open Sans" !important;
    color: var(--title);
    /* color: #15191F; */
}

.auto-ship-title,
.auto-ship-days {
    font: normal normal normal 10px/20px Open Sans;
    letter-spacing: 1px;
    color: var(--text-contrast);
    text-transform: uppercase;
}

.receved-date,
.shipment-date,
.estimate-date,
.total-val,
.weight-val,
.total-weight-val,
.total-declared-val,
.total-item-val,
.order-total-val {
    margin: 0;
    font: normal normal normal 12px/16px "Open Sans" !important;
    color: var(--text-contrast);
    /* color: #15191F; */
}

.package-received-date {
    font: normal normal 600 14px/21px "Open Sans";
    letter-spacing: 0px;
    color: var(--text-contrast);
}

.package-received-status {
    font: normal normal normal 14px/21px Open Sans;
    letter-spacing: 0px;
    color: var(--text-contrast);
}

.package-count {
    background: #f05133 0% 0% no-repeat padding-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-left: 5px;
}

.item-detail-header {
    background: transparent linear-gradient( 93deg, var(--status-green-dark) 0%, var(--status-green-light) 100% ) 0% 0% no-repeat padding-box;
    border-radius: 4px 4px 0px 0px;
}

    .item-detail-header:nth-child(2) {
        background: transparent linear-gradient(93deg, #a5270f 0%, #e44e30 100%) 0% 0% no-repeat padding-box;
    }

.time-line {
    padding-bottom: 16px;
    border-left: 2px dashed #e44e30;
    padding-left: 24px;
    /* filter: grayscale(1); */
    position: relative;
}

.time-line-icon {
    background: url(../imgs/facility.png);
    height: 30px;
    background-repeat: no-repeat;
    position: absolute;
    width: 30px;
    left: -15px;
    background-color: var(--background-primary);
    top: 8px;
}

.btnpack-detail {
    font: normal normal 600 12px/20px Open Sans;
    letter-spacing: 1.2px;
    color: var(--text-secondary_accent);
    width: auto;
}

.btnorder-details {
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    font: normal normal normal 12px/20px Open Sans;
    letter-spacing: 1.2px;
    color: var(--text-link) !important;
    text-transform: uppercase;
    position: relative;
    top: 13px;
}

.detail-btn {
    font: normal normal 600 12px/20px Open Sans;
    letter-spacing: 1.2px;
    color: var(--text-secondary_accent);
    float: right;
    border-radius: 3px;
    outline: none;
    border: none;
    background-color: #333942;
    padding: 5px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90px;
    height: 27px;
    position: absolute;
    right: 9px;
    bottom: 9px;
}

.view-all-btn {
    margin: 0;
    color: #15191f;
    font: normal normal 10px/16px OpenSans-b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .view-all-btn:hover {
        text-decoration: none;
    }

.shipp-btn {
    /* background: transparent linear-gradient(268deg, var(--status-blue-dark) 0%, var(--status-blue-light) 100%) 0% 0% no-repeat padding-box; */
    font: normal normal bold 10px/16px "Open Sans";
    background-color: #158c4b;
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase;
    outline: none;
    border: none;
    border-radius: 3px;
    position: absolute;
    right: 15px;
    top: 15px;
    padding: 0 8px;
}

    .shipp-btn:focus {
        outline: none;
    }

#ship-back-btn,
#ship-yourself-btn {
    font: normal normal 600 16px/19px Montserrat;
    letter-spacing: 1.6px;
    color: var(--text-contrast);
    text-transform: uppercase;
    background: var(--background-secondary) 0% 0% no-repeat padding-box;
    border-radius: 4px;
    width: 100%;
    height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding-left: 16px;
    border: none;
    outline: none;
}

#ship-yourself-btn {
    background: transparent linear-gradient(266deg, var(--primary-dark) 0%, var(--primary-darker) 100%) 0% 0% no-repeat padding-box;
}

.card-body {
    padding: 7px 15px !important;
}

.feature-title {
    font: normal normal 600 16px/19px Montserrat;
    letter-spacing: 1.6px;
    color: var(--text-contrast);
    padding-top: 8px;
}

    .feature-title + .content {
        font: normal normal 300 12px/16px Open Sans;
        color: var(--text-contrast);
    }

.addresses-feature-container {
    background: transparent linear-gradient(258deg, var(--status-blue-dark) 0%, #156a91 100%) 0% 0% no-repeat padding-box;
    border-radius: 4px;
    height: 140px;
}

[alt="home"],
[alt="weight-machine"] {
    position: relative;
    bottom: 30px;
    right: 8px;
}

.addresses-feature-btn,
.tips-feature-btn,
.calulator-feature-btn {
    border-radius: 4px;
    outline: none;
    border: none;
    height: 35px;
    font: normal normal 600 12px/15px Montserrat;
    letter-spacing: 1.2px;
    color: var(--text-contrast);
    text-transform: uppercase;
    background: rgba(15, 15, 15, 0.2);
}

    .addresses-feature-btn p {
        font: normal normal 600 12px/15px Montserrat;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }

.calulator-feature-container {
    background: #387c2b 0% 0% no-repeat padding-box;
    border-radius: 4px;
    height: 140px;
}

.calulator-feature-btn {
    position: relative;
    bottom: 10px;
}

.tips-feature-container {
    background: transparent linear-gradient(268deg, #a12d2f 0%, #862222 100%) 0% 0% no-repeat padding-box;
    border-radius: 4px;
    height: 140px;
}

.tips-feature-btn {
    width: 147px !important;
    position: absolute;
    bottom: 11px;
}

#input-listSrch,
#inputTablistSrch {
    background: #fff;
    width: 379px;
    height: 40px;
    outline: none;
    border: navajowhite;
    border-radius: 4px;
    caret-color: #ffb446;
    padding: 5px 45px 5px 15px;
    color: #b9babc;
    font: normal normal normal 15px/20px "Open Sans";
}

.tab-view-btn,
.list-view-btn {
    width: 120px;
    height: 45px;
    background: #2d343e;
    border: 1px solid #4a525d;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab-view-container {
    justify-content: space-between;
}

.delivered-btn,
.shipped-btn,
.attention-required-btn,
.in-review-btn,
.incomming-btn {
    height: 50px;
    border-radius: 3px;
    border: none;
    width: 100%;
    font: normal normal 600 14px/22px Open Sans;
    letter-spacing: 1.4px;
    color: var(--text-secondary_accent);
    text-align: left;
    padding-left: 16px;
}

    .delivered-btn span,
    .shipped-btn span,
    .attention-required-btn span,
    .in-review-btn span,
    .incomming-btn span {
        font: italic normal normal 12px/22px Open Sans;
        letter-spacing: 0.12px;
        color: #f7fafd;
    }

.incomming-btn {
    background: transparent linear-gradient( 90deg, var(--status-green-dark) 0%, var(--status-green-light) 100% ) 0% 0% no-repeat padding-box;
}

.in-review-btn {
    background: transparent linear-gradient( 90deg, var(--status-orange-dark) 0%, var(--status-orange-light) 100% ) 0% 0% no-repeat padding-box;
}

.attention-required-btn {
    background: transparent linear-gradient(89deg, #a5270f 0%, #e44e30 100%) 0% 0% no-repeat padding-box;
}

.shipped-btn {
    background: transparent linear-gradient( 269deg, var(--status-blue-dark) 0%, var(--status-blue-light) 100% ) 0% 0% no-repeat padding-box;
}

.delivered-btn {
    background: transparent linear-gradient(90deg, #205a15 0%, #377a2b 100%) 0% 0% no-repeat padding-box;
}

#btnModalFilter {
    padding: 0;
    border-radius: 4px;
    margin-left: 12px;
    width: 40px;
    height: 40px;
    background-color: #eae8e8;
}

.tab-view-btn a,
.list-view-btn a {
    font: normal normal 600 14px/39px Open Sans;
    letter-spacing: 1.4px;
    color: var(--text_primary_accent);
    text-transform: uppercase;
}

/* Shipping calculator modal */
#shipping-calculator-modal {
    background-color: var(--background-primary);
}

.from-tilte,
.to-tilte {
    font: normal normal normal 12px/24px Open Sans;
    letter-spacing: 1.2px;
    color: var(--text-contrast);
    text-transform: uppercase;
}

.ship-box {
    background: var(--background-dark) 0% 0% no-repeat padding-box;
    border-radius: 6px;
}

    .ship-box p {
        font: normal normal normal 15px/20px Open Sans;
        letter-spacing: 0px;
        color: var(--text-contrast);
    }

    .ship-box span {
        font: normal normal normal 11px/15px Open Sans;
        letter-spacing: 0px;
        color: var(--text-contrast);
    }

.package-title {
    font: normal normal normal 12px/24px Open Sans;
    letter-spacing: 1.2px;
    color: var(--text-contrast);
    text-transform: uppercase;
}

[name="shipWeight"] {
    background: var(--background-dark) 0% 0% no-repeat padding-box;
    font: normal normal 600 20px/27px Open Sans;
    letter-spacing: 0px;
    color: var(--text-contrast);
    text-align: center;
    height: 54px;
    border: none;
}

    [name="shipWeight"]:focus {
        background: var(--background-dark) 0% 0% no-repeat padding-box;
        outline: none;
        border: none;
    }

.weight-types {
    font: normal normal 600 14px/24px Open Sans;
    letter-spacing: 1.4px;
    color: var(--text-contrast);
    margin-left: 8px;
}

.quantity-left-minus,
.quantity-right-plus {
    width: 54px !important;
    height: 54px !important;
    background: var(--card-header) 0% 0% no-repeat padding-box;
    border-radius: 6px 0px 0px 6px;
    color: var(--text-contrast);
    border: none;
    outline: none;
}

.quantity-right-plus {
    border-radius: 0px 6px 6px 0px;
}

#btnCal,
#btnCalAgain {
    height: 54px;
    background: transparent linear-gradient(267deg, var(--primary-dark) 0%, var(--primary-darker) 100%) 0% 0% no-repeat padding-box;
    border-radius: 4px;
    border: none;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: normal normal 600 16px/19px Montserrat;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 14px;
}

    #btnCal p {
        font: normal normal 600 16px/19px Montserrat;
        letter-spacing: 1.6px;
        color: var(--text-contrast);
        text-transform: uppercase;
        margin: 0;
    }

.modal-footer,
.modal-header {
    border: none;
}

#ModalTitle {
    font: normal normal 600 18px/22px Montserrat;
    letter-spacing: 1.8px;
    color: var(--text-contrast);
    /* text-transform: uppercase; */
}

.ship-cal-body {
    max-height: 660px;
    overflow: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    overflow-x: hidden !important;
    background-color: var(--background-primary);
}

    .shipping-details-view::-webkit-scrollbar,
    .ship-cal-body::-webkit-scrollbar,
    .shipment-modal-body::-webkit-scrollbar {
        width: 0.4rem;
    }

    .shipping-details-view::-webkit-scrollbar-track,
    .ship-cal-body::-webkit-scrollbar-track,
    .shipment-modal-body::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px var(--background-dark);
    }

    .shipping-details-view::-webkit-scrollbar-thumb,
    .ship-cal-body::-webkit-scrollbar-thumb,
    .shipment-modal-body::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: transparent linear-gradient(260deg, var(--primary-dark) 0%, var(--primary-darker) 100%) 0%;
    }

.close {
    color: var(--text-contrast) !important;
}

.select2-container--default
.select2-selection--single
.select2-selection__rendered {
    background-color: var(--background-dark);
    outline: none;
    border: none;
}

.weight-type-container {
    width: 50%;
    display: flex;
    justify-content: space-between;
    margin: auto;
}

.weight-type {
    display: flex;
    justify-content: space-between;
}

.selected-details-container label {
    font: normal normal normal 16px/22px Open Sans;
    letter-spacing: 0px;
    color: var(--text-contrast);
    text-transform: capitalize;
}

/* shipments */
#divList {
    margin-top: 12px;
    margin-left: 0;
}

span.alcountry.pull-right {
    font: normal normal 600 12px/20px Open Sans;
    letter-spacing: 1.2px;
    color: #21549a;
    opacity: 1;
    float: right;
}

.sort-filter-heading {
    font: normal normal 600 20px/20px Montserrat !important;
    letter-spacing: 0px !important;
    color: var(--text_primary_accent) !important;
    text-transform: capitalize !important;
}

#filterModalContent {
    /* background-color: var(--background-primary); */
}

.filter-label {
    font: normal normal normal 14px Open Sans;
    letter-spacing: 0px;
    color: #15191f;
    margin-bottom: 5px;
}


.modal-body {
    background-color: var(--background-primary) !important;
}

/* info overlay designs */
.point-up {
    position: absolute;
    top: 40px;
}

.card {
    border: 1px solid transparent !important;
}

#shipment-info {
    position: relative;
}

.info-type-img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 16px;
    height: 40px;
    top: -23px;
}

.info-label {
    font: normal normal 600 12px/15px Montserrat;
    letter-spacing: 1.2px;
    color: var(--text-contrast);
    text-align: center;
}

.info-content {
    text-align: center;
    font: normal normal normal 14px/21px Open Sans;
    letter-spacing: 0px;
    color: var(--text-secondary_accent);
}

.quick-tips {
    background: var(--card-header) 0% 0% no-repeat padding-box;
    border-radius: 4px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .quick-tips span {
        font: normal normal 600 10px/12px Montserrat;
        letter-spacing: 1px;
        color: var(--text-contrast);
    }

.info-footnote {
    text-align: center;
    font: normal normal normal 14px/21px Open Sans;
    letter-spacing: 0px;
    color: var(--text-secondary_accent);
}

#info-menu {
    background: var(--card-header) 0% 0% no-repeat padding-box;
    border-radius: 10px;
}

#info-list {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 120px;
}

    #info-list div {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        top: 10px;
    }

.info-item-label {
    font: normal normal normal 10px/16px Open Sans;
    color: var(--nav-link);
}

/* Status  */

@media (min-width: 1200px) {
    .container {
        max-width: 1310px !important;
    }
}

.color-link {
    color: #2886b1;
    font-size: 14px;
}

.incoming-status {
    background: transparent linear-gradient(90deg, #016c4f 0%, #0c8e6b 100%) 0% 0% no-repeat padding-box;
}

.intransit-status {
    background: transparent linear-gradient(81deg, #c38a0b 0%, #e2a213 100%) 0% 0% no-repeat padding-box;
}

.shipmentdelayed-status {
    background: transparent linear-gradient(267deg, #d92c2b 0%, #892121 100%) 0% 0% no-repeat padding-box;
}

.outfordelivery-status {
    background: transparent linear-gradient(90deg, #337427 0%, #52a743 100%) 0% 0% no-repeat padding-box;
}

.shipped-status {
    background: transparent linear-gradient(268deg, #2886b1 0%, #105879 100%) 0% 0% no-repeat padding-box;
}

.inreview-status {
    background: transparent linear-gradient(81deg, #a36100 0%, #e59119 100%) 0% 0% no-repeat padding-box;
}

.packagedelayed-status {
    background: transparent linear-gradient(267deg, #d92c2b 0%, #892121 100%) 0% 0% no-repeat padding-box;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1310px !important;
        position: relative;
    }
}

.packageWrapper .card.pack-card .packageInformation.grdpay p {
    font: normal normal 300 12px/24px "OpenSans-semi" !important;
}

@media (min-width: 320px) {
    .signin-main-text {
        font-size: 18px;
        font-weight: 400;
        /* color: #fff; */
        width: 100%;
        margin: auto;
        margin-top: 18px;
    }
    .circular-checkbox-container .round {
        position: absolute;
        opacity: 1;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .datascroller .circular-checkbox-container .checkmark {
        position: absolute;
        top: -5px;
        right: 10px;
    }

    .circular-checkbox-container .checkmark {
        position: absolute;
        top: 9px;
        right: 2px;
        height: 17px;
        width: 17px;
        background-color: #707070;
    }

    .uploadSection {
        height: auto;
    }

    .row.pckdtlstbl > div {
        display: block;
        width: 100%;
        padding: 3px 14px;
    }

    .mainheader {
        max-width: 100%;
        height: 100%;
        float: left;
        float: left;
        height: 75px;
        padding: 9px 9px;
        width: 100%;
    }
    /* empty section designs */
    .empty-section {
        margin-top: 180px;
    }

    .empty-section-text {
        font: normal normal normal 24px/33px "Open Sans";
        color: #15191f;
    }

    /* upload section designs  */

    /* more option screen designs */

    span.header-line {
        font: normal normal 600 18px/36px Open Sans;
        color: #ffffff;
        flex: 1;
    }

    .header-line + #btnChange {
        font: normal normal 600 12px/20px Open Sans;
        letter-spacing: 1.2px;
        color: #1bd0cb;
        text-transform: uppercase;
    }

    .bdr-none {
        border: none !important;
    }

    .active-label {
        color: #ffb446 !important;
    }

    .time-line {
        padding-bottom: 16px;
        border-left: 2px dashed #e44e30;
        padding-left: 24px;
        /* filter: grayscale(1); */
        position: relative;
        list-style-type: none;
    }

    .time-line-icon {
        background: url(../imgs/facility.png);
        height: 30px;
        background-repeat: no-repeat;
        position: absolute;
        width: 30px;
        left: -15px;
        background-color: var(--background-primary);
        top: 8px;
    }

    .package-received-date {
        font: normal normal 600 14px/21px "Open Sans";
        letter-spacing: 0px;
        color: var(--text-contrast);
    }

    .addlbtncntr .addlb {
        /* background: transparent linear-gradient(266deg, var(--primary-dark) 0%, var(--primary-darker) 100%) 0% 0% no-repeat padding-box; */
        background-color: #f5b65c66;
        border: 1px solid #f5b65d;
        border-radius: 4px;
        font: normal normal normal 12px/20px "Open Sans";
        color: #15191f;
        outline: none;
        height: auto;
        margin-right: 10px;
        margin-bottom: 8px;
    }

        .addlbtncntr .addlb:hover {
            cursor: pointer;
        }

        .addlbtncntr .addlb:active {
            background-color: #f5b65c66 !important;
            border: 1px solid #f5b65d !important;
            color: #15191f !important;
        }

            .addlbtncntr .addlb:focus,
            .addlbtncntr .addlb:active:focus {
                box-shadow: none !important;
            }

    .v-center {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .itmcntr .bottom-btn {
        text-align: center;
    }

    .package-received-date {
        font: normal normal 600 14px/21px "Open Sans";
        letter-spacing: 0px;
        color: var(--text-contrast);
    }

    .package-received-status {
        font: normal normal normal 14px/21px Open Sans;
        letter-spacing: 0px;
        color: var(--text-contrast);
    }

    .appbtn {
        background: transparent linear-gradient(90deg, #016c4f 0%, #0c8e6b 100%) 0% 0% no-repeat padding-box;
        border-radius: 4px;
        height: 30px;
        margin-right: 5px;
        padding: 0 8px;
        border: none;
    }

    .rejbtn {
        background: transparent linear-gradient(267deg, #f26247 0%, #cb3f23 100%) 0% 0% no-repeat padding-box;
        border-radius: 4px;
        height: 30px;
        color: #ffffff;
        padding: 0 8px;
        border: none;
    }

    .s2d-navbar.nav_new {
        padding: 10px;
        /* background: #252B33 0% 0% no-repeat padding-box;
        border: 1px solid #293341; */
        background: #0266FF;
        border: none;
        background-image: url(../imgs/nav-bg.png);
        opacity: 1;
        align-items: flex-start;
    }

    .container.main_contorellar {
        flex-direction: inherit;
        height: auto;
    }


    .s2d-navbar.nav_new .navbar-nav .s2d-nav-link {
        font: normal normal 600 14px/20px "Open Sans";
        letter-spacing: 0px;
        color: #fff;
        text-transform: capitalize;
        opacity: 1;
        font-weight: 600;
    }

    .container.right {
        max-width: 97% !important;
        float: right;
        margin-top: 15px;
    }

    .pendingCustomerVerificationSection h6#packages-title {
        font: normal normal bold 13px/20px "Open Sans";
    }

    .pendingCustomerVerificationSection .divider {
        display: none;
    }

    .customer-heading,
    .shipment-heading,
    .package-heading {
        font: normal normal 600 18px/22px Montserrat;
        color: #15191f;
        margin-bottom: 0;
    }

    .total-customer-count,
    .total-shipment-count,
    .total-package-count {
        font: normal normal 400 14px/18px "Open Sans";
        color: #000 !important;
    }

    #ship_total,
    #pack_total {
        font-weight: 700;
        font-size: 100%;
    }

    /* modal popups start */
    .modal-content {
        border: none;
    }

    .modal-header {
        background-color: #fff !important;
        padding: 20px 10px 10px 10px;
    }

    .modal-title {
        font: normal normal 600 18px/20px Montserrat !important;
        letter-spacing: 0px !important;
        color: var(--text_primary_accent) !important;
        text-transform: capitalize !important;
        margin: 20px auto 0;
    }

    .modal-header .close {
        color: #000 !important;
        margin: 0;
        padding: 0 1rem;
    }

        .modal-header .close:focus {
            outline: none;
        }

    .modal-body {
        background-color: #fff !important;
        padding: 30px;
        border-radius: 4px;
    }

        .modal-body .actionBtns {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }

            .modal-body .actionBtns .actBtn {
                width: 49%;
                display: grid;
                position: relative;
            }

                .modal-body .actionBtns .actBtn .btn {
                    background-image: linear-gradient( to right, #265ba2, #1b4175, #112a4d ) !important;
                    background: none;
                    position: relative;
                    width: auto;
                    left: auto;
                    transform: none;
                    height: auto;
                    top: auto;
                    bottom: auto;
                    text-transform: uppercase;
                    font: normal normal 600 14px/19px "Open Sans";
                    color: #fff;
                    padding: 15px 10px !important;
                    letter-spacing: 1.6px;
                }

                    .modal-body .actionBtns .actBtn .btn:focus {
                        box-shadow: none;
                    }

                .modal-body .actionBtns .actBtn .submitBtn {
                    text-align: left;
                }

                .modal-body .actionBtns .actBtn .closeBtn {
                    justify-content: center;
                    background-image: none !important;
                    color: #15191f;
                }

                .modal-body .actionBtns .actBtn .arrow {
                    position: absolute;
                    right: 6px;
                    top: 9px;
                }
    /* modal popups end */

    /* dashboard screen start */
    .dashboardWrapper .dashboardViewHeader {
        position: relative;
        /*overflow: hidden;*/
        font: normal normal 600 18px/20px Montserrat;
        color: #21549a;
    }

        .dashboardWrapper .dashboardViewHeader .leftSection {
            float: left;
        }

        .dashboardWrapper .dashboardViewHeader .rightSection {
            float: right;
        }

            .dashboardWrapper .dashboardViewHeader .rightSection .view {
                background: #e8e8e8;
                display: block;
                width: auto;
                position: relative;
                left: auto;
                transform: none;
                bottom: auto;
                height: auto;
                padding: 5px 15px !important;
                font: normal normal 600 12px/20px "Open Sans";
                color: #15191f;
                text-transform: uppercase;
                letter-spacing: 0.6px;
            }

                .dashboardWrapper .dashboardViewHeader .rightSection .view:focus {
                    box-shadow: none;
                }

    .dashboardWrapper .flex-container .divider {
        flex-grow: 1;
        border-top: 1px dashed #16191e;
        margin: 12px 5px;
    }
    /* dashboard screen end */

    /* Dashboard button styles - moved from Views/Dashboard/Index.cshtml */
    .top-btn .btn-group .btn-secondary:not(:disabled):not(.disabled).active,
    .top-btn .btn-group .btn-secondary:not(:disabled):not(.disabled):active,
    .top-btn .btn-group .show > .btn-secondary.dropdown-toggle {
        background: #0266FF !important;
        color: #fff !important;
        border-radius: 4px;
    }

    .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus {
        box-shadow: unset !important;
    }

    .top-btn .btn-group .fa-calendar {
        font-size: 24px;
        color: #8595A4;
    }

    .top-btn .refresh-icon i {
        color: #506374;
        font-size: 22px;
    }

    .top-btn .refresh-icon {
        background: #FFFFFF;
        border: 1px solid #DFE2E6;
        border-radius: 6px;
        text-align: center;
        width: 45px;
        display: inline-flex;
        height: 45px;
        justify-content: center;
        align-items: center;
    }

    .top-btn .btn-group i {
        color: #8595A4;
        font-size: 14px;
    }

    .top-btn .btn-group p {
        font-weight: 400;
        font-size: 14px;
        color: #8595A4;
        margin-bottom: 0;
    }

    .top-btn .btn-group .btn {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        color: #0266FF !important;
        border-radius: 0;
        background: none;
        margin-top: 0;
        white-space: nowrap;
        padding: 6px 20px !important;
    }

    .top-btn .btn-group {
        background: #FFFFFF;
        border: 1px solid #DFE2E6;
        border-radius: 6px;
        padding: 5px;
        height: 45px;
    }

    .package-container .card {
        border: none !important;
    }

        .package-container .card .card-header {
            background: none;
            box-shadow: 0px 3px 6px #00000029;
        }

    .package-container.row > div:nth-child(3n + 1) .card .card-header {
        background-image: linear-gradient(to right, #e94b35, #75261b);
    }

    .package-container.row > div:nth-child(3n + 2) .card .card-header {
        background-image: linear-gradient(to right, #ffffff, #e3e3e3);
    }

    .package-container.row > div:nth-child(3n + 3) .card .card-header {
        background-image: linear-gradient(to right, #227fbb, #11405e);
    }

    .package-container.row > div:nth-child(3n + 1) .card .card-header .shipp-btn {
        background: #9b3324;
    }

    .package-container.row > div:nth-child(3n + 2) .card .card-header .shipp-btn {
        background: #e4e4e4;
    }

    .package-container.row > div:nth-child(3n + 3) .card .card-header .shipp-btn {
        background: #165278;
    }

    .package-container.row > div:nth-child(3n + 2)
    .card
    .card-header
    span.header-line
    p,
    .package-container.row > div:nth-child(3n + 2) .card .card-header .shipp-btn {
        color: #15191f;
    }

    .problemPackagesSection .package-container.row > div .card .card-header,
    .latestShipmentsSection .package-container.row > div .card .card-header {
        background-image: linear-gradient(to right, #e94b35, #75261b);
    }

        .problemPackagesSection
        .package-container.row > div
        .card
        .card-header
        span.header-line
        p,
        .problemPackagesSection
        .package-container.row > div
        .card
        .card-header
        .shipp-btn,
        .latestShipmentsSection
        .package-container.row > div
        .card
        .card-header
        span.header-line
        p,
        .latestShipmentsSection
        .package-container.row > div
        .card
        .card-header
        .shipp-btn {
            color: #fff;
        }

        .problemPackagesSection
        .package-container.row > div
        .card
        .card-header
        .shipp-btn,
        .latestShipmentsSection
        .package-container.row > div
        .card
        .card-header
        .shipp-btn {
            background: #9b3324;
            color: #fff;
        }
    /* .problemPackagesSection .package-container.row > div:nth-child(3n+2) .card .card-header {background-image: linear-gradient(to right, #1CB15F , #0E502C);}
.problemPackagesSection .package-container.row > div:nth-child(3n+2) .card .card-header span.header-line p, .problemPackagesSection .package-container.row > div:nth-child(3n+2) .card .card-header .shipp-btn {color:#fff;}
.problemPackagesSection .package-container.row > div:nth-child(3n+2) .card .card-header .shipp-btn {background:#158849;color:#fff;} */

    .package-container .card .card-header img {
        margin-right: 6px;
    }

    .package-container .card .card-body {
        background-color: #fff;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: 0 !important;
        box-shadow: 0px 3px 6px #00000029;
    }

        .package-container .card .card-body .information {
            display: flex;
            padding: 20px 15px;
            justify-content: space-between;
        }

            .package-container .card .card-body .information .divider {
                border-left: 1px solid #e8e8e8;
            }

        .package-container .card .card-body .actionBtns {
            padding: 10px 15px;
            background: #f7f7f7;
            display: flex;
            justify-content: space-between;
            height: 45px;
        }



    .datascroller {
        width: 100%;
        height: 680px;
        overflow: auto;
    }

    .col-12.dtlsvalues.list.labelheader div, .col-12.dtlsvalue.list.labelheader div {
        text-align: left;
        letter-spacing: 0px;
        opacity: 1;
        /* width: 100%; */
        display: block;
        flex-grow: inherit;
        font: normal normal 800 12px/17px Open Sans;
        letter-spacing: 1.2px;
        color: #9D5A4D;
        text-transform: uppercase;
        opacity: 1;
    }

    .col-12.dtlsvalues.list.labelheader, .col-12.dtlsvalue.list.labelheader {
        justify-content: normal;
        /*background: #29549a;*/
    }

    div#filterModalContent.inpage .modal-body button#btnApplyFilter {
        width: 172px;
        float: right;
        position: absolute;
        top: 24px;
        margin-right: 25px;
    }



    div#filterModalContent .modal-body label.filter-label {
        margin-bottom: 8px;
        margin-top: 8px;
    }

    .package-container .card .card-body .actionBtns button {
        font: normal normal 10px/16px OpenSans-b;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #15191f;
        float: none;
        border-radius: 4px;
        background-color: #e8e8e8;
        display: block;
        width: auto;
        height: auto;
        position: relative;
        right: auto;
        bottom: auto;
    }

    .package-container .card .card-body .actionBtns .detail-btn:focus {
        outline: none;
    }

    .package-container .card .card-body .actionBtns .detail-btn img {
        margin-right: 4px;
    }

    .problemPackagesSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.download,
    .problemPackagesSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.track,
    .latestShipmentsSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.download,
    .latestShipmentsSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.track {
        background-color: transparent;
        display: inline-flex;
        width: min-content;
        line-height: 11px;
        text-align: left;
    }

    .problemPackagesSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.download,
    .latestShipmentsSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.download {
        color: #21549a;
        text-align: left;
        padding: 0;
    }

    .problemPackagesSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.track,
    .latestShipmentsSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.track {
        color: #ffb446;
    }

    .problemPackagesSection .package-container#divList,
    .latestShipmentsSection .package-container#divList {
        margin-left: -15px;
    }

    .received-title,
    .shipment-title,
    .total-val-title,
    .weight-title,
    .total-weight-title,
    .estimate-title,
    .total-declared-title,
    .total-item-title,
    .order-total-title,
    .receved-date,
    .shipment-date,
    .estimate-date,
    .total-val,
    .weight-val,
    .total-weight-val,
    .total-declared-val,
    .total-item-val,
    .order-total-val {
        color: #15191f;
    }

    .shipp-btn-status {
        border: none;
    }

    ::placeholder {
        color: #b9babc;
        opacity: 1;
        font: normal normal 400 14px/19px "Open Sans";
    }

    :-ms-input-placeholder {
        color: #b9babc;
        font: normal normal 400 14px/19px "Open Sans";
    }

    ::-ms-input-placeholder {
        color: #b9babc;
        font: normal normal 400 14px/19px "Open Sans";
    }

    sup {
        font-size: 9px;
    }

    .modal-content.custom-modal-content.mx-auto.w-auto.br12 {
        background: #292f38;
    }

    #ModalOverlayDialog .modal-header .close {
        color: #000 !important;
        margin: 5px;
        padding: 0 1rem;
        left: 84%;
        position: relative;
        top: -12px;
    }

    .modal-header .close {
        color: #000 !important;
        margin: 5px;
        padding: 0 1rem;
        left: 4%;
        position: relative;
        top: -12px;
    }

    .package-container .card .card-body .information p.receved-date,
    .package-container .card .card-body p.weight-val {
        font: normal normal normal 14px/24px OpenSans-l !important;
        letter-spacing: 0px;
        color: #15191f;
        opacity: 1;
        letter-spacing: -0.03px;
        color: #15191f;
        opacity: 1;
    }

    .modal-content.custom-modal-content {
        background: #292f38;
    }
    /* Customers Screen start */
    .customerWrapper {
        padding: 15px;
        background-color: #fff;
        box-shadow: 1px 1px 4px 5px #efefef;
        border-radius: 4px;
        margin-top: 10px;
        width: 100%;
        height: 600px;
        overflow: scroll;
    }

        .customerWrapper table.dataTable.no-footer {
            border-bottom: none;
        }

        .customerWrapper table#customerData thead {
            background-color: #ffb446;
        }

        .customerWrapper table.dataTable thead th {
            font-size: 14px;
            color: #15191f;
            font-family: "Open Sans";
            font-weight: 600;
            padding: 5px 18px;
            border-bottom: none;
        }

            .customerWrapper table.dataTable thead th + th {
            }

        .customerWrapper .dataTables_wrapper {
            width: 100%;
        }

        .customerWrapper table.dataTable.stripe tbody tr.odd,
        .customerWrapper table.dataTable.display tbody tr.odd {
            background-color: #f4f6f8;
        }

        .customerWrapper table.dataTable tbody tr {
            background-color: #fff;
        }

        .customerWrapper table.dataTable.row-border tbody th,
        .customerWrapper table.dataTable.row-border tbody td,
        .customerWrapper table.dataTable.display tbody th,
        .customerWrapper table.dataTable.display tbody td {
            border-top: none;
            line-height: normal;
        }

        .customerWrapper table.dataTable.display tbody tr.odd > .sorting_1,
        .customerWrapper
        table.dataTable.order-column.stripe
        tbody
        tr.odd > .sorting_1 {
            background-color: transparent;
        }

        .customerWrapper table.dataTable.display tbody tr.even > .sorting_1,
        .customerWrapper
        table.dataTable.order-column.stripe
        tbody
        tr.even > .sorting_1 {
            background-color: transparent;
        }

        .customerWrapper table.dataTable tbody th,
        .customerWrapper table.dataTable tbody td {
            padding: 8px 18px;
            font-size: 12px;
            color: #15191f;
            font-family: "Open Sans";
            font-weight: normal;
        }

        .customerWrapper table.dataTable#customerData thead .sorting {
            background-image: url(../../imgs/sort_both-new.png);
        }

        .customerWrapper #customerData .name:hover {
            cursor: pointer;
        }

        .customerWrapper #customerData .flag img,
        .customerWrapper #customerData .status img {
            margin-right: 5px;
            width: 20px;
            height: 20px;
        }

        .customerWrapper #customerData .btn-acon,
        .btnwraper > div input {
            background: #e8e8e8;
            height: auto;
            font-family: "Open Sans";
            font-weight: 600;
            font-size: 10px;
            color: #15191f;
            text-transform: uppercase;
            padding: 0 0 0 4px;
            margin-right: 0;
        }

            .customerWrapper #customerData .btn-acon:focus {
                box-shadow: none !important;
            }

        .customerWrapper .dataTables_wrapper .dataTables_info {
            color: #15191f;
            font-family: "Open Sans";
            font-style: italic;
            font-size: 10px;
            padding-top: 20px;
        }

        .customerWrapper .dataTables_wrapper .dataTables_paginate {
            color: #15191f;
            font-family: "Open Sans";
            font-weight: 700;
            font-size: 12px;
            padding-top: 20px;
        }

            .customerWrapper .dataTables_wrapper .dataTables_paginate .paginate_button {
                background-color: #fff;
                margin-left: 0;
                border-radius: 0;
                padding: 5px 10px;
                font-weight: 400;
            }

                .customerWrapper
                .dataTables_wrapper
                .dataTables_paginate
                .paginate_button.current,
                .customerWrapper
                .dataTables_wrapper
                .dataTables_paginate
                .paginate_button.current:hover {
                    border: 1px solid transparent;
                    background: #fff;
                    font-weight: 600;
                }

                .customerWrapper
                .dataTables_wrapper
                .dataTables_paginate
                .paginate_button.previous,
                .customerWrapper
                .dataTables_wrapper
                .dataTables_paginate
                .paginate_button.next {
                    background: #e8e8e8;
                }

                    .customerWrapper
                    .dataTables_wrapper
                    .dataTables_paginate
                    .paginate_button.previous:active,
                    .customerWrapper
                    .dataTables_wrapper
                    .dataTables_paginate
                    .paginate_button.next:active {
                        box-shadow: none;
                    }

                    .customerWrapper
                    .dataTables_wrapper
                    .dataTables_paginate
                    .paginate_button.previous:hover,
                    .customerWrapper
                    .dataTables_wrapper
                    .dataTables_paginate
                    .paginate_button.next:hover {
                        cursor: pointer;
                        background: #e8e8e8;
                        border: 1px solid transparent;
                    }

    .btnwraper > div {
        background: #e8e8e8;
        border-radius: 4px;
        padding: 1px 7px;
    }

    .customerWrapper .dataTables_length,
    .customerWrapper .dataTables_filter {
        display: none;
    }

    .customerWrapper .action .btn-action-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

        .customerWrapper .action .btn-action-container > div {
            background: #e8e8e8;
            border-radius: 4px;
            padding: 1px 7px;
        }

            .customerWrapper .action .btn-action-container > div + div {
                margin-left: 5px;
            }

        .customerWrapper .action .btn-action-container .more {
            font-size: 5px;
            display: flex;
            align-items: center;
        }

            .customerWrapper .action .btn-action-container .more:hover {
                cursor: pointer;
            }

            .customerWrapper .action .btn-action-container .more .fa + .fa {
                margin-left: 2px;
            }
    /*.customerWrapper .context-menu {
    position: relative;
    float: right;
  }*/
    .customerWrapper .context-menu .dropdown {
        position: absolute;
        text-align: left;
        background-color: #fff;
        z-index: 104;
        max-width: 80%;
        border-radius: 3px;
        min-width: 200px;
        opacity: 0;
        transform: scale(0);
        box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.26), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.26), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
        transition: all 0.3s cubic-bezier(0.79, -0.07, 0.14, 1.03);
        -webkit-overflow-scrolling: touch;
    }

        .customerWrapper .context-menu .dropdown .dropdown-list {
            padding: 10px 0;
            margin: 0;
            list-style: none;
            box-shadow: 1px 1px 4px 5px #efefef;
        }

            .customerWrapper .context-menu .dropdown .dropdown-list .dropdown-list-item {
                opacity: 0;
                transition: 0.3s ease-in-out transform;
                -webkit-transition: 0.3s ease-in-out transform;
                -webkit-transform: translateY(-14px);
                transform: translateY(-14px);
                float: none;
                display: list-item;
            }

                .customerWrapper
                .context-menu
                .dropdown
                .dropdown-list
                .dropdown-list-item
                a {
                    display: block;
                    font-size: 13px;
                    color: #15191f;
                    padding: 5px 15px;
                }

                    .customerWrapper
                    .context-menu
                    .dropdown
                    .dropdown-list
                    .dropdown-list-item
                    a:hover,
                    .customerWrapper
                    .context-menu
                    .dropdown
                    .dropdown-list
                    .dropdown-list-item
                    a:focus {
                        text-decoration: none !important;
                    }

                    .customerWrapper
                    .context-menu
                    .dropdown
                    .dropdown-list
                    .dropdown-list-item
                    a:hover {
                        background-color: #f2f2f2;
                    }

    :focus-visible {
        outline: none;
    }

    button.accordion.btnorder-details.active + .shipmentAccordion
    .panel.shipping-details-view {
        padding: 10px !important;
    }

    .shipmentAccordion .panel.shipping-details-view {
        background-color: #f4f5f6;
        display: block;
    }

        .shipmentAccordion .panel.shipping-details-view .opencntr > div {
            display: flow-root;
        }

        .shipmentAccordion .panel.shipping-details-view > .opencntr div p {
            float: right;
            margin-bottom: 2px;
        }

    .panel.shipping-details-view .order-total {
        margin-top: 10px;
        padding: 0 10px;
    }

    .searchWrapper button#btnsearch {
        float: right;
        margin: 8px;
        background: transparent;
    }

    ul.countryul.nav {
        display: inline-block;
        padding: 0;
    }

    .filterul li {
        font: normal normal normal 16px/20px Open Sans;
        float: left;
        display: block;
        margin-bottom: 10px;
        margin-right: 10px;
        height: 34px;
    }

    .countryul li.active a {
        background: #f051331a 0% 0% no-repeat padding-box;
        border: 1px solid #f05133;
        border-radius: 4px;
    }

    .countryul li a {
        background: var(--unnamed-color-e8e8e8) 0% 0% no-repeat padding-box;
        background: #e8e8e8 0% 0% no-repeat padding-box;
        border-radius: 4px;
        opacity: 1;
        padding: 6px 24px;
        color: #15191f !important;
        font: normal normal normal 16px/20px Open Sans;
    }

        .countryul li a:hover {
            text-decoration: none;
        }

    .countryul li.active a {
        background: #f051331a 0% 0% no-repeat padding-box;
        border: 1px solid #f05133;
        border-radius: 4px;
    }

    .countryul li a img {
        width: 19px;
        margin: 0px;
    }

    .countryul li {
        float: left;
        margin-right: 8px;
        height: 46px;
    }

    input#packagenumber {
    }

    input#txtweight {
        background: #e8e8e8;
        border: none;
        width: 21%;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 8px;
    }

    input#txtpackages {
        background: #e8e8e8;
        border: none;
        width: 21%;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 8px;
    }

    input#txtdeclaredvalue {
        background: #e8e8e8;
        border: none;
        width: 21%;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 8px;
    }


    .packagestatus-ul li a:hover, .packagetab-ul li a:hover {
        text-decoration: none;
    }



    .packagestatus-ul li a img, .packagetab-ul li a img {
        width: 19px;
        margin: 0px;
    }


    .customerWrapper
    .context-menu
    .dropdown
    .dropdown-list
    .dropdown-list-item
    a
    img {
        margin-right: 7px;
        margin-top: -3px;
    }

    .customerWrapper
    .context-menu.active
    .dropdown
    .dropdown-list
    .dropdown-list-item {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }

    .customerWrapper .context-menu .dropdown-right {
        top: 40px;
        right: 5px;
        transform-origin: right top 0px;
    }

    .customerWrapper .context-menu .dropdown-left {
        top: 45px;
        left: 10px;
        transform-origin: left top 0px;
    }

    .customerWrapper .context-menu .dropdown-bottom-right {
        bottom: 45px;
        right: 10px;
        transform-origin: right bottom 0px;
    }

    .customerWrapper .context-menu .dropdown-bottom-left {
        bottom: 45px;
        left: 10px;
        transform-origin: left bottom 0px;
    }

    .customerWrapper .context-menu.active .dropdown {
        transform: scale(1);
        opacity: 1;
    }

    .customerWrapper .context-menu .dropdown:before,
    .customerWrapper .context-menu .dropdown:after {
        content: "";
        display: block;
        position: absolute;
        right: 10px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px;
    }

    .customerWrapper .context-menu .dropdown:before {
        top: -20px;
        border-color: transparent transparent #9f9fb4 transparent;
    }

    .customerWrapper .context-menu .dropdown:after {
        top: -20px;
        border-color: transparent transparent #fff transparent;
    }

    .customerWrapper .btnSearch {
        float: none;
        margin-top: auto;
        overflow: auto;
        margin-bottom: 10px;
    }

        .customerWrapper .btnSearch .searchWrapper {
            position: relative;
            width: 420px;
            float: left;
        }

            .customerWrapper .btnSearch .searchWrapper #input-listFilterSrch {
                background: #fff;
                height: 40px;
                padding: 5px 45px 5px 10px;
                color: #b9babc;
                caret-color: #ffb446;
                margin: 0;
                border: 1px solid #e5e5e5;
                width: 100%;
                border-radius: 4px;
                font: normal normal 400 14px/19px "Open Sans";
                float: none;
                outline: none;
            }

            .customerWrapper .btnSearch .searchWrapper img {
                position: absolute;
                right: 15px;
                width: 19px;
                height: 19px;
                top: 10px;
            }

            .customerWrapper .btnSearch .searchWrapper ::placeholder {
                color: #b9babc;
                opacity: 1;
                font: normal normal 400 14px/19px "Open Sans";
            }

            .customerWrapper .btnSearch .searchWrapper :-ms-input-placeholder {
                color: #b9babc;
                font: normal normal 400 14px/19px "Open Sans";
            }

            .customerWrapper .btnSearch .searchWrapper ::-ms-input-placeholder {
                color: #b9babc;
                font: normal normal 400 14px/19px "Open Sans";
            }

        .customerWrapper .btnSearch .iconsWrapper {
            float: right;
            margin-top: 5px;
        }

            .customerWrapper .btnSearch .iconsWrapper > div {
                display: inline-block;
                padding: 1px 3px;
                background-color: #eae8e8;
            }

                .customerWrapper .btnSearch .iconsWrapper > div:hover {
                    cursor: pointer;
                }

    .controlOptions {
        margin-top: 10px;
        /*display: inline-block;*/
    }

        .controlOptions .links {
            display: inline-block;
            background-color: #fff;
            border-radius: 4px;
        }

            .controlOptions .links ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }

                .controlOptions .links ul li {
                    display: inline-block;
                }

                    .controlOptions .links ul li a {
                        display: block;
                        font: normal normal 400 14px/20px "Open Sans";
                        color: #15191f !important;
                        padding: 8px 15px;
                        margin-right: 0;
                    }

                    .controlOptions .links ul li.active a {
                        font-weight: bold;
                        color: #21549a !important;
                        margin-right: 0;
                        text-decoration: none;
                    }

                    .controlOptions .links ul li a:hover {
                        text-decoration: none;
                    }

        .controlOptions .linksIcon button {
            background: #fff;
            padding: 5px 8px;
            border-radius: 4px;
            border: none;
            background: #fff;
            color: #21549a !important;
            font: normal normal 600 13px/20px "Open Sans" !important;
        }

        .controlOptions .linksIcon {
            display: inline-block;
            border-radius: 4px;
            float: right;
        }

    /*  #btndownloadpackage,
    #btndownloadcustomer,
    #btndownloadNotification,
    #btndownloadshipment {
        border: none;
        background: #fff;
        color: #21549a !important;
        font: normal normal 600 14px/20px "Open Sans";
    }*/

    .customerDetailsPopup .modal-body {
        padding-left: 50px;
        padding-right: 50px;
    }

        .customerDetailsPopup .modal-body img {
            width: 100%;
        }

        .customerDetailsPopup .modal-body .customerBtns {
            font: normal normal 600 12px/20px "Open Sans";
            color: #15191f;
        }

            .customerDetailsPopup .modal-body .customerBtns .action {
                background-color: #e8e8e8;
                text-align: center;
                padding: 5px;
                border-radius: 4px;
            }

                .customerDetailsPopup .modal-body .customerBtns .action + .action {
                    margin-top: 8px;
                }

                .customerDetailsPopup .modal-body .customerBtns .action input {
                    background-repeat: no-repeat;
                    border: none;
                    cursor: pointer;
                    padding-left: 20px;
                    text-transform: uppercase;
                    background-color: transparent;
                    font: normal normal 600 12px/20px "Open Sans";
                    color: #15191f;
                    letter-spacing: 1px;
                    background-position-y: 2px;
                }

                    .customerDetailsPopup .modal-body .customerBtns .action input.approve {
                        background-image: url(../../imgs/approve.png);
                    }

                    .customerDetailsPopup .modal-body .customerBtns .action input.reject {
                        background-image: url(../../imgs/reject.png);
                    }

        .customerDetailsPopup .modal-body .customerInformation {
            padding: 30px 0;
            font: normal normal 300 12px/24px "Open Sans";
            color: #15191f;
        }

            .customerDetailsPopup .modal-body .customerInformation > .row + .row {
                margin-top: 8px;
            }

            .customerDetailsPopup
            .modal-body
            .customerInformation > .row > div:last-child {
                font-weight: normal;
            }
    /* Customers Screen end */

    /* Customer Details screen */
    .customerWrapper .backBtn a {
        font: normal normal 600 13px/16px "Open Sans";
        color: #265aa1;
    }

        .customerWrapper .backBtn a:hover {
            text-decoration: none;
        }

        .customerWrapper .backBtn a i {
            margin-right: 5px;
        }

    .customerWrapper .customerDetailsSection {
        color: #15191f;
        font: normal normal normal 15px/17px "Open Sans";
    }

        .customerWrapper .customerDetailsSection .leftSection .summarySection {
            background-color: #f4f6f8;
            padding: 15px;
            margin-top: 10px;
            border-radius: 4px;
        }

            .customerWrapper
            .customerDetailsSection
            .leftSection
            .summarySection
            .summaryDetails {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
            }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .summarySection
                .summaryDetails
                .summaryDetailsLeft {
                    font: normal normal 600 10px/20px "Open Sans";
                }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .summarySection
                    .summaryDetails
                    .summaryDetailsLeft > * {
                        display: inline-block;
                    }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .summarySection
                    .summaryDetails
                    .summaryDetailsLeft
                    img {
                        margin-right: 15px;
                    }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .summarySection
                    .summaryDetails
                    .summaryDetailsLeft
                    .userRegistered {
                        background-color: #ffb446;
                        padding: 2px 8px;
                        border-radius: 4px;
                        text-transform: uppercase;
                    }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .summarySection
                    .summaryDetails
                    .summaryDetailsLeft
                    .viewId {
                        margin-left: 0px;
                        margin-top: 10px;
                        background-color: #ffb44666;
                        padding: 2px 8px;
                        border-radius: 4px;
                    }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsLeft
                        .viewId
                        span + span {
                            margin-left: 25px;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsLeft
                        .viewId
                        span
                        i {
                            margin-left: 6px;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsLeft
                        .viewId
                        span
                        a:hover {
                            text-decoration: none;
                        }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .summarySection
                .summaryDetails
                .summaryDetailsRight {
                    margin-top: 10px;
                    font: normal normal 600 10px/20px "Open Sans";
                    font-style: italic;
                }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .summarySection
                    .summaryDetails
                    .summaryDetailsRight
                    .switch
                    label {
                        cursor: pointer;
                    }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        input[type="checkbox"] {
                            opacity: 0;
                            width: 0;
                            height: 0;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        .lever {
                            display: inline-block;
                            position: relative;
                            width: 40px;
                            height: 19px;
                            background-color: #dedede;
                            border-radius: 15px;
                            vertical-align: middle;
                            margin-left: 5px;
                            border: 1px solid #adadad;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        input[type="checkbox"]:checked + .lever {
                            background-color: #ffb446;
                            border-color: #ffb446;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        .lever:before,
                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        .lever:after {
                            content: "";
                            position: absolute;
                            width: 17px;
                            height: 17px;
                            border-radius: 50%;
                            left: 1px;
                            top: 0;
                            transition: left 0.3s ease;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        .lever:before {
                            background-color: rgba(38, 166, 154, 0.15);
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        .lever:after {
                            background-color: #fff;
                            box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        input[type="checkbox"]:checked + .lever:before,
                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        input[type="checkbox"]:checked + .lever:after {
                            left: 20px;
                        }

            .customerWrapper
            .customerDetailsSection
            .leftSection
            .summarySection
            .summaryInfo {
                margin-top: 15px;
                font-size: 12px;
            }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .summarySection
                .summaryInfo
                span {
                    display: block;
                }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .summarySection
                .summaryInfo
                .head {
                    text-transform: uppercase;
                    letter-spacing: 1px;
                }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .summarySection
                .summaryInfo
                .value {
                    font-weight: 600;
                    margin-top: 10px;
                }

        .customerWrapper .customerDetailsSection .leftSection .tableSection {
            margin-top: 15px;
        }

            .customerWrapper
            .customerDetailsSection
            .leftSection
            .tableSection
            .nav-tabs {
                border-bottom: none;
                background-color: #f4f6f8;
                justify-content: space-between;
                border-radius: 4px;
            }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .tableSection
                .nav-tabs
                .nav-link {
                    border: none;
                    font-size: 14px;
                    padding-bottom: 12px;
                }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .tableSection
                    .nav-tabs
                    .nav-link.active {
                        background-color: transparent;
                        font-weight: 600;
                    }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .tableSection
                        .nav-tabs
                        .nav-link.active
                        span {
                            position: relative;
                        }

                            .customerWrapper
                            .customerDetailsSection
                            .leftSection
                            .tableSection
                            .nav-tabs
                            .nav-link.active
                            span::after {
                                content: "";
                                width: 70%;
                                height: 2px;
                                background: #2c5495;
                                position: absolute;
                                bottom: -4px;
                                left: 0;
                            }

            .customerWrapper
            .customerDetailsSection
            .leftSection
            .tableSection
            .tab-content {
                padding: 15px;
            }

        .customerWrapper .customerDetailsSection .tab-content table thead {
            background-color: #fff !important;
        }

            .customerWrapper .customerDetailsSection .tab-content table thead th {
                font-size: 11px;
            }

                .customerWrapper .customerDetailsSection .tab-content table thead th + th {
                    border-left: none;
                }

        .customerWrapper .customerDetailsSection .tab-content table tbody tr.odd,
        .customerWrapper .customerDetailsSection .tab-content table tbody tr.odd {
            background-color: #fff;
        }

        .customerWrapper
        .customerDetailsSection
        .tab-content
        table.hover
        tbody
        tr:hover,
        .customerWrapper
        .customerDetailsSection
        .tab-content
        table.display
        tbody
        tr:hover {
            background-color: #f6f6f6 !important;
        }

        .customerWrapper .customerDetailsSection .tab-content table tbody tr + tr td {
            border-top: 1px solid #e8e8e8;
        }

        .customerWrapper .customerDetailsSection .tab-content table .storeCountry img,
        .customerWrapper .customerDetailsSection .tab-content table .fromCountry img {
            margin-right: 5px;
        }

        .customerWrapper .customerDetailsSection .tab-content table .action a + a {
            margin-left: 8px;
        }

        .customerWrapper
        .customerDetailsSection
        .tab-content
        table
        .status.inProgress,
        .customerWrapper .customerDetailsSection .tab-content table .status.shipped,
        .customerWrapper .customerDetailsSection .tab-content table .status.success {
            color: #56b245;
        }

        .customerWrapper
        .customerDetailsSection
        .tab-content
        table
        .status.inTransit {
            color: #c99c1c;
        }

        .customerWrapper
        .customerDetailsSection
        .tab-content
        table
        .status.delivered {
            color: #2aaed5;
        }

        .customerWrapper .customerDetailsSection .tab-content table .status.cancelled,
        .customerWrapper .customerDetailsSection .tab-content table .status.failed {
            color: #fd6043;
        }

        .customerWrapper
        .customerDetailsSection
        .tab-content
        table
        .status.destroyed {
            color: #8d8d8d;
        }

        .customerWrapper .customerDetailsSection .rightSection {
            background-color: #f4f6f8;
            padding: 15px;
            text-align: center;
            border-radius: 4px;
        }

            .customerWrapper .customerDetailsSection .rightSection i,
            .customerWrapper .customerDetailsSection .rightSection img {
                margin-right: 5px;
            }

            .customerWrapper .customerDetailsSection .rightSection i {
                font-size: 16px;
            }

            .customerWrapper .customerDetailsSection .rightSection .regDate {
                font: normal normal 600 10px/14px "Open Sans";
                margin-bottom: 15px;
                text-transform: uppercase;
            }

            .customerWrapper .customerDetailsSection .rightSection .statsHeader {
                font: normal normal normal 14px/20px "Open Sans";
                margin-bottom: 25px;
            }

            .customerWrapper .customerDetailsSection .rightSection .statsDetails {
                font: normal normal 600 14px/19px "Open Sans";
            }

                .customerWrapper
                .customerDetailsSection
                .rightSection
                .statsDetails
                .statsDetail + .statsDetail {
                    margin-top: 30px;
                }

                .customerWrapper
                .customerDetailsSection
                .rightSection
                .statsDetails
                .statsDetail
                .desc {
                    color: #f7ba62;
                    font-size: 20px;
                    line-height: 27px;
                }

            .customerWrapper .customerDetailsSection .rightSection .comments {
                margin-top: 20px;
            }

                .customerWrapper .customerDetailsSection .rightSection .comments textarea {
                    font: normal normal 300 10px/20px "Open Sans";
                    font-style: italic;
                }

                .customerWrapper
                .customerDetailsSection
                .rightSection
                .comments
                ::placeholder {
                    font: normal normal 300 10px/20px "Open Sans";
                    font-style: italic;
                    color: #15191f;
                }

                .customerWrapper
                .customerDetailsSection
                .rightSection
                .comments
                :-ms-input-placeholder {
                    font: normal normal 300 10px/20px "Open Sans";
                    font-style: italic;
                    color: #15191f;
                }

                .customerWrapper
                .customerDetailsSection
                .rightSection
                .comments
                ::-ms-input-placeholder {
                    font: normal normal 300 10px/20px "Open Sans";
                    font-style: italic;
                    color: #15191f;
                }
    /* Customer Details screen */

    .packageWrapper {
        font: normal normal normal 12px/24px "Open Sans";
        color: #15191f;
    }

        .packageWrapper .headerSection {
            position: relative;
            overflow: auto;
            margin-bottom: 10px;
        }

            .packageWrapper .headerSection .leftSection {
                float: left;
            }

                .packageWrapper .headerSection .leftSection h6,
                .packageWrapper .headerSection .leftSection img {
                    display: inline-block;
                }

                .packageWrapper .headerSection .leftSection h6 {
                    margin: 0 5px 0;
                }

            .packageWrapper .headerSection .rightSection {
                float: right;
            }

                .packageWrapper .headerSection .rightSection a {
                    font: normal normal 600 14px/15px "Open Sans";
                    color: #21549a;
                }

                    .packageWrapper .headerSection .rightSection a:hover {
                        text-decoration: none;
                    }

                    .packageWrapper .headerSection .rightSection a img {
                        margin-right: 5px;
                    }

        .packageWrapper .card.pack-card {
            border: none !important;
            margin-bottom: 30px;
        }

            .packageWrapper .card.pack-card .card-header {
                background-image: linear-gradient(to right, #e94b35, #75261b);
                display: block;
            }

                .packageWrapper .card.pack-card .card-header .shipp-btn {
                    background: #9b3324;
                }

                .packageWrapper .card.pack-card .card-header img {
                    float: left;
                    margin-right: 8px;
                }

            .packageWrapper .card.pack-card .card-body {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                background-color: #f7f7f7;
            }

    button#btnModalFilter + button#btnClear {
        font-size: 10pt;
        padding: 3px 8px;
        height: 38px;
        border: 0;
        background: #264f8d;
        color: #fff;
        margin-left: 8px;
        border-radius: 4px;
    }

    input#PackageDocumentInputModel_weight,
    input#PackageDocumentInputModel_shippingcost,
    input#PackageDocumentInputModel_awbnumber,
    #PackageDocumentInputModel_amount,
    #textarea#PackageDocumentInputModel_invoicenumber {
        background-color: #e8e8e8 !important;
    }

    textarea#PackageDocumentInputModel_invoicenumber {
        background: #e8e8e8;
    }

    textarea#PackageDocumentInputModel_comment {
        background: #e8e8e8;
    }

    .packageWrapper .card.pack-card .packageInformation {
        font: normal normal 300 14px/24px "Open Sans" !important;
        color: #15191f !important;
        background-color: #fff;
        padding-top: 15px;
        padding: 15px;
        display: flex;
        justify-content: flex-start;
    }

        .packageWrapper .card.pack-card .packageInformation p {
            font: normal normal 600 14px/24px "Open Sans" !important;
            color: #15191f !important;
            margin: 0;
        }

        .packageWrapper .card.pack-card .packageInformation span {
            color: #15191f !important;
        }

    .packageWrapper .card.pack-card .additionalInformation {
        background-color: #f7f7f7;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .packageWrapper
    .pack-item-card-wrapper > .row > div:nth-child(odd)
    .card.pack-item-card
    .item-detail-header {
        background-image: linear-gradient(to right, #11405e, #227fbb);
    }

    .packageWrapper
    .pack-item-card-wrapper > .row > div:nth-child(even)
    .card.pack-item-card
    .item-detail-header {
        background-image: linear-gradient(to right, #77271b, #e74a34);
    }

    .packageWrapper .pack-item-card-wrapper .card.pack-item-card {
        border: none !important;
    }

        .packageWrapper
        .pack-item-card-wrapper
        .card.pack-item-card
        .item-detail-header {
            background: none;
        }

        .packageWrapper .pack-item-card-wrapper .card.pack-item-card .card-body {
            background-color: #fff;
            border-radius: 4px;
            padding-bottom: 15px !important;
        }

            .packageWrapper
            .pack-item-card-wrapper
            .card.pack-item-card
            .card-body > div {
                width: 100%;
            }

                .packageWrapper
                .pack-item-card-wrapper
                .card.pack-item-card
                .card-body > div + div {
                    margin-top: 7px;
                }

                .packageWrapper
                .pack-item-card-wrapper
                .card.pack-item-card
                .card-body > div > * {
                    display: inline-block;
                    width: 49%;
                    font: normal normal 300 12px/24px "Open Sans" !important;
                    color: #15191f;
                }

                .packageWrapper
                .pack-item-card-wrapper
                .card.pack-item-card
                .card-body > div
                p {
                    font-weight: normal !important;
                }

    .packageHistorySection {
        margin-top: 30px;
    }

        .packageHistorySection ul {
            background-color: #fff;
            padding: 20px;
            margin: 0;
            border-radius: 4px;
        }

            .packageHistorySection ul li.time-line {
                margin-left: 15px;
            }

                .packageHistorySection ul li.time-line .time-line-icon {
                    left: -15px;
                }

                .packageHistorySection ul li.time-line span {
                    color: #15191f;
                }

                    .packageHistorySection ul li.time-line span.package-received-status {
                        color: #f05133;
                        font-size: 10px;
                        font-weight: 600;
                    }

    #itemInfoOverlay:hover {
        cursor: pointer;
    }

    .shipmentAccordion {
        margin-left: 0;
        margin-right: 0;
    }

        .shipmentAccordion .div-box {
            background-color: #fff;
        }

            .shipmentAccordion .div-box + .div-box {
                margin-left: 15px;
            }

        .shipmentAccordion .total-item-title,
        .shipmentAccordion .order-total-title,
        .shipmentAccordion .total-item-val,
        .shipmentAccordion .order-total-val {
            color: #15191f;
        }

        .shipmentAccordion .panel {
            background-color: #fff;
        }

        .shipmentAccordion .card-body {
            background-color: #fff;
            border: 1px solid #e8e8e8;
        }

            .shipmentAccordion .card-body > div + div {
                margin-top: 5px;
            }

        .shipmentAccordion .header-line .item-id,
        .shipmentAccordion .header-line .item-name {
            color: #fff;
        }

    /* Login / Reset Password start  */
    .signInContainer,
    .resetContainer {
        background-color: #fff;
    }



        .resetContainer .input-feild {
            padding-right: 50px;
        }

        .signInContainer input + .form-control-placeholder,
        .signInContainer .form-group input:focus + label,
        .resetContainer input + .form-control-placeholder,
        .resetContainer .form-group input:focus + label {
            color: #15191f;
        }

        .signInContainer .float,
        .resetContainer .float {
            /*background-color: #21549a;*/
        }

        .signInContainer .forgot-password-label {
            color: #15191f;
        }

        .signInContainer a:hover {
            text-decoration: none;
        }


        .signInContainer .sign-in-btn:focus,
        .resetContainer .send-otp .btn:focus {
            outline: none;
            box-shadow: none;
        }

        .resetContainer .message {
            color: #15191f;
        }
    /* Login / Reset Password end  */
}

@media (min-width: 1200px) {
    .btnwraper > div {
        background: #e8e8e8;
        border-radius: 4px;
        padding: 1px 7px;
    }

    .uploadSection {
        height: 175px;
    }

    .row.pckdtlstbl > div {
        display: block;
        width: auto;
        padding: 3px 14px 5px 1px;
    }

    .search-switch {
        display: flex;
        justify-content: flex-end;
    }

    .mainheader .navbar-collapse {
        overflow: auto;
    }

        .mainheader .navbar-collapse::-webkit-scrollbar {
            display: none;
        }

    ul.navbar-nav.flex-grow-1.nav-menu {
        flex-direction: column;
        display: block;
        height: 100%;
    }

    .mainheader .navbar-collapse {
        height: 100%;
        flex-direction: column;
    }

    .mainheader {
        /*max-width: 13%;*/
        height: 100%;
        float: left;
        /*max-width: 160px !important;*/
        float: left; /* background: green; */
        height: 100vh;
        padding: 5px 0px;
    }
    /* empty section designs */
    .empty-section {
        margin-top: 180px;
    }

    .empty-section-text {
        font: normal normal normal 24px/33px "Open Sans";
        color: #15191f;
    }

    /* upload section designs  */

    /* more option screen designs */

    span.header-line {
        font: normal normal 600 18px/36px Open Sans;
        color: #ffffff;
        flex: 1;
    }

    .header-line + #btnChange {
        font: normal normal 600 12px/20px Open Sans;
        letter-spacing: 1.2px;
        color: #1bd0cb;
        text-transform: uppercase;
    }

    .bdr-none {
        border: none !important;
    }

    .active-label {
        color: #ffb446 !important;
    }

    .time-line {
        padding-bottom: 16px;
        border-left: 2px dashed #e44e30;
        padding-left: 24px;
        /* filter: grayscale(1); */
        position: relative;
        list-style-type: none;
    }

    .time-line-icon {
        background: url(../imgs/facility.png);
        height: 30px;
        background-repeat: no-repeat;
        position: absolute;
        width: 30px;
        left: -15px;
        background-color: var(--background-primary);
        top: 8px;
    }

    .package-received-date {
        font: normal normal 600 14px/21px "Open Sans";
        letter-spacing: 0px;
        color: var(--text-contrast);
    }

    .addlbtncntr .addlb {
        /* background: transparent linear-gradient(266deg, var(--primary-dark) 0%, var(--primary-darker) 100%) 0% 0% no-repeat padding-box; */
        background-color: #f5b65c66;
        border: 1px solid #f5b65d;
        border-radius: 4px;
        font: normal normal normal 12px/20px "Open Sans";
        color: #15191f;
        outline: none;
        height: auto;
        margin-right: 7px;
    }

        .addlbtncntr .addlb:hover {
            cursor: pointer;
        }

        .addlbtncntr .addlb:active {
            background-color: #f5b65c66 !important;
            border: 1px solid #f5b65d !important;
            color: #15191f !important;
        }

            .addlbtncntr .addlb:focus,
            .addlbtncntr .addlb:active:focus {
                box-shadow: none !important;
            }

    .v-center {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .itmcntr .bottom-btn {
        text-align: center;
    }

    .package-received-date {
        font: normal normal 600 14px/21px "Open Sans";
        letter-spacing: 0px;
        color: var(--text-contrast);
    }

    .package-received-status {
        font: normal normal normal 14px/21px Open Sans;
        letter-spacing: 0px;
        color: var(--text-contrast);
    }

    .appbtn {
        background: transparent linear-gradient(90deg, #016c4f 0%, #0c8e6b 100%) 0% 0% no-repeat padding-box;
        border-radius: 4px;
        height: 30px;
        margin-right: 5px;
        padding: 0 8px;
        border: none;
    }

    .rejbtn {
        background: transparent linear-gradient(267deg, #f26247 0%, #cb3f23 100%) 0% 0% no-repeat padding-box;
        border-radius: 4px;
        height: 30px;
        color: #ffffff;
        padding: 0 8px;
        border: none;
    }

    .s2d-navbar.nav_new {
        padding: 10px 0;
        /* background: #252B33 0% 0% no-repeat padding-box;
        border: 1px solid #293341; */
        background: no-repeat;
        border: none;
        /*background-image: url(../imgs/nav-bg.png);*/
        background: #0266FF;
        opacity: 1;
        align-items: flex-start;
        margin: 0;
        flex-direction: column;
        height: 100%;
    }

    .container.main_contorellar {
        flex-direction: column;
        height: 100%;
    }

    .nav-link.s2d-nav-link,
    .s2d-navbar.nav_new .navbar-nav .s2d-nav-link {
        font: normal normal 14px/19px Open Sans;
        letter-spacing: 0px;
        color: #F8FBFD;
        text-transform: capitalize;
        opacity: 1;
        font-weight: 400;
        display: flex;
        align-items: center;
    }

    .container.right {
        /*max-width: 87% !important;*/
        /*float: right;*/
        margin-top: 15px;
    }

    .customer-heading,
    .shipment-heading,
    .package-heading {
        font: normal normal 600 18px/22px Montserrat;
        color: #15191f;
        margin-bottom: 0;
    }

    .total-customer-count,
    .total-shipment-count,
    .total-package-count {
        font: normal normal 400 14px/18px "Open Sans";
        color: #000 !important;
    }

    #ship_total,
    #pack_total {
        font-weight: 700;
        font-size: 100%;
    }

    /* modal popups start */
    .modal-content {
        border: none;
    }

    .modal-header {
        background-color: #fff !important;
        padding: 20px 10px 10px 10px;
    }

    .modal-title {
        font: normal normal 600 18px/20px Montserrat !important;
        letter-spacing: 0px !important;
        color: var(--text_primary_accent) !important;
        text-transform: capitalize !important;
        margin: 10px auto 0;
    }

    .modal-header .close {
        color: #000 !important;
        margin: 0;
        padding: 0 1rem;
    }

        .modal-header .close:focus {
            outline: none;
        }

    .modal-body {
        background-color: #fff !important;
        padding: 20px !important;
        padding-bottom: 0 !important;
        border-radius: 4px;
    }

        .modal-body .actionBtns {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }

            .modal-body .actionBtns .actBtn {
                width: 49%;
                display: grid;
                position: relative;
            }

                .modal-body .actionBtns .actBtn .btn {
                    background-image: linear-gradient( to right, #265ba2, #1b4175, #112a4d ) !important;
                    background: none;
                    position: relative;
                    width: auto;
                    left: auto;
                    transform: none;
                    height: auto;
                    top: auto;
                    bottom: auto;
                    text-transform: uppercase;
                    font: normal normal 600 14px/19px "Open Sans";
                    color: #fff;
                    padding: 15px 10px !important;
                    letter-spacing: 1.6px;
                }

                    .modal-body .actionBtns .actBtn .btn:focus {
                        box-shadow: none;
                    }

                .modal-body .actionBtns .actBtn .submitBtn {
                    text-align: left;
                }

                .modal-body .actionBtns .actBtn .closeBtn {
                    justify-content: center;
                    background-image: none !important;
                    color: #15191f;
                }

                .modal-body .actionBtns .actBtn .arrow {
                    position: absolute;
                    right: 6px;
                    top: 9px;
                }
    /* modal popups end */

    /* dashboard screen start */
    .dashboardWrapper .dashboardViewHeader {
        position: relative;
        /*overflow: hidden;*/
        font: normal normal 600 18px/20px Montserrat;
        color: #21549a;
    }

        .dashboardWrapper .dashboardViewHeader .leftSection {
            float: left;
        }

        .dashboardWrapper .dashboardViewHeader .rightSection {
            float: right;
        }

            .dashboardWrapper .dashboardViewHeader .rightSection .view {
                background: #e8e8e8;
                display: block;
                width: auto;
                position: relative;
                left: auto;
                transform: none;
                bottom: auto;
                height: auto;
                padding: 5px 15px !important;
                font: normal normal 600 12px/20px "Open Sans";
                color: #15191f;
                text-transform: uppercase;
                letter-spacing: 0.6px;
            }

                .dashboardWrapper .dashboardViewHeader .rightSection .view:focus {
                    box-shadow: none;
                }

    .dashboardWrapper .flex-container .divider {
        flex-grow: 1;
        border-top: 1px dashed #16191e;
        margin: 0px 5px;
        display: block;
    }
    /* dashboard screen end */

    .package-container .card {
        border: none !important;
    }

        .package-container .card .card-header {
            background: none;
            box-shadow: 0px 3px 6px #00000029;
        }

    .package-container.row > div:nth-child(3n + 1) .card .card-header {
        background-image: linear-gradient(to right, #e94b35, #75261b);
    }

    .package-container.row > div:nth-child(3n + 2) .card .card-header {
        background-image: linear-gradient(to right, #ffffff, #e3e3e3);
    }

    .package-container.row > div:nth-child(3n + 3) .card .card-header {
        background-image: linear-gradient(to right, #227fbb, #11405e);
    }

    .package-container.row > div:nth-child(3n + 1) .card .card-header .shipp-btn {
        background: #9b3324;
    }

    .package-container.row > div:nth-child(3n + 2) .card .card-header .shipp-btn {
        background: #e4e4e4;
    }

    .package-container.row > div:nth-child(3n + 3) .card .card-header .shipp-btn {
        background: #165278;
    }

    .package-container.row > div:nth-child(3n + 2)
    .card
    .card-header
    span.header-line
    p,
    .package-container.row > div:nth-child(3n + 2) .card .card-header .shipp-btn {
        color: #15191f;
    }

    .problemPackagesSection .package-container.row > div .card .card-header,
    .latestShipmentsSection .package-container.row > div .card .card-header {
        background-image: linear-gradient(to right, #e94b35, #75261b);
    }

        .problemPackagesSection
        .package-container.row > div
        .card
        .card-header
        span.header-line
        p,
        .problemPackagesSection
        .package-container.row > div
        .card
        .card-header
        .shipp-btn,
        .latestShipmentsSection
        .package-container.row > div
        .card
        .card-header
        span.header-line
        p,
        .latestShipmentsSection
        .package-container.row > div
        .card
        .card-header
        .shipp-btn {
            color: #fff;
        }

        .problemPackagesSection
        .package-container.row > div
        .card
        .card-header
        .shipp-btn,
        .latestShipmentsSection
        .package-container.row > div
        .card
        .card-header
        .shipp-btn {
            background: #9b3324;
            color: #fff;
        }

    .modal-header.dshboard .close {
        color: #000 !important;
        margin: 5px;
        padding: 0 1rem;
        right: 0%;
        position: absolute;
        left: inherit;
        top: 8px;
    }
    /* .problemPackagesSection .package-container.row > div:nth-child(3n+2) .card .card-header {background-image: linear-gradient(to right, #1CB15F , #0E502C);}
.problemPackagesSection .package-container.row > div:nth-child(3n+2) .card .card-header span.header-line p, .problemPackagesSection .package-container.row > div:nth-child(3n+2) .card .card-header .shipp-btn {color:#fff;}
.problemPackagesSection .package-container.row > div:nth-child(3n+2) .card .card-header .shipp-btn {background:#158849;color:#fff;} */

    .package-container .card .card-header img {
        margin-right: 6px;
    }

    .package-container .card .card-body {
        background-color: #fff;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: 0 !important;
        box-shadow: 0px 3px 6px #00000029;
    }

        .package-container .card .card-body .information {
            display: flex;
            padding: 20px 15px;
            justify-content: space-between;
        }

            .package-container .card .card-body .information .divider {
                border-left: 1px solid #e8e8e8;
                display: block;
            }

        .package-container .card .card-body .actionBtns {
            padding: 10px 15px;
            background: #f7f7f7;
            display: flex;
            justify-content: space-between;
            height: 45px;
        }



    div#filterModalContent .modal-body label.filter-label {
        margin-bottom: 8px;
        margin-top: 8px;
    }

    .package-container .card .card-body .actionBtns button {
        font: normal normal 10px/16px OpenSans-b;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #15191f;
        float: none;
        border-radius: 4px;
        background-color: #e8e8e8;
        display: block;
        width: auto;
        height: auto;
        position: relative;
        right: auto;
        bottom: auto;
        border: none;
        height: 28px;
        padding: 4px;
    }

    .package-container .card .card-body .actionBtns .detail-btn:focus {
        outline: none;
    }

    .package-container .card .card-body .actionBtns .detail-btn img {
        margin-right: 4px;
    }

    .problemPackagesSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.download,
    .problemPackagesSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.track,
    .latestShipmentsSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.download,
    .latestShipmentsSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.track {
        background-color: transparent;
        display: inline-flex;
        width: min-content;
        line-height: 11px;
        text-align: left;
    }

    .problemPackagesSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.download,
    .latestShipmentsSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.download {
        color: #21549a;
        text-align: left;
        padding: 0;
    }

    .problemPackagesSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.track,
    .latestShipmentsSection
    .package-container
    .card
    .card-body
    .actionBtns
    .detail-btn.track {
        color: #ffb446;
    }

    .problemPackagesSection .package-container#divList,
    .latestShipmentsSection .package-container#divList {
        margin-left: -15px;
    }

    .received-title,
    .shipment-title,
    .total-val-title,
    .weight-title,
    .total-weight-title,
    .estimate-title,
    .total-declared-title,
    .total-item-title,
    .order-total-title,
    .receved-date,
    .shipment-date,
    .estimate-date,
    .total-val,
    .weight-val,
    .total-weight-val,
    .total-declared-val,
    .total-item-val,
    .order-total-val {
        color: #15191f;
    }

    .shipp-btn-status {
        border: none;
    }

    ::placeholder {
        color: #b9babc;
        opacity: 1;
        font: normal normal 400 14px/19px "Open Sans";
    }

    :-ms-input-placeholder {
        color: #b9babc;
        font: normal normal 400 14px/19px "Open Sans";
    }

    ::-ms-input-placeholder {
        color: #b9babc;
        font: normal normal 400 14px/19px "Open Sans";
    }

    sup {
        font-size: 9px;
    }

    .modal-content.custom-modal-content.mx-auto.w-auto.br12 {
        background: #292f38;
    }

    #ModalOverlayDialog .modal-header .close {
        color: #000 !important;
        margin: 5px;
        padding: 0 1rem;
        left: 84%;
        position: relative;
        top: -12px;
    }

    .modal-header .close {
        color: #000 !important;
        margin: 5px;
        padding: 0 1rem;
        left: 4%;
        position: relative;
        top: -12px;
    }

    .package-container .card .card-body .information p.receved-date,
    .package-container .card .card-body p.weight-val {
        font: normal normal normal 14px/24px OpenSans-l !important;
        letter-spacing: 0px;
        color: #15191f;
        opacity: 1;
        letter-spacing: -0.03px;
        color: #15191f;
        opacity: 1;
    }

    .modal-content.custom-modal-content {
        background: #292f38;
    }
    /* Customers Screen start */
    .customerWrapper {
        padding: 15px;
        background-color: #fff;
        box-shadow: 1px 1px 4px 5px #efefef;
        border-radius: 4px;
        margin-top: 10px;
        width: 100%;
        height: 600px;
        overflow: scroll;
    }

        .customerWrapper table.dataTable.no-footer {
            border-bottom: none;
        }

        .customerWrapper table#customerData thead {
            background-color: #ffb446;
        }

        .customerWrapper table.dataTable thead th {
            font-size: 14px;
            color: #15191f;
            font-family: "Open Sans";
            font-weight: 600;
            padding: 5px 18px;
            border-bottom: none;
        }

            .customerWrapper table.dataTable thead th + th {
            }

        .customerWrapper .dataTables_wrapper {
            width: 100%;
        }

        .customerWrapper
        .customerDetailsSection
        .leftSection
        .tableSection
        .tab-content {
            padding: 15px;
            width: 700px;
            overflow: auto;
        }

        .customerWrapper table.dataTable.stripe tbody tr.odd,
        .customerWrapper table.dataTable.display tbody tr.odd {
            background-color: #f4f6f8;
        }

        .customerWrapper table.dataTable tbody tr {
            background-color: #fff;
        }

        .customerWrapper table.dataTable.row-border tbody th,
        .customerWrapper table.dataTable.row-border tbody td,
        .customerWrapper table.dataTable.display tbody th,
        .customerWrapper table.dataTable.display tbody td {
            border-top: none;
            line-height: normal;
        }

        .customerWrapper table.dataTable.display tbody tr.odd > .sorting_1,
        .customerWrapper
        table.dataTable.order-column.stripe
        tbody
        tr.odd > .sorting_1 {
            background-color: transparent;
        }

        .customerWrapper table.dataTable.display tbody tr.even > .sorting_1,
        .customerWrapper
        table.dataTable.order-column.stripe
        tbody
        tr.even > .sorting_1 {
            background-color: transparent;
        }

        .customerWrapper table.dataTable tbody th,
        .customerWrapper table.dataTable tbody td {
            padding: 8px 18px;
            font-size: 12px;
            color: #15191f;
            font-family: "Open Sans";
            font-weight: normal;
        }

        .customerWrapper table.dataTable#customerData thead .sorting {
            background-image: url(../../imgs/sort_both-new.png);
        }

        .customerWrapper #customerData .name:hover {
            cursor: pointer;
        }

        .customerWrapper #customerData .flag img,
        .customerWrapper #customerData .status img {
            margin-right: 5px;
            width: 20px;
            height: 20px;
        }

        .customerWrapper #customerData .btn-acon {
            background: #e8e8e8;
            height: auto;
            font-family: "Open Sans";
            font-weight: 600;
            font-size: 10px;
            color: #15191f;
            text-transform: uppercase;
            padding: 0 0 0 4px;
            margin-right: 0;
        }

            .customerWrapper #customerData .btn-acon:focus {
                box-shadow: none !important;
            }

        .customerWrapper .dataTables_wrapper .dataTables_info {
            color: #15191f;
            font-family: "Open Sans";
            font-style: italic;
            font-size: 10px;
            padding-top: 20px;
        }

        .customerWrapper .dataTables_wrapper .dataTables_paginate {
            color: #15191f;
            font-family: "Open Sans";
            font-weight: 700;
            font-size: 12px;
            padding-top: 20px;
        }

            .customerWrapper .dataTables_wrapper .dataTables_paginate .paginate_button {
                background-color: #fff;
                margin-left: 0;
                border-radius: 0;
                padding: 5px 10px;
                font-weight: 400;
            }

                .customerWrapper
                .dataTables_wrapper
                .dataTables_paginate
                .paginate_button.current,
                .customerWrapper
                .dataTables_wrapper
                .dataTables_paginate
                .paginate_button.current:hover {
                    border: 1px solid transparent;
                    background: #fff;
                    font-weight: 600;
                }

                .customerWrapper
                .dataTables_wrapper
                .dataTables_paginate
                .paginate_button.previous,
                .customerWrapper
                .dataTables_wrapper
                .dataTables_paginate
                .paginate_button.next {
                    background: #e8e8e8;
                }

                    .customerWrapper
                    .dataTables_wrapper
                    .dataTables_paginate
                    .paginate_button.previous:active,
                    .customerWrapper
                    .dataTables_wrapper
                    .dataTables_paginate
                    .paginate_button.next:active {
                        box-shadow: none;
                    }

                    .customerWrapper
                    .dataTables_wrapper
                    .dataTables_paginate
                    .paginate_button.previous:hover,
                    .customerWrapper
                    .dataTables_wrapper
                    .dataTables_paginate
                    .paginate_button.next:hover {
                        cursor: pointer;
                        background: #e8e8e8;
                        border: 1px solid transparent;
                    }

        .customerWrapper .dataTables_length,
        .customerWrapper .dataTables_filter {
            display: none;
        }

        .customerWrapper .action .btn-action-container {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }

            .customerWrapper .action .btn-action-container > div {
                background: #e8e8e8;
                border-radius: 4px;
                padding: 1px 7px;
            }

                .customerWrapper .action .btn-action-container > div + div {
                    margin-left: 5px;
                }

            .customerWrapper .action .btn-action-container .more {
                font-size: 5px;
                display: flex;
                align-items: center;
            }

                .customerWrapper .action .btn-action-container .more:hover {
                    cursor: pointer;
                }

                .customerWrapper .action .btn-action-container .more .fa + .fa {
                    margin-left: 2px;
                }
        /*  .customerWrapper .context-menu {
    position: absolute;
    float: right;
  }*/
        .customerWrapper .context-menu .dropdown {
            position: absolute;
            text-align: left;
            background-color: #fff;
            z-index: 104;
            max-width: 80%;
            border-radius: 3px;
            min-width: 200px;
            opacity: 0;
            transform: scale(0);
            box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.26), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
            -webkit-box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.26), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
            transition: all 0.3s cubic-bezier(0.79, -0.07, 0.14, 1.03);
            -webkit-overflow-scrolling: touch;
        }

            .customerWrapper .context-menu .dropdown .dropdown-list {
                padding: 10px 0;
                margin: 0;
                list-style: none;
                box-shadow: 1px 1px 4px 5px #efefef;
                min-height: auto;
            }

                .customerWrapper .context-menu .dropdown .dropdown-list .dropdown-list-item {
                    opacity: 0;
                    transition: 0.3s ease-in-out transform;
                    -webkit-transition: 0.3s ease-in-out transform;
                    -webkit-transform: translateY(-14px);
                    transform: translateY(-14px);
                    float: none;
                    display: list-item;
                }

                    .customerWrapper
                    .context-menu
                    .dropdown
                    .dropdown-list
                    .dropdown-list-item
                    a {
                        display: block;
                        font-size: 13px;
                        color: #15191f;
                        padding: 5px 15px;
                    }

                        .customerWrapper
                        .context-menu
                        .dropdown
                        .dropdown-list
                        .dropdown-list-item
                        a:hover,
                        .customerWrapper
                        .context-menu
                        .dropdown
                        .dropdown-list
                        .dropdown-list-item
                        a:focus {
                            text-decoration: none !important;
                        }

                        .customerWrapper
                        .context-menu
                        .dropdown
                        .dropdown-list
                        .dropdown-list-item
                        a:hover {
                            background-color: #f2f2f2;
                        }

    :focus-visible {
        outline: none;
    }

    button.accordion.btnorder-details.active + .shipmentAccordion
    .panel.shipping-details-view {
        padding: 10px !important;
    }

    .shipmentAccordion .panel.shipping-details-view {
        background-color: #f4f5f6;
        display: block;
    }

        .shipmentAccordion .panel.shipping-details-view .opencntr > div {
            display: flow-root;
        }

        .shipmentAccordion .panel.shipping-details-view > .opencntr div p {
            float: right;
            margin-bottom: 2px;
        }

    .panel.shipping-details-view .order-total {
        margin-top: 10px;
        padding: 0 10px;
    }

    .searchWrapper button#btnsearch {
        float: right;
        margin: 8px;
        background: transparent;
    }

    ul.countryul.nav {
        display: inline-block;
        padding: 0;
    }

    .filterul li {
        font: normal normal normal 16px/20px Open Sans;
        float: left;
        display: block;
        margin-bottom: 10px;
        margin-right: 10px;
        height: 34px;
    }

    .countryul li.active a {
        background: #f051331a 0% 0% no-repeat padding-box;
        border: 1px solid #f05133;
        border-radius: 4px;
    }

    .countryul li a {
        background: var(--unnamed-color-e8e8e8) 0% 0% no-repeat padding-box;
        background: #e8e8e8 0% 0% no-repeat padding-box;
        border-radius: 4px;
        opacity: 1;
        padding: 6px 24px;
        color: #15191f !important;
        font: normal normal normal 16px/20px Open Sans;
    }

        .countryul li a:hover {
            text-decoration: none;
        }

    .countryul li.active a {
        background: #f051331a 0% 0% no-repeat padding-box;
        border: 1px solid #f05133;
        border-radius: 4px;
    }

    .countryul li a img {
        width: 19px;
        margin: 0px;
    }

    .countryul li {
        float: left;
        margin-right: 8px;
        height: 46px;
    }

    input#packagenumber {
    }



    input#txtpackages {
        background: #e8e8e8;
        border: none;
        width: 21%;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 8px;
    }

    input#txtdeclaredvalue {
        background: #e8e8e8;
        border: none;
        width: 21%;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 8px;
    }



    .packagestatus-ul li a, .packagetab-ul li a {
        background: var(--unnamed-color-e8e8e8) 0% 0% no-repeat padding-box;
        background: #fff 0% 0% no-repeat padding-box;
        border-radius: 4px;
        opacity: 1;
        padding: 6px 9px;
        color: #15191f !important;
        font: normal normal normal 12px Open Sans;
        margin-left: 5px;
    }

        .packagestatus-ul li a:hover, .packagetab-ul li a:hover {
            text-decoration: none;
        }

    .packagestatus-ul li.active a, .packagetab-ul li.active a {
        background: #0266FF 0% 0% no-repeat padding-box;
        border-radius: 4px;
        color: #fff !important;
        display: inline-block;
    }

    .packagestatus-ul li a img, .packagetab-ul li a img {
        width: 19px;
        margin: 0px;
    }


    .customerWrapper
    .context-menu
    .dropdown
    .dropdown-list
    .dropdown-list-item
    a
    img {
        margin-right: 7px;
        margin-top: -3px;
    }

    .customerWrapper
    .context-menu.active
    .dropdown
    .dropdown-list
    .dropdown-list-item {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }

    .customerWrapper .context-menu .dropdown-right {
        top: 20px;
        right: -8px;
        transform-origin: right top 0px;
    }

    .customerWrapper .context-menu .dropdown-left {
        top: 45px;
        left: 10px;
        transform-origin: left top 0px;
    }

    .customerWrapper .context-menu .dropdown-bottom-right {
        bottom: 45px;
        right: 10px;
        transform-origin: right bottom 0px;
    }

    .customerWrapper .context-menu .dropdown-bottom-left {
        bottom: 45px;
        left: 10px;
        transform-origin: left bottom 0px;
    }

    .customerWrapper .context-menu.active .dropdown {
        transform: scale(1);
        opacity: 1;
    }

    .customerWrapper .context-menu .dropdown:before,
    .customerWrapper .context-menu .dropdown:after {
        content: "";
        display: block;
        position: absolute;
        right: 10px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px;
    }

    .customerWrapper .context-menu .dropdown:before {
        top: -20px;
        border-color: transparent transparent #9f9fb4 transparent;
    }

    .customerWrapper .context-menu .dropdown:after {
        top: -20px;
        border-color: transparent transparent #fff transparent;
    }

    .customerWrapper .btnSearch {
        float: none;
        margin-top: auto;
        overflow: auto;
        margin-bottom: 10px;
    }

        .customerWrapper .btnSearch .searchWrapper {
            position: relative;
            width: 420px;
            float: left;
        }

            .customerWrapper .btnSearch .searchWrapper #input-listFilterSrch {
                background: #fff;
                height: 40px;
                padding: 5px 45px 5px 10px;
                color: #b9babc;
                caret-color: #ffb446;
                margin: 0;
                border: 1px solid #e5e5e5;
                width: 100%;
                border-radius: 4px;
                font: normal normal 400 14px/19px "Open Sans";
                float: none;
                outline: none;
            }

            .customerWrapper .btnSearch .searchWrapper img {
                position: absolute;
                right: 15px;
                width: 19px;
                height: 19px;
                top: 10px;
            }

            .customerWrapper .btnSearch .searchWrapper ::placeholder {
                color: #b9babc;
                opacity: 1;
                font: normal normal 400 14px/19px "Open Sans";
            }

            .customerWrapper .btnSearch .searchWrapper :-ms-input-placeholder {
                color: #b9babc;
                font: normal normal 400 14px/19px "Open Sans";
            }

            .customerWrapper .btnSearch .searchWrapper ::-ms-input-placeholder {
                color: #b9babc;
                font: normal normal 400 14px/19px "Open Sans";
            }

        .customerWrapper .btnSearch .iconsWrapper {
            float: right;
            margin-top: 5px;
        }

            .customerWrapper .btnSearch .iconsWrapper > div {
                display: inline-block;
                padding: 1px 3px;
                background-color: #eae8e8;
            }

                .customerWrapper .btnSearch .iconsWrapper > div:hover {
                    cursor: pointer;
                }

    .controlOptions {
        margin-top: 10px;
        display: block;
    }

        .controlOptions .links {
            display: inline-block;
            background-color: #fff;
            border-radius: 4px;
        }

            .controlOptions .links ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }

                .controlOptions .links ul li {
                    display: inline-block;
                }

                    .controlOptions .links ul li a {
                        display: block;
                        font: normal normal 400 14px/20px "Open Sans";
                        color: #15191f !important;
                        padding: 8px;
                        margin-right: 0;
                    }

                    .controlOptions .links ul li.active a {
                        font-weight: bold;
                        color: #21549a !important;
                        margin-right: 0;
                        text-decoration: none;
                    }

                    .controlOptions .links ul li a:hover {
                        text-decoration: none;
                    }

        .controlOptions .linksIcon {
            display: inline-block;
            border-radius: 4px;
            float: right;
        }

    /*    #btndownloadpackage,
    #btndownloadcustomer,
    #btndownloadNotification,
    #btndownloadshipment {
        border: none;
        background: #fff;
        color: #21549a !important;
        font: normal normal 600 14px/20px "Open Sans";
    }
*/
    .customerDetailsPopup .modal-body {
        padding-left: 50px;
        padding-right: 50px;
    }

        .customerDetailsPopup .modal-body img {
            width: 70%;
        }

        .customerDetailsPopup .modal-body .customerBtns {
            font: normal normal 600 12px/20px "Open Sans";
            color: #15191f;
        }

            .customerDetailsPopup .modal-body .customerBtns .action {
                background-color: #e8e8e8;
                text-align: center;
                padding: 5px;
                border-radius: 4px;
            }

                .customerDetailsPopup .modal-body .customerBtns .action + .action {
                    margin-top: 8px;
                }

                .customerDetailsPopup .modal-body .customerBtns .action input {
                    background-repeat: no-repeat;
                    border: none;
                    cursor: pointer;
                    padding-left: 20px;
                    text-transform: uppercase;
                    background-color: transparent;
                    font: normal normal 600 12px/20px "Open Sans";
                    color: #15191f;
                    letter-spacing: 1px;
                    background-position-y: 2px;
                }

                    .customerDetailsPopup .modal-body .customerBtns .action input.approve {
                        background-image: url(../../imgs/approve.png);
                    }

                    .customerDetailsPopup .modal-body .customerBtns .action input.reject {
                        background-image: url(../../imgs/reject.png);
                    }

        .customerDetailsPopup .modal-body .customerInformation {
            padding: 15px 0;
            font: normal normal 300 12px/24px "Open Sans";
            color: #15191f;
        }

            .customerDetailsPopup .modal-body .customerInformation > .row + .row {
                margin-top: 8px;
            }

            .customerDetailsPopup
            .modal-body
            .customerInformation > .row > div:last-child {
                font-weight: normal;
            }
    /* Customers Screen end */

    /* Customer Details screen */
    .customerWrapper .backBtn a {
        font: normal normal 600 13px/16px "Open Sans";
        color: #265aa1;
    }

        .customerWrapper .backBtn a:hover {
            text-decoration: none;
        }

        .customerWrapper .backBtn a i {
            margin-right: 5px;
        }

    .customerWrapper .customerDetailsSection {
        color: #15191f;
        font: normal normal normal 15px/17px "Open Sans";
    }

        .customerWrapper .customerDetailsSection .leftSection .summarySection {
            background-color: #f4f6f8;
            padding: 15px;
            margin-top: 10px;
            border-radius: 4px;
        }

            .customerWrapper
            .customerDetailsSection
            .leftSection
            .summarySection
            .summaryDetails {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
            }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .summarySection
                .summaryDetails
                .summaryDetailsLeft {
                    font: normal normal 600 10px/20px "Open Sans";
                }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .summarySection
                    .summaryDetails
                    .summaryDetailsLeft > * {
                        display: inline-block;
                    }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .summarySection
                    .summaryDetails
                    .summaryDetailsLeft
                    img {
                        margin-right: 15px;
                    }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .summarySection
                    .summaryDetails
                    .summaryDetailsLeft
                    .userRegistered {
                        background-color: #ffb446;
                        padding: 2px 8px;
                        border-radius: 4px;
                        text-transform: uppercase;
                    }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .summarySection
                    .summaryDetails
                    .summaryDetailsLeft
                    .viewId {
                        margin-left: 10px;
                        background-color: #ffb44666;
                        padding: 2px 8px;
                        border-radius: 4px;
                    }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsLeft
                        .viewId
                        span + span {
                            margin-left: 25px;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsLeft
                        .viewId
                        span
                        i {
                            margin-left: 6px;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsLeft
                        .viewId
                        span
                        a:hover {
                            text-decoration: none;
                        }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .summarySection
                .summaryDetails
                .summaryDetailsRight {
                    font: normal normal 600 10px/20px "Open Sans";
                    font-style: italic;
                }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .summarySection
                    .summaryDetails
                    .summaryDetailsRight
                    .switch
                    label {
                        cursor: pointer;
                    }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        input[type="checkbox"] {
                            opacity: 0;
                            width: 0;
                            height: 0;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        .lever {
                            display: inline-block;
                            position: relative;
                            width: 40px;
                            height: 19px;
                            background-color: #dedede;
                            border-radius: 15px;
                            vertical-align: middle;
                            margin-left: 5px;
                            border: 1px solid #adadad;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        input[type="checkbox"]:checked + .lever {
                            background-color: #ffb446;
                            border-color: #ffb446;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        .lever:before,
                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        .lever:after {
                            content: "";
                            position: absolute;
                            width: 17px;
                            height: 17px;
                            border-radius: 50%;
                            left: 1px;
                            top: 0;
                            transition: left 0.3s ease;
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        .lever:before {
                            background-color: rgba(38, 166, 154, 0.15);
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        .lever:after {
                            background-color: #fff;
                            box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                        }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        input[type="checkbox"]:checked + .lever:before,
                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .summarySection
                        .summaryDetails
                        .summaryDetailsRight
                        .switch
                        label
                        input[type="checkbox"]:checked + .lever:after {
                            left: 20px;
                        }

            .customerWrapper
            .customerDetailsSection
            .leftSection
            .summarySection
            .summaryInfo {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-top: 15px;
                font-size: 12px;
            }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .summarySection
                .summaryInfo
                span {
                    display: block;
                }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .summarySection
                .summaryInfo
                .head {
                    text-transform: uppercase;
                    letter-spacing: 1px;
                }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .summarySection
                .summaryInfo
                .value {
                    font-weight: 600;
                }

        .customerWrapper .customerDetailsSection .leftSection .tableSection {
            margin-top: 15px;
        }

            .customerWrapper
            .customerDetailsSection
            .leftSection
            .tableSection
            .nav-tabs {
                border-bottom: none;
                background-color: #f4f6f8;
                justify-content: space-between;
                border-radius: 4px;
            }

                .customerWrapper
                .customerDetailsSection
                .leftSection
                .tableSection
                .nav-tabs
                .nav-link {
                    border: none;
                    font-size: 14px;
                    padding-bottom: 12px;
                }

                    .customerWrapper
                    .customerDetailsSection
                    .leftSection
                    .tableSection
                    .nav-tabs
                    .nav-link.active {
                        background-color: transparent;
                        font-weight: 600;
                    }

                        .customerWrapper
                        .customerDetailsSection
                        .leftSection
                        .tableSection
                        .nav-tabs
                        .nav-link.active
                        span {
                            position: relative;
                        }

                            .customerWrapper
                            .customerDetailsSection
                            .leftSection
                            .tableSection
                            .nav-tabs
                            .nav-link.active
                            span::after {
                                content: "";
                                width: 70%;
                                height: 2px;
                                background: #2c5495;
                                position: absolute;
                                bottom: -4px;
                                left: 0;
                            }

            .customerWrapper
            .customerDetailsSection
            .leftSection
            .tableSection
            .tab-content {
                padding: 15px;
            }

        .customerWrapper .customerDetailsSection .tab-content table thead {
            background-color: #fff !important;
        }

            .customerWrapper .customerDetailsSection .tab-content table thead th {
                font-size: 11px;
            }

                .customerWrapper .customerDetailsSection .tab-content table thead th + th {
                    border-left: none;
                }

        .customerWrapper .customerDetailsSection .tab-content table tbody tr.odd,
        .customerWrapper .customerDetailsSection .tab-content table tbody tr.odd {
            background-color: #fff;
        }

        .customerWrapper
        .customerDetailsSection
        .tab-content
        table.hover
        tbody
        tr:hover,
        .customerWrapper
        .customerDetailsSection
        .tab-content
        table.display
        tbody
        tr:hover {
            background-color: #f6f6f6 !important;
        }

        .customerWrapper .customerDetailsSection .tab-content table tbody tr + tr td {
            border-top: 1px solid #e8e8e8;
        }

        .customerWrapper .customerDetailsSection .tab-content table .storeCountry img,
        .customerWrapper .customerDetailsSection .tab-content table .fromCountry img {
            margin-right: 5px;
        }

        .customerWrapper .customerDetailsSection .tab-content table .action a + a {
            margin-left: 8px;
        }

        .customerWrapper
        .customerDetailsSection
        .tab-content
        table
        .status.inProgress,
        .customerWrapper .customerDetailsSection .tab-content table .status.shipped,
        .customerWrapper .customerDetailsSection .tab-content table .status.success {
            color: #56b245;
        }

        .customerWrapper
        .customerDetailsSection
        .tab-content
        table
        .status.inTransit {
            color: #c99c1c;
        }

        .customerWrapper
        .customerDetailsSection
        .tab-content
        table
        .status.delivered {
            color: #2aaed5;
        }

        .customerWrapper .customerDetailsSection .tab-content table .status.cancelled,
        .customerWrapper .customerDetailsSection .tab-content table .status.failed {
            color: #fd6043;
        }

        .customerWrapper
        .customerDetailsSection
        .tab-content
        table
        .status.destroyed {
            color: #8d8d8d;
        }

        .customerWrapper .customerDetailsSection .rightSection {
            background-color: #f4f6f8;
            padding: 15px;
            text-align: center;
            border-radius: 4px;
        }

            .customerWrapper .customerDetailsSection .rightSection i,
            .customerWrapper .customerDetailsSection .rightSection img {
                margin-right: 5px;
            }

            .customerWrapper .customerDetailsSection .rightSection i {
                font-size: 16px;
            }

            .customerWrapper .customerDetailsSection .rightSection .regDate {
                font: normal normal 600 10px/14px "Open Sans";
                margin-bottom: 15px;
                text-transform: uppercase;
            }

            .customerWrapper .customerDetailsSection .rightSection .statsHeader {
                font: normal normal normal 14px/20px "Open Sans";
                margin-bottom: 25px;
            }

            .customerWrapper .customerDetailsSection .rightSection .statsDetails {
                font: normal normal 600 14px/19px "Open Sans";
            }

                .customerWrapper
                .customerDetailsSection
                .rightSection
                .statsDetails
                .statsDetail + .statsDetail {
                    margin-top: 30px;
                }

                .customerWrapper
                .customerDetailsSection
                .rightSection
                .statsDetails
                .statsDetail
                .desc {
                    color: #f7ba62;
                    font-size: 20px;
                    line-height: 27px;
                }

            .customerWrapper .customerDetailsSection .rightSection .comments {
                margin-top: 20px;
            }

                .customerWrapper .customerDetailsSection .rightSection .comments textarea {
                    font: normal normal 300 10px/20px "Open Sans";
                    font-style: italic;
                }

                .customerWrapper
                .customerDetailsSection
                .rightSection
                .comments
                ::placeholder {
                    font: normal normal 300 10px/20px "Open Sans";
                    font-style: italic;
                    color: #15191f;
                }

                .customerWrapper
                .customerDetailsSection
                .rightSection
                .comments
                :-ms-input-placeholder {
                    font: normal normal 300 10px/20px "Open Sans";
                    font-style: italic;
                    color: #15191f;
                }

                .customerWrapper
                .customerDetailsSection
                .rightSection
                .comments
                ::-ms-input-placeholder {
                    font: normal normal 300 10px/20px "Open Sans";
                    font-style: italic;
                    color: #15191f;
                }
    /* Customer Details screen */

    .packageWrapper {
        font: normal normal normal 12px/24px "Open Sans";
        color: #15191f;
    }

        .packageWrapper .headerSection {
            position: relative;
            overflow: auto;
            margin-bottom: 10px;
        }

            .packageWrapper .headerSection .leftSection {
                float: left;
            }

                .packageWrapper .headerSection .leftSection h6,
                .packageWrapper .headerSection .leftSection img {
                    display: inline-block;
                }

                .packageWrapper .headerSection .leftSection h6 {
                    margin: 0 5px 0;
                }

            .packageWrapper .headerSection .rightSection {
                float: right;
            }

                .packageWrapper .headerSection .rightSection a {
                    font: normal normal 600 14px/15px "Open Sans";
                    color: #21549a;
                    margin-right: 10px;
                }

                    .packageWrapper .headerSection .rightSection a:hover {
                        text-decoration: none;
                    }

                    .packageWrapper .headerSection .rightSection a img {
                        margin-right: 5px;
                    }

        .packageWrapper .card.pack-card {
            border: none !important;
            margin-bottom: 30px;
        }

            .packageWrapper .card.pack-card .card-header {
                background-image: linear-gradient(to right, #e94b35, #75261b);
                display: block;
            }

                .packageWrapper .card.pack-card .card-header .shipp-btn {
                    background: #9b3324;
                }

                .packageWrapper .card.pack-card .card-header img {
                    float: left;
                    margin-right: 8px;
                }

            .packageWrapper .card.pack-card .card-body {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                background-color: #f7f7f7;
            }

    button#btnModalFilter + button#btnClear {
        font-size: 10pt;
        padding: 3px 8px;
        height: 38px;
        border: 0;
        background: #264f8d;
        color: #fff;
        margin-left: 8px;
        border-radius: 4px;
    }

    input#PackageDocumentInputModel_weight,
    input#PackageDocumentInputModel_shippingcost,
    input#PackageDocumentInputModel_awbnumber,
    #PackageDocumentInputModel_amount,
    #textarea#PackageDocumentInputModel_invoicenumber {
        background-color: #f4f6f8 !important;
    }

    textarea#PackageDocumentInputModel_invoicenumber {
        background: #e8e8e8;
    }

    textarea#PackageDocumentInputModel_comment {
        background: #e8e8e8;
    }

    .packageWrapper .card.pack-card .packageInformation {
        font: normal normal 300 14px/24px "Open Sans" !important;
        color: #15191f !important;
        background-color: #fff;
        padding-top: 15px;
        padding-bottom: 15px;
        display: flex;
        justify-content: space-between;
    }

        .packageWrapper .card.pack-card .packageInformation p {
            font: normal normal 600 14px/24px "Open Sans" !important;
            color: #15191f !important;
            margin: 0;
        }

        .packageWrapper .card.pack-card .packageInformation span {
            color: #15191f !important;
        }

    .packageWrapper .card.pack-card .additionalInformation {
        background-color: #f7f7f7;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .packageWrapper
    .pack-item-card-wrapper > .row > div:nth-child(odd)
    .card.pack-item-card
    .item-detail-header {
        background-image: linear-gradient(to right, #11405e, #227fbb);
    }

    .packageWrapper
    .pack-item-card-wrapper > .row > div:nth-child(even)
    .card.pack-item-card
    .item-detail-header {
        background-image: linear-gradient(to right, #77271b, #e74a34);
    }

    .packageWrapper .pack-item-card-wrapper .card.pack-item-card {
        border: none !important;
    }

        .packageWrapper
        .pack-item-card-wrapper
        .card.pack-item-card
        .item-detail-header {
            background: none;
        }

        .packageWrapper .pack-item-card-wrapper .card.pack-item-card .card-body {
            background-color: #fff;
            border-radius: 4px;
            padding-bottom: 15px !important;
        }

            .packageWrapper
            .pack-item-card-wrapper
            .card.pack-item-card
            .card-body > div {
                width: 100%;
            }

                .packageWrapper
                .pack-item-card-wrapper
                .card.pack-item-card
                .card-body > div + div {
                    margin-top: 7px;
                }

                .packageWrapper
                .pack-item-card-wrapper
                .card.pack-item-card
                .card-body > div > * {
                    display: inline-block;
                    width: 49%;
                    font: normal normal 300 12px/24px "Open Sans" !important;
                    color: #15191f;
                }

                .packageWrapper
                .pack-item-card-wrapper
                .card.pack-item-card
                .card-body > div
                p {
                    font-weight: normal !important;
                }

    .packageHistorySection {
        margin-top: 30px;
    }

        .packageHistorySection ul {
            background-color: #fff;
            padding: 20px;
            margin: 0;
            border-radius: 4px;
        }

            .packageHistorySection ul li.time-line {
                margin-left: 15px;
            }

                .packageHistorySection ul li.time-line .time-line-icon {
                    left: -15px;
                }

                .packageHistorySection ul li.time-line span {
                    color: #15191f;
                }

                    .packageHistorySection ul li.time-line span.package-received-status {
                        color: #f05133;
                        font-size: 10px;
                        font-weight: 600;
                    }

    #itemInfoOverlay:hover {
        cursor: pointer;
    }

    .shipmentAccordion {
        margin-left: 0;
        margin-right: 0;
    }

        .shipmentAccordion .div-box {
            background-color: #fff;
        }

            .shipmentAccordion .div-box + .div-box {
                margin-left: 15px;
            }

        .shipmentAccordion .total-item-title,
        .shipmentAccordion .order-total-title,
        .shipmentAccordion .total-item-val,
        .shipmentAccordion .order-total-val {
            color: #15191f;
        }

        .shipmentAccordion .panel {
            background-color: #fff;
        }

        .shipmentAccordion .card-body {
            background-color: #fff;
            border: 1px solid #e8e8e8;
        }

            .shipmentAccordion .card-body > div + div {
                margin-top: 5px;
            }

        .shipmentAccordion .header-line .item-id,
        .shipmentAccordion .header-line .item-name {
            color: #fff;
        }

    /* Login / Reset Password start  */

    .resetContainer .input-feild {
        padding-right: 50px;
    }

    .signInContainer input + .form-control-placeholder,
    .signInContainer .form-group input:focus + label,
    .resetContainer input + .form-control-placeholder,
    .resetContainer .form-group input:focus + label {
        color: #15191f;
    }

    .signInContainer .float,
    .resetContainer .float {
        /*background-color: #21549a;*/
    }

    .signInContainer .forgot-password-label {
        color: #15191f;
    }

    .signInContainer a:hover {
        text-decoration: none;
    }

    .signInContainer .sign-in-btn:focus,
    .resetContainer .send-otp .btn:focus {
        outline: none;
        box-shadow: none;
    }

    .resetContainer .message {
        color: #15191f;
    }

    #basicphoto-preview {
        width: 100%;
        height: 175px;
        border-radius: 0.5rem;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px dotted #f7ba62;
        cursor: pointer;
    }

    #advancephoto-preview {
        width: 100%;
        height: 175px;
        border-radius: 0.5rem;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px dotted #f7ba62;
        cursor: pointer;
    }
    /* Login / Reset Password end  */
}

.customer-heading {
    padding: 10px 20px;
    background: #195074;
    border-radius: 10px;
    color: #fff;
    height: 56px;
}

.has-search {
    width: 100%;
    height: unset;
}

    .has-search .form-control {
        padding: 5px 15px;
        height: 36px;
        width: unset;
        height: unset;
        background: #123D5A;
        color: #C7C5C5;
        width: 100%;
        font-size: 12px;
        padding-right: 20px;
    }

        .has-search .form-control::placeholder {
            color: #4B6476;
            font: normal normal normal 14px/104px Open Sans;
        }

    .has-search .form-control-feedback {
        position: absolute;
        z-index: 222;
        cursor: pointer;
        display: block;
        line-height: 1;
        text-align: center;
        right: 10px;
        color: #C7C5C5;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        font-weight: 300;
    }

.location-button {
    background: #FFB446;
    padding: 7px 10px;
    color: #000;
    border-radius: 4px;
    display: inline-block;
    font-size: 12px;
    color: #11151A;
}

    .location-button:hover {
        color: #11151A;
        text-decoration: none;
    }

.create.location-button {
    background: #FFB446;
}

.upload.location-button {
    background: #fff;
}

.location-data tr {
    border-radius: 6px;
}

    .location-data tr th {
        text-align: left;
        padding: 9px 0.75rem;
        vertical-align: middle;
        background: #ECF2F6;
        font: normal normal 600 12px Open Sans;
        letter-spacing: 0px;
        border: none;
        color: #4B6476;
        text-transform: capitalize;
        opacity: 1;
    }

    .location-data tr td {
        vertical-align: middle;
        font: normal normal 600 14px Open Sans;
        letter-spacing: 0px;
        color: #11151A;
        opacity: 1;
        border: none;
        padding: 20px 0.75rem;
    }

        .location-data tr td b {
            font-weight: 700;
            color: #000 !important;
        }

.location-radio [type="radio"]:checked,
.location-radio [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    .location-radio [type="radio"]:checked + label,
    .location-radio [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        font: normal normal normal 14px/20px Open Sans;
        color: #11151A;
    }

        .location-radio [type="radio"]:checked + label:before,
        .location-radio [type="radio"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #21222B;
            border-radius: 100%;
            background: #fff;
        }

        .location-radio [type="radio"]:checked + label:after,
        .location-radio [type="radio"]:not(:checked) + label:after {
            content: '';
            width: 12px;
            height: 12px;
            background: #55b245;
            position: absolute;
            top: 3px;
            left: 3px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        .location-radio [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        .location-radio [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fff;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #F8FAFC;
}

.location-data.customerWrapper {
    height: unset;
    box-shadow: none;
}

.create-location-details {
    padding: 10px 0;
}

    .create-location-details h6 {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0px;
        color: #195074;
    }

    .create-location-details h5 {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0px;
        color: #11151A;
    }

    .create-location-details .form-group {
        width: 100%;
    }

        .create-location-details .form-group .form-control {
            background: #F7F8FD;
            width: 100%;
            padding: 0 15px;
            padding-bottom: 0px;
            padding-top: 15px;
            color: #11151A;
            font-size: 14px;
            height: 54px;
            border: none;
            font: normal normal 600 14px/19px Open Sans;
        }

            .create-location-details .form-group .form-control::placeholder {
                font-size: 14px;
                letter-spacing: 0px;
                color: #605757;
            }

    .create-location-details select {
        appearance: none;
    }

    .create-location-details .form-check .form-check-label {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0px;
        color: #11151A;
    }

    .create-location-details .form-group label {
        font-size: 11px;
        letter-spacing: 0px;
        color: #605757;
        top: 27%;
        transform: translateY(-50%);
        left: 15px;
        opacity: 1;
        margin: 0;
        z-index: 99;
        line-height: 1;
    }

        .create-location-details .form-group label.floating-label {
            font-size: 14px;
            letter-spacing: 0px;
            color: #605757;
            top: 27%;
            transform: translateY(-50%);
            left: 15px;
            opacity: 1;
            margin: 0;
            z-index: 99;
        }

        .create-location-details .form-group label.floating-label {
            top: 50%;
        }

.form-control:focus {
    box-shadow: none;
}

.create-location-details .dropdown-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    z-index: 99;
}

.create-location-details hr {
    border-top: 2px solid #ECF2F6;
    width: 98%;
    margin: 25px auto;
}

.buttons.location-footer-btn a {
    background: #0266FF;
    border-radius: 6px;
    padding: 11px 30px;
    color: #fff;
    width: 182px;
    display: inline-block;
    font: normal normal 700 14px Open Sans;
    letter-spacing: 1.4px;
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
    opacity: 1;
    margin-top: 14px;
}

#Deactivate {
    background: #ECF2F6;
    border-radius: 4px;
    opacity: 1;
    color: #4B6476;
}

.buttons.location-footer-btn a.de-activate {
    background: #ECF2F6;
    border-radius: 4px;
    opacity: 1;
    color: #4B6476;
}
/*
.buttons.location-footer-btn a.de-activate {
    background: #195074;
    color: #fff;
}*/

.customerWrapper .context-menu .dropdown-right,
.rack .customerWrapper .context-menu .dropdown-right,
.warehouse .customerWrapper .context-menu .dropdown-right {
    top: 136%;
}

.customerWrapper .context-menu .dropdown-right {
    right: -10%;
}
/*========================*/
.main-bg {
    background: #0266FF;
    padding: 15px;
    height: 98vh;
    margin-top: 8px;
    border-radius: 10px;
    overflow: hidden;
}

.mainheader {
    /* max-width: 13%; */
    height: 100%;
    float: left;
    /* max-width: 160px !important; */
    float: left;
    /* background: green; */
    height: 96vh;
    padding: 5px 0px;
}

.package-receipt {
    background: #fff;
    /*min-height: 86.3vh;*/
}

.main-heading {
    font: normal normal bold 18px/24px Open Sans !important;
    color: #2B3134;
    display: flex;
    align-items: center;
}

.package-receipt h6 {
    font: normal normal 600 14px Open Sans;
    color: #11151A;
}

.package-receipt .has-search .form-control {
    background: #fff;
    border: 1px solid #d9d9d9;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0px;
    color: #605757;
}

.package-receipt .create-receipt-btn {
    background: #FFB446;
    padding: 9px 20px;
    color: #000;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border: none;
    font-weight: 500;
    color: #11151A;
    font: normal normal 600 14px Open Sans;
}

    .package-receipt .create-receipt-btn.put-away {
        padding: 5px 10px;
        font: normal normal 600 12px Open Sans;
        margin: auto;
    }

a:hover {
    text-decoration: none !important;
}

.tree-dot p {
    margin: 0;
}

.package-receipt-data table td,
.package-receipt-data table th,
.package-receipt-data table {
    border: none;
}

    .package-receipt-data table,
    .package-receipt-data table thead {
        border-radius: 5px
    }

        .package-receipt-data table thead tr th {
            padding: 8px 0.74rem;
            color: #4B6476;
            font: normal normal 600 12px Open Sans;
            white-space: nowrap;
        }

            .package-receipt-data table thead tr th img{
                cursor:pointer;
            }

.package-receipt-data table tbody tr td {
    padding: 14px 0.74rem;
    font-weight: 500;
    vertical-align: middle;
    color: #11151A;
    font: 500 13.5px Open Sans;
}

            /*.package-receipt-data table tbody tr td span {
                max-width: 100px;
                white-space: nowrap;
                overflow: hidden !important;
                text-overflow: ellipsis;
                display:inline-block;
            }
*/
            .package-receipt-data table tbody tr td b {
                font-weight: 600;
                font-size: 14px;
            }

            .package-receipt-data table tbody tr td span.status.active {
                background: #3E8930;
            }

            .package-receipt-data table tbody tr td span.status.inactive {
                background: #ab2828;
                color: #fff;
                /*padding: 6px 10px;*/
            }

            .package-receipt-data table tbody tr td span.status {
                padding: 3px 2px;
                font-size: 10px;
                color: #fff;
                max-width: 100px;
                min-width: 100px;
                display: inline-block;
                text-align: center;
                cursor: default;
                white-space:pre-wrap;
                font-weight: 500;
                min-height: 26px;
                /*max-height: 26px;*/
                border-radius: 5px;
                font: normal normal 600 11px/17px Open Sans;
                line-height: normal;
            }

        .package-receipt-data table tbody tr small {
            font-weight: 500;
            font-size: 12px;
            color: #8298a9;
            letter-spacing: 1px;
        }

        .package-receipt-data table thead tr {
            background: #ECF2F6;
        }

        .package-receipt-data table th:first-child {
            border-radius: 6px 0 0 6px;
            -moz-border-radius: 6px 0 0 6px;
            -webkit-border-radius: 6px 0 0 6px;
        }

.package-receipt-data .customerWrapper {
    height: auto;
    box-shadow: none;
}

.package-receipt-data .table-striped tbody tr:nth-of-type(odd) {
    background: #fff;
}

.package-receipt-data .table-striped tbody tr:nth-of-type(even) {
    background: #eef2f68c;
}

.package-receipt-data table th:last-child {
    border-radius: 0 6px 6px 0;
    -moz-border-radius: 0 6px 6px 0;
    -webkit-border-radius: 0 6px 6px 0;
}

.nav-link {
    display: block;
    padding: 15px 1rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.main-content {
    background: #fff;
    border-radius: 10px;
    height: 94.5vh;
    overflow: auto;
    padding: 15px 20px;
    padding-top: 10px;
    position: relative;
    overflow: hidden;
}

.package-receipt-card {
    padding: 12px 20px;
    display: flex;
    border-radius: 10px;
    align-items: center;
    background: #F1F6FA;
    color: #93abc5;
    max-width: 265px;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
}

    .package-receipt-card.in-progress {
        background: linear-gradient(257deg, rgba(220,103,78,1) 00%, rgba(173,75,54,1) 100%);
        color: #fff;
    }

    .package-receipt-card h2 {
        font-weight: 700;
        font-size: 50px;
        margin: 0;
        opacity: 0.6;
    }

    .package-receipt-card span {
        font-weight: 600;
        font-size: 18px;
        margin: 0;
        line-height: 22px;
        margin-left: 5px;
        width: 50%;
    }

    .package-receipt-card img {
        margin-left: -20px;
    }

.upload-img h5 {
    font: normal normal 700 14px/19px Open Sans;
    color: #11151A;
}

.picture-container {
    position: relative;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border: 1.5px dashed #a1a1a1;
    border-radius: 10px;
}

.choose-img-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
}

#wizardPicturePreview {
    width: 100%;
    height: 175px;
    display: none;
}

#firstImage {
    width: 100px;
    height: 100px;
}

.choose-img-content span {
    font: normal normal normal 12px/17px Open Sans;
    letter-spacing: 0px;
    color: #84ADC7;
    display: block;
    margin-top: 12px;
}

.picture {
    width: 100%;
    height: 120px;
    color: #FFFFFF;
    overflow: hidden;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}


    .picture input[type="file"] {
        cursor: pointer;
        display: block;
        /* height: 100%; */
        left: 0;
        opacity: 0 !important;
        position: absolute;
        top: -21px;
        width: 100%;
        z-index: 999;
    }

.upload-img-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8%;
    left: 19px;
}

.divider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 60px;
    height: 50%;
    width: 1px;
    background: #c9c9c9;
}


.receipt-footer a {
    padding: 10px 40px;
    background: #0266FF;
    color: #fff;
    border-radius: 5px;
    display: inline-block;
    font: normal normal 700 14px Open Sans;
    letter-spacing: 1.4px;
}

    .receipt-footer a.cancel-btn {
        background: #eef2f6;
        color: #0266FF;
        margin-left: 10px;
    }

.login-bg {
    background: #C3F401;
    padding: 75px;
    padding-left: 0;
    width: 100%;
    border-radius: 10px;
}

.signin-main-text {
    font-size: 22px;
    font-weight: 400;
    /* color: #fff; */
    width: 60%;
    margin: auto;
    margin-top: 18px;
}
.signin-main-text1 {
    font-family: 'Open Sans';
    font-style: normal;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    width: 100%;
    margin: auto;
    margin-top: 18px;
}
    .signin-main-text b {
        font-weight: 600;
    }

.styled-checkbox {
    position: absolute;
    opacity: 0;
}

    .styled-checkbox + label {
        position: relative;
        cursor: pointer;
        padding: 0;
        font-weight: 600;
        font-size: 15px;
    }

        .styled-checkbox + label:before {
            content: '';
            margin-right: 5px;
            display: inline-block;
            vertical-align: text-bottom;
            width: 17px;
            height: 17px;
            background: #fff;
            border: 1px solid #649745;
            border-radius: 50%;
        }

    .styled-checkbox:checked + label:before {
        background: #649745;
    }


    .styled-checkbox:disabled + label:before {
        box-shadow: none;
        background: #ddd;
    }

    .styled-checkbox:checked + label:after {
        content: '';
        position: absolute;
        left: 3px;
        top: 11px;
        background: white;
        width: 2px;
        height: 2px;
        box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
        transform: rotate(45deg);
    }

.mark-as-done {
    background: #78b54f;
    color: #fff;
}

.inspect-receipt-details {
    padding: 15px;
    border: 1px solid #dddddd;
    border-radius: 10px;
}

    .inspect-receipt-details h6 {
        font: normal normal 600 14px/19px Open Sans;
        color: #11151A;
    }

.package-label {
    font: normal normal normal 10.5px/14px Open Sans;
    color: #605757;
}

.upload-img span.sub-label {
    font: italic normal normal 12px/17px Open Sans;
    color: #4B6476;
}

.item-heading {
    padding: 12px 15px;
    background: #0266FF;
    border-radius: 8px 8px 0 0;
}

    .item-heading h6 {
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        margin: 0;
        letter-spacing: 1px;
    }

.item-body {
    padding: 20px;
    border: 1px solid #ecedef;
    border-radius: 0 0 10px 10px;
    border-top: 0;
    height: auto;
    /*overflow: auto;*/
}

.item-details {
    border-radius: 8px;
    /*overflow: hidden;*/
}

    .print-receipt .print-btn,
    .item-details .save-btn {
        background: #e9ba58;
        color: #fff;
        display: inline-block;
        padding: 8px 35px;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 500;
    }

.print-receipt .print-btn {
    background: #FFB446;
    padding: 9px 20px;
    color: #000;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border: none;
    font-weight: 500;
    color: #11151A;
    font: normal normal 600 14px Open Sans;
}

.print-receipt .print-btn {
    color: #000;
}

.add-another-item {
    padding: 7px 5px;
    width: 100%;
    margin-top: 15px;
    border: 1px dashed #c5cbd1;
    text-align: center;
    border-radius: 5px;
}

    .add-another-item span {
        font-size: 13px;
        font-weight: 600;
        color: #1B2C44;
        margin-left: 5px;
    }

.item-done {
    padding: 8px 15px;
    border-radius: 8px;
    border: 2px solid #e6ebef;
}

    .item-done h6 {
        font-size: 14px;
        font-weight: 700;
        margin: 0;
        color: #1B2C44;
    }

.selected-img {
    padding: 10px;
    border: 1px solid #0266FF;
    background: #fafafa;
    text-align: center;
    border-radius: 10px;
    min-height: 120px;
    min-width: 137px;
    max-width: 137px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.three-dot {
    position: absolute;
    top: 0px;
    right: 5px;
}

.receipt-img {
    padding: 30px;
    text-align: center;
    height: auto;
}




.excel-btn {
    padding: 10.5px 0;
    text-align: center;
    background: #ECF2F6;
    width: 150px;
    font: normal normal bold 14px Open Sans;
    color: #4B6476;
    letter-spacing: 1.4px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 10px;
}

.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 16px;
    color: #fff;
    width: 100%;
}

.select-styled {
    background: #F7F8FD;
    border-radius: 10px;
    padding: 0 15px;
    padding-bottom: 0px;
    height: 54px;
    padding-top: 25px;
    border-radius: 10px;
    width: 100%;
    font: normal normal 600 14px Open Sans;
    letter-spacing: 0px;
    color: #11151A;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    /*overflow: hidden;*/
    line-height: 23px !important;
}

    .select-styled:after {
        content: "";
        width: 0;
        height: 0;
        border: 7px solid transparent;
        border-color: #0266FF transparent transparent transparent;
        position: absolute;
        top: 52%;
        transform: translateY(-50%) rotate(0deg);
        right: 20px;
        transition: all 0.2s;
    }


.select-options {
    display: none;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 260px;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 9999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    border-radius: 10px;
}

    .select-options li {
        margin: 0;
        padding: 15px 15px;
        color: #5a5a5a;
        font-size: 14px;
    }

        .select-options li:hover, .select-options li.is-selected {
            background: #F8FAFC;
        }

.select-styled:active:after, .select-styled.active:after {
    top: 44%;
    transform: translateY(-50%) rotate(180deg);
}

.select-options li[rel="hide"] {
    display: none;
}

.btmDrop {
    bottom: 100%;
    top:unset;
}

input:disabled {
    color: #C7C5C5 !important;
}

    input:disabled ~ .floating-label {
        font-size: 10.5px !important;
        top: 16px !important;
        transform: translateY(-50%) !important;
        color: #C7C5C5 !important;
    }

.create-location-details .form-group input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
    font-size: 10.5px !important;
    top: 12px !important;
    transform: translateY(-50%) !important;
}

.s2d-navbar.nav_new .navbar-nav .s2d-nav-link img {
    margin-right: 10px;
}

.s2d-navbar.nav_new .navbar-nav .s2d-nav-link.active-label {
    font-weight: 500;
}

.navbar-light .navbar-toggler-icon {
    background-image: url(../imgs/menu-toggle.png);
}

button:focus {
    outline: none;
}

.navbar-toggler-icon {
    background-size: unset;
}

.item-list, #merchant-list {
    padding: 5px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    border-radius: 5px;
    position: absolute;
    width: 100%;
    z-index: 999;
    max-height: 250px;
    overflow: auto;
}

    .item-list li, #merchant-list li {
        font: normal normal 600 14px/19px Open Sans;
        color: #0266FF;
        padding: 10px;
    }


    .item-list::-webkit-scrollbar, #merchant::-webkit-scrollbar {
        width: 0.3rem;
    }

    .item-list::-webkit-scrollbar-track, #merchant::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px #e2e6eb;
    }

    .item-list::-webkit-scrollbar-thumb, #merchant::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: #6F91A8;
    }

.add-item-btn {
    font: normal normal bold 14px/19px Open Sans;
    border: none;
    background: transparent;
    color: #0266FF;
}

#AddNewItem .modal-content, .modal-content {
    position: relative;
}

#PutAway .upload-img-icon {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    width: 6%;
    left: 17px;
}

.modal-content .close,
#PutAway .modal-content .close,
#PrintLabelModel .modal-content .close,
#AddNewItem .modal-content .close {
    color: #000 !important;
    margin: 0;
    padding: 0;
    left: unset;
    right: 4%;
    position: absolute;
    top: 15px;
}

.modal-title,
#PutAway .modal-title,
#PrintLabelModel .modal-title,
#AddNewItem .modal-title {
    font: normal normal bold 24px/36px Open Sans !important;
    letter-spacing: 0px !important;
    color: #1B1E24 !important;
}

.modal-content p,
#AddNewItem .modal-content p {
    text-align: center;
    font: normal normal normal 13px/20px Open Sans;
    letter-spacing: 0px;
    color: #1B1E24;
    width: 60%;
    margin: auto;
}

.modal-body label,
#AddNewItem .modal-body label {
    font: normal normal normal 12px Open Sans;
    letter-spacing: 0px;
    color: #7B8290;
    display: block;
    /* position: relative; */
}

    #AddNewItem .modal-body label:before {
        position: absolute;
        content: "";
        border: 1px solid #F0F3F7;
        width: 75%;
        top: 50%;
        right: 0;
    }

.modal-body select,
.modal-body input,
#AddNewItem .modal-body input {
    height: 47px;
    border-radius: 6px;
    margin-top: 15px;
}

    #Filter .modal-body label,
    .modal-body input::placeholder,
    #AddNewItem .modal-body input::placeholder {
        font: normal normal normal 14px Open Sans;
        color: #7287AA;
    }

    .modal-body input:focus,
    #AddNewItem .modal-body input:focus {
        background-color: #F7F8FD;
    }

.modal-footer,
#AddNewItem .modal-footer {
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 35px;
    padding-bottom: 35px;
}

    .verify-btn,
    .modal-footer .btn,
    #AddNewItem .modal-footer .btn {
        border: none;
        background: #0266FF;
        width: 100%;
        border-radius: 6px;
        margin-top: 10px;
        font: normal normal 600 16px Open Sans;
        letter-spacing: 1.6px;
        color: #F8FBFD;
        text-transform: uppercase;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 15px !important;
    }

.invoiceDocument-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .invoiceDocument-preview img:last-child {
        margin: 0 !important;
    }

    .invoiceDocument-preview img:not(.image-close) {
        height: 100px;
        margin-right: 15px;
        padding: 10px;
        border: 1px solid #0266FF;
        background: #fafafa;
        text-align: center;
        border-radius: 10px;
        min-height: 120px;
    }

#processRequest .invoiceDocument-preview img {
    padding: 5px;
    margin-top: 15px !important;
    max-width: 136px;
    min-width: 136px;
}

    #processRequest .invoiceDocument-preview img:nth-child(3n) {
        margin-right: 0 !important;
    }

.listviewcntr.main-data {
    min-height: 80vh;
    max-height: unset;
    overflow: auto;
    overflow-x: hidden;
}

.status {
    font: normal normal 700 14px Open Sans;
    color: #11151A;
}

.table-data {
    min-height: 82vh;
    max-height: 82vh;
    overflow: auto;
    overflow-x: hidden;
}

@media(max-width:575px) {
    .status {
        margin-top: 5px;
    }

    .main-bg {
        background: transparent;
        padding: 0;
        height: auto;
        margin-top: 0;
        border-radius: 0;
    }

    .mainheader {
        height: auto;
        padding: 0px;
    }

    .s2d-navbar.nav_new {
        padding: 10px;
        background: #0266FF;
        margin: 0;
    }

    .s2d-navbar {
        border-radius: 0px;
    }

    .navbar-toggler {
        padding: 0;
        font-size: 1.25rem;
        line-height: 1;
        background-color: transparent;
        border: none;
        border-radius: 0.25rem;
    }

    .navbar-brand img {
        margin: 0 !important;
    }

    .navbar-light .navbar-toggler-icon {
        background-image: url(../imgs/menu-toggle-light.png);
    }

    .package-receipt .create-receipt-btn {
        justify-content: center;
    }

    .main-content {
        height: unset;
        overflow: auto;
        padding: 0px;
        padding-top: 0px;
    }

    .main-heading,
    .package-receipt h6.main-heading {
        padding: 15px 5px;
        justify-content: center;
        background: #ecf8ff;
        flex-direction: column;
    }

    .has-search {
        width: 100%;
        padding: 10px;
    }

    .package-receipt .has-search .form-control {
        width: 100% !important;
    }

    .has-search .form-control-feedback {
        right: 21px;
    }

    .navbar-nav .nav-item:nth-last-child(1),
    .navbar-nav .nav-item:nth-last-child(2) {
        position: unset !important;
    }

    .package-receipt {
        overflow: hidden;
    }

    body {
        background: #fff !important;
    }

    .package-receipt-data.receipt-mobile-view {
        background: #F8FAFC;
        padding: 13px 10px;
        border-radius: 5px;
    }

        .package-receipt-data.receipt-mobile-view label {
            font-size: 12px;
            color: #4B6476;
            font-weight: 500;
        }

            .package-receipt-data.receipt-mobile-view label span {
                color: #062e46;
            }

        .package-receipt-data.receipt-mobile-view .status {
            padding: 4px 17px;
            font-size: 11px;
            color: #fff;
            font-weight: 400;
            border-radius: 5px;
        }

            .package-receipt-data.receipt-mobile-view .status.active {
                background: #3E8930;
            }

    .menu-three-dots {
        transform: rotate(90deg);
    }

    .heading-style {
        font-size: 13px;
        color: #A1A3B3;
        font-weight: 500;
    }

    .heading-style {
        font-size: 12px;
        color: #A1A3B3;
        font-weight: 500;
        display: block;
    }

        .heading-style b {
            font-size: 11px;
            color: #1e1e1e;
            font-weight: 500;
        }

    .package-receipt-card {
        max-width: 100%;
        width: 100%;
        padding: 8px 15px;
        justify-content: space-between;
    }

        .package-receipt-card span {
            font-size: 14px;
            line-height: 19px;
            width: 100%;
        }

        .package-receipt-card h2 {
            font-size: 40px;
        }

    .receipt-footer a {
        width: 100%;
        text-align: center;
    }

        .receipt-footer a.cancel-btn {
            margin-left: 0;
        }

    .inspect-receipt-details h6 {
        font-size: 14px;
        font-weight: 600;
        color: #383838;
        padding: unset;
        text-align: unset;
        background: unset;
    }

    .item-body {
        padding: 10px;
        padding-top: 0px;
        border: 1px solid #ecedef;
        border-radius: 0 0 10px 10px;
        border-top: 0;
    }

    .receipt-img {
        height: auto;
        padding: 15px;
    }

    .main-heading {
        width: 100%;
    }

    .login-bg {
        padding: 25px !important;
    }

    .signInContainer {
        padding: 20px;
    }

    p.signin-text {
        width: 100%;
    }


    #AddNewItem .modal-content p {
        width: 80%;
    }

    #AddNewItem .modal-body {
        padding: 15px;
    }

        #AddNewItem .modal-body label:before {
            width: 65%;
        }

    #AddNewItem .modal-footer {
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .excel-btn {
        margin-bottom: 20px;
    }

    .buttons.location-footer-btn a {
        width: 100%;
    }


    .filter-label {
        margin-right: 8px;
    }
    .package-receipt .create-receipt-btn#btnApplyFilter {
        width: 50%;
        text-align: center;
    }

    #filterModalContent.create-location-details #btnClear {
        width: 23%;
        text-align: center;
    }
}
.main-data {
    min-height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
    overflow: hidden auto;
}
@media(min-width:1200px) and (max-width:1399px) {
    .nav-link.s2d-nav-link,
    .s2d-navbar.nav_new .navbar-nav .s2d-nav-link {
        font: normal normal 14px Open Sans;
    }
    /*.package-receipt {
        min-height: 84.9vh;
    }*/
    .table-data {
        min-height: 78.9vh;
        max-height: 78.9vh;
        overflow: auto;
        overflow-x: hidden;
    }

    .main-data {
        min-height: calc(100vh - 168px);
        max-height: calc(100vh - 168px);
        overflow: auto;
        overflow-x: hidden;
    }

    .package-receipt .inpage + .main-data {
        min-height: calc(100vh - 310px);
        max-height: calc(100vh - 310px);
    }

    .receipt-data {
        min-height: 78.9vh;
        height: 78.9vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 10px;
    }

    .update-location {
        min-height: unset;
    }

    .nav-link {
        display: block;
        padding: 10px 1rem;
    }

    .de-activate,
    .activate {
        background: #ECF2F6 !important;
        color: #4B6476 !important;
    }




    .ModalNewView .modal-content {
        position: relative;
    }

        .ModalNewView .modal-content .close {
            color: #000 !important;
            margin: 0;
            left: unset;
            right: 4%;
            position: absolute;
            top: 15px;
        }

    .ModalNewView .modal-title {
        font: normal normal bold 24px/36px Open Sans !important;
        letter-spacing: 0px !important;
        color: #1B1E24 !important;
    }

    .ModalNewView .modal-content p {
        text-align: center;
        font: normal normal normal 13px/20px Open Sans;
        letter-spacing: 0px;
        color: #1B1E24;
        width: 60%;
        margin: auto;
    }

    /* .ModalNewView .modal-body label {
    font: normal normal normal 12px Open Sans;
    letter-spacing: 0px;
    color: #7B8290;
    display: block;
    position: relative;
}

    .ModalNewView .modal-body label:before {
        position: absolute;
        content: "";
        border: 1px solid #F0F3F7;
        width: 75%;
        top: 50%;
        right: 0;
    }

.ModalNewView .modal-body input {
    height: 47px;
    border-radius: 6px;
    margin-top: 15px;
} */






    .ModalNewView .modal-footer {
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

        .ModalNewView .modal-footer .btn {
            border: none;
            background: #0266FF;
            width: 100%;
            border-radius: 6px;
            margin-top: 15px;
            font: normal normal 600 16px Open Sans;
            letter-spacing: 1.6px;
            color: #F8FBFD;
            text-transform: uppercase;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 15px !important;
        }

    .ModalNewView .modal-content p {
        width: 80%;
    }

    .ModalNewView .modal-body {
        padding: 15px!important;
        padding-bottom: 0px!important;
    }



    /*.ModalNewView .modal-footer {
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
    }*/
    .main-content {
        height:94vh;
    }
}

@media(min-width:1200px) {

    .table-responsive {
        overflow-x: hidden;
    }
}

.manage-tab .ul-pack {
    overflow: hidden;
}

    .manage-tab .ul-pack li {
        text-align: center;
        padding: 3px 10px 5px;
        text-align: center;
        border: 1px solid #0266FF1f;
        margin: 0 3px;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.5s;
    }

        .manage-tab .ul-pack li:hover,
        .manage-tab .ul-pack li.active {
            background: #0266FF;
            border-color: #0266FF;
        }



        .manage-tab .ul-pack li a {
            color: #0266FF;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.5s;
        }

        .manage-tab .ul-pack li:hover a,
        .manage-tab .ul-pack li.active a {
            color: #fff;
        }



#btnClear {
    background: #e8e8e8;
    padding: 9px 20px;
    color: #000;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #11151A;
    font: normal normal 600 14px Open Sans;
}

.reload-btn,
.filter-btn {
    color: #4B6476;
    background: #ECF2F6;
    border-radius: 4px;
    padding: 10.5px 25px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font: normal normal bold 14px Open Sans;
}

.reload-btn {
    padding: 10.5px 17px;
}

.package-receipt .has-search .form-control.ship-request-input::placeholder {
    font-size: 12px !important;
}

.ship-request-btn {
    background: #0266FF;
    padding: 10px 10px 9px;
    color: #fff;
    border-radius: 4px;
    font: normal normal 500 12px Open Sans;
}

.package-receipt-data table tbody tr td span.status.completed {
    background: #a3a3a3;
}

@media(max-width:575px) {
    .packagestatus-ul li a, .packagetab-ul li a {
        background: var(--unnamed-color-e8e8e8) 0% 0% no-repeat padding-box;
        background: #e8e8e8 0% 0% no-repeat padding-box;
        border-radius: 4px;
        opacity: 1;
        padding: 5px 8px;
        color: #15191f !important;
        font: normal normal normal 10px Open Sans;
        display: block;
        margin-right: 10px;
        margin-bottom: 10px;
    }
}

.process-btn {
    font-size: 14px;
    color: #0266FF !important;
    font-weight: 600;
}

.pick-ticket {
    overflow-x: auto;
}

    .pick-ticket::-webkit-scrollbar {
        width: 0.4rem;
        height: 3px;
    }

    .pick-ticket::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px var(--background-dark);
    }

    .pick-ticket::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: #0266FF !important;
    }

    .pick-ticket .package-receipt-card {
        padding: 10px 15px;
        min-height: 75px;
        max-height: 75px;
        width: 240px;
        justify-content: space-between;
    }

        .pick-ticket .package-receipt-card h2 {
            font-size: 38px;
        }

        .pick-ticket .package-receipt-card span {
            font-size: 15px;
            width: 60%;
        }

.package-details-data {
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
}

    .package-details-data h6 {
        font: normal normal 600 14px Open Sans;
        color: #11151A;
    }

.assign-order-data {
    font-weight: 500;
    font-size: 15px;
    color: #11151A;
    text-align: center;
    margin-top: 10px;
}

.form-check input[type="checkbox"] {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.form-check label {
    position: relative;
    cursor: pointer;
    margin: 0;
    line-height: 1;
}

.form-check input[type="checkbox"] + label:before {
    content: '';
    -webkit-appearance: none;
    background-color: #fff3e2;
    border: 1px solid #feb447;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 7px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 5px;
}

.form-check input[type="checkbox"]:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #feb447;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.MovedPackages .form-check input[type="checkbox"]:checked + label:after {
    top: 3px;
}

.customerWrapper tbody tr td span.package-tracking {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: inline-block;
}

.modal-card {
    border: 1px solid #DEDEDE;
    display: flex;
    border-radius: 5px;
    margin-bottom: 10px;
}

.card-img {
    background: #ECF2F6;
    padding: 10px;
    text-align: center;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-text {
    padding: 15px;
}

    .card-text h6 {
        font: normal normal bold 12px/14px Open Sans;
        letter-spacing: 0px;
        color: #0266FF;
        margin-bottom: 3px;
    }

    .card-text p {
        font: normal normal normal 14px/20px Open Sans;
        letter-spacing: 0px;
        color: #1B1E24;
        text-align: left !important;
        opacity: 1;
    }


.controlOptions .main-data {
    min-height: calc(100vh - 232px);
    max-height: calc(100vh - 232px);
}

.package-receipt-data table tbody tr.bottom-popup:nth-last-child(-n+2) .context-menu .dropdown-right,
.package-receipt-data table tbody tr.manifestListData:nth-last-child(-n+2) .context-menu .dropdown-right {
    top: -470%;
}

.package-receipt-data table tbody tr.bottom-popup:nth-last-child(-n+2) .context-menu .dropdown:after,
.package-receipt-data table tbody tr.bottom-popup:nth-last-child(-n+2) .context-menu .dropdown:before,
.package-receipt-data table tbody tr.manifestListData:nth-last-child(-n+2) .context-menu .dropdown-right:after
.package-receipt-data table tbody tr.manifestListData:nth-last-child(-n+2) .context-menu .dropdown-right:before {
    top: 100%;
    transform: rotate(180deg);
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .package-receipt .controlOptions .inpage + .main-data {
        min-height: calc(100vh - 284px);
        max-height: calc(100vh - 284px);
    }

    .controlOptions .main-data {
        min-height: calc(100vh - 227px);
        max-height: calc(100vh - 227px);
    }

    .package-service .table-data {
        min-height: 86.5vh;
        max-height: 86.5vh;
    }
}


.context-menu {
    position: relative;
    height: 19px;
}

.username {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.user-dropdown {
    position: absolute;
    background: #fff;
    width: 80%;
    margin: 0;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 5px rgba(239,239,239,0.3);
    list-style: none;
    top: -50px;
}

    .user-dropdown:before {
        content: "";
        display: block;
        position: absolute;
        right: 10px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%) rotate(180deg);
        border-color: transparent transparent #fff transparent;
    }

    .user-dropdown li a {
        display: block;
        padding: 5px;
        text-align: center;
    }

        .user-dropdown li a span {
            font-size: 13px;
            color: #15191f;
            font-weight:600;
        }

.username > span {
    background: #FFB446 0% 0% no-repeat padding-box;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    font: normal normal 600 16px Poppins;
    color: #FFFFFF;
    text-align: center;
    line-height: 40px;
    text-transform: uppercase;
}

.username h6 {
    font: normal normal normal 14px Open Sans;
    color: #FFFFFF;
    text-transform: capitalize;
    margin: 0;
    line-height: 1;
}

.username-text {
    font: normal normal 600 16px Open Sans;
    color: #FFFFFF;
    margin: 0;
    line-height: 1;
    max-width: 150px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: block;
}

.username small {
    font: normal normal 400 12px Open Sans;
    color: #FFFFFF;
    margin: 0;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: block;
}

.username > span:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    background: #33B986;
    border-radius: 50%;
    top: -2px;
    right: -2px;
    border: 1px solid #0266FF;
}

.invoiceDocument-previewFile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .invoiceDocument-previewFile img:last-child {
        margin: 0 !important;
    }

    .invoiceDocument-previewFile img:not(.image-close) {
        height: 100px;
        margin-right: 15px;
        padding: 10px;
        border: 1px solid #0266FF;
        background: #fafafa;
        text-align: center;
        border-radius: 10px;
        min-height: 100px;
    }

#processRequest .invoiceDocument-previewFile img:not(.image-close) {
    padding: 5px;
    margin-top: 15px !important;
    max-width: 100px;
    min-width: 100px;
}

    #processRequest .invoiceDocument-previewFile img:nth-child(4n) {
        margin-right: 0 !important;
    }

.invoiceDocument-File {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .invoiceDocument-File img:last-child {
        margin: 0 !important;
    }

    .invoiceDocument-File img {
        height: 100px;
        margin-right: 15px;
        padding: 10px;
        border: 1px solid #0266FF;
        background: #fafafa;
        text-align: center;
        border-radius: 10px;
        min-height: 100px;
    }

#processRequest .invoiceDocument-File img {
    padding: 5px;
    margin-top: 15px !important;
    max-width: 100px;
    min-width: 100px;
}



table tbody tr td span.trackid {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: inline-block;
}

.package-box {
    width: 100%;
    height: 160px;
    border: 1px solid #DEDEDE;
    border-radius: 10px;
    opacity: 1;
}

.package-text-box {
    background: #ECF2F6 0% 0% no-repeat padding-box;
    border-radius: 11px 11px 0 0;
    text-align: center;
    padding: 8px 0;
}

    .package-text-box h6 {
        font: normal normal bold 14px Open Sans;
        color: #2C2727;
    }

.package-text-detail {
    padding: 5px;
}

    .package-text-detail h6 {
        font: normal normal bold 12px/17px Open Sans;
        letter-spacing: 0px;
        color: #2C2727;
        opacity: 1;
        margin: 0;
    }

.success-text {
    font: normal normal bold 16px Open Sans;
    letter-spacing: 0px;
    color: #3E8930;
    opacity: 1;
}

.package-item-box {
    border: 1px solid #DEDEDE;
    border-radius: 10px;
}

.package-item-box-img {
    background: #ECF2F6;
    border-radius: 11px;
    padding: 10px 5px;
}

    .package-item-box-img img {
        mix-blend-mode: multiply;
    }

.bottom-popup .dropdown-menu,
.bottom-popup .select-options {
    top: unset;
    bottom: 100%;
}

.package-title {
    color: #c2d3e7;
    font-size: 17px;
    margin: 0;
    font-weight: 700;
    text-transform: capitalize;
    display: inline-block;
    letter-spacing: -0.3px;
}

.package-details-data h3 {
    color: #344D72;
    font-size: 24px;
    margin: 0;
    display: inline-block;
    font-weight: 700;
}

.packing-creation-btn,
.pick-ticket-btn {
    padding: 10px 12px;
    margin-top: 30px;
    display: inline-block;
    background: #ffb446;
    border-radius: 5px;
    color: #000 !important;
    font-weight: 500;
    margin-right: 10px;
    font-size: 14px;
    min-width: 152px;
    text-align: center;
}

.packing-creation-btn {
    background: #F1F6FA;
}

    .packing-creation-btn img,
    .pick-ticket-btn img {
        width: 20px;
    }

.print-receipt-box {
    padding: 20px 40px;
    background: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #232a4324;
}

#filterModalContent.create-location-details .select-styled,
#filterModalContent.create-location-details .form-group .form-control {
    background: #fff;
    border-radius: 10px;
}

#filterModalContent.create-location-details .create-receipt-btn {
    padding: 9px 10px !important;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
}

#filterModalContent.create-location-details #btnClear {
    background: #fff;
    padding: 9px 15px;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
}

    #filterModalContent.create-location-details #btnClear i {
        font-size: 20px;
        font-weight: 300;
        color: #232a43;
    }

#filterModalContent {
    background-color: #f2f3f7;
    margin: 5px 0;
}

@media(min-width:1200px) and (max-width:1399px) {
    .print-receipt-box {
        padding: 10px 20px;
    }

    .receipt-img {
        padding: 15px;
    }
}
#hscodes-list {
    padding: 5px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    border-radius: 5px;
    position: absolute;
    width: 100%;
    z-index: 999;
    max-height: 250px;
    overflow: auto;
}

    #hscodes-list li {
        font: normal normal 600 14px/19px Open Sans;
        color: #0266FF !important;
        padding: 10px;
    }


    #hscodes-list::-webkit-scrollbar {
        width: 0.3rem;
    }

    #hscodes-list::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px #e2e6eb;
    }

    #hscodes-list::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: #6F91A8;
    }


#merchant-list {
    padding: 5px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    border-radius: 5px;
    position: absolute;
    width: 100%;
    z-index: 999;
    max-height: 250px;
    overflow: auto;
}

    #merchant-list li {
        font: normal normal 600 14px/19px Open Sans;
        color: #0266FF!important;
        padding: 10px;
    }


    #merchant-list::-webkit-scrollbar {
        width: 0.3rem;
    }

    #merchant-list::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px #e2e6eb;
    }

    #merchant-list::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: #6F91A8;
    }

#gallery,
#sanpshotcam {
    width: 100%;
    height: 120px;
    color: #0266FF;
    overflow: hidden;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    border: 1.5px dashed #a1a1a1;
    border-radius: 10px;
    background: transparent;
}

#my_camera video,
#my_camera {
    width: 100% !important;
}

@media(max-width:575px) {
    .username {
        justify-content: unset;
    }

    .user-dropdown {
        width: 30%;
        top: 4px;
        right: 10px;
    }

        .user-dropdown:before {
            bottom: 8px;
            left: -8px;
            transform: translateX(-50%) rotate(-90deg);
        }
}

@media(min-width:1200px) and (max-width:1399px) {
    .login-bg {
        height: 100vh;
        padding: 0 75px;
        padding-left: 0;
    }
}

.manifest-number h4 {
    font-size: 15px;
    font-weight: 600;
    color: #11151A;
    margin: 0;
    padding: 15px 0;
}

.manifest-input .save-btn {
    padding: 11px 30px;
    background: #0266FF;
    color: #fff;
    border-radius: 5px;
    display: inline-block;
    font: normal normal 600 14px Open Sans;
    letter-spacing: 1.4px;
}
@media(min-width:1400px){
    .main-content {
        height: 94.8vh;
    }
}
.user-dropdown img{
    width:20px;
}
#CreateManifest .select {
    margin-bottom: 20px;
}
#CreateManifest .select-styled {
    padding-top: 9px;
    height: 43px;
}

.dropdown-menu-item {
    padding: 5px 7px;
}

.package-receipt .dropdown-select,
#filterModalContent .dropdown-select {
    background: #fff;
    border-radius: 10px;
    padding: 0 20px;
    padding-bottom: 0px;
    height: 45px;
    padding-top: 25px;
    border-radius: 10px;
    width: 100%;
    font: normal normal 600 14px Open Sans;
    letter-spacing: 0px;
    color: #11151A;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 23px !important;
    padding: 0 16px;
    padding-top: 18px;
}

.package-receipt .dropdown-select {
    background: #F7F8FD;
    height: 54px;
    padding-top: 25px;
}
    .dropdown-select {
        cursor: pointer;
    }

    .dropdown-select:after {
        content: "";
        width: 0;
        height: 0;
        border: 7px solid transparent;
        border-color: #0266FF transparent transparent transparent;
        position: absolute;
        top: 52%;
        transform: translateY(-50%) rotate(0deg);
        right: 20px;
        transition: all 0.2s;
    }

    .dropdown-select.active:after {
        top: 44%;
        transform: translateY(-50%) rotate(180deg);
    }
#slide {
    width: auto;
    height: auto;
    overflow: hidden;
    border: 1px solid #ccc;
}

.dropdown-menu {
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 260px;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 9999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    border-radius: 10px;
    border: none;
}

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

.dropdown-menu-item {
    margin: 0;
    padding: 8px 15px;
    color: #5a5a5a;
    font-size: 14px;
    transition: all 0.3s;
    cursor: pointer;
}

.dropdown-menu::-webkit-scrollbar {
    width: 0.2rem;
    height: 3px;
}

.dropdown-menu::-webkit-scrollbar-track {
    box-shadow: none;
    background: #c9c9c9;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #0266FF !important;
}

.dropdown-menu-search {
    background: #eceef5 !important;
    margin: 0 auto 7px auto;
    width: 95% !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    position: sticky;
    top: 0px;
    border-top: 7px solid #fff !important;
}
.chart-box {
    padding-top: 20px;
    background: #fffbf7;
    border-radius: 20px;
}
.total-price input:disabled {
    color: #11151A!important;
}
    .total-price input:disabled ~ .floating-label {
        color: #605757!important;
    }

.styled-checkbox1 + label:before {
    content: '';
    margin-right: 5px;
    display: inline-block;
    vertical-align: text-bottom;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #DDE4F0;
    border-radius: 4px;
}
.styled-checkbox1:checked + label:before {
    background: #649745;
}
.styled-checkbox1 + label {
    position: relative;
    cursor: pointer;
    padding: 0;
    font-weight: 600;
    font-size: 15px;
}
.styled-checkbox1 {
    position: absolute;
    opacity: 0;
}
.form-group.log input {

    color: #424242;
    font: normal normal 600 14px/22px Open Sans;
    display: block;
    background-color: var(--background-dark);
    padding-left: 12px;
    padding-bottom: 0;
    padding-top: 16px;
    width: 100%;

    padding: 15px 20px;
    background: #F5F7FA;


    border: 1px solid #DDE4F0;
    border-radius: 8px;
}
.reset-option1 {
    font: normal normal 600 14px Open Sans;
    letter-spacing: 0px;
    color: #EA6B4E !important;
}
.styled-checkbox1:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 11px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
}
@media(min-width:320px) and (max-width:992px) {
    body {
        align-items: flex-start;
    }
    .container {
        padding:0;
    }
    .login-bg {
        padding: 0px !important;
        border-radius: 0px;
    }
    .signInContainer {
 border-radius:0   }
}

.loader {
    user-select: none;
}

.textOverflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
}

.dateLabel {
    height: 50px;
    line-height: normal;
}

.datePicker label {
    background: #FFFFFF;
    border: 1px solid #DFE2E6;
    border-radius: 6px;
    padding: 5px;
    height: 45px;
    margin-bottom: 0;
}


.datePicker {
    max-width: 18rem;
    margin-right: auto;
    /*margin-right: 12px;*/
}

.datePicker label {
    font-size: 11px;
    font-weight: 400;
    display: block;
    color: #605757;
    padding: 0.25rem 0.75rem 0.25rem 0.75rem;
    border-radius: 0.5rem;
    background: #FFFFFF;
    font-family: Open Sans;
}

.datePicker label input {
    font-family: Open Sans;
    background: #FFFFFF;
    display: block;
    border: none;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    line-height: 1rem;
    padding: 0;
    font-size: 14px;
    color: #000;
    width: 100%;
    font-weight: 600;
}

input:focus {
    outline: none;
}

#ui-datepicker-div {
    display: none;
    z-index:9999!important;
    background-color: #FFFFFF;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
    margin-top: 0.25rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-left: -15px;
    margin-top: 8px;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2),0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.ui-datepicker-calendar thead th {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: #000;
}

.ui-datepicker-calendar tbody td {
    width: 2rem;
    text-align: center;
    padding: 0;
}

.ui-datepicker-calendar tbody td a {
    display: block;
    border-radius: 0.25rem;
    line-height: 2rem;
    transition: 0.3s all;
    color: #000;
    font-size: 0.875rem;
    text-decoration: none;
}

.ui-datepicker-calendar tbody td a:hover {
    background-color: #d4d5d7;
}

.ui-datepicker-calendar tbody td a.ui-state-active {
    background-color: #d4d5d7;
    color: #000;
}

.ui-datepicker-header a.ui-corner-all {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    margin: 0.5rem;
    border-radius: 0.25rem;
    transition: 0.3s all;
}

.ui-datepicker-header a.ui-corner-all:hover {
    background-color: #ECEFF1;
}

.ui-datepicker-header a.ui-datepicker-prev {
    left: 0;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-size: 0.5rem;
    background-position: 50%;
    transform: rotate(180deg);
}

.ui-datepicker-header a.ui-datepicker-next {
    right: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 50%;
}

.ui-datepicker-header a > span {
    display: none;
}

.ui-datepicker-title {
    text-align: center;
    line-height: 2rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding-bottom: 0.25rem;
    color: #000;
}

.ui-datepicker-week-col {
    color: #78909C;
    font-weight: 400;
    font-size: 0.75rem;
}

.ui-datepicker-unselectable.ui-state-disabled {
    color: gray;
}

.ui-state-default {
    font-size: 0.875rem;
}

.dateLabel .calendar-icon {
    width: 16px;
    height: auto;
    opacity: 0.5;
    position:relative;
    top:-5px;
}

.dateValue {
    display: flex;
}

.package-receipt-data .customerWrapper thead tr {
    position: relative;
    z-index: 0;
}