@font-face {
    font-family: 'DINNextLTArabic-Bold';
    src: url('fonts/DINNextLTArabic-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/DINNextLTArabic-Bold.woff') format('woff'), url('fonts/DINNextLTArabic-Bold.ttf') format('truetype'), url('fonts/DINNextLTArabic-Bold.svg#DINNextLTArabic-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DINNextLTArabic-Medium';
    src: url('fonts/DINNextLTArabic-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/DINNextLTArabic-Medium.woff') format('woff'), url('fonts/DINNextLTArabic-Medium.ttf') format('truetype'), url('fonts/DINNextLTArabic-Medium.svg#DINNextLTArabic-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DINNextLTArabic-Regular';
    src: url('fonts/DINNextLTArabic-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/DINNextLTArabic-Regular.woff') format('woff'), url('fonts/DINNextLTArabic-Regular.ttf') format('truetype'), url('fonts/DINNextLTArabic-Regular.svg#DINNextLTArabic-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    direction: rtl;
}

body {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: right
}

.login {
}

    .login:after {
        content: "";
        background: #ff0000;
        position: fixed
    }

    .login .login-form {
        background: #1B365E;
        width: 540px;
        position: absolute;
        border-radius: 15px;
        left: 50%;
        top: 50%;
        border-radius: 0px;
        height: 626px;
        transform: translate(-50%, -50%);
        padding: 30px;
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        height: auto;
    }

        .login .login-form.sign-in {
            background: none;
            -webkit-clip-path: none;
            clip-path: none;
        }

            .login .login-form.sign-in:before {
                background: #1B365E;
                content: "";
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
                clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
                z-index: -1
            }

.pl-8 {
    padding-right: 8px !important;
}

.pr-8 {
    padding-left: 8px !important;
}

.alert {
    padding: 16px;
    height: 80px;
    width: 570px;
    -webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    position: fixed;
    left: 16px;
    bottom: 0px;
    margin: 0px;
    border: none;
    border-radius: 0px;
    font-family: 'Cairo', sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 102;
    position: absolute
}

    .alert .message {
    }

    .alert .title {
        font-size: 12px;
        text-transform: uppercase
    }

    .alert p {
        margin: 0px;
        padding: 0px;
        font-size: 16px;
        font-weight: normal;
        line-height: normal;
    }

    .alert a {
        font-size: 12px;
        text-transform: uppercase;
        font-weight: bold
    }

        .alert a:hover {
            text-decoration: none
        }

    .alert.error {
        background: #C11D2A;
    }

        .alert.error .title {
            color: #FF848E
        }

        .alert.error p {
            color: #fff
        }

        .alert.error a {
            color: #fff
        }

.login .login-form .logo {
    text-align: center;
    margin-bottom: 30px;
}

.login .login-form .back-btn {
    width: 26px;
    height: 26px;
    display: block;
    outline: none;
    position: absolute;
    top: 30px;
}

    .login .login-form .back-btn .icon {
        background: url(images/orange-down-arrow.svg) 1px 14px no-repeat;
        display: block;
        background-size: 80%;
        height: 100%;
        width: 100%;
        transform: rotate(-90deg);
    }

.login .login-form .logo img {
    display: block;
    margin: 0px auto;
    width: 219px;
    height: 49px;
}

.login .login-form h3 {
    font-family: 'Cairo', sans-serif;
    font-size: 25px;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600
}

.login .login-form h2 {
    font-family: 'Cairo', sans-serif;
    font-size: 25px;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700
}

    .login .login-form h2 span {
        display: block;
        font-family: 'Cairo', sans-serif;
        font-size: 16px;
    }

.login .login-form .guide-txt {
    font-family: 'Cairo', sans-serif;
    font-size: 18px;
    color: #fff;
    text-align: center;
    margin: 0px;
    line-height: 25px;
    margin-bottom: 20px;
    padding: 0px 50px;
}

.login .login-form.create-account {
    height: 575px;
    padding-left: 0px;
    width: 700px;
    webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
    clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
}
/*18-01-2022*/
.login .login-form.register-account {
    width: 960px !important;
    -webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 10%);
    clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 10%);
    height: auto
}

.login .login-form.account-type {
    height: 695px;
    width: 700px;
    -webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 10%);
    clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 10%);
    height: auto
}

    .login .login-form.account-type h2 {
        color: #FFC685;
    }

.account-type .signup-type {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
    position: relative;
    justify-content: space-around;
}

    .account-type .signup-type .signup-card {
        height: 182px;
        width: 280px;
        background: #112B50;
        margin: 0px 0px 20px 0px;
        padding: 14px;
        font-family: 'Cairo', sans-serif;
        position: relative; /* margin-right: 24px; */
        min-height: 182px;
        height: auto;
    }

        .account-type .signup-type .signup-card .check-icon {
            width: 23px;
            height: 23px;
            background: url(images/Deactivated-icon.svg) left top no-repeat;
            background-size: 23px;
            position: absolute;
            left: 16px;
        }

        .account-type .signup-type .signup-card.selected .check-icon {
            background: url(images/shipment-check.svg) left top no-repeat;
            background-size: 23px;
        }

        .account-type .signup-type .signup-card .title {
            font-size: 24px;
            color: #fff;
            padding-bottom: 0px;
            font-weight: 600;
            line-height: normal;
        }

            .account-type .signup-type .signup-card .title span {
                font-weight: normal;
                display: block
            }

        .account-type .signup-type .signup-card .user-count {
            font-size: 13px;
            color: #5F8CC9;
            font-style: italic;
        }

        .account-type .signup-type .signup-card .btn-primary {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 25px;
            width: 98px !important;
            border: none;
            text-align: right;
            padding: 0px 10px 0px 0px;
            color: #fff;
            font-size: 13px;
            font-family: 'Open Sans', sans-serif;
            font-weight: 600;
            border-radius: 0px;
            -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 34%, 95% 0);
            clip-path: polygon(10% 0, 100% 0, 100% 100%, 100% 100%, 0 100%,0 40%);
            border-radius: 0px;
            line-height: 25px;
            display: flex;
            margin: 0px;
            position: relative;
            margin-right: 10px;
            min-width: 98px;
            position: absolute;
            bottom: 14px;
            display: none;
        }

            .account-type .signup-type .signup-card .btn-primary .icon {
                background: url(images/ar/round-right-arrow.svg) left top no-repeat !important;
                background-size: 100% !important;
                width: 15px;
                height: 15px;
                position: absolute;
               left: 12px;
                top: 6px;
            }

        .account-type .signup-type .signup-card.selected .btn-primary {
            display: block;
        }

        .account-type .signup-type .signup-card .type-icon {
            width: 100px;
            width: 120px;
            position: absolute;
            bottom: 15px;
            left: 10px;
        }
        .account-type .signup-type .signup-card .type-icon-plans {
            width: 80px;
            position: absolute;
            bottom: 15px;
            left: 10px;
        }
/*18-01-2022 end*/
.login .login-form.create-account .scroll-bar {
    height: 500px;
    margin-bottom: 20px;
}

.login .login-form.create-account .form-group {
    padding-left: 30px;
}

.login .login-form .form-group {
    margin-bottom: 24px;
}

.login .login-form.sign-in h2 {
    color: #FFC685
}

.login .login-form.sign-in .new-user {
    padding-top: 0px;
}

.login .login-form.sign-in .powerby {
    padding-top: 0px;
}

.login .login-form .form-group.button-group {
    margin-bottom: 24px;
}

.login .login-form.create-account .form-group {
    margin-bottom: 22px;
}

    .login .login-form.create-account .form-group.button-group {
        height: 49px;
    }

.form-group label {
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    text-transform: uppercase
}

.form-group .control-group {
    display: flex;
}

.form-control {
    height: 50px;
    background: #2D4D79;
    border: none;
    line-height: 50px;
    text-indent: 14px;
    font-family: 'Cairo', sans-serif;
    font-size: 16px;
    color: #fff !important;
    padding: 0px; /*-webkit-clip-path:polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);*/
    border-radius: 0px;
    padding-left: 46px;
}

.form-group .form-control {
    -webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    background: #2D4D79;
}

.form-group select.form-control {
    height: 50px !important;
}

.form-group .col-sm-6 .form-control {
    webkit-clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 33%);
    clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 33%);
}

.form-group select.form-control {
    background: #2D4D79 url("images/Drop.svg") 2% center no-repeat;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

    .form-group select.form-control:invalid {
        color: #5F8CC9;
        font-family: 'Cairo', sans-serif;
    }

    .form-group select.form-control option {
        color: #fff;
    }

.form-group .form-control::placeholder {
    color: #5F8CC9;
    font-family: 'Cairo', sans-serif;
    opacity: 0.59;
}

.form-group .form-control.phone-number {
    background: #2D4D79 url("images/phone.svg") 2% center no-repeat;
}

.form-group .form-control.date {
    background: #2D4D79 url(images/Calendar.svg) 2% center no-repeat;
}

.form-group .form-control.password {
    background: #2D4D79 url("images/padlock.svg") 3% center no-repeat;
    background-size: 17px;
}

.form-group .form-control.email {
    background: #2D4D79 url("images/Mail.svg") 2% center no-repeat;
}

.form-group .form-control.name {
    background: #2D4D79 url("images/Name.svg") 2% center no-repeat;
}

.form-group .form-control.company {
    background: #2D4D79 url("images/company.svg") 2% center no-repeat;
}

.form-group .form-control.account {
    background: #2D4D79 url("images/Account.svg") 2% center no-repeat;
}

.form-group .form-control.transaction {
    background: #2D4D79 url("images/Transaction.svg") 2% center no-repeat;
}

.form-group .form-control.country-code {
    width: 90px;
    clip-path: none !important;
    margin-left: 10px;
    padding-left: 0px;
}

.form-group .btn-primary {
    background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
    height: 50px;
    width: 100%;
    border: none;
    text-align: left;
    padding: 0px 15px 0px 0px;
    color: #fff;
    font-size: 20px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    border-radius: 0px;
    -webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    border-radius: 0px;
    line-height: 44px;
    display: flex;
    position: relative;
}

    .form-group .btn-primary .icon {
        background: url("images/ar/round-right-arrow.svg") left top no-repeat !important;
        width: 23px;
        height: 23px;
        position: absolute;
        left: 12px;
        top: 16px;
    }

.mandatory-field {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #ff0000;
    padding-right: 4px;
}

.form-group .forgot-lnk {
    font-size: 14px;
    color: #A7CCFD;
    text-decoration: none;
    display: block;
    text-align: left;
    margin-top: 6px;
}

.login .login-form .new-user {
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding-top: 14px;
}

    .login .login-form .new-user a {
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        font-family: 'Cairo', sans-serif;
        padding-left: 6px;
        font-weight: 700
    }

.login .login-form .powerby {
    text-align: center;
    padding-top: 0px;
}

.login .login-form .reg-steps {
    display: flex;
    justify-content: center;
    margin-top: -6px;
}

    .login .login-form .reg-steps .step {
        width: 16px;
        height: 8px;
        background: rgba(255,255,255,.5);
        border-radius: 10px;
        margin-right: 6px;
    }

        .login .login-form .reg-steps .step.active {
            width: 32px;
            background: rgba(255,255,255,.7);
        }

.login .login-form .login-footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 0px;
    padding: 0px 30px;
    bottom: 16px;
}

.login .language-selection {
    font-family: 'Cairo', sans-serif;
    font-size: 23px;
    font-weight: 600;
    display: flex;
    text-decoration: none;
    color: #fff;
    background: url("images/language-icon.svg") right 9px no-repeat;
    padding-right: 30px;
    position: fixed;
    left: 20px;
    bottom: 20px;
    background-size: 20px;
    position: absolute
}

.login .chat-btn {
    width: 150px;
    height: 42px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    -webkit-clip-path: polygon(12% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    clip-path: polygon(12% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    border-radius: 6px;
    background: #FF7F32 url("images/chat-icon.svg") 94% center no-repeat;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    padding-right: 36px;
    display: flex;
    align-items: center;
    position: absolute
}

.login .otp-form {
}

    .login .otp-form .form-group {
        margin-bottom: 26px;
    }

    .login .otp-form h2 {
        margin-bottom: 14px;
    }

    .login .otp-form .otp-send-msg {
        font-family: 'Cairo', sans-serif;
        font-size: 18px;
        color: #fff;
        margin-bottom: 36px;
        line-height: 25px;
        text-align: center;
        padding: 0px 10px;
    }

        .login .otp-form .otp-send-msg .mobile-number {
            font-family: 'Cairo', sans-serif;
            font-weight: 700
        }

    .login .otp-form .form-control.otp-control {
        width: 95px;
        height: 95px;
        clip-path: none;
        text-indent: 0;
        text-align: center;
        font-family: 'Cairo', sans-serif;
        font-size: 46px;
        padding: 0px;
        font-weight: 700
    }

    .login .otp-form .otp-group {
        display: flex;
        justify-content: space-between;
        align-content: center;
        background: none;
        margin-bottom: 26px;
    }

    .login .otp-form .form-control.otp-control::-webkit-outer-spin-button, .login .otp-form .form-control.otp-control::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .login .otp-form .form-control.otp-control[type=number] {
        -moz-appearance: textfield;
    }

    .login .otp-form .otp-auosend {
        font-size: 14px;
        color: #fff;
        text-align: center;
        margin-bottom: 30px;
    }

        .login .otp-form .otp-auosend span {
            color: #ECB920;
            font-weight: 700
        }

    .login .otp-form .otp-resend {
        font-size: 16px;
        color: #fff;
        text-align: center;
        margin-bottom: 26px;
    }

        .login .otp-form .otp-resend a {
            color: #fff;
            text-decoration: none;
            font-weight: 700
        }

    .login .otp-form .otp-continue {
        width: 100%;
        padding: 0px;
        margin: 46px 0px 0px 0px;
    }

    .login .otp-form .form-group.button-group {
        margin-bottom: 0px;
    }

.login .account-check {
    height: auto;
}

    .login .account-check h2 {
        margin-bottom: 20px;
    }

    .login .account-check p {
        font-size: 18px;
        color: #fff;
        text-align: center;
        font-family: 'Cairo', sans-serif;
        margin-bottom: 26px;
        line-height: 25px;
        margin: 0px;
        padding: 0px 10px;
    }

    .login .account-check .section-icon {
        text-align: center;
        padding-top: 40px;
    }

    .login .account-check.new-reg p {
        padding: 0px 0px;
        width: 50%;
        margin: 0px auto;
    }

    .login .account-check.new-reg .section-icon {
        padding-bottom: 40px;
    }

    .login .account-check.user-exists {
        height: auto;
    }

        .login .account-check.user-exists p {
            padding: 0px 0px;
            width: 40%;
            margin: 0px auto;
        }

    .login .account-check.account-created p {
        width: auto;
    }

    .login .account-check.user-exists .section-icon {
        padding-bottom: 40px;
    }

    .login .account-check.user-exists .form-group.button-group {
        margin-bottom: 0px;
    }

    .login .account-check .small-logo {
        text-align: center;
        padding-top: 80px;
    }

.login .id-verification-form .form-group {
    margin-bottom: 22px;
}

.login .forgot-password {
    height: 600px;
    height: auto;
}

    .login .forgot-password h3 {
        margin-bottom: 10px;
    }

    .login .forgot-password .guide-txt {
        padding: 0px 20px;
        margin-bottom: 44px
    }

    .login .forgot-password .new-user {
        padding-top: 4px;
    }

    .login .forgot-password.otp-form {
        height: 600px;
        height: auto
    }

        .login .forgot-password.otp-form .otp-send-msg {
            padding: 0px 50px;
        }

        .login .forgot-password.otp-form .form-control.otp-control {
            width: 99px;
            height: 99px;
            font-size: 58px;
        }

        .login .forgot-password.otp-form .otp-resend {
            margin-top: 40px;
        }

.login .id-verification-form {
}

    .login .id-verification-form .form-group .form-control.user-id {
        background: #2D4D79 url(images/IDNumber.svg) 2% center no-repeat;
    }

    .login .id-verification-form .form-group .form-control.date {
        background: #2D4D79 url(images/Calendar.svg) 2% center no-repeat;
        webkit-clip-path: polygon(7% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        clip-path: polygon(7% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
    }

    .login .id-verification-form .form-group .custom-file {
        height: 114px;
    }

    .login .id-verification-form .form-group.file-group {
        background: none;
    }

    .login .id-verification-form .form-group .custom-file .custom-file-label {
        background: none;
        border: none;
        padding: 0px;
        height: 114px;
        border: 1px dashed #fff;
        text-transform: none;
        padding: 50px 160px 0px 160px;
        text-align: center;
        background: url(images/Plus.svg) center 22px no-repeat;
        border-radius: 0px;
    }

        .login .id-verification-form .form-group .custom-file .custom-file-label::after {
            display: none;
        }

    .login .id-verification-form .doit-later {
        text-align: center;
        font-family: 'Cairo', sans-serif;
        font-size: 18px;
        margin-top: -12px;
        font-weight: 700
    }

        .login .id-verification-form .doit-later a {
            color: #fff;
            text-decoration: none;
        }

    .login .id-verification-form .reg-steps {
        margin-top: 12px;
    }

.login .bank-link-form {
    height: auto;
}

    .login .bank-link-form .bank-form-label {
        font-family: 'Cairo', sans-serif;
        font-size: 20px;
        color: #FF7F32;
        margin-bottom: 24px;
        font-weight: 700
    }

    .login .bank-link-form .form-group select.form-control {
        background: #2D4D79 url(images/drop-arrow.svg) 3.5% center no-repeat;
    }

    .login .bank-link-form .doit-later {
        text-align: center;
        font-family: 'Cairo', sans-serif;
        font-size: 18px;
        margin-top: -12px;
        font-weight: 700
    }

        .login .bank-link-form .doit-later a {
            color: #fff;
            text-decoration: none;
        }

    .login .bank-link-form .reg-steps {
        margin-top: 10px
    }

    .login .bank-link-form .bank-link-fields {
        height: 350px;
        padding-left: 21px;
        padding-bottom: 20px;
        position: relative
    }

    .login .bank-link-form .guide-txt {
        color: #fff;
        font-size: 16px;
        font-family: 'Cairo', sans-serif;
        line-height: 22px;
    }

.slimScrollRail_new {
    background: #152F55 !important;
    opacity: 1 !important;
    border-radius: 0px !important;
    right: auto !important;
    left: 1px;
    width: 9px !important;
    border-radius: 0px 0px 3px 3px !important;
}

.slimScrollBar_new {
    background: #2D4D79 !important;
    opacity: 1 !important;
    height: 126px !important;
    right: auto !important;
    left: 1px;
    width: 9px !important;
    border-radius: 3px 3px 0px 0px !important;
}

.login .bank-link-form .slimScrollDiv {
    margin-left: -24px;
}

    .login .bank-link-form .slimScrollDiv .bank-link-fields {
        padding-bottom: 70px;
    }

    .login .bank-link-form .slimScrollDiv:after {
        height: 120px;
        width: 100%;
        background: url(images/Gradient.svg) left top no-repeat;
        position: absolute;
        left: 0px;
        bottom: 0px;
        content: "";
        background-size: 100%;
    }

.login .retail-stores {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 0px 20px 0px;
}

    .login .retail-stores h2 {
        font-family: 'Cairo', sans-serif;
        font-size: 25px;
        color: #fff;
        margin-bottom: 34px;
        display: flex;
        align-items: center;
        padding: 0px 20px;
        font-weight: 700;
    }

        .login .retail-stores h2 a {
            height: 24px;
            width: 96px;
            border: 1px solid #FF7F32;
            border-radius: 3px;
            color: #FF7F32;
            text-decoration: none;
            font-family: 'Cairo', sans-serif;
            font-size: 14px;
            text-transform: uppercase;
            text-align: center;
            line-height: 21px;
            margin-right: 9px;
            margin-top: 5px;
        }

    .login .retail-stores .doit-later {
        text-align: center;
        font-family: 'Cairo', sans-serif;
        font-size: 18px;
        margin-top: 0px;
        font-weight: 700
    }

        .login .retail-stores .doit-later a {
            color: #fff;
            text-decoration: none;
        }

    .login .retail-stores .reg-steps {
        margin-top: 10px;
    }

    .login .retail-stores .form-group {
        margin-bottom: 16px !important;
    }

    .login .retail-stores .bottom-bar {
        position: absolute;
        width: 100%;
        padding: 20px;
        left: 0px;
        bottom: -4px;
    }

    .login .retail-stores .store-list {
        min-height: 120px;
        border-radius: 25px 25px 0px 0px;
        background: #1B365D;
        position: absolute;
        left: 0px;
        bottom: 127px;
        width: 100%;
        padding: 0px 14px 20px 14px;
        max-height: 125px;
        overflow: hidden;
    }

        .login .retail-stores .store-list.expand {
            max-height: inherit;
            padding-left: 0px;
        }

            .login .retail-stores .store-list.expand .store-scroll {
                padding-left: 14px;
                padding-bottom: 110px;
            }

            .login .retail-stores .store-list.expand:after {
                height: 120px;
                width: 100%;
                background: url(images/Gradient.svg) left top no-repeat;
                ;
                position: absolute;
                left: 0px;
                bottom: 0px;
                content: "";
                background-size: 100%;
            }

    .login .retail-stores .map {
        height: 384px;
        position: relative;
    }

        .login .retail-stores .map .mylocation-btn {
            width: 30px;
            height: 30px;
            background: url(images/my-location.svg) left top no-repeat;
            position: absolute;
            right: 12px;
            top: 13px;
            background-size: 30px;
        }

        .login .retail-stores .map img {
            width: 100%;
            height: 282px
        }

    .login .retail-stores .store {
        display: flex;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(256,256,256, 0.1);
        margin-bottom: 2px;
        padding-top: 20px;
    }

        .login .retail-stores .store .store-image {
        }

            .login .retail-stores .store .store-image img {
                width: 62px;
                height: 62px;
            }

            .login .retail-stores .store .store-image .store-distance {
                text-align: center;
                color: #FF7F32;
                font-family: 'Cairo', sans-serif;
                font-size: 16px;
            }

        .login .retail-stores .store .store-details {
            padding-left: 10px;
            padding-right: 20px;
        }

            .login .retail-stores .store .store-details .store-name {
                font-family: 'Cairo', sans-serif;
                font-size: 16px;
                color: #fff;
                font-weight: 700
            }

            .login .retail-stores .store .store-details p {
                font-family: 'Cairo', sans-serif;
                font-size: 14px;
                line-height: 20px;
                color: #fff;
                opacity: .75;
                padding: 0px;
                margin: 0px;
            }

        .login .retail-stores .store .store-selection {
            width: 30px;
        }

        .login .retail-stores .store.active .store-selection .check-icon {
            width: 30px;
            height: 30px;
            background: url(images/Check.svg) left top no-repeat;
            margin-top: 35px;
        }

        .login .retail-stores .store .store-selection .check-icon {
            width: 30px;
            height: 30px;
            background: url(images/Deactivated.svg) left top no-repeat;
            margin-top: 35px;
        }

.login .terms-conditions {
    height: 656px;
}

    .login .terms-conditions .slimScrollDiv {
        margin-left: -30px;
        margin-bottom: 30px;
    }

    .login .terms-conditions .terms-content {
        padding-left: 30px;
        margin-bottom: 30px;
    }

    .login .terms-conditions p {
        margin: 0px;
        padding: 0px;
        font-family: 'Cairo', sans-serif;
        font-size: 16px;
        color: #fff;
        line-height: 19px;
        margin-bottom: 20px;
        text-align: justify;
    }

    .login .terms-conditions h4 {
        margin-top: 20px;
        margin-bottom: 10px;
        color: #fff;
    }

    .login .terms-conditions ol {
        list-style: arabic-indic;
    }

    .login .terms-conditions li {
        font-size: 16px;
        color: #fff;
        margin-bottom: 4px;
        text-align: justify
    }

    .login .terms-conditions .conformation {
        margin-top: -14px;
        margin-bottom: 30px;
        margin-top: 0px;
    }

        .login .terms-conditions .conformation .checkcontainer input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        .login .terms-conditions .conformation .checkcontainer {
            display: block;
            position: relative;
            padding-right: 40px;
            margin-bottom: 0px;
            cursor: pointer;
            font-size: 16px;
            color: #fff;
        }

            .login .terms-conditions .conformation .checkcontainer .checkmark {
                position: absolute;
                top: 0;
                right: 0;
                height: 26px;
                width: 26px;
                background: #2D4D79;
            }

            .login .terms-conditions .conformation .checkcontainer input:checked ~ .checkmark {
                background: #2D4D79 url(images/tick-icon.svg) center center no-repeat;
            }

.login .login-form.passowrd-form {
    height: 656px;
    height: auto;
}

    .login .login-form.passowrd-form h2 {
        margin-top: 20px;
    }

        .login .login-form.passowrd-form h2 span {
            padding-top: 16px;
        }
/*Main pages*/
.app-wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0px auto;
    padding: 0px 10px; /*min-height:100vh;background:#1B365D  url(images/bg.svg) -14% bottom no-repeat;background-attachment:initial;*/
    height: 100vh;
    max-height: 1000px;
    padding: 0px;
    position: relative
}

.login .app-wrapper .login-wrapper {
    height: 100vh
}

.login .app-wrapper {
    background: url("images/login-bg.png") left top no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    position: relative;
    background-attachment: initial;
    min-height: initial;
    max-height: 1600px;
}

.app-wrapper .header {
    height: 54px;
    background: transparent linear-gradient(270deg, #FF7F32 0%, #DE5400 100%) 0% 0% no-repeat;
    display: flex;
    align-items: center;
    padding: 0px 5px;
    justify-content: space-between;
    position: fixed;
    width: calc(100% - 20px);
    z-index: 10;
    width: calc(1280px - 20px);
    margin-right: 10px;
    border-top: 10px solid #1B365D
}

    .app-wrapper .header .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .app-wrapper .header .search {
        position: relative
    }

        .app-wrapper .header .search .form-control {
            width: 264px;
            height: 30px;
            padding: 0px;
            border-radius: 6px;
            font-size: 12px;
            color: #fff;
            background: #FF7F32;
            padding: 10px;
            border: none;
        }

            .app-wrapper .header .search .form-control::placeholder {
                color: #fff;
                font-family: 'Cairo', sans-serif;
                opacity: 0.59;
            }

        .app-wrapper .header .search .search-btn {
            height: 30px;
            width: 30px;
            background: url(images/Search.svg) center center no-repeat;
            padding: 0px;
            border: none;
            position: absolute;
            top: 0px;
            left: 0px;
        }

    .app-wrapper .header .notification {
        display: flex;
        align-items: center;
        margin: 0px 10px;
        position: relative;
    }

        .app-wrapper .header .notification img {
            width: 20px;
        }

        .app-wrapper .header .notification span {
            width: 8px;
            height: 8px;
            background: #0084B7;
            border-radius: 50%;
            position: absolute;
            left: -3px;
            top: 0px;
        }

    .app-wrapper .header .cart {
        background: url(images/Cart-header.svg) left top no-repeat;
        width: 28px;
        height: 28px;
        background-size: 100%;
        position: relative
    }

    .app-wrapper .header .language-selection {
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        font-weight: 400;
        display: flex;
        text-decoration: none;
        color: #fff;
        background: url(images/language-icon.svg) right 4px no-repeat;
        padding-right: 26px;
        background-size: 20px;
        margin-left: 20px
    }

    .app-wrapper .header .cart .cart-item {
        width: 20px;
        height: 20px;
        background: #1b365d;
        border-radius: 50%;
        font-size: 14px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: -12px;
        top: -1px;
    }

    .app-wrapper .header .user-profile {
        display: flex;
        align-items: center;
        padding-left: 20px;
        position: relative
    }

        .app-wrapper .header .user-profile img {
            width: 30px;
            height: 30px;
            margin-left: 6px;
        }

        .app-wrapper .header .user-profile .user-name {
            font-size: 12px;
            color: #fff;
            width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .app-wrapper .header .user-profile ::after {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #fff;
            content: "";
            position: absolute;
            top: 14px;
            left: 0px;
            display: none;
        }

.app-wrapper .content-wrapper {
    padding: 64px 10px 10px 10px;
    background: #1B365D url(images/bg.svg) -14% bottom no-repeat;
    background-attachment: initial;
    min-height: calc(1000px - 31px)
}

    .app-wrapper .content-wrapper .side-nav-bar {
        width: 170px;
        background: #112B50;
        height: calc(100vh - 64px);
        position: fixed;
        max-height: calc(1000px - 96px);
    }

    .app-wrapper .content-wrapper .content {
        width: calc(100% - 170px);
        padding-right: 30px;
        position: relative;
        padding-top: 20px;
        margin-right: 170px;
    }

        .app-wrapper .content-wrapper .content .content-title {
            font-family: 'Cairo', sans-serif;
            margin: 0px;
            font-size: 30px;
            color: #FFC685;
            line-height: 1;
            margin-bottom: 24px;
            font-weight: 700
        }

        .app-wrapper .content-wrapper .content .page-guidetxt {
            width: 750px;
            font-size: 16px;
            color: #fff;
            line-height: 23px;
            margin-bottom: 26px;
        }

        .app-wrapper .content-wrapper .content .page-guidetxt-blue {
            color: #5F8CC9
        }

        .app-wrapper .content-wrapper .content .sub-title {
            font-family: 'Cairo', sans-serif;
            margin: 0px;
            font-size: 20px;
            color: #fff;
            margin-bottom: 0px;
            line-height: normal;
            font-weight: 700
        }

        .app-wrapper .content-wrapper .content .add-button {
            background: url(images/button-add.svg) center center no-repeat;
            width: 65px;
            height: 65px;
            position: fixed;
            left: 30px;
            bottom: 45px;
            background-size: 100%;
            z-index: 100;
            position: absolute;
            left: 20px;
            bottom: 30px;
        }

    .app-wrapper .content-wrapper .side-nav-bar .nav {
        width: 100%;
    }

        .app-wrapper .content-wrapper .side-nav-bar .nav ul {
            font-size: 16px;
            list-style: none;
            margin: 0px;
            padding: 0px;
            margin: 10px 0px 10px 0px;
            width: 100%;
            font-family: 'Cairo', sans-serif;
        }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li {
                list-style: none;
                margin: 0px;
                padding: 0px;
                margin-top: 10px
            }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.active {
                    background: transparent linear-gradient(270deg, #FF7F3200 0%, #FF7F3215 50%, #FF7F322E 100%) 0% 0% no-repeat;
                }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li a {
                    color: #8895A8;
                    opacity: 1;
                    text-decoration: none;
                    display: flex;
                    height: 40px;
                    align-items: center;
                    padding-right: 45px;
                    border-right: 2px solid #112B50;
                }

                    .app-wrapper .content-wrapper .side-nav-bar .nav ul li a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.active a {
                        color: #FF7F32;
                        opacity: 1;
                        border-right: 2px solid #FF7F32;
                        font-weight: 700
                    }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.dashboard a {
                    background: url(images/nav-icon/dashboard-icon.svg)94% center no-repeat;
                }

                    .app-wrapper .content-wrapper .side-nav-bar .nav ul li.dashboard a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.dashboard.active a {
                        background: url(images/nav-icon/active-dashboard-icon.svg) 94% center no-repeat;
                    }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.packages a {
                    background: url(images/nav-icon/package-icon.svg) 94% center no-repeat;
                }

                    .app-wrapper .content-wrapper .side-nav-bar .nav ul li.packages a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.packages.active a {
                        background: url(images/nav-icon/active-package-icon.svg) 94% center no-repeat;
                    }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.shipment a {
                    background: url(images/nav-icon/shipment-icon.svg) 94% center no-repeat;
                }

                    .app-wrapper .content-wrapper .side-nav-bar .nav ul li.shipment a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.shipment.active a {
                        background: url(images/nav-icon/active-shipment-icon.svg) 94% center no-repeat;
                    }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.wallet a {
                    background: url(images/nav-icon/wallet-icon.svg) 94% center no-repeat;
                }

                    .app-wrapper .content-wrapper .side-nav-bar .nav ul li.wallet a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.wallet.active a {
                        background: url(images/nav-icon/active-wallet-icon.svg) 94% center no-repeat;
                    }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.reports a {
                    background: url(images/nav-icon/report-icon.svg) 94% center no-repeat;
                }

                    .app-wrapper .content-wrapper .side-nav-bar .nav ul li.reports a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.reports.active a {
                        background: url(images/nav-icon/active-report-icon.svg) 94% center no-repeat;
                    }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.account a {
                    background: url(images/nav-icon/account-icon.svg) 94% center no-repeat;
                }

                    .app-wrapper .content-wrapper .side-nav-bar .nav ul li.account a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.account.active a {
                        background: url(images/nav-icon/active-account-icon.svg) 94% center no-repeat;
                    }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.setting a {
                    background: url(images/nav-icon/setting-icon.svg) 94% center no-repeat;
                }

                    .app-wrapper .content-wrapper .side-nav-bar .nav ul li.setting a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.setting.active a {
                        background: url(images/nav-icon/active-setting-icon.svg) 94% center no-repeat;
                    }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.help a {
                    background: url(images/nav-icon/help-icon.svg) 94% center no-repeat;
                }

                    .app-wrapper .content-wrapper .side-nav-bar .nav ul li.help a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.help.active a {
                        background: url(images/nav-icon/active-help-icon.svg) 94% center no-repeat;
                    }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.address a {
                    background: url(images/nav-icon/addressbook-icon.svg) 94% center no-repeat;
                }

                    .app-wrapper .content-wrapper .side-nav-bar .nav ul li.address a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.address.active a {
                        background: url(images/nav-icon/active-addressbook-icon.svg) 94% center no-repeat;
                    }

    .app-wrapper .content-wrapper .side-nav-bar .logout-btn {
        background: url(images/nav-icon/logout-icon.svg) 94% center no-repeat;
        display: block;
        font-size: 16px;
        color: #fff;
        text-decoration: none;
        padding-right: 45px;
        position: absolute;
        width: 100%;
        left: 0px;
        bottom: 30px !important;
        text-align:right;
    }

    .app-wrapper .content-wrapper .shippment-filters {
        display: flex;
        align-items: center;
        position: absolute;
        left: 27px;
        top: 27px;
        z-index: 1;
    }

        .app-wrapper .content-wrapper .shippment-filters .sort {
            background: url(images/sort-icon.svg) left top no-repeat;
            width: 32px;
            height: 16px;
        }

        .app-wrapper .content-wrapper .shippment-filters .filter {
            background: url(images/filter-icon.svg) left top no-repeat;
            width: 21px;
            height: 21px;
        }

        .app-wrapper .content-wrapper .shippment-filters .seprator {
            height: 13px;
            width: 2px;
            background: #fff;
            opacity: 0.2;
            margin: 0px 16px;
        }

    .app-wrapper .content-wrapper .items-count {
        font-size: 16px;
        color: #FFC685;
        font-style: italic
    }

        .app-wrapper .content-wrapper .items-count span {
            font-weight: 700
        }

    .app-wrapper .content-wrapper .shipment-list {
        display: flex;
        margin-top: 20px;
        flex-wrap: wrap;
        position: relative;
    }

        .app-wrapper .content-wrapper .shipment-list .shippment-card {
            height: 156px;
            width: 378px;
            background: #112B50;
            margin: 0px 00px 30px 30px;
            -webkit-clip-path: polygon(7% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 15%);
            clip-path: polygon(7% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 15%);
            padding: 14px;
        }

            .app-wrapper .content-wrapper .shipment-list .shippment-card .status.inprocess {
                color: #68DBAF
            }

            .app-wrapper .content-wrapper .shipment-list .shippment-card .status.open {
                color: #ECB920
            }

            .app-wrapper .content-wrapper .shipment-list .shippment-card .status.cancel {
                color: #E83140
            }

            .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body {
                padding: 0px 0px 0px 0px;
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                color: #5F8CC9
            }

                .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .field {
                    line-height: normal;
                    padding-top: 22px;
                }

                .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .field-caption {
                    font-size: 10px;
                    text-transform: uppercase;
                    color: #5F8CC9
                }

                .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .field-value {
                    color: #fff;
                    font-size: 16px;
                }

                .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .shipment-weight {
                    font-size: 70px;
                    color: #8895A8;
                    font-weight: 700;
                    margin-top: -16px;
                }

                    .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .shipment-weight span {
                        font-size: 26px;
                    }

                .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .left-col {
                    text-align: right
                }

                .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .right-col {
                    text-align: left
                }

        .app-wrapper .content-wrapper .shipment-list .order-detail {
            padding-bottom: 0px;
        }

        .app-wrapper .content-wrapper .shipment-list .awd-download {
            color: #fff;
            font-size: 14px;
            text-decoration: none;
            margin-top: -2px;
            display: block;
        }

    .app-wrapper .content-wrapper .bundle-list {
        display: flex;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .app-wrapper .content-wrapper .bundle-card {
        width: 155px;
        height: 145px;
        margin: 0px 0px 30px 30px;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        padding: 4px 14px 14px 14px;
        line-height: normal;
        position: relative;
    }

.color-pattern1 {
    background: transparent linear-gradient(48deg, #173D76 0%, #6A8EC4 100%) 0% 0% no-repeat
}

.color-pattern2 {
    background: transparent linear-gradient(227deg, #68D1DB 0%, #34696E 100%) 0% 0% no-repeat
}

.color-pattern3 {
    background: transparent linear-gradient(180deg, #E58145 0%, #A4483B 100%) 0% 0% no-repeat
}

.color-pattern4 {
    background: transparent linear-gradient(227deg, #AA2F46 0%, #8B162C 100%) 0% 0% no-repeat
}

.color-pattern5 {
    background: transparent linear-gradient(227deg, #28b87a 0%, #31d47d 100%) 0% 0% no-repeat
}

.app-wrapper .content-wrapper .bundle-card .used {
    font-size: 13px;
    color: #fff;
    text-transform: uppercase
}

.app-wrapper .content-wrapper .bundle-card .weight {
    font-size: 80px;
    color: #fff;
    font-weight: 700;
    letter-spacing: -5.6px;
    line-height: 1.2;
}

    .app-wrapper .content-wrapper .bundle-card .weight span {
        font-size: 30px;
        letter-spacing: 0;
        padding-left: 8px;
    }

.app-wrapper .content-wrapper .bundle-card .waybillleft {
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #FFC685
}

.app-wrapper .content-wrapper .bundle-card .right-arrow-icon {
    background: url(images/round-right-arrow.svg) left top no-repeat;
    background-size: 100%;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.app-wrapper .content-wrapper .bundle-details {
    width: 77%;
    position: relative
}

    .app-wrapper .content-wrapper .bundle-details .back-btn {
        width: 26px;
        height: 26px;
        display: block
    }

        .app-wrapper .content-wrapper .bundle-details .back-btn span {
            background: url(images/orange-down-arrow.svg) 1px 14px no-repeat;
            display: block;
            background-size: 80%;
            background-size: 80%;
            height: 100%;
            width: 100%;
            transform: rotate(270deg)
        }

    .app-wrapper .content-wrapper .bundle-details .bundle-summery {
        height: 82px;
        background: transparent linear-gradient(84deg, #274C81 0%, #4C6D9F 100%) 0% 0% no-repeat;
        -webkit-clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 28%);
        clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 28%);
        margin-top: 20px;
        display: flex;
        padding: 0px 20px;
        justify-content: space-between;
        color: #fff;
        margin-bottom: 24px;
    }

        .app-wrapper .content-wrapper .bundle-details .bundle-summery .bundle-weight {
            font-weight: 700;
            font-size: 50px
        }

            .app-wrapper .content-wrapper .bundle-details .bundle-summery .bundle-weight .unit {
                font-size: 18px;
            }

            .app-wrapper .content-wrapper .bundle-details .bundle-summery .bundle-weight .bundle-used {
                font-weight: normal;
                font-size: 16px;
                text-transform: uppercase
            }

        .app-wrapper .content-wrapper .bundle-details .bundle-summery .bundle-message {
            font-size: 18px;
            padding-top: 33px;
        }

        .app-wrapper .content-wrapper .bundle-details .bundle-summery .bundle-waybill-left {
            font-size: 16px;
            font-weight: 700;
            font-style: italic;
            color: #FFC685;
            padding-top: 33px;
        }

    .app-wrapper .content-wrapper .bundle-details .shippment-filters {
        top: 1px;
        left: 5px;
    }

.app-wrapper .content-wrapper .package-details {
}

    .app-wrapper .content-wrapper .package-details .add-package-btn {
        width: 155px;
        height: 145px;
        background: #255293;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        border: none;
        position: relative;
        padding: 14px;
        margin-top: 32px;
        margin-bottom: 30px;
    }

        .app-wrapper .content-wrapper .package-details .add-package-btn .buy-icon {
            background: url(images/buy-icon.svg) left top no-repeat;
            width: 27px;
            height: 30px;
            position: absolute;
            right: 14px;
            top: 20px
        }

        .app-wrapper .content-wrapper .package-details .add-package-btn .icon {
            background: url(images/plus-icon.svg) left top no-repeat;
            width: 30px;
            height: 30px;
            background-size: 30px;
            position: absolute;
            left: 14px;
            bottom: 14px
        }

        .app-wrapper .content-wrapper .package-details .add-package-btn .txt {
            color: #fff;
            width: calc(100% - 83px);
            text-align: right;
        }

            .app-wrapper .content-wrapper .package-details .add-package-btn .txt .bold-txt {
                font-family: 'Cairo', sans-serif;
                display: block;
                font-size: 20px;
                line-height: 25px;
                margin-top: 20px;
            }

    .app-wrapper .content-wrapper .package-details .existing-packages {
        margin-top: 34px;
    }

        .app-wrapper .content-wrapper .package-details .existing-packages .bundle-list {
            padding-top: 12px;
        }

        .app-wrapper .content-wrapper .package-details .existing-packages + .existing-packages {
            margin-top: 10px;
        }

    .app-wrapper .content-wrapper .package-details .page-guidetxt {
        width: 750px;
    }

    .app-wrapper .content-wrapper .package-details .notification {
        width: 220px;
        background: #152F55;
        padding: 20px 0px;
        position: relative;
        display: flex;
        margin-bottom: 26px;
        height: auto;
        display: block;
        position: absolute;
        left: 0px;
        top: 78px;
    }

        .app-wrapper .content-wrapper .package-details .notification .heading {
            color: #fff;
            text-align: center;
            font-size: 20px;
            padding-bottom: 30px;
        }

        .app-wrapper .content-wrapper .package-details .notification .close-btn {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 14px;
            margin: 0;
            height: 14px;
            background: url(images/dialog-close.svg) left top no-repeat;
            border: none;
            z-index: 1;
            outline: none;
            background-size: 100%;
        }

        .app-wrapper .content-wrapper .package-details .notification .items {
            width: 80%;
            padding: 0px;
            margin: 0px auto;
            padding-bottom: 30px;
            position: relative;
            margin-bottom: 30px;
        }

            .app-wrapper .content-wrapper .package-details .notification .items:after {
                background: #1B365D;
                height: 3px;
                width: 72px;
                content: "";
                position: absolute;
                bottom: 0px;
                left: 50%;
                transform: translateX(-50%);
            }

            .app-wrapper .content-wrapper .package-details .notification .items:last-child:after {
                display: none;
            }

            .app-wrapper .content-wrapper .package-details .notification .items .icon {
                text-align: center
            }

            .app-wrapper .content-wrapper .package-details .notification .items .title {
                font-size: 18px;
                line-height: 30px;
                color: #fff;
                font-family: 'Cairo', sans-serif;
                text-align: center;
            }

            .app-wrapper .content-wrapper .package-details .notification .items .desc {
                color: #A7CCFD;
                font-size: 14px;
                font-style: italic;
                line-height: 22px;
                text-align: center;
            }

    .app-wrapper .content-wrapper .package-details .promotion {
        background: url(images/ar/promo-bg.png) left top no-repeat;
        width: 650px;
        height: 110px;
        padding: 10px 32px 10px 20px;
        display: flex;
        align-items: center;
        background-size: 100%;
    }

        .app-wrapper .content-wrapper .package-details .promotion .discount {
            color: #fff;
            margin-left: 32px;
        }

            .app-wrapper .content-wrapper .package-details .promotion .discount label {
                font-size: 20px;
                margin: 0px;
                padding: 0px;
            }

            .app-wrapper .content-wrapper .package-details .promotion .discount .discount-value {
                font-family: 'Cairo', sans-serif;
                font-size: 70px;
                line-height: 1;
                letter-spacing: 2.21px;
                margin-top: -11px;
                font-weight: 700
            }

                .app-wrapper .content-wrapper .package-details .promotion .discount .discount-value span {
                    font-size: 40px;
                }

        .app-wrapper .content-wrapper .package-details .promotion .promo-msg {
        }

            .app-wrapper .content-wrapper .package-details .promotion .promo-msg .badge {
                height: 22px;
                background: #036771;
                font-family: 'Cairo', sans-serif;
                letter-spacing: 1.4px;
                color: #7EE0EA;
                font-size: 14px;
                border-radius: 0px;
                margin-bottom: 8px;
                font-weight: 700
            }

            .app-wrapper .content-wrapper .package-details .promotion .promo-msg p {
                margin: 0px;
                padding: 0px;
                font-size: 18px;
                color: #fff;
                font-family: 'Cairo', sans-serif;
                line-height: 23px;
            }

    .app-wrapper .content-wrapper .package-details .packages-list {
    }

    .app-wrapper .content-wrapper .package-details .info-btn {
        background: url(images/info-icon.svg) left top no-repeat !important;
        height: 15px;
        width: 15px;
        margin: 9px 10px 0px 0 px;
    }
    /*04-12-2020*/
    .app-wrapper .content-wrapper .package-details .packages-steps {
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #fff;
        margin-bottom: 30px;
    }

        .app-wrapper .content-wrapper .package-details .packages-steps .step {
            display: flex;
            align-items: center;
            width: 170px;
            line-height: 1.2;
        }

            .app-wrapper .content-wrapper .package-details .packages-steps .step .step-number {
                font-size: 70px;
                opacity: 0.09;
                font-weight: 700;
                padding-left: 10px;
            }

        .app-wrapper .content-wrapper .package-details .packages-steps .step-sep {
            height: 2px;
            border-bottom: 2px dashed #2D4B76;
            width: 50px;
            margin: 0px 30px;
        }

    .app-wrapper .content-wrapper .package-details .bundle-card {
        width: 125px;
        height: 120px;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        padding: 4px 10px 14px 10px;
        margin-right: 10px;
        margin-left: 10px;
        height: auto;
        min-height: 120px;
    }

        .app-wrapper .content-wrapper .package-details .bundle-card .weight {
            letter-spacing: -4.34px;
            font-size: 62px
        }

        .app-wrapper .content-wrapper .package-details .bundle-card span {
            font-size: 22px;
        }

        .app-wrapper .content-wrapper .package-details .bundle-card .waybillleft {
            font-size: 13px;
            padding-top: 10px
        }

    .app-wrapper .content-wrapper .package-details .add-package-btn {
        width: 125px;
        height: 140px;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
    }

        .app-wrapper .content-wrapper .package-details .add-package-btn .buy-icon {
            width: 20px;
            height: 25px;
            background-size: 100%;
        }

        .app-wrapper .content-wrapper .package-details .add-package-btn .txt .bold-txt {
            font-size: 15px;
        }

        .app-wrapper .content-wrapper .package-details .add-package-btn .icon {
            width: 25px;
            height: 25px;
            background-size: 100%;
            left: 8px;
            bottom: 8px;
        }
/*04-12-2020 end*/
.ui-dialog.buy-bundal-dialog .ui-dialog-title {
    display: none;
}

.ui-dialog .ui-dialog-content .dialog-title {
    text-align: center;
    font-family: 'Cairo', sans-serif;
    font-size: 30px;
    line-height: normal;
    color: #FFC685;
    position: relative;
    line-height: 1;
    font-weight: 700
}

    .ui-dialog .ui-dialog-content .dialog-title .back-btn {
        width: 30px;
        height: 30px;
        display: block;
        outline: none;
        position: absolute;
        top: 7px;
        right: 10px;
    }

        .ui-dialog .ui-dialog-content .dialog-title .back-btn .icon {
            background: url(images/orange-down-arrow.svg) 0px 14px no-repeat;
            display: block;
            background-size: 96%;
            height: 100%;
            width: 100%;
            transform: rotate(270deg);
        }

.bundal-dialog-content {
    padding-top: 10px;
}

    .bundal-dialog-content h3 {
        font-size: 20px;
        color: #fff;
        font-family: 'Cairo', sans-serif;
        text-align: center;
        margin: 0px 0px 12px 0px;
        line-height: normal;
        font-weight: 700
    }

    .bundal-dialog-content p {
        padding: 0px;
        margin: 0px auto;
        line-height: 22px;
        font-size: 16px;
        text-align: center;
        font-family: 'Cairo', sans-serif;
        width: 54%;
        margin-bottom: 10px;
        color: #fff;
    }

    .bundal-dialog-content .bundle-list {
        display: flex;
        margin-top: 30px;
        flex-wrap: wrap;
        margin-top: 0px;
        margin-bottom: 20px;
    }

        .bundal-dialog-content .bundle-list .bundle-card {
            width: 350px;
            height: 160px;
            margin: 0px 0px 30px 22px;
            webkit-clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
            clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
            padding: 20px;
            line-height: normal;
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 0px;
            margin-top: 30px;
        }

            .bundal-dialog-content .bundle-list .bundle-card .left-col {
                width: 50%
            }

            .bundal-dialog-content .bundle-list .bundle-card .right-col {
                width: 50%;
                text-align: left
            }

            .bundal-dialog-content .bundle-list .bundle-card .bundle-weight {
            }

                .bundal-dialog-content .bundle-list .bundle-card .bundle-weight span {
                    font-size: 12px;
                    color: #fff;
                }

                .bundal-dialog-content .bundle-list .bundle-card .bundle-weight .weight {
                    font-weight: 700;
                    font-size: 87px;
                    line-height: normal;
                    margin-top: -15px;
                    letter-spacing: -6.09px;
                    display: flex;
                    align-items: baseline;
                    color: #fff;
                }

                    .bundal-dialog-content .bundle-list .bundle-card .bundle-weight .weight .unit {
                        font-weight: 700;
                        font-size: 30px;
                        letter-spacing: 0px;
                        padding-left: 6px;
                        color: #fff;
                    }

            .bundal-dialog-content .bundle-list .bundle-card .sr-no {
                font-size: 90px;
                opacity: 0.09;
                font-weight: 700;
                color: #fff;
            }

            .bundal-dialog-content .bundle-list .bundle-card .price {
                color: #FFC685;
                font-size: 15px;
            }

                .bundal-dialog-content .bundle-list .bundle-card .price .amount {
                    font-size: 20px;
                    font-weight: 700;
                    padding-left: 4px;
                }

                .bundal-dialog-content .bundle-list .bundle-card .price .currency {
                    font-size: 12px;
                    vertical-align: super;
                    font-weight: 400
                }

            .bundal-dialog-content .bundle-list .bundle-card .selection-btn {
                font-family: 'Cairo', sans-serif;
                font-size: 14px;
                line-height: normal;
                text-decoration: none;
                color: #fff;
                outline: none;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-top: 4px;
            }

                .bundal-dialog-content .bundle-list .bundle-card .selection-btn .icon {
                    width: 15px;
                    height: 15px;
                    background: url(images/round-right-arrow.svg) left top no-repeat;
                    background-size: 100%;
                    margin-right: 7px;
                    transform: rotate(90deg);
                    margin-top: 4px;
                }

        .bundal-dialog-content .bundle-list.selected-bundle {
            justify-content: center;
        }

            .bundal-dialog-content .bundle-list.selected-bundle .bundle-card {
                margin-left: 0px;
                margin-bottom: 0px;
            }

    .bundal-dialog-content .waybill-list {
        display: flex;
        margin-top: 20px;
        flex-wrap: wrap;
        margin-left: -18px;
        margin-bottom: 65px;
    }

    .bundal-dialog-content .waybill-card {
        width: 266px;
        height: 133px;
        margin: 0px 0px 18px 18px;
        padding: 8px;
        line-height: normal;
        position: relative;
        background: transparent linear-gradient(180deg, #6084BA 0%, #1C417A 100%) 0% 0% no-repeat;
    }

        .bundal-dialog-content .waybill-card .top-section {
            display: flex;
            justify-content: space-between;
            margin-top: -5px;
        }

            .bundal-dialog-content .waybill-card .top-section .waybill-count {
                font-weight: 700;
                font-size: 45px;
                color: #fff;
            }

                .bundal-dialog-content .waybill-card .top-section .waybill-count span {
                    font-weight: 400;
                    font-size: 17px;
                    padding-left: 8px
                }

                .bundal-dialog-content .waybill-card .top-section .waybill-count .unit-price {
                    color: #FFC685;
                    font-size: 14px;
                    font-weight: 700;
                    font-style: italic
                }

                    .bundal-dialog-content .waybill-card .top-section .waybill-count .unit-price .currency {
                        font-size: 10px;
                        vertical-align: super;
                        font-weight: 400;
                    }

            .bundal-dialog-content .waybill-card .top-section .waybill-option {
                font-weight: 700;
                font-size: 49px;
                color: #fff;
                opacity: 0.09;
            }

        .bundal-dialog-content .waybill-card .bottom-section {
            display: flex;
            justify-content: space-between;
            padding-top: 8px;
            align-items: center;
        }

            .bundal-dialog-content .waybill-card .bottom-section .total-amount {
                color: #fff;
                font-size: 21px;
                font-weight: 700
            }

                .bundal-dialog-content .waybill-card .bottom-section .total-amount .currency {
                    font-size: 12px;
                    vertical-align: super;
                    font-weight: 400;
                }

        .bundal-dialog-content .waybill-card .save-amount {
            color: #68DBAF;
            font-size: 21px;
            font-weight: 700;
            padding-top: 6px;
            text-align: right;
        }

            .bundal-dialog-content .waybill-card .save-amount .caption {
                font-size: 16px;
            }

            .bundal-dialog-content .waybill-card .save-amount .currency {
                font-size: 11px;
                vertical-align: super;
                font-weight: 400;
                font-size: 9px;
            }

        .bundal-dialog-content .waybill-card .bottom-section .btn-addqty {
            width: 120px;
            background: #26487B;
            border: 1px solid #1B365D;
            border-radius: 3px;
            height: 35px;
            padding: 0px;
            font-family: 'Cairo', sans-serif;
            font-weight: 600;
            color: #fff;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
        }

            .bundal-dialog-content .waybill-card .bottom-section .btn-addqty .icon {
                background: url(images/btn-plus-icon.svg) left top no-repeat;
                width: 12px;
                height: 12px;
                background-size: 100%;
                margin-left: 12px;
                outline: none;
                margin-top: 3px;
            }

button:focus {
    outline: none;
}

.bundal-dialog-content .waybill-card .bottom-section .edit-cart {
    width: 120px;
    background: #26487B;
    border: 1px solid #1B365D;
    border-radius: 3px;
    height: 35px;
    padding: 0px;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
}

    .bundal-dialog-content .waybill-card .bottom-section .edit-cart .qty-decrease {
        background: #26487B;
        border-radius: 3px 0px 0px 3px;
        width: 38px;
        height: 100%;
        color: #fff;
        display: block;
        font-size: 24px;
        text-align: center;
        line-height: 26px;
        outline: none;
        text-decoration: none;
    }

    .bundal-dialog-content .waybill-card .bottom-section .edit-cart .qty-increase {
        background: #26487B;
        border-radius: 0px 3px 3px 0px;
        width: 38px;
        height: 100%;
        color: #fff;
        display: block;
        font-size: 24px;
        text-align: center;
        line-height: 26px;
        outline: none;
        text-decoration: none;
    }

    .bundal-dialog-content .waybill-card .bottom-section .edit-cart .qty-txt {
        background: #2F548C;
        height: 100%;
        width: 44px;
        text-align: center;
        border: none;
        outline: none;
        font-size: 18px;
        color: #fff
    }

.bundal-dialog-content .action-bar {
    height: 70px;
    background: #081B36;
    box-shadow: 0px -10px 15px #05132780;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .bundal-dialog-content .action-bar .btn-primary {
        background: #1B365E !important;
        height: 45px;
        width: 214px;
        border: none;
        text-align: center;
        padding: 0;
        color: #fff;
        font-size: 18px;
        font-family: 'Cairo', sans-serif;
        font-weight: 700;
        border-radius: 0px;
        webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        border-radius: 0px;
        line-height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .bundal-dialog-content .action-bar .btn-primary .icon {
            width: 16px;
            height: 16px;
            background: url(images/ar/round-right-arrow.svg)left top no-repeat;
            background-size: 100%;
            margin-right: 8px;
            margin-top: 5px;
        }

    .bundal-dialog-content .action-bar .selection-total {
        padding-left: 30px;
    }

        .bundal-dialog-content .action-bar .selection-total .package-count {
            font-size: 14px;
            color: #FFC685;
            font-weight: 300;
            margin-bottom: -3px;
        }

            .bundal-dialog-content .action-bar .selection-total .package-count label {
                margin-bottom: 0px;
            }

        .bundal-dialog-content .action-bar .selection-total .package-amount {
            font-weight: 700;
            font-size: 25px;
            color: #FFC685
        }

            .bundal-dialog-content .action-bar .selection-total .package-amount label {
                margin-bottom: 0px;
            }

            .bundal-dialog-content .action-bar .selection-total .package-amount .currency {
                font-size: 14px;
                vertical-align: super;
                font-weight: 400;
            }

.buy-bundal-dialog.ui-dialog .ui-dialog-content {
    overflow: hidden;
}

.cart-dialog-content {
    display: flex;
    padding: 40px 15px 15px 15px;
    flex-wrap: wrap;
}

    .cart-dialog-content .left-col {
        width: 50%;
        padding-left: 20px;
    }

        .cart-dialog-content .left-col .slimScrollDiv {
            margin-bottom: 30px;
        }

    .cart-dialog-content .right-col {
        width: 50%;
        padding-right: 20px;
    }

    .cart-dialog-content .cart-items {
        color: #fff;
    }

        .cart-dialog-content .cart-items .cart-item {
            width: 332px;
            height: 98px;
            background: transparent linear-gradient(74deg, #173D76 0%, #6A8EC4 100%) 0% 0% no-repeat;
            webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 18%);
            clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 18%);
            display: flex;
            align-items: center;
            padding: 10px 22px;
            justify-content: space-between;
            margin-bottom: 30px;
        }

            .cart-dialog-content .cart-items .cart-item .item-details {
            }

                .cart-dialog-content .cart-items .cart-item .item-details .small-txt {
                    text-transform: uppercase;
                    font-size: 10px;
                }

                .cart-dialog-content .cart-items .cart-item .item-details .waybill-count {
                    font-size: 32px;
                    color: #FFC685;
                    margin-top: -5px;
                    display: flex;
                    align-items: baseline;
                }

                    .cart-dialog-content .cart-items .cart-item .item-details .waybill-count span {
                        font-size: 18px;
                        padding-left: 8px;
                    }

                .cart-dialog-content .cart-items .cart-item .item-details .price {
                    font-size: 16px;
                    font-weight: 700;
                    margin-top: -5px;
                }

                    .cart-dialog-content .cart-items .cart-item .item-details .price .currency {
                        font-size: 10px;
                        vertical-align: super;
                        font-weight: 400;
                    }

            .cart-dialog-content .cart-items .cart-item .edit-cart {
                width: 133px;
                background: #26487B;
                border: 1px solid #1B365D;
                border-radius: 3px;
                height: 34px;
                padding: 0px;
                font-family: 'Cairo', sans-serif;
                font-weight: 600;
                color: #fff;
                font-size: 12px;
                display: flex;
                align-items: center;
            }

                .cart-dialog-content .cart-items .cart-item .edit-cart .qty-decrease {
                    background: #26487B;
                    border-radius: 3px 0px 0px 3px;
                    width: 38px;
                    height: 100%;
                    color: #fff;
                    display: block;
                    font-size: 24px;
                    text-align: center;
                    line-height: 23px;
                    outline: none;
                    text-decoration: none;
                }

                .cart-dialog-content .cart-items .cart-item .edit-cart .qty-increase {
                    background: #26487B;
                    border-radius: 0px 3px 3px 0px;
                    width: 38px;
                    height: 100%;
                    color: #fff;
                    display: block;
                    font-size: 24px;
                    text-align: center;
                    line-height: 23px;
                    outline: none;
                    text-decoration: none;
                }

                .cart-dialog-content .cart-items .cart-item .edit-cart .qty-txt {
                    background: #6084BA;
                    height: 100%;
                    width: 57px;
                    text-align: center;
                    border: none;
                    outline: none;
                    font-size: 18px;
                    color: #fff;
                }

    .cart-dialog-content .sub-heading {
        font-size: 20px;
        color: #fff;
        font-family: 'Cairo', sans-serif;
        line-height: 1;
        font-weight: 700
    }

    .cart-dialog-content .ordersummery {
        font-size: 16px;
        margin-top: 16px;
        color: #fff;
    }

        .cart-dialog-content .ordersummery td {
            padding: 6px 0px;
        }

            .cart-dialog-content .ordersummery td.value {
                text-align: right
            }

                .cart-dialog-content .ordersummery td.value label {
                    margin-bottom: 0px;
                }

        .cart-dialog-content .ordersummery .currency {
            font-size: 10px;
            vertical-align: super;
            font-weight: 400;
        }

        .cart-dialog-content .ordersummery .cart-discount td {
            color: #68DBAF
        }

        .cart-dialog-content .ordersummery .cart-total td {
            font-size: 20px;
            font-weight: 700;
            color: #FFC685
        }

    .cart-dialog-content .cart-bottom {
        display: flex;
        width: 100%;
        margin-top: 14px;
    }

    .cart-dialog-content .action-bar {
        align-items: center;
        justify-content: center;
    }

    .cart-dialog-content .discount-widget {
        padding-top: 22px;
        width: 100%;
        display: flex;
    }

        .cart-dialog-content .discount-widget .form-control {
            height: 50px;
            width: 280px;
            border: none;
            text-indent: 42px;
            font-family: 'Cairo', sans-serif;
            font-size: 16px;
            color: #fff;
            padding: 0px;
            background: #112B50 url(images/couponcode-icon.svg)95% center no-repeat;
            border-radius: 0px;
            clip-path: none;
        }

            .cart-dialog-content .discount-widget .form-control::placeholder {
                color: #5F8CC9;
                font-family: 'Cairo', sans-serif;
                ;
                opacity: 0.59;
            }

        .cart-dialog-content .discount-widget .promo-btn {
            width: 120px;
            height: 50px;
            background: #2F4F7E;
            border-radius: 0px;
            padding: 0px;
            font-size: 20px;
            color: #fff;
            font-family: 'Cairo', sans-serif;
            font-weight: 700
        }

    .cart-dialog-content .addmore-btn {
        height: 50px;
        width: 100%;
        border-radius: 0px;
        border: 1px dashed #496A9D;
        background: none;
        color: #5F8CC9;
        font-size: 16px;
        font-family: 'Cairo', sans-serif;
        padding: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .cart-dialog-content .addmore-btn .icon {
            background: url(images/Plus.svg) left top no-repeat !important;
            width: 20px;
            height: 20px;
            background-size: 20px;
            margin-right: 10px;
        }

    .cart-dialog-content .btn-primary {
        background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
        height: 50px;
        width: 334px;
        border: none;
        text-align: left;
        padding: 0px 15px 0px 0px;
        color: #fff;
        font-size: 20px;
        font-family: 'Cairo', sans-serif;
        border-radius: 0px;
        webkit-clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 23%);
        clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 23%);
        border-radius: 0px;
        line-height: 44px;
        display: flex;
        margin-top: 34px;
        position: relative;
        font-weight: 700
    }

        .cart-dialog-content .btn-primary .icon {
            background: url("images/ar/round-right-arrow.svg") left top no-repeat !important;
            width: 23px;
            height: 23px;
            position: absolute;
            left: 12px;
            top: 16px;
        }

.checkout-dialog .ui-dialog-titlebar {
    display: none;
}

.checkout-dialog-content {
    padding-top: 36px;
    color: #fff;
}

    .checkout-dialog-content .wallet-notification {
        font-size: 20px;
        font-family: 'Cairo', sans-serif;
        line-height: 1;
        text-align: center;
        font-weight: 700
    }

    .checkout-dialog-content .amount-summery {
        height: 70px;
        width: 640px;
        background: transparent linear-gradient(84deg, #173D76 0%, #6A8EC4 100%) 0% 0% no-repeat;
        margin: 18px auto 24px auto;
        webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        display: flex;
        align-items: center;
        padding: 14px;
        font-family: 'Cairo', sans-serif;
    }

        .checkout-dialog-content .amount-summery .wallet-blance {
            font-size: 16px;
            background: url(images/wallet-icon.svg) right center no-repeat;
            padding-right: 32px;
            width: 50%;
            display: flex;
            align-items: center;
            background-size: 20px;
            margin-left: 16px;
            font-size: 14px;
        }

            .checkout-dialog-content .amount-summery .wallet-blance .amount {
                font-size: 30px;
                font-weight: 700;
                padding-right: 24px;
                font-size: 24px;
            }

                .checkout-dialog-content .amount-summery .wallet-blance .amount .currency {
                    font-size: 16px;
                    vertical-align: super;
                    font-weight: 400;
                    padding-left: 2px;
                    font-size: 12px;
                }

        .checkout-dialog-content .amount-summery .required-amount {
            width: 50%;
            font-size: 15px;
            color: #FFC685;
            display: flex;
            align-items: center;
            padding-right: 50px;
            position: relative;
            background: url(images/amount-icon.svg) 96% center no-repeat;
            background-size: 21px;
            font-size: 14px;
        }

            .checkout-dialog-content .amount-summery .required-amount:before {
                content: "";
                position: absolute;
                right: 0px;
                width: 1px;
                height: 34px;
                background: #6A8EC4
            }

            .checkout-dialog-content .amount-summery .required-amount .amount {
                font-size: 30px;
                font-weight: 700;
                padding-right: 24px;
                font-size: 24px;
            }

                .checkout-dialog-content .amount-summery .required-amount .amount .currency {
                    font-size: 15px;
                    vertical-align: super;
                    font-weight: 400;
                    padding-left: 2px;
                    font-size: 12px;
                }

    .checkout-dialog-content .saved-cards {
        margin: 0px auto;
        width: 640px;
    }

    .checkout-dialog-content .subheading {
        font-size: 18px;
        font-family: 'Cairo', sans-serif;
        line-height: 1;
        font-weight: 700
    }
    /*.checkout-dialog-content .saved-cards .card-list{display:flex;padding-top:18px;justify-content: space-between;}
.checkout-dialog-content .saved-cards .card-list .card{background:#112B50;border-radius:4px;width:300px;height:40px;border:none;padding:10px;}
.checkout-dialog-content .saved-cards .card-list .card .card-header{display:flex;padding:0px;border-radius:0px;border:none;align-items: center;justify-content: space-between;}
.checkout-dialog-content .saved-cards .card-list .card .card-header .card-details{display: flex;align-items: center;}
.checkout-dialog-content .saved-cards .card-list .card .card-header .card-logo {margin-right:10px;}
.checkout-dialog-content .saved-cards .card-list .card .card-header .card-logo img{width:35px;}
.checkout-dialog-content .saved-cards .card-list .card .card-header .card-number {font-size:10px;font-weight:600;color:#fff}
.checkout-dialog-content .saved-cards .card-list .card .card-header .radio-selection{width:18px;height:18px;border: 2px solid #fff;border-radius:50%;}
.checkout-dialog-content .saved-cards .card-list .card .card-footer{padding:8px 0px 0px 0px;margin-top:8px;border-top: 2px solid #1B365D;border-radius: 0px;display: flex;justify-content: space-between;opacity:0;visibility: hidden;} 
.checkout-dialog-content .saved-cards .card-list .card .card-footer .card-cvv{background: #0D203C;border-radius: 4px;width: 76px;height: 30px;padding-right: 15px;}
.checkout-dialog-content .saved-cards .card-list .card .card-footer .card-cvv::placeholder {color:#5F8CC9; font-family:'Cairo', sans-serif;opacity: 0.59;font-size:12px;}
.checkout-dialog-content .saved-cards .card-list .card .card-footer .card-cvv .form-control{padding: 0px;border: none;border-radius: 0px;background:none;height: 20px;margin-top: 5px;width: 60px;color:#fff;border-right: 2px solid #FF7F32;font-family:'Cairo', sans-serif;font-size:12px;outline: none;text-indent: 10px;box-shadow: none;}
.checkout-dialog-content .saved-cards .card-list .card .card-footer .btn-primary{background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat!important;height:30px;width: 188px;border: none;text-align: left;padding: 0px 10px 0px 0px;color: #fff;font-size: 13px;font-family:'Cairo', sans-serif;border-radius: 0px;webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);border-radius: 0px;line-height: 28px;display: flex;margin-top:0px;position:relative;font-weight:700}
.checkout-dialog-content .saved-cards .card-list .card .card-footer .btn-primary .icon{background:url(images/ar/round-right-arrow.svg) 95% center no-repeat!important;background-size:16px!important;position:absolute;left:12px;top:8px;width: 16px;height: 16px;}
.checkout-dialog-content .saved-cards .card-list .card.selected{height:auto;}
.checkout-dialog-content .saved-cards .card-list .card.selected .card-footer{opacity:1;visibility: visible;}
.checkout-dialog-content .saved-cards .card-list .card.selected .card-header .radio-selection{background:url(images/green-check-icon.svg) left top no-repeat;border: none;border-radius: 0;}*/
    .checkout-dialog-content .payment-options {
        width: 640px;
        margin: 26px auto 0px auto
    }

        .checkout-dialog-content .payment-options ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 18px;
        }

            .checkout-dialog-content .payment-options ul li {
                width: 300px;
                border-bottom: 2px solid #112B50;
                margin-bottom: 10px;
                border: none;
            }

                .checkout-dialog-content .payment-options ul li.seprator {
                    margin: 0px 10px;
                    width: 1px;
                    background: #2F4F7E;
                    height: 26px;
                }

                .checkout-dialog-content .payment-options ul li.no-border {
                    border-bottom: none
                }

                .checkout-dialog-content .payment-options ul li label {
                    margin: 0px;
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                    font-family: 'Cairo', sans-serif;
                    padding-bottom: 10px;
                    position: relative;
                    cursor: pointer
                }

                    .checkout-dialog-content .payment-options ul li label img {
                        margin-left: 10px;
                    }

                    .checkout-dialog-content .payment-options ul li label input[type="radio"] {
                        opacity: 0;
                        position: absolute
                    }

                    .checkout-dialog-content .payment-options ul li label .radiobtn {
                        width: 18px;
                        height: 18px;
                        border: 2px solid #FFFFFF;
                        opacity: 0.43;
                        border-radius: 50%;
                        position: absolute;
                        left: 10px;
                    }

                .checkout-dialog-content .payment-options ul li .checkcontainer input:checked ~ .radiobtn {
                    border: none;
                    border-radius: 0px;
                    background: url(images/green-check-icon.svg) left top no-repeat;
                    opacity: 1
                }

                .checkout-dialog-content .payment-options ul li .card {
                    background: #112B50;
                    border-radius: 4px;
                    width: 300px;
                    height: 40px;
                    border: none;
                    padding: 10px;
                    height: auto;
                    display: none;
                }

                .checkout-dialog-content .payment-options ul li.selected .card {
                    display: block
                }

                .checkout-dialog-content .payment-options ul li .card .card-header {
                    display: flex;
                    padding: 0px;
                    border-radius: 0px;
                    border: none;
                    align-items: center;
                    justify-content: space-between;
                }

                    .checkout-dialog-content .payment-options ul li .card .card-header .card-details {
                        display: flex;
                        align-items: center;
                    }

                    .checkout-dialog-content .payment-options ul li .card .card-header .card-logo {
                        margin-right: 10px;
                    }

                        .checkout-dialog-content .payment-options ul li .card .card-header .card-logo img {
                            width: 35px;
                        }

                    .checkout-dialog-content .payment-options ul li .card .card-header .card-number {
                        font-size: 10px;
                        font-weight: 600;
                        color: #fff
                    }

                    .checkout-dialog-content .payment-options ul li .card .card-header .radio-selection {
                        width: 18px;
                        height: 18px;
                        border: 2px solid #fff;
                        border-radius: 50%;
                    }

                .checkout-dialog-content .payment-options ul li .card .card-footer {
                    padding: 8px 0px 0px 0px;
                    margin-top: 8px;
                    border-top: 2px solid #1B365D;
                    border-radius: 0px;
                    display: flex;
                    justify-content: space-between;
                }

                    .checkout-dialog-content .payment-options ul li .card .card-footer .card-cvv {
                        background: #0D203C;
                        border-radius: 4px;
                        width: 76px;
                        height: 30px;
                        padding-right: 15px;
                    }

                        .checkout-dialog-content .payment-options ul li .card .card-footer .card-cvv::placeholder {
                            color: #5F8CC9;
                            font-family: 'Cairo', sans-serif;
                            opacity: 0.59;
                            font-size: 12px;
                        }

                        .checkout-dialog-content .payment-options ul li .card .card-footer .card-cvv .form-control {
                            padding: 0px;
                            border: none;
                            border-radius: 0px;
                            background: none;
                            height: 20px;
                            margin-top: 5px;
                            width: 60px;
                            color: #fff;
                            border-right: 2px solid #FF7F32;
                            font-family: 'Cairo', sans-serif;
                            font-size: 12px;
                            outline: none;
                            text-indent: 10px;
                            box-shadow: none;
                        }

                    .checkout-dialog-content .payment-options ul li .card .card-footer .btn-primary {
                        background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
                        height: 30px;
                        width: 188px;
                        border: none;
                        text-align: left;
                        padding: 0px 10px 0px 0px;
                        color: #fff;
                        font-size: 13px;
                        font-family: 'Cairo', sans-serif;
                        border-radius: 0px;
                        webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
                        clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
                        border-radius: 0px;
                        line-height: 28px;
                        display: flex;
                        margin-top: 0px;
                        position: relative;
                        font-weight: 700
                    }

                        .checkout-dialog-content .payment-options ul li .card .card-footer .btn-primary .icon {
                            background: url(images/ar/round-right-arrow.svg) 95% center no-repeat !important;
                            background-size: 16px !important;
                            position: absolute;
                            left: 12px;
                            top: 8px;
                            width: 16px;
                            height: 16px;
                        }

                .checkout-dialog-content .payment-options ul li .card.selected {
                    height: auto;
                }

                    .checkout-dialog-content .payment-options ul li .card.selected .card-footer {
                        opacity: 1;
                        visibility: visible;
                    }

.checkout-dialog .wallet-icon {
    background: url(images/wallet2-icon.svg) left top no-repeat;
    width: 21px;
    height: 21px;
    background-size: 21px;
    margin-top: 8px;
    margin-left: 10px;
}

.ui-dialog.checkout-dialog .ui-dialog-content .dialog-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-dialog-content .btn-primary {
    background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
    height: 50px;
    width: 380px;
    border: none;
    text-align: left;
    padding: 0px 15px 0px 0px;
    color: #fff;
    font-size: 20px;
    font-family: 'Cairo', sans-serif;
    border-radius: 0px;
    webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
    clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
    border-radius: 0px;
    line-height: 44px;
    display: flex;
    margin: 20px auto 10px auto;
    position: relative;
    font-weight: 700
}

    .checkout-dialog-content .btn-primary .icon {
        background: url("images/ar/round-right-arrow.svg") left top no-repeat !important;
        width: 23px;
        height: 23px;
        position: absolute;
        left: 12px;
        top: 16px;
    }

.checkout-dialog-content .wallet-recharge {
    text-align: center;
    margin-bottom: 20px;
}

    .checkout-dialog-content .wallet-recharge .subheading {
        font-size: 20px;
        color: #FFC685;
        font-family: 'Cairo', sans-serif;
        font-weight: 700;
    }

    .checkout-dialog-content .wallet-recharge .recharge-form {
        width: 310px;
        margin: 0px auto;
        display: flex;
        padding-top: 16px;
    }

        .checkout-dialog-content .wallet-recharge .recharge-form .form-control {
            width: 190px;
            clip-path: none;
            background: #112B50 url(images/amount-blue-icon.svg) 98% center no-repeat;
            background-size: 21px;
            padding-right: 0px;
            padding-right: 30px;
            box-shadow: none !important;
        }

        .checkout-dialog-content .wallet-recharge .recharge-form .btn-primary {
            margin: 0px;
            width: 120px;
            background: #2F4F7E !important;
            font-size: 20px;
            clip-path: none;
        }

.ui-dialog .ui-dialog-title {
    display: none;
}

.address-book {
}

    .address-book p {
        font-family: 'Cairo', sans-serif;
        font-size: 16px;
        color: #fff;
        line-height: normal;
        width: 48%;
        margin: 0px auto;
        text-align: center;
    }

    .address-book .address-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        width: 800px;
        width: 970px;
    }

        .address-book .address-topbar .search {
            width: 584px;
            height: 40px;
            background: #112B50;
            position: relative;
            width: 84%;
            width: 62%;
            width: 58%;
        }

            .address-book .address-topbar .search .form-control {
                width: calc(100% - 46px);
                height: 40px;
                padding: 0px;
                border-radius: 0px;
                color: #fff;
                background: none;
                padding: 0px 10px;
                border: none;
                font-size: 16px;
                font-family: 'Cairo', sans-serif;
                outline: none;
                box-shadow: none !important;
                line-height: 40px;
            }

                .address-book .address-topbar .search .form-control::placeholder {
                    color: #5F8CC9;
                    ;
                    opacity: 0.59;
                }

            .address-book .address-topbar .search .search-btn {
                height: 40px;
                width: 40px;
                background: url(images/Search.svg) center center no-repeat;
                padding: 0px;
                border: none;
                position: absolute;
                top: 0px;
                left: 0px;
            }

        .address-book .address-topbar .filters {
            display: flex;
            align-items: center;
            margin-left: 20px;
            margin-right: 20px;
        }

            .address-book .address-topbar .filters .sort {
                background: url(images/sort-icon.svg) left top no-repeat;
                width: 32px;
                height: 16px;
            }

            .address-book .address-topbar .filters .seprator {
                height: 13px;
                width: 2px;
                background: #fff;
                opacity: 0.2;
                margin: 0px 18px;
            }

            .address-book .address-topbar .filters .filter {
                background: url(images/filter-icon.svg) left top no-repeat;
                width: 21px;
                height: 21px;
            }

        .address-book .address-topbar .btn-primary {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 50px;
            width: 230px;
            border: none;
            text-align: left;
            padding: 0px 15px 0px 0px;
            color: #fff;
            font-size: 20px;
            font-family: 'Cairo', sans-serif;
            border-radius: 0px;
            font-weight: 700;
            -webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            border-radius: 0px;
            line-height: 50px;
            display: flex;
            margin: 10px 0px;
            position: relative;
        }

            .address-book .address-topbar .btn-primary .icon {
                background: url("images/ar/round-right-arrow.svg") left top no-repeat !important;
                width: 23px;
                height: 23px;
                position: absolute;
                left: 12px;
                top: 16px;
            }
        /*07-01-2021*/
        .address-book .address-topbar .filters {
            position: relative
        }

            .address-book .address-topbar .filters .filter-dropdown {
                width: 200px;
                min-height: 100px;
                padding: 10px;
                background: #1b365e;
                -webkit-box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);
                -moz-box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);
                box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);
                position: absolute;
                top: 42px;
                z-index: 200;
                display: none;
            }

                .address-book .address-topbar .filters .filter-dropdown .heading {
                    font-size: 16px;
                    color: #FFC685;
                    position: relative;
                    padding-bottom: 6px;
                }

                .address-book .address-topbar .filters .filter-dropdown .clear-btn {
                    color: #e34647;
                    text-decoration: none !important;
                    float: left;
                }

                .address-book .address-topbar .filters .filter-dropdown ul {
                    margin: 0px;
                    padding: 0px;
                }

                .address-book .address-topbar .filters .filter-dropdown li {
                    list-style: none;
                    margin: 0px;
                    padding: 0px;
                    color: #5F8CC9;
                    font-size: 16px;
                    margin-bottom: 4px;
                    position: relative;
                }

                    .address-book .address-topbar .filters .filter-dropdown li a {
                        color: #5F8CC9;
                        display: block;
                        padding: 4px 0px;
                        text-decoration: none !important
                    }

                    .address-book .address-topbar .filters .filter-dropdown li .sep {
                        padding: 0px 4px
                    }

                    .address-book .address-topbar .filters .filter-dropdown li.selected {
                        background: url(images/Check.svg) left center no-repeat;
                        background-size: 20px;
                    }

.ui-dialog.address-book .address-dialog-content .address-topbar .filters .filter-dropdown {
    left: 0px;
}
/*07-01-2021 end*/
.address-book .address-title {
    font-size: 12px;
    color: #FF7F32;
    letter-spacing: 1.2px;
    text-transform: uppercase
}

.address-book .address-list {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
    margin-left: 0;
    padding-bottom: 4px;
}

    .address-book .address-list .address-card {
        height: auto;
        min-height: 70px;
        width: 970px;
        background: #112B50;
        margin: 0px 0px 20px 0px;
        display: flex;
        align-items: center;
        -webkit-clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 28%);
        clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 28%);
        padding: 10px 20px;
        font-family: 'Cairo', sans-serif;
        position: relative;
        color: #fff;
        font-size: 15px;
    }

        .address-book .address-list .address-card .caption {
            font-size: 10px;
            color: #A7CCFD;
            letter-spacing: 1px;
            margin-bottom: 0px
        }

        .address-book .address-list .address-card .name {
            width: 225px;
            padding-left: 20px;
            background: url(images/address-book/profile-icon.svg) right 8px no-repeat;
            background-size: 14px;
            padding-right: 24px;
        }

        .address-book .address-list .address-card .address {
            width: 270px;
            padding-left: 26px;
            background: url(images/address-book/address-icon.svg) right 8px no-repeat;
            background-size: 15px;
            padding-right: 24px;
        }

        .address-book .address-list .address-card .store-address {
            width: 260px;
            padding-left: 34px;
            background: url(images/address-book/store-icon.svg) right 8px no-repeat;
            background-size: 15px;
            padding-right: 24px;
            min-height: 23px;
        }

        .address-book .address-list .address-card .phone {
            width: 150px;
            padding-left: 20px;
            background: url(images/address-book/phone-icon.svg) right 8px no-repeat;
            background-size: 15px;
            padding-right: 24px;
        }

        .address-book .address-list .address-card .edit-icon {
            width: 18px;
            height: 19px;
            background: url(images/address-book/edit-icon.svg) right top no-repeat;
            background-size: 100%;
            position: absolute;
            left: 26px;
            transform: rotate(260deg);
        }

        .address-book .address-list .address-card .add-count {
            font-size: 35px;
            opacity: 0.24;
            font-weight: 700;
            color: #688CC4;
            padding-left: 20px;
            width: 45px;
            width: 87px;
            text-align: right
        }

.address-book-dialog .ui-dialog-content .dialog-title {
    font-size: 25px;
    color: #fff;
}

.address-book-dialog .ui-dialog-content {
    padding: 24px 36px;
    color: #fff;
}

.address-book-dialog .address-dialog-content {
    padding-top: 20px;
    padding-bottom: 70px;
}

    .address-book-dialog .address-dialog-content .action-bar {
        height: 88px;
        width: 100%;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        position: absolute;
        left: 0px;
        bottom: 0px;
        z-index: 100;
    }

        .address-book-dialog .address-dialog-content .action-bar .btn-primary {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 50px;
            width: 480px;
            border: none;
            text-align: left;
            padding: 0px 15px 0px 0px;
            color: #fff;
            font-size: 20px;
            font-family: 'Cairo', sans-serif;
            border-radius: 0px;
            webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            border-radius: 0px;
            line-height: 44px;
            display: flex;
            margin: 20px auto 10px auto;
            position: relative;
            font-weight: 700
        }

            .address-book-dialog .address-dialog-content .action-bar .btn-primary .icon {
                background: url("images/ar/round-right-arrow.svg") left top no-repeat !important;
                width: 23px;
                height: 23px;
                position: absolute;
                left: 12px;
                top: 16px;
            }

    .address-book-dialog .address-dialog-content .group-title {
        font-family: 'Cairo', sans-serif;
        font-size: 22px;
        color: #FFC685;
        font-weight: 700
    }

    .address-book-dialog .address-dialog-content .form-group .col-sm-6 .form-control {
        -webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
        clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    }

    .address-book-dialog .address-dialog-content .form-group {
        margin-bottom: 22px;
        position: relative;
    }

        .address-book-dialog .address-dialog-content .form-group .custom-file {
            height: 80px;
        }

            .address-book-dialog .address-dialog-content .form-group .custom-file .custom-file-label {
                background: none;
                border: none;
                padding: 0px;
                height: 86px;
                border: 1px dashed #fff;
                text-transform: none;
                padding: 42px 30px 0px 30px;
                text-align: center;
                background: url(images/Plus.svg) center 14px no-repeat;
                border-radius: 0px;
                line-height: normal
            }

        .address-book-dialog .address-dialog-content .form-group .custom-file-input:lang(en) ~ .custom-file-label::after {
            display: none
        }

    .address-book-dialog .address-dialog-content .address-types .btn {
        background: #112B50;
        height: 50px;
        width: 100%;
        border: none;
        text-align: left;
        padding: 0px 15px 0px 0px;
        color: #fff;
        font-size: 20px;
        font-family: 'Cairo', sans-serif;
        border-radius: 0px;
        -webkit-clip-path: polygon(7% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
        clip-path: polygon(7% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
        border-radius: 0px;
        line-height: 44px;
        display: flex;
        position: relative;
    }

        .address-book-dialog .address-dialog-content .address-types .btn.selected {
            background: #007884;
        }

        .address-book-dialog .address-dialog-content .address-types .btn .icon {
            background: url(images/address-book/location.svg) left top no-repeat;
            width: 21px;
            height: 27px;
            position: absolute;
            left: 12px;
            top: 11px;
            background-size: 100%;
        }

    .address-book-dialog .address-dialog-content .address-types .btn-whatsapp .icon {
        background: url(images/address-book/whatsapp.svg) left top no-repeat;
        width: 28px;
        height: 28px;
    }

    .address-book-dialog .address-dialog-content .address-types .btn-gmap .icon {
        background: url(images/address-book/map-pin.svg) left top no-repeat;
        width: 20px;
        height: 25px;
    }

    .address-book-dialog .address-dialog-content .link-type.whatsapp {
    }

        .address-book-dialog .address-dialog-content .link-type.whatsapp .btn-primary {
            min-width: 100px;
            -webkit-clip-path: polygon(14% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(14% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        }

        .address-book-dialog .address-dialog-content .link-type.whatsapp .form-control {
            width: 380px;
            webkit-clip-path: none;
            clip-path: none;
            background: #2D4D79 url(images/address-book/whatsapp.svg) 3% center no-repeat;
            background-size: 22px;
        }

    .address-book-dialog .address-dialog-content .centre-search .form-control {
        -webkit-clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
    }

        .address-book-dialog .address-dialog-content .centre-search .form-control.search {
            background: #2D4D79 url(images/address-book/search-icon.svg) 2% center no-repeat;
        }

    .address-book-dialog .address-dialog-content .centre-search .map-link {
        font-size: 14px;
        color: #FFC685;
        letter-spacing: 1.4px;
        background: url(images/address-book/map-link-icon.svg) right top no-repeat;
        padding-right: 28px;
        text-decoration: none;
        position: absolute;
        top: 0px;
        left: 18px;
    }

    .address-book-dialog .address-dialog-content .slimScrollDiv {
        margin-left: -20px;
        padding-left: 24px;
    }

    .address-book-dialog .address-dialog-content .link-type .form-control {
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 16px, 97% 0);
        clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
    }

    .address-book-dialog .address-dialog-content .centre-list-caption {
        font-size: 16px;
        font-style: italic;
    }

    .address-book-dialog .address-dialog-content .showmore-link {
        font-family: 'Cairo', sans-serif;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        background: url(images/address-book/down-arrow.svg) right center no-repeat;
        padding-right: 30px;
        background-size: 20px
    }

    .address-book-dialog .address-dialog-content .centre-list {
        justify-content: space-between;
        flex-wrap: wrap;
    }

        .address-book-dialog .address-dialog-content .centre-list .centre-card {
            width: 350px;
            height: 162px;
            background: #112B50;
            padding: 14px;
            margin: 0px 0px 30px 0px;
            position: relative;
            padding-top: 4px;
        }

            .address-book-dialog .address-dialog-content .centre-list .centre-card .sr-no {
                font-size: 33px;
                color: #688CC4;
                opacity: 0.24;
                line-height: normal
            }

            .address-book-dialog .address-dialog-content .centre-list .centre-card .check-icon {
                width: 26px;
                height: 26px;
                background: url(images/Deactivated.svg) left top no-repeat;
                background-size: 26px;
            }

            .address-book-dialog .address-dialog-content .centre-list .centre-card .centre-name {
                font-size: 16px;
                font-family: 'Cairo', sans-serif;
                font-weight: 700
            }

            .address-book-dialog .address-dialog-content .centre-list .centre-card .centre-distance {
                font-size: 14px;
                color: #FF7F32;
                margin-top: -4px;
            }

            .address-book-dialog .address-dialog-content .centre-list .centre-card .centre-address {
                font-size: 14px;
                color: #A7CCFD;
                line-height: 20px;
                margin-bottom: 4px;
            }

            .address-book-dialog .address-dialog-content .centre-list .centre-card .map-link {
                background: url(images/address-book/map-link-icon.svg) left top no-repeat;
                font-size: 14px;
                letter-spacing: -0.28px;
                color: #FFC685;
                padding-left: 28px;
                margin-top: 4px;
                background-size: 17px;
            }

            .address-book-dialog .address-dialog-content .centre-list .centre-card.selected .check-icon {
                background: url(images/Check.svg) left top no-repeat;
            }

        .address-book-dialog .address-dialog-content .centre-list.all-centers {
        }

            .address-book-dialog .address-dialog-content .centre-list.all-centers .centre-card {
                width: 100%;
                height: 70px;
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                min-height: 70px;
                height: auto;
            }

            .address-book-dialog .address-dialog-content .centre-list.all-centers .sr-no {
                width: 60px;
            }

            .address-book-dialog .address-dialog-content .centre-list.all-centers .centre-name {
                width: 280px;
                padding-right: 10px;
            }

            .address-book-dialog .address-dialog-content .centre-list.all-centers .centre-address {
                width: 320px;
                padding-right: 10px;
            }

            .address-book-dialog .address-dialog-content .centre-list.all-centers .map-link {
                white-space: nowrap;
                margin-left: 40px;
            }

            .address-book-dialog .address-dialog-content .centre-list.all-centers .check-icon {
                position: absolute;
                left: 14px;
                top: 50%;
                margin-top: -13px;
            }

    .address-book-dialog .address-dialog-content .centre-map {
    }

        .address-book-dialog .address-dialog-content .centre-map img {
            width: 100%;
        }
    /*22-02-2021*/
    .address-book-dialog .address-dialog-content .group-title {
        font-family: 'Cairo', sans-serif;
        font-weight: 600;
        font-size: 22px;
        color: #FFC685;
        display: flex;
        justify-content: space-between;
    }

    .address-book-dialog .address-dialog-content .withmap-link {
        padding-bottom: 8px;
    }

    .address-book-dialog .address-dialog-content .group-title .map-link {
        font-size: 14px;
        color: #FFC685;
        letter-spacing: 1.4px;
        background: url(images/address-book/map-link.svg) left center no-repeat;
        padding-left: 20px;
        text-decoration: none;
        display: flex;
        align-items: center
    }

    .address-book-dialog .address-dialog-content .centre-search .form-control.search {
        background: #2D4D79; /*padding-left:220px*/
    }

    .address-book-dialog .address-dialog-content .centre-search .current-location-link {
        color: #FF7F32;
        font-size: 16px;
        font-family: 'Cairo', sans-serif;
        background: url(images/address-book/location-bullet.svg) left center no-repeat;
        padding-left: 34px;
        position: absolute;
        left: 34px;
        top: 14px;
    }

.loader-dialog-content {
    text-align: center;
    padding: 180px 0px 180px 0px
}

    .loader-dialog-content .search-content {
        font-family: 'Open Sans', sans-serif;
        color: #fff;
        text-align: center;
        font-size: 25px;
        padding-top: 30px;
        line-height: 30px;
    }

.ui-widget.address-map-dialog {
}

    .ui-widget.address-map-dialog .ui-dialog-content .dialog-title {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .ui-widget.address-map-dialog .ui-dialog-content .dialog-title .back-btn {
            position: static
        }

    .ui-widget.address-map-dialog .map-dialog-content p {
        text-align: center;
        font-size: 16px;
        color: #5F8CC9;
        width: 80%;
        margin: 10px auto 30px auto;
    }

    .ui-widget.address-map-dialog .ui-dialog-content {
        padding: 20px 0px 0px 0px;
    }

    .ui-widget.address-map-dialog .map-dialog-content {
    }

    .ui-widget.address-map-dialog .map {
        height: 520px;
        position: relative
    }

.ui-widget .location-details { /*width: 290px;height: 157px;*/
    max-width: 290px;
    background: #102545;
    box-shadow: 0px 3px 6px #00000029; /*position: absolute;*/
    top: 100px;
    left: 20px;
    padding: 10px;
    text-align: center
}

    .ui-widget .location-details .location-name {
        font-size: 16px;
        color: #FFC685;
        font-family: 'Cairo';
        text-align: center
    }

    .ui-widget .location-details .distance {
        color: #FF7F32;
        font-size: 10px;
        font-style: italic;
        font-weight: 600
    }

    .ui-widget .location-details .contacts {
        display: flex;
        color: #fff;
        font-weight: 600;
        font-size: 11px;
        text-align: left;
        padding: 20px 0px;
    }

        .ui-widget .location-details .contacts .address {
            background: url(images/address-book/address-blue-icon.svg) right center no-repeat;
            width: 65%;
            padding-right: 20px;
            padding-left: 20px;
            text-align: right;
        }

        .ui-widget .location-details .contacts .phone {
            background: url(images/address-book/phone-blue-icon.svg) right 3px no-repeat;
            padding-right: 20px;
        }

    .ui-widget .location-details .action-bar {
        display: flex;
        position: static;
        height: auto;
        background: none;
        box-shadow: none;
    }

        .ui-widget .location-details .action-bar .btn-primary {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 25px;
            min-width: 138px;
            width: 150px !important;
            border: none;
            text-align: right;
            padding: 0px 10px 0px 0px;
            color: #fff;
            font-size: 13px;
            font-family: 'Cairo', sans-serif;
            font-weight: 600;
            border-radius: 0px;
            -webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
            clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
            border-radius: 0px;
            line-height: 25px;
            display: flex;
            margin: 0px;
            position: relative;
            margin-left: 10px;
        }

            .ui-widget .location-details .action-bar .btn-primary .icon {
                background: url(images/round-right-arrow.svg) left top no-repeat !important;
                background-size: 100% !important;
                width: 15px;
                height: 15px;
                position: absolute;
                left: 11px;
                top: 6px;
            }

        .ui-widget .location-details .action-bar .btn-secondary {
            background: #1B365E !important;
            height: 25px;
            min-width: 100px;
            border: none;
            text-align: center;
            padding: 0px;
            color: #fff;
            font-size: 13px;
            font-family: 'Open Sans', sans-serif;
            font-weight: 600;
            border-radius: 0px;
            line-height: 25px;
            margin: 0px;
        }

    .ui-widget .location-details .pointer {
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #102545;
        position: absolute;
        left: 50%;
        top: -6px;
        transform: translateX(-50%);
    }

    .ui-widget .location-details .action-bar {
        justify-content: space-between;
    }

    .ui-widget .location-details .contacts {
        padding-bottom: 6px;
    }

    .ui-widget .location-details .store-timing {
        color: #fff;
        text-align: right;
        padding-bottom: 10px;
        font-family: 'Cairo';
    }

        .ui-widget .location-details .store-timing .caption {
            font-size: 13px
        }

        .ui-widget .location-details .store-timing .todays-timing {
            font-size: 12px;
            color: #FFC685;
            font-weight: 600;
            padding-bottom: 8px;
            display: flex;
            justify-content: space-between;
        }

        .ui-widget .location-details .store-timing .show-more {
            padding-top: 4px;
            cursor: pointer
        }

        .ui-widget .location-details .store-timing .more-link {
            font-size: 14px;
            color: #FF7F32;
            font-weight: 600;
            display: block
        }

            .ui-widget .location-details .store-timing .more-link.less {
                display: none;
            }

        .ui-widget .location-details .store-timing .show-more.more .more-link {
            display: none;
        }

        .ui-widget .location-details .store-timing .show-more.more .less {
            display: block;
        }

        .ui-widget .location-details .store-timing .days-timings {
            font-family: 'Cairo';
            font-size: 11px;
            padding-top: 2px;
        }

            .ui-widget .location-details .store-timing .days-timings .day {
            }

            .ui-widget .location-details .store-timing .days-timings .timings {
            }

            .ui-widget .location-details .store-timing .days-timings ul {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }

                .ui-widget .location-details .store-timing .days-timings ul li {
                    list-style: none;
                    margin: 0px;
                    padding: 0px;
                    border-bottom: 1px solid #6d7d96;
                    line-height: 33px;
                    display: flex;
                    justify-content: space-between;
                }

                    .ui-widget .location-details .store-timing .days-timings ul li:last-child {
                        border-bottom: none;
                    }
/*22-02-2021 end*/


.app-wrapper .content-wrapper .content .content-title {
    display: flex;
}

    .app-wrapper .content-wrapper .content .content-title .back-btn {
        width: 26px;
        height: 26px;
        display: block;
        margin-top: 3px;
        margin-left: 6px;
    }

        .app-wrapper .content-wrapper .content .content-title .back-btn span {
            background: url(images/orange-down-arrow.svg) 1px 14px no-repeat;
            display: block;
            background-size: 80%;
            background-size: 80%;
            height: 100%;
            width: 100%;
            transform: rotate(270deg);
        }

    .app-wrapper .content-wrapper .content .content-title .small-txt {
        color: #A7CCFD;
        font-size: 14px;
        font-family: 'Cairo', sans-serif;
        padding-top: 16px;
        padding-right: 13px;
    }

.app-wrapper .content-wrapper .new-shippment {
    padding-top: 6px;
}

.bm-10 {
    margin-bottom: 10px !important;
}

.bm-15 {
    margin-bottom: 15px !important;
}

.bm-20 {
    margin-bottom: 20px !important;
}

.bm-30 {
    margin-bottom: 30px !important;
}

.bm-25 {
    margin-bottom: 25px !important;
}

.tm-14 {
    margin-top: 14px !important;
}

.rm-30 {
    margin-left: 30px !important;
}

.tm-30 {
    margin-top: 30px !important;
}

.tm-20 {
    margin-top: 20px !important;
}

.tm-10 {
    margin-top: 10px !important;
}

.tm-40 {
    margin-top: 40px !important;
}

.bm-26 {
    margin-bottom: 26px !important;
}

.bm-0 {
    margin-bottom: 0px !important;
}

.width-380 {
    width: 380px !important;
}
/*18-11-2020*/
.app-wrapper .content-wrapper .new-shippment .steps {
    margin-bottom: 30px
}

.app-wrapper .content-wrapper .new-shippment ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
}

.app-wrapper .content-wrapper .new-shippment .steps ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
}

    .app-wrapper .content-wrapper .new-shippment .steps ul li {
        margin-left: 45px;
        font-family: 'Cairo', sans-serif;
        font-size: 16px;
        color: #fff;
        border-bottom: 3px solid transparent;
        padding-bottom: 4px;
        font-size: 14px;
    }

        .app-wrapper .content-wrapper .new-shippment .steps ul li span {
            opacity: 0.5;
        }

        .app-wrapper .content-wrapper .new-shippment .steps ul li .step-number {
            font-size: 28px;
            font-weight: 300;
            opacity: 0.2;
        }

        .app-wrapper .content-wrapper .new-shippment .steps ul li.active {
            border-bottom: 3px solid #FF7F32;
        }

            .app-wrapper .content-wrapper .new-shippment .steps ul li.active span {
                opacity: 1;
            }

            .app-wrapper .content-wrapper .new-shippment .steps ul li.active .step-number {
                opacity: 1;
            }

        .app-wrapper .content-wrapper .new-shippment .steps ul li .active-sign {
            width: 19px;
            height: 19px;
            background: url(images/Check.svg) left top no-repeat;
            background-size: 19px;
            margin: 0px 4px;
            display: none;
        }

        .app-wrapper .content-wrapper .new-shippment .steps ul li .edit-btn {
            border: 1px solid #16335D;
            border-radius: 2px;
            height: 20px;
            width: 50px;
            text-align: center;
            background: #1F406F;
            font-size: 12px;
            color: #fff;
            line-height: 18px;
            letter-spacing: 2.4px;
            display: none;
        }

        .app-wrapper .content-wrapper .new-shippment .steps ul li.complited {
        }

            .app-wrapper .content-wrapper .new-shippment .steps ul li.complited .active-sign, .app-wrapper .content-wrapper .new-shippment .steps ul li.complited .edit-btn {
                display: block
            }

.app-wrapper .content-wrapper .new-shippment .subheading {
    font-size: 18px;
    font-family: 'Cairo', sans-serif;
    color: #FFC685;
}

.app-wrapper .content-wrapper .new-shippment .subheading-style2 {
    font-size: 16px;
    font-family: 'Cairo', sans-serif;
    color: #FFC685;
    line-height: normal;
}

    .app-wrapper .content-wrapper .new-shippment .subheading-style2 span {
        font-style: italic
    }

.app-wrapper .content-wrapper .new-shippment .add-address-btn {
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    background: url(images/Plus.svg) left center no-repeat;
    background-size: 20px;
    margin-right: 20px;
    margin-top: 2px;
    line-height: 20px;
    padding-left: 26px;
    font-size: 16px;
}

.app-wrapper .content-wrapper .new-shippment .addresses {
    flex-wrap: wrap
}

    .app-wrapper .content-wrapper .new-shippment .addresses .address-list {
        align-items: initial !important;
    }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card {
            height: 182px;
            width: 350px;
            background: #112B50;
            margin: 0px 0px 20px 0px;
            -webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
            clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
            padding: 14px;
            font-family: 'Cairo', sans-serif;
            position: relative;
            margin-left: 24px;
            min-height: 182px;
            height: auto
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .check-icon {
            width: 23px;
            height: 23px;
            background: url(images/Deactivated-icon.svg) left top no-repeat;
            background-size: 23px;
            position: absolute;
            left: 16px;
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card.selected .check-icon {
            background: url(images/shipment-check.svg) left top no-repeat;
            background-size: 23px;
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card .edit-btn {
            border: 1px solid #16335D;
            border-radius: 2px;
            height: 20px;
            width: 50px;
            text-align: center;
            background: #1F406F;
            font-size: 12px;
            color: #fff;
            line-height: 18px;
            letter-spacing: 2.4px;
            display: block;
            position: absolute;
            left: 10px;
            bottom: 7px;
            text-decoration: none !important;
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card .address-type {
            letter-spacing: 2.4px;
            font-size: 12px;
            color: #FF7F32;
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card .name {
            font-size: 16px;
            color: #fff;
            padding-bottom: 6px;
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card .address {
            font-size: 14px;
            color: #A7CCFD;
            line-height: 20px;
            padding-bottom: 0px;
            padding-left: 40px;
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card .phone {
            font-size: 14px;
            color: #A7CCFD;
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card .retail-center {
            padding-top: 6px;
            padding-left: 40px
        }

            .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card .retail-center .field-caption {
                letter-spacing: 2.2px;
                font-size: 11px;
                color: #68D1DB;
                text-transform: uppercase;
            }

            .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card .retail-center .field-value {
                font-size: 15px;
                color: #fff;
            }

    .app-wrapper .content-wrapper .new-shippment .addresses .select-address-btn {
        height: 182px;
        width: 165px;
        background: #007884 url("images/ar/round-right-arrow.svg") 6% 94% no-repeat !important;
        background-size: 26px;
        margin: 0px 0px 20px 0px;
        -webkit-clip-path: polygon(12% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 12%);
        clip-path: polygon(12% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 12%);
        padding: 20px 14px;
        font-family: 'Cairo', sans-serif;
        position: relative;
        font-size: 20px;
        text-decoration: none;
        color: #fff;
        line-height: 28px;
        border: none;
        text-align: right
    }

        .app-wrapper .content-wrapper .new-shippment .addresses .select-address-btn .address-icon {
            width: 20px;
            height: 25px;
            background: url(images/address-icon.svg) left top no-repeat;
            display: block;
            background-size: 100%;
            margin-bottom: 8px;
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .select-address-btn .address-count {
            font-size: 16px;
            color: #7EE0EA;
            line-height: normal;
            display: block;
            padding-top: 6px
        }

.app-wrapper .content-wrapper .new-shippment .btn-primary {
    background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
    height: 50px;
    width: 315px;
    border: none;
    text-align: left;
    padding: 0px 15px 0px 0px;
    color: #fff;
    font-size: 20px;
    font-family: 'Cairo', sans-serif;
    border-radius: 0px;
    font-weight: 700;
    -webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
    clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
    border-radius: 0px;
    line-height: 50px;
    display: flex;
    margin: 10px 10px;
    position: relative;
}

    .app-wrapper .content-wrapper .new-shippment .btn-primary .icon {
        background: url("images/ar/round-right-arrow.svg") left top no-repeat !important;
        width: 23px;
        height: 23px;
        position: absolute;
        left: 12px;
        top: 16px;
    }

.app-wrapper .content-wrapper .new-shippment .info-btn {
    background: url(images/info-icon.svg) left top no-repeat !important;
    height: 15px;
    width: 15px;
    margin: 5px 10px 0px 0px;
}

.app-wrapper .content-wrapper .new-shippment .shippment-weight {
    width: 216px;
}

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .quanty-widget {
        margin-left: 15px
    }

.app-wrapper .content-wrapper .new-shippment .shipment-selection .seprator {
    width: 2px;
    background: #112B50;
    height: 104px;
    margin: 15px 30px 0px 20px;
}

.app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list {
    flex-wrap: wrap;
    width: 216px;
    margin-left: 30px;
}

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list li {
        width: 60px;
        height: 40px;
        display: flex;
        align-items: center;
        background: #112B50;
        font-size: 16px;
        margin: 0px 0px 12px 12px;
        position: relative
    }

        .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list li a {
            text-decoration: none;
            color: #5F8CC9;
            width: 100%;
            justify-content: center;
            display: flex;
            align-items: center;
            font-size: 12px;
        }

.app-wrapper .content-wrapper .new-shippment .shippment-weight .selection-icon {
    width: 14px;
    height: 14px;
    background: url(images/Check.svg) left top no-repeat;
    position: absolute;
    right: -5px;
    top: -5px;
    background-size: 100%;
    display: none;
}

.app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list li.selected {
    background: #A7CCFD
}

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list li.selected a {
        color: #284166;
        font-weight: 700
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list li.selected .selection-icon {
        display: block
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list li.selected:after {
        content: "";
        width: 66px;
        height: 8px;
        background: #091B34;
        filter: blur(4px);
        position: absolute;
        left: 50%;
        margin-left: -33px;
        bottom: -6px;
        z-index: -1;
    }

.app-wrapper .content-wrapper .new-shippment .quanty-widget {
    width: 160px;
    height: 60px;
    background: #112B50;
    border-radius: 2px;
    display: flex;
    align-items: center
}

    .app-wrapper .content-wrapper .new-shippment .quanty-widget .qty-btn {
        min-width: 36px;
        height: 36px;
        background: #0A1E39;
        border-radius: 2px;
        color: #5F8CC9;
        display: flex;
        text-align: center;
        font-size: 28px;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .app-wrapper .content-wrapper .new-shippment .quanty-widget .qty-increase {
        margin-left: -15px;
    }

    .app-wrapper .content-wrapper .new-shippment .quanty-widget .qty-decrease {
        margin-right: -15px;
    }

    .app-wrapper .content-wrapper .new-shippment .quanty-widget .qty-txt {
        width: 120px;
        position: relative;
        padding-right: 25px;
    }

        .app-wrapper .content-wrapper .new-shippment .quanty-widget .qty-txt input::placeholder {
            color: #fff;
        }

.app-wrapper .content-wrapper .new-shippment .shippment-weight .quanty-widget .qty-txt input {
    font-size: 16px;
    font-weight: 400;
    border: none;
    padding: 0px;
    box-shadow: none !important;
    outline: none;
    font-size: 16px;
    text-align: center;
    background: none;
    color: #fff;
    font-family: 'Cairo', sans-serif;
    width: 56px;
}

.app-wrapper .content-wrapper .new-shippment .shippment-weight .quanty-widget .qty-txt .qty-unit {
    font-size: 11px;
    color: #fff;
}

.app-wrapper .content-wrapper .new-shippment .shippment-details {
}

    .app-wrapper .content-wrapper .new-shippment .shippment-details .form-control {
        height: 50px;
        background: #112B50;
        border: none;
        line-height: 50px;
        text-indent: 14px;
        font-family: 'Cairo', sans-serif;
        font-size: 16px;
        color: #fff;
        padding: 0px;
        -webkit-clip-path: polygon(7% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        clip-path: polygon(7% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        border-radius: 0px;
        padding-left: 46px;
        width: 220px
    }

        .app-wrapper .content-wrapper .new-shippment .shippment-details .form-control::placeholder {
            color: #5F8CC9;
        }

        .app-wrapper .content-wrapper .new-shippment .shippment-details .form-control.pieces-txt {
            clip-path: none;
            border-radius: 2px;
            width: 132px;
            text-align: center;
            padding: 0px;
        }

.app-wrapper .content-wrapper .new-shippment .shippment-description {
    margin-bottom: 30px;
}

    .app-wrapper .content-wrapper .new-shippment .shippment-description .link {
        font-size: 14px;
        color: #68D1DB;
        text-decoration: none;
        background: url(images/ar/Rightarrow-icon.svg) left center no-repeat;
        line-height: 16px;
        padding-right: 24px;
        margin-right: 50px;
        margin-top: 5px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-description .form-control {
        height: 70px;
        background: #112B50;
        border: none;
        text-indent: 14px;
        font-family: 'Cairo', sans-serif;
        font-size: 16px;
        color: #fff;
        padding: 0px;
        -webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 28%);
        clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 28%);
        border-radius: 0px;
        padding-left: 10px;
        width: 576px;
        padding-top: 10px;
        font-style: italic;
        resize: none;
    }

        .app-wrapper .content-wrapper .new-shippment .shippment-description .form-control::placeholder {
            color: #5F8CC9;
        }

.app-wrapper .content-wrapper .new-shippment .package-selection {
}

    .app-wrapper .content-wrapper .new-shippment .package-selection.disable {
        opacity: .2;
        pointer-events: none;
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .small-heading {
        font-family: 'Cairo', sans-serif;
        font-size: 12px;
        line-height: 1;
        color: #fff;
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .recommended-paackage {
        margin-right: 0px;
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-list {
        margin-top: 10px;
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .card-wrapper {
        height: 140px;
        width: 155px;
        position: relative;
        margin-bottom: 30px;
        margin-right: 30px;
    }

        .app-wrapper .content-wrapper .new-shippment .package-selection .card-wrapper:after {
            content: "";
            width: 101px;
            height: 14px;
            background: #08172B;
            filter: blur(11px);
            position: absolute;
            left: 50%;
            margin-left: -50px;
            bottom: -7px;
            z-index: -1;
        }

    .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card {
        height: 113px;
        width: 121px;
        padding-top: 10px;
        position: relative;
        margin-bottom: 0px;
        margin-left: 20px;
        -webkit-clip-path: polygon(13% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 15%);
        clip-path: polygon(13% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 15%);
        margin-bottom: 20px;
    }

        .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card .weight {
            font-size: 57px;
            letter-spacing: -3.99px;
            line-height: 1.2;
        }

            .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card .weight span {
                font-size: 17px;
                font-weight: 700;
            }

        .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card .waybillleft {
            font-size: 10px;
        }

        .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card .check-icon {
            width: 19px;
            height: 19px;
            background: url(images/Deactivated-new.svg) left top no-repeat;
            background-size: 19px;
            position: absolute;
            left: 16px;
            left: 10px;
            top: 5px;
        }

        .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card.selected .check-icon {
            background: url(images/Check.svg) left top no-repeat;
            background-size: 19px;
        }

    .app-wrapper .content-wrapper .new-shippment .package-selection .color-pattern1 {
        background: transparent linear-gradient(48deg, #274C81 0%, #4C6D9F 100%) 0% 0% no-repeat
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .color-pattern2 {
        background: transparent linear-gradient(48deg, #4C9BAE 0%, #356978 100%) 0% 0% no-repeat
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .color-pattern3 {
        background: transparent linear-gradient(48deg, #B2643F 0%, #A14337 100%) 0% 0% no-repeat
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .color-pattern4 {
        background: transparent linear-gradient(48deg, #AA2F46 0%, #8B162C 100%) 0% 0% no-repeat
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .color-pattern5 {
        background: transparent linear-gradient(227deg, #28b87a 0%, #31d47d 100%) 0% 0% no-repeat
    }

.app-wrapper .content-wrapper .new-shippment .addon-selection {
}

    .app-wrapper .content-wrapper .new-shippment .addon-selection .addon-list {
        width: 688px;
        flex-wrap: wrap;
    }

        .app-wrapper .content-wrapper .new-shippment .addon-selection .addon-list .addon-card {
            width: 314px;
            height: 130px;
            background: #112B50;
            padding: 14px;
            margin: 0px 30px 30px 0px;
            position: relative
        }

            .app-wrapper .content-wrapper .new-shippment .addon-selection .addon-list .addon-card .addon-icon {
                margin-bottom: 8px;
            }

            .app-wrapper .content-wrapper .new-shippment .addon-selection .addon-list .addon-card .addon-title {
                font-size: 18px;
                line-height: 1;
                font-family: 'Cairo', sans-serif;
                margin-bottom: 10px;
                color: #fff;
            }

            .app-wrapper .content-wrapper .new-shippment .addon-selection .addon-list .addon-card .addon-desc {
                font-size: 12px;
                color: #5F8CC9;
                line-height: 14px;
                width: 170px;
            }

            .app-wrapper .content-wrapper .new-shippment .addon-selection .addon-list .addon-card .check-icon {
                width: 23px;
                height: 23px;
                background: url(images/Deactivated.svg) left top no-repeat;
                background-size: 23px;
                position: absolute;
                right: 10px;
                top: 10px
            }

            .app-wrapper .content-wrapper .new-shippment .addon-selection .addon-list .addon-card.selected .check-icon {
                background: url(images/Check.svg) left top no-repeat;
                background-size: 23px;
            }

            .app-wrapper .content-wrapper .new-shippment .addon-selection .addon-list .addon-card .addon-price {
                font-size: 41px;
                color: #fff;
                position: absolute;
                right: 10px;
                bottom: 4px;
                line-height: normal;
            }

                .app-wrapper .content-wrapper .new-shippment .addon-selection .addon-list .addon-card .addon-price .currency {
                    font-size: 11px;
                    font-weight: 700;
                    vertical-align: super;
                }

.app-wrapper .content-wrapper .new-shippment .pickup-delivery {
}

    .app-wrapper .content-wrapper .new-shippment .pickup-delivery .pickup-delivery-card {
        display: flex;
        align-items: center;
        margin-right: 20px;
        background: #112B50;
        height: 72px;
        width: 326px;
        color: #fff;
        justify-content: space-around;
        padding-left: 26px;
    }

        .app-wrapper .content-wrapper .new-shippment .pickup-delivery .pickup-delivery-card .check-icon {
            width: 23px;
            height: 23px;
            background: url(images/Deactivated.svg) left top no-repeat;
            background-size: 23px;
            margin-right: 10px;
        }

        .app-wrapper .content-wrapper .new-shippment .pickup-delivery .pickup-delivery-card.selected .check-icon {
            background: url(images/Check.svg) left top no-repeat;
            background-size: 23px;
        }

        .app-wrapper .content-wrapper .new-shippment .pickup-delivery .pickup-delivery-card.selected::after {
            content: "";
            background: #08172B;
            filter: blur(11px);
            width: 245px;
            height: 11px;
            position: absolute;
            left: 50%;
            margin-left: -122.5px;
            bottom: -6px;
            z-index: -1;
        }

    .app-wrapper .content-wrapper .new-shippment .pickup-delivery .pickup-delivery-card {
        position: relative;
    }

        .app-wrapper .content-wrapper .new-shippment .pickup-delivery .pickup-delivery-card .title {
            font-size: 18px;
            line-height: 1;
            font-family: 'Cairo', sans-serif;
            margin-bottom: 5px;
        }

        .app-wrapper .content-wrapper .new-shippment .pickup-delivery .pickup-delivery-card .desc {
            font-size: 12px;
            color: #5F8CC9;
            line-height: 14px;
            width: 170px
        }

.app-wrapper .content-wrapper .new-shippment .shippment-order-summary {
    padding-top: 20px;
    margin-bottom: 30px;
}

    .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .left-col {
        width: 350px;
        margin-right: 50px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .right-col {
        width: 450px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .ordersummery {
        font-size: 16px;
        margin-top: 16px;
        color: #fff;
    }

        .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .ordersummery td {
            padding: 6px 0px;
            line-height: normal;
        }

            .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .ordersummery td.value {
                text-align: right;
            }

        .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .ordersummery .cart-discount td {
            color: #68DBAF;
        }

        .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .ordersummery .cart-total td {
            font-size: 20px;
            font-weight: 700;
        }

        .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .ordersummery .currency {
            font-size: 12px;
            vertical-align: super;
            font-weight: 400;
        }

    .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .discount-widget {
        padding-top: 14px;
        display: flex;
    }

        .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .discount-widget .form-control {
            height: 45px;
            border: none;
            text-indent: 36px;
            font-family: 'Cairo', sans-serif;
            font-size: 14px;
            color: #fff;
            padding: 0px;
            background: #112B50 url(images/couponcode-icon.svg)10px center no-repeat;
            border-radius: 0px;
            outline: none !important;
            box-shadow: none !important;
            background-size: 16px;
        }

            .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .discount-widget .form-control::placeholder {
                color: #5F8CC9;
                font-family: 'Cairo', sans-serif;
                opacity: 0.59;
            }

        .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .discount-widget .discount-btn {
            height: 45px;
            width: 126px;
            background: #284166;
            font-size: 14px;
            font-family: 'Cairo', sans-serif;
            border-radius: 0px;
            color: #fff;
            font-weight: 600;
        }

    .app-wrapper .content-wrapper .new-shippment .shippment-order-summary .btn-primary {
        width: 100%;
        margin-top: 30px;
    }

.app-wrapper .content-wrapper .new-shippment .shipment-details {
    width: 470px;
    min-height: 400px;
    background: #112B50;
    margin-top: 0px;
    /*-webkit-clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 8%);clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 8%);*/
    -webkit-clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 8%);
    clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 8%);
    padding: 20px 20px 20px 26px;
    display: flex;
    width: 630px
}

    .app-wrapper .content-wrapper .new-shippment .shipment-details .subheading {
        font-family: 'Cairo', sans-serif;
        font-size: 16px;
        color: #FF7F32;
        display: flex;
        margin-bottom: 10px;
    }

    .app-wrapper .content-wrapper .new-shippment .shipment-details .col1 {
        width: 55%;
        padding-left: 20px;
        width: 42%;
    }

    .app-wrapper .content-wrapper .new-shippment .shipment-details .col2 {
        width: 45%;
        width: 58%;
    }

    .app-wrapper .content-wrapper .new-shippment .shipment-details .retail-centre {
        color: #fff;
        font-size: 16px
    }

    .app-wrapper .content-wrapper .new-shippment .shipment-details .address {
        font-weight: 300;
        color: #fff;
        font-size: 14px
    }

        .app-wrapper .content-wrapper .new-shippment .shipment-details .address .name {
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 5px;
            overflow-wrap: break-word;
        }

        .app-wrapper .content-wrapper .new-shippment .shipment-details .address p {
            padding: 0px;
            margin: 0px;
            line-height: 20px;
            margin-bottom: 6px;
            font-size: 16px;
            font-weight: 400;
        }

        .app-wrapper .content-wrapper .new-shippment .shipment-details .address .phone {
            font-size: 16px;
            font-weight: 400;
        }

    .app-wrapper .content-wrapper .new-shippment .shipment-details .shippment-weight-price {
        font-size: 16px;
        font-weight: 300;
        color: #fff;
    }

        .app-wrapper .content-wrapper .new-shippment .shipment-details .shippment-weight-price .weight {
            font-weight: 400;
            margin-bottom: 6px;
        }

        .app-wrapper .content-wrapper .new-shippment .shipment-details .shippment-weight-price .currency {
            font-size: 12px;
            vertical-align: super;
            font-weight: 300;
            height: auto;
            min-height: 111px;
        }

    .app-wrapper .content-wrapper .new-shippment .shipment-details .selected-bundal {
        width: 127px;
        height: 111px;
        background: transparent linear-gradient(50deg, #274C81 0%, #4C6D9F 100%) 0% 0% no-repeat;
        -webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
        padding: 0px 8px 10px 10px;
    }

        .app-wrapper .content-wrapper .new-shippment .shipment-details .selected-bundal .weight {
            font-size: 64px;
            color: #fff;
            font-weight: 700;
            letter-spacing: -4.48px;
            line-height: 1.1;
        }

            .app-wrapper .content-wrapper .new-shippment .shipment-details .selected-bundal .weight span {
                font-size: 20px;
                letter-spacing: 0;
                padding-left: 4px;
            }

        .app-wrapper .content-wrapper .new-shippment .shipment-details .selected-bundal .waybillleft {
            font-size: 12px;
            font-weight: 700;
            font-style: italic;
            color: #FFC685;
        }

    .app-wrapper .content-wrapper .new-shippment .shipment-details .selected-addon {
    }

        .app-wrapper .content-wrapper .new-shippment .shipment-details .selected-addon ul {
            display: block;
            color: #fff;
        }

            .app-wrapper .content-wrapper .new-shippment .shipment-details .selected-addon ul li {
                margin-bottom: 6px;
                background: url(images/Check.svg) left center no-repeat;
                background-size: 14px;
                padding-left: 22px;
            }

.app-wrapper .content-wrapper .new-shippment .wallet-status {
    width: 350px;
    height: 170px;
    background: transparent linear-gradient(64deg, #173D76 0%, #6A8EC4 100%) 0% 0% no-repeat;
    margin-bottom: 20px;
    webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 320px 0);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 320px 0);
    padding: 22px 20px;
    color: #fff;
}

    .app-wrapper .content-wrapper .new-shippment .wallet-status .wallet-blance {
        font-size: 16px;
        background: url(images/wallet-icon.svg) left center no-repeat;
        padding-left: 32px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32px;
    }

    .app-wrapper .content-wrapper .new-shippment .wallet-status .amount {
        font-size: 30px;
        font-weight: 700;
        padding-left: 24px;
    }

    .app-wrapper .content-wrapper .new-shippment .wallet-status .wallet-blance .amount .currency {
        font-size: 16px;
        vertical-align: super;
        font-weight: 400;
    }

    .app-wrapper .content-wrapper .new-shippment .wallet-status .required-amount {
        width: 100%;
        font-size: 16px;
        color: #FFC685;
        display: flex;
        align-items: center;
        padding-left: 32px;
        position: relative;
        background: url(images/amount-icon.svg) left center no-repeat;
        justify-content: space-between;
    }

        .app-wrapper .content-wrapper .new-shippment .wallet-status .required-amount .amount {
            font-size: 30px;
            font-weight: 700;
            padding-left: 24px;
        }

            .app-wrapper .content-wrapper .new-shippment .wallet-status .required-amount .amount .currency {
                font-size: 16px;
                vertical-align: super;
                font-weight: 400;
            }

.order-confirm-dialog {
}

    .order-confirm-dialog .order-confirm-dialog-content {
        text-align: center;
        padding-top: 30px;
        padding-bottom: 10px;
    }

        .order-confirm-dialog .order-confirm-dialog-content h3 {
            font-family: 'Cairo', sans-serif;
            font-size: 25px;
            margin-top: 24px;
            color: #fff;
            font-weight: 600;
        }

        .order-confirm-dialog .order-confirm-dialog-content p {
            line-height: 25px;
            font-family: 'Cairo', sans-serif;
            font-size: 18px;
            margin-bottom: 10px;
            color: #fff
        }

        .order-confirm-dialog .order-confirm-dialog-content .order-number, .order-confirm-dialog .order-confirm-dialog-content .awb-number {
            color: #5F8CC9;
            font-size: 25px;
        }

        .order-confirm-dialog .order-confirm-dialog-content .action-bar .btn-primary {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 50px;
            width: 350px;
            border: none;
            text-align: left;
            padding: 0px 15px 0px 0px;
            color: #fff;
            font-size: 20px;
            font-family: 'Cairo', sans-serif;
            font-weight: 700;
            border-radius: 0px;
            -webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            border-radius: 0px;
            line-height: 44px;
            display: flex;
            margin: 20px auto 10px auto;
            position: relative;
        }

            .order-confirm-dialog .order-confirm-dialog-content .action-bar .btn-primary .icon {
                background: url(images/printer-icon.svg) left top no-repeat !important;
                background-size: 24px;
                width: 24px;
                height: 24px;
                position: absolute;
                left: 12px;
                top: 16px;
            }

        .order-confirm-dialog .order-confirm-dialog-content .action-bar .viewshipment-lnk {
            background: url(images/ar/round-right-arrow.svg) left 6px no-repeat;
            background-size: 20px;
            font-family: 'Cairo', sans-serif;
            font-size: 18px;
            color: #fff;
            text-decoration: none;
            padding-left: 30px;
            display: inline-block;
            margin-top: 16px;
        }

.app-wrapper .content-wrapper .new-shippment .delivery-location {
    flex-wrap: wrap;
}

    .app-wrapper .content-wrapper .new-shippment .delivery-location .small-txt {
        font-family: 'Cairo', sans-serif;
        line-height: 1;
        color: #fff;
        width: 100%;
        font-size: 12px;
        width: 100%;
        margin-bottom: 10px;
    }

.app-wrapper .content-wrapper .new-shippment .location-list {
}

    .app-wrapper .content-wrapper .new-shippment .location-list .store-card {
        display: flex;
        align-items: center;
        padding: 14px;
        width: 326px;
        height: 116px;
        background: #112B50;
        position: relative;
        webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 18px, 306px 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 18px, 306px 0);
        color: #fff;
        position: relative;
        margin-right: 20px;
    }

        .app-wrapper .content-wrapper .new-shippment .location-list .store-card .store-image {
            margin-right: 10px;
        }

            .app-wrapper .content-wrapper .new-shippment .location-list .store-card .store-image img {
                width: 62px;
                height: 62px;
            }

        .app-wrapper .content-wrapper .new-shippment .location-list .store-card .store-distance {
            color: #FF7F32;
            font-size: 14px;
            text-align: center
        }

        .app-wrapper .content-wrapper .new-shippment .location-list .store-card .store-details {
            width: 190px;
        }

        .app-wrapper .content-wrapper .new-shippment .location-list .store-card .store-name {
            font-size: 16px;
            font-family: 'Cairo', sans-serif;
            font-weight: 700;
            line-height: 1;
            margin-bottom: 5px;
        }

        .app-wrapper .content-wrapper .new-shippment .location-list .store-card p {
            font-size: 14px;
            margin: 0px;
            line-height: 20px;
            opacity: 0.75;
        }

        .app-wrapper .content-wrapper .new-shippment .location-list .store-card .check-icon {
            width: 26px;
            height: 26px;
            background: url(images/Deactivated.svg) left top no-repeat;
            background-size: 26px;
            margin-right: 0px;
            position: absolute;
            right: 12px;
            top: 14px;
        }

        .app-wrapper .content-wrapper .new-shippment .location-list .store-card.selected .check-icon {
            background: url(images/Check.svg) left top no-repeat;
            background-size: 26px;
        }

        .app-wrapper .content-wrapper .new-shippment .location-list .store-card .sr-no {
            font-size: 33px;
            font-weight: 700;
            color: #FFFFFF;
            opacity: 0.12;
            position: absolute;
            right: 12px;
            bottom: 14px;
        }

.app-wrapper .content-wrapper .new-shippment .delivery-location .more-store-btn {
    height: 116px;
    width: 130px;
    background: #007884 url(images/round-right-arrow.svg) 94% 94% no-repeat !important;
    background-size: 20px;
    margin: 0px 0px 20px 0px;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 18px, 110px 0);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 18px, 110px 0);
    padding: 14px;
    font-family: 'Cairo', sans-serif;
    position: relative;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    line-height: normal;
}

    .app-wrapper .content-wrapper .new-shippment .delivery-location .more-store-btn .save-icon {
        width: 15px;
        height: 20px;
        background: url(images/address-icon.svg) left top no-repeat;
        display: block;
        background-size: 100%;
        margin-bottom: 8px;
    }

    .app-wrapper .content-wrapper .new-shippment .delivery-location .more-store-btn .store-count {
        font-size: 12px;
        color: #7EE0EA;
        line-height: normal;
        display: block;
        padding-top: 6px;
    }

.success-dialog {
}

    .success-dialog .success-dialog-content {
        text-align: center;
        padding-top: 30px;
    }

        .success-dialog .success-dialog-content.address-save {
            padding: 0px;
            height: 580px;
        }

            .success-dialog .success-dialog-content.address-save .success-content {
                position: absolute;
                text-align: center;
                width: 100%;
                left: 0px;
                top: 50%;
                transform: translateY(-50%)
            }

        .success-dialog .success-dialog-content p {
            font-family: 'Cairo', sans-serif;
            margin: 20px 0px;
            padding: 0px;
            font-size: 25px;
            color: #fff;
            line-height: 30px;
        }

        .success-dialog .success-dialog-content .btn-primary {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 50px;
            width: 100%;
            border: none;
            text-align: left;
            padding: 0px 15px 0px 0px;
            color: #fff;
            font-size: 20px;
            font-family: 'Cairo', sans-serif;
            font-weight: 700;
            border-radius: 0px;
            -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 34%, 95% 0);
            clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 34%, 95% 0);
            border-radius: 0px;
            line-height: 44px;
            display: flex;
            position: relative;
        }

            .success-dialog .success-dialog-content .btn-primary .icon {
                background: url(images/ar/round-right-arrow.svg) left top no-repeat !important;
                width: 23px;
                height: 23px;
                position: absolute;
                left: 12px;
                top: 16px;
            }

.ui-dialog.address-book {
}

    .ui-dialog.address-book .ui-dialog-content .dialog-title {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
    }

        .ui-dialog.address-book .ui-dialog-content .dialog-title .icon {
            background: url(images/address-icon-2.svg) left top no-repeat;
            width: 15px;
            height: 20px;
            background-size: 100%;
            margin-top: 10px;
            margin-left: 10px;
        }

    .ui-dialog.address-book .address-dialog-content {
        padding: 10px 0px 0px 0px;
        padding-bottom: 64px;
    }

        .ui-dialog.address-book .address-dialog-content p {
            font-family: 'Cairo', sans-serif;
            font-size: 16px;
            color: #fff;
            line-height: normal;
            width: 48%;
            margin: 0px auto;
            text-align: center;
        }

        .ui-dialog.address-book .address-dialog-content .address-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 26px 14px 0px 14px;
            width: auto;
            margin-bottom: 20px;
        }

            .ui-dialog.address-book .address-dialog-content .address-topbar .search {
                width: 584px;
                height: 40px;
                background: #112B50;
                position: relative;
            }

                .ui-dialog.address-book .address-dialog-content .address-topbar .search .form-control {
                    width: calc(100% - 46px);
                    height: 40px;
                    padding: 0px;
                    border-radius: 0px;
                    font-size: 12px;
                    color: #fff;
                    background: none;
                    padding: 10px;
                    border: none;
                    font-size: 16px;
                    font-family: 'Cairo', sans-serif;
                    outline: none;
                    box-shadow: none !important;
                    padding-right: 0px;
                }

                    .ui-dialog.address-book .address-dialog-content .address-topbar .search .form-control::placeholder {
                        color: #5F8CC9;
                        ;
                        opacity: 0.59;
                    }

                .ui-dialog.address-book .address-dialog-content .address-topbar .search .search-btn {
                    height: 40px;
                    width: 40px;
                    background: url(images/Search.svg) center center no-repeat;
                    padding: 0px;
                    border: none;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                }

            .ui-dialog.address-book .address-dialog-content .address-topbar .filters {
                display: flex;
                align-items: center;
            }

                .ui-dialog.address-book .address-dialog-content .address-topbar .filters .sort {
                    background: url(images/sort-icon.svg) left top no-repeat;
                    width: 24px;
                    height: 16px;
                    background-size: 24px;
                }

                .ui-dialog.address-book .address-dialog-content .address-topbar .filters .seprator {
                    height: 13px;
                    width: 2px;
                    background: #fff;
                    opacity: 0.2;
                    margin: 0px 16px;
                }

                .ui-dialog.address-book .address-dialog-content .address-topbar .filters .filter {
                    background: url(images/filter-icon.svg) left top no-repeat;
                    width: 15px;
                    height: 16px;
                    background-size: 15px;
                }

    .ui-dialog.address-book .action-bar {
        height: 88px;
        width: 100%;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        position: absolute;
        left: 0px;
        bottom: 0px;
    }

        .ui-dialog.address-book .action-bar .btn-primary {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 50px;
            width: 320px;
            border: none;
            text-align: left;
            padding: 0px 15px 0px 0px;
            color: #fff;
            font-size: 20px;
            font-family: 'Cairo', sans-serif;
            font-weight: 700;
            border-radius: 0px;
            -webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            border-radius: 0px;
            line-height: 44px;
            display: flex;
            margin: 20px auto 10px auto;
            position: relative
        }

            .ui-dialog.address-book .action-bar .btn-primary .icon {
                background: url("images/ar/round-right-arrow.svg") left top no-repeat !important;
                width: 23px;
                height: 23px;
                position: absolute;
                left: 12px;
                top: 16px;
            }

    .ui-dialog.address-book .address-list {
        display: flex;
        margin-top: 20px;
        flex-wrap: wrap;
        margin-right: -15px;
        padding-bottom: 30px;
        margin-top: 0px;
    }

        .ui-dialog.address-book .address-list .address-card {
            height: 160px;
            width: 315px;
            background: #112B50;
            margin: 0px 30px 20px 0px;
            -webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 12%);
            clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 12%);
            padding: 10px 14px;
            font-family: 'Cairo', sans-serif;
            position: relative;
            display: block;
            min-height: 160px;
            height: auto;
        }

            .ui-dialog.address-book .address-list .address-card .name {
                font-size: 16px;
                color: #fff;
                padding-bottom: 6px;
                background: none;
                padding-right: 0px;
            }

            .ui-dialog.address-book .address-list .address-card .address {
                font-size: 14px;
                color: #A7CCFD;
                line-height: 20px;
                padding-bottom: 6px;
                padding-right: 50px;
                background: none;
                padding-right: 0px;
                width: auto;
            }

            .ui-dialog.address-book .address-list .address-card .phone {
                font-size: 14px;
                color: #fff;
                background: none;
                padding-right: 0px;
                padding-bottom: 8px;
            }

            .ui-dialog.address-book .address-list .address-card .check-icon {
                width: 23px;
                height: 23px;
                background: url(images/Deactivated.svg) left top no-repeat;
                background-size: 23px;
                position: absolute;
                left: 16px;
            }

            .ui-dialog.address-book .address-list .address-card.selected .check-icon {
                background: url(images/Check.svg) left top no-repeat;
                background-size: 23px;
            }

            .ui-dialog.address-book .address-list .address-card .add-count {
                font-size: 60px;
                opacity: 0.09;
                font-weight: 700;
                position: absolute;
                left: 16px;
                bottom: 0px;
                left: 0px;
            }

            .ui-dialog.address-book .address-list .address-card .retail-center {
                padding-top: 6px;
                padding-left: 70px;
            }

                .ui-dialog.address-book .address-list .address-card .retail-center .field-caption {
                    letter-spacing: 2.2px;
                    font-size: 11px;
                    color: #68D1DB;
                    text-transform: uppercase;
                }

                .ui-dialog.address-book .address-list .address-card .retail-center .field-value {
                    font-size: 15px;
                    color: #fff;
                }

.ui-dialog .title-small-text {
    text-align: center;
    font-family: 'DINNextLTArabic-Regular';
    font-size: 16px;
    color: #fff;
    padding-top: 6px
}

.address-book-dialog .address-dialog-content .form-group .address {
    height: 90px;
    -webkit-clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 18%);
    clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 18%)
}
/*18-11-2020 end*/
/*20-11-2020*/
.app-wrapper .content-wrapper .my-shippments.wallet-shipments {
    position: absolute;
    top: 123px;
    right: 332px;
    z-index: 999;
}

.my-shippments .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    width: 800px;
    width: 984px;
    width: auto
}

    .my-shippments .topbar .search {
        width: 584px;
        height: 40px;
        background: #112B50;
        position: relative;
        width: 80%;
        width: 62%;
    }

        .my-shippments .topbar .search .form-control {
            width: calc(100% - 46px);
            height: 40px;
            padding: 0px;
            border-radius: 0px;
            color: #fff;
            background: none;
            padding: 10px;
            border: none;
            font-size: 16px;
            font-family: 'Lato', sans-serif;
            outline: none;
            box-shadow: none !important
        }

            .my-shippments .topbar .search .form-control::placeholder {
                color: #5F8CC9;
                ;
                opacity: 0.59;
            }

        .my-shippments .topbar .search .search-btn {
            height: 40px;
            width: 40px;
            background: url(images/Search-icon.svg) center center no-repeat;
            padding: 0px;
            border: none;
            position: absolute;
            top: 0px;
            left: 0px;
        }

    .my-shippments .topbar .filters {
        display: flex;
        align-items: center;
        margin-right: 20px;
        margin-left: 20px;
    }

    .my-shippments .topbar .btn-primary {
        background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
        height: 50px;
        width: 230px;
        border: none;
        text-align: left;
        padding: 0px 15px 0px 0px;
        color: #fff;
        font-size: 20px;
        font-family: 'Cairo', sans-serif;
        border-radius: 0px;
        font-weight: 700;
        -webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        border-radius: 0px;
        line-height: 50px;
        display: flex;
        margin: 10px 10px;
        position: relative;
    }

        .my-shippments .topbar .btn-primary .icon {
            background: url("images/ar/round-right-arrow.svg") left top no-repeat !important;
            width: 23px;
            height: 23px;
            position: absolute;
            left: 12px;
            top: 16px;
        }

    .my-shippments .topbar .add-new-btn {
        font-size: 12px;
        color: #fff;
        text-decoration: none;
        background: url(images/Plus.svg) left center no-repeat;
        background-size: 20px;
        margin-right: 20px;
        margin-top: 2px;
        line-height: 20px;
        padding-left: 26px;
        white-space: nowrap;
        color: #FF7F32
    }

    .my-shippments .topbar .filters .sort {
        background: url(images/sort-icon.svg) left top no-repeat;
        width: 32px;
        height: 16px;
    }

    .my-shippments .topbar .filters .seprator {
        height: 13px;
        width: 2px;
        background: #fff;
        opacity: 0.2;
        margin: 0px 18px;
    }

    .my-shippments .topbar .filters .filter {
        background: url(images/filter-icon.svg) left top no-repeat;
        width: 21px;
        height: 21px;
    }
    /*07-01-2021*/
    .my-shippments .topbar .filters {
        position: relative
    }

        .my-shippments .topbar .filters .filter-dropdown {
            width: 200px;
            min-height: 100px;
            padding: 10px;
            background: #1b365e;
            -webkit-box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);
            -moz-box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);
            box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);
            position: absolute;
            top: 42px;
            z-index: 1;
            display: none;
        }

            .my-shippments .topbar .filters .filter-dropdown .heading {
                font-size: 16px;
                color: #FFC685;
                position: relative;
                padding-bottom: 6px;
            }

            .my-shippments .topbar .filters .filter-dropdown .clear-btn {
                color: #e34647;
                text-decoration: none !important;
                float: left;
            }

            .my-shippments .topbar .filters .filter-dropdown ul {
                margin: 0px;
                padding: 0px;
            }

            .my-shippments .topbar .filters .filter-dropdown li {
                list-style: none;
                margin: 0px;
                padding: 0px;
                color: #5F8CC9;
                font-size: 16px;
                margin-bottom: 4px;
                position: relative;
            }

                .my-shippments .topbar .filters .filter-dropdown li a {
                    color: #5F8CC9;
                    display: block;
                    padding: 4px 0px;
                    text-decoration: none !important
                }

                .my-shippments .topbar .filters .filter-dropdown li .sep {
                    padding: 0px 4px
                }

                .my-shippments .topbar .filters .filter-dropdown li.selected {
                    background: url(images/Check.svg) left center no-repeat;
                    background-size: 20px;
                }
/*07-01-2021 end*/

.my-shippments .shipment-status {
}

.app-wrapper .content-wrapper .my-shippments > ul, .app-wrapper .content-wrapper .my-shippments > li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.my-shippments .shipment-status {
    width: 984px;
}

    .my-shippments .shipment-status > li {
        margin-bottom: 20px;
        background: #112B50;
        border-radius: 3px;
    }

    .my-shippments .shipment-status .info-header {
        height: 45px;
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #5F8CC9;
        padding: 0px 20px;
        position: relative;
    }

        .my-shippments .shipment-status .info-header .title {
            min-width: 94px;
        }

        .my-shippments .shipment-status .info-header .option-icon {
            width: 21px;
            height: 21px;
            margin-left: 16px;
        }

        .my-shippments .shipment-status .info-header .seprator {
            color: #5F8CC9;
            font-size: 11px;
            font-style: italic;
            padding: 0px 10px;
        }

        .my-shippments .shipment-status .info-header .shipment-count {
            color: #5F8CC9;
            font-size: 16px;
            font-style: italic;
        }

        .my-shippments .shipment-status .info-header .header-icon {
            background: url(images/myaccount/plus.svg) left center no-repeat;
            width: 14px;
            height: 14px;
            position: absolute;
            left: 26px;
            background-size: 100%;
        }

    .my-shippments .shipment-status li.active .info-header .header-icon {
        background: url(images/myaccount/minus.svg) left center no-repeat;
        width: 14px;
        height: 14px;
        position: absolute;
        left: 24px;
        background-size: 100%;
    }

    .my-shippments .shipment-status li.active .option-content {
        display: block;
    }

    .my-shippments .shipment-status li .option-content {
        display: none;
        padding: 12px
    }

    .my-shippments .shipment-status .inprogress .option-icon {
        background: url(images/myshipment/inprogress.svg) center center no-repeat;
    }

    .my-shippments .shipment-status .delivered .option-icon {
        background: url(images/myshipment/delivered.svg) center center no-repeat;
        background-size: 100%;
    }

    .my-shippments .shipment-status .cancelled .option-icon {
        background: url(images/myshipment/cancelled.svg) center center no-repeat;
        background-size: 100%;
    }

    .my-shippments .shipment-status .open .option-icon {
        background: url(images/myshipment/open.svg) center center no-repeat;
        height: 27px
    }

    .my-shippments .shipment-status li.active .info-header {
        color: #fff;
    }

    .my-shippments .shipment-status li.active .shipment-count {
        color: #FFC685;
    }

    .my-shippments .shipment-status .active.inprogress .option-icon {
        background: url(images/myshipment/inprogress-active.svg) center center no-repeat;
    }

    .my-shippments .shipment-status .active.delivered .option-icon {
        background: url(images/myshipment/delivered-active.svg) center center no-repeat;
        background-size: 100%;
    }

    .my-shippments .shipment-status .active.cancelled .option-icon {
        background: url(images/myshipment/cancelled-active.svg) center center no-repeat;
        background-size: 100%;
    }

    .my-shippments .shipment-status .active.open .option-icon {
        background: url(images/myshipment/open-active.svg) center center no-repeat;
        height: 27px
    }

.my-shippments .data-table {
}

    .my-shippments .data-table .head {
    }

        .my-shippments .data-table .head th {
            font-size: 16px;
            color: #A7CCFD;
            padding: 12px;
            background: #1B365D;
            font-weight: 700;
            position: relative;
            padding-right: 16px
        }

    .my-shippments .data-table td {
        padding: 12px;
        font-size: 16px;
        color: #fff;
        padding-left: 16px
    }

    .my-shippments .data-table tr.head th:first-child {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .my-shippments .data-table tr.head th:last-child {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .my-shippments .data-table th::before {
        content: '';
        position: absolute;
        height: 20px;
        width: 2px;
        background: #1D4071;
        right: 0px;
        top: 14px
    }

    .my-shippments .data-table tr.head th:first-child::before {
        display: none;
    }

    .my-shippments .data-table td a {
        color: #fff;
        text-decoration: none;
    }

        .my-shippments .data-table td a.trackorder-link {
            color: #FF7F32
        }

    .my-shippments .data-table td .print {
        width: 24px;
        height: 24px;
        background: url(images/myshipment/printer.svg) center center no-repeat;
        display: block
    }

    .my-shippments .data-table td .delete {
        width: 24px;
        height: 24px;
        background: url(images/myshipment/trash.svg) center center no-repeat;
        display: block
    }

.order-confirm-dialog {
}

.delete-shipment-dialog .delete-shipment-dialog-content {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 10px;
}

    .delete-shipment-dialog .delete-shipment-dialog-content h3 {
        font-family: 'DINNextLTArabic-Medium';
        font-size: 25px;
        margin-top: 24px;
        color: #fff
    }

    .delete-shipment-dialog .delete-shipment-dialog-content .action-bar .btn-primary {
        background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
        height: 50px;
        width: 350px;
        border: none;
        text-align: left;
        padding: 0px 15px 0px 0px;
        color: #fff;
        font-size: 20px;
        font-family: 'Cairo', sans-serif;
        font-weight: 700;
        border-radius: 0px;
        -webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        border-radius: 0px;
        line-height: 44px;
        display: flex;
        margin: 20px auto 10px auto;
        position: relative;
    }

        .delete-shipment-dialog .delete-shipment-dialog-content .action-bar .btn-primary .icon {
            background: url(images/ar/round-right-arrow.svg) left top no-repeat !important;
            background-size: 24px;
            width: 24px;
            height: 24px;
            position: absolute;
            left: 12px;
            top: 16px;
        }
/*Shipment Tracking*/
.shipment-tracking {
}

    .shipment-tracking .sub-heading {
        font-size: 18px;
        color: #fff;
    }

    .shipment-tracking .date {
        font-size: 16px;
        color: #ECB920;
        font-style: italic;
        text-align: left;
        padding-bottom: 2px;
    }

    .shipment-tracking .shipment-summery {
        width: 770px;
    }

        .shipment-tracking .shipment-summery .col1 {
            width: 542px;
        }

        .shipment-tracking .shipment-summery .col2 {
            width: 215px;
        }

        .shipment-tracking .shipment-summery .tracking-details {
            height: 168px;
            position: relative;
            background: transparent linear-gradient(107deg, #007884 0%, #006670 100%) 0% 0% no-repeat;
            padding: 10px 72px 10px 10px;
        }

        .shipment-tracking .shipment-summery .consignment-details {
            height: 168px;
            background: #112B50;
            padding: 14px 20px;
            line-height: 1.4
        }

        .shipment-tracking .shipment-summery .tracking-details .shipment-icon {
            width: 50px;
            height: 50px;
            border: 2px solid #01616A;
            border-radius: 50%;
            background: #fff url(images/package-icon.svg) center center no-repeat;
            position: absolute;
            right: 10px;
            top: 10px;
        }

        .shipment-tracking .shipment-summery .field-caption {
            font-size: 14px;
            color: #7EE0EA
        }

        .shipment-tracking .shipment-summery .field-value {
            font-size: 14px;
            color: #fff
        }

        .shipment-tracking .shipment-summery .tracking-details .shipment-address.tm-30 {
            margin-top: 4px !important
        }

        .shipment-tracking .shipment-summery .tracking-details .tracking-number {
            line-height: normal
        }

            .shipment-tracking .shipment-summery .tracking-details .tracking-number .field-caption {
                font-weight: 700
            }

            .shipment-tracking .shipment-summery .tracking-details .tracking-number .field-value {
                font-size: 21px
            }

        .shipment-tracking .shipment-summery .tracking-details .status {
            height: 36px;
            min-width: 117px;
            background: #04555D url(images/ship-icon.svg) 94% center no-repeat;
            padding: 4px 37px 0px 0px;
            display: inline-block;
            position: absolute;
            left: 10px;
            top: 14px;
            line-height: 1.4;
        }

            .shipment-tracking .shipment-summery .tracking-details .status .field-caption {
                font-size: 9px;
                font-weight: 600;
                #7EE0EA
            }

            .shipment-tracking .shipment-summery .tracking-details .status .field-value {
                font-size: 14px;
                font-weight: 600;
                color: #fff;
            }

        .shipment-tracking .shipment-summery .tracking-details .address {
        }

        .shipment-tracking .shipment-summery .tracking-details .seprator {
            width: 2px;
            background: #04555D;
            height: 23px;
            margin: 24px 30px;
        }

        .shipment-tracking .shipment-summery .consignment-details .field-caption {
            color: #A7CCFD
        }

    .shipment-tracking .shipment-progress {
        position: relative;
        width: 940px;
        margin-bottom: 90px;
    }

        .shipment-tracking .shipment-progress .progress {
            list-style: none;
            margin: 0px;
            padding: 0px;
            width: 940px;
            height: 14px;
            background: #fff;
            border-radius: 0px;
            overflow: visible;
            position: relative;
        }

            .shipment-tracking .shipment-progress .progress > div {
                min-width: 150px;
                border-left: 1px solid #1B365D;
                position: relative;
                z-index: 2;
                flex: 1;
                min-width: 20%;
            }

                .shipment-tracking .shipment-progress .progress > div:first-child { /*min-width:95px;*/
                }

                .shipment-tracking .shipment-progress .progress > div:last-child { /*min-width:95px;*/
                    border-left: none;
                }

                .shipment-tracking .shipment-progress .progress > div .name {
                    font-size: 12px;
                    color: #fff;
                    opacity: 0.27;
                    width: 120px;
                    text-align: center;
                    position: absolute;
                    top: 34px;
                    text-transform: uppercase;
                    left: -33%;
                    line-height: 15px;
                }

                .shipment-tracking .shipment-progress .progress > div:first-child .name {
                    left: -50%;
                    left: -33%;
                }

                .shipment-tracking .shipment-progress .progress > div .step-icon {
                    width: 41px;
                    height: 41px;
                    background: #fff url(images/ship-icon.svg) center center no-repeat;
                    background-size: 20px;
                    border: 2px solid #01616A;
                    border-radius: 50%;
                    position: absolute;
                    position: absolute;
                    top: -12px;
                    left: -16%;
                    display: none;
                    z-index: 1;
                    left: -12%;
                }

            .shipment-tracking .shipment-progress .progress.step6 > div .step-icon {
                background: #fff url(images/green-check.svg) center center no-repeat;
                background-size: 20px;
            }

            .shipment-tracking .shipment-progress .progress > div:first-child .step-icon {
                left: -20%;
                left: -12%;
            }

            .shipment-tracking .shipment-progress .progress > div.active .step-icon {
                display: block
            }

            .shipment-tracking .shipment-progress .progress > div.active .name {
                opacity: 1;
                font-size: 14px;
            }

            .shipment-tracking .shipment-progress .progress:after {
                content: "";
                position: absolute;
                right: 0px;
                height: 14px;
                background: transparent linear-gradient(90deg, #68DAAE 0%, #FF9F2C 100%) 0% 0% no-repeat;
            }

            .shipment-tracking .shipment-progress .progress.step1:after {
                width: 95px;
                width: 20%;
            }

            .shipment-tracking .shipment-progress .progress.step2:after {
                width: 245px;
                width: 40%;
            }

            .shipment-tracking .shipment-progress .progress.step3:after {
                width: 395px;
                width: 60%;
            }

            .shipment-tracking .shipment-progress .progress.step4:after {
                width: 545px;
                width: 100%;
            }

            .shipment-tracking .shipment-progress .progress.step5:after {
                width: 695px;
            }

            .shipment-tracking .shipment-progress .progress.step6:after {
                width: 940px;
            }

    .shipment-tracking .shipment-activity {
    }

        .shipment-tracking .shipment-activity .activity {
        }

            .shipment-tracking .shipment-activity .activity .activity-date {
                height: 26px;
                line-height: 26px;
                width: 138px;
                background: #112B50;
                font-size: 14px;
                color: #fff;
                text-align: center;
                font-style: normal;
            }

            .shipment-tracking .shipment-activity .activity .step {
                height: 130px;
                position: relative;
                display: flex;
            }

                .shipment-tracking .shipment-activity .activity .step .step-bar {
                    width: 2px;
                    border-right: 2px dashed #2D4B76;
                    position: absolute;
                    right: 60px;
                    height: 100%
                }

                .shipment-tracking .shipment-activity .activity .step .step-bullet {
                    background: #DE671F;
                    width: 12px;
                    height: 12px;
                    border-radius: 10px;
                    position: absolute;
                    right: 56px;
                    top: 50%;
                    margin-top: -6px;
                }

                .shipment-tracking .shipment-activity .activity .step .step-description {
                    width: 590px;
                    padding-right: 80px;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 0px;
                }

                    .shipment-tracking .shipment-activity .activity .step .step-description .day-time {
                        font-size: 16px;
                        font-weight: 600;
                        color: #ECB920
                    }

                    .shipment-tracking .shipment-activity .activity .step .step-description .location {
                        font-size: 18px;
                        font-weight: 600;
                        color: #68DBAF;
                        background: url(images/location-icon.svg) right center no-repeat;
                        padding-right: 24px;
                    }

                    .shipment-tracking .shipment-activity .activity .step .step-description p {
                        margin: 0px;
                        padding: 0px;
                        font-size: 18px;
                        color: #fff;
                        line-height: 24px;
                        margin-bottom: 6px;
                    }

                        .shipment-tracking .shipment-activity .activity .step .step-description p .status {
                            font-weight: 700;
                            color: #FF7F32
                        }

                    .shipment-tracking .shipment-activity .activity .step .step-description .track-link {
                        font-size: 18px;
                        color: #FFC685
                    }

    .shipment-tracking .chat-btn {
        width: 150px;
        height: 42px;
        position: fixed;
        left: 20px;
        bottom: 20px;
        -webkit-clip-path: polygon(12% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
        clip-path: polygon(12% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
        border-radius: 6px;
        background: #FF7F32 url("images/chat-icon.svg") 94% center no-repeat;
        font-family: 'Cairo', sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        padding-right: 36px;
        display: flex;
        align-items: center;
        left: 10px;
    }
/*Shipment Tracking end*/
/*20-11-2020 end*/
.login-mobile-header {
    display: none;
}

.ui-tabs .ui-tabs-nav li {
    float: right;
    margin: 1px 0 0 2em;
}

.ui-dialog .ui-dialog-titlebar-close {
    left: 20px;
    right: auto;
}

.wallet-details {
    position: relative;
}

    .wallet-details .ui-widget {
        font-family: 'Cairo', sans-serif;
    }

    .wallet-details .summery-warapper {
        width: 455px;
        height: 80px;
        background: #1B365D;
        position: relative
    }

        .wallet-details .summery-warapper:after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -10px;
            left: 50%;
            width: 366px;
            height: 20px;
            margin-left: -183px;
            background: #1B2F4B 0% 0% no-repeat padding-box;
            opacity: 1;
            filter: blur(11px);
            z-index: -1;
        }

    .wallet-details .button-warapper {
        width: 260px;
        height: 80px;
        background: #1B365D;
        position: relative;
        width: 425px
    }

        .wallet-details .button-warapper:after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -10px;
            left: 50%;
            width: 212px;
            height: 20px;
            margin-left: -106px;
            background: #1B2F4B 0% 0% no-repeat padding-box;
            opacity: 1;
            filter: blur(11px);
            z-index: -1;
        }

    .wallet-details .wallet-blance {
        width: 425px;
        height: 80px;
        background: transparent linear-gradient(80deg, #274C81 0%, #4C6D9F 100%) 0% 0% no-repeat;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        padding: 0px 20px;
        display: flex;
        font-size: 20px;
        color: #fff;
        margin-left: 30px;
    }

        .wallet-details .wallet-blance .blance {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: url(images/wallet-icon.svg) right center no-repeat;
            width: 100%;
            padding-right: 34px;
        }

        .wallet-details .wallet-blance .amount {
            font-weight: 700;
            font-size: 35px
        }

            .wallet-details .wallet-blance .amount .currency {
                font-size: 20px;
                vertical-align: super;
                font-weight: 400;
            }

    .wallet-details .wallet-recharge-btn {
        width: 260px;
        height: 80px;
        background: #007884 url(images/card-icon.svg) right 20px center no-repeat;
        background-size: 22px;
        border: none;
        webkit-clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        font-family: 'Cairo', sans-serif;
        font-size: 20px;
        color: #fff;
        text-align: right;
        padding-right: 54px;
        position: relative;
        width: 425px;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
    }

        .wallet-details .wallet-recharge-btn .small-txt {
            font-size: 12px;
            color: #7EE0EA;
            display: block
        }

        .wallet-details .wallet-recharge-btn .card-icon {
            background: url(images/card-icon.svg) left center no-repeat;
            width: 18px;
            height: 14px;
            display: none;
        }

        .wallet-details .wallet-recharge-btn .icon {
            background: url(images/ar/round-right-arrow.svg) left top no-repeat !important;
            width: 20px;
            height: 20px;
            position: absolute;
            left: 12px;
            bottom: 10px;
        }

    .wallet-details .sub-heading {
        border-bottom: 3px solid #FF7F32;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        display: inline-block;
        padding-bottom: 4px
    }

    .wallet-details .group-title {
        font-size: 16px;
        font-style: italic;
        color: #FFC685
    }

    .wallet-details .transactions-list {
        display: flex;
        margin-top: 20px;
        flex-wrap: wrap;
        position: relative
    }

        .wallet-details .transactions-list .transaction-card {
            height: 180px;
            width: 425px;
            background: #112B50;
            margin: 0px 00px 30px 30px;
            webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
            clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
            padding: 14px 20px;
            font-size: 12px;
            color: #5F8CC9;
            min-height: 180px;
            height: auto;
        }

            .wallet-details .transactions-list .transaction-card .date {
                font-size: 16px;
            }

            .wallet-details .transactions-list .transaction-card .status {
                font-size: 16px;
            }

                .wallet-details .transactions-list .transaction-card .status.success {
                    color: #68DBAF
                }

                .wallet-details .transactions-list .transaction-card .status.unsuccess {
                    color: #E22E3C
                }

            .wallet-details .transactions-list .transaction-card .field-caption {
                letter-spacing: 1.1px;
                color: #5F8CC9;
                text-transform: uppercase;
            }

            .wallet-details .transactions-list .transaction-card .field-value {
                font-size: 17px;
                color: #fff;
                margin-top: -2px;
            }

            .wallet-details .transactions-list .transaction-card .sep {
                font-size: 12px;
                padding: 0px 4px
            }

            .wallet-details .transactions-list .transaction-card .currency {
            }

            .wallet-details .transactions-list .transaction-card .currency {
                font-size: 11px;
                vertical-align: super;
                font-weight: 400;
            }

            .wallet-details .transactions-list .transaction-card .package-price .field-value {
                color: #FFC685
            }

            .wallet-details .transactions-list .transaction-card .transaction-amount {
                font-size: 62px;
                letter-spacing: -4.34px;
                font-weight: 700;
                color: #fff;
                line-height: normal;
                display: inline-block;
            }

                .wallet-details .transactions-list .transaction-card .transaction-amount .currency {
                    font-size: 20px;
                    letter-spacing: 0;
                    float: left;
                    padding-top: 10px;
                }

            .wallet-details .transactions-list .transaction-card .download-invoice {
                font-size: 15px;
                color: #fff;
                font-family: 'Cairo', sans-serif;
                background: url(images/download-icon.svg) left 5px no-repeat;
                padding-left: 24px;
                font-weight: 600
            }

            .wallet-details .transactions-list .transaction-card .reason {
                white-space: -moz-pre-wrap !important;
                white-space: -webkit-pre-wrap;
                white-space: -pre-wrap;
                white-space: -o-pre-wrap;
                white-space: pre-wrap;
                word-wrap: break-word;
                word-break: break-all;
                white-space: normal;
            }

.app-wrapper .content-wrapper .myaccount {
    padding-top: 10px;
}

    .app-wrapper .content-wrapper .myaccount > ul, .app-wrapper .content-wrapper .myaccount > li {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    .app-wrapper .content-wrapper .myaccount .account-option {
        width: 820px;
    }

        .app-wrapper .content-wrapper .myaccount .account-option > li {
            margin-bottom: 20px;
            background: #112B50;
            border-radius: 3px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option .info-header {
            height: 45px;
            display: flex;
            align-items: center;
            font-size: 18px;
            color: #fff;
            padding: 0px 16px;
            position: relative;
        }

            .app-wrapper .content-wrapper .myaccount .account-option .info-header .option-icon {
                width: 23px;
                height: 23px;
                margin-left: 16px;
            }

        .app-wrapper .content-wrapper .myaccount .account-option .personal-info .option-icon {
            background: url(images/myaccount/profile.svg) left center no-repeat;
        }

        .app-wrapper .content-wrapper .myaccount .account-option .retail-centre .option-icon {
            background: url(images/myaccount/centres.svg) left center no-repeat;
        }

        .app-wrapper .content-wrapper .myaccount .account-option .id-verification .option-icon {
            background: url(images/myaccount/id-verification.svg) left center no-repeat;
        }

        .app-wrapper .content-wrapper .myaccount .account-option .bank-details .option-icon {
            background: url(images/myaccount/bank.svg) left center no-repeat;
        }

        .app-wrapper .content-wrapper .myaccount .account-option .account-setting .option-icon {
            background: url(images/myaccount/setting.svg) left center no-repeat;
        }

        .app-wrapper .content-wrapper .myaccount .account-option .info-header .seprator {
            color: #7EE0EA;
            font-size: 11px;
            font-style: italic;
            padding: 0px 6px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option .info-header .status {
            color: #7EE0EA;
            font-size: 16px;
            font-style: italic;
        }

        .app-wrapper .content-wrapper .myaccount .account-option .info-header .tick-icon {
            background: url(images/Check.svg) left top no-repeat;
            width: 23px;
            height: 23px;
            background-size: 23px;
            margin-right: 10px;
            display: none;
        }

        .app-wrapper .content-wrapper .myaccount .account-option > li.complited .info-header .tick-icon {
            display: block;
        }

        .app-wrapper .content-wrapper .myaccount .account-option > li.complited .seprator,
        .app-wrapper .content-wrapper .myaccount .account-option > li.complited .status {
            display: none;
        }

        .app-wrapper .content-wrapper .myaccount .account-option .info-header .header-icon {
            background: url(images/myaccount/plus.svg) left center no-repeat;
            width: 14px;
            height: 14px;
            position: absolute;
            left: 26px;
            background-size: 100%;
        }

        .app-wrapper .content-wrapper .myaccount .account-option li.active .info-header .header-icon {
            background: url(images/myaccount/minus.svg) left center no-repeat;
            width: 14px;
            height: 14px;
            position: absolute;
            left: 26px;
            background-size: 100%;
        }

        .app-wrapper .content-wrapper .myaccount .account-option li.active .option-content {
            display: block;
        }

        .app-wrapper .content-wrapper .myaccount .account-option li .option-content {
            display: none;
            padding: 20px 30px 30px 54px
        }

        .app-wrapper .content-wrapper .myaccount .account-option li .form-group .col-sm-6 .form-control {
            -webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        }

        .app-wrapper .content-wrapper .myaccount .account-option li .form-group .col-sm-12 .form-control {
            -webkit-clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        }

        .app-wrapper .content-wrapper .myaccount .account-option li .form-group .btn-primary {
            webkit-clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%)
        }

        .app-wrapper .content-wrapper .myaccount .account-option li .form-group .col-sm-6 .form-control.phone-number {
            -webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        }

        .app-wrapper .content-wrapper .myaccount .account-option li .form-group .birthday-info {
            font-size: 16px;
            font-style: italic;
            color: #D0A907;
            line-height: 23px;
        }

    .app-wrapper .content-wrapper .myaccount .retail-centre .centre-search .form-control.search {
        background: #2D4D79 url(images/address-book/search-icon.svg) 2% center no-repeat;
        -webkit-clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 27%);
        clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 27%);
    }

    .app-wrapper .content-wrapper .myaccount .form-group .form-control.user-id {
        background: #2D4D79 url(images/IDNumber.svg) 2% center no-repeat;
    }

    .app-wrapper .content-wrapper .myaccount .form-group .custom-file {
        height: 114px;
    }

        .app-wrapper .content-wrapper .myaccount .form-group .custom-file .custom-file-label {
            background: none;
            border: none;
            padding: 0px;
            height: 114px;
            border: 1px dashed #fff;
            text-transform: none;
            padding: 50px 80px 0px 80px;
            text-align: center;
            background: url(images/Plus.svg) center 22px no-repeat;
            border-radius: 0px;
        }

    .app-wrapper .content-wrapper .myaccount .form-group .custom-file-input:lang(en) ~ .custom-file-label::after {
        display: none
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre.centre-search .map-link {
        font-size: 14px;
        color: #FFC685;
        letter-spacing: 1.4px;
        background: url(images/address-book/map-link-icon.svg) right top no-repeat;
        padding-right: 28px;
        text-decoration: none;
        position: absolute;
        top: 0px;
        left: 18px;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .form-group {
        margin-top: 10px;
        position: relative;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .centre-search .map-link {
        font-size: 14px;
        color: #FFC685;
        letter-spacing: 1.4px;
        background: url(images/address-book/map-link-icon.svg) right top no-repeat;
        padding-right: 28px;
        text-decoration: none;
        position: absolute;
        top: 0px;
        left: 18px;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list-caption {
        font-size: 16px;
        font-style: italic;
        color: #fff;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .showmore-link {
        font-family: 'Cairo', sans-serif;
        color: #fff;
        text-decoration: none;
        background: url(images/address-book/down-arrow.svg) right center no-repeat;
        padding-right: 30px;
        background-size: 20px;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list {
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0px 0px 0px 14px;
    }

        .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list .centre-card {
            width: 350px;
            height: 176px;
            background: #1B365D;
            padding: 14px;
            margin: 0px 0px 30px 0px;
            position: relative;
            padding-top: 4px;
        }

            .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list .centre-card .sr-no {
                font-size: 33px;
                color: #688CC4;
                opacity: 0.24;
            }

            .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list .centre-card .check-icon {
                width: 26px;
                height: 26px;
                background: url(images/Deactivated.svg) left top no-repeat;
                background-size: 26px;
            }

            .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list .centre-card .centre-name {
                font-size: 16px;
                font-family: 'Cairo', sans-serif;
                font-weight: 700;
                color: #fff;
                margin-bottom: 4px
            }

            .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list .centre-card .centre-distance {
                font-size: 14px;
                color: #FF7F32;
                margin-top: -4px;
                font-family: 'Cairo', sans-serif;
                ont-weight: 700;
            }

            .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list .centre-card .centre-address {
                font-size: 14px;
                color: #A7CCFD;
                line-height: 20px;
                margin-bottom: 3px;
            }

            .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list .centre-card .map-link {
                background: url(images/address-book/map-link-icon.svg) left top no-repeat;
                font-size: 14px;
                letter-spacing: -0.28px;
                color: #FFC685;
                padding-left: 28px;
                margin-top: 4px;
            }

            .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list .centre-card.selected .check-icon {
                background: url(images/Check.svg) left top no-repeat;
            }

    .app-wrapper .content-wrapper .myaccount .bank-form-label {
        font-family: 'Cairo', sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: #FF7F32;
        margin-bottom: 14px;
    }

    .app-wrapper .content-wrapper .myaccount .bank-info {
        color: #fff;
        font-size: 14px;
        line-height: 18px;
    }

    .app-wrapper .content-wrapper .myaccount .account-option .account-setting .setting-selection {
    }

        .app-wrapper .content-wrapper .myaccount .account-option .account-setting .setting-selection .btn {
            border-radius: 0px;
            padding: 0px;
            display: flex;
            padding: 0px;
            border: none;
            min-width: 94px;
            height: 48px;
            font-family: 'DINNextLTArabic-Medium';
            font-size: 16px;
            background: #1B365D;
            margin-left: 14px;
            color: #fff;
            justify-content: center;
            align-items: center;
        }

            .app-wrapper .content-wrapper .myaccount .account-option .account-setting .setting-selection .btn .tick {
                background: url(images/Check.svg) left top no-repeat;
                width: 13px;
                height: 13px;
                background-size: 13px;
                margin-left: 6px;
                display: none;
            }

            .app-wrapper .content-wrapper .myaccount .account-option .account-setting .setting-selection .btn.on {
                background: #FF7F32
            }

                .app-wrapper .content-wrapper .myaccount .account-option .account-setting .setting-selection .btn.on .tick {
                    display: block
                }

body.popup {
    overflow: hidden
}

    body.popup .app-wrapper {
        filter: blur(7px);
    }
/*25-11-2020*/
.app-wrapper .content-wrapper .side-nav-bar .mobile-header {
    display: none;
}

.bottom-nav-bar {
    display: none;
}

.mobile-only {
    display: none !important;
}
/*25-11-2020 end*/
/*16-12-2020 DashBoard*/
.dashboard-details {
}

.app-wrapper .content-wrapper .content .dashboard-details .page-guidetxt {
    font-size: 20px;
    font-weight: 300;
}

.dashboard-details .top-section {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.dashboard-details .left-col {
    width: 50%;
}

.dashboard-details .right-col {
    width: 50%;
}

.dashboard-details .profile-details {
    display: flex;
}

    .dashboard-details .profile-details .user-name {
        font-size: 25px;
        color: #FFC685;
        font-family: 'Cairo', sans-serif;
        width: 290px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .dashboard-details .profile-details.profile-completed .user-name {
        width: 98%
    }

    .dashboard-details .profile-details .profile-status-btn {
        background: #982037;
        height: 35px;
        width: 200px;
        border: none;
        text-align: right;
        padding: 0px 26px 0px 0px;
        color: #fff;
        font-size: 12px;
        font-family: 'Cairo', sans-serif;
        border-radius: 0px;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        border-radius: 0px;
        line-height: 35px;
        display: flex;
        ;
        position: relative;
        margin-right: 12px;
    }

        .dashboard-details .profile-details .profile-status-btn > span {
            display: block !important
        }

        .dashboard-details .profile-details .profile-status-btn .icon {
            background: url("images/ar/round-right-arrow.svg") left top no-repeat;
            width: 16px;
            height: 16px;
            position: absolute;
            left: 10px;
            top: 10px;
            background-size: 16px;
        }

        .dashboard-details .profile-details .profile-status-btn .info-icon {
            background: url("images/info-new-icon.svg") left top no-repeat;
            width: 15px;
            height: 13px;
            position: absolute;
            right: 6px;
            top: 10px;
            background-size: 16px;
        }

.dashboard-details .wallet-summery {
    display: flex
}

    .dashboard-details .wallet-summery .wallet-blance {
        width: 290px;
        height: 55px;
        background: transparent linear-gradient(80deg, #274C81 0%, #4C6D9F 100%) 0% 0% no-repeat;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        padding: 0px 12px;
        display: flex;
        font-size: 14px;
        color: #fff;
        margin-left: 10px;
    }

        .dashboard-details .wallet-summery .wallet-blance .blance {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: url(images/dashboard/wallet-icon.svg) right center no-repeat;
            width: 100%;
            padding-right: 20px;
            background-size: 13px;
        }

        .dashboard-details .wallet-summery .wallet-blance .amount {
            font-weight: 700;
            font-size: 24px
        }

            .dashboard-details .wallet-summery .wallet-blance .amount .currency {
                font-size: 12px;
                vertical-align: super;
                font-weight: 400;
            }

    .dashboard-details .wallet-summery .wallet-recharge-btn {
        width: 210px;
        height: 55px;
        background: #007884;
        border: none;
        webkit-clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        font-family: 'Cairo', sans-serif;
        font-size: 14px;
        color: #fff;
        text-align: right;
        padding-right: 44px;
        position: relative
    }

        .dashboard-details .wallet-summery .wallet-recharge-btn .small-txt {
            font-size: 12px;
            color: #7EE0EA;
            display: block
        }

        .dashboard-details .wallet-summery .wallet-recharge-btn .card-icon {
            background: url(images/card-icon.svg) right center no-repeat;
            width: 18px;
            height: 14px;
            display: block;
            position: absolute;
            right: 16px;
            top: 21px;
        }

        .dashboard-details .wallet-summery .wallet-recharge-btn .icon {
            background: url(images/ar/round-right-arrow.svg) left top no-repeat;
            width: 16px;
            height: 16px;
            position: absolute;
            left: 12px;
            top: 22px;
            background-size: 16px;
        }

.dashboard-details .purchase-details {
    display: flex;
}

.dashboard-details .sub-heading {
    border-bottom: 3px solid #FF7F32;
    font-size: 20px;
    color: #fff;
    display: inline-block;
    padding-bottom: 4px;
    font-family: 'Cairo', sans-serif;
    margin-bottom: 12px;
}

.dashboard-details .package-list {
    display: flex;
    align-items: center !important;
    margin-top: 10px
}

    .dashboard-details .package-list .add-package-btn {
        width: 88px;
        height: 85px;
        background: #2f4f7e;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        border: none;
        position: relative;
        padding: 10px 6px;
        margin-top: 0px;
        margin-bottom: 10px;
        color: #fff;
    }

        .dashboard-details .package-list .add-package-btn .buy-icon {
            background: url(images/buy-icon.svg) left top no-repeat;
            width: 16px;
            height: 18px;
            position: absolute;
            right: 6px;
            top: 12px;
            background-size: 100%;
        }

        .dashboard-details .package-list .add-package-btn .icon {
            background: url(images/plus-icon.svg) left top no-repeat;
            width: 18px;
            height: 18px;
            position: absolute;
            left: 6px;
            bottom: 6px;
            background-size: 100%;
        }

        .dashboard-details .package-list .add-package-btn .txt .bold-txt {
            font-family: 'Lato', sans-serif;
            display: block;
            font-size: 12px;
            line-height: 15px;
            margin-top: 11px;
            text-align: right;
        }

    .dashboard-details .package-list .bundle-card {
        width: 88px;
        height: 85px;
        margin: 0px 0px 10px 16px;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        padding: 4px 10px 10px 10px;
    }

    .dashboard-details .package-list .bundle-list {
        margin-top: 0px;
    }

.dashboard-details .small-heading {
    font-size: 12px;
    color: #ECB920;
    font-style: italic
}

.dashboard-details .package-list .bundle-list .bundle-card .weight {
    letter-spacing: -2.94px;
    font-size: 42px;
    font-weight: 700;
    font-size: 36px;
}

    .dashboard-details .package-list .bundle-list .bundle-card .weight span {
        font-size: 14px;
        padding-left: 6px;
    }

.dashboard-details .package-list .bundle-list .waybillleft {
    font-size: 10px;
    font-style: italic;
    font-weight: 700
}

.dashboard-details .viewall-link {
    display: block;
    font-size: 13px;
    font-style: italic;
    color: #5F8CC9;
    background: url(images/dashboard/ar-rightarrow.svg) left center no-repeat;
    background-size: 16px;
    padding-left: 24px;
}

.dashboard-details .shipments-details {
    width: 487px;
}

    .dashboard-details .shipments-details .user-shipments {
        width: 487px;
        height: 85px;
        background: #112B50;
        margin-top: 10px;
        webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 16%);
        clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 16%);
        display: flex;
        justify-content: center;
        align-items: center;
        direction: ltr;
    }

        .dashboard-details .shipments-details .user-shipments .shipment {
            display: flex;
            justify-content: space-around;
            width: 90%;
            margin: 0px auto;
        }

            .dashboard-details .shipments-details .user-shipments .shipment .caption {
                font-size: 14px;
                color: #A7CCFD
            }

            .dashboard-details .shipments-details .user-shipments .shipment .value {
                font-size: 14px;
                color: #fff
            }

            .dashboard-details .shipments-details .user-shipments .shipment .shipment-id {
                background: url(images/shipment-round-icon.svg) left center no-repeat;
                background-size: 34px;
                padding-left: 42px;
                ;
                padding-right: 16px;
            }

            .dashboard-details .shipments-details .user-shipments .shipment .location {
            }

                .dashboard-details .shipments-details .user-shipments .shipment .location .value {
                    text-transform: uppercase;
                    display: flex;
                    align-items: center;
                }

                .dashboard-details .shipments-details .user-shipments .shipment .location .seprator {
                    color: #EF8546;
                    font-weight: 700;
                    background: url(images/dashboard/orangearrow.svg) left top no-repeat !important;
                    width: 13px;
                    height: 11px;
                    font-size: 0px;
                    margin: 0px 5px;
                    transform: rotate( -180deg );
                }

            .dashboard-details .shipments-details .user-shipments .shipment .status {
            }

                .dashboard-details .shipments-details .user-shipments .shipment .status .value {
                    color: #68DBAF
                }

.dashboard-details .overview {
    margin-top: 30px;
}

.dashboard-details .date-filter {
    display: flex;
    margin-bottom: 20px;
}

    .dashboard-details .date-filter .date {
        margin-left: 20px;
    }

        .dashboard-details .date-filter .date label {
            display: block;
            font-family: 'DINNextLTArabic-Regular';
            font-size: 12px;
            color: #fff;
            margin-bottom: 2px;
            padding-left: 2px;
        }

        .dashboard-details .date-filter .date .form-control {
            background: #112B50 url(images/calendar-icon.svg) 4% center no-repeat;
            width: 148px;
            height: 40px;
            border: none;
            border-radius: 0px;
            color: #fff;
            font-family: 'Lato', sans-serif;
            font-size: 13px;
            padding-left: 0px;
            padding-right: 10px;
            text-align: right;
        }

            .dashboard-details .date-filter .date .form-control::-webkit-calendar-picker-indicator {
                display: none;
                -webkit-appearance: none;
            }

    .dashboard-details .date-filter .btn-primary {
        background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
        height: 40px;
        width: 170px;
        border: none;
        text-align: right;
        padding: 0px 10px 0px 0px;
        color: #fff;
        font-size: 15px;
        font-family: 'Cairo', sans-serif;
        border-radius: 0px;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        border-radius: 0px;
        line-height: 40px;
        display: flex;
        margin: 19px auto 0px auto;
        position: relative;
    }

        .dashboard-details .date-filter .btn-primary .icon {
            background: url(images/dashboard-Search.svg) left top no-repeat;
            background-size: 14px;
            width: 14px;
            height: 14px;
            position: absolute;
            left: 10px;
            top: 13px;
        }

.dashboard-details .overview .overflow-items {
    display: flex;
}

    .dashboard-details .overview .overflow-items .item {
        width: 240px;
        height: 100px;
        background: #2F4F7E;
        margin-left: 25px;
        display: flex;
        align-items: center;
        padding-right: 14px
    }

    .dashboard-details .overview .overflow-items .shipment-total {
        border-right: 5px solid #1E75FF;
        background: #2F4F7E url(images/dashboard/package-icon.svg) 4% 10px no-repeat;
        background-size: 32px;
    }

    .dashboard-details .overview .overflow-items .shipment-delivered {
        border-right: 5px solid #3DD598;
        background: #2F4F7E url(images/dashboard/sales-icon.svg) 4% 10px no-repeat;
    }

    .dashboard-details .overview .overflow-items .shipment-transit {
        border-right: 5px solid #FF974A;
        background: #2F4F7E url(images/dashboard/ship-icon.svg) 4% 10px no-repeat;
    }

    .dashboard-details .overview .overflow-items .shipment-return {
        border-right: 5px solid #ECB920;
        background: #2F4F7E url(images/dashboard/report-icon.svg) 4% 10px no-repeat;
    }

    .dashboard-details .overview .overflow-items .item .value {
        font-size: 26px;
        color: #fff;
    }

    .dashboard-details .overview .overflow-items .item .caption {
        font-size: 16px;
        color: #E4E4E4;
        line-height: normal;
    }

    .dashboard-details .overview .overflow-items .item .circle {
        width: 57px;
        height: 57px;
        background: #1B3D6E;
        border-radius: 50%;
        margin-left: 10px;
        position: relative
    }

        .dashboard-details .overview .overflow-items .item .circle canvas {
            width: 57px !important;
            height: 57px !important
        }

        .dashboard-details .overview .overflow-items .item .circle strong {
            position: absolute;
            left: 7px;
            top: 18px;
            font-size: 14px;
            font-weight: normal;
            color: #fff;
            width: 78%;
            text-align: center
        }

.dashboard-details .dashboard-chart {
    display: flex;
    margin-top: 30px;
}

.dashboard-details .chart-wrapper {
    background: #2F4F7E;
    height: 260px;
    margin-left: 25px;
}

.dashboard-details .right-col .chart-wrapper {
    display: flex;
}

    .dashboard-details .right-col .chart-wrapper #doughnut-lables {
        min-width: 45%;
        padding: 10px 10px 10px 10px;
    }

        .dashboard-details .right-col .chart-wrapper #doughnut-lables .caption {
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            opacity: .5;
        }

            .dashboard-details .right-col .chart-wrapper #doughnut-lables .caption.active {
                opacity: 1;
            }

            .dashboard-details .right-col .chart-wrapper #doughnut-lables .caption .cart-badge {
                width: 24px;
                height: 24px;
                background: #6084BA;
                webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
                clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
                margin-left: 10px;
            }

                .dashboard-details .right-col .chart-wrapper #doughnut-lables .caption .cart-badge.option1 {
                    background: #6084BA;
                }

                .dashboard-details .right-col .chart-wrapper #doughnut-lables .caption .cart-badge.option2 {
                    background: #60C1CA;
                }

                .dashboard-details .right-col .chart-wrapper #doughnut-lables .caption .cart-badge.option3 {
                    background: #E17D44;
                }

                .dashboard-details .right-col .chart-wrapper #doughnut-lables .caption .cart-badge.option4 {
                    background: #C34058;
                }

                .dashboard-details .right-col .chart-wrapper #doughnut-lables .caption .cart-badge.option5 {
                    background: #28b87a;
                }

            .dashboard-details .right-col .chart-wrapper #doughnut-lables .caption .text {
                font-size: 16px;
                color: #fff;
                font-size: 12px;
            }

                .dashboard-details .right-col .chart-wrapper #doughnut-lables .caption .text label {
                    margin: 0px;
                    display: block;
                    font-size: 12px;
                    color: #fff;
                }
    /*22-04-2021*/
    .dashboard-details .right-col .chart-wrapper .doughnut-map {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .dashboard-details .right-col .chart-wrapper .doughnut-map .circle {
            width: 180px;
            height: 180px;
            background: #1B3D6E;
            border-radius: 50%;
            margin-right: 10px;
            position: relative;
        }

            .dashboard-details .right-col .chart-wrapper .doughnut-map .circle canvas {
                width: 180px !important;
                height: 180px !important;
            }

            .dashboard-details .right-col .chart-wrapper .doughnut-map .circle strong {
                position: absolute;
                left: 0px;
                font-size: 40px;
                font-weight: 700;
                color: #fff;
                width: 100%;
                text-align: center;
                top: 50%;
                transform: translateY(-50%);
                padding: 0px 10px;
            }

                .dashboard-details .right-col .chart-wrapper .doughnut-map .circle strong span {
                    display: block;
                    font-size: 24px;
                    font-weight: 400;
                    line-height: 1;
                    padding: 0px 20px;
                }
    /*22-04-2021 end*/
    .dashboard-details .right-col .chart-wrapper .chartjs-render-monitor {
        min-width: 55%;
        max-width: 60%;
        transform: translateY(50%);
    }

.dashboard-details .shipments-details .user-shipments .owl-nav {
    font-size: 0px;
}

    .dashboard-details .shipments-details .user-shipments .owl-nav .owl-prev {
        background: url(images/dashboard/backarrow.svg) left top no-repeat !important;
        width: 20px;
        height: 20px;
        position: absolute;
        left: 10px;
        top: 30px;
        transform: rotate(180deg);
    }

    .dashboard-details .shipments-details .user-shipments .owl-nav .owl-next {
        background: url(images/dashboard/nextarrow.svg) left top no-repeat !important;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 10px;
        top: 30px;
    }

.dashboard-details .page-guidetxt {
    margin-top: 20px;
}

.dashboard-details .pending-items {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
    position: relative;
}

    .dashboard-details .pending-items .pending-card {
        height: 255px;
        width: 430px;
        background: #112B50;
        margin: 0px 0px 30px 30px;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
        padding: 14px 20px;
        font-size: 12px;
        color: #5F8CC9;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

        .dashboard-details .pending-items .pending-card .top {
            margin-bottom: 15px;
        }

        .dashboard-details .pending-items .pending-card .middle {
            margin-bottom: 25px;
        }

        .dashboard-details .pending-items .pending-card .item-title {
            font-size: 20px;
            color: #fff;
        }

            .dashboard-details .pending-items .pending-card .item-title .icon {
                width: 36px;
                height: 36px;
                margin-left: 14px;
            }

            .dashboard-details .pending-items .pending-card .item-title .id-verification {
                background: url(images/dashboard/id-verification.svg) left center no-repeat;
                background-size: 100%;
            }

            .dashboard-details .pending-items .pending-card .item-title .personal-info {
                background: url(images/dashboard/profile.svg) left center no-repeat;
                background-size: 100%;
            }

            .dashboard-details .pending-items .pending-card .item-title .retail-centre {
                background: url(images/dashboard/centres.svg) left center no-repeat;
                background-size: 100%;
            }

            .dashboard-details .pending-items .pending-card .item-title .bank-details {
                background: url(images/dashboard/bank.svg) left center no-repeat;
                background-size: 100%;
            }

        .dashboard-details .pending-items .pending-card .status {
            color: #68D1DB;
            font-style: italic
        }

        .dashboard-details .pending-items .pending-card .description {
            color: #A7CCFD;
            font-size: 14px;
            line-height: 19px;
            padding-left: 20px;
        }

        .dashboard-details .pending-items .pending-card .counter {
            font-weight: 700;
            font-size: 90px;
            color: #183258;
            line-height: 1;
        }

        .dashboard-details .pending-items .pending-card .btn-primary {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 28px;
            width: 140px;
            border: none;
            text-align: left;
            padding: 0px 10px 0px 0px;
            color: #fff;
            font-size: 16px;
            font-family: 'DINNextLTArabic-Bold';
            border-radius: 0px;
            -webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
            clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
            border-radius: 0px;
            line-height: 28px;
            display: flex;
            margin: 0px;
            position: relative;
        }

            .dashboard-details .pending-items .pending-card .btn-primary .icon {
                background: url(images/ar/round-right-arrow.svg) left top no-repeat;
                background-size: 100%;
                width: 16px;
                height: 16px;
                position: absolute;
                left: 11px;
                top: 7px;
            }

        .dashboard-details .pending-items .pending-card .critical-indicator {
            width: 110px;
            height: 28px;
            background: transparent linear-gradient(180deg, #AA2F46 0%, #8B162C 100%) 0% 0% no-repeat;
            position: relative;
            font-size: 16px;
            color: #fff;
            text-transform: uppercase;
            font-family: 'DINNextLTArabic-Medium';
            letter-spacing: 1.6px;
            padding-right: 26px;
            font-size: 14px;
            line-height: 26px
        }

            .dashboard-details .pending-items .pending-card .critical-indicator .info-icon {
                background: url(images/info.svg) left top no-repeat;
                width: 15px;
                height: 13px;
                position: absolute;
                right: 6px;
                top: 7px;
                background-size: 16px;
            }
/*16-12-2020 DashBoard end*/
/*06-01-2021 Repors*/
.reports {
}

    .reports .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
        font-size: 14px;
        font-weight: normal;
        padding-right: 30px
    }

    .reports .ui-tabs .ui-tabs-nav li {
        margin-left: 30px
    }

        .reports .ui-tabs .ui-tabs-nav li.tab1 a {
            background: url(images/reports/valume-summary.svg) right center no-repeat;
            background-size: 15px;
        }

        .reports .ui-tabs .ui-tabs-nav li.tab2 a {
            background: url(images/reports/shipment-status.svg) right center no-repeat;
            background-size: 17px;
        }

        .reports .ui-tabs .ui-tabs-nav li.tab3 a {
            background: url(images/reports/delivered-shipments.svg) right center no-repeat;
            background-size: 19px;
        }

        .reports .ui-tabs .ui-tabs-nav li.tab4 a {
            background: url(images/reports/returns-shipments.svg) right center no-repeat;
            background-size: 24px;
        }

        .reports .ui-tabs .ui-tabs-nav li.tab5 a {
            background: url(images/reports/shipment-details.svg) right center no-repeat;
            background-size: 16px;
        }

.ui-tabs .ui-tabs-nav li.tab1.ui-tabs-active .ui-tabs-anchor {
    background: url(images/reports/valume-summary-active.svg) right center no-repeat;
    background-size: 15px;
}

.ui-tabs .ui-tabs-nav li.tab2.ui-tabs-active .ui-tabs-anchor {
    background: url(images/reports/shipment-status-active.svg) right center no-repeat;
    background-size: 17px;
}

.ui-tabs .ui-tabs-nav li.tab3.ui-tabs-active .ui-tabs-anchor {
    background: url(images/reports/delivered-shipments-active.svg) right center no-repeat;
    background-size: 19px;
}

.ui-tabs .ui-tabs-nav li.tab4.ui-tabs-active .ui-tabs-anchor {
    background: url(images/reports/returns-shipments-active.svg) right center no-repeat;
    background-size: 24px;
}

.ui-tabs .ui-tabs-nav li.tab5.ui-tabs-active .ui-tabs-anchor {
    background: url(images/reports/shipment-details-active.svg) right center no-repeat;
    background-size: 16px;
}

.reports .date-filter {
    display: flex;
}

    .reports .date-filter .date {
        margin-left: 20px;
    }

        .reports .date-filter .date label {
            display: block;
            font-family: 'DINNextLTArabic-Regular';
            font-size: 12px;
            color: #fff;
            margin-bottom: 2px;
            padding-left: 2px;
        }

        .reports .date-filter .date .form-control {
            background: #112B50 url(images/calendar-icon.svg) 4% center no-repeat;
            width: 148px;
            height: 40px;
            border: none;
            border-radius: 0px;
            color: #fff;
            font-family: 'Lato', sans-serif;
            font-size: 13px;
            padding-right: 10px;
        }

            .reports .date-filter .date .form-control::-webkit-calendar-picker-indicator {
                display: none;
                -webkit-appearance: none;
            }

    .reports .date-filter .btn-primary {
        background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
        height: 40px;
        width: 145px;
        border: none;
        text-align: left;
        padding: 0px 10px 0px 0px;
        color: #fff;
        font-size: 16px;
        font-family: 'DINNextLTArabic-Bold';
        border-radius: 0px;
        border-radius: 0px;
        line-height: 40px;
        display: flex;
        margin: 19px auto 0px auto;
        position: relative;
    }

        .reports .date-filter .btn-primary .icon {
            background: url(images/ar/round-right-arrow.svg) left top no-repeat;
            background-size: 20px;
            width: 20px;
            height: 20px;
            position: absolute;
            left: 10px;
            top: 11px;
        }

.reports .report-details .report-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

    .reports .report-details .report-top .btn-primary.btn-export {
        background: #007884 !important;
        height: 40px;
        width: 145px;
        border: none;
        text-align: left;
        padding: 0px 10px 0px 0px;
        color: #fff;
        font-size: 16px;
        font-family: 'DINNextLTArabic-Bold';
        border-radius: 0px;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
        border-radius: 0px;
        line-height: 40px;
        display: flex;
        margin-top: 19px;
        position: relative;
        justify-content: normal;
    }

        .reports .report-details .report-top .btn-primary.btn-export.btn-pdf {
            width: 160px;
        }

        .reports .report-details .report-top .btn-primary.btn-export .icon {
            background: url(images/reports/pdf-icon.svg) left top no-repeat;
            background-size: 20px;
            width: 20px;
            height: 20px;
            position: absolute;
            left: 10px;
            top: 11px;
        }

.reports .report-details .data-table {
    font-size: 12px;
    color: #fff;
}

    .reports .report-details .data-table .head th {
        background: #112B50;
        height: 34px;
        padding-right: 12px;
        font-weight: 700
    }

.reports .report-details .text-center {
    text-align: center
}

.reports .report-details .data-table td {
    height: 34px;
    padding-right: 12px;
}

.reports .report-details .data-table .odd td {
    background: #1A3967
}

.reports .report-details .data-table .even td {
    background: #214272
}

.reports .report-details .data-table .footer td {
    background: #082246;
    height: 40px;
    padding-right: 12px;
    font-weight: 700;
    font-size: 13px;
}

.reports .report-scroll {
    overflow: auto
}
/*06-01-2021 Repors end*/
/*12-01-2021*/
.login .login-options {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
    align-items: center;
    margin-bottom: 0px;
}

    .login .login-options a {
        font-size: 14px;
        color: #A7CCFD;
        text-decoration: none;
    }

        .login .login-options a.active {
            color: #FFC685
        }

    .login .login-options .sep {
        height: 13px;
        width: 2px;
        background: #fff;
        opacity: 0.2;
        margin: 0px 10px;
    }
/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    html {
        background: #1B365E
    }

    body.login {
        background: url(images/login-bg-mobile-v2.png) left top no-repeat;
        background-attachment: fixed;
        background-size: 100%;
        position: relative;
    }

    .login .app-wrapper .login-wrapper {
        height: initial;
        position: relative
    }

    .login .app-wrapper {
        background: url(images/mobile-Gradient.svg) left top no-repeat;
        background-attachment: fixed;
        background-size: 100%;
    }

    .login .login-form {
        width: 100%; /*max-width:550px;*/
        background: #1B365E;
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        height: auto;
        position: static;
        transform: translate(0%,0%);
        margin: 0px auto;
        border-radius: 0px;
        padding: 30px 20px 60px 20px;
        margin-top: 30px;
        /*height: calc(100vh - 180px);*/
    }

        .login .login-form.sign-in {
            height: auto;
            webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
            clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
            background: #1B365E
        }

            .login .login-form.sign-in:before {
                display: none;
            }

        .login .login-form.create-account {
            webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
            clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
            ;
            height: auto;
            z-index: 10;
            padding-left: 20px;
        }

            .login .login-form.create-account .form-group {
                padding-left: 0px;
            }

            .login .login-form.create-account .scroll-bar {
                height: auto;
                margin-bottom: 0px;
            }

    .alert {
        width: 100%;
        box-sizing: border-box;
        right: 0px;
        -webkit-clip-path: none;
        clip-path: none;
        top: 0px;
        position: fixed;
        z-index: 300;
        min-height: 80px;
        max-height: 250px;
        height: auto;
        height: fit-content;
    }

    .login .id-verification-form {
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
    }

    .login .retail-stores .store-list {
        border-radius: 0px;
    }

    .login .retail-stores .bottom-bar {
        background-color: #1B365D
    }

    .login .retail-stores .store-list.expand {
        max-height: 277px;
        overflow: auto;
    }

    .login .id-verification-form .form-group .custom-file .custom-file-label {
        padding: 50px 50px 0px 50px
    }

    .login .forgot-password .guide-txt {
        padding: 0px;
        margin-bottom: 30px;
    }

    .login .login-form .login-footer {
        padding: 0px 20px;
        padding: 0px;
        position: static;
        padding-top: 20px
    }

    .login .login-form .guide-txt {
        padding: 0px;
    }

    .login .account-check {
        height: auto;
        margin-top: 50px;
    }

        .login .account-check .small-logo {
            padding-top: 40px;
        }

    .login .login-form .back-btn {
        top: 35px;
    }

    .login .terms-conditions .slimScrollDiv {
        margin-left: -17px;
        height: calc(100vh - 500px) !important;
        overflow: auto !important
    }

    .login .terms-conditions .terms-content {
        height: auto !important
    }

    .login .login-form .new-user {
        padding-top: 4px;
    }

    .login .otp-form .form-control.otp-control {
        height: 75px;
        width: 75px;
        font-size: 30px;
    }

    .login .forgot-password.otp-form .form-control.otp-control {
        width: 75px;
        height: 75px;
        font-size: 40px;
    }

    .login .forgot-password.otp-form {
        height: auto;
    }

    .login .login-form.passowrd-form {
        height: auto;
    }

    .login .login-form.create-account .col-sm-6.pr-8 {
        padding-right: 0px !important;
    }

    .login .login-form.create-account .col-sm-6.pl-8 {
        padding-left: 0px !important;
    }

    .login .login-form .form-group .col-sm-6 .form-control {
        -webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
        clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    }

    .login .login-form.create-account .form-group .col-sm-6.pr-8 {
        margin-bottom: 22px;
    }

    .login-desk-header {
        display: none;
    }

    .login .chat-btn {
        display: none;
    }

    login-mobile-header .back-btn {
        width: 26px;
        height: 26px;
        display: block;
        outline: none;
        position: absolute;
        top: 10px;
        display: none;
    }

    .login-mobile-header .back-btn.forgot-back {
        display: block
    }

    .forgot-password .login-mobile-header .back-btn {
        display: block;
    }

    .login-mobile-header .back-btn .icon {
        background: url(images/orange-down-arrow.svg) 1px 14px no-repeat;
        display: block;
        background-size: 80%;
        height: 100%;
        width: 100%;
        transform: rotate(90deg);
    }

    .login-mobile-header {
        display: block;
        padding: 80px 20px 20px 20px;
    }

        .login-mobile-header h3 {
            font-family: 'Cairo', sans-serif;
            font-weight: 600;
            font-size: 25px;
            color: #fff;
            margin: 26px 0px 26px 0px;
            text-align: right;
            line-height: 30px;
        }

    .login .login-form h2 {
        text-align: right;
        margin-bottom: 20px;
    }

    .login .forgot-password h3 {
        text-align: right;
    }

    .login .login-form .guide-txt {
        text-align: right;
        font-size: 16px;
    }

    .login .login-form.forgot-password {
        margin-top: 50px; /* height: calc(100vh - 180px);*/
    }

    .login .forgot-password.otp-form .otp-send-msg {
        width: 100%;
        padding: 0px;
        text-align: right;
        font-size: 16px;
    }

    .login .otp-form .otp-group {
        max-width: 340px;
        margin: 0px auto;
        margin-bottom: 26px;
    }

    .login .account-check p {
        padding: 0px;
        text-align: right;
    }

    .login .login-form.sign-in {
        margin-top: 0px;
    }

    .login .login-form h3 {
        text-align: right;
    }

    .login .otp-form .otp-send-msg {
        text-align: right;
        padding: 0px;
    }

    .login .language-selection {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
    }
    /*Main pages 25-11-2020*/
    body {
        background: #1B365D url(images/bg.svg) 124% top no-repeat;
        background-attachment: fixed;
        background-size: 120px;
        background: #1B365D
    }

    .app-wrapper {
        width: 100%;
        padding: 0px;
    }

        .app-wrapper .content-wrapper {
            display: block !important;
            width: 100%;
            padding: 0px;
            background: none;
        }

        .app-wrapper .header {
            display: none;
        }

        .app-wrapper .content-wrapper .content {
            margin: 0px;
            width: 100%;
            padding: 110px 15px 100px 15px;
            min-height: calc(100vh - 82px);
        }

        .app-wrapper .content-wrapper .side-nav-bar {
            width: 100%;
            height: 100vh;
            z-index: 112;
            background: #1B365D;
            display: none;
        }

    .open-nav .app-wrapper .content-wrapper .side-nav-bar {
        display: initial;
    }

    .app-wrapper .content-wrapper .side-nav-bar .mobile-header {
        height: 150px;
        padding: 54px 0px 0px 20px;
        background: #112B50 url(images/bg.svg) 120% 20px no-repeat;
        background-size: 120px;
        display: block;
    }

    .app-wrapper .content-wrapper .side-nav-bar .nav {
        width: 100%;
        background: #1B365D;
        padding: 0px 10px;
    }

        .app-wrapper .content-wrapper .side-nav-bar .nav ul li {
            border-bottom: 2px solid #183052;
            margin: 0px;
            background: url(images/nav-icon/mobile-nav-bullet.svg) 98% center no-repeat !important;
        }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li:last-child {
                border-bottom: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li a {
                height: 50px;
                line-height: 50px;
                background-position: 6px !important;
                padding-left: 45px
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.dashboard {
                display: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.packages {
                display: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.shipment {
                display: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.active {
                background: none;
            }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.active a {
                    border: none;
                }

    .app-wrapper .content-wrapper .side-nav-bar .logout-btn {
        position: static;
        margin-top: 10px;
    }

    .bottom-nav-bar {
        height: 100px;
        background: #112B50;
        z-index: 112;
        position: fixed;
        bottom: 0px;
        width: 100%;
        display: flex;
        border-radius: 30px 30px 0px 0px;
    }

        .bottom-nav-bar ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
            font-size: 12px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
        }

            .bottom-nav-bar ul li {
                margin-top: 30px;
            }

            .bottom-nav-bar ul a {
                color: #8895A8;
                padding-top: 50px;
            }

            .bottom-nav-bar ul li.active a {
                color: #FF7F32;
            }

            .bottom-nav-bar ul li.dashboard a {
                background: url(images/nav-icon/dashboard-icon.svg)center center no-repeat;
            }

            .bottom-nav-bar ul li.packages a {
                background: url(images/nav-icon/package-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.shipment a {
                background: url(images/nav-icon/shipment-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.active.dashboard a {
                background: url(images/nav-icon/active-dashboard-icon.svg)center center no-repeat;
            }

            .bottom-nav-bar ul li.active.packages a {
                background: url(images/nav-icon/active-package-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.active.shipment a {
                background: url(images/nav-icon/active-shipment-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.more a {
                background: url(images/nav-icon/more-icon.svg) center center no-repeat;
                background-size: 100%;
            }

            .bottom-nav-bar ul li.active.more a {
                background: url(images/nav-icon/active-more-icon.svg) center center no-repeat;
                background-size: 100%;
            }

    .address-book .address-topbar {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

        .address-book .address-topbar .search {
            width: 78%;
        }

        .address-book .address-topbar .filters .filter-dropdown {
            left: 0px;
        }

    .address-book .address-list .address-card {
        flex-wrap: wrap;
        width: 100%;
        webkit-clip-path: polygon(20px 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 14%);
        clip-path: polygon(20px 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 14%);
    }

    .ui-tabs .ui-tabs-nav li {
        margin-left: 20px;
    }

        .ui-tabs .ui-tabs-nav li:last-child {
            margin-left: 0px;
        }

    .address-book .address-topbar .search .form-control {
        width: calc(100% - 40px);
    }

    .address-book .address-topbar .filters .seprator {
        margin: 0px 10px;
        display: none;
    }

    .address-book .address-topbar .filters {
        margin-right: 10px;
    }

    .address-book .address-list .address-card .edit-icon { /*display:none;*/
    }

    .address-book .address-list .address-card .add-count {
        position: absolute;
        left: 0px;
        bottom: 10px;
        padding-left: 20px;
        padding-right: 0px;
        text-align: left
    }

    .address-book .address-list .address-card .phone {
        position: absolute;
        left: 0px;
        top: 10px;
    }

    .address-book .address-list .address-card .name {
        margin-bottom: 20px;
    }

    .address-book .address-list .address-card .address {
        margin-bottom: 20px;
    }

    .address-book .address-list .address-card .store-address {
        margin-bottom: 10px;
    }

    .app-wrapper .content-wrapper .content .add-button {
        width: 50px;
        height: 50px;
        background-size: 50px;
        bottom: 110px;
        left: 11px;
    }

    .ui-dialog.ui-widget-content {
        position: fixed !important;
        position: fixed !important;
        width: 100% !important;
        padding: 0px !important;
        top: 0px !important;
        z-index: 200 !important;
        height: 100vh !important
    }

    .ui-dialog.ui-widget-content {
        height: calc(100vh - 60px) !important;
    }

    .address-book-dialog .ui-dialog-content {
        padding: 20px;
        height: 100% !important;
        padding-bottom: 0px;
    }

    .address-book-dialog .address-dialog-content {
        height: 100%;
    }

    .address-book-dialog .ui-dialog-content .dialog-title {
        text-align: right;
        background: #112B50 url(images/bg.svg) -24% top no-repeat;
        height: 100px;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -20px;
        background-size: 120px;
        padding: 30px 50px 0px 0px;
        color: #FFC685
    }

    .address-book-dialog .address-dialog-content .slimScrollDiv {
        height: auto !important;
        overflow: visible !important
    }

    .address-book-dialog .address-dialog-content .form-scroll {
        height: 69vh !important;
        padding-bottom: 70px
    }

    .slimScrollBar_new {
        display: none !important;
    }

    .slimScrollRail_new {
        display: none !important;
    }

    .address-book-dialog .address-dialog-content .action-bar {
        padding: 0px 16px;
        z-index: 111
    }

        .address-book-dialog .address-dialog-content .action-bar .btn-primary {
            width: 100%;
            max-width: 480px;
        }

    .address-book-dialog .address-dialog-content .address-types .btn {
        margin-bottom: 10px;
    }

    .address-book-dialog .address-dialog-content .centre-search .map-link {
        position: static;
        margin-bottom: 10px;
    }

    .address-book-dialog .address-dialog-content .slimScrollDiv {
        margin-right: 0px;
        padding-right: 0px;
    }

    .address-book-dialog .address-dialog-content .centre-list.all-centers {
    }

        .address-book-dialog .address-dialog-content .centre-list.all-centers .centre-card {
            display: block;
        }

        .address-book-dialog .address-dialog-content .centre-list.all-centers .check-icon {
            position: static;
            margin-top: 0px;
        }

    .app-wrapper .content-wrapper .content .content-title {
        display: flex;
        height: 100px;
        align-items: center;
        background: #112B50;
        margin-left: -20px;
        margin-right: -20px;
        padding-right: 20px;
        background: #112B50 url(images/bg.svg) -10% top no-repeat; /*background-attachment: fixed;*/
        background-size: 120px;
        position: fixed;
        width: calc(100% + 40px);
        right: 0px;
        top: 0px;
        z-index: 111;
        margin: 0px;
    }

    .mobile-only {
        display: block !important;
    }

    .ui-dialog .ui-dialog-content .dialog-title .back-btn {
        right: 20px;
        top: 33px;
    }

    .ui-widget.address-map-dialog .ui-dialog-content .dialog-title {
        padding: 10px;
        display: block;
    }

        .ui-widget.address-map-dialog .ui-dialog-content .dialog-title .back-btn {
            right: 16px;
            top: 12px;
            position: absolute;
        }

    .ui-dialog .ui-dialog-titlebar-close {
        display: none;
    }

    .ui-dialog.success-dialog .ui-dialog-titlebar-close {
        display: block;
    }

    .success-dialog .success-dialog-content.address-save {
        height: auto;
        padding-top: 30px;
    }

        .success-dialog .success-dialog-content.address-save .success-content {
            position: static;
            transform: translateY(0%);
        }
    /*01-12-2020*/
    .app-wrapper .content-wrapper .content .page-guidetxt {
        width: 100%;
    }

    .wallet-details .summery-warapper {
        width: 100%;
        max-width: 455px;
    }

    .wallet-details .wallet-blance {
        width: 100%;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
    }

    .wallet-details .button-warapper {
        position: fixed;
        bottom: 0px;
        left: 0px;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        height: 100px;
        width: 100%;
        z-index: 200;
        padding: 0px 20px;
    }

        .wallet-details .button-warapper .wallet-recharge-btn {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 50px;
            width: 480px;
            border: none;
            text-align: left;
            padding: 0px 15px 0px 0px;
            color: #fff;
            font-size: 20px;
            font-family: 'DINNextLTArabic-Bold';
            border-radius: 0px;
            webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            border-radius: 0px;
            line-height: 44px;
            display: flex;
            margin: 20px auto 10px auto;
            position: relative;
            width: 100%;
            max-width: 480px;
        }

    .wallet-details .wallet-recharge-btn .card-icon {
        display: none;
    }

    .wallet-details .wallet-recharge-btn .small-txt {
        display: none;
    }

    .wallet-details .transactions-list .transaction-card {
        width: 100%;
        max-width: 425px;
        margin-right: 0px;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
        padding: 14px 15px;
        margin-left: 0px;
    }

        .wallet-details .transactions-list .transaction-card .middle {
            min-height: 80px;
        }

        .wallet-details .transactions-list .transaction-card .transaction-amount {
            font-size: 40px;
        }
    /*02-12-2020*/
    .app-wrapper .content-wrapper .myaccount .account-option {
        width: 100%;
    }

        .app-wrapper .content-wrapper .myaccount .account-option .info-header {
            height: 70px;
        }

            .app-wrapper .content-wrapper .myaccount .account-option .info-header .seprator {
                display: none;
            }

            .app-wrapper .content-wrapper .myaccount .account-option .info-header .status {
                display: none;
            }

        .app-wrapper .content-wrapper .myaccount .account-option li .option-content {
            padding: 20px 18px 30px 18px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option li.active .option-content .row {
            margin-bottom: 0px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option li.active .option-content .col-sm-6 {
            padding-bottom: 14px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option > li.complited .status {
            display: none !important
        }

    .app-wrapper .content-wrapper .myaccount .retail-centre .centre-search .map-link {
        position: static;
        margin: 10px auto 20px auto;
        display: block;
        width: 170px;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list-caption {
        font-size: 13px;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .showmore-link {
        font-size: 13px;
    }
    /*03-02-2020*/
    .my-shippments .topbar {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

        .my-shippments .topbar .search {
            width: 66.4%.width:74%;
        }

        .my-shippments .topbar .filters {
            padding-left: 10px;
        }

            .my-shippments .topbar .filters .seprator {
                margin: 0px 12px;
            }

            .my-shippments .topbar .filters .filter-dropdown {
                left: 0px;
            }

    .my-shippments .shipment-status {
        width: 100%;
    }

        .my-shippments .shipment-status li.active .option-content {
        }

    .delete-shipment-dialog.ui-widget-content {
        width: 90% !important;
        max-width: 600px !important;
        height: auto !important;
        top: 50% !important;
        transform: translateY(-50%);
    }

    .delete-shipment-dialog .delete-shipment-dialog-content .action-bar .btn-primary {
        width: 100%;
        max-width: 350px;
    }

    .delete-shipment-dialog .ui-dialog-titlebar-close {
        display: block;
    }

    .my-shippments .data-table {
        display: none;
    }

    .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .right-col {
        position: relative
    }

    .app-wrapper .content-wrapper .my-shippments .shipment-list .shippment-card {
        width: 100%;
        max-width: 378px;
        background: #1B365D;
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 95% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 95% 0);
        height: auto;
    }

        .app-wrapper .content-wrapper .my-shippments .shipment-list .shippment-card .card-body .field {
            padding-top: 0px;
        }

    .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .field {
        margin-top: 10px;
    }

    .my-shippments .shipment-list .shippment-card .delete {
        width: 24px;
        height: 24px;
        background: url(images/myshipment/trash.svg) center center no-repeat;
        display: inline-block
    }

    .my-shippments .shipment-list .shippment-card .btn-trackorder {
        height: 34px;
        width: 115px;
        display: inline-block;
        background: #112B50;
        font-size: 16px;
        color: #FF7F32;
        text-decoration: none;
        text-align: center;
        line-height: 34px;
    }

    .my-shippments .shipment-list .shippment-card .trackorder {
        margin-top: 18px;
        margin-top: 0px
    }

    .my-shippments .shipment-list .shippment-card .awd-print {
        font-size: 14px;
        color: #fff;
        background: url(images/myshipment/printer.svg) right center no-repeat;
        position: absolute;
        right: 0px;
        bottom: -4px;
        background-size: 20px;
        padding-right: 26px;
        width: 136px;
        text-align: right
    }

    .app-wrapper .content-wrapper .new-shippment .shipment-selection {
        display: block !important
    }

        .app-wrapper .content-wrapper .new-shippment .shipment-selection .seprator {
            display: none;
        }

    .app-wrapper .content-wrapper .new-shippment .package-selection {
        display: block !important
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-details {
        display: block !important
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-description .form-control {
        width: 100%;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list {
        margin-left: -12px;
        margin-right: 0px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .quanty-widget {
        width: 150px;
        margin-right: 15px;
    }

    .app-wrapper .content-wrapper .new-shippment .quanty-widget .qty-txt {
        padding-right: 20px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list li {
        margin-right: 24px;
        margin-left: 0px;
        margin-bottom: 16px;
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card {
        margin-bottom: 20px;
        margin-left: 10px;
        width: 114px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-description .description-header {
        display: block !important
    }

    .app-wrapper .content-wrapper .new-shippment .subheading-style2 {
        display: flex
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-description .link {
        margin-left: 0px;
        margin-top: 20px;
        display: inline-block;
    }

    .app-wrapper .content-wrapper .new-shippment .action-bar {
        position: fixed;
        bottom: 0px;
        left: 0px;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        height: 100px;
        width: 100%;
        z-index: 200;
        padding: 0px 20px;
    }

    .app-wrapper .content-wrapper .new-shippment .btn-primary {
        width: 100%;
        max-width: 350px;
        margin: 24px auto 0px auto
    }

    .app-wrapper .content-wrapper .new-shippment .shipment-details {
        padding: 20px;
        width: 100%;
        max-width: 470px;
        height: auto;
    }

    .order-confirm-dialog.ui-dialog .ui-dialog-content {
        height: 100vh !important
    }

    .order-confirm-dialog .order-confirm-dialog-content .action-bar .btn-primary {
        width: 100%;
        max-width: 350px;
    }

    .ui-dialog.address-book .ui-dialog-content .dialog-title .back-btn .icon {
        background: url(images/orange-down-arrow.svg) 0px 14px no-repeat;
        display: block;
        background-size: 96%;
        height: 100%;
        width: 100%;
        transform: rotate(270deg);
    }

    .ui-dialog.address-book .ui-dialog-content .dialog-title {
        text-align: right;
        background: #112B50 url(images/bg.svg) -24% top no-repeat;
        height: 100px;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -20px;
        background-size: 120px;
        padding: 30px 50px 0px 0px;
        align-items: inherit;
    }

        .ui-dialog.address-book .ui-dialog-content .dialog-title .icon {
            display: none;
        }

    .ui-dialog.address-book .address-dialog-content p {
        width: 100%;
        text-align: left;
        padding-left: 32px;
        padding-top: 30px;
    }

    .ui-dialog.address-book .ui-dialog-content .dialog-title .back-btn {
        right: 20px;
        top: 20px;
    }

    .ui-dialog.address-book .address-dialog-content .address-topbar .search {
        width: 100%;
        width: 71%
    }

    .ui-dialog.address-book .address-dialog-content .address-topbar {
        padding-left: 0px;
    }

    .ui-dialog.address-book .address-list {
        display: block; /*height:100%!important*/
        padding-bottom: 80px;
    }

    .ui-dialog.address-book .slimScrollDiv {
        height: 60vh !important;
    }

    .ui-dialog.address-book .address-list .address-card {
        margin: 0px 15px 20px 0px;
    }

    .ui-dialog.address-book .address-list .address-card {
        width: 100%;
        max-width: 315px;
    }

    .ui-dialog.address-book .ui-dialog-content {
        width: 100% !important;
        height: 100vh !important;
        height: 100% !important;
        overflow: hidden
    }

    .ui-dialog.address-book .address-dialog-content .address-topbar {
        width: 100%;
        padding-right: 0px;
    }

    .app-wrapper .content-wrapper .new-shippment .addresses {
        display: block !important
    }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list {
            flex-wrap: wrap
        }

            .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card {
                width: 100%;
                max-width: 315px;
                margin-right: 0px;
                height: auto
            }

        .app-wrapper .content-wrapper .new-shippment .addresses .select-address-btn {
            display: block
        }

    .app-wrapper .content-wrapper .new-shippment .add-address-btn {
        margin-left: 10px;
    }

    .app-wrapper .content-wrapper .new-shippment .subheading {
        font-size: 13px;
    }

    body.popup .app-wrapper {
        filter: none;
        display: none;
    }

    .ui-dialog.address-book .address-list .address-card .name {
        margin-bottom: 4px;
    }

    .ui-dialog.address-book .address-list .address-card .address {
        margin-bottom: 4px;
    }

    .ui-dialog.address-book .address-list .address-card .phone {
        position: static
    }

    .address-book-dialog .address-dialog-content .form-scroll {
        overflow: auto;
    }

    .address-book-dialog .address-dialog-content .col-sm-6 {
        padding-bottom: 20px;
    }

    .address-book-dialog .address-dialog-content .form-group {
        margin-bottom: 0px;
    }
    /*04-12-2020*/
    .app-wrapper .content-wrapper .package-details .notification {
        width: 100%;
        max-width: 750px;
        flex-wrap: wrap;
        position: relative;
        display: flex;
        top: 0px;
        padding-top: 30px;
    }

        .app-wrapper .content-wrapper .package-details .notification .items {
            width: 50%;
            padding-bottom: 20px;
            display: flex;
            align-items: center;
            padding-right: 13px;
            margin-bottom: 0px;
        }

        .app-wrapper .content-wrapper .package-details .notification .heading {
            display: none;
        }

        .app-wrapper .content-wrapper .package-details .notification .items .icon {
            padding-left: 12px;
        }

        .app-wrapper .content-wrapper .package-details .notification .items .title {
            line-height: 1.2;
            text-align: right
        }

        .app-wrapper .content-wrapper .package-details .notification .items .desc {
            text-align: right
        }

        .app-wrapper .content-wrapper .package-details .notification .items:after {
            display: none
        }

    .app-wrapper .content-wrapper .package-details .promotion {
        width: 100%;
        background: url(images/promo-bg-mobile.png) left top no-repeat;
        height: 82px;
        background-size: 100%;
        padding: 10px
    }

        .app-wrapper .content-wrapper .package-details .promotion .discount .discount-value {
            font-size: 50px;
        }

        .app-wrapper .content-wrapper .package-details .promotion .discount label {
            font-size: 18px;
        }

        .app-wrapper .content-wrapper .package-details .promotion .promo-msg p {
            font-size: 11px;
            line-height: 1.2
        }

        .app-wrapper .content-wrapper .package-details .promotion .discount {
            margin-right: 20px
        }

        .app-wrapper .content-wrapper .package-details .promotion .promo-msg .badge {
            height: 18px;
            font-size: 10px;
            line-height: 18px;
            padding: 0px 6px;
            margin-bottom: 4px
        }

    .app-wrapper .content-wrapper .package-details .packages-steps {
        font-size: 12px;
    }

        .app-wrapper .content-wrapper .package-details .packages-steps .step .step-number {
            font-size: 58px;
        }

        .app-wrapper .content-wrapper .package-details .packages-steps .step-sep {
            margin: 0px 10px;
        }

    .app-wrapper .content-wrapper .package-details .bundle-card {
        width: 92px;
        height: 92px;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        height: auto;
        min-height: 82px;
    }

        .app-wrapper .content-wrapper .package-details .bundle-card .weight {
            font-size: 40px;
        }

        .app-wrapper .content-wrapper .package-details .bundle-card span {
            font-size: 18px;
        }

        .app-wrapper .content-wrapper .package-details .bundle-card .waybillleft {
            font-size: 11px;
            line-height: 1.1;
        }

    .app-wrapper .content-wrapper .package-details .add-package-btn {
        min-width: 92px;
        height: 92px;
        width: 95px;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
    }

        .app-wrapper .content-wrapper .package-details .add-package-btn .buy-icon {
            top: 10px;
            width: 18px;
            background-size: 100%;
        }

        .app-wrapper .content-wrapper .package-details .add-package-btn .icon {
            bottom: 6px;
            left: 6px;
            width: 18px;
            height: 18px;
            background-size: 100%;
        }

        .app-wrapper .content-wrapper .package-details .add-package-btn .txt .bold-txt {
            font-size: 13px;
            line-height: 1.2;
        }

    .app-wrapper .content-wrapper .myaccount .form-group .custom-file .custom-file-label {
        padding: 50px 50px 0px 50px;
        word-break: break-all;
        height: auto;
        padding-bottom: 6px;
    }

    .app-wrapper .content-wrapper .package-details .existing-packages .bundle-list {
        flex-wrap: nowrap
    }

    .app-wrapper .content-wrapper .package-details .packages-list {
        overflow: auto;
    }

    .buy-bundal-dialog.ui-dialog.ui-widget-content {
        height: calc(100vh - 60px) !important;
    }

        .buy-bundal-dialog.ui-dialog.ui-widget-content .dialog-title {
            text-align: right;
            background: #112B50 url(images/bg.svg) -24% top no-repeat;
            height: 100px;
            width: calc(100% + 40px);
            margin-left: -20px;
            margin-right: -20px;
            margin-top: -20px;
            background-size: 120px;
            padding: 30px 50px 0px 0px;
        }

    .buy-bundal-dialog.ui-dialog .dialog-title .back-btn {
        right: 20px;
        top: 33px;
    }

    .bundal-dialog-content h3 {
        text-align: right
    }

    .bundal-dialog-content p {
        text-align: right;
        width: 100%;
    }

    .bundal-dialog-content .bundle-list {
        margin-right: -22px;
    }

    .buy-bundal-dialog.ui-dialog .ui-dialog-content { /*overflow:auto*/
        height: 100% !important
    }

    .buy-bundal-dialog.ui-dialog .bundal-dialog-content {
        padding-top: 10px;
        overflow: auto;
        height: 100%;
        padding-bottom: 70px;
    }

    .bundal-dialog-content .action-bar .selection-total {
        padding-left: 14px;
    }

    .bundal-dialog-content .bundle-list .bundle-card {
        width: 100%;
        max-width: 366px;
        margin-right: 22px;
    }

    .bundal-dialog-content .bundle-list.selected-bundle .bundle-card {
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }

    .bundal-dialog-content .bundle-list.selected-bundle {
        margin-right: 0px
    }

    .bundal-dialog-content .waybill-list {
        margin-left: 0px;
    }

    .bundal-dialog-content .waybill-card {
        margin: 0px 20px 20px 20px;
        width: calc(100% - 40px)
    }

    .buy-bundal-dialog.ui-dialog.ui-widget-content .dialog-title .cart {
        background: url(images/Cart.svg) left top no-repeat;
        width: 28px;
        height: 28px;
        background-size: 100%;
        position: absolute;
        left: 15px;
        top: 40px;
    }

        .buy-bundal-dialog.ui-dialog.ui-widget-content .dialog-title .cart .cart-item {
            width: 20px;
            height: 20px;
            background: #FF7F32;
            border-radius: 50%;
            font-size: 14px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: -4px;
            top: 21px;
        }

    .cart-dialog-content .left-col .slimScrollDiv {
        height: auto !important;
        overflow: visible !important;
    }

    .cart-dialog-content .cart-items {
        height: auto !important
    }

    .cart-dialog.ui-dialog.ui-widget-content {
        background: #1B365E; /*overflow: auto;*/
        height: calc(100vh - 60px) !important;
        height: 100% !important
    }

    .cart-dialog.ui-dialog .ui-dialog-content {
        height: 100% !important;
    }

    .cart-dialog.ui-dialog.ui-widget-content .dialog-title {
        text-align: right;
        background: #112B50 url(images/bg.svg) -24% top no-repeat;
        height: 100px;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -20px;
        background-size: 120px;
        padding: 30px 50px 0px 0px;
    }

    .cart-dialog.ui-dialog .dialog-title .back-btn {
        right: 20px;
        top: 33px;
    }

    .cart-dialog-content {
        padding: 40px 0px 60px 0px;
        height: 100%;
        padding-bottom: 150px;
        overflow: auto
    }

        .cart-dialog-content .left-col {
            width: 100%;
            padding-right: 0px;
        }

        .cart-dialog-content .right-col {
            width: 100%;
            padding-right: 0px;
            position: relative;
            margin-top: 30px;
            padding-top: 120px
        }

        .cart-dialog-content .cart-items .cart-item {
            width: 100%;
        }

        .cart-dialog-content .cart-heading {
            font-size: 20px;
            color: #fff;
            margin-bottom: 14px;
        }

        .cart-dialog-content .couponcode {
            position: absolute;
            top: -36px;
            width: 100%;
        }

        .cart-dialog-content .action-bar {
            height: 70px;
            background: #081B36;
            box-shadow: 0px -10px 15px #05132780;
            position: absolute;
            width: 100%;
            left: 0px;
            bottom: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed
        }

        .cart-dialog-content .btn-primary {
            margin-top: 0px;
        }

    .checkout-dialog.ui-dialog.ui-widget-content .dialog-title {
        text-align: right;
        background: #112B50 url(images/bg.svg) -24% top no-repeat;
        height: 100px;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -20px;
        background-size: 120px;
        padding: 30px 50px 0px 0px;
        display: block;
    }

    .checkout-dialog.ui-dialog .dialog-title .back-btn {
        right: 20px;
        top: 33px;
    }

    .checkout-dialog-content .wallet-notification {
        text-align: right;
        padding-bottom: 20px;
    }

    .checkout-dialog-content .amount-summery {
        display: block;
        height: auto;
        width: 100%;
    }

        .checkout-dialog-content .amount-summery .wallet-blance {
            width: 100%;
            justify-content: space-between;
            margin-bottom: 20px;
            margin-bottom: 0px;
        }

        .checkout-dialog-content .amount-summery .required-amount {
            margin-top: 20px;
        }

        .checkout-dialog-content .amount-summery .required-amount {
            width: 100%;
            background-position: right;
            padding-right: 34px;
            font-size: 16px;
            justify-content: space-between;
            padding-left: 0px;
        }

            .checkout-dialog-content .amount-summery .required-amount:before {
                display: none;
            }

    .checkout-dialog-content .wallet-recharge {
        text-align: left
    }

        .checkout-dialog-content .wallet-recharge .recharge-form {
            width: 100%;
        }

            .checkout-dialog-content .wallet-recharge .recharge-form .form-control {
                width: calc(100% - 120px)
            }

    .checkout-dialog-content .payment-options {
        width: 100%;
    }

        .checkout-dialog-content .payment-options ul {
            display: block;
        }

            .checkout-dialog-content .payment-options ul li {
                width: 100%;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 2px solid #112B50;
            }

                .checkout-dialog-content .payment-options ul li:last-child {
                    border-bottom: none;
                }

                .checkout-dialog-content .payment-options ul li.seprator {
                    display: none;
                }

    .checkout-dialog.ui-dialog { /*overflow:auto;*/
        height: calc(100vh - 60px) !important;
    }

    .checkout-dialog-content .action-bar {
        height: 70px;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        position: fixed;
        width: 100%;
        left: 0px;
        bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 10px
    }

    .checkout-dialog-content .btn-primary {
        margin-top: 10px !important;
        width: 100%;
        max-width: 380px
    }

    .checkout-dialog-content .wallet-recharge .recharge-form .btn-primary {
        margin-top: 0px !important;
    }

    .checkout-dialog-content .payment-options ul li .card .card-footer .btn-primary {
        margin-top: 0px !important;
    }

    .checkout-dialog-content {
        overflow: auto;
        height: 100%;
        padding-bottom: 150px; /*overflow:hidden;*/
    }

        .checkout-dialog-content .address-form {
            padding-bottom: 90px;
        }

    .checkout-dialog.ui-dialog .ui-dialog-content { /*overflow:hidden*/
        height: 100% !important;
    }
    /*24-12-2020*/
    .shipment-tracking .shipment-summery {
        width: 100%;
        display: block !important
    }

    .shipment-tracking .shipment-progress {
        width: 100%;
    }

        .shipment-tracking .shipment-progress .progress {
            width: 100%;
        }

    .shipment-tracking .shipment-summery .col1 {
        width: 100%;
    }

    .shipment-tracking .shipment-progress .progress > div:first-child {
        min-width: 9%
    }

    .shipment-tracking .shipment-progress .progress > div:last-child {
        min-width: 9%
    }

    .shipment-tracking .shipment-progress .progress > div {
        min-width: 16.4%
    }

        .shipment-tracking .shipment-progress .progress > div .name {
            font-size: 9px;
            padding: 0px 6px;
            width: 70px;
            left: -57%;
        }

        .shipment-tracking .shipment-progress .progress > div.active .name {
            font-size: 10px;
        }

        .shipment-tracking .shipment-progress .progress > div .step-icon {
            width: 40px;
            height: 40px;
            left: -44%;
            left: -30%;
        }

        .shipment-tracking .shipment-progress .progress > div:first-child .name {
            left: -80%;
            left: -54%;
        }

    .shipment-tracking .shipment-progress .progress.step1:after {
        width: 14%;
        width: 20%
    }

    .shipment-tracking .shipment-progress .progress.step2:after {
        width: 26%;
        width: 40%
    }

    .shipment-tracking .shipment-progress .progress.step3:after {
        width: 45%width:60%
    }

    .shipment-tracking .shipment-progress .progress.step4:after {
        width: 58%;
        width: 100%
    }

    .shipment-tracking .shipment-progress .progress.step5:after {
        width: 75%;
    }

    .shipment-tracking .shipment-progress .progress.step6:after {
        width: 100%;
    }

    .shipment-tracking .shipment-progress .progress > div:first-child .step-icon {
        left: -60%;
        left: -30%;
    }

    .shipment-tracking .shipment-summery .tracking-details .shipment-icon {
        width: 40px;
        height: 40px;
    }

    .shipment-tracking .shipment-summery .field-caption {
        font-size: 12px;
    }

    .shipment-tracking .shipment-summery .tracking-details .tracking-number .field-value {
        font-size: 18px;
    }

    .shipment-tracking .shipment-summery .tracking-details {
        height: auto;
        padding: 10px 60px 10px 10px;
    }

        .shipment-tracking .shipment-summery .tracking-details .status {
            background-size: 18px;
        }

        .shipment-tracking .shipment-summery .tracking-details .shipment-address {
            margin-right: -50px;
        }

        .shipment-tracking .shipment-summery .tracking-details .seprator {
            margin: 24px
        }

    .shipment-tracking .shipment-summery .col2 {
        width: 100%;
        margin-top: 10px;
    }

    .shipment-tracking .date {
        text-align: right
    }

    .shipment-tracking .shipment-activity {
    }

        .shipment-tracking .shipment-activity .activity .step .step-description {
            width: auto;
        }

            .shipment-tracking .shipment-activity .activity .step .step-description .day-time {
                font-size: 11px;
                margin-bottom: 4px;
            }

            .shipment-tracking .shipment-activity .activity .step .step-description p {
                font-size: 12px;
                line-height: 18px
            }

            .shipment-tracking .shipment-activity .activity .step .step-description .location {
                font-size: 11px;
                background-size: 12px;
                padding-left: 20px;
            }
    /*28-12-2020*/
    .app-wrapper .content-wrapper .content .content-title.mobile-only {
        display: flex !important
    }

    .dashboard-details .top-section {
        display: block;
    }

    .dashboard-details .left-col {
        width: 100%;
        margin-bottom: 20px;
    }

    .dashboard-details .right-col {
        width: 100%;
        margin-bottom: 20px;
    }

    .dashboard-details .profile-details {
        display: block;
        position: relative;
        padding-top: 44px;
        padding-bottom: 12px;
    }

        .dashboard-details .profile-details .profile-status-btn {
            position: absolute;
            margin-left: 0px;
            left: -15px;
            top: 0px;
            width: calc(100% + 30px);
            clip-path: none;
            padding: 0px;
        }

            .dashboard-details .profile-details .profile-status-btn .mobile-only {
                position: relative;
                width: 194px;
                padding-right: 28px;
                margin: 0px auto;
            }

    .dashboard-details .purchase-details {
        display: block;
        display
    }

    .dashboard-details .overview .overflow-items .item {
        min-width: calc(50% - 20px);
        max-width: 240px;
        width: calc(50% - 20px);
        margin-right: 0px;
        margin-left: 20px;
        margin-bottom: 20px;
        padding-right: 10px;
        height: 75px;
    }

    .dashboard-details .overview .overflow-items {
        display: flex;
        flex-wrap: wrap;
        margin-left: -15px;
    }

    .dashboard-details .shipments-details {
        width: 100%;
        max-width: 487px;
        margin-bottom: 20px;
    }

        .dashboard-details .shipments-details .user-shipments {
            width: 100%;
            max-width: 487px
        }

    .dashboard-details .dashboard-chart {
        display: block
    }

    .dashboard-details .chart-wrapper {
        margin-left: 0px;
        height: auto;
        min-height: 270px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment {
        width: 97%
    }

    .dashboard-details .shipments-details .user-shipments .owl-nav .owl-prev {
        display: none;
    }

    .dashboard-details .shipments-details .user-shipments .owl-nav .owl-next {
        display: none;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .shipment-id {
        background-size: 30px
    }

    .dashboard-details .date-filter .btn-primary {
        width: 90px
    }

    .dashboard-details .date-filter .date {
        margin-left: 14px;
    }

        .dashboard-details .date-filter .date .form-control {
            width: 100%;
            padding-left: 5px;
            max-width: 148px;
            text-indent: 5px;
        }

    .dashboard-details .wallet-summery .wallet-blance {
        padding: 0px 10px;
        width: 65%;
    }

        .dashboard-details .wallet-summery .wallet-blance .blance {
            background-size: 10px;
            font-size: 12px;
            padding-right: 14px;
        }

        .dashboard-details .wallet-summery .wallet-blance .amount {
            font-size: 16px;
        }

    .dashboard-details .wallet-summery .wallet-recharge-btn .card-icon {
        background-size: 13px;
        right: 10px;
    }

    .dashboard-details .wallet-summery .wallet-recharge-btn {
        padding-right: 32px;
        font-size: 12px;
        padding-left: 20px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .caption {
        font-size: 12px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .value {
        font-size: 12px;
    }

    .dashboard-details .package-list .add-package-btn {
        min-width: 85px;
    }

    .dashboard-details .package-list {
        align-items: end !important;
    }

    .dashboard-details .overview .overflow-items .item .circle canvas {
        width: 40px !important;
        height: 40px !important;
    }

    .dashboard-details .overview .overflow-items .item .circle {
        width: 40px !important;
        height: 40px !important;
    }

        .dashboard-details .overview .overflow-items .item .circle strong {
            font-size: 9px;
            left: 6px;
            top: 13px;
        }

    .dashboard-details .overview .overflow-items .item .value {
        font-size: 19px
    }

    .dashboard-details .overview .overflow-items .item .caption {
        font-size: 11px
    }

    .dashboard-details .overview .overflow-items .shipment-total {
        background: #2F4F7E url(images/dashboard/package-icon.svg) 4% 6px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-delivered {
        background: #2F4F7E url(images/dashboard/sales-icon.svg) 4% 6px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-transit {
        background: #2F4F7E url(images/dashboard/ship-icon.svg) 4% 10px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-return {
        background: #2F4F7E url(images/dashboard/report-icon.svg) 4% 10px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .page-guidetxt {
        margin-top: 0px;
    }

    .dashboard-details .pending-items .pending-card {
        margin-left: 0px;
        height: auto
    }
    /*Main pages end*/
    .login .login-options {
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .login .login-form.forgot-password .login-options {
        margin-top: 0px;
    }
    /*18-01-2021*/
    .reports .report-details .report-top {
        display: block;
        position: relative
    }

    .reports .date-filter .date {
        margin-left: 18px;
    }

        .reports .date-filter .date:nth-child(2) {
            margin-left: 0px;
        }

    .reports .date-filter {
        display: flex;
        flex-wrap: wrap;
    }

    .reports .report-details .report-top .btn-primary.btn-export {
        position: absolute;
        left: 0px;
        top: 60px;
    }

    .reports .ui-tabs .ui-tabs-nav {
        display: flex;
        overflow: auto;
        overflow-y: hidden;
    }

    .app-wrapper .content-wrapper .my-shippments.wallet-shipments { /*right:290px;*/
        left: 0px;
    }

        .app-wrapper .content-wrapper .my-shippments.wallet-shipments .topbar .filters {
            margin-right: 0px !important;
            padding-left: 0px;
        }
    /*18-01-2022*/
    .login .login-form.account-type {
        width: 100% !important;
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
    }

    .account-type .signup-type {
        display: flex;
        ;
    }

        .account-type .signup-type .signup-card {
            width: 100%;
            max-width: 280px;
        }
    /*18-01-2022 end*/
}
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
    body.login {
        background: url(images/login-bg-mobile.png) left top no-repeat;
        background-attachment: fixed;
        background-size: 100%;
        position: relative
    }

    .login .app-wrapper .login-wrapper {
        height: initial;
        position: relative
    }

    .login .app-wrapper {
        background: none;
    }

    .login .login-form {
        width: 100%; /*max-width:550px;*/
        background: #1B365E;
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        height: auto;
        position: static;
        transform: translate(0%,0%);
        margin: 0px auto;
        border-radius: 0px;
        padding: 30px 20px 60px 20px;
    }

        .login .login-form.create-account {
            webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
            clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
            ;
            height: auto;
        }

    .alert {
        width: 100%;
        box-sizing: border-box;
        right: 0px;
        -webkit-clip-path: none;
        clip-path: none;
        top: 0px;
        position: fixed;
        z-index: 111
    }

    .login .id-verification-form {
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
    }

    .login .retail-stores .store-list {
        border-radius: 0px;
    }

    .login .retail-stores .bottom-bar {
        background-color: #1B365D
    }

    .login .retail-stores .store-list.expand {
        max-height: 277px;
        overflow: auto;
    }

    .login .id-verification-form .form-group .custom-file .custom-file-label {
        padding: 50px 50px 0px 50px
    }

    .login .login-form .login-footer {
        padding: 0px 20px;
    }

    .login .login-form .guide-txt {
        padding: 0px;
    }

    .login .account-check {
        height: auto;
    }

        .login .account-check .small-logo {
            padding-top: 40px;
        }

    .login .login-form .back-btn {
        top: 35px;
    }

    .login .login-form .login-footer {
        padding: 0px 20px;
        padding: 0px;
        position: static;
        padding-top: 20px;
    }

    .login .terms-conditions .slimScrollDiv {
        margin-left: -17px;
    }

    .login .forgot-password.otp-form {
        height: auto;
    }

    .login .login-form.passowrd-form {
        height: auto;
    }

    .login .login-form .form-group .col-sm-6 .form-control {
        webkit-clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 33%);
        clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 33%);
    }

    .success-dialog {
    }

        .success-dialog .success-dialog-content {
            text-align: center;
            padding-top: 30px;
        }

            .success-dialog .success-dialog-content p {
                font-family: 'Cairo', sans-serif;
                margin: 20px 0px;
                padding: 0px;
                font-size: 25px;
                color: #fff;
                line-height: 30px;
            }

            .success-dialog .success-dialog-content .btn-primary {
                background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
                height: 50px;
                width: 100%;
                border: none;
                text-align: left;
                padding: 0px 0px 0px 15px;
                color: #fff;
                font-size: 20px;
                font-family: 'Cairo', sans-serif;
                font-weight: 700;
                border-radius: 0px;
                -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 34%, 95% 0);
                clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 34%, 95% 0);
                border-radius: 0px;
                line-height: 44px;
                display: flex;
                position: relative;
            }

                .success-dialog .success-dialog-content .btn-primary .icon {
                    background: url(images/round-right-arrow.svg) left top no-repeat !important;
                    width: 23px;
                    height: 23px;
                    position: absolute;
                    right: 12px;
                    top: 16px;
                }

    .login-desk-header {
        display: none;
    }

    .login .chat-btn {
        display: none;
    }

    .login-mobile-header {
        display: block;
        padding: 80px 20px 20px 20px;
    }

        .login-mobile-header h3 {
            font-family: 'Cairo', sans-serif;
            font-weight: 600;
            font-size: 25px;
            color: #fff;
            margin: 26px 0px 26px 0px;
            text-align: right;
            line-height: 30px;
        }

    .login .login-form h2 {
        text-align: right;
        margin-bottom: 20px;
    }

    .login .forgot-password h3 {
        text-align: right;
    }

    .login .login-form .guide-txt {
        text-align: right;
        font-size: 16px;
    }

    .login .login-form.forgot-password {
        margin-top: 30px;
    }

    .login .forgot-password.otp-form .otp-send-msg {
        width: 100%;
        padding: 0px;
        text-align: right;
        font-size: 16px;
    }

    .login .otp-form .otp-group {
        max-width: 340px;
        margin: 0px auto;
        margin-bottom: 26px;
    }

    .login .otp-form .form-control.otp-control {
        height: auto;
        width: 50px;
        font-size: 30px;
    }

    .login .otp-form .form-group .btn-primary {
        max-width: 380px;
        margin: 0px auto
    }

    .login .forgot-password.otp-form .form-control.otp-control {
        width: 75px;
        height: 75px;
        font-size: 40px;
    }

    .login .account-check p {
        padding: 0px;
        text-align: right;
    }

    .login .login-form h3 {
        text-align: right;
    }

    .login .otp-form .otp-send-msg {
        text-align: right;
        padding: 0px;
    }

    .login .language-selection {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
    }
    /*Main pages 25-11-2020*/
    body {
        background: #1B365D url(images/bg.svg) 124% top no-repeat;
        background-attachment: fixed;
        background-size: 120px;
        background: #1B365D
    }

    .app-wrapper {
        width: 100%;
        padding: 0px;
    }

        .app-wrapper .content-wrapper {
            display: block !important;
            width: 100%;
            padding: 0px;
            background: none;
        }

        .app-wrapper .header {
            display: none;
        }

        .app-wrapper .content-wrapper .content {
            margin: 0px;
            width: 100%;
            padding: 110px 20px 100px 20px;
        }

        .app-wrapper .content-wrapper .side-nav-bar {
            width: 100%;
            height: 100vh;
            z-index: 112;
            background: #1B365D;
            display: none;
        }

    .open-nav .app-wrapper .content-wrapper .side-nav-bar {
        display: initial;
    }

    .app-wrapper .content-wrapper .side-nav-bar .mobile-header {
        height: 150px;
        padding: 54px 0px 0px 20px;
        background: #112B50 url(images/bg.svg) 120% 20px no-repeat;
        background-size: 120px;
        display: block;
    }

    .app-wrapper .content-wrapper .side-nav-bar .nav {
        width: 100%;
        background: #1B365D;
        padding: 0px 10px;
    }

        .app-wrapper .content-wrapper .side-nav-bar .nav ul li {
            border-bottom: 2px solid #183052;
            margin: 0px;
            background: url(images/nav-icon/mobile-nav-bullet.svg) 98% center no-repeat !important;
        }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li:last-child {
                border-bottom: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li a {
                height: 50px;
                line-height: 50px;
                background-position: 6px !important;
                padding-left: 45px
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.dashboard {
                display: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.packages {
                display: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.shipment {
                display: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.active {
                background: none;
            }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.active a {
                    border: none;
                }

    .app-wrapper .content-wrapper .side-nav-bar .logout-btn {
        position: static;
        margin-top: 10px;
    }

    .bottom-nav-bar {
        height: 100px;
        background: #112B50;
        z-index: 112;
        position: fixed;
        bottom: 0px;
        width: 100%;
        display: flex;
        border-radius: 30px 30px 0px 0px;
    }

        .bottom-nav-bar ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
            font-size: 12px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
        }

            .bottom-nav-bar ul li {
                margin-top: 30px;
            }

            .bottom-nav-bar ul a {
                color: #8895A8;
                padding-top: 50px;
            }

            .bottom-nav-bar ul li.active a {
                color: #FF7F32;
            }

            .bottom-nav-bar ul li.dashboard a {
                background: url(images/nav-icon/dashboard-icon.svg)center center no-repeat;
            }

            .bottom-nav-bar ul li.packages a {
                background: url(images/nav-icon/package-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.shipment a {
                background: url(images/nav-icon/shipment-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.active.dashboard a {
                background: url(images/nav-icon/active-dashboard-icon.svg)center center no-repeat;
            }

            .bottom-nav-bar ul li.active.packages a {
                background: url(images/nav-icon/active-package-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.active.shipment a {
                background: url(images/nav-icon/active-shipment-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.more a {
                background: url(images/nav-icon/more-icon.svg) center center no-repeat;
                background-size: 100%;
            }

            .bottom-nav-bar ul li.active.more a {
                background: url(images/nav-icon/active-more-icon.svg) center center no-repeat;
                background-size: 100%;
            }

    .address-book .address-topbar {
        width: 100%;
    }

        .address-book .address-topbar .search {
            width: 54%;
        }

    .address-book .address-list .address-card {
        flex-wrap: wrap;
        width: 100%;
        webkit-clip-path: polygon(20px 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 14%);
        clip-path: polygon(20px 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 14%);
    }

    .ui-tabs .ui-tabs-nav li {
        margin-left: 20px;
    }

    .address-book .address-topbar .search .form-control {
        width: calc(100% - 40px);
    }

    .address-book .address-topbar .filters .seprator {
        margin: 0px 10px;
    }

    .address-book .address-topbar .filters {
        margin-right: 10px;
    }

    .address-book .address-list .address-card .edit-icon {
        display: none;
    }

    .address-book .address-list .address-card .add-count {
        position: absolute;
        left: 10px;
        bottom: 10px;
        padding-left: 20px;
        padding-right: 0px;
    }

    .address-book .address-list .address-card .phone {
        position: absolute;
        left: 0px;
        top: 10px;
    }

    .address-book .address-list .address-card .name {
        margin-bottom: 20px;
    }

    .address-book .address-list .address-card .address {
        margin-bottom: 20px;
    }

    .address-book .address-list .address-card .store-address {
        margin-bottom: 10px;
    }

    .app-wrapper .content-wrapper .content .add-button {
        width: 50px;
        height: 50px;
        background-size: 50px;
        bottom: 110px;
        left: 11px;
    }

    .ui-dialog.ui-widget-content {
        position: fixed !important;
        position: fixed !important;
        width: 100% !important;
        padding: 0px !important;
        top: 0px !important;
        z-index: 200 !important;
        height: 100vh !important
    }

    .address-book-dialog .ui-dialog-content {
        padding: 20px;
        height: 100vh !important
    }

        .address-book-dialog .ui-dialog-content .dialog-title {
            padding: 10px;
        }

    .address-book-dialog .address-dialog-content .slimScrollDiv {
        height: auto !important;
        overflow: visible !important
    }

    .address-book-dialog .address-dialog-content .form-scroll {
        height: 50vh !important;
    }

    .slimScrollBar_new {
        display: none !important;
    }

    .slimScrollRail_new {
        display: none !important;
    }

    .address-book-dialog .address-dialog-content .action-bar {
        padding: 0px 16px;
    }

        .address-book-dialog .address-dialog-content .action-bar .btn-primary {
            width: 100%;
            max-width: 480px;
        }

    .address-book-dialog .address-dialog-content .address-types .btn {
        margin-bottom: 10px;
    }

    .address-book-dialog .address-dialog-content .centre-search .map-link {
        position: static;
        margin-bottom: 10px;
    }

    .address-book-dialog .address-dialog-content .slimScrollDiv {
        margin-right: 0px;
        padding-right: 0px;
    }

    .address-book-dialog .address-dialog-content .centre-list.all-centers {
    }

        .address-book-dialog .address-dialog-content .centre-list.all-centers .centre-card {
            display: block;
        }

        .address-book-dialog .address-dialog-content .centre-list.all-centers .check-icon {
            position: static;
            margin-top: 0px;
        }

    .app-wrapper .content-wrapper .content .content-title {
        display: flex;
        height: 100px;
        align-items: center;
        background: #112B50;
        margin-left: -20px;
        margin-right: -20px;
        padding-right: 20px;
        background: #112B50 url(images/bg.svg) -10% top no-repeat; /*background-attachment: fixed;*/
        background-size: 120px;
        position: fixed;
        width: calc(100% + 40px);
        right: 0px;
        top: 0px;
        z-index: 111;
        margin: 0px;
    }

    .mobile-only {
        display: block !important;
    }

    .ui-dialog .ui-dialog-content .dialog-title .back-btn {
        left: 0px;
        top: 12px;
    }

    .ui-dialog .ui-dialog-titlebar-close {
        display: none;
    }

    .ui-dialog.success-dialog .ui-dialog-titlebar-close {
        display: block;
    }

    .success-dialog .success-dialog-content.address-save {
        height: auto;
        padding-top: 30px;
    }

        .success-dialog .success-dialog-content.address-save .success-content {
            position: static;
            transform: translateY(0%);
        }
    /*01-12-2020*/
    .app-wrapper .content-wrapper .content .page-guidetxt {
        width: 100%;
    }

    .wallet-details .summery-warapper {
        width: 100%;
        max-width: 455px;
    }

    .wallet-details .wallet-blance {
        width: 100%;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
    }

    .wallet-details .button-warapper {
        position: fixed;
        bottom: 0px;
        left: 0px;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        height: 100px;
        width: 100%;
        z-index: 200;
        padding: 0px 20px;
    }

        .wallet-details .button-warapper .wallet-recharge-btn {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 50px;
            width: 480px;
            border: none;
            text-align: left;
            padding: 0px 15px 0px 0px;
            color: #fff;
            font-size: 20px;
            font-family: 'DINNextLTArabic-Bold';
            border-radius: 0px;
            webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
        }

    .wallet-details .wallet-recharge-btn .card-icon {
        display: none;
    }

    .wallet-details .wallet-recharge-btn .small-txt {
        display: none;
    }

    .wallet-details .transactions-list .transaction-card {
        width: 100%;
        max-width: 425px;
        margin-right: 0px;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
    }
    /*02-12-2020*/
    .app-wrapper .content-wrapper .myaccount .account-option {
        width: 100%;
    }

        .app-wrapper .content-wrapper .myaccount .account-option .info-header {
            height: 70px;
        }

            .app-wrapper .content-wrapper .myaccount .account-option .info-header .seprator {
                display: none;
            }

            .app-wrapper .content-wrapper .myaccount .account-option .info-header .status {
                display: none;
            }

        .app-wrapper .content-wrapper .myaccount .account-option li .option-content {
            padding: 20px 18px 30px 18px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option li.active .option-content .row {
            margin-bottom: 0px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option li.active .option-content .col-sm-6 {
            padding-bottom: 14px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option > li.complited .status {
            display: none !important
        }

    .app-wrapper .content-wrapper .myaccount .retail-centre .centre-search .map-link {
        position: static;
        margin: 10px auto 20px auto;
        display: block;
        width: 170px;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list-caption {
        font-size: 13px;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .showmore-link {
        font-size: 13px;
    }
    /*03-02-2020*/
    .my-shippments .topbar {
        width: 100%;
    }

        .my-shippments .topbar .filters {
            padding-left: 10px;
        }

            .my-shippments .topbar .filters .seprator {
                margin: 0px 12px;
            }

    .my-shippments .shipment-status {
        width: 100%;
    }

        .my-shippments .shipment-status li.active .option-content {
        }

    .delete-shipment-dialog.ui-widget-content {
        width: 90% !important;
        max-width: 600px !important;
        height: auto !important;
        top: 50% !important;
        transform: translateY(-50%);
    }

    .delete-shipment-dialog .delete-shipment-dialog-content .action-bar .btn-primary {
        width: 100%;
        max-width: 350px;
    }

    .delete-shipment-dialog .ui-dialog-titlebar-close {
        display: block;
    }

    .my-shippments .data-table {
        display: none;
    }

    .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .right-col {
        position: relative
    }

    .app-wrapper .content-wrapper .my-shippments .shipment-list .shippment-card {
        width: 100%;
        max-width: 378px;
        background: #1B365D;
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 95% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 95% 0);
    }

    .my-shippments .shipment-list .shippment-card .delete {
        width: 24px;
        height: 24px;
        background: url(images/myshipment/trash.svg) center center no-repeat;
        display: inline-block
    }

    .my-shippments .shipment-list .shippment-card .btn-trackorder {
        height: 34px;
        width: 115px;
        display: inline-block;
        background: #112B50;
        font-size: 16px;
        color: #FF7F32;
        text-decoration: none;
        text-align: center;
        line-height: 34px;
    }

    .my-shippments .shipment-list .shippment-card .trackorder {
        margin-top: 18px;
    }

    .my-shippments .shipment-list .shippment-card .awd-print {
        font-size: 14px;
        color: #fff;
        background: url(images/myshipment/printer.svg) right center no-repeat;
        position: absolute;
        right: 0px;
        bottom: -4px;
        background-size: 20px;
        padding-right: 29px;
        width: 136px
    }

    .app-wrapper .content-wrapper .new-shippment .shipment-selection {
        display: block !important
    }

        .app-wrapper .content-wrapper .new-shippment .shipment-selection .seprator {
            display: none;
        }

    .app-wrapper .content-wrapper .new-shippment .package-selection {
        display: block !important
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-details {
        display: block !important
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-description .form-control {
        width: 100%;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list {
        margin-left: -12px;
        margin-right: 0px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .quanty-widget {
        width: 150px;
        margin-right: 15px;
    }

    .app-wrapper .content-wrapper .new-shippment .quanty-widget .qty-txt {
        padding-left: 20px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list li {
        margin-right: 24px;
        margin-left: 0px;
        margin-bottom: 16px;
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card {
        margin-bottom: 20px;
        margin-left: 10px;
        width: 114px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-description .description-header {
        display: block !important
    }

    .app-wrapper .content-wrapper .new-shippment .subheading-style2 {
        display: flex
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-description .link {
        margin-left: 0px;
        margin-top: 20px;
        display: inline-block;
    }

    .app-wrapper .content-wrapper .new-shippment .action-bar {
        position: fixed;
        bottom: 0px;
        left: 0px;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        height: 100px;
        width: 100%;
        z-index: 200;
        padding: 0px 20px;
    }

    .app-wrapper .content-wrapper .new-shippment .btn-primary {
        width: 100%;
        max-width: 350px;
        margin: 24px auto 0px auto
    }

    .app-wrapper .content-wrapper .new-shippment .shipment-details {
        padding: 20px;
        width: 100%;
        max-width: 470px;
        height: auto;
    }

    .order-confirm-dialog.ui-dialog .ui-dialog-content {
        height: 100vh !important
    }

    .ui-dialog.address-book .ui-dialog-content .dialog-title .back-btn .icon {
        background: url(images/orange-down-arrow.svg) 0px 14px no-repeat;
        display: block;
        background-size: 96%;
        height: 100%;
        width: 100%;
        transform: rotate(270deg);
    }

    .ui-dialog.address-book .ui-dialog-content .dialog-title {
        display: block;
        text-align: right;
        padding-right: 23px;
        color: #fff;
    }

    .ui-dialog.address-book .address-dialog-content p {
        width: 100%;
        text-align: left;
        padding-left: 32px;
        padding-top: 30px;
    }

    .ui-dialog.address-book .ui-dialog-content .dialog-title .back-btn {
        top: -4px;
    }

    .ui-dialog.address-book .address-dialog-content .address-topbar .search {
        width: 100%;
    }

    .ui-dialog.address-book .address-dialog-content .address-topbar {
        padding-left: 0px;
    }

    .ui-dialog.address-book .address-list {
        display: block;
        height: 100% !important;
        display: flex;
    }

    .ui-dialog.address-book .slimScrollDiv {
        height: 45vh !important;
    }

    .ui-dialog.address-book .address-list .address-card {
        margin: 0px 15px 20px 0px;
    }

    .ui-dialog.address-book .address-list .address-card {
        width: 100%;
        max-width: 315px;
    }

    .ui-dialog.address-book .ui-dialog-content {
        width: 100% !important;
        height: 100vh !important;
    }

    .ui-dialog.address-book .address-dialog-content .address-topbar {
        width: 100%;
        padding-right: 0px;
    }

    .app-wrapper .content-wrapper .new-shippment .addresses {
        display: block !important
    }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card {
            width: 100%;
            max-width: 315px;
            margin-right: 0px;
            height: auto
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .select-address-btn {
            display: block
        }

    .app-wrapper .content-wrapper .new-shippment .add-address-btn {
        margin-left: 10px;
    }

    .app-wrapper .content-wrapper .new-shippment .subheading {
        font-size: 13px;
    }

    body.popup .app-wrapper {
        filter: none;
    }

    .ui-dialog.address-book .address-list .address-card .name {
        margin-bottom: 4px;
    }

    .ui-dialog.address-book .address-list .address-card .address {
        margin-bottom: 4px;
    }

    .ui-dialog.address-book .address-list .address-card .phone {
        position: static
    }

    .address-book-dialog .address-dialog-content .form-scroll {
        overflow: auto;
    }

    .address-book-dialog .address-dialog-content .col-sm-6 {
        padding-bottom: 20px;
    }
    /*04-12-2020*/
    .app-wrapper .content-wrapper .package-details .notification {
        width: 100%;
        max-width: 750px;
        flex-wrap: wrap;
        position: relative;
        display: flex;
        top: 0px;
        padding-top: 30px;
    }

        .app-wrapper .content-wrapper .package-details .notification .items {
            width: 50%;
            padding-bottom: 20px;
            display: flex;
            align-items: center;
            padding-right: 13px;
            margin-bottom: 0px;
        }

        .app-wrapper .content-wrapper .package-details .notification .heading {
            display: none;
        }

        .app-wrapper .content-wrapper .package-details .notification .items .icon {
            padding-left: 12px;
        }

        .app-wrapper .content-wrapper .package-details .notification .items .title {
            line-height: 1.2;
            text-align: right
        }

        .app-wrapper .content-wrapper .package-details .notification .items .desc {
            text-align: right
        }

        .app-wrapper .content-wrapper .package-details .notification .items:after {
            display: none
        }

    .app-wrapper .content-wrapper .package-details .promotion {
        width: 100%;
        background: url(images/promo-bg-mobile.png) left top no-repeat;
        height: 82px;
        background-size: 100%;
        padding: 10px
    }

        .app-wrapper .content-wrapper .package-details .promotion .discount .discount-value {
            font-size: 50px;
        }

        .app-wrapper .content-wrapper .package-details .promotion .discount label {
            font-size: 18px;
        }

        .app-wrapper .content-wrapper .package-details .promotion .promo-msg p {
            font-size: 11px;
            line-height: 1.2
        }

        .app-wrapper .content-wrapper .package-details .promotion .discount {
            margin-right: 20px
        }

        .app-wrapper .content-wrapper .package-details .promotion .promo-msg .badge {
            height: 18px;
            font-size: 10px;
            line-height: 18px;
            padding: 0px 6px;
            margin-bottom: 4px
        }

    .app-wrapper .content-wrapper .package-details .packages-steps {
        font-size: 12px;
    }

        .app-wrapper .content-wrapper .package-details .packages-steps .step .step-number {
            font-size: 58px;
        }

        .app-wrapper .content-wrapper .package-details .packages-steps .step-sep {
            margin: 0px 10px;
        }

    .app-wrapper .content-wrapper .package-details .bundle-card {
        width: 92px;
        height: 92px;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
    }

        .app-wrapper .content-wrapper .package-details .bundle-card .weight {
            font-size: 40px;
        }

        .app-wrapper .content-wrapper .package-details .bundle-card span {
            font-size: 18px;
        }

        .app-wrapper .content-wrapper .package-details .bundle-card .waybillleft {
            font-size: 11px;
            line-height: 1.1;
        }

    .app-wrapper .content-wrapper .package-details .add-package-btn {
        min-width: 92px;
        height: 92px;
        width: 95px;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
    }

        .app-wrapper .content-wrapper .package-details .add-package-btn .buy-icon {
            top: 10px;
            width: 18px;
            background-size: 100%;
        }

        .app-wrapper .content-wrapper .package-details .add-package-btn .icon {
            bottom: 10px;
            left: 10px;
            width: 18px;
            height: 18px;
            background-size: 100%;
        }

        .app-wrapper .content-wrapper .package-details .add-package-btn .txt .bold-txt {
            font-size: 13px;
            line-height: 1.2;
        }

    .app-wrapper .content-wrapper .package-details .existing-packages .bundle-list {
        flex-wrap: nowrap
    }

    .app-wrapper .content-wrapper .package-details .packages-list {
        overflow: auto;
    }

    .buy-bundal-dialog.ui-dialog.ui-widget-content {
        overflow: auto
    }

        .buy-bundal-dialog.ui-dialog.ui-widget-content .dialog-title {
            text-align: right;
            background: #112B50 url(images/bg.svg) -24% top no-repeat;
            height: 100px;
            width: calc(100% + 40px);
            margin-left: -20px;
            margin-right: -20px;
            margin-top: -20px;
            background-size: 120px;
            padding: 30px 50px 0px 0px;
        }

    .buy-bundal-dialog.ui-dialog .dialog-title .back-btn {
        right: 20px;
        top: 33px;
    }

    .bundal-dialog-content h3 {
        text-align: right
    }

    .bundal-dialog-content p {
        text-align: right;
        width: 100%;
    }

    .bundal-dialog-content .bundle-list {
        margin-right: -22px;
    }

    .buy-bundal-dialog.ui-dialog .ui-dialog-content {
        overflow: auto
    }

    .bundal-dialog-content .bundle-list .bundle-card {
        width: 100%;
        max-width: 366px;
        margin-right: 22px;
    }

    .bundal-dialog-content .bundle-list.selected-bundle .bundle-card {
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }

    .bundal-dialog-content .bundle-list.selected-bundle {
        margin-right: 0px
    }

    .bundal-dialog-content .waybill-list {
        margin-left: 0px;
    }

    .bundal-dialog-content .waybill-card {
        margin: 0px 20px 20px 20px;
        width: calc(100% - 40px)
    }

    .buy-bundal-dialog.ui-dialog.ui-widget-content .dialog-title .cart {
        background: url(images/Cart.svg) left top no-repeat;
        width: 28px;
        height: 28px;
        background-size: 100%;
        position: absolute;
        left: 15px;
        top: 40px;
    }

        .buy-bundal-dialog.ui-dialog.ui-widget-content .dialog-title .cart .cart-item {
            width: 20px;
            height: 20px;
            background: #FF7F32;
            border-radius: 50%;
            font-size: 14px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: -4px;
            top: 21px;
        }

    .cart-dialog.ui-dialog.ui-widget-content {
        background: #1B365E;
        overflow: auto;
    }

        .cart-dialog.ui-dialog.ui-widget-content .dialog-title {
            text-align: right;
            background: #112B50 url(images/bg.svg) -10% top no-repeat;
            height: 100px;
            width: calc(100% + 40px);
            margin-left: -20px;
            margin-right: -20px;
            margin-top: -20px;
            background-size: 120px;
            padding: 30px 50px 0px 0px;
        }

    .cart-dialog.ui-dialog .dialog-title .back-btn {
        right: 20px;
        top: 33px;
    }

    .cart-dialog-content {
        padding: 40px 0px 15px 0px;
    }

        .cart-dialog-content .left-col {
            width: 100%;
            padding-right: 0px;
        }

        .cart-dialog-content .right-col {
            width: 100%;
            padding-right: 0px;
            position: relative;
            margin-top: 30px;
            padding-top: 120px
        }

        .cart-dialog-content .cart-items .cart-item {
            width: 100%;
        }

        .cart-dialog-content .cart-heading {
            font-size: 20px;
            color: #fff;
            margin-bottom: 14px;
        }

        .cart-dialog-content .couponcode {
            position: absolute;
            top: -36px;
            width: 100%;
        }

        .cart-dialog-content .action-bar {
            height: 70px;
            background: #081B36;
            box-shadow: 0px -10px 15px #05132780;
            position: absolute;
            width: 100%;
            left: 0px;
            bottom: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
        }

    .cart-dialog.ui-dialog .ui-dialog-content {
        height: 100% !important;
    }

    .cart-dialog-content .btn-primary {
        margin-top: 0px;
    }

    .checkout-dialog.ui-dialog.ui-widget-content .dialog-title {
        text-align: right;
        background: #112B50 url(images/bg.svg) -10% top no-repeat;
        height: 100px;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -20px;
        background-size: 120px;
        padding: 30px 50px 0px 0px;
        display: block;
    }

    .checkout-dialog.ui-dialog .dialog-title .back-btn {
        right: 20px;
        top: 33px;
    }

    .checkout-dialog-content .wallet-notification {
        text-align: right;
        padding-bottom: 20px;
    }

    .checkout-dialog-content .amount-summery {
        display: block;
        height: auto;
        width: 100%;
    }

        .checkout-dialog-content .amount-summery .wallet-blance {
            width: 100%;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .checkout-dialog-content .amount-summery .required-amount {
            width: 100%;
            background-position: right;
            padding-right: 34px;
            font-size: 16px;
            justify-content: space-between;
            padding-left: 0px;
        }

            .checkout-dialog-content .amount-summery .required-amount:before {
                display: none;
            }

    .checkout-dialog-content .wallet-recharge {
        text-align: left
    }

        .checkout-dialog-content .wallet-recharge .recharge-form {
            width: 100%;
        }

            .checkout-dialog-content .wallet-recharge .recharge-form .form-control {
                width: calc(100% - 120px)
            }

    .checkout-dialog-content .payment-options {
        width: 100%;
    }

        .checkout-dialog-content .payment-options ul {
            display: block;
        }

            .checkout-dialog-content .payment-options ul li {
                width: 100%;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 2px solid #112B50;
            }

                .checkout-dialog-content .payment-options ul li:last-child {
                    border-bottom: none;
                }

                .checkout-dialog-content .payment-options ul li.seprator {
                    display: none;
                }

    .checkout-dialog.ui-dialog {
        overflow: auto;
    }

    .checkout-dialog-content .action-bar {
        height: 70px;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        position: fixed;
        width: 100%;
        left: 0px;
        bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .checkout-dialog-content .btn-primary {
        margin-top: 10px !important;
    }

    .checkout-dialog-content .wallet-recharge .recharge-form .btn-primary {
        margin-top: 0px !important;
    }

    .checkout-dialog-content .payment-options ul li .card .card-footer .btn-primary {
        margin-top: 0px !important;
    }

    .checkout-dialog-content {
        height: 100vh
    }

    .checkout-dialog.ui-dialog .ui-dialog-content { /*overflow:hidden*/
        height: 100% !important
    }

    .shipment-tracking .shipment-summery {
        width: 100%;
        display: block !important
    }

    .shipment-tracking .shipment-progress {
        width: 100%;
    }

        .shipment-tracking .shipment-progress .progress {
            width: 100%;
        }

    .shipment-tracking .shipment-summery .col1 {
        width: 100%;
    }

    .shipment-tracking .shipment-progress .progress > div:first-child {
        min-width: 9%
    }

    .shipment-tracking .shipment-progress .progress > div:last-child {
        min-width: 9%
    }

    .shipment-tracking .shipment-progress .progress > div {
        min-width: 16.4%
    }

        .shipment-tracking .shipment-progress .progress > div .name {
            font-size: 9px;
            padding: 0px 6px;
            width: 60px;
            left: -62%;
        }

        .shipment-tracking .shipment-progress .progress > div.active .name {
            font-size: 10px;
        }

        .shipment-tracking .shipment-progress .progress > div .step-icon {
            width: 40px;
            height: 40px;
            left: -44%;
        }

        .shipment-tracking .shipment-progress .progress > div:first-child .name {
            left: -80%
        }

    .shipment-tracking .shipment-progress .progress.step1:after {
        width: 14%;
    }

    .shipment-tracking .shipment-progress .progress.step2:after {
        width: 26%;
    }

    .shipment-tracking .shipment-progress .progress.step3:after {
        width: 45%
    }

    .shipment-tracking .shipment-progress .progress.step4:after {
        width: 58%;
    }

    .shipment-tracking .shipment-progress .progress.step5:after {
        width: 75%;
    }

    .shipment-tracking .shipment-progress .progress.step6:after {
        width: 100%;
    }

    .shipment-tracking .shipment-progress .progress > div:first-child .step-icon {
        left: -60%
    }

    .shipment-tracking .shipment-summery .tracking-details .shipment-icon {
        width: 40px;
        height: 40px;
    }

    .shipment-tracking .shipment-summery .field-caption {
        font-size: 12px;
    }

    .shipment-tracking .shipment-summery .tracking-details .tracking-number .field-value {
        font-size: 18px;
    }

    .shipment-tracking .shipment-summery .tracking-details {
        height: auto;
        padding: 10px 60px 10px 10px;
    }

        .shipment-tracking .shipment-summery .tracking-details .status {
            background-size: 18px;
        }

        .shipment-tracking .shipment-summery .tracking-details .shipment-address {
            margin-right: -50px;
        }

        .shipment-tracking .shipment-summery .tracking-details .seprator {
            margin: 24px
        }

    .shipment-tracking .shipment-summery .col2 {
        width: 100%;
        margin-top: 10px;
    }

    .shipment-tracking .date {
        text-align: right
    }

    .shipment-tracking .shipment-activity {
    }

        .shipment-tracking .shipment-activity .activity .step .step-description {
            width: auto;
        }

            .shipment-tracking .shipment-activity .activity .step .step-description .day-time {
                font-size: 11px;
                margin-bottom: 4px;
            }

            .shipment-tracking .shipment-activity .activity .step .step-description p {
                font-size: 12px;
                line-height: 18px
            }

            .shipment-tracking .shipment-activity .activity .step .step-description .location {
                font-size: 11px;
                background-size: 12px;
                padding-left: 20px;
            }
    /*28-12-2020*/
    .app-wrapper .content-wrapper .content .content-title.mobile-only {
        display: flex !important
    }

    .dashboard-details .top-section {
        display: block;
    }

    .dashboard-details .left-col {
        width: 100%;
    }

    .dashboard-details .right-col {
        width: 100%;
    }

    .dashboard-details .profile-details {
        display: block;
        position: relative;
        padding-top: 44px;
        padding-bottom: 12px;
    }

        .dashboard-details .profile-details .profile-status-btn {
            position: absolute;
            margin-left: 0px;
            left: -20px;
            top: 0px;
            width: calc(100% + 40px);
            clip-path: none;
            padding: 0px;
        }

            .dashboard-details .profile-details .profile-status-btn .mobile-only {
                position: relative;
                width: 194px;
                padding-right: 28px;
                margin: 0px auto;
            }

    .dashboard-details .purchase-details {
        display: block;
        display
    }

    .dashboard-details .overview .overflow-items .item {
        min-width: calc(50% - 20px);
        max-width: 240px;
        width: calc(50% - 20px);
        margin-right: 0px;
        margin-left: 20px;
        margin-bottom: 20px;
        padding-left: 10px;
        height: 75px;
    }

    .dashboard-details .overview .overflow-items {
        display: flex;
        flex-wrap: wrap;
        margin-left: -20px;
    }

    .dashboard-details .shipments-details {
        width: 100%;
        max-width: 487px;
        margin-bottom: 20px;
    }

        .dashboard-details .shipments-details .user-shipments {
            width: 100%;
            max-width: 487px
        }

    .dashboard-details .dashboard-chart {
        display: block
    }

    .dashboard-details .chart-wrapper {
        margin-left: 0px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment {
        width: 97%
    }

    .dashboard-details .shipments-details .user-shipments .owl-nav .owl-prev {
        display: none;
    }

    .dashboard-details .shipments-details .user-shipments .owl-nav .owl-next {
        display: none;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .shipment-id {
        background-size: 30px
    }

    .dashboard-details .date-filter .btn-primary {
        width: 90px
    }

    .dashboard-details .date-filter .date {
        margin-left: 14px;
    }

        .dashboard-details .date-filter .date .form-control {
            width: 100%;
            padding-left: 5px;
            max-width: 148px
        }

    .dashboard-details .wallet-summery .wallet-blance {
        padding: 0px 10px;
    }

        .dashboard-details .wallet-summery .wallet-blance .blance {
            background-size: 10px;
            font-size: 12px;
            padding-left: 14px;
        }

        .dashboard-details .wallet-summery .wallet-blance .amount {
            font-size: 16px;
        }

    .dashboard-details .wallet-summery .wallet-recharge-btn .card-icon {
        background-size: 13px;
        right: 10px;
    }

    .dashboard-details .wallet-summery .wallet-recharge-btn {
        padding-right: 32px;
        font-size: 12px;
        padding-left: 20px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .caption {
        font-size: 12px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .value {
        font-size: 12px;
    }

    .dashboard-details .package-list .add-package-btn {
        min-width: 85px;
    }

    .dashboard-details .package-list {
        align-items: end !important;
    }

    .dashboard-details .overview .overflow-items .item .circle canvas {
        width: 40px !important;
        height: 40px !important;
    }

    .dashboard-details .overview .overflow-items .item .circle {
        width: 40px !important;
        height: 40px !important;
    }

        .dashboard-details .overview .overflow-items .item .circle strong {
            font-size: 9px;
            left: 12px;
            top: 13px;
        }

    .dashboard-details .overview .overflow-items .item .value {
        font-size: 19px
    }

    .dashboard-details .overview .overflow-items .item .caption {
        font-size: 11px
    }

    .dashboard-details .overview .overflow-items .shipment-total {
        background: #2F4F7E url(images/dashboard/package-icon.svg) 4% 6px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-delivered {
        background: #2F4F7E url(images/dashboard/sales-icon.svg) 4% 6px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-transit {
        background: #2F4F7E url(images/dashboard/ship-icon.svg) 4% 10px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-return {
        background: #2F4F7E url(images/dashboard/report-icon.svg) 4% 10px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .pending-items .pending-card {
        width: calc(50% - 20px);
        margin-left: 20px;
        height: auto;
    }

    .reports .ui-tabs .ui-tabs-nav {
        display: flex;
        overflow: auto;
    }
    /*Main pages end*/
}
/* Medium devices (tablets, 768px and up) & landscape*/
@media (min-width: 768px) and (max-width: 991.98px) and (orientation:landscape) {
    body.login {
        background: url(images/login-bg-mobile.png) left top no-repeat;
        background-attachment: fixed;
        background-size: 100%;
        position: relative
    }

    .login .app-wrapper .login-wrapper {
        height: initial;
        position: relative
    }

    .login .app-wrapper {
        background: none;
    }

    .login .login-form {
        width: 100%; /*max-width:550px;*/
        background: #1B365E;
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        height: auto;
        position: static;
        transform: translate(0%,0%);
        margin: 0px auto;
        border-radius: 0px;
        padding: 30px 20px 60px 20px;
    }

        .login .login-form.create-account {
            webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
            clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
            ;
            height: auto;
        }

    .alert {
        width: 100%;
        box-sizing: border-box;
        right: 0px;
        -webkit-clip-path: none;
        clip-path: none;
        top: 0px;
        position: fixed;
        z-index: 111
    }

    .login .id-verification-form {
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
    }

    .login .retail-stores .store-list {
        border-radius: 0px;
    }

    .login .retail-stores .bottom-bar {
        background-color: #1B365D
    }

    .login .retail-stores .store-list.expand {
        max-height: 277px;
        overflow: auto;
    }

    .login .id-verification-form .form-group .custom-file .custom-file-label {
        padding: 50px 50px 0px 50px
    }

    .login .login-form .login-footer {
        padding: 0px 20px;
    }

    .login .login-form .guide-txt {
        padding: 0px;
    }

    .login .account-check {
        height: auto;
    }

        .login .account-check .small-logo {
            padding-top: 40px;
        }

    .login .login-form .back-btn {
        top: 35px;
    }

    .login .login-form .login-footer {
        padding: 0px 20px;
        padding: 0px;
        position: static;
        padding-top: 20px;
    }

    .login .terms-conditions .slimScrollDiv {
        margin-left: -17px;
    }

    .login .forgot-password.otp-form {
        height: auto;
    }

    .login .login-form.passowrd-form {
        height: auto;
    }

    .login .login-form .form-group .col-sm-6 .form-control {
        webkit-clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 33%);
        clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 33%);
    }

    .success-dialog {
    }

        .success-dialog .success-dialog-content {
            text-align: center;
            padding-top: 30px;
        }

            .success-dialog .success-dialog-content p {
                font-family: 'Cairo', sans-serif;
                margin: 20px 0px;
                padding: 0px;
                font-size: 25px;
                color: #fff;
                line-height: 30px;
            }

            .success-dialog .success-dialog-content .btn-primary {
                background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
                height: 50px;
                width: 100%;
                border: none;
                text-align: left;
                padding: 0px 0px 0px 15px;
                color: #fff;
                font-size: 20px;
                font-family: 'Cairo', sans-serif;
                font-weight: 700;
                border-radius: 0px;
                -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 34%, 95% 0);
                clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 34%, 95% 0);
                border-radius: 0px;
                line-height: 44px;
                display: flex;
                position: relative;
            }

                .success-dialog .success-dialog-content .btn-primary .icon {
                    background: url(images/round-right-arrow.svg) left top no-repeat !important;
                    width: 23px;
                    height: 23px;
                    position: absolute;
                    right: 12px;
                    top: 16px;
                }

    .login-desk-header {
        display: none;
    }

    .login .chat-btn {
        display: none;
    }

    .login-mobile-header {
        display: block;
        padding: 80px 20px 20px 20px;
    }

        .login-mobile-header h3 {
            font-family: 'Cairo', sans-serif;
            font-weight: 600;
            font-size: 25px;
            color: #fff;
            margin: 26px 0px 26px 0px;
            text-align: right;
            line-height: 30px;
            margin: 25px auto 0px auto;
            max-width: 550px;
        }

        .login-mobile-header .logo {
            max-width: 550px;
            margin: 0px auto;
        }

    .login .login-form h2 {
        text-align: right;
        margin-bottom: 20px;
    }

    .login .forgot-password h3 {
        text-align: right;
    }

    .login .login-form .guide-txt {
        text-align: right;
        font-size: 16px;
    }

    .login .login-form.forgot-password {
        margin-top: 30px;
    }

    .login .forgot-password.otp-form .otp-send-msg {
        width: 100%;
        padding: 0px;
        text-align: right;
        font-size: 16px;
    }

    .login .otp-form .otp-group {
        max-width: 340px;
        margin: 0px auto;
        margin-bottom: 26px;
    }

    .login .forgot-password.otp-form .form-control.otp-control {
        width: 75px;
        height: 75px;
        font-size: 40px;
    }

    .login .account-check p {
        padding: 0px;
        text-align: right;
    }

    .login .login-form h3 {
        text-align: right;
    }

    .login .otp-form .otp-send-msg {
        text-align: right;
        padding: 0px;
    }

    .login .otp-form .otp-group {
        max-width: 340px;
        margin: 0px auto;
        margin-bottom: 26px;
    }

    .login .account-check p {
        padding: 0px;
        text-align: left;
    }

    .login .login-form.sign-in {
        margin-top: 30px;
    }

    .login .login-form h3 {
        text-align: left;
    }

    .login .otp-form .otp-send-msg {
        text-align: left;
        padding: 0px;
    }

    .login .language-selection {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
    }

    .login .otp-form .form-control.otp-control {
        height: auto;
        width: 50px;
        font-size: 30px;
    }

    .reports .ui-tabs .ui-tabs-nav {
        display: flex;
        overflow: auto;
    }
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .login .login-form {
        width: 100%;
        max-width: 550px;
        background: #1B365E;
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        height: auto;
        ; /*position:static;transform: translate(0%,0%);margin:40px auto 0px auto;*/
        border-radius: 0px;
        padding-bottom: 60px;
    }

    .login .chat-btn {
        bottom: 60px;
    }

    .login .language-selection {
        bottom: 10px;
    }

    .login .login-form.create-account {
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
    }

    .alert {
        width: 100%;
        box-sizing: border-box;
        right: 0px;
        -webkit-clip-path: none;
        clip-path: none;
        top: 0px;
        position: fixed;
        z-index: 111
    }

    .login .id-verification-form {
        webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
        clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 7%);
    }

    .login .retail-stores .store-list {
        border-radius: 0px;
    }

    .login .retail-stores .bottom-bar {
        background-color: #1B365D
    }

    .login .retail-stores .store-list.expand {
        max-height: 277px;
        overflow: auto;
    }

    .login .id-verification-form .form-group .custom-file .custom-file-label {
        padding: 50px 50px 0px 50px
    }

    .login .account-check {
        height: auto;
    }

        .login .account-check .small-logo {
            padding-top: 40px;
        }

    .login .terms-conditions .slimScrollDiv {
        margin-right: -17px;
    }

    .login .login-form .form-group .col-sm-6 .form-control {
        webkit-clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 33%);
        clip-path: polygon(8% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 33%);
    }
    /*Main pages 25-11-2020*/
    body {
        background: #1B365D url(images/bg.svg) 124% top no-repeat;
        background-attachment: fixed;
        background-size: 120px;
        background: #fff
    }

    .app-wrapper {
        width: 100%;
        padding: 0px;
    }

        .app-wrapper .content-wrapper {
            display: block !important;
            width: 100%;
            padding: 0px;
            background: #1B365D
        }

        .app-wrapper .header {
            display: none;
        }

        .app-wrapper .content-wrapper .content {
            margin: 0px;
            width: 100%;
            padding: 110px 20px 100px 20px;
        }

        .app-wrapper .content-wrapper .side-nav-bar {
            width: 100%;
            height: 100vh;
            z-index: 112;
            background: #1B365D;
            display: none;
        }

    .open-nav .app-wrapper .content-wrapper .side-nav-bar {
        display: initial;
    }

    .app-wrapper .content-wrapper .side-nav-bar .mobile-header {
        height: 150px;
        padding: 54px 0px 0px 20px;
        background: #112B50 url(images/bg.svg) 120% 20px no-repeat;
        background-size: 120px;
        display: block;
    }

    .app-wrapper .content-wrapper .side-nav-bar .nav {
        width: 100%;
        background: #1B365D;
        padding: 0px 10px;
    }

        .app-wrapper .content-wrapper .side-nav-bar .nav ul li {
            border-bottom: 2px solid #183052;
            margin: 0px;
            background: url(images/nav-icon/mobile-nav-bullet.svg) 98% center no-repeat !important;
        }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li:last-child {
                border-bottom: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li a {
                height: 50px;
                line-height: 50px;
                background-position: 6px !important;
                padding-left: 45px
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.dashboard {
                display: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.packages {
                display: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.shipment {
                display: none;
            }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.active {
                background: none;
            }

                .app-wrapper .content-wrapper .side-nav-bar .nav ul li.active a {
                    border: none;
                }

    .app-wrapper .content-wrapper .side-nav-bar .logout-btn {
        position: static;
        margin-top: 10px;
    }

    .bottom-nav-bar {
        height: 100px;
        background: #112B50;
        z-index: 112;
        position: fixed;
        bottom: 0px;
        width: 100%;
        display: flex;
        border-radius: 30px 30px 0px 0px;
    }

        .bottom-nav-bar ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
            font-size: 12px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
        }

            .bottom-nav-bar ul li {
                margin-top: 30px;
            }

            .bottom-nav-bar ul a {
                color: #8895A8;
                padding-top: 50px;
            }

            .bottom-nav-bar ul li.active a {
                color: #FF7F32;
            }

            .bottom-nav-bar ul li.dashboard a {
                background: url(images/nav-icon/dashboard-icon.svg)center center no-repeat;
            }

            .bottom-nav-bar ul li.packages a {
                background: url(images/nav-icon/package-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.shipment a {
                background: url(images/nav-icon/shipment-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.active.dashboard a {
                background: url(images/nav-icon/active-dashboard-icon.svg)center center no-repeat;
            }

            .bottom-nav-bar ul li.active.packages a {
                background: url(images/nav-icon/active-package-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.active.shipment a {
                background: url(images/nav-icon/active-shipment-icon.svg) center center no-repeat;
            }

            .bottom-nav-bar ul li.more a {
                background: url(images/nav-icon/more-icon.svg) center center no-repeat;
                background-size: 100%;
            }

            .bottom-nav-bar ul li.active.more a {
                background: url(images/nav-icon/active-more-icon.svg) center center no-repeat;
                background-size: 100%;
            }

    .address-book .address-topbar {
        width: 100%;
    }

    .address-book .address-list .address-card {
        flex-wrap: wrap;
        width: 100%;
        webkit-clip-path: polygon(20px 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 14%);
        clip-path: polygon(20px 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 14%);
    }

    .ui-tabs .ui-tabs-nav li {
        margin-left: 20px;
    }

    .address-book .address-topbar .search .form-control {
        width: calc(100% - 40px);
    }

    .address-book .address-topbar .filters .seprator {
        margin: 0px 10px;
    }

    .address-book .address-topbar .filters {
        margin-right: 10px;
    }

    .address-book .address-list .address-card .edit-icon {
        display: none;
    }

    .address-book .address-list .address-card .add-count {
        position: absolute;
        left: 10px;
        bottom: 10px;
        padding-left: 20px;
        padding-right: 0px;
    }

    .address-book .address-list .address-card .phone {
        position: absolute;
        left: 0px;
        top: 10px;
    }

    .address-book .address-list .address-card .name {
        margin-bottom: 20px;
    }

    .address-book .address-list .address-card .address {
        margin-bottom: 20px;
    }

    .address-book .address-list .address-card .store-address {
        margin-bottom: 10px;
    }

    .app-wrapper .content-wrapper .content .add-button {
        width: 50px;
        height: 50px;
        background-size: 50px;
        bottom: 110px;
        left: 11px;
    }

    .ui-dialog.ui-widget-content {
        position: fixed !important;
        position: fixed !important;
        width: 100% !important;
        padding: 0px !important;
        top: 0px !important;
        z-index: 200 !important;
        height: 100vh !important
    }

    .address-book-dialog .ui-dialog-content {
        padding: 20px;
        height: 100vh !important
    }

        .address-book-dialog .ui-dialog-content .dialog-title {
            padding: 10px;
        }

    .address-book-dialog .address-dialog-content .slimScrollDiv {
        height: auto !important;
        overflow: visible !important
    }

    .address-book-dialog .address-dialog-content .form-scroll {
        height: 69vh !important;
    }

    .slimScrollBar_new {
        display: none !important;
    }

    .slimScrollRail_new {
        display: none !important;
    }

    .address-book-dialog .address-dialog-content .action-bar {
        padding: 0px 16px;
    }

        .address-book-dialog .address-dialog-content .action-bar .btn-primary {
            width: 100%;
            max-width: 480px;
        }

    .address-book-dialog .address-dialog-content .address-types .btn {
        margin-bottom: 10px;
    }

    .address-book-dialog .address-dialog-content .centre-search .map-link {
        position: static;
        margin-bottom: 10px;
    }

    .address-book-dialog .address-dialog-content .slimScrollDiv {
        margin-right: 0px;
        padding-right: 0px;
    }

    .address-book-dialog .address-dialog-content .centre-list.all-centers {
    }

        .address-book-dialog .address-dialog-content .centre-list.all-centers .centre-card {
            display: block;
        }

        .address-book-dialog .address-dialog-content .centre-list.all-centers .check-icon {
            position: static;
            margin-top: 0px;
        }

    .app-wrapper .content-wrapper .content .content-title {
        display: flex;
        height: 100px;
        align-items: center;
        background: #112B50;
        margin-left: -20px;
        margin-right: -20px;
        padding-right: 20px;
        background: #112B50 url(images/bg.svg) -9% top no-repeat;
        background-attachment: fixed;
        background-size: 120px;
        position: fixed;
        width: calc(100% + 40px);
        right: 0px;
        top: 0px;
        z-index: 111;
        margin: 0px;
    }

    .mobile-only {
        display: block !important;
    }

    .ui-dialog .ui-dialog-content .dialog-title .back-btn {
        left: 0px;
        top: 12px;
    }

    .ui-dialog .ui-dialog-titlebar-close {
        display: none;
    }

    .ui-dialog.success-dialog .ui-dialog-titlebar-close {
        display: block;
    }

    .success-dialog .success-dialog-content.address-save {
        height: auto;
        padding-top: 30px;
    }

        .success-dialog .success-dialog-content.address-save .success-content {
            position: static;
            transform: translateY(0%);
        }
    /*01-12-2020*/
    .app-wrapper .content-wrapper .content .page-guidetxt {
        width: 100%;
    }

    .wallet-details .summery-warapper {
        width: 100%;
        max-width: 455px;
    }

    .wallet-details .wallet-blance {
        width: 100%;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 24%);
    }

    .wallet-details .button-warapper {
        position: fixed;
        bottom: 0px;
        left: 0px;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        height: 100px;
        width: 100%;
        z-index: 200;
        padding: 0px 20px;
        text-align: center
    }

        .wallet-details .button-warapper .wallet-recharge-btn {
            background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
            height: 50px;
            width: 480px;
            border: none;
            text-align: right;
            padding: 0px 15px 0px 0px;
            color: #fff;
            font-size: 20px;
            font-family: 'DINNextLTArabic-Bold';
            border-radius: 0px;
            webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%);
            margin: 20px auto 10px auto;
            position: relative;
            width: 100%;
            max-width: 480px;
        }

    .wallet-details .wallet-recharge-btn .card-icon {
        display: none;
    }

    .wallet-details .wallet-recharge-btn .small-txt {
        display: none;
    }

    .wallet-details .transactions-list .transaction-card {
        width: calc(50% - 10px);
        max-width: 425px;
        webkit-clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
        clip-path: polygon(6% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 13%);
        margin-left: 10px;
    }
    /*02-12-2020*/
    .app-wrapper .content-wrapper .myaccount .account-option {
        width: 100%;
    }

        .app-wrapper .content-wrapper .myaccount .account-option .info-header {
            height: 70px;
        }

            .app-wrapper .content-wrapper .myaccount .account-option .info-header .seprator {
                display: none;
            }

            .app-wrapper .content-wrapper .myaccount .account-option .info-header .status {
                display: none;
            }

        .app-wrapper .content-wrapper .myaccount .account-option li .option-content {
            padding: 20px 18px 30px 18px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option li.active .option-content .row {
            margin-bottom: 0px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option li.active .option-content .col-sm-6 {
            padding-bottom: 14px;
        }

        .app-wrapper .content-wrapper .myaccount .account-option > li.complited .status {
            display: none !important
        }

    .app-wrapper .content-wrapper .myaccount .retail-centre .centre-search .map-link {
        position: static;
        margin: 10px auto 20px auto;
        display: block;
        width: 170px;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .centre-list-caption {
        font-size: 13px;
    }

    .app-wrapper .content-wrapper .myaccount .retail-centre .showmore-link {
        font-size: 13px;
    }
    /*03-02-2020*/
    .my-shippments .topbar {
        width: 100%;
    }

        .my-shippments .topbar .filters {
            padding-left: 10px;
        }

            .my-shippments .topbar .filters .seprator {
                margin: 0px 12px;
            }

    .my-shippments .shipment-status {
        width: 100%;
    }

        .my-shippments .shipment-status li.active .option-content {
        }

    .delete-shipment-dialog.ui-widget-content {
        width: 90% !important;
        max-width: 600px !important;
        height: auto !important;
        top: 50% !important;
        transform: translateY(-50%);
    }

    .delete-shipment-dialog .delete-shipment-dialog-content .action-bar .btn-primary {
        width: 100%;
        max-width: 350px;
    }

    .delete-shipment-dialog .ui-dialog-titlebar-close {
        display: block;
    }

    .my-shippments .data-table {
        display: none;
    }

    .app-wrapper .content-wrapper .shipment-list .shippment-card .card-body .right-col {
        position: relative
    }

    .my-shippments .topbar .search {
        width: 52%
    }

    .app-wrapper .content-wrapper .shipment-list.mobile-only {
        display: flex !important;
        margin-right: -20px;
    }

    .app-wrapper .content-wrapper .my-shippments .shipment-list .shippment-card {
        width: 100%;
        max-width: 342px;
        background: #1B365D;
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 95% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 95% 0);
        margin: 0px 20px 20px 0px;
    }

    .my-shippments .shipment-list .shippment-card .delete {
        width: 24px;
        height: 24px;
        background: url(images/myshipment/trash.svg) center center no-repeat;
        display: inline-block
    }

    .my-shippments .shipment-list .shippment-card .btn-trackorder {
        height: 34px;
        width: 115px;
        display: inline-block;
        background: #112B50;
        font-size: 16px;
        color: #FF7F32;
        text-decoration: none;
        text-align: center;
        line-height: 34px;
    }

    .my-shippments .shipment-list .shippment-card .trackorder {
        margin-top: 18px;
    }

    .my-shippments .shipment-list .shippment-card .awd-print {
        font-size: 14px;
        color: #fff;
        background: url(images/myshipment/printer.svg) right center no-repeat;
        position: absolute;
        right: 0px;
        bottom: -4px;
        background-size: 20px;
        padding-right: 29px;
        width: 136px
    }

    .app-wrapper .content-wrapper .new-shippment .shipment-selection {
        display: block !important
    }

        .app-wrapper .content-wrapper .new-shippment .shipment-selection .seprator {
            display: none;
        }

    .app-wrapper .content-wrapper .new-shippment .package-selection {
        display: block !important
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-details {
        display: block !important
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-description .form-control {
        width: 100%;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list {
        margin-left: -12px;
        margin-right: 0px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .quanty-widget {
        width: 150px;
        margin-right: 15px;
    }

    .app-wrapper .content-wrapper .new-shippment .quanty-widget .qty-txt {
        padding-left: 20px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-weight .weight-list li {
        margin-right: 24px;
        margin-left: 0px;
        margin-bottom: 16px;
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card {
        margin-bottom: 20px;
        margin-left: 10px;
        width: 114px;
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-description .description-header {
        display: block !important
    }

    .app-wrapper .content-wrapper .new-shippment .subheading-style2 {
        display: flex
    }

    .app-wrapper .content-wrapper .new-shippment .shippment-description .link {
        margin-left: 0px;
        margin-top: 20px;
        display: inline-block;
    }

    .app-wrapper .content-wrapper .new-shippment .action-bar {
        position: fixed;
        bottom: 0px;
        left: 0px;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        height: 100px;
        width: 100%;
        z-index: 200;
        padding: 0px 20px;
    }

    .app-wrapper .content-wrapper .new-shippment .btn-primary {
        width: 100%;
        max-width: 350px;
        margin: 24px auto 0px auto
    }

    .app-wrapper .content-wrapper .new-shippment .shipment-details {
        padding: 20px;
        width: 100%;
        max-width: 470px;
        height: auto;
    }

    .order-confirm-dialog.ui-dialog .ui-dialog-content {
        height: 100vh !important
    }

    .ui-dialog.address-book .ui-dialog-content .dialog-title .back-btn .icon {
        background: url(images/orange-down-arrow.svg) 0px 14px no-repeat;
        display: block;
        background-size: 96%;
        height: 100%;
        width: 100%;
        transform: rotate(270deg);
    }

    .ui-dialog.address-book .ui-dialog-content .dialog-title {
        display: block;
        text-align: right;
        padding-right: 23px;
        color: #fff;
    }

    .ui-dialog.address-book .address-dialog-content p {
        width: 100%;
        text-align: left;
        padding-left: 32px;
        padding-top: 30px;
    }

    .ui-dialog.address-book .ui-dialog-content .dialog-title .back-btn {
        top: -4px;
    }

    .ui-dialog.address-book .address-dialog-content .address-topbar .search {
        width: 100%;
    }

    .ui-dialog.address-book .address-dialog-content .address-topbar {
        padding-left: 0px;
    }

    .ui-dialog.address-book .address-list {
        display: block;
        height: 100% !important;
        display: flex;
    }

    .ui-dialog.address-book .slimScrollDiv {
        height: 40vh !important;
    }

    .ui-dialog.address-book .address-list .address-card {
        margin: 0px 15px 20px 0px;
    }

    .ui-dialog.address-book .address-list .address-card {
        width: 100%;
        max-width: 315px;
    }

    .ui-dialog.address-book .ui-dialog-content {
        width: 100% !important;
        height: 100vh !important;
    }

    .ui-dialog.address-book .address-dialog-content .address-topbar {
        width: 100%;
        padding-right: 0px;
    }

    .app-wrapper .content-wrapper .new-shippment .addresses {
        display: block !important
    }

        .app-wrapper .content-wrapper .new-shippment .addresses .address-list .address-card {
            width: 100%;
            max-width: 315px;
            margin-left: 20px;
            height: auto
        }

        .app-wrapper .content-wrapper .new-shippment .addresses .select-address-btn {
            display: block
        }

    .app-wrapper .content-wrapper .new-shippment .add-address-btn {
        margin-left: 10px;
    }

    .app-wrapper .content-wrapper .new-shippment .subheading {
        font-size: 13px;
    }

    body.popup .app-wrapper {
        filter: none;
    }

    .ui-dialog.address-book .address-list .address-card .name {
        margin-bottom: 4px;
    }

    .ui-dialog.address-book .address-list .address-card .address {
        margin-bottom: 4px;
    }

    .ui-dialog.address-book .address-list .address-card .phone {
        position: static
    }

    .address-book-dialog .address-dialog-content .form-scroll {
        overflow: auto;
    }

    .address-book-dialog .address-dialog-content .col-sm-6 {
        padding-bottom: 20px;
    }
    /*04-12-2020*/
    .app-wrapper .content-wrapper .package-details .notification {
        width: 100%;
        max-width: 750px;
        flex-wrap: wrap;
        position: relative;
        display: flex;
        top: 0px;
        padding-top: 30px;
    }

        .app-wrapper .content-wrapper .package-details .notification .items {
            width: 50%;
            padding-bottom: 20px;
            display: flex;
            align-items: center;
            padding-right: 13px;
            margin-bottom: 0px;
        }

        .app-wrapper .content-wrapper .package-details .notification .heading {
            display: none;
        }

        .app-wrapper .content-wrapper .package-details .notification .items .icon {
            padding-left: 12px;
        }

        .app-wrapper .content-wrapper .package-details .notification .items .title {
            line-height: 1.2;
            text-align: right
        }

        .app-wrapper .content-wrapper .package-details .notification .items .desc {
            text-align: right
        }

        .app-wrapper .content-wrapper .package-details .notification .items:after {
            display: none
        }

    .app-wrapper .content-wrapper .package-details .promotion {
        width: 100%;
        background: url(images/promo-bg-mobile.png) left top no-repeat;
        height: 82px;
        background-size: 100%;
        padding: 10px
    }

        .app-wrapper .content-wrapper .package-details .promotion .discount .discount-value {
            font-size: 50px;
        }

        .app-wrapper .content-wrapper .package-details .promotion .discount label {
            font-size: 18px;
        }

        .app-wrapper .content-wrapper .package-details .promotion .promo-msg p {
            font-size: 11px;
            line-height: 1.2
        }

        .app-wrapper .content-wrapper .package-details .promotion .discount {
            margin-right: 20px
        }

        .app-wrapper .content-wrapper .package-details .promotion .promo-msg .badge {
            height: 18px;
            font-size: 10px;
            line-height: 18px;
            padding: 0px 6px;
            margin-bottom: 4px
        }

    .app-wrapper .content-wrapper .package-details .packages-steps {
        font-size: 12px;
    }

        .app-wrapper .content-wrapper .package-details .packages-steps .step .step-number {
            font-size: 58px;
        }

        .app-wrapper .content-wrapper .package-details .packages-steps .step-sep {
            margin: 0px 20px;
        }

    .app-wrapper .content-wrapper .package-details .bundle-card {
        width: 92px;
        height: 92px;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        min-height: 110px;
    }

        .app-wrapper .content-wrapper .package-details .bundle-card .weight {
            font-size: 40px;
        }

        .app-wrapper .content-wrapper .package-details .bundle-card span {
            font-size: 18px;
        }

        .app-wrapper .content-wrapper .package-details .bundle-card .waybillleft {
            font-size: 11px;
            line-height: 1.1;
        }

    .app-wrapper .content-wrapper .package-details .add-package-btn {
        min-width: 92px;
        height: 92px;
        width: 95px;
        webkit-clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 17%);
        min-height: 110px;
    }

        .app-wrapper .content-wrapper .package-details .add-package-btn .buy-icon {
            top: 10px;
            width: 18px;
            background-size: 100%;
        }

        .app-wrapper .content-wrapper .package-details .add-package-btn .icon {
            bottom: 10px;
            left: 10px;
            width: 18px;
            height: 18px;
            background-size: 100%;
        }

        .app-wrapper .content-wrapper .package-details .add-package-btn .txt .bold-txt {
            font-size: 13px;
            line-height: 1.2;
        }

    .app-wrapper .content-wrapper .package-details .existing-packages .bundle-list {
        flex-wrap: nowrap
    }

    .app-wrapper .content-wrapper .package-details .packages-list {
        overflow: auto;
    }

    .buy-bundal-dialog.ui-dialog.ui-widget-content {
        overflow: auto
    }

        .buy-bundal-dialog.ui-dialog.ui-widget-content .dialog-title {
            text-align: right;
            background: #112B50 url(images/bg.svg) -24% top no-repeat;
            height: 100px;
            width: calc(100% + 40px);
            margin-left: -20px;
            margin-right: -20px;
            margin-top: -20px;
            background-size: 120px;
            padding: 30px 50px 0px 0px;
        }

    .buy-bundal-dialog.ui-dialog .dialog-title .back-btn {
        right: 20px;
        top: 33px;
    }

    .bundal-dialog-content h3 {
        text-align: right
    }

    .bundal-dialog-content p {
        text-align: right;
        width: 100%;
    }

    .bundal-dialog-content .bundle-list {
        margin-right: -22px;
    }

    .buy-bundal-dialog.ui-dialog .ui-dialog-content {
        overflow: auto
    }

    .bundal-dialog-content .bundle-list .bundle-card {
        width: 100%;
        max-width: 366px;
        margin-right: 22px;
    }

    .bundal-dialog-content .bundle-list.selected-bundle .bundle-card {
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }

    .bundal-dialog-content .bundle-list.selected-bundle {
        margin-right: 0px
    }

    .bundal-dialog-content .waybill-list {
        margin-left: 0px;
    }

    .bundal-dialog-content .waybill-card {
        margin: 0px 20px 20px 20px;
        width: calc(100% - 40px)
    }

    .buy-bundal-dialog.ui-dialog.ui-widget-content .dialog-title .cart {
        background: url(images/Cart.svg) left top no-repeat;
        width: 28px;
        height: 28px;
        background-size: 100%;
        position: absolute;
        left: 15px;
        top: 40px;
    }

        .buy-bundal-dialog.ui-dialog.ui-widget-content .dialog-title .cart .cart-item {
            width: 20px;
            height: 20px;
            background: #FF7F32;
            border-radius: 50%;
            font-size: 14px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: -4px;
            top: 21px;
        }

    .cart-dialog.ui-dialog.ui-widget-content {
        background: #1B365E;
        /* overflow: auto; */
        height: calc(100vh - 60px) !important;
    }

    .cart-dialog.ui-dialog .ui-dialog-content {
        height: 100% !important;
    }

    .cart-dialog.ui-dialog.ui-widget-content .dialog-title {
        text-align: right;
        background: #112B50 url(images/bg.svg) 124% top no-repeat;
        height: 100px;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -20px;
        background-size: 120px;
        padding: 30px 50px 0px 0px;
    }

    .cart-dialog.ui-dialog .dialog-title .back-btn {
        right: 20px;
        top: 33px;
    }

    .cart-dialog-content {
        padding: 40px 0px 15px 0px;
    }

        .cart-dialog-content .left-col {
            width: 100%;
            padding-right: 0px;
        }

        .cart-dialog-content .right-col {
            width: 100%;
            padding-right: 0px;
            position: relative;
            margin-top: 30px;
            padding-top: 120px
        }

        .cart-dialog-content .cart-items .cart-item {
            width: 100%;
        }

        .cart-dialog-content .cart-heading {
            font-size: 20px;
            color: #fff;
            margin-bottom: 14px;
        }

        .cart-dialog-content .couponcode {
            position: absolute;
            top: -36px;
            width: 100%;
        }

        .cart-dialog-content .action-bar {
            height: 70px;
            background: #081B36;
            box-shadow: 0px -10px 15px #05132780;
            position: absolute;
            width: 100%;
            left: 0px;
            bottom: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cart-dialog-content .btn-primary {
            margin-top: 0px;
        }

    .checkout-dialog.ui-dialog.ui-widget-content .dialog-title {
        text-align: right;
        background: #112B50 url(images/bg.svg) 124% top no-repeat;
        height: 100px;
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        margin-top: -20px;
        background-size: 120px;
        padding: 30px 50px 0px 0px;
        display: block;
    }

    .checkout-dialog.ui-dialog .dialog-title .back-btn {
        right: 20px;
        top: 33px;
    }

    .checkout-dialog-content .wallet-notification {
        text-align: right;
        padding-bottom: 20px;
    }

    .checkout-dialog-content .amount-summery {
        display: block;
        height: auto;
        width: 100%;
    }

        .checkout-dialog-content .amount-summery .wallet-blance {
            width: 100%;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .checkout-dialog-content .amount-summery .required-amount {
            width: 100%;
            background-position: right;
            padding-right: 34px;
            font-size: 16px;
            justify-content: space-between;
            padding-left: 0px;
        }

            .checkout-dialog-content .amount-summery .required-amount:before {
                display: none;
            }

    .checkout-dialog-content .wallet-recharge {
        text-align: left
    }

        .checkout-dialog-content .wallet-recharge .recharge-form {
            width: 100%;
        }

            .checkout-dialog-content .wallet-recharge .recharge-form .form-control {
                width: calc(100% - 120px)
            }

    .checkout-dialog-content .payment-options {
        width: 100%;
    }

        .checkout-dialog-content .payment-options ul {
            display: block;
        }

            .checkout-dialog-content .payment-options ul li {
                width: 100%;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 2px solid #112B50;
            }

                .checkout-dialog-content .payment-options ul li:last-child {
                    border-bottom: none;
                }

                .checkout-dialog-content .payment-options ul li.seprator {
                    display: none;
                }

    .checkout-dialog.ui-dialog {
        overflow: auto;
    }

    .checkout-dialog-content .action-bar {
        height: 70px;
        background: #081B36;
        box-shadow: 0px -10px 15px #05132780;
        position: fixed;
        width: 100%;
        left: 0px;
        bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .checkout-dialog-content .btn-primary {
        margin-top: 10px !important;
    }

    .checkout-dialog-content .wallet-recharge .recharge-form .btn-primary {
        margin-top: 0px !important;
    }

    .checkout-dialog-content .payment-options ul li .card .card-footer .btn-primary {
        margin-top: 0px !important;
    }

    .checkout-dialog-content {
        height: 100vh
    }

    .checkout-dialog.ui-dialog .ui-dialog-content {
        overflow: hidden
    }
    /*24-12-2020*/
    .shipment-tracking .shipment-summery {
        width: 100%;
        display: block !important
    }

    .shipment-tracking .shipment-progress {
        width: 100%;
    }

        .shipment-tracking .shipment-progress .progress {
            width: 100%;
        }

    .shipment-tracking .shipment-summery .col1 {
        width: 100%;
    }

    .shipment-tracking .shipment-progress .progress > div:first-child {
        min-width: 9%
    }

    .shipment-tracking .shipment-progress .progress > div:last-child {
        min-width: 9%
    }

    .shipment-tracking .shipment-progress .progress > div {
        min-width: 16.4%
    }

        .shipment-tracking .shipment-progress .progress > div .name {
            font-size: 9px;
            padding: 0px 6px;
            width: 100px;
            left: -34%;
            left: -35%;
        }

        .shipment-tracking .shipment-progress .progress > div.active .name {
            font-size: 10px;
        }

        .shipment-tracking .shipment-progress .progress > div .step-icon {
            width: 40px;
            height: 40px;
            left: -20%;
            left: -15%;
        }

        .shipment-tracking .shipment-progress .progress > div:first-child .name {
            left: -35%;
        }

    .shipment-tracking .shipment-progress .progress.step1:after {
        width: 9%;
        width: 20%;
    }

    .shipment-tracking .shipment-progress .progress.step2:after {
        width: 26%;
        width: 40%;
    }

    .shipment-tracking .shipment-progress .progress.step3:after {
        width: 45%;
        width: 60%;
    }

    .shipment-tracking .shipment-progress .progress.step4:after {
        width: 58%;
        width: 100%;
    }

    .shipment-tracking .shipment-progress .progress.step5:after {
        width: 75%;
    }

    .shipment-tracking .shipment-progress .progress.step6:after {
        width: 100%;
    }

    .shipment-tracking .shipment-progress .progress > div:first-child .step-icon {
        left: -27%;
        left: -14%;
    }

    .shipment-tracking .shipment-summery .tracking-details .shipment-icon {
        width: 40px;
        height: 40px;
    }

    .shipment-tracking .shipment-summery .field-caption {
        font-size: 12px;
    }

    .shipment-tracking .shipment-summery .tracking-details .tracking-number .field-value {
        font-size: 18px;
    }

    .shipment-tracking .shipment-summery .tracking-details {
        height: auto;
        padding: 10px 60px 10px 10px;
    }

        .shipment-tracking .shipment-summery .tracking-details .status {
            background-size: 18px;
        }

        .shipment-tracking .shipment-summery .tracking-details .shipment-address {
            margin-right: -50px;
        }

        .shipment-tracking .shipment-summery .tracking-details .seprator {
            margin: 24px
        }

    .shipment-tracking .shipment-summery .col2 {
        width: 100%;
        margin-top: 10px;
    }

    .shipment-tracking .date {
        text-align: left
    }

    .shipment-tracking .shipment-activity {
    }

        .shipment-tracking .shipment-activity .activity .step .step-description {
            width: auto;
        }

            .shipment-tracking .shipment-activity .activity .step .step-description .day-time {
                font-size: 11px;
                margin-bottom: 4px;
            }

            .shipment-tracking .shipment-activity .activity .step .step-description p {
                font-size: 12px;
                line-height: 18px
            }

            .shipment-tracking .shipment-activity .activity .step .step-description .location {
                font-size: 11px;
                background-size: 12px;
                padding-left: 20px;
            }
    /*28-12-2020*/
    .app-wrapper .content-wrapper .content .content-title.mobile-only {
        display: flex !important
    }

    .dashboard-details .top-section {
        display: block;
    }

    .dashboard-details .left-col {
        width: 100%;
    }

    .dashboard-details .right-col {
        width: 100%;
    }

    .dashboard-details .profile-details {
        display: block;
        position: relative;
        padding-top: 44px;
        padding-bottom: 12px;
    }

        .dashboard-details .profile-details .profile-status-btn {
            position: absolute;
            margin-left: 0px;
            left: -20px;
            top: 0px;
            width: calc(100% + 40px);
            clip-path: none;
            padding: 0px;
        }

            .dashboard-details .profile-details .profile-status-btn .mobile-only {
                position: relative;
                width: 194px;
                padding-right: 28px;
                margin: 0px auto;
            }

    .dashboard-details .purchase-details {
        display: block;
        display
    }

    .dashboard-details .overview .overflow-items .item {
        min-width: calc(50% - 20px);
        max-width: 240px;
        width: calc(50% - 20px);
        margin-right: 0px;
        margin-left: 20px;
        margin-bottom: 20px;
        padding-left: 10px;
        height: 75px;
    }

    .dashboard-details .overview .overflow-items {
        display: flex;
        flex-wrap: wrap;
        margin-left: -20px;
    }

    .dashboard-details .shipments-details {
        width: 100%;
        max-width: 487px;
        margin-bottom: 20px;
    }

        .dashboard-details .shipments-details .user-shipments {
            width: 100%;
            max-width: 487px
        }

    .dashboard-details .dashboard-chart {
        display: block
    }

    .dashboard-details .chart-wrapper {
        margin-left: 0px;
        ;
        height: auto;
        min-height: 260px;
        margin-bottom: 30px;
        overflow: hidden;
    }

    .dashboard-details .right-col .chart-wrapper .chartjs-render-monitor {
        transform: translateY(10%);
    }

    .dashboard-details .shipments-details .user-shipments .shipment {
        width: 97%
    }

    .dashboard-details .shipments-details .user-shipments .owl-nav .owl-prev {
        display: none;
    }

    .dashboard-details .shipments-details .user-shipments .owl-nav .owl-next {
        display: none;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .shipment-id {
        background-size: 30px
    }

    .dashboard-details .date-filter .btn-primary {
        width: 90px
    }

    .dashboard-details .date-filter .date {
        margin-left: 14px;
    }

        .dashboard-details .date-filter .date .form-control {
            width: 100%;
            padding-left: 5px;
            max-width: 148px
        }

    .dashboard-details .wallet-summery .wallet-blance {
        padding: 0px 10px;
    }

        .dashboard-details .wallet-summery .wallet-blance .blance {
            background-size: 10px;
            font-size: 12px;
            padding-left: 14px;
        }

        .dashboard-details .wallet-summery .wallet-blance .amount {
            font-size: 16px;
        }

    .dashboard-details .wallet-summery .wallet-recharge-btn .card-icon {
        background-size: 13px;
        right: 10px;
    }

    .dashboard-details .wallet-summery .wallet-recharge-btn {
        padding-right: 32px;
        font-size: 12px;
        padding-left: 20px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .caption {
        font-size: 12px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .value {
        font-size: 12px;
    }

    .dashboard-details .package-list .add-package-btn {
        min-width: 85px;
    }

    .dashboard-details .package-list {
        align-items: end !important;
    }

    .dashboard-details .overview .overflow-items .item .circle canvas {
        width: 40px !important;
        height: 40px !important;
    }

    .dashboard-details .overview .overflow-items .item .circle {
        width: 40px !important;
        height: 40px !important;
    }

        .dashboard-details .overview .overflow-items .item .circle strong {
            font-size: 9px;
            left: 5px;
            top: 13px;
        }

    .dashboard-details .overview .overflow-items .item .value {
        font-size: 19px
    }

    .dashboard-details .overview .overflow-items .item .caption {
        font-size: 11px
    }

    .dashboard-details .overview .overflow-items .shipment-total {
        background: #2F4F7E url(images/dashboard/package-icon.svg) 96% 6px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-delivered {
        background: #2F4F7E url(images/dashboard/sales-icon.svg) 96% 6px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-transit {
        background: #2F4F7E url(images/dashboard/ship-icon.svg) 96% 10px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-return {
        background: #2F4F7E url(images/dashboard/report-icon.svg) 96% 10px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .pending-items .pending-card {
        width: calc(50% - 14px);
        margin-left: 14px;
    }

        .dashboard-details .pending-items .pending-card .item-title {
            font-size: 19px
        }

    .reports .ui-tabs .ui-tabs-nav {
        display: flex;
        overflow: auto;
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card {
        margin-left: 10px;
    }
    /*Main pages end*/
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .app-wrapper .header {
        width: calc(100% - 20px);
    }

    .address-book .address-list .address-card {
        width: 100%;
    }

    .login .language-selection {
        bottom: 80px;
    }

    .login .chat-btn {
        bottom: 80px;
    }
    /*24-12-2020*/
    .shipment-tracking .shipment-summery {
        width: 100%;
        display: block !important
    }

    .shipment-tracking .shipment-progress {
        width: 100%;
    }

        .shipment-tracking .shipment-progress .progress {
            width: 100%;
        }

    .shipment-tracking .shipment-summery .col1 {
        width: 100%;
    }

    .shipment-tracking .shipment-progress .progress > div:first-child {
        min-width: 9%
    }

    .shipment-tracking .shipment-progress .progress > div:last-child {
        min-width: 9%
    }

    .shipment-tracking .shipment-progress .progress > div {
        min-width: 16.4%
    }

        .shipment-tracking .shipment-progress .progress > div .name {
            font-size: 9px;
            padding: 0px 6px;
            width: 100px;
            left: -34%;
        }

        .shipment-tracking .shipment-progress .progress > div.active .name {
            font-size: 10px;
        }

        .shipment-tracking .shipment-progress .progress > div .step-icon {
            width: 40px;
            height: 40px;
            left: -20%;
            left: -14%;
        }

        .shipment-tracking .shipment-progress .progress > div:first-child .name {
            left: -33%;
        }

    .shipment-tracking .shipment-progress .progress.step1:after {
        width: 9%;
        width: 20%;
    }

    .shipment-tracking .shipment-progress .progress.step2:after {
        width: 26%;
        width: 40%;
    }

    .shipment-tracking .shipment-progress .progress.step3:after {
        width: 45%;
        width: 60%;
    }

    .shipment-tracking .shipment-progress .progress.step4:after {
        width: 58%;
        width: 100%;
    }

    .shipment-tracking .shipment-progress .progress.step5:after {
        width: 75%;
    }

    .shipment-tracking .shipment-progress .progress.step6:after {
        width: 100%;
    }

    .shipment-tracking .shipment-progress .progress > div:first-child .step-icon {
        left: -27%;
        left: -14%;
    }

    .shipment-tracking .shipment-summery .tracking-details .shipment-icon {
        width: 40px;
        height: 40px;
    }

    .shipment-tracking .shipment-summery .field-caption {
        font-size: 12px;
    }

    .shipment-tracking .shipment-summery .tracking-details .tracking-number .field-value {
        font-size: 18px;
    }

    .shipment-tracking .shipment-summery .tracking-details {
        height: auto;
        padding: 10px 60px 10px 10px;
    }

        .shipment-tracking .shipment-summery .tracking-details .status {
            background-size: 18px;
        }

        .shipment-tracking .shipment-summery .tracking-details .shipment-address {
            margin-right: -50px;
        }

        .shipment-tracking .shipment-summery .tracking-details .seprator {
            margin: 24px
        }

    .shipment-tracking .shipment-summery .col2 {
        width: 100%;
        margin-top: 10px;
    }

    .shipment-tracking .date {
        text-align: left
    }

    .shipment-tracking .shipment-activity {
    }

        .shipment-tracking .shipment-activity .activity .step .step-description {
            width: auto;
        }

            .shipment-tracking .shipment-activity .activity .step .step-description .day-time {
                font-size: 11px;
                margin-bottom: 4px;
            }

            .shipment-tracking .shipment-activity .activity .step .step-description p {
                font-size: 12px;
                line-height: 18px
            }

            .shipment-tracking .shipment-activity .activity .step .step-description .location {
                font-size: 11px;
                background-size: 12px;
                padding-left: 20px;
            }
    /*28-12-2020*/
    .app-wrapper .content-wrapper .content .content-title.mobile-only {
        display: none !important
    }

    .dashboard-details .top-section {
        display: block;
    }

    .dashboard-details .left-col {
        width: 100%;
    }

    .dashboard-details .right-col {
        width: 100%;
    }

    .dashboard-details .profile-details {
        margin-bottom: 20px;
    }

        .dashboard-details .profile-details .profile-status-btn {
        }

            .dashboard-details .profile-details .profile-status-btn .mobile-only {
                display: block !important
            }

    .dashboard-details .purchase-details {
        display: block;
        display
    }

    .dashboard-details .overview .overflow-items .item {
        min-width: calc(25% - 20px);
        max-width: 240px;
        width: calc(25% - 20px);
        margin-right: 0px;
        margin-left: 20px;
        margin-bottom: 20px;
        padding-left: 10px;
        height: 75px;
    }

    .dashboard-details .overview .overflow-items {
        display: flex;
        flex-wrap: wrap;
        margin-left: -20px;
    }

    .dashboard-details .shipments-details {
        width: 100%;
        max-width: 487px;
        margin-bottom: 20px;
    }

        .dashboard-details .shipments-details .user-shipments {
            width: 100%;
            max-width: 487px
        }

    .dashboard-details .dashboard-chart {
        display: flex;
        margin-left: -20px;
    }

        .dashboard-details .dashboard-chart .sub-heading {
            margin-left: 20px
        }

        .dashboard-details .dashboard-chart .left-col {
            width: 50%
        }

        .dashboard-details .dashboard-chart .right-col {
            width: 50%
        }

    .dashboard-details .chart-wrapper {
        margin-right: 0px;
        margin-left: 20px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment {
        width: 97%
    }

    .dashboard-details .shipments-details .user-shipments .owl-nav .owl-prev {
        display: none;
    }

    .dashboard-details .shipments-details .user-shipments .owl-nav .owl-next {
        display: none;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .shipment-id {
        background-size: 30px
    }

    .dashboard-details .date-filter .btn-primary {
        width: 90px
    }

    .dashboard-details .date-filter .date {
        margin-left: 14px;
    }

        .dashboard-details .date-filter .date .form-control {
            width: 100%;
            padding-left: 5px;
            max-width: 148px
        }

    .dashboard-details .wallet-summery .wallet-blance {
        padding: 0px 10px;
    }

        .dashboard-details .wallet-summery .wallet-blance .blance {
            background-size: 10px;
            font-size: 12px;
            padding-left: 14px;
        }

        .dashboard-details .wallet-summery .wallet-blance .amount {
            font-size: 16px;
        }

    .dashboard-details .wallet-summery .wallet-recharge-btn .card-icon {
        background-size: 13px;
        left: 10px;
    }

    .dashboard-details .wallet-summery .wallet-recharge-btn {
        padding-left: 32px;
        font-size: 12px;
        padding-right: 20px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .caption {
        font-size: 12px;
    }

    .dashboard-details .shipments-details .user-shipments .shipment .value {
        font-size: 12px;
    }

    .dashboard-details .package-list .add-package-btn {
        min-width: 85px;
    }

    .dashboard-details .package-list {
        align-items: end !important;
    }

    .dashboard-details .overview .overflow-items .item .circle canvas {
        width: 40px !important;
        height: 40px !important;
    }

    .dashboard-details .overview .overflow-items .item .circle strong {
        font-size: 9px;
        left: 12px;
        top: 13px;
    }

    .dashboard-details .overview .overflow-items .item .circle {
        width: 40px !important;
        height: 40px !important;
    }

    .dashboard-details .overview .overflow-items .item .value {
        font-size: 19px
    }

    .dashboard-details .overview .overflow-items .item .caption {
        font-size: 11px
    }

    .dashboard-details .overview .overflow-items .shipment-total {
        background: #2F4F7E url(images/dashboard/package-icon.svg) 4% 6px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-delivered {
        background: #2F4F7E url(images/dashboard/sales-icon.svg) 4% 6px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-transit {
        background: #2F4F7E url(images/dashboard/ship-icon.svg) 4% 10px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .overview .overflow-items .shipment-return {
        background: #2F4F7E url(images/dashboard/report-icon.svg) 4% 10px no-repeat;
        background-size: 20px;
    }

    .dashboard-details .pending-items .pending-card {
        width: calc(50% - 14px);
        margin-left: 14px;
    }

        .dashboard-details .pending-items .pending-card .item-title {
            font-size: 19px
        }

    .app-wrapper .content-wrapper .myaccount .account-option {
        width: 800px;
    }

    .app-wrapper .content-wrapper {
        min-height: calc(1400px - 31px);
    }

        .app-wrapper .content-wrapper .package-details .notification {
            width: 100%;
            max-width: 750px;
            flex-wrap: wrap;
            position: relative;
            display: flex;
            top: 0px;
            padding-top: 30px;
        }

            .app-wrapper .content-wrapper .package-details .notification .items {
                width: 50%;
                padding-bottom: 20px;
                display: flex;
                align-items: center;
                padding-right: 13px;
                margin-bottom: 0px;
            }

            .app-wrapper .content-wrapper .package-details .notification .heading {
                display: none;
            }

            .app-wrapper .content-wrapper .package-details .notification .items .icon {
                padding-left: 12px;
            }

            .app-wrapper .content-wrapper .package-details .notification .items .title {
                line-height: 1.2;
                text-align: right
            }

            .app-wrapper .content-wrapper .package-details .notification .items .desc {
                text-align: right
            }

            .app-wrapper .content-wrapper .package-details .notification .items:after {
                display: none
            }

            .app-wrapper .content-wrapper .package-details .notification .close-btn {
                display: block !important
            }

        .app-wrapper .content-wrapper .shipment-list.mobile-only {
            display: flex !important;
            margin-right: -20px;
        }

        .app-wrapper .content-wrapper .my-shippments .shipment-list .shippment-card {
            width: 100%;
            max-width: 342px;
            background: #1B365D;
            -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 95% 0);
            clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 95% 0);
            margin: 0px 20px 20px 0px;
        }

    .my-shippments .data-table {
        display: none;
    }

    .my-shippments .shipment-status {
        width: 100%;
    }

    .my-shippments .topbar {
        width: 100%;
    }

    .address-book .address-topbar {
        width: 100%;
    }

    .reports .ui-tabs .ui-tabs-nav {
        display: flex;
        overflow: auto;
    }

    .app-wrapper .content-wrapper .new-shippment .package-selection .bundle-card {
        margin-left: 10px;
    }
    /*Main pages end*/
    .content .sticky-alart {
        position: sticky;
        z-index: 111;
        bottom: 0px;
        width: calc(100% - 210px);
        max-width: calc(1280px - 210px);
        float: left;
        position: fixed
    }

        .content .sticky-alart .alert {
            position: static;
            float: left;
            margin-right: 0px;
        }
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .content .sticky-alart {
        position: sticky;
        z-index: 111;
        bottom: 0px;
        width: calc(100% - 210px);
        max-width: calc(1280px - 210px);
        float: left;
        position: fixed
    }

        .content .sticky-alart .alert {
            position: static;
            float: left;
            margin-right: 0px;
        }
}
/*Country DropDown*/
/*.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {right: 0!important;left: auto!important;}
.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {padding: 0px;margin-left: 0px!important;margin-right: 116px!important;}*/
/*04-08-2021*/
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
    right: auto !important;
    left: 0px !important;
}

.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
    padding: 0px;
    margin-left: 116px !important;
    margin-right: 0px !important;
}

.iti__country-list {
    left: 0px;
}

.form-group .form-control.phone-number {
    clip-path: none;
}

.iti__selected-flag {
    webkit-clip-path: polygon(18% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    clip-path: polygon(18% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    direction: ltr
}

.app-wrapper .content-wrapper .myaccount .account-option li .form-group .col-sm-6 .form-control.phone-number {
    clip-path: none;
}


/*04-08-2021 end*/
.iti__country {
    text-align: right !important
}

.iti__flag-box, .iti__country-name {
    margin-right: 0px !important;
    margin-left: 6px !important;
}

.iti--separate-dial-code .iti__selected-dial-code {
    margin-right: 0px !important;
    margin-left: 6px !important;
}

.iti__arrow {
    margin-right: 0px !important;
    margin-left: 6px !important;
}

.loader-wrapper {
    width: 100%;
    height: 100%;
    background: #fcfcff;
    opacity: .85;
    position: fixed;
    left: 0px;
    top: 0px;
    display: none;
    z-index: 1100;
}

    .loader-wrapper .loader {
        width: 240px;
        height: 320px;
        background: url(images/loader.gif) center center no-repeat;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%,-50%);
        position: fixed;
        z-index: 11111;
        background-size: 100%
    }

.wrap-word {
    white-space: -moz-pre-wrap !important;
    white-space: -webkit-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

.map-close {
    text-align: right;
    padding: 8px;
}

    .map-close .btn-danger {
        background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
        border: none;
        font-family: 'Open Sans', sans-serif;
        height: 22px;
        font-size: 11px !important;
    }
/*30-03-2021*/
.height-250 {
    height: 250px;
}

.height-230 {
    height: 250px;
}

.height-300 {
    height: 300px;
}

.height-330 {
    height: 330px;
}

.height-400 {
    height: 400px !important;
}

.height-500 {
    height: 500px !important;
}

.height-600 {
    height: 600px !important;
}

.scroll-bar {
    overflow: auto;
    scrollbar-color: #2D4D79 #152F55;
    scrollbar-width: thin;
}

    .scroll-bar::-webkit-scrollbar {
        width: 10px;
        border-radius: 3px !important;
    }

    .scroll-bar::-webkit-scrollbar-track {
        background: #152F55;
        border-radius: 3px !important;
    }

    .scroll-bar::-webkit-scrollbar-thumb {
        background: #2D4D79;
        border-radius: 3px !important;
    }

        .scroll-bar::-webkit-scrollbar-thumb:hover {
            background: #2D4D79;
        }

.app-wrapper .content-wrapper .myaccount .retail-centre .centre-list {
    height: 250px;
    overflow: auto;
}

.app-wrapper .content-wrapper .myaccount .retail-centre .centre-list {
    height: auto !important;
    max-height: 400px
}

.address-book-dialog .address-dialog-content .form-scroll {
    overflow-X: hidden;
    padding-left: 14px
}

@media (max-width: 575.98px) {
    .app-wrapper .content-wrapper .myaccount .account-option > li.complited .info-header .header-title {
        max-width: 65%;
    }
}

.bankdetails-otp .login .login-form {
    position: static;
    transform: translate(0%, 0%);
    clip-path: none;
    background: none;
}

.bankdetails-otp .login .otp-form .otp-send-msg {
    text-align: left
}

.bankdetails-otp .login .otp-form .otp-resend {
    text-align: left
}

@media (max-width: 575.98px) {
    .bankdetails-otp .login {
        background: none
    }

        .bankdetails-otp .login .login-form {
            margin-top: 0px;
        }

    .bankdetails-otp .content-title {
        position: static !important;
        height: auto !important
    }

    .bankdetails-otp .tm-30 {
        margin-top: 0px !important
    }

    .bankdetails-otp .form-control.otp-control {
        width: 65px !important;
        height: 65px !important;
    }
}

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

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

.k-filter-row th, .k-grid-header th.k-header {
    text-align: right;
    padding-left: 0px;
    padding-right: 12px;
}

@media (max-width: 400px) {
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
        font-size: 16px;
    }
}

.app-wrapper .content-wrapper .content .content-title.mobile-only .mobile-top {
    position: absolute;
    left: 52px;
    display: flex;
}

    .app-wrapper .content-wrapper .content .content-title.mobile-only .mobile-top .language-selection {
        font-family: lato;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        text-decoration: none;
        color: #fff;
        background: url(images/language-icon.svg) left 4px no-repeat;
        padding-left: 22px;
        background-size: 18px;
        line-height: 23px;
    }

    .app-wrapper .content-wrapper .content .content-title.mobile-only .mobile-top .cart {
        background: url(images/Cart.svg) left top no-repeat;
        width: 24px;
        height: 24px;
        background-size: 100%;
        position: relative;
        margin-left: 20px;
    }

        .app-wrapper .content-wrapper .content .content-title.mobile-only .mobile-top .cart .cart-item {
            width: 20px;
            height: 20px;
            background: #FFC685;
            border-radius: 50%;
            font-size: 14px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: -12px;
            top: -1px;
        }

.account-dowpdown {
    width: 190px;
    height: 160px;
    background: #F5F5F5;
    position: absolute;
    left: 20px;
    top: 44px;
    -webkit-clip-path: polygon(10% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 15%);
    clip-path: polygon(10% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 15%);
    padding: 12px;
}

    .account-dowpdown .title {
        font-size: 12px;
        color: #FF7F32;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Open Sans', sans-serif;
    }

    .account-dowpdown ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

        .account-dowpdown ul li {
            border-bottom: 1px solid #fff;
            padding: 10px 0;
        }

            .account-dowpdown ul li:last-child {
                border-bottom: none
            }

            .account-dowpdown ul li a {
                display: flex;
                align-items: center;
                color: #0A326C;
                font-size: 14px;
                font-weight: 400;
                font-family: 'Open Sans', sans-serif;
            }

                .account-dowpdown ul li a:hover {
                    text-decoration: none;
                }

                .account-dowpdown ul li a .icon {
                    width: 35px;
                    height: 35px;
                    background: #B8C9E2;
                    border-radius: 50%;
                    margin-left: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                    .account-dowpdown ul li a .icon img {
                        width: auto !important;
                        height: auto !important;
                        margin-left: 0px !important;
                    }

/*06-08-2021*/
.select2-container {
    -webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    background: #2D4D79;
    height: 50px;
}

.select2-container--above.select2-container--open, .select2-container--below.select2-container--open {
    -webkit-clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
    clip-path: polygon(4% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 29%);
}

.select2-container--default .select2-selection--single {
    background: #2D4D79;
    border: none;
    outline: none;
}

.select2-container--open {
    clip-path: none;
    color: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 50px;
    line-height: 50px;
    color: #5F8CC9;
    padding-right: 14px;
    font-size: 16px;
    font-family: 'Cairo', sans-serif;
    color: #fff;
}

.select2-container--focus .select2-selection--single .select2-selection__rendered {
    color: #fff;
}

.select2-container.select2-container--default.select2-container--above .select2-selection__rendered,
.select2-container.select2-container--default.select2-container--below .select2-selection__rendered {
    color: #fff;
}

.select2-container .select2-selection--single {
    height: 50px;
    line-height: 50px;
}

.select2-dropdown {
    background: #2D4D79;
    border: none;
    padding: 6px 0px;
    border-radius: 0px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    font-family: 'Open Sans', sans-serif;
    background: none;
    border: 1px solid #fff;
    border: 1px solid #152F55;
    outline: none;
    color: #fff;
    text-align: right;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    background: url(images/Drop.svg) 2% center no-repeat;
    height: 26px;
    position: absolute;
    top: 12px;
    width: 20px;
    right: auto;
    left: 4px;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none
    }

.select2-container--default .select2-results__option--selected {
    background-color: #5897fb
}

.address-book .grd-top-wrapper {
    width: 100%;
    max-width: 970px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .address-book .grd-top-wrapper .pager {
    }

.pager .btn {
    background: transparent linear-gradient(90deg, #FF7F32 0%, #E84F2B 100%) 0% 0% no-repeat !important;
    border: none;
    font-family: 'Open Sans', sans-serif;
    height: 22px;
    font-size: 11px !important;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
    display: inline-block;
    color: #fff;
}

.pager.text-right {
    text-align: left !important
}

.search-loader {
    position: absolute;
    top: 40px;
    left: -16px;
}

/*25-10-2021*/
.service-type {
    width: 100%;
    max-width: 750px;
    background: #112B50;
    margin: 0px 0px 20px 0px;
    -webkit-clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 18%);
    clip-path: polygon(3% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 18%);
    padding: 14px;
    font-family: 'Lato', sans-serif;
    position: relative;
    margin-right: 24px;
    min-height: 100px;
    height: auto;
    display: flex;
}

    .service-type .s-type {
        width: 49%;
        opacity: .5;
    }

    .service-type .s-type-width-60 {
        width: 60%;
    }

    .service-type .cod-txt {
        height: 40px;
        margin-top: 4px;
        background: #274C81;
        border: none;
        line-height: 40px;
        text-indent: 14px;
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        color: #fff;
        padding: 0px;
        border-radius: 2px;
        padding-right: 46px;
        width: 120px;
        padding: 0px;
    }

    .service-type .s-type.selected {
        opacity: 1;
    }

    .service-type .seprator {
        width: 2px;
        background: #A7CCFD;
        margin: 18px
    }

    .service-type .s-type .title {
    }

    .service-type .s-type .check-icon {
        width: 23px;
        min-width: 23px;
        height: 23px;
        background: url(images/Deactivated-icon.svg) left top no-repeat;
        background-size: 23px;
        margin-left: 10px;
    }

    .service-type .s-type.selected .check-icon {
        background: url(images/shipment-check.svg) left top no-repeat;
        background-size: 23px;
    }

    .service-type .s-type .subheading {
        margin-bottom: 6px;
    }

    .service-type .s-type .s-type-title {
        font-size: 16px;
        color: #fff;
        padding-bottom: 0px;
        display: flex
    }

    .service-type .s-type p {
        font-size: 14px;
        color: #A7CCFD;
        line-height: 20px;
        padding-bottom: 0px;
        margin: 0px;
        font-style: italic
    }

    .service-type .s-type .s-type-title .amount {
        padding-left: 4px
    }

        .service-type .s-type .s-type-title .amount .currency {
            font-size: 11px;
            vertical-align: super;
            font-weight: 400;
        }

.address-type .pickup-address {
    background: transparent linear-gradient(270deg, #112B50 0%, #1F5C83 49%, #112B50 100%) 0% 0% no-repeat padding-box;
    padding: 4px;
    color: #fff;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: normal;
    display: inline-flex
}

    .address-type .pickup-address .icon {
        background: url(images/location-pin.svg) left center no-repeat;
        width: 10px;
        background-size: 12px;
        margin-left: 4px
    }

.service-type.consignee-address {
    width: 990px;
    max-width: 990px;
}

.shipment-insurance .form-control {
    width: auto !important;
    padding: 0px !important;
    min-width: 280px;
}

    .shipment-insurance .form-control .checkcontainer {
        display: block;
        position: relative;
        padding-left: 45px;
        margin-bottom: 0px;
        cursor: pointer;
        font-size: 16px;
        color: #fff;
    }

        .shipment-insurance .form-control .checkcontainer .checkmark {
            position: absolute;
            top: 50%;
            left: 14px;
            height: 23px;
            width: 23px;
            background: url(images/Deactivated-icon.svg) center center no-repeat;
            transform: translateY(-50%);
        }

        .shipment-insurance .form-control .checkcontainer input:checked ~ .checkmark {
            background: url(images/shipment-check.svg) center center no-repeat;
        }

        .shipment-insurance .form-control .checkcontainer input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        .shipment-insurance .form-control .checkcontainer .currency {
            font-size: 11px;
            vertical-align: super;
            font-weight: 400;
        }

        .shipment-insurance .form-control .checkcontainer .sep {
            padding: 0px 4px;
        }

.app-wrapper .content-wrapper .new-shippment .shipment-details ul {
    display: block
}

    .app-wrapper .content-wrapper .new-shippment .shipment-details ul li {
        color: #fff;
        font-size: 16px;
        background: url(images/shipment-check.svg) right center no-repeat;
        background-size: 18px;
        padding-right: 30px;
        margin-bottom: 6px
    }

        .app-wrapper .content-wrapper .new-shippment .shipment-details ul li .currency {
            font-size: 11px;
            vertical-align: super;
            font-weight: 400;
        }

.pickup-service .action-bar {
    display: flex
}

@media (max-width: 575.98px) {
    .service-type {
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 94% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 94% 0);
        display: block;
    }

        .service-type .s-type {
            width: 100%;
            min-width: 100%;
        }

        .service-type .seprator {
            margin: 12px 0px;
            width: 100%;
            height: 1px;
        }
}

.inline-otp {
    max-width: 500px;
    width: 95%;
    margin: 0 auto;
}

    .inline-otp h2 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        font-size: 25px;
        color: #fff;
        text-align: center;
        margin-bottom: 14px;
    }

    .inline-otp .otp-form {
    }

        .inline-otp .otp-form .form-group {
            margin-bottom: 26px;
        }

        .inline-otp .otp-form h2 {
            margin-bottom: 14px;
        }

        .inline-otp .otp-form .otp-send-msg {
            font-family: 'Open Sans', sans-serif;
            font-size: 18px;
            color: #fff;
            margin-bottom: 36px;
            line-height: 25px;
            text-align: center;
            padding: 0px 10px;
        }

            .inline-otp .otp-form .otp-send-msg .mobile-number {
                font-family: 'Open Sans', sans-serif;
                font-weight: 600
            }

        .inline-otp .otp-form .form-control.otp-control {
            width: 95px;
            height: 95px;
            clip-path: none;
            text-indent: 0;
            text-align: center;
            font-family: 'Open Sans', sans-serif;
            font-weight: 600;
            font-size: 46px;
            padding: 0px;
        }

        .inline-otp .otp-form .otp-group {
            display: flex;
            justify-content: space-between;
            align-content: center;
            background: none;
            margin-bottom: 26px;
        }

        .inline-otp .otp-form .form-control.otp-control::-webkit-outer-spin-button, .inline-otp .otp-form .form-control.otp-control::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .inline-otp .otp-form .form-control.otp-control[type=number] {
            -moz-appearance: textfield;
        }

        .inline-otp .otp-form .otp-auosend {
            font-size: 14px;
            color: #fff;
            text-align: center;
            margin-bottom: 30px;
        }

            .inline-otp .otp-form .otp-auosend span {
                color: #ECB920;
                font-weight: 700
            }

        .inline-otp .otp-form .otp-resend {
            font-size: 16px;
            color: #fff;
            text-align: center;
            margin-bottom: 26px;
        }

            .inline-otp .otp-form .otp-resend a {
                color: #fff;
                text-decoration: none;
                font-weight: 700
            }

        .inline-otp .otp-form .otp-continue {
            width: 100%;
            padding: 0px;
            margin: 46px 0px 0px 0px;
        }

        .inline-otp .otp-form .form-group.button-group {
            margin-bottom: 0px;
        }

@media (max-width: 575.98px) {

    .inline-otp .otp-form .form-control.otp-control {
        height: 75px;
        width: 75px;
        font-size: 30px;
    }

    .app-wrapper .content-wrapper .new-shippment .steps {
        overflow: auto;
    }
}
/*06-sep-2024*/
.account-swich-dialog-overlay {
    background: #08132254;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1001;
    display: none;
}

.account-swich-dialog {
    width: 450px;
    min-height: 390px;
    background: #1B365E;
    -webkit-clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 10%);
    clip-path: polygon(11% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 10%);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 1002;
    padding: 30px;
}

    .account-swich-dialog .logo {
        text-align: center;
        margin-bottom: 15px;
    }
        @media(min-width:900.98px) {
            .account-swich-dialog .closebutton {
                margin-right: 346px !important;
                margin-bottom: 0px;
            }
     }
    .account-swich-dialog h2 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        font-size: 20px;
        color: #fff;
        margin-bottom: 20px;
        text-align: center;
    }

    .account-swich-dialog .account-type-wrapper {
        background: #112B50;
        width: 370px;
        min-height: 150px;
        margin: 0px auto;
        padding: 10px;
        margin-bottom: 20px;
    }

        .account-swich-dialog .account-type-wrapper ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
            color: #fff
        }

            .account-swich-dialog .account-type-wrapper ul li {
                border-bottom: 1px solid #1B365E;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 0px;
            }

                .account-swich-dialog .account-type-wrapper ul li:last-child {
                    border-bottom: none
                }

                .account-swich-dialog .account-type-wrapper ul li .check-icon {
                    width: 23px;
                    height: 23px;
                    background: url(images/Deactivated-icon.svg) left top no-repeat;
                    background-size: 23px;
                }

                .account-swich-dialog .account-type-wrapper ul li.selected .check-icon {
                    background: url(images/shipment-check.svg) left top no-repeat;
                    background-size: 23px;
                }

        .account-swich-dialog .account-type-wrapper .account-info {
            display: flex;
            align-items: center;
        }

            .account-swich-dialog .account-type-wrapper .account-info .badge {
                width: 42px;
                height: 42px;
                background: #ccc;
                border-radius: 50%;
                display: flex;
                align-items: center;
                margin-left: 10px
            }

                .account-swich-dialog .account-type-wrapper .account-info .badge img {
                    width: 100%;
                }

            .account-swich-dialog .account-type-wrapper .account-info .title {
                font-family: 'Open Sans', sans-serif;
                font-size: 16px;
                font-weight: 600
            }

                .account-swich-dialog .account-type-wrapper .account-info .title span {
                    display: block;
                    font-size: 12px;
                    font-style: italic;
                    color: #68D1DB
                }

    .account-swich-dialog .btn-primary {
        text-align: center;
        justify-content: start;
    }

    .account-swich-dialog .button-group {
        padding: 0px 9px 0px 10px !important;
    }

    /*23-sep-2024*/
    /*@media (max-width: 575.98px) {*/

    @media(max-width:900.98px) {

        .app-wrapper .content-wrapper .side-nav-bar .nav ul li.account-switch a {
            background: url('images/nav-icon/accounts-switch-icon.svg') 20px center no-repeat !important;
        }

            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.account-switch a:hover,
            .app-wrapper .content-wrapper .side-nav-bar .nav ul li.account-switch.active a {
                background: url('images/nav-icon/accounts-switch-icon.svg') 20px left no-repeat !important;
            }

        .app-wrapper .content-wrapper .side-nav-bar .nav ul li.account-switch a {
            height: 50px;
            line-height: 50px;
            background-position: 6px !important;
            padding-left: 45px !important
        }

        .account-swich-dialog {
            width: 100% !important;
        }

            .account-swich-dialog .account-type-wrapper {
                width: 95% !important;
            }
    }

    .account-swich-dialog-overlay {
        background: #08132254;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 1001;
        display: none;
    }

    .account-swich-dialog {
        width: 450px;
        min-height: 390px;
        background: #1B365E;
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20px, 85% 0);
        clip-path: polygon(15% 0%, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 15%);
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
        z-index: 1002;
        padding: 30px;
    }

        .account-swich-dialog .logo {
            text-align: center;
            margin-bottom: 15px;
        }

        .account-swich-dialog .closebutton {
            margin-right: 310px;
            margin-bottom: 0px;
        }

        .account-swich-dialog h2 {
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            font-size: 20px;
            color: #fff;
            margin-bottom: 20px;
            text-align: center;
        }

        .account-swich-dialog .account-type-wrapper {
            background: #112B50;
            width: 370px;
            min-height: 150px;
            margin: 0px auto;
            padding: 10px;
            margin-bottom: 20px;
        }

            .account-swich-dialog .account-type-wrapper ul {
                list-style: none;
                margin: 0px;
                padding: 0px;
                color: #fff
            }

                .account-swich-dialog .account-type-wrapper ul li {
                    border-bottom: 1px solid #1B365E;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 12px 0px;
                }

                    .account-swich-dialog .account-type-wrapper ul li:last-child {
                        border-bottom: none
                    }

                    .account-swich-dialog .account-type-wrapper ul li .check-icon {
                        width: 23px;
                        height: 23px;
                        background: url(images/Deactivated-icon.svg) left top no-repeat;
                        background-size: 23px;
                    }

                    .account-swich-dialog .account-type-wrapper ul li.selected .check-icon {
                        background: url(images/shipment-check.svg) left top no-repeat;
                        background-size: 23px;
                    }

            .account-swich-dialog .account-type-wrapper .account-info {
                display: flex;
                align-items: center;
            }

                .account-swich-dialog .account-type-wrapper .account-info .badge {
                    width: 42px;
                    height: 42px;
                    background: #ccc;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    margin-right: 10px
                }

                    .account-swich-dialog .account-type-wrapper .account-info .badge img {
                        width: 100%;
                    }

                .account-swich-dialog .account-type-wrapper .account-info .title {
                    font-family: 'Open Sans', sans-serif;
                    font-size: 16px;
                    font-weight: 600
                }

                    .account-swich-dialog .account-type-wrapper .account-info .title span {
                        display: block;
                        font-size: 12px;
                        font-style: italic;
                        color: #68D1DB
                    }

        .account-swich-dialog .btn-primary {
            text-align: center;
            justify-content: center;
        }

        .account-swich-dialog .button-group {
            padding: 0px 26px
        }


    .form-control_1_corp {
        background: #2D4D79 url(/assets/css/images//Drop.svg) 0 center no-repeat !important;
        direction: rtl !important;
    }

    .app-wrapper .content-wrapper .new-shippment .btn-primary.corp {
        clip-path: polygon(5% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 30%) !important;
    }

.app-wrapper .content-wrapper .side-nav-bar .nav ul li.corpShipment a {
    background: url(images/nav-icon/shipment-icon.svg) 94% center no-repeat;
}

    .app-wrapper .content-wrapper .side-nav-bar .nav ul li.corpShipment a:hover, .app-wrapper .content-wrapper .side-nav-bar .nav ul li.corpShipment.active a {
        background: url(images/nav-icon/active-shipment-icon.svg) 94% center no-repeat;
    }

    @media(min-width:900.98px) {
        .app-wrapper .content-wrapper .side-nav-bar .nav ul li.account-switch {
            display: none;
        }
    }