@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Cairo:wght@400;600;700;800;900&display=swap');

:root {
    --brand-1: #18c4f5;
    --brand-2: #0d5ac9;
    --brand-3: #083eaa;
    --brand-4: #47d4ff;
    --brand-5: #f5fbff;
    --brand-6: #083a8c;
    --warning: #f2600e;

    --dark-master-r: 13;
    --dark-master-g: 90;
    --dark-master-b: 201;
    --dark-master: var(--brand-2);
    --light-master: var(--brand-6);
    --dark-card-master: var(--brand-3);
    --light-card-master: #242424;
    --light-background: var(--brand-5);
    --light-background-glass: #ffffff;

    --primary: var(--brand-1);
    --primary-dark: var(--brand-2);
    --primary-deep: var(--brand-3);
    --text: var(--brand-6);
    --muted: color-mix(in srgb, var(--brand-6) 55%, var(--brand-2) 45%);
    --line: color-mix(in srgb, var(--brand-2) 12%, transparent);
    --surface: rgba(255, 255, 255, 0.96);
    --surface-2: color-mix(in srgb, var(--brand-5) 4%, white 96%);
    --surface-input: color-mix(in srgb, white 92%, var(--brand-5) 8%);
    --alert-bg: color-mix(in srgb, var(--brand-5) 82%, var(--brand-2) 18%);
    --alert-text: color-mix(in srgb, var(--brand-3) 75%, var(--brand-2) 25%);
    --shadow-sm: 0 10px 24px color-mix(in srgb, var(--brand-2) 10%, transparent);
    --shadow-lg: 0 35px 90px rgba(0, 0, 0, 0.24);
    --shadow-primary: 0 14px 34px color-mix(in srgb, var(--brand-2) 20%, transparent);
    --glass-surface: rgba(255, 255, 255, 0.72);
    --glass-surface-strong: rgba(255, 255, 255, 0.84);
    --glass-border: color-mix(in srgb, var(--brand-2) 10%, transparent);
    --radius-md: 22px;
    --radius-lg: 30px;
    --transition: .28s ease;
}

/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=J7adnpV-BGlaFfdAhLQo6btPMDoTpA&skey=36a3d5758e0e2f58&v=v15) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=J7aYnpV-BGlaFfdAhLQgUp5aHRgejiMIKQ&skey=8b00183e5f6700b6&v=v15) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=J7afnpV-BGlaFfdAhLEY67FIEjg&skey=a1029226f80653a8&v=v15) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=J7aanpV-BGlaFfdAjAo9_pxqHxIZrCE&skey=cd2dd6afe6bf0eb2&v=v15) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'icomoon';
  src:  url('icomoon.eot?mauo4t');
  src:  url('icomoon.eot?mauo4t#iefix') format('embedded-opentype'),
    url('icomoon.ttf?mauo4t') format('truetype'),
    url('icomoon.woff?mauo4t') format('woff'),
    url('icomoon.svg?mauo4t#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  font-size: 2rem;
}

.icon-price-tag_567600:before {
  content: "\e900";
}
.icon-choice_9406246:before {
  content: "\e901";
}
.icon-documents_3207514:before {
  content: "\e902";
}
.icon-file_2274794:before {
  content: "\e903";
}
.icon-forex_7969693:before {
  content: "\e904";
}

* {
    font-family: "Calibri" !important;
    border-radius: unset !important;
}

.main > .container-fluid {
    padding-left: 0;
}

.navbar-top {
    border-bottom: 1px solid #eaeaea;
    padding: 0 !important;
}

.content .navbar-light .navbar-nav .nav-link {
    padding-right: 0.5rem !important;
    border-left: 1px solid #eaeaea;
}

.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-card + .content .navbar-top,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-vibrant + .content .navbar-top,
.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-inverted + .content .navbar-top {
    padding-left: 12.125rem !important;
}

.btn-secondary {
    background-color: var(--dark-master);
    border-color: var(--dark-master);
}

.page-item.active .page-link {
    background-color: var(--dark-master);
    border-color: var(--dark-master);
}

.dataTables_paginate .page-link {
    line-height: 1 !important;
    padding: 0.3rem 0.8rem;
}

.navbar-vertical > div:first-child{
    background: var(--glass-surface-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    height: 3.42rem;
    z-index: 1000;
    position: relative;
}

body {
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand-4) 10%, transparent), transparent 18%),
        radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--brand-2) 8%, transparent), transparent 16%),
        linear-gradient(180deg, var(--light-background), #ffffff);
    color: var(--text);
}

.dashboard-cards li {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 251, 255, 0.92));
    box-shadow: var(--shadow-sm);
    border: none;
    border-radius: var(--radius-md) !important;
}

.dashboard-cards li h1 {
    font-family: "Cairo" !important;
    font-weight: normal;
    font-size: 4rem;
}

.navbar-vertical.navbar-vibrant {
    background: transparent !important;
}

