canvas,
iframe,
img,
picture,
svg,
video {
    max-inline-size: 100%
}

.modern-skin .DnnModule,
.modern-skin-menu-item,
.modern-skin-menu-toggle-icon,
.modern-skin-newsletter-control,
.skin-tabs,
sub,
sup {
    position: relative
}

.modern-skin table,
table {
    border-spacing: 0;
    border-collapse: collapse
}

html {
    scroll-behavior: smooth;
    font-size: clamp(.73rem, .5vw + .73rem, 1rem);
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%
}

/* @font-face {
    font-family: IranSans;
    src: url('/Portals/0/ThemePluginPro/uploads/2024/3/25/IRANSansXFaNum-Regular.woff2') format('woff2'), url('/Portals/0/ThemePluginPro/uploads/2024/3/25/IRANSansXFaNum-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: IranSans;
    src: url('/Portals/0/ThemePluginPro/uploads/2024/3/25/IRANSansXFaNum-Bold.woff2') format('woff2'), url('/Portals/0/ThemePluginPro/uploads/2024/3/25/IRANSansXFaNum-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap
} */
@font-face {
    font-family: Vazir;
    font-style: normal;
    font-weight: bold;
    src: url('./assets/fonts/vazirmatn/Vazirmatn-UI-FD-SemiBold.woff2') format('woff2');
        font-display: swap

}

@font-face {
    font-family: Vazir;
    font-style: normal;
    font-weight: 400;
    src: url('./assets/fonts/vazirmatn/Vazirmatn-UI-FD-Bold.woff2') format('woff2');
        font-display: swap

}

@font-face {
    font-family: Vazir;
    font-style: normal;
    font-weight: normal;
    src: url('./assets/fonts/vazirmatn/Vazirmatn-UI-FD-Regular.woff2') format('woff2');
        font-display: swap

}

.rtl {
    direction: rtl
}

:root {
    --skin-color-navy-950: #23072f;
    --skin-color-navy-900: #351044;
    --skin-color-navy-800: #4b1a62;
    --skin-color-blue-700: #531b70;
    --skin-color-blue-600: #652585;
    --skin-color-blue-500: #7b369b;
    --skin-color-blue-100: #f4edf7;
    --skin-color-gold-700: #9f6f00;
    --skin-color-gold-600: #d49700;
    --skin-color-gold-500: #f4b400;
    --skin-color-gold-100: #fff7dc;
    --skin-color-brand: var(--skin-color-blue-600);
    --skin-color-brand-strong: var(--skin-color-navy-800);
    --skin-color-brand-soft: var(--skin-color-blue-100);
    --skin-color-accent: var(--skin-color-gold-600);
    --skin-color-bg: #faf9fb;
    --skin-color-surface: #ffffff;
    --skin-color-surface-raised: #ffffff;
    --skin-color-surface-muted: #f5f1f7;
    --skin-color-text: #211726;
    --skin-color-text-soft: #6e6373;
    --skin-color-border: #e6dfe9;
    --skin-color-danger: #b42318;
    --skin-color-success: #157347;
    --skin-color-warning: #9a6700;
    --site-font-family: "Vazir";
    --skin-font-sans: var(--site-font-family, "Vazirmatn"), Tahoma, ui-sans-serif, system-ui, sans-serif;
    --skin-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --skin-space-1: .25rem;
    --skin-space-2: .5rem;
    --skin-space-3: .75rem;
    --skin-space-4: 1rem;
    --skin-space-5: 1.25rem;
    --skin-space-6: 1.5rem;
    --skin-space-8: 2rem;
    --skin-space-10: 2.5rem;
    --skin-space-12: 3rem;
    --skin-radius-sm: .55rem;
    --skin-radius-md: .9rem;
    --skin-radius-lg: 1.25rem;
    --skin-radius-pill: 999rem;
    --skin-shadow-sm: 0 .2rem .8rem rgb(7 23 46 / .07);
    --skin-shadow-md: 0 1rem 3rem rgb(7 23 46 / .12);
    --skin-focus: 0 0 0 .22rem rgb(101 37 132 / .22);
    --skin-header-size: 4.75rem;
    --skin-content-size: 84rem;
    --skin-transition: 180ms cubic-bezier(.2, .8, .2, 1);
    --skin-color-on-brand: var(--skin-color-surface);
    --skin-color-on-dark: var(--skin-color-surface);
    --skin-color-overlay: color-mix(in srgb, var(--skin-color-navy-950) 88%, transparent);
    --skin-color-overlay-soft: color-mix(in srgb, var(--skin-color-navy-950) 58%, transparent);
    --skin-color-info: var(--skin-color-blue-600);
    --skin-color-info-soft: color-mix(in srgb, var(--skin-color-info) 10%, var(--skin-color-surface));
    --skin-color-success-soft: color-mix(in srgb, var(--skin-color-success) 10%, var(--skin-color-surface));
    --skin-color-warning-soft: color-mix(in srgb, var(--skin-color-warning) 12%, var(--skin-color-surface));
    --skin-color-danger-soft: color-mix(in srgb, var(--skin-color-danger) 10%, var(--skin-color-surface));
    --skin-color-border-strong: color-mix(in srgb, var(--skin-color-text) 22%, var(--skin-color-border));
    --skin-color-backdrop: color-mix(in srgb, var(--skin-color-navy-950) 72%, transparent);
    --skin-shadow-xs: 0 .125rem .4rem color-mix(in srgb, var(--skin-color-navy-950) 7%, transparent);
    --skin-shadow-lg: 0 1.5rem 4rem color-mix(in srgb, var(--skin-color-navy-950) 18%, transparent);
    --skin-shadow-brand: 0 .8rem 2rem color-mix(in srgb, var(--skin-color-brand) 24%, transparent);
    --skin-gradient-brand: linear-gradient(135deg, var(--skin-color-brand-strong), var(--skin-color-brand));
    --skin-gradient-accent: linear-gradient(135deg, var(--skin-color-accent), var(--skin-color-gold-700));
    --skin-gradient-page: radial-gradient(circle at 15% 15%, var(--skin-color-brand-soft), transparent 36%), var(--skin-color-bg);
    --skin-control-size: 3rem;
    --skin-content-narrow: 34rem;
    --skin-container-gutter: clamp(1rem, 3vw, 2rem);
    --skin-container-sm: 40rem;
    --skin-container-md: 56rem;
    --skin-container-lg: 72rem;
    --skin-container-xl: 84rem;
    --skin-color-primary: var(--skin-color-brand);
    --skin-color-primary-dark: var(--skin-color-brand-strong);
    --skin-color-secondary: var(--skin-color-accent);
    --skin-color-purple: #652584;
    --skin-color-yellow: #f4b400;
    --skin-header-size: 5.25rem;
    --skin-header-size-scrolled: 4.25rem;
    --skin-mobile-bottom-nav-size: 4.6rem;
    --skin-header-action-size: 2.75rem;
    --skin-header-action-bg: var(--skin-color-brand);
    --skin-header-action-bg-hover: var(--skin-color-brand-strong);
    --skin-header-action-fg: #fff;
    --skin-header-action-border: var(--skin-color-brand);
    --skin-header-action-border-hover: var(--skin-color-brand-strong);
    --skin-header-action-shadow: 0 .35rem .9rem rgb(101 37 132 / .16);
    --skin-header-action-shadow-hover: 0 .5rem 1.2rem rgb(101 37 132 / .24)
}

*,
::after,
::before {
    box-sizing: inherit
}

body,
form,
html {
    margin: 0;
    min-block-size: 100%
}

.modern-skin-header-identity,
body {
    padding: 0
}

[hidden] {
    display: none !important
}

iframe {
    border: 0
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit
}

[type=button],
[type=reset],
[type=submit],
button {
    appearance: button
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer
}

textarea {
    overflow: auto
}

hr {
    box-sizing: content-box;
    block-size: 0;
    overflow: visible
}

sub,
sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0
}

sup {
    inset-block-start: -.5em
}

sub {
    inset-block-end: -.25em
}

.modern-skin,
.modern-skin *,
.modern-skin ::after,
.modern-skin ::before {
    box-sizing: border-box
}

.modern-skin {
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--skin-color-text);
    background: var(--skin-color-bg);
    font-family: var(--skin-font-sans);
    font-size: 1rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased
}

.modern-skin :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {
    margin-block-start: 0
}

.modern-skin :where(h1, h2, h3, h4, h5, h6) {
    color: var(--skin-color-text);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -.025em;
    text-wrap: balance
}

.modern-skin h1 {
    font-size: clamp(1.85rem, 4vw, 3rem)
}

.modern-skin h2 {
    font-size: clamp(1.45rem, 2.7vw, 1.8rem)
}

.modern-skin h3 {
    font-size: clamp(1.15rem, 2vw, 1.25rem)
}

p {
    color: var(--home-surface-muted);
    text-wrap: pretty;
    margin-block-end: 0.5rem
}

.modern-skin a,
.modern-skin a:hover,
.modern-skin-account-links a:hover {
    color: var(--skin-color-brand-strong)
}

.modern-skin img,
.modern-skin svg,
.modern-skin video {
    display: block;
    max-block-size: 100%
}

.modern-skin a {
    text-decoration-thickness: .08em;
    text-underline-offset: .18em
}

.modern-skin :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 0;
    box-shadow: var(--skin-focus)
}

.modern-skin ::selection {
    color: #fff;
    background: var(--skin-color-brand)
}

.modern-skin :where(button, input, select, textarea) {
    font: inherit
}

.modern-skin :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding-block: .65rem;
    padding-inline: .85rem;
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-sm);
    color: var(--skin-color-text);
    background: var(--skin-color-surface);
    transition: border-color var(--skin-transition), box-shadow var(--skin-transition), background-color var(--skin-transition)
}

.modern-skin textarea {
    min-block-size: 7rem;
    resize: block
}

.modern-skin :where(input, select, textarea):hover {
    border-color: color-mix(in srgb, var(--skin-color-brand) 38%, var(--skin-color-border))
}

.modern-skin :where(input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: .6;
    background: var(--skin-color-surface-muted)
}

.modern-skin :where(input[type=checkbox], input[type=radio]) {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    accent-color: var(--skin-color-brand)
}

.modern-skin label {
    display: inline-block;
    margin-block-end: .4rem;
    color: var(--skin-color-text);
    font-weight: 650
}

.modern-skin :where(button, .dnnPrimaryAction, .dnnSecondaryAction, .CommandButton, a.CommandButton) {
    min-block-size: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding-block: .6rem;
    padding-inline: 1rem;
    border: 1px solid transparent;
    border-radius: var(--skin-radius-sm);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--skin-transition), background-color var(--skin-transition), border-color var(--skin-transition), transform var(--skin-transition), box-shadow var(--skin-transition)
}

.modern-skin :where(.dnnPrimaryAction, input.dnnPrimaryAction) {
    color: #fff;
    background: var(--skin-color-brand);
    border-color: var(--skin-color-brand)
}

.modern-skin :where(.dnnPrimaryAction, input.dnnPrimaryAction):hover {
    color: #fff;
    background: var(--skin-color-brand-strong);
    border-color: var(--skin-color-brand-strong);
    transform: translateY(-1px)
}

.modern-skin :where(.dnnSecondaryAction, .CommandButton, a.CommandButton) {
    color: var(--skin-color-text);
    background: var(--skin-color-surface);
    border-color: var(--skin-color-border)
}

.modern-skin :where(.dnnSecondaryAction, .CommandButton, a.CommandButton):hover {
    color: var(--skin-color-brand-strong);
    border-color: color-mix(in srgb, var(--skin-color-brand) 40%, var(--skin-color-border));
    background: var(--skin-color-brand-soft)
}

.modern-skin th,
.modern-skin-menu-item.is-open>.modern-skin-menu-row>.modern-skin-menu-link,
.modern-skin-menu-link.is-current,
.modern-skin-menu-link:hover {
    color: var(--skin-color-text)
}

.modern-skin table,
.skin-pane-full,
.skin-table {
    inline-size: 100%
}

.modern-skin :where(th, td) {
    padding-block: .8rem;
    padding-inline: 1rem;
    border-block-end: 1px solid var(--skin-color-border);
    text-align: start;
    vertical-align: middle
}

.modern-skin th {
    background: var(--skin-color-surface-muted);
    font-size: .85rem;
    font-weight: 750
}

.modern-skin tbody tr:hover {
    background: color-mix(in srgb, var(--skin-color-brand) 3.5%, transparent)
}

.modern-skin-header {
    background: color-mix(in srgb, var(--skin-color-surface) 92%, transparent);
    border-block-end: 1px solid rgb(226 230 239 / .9);
    box-shadow: 0 .3rem 1.4rem rgb(15 23 42 / .035);
    backdrop-filter: blur(1rem) saturate(1.3)
}

.modern-skin-header-identity .userMenu .ProfileName,
.modern-skin-identity-user,
.modern-skin-utility-bar,
.skin-accordion details[open] summary,
.skin-breadcrumb-wrap,
.skin-tab-list {
    border-block-end: 1px solid var(--skin-color-border)
}

.modern-skin-utility-bar {
    color: var(--skin-color-text-soft);
    background: color-mix(in srgb, var(--skin-color-surface-muted) 84%, transparent);
    font-size: .825rem
}

.modern-skin-utility-inner {
    min-block-size: 2.15rem;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.modern-skin-account-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--skin-space-2) var(--skin-space-4)
}

