/*noinspection CssUnknownTarget*/
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

.leftcol {
    flex: 1 1 400px;
    margin-bottom: 20px;
    max-width: 560px;
}

.leftcol-top {
    overflow: hidden;
}

@media only screen and (max-width: 991px) {
    .leftcol {
        flex: 1 1 200px;
        max-width: 90vw;
    }
}

@media only screen and (max-width: 991px) and (min-width: 601px) {
    .product-options.ppd-options.col2 {
        margin-left: 0;
        padding-left: 40px;
        max-width: 380px;
    }
}

@media only screen and (max-width: 991px) and (min-width: 601px) {
    div.leftcol {
        max-width: 300px;
    }
}

@media only screen and (max-width: 768px) and (min-width: 601px) {
    div.row {
        margin: 0;
    }
}

.col2, .leftcol {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.ppd-options {
    position: relative;
    padding: 10px 17px;
    background-color: inherit;
}

.ppd-options.col0 {
    width: 100%;
}

.ppd-options.col1 {
    width: 100%;
    margin: 0 auto;
    border: 2px solid #BDBDBD;
    border-top: 1px solid #E0E0E0;
}

.ppd-options.col2 {
    flex: 0 0 450px;
    margin: 0 5px 20px 6px;
    max-width: 75%;
}

@media screen and (max-width: 600px) {
    .ppd-options.col2 {
        max-width: 90vw;
        padding: 0 0 10px 0;
    }

    .workArea .ppd-options .input label.radio, .col2.outsideWorkArea .input label.radio {
        font-size: 8pt;
        line-height: 8pt;
    }

    .ppd-options.col1, .ppd-options.col0 {
        padding: 0 17px;
    }

    #ppd-modal-popup-content .ppd-options.col1 {
        padding: 0;
    }

    .ppd-options.col1 {
        border: none;
    }

    .workArea .leftcol {
        order: 1;
    }

    .workArea .ppd-options.col2 {
        order: 2;
    }

    #ppd-modal-popup-content .ppd-options.col1 {
        pointer-events: none;
        display: block !important;
    }

    #ppd-modal-popup-content .leftcol-top {
        width: 100%;
        padding: 15px 0 5px;
    }

    #ppd-modal-popup-content > .leftcol-top > .product-options.ppd-options.col1 > div.input, #ppd-modal-popup-content > .leftcol-top > .ppdbuttons {
        display: none !important;
    }

    div.leftcol {
        margin-bottom: 0;
    }

    div.workSpace {
        margin: 0 auto;
    }

    div.workSpace:not(.floating) {
        min-height: 180px;
    }

    div.input.required {
        overflow: hidden;
    }
}

.workSpace .upper-canvas {
    box-shadow: none;
    transition: box-shadow 0.3s ease-in-out;
}

.workSpace.floating .upper-canvas {
    box-shadow: none;
    width: 100% !important;
}

.workSpace.floating {
    box-shadow: grey 0 0 10px;
}

/*noinspection CssReplaceWithShorthandSafely - Needed to overwrite inherited properties */
.workSpace.floating .canvas-container .lower-canvas {
    border: none;
    border-bottom: none;
}

.workSpace.floating:not(.fullscreen) canvas:not(.upper-canvas) {
    pointer-events: auto;
}

.workSpace.floating:not(.fullscreen) {
    pointer-events: none;
}

.workSpace .canvas-container {
    float: left;
    box-sizing: content-box;
    max-height: 70vh;
    /*    TODO AUTO HEIGHT */
}

.workSpace .canvas-container.sticky {
    position: fixed !important;
    top: 120px;
}

.workSpace .canvas-container.sticky .loading-container {
    top: 50px;
}

.control-template {
    display: none !important;
}

.ppdbuttons {
    width: 100%;
    text-align: center;
    display: inline-block;
    margin-top: 10px;
}

.ppdbuttons .other-themes {
    display: none;
}

#ppd-builder {
    visibility: initial;
    z-index: 3;
    max-width: 614px; /* TODO This is just to get around funky sizing on Editions theme. Need to find a better way */
}

.workArea .heading, .col2.outsideWorkArea .heading {
    font-size: 22pt;
    line-height: 22pt;
    text-align: center;
    margin: 7px 0;
}

.workArea {
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    position: relative;
    visibility: hidden;
}

.ppd-controls .scroll {
    padding: 0 2px;
    cursor: pointer;
}

.product-options .customoption .scroll {
    position: absolute;
    left: 0;
    line-height: 38px;
    top: 50%;
    transform: translate(0, -50%);
    padding: 0 2px;
    cursor: pointer;
}

