@import "fonts.css";

body{
    font-size: 15px;
}
body:not(.layout-fixed) .main-sidebar {
    height: inherit;
    min-height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
}
.btn{
   font-size: 15px;
}
.btn.btn-lg{
   font-size: 18px;
}
.text-red{
    color: red;
}
.table td, .table th{
    padding: 10px;
}
.btn.btn-logout {
    width: 100%;
    text-align: left;
    color: #c2c7d0;
}
.btn.btn-logout:hover{
    background-color: #dc3545;
    color: #fff;
}

/********* Login Page ***********/
.login_page .content-wrapper{
    margin-left: 0 !important;
    -ms-flex-align: center;
    align-items: center;
    background-color: #e9ecef;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -ms-flex-pack: center;
    justify-content: center;
}
.login_page .content-wrapper .login-box{
    width:95%;
    max-width: 400px;
}
.login_page .content-wrapper .login-box .card .card-header{
    background: #f8f8f8;
}
.login_page .content-wrapper .login-box .card .card-header img{
    width: 164px;
    padding: 10px 0;
}
.login_page .content-wrapper .login-box .card .card-body .login-box-msg{
    padding: 0;
    text-align: left;
    font-size: 16px;
    margin-bottom: 8px;
}
.login_page .content-wrapper .login-box .card .card-body .form-control{
    height: 44px;
}
.login_page .content-wrapper .login-box .card .card-body .input-group-text{
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
}
.login_page .content-wrapper .login-box .card .card-body .form-check input[type=checkbox]{
    width: 16px;
    height: 16px;
}
.login_page .content-wrapper .login-box .card .card-body .form-check .form-check-label{
    font-weight: 600;
    margin-left: 4px;
    margin-top: 2px;
}
.login_page .content-wrapper .login-box .card .card-body .btn{
    font-size: 20px;
}
.login_page .main-footer{
    margin-left: 0 !important;
}
.login_page .content-wrapper .alert.alert-danger{
    width: 100%;
    display: flex;
    align-items: center;
    color: #ca1c2c;
    background-color: #fbdcdf;
    border-color: #ffe6e8;
    padding: 10px 12px;
}
.login_page .content-wrapper .alert.alert-danger i{
    margin-right: 8px;
}

.product-add-alert{
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}
.main-sidebar,
.main-sidebar::before {
    width: 232px;
}
.sidebar-mini .main-sidebar .nav-link,
.sidebar-mini-md .main-sidebar .nav-link,
.sidebar-mini-xs .main-sidebar .nav-link {
    width: calc(232px - 0.5rem * 2);
}
.uscAdmin-tiles{
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}
.uscAdmin-tiles a{
    box-shadow: none!important;
    border: none;
    width: 160px;
    max-width: 160px;
    height: 68px;
    text-align: left;
    margin-right: 5px;
    margin-bottom: 15px;
    color: #ffffff!important;
}
.uscAdmin-tiles a.active:after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: -15px;
    border-top: 15px solid transparent;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top-color: inherit;
    width: 10px;
    border-bottom: none;
    right: 0;
    margin: 0 auto;
}
.uscAdmin-tiles a:nth-child(1), .admin-wrapper-dropdown-2 .dropdown li a.order--color1{
    background: #1198f0;
    border-color: #1198f0;
    border-radius: 0;
}
.uscAdmin-tiles a:nth-child(2), .admin-wrapper-dropdown-2 .dropdown li a.order--color2{
    background: #eeaa1f;
    border-color: #eeaa1f;
}
.uscAdmin-tiles a:nth-child(3), .admin-wrapper-dropdown-2 .dropdown li a.order--color3{
    background: #7755ee;
    border-color: #7755ee;
}
.uscAdmin-tiles a:nth-child(4), .admin-wrapper-dropdown-2 .dropdown li a.order--color4{
    background: #b9ccd8;
    border-color: #b9ccd8;
}
.uscAdmin-tiles a:nth-child(5), .admin-wrapper-dropdown-2 .dropdown li a.order--color5{
    background: #4de4b3;
    border-color: #4de4b3;
}

/*.uscAdmin-tiles a:nth-child(6), .admin-wrapper-dropdown-2 .dropdown li a.order--color6{*/
/*    background: #ef5d00;*/
/*    border-color: #ef5d00;*/
/*}*/

.uscAdmin-tiles a:nth-child(7), .admin-wrapper-dropdown-2 .dropdown li a.order--color7{
    background: transparent;
    border-color: transparent;
}
.uscAdmin-tiles a:nth-child(1), .admin-wrapper-dropdown-2 .dropdown li a.order--color8{
    background: #1198f0;
    border-color: #1198f0;
}
.uscAdmin-tiles a:nth-child(2), .admin-wrapper-dropdown-2 .dropdown li a.order--color9{
    background: #eeaa1f;
    border-color: #eeaa1f;
}
.uscAdmin-tiles a:nth-child(3), .admin-wrapper-dropdown-2 .dropdown li a.order--color10{
    background: #7755ee;
    border-color: #7755ee;
}
.uscAdmin-tiles a:nth-child(4), .admin-wrapper-dropdown-2 .dropdown li a.order--color11{
    background: #b9ccd8;
    border-color: #b9ccd8;
}
.uscAdmin-tiles a:nth-child(5), .admin-wrapper-dropdown-2 .dropdown li a.order--color12{
    background: #4de4b3;
    border-color: #4de4b3;
}
.uscAdmin-tiles a:nth-child(6), .admin-wrapper-dropdown-2 .dropdown li a.order--color13 {
    background: #e91e63;
    border-color: #e91e63;
}
.uscAdmin-tiles a:nth-child(7){
    display: flex;
    width: 110px;
    max-width: 110px;
    border-radius: inherit;
    align-items: center;
    justify-content: center;
    margin-right: 0;
}
.uscAdmin-tiles a:nth-child(7) i{
    font-size: 64px;
    color: #000081;
}
.uscAdmin-tiles span b{
    font-size: 11px;
}
span.stat-quantity {
    float: right;
    font-weight: bold;font-style: italic;
}
span.stat-amount {
    font-size: 22px;
    margin-top: 3px;
    display: block;
    text-align: left;
    color: #ffffffa6;
}
.order_create_plus_btn{
    margin-left: 15px;
    display: block;
    float: right;
    width: 91px;
    height: 33px;
    top: 20px;
    border-radius: inherit;
}
span.fas.fa-star.checked {
    color: orange;
}
.facolor {
    font-size: 20px;
    color: #808080;
}
.small_text{
    font-size:11px;
    color:#428bca;
}
.card-body .text-right .btn-group .btn-default.active,
.text-right.card-body .btn-group .btn-default.active,
.text-right .btn-group .btn-default.active{
    background: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

.user-avatar-image{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.user-avatar-image img{
    width: 160px;
    border: 5px solid #f8f8f8;
    border-radius: 50%;
    margin-bottom: 16px;
}
.user-info-header-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.user-info-header-wrap p{
    margin-bottom: 0;
}
.user-info-para-box{
    padding: 12px;
    background: #f8f8f8;
    border: 1px solid #eee;
}
.user-info-para-box i{
    margin-left: 2px;
    cursor: pointer;
    font-size: 14px;
}
.datepicker table {
    width: 100%;
}
.customer-daterange .input-group-addon {
    background: #e9ecef;
    border-top: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    padding: 7px 6px 0 6px;
}
.btn-download-customer{
    padding: 7px 12px;
}
.btn-download-customer i{
    margin-right: 2px;
}

.cuatomer-create-form {}

.cuatomer-create-form .card-header{
    padding: 12px 16px;
}

.cuatomer-create-form .card-body{
    padding: 12px  12px 0 12px;
}

.cuatomer-create-form .card-body label{
    margin-bottom: 4px;
}

.customer-info-list{
    margin: 0;
    padding: 0;
    list-style: none;
}

.customer-info-list li{
    line-height: 1.1;
    padding: 14px 0;
    border-bottom: 1px solid #ddd;
}

.customer-info-list li:first-child{
    padding-top: 0;
}

.customer-info-list li:last-child{
    border-bottom: none;
    padding-bottom: 0;
}

.customer-info-list li .subtitle{
    font-size: 14px;
    color: #666;
    margin-bottom: 1px;
}
.customer-info-list li .title{
    color: #333;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 0;
}

.customer-details-cards .card{
    height: 100%;
}

.customer-details-cards .user-avatar-image{
    height: auto;
}

.customer-order-info-tab .tab-content{
    padding-top: 16px;
    border-top: 1px solid #ddd;
}

.customer-order-info-tab .nav-pills .nav-link{
    border: none;
    background: #fff;
    font-weight: 600;
}
.customer-order-info-tab .nav-pills .nav-link.active{
    color: #fff;
    background-color: #007bff;
}

.customer-order-info-tab .nav-pills .nav-link.active i{
    color: #fff;
}

.customer-order-info-tab .nav-pills .nav-link i{
    margin-right: 4px;
    color: #007bff;
}

.customer-order-info-tab .tab-content-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.customer-order-info-tab .tab-content-header h5,
.customer-order-info-tab .tab-content-header p{
    margin-bottom: 0;
}

.customer-order-info-tab .tab-content-header h5{
    font-weight: 600;
    color: #007bff;
    font-size: 18px;
}

.customer-order-info-tab{}

.form-group .error {
    color: red;
    font-size: 14px;
}

.settings-menu-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: -12px;
    margin-right: -12px;
    line-height: 1.4;
}

.settings-menu-wrap .settings-menu-box{
    flex: 0 0 16.666%;
    max-width: 16.666%;
    padding: 0 12px;
    margin-bottom: 24px;
    text-align: center;
    transition: all .25s;
}

.settings-menu-wrap .settings-menu-box a{
    width: 100%;
    height: 100%;
    display: block;
    background: #fff;
    /*color: #385776;*/
    padding: 0 0 20px 0;
    border: 2px solid #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px 1px #dbdbdb;
    transition: all .25s;
}

.settings-menu-wrap .settings-menu-box a .menu-image{
    margin-bottom: 2px;
}

.settings-menu-wrap .settings-menu-box a .menu-image img{
    width: 100%;
    max-width: 200px;
    border-radius: 6px;
    padding: 10px;
}

.settings-menu-wrap .settings-menu-box a .menu-title{
    font-size: 20px;
    font-weight: bold;
}

.settings-menu-wrap .settings-menu-box a:hover{
    border-color: #337ab7;
}

.pg-card-title p{
    font-size: 18px;
    font-weight: 600;
}

.modifi-switch.custom-switch .custom-control-label::before{
    width: 44px;
    height: 24px;
    border-radius: 24px;
}

.modifi-switch.custom-switch .custom-control-label::after{
    width: 16px;
    height: 16px;
    border-radius: 24px;
    top: 8px;
    left: -31px;
}

.modifi-switch.custom-switch .custom-control-input:checked~.custom-control-label::after{
    background: #fff;
    top: 8px;
    left: -25px;
    border-color: #007bff;
}

.modifi-switch.custom-switch .custom-control-input:focus~.custom-control-label::before{
    border-color: #007bff;
}

.payment-getway-form .col-form-label{
    line-height: 1;
    padding-top: 5px;
    padding-bottom: 5px;
}

.payment-getway-form .form-control{
    min-height: 40px;
}

.payment-getway-form .btn.btn-lg{
    font-size: 18px;
}

/*.table-product-list{*/
/*    border: 1px solid #dee2e6;*/
/*}*/


.product-list-tr{
    background: #f5f5f5;
}

.product-list-tr td{
    border-top: 0;
}

.order-list-space td{
    padding: 4px;
    border-top: 0;
}

.pro-total{
    border-top: 8px solid #fff;
}

#pro-total .product-summary-tr td {
    padding: 15px 10px;
    font-size: 18px;
}

