button{background-color:transparent;background-image:none;}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color;}ol, ul{list-style:none;margin:0;padding:0;}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#f0f2f4;}textarea{resize:vertical;}input::-moz-placeholder, textarea::-moz-placeholder{color:#a0aec0;}input::placeholder, textarea::placeholder{color:#a0aec0;}button, [role="button"]{cursor:pointer;}.bg-gray-100{--bg-opacity:1;background-color:#F7F8F9;background-color:rgba(247, 248, 249, var(--bg-opacity));}.block{display:block;}.flex{display:flex;}.flex-1{flex:1 1 0%;}.clearfix:after{content:"";display:table;clear:both;}.font-bold{font-weight:700;}.text-sm{font-size:0.875rem;}.text-xl{font-size:1.25rem;}.mb-8{margin-bottom:2rem;}.text-gray-500{--text-opacity:1;color:#C4CDD5;color:rgba(196, 205, 213, var(--text-opacity));}.text-gray-600{--text-opacity:1;color:#475569;color:rgba(71, 85, 105, var(--text-opacity));}.text-gray-700{--text-opacity:1;color:#334155;color:rgba(51, 65, 85, var(--text-opacity));}input[type="text"], select, textarea{box-shadow:0 0 0 1px rgba(0, 0, 0, 0.05);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:1px;--border-opacity:1;border-color:#C4CDD5;border-color:rgba(196, 205, 213, var(--border-opacity));border-radius:0.25rem;width:100%;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:0.75rem;padding-right:0.75rem;--text-opacity:1;color:#1E293B;color:rgba(30, 41, 59, var(--text-opacity));line-height:1.25;transition:border-color 0.15s ease-in-out;}input[type="text"]:focus, select:focus, textarea:focus{border-width:1px;--border-opacity:1;border-color:#0F172A;border-color:rgba(15, 23, 42, var(--border-opacity));outline:2px solid transparent;outline-offset:2px;}textarea{line-height:1.625;}label{display:block;font-weight:700;--text-opacity:1;color:#1E293B;color:rgba(30, 41, 59, var(--text-opacity));margin-bottom:0.75rem;}label span, label div{font-weight:400;--text-opacity:1;color:#1E293B;color:rgba(30, 41, 59, var(--text-opacity));}input[type="range"]{-webkit-appearance:none;width:100%;height:15px;border-radius:8px;outline:none;opacity:0.7;transition:opacity .2s;--bg-opacity:1;background-color:#DFE3E8;background-color:rgba(223, 227, 232, var(--bg-opacity));}input[type="range"]:hover{opacity:1;}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;cursor:pointer;--bg-opacity:1;background-color:#334155;background-color:rgba(51, 65, 85, var(--bg-opacity));}input[type="range"]::-moz-range-thumb{width:25px;height:25px;border-radius:50%;cursor:pointer;--bg-opacity:1;background-color:#334155;background-color:rgba(51, 65, 85, var(--bg-opacity));}.wave-bg-container{position:relative;overflow:hidden;min-height:220px;}.site-container{width:100%;}.container-tool-wrapper{display:flex;margin-left:auto;margin-right:auto;padding-top:0;padding-bottom:0;}.container-tool{flex:1 1 0%;width:100%;}.tool{display:flex;flex-wrap:wrap;--bg-opacity:1;background-color:#fff;background-color:rgba(255, 255, 255, var(--bg-opacity));border-width:1px;--border-opacity:1;border-color:#DFE3E8;border-color:rgba(223, 227, 232, var(--border-opacity));box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);min-height:600px;}.tool-main-full{width:100%;min-height:600px;}.color-input{display:flex;}.color-input input[type="text"]{flex:1;display:block;}.color-input input[type="color"]{margin:12px 0 12px 8px;padding:2px 3px;height:42px;width:42px;border-radius:3px;cursor:pointer;}.grid{display:flex;flex-wrap:wrap;}.one-half{width:100%;}@media (min-width:768px){.grid{margin-left:-1rem;margin-right:-1rem;}.one-half{width:50%;padding-left:1rem;padding-right:1rem;}}.wrapper{display:flex;justify-content:space-between;flex-wrap:wrap;}@media (min-width:1024px){.wrapper{flex-direction:row-reverse;min-height:800px;}}.color-preview{width:250px;height:250px;background-color:#fafafa;border-radius:5px;}#color-container{position:relative;width:100%;}#color-container #user-input{margin-right:30px;clear:both;overflow:auto;}#color-container #user-input button{line-height:1.7;}#color-container .color-preview{width:120px;height:120px;margin:6px 0;margin-top:-20px;}input#color{font-size:125%;line-height:1.5;padding:6px 8px;border-radius:5px;}#color-shades li{display:inline-block;min-width:4%;height:100px;}#color-shades li .color-shade{width:100%;height:100%;cursor:pointer;transition:all 0.05s ease-in;user-select:none;}#color-shades li .color-shade:hover{transform:scale(1.2);}#color-shades li .color-shade:focus{outline:none !important;}#color-shades{flex-wrap:wrap;width:100%;}#color-out div:first-child label{margin-top:0;}#color-out-preview .color-preview{margin:4px auto;}@media (max-width:990px){#random-btn{margin-top:5px;margin-right:-1px;}}@media (max-width:599px){.tool-main-full{}.color-input{flex-direction:column !important;align-items:stretch !important;}#color-box{margin-left:0 !important;margin-top:16px !important;}}[data-cloak]{display:none;}.base-color{border-bottom:2px solid #d1d5db;}