/*
  ____   ____    _     ____  _____    ____
 / ___| |  _ \  / \   / ___|| ____|  | ___|
 \___ \ | |_) |/ _ \ | |    |  _|    |___ \
  ___) ||  __// ___ \| |___ | |___    ___) |
 |____/ |_|  /_/   \_\\____||_____|  |____/

 space 5 ♦ CSS
 [Astrum Template]

*/

/*   (1) Base settings ------- ------- ------- ------- ------- */

/*   :: import ---   */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    /* Fonts 2 */
    --wf: "Inter", sans-serif;
    --wf2: "Inter", sans-serif;

    /* Transitus START */

    /* Theme colors */
    --color-primary: #164194;
    --color-primary-light: #1a4bab;
    --color-primary-dark: #0e3787;
    --color-secondary: #798f96;
    --color-secondary-light: #8da4ab;
    --color-secondary-dark: #657c84;
    --color-accent: #ed1c24;
    --color-accent-light: #ff3a42;
    --color-accent-dark: #d20911;
    --color-dark: #192a3e;
    --color-white: #ffffff;
    --color-bg: #f0f4f8;

    /* Content */
    --color-text: var(--color-dark);
    --color-text-grey: #737373;
    --color-text-light-grey: #a2a2a2;
    --color-text-accent: var(--color-accent);
    --color-text-heading: var(--color-primary-dark);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-text);
    --color-link-active: var(--color-text);
    --color-icon-grey: var(--color-text-grey);
    --color-icon-active: var(--color-text);
    --thover: rgba(0, 0, 0, 0.10);
    --trans: all 0.2s;

    /* Font sizes */
    --size-text: 1rem;
    --size-text-note: 0.8rem;
    --size-heading-xl: 1.8rem;
    --size-heading-l: 1.64rem;
    --size-heading-m: 1.48rem;
    --size-heading-s: 1.32rem;
    --size-heading-xs: 1.2rem;

    /* Support colors */
    --color-orange: #ffb946;
    --color-red: #f7685b;
    --color-green: #2ed47a;
    --color-blue: #104ae0;
    --color-purple: #885af8;

    /* UI Sizes */
    --ui-size: 36px;
    --ui-size-s: 24px;
    --ui-size-l: 44px;
    --ui-radius: 8px;

    /* UI Colors */
    --ui-bg-100: #e6eef6;
    --ui-bg-200: #dbe8f4;
    --ui-bg-300: #c3d6e8;
    --ui-input-bg: #ffffff;
    --ui-input-bg-active: #dee7ff;
    --ui-input-bg-disabled: #eff2f6;
    --ui-color-primary: #164194;
    --ui-color-primary-active: var(--color-primary);
    --ui-color-primary-hover: #2053b5;
    --ui-color-text: var(--color-dark);
    --ui-color-text-hover: var(--ui-color-primary-hover);
    --ui-color-text-active: var(--ui-color-primary);
    --ui-color-text-disabled: #bababa;
    --ui-color-text-grey: #737373;
    --ui-color-text-light-grey: #9b9b9b;
    --ui-color-placeholder: var(--ui-color-text-grey);
    --ui-color-border: #b8becb;
    --ui-color-border-active: #7c8fb6;
    --ui-color-border-hover: #95a3c1;

    /* Buttons */
    --color-btn: var(--ui-color-primary);
    --color-btn-hover: var(--ui-color-primary-hover);
    --color-btn-text: var(--color-white);
    --color-btn-text-hover: var(--color-white);
    --color-btn-sec: #dbe7ff;
    --color-btn-sec-hover: #e6eeff;
    --color-btn-sec-text: var(--color-primary);
    --color-btn-sec-text-hover: var(--color-primary);

    /* UI Borders */
    --ui-input-border: 1px solid var(--ui-color-border);
    --ui-input-border-active: 1px solid var(--ui-color-border-active);
    --ui-input-border-hover: 1px solid var(--ui-color-border-hover);

    /* Transitus END */

    /* UI Shadows */
    --ui-shadow-focus: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 2px #b5c9fc;
    --ui-shadow-error: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 2px #fcb5b5;

    /*UI Transitions */
    --ui-trans: 0.16s ease;

    /* Box-Shadows */
    --sp-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sp-shadow-s: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --sp-shadow-m: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sp-shadow-l: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --sp-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);


    /* Objects */
    --gf: 8px; /* grid flow */
    --gap: 16px; /* grid gap */
    --header-height: 48px;
    --wid: 1280px; /* max-width of content */
    --content-width: 600px; /* max-width of text content */


    /* SP5 DEV */
    --sp5-1: #05e745;
    --sp5-2: #222e4e;

}

/*   :: VARS ---   */

