:root {
    --mss-primary: #0875c1;
    --mss-legacy-accent: #00c0ef;
    --mss-legacy-border: #d2d6de;
    --mss-legacy-sidebar: #f9fafc;
}

.mss-login-page {
    min-height: 100vh;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 50% 18%, rgb(255 255 255 / 92%), transparent 34rem),
        #eef1f4;
}

.mss-login-box {
    width: min(100%, 28rem);
}

.mss-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1;
}

.mss-corporate-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.35rem;
}

.mss-corporate-brand img {
    display: block;
    width: 11.5rem;
    height: auto;
}

.mss-application-brand {
    color: #252a30;
    font-size: clamp(1.7rem, 5vw, 2.15rem);
    letter-spacing: -0.04em;
}

.mss-application-brand strong {
    font-weight: 700;
}

.mss-application-brand span {
    color: #5b6269;
    font-weight: 300;
}

.mss-login-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    border: 1px solid #d7dce1;
    border-radius: 0.35rem;
    box-shadow: 0 0.85rem 2.6rem rgb(39 54 68 / 14%);
}

.mss-login-card::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: 0.28rem;
    content: "";
    background: linear-gradient(90deg, #008bd2 0%, #3c9ca4 52%, #f4b400 100%);
}

.mss-login-card .card-header {
    padding: 1.65rem 2rem 1.15rem;
    background: #fff;
    border-bottom: 0;
}

.mss-login-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.85rem;
    color: var(--mss-primary);
    background: #edf7fc;
    border-radius: 50%;
    font-size: 1.35rem;
}

.mss-login-card .card-header h1 {
    color: #252a30;
    font-weight: 500;
}

.mss-login-card .login-card-body {
    padding: 0.4rem 2rem 2rem;
}

.mss-login-card .login-box-msg {
    max-width: 21rem;
    margin: 0 auto 1.75rem;
    padding: 0;
    color: #66717b;
    line-height: 1.5;
}

.mss-login-form .input {
    margin: 0;
}

.mss-login-form label {
    display: block;
    margin-bottom: 0.45rem;
    color: #303841;
    font-size: 0.9rem;
    font-weight: 600;
}

.mss-login-form .form-control {
    min-height: 3.25rem;
    padding: 0.75rem 0.9rem;
    color: #263746;
    background: #fff;
    border-color: #cbd3da;
    border-radius: 0.25rem;
    font-size: 1rem;
}

.mss-login-form .form-control:focus {
    border-color: var(--mss-legacy-accent);
    box-shadow: 0 0 0 0.2rem rgb(0 192 239 / 16%);
}

.mss-login-submit {
    min-height: 3.15rem;
    color: #fff;
    background: var(--mss-legacy-accent);
    border-color: var(--mss-legacy-accent);
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}

.mss-login-submit:hover,
.mss-login-submit:focus-visible {
    color: #fff;
    background: #00acd6;
    border-color: #00a4cc;
}