.navbar-vertical.navbar-vibrant .navbar-collapse {
    border-right: 1px solid var(--glass-border);
    background: var(--glass-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link {
  color: var(--light-master);
}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link.dropdown-indicator:after {
  border-color: var(--light-master);
}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link:hover, .navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link:focus {
  color: var(--light-master);
}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link:hover.dropdown-indicator:after, .navbar-vertical.navbar-vibrant .navbar-nav .nav-item .nav-link:focus.dropdown-indicator:after {
  border-color: var(--light-master);
}

.navbar-vertical.navbar-vibrant .navbar-nav .nav-item.active .nav-link {
  color: var(--light-master);
}

.navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content, .navbar-vertical.navbar-expand-xl.navbar-vibrant .navbar-vertical-content, .navbar-vertical.navbar-expand-xl.navbar-inverted .navbar-vertical-content {
    height: calc(100vh - 3.12rem);
    background: transparent;
}

.navbar-glass-shadow {
    box-shadow: 0 0.5rem 0.5rem -0.5rem transparent !important;
}

.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl {
    width: 3.4rem;
}

ol.breadcrumb {
    padding-top: 0.75rem !important;
}

.dataTables_wrapper > div:first-child button, .products_paginate {
    font-size: 80% !important;
}

.dataTables_filter label input {
    font-size: 0.8rem;
    position: relative;
    top: 1px;
}

.dataTables_filter {
    position: relative;
    top: -1px;
}

.card:not(.login-card, .dashboard-toolbar-card) {
    border-radius: var(--radius-md) !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
}

.card:not(.login-card) .card-header {
    border-bottom: 1px solid color-mix(in srgb, var(--brand-2) 8%, transparent);
    background: transparent;
}

.table th {
    border-bottom: 1px solid #eaeded !important;
    border-top: 1px solid #eaeded;
}

.table td {
    border-bottom: 1px solid #eaeded;
    background-color: transparent;
}

.dataTables_wrapper > .row:last-child {
    margin-top: 15px;
}

.page-link:hover {
    background-color: rgb(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b),0.8);
    border-color: rgb(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b),0.9);
}

button.btn.btn-secondary:hover {
    background-color: rgb(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b),0.8);
    border-color: rgb(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b),0.9);
}

.dropdown-item.active {
    background-color: rgb(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b),0.1);
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
    background-color: rgb(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b),0.6);
    border-color: rgb(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b),0.7);
}

a {
    color: var(--primary-dark);
}

a:hover {
    color: var(--primary-deep);
}

.add-filters-popup * {
    font-size: 0.9rem !important;
}

body > .select2-container * {
    font-size: 0.8rem !important;
}

.add-filters-popup * {
    font-size: 0.9rem !important;
}

body > .select2-container * {
    font-size: 0.8rem !important;
}

.nav-item-circle {
    font-size: 1.6rem;
}

.theme-wizard .nav-link .nav-item-circle {
    background-color: #f9fafd !important;
    border: none !important;
}

.theme-wizard .nav-link.done .nav-item-circle {
    /* background-color: #f9fafd !important;
    color: #00d27a !important;
    border-color: transparent;*/
    color: #00d27a;
    background-color: #f9fafd !important;
    border: none !important; /*2px solid #00d27a;*/
}

.theme-wizard .nav-link.active .nav-item-circle {
    color: var(--dark-master);
    background-color: #f9fafd !important;
    border: none !important; /*border-color: var(--dark-master);*/
}

.parent-override input:not(:checked) ~ .virtual-checked:before {
    content: "";
    position: absolute;
    width: 85%;
    height: 85%;
    background-color: silver;
    border-radius: 2px !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.dataTables_filter label {
    margin-top: 0.5rem ;
}

.dataTables_length label {
    margin-top: 0.5rem;
}

.dataTables_length ~ .btn-group {
    margin-top: 0.5rem;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.btn-primary:not(:disabled):not(.disabled):active, .navbar-vertical:not(.navbar-vibrant) .btn-purchase:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .navbar-vertical:not(.navbar-vibrant) .btn-purchase:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .navbar-vertical:not(.navbar-vibrant) .show > .dropdown-toggle.btn-purchase {
    background-color: rgb(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b),0.8);
    border-color: rgb(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b),0.9);
    color: #fff;
}

.btn-primary:focus, .navbar-vertical:not(.navbar-vibrant) .btn-purchase:focus, .btn-primary.focus, .navbar-vertical:not(.navbar-vibrant) .focus.btn-purchase {
    border-color: rgb(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b),0.9);
}

.selection-count {
    margin-left: 5px;
}

.row-selection {
    width: 20px !important;
}

.options {
    width: 100px !important;
}

.active a.nav-link.inner-load {
    font-weight: bold;
}

.btn.btn-primary, .navbar-vertical:not(.navbar-vibrant) .btn-purchase {
    background-image: linear-gradient(135deg, var(--brand-1) 0%, color-mix(in srgb, var(--brand-1) 55%, var(--brand-2) 45%) 52%, var(--brand-3) 100%) !important;
    color: #fff !important;
    border-color: color-mix(in srgb, var(--brand-2) 24%, transparent) !important;
    box-shadow: var(--shadow-sm);
}