/*   :: Base tags ---   */
*, ::after, ::before {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    color: var(--color-text);
    font-family: var(--wf), Helvetica, Arial, sans-serif;
    font-size: var(--size-text);
    background: var(--color-bg);
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

a,
a:link,
a:visited,
a:active {
    color: var(--color-link);
    text-decoration: none;
    transition: var(--trans);
}

a:hover {
    color: var(--color-link-hover);
}


/*   (2) SP5 Tokens ------- ------- ------- ------- ------- */

.wid {
    width: 100%;
    max-width: var(--wid);
    min-width: 748px;
    margin: 0 auto;
}

.wa {
    width: auto;
}

.fw {
    width: 100%;
}


.wf {
    font-family: var(--wf);
}

.wf2 {
    font-family: var(--wf2);
}

.cimg, .tac {
    text-align: center;
}

.tal {
    text-align: left;
}

.tar {
    text-align: right;
}


.fb {
    font-weight: bold;
}

.fi {
    font-style: italic;
}

.fsn {
    font-size: var(--size-text-note);
}

.ca {
    color: var(--color-accent);
}

.cp {
    color: var(--color-primary);
}

.cg {
    color: var(--color-text-grey);
}

.clg {
    color: var(--color-text-light-grey);
}

.nwp {
    white-space: nowrap;
}

.hide-on-mobile, .hom {
    display: block;
}

.show-on-mobile, .som {
    display: none;
}

.dn {
    display: none !important;
}

.clicked-item {
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.clicked-item:hover {
    transition: all 0.2s;
    text-decoration: underline;
}


.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    :ROOT {
        --wid: 100%;
    }

    .wid {
        max-width: 100%;
        min-width: 100%;
    }

    .hide-on-mobile, .hom {
        display: none;
    }

    .show-on-mobile, .som {
        display: block;
    }
}

/*   (3) SP5 Service classes ------- ------- ------- ------- ------- */

/*   :: Pads ---   */
.pad-1 {
    width: 100%;
    height: 1px;
}

.pad-4 {
    width: 100%;
    height: 4px;
}

.pad-x1 {
    width: 100%;
    height: var(--gf);
}

.pad-x2 {
    width: 100%;
    height: calc(var(--gf) * 2);
}

.pad-x3 {
    width: 100%;
    height: calc(var(--gf) * 3);
}

.pad-x4 {
    width: 100%;
    height: calc(var(--gf) * 4);
}

.pad-x5 {
    width: 100%;
    height: calc(var(--gf) * 5);
}

.pad-x6 {
    width: 100%;
    height: calc(var(--gf) * 6);
}

.pad-x8 {
    width: 100%;
    height: calc(var(--gf) * 8);
}

/*   :: SP5 icons ---   */
[class*='spis-'] {
    stroke: var(--color-icon-grey);
    fill: none;
    flex-shrink: 0;
}

[class*='spis-']:hover {
    stroke: var(--color-icon-active);
}

.spis {
    stroke: var(--color-icon-grey);
    fill: none;
}

.spis-16 {
    width: 16px;
    height: 16px;
}

.spis-24 {
    width: 24px;
    height: 24px;
}

.spis-32 {
    width: 32px;
    height: 32px;
}

[class*='spif-'] {
    fill: var(--color-icon-grey);
    stroke: none;
    flex-shrink: 0;
}

[class*='spif-']:hover {
    fill: var(--color-icon-active);
}

.spif {
    fill: var(--color-icon-grey);
    stroke: none;
}


.spif-16 {
    width: 16px;
    height: 16px;
}

.spif-24 {
    width: 24px;
    height: 24px;
}

.spif-32 {
    width: 32px;
    height: 32px;
}

.itext {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[class*='itext-'] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[class*='itext-'] img {
    flex-shrink: 0;
}

[class*='itext-'] svg {
    flex-shrink: 0;
}

/* 16 */
.itext-16 img {
    width: 16px;
    flex-shrink: 0;
}

.itext-16 svg {
    width: 16px;
    height: 16px;
}

/* 24 */
.itext-24 img {
    width: 24px;
}

.itext-24 svg {
    width: 24px;
    height: 24px;
}

/* 32 */
.itext-32 img {
    width: 32px;
}

.itext-32 svg {
    width: 32px;
    height: 32px;
}

/* 40 */
.itext-40 img {
    width: 40px;
}

.itext-40 svg {
    width: 40px;
    height: 40px;
}

/* 48 */
.itext-48 img {
    width: 48px;
}

.itext-48 svg {
    width: 48px;
    height: 48px;
}

/* itext pan */
.itext-pan {
    display: flex;
    padding: var(--gap) 0;
    margin: var(--gf) 0;
}

.itext-pan [class*='itext-'] {
    margin-right: var(--gap);
}

/*   :: Made in space5 ---   */
.madeinsp5 {
    display: inline-block;
    background: transparent url("../img/sp5-logo.svg") no-repeat;
    background-size: contain;
    width: 56px;
    height: 33px;
    filter: grayscale(100%);
    transition: var(--trans);
}

.madeinsp5:hover {
    filter: none;
}

/*   :: Video responsive ---   */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* /Video responsive */

/*   (4) SP5 Grid ------- ------- ------- ------- ------- */
.grid-wr {
    display: grid;
    grid-template-columns: 1fr minmax(320px, var(--wid)) 1fr;
}

.grid-a {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    grid-gap: var(--gap);
}

.grid-line {
    grid-column: 1/-1;
}

.grid-a240 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: var(--gap);
}

[class*='grid-c-'] {
    display: grid;
    grid-gap: var(--gap);
    align-items: start;
}

.grid-c-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-c-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-c-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-c-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-7 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-8 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-9 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-10 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-11 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-c-12 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 768px) {
    [class*='grid-c-'] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/*   (5) SP5 Buttons ------- ------- ------- ------- ------- */
.btn, a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);
    padding: 0 24px;
    border-radius: var(--gf);
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--color-btn-text);
    background: var(--color-btn);
    transition: var(--ui-trans);
    font-size: var(--size-text);
    line-height: 1;
    font-family: inherit;

    height: var(--ui-size);
}

