/* variables */
:root {
    --branding-color: #123263;
    --primary-clr: #262A41;
    --secondary-clr: #666C8A;
    --header-btn-bg: #1B3A69;
    --white-clr: #FFFFFF;
    --dark-grey-clr: #1E2021;
    --light-grey: #959595;
    --dark-black: #121212;
    --text-red: #F45555;
    --dropdown-item-bg: #EAF1F4;
    --border-color: #DAE6EC;
    --bg-light-blue: #366DC2;
    --add-heading-bg: #F2F7FB;
    --two-col-bg: #EFF1F2;
    --tool-btn-active: #F4F4F7;

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

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

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

@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/proxima_nova_black.woff2') format('woff2'),
        url('../fonts/proxima_nova_black.woff') format('woff'),
        url('../fonts/proxima_nova_black.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* general */
/*html{
    height: -webkit-fill-available;
}*/
body {
    font-family: 'ProximaNova';
    font-weight: normal;
    font-size: 14px;
    color: var(--primary-clr);
}

.font-weight-semibold {
    font-weight: 600 !important;
}

.text-red {
    color: var(--text-red) !important;
}
.text-white {
    color: var(--white-clr) !important;
}

.bg-light-blue {
    background: var(--bg-light-blue);
}

.bg-light-hover:hover {
    background: var(--border-color);
}

.outline-btn {
    border: 1px solid #E8E8E8;
    background: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
    color: var(--primary-clr);
    min-width: 127px;
}

.special-character-content .btn.btn-active,
.tool-btn-group .btn.btn-active,
.btn-active {
    background: var(--tool-btn-active);
    border-color: var(--tool-btn-active);
}

.dropdown-divider {
    border-color: var(--border-color);
}

.dropdown-menu {
    color: var(--primary-clr);
    border-color: var(--border-color);
    min-width: 200px;
}

dnb-select .dropdown-menu {
    min-width: 100%;
}

.dropdown-item {
    color: var(--dark-black);
    font-size: 14px;
    line-height: 20px;
}

.dropdown-item.active::after {
    content: "\e98f";
    font-family: 'dnbicons';
    font-size: 12px;
    float: right;
}

.dropdown-dashed-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px dashed var(--border-color);
}

.form-control {
    border-color: var(--border-color);
    height: 40px;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: var(--primary-clr);
}

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: url("../images/select-dropdown-arrow.svg") no-repeat calc(100% - 13px) center;
    padding-right: 15px !important;
}

.form-control:focus {
    border-color: var(--border-color);
}

textarea.form-control {
    height: 68px;
}

.resize-none {
    resize: none;
}

.custom-control-label::before {
    width: 18px;
    height: 18px;
    top: 0;
}

.custom-control-label::before {
    border: 2px solid var(--secondary-clr);
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: var(--bg-light-blue);
    background-color: var(--bg-light-blue);
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: none;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    left: -1.5rem;
    width: 18px;
    height: 18px;
    top: 0;
}

.custom-radio .custom-control-input:checked~.custom-control-label::before {
    content: "";
    background: #FFFFFF;
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
    content: "";
    background: var(--bg-light-blue);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    top: 4px;
    left: -20px;
}

.custom-range::-webkit-slider-thumb {
    background: var(--primary-clr);
    width: 18px;
    height: 18px;
    margin-top: -7px;
}

.custom-range::-moz-range-thumb {
    background: var(--primary-clr);
    width: 18px;
    height: 18px;
    margin-top: -7px;
}

.custom-range::-ms-thumb {
    background: var(--primary-clr);
    width: 18px;
    height: 18px;
    margin-top: -7px;
}

.custom-range:focus::-webkit-slider-thumb {
    box-shadow: none;
    background: var(--primary-clr);
}

.custom-range:focus::-moz-range-thumb {
    box-shadow: none;
    background: var(--primary-clr);
}

.custom-range:focus::-ms-thumb {
    box-shadow: none;
    background: var(--primary-clr);
}

.custom-range::-webkit-slider-runnable-track {
    height: 4px;
    background-color: var(--border-color);
}

.custom-range::-moz-range-track {
    height: 4px;
    background-color: var(--border-color);
}

.custom-range::-ms-track {
    height: 4px;
    background-color: var(--border-color);
}

.link-style2 {
    text-decoration: underline;
    color: var(--primary-clr)
}

.label {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: var(--primary-clr);
}

.scroll-r-0.v-mcscrollbar>.mCSB_outside+.mCSB_scrollTools,
.swipe-category-listing .v-mcscrollbar .mCSB_outside+.mCSB_scrollTools,
.qrpanel-content.v-mcscrollbar .mCSB_outside+.mCSB_scrollTools {
    right: 0;
}

.minw-auto {
    min-width: auto !important;
}

.min-w-100 {
    min-width: 100% !important;
}

button:focus {
    outline: 0;
}

.tooltip-inner {
    background-color: var(--primary-clr);
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
}

.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: var(--primary-clr) !important;
}

.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: var(--primary-clr) !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: var(--primary-clr) !important;
}

.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: var(--primary-clr) !important;
}

.border {
    border-color: var(--border-color) !important;
}

.border-color2 {
    border: 1px solid var(--secondary-clr) !important;
}

.mb-05 {
    margin-bottom: 2px;
}

.mt-05 {
    margin-top: 2px;
}

.my-05 {
    margin-bottom: 2px;
    margin-top: 2px
}

.dropdown .btn .dnbicon-down-arrow,
.header-btn .dropdown-menu .selected-option-dropdown [class*="dnbicon-"] {
    font-size: 10px;
}

.dropdown .dropdown-toggle-split .dnbicon-down-arrow {
    width: 22px;
    color: var(--light-grey);
}

.input-h-40 {
    height: 40px;
}

.border-bottom {
    border-color: var(--border-color) !important;
}

.border-top {
    border-color: var(--border-color) !important;
}

.border-left {
    border-color: var(--border-color) !important;
}

.border-right {
    border-color: var(--border-color) !important;
}

.caption-style3 {
    font-size: 16px;
    line-height: 22px;
}

.modal-footer.bg-light,
.modal-footer {
    background: #f3f3f3 !important;
}

textarea.form-control.textarea-lg {
    height: 50vh;
    max-height: 443px;
}

/* header */
.tool-back {
    font-size: 19px;
    opacity: 0.82;
    line-height: 1;
}

.header-btn .btn [class*="dnbicon-"] {
    font-size: 16px;
}

.header-btn .btn .dnbicon-down-arrow {
    font-size: 12px;
}

.dnb-designtool header {
    background: var(--branding-color);
    height: 60px;
}

.nav-logo {
    max-width: 168px;
    cursor: pointer;
}

div#Text-Shape-Container img.img-fluid {
    max-width: 90%;
}

.mask-value svg path {
    stroke: var(--secondary-clr);
    stroke-width: 10px;
}

.header-btn .btn {
    background: var(--header-btn-bg);
    font-size: 14px;
    line-height: 24px;
    color: var(--white-clr);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.13);
}

.header-btn .btn-group>.btn-group:not(:first-child),
.header-btn .btn-group>.btn:not(:first-child) {
    margin-left: 0;
}

.header-btn .btn svg {
    vertical-align: middle;
}

.header-btn dnb-button>.dropdown>.btn .header-btn-caption,
.header-btn dnb-button>.dropdown>.btn [class*="dnbicon-"],
.header-btn dnb-button>.dropdown>.btn-group>.btn .header-btn-caption,
.header-btn dnb-button>.dropdown>.btn-group>.btn [class*="dnbicon-"] {
    /* opacity: 0.8; */
    color: var(--white-clr);
}

.header-btn .cart-btn.btn .header-btn-caption,
.header-btn .cart-btn.btn [class*="dnbicon-"] {
    opacity: 1;
}

