.buttons-colors{cursor:pointer;position:relative}.buttons-colors a{width:32px;height:32px;border-radius: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{width:80px;height:32px;border:2px solid var(--color3);text-align:center;border-radius:6px;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}h2#colors{text-transform:uppercase;color:var(--color1);flex:60%;font-size:.9375rem;font-weight:600;display:inline-block}a#gimmemore{cursor:pointer;height:32px;border:2px solid var(--color3);color:var(--color1);text-align:center;border-radius:6px;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;height:32px;border:2px solid var(--color3);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,a#gimmemore:hover{background:var(--color3)}.section-colors,.section-css-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%}}.section-css-colors>div{flex:0 33.3333%;padding:10px}@media (max-width:992px){.section-css-colors>div{flex:0 100%}}.bkg,.color{height:160px;cursor:pointer;border-radius:12px;justify-content:center;align-items:center;display:flex}.color{height:120px}.bkg:hover,.color:hover{transition:box-shadow .2s;box-shadow:0 2px 10px rgba(0,0,0,.25)}.bkg a,.color a{color:#fff;width:100%;height:100%;text-align:center;line-height:160px;text-decoration:none;display:none}.color a{line-height:120px}.bkg:hover a,.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-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{height:0;text-align:left;-webkit-user-select:text;user-select:text;background:0 0;margin:0;padding:0}.section-color-names table{width:100%;min-width:450px;border-collapse:collapse}.section-color-names table thead tr{height:50px;border-bottom:1px solid var(--color3);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,.section-color-names table tbody tr td:last-of-type{padding-right:0}.section-color-names table tbody tr td{height:70px;border-bottom:1px solid var(--color3);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{width:35px;height:35px;cursor:pointer;border-radius: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{width:100%;flex-flow:wrap;justify-content:space-between;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);width:45px;height:45px;float:right;border-radius:4px;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{width:calc(100% - 20px);border:1px solid var(--color1);text-align:center;-webkit-appearance:none;-moz-appearance:textfield;border-radius:4px;outline:0;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);width:45px;height:45px;float:right;border-radius:4px;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{width:calc(100% - 50px);border:1px solid var(--color1);text-align:center;-webkit-appearance:none;-moz-appearance:textfield;border-radius:4px;outline:0;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{height:0;text-align:left;-webkit-user-select:text;user-select:text;background:0 0;margin:0;padding:0}.output-fields table{width:100%;min-width:350px;table-layout:fixed;border-collapse:collapse;font-size:.9375rem}.output-fields table thead tr{height:50px;border-bottom:1px solid var(--color3)}.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{height:70px;border-bottom:1px solid var(--color3);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:inline-block}div.color-name-box{width:100%;height:200px;border-radius:5px;margin-bottom:60px;display:block}div.color-name-information{width:100%;color:var(--color1);margin-bottom:80px}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{height:0;text-align:left;-webkit-user-select:text;user-select:text;background:0 0;margin:0;padding:0}.color-name-details table{width:100%;min-width:450px;table-layout:fixed;border-collapse:collapse}.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{height:70px;border-bottom:1px solid var(--color3);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{width:100%;text-align:center;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{width:100px;height:100px;text-align:center;cursor:pointer;border-radius:50px;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,.color-name-tints div:hover,.color-name-tones div:hover,.color-name-monochromatic div:hover,.color-name-similars div:hover{background-color:var(--color3)!important}.color-name-shades div:hover span,.color-name-tints div:hover span,.color-name-tones div:hover span,.color-name-monochromatic div:hover span,.color-name-similars div:hover span{opacity:1}