:root {
    --leftcont-width: 440px;
    --midleftcont-width: 395px;
    --midnarrowleftcont-width: 382px;
    --narrowleftcont-width: 250px;
    --icon-right-pos: 5px;
    --customizer-width: 1166px;
    --customizer-width2: 1125px;
    --cta-icon-width: 24px;
    --sync-box-icon-height: 50px;
    --sync-box-height: 30px;
    --morecolor-article-dim: 500px;
    --morecolor-article-h: 700px;
    --label-article-dim: 550px;
    --label-article-h: 80%;
    --replacement-search: 500px;
}

.customizer, .previewMode {
    max-width: var(--customizer-width) !important;
    padding-top: 0 !important;
}

.previewMode {
    width: var(--customizer-width);
}

    .customizer div.idRightContainer0, .idesigner .previewMode {
        padding: 15px;
        background-color: white;
        display: inline-block;
    }

    .customizer div.leftContainer {
        padding: 0;
        width: 100%;
        display: inline-block;
    }
    .customizer .idRightContainer0{
        max-width: initial;
    }
    .idRightContainer0 .selectedView {
        margin: auto;
    }

        .idRightContainer0 .selectedView.scale16590 {
            width: 590px;
            height: 630px !important;
        }


.promolistitem {
    width: 100%;
    display: block;
    vertical-align: top;
    text-align: center;
}

.customizer .c-tab-body {
    background-color: transparent;
    border-top: none;
    padding: 0;
    display: block;
}

.entity-topRightMenu {
    float: right;
    position: absolute;
    top: 8px;
    right: 8px;
}
.entityCTA_dd.open {
    min-width: 165px;
    z-index: 1015;
}
    .entityCTA_dd.open .opprice {
        float: right;
    }


.entityCTA_dd_sqv.open {
    max-height: 50%;
    overflow-x: hidden;
    left: 15px;
    border-radius: 0;
    width: inherit;
}

.h6-prompt {
    width: 340px;
    margin: auto;
}
.h6-cta {
    color: black;
    background-color: #f6f6f6;
    padding: 10px;
}

    .h6-cta .expand-cta:before {
        content: '»';
        width: 20px;
        height: auto;
        text-align: center;
        margin-left: 4px;
        font-weight: bold;
        font-size: 1.5rem;
        transform: rotate(90deg);
        position: absolute;
        top: -11px;
        right: -28px;
        color: #a77803;
    }

.prompt-warning {
    font-style: italic;
    font-size: .85rem;
    display: block;
    color: #e93800;
}

.addbranding, .addtoStore {
    text-align: center;
    font-size: 1rem;
    margin: auto;
    width: 50%;
}

.viewOptions {
    display: inherit;
}
    .customizer .idRightContainer0 .viewOptions.savedDesign {
        width: 90px;
    }

    .customizer .viewOptions img {
        width: 100%;
        height: auto;
    }

.bx div.colorOptions {
    width: 36px;
    height: 36px;
    margin: 0 5px 5px 0;
    box-shadow: 1px 1px 1px 1px silver;
    border-radius: 20px;
}

    .bx div.colorOptions img {
        border-radius: 20px;
    }

    .bx:hover {
        cursor: inherit;
        box-shadow: none;
    }
.bx .clkable:hover {
        opacity: inherit;
    cursor: inherit;
}

.bx .colorTile {
    box-shadow: 0px 0px 0px 1px #c0c0c091;
}

.bx .store-icons {
    position: relative;
    clear: both;
    cursor: pointer;
    overflow: hidden;
    padding: 9px 0;
}

.bx .artwork-location span {
    padding: 9px;
    background-color: #e2e2e2;
    font-weight: bold;
    display: block;
    border-radius: 5px;
    width: fit-content;
}

.bx .syncstores-list {
    max-height: 170px;
    overflow: auto;
}

    .bx .syncstores-list .colorName {
        display: flex;
        width: 70%;
    }
        .bx .syncstores-list .colorName span {
            width: 30px;
            height: 30px;
            border-radius: 25px;
            display: inline-flex;
            margin-right: 5px;
            box-shadow: 1px 1px 1px 1px silver;
        }

