.radius-view-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, max-content)); grid-gap: 10px; justify-content: start; margin-bottom: 20px; } .radius-view-selector > *, .radius-view-selector > * > * { width: 100%; } @media (max-width: 576px) { .radius-view-selector { grid-template-columns: 1fr; } } .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 15px; margin-bottom: 20px; justify-content: center; align-items: center; } .status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .status-dot.online { background-color: green; } .status-dot.offline { background-color: grey; } .free-users-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } @media (max-width: 768px) { .free-users-container { grid-template-columns: 1fr; } } .free-users-column { background-color: #f8f9fa; padding: 15px; border-radius: 5px; } /* RADIUS ONT PARSER */ .loading-overlay { position: relative; padding: 20px; background: white; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .progress { height: 30px; } .progress-bar { transition: width 0.3s ease; }