.header-btn.user-account-btn .btn.border-left {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.remove-arrow.dropdown-toggle::after {
    display: none;
    border: 0;
}

.dropdown-label {
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    color: var(--primary-clr);
}

.share-dropdown li a {
    color: var(--dark-black);
    font-size: 14px;
    line-height: 20px;
}

.header-btn .dropdown-menu [class*="dnbicon-"] {
    font-size: 20px;
}
.header-btn .dropdown-menu .dnbicon-close {
    font-size: 11px;
}

.header-btn .share-dropdown.dropdown-menu [class*="dnbicon-"] {
    font-size: 24px;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item.focus,
.dropdown-item:focus {
    background-color: var(--dropdown-item-bg);
    color: var(--primary-clr);
}

.header-btn .btn.bg-light-blue {
    background: var(--bg-light-blue);
}

.addtocart-summary {
    min-width: 267px;
}

.size-varient .input-group {
    max-width: 106px;
}

.size-varient .input-group-prepend .input-group-text {
    width: 40px;
    border-color: var(--border-color);
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    color: var(--primary-clr);
}

.size-varient .form-control {
    color: var(--secondary-clr);
}

.cart-header label {
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    color: var(--primary-clr);
}

.size-header {
    /*min-width: 106px;*/
    min-width: 50px;
}

.pro-qty {
    line-height: 20px;
    color: var(--secondary-clr);
}

.pro-price {
    line-height: 21px;
}

.avg-label {
    line-height: 20px;
    color: var(--secondary-clr);
}

.cart-varient-table {
    font-size: 14px;
    font-weight: normal;
}

.avg-print-price {
    line-height: 21px;
}

.summary-total {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
}

.total-price {
    font-weight: 700;
}

.addnotes .form-control {
    color: var(--primary-clr);
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
}

/* main content */
.main-content {
    height: calc(100vh - 60px);
}

/* leftnav bar */
.leftnav-tabs {
    background: var(--dark-grey-clr);
    padding: 8px 0;
    max-height: calc(100vh - 60px);
    z-index: 2;
    overflow-x: hidden;
}

.leftnav-tabs.light-v-scrollbar .mCSB_outside+.mCSB_scrollTools {
    right: -6px;
    overflow: hidden;
}

.tab-caption {
    font-weight: 600;
    font-size: 11.5px;
    line-height: 13px;
    color: var(--white-clr);
    /* word-break: break-word; */
}

.nav-tab-box {
    height: 72px;
    width :72px;
    /*width: 66px;*/
    opacity: 0.7;
}

.nav-tab-box .tab-icon {
    opacity: 0.6;
}

.leftnav-tab-content {
    width: 274px;
    border-color: var(--border-color) !important;
    margin-left: 0;
    -webkit-transition: margin-left 0.3s ease-in-out 0.3s;
    -moz-transition: margin-left 0.3s ease-in-out 0.3s;
    transition: margin-left 0.3s ease-in-out 0.3s;
    box-shadow: 1px 0px 4px rgba(141, 173, 227, 0.2);
}

.leftnav-tab-content.hide-left-nav {
    margin-left: -274px;
    -webkit-transition: margin-left 0.3s ease-in-out 0.3s;
    -moz-transition: margin-left 0.3s ease-in-out 0.3s;
    transition: margin-left 0.3s ease-in-out 0.3s;
}

.leftnav-tabs .nav-link.active {
    /* border-left: 6px solid var(--dark-grey-clr); removed to stop changing size of design area */
}

.leftnav-tabs .nav-link.active .nav-tab-box {
    background: var(--white-clr);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.nav-link.active .nav-tab-box .tab-caption {
    color: var(--dark-grey-clr);
}

.leftnav-tabs .tab-icon [class*="dnbicon-"] {
    font-size: 24px;
    color: var(--white-clr);
}

.tab-icon svg,
.nav-tab-box .tab-icon svg path {
    fill: var(--white-clr);
    color: var(--white-clr);
}

.leftnav-tabs .nav-link.active .tab-icon [class*="dnbicon-"],
.nav-link.active .nav-tab-box .tab-icon svg,
.nav-link.active .nav-tab-box .tab-icon svg path {
    fill: var(--dark-grey-clr);
    color: var(--dark-grey-clr);
}

.nav-link:hover .nav-tab-box,
.nav-link .nav-tab-box:hover,
.nav-link.active .nav-tab-box,
.nav-link.active .nav-tab-box .tab-icon,
.nav-tab-box:hover .tab-icon,
.nav-link:hover .nav-tab-box .tab-icon {
    opacity: 1;
}

.canvas-area-wrapper {
    background: var(--tool-btn-active);
}

.panel-heading {
    min-height: 48px;
    border-color: var(--border-color) !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--secondary-clr);
}

/* qr code panel */
#codesPanel .accordion,
.qrpanel-content {
    max-height: calc(100vh - 148px);
}

.accordion .card-header .card-title:before {
    content: "\e955";
    font-family: 'dnbicons';
    font-size: 10px;
    right: 0;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    color: var(--light-grey);
}

.accordion .card-header .card-title.collapsed:before {
    content: "\e972";
}

.accordion-caption {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: var(--primary-clr);
}

.acc-icon,
.acc-icon svg,
.acc-icon svg path {
    fill: var(--secondary-clr);
    opacity: 0.8;
    font-size: 20px;
    color: var(--secondary-clr);
}

.cursor-pointer,
.accordion .card-header {
    cursor: pointer;
}

.panel-label {
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    color: var(--primary-clr);
}

.recently-added-image-list img {
    height: 100px
}

.input-group-prepend .input-group-text {
    border-color: var(--border-color);
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    color: var(--primary-clr);
}

.caption-style2,
.form-group label {
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    color: var(--primary-clr);
}

.dnb-btn {
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
}

.color-box,
.color-picker,
.slide-topnav-arrow .btn {
    width: 40px;
    height: 40px;
    line-height: 38px;
    cursor: pointer;
}

.color-picker [class*="dnbicon-"] {
    font-size: 18px;
    line-height: 1;
}

.choose-color-block .form-control {
    /* width: calc(100% - 88px); */
    flex: 1;
}

/* layer panel  */
.layer-row.disabled {
    opacity: 0.5;
}

.layer-row:hover {
    background: #EAF1F4;
}

.layer-row.disabled:hover {
    background: rgba(0, 0, 0, 0);
}

.layer-item {
    flex: 1;
    width: calc(100% - 125px);
}

.layer-name {
    line-height: 16px;
    max-width: calc(100% - 30px);
    user-select: none;
}

.layer-actions {
    font-size: 15px;
}

.layer-action-btn {
    visibility: hidden;
}

.layer-row:hover .layer-action-btn {
    visibility: visible;
}

.cursor-move {
    cursor: move;
}

.layer-icon {
    font-size: 16px;
}

.cursor-move.disabled {
    cursor: no-drop;
}

/* bottom panel */
.bottom-panel {
    bottom: 32px;
    right: 32px;
    z-index: 1;
}

.preview-btn .btn {
    font-size: 20px;
    line-height: 1;
}

.zoom-option-btn {
    color: var(--secondary-clr);
}

.zoom-btns:hover,
.zoom-option-btn:hover {
    color: var(--primary-clr);
}

.zoom-option-btn [class*="dnbicon-"] {
    font-size: 12px;
    color: var(--secondary-clr);
}

.zoom-btns {
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    color: var(--secondary-clr);
}

.zoom-option-btn:focus {
    box-shadow: none;
}

.zoom-block {
    min-width: 145px;
}

.zoom-option-dropdown .dropdown-menu {
    min-width: 100%;
}

.selected-option-dropdown .dropdown-menu ul a {
    color: var(--primary-clr);
    line-height: 20px;
    position: relative;
    font-size: 14px;
    user-select: none;
}

.selected-option-dropdown .dropdown-menu ul li.active a {
    font-weight: bold;
}

.selected-option-dropdown .dropdown-menu ul li.active a:after {
    content: "\e98f";
    font-family: 'dnbicons';
    font-size: 12px;
    float: right;
}

.modal-title {
    font-weight: 600;
    font-size: 20px;
    /*line-height: 24px;*/
    line-height: 1;
}

.modal-content .modal-header .close {
    opacity: 1;
    margin-top: -8px;
    text-shadow: none;
}

/* name number panel */
.delete-list-row .btn {
    line-height: 1;
    font-size: 13px;
}

.btn-light-pink {
    background: #FFEEEE;
}

.size-list-column select.form-control {
    background-position: right center;
    padding-right: 10px !important;
}

.no-list-column .form-control {
    width: 47px;
}

.name-list-column .form-control {
    width: 87px;
}

.nameno-list-row .form-control {
    font-size: 13px;
}

.nameno-actions .btn {
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: var(--secondary-clr);
    border-color: var(--border-color);
}

.rotate45,
.nameno-actions .btn [class*="dnbicon-"] {
    font-weight: 900;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    display: inline-block;
}

hr {
    border-color: var(--border-color);
}

.download-sample-csv label {
    font-size: 13px;
}

.link-text,
.download-sample-csv a {
    text-decoration: underline;
    color: var(--primary-color);
}

.grag-drop-label {
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    opacity: 0.6;
}

.upload-file-item [class*="dnbicon-"] {
    font-size: 25px;
}

.only-icon .upload-file-item [class*="dnbicon-"] {
    font-size: 25px;
}

.only-icon .upload-file-item {
    min-height: auto;
    background: transparent;
    height: 40px;
}

.upload-file-item {
    background: var(--border-color);
    min-height: 102px;
}

.option-block.only-icon {
    width: 40px;
    display: inline-block;
}

.only-icon .upload-file-block {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    height: 40px;
    margin-bottom: 0;
}

.upload-file-block {
    border: 1px dashed var(--secondary-clr);
}

.dnb-tabs .nav-item .nav-link {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: var(--secondary-clr);
    margin-bottom: -1px;
}

.dnb-tabs .nav-item .nav-link.active {
    border-bottom: 2px solid var(--branding-color);
    color: var(--branding-color);
}

.toggle-switch .custom-control-label {
    cursor: pointer;
    color: #ff000000;
}

.custom-switch.toggle-switch .custom-control-label::before {
    width: 38px;
    height: 14px;
    box-shadow: none;
    background: #E3E3E3;
    border-color: #E3E3E3;
    top: 0.25rem;
}

.toggle-switch .custom-control-input:checked~.custom-control-label::before {
    border-color: var(--bg-light-blue);
    background-color: var(--bg-light-blue);
}

.custom-switch.toggle-switch .custom-control-label::after {
    height: 22px;
    width: 22px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    top: 0;
    left: -38px;
    background: var(--white-clr);
}

.custom-switch.toggle-switch .custom-control-input:checked~.custom-control-label::after {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}

.split-input-group .input-group-text.label-style2,
.form-group label.label-style2,
.label-style2,
.namenumber-price {
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    color: var(--secondary-clr);
}

.side-image {
    max-width: 26px;
    padding-top: 2px;
}

.side-selection {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
}

.side-selection.active,
.select-side-radio [type="radio"]:checked+.side-selection {
    border-radius: 10px;
    background: #F9F9F9;
    border: 1px solid #EBEBEB;
}

.select-side-radio .custom-control-input {
    height: 0;
    width: 0;
    left: -999px;
}

.select-side-block.disabled {
    opacity: 0.5;
    cursor: no-drop;
}

.select-side-block.disabled * {
    cursor: no-drop;
}

.leftnav-tab-content .name-number-block .tab-content>.tab-pane {
    height: calc(100vh - 170px);
}

#customOptionContainer .cart-summary {
    padding: 0 !important;
}

#customOptionContainer .addtocart-summary {
    min-width: 100%;
}

/* setting panel */
.pro-color {
    width: 40px;
    height: 40px;
}

.pro-color-varient {
    overflow: hidden;
}

.pro-colorpalette-wrapper {
    max-width: 100%;
}

.product-color-palette {
    white-space: nowrap;
}

.pro-colorpalette-wrapper.v-mcscrollbar {
    max-height: 144px;
}

.pro-colorpalette-wrapper.v-mcscrollbar .product-color-palette {
    white-space: normal;
}

.pro-colorpalette-wrapper.v-mcscrollbar .pro-color-varient {
    float: left;
    margin-bottom: 8px;
}

.h-mcscrollbar .mCSB_horizontal.mCSB_inside>.mCSB_container {
    margin-bottom: 10px;
}

.filter-caption,
.product-discription p {
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
}

.table-heading {
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: var(--secondary-clr);
}

.price-info-table td {
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #000000;
    opacity: 0.7;
}

.row-highlight,
.row-highlight>td,
.row-highlight>th {
    background-color: var(--border-color);
}

.form-group label.font-size-12,
.font-size-12 {
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
}

.swipe-panel {
    background: var(--white-clr);
    /* height: calc(100vh - 108px); */
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    transition: left 300ms ease-in-out;
    z-index: 2;
}

.swipe-panel.collapsing {
    transition: left 300ms ease-in-out;
}

.swipe-panel.show {
    left: 0;
    transition: left 300ms ease-in-out;
}

.leftnav-tab-content .tab-content {
    /* overflow-x: hidden; */
}

.swipe-back-link {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: var(--primary-clr);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.choose-product-action {
    bottom: 0;
}

.tab-panel-content {
    z-index: 1;
    max-height: calc(100vh - 108px);
}
#layersPanel .tab-panel-content {
    max-height: calc(100vh - 108px);
}

.rightpanel-hide-btn,
.leftpanel-hide-btn {
    /*top: 13%;*/
    top: 170px;
    display: inline-block;
    z-index: 1;
}

.rightpanel-hide-btn {
    right: 100%;
    transform: rotate(90deg) translateY(-37px);
}

.leftpanel-hide-btn {
    left: 100%;
    transform: rotate(90deg) translateY(37px);
}

.rightnav-toogle-btn,
.leftnav-toogle-btn {
    background: var(--white-clr);
    width: 100px;
    height: 24px;
    border-right: none;
    border-left: none;
    font-size: 12px;
}

.rightnav-toogle-btn {
    border-bottom: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.leftnav-toogle-btn {
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #909090;
}

.rightnav-toogle-btn:before,
.rightnav-toogle-btn:after,
.leftnav-toogle-btn:before,
.leftnav-toogle-btn:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0px;
}

.rightnav-toogle-btn:before,
.rightnav-toogle-btn:after {
    border-top: 18px solid #fff;
}

.leftnav-toogle-btn:before,
.leftnav-toogle-btn:after {
    border-bottom: 18px solid #fff;
}

.rightnav-toogle-btn:before,
.leftnav-toogle-btn:before {
    left: -12px;
    border-left: 13px solid transparent;
}

.rightnav-toogle-btn:after,
.leftnav-toogle-btn:after {
    right: -12px;
    border-right: 13px solid transparent;
}

.rightnav-toogle-btn:focus,
.leftnav-toogle-btn:focus {
    outline: none;
}

/* toolbar topnav */
.topnav {
    background-color: var(--white-clr);
    min-height: 48px;
    box-shadow: 0px 1px 4px rgba(141, 173, 227, 0.2);
}

.tool-top-btn,
.tool-top-btn [class*="dnbicon-"] {
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.tool-top-btn [class*="dnbicon-"] {
    line-height: 32px;
}

.toptool-right .delete-actions .btn {
    line-height: 1;
}

.printarea-box {
    min-height: 47px;
}

.opacity-7 {
    opacity: 0.7;
}

.opacity-5 {
    opacity: 0.5;
}

.down-arrow-icon {
    color: var(--light-grey);
    font-size: 11px;
}

.quicktoolbar .label.btn {
    line-height: 26px;
}

.quicktoolbar .dropdown-menu {
    min-width: 248px;
}

.caption {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: var(--primary-clr);
}

.quicktoolbar .dropdown-menu [class*="dnbicon-"] {
    font-size: 20px;
    color: var(--primary-clr);
}

.align-to-box .form-control {
    flex: 1;
    height: auto;
}

.delete-btn [class*="dnbicon-"] {
    font-size: 20px;
    color: #999999;
}

dropdown-item small {
    color: var(--secondary-clr);
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
}

kbd {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    background: var(--border-color);
    color: #000000;
}

.design-instruction .square {
    width: 20px;
    height: 20px;
}

.design-instruction .label:after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    background-color: #000;
    left: 100%;
    width: 48px;
}

.btn.btn-outlined {
    background: rgba(0, 0, 0, 0);
    border-color: #E8E8E8;
}

.tool-help .btn.btn-outlined {
    border-color: var(--border-color);
    line-height: 22px;
}

.grid-dropdown,
.printarea-box.print-area-mobile {
    right: 24px;
    z-index: 1;
}

.dropdown-menu .toggle-switch [class*="dnbicon-"] {
    font-size: 20px;
}
.printarea-box.print-area-mobile .btn {
    margin-top: .5rem;
    padding: .5rem;
    border: 1px solid var(--border-color) !important;
}
.grid-dropdown .dropdown-menu:after,
.grid-dropdown .dropdown-menu:before,
.printarea-box.print-area-mobile .dropdown-menu:after,
.printarea-box.print-area-mobile .dropdown-menu:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 20px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    display: inline-block;
}