.bx .sync-date {
    line-height: var(--sync-box-height);
    width: 70%;
    float: right;
}

.bx .discontinued{
    color:red;
    font-size:1.25rem;
    padding: 7px 25px;
}

.bx .store-icon {
    /* float: left;
    width: var(--sync-box-icon-height);*/ 
    float: left;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .bx .store-icon img {
        max-width: var(--sync-box-icon-height);
    }

.bx .labelsCTA {
    width: auto;
    position: absolute;
    right: -15px;
    bottom: 15px;
}

.updatesBanner {
    width: auto;
    margin: auto;
    padding: 10px;
    top: 15px;
    font-size: .75rem;
    border-radius: 10px;
    position: relative;
    background-color: #fec63c5c;
    box-shadow: 1px 1px 1px 1px #ffb600;
    display: inline-block;
}


.colorOfferedLbl {
    clear: both;
    display: block;
    font-size: 1rem;
    text-align: left;
    padding: 0 0 10px 0;
}
    .colorOfferedLbl::before {
        content: " \2058";
        font-weight: bold;
        font-size: 1.25rem;
    }

.dupColorMessage {
    font-size: 0.7rem;
    text-align: left;
    color: orange;
    font-style: italic;
    /* box-shadow: 1px 1px 1px 1px silver;
        border-radius: 0 5px 10px;*/
    padding: 5px;
    margin: 10px 0;
    width: 200px !important;
}
        .dupColorMessage:before {
           /* content: "**";
            color: red;*/
        }

    .ArrowWrap.scale16 {
        max-width: 675px !important
    }

#arrowContent {
    z-index: 1001;
}
#idArrowWrap {
    position: initial;
}

.tooltip {
    border-bottom: none;
}

.fabricDetail {
    width: 100% !important;
}

.fabricDetailInfo .subscriptions {
    position: relative;
    line-height: 15px;
    margin-top: 6px;
}

div > div.custSpecInfo {
    z-index: 15;
}

.soldoutcta, .soldoutcta:hover {
    background-color: #8080807a;
    border-bottom: 2px solid #8080807a;
}
/*history block*/
div.product-history, div.product-skus, div.product-versions {
    margin-top: 15px;
    display: inline-block;
    position: relative;
    width: 100%;
    float: left;
    text-align: left;
    max-height: 25px;
    height: 25px;
    overflow: hidden;
    transition: .5s linear ease;
}
    div.product-history ul {
        font-size: .65rem;
        font-style: italic;
        width: 97%;
    }
.historyOpen {
    max-height: 200px !important;
    overflow: auto !important;
    height: auto !important;
}
.product-history li {
    padding:5px 0px;
}

