#colorchart{border:0;padding:0;border-collapse:collapse;}#colorchart td{width:23px;height:23px;border: none;}.wrapper{height:100px;}.holder{width:68px;height:68px;float:left;margin-right:1px;background: #0000001a;margin-bottom: 20px;position: relative;}.wrapper div div{height:68px;float:left;}.wrapper div div div{width:38px;height:38px;margin:15px;}.off{background-image:url('http://c632769.r69.cf2.rackcdn.com/onoff_001.png');background-position:0 -68px;}.on{background-image:url('http://c632769.r69.cf2.rackcdn.com/onoff_001.png');background-position:-68px -136px;}.htmlcode{border:1px solid gray;background-color:gray;color:white;padding:5px;}.yui-picker-hue-thumb{cursor:default;width:18px;height:18px;top:-8px;left:-2px;z-index:9;position:absolute;}.yui-picker-hue-bg{-moz-outline:none;outline:0 none;position:absolute;left: 61%;height:366px;width: 10%;background:url(/views/tienich/images/hue_bg.png) no-repeat;top:4px;}.yui-picker-bg{-moz-outline:none;outline:0 none;position:absolute;top:4px;left:4px;height:364px;width: 60%;background-color:#F00;background-image:url(http://c632769.r69.cf2.rackcdn.com/picker_mask_001.png);}*html .yui-picker-bg{background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://c632769.r69.cf2.rackcdn.com/picker_mask_001.png',sizingMethod='scale');}.yui-picker-thumb{cursor:default;width:11px;height:11px;z-index:9;position:absolute;top:-4px;left:-4px;}.yui-picker-swatch{position:absolute;left: 66%;top: 5px;height:155px;width: 33%;border:2px solid #7c7c7c;}.yui-picker-controls{position:absolute;top: 40%;left: 66%;font:1.6em monospace;}.yui-picker-controls .hd{background:transparent;border-width:0!important;}.yui-picker-controls .bd{height:100px;border-width:0!important;}.yui-picker-controls ul{float:left;padding:0 2px 0 0;margin:0;}.yui-picker-controls li{padding:2px;list-style:none;margin:0;}.yui-picker-controls input{font-size:20px;width:2.4em;}.yui-picker-hex-controls{clear:both;padding:20px 0 0 0;font:2em monospace;}.yui-picker-hex-controls input{width:160px;font-size: 25px !important;margin-left:-20px;}.yui-picker-controls a{font:20px arial,helvetica,clean,sans-serif;display:block;*display:inline-block;padding:0;color:#000;}#container{background-color:#eee;height: 400px;width: 100%;position:relative;}#insertcolor{background-color:#EEE;width: 100%;font-size: 17px;position:relative;text-align: center;padding: 15px 5px 5px 5px;margin: 0;}input#startcolor{font-size:16px;width:90px;}button#newcolor{font-size:16px;background: #74b830;color: white;text-transform: none;}-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;
.color-check{margin-top:50px}.holder input{font-size: 13px !important;text-align:center;color:#000!important;width:68px!important;margin:auto!important}.color-check > h2{text-transform:uppercase;font-weight:700;font-size:20px;border-left:5px solid #000;padding-left:10px}#insertcolor > p{text-align:center!important;margin:auto!important}button#newcolor:hover{background:red}#colorchart td{padding:0}#frm_tienich_color_code_content .wrapper{min-height: unset;display:grid;grid-template-columns: repeat(9,1fr);height: auto;gap: 30px 10px;margin-bottom: 30px;}
.color-check {margin-top: 0;}
.color-check p,.choose_color p { margin-bottom: 10px;}
.color-check .alert-color{font-weight:700;text-transform:none;font-size:16px;font-style:normal;float: left;width: 100%;}
.remove_holder {
    position: absolute;
    right: -8px;
    top: -8px;
    cursor: pointer;
}

.remove_holder i {
    font-size: 20px;
    color: red;
    transition: all 0.3s;
}
.remove_all_holder_add {
    display: block;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 40px;
}

.remove_all_holder {
    font-size: 16px;
    background: #74b830;
    color: white !important;
    text-transform: none;
    padding: 8px 16px;
    margin-top: 15px !important;
    cursor: pointer;
    transition: all 0.3s;
}

.remove_all_holder:hover {
    background: red;
}
.remove_holder:hover i {transform: scale(1.2);}
@media only screen and (max-width: 600px) {
  .choose_color .wrapper {
        grid-template-columns: repeat(4,auto) !important;
    }
}
@media only screen and (max-width: 480px) {
 .yui-picker-bg{width: 40%;}.yui-picker-hue-bg{right: unset;left: 42%;}
 .yui-picker-controls{left:55%}.yui-picker-swatch{left:55%;width:40%}.yui-picker-controls .bd{height:auto!important}.yui-picker-controls input{font-size:15px!important}.yui-picker-controls ul{display:flex}.yui-picker-hex-controls{float:left;width:100%;padding:0}.yui-picker-hex-controls input{width:auto;font-size:20px!important}
}