@font-face{font-family:-apple-system;font-display:swap}@font-face{font-family:Roboto;font-display:swap}html,body{--swiper-theme-color:#333;--swiper-navigation-size:19px;-webkit-font-smoothing:antialiased;width:100%;margin:0;padding:0;font-family:Inter,Roboto,sans-serif}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,p{font-size:inherit;font-weight:inherit;margin-block:0}button{display:inherit;background:0 0;border:none;outline:none}ul{white-space:normal}.hidden{opacity:.01}.underline-link{color:#0070c0;text-decoration:underline}.underline-link:hover{color:#005789}*{box-sizing:border-box}.hidden{display:none}.relative{position:relative}.App{width:100%;min-height:100vh;font-family:var(--font);background:#fff;flex-direction:column;display:flex}.Row{box-sizing:border-box;flex-direction:row;display:flex}.Screen-row{flex-direction:row;width:100%;padding:10px;display:flex}.Scroll{overflow-x:scroll}.Vertical{flex-direction:column;flex-grow:1;display:flex}.vertical{flex-direction:column;display:flex}.Flexchild{flex:1}.Wrap{flex-wrap:wrap;display:flex}.Center{align-items:center}.Centered{justify-content:center}.Between{gap:10px}.Space-between{justify-content:space-between}.Relative{position:relative}.bottom-gap{height:140px}.bottom-gap-small{height:80px}.color-picker-block{flex:1;min-width:250px;max-width:350px;margin:15px 30px 0 0}.color-picker-content{min-width:250px}.color-picker{background:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#fff0);height:210px;position:relative}.color-picker-dot{border:2px solid #fff;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;position:absolute;transform:translate(-50%,-50%)}.ads-wide-content{width:100%;min-width:200px;max-width:90vw;min-height:90px;margin:20px auto}.ads-column-content{max-width:300px;height:620px;margin:10px auto;padding:10px;position:sticky;top:20px}.ads-column-content-bottom{background-color:#8aa;width:300px;height:400px;margin:10px auto;position:sticky;top:430px}.ads-slide{flex:0 0 305px;height:500px;width:305px!important}.ads-slide-content{background-color:#eee;flex:0 0 305px;height:420px;width:305px!important}.ads-slide-gap{flex:0 0 305px;height:80px;width:305px!important}.ads-grid-wide-content,.ads-grid-wide{grid-column:1/-1;width:100%;min-width:0;margin:10px 0}.ads-leaderboard-content{width:auto;min-width:50%;max-width:100%;height:120px;margin:10px auto}.page-header{align-self:center;margin:0 auto;padding:20px 0 5px}.page-header-wide{align-self:center;margin:0 auto;padding:20px 0}.page-logo-link{margin:0 0 10px}.page-logo{width:150px;height:28px}.page-header-icon-link{cursor:pointer;padding:5px}.page-header-icon{width:24px;height:24px}.page-header-link{color:#333;font:500 15px var(--font);outline:none;margin:10px;text-decoration:none}.page-header-link:hover{color:#ee5b32}.page-header-dropdown{z-index:100;background-color:#fff;border:1px solid #333;border-radius:10px;width:200px;position:absolute;top:10px;left:50px;overflow:hidden}.dropdown-link{font:500 16px var(--font);color:#333;padding:10px 20px}.dropdown-link:hover{background-color:#f1f1f1}.page-header-bottom{border-bottom:1px solid #333;margin:5px 0}.page-header-bottom-white{border-bottom:1px solid #fff5;margin:5px 0}.swiper-row{flex-direction:row;width:100%;display:flex}.splide__pagination__page.is-active{background:#555!important}.splide__arrow--next,.splide__arrow--prev{opacity:.9!important;background:#fff!important;border:2px solid #333!important;border-radius:20px!important;width:55px!important;height:55px!important}.swiper-button-prev,.swiper-button-next{background:#fffa;border-radius:12px;padding:22px 17px;font-weight:700}.page-content{width:90%;max-width:1250px;height:auto;margin:0 auto;padding:0 10px}.page-content-wide{width:95%;max-width:1350px;height:auto;margin:0 auto;padding:0 10px}.mobile-shown{display:none}.color-table{border-collapse:collapse;width:100%;margin:30px 0}.color-table th,td{text-align:left;padding:5px 8px 5px 4px}.color-table th{font:600 14px var(--font)}.color-table td{font:400 14px var(--font)}.color-table tr:nth-child(2n){background-color:#f2f2f2}.third-icon td:nth-child(3){text-align:right;width:80px}.empty-text{text-align:center;color:#999;font:400 16px var(--font);box-sizing:border-box;grid-column:1/-1;width:100%;min-width:0;margin:150px auto}.copy-success{color:#555;font:400 16px var(--font);margin:8px 10px}.color-logo{width:160px;height:30px}.breadcrumb{color:#333;height:26px;margin-block:.5em;padding-inline-start:0;list-style:none}.breadcrumb li{font:400 14px var(--font);line-height:26px;display:inline}.breadcrumb li+li:before{content:"/ ";padding:5px}.breadcrumb li a{opacity:.9;text-transform:capitalize;background:#3331;border-radius:22px;height:auto;margin:2px 0;padding:6px 15px;text-decoration:none;display:inline-block}.breadcrumb li a:hover{opacity:1;text-decoration:none}.color-copy:hover{color:#444}.color-h3{color:#333;font:700 22px var(--hfont);margin:60px 10px 30px}.color-image-swiper{height:500px;padding:0 0 20px;width:100%!important;overflow-x:hidden!important}.color-image-slide{height:470px!important}.color-image{height:420px!important}.color-image-description{color:#333;height:20px;font:500 14px var(--font);word-wrap:break-word;text-align:center;max-width:100%;margin:5px 4px;padding:3px 6px;line-height:14px;display:block}.color-image-inactive{color:#777;height:20px;font:400 14px var(--font);word-wrap:break-word;text-align:center;max-width:100%;margin:10px 4px;padding:3px 6px;line-height:14px;display:block}.bold-bottom{border-bottom:4px solid #333}.color-content{width:100%;max-width:750px;margin:10px auto 30px}.color-description{font:400 15px var(--font);color:#444;white-space:pre-wrap;margin:10px 0;line-height:1.4}.color-contents-header{cursor:pointer;background:#f7f2ed;border:1px solid #ccc;border-radius:8px;margin:20px 0;padding:20px}.color-contents-icon{font:400 24px var(--font);color:#444;margin:0 10px}.color-contents ul{padding-inline-start:20px}.color-contents li{color:#2458a1;font:400 15px var(--font);margin:7px 0}.color-contents li:hover{color:#15396a}.color-description-block{color:#444;margin:20px 0 0}.color-description-block p{font:400 15px var(--font);color:#555;margin:15px 0;line-height:1.4}.color-description-block a{color:#333;font-weight:500;text-decoration:underline}.color-description-block h3{font:600 20px var(--hfont);color:#333;margin:50px 0 17px}.color-description-block-h2{font:600 20px var(--hfont);color:#333;margin:40px 15px 17px 0}.color-description-block-h3{font:600 19px var(--hfont);color:#333;margin:40px 0 10px}.color-description-block h4,.color-description-block-h4{font:600 17px var(--hfont);margin:25px 0 15px}.color-description-block li{margin:7px 0}.color-content .react-colorful{width:100%;max-width:800px;height:230px;margin:10px 0}.color-content .react-colorful__hue{display:none}.color-content .react-colorful__hue .react-colorful__pointer{border-radius:3px;width:20px;height:35px}.color-property-header{font:400 16px var(--font);color:#555;margin:0 4px 0 0;line-height:1.5}.color-property-value{font:500 16px var(--font);color:#333;margin-left:3px;line-height:1.5!important}.color-property-text{font:400 17px var(--font);color:#555;margin:15px 4px 15px 0;line-height:1.4}.color-block{padding:10px 0}.color-scheme-icon{width:80px;height:80px;margin-top:40px}.color-tip-block{background-color:#f7f2ed;border-radius:16px;margin:5px 0;padding:12px 20px}.color-tip{font:400 14px var(--font);line-height:1.4}.compare-color-card-ul{margin-block:0;padding-left:0;list-style-type:none;list-style-position:inside}.compare-color-card-ul li{min-height:100px;display:flex}.compare-color-card{font:600 16px var(--font);cursor:pointer;outline:none;padding:20px}.compare-color-card p{opacity:.9;transition:opacity .3s ease-out;height:100%;-moz-transition:opacity .3s ease-in-out}.compare-color-card:hover p{opacity:1}.compare-color-arrow{width:22px;height:22px;margin-left:10px}.color-compare-block{margin:5px 10px 15px}.white-text{color:#fff!important}.color-description-image{width:100%;max-width:800px;margin:10px 0}.color-lrv-image{aspect-ratio:475/158;width:100%;max-width:800px;margin:10px 0}.color-hue{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);width:100%;height:30px;margin:10px 0;position:relative}.color-hue-dot{border:2px solid #111;border-radius:3px;width:15px;height:34px;position:absolute;top:-2px}.color-button{cursor:pointer;color:#333;font:600 15px var(--font);text-transform:lowercase;border:1px solid #777;border-radius:24px;margin:4px 8px 4px 0;padding:8px 12px;text-decoration:none}.color-button:hover{background:#eee}.color-tag{cursor:pointer;color:#fff;font:600 15px var(--font);text-transform:lowercase;border-radius:24px;margin:4px 8px 4px 0;padding:8px 12px;text-decoration:none}.color-tag:hover{opacity:.95}.color-copy-icon{align-self:center;width:13px;height:13px;margin:0 0 0 10px}.swiper-pagination-bullet-active{background:#111!important}.swiper-container{padding:0 0 40px!important}.swiper-pagination-bullets{bottom:5px!important}.color-list{font:400 15px var(--font);color:#444;-webkit-padding-start:20px;padding-inline-start:20px;line-height:1.3}.color-list li{margin:6px 0}.copy-code-icon{cursor:pointer;opacity:.7;width:12px;height:12px;margin:3px}.copy-code-text{color:#555;font:400 15px var(--font)}.color-card-block{flex:0 0 250px;margin:0 7px}.color-content-description{font:400 16px var(--font);color:#555;margin:15px 0 30px}.search-color-content{width:1400px;max-width:98%;min-height:200px;margin:10px auto;overflow-y:scroll}.cards-container{grid-template-columns:repeat(5,1fr);gap:10px;width:100%;display:grid}.small-cards-container{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;display:grid}@media only screen and (max-width:359px){.color-table th{padding:0!important;font-size:10px!important}}@media (max-width:1000px){.cards-container{grid-template-columns:repeat(3,1fr)}}@media (max-width:600px){html,body{-webkit-text-size-adjust:100%}.cards-container{grid-template-columns:repeat(2,1fr)}.small-cards-container{grid-template-columns:repeat(2,1fr);padding:0 10px}.color-card-block{flex:0 0 200px;margin:0 5px}.color-category-card{flex-basis:calc(50% - 5px);margin:5px 0}.breadcrumb{height:auto;min-height:52px;margin-block:0}.color-block{padding:10px 30px 40px}.color-h3{margin:60px 30px 20px}.splide__arrow--next,.splide__arrow--prev{width:35px!important}.mobile-shown{display:block!important}.mobile-hidden{display:none!important}.ads-leaderboard-content{height:50px}}