.product-list-tr textarea.form-control{
    min-width: 300px;
    line-height: 1.15;
}

.product-list-tr input.form-control.fc-qut{
    width: 82px;
    height: 35px;
    margin-left: auto;
    padding: 4px 8px;
    line-height: 1.1;
}

.artwork-pdf-name-link{
    word-break: break-word;
}

.artwork-pdf-name-link:hover{
    text-decoration: underline;
}

.btn-remove-artwork{
    font-size: 13px;
    line-height: 1;
    margin-left: 2px;
    margin-top: -2px;
    padding: 2px 4px;
    border-radius: 20px
}

.manual-delivery-tr{
    background: #f5f5f5;
}

.basic-info-input-wrap{
    width: 66%;
    margin: 0 auto;
}
.right-bottom-divider-border{
    border-right: 2px dashed #ced4da;
    margin-bottom: 15px;
}

.site-logo-view{
    width: 100%;
    height: 180px;
    margin: 0 auto;
    border: 2px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;

}

.site-logo-view img{
    max-width: 100%;
    padding: 0 10px;
}

.product-gird-wrap{
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    margin-right: -6px;
}

.product-display-gird{
    flex: 0 0 16.666%;
    max-width: 16.666%;
    padding: 0 6px;
    margin-bottom: 12px;
}

.product-gird-wrap.landing-page-products .product-display-gird{
    flex: 0 0 20%;
    max-width: 20%;
}

.product-display-wrap{
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 4px 1px #dbdbdb;
    border: 2px solid rgba(255, 255, 255, 0);
}

.product-display-wrap:hover{
    border-color: #337ab7;
    transition: all .25s;
}

.product-image-holder{
    margin-bottom: 15px;
    width: 100%;
}

.product-image-holder img{
    width: 100%;
    border: 1px solid #d7d7d7;
}

.product-display-wrap.add-to-display .product-image-holder img{
    padding: 24px;
    width: 100%;
}

.product-display-wrap .product-title{
    margin-bottom: 2px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.product-display-wrap .as-low-as{
    font-style: italic;
}

/* Font Page */
.table-font-list .font-category-name a{
    color: #000;
}
.font-list-wrap .font-category-title{
    margin-bottom: 24px;
}
.font-list-wrap .font-list{
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}
.font-list-wrap .font-list .font-list-box{
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 8px 8px;
}
.font-list-wrap .font-list .font-list-box .font-list-box-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px;
    position: relative;
    border-radius: 6px;
    box-shadow: 0 1px 4px 1px #dbdbdb;
}
.font-list-wrap .font-list .font-name{
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 0;
    text-align: center;
    line-height: 24px;
    color: #4b4a4a;
}
.font-list-wrap .font-list input[type=checkbox]{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 6px;
    left: 10px;
    margin-left: 0;
}
.font-list-wrap .font-list .font-price{
    position: absolute;
    bottom: 6px;
    left: 10px;
    margin-bottom: 0;
    font-size: 16px;
}
.font-list-wrap .font-list a.edit{
    position: absolute;
    top: 8px;
    right: 10px;
    background: #007bff;
    color: #fff;
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: .75;
    transition: all 0.25s ease-in-out;
}
.font-list-wrap .font-list button.delete{
    position: absolute;
    bottom: 8px;
    right: 10px;
    background: #dc3545;
    color: #fff;
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: .75;
    transition: all 0.25s ease-in-out;
    border: none;
}
.font-list-wrap .font-list a.edit:hover,
.font-list-wrap .font-list button.delete:hover{
    opacity: 1;
}

@media (max-width: 1599.98px) {
    .font-list-wrap .font-list .font-name{
        font-size: 18px;
    }
    .category_list_card .pagination_control nav > div:last-of-type {
        display: flex;
        margin-top: 16px;
        flex-direction: column;
        align-items: center;
    }
}
@media (max-width: 1350px) {
    .table-font-list.table td,
    .table-font-list.table th{
        padding: 6px;
        font-size: 14px;
    }
    .table-font-list.table td .btn{
        font-size: 12px;
        padding: 4px 6px;
    }
    .font-list-wrap .font-list .font-list-box {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .font-list-wrap .font-list .font-name{
        font-size: 18px;
    }
}
@media (max-width: 575.98px) {
    .font-list-wrap .font-list .font-name{
        font-size: 14px;
        line-height: 15px;
        padding: 0 4px;
    }
}

/* Clipart Page */
.table-clipart-list .clipart-category-name a{
    color: #000;
}
.clipart-list-wrap .clipart-category-title{
    margin-bottom: 24px;
}
.clipart-list-wrap .clipart-list{
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}
.clipart-list-wrap .clipart-list .clipart-list-box{
    flex: 0 0 25%;
    max-width: 25%;
    padding: 8px 8px;
}
.clipart-list-wrap .clipart-list .clipart-list-box .clipart-list-box-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 158px;
    position: relative;
    border-radius: 6px;
    box-shadow: 0 1px 4px 1px #dbdbdb;
}
.clipart-list-wrap .clipart-list .clipart-name{
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 18px;
    text-align: center;
    line-height: 24px;
    color: #4b4a4a;
}
.clipart-list-wrap .clipart-list input[type=checkbox]{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 6px;
    left: 10px;
    margin-left: 0;
}
.clipart-list-wrap .clipart-list .clipart-price{
    position: absolute;
    bottom: 6px;
    left: 10px;
    margin-bottom: 0;
    font-size: 16px;
}
.clipart-list-wrap .clipart-list img{
    margin-bottom: 8px;
    padding: 4px;
    width: 80px;
    height: auto;
}
.clipart-list-wrap .clipart-list a.edit{
    position: absolute;
    top: 8px;
    right: 10px;
    background: #007bff;
    color: #fff;
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: .75;
    transition: all 0.25s ease-in-out;
}
.clipart-list-wrap .clipart-list button.delete{
    position: absolute;
    bottom: 8px;
    right: 10px;
    background: #dc3545;
    color: #fff;
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: .75;
    transition: all 0.25s ease-in-out;
    border: none;
}
.clipart-list-wrap .clipart-list a.edit:hover,
.clipart-list-wrap .clipart-list button.delete:hover{
    opacity: 1;
}

