body {
        font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    }
    
    @font-face {
        font-family: 'Roboto';
        src: url('/fonts/Roboto-Regular-303c6d9e16168364d3bc5b7f766cfff4.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    /* Medium (500) */
    @font-face {
        font-family: 'Roboto';
        src: url('/fonts/Roboto-Medium-7d752fb726f5ece291e2e522fcecf86d.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    /* Bold (700) */
    @font-face {
        font-family: 'Roboto';
        src: url('/fonts/Roboto-Bold-dd5415b95e675853c6ccdceba7324ce7.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    .offline-icon {
        background-image: url('/img/inactive-fb59670a35a7a205fe42760b9a5b0a46.png');
        width: 24px;
        height: 24px;
    }


    .online-icon {
        background-image: url('/img/connected-f98c445bb1ff3794a5a15d63fd423ce6.png');
        width: 24px;
        height: 24px;
    }

    h4 {
        font-weight: 400;
    }

    .sort-icon {
        width: 22px;
        height: 22px;
    }
    
    .admin-sort-icon {
        width: 22px;
        height: 22px;
    }
    
    .chakra-input {
        height: 40px;
        padding: 12px;
        flex: 1;
        width: 100%;
        border: 1px solid #e2e8f0;
        border-radius: 5px;
        font-size: 14px;
        font-family: inherit;
        background: white;
        transition: all 0.2s;
    }

    .chakra-select {
        height: 40px;
        padding: 10px;
        flex: 1;
        width: 100%;
        border: 1px solid #e2e8f0;
        border-radius: 5px;
        font-size: 14px;
        font-family: inherit;
        background: white;
        transition: all 0.2s;
    }

    .chakra-input:read-only {
        background-color: #f8f9fa;
    }
    
    .chakra-input:focus {
        outline: none;
        border-color: #3182ce;
        box-shadow: 0 0 0 1px #3182ce;
        padding-block: unset;
    }
    
    .chakra-input:focus:read-only {
        
        border: 1px solid #e2e8f0;
        box-shadow: none;
    }
        
    .chakra-input::placeholder {
        color: #888;
        opacity: 1;
    }

    .required {
        position: relative;
    }

    .required::before {
        content: '*';
        font-size: 18px;
        line-height: 18px;
        position: absolute;
        color: red;
        left: -20px;
        bottom: 20%;
    }

    .required.required-ten::before {
        bottom: 10%;
    }

    .auth-button {
        width: 100%;
        height: 38.8px;
        background: #3182ce;
        color: white;
        border: none;
        border-radius: 24px;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.2s;
    }

    .auth-button:hover {
        background: #2c5282;
    }

    .auth-button:active {
        background: #2b6cb0;
    }

    .auth-input::placeholder {
        color: #888;
        opacity: 1;
        font-weight: 500;
    }

    .chakra-btn {
        display: flex;
        height: 40px;  
        color: white;
        background-color: #3182ce;
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        vertical-align: middle;
        align-items: center;
        padding:0 16px;
        border-radius: 5px;
        cursor: pointer;
        font-family: inherit;
        transition: background 0.2s;
        border: none;
        text-decoration: none;
        transition: color linear 0.3s, border-color linear 0.3s, background-color linear 0.3s, box-shadow linear 0.3s
    }

    .chakra-btn.secondary {
        background-color: white;
        color: #4A5568;
        border: 2px solid #718096;
        border-width: 1px;
    }
    
    .chakra-btn.secondary:hover {
        text-decoration: none;  
        color: white;
        background-color: #718096;
    }
    
    .chakra-btn.secondary:active {
        text-decoration: none;  
        color: white;
        background-color: #718096;
    }

    .chakra-btn:active {
        text-decoration: none;  
        color: white;
        background-color: #2b6cb0;
    }
    
    .chakra-btn:hover {
        text-decoration: none;
        color: white;
        background-color: #2B6CB0;
    }
    

    .btn-close {

        z-index: 5;
        position: absolute;
        right: 0;
        top: 0;
    }

    th {
        font-weight: 400;
        font-size: 16px;
    }

    .form-group-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 16px;
        position: relative;
    }

    .form-group-row label {
        width: 230px;
        margin-right: 16px;
        margin-bottom: 0;
        font-size: 18px;
        font-weight: 400;
    }

    .form-group-col label {
        font-size: 18px;
        font-weight: 400;
    }

    .icon-copy {
        position: absolute;
        right: 12px;
        bottom: 20%;
        background-color: transparent;
        border: none;
        transition: opacity 0.3s ease-in-out;
    }

    @keyframes copySuccess {
        0% { opacity: 1.0; }
        10% { opacity: 0.2; }
        90% { opacity: 0.2; }
        100% { opacity: 1.0; }
    }

    .copy-success {
        animation: copySuccess 1s ease-in-out;
    }


    .icon-refresh {
        position: absolute;
        right: -36px;
        bottom: 20%;
        background-color: transparent;
        border: none;
    }

    .text-danger {
        position: absolute;
        font-size: 12px;
        bottom: -40%;
        right: 0;
    }

    .text-danger.captcha {
        bottom: unset;
        right: unset;
    }

    .clear-filter {
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.4em;
        font-weight: bold;
        color: #6c757d;
        cursor: pointer;
        display: none;
        z-index: 10;
        pointer-events: auto;
        line-height: 1;
    }

    .clear-filter:hover {
        color: #333;
    }

    .chakra-input {
        height: 40px;
        padding: 12px;
        flex: 1;
        width: 100%;
        border: 1px solid #e2e8f0;
        border-radius: 5px;
        font-size: 14px;
        font-family: inherit;
        background: white;
        transition: all 0.2s;
    }


    .clear-filter {
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.4em;
        color: #6c757d;
        cursor: pointer;
        display: none;
        z-index: 10;
        pointer-events: auto;
    }

    .table-admin {
        table-layout: fixed !important;
        width: 100% !important;
        border-collapse: collapse;
    }

  

    .table-admin th.col-login     { width: 120px !important; min-width: 120px !important; }
    .table-admin th.col-name      { width: 200px !important; min-width: 200px !important; }
    .table-admin th.col-email     { width: 200px !important; min-width: 200px !important; }
    .table-admin th.col-phone     { width: 125px !important; min-width: 125px !important; }
    .table-admin th.col-org       { width: 180px !important; min-width: 180px !important; }
    .table-admin th.col-date      { width: 170px !important; min-width: 170px !important; }
    .table-admin th.col-enabled   { width: 100px !important; min-width: 100px !important; text-align: center; }
    .table-admin th.col-devices   { width: 130px !important; min-width: 130px !important;}
    .table-admin th.col-actions   { width: 34px !important; min-width: 34px !important; }

    .table-admin .filter-input {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.875rem;
        padding: 0.375rem 0.5rem !important;
        margin: 0 !important;
        border: 1px solid #ced4da !important;
        border-radius: 0.25rem !important;
    }

    .table-admin th > div.d-flex {
        
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    .table-admin td:hover::after {
        content: attr(data-fulltext);
        position: absolute;
        left: 0;
        top: calc(100% + 6px);
        background: #333;
        color: #fff;
        border-radius: 6px;
        font-size: 0.875rem;
        white-space: nowrap;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease;
    }
    .table-admin td:hover[data-fulltext][style*="overflow"]::after,
    .table-admin td:hover:has(> span[style*="overflow"])::after {
        opacity: 1;
    }


    .table-admin td[data-fulltext]:hover::before {
        content: "";
        position: absolute;
        left: 20px;
        top: 100%;
        border: 6px solid transparent;
        border-bottom-color: #333;
        z-index: 1000;
    }

    .table-admin td[title] {
        cursor: initial;
    }


    .table-admin th,
    .table-admin td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box !important;
        position: relative;
        vertical-align: middle;
    
    }

    .table-admin tbody td {
        height: 36px !important;
        line-height: 27px;
        font-size: 16px;
    }


    @supports (selector(::-webkit-scrollbar)) {
        td[title]:hover {
            position: relative;
        }
    }


    table .display tbody td {
        padding: 4px 8px;
        height: 36px;
        line-height: 27px;
        font-size: 16px;
    }

    table thead tr th {
        font-weight: 500;
    }

    table.display th.col-status,
    table.display td.col-status { 
        max-width: 95px;
        width: 95px; 
    }

    table.display th.col-type,
    table.display td.col-type { 
        width: 160px; 
        min-width: 160px;
    }

    table.display th.col-imei,
    table.display td.col-imei { 
        width: 150px; 
        min-width: 150px;
    }

    table.display th.col-interface,
    table.display td.col-interface { 
        width: 130px; 
        min-width: 130px;
    }

    table.display th.col-slot,
    table.display td.col-slot { 
        width: 120px; 
        min-width: 120px;
    }

    table.display th.col-channel,
    table.display td.col-channel { 
        width: 170px; 
        min-width: 170px;
    }

    table.display th.col-port,
    table.display td.col-port { 
        width: 130px; 
        min-width: 130px;
    }

    table.display th.col-actions,
    table.display td.col-actions { 
        width: 25px; 
        min-width: 25px;
    }

    table.display th.col-name,
    table.display td.col-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width:130px;
    }

    .devices-content {
        overflow: hidden;
        height: 0;
        opacity: 0;
        transform: translateY(-8px);
        transition: 
            height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.25s ease,
            transform 0.3s ease;
        will-change: height, opacity, transform;
    }

    .devices-content.show {
        height: auto !important;
        opacity: 1;
        transform: translateY(0);
        transition: 
            height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.25s ease,
            transform 0.3s ease;
    }

    .table-content.show {
        padding: 0;
        height: auto;
    }
    .table-content {
        height: 0;
    }

    .btn-collapse {
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        background: transparent;
        border: none;
        padding: 0.25rem;
    }


    .btn-collapse[aria-expanded="false"] .bi-chevron-right {
        transform: rotate(270deg);
    }

    @supports not (transform: scaleY(1)) {
        .devices-content {
            max-height: 0;
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        }
        
        .devices-content.show {
            max-height: 2000px;
            opacity: 1;
        }
    }

    .group-header {
        vertical-align: middle;
        height: 36px;
        line-height: 27px;
        border: none;
    }

    .no-arrows {
        -moz-appearance: textfield;  /* Firefox */
    }

    .no-arrows::-webkit-outer-spin-button,
    .no-arrows::-webkit-inner-spin-button {
        -webkit-appearance: none;    /* Chrome/Safari/Edge */
        margin: 0;
    }