@import '../../../styles/colors.scss'; .container { color: $text-color; .relayURItextfield { width: 100%; } .relayAddContainer { display: flex; flex-direction: row; gap: 10px; width: 100%; align-items: start; } .sectionIcon { font-size: 30px; } .sectionTitle { margin-top: 35px; margin-bottom: 10px; display: flex; flex-direction: row; gap: 5px; font-size: 1.5rem; line-height: 2rem; font-weight: 600; } .relaysContainer { display: flex; flex-direction: column; gap: 15px; } .relay { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px; .relayDivider { margin-left: 10px; margin-right: 10px; } .leaveRelayContainer { display: flex; flex-direction: row; gap: 10px; cursor: pointer; } .showInfo { cursor: pointer; } .showInfoIcon { margin-right: 3px; margin-bottom: auto; vertical-align: middle; } .relayInfoContainer { display: flex; flex-direction: column; gap: 5px; text-wrap: wrap; } .relayInfoTitle { font-weight: 600; } .relayInfoSubTitle { font-weight: 500; } .copyItem { margin-left: 10px; color: #34495e; vertical-align: bottom; cursor: pointer; } .connectionStatus { border-radius: 9999px; width: 10px; height: 10px; margin-right: 5px; margin-top: 2px; } .connectionStatusConnected { background-color: $relay-status-connected; } .connectionStatusNotConnected { background-color: $relay-status-notconnected; } .connectionStatusUnknown { background-color: $input-text-color; } } }