@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css");

:root {
    --mud-table-border-radius: 0.75rem;
    --kt-brand-blue: #0B5ED8;
    --kt-brand-blue-pale: #E2EEFB;
    /* Translucent brand wash used behind inline checkbox/highlight rows on forms */
    --kt-brand-blue-tint: rgba(0, 123, 224, 0.07);
    --kt-bg-page: #F8F9FD;
    --kt-bg-subtle: #F6F8FE;
    --kt-border: #E5EAFA;
    --kt-border-input: #DEE2E6;
    --kt-fg-1: #171D22;
    --kt-fg-2: #51617B;
    --kt-fg-3: #727677;
    --kt-danger: #E74D4D;
    --kt-danger-pale: #FEF2F2;
    --kt-success: #198754;
    --kt-success-pale: #EDFAF4;
    --kt-warning: #B45309;
    --kt-warning-pale: #FFFBEB;
    /* Pale border companions to the semantic fills above, for status pills and inline banners that
       need an outline light enough not to compete with the text inside them. */
    --kt-success-border: #BFE6CF;
    --kt-warning-border: #F5DCAE;
    --kt-info: #24445F;
    --kt-info-pale: #F4F9FF;
    --kt-info-border: #D8E8FA;
    /* Categorical chart colors. Mirrored in KeytosUIShared DashboardChartPalette, which has to hand
       the same values to MudBlazor charts in C# — keep the two lists in the same order. */
    --kt-chart-purple: #7C3AED;
    --kt-chart-teal: #0E9488;
    --kt-chart-blue-light: #5B9BEF;
    --kt-chart-neutral: #CBD5E1;
    --kt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Neutral surfaces and fills for card chrome: a tinted band for table header/footer rows, and a
       flat gray for pills, icon tiles and hover states. Both are warmer than --kt-bg-subtle, which
       carries a blue cast that reads as selected next to white cards. */
    --kt-surface-subtle: #FAFBFC;
    --kt-fill-muted: #F2F4F7;
    /* Divider inside a card, lighter than --kt-border so it separates without boxing content in. */
    --kt-border-subtle: #EEF1F5;
    /* Placeholder and decorative-icon gray, and the flatter gray a disabled control's icon drops to. */
    --kt-fg-4: #98A2B3;
    --kt-fg-disabled: #CFD5DE;
    /* Focus treatment: a brighter blue than the brand fill, so a focused border stays visible against
       the filled primary button sitting next to it. */
    --kt-brand-blue-accent: #2B8DFF;
    --kt-focus-ring: 0 0 0 3px rgba(43, 141, 255, 0.15);
    --kt-brand-dark: #162438;
    --kt-shadow-card: 0 1px 4px 0 #D8DFF3;
    /* Partner billing direction colors: blue = partner pays Keytos, green = Keytos pays partner */
    --kt-partner-owes: #007be0;
    --kt-partner-owes-pale: #f5fbff;
    --kt-partner-owes-tint: rgba(0, 123, 224, 0.07);
    --kt-keytos-owes: #2e7d32;
    --kt-paper-bg: #fff;
}

input[readonly] {
    background-color: #e9ecef;
}

label {
    margin-bottom: 0.5rem;
}

h1, h2, h3, h4, h5, h6 {
    --bs-heading-color: #343a40;
}

.mud-input.mud-input-outlined {
    background-color: white;
}

#Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window {
    z-index: 9999 !important;
    max-height: 90vh !important;
    max-width: revert-layer !important;
    height: revert-layer !important;
    width: revert-layer !important;
    border-radius: 15px;
}

.section-label {
    margin-top: 16px;
    margin-bottom: 2px;
    display: block;
}

a {
    text-decoration: none;
    color: #0a8ce5 !important;
    transition: 0.3s;
}

a:hover {
    color: #2f3842;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0;
}

.font34 {
    font-size: 2.12rem;
    font-weight: bold;
}

.font-28 {
    font-size: 28px;
}

.font-8 {
    font-size: 8px;
}

.font-18, h4 {
    font-size: 18px;
}

.font-10 {
    font-size: 10px;
}

.font-11 {
    font-size: 11px;
}

.font-13, .left-side-nav .nav-item .nav-link p {
    font-size: 13px;
    margin: 0;
}

.theme-color {
    color: #0a8ce5;
}

.color2 {
    color: #727677;
}

.font-weight-bolder {
    font-weight: 500;
}

h2 {
    color: #727677;
    font-size: 3.4rem;
    font-weight: 700;
    font-family: "Hind", sans-serif;
    font-style: italic;
}

@media only screen and (max-width: 767px) {
    h2 {
        font-size: 2.4rem;
    }
}

h1 {
    color: #171d22;
    margin: 0;
    font-size: 48px;
}

@media only screen and (max-width: 991px) {
    h1 {
        font-size: 24px;
    }
}

h1 strong {
    font-weight: 600;
}

.section-heading-offset {
    margin-left: -10px;
}

.row {
    margin-left: -10px;
    margin-right: -10px;
}

@media screen and (min-width: 992px) {
    .content .container-fluid > .row {
        flex-wrap: nowrap;
    }
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-left: 10px;
    padding-right: 10px;
}

.dropdown-item {
    font-size: 12px;
}

body, html {
    height: 100%;
}

body {
    font-size: 14px;
    background-color: #f8f9fd;
    color: #171d22;
    line-height: 1.5;
    font-family: "Hind", sans-serif;
}

.font-14, .breadcrumb {
    font-size: 14px;
    font-weight: 500;
}

.font-16 {
    font-size: 16px;
    font-weight: 500;
}

.btn-link {
    font-size: 12px;
    padding: 0;
    border: 0;
    color: #171d22;
}

@media only screen and (max-width: 768px) {
    .btn-link {
        font-size: 11px;
    }
}

.btn-link:hover {
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
    .logo img {
        max-width: 100%;
    }
}

.container {
    max-width: 1300px;
}

.content .container-fluid {
    padding-left: 10px;
}

.logout button {
    border: 0;
    background-color: transparent;
    border-radius: 100%;
    padding: 0;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #25385 !important;
    opacity: 1 !important;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #25385;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #c4c4c4;
}

.h-100 {
    height: 100%;
}

.header {
    border-bottom: 1px solid #e5eafa;
    position: relative;
    border-radius: 0.8rem 0 0 0;
}

@media screen and (max-width: 767px) {
    .header {
        margin-top: 1rem;
    }
}

.right-side {
    background: linear-gradient(62.41deg, rgba(254, 251, 241, 0.8) 0.92%, rgba(250, 244, 254, 0.15) 99.19%), linear-gradient(310.9deg, rgba(235, 245, 254, 0.8) 25.33%, rgba(248, 248, 254, 0.4) 98.91%), #FFFFFF;
    margin-left: -0.6rem;
    border-radius: 0.8rem 0 0 0.8rem;
    z-index: 1;
    min-width: 0;
    overflow-x: auto;
}

@media only screen and (max-width: 1024px) {
    .right-side {
        margin: 0;
    }
}

.box {
    background-color: #fff;
    box-shadow: 0 1px 4px 0 #d8dff3;
    padding: 5px 8px 10px 9px;
    border-radius: 10px !important;
}

.left-side-nav {
    margin-bottom: 1rem;
    position: relative;
}

.left-side-nav .box {
    padding: 0;
}

.left-side-nav .nav-item {
    margin: 0rem 0 0.5rem;
}

.left-side-nav .nav-item:last-child {
    border-bottom: 0;
}

.left-side-nav .nav-item .nav-link {
    display: flex;
    padding: 0.54rem 0;
    color: #fff !important;
    align-items: center;
    transition: 0.3s;
}

@media screen and (max-width: 768px) {
    .left-side-nav .nav-item .nav-link {
        padding-right: 0;
        padding-left: 0;
    }
}

.left-side-nav .nav-item .nav-link i {
    color: #fbf9f9 !important;
    margin: 0 0.5rem 0 1rem;
    height: 15px;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    .left-side-nav .nav-item .nav-link i {
        margin-right: 0.5rem;
    }
}

.left-side-nav .nav-item .nav-link i:before {
    top: 1px;
    display: block;
    position: relative;
    font-size: 14px;
}

.left-side-nav .nav-item .nav-link p span {
    font-size: 9px;
}

.left-side-nav .nav-item .nav-link.active, .left-side-nav .nav-item .nav-link:hover {
    background-color: #fbf9f9;
    border-radius: 2rem;
    color: #162438 !important;
    position: relative;
}

.left-side-nav .nav-item .nav-link.active i, .left-side-nav .nav-item .nav-link:hover i {
    color: #162438 !important;
}

.left-side-nav .nav-item .nav-link.active i svg path, .left-side-nav .nav-item .nav-link.active i svg circle, .left-side-nav .nav-item .nav-link:hover i svg path, .left-side-nav .nav-item .nav-link:hover i svg circle {
    stroke: #253856;
}

.left-side-nav .nav-item .nav-link.active:after, .left-side-nav .nav-item .nav-link:hover:after {
    /*background: url(/images/app/img3.png);*/
    content: "";
    width: 16px;
    height: 71px;
    position: absolute;
    right: -27px;
}

@media screen and (max-width: 1024px) {
    .left-side-nav .nav-item .nav-link.active:after, .left-side-nav .nav-item .nav-link:hover:after {
        display: none;
    }
}

.left-side-nav .nav-item .nav-link:hover:after {
    display: none;
}

.left-side-nav .nav-item .nav-link:hover img {
    filter: invert(50%) sepia(50%) saturate(3047%) hue-rotate(43deg) brightness(30%) contrast(50%);
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
}

@media screen and (max-width: 768px) {
    .breadcrumb {
        font-size: 12px !important;
    }
}

.breadcrumb .breadcrumb-item {
    margin: 0 1.2rem;
}

