.design-templates-area-con-sec * {
    scrollbar-width: thin;
}

/* width */
.design-templates-area-con-sec ::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

/* Track */
.design-templates-area-con-sec ::-webkit-scrollbar-track {
    background: #f2f2f2;
}

/* Handle */
.design-templates-area-con-sec ::-webkit-scrollbar-thumb {
    background: #cecece;
}

/*----------------------------
    PRODUCT THUMBS
----------------------------*/

.product-thumbnial-wrapper ul {
    position: relative;
    display: flex;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 30px;
}

.product-thumbnial-wrapper ul:after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 10px;
    height: 1px;
    z-index: -1;
    background-color: #a6a19e;
}

.product-thumbnial-wrapper ul li {
    position: relative;
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    cursor: pointer;
    padding: 10px;
    margin-right: 20px;
    border-radius: 12px;
    border: 1px solid #a6a19e;
}

.product-thumbnial-wrapper ul li:before,
.product-thumbnial-wrapper ul li:after {
    position: absolute;
    content: "";
    bottom: -20px;
    left: -20px;
    width: 20px;
    height: 20px;
    opacity: 0;
}

.product-thumbnial-wrapper ul li:before {
    border-right: 1px solid #a6a19e;
    border-bottom: 1px solid #a6a19e;
    border-bottom-right-radius: 10px;
}

.product-thumbnial-wrapper ul li:after {
    left: auto;
    right: -20px;
    border-left: 1px solid #a6a19e;
    border-bottom: 1px solid #a6a19e;
    border-bottom-left-radius: 10px;
}

.product-thumbnial-wrapper ul li.active {
    border-bottom: none;
    border-radius: 12px 12px 0px 0px;
}

.product-thumbnial-wrapper ul li.active:before,
.product-thumbnial-wrapper ul li.active:after {
    opacity: 1;
}

.product-thumbnial-wrapper ul li.error-input {
    border-color: #f00;
}

.product-thumbnial-wrapper ul li.active.error-input:before,
.product-thumbnial-wrapper ul li.active.error-input:after {
    border-color: #f00;
}

.product-thumbnial-wrapper ul li img {
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
}

.thumbnail-item--line {
    position: absolute;
    bottom: -20px;
    left: -7px;
    right: -7px;
    height: 1px;
    z-index: 2;
    background-color: #fff;
}

/*----------------------------
    DESIGN AREA & CONTROLS
----------------------------*/

.designarea-middle-sec {
    display: flex;
    margin-top: 10px;
}

.middle-sec-left {
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    width: calc(55% - 20px);
    flex: 0 0 calc(55% - 20px);
    border: 2px solid #6F6F6F;
    margin-right: auto;
}

.middle-sec-right {
    width: 45%;
    flex: 0 0 45%;
}

.middle-sec-right .row {
    display: flex;
    padding: 20px 0;
}

.middle-sec-right .row:before,
.middle-sec-right .row:after {
    display: none;
}

.middle-sec-right .row:first-child {
    border-bottom: 1px solid #d8d8d8;
}

.middle-sec-right .row:last-child {
    border-top: 1px solid #d8d8d8;
}

.justify-space-between {
    justify-content: space-between;
}

.middle-sec-right .input-box {
    display: flex;
    align-items: center;
    align-items: flex-end;
}

.input-box > label {
    white-space: normal;
    margin-right: 10px;
    margin-bottom: 6px;
}

.input-box label {
    color: #000;
    font-size: 14px;
    font-weight: 600;
}

.input-box--control {
    height: 28px;
    color: #000;
    padding: 0 5px;
    font-size: 14px;
    min-width: 115px;
    border: 1px solid #b5b5b5;
    background-color: #fff;
}

.input-box--control.error-input {
    border-color: #f00;
}

.input-box--control.fx-width {
    width: 105px;
    min-width: auto;
}

.input-box--items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.input-box--item {
    position: relative;
    padding: 0 10px;
}

.input-box--item label {
    display: block;
    margin-bottom: 4px;
    font-weight: normal;
    text-transform: capitalize;
}

