@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;
    --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);
}

/* 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;
}