.grid-dropdown .dropdown-menu:before,
.printarea-box.print-area-mobile .dropdown-menu:before {
    top: -9px;
    border-bottom: 11px solid #fff;
    z-index: 0;
}

.grid-dropdown .dropdown-menu:after,
.printarea-box.print-area-mobile .dropdown-menu:after {
    top: -11px;
    z-index: -1;
    border-bottom: 11px solid var(--border-color);
}

/* text panel */
#textPanel .tab-panel-content {
    max-height: calc(100vh - 108px);
}

/*.add-heading-item{
    height: 32px;   
}*/
.bg-highlight-blue {
    background-color: var(--add-heading-bg);
}

.add-heading {
    font-weight: 800;
    line-height: 1;
    font-size: 28px;
}

.add-pera,
.add-subheading {
    font-weight: normal;
    font-size: 16.9231px;
}

.add-subheading {
    line-height: 1;
}

.add-pera {
    line-height: 20px;
}

.add-bodytext {
    font-weight: normal;
    line-height: 1;
    font-size: 12px;
}

.two-column-items,
#artPanel .three-column-items,
.art-img-wrapper .three-column-items {
    margin-left: -4px;
    margin-right: -4px;
}

.two-column,
#artPanel .three-column,
.art-img-wrapper .three-column {
    padding: 0 4px;
    width: calc(100% / 2);
    text-align: center;
}

.text-combination-box {
    background-color: #F7E5FF;
    width: 100%;
    height: 113px;
    min-width: 113px;
}

.text-combination-box img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.text-combination-wrapper.v-mcscrollbar {
    height: 200px;
    /*max-height: calc(100vh - 665px);*/
}

.v-mcscrollbar .mCSB_outside+.mCSB_scrollTools {
    right: -16px;
    overflow: hidden;
}

/* background panel */

.two-column img,
#artPanel .three-column img,
.art-img-wrapper .three-column img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

.image-gallery-item:hover:after,
.background-img-box:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(199.49deg, rgba(242, 242, 242, 0) -9.92%, #1B3A69 106.23%);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: .25rem !important;
    pointer-events: none;
}

.gallery-progress.progress {
    left: 15px;
    right: 15px;
    height: 15px;
    font-size: 11px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    top: 50%;
    margin-top: -7px;
}

.gallery-progress .progress-bar {
    background: #44D397;
    border-radius: 8px;
}

.more-option {
    top: 8px;
    right: 8px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.image-gallery-item:hover .more-option,
.background-img-box .more-option {
    opacity: 1;
    pointer-events: all;
}

.more-option .btn {
    width: 30px;
    height: 30px;
    font-size: 16px;
}

.more-option li,
.more-option li a {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    font-family: 'Open Sans', sans-serif;
    color: var(--primary-color);
}

input.btn.border-top.border-left.border-bottom.border-right-0.shadow-none.w-100.text-left.input-h-40.name{
    color: var(--primary-clr);
}

button.btn.p-0.shadow-none.d-flex.align-items-center.justify-content-center.mr-2.mb-2 {
    color: var(--primary-clr);
}

.more-option li a [class*="dnbicon-"] {
    color: var(--secondary-clr);
}

.more-option .dropdown-menu:before,
.more-option .dropdown-menu:after {
    content: "";
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    width: 0;
    height: 0;
    position: absolute;
    left: 28px;
    border-bottom: 11px solid #fff;
    display: none;
    border: none;
}

.more-option .dropdown-menu:before {
    top: -8px;
    z-index: 1;
    border-bottom-color: #FFFFFF;
}

.more-option .dropdown-menu:after {
    border-bottom-color: var(--border-color);
    top: -9px;
    z-index: 0;
}

.no-background-img {
    max-width: 113px;
    max-height: 105px;
    background: var(--border-color);
    width: 100%;
    height: 100%;
}

.tool-btn-group .btn {
    width: 32px;
    height: 32px;
    font-size: 15px;
    border-color: var(--border-color)
}

.tool-btn-group .btn svg {
    width: 100%;
    height: 100%;
}

.tool-btn-group .btn svg path {
    stroke: #000000;
    stroke-width: 5;
}

.special-character-content .btn {
    width: 40px;
    height: 40px;
    font-size: 15px;
    border-color: var(--border-color)
}

/* edit panel */
#editPanel .tab-panel-content {
    max-height: calc(100vh - 108px);
}

.edit-panel-collapse.accordion>.card,
#editPanelAccordion.accordion>.card {
    overflow: visible;
}

.update-effect {
    min-width: 117px;
}

.proportionate-object {
    font-size: 16px;
    color: var(--primary-clr);
}

.text-shape-size {
    max-width: 56px;
}

.rotate-object-box .form-control {
    max-width: 47px;
}

.mask-value svg {
    width: 16px;
    height: 16px;
}

#imageEffectPopup .modal-dialog.modal-lg,
image-editor .modal-dialog.modal-lg {
    max-width: 880px;
}

.image-effect-preview {
    background: var(--tool-btn-active);
    min-height: 480px;
}

.three-column-row {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
}

.three-column {
    width: calc(100% / 3);
}

.filter-img svg {
    max-height: 65px;
}

.filter-img svg image {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
}

.filter-item.active .filter-img:after {
    content: "\e98f";
    font-family: 'dnbicons';
    color: #ffffff;
    font-size: 24px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -20px;
    background: rgba(50, 50, 50, 0.52);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
}

.filter-item.active .filter-img:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.67);
    position: absolute;
    top: 0;
    left: 0;
}

.image-quality-block img {
    width: 20px;
}

.image-quality-info {
    font-size: 16px;
    color: var(--secondary-clr);
}

.selected-option-dropdown .dropdown-menu [class*="dnbicon"] {
    font-size: 17px;
    font-style: normal;
}

.split-input-group .input-group-text {
    font-size: 20px;
}

.dnbicon-dotted-stroke,
.dnbicon-dashed-stroke,
.dnbicon-dot-dash-stroke,
.selected-option-dropdown .dropdown-menu .dnbicon-dotted-stroke,
.selected-option-dropdown .dropdown-menu .dnbicon-dashed-stroke,
.selected-option-dropdown .dropdown-menu .dnbicon-dot-dash-stroke {
    font-size: 2px;
}

.dialog-icon {
    font-size: 42px;
    line-height: 1;
}

.dialog-msg p,
.dialog-msg {
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: var(--secondary-clr);
}

.dialog-icon .dnbicon-info {
    color: var(--primary-clr);
    font-weight: 600;
}

.common-dialog-box .dnb-btn {
    min-width: 130px;
}

.border-danger {
    border-color: red !important;
}
print-quality .image-quality-block {
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
}
/* art panel */
.swipe-category-listing.v-mcscrollbar {
    max-height: calc(100vh - 291px);
}

.art-img-box {
    width: 100%;
    height: 113px;
    background: var(--two-col-bg);
    padding: 5px;
}

.swipe-category-listing .dnbicon-right-arrow {
    color: var(--light-grey);
    font-size: 10px;
}

#artPanel category-list .swipe-category-listing{
    height: calc(100vh - 292px);
}
#artPanel category-list category-panel .image-wrapper{
    height: calc(100vh - 322px);
}

/* layout panel */
#layoutPanel .image-wrapper.v-mcscrollbar,
.layouts-wrapper.v-mcscrollbar {
    /* max-height: calc(100vh - 400px); */
}

/* designs panel */
.designs-image-list img {
    height: 105px;
    width: auto;
}

/* #designsPanel .swipe-category .swipe-panel{
    max-height: calc(100vh - 370px);
} */
.designs-img-box {
    max-height: 118px;
}

/* vdp popup */
.vdp-action-buttons .btn.btn-light {
    background-color: #dddddd;
    border: 1px solid #E8E8E8;
}

.vdp-uploaded-img .delete-image {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    display: none;
}

.vdp-uploaded-img:hover .delete-image {
    opacity: 1;
    /*display: block;*/
}

.vdp-uploaded-img {
    width: 40px;
    height: 40px;
    display: inline-block;
}

.vdp-uploaded-img .image-container img {
    width: 100%;
}

#vdpPanel .table-responsive {
    height: calc(100vh - 270px);
}

.con {
    width: 100%;
    height: 100%;
}

.con img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#vdpPanel .modal-body {
    /*min-height: 516px;*/
}

.default-icon-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border: 1px solid var(--border-color);
}

.delete-image .btn-light-pink {
    background: rgba(255, 238, 238, 0.9);
}

.delete-row .btn:hover,
.delete-vdp-row .btn:hover {
    background: #FFEEEE;
    border-color: var(--border-color);
    color: var(--text-red);
}

.previous-page,
.next-page {
    width: 32px;
    height: 32px;
}

.paginatin-list .form-control {
    max-width: 40px;
}

.import-data-item .upload-file-block {
    max-width: 234px;
}

.upload-file-block.disabled {
    opacity: 0.5;
}

.upload-file-block.disabled .upload-file-item {
    cursor: no-drop;
}

.import-vdp-data-wrapper {
    counter-reset: data-counter;
}

.import-data-item:before {
    background: rgba(38, 42, 65, 0.1);
    width: 30px;
    height: 30px;
    counter-increment: data-counter;
    content: counter(data-counter);
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 30px;
    margin-right: 16px;
    vertical-align: middle;
    margin-top: -6px;
    position: absolute;
    left: 0;
}

.carousel-inner {
    position: relative;
    width: 100%;
    max-height: 66vh;
    overflow: hidden;
    max-width: 100%;
}

.slide-show {
    width: 125px;
}

.slide-show [class*="dnbicon-"] {
    font-size: 32px;
}

/* duplicate page popup */
.duplicate-page-item {
    background: var(--two-col-bg);
}

.duplicate-page-item [class*="dnbicon-"] {
    color: var(--secondary-clr);
    font-size: 22px;
}

.dupliate-page-column {
    width: calc((100% / 4) - 0.5rem);
}

/* photo panel */
#photosPanel .tab-panel-content {
    max-height: calc(100vh - 162px);
}

.more-image-option>.dropdown-menu {
    min-width: 230px;
}

.image-gallery {
    /* display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 10px;
    max-height: 100vw; */
    columns: 2;
    column-gap: 5px;
}

.image-gallery-item {
    /* width: 50%;
    padding: 5px; */
    /* margin-bottom: 8px;
    display: inline-block; */
    width: 100%;
    display: inline-block;
}

#albumTab .pagination-wrapper {
    width: 100%;
}

img.float-left.align-top {
    width: 100%;
}

#stockPhotosCnt .image-gallery-grid-wrapper {
    max-height: calc(100vh - 235px);
}

.album-list-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(199.49deg, rgba(242, 242, 242, 0) -9.92%, #1B3A69 106.23%);
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.album-name {
    bottom: 12px;
    display: block;
    text-align: center;
    left: 5px;
    right: 5px;
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.create-album {
    background-color: var(--border-color);
    padding-top: 5px;
}

.create-album:before {
    background: none;
    display: none;
}

.plus-icon {
    width: 36px;
    height: 36px;
    font-size: 27px;
}

.hover-delete {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.74);
    right: 8px;
    top: 8px;
    opacity: 0
}

.album-list-box:hover .hover-delete {
    opacity: 1
}

#myAlbumsTabCnt .swipe-panel {
    height: calc(100vh - 162px);
}

.upload-image-gallery-item.image-gallery-item:hover:after {
    width: 0;
    height: 0;
    background: none;
}

/*pages right sidebar*/
.badge {
    background: var(--border-color);
    line-height: 1;
}

.rightsidebar-wrapper {
    width: 254px;
    margin-right: -254px;
    -webkit-transition: margin-right 0.3s ease-in-out 0.3s;
    -moz-transition: margin-right 0.3s ease-in-out 0.3s;
    transition: margin-right 0.3s ease-in-out 0.3s;
    background: var(--white-clr);
    border-color: var(--border-color) !important;
    height: calc(100vh - 108px);
    box-shadow: -1px 0px 4px rgba(141, 173, 227, 0.2);
}

.rightsidebar-wrapper.show {
    margin-right: 0;
    -webkit-transition: margin-right 0.3s ease-in-out 0.3s;
    -moz-transition: margin-right 0.3s ease-in-out 0.3s;
    transition: margin-right 0.3s ease-in-out 0.3s;
}

.design-area-block {
    flex: 1;
    overflow: hidden;
}

.right-sidebar-list-wrapper {
    max-height: calc(100vh - 172px);
}

page-item.right-sidebar-item iframe {
    box-shadow: 0 0 5px rgb(0 0 0 / 15%);
}