.morehistory::after, .viewSkus::after, .viewVersions::after{
    content: '';
    background-image: url(https://assets.apliiq.com/images/customizer/v3/customizer-icons.png);
    background-repeat: no-repeat;
    background-size: 30px auto;
    position: absolute;
    right: 0px;
    background-position: center -363px;
    transform: rotate(-90deg);
    height: 25px;
    width: 25px;
    cursor: pointer;
}
.morehistory.open::after, .viewSkus.open::after, .viewVersions.open::after {
    transform: rotate(90deg);
}

/*history block ends*/


/*sku block*/
div.product-skus {
    margin-top: 40px;
}
    div.product-skus ul {
        font-size: .65rem;
    }

        div.product-skus ul li span:first-child {
            width: 50px;
            display: inline-block;
        }
        div.product-skus ul li span:last-child {
            text-transform: uppercase;
            padding-left:10px;
        }

.viewSkus {
    line-height: 25px;
}

.skusOpen {
    max-height: 400px !important;
    overflow: auto !important;
    height: auto !important;
}

/*sku block ends*/
/*versions block*/

    div.product-versions ul {
        font-size: .65rem;
    }

        div.product-versions ul li span:first-child {
            width: 50px;
        }

        div.product-versions ul li span:last-child {
            text-transform: uppercase;
            padding-left: 10px;
        }

.currentVersion {
    border: 1px solid;
    padding: 3px 5px;
    border-radius: 10px;
    font-weight: bold;
}

.viewVersions {
    line-height: 25px;
}

.versionsOpen {
    max-height: 400px !important;
    overflow: auto !important;
    height: auto !important;
}

/*versions block ends*/

/*item actions */
.bxCollapsed {
    /*width: var(--leftcont-width);*/
    clear: both;
    background-color: white;
    padding: 15px;
}

.bxItemCTA.addnote {
    right: var(--icon-right-pos) !important;
    bottom: 40px;
    top: initial;
    width: var(--cta-icon-width);
}
.bxItemCTA.upfile {
    right: var(--icon-right-pos) !important;
    bottom: 70px;
    top: initial;
    width: var(--cta-icon-width);
}
.bxItemCTA.removeService {
    right: var(--icon-right-pos) !important;
    bottom: 5px;
    width: var(--cta-icon-width);
}
.bxItemCTA.editCTA {
    right: var(--icon-right-pos) !important;
    top: 5px;
    width: var(--cta-icon-width);
}

.bxItemCTA.removeService:hover {
    content: "remove this service";
}

select.labelSel:hover {
    cursor:pointer;
}
.svgItemCode img.artloaded, img.preload {
   /* max-height: initial;
    max-width: 100%;
    width: 100%;
    height: auto;*/
}
.svgItemCode img:hover {
    cursor:default;
}
.item-open {
    height: 137px !important;
   
}
.item-open2 {
    height:70px !important;
    box-shadow: 0px 0px 1px 1px silver;
}
.item-open3{
    height:104px !important;
}
.fabricDetailInfo {
    width: 51% !important;
}
/*item actions ends */
/***display with bx as 33% instead of 100% of left side ***/
.bx33 {
    width: 33%;
    border: 1px solid #efefef !important;
    float: left;
    margin-right: 25px;
    height: 275px;
}

    .bx33 .svgItemCode {
        width: 150px;
    }

    .bx33 .fabricDetailInfo{
        width: 100%;
    }

    .bx33 li.fillcolor, .bx33 li.material, .bx33 li.filename {
        display: none;
    }
    /******/
.redTrim {
    border: 1px solid red;
}
.redFont {
    color:red;
}
.blueFont {
    color:blue;
}



.item-highlight {
    background-color: #00b79842;
}

.customizer .selectedView .isReplacement {
    font-size: .75rem;
    color: orange;
}

.product-title-description ul {
    max-width: initial;
    margin: 0 auto;
    text-align: left;
}
.product-title-description ul.designForm li label span {
    display: block;
    font-size: .7rem;
    color: #929292;
}
    .product-title-description ul.designForm li .designFormInputs {
        margin: 8px auto 30px;
        display: block;
        height: 35px;
        font-size: 16px;
        font-size: 1rem;
        width: 100%;
    }
/** new branding options modal***/
.apq-branding-grid-section {
    padding: 32px 20px;
    background: #ffffff;
}

.apq-branding-grid-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.apq-branding-grid-header {
    text-align: center;
    margin-bottom: 24px;
}

.apq-branding-grid-title {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: #222222;
}

.apq-branding-grid-subtitle {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #5a5a5a;
}

.apq-branding-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 300px));
    justify-content: center;
    gap: 24px;
}

.apq-branding-grid-card {
    width: 100%;
    max-width: 300px;
}

.apq-branding-grid-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f7f7f7;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.apq-branding-grid-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

.apq-branding-grid-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.52) 28%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0) 72% );
    pointer-events: none;
}

.apq-branding-grid-overlay {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    color: #ffffff;
}

.apq-branding-grid-card-title {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}

.apq-branding-grid-card-text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    max-width: 240px;
}

.apq-branding-grid-button {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 999px;
    background: #00b798;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

    .apq-branding-grid-button:hover,
    .apq-branding-grid-button:focus {
        background: #009e84;
        color: #ffffff;
        text-decoration: none;
    }

/***new branding options end****/

/**replacement modal**/


#modal .adjustheightto25 {
    height: 210px !important;
}


