.cpd-popup {/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ }
.cpd-popup html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% }
.cpd-popup body { margin: 0 }
.cpd-popup article, .cpd-popup aside, .cpd-popup footer, .cpd-popup header, .cpd-popup nav, .cpd-popup section { display: block }
.cpd-popup h1 { font-size: 2em; margin: 0.67em 0 }
.cpd-popup figcaption, .cpd-popup figure, .cpd-popup main { display: block }
.cpd-popup figure { margin: 1em 40px }
.cpd-popup hr { box-sizing: content-box; height: 0; overflow: visible }
.cpd-popup pre { font-family: monospace, monospace; font-size: 1em }
.cpd-popup a { background-color: transparent; -webkit-text-decoration-skip: objects }
.cpd-popup abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted }
.cpd-popup b, .cpd-popup strong { font-weight: inherit }
.cpd-popup b, .cpd-popup strong { font-weight: bolder }
.cpd-popup code, .cpd-popup kbd, .cpd-popup samp { font-family: monospace, monospace; font-size: 1em }
.cpd-popup dfn { font-style: italic }
.cpd-popup mark { background-color: #ff0; color: #000 }
.cpd-popup small { font-size: 80% }
.cpd-popup sub, .cpd-popup sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
.cpd-popup sub { bottom: -0.25em }
.cpd-popup sup { top: -0.5em }
.cpd-popup audio, .cpd-popup video { display: inline-block }
.cpd-popup audio:not([controls]) { display: none; height: 0 }
.cpd-popup img { border-style: none }
.cpd-popup svg:not(:root) { overflow: hidden }
.cpd-popup button, .cpd-popup input, .cpd-popup optgroup, .cpd-popup textarea { font-family: sans-serif; color: #000; font-size: 100%; line-height: 1.15; margin: 0 }
.cpd-popup select {color:#fff}
.cpd-popup button, .cpd-popup input { overflow: visible }
.cpd-popup button, .cpd-popup select { text-transform: none }
.cpd-popup button, .cpd-popup html [type="button"], .cpd-popup [type="reset"], .cpd-popup [type="submit"] { -webkit-appearance: button }
.cpd-popup button::-moz-focus-inner, .cpd-popup [type="button"]::-moz-focus-inner, .cpd-popup [type="reset"]::-moz-focus-inner, .cpd-popup [type="submit"]::-moz-focus-inner {
border-style:none;
padding:0
}
.cpd-popup button:-moz-focusring, .cpd-popup [type="button"]:-moz-focusring, .cpd-popup [type="reset"]:-moz-focusring, .cpd-popup [type="submit"]:-moz-focusring {
outline:1px dotted ButtonText
}
.cpd-popup fieldset { padding: 0.35em 0.75em 0.625em }
.cpd-popup legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal }
.cpd-popup progress { display: inline-block; vertical-align: baseline }
.cpd-popup textarea { overflow: auto }
.cpd-popup [type="checkbox"], .cpd-popup [type="radio"] { box-sizing: border-box; padding: 0 }
.cpd-popup [type="number"]::-webkit-inner-spin-button, .cpd-popup [type="number"]::-webkit-outer-spin-button {
height:auto
}
.cpd-popup [type="search"] { -webkit-appearance: textfield; outline-offset: -2px }
.cpd-popup [type="search"]::-webkit-search-cancel-button, .cpd-popup [type="search"]::-webkit-search-decoration {
-webkit-appearance:none
}
.cpd-popup ::-webkit-file-upload-button {
-webkit-appearance:button;
font:inherit
}
.cpd-popup details, .cpd-popup menu { display: block }
.cpd-popup summary { display: list-item }
.cpd-popup canvas { display: inline-block }
.cpd-popup template { display: none }
.cpd-popup [hidden] { display: none }
.clearfix::after { content: ""; display: table; clear: both }
.cpd-container { margin: 20px 0 }
.cpd-container input[name^="cpdData["] { visibility: hidden; position: absolute; left: -1000px }
.cpd-container input:not([disabled]):focus, .cpd-container textarea:not([disabled]):focus, .cpd-container select:not([disabled]):focus { box-shadow: none }
.cpd-container button { width: 40% }
.cpd-container button:disabled { background: 5px url(../images/loader.gif) no-repeat; background-size: 20px }
.cpd-container .cpd-text-container { float: right; width: 55%; /*paolo*/ line-height: 15px; color: #000 }
.cpd-container .cpd-previews-container img { float: left; width: 24%; margin-top: 20px; margin-right: 1% }
.cpd-toggle { vertical-align: top; width: 50px; height: 45px; padding-top: 1px }
.cpd-toggle-switch { position: relative; display: block; width: 34px; height: 14px; margin: 16px 8px 0 8px }
.cpd-toggle-switch input { display: none }
.cpd-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(34,31,31,0.26); -webkit-transition: .4s; transition: .4s; opacity: 1; border-radius: 34px }
.cpd-toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: -3px; bottom: -3px; background-color: #F1F1F1; -webkit-transition: .4s; transition: .4s; box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24); opacity: 1; border-radius: 50% }
input:checked+.cpd-toggle-slider { background-color: #7FDEFB }
input:checked+.cpd-toggle-slider:before { background-color: #0BC7FF; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px) }
.cpd-slider { -webkit-appearance: none; width: 100%; height: 15px; position: absolute; padding: 0px; margin: 0px; cursor: pointer; left: 0px; margin-top: -7px !important; background: transparent }
.cpd-slider::-webkit-slider-runnable-track {
height:1px;
background:#676767;
border:none;
border-radius:3px
}
.cpd-slider::-webkit-slider-thumb {
-webkit-appearance:none;
border:none;
height:10px;
width:10px;
border-radius:50%;
background:#ffffff;
margin-top:-5px;
z-index:400;
position:relative
}
.cpd-slider:focus { outline: none !important }
.cpd-slider:active { outline: none !important }
.cpd-slider:focus::-webkit-slider-runnable-track {
background:#676767
}
.cpd-slider::-moz-range-track {
width:100%;
height:1px;
background:#676767;
border:none;
border-radius:0px
}
.cpd-slider::-moz-range-thumb {
-webkit-appearance:none;
border:none;
height:10px;
width:10px;
border-radius:50%;
background:#ffffff;
margin-top:-5px;
z-index:400;
position:relative
}
.cpd-slider::-moz-focus-outer {
border:0
}
@supports (-ms-ime-align: auto) {
.cpd-slider {
z-index:15;
margin-top:-5px !important;
-webkit-appearance:none;
width:100%;
height:15px;
position:absolute;
padding:0px;
cursor:pointer;
left:0px
}
}
.cpd-slider-label { position: absolute; background-color: #037d30; height: 1px; line-height: 5px; z-index: 12; border-radius: 3px; padding: 0; margin: 0; pointer-events: none }
.cpd-slider-label-background { background-color: grey !important; z-index: 11 !important; width: 100% }
@supports (-ms-ime-align: auto) {
.cpd-slider-label {
position:absolute;
background-color:#037d30;
height:1px;
line-height:5px;
z-index:12;
border-radius:3px;
padding:0;
margin:0;
pointer-events:none
}
}
.cpd-slider-container { position: relative; height: 1px; padding: 5px 0px }
.cpd-toolbar { padding: 10px }
.cpd-toolbar-control-element { cursor: pointer }
.cpd-toolbar-control-element.disabled { cursor: default; opacity: 0.5 }
.cpd-toolbar-control-element-container { margin-bottom: 15px }
.cpd-toolbar-control-element-label { margin-bottom: 5px; font-size: 12px; color: #fff }
.cpd-text-for-toggle { display: inline-block; text-align: center; width: 46px; color: #7F7F7F; font-size: 11px }
.cpd-toolbar-button { width: 24px; height: 24px; float: left; margin-right: 5px; padding: 5px; cursor: pointer; display: block; vertical-align: top }
.cpd-toolbar-button-element-container { float: left }
.cpd-text-button-row { overflow: hidden }
.cpd-color-button-pad { background: transparent -287px 0 url(../images/text-icons.png) no-repeat !important; width: 33px; height: 33px; border: 0; text-indent: -10000px; cursor: pointer }
.cpd-color-button-picker { position: absolute }
.cpd-color-button { margin-top: -5px }
.cpd-select { background: #3f3f3f; color: #ffffff; border: 0; -webkit-border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; width: 100%; font-family: 'Open Sans', sans-serif }
.cpd-select-font-field { float: left; width: calc(100% - 75px) }
.cpd-select-font-size { float: left; width: 60px; border-left: 1px solid #535353; padding-left: 10px }
.cpd-select-row { border-top: 1px solid #535353; border-bottom: 1px solid #535353; overflow: hidden; margin: 5px -10px !important }
.cpd-select-container { position: relative }
.cpd-select-container:before { content: '\25bc'; position: absolute; right: 10px; top: 14px; color: #ffffff; font-size: 7px }
.cpd-overall-price { color: red }
.cpd-required { color: red }
.cpd-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(51,51,51,0.55); z-index: 999 }
.cpd-popup, .cpd-popup * { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease }
.cpd-popup *:focus { outline-color: transparent; outline-style: none }
.cpd-container-images * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important }
.cpd-window-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1000 }
.cpd-window { position: absolute; background-color: #ffffff; top: 50px; bottom: 50px; left: 100px; right: 100px; font-family: Arial, Helvetica, sans-serif }

@media all and (max-width: 1200px) {
.cpd-window { left: 0; top: 0; bottom: 0; right: 0 }
}

@media all and (max-width: 768px) and (orientation: portrait) {
.cpd-window { height: 100% }
}
.cpd-main-container { position: absolute; right: 0; left: 370px; top: 0; bottom: 0; overflow: hidden }

@media all and (max-width: 768px) and (orientation: portrait) {
.cpd-main-container { position: relative; text-align: center; height: 300px; top: 0; left: 0 }
}
.cpd-container-images { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #ffffff }
.cpd-edit-bar { background-color: #535353; position: absolute; z-index: 10000000; top: 20px; left: 100px; display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none }
.cpd-edit-bar .cpd-edit-bar-button { width: 47px; height: 53px; float: left; background: url(../images/modify-icons.png) no-repeat; cursor: pointer }
.cpd-edit-bar .cpd-edit-bar-button.cpd-edit-bar-flip-vertical { background-position: 12px 10px }
.cpd-edit-bar .cpd-edit-bar-button.cpd-edit-bar-flip-horizontal { background-position: -40px 10px }
.cpd-edit-bar .cpd-edit-bar-button.cpd-edit-bar-center-horizontal { background-position: -94px 10px }
.cpd-edit-bar .cpd-edit-bar-button.cpd-edit-bar-center-vertical { background-position: -150px 10px }
.cpd-edit-bar .cpd-edit-bar-button.cpd-edit-bar-layer-down { background-position: -205px 10px }
.cpd-edit-bar .cpd-edit-bar-button.cpd-edit-bar-layer-up { background-position: -257px 10px }
.cpd-edit-bar .cpd-edit-bar-button.cpd-edit-bar-copy { background-position: -306px 10px }
.cpd-edit-bar .cpd-edit-bar-button.active, .cpd-edit-bar .cpd-edit-bar-button:hover { background-position-y: -43px; background-color: #037d30 }
.cpd-container-image { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: white }
.cpd-product-image { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-width: 100%; max-height: 100% }

@media all and (max-width: 768px) and (orientation: portrait) {
.cpd-product-image { max-height: 300px }
}
.cpd-canvas.lower-canvas { border: 0.2rem solid #C2C2C2 }
.cpd-canvas.lower-canvas.active { border: 0.2rem solid orange }
.cpd-canvas.upper-canvas:hover { border: 0.2rem solid orange }
.canvas-container { position: absolute !important }
.cpd-container-thumbnails { position: absolute; left: 0; bottom: 0; text-align: center; width: 100% }
.cpd-container-thumbnail { width: 50px; height: 50px; display: inline-block; margin: 0 5px; position: relative; cursor: pointer; border: 1px solid #e0e3e4; background-color: #fff; opacity: 0.9 }
.cpd-container-thumbnail:hover { box-shadow: rgba(0,0,0,0.16) 0 3px 10px, rgba(0,0,0,0.23) 0 3px 10px }
.cpd-thmubnail-active { border: 2px solid #037d30 }
.cpd-thumbnail { max-height: 50px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto }
.cpd-sidebar-bottom-buttons-container { position: absolute; right: 20px; top: 20px; z-index: 100000 }
.cpd-sidebar-bottom-buttons-container a:link, .cpd-sidebar-bottom-buttons-container a:visited, .cpd-sidebar-bottom-buttons-container a:hover, .cpd-sidebar-bottom-buttons-container a:active { font-size: 14px; color: #000; font-weight: bold;text-decoration: none; display: inline-block; margin-right: 15px }
.cpd-sidebar-bottom-buttons-container a i { background: url(../images/control-icons.png) no-repeat; float: left; width: 15px; height: 15px; margin: 5px 0 5px }
.cpd_control-save-icon { background-position: 0 0 }
.cpd-sidebar-bottom-buttons-container a i.cpd_control-delete-icon { background-position: 0 -36px }
.cpd-sidebar-bottom-buttons-container a.cpd-close-button { width: 26px; height: 26px; background: 0 -72px url(../images/control-icons.png) no-repeat; float: right; margin-right: 0; margin-top: -2px }
.cpd-sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 370px; background-color: #3f3f3f }

@media all and (max-width: 768px) and (orientation: portrait) {
.cpd-sidebar { position: static; width: 100%; height: calc(100% - 300px) }
}
.cpd-tab-container { background-color: #464646; width: 70px; height: 100%; float: left; color: #d8d8d8 }

@media all and (max-width: 768px) and (orientation: portrait) {
.cpd-tab-container { overflow: hidden; width: 100%; float: none; height: auto }
}
.cpd-tab { text-align: center; padding: 15px 0; font-size: 11px; cursor: pointer }
.cpd-tab:hover { background-color: #037d30 }
.cpd-tab.active { background-color: #037d30; color: #ffffff }
.cpd-tab .cpd-tab-icon { width: 40px; height: 30px; margin: 0 auto 5px }
.cpd-tab .cpd-tab-icon svg { width: 40px; height: 30px }
.cpd-tab-text .cpd-tab-icon { background: center 0 url(../images/icons.png) no-repeat }
.cpd-tab-image .cpd-tab-icon { background: center -75px url(../images/icons.png) no-repeat }
.cpd-tab-clip-art .cpd-tab-icon { background: center -40px url(../images/icons.png) no-repeat }

@media all and (max-width: 768px) and (orientation: portrait) {
.cpd-tab { float: left; padding: 10px 15px }
.cpd-tab .cpd-tab-icon { display: none }
}
.cpd-toolbar-container { width: 300px; height: 100%; float: right; overflow: auto; color: #d8d8d8 }

@media all and (max-width: 768px) and (orientation: portrait) {
.cpd-toolbar-container { float: none; width: 100%; height: calc(100% - 32px) }
}
.cpd-select-row .cpd-toolbar-control-element-container { margin: 0 }
.cpd-toolbar-tabs { margin-top: 20px }
.cpd-toolbar-tabs section { display: none; padding: 20px 0 0 }
.cpd-toolbar-tabs input[type="radio"] { display: none }
.cpd-toolbar-tabs>label { display: inline-block; text-align: center; font-size: 12px; margin-right: 20px; color: #a2a2a2 }
.cpd-toolbar-tabs>label:hover { color: #888; cursor: pointer }
.cpd-toolbar-tabs>input:checked+label { color: #ffffff; font-weight: bold; border-bottom: 1px solid #037d30 }
.cpd-toolbar-tabs>#tabShadowText:checked ~ section.cpd-shadow-container-text, .cpd-toolbar-tabs>#tabOutlineText:checked ~ section.cpd-outline-container-text, .cpd-toolbar-tabs>#tabArcText:checked ~ section.cpd-arc-container-text { display: block }
.cpd-toolbar-tabs>#tabShadowImage:checked ~ section.cpd-shadow-container-image, .cpd-toolbar-tabs>#tabOutlineImage:checked ~ #tabOutlineContent, .cpd-toolbar-tabs>#tabArcImage:checked ~ #tabArcContent { display: block }
.cpd-toolbar-tabs section label { font-size: 12px }
.cpd-font-style-container { position: relative; margin-top: -6px !important }
.cpd-shadow-color-button-container { position: relative; color: #037d30 }
.cpd-shadow-color-button-container .cpd-color-button { position: absolute; top: 0; left: 0; width: 115px }
.cpd-shadow-color-button-container .cpd-color-button .cpd-color-button-pad { width: 115px; background: none !important }
.cpd-popup-toolbar-clipart { padding-top: 0 !important; height: 100% }
.cpd-clipart-images-container { height: calc(100% - 42px); background-color: #ececec; padding: 10px; box-sizing: border-box; overflow: auto; margin: 0 -10px }
.cpd-clipart-image-container { width: 33%; height: 150px; display: block; float: left; cursor: pointer; margin-right: .5%; margin-bottom: .5%; background: #FFFFFF; position: relative; opacity: 0.8 }
.cpd-clipart-image-container:hover { opacity: 1 }
.cpd-clipart-image-container:nth-of-type(3n) { margin-right: 0 }
.cpd-clipart-image { max-height: 150px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 90% }
.cpd-text-allign-button { opacity: 0.5; background: url(../images/text-icons.png) no-repeat }
.cpd-text-allign-button.active { opacity: 1; background-color: #373737 }
.cpd-text-allign-left-button { background-position: 5px 7px }
.cpd-text-allign-center-button { background-position: -43px 7px }
.cpd-text-allign-right-button { background-position: -88px 7px }
.cpd-text-allign-justify-button { background-position: -135px 7px }
.cpd-textfield { width: 100%; padding: 5px; border: 0px; resize: none; height: 80px }
.cpd-font-size { padding: 0 }
.cpd-drag-and-drop-container { height: 156px; position: relative; border: 1px dashed #979797; background: center 25px url(../images/upload-icon.png) no-repeat }
.cpd-drag-and-drop-text { margin: 90px auto 0; text-align: center; display: block; font-size: 12px }
.cpd-drag-and-drop-icon { display: none; margin: 56px auto; width: 48px; height: 48px }
.cpd-file-uploader-progress { width: 80%; height: 4px; background: #E0DEDE; margin: 75px auto 0 }
.cpd-file-uploader-progress-area { display: none }
.cpd-file-uploader-progress-active { width: 0; height: 4px; background-color: #4A90E2; background-image: linear-gradient(-90deg, #61CD7E 0%, #5BAEEA 25%, #438EC8 50%, #7253B3 75%, #DB3666 100%) }
.cpd-file-uploader-progress-file-name { text-align: center }