.modern-skin-account-links a {
    color: inherit;
    text-decoration: none
}

.modern-skin-menu-toggle[aria-expanded=true] .modern-skin-menu-toggle-icon,
.modern-skin-navbar-wrap {
    background: 0 0
}

.modern-skin-navbar {
    min-block-size: var(--skin-header-size);
    display: flex;
    align-items: center;
    gap: var(--skin-space-6)
}

.modern-skin-brand {
    flex: 0 0 auto;
    min-inline-size: 0
}

.modern-skin-brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none
}

.modern-skin-brand :where(img, svg) {
    max-inline-size: min(13rem, 44vw);
    max-block-size: 9rem;
    inline-size: 8rem
}

.modern-skin-navigation {
    flex: 1 1 auto;
    min-inline-size: 0
}

.modern-skin-identity-menu ul,
.modern-skin-menu,
.modern-skin-submenu {
    margin: 0;
    padding: 0;
    list-style: none
}

.modern-skin-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem
}

.modern-skin-menu-row {
    display: flex;
    align-items: stretch;
    padding-block: 0.65rem;
    padding-inline: 0.5rem
}

.modern-skin-menu-row:has(.modern-skin-submenu-toggle) {
    padding-inline: 0.5rem 0
}

.modern-skin-menu-link {
    min-block-size: 2.75rem;
    display: flex;
    align-items: center;
    border-radius: var(--skin-radius-sm);
    color: var(--skin-color-text) !important;
    font-size: .925rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--skin-transition), background-color var(--skin-transition)
}

.modern-skin-menu-link.is-disabled {
    color: var(--skin-color-text) !important;
    cursor: default
}

.modern-skin-menu-toggle,
.modern-skin-submenu-toggle {
    padding: 0;
    border: 0;
    color: currentColor;
    background: 0 0
}

.modern-skin-submenu-toggle {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    display: flex;
    justify-content: center;
    border-radius: var(--skin-radius-sm);
    line-height: 0
}

.modern-skin-submenu-toggle>span {
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-inline-start: .12rem solid currentColor;
    border-block-end: .12rem solid currentColor;
    transform: rotate(45deg) translateY(-.08rem);
    transition: transform var(--skin-transition)
}

.modern-skin-identity-menu li a,
.skin-tab-list label {
    transition: color var(--skin-transition), background-color var(--skin-transition)
}

.modern-skin-submenu {
    position: absolute;
    inset-block-start: calc(100%);
    inset-inline-start: 0;
    min-inline-size: max-content;
    padding: .45rem;
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-md);
    background: var(--skin-color-surface-raised);
    box-shadow: var(--skin-shadow-md);
    visibility: hidden;
    opacity: 0;
    transform: translateY(.4rem) scale(.985);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity var(--skin-transition), transform var(--skin-transition), visibility var(--skin-transition)
}

.modern-skin-submenu .modern-skin-submenu {
    inset-block-start: -.45rem;
    inset-inline-start: calc(100%)
}

.modern-skin-submenu .modern-skin-menu-row {
    inline-size: 100%;
    padding: 0;
    border-radius: var(--skin-radius-sm)
}

.modern-skin-submenu .modern-skin-menu-row:hover {
    background: var(--skin-color-brand-strong);
    color: #fff
}

.modern-skin-submenu .modern-skin-menu-link {
    flex: 1 1 auto;
    inline-size: 100%;
    white-space: normal;
    padding: 0 .5rem;
    color: initial !important
}

.modern-skin-submenu .modern-skin-menu-link:hover {
    color: #fff !important
}

.modern-skin-submenu .modern-skin-submenu-toggle>span {
    transform: rotate(135deg)
}

.modern-skin-menu-item.is-open>.modern-skin-submenu,
.modern-skin-menu-item:focus-within>.modern-skin-submenu,
.modern-skin-menu-item:hover>.modern-skin-submenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto
}

.modern-skin-menu-toggle {
    display: none;
    inline-size: 2.8rem;
    block-size: 2.8rem;
    padding: .7rem;
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-sm);
    background: var(--skin-color-surface);
    box-shadow: var(--skin-shadow-sm)
}

.modern-skin-menu-toggle-icon,
.modern-skin-menu-toggle-icon::after,
.modern-skin-menu-toggle-icon::before {
    inline-size: inherit;
    block-size: .125rem;
    border-radius: var(--skin-radius-pill);
    background: currentColor;
    transition: transform var(--skin-transition), opacity var(--skin-transition), background-color var(--skin-transition);
    display: block;
    inline-size: 1.5rem
}

.modern-skin-menu-toggle-icon::after,
.modern-skin-menu-toggle-icon::before {
    position: absolute;
    inset-inline-start: 0;
    content: ""
}

.modern-skin-menu-toggle-icon::before {
    inset-block-start: -.45rem
}

.modern-skin-menu-toggle-icon::after {
    inset-block-start: .45rem
}

.modern-skin-menu-toggle[aria-expanded=true] .modern-skin-menu-toggle-icon::before {
    transform: translateY(.45rem) rotate(45deg)
}

.modern-skin-menu-toggle[aria-expanded=true] .modern-skin-menu-toggle-icon::after {
    transform: translateY(-.45rem) rotate(-45deg)
}

.modern-skin-main {
    flex: 1 0 auto;
    min-inline-size: 0
}

.modern-skin-content-pane {
    min-block-size: 12rem
}

.modern-skin-main>:where([id$=Pane]) {
    min-inline-size: 0
}

.modern-skin-main :where(.DnnModule, .dnnModuleManager, .dnnModuleDialog) {
    min-inline-size: 0
}

.dnnEditState .modern-skin-main :where(.DnnModule) {
    margin-block: var(--skin-space-6)
}

.modern-skin-main : where(.dnnForm, .dnnFormItem) {
    max-inline-size: 100%
}

.modern-skin-main :where(.dnnFormMessage) {
    padding-block: .8rem;
    padding-inline: 1rem;
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-sm);
    background: var(--skin-color-surface);
    box-shadow: none
}

.modern-skin-main :where(.dnnFormSuccess) {
    color: var(--skin-color-success);
    border-color: color-mix(in srgb, var(--skin-color-success) 30%, var(--skin-color-border));
    background: color-mix(in srgb, var(--skin-color-success) 7%, var(--skin-color-surface))
}

.modern-skin-main :where(.dnnFormError, .dnnFormValidationSummary) {
    color: var(--skin-color-danger);
    border-color: color-mix(in srgb, var(--skin-color-danger) 30%, var(--skin-color-border));
    background: color-mix(in srgb, var(--skin-color-danger) 6%, var(--skin-color-surface))
}

.modern-skin-footer-map-link:hover,
.modern-skin-footer-social__link:hover {
    border-color: rgb(214 168 25 / .55);
    background: rgb(255 255 255 / .1);
    transform: translateY(-2px)
}

.modern-skin-footer,
.modern-skin-muted,
.skin-muted,
.skin-stat small,
.skin-table-wrap td small,
.skin-trend.is-neutral {
    color: var(--skin-color-text-soft)
}

.modern-skin-card,
.modern-skin-surface {
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-lg);
    background: var(--skin-color-surface);
    box-shadow: var(--skin-shadow-sm)
}

.modern-skin-stack {
    display: flex;
    flex-direction: column;
    gap: var(--skin-space-4)
}

.modern-skin-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--skin-space-3)
}

.modern-skin-section {
    padding-block: clamp(2.5rem, 6vw, 5rem)
}

.modern-skin-section-sm {
    padding-block: clamp(1.5rem, 4vw, 3rem)
}

.modern-skin-prose {
    max-inline-size: 70ch
}

.modern-skin-divider {
    border: 0;
    border-block-start: 1px solid var(--skin-color-border)
}

.modern-skin-footer {
    margin-block-start: auto;
    background: var(--skin-color-blue-700);
    border-block-start: 1px solid rgb(255 255 255 / .08)
}

.modern-skin-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--skin-space-8);
    align-items: start;
    padding-block: clamp(2rem, 4vw, 3.5rem)
}

.modern-skin-footer-meta {
    display: grid;
    gap: var(--skin-space-3)
}

.modern-skin-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--skin-space-2) var(--skin-space-4)
}

.modern-skin-footer a {
    color: var(--skin-color-surface);
    text-decoration: none
}

.modern-skin-footer a:hover {
    color: #fff
}

.modern-skin-footer-copyright {
    color: var(--home-surface);
    font-size: .9rem
}

.modern-skin-footer-pane:empty {
    display: none
}

.modern-skin-footer-contact,
.modern-skin-footer-location {
    display: grid;
    gap: var(--skin-space-4, 1rem);
    min-inline-size: 0
}

.modern-skin-footer-intro,
.modern-skin-footer-location__header {
    display: grid;
    gap: .35rem
}

.modern-skin-footer-contact__title,
.modern-skin-footer-location__title {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7
}

.modern-skin-footer-location__description {
    margin: 0;
    color: #aebdca;
    font-size: .85rem;
    line-height: 1.9
}

.modern-skin-footer-contact__description {
    margin: 0;
    color: #aebdca;
    font-size: .95rem;
    line-height: 1.9
}

.modern-skin-footer-contact__details {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    color: inherit;
    font-style: normal
}

.modern-skin-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-inline-size: 0
}

.modern-skin-footer-contact-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 2rem;
    block-size: 2rem;
    margin-block-start: .05rem;
    border: 1px solid;
    border-radius: .55rem;
    color: var(--skin-color-gold-500, #d6a819);
    background: rgb(255 255 255 / .055)
}

.modern-skin-footer-contact-item__icon svg {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    fill: currentColor;
    color: currentColor
}

.modern-skin-footer-contact-item__content {
    min-inline-size: 0;
    padding-block-start: .25rem;
    color: var(--skin-color-surface);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.9;
    overflow-wrap: anywhere
}

.modern-skin-footer-contact-item__link {
    text-decoration: none;
    transition: color var(--skin-transition, .2s ease), opacity var(--skin-transition, .2s ease)
}

.modern-skin-footer-contact-item__link:hover,
.modern-skin-footer-credit strong,
.modern-skin-footer-map-link:hover {
    color: #fff
}

.modern-skin-footer-contact-item__link:focus-visible {
    outline: .15rem solid var(--skin-color-gold-500, #d6a819);
    outline-offset: .2rem;
    border-radius: .25rem
}

.modern-skin-footer-map-link,
.modern-skin-footer-social__link {
    border: 1px solid;
    transition: background-color var(--skin-transition, .2s ease), border-color var(--skin-transition, .2s ease), color var(--skin-transition, .2s ease), transform var(--skin-transition, .2s ease);
    text-decoration: none
}

.modern-skin-footer-social {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .55rem;
    margin-block-start: .25rem
}

.modern-skin-footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: .7rem;
    color: #fff;
    background: rgb(255 255 255 / .06)
}

.modern-skin-footer-social__link svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: currentColor;
    color: currentColor
}

