.hover-button.active { display: block; visibility: visible; } .nav-close-button { margin-left: 8px; } .nav { position: fixed; z-index: 64; top: 0; /* max-width: 260px; */ bottom: 0; opacity: 0; } .nav.active { position: relative; left: 0; opacity: 1; } .nav-mask.active { opacity: 1; pointer-events: auto; } @media (max-width: 767px) { .nav { width: calc(100% - 10px) ; transition: all 0.15s; } .nav-mask { position: fixed; z-index: 63; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(86, 88, 105, 0.75); padding-left: 420px; padding-top: 12px; opacity: 0; transition: all 0.5s; pointer-events: none; } .nav-open-button { opacity: 0; } .nav-mask.active { opacity: 1; pointer-events: auto; } .nav.active { position: fixed; } } @media (min-width: 1024px) { .switch-container { display: none; } } .switch-result { display: block !important; visibility: visible; } @media (max-width: 1024px) { /* .sibling-switch { left: 114px; top: unset; bottom: 4px; visibility: visible; z-index: 2; } */ .sibling-switch { display: none; } .hover-button { display: block; visibility: visible; } } @media (max-width: 767px) { .input-panel-button { border: 0; } .input-panel-button svg { width: 16px; height: 16px; } .input-panel { } .nav-open-button { visibility: hidden; } }