.breadcrumb .breadcrumb-item.active {
    color: #0a8ce5;
}

.breadcrumb .breadcrumb-item:first-child {
    margin-left: 0;
}

.breadcrumb .breadcrumb-item a {
    color: #171d22;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    display: none;
}

.breadcrumb .breadcrumb-item a {
    position: relative;
}

.breadcrumb .breadcrumb-item a:after {
    content: ">";
    display: inline-block;
    margin: 0 0.2rem;
    position: absolute;
    right: -14px;
    top: 1px;
}

h4 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    margin-top: 40px;
    margin-bottom: 24px;
}

h6, .font-14, .breadcrumb {
    font-size: 14px;
}

h5 {
    font-size: 16px;
}

.theme-btn {
    background-color: #0a8ce5;
    color: #fff;
    border-radius: 7px;
    font-size: 12px;
}

.title {
    margin-bottom: 10px;
}

a.collapsed.view-less-more::after {
    content: "View More";
}

.text-decoration {
    text-decoration: underline;
}

a.view-less-more:not(.collapsed)::after {
    content: "View Less";
}

button {
    cursor: pointer;
    text-decoration: none;
}

#sidebar {
    background-color: #162438;
    max-width: 220px;
    position: relative;
    flex: 0 0 220px;
}

@media screen and (max-width: 991px) {
    #sidebar {
        position: absolute;
        top: 60px;
        z-index: 2;
    }
}

@media screen and (max-width: 450px) {
    #sidebar {
        flex: 0 0 35%;
        max-width: 60%;
    }
}

.left-side-nav > ul {
    padding-right: 1.4rem;
}

@media screen and (max-width: 1024px) {
    .left-side-nav > ul {
        padding-right: 0;
    }
}

.user-content {
    background-color: #e2eefb;
    width: 180px;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 5rem;
}

.user-content {
    display: flex;
    align-items: center;
    color: #152031 !important;
}

.user-content span.user-logo {
    background-color: #0a8ce5;
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    justify-content: center;
}

h1 {
    color: #152031;
    font-weight: bold;
}

.btn-custom {
    font-size: 12px;
    background-color: #0a8ce5 !important;
    color: #fff !important;
    border-radius: 3px !important;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}

.btn-custom:focus {
    border: 1px solid transparent !important;
}

.btn-custom:hover {
    color: #000 !important;
}

.btn:disabled {
}

.btn-custom.disabled {
    opacity: .65;
}

.btn-custom.request-btn {
    box-shadow: 4px 3px 2px 4px #e2eefb;
}

.card-header {
    --bs-card-cap-bg: white;
    background-color: white;
    --bs-card-cap-padding-y: 0.75rem;
    --bs-card-cap-padding-x: 1.25rem;
}

.card-footer {
    background-color: white;
}

.min-vh-100 {
    height: 100%;
}

.review-search.d-flex {
    color: #b8c8e0;
    font-size: 14px;
    font-weight: 600;
}

.accordion .card {
    border: 0;
}

.accordion .card-body {
    padding: 0;
}

.accordion .card-header {
    background-color: transparent;
    border: 0;
}

ol {
    padding-left: 0px;
}

ol li::before {
    content: "\2022";
    color: #0A8CE5;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: 0;
}

.accordion .card-header .btn-header-link {
    display: block;
    text-align: left;
    color: #253856 !important;
    font-size: 16px;
    font-weight: 600;
}

.accordion .card-header .btn-header-link i {
    font-size: 13px;
    margin-right: 0.5rem;
    margin-left: -25px;
}

.accordion .card-header .btn-header-link:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    content: "\f077";
    font-size: 14px;
}

.accordion .card-header .btn-header-link.collapsed:after {
    content: "\f078";
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

table tr:first-child th:first-child {
    border-top-left-radius: 4px;
}

table tr:first-child th:last-child {
    border-top-right-radius: 4px;
}

table > tbody > tr {
    border-color: #dee2e6;
    border-bottom-width: 1px;
}

.table-responsive {
    font-size: 11px;
}

.table-responsive thead th {
    border: 0;
    background-color: #f6f8fe;
    font-weight: 600;
    text-transform: uppercase;
}

.table-responsive thead th img {
    vertical-align: baseline;
}

.table-responsive thead th:last-child {
    width: 6%;
}

.table-responsive .table td, .table-responsive .table th {
    border: 0;
    padding: 0.75rem 0.5rem;
    vertical-align: text-top;
}

.table-responsive .table td:first-child, .table-responsive .table th:first-child {
    padding-left: 1rem;
}

@media only screen and (max-width: 767px) {
    .table-responsive .table td, .table-responsive .table th {
        min-width: 148px;
        text-align: center;
    }
}

a.btn-custom {
    border-radius: 0.5rem !important;
    display: inline-block;
    color: #fff !important;
    cursor: pointer;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: none;
    background-color: #f6f8fe !important;
    font-size: 10pt;
    font-family: 'Hind';
    font-weight: 600;
    color: #253856;
    text-transform: uppercase;
}

.table td {
    padding: .75rem;
    border-top: none;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    color: #51617B !important;
}

.table th {
    padding: .75rem;
    border-top: none;
}

.table td, .table th {
    border-top: none !important;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: none !important;
}

tr:nth-child(even) {
    background-color: #f6f8fe;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0rem !important;
    background-color: transparent;
    border-radius: 10px;
}

.table-striped-even > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: #fafbff;
}

.progress-title {
    font-size: 16px;
    font-weight: 700;
    color: #011627;
    margin: 0 0 20px;
}

.progress {
    height: 2px;
    background: #b8c8e0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    margin-top: 1.5rem;
    position: relative;
}

.progress span.min {
    position: absolute;
    left: 0;
    color: #b8c8e0;
    top: -20px;
}

.progress span.min:after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background-color: #0a8ce5;
    display: inline-block;
    position: absolute;
    bottom: -6px;
    left: 0;
}

.progress span.max {
    position: absolute;
    right: -6px;
    color: #b8c8e0;
    top: -20px;
}

.progress span.max:after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background-color: #b8c8e0;
    display: inline-block;
    position: absolute;
    bottom: -6px;
    right: 0;
}

.progress .progress-bar {
    box-shadow: none;
    position: relative;
    animation: animate-positive 2s;
}

.progress .progress-bar:after {
    content: "";
    display: block;
    background-image: url(/images/app/slider-icon.png);
    position: absolute;
    top: -4px;
    right: 1px;
    width: 22px;
    height: 6px;
}

.progress .progress-value {
    font-size: 10px;
    color: #fff;
    position: absolute;
    top: -28px;
    right: 0px;
    background-color: #0a8ce5;
    border-radius: 0.3rem;
    padding: 0.1rem 0.2rem 0;
}

.progress.pink .progress-bar:after {
    border-bottom-color: #ff4b7d;
}

.progress.green .progress-bar:after {
    border-bottom-color: #0a8ce5;
}

.progress.yellow .progress-bar:after {
    border-bottom-color: #e8d324;
}

.progress.blue .progress-bar:after {
    border-bottom-color: #3485 xef;
}

@keyframes animate-positive {
    0% {
        width: 0;
    }
}

.request-lft-btn {
    position: fixed;
    bottom: 2rem;
    left: 38px;
    width: 135px;
    z-index: 11;
}

.request-lft-btn button {
    box-shadow: none !important;
}

@media screen and (max-width: 768px) {
    .request-lft-btn {
        left: 10px;
    }
}

.responsive-menu {
    position: absolute;
    left: -6px;
    z-index: 1;
    top: 13px;
}

@media screen and (max-width: 991px) {
    .download-link {
        margin-left: 2.3rem;
    }
}

.e-grid .e-rowcell {
    border-color: transparent !important;
}

.accordion .e-grid {
    font: 11px "Hind", sans-serif !important;
    border: 0 !important;
}

.accordion .e-grid .e-headercontent {
    margin-top: -16px;
}

.accordion .e-grid .e-headercelldiv {
    font-size: 11px !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: initial !important;
    overflow: initial !important;
}

.accordion .e-grid .e-headercell, .accordion .e-grid .e-detailheadercell {
    border: 0 !important;
    font-size: 10px !important;
    background-color: #f6f8fe !important;
    padding: 0 8px 0 !important;
    height: 50px !important;
}

.accordion .e-grid .e-gridheader {
    border: 0 !important;
    background-color: #f6f8fe !important;
}

a.btn:not([href]):not([tabindex]) {
    color: #fff;
}

.e-row {
    background-color: #f6f8fe;
}

.e-row.e-altrow:nth-of-type(odd) {
    background-color: #fff;
}

.accordion .e-grid .e-gridcontent tr td {
    padding: 5px 5px 5px 10px;
    height: 62px;
}

.e-grid .e-pager {
    border-bottom: transparent;
    border-left: transparent;
    border-right: transparent;
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
}

.accordion .e-grid .e-gridcontent tr td:last-child {
    text-align: right;
    padding-right: 20px;
}

/*Search*/
.e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
    right: auto !important;
}

.e-search {
    left: 0px !important;
    top: -67px !important;
    border: 0 !important;
}

.e-search input[type=text] {
    height: 40px !important;
    display: inline-block !important;
    border: none !important;
    outline: none !important;
    color: #000 !important;
    padding: 3px !important;
    padding-left: 48px !important;
    width: 0px !important;
    position: absolute !important;
    top: -3px !important;
    left: 0 !important;
    background: none !important;
    z-index: 3 !important;
    transition: width 0.3s cubic-bezier(0, 0.795, 0, 1) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: "Hind" sans-serif !important;
    border-radius: 0px !important;
}

.e-search input[type=text]::placeholder {
    opacity: 1 !important;
    color: #25385 !important;
}

.e-search input[type=text]:focus:hover {
    border-bottom: 1px solid #BBB !important;
}