.modern-skin-footer-social__link:hover {
    color: var(--skin-color-gold-500, #d6a819)
}

.modern-skin-footer-social__link:focus-visible {
    outline: .15rem solid var(--skin-color-gold-500, #d6a819);
    outline-offset: .18rem
}

.modern-skin-footer-map-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    margin-block-end: 0.8rem
}

.modern-skin-footer-map-link {
    min-inline-size: 0;
    min-block-size: 3.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem .35rem;
    border-radius: var(--skin-radius-md, .75rem);
    color: #d6e0e8;
    background: rgb(255 255 255 / .055);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center
}

.modern-skin-footer-map-link:focus-visible {
    outline: .15rem solid var(--skin-color-gold-500, #d6a819);
    outline-offset: .18rem
}

.modern-skin-footer-map-link__icon {
    inline-size: 1.4rem;
    block-size: 1.4rem;
    flex: 0 0 auto;
    color: var(--skin-color-gold-500, #d6a819);
    fill: currentColor
}

.modern-skin-footer-map {
    position: relative;
    display: block;
    overflow: hidden;
    inline-size: 100%;
    border: 1px solid;
    border-radius: var(--skin-radius-md, .75rem);
    background: rgb(255 255 255 / .04);
    box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .12);
    text-decoration: none;
    isolation: isolate
}

.modern-skin-footer-map::after {
    content: "مشاهده نقشه";
    position: absolute;
    inset-inline-end: .75rem;
    inset-block-end: .75rem;
    z-index: 2;
    padding: .45rem .75rem;
    border-radius: 999px;
    color: var(--skin-color-navy-950, #071b2e);
    background: var(--skin-color-gold-500, #d6a819);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 .25rem .8rem rgb(0 0 0 / .2);
    transition: transform var(--skin-transition, .2s ease), filter var(--skin-transition, .2s ease)
}

.modern-skin-footer-map:hover::after {
    transform: translateY(-2px);
    filter: brightness(1.06)
}

.modern-skin-footer-map:focus-visible {
    outline: .15rem solid var(--skin-color-gold-500, #d6a819);
    outline-offset: .2rem
}

.modern-skin-footer-map__image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    opacity: .9;
    transition: opacity var(--skin-transition, .2s ease), transform var(--skin-transition, .3s ease)
}

.modern-skin-footer-map:hover .modern-skin-footer-map__image {
    opacity: 1;
    transform: scale(1.025)
}

@media (max-width:30rem) {
    .modern-skin-footer-map-links {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .modern-skin-footer-map-link {
        flex-direction: row;
        min-block-size: 2.9rem;
        gap: .5rem;
        padding-inline: .65rem
    }

    .modern-skin-footer-map-link__icon {
        inline-size: 1.25rem;
        block-size: 1.25rem
    }
}

@media (hover:none) {

    .modern-skin-footer-map-link:hover,
    .modern-skin-footer-map:hover .modern-skin-footer-map__image,
    .modern-skin-footer-map:hover::after,
    .modern-skin-footer-social__link:hover {
        transform: none
    }
}

.skin-card,
.skin-demo-surface,
.skin-guide-nav {
    box-shadow: var(--skin-shadow-sm)
}

.modern-skin :where(.skin-button) {
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding-block: .65rem;
    padding-inline: 1.05rem;
    border: 1px solid transparent;
    border-radius: var(--skin-radius-sm);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--skin-transition), box-shadow var(--skin-transition), background-color var(--skin-transition), border-color var(--skin-transition), color var(--skin-transition)
}

.modern-skin .skin-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--skin-shadow-sm)
}

.modern-skin .skin-button:disabled {
    cursor: not-allowed;
    opacity: .5
}

.modern-skin .skin-button-primary,
.skin-pagination a.is-current,
.skin-pagination a:hover {
    color: #fff;
    background: var(--skin-color-blue-600);
    border-color: var(--skin-color-blue-600)
}

.modern-skin .skin-button-primary:hover {
    color: #fff;
    background: var(--skin-color-blue-700);
    border-color: var(--skin-color-blue-700)
}

.modern-skin .skin-button-secondary {
    color: #fff;
    background: var(--skin-color-navy-800);
    border-color: var(--skin-color-navy-800)
}

.modern-skin .skin-button-gold {
    color: var(--skin-color-navy-950);
    background: var(--skin-color-gold-500);
    border-color: var(--skin-color-gold-500)
}

.modern-skin .skin-button-outline {
    color: var(--skin-color-navy-800);
    background: 0 0;
    border-color: var(--skin-color-navy-800)
}

.modern-skin .skin-button-ghost,
.skin-badge-blue,
.skin-guide-nav a:hover {
    color: var(--skin-color-blue-700);
    background: var(--skin-color-blue-100)
}

.modern-skin .skin-button-danger {
    color: #fff;
    background: var(--skin-color-danger);
    border-color: var(--skin-color-danger)
}

.modern-skin .skin-button-sm {
    min-block-size: 2.25rem;
    padding-block: .45rem;
    padding-inline: .75rem;
    font-size: .85rem
}

.modern-skin .skin-button-lg {
    min-block-size: 3.25rem;
    padding-block: .8rem;
    padding-inline: 1.35rem;
    font-size: 1.05rem
}

.skin-actions,
.skin-choice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem
}

.skin-stack {
    display: grid;
    gap: 1rem
}

.skin-eyebrow {
    display: inline-block;
    color: var(--skin-color-gold-700);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.skin-guide-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--skin-color-navy-950), var(--skin-color-navy-800) 58%, var(--skin-color-blue-700))
}

.skin-accordion details,
.skin-breadcrumb-wrap,
.skin-card,
.skin-chip,
.skin-demo-surface,
.skin-empty-state,
.skin-guide-nav,
.skin-pagination a,
.skin-swatch,
.skin-table-wrap {
    background: var(--skin-color-surface)
}

.skin-guide-hero::after {
    position: absolute;
    inset-block-start: -8rem;
    inset-inline-end: -7rem;
    inline-size: 24rem;
    block-size: 24rem;
    border: 4rem solid;
    border-radius: 50%;
    content: ""
}

.skin-guide-hero-inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(4rem, 8vw, 7rem)
}

.skin-guide-hero h1 {
    max-inline-size: 18ch;
    margin-block: .65rem 1rem;
    color: #fff
}

.skin-guide-hero p {
    max-inline-size: 62ch;
    color: #d9e6f3;
    font-size: 1.05rem
}

.skin-guide-layout {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: clamp(3rem, 7vw, 6rem)
}

.skin-guide-nav {
    position: sticky;
    inset-block-start: 2rem;
    align-self: start;
    display: grid;
    gap: .25rem;
    padding: 1rem;
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-md)
}

.skin-guide-nav strong {
    padding-block: .5rem;
    padding-inline: .65rem;
    color: var(--skin-color-navy-900)
}

.skin-guide-nav a {
    padding-block: .55rem;
    padding-inline: .65rem;
    border-radius: .5rem;
    color: var(--skin-color-text-soft);
    text-decoration: none
}

.modern-skin-identity-trigger,
.skin-demo-surface,
.skin-kbd,
.skin-stat,
.skin-swatch,
.skin-table-wrap {
    border: 1px solid var(--skin-color-border)
}

.skin-guide-content {
    min-inline-size: 0
}

.skin-guide-section {
    scroll-margin-block-start: 2rem;
    padding-block-end: clamp(3rem, 7vw, 5rem)
}

.skin-section-heading {
    margin-block-end: 1.25rem
}

.skin-section-heading h2 {
    margin-block: .25rem 0
}

.skin-demo-surface {
    padding: clamp(1.15rem, 3vw, 2rem);
    border-radius: var(--skin-radius-lg)
}

.skin-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1rem
}

.skin-swatch {
    overflow: hidden;
    border-radius: var(--skin-radius-md)
}

.skin-swatch>span {
    display: block;
    block-size: 6rem;
    background: var(--swatch)
}

.skin-swatch small,
.skin-swatch strong {
    display: block;
    padding-inline: .8rem
}

.skin-swatch strong {
    padding-block-start: .7rem
}

.skin-swatch small {
    padding-block-end: .8rem;
    color: var(--skin-color-text-soft)
}

.skin-card {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    padding: 1.4rem;
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-lg)
}

.skin-card h3,
.skin-card p {
    margin-block-end: 0
}

.skin-card-featured {
    border-color: rgb(185 133 20 / .45);
    box-shadow: 0 1rem 2.5rem rgb(185 133 20 / .12)
}

.skin-error-card,
.skin-modal-dialog,
.skin-skip-link {
    box-shadow: var(--skin-shadow-md)
}

.skin-card-dark {
    color: #fff;
    background: var(--skin-color-navy-900);
    border-color: var(--skin-color-navy-900)
}

.skin-card-dark :where(h3, p) {
    color: inherit
}

.skin-card-dark p {
    color: #c7d7e7
}

.skin-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-block-start: 1rem
}

.skin-stat {
    display: grid;
    gap: .25rem;
    padding: 1.2rem;
    border-radius: var(--skin-radius-md);
    background: var(--skin-color-surface)
}

.skin-stat strong {
    color: var(--skin-color-navy-900);
    font-size: 1.65rem
}

.skin-trend {
    font-size: .8rem;
    font-weight: 700
}

.skin-trend.is-positive {
    color: var(--skin-color-success)
}

.skin-badge {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    padding-block: .25rem;
    padding-inline: .65rem;
    border-radius: var(--skin-radius-pill);
    font-size: .78rem;
    font-weight: 750
}

.skin-badge-gold {
    color: var(--skin-color-gold-700);
    background: var(--skin-color-gold-100)
}

.skin-badge-success {
    color: var(--skin-color-success);
    background: #e8f6ef
}

.skin-badge-danger {
    color: var(--skin-color-danger);
    background: #feeceb
}

.skin-badge-light {
    color: var(--skin-color-navy-900);
    background: #fff
}

.skin-alert {
    display: grid;
    gap: .15rem;
    padding-block: .9rem;
    padding-inline: 1rem;
    border: 1px solid;
    border-radius: var(--skin-radius-md)
}

.skin-alert-info {
    color: var(--skin-color-blue-700);
    background: var(--skin-color-blue-100);
    border-color: #bddcf0
}

.skin-alert-success {
    color: var(--skin-color-success);
    background: #e8f6ef;
    border-color: #b8dec9
}

.skin-alert-warning {
    color: var(--skin-color-warning);
    background: #fff7df;
    border-color: #ecd596
}

.skin-alert-danger {
    color: var(--skin-color-danger);
    background: #feeceb;
    border-color: #f2c0bc
}

.skin-table-wrap {
    overflow-x: auto;
    border-radius: var(--skin-radius-md)
}

#guide-tab-1:checked~.skin-tab-panels #guide-panel-1,
#guide-tab-2:checked~.skin-tab-panels #guide-panel-2,
#guide-tab-3:checked~.skin-tab-panels #guide-panel-3,
.modern-skin-identity-user strong,
.modern-skin-identity-user-meta small,
.modern-skin-identity-user-meta strong,
.skin-layout-aside,
.skin-table-wrap td small,
.skin-table-wrap td strong {
    display: block
}

.skin-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-block-start: 1rem
}

.skin-pagination a {
    min-inline-size: 2.35rem;
    min-block-size: 2.35rem;
    display: inline-grid;
    place-items: center;
    padding-inline: .6rem;
    border: 1px solid var(--skin-color-border);
    border-radius: .55rem;
    color: var(--skin-color-text);
    text-decoration: none
}

@media (max-width:61.99875rem) {
    .modern-skin-navbar {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
        padding-block: .75rem
    }

    .modern-skin-menu-toggle {
        display: inline-grid;
        place-items: center
    }

    .modern-skin-navigation {
        flex-basis: 100%;
        max-block-size: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transition: max-block-size .3s ease, opacity var(--skin-transition), visibility var(--skin-transition)
    }

    .modern-skin-navigation.is-open {
        max-block-size: min(calc(100dvh - 4.7rem), 57rem);
        overflow: auto;
        visibility: visible;
        opacity: 1;
        overscroll-behavior: contain
    }

    .modern-skin-menu {
        display: block;
        padding-block: .75rem .25rem
    }

    .modern-skin-menu-item {
        border-block-start: 1px solid var(--skin-color-border)
    }

    .modern-skin-menu-row {
        inline-size: 100%
    }

    .modern-skin-menu-link {
        flex: 1 1 auto;
        min-inline-size: 0;
        border-radius: 0;
        white-space: normal
    }

    .modern-skin-submenu-toggle {
        flex: 0 0 2.75rem;
        inline-size: 2.75rem;
        margin-inline-start: 0
    }

    .modern-skin-submenu .modern-skin-submenu-toggle>span,
    .modern-skin-submenu-toggle>span {
        transform: rotate(45deg) translateY(-.08rem)
    }

    .modern-skin-menu-item.is-open>.modern-skin-menu-row .modern-skin-submenu-toggle>span {
        transform: rotate(315deg) translate(-.05rem, -.05rem)
    }

    .modern-skin-submenu,
    .modern-skin-submenu .modern-skin-submenu {
        position: static;
        min-inline-size: 0;
        max-block-size: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: var(--skin-color-surface-muted);
        box-shadow: none;
        visibility: hidden;
        opacity: 1;
        transform: none;
        overflow: hidden;
        pointer-events: none;
        transition: max-block-size 280ms, visibility 280ms
    }

    .modern-skin-menu-item.is-open>.modern-skin-submenu {
        max-block-size: 80rem;
        visibility: visible;
        pointer-events: auto
    }

    .modern-skin-submenu .modern-skin-menu-link {
        padding-inline-start: 1.75rem
    }

    .modern-skin-submenu .modern-skin-submenu .modern-skin-menu-link {
        padding-inline-start: 2.75rem
    }

    .modern-skin-footer-grid,
    .skin-guide-layout {
        grid-template-columns: 1fr
    }

    .skin-guide-nav {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr))
    }

    .skin-guide-nav strong {
        grid-column: 1/-1
    }
}

.skin-skip-link {
    position: fixed;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    z-index: 10000;
    padding-block: .7rem;
    padding-inline: 1rem;
    border-radius: var(--skin-radius-sm);
    color: #fff;
    background: var(--skin-color-navy-950);
    transform: translateY(-180%);
    transition: transform var(--skin-transition)
}

.skin-skip-link:focus {
    transform: translateY(0)
}

.skin-visually-hidden {
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important
}

.skin-breadcrumb {
    min-block-size: 2.85rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    color: var(--skin-color-text-soft);
    font-size: .86rem
}

.skin-breadcrumb :where(a, span) {
    color: inherit;
    text-decoration: none
}

.skin-breadcrumb a:hover {
    color: var(--skin-color-brand)
}

.modern-skin :where(fieldset) {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0
}

.modern-skin legend {
    margin-block-end: .85rem;
    color: var(--skin-color-navy-900);
    font-size: 1.05rem;
    font-weight: 800
}

.skin-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem
}

.skin-field {
    grid-column: span 12;
    min-inline-size: 0
}

.skin-field-half {
    grid-column: span 6
}

.skin-field-third {
    grid-column: span 4
}

.skin-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem
}

.skin-field.is-invalid .skin-field-message,
.skin-required {
    color: var(--skin-color-danger)
}

.skin-field-message,
.skin-help {
    display: block;
    margin-block-start: .35rem;
    color: var(--skin-color-text-soft);
    font-size: .8rem
}

.skin-field.is-invalid :where(input, select, textarea) {
    border-color: var(--skin-color-danger);
    box-shadow: 0 0 0 .18rem rgb(180 35 24 / .1)
}

.skin-field.is-valid :where(input, select, textarea) {
    border-color: var(--skin-color-success)
}

.skin-input-group {
    display: flex;
    align-items: stretch;
    min-inline-size: 0
}

.skin-input-group>:where(input, select) {
    min-inline-size: 0;
    border-radius: 0
}