.input-box--control-dd {
    position: absolute;
    border: none;
    bottom: 1px;
    right: 11px;
    height: 26px;
    background-color: #fff;
}

.designarea-bottom-sec {
    display: flex;
    margin-top: 20px;
    align-items: flex-end;
    justify-content: space-between;
}

.designarea-bottom-sec .action-toggle {
    padding: 12px;
    min-width: 155px;
    font-size: 18px;
    border-radius: 5px;
}

.designarea-bottom-sec .action-toggle:hover {
    box-shadow: none;
}

/*----------------------------
    MULTIPLE DESIGN AREA
----------------------------*/

.md-area--wrapper {
    position: relative;
    padding-right: 60px;
}
.md-area {
    margin: 0;
    display: flex;
    max-width: 528px;
    overflow-x: auto;
    list-style: none;
    align-items: center;
    padding-bottom: 10px;
}
.md-area li {
    position: relative;
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    cursor: pointer;
    overflow: hidden;
    margin-right: 12px;
    border-radius: 5px;
    border: 1px solid #a6a19e;
}

.md-area li.active {
    border-color: #f05929;
}

.md-area li img {
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
}

.md-area--delete-btn {
    position: absolute;
    border: none;
    top: 5px;
    right: 8px;
    z-index: 5;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
}
.md-area--delete-btn:hover {
    background-color: transparent;
}

.md-area--delete-btn svg {
    stroke: #000;
}

.md-area--add {
    position: absolute;
    top: 48%;
    right: 0;
    width: 50px;
    z-index: 501;
    border: none;
    height: 50px;
    flex: 0 0 50px;
    margin-right: 0;
    border-radius: 5px;
    background-color: #eb5202;
    transform: translateY(-50%);
}

.md-area--add:before, .md-area--add:after {
    position: absolute;
    content: "";
    width: 25px;
    height: 3px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #fff;
}

.md-area--add:after {
    transform: rotate(90deg);
}

@media screen and (max-width: 1480px) {
    .input-box--control.fx-width {
        width: 85px;
    }
}

@media screen and (max-height: 900px) {
  .product-thumbnial-wrapper ul li {
    width: 97px;
    height: 97px;
    flex: 0 0 97px;
  }
  .middle-sec-right .row {
      padding: 14px 0;
  }
  .md-area li {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
  }
}



.productdesigner-view-viewdesign .custom-design td { box-sizing: border-box; height: 380px; max-width: 380px; padding: 0 5px; position: relative; text-align: center; vertical-align: middle; width: 25%; }
.productdesigner-view-viewdesign .custom-design td img { max-height: 400px; margin-bottom: 30px;}
.productdesigner-view-viewdesign .custom-design .product-design { /*min-height: 350px;*/ vertical-align: middle; }
.catalog-product-edit .save-settings { margin-bottom: 20px; }
@media (min-width:1200px) {
  .productdesigner-login .modal-popup .modal-inner-wrap { width: 42%; }
}


.group-order-details-wrapper { display: inline-block; margin: 20px 0; width: 100%; }
.group-order-details-wrapper .content-header h3 { margin-bottom: 0; }
.group-order-details-wrapper .product-designer-admin-table table { text-align: center; }
.group-order-details-wrapper .product-designer-admin-table th, .group-order-details-wrapper .product-designer-admin-table td { padding: 5px 10px; }
.product-design-option, .view-designs-buttons { bottom: 0; left: 50%; margin-left: -38%; position: absolute; }
.data.iew.custom-design tr { float: left; width: 100%; }

/*Clipart Parent Categories*/
.productdesigner-clipart-edit #parent_categories,
.productdesigner-masking-edit #parent_categories {
  float: left;
  clear: both;
}