@media (max-width: 1599.98px) {
    .clipart-list-wrap .clipart-list .clipart-list-box {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    .clipart-list-wrap .clipart-list .clipart-name{
        font-size: 18px;
    }
}
@media (max-width: 1350px) {
    .table-clipart-list.table td,
    .table-clipart-list.table th{
        padding: 6px;
        font-size: 14px;
    }
    .table-clipart-list.table td .btn{
        font-size: 12px;
        padding: 4px 6px;
    }
    .clipart-list-wrap .clipart-list .clipart-list-box {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .clipart-list-wrap .clipart-list .clipart-name{
        font-size: 18px;
    }
}
@media (max-width: 575.98px) {
    .clipart-list-wrap .clipart-list .clipart-name{
        font-size: 14px;
        line-height: 15px;
        padding: 0 4px;
    }
}
/* PMS Color Page */
.pmsColor-list-wrap .pmsColor-list{
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}
.pmsColor-list-wrap .pmsColor-list .pmsColor-list-box{
    flex: 0 0 14.285%;
    max-width: 14.285%;
    padding: 8px;
}
.pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap{
    border: 1px solid #ced4da;
    padding: 10px;
    position: relative;
    border-radius: 5px;
}
.pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap .edit{
    position: absolute;
    left: 10px;
    top: 10px;
    background: #007bff;
    color: #fff;
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: .75;
    transition: all 0.25s ease-in-out;
}
.pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap .pmsColor-name{
    text-align: center;
}
.pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap .delete{
    position: absolute;
    right: 10px;
    top: 10px;
    background: #dc3545;
    color: #fff;
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: .75;
    transition: all 0.25s ease-in-out;
    border: none;
}
.pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap .edit:hover,
.pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap .delete:hover{
    opacity: 1;
}
.pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap .pmsColor{
    width: 100%;
    height: 80px;
    border-radius: 6px;
}

@media (max-width: 1650px) {
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box{
        flex: 0 0 16.666%;
        max-width: 16.666%;
    }
}
@media (max-width: 1460px) {
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box{
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (max-width: 1199.98px) {
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box{
        flex: 0 0 25%;
        max-width: 25%;
    }
}
@media (max-width: 1024px) {
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box{
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}
@media (max-width: 991.98px) {
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box{
        flex: 0 0 25%;
        max-width: 25%;
    }
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap .edit,
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap .delete{
        width: 22px;
        height: 22px;
        font-size: 12px;
    }
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap .pmsColor-name{
        font-size: 13px;
    }
}
@media (max-width: 767.98px) {
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box{
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}
@media (max-width: 575.98px) {
    .pmsColor-list-wrap .pmsColor-list{
        margin-left: -5px;
        margin-right: -5px;
    }
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box{
        flex: 0 0 50%;
        max-width: 50%;
        padding: 5px;
    }
    .pmsColor-list-wrap .pmsColor-list .pmsColor-list-box .pmsColor-list-box-wrap .pmsColor-name {
        font-size: 12px;
    }
}


/* Inside Order View */
.order_payment_status h2{
    display: inline-block;
    vertical-align: middle;
    padding: 10px 20px !important;
    font-size: 20px;
    font-weight: bold;
    margin: 5px 10px 5px 0;
    color: #fff;
    line-height: 1.2;
    min-width: 160px;
    text-align: center;
    border-radius: 28px;
}

.order_payment_status h2.order_status {
    background-color: #31B0D5;
}

.order_payment_status h2.payment_status_paid{
    background-color: #449D44;
}

.delivery_rating .far, .delivery_rating .fas{
    font-size: 25px;
    margin-top: 0;
}

.barcode_container{
    float:right;
    clear:both;
    line-height: 1;
    text-align: center;
}

.order-invoice.invoice{
    background: transparent;
    border: none;
}

.order-invoice .card-header{
    background: #fff;
}

.invoice-info{
    margin-top: 0;
}

.invoice-info .client-address-wrap{
    display: flex;
    justify-content: space-between;
}

.invoice-info h2{
    font-size: 18px;
    font-weight: bold;
}

.invoice-info .billing_address_wrap{
    margin-right: 20px;
    width: 100%;
}

.invoice-info .shipping_address_wrap{
    width: 100%;
}

.invoice-info .billing_address{
    line-height: 1.2;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    padding: 16px 24px;
    margin-bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    border-radius: 6px;
}

.invoice-info .shipping_address{
    line-height: 1.2;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    margin-bottom: 0;
    padding: 16px 24px;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    border-radius: 6px;
}

.invoice-info .billing_address .billing_address_header,
.invoice-info .shipping_address .shipping_address_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 12px;
}

.invoice-info .billing_address h2,
.invoice-info .shipping_address h2{
    margin-bottom: 0;
}

.invoice-info .billing_address p,
.invoice-info .shipping_address p{
    margin-bottom: 4px;
}

.order_detail_table {
    font-family: 'Source Sans Pro', sans-serif;
}

.table.order_detail_table>tfoot>tr>td,
.t_bottom.t_new_bottom td{
    border: none;
}

.table.order_detail_table>tfoot>tr>th {
    border-color: #e8e8e8;
    font-size: 20px;
    font-weight: 300;
    padding: 8px;
    color: #707070;
}

.table.order_detail_table>tfoot>tr>th:last-child {
    padding: 8px 12px;
    white-space: nowrap;
}

.t_head,
.tr_head.tw{
    border: 1px dotted #e8e8e8;
    background-color: #fdfdfd;
    font-size: 18px;
    color: #707070;
    font-weight: 400;
}

.table>tbody.t_body>tr>td p>span.front_font_text,
.table>tbody.t_body>tr>td p>span.back_font_text{
    font-weight: 200;
    color: #707070;
    padding-left: 5px;
}

.order_detail_table .t_head td{
    white-space: nowrap;
}

.table>thead>tr.t_head>td,
.table>tbody.t_body>tr>td {
    /*border: none;*/
    line-height: 1;
    padding: 10px 6px;
}

.table>tbody.t_body>tr>td {
    font-size: 18px;
    color: #707070;
    font-weight: 500;
}

.table>tbody.t_body>tr>td.image .thumb_image {
    border: none;
    border-radius: 0;
    margin: 0;
}

.td_border {
    display: block;
    border-bottom: 1px dashed #e8e8e8;
    padding: 0 0 10px 0;
}

.table>tbody.t_body>tr>td strong,
.table>tbody.t_body>tr>td p>span {
    font-weight: 500;
    float: left;
    color: #0a2c79;
    min-width: 190px;
}

.table>tbody.t_body>tr>td p>img,
.table>tbody.t_body>tr>td p>a {
    display: inline-block;
}

.table>tbody.t_body>tr>td p {
    margin: 0 0 3px 0;
    font-weight: 300;
    display: flex;
}

.table>tbody.t_body>tr>td p.extra_margin {
    margin: 15px 0 3px 0;
}

.table>tbody.t_body>tr>td p.extra_bold,
.table>tbody.t_body>tr>td p.extra_bold strong {
    font-weight: 600;
}

.table>tbody.t_body>tr>td p a.cboxElement img {
    box-shadow: 0 1px 4px 1px #DBDBDB;
    background-color: #f0f0f0;
}

.pagination_control nav{
    width: 100%;
}

.pagination_control nav > div:first-of-type {
    display: flex;
    justify-content: space-between;
}

.pagination_control nav > div:first-of-type span{
    cursor: not-allowed;
}

.pagination_control nav > div:last-of-type {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

.pagination_control nav > div:last-of-type a.px-4{
    padding: 8px 12px !important;
}

.pagination_control nav > div:last-of-type span[aria-current="page"] span.px-4{
    padding: 8px 12px !important;
    background: #2551db !important;
    border-color: #2551db !important;
    color: #fff !important;
    cursor: not-allowed;
}

/** Invoice Table **/

.table.order_detail_table {
    font-size: 18px;
    color: #707070;
    font-weight: 400;
    border: 1px solid #e8e8e8;
}

.table.order_detail_table tr.tw>td {
    border: none;
    padding: 10px 5px;
    font-size: 18px;
    font-weight: 500;
    white-space:nowrap;
}

.table.order_detail_table tr.tw>td:first-child {
    width: 80px;
    text-align: center;
}

.show-big{
    display: block;
}

.show-small{
    display: none;
}

.table.order_detail_table tr.tr_head {
    border: 1px solid #e8e8e8;
    background-color: #fdfdfd;
}

.table.order_detail_table tr.tw>td:first-child {
    width: 80px;
    text-align: center;
}

.table.order_detail_table tr.tw>td.cart_left_image {
    width: 140px;
}

.table.order_detail_table tr.tw > td:nth-of-type(3) {
    width: calc(100% - 640px);
}

.table.order_detail_table tr.tw > td.inv_quntity,
.table.order_detail_table tr.tw > td.inv_unit,
.table.order_detail_table tr.tw > td.inv_total {
    width: 140px;
    text-align: center;
}

.table.order_detail_table table .text_bold {
    font-weight: 600;
}

.table.order_detail_table .p_name {
    font-size: 18px;
}

.table.order_detail_table table.msg_table{
    margin-right: 0;
    width: 100%;
}

.table.order_detail_table table.msg_table td{
    border-top: none;
}

.table.order_detail_table table.msg_table tr:first-child {
    border-bottom: 1px solid #e8e8e8;
}

.table.order_detail_table table.msg_table tr:first-child td {
    padding: 0 0 10px 0;
}

.table.order_detail_table table.msg_table tr:first-child td:first-child {
    width: calc(100% - 408px);
    border-top: none;
}

.table.order_detail_table table.msg_table tr:first-child td:nth-of-type(2){
    width: 140px;
    text-align: center;
    border-top: none;
}

.table.order_detail_table table.msg_table tr:first-child td:nth-of-type(3),
.table.order_detail_table table.msg_table tr:first-child td:nth-of-type(4) {
    width: 140px;
    text-align: center;
    border-top: none;
}

.table.order_detail_table table.msg_table tr.t_w_2 td{
    padding: 5px;
    font-size: 15px;
    white-space: normal;
}

.table.order_detail_table table.msg_table tr.t_w_2 td:first-child {
    width: 200px;
    float: left;
    color: #0a2c79;
    font-weight: 600;
}

.t_new_bottom{
    border-top: 1px dashed #e8e8e8;
}

.table.order_detail_table .t_casting{
    margin-left: auto;
}

.table.order_detail_table .t_casting td{
    text-align: right;
    padding: 3px 10px;
}



/** End Imvoice Table**/

#actionCheck{
    width:20px;
}

.order-list-table.card-body{
    padding: 20px 16px;
}

.order-list-table .table th,
.order-list-table .table td{
    white-space: nowrap;
    vertical-align: middle;
}

.order-list-table .table tr.bg-success{
    background-color: #d4edda !important;
    color: #212529 !important;
}

.order-list-table .table tr.bg-success .small_text{
    color: #1198f0;
}

.order-list-table .table tr.bg-warning{
    background-color: #fff3cd !important;
    color: #212529 !important;
}

.order-list-table .table tr.bg-success .small_text{
    color: #1198f0;
}

.extra_border_top {
    margin: 15px 0 0 0 !important;
    border-top: 1px dotted #e8e8e8;
    padding: 10px 0 6px 0 !important;
    background-color: #fdfdfd;
}

.extra_border_bottom {
    background-color: #fdfdfd;
    border-bottom: 1px dotted #e8e8e8;
    padding: 0 0 10px 0 !important;
}

.extra_border_top strong,
.extra_border_bottom strong {
    color: #707070 !important;
}

p .productAttribute~img {
    max-height: 100px;
}

.dz-message{
    background: #f1f1f1;
    padding: 10px;
    border-radius: 12px;
    height: 132px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-style: italic;
    text-align: center;
}

.dz-file-info{
    font-size: 14px;
    margin-bottom: 0;
    margin-top: 4px;
    text-align: center;
}

.color_span {
    width: 35px !important;
    min-width: 35px !important;
    height: 12px;
    display: inline-block;
    margin: 5px 5px 0 3px;
    border: 1px solid aliceblue;
}

.up_img {
    width: auto;
    max-width: 500px;
    max-height: 100px;
    height: auto;
    margin: 0 10px 0 4px;
}

.order-status-title{
    margin-left: 8px;
    margin-right: 12px;
}

#action_menu .navbar-nav .nav-link{
   border: 1px solid #ccc;
   color: #1f2d3d;
}
#action_menu .navbar-nav .nav-item{
    margin-right: 6px;
}

#action_menu .navbar-nav .nav-item:last-child{
    margin-right: 0;
}

#action_menu .navbar-nav .nav-link {
    padding: 6px 10px;
    font-size: 14px;
}

#action_menu .navbar-nav .nav-link i{
    margin-right: 4px;
}

#action_menu .action-menu-left .nav-item .dropdown-item{
    font-size: 14px;
}

#action_menu .action-menu-right{
    margin-right: 8px;
}

#action_menu .action-menu-right .nav-item .nav-link{
    font-size: 14px;
}

#action_menu .action-menu-right .nav-item .nav-link.btn-danger{
    color: #fff;
    border-color: #dc3545;
}

#action_menu .action-menu-right .nav-item.btn-order-filter{
    width: 191px;
}

#action_menu .action-menu-right .nav-item.btn-order-filter a.nav-link{
    display: flex;
    align-items: center;
}

#action_menu .action-menu-right .nav-item.btn-order-filter a.nav-link.dropdown-toggle::after{
    margin-left: auto;
}

#action_menu .action-menu-right .nav-item.btn-order-filter ul li a.dropdown-item{
    font-size: 13px;
}

#action_menu .dropdown-menu,
.cg-action-menu .dropdown-menu{
    margin-top: 15px;
}

#action_menu .dropdown-menu.show:before,
.cg-action-menu .dropdown-menu.show:before{
    content: "";
    border-top: 0;
    border-right: 10px solid transparent;
    border-bottom: 14px solid #ccc;
    border-left: 10px solid transparent;
    position: absolute;
    top: -14px;
    left: 20px;
}

.note-suggesstion{
    background-color: #777;
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
    margin: 2px;
    cursor: pointer;
}

.add-note-suggesstion {
    background-color: #777;
    display: inline;
    padding: 5px;
    font-size: 10px;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
    margin: 2px;
    cursor: pointer;
}

.orderNoteCount{
    color:red;
    padding-left: 10px;
    font-size: 20px;
    font-weight: 500;
}

.orderNoNoteCount{
    color:#5cb85c;
    padding-left: 10px;
    font-size: 20px;
    font-weight: 500;
}