.skin-input-group>:first-child {
    border-start-start-radius: var(--skin-radius-sm);
    border-end-start-radius: var(--skin-radius-sm)
}

.skin-input-group>:last-child {
    border-start-end-radius: var(--skin-radius-sm);
    border-end-end-radius: var(--skin-radius-sm)
}

.skin-input-addon {
    display: inline-flex;
    align-items: center;
    padding-inline: .85rem;
    border: 1px solid var(--skin-color-border);
    color: var(--skin-color-text-soft);
    background: var(--skin-color-surface-muted);
    white-space: nowrap
}

.skin-choice-list {
    display: grid;
    gap: .7rem
}

.skin-choice {
    display: flex !important;
    align-items: flex-start;
    gap: .65rem;
    margin: 0 !important;
    font-weight: 500 !important;
    cursor: pointer
}

.skin-choice :where(input[type=checkbox], input[type=radio]) {
    flex: 0 0 auto;
    margin-block-start: .25rem
}

.modern-skin :where(.dnnFormItem) {
    display: grid;
    grid-template-columns: minmax(10rem, .35fr) minmax(0, 1fr);
    gap: .65rem 1rem;
    align-items: start;
    margin-block-end: 1rem
}

.modern-skin :where(.dnnFormItem > label, .dnnFormItem > .dnnLabel) {
    inline-size: auto;
    margin: 0;
    padding-block-start: .65rem;
    text-align: start
}

.modern-skin :where(.dnnFormItem > input, .dnnFormItem > select, .dnnFormItem > textarea, .dnnFormItem > .dnnFormItemInput) {
    min-inline-size: 0
}

.modern-skin :where(.dnnFormItem .dnnFormMessage, .dnnFormItem .dnnFormError) {
    grid-column: 2
}

.skin-table caption {
    padding-block: .85rem;
    padding-inline: 1rem;
    color: var(--skin-color-text-soft);
    text-align: start;
    font-size: .85rem
}

.skin-table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1
}

.skin-table tbody tr:last-child>* {
    border-block-end: 0
}

.skin-table-striped tbody tr: nth-child(2n) {
    background: color-mix(in srgb, var(--skin-color-brand) 2.5%, var(--skin-color-surface))
}

.skin-table-compact :where(th, td) {
    padding-block: .55rem;
    padding-inline: .7rem
}

.skin-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem
}

.skin-table-sort {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: inherit;
    background: 0 0;
    border: 0;
    padding: 0;
    min-block-size: auto
}

.skin-table-empty {
    padding-block: 3rem !important;
    text-align: center !important;
    color: var(--skin-color-text-soft)
}

.modern-skin :where(.dnnGrid, .DataGrid, .NormalTextBox + table) {
    inline-size: 100%;
    border-collapse: collapse
}

.skin-tabs>input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.skin-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding-block-end: .65rem
}

.skin-tab-list label {
    margin: 0;
    padding-block: .65rem;
    padding-inline: .9rem;
    border-radius: var(--skin-radius-sm);
    color: var(--skin-color-text-soft);
    cursor: pointer
}

.modern-skin-identity-menu a:hover,
.skin-tab-list label:hover {
    color: var(--skin-color-brand-strong);
    background: var(--skin-color-brand-soft)
}

.skin-tab-panel {
    display: none;
    padding-block-start: 1.25rem
}

#guide-tab-1:checked~.skin-tab-list label[for=guide-tab-1],
#guide-tab-2:checked~.skin-tab-list label[for=guide-tab-2],
#guide-tab-3:checked~.skin-tab-list label[for=guide-tab-3] {
    color: #fff;
    background: var(--skin-color-brand)
}

#guide-tab-1:focus-visible~.skin-tab-list label[for=guide-tab-1],
#guide-tab-2:focus-visible~.skin-tab-list label[for=guide-tab-2],
#guide-tab-3:focus-visible~.skin-tab-list label[for=guide-tab-3] {
    box-shadow: var(--skin-focus)
}

.skin-accordion {
    display: grid;
    gap: .65rem
}

.skin-accordion details {
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-md);
    overflow: clip
}

.skin-accordion summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .9rem;
    padding-inline: 1rem;
    color: var(--skin-color-navy-900);
    font-weight: 750;
    cursor: pointer;
    list-style: none
}

.skin-accordion summary::-webkit-details-marker {
    display: none
}

.skin-accordion summary::after {
    content: "+";
    inline-size: 1.65rem;
    block-size: 1.65rem;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--skin-color-brand);
    background: var(--skin-color-brand-soft);
    font-size: 1.2rem
}

.skin-accordion details[open] summary::after {
    content: "−"
}

.skin-accordion-content {
    padding-block: 1rem;
    padding-inline: 1rem
}

.skin-progress {
    block-size: .65rem;
    overflow: hidden;
    border-radius: var(--skin-radius-pill);
    background: var(--skin-color-surface-muted)
}

.skin-progress>span {
    display: block;
    block-size: 100%;
    inline-size: var(--progress, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--skin-color-blue-600), var(--skin-color-gold-500))
}

.skin-avatar {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    background: var(--skin-color-navy-800);
    font-weight: 800
}

.modern-skin-identity-user-avatar img,
.skin-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover
}

.skin-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-block-size: 2rem;
    padding-inline: .75rem;
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-pill);
    color: var(--skin-color-text);
    font-size: .82rem
}

.skin-empty-state {
    display: grid;
    place-items: center;
    gap: .65rem;
    padding-block: clamp(2.5rem, 7vw, 5rem);
    padding-inline: 1rem;
    border: 1px dashed var(--skin-color-border);
    border-radius: var(--skin-radius-lg);
    text-align: center
}

.skin-empty-icon {
    inline-size: 4rem;
    block-size: 4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--skin-color-brand);
    background: var(--skin-color-brand-soft);
    font-size: 1.5rem
}

.skin-callout {
    padding-block: 1rem;
    padding-inline: 1rem;
    border-inline-start: .3rem solid var(--skin-color-accent);
    border-radius: var(--skin-radius-sm);
    background: var(--skin-color-gold-100)
}

.skin-kbd {
    padding-block: .12rem;
    padding-inline: .4rem;
    border-block-end-width: .18rem;
    border-radius: .35rem;
    background: var(--skin-color-surface);
    font-family: var(--skin-font-mono);
    font-size: .78rem
}

.skin-skeleton {
    min-block-size: 1rem;
    border-radius: .4rem;
    background: linear-gradient(100deg, var(--skin-color-surface-muted) 20%, #fff 40%, var(--skin-color-surface-muted) 60%);
    background-size: 200% 100%;
    animation: 1.3s linear infinite skin-skeleton
}

@keyframes skin-skeleton {
    to {
        background-position-x: -200%
    }
}

.skin-modal-preview {
    padding: 1rem;
    border-radius: var(--skin-radius-lg);
    background: rgb(7 23 46 / .58)
}

.skin-modal-dialog {
    max-inline-size: 34rem;
    margin-inline: auto;
    padding: 1.35rem;
    border-radius: var(--skin-radius-lg);
    background: var(--skin-color-surface)
}

.skin-modal-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem
}

.skin-tooltip-demo {
    position: relative;
    display: inline-flex
}

.skin-tooltip-demo [role=tooltip] {
    position: absolute;
    inset-block-end: calc(100% + .5rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: max-content;
    max-inline-size: 15rem;
    padding-block: .4rem;
    padding-inline: .6rem;
    border-radius: .4rem;
    color: #fff;
    background: var(--skin-color-navy-950);
    font-size: .75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--skin-transition), visibility var(--skin-transition)
}

.skin-tooltip-demo:where(:hover, :focus-within) [role=tooltip] {
    opacity: 1;
    visibility: visible
}

.skin-pane-section {
    padding-block: clamp(1.5rem, 3vw, 3rem)
}

.skin-pane-section+.skin-pane-section {
    border-block-start: 1px solid color-mix(in srgb, var(--skin-color-border) 72%, transparent)
}

.skin-pane-section-flush {
    padding-block: 0
}

.skin-pane-section-muted {
    background: var(--skin-color-surface-soft)
}

.modern-skin-identity-user-meta,
.modern-skin-newsletter-form,
.skin-grid>*,
.skin-layout-aside,
.skin-pane {
    min-inline-size: 0
}

.skin-pane-sidebar {
    position: sticky;
    inset-block-start: calc(var(--skin-header-offset, 6rem) + 1rem)
}

.skin-pane-full:empty,
.skin-pane-section:has(> .container > .row > * > .skin-pane:empty):not(:has(.skin-pane:not(:empty))),
.skin-pane-section:has(> .container > .skin-pane:empty) {
    display: none
}

.skin-pane-hero {
    min-block-size: clamp(18rem, 52vw, 42rem)
}

.modern-skin-home .skin-pane-section:first-of-type+.skin-pane-section {
    border-block-start: 0
}

@media (max-width:991.98px) {
    .skin-pane-sidebar {
        position: static
    }
}

.modern-skin-error {
    min-block-size: 100dvh;
    color: var(--skin-color-text);
    background: radial-gradient(circle at 14% 12%, rgb(22 101 170 / .14), transparent 34rem), radial-gradient(circle at 88% 86%, rgb(201 148 19 / .12), transparent 30rem), var(--skin-color-surface-soft)
}

.skin-error-main {
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
    padding-block: clamp(2rem, 6vw, 5rem);
    padding-inline: clamp(1rem, 4vw, 2.5rem)
}

.skin-error-shell {
    inline-size: min(100%, 68rem)
}

.skin-error-card {
    display: grid;
    grid-template-columns: minmax(16rem, .82fr) minmax(0, 1.18fr);
    overflow: clip;
    border: 1px solid color-mix(in srgb, var(--skin-color-border) 88%, transparent);
    border-radius: clamp(1.25rem, 3vw, 2rem);
    background: var(--skin-color-surface)
}

.skin-error-visual {
    position: relative;
    min-block-size: clamp(18rem, 42vw, 31rem);
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate
}

.skin-error-code {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: clamp(4.75rem, 14vw, 9rem);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.07em;
    text-shadow: 0 .35rem 1.5rem rgb(0 0 0 / .22)
}

.skin-error-content {
    align-self: center;
    padding-block: clamp(2rem, 5vw, 4rem);
    padding-inline: clamp(1.5rem, 5vw, 4rem)
}

.skin-error-eyebrow {
    margin-block: 0 .65rem;
    color: var(--error-accent, var(--skin-color-gold-500));
    font-size: .82rem;
    font-weight: 850;
    letter-spacing: .03em
}

.skin-error-content h1 {
    max-inline-size: 18ch;
    margin-block: 0 1rem;
    color: var(--skin-color-navy-950);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.22
}

.skin-error-description {
    max-inline-size: 55ch;
    margin-block: 0 1.5rem;
    color: var(--skin-color-text-soft);
    font-size: clamp(.98rem, 1.6vw, 1.08rem);
    line-height: 1.9
}

.skin-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem
}

.skin-error-pane {
    margin-block-start: 1.5rem
}

.skin-error-pane:empty {
    display: none
}

.modern-skin-identity {
    position: relative;
    flex: 0 0 auto
}

.modern-skin-identity-trigger {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: inline-grid;
    place-items: center;
    border-radius: var(--skin-radius-pill);
    color: var(--skin-color-text);
    background: var(--skin-color-surface);
    text-decoration: none;
    box-shadow: var(--skin-shadow-xs);
    transition: var(--skin-transition)
}

.modern-skin-identity-trigger:hover {
    color: var(--skin-color-brand);
    border-color: var(--skin-color-brand);
    background: var(--skin-color-brand-soft);
    transform: translateY(-1px)
}

.modern-skin-identity-trigger svg {
    inline-size: 1.25rem;
    block-size: 1.25rem
}

.modern-skin-identity-menu {
    position: absolute;
    inset-block-start: calc(100% + .65rem);
    inset-inline-end: 0;
    z-index: 1100;
    min-inline-size: 16rem;
    padding: var(--skin-space-2);
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-md);
    background: var(--skin-color-surface-raised);
    box-shadow: var(--skin-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.35rem);
    transition: var(--skin-transition)
}

.modern-skin-identity:focus-within .modern-skin-identity-menu,
.modern-skin-identity:hover .modern-skin-identity-menu {
    opacity: 1;
    visibility: visible;
    transform: none
}

.modern-skin-identity-menu a {
    display: flex;
    align-items: center;
    gap: var(--skin-space-3);
    padding: .7rem .8rem;
    border-radius: var(--skin-radius-sm);
    color: var(--skin-color-text);
    text-decoration: none
}

.modern-skin-identity-user {
    margin-block-end: var(--skin-space-2)
}

.modern-skin-identity-user img {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--skin-radius-pill);
    object-fit: cover
}

@media (max-width:61.999rem) {
    .modern-skin-identity {
        margin-inline-start: auto
    }

    .modern-skin-navbar>.modern-skin-identity {
        order: 2
    }

    .modern-skin-menu-toggle {
        order: 3
    }

    .modern-skin-navigation {
        order: 4;
        flex-basis: 100%
    }
}

.skin-pane-stack {
    display: grid;
    gap: var(--skin-space-6, 1.5rem)
}

.skin-banner-pane:empty,
.skin-page-title-pane:empty,
.skin-pane-section:has(> .container > .skin-pane:empty),
.skin-pane-section:has(> .skin-pane:empty) {
    min-block-size: 0
}

.modern-skin-header .modern-skin-navbar,
.modern-skin-header .modern-skin-navbar-wrap,
.skin-pane-equal {
    block-size: 100%
}