/* .right-sidebar-list {
    counter-reset: pages-counter;
}
.page-list-count:before {
    counter-increment: pages-counter;
    content: counter(pages-counter);
} */
.right-sidebar-item.active img,
page-item.right-sidebar-item.active iframe {
    /* border: 3px solid var(--branding-color); */
}

page-item.right-sidebar-item.active iframe {
    box-shadow: 0 0 0px 3px var(--branding-color);
}

.rightsidebar-block .page-heading .badge {
    min-width: 22px;
    padding: 0 2px;
    text-align: center;
    min-height: 22px;
    line-height: 22px;
}

.right-sidebar-item img {
    box-shadow: 0px 2px 4px 0px #000000 12%;
}

.canvas-wrapper {
    overflow: hidden;
}

.canvas-work-area {
    height: calc(100vh - 108px);
}

.canvas-pages-btn .btn {
    background: var(--border-color);
}

.canvas-pages-btn .btn.collapsed {
    background: rgba(0, 0, 0, 0);
}

.canvas-slide-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid #E8E8E8;
    background-color: var(--white-clr);
    color: var(--light-grey);
    font-size: 16px;
    line-height: 40px;
    top: 50%;
    margin-top: -20px;
}

.canvas-slide-arrow.next-item {
    right: 26px;
}

.canvas-slide-arrow.previous-item {
    left: 26px;
}

.canvas-page-number {
    border: 1px solid #DBDCDE;
    min-width: 80px;
    padding: 2px;
    border-radius: 3px;
}

.canvas-product-size {
    font-size: 11px;
    line-height: 15px;
    position: absolute;
}

.full-image-upload .upload-file-item {
    height: calc(100% - 8px);
}

.choose-image-block .album-image {
    width: 113px;
    height: 105px;
}

.choose-image-block .image-gallery {
    grid-template-columns: auto auto auto auto;
}

.choose-image-block .swipe-panel {
    height: 100%;
}

.choose-image-block {
    overflow: hidden;
    padding-left: 0 !important;
}

.dnbicon-close {
    font-size: 11px;
}

.add-more-pages .dnbicon-close {
    font-size: 9px;
    line-height: 1;
    vertical-align: middle;
}

#multieditor-container {
    height: 50vh;
    max-height: 443px;
    border: 1px solid #cccccc;
    border-radius: 5px;
}

/* pre loader */
.preloader-wrapper {
    background: rgba(255, 255, 255, 0.7);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

@-webkit-keyframes animation-loader-box1 {
    0% {
        right: 0;
        left: 0;
        top: 0;
        bottom: 92px
    }

    4.15% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    20.75% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    24.9% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 0
    }

    29.05% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    45.65% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    49.8% {
        right: 0;
        left: 0;
        top: 106px;
        bottom: 0
    }

    53.95% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    70.55% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    74.7% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 0
    }

    78.85% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    95.45% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    to {
        right: 0;
        left: 0;
        top: 0;
        bottom: 92px
    }
}

@keyframes animation-loader-box1 {
    0% {
        right: 0;
        left: 0;
        top: 0;
        bottom: 92px
    }

    4.15% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    20.75% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    24.9% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 0
    }

    29.05% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    45.65% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    49.8% {
        right: 0;
        left: 0;
        top: 106px;
        bottom: 0
    }

    53.95% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    70.55% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    74.7% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 0
    }

    78.85% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    95.45% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    to {
        right: 0;
        left: 0;
        top: 0;
        bottom: 92px
    }
}

@-webkit-keyframes animation-loader-box2 {
    0% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    4.15% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    8.3% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 0
    }

    12.45% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    29.05% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    33.2% {
        right: 0;
        left: 0;
        top: 0;
        bottom: 92px
    }

    37.35% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    53.95% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    58.1% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 0
    }

    62.25% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    78.85% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    83% {
        right: 0;
        left: 0;
        top: 106px;
        bottom: 0
    }

    87.15% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    to {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }
}

@keyframes animation-loader-box2 {
    0% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    4.15% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    8.3% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 0
    }

    12.45% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    29.05% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    33.2% {
        right: 0;
        left: 0;
        top: 0;
        bottom: 92px
    }

    37.35% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    53.95% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    58.1% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 0
    }

    62.25% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    78.85% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    83% {
        right: 0;
        left: 0;
        top: 106px;
        bottom: 0
    }

    87.15% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    to {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }
}

@-webkit-keyframes animation-loader-box3 {
    0% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    12.45% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    16.6% {
        right: 0;
        left: 0;
        top: 106px;
        bottom: 0
    }

    20.75% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    37.35% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    41.5% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 0
    }

    45.65% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    62.25% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    66.4% {
        right: 0;
        left: 0;
        top: 0;
        bottom: 92px
    }

    70.55% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    87.15% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    91.3% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 0
    }

    95.45% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    to {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }
}

@keyframes animation-loader-box3 {
    0% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    12.45% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    16.6% {
        right: 0;
        left: 0;
        top: 106px;
        bottom: 0
    }

    20.75% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    37.35% {
        right: 106px;
        left: 0;
        top: 106px;
        bottom: 0
    }

    41.5% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 0
    }

    45.65% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    62.25% {
        right: 106px;
        left: 0;
        top: 0;
        bottom: 92px
    }

    66.4% {
        right: 0;
        left: 0;
        top: 0;
        bottom: 92px
    }

    70.55% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    87.15% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 92px
    }

    91.3% {
        right: 0;
        left: 92px;
        top: 0;
        bottom: 0
    }

    95.45% {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }

    to {
        right: 0;
        left: 92px;
        top: 106px;
        bottom: 0
    }
}

.preloader {
    height: 180px;
    width: 180px;
    box-sizing: border-box;
    position: relative;
    align-self: center;
}

.preloader [class^=loader-box] {
    border: 12px solid var(--branding-color);
    box-sizing: border-box;
    position: absolute;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

.preloader .loader-box1 {
    border-color: var(--branding-color);
    background-color: var(--branding-color);
    -webkit-animation-name: animation-loader-box1;
    animation-name: animation-loader-box1
}

.preloader .loader-box2 {
    border-color: var(--light-grey);
    -webkit-animation-name: animation-loader-box2;
    animation-name: animation-loader-box2
}

.preloader .loader-box3 {
    border-color: var(--primary-clr);
    -webkit-animation-name: animation-loader-box3;
    animation-name: animation-loader-box3
}

.pre-loader-block {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

/* merchandise product varients */
.product-color-list,
.product-sides-list {
    width: 225px;
}
.product-color-panel, 
.product-layers-panel, 
.product-sides-panel {
    right: calc(-225px + 56px);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    border-radius: 8px 0px 0px 8px;
    -webkit-transition: right 0.3s ease-in-out 0.3s;
    -moz-transition: right 0.3s ease-in-out 0.3s;
    transition: right 0.3s ease-in-out 0.3s;
}
.product-sides-panel {
    bottom: calc(128px * 2);
}
.product-layers-panel {
    bottom: calc(128px * 3);
}
.product-color-panel {
    bottom: 128px;
}
.show-hide-color,
.show-hide-sides {
    font-size: 10px;
    left: -11px;
    position: absolute;
    top: 34px;
    width: 18px;
    height: 37px;
    color: #959595;
    border-radius: 8px 0px 0px 8px;
    -webkit-transition: right 0.3s ease-in-out 0.3s;
    -moz-transition: right 0.3s ease-in-out 0.3s;
    transition: right 0.3s ease-in-out 0.3s;
}
.product-color-panel.active,
.product-layers-panel.active,
.product-sides-panel.active {
    right: 0;
    -webkit-transition: right 0.3s ease-in-out 0.3s;
    -moz-transition: right 0.3s ease-in-out 0.3s;
    transition: right 0.3s ease-in-out 0.3s;
}
.product-color-panel .pro-color,
.product-layers-panel .pro-color,
.product-sides-panel .pro-color {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.23);
    border: 2px solid #FFFFFF;
    width: 35px;
    height: 35px;
}

.product-sides-panel .side-selection {
    height: 57px;
}

/* cart review */
.proceed-btn {
    min-width: 133px;
}

.canvas-area-wrapper {
    overflow: hidden;
}

.preview-image-list .canvas-slide-arrow.previous-item {
    left: 0;
}

.preview-image-list .canvas-slide-arrow.next-item {
    right: 0;
}

.para-text-edit-panel .tool-btn-group .btn {
    width: 40px;
    height: 40px;
}

.cart-summary-dropdown.show {
    display: block !important;
}

.printarea-box .label {
    white-space: nowrap;
}

.print-area-mobile .dnbicon-printing-area {
    font-size: 21px;
}

/* image overlay popup */
.full-image-upload-wrapper {
    border-right: 1px solid var(--border-color);
}

.no-recent {
    background: var(--border-color);
}

/* color picker */
body .jGraduate_Picker {
    background: #ffffff;
    padding: 12px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    border: none;
}

body table.jPicker {
    background-color: rgba(0, 0, 0, 0);
    border: none;
}

.jPicker .Button .Grid {
    margin-bottom: 8px;
    background-image: none !important;
    white-space: nowrap;
    overflow-x: auto;
    max-width: 392px;
    width: 100%;
    padding: 5px 0 10px;
}

.picker-color-buttons {
    background: #f3f3f3;
    margin-left: -12px;
    margin-bottom: -12px;
    margin-right: -12px;
    text-align: right;
}

div.jPicker .Grid span[class="QuickColor"] {
    width: 44px;
}

div.jPicker .Grid span.QuickColor {
    width: 44px;
    border-radius: 3px;
    border: none;
    margin-right: 6px;
    height: 32px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

div.jPicker .Preview div {
    border: 1px solid #ddd;
    width: auto;
    height: auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: start;
    justify-content: start;
    /*background-image: none !important;*/
    border-radius: 4px;
    float: left;
    clear: both;
    overflow: hidden;
}

div.jPicker .Preview div span {
    height: 29px;
    width: 45px;
    float: left;
    border: none;
}

.color-texts {
    display: block;
    float: left;
    width: 43px;
    text-align: left;
    font-size: 11px;
    text-transform: capitalize;
}

div.jPicker .Preview {
    padding-bottom: 15px;
    padding-top: 13px;
}

div.jPicker td.Text input {
    height: 32px;
    border: 1px solid #DAE6EC;
}

div.jPicker td.Text input,
div.jPicker tr.Hex td.Text input.Hex {
    width: 84%;
    vertical-align: middle;
    display: inline-block;
}

div.jPicker td.Text {
    width: 86px;
}

div.jPicker td.Radio {
    width: 14px;
}

div.jPicker td.Radio label {
    margin-bottom: 0;
}

div.jPicker div.Bar {
    border: none;
}

div.jPicker div[class="Bar"] {
    width: 10px;
    border-radius: 31px;
    margin-right: 14px;
}

div.jPicker .Bar .Arrow {
    left: 50% !important;
    margin-left: -25px;
    height: 18px;
}

div.jPicker div[class="Map"] {
    margin-left: 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.Preview+.Text label {
    margin-bottom: 0;
}

.jGraduate_tabs {
    background: #ffffff;
}

div.jPicker .Grid span.QuickColor.no-color {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

dnb-select .dropdown-menu ul {
    max-height: 200px;
}

.quicktoolbar [aria-labelledby="alignObject"] .dropdown-menu {
    min-width: 100%;
}

.quicktoolbar .dropdown-menu .selected-option-dropdown [class*="dnbicon-"] {
    font-size: 10px;
}

.full-image-upload-wrapper file-upload.option-block {
    padding: 0 !important;
    height: 100%;
}

.full-image-upload-wrapper .full-image-upload .upload-file-block {
    height: 100%;
}

.tab-panel-content .layer-blocks {
    /*max-height: 88vh;*/
}

.duplicate-pages-row {
    overflow-y: auto;
    max-height: 77vh;
}

#addTab dnb-switch.toggle-switch {
    padding-left: 1rem !important;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
}

#addTab .dnbicon-info {
    margin-left: 1rem;
}

.dnbicon-bleedmargin,
.dnbicon-cutmargin,
.dnbicon-safemargin {
    width: 22px;
    height: 15px;
    position: relative;
}

.dnbicon-bleedmargin {
    border: 1.5px solid var(--primary-clr);
}
.dnbicon-cutmargin,
.dnbicon-safemargin {
    border: 1.5px solid #c4c4c4;
}
.dnbicon-bleedmargin:before,
.dnbicon-bleedmargin:after,
.dnbicon-cutmargin:before,
.dnbicon-cutmargin:after,
.dnbicon-safemargin:after,
.dnbicon-safemargin:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.dnbicon-bleedmargin:before,
.dnbicon-bleedmargin:after,
.dnbicon-cutmargin:after,
.dnbicon-safemargin:before {
    border: 1.5px solid #c4c4c4;
}
.dnbicon-cutmargin:before,
.dnbicon-safemargin:after{
    border: 1.5px solid var(--primary-clr);
}

.dnbicon-cutmargin:before,
.dnbicon-bleedmargin:before,
.dnbicon-safemargin:before {
    width: 14px;
    height: 9px;
}
.dnbicon-cutmargin:after,
.dnbicon-bleedmargin:after,
.dnbicon-safemargin:after {
    width: 8px;
    height: 4px;
}
.signin-popup .form-group > label:after {
    content: "*";
    color: #f00;
    font-size: 20px;
    line-height: 1;
    margin-left: 3px;
}
.para-text-edit-panel .form-group .selected-option-dropdown{
    margin-bottom: 0 !important;
}
#customOptionForm .product-custom-option {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-color: var(--border-color);
    height: 40px;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: var(--primary-clr);
}
#cartReviewPopup .item-con{
    max-height: 50vh;
}
#header-color{
    margin-bottom: 0;
    display: inline-block;
}
#header-color.pro-color{
    margin-bottom: 0 !important;
    height: 34px;
    width: 34px;
}
multicolor-paintbox .product-color-palette color-picker .pro-color-varient .color-picker {
    margin-left: 0 !important;
}
#svgcanvas {
    position: relative;
    margin: auto;
}
.product-color-panel .product-sides-list,
.product-sides-panel .product-sides-list {
    margin-bottom: 10px;
}
#settingsPanel .swipe-panel {
    height: calc(100vh - 137px);
    padding-top: 1rem !important;
}
#productCategory {
    height: calc(100vh - 108px) !important;
}
#settingsPanel dnb-select .recent-used-container + .panel-label {
    padding: 0.75rem 1rem;
}
.dropdown-divider + .error_msg {
    padding: 0.5rem 1rem 0;
}
#addTab .swipe-category-listing .swipe-panel {
    height: calc(100vh - 175px);
}
#addTab .image-wrapper .img-list {
    -webkit-justify-content: center;
    justify-content: center;
}
#addTab search-bar.search-box{
    padding-right: 0 !important;
    padding-left: 0 !important;
}
image-gallery .image-gallery + dnb-pagination.pagination-wrapper{
    width: 100%
}
.para-text-edit-panel .recent-used-container.recent-fonts .recent-used,
#Font-Container .recent-used-container.recent-fonts .recent-used {
    overflow-y: auto;
    max-height: 150px;
}
.para-text-edit-panel .recent-used-container.recent-fonts .recent-used a.font-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.para-text-edit-panel .recent-used-container.recent-fonts + .panel-label {
    padding: 0.75rem 1rem 0.5rem;
}
.letter-case .dropdown-menu {
    min-width: 200px;
}
upload-image .choose-image-block .recently-added-image .recently-added-image-list image-gallery-item .more-option.more-image-option {
    display: none;
}
upload-image .choose-image-block .recently-added-image .recently-added-image-list image-gallery-item img {
    width: auto;
}