#modal .xserviceoptions, #modal .addNoteoptions {
    max-width: var(--morecolor-article-dim);
    max-height: var(--morecolor-article-h);
    /*max-height: calc(var(--morecolor-article-dim) / 2);*/
}


    #modal .xserviceoptions .rs-choice {
        width: 40%;
        font-size: .85rem;
        margin: 25px 10px;
        border: 1px solid transparent;
        box-shadow: 0px 0px 2px 1px silver;
    }

#modal .more-colorOptions, #modal .X-colorOptions {
    max-width: var(--morecolor-article-dim);
    max-height: var(--morecolor-article-h);
}

#modal .updateLabeloptions {
    max-width: var(--label-article-dim);
    max-height: var(--label-article-h);
}
    #modal .updateLabeloptions .labelselector {
        margin-left: 25px;
    }


#modal article.replacementOptions {
    max-width: 100%;
    max-height: 100%;
}

    #modal article.replacementOptions .search-area.search-result, #modal article.lsarticle .lbls-list {
        /*width: var(--replacement-search);*/
        display: inline-block;
        float: left;
        border: 1px solid #c0c0c0c7;
        width: inherit;
        cursor: pointer;
    }

    #modal article.replacementOptions .searchbox-cont {
        /*width: var(--replacement-search);*/
        overflow: hidden;
        border: 1px solid #636262;
        position: relative;
        /*margin: auto;*/
    }

    #modal article.replacementOptions .select-cont select {
        height: 32px;
        width: 80%;
        margin-bottom: 15px;
    }

    #modal article.replacementOptions .searchbox-cont div {
        background-position: -15px -908px;
        width: 25px;
        z-index: inherit;
    }

    #modal article.replacementOptions .searchbox-cont input {
        float: left;
        width: 84%;
        height: 100%;
    }

        #modal article.replacementOptions .searchbox-cont div {
            float: right;
            width: 32px;
            height: 32px;
        }

    #modal article.replacementOptions .searchbox-cont input {
        width: 82%;
    }

    #modal article.replacementOptions .searchbox-cont .searchXIcon {
        float: right;
        text-align: center;
        font-size: 3rem;
        line-height: 27px;
        border-left: 1px solid;
        cursor: pointer;
        width: 32px;
    }

    #modal article.replacementOptions .searchbox-cont input:valid {
        border: none;
    }

    #modal article.replacementOptions .inp-label {
        position: absolute;
        z-index: 0;
        left: 0;
        height: 100%;
        line-height: 30px;
        padding: 0px 0px 0px 5px;
        width: 100%;
        text-align: left;
        transition: .5s linear;
    }

        #modal article.replacementOptions .inp-label.sm-fnt {
            font-size: 8pt;
            line-height: 15px;
            height: auto;
            width: auto;
            color: #c0c0c073;
        }


    #modal article.replacementOptions .r-colorsContainer {
        /*max-height: 58%;*/
    }

    #modal article.replacementOptions .r-replacementWrapper {
        max-height: 81%;
        overflow-x: auto;
        padding: 0 15px;
    }

    #modal article.replacementOptions h6 {
        text-align: left;
    text-indent: 13px;
    padding: 10px;
    }

    #modal article.replacementOptions .grayScale {
        background-color: #80808094;
        border: none;
    }

    #modal article.replacementOptions .c-colors-cont {
        /*width: 75%;*/
        margin: auto;
        display: flex;
    }
        #modal article.replacementOptions .c-colors-cont .c-color {
            width: 50%;
            float: left;
        }

        #modal article.replacementOptions .c-colors-cont .n-colors-list {
            display: inline-block;
            float: left;
            cursor: pointer;
            padding: 5px 0;
            border-radius: 5px;
            box-shadow: 0 0 0 1px silver;
            margin: auto;
            width: 45%;
        }

            #modal article.replacementOptions .c-colors-cont .n-colors-list .entityCTA_dd_sqv.open {
                width: 50%;
                right: 15px;
                left: inherit;
            }


            #modal article.replacementOptions .c-colors-cont .n-colors-list .color-selected .selected-color {
                width: 88%;
                float: left;
                text-align: left;
                padding-left: 16px;
            }
            #modal article.replacementOptions .c-colors-cont .n-colors-list li input[type=image]
            , #modal article.replacementOptions .c-colors-cont .n-colors-list .color-selected input[type=image] {
                border-radius: 25px;
                margin-right: 10px;
                box-shadow: 0px 0px 0px 1px silver;
            }

            /*
        #modal article.replacementOptions .c-colors-cont .n-colors {
            width: 40%;
            float: right;
            padding-top: 8px;
        }

            #modal article.replacementOptions .c-colors-cont .n-colors .n-color {
                text-align: left;
                text-indent: 25px;
                cursor: pointer;
            }

                #modal article.replacementOptions .c-colors-cont .n-colors .n-color input[type=image], #modal article.replacementOptions .c-colors-cont .n-colors .color-selected input[type=image] {
                    border-radius: 25px;
                    margin-right: 10px;
                    box-shadow: 0px 0px 0px 1px silver;
                }

            #modal article.replacementOptions .c-colors-cont .n-colors .color-selected, .n-color-options div {
                font-size: 0.85rem !important;
                line-height: 40px;
                box-shadow: 0px 0px 0px 1px #c0c0c0c2;
                margin-bottom: 5px;
            }

            #modal article.replacementOptions .c-colors-cont .n-colors .color-selected {
                padding: 0px 0px 0px 10px;
                overflow: auto;
            }

                #modal article.replacementOptions .c-colors-cont .n-colors .color-selected .selected-color {
                    width: 90%;
                    float: left;
                    text-align: left;
                }

                #modal article.replacementOptions .c-colors-cont .n-colors .color-selected::after {
                    content: '\25BD';
                    float: right;
                }

                #modal article.replacementOptions .c-colors-cont .n-colors .color-selected:hover{
                    cursor:pointer;
                }

                #modal article.replacementOptions .c-colors-cont .n-colors .n-color-options {
                    height: 0;
                    overflow: hidden;
                    display: none;
                    border: 1px solid silver;
                }
                #modal article.replacementOptions .c-colors-cont .n-colors .n-color-options.open {
                    height: auto !important;
                    overflow: auto;
                    display: block;
                    max-height: 250px;
                }*/




    #modal article .change-warning {
        font-style: italic;
        font-size: .85rem;
        display: block;
        color: #e93800;
        position: absolute;
        bottom: 70px;
        padding: 0 5px;
    }