@media (max-width:47.99875rem) {

    .skin-error-card,
    .skin-stat-grid {
        grid-template-columns: 1fr
    }

    .skin-field-half,
    .skin-field-third {
        grid-column: span 12
    }

    .modern-skin :where(.dnnFormItem) {
        grid-template-columns: 1fr
    }

    .modern-skin :where(.dnnFormItem > label, .dnnFormItem > .dnnLabel) {
        padding-block-start: 0
    }

    .modern-skin :where(.dnnFormItem .dnnFormMessage, .dnnFormItem .dnnFormError) {
        grid-column: 1
    }

    .skin-error-visual {
        min-block-size: 14rem
    }

    .skin-error-content {
        text-align: center
    }

    .skin-error-content h1,
    .skin-error-description {
        margin-inline: auto
    }

    .skin-error-actions {
        justify-content: center
    }

    .skin-pane-section {
        overflow: clip
    }
}

.modern-skin-footer-main {
    padding-block: clamp(2.5rem, 5vw, 4.5rem)
}

.modern-skin-footer-top {
    padding-block-end: clamp(1.75rem, 4vw, 3rem);
    border-block-end: 1px solid rgb(255 255 255 / .1)
}

.modern-skin-newsletter {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(18rem, 1.1fr);
    gap: var(--skin-space-5, 1.25rem);
    align-items: center;
    margin-block-start: var(--skin-space-6, 1.5rem)
}

.modern-skin-newsletter-copy h2 {
    margin: 0 0 .35rem;
    color: #fff;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.55
}

.modern-skin-newsletter-copy p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.85;
    color: var(--skin-color-surface)
}

.modern-skin-newsletter-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem;
    min-block-size: 3rem;
    overflow: hidden;
    border: 1px solid;
    border-radius: var(--skin-radius-md, .75rem);
    background: rgb(255 255 255 / .08);
    transition: var(--skin-transition, .2s ease)
}

.modern-skin-newsletter-control:focus-within {
    border-color: var(--skin-color-gold-500, #d6a819);
    box-shadow: 0 0 0 .2rem rgb(214 168 25 / .18)
}

.modern-skin-newsletter-control input {
    inline-size: 100%;
    min-inline-size: 0;
    padding-inline: 1rem;
    border: 0;
    outline: 0;
    color: #fff;
    background: 0 0;
    font: inherit;
    min-block-size: 3rem
}

.modern-skin-newsletter-control input::placeholder {
    color: #b9c5cf;
    opacity: 1
}

.modern-skin-newsletter-control .Sub-Btn {
    display: grid;
    place-items: center;
    border: 0;
    color: var(--skin-color-navy-950, #071b2e);
    background: var(--skin-color-gold-500, #d6a819);
    cursor: pointer;
    transition: var(--skin-transition, .2s ease)
}

.modern-skin-newsletter-control .Sub-Btn:hover {
    filter: brightness(1.08)
}

.modern-skin-newsletter-control .Sub-Btn:focus-visible {
    outline: #fff solid .18rem;
    outline-offset: -.25rem
}

.modern-skin-newsletter-control .Sub-Btn svg {
    inline-size: 1.15rem;
    block-size: 1.15rem
}

.modern-skin-newsletter-status {
    min-block-size: 1.45rem;
    padding-block-start: .35rem;
    color: #fff;
    font-size: .8rem
}

.modern-skin-trustmarks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--skin-space-3, .75rem);
    margin-block-start: var(--skin-space-6, 1.5rem)
}

.modern-skin-trustmark {
    inline-size: 6.8rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: .55rem;
    border: 1px solid;
    border-radius: var(--skin-radius-md, .75rem);
    background: #fff;
    box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .16)
}

.modern-skin-trustmark img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain
}

.modern-skin-footer-columns,
.modern-skin-footer-legacy-pane,
.modern-skin-footer-wide-pane {
    margin-block-start: clamp(1.75rem, 4vw, 3rem)
}

.modern-skin-footer-columns :where(h2, h3, h4) {
    margin-block: 0 1rem;
    color: #fff;
    font-size: 1rem
}

.modern-skin-footer-columns :where(ul, ol) {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none
}

.modern-skin-footer-columns p {
    color: var(--skin-color-surface);
    line-height: 1.9
}

.modern-skin-footer-bottom {
    padding-block: 1rem;
    border-block-start: 1px solid rgb(255 255 255 / .1);
    background: var(--skin-color-brand-strong)
}

.modern-skin-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .7rem;
    font-size: .84rem
}

.modern-skin-footer-separator {
    color: rgb(255 255 255 / .28)
}

.modern-skin-footer-credit {
    font-size: .84rem;
    text-align: end
}

.skin-visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important
}

@media (max-width:61.99875rem) {
    .modern-skin-newsletter {
        grid-template-columns: 1fr
    }

    .modern-skin-trustmarks {
        justify-content: flex-start
    }

    .modern-skin-footer-credit {
        text-align: start
    }
}

@media (max-width:35.99875rem) {

    .modern-skin-account-links,
    .modern-skin-utility-inner {
        justify-content: center
    }

    .modern-skin-footer-grid {
        gap: var(--skin-space-6)
    }

    .modern-skin :where(th, td) {
        padding-inline: .7rem
    }

    .modern-skin-newsletter-control {
        grid-template-columns: minmax(0, 1fr) 2.85rem
    }

    .modern-skin-trustmark {
        inline-size: 5.8rem
    }

    .modern-skin-footer-separator {
        display: none
    }

    .modern-skin-footer-legal {
        flex-direction: column;
        align-items: flex-start
    }
}

.skin-grid,
.skin-pane-stack {
    display: grid;
    gap: clamp(1rem, 2vw, 2rem)
}

.modern-skin .container,
.skin-container {
    inline-size: min(calc(100% - (2 * var(--skin-container-gutter))), var(--skin-content-size));
    margin-inline: auto
}

.modern-skin .container-fluid {
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--skin-container-gutter)
}

.modern-skin .container-sm {
    max-inline-size: var(--skin-container-sm)
}

.modern-skin .container-md {
    max-inline-size: var(--skin-container-md)
}

.modern-skin .container-lg {
    max-inline-size: var(--skin-container-lg)
}

.modern-skin .container-xl {
    max-inline-size: var(--skin-container-xl)
}

.modern-skin .container-full {
    inline-size: 100%;
    max-inline-size: none
}

.skin-layout-section {
    position: relative;
    padding-block: clamp(1.5rem, 4vw, 3.5rem)
}

.skin-layout-section+.skin-layout-section {
    border-block-start: 1px solid color-mix(in srgb, var(--skin-color-border) 55%, transparent)
}

.skin-layout-section.skin-layout-bubble-background {
    background-image: url(/Portals/0/ThemePluginPro/uploads/2024/3/27/bg-mft.jpg);
    background-repeat: repeat-y;
    background-size: contain;
    background-position: center center !important
}

.skin-layout-section.skin-layout-edu-background {
    background-image: url("/Portals/0/ThemePluginPro/uploads/2024/3/27/bg-1 1.jpg");
    background-repeat: repeat-x;
    background-position: center;
    background-size: cover
}

.skin-layout-section.skin-layoutlinear-background {
    background-image: url(/Portals/0/ThemePluginPro/uploads/2024/8/15/sun-tornado-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center !important
}

.skin-layout-section--flush {
    padding-block: 0;
    border-block-start: 0 !important
}

.skin-layout-section--muted {
    background: var(--skin-color-surface-muted)
}

.skin-grid {
    grid-template-columns: minmax(0, 1fr);
    min-inline-size: 0
}

.skin-grid--start {
    align-items: start
}

.skin-grid--center {
    align-items: center
}

.skin-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.skin-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.skin-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.skin-grid--3-9 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr)
}

.skin-grid--4-8 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr)
}

.skin-grid--5-7 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr)
}

.skin-grid--7-5 {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr)
}

.skin-grid--8-4 {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr)
}

.skin-grid--9-3 {
    grid-template-columns: minmax(0, 9fr) minmax(0, 3fr)
}

.skin-grid--3-6-3 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr)
}

.skin-grid--footer {
    grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 2fr)) minmax(0, 3fr)
}

.skin-layout-aside:has(> .skin-pane:empty),
.skin-pane:empty {
    display: none
}

.skin-grid:has(> .skin-pane:empty) {
    grid-template-columns: minmax(0, 1fr)
}

.skin-grid:has(> .skin-layout-aside > .skin-pane:empty) {
    grid-template-columns: minmax(0, 1fr)
}

.skin-layout-section:has(.skin-pane:empty):not(:has(.skin-pane:not(:empty))) {
    display: none
}

.modern-skin-footer-main {
    padding-block: clamp(2rem, 5vw, 4rem)
}

.modern-skin-footer-columns,
.modern-skin-footer-legacy-pane,
.modern-skin-footer-top,
.modern-skin-footer-wide-pane {
    margin-block-end: clamp(1.5rem, 3vw, 2.5rem)
}

.modern-skin-footer-bottom {
    padding-block: 1rem;
    border-block-start: 1px solid rgb(255 255 255 / .1)
}

.modern-skin-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem
}

.modern-skin-footer-credit {
    margin: 0;
    text-align: end
}

.modern-skin :where(.Normal, .NormalDisabled, .NormalDeleted, .NormalTextBox) {
    color: var(--skin-color-text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.7
}

.modern-skin :where(.NormalBold, .Head, .SubHead) {
    color: var(--skin-color-text);
    font-weight: 750
}

.modern-skin :where(.NormalRed, .dnnFormError, .dnnFormValidationSummary) {
    color: var(--skin-color-danger)
}

.modern-skin :where(.dnnClear, .clear, .clearfix)::after {
    display: table;
    clear: both;
    content: ""
}

.modern-skin :where(.DNNEmptyPane, .dnnEmptyPane) {
    display: none !important
}

.modern-skin :where(.DnnModule, .DNNModuleContent, .dnnModuleManager, .dnnForm, .dnnFormItem) {
    min-inline-size: 0;
    max-inline-size: 100%
}

.modern-skin :where(.dnnLabel, .dnnFormItem > label) {
    color: var(--skin-color-text);
    font-weight: 700;
    text-align: start
}

.modern-skin :where(.dnnFormHelp, .dnnFormHint, .dnnTooltip) {
    color: var(--skin-color-text-soft);
    font-size: .875rem;
    line-height: 1.7
}

.modern-skin :where(.dnnFormMessage, .dnnFormInfo, .dnnFormWarning, .dnnFormSuccess, .dnnFormError, .dnnFormValidationSummary) {
    display: block;
    margin-block: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-sm);
    background: var(--skin-color-surface)
}

.modern-skin .dnnFormInfo {
    color: var(--skin-color-info);
    border-color: color-mix(in srgb, var(--skin-color-info) 28%, var(--skin-color-border));
    background: var(--skin-color-info-soft)
}

.modern-skin .dnnFormWarning {
    color: var(--skin-color-warning);
    border-color: color-mix(in srgb, var(--skin-color-warning) 30%, var(--skin-color-border));
    background: var(--skin-color-warning-soft)
}

.modern-skin .dnnFormSuccess {
    color: var(--skin-color-success);
    border-color: color-mix(in srgb, var(--skin-color-success) 30%, var(--skin-color-border));
    background: var(--skin-color-success-soft)
}

.modern-skin :where(.dnnFormError, .dnnFormValidationSummary) {
    border-color: color-mix(in srgb, var(--skin-color-danger) 30%, var(--skin-color-border));
    background: var(--skin-color-danger-soft)
}

.modern-skin :where(.dnnActions, .dnnForm .dnnActions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none
}

.modern-skin :where(.dnnActions li) {
    margin: 0;
    list-style: none
}

.modern-skin :where(.dnnPrimaryAction, .dnnSecondaryAction, .CommandButton) {
    white-space: normal
}

.modern-skin :where(.dnnFormItem input[type=text], .dnnFormItem input[type=password], .dnnFormItem input[type=email], .dnnFormItem input[type=tel], .dnnFormItem input[type=url], .dnnFormItem input[type=number], .dnnFormItem select, .dnnFormItem textarea) {
    max-inline-size: 100%
}

.modern-skin :where(.dnnCheckbox, .dnnRadiobutton) {
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.modern-skin :where(.dnnGrid, .DataGrid) {
    inline-size: 100%;
    overflow-x: auto
}

.modern-skin :where(.dnnGridHeader, .DataGrid_Header) {
    color: var(--skin-color-text);
    background: var(--skin-color-surface-muted);
    font-weight: 750
}

.modern-skin :where(.dnnGridItem, .dnnGridAltItem, .DataGrid_Item, .DataGrid_AlternatingItem) {
    border-block-end: 1px solid var(--skin-color-border)
}

.modern-skin : where(.dnnPager, .dnnPagination) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-block: 1rem
}

.modern-skin :where(.dnnPager a, .dnnPagination a, .dnnPager span, .dnnPagination span) {
    min-inline-size: 2.25rem;
    min-block-size: 2.25rem;
    display: inline-grid;
    place-items: center;
    padding-inline: .55rem;
    border: 1px solid var(--skin-color-border);
    border-radius: .55rem;
    text-decoration: none
}

.modern-skin :where(.dnnPager .selected, .dnnPagination .active, .dnnPager span[aria-current=page]) {
    color: #fff;
    border-color: var(--skin-color-brand);
    background: var(--skin-color-brand)
}