.e-search input[type=text]:focus {
    width: 270px !important;
    z-index: 1 !important;
    border-bottom: 1px solid #253856 !important;
    cursor: text !important;
    background-color: #fff !important;
}

.e-search .e-search-icon {
    height: 40px !important;
    width: 50px !important;
    display: inline-block !important;
    color: #253856 !important;
    float: right !important;
    border: none !important;
    position: absolute !important;
    top: 11px !important;
    left: 0px !important;
    z-index: 2 !important;
    cursor: pointer !important;
    transition: opacity 0.5s ease !important;
    background-color: transparent !important;
    font-size: 14px !important;
}

.e-search button:hover {
    opacity: 0.8 !important;
}

button:focus {
    outline: none;
    border: none;
}

.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-container::after {
    height: 2px;
    background: #b8c8e0 !important;
    opacity: .6 !important;
}

.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb {
    fill: transparent !important;
    stroke: transparent !important;
}

.mdc-slider__thumb {
    background-image: url(/images/app/slider-icon.png);
    background-repeat: no-repeat;
    top: 5px !important;
    transform: initial !important;
}

.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track, .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track {
    background-color: #0a8ce5 !important;
}

.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
    background-color: #0a8ce5 !important;
}

.page-title p {
    font-size: 36px;
    font-weight: bold;
}

.e-input-group.e-flatcorner {
    border-radius: 0px;
}

tr.removed td {
    background: #ffeef0 !important;
    color: black !important;
    text-decoration: line-through;
}

tr.added td {
    background: #e6ffed !important;
    color: black !important;
}

.e-input-group.e-red .e-input[readonly], .e-input-group.e-control-wrapper.e-red .e-input[readonly] {
    background: #ffeef0 !important;
    color: black !important;
    text-decoration: line-through;
}

.e-input-group.e-green .e-input[readonly], .e-input-group.e-control-wrapper.e-green .e-input[readonly] {
    background: #e6ffed !important;
    color: black !important;
}

input {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    outline-color: initial;
    outline-style: initial;
    outline-width: 0px;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

.addedApproval .card-body {
    background: #e6ffed !important;
    color: black !important;
}

.removedApproval .card-body {
    background: #ffeef0 !important;
    color: black !important;
    text-decoration: line-through;
}

.removedApproval .card-header {
    text-decoration: line-through;
}

.removedApproval label {
    text-decoration: line-through;
}

.removedTextField input {
    background: #ffeef0 !important;
    color: black !important;
    text-decoration: line-through;
}

.addedTextField input {
    background: #e6ffed !important;
    color: black !important;
}

.e-input-group.e-flatrightcorner {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.e-checkbox-wrapper.e-checkbox-disabled.stirkethrough .e-label {
    color: black !important;
    text-decoration: line-through !important;
}

.e-checkbox-wrapper.e-checkbox-disabled.blackText .e-label {
    color: black !important;
}

.fas.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.fa-left {
    margin-right: 7px;
}

.form-control {
    flex: 1;
    margin-left: -5px;
    margin-right: 10px;
}

.old-val {
    background: #ffeef0 !important;
    color: black !important;
    text-decoration: line-through;
}

.new-val {
    background: #e6ffed !important;
    color: black !important;
}

h6.mud-typography.mud-typography-h6.mud-inherit-text {
    display: block;
    text-align: left;
    color: #253856;
    font-size: 16px;
    font-weight: 600;
}

div.mud-input-control.mud-input-control.mt-0 {
    margin-right: 371px;
    margin-left: 265px;
    margin-top: -69px !important;
}

div.mud-table {
    border-radius: var(--mud-table-border-radius);
}

div.mud-toolbar.mud-toolbar-gutters.mud-table-toolbar {
    background: white;
    border-radius: var(--mud-table-border-radius) var(--mud-table-border-radius) 0 0;
}

div.mud-toolbar.mud-toolbar-gutters.mud-table-pagination-toolbar {
    background: white;
    border-top: 1px solid #F0F0F0;
    border-radius: 0 0 var(--mud-table-border-radius) var(--mud-table-border-radius);
}

table.mud-table-root {
    table-layout: fixed;
}

td.mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10%;
    white-space: nowrap;
}

th.mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10%;
    white-space: nowrap;
}

div.mud-tabs-toolbar {
    background-color: transparent;
}

/*div.mud-tabs-toolbar-wrapper {
    width: 100% !important;
}

div.mud-tab.mud-ripple {
    max-width: 660px;
}*/

.donut-chart .svg-tooltip rect {
    fill: rgba(0, 0, 0, 0.8) !important;
}

.donut-chart .svg-tooltip text {
    fill: white !important;
}

div.mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 4px;
    background-color: white;
}

div.mud-input-slot.mud-input-root.mud-input-root-outlined.mud-input-root-adorned-end.mud-select-input {
    padding: 0.6rem .75rem;
}

div.mud-input.mud-input-text.mud-input-adorned-end.mud-input-underline.mud-shrink {
    background-color: white;
    border-radius: 4px;
}

input.mud-input-slot.mud-input-root.mud-input-root-text.mud-input-root-adorned-end {
    padding: 6px 4px 7px;
}

div.mud-input.mud-input-outlined.mud-input-adorned-end.mud-shrink.mud-select-input {
    width: 100%;
}

div.mud-popover.mud-popover-open.mud-popover-bottom.mud-paper.mud-elevation-8 {
    background-color: white;
}

div.mud-dialog-content {
    background: white;
}

div.loadingCenterHardHeight {
    margin: auto;
    width: 70px;
    justify-content: center;
    height: 800px;
    align-items: center;
    display: flex;
}

.cursor-pointer {
    cursor: pointer;
}

.text-prewrap {
    white-space: pre-wrap;
}

.mud-slider > input {
    border: 0 !important;
    padding: 0;

}

textarea {
    overflow: auto;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    width: 100%;
    padding: 10px;
}

textarea:focus {
    border-color: #80bdff;
    outline: 0;
    outline-color: initial;
    outline-style: initial;
    outline-width: 0px;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

.filter-box-wrapper {
    align-items: center; /* vertically center the box in the column */
}

.filter-box {
    align-items: center; /* center checkbox + text inside */
    height: 38px; /* roughly matches Bootstrap .btn height */
    padding: 0 12px; /* horizontal padding only */
    box-shadow: none;
    border-radius: 4px;
    margin-top: 5px;
}

.filter-box-row {
    background: rgba(0, 123, 224, 0.07);
    border-radius: 16px;
    padding: 19px 10px;
    margin-right: -2px;
    margin-bottom: 30px;
    margin-left: -2px;
}

.check-box {
    background: rgba(0, 123, 224, 0.07);
    border-radius: 4px;
    padding: 5px 8px 14px 9px;
    box-shadow: none;
}

.check-box .mud-checkbox{
    margin-bottom: -20px !important;
    margin-top: -10px !important;
    margin-left: -13px !important;
}

.drag-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    min-height: 0;
    height: 150px;
}