.btn:hover {
    transition: var(--ui-trans);
    background: var(--color-btn-hover);
    color: var(--color-btn-text-hover);
}

.btn--sec, a.btn--sec {
    background: var(--color-btn-sec);
    color: var(--color-btn-sec-text);
}

.btn--sec:hover {
    background: var(--color-btn-sec-hover);
    color: var(--color-btn-sec-text-hover);
}

/* btn icon */
.btn svg {
    fill: none;
    stroke: currentColor;
    width: 16px;
    height: 16px;
}

.btn svg.spif {
    fill: currentColor;
    stroke: none;
}

.btn:hover svg.spif {
    fill: currentColor;
    stroke: none;
}

.btn svg.spis {
    stroke: currentColor;
    fill: none;
}

.btn:hover svg.spis {
    stroke: currentColor;
    fill: none;
}

.btn img {
    width: 16px;
    height: 16px;
}


/* btn sizes --- */
.btn--s, a.btn--s, .btn.ui-s, a.btn.ui-s {
    height: var(--ui-size-s);
    padding: 0 16px;
    font-size: 0.8rem;
}

.ui-s svg, .btn--s svg {
    width: 16px;
    height: 16px;
}

.btn--l, a.btn--l, .btn.ui-l, a.btn.ui-l {
    height: var(--ui-size-l);
    padding: 0 32px;
}

.btn--l svg, .btn.ui-l svg {
    width: 16px;
    height: 16px;
}

/* btn outline */
.btn--outline, a.btn--outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--ui-color-border);
}

.btn--outline svg {
    stroke: var(--color-text);
}

.btn--outline:hover {
    color: var(--color-text);
    background: var(--color-btn-sec-hover);
    border-color: var(--ui-color-border-hover);
}

.btn--outline:hover svg {
    stroke: currentColor;
}

/* /btn outline */

/* btn ghost */
.btn--ghost, a.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
}

.btn--ghost svg {
    stroke: var(--color-text);
}

.btn--ghost:hover {
    background: var(--thover);
    color: var(--color-text);
    border-color: transparent;
}

.btn--ghost:hover svg {
    stroke: currentColor;
}

/* /btn ghost */

/* btn ui */
.btn--ui, a.btn--ui {
    border: none;
    background: none;
    padding: 0;
    width: var(--ui-size);
    height: var(--ui-size);
    color: var(--color-icon-grey);
    font-size: var(--size-text-note);
}

.btn--s.btn--ui, .ui-s.btn--ui, a.ui-s.btn--ui {
    padding: 0;
    width: var(--ui-size-s);
    height: var(--ui-size-s);
}

.btn--l.btn--ui, .ui-l.btn--ui, a.ui-l.btn--ui {
    padding: 0;
    width: var(--ui-size-l);
    height: var(--ui-size-l);
}

.btn--ui svg {
    stroke: currentColor;
    margin: 0;
}

.btn--ui:hover {
    background: var(--thover);
    color: var(--color-text);
}

/* /btn ui*/

/* btn micro */
.btn--micro, a.btn--micro {
    padding: 0;
    font-size: var(--size-text-note);
    background: transparent;
    border: none;
    color: var(--color-icon-grey);
    height: auto;
}

.btn--micro svg {
    width: calc(var(--gf) * 2);
    height: calc(var(--gf) * 2);
    stroke: var(--color-icon-grey);
}

.btn--micro:hover {
    color: var(--color-text);
    background: none;
}

.btn--micro:hover svg {
    stroke: var(--color-text);
}

/* /btn micro */

/* btn disabled */
a.btn--disabled, .btn--disabled, .btn:disabled, a.btn:disabled {
    color: var(--ui-color-text-disabled);
    background: var(--ui-input-bg-disabled);
    box-shadow: none;
    cursor: default;
    user-select: none;
}

a.btn--disabled:hover, .btn--disabled:hover, .btn:disabled:hover, a.btn:disabled:hover {
    color: var(--ui-color-text-disabled);
    background: var(--ui-input-bg-disabled);
    cursor: default;
    box-shadow: none;
    user-select: none;
}

a.btn--disabled svg, .btn--disabled svg, .btn:disabled svg, a.btn:disabled svg {
    stroke: var(--ui-color-text-disabled);
}

/* btn pan */
.btn-pan {
    display: flex;
    padding: var(--gap) 0 0 0;
    gap: var(--gap);
}

.btn-pan--thin {
    padding: 0;
    margin: 0;
}

.btn-pan--center {
    justify-content: center;
}

.btn-pan--right {
    justify-content: flex-end;
}

.btn-pan--col {
    flex-flow: column;
}


/* /btn pan */

/*   (6) SP5 Forms ------- ------- ------- ------- ------- */
input {
    accent-color: var(--ui-color-primary);
}

.sf {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.sf__footer {
    margin-top: var(--gf);
}

.sf__form {
}

.sf__fieldset {
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--gf);
    border-radius: calc(var(--ui-radius) * 2);
}

.sf__fieldset:not(:last-child) {
    margin-bottom: calc(var(--gap) * 1.5);
}

.sf__legend {
    font-size: var(--size-heading-xs);
    color: var(--color-primary);
    padding: var(--gf);
}

.sf__line {
    margin: 0 0 var(--gap) 0;
}

.sf .sf__line {
    margin: 0;
}

.sf__line:last-child {
    margin: 0;
}

.sf__label {
    display: flex;
    align-items: center;
    gap: calc(var(--gf) / 2);
    color: var(--ui-color-text);
}