.product-options .customoption .scroll.right {
    right: 0;
    left: auto;
}

.graphic.ppd-controls .background.texture {
    background-color: grey;
}

.graphic.ppd-controls .options .graphic img, .graphic.ppd-controls .options .graphic span, .theme-select .theme img {
    object-fit: cover;
    max-width: 80px;
    max-height: 55px;
    height: 100%;
}

.graphic.ppd-controls .options .graphic, .theme-select .theme {
    max-width: 90px;
    height: 65px;
    min-width: 65px;
    text-align: center;
    border: 1px lightgrey solid;
    padding: 4px;
    display: inline-block;
    vertical-align: top;
    margin: 2px;
    position: relative;
    cursor: pointer;
    line-height: 32px;
}

.graphic.ppd-controls .options .graphic.selected, .theme-select .theme.selected {
    border: #0fb0f2 3px solid;
    padding: 2px;
}

.text.ppd-controls .options {
    overflow: visible;
}

fieldset.text.ppd-controls {
    border: 1px solid lightgrey;
    border-radius: 3px;
    padding: 0 8px 4px;
    margin-top: 0;
    min-width: 0;
}

fieldset.text.ppd-controls legend.title {
    font-weight: bold;
    padding: 0 5px;
    width: auto;
    margin-bottom: 0;
    font-size: 14px;
    border-bottom: none;
    color: inherit;
    display: block;
}

.color.ppd-controls .color-button {
    display: inline-block;
    width: 61px;
    height: 47px;
    margin: 4px;
    border: solid 1px darkgrey;
    cursor: pointer;
    vertical-align: middle;
}

.color.ppd-controls .color-button.selected {
    width: 65px;
    height: 51px;
    border: #0fb0f2 3px solid;
    margin: 2px;
}

.text.ppd-controls .setTextFont {
    cursor: pointer;
    color: #646363;
    background-color: #fafafa;
    border-color: #646363;
    margin: 1px 3px;
    padding: 6px 8px;
    border-style: solid;
    border-width: 1px;
    vertical-align: middle;
    text-transform: initial;
}

.text.ppd-controls .setTextFont.selected {
    border-color: black;
    border-width: 2px;
    margin: 0 2px;
}

.text.ppd-controls .setTextFont:active {
    box-shadow: none;
    background-color: lightgrey;
}

.text.ppd-controls .setTextColor {
    padding: 8px;
    line-height: 15px;
    display: inline-block;
    min-width: 41px;
    height: 30px;
    margin: 4px;
    border: solid 1px darkgrey;
    cursor: pointer;
    vertical-align: middle;
}

.text.ppd-controls .setTextColor.selected {
    min-width: 45px;
    height: 34px;
    border: #0fb0f2 3px solid;
    margin: 2px;
}

.text.ppd-controls .colorArea {
    display: block;
    width: 100%;
    vertical-align: top;
    overflow: hidden;
    position: relative;
}

.text.ppd-controls .alignArea {
    display: flex;
    justify-content: center;
}

.text.ppd-controls .alignArea .text-align {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 3px;
    border: 0;
    background: transparent;
}

.text.ppd-controls .alignArea .text-align img {
    max-width: 100%;
    max-height: 100%;
}

.text.ppd-controls .fontArea {
    display: block;
    width: 100%;
    vertical-align: top;
    position: relative;
}

.text.ppd-controls .fontArea .fonts {
    display: inline-block;
    vertical-align: top;
    width: 91%;
    overflow-x: scroll;
    position: relative;
    /*noinspection CssInvalidPropertyValue*/
    overflow: -moz-scrollbars-none;
}

.ppd-controls .options::-webkit-scrollbar,
.ppd-controls .options .fontArea .fonts::-webkit-scrollbar,
.ppd-controls .options .colorArea .colors::-webkit-scrollbar,
.ppd-options .customoption .options.scroll-area::-webkit-scrollbar
{
    display: none;
}

.text.ppd-controls .colors {
    display: inline-block;
    vertical-align: top;
    width: 91%;
    overflow-x: scroll;
    position: relative;
}

.text.ppd-controls .setTextFont:hover, .text.ppd-controls .setTextColor:hover {
    background-color: #f1f1f1;
}

.step-header {
    position: absolute;
    line-height: 16px;
    top: -14px;
}

.step-header .steptitle {
    font-weight: 700;
    background-color: transparent;
}

.theme-select {
    position: relative;
}