.drag-drop-input {
    position: absolute;
    width: 100%;
    height: 40px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.drag-drop-zone .drag-drop-input {
    height: 150px;
}

.drag-enter {
    box-shadow: none;
}

.list {
    padding: 2em;
    min-width: 100%;
}
.trust-download-btn {
    border-radius: 4px;
    color: white !important;
    text-decoration: none !important;
}

.trust-download-btn:hover {
    color: white !important;
}

.trust-download-btn:focus {
    color: white !important;
}

.trust-download-icon {
    margin-right: 8px;
}

.mb-100 {
  margin-bottom: 100px;
}

/* ========== Policy Page Reusable Classes ========== */

/* Card with rounded corners */
.card-rounded {
    border-radius: 10px;
}

/* Transparent card header background */
.card-header-transparent {
    background-color: transparent !important;
}

/* Heading displayed inline */
.heading-inline {
    display: inline;
}

/* Icon button with no border or background */
.btn-icon {
    border-width: 0;
    background-color: transparent;
}

/* Danger-colored icon button for delete actions */
.btn-icon-danger {
    border-width: 0;
    background-color: transparent;
    color: #E74D4D;
}

/* Highlighted checkbox container */
.checkbox-highlight {
    background-color: rgba(0, 123, 224, 0.07);
    box-shadow: none;
    padding: 10px 8px 3px 9px;
    margin-bottom: 15px;
}

/* Dense checkbox adjustment inside checkbox-highlight */
.mud-checkbox-dense {
    margin-bottom: -12px;
    margin-top: -10px;
    margin-left: -13px;
}

/* Dense checkbox with no left indent (for row-level checkboxes) */
.mud-checkbox-start {
    margin-bottom: -12px;
    margin-top: -10px;
    margin-left: 0;
}

/* Transparent card footer background */
.card-footer-transparent {
    background-color: transparent !important;
}

/* Section heading top spacing */
.section-mt {
    margin-top: 20px;
}

/* Larger section heading top spacing */
.section-mt-lg {
    margin-top: 28px;
}

/* Firebrick text for warning/error messages */
.text-firebrick {
    color: firebrick;
}

/* Orange text for warnings */
.text-warning-orange {
    color: orange;
}

/* Dark brand navy text */
.text-kt-brand-dark {
    color: var(--kt-brand-dark);
}

/* Table overflow wrapper */
.table-overflow {
    overflow-x: auto;
}

/* Table cell vertically aligned with padded content */
.td-valign {
    padding-top: 24px;
}

/* Table cell for icon/status with centered alignment */
.td-icon-center {
    text-align: center;
    padding-top: 22px;
}

/* Delete button in table rows */
.btn-delete-row {
    border-width: 0;
    background-color: transparent;
    color: #E74D4D;
    margin: 15px 10px 10px;
}

/* Table action button spacing */
.btn-table-action {
    margin-top: 5px;
}

/* Button aligned with labeled form fields */
.btn-label-align {
    margin-top: 28px;
}

/* Cancel subscription dialog "Before You Go" info box */
.before-you-go-box {
    background-color: var(--kt-bg-subtle);
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Learn more info box */
.learn-more-box {
    background: #e2eefb;
    margin-top: 8px;
    line-height: 40px;
    width: fit-content;
    padding-right: 20px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.learn-more-box a {
    margin-left: 10px;
}

/* Attribute entry grey container */
.attribute-entry-container {
    background: #d2d2d2;
    margin-top: 8px;
    line-height: 40px;
    padding-right: 20px;
    border-radius: 10px;
    margin-bottom: 12px;
}

/* Policy card header button group spacing */
.policy-header-toggle {
    margin-top: 20px;
    margin-left: 10px;
}

.policy-header-actions {
    margin: 20px 10px 10px 20px;
}

/* Heading inline with vertical spacing */
.heading-inline-spaced {
    display: inline;
    margin-top: 0.5rem;
}

/* Input field with no border-radius and no side margins */
.input-flat {
    border-radius: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Input field with transparent right border */
.input-flat-secret {
    border-radius: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-right: 1px solid transparent;
}

/* Password toggle button */
.btn-password-toggle {
    border: 1px solid #ced4da !important;
    border-radius: 0 !important;
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* Password toggle button with transparent right border */
.btn-password-toggle-left {
    border: 1px solid #ced4da !important;
    border-right: transparent !important ;
    border-radius: 0 !important;
}

/* IP action buttons */
.btn-ip-action {
    border-radius: 0 !important;
    margin-right: 2px;
    font-size: 1rem;
}

.btn-ip-add {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    font-size: 1rem;
}

/* No margin on sides */
.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Left margin adjustment */
.ms-label {
    margin-left: 10px;
}

/* Textarea no resize */
.textarea-no-resize {
    resize: none;
}

/* Horizontal line separator */
.hline-spaced {
    margin-bottom: 25px;
    margin-top: 25px;
}

/* Spacer at bottom of page */
.spacer-bottom-lg {
    margin-top: 100px;
}

/* Nested card inside a form card, separated from the section above it */
.card-spacer-top {
    margin-top: 20px;
}

/* Terms-and-conditions checkbox row on the signup pages */
.terms-acceptance-box {
    display: flex;
    align-items: center;
    background-color: var(--kt-brand-blue-tint);
    border-radius: 10px;
    padding: 9px 12px 9px 0;
}

/* Button with top spacing for form alignment */
.btn-form-mt {
    margin-top: 36px;
}

/* Priority input width */
.input-priority {
    width: 8ch;
    margin: 0;
}

/* Fixed height containers for button alignment */
.attribute-btn-container {
    height: 50px;
}

.accept-btn-container {
    height: 68px;
}

/* No left padding */
.ps-0 {
    padding-left: 0;
}

/* ========== Licensing Card ========== */

.licensing-card {
    background: white;
    border: 0;
    border-radius: 10px;
    box-shadow: var(--kt-shadow-card);
    overflow: hidden;
}

.licensing-card-header {
    padding: 13px 18px;
    border-bottom: 0.4px solid var(--kt-border);
    background: white;
}

.licensing-card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--kt-fg-1);
    line-height: 1.2;
    margin: 0;
}

.licensing-card-subtitle {
    font-size: 12px;
    color: var(--kt-fg-3);
    margin-top: 2px;
}

.licensing-total-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kt-fg-3);
    margin-right: 8px;
}

.licensing-total-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
    font-size: 13px;
    font-weight: 600;
}

.licensing-total-pill i {
    font-size: 13px;
}

.licensing-card-body {
    padding: 16px 18px;
}

.licensing-mode-row {
    margin-bottom: 12px;
}

.licensing-mode-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--kt-brand-blue);
    font-size: 12px;
    font-weight: 500;
}

.licensing-mode-inactive {
    color: #9F9F9F;
    font-size: 12px;
}

.licensing-toggle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--kt-bg-subtle);
    border: 1px solid var(--kt-border);
    transition: background-color 140ms ease, border-color 140ms ease;
    margin-bottom: 16px;
}

.licensing-toggle-active {
    background: var(--kt-brand-blue-pale);
    border-color: var(--kt-brand-blue);
}

.licensing-toggle-checkbox {
    margin-bottom: 0;
}

.licensing-toggle-sub {
    flex-basis: 100%;
    margin-left: 32px;
    margin-top: -4px;
    font-size: 12px;
    color: var(--kt-fg-2);
}

.licensing-users-section {
    margin-top: 4px;
}

/* Seats usage block */
.licensing-usage {
    padding: 14px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #F6F8FE, #EFF6FF);
    border: 1px solid var(--kt-border);
    margin-bottom: 16px;
}

.licensing-usage-eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-fg-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.licensing-usage-counts {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}

.licensing-usage-big {
    font-size: 26px;
    font-weight: 600;
    color: var(--kt-fg-1);
    line-height: 1;
}

.licensing-usage-of {
    font-size: 13px;
    color: var(--kt-fg-2);
}

.licensing-usage-pct {
    font-size: 18px;
    font-weight: 600;
    color: var(--kt-brand-blue);
}

.licensing-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(11, 94, 216, 0.12);
    overflow: hidden;
    margin-top: 10px;
}

.licensing-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0B5ED8, #27AAE1);
    border-radius: 999px;
    transition: width 240ms ease;
}

.licensing-usage-footer {
    margin-top: 10px;
    font-size: 11px;
    color: var(--kt-fg-2);
}

.licensing-usage-strong {
    color: var(--kt-fg-1);
    font-weight: 600;
}

.licensing-pending-note {
    margin-top: 4px;
    font-size: 11px;
    color: var(--kt-warning, #f59e0b);
}

/* ========== OwnersComponent shared styling ========== */

.kt-owners-section {
    display: block;
    margin-bottom: 4px;
}

.kt-owners-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.kt-owners-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--kt-fg-2);
    margin: 0;
}

.kt-owners-info {
    font-size: 11px;
    color: var(--kt-fg-3);
}

.kt-owners-input-row {
    margin-bottom: 10px;
}

.kt-owners-empty {
    color: var(--kt-fg-3);
    font-size: 13px;
    text-align: center;
    padding: 32px 14px;
    border-radius: 8px;
    border: 1px dashed var(--kt-border);
    background: var(--kt-bg-subtle);
}

.kt-owners-table-wrapper {
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    overflow: hidden;
    overflow-x: auto;
}

.kt-owners-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin: 0;
    table-layout: fixed;
}

.kt-owners-table thead th {
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #253856;
    background: var(--kt-bg-subtle);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--kt-border-input);
}

.kt-owners-th-name {
    width: 30%;
}

.kt-owners-th-type {
    width: 15%;
}

.kt-owners-th-actions {
    width: 80px;
}

.kt-owners-table tbody tr {
    background: white;
}

.kt-owners-table tbody tr:nth-of-type(even) {
    background: var(--kt-bg-subtle);
}

.kt-owners-table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--kt-fg-1);
    border-bottom: 0.4px solid var(--kt-border);
    vertical-align: middle;
}

.kt-owners-table tbody tr:last-child td {
    border-bottom: 0;
}

.kt-owners-td-name {
    font-weight: 500;
    color: var(--kt-fg-1);
    word-break: break-word;
}

.kt-owners-td-objid {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--kt-fg-2);
    word-break: break-all;
}

.kt-owners-td-actions {
    text-align: center;
    width: 60px;
}

.kt-owners-delete-btn {
    border: 0;
    background: transparent;
    color: var(--kt-danger);
    opacity: 0.7;
    font-size: 13px;
    padding: 4px;
    transition: opacity 120ms ease;
}

.kt-owners-delete-btn:hover {
    opacity: 1;
}

.kt-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}

.kt-type-pill-user {
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
}

.kt-type-pill-group {
    background: #F0EBFF;
    color: #6B21E8;
}

.kt-type-pill-default {
    background: #F1F3F8;
    color: var(--kt-fg-2);
}

/* Authentication log Access-Accept / Access-Reject result (KeytosUIShared AuthAuditLogs) */
.kt-result-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.kt-result-pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.kt-result-pill-accept {
    background: var(--kt-success-pale);
    color: var(--kt-success);
}

.kt-result-pill-reject {
    background: var(--kt-danger-pale);
    color: var(--kt-danger);
}

/* Meraki health-probe markers (KeytosUIShared AuthAuditLogs) */
.kt-test-probe-pill {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--kt-border);
    background: var(--kt-bg-subtle);
    color: var(--kt-fg-3);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.kt-test-probe-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--kt-fg-2);
}

/* ==========================================================================
   Networking dashboard (KeytosUIShared NetworkDashboard and its panels)
   ========================================================================== */
.kt-dash {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kt-dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.kt-dash-heading {
    margin-bottom: 4px;
}

.kt-dash-subheading {
    font-size: 13px;
    color: var(--kt-fg-2);
}

.kt-dash-alert {
    margin-bottom: 0;
}

.kt-dash-header-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.kt-dash-asof {
    font-size: 11px;
    color: var(--kt-fg-3);
}

.kt-dash-section-gap {
    margin-top: 28px;
}

/* Time-range selector */
.kt-dash-range-group {
    display: inline-flex;
    gap: 4px;
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    padding: 3px;
}

.kt-dash-range-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 6px;
}

/* Cards */
.kt-dash-card {
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border);
    border-radius: 12px;
    padding: 15px 17px;
    height: 100%;
}

.kt-dash-card-flush {
    padding: 0;
    overflow: hidden;
}

/* Opt-in flex column so a card whose height is stretched by a taller sibling can hand the spare space
   to its content. Not applied to every card, because the table cards rely on normal block layout. */
.kt-dash-card-fill {
    display: flex;
    flex-direction: column;
}

.kt-dash-card-body {
    padding: 15px 17px;
}