.productdesigner-view-viewdesign div.content-header { background: #eee; margin-bottom: 20px;}
.productdesigner-view-viewdesign div.content-header table { width: 100%;}
.productdesigner-view-viewdesign div.content-header table td { padding: 10px; vertical-align: middle;}
.productdesigner-view-viewdesign div.content-header table td h3 { margin: 0; padding: 0;}
.productdesigner-view-viewdesign div.content-header table td.form-buttons { text-align: right;}
.productdesigner-view-viewdesign .custom-design td {width: 200px; border: 1px solid #ddd; padding: 10px; vertical-align: top; max-width: 200px; }
.productdesigner-view-viewdesign .custom-design .product-design-option,
.productdesigner-view-viewdesign .custom-design .view-designs-buttons { margin: 0; padding: 0; left: 0; right: 0; bottom: 10px;}
.productdesigner-view-viewdesign .custom-design .product-design-option button,
.productdesigner-view-viewdesign .custom-design .view-designs-buttons button { margin: 5px; font-size: 12px; }

.byi-custome-heading { background: #eee; margin-bottom: 20px; padding: 15px; border: 1px solid #ccc}

.byi-custome-heading:after,
.byi-custome-heading:before { display: table; content: "";}
.byi-custome-heading:after { clear: both;}

.byi-custome-heading h3 { margin: 0; padding: 0; float: left; line-height: 30px;}
.byi-custome-heading .byi-ch-action { float: right;}

.byi-grid .hor-scroll { margin-bottom: 20px;}
.byi-grid table.custom-design { width: 100%;}

.byi-grid ul { width: 100%; vertical-align: top; border-left: 1px solid #ddd; display: flex;flex-direction: row;flex-wrap: wrap;text-align: center;list-style: none;}
.byi-grid ul li { width: 25%; float: left; position: relative; border: 1px solid #ddd; border-left: none; margin-top: -1px; padding: 10px;}
.byi-grid ul li .product-design { height: 250px; position: relative;}
.byi-grid ul li .product-design img { position: absolute; top: 0; bottom: 0; left: 0; right: 0;  margin: auto; max-height: 100%; max-width: 100%; }
.byi-grid ul li .product-design-option, 
.byi-grid ul li .view-designs-buttons { bottom: 10px; position: absolute; left: auto; margin: 10px 0 0;width: 100%;}


#productdesigner_text_general_limit_alert,#productdesigner_quotes_general_quotes_alert,#productdesigner_upload_image_general_instruction_text ,#productdesigner_upload_image_general_limit_alert ,#productdesigner_upload_image_general_confirm_image_text,#productdesigner_clipart_general_limit_alert{max-width: 670px;
  max-height: 350px;}
.product-thumbnial-wrapper .prodimg{
    padding-top: 30px;
}
.product-thumbnial-wrapper .prodimg:after{
        bottom: 40px;

}
.product-thumbnial-wrapper .prodimg .owl-stage-outer{
        padding: 0 0 30px;
}
.product-thumbnial-wrapper .prodimg .owl-dots{
    display: none;
}
.product-thumbnial-wrapper .owl-nav button{
        position: absolute;
    cursor: pointer;
    border: none;
    top: 50%;
    padding: 0;
    z-index: 9;
    width: 35px;
    height: 35px;
    font-size: 0;
    outline: none;
    box-shadow: none;
    text-decoration: none;
    transform: translateY(-50%);
    background-color: transparent;
}
.product-thumbnial-wrapper .owl-nav button.owl-next{
        left: auto;
    right: 0;
    transform: translateY(-50%)rotate(180deg);
}
.product-thumbnial-wrapper .owl-nav button:before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    margin: auto;
    display: block;
    transform: rotate(
45deg
);
    border-left: 3px solid gray;
    border-bottom: 3px solid gray;
}
.product-thumbnial-wrapper .owl-nav button span {
    display: none;
}
.product-thumbnial-wrapper ul .owl-item li{
        margin: 0 auto;

}
/*.product-thumbnial-wrapper ul .owl-item li.active{
    border-bottom: 1px solid #a6a19e;
        border-radius: 12px;
        border-color: #eb5202;

}*/

.border-partation{
        border-bottom: 1px solid #d8d8d8;
}
.success-msg-popup.modal-popup .modal-inner-wrap {
    max-width: 500px;
}
.success-msg-popup.modal-popup .modal-inner-wrap .head-modal{
    font-size: 16px;
}
.success-msg-popup.modal-popup .modal-inner-wrap .modal-content{
    padding-bottom: 0;
}

input[disabled] {
    background-color: #ebebeb;
}