intro-popup-item{
    width: 250px;
    height: auto;
    background-color: #ffffff;
    left: 100px;
    top: 100px;
    z-index: 9999;
    border-radius: 4px;
}
intro-popup-item .modal-footer{
    background-color: #ffffff !important;
}
intro-popup-item .modal-header .close {
    margin-top: -10px;
}
.triangle-up {
    border-left: 13px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 13px solid #fff;
    top: -13px;
    left: 114px;
    position: absolute;
}
.triangle-left {
    border-top: 13px solid transparent;
    border-right: 16px solid #fff;
    border-bottom: 13px solid transparent;
    top: calc(50% - 19px);
    left: -16px;
    position: absolute;
}
.triangle-down {
    border-left: 13px solid transparent;
    border-right: 16px solid transparent;
    border-top: 13px solid #fff;
    top: 100%;
    left: 114px;
    position: absolute;
}
.triangle-right {
    border-top: 13px solid transparent;
    border-left: 16px solid #fff;
    border-bottom: 13px solid transparent;
    top: calc(50% - 19px);
    left: 100%;
    position: absolute;
}

dl.required dt:after {
    content: "*";
    /* position: absolute; */
    bottom: 8px;
    color: #ff0000;
}
svg#bleedHolder {
    overflow: visible;
}
.proportionate-object{
    cursor: pointer;
}
#addtoCartModal .contentHolder {
    max-height: 60vh;
}
mask-overlay .vdp-uploaded-img .image-container img {
    border: 1px solid #eee;
}
#layoutsPanel category-panel .img-list category-panelitem img {
    max-width: 100%;
}
#edit-panel-accordion collapse-item.card image-effect .card-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.image-filter-wrapper .filter-item .filter-img svg {
    max-width: 100%;
}
crop-panel .tool-btn-group .btn svg {
    width: 20px;
    height: 20px;
}
category-listitem .accordion-caption {
    padding-right: 10px;
}
.signin-popup .google-captcha {
    width: 100%;
    clear: both;
}
.pick-color-image .image-pick-color {
    text-align: center;
}
#albumTab album-gallery-item.album-list-item {
    margin-bottom: 8px;
    min-height: 40px;
}
#albumTab category-panel.swipe-panel .image-wrapper dnb-switch {
    width: 100%;
    padding-left: 0.25rem !important;
    padding-right: 0.5rem !important;
    margin-bottom: 0.75rem;
}
#albumTab category-panel.swipe-panel .image-wrapper dnb-switch .dnbicon-info{
    margin-left: 0.5rem;
}
#albumTab category-panel.swipe-panel .image-wrapper search-bar {
    width: 100%;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}
#albumTab category-panel.swipe-panel .image-wrapper panel-block{
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}
#albumTab category-panel.swipe-panel .image-wrapper panel-block .image-gallery{
    display: grid;
    grid-column-gap: 8px;
    grid-template-columns: 48% auto;
    columns: unset;
}
#albumTab category-panel.swipe-panel .image-wrapper panel-block .image-gallery file-upload{
    padding: 0 !important;
    order:1;
}
#albumTab category-panel.swipe-panel .image-wrapper panel-block .image-gallery image-gallery-item{
    margin-bottom: 0.75rem;
    order:2;
}
.more-option .dropdown-menu .dropdown-menu .album-list {
    max-height: 150px;
}
.more-option .dropdown-menu .dropdown-menu .album-list li a{
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
    max-width: 234px;
}
#photoPanel dnb-tablist .tab-content{
    position: relative;
}
.quicktoolbar quick-toolbar dnb-button .btn.label > i[class*="dnbicon-"] {
    font-size: 21px;
    display: none;
}
.quicktoolbar quick-toolbar dnb-button .btn.label > i.dnbicon-group{
    font-size: 23px;
}
.quicktoolbar quick-toolbar dnb-button .btn.label > .down-arrow-icon,
.quicktoolbar quick-toolbar dnb-button .btn.label > i.down-arrow-icon[class*="dnbicon-"] {
    display: inline-block;
    font-size: 10px;
}
#UploadAlbumImages image-gallery-item {
    width: auto;
    height: 110px;
    padding: 4px;
    max-width: 150px;
}

#UploadAlbumImages image-gallery-item img{
    width: auto;
    height: 100%;
    max-width: 100%;
}
upload-image .choose-image-block .recently-added-image{
    background: var(--two-col-bg);
    padding: 4px;
}
upload-image .swipe-images-container category-panel .image-wrapper .img-list {
    padding-bottom: 10px;
}
upload-image .swipe-images-container category-panel.swipe-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#signInWindow.modal,
#signUpWindow.modal{
    overflow-x: hidden;
    overflow-y: auto;
}
#customOptionForm dd.optionDiv ul {
    padding: 0;
    margin-bottom: 0;
}
#customOptionForm dd.optionDiv li.pro-set-chk-option{
    list-style: none;
}
#customOptionForm dd.optionDiv .pro-set-chk-option .product-custom-option[type="checkbox"], 
#customOptionForm dd.optionDiv .pro-set-chk-option .product-custom-option[type="radio"] {
    margin-right: 6px;vertical-align: middle;
    width: auto;
    height: auto;
    display: inline-block;
}
.more-option.more-image-option .dropright .dropdown-menu {
    left: 0;
    top: 100%;
}
mask-overlay .vdp-uploaded-img {
    overflow: hidden;
}
vdp-popup .table .form-control[type="text"] {
    min-width: 100px;
}
vdp-popup [data-isrequired="true"]:after {
    content:" *";
    color: red;
}
.top-toolnav .printarea-box .dropdown > .btn.label {
    padding: 0;
}
#customOptionForm select.product-custom-option {
    padding-right: 25px !important;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden !important;
}
.nameno-list-row .form-control[disabled="disabled"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
}
a.pointer-events-none{
    pointer-events:none;
}
#namenumberPanel file-upload {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#namenumberPanel .tab-panel-content.v-mcscrollbar{
    overflow-y:hidden; 
}
recent-block .layouts-wrapper.recent-used-block .two-column, 
#artPanel recent-block .layouts-wrapper.recent-used-block .three-column, 
recent-block .layouts-wrapper.recent-used-block .three-column{
    min-width: 110px;
}
/* #photoPanel .tab-panel-content {
    max-height: calc(100% - 48px);
} */
.quicktoolbar quick-toolbar > li > dnb-button {
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-align-items: center;
    align-items: center;
}
#addTab #flickrPics search-bar.search-box {
    padding-top: 0 !important;
}
.vh-mcscrollbar {
    overflow: auto;
}
recent-block .layouts-wrapper.recent-used-block.h-mcscrollbar {
    overflow-x: auto;
}
recent-block .layouts-wrapper.recent-used-block .art-img-box{
    padding: 5px;
}
.h-mcscrollbar,
.jPicker .Button .Grid {
    overflow-y: hidden;
}

.light-v-scrollbar,
.v-mcscrollbar,
.tab-panel-content .layer-blocks,
.duplicate-pages-row,
.import-vdp-data-wrapper,
.para-text-edit-panel .recent-used-container.recent-fonts .recent-used,
#Font-Container .recent-used-container.recent-fonts .recent-used {
    overflow-x: hidden;
}
/* responsive */
@media only screen and (min-width: 1400px) {
    .leftnav-tab-content {
        min-width: 352px;
        max-width: 352px;
    }

    .leftnav-tab-content.hide-left-nav {
        margin-left: -352px;
    }

    .name-list-column .form-control {
        width: auto;
    }

    .no-list-column .form-control {
        min-width: 65px;
    }

    .nameno-list-row .size-list-column .form-control {
        min-width: 54px;
    }

    #artPanel .three-column,
    .art-img-wrapper .three-column {
        width: calc(100% / 3);
    }

    .designs-img-box {
        max-height: 155px;
    }

    .designs-img-box img {
        width: 100%;
    }

    .art-img-box {
        height: 103px;
        padding: 4px;
    }

    .no-background-img {
        max-width: 100%;
        max-height: 100%;
    }

    .text-combination-box {
        height: 140px;
    }

    .text-combination-wrapper.h-mcscrollbar .text-combination-box {
        height: 120px;
    }

    .pro-colorpalette-wrapper.v-mcscrollbar .pro-color-varient {
        float: none;
    }
}