.modern-skin :where(.dnnFileUpload, .dnnFileUploadScope) {
    max-inline-size: 100%
}

.modern-skin :where(.dnnModal, .ui-dialog) {
    color: var(--skin-color-text);
    font-family: var(--skin-font-sans)
}

.modern-skin :where(.skin-card, .skin-panel) {
    min-inline-size: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-lg);
    background: var(--skin-color-surface);
    box-shadow: var(--skin-shadow-xs)
}

.modern-skin .skin-card--interactive {
    transition: transform var(--skin-transition), border-color var(--skin-transition), box-shadow var(--skin-transition)
}

.modern-skin .skin-card--interactive:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--skin-color-brand) 28%, var(--skin-color-border));
    box-shadow: var(--skin-shadow-sm)
}

.modern-skin .skin-section-header {
    display: grid;
    gap: .65rem;
    margin-block-end: clamp(1.25rem, 3vw, 2rem);
    text-align: center
}

.modern-skin .skin-section-header>* {
    margin: 0
}

.modern-skin .skin-section-eyebrow {
    color: var(--skin-color-brand);
    font-size: .82rem;
    font-weight: 850
}

.modern-skin .skin-section-title {
    color: var(--skin-color-text);
    font-size: clamp(1.45rem, 2.8vw, 2.2rem)
}

.modern-skin .skin-section-description {
    max-inline-size: 65ch;
    margin-inline: auto;
    color: var(--skin-color-text-soft)
}

.modern-skin .skin-scroll-x {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch
}

.modern-skin .skin-ratio {
    position: relative;
    overflow: hidden
}

.modern-skin .skin-ratio::before {
    display: block;
    padding-block-start: var(--skin-ratio, 56.25%);
    content: ""
}

.modern-skin .skin-ratio>:first-child {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover
}

.modern-skin {
    --DPurple: var(--skin-color-purple);
    --LPurple: #f4edf7;
    --Yellow: var(--skin-color-yellow);
    --White: #fff;
    --Black: var(--skin-color-text);
    --Gray: var(--skin-color-text-soft);
    --border-color: var(--skin-color-border);
    --main-color: var(--skin-color-primary);
    --secondary-color: var(--skin-color-secondary);
    --b-radius: var(--skin-radius-sm)
}

.modern-skin-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    direction: ltr
}

.modern-skin-header-action,
.modern-skin-header-phone {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #fff !important;
    background: var(--skin-color-brand);
    text-decoration: none !important;
    box-shadow: 0 .2rem .65rem color-mix(in srgb, var(--skin-color-brand) 12%, transparent);
    transition: transform var(--skin-transition), background-color var(--skin-transition), box-shadow var(--skin-transition)
}

.modern-skin-header-action {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%
}

.modern-skin-header-phone {
    min-block-size: 2.75rem;
    gap: .5rem;
    padding-inline: .95rem 1.15rem;
    border-radius: var(--skin-radius-pill);
    font-size: .9rem;
    font-weight: 750;
    white-space: nowrap
}

.modern-skin-header-action:hover,
.modern-skin-header-phone:hover {
    color: #fff !important;
    background: var(--skin-color-brand-strong);
    box-shadow: var(--skin-shadow-brand);
    transform: translateY(-1px)
}

.modern-skin-header-action-icon svg,
.modern-skin-header-action>svg,
.modern-skin-header-phone>svg {
    inline-size: 1.35rem;
    block-size: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 0;
    stroke-linecap: round;
    stroke-linejoin: round
}

.modern-skin-header-identity,
.modern-skin-header-search {
    overflow: visible
}

.modern-skin-header-action-icon {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    color: #fff;
    pointer-events: none
}

.modern-skin-header-identity>:not(.modern-skin-header-action-icon) {
    position: relative;
    z-index: 2;
    inline-size: 100%;
    block-size: 100%
}

.modern-skin-header-identity :where(a, button, .userName, .userProperties > ul > li) {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 100%;
    min-block-size: 0
}

.modern-skin-header-identity :where(.userProperties, .userProperties > ul) {
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    padding: 0;
    list-style: none
}

.modern-skin-header-identity :where(.userProperties > ul > li) {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    cursor: pointer
}

.modern-skin-header-identity :where(.userName > svg, .userName > img, .userName > span:not(.userMenu), .userName > a > svg, .userName > a > img) {
    opacity: 0
}

.modern-skin-header-identity .userMenu {
    position: absolute;
    inset-block-start: calc(100% + .75rem);
    inset-inline-end: 0;
    z-index: 1100;
    min-inline-size: 13.5rem;
    margin: 0;
    padding: .55rem;
    border: 1px solid var(--skin-color-border);
    border-radius: var(--skin-radius-md);
    background: var(--skin-color-surface-raised);
    box-shadow: var(--skin-shadow-md);
    list-style: none;
    direction: rtl;
    visibility: hidden;
    opacity: 0;
    transform: translateY(.35rem);
    pointer-events: none;
    transition: opacity var(--skin-transition), transform var(--skin-transition), visibility var(--skin-transition)
}

.modern-skin-header-identity:focus-within .userMenu,
.modern-skin-header-identity:hover .userMenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto
}

.modern-skin-header-identity .userMenu::before {
    position: absolute;
    inset-block-start: -.45rem;
    inset-inline-end: 1rem;
    inline-size: .8rem;
    block-size: .8rem;
    border-block-start: 1px solid var(--skin-color-border);
    border-inline-start: 1px solid var(--skin-color-border);
    background: var(--skin-color-surface-raised);
    transform: rotate(45deg);
    content: ""
}

.modern-skin-header-identity .userMenu li {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0
}

.modern-skin-header-identity .userMenu .ProfileName {
    margin-block-end: .35rem;
    padding: .7rem .75rem;
    color: var(--skin-color-text-soft);
    font-size: .78rem;
    font-weight: 700;
    direction: ltr;
    text-align: start
}

.modern-skin-header-identity .userMenu a {
    display: flex;
    align-items: center;
    min-block-size: 2.5rem;
    padding: .55rem .75rem;
    border-radius: var(--skin-radius-sm);
    color: var(--skin-color-text) !important;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none !important
}

.modern-skin-header-identity .userMenu a:hover {
    color: var(--skin-color-brand-strong) !important;
    background: var(--skin-color-brand-soft)
}

.modern-skin-header-identity .userMenu .userLogout a {
    margin-block-start: .3rem;
    color: var(--skin-color-danger) !important;
    border-block-start: 1px solid var(--skin-color-border)
}

@media (max-width:74rem) {
    .skin-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .skin-grid--footer {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .modern-skin-navbar {
        gap: 1rem
    }

    .modern-skin-header-actions {
        gap: .5rem
    }

    .modern-skin-header-phone {
        padding-inline: .8rem;
        inline-size: 2.75rem;
        padding: 0
    }

    .modern-skin-header-phone span {
        display: none
    }
}

.modern-skin-header-search>.lernado-search-pane,
.modern-skin-header-search>[id*=lernado-search-pane] {
    position: static;
    inline-size: 100%;
    block-size: 100%
}

.modern-skin-header-search .labelsearch,
.modern-skin-header-search [id*=lernado-search-btn] {
    display: grid !important;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: 0 0;
    color: inherit;
    cursor: pointer
}

.modern-skin-header-identity .modern-skin-identity-trigger-visual>svg,
.modern-skin-header-search .labelsearch>svg,
.modern-skin-header-search [id*=lernado-search-btn]>svg {
    inline-size: 1.35rem;
    block-size: 1.35rem;
    fill: none;
    stroke: currentColor
}

.modern-skin-header-search .lernado-search-input,
.modern-skin-header-search .lernado-search-result {
    direction: rtl;
    color: var(--skin-color-text)
}

.modern-skin-header-search .lernado-search-input {
    z-index: 1200
}

.modern-skin-header-search .lernado-search-result {
    z-index: 1210
}

.modern-skin {
    padding-block-start: var(--skin-header-size)
}

.modern-skin-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1400;
    block-size: var(--skin-header-size);
    background: var(--skin-color-surface);
    border-block-end: 1px solid color-mix(in srgb, var(--skin-color-border) 80%, transparent);
    box-shadow: none;
    backdrop-filter: none;
    transition: block-size var(--skin-transition), background-color var(--skin-transition), box-shadow var(--skin-transition), border-color var(--skin-transition)
}

.modern-skin-header .modern-skin-navbar {
    min-block-size: 0;
    padding-block: .35rem
}

.modern-skin-header .modern-skin-brand :where(img, svg) {
    inline-size: auto;
    max-inline-size: 8rem;
    max-block-size: calc(var(--skin-header-size) - .7rem);
    transition: max-block-size var(--skin-transition), max-inline-size var(--skin-transition)
}

.modern-skin-header.is-scrolled {
    block-size: var(--skin-header-size-scrolled);
    background: color-mix(in srgb, var(--skin-color-surface) 96%, transparent);
    border-block-end-color: color-mix(in srgb, var(--skin-color-brand) 14%, var(--skin-color-border));
    box-shadow: 0 .45rem 1.45rem rgb(35 7 47 / .08);
    backdrop-filter: blur(.75rem) saturate(1.15)
}

.modern-skin-header.is-scrolled .modern-skin-brand :where(img, svg) {
    max-inline-size: 7rem;
    max-block-size: calc(var(--skin-header-size-scrolled) - .55rem)
}

.modern-mobile-bottom-nav,
.modern-skin-header-identity .modern-skin-identity-trigger-label,
.modern-skin-navigation-backdrop,
.modern-skin-navigation-head {
    display: none
}