.theme-select .scroll {
    position: absolute;
    top: 63%;
    left: 0;
    margin-top: -0.5em;
    line-height: 1em;
}

.theme-select .scroll.right {
    right: 0;
    left: auto;
}

.ppd-controls .scroll {
    position: absolute;
    left: 0;
    line-height: 38px;
    top: 50%;
    transform: translate(0, -50%);
}

.ppd-controls .scroll.right {
    right: 0;
    left: auto;
}

.ppd-controls {
    margin-top: 22px;
    position: relative;
}

.scroll-area {
    margin: 0 11px;
    overflow-x: scroll;
    white-space: nowrap;
}

.ppd-controls .options {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    /*noinspection CssInvalidPropertyValue*/
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

.product-view .product-name h1 {
    margin-top: 0;
}

.workArea .ppd-options {
    vertical-align: top;
    display: flex;
    display: -webkit-flex;
    flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
}

.workArea .ppd-options .input, .col2.outsideWorkArea .input {
    margin-bottom: 3px;
    position: relative;
    z-index: 2;
}

.workArea .ppd-options .input label, .col2.outsideWorkArea .input label {
    width: 100%;
    padding-right: 15px;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 12pt;
    line-height: 12pt;
    text-align: left;
    padding-top: 15px;
    display: inline-block;
}

.workArea .ppd-options .input label *, .col2.outsideWorkArea .input label * {
    font-weight: normal;
}

.workArea .ppd-options .input .label-max-length, .col2.outsideWorkArea .input .label-max-length {
    font-size: 0.8em;
    float: right;
}

.workArea .ppd-options .input .label-max-length .num-chars, .col2.outsideWorkArea .input .label-max-length .num-chars {
    font-weight: bold;
}

.ui-selectmenu-text .label-max-length {
    font-size: 0.6em;
    float: right;
    font-weight: 300;
    height: 0;
    overflow: visible;
}

.ui-selectmenu-text .label-max-length .num-chars {
    font-weight: bold;
}

.workArea .ppd-options .text-input, .col2.outsideWorkArea .text-input {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    font-family: inherit;
    margin-bottom: initial;
}

.workArea .ppd-options .text-input input, .col2.outsideWorkArea .text-input input {
    float: right;
}

.workArea .ppd-options .text-input::placeholder, .col2.outsideWorkArea .text-input::placeholder {
    color: #a9a9a9;
}

.input.required.complete:after {
    content: '\2713';
    color: limegreen;
}

.input.required.incomplete:after {
    content: '\2717';
    color: red;
}

.input.required.lowres:after {
    content: '\26a0' !important;
    color: orangered !important;
}

.input.required:after {
    position: absolute;
    top: 22px;
    right: -15px;
}

.input.required.text:after {
    top: 33px;
    right: 0;
}

.clickable {
    cursor: pointer;
}

@media screen and (max-width: 599px) {
    body > .popover > .popover-content {
        white-space: normal;
    }
}

body > .popover > .popover-content div {
    display: inline-block;
}

.ui-dialog-buttonset button {
    border: 1px solid #d3d3d3;
    background: #e6e6e6;
    font-weight: normal;
    color: #555555;
    padding: 5px;
    border-radius: 3px;
}

.ppdbuttons > input[type=radio], ul.options-list li input[type=radio].product-custom-option.radio, .canvas-frame-orientation li input[type=radio] {
    display: none !important;
}

.ppdbuttons > input[type=radio] + label {
    display: inline-block;
    padding: 4px 12px;
    margin: -2px -2px 2px;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
    background-image: -o-linear-gradient(top, #fff, #e6e6e6);
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.options-list li input[type=radio] + .label {
    display: inline-block;
    padding: 4px 12px;
    margin: 2px;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.ppdbuttons > input[type=radio]:checked + label {
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    background: #e0e0e0 none;
}

.options-list li input[type=radio]:checked + .label {
    border: 2px solid black;
    margin: 0;
}

.ppdbuttons > input[type=radio] + label:first-of-type {
    border-radius: 10px 0 0 10px;
}

.ppdbuttons > input[type=radio] + label:last-of-type {
    border-radius: 0 10px 10px 0;
}

.options-list li input[type=radio] + .label label {
    margin: 0;
    font-size: 11px;
    padding: 5px;
    cursor: pointer;
    width: 64px;
}

.options-list li input[type=radio] + .label {
    padding: 0;
}

.options-list li input[type=radio] + .label label .price-notice {
    font-size: 10px;
    line-height: 12px;
    padding: 0;
    display: block;
    font-weight: normal;
}

.options-list li input[type=radio] + .label label .price-notice .price {
    font-weight: normal;
}

.options-list {
    text-align: center;
}

#dialog-form {
    position: fixed;
    z-index: 2147483641;
    width: 500px;
    max-width: 100vw;
    background-color: whitesmoke;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.33);
    -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.33);
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.33);
    display: none;
    padding: 5px 0;
    text-align: center;
}