#modal article .rupdatedesign {
    bottom: 10px;
    position: absolute;
    margin: auto;
    width: 100%;
}
        #modal article .rupdatedesign button {
            width: 100%;
        }

#modal .lsarticle {
    max-width: 1125px;
}

#modal article .r-colorsContainer {
    position: absolute;
    /*bottom: 70px;*/
    z-index: 1;
    /*margin: 10px;*/
    background-color: white;
    width: 100%;
    overflow: auto;
    max-height: 80%;
}

#modal article .r-optionsContainer{
    width: max-content;
}
    #modal article .r-optionsContainer .r-options {
        display: inline-flex;
    }

#modal article .r-optionsContainer.selectAnGarment {
    max-height: 450px;
}

    /*#modal article .r-optionsContainer.selectAnGarment .r-options {
        display: inline-flex;
    }*/

article .cta-description {
    color: black;
    text-align: left;
    width: 90%;
    margin: auto;
    font-size: .8rem;
    line-height: 20px;
    padding: 15px 0;
}

article .productBx {    
	position: relative;
	display: inline-block;    
    margin: 1%;
    vertical-align: top;
    max-width: 175px;
    overflow: hidden;
}

article .productBxRep.BestMatched::before {
    content: "best matched";
    color: red;
    font-size: .7rem;
    background-color: #c0c0c07a;
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    position: absolute;
    z-index: 10;
    left: 0;
}