@media (max-width:61.99875rem) {

    .skin-grid--3,
    .skin-grid--3-6-3,
    .skin-grid--3-9,
    .skin-grid--4-8,
    .skin-grid--5-7,
    .skin-grid--7-5,
    .skin-grid--8-4,
    .skin-grid--9-3 {
        grid-template-columns: minmax(0, 1fr);
        align-items: center
    }

    .skin-grid--3,
    .skin-grid--3-6-3,
    .skin-grid--footer {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .modern-skin-footer-credit {
        text-align: center
    }

    .modern-skin-header-action,
    .modern-skin-header-phone {
        inline-size: 2.55rem;
        block-size: 2.55rem;
        min-block-size: 2.55rem
    }

    .modern-skin-header-action-icon svg,
    .modern-skin-header-action>svg,
    .modern-skin-header-phone>svg {
        inline-size: 1.2rem;
        block-size: 1.2rem
    }

    :root {
        --skin-header-size: 4.5rem;
        --skin-header-size-scrolled: 4rem;
        --skin-header-size: 5.5rem;
        --skin-header-size-scrolled: 4.75rem
    }

    html.skin-menu-open,
    html.skin-menu-open body {
        overflow: hidden
    }

    .modern-skin-header .modern-skin-navbar {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: .55rem;
        padding-block: .35rem
    }

    .modern-skin-brand {
        order: 1;
        margin-inline-end: 0
    }

    .modern-skin-header-actions {
        margin-inline-start: auto;
        order: 2;
        margin-inline-start: 100%
    }

    .modern-skin-menu-toggle {
        order: 0;
        display: inline-grid;
        place-items: center;
        flex: 0 0 2.65rem;
        inline-size: 2.65rem;
        block-size: 2.65rem;
        padding: .6rem
    }

    .modern-skin-navigation {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 1510;
        inline-size: min(86vw, calc(100% - 5rem));
        max-block-size: none;
        overflow: auto;
        padding: 0 1rem 1.25rem;
        color: var(--skin-color-text);
        background: var(--skin-color-surface);
        box-shadow: -1rem 0 3rem rgb(35 7 47 / .16);
        visibility: visible;
        opacity: 1;
        transform: translateX(-105%);
        transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
        overscroll-behavior: contain;
        display: none
    }

    [dir=ltr] .modern-skin-navigation {
        inset-inline-start: 0;
        inset-inline-end: auto;
        transform: translateX(-105%)
    }

    .modern-skin-navigation.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
        display: block
    }

    .modern-skin-navigation-head {
        position: sticky;
        inset-block-start: 0;
        z-index: 2;
        min-block-size: 4.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-inline: -1rem;
        padding-inline: 1rem;
        color: var(--skin-color-text);
        background: color-mix(in srgb, var(--skin-color-surface) 96%, transparent);
        border-block-end: 1px solid var(--skin-color-border);
        backdrop-filter: blur(.65rem);
        font-weight: 800
    }

    .modern-skin-navigation-close {
        position: relative;
        inline-size: 2.45rem;
        block-size: 2.45rem;
        padding: 0 !important;
        border: 1px solid var(--skin-color-border);
        border-radius: 50%;
        background: var(--skin-color-surface-muted);
        padding-block: 0;
        padding-inline: 0;
        min-block-size: 1rem
    }

    .modern-skin-navigation-close span {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 0
    }

    .modern-skin-navigation-close span::after,
    .modern-skin-navigation-close span::before {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: 1rem;
        block-size: .1rem;
        border-radius: 1rem;
        background: currentColor;
        content: ""
    }

    .modern-skin-navigation-close span::before {
        transform: translate(50%, 50%) rotate(45deg)
    }

    .modern-skin-navigation-close span::after {
        transform: translate(50%, 50%) rotate(-45deg)
    }

    .modern-skin-navigation-backdrop {
        inset: 0;
        z-index: 1500;
        padding: 0;
        border: 0;
        background: rgb(35 7 47 / .54);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms, visibility 220ms
    }

    .modern-skin-header.has-open-menu .modern-skin-navigation-backdrop {
        visibility: visible;
        opacity: 1;
        pointer-events: auto
    }

    .modern-skin-menu {
        display: block;
        padding-block: .45rem 1rem
    }

    .modern-skin-menu-item {
        border-block-start: 0;
        border-block-end: 1px solid color-mix(in srgb, var(--skin-color-border) 82%, transparent)
    }

    .modern-skin-menu-row {
        align-items: center;
        min-block-size: 3.4rem;
        padding: .25rem 0
    }

    .modern-skin-menu-link {
        min-block-size: 3rem;
        padding-inline: .55rem;
        font-size: .95rem;
        font-weight: 650
    }

    .modern-skin-submenu {
        position: static;
        min-inline-size: 0;
        max-block-size: 0;
        overflow: hidden;
        margin: 0;
        padding: 0 .65rem;
        border: 0;
        border-radius: 0;
        background: var(--skin-color-surface-muted);
        box-shadow: none;
        visibility: hidden;
        opacity: 1;
        transform: none;
        pointer-events: none;
        transition: max-block-size 260ms, padding-block 260ms, visibility 260ms
    }

    .modern-skin-menu-item.is-open>.modern-skin-submenu {
        max-block-size: 40rem;
        padding-block: .35rem .65rem;
        visibility: visible;
        pointer-events: auto;
        overflow-y: auto
    }

    .modern-skin-submenu .modern-skin-submenu {
        position: static;
        inset: auto;
        margin-inline: .4rem
    }

    .modern-skin-submenu .modern-skin-menu-row:hover {
        background: 0 0;
        color: inherit
    }

    .modern-skin-submenu .modern-skin-menu-link,
    .modern-skin-submenu .modern-skin-menu-link:hover {
        color: var(--skin-color-text) !important
    }

    .modern-skin-submenu .modern-skin-menu-link {
        min-block-size: 2.65rem;
        font-size: .88rem;
        font-weight: 550
    }

    .modern-skin-submenu-toggle {
        flex: 0 0 2.5rem;
        inline-size: 2.5rem;
        min-block-size: 2.5rem;
        border-radius: 50%;
        background: var(--skin-color-brand-soft);
        color: var(--skin-color-brand);
        transform: none
    }

    .modern-skin-header-location,
    .modern-skin-header-phone {
        display: none
    }

    .modern-mobile-bottom-nav {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 1450;
        display: block;
        block-size: calc(var(--skin-mobile-bottom-nav-size) + env(safe-area-inset-bottom, 0px));
        padding-block-end: env(safe-area-inset-bottom, 0px);
        color: #fff;
        background: linear-gradient(135deg, var(--skin-color-navy-900), var(--skin-color-brand));
        border-block-start: 1px solid rgb(255 255 255 / .12);
        box-shadow: 0 -.6rem 1.8rem rgb(35 7 47 / .18)
    }

    .modern-mobile-bottom-nav__inner {
        block-size: var(--skin-mobile-bottom-nav-size);
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        max-inline-size: 38rem;
        margin-inline: auto;
        padding-inline: .2rem
    }

    .modern-mobile-bottom-nav__item {
        position: relative;
        min-inline-size: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .28rem;
        padding: .35rem .15rem;
        color: rgb(255 255 255 / .76) !important;
        font-size: .68rem;
        font-weight: 650;
        line-height: 1.2;
        text-align: center;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent
    }

    .modern-mobile-bottom-nav__item>svg,
    .modern-mobile-bottom-nav__profile-icon svg {
        inline-size: 1.45rem;
        block-size: 1.45rem;
        color: currentColor
    }

    .modern-mobile-bottom-nav__item::after {
        position: absolute;
        inset-block-start: 0;
        inset-inline: 27%;
        block-size: .18rem;
        border-radius: 0 0 1rem 1rem;
        background: var(--skin-color-gold-500);
        opacity: 0;
        transform: scaleX(.4);
        content: "";
        transition: opacity var(--skin-transition), transform var(--skin-transition)
    }

    .modern-mobile-bottom-nav__item.is-current,
    .modern-mobile-bottom-nav__item[aria-current=page] {
        color: #fff !important
    }

    .modern-mobile-bottom-nav__item.is-current::after,
    .modern-mobile-bottom-nav__item[aria-current=page]::after {
        opacity: 1;
        transform: scaleX(1)
    }

    .modern-mobile-bottom-nav__item--primary {
        overflow: visible;
        color: #fff !important
    }

    .modern-mobile-bottom-nav__primary-icon {
        inline-size: 3rem;
        block-size: 3rem;
        display: grid;
        place-items: center;
        margin-block-start: -1.45rem;
        border: .25rem solid var(--skin-color-bg);
        border-radius: 50%;
        color: var(--skin-color-navy-950);
        background: var(--skin-color-gold-500);
        box-shadow: 0 .4rem 1rem rgb(35 7 47 / .2)
    }

    .modern-mobile-bottom-nav__primary-icon svg {
        inline-size: 1.5rem;
        block-size: 1.5rem
    }

    .modern-mobile-bottom-nav__profile {
        cursor: pointer
    }

    .modern-mobile-bottom-nav__profile-icon {
        position: absolute;
        inset-block-start: .75rem;
        pointer-events: none
    }

    .modern-mobile-bottom-nav__profile-label {
        margin-block-start: 1.7rem;
        pointer-events: none
    }

    .modern-mobile-bottom-nav__profile>:not(.modern-mobile-bottom-nav__profile-icon):not(.modern-mobile-bottom-nav__profile-label) {
        position: absolute;
        inset: 0;
        z-index: 2
    }

    .modern-mobile-bottom-nav__profile :where(.userProperties, .userProperties > ul, .userProperties > ul > li, .userProperties > ul > li > a) {
        inline-size: 100%;
        block-size: 100%;
        margin: 0;
        padding: 0;
        list-style: none
    }

    .modern-mobile-bottom-nav__profile .userMenu {
        position: fixed;
        inset-inline: .75rem;
        inset-block-end: calc(var(--skin-mobile-bottom-nav-size) + 1rem + env(safe-area-inset-bottom, 0px));
        z-index: 1600;
        max-block-size: min(65vh, 28rem);
        overflow: auto;
        margin: 0;
        padding: .65rem;
        border: 1px solid var(--skin-color-border);
        border-radius: var(--skin-radius-lg);
        background: var(--skin-color-surface);
        box-shadow: var(--skin-shadow-lg);
        list-style: none;
        direction: rtl
    }

    .modern-mobile-bottom-nav__profile .userMenu a {
        min-block-size: 2.8rem;
        display: flex;
        align-items: center;
        padding-inline: .75rem;
        border-radius: var(--skin-radius-sm);
        color: var(--skin-color-text) !important;
        text-decoration: none !important
    }

    .modern-mobile-bottom-nav__profile :where(.userName > svg, .userName > img, .userName > span:not(.userMenu), .userName > a > svg, .userName > a > img) {
        opacity: 0
    }

    .modern-skin {
        padding-block-end: calc(var(--skin-mobile-bottom-nav-size) + env(safe-area-inset-bottom, 0px))
    }

    .modern-skin-header .modern-skin-navbar {
        position: relative;
        padding: 0
    }

    .modern-skin-header .modern-skin-brand {
        z-index: 2;
        margin: 0
    }

    .modern-skin-header .modern-skin-brand :where(img, svg) {
        inline-size: auto;
        max-inline-size: 6rem;
        max-block-size: 4.5rem
    }

    .modern-skin-header.is-scrolled .modern-skin-brand :where(img, svg) {
        max-inline-size: 5.35rem;
        max-block-size: 3.85rem
    }

    .modern-skin-header .modern-skin-menu-toggle {
        z-index: 4;
        display: inline-grid;
        place-items: center;
        inline-size: 2.8rem;
        block-size: 2.8rem;
        margin: 0;
        padding: .65rem;
        border: 0;
        border-radius: .75rem;
        background: 0 0;
        box-shadow: none;
        color: var(--skin-color-brand)
    }

    .modern-skin-header .modern-skin-header-actions {
        display: flex !important;
        inline-size: 2.8rem;
        block-size: 2.8rem;
        margin: 0;
        gap: 0;
        order: 2
    }

    .modern-skin-header .modern-skin-header-actions>:not(.modern-skin-header-search) {
        display: none !important
    }

    .modern-skin-header .modern-skin-header-search {
        display: block !important;
        inline-size: 2.8rem;
        block-size: 2.8rem;
        min-block-size: 2.8rem;
        border: 0;
        border-radius: .75rem;
        background: 0 0;
        box-shadow: none;
        color: var(--skin-color-brand) !important
    }

    .modern-skin-header .modern-skin-header-search:hover {
        background: var(--skin-color-brand-soft);
        color: var(--skin-color-brand-strong) !important;
        box-shadow: none;
        transform: none
    }

    .modern-skin-header .modern-skin-header-search .lernado-search-trigger svg {
        inline-size: 1.55rem;
        block-size: 1.55rem
    }
}

@media (max-width:35.99875rem) {

    .modern-skin .container,
    .skin-container {
        inline-size: min(calc(100% - 1rem), var(--skin-content-size))
    }

    .skin-grid--2,
    .skin-grid--3,
    .skin-grid--3-6-3,
    .skin-grid--4,
    .skin-grid--footer {
        grid-template-columns: minmax(0, 1fr)
    }

    .modern-skin-footer-separator,
    .modern-skin-header-identity,
    .modern-skin-header-location {
        display: none
    }

    .modern-skin-footer-legal {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .modern-skin-header-action,
    .modern-skin-header-phone {
        inline-size: 2.35rem;
        block-size: 2.35rem;
        min-block-size: 2.35rem
    }

    .modern-skin-header-actions {
        gap: .35rem;
        display: none
    }

    .modern-skin-header-search {
        inline-size: 2.45rem;
        block-size: 2.45rem
    }

    .modern-skin-brand :where(img, svg) {
        max-inline-size: 6.25rem
    }
}

@supports (content-visibility:auto) {
    .modern-skin-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 34rem
    }
}

.goftino-wakeup {
    z-index: 300 !important;
    bottom: 5rem !important;
    right: 0 !important
}

.modern-skin-header-action.modern-skin-header-search,
.modern-skin-header-action.modern-skin-header-search:focus-within,
.modern-skin-header-action.modern-skin-header-search:hover {
    transform: none
}

.modern-skin-newsletter-control input:disabled {
    opacity: .65;
    cursor: not-allowed
}

.modern-skin-newsletter-control .Sub-Btn {
    position: relative;
    padding: 0;
    font: inherit
}

.modern-skin-newsletter-control .Sub-Btn:disabled {
    cursor: wait;
    filter: saturate(.65)
}

.modern-skin-newsletter-control .Sub-Btn.is-loading svg,
.modern-skin-newsletter-status>span:not(.is-visible) {
    opacity: 0
}

.modern-skin-newsletter-control .Sub-Btn.is-loading::after {
    content: "";
    position: absolute;
    inline-size: 1rem;
    block-size: 1rem;
    border: .12rem solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: .65s linear infinite mft-newsletter-loading
}

@keyframes mft-newsletter-loading {
    to {
        transform: rotate(360deg)
    }
}

.modern-skin-newsletter-status {
    min-block-size: 1.45rem
}

.modern-skin-newsletter-status>span {
    display: none;
    transition: opacity 180ms
}

.modern-skin-newsletter-status .error,
.modern-skin-newsletter-status .invalid {
    color: #ffd4d4
}

.modern-skin-newsletter-status .success {
    color: #c6f6d5
}

.modern-skin-trustmark {
    text-decoration: none;
    transition: transform var(--skin-transition, .2s ease), border-color var(--skin-transition, .2s ease), box-shadow var(--skin-transition, .2s ease)
}