.kt-dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.kt-dash-card-header-padded {
    padding: 14px 17px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--kt-border);
}

.kt-dash-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--kt-fg-1);
}

.kt-dash-card-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: var(--kt-fg-3);
    margin-left: 4px;
}

.kt-dash-empty {
    font-size: 13px;
    color: var(--kt-fg-3);
    padding: 24px 0;
    text-align: center;
}

/* KPI tiles */
.kt-dash-kpi-row {
    margin-bottom: 0;
}

.kt-dash-stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kt-dash-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--kt-fg-2);
}

.kt-dash-stat-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--kt-fg-1);
}

.kt-dash-value-success {
    color: var(--kt-success);
}

.kt-dash-value-danger {
    color: var(--kt-danger);
}

.kt-dash-stat-sub {
    font-size: 11px;
    color: var(--kt-fg-3);
}

.kt-dash-sub-success {
    color: var(--kt-success);
    font-weight: 500;
}

.kt-dash-sub-danger {
    color: var(--kt-danger);
    font-weight: 500;
}

/* EZRADIUS overview header: page title and the new-dashboard toggle share one line. */
.kt-overview-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.kt-overview-header h1 {
    margin-bottom: 0;
}

/* Tinted like .checkbox-highlight but sized to its content instead of spanning the page, and pushed to
   the trailing edge so it holds the same spot whether or not the title beside it is rendered. */
.kt-preview-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 2px 12px;
    border-radius: 8px;
    background: rgba(0, 123, 224, 0.07);
    white-space: nowrap;
}

/* Charts stretch to the card. MudChart needs MatchBoundsToSize as well as a width; the wrapper is
   what gives it a full-width parent to match. */
.kt-dash-chart {
    width: 100%;
}

/* The donut card sits beside the taller reject-reasons card, so this box grows into whatever height
   the row settles on. MudChart draws the ring and its own legend into the bounds it is given, which is
   why the size lives here rather than on chart parameters. */
.kt-dash-donut {
    flex: 1;
    min-height: 220px;
    width: 100%;
}

/* Reject reasons: one line each — reason, how-to-fix link, count. No progress bars; the descending
   order and the counts carry the comparison on their own. */

/* Top NAS clients */
.kt-dash-mono {
    font-family: var(--kt-font-mono);
    font-size: 12px;
    color: var(--kt-brand-blue);
}

.kt-dash-embedded .kt-dash-reject-reason {
    color: var(--kt-fg-1);
}

.kt-dash-fail-high {
    color: var(--kt-danger);
    font-weight: 600;
}

.kt-dash-fail-medium {
    color: var(--kt-warning);
    font-weight: 600;
}

.kt-dash-fail-low {
    color: var(--kt-success);
}

/* Top failing identities */
.kt-dash-identity-list {
    display: flex;
    flex-direction: column;
}

.kt-dash-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 17px;
    border-bottom: 1px solid var(--kt-border);
}

.kt-dash-identity:last-child {
    border-bottom: 0;
}

.kt-dash-identity-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.kt-dash-identity-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-dash-identity-detail {
    font-size: 11px;
    color: var(--kt-fg-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-dash-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.kt-dash-badge-high {
    color: var(--kt-danger);
    background: var(--kt-danger-pale);
    border: 1px solid var(--kt-danger);
}

.kt-dash-badge-medium {
    color: var(--kt-warning);
    background: var(--kt-warning-pale);
    border: 1px solid var(--kt-warning);
}

/* Per-location health strip, shown only for multi-location subscriptions */
.kt-dash-location-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kt-dash-location-card {
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 160px;
}

.kt-dash-location-card-unreachable {
    border-color: var(--kt-danger);
    background: var(--kt-danger-pale);
}

.kt-dash-location-host {
    font-size: 11px;
    color: var(--kt-fg-2);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-dash-location-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--kt-fg-1);
}

.kt-dash-location-unreachable {
    font-size: 14px;
    font-weight: 600;
    color: var(--kt-danger);
}

.kt-dash-location-sub {
    font-size: 11px;
    color: var(--kt-fg-3);
}

/* Shield instance management (KeytosUIShared ShieldInstanceComponent) */
.kt-shield-card {
    margin-left: 10px;
}

.kt-shield-card-title {
    display: inline-flex;
    font-weight: 600;
    font-size: 16pt;
    line-height: 45px;
}

.kt-shield-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--kt-fg-2);
    margin-bottom: 4px;
}

.kt-shield-field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--kt-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.kt-shield-field-value {
    font-size: 13px;
    color: var(--kt-fg-1);
    word-break: break-word;
}

.kt-shield-field-mono {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--kt-fg-2);
    word-break: break-all;
}

.kt-shield-section-title {
    margin-left: 10px;
    margin-top: 24px;
    margin-bottom: 12px;
}

.kt-shield-empty {
    color: var(--kt-fg-3);
    font-size: 13px;
    margin-left: 10px;
}

/* Generic info card layout (KeytosUIShared) — shared by
   OnboardingApplicationConsentComponent and DocsHelpCardComponent. */
.kt-info-card {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    padding: 40px 56px;
    max-width: 560px;
    margin: 32px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.kt-info-card-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: #0F172A;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.kt-info-card-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #0F172A;
    margin: 16px 0 8px;
}

.kt-info-card-description {
    font-size: 16px;
    line-height: 1.45;
    color: #1F2937;
    margin: 0 0 24px;
    max-width: 420px;
}

.kt-info-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1F2A44;
    color: #FFFFFF !important;
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: background 140ms ease;
}

.kt-info-card-action:hover {
    background: #111827;
    color: #FFFFFF !important;
}

.kt-info-card-action-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 8px;
}

/* Onboarding application consent card — bits specific to the consent flow
   (logo well, learn-more link, "Sign in with Microsoft" button). */
.onboarding-consent-logos {
    position: relative;
    width: 168px;
    height: 168px;
    margin-bottom: 24px;
}

.onboarding-consent-logo-primary {
    width: 144px;
    height: 144px;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
    object-fit: contain;
    padding: 16px;
    display: block;
}

.onboarding-consent-logo-secondary {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.18));
}

.onboarding-consent-logo-warning {
    position: absolute;
    left: -38px;
    top: -20px;
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.18));
}

.onboarding-consent-learn-more {
    color: #0A8CE5 !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 24px;
}

.onboarding-consent-learn-more:hover {
    text-decoration: underline;
}

/* "Sign in with Microsoft" button — Microsoft brand spec, dark variant.
   https://learn.microsoft.com/entra/identity-platform/howto-add-branding-in-apps */
.onboarding-consent-signin {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #2F2F2F;
    color: #FFFFFF !important;
    padding: 12px;
    border: 1px solid #8C8C8C;
    border-radius: 10px;
    font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none !important;
    transition: background 140ms ease;
    margin-bottom: 24px;
}

.onboarding-consent-signin:hover {
    background: #1F1F1F;
    color: #FFFFFF !important;
}

.onboarding-consent-signin-logo {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------- */
/* Network Security Onboarding wizard                                */
/* ----------------------------------------------------------------- */
.network-onboarding-page {
    max-width: 2100px;
    margin: 0 auto;
    padding: 18px 32px 48px;
}

.network-onboarding-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.network-onboarding-title {
    color: var(--kt-fg-1);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 4px;
}

.network-onboarding-subtitle {
    color: var(--kt-fg-2);
    font-size: 14px;
}

.network-onboarding-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.network-onboarding-progress-strip {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--kt-brand-blue), #162438);
    color: #FFFFFF;
    margin-bottom: 24px;
}

.network-onboarding-progress-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 96px;
}

.network-onboarding-progress-cell-end {
    text-align: right;
}

.network-onboarding-progress-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

.network-onboarding-progress-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}

.network-onboarding-progress-bar {
    margin-top: 6px;
    height: 6px;
    width: 160px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.network-onboarding-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #FFFFFF;
    transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.network-onboarding-progress-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.22);
}

.network-onboarding-progress-spacer {
    flex: 1 1 auto;
}

.network-onboarding-panels {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--kt-shadow-card);
    background: #FFFFFF;
}

.network-onboarding-step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.network-onboarding-step-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    border: 1.5px solid transparent;
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.network-onboarding-step-indicator-idle {
    background: #F2F4F8;
    color: #9F9F9F;
    border-color: #DEE2E6;
}

.network-onboarding-step-indicator-active {
    background: var(--kt-brand-blue);
    color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(11, 94, 216, 0.12);
}

.network-onboarding-step-indicator-complete {
    background: #198754;
    color: #FFFFFF;
}

.network-onboarding-step-indicator-skipped {
    background: #FFFFFF;
    color: #9F9F9F;
    border: 1.5px dashed #DEE2E6;
}

.network-onboarding-step-title-block {
    flex: 1 1 auto;
    min-width: 0;
}

