.color-picker-tools-container{display:flex;flex-wrap:wrap;justify-content:space-between;margin:10px;width:100%;color:#222;font-size:1.3rem}.color-picker-section-left,.color-picker-section-right{width:49%}.colors-preview-section{display:flex;flex-wrap:wrap;justify-content:space-between}.selected-colors-container{width:100%}.right-arrow-container{font-weight:500}.right-arrow{filter:invert(10%);margin-left:5px;width:12px}.recent-colors,.selected-colors{display:flex;cursor:pointer;margin-bottom:10px;box-shadow:var(--box-shadow-default);border-radius:5px;overflow:hidden}.selected-colors>div{border-radius:4px;background:#fff}.color-padlock{filter:invert(40%);cursor:pointer;background:no-repeat center/18px;height:25px}.open-color-padlock{background:url(/assets/images/icons/other/open-lock-icon.png) no-repeat center/18px}.locked-color-padlock{background-image:url(/assets/images/icons/other/closed-lock-icon.png)}.recent-color-preview,.selected-color-preview{background:#000;height:40px}.recent-colors>div,.selected-colors>div{width:20%}.recent-colors-container{width:84%}.color-picker-selected-color-container{width:12%}.color-picker-selected-color{cursor:pointer;box-shadow:var(--box-shadow-default);border-radius:6px;height:40px}.color-picker-container{display:inline-block;margin:10px 10px 0 0;touch-action:none;user-select:none}.float-color-picker-container{display:none;position:absolute;z-index:1;box-shadow:var(--box-shadow-default);border-radius:6px;background:#fff;padding:8px;touch-action:none;user-select:none}.float-color-picker-close-btn{display:flex;position:absolute;top:-12px;right:-12px;justify-content:center;cursor:pointer;box-shadow:var(--box-shadow-default);border:none;border-radius:50%;background:#fff;width:25px;height:25px;font-weight:700;font-size:2.3rem;line-height:1}.float-color-picker-close-btn:hover{color:red}.float-color-picker-color-preview{margin-bottom:8px;box-shadow:var(--box-shadow-default);border-radius:4px;background:#000;height:20px}.color-picker,.float-color-picker{position:relative;margin-bottom:10px;box-shadow:var(--box-shadow-default);background:red;width:200px;height:200px}.color-picker-black-bg,.float-color-picker-black-bg{position:absolute;background:linear-gradient(to top,#000,rgba(0,0,0,0));width:100%;height:100%}.color-picker-white-bg,.float-color-picker-white-bg{background:linear-gradient(to right,#fff,rgba(255,255,255,0));width:100%;height:100%}.color-picker-thumb,.float-color-picker-thumb{position:absolute;top:-10px;left:190px;z-index:1;cursor:pointer;border:2px solid #fff;border-radius:100%;background:red;width:16px;height:16px}.float-color-picker-thumb{top:auto;bottom:-8px;left:-8px;background:#000}.color-picker-hue-selector-container,.float-color-picker-hue-selector-container{position:relative;height:25px}.color-picker-hue-selector,.float-color-picker-hue-selector{-webkit-appearance:none;appearance:none;outline:0;border-radius:4px;background-image:url(/assets/images/backgrounds/hue-image.png);background-size:cover;width:200px;height:25px}.color-picker-hue-selector::-webkit-slider-thumb,.float-color-picker-hue-selector::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-1px;border:1px solid #ccc;border-radius:3px;background-color:#fff;width:10px;height:27px}.color-picker-hue-selector::-moz-range-thumb,.float-color-picker-hue-selector::-moz-range-thumb{border:1px solid #ccc;border-radius:3px;background-color:#fff;width:6px;height:25px}.color-codes-container{display:inline-block;vertical-align:top;margin:10px 0;width:calc(100% - 214px)}.color-code-box,.color-hue-info-box{display:flex;justify-content:space-between;align-items:center;box-shadow:0 0 5px #e9e9e9,0 0 2px #d1d1d1;border-radius:4px;overflow:hidden}.color-code-box{margin-bottom:13px;height:40px}.color-code-type{border-right:1px solid #e6e6e6;width:40px;height:100%;font-weight:600;line-height:40px;text-align:center}.color-code-copy-btn{cursor:pointer;border:none;background-color:#000;width:40px;height:100%}.color-code-copy-btn:hover{background-color:#3c3c3c}.color-code-copy-btn img{filter:invert(100%);width:18px}.color-hue-info-box{height:25px}.color-hue-label{border-right:1px solid #e6e6e6;width:50px;height:100%;font-weight:500;line-height:25px;text-align:center}.hue-color-preview{width:40px;height:25px}.color-picker-slider-section{display:flex;justify-content:space-between;margin-top:12px;width:100%}.color-picker-slider-container{width:49%}.color-picker-slider-box{display:flex;margin-bottom:16px;box-shadow:0 0 5px #e9e9e9,0 0 2px #d1d1d1;border-radius:4px;height:46px}.color-picker-slider-value-label{border-right:1px solid #e6e6e6;width:30px;font-weight:600;font-size:1.2rem;line-height:46px;text-align:center}.color-picker-slider-block{padding:6px 5px 0;width:100%}.color-picker-slider-value{display:block;text-align:center}.color-picker-slider{outline:0;border-radius:10px;background:#5db9d4;width:100%;height:6px}.color-picker-slider::-moz-range-thumb{cursor:pointer;border:1px solid #96b0e2;border-radius:50%;background-color:#fff;width:10px;height:10px}.color-constrast-test-section{display:flex;justify-content:space-between;width:100%}.color-constrast-test-container{width:49%}.color-constrast-test{display:flex;justify-content:center;align-items:center;box-shadow:var(--box-shadow-default);border-radius:4px;background-color:#000;height:120px}.bg-color-constrast-test{border-radius:4px;background-color:red;width:50%;height:40%}.text-color-constrast-test{color:red;font-weight:600;font-size:3.5rem}.float-color-picker-show-btn{margin-top:6px;box-shadow:var(--box-shadow-default);border:none;border-radius:3px;background-color:#000;width:40px;height:20px}.code-syntax-example-section{width:100%}.code-syntax-example-container{margin-top:20px;margin-bottom:20px;box-shadow:0 0 2px #ebebeb,0 0 1px #9c9c9c;border-radius:4px;background-color:#f8f8f8;width:100%;overflow:hidden}.code-syntax-example-title{background:#e7e7e7;padding:10px;font-weight:500;font-size:1.3rem}.code-syntax-example-block{position:relative}.code-syntax-example{border-bottom:1px solid #e7e7e7}.code-syntax-example:last-child{border-bottom:none}.code-syntax-example-code{display:inline-block;margin:11px 35px 11px 8px}.code-syntax-example-copy-btn{position:absolute;right:2px;filter:invert(100%);cursor:pointer;margin:7px 6px;border:none;border-radius:5px;background:#ccc url(/assets/images/icons/icons-google/dark-copy-icon.svg) no-repeat center/15px;width:25px;height:25px}.code-syntax-example-copy-btn:hover{background-color:#aaa}.colors-palettes-section{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}.colors-palette{display:flex;margin-bottom:15px;box-shadow:var(--box-shadow-default);border-radius:4px;overflow:hidden}.monochrome-colors-palette{width:36%}.complementary-colors-palette{width:13%}.analogous-colors-palette{width:21%}.triadic-colors-palette{width:21%}.palette-color{transition:width .3s;cursor:pointer;width:100%;height:40px}.palette-color:hover{width:130%}.colors-actions-menu{display:none;position:absolute;z-index:1;cursor:pointer;box-shadow:0 0 2px #ebebeb,0 0 1px #9c9c9c;border-radius:4px;background:#fff;width:84px;overflow:hidden;font-weight:500;font-size:1.3rem;user-select:none}.colors-actions-menu div{padding:8px 10px;text-align:center}.colors-actions-menu div:hover{background:#f5f5f5}@media (max-width:1440px){.color-picker-tools-container{margin:10px 20px}}@media (max-width:868px){.color-picker-section-left,.color-picker-section-right{width:100%}.monochrome-colors-palette{width:70%}.complementary-colors-palette{width:27%}.analogous-colors-palette{margin:auto;width:42%}.triadic-colors-palette{margin:auto;width:42%}}@media (max-width:576px){.color-picker-tools-container{margin:10px}}