article .productBxRep.IsOriginal::before {
    content: "original garment";
    color: red;
    font-size: .7rem;
    background-color: #c0c0c07a;
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    position: absolute;
    z-index: 10;
    left: 0;
}

article .productBx.selectedrep, article .colorbox.selectedrepcolor, .colorTile.selectedrepcolor {
    /*box-shadow: 0px 0px 3px 2px #ffa500a3;
    border: 3px solid red;*/
    box-shadow: 0px 0px 3px 1px #00b798 !important;
}

article .showcolorOptions {
    cursor: pointer;
    font-size: .75rem;
    text-decoration: underline;
    color: blue;
}

article .label-services-selector {
    overflow-x: hidden;
    overflow-y: auto;
    height: 5%;
    padding: 0 15px;
}

article .r-selectoption-colors.colorItems{
    overflow-x: hidden;
    overflow-y: auto;
}

article.lsarticle .r-selectoption-colors.colorItems {
    height: 22%;
}

article.updateLabeloptions .r-selectoption-colors.colorItems {
    max-height: 36%;
}

article.addNoteoptions .r-selectoption-colors.colorItems {
    max-height: 42%;
}

article .colorbox.colorboxRep .toWait {
    right: 6px;
    max-width: 15px;
    top: 0px;
}
/*article .colorbox.selectedrepcolor::before {
    content: '✔';
    color: red;
    background-color: white;
    position: absolute;
    height: 15px;
    right: 0;
    width: 15px;
}*/
article .prodBx-wrap {
    width: auto;
}
article .indBasebox{
	position: relative;
	/*min-height: 505px;
	width: 47%;*/
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: top;
	text-align: right;
	/*margin: 1.1% 1.1% 7%;
	display: inline-block;*/
	max-width: 165px;
	transition:all 1s linear;
	min-height: 324px;
}

    article .indBasebox .imgCont {
        max-width: 90%;
        margin: auto;
    }

article .indBasebox img {
	height: auto;
	width: 100%;
	padding: 0;
	display: inline-block;
	position: relative;
	transition:opacity 1s ease-in-out;
	z-index:1;
	margin:0;
}

article .indBasebox .baseName,
article .indBasebox .sizeOptions, article .colorList,
article .priceRange{
	width:100%;
	overflow:hidden;
	text-align:left;	
    padding: 5px;    
    font-size: .85rem;
}

article .colorList {
    text-align: center;
    /*padding: 15px;*/
    position: relative;
}
    article .colorList.bg {
        /*background-color: #c0c0c05c;*/
    }

    article .colorList .r-selected-color {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 4px;
        font-size: .85rem;
    }

article .baseName{
	    font-size: 0.85rem;
    line-height: 20px;
    padding: 0;
}



/*article span.colorbox {
    width: 36px;
    display: inline-block;
    height: 36px;
    margin: 5px;
    overflow: hidden;
    box-shadow: 1px 1px 1px 1px silver;
    border-radius: 2px;
    position: relative;
}*/
article span.colorbox {
    /*width: 150px;*/
    display: inline-block;
    margin: 5px;
    padding: 5px;
    overflow: hidden;
    box-shadow: 0px 0px 0px 1px silver;
    border-radius: 5px;
    position: relative;
    background-color: #c0c0c026;
    line-height: 35px;
    text-align: left;
    font-size: .75rem;
    color: black;
}

    article span.colorbox:hover{
        cursor:pointer;
    }

    article span.colorbox.allcolors {
        display: block;
        width: auto;
        max-width: 180px;
        margin: auto;
        height: 47px;
        margin-bottom: 5px;
    }
        article span.colorbox.allcolors .colorwheel {
            background-image: url(https://assets.apliiq.com/images/Upload/colored-icon-sprite-for-artwork.png?v=v1);
            background-repeat: no-repeat;
            background-position: left -437px;
            height: 70px;
            width: 70px;
            float: left;
            background-size: 80% auto;
            display: inline-block;
            position: relative;
        }

    article span.colorbox input[type="image"] {
        border-radius: 20px;
        float: left;
        width: auto;
    }
    article span.colorbox .colorName {
        width: 92px;
        float: right;
        overflow: hidden;
    }

        article span.colorbox .colorName span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 90px;
            float: left;
            text-indent: 5px;
        }