.previousNote{
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.previousNote li{
    padding: 5px 0;
    width: 100%;
    float: left;
}

.previousNote li .user_box{
    width: 65px;
    float: left;
    font-size: 40px;
    position: relative;
}

.previousNote li .chat_box{
    width: calc(100% - 67px);
    float: left;padding: 5px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 6px;
    position: relative;
}

.previousNote li .chat_box::after{
    position: absolute;
    content: "";
    border: 15px solid transparent;
    border-right-color: #ccc;
    left: -40px;
    border-width: 10px 20px;
    top: 15px;
}

.previousNote li .chat_box p{
    font-size: 14px;
    color: #707070;
    position: relative;
    border-bottom: 1px solid #ccc;
    padding: 0 0 5px 0;
    margin: 0;
}

.previousNote li .chat_box p>span{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 11px;
    color: #214666;
}

.previousNote li .chat_box>span{
    padding:5px;
    color: #ba5858;
    font-size: 14px;
    min-height: 50px;
    width: 100%;
    float: left;
}

.process_his{
    font-size:15px;
    color:#000;
}

.process_his table{
    border-radius:4px;
}

.process_his .info>td{
    background-color:#428bca !important;
    font-size:18px;
    font-weight:bold;
    color:#fff;
    border:none;
}

.process_his tr td span{
    font-size:12px;
    font-weight:normal;
    display:block;
}

.process_his>table>tbody>tr>td{
    vertical-align: middle !important;
}

.lavender{
    background-color:#d9edf5 !important;
}

.required_alert_p{
    font-style: italic;
    color: #e9142a;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
}

.datepicker td,
.datepicker th{
    width: 35px !important;
    height: 35px !important;
}

.content-header h1{
    font-size: 24px;
    font-weight: 600;
    color: #385776;
}

.manage-site-menu .msm-main li{
    margin-right: 12px;
    padding-bottom: 12px;
    position: relative;
}
.manage-site-menu .msm-main li:before{
    content: "";
    position: absolute;
    height: 4px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e8e8e8;
    border-radius: 4px;
    transition: all 0.35s ease-out;
}

.manage-site-menu .msm-main li a{
    font-weight: 600;
}

.manage-site-menu .msm-main li:hover:before,
.manage-site-menu .msm-main li.active:before{
    background: #007bff;
}

.manage-site-menu .btn-group{}

.order-detail-link{
    color: #333;
    font-weight: bold;
}
.order-detail-link:hover{
    text-decoration: underline;
}
.order-detail-link i{
    margin-left: 4px;
}
.cg-action-menu .border-dark{
    border-color: #ccc !important;
}

.cg-action-menu .btn{
    font-size: 13px;
    padding: 6px 10px;
}

.cg-action-menu .dropdown-item.btn{
    padding: 6px 15px;
}

.act-menu-space{
    margin: 3px 6px 3px 0;
}

.table-top-action .btn i{
   margin-right: 2px;
}

.modal-content .btn{
    padding: 8px 10px;
}

.pre-next-img{
    width: 90px;
}

.act-menu-space i{
    padding-right: 2px;
}

.color-red{
    color: red;
}
.color-green{
    color: green;
}
.color-blue{
    color: blue;
}
.color-purple{
    color: purple;
}
.color-yellow{
    color: yellow;
}
.color-orange{
    color: orange;
}

.card-header{
    background: #f5f5f5;
}

.card-header i{
    margin-right: 4px;
}

.form-group label span.required-star{
    color: red;
}

.btn-group .btn-default.active{
    /*background: #e6e6e6;*/
    /*border-color: #c5c5c5;*/
}

.btn-group a i{
    margin-right: 2px;
}

.form-group .order_number input{
    font-size: 1.75rem;
    color: #333;
    line-height: 1;
}

.landing-product-add-btns{
    background: #f5f5f5;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 0px 3px rgba(0,0,0,.2);
}

.landing-product-add-btns h5{
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 600;
}

.modal-backdrop
{
    opacity: 0.25 !important;
}

.reo-number{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f1f1f1;
    padding: 10px;
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 10px;
}

.reo-number p{
    margin-bottom: 0;
}
.reo-number .reo-order-priority{
    font-size: 24px;
    white-space: nowrap;
}
.reo-number .reo-order-priority i.checked{
    color: orange;
}
.reo-number .reo-order-date{
    font-size: 16px;
}
.modal .badge{
    font-weight: 400;
    font-size: 73%;
}

.modal-footer .btn{
    font-size: 14px;
    display: flex;
    align-items: center;
}

.modal-footer .btn i{
    margin-right: 4px;
}

.order-cancel-alert{
    color: #bd0012;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
}


/* Order Note Custom CheckBox */
.checkbox-container {
    display: block;
    position: relative;
    padding-left: 68px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 15px;
    left: 0;
    height: 40px;
    width: 40px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 4px;
}
/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
    background-color: #2196F3;
    border-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 14px;
    top: 4px;
    width: 10px;
    height: 20px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.checkbox-details-box{
    position: relative;
	background: #98fb98;
	border: 1px solid #ccc;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
}
.checkbox-details-box:before{
    content: "";
    border-top: 12px solid transparent;
    border-right: 22px solid #ccc;
    border-bottom: 12px solid transparent;
    border-left: 0;
    position: absolute;
    top: 22px;
    left: -23px;
}
.checkbox-details-top{
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
    margin-bottom: 4px;
}
.checkbox-details-bottom .note-resion{
    color: #dc3545;
    margin-bottom: 8px;
}
.checkbox-details-bottom .note-date{
    text-align: right;
    font-size: 15px;
    margin-bottom: 0;
}
.product-identity-text{
    padding: 2px 4px;
    font-weight: 700;
    font-size: 13px;
    background: orange;
    border-radius: 3px;
}

.shipping-rate-box{
    position: relative;
    padding: 12px;
    background: #f8f8f8;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.shipping-rate-box .shipping-partner-logo{
    margin-bottom: 4px;
}

.shipping-rate-box .shipping-title{
    font-weight: bold;
    margin-bottom: 4px;
}

.shipping-rate-box .shipping-rate-time{
    margin-bottom: 0;
    color: #666;
    font-weight: bold;
    font-size: 15px;
    font-style: italic;
}

.shipping-rate-box.selected{
    border-color: #449D44;
}

.shipping-rate-box.selected:before{
    content: "\f058";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    color: #449D44;
    font-size: 20px;
    top: 4px;
    right: 8px;
}

.control-sidebar{
    width: 320px;
}

.sidebar-content-wrap {
    padding: 16px;
}

.quick-actions .nav-tabs{
    border-bottom: 2px dashed #ccc;
    padding-bottom: 22px;
}

.quick-actions .nav-item{
    margin-right: 12px;
}

.quick-actions .nav-item .nav-link{
    padding: 0;
    width: 50px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #999;
    background: #fff;
    border-radius: 4px;
    position: relative;
}

.quick-actions .nav-item .nav-link.active{
    background: #f1f1f1;
    border-color: #777;
}

.quick-actions .nav-item .nav-link.active:before{
    position: absolute;
    content: '';
    left: 14px;
    bottom: -21px;
    border: 10px solid transparent;
    border-top-color: #777;
}

.quick-actions .nav-item .nav-link i{
    font-size: 26px;
    color: #a8a8a8;
}

.quick-actions .nav-item .nav-link i.fa-grin-stars,
.quick-actions .nav-item .nav-link i.fa-exclamation-triangle{
    color: orange;
}

.quick-action-alert{
    position: absolute;
    top: -9px;
    right: -9px;
    width: 19px;
    height: 19px;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dc3545;
    color: #fff;
    border-radius: 20px;
}

.navbar-badge{
    font-size: 11px;
    top: 6px;
}

.barcode-image{
    width: 100%;
    max-width: 250px;
    min-height: 50px;
}

svg.w-5.h-5{
    width: 20px;
}

.bg-success .small_text{
    color: #e5e5e5;
}

.color-thumb-image{
    width: 38px;
    height: 50px;
    border: 2px solid #ccc;
    border-radius: 4px;
}

.import-form{
    justify-content: flex-end;
}

.import-form .btn-primary{
    padding: 5px 10px;
}

.btn-export-color{
    border: 1px solid #ddd;
    padding: 6px 12px;
    background: #fff;
    margin-left: 4px;
    transition: all .25s ease-in-out;
}

.btn-export-color:hover{
    background: #ddd;
}

.import-form-upload label{
    border: 1px solid #ddd;
    padding: 6px 12px;
    background: #fff;
    margin: 0 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all .25s ease-in-out;
}

.import-form-upload label:hover{
    background: #ddd;
}

.import-form-upload .form-control-file{
    display: none;
}

.btn-price-badge{
    padding: 3px 6px;
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.btn-price-badge:hover{
    background-color: #0069d9;
    border-color: #0069d9;
    color: #fff;
}

.dropzone {
    background: #f1f1f1 !important;
    border-radius: 5px;
    border: 2px dashed rgb(0, 135, 247) !important;
    border-image: none;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.client_info_wrap{
    background: aliceblue;
    padding: 8px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.client_info_wrap p{
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 0;
}

.client-orders-link{
    font-size: 16px;
    font-weight: 600;
    padding: 4px 8px;
    color: #007bff;
    transition: all .25s ease-in-out;
}

.client-orders-link:hover{
    color: red;
    text-decoration: underline;
}

.clients-orders-table{
    font-size: 15px;
}

.white-space-nowrap{
    white-space: nowrap;
}

.btn-payment-status{
    padding: 4px 8px !important;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #fff;
}

.btn-payment-status.payment-success{
    background: #28a745;
}

.btn-payment-status.payment-success:hover{
    background: #218838;
    color: #fff;
}

.btn-payment-status.payment-due{
    background: #17a2b8;
}

.btn-payment-status.payment-due:hover{
    background: #138496;
    color: #fff;
}

.btn-payment-status i{
    margin-right: 4px;
}

.factorydox-yes{
    margin-bottom: 0;
    background: #218838;
    color: #fff;
    width: 50px;
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
}

.factorydox-no{
    margin-bottom: 0;
    background: orange;
    color: #fff;
    width: 50px;
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
}

/** ArtWork Modal **/

.checkout-artwork-modal .modal-dialog.modal-xl{
    width: 95%;
    max-width: 1500px;
}

.checkout-artwork-modal .card-header .card-header-wrap{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-artwork-modal .card-header-wrap .btn-art-download i{
    margin-right: 6px;
}

.checkout-artwork-modal .checkout_workart_scq {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    font-size: 14px;
    color: #222;
    margin-bottom: 10px;
}

.checkout-artwork-modal .close{
    color: red;
}

.checkout-artwork-modal .tab-content{
    width: 100%;
    height: auto;
    padding: 20px 20px 0 20px;
}

/**** wristbands style *****/

.checkout-artwork-modal .modal-body .checkout_bandsize {
    font-weight: 400;
    color: #716f6f;
    font-size: 36px;
}
.checkout-artwork-modal .modal-body .checkout_bandsize span{
    font-size: 24px;
}
.wristbands_design_area .midium {
    width: 96%;
    margin-left: 2%;
}
.wristbands_design_area .youth {
    width: 92%;
    margin-left: 4%;
}
.checkout-artwork-modal .one_four table .front_message,
.checkout-artwork-modal .one_four table .back_message,
.checkout-artwork-modal .one_four table .inside_message,
.checkout-artwork-modal .one_four table .continue_message{
    font-size: 20px;
}
.checkout-artwork-modal .one_four table td {
    padding: 0;
}
.checkout-artwork-modal .one_four table td,
.checkout-artwork-modal .one_four table td {
    height: 35px;
}
.checkout-artwork-modal .one_four table .art_left_img,
.checkout-artwork-modal .one_four table .art_right_img,
.checkout-artwork-modal .one_four table .continue_left_img,
.checkout-artwork-modal .one_four table .continue_right_img {
    width: 25px;
}
.checkout-artwork-modal .three_four table .front_message,
.checkout-artwork-modal .three_four table .back_message,
.checkout-artwork-modal .three_four table .inside_message,
.checkout-artwork-modal .three_four table .continue_message{
    font-size: 20px;

}
.checkout-artwork-modal .three_four table td {
    padding: 0;
}
.checkout-artwork-modal .three_four table td,
.checkout-artwork-modal .three_four table td {
    height: 65px;
}
.checkout-artwork-modal .three_four table .art_left_img,
.checkout-artwork-modal .three_four table .art_right_img,
.checkout-artwork-modal .three_four table .continue_left_img,
.checkout-artwork-modal .three_four table .continue_right_img {
    width: 40px;
}
.checkout-artwork-modal .one table .front_message,
.checkout-artwork-modal .one table .back_message,
.checkout-artwork-modal .one table .inside_message,
.checkout-artwork-modal .one table .continue_message {
    font-size: 20px;
}
.checkout-artwork-modal .one table td {
    padding: 0px;
}
.checkout-artwork-modal .one table td,
.checkout-artwork-modal .one table td {
    height: 80px;
}
.checkout-artwork-modal .one table .art_left_img,
.checkout-artwork-modal .one table .art_right_img,
.checkout-artwork-modal .one table .continue_left_img,
.checkout-artwork-modal .one table .continue_right_img {
    width: 40px;
}
.checkout-artwork-modal .checkout_workart_scq {
    margin-top: 20px;
    margin-bottom: 25px;
    font-weight: 500;
}
.checkout_workart_scq strong {
    font-weight: 500;
}
.checkout-artwork-modal .wristbands_design_area {
    max-width: 850px;
    float: none;
    margin: auto;
}
.active_design {
    display: block;
}
.checkout-artwork-modal .modal-body h2 {
    text-align: left;
    margin: 0;
    padding: 10px 0;
    font-weight: 600;
    color: #525252;
}
.checkout-artwork-modal .modal-body .checkout_bandsize span {
    font-size: 24px;
}
h4.band_msg_type {
    text-align: center;
    color: #807e7e;
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 0;
    display: block;
    overflow: hidden;
    clear: both;
}
h4.band_msg_type span {
    width: 50%;
    display: block;
    float: left;
}
.checkout-artwork-modal table td, 
.checkout-artwork-modal table th {    
    border: none;
}
.checkout-artwork-modal .wristbands_front_back_area table {
    font-weight: 600;
    margin-bottom: 5px;
    height: initial;
    background-color: #14025F;
    margin: 10px 0;
    text-align: center;
    color: #046E9D;
    font-size: 18px;
    background-size: 100% 100%;
    width: 100%;
}
.checkout-artwork-modal .five_eight table td,
.checkout-artwork-modal .one_two table td {
    height: 60px;
    padding: 0;
    vertical-align: middle;
}
.checkout-artwork-modal .one table td {
    height: 80px;
    padding: 0;
    vertical-align: middle;
}
.checkout-artwork-modal .three_four table td {
    height: 65px;
    padding: 0;
    vertical-align: middle;
}
.checkout-artwork-modal .one_four table td {
    height: 45.354px;
}
.wristbands_front_back_area td span {
    display: flex;
    align-items: center;
}
.wristband_table_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 100%;
    width: 100%;
    height: 100%;
}
.wristbands_design_area table.front_back_table td {
    width: 50%;
    display: flex;
    float: left;
    padding: 0;
}
.checkout-artwork-modal .wristbands_design_area table td span {
    max-width: 100%;
    /* margin: 0 10px; */
    padding: 0 10px;
    overflow: hidden;
}
.shopping_page .five_eight table .art_left_img,
.checkout-artwork-modal .one_two table .art_left_img,
.checkout-artwork-modal .one_two table .art_right_img,
.checkout-artwork-modal .one_two table .continue_left_img,
.checkout-artwork-modal .one_two table .continue_right_img {
    width: 40px;
}
.checkout-artwork-modal .one_two table .front_message,
.checkout-artwork-modal .one_two table .back_message,
.checkout-artwork-modal .one_two table .inside_message,
.checkout-artwork-modal .one_two table .continue_message {
    font-size: 24px;
}

.checkout-artwork-modal table img {
    max-width: 100%;
}
.front_message,
.back_message,
.continue_message,
.inside_message {
    line-height: 1.4;
    letter-spacing: 0;
}
.artworkbtn {
    background-color: green;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 12px!important;
    font-weight: 500!important;
    line-height: 1;
    margin-top: 6px;
    padding: 3px 5px;
    width: 100%;
    width: initial !important;
    height: initial !important;
    box-shadow: initial !important;
    float: none !important;
}
.removeclipart {
    background-color: red;
    border: none;
    border-radius: 4px !important;
    color: #fff;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1;
    margin-top: 6px;
    padding: 3px 5px !important;
    width: 100%;
    height: initial !important;
}
#sclipartshowhide,
#feclipartshowhide,
#bsclipartshowhide,
#beclipartshowhide,
#csclipartshowhide,
#ceclipartshowhide {
    text-align: center;
    width: 110px;
}
.art_left_img,
.art_right_img,
.continue_left_img,
.continue_right_img {
    /*display: inline-block;*/
    width: 60px;
}
.inlineerror {
    clear:both;
    background: #FA0505;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    margin-top: 5px;
    text-align: center;
    border-radius: 4px;
    width: 100%;
    float: left;
}
.errorfrontText,.errorbackText {
    max-width: 600px;
}
.errorinsideText{
    max-width: 700px;
    margin: 0 auto;
    float: none;
}

.custom_validation{
    font-style: italic;
    display: flex;
    margin-top: 4px;
}
#error_image,
#error_image2,
#error_product_fk,
#error_background_image,
#error_color_type,
#error_background_image2,
#error_details,
#error_product_size,
#error_product_type_fk,
#error_additional_type{
    font-style: italic;
    display: flex;
    margin-top: 4px;
}
.product-additional-image-view ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    margin-right: -6px;
}
.product-additional-image-view ul li{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 6px;
}
.product-additional-image-view ul li .image-box{
    position: relative;
}
.product-additional-image-view ul li .image-box img{
    width: 100%;
}
.product-additional-image-view ul li .image-box .btn{
    position: absolute;
    top: 0;
    right: 0;
}
.global-settings-wrap ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.global-settings-wrap ul li a{
    display: flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 16px;
    border-radius: 6px;
    transition: all .25s ease-in-out;
}
.global-settings-wrap ul li a i{
    margin-top: 1px;
    margin-right: 6px;
    font-size: 12px;
}
.global-settings-wrap ul li a:hover{
    background: rgb(245,245,245);
    background: linear-gradient(45deg, rgb(245, 245, 245) 0%, rgb(255, 255, 255) 100%);
}
.btn-group.layer-control .btn img{

}
.btn-group.layer-control .btn i{
    font-size: 23px;
}
.checkout-artwork-modal .tab-pane p{
    font-size: 14px;
    white-space: wrap;
    text-align: center;
}

@media (max-width: 1439.98px){
    .product-display-gird{
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

@media (max-width: 1199.98px){
    .checkout-artwork-modal .one_two table .front_message,
    .checkout-artwork-modal .one_two table .back_message,
    .checkout-artwork-modal .one_two table .inside_message,
    .checkout-artwork-modal .one_two table .continue_message {
        font-size: 18px;
    }
    .checkout-artwork-modal .one_four table .front_message,
    .checkout-artwork-modal .one_four table .back_message,
    .checkout-artwork-modal .one_four table .inside_message,
    .checkout-artwork-modal .one_four table .continue_message{
        font-size: 18px;
    }
    .checkout-artwork-modal .three_four table .front_message,
    .checkout-artwork-modal .three_four table .back_message,
    .checkout-artwork-modal .three_four table .inside_message,
    .checkout-artwork-modal .three_four table .continue_message{
        font-size: 18px;
    }
    .checkout-artwork-modal .one table .front_message,
    .checkout-artwork-modal .one table .back_message,
    .checkout-artwork-modal .one table .inside_message,
    .checkout-artwork-modal .one table .continue_message {
        font-size: 18px;
    }
    .product-gird-wrap.landing-page-products .product-display-gird{
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    .product-gird-action .btn{
        font-size: 14px;
        padding: 5px 9px;
    }
}

@media (max-width: 991.98px){
    .checkout-artwork-modal .modal-title{
        font-size: 16px;
    }
    .checkout-artwork-modal .card-header-wrap h5{
        font-size: 16px;
    }
    .checkout-artwork-modal .one_two table .art_left_img,
    .checkout-artwork-modal .one_two table .art_right_img,
    .checkout-artwork-modal .one_two table .continue_left_img,
    .checkout-artwork-modal .one_two table .continue_right_img {
        width: 20px;
    }
    .front_art .art_left_img,
    .front_art .art_right_img,
    .back_art .art_left_img,
    .back_art .art_right_img,
    .continue_art .art_left_img,
    .continue_art .art_right_img {
        width: 20px !important;
        margin: 0 5px;
    }
    .checkout-artwork-modal .one_two table .front_message,
    .checkout-artwork-modal .one_two table .back_message,
    .checkout-artwork-modal .one_two table .inside_message,
    .checkout-artwork-modal .one_two table .continue_message {
        font-size: 14px;
    }
    .checkout-artwork-modal .one_four table .front_message,
    .checkout-artwork-modal .one_four table .back_message,
    .checkout-artwork-modal .one_four table .inside_message,
    .checkout-artwork-modal .one_four table .continue_message{
        font-size: 14px;
    }
    .checkout-artwork-modal .three_four table .front_message,
    .checkout-artwork-modal .three_four table .back_message,
    .checkout-artwork-modal .three_four table .inside_message,
    .checkout-artwork-modal .three_four table .continue_message{
        font-size: 14px;
    }
    .checkout-artwork-modal .one table .front_message,
    .checkout-artwork-modal .one table .back_message,
    .checkout-artwork-modal .one table .inside_message,
    .checkout-artwork-modal .one table .continue_message {
        font-size: 14px;
    }
    .landing-product-add-btns{
        padding: 12px;
    }
    .landing-product-add-btns .btn{
        font-size: 14px;
        padding: 5px 8px;
    }
    .landing-product-add-btns h5{
        font-size: 16px;
    }
}

@media (max-width: 767.98px){
    .checkout-artwork-modal .card-header-wrap .btn-art-download i{
        margin-right: 0;
    }
    .checkout-artwork-modal .card-header-wrap .btn-art-download span{
        display: none;
    }
    .checkout-artwork-modal .one_two table .front_message,
    .checkout-artwork-modal .one_two table .back_message,
    .checkout-artwork-modal .one_two table .inside_message,
    .checkout-artwork-modal .one_two table .continue_message {
        font-size: 10px;
        margin: 0 2px;
    }
    .checkout-artwork-modal .one_four table .front_message,
    .checkout-artwork-modal .one_four table .back_message,
    .checkout-artwork-modal .one_four table .inside_message,
    .checkout-artwork-modal .one_four table .continue_message{
        font-size: 10px;
        margin: 0 2px;
    }
    .checkout-artwork-modal .three_four table .front_message,
    .checkout-artwork-modal .three_four table .back_message,
    .checkout-artwork-modal .three_four table .inside_message,
    .checkout-artwork-modal .three_four table .continue_message{
        font-size: 10px;
        margin: 0 2px;
    }
    .checkout-artwork-modal .one table .front_message,
    .checkout-artwork-modal .one table .back_message,
    .checkout-artwork-modal .one table .inside_message,
    .checkout-artwork-modal .one table .continue_message {
        font-size: 10px;
        margin: 0 2px;
    }
    .checkout-artwork-modal .one_two table .art_left_img,
    .checkout-artwork-modal .one_two table .art_right_img,
    .checkout-artwork-modal .one_two table .continue_left_img,
    .checkout-artwork-modal .one_two table .continue_right_img {
        width: 16px;
        margin: 0 2px;
    }
    .front_art .art_left_img,
    .front_art .art_right_img,
    .back_art .art_left_img,
    .back_art .art_right_img,
    .continue_art .art_left_img,
    .continue_art .art_right_img {
        width: 16px !important;
        margin: 0 2px;
    }
    .checkout-artwork-modal .modal-body .checkout_bandsize {
        font-size: 18px;
        font-weight: 600;
    }
    .checkout-artwork-modal .modal-body .checkout_bandsize span{
        font-size: 16px;
        font-weight: 400;
    }
    .checkout-artwork-modal .checkout_workart_scq {
        font-size: 10px;
    }
    .landing-product-add-btns{
        padding: 10px;
        flex-direction: column;
        align-items: flex-start;

    }
    .landing-product-add-btns .btn{
        font-size: 13px;
        padding: 4px 6px;
        margin-top: 4px;
    }
    .landing-product-add-btns h5{
        font-size: 14px;
        margin-bottom: 4px;
    }
    .product-display-wrap{
        padding: 6px;
    }
    .product-display-wrap.add-to-display .btn{
        font-size: 12.5px;
    }
    .hpsc-wrap .hpsc-right{
        margin-left: 4px;
        text-align: right;
    }
    .hpsc-wrap .hpsc-right .btn{
        margin: 2px 0;
    }
    .hpsc-wrap .hpsc-left h3{
        font-size: 20px;
        margin-bottom: 4px !important;
    }
    .hpsc-wrap .hpsc-left p{
        font-size: 13px;
        line-height: 1.1;
    }
}

@media (max-width: 575.98px){
    .checkout-artwork-modal .nav-tabs .nav-link{
        font-size: 14px;
        padding: 8px 12px;
    }
    .checkout-artwork-modal .modal-title{
        font-size: 14px;
    }
    .checkout-artwork-modal .card-header-wrap h5{
        font-size: 14px;
    }
    .checkout-artwork-modal .card-header-wrap .btn{
        padding: 5px 10px;
    }
    .checkout-artwork-modal .modal-body{
        padding: 16px 8px;
    }
    .checkout-artwork-modal .tab-content{
        padding: 10px 0;
    }
    .checkout-artwork-modal .card-body{
        padding: 16px 8px;
    }
    .product-gird-wrap.landing-page-products .product-display-gird{
        flex: 0 0 50%;
        max-width: 50%;
    }
    .product-display-gird{
        flex: 0 0 50%;
        max-width: 50%;
    }
    .product-display-wrap.add-to-display .btn{
        font-size: 11.5px;
    }
    .color-thumb-image{
        width: 32px;
        height: 46px;
    }
}


/*********Tyvek Artwork Style***********/

.tyvek_design table{
    width: 1010px;
    margin: 0 auto;
    float: none;
    border: 1px solid #fac7ca;
}
.tyvek_design table td{
    border: 1px solid #fac7ca;
}
.tyvek_design_left,
.tyvek_design_right{
    width: 13.5%;
}
.checkout-artwork-modal .tyvek_design_middle{
    width: 73%;
    padding-left: 10px;
    background-color: #782b90;
    text-align: left;
    color: #000;
    font-weight: bold;
    vertical-align: middle;
}
.tyvek_design_middle.front_art > span{
    vertical-align: middle;
}
.tyvek_design_middle .art_left_img img,
.tyvek_design_middle .art_right_img img {
    width: 50px;
}
.tyvek_design_middle .front_message {
    font-size: 32px;
    padding-left: 0;
    line-height: initial;
    margin-left: 5px;
    margin-right: 5px;
}
.tyvek_design_middle .continue_table{
    display:block;
}
.tyvek_design_left img {
    display: block;
    margin: 0 auto;
}
#tyvek_customize .common_step_box h4{
    font-size: 22px;
}

@media (max-width: 1199.98px){
    .tyvek_design table{
        width: 100%;
    }
    .tyvek_design_middle .art_left_img img,
    .tyvek_design_middle .art_right_img img {
        width: 32px;
    }
    .tyvek_design_middle .front_message {
        font-size: 24px;
    }
}

@media (max-width: 991.98px){
    .tyvek_design_middle .art_left_img img,
    .tyvek_design_middle .art_right_img img {
        width: 28px;
    }
    .tyvek_design_middle .front_message {
        font-size: 18px;
    }
}

@media (max-width: 765.98px){
    .tyvek_design_left, .tyvek_design_right {
        width: 12%;
    }
    .checkout-artwork-modal .tyvek_design_middle{
        padding: 10px 2px;
        width: 75%;
        line-height: 1;
    }
    .tyvek_design_middle .art_left_img img,
    .tyvek_design_middle .art_right_img img {
        width: 24px;
    }
    .tyvek_design_middle .front_message {
        font-size: 14px;
        margin-left: 2px;
        margin-right: 2px;
    }
}

@media (max-width: 500px){
    .tyvek_design_left, .tyvek_design_right {
        width: 11%;
    }
    .checkout-artwork-modal .tyvek_design_middle{
        padding: 6px 2px;
        width: 78%;
    }
    .tyvek_design_middle .art_left_img img,
    .tyvek_design_middle .art_right_img img {
        width: 16px;
    }
    .tyvek_design_middle .front_message {
        font-size: 10px;
    }
}
@media (max-width: 500px){
    .tyvek_design_middle .art_left_img img,
    .tyvek_design_middle .art_right_img img {
        width: 14px;
    }
    .tyvek_design_middle .front_message {
        font-size: 9px;
    }
}


/******** Lanyard Artwork style **********/

.lanyard-wrap {
    background: #fff;
    margin: 25px 0;
}

.main-img-wrap{
    width: 1306px;
    margin: 0;
    float: left;
    transform-origin: left top;
    position: relative;
}

.lanyard-artwork-preview-wrap{
    overflow-x: auto;
}

.lan-icon-wrap {
    font-size: 271px;
    color: #162447;
}

/*.main-img.one-clip {background-image: url(/images/lanyards/lanyard_bg.png); }*/

.two-clip {
    display: none;
}

/*.main-img.two-clip {background-image: url(/images/lanyards/lanyard_bg_two_clip.png);}*/

.main-img {
    float: right;
    position: relative;
    width: 1054px;
    height: 271px;
    background-size: cover;
    /*background-color: #162447;*/

}
.top_destination {
    position: absolute;
    top: 103px;
    right: 9px;
    transform: rotate(90deg);
}
.two-clip .top_destination{
    right: 13px;
}
.lanyard_rotate {
    position: absolute;
    width: 980px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    font-size: 26px;
    font-weight: 500;
}
.lanyard_rotate {
    color: #ea1921;
}
.lanyard_rotate > div {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    width: initial;
}
.lanyard_rotate .art_left_img,
.lanyard_rotate .art_right_img {
    display: inline-block;
    width: 50px !important;
}
.one-clip .lanyard_rotate.lanyard_rotate_top {
    top: 104px;
    left: 2px;
    transform: rotate(-4.4deg);
    transform-origin: left top;
}
.two-clip .lanyard_rotate.lanyard_rotate_top {
    top: 23px;
    left: 2px;
}
.lanyard_rotate.lanyard_rotate_top .front_art{
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
}
.one-clip .lanyard_rotate.lanyard_rotate_bottom {
    top: 98px;
    left: 15px;
    transform: rotate(4.8deg);
    background-color: #162447;
    transform-origin: left top;
}
.two-clip .lanyard_rotate.lanyard_rotate_bottom {
    top: 184px;
    left: 6px;
}
.lanyard_rotate img {
    display: inline;
    width: 40px !important;
    height: 40px !important;
}
.lanyard_clip.common_customize_box li button.active,
.lanyard_clip.common_customize_box li button:hover,
.lanyard_clip.common_customize_box li button:focus,
.lanyard_clip.common_customize_box li button:active {
    border: 1px solid #1435A2 !important;
    outline: none;
}
.buckle {
    position: absolute;
    top: 84px;
    left: -82px;
    transform: rotate(90deg);
}
.for_buckle_btm_color {
    width: 70px;
    height: 70px;
    border-top: 1px dotted #ccc;
    border-radius: 0px 2px 4px 4px;
    position: absolute;
    transform: rotate(90deg);
}
.one-clip .for_buckle_btm_color {top: 102px; left: -67px;}
.two-clip .for_buckle_btm_color.fbbc_top {
    left: -70px;
    top: 20px;
}
.two-clip .for_buckle_btm_color.fbbc_bottom {
    left: -70px;
    top: 181px;
}
.for_buckle_clips {
    position: absolute;
    transform: rotate(90deg);
    background-color: #fff;
}
.one-clip .for_buckle_clips { left: -186px; top: 71px;}
.two-clip .frc_top {top: -10px; left: -189px;}
.two-clip .frc_bottom { top: 150px; left: -189px;}
.for_buckle_clips img {
    width: 104px;
    height: 135px;
}
.lanyard_qty_poll {
    cursor: pointer;
    border: 1px dashed #ccc;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.lqp_img img {
    height: 110px;
    transform: rotate(45deg);
}
.lanyard_qty_poll p {
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 65px;
    display: block;
    color: #707070;
    font-size: 11px;
    font-weight: 300;
}
.two-clip-price small {
    color: #A59E9E;
    font-size: 14px;
    font-weight: 100;
    margin-left: 8px;
}


/******** Vinyl Artwork style **********/
.vinyl_design_area_wrap{
    overflow-x: auto;
}
.vinyl_design_area {
    position: relative;
    min-width: 1220px;
    padding-bottom: 10px;
}
.vinyl_design_area img{
    max-width: 100%;
}
.vinyl_design_area .vinyl_msg{
    position: absolute;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 24px;
}
.big_face .vinyl_msg {
    left: 118px;
    top: 77px;
    width: 350px;
}
.vinyl_msg .msg_box{
    width:auto;
}
.big_bace .vinyl_msg{
    left: 118px;
    top: 77px;
    width: 350px;
}
.big_bace .vinyl_msg .msg_box{
    font-size: 28px;
}
.l_shape .vinyl_msg{
    left: 122px;
    top: 100px;
    font-size: 50px;
    width: 450px;
}
.five_tab .vinyl_msg{
    left: 98px;
    top: 24px;
    font-size: 24px;
    width: 350px;
}
.vinyl_design_area.three_tab .vinyl_msg{
    position: absolute;
    top: 82px;
    left:70px;
    width: 300px;
    text-align: center;
}
.vinyl_design_area.wavy_shape .vinyl_msg{
    position: absolute;
    top: 132px;
    left:128px;
}
.vinyl_msg span{
    float:left;
    line-height: 1.1;
}
.vinyl_msg .art_left_img, 
.vinyl_msg .art_right_img{
    width: 32px;
}
img.vinyl_left_img{
    margin: 0 5px 0 0;
    float: left;
    max-height: 100%;
    max-width: 100px;
}
img.vinyl_right_img{
    margin: 0 0 0 5px;
    display: inline-block;
    max-height: 100%;
    float: left;
    max-width: 100px;
}

/*********Can Coolers Artwork Style***********/
.common_design {
    margin: 50px 0 0 0;
}

/******** Silicone Wristband Artwork style **********/
.silicon_keychain_artwork .front_back_table{
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .125);
}
.checkout-artwork-modal .wristbands_design_area.silicon_keychain_artwork{
    max-width: 100%;
    overflow-x: auto;
}
.checkout-artwork-modal .modal-body .wristbands_design_area.silicon_keychain_artwork h2{
    font-size: 24px
}
.silicon_keychain_artwork td.front_art::before {
    content: '';
    position: absolute;
    width: 20%;
    height: 117%;
    background: #ffffff;
    top: -6px;
    left: 41px;
    border: 1px solid black;
}
.silicon_keychain_artwork td.front_art > span {
    position: absolute;
    border:10px solid grey;
    width: 120px;
    height: 120px;
    top: -20px;
    left:-100px;
    border-radius: 50%;
}
.silicon_keychain_artwork td.back_art::before {
    content: '';
    position: absolute;
    width: 20%;
    height: 117%;
    background: #ffffff;
    top: -6px;
    right: 41px;
    border: 1px solid black;
}
.silicon_keychain_artwork td.back_art > span {
    position: absolute;
    border:10px solid grey;
    width: 120px;
    height: 120px;
    top: -20px;
    right:-100px;
    border-radius: 50%;
}
.silicon_keychain_artwork td.continue_art::before {
    content: '';
    position: absolute;
    width: 10%;
    height: 117%;
    background: #ffffff;
    top: -6px;
    right: 42px;
    border: 1px solid black;
}
.silicon_keychain_artwork td.continue_art > span{
    content: '';
    position: absolute;
    width: 10%;
    height: 117%;
    background: #ffffff;
    top: -6px;
    left: 32px;
    border: 1px solid black;
}
.silicon_keychain_artwork td.upload_art::before {
    content: '';
    position: absolute;
    width: 10%;
    height: 117%;
    background: #ffffff;
    top: -6px;
    right: 42px;
    border: 1px solid black;
}
.silicon_keychain_artwork td.upload_art > span{
    content: '';
    position: absolute;
    width: 10%;
    height: 117%;
    background: #ffffff;
    top: -6px;
    left: 32px;
    border: 1px solid black;
}
.silicon_keychain_artwork .wristband_table_inner {
    border: 2px solid grey;   
}
.silicon_keychain_artwork .ringCircleLeft{
    position: absolute;
    width: 120px;
    height: 120px;
    top: -20px;
    left: -85px;
    border: 10px solid grey;
    border-radius: 50%;
}
.silicon_keychain_artwork .ringCircleRight{
    position: absolute;
    width: 120px;
    height: 120px;
    top: -20px;
    right: -85px;
    border: 10px solid grey;
    border-radius: 50%;
}
.silicon_keychain_artwork.wristbands_design_area table.front_back_table td {
    width: 50%;
}
.silicon_keychain_artwork .questionIcon{
    color:gray;
}
.silicon_keychain_artwork .wristbands_front_back_area{
    padding-left: 110px;
    width:90%;
    min-width: 850px;
}
.silicon_keychain_artwork .wristbands_front_back_area table {
    height: 75px; 
    font-size: 40px; 
    font-weight: 600;
}
.silicon_keychain_artwork .shopping_page .wristbands_front_back_area table td {
    height: 80px; 
}
#sampleArtwork .silicon_keychain_artwork.wristbands_design_area table td span {
    max-width: 100%;
}

/******** Fabric Wristband Artwork style **********/
.fabric_artwork_wrap{
    overflow-x: auto;
}
.fabric_table {
    height: 100px;
    margin: 10px 0;
    text-align: center;
    border-radius: 10px;
    width: 100%;
    min-width: 650px;
}
.fabric_table .front_art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}
.fabric_table .front_message{
    font-size: 38px;
}