.network-onboarding-step-title {
    color: var(--kt-fg-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.network-onboarding-step-subtitle {
    color: var(--kt-fg-2);
    font-size: 13px;
    margin-top: 2px;
}

.network-onboarding-step-status {
    flex-shrink: 0;
    margin-left: 8px;
}

.network-onboarding-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.network-onboarding-status-pill-done {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.network-onboarding-status-pill-skip {
    background: #F2F4F8;
    color: var(--kt-fg-3);
}

.network-onboarding-status-pill-pending {
    background: var(--kt-warning-pale);
    color: var(--kt-warning);
}

.network-onboarding-status-pill-premium {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
}

.network-onboarding-step-body {
    padding: 8px 4px 4px;
    color: var(--kt-fg-1);
    background: #FFFFFF;
}

.network-onboarding-panels .mud-expansion-panel,
.network-onboarding-panels .mud-collapse-container,
.network-onboarding-panels .mud-expand-panel-content.mud-expand-panel-gutters {
    background: #FFFFFF;
}

.network-onboarding-field-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.network-onboarding-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.network-onboarding-field-label {
    font-size: 19px;
    font-weight: 500;
    color: var(--kt-fg-2);
    margin: 0;
}

.network-onboarding-subscription-field {
    margin-bottom: 24px;
}

.network-onboarding-subscription-select {
    width: 100%;
    max-width: 360px;
}

.network-onboarding-toggle.mud-toggle-group {
    width: auto;
    min-width: 0;
    display: inline-flex;
    background: var(--kt-bg-subtle);
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.network-onboarding-toggle .mud-toggle-item {
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--kt-fg-1);
    background: transparent;
    text-transform: none;
}

.network-onboarding-toggle .mud-toggle-item:not(.mud-toggle-item-selected):hover {
    background: rgba(11, 94, 216, 0.06);
    color: var(--kt-brand-blue);
}

.network-onboarding-toggle .mud-toggle-item.mud-toggle-item-selected {
    background: #FFFFFF;
    color: var(--kt-brand-blue);
    box-shadow: 0 1px 2px rgba(23, 29, 34, 0.10);
}

.network-onboarding-toggle .mud-toggle-item.mud-toggle-item-selected:hover {
    background: #FFFFFF;
    color: var(--kt-brand-blue);
}

.network-onboarding-step-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--kt-border);
}

@media (max-width: 900px) {
    .network-onboarding-page {
        padding: 14px 16px 40px;
    }

    .network-onboarding-header {
        flex-direction: column;
        align-items: stretch;
    }

    .network-onboarding-progress-strip {
        flex-wrap: wrap;
        gap: 14px;
    }

    .network-onboarding-progress-divider {
        display: none;
    }

    .network-onboarding-progress-spacer {
        display: none;
    }

    .network-onboarding-progress-cell-end {
        text-align: left;
    }
}

/* =================== File download / copy rows =================== */

.kt-form-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.kt-field-heading {
    font-size: 15px;
    font-weight: 500;
    color: var(--kt-fg-1);
    margin-bottom: 8px;
}

.kt-file-card,
.kt-input-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 58px;
    padding: 10px 16px;
    border: 1px solid var(--kt-border);
    border-radius: 10px;
}

.kt-file-card {
    background: var(--kt-bg-subtle);
}

.kt-input-card {
    background: #FFFFFF;
    border-color: var(--kt-border-input);
}

.kt-file-card-icon {
    font-size: 20px;
    color: var(--kt-fg-1);
    flex-shrink: 0;
}

.kt-file-card-info {
    flex: 1;
    min-width: 0;
}

.kt-file-card-name {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: 500;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

/* Like .kt-file-card-name but for product names rather than file names and URLs, which are the
   only things that want the monospace treatment. */
.kt-file-card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

.kt-file-card-meta {
    font-size: 12px;
    color: var(--kt-fg-3);
    margin-top: 2px;
}

.kt-input-card-value {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

.kt-input-card-value-empty {
    color: var(--kt-fg-3);
}

/* Layout only: the button keeps whatever Bootstrap variant it is given, so this must not set
   background, border-color or color or it would silently cancel the variant. */
.kt-card-action {
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: 8px;
}

/* A primary card action can be an anchor, and the global `a` rule sets its colour with
   !important, so the label needs the same weight to stay readable on the primary fill. */
.kt-card-action.btn-primary {
    color: #FFFFFF !important;
}

/* Subtle variant for the secondary actions on a card, such as copy and show/hide. */
.kt-card-action.btn-outline-secondary {
    background: #FFFFFF;
    border-color: var(--kt-border-input);
    color: var(--kt-fg-1);
}

.kt-card-action.btn-outline-secondary:hover {
    background: var(--kt-bg-page);
    border-color: var(--kt-border-input);
    color: var(--kt-fg-1);
}

/* =================== MDM Setup Guide (collapsible per MDM) =================== */

.kt-mdm-guide {
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    background: var(--kt-paper-bg);
    margin-bottom: 12px;
}

.kt-mdm-guide--expanded {
    border-color: var(--kt-border-input);
}

.kt-mdm-guide-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
}

.kt-mdm-guide-chevron {
    flex-shrink: 0;
    width: 12px;
    font-size: 12px;
    color: var(--kt-fg-2);
}

.kt-mdm-guide-heading {
    flex: 1;
    min-width: 0;
}

.kt-mdm-guide-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--kt-fg-1);
}

.kt-mdm-guide-summary {
    font-size: 12px;
    color: var(--kt-fg-2);
    margin-top: 2px;
}

.kt-mdm-guide-body {
    background: var(--kt-paper-bg);
    border-top: 1px solid var(--kt-border);
    border-radius: 0 0 10px 10px;
    padding: 16px;
}

/* Bordered white list of reference values inside an expanded guide. */
.kt-value-list {
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    background: var(--kt-paper-bg);
    overflow: hidden;
}

.kt-value-row {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--kt-border);
}

.kt-value-row:last-child {
    border-bottom: 0;
}

/* The RADIUS names row carries its own table, so it drops the label column. */
.kt-value-row--full {
    display: block;
}

.kt-value-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--kt-fg-1);
}

.kt-value-mono {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

.kt-value-meta {
    font-size: 12px;
    color: var(--kt-fg-3);
}

.kt-value-url {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--kt-brand-blue);
    word-break: break-all;
}

.kt-value-password {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--kt-fg-1);
}

.kt-value-empty {
    font-size: 13px;
    color: var(--kt-fg-3);
}

/* RADIUS server-name sub-table. */
.kt-radius-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
}

.kt-radius-head-text {
    flex: 1;
    min-width: 0;
}

.kt-radius-helper {
    font-size: 12px;
    color: var(--kt-fg-2);
    margin-top: 2px;
}

.kt-radius-table {
    border: 1px solid var(--kt-border);
    border-radius: 7px;
    overflow: hidden;
}

.kt-radius-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--kt-border);
}

.kt-radius-row:last-child {
    border-bottom: 0;
}

.kt-radius-row-header {
    background: var(--kt-bg-subtle);
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-fg-2);
}

/* Zebra striping skips the header, which is the first row of the table. */
.kt-radius-row:not(.kt-radius-row-header):nth-of-type(even) {
    background: var(--kt-bg-page);
}

.kt-radius-name {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--kt-fg-1);
    word-break: break-all;
}

/* Text-only copy affordance for the rows of a sub-table. */
.kt-copy-link {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-brand-blue);
    white-space: nowrap;
}

/* =================== Networking Equipment Step =================== */

/* Tinted "start here" band that leads the step, same role as step 4's guide list. */
.kt-start-band {
    background: var(--kt-brand-blue-pale);
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    padding: 18px;
}

.kt-step-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-brand-blue);
}

.kt-step-heading {
    font-size: 15px;
    font-weight: 600;
    color: var(--kt-fg-1);
    margin-top: 2px;
}

.kt-step-helper {
    font-size: 13px;
    color: var(--kt-fg-2);
    margin-top: 2px;
}

.kt-vendor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 900px) {
    .kt-vendor-grid {
        grid-template-columns: 1fr;
    }
}

.kt-vendor-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border);
    border-radius: 7px;
    padding: 10px 14px;
}

.kt-vendor-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--kt-fg-1);
}

.kt-vendor-footnote {
    font-size: 12px;
    color: var(--kt-fg-2);
    margin-top: 12px;
}

/* Read-only server reference, grouped by location. */
.kt-server-card {
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    background: var(--kt-paper-bg);
    padding: 16px;
}

.kt-server-location {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.kt-server-location-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--kt-fg-1);
}

.kt-server-location-count {
    font-size: 12px;
    color: var(--kt-fg-3);
}

.kt-server-ip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

@media (max-width: 900px) {
    .kt-server-ip-grid {
        grid-template-columns: 1fr;
    }
}

.kt-server-ip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--kt-bg-page);
    border: 1px solid var(--kt-border);
    border-radius: 7px;
    padding: 9px 12px;
}

.kt-server-ip-value {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

.kt-server-ports {
    border-top: 1px solid var(--kt-border);
    padding-top: 12px;
    font-size: 12px;
    color: var(--kt-fg-2);
}

/* RadSec CA certificate row, shown instead of the classic RADIUS client list. */
.kt-radsec-cert {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    background: var(--kt-paper-bg);
    padding: 14px 16px;
    margin-top: 12px;
}

.kt-radsec-cert-text {
    flex: 1;
    min-width: 0;
}

.kt-radsec-cert-meta {
    text-align: right;
    font-size: 12px;
    color: var(--kt-fg-3);
}

/* Allowed client table for classic RADIUS. */
.kt-client-table {
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    overflow: hidden;
}

.kt-client-row {
    display: grid;
    grid-template-columns: 190px 1fr 1fr;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--kt-border);
}

.kt-client-row:last-child {
    border-bottom: 0;
}

.kt-client-row-header {
    background: var(--kt-bg-subtle);
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-fg-2);
}

.kt-client-row:not(.kt-client-row-header):nth-of-type(even) {
    background: var(--kt-bg-page);
}

.kt-client-ip {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

.kt-client-secret {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border-input);
    border-radius: 7px;
    padding: 6px 10px;
}

.kt-client-secret-value {
    flex: 1;
    min-width: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--kt-fg-1);
    overflow: hidden;
}

.kt-client-description {
    font-size: 13px;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

/* =================== Network Profile Card =================== */

.kt-np-card {
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    background: white;
    overflow: hidden;
}

.kt-np-card--expanded {
    border-color: var(--kt-brand-blue);
    box-shadow: 0 4px 16px rgba(11,94,216,0.08);
}

.kt-np-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}

.kt-np-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.kt-np-avatar--active {
    background: var(--kt-brand-blue);
    color: white;
}

.kt-np-header-info {
    flex: 1;
    min-width: 0;
}