@media only screen and (min-width:768px) {
    .leftnav-tabs {
        min-width: 80px;
    }
    #editPanel .tab-panel-content {
        height: calc(100vh - 108px);
    }
    .leftnav-tab-content .name-number-block .tab-content > .tab-pane#addTab {
        height: calc(100vh - 171px);
    }
    .tab-caption {
        word-break: break-word;
    }    
    recent-block.option-block {
        padding-bottom: 8px;
    }
    #addtoCartModal .error_msg {
        max-width: 267px;
        color: #f00;
    }
    
    .h-mcscrollbar,
    .jPicker .Button .Grid {
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #666 #ddd
    }

    .light-v-scrollbar,
    .v-mcscrollbar,.vh-mcscrollbar,
    .tab-panel-content .layer-blocks,
    .duplicate-pages-row,
    .import-vdp-data-wrapper,
    .para-text-edit-panel .recent-used-container.recent-fonts .recent-used,
    #Font-Container .recent-used-container.recent-fonts .recent-used {
        scrollbar-width: thin;
        scrollbar-color: #666 #ddd
    }

    .leftnav-tab-content .tab-content::-webkit-scrollbar:hover,
    .light-v-scrollbar::-webkit-scrollbar:hover,
    .v-mcscrollbar::-webkit-scrollbar:hover,
    .vh-mcscrollbar::-webkit-scrollbar:hover,
    .h-mcscrollbar::-webkit-scrollbar:hover,
    .jPicker .Button .Grid::-webkit-scrollbar:hover,
    .tab-panel-content .layer-blocks::-webkit-scrollbar:hover,
    .duplicate-pages-row::-webkit-scrollbar:hover,
    .import-vdp-data-wrapper::-webkit-scrollbar:hover,
    .para-text-edit-panel .recent-used-container.recent-fonts .recent-used::-webkit-scrollbar:hover,
    #Font-Container .recent-used-container.recent-fonts .recent-used::-webkit-scrollbar:hover {
        width: 5px;
    }

    .leftnav-tab-content .tab-content::-webkit-scrollbar,
    .light-v-scrollbar::-webkit-scrollbar,
    .v-mcscrollbar::-webkit-scrollbar,
    .vh-mcscrollbar::-webkit-scrollbar,
    .h-mcscrollbar::-webkit-scrollbar,
    .jPicker .Button .Grid::-webkit-scrollbar,
    .tab-panel-content .layer-blocks::-webkit-scrollbar,
    .duplicate-pages-row::-webkit-scrollbar,
    .import-vdp-data-wrapper::-webkit-scrollbar,
    .para-text-edit-panel .recent-used-container.recent-fonts .recent-used::-webkit-scrollbar,
    #Font-Container .recent-used-container.recent-fonts .recent-used::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .leftnav-tab-content .tab-content::-webkit-scrollbar-track,
    .light-v-scrollbar::-webkit-scrollbar-track,
    .v-mcscrollbar::-webkit-scrollbar-track,
    .vh-mcscrollbar::-webkit-scrollbar-track,
    .h-mcscrollbar::-webkit-scrollbar-track,
    .jPicker .Button .Grid::-webkit-scrollbar-track,
    .tab-panel-content .layer-blocks::-webkit-scrollbar-track,
    .duplicate-pages-row::-webkit-scrollbar-track,
    .import-vdp-data-wrapper::-webkit-scrollbar-track,
    .para-text-edit-panel .recent-used-container.recent-fonts .recent-used::-webkit-scrollbar-track,
    #Font-Container .recent-used-container.recent-fonts .recent-used::-webkit-scrollbar-track {
        background: #ddd;
    }

    .leftnav-tab-content .tab-content::-webkit-scrollbar-thumb,
    .light-v-scrollbar::-webkit-scrollbar-thumb,
    .v-mcscrollbar::-webkit-scrollbar-thumb,
    .vh-mcscrollbar::-webkit-scrollbar-thumb,
    .h-mcscrollbar::-webkit-scrollbar-thumb,
    .jPicker .Button .Grid::-webkit-scrollbar-thumb,
    .tab-panel-content .layer-blocks::-webkit-scrollbar-thumb,
    .duplicate-pages-row::-webkit-scrollbar-thumb,
    .import-vdp-data-wrapper::-webkit-scrollbar-thumb,
    .para-text-edit-panel .recent-used-container.recent-fonts .recent-used::-webkit-scrollbar-thumb,
    #Font-Container .recent-used-container.recent-fonts .recent-used::-webkit-scrollbar-thumb {
        background: #666;
    }
    dnb-header-right #customOptionForm select.product-custom-option {
        max-width: 240px;
    }
}

@media only screen and (min-width: 680px) {
    #pickColorPopup .modal-dialog {
        max-width: 600px;
    }

}

@media only screen and (min-width: 576px) {
    .modal-dialog:not(.modal-xl):not(.modal-lg):not(.modal-md) {
        max-width: 700px;
    }

    #uploadMaskOverlay .modal-dialog {
        max-width: 500px;
    }

}

