@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Spline+Sans:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Math&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Spline+Sans:wght@300..700&display=swap');

:root {
    --blue-50: #F1EFFF;
    --blue-100: #D3CDFF;
    --blue-200: #BEB4FF;
    --blue-300: #A192FF;
    --blue-400: #8E7DFF;
    --blue-500: #725DFF;
    --blue-600: #6855E8;
    --blue-700: #5142B5;
    --blue-800: #3F338C;
    --blue-900: #30276B;
    --black-0: #FFFFFF;
    --black-50: #F8F9FA;
    --black-100: #F1F3F4;
    --black-200: #E8EAED;
    --black-300: #DADCE0;
    --black-400: #BDC1C6;
    --black-500: #9AA0A6;
    --black-600: #80868B;
    --black-700: #5F6368;
    --black-800: #3C4043;
    --black-846: #2E3134;
    --black-900: #202124;
    --black-958: #0E1013;
    --yellow-50: #FFFAE6;
    --yellow-100: #FFEFB0;
    --yellow-400: #FFCC00;
    --yellow-500: #FFCC00;
    --yellow-600: #E8BA00;
    --yellow-700: #B59100;
    --green-50: #EBF9EE;
    --green-100: #C0EECC;
    --green-400: #5DD27A;
    --green-500: #34C759;
    --green-600: #2FB551;
    --red-50: #FFEBEA;
    --red-100: #FFC2BF;
    --red-400: #FF6259;
    --red-500: #FF3B30;
    --red-600: #E8362C;

    --accent-rgb: 114, 93, 255;


    --transparent-color: var(--primary-text-color) 00;
    --transparent-black: #24242412;
    --transparent-black-06: #24242406;


    --blue-500-filter: invert(50%) sepia(87%) saturate(5062%) hue-rotate(232deg) brightness(101%) contrast(103%);
    --blue-700-filter: invert(27%) sepia(21%) saturate(5209%) hue-rotate(230deg) brightness(91%) contrast(94%);
    --black-0-filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(132deg) brightness(113%) contrast(107%);
    --black-200-filter: invert(100%) sepia(2%) saturate(7178%) hue-rotate(175deg) brightness(90%) contrast(108%);
    --black-300-filter: invert(87%) sepia(12%) saturate(62%) hue-rotate(182deg) brightness(102%) contrast(88%);
    --black-400-filter: invert(59%) sepia(14%) saturate(0%) hue-rotate(37deg) brightness(89%) contrast(93%);
    --black-500-filter: invert(81%) sepia(2%) saturate(1143%) hue-rotate(169deg) brightness(81%) contrast(76%);
    --black-600-filter: invert(60%) sepia(1%) saturate(7409%) hue-rotate(190deg) brightness(88%) contrast(40%);
    --black-846-filter: invert(16%) sepia(1%) saturate(3450%) hue-rotate(174deg) brightness(93%) contrast(89%);
    --black-958-filter: invert(7%) sepia(1%) saturate(7494%) hue-rotate(210deg) brightness(101%) contrast(102%);
    --yellow-100-filter: invert(97%) sepia(8%) saturate(1781%) hue-rotate(330deg) brightness(101%) contrast(103%);
    --yellow-500-filter: invert(64%) sepia(88%) saturate(930%) hue-rotate(4deg) brightness(111%) contrast(102%);
    --yellow-600-filter: invert(65%) sepia(11%) saturate(6150%) hue-rotate(14deg) brightness(108%) contrast(103%);
    --yellow-700-filter: invert(51%) sepia(93%) saturate(1039%) hue-rotate(20deg) brightness(90%) contrast(108%);
    --red-100-filter: invert(94%) sepia(8%) saturate(4661%) hue-rotate(297deg) brightness(127%) contrast(101%);
    --red-500-filter: invert(59%) sepia(84%) saturate(6059%) hue-rotate(339deg) brightness(97%) contrast(109%);
    --red-600-filter: invert(40%) sepia(97%) saturate(4549%) hue-rotate(344deg) brightness(92%) contrast(97%);
    --red-700-filter: invert(22%) sepia(24%) saturate(5602%) hue-rotate(342deg) brightness(103%) contrast(97%);
    --green-100-filter: invert(99%) sepia(45%) saturate(803%) hue-rotate(58deg) brightness(100%) contrast(86%);
    --green-500-filter: invert(66%) sepia(76%) saturate(457%) hue-rotate(79deg) brightness(85%) contrast(88%);
    --green-600-filter: invert(70%) sepia(43%) saturate(3088%) hue-rotate(83deg) brightness(90%) contrast(67%);
    --green-700-filter: invert(48%) sepia(38%) saturate(940%) hue-rotate(83deg) brightness(83%) contrast(81%);

    --primary-border-radius: 24px;
    --secondary-border-radius: 16px;

    --math-basement: 12px;
    --math-double-basement: 10px;


    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    color: var(--primary-text-color);
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

svg {
    width: 100%;
    height: auto;
}

article {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.not-clickable {
    pointer-events: none;
}

button p {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    color: var(--primary-text-color);
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

article .link-word {
    color: var(--accent-color) !important;
}

button {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    color: var(--primary-text-color);
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

input {
    color: var(--primary-text-color);
    background: var(--input-color);
    border: none;
    caret-color: var(--primary-text-color);
}

textarea, select {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    color: var(--primary-text-color);
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

textarea {
    background: var(--input-color);
    color: var(--primary-text-color);
    border: none;
    caret-color: var(--primary-text-color);
}

.background-shadow {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: var(--black-846);
    opacity: 0;
    transition: all 0.3s;
}

.background-shadow.visible {
    opacity: 0.1;
    z-index: 999;
}

.transition-10 {
    transition: all 1s;
}

.transition-5 {
    transition: all 0.5s;
}

.transition-3 {
    transition: all 0.5s;
}

body {
    min-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: start;
    margin: 0;

    overflow-x: hidden;

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


a {
    text-decoration: none;
}

.phone-only-gap {
    height: 0;
    min-height: 0;
    max-height: 0;
}

.text-link {
    text-decoration: none;
    color: var(--accent-color);
    transition: all 0.3s;
}

.text-link:hover {
    text-decoration: none;
    color: var(--accent-hover-color);
}

img.icon {
    filter: var(--primary-text-filter);
}


.app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;

    min-height: calc(100vh - 48px);

    width: calc(66vw - 48px);
    max-width: calc(100vw - 48px);
    min-width: calc(1440px - 48px);

    overflow-x: hidden;


    padding: 24px;
    gap: 24px;
}

.horizontal-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.vertical-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.horizontal-divider {
    width: 100%;
    height: 1px;
    background: var(--black-200);
}

.match-width {
    width: 100%;
}

.match-height {
    height: 100%;
}

.disclaimer {
    margin: 0;
    font-size: 12px !important;
    color: var(--secondary-text-color);
}

.source-disclaimer {
    margin: 0;
    font-size: 12px !important;
    color: var(--secondary-text-color);
    text-decoration: none;
    margin-left: auto;
}

.fit-height {
    height: fit-content !important;
}

.fit-width {
    width: fit-content !important;
    max-width: none !important;
}

.text-base {
    font-size: 16px;
    font-weight: 400;
}

.gap-50 {
    gap: 50px !important;
}


.gap-32 {
    gap: 32px !important;
}

.gap-24 {
    gap: 24px !important;
}


.gap-16 {
    gap: 16px !important;
}

.gap-12 {
    gap: 12px !important;
}

.gap-10 {
    gap: 10px !important;
}

.gap-8 {
    gap: 8px !important;
}

.gap-4 {
    gap: 4px !important;
}

.gap-0 {
    gap: 0 !important;
}

.match-parent {
    width: 100%;
    height: 100%;
}

.max-width {
    width: 100%;
}

.max-height {
    height: 100%;
}

.container {
    display: flex;
    flex-direction: row;

    gap: 24px;
    width: 100%;
    height: 100%;

    background: transparent;
}

.container-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    height: 100%;
    align-items: start;
}

.item-shadow {
    box-shadow: 0 0 4px #0E101312;
    transition: all 0.5s;
}

.align-end {
    align-items: end !important;
}

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

.align-center {
    align-items: center !important;
}


.gravity-right {
    margin-left: auto !important;
}

.gravity-left {
    margin-right: auto !important;
}

.gravity-bottom {
    margin-top: auto !important;
}

.gravity-top {
    margin-bottom: auto !important;
}

.hidden {
    visibility: hidden;
}

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

ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style-type: none; /* Убираем маркеры списка */
    padding: 0;
    margin: 0;
    padding-top: 8px;
}


li {
    display: flex;
    align-items: center;
    width: 100%;
}

.text {
    margin-right: 10px; /* Отступ между текстом и точками */
}

.dots {
    flex: 1;
    border-bottom: 1px dotted var(--secondary-text-color); /* Пунктирная линия */
}


table {
    background: var(--background-color);
    border-collapse: separate;
    border-spacing: 0;
    border: solid var(--secondary-text-color) 1px;
    color: var(--primary-text-color);
    border-radius: 4px;
    margin: 16px 0;
}

td, th {
    border: none;
    text-align: start;
    padding: 8px;
    border-right: solid var(--secondary-text-color) 1px;
    border-bottom: solid var(--secondary-text-color) 1px;
    color: var(--primary-text-color);
}

/* Удаляем верхнюю границу для верхних ячеек */
tr:first-child td, tr:first-child th {
    border-top: none;
}

/* Удаляем нижнюю границу для нижних ячеек */
tr:last-child td, tr:last-child th {
    border-bottom: none;
}

/* Удаляем левую границу для левых ячеек */
td:first-child, th:first-child {
    border-left: none;
}

/* Удаляем правую границу для правых ячеек */
td:last-child, th:last-child {
    border-right: none;
}

#drawingCanvas {
    cursor: url("/resources/icons/ic_pencil_24x24.svg") 8 20, auto;
}

.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    width: 16px;
    max-width: 16px;
    max-height: 16px;
    min-width: 16px;
    min-height: 16px;
    padding: 2px;
    border: 1px solid var(--input-border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.5s;
}

.checkbox-container:hover {
    border: 1px solid var(--accent-color);
}

.checkbox-container .checkbox-fill {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: transparent;
}

.checkbox-container.selected .checkbox-fill {
    background: var(--accent-color);
}

.margin-top-16 {
    margin-top: 16px;
}

.h1-like {
    font-size: 32px;
    font-weight: 700;

}

.h2-like {
    font-size: 24px;
    font-weight: 700;
}

.adaptive-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.content-vertical-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px;
    max-width: max(calc(66vw - 48px - 270px - 24px), calc(1440px - 48px - 270px - 24px));
}

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

.max-width-100 {
    max-width: 100px;
}

.max-width-200 {
    max-width: 200px;
}

.max-width-400 {
    max-width: 400px;
}

.max-width-600 {
    max-width: 600px;
}

.max-width-20-percent {
    max-width: 20%;
}

.max-width-40-percent {
    max-width: 40%;
}

.max-width-50-percent {
    max-width: 50%;
}