/******** Beltlock Keychain Artwork style **********/
.beltlock_keychain_wrap{
    overflow-x: auto;
}
.beltlock_keychain_wrap .wristbands_design_area{
    max-width: 1024px;
    min-width: 850px;
}
.beltlock_keychain_wrap .wristbands_design_area  .wristbands_front_back_area table{
    height: 80px;
    border-radius: 10px;
}
.beltlock_keychain_wrap .wristbands_design_area  .wristbands_front_back_area table .wristband_table_inner{
    height: 80px;
}
.beltlock_keychain_wrap .wristbands_design_area  .wristbands_front_back_area table .wristband_table_inner .art_left_img,
.beltlock_keychain_wrap .wristbands_design_area  .wristbands_front_back_area table .wristband_table_inner .art_right_img{
    width: 36px;
}
.beltlock_keychain_wrap .wristbands_design_area  .wristbands_front_back_area table .wristband_table_inner .front_message,
.beltlock_keychain_wrap .wristbands_design_area  .wristbands_front_back_area table .wristband_table_inner .back_message
{
    font-size: 28px;
}


/** End ArtWork Modal **/

#customerOrderList .modal-dialog.modal-xl .modal-content{
    border-radius: 8px;
}

@media (min-width: 992px){
    #customerOrderList .modal-dialog.modal-xl{
        max-width: 980px;
    }
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover {
        width: 4.6rem;
    }
    .sidebar-collapse.sidebar-mini .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .nav-link,
    .sidebar-collapse.sidebar-mini .main-sidebar:hover:not(.sidebar-no-expand) .nav-link,
    .sidebar-collapse.sidebar-mini-md .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .nav-link,
    .sidebar-collapse.sidebar-mini-md .main-sidebar:hover:not(.sidebar-no-expand) .nav-link,
    .sidebar-collapse.sidebar-mini-xs .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .nav-link,
    .sidebar-collapse.sidebar-mini-xs .main-sidebar:hover:not(.sidebar-no-expand) .nav-link {
        width: 3.6rem;
    }
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .brand-text,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .logo-xl,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .sidebar .nav-sidebar .nav-link p,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .user-panel>.info,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-text,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .logo-xl,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover
    .sidebar .nav-sidebar .nav-link p,
    .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel>.info {
        display: inline-block;
        margin-left: 0;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        visibility: hidden;
    }
    .sidebar-collapse.sidebar-mini .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar,
    .sidebar-collapse.sidebar-mini .main-sidebar:hover:not(.sidebar-no-expand) .form-control-sidebar,
    .sidebar-collapse.sidebar-mini-md .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar,
    .sidebar-collapse.sidebar-mini-md .main-sidebar:hover:not(.sidebar-no-expand) .form-control-sidebar,
    .sidebar-collapse.sidebar-mini-xs .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar,
    .sidebar-collapse.sidebar-mini-xs .main-sidebar:hover:not(.sidebar-no-expand) .form-control-sidebar {
        display: none;
    }
    .sidebar-collapse.sidebar-mini .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append,
    .sidebar-collapse.sidebar-mini .main-sidebar:hover:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append,
    .sidebar-collapse.sidebar-mini-md .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append,
    .sidebar-collapse.sidebar-mini-md .main-sidebar:hover:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append,
    .sidebar-collapse.sidebar-mini-xs .main-sidebar.sidebar-focused:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append,
    .sidebar-collapse.sidebar-mini-xs .main-sidebar:hover:not(.sidebar-no-expand) .form-control-sidebar~.input-group-append {
        display: none;
    }
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer,
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
        margin-left: 232px;
    }
}

