/*! CSS-GRADIENT.COM - Do not use without permission */
.buttons-colors{cursor:pointer;position:relative}.buttons-colors a{border-radius:32px;width:32px;height:32px;margin-top:4px;margin-left:0;margin-right:8px;line-height:1.75rem;display:inline-block}.buttons-colors a#red{background-color:#ed2939}.buttons-colors a#orange{background-color:#ef7215}.buttons-colors a#yellow{background-color:#ffd300}.buttons-colors a#green{background-color:#50c878}.buttons-colors a#azure{background-color:#bdffff}.buttons-colors a#blue{background-color:#008ecc}.buttons-colors a#purple{background-color:purple}.buttons-colors a#pink{background-color:#fe7f9c}.buttons-colors a#monochrome{background-color:#dcdcdc}.buttons-type{cursor:pointer;position:relative}.buttons-type a{border:2px solid var(--color3);text-align:center;border-radius:8px;width:80px;height:32px;margin-top:4px;margin-left:8px;font-size:.8125rem;font-weight:500;line-height:1.75rem;text-decoration:none;display:inline-block}.buttons-type a:first-child{margin-left:0}.buttons-type a:nth-child(4){margin-left:0}.buttons-type a:hover{background:var(--color3)}.section-pages{width:50%;color:var(--color1-90);margin:92px auto 0;font-size:.875rem;font-weight:400;line-height:1.5;display:block}.section-pages-header{flex-flow:row;margin-bottom:54px;display:flex}.breadcrumb{margin-bottom:24px;font-size:.8125rem;display:block}.breadcrumb a{color:var(--color1-90)}.breadcrumb-sep{color:var(--color1-25);margin:0 6px}.breadcrumb-current{color:var(--color1-25)}h2#colors{text-transform:uppercase;color:var(--color1);flex:60%;font-size:.9375rem;font-weight:600;display:inline-block}a#gimmemore{cursor:pointer;border:2px solid var(--color3);height:32px;color:var(--color1);text-align:center;border-radius:8px;flex:0 0 100px;margin-top:-5px;margin-right:8px;font-size:.8125rem;font-weight:500;line-height:1.75rem;text-decoration:none;display:inline-block}a#createnew{cursor:pointer;border:2px solid var(--color3);height:32px;color:var(--color1);text-align:center;border-radius:6px;flex:0 0 130px;margin-top:-5px;font-size:.8125rem;font-weight:500;line-height:1.75rem;text-decoration:none;display:inline-block}a#createnew:hover{background:var(--color3)}a#gimmemore:hover{background:var(--color3)}.section-colors{flex-flow:wrap;align-content:flex-start;justify-content:center;align-items:flex-start;margin:0 -10px;display:flex}.section-colors>div{flex:0 50%;padding:10px}@media (max-width:992px){.section-colors>div{flex:0 100%}}.bkg,.color{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;height:160px;display:flex}.color{height:120px}.bkg:hover{transition:box-shadow .2s;box-shadow:0 2px 10px rgba(0,0,0,.25)}.color:hover{transition:box-shadow .2s;box-shadow:0 2px 10px rgba(0,0,0,.25)}.bkg a,.color a{color:#fff;text-align:center;width:100%;height:100%;line-height:160px;text-decoration:none;display:none}.color a{line-height:120px}.bkg:hover a{display:block}.color:hover a{display:block}p.section-color-names-intro{color:var(--color1);margin-bottom:70px}div.section-color-names-table{width:100%;margin-bottom:100px;overflow-x:auto}.section-color-names h3{text-transform:uppercase;color:var(--color1);margin-top:32px;margin-bottom:10px;font-size:.9375rem}.section-color-names table,.section-color-names thead,.section-color-names tbody,.section-color-names tfoot,.section-color-names tr,.section-color-names th,.section-color-names td{text-align:left;-webkit-user-select:text;user-select:text;background:0 0;height:0;margin:0;padding:0}.section-color-names table{border-collapse:collapse;width:100%;min-width:450px}.section-color-names table thead tr{border-bottom:1px solid var(--color3);height:50px;color:var(--color1-90)}.section-color-names table thead tr th{text-transform:uppercase;font-size:90%;font-weight:600}.section-color-names table thead tr th,.section-color-names table tbody tr td{padding-right:10px}.section-color-names table thead tr th:last-of-type{padding-right:0}.section-color-names table tbody tr td:last-of-type{padding-right:0}.section-color-names table tbody tr td{border-bottom:1px solid var(--color3);height:70px;color:var(--color1)}.section-color-names table tbody tr td#color-names-color{width:90px}.section-color-names table tbody tr td div#color-names-color-get{cursor:pointer;border-radius:35px;width:35px;height:35px;display:block}.section-color-names table tbody tr td div#color-names-color-get.copied{text-align:center;width:70px;background-color:var(--color1)!important}.section-color-names table tbody tr td div#color-names-color-get.copied:after{content:"Copied!";color:var(--color3);font-size:90%;line-height:35px}.section-color-names table tbody tr td#color-names-name a{text-decoration:none}.section-color-converter{width:100%;font-size:.9375rem}.section-color-converter .input-fields{flex-flow:wrap;justify-content:space-between;width:100%;margin-bottom:54px;display:flex}.section-color-converter .input-fields div.input-r,.section-color-converter .input-fields div.input-g,.section-color-converter .input-fields div.input-b{flex:0 0 25%}.section-color-converter .input-fields div.input-rgb{flex:0 0 45px}.section-color-converter .input-fields div.input-rgb span{border:1px solid var(--color1);float:right;border-radius:4px;width:45px;height:45px;display:block}.section-color-converter .input-fields div.input-r label,.section-color-converter .input-fields div.input-g label,.section-color-converter .input-fields div.input-b label{width:20px;color:var(--color1);font-weight:600;display:inline-block}.section-color-converter .input-fields div input{border:1px solid var(--color1);text-align:center;-webkit-appearance:none;-moz-appearance:textfield;border-radius:4px;outline:0;width:calc(100% - 20px);margin:0;padding:10px 20px;font-weight:600;display:inline-block}.section-color-converter .input-fields div input::placeholder{opacity:.25}div.output-fields{width:100%;margin-bottom:100px;overflow-x:auto}@media (max-width:1100px){.section-color-converter .input-fields div.input-r,.section-color-converter .input-fields div.input-g,.section-color-converter .input-fields div.input-b{flex:0 0 100%;margin-bottom:20px}.section-color-converter .input-fields div.input-r label,.section-color-converter .input-fields div.input-g label,.section-color-converter .input-fields div.input-b label{width:50px}.section-color-converter .input-fields div input{width:calc(100% - 50px)}.section-color-converter .input-fields div.input-rgb{flex:0 0 100%}.section-color-converter .input-fields div.input-rgb span{float:right}}.section-color-converter .input-fields div.input-hex{flex:0 0 320px}.section-color-converter .input-fields div.input-hex-color{flex:0 0 45px}.section-color-converter .input-fields div.input-hex-color span{border:1px solid var(--color1);float:right;border-radius:4px;width:45px;height:45px;display:block}.section-color-converter .input-fields div.input-hex label{width:50px;color:var(--color1);font-weight:600;display:inline-block}.section-color-converter .input-fields div input#hex{border:1px solid var(--color1);text-align:center;-webkit-appearance:none;-moz-appearance:textfield;border-radius:4px;outline:0;width:calc(100% - 50px);margin:0;padding:10px 20px;font-weight:600;display:inline-block}@media (max-width:1100px){.section-color-converter .input-fields div.input-hex{flex:0 0 100%;margin-bottom:20px;padding-right:0}.section-color-converter .input-fields div.input-hex-color{flex:0 0 100%}.section-color-converter .input-fields div.input-hex label{width:50px}.section-color-converter .input-fields div input#hex{width:calc(100% - 50px)}}.output-fields table,.output-fields thead,.output-fields tbody,.output-fields tfoot,.output-fields tr,.output-fields th,.output-fields td{text-align:left;-webkit-user-select:text;user-select:text;background:0 0;height:0;margin:0;padding:0}.output-fields table{table-layout:fixed;border-collapse:collapse;width:100%;min-width:350px;font-size:.9375rem}.output-fields table thead tr{border-bottom:1px solid var(--color3);height:50px}.output-fields table thead tr th{color:var(--color1-90);text-transform:uppercase;font-size:90%;font-weight:600}.output-fields table tbody tr td{border-bottom:1px solid var(--color3);height:70px;color:var(--color1);font-weight:600}.output-fields #hex-value,.output-fields #rgb-value,.output-fields #hsv-value,.output-fields #hsl-value,.output-fields #name-value{font-family:monospace}h2#color-name{text-transform:uppercase;color:var(--color1);font-size:.9375rem;font-weight:600;display:inline-block}h3#color-name-text{text-transform:uppercase;color:var(--color1);margin-bottom:20px;font-size:.875rem;font-weight:600;display:block}h3#color-name-text.section-cta-heading{margin-top:60px}div.color-name-box{border-radius:5px;width:100%;height:200px;margin-bottom:60px;display:block}div.format-swatch{border-radius:5px;width:100%;height:80px;margin:16px 0 32px;display:block}a.color-gradient-cta{border:2px solid var(--color3);border-radius:10px;margin-bottom:30px;padding:15px;text-decoration:none;display:block}div.color-gradient-preview{border-radius:5px;width:100%;height:80px;margin-bottom:12px;display:block}span.color-gradient-cta-label{color:var(--color1);font-size:.875rem;font-weight:400;display:block}div.color-name-css{box-sizing:border-box;width:100%;color:var(--color1);border-radius:5px;margin-bottom:60px;padding:20px;display:block;background-color:var(--color3)!important}div.color-name-css pre{white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text;max-width:100%;margin:8px 0 0}div.color-name-information{width:100%;color:var(--color1);margin-bottom:80px}.preset-hero{border-radius:5px;width:100%;height:200px;margin-bottom:20px;display:block}.preset-description{width:100%;color:var(--color1);margin-bottom:20px}.preset-stops{flex-wrap:wrap;gap:10px;margin-bottom:60px;display:flex}.preset-stops .preset-stop{cursor:pointer}.color-name-shades>div{cursor:pointer}.color-name-tints>div{cursor:pointer}.color-name-tones>div{cursor:pointer}.color-name-monochromatic>div{cursor:pointer}.color-name-similars>div{cursor:pointer}.preset-stop{border-radius:5px;flex:100px;justify-content:center;align-items:flex-end;height:70px;padding-bottom:8px;display:flex}.preset-stop span{color:#fff;background:rgba(0,0,0,.35);border-radius:4px;padding:2px 6px;font-size:.75rem}.code-block-label{text-transform:uppercase;color:var(--color1);justify-content:space-between;align-items:center;margin-top:16px;font-size:.75rem;font-weight:600;display:flex}.code-block-label:first-child{margin-top:0}.code-block-label a.code-copy-btn{cursor:pointer;text-transform:none;font-weight:400}.preset-related{flex-wrap:wrap;gap:12px;margin-bottom:60px;display:flex}.preset-related-card{flex:140px;text-decoration:none;display:block}.preset-related-swatch{border-radius:5px;width:100%;height:70px;margin-bottom:6px}.preset-related-name{color:var(--color1);font-size:.8125rem}.section-presets{margin-top:0}.palette-hero{border-radius:5px;width:100%;height:200px;margin-bottom:20px;display:flex;overflow:hidden}.palette-hero span{flex:1 1 0;display:block}.palette-related-swatch{border-radius:5px;width:100%;height:70px;margin-bottom:6px;display:flex;overflow:hidden}.palette-related-swatch span{flex:1 1 0;display:block}.palette-contrast{width:100%;margin-bottom:8px;overflow-x:auto}.palette-contrast-table,.palette-contrast-table thead,.palette-contrast-table tbody,.palette-contrast-table tr,.palette-contrast-table th,.palette-contrast-table td{text-align:left;background:0 0;height:0;margin:0;padding:0}.palette-contrast-table{border-collapse:collapse;width:100%;min-width:420px}.palette-contrast-table thead tr{border-bottom:1px solid var(--color3);height:44px;color:var(--color1-90)}.palette-contrast-table thead tr th{text-transform:uppercase;font-size:90%;font-weight:600}.palette-contrast-table th,.palette-contrast-table td{padding-right:10px}.palette-contrast-table th:last-of-type{padding-right:0}.palette-contrast-table td:last-of-type{padding-right:0}.palette-contrast-table tbody tr td{border-bottom:1px solid var(--color3);height:56px;color:var(--color1)}.palette-contrast-swatch{border-radius:35px;width:35px;height:35px;display:block}.palette-contrast-hex{font-size:.8125rem;font-weight:600}.palette-contrast-check{align-items:center;gap:6px;display:flex}.palette-contrast-circle{border:.5px solid rgba(0,0,0,.25);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:35px;height:35px;font-size:.9375rem;font-weight:700;display:flex}.palette-contrast-badge{color:var(--color1);background:rgba(128,128,128,.3);border-radius:999px;margin-left:4px;padding:3px 8px;font-size:.6875rem;font-weight:700}.palette-contrast-badge.pass{color:#fff;background:#1a7f37}.palette-contrast-badge.fail{color:#fff;background:#cf222e}.palette-contrast-note{color:var(--color1);opacity:.7;margin-bottom:60px;font-size:.75rem}.guide-cards{flex-wrap:wrap;gap:20px;margin:32px 0 70px;display:flex}.guide-card{border:1px solid var(--color1-25);border-radius:8px;flex:260px;padding:24px;text-decoration:none;display:block}.guide-card:hover{background:var(--color3)}.guide-card-title{color:var(--color1);margin-bottom:8px;font-size:1rem;font-weight:700;display:block}.guide-card-desc{color:var(--color1-90);font-size:.8125rem;line-height:1.5;display:block}div.color-name-details-table{width:100%;margin-bottom:100px;overflow-x:auto}.color-name-details table,.color-name-details thead,.color-name-details tbody,.color-name-details tfoot,.color-name-details tr,.color-name-details th,.color-name-details td{text-align:left;-webkit-user-select:text;user-select:text;background:0 0;height:0;margin:0;padding:0}.color-name-details table{table-layout:fixed;border-collapse:collapse;width:100%;min-width:450px}.color-name-details table tbody tr td{padding-right:10px}.color-name-details table tbody tr td:last-of-type{padding-right:0}.color-name-details table tbody tr td{border-bottom:1px solid var(--color3);height:70px;color:var(--color1)}.color-name-details table tbody tr td#color-name-details-format{font-weight:700}.color-name-details table tbody tr td#color-name-details-value{font-family:monospace}.color-name-shades,.color-name-tints,.color-name-tones,.color-name-monochromatic,.color-name-similars{text-align:center;width:100%;margin-bottom:60px;display:block}.color-name-shades div,.color-name-tints div,.color-name-tones div,.color-name-monochromatic div,.color-name-similars div{text-align:center;cursor:pointer;border-radius:50px;width:100px;height:100px;margin:5px;display:inline-block}.color-name-shades div span,.color-name-tints div span,.color-name-tones div span,.color-name-monochromatic div span,.color-name-similars div span{color:var(--color1);opacity:0;font-size:90%;line-height:100px;display:block}.color-name-shades div:hover{background-color:var(--color3)!important}.color-name-tints div:hover{background-color:var(--color3)!important}.color-name-tones div:hover{background-color:var(--color3)!important}.color-name-monochromatic div:hover{background-color:var(--color3)!important}.color-name-similars div:hover{background-color:var(--color3)!important}.color-name-shades div:hover span{opacity:1}.color-name-tints div:hover span{opacity:1}.color-name-tones div:hover span{opacity:1}.color-name-monochromatic div:hover span{opacity:1}.color-name-similars div:hover span{opacity:1}