/*CSS*/

.ui-colorpicker-preview-container a { color: #666666; }
.ui-colorpicker-preview-container a:hover, .ui-colorpicker-preview-container a:focus { outline: none; color: #5bc0de; }
.colorpicker-dropdown .dropdown-menu { box-shadow: none; border-radius: 0px; padding: 3px; border: 0px; margin: 0px; position: relative; z-index:999; display:block; }
.ui-colorpicker-map-container { box-shadow: none; border-radius: 0px; padding: 3px 0 5px 5px; border: 0px; margin: 0px; position: relative; float: left; }
.colorpicker-colors-row { display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; max-width: 400px; border-top: 1px solid #cccccc; overflow:hidden; background:#ffffff;}
.dropdown-menu .colorpicker-colors > li > a { padding: 0px; }
.colorcell { margin: 0px 0px 1px 1px; position: relative; float: left; height: 20px; width: 20px; -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); cursor: pointer; }
.colorcell.active:before { content: "\f00c"; font-family: 'Font Awesome 5 Pro'; position: absolute;
width: 100%; text-align: center; left: 0; top: 0; color: #fff; text-shadow: 0 0 1px #333; line-height: 20px; }
.dropdown-menu .colorpicker-colors > li .colorcell:hover { -webkit-transform: scale(1.25); -ms-transform: scale(1.25); -moz-transform: scale(1.25); transform: scale(1.25); text-decoration: none; z-index: 2; transition: all 0.125s ease-in 0s; -moz-transition: all 0.125s ease-in 0s; -ms-transition: all 0.125s ease-in 0s; -webkit-transition: all 0.125s ease-in 0s; border-radius: 3px; box-shadow: 0 0 1px #fff; /*border:1px solid #fff;*/ }
.ui-colorpicker .dropdown-menu > li, .ui-dialog.ui-colorpicker .dropdown-menu > li { float: left; }
.color-find { padding: 5px 5px 5px 8px; text-align: center; }
.color-find > li > a:first-child { font-style: italic; text-decoration: none; }
.color-find > li > a { color: #666666; text-decoration: underline; display: inline-block; padding-top: 3px;padding-right: 0.2rem;}
.color-find > li > a:hover, .color-find > li > a:focus { color: #5bc0de; text-decoration: none; }
.color-find > li { display: block; width: 100%; }
.newcolor { padding: 5px; }
.newcolor .btn {border-radius: 2px;}
.newcolor .btn:hover, .newcolor .btn:focus, .newcolor .btn:active {color: #ffffff; background: #666666; border-color: #666666;}
.newcolor > li > a { color: #666666; display: inline-block; line-height: 20px; width: 52px; padding-right: 8px; text-align: right; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.newcolor li img { padding-right: 5px; }
.newcolor li:last-child img { margin-top: -1px; }
.newcolor > li > a:hover, .newcolor > li > a:focus { color: #5bc0de; }
.color-code-btn { padding: 0 5px 2px; text-align: center; width: 55px; }
.color-code-btn > li > a:first-child { text-decoration: underline; }
.color-code-btn > li { display: block; width: 100%; }
.colorpicker-colors { float: left; width: 100%; }
.color-code-btn > li > a.btn.btn-link { padding: 0px; }
/*colorplate*/
.colorplate { float: left; padding: 10px 10px 5px 10px; width: 65%; }
.colorplate-rgb { float: left; padding: 10px 0px 0px 0px; width: 35%; }
.colorplate-rgb .col-xs-4 { padding-left: 0px; text-align: right; }
.colorplate-rgb .col-xs-8 { padding-left: 0px; }
.colorplate-rgb .form-inline .form-control { border-radius: 0px; height: 24px; width: 100%; }
.colorplate-rgb .checkbox input { margin: 0px; vertical-align: middle; width: 15px; }
.colorplate-cmyk { float: left; padding-top: 8px; width: 35%; }
.colorplate-cmyk .col-xs-3 { padding-right: 0px; text-align: right; }
.colorplate-cmyk .form-inline .form-control { border-radius: 0px; height: 24px; width: 80%; display: inline-block; }
.ui-colorpicker-map { float: left; }
.ui-colorpicker-bar { margin-left: 10px; float: left; }
.ui-colorpicker-cmyk-container { padding-right: 10px; float: right; }
.ui-colorpicker-rgb-container { padding-right: 20px; float: right; }
.ui-colorpicker-hex-container { padding-right: 27px; float: right; }
.ui-colorpicker-bar-container { padding-top: 3px; }
.hexcolorlabel { padding-right: 10px; }
.ui-colorpicker-hex-input { margin-right: -5px; }
.ui-colorpicker-swatch { border: 0px; }
.ui-colorpicker-swatches { background-color: transparent; border: 0px; height: auto; }
.ui-dialog .ui-dialog-content { padding: 0px; overflow: visible; float: left;  z-index:999; padding: 10px;padding-right: 0;}
.ui-colorpicker-preview-initial, .ui-colorpicker-preview-current { vertical-align: middle;  width: 20px; cursor: auto; border: 1px solid #cccccc;}
.ui-colorpicker-cancel.btn-link.ui-corner-all.ui-widget { padding: 0px; margin-top:2px; }
.ui-colorpicker-ok.btn-primary { padding: 8px 10px; }
.ui-colorpicker-preview-container.ui-colorpicker-padding-top { padding: 0px;width: 100%;}
.ui-colorpicker-cmyk-container { float: right; }
.ui-colorpicker-rgb-container { float: right; }
.ui-colorpicker-hex-container { float: right; }
.ui-colorpicker-number { width: 5em; }
.ui-colorpicker, .ui-dialog.ui-colorpicker { padding: 0px !important; margin-top: 2px; box-shadow: 0 0 3px #ccc; z-index: 9999 !important; border: 0px; max-width: 410px; float:left;width:auto !important;}
.ui-colorpicker-map, .ui-colorpicker-map > *, .ui-colorpicker-bar, .ui-colorpicker-bar > * { height: 252px; }
.ui-colorpicker-padding-left { padding-left:7px;margin-bottom: 10px; }
.ui-colorpicker-ok { background-color: #333; color: #ffffff !important; transition:all 0.3s ease; }
.ui-colorpicker-ok:active, .ui-colorpicker-ok:hover { background-color: #666 !important; }
.newcolor > li > a:hover, .newcolor > li > a:active { color: #666666; }
.findColorTitle { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.showmore { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 80%; }
.ui-colorpicker-cancel { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 98%; float: left; width: auto; margin: 1px 0; }
.ui-colorpicker-ok { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 98%; float: left; width: 100%; padding:.4em 0.5rem; }
/*.ui-colorpicker-ok {overflow:hidden; white-space:nowrap; text-overflow: ellipsis; max-width:98%; display: inline-block; width:auto;} */
.pantonebox { width: 15px; height: 15px; float: left; }
.ui-colorpicker-buttonset .ui-state-active {border: 1px solid #666!important;background: #ffffff !important;color: #000000;}
.ui-colorpicker-swatches .btn-clear {margin:0 0 0 1px !important; padding:0.28rem 0.2rem 0.15rem !important; float:left; border-color:#a9a9a9 !important; font-size:0.7rem;border-radius:0 !important;}
.ui-colorpicker-swatches .btn-clear .text-danger {font-weight:bold;}
/*@small color picker*/
.smallColorPicker.ui-colorpicker, .smallColorPicker.ui-dialog.ui-colorpicker { max-width: 300px; }
.smallColorPicker .ui-colorpicker-swatches { max-width: 190px; }
.smallColorPicker .color-code-btn { width: auto; }
.smallColorPicker .dropdown-menu .ui-colorpicker-swatches { position: relative; margin: 10px; }
.smallColorPicker .dropdown-menu .ui-colorpicker-swatches:after { top: 0; right: 0; height: 100%; width: 24px; background: #929292; background: -webkit-gradient(bottom, from(#929292), to(#aaa)); background: -webkit-linear-gradient(bottom, #929292, #aaa); background: -moz-linear-gradient(bottom, #929292, #aaa); background: -ms-linear-gradient(bottom, #929292, #aaa); background: -o-linear-gradient(bottom, #929292, #aaa); content: "\f078"; font-family: 'Font Awesome 5 Pro'; border: 0; color: #fff; text-align: center; line-height: 10px; font-size: 12px; padding: 8px 0; position: absolute; }
.smallColorPicker .dropdown-menu .ui-select-search { width: 100%; }
.smallColorPicker .colorcell { width: 100%; height: auto; }
.smallColorPicker .selectize-dropdown.single { border-color: #b8b8b8; max-height: 200px; overflow-y: auto; width: 99%; margin: 0; }
.smallColorPicker .selectize-dropdown.single li { padding: 4px 10px; }
.pantonebox { width: 15px; height: 15px; float: left; margin-right: 10px; }
.cpUsedColors .dropdown-menu { width: 100%; padding-top: 5px; border-bottom: 1px solid #ccc; }
.cpUsedColors .dropdown-menu li { float: left; padding: 3px 0; }
.cpUsedColors .dropdown-menu li label { font-size: 11px; font-weight: normal; padding-right: 5px; }
.cpUsedColors .dropdown-menu .colorcell {box-shadow:0 0 1px #999 inset; -webkit-box-shadow:0 0 1px #999 inset; -moz-box-shadow:0 0 1px #999 inset; border: 1px solid #ddd;}
.color-find .showimage { cursor: pointer; width: 25px;}
.color-find .btn-color-eyedropper { cursor: pointer; background: #EFEFEF; border:1px solid #ccc; border-radius: 50%; height: 25px; width: 25px; line-height: 20px; text-align: center; margin: 4px 4px 4px 8px; vertical-align:top; }
.cpEyedropOverlay { /*overflow:visible;*/
position: fixed; left: 0px; top: 0px; bottom: 0px; right: 0px; background-color: #ffffff; opacity: 0; z-index: 9999999; display: none; cursor: pointer; }
.cpEyedropOverlay.active { display: inline-block; cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACPElEQVR42q2TsWtTQRzHc/Y9pFMdHIR2a5u8xohQF7Gl4GCrILhUcFAsDg5WKC3axmg7FsWhYKmKotjQuii4OSh2E6VFEBObpMk/URUH88jz8ytJuYTX5PKawPH73i93n+/37hIVatGnO9KrLNtykIdCXiid+5n5LX3VCngk1ndKKfUMGfU8L4T+g76WTW2+3beBcyw6CfQBUFvmaA8t3F9eyesKbBA+6hyE8xx5uc6ygUAGXEkH5R0Gp2tS61pkrCkDwJ1yz+yfZ/MJH6iuU8V/xePGBsAnKA8ZlsHyv4zBXDrz3ciAh7wgV8JQlYR7pK7oK/yCVmVuavCGMqrD6hgskHyqstfIgOt5SrlusPRDqVQ6n9/MuU0ZcIJ5yp0GJ0hRhki/re9taEB6Oe5s+Q3G6iwdA56sbdY1IPktUiVId5ZHW2e+yHx8jxMMsOaLsQGw25Q4e8+RbF070RKwGzUGj1kz7sfxNQAyzd4ZpCTf0EzDwNb47j3VpnbJ1bnF4pNCNu8ZGQCPUyT9MKm+af0I5RPjNf3pRm/na0BC+aXIvVfB6Qt8jbHCiWZM4VUGJLzEkV8izwD5rPUd+gJP0o83A681+Ej5SvJZrddXvpZX9BPNwncNwlGnXR1QeZImSJksX0s/RR7zBfC7QeC7BsAeARrB4CTTi+hu9E30Aob3gsJ3DHqccKzNavuBFtBVRjsjz1j2+2cGMOg9Ytl2htQdpL7vuu5cIbPl7hdcdUVigjxcyG6lWwWufP4DSUYqe64tm8AAAAAASUVORK5CYII='), auto; }
.cpEyedropColorinfo { display: inline-block; position: fixed; background: rgba(255,255,255,0.9); border: 1px solid #ccc; z-index: 999999; padding: 5px; line-height: 20px; display: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.cpEyedropColorinfo .hovercolor { float: left; width: 20px; height: 20px; margin-right: 5px; border: 1px solid #ccc; }
.hovercolorText { display: inline-block; float: left; line-height: 2; }
.cpUsedColors { display: inline-block; width: 100%; float: left; }
/*@media*/
@media all and (max-width:1100px) {
	.color-find .btn-color-eyedropper { display:none;}
}
@media all and (max-width: 767px) {
.ui-colorpicker-cancel.btn-link.ui-corner-all.ui-widget {margin-top:0;}
.ui-colorpicker, .ui-dialog.ui-colorpicker { max-width: 256px; overflow: hidden; }
.colorpicker-dropdown .dropdown-menu { width: 254px; border: 0px; }
.color-code-btn > li > a.btn { padding: 5px; }
.color-code-btn { padding: 0 5px 5px 2px; }
.color-code-btn > li > a:first-child { margin-right: 5px; }
.newcolor { padding: 5px; width: 165px; }
.colorplate-rgb .radio label, .colorplate-rgb .checkbox label, .colorplate-cmyk .radio label, .colorplate-cmyk .checkbox label { padding: 0px; }
.colorplate-rgb .radio, .colorplate-rgb .checkbox, .colorplate-cmyk .radio, .colorplate-cmyk .checkbox { margin: 0px; min-height: inherit; }
.colorplate { width: 100%; }
.colorplate-rgb, .colorplate-cmyk { width: 50%; }
.colorplate-rgb .checkbox input { width: auto; }
.colorplate-rgb .col-xs-4 { padding-right: 5px; }
.colorplate-cmyk .col-xs-3 { padding-right: 5px; }
.colorplate-cmyk .col-xs-9 { padding-left: 0px; }
.ui-colorpicker-map { float: left; }
.ui-colorpicker-bar { margin-left: 5px; float: left; }
.ui-colorpicker-cmyk-container { padding-right: 0px; float: left; padding-left: 3px; }
.ui-colorpicker-rgb-container { padding-right: 5px; float: left; padding-left: 10px; }
.ui-colorpicker-hex-container { padding-right: 10px; float: left; padding-left: 0px; }
.ui-colorpicker-bar-container { padding-top: 0px; }
.hexcolorlabel { padding-right: 10px; }
.ui-colorpicker-hex-input { margin-right: -5px; }
.newcolor > li > a { min-width: 45px; }
.color-find { width: 100%; }
.ui-colorpicker-number { width: 4em; }
.ui-colorpicker-map-layer-1, .ui-colorpicker-map-layer-2 { background-size: cover; }
.ui-colorpicker-map, .ui-colorpicker-map > * { width: 215px; height: 215px; }
.ui-colorpicker-bar, .ui-colorpicker-bar > * { height: 215px; margin-bottom: 10px; }
.findColorTitle {display:inline-block; vertical-align: super;}
.color-find > li > a {padding-top:0;}
}

/* Fixed propertu */

.fixed-property{display:flex;max-width: 53.75rem;}
.fixed-property .colorpicker-colors-row {align-items: unset;;border-top:none}
.fixed-property .colorcell {margin: 0 0.188rem 0.21rem 0;border-radius: 0.25rem;}
.fixed-property .color-find { padding: 0; text-align: start; }
.fixed-property .ui-colorpicker-swatches {max-height:165px;max-width: 360px;}
.fixed-property .color-code-btn {padding: 0;text-align: center; width: 100%;min-width: 85px; }
.fixed-property .color-code-btn > li > a:first-child {text-decoration:none;}
.fixed-property  .newcolor .btn:hover,.fixed-property  .newcolor .btn:focus, .newcolor .btn:active{background: transparent;border-color: transparent;}
.fixed-property  .newcolor{padding:0 5px 5px 5px;margin-top:0 !important; max-width: 90px;}
.fixed-property  .newcolor .btn-link {white-space: normal; line-height: 1.1;}
.fixed-property.ui-dialog .ui-dialog-content{box-shadow:none !important;border:0;overflow: visible;border-radius: 0 0 0.188rem 0.188rem; z-index:999; display: flex;}
.fixed-property .swatch-action-button{flex: 0 0 5.5rem;max-width:5.5rem;white-space: break-spaces;background:#ebebeb;padding-top: 0.8rem;}
.fixed-property .swatch-action-button a{float:left;display: inline-block;padding: 0.3rem 0rem 0.3rem 0.5rem;color:#333333;transition:0.4s all ease;font-size:0.80rem;font-family: "open_sans",sans-serif;font-weight: 600;width: 100%;max-width: 100%;margin-left:0.5rem;border-radius:5px 0px 0px 5px;}
.fixed-property .swatch-action-button a:hover,.fixed-property .swatch-action-button a:focus{color:var(--brand-primary);}
.fixed-property .swatch-action-button a.active{background:#ffffff;color:#333333;}
.fixed-property.ui-dialog .ui-colorpicker-preview-container .colorpicker-used-hex-colosr{display:flex;flex-direction: column;justify-content:space-between;}
.fixed-property .ui-colorpicker-hex-container{position: absolute; top: -2px;bottom: auto; height: auto !important; right:16%;}
.fixed-property .ui-colorpicker-hex-container.ui-colorselector-tab{right:43.5%;bottom: 7%;top:auto}
.fixed-property .studio-type-block-color-picker.ui-colorpicker-hex-container.ui-colorselector-tab{right: 24%;bottom:5%;}
.fixed-property .ui-colorpicker-hex-container.ui-colorselector-tab .ui-colorpicker-hex-input{width: 3.8rem;height: 25px;}
.fixed-property .ui-colorpicker-bar-container { padding-top: 0.188rem; float:left;}
.fixed-property .hexcolorlabel {padding-right: 0.6rem; }
.fixed-property .ui-colorpicker-hex-input { border: 1px solid #ddd; padding:0.2rem 0.3rem; border-radius: 0.188rem;margin-right: 0;width:3.8rem }
.fixed-property  .ui-colorpicker-ok.btn-primary { padding: 0; }
.fixed-property .ui-colorpicker-preview-initial,.fixed-property .ui-colorpicker-preview-current { vertical-align: middle;  width: 1.25rem; cursor: auto; border: 1px solid #dedede; border-radius: 0.25rem;}
.fixed-property .ui-colorpicker-preview-container.ui-colorpicker-padding-top { padding: 0; height: 100%; }
.fixed-property.ui-colorpicker,.fixed-property.ui-dialog.ui-colorpicker {max-width: 50rem;}
.fixed-property .ui-colorpicker-ok {  color: #ffffff !important; padding:.5rem .75rem !important; line-height: 1 !important; border: 0 !important; overflow:hidden; white-space:nowrap; text-overflow: ellipsis;transition:none; }
.fixed-property .ui-colorpicker-cancel {border-color: #ddd;}
.fixed-property .ui-colorpicker-number{border:1px solid #dddddd !important;height: 25px;border-radius: 0.175rem;margin-bottom: 0.4rem;    padding: 0.3rem;}
.fixed-property .ui-colorpicker-cancel:hover, .ui-colorpicker-cancel:focus {background: #999; border-color: #999;color: #ffffff;}
.fixed-property  .ui-colorpicker-swatches .btn-clear {margin: 0 0.188rem 0.21rem 0 !important; height: 1.22rem; width: 1.22rem; padding:0 !important; float:left; border-color:#a9a9a9 !important; font-size:0.7rem; border-radius: 0.175rem !important; border-color: #ff0000 !important;border-radius: 0.25rem !important;}
.fixed-property .ui-colorpicker-padding-left{padding-right: 1rem;}
.fixed-property .ui-colorpicker-padding-left.ui-colorpicker-cmyk-container{border-right:1px solid #dddddd; margin-right:1rem;}
.fixed-property .ui-colorpicker-swatches .btn-clear .text-danger { font-size: 1.15rem; }
.fixed-property .btn-block{width: 100%;display: block;float: none;}
.fixed-property .smallColorPicker .dropdown-menu.ui-colorpicker-swatches { position: relative; margin: 0.625rem; }
.fixed-property .smallColorPicker .dropdown-menu.ui-colorpicker-swatches:after { top: 0; right: 0; height: 100%; width: 1.5rem; background: #929292; background: -webkit-gradient(bottom, from(#929292), to(#aaa)); background: -webkit-linear-gradient(bottom, #929292, #aaa); background: -moz-linear-gradient(bottom, #929292, #aaa); background: -ms-linear-gradient(bottom, #929292, #aaa); background: -o-linear-gradient(bottom, #929292, #aaa); content: "\f078"; font-family: 'Font Awesome 5 Pro'; border: 0; color: #fff; text-align: center; line-height: 0.625rem; font-size: 0.75rem; padding: 0.5rem 0; position: absolute; }
.fixed-property .btn-color-eyedropper{cursor:pointer;}
.fixed-property .btn-color-eyedropper i{font-size:16px;}
.fixed-property .cpUsedColors .dropdown-menu { padding: 0.313rem 0 0; max-width: 6.875rem; width:6.875rem !important;border:0;}
.fixed-property .color-find .btn-color-eyedropper{margin: 4px 4px 4px 0px;}
.fixed-property  .cpUsedColors .dropdown-menu li{padding:0}
.fixed-property  .cpUsedColors .dropdown-menu li .colorcell{box-shadow:none;}
.fixed-property .cpUsedColors h5{font-size:12px;}
.fixed-property .color-find .btn-color-eyedropper{background:transparent;border:none;display: block;text-align: left;}
.fixed-property .cpUsedColors {order:2;margin-top: auto;min-width: 115px;}
.fixed-property .cpUsedColors .dropdown-menu.ui-colorpicker-swatches {max-height: 4.688rem;overflow: hidden;min-width:115px;}
.fixed-property .colorpicker-used-hex-colosr {border-left: 1px solid #dedede; border-right: 1px solid #dedede; padding: 0 0.5rem; margin:0 0.6rem 0 0;;min-width:115px;}
.photoprint-tool-open ~ .ui-colorpicker .ui-dialog-content {min-width: 420px;}
.photoprint-tool-open ~ .ui-colorpicker, .photoprint-tool-open ~ .ui-dialog.ui-colorpicker {max-width: 420px;}
.ui-colorpicker-map-128, .ui-colorpicker-bar-128, .ui-colorpicker-map-128 > *, .ui-colorpicker-bar-128 > * {height: 128px !important;}