#dialog-form .cancel {
    /*noinspection CssNoGenericFontName*/
    font-family: FontAwesome;
    font-size: 16px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 10px;
    cursor: pointer;
}

#product-options-wrapper {
    width: 100%;
    margin: 13px 0 0;
}

.options-list .label {
    color: #000;
    text-align: left;
}

.product-options dt, .product-options dd {
    margin: auto 0;
}

.product-options dd {
    flex-grow: 2;
    -webkit-flex-grow: 2;
    margin: 0 15px 0 5px;
}

.customoption {
    margin-top: 10px;
    margin-bottom: 5px;
}

.customoption .options-list {
    margin-bottom: 0;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    /*noinspection CssInvalidPropertyValue*/
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

.customoption .options-list::-webkit-scrollbar {
    display: none;
}

div.workArea .scroll-area.twoRows, .col2.outsideWorkArea .scroll-area.twoRows {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

@media only screen and (max-width: 600px) {
    div.workArea .scroll-area.twoRows, .col2.outsideWorkArea .scroll-area.twoRows {
        display: block;
        height: auto !important;
    }
}

.customoption .options-list.scroll-area {
    margin: 0 11px;
}

.customoption .title {
    font-weight: 600;
    font-size: 12pt;
    margin: 0 0 5px;
}

.customoption .content {
    margin: 0 auto;
    float: none;
    text-align: center;
    position: relative;
    max-height: initial;
}

.customoption .content .graphic {
    display: inline-block;
    margin: 2px;
    cursor: pointer;
}

.customoption .content .graphic.selected {
    border: 2px solid black;
    margin: 0;
}

.customoption .content .graphic img {
    margin: 5px;
}

.zoomOption label {
    font-weight: normal;
}

.zoomOption {
    margin-right: 10px;
    display: inline-block;
}

.workArea > .product-shop {
    position: relative;
    height: 20px;
    top: -40px;
}

.fonts.dropdown {
    text-align: center;
}

.fonts.dropdown button.dropdown-toggle {
    width: 100%;
    display: inline-block;
    padding: 4px 12px;
    margin: 2px -2px 0;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
    background-image: -o-linear-gradient(top, #fff, #e6e6e6);
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
    /*noinspection CssInvalidPropertyValue*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fonts.dropdown.open button.dropdown-toggle {
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    background: #e0e0e0 none;
}

#unsupported-browser {
    display: none;
}

.loading-container {
    z-index: 900;
    text-align: center;
    padding: 6px 10px;
    border-radius: 5px;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sticky .loading-container {
    top: 100px;
}

.loading-container.whole-page {
    -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.7);
    position: fixed;
    background-color: whitesmoke;
}

.loading-container.whole-page p {
    font-size: 1.6em;
    font-weight: bold;
    margin: 0;
}

#dialog-form .message {
    padding: 0 15px;
    font-size: 1.2em;
}

.builder-colors {
    display: none;
}

div.ui-selectmenu-menu.ui-front.ui-selectmenu-open, span.ui-selectmenu-button span.ui-selectmenu-text {
    text-align: left;
    font-weight: 600;
}

span.ui-selectmenu-button span.ui-selectmenu-text {
    padding: .8em 4.2em .8em 2em;
}

div.ui-selectmenu-menu.ui-front.ui-selectmenu-open span.alt, span.ui-selectmenu-text span.alt {
    color: #BBB;
}

div.ui-selectmenu-menu.ui-front.ui-selectmenu-open span.price-savings, span.ui-selectmenu-text span.price-savings {
    color: #AAA;
    font-weight: bold;
    text-decoration: line-through;
    font-size: 12px;
}

span.ui-selectmenu-button {
    background: none;
}

.ui-menu li.ui-menu-item {
    padding: .45em 2em;
}

.ui-menu li.ui-menu-item > .out::after {
    content: '<out of stock>';
}

.ui-menu li.ui-menu-item.ui-state-focus {
    background: #EEE;
    font-weight: inherit;
}

div#ppd-modal-popup {
    position: absolute;
    height: 100%;
}

div#ppd-modal-popup-content {
    position: absolute;
    top: 40vh;
}

div.ui-selectmenu-menu.ui-front.ui-selectmenu-open {
    z-index: 2147483641;
}

.scroll-left, .scroll-right {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

#ppd-modal-popup-content .customoption .title {
    font-size: 2em;
    font-weight: 200;
    margin: 1.5em;
    padding-bottom: 0.2em;
    color: #333;
    border-bottom: 3px double #333;
    left: 0;
    right: 0;
}

div#ppd-modal-popup-content .customoption .title {
    text-align: left;
    margin: 0.8em 1.5em 0.5em;
}

div#ppd-modal-popup-content .customoption .content {
    margin: 0 1.5em 1.5em;
}

div#ppd-modal-popup-content .customoption {
    width: 100%;
    margin: 0;
}

span.close-ppd-modal-popup {
    position: absolute;
    top: 0;
    right: 0;
    margin: 3px;
    line-height: 20px;
    font-size: 20px;
    color: red;
    cursor: pointer;
    z-index: 2;
}

@media only screen and (max-width: 430px) {
    div.dialogBg div.dialog {
        top: 5vh;
    }
}

.workSpace:not(.floating) .canvas-sizer {
    width: 100%;
    z-index: -1;
    height: initial !important;
    display: block;
}

.workSpace.floating .canvas-sizer {
    max-height: 30vh;
    padding-bottom: 0 !important;
    width: 100%;
    z-index: -1;
}

.hideDependsInput {
    display: none !important;
}

@media only screen and (min-width: 768px) {
    .workSpace .canvas-container.sticky {
        position: fixed !important;
        top: 8px;
    }
}

@media only screen and (max-width: 767px) {
    .workSpace .canvas-container.sticky {
        position: fixed !important;
        top: 8px;
    }
}




/* Begin Custom Dinkleboo styles */

.product-view div.product-options-bottom {
    padding: 10px;
    line-height: 35px;
}

#dialog-form h1 {
    border-bottom: solid 1px lightgrey;
    padding: 0 0 4px 0;
    margin-bottom: 7px;
    font-weight: bold;
    margin-top: 0;
}

#dialog-form button {
    padding: 7px 10px;
    color: white;
    margin: 5px 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
    border: none;
}

#dialog-form button {
    background: #f31d96;
    border: 2px solid #ed1d99;
    border-radius: 10px;
}

#dialog-form button.button2 {
    color: #f31d96;
    background: transparent;
}