.btn.btn-primary:hover, .navbar-vertical:not(.navbar-vibrant) .btn-purchase:hover {
    color: #fff !important;
    border-color: var(--brand-3) !important;
    box-shadow: var(--shadow-primary);
}

.btn.btn-primary:active, .navbar-vertical:not(.navbar-vibrant) .btn-purchase:active {
    color: #fff !important;
    border-color: var(--brand-3) !important;
}

.btn.btn-secondary, .btn.btn-falcon-default {
    background-image: linear-gradient(180deg, #ffffff, var(--light-background)) !important;
    color: var(--text);
    border-color: color-mix(in srgb, var(--brand-2) 18%, #d5dbdb) !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.08);
}

.btn.btn-secondary:hover, .btn.btn-falcon-default:hover {
    border-color: var(--brand-2) !important;
    color: var(--primary-deep) !important;
}

.btn.btn-secondary:active, .btn.btn-falcon-default:active {
    color: var(--primary-deep) !important;
    border-color: var(--brand-3) !important;
}

.dataTables_paginate {
    font-size: 0.8rem;
}

table tbody tr.selected td {
    background-color: rgba(var(--dark-master-r), var(--dark-master-g), var(--dark-master-b), 0.05) !important;
    
    border-bottom: 1px solid var(--dark-master) !important;
}

table tbody tr.selected td:first-child {
    border-left: 1px solid var(--dark-master) !important;
}

table tbody tr.selected td:last-child {
    border-right: 1px solid var(--dark-master) !important;
}

table tbody tr.selected td:last-child {
    border-right: 1px solid var(--dark-master) !important;
}

table tbody tr:first-child td {
    border-top: 1px solid #eaeded !important;
}

table tbody tr.selected:first-child td {
    border-top: 1px solid var(--dark-master) !important;
}

table tbody tr:not(.selected) + tr.selected td {
    border-top: 1px solid var(--dark-master) !important;
}

table td:first-child, table th:first-child {
    border-left: 1px solid transparent;
}

table td:last-child, table th:last-child {
    border-right: 1px solid transparent;
}

/* ------------------------------------------------------------------ */
/* Login page — hotspot-style (scoped to body.login)                  */
/* ------------------------------------------------------------------ */

body.login {
    --bg-dark-1: var(--brand-5);
    --bg-dark-2: color-mix(in srgb, var(--brand-5) 70%, var(--brand-1) 30%);
    --bg-dark-3: color-mix(in srgb, var(--brand-5) 45%, var(--brand-1) 55%);
    --accent: var(--brand-4);
    --accent-2: color-mix(in srgb, var(--brand-4) 65%, var(--brand-1) 35%);
    --placeholder: color-mix(in srgb, var(--brand-6) 45%, var(--brand-2) 55%);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 14px 30px;
    position: relative;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand-4) 18%, transparent), transparent 18%),
        radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 16%),
        radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--brand-1) 10%, transparent), transparent 20%),
        linear-gradient(135deg, var(--bg-dark-1) 0%, var(--bg-dark-2) 50%, var(--bg-dark-3) 100%) !important;
    overflow-x: hidden;
}

body.login::before,
body.login::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    filter: blur(16px);
    animation: loginFloatOrb 8s ease-in-out infinite;
}

body.login::before {
    width: 240px;
    height: 240px;
    top: 40px;
    left: -70px;
    background: color-mix(in srgb, var(--brand-1) 14%, transparent);
}

body.login::after {
    width: 300px;
    height: 300px;
    bottom: 0;
    right: -100px;
    background: color-mix(in srgb, var(--brand-2) 15%, transparent);
    animation-delay: 1.4s;
}

@keyframes loginFloatOrb {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-12px) translateX(8px);
    }
}

body.login,
body.login * {
    font-family: 'Tajawal', 'Cairo', 'Segoe UI', sans-serif !important;
}

body.login .main,
body.login .container-fluid,
body.login .login-page-shell {
    position: relative;
    z-index: 1;
    width: 100%;
}

body.login .login-page-shell {
    min-height: auto !important;
    background: transparent !important;
}

body.login .login-hero-panel {
    display: none !important;
}

body.login .login-page-column {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 auto;
}

body.login .brand-box {
    position: relative;
    text-align: center;
    margin: 0 auto 22px;
    max-width: 470px;
    animation: loginFadeSlideDown .8s ease;
}

@keyframes loginFadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.login .brand-box img {
    display: inline-block;
    height: 6rem;
    width: auto;
    padding: 0;
    border-radius: 18px !important;
    background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
    box-shadow:
        0 14px 20px color-mix(in srgb, var(--brand-1) 18%, transparent),
        0 10px 18px rgba(0, 0, 0, 0.08);
}

body.login .login-card,
body.login .login-card.content {
    position: relative;
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
    padding: 24px 20px 20px;
    border-radius: 36px !important;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: loginCardReveal .75s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.login .login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent-2), var(--primary-dark));
}

@keyframes loginCardReveal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.login .login-card .card-header {
    display: none;
}

