mainmenu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--stp-z-index-main-menu-1);
}

.mainmenuRoot {
    position: relative;
    height: 100%;
}

.mainmenuRootWrap {
    display: flex;
    height: 100%;
}
.mainMenu {
    z-index: var(--stp-z-index-main-menu-5);
    position: relative;
    background-color: var(--color-blue-900);
    height: 100%;
    display: grid;
    grid-template-rows: 80px auto max-content;
    transition: width 150ms ease-in-out;
    overflow: hidden;
}

.mainMenuWide {
    width: 300px;
}

.mainMenuNarrow {
    width: 72px;
}

.mainMenu.mainMenuIsAdmin {
    /*background-color: var(--color-grey-800);*/
}

.mainMenuBody {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    padding: 12px 10px;
    gap: 4px;
    overflow: hidden auto;
}

.mainMenuAppVersion {
    position: absolute;
    left: 4px;
    bottom: 0;
    color: var(--color-blue-900);;
    transition: color 150ms ease-in-out;
}

.mainMenuAppVersion:hover {
    color: var(--color-white);
}
.mainMenuHeader {
    height: 80px;
    border-bottom: solid 1px var(--color-grey-700);
    cursor: pointer;
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 12px;
    transition: width 150ms ease-in-out;
}

.mainMenuHeaderLogo {
    transition: margin-left 300ms cubic-bezier(0.92, -0.05, 0.73, 1);
    width: 24px;
    height: 24px;
}

.mainMenuHeaderText {
    color: var(--color-white);
    font-size: 32px;
    line-height: 100%;
    letter-spacing: -1.28px;
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.92, -0.05, 0.73, 1), width 150ms ease-in-out;
    overflow: hidden;
}


.mainMenuHeaderOpened {
    width: 300px;
}

.mainMenuHeaderOpened > .mainMenuHeaderLogo {
    margin-left: 56px;
}

.mainMenuHeaderOpened > .mainMenuHeaderText {
    opacity: 1;
    width: unset;
}


.mainMenuHeaderClosed {
    width: 72px;
}

.mainMenuHeaderClosed > .mainMenuHeaderLogo {
    margin-left: 24px;
}

.mainMenuHeaderClosed > .mainMenuHeaderText {
    opacity: 0;
    width: 0;
}
.mainMenuMainLayoutButton {
    color: var(--color-grey-500);
    fill: var(--color-grey-500);
    transition: color 150ms ease-in-out, fill 150ms ease-in-out, background-color 150ms ease-in-out;
    height: 52px;
    width: 100%;
    align-content: center;
    text-decoration: none !important;
    gap: 15px;
    padding: 14px;
    background-color: unset;
    border-radius: 8px;
    text-align: left;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
}

