.color-tables-nav-container{display:flex;position:relative;background-color:#f5f5f5;color:#444;font-size:1.4rem;font-family:"Source Sans 3"}.color-tables-nav-menu{transition:max-height .4s ease-in-out,padding-right .4s ease-in-out;width:100%;max-height:36px;overflow:hidden}.color-tables-list{display:flex;flex-wrap:wrap}.color-tables-list li{box-sizing:border-box;border-bottom:1px solid #ebebeb;width:14.28%;height:36px;list-style:none}.color-tables-dropdown-menu:hover,.color-tables-list li:hover{background-color:#ebebeb}.color-tables-list li a{display:flex;justify-content:center;align-items:center;height:100%;color:#444}.color-tables-list li a.active-color-table{background-color:#e6e6e6}.color-tables-dropdown-menu-toggle{display:none}.color-tables-dropdown-menu-toggle:checked+.color-tables-nav-menu{padding-right:0;max-height:calc(2 * 36px)}.color-tables-dropdown-menu{display:none;position:absolute;right:0;bottom:0;justify-content:center;align-items:center;transition:bottom .4s ease-in-out 0s;cursor:pointer;background-color:#e6e6e6;width:4%;height:36px}.color-tables-dropdown-menu-toggle:checked~.color-tables-dropdown-menu{position:absolute;bottom:-36px}.color-tables-dropdown-menu::after,.color-tables-dropdown-menu::before{position:absolute;transition:transform .4s ease-in-out;background-color:#444;width:12px;height:3px;content:""}.color-tables-dropdown-menu::before{transform:rotate(40deg);margin-right:7px}.color-tables-dropdown-menu::after{transform:rotate(-40deg);margin-left:7px}.color-tables-dropdown-menu-toggle:checked~.color-tables-dropdown-menu::before{transform:rotate(-40deg)}.color-tables-dropdown-menu-toggle:checked~.color-tables-dropdown-menu::after{transform:rotate(40deg)}.btn-create-table{display:block;margin:30px auto;border:none;border-radius:10px;background-color:#07f;padding:14px;color:#fff;font-weight:600;font-size:1.6rem}.btn-create-table:hover{cursor:pointer;background-color:#09f}.color-table{display:flex;flex-wrap:wrap;justify-content:center;margin:10px auto;color:#444;font-weight:500;font-size:1rem}.color-table>div{margin:8px;box-shadow:var(--box-shadow-default);border-radius:10px;background-color:#fffdfd;width:80px;height:120px;overflow:hidden}.color-table>div:hover{box-shadow:-1px 1px 8px rgba(150,150,150,.5)}.color-table>div>div{cursor:pointer;box-shadow:var(--box-shadow-default);border-radius:10px;height:66%;overflow:hidden}.color-table>div b,.color-table>div span{display:block;padding:4px 5px 0}.color-names-table>div{margin:8px;width:180px;height:55px}.color-names-table>div div{float:left;margin-right:8px;width:55px;height:100%}@media (max-width:1440px){.color-tables-nav-menu{padding-right:3.9%}.color-tables-list li{width:16.66%}.color-tables-dropdown-menu{display:flex}}@media (max-width:1160px){.color-tables-nav-menu{padding-right:6%}.color-tables-list li{width:20%}.color-tables-dropdown-menu{width:6%}.color-table{margin-top:0}}@media (max-width:876px){.color-tables-nav-menu{padding-right:8%}.color-tables-list li{width:33.3%}.color-tables-dropdown-menu{width:8%}.color-tables-dropdown-menu-toggle:checked+.color-tables-nav-menu{max-height:calc(3 * 35px)}.color-table>div{margin:6px;font-size:1rem}}@media (max-width:576px){.color-tables-nav-menu{padding-right:10%}.color-tables-list li{width:50%}.color-tables-dropdown-menu{width:10%}.color-tables-dropdown-menu-toggle:checked+.color-tables-nav-menu{max-height:calc(4 * 36px)}.color-table>div{width:65px;height:100px;font-size:.9rem}.color-table>div div{height:65px}.color-names-table>div{min-width:170px;height:60px;font-size:1rem}.color-names-table>div div{width:60px;height:100%}}