.network-indicator { display: flex; align-items: center; font-size: .6em; } .network-name { line-height: 12px; padding: 0 4px; font-family: 'DIN OT'; font-size: 10px; flex: 1 0 auto; } .network-droppo { right: 2px; @media screen and (min-width: 576px) { right: calc(((100% - 85vw) / 2) + 2px); } @media screen and (min-width: 769px) { right: calc(((100% - 80vw) / 2) + 2px); } @media screen and (min-width: 1281px) { right: calc(((100% - 65vw) / 2) + 2px); } } .network-name-item { font-weight: 100; flex: 1 0 auto; color: $dusty-gray; } .network-check, .network-check__transparent { color: $white; margin-left: 7px; } .network-check__transparent { opacity: 0; width: 16px; margin: 0; } .menu-icon-circle, .menu-icon-circle--active { height: 23px; width: 23px; margin: 9px; background: none; border-radius: 22px; display: flex; justify-content: center; align-items: center; border: 1px solid transparent; background: none; } .menu-icon-circle--active { border: 1px solid white; background: rgba(100, 100, 100, 0.4); } .menu-icon-circle div, .menu-icon-circle--active div { height: 17px; width: 17px; border-radius: 17px; opacity: 0.7; } .menu-icon-circle--active div { opacity: 1; } .network-dropdown-header { display: flex; flex-direction: column; align-items: center; width: 100%; } .network-dropdown-divider { width: 100%; height: 1px; margin: 10px 0; background-color: $scorpion; } .network-dropdown-title { height: 25px; width: 75px; color: $white; font-family: 'DIN OT'; font-size: 18px; line-height: 25px; text-align: center; } .network-dropdown-content { height: 36px; width: 265px; color: $dusty-gray; font-family: 'DIN OT'; font-size: 14px; line-height: 18px; }