@media (max-width: 575.98px) {
    .mss-login-page {
        justify-content: flex-start;
        padding-top: 2.25rem;
    }

    .mss-login-card .card-header,
    .mss-login-card .login-card-body {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

.brand-link {
    text-decoration: none;
}

.app-content-header h1 {
    font-size: 1.5rem;
    line-height: 1.3;
}

.admin-version-link {
    white-space: nowrap;
}

.admin-footer-reference p {
    margin: 0;
}

.admin-footer-reference a {
    font-weight: 600;
}

.settings-status-table th {
    width: 42%;
}

.app-sidebar .nav-link.active {
    background-color: var(--mss-legacy-accent);
    color: #fff;
}

.legacy-sidebar {
    background: var(--mss-legacy-sidebar);
    color: #444;
}

.legacy-sidebar .sidebar-brand,
.legacy-sidebar .user-panel {
    background: #fff;
}

.legacy-sidebar .brand-link,
.legacy-sidebar .nav-link,
.legacy-sidebar .nav-header,
.legacy-sidebar .input-group-text {
    color: #444;
}

.legacy-sidebar .nav-link:not(.active):not(.disabled):hover {
    background: #f0f1f2;
    color: #222;
}

.legacy-sidebar .nav-treeview .nav-link {
    padding-left: 2rem;
}

.legacy-sidebar .sidebar-search .form-control,
.legacy-sidebar .sidebar-search .input-group-text {
    background: #fff;
    border-color: #d2d6de;
}

.small-box .small-box-icon {
    font-size: 4.25rem;
}

.nav-link.disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.user-avatar {
    font-size: 2.25rem;
    line-height: 1;
}

.user-panel .min-w-0 {
    min-width: 0;
}

.user-panel .text-success {
    font-size: 0.78rem;
}

.user-panel .bi-circle-fill {
    font-size: 0.48rem;
}

.legacy-calendar-placeholder {
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
}

.table th,
.table td {
    vertical-align: middle;
}

.legacy-card {
    border: 1px solid var(--mss-legacy-border);
    border-top: 3px solid var(--mss-legacy-accent);
    border-radius: 0;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}

.legacy-card > .card-header,
.legacy-card > form > .card-header {
    background: #fff;
    border-bottom-color: #eee;
    min-height: 3rem;
}

.legacy-index-heading {
    min-height: 3.25rem;
}

.legacy-index-heading::after {
    display: none;
}

.dt-container .dt-layout-row {
    margin: 0;
    padding: 0.75rem 1rem;
}

.dt-container .dt-layout-row:first-child {
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

.dt-container .dt-layout-row:last-child {
    min-height: 3.25rem;
    background: #fff;
    border-top: 1px solid #ddd;
}

.dt-container .dt-search label,
.dt-container .dt-length label {
    font-size: 0.875rem;
    font-weight: 400;
}

.dt-container .dt-search input {
    min-width: min(24rem, 55vw);
}

.legacy-card .card-title {
    font-size: 1.15rem;
    font-weight: 400;
}

.legacy-table {
    border: 1px solid #eee;
}

.legacy-table > :not(caption) > * > * {
    border-right: 1px solid #eee;
    padding: 0.7rem 0.65rem;
}

.legacy-table thead th {
    background: #fff;
    color: #333;
    font-weight: 700;
    white-space: nowrap;
}

.legacy-table tbody tr:nth-of-type(odd) > * {
    background: #f9f9f9;
}

.legacy-table tbody tr:nth-of-type(even) > * {
    background: #fff;
}

.legacy-form .form-row {
    margin-bottom: 1rem;
}

.legacy-form .col-form-label {
    font-weight: 700;
    text-align: right;
}

.legacy-detail-table th {
    width: 28%;
    background: #f9f9f9;
}

.media-card {
    border-color: #ddd;
    border-radius: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

.media-preview,
.media-detail-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f4f4f4;
    color: #d73925;
    text-decoration: none;
}

.media-preview {
    min-height: 10rem;
    border-bottom: 1px solid #ddd;
}

.media-preview img,
.media-detail-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media-document-icon {
    font-size: 4rem;
    line-height: 1;
}

.media-detail-preview {
    min-height: 22rem;
    border: 1px solid #ddd;
}

.media-manager-toolbar {
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

.media-manager .card-title {
    float: none;
}

#media-elfinder {
    min-height: 34rem;
}

#media-elfinder.elfinder {
    border: 0;
    border-radius: 0;
}

[data-media-picker-open] {
    cursor: pointer;
}

.media-folder-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.25rem;
    padding: 0.8rem 1rem;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
}

.media-folder-card:hover,
.media-folder-card:focus-visible {
    color: var(--mss-primary);
    background: #f8fbfd;
    border-color: var(--mss-legacy-accent);
}

.media-folder-card .bi-folder-fill {
    color: #f4b400;
    font-size: 2rem;
}

.legacy-actions .btn {
    min-width: 2.25rem;
}

.wysiwyg-editor {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.wysiwyg-editor:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.4rem;
    background: #f8f9fa;
    border-bottom: 1px solid var(--bs-border-color);
}

.wysiwyg-toolbar .btn {
    min-width: 2.1rem;
}

.wysiwyg-content {
    min-height: var(--wysiwyg-min-height, 10rem);
    padding: 0.75rem;
    overflow: auto;
    outline: 0;
}

.wysiwyg-content > :last-child {
    margin-bottom: 0;
}

.color-swatch {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    background: var(--swatch);
    border: 1px solid #aaa;
}

.content-preview {
    min-width: 18rem;
    max-width: 36rem;
}

.content-long {
    white-space: normal;
    line-height: 1.55;
}

.form-element-picker .list-group-item {
    font-size: .9rem;
    padding: .7rem .9rem;
}

.form-builder-elements {
    min-height: 12rem;
}

.node-chip > .btn:first-child {
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-preview {
    max-width: 52rem;
}

@media (max-width: 575.98px) {
    .legacy-form .col-form-label {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}