.sf__label--col {
    flex-direction: column;
    align-items: flex-start;
}

.sf__label + .sf__input {
    margin-top: calc(var(--gf) / 2);
}

.sf__label + .sf__select {
    margin-top: calc(var(--gf) / 2);
}

.sf__label + .sf__textarea {
    margin-top: calc(var(--gf) / 2);
}

.sf__label:has(input:disabled) {
    color: var(--ui-color-text-disabled);
}

.sf__input, .sf__textarea, .sf__select {
    border: var(--ui-input-border);
    background: var(--ui-input-bg);
    color: var(--ui-color-text);
    font-size: 14px;
    border-radius: var(--ui-radius);
    width: 200px;
}

.sf__input.fw, .sf__textarea.fw, .sf__select.fw {
    width: 100%;
    max-width: 100%;
}

.sf__input--a, .sf__textarea--a, .sf__select--a {
    width: auto;
    max-width: 200px;
}

.sf__input {
    padding: 0 12px;
    height: var(--ui-size);
}

.sf__select {
    padding: 0 12px;
    height: var(--ui-size);

    /*todo appearance with arrows   */
    /*
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;*/
}

.sf__input:hover {
    border: var(--ui-input-border-hover);
}

.sf__textarea:hover {
    border: var(--ui-input-border-hover);
}

.sf__select:hover {
    border: var(--ui-input-border-hover);
}

button:focus, .btn:focus, a.btn:focus, .sf__input:focus, .sf__textarea:focus, .sf__select:focus {
    outline: none;
}

button:focus-visible, .btn:focus-visible, a.btn:focus-visible, .sf__input:focus-visible, .sf__textarea:focus-visible, .sf__select:focus-visible {
    box-shadow: var(--ui-shadow-focus);
}

.sf__select option {
    padding: 8px;
}

.sf__input::placeholder {
    color: var(--ui-color-placeholder);
    font-family: inherit;
}

.sf__textarea {
    padding: 8px;
    width: 100%;
}

.sf__textarea::placeholder {
    color: var(--ui-color-placeholder);
    font-family: inherit;
}

.sf__input--m, .sf__select--m {
    width: 168px;
}

.sf__textarea--m {
    width: 75%;
}

.sf__input--s, .sf__select--s {
    width: 92px;
}

.sf__textarea--s {
    width: 50%;
}

.sf__input--a, .sf__select--a {
    width: fit-content;
}

.sf__input.ui-s, .sf__select.ui-s {
    height: var(--ui-size-s);
}

.sf__input.ui-l, .sf__select.ui-l {
    height: var(--ui-size-l);
}

.sf__select[multiple] {
    height: auto;
    overflow: hidden;
}

.sf__input[type="range"] {
    padding: 0;
}

.sf__input--error, .sf__textarea--error, .sf__select--error {
    box-shadow: var(--ui-shadow-error);
}

.sf__input--error::placeholder, .sf__textarea--error::placeholder, .sf__select--error::placeholder {
    color: var(--color-red);
}

/* SP Checkbox and Radio */

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type=checkbox],
    input[type=radio] {
        --active-inner: var(--ui-input-bg);
        --focus: var(--color-primary);
        /*  --disabled: #F6F8FF;
          --disabled-inner: #E1E6F9;*/
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--ui-color-border));
        background: var(--b, var(--ui-input-bg));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
        flex-shrink: 0;
    }

    input[type=checkbox]:after,
    input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform 0.3s var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    input[type=checkbox]:checked,
    input[type=radio]:checked {
        --b: var(--ui-color-primary);
        --bc: var(--ui-color-border-active);
        --d-o: .3s; /* delay opacity */
        --d-t: .6s; /* delay transform */
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2); /* delay ease */
    }

    input[type=checkbox]:disabled,
    input[type=radio]:disabled {
        --b: var(--ui-input-bg-disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }

    input[type=checkbox]:disabled:checked,
    input[type=radio]:disabled:checked {
        --b: var(--ui-input-bg-disabled);
        --bc: var(--ui-color-border);
    }

    input[type=checkbox]:disabled + label,
    input[type=radio]:disabled + label {
        cursor: not-allowed;
    }

    input[type=checkbox]:hover:not(:checked):not(:disabled),
    input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--ui-color-border-hover);
    }

    input[type=checkbox]:focus,
    input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus);
    }

    input[type=checkbox]:not(.sp-switch),
    input[type=radio]:not(.sp-switch) {
        width: 21px;
    }

    input[type=checkbox]:not(.sp-switch):after,
    input[type=radio]:not(.sp-switch):after {
        opacity: var(--o, 0);
    }

    input[type=checkbox]:not(.sp-switch):checked,
    input[type=radio]:not(.sp-switch):checked {
        --o: 1;
    }

    input[type=checkbox] + label,
    input[type=radio] + label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }

    input[type=checkbox]:not(.sp-switch) {
        border-radius: 8px;
    }

    input[type=checkbox]:not(.sp-switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }

    input[type=checkbox]:not(.sp-switch):checked {
        --r: 43deg;
    }

    input[type=checkbox].sp-switch {
        width: 38px;
        border-radius: 11px;
    }

    input[type=checkbox].sp-switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--ui-color-border));
        transform: translateX(var(--x, 0));
    }

    input[type=checkbox].sp-switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }

    input[type=checkbox].sp-switch:disabled:not(:checked):after {
        opacity: 0.6;
    }

    input[type=checkbox]:disabled:not(.sp-switch):after {
        border-color: var(--ui-color-border);
    }

    input[type=radio] {
        border-radius: 50%;
    }

    input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }

    input[type=radio]:checked {
        --s: .5;
    }

    input[type=radio]:disabled:after {
        background: var(--ui-color-border);
    }
}