body.login .login-card .card-body {
    padding: 0 !important;
}

body.login .form-title {
    margin: 0 0 18px;
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-deep);
}

body.login .form-group label {
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 700;
}

body.login .form-control,
body.login .otp-digit {
    border-radius: 20px !important;
    min-height: 52px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff, var(--surface-input));
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

body.login .form-control:focus,
body.login .otp-digit:focus {
    border-color: color-mix(in srgb, var(--brand-2) 34%, transparent);
    background: #ffffff;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--brand-4) 20%, transparent),
        var(--shadow-sm);
    transform: translateY(-1px);
}

body.login .form-control::placeholder {
    color: var(--placeholder);
}

body.login .btn-primary {
    width: 100%;
    min-height: 52px;
    border-radius: 20px !important;
    border: 1px solid transparent !important;
    font-size: 16px;
    font-weight: 800;
    background-image: linear-gradient(135deg, var(--brand-1) 0%, color-mix(in srgb, var(--brand-1) 55%, var(--brand-2) 45%) 52%, var(--brand-3) 100%) !important;
    color: #fff !important;
    box-shadow: var(--shadow-primary);
    transition: transform var(--transition), box-shadow var(--transition);
}

body.login .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--brand-2) 24%, transparent);
    color: #fff !important;
    border-color: transparent !important;
}

body.login .btn-primary:active {
    transform: translateY(0);
    color: #fff !important;
}

body.login #login-error {
    display: none;
    border: 1px solid color-mix(in srgb, var(--brand-2) 16%, transparent);
    background: var(--alert-bg);
    color: var(--alert-text);
    border-radius: 18px !important;
    padding: 12px 14px;
    margin-bottom: 14px;
    line-height: 1.6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

body.login #login-error:not(:empty) {
    display: block;
}

body.login .language-selection {
    position: fixed;
    right: 20px;
    top: 20px;
    font-size: 28px;
    z-index: 1100;
    cursor: pointer;
    color: var(--primary-dark);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid color-mix(in srgb, var(--brand-2) 14%, transparent);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform var(--transition), box-shadow var(--transition);
}

body.login .language-selection:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
    color: var(--primary-deep);
}

body.login .language-selector {
    position: fixed;
    right: 20px;
    top: 76px;
    min-width: 150px;
    z-index: 1100;
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand-2) 12%, transparent);
    box-shadow: var(--shadow-lg);
}

body.login .language-selector .list-group-item {
    border-color: var(--line);
    color: var(--text);
    font-weight: 600;
}

body.login .language-selector .list-group-item:hover {
    background: color-mix(in srgb, var(--brand-5) 60%, white 40%);
    color: var(--primary-deep);
}

body.login #resend-otp-link {
    color: var(--primary-dark);
    font-weight: 600;
}

body.login #resend-otp-link:not(.disabled):hover {
    color: var(--primary-deep);
}

.rtl-all {
    direction: rtl;
    text-align: right !important;
}   

.rtl-all * {
    direction: rtl;
}

.btn-warning {
    background-color: #f7c454 !important;
    color: black !important;
}

.language-selection {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 35px;
    z-index: 1000;
    cursor: pointer;
}

.language-selector {
    position: absolute;
    right: 20px;
    top: 60px;
    min-width: 150px;
    z-index: 1000;
    display: none;
}

.full-padless-modal .modal-body {
    padding: 0 !important;
}

.eta-content {
    width: auto;
    position: relative;
    background: linear-gradient(324.2deg, #91C8F6 -1.33%, rgba(239, 244, 249, 0) 105.53%), #FFFFFF;
    padding: 15px;
}

.eta-content .img-logo {
    width: 100px;
    height: 100px;
    display: block;
    margin: 15px  auto 32px auto;
}

.eta-content .panel-default {
    border-color: #ddd;
}

.eta-content .panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.eta-content .panel {
    border-radius: 0;
    -webkit-box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.25);
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.25);
    position: relative;
    padding: 10px;
    width: 380px;
    display: block;
    margin: 0 auto;
}

.eta-content legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

.eta-content .submit-btn {
    display: flex;
    justify-content: flex-end;
}