@media only screen and (max-width: 1199px) {
    #editParaText .modal-xl {
        max-width: 980px;
    }
}
@media only screen and (max-width: 1199px) and (min-width: 767px) {
    .tool-top-btn, .tool-top-btn [class*="dnbicon-"]{
        width: 38px;
    }
    .top-toolnav .quicktoolbar .label.btn{
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
}
@media only screen and (max-width: 1024px){
    .quicktoolbar quick-toolbar dnb-button .btn.label > i[class*="dnbicon-"]{
        display: block;
        margin-right: 0 !important;
    }
    .tool-help .btn.label > span,
    .quicktoolbar quick-toolbar dnb-button .btn.label > i[class*="dnbicon-"] + span{
        display: none !important;
    }
    .tool-help .btn.label > [class*="dnbicon-"] {
        margin-right: 0 !important;
    }
}

@media only screen and (max-width: 991px) {
    #editParaText .modal-xl {
        max-width: 750px;
    }

    #helpWindow .modal-dialog.modal-lg {
        max-width: 700px;
    }
    image-editor .modal-dialog.modal-lg{
        max-width: 745px;
    }
}
@media only screen and (max-width: 991px) and (min-width: 767px){
    user-account .btn {
        min-height: 40px;
    }
    user-account .btn > i {
        margin-right: 0 !important;
    }
    user-account .btn > .header-btn-caption {
        display: none !important;
    }
    
}
@media only screen and (max-width:767px) {
    .h-thin-mcscrollbar {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .v-mcscrollbar {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .h-mcscrollbar {
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .product-varient-listing .h-mcscrollbar {
        padding-bottom: 0;
    }

    .cart-summary-dropdown.modal {
        background: rgba(0, 0, 0, 0);
        border: none;
    }

    .cart-review .button-group {
        width: 100%;
    }

    .header-btn .btn {
        background: rgba(0, 0, 0, 0);
        box-shadow: none;
    }

    .dnb-designtool header {
        height: 44px;
    }

    .topnav {
        position: fixed;
        top: -100%;
        right: 0;
        left: 0;
        -webkit-transition: top 0.3s ease-in-out 0.3s;
        -moz-transition: top 0.3s ease-in-out 0.3s;
        transition: top 0.3s ease-in-out 0.3s;
        z-index: 2;
    }

    .leftnav-wrapper {
        width: 100%;
    }

    .leftnav-tabs {
        padding: 3px 0;
        max-width: 100%;
        max-height: inherit;
        overflow-x: auto !important;
    }

    .leftnav-tab-content {
        width: 100%;
        position: fixed !important;
        top: 44px;
        background: #fff;
        z-index: 2;
        height: calc(100vh - 44px);
        -webkit-transition: top 0.3s ease-in-out 0.3s;
        -moz-transition: top 0.3s ease-in-out 0.3s;
        transition: top 0.3s ease-in-out 0.3s;
    }

    .leftpanel-hide-btn {
        left: 0;
        transform: none;
    }

    .leftnav-tab-content.hide-left-nav {
        margin-left: 0;
        top: 100%;
        -webkit-transition: top 0.3s ease-in-out 0.3s;
        -moz-transition: top 0.3s ease-in-out 0.3s;
        transition: top 0.3s ease-in-out 0.3s;
    }

    .nav-tab-box {
        width: auto;
    }

    .leftnav-tabs .nav-link.active {
        border-left: none;
    }

    .leftnav-tabs .nav-link.active .nav-tab-box {
        background: rgba(0, 0, 0, 0);
    }

    .leftnav-tabs .nav-link.active .tab-icon [class*="dnbicon-"],
    .nav-link.active .nav-tab-box .tab-icon svg,
    .nav-link.active .nav-tab-box .tab-icon svg path {
        fill: var(--white-clr);
        color: var(--white-clr);
    }

    .leftnav-tabs.light-v-scrollbar .mCSB_outside+.mCSB_scrollTools {
        right: 0;
    }

    .nav-link.active .nav-tab-box .tab-caption {
        color: var(--white-clr);
    }

    .canvas-work-area {
        height: calc(100vh - 122px);
    }

    .main-content {
        height: auto;
    }

    .cart-summary-dropdown.modal .modal-dialog:not(.modal-xl):not(.modal-lg):not(.modal-md),
    .cart-review.modal .modal-dialog:not(.modal-xl):not(.modal-lg):not(.modal-md) {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .bottom-panel-tabs .mCSB_horizontal.mCSB_inside>.mCSB_container {
        margin-bottom: 0;
    }

    .bottom-panel-tabs .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
        bottom: -8px;
    }

    .bottom-panel-tabs .dnb-tabs .nav-item .nav-link,
    .bottom-nav-toogle-btn {
        height: 48px;
    }

    .bottom-nav-toogle-btn .dnbicon-close {
        font-weight: bold;
    }

    .leftnav-tab-content .tab-content {
        -webkit-align-content: flex-start;
        -moz-align-content: flex-start;
        align-content: flex-start;
    }

    .leftnav-tab-content>.tab-content>.tab-pane {
        height: calc(100vh - 92px);
    }

    #settingsPanel .tab-panel-content {
        /* max-height: calc(100vh - 92px - 67px); */
    }

    .pro-color {
        width: 38.7px;
        height: 38.7px;
    }

    .pro-colorpalette-wrapper.v-mcscrollbar {
        max-height: 140px;
    }

    .swipe-panel {
        height: calc(100vh - 92px);
    }

    #settingProductCategory {
        bottom: 0;
        position: fixed !important;
        top: 92px;
    }

    .search-box .form-control {
        height: 32px;
        font-size: 13px;
    }

    .search-box .input-group-prepend .btn {
        height: 32px;
        font-size: 16px;
        padding-top: 4px;
        padding-bottom: 5px;
    }

    #textPanel .tab-panel-content {
        max-height: calc(100vh - 92px);
    }

    .two-column,
    #artPanel .three-column,
    .art-img-wrapper .three-column {
        width: calc(100% / 4);
    }

    .text-combination-wrapper.h-mcscrollbar .text-combination-item {
        width: auto;
    }

    .text-combination-wrapper.h-mcscrollbar .text-combination-item .text-combination-box {
        min-width: 133px;
    }

    .swipe-category-listing.v-mcscrollbar {
        max-height: calc(100vh - 251px);
    }

    #artPanel .swipe-panel {
        height: calc(100vh - 245px);
    }

    .leftnav-tab-content>.tab-content>#photosPanel .tab-panel-content {
        overflow-y: auto;
    }

    .more-option>.dropdown-menu {
        min-width: 245px;
        position: fixed !important;
        transform: none !important;
        bottom: 0;
        top: auto !important;
        right: 0;
        border-radius: 0;
    }

    .more-option .dropdown-menu:before,
    .more-option .dropdown-menu:after {
        border: none;
        display: none;
    }

    .image-gallery {
        grid-template-columns: 25% 25% 25% auto;
    }

    #stockPhotosCnt .image-gallery-grid-wrapper {
        max-height: calc(100vh - 200px);
    }

    #photosPanel .tab-panel-content {
        max-height: calc(100vh - 140px);
    }

    #photosPanel .album-list-wrapper {
        height: calc(100vh - 196px);
    }

    .h-thin-mcscrollbar .mCSB_scrollTools.mCS-light-thin .mCSB_dragger .mCSB_dragger_bar {
        background-color: rgba(0, 0, 0, 0);
    }

    .leftnav-tab-content .name-number-block .tab-content>.tab-pane {
        max-height: calc(100vh - 154px);
    }
    .leftnav-tab-content .name-number-block .tab-content>dnb-tabpanel#addTab.tab-pane{
        height: 100vh
    }
    #designsPanel .swipe-category-listing.v-mcscrollbar {
        max-height: calc(100vh - 323px);
    }

    #designsPanel .swipe-category .swipe-panel {
        max-height: calc(100vh - 305px);
    }

    .designs-img-box {
        max-height: 177px;
    }

    .two-column .designs-img-box img {
        width: 100%;
    }

    #layoutPanel .image-wrapper.v-mcscrollbar,
    .layouts-wrapper.v-mcscrollbar {
        max-height: calc(100vh - 370px);
    }

    #backgroundPanel .image-wrapper,
    .background-image-wrapper {
        max-height: calc(100vh - 280px);
    }

    .no-background-img {
        max-width: 100%;
        max-height: 100%;
    }

    #layersPanel .tab-panel-content {
        max-height: calc(100vh - 92px);
    }

    .grid-dropdown,
    .printarea-box.print-area-mobile {
        right: 16px;
    }

    .product-choose-side-block,
    .product-choose-color-block {
        height: 138px;
        width: 100vw;
    }

    .product-varient {
        bottom: 16px;
        border-radius: 8px;
        min-height: 83px;
        min-width: 63px;
        -webkit-transition: none;
        -moz-transition: none;
        transition: none;
    }

    .product-sides-panel {
        right: 16px;
    }

    .product-color-panel, .product-layers-panel {
        left: 16px;
        right: auto;
    }

    .product-varient .show-hide-sides,
    .product-varient .show-hide-color {
        position: static;
        width: auto;
        height: auto;
    }

    .product-varient.active {
        right: 16px;
        -webkit-transition: none;
        -moz-transition: none;
        transition: none;
    }

    .product-color-panel.product-varient.active {
        right: auto;
        left: 16px;
    }

    .product-varient .product-varient-listing {
        background: #ffffff;
        position: fixed;
        width: 100%;
        bottom: -100%;
        left: 0;
        right: 0;
        z-index: 3;
        -webkit-transition: bottom 0.3s ease-in-out 0.3s;
        -moz-transition: bottom 0.3s ease-in-out 0.3s;
        transition: bottom 0.3s ease-in-out 0.3s;
    }

    .product-varient.active .product-varient-listing {
        bottom: 0;
        -webkit-transition: bottom 0.3s ease-in-out 0.3s;
        -moz-transition: bottom 0.3s ease-in-out 0.3s;
        transition: bottom 0.3s ease-in-out 0.3s;
    }

    .product-color-panel .show-hide-varient .side-selection {
        height: auto;
    }
    .product-side-item .side-image{
        max-width: 43px;
    }
    .product-side-item .side-image > svg{
        width: 43px;
    }
    .product-sides-list .product-side-item .side-image{
        max-width: 26px;
    }
    .product-color-list,
    .product-sides-list {
        width: 100vw;
    }

    .product-varient-listing .h-mcscrollbar .mCSB_horizontal.mCSB_inside>.mCSB_container {
        margin-bottom: 0;
    }

    .modal-title {
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
    }

    .modal-content .modal-header .close {
        margin-top: -8px;
    }
    .modal-content .modal-header .modal-title + .close,
    .modal-content .modal-header .modal-title + .dnb-tabs + .close{
        margin-top: -1.3rem;
    }
    image-editor .modal-content .modal-header .modal-title + .close,
    cart-review-popup .modal-content .modal-header .modal-title + .close,
    multistyle-edit .modal-content .modal-header .modal-title + .close,
    dnb-picker .modal-content .modal-header .modal-title + .close,
    help-popup .modal-content .modal-header .close,
    help-popup .modal-content .modal-header .modal-title + .close,
    #addtoCartModal .modal-content .modal-header .close,
    #addtoCartModal .modal-content .modal-header .modal-title + .close{
        margin-top: 0;
    }
    .modal-content .modal-header .vdp-header-right .close {
        margin-top: -4px;
    }

    #vdpPanel .modal-body {
        min-height: 62vh;
        max-height: 69vh;
    }

    #importVdpDataCnt .modal-body {
        overflow-y: auto;
    }

    #vdpPanel .modal-content .modal-header .close {
        margin-right: -7px;
    }

    #vdpPreviewPopup .modal-content .modal-header .close {
        margin-top: -1.2rem;
    }

    .canvas-arrows {
        position: absolute;
        bottom: 20px;
        left: 16px;
    }

    .canvas-slide-arrow {
        position: static !important;
        display: inline-block;
        vertical-align: middle;
        margin-top: 0;
    }

    .pages-sidebar-btn {
        bottom: 20px;
        right: 16px;
    }

    .pages-sidebar-btn .btn {
        border-radius: 8px;
    }

    .pages-sidebar-btn {
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    }

    .right-sidebar-list-wrapper {
        height: calc(100vh - 64px);
        max-height: calc(100vh - 64px);
    }

    .rightsidebar-wrapper {
        height: 100vh;
        width: 100%;
        position: fixed !important;
        z-index: 2;
        top: 0;
        bottom: 0;
        margin-right: -100%;
    }

    .add-more-pages {
        width: 100%;
        position: fixed;
        background: #ffffff;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .add-more-pages .btn {
        background: #366DC2 !important;
        border: 1px solid #366DC2 !important;
        color: #ffffff;
    }

    .edit-panel-collapse>.card>.collapse:not(.show),
    .edit-panel-collapse>.card>.collapse {
        display: block;
    }

    .leftnav-tab-content>.tab-content>.tab-pane#editPanel.show {
        bottom: 0;
        position: fixed !important;
        background: var(--dark-grey-clr);
        top: auto;
        height: auto;
    }

    .edit-panel-collapse.accordion>.tab-pane {
        border-top: 1px solid var(--border-color) !important;
        border-bottom: 0 !important;
    }

    .edit-panel-collapse.accordion>.tab-pane.active {
        position: fixed;
        bottom: 56px;
        left: 0;
        right: 0;
    }

    .image-effect-preview {
        position: relative;
        min-height: 0;
        background: rgba(0, 0, 0, 0.1);
    }

    .update-btn {
        width: 100%;
    }

    .image-effect-content {
        min-height: 120px;
        max-height: calc(100vh - 544px);
        overflow-y: auto;
    }

    .image-effect-content .tool-btn-group .btn {
        width: 40px;
        height: 40px;
    }

    #imageEffectPopup .modal-dialog.modal-lg,
    image-editor .modal-dialog.modal-lg {
        max-width: 500px;
    }

    .filter-img svg {
        max-height: 118px;
        width: 100%;
    }

    .filter-img svg image {
        width: 100%;
        height: auto;
    }

    #uploadMaskOverlay .custom-control.custom-checkbox {
        min-width: 158px;
    }

    .full-image-upload-wrapper {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .poup-footer-btn {
        width: 100%;
    }

    #editParaText .modal-xl {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    textarea.form-control.textarea-lg {
        max-height: 223px;
    }

    .edit-panel-tabs .dnb-tabs .nav-item .nav-link {
        color: #ffffff;
        opacity: 0.5;
        margin-bottom: 2px;
        margin-top: 2px;
    }

    .edit-panel-tabs .dnb-tabs .nav-item .nav-link.active {
        opacity: 1;
        border-bottom: none;
    }

    .edit-panel-tabs .bottom-nav-toogle-btn {
        height: auto;
        border-color: #888888 !important;
    }

    .open-edit-panel .leftnav-tabs {
        display: none;
    }

    .open-edit-panel .canvas-work-area {
        height: calc(100vh - 100px);
    }

    .open-edit-panel .canvas-arrows {
        display: none;
    }

    .open-edit-panel .topnav {
        top: 0;
        -webkit-transition: top 0.3s ease-in-out 0.3s;
        -moz-transition: top 0.3s ease-in-out 0.3s;
        transition: top 0.3s ease-in-out 0.3s;
    }

    .image-quality-block {
        background-color: #ffffff;
    }

    .use-background-link {
        float: left;
        text-align: left;
    }

    .edit-panel .dropdown-menu {
        margin-top: 0;
    }

    .edit-panel .dropdown-menu.show {
        position: fixed !important;
        bottom: 0;
        top: auto !important;
        left: 0;
        right: 0;
        width: 100%;
        transform: none !important;
        border-radius: 0;
    }

    .selected-option-dropdown .dropdown-menu .close-dropdown [class*="dnbicon"] {
        font-size: 11px;
    }

    .responsive-center-dropdown ul {
        text-align: center;
    }

    .responsive-center-dropdown ul a,
    .selected-option-dropdown .responsive-center-dropdown.dropdown-menu ul a {
        opacity: 0.6;
    }

    .responsive-center-dropdown ul .active a,
    .selected-option-dropdown .responsive-center-dropdown.dropdown-menu ul .active a {
        opacity: 1;
    }

    .selected-option-dropdown .dropdown-menu ul li.active a:after {
        right: 16px;
        position: absolute;
    }

    .mobile-choose-color .color-box,
    .mobile-choose-color .color-picker {
        width: 38px;
        height: 38px;
        line-height: 36px;
    }

    .mobile-choose-color .color-box {
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
        display: inline-block;
    }

    .mobile-choose-color .choose-color-panel .color-box {
        border-width: 3px !important;
        box-shadow: none;
        ;
    }

    .mobile-choose-color .choose-color-block {
        overflow-x: auto;
    }

    .font-family-listing {
        max-height: 230px;
        overflow-y: auto;
    }

    .toptool-right {
        -ms-flex-item-align: stretch !important;
        align-self: stretch !important;
        border-right: 1px solid var(--border-color);
    }

    .top-toolnav {
        overflow-x: auto;
        max-width: 100%;
    }

    #helpWindow .modal-dialog.modal-lg {
        max-width: 500px;
    }

    .mobile-title-panel .close-dropdown {
        margin-top: 1px;
    }

    .mobile-title-panel .confirm-option {
        margin-top: 2px;
    }

    .preloader {
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        transform: scale(0.6);
    }

    .para-text-edit-panel .choose-color-block .form-control {
        max-width: 74px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .mobile-font-size .dropdown-toggle-split.remove-arrow {
        border-left: 0;
    }

    .mobile-font-size button.btn {
        min-width: 42px;
    }

    .layer-row .layer-action-btn {
        visibility: visible;
    }

    .text-combination-wrapper.v-mcscrollbar {
        height: 242px;
    }

    .table-responsive {
        padding-bottom: 5px;
    }

    #vdpPanel .table-responsive {
        padding-bottom: 10px;
    }

    .tool-help .btn.btn-outlined {
        padding-left: 8px;
        padding-right: 8px;
    }

    .right-sidebar-list .right-sidebar-item {
        width: calc(100% / 2);
    }

    .right-sidebar-list .right-sidebar-item img {
        width: 100%;
    }

    .right-sidebar-list {
        padding-bottom: 60px;
    }
    .edit-panel .mobile-title-panel.caption ,
    .dropdown-menu > .mobile-title-panel.caption {
        margin-top: -0.5rem;
    }
    
    dnb-header-right .header-btn .btn.label > span, dnb-header-right .header-btn .btn .header-btn-caption {
        display: none;
    }
    dnb-header-right .header-btn .btn.cart-btn .header-btn-caption {
        display: block;
    }
    .quicktoolbar quick-toolbar dnb-button .btn.label > i[class*="dnbicon-"]{
        display: none;
    }
    .quicktoolbar quick-toolbar dnb-button .btn.label > i[class*="dnbicon-"] + span{
        display: block !important;
    }
    .top-toolnav .printarea-box dropdown-menu.dropdown-menu,
    .quicktoolbar dnb-button > .dropdown > .dropdown-menu {
        position: fixed !important;
        transform: none !important;
        top: 45px !important;
        border-radius: 0;
        right: 0;
        left: 0;
    }
    .jGraduate_Picker tr.Cyan, .jGraduate_Picker tr.Magenta, 
    .jGraduate_Picker tr.Yellow, .jGraduate_Picker tr.Black, 
    .jGraduate_Picker tr.Hue, .jGraduate_Picker tr.Value, 
    .jGraduate_Picker tr.Saturation, .jGraduate_Picker tr.Red, 
    .jGraduate_Picker tr.Green, .jGraduate_Picker tr.Blue, 
    .jGraduate_Picker tr.Alpha, .jGraduate_Picker tr.Hex td.Text{
        display: none;
    }
    .jGraduate_Picker tr {
        display: block;
    }
    .jPicker .Button .Grid{
        max-width: 287px;
    }
    body .jGraduate_Picker{
        left: 15px !important;
    }
    div.jPicker div[class="Bar"]{
        margin-right: 0;
    }
    .more-option {
        z-index: inherit;
        opacity: 1;
        pointer-events: all;
    }
    .more-option.more-image-option .dropright .dropdown-menu {
        left: auto;
        top: auto;
        right: 0;
        bottom: 100%;
    }
    #namenumberPanel .tab-panel-content.v-mcscrollbar{
        max-height: calc(100vh - 10px);
    }
    #addTab .swipe-category-listing .swipe-panel {
        height: calc(100vh - 309px);
    }
    .product-sides-panel .side-selection {
        height: auto;
        max-height: 57px;
    }
}