/* /SP Checkbox and Radio */

/* radio-group */
.sp-radio-group {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
}

.sp-radio-group__item {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.sp-radio-group input[type=radio] {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.sp-radio-group-item__text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gf);

    cursor: pointer;
    background-color: var(--color-white);
    padding: var(--gf) var(--gap);
    position: relative;
    margin-left: -1px;
    border: var(--ui-input-border);
    letter-spacing: .05em;
    color: var(--ui-color-text);
    text-align: center;
    transition: background-color .3s ease;
}

.sp-radio-group-item__text svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--ui-color-text);
}

.sp-radio-group input[type="radio"]:checked + .sp-radio-group-item__text {
    border: 1px solid var(--ui-color-border-active);
    background-color: var(--ui-input-bg-active);
    z-index: 1;
    color: var(--ui-color-text-active);
}

.sp-radio-group input[type="radio"]:checked + .sp-radio-group-item__text svg {
    stroke: currentColor;
}

.sp-radio-group__item:first-child .sp-radio-group-item__text {
    border-radius: var(--gf) 0 0 var(--gf);
}

.sp-radio-group__item:last-child .sp-radio-group-item__text {
    border-radius: 0 var(--gf) var(--gf) 0;

}

/* Disabled */
.sp-radio-group input[type=radio]:disabled + .sp-radio-group-item__text {
    background: var(--ui-input-bg-disabled);
    color: var(--ui-color-text-disabled);
    cursor: default;
    user-select: none;
}

/* /radio-group */

/* SP Radio Toggle */
.sp-radio-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: calc(var(--ui-size) / 2);
    background: var(--ui-input-bg-disabled);
    font-size: var(--size-text-note);
    transition: var(--ui-trans);
    color: var(--ui-color-text);
    width: fit-content;
    height: var(--ui-size);
}

.sp-radio-toggle .sp-radio-toggle__label {
    flex: 1 1 auto;
    text-align: center;
}

.sp-radio-toggle .sp-radio-toggle__label input {
    opacity: 0;
    position: absolute;
    width: 0;
}

.sp-radio-toggle .sp-radio-toggle__label .sp-radio-toggle__text {
    height: calc(var(--ui-size) - 8px);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    border-radius: var(--gap);
    padding: 0 var(--gf);
    transition: all .15s ease-in-out;
    color: var(--ui-color-text-disabled);
    cursor: pointer;
}

.sp-radio-toggle .sp-radio-toggle__label .sp-radio-toggle__text:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ui-color-text-hover);
}

.sp-radio-toggle .sp-radio-toggle__label input:checked + .sp-radio-toggle__text {
    background: var(--ui-color-primary);
    color: var(--color-white);
}

.sp-radio-toggle .sp-radio-toggle__label input:checked + .sp-radio-toggle__text:hover {
    background: var(--ui-color-primary-hover);
    color: var(--color-white);
}

/* /SP Radio Toggle */

/* SP Radio Box    */
.sp-radio-box-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gf);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sp-radio-box__input:checked + .sp-radio-box-card {
    border-color: var(--ui-shadow-focus);
    color: var(--ui-color-border-active);
}

.sp-radio-box__input:checked + .sp-radio-box-card:before {
    transform: scale(1);
    opacity: 1;
    background-color: var(--ui-color-primary-active);
    border-color: var(--ui-color-border-active);
}


.sp-radio-box__input:checked + .sp-radio-box-card .sp-radio-box__text {
    color: var(--ui-color-text-active);
}

.sp-radio-box__input:focus + .sp-radio-box-card {
    border-color: var(--ui-color-border-active);
    box-shadow: var(--ui-shadow-focus);
}

.sp-radio-box__input:focus + .sp-radio-box-card:before {
    transform: scale(1);
    opacity: 1;
}

.sp-radio-box-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 80px;
    height: 80px;
    padding: 4px;
    border-radius: var(--gf);
    border: var(--ui-input-border);
    background-color: var(--color-white);
    transition: var(--ui-trans);
    cursor: pointer;
    position: relative;
}

.sp-radio-box-card:before {
    content: "";
    position: absolute;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border: var(--ui-input-border);
    background-color: #fff;
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: var(--ui-trans);
}

.sp-radio-box-card:hover {
    border: var(--ui-input-border-hover);
}

.sp-radio-box-card:hover:before {
    transform: scale(1);
    opacity: 1;
}

.sp-radio-box-card__example {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.sp-radio-box-card__example img {
    width: 40px;
    height: 40px;
}

.sp-radio-box__text {
    color: var(--ui-color-text-grey);
    transition: 0.375s ease;
    text-align: center;
    font-size: 12px;
    line-height: 1;
}

input[type="radio"].sp-radio-box__input {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    outline: 1px solid red;
}

/* /SP Radio Box    */

.sp-tab-sections-group {
}

.sp-tab-section {
    display: none;
}

.sp-tab-section--active {
    display: block;
}

/* SP Chips */
.sp-chips-pan {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gf);
}