.kt-np-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--kt-fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kt-np-summary {
    font-size: 17px;
    color: var(--kt-fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kt-np-chevron {
    font-size: 19px;
    color: var(--kt-fg-3);
    flex-shrink: 0;
}

.kt-np-body {
    padding: 18px;
    border-top: 1px solid var(--kt-border);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.kt-np-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-np-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--kt-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kt-np-section-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.kt-np-section-key {
    color: var(--kt-fg-3);
    min-width: 80px;
}

.kt-np-section-value {
    color: var(--kt-fg-1);
    font-weight: 500;
}

/* Footer bar inside an expanded network profile card */
.kt-np-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--kt-border);
}

/* =================== Server Certificate Card =================== */

/* Section heading with its explanatory note pushed to the far side of the same row. */
.kt-servercert-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.kt-servercert-heading-title {
    margin: 0;
}

.kt-servercert-heading-note {
    font-size: 13px;
    color: var(--kt-fg-2);
}

.kt-servercert-card {
    border: 1px solid var(--kt-border-input);
    border-radius: 6px;
    background: white;
    box-shadow: var(--kt-shadow-card);
    overflow: hidden;
}

.kt-servercert-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 18px;
}

.kt-servercert-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 300px;
}

.kt-servercert-subject {
    font-size: 15px;
    font-weight: 500;
    color: var(--kt-fg-1);
}

.kt-servercert-thumbprint {
    font-family: var(--kt-font-mono);
    font-size: 12px;
    color: var(--kt-fg-2);
    overflow-wrap: anywhere;
}

.kt-servercert-hint {
    font-size: 13px;
    color: var(--kt-fg-2);
}

.kt-servercert-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Bootstrap's outline hover fills the button solid, which is heavier than this card wants for a
   secondary action next to a filled primary one, so it tints instead. */
.kt-servercert-button.btn-outline-primary:hover,
.kt-servercert-button.btn-outline-primary:focus {
    background: var(--kt-info-pale);
    color: var(--kt-brand-blue);
}

/* Status pill: one shape, four fills. The dot inherits the pill's text color. */
.kt-servercert-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    white-space: nowrap;
}

.kt-servercert-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.kt-servercert-badge--valid {
    background: var(--kt-success-pale);
    border-color: var(--kt-success-border);
    color: var(--kt-success);
}

.kt-servercert-badge--expiring {
    background: var(--kt-warning-pale);
    border-color: var(--kt-warning-border);
    color: var(--kt-warning);
}

.kt-servercert-badge--expired {
    background: var(--kt-danger-pale);
    border-color: var(--kt-danger);
    color: var(--kt-danger);
}

.kt-servercert-badge--none {
    background: var(--kt-bg-subtle);
    border-color: var(--kt-border-input);
    color: var(--kt-fg-2);
}

/* Metadata strip: label/value pairs that wrap to a second line on narrow viewports. */
.kt-servercert-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 28px;
    padding: 10px 18px;
    border-top: 1px solid var(--kt-border);
    background: white;
    font-size: 13px;
    color: var(--kt-fg-1);
}

.kt-servercert-meta-label {
    color: var(--kt-fg-2);
}

.kt-servercert-banner {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 18px;
    border-top: 1px solid transparent;
    font-size: 13px;
    line-height: 1.45;
}

.kt-servercert-banner--warning {
    background: var(--kt-warning-pale);
    border-top-color: var(--kt-warning-border);
    color: var(--kt-warning);
}

.kt-servercert-banner--info {
    background: var(--kt-info-pale);
    border-top-color: var(--kt-info-border);
    color: var(--kt-info);
}

/* "Add a Wi-Fi Profile" picker: the policy dropdown grows to fill the row and the
   Create button sits flush next to it, aligned to the input (not to the helper text
   underneath). Wraps below the select on narrow viewports. */
.kt-wifi-new-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.kt-wifi-new-row__select {
    flex: 1 1 320px;
    min-width: 240px;
}

.kt-wifi-new-row__button {
    align-self: flex-start;
    margin-top: 8px;
    white-space: nowrap;
}

/* Explanatory line under a field, matching the helper text MudBlazor renders for its own inputs. */
.kt-field-helper-text {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--kt-fg-3);
}

/* Marks a local user that only exists on some of its RADIUS locations */
.kt-local-user-warning {
    color: var(--kt-warning);
}

/* Home region column in RADIUS server location grid — locked, not interactive */
.kt-region-home-wrapper {
    pointer-events: none;
    user-select: none;
}

/* HOME badge on the home region in RADIUS server location grid */
.kt-region-home-badge {
    color: var(--kt-brand-blue);
    font-size: 0.7em;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Partner billing pages (PartnerBilling / AdminPartnerBilling) */

.kt-partner-callout {
    border-left: 4px solid var(--kt-partner-owes);
    background: var(--kt-partner-owes-pale);
    border-radius: 6px;
}

.kt-partner-filter-bar {
    background: var(--kt-partner-owes-tint);
    border-radius: 16px;
}

.kt-partner-paper {
    background-color: var(--kt-paper-bg);
}

.kt-partner-summary-paper {
    background-color: var(--kt-paper-bg);
    min-height: 140px;
}

.kt-partner-summary-icon {
    width: 48px;
    height: 48px;
}

.kt-partner-helper-text {
    font-size: 0.8rem;
}

.kt-partner-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-badge-partner-owes {
    background: var(--kt-partner-owes);
    color: #fff;
}

.kt-badge-keytos-owes {
    background: var(--kt-keytos-owes);
    color: #fff;
}

/* ConnectToNetworkComponent */
.connect-card {
    max-width: 560px;
    padding: 1.75rem;
    background: #ffffff;
    border: 1px solid #e6e8eb;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

.tab-toggle {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: #eef1f4;
    border-radius: 10px;
}

.tab {
    flex: 1 1 0;
    padding: 0.55rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #667085;
    cursor: pointer;
}

.tab.active {
    background: #ffffff;
    color: #0b5d8f;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

/* DownloadWifiProfile: full-width tab toggle with icons + Recommended badge */
.wifi-tab-toggle {
    max-width: 940px;
}

.wifi-tab-toggle .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.wifi-page-subtitle {
    margin: 0.25rem 0 1.25rem;
    color: var(--kt-fg-2);
    font-size: 0.95rem;
}

.tab-badge {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* DownloadWifiProfile: section header with rounded icon chip */
.profile-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.profile-section-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
}

.profile-section-icon-muted {
    background: var(--kt-bg-subtle);
    color: var(--kt-fg-2);
}

.profile-section-desc {
    color: var(--kt-fg-2);
    font-size: 0.875rem;
    line-height: 1.5;
}

.os-badge {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.3rem 0.85rem;
    background: #e8f1fb;
    color: #1a4d7a;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
}

.connect-title {
    margin: 1rem 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 800;
    font-style: normal !important;
    color: #111827;
}

.connect-subtitle {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #667085;
}

.join-btn {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 10px;
    background: #0a6aa3;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(10, 106, 163, 0.4);
}

.join-btn:hover {
    background: #0a5f93;
    box-shadow: 0 2px 15px rgba(10, 106, 163, 0.5);
}

.store-badge-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

.store-badge {
    height: 52px;
    width: auto;
}

.secondary-btn {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border: 2px solid black;
    border-radius: 10px;
    background: #ffffff;
    color: black;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}

.secondary-btn:hover {
    background: #f9fafb;
}

/* Keep the border on focus/active (global `button:focus` sets border: none). */
.secondary-btn:focus,
.secondary-btn:active {
    border: 1px solid #d0d5dd;
    outline: none;
}

/* Same shape as .join-btn but outlined, so it reads clearly as the secondary action. */
.join-btn-outline {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border: 2px solid #0a6aa3;
    border-radius: 10px;
    background: transparent;
    color: #0a6aa3;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}

.join-btn-outline:hover {
    background: rgba(10, 106, 163, 0.06);
}

.join-btn-outline:focus,
.join-btn-outline:active {
    border: 2px solid #0a6aa3;
    outline: none;
}

/* "OR" separator with a rule on each side. */
.or-divider {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    color: #667085;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e4e7ec;
}

.or-divider::before {
    margin-right: 0.75rem;
}

.or-divider::after {
    margin-left: 0.75rem;
}

/* "Skip the manual setup" banner on the Distribute Network Profile page. */
.connect-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: #EBF5FF;
    color: #00577C;
    border-radius: 10px;
}

.connect-banner-icon {
    margin-top: 0.15rem;
    font-size: 1.1rem;
    color: #00577C;
}

.connect-banner strong {
    display: block;
    margin-bottom: 0.25rem;
}

.connect-banner p {
    margin-bottom: 0.75rem;
    color: #00577C;
}

.connect-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: #ffffff;
    color: #00577C;
    border: 1px solid #cfe4f7;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 87, 124, 0.12);
}

.connect-banner-btn:hover {
    color: #00577C;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 87, 124, 0.2);
}

.connect-banner-btn .fa-arrow-right {
    font-size: 0.85em;
}

.connect-subtitle code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: none;
    color: inherit;
    padding: 0;
}

.signed-in-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #667085;
}

.signed-in-status {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
}

.signed-in-status i {
    flex: none;
    margin-top: 0.15rem;
    color: #12b76a;
}

.signed-in-email {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.link-btn {
    padding: 0;
    border: none;
    background: none;
    color: #51617b;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.signed-in-sep {
    color: #98a2b3;
}

.back-arrow {
    display: block;
    margin-top: 1.25rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #667085;
    cursor: pointer;
}

.email-input {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 1rem;
    color: #344054;
}

.email-input::placeholder {
    color: #98a2b3;
}

.email-input.input-error {
    border-color: #f04438;
    background: #fef3f2;
}

.email-input.input-error::placeholder {
    color: #d0797b !important;
}

.error-text {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: #d92d20;
}

.file-name {
    margin: 0.75rem 0 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    color: #667085;
}

/* DeviceSelectorComponent */
.device-selector {
    margin-top: 1rem;
}

.device-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.6rem;
}

