.container-gradient{background:#f5f5f5;border-radius:6px;padding:10px}form{margin-bottom:20px}.gradient-mixer{max-width: 340px;margin:auto;padding:5px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background-color:#484755;border-radius:3px}.flex-grid{display:flex;flex-flow:column wrap;align-items:center}.col{display:flex;flex-direction:column}.g-color-picker{display:flex;align-items:center;justify-content:center;min-width:145px;flex-grow:1}.g-color-picker:not(:last-child){margin-right:10px}.g-color-picker label{margin-right:5px;font-size:14px;text-transform:uppercase;color:#d0d3c9}.g-fieldset{margin-top:10px;padding:0;border:none}.g-fieldset:first-child{margin-top:15px}.g-fieldset--inner{display:flex;align-items:center;justify-content:center}.g-fieldset--frame .g-fieldset--inner{flex-direction:column}.g-fieldset--frame{padding:5px 10px;background-color:rgba(208,211,201,.1);border-radius:3px}fieldset[name=radio]{margin-left:15px;margin-right:15px}fieldset[name=radio] input[type=radio]{margin:0;width:12px;height:12px;visibility:hidden}fieldset[name=radio] label{flex:1;justify-content:stretch;padding:5px 16px 5px 0;min-width:76px;background-color:#2f2c36;font-size:15px;text-align:center;color:rgba(208,211,201,.4);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}fieldset[name=radio] label:hover{background-color:#36333e}fieldset[name=radio] label:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}fieldset[name=radio] label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}fieldset[name=radio] label.checked{background-color:rgba(208,211,201,.1);color:#d0d3c9}.g-input{display:inline-flex;margin:10px 5px}.g-input input[type=number]::-webkit-inner-spin-button,.g-input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.g-input input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;width:50px;height:30px;font-size:14px;border:none;border-radius:0;text-align:center;background-color:rgba(47,44,54,.7);color:#d0d3c9}.g-input input+.g-input__button-left{border-left:none}.g-input input+.g-input__button-right{border-right:none}@media (hover:none) and (pointer:coarse){.g-input input{height:33px}}.g-input__label{font-size:14px;color:#d0d3c9}.g-input__button{margin:0;height:30px;width:30px;border:none;background-color:rgba(47,44,54,.4);color:#d0d3c9;cursor:pointer;transition:background-color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (hover:hover){.g-input__button:hover{background-color:rgba(208,211,201,.1)}}@media (hover:none) and (pointer:coarse){.g-input__button{height:33px;width:33px}}.g-input__button-left{border-top-left-radius:3px;border-bottom-left-radius:3px}.g-input__button-left~.g-input__input{border-left:none}.g-input__button-right{order:3;border-top-right-radius:3px;border-bottom-right-radius:3px}.g-input__button-right~.g-input__input{border-right:none}.g-output{position:relative;margin:15px;height:150px;width:300px;background-color:#e2e2e2;font-weight:500;color:#fff;border-radius:3px;box-shadow:0 0 20px 0 rgba(0,0,0,.08),0 6px 8px 0 rgba(0,0,0,.05);transition:transform .3s ease-out}@media (hover:none) and (pointer:coarse){.g-output:active{transform:scale(1.05,1.05);transition:transform .1s ease-out}}.g-output+*{margin-top:0}@media (hover:hover){.g-output:hover{transform:scale(1.05,1.05);cursor:pointer}}.g-output .g-output__button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:7px 13px;background-color:rgba(0,0,0,.3);border-radius:5px;font-size:12px;font-weight:400;text-align:center;opacity:0;transition:opacity .3s ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (hover:hover){.g-output:hover .g-output__button{opacity:.9}}@media (hover:none) and (pointer:coarse){.g-output .g-output__button{transition:opacity .3s ease-out 1s}.g-output:active .g-output__button{opacity:.9;transition:opacity .1s ease-out}}.g-output .g-output__text{position:absolute;top:50%;left:5px;right:0;text-align:center;transform:translateY(-17px);font-size:25px;font-weight:400;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.g-output .g-icon{position:absolute;top:0;right:0;transform:translate(-5px,5px);opacity:.3}.g-slider{-webkit-appearance:none;margin-top:18px;margin-bottom:18px;width:100%;max-width:270px;height:5px;background-color:rgba(47,44,54,.8);border-radius:3px;opacity:.7;transition:opacity .2s}.g-slider:active,.g-slider:hover{opacity:1}.g-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border:none;border-radius:3px;background-color:#f2f2f2;cursor:pointer}@media (hover:none) and (pointer:coarse){.g-slider::-webkit-slider-thumb{width:25px;height:25px}}.g-slider::-moz-range-thumb{width:20px;height:20px;border:none;background-color:#d0d3c9;cursor:pointer}.g-icon--copy{-webkit-mask:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA0NzcuODY3IDQ3Ny44NjciPg0KPHBhdGggZD0iTTM0MS4zMzMsODUuMzMzSDUxLjJjLTI4LjI3NywwLTUxLjIsMjIuOTIzLTUxLjIsNTEuMnYyOTAuMTMzYzAsMjguMjc3LDIyLjkyMyw1MS4yLDUxLjIsNTEuMmgyOTAuMTMzDQoJYzI4LjI3NywwLDUxLjItMjIuOTIzLDUxLjItNTEuMlYxMzYuNTMzQzM5Mi41MzMsMTA4LjI1NiwzNjkuNjEsODUuMzMzLDM0MS4zMzMsODUuMzMzeiIvPg0KPHBhdGggZD0iTTQyNi42NjcsMGgtMzA3LjJjLTI4LjEyNC0wLjAwMS01MC45ODQsMjIuNjg0LTUxLjIsNTAuODA3YzAsMC4xMzcsMCwwLjI1NiwwLDAuMzkzaDI3My4wNjcNCgljNDcuMTA1LDAuMDU2LDg1LjI3NywzOC4yMjgsODUuMzMzLDg1LjMzM1Y0MDkuNmMwLjEzNywwLDAuMjU2LDAsMC4zOTMsMGMyOC4xMjQtMC4yMTYsNTAuODA4LTIzLjA3Niw1MC44MDctNTEuMlY1MS4yDQoJQzQ3Ny44NjcsMjIuOTIzLDQ1NC45NDQsMCw0MjYuNjY3LDB6Ii8+DQo8L3N2Zz4NCg==);mask:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA0NzcuODY3IDQ3Ny44NjciPg0KPHBhdGggZD0iTTM0MS4zMzMsODUuMzMzSDUxLjJjLTI4LjI3NywwLTUxLjIsMjIuOTIzLTUxLjIsNTEuMnYyOTAuMTMzYzAsMjguMjc3LDIyLjkyMyw1MS4yLDUxLjIsNTEuMmgyOTAuMTMzDQoJYzI4LjI3NywwLDUxLjItMjIuOTIzLDUxLjItNTEuMlYxMzYuNTMzQzM5Mi41MzMsMTA4LjI1NiwzNjkuNjEsODUuMzMzLDM0MS4zMzMsODUuMzMzeiIvPg0KPHBhdGggZD0iTTQyNi42NjcsMGgtMzA3LjJjLTI4LjEyNC0wLjAwMS01MC45ODQsMjIuNjg0LTUxLjIsNTAuODA3YzAsMC4xMzcsMCwwLjI1NiwwLDAuMzkzaDI3My4wNjcNCgljNDcuMTA1LDAuMDU2LDg1LjI3NywzOC4yMjgsODUuMzMzLDg1LjMzM1Y0MDkuNmMwLjEzNywwLDAuMjU2LDAsMC4zOTMsMGMyOC4xMjQtMC4yMTYsNTAuODA4LTIzLjA3Niw1MC44MDctNTEuMlY1MS4yDQoJQzQ3Ny44NjcsMjIuOTIzLDQ1NC45NDQsMCw0MjYuNjY3LDB6Ii8+DQo8L3N2Zz4NCg==)}.g-icon{width:20px;height:20px;-webkit-mask-size:cover;mask-size:cover;background-color:#000;.container-gradient{background:#f5f5f5;display:flex;align-items:center;justify-content:center;border-radius:10px;padding:10px}@media (max-width:767px){.container-gradient{padding:0;background:0 0}.g-output{width:100%;margin:0 0 15px 0}fieldset[name=radio]{margin:0}form.flex-grid{margin:0;padding:10px}form.flex-grid .col{width:100%}.gradient-mixer{max-width:100%}}}
.container-gradient + p > img,.container-gradient + img {
    display: none;
}
input[type="color"] {
    width: 50px;
    padding: 0;
}
.g-color-picker label {
    margin-bottom: 0;
}
.g-input button {
    padding: 0;
    text-decoration: none;
}
.g-input input.g-input__input {
    padding: 0;
}