.sp-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: 4px 4px 4px var(--gap);
    border-radius: var(--gap);
    background: rgba(0, 0, 0, 0.05);
    font-size: var(--size-text-note);
    transition: var(--ui-trans);
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
}

.sp-chip:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
}

.sp-chip svg {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    width: 20px;
    height: 20px;
    padding: 2px;
    fill: none;
    stroke: rgba(0, 0, 0, 0.42);
    flex-shrink: 0;
}

.sp-chip:hover svg {
    stroke: rgba(0, 0, 0, 0.6);
}

.sp-chip--disabled {
    outline: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    color: rgba(0, 0, 0, 0.3);
}

.sp-chip--disabled:hover {
    background: transparent;
    cursor: auto;
    color: rgba(0, 0, 0, 0.3);
}

.sp-chip--disabled svg {
    opacity: 0.2;
}

.sp-chip--disabled:hover svg {
    opacity: 0.2;
}

/* /SP Chips */

/* SP Toggle */
.sp-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: calc(var(--ui-size) / 2);
    background: var(--ui-bg-100);
    font-size: var(--size-text-note);
    transition: var(--ui-trans);
    cursor: pointer;
    color: var(--ui-color-text);
    width: fit-content;
    height: var(--ui-size);
}

.sp-toggle__item {
    height: calc(var(--ui-size) - 8px);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
    border-radius: var(--gap);
    padding: 0 var(--gf);
    transition: var(--ui-trans);
    color: var(--ui-color-text-light-grey);
}

.sp-toggle__item:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--ui-color-text-grey);
}

.sp-toggle__item--active, .sp-toggle__item--active:hover {
    background: var(--color-white);
    color: var(--ui-color-text);
}

/* /SP Toggle */


/*   (7) SP5 Typographic ------- ------- ------- ------- ------- */
h1, h2, h3, h4, h5 {
    font-family: var(--wf2);
    margin: 0;
    padding: 16px 0;
    font-weight: 600;
}

h1 {
    font-size: var(--size-heading-xl);
}

h2 {
    font-size: var(--size-heading-l);
}

h3 {
    font-size: var(--size-heading-m);
}

h4 {
    font-size: var(--size-heading-s);
}

h5 {
    font-size: var(--size-heading-xs);
}

p {
    line-height: 1.2;
}

/*   (8) SP5 Components ------- ------- ------- ------- ------- */
/* Product card
------- ------- ------- */
.pcard {
    text-align: center;
    background: var(--color-white);
    color: var(--color-text);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    max-width: 300px;
}

.pcard:hover {
    transition: all 0.2s;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.pcard__body {
    position: relative;
}

.pcard__body, .pcard__footer {
    width: 100%;
    padding: var(--gap);
}

.pcard__footer {
    padding: 0 16px 16px 16px;
}

.pcard__img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.pcard__title {
    font-family: var(--wf2);
    font-size: var(--size-heading-xs);
    font-weight: bold;
    padding: 6px 0;
}

.pcard__price {
    margin: 16px 0;
    text-align: center;
    font-size: var(--size-heading-s);
    color: var(--color-text);
    height: 46px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pcard__old-price {
    display: block;
    color: var(--color-text-grey);
    text-decoration: line-through;
    font-size: var(--size-text-note);
    text-align: center;
}

.pcard__notexist {
    text-align: center;
    font-size: var(--size-heading-s);
    color: var(--color-red);
}

.pcard__pad {
    padding: 8px 0;
    text-align: center;
}

a.pcard__btn {
    display: inline-flex;
    background: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
    padding: 6px 24px;
    border-radius: 4px;
    border: none;
    text-align: center;
    transition: var(--trans);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}

a.pcard__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transition: var(--trans);
}

.pcard-icon {
    width: 24px;
    height: 20px;
    background-size: cover;
    margin: 0 4px;
}

.label-box {
    position: absolute;
    top: 24px;
    left: 0;
    display: flex;
    flex-direction: column;
}

.label {
    margin: 0 0 8px 0;
}

.label--new {
    background: var(--color-secondary);
    color: var(--color-text);
    box-sizing: border-box;
    padding: 4px 32px;
}

.label--hit {
    width: 33px;
    height: 16px;
    background-size: cover;
}

.label--discount {
    width: 93px;
    height: 16px;
    background-size: cover;
}

@media screen and (max-width: 768px) {
    .pcard {
        margin: 0 16px;
    }
}

/* /Product card */

/* Crumbs
------- ------- ------- */
.breadcrumb {
    font-size: var(--size-text-note);
    line-height: 120%;
    color: var(--color-text-grey);
    margin: 24px 0 16px 0;
    padding: 0;
    display: inline-flex;
    gap: var(--gf);
}

.breadcrumb a {
    color: var(--color-link);
}

.breadcrumb a:hover {
    color: var(--color-link-hover);
}

.breadcrumb li {
    list-style: none;
}

.breadcrumb li:after {
    content: '/';
    margin: 0 0 0 6px;
    color: var(--color-text-grey);
}

.breadcrumb li:last-child:after {
    content: '';
}

/* /Crumbs */

/* Pagination */
.pagination-nav {
    display: flex;
    justify-content: center;
}

.pagination {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--gf);
}

.pagination li {
    margin: 0 1px;
}

.pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--ui-radius);
    text-decoration: none;
    color: var(--color-text);
    height: var(--ui-size-s);
    font-size: var(--size-text-note);

}