.device-chip {
    padding: 0.55rem 1.4rem;
    border: 1px solid #e6e8eb;
    border-radius: 999px;
    background: #ffffff;
    color: #98a2b3;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.device-chip.selected {
    border: 2px solid #0b5d8f;
    background: #e8f1fb;
    color: #0b5d8f;
    font-weight: 700;
}

.another-os-prompt {
    margin-top: 1.5rem;
    text-align: center;
    color: #667085;
    font-size: 1.15rem;
}

/* Public download page (PublicDownloadLayout + TenantDownload) */
.public-download-page {
    background: #f8f9fd;
}

.public-download-shell {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.public-college {
    display: flex;
    align-items: center;
}

.public-college-name {
    color: #162438;
    font-size: 1rem;
    font-weight: 700;
}

.public-college-logo {
    max-height: 2.5rem;
    width: auto;
}

.public-powered-by {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #98a2b3;
    font-size: 0.9rem;
}

.public-powered-by-logo-full {
    height: 1.4rem;
    width: auto;
}

.public-powered-by-logo-k {
    display: none;
    height: 1.4rem;
    width: auto;
}

@media (max-width: 640px) {
    .public-powered-by-logo-full {
        display: none;
    }

    .public-powered-by-logo-k {
        display: inline-block;
    }
}

.public-download-shell .connect-card {
    margin-left: auto;
    margin-right: auto;
}

/* Invalid-tenant message occupies the same centered slot as the connect card. */
.public-download-invalid {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ========== Page heading ========== */

/* A page title and its one-line explanation, sized well below the browser default for h1 so the
   heading does not dwarf the card titles underneath it. */
.kt-page-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kt-page-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--kt-fg-1);
}

.kt-page-description {
    margin: 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--kt-fg-3);
    text-wrap: pretty;
}

/* ========== Shield Local Users ========== */

.kt-localusers-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--kt-fg-1);
}

/* The username field grows, the password shell grows twice as fast because its value is monospace and
   long, and the primary action keeps its width and wraps to its own line rather than squeezing them. */
.kt-localusers-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.kt-localusers-field-username {
    flex: 1 1 220px;
    min-width: 0;
}

.kt-localusers-field-password {
    flex: 2 1 300px;
    min-width: 0;
}

.kt-localusers-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kt-fg-2);
}

.kt-localusers-required {
    color: var(--kt-danger);
}

/* Two globals have to be undone here: the .form-control rule adds flex and side margins for the
   inline-diff layout it was written for, and the bare `input` rule sets font-size with !important —
   which is why matching the intended 14px needs !important of its own rather than specificity. */
.kt-localusers-input.form-control {
    height: 42px;
    flex: none;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--kt-border-input);
    border-radius: 8px;
    font-size: 14px !important;
    color: var(--kt-fg-1);
}

.kt-localusers-input.form-control:focus {
    border-color: var(--kt-brand-blue-accent);
    box-shadow: var(--kt-focus-ring);
}

.kt-localusers-input.form-control::placeholder {
    color: var(--kt-fg-4);
}

/* One control that reads as an input but holds a generated value plus three actions. The value is
   never editable: it is minted client-side and, once saved, can only be read back from the vault for
   administrator-created users — so reveal, regenerate and copy are the whole interaction. */
.kt-localusers-password {
    display: flex;
    align-items: center;
    height: 42px;
    gap: 4px;
    padding-left: 12px;
    border: 1px solid var(--kt-border-input);
    border-radius: 8px;
    background: var(--kt-paper-bg);
    overflow: hidden;
}

.kt-localusers-password:focus-within {
    border-color: var(--kt-brand-blue-accent);
    box-shadow: var(--kt-focus-ring);
}

.kt-localusers-password-value {
    flex: 1;
    min-width: 0;
    font-family: var(--kt-font-mono);
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: var(--kt-fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-localusers-ghost-button {
    width: 32px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--kt-fg-3);
    transition: background-color 120ms ease, color 120ms ease;
}

.kt-localusers-ghost-button:hover:not(:disabled) {
    background: var(--kt-fill-muted);
    color: var(--kt-fg-1);
}

/* Copy sits flush in the shell's right edge, so it covers the border there instead of sitting inside
   it: stretching alone only reaches the content box, so the negative margins take it over the shell's
   own 1px border on three sides. The shell clips it back to the rounded corner. */
.kt-localusers-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;
    align-self: stretch;
    margin: -1px -1px -1px 0;
    padding: 0 14px;
    border: 0;
    border-left: 1px solid var(--kt-border);
    background: var(--kt-bg-page);
    color: var(--kt-fg-2);
    font-size: 13px;
    font-weight: 600;
    transition: background-color 120ms ease, color 120ms ease;
}

.kt-localusers-copy-button:hover:not(:disabled) {
    background: var(--kt-fill-muted);
}

.kt-localusers-copy-button--copied {
    color: var(--kt-success);
}

.kt-localusers-add-button {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Inline notice for something the administrator has to act on before leaving the form, rather than
   the gray helper text it replaced — which read as optional detail. */
.kt-localusers-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--kt-info-border);
    border-radius: 8px;
    background: var(--kt-info-pale);
    color: var(--kt-info);
    font-size: 12.5px;
    line-height: 1.5;
}

.kt-localusers-callout-icon {
    flex: none;
    margin-top: 2px;
    color: var(--kt-brand-blue);
}

.kt-localusers-callout p {
    margin: 0;
}

/* ---------- Users table ---------- */

.kt-localusers-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.kt-localusers-table-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kt-localusers-count {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--kt-fill-muted);
    color: var(--kt-fg-3);
    font-size: 12px;
    font-weight: 600;
}

.kt-localusers-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 280px;
    max-width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--kt-border-input);
    border-radius: 8px;
    background: var(--kt-paper-bg);
}

.kt-localusers-search:focus-within {
    border-color: var(--kt-brand-blue-accent);
}

.kt-localusers-search-icon {
    flex: none;
    font-size: 13px;
    color: var(--kt-fg-4);
}

/* Borderless because the wrapper draws the border. font-size carries !important for the same reason
   as the form input above: the bare `input` rule sets it that way globally. */
.kt-localusers-search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13.5px !important;
    color: var(--kt-fg-1);
}

.kt-localusers-search-input::placeholder {
    color: var(--kt-fg-4);
}

/* Keeps MudBlazor's table structure and gives it the card treatment used elsewhere on the page: a
   tinted column-header band and footer, uppercase column labels, and a hover tint per row.
   The selectors are deliberately long. MudBlazor.min.css loads *after* style.css in index.html, and
   it styles cells through `.mud-table-root .mud-table-head .mud-table-cell` (three classes) and
   padding through `.mud-table-dense * .mud-table-row .mud-table-cell` (four), so anything shorter
   than four classes plus an element loses the cascade rather than winning it. */
.kt-localusers-table.mud-table {
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    box-shadow: var(--kt-shadow-card);
}

.kt-localusers-table div.mud-toolbar.mud-toolbar-gutters.mud-table-toolbar {
    height: auto;
    min-height: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--kt-border-subtle);
}

.kt-localusers-table .mud-table-root .mud-table-head th.mud-table-cell {
    padding: 10px 20px;
    background: var(--kt-surface-subtle);
    border-bottom: 1px solid var(--kt-border-subtle);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kt-fg-3);
    max-width: none;
}

.kt-localusers-table .mud-table-root .mud-table-body td.mud-table-cell {
    padding: 14px 20px;
    border-bottom: 1px solid var(--kt-fill-muted);
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--kt-fg-1);
    max-width: none;
    white-space: normal;
}

.kt-localusers-table .mud-table-root .mud-table-body tr.mud-table-row:hover td.mud-table-cell {
    background: var(--kt-surface-subtle);
}

.kt-localusers-table div.mud-toolbar.mud-toolbar-gutters.mud-table-pagination-toolbar {
    height: auto;
    min-height: 0;
    padding: 12px 20px;
    background: var(--kt-surface-subtle);
    border-top: 1px solid var(--kt-border-subtle);
    font-size: 13px;
    color: var(--kt-fg-3);
}

/* table.mud-table-root is table-layout: fixed globally, so the columns need explicit shares. */
.kt-localusers-col-user {
    width: 24%;
}

.kt-localusers-col-managed {
    width: 15%;
}

.kt-localusers-col-expiry {
    width: 15%;
}

.kt-localusers-col-password {
    width: 26%;
}

.kt-localusers-col-actions {
    width: 20%;
}

/* Reads as a table with nothing in it rather than as a gap under the column headers. */
.kt-localusers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 52px 20px;
}

.kt-localusers-empty-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-radius: 12px;
    background: var(--kt-fill-muted);
    color: var(--kt-fg-4);
    font-size: 18px;
}

.kt-localusers-empty-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--kt-fg-2);
}

.kt-localusers-empty-text {
    margin: 0;
    max-width: 380px;
    font-size: 13px;
    color: var(--kt-fg-3);
    text-align: center;
    text-wrap: pretty;
}

/* Who owns the account, as a pill: an administrator-created user can have its password read back, a
   self-service one cannot, so the distinction drives what the row offers. */
.kt-localusers-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.kt-localusers-pill--admin {
    background: var(--kt-brand-blue-pale);
    border-color: var(--kt-info-border);
    color: var(--kt-brand-blue);
}

.kt-localusers-pill--selfservice {
    background: var(--kt-fill-muted);
    border-color: var(--kt-border);
    color: var(--kt-fg-2);
}

.kt-localusers-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kt-localusers-revealed {
    font-family: var(--kt-font-mono);
    font-size: 13px;
    color: var(--kt-fg-1);
    word-break: break-all;
}

.kt-localusers-muted {
    font-size: 13px;
    color: var(--kt-fg-3);
}