@media (min-width: 1200px){
    #customerOrderList .modal-dialog.modal-xl{
        max-width: 1140px;
    }
}

@media (min-width: 1300px){
    #customerOrderList .modal-dialog.modal-xl{
        max-width: 1260px;
    }
}

@media (min-width: 768px){
    .modal-dialog.modal-md{
        max-width: 570px;
    }
}

@media (max-width: 1800px){
    .action-pre-next{
        display: flex;
        align-items: center;
    }
    .cg-action-menu .btn{
        padding: 6px 8px;
    }
    #shipOrderModal .modal-content .btn,
    .modal-content .modal-footer .btn{
        padding: 8px 10px;
    }
    .pre-next-img{
        width: 62px;
        margin: 0 2px;
    }
}

@media (max-width: 1700px){
    .table.order_detail_table tr.tw>td{
        font-size: 18px;
    }
    .table.order_detail_table tr.tw>td.cart_left_image {
        width: 100px;
        text-align: center;
    }
    .table.order_detail_table tr.tw>td.cart_left_image img{
        width: 90px;
    }
    .table.order_detail_table tr.tw > td.inv_quntity,
    .table.order_detail_table tr.tw > td.inv_unit,
    .table.order_detail_table tr.tw > td.inv_total{
        width: 110px;
    }
    .table.order_detail_table .p_name{
        font-size: 18px;
    }
    .table.order_detail_table table.msg_table tr:first-child td:nth-of-type(3),
    .table.order_detail_table table.msg_table tr:first-child td:nth-of-type(4) {
        width: 110px;
    }
    .table.order_detail_table table.msg_table tr:first-child td:nth-of-type(2) {
        width: 110px;
    }
    .table.order_detail_table table.msg_table tr.t_w_2 td:first-child{
        width: 184px;
    }
}