/****/
.cstmHdrContain .anchorScroll {
    width: 100%;
}

/**new branding options ***/
@media (max-width: 767px) {
    .apq-branding-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .apq-branding-grid-title {
        font-size: 28px;
    }

    .apq-branding-grid-overlay {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    .apq-branding-grid-card-title {
        font-size: 20px;
    }

    .apq-branding-grid-card-text {
        font-size: 13px;
        max-width: none;
    }
}
/**new branding options end***/

@media screen and (min-width:768px){

	.promolistitem{
	width: 45%;
    display: inline-block;
    vertical-align: top;
	text-align:center;
	padding-top:50px;
	}
   /* #modal article.replacementOptions .r-replacementWrapper {
        overflow: hidden;
    }*/

   /* #modal article.replacementOptions {
        max-width: 80%;
        max-height: 75%;
    }*/

    #modal .lsarticle {
        max-width: 650px;
        overflow: hidden;
    }

    article .indBasePrice {
        overflow: hidden;
        position: relative;
        z-index: 1;
        left: initial;
    }
	li.promolistitem{
		display: inline-block;
		width:40%;
	}
	.text{
		width:55%;
		vertical-align:top;
		padding-top: 15px;
		
	}
    #idArrowWrap {
        display: none;
    }

}

@media screen and (min-width:1023px){	
	/*article .indBasebox {		
		background-image: url('https://assets.apliiq.com/images/loading.gif');
		background-size:30px auto;
		background-position:center;
		background-repeat:no-repeat;
	}*/
	article .indBasebox a {
		background-color: #fff;
		min-height: 342px;
	}
    #modal article.replacementOptions {
        max-width: 710px;
        /* max-height: 95%;*/
    }
    #modal article .r-optionsContainer {
        overflow-x: auto;
        /*max-height: 60%;*/
    }

    
    .cstmHdrContain .anchorScroll {
        width: 60%;
    }

    .idRightContainer0.scale16 {
        float: left;
    }

    .idRightContainer0.scale16, .sldUp.scale16, .redTxt.scale16, .current-artwork-dim.scale16 {
        max-width: 710px;
        width: 710px;
    }

    .leftContainer.scale16 {
        max-width: var(--narrowleftcont-width);
        min-width: var(--narrowleftcont-width);
        float: right;
    }

    .mobileOnly {
        display: none !important;
    }
   /* .rvwListItm .selectItem {
        width: 150px !important;
    }*/
}

@media screen and (min-width: 1180px) {

    .customizer, .previewMode {
        max-width: var(--customizer-width2) !important;
    }

    .leftContainer.scale16 {
        max-width: var(--midnarrowleftcont-width);
        min-width: var(--midnarrowleftcont-width);
        float: right;
    }

    .tooltip:hover{
        cursor: initial;
    }

    .tooltip:hover .tooltiptext {
        visibility: hidden;
    }

    /*.previewMode.scale16 {
        width: 95%;
    }*/
    .mobileOnly {
        display: initial !important;
    }
}

@media screen and (min-width: 1250px) {

    .customizer, .previewMode {
        max-width: var(--customizer-width) !important;
    }

    .leftContainer.scale16 {
        max-width: var(--leftcont-width);
        min-width: var(--leftcont-width);
        float: right;
    }
}

@media screen and (min-width:1940px){
	
	.g-container{
		display:block;
		width:100%;
	}
	.garment-container{
		display:block;
		width:100%;
	}
}
@media screen and (min-width:1025px){
	article .indBasebox:hover .button {
		display:block;	
	}	
}

/*@media screen and (min-height:768px) {

    #modal article.replacementOptions .r-colorsContainer {
        max-height: 24%;
    }
}
*/