.pagination a:hover {
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.pagination svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.pagination a[aria-current="page"] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* /Pagination */

/*   (9) SP5 Basic Layout ------- ------- ------- ------- ------- */

/* for fixed footer */
.body {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* /for fixed footer */

/* Header
------- ------- ------- */
.header-wrapper {
    border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
    background: var(--color-white);
}

.header {
    display: flex;
    gap: var(--gap);
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 var(--gap);
}

.header__left {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.header-logo__img {
    height: 24px;
}

.header-logo__text {
    font-size: 1.6rem;
}

.header__center {
}

.header__right {
}

/* /Header */

/* MAIN NAV
------- ------- ------- */

.nav-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    transition: var(--ui-trans);
    border-radius: var(--gf);
    border: none;
    cursor: pointer;
    color: var(--color-text-grey);
}

.nav-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
}

.nav-icon:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-text);
    transition: var(--ui-trans);
}

.mobnav__text {
    margin: 0 0 0 8px;
}

.nav {
    min-width: 240px;
}

a.nav-link {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-items: start;
    gap: 6px;
    padding: 4px 16px 4px 8px;
    border-radius: 16px;
    color: var(--color-text);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: var(--gf);
}

.nav-link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

a.nav-link--active {
    color: var(--color-primary);
    background: rgba(22, 65, 148, 0.05);
}

a.nav-link:hover {
    background: rgba(22, 65, 148, 0.08);
}

.nav-sep {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin-bottom: var(--gf);
}

/* /MAIN NAV */

/* Main, Page, Aside
------- ------- ------- */

.page {
    padding: 0;
    display: flex;
    align-items: start;
    gap: var(--gap);

}

.main {
    background: var(--color-white);
    height: 100%;
    width: 100%;
    padding: var(--gap);
    max-width: var(--wid);
}

.aside {
    background: var(--color-bg);
    width: 0;
    overflow: hidden;
    height: 100%;
    opacity: 0;
    transition: width 0.4s ease, opacity 0.4s ease;
}

.aside--active {
    width: 240px;
    flex-shrink: 0;
    opacity: 1;
    transition: width 0.4s ease, opacity 0.4s ease;
}

.aside-grid {
    display: grid;
    grid-template-rows: 1fr;
    gap: var(--gap);
    padding: var(--gap);
    height: 100%;
}

/* /Main, Page, Aside */

/* Footer
------- ------- ------- */


.footer {
    color: var(--color-text-grey);
    font-size: var(--size-text-note);
    line-height: 1.4;
    padding: var(--gap) 0;
}

.footer__left {

}

.footer__center {
    color: var(--color-text-grey);
}

.footer__right {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    padding: 8px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--gap);
    filter: grayscale(100%);
    transition: var(--trans);
}

.footer-logo:hover {
    filter: none;

}

.footer-logo__img {
    width: 2rem;
}

.footer-logo__text {
}

.footer__center {
}

.footer__right {
}

/* /Footer */

/* (10) TPL Start:
------- ------- ------- ------- ------- ------- -------*/
.header-pan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: 24px;
}

.header-pan__title {
    padding: 0;
}

.header-pan__actions {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.nav-container {
    width: 100%;
    background-color: var(--color-bg);
    padding: var(--gf);
    border-radius: var(--gf);
    box-shadow: var(--sp-shadow-s);
}

.nav-panel {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
}

.nav-tab-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 6px;
    color: var(--color-text-grey);
    cursor: pointer;
    transition: background-color 0.2s;
}

.nav-tab-item:not(.nav-tab-item--active):hover {
    background-color: rgba(255, 255, 255, 0.64);
}

.nav-tab-item--active {
    background-color: white;
    box-shadow: var(--sp-shadow-s);
    color: var(--color-text);
}

.nav-tab-item__icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.nav-tab-item:not(.nav-tab-item--active) .nav-tab-item__icon {
    color: var(--color-text-grey);
}

.nav-tab-item__text {
}

.tab-content {
    padding: var(--gap) 0;
    display: none;
}

.tab-content--active {
    display: block;
}


.tab-content p {
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    .nav-panel {
        flex-wrap: wrap;
    }

}

.sf-section {
    border: 1px solid var(--color-bg);
    border-radius: var(--gap);
    padding: var(--gap);
    margin-bottom: var(--gap);
}

.sf-section:last-child {
    margin-bottom: 0;
}

.sf-section__h3 {
    font-size: 1.05rem;
    padding: 0 0 var(--gap) 0;
}

.sf-section__subtitle {
    color: var(--color-text-grey);
    margin-bottom: var(--gap);
}

.sf-section-card {
    border-radius: var(--gf);
    background: var(--ui-bg-100);
    padding: var(--gap);
}

.sf-section-card__h4 {
    padding: 0;
    font-size: 1.05rem;
}