@media (max-width: 1500px){
    .manage-site-menu .btn-group a{
        font-size: 14px;
        padding: 8px 11px;
    }
    .uscAdmin-tiles a{
        width: 158px;
        max-width: 158px;
    }
    .usc-tiles-staus{
        font-size: 15px;
    }
    .invoice-info .billing_address h2,
    .invoice-info .shipping_address h2{
        font-size: 16px;
    }
    .order_product_info .table>tbody.t_body>tr>td{
        font-size: 16px;
    }
    .table.order_detail_table>tfoot>tr>th{
        font-size: 18px;
    }
    .table>tbody.t_body>tr>td strong,
    .table>tbody.t_body>tr>td p>span{
        min-width: 172px;
    }

    .table.order_detail_table tr.tw>td.cart_left_image {
        width: 80px;
    }
    .table.order_detail_table table.msg_table tr.t_w_2 td{
        font-size: 15px;
    }
    .table.order_detail_table table.msg_table tr.t_w_2 td:first-child{
        width: 152px;
    }
    .settings-menu-wrap .settings-menu-box a .menu-title{
        font-size: 18px;
    }
}

@media (max-width: 1360px){
    .manage-site-menu .btn-group a{
        font-size: 12px;
        padding: 7px 9px;
    }
    .uscAdmin-tiles a{
        width: 135px;
        max-width: 135px;
        height: 62px;
    }
    .usc-tiles-staus{
        font-size: 13px;
    }
    .uscAdmin-tiles a:nth-child(7){
        width: 80px;
        font-size: 14px;
    }
    span.stat-amount{
        font-size: 22px;
    }
    #action_menu .navbar-nav .nav-link{
        padding: 6px 8px;
    }
    #action_menu .navbar-nav .nav-link,
    #action_menu .action-menu-right .nav-item .nav-link{
        font-size: 13px;
    }
    .cuatomer-create-form .card-body label{
        font-size: 14px;
    }
    .cuatomer-create-form .card-body .form-control{
        padding: 6px 8px;
    }
    .settings-menu-wrap .settings-menu-box{
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (max-width: 1199.98px){
    .content-header h1{
        font-size: 20px;
    }
    .manage-site-menu .card-body{
        overflow-x: auto;
        white-space: nowrap;
    }
    .manage-site-menu .msm-main{
        flex-wrap: inherit;
    }
    .manage-site-menu .msm-main li:last-of-type{
        padding-right: 12px;
    }
    .manage-site-menu .btn-group{
        margin-right: 20px;
    }
    .order-actions-wrap{
        flex-direction: column;
    }
    .order-actions-wrap .order-status-title{
        width: 100%;
        margin-left: 16px;
        margin-bottom: 8px;
    }
    .order-actions-wrap #action_menu{
        width: 100%;
    }

    #action_menu .action-menu-right .nav-item .nav-link{
        font-size: 13px;
    }
    #action_menu .action-menu-right .nav-item.btn-order-filter{
        width: 115px;
    }
    #action_menu .action-menu-right .nav-item.btn-order-filter .dropdown-menu.show:before{
        left: auto;
        right: 20px;
    }
    .import-form{
        margin-top: 12px;
        justify-content: flex-start;
    }
    .import-form.if-regular-product{
        margin-top: 0;
        justify-content: flex-end;
    }
    .user-avatar-image{
        flex-direction: row;
    }
    .user-avatar-image img{
        margin-right: 16px;
    }
    .settings-menu-wrap .settings-menu-box a .menu-title{
        font-size: 16px;
    }
}