a.modern-skin-trustmark:focus-visible {
    outline: .18rem solid var(--skin-color-gold-500, #d6a819);
    outline-offset: .2rem
}

@media (hover:hover) and (pointer:fine) {
    a.modern-skin-trustmark:hover {
        transform: translateY(-2px);
        border-color: rgb(214 168 25 / .45);
        box-shadow: 0 .7rem 1.8rem rgb(0 0 0 / .22)
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .modern-skin *,
    .modern-skin ::after,
    .modern-skin ::before {
        scroll-behavior: auto !important;
        transition-duration: NaNs !important;
        animation-duration: NaNs !important;
        animation-iteration-count: 1 !important
    }

    .modern-mobile-bottom-nav__item::after,
    .modern-skin-header,
    .modern-skin-navigation,
    .modern-skin-navigation-backdrop {
        transition: none !important
    }

    .modern-skin-newsletter-control,
    .modern-skin-newsletter-control .Sub-Btn,
    .modern-skin-trustmark {
        transition: none
    }

    .modern-skin-newsletter-control .Sub-Btn.is-loading::after {
        animation-duration: 1.25s
    }
}

.modern-skin-newsletter-status>span.is-visible {
    opacity: 1
}

.modern-skin-brand,
.modern-skin-brand-link,
.modern-skin-brand-picture {
    display: flex;
    align-items: stretch;
    block-size: 100%;
    line-height: 0
}

.modern-skin-brand-link,
.modern-skin-brand-picture {
    inline-size: auto
}

.modern-skin-brand picture>img,
.modern-skin-brand-image {
    display: block;
    inline-size: auto;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    object-fit: contain
}

.modern-skin-header-action,
.modern-skin-header-phone {
    block-size: var(--skin-header-action-size);
    min-block-size: var(--skin-header-action-size);
    border: 1px solid var(--skin-header-action-border);
    color: var(--skin-header-action-fg) !important;
    background: var(--skin-header-action-bg);
    box-shadow: var(--skin-header-action-shadow);
    transform: none;
    transition: color var(--skin-transition), background-color var(--skin-transition), border-color var(--skin-transition), box-shadow var(--skin-transition)
}

@media (min-width:62rem) {
    .modern-skin-header .modern-skin-navbar {
        padding-block: 0
    }

    .modern-skin-header .modern-skin-brand,
    .modern-skin-header .modern-skin-brand-image,
    .modern-skin-header .modern-skin-brand-link,
    .modern-skin-header .modern-skin-brand-picture {
        block-size: 100%
    }

    .modern-skin-header .modern-skin-brand :where(img, svg),
    .modern-skin-header.is-scrolled .modern-skin-brand :where(img, svg) {
        inline-size: auto;
        block-size: 100%;
        max-inline-size: none;
        max-block-size: none
    }
}

.modern-skin-header-action {
    inline-size: var(--skin-header-action-size)
}

.modern-skin-header-action:focus-within,
.modern-skin-header-action:hover,
.modern-skin-header-phone:focus-visible,
.modern-skin-header-phone:hover {
    color: var(--skin-header-action-fg) !important;
    background: var(--skin-header-action-bg-hover);
    border-color: var(--skin-header-action-border-hover);
    box-shadow: var(--skin-header-action-shadow-hover);
    transform: none
}

.modern-skin-header-action-icon svg,
.modern-skin-header-action>svg,
.modern-skin-header-phone>svg,
.modern-skin-header-search .labelsearch>svg,
.modern-skin-header-search [id*=lernado-search-btn]>svg {
    transition: transform var(--skin-transition), opacity var(--skin-transition)
}

.modern-skin-header-action:focus-within>svg,
.modern-skin-header-action:hover>svg,
.modern-skin-header-identity:focus-within .modern-skin-header-action-icon svg,
.modern-skin-header-identity:hover .modern-skin-header-action-icon svg,
.modern-skin-header-phone:focus-visible>svg,
.modern-skin-header-phone:hover>svg,
.modern-skin-header-search:focus-within .labelsearch>svg,
.modern-skin-header-search:focus-within [id*=lernado-search-btn]>svg,
.modern-skin-header-search:hover .labelsearch>svg,
.modern-skin-header-search:hover [id*=lernado-search-btn]>svg {
    transform: scale(1.08)
}

.modern-skin-header-identity :where(.userProperties, .userProperties > ul, .userProperties > ul > li, .userName, .userName > a, .userName > button),
.modern-skin-header-search :where(.labelsearch, [id*=lernado-search-btn]) {
    border: 0 !important;
    background: 0 0 !important;
    box-shadow: none !important
}

.modern-skin-header-identity :where(.userName, .userName > a, .userName > button),
.modern-skin-header-search :where(.labelsearch, [id*=lernado-search-btn]) {
    border-radius: inherit
}

.modern-skin-header-identity :where(a, button):focus-visible,
.modern-skin-header-location:focus-visible,
.modern-skin-header-phone:focus-visible,
.modern-skin-header-search :where(.labelsearch, [id*=lernado-search-btn]):focus-visible {
    outline: .15rem solid var(--skin-color-gold-500);
    outline-offset: .16rem
}

.modern-skin-footer-bottom {
    border-block-start-color: #44546d;
    background: #17243a
}

.modern-skin-footer-copyright,
.modern-skin-footer-credit,
.modern-skin-footer-legal,
.modern-skin-footer-policy {
    color: #f1f5f9 !important;
    opacity: 1 !important;
    background: 0 0 !important
}

.modern-skin-footer-bottom :where(a, span, p, strong) {
    opacity: 1 !important;
    background: 0 0 !important
}

.modern-skin-footer-credit a,
.modern-skin-footer-legal a,
.modern-skin-footer-policy a {
    color: #fff !important;
    text-decoration-color: transparent;
    text-underline-offset: .2em;
    transition: color var(--skin-transition), text-decoration-color var(--skin-transition)
}

.modern-skin-footer-credit a:focus-visible,
.modern-skin-footer-credit a:hover,
.modern-skin-footer-legal a:focus-visible,
.modern-skin-footer-legal a:hover,
.modern-skin-footer-policy a:focus-visible,
.modern-skin-footer-policy a:hover {
    color: #f6cf52 !important;
    text-decoration: underline;
    text-decoration-color: currentColor
}

.modern-skin-footer-separator {
    color: #aebbd0;
    opacity: 1
}

.modern-skin-footer-credit strong {
    color: inherit
}

.modern-skin-header-identity .modern-skin-identity-trigger,
.modern-skin-header-identity>.modern-skin-identity {
    inline-size: 100%;
    block-size: 100%
}

.modern-skin-header-identity .modern-skin-identity-trigger {
    display: grid;
    place-items: center;
    min-inline-size: 0;
    min-block-size: 0;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: inherit;
    color: inherit !important;
    background: 0 0 !important;
    box-shadow: none !important;
    line-height: 1;
    transform: none !important
}

.modern-skin-header-identity .modern-skin-identity-trigger-visual {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 1.4rem;
    block-size: 1.4rem
}

.modern-skin-header-identity .modern-skin-identity-trigger-visual>img {
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border: 2px solid;
    border-radius: 50%;
    object-fit: cover
}

.modern-skin-header-identity .modern-skin-identity-presence {
    position: absolute;
    inset-inline-end: -.12rem;
    inset-block-end: -.12rem;
    inline-size: .48rem;
    block-size: .48rem;
    border: 2px solid var(--skin-header-action-bg, var(--skin-color-brand));
    border-radius: 50%;
    background: #31c66b
}

.modern-skin-header-identity:focus-within .modern-skin-identity-presence,
.modern-skin-header-identity:hover .modern-skin-identity-presence {
    border-color: var(--skin-header-action-bg-hover, var(--skin-color-brand-strong))
}

.modern-skin-header-identity .modern-skin-identity-menu {
    position: absolute;
    inset-block-start: calc(100%);
    inset-inline-end: 0;
    z-index: 1300;
    inline-size: min(19rem, calc(100vw - 2rem));
    min-inline-size: 17rem;
    margin: 0;
    padding: .6rem;
    border: 1px solid var(--skin-color-border);
    border-radius: 1rem;
    background: var(--skin-color-surface-raised, #fff);
    color: var(--skin-color-text);
    box-shadow: 0 1rem 2.5rem rgb(31 17 38 / .18);
    direction: rtl;
    visibility: hidden;
    opacity: 0;
    transform: translateY(.45rem) scale(.985);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity var(--skin-transition), transform var(--skin-transition), visibility var(--skin-transition)
}

.modern-skin-header-identity .modern-skin-identity.is-open .modern-skin-identity-menu,
.modern-skin-header-identity .modern-skin-identity:focus-within .modern-skin-identity-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto
}

.modern-skin-identity-user {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    margin: 0 0 .45rem;
    padding: .65rem .7rem .8rem;
    border-block-end: 1px solid var(--skin-color-border)
}

.modern-skin-identity-user-avatar {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    overflow: hidden;
    border-radius: 50%;
    color: var(--skin-color-brand);
    background: var(--skin-color-brand-soft)
}

.modern-skin-identity-user-avatar svg {
    inline-size: 1.45rem;
    block-size: 1.45rem
}

.modern-skin-identity-user-meta small {
    margin-block-end: .1rem;
    color: var(--skin-color-text-soft);
    font-size: .72rem;
    font-weight: 650
}

.modern-skin-identity-user-meta strong {
    overflow: hidden;
    color: var(--skin-color-text);
    font-size: .92rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap
}

.modern-skin-identity-menu li {
    margin: 0;
    padding: 0
}

.modern-skin-identity-menu li a {
    display: flex;
    align-items: center;
    min-block-size: 2.65rem;
    padding: .6rem .75rem;
    border-radius: .7rem;
    color: var(--skin-color-text) !important;
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none !important
}

.modern-skin-identity-menu li a:focus-visible,
.modern-skin-identity-menu li a:hover {
    color: var(--skin-color-brand-strong) !important;
    background: var(--skin-color-brand-soft)
}

.modern-skin-identity-menu .modern-skin-identity-logout {
    margin-block-start: .35rem;
    padding-block-start: .35rem;
    border-block-start: 1px solid var(--skin-color-border)
}

.modern-skin-identity-menu .modern-skin-identity-logout a {
    color: var(--skin-color-danger, #b42318) !important
}

@media (max-width:61.99875rem) {

    .modern-skin-header .modern-skin-brand,
    .modern-skin-header .modern-skin-brand-link,
    .modern-skin-header .modern-skin-brand-picture {
        block-size: 100%
    }

    .modern-skin-header .modern-skin-brand :where(img, svg),
    .modern-skin-header .modern-skin-brand-image,
    .modern-skin-header.is-scrolled .modern-skin-brand :where(img, svg) {
        inline-size: auto;
        block-size: 100%;
        max-inline-size: 6rem;
        max-block-size: 100%
    }

    .modern-mobile-bottom-nav__profile,
    .modern-mobile-bottom-nav__profile :where(.userProperties, .userProperties > ul, .userProperties > ul > li, .userName, .userName > a, .userName > button),
    .modern-mobile-bottom-nav__profile>:not(.modern-mobile-bottom-nav__profile-icon):not(.modern-mobile-bottom-nav__profile-label) {
        border: 0 !important;
        border-radius: 0 !important;
        background: 0 0 !important;
        box-shadow: none !important
    }

    .modern-mobile-bottom-nav__profile :where(.userName, .userName > a, .userName > button)::after,
    .modern-mobile-bottom-nav__profile :where(.userName, .userName > a, .userName > button)::before {
        display: none !important
    }

    .modern-mobile-bottom-nav__profile :where(.userProperties > ul > li) {
        color: inherit !important
    }

    .modern-mobile-bottom-nav__profile:focus-within,
    .modern-mobile-bottom-nav__profile:hover {
        background: 0 0 !important
    }

    .modern-mobile-bottom-nav__profile {
        padding: 0 !important;
        background: 0 0 !important
    }

    .modern-mobile-bottom-nav__profile .modern-skin-identity-trigger,
    .modern-mobile-bottom-nav__profile>.modern-skin-identity {
        inline-size: 100%;
        block-size: 100%
    }

    .modern-mobile-bottom-nav__profile .modern-skin-identity-trigger {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .28rem;
        margin: 0;
        padding: .48rem .2rem .36rem;
        border: 0 !important;
        border-radius: 0 !important;
        color: inherit !important;
        background: 0 0 !important;
        box-shadow: none !important;
        font: inherit;
        text-decoration: none !important;
        transform: none !important
    }

    .modern-mobile-bottom-nav__profile .modern-skin-identity-trigger-visual {
        position: relative;
        display: grid;
        place-items: center;
        inline-size: 1.5rem;
        block-size: 1.5rem
    }

    .modern-mobile-bottom-nav__profile .modern-skin-identity-trigger-visual>svg {
        inline-size: 1.45rem;
        block-size: 1.45rem;
        fill: none;
        stroke: currentColor
    }

    .modern-mobile-bottom-nav__profile .modern-skin-identity-trigger-visual>img {
        inline-size: 1.65rem;
        block-size: 1.65rem;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        object-fit: cover
    }

    .modern-mobile-bottom-nav__profile .modern-skin-identity-trigger-label {
        display: block;
        max-inline-size: 100%;
        overflow: hidden;
        font-size: .68rem;
        font-weight: 700;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .modern-mobile-bottom-nav__profile .modern-skin-identity-presence {
        position: absolute;
        inset-inline-end: -.18rem;
        inset-block-end: -.1rem;
        inline-size: .43rem;
        block-size: .43rem;
        border: 1.5px solid var(--skin-color-bg);
        border-radius: 50%;
        background: #31c66b
    }

    .modern-mobile-bottom-nav__profile .modern-skin-identity-menu {
        position: fixed;
        inset-inline: .75rem;
        inset-block-start: auto;
        inset-block-end: calc(var(--skin-mobile-bottom-nav-size) + .85rem + env(safe-area-inset-bottom, 0px));
        z-index: 1700;
        inline-size: auto;
        min-inline-size: 0;
        max-block-size: min(70svh, 31rem);
        overflow: auto;
        overscroll-behavior: contain;
        margin: 0;
        padding: .65rem;
        border: 1px solid var(--skin-color-border);
        border-radius: 1.1rem;
        background: var(--skin-color-surface-raised, #fff);
        color: var(--skin-color-text);
        box-shadow: 0 -1rem 2.5rem rgb(31 17 38 / .2);
        visibility: hidden;
        opacity: 0;
        transform: translateY(.7rem) scale(.99);
        transform-origin: bottom center;
        pointer-events: none;
        transition: opacity var(--skin-transition), transform var(--skin-transition), visibility var(--skin-transition)
    }

    .modern-mobile-bottom-nav__profile .modern-skin-identity.is-open .modern-skin-identity-menu,
    .modern-mobile-bottom-nav__profile .modern-skin-identity:focus-within .modern-skin-identity-menu {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto
    }

    .modern-mobile-bottom-nav__profile .modern-skin-identity-user {
        grid-template-columns: 3.2rem minmax(0, 1fr);
        text-align: start
    }
}