/*Gen Ava*/
.gava {
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 100%;
    /*background: linear-gradient(45deg, #4a90e2, #357abd);*/
    background: radial-gradient(circle at top right, #aeccf0, #357abd);
    color: var(--color-white);
    text-shadow: var(--sp-shadow-m);
    font-weight: 600;
    font-size: 100%;
}

/*/Gen Ava*/

/* User pop menu */

.profile-box {
    position: relative;
    width: max-content;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px;
    outline: none;
}

.profile-pop__content {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 12px;
    min-width: 260px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    outline: none;
}

.profile-pop__header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.profile-pop__title {
    font-size: var(--size-heading-xs);
    font-weight: 600;
    color: var(--color-text);
}

.profile-pop__list {
    list-style: none;
    padding: var(--gf) 0;
    margin: var(--gf) 0;
}

.profile-pop__item {
    padding: var(--gf) var(--gap);
    display: flex;
    align-items: center;
    gap: var(--gf);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 0.2s;
    outline: none;
}

a.profile-pop__item {
    color: var(--color-text);
}

a.profile-pop__item:hover {
    color: var(--color-link);
}

.profile-pop__item:hover {
    background-color: var(--color-bg);
}

.profile-pop__item--danger {
    color: var(--color-red);
}

.profile-pop__icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Открытое состояние */
.is-open .btn--ui svg {
    transform: rotate(180deg);
}

.is-open .profile-pop__content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* /User pop menu */

/* Profile */
.profile-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.profile-card__ava {
    font-size: 3rem;
}

.profile-card__right {
    display: flex;
    flex-direction: column;
    gap: var(--gf);
}

.profile-card__name {
    font-weight: 600;
    font-size: var(--size-heading-xs);
}

.profile-card__position {
}

.profile-card__org {
}

.profile-card__tag-pan {
}

.profile-status-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--size-text-note);
    color: var(--color-text-grey);
}

.profile-status-tag svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.profile-status-tag--confirmed {
    color: var(--color-primary);
}

/*/ Profile */

/* Event Box */
.event-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    justify-content: space-between;
    height: 256px;
    border-radius: var(--gap);
    color: var(--color-white);
    padding: var(--gap);
    margin-bottom: var(--gap);
    --ec-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background-size: cover;
}

.event-card--fw {
    width: 100%;
    border-radius: 0;
}

.event-card__header {
    text-shadow: var(--ec-shadow);
}

.event-card-header__title {
    padding: 0;
    margin: 0;
}

.event-card-header__dates {
    padding: var(--gf) 0;
}

.event-card-header__location {
}

.event-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.event-card-footer__org {
    text-shadow: var(--ec-shadow);
}

@media screen and (max-width: 768px) {
    .event-card__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--gf);
    }
}

/* /Event Box */

/* Auth Form */

.alert,
.reg-form,
.auth-form {
    background: var(--color-white);
    border-radius: 16px;
    padding: 32px 48px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: 375px;
    margin: 32px auto;
    text-align: center;
    box-shadow: var(--sp-shadow-xs);
}

.reg-form__logo {
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--gap);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.alert__title,
.reg-form__title,
.auth-form__title {
    font-size: 18px;
    padding-top: 0;
    padding-bottom: 8px;
    color: black;
}

.alert__subtitle,
.reg-form__subtitle,
.auth-form__subtitle {
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
}

.reg-form-subtitle__link,
.auth-form-subtitle__link {
    color: var(--color-primary-light);
}

.reg-form-subtitle__link:hover,
.auth-form-subtitle__link:hover {
    color: var(--color-primary-dark);
    transition: var(--trans);
}

.sf__input-wrapper {
    display: flex;
    border: var(--ui-input-border);
    border-radius: 8px;
    height: var(--ui-size);
    position: relative;
    justify-content: space-between;
    align-items: center;
}

.sf__input-wrapper .sf__input {
    border: none;
}

.sf__input-with-btn {
    border: none;
    padding: 0 16px;
    font-size: var(--size-text);
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.show-pass-btn {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    z-index: 100;
    position: absolute;
    right: 12px;
    top: 4px;
    cursor: pointer;
}

/* /Auth Form */

/* Data Table */
.dtable-wrapper {
    --dtable-radius: 8px;
    border: 1px solid var(--ui-color-border);
    border-radius: var(--dtable-radius);

    scrollbar-color: var(--color-text-grey) transparent;
    scrollbar-width: thin;
}
.dtable-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.dtable-wrapper::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 8px;
}
.dtable-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--color-text-grey);
    border-radius: 8px;
    border: transparent;
}
.dtable-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text);
}



.dtable {
    /*overflow: hidden;*/
    /*width: 100%;*/
}

.dtable-line {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--gap);
    border-top: 1px solid var(--ui-color-border);
    width: 100%;
 }

.dtable-line--header {
    background: var(--ui-bg-100);
    border-top: none;
    border-top-left-radius: var(--dtable-radius);
    border-top-right-radius: var(--dtable-radius);
}

.dtable__cell {

    width: 160px;
}
.dtable__cell--actions {
    width: 88px;
    display: flex;
    align-items: center;
    gap: var(--gf);
}

.dtable__cell--s {
    width: 100px;
}

.dtable__cell--l {
    width: 200px;
}

@media screen and (max-width: 768px) {
    .dtable-wrapper {
        width: calc(100vw - 48px);
        overflow-x: scroll;
        /*outline: 2px yellow solid;*/
    }

    .dtable {
        width:fit-content;
    }

}

/* /Data Table */

/* Filters */
.filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gf);
    padding:8px 16px;
    border-radius: var(--ui-radius);
    background: #F9FAFB;
    margin-bottom: var(--gap);
}
.filters__title {
    color: var(--color-text-grey);
}
.filters__body {
    display:  flex;
    align-items: center;
    justify-content: start;
    gap: var(--gf);
}
.filters__pan {}
@media screen and (max-width: 768px) {
    .filters {
        flex-wrap: wrap;
    }
    .filters__body {
        flex-wrap: wrap;
    }
}
/* /Filters */

/* =========================== MEDIA ====================================== */
@media screen and (max-width: 768px) {

}