@media only screen and (max-width: 575px) {

    .two-column,
    #artPanel .three-column,
    .art-img-wrapper .three-column {
        width: calc(100% / 3);
    }

    .image-gallery {
        grid-template-columns: 33.33% 33.33% auto;
    }

    .add-new-line {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    #imageEffectPopup .modal-dialog.modal-lg,
    image-editor .modal-dialog.modal-lg {
        max-width: 100%;
    }

    .para-text-edit-panel .dropdown .dropdown-toggle-split .dnbicon-down-arrow {
        width: 20px;
    }

    .filter-img svg {
        max-height: 80px;
    }
}

@media only screen and (max-width:510px) {
    #editParaText .modal-xl {
        margin-left: .5rem;
        margin-right: .5rem;
    }
}

@media only screen and (max-width: 479px) {

    .two-column,
    #artPanel .three-column,
    .art-img-wrapper .three-column {
        width: calc(100% / 2);
    }

    .image-gallery {
        grid-template-columns: 48% auto;
    }

    .dupliate-page-column {
        width: calc((100% / 3) - 0.5rem);
    }

    .right-sidebar-list .right-sidebar-item {
        width: 100%;
    }
}

@media only screen and (max-width: 380px) {

    .para-text-edit-panel .tool-btn-group .btn,
    .para-text-edit-panel .choose-color-block .color-box {
        width: 37px;
    }
    .signin-popup .g-recaptcha {
        -moz-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        margin-left: -10%;
    }
}

.popular-fonts {
    max-height: 75vh;
}


.import-vdp-data-wrapper{
    max-height: 73vh;
    overflow-y: auto
}

.table-responsive.v-mcscrollbar{
    overflow-x: auto; 
}
.image-gallery-item img {
    object-fit: contain;
    min-height: 10px;
}

.loading-block {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: wave;
    animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: wave;
    -webkit-animation-timing-function: linear;
    -moz-animation-duration: 1s;
    -moz-animation-fill-mode: forwards;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: wave;
    -moz-animation-timing-function: linear;
    background: #dddddd;
    background-image: -webkit-gradient(linear, left center, right center, from(#dddddd), color-stop(.2, #f5f5f5), color-stop(.4, #e5e5e5), to(#dddddd));
    background-image: -webkit-linear-gradient(left, #dddddd 0%, #f5f5f5 20%, #e5e5e5 40%, #dddddd 100%);
    background-image: -moz-gradient(linear, left center, right center, from(#dddddd), color-stop(.2, #f5f5f5), color-stop(.4, #e5e5e5), to(#dddddd));
    background-image: -moz-linear-gradient(left, #dddddd 0%, #f5f5f5 20%, #e5e5e5 40%, #dddddd 100%);
    background-repeat: no-repeat;
    background-size: contain;
    height: auto;
    position: relative;
    color: transparent;
}

@-webkit-keyframes wave {
    0% {
        background-position: -50px 0;
    }

    100% {
        background-position: 50px 0;
    }
}

@-moz-keyframes wave {
    0% {
        background-position: -50px 0;
    }

    100% {
        background-position: 50px 0;
    }
}

/* for rulers */
#rulers>div {
    position: absolute;
    background: #fff;
    z-index: 1;
    overflow: hidden;
}

#ruler_corner {
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-left: 1px solid #777;
}

#ruler_x {
    height: 15px;
    top: 0;
    left: 15px;
    right: 0;
    border-bottom: 1px solid;
    border-left: 1px solid #777;
}

#ruler_x>div,
#ruler_y>div {
    overflow: hidden;
}

#ruler_x canvas:first-child {
    margin-left: -16px;
}

#ruler_x canvas {
    float: left;
}

#ruler_y {
    width: 15px;
    top: 15px;
    left: 0;
    bottom: 0;
    border-right: 1px solid #777;
    border-left: 1px solid #777;
    border-top: 1px solid #777;
}

#ruler_y canvas {
    margin-top: -16px;
}

/* for rulers */
/*for photobook*/
svg#svgroot {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    top: 0;
    left: 0;
}

#svgcanvas label {
    width: auto;
    margin-top: 10px;
    padding: 2px 12px;
}

#svgcanvas label:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 1;
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgba(255, 255, 255, 0.9);
}

#svgcanvas label:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid rgba(255, 255, 255, 0.5);
}

#leftPageLbl,
#rightPageLbl {
    position: absolute;
    /* background: var(--light-grey);
  color: var(--add-heading-bg);
  font-size: 15; */
    cursor: pointer;
    z-index: 1;
}

#rightPageLbl.active,
#leftPageLbl.active {
    pointer-events: none;
    /* color: var(--add-heading-bg); */
    background: #DBDCDE;
    box-shadow: 0 0 0px 1px var(--branding-color);
}

#book_effect_background:before,
#book_effect_background:after {
    content: "";
    position: absolute;
    background: #cccccc;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
    opacity: 1;
    display: block;
}

#book_effect_background.firstpage:after,
#book_effect_background.lastpage:before {
    display: none;
}

#book_effect_background:before {
    right: 0px;
    /*box-shadow: 2px 0px 1px #656565, 3px 0px 1px #f3f3f3, 4px 0px 1px #9e9e9e, 5px 1px 1px #d8d8d8, 12px 4px 1px #272727;*/
    box-shadow: 2px 1px 0px #6b6b6b, 3px 2px 0px #f3f3f3, 4px 3px 0px #929292, 5px 4px 0px #d8d8d8, 6px 6px 0px #484848, 8px 6px 0px #d8d8d8, 13px 9px 0px #272727;
}

#book_effect_background.firstpage:before {
    /*box-shadow: 2px 0px 1px #65654D, 4px 1px 1px #f3f3f3, 6px 4px 1px #9E9E9E, 7px 2px 1px #d8d8d8, 9px 4px 1px #d8d8d8, 13px 8px 1px #272727;*/
    box-shadow: 1px 0px 0px #65654D, 3px 1px 0px #F3F3F3, 4px 2px 0px #525252, 5px 3px 0px #d8d8d8, 6px 4px 0px #d8d8d8, 7px 5px 0px #2f2f2f, 9px 7px 0px #afafaf, 13px 10px 0px #272727;
    background: rgba(0, 0, 0, 1);
}

#book_effect_background:after {
    left: 4px;
    /*box-shadow: -2px 0px 1px #656565, -3px 0px 1px #f3f3f3, -4px 0px 1px #9e9e9e, -5px 1px 1px #d8d8d8, -12px 4px 1px #272727;*/
    box-shadow: -2px 1px 0px #6b6b6b, -3px 2px 0px #f3f3f3, -4px 3px 0px #929292, -5px 4px 0px #d8d8d8, -6px 6px 0px #484848, -8px 6px 0px #d8d8d8, -13px 9px 0px #272727;
}

#book_effect_background.lastpage:after {
    /*box-shadow: -2px 0px 1px #65654D, -4px 1px 1px #f3f3f3, -6px 4px 1px #9E9E9E, -7px 2px 1px #d8d8d8, -9px 4px 1px #d8d8d8, -13px 8px 1px #272727;*/
    box-shadow: -1px 0px 0px #65654D, -3px 1px 0px #F3F3F3, -4px 2px 0px #525252, -5px 3px 0px #d8d8d8, -6px 4px 0px #d8d8d8, -7px 5px 0px #2f2f2f, -9px 7px 0px #afafaf, -13px 10px 0px #272727;
    background: rgba(0, 0, 0, 1);
}

#book_effect_strip:before,
#book_effect_strip:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    pointer-events: none;
}

#book_effect_strip:after {
    bottom: -10px;
    background: #333333;
    width: 54px;
    height: 11px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    box-shadow: 0px -1px 3px 1px rgba(255, 255, 255, 0.02) inset;
}

#book_effect_strip:before {
    background: #333333;
    width: 63px;
    height: 96%;
    height: calc(100% - 5px);
    top: 2px;
    margin-left: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,
            rgba(56, 56, 56, 0.6) 48%,
            rgba(0, 0, 0, 1) 50%,
            rgba(56, 56, 56, 0.6) 54%,
            rgba(255, 255, 255, 0) 100%);
}

.firstpage #book_effect_strip:before,
.lastpage #book_effect_strip:before {
    width: 8px;
    background: #272727;
    top: 0;
    height: 100%;
}

.firstpage #book_effect_strip:before {
    margin-left: -1px;
}

.lastpage #book_effect_strip:before {
    margin-right: -1px;
}

.firstpage #book_effect_strip:after,
.lastpage #book_effect_strip:after {
    border-radius: 0;
    background: #272727;
    height: 4px;
}

.firstpage #book_effect_strip:after {
    width: 20px;
    -webkit-transform: rotate(33deg);
    -moz-transform: rotate(33deg);
    -o-transform: rotate(33deg);
    transform: rotate(33deg);
    margin-left: -5px;
    bottom: -5px;
}

.lastpage #book_effect_strip:after {
    -webkit-transform: rotate(-37deg);
    -moz-transform: rotate(-37deg);
    -o-transform: rotate(-37deg);
    transform: rotate(-37deg);
    margin-left: -12px;
    width: 16px;
    bottom: -6px;
}

/*for photobook*/

/* --------------------------- simple color picker -------------------------- */
.simple-picker span {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin: 5px;
    border-radius: 50px;
    box-shadow: 0px 0px 6px #777777;
    cursor: pointer;
}
.simple-picker label.none-color {
    position: absolute;
    font-size: 50px;
    line-height: 1;
    top: 8px;
    left: 13px;
    color: red;
}

.simple-picker {
    position: absolute;
    z-index: 2;
    border: 1px solid #cccccc;
    border-radius: 5px;
    background-color: #ffffff;
    max-width: 250px;
    max-height: 135px;
    overflow: auto;
}

/* --------------------------- simple color picker -------------------------- */


.editor-canvas-container .rotate,
.editor-canvas-container .resize {
    position: absolute;
}

#svgcontent {
    cursor: move;
}

canvas.img-fluid {
    max-width: calc(100vw - 160px);
    max-height: calc(100vh - 348px);
}

upload-image .recently-added-image-list image-gallery-item {
    width: auto;
    margin: 0px 2px;
}

upload-image .recently-added-image-list image-gallery-item image {
    width: auto;
}

mask-overlay .table-responsive {
    max-height: 80vh;
}

@media (hover: none) {
    .layer-action-btn {
        visibility: visible;
    }
}

/* --------------------------- live 3d section -------------------------- */
.custom_view_section {
    width: 40%;
    height: 100%;
    background: var(--tool-btn-active);
    vertical-align: top;
    order: 3;
    position: relative;
}

#dragbar {
    background-color: black;
    height: 100%;
    float: left;
    width: 3px;
    cursor: col-resize;
}

.view_center {
    display: table;
    height: 100%;
}

.view_wrap {
    display: table-cell;
    vertical-align: middle;
}

#threedviewCon {
    position: absolute;
    top: 0;
    left: 5px;
}

.custom_view_section h3 {
    font-size: 16px;
    color: var(--secondary-clr);
    padding: 20px 20px 0px;
    position: absolute;
    top: 0px;
    left: 5px;
}

#sideNameLabel {
    font-size: 16px;
    color: #133264;
    padding: 20px 20px 0px;
    position: fixed;
}

#hover_div,
#select_div {
    position: absolute;
    outline-width: 2px;
    outline-style: solid;
    pointer-events: none;
}

#hover_div span,
#select_div span {
    position: absolute;
    left: 0px;
    bottom: 100%;
    padding: 3px;
    text-transform: capitalize;
    white-space: nowrap;
}

.view_button {
    text-align: center;
    margin-top: 15px;
    position: absolute;
    bottom: 20px;
    width: 100%;
}

.view_button button {
    padding: 7px 13px;
    border-radius: 5px;
    background: #fff;
    border: 0;
    box-shadow: 0 2px 2px 0 #4e4d4d;
    margin: 0 5px;
    cursor: pointer;
}

#ghostbar {
    width: 3px;
    background-color: #000;
    opacity: .5;
    position: absolute;
    cursor: col-resize;
    z-index: 999
}

.close_3d_preview {
    right: 10px;
    top: 10px;
    z-index: 1;
    padding: 7px 13px;
    border-radius: 5px;
    border: 0px;
    margin: 0 5px;
}

@media only screen and (max-width: 1024px) {
    .custom_view_section {
        display: none;
    }

    .custom_view_section+#svg_editor {
        width: 100%;
    }
}

#svg_editor * {
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}
#svg_editor {
    vertical-align: bottom; /* to solve zoom issue in packaging product */
}

.product-layers-panel .product-choose-side-block {
    height: 210px;
    display: flex !important;
    flex-direction: column;
    flex-wrap: wrap !important;
    align-content: start;
}

.product-layers-panel .show-hide-sides {
    top: 50%;
}