.eta-content .logIn {
    background: linear-gradient(360deg, #427cac -77.5%, rgba(66, 124, 172, 0) 388.75%);
    border-radius: 2px;
    width: 140px;
    height: 40px;
    color: #ffffff;
    border: none;
}

.eta-content table tbody tr:first-child td {
    border-top: 1px solid var(--light-background) !important;
}

.telegram-chat-association-modal .telegram-verification-code {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    line-height: 1.2;
    margin: 1.5rem auto;
}

.telegram-chat-association-modal .telegram-bot-link {
    word-break: break-all;
}

.network-manager-dashboard .dashboard-toolbar-card,
.network-manager-dashboard .dashboard-widget-card {
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.network-manager-dashboard .dashboard-toolbar-controls {
    gap: 0.5rem;
    flex-wrap: wrap;
}

.network-manager-dashboard .dashboard-kpi-refresh-group {
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: 0.5rem;
    margin-inline-start: 0;
}

@media (min-width: 576px) {
    .network-manager-dashboard .dashboard-kpi-refresh-group {
        margin-top: 0;
        margin-inline-start: 0.5rem;
    }
}

.network-manager-dashboard .dashboard-kpi-refresh-group .btn {
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.2rem 0.45rem;
}

.network-manager-dashboard .dashboard-kpi-auto-refresh-toggle::after {
    margin-left: 0.35rem;
    vertical-align: 0.1em;
}

.network-manager-dashboard .dashboard-kpi-auto-refresh-label {
    font-size: 0.75rem;
    font-weight: 600;
}

.network-manager-dashboard .dashboard-kpi-auto-refresh-toggle.is-auto-refresh-active {
    color: var(--primary, #0d6efd);
    border-color: var(--primary, #0d6efd);
}

.network-manager-dashboard .dashboard-kpi-auto-refresh-menu {
    font-size: 0.75rem;
    min-width: 9rem;
}

.network-manager-dashboard .dashboard-kpi-auto-refresh-menu .dropdown-item {
    padding: 0.25rem 0.65rem;
}

.network-manager-dashboard .dashboard-kpi-auto-refresh-option.active {
    font-weight: 600;
    background-color: var(--surface-2, #f8f9fa);
}

.network-manager-dashboard .dashboard-widget-section-title {
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.network-manager-dashboard .dashboard-kpi-card {
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.network-manager-dashboard .dashboard-kpi-label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.network-manager-dashboard .dashboard-kpi-value {
    color: var(--primary-deep);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.network-manager-dashboard .dashboard-kpi-hint {
    color: var(--muted);
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
}

.network-manager-dashboard .dashboard-kpi-card--period {
    border-inline-start: 3px solid var(--primary);
}

.network-manager-dashboard .dashboard-kpi-card--snapshot {
    border-inline-start: 3px solid #6c757d;
}

.network-manager-dashboard .dashboard-kpi-card--sms {
    border-inline-start: 3px solid #17a2b8;
}

.network-manager-dashboard #dashboard-jawwal-balance-column {
    position: relative;
    min-height: 7.75rem;
}

.network-manager-dashboard #dashboard-jawwal-balance-card {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-inline-start: 3px solid #20c997;
}

.network-manager-dashboard .dashboard-jawwal-balance-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 0.75rem;
}

.network-manager-dashboard .dashboard-jawwal-balance-head {
    flex: 0 0 auto;
}

.network-manager-dashboard #dashboard-jawwal-balance-username-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.network-manager-dashboard #dashboard-jawwal-balance-select {
    height: 1.5rem;
    margin-top: 0.25rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.75rem;
}

.network-manager-dashboard .dashboard-jawwal-balance-accounts {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0.25rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.network-manager-dashboard .dashboard-jawwal-balance-row + .dashboard-jawwal-balance-row {
    margin-top: 0.35rem;
}

.network-manager-dashboard .dashboard-jawwal-balance-row .dashboard-kpi-value {
    font-size: 1.15rem;
    line-height: 1.15;
}

.network-manager-dashboard .dashboard-jawwal-balance-foot {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.network-manager-dashboard .dashboard-jawwal-balance-foot .btn {
    flex: 0 0 auto;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: nowrap;
}

.network-manager-dashboard #dashboard-jawwal-balance-message {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-manager-dashboard .dashboard-kpi-card--sms.is-free-account {
    border-inline-start-color: #6c757d;
}

.network-manager-dashboard .dashboard-kpi-card--sms.is-paid-account {
    border-inline-start-color: #17a2b8;
}

.network-manager-dashboard .dashboard-kpi-card--sms.is-error,
.network-manager-dashboard .dashboard-kpi-card--sms.is-placeholder {
    border-inline-start-color: #adb5bd;
}

.network-manager-dashboard .dashboard-sms-sender {
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.network-manager-dashboard .dashboard-sms-account-type {
    min-height: 1rem;
}

.network-manager-dashboard .dashboard-sms-status-loading,
.network-manager-dashboard .dashboard-sms-status-placeholder,
.network-manager-dashboard .dashboard-sms-status-error {
    font-size: 1rem;
    font-weight: 600;
}

.network-manager-dashboard .dashboard-sms-status-error {
    color: #856404;
}

.network-manager-dashboard .dashboard-category-cards-section {
    margin-top: 0.25rem;
}

.network-manager-dashboard .dashboard-category-cards-row {
    margin-bottom: 0;
}

.network-manager-dashboard .dashboard-category-card {
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border-inline-start: 3px solid var(--primary);
}

.network-manager-dashboard .dashboard-category-card--warning {
    border-inline-start-width: 5px;
    border-inline-start-color: #996f00;
    border-color: rgba(153, 111, 0, 0.45);
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.22) 0%, rgba(255, 193, 7, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(153, 111, 0, 0.12);
}

.network-manager-dashboard .dashboard-category-card--warning .dashboard-category-card-metric:first-child .dashboard-category-card-metric-value {
    color: #996f00;
}

.network-manager-dashboard .dashboard-category-card--critical {
    border-inline-start-width: 5px;
    border-inline-start-color: #c0392b;
    border-color: rgba(192, 57, 43, 0.45);
    background: linear-gradient(180deg, rgba(192, 57, 43, 0.22) 0%, rgba(192, 57, 43, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.12);
}

.network-manager-dashboard .dashboard-category-card--critical .dashboard-category-card-metric:first-child .dashboard-category-card-metric-value {
    color: #c0392b;
}

.network-manager-dashboard .dashboard-category-card .card-body {
    padding: 0.65rem 0.85rem;
}

.network-manager-dashboard .dashboard-category-card-client {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-manager-dashboard .dashboard-category-card-title {
    color: var(--primary-deep);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.network-manager-dashboard .dashboard-category-card-title-row {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.network-manager-dashboard .dashboard-category-card-title-row .dashboard-category-card-title {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
}

.network-manager-dashboard .dashboard-category-card-actions {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.4rem;
}

.network-manager-dashboard .dashboard-category-card-actions .fa-eye,
.network-manager-dashboard .dashboard-category-card-actions .fa-eye-slash {
    font-size: 0.85rem;
}

.network-manager-dashboard .dashboard-category-card-edit {
    color: var(--muted);
    line-height: 1;
}

.network-manager-dashboard .dashboard-category-card-edit:hover,
.network-manager-dashboard .dashboard-category-card-edit:focus {
    color: var(--primary-deep);
    text-decoration: none;
}

.network-manager-dashboard .dashboard-category-card-metrics {
    display: flex;
    gap: 0.75rem;
}

.network-manager-dashboard .dashboard-category-card-metric {
    flex: 1;
    min-width: 0;
}

.network-manager-dashboard .dashboard-category-card-metric-label {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.network-manager-dashboard .dashboard-category-card-metric-value {
    color: var(--primary-deep);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin-bottom: 0;
}

.network-manager-dashboard .dashboard-category-cards-empty {
    font-size: 0.9rem;
}

.network-manager-dashboard .dashboard-chart-widget .dataTables_filter,
.network-manager-dashboard .dashboard-chart-widget .dt-buttons,
.network-manager-dashboard .dashboard-chart-widget .filters-section,
.network-manager-dashboard .dashboard-chart-widget .table-row {
    display: none !important;
}

.network-manager-dashboard .dashboard-chart-widget.is-table-view .dataTables_filter,
.network-manager-dashboard .dashboard-chart-widget.is-table-view .dt-buttons,
.network-manager-dashboard .dashboard-chart-widget.is-table-view .filters-section,
.network-manager-dashboard .dashboard-chart-widget.is-table-view .table-row {
    display: block !important;
}

.network-manager-dashboard .dashboard-chart-widget.is-table-view .charts-section {
    display: none !important;
}

.network-manager-dashboard .dashboard-table-widget .filters-list {
    gap: 6px;
}

.network-manager-dashboard .dashboard-table-widget .filters-list .table-filter {
    flex-wrap: wrap;
}

.network-manager-dashboard .dashboard-table-widget .dt-buttons .show-graphs,
.network-manager-dashboard .dashboard-table-widget .dt-buttons .show-table {
    display: none !important;
}

.network-manager-dashboard .dashboard-chart-widget .charts-section {
    display: block !important;
}

.network-manager-dashboard .dashboard-chart-widget .charts-section .col {
    min-height: 420px;
}

.network-manager-dashboard .dashboard-chart-widget .charts-section [id$="Hotspot"],
.network-manager-dashboard .dashboard-chart-widget .charts-section [id$="Status"],
.network-manager-dashboard .dashboard-chart-widget .charts-section [id$="Time"],
.network-manager-dashboard .dashboard-chart-widget .charts-section [id$="Inventory"],
.network-manager-dashboard .dashboard-chart-widget .charts-section [id$="usageByHotspot"],
.network-manager-dashboard .dashboard-chart-widget .charts-section [id$="salesByCategory"] {
    min-height: 400px;
}

.network-manager-dashboard .dashboard-table-widget .table-overflow {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.organization-switcher-item {
    margin-inline-end: 0.75rem;
}

.organization-switcher-select {
    min-width: 10rem;
    max-width: 16rem;
    border-color: var(--line, rgba(13, 90, 201, 0.12));
    background-color: var(--surface-input, #fff);
    color: var(--text, #083a8c);
}

.copy-saved-indicator {
    position: fixed;
    inset-inline-end: 14px;
    bottom: 14px;
    z-index: 1060;
    pointer-events: none;
    opacity: 0;
    font-size: 28px;
    color: var(--success, #198754);
    line-height: 1;
}

.copy-saved-indicator.is-active {
    animation: copySavedFlash 1.2s ease forwards;
}

@keyframes copySavedFlash {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    15% {
        opacity: 1;
        transform: scale(1.1);
    }
    30% {
        opacity: 0.55;
        transform: scale(0.95);
    }
    45% {
        opacity: 1;
        transform: scale(1.08);
    }
    60% {
        opacity: 0.6;
        transform: scale(0.98);
    }
    75% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* ===== Mobile responsive ===== */

@media (max-width: 1199.98px) {
    html,
    body,
    .main,
    .content {
        max-width: 100%;
        overflow-x: hidden;
    }

    .navbar-vertical.navbar-expand-xl {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        z-index: 1031 !important;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-card + .content .navbar-top,
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-vibrant + .content .navbar-top,
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.navbar-inverted + .content .navbar-top {
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }

    .navbar-vertical.navbar-expand-xl + .content .navbar-top {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: nowrap;
        align-items: center;
        min-height: 3.5rem;
        padding-inline: 0.5rem !important;
    }

    .navbar-vertical.navbar-expand-xl + .content .navbar-top .navbar-toggler {
        display: flex !important;
        flex-shrink: 0;
        visibility: visible;
        opacity: 1;
    }

    .navbar-vertical.navbar-expand-xl + .content .navbar-top .navbar-brand {
        display: flex !important;
        flex-shrink: 1;
        min-width: 0;
    }

    .navbar-vertical.navbar-expand-xl .navbar-collapse.show {
        display: block !important;
        position: fixed;
        inset-inline: 0;
        top: 4.3125rem;
        bottom: 0;
        z-index: 1030;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--glass-surface, rgba(255, 255, 255, 0.98));
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .navbar-vertical.navbar-expand-xl .navbar-collapse.show .navbar-vertical-content {
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        padding-bottom: 1rem;
    }

    html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-collapse.show {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-collapse.show .nav-link-text,
    html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-collapse.show .dropdown-indicator:after {
        opacity: 1 !important;
    }

    html.navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl + .content {
        margin-inline-start: 0 !important;
    }
}

@media (max-width: 991.98px) {
    .network-manager-dashboard .dashboard-chart-widget .charts-section > .container {
        width: 100%;
        max-width: 100%;
        padding-inline: 0;
    }

    .network-manager-dashboard .dashboard-chart-widget .charts-section .row > [class*="col"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .network-manager-dashboard .dashboard-chart-widget .charts-section [id] {
        width: 100% !important;
        display: block !important;
    }
}

@media (max-width: 767.98px) {
    .main .content #main-content {
        padding-inline: 15px;
    }

    .navbar-vertical .navbar-collapse .navbar-nav .nav-link {
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }

    .filters-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .filters-list li:not(:last-child) {
        margin-inline-end: 0;
    }

    .table-overflow {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper > .row:first-child,
    .dataTables_wrapper > .row:last-child {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .dataTables_filter,
    .dataTables_length,
    .dt-buttons,
    .dt-length {
        float: none !important;
        width: 100%;
    }

    .network-manager-dashboard .dashboard-chart-widget .charts-section .col,
    .network-manager-dashboard .dashboard-chart-widget .charts-section [id$="Hotspot"],
    .network-manager-dashboard .dashboard-chart-widget .charts-section [id$="Status"],
    .network-manager-dashboard .dashboard-chart-widget .charts-section [id$="Time"],
    .network-manager-dashboard .dashboard-chart-widget .charts-section [id$="Inventory"],
    .network-manager-dashboard .dashboard-chart-widget .charts-section [id$="usageByHotspot"],
    .network-manager-dashboard .dashboard-chart-widget .charts-section [id$="salesByCategory"] {
        min-height: 260px;
    }

    .network-manager-dashboard .dashboard-chart-widget .table-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575.98px) {
    .content .navbar-top .navbar-brand img,
    .app-top-navbar-logo {
        max-width: 72px;
        height: auto;
    }

    .navbar-nav-icons .fa-language {
        font-size: 1.75rem !important;
    }

    .navbar-nav-icons .avatar.avatar-xl {
        width: 2rem;
        height: 2rem;
    }

    .navbar-nav-icons .nav-link {
        padding-inline: 0.35rem !important;
    }

    .app-top-navbar .navbar-nav-icons {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 0.25rem;
    }

    .app-top-navbar .organization-switcher-item {
        order: 10;
        flex: 0 0 100%;
        width: 100%;
        margin-inline: 0;
        padding-inline: 0.5rem !important;
    }

    .organization-switcher-select {
        min-width: 100%;
        max-width: 100%;
    }

    .network-manager-dashboard .dashboard-toolbar-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .network-manager-dashboard .dashboard-kpi-refresh-group {
        width: 100%;
        margin-inline-start: 0 !important;
        white-space: normal;
    }

    .network-manager-dashboard .dashboard-kpi-row > [class*="col-"],
    .network-manager-dashboard .dashboard-kpi-period-row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .network-manager-dashboard .dashboard-category-cards-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .network-manager-dashboard .dashboard-kpi-value {
        font-size: 1.35rem;
    }

    .network-manager-dashboard .dashboard-kpi-label {
        font-size: 0.8rem;
    }

    .network-manager-dashboard .dashboard-widget-card .card-body {
        padding: 0.5rem !important;
    }

    .options {
        width: auto !important;
        min-width: 4rem;
    }

    .eta-content .panel {
        width: 100%;
        max-width: 100%;
    }

    .modal-dialog,
    .full-modal .modal-dialog {
        max-width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    .breadcrumb {
        flex-wrap: wrap;
        font-size: 0.8rem;
    }

    .theme-wizard .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filters-list .flatpickr-input {
        width: 100%;
        max-width: 100%;
    }
}

.printed-card-preview-stage {
    direction: ltr;
    text-align: left;
}

.printed-card-preview-stage.is-absolute-mode {
    padding-top: 36px;
    overflow: visible;
}

.printed-card-preview {
    direction: ltr;
    position: relative;
    width: 100%;
    max-width: 220px;
    min-height: 140px;
    margin: 0 auto;
    padding: 8px 6px;
    border: 1px dashed #111;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
}

.printed-card-preview.is-absolute-mode {
    max-width: 320px;
    overflow: visible;
}

.printed-card-preview.has-background {
    border-style: solid;
    background-color: transparent;
}

.printed-card-background-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.printed-card-preview > .printed-card-row,
.printed-card-preview > .printed-card-field,
.printed-card-preview > .printed-card-drop-gap {
    position: relative;
    z-index: 1;
}

.printed-card-mode-toggle .printed-card-mode-btn {
    background-image: none !important;
}

.printed-card-mode-toggle .printed-card-mode-btn.is-active,
.printed-card-mode-toggle .printed-card-mode-btn.btn-primary.is-active {
    background-image: none !important;
    background-color: #2d3436 !important;
    border-color: #2d3436 !important;
    color: #fff !important;
}

.printed-card-mode-toggle .printed-card-mode-btn:not(.is-active) {
    background-color: #fff !important;
    color: #2d3436 !important;
}

.printed-card-row {
    display: flex;
    flex-direction: row;
    direction: ltr;
    gap: 4px;
    min-height: 28px;
}

.printed-card-row.is-drop-target,
.printed-card-field.is-drop-target,
.printed-card-drop-gap.is-drop-target {
    outline: 1px dashed #0d5ac9;
}

.printed-card-field {
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 4px 4px;
    cursor: move;
    user-select: none;
    box-sizing: border-box;
}

.printed-card-field.is-absolute {
    position: absolute;
    flex: none;
    z-index: 2;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.printed-card-field.is-absolute .printed-card-field-body {
    background: rgba(255, 255, 255, 0.72);
    border-radius: 2px;
    padding: 3px 4px;
    box-sizing: border-box;
    min-height: 1.15em;
}

.printed-card-preview.has-background .printed-card-field.is-absolute .printed-card-field-body {
    background: rgba(255, 255, 255, 0.55);
}

.printed-card-field.is-absolute.printed-card-field-credential .printed-card-field-body {
    border: 1px solid #7eb6d9;
}

.printed-card-field.is-absolute .printed-card-field-chrome {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 2px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    z-index: 3;
    white-space: nowrap;
}

.printed-card-field.is-absolute .printed-card-field-tag {
    position: static;
    padding: 1px 6px;
    font-size: 9px;
    line-height: 1.25;
    font-weight: 600;
    color: #fff;
    background: #2d3436;
    border-radius: 2px;
    white-space: nowrap;
}

.printed-card-field.is-absolute .printed-card-field-align {
    position: static;
    margin: 0;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, max-width 0.12s ease;
}

.printed-card-field.is-absolute:hover .printed-card-field-align,
.printed-card-field.is-absolute.is-dragging .printed-card-field-align {
    opacity: 1;
    max-width: 72px;
    pointer-events: auto;
}

.printed-card-field.is-dragging {
    opacity: 0.45;
}

.printed-card-field.is-absolute.is-dragging {
    opacity: 1;
    z-index: 5;
}

.printed-card-field.is-absolute.is-dragging .printed-card-field-body {
    box-shadow: 0 0 0 1px #0d5ac9;
}

.printed-card-field-credential {
    border: 1px solid #7eb6d9;
    border-radius: 2px;
}

.printed-card-field.is-absolute.printed-card-field-credential {
    border: none;
    border-radius: 0;
}

.printed-card-preview,
.printed-card-field-value,
.printed-card-field-label,
.printed-card-field-tag {
    font-family: Tahoma, "Segoe UI", Arial, "Cairo", sans-serif !important;
}

.printed-card-field-value {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.printed-card-field-label {
    font-size: 9px;
    color: #888;
    margin-top: 2px;
}

.printed-card-field-align {
    direction: ltr;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2px;
    margin-bottom: 2px;
}

.printed-card-align-btn {
    direction: ltr;
    width: 18px;
    height: 16px;
    padding: 0;
    border: 1px solid #c5c5c5;
    background: #f7f7f7;
    font-size: 9px;
    line-height: 14px;
    cursor: pointer;
}

.printed-card-align-btn.is-active {
    background: #0d5ac9;
    border-color: #0d5ac9;
    color: #fff;
}

.printed-card-drop-gap {
    direction: ltr;
    height: 8px;
}