.product-view div.product-options-bottom {
    border: none;
}

.ppd-options.col2 {
    border: none;
}

.builder-colors .one {
    color: #0fb0f2;
}

.builder-colors .two {
    color: #444444;
}

@media (min-width: 768px) and (max-width: 1200px) {
    div.col-left.sidebar.col-xs-12.col-sm-3 {
        display: none;
    }

    div.col-main.col-xs-12.col-sm-9 {
        width: 100%;
    }
}

div.ui-selectmenu-menu.ui-front.ui-selectmenu-open span.price, span.ui-selectmenu-text span.price {
    color: #0fb0f2;
}

div.product-view .product-img-box ul.thumbnail-images li.selection-indicator {
    border: 2px dashed #0fb0f2;
}

div.product-options .frame-controls > span .options .color-option.selected > button {
    border: 2px solid #0fb0f2;
}

div.product-options dd.product-type .product-type-option.selected img {
    border: 2px solid #0fb0f2;
}

.options-list li input[type=radio]:checked + .label {
    border-color: #0fb0f2;
}

.text.ppd-controls .setTextFont.selected {
    border-color: #0fb0f2;
    color: #0fb0f2;
}

.graphic.ppd-controls .options .graphic, .theme-select .theme, .color.ppd-controls .color-button, .options-list li input[type=radio] + .label, .options-list li input[type=radio] + .label label img, .text.ppd-controls .setTextColor, .text.ppd-controls .setTextFont {
    border-radius: 8px;
}

.col2.outsideWorkArea {
    flex: initial;
    margin: 1em 0 0;
    max-width: initial;
    padding: 0 ;
    vertical-align: top;
    display: flex;
    display: -webkit-flex;
    flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
}

.col2.outsideWorkArea div.input {
    position: relative;
}

.col2.outsideWorkArea .input .label-max-length {
    font-size: 0.8em;
    float: right;
}

.col2.outsideWorkArea .ppd-options .input label {
    padding-right: 1em;
}

.customoption .content .graphic {
    line-height: 0;
}

#trustpilot-widget-trustbox-0-wrapper {
    z-index: 2 !important;
}