.mainMenuMainLayoutButtonWithoutArrow {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.mainMenuMainLayoutButtonWithArrow {
    display: grid;
    grid-template-columns: 23px auto 20px;
    justify-content: unset;
    justify-items: start;
    align-items: center;
}

.mainMenuMainLayoutButtonActive {
    color: var(--color-white);
    fill: var(--color-white);
    background-color: var(--color-blue-700);;
}

.mainMenuMainLayoutButton:hover,
.mainMenuMainLayoutButtonHover {
    color: var(--color-white);
    fill: var(--color-white);
    background-color: var(--color-blue-800);;
}

.mainMenuMainLayoutButtonIcon {
    height: 24px;
}

.mainMenuMainLayoutButtonText {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    transition: color 150ms ease-in-out;
}

.mainMenuMainLayoutButtonWithoutArrow .mainMenuMainLayoutButtonText {
    width: 190px;
}

.mainMenuMainLayoutButtonWithArrow .mainMenuMainLayoutButtonText {
    width: 180px;
}

.mainMenuMainLayoutButtonArrow {
    margin-left: 14px;
    justify-self: end;
    width: 8px!important;
    background-color: var(--color-grey-500);
    transition: background-color 300ms ease-in-out;
}

.mainMenuMainLayoutButtonArrowHover,
.mainMenuMainLayoutButtonWithArrow:hover > .mainMenuMainLayoutButtonArrow {
    background-color: var(--color-white);
}
stp-icon {
    --icon-color: var(--stp-color-gray-700);
    width: 24px;
    display: block;
    mask-size: cover;
    aspect-ratio: 1 / 1;
    mask-repeat: no-repeat;
    background-color: var(--icon-color);
}

stp-icon[type=""],
stp-icon:not([type]),
stp-icon[type="question"] {
    width: 16px;
    aspect-ratio: 2 / 3;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='16'%20height='24'%20version='1.1'%20viewBox='0%200%2016%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m8.0001%203.5855c-2.326%200-3.9121%201.7146-3.9121%204.3032%200%200.99011-0.72969%201.7928-1.6298%201.7928-0.9001%200-1.6298-0.80265-1.6298-1.7928%200-4.5882%203.0632-7.8887%207.1717-7.8887%202.3831%200%204.2689%200.81125%205.5291%202.3994%201.2248%201.5436%201.6424%203.5522%201.6424%205.4893%200%203.7466-2.2461%206.2757-4.6351%207.5252-0.60485%200.31636-0.78562%200.53507-0.83595%200.61245-0.021563%200.03301-0.070712%200.10824-0.070712%200.41904%200%200.99011-0.72969%201.7928-1.6298%201.7928s-1.6298-0.80264-1.6298-1.7928c0-0.80437%200.14372-1.6814%200.67891-2.5047%200.50565-0.77781%201.2432-1.3233%202.0876-1.7649%201.6463-0.86105%202.7752-2.3464%202.7752-4.2871%200-1.4296-0.31275-2.4689-0.8386-3.1316-0.49054-0.61819-1.3755-1.1716-3.0733-1.1716z'%20fill='%23fff'%20stroke-width='2.3905'/%3e%3cpath%20d='m6.3702%2022.113c0-0.99009%200.72966-1.7927%201.6298-1.7927h0.018479c0.90011%200%201.6298%200.80265%201.6298%201.7927%200%200.99011-0.72966%201.7928-1.6298%201.7928h-0.018479c-0.90011%200-1.6298-0.80264-1.6298-1.7928z'%20fill='%23fff'%20stroke-width='2.3905'/%3e%3c/svg%3e");
}

stp-icon[type="gear"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m14.342%209.6581c1.2934%201.2934%201.2934%203.3903%200%204.6836-1.2933%201.2933-3.3901%201.2933-4.6835%200-1.2934-1.2933-1.2934-3.3901%200-4.6836%201.2933-1.2933%203.3901-1.2933%204.6835%200'%20stroke='%23344256'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.8399'/%3e%3cpath%20d='m3.7206%2012c0%200.36429%200.033118%200.72859%200.077274%201.0818l-1.9478%201.5234c-0.43176%200.33854-0.54951%200.94324-0.27475%201.4179l1.7319%202.9965c0.27353%200.47469%200.85493%200.67462%201.364%200.47101l1.7442-0.70038c0.34467-0.1386%200.72859-0.08341%201.0377%200.12143%200.26985%200.17908%200.54951%200.34344%200.83898%200.49063%200.33118%200.16804%200.57159%200.46855%200.62433%200.83653l0.26617%201.8558c0.077274%200.54215%200.54214%200.94447%201.0892%200.94447h3.4553c0.54706%200%201.0119-0.40232%201.0892-0.94447l0.26617-1.8546c0.05274-0.36797%200.29561-0.67094%200.62801-0.83776%200.28825-0.14474%200.56668-0.30787%200.8353-0.48573%200.31155-0.20606%200.6967-0.26494%201.0426-0.12511l1.7405%200.69915c0.5078%200.20361%201.0892%200.0036%201.364-0.47101l1.7319-2.9965c0.27475-0.47469%200.157-1.0806-0.27475-1.4179l-1.9478-1.5234c0.04415-0.35326%200.07727-0.71755%200.07727-1.0818s-0.03312-0.72859-0.07727-1.0818l1.9478-1.5234c0.43176-0.33854%200.54951-0.94324%200.27475-1.4179l-1.7319-2.9965c-0.27353-0.47469-0.85493-0.67462-1.364-0.47101l-1.7405%200.69915c-0.3459%200.1386-0.73104%200.080954-1.0426-0.12511-0.26862-0.17785-0.54706-0.34099-0.8353-0.48573-0.3324-0.16681-0.57527-0.46978-0.62801-0.83775l-0.26494-1.8546c-0.077275-0.54215-0.54215-0.94447-1.0892-0.94447h-3.4553c-0.54706%200-1.0119%200.40232-1.0892%200.94447l-0.26739%201.857c-0.052743%200.36675-0.29438%200.66849-0.62433%200.83653-0.28947%200.14719-0.56913%200.31278-0.83898%200.49063-0.31032%200.20361-0.69424%200.25881-1.0389%200.1202l-1.743-0.70038c-0.50903-0.20361-1.0904-0.0036798-1.364%200.47101l-1.7319%202.9965c-0.27475%200.47469-0.157%201.0806%200.27475%201.4179l1.9478%201.5234c-0.044157%200.35326-0.077274%200.71755-0.077274%201.0818z'%20clip-rule='evenodd'%20fill-rule='evenodd'%20stroke='%23344256'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.8399'/%3e%3c/svg%3e");
}

stp-icon[type="stepper-arrow"] {
    width: 48px;
    aspect-ratio: 2 / 1;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='48'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2048%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m24-3.4969e-7%2024%2024h-48z'%20fill='%23cbd5e1'%20stroke-width='6'/%3e%3c/svg%3e");
}

stp-icon[type="stepper-arrow"][direction="down"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='48'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2048%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m24%2024-24-24h48z'%20fill='%23cbd5e1'%20stroke-width='6'/%3e%3c/svg%3e");
}

stp-icon[type="zoom"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='9.3358'%20cy='9.3358'%20r='8.3589'%20stroke='%23fff'%20stroke-linecap='square'%20stroke-width='1.8543'/%3e%3cpath%20d='m16.023%2016.023%206.6871%206.6871'%20stroke='%23fff'%20stroke-linecap='square'%20stroke-width='1.8543'/%3e%3c/svg%3e");
}

stp-icon[type="plus"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m12%200c0.56806%200%201.0286%200.46051%201.0286%201.0286v9.9428h9.9428c0.568%200%201.0286%200.46052%201.0286%201.0286%200%200.56806-0.4606%201.0286-1.0286%201.0286h-9.9428v9.9428c0%200.568-0.46052%201.0286-1.0286%201.0286-0.56806%200-1.0286-0.4606-1.0286-1.0286v-9.9428h-9.9428c-0.56806%200-1.0286-0.46052-1.0286-1.0286%200-0.56806%200.46051-1.0286%201.0286-1.0286h9.9428v-9.9428c0-0.56806%200.46052-1.0286%201.0286-1.0286z'%20fill='%23344256'%20stroke-width='2'/%3e%3c/svg%3e");
}

stp-icon[type="download"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='25'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2025%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m1.2059%2017.647v1.4118c0%202.3392%201.8962%204.2353%204.2353%204.2353h14.118c2.3392%200%204.2353-1.8961%204.2353-4.2353v-1.4118m-5.6471-5.6471-5.6471%205.6471m0%200-5.6471-5.6471m5.6471%205.6471v-16.941'%20stroke='%231b1b1b'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.4118'/%3e%3c/svg%3e");
}

stp-icon[type="close"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='matrix(1.873%200%200%201.873%20-10.476%20-10.476)'%20clip-path='url(%23clip0_11851_965718)'%3e%3cpath%20d='m5.8128%205.8128c0.2929-0.2929%200.76777-0.2929%201.0607%200l5.1266%205.1265%205.1265-5.1265c0.2929-0.2929%200.7678-0.2929%201.0607%200%200.2929%200.29289%200.2929%200.76776%200%201.0607l-5.1266%205.1265%205.1266%205.1265c0.2929%200.2929%200.2929%200.7678%200%201.0607s-0.7678%200.2929-1.0607%200l-5.1265-5.1265-5.1266%205.1265c-0.29289%200.2929-0.76776%200.2929-1.0607%200-0.29289-0.2929-0.29289-0.7678%200-1.0607l5.1265-5.1265-5.1265-5.1265c-0.29289-0.2929-0.29289-0.76777%200-1.0607z'%20fill='%231d283a'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_11851_965718'%3e%3crect%20width='24'%20height='24'%20fill='%23fff'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}

stp-icon[type="settings"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='28'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2028%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='translate(.5)'%20stroke='%23344256'%20stroke-width='1.92'%3e%3ccircle%20cx='17.82'%20cy='4.32'%20r='3.36'/%3e%3ccircle%20cx='17.82'%20cy='19.68'%20r='3.36'/%3e%3ccircle%20cx='8.22'%20cy='12'%20r='3.36'/%3e%3c/g%3e%3cg%20transform='translate(.5)'%20fill='%23344256'%20stroke-width='1.92'%3e%3crect%20x='.059999'%20y='3.84'%20width='15.36'%20height='1.92'%20rx='.96'/%3e%3crect%20x='.059999'%20y='19.2'%20width='15.36'%20height='1.92'%20rx='.96'/%3e%3crect%20x='21.18'%20y='3.84'%20width='5.76'%20height='1.92'%20rx='.96'/%3e%3crect%20x='21.18'%20y='19.2'%20width='5.76'%20height='1.92'%20rx='.96'/%3e%3crect%20x='15.42'%20y='11.52'%20width='11.52'%20height='1.92'%20rx='.96'/%3e%3crect%20x='.059999'%20y='11.52'%20width='5.76'%20height='1.92'%20rx='.96'/%3e%3c/g%3e%3c/svg%3e");
    width: 28px;
    aspect-ratio: 7 / 6;
}

stp-icon[type="arrow"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='14'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2014%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m12.609%201.3333-10.667%2010.667%2010.667%2010.667'%20stroke='%232463eb'%20stroke-linecap='round'%20stroke-width='2.6667'/%3e%3c/svg%3e");
    width: 14px;
    aspect-ratio: 7 / 12;
}

stp-icon[type="arrow"][direction="right"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='14'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2014%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m1.4104%201.3312%2010.631%2010.669-10.631%2010.669'%20stroke='%232463eb'%20stroke-linecap='round'%20stroke-width='2.6625'/%3e%3c/svg%3e");
}

stp-icon[type="arrow"][direction="up"],
stp-icon[type="arrow"][direction="down"] {
    width: 42px;
    aspect-ratio: 7 / 4;
}

stp-icon[type="arrow"][direction="up"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='42'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2042%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m39.436%2021.695-18.436-18.436-18.436%2018.436'%20stroke='%232463eb'%20stroke-linecap='round'%20stroke-width='4.609'/%3e%3c/svg%3e");
}

stp-icon[type="arrow"][direction="down"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='42'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2042%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m39.436%202.3045-18.436%2018.436-18.436-18.436'%20stroke='%232463eb'%20stroke-linecap='round'%20stroke-width='4.609'/%3e%3c/svg%3e");
}

stp-icon[type="pen"] {
    width: 24px;
    aspect-ratio: 1 / 1;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m22.457%203.7387-2.1958-2.1957c-0.61197-0.61195-1.6026-0.61195-2.213%200l-16.957%2016.955v4.4104h4.4103l16.956-16.956c0.61197-0.61195%200.61197-1.6026%200-2.2145z'%20clip-rule='evenodd'%20fill-rule='evenodd'%20stroke='%2365758b'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2.1825'/%3e%3cpath%20d='m19.665%208.7453-4.4134-4.4134'%20stroke='%2365758b'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2.1825'/%3e%3c/svg%3e");
}

stp-icon[type="trash"] {
    width: 24px;
    aspect-ratio: 5 / 6;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='20'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2020%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m0.23256%203.3178h19.535m-12.209-0.62016c0-1.0275%200.83295-1.8605%201.8605-1.8605h1.1628c1.0275%200%201.8605%200.83295%201.8605%201.8605m-2.4419%209.3023v7.4418m-3.6628-6.2015%200.61047%206.2015m6.1047%200%200.61047-6.2015m3.5579-5.9486-0.93349%2013.276c-0.10284%201.4616-1.3186%202.5949-2.7839%202.5949h-7.0066c-1.4653%200-2.6811-1.1333-2.7838-2.5949l-0.93349-13.276c-0.056749-0.80717%200.58275-1.4932%201.3919-1.4932h11.657c0.80916%200%201.4487%200.68604%201.392%201.4932z'%20stroke='%2365758b'%20stroke-width='1.6744'/%3e%3c/svg%3e");
}

stp-icon[type="copy"] {
    width: 24px;
    aspect-ratio: 11 / 12;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='22'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2022%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='6.0772'%20y='5.8461'%20width='14.769'%20height='17.231'%20rx='1.8462'%20stroke='%2365758b'%20stroke-linejoin='round'%20stroke-width='1.8462'/%3e%3cpath%20d='m1.1535%2018.154v-15.391c0-1.0196%200.82656-1.8395%201.8462-1.8395h12.923'%20stroke='%2365758b'%20stroke-linecap='round'%20stroke-width='1.8462'/%3e%3c/svg%3e");
}

stp-icon[type="turn-arrow"] {
    width: 26px;
    aspect-ratio: 13 / 12;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='26'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2026%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m24.595%2022.956c0-8.9556-7.6109-14.791-17-14.791h-5.4779%200.71211'%20stroke='%23344256'%20stroke-linecap='round'%20stroke-width='2.0885'/%3e%3cpath%20d='m8.5251%201.0442-7.1198%207.1198%207.1198%207.1199'%20stroke='%23344256'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2.0885'/%3e%3c/svg%3e");
}

stp-icon[type="turn-arrow"][direction="right"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='26'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2026%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m1.4053%2022.956c0-8.9556%207.6109-14.791%2017-14.791h5.4779-0.71211'%20stroke='%23344256'%20stroke-linecap='round'%20stroke-width='2.0885'/%3e%3cpath%20d='m17.475%201.0442%207.1198%207.1198-7.1198%207.1199'%20stroke='%23344256'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2.0885'/%3e%3c/svg%3e");
}

stp-icon[type="move"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='%2365758b'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20stroke-width='1.4371'%3e%3cpath%20d='m12.356%200.14732c-0.19644-0.19643-0.51491-0.19643-0.71135%200l-3.201%203.201c-0.19644%200.19643-0.19644%200.51491%200%200.71133%200.19643%200.19644%200.51491%200.19644%200.71133%200l2.8454-2.8453%202.8454%202.8453c0.19646%200.19644%200.51492%200.19644%200.71138%200%200.19646-0.19643%200.19646-0.51491%200-0.71133zm0.14732%2011.853v-11.497h-1.006v11.497z'/%3e%3cpath%20d='m23.853%2012.356c0.19646-0.19644%200.19646-0.51491%200-0.71135l-3.201-3.201c-0.19646-0.19644-0.51492-0.19644-0.71138%200-0.19646%200.19643-0.19646%200.51491%200%200.71133l2.8454%202.8454-2.8454%202.8454c-0.19646%200.19646-0.19646%200.51492%200%200.71138%200.19645%200.19646%200.51492%200.19646%200.71138%200zm-11.853%200.14732h11.497v-1.006h-11.497z'/%3e%3cpath%20d='m11.644%2023.853c0.19644%200.19646%200.51491%200.19646%200.71135%200l3.2011-3.201c0.19646-0.19646%200.19646-0.51492%200-0.71138-0.19646-0.19646-0.51492-0.19646-0.71138%200l-2.8454%202.8454-2.8454-2.8454c-0.19643-0.19646-0.51491-0.19646-0.71133%200-0.19644%200.19645-0.19644%200.51492%200%200.71138zm-0.14732-11.853v11.497h1.006v-11.497z'/%3e%3cpath%20d='m0.14732%2011.644c-0.19643%200.19644-0.19643%200.51491%200%200.71135l3.201%203.2011c0.19643%200.19646%200.51491%200.19646%200.71133%200%200.19644-0.19646%200.19644-0.51492%200-0.71138l-2.8453-2.8454%202.8453-2.8454c0.19644-0.19643%200.19644-0.51491%200-0.71133-0.19643-0.19644-0.51491-0.19644-0.71133%200zm11.853-0.14732h-11.497v1.006h11.497z'/%3e%3c/g%3e%3c/svg%3e");
}

stp-icon[type="add-block"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20stroke='%2365758b'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='.75'%20y='.74895'%20width='9.7'%20height='9.7'%20rx='.75'%20stroke-width='1.5'/%3e%3crect%20x='17.49'%20y='12.758'%20width='1.0524'%20height='10.524'%20rx='.52619'%20stroke-width='1.4182'/%3e%3crect%20transform='rotate(90)'%20x='17.494'%20y='-23.281'%20width='1.0524'%20height='10.524'%20rx='.52619'%20stroke-width='1.4182'/%3e%3crect%20x='13.55'%20y='.74895'%20width='9.7'%20height='9.7'%20rx='.75'%20stroke-width='1.5'/%3e%3crect%20x='.75'%20y='13.549'%20width='9.7'%20height='9.7'%20rx='.75'%20stroke-width='1.5'/%3e%3c/svg%3e");
}

stp-icon[type="minimize-block"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20stroke='%2365758b'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='.72938'%20y='.72938'%20width='9.4333'%20height='9.4333'%20rx='.72938'%20stroke-width='1.4588'/%3e%3crect%20transform='rotate(90)'%20x='17.319'%20y='-23.271'%20width='1.0824'%20height='10.824'%20rx='.54122'%20stroke-width='1.4588'/%3e%3c/svg%3e");
}

stp-icon[type="eye-open"] {
    width: 38px;
    aspect-ratio: 38 / 24;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='38'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2038%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m36.455%2012s-5.2363%2010.909-17.455%2010.909c-12.218%200-17.455-10.909-17.455-10.909s5.2363-10.909%2017.455-10.909c12.218%200%2017.455%2010.909%2017.455%2010.909z'%20stroke='%2365758b'%20stroke-linecap='round'%20stroke-width='2.1819'/%3e%3ccircle%20cx='18.999'%20cy='12'%20r='6.5455'%20stroke='%2365758b'%20stroke-linecap='round'%20stroke-width='2.1819'/%3e%3c/svg%3e");
}

stp-icon[type="eye-close"] {
    width: 38px;
    aspect-ratio: 38 / 24;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='38'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2038%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='matrix(1.5553%200%200%201.5553%20.33603%20-6.664)'%20stroke='%2365758b'%20stroke-linecap='round'%20stroke-width='1.4028'%3e%3cpath%20d='m23.222%2012s-3.3666%207.0138-11.222%207.0138-11.222-7.0138-11.222-7.0138%203.3666-7.0138%2011.222-7.0138%2011.222%207.0138%2011.222%207.0138z'/%3e%3ccircle%20cx='12'%20cy='12'%20r='4.2083'/%3e%3cpath%20d='m4.9862%2019.014%2014.028-14.028'/%3e%3c/g%3e%3c/svg%3e");
}

stp-icon[type="excel-upload"],
stp-icon[type="import"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m23.15%200.84957-11.15%2011.15v-8.6725%208.6725h8.6726'%20stroke='%23344256'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.6991'/%3e%3cpath%20d='m8.2832%200.84957h-4.9558c-1.369%200-2.4779%201.1088-2.4779%202.4779v17.345c0%201.369%201.1088%202.4778%202.4779%202.4778h17.345c1.369%200%202.4778-1.1088%202.4778-2.4778v-4.9558'%20stroke='%23344256'%20stroke-linecap='round'%20stroke-width='1.6991'/%3e%3c/svg%3e");
}

stp-icon[type="extra"] {
    width: 7px;
    aspect-ratio: 7 / 24;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20class='dots-btn'%20width='7'%20height='24'%20fill='none'%20stroke='%2365758b'%20version='1.1'%20viewBox='0%200%207%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20fill='%2365758b'%20stroke-width='2.1818'%3e%3ccircle%20cx='3.5'%20cy='3.2727'%20r='2.1818'/%3e%3ccircle%20cx='3.5'%20cy='12'%20r='2.1818'/%3e%3ccircle%20cx='3.5'%20cy='20.727'%20r='2.1818'/%3e%3c/g%3e%3c/svg%3e");
}

stp-icon[type="chat"] {
    width: 26px;
    aspect-ratio: 13 / 12;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='26'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2026%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m14.297%2017.838v-0.97297c-0.1921%200-0.37989%200.05682-0.53971%200.16326zm-7.7838%205.1891h-0.97297c0%200.35883%200.19749%200.68867%200.51387%200.85797%200.31637%200.1693%200.70025%200.15062%200.99881-0.04826zm0-5.1891h0.97297c0-0.53747-0.43562-0.97297-0.97297-0.97297zm16.216%200.97297c1.612%200%202.9189-1.3069%202.9189-2.9189h-1.9459c0%200.53728-0.4357%200.97297-0.97297%200.97297zm-8.4324%200h8.4324v-1.9459h-8.4324zm-7.2441%205.0258%207.7838-5.1892-1.0794-1.6192-7.7838%205.1892zm-1.5127-5.9988v5.1891h1.9459v-5.1891zm-2.2703%200.97297h3.2432v-1.9459h-3.2432zm-2.9189-2.9189c0%201.612%201.3068%202.9189%202.9189%202.9189v-1.9459c-0.53735%200-0.97297-0.4357-0.97297-0.97297zm0-12.973v12.973h1.9459v-12.973zm2.9189-2.9189c-1.6121%200-2.9189%201.3069-2.9189%202.9189h1.9459c0-0.53735%200.43562-0.97297%200.97297-0.97297zm19.459%200h-19.459v1.9459h19.459zm2.9189%202.9189c0-1.6121-1.3069-2.9189-2.9189-2.9189v1.9459c0.53728%200%200.97297%200.43562%200.97297%200.97297zm0%2012.973v-12.973h-1.9459v12.973z'%20fill='%2365758b'%20stroke-width='1.9459'/%3e%3c/svg%3e");
}

stp-icon[type="hint"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20fill='%2394a3b8'%20stroke-width='1.4769'%3e%3cpath%20d='m12%207.6918c-1.3173%200-2.2157%200.88285-2.2157%202.2157%200%200.5098-0.41327%200.92308-0.92308%200.92308-0.5098%200-0.92308-0.41327-0.92308-0.92308%200-2.3625%201.7349-4.0618%204.0618-4.0618%201.3498%200%202.4179%200.4177%203.1317%201.2354%200.69356%200.79478%200.93017%201.829%200.93017%202.8264%200%201.9291-1.2721%203.2314-2.6252%203.8747-0.3425%200.1629-0.44485%200.27545-0.47335%200.31532l-8.86e-4%200.0012c-0.01226%200.01698-0.03929%200.0545-0.03929%200.2146%200%200.50983-0.41324%200.92308-0.92308%200.92308-0.50974%200-0.92302-0.41324-0.92302-0.92308%200-0.41413%200.08141-0.86577%200.38453-1.2896%200.28639-0.40054%200.70405-0.6813%201.1824-0.90875%200.93238-0.44334%201.5717-1.2081%201.5717-2.2074%200-0.73607-0.17708-1.2712-0.47498-1.6125-0.27781-0.31832-0.77907-0.60325-1.7407-0.60325z'/%3e%3cpath%20d='m11.077%2017.231c0-0.50969%200.41329-0.92308%200.92308-0.92308h0.01049c0.50983%200%200.92308%200.41339%200.92308%200.92308%200%200.50983-0.41324%200.92308-0.92308%200.92308h-0.01049c-0.50979%200-0.92308-0.41324-0.92308-0.92308z'/%3e%3cpath%20d='m0%2012c0-6.6274%205.3726-12%2012-12%206.6274%200%2012%205.3726%2012%2012%200%206.6274-5.3726%2012-12%2012-6.6274%200-12-5.3726-12-12zm12-10.154c-5.6078%200-10.154%204.546-10.154%2010.154%200%205.6079%204.546%2010.154%2010.154%2010.154%205.6079%200%2010.154-4.546%2010.154-10.154%200-5.6078-4.546-10.154-10.154-10.154z'%20clip-rule='evenodd'%20fill-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e");
}

stp-icon[type="back"] {
    aspect-ratio: 13 / 12;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='26'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2026%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m1.5597%209.0252h13.311c5.5135%200%209.9832%204.4696%209.9832%209.9832v4.9916'%20stroke='%2365758b'%20stroke-width='1.9966'/%3e%3cpath%20d='m9.879%200.70592-8.3193%208.3193%208.3193%208.3193'%20stroke='%2365758b'%20stroke-width='1.9966'/%3e%3c/svg%3e");
}

stp-icon[type="brush"] {
    aspect-ratio: 7 / 6;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='28'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2028%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m25.182%2021.971c-2.8533%202.2666-5.6673%200.62724-2.2669-2.8536%208.4577-7.4416%202.2869-8.9638-4.6542-3.3442-6.9411%205.6198-10.999%201.7558-3.4004-4.2803%209.512-7.5564%206.3298-15.053-3.6578-7.1191-2.5138%202.1702-8.1046%207.106-10.357%209.4874'%20stroke='%2365758b'%20stroke-width='1.9668'/%3e%3c/svg%3e");
}

stp-icon[type="center"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20stroke='%2365758b'%3e%3crect%20x='.54545'%20y='.54545'%20width='22.909'%20height='22.909'%20rx='.54545'%20stroke-width='1.0909'/%3e%3cg%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='.81818'%3e%3cpath%20d='m9.5087%209.5086-4.2204-4.2204m4.2204%204.2204h-3.3764m3.3764%200v-3.3764'/%3e%3cpath%20d='m14.888%2014.888%204.2204%204.2204m-4.2204-4.2204h3.3764m-3.3764%200v3.3764'/%3e%3cpath%20d='m14.888%209.5086%204.2204-4.2204m-4.2204%204.2204v-3.3764m0%203.3764h3.3764'/%3e%3cpath%20d='m9.5086%2014.888-4.2204%204.2204m4.2204-4.2204v3.3764m0-3.3764h-3.3764'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

stp-icon[type="circle"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2012%2012'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='6'%20cy='6'%20r='5.625'%20fill='none'%20stroke='%2365758b'%20stroke-width='.75'/%3e%3c/svg%3e");
}

stp-icon[type="crop"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m4.8%205e-7v19.2h19.2'%20stroke='%2365758b'%20stroke-width='1.44'/%3e%3cpath%20d='m19.2%2024v-19.2h-19.2'%20stroke='%2365758b'%20stroke-width='1.44'/%3e%3c/svg%3e");
}

stp-icon[type="forward"] {
    aspect-ratio: 13 / 12;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='26'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2026%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m24.44%209.0252h-9.9832c5.5135%200-13.311-2.1858-13.311%209.9832v4.9916'%20stroke='%2365758b'%20stroke-width='1.9966'/%3e%3cpath%20d='m16.121%200.70592%208.3193%208.3193-8.3193%208.3193'%20stroke='%2365758b'%20stroke-width='1.9966'/%3e%3c/svg%3e");
}

stp-icon[type="grab"] {
    aspect-ratio: 19 / 24;
    mask-image: url("./grab-DMS6nov4.svg");
}

stp-icon[type="line-arrow"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m22.206%201.7947-2.6753%208.0262-5.3509-5.3509z'%20fill='%2365758b'%20stroke='%2365758b'%20stroke-width='2.2701'/%3e%3cpath%20d='m16.854%207.1452-16.052%2016.052'%20stroke='%2365758b'%20stroke-width='2.2701'/%3e%3c/svg%3e");
}

stp-icon[type="line"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m22.909%201.0909-21.818%2021.818'%20stroke='%2365758b'%20stroke-width='3.0856'/%3e%3c/svg%3e");
}

stp-icon[type="shapes"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='6.0302'%20y='6.0984'%20width='17.049'%20height='17.049'%20rx='2.8415'%20stroke='%2365758b'%20stroke-width='1.7049'/%3e%3cpath%20d='m5.6855%2017.902c-2.8357-1.5253-4.765-4.532-4.765-7.9918%200-5.0022%204.0328-9.0574%209.0075-9.0574%203.5133%200%206.5567%202.0225%208.0417%204.9727'%20stroke='%2365758b'%20stroke-linecap='round'%20stroke-width='1.7049'/%3e%3c/svg%3e");
}

stp-icon[type="square"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2012%2012'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='.375'%20y='.375'%20width='11.25'%20height='11.25'%20fill='none'%20stroke='%2365758b'%20stroke-width='.75'/%3e%3c/svg%3e");
}

stp-icon[type="text"] {
    aspect-ratio: 5 / 3;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='40'%20height='24'%20version='1.1'%20viewBox='0%200%2040%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m15.745%2014.723-4.3793-11.697-4.3793%2011.697zm-15.382%208.8067%209.3015-23.529h3.4745l9.3015%2023.529h-3.4021l-2.3525-6.3193h-10.641l-2.3525%206.3193z'%20fill='%2365758b'%20stroke-width='2.1818'/%3e%3cpath%20d='m36.813%2016.37v-0.84033l-4.2345%200.16807c-3.6554%200.16806-5.5012%201.2437-5.5012%203.1597%200%201.6807%201.4114%202.7227%203.6916%202.7227%203.3297%200%206.0441-2.3529%206.0441-5.2101zm2.8231-3.6302v10.79h-2.8231v-2.9916c-1.1581%202.1177-3.3297%203.4622-6.406%203.4622-3.8001%200-6.2252-2.0169-6.2252-5.042%200-3.2605%202.7868-5.2773%208.1072-5.479l4.524-0.16806v-0.26891c0-2.7227-1.8096-4.3697-4.7411-4.3697-2.2078%200-3.9812%200.94117-4.9946%202.8571l-2.3887-1.1092c1.2668-2.6218%204.0174-4.1681%207.4555-4.1681%204.4156%200%207.4919%202.5546%207.4919%206.4874z'%20fill='%2365758b'%20stroke-width='2.1818'/%3e%3c/svg%3e");
}

stp-icon[type="sides"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20stroke='%2365758b'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.5716'%3e%3cpath%20d='m0.7857%205.0854h8.5986m-8.5986%200%203.4394-3.4394m-3.4394%203.4394%203.4394%203.4394'/%3e%3cpath%20d='m23.214%2018.915h-8.5986m8.5986%200-3.4393%203.4395m3.4393-3.4395-3.4393-3.4393'/%3e%3cpath%20d='m18.915%200.7858v8.5986m0-8.5986%203.4395%203.4394m-3.4395-3.4394-3.4395%203.4394'/%3e%3cpath%20d='m5.0849%2023.214v-8.5986m0%208.5986-3.4394-3.4395m3.4394%203.4395%203.4394-3.4395'/%3e%3c/g%3e%3c/svg%3e");
}

stp-icon[type="bullet-list"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='7'%20y='11'%20width='14'%20height='1'%20fill='%2365758B'/%3e%3crect%20x='7'%20y='16'%20width='14'%20height='1'%20fill='%2365758B'/%3e%3crect%20x='7'%20y='6'%20width='14'%20height='1'%20fill='%2365758B'/%3e%3crect%20x='2'%20y='5'%20width='3'%20height='3'%20rx='1.5'%20fill='%2365758B'/%3e%3crect%20x='2'%20y='10'%20width='3'%20height='3'%20rx='1.5'%20fill='%2365758B'/%3e%3crect%20x='2'%20y='15'%20width='3'%20height='3'%20rx='1.5'%20fill='%2365758B'/%3e%3c/svg%3e");
}

stp-icon[type="ordered-list"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='11'%20y='15'%20width='14'%20height='1'%20fill='%2365758B'/%3e%3crect%20x='11'%20y='20'%20width='14'%20height='1'%20fill='%2365758B'/%3e%3crect%20x='11'%20y='10'%20width='14'%20height='1'%20fill='%2365758B'/%3e%3cpath%20d='M6.16467%209.668C6.34067%209.66%206.46467%209.648%206.53667%209.632C6.64467%209.608%206.73667%209.56%206.80867%209.484C6.85667%209.432%206.89267%209.364%206.91667%209.28C6.93267%209.232%206.94067%209.192%206.94067%209.168H7.40067V12H6.83267V10.048H6.16467V9.668Z'%20fill='%2365758B'/%3e%3cpath%20d='M6.14467%2016.444C6.22467%2016.252%206.41267%2016.056%206.70867%2015.844C6.96467%2015.66%207.12867%2015.528%207.20467%2015.448C7.32067%2015.328%207.38067%2015.188%207.38067%2015.044C7.38067%2014.924%207.34467%2014.824%207.28067%2014.744C7.21267%2014.664%207.11667%2014.624%206.99267%2014.624C6.82467%2014.624%206.70867%2014.688%206.64867%2014.816C6.61267%2014.888%206.59267%2015.004%206.58467%2015.164H6.04467C6.05667%2014.92%206.09667%2014.728%206.17667%2014.58C6.32467%2014.296%206.58867%2014.156%206.96867%2014.156C7.26467%2014.156%207.50467%2014.236%207.68067%2014.404C7.86067%2014.568%207.94867%2014.788%207.94867%2015.064C7.94867%2015.272%207.88467%2015.46%207.76067%2015.62C7.67667%2015.728%207.54467%2015.848%207.35667%2015.984L7.13267%2016.14C6.99267%2016.24%206.89667%2016.312%206.84867%2016.356C6.79667%2016.4%206.75267%2016.452%206.71667%2016.508H7.95267V17H6.01267C6.02067%2016.796%206.06067%2016.612%206.14467%2016.444Z'%20fill='%2365758B'/%3e%3cpath%20d='M6.54067%2021.132C6.54067%2021.244%206.55667%2021.336%206.59667%2021.412C6.66467%2021.548%206.78867%2021.616%206.96467%2021.616C7.07267%2021.616%207.16867%2021.58%207.25267%2021.504C7.33267%2021.428%207.37267%2021.324%207.37267%2021.18C7.37267%2020.996%207.29667%2020.872%207.14467%2020.808C7.06067%2020.772%206.92467%2020.756%206.74067%2020.756V20.356C6.92067%2020.356%207.04867%2020.336%207.12067%2020.304C7.24067%2020.252%207.30467%2020.14%207.30467%2019.972C7.30467%2019.864%207.27267%2019.776%207.21267%2019.708C7.14467%2019.64%207.05667%2019.608%206.94467%2019.608C6.81267%2019.608%206.71667%2019.648%206.65267%2019.732C6.59267%2019.816%206.56067%2019.928%206.56467%2020.068H6.04467C6.05267%2019.924%206.07267%2019.792%206.11667%2019.668C6.16067%2019.556%206.23267%2019.452%206.33267%2019.36C6.40467%2019.292%206.49267%2019.244%206.59267%2019.208C6.69267%2019.172%206.81267%2019.156%206.96067%2019.156C7.23267%2019.156%207.45267%2019.224%207.61667%2019.364C7.78467%2019.504%207.86467%2019.692%207.86467%2019.928C7.86467%2020.092%207.81667%2020.236%207.71667%2020.348C7.65267%2020.42%207.58867%2020.472%207.52067%2020.496C7.57267%2020.496%207.64467%2020.54%207.74067%2020.628C7.88467%2020.756%207.95267%2020.936%207.95267%2021.168C7.95267%2021.408%207.87267%2021.616%207.70467%2021.796C7.54067%2021.98%207.29267%2022.072%206.96867%2022.072C6.56467%2022.072%206.28867%2021.94%206.13267%2021.676C6.04867%2021.54%206.00467%2021.356%205.99267%2021.132H6.54067Z'%20fill='%2365758B'/%3e%3c/svg%3e");
}

stp-icon[type="text-alignment-center"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20y='4'%20width='24'%20height='2'%20fill='%2365758B'/%3e%3crect%20x='3'%20y='9'%20width='18'%20height='2'%20fill='%2365758B'/%3e%3crect%20y='14'%20width='24'%20height='2'%20fill='%2365758B'/%3e%3crect%20x='3'%20y='19'%20width='18'%20height='2'%20fill='%2365758B'/%3e%3c/svg%3e");
}

stp-icon[type="text-alignment-left"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20y='4'%20width='24'%20height='2'%20fill='%2365758B'/%3e%3crect%20y='9'%20width='18'%20height='2'%20fill='%2365758B'/%3e%3crect%20y='14'%20width='24'%20height='2'%20fill='%2365758B'/%3e%3crect%20y='19'%20width='18'%20height='2'%20fill='%2365758B'/%3e%3c/svg%3e");
}

stp-icon[type="text-alignment-right"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20y='4'%20width='24'%20height='2'%20fill='%2365758B'/%3e%3crect%20x='6'%20y='9'%20width='18'%20height='2'%20fill='%2365758B'/%3e%3crect%20y='14'%20width='24'%20height='2'%20fill='%2365758B'/%3e%3crect%20x='6'%20y='19'%20width='18'%20height='2'%20fill='%2365758B'/%3e%3c/svg%3e");
}

stp-icon[type="text-background-color"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20viewBox='0%200%2028%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='7'%20y='8'%20width='14'%20height='15'%20fill='%2365758B'/%3e%3cpath%20d='M16.05%2016.7479L14.0428%2011.3866L12.0356%2016.7479H16.05ZM9%2020.7843L13.2632%2010H14.8556L19.1188%2020.7843H17.5595L16.4813%2017.888H11.6043L10.5261%2020.7843H9Z'%20fill='white'/%3e%3c/svg%3e");
}

stp-icon[type="text-color"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20viewBox='0%200%2028%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.05%2015.7479L14.0428%2010.3866L12.0356%2015.7479H16.05ZM9%2019.7843L13.2632%209H14.8556L19.1188%2019.7843H17.5595L16.4813%2016.888H11.6043L10.5261%2019.7843H9Z'%20fill='%2365758B'/%3e%3crect%20x='8'%20y='22'%20width='12'%20height='1'%20fill='%2365758B'/%3e%3c/svg%3e");
}

stp-icon[type="calendar"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20stroke='%23344256'%20stroke-width='1.3714'%3e%3cpath%20d='m0.68584%204.5716c0-0.75742%200.61401-1.3714%201.3714-1.3714h19.885c0.75743%200%201.3714%200.614%201.3714%201.3714v17.371c0%200.75729-0.61398%201.3714-1.3714%201.3714h-19.885c-0.7574%200-1.3714-0.61412-1.3714-1.3714z'%20stroke-linejoin='round'/%3e%3cg%20stroke-linecap='round'%3e%3cpath%20d='m23.314%208.2287h-22.628'/%3e%3cpath%20d='m5.7144%203.2v-2.5143'/%3e%3cpath%20d='m18.285%203.2v-2.5143'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

stp-icon[type="flag"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='22'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2022%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20stroke='%23344256'%20stroke-linecap='round'%20stroke-width='1.5319'%3e%3cpath%20d='m1.1694%202.1707v21.063'/%3e%3cpath%20d='m1.1714%203.5744s2.4574-2.8085%206.1435-2.8085c3.6862%200%206.4946%202.8085%209.303%202.8085%202.8086%200%204.2127-1.4042%204.2127-1.4042'/%3e%3cpath%20d='m1.1714%2016.213s2.4574-2.8086%206.1435-2.8086c3.6862%200%206.4946%202.8086%209.303%202.8086%202.8086%200%204.2127-1.4043%204.2127-1.4043v-12.638'/%3e%3c/g%3e%3c/svg%3e");
    width: 22px;
    aspect-ratio: 11 / 12;
}

stp-icon[type="print"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20stroke='%23344256'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.5'%3e%3crect%20transform='rotate(90)'%20x='14.5'%20y='-18.25'%20width='8.7498'%20height='12.5'%20rx='1.5'/%3e%3cpath%20d='m5.7501%2019.5h-3.4999c-0.82842%200-1.5-0.67154-1.5-1.5v-8.2498c0-0.8284%200.67157-1.5%201.5-1.5h19.5c0.82843%200%201.5%200.67157%201.5%201.5v8.2498c0%200.82843-0.67154%201.5-1.5%201.5h-3.4999'/%3e%3cpath%20d='m5.7501%208.2498v-5.9999c0-0.8284%200.67155-1.5%201.5-1.5h9.4998c0.82843%200%201.5%200.67157%201.5%201.5v5.9999'/%3e%3c/g%3e%3c/svg%3e");
}

stp-icon[type="export"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='24'%20height='24'%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m12%2012%2011.15-11.15v8.6726-8.6726h-8.6726'%20stroke='%23344256'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.6991'/%3e%3cpath%20d='m8.2832%200.84957h-4.9558c-1.369%200-2.4779%201.1088-2.4779%202.4779v17.345c0%201.369%201.1088%202.4778%202.4779%202.4778h17.345c1.369%200%202.4778-1.1088%202.4778-2.4778v-4.9558'%20stroke='%23344256'%20stroke-linecap='round'%20stroke-width='1.6991'/%3e%3c/svg%3e");
}

stp-icon[type="person"] {
    mask-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='19'%20viewBox='0%200%2016%2019'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3.27918%204.25C3.27918%201.90279%205.18197%200%207.52918%200C9.87639%200%2011.7792%201.90279%2011.7792%204.25C11.7792%206.59721%209.87639%208.5%207.52918%208.5C5.18197%208.5%203.27918%206.59721%203.27918%204.25ZM7.52918%201.5C6.0104%201.5%204.77918%202.73122%204.77918%204.25C4.77918%205.76878%206.0104%207%207.52918%207C9.04796%207%2010.2792%205.76878%2010.2792%204.25C10.2792%202.73122%209.04796%201.5%207.52918%201.5Z'%20fill='%2394A3B8'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0.0915718%2015.2378C1.03478%2012.022%204.00662%209.67248%207.52918%209.67248C11.0517%209.67248%2014.0236%2012.022%2014.9668%2015.2378C15.2034%2016.0445%2014.9613%2016.805%2014.4722%2017.3395C13.9942%2017.8619%2013.2833%2018.1725%2012.5292%2018.1725H2.52918C1.77508%2018.1725%201.0642%2017.8619%200.586129%2017.3395C0.0970149%2016.805%20-0.145034%2016.0445%200.0915718%2015.2378ZM7.52918%2011.1725C4.6904%2011.1725%202.29185%2013.0657%201.53094%2015.66C1.45666%2015.9132%201.52129%2016.1395%201.69272%2016.3268C1.87518%2016.5262%202.1787%2016.6725%202.52918%2016.6725H12.5292C12.8797%2016.6725%2013.1832%2016.5262%2013.3656%2016.3268C13.5371%2016.1395%2013.6017%2015.9132%2013.5274%2015.66C12.7665%2013.0657%2010.368%2011.1725%207.52918%2011.1725Z'%20fill='%2394A3B8'/%3e%3c/svg%3e");
    width: 22px;
    aspect-ratio: 16 / 19;
}

stp-icon[type="personMany"] {
    mask-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='19.5'%20cy='17'%20r='1.45'%20stroke='%2365758b'%20stroke-width='1.1'/%3e%3cmask%20id='path-2-inside-1_6972_342652'%20fill='white'%3e%3cpath%20d='M16%2023.5C16%2021.567%2017.567%2020%2019.5%2020C21.433%2020%2023%2021.567%2023%2023.5V23.5556C23%2023.801%2022.801%2024%2022.5556%2024H16.4444C16.199%2024%2016%2023.801%2016%2023.5556V23.5Z'/%3e%3c/mask%3e%3cpath%20d='M16%2023.5C16%2021.567%2017.567%2020%2019.5%2020C21.433%2020%2023%2021.567%2023%2023.5V23.5556C23%2023.801%2022.801%2024%2022.5556%2024H16.4444C16.199%2024%2016%2023.801%2016%2023.5556V23.5Z'%20stroke='%2365758b'%20stroke-width='2.2'%20stroke-linejoin='round'%20mask='url(%23path-2-inside-1_6972_342652)'/%3e%3ccircle%20cx='11.5'%20cy='2'%20r='1.45'%20stroke='%2365758b'%20stroke-width='1.1'/%3e%3cmask%20id='path-4-inside-2_6972_342652'%20fill='white'%3e%3cpath%20d='M8%208.5C8%206.567%209.567%205%2011.5%205C13.433%205%2015%206.567%2015%208.5V8.55556C15%208.80102%2014.801%209%2014.5556%209H8.44444C8.19898%209%208%208.80102%208%208.55556V8.5Z'/%3e%3c/mask%3e%3cpath%20d='M8%208.5C8%206.567%209.567%205%2011.5%205C13.433%205%2015%206.567%2015%208.5V8.55556C15%208.80102%2014.801%209%2014.5556%209H8.44444C8.19898%209%208%208.80102%208%208.55556V8.5Z'%20stroke='%2365758b'%20stroke-width='2.2'%20stroke-linejoin='round'%20mask='url(%23path-4-inside-2_6972_342652)'/%3e%3ccircle%20cx='11.5'%20cy='17'%20r='1.45'%20stroke='%2365758b'%20stroke-width='1.1'/%3e%3cmask%20id='path-6-inside-3_6972_342652'%20fill='white'%3e%3cpath%20d='M8%2023.5C8%2021.567%209.567%2020%2011.5%2020C13.433%2020%2015%2021.567%2015%2023.5V23.5556C15%2023.801%2014.801%2024%2014.5556%2024H8.44444C8.19898%2024%208%2023.801%208%2023.5556V23.5Z'/%3e%3c/mask%3e%3cpath%20d='M8%2023.5C8%2021.567%209.567%2020%2011.5%2020C13.433%2020%2015%2021.567%2015%2023.5V23.5556C15%2023.801%2014.801%2024%2014.5556%2024H8.44444C8.19898%2024%208%2023.801%208%2023.5556V23.5Z'%20stroke='%2365758b'%20stroke-width='2.2'%20stroke-linejoin='round'%20mask='url(%23path-6-inside-3_6972_342652)'/%3e%3ccircle%20cx='3.5'%20cy='17'%20r='1.45'%20stroke='%2365758b'%20stroke-width='1.1'/%3e%3cmask%20id='path-8-inside-4_6972_342652'%20fill='white'%3e%3cpath%20d='M0%2023.5C0%2021.567%201.567%2020%203.5%2020C5.433%2020%207%2021.567%207%2023.5V23.5556C7%2023.801%206.80102%2024%206.55556%2024H0.444445C0.198985%2024%200%2023.801%200%2023.5556V23.5Z'/%3e%3c/mask%3e%3cpath%20d='M0%2023.5C0%2021.567%201.567%2020%203.5%2020C5.433%2020%207%2021.567%207%2023.5V23.5556C7%2023.801%206.80102%2024%206.55556%2024H0.444445C0.198985%2024%200%2023.801%200%2023.5556V23.5Z'%20stroke='%2365758b'%20stroke-width='2.2'%20stroke-linejoin='round'%20mask='url(%23path-8-inside-4_6972_342652)'/%3e%3cpath%20d='M3%2012C3%2011.4477%203.44772%2011%204%2011H19C19.5523%2011%2020%2011.4477%2020%2012H3Z'%20fill='%2365758b'/%3e%3cpath%20d='M3%2012H4V13.5C4%2013.7761%203.77614%2014%203.5%2014C3.22386%2014%203%2013.7761%203%2013.5V12Z'%20fill='%2365758b'/%3e%3cpath%20d='M11%2012H12V13.5C12%2013.7761%2011.7761%2014%2011.5%2014C11.2239%2014%2011%2013.7761%2011%2013.5V12Z'%20fill='%2365758b'/%3e%3cpath%20d='M19%2012H20V13.5C20%2013.7761%2019.7761%2014%2019.5%2014C19.2239%2014%2019%2013.7761%2019%2013.5V12Z'%20fill='%2365758b'/%3e%3c/svg%3e");
}

stp-icon[type="lockMenu"] {
    mask-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M4%200.75H8.25V23.25H4C2.20507%2023.25%200.75%2021.7949%200.75%2020V4C0.75%202.20507%202.20507%200.75%204%200.75Z'%20stroke='%2365758b'%20stroke-width='1.5'/%3e%3cmask%20id='path-2-inside-1_16932_468859'%20fill='white'%3e%3cpath%20d='M8%200H20C22.2091%200%2024%201.79086%2024%204V20C24%2022.2091%2022.2091%2024%2020%2024H8V0Z'/%3e%3c/mask%3e%3cpath%20d='M8%20-1.5H20C23.0376%20-1.5%2025.5%200.962434%2025.5%204H22.5C22.5%202.61929%2021.3807%201.5%2020%201.5H8V-1.5ZM25.5%2020C25.5%2023.0376%2023.0376%2025.5%2020%2025.5H8V22.5H20C21.3807%2022.5%2022.5%2021.3807%2022.5%2020H25.5ZM22.5%2020M8%2024V0V24M20%20-1.5C23.0376%20-1.5%2025.5%200.962434%2025.5%204V20C25.5%2023.0376%2023.0376%2025.5%2020%2025.5V22.5C21.3807%2022.5%2022.5%2021.3807%2022.5%2020V4C22.5%202.61929%2021.3807%201.5%2020%201.5V-1.5Z'%20fill='%2365758b'%20mask='url(%23path-2-inside-1_16932_468859)'/%3e%3c/svg%3e");
}

stp-icon[type="delete-object"] {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20version='1.1'%20id='svg1'%20sodipodi:docname='delete-object.svg'%20inkscape:version='1.4.2%20(f4327f4,%202025-05-13)'%20xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'%20xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs1'%20/%3e%3csodipodi:namedview%20id='namedview1'%20pagecolor='%23ffffff'%20bordercolor='%23000000'%20borderopacity='0.25'%20inkscape:showpageshadow='2'%20inkscape:pageopacity='0.0'%20inkscape:pagecheckerboard='0'%20inkscape:deskcolor='%23d1d1d1'%20inkscape:zoom='35.797281'%20inkscape:cx='10.713104'%20inkscape:cy='12.808235'%20inkscape:window-width='3440'%20inkscape:window-height='1417'%20inkscape:window-x='1912'%20inkscape:window-y='549'%20inkscape:window-maximized='1'%20inkscape:current-layer='svg1'%20/%3e%3crect%20x='0.72000027'%20y='0.72000027'%20width='22.559999'%20height='22.559999'%20rx='1.6800001'%20stroke='%23344256'%20stroke-width='1.44'%20id='rect1'%20/%3e%3cpath%20d='M%2016.8,7.1999994%207.1999997,16.800001%20m%200,-9.6000016%20L%2016.8,16.800001'%20stroke='%23344256'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='path1'%20/%3e%3c/svg%3e");
}
.mainMenuFooter {
    padding: 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mainMenuFooterArrow {
    margin-left: 14px;
    justify-self: end;
    width: 8px!important;
    background-color: var(--color-grey-500);
    transition: background-color 300ms ease-in-out;
}

.mainMenuFooterArrowHover,
.mainMenuFooterItem:hover > .mainMenuFooterArrow {
    background-color: var(--color-white);
}

.mainMenuFooterLogo {
    border-radius: 8px;
    width: 48px;
    height: 48px;
    padding: 1px;
}

.mainMenuFooterHover,
.mainMenuFooterItem:hover {
    background-color: var(--color-grey-800);
}

.mainMenuFooterActive {
    background-color: var(--color-blue-700);
}

.mainMenuFooterMainText {
    color: var(--color-white);
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    width: 160px;
    margin: 0;
}

.mainMenuFooterSecondText {
    color: var(--color-white);
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    width: 160px;
}

.mainMenuFooterItem {
    display: grid;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
    transition: padding 150ms ease-in-out;
}

.mainMenuFooterItemNarrow {
    padding: 4px;
}

.mainMenuFooterItemWide {
    padding: 4px 12px 4px 4px;
    column-gap: 16px;
    grid-template-columns: 48px auto 20px;
}

.mainMenuFooterChangeViewButton {
    color: var(--color-grey-500);
    transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
    height: 40px;
    width: 100%;
    align-content: center;
    text-decoration: none !important;
    gap: 15px;
    padding: 14px;
    background-color: unset;
    border-color: var(--color-grey-500);
    border-radius: 8px;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 24px;
}

.mainMenuFooterChangeViewButton > span {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.mainMenuFooterChangeViewButtonIcon {
    margin-left: 2px;
}

.mainMenuFooterChangeViewButton > .mainMenuFooterChangeViewButtonIcon {
    background-color: var(--color-grey-500);
    transition: background-color 150ms ease-in-out;
}

.mainMenuFooterChangeViewButton:hover {
    color: var(--color-white);
    background-color: var(--color-blue-800);
}

.mainMenuFooterChangeViewButton:hover > .mainMenuFooterChangeViewButtonIcon {
    background-color: var(--color-white);
}

.mainMenuFooterChangeViewButton.mainMenuFooterChangeViewButtonActive {
    color: var(--color-white);
    background-color: var(--color-blue-700);
}

.mainMenuFooterChangeViewButton.mainMenuFooterChangeViewButtonActive > .mainMenuFooterChangeViewButtonIcon {
    background-color: var(--color-white);
}

.mainMenuFooterChangeViewButton.mainMenuFooterChangeViewButtonActive:hover {
    color: var(--color-white);
    background-color: var(--color-blue-600);
}
.mainMenuSecond {
    z-index: var(--stp-z-index-main-menu-3);
    position: relative;
    background-color: var(--color-white);
    height: 100%;
    transition: width 150ms ease-in-out;
    overflow: hidden auto;
}

.mainMenuSecondOpened {
    width: 314px;
}

.mainMenuSecondClosed {
    width: 0;
}
.mainMenuSecondLayout {
    width: 100%;
    height: 100%;
}

.mainMenuSecondLayoutDiagnostic {
    padding-top: 12px;
}

.mainMenuSecondLayoutUser {
    padding-top: 12px;
}

.mainMenuSecondLayoutClinic {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mainMenuSecondMenuButtonsGrid {
    width: 314px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
}

.mainMenuSecondMenuButton {
    padding: 0 10px;
    text-align: left;
    height: 40px;
    width: 100%;
    border-radius: 6px;
    border: solid 1px;
    border-color: var(--color-grey-200);
    font-weight: 400;
    color: var(--color-grey-700);
    font-size: 16px;
    line-height: 24px;
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out;
}

.mainMenuSecondMenuButton:hover {
    background-color: var(--color-grey-100);
    border-color: var(--color-grey-100);
}

.mainMenuSecondMenuButtonActive {
    background-color: var(--color-grey-200);
    color: var(--color-grey-700);
    border-color: var(--color-grey-200);
}
.clinicSelectorWrap {
    position: relative;
    z-index: var(--stp-z-index-main-menu-9);
    width: 274px;
    height: 68px;
}

.clinicSelector {
    position: absolute;
    width: 274px;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--color-white);
    border: solid 1px var(--color-grey-300);
    max-height: 68px;
    transition: max-height 150ms ease-in-out;
}

.clinicSelectorOpened {
    max-height: 500px;
}

.clinicSelectorMain {}

.clinicSelectorList {
    border-top: solid 1px var(--color-grey-300);
    max-height: 400px;
    overflow: hidden auto;
}

.clinicSelectorItem {
    --h5-color: var(--color-grey-700);
    --p-color: var(--color-grey-400);

    width: 100%;
    min-height: 66px;
    display: flex;
    gap: 10px;
    cursor: pointer;
    transition: background-color 150ms ease-in-out;
    align-items: center;
    padding: 4px 12px;
}

.clinicSelectorItem:hover {
    --h5-color: var(--color-grey-700);
    --p-color: var(--color-grey-400);

    background-color: var(--color-grey-200);
}

.clinicSelectorItemActive {
    --h5-color: var(--color-white);
    --p-color: var(--color-grey-100);

    background-color: var(--color-blue-500);
}

.clinicSelectorItemTextBlock {}

.clinicSelectorItemTextBlock > h5 {
    color: var(--h5-color);
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
}

.clinicSelectorItemTextBlock > p {
    color: var(--p-color);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.clinicSelectorItemIcon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

.clinicSelectorItem.clinicSelectorCurrentItem {
    display: grid;
    grid-template-columns: 30px auto 20px;
}

.clinicSelectorItem.clinicSelectorCurrentItem > .clinicSelectorItemTextBlock > h5 {
    max-width: 180px;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}

.clinicSelectorArrow {
    width: 19px !important;
    transition: rotate 150ms ease-in-out;
}

.clinicSelectorArrow.clinicSelectorArrowRotate {
    rotate: 180deg;
}
.mainmenuBackground {
    z-index: var(--stp-z-index-main-menu-1);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-bg);
    opacity: 1;
    pointer-events: unset;
    transition: opacity 150ms ease-in-out;
}

.mainmenuBackground.hide {
    pointer-events: none;
    opacity: 0;
}
html {
    --animation-duration: 0.2s;
    --animation-timing-function: cubic-bezier(0, 1, 1, 1);

    --stomplan-border-radius: 12px;
    --stomplan-border-radius-sm: 6px;

    --stomplan-border-width: 1px;
    --stomplan-border: var(--stomplan-border-width) solid var(--stomplan-border-color);

    --stomplan-padding: 20px;

    --stomplan-gap: 12px;
    --stomplan-gap-sm: 8px;
}

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

* {
    font-family: Inter, Arial, sans-serif;
}

viewframe.row {
    --bs-gutter-x: 0;
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow-x: hidden;
    display: flex;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #eaeef4;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: #8d99ab;
    border-radius: 4px;
    border: 0;
}

confirmation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    opacity: 0;
    background-color: var(--color-bg);
}

loading {
    position: relative;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
}

loading.hide {
    display: none !important;
}

loading > .center {
    flex-direction: column;
    gap: 48px;
}

reading {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 32px;
    display: grid;
    gap: 8px;
    z-index: 1901;
}

popup {
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 32px;
    z-index: 1902;
    justify-self: center;
    max-width: 400px;
}

popup > div {
    display: flex;
    gap: 8px;
    flex-direction: column-reverse;
}

div#loadingBar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 8px;
    background-color: var(--color-grey-600);
}

content, windowedcontent {
    /* поддержка cqh значений */
    container-type: size;
}

content {
    display: block;
    width: 1600px;
    height: 100vh;
}

content.hide {
    display: none !important;
}

content.menu-margin {
    margin-left: 72px;
    max-width: 1528px;
}

content > * > * {
    max-width: 2000px;
}

computing {
    position: relative;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
}

computing.hide {
    display: none !important;
}

computing > .center {
    flex-direction: column;
    gap: 48px;
}

div.center {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    margin: 0;
}

p.center {
    text-align: center;
}

h1.center,
h2.center,
h3.center,
h4.center,
h5.center,
h6.center {
    text-align: center;
}

viewframe {
    width: 100%;
    height: 100%;
    display: block;
}

modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

modal.hide {
    display: none;
}

modalWindow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--color-bg);
    display: grid;
    justify-content: center;
    align-content: center;
    z-index: var(--stp-z-index-content-5);
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
    user-select: none;
}

button:disabled {
    cursor: default;
}

ul li {
    list-style: none;
}

ul,
li {
    margin: 0;
    padding: 0;
}

.form-check {
    margin-bottom: 0 !important;
}

._loading-spinner {
    width: 7vh;
    animation: loading_spinner 2s infinite;
    animation-timing-function: cubic-bezier(0.58, 0.42, 0.4, 0.75);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@keyframes loading_spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

windowedmodule {
    width: 100vw;
    height: 100vh;
    z-index: 500;
    padding: 10px 88px 10px 10px;
    display: flex;
    position: absolute;
    background-color: #0008;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 20px;
}

windowedmodule > .windowedmodule_close {
    cursor: pointer;
}

windowedcontent {
    width: 100%;
    max-width: 1600px;
    height: 100%;
    background-color: #fff;
    display: block;
    border-radius: 20px;
    padding: 10px;
    overflow: hidden;
}

html {
    --color-bg: #94a3b8a0;
    --color-white: #fff;
    --color-black: #000;
    --color-grey: #65758b;
    --color-blue: #2463eb;
    --color-lime: #82cb15;
    --color-chery: #ef4343;
    --color-red: var(--color-chery);
    --color-amber: #f59f0a;
    --color-grey-50: #f8fafc;
    --color-grey-100: #f1f5f9;
    --color-grey-200: #e1e7ef;
    --color-grey-300: #cbd5e1;
    --color-grey-400: #94a3b8;
    --color-grey-500: #65758b;
    --color-grey-600: #48566a;
    --color-grey-700: #344256;
    --color-grey-800: #1d283a;
    --color-grey-900: #0f1729;
    --color-blue-50: #f0f6ff;
    --color-blue-100: #d3e0fb;
    --color-blue-200: #a7c0f7;
    --color-blue-300: #7ba1f3;
    --color-blue-400: #5082ef;
    --color-blue-500: #2463eb;
    --color-blue-600: #1d4fbc;
    --color-blue-700: #153b8d;
    --color-blue-800: #0e275e;
    --color-blue-900: #07142f;
    --color-lime-50: #f7fded;
    --color-lime-100: #e6f5d0;
    --color-lime-200: #cdeaa1;
    --color-lime-300: #b4e073;
    --color-lime-400: #9bd544;
    --color-lime-500: #82cb15;
    --color-lime-600: #68a211;
    --color-lime-700: #4e7a0d;
    --color-lime-800: #345108;
    --color-lime-900: #1a2904;
    --color-cherry-50: #fef1f1;
    --color-cherry-100: #fee1e1;
    --color-cherry-200: #fec8c8;
    --color-cherry-300: #fca6a6;
    --color-cherry-400: #f87272;
    --color-cherry-500: #ef4343;
    --color-cherry-600: #dc2828;
    --color-cherry-700: #ba1c1c;
    --color-cherry-800: #ba1c1c;
    --color-cherry-900: #300d0d;
    --color-red-50: var(--color-cherry-50);
    --color-red-100: var(--color-cherry-100);
    --color-red-200: var(--color-cherry-200);
    --color-red-300: var(--color-cherry-300);
    --color-red-400: var(--color-cherry-400);
    --color-red-500: var(--color-cherry-500);
    --color-red-600: var(--color-cherry-600);
    --color-red-700: var(--color-cherry-700);
    --color-red-800: var(--color-cherry-800);
    --color-red-900: var(--color-cherry-900);
    --color-amber-50: #fffbeb;
    --color-amber-100: #fdecce;
    --color-amber-200: #fbd89d;
    --color-amber-300: #f9c56c;
    --color-amber-400: #f7b23b;
    --color-amber-500: #f59f0a;
    --color-amber-600: #c47f08;
    --color-amber-700: #935f06;
    --color-amber-800: #624004;
    --color-amber-900: #312002;
    --color-yellow-50: #FEFCE8;
    --color-yellow-100: #FEF9C3;
    --color-yellow-200: #FEF08A;
    --color-yellow-300: #FDE047;
    --color-yellow-400: #FACC15;
    --color-yellow-500: #EAB308;
    --color-yellow-600: #CA8A04;
    --color-yellow-700: #A16207;
    --color-yellow-800: #854D0E;
    --color-yellow-900: #713F12;
    --color-yellow-950: #422006;
    --color-orange-50: #FFF7ED;
    --color-orange-100: #FFEDD5;
    --color-orange-200: #FED7AA;
    --color-orange-300: #FDBA74;
    --color-orange-400: #FB923C;
    --color-orange-500: #F97316;
    --color-orange-600: #EA580C;
    --color-orange-700: #C2410C;
    --color-orange-800: #9A3412;
    --color-orange-900: #7C2D12;
    --color-orange-950: #431407;
    --color-green-50: #F0FDF4;
    --color-green-100: #DCFCE7;
    --color-green-200: #BBF7D0;
    --color-green-300: #86EFAC;
    --color-green-400: #4ADE80;
    --color-green-500: #22C55E;
    --color-green-600: #16A34A;
    --color-green-700: #15803D;
    --color-green-800: #166534;
    --color-green-900: #14532D;
    --color-green-950: #052E16;
    --color-cloudy-50: #ECFEFF;
    --color-cloudy-100: #CFFAFE;
    --color-cloudy-200: #A5F3FC;
    --color-cloudy-300: #67E8F9;
    --color-cloudy-400: #22D3EE;
    --color-cloudy-500: #06B6D4;
    --color-cloudy-600: #0891B2;
    --color-cloudy-700: #0E7490;
    --color-cloudy-800: #155E75;
    --color-cloudy-900: #164E63;
    --color-cloudy-950: #083344;
    --color-purple-50: #F5F3FF;
    --color-purple-100: #EDE9FE;
    --color-purple-200: #DDD6FE;
    --color-purple-300: #C4B5FD;
    --color-purple-400: #A78BFA;
    --color-purple-500: #8B5CF6;
    --color-purple-600: #7C3AED;
    --color-purple-700: #6D28D9;
    --color-purple-800: #5B21B6;
    --color-purple-900: #4C1D95;
    --color-purple-950: #2E1065;
    --color-pink-50: #FDF2F8;
    --color-pink-100: #FCE7F3;
    --color-pink-200: #FBCFE8;
    --color-pink-300: #F9A8D4;
    --color-pink-400: #F472B6;
    --color-pink-500: #EC4899;
    --color-pink-600: #DB2777;
    --color-pink-700: #BE185D;
    --color-pink-800: #9D174D;
    --color-pink-900: #831843;
    --color-pink-950: #500724;

    --stomplan-border-color: var(--color-grey-300);
}

.background-color-red,
.background-color-red-500 {
    background-color: var(--color-red-500);
}

.background-color-orange,
.background-color-orange-500 {
    background-color: var(--color-orange-500);
}

.background-color-yellow,
.background-color-yellow-500 {
    background-color: var(--color-yellow-500);
}

.background-color-lime,
.background-color-lime-500 {
    background-color: var(--color-lime-500);
}

.background-color-green,
.background-color-green-500 {
    background-color: var(--color-green-500);
}

.background-color-cloudy,
.background-color-cloudy-500 {
    background-color: var(--color-cloudy-500);
}

.background-color-blue,
.background-color-blue-500 {
    background-color: var(--color-blue-500);
}

.background-color-pink,
.background-color-pink-500 {
    background-color: var(--color-pink-500);
}

.background-color-purple,
.background-color-purple-500 {
    background-color: var(--color-purple-500);
}

.background-color-grey,
.background-color-grey-500 {
    background-color: var(--color-grey-500);
}

.background-color-white {
    background-color: var(--color-white);
}

.background-color-black {
    background-color: var(--color-black);
}

.display-none {
    display: none !important;
}

.select-none {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.select-pass::selection {
    background-color: var(--color-blue-500);
    color: white;
}

.select-pass::-moz-selection {
    background-color: var(--color-blue-500);
    color: white;
}

.select-pass *::selection {
    background-color: var(--color-blue-500);
    color: white;
}

.select-pass *::-moz-selection {
    background-color: var(--color-blue-500);
    color: white;
}

h1 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
}

h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
}

h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

h4 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}

h5,
p.subhead {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
}

h6,
p.medium {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

p,
body {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

a,
.link {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
}

a.medium,
.link.medium {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
}

a.underlined,
.link.underlined {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: underline;
}

a:hover,
.link:hover {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: underline;
}

p.caption {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
}

p.caption-bold,
p.caption-medium {
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
}

p.caption.paragraph {
    line-height: 22px;
}

p.footnote {
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
}

p.footnote.paragraph {
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
}

mark {
    font-weight: 500;
    padding: 0;
    background-color: var(--color-blue-100);
    padding: 0 1.5px;
}

select,
textarea,
select.large,
input[type="text"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="text"].large,
input[type="url"].large,
input[type="password"].large,
input[type="number"].large,
input[type="email"].large {
    outline: none;
    padding: 12px;
    border: var(--stomplan-border);
    width: 100%;
    border-radius: 8px;
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
    background-color: var(--color-white);
}

select,
select.large,
stp-select,
input[type="text"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="text"].large,
input[type="url"].large,
input[type="password"].large,
input[type="number"].large,
input[type="email"].large {
    max-height: 48px;
}

select {
    color: var(--color-grey-400);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-grey-400);
    font-size: 16px;
}

input:placeholder-shown {
    color: var(--color-grey-400);
}

input[type="text"]:not(:placeholder-shown),
input[type="text"]:not(.disabled:placeholder-shown),
input[type="text"]:not(:placeholder-shown:disabled),
textarea:not(:placeholder-shown),
textarea:not(.disabled:placeholder-shown),
textarea:not(:placeholder-shown:disabled) {
    color: var(--color-black);
}

select.medium,
input[type="text"].medium,
input[type="url"].medium,
input[type="password"].medium,
input[type="number"].medium,
input[type="email"].medium {
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

select:hover,
input[type="text"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="date"]:hover,
textarea:hover {
    border-color: var(--color-grey-500);
}

select:active,
select:focus,
input[type="text"]:active,
input[type="text"]:focus,
input[type="url"]:active,
input[type="url"]:focus,
input[type="password"]:active,
input[type="password"]:focus,
input[type="number"]:active,
input[type="number"]:focus,
input[type="email"]:active,
input[type="email"]:focus,
input[type="date"]:active,
input[type="date"]:focus,
textarea:active,
textarea:focus {
    color: var(--color-black);
}

select:disabled,
input[type="text"]:disabled,
input[type="url"]:disabled,
input[type="password"]:disabled,
input[type="number"].disabled,
input[type="email"]:disabled,
input[type="date"]:disabled,
textarea:disabled {
    background-color: var(--color-grey-300);
    color: var(--color-grey-500);
}

select.filled,
input[type="text"].filled,
input[type="url"].filled,
input[type="password"].filled,
input[type="number"].filled,
input[type="email"].filled,
input[type="date"].filled,
textarea.filled {
    color: var(--color-black);
}

select.error,
input[type="text"].error,
input[type="url"].error,
input[type="password"].error,
input[type="number"].error,
input[type="email"].error,
input[type="date"].error,
textarea.error {
    border-color: var(--color-cherry-500);
    background-color: var(--color-cherry-50);
    color: var(--color-black);
}

select.success,
input[type="text"].success,
input[type="url"].success,
input[type="password"].success,
input[type="number"].success,
input[type="email"].success,
input[type="date"].success,
textarea.success {
    border-color: var(--color-lime-500);
    background-color: var(--color-lime-50);
    color: var(--color-black);
}

label.text-input,
label.text-input.large {
    outline: none;
    border: 2px solid;
    border-radius: 0.5em;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    background-color: var(--color-white);
    border-color: var(--color-grey-300);
    color: var(--color-grey-500);
}

input[type="date"] {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    padding: 12px;
    max-height: 48px !important;
    color: var(--color-grey-400);
}

label.text-input.medium {
    border-radius: 0.3em;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

label.text-input:hover {
    border-color: var(--color-grey-500);
}

label.text-input:active,
label.text-input:focus {
    border-color: var(--color-blue-500);
    box-shadow: 0 0 0 4px var(--color-blue-200);
    color: var(--color-black);
}

label.text-input:disabled {
    background-color: var(--color-grey-300);
    color: var(--color-grey-500);
}

label.text-input.filled {
    color: var(--color-black);
}

label.text-input.error {
    border-color: var(--color-cherry-500);
    background-color: var(--color-cherry-50);
    color: var(--color-black);
}

label.text-input.success {
    border-color: var(--color-lime-500);
    background-color: var(--color-lime-50);
    color: var(--color-black);
}

label.text-input > input {
    border: none;
}

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

.text-transform-capitalize {
    text-transform: capitalize;
}

div.app_readingLoading-message.remove {
    animation-name: app_readingLoading-message-remove-animation;
    animation-duration: 3s;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(1, 0.5, 0.5, 0);
}

@keyframes app_readingLoading-message-remove-animation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

popup > div > * {
    padding: 12px 20px;
    background-color: var(--color-grey-100);
    border: solid 1px var(--color-grey-600);
    border-radius: 10px;
    min-width: 300px;
    max-width: 400px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 0 10px 0 var(--color-blue-500);
}

popup > div > .negative {
    box-shadow: 0 0 10px 0 var(--color-cherry-500);
    background-color: var(--color-cherry-100);
}

popup p {
    font-weight: 600;
    font-size: large;
    text-wrap: wrap;
    color: var(--color-grey-900);
}

popup > div > .remove {
    animation-name: app_readingLoading-message-remove-animation;
    animation-duration: 1s;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(1, 0.5, 0.5, 0);
}

.input-icon {
    display: flex;
    align-self: center;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    position: absolute;
    left: 12px;
    cursor: pointer;
}

textarea {
    /* убирает странный отступ снизу */
    vertical-align: top;
}

.rounded {
    /* bootstrap определяет подобный класс с !important */
    border-radius: var(--stomplan-border-radius) !important;
}

.rounded-sm {
    border-radius: var(--stomplan-border-radius-sm) !important;
}

.resize-none {
    resize: none;
}

.width-100 {
    width: 100%;
}

.circle {
    background-color: var(--color-grey-400);
    display: inline-block;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    width: 12px;
}

.global_default-modal {
    position: relative;
    background-color: #fff;
    padding: 48px;
    border-radius: 24px;
    max-height: 900px;
    gap: 40px;
    justify-content: center;
}

.global_default-modal-close {
    position: absolute;
    top: 0;
    right: -72px;
    cursor: pointer;
}

.textCrop,
.typo.typo_lineCrop {
  overflow: hidden;
  text-overflow: ellipsis;
}

.textCrop {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.textCrop.textCrop_1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.textCrop.textCrop_2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.textCrop.textCrop_3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.textCrop.textCrop_4 {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.typo.typo_lineCrop {
  white-space: nowrap;
}

.display-flex,
.display-flex-center {
  display: flex;
}

.justify-content-center,
.display-flex-center {
  justify-content: center;
}

.justify-content-space-between {
  justify-content: space-between;
}

.flex-direction-column {
  flex-direction: column;
}

.align-items-center,
.display-flex-center {
  align-items: center;
}

.align-items-start {
  align-items: start;
}

.gap {
  gap: var(--stomplan-gap);
}

.gap-sm {
  gap: var(--stomplan-gap-sm);
}

.padding-0 {
  padding: 0px;
}

.padding-2 {
  padding: 2px;
}

.padding-4 {
  padding: 4px;
}

.padding-6 {
  padding: 6px;
}

.padding-8 {
  padding: 8px;
}

.padding-10 {
  padding: 10px;
}

.margin-0 {
  margin: 0;
}

.font-weight-100 {
  font-weight: 100;
}

.font-weight-200 {
  font-weight: 200;
}

.font-weight-300 {
  font-weight: 300;
}

.font-weight-400 {
  font-weight: 400;
}

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

.font-weight-600 {
  font-weight: 600;
}

.font-weight-700 {
  font-weight: 700;
}

.breadcrumbs {
    color: var(--color-grey-500);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: -0.24px;
}

.breadcrumbs > span {
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    padding-right: 1px;
}

.breadcrumbs > span:not(:first-child) {
    margin-left: 5px;
}

.breadcrumb-widget {
    cursor: pointer;
}

.breadcrumb-widget:hover {
    text-shadow: 0.6px 0 var(--color-grey-800);
    color: var(--color-grey-800);
    text-decoration: underline;
}

drop-list {
    --drop-list-icon-size: 24px;
    --drop-list-body-font-color: var(--color-grey-400);

    position: relative;

    outline: none;
    padding: 8px calc(var(--drop-list-icon-size) + 12px) 8px 12px;
    border: 1px solid var(--color-grey-300);
    max-height: 48px;
    width: 100%;
    border-radius: 8px;
    font-size: 16px;
    line-height: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    background-color: var(--color-white);
    display: block;
    z-index: 1;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

drop-list:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px;
    align-self: center;
    width: var(--drop-list-icon-size);
    height: var(--drop-list-icon-size);
    background-color: var(--drop-list-body-font-color);
    -webkit-mask: url("../app/files/images/svg/drop-list-arrow.svg");
    mask: url("../app/files/images/svg/drop-list-arrow.svg");
}

drop-list[disabled="disabled"],
drop-list[disabled="true"],
drop-list[disabled=""] {
    background-color: var(--color-grey-300);
    color: var(--color-grey-500);
}

drop-list>._drop-list_body {
    overflow: hidden;
    cursor: pointer;
    color: var(--drop-list-body-font-color);
}

drop-list:has(._drop-list_body:hover) {}

drop-list._drop-list_opened {
    border-radius: 8px 8px 0 0;
}

drop-list._drop-list_opened:after {
    rotate: 180deg;
}

drop-list>._drop-list_list {
    position: absolute;
    top: 100%;
    border: solid 1px var(--color-grey-300);
    border-radius: 0 0 8px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 500px;
}

drop-list>._drop-list_list>option {
    padding: 12px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-grey-400);
    background-color: var(--color-white);
}

drop-list>._drop-list_list>option:hover {
    background-color: var(--color-grey-100);
}

drop-list>._drop-list_list>option._drop-list_selected {
    background-color: var(--color-blue-500) !important;
    color: var(--color-white) !important;
    ;
}

drop-list>._drop-list_list>option[disabled=""],
drop-list>._drop-list_list>option[disabled="disabled"],
drop-list>._drop-list_list>option[disabled="true"] {
    background-color: var(--color-grey-300);
    color: var(--color-grey-500);
}

drop-list>._drop-list_list>option[hidden=""],
drop-list>._drop-list_list>option[hidden="hidden"],
drop-list>._drop-list_list>option[hidden="true"] {
    display: none !important;
}

drop-list.underline {
    border: 0;
    width: auto;
    padding-right: var(--drop-list-icon-size);
    background-color: transparent;
}

drop-list.underline::after {
    right: 0;
}

drop-list.underline>._drop-list_body {
    text-decoration: underline;
}

scalable-image {
  display: block;
}

.imageWrapper {
  position: relative;
}

.imageWrapper.imageWrapper_fluid,
scalable-image.imageWrapper {
  overflow: hidden;
}

.imageWrapper.imageWrapper_zoom:hover:before,
.imageWrapper.imageWrapper_zoom:hover:after,
.imageWrapper.imageWrapper_selectable:hover:before {
  content: "";
  position: absolute;
  display: block;
  z-index: 1;
  cursor: pointer;
}

.imageWrapper.imageWrapper_zoom:hover:before,
.imageWrapper.imageWrapper_selectable:hover:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.397);
}

.imageWrapper.imageWrapper_zoom:hover:after {
  --icon-size: 24px;
  width: var(--icon-size);
  aspect-ratio: 1 / 1;
  top: calc(50% - var(--icon-size) / 2);
  left: calc(50% - var(--icon-size) / 2);
  background-color: var(--color-white);
  -webkit-mask-image: url("../app/files/images/svg/zoom.svg");
  mask-image: url("../app/files/images/svg/zoom.svg");
}

.imageWrapper.rounded>.image,
.imageWrapper.imageWrapper_zoom.rounded::before,
.imageWrapper.imageWrapper_selectable.rounded::before {
  border-radius: var(--stomplan-border-radius);
}

.imageWrapper.rounded-sm>.image,
.imageWrapper.imageWrapper_zoom.rounded-sm::before,
.imageWrapper.imageWrapper_selectable.rounded-sm::before {
  border-radius: var(--stomplan-border-radius-sm);
}

.imageWrapper.imageWrapper_fluid>.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

scalable-image.imageWrapper:hover {
  cursor: grab;
}

scalable-image.imageWrapper>.image {
  position: absolute;
}

scalable-image.imageWrapper>.slider {
  position: absolute;
  bottom: 14px;
  right: 10px;
  z-index: 1;
}

.imageWrapper.imageWrapper_fluid.imageWrapper_border>.image,
.imageWrapper.imageWrapper_fluid.imageWrapper_selected>.image {
  width: calc(100% + var(--stomplan-border-width) * 2);
}

.imageWrapper.imageWrapper_fluid>.image[src=""],
.imageWrapper.imageWrapper_fluid>.image:not([src]) {
  opacity: 0;
}

.image.image_border,
.imageWrapper.imageWrapper_border {
  border: var(--stomplan-border);
  border-color: var(--color-grey-200);
}

/* FIXME: .imageWrapper_selected некрасиво обрезает изображения по углам */

.image.image_selected,
.imageWrapper.imageWrapper_selected {
  border: var(--stomplan-border);
  border-color: var(--color-blue-500);
}

.imageWrapper.imageWrapper_fluid>.image.image_border,
.imageWrapper.imageWrapper_fluid>.image.image_selected {
  /* Для fluid изображений следует использовать .imageWrapper_border и .imageWrapper_selected */
  border: 0 !important;
}

.search {
  width: 100%;
  position: relative;
}

.search__content {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1px;
  border: 1px solid var(--color-grey-300);
  border-radius: 8px;
  max-height: 48px;
  position: relative;
  transition: all 0.4s;
}

.search__content:hover {
  border-color: var(--color-grey-500);
}

.search__content>input:focus {
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 4px var(--color-blue-200);
  transition: all 0.4s;
}

.search__content>input {
  border: none;
  padding: 12px 12px 12px 50px !important;
  max-height: 46px;
}

.search__icon {
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  position: absolute;
  left: 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' %3E%3Ccircle cx='11' cy='11' r='5' stroke='%2348566A' stroke-width='1.5' stroke-linecap='square' /%3E%3Cpath d='M15 15L19 19' stroke='%2348566A' stroke-width='1.5' stroke-linecap='square' /%3E%3C/svg%3E");
}

.search__reset {
  position: absolute;
  right: 12px;
  top: calc(50% - 14px);
}

.search__content>input:placeholder-shown + .search__reset {
  display: none;
}

.icon {
  background-color: var(--color-grey-700);
  mask-repeat: no-repeat;
  mask-size: cover;
  display: block;
}

.icon.icon_plus {
  aspect-ratio: 1 / 1;
  width: 20px;
  mask-image: url("../app/files/images/svg/plus.svg");
}

.icon.icon_minus {
  aspect-ratio: 9 / 1;
  width: 19px;
  mask-image: url("../app/files/images/svg/minus.svg");
}

.icon.icon_arrow {
  aspect-ratio: 8 / 14;
  width: 8px;
  mask-image: url("../app/files/images/svg/arrow-right.svg");
}

.icon.icon_arrow.icon_left {
  mask-image: url("../app/files/images/svg/arrow-left.svg");
}

.icon.icon_arrow.icon_up,
.icon.icon_arrow.icon_down {
  aspect-ratio: 14 / 8;
  width: 14px;
}

.icon.icon_arrow.icon_up {
  mask-image: url("../app/files/images/svg/arrow-up.svg");
}

.icon.icon_arrow.icon_down {
  mask-image: url("../app/files/images/svg/arrow-down.svg");
}

.icon.icon_zoom {
  aspect-ratio: 1 / 1;
  width: 24px;
  mask-image: url("../app/files/images/svg/zoom.svg");
  transform: rotate(90deg);
}

.icon.icon_zoom.icon_left,
.icon.icon_zoom.icon_plus {
  transform: unset;
}

.icon.icon_zoom.icon_plus {
  mask-image: url("../app/files/images/svg/zoom-in.svg");
}

.icon.icon_trash {
  aspect-ratio: 7 / 9;
  width: 18px;
  mask-image: url("../app/files/images/svg/instruments/delete.svg");
}

.icon.icon_chat {
  aspect-ratio: 1 / 1;
  width: 24px;
  mask-image: url("../app/files/images/svg/chat.svg");
}

.icon.icon_copy {
  aspect-ratio: 1 / 1;
  width: 24px;
  mask-image: url("../app/files/images/svg/copy.svg");
}

.icon.icon_edit {
  aspect-ratio: 1 / 1;
  width: 24px;
  mask-image: url("../app/files/images/svg/edit.svg");
}

.icon.icon_draggable {
  aspect-ratio: 17 / 5;
  width: 17px;
  mask-image: url("../app/files/images/svg/draggable.svg");
}

.icon.icon_flag {
  aspect-ratio: 1 / 1;
  width: 22px;
  mask-image: url("../app/files/images/svg/flag.svg");
}

.icon.icon_calendar {
  aspect-ratio: 1 / 1;
  width: 21.9px;
  mask-image: url("../app/files/images/svg/calendar.svg");
}

.icon.icon_close {
  aspect-ratio: 1 / 1;
  width: 22px;
  mask-image: url("../app/files/images/svg/close.svg");
}

.icon.icon_question {
  aspect-ratio: 3 / 5;
  width: 12px;
  mask-image: url("../app/files/images/svg/question_icon.svg");
}

.icon.icon_brush {
  aspect-ratio: 9 / 8;
  width: 24px;
  mask-image: url("../app/files/images/svg/instruments/brush.svg");
}

.icon.icon_move {
  aspect-ratio: 1 / 1;
  width: 24px;
  mask-image: url("../app/files/images/svg/instruments/move.svg");
}

.icon.icon_back {
  aspect-ratio: 16 / 15;
  width: 16px;
  mask-image: url("../app/files/images/svg/instruments/back.svg");
}

.icon.icon_forward {
  aspect-ratio: 16 / 15;
  width: 16px;
  mask-image: url("../app/files/images/svg/instruments/forward.svg");
}

.icon.icon_lineArrow {
  aspect-ratio: 1 / 1;
  width: 32px;
  mask-image: url("../app/files/images/svg/instruments/arrow.svg");
}

.icon.icon_circle {
  aspect-ratio: 1 / 1;
  width: 32px;
  mask-image: url("../app/files/images/svg/instruments/circle.svg");
}

.icon.icon_text {
  aspect-ratio: 18 / 11;
  width: 18px;
  mask-image: url("../app/files/images/svg/instruments/text.svg");
}

.icon.icon_crop {
  aspect-ratio: 1 / 1;
  width: 20px;
  mask-image: url("../app/files/images/svg/instruments/crop.svg");
}

.icon.icon_figures {
  aspect-ratio: 1 / 1;
  width: 18px;
  mask-image: url("../app/files/images/svg/instruments/figures.svg");
}

.icon.icon_square {
  aspect-ratio: 1 / 1;
  width: 32px;
  mask-image: url("../app/files/images/svg/instruments/square.svg");
}

.icon.icon_line {
  aspect-ratio: 1 / 1;
  width: 16px;
  mask-image: url("../app/files/images/svg/instruments/line.svg");
}

.icon.icon_grab {
  aspect-ratio: 1 / 1;
  width: 22px;
  mask-image: url("../app/files/images/svg/instruments/grab.svg");
}

.icon.icon_settings {
  aspect-ratio: 1 / 1;
  width: 27px;
  mask-image: url("../app/files/images/svg/settings.svg");
}

.icon.icon_center {
  aspect-ratio: 1 / 1;
  width: 22px;
  mask-image: url("../app/files/images/svg/instruments/center.svg");
}

.slider,
.slider__button {
  border-radius: 2px;
}

.slider {
  display: flex;
  flex-direction: column;
  background-color: #48566a33;
  padding: 2px;
}

.slider.slider_min {
  gap: 12px;
}

.slider__button {
  width: 24px;
  height: 24px;
  background-color: var(--color-white);
  box-shadow: 0 0 4px 4px rgba(1, 1, 1, 0.1), inset 0 -2px 4px 0 rgba(1, 1, 1, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.slider__button:hover:not(:disabled) {
  box-shadow: 0 0 4px 4px rgba(1, 1, 1, 0.2), inset 0 -2px 4px 0 rgba(1, 1, 1, 0.2);
}

.slider__button:disabled {
  opacity: 0.5;
}

.slider__button>.icon {
  background-color: var(--color-grey-800);
}

.slider__button>.icon.icon_plus {
  width: 14px;
}

.slider__button>.icon.icon_minus {
  width: 14.5px;
}

input[type="checkbox"].checkbox {
  --checkbox-size: 20px;
  min-width: var(--checkbox-size);
  min-height: var(--checkbox-size);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  appearance: none;
  border: var(--stomplan-border);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

input[type="checkbox"].checkbox::before {
  --icon-width: 12px;
  --icon-height: 10px;
  content: "";
  position: absolute;
  display: block;
  width: var(--icon-width);
  height: var(--icon-height);
  background-color: transparent;
  top: calc(50% - var(--icon-height)/2);
  left: calc(50% - var(--icon-width)/2);
  -webkit-mask: url("../app/files/images/svg/checkbox.svg");
  mask: url("../app/files/images/svg/checkbox.svg");
}

input[type="checkbox"].checkbox.checkbox_minus::before {
  --icon-width: 12px;
  --icon-height: 1px;
  -webkit-mask: url("../app/files/images/svg/minus.svg");
  mask: url("../app/files/images/svg/minus.svg");
}

input[type="checkbox"].checkbox:checked {
  background-color: var(--color-blue-500);
  border-color: var(--color-blue-500);
}

input[type="checkbox"].checkbox:checked::before {
  background-color: var(--color-white);
}

.checkboxWrapper>.button.button_circle {
  border: var(--stomplan-border);
  background-color: transparent;
}

.checkboxWrapper:hover>.checkboxWrapper__hiddenTarget+.button.button_circle,
.checkboxWrapper>.checkboxWrapper__hiddenTarget:checked+.button.button_circle {
  border-color: var(--color-grey-500);
  background-color: transparent;

}

.checkboxWrapper:hover>.checkboxWrapper__hiddenTarget+.button.button_circle.primary,
.checkboxWrapper>.checkboxWrapper__hiddenTarget:checked+.button.button_circle.primary {
  border-color: var(--color-blue-500);
}

.checkboxWrapper>.checkboxWrapper__hiddenTarget {
  display: none;
}

.checkboxWrapper>.checkboxWrapper__hiddenTarget:checked+.button.button_circle {
  background-color: var(--color-grey-500);
}

.checkboxWrapper>.checkboxWrapper__hiddenTarget:checked+.button.button_circle.primary {
  background-color: var(--color-blue-500);
}

.checkboxWrapper>.checkboxWrapper__hiddenTarget+.button.button_circle>.icon,
.checkboxWrapper>.checkboxWrapper__hiddenTarget+.button.button_circle>stp-icon {
  background-color: var(--color-grey-500);
}

.checkboxWrapper>.checkboxWrapper__hiddenTarget:checked+.button.button_circle>.icon,
.checkboxWrapper>.checkboxWrapper__hiddenTarget:checked+.button.button_circle>stp-icon {
  background-color: var(--color-white);
}

chips-element {
  --chips-checked-outline: var(--chips-checked-outline-width, 2px) solid var(--chips-checked-outline-color, var(--color-grey-900));
  outline: var(--chips-outline-width, 1px) solid var(--chips-outline-color, var(--color-grey-300));
  padding: 6px;
  border-radius: var(--chips-border-radius, 6px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--chips-color, var(--color-grey-700));
  line-height: 1;
  cursor: pointer;
  background-color: var(--chips-background-color, var(--color-white));
  user-select: none;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) background-color;
}

chips-element:hover {
  background-color: var(--chips-hover-background-color, var(--color-grey-100));
}

chips-element[checked]:not([checked="false"]) {
  outline: var(--chips-checked-outline);
}

chips-element[color="danger"] {
  color: var(--color-cherry-500);
  background-color: var(--color-cherry-100);
  outline-color: var(--color-cherry-200);
}

chips-element[color="danger"][checked]:not([checked="false"]) {
  outline-color: var(--color-cherry-500);
}

chips-element[color="danger"]:hover {
  background-color: var(--color-cherry-200);
}

chips-element[color="muted"] {
  color: var(--color-grey-500);
  background-color: var(--color-grey-200);
  outline-color: var(--color-grey-300);
}

chips-element[color="muted"]:hover {
  background-color: var(--color-grey-300);
}

chips-element[color="muted"][checked]:not([checked="false"]) {
  outline-color: var(--color-grey-500);
}

chips-group {
  display: flex;
  border-radius: 6px;
}

chips-group>chips-element {
  --chips-outline-color: 0;
  --chips-checked-outline-color: 0;
  border: var(--stomplan-border);
}

chips-group>chips-element[checked] {
  color: var(--color-blue-500);
  background-color: var(--color-blue-100);
  border-color: var(--color-blue-100);
}

chips-group>chips-element[checked]:hover {
  background-color: var(--color-blue-200);
}

chips-group>chips-element[checked]:not(:last-child) {
  border-right: 0;
}

chips-group>chips-element[checked]+chips-element {
  border-left: var(--stomplan-border);
}

chips-group>chips-element:not(:first-child) {
  border-left: 0;
}

chips-group>chips-element:not(:first-child, :last-child) {
  border-radius: 0;
}

chips-group>chips-element:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

chips-group>chips-element:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.pill {
  line-height: 1;
  font-size: 14px;
  padding: 4px 6px;
  text-align: center;
  border-radius: 1rem;
  color: var(--color-grey-500);
  background-color: var(--color-grey-100);
}

.pill.pill_danger {
  background-color: var(--color-cherry-50);
  color: var(--color-cherry-500);
}

.select-image-modal,
.select-doctor-modal {
    position: relative;
    background-color: #fff;
    border-radius: 24px;
    max-height: 900px;
    display: grid;
    grid-template-rows: 48px auto 48px;
    gap: 40px;
    justify-content: center;
    z-index: 1890;
}

.select-image-modal-body,
.select-doctor-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.select-image-modal-selector {
    width: 100%;
    height: 48px;
    display: grid;
    grid-template-columns: auto 230px 240px;
    gap: 20px;
    align-items: center;
}

.select-image-modal-space {
    display: grid;
    grid-template-columns: 200px 200px 200px 200px;
    row-gap: 24px;
    justify-content: space-between;
}

.select-image-modal-frame {
    width: 912px;
    height: 300px;
    border: solid 1px var(--color-grey-200);
    border-radius: 10px;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

.select-image-modal-nothing,
.select-doctor-modal-nothing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border: solid 1px var(--color-grey-300);
    border-radius: 10px;
}

.select-image-modal-search-label,
.select-doctor-modal-search-label {
    width: 100%;
    display: flex;
    position: relative;
}

.select-image-modal-search,
.select-doctor-modal-search {
    border: none;
    padding: 12px 12px 12px 50px !important;
    max-height: none;
    height: 48px;
}

.select-image-modal-directory,
.select-image-modal-sort,
.select-doctor-modal-sort {
    padding: 12px !important;
    width: 100%;
}

.select-image-modal-image {
    cursor: pointer;
    padding: var(--stp-space-4);
}

.select-image-modal-image:hover {
    opacity: 0.9;
    border-color: var(--color-blue-300);
    background-color: var(--color-blue-50);
}

.select-image-modal-image.selected {
    border-color: var(--color-blue-500);
    background-color: var(--color-blue-100);
}

.select-image-modal-image.selected::after {
    content: "Выбрано";
    position: absolute;
    right: -1px;
    bottom: -1px;
    background: var(--color-blue-500);
    border-radius: 12px 0;
    color: white;
    font-size: 12px;
    padding: 0 8px 2px 8px;
}

.select-image-modal-image-img {
    object-fit: cover;
    width: 100%;
    height: 120px;
    border-radius: 8px;
    margin-bottom: 4px;
}

.select-doctor-modal-space {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.select-image-modal-addImage {
    cursor: pointer;
    background-color: var(--color-grey-300)!important;
    display: flex!important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.select-image-modal-addImage:hover {
    background-color: var(--color-grey-200);
    opacity: 0.9;
    border-color: var(--color-blue-300);
}

.select-image-modal-addImage > .select-image-modal-image-name {
    text-align: center;
}

.select-doctor-modal-doctor {
    height: 60px;
    border: solid 1px var(--color-grey-300);
    border-radius: 12px;
    overflow: hidden;
    padding: 4px;
    cursor: pointer;
    position: relative;
    display: grid;
    grid-template-areas: "A B" "A C";
    grid-template-columns: 52px auto;
    column-gap: 30px;
}

.select-doctor-modal-doctor:hover {
    opacity: 0.9;
    border-color: var(--color-blue-300);
    background-color: var(--color-blue-50);
}

.select-doctor-modal-doctor.selected {
    border-color: var(--color-blue-500);
    background-color: var(--color-blue-100);
}

.select-doctor-modal-doctor.selected::after {
    content: "Выбрано";
    position: absolute;
    right: -1px;
    bottom: -1px;
    background: var(--color-blue-500);
    border-radius: 12px 0;
    color: white;
    font-size: 12px;
    padding: 0 8px 2px 8px;
}

.select-doctor-modal-doctor-img {
    object-fit: cover;
    width: 52px;
    height: 52px;
    border-radius: 26px;
}

.select-doctor-modal-doctor-name {
    margin: 0 !important;
}

.select-doctor-modal-frame {
    width: 912px;
    max-height: 500px;
    min-height: 300px;
    border: solid 1px var(--color-grey-200);
    border-radius: 10px;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-button {
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
html {
    --stp-color-gray-50: #f8fafc;
    --stp-color-gray-100: #f1f5f9;
    --stp-color-gray-200: #e1e7ef;
    --stp-color-gray-300: #cbd5e1;
    --stp-color-gray-400: #94a3b8;
    --stp-color-gray-500: #65758b;
    --stp-color-gray-600: #48566a;
    --stp-color-gray-700: #344256;
    --stp-color-gray-800: #1d283a;
    --stp-color-gray-900: #0f1729;

    --stp-color-blue-50: #f0f6ff;
    --stp-color-blue-100: #d3e0fb;
    --stp-color-blue-200: #a7c0f7;
    --stp-color-blue-300: #7ba1f3;
    --stp-color-blue-400: #5082ef;
    --stp-color-blue-500: #2463eb;
    --stp-color-blue-600: #1d4fbc;
    --stp-color-blue-700: #153b8d;
    --stp-color-blue-800: #0e275e;
    --stp-color-blue-900: #07142f;

    --stp-color-red-50: #fef1f1;
    --stp-color-red-100: #fee1e1;
    --stp-color-red-200: #fec8c8;
    --stp-color-red-300: #fca6a6;
    --stp-color-red-400: #f87272;
    --stp-color-red-500: #ef4343;
    --stp-color-red-600: #dc2828;
    --stp-color-red-700: #ba1c1c;
    --stp-color-red-800: #ba1c1c;
    --stp-color-red-900: #300d0d;

    --stp-color-yellow-50: #fefce8;
    --stp-color-yellow-100: #fef9c3;
    --stp-color-yellow-200: #fef08a;
    --stp-color-yellow-300: #fde047;
    --stp-color-yellow-400: #facc15;
    --stp-color-yellow-500: #eab308;
    --stp-color-yellow-600: #ca8a04;
    --stp-color-yellow-700: #a16207;
    --stp-color-yellow-800: #854d0e;
    --stp-color-yellow-900: #713f12;
    --stp-color-yellow-950: #422006;

    --stp-color-white: white;
    --stp-color-black: black;

    --stp-space-1: 2px;
    --stp-space-2: 4px;
    --stp-space-3: 6px;
    --stp-space-4: 8px;
    --stp-space-5: 12px;
    --stp-space-6: 16px;
    --stp-space-7: 24px;
    --stp-space-8: 32px;
    --stp-space-9: 48px;
    --stp-space-10: 64px;
    --stp-space-11: 96px;
    --stp-space-12: 160px;

    /* Основной контент */
    --stp-z-index-content-min: 1;
    --stp-z-index-content-1: 1;
    --stp-z-index-content-2: 2;
    --stp-z-index-content-3: 3;
    --stp-z-index-content-4: 4;
    --stp-z-index-content-5: 5;
    --stp-z-index-content-max: 489;
    /* Обертка для страниц в режиме окна */
    --stp-z-index-windowed-content-wrap: 500;
    /* Страницы открытые в режиме окна */
    --stp-z-index-windowed-content-min: 501;
    --stp-z-index-windowed-content-1: 501;
    --stp-z-index-windowed-content-2: 502;
    --stp-z-index-windowed-content-3: 503;
    --stp-z-index-windowed-content-4: 504;
    --stp-z-index-windowed-content-5: 505;
    --stp-z-index-windowed-content-max: 600;
    /* Главное меню */
    --stp-z-index-main-menu-min: 601;
    --stp-z-index-main-menu-1: 601;
    --stp-z-index-main-menu-2: 602;
    --stp-z-index-main-menu-3: 603;
    --stp-z-index-main-menu-4: 604;
    --stp-z-index-main-menu-5: 605;
    --stp-z-index-main-menu-6: 606;
    --stp-z-index-main-menu-7: 607;
    --stp-z-index-main-menu-8: 608;
    --stp-z-index-main-menu-9: 609;
    --stp-z-index-main-menu-max: 700;
    /* Модальные окна */
    --stp-z-index-modal-min: 1000;
    --stp-z-index-modal-overlay: 1000;
    --stp-z-index-modal-max: 1900;
    /* Индикация загрузки файлов */
    --stp-z-index-reading: 1901;
    /* Всплывающие подсказки */
    --stp-z-index-popup: 1902;
    /* Системные диалоговые окна */
    --stp-z-index-confirmation: 2000;
    /* Экраны загрузки */
    --stp-z-index-loading: 10000;

    --stp-box-shadow-glow: 0 0 0 4px #3c83f64d;
    --stp-box-shadow-200: 0 1px 4px 0 #0c0c0d0d;
    --stp-box-shadow-popup: -2px 0px 8px 0px #0000001a;

    --stp-content-max-width: 2560px;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--stp-color-gray-200);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background-color: var(--stp-color-gray-300);
    border-radius: 4px;
    border: 0;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--stp-color-gray-500);
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-BoldItalic-BZ25GMaH.woff2") format("woff2");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-MediumItalic-YxU2FLh9.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-ThinItalicBETA-CSNw4Px2.woff2") format("woff2");
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-Regular-6EfshmZx.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-Black-PCIGMC9y.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-BlackItalic-C__mpYx1.woff2") format("woff2");
    font-weight: 900;
    font-style: italic;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-LightBETA-DpNixdPo.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-SemiBold-ClSOndc6.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-ExtraBoldItalic-D1JMiWfe.woff2") format("woff2");
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-Bold-CQHYVgG_.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-ExtraLightItalicBETA-BcNczogP.woff2") format("woff2");
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-ExtraLightBETA-dSzjrJSk.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-ExtraBold-Da5QcHRB.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-ThinBETA-De7PdzHo.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-LightItalicBETA-VxBas_3R.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-Italic-B-9-4fJy.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-SemiBoldItalic-C1C-HVnm.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: "Inter";
    src: url("./Inter-Medium-D5YUpoRx.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}
html {
    --stp-font-family: "Inter";
    --stp-font-body: 400 16px/24px var(--stp-font-family);
    --stp-font-body-medium: 600 16px/24px var(--stp-font-family);
    --stp-font-h-1: 600 40px/48px var(--stp-font-family);
    --stp-font-h-2: 600 32px/40px var(--stp-font-family);
    --stp-font-h-3: 600 24px/32px var(--stp-font-family);
    --stp-font-h-4: 600 20px/28px var(--stp-font-family);
    --stp-font-h-5: 500 18px/24px var(--stp-font-family);
    --stp-font-button: 400 18px/22px var(--stp-font-family);
    --stp-font-caption: 400 14px/18px var(--stp-font-family);
    --stp-font-caption-medium: 500 14px/18px var(--stp-font-family);
    --stp-font-caption-paragraph: 400 14px/22px var(--stp-font-family);
    --stp-font-footnote: 400 12px/12px var(--stp-font-family);
    --stp-font-footnote-paragraph: 400 12px/16px var(--stp-font-family);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}
h1 {
    font: var(--stp-font-h-1);
}
h2 {
    font: var(--stp-font-h-2);
}
h3 {
    font: var(--stp-font-h-3);
}
h4 {
    font: var(--stp-font-h-4);
}
h5 {
    font: var(--stp-font-h-5);
}
p,
label,
legend {
    font: var(--stp-font-body);
}