@media (max-width: 991.98px){
    .reo-number{
        flex-wrap: wrap;
    }
    .reo-number .reo-order-id {
        margin-bottom: 0;
        padding-right: 4px;
        flex: 0 0 75%;
        max-width: 75%;
        font-size: 14px;
    }
    .reo-number .reo-order-priority {
        font-size: 18px;
        white-space: nowrap;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .reo-number .reo-order-date {
        font-size: 14px;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .barcode_container{
        float: none;
        margin: 10px auto 0;
    }
    .delivery_rating{
        text-align:center;
    }
    #customerOrderList .modal-dialog.modal-xl{
        max-width: 99%;
    }
    .settings-menu-wrap .settings-menu-box{
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (max-width: 767.98px){
    .uscAdmin-tiles a:nth-child(7){
        margin-right: auto;
    }
    #action_menu{
        flex-direction: column;
    }
    #action_menu .action-menu-left,
    #action_menu .action-menu-right{
        width: 100%;
        /*justify-content: flex-end;*/
    }
    #action_menu .action-menu-left{
        margin-bottom: 8px;
    }
    .order_payment_status{
        text-align: center;
    }
    .invoice-info .billing_address h2,
    .invoice-info .shipping_address h2{
        font-size: 16px;
    }
    .invoice-info .billing_address p,
    .invoice-info .shipping_address p{
        font-size: 13px;
    }
    .billing_address .btn,
    .shipping_address .btn{
        padding: 4px 8px;
    }
    .import-form.if-regular-product{
        margin-top: 12px;
        justify-content: flex-start;
    }
    .import-form.if-regular-product .import-form-upload label{
        margin-left: 0;
    }
    .pagination_control nav > div:last-of-type{
        display: flex;
        margin-top: 16px;
        flex-direction: column;
        align-items: center;
    }
    .user-avatar-image img{
        width: 80px;
        margin-bottom: 0;
    }
    .settings-menu-wrap .settings-menu-box{
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    .basic-info-input-wrap{
        width: 100%;
    }
    .right-bottom-divider-border{
        border-bottom: 2px dashed #ced4da;
        border-right: none;
        padding-bottom: 12px;
        margin-bottom: 20px;
    }
}

@media (max-width: 575.98px){
    .order_payment_status h2{
        padding: 6px 12px !important;
        font-size: 16px;
        min-width: 115px;
    }
    .order_payment_status h2:last-of-type{
        margin-right: 0;
    }
    .barcode_container{
        float: none;
        margin: 0 auto;
    }
    .delivery_rating{
        text-align:center;
        margin: 12px auto;
    }
    .invoice-info .client-address-wrap{
        flex-direction: column;
    }
    .invoice-info .billing_address_wrap{
        margin-right: 0;
        margin-bottom: 15px;
    }
    .invoice-info .billing_address{
        margin-bottom: 0;
    }
    .customer-order-info-tab .tab-content-header h5{
        font-size: 16px;
    }
    .settings-menu-wrap{
        margin-left: -7px;
        margin-right: -7px;
    }
    .settings-menu-wrap .settings-menu-box{
        padding: 0 7px;
        margin-bottom: 14px;
    }
    .settings-menu-wrap .settings-menu-box a .menu-title{
        font-size: 14px;
    }
}

@media (max-width: 480px){
    .card-body{
        padding: 12px;
    }
    .order-list-table.card-body{
        padding: 12px 12px 20px 12px;
    }
    .order-list-table .table th,
    .order-list-table .table td {
        font-size: 13px;
        padding: 8px 6px;
    }
    .order-list-table .table td .form-control{
        padding: 6px;
        font-size: 13px;
    }
    .order-list-table .table td .btn{
        padding: 3px 7px;
        font-size: 13px;
    }
    .pagination_control nav > div:last-of-type a.px-4,
    .pagination_control nav > div:last-of-type span[aria-current="page"] span.px-4{
        padding: 4px 3px !important;
        font-size: 11px !important;
    }
    .pagination_control nav .bg-white{
        padding: 4px 1px !important;
        font-size: 11px !important;
    }
    .card-header{
        padding: 12px;
    }
    .content-header h1{
        font-size: 1rem;
    }
    .content-header .breadcrumb{
        line-height: 1.25;
        font-size: 14px;
    }
    .uscAdmin-tiles a{
        flex: 0 0 50%;
        max-width: 50%;
        height: 60px;
        margin-right: 8px;
        margin-bottom: 8px;
        width: 150px;
    }
    .uscAdmin-tiles a:nth-child(7){
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .uscAdmin-tiles a:nth-child(2n){
        margin-right: 0;
    }
    span.stat-amount{
        font-size: 18px;
        line-height: 1.1;
        color: #ffffffa8;
    }
    .order-status-title{
        width: 60px;
        margin-left: 8px;
        margin-right: 10px;
        font-size: 12px;
        line-height: 1.2;
    }
    #action_menu .navbar-nav .nav-item{
        margin-right: 4px;
    }
    #action_menu .navbar-nav .nav-link {
        padding: 3px 5px;
    }
    #action_menu .navbar-nav .nav-link,
    #action_menu .action-menu-right .nav-item .nav-link {
    font-size: 12px;
    }
    #action_menu .action-menu-right .nav-item .nav-link{
        border-radious: .15rem
    }
    #action_menu .action-menu-left .nav-item .dropdown-item,
    #action_menu .action-menu-right .nav-item.btn-order-filter ul li a.dropdown-item{
        font-size: 12px;
        padding: 4px 8px;
    }
    .uscAdmin-tiles a.active:after{
        border: 2px solid #fff;
        width: 16px;
        height: 16px;
        background: #28a745;
        left: auto;
        right: 13px;
        bottom: 12px;
        border-radius: 12px;
    }
    .cg-action-menu .btn{
        font-size: 12px;
    }
    .cg-action-menu .dropdown-item.btn{
        padding: 4px 6px;
        font-size: 12px;
    }
    .import-form .form-group:first-of-type{
        width: 100%;
    }
    .import-form.if-regular-product .form-group:first-of-type{
        width: auto;
    }
    .import-form-upload label{
        margin-left: 0;
    }
    .btn-export-color,
    .import-form-upload label,
    .import-form .btn-primary{
        font-size: 15px;
    }
    .table-top-action .btn{
       font-size: 13px;
    }
    .btn-download-customer{
        padding: 8px 10px;
        font-size: 13px;
    }
    .customer-order-info-tab .tab-content-header h5{
        font-size: 14px;
    }
    .customer-order-info-tab .tab-content-header p{
        font-size: 12px;
    }
    .customer-order-info-tab .nav-pills .nav-link {
        padding: 6px 8px;
        font-size: 13px;
    }
    .settings-menu-wrap .settings-menu-box{
        flex: 0 0 50%;
        max-width: 50%;
    }
    .settings-menu-wrap .settings-menu-box a .menu-image img{
        max-width: 132px;
    }
}

@media (max-width: 400px){
    .card-header{
        font-size: 14px;
    }
    .order-status-title{
        margin-left: 2px;
        margin-right: 8px;
        line-height: 1.2;
    }
    #action_menu .navbar-nav .nav-link {
        padding: 4px 5px;
        font-size: 10px;
    }
    #action_menu .action-menu-right .nav-item .nav-link{
        font-size: 11px;
    }
    .btn-export-color,
    .import-form-upload label,
    .import-form .btn-primary{
        font-size: 13px;
    }
    .shipping-rate-box{
        padding: 10px;
    }
    .shipping-rate-box .shipping-title,
    .shipping-rate-box .shipping-rate-time {
        font-size: 13px;
    }
    .table-top-action .btn{
       font-size: 11px;
    }
    .btn-download-customer{
        padding: 9px 10px;
        font-size: 12px;
    }
}