@elcrm/form 0.0.62 → 0.0.64

package/src/lib/styles/Form.module.scss

@@ -0,0 +1,313 @@
+.o {
+    position: fixed;
+    z-index: 98;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #0000;
+}
+
+/* Всплывающее окно календаря/селекта: высота по контенту, без обрезки сетки */
+.c {
+    box-shadow: 5px 7px 18px 0px #000000a8;
+    padding: 10px 12px 12px;
+    margin: 0;
+    display: block;
+    position: absolute;
+    background: var(--select-background);
+    z-index: 99;
+    border-radius: 10px;
+    max-height: min(92vh, 480px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    color: #fff;
+    box-sizing: border-box;
+    min-width: 259px;
+    & [grid-calendar] {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 2px;
+        /* Одинаковая высота всех строк (подписи + ряды чисел) */
+        grid-auto-rows: 34px;
+    }
+    /* Подписи дней недели — первая строка сетки */
+    & [grid-calendar] > p {
+        font-size: 0.75rem;
+        font-weight: 500;
+        line-height: 1;
+        color: var(--color-placeholder);
+        padding: 0;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+    }
+    & [grid-month] {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        width: 250px;
+    }
+    & b {
+        font-weight: normal;
+        display: block;
+        padding: 8px 5px;
+        border-radius: 5px;
+        cursor: pointer;
+        text-align: center;
+        &._active {
+            background: var(--bg-select-active);
+        }
+    }
+    & b:hover {
+        background: var(--bg-select-hover);
+    }
+
+    & p {
+        color: var(--color-placeholder);
+        text-align: center;
+        padding: 0;
+        cursor: default;
+        pointer-events: none;
+    }
+
+    & i {
+        flex: 0 30px;
+        padding: 9px;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 5px;
+    }
+    & i:hover {
+        background: var(--bg-select-hover);
+    }
+    & i::before {
+        cursor: pointer;
+        display: block;
+    }
+    & s {
+        display: flex;
+        font-style: normal;
+        text-decoration: none;
+        padding-bottom: 6px;
+        align-items: center;
+        gap: 4px;
+    }
+    & s h2 {
+        flex: 1 1 auto;
+        min-width: 0;
+        padding: 0;
+        margin: 0;
+        font-size: 16px;
+        text-align: center;
+        font-weight: normal;
+        line-height: 1.25;
+        color: #fff;
+        cursor: default;
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+    }
+    /* заголовок календаря: клик по месяцу / году открывает выбор */
+    & .dateHeaderMonth,
+    & .dateHeaderYear {
+        cursor: pointer;
+        border-radius: 6px;
+        padding: 2px 8px;
+        user-select: none;
+        white-space: nowrap;
+    }
+    & .dateHeaderMonth:hover,
+    & .dateHeaderYear:hover {
+        background: var(--bg-select-hover);
+    }
+    & .dateHeaderDisabled {
+        cursor: not-allowed;
+        opacity: 0.45;
+        pointer-events: none;
+    }
+    & .dateHeaderDisabled[data-active="true"],
+    & .dateHeaderDisabled[data-current="true"] {
+        opacity: 0.45;
+    }
+
+    /* Выбранное значение поля (data-current) и «сегодня» (data-active) */
+    & [grid-calendar] b[data-current="true"],
+    & [grid-month] b[data-current="true"] {
+        background: color-mix(
+            in srgb,
+            var(--field-background-active) 52%,
+            transparent
+        );
+        font-weight: 600;
+    }
+    & [grid-calendar] b[data-active="true"]:not([data-current="true"]),
+    & [grid-month] b[data-active="true"]:not([data-current="true"]) {
+        outline: 2px solid var(--field-background-active);
+        outline-offset: -2px;
+    }
+    & [grid-calendar] b[data-active="true"][data-current="true"],
+    & [grid-month] b[data-active="true"][data-current="true"] {
+        box-shadow: inset 0 0 0 2px var(--field-background-active);
+    }
+    & [grid-calendar] p[data-current="true"] {
+        background: color-mix(
+            in srgb,
+            var(--field-background-active) 52%,
+            transparent
+        );
+        font-weight: 600;
+        color: inherit;
+        border-radius: 5px;
+    }
+    & [grid-calendar] p[data-active="true"]:not([data-current="true"]) {
+        outline: 2px solid var(--field-background-active);
+        outline-offset: -2px;
+        opacity: 0.85;
+    }
+    & [grid-calendar] p[data-active="true"][data-current="true"] {
+        box-shadow: inset 0 0 0 2px var(--field-background-active);
+    }
+
+    & span {
+        padding: 2px;
+        text-align: center;
+        & p {
+            padding: 8px 5px;
+            color: var(--color-placeholder);
+        }
+    }
+    /* Ячейки дат: без лишнего padding у span — иначе первая строка «выше» остальных */
+    & [grid-calendar] > span {
+        padding: 0;
+        display: flex;
+        align-items: stretch;
+        justify-content: stretch;
+        min-height: 0;
+        box-sizing: border-box;
+    }
+    & [grid-calendar] > span > b,
+    & [grid-calendar] > span > p {
+        flex: 1 1 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-height: 0;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        border-radius: 5px;
+    }
+    & .as {
+        cursor: ns-resize;
+    }
+    & .ap {
+        cursor: pointer;
+    }
+}
+
+[field="password"] dd {
+    white-space: nowrap;
+    font-style: unset;
+    -webkit-text-security: disc;
+    user-select: none;
+    -webkit-user-select: text;
+}
+
+[field="password"][show] dd {
+    -webkit-text-security: none;
+}
+
+[field="password"] dd::before {
+    -webkit-text-security: none;
+}
+
+[field="code"] div {
+    display: flex;
+    gap: 8px;
+}
+
+[field="select"] dd {
+    cursor: pointer;
+}
+
+[field] dd::before {
+    pointer-events: none;
+}
+
+[field="check"] {
+    & dd {
+        max-width: 35px;
+        padding: 0;
+        cursor: pointer;
+    }
+    & [active]::after {
+        content: "";
+        background: #394264;
+        width: 15px;
+        height: 15px;
+        display: block;
+        border-radius: 5px;
+    }
+}
+
+[field="file"] {
+    & input {
+        display: none;
+    }
+    & dd {
+        aspect-ratio: 16 / 9;
+        position: relative;
+        cursor: pointer;
+    }
+    & img {
+        aspect-ratio: 16 / 9;
+        display: block;
+        width: -webkit-fill-available;
+        object-fit: contain;
+        cursor: pointer;
+    }
+    & label {
+        aspect-ratio: 16 / 9;
+        display: block;
+        width: -webkit-fill-available;
+        object-fit: contain;
+        position: absolute;
+        cursor: pointer;
+    }
+}
+
+[field="color"] {
+    & dd {
+        display: flex;
+        border: 0;
+        padding: 0;
+        gap: 3px;
+        & s {
+            border: 1px solid #dde2e4;
+            border-radius: 6px;
+            flex: 1;
+            cursor: pointer;
+            opacity: 0.6;
+            &:hover {
+                opacity: 0.9;
+            }
+            &[active="true"] {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+// p: #abb6d2
+
+// background: #394264
+
+// --bg-select-active: #0000007;
+// --bg-select: #394264;
+// --bg-select-hover: #0000007;
+// --color-placeholder: #abb6d2;

package/src/lib/styles/Select.module.scss

@@ -0,0 +1,90 @@
+:root {
+    --select-overlay: #0000;
+    --select-height: 52px;
+    --select-separator: 1px solid #40434c;
+    --select-color: #e8e8eb;
+    --select-background: #26282e;
+    --select-icon: calc(--select-height / 1.5);
+    --select-icon-padding: calc((--select-height - --select-icon) / 2);
+    --select-font-size: 13px;
+}
+
+// overlay
+.o {
+    position: fixed;
+    z-index: 98;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--select-overlay);
+}
+// list
+.l {
+    padding: 0;
+    margin: 0;
+    display: block;
+    position: fixed;
+    background: var(--select-background);
+    z-index: 99;
+    border-radius: 20px;
+    overflow: scroll;
+    max-height: 300px;
+    &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+}
+.l ul {
+    overflow-y: auto;
+    width: 100%;
+    max-height: 300px;
+    display: block;
+    overflow-x: hidden;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.l li {
+    display: block;
+    border-bottom: var(--select-separator);
+    cursor: pointer;
+    display: block;
+    margin: 0;
+    padding: 0 14px;
+    color: var(--select-color);
+    border-left: 0 !important;
+    text-align: left !important;
+    height: var(--select-height);
+    line-height: var(--select-height);
+    font-size: var(--select-font-size);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 1;
+}
+.l li:hover {
+    background: #2f323a;
+}
+.l li[data-focus="true"] {
+    background: #2f323a;
+}
+.l li:last-child {
+    border-bottom: 0;
+}
+
+.i {
+    position: absolute;
+    width: var(--select-icon);
+    height: var(--select-icon);
+    color: var(--field-color);
+    right: var(--select-icon-padding);
+    top: var(--select-icon-padding);
+}
+
+.f {
+    cursor: pointer;
+    &[aria-disabled="true"] {
+        cursor: not-allowed;
+    }
+}

package/src/lib/styles/dark.css

@@ -0,0 +1,47 @@
+/* Токены полей — см. light.css в этой же папке */
+[data-theme="dark"] {
+    --control-height: 44px;
+    --control-radius: 22px;
+    --control-side-padding: 14px;
+    --control-inner-padding: 5px 15px;
+    --control-font-size: 14px;
+
+    --field-height: var(--control-height);
+    --field-width: 100%;
+    --field-padding: 8px 12px;
+    --field-border: 1px solid #2f3139;
+    --field-border-hover: 1px solid #434653;
+    --field-border-focus: 1px solid #6f8eff;
+    --field-focus-ring: #6f8eff30;
+    --field-radius: var(--control-radius);
+    --field-background: #26282e;
+    --field-background-focus: #2a3142;
+    --field-background-disabled: #212329;
+    --field-border-disabled: 1px solid #343843;
+    --field-color-disabled: #777e8a;
+    --field-color: #e8e8eb;
+    --field-placeholder: #8f949e;
+    --field-label-color: #b8bcc6;
+    --field-label-size: 14px;
+    --field-error-border: 1px solid #9e3d46;
+    --field-error-background: #2d2024;
+    --field-error-color: #ffb3bd;
+    --field-background-active: #3e7bff;
+    --field-check-box-border: 1px solid #4b4f58;
+    --field-icon-color: #c8ccd4;
+    --field-icon-gap: 10px;
+    --field-side-padding: var(--control-side-padding);
+    --field-inner-padding: var(--control-inner-padding);
+    --field-block-gap: 0;
+    --field-note-height: 100px;
+    --field-note-line-height: 1.5;
+    --field-note-padding: 8px;
+    --field-note-padding-top: 8px;
+
+    --field-selection-bg: #3d4f6b;
+    --field-selection-color: #e8e8eb;
+
+    --field-range-fill: #00c4bc;
+    --field-range-track: #3a3d4a;
+    --field-range-bar-height: 14px;
+}

package/src/lib/styles/light.css

@@ -0,0 +1,51 @@
+/*
+  Токены: --control-* (размеры), --field-* (контейнер), --field-selection-* (выделение текста)
+*/
+[data-theme="light"] {
+    --control-height: 44px;
+    --control-radius: 18px;
+    --control-side-padding: 14px;
+    --control-inner-padding: 0px 15px;
+    --control-font-size: 14px;
+
+    --field-height: var(--control-height);
+    --field-width: 100%;
+    --field-padding: 8px 12px;
+    --field-border: 0px solid #d7d9de;
+    --field-border-hover: 0px solid #c7cad2;
+    --field-border-focus: 0px solid #8fa2ff;
+    --field-focus-ring: #8fa2ff2e;
+    --field-radius: var(--control-radius);
+    --field-background: #fff;
+    /* фон при фокусе (вместе с --field-border-focus / --field-focus-ring) */
+    --field-background-focus: #eaeeff;
+    --field-background-disabled: #f4f5f7;
+    --field-border-disabled: 1px solid #dadddf;
+    --field-color-disabled: #9ea4ad;
+    --field-color: #333;
+    --field-placeholder: #999;
+    --field-label-color: #666;
+    --field-label-size: 14px;
+    --field-error-border: #e74c3c;
+    --field-error-background: #fee;
+    --field-error-color: #c0392b;
+    --field-background-active: #3498db;
+    --field-check-box-border: 2px solid #3498db;
+    --field-icon-color: #8a909b;
+    --field-icon-gap: 10px;
+    --field-side-padding: var(--control-side-padding);
+    --field-inner-padding: var(--control-inner-padding);
+    --field-block-gap: 0;
+    --field-note-height: 100px;
+    --field-note-line-height: 1.5;
+    --field-note-padding: 8px;
+    --field-note-padding-top: 8px;
+
+    --field-selection-bg: #b3d4fc;
+    --field-selection-color: inherit;
+
+    /* range: кастомный «таблеточный» трек (div): заливка + фон; высота полосы меньше поля */
+    --field-range-fill: #00b5ad;
+    --field-range-track: #e0e0e0;
+    --field-range-bar-height: 14px;
+}

package/dist/index.css

@@ -1 +0,0 @@
-@charset "UTF-8";._o_1c9e1_1{position:fixed;z-index:98;top:0;left:0;right:0;bottom:0;background:#0000}._c_1c9e1_11{box-shadow:5px 7px 18px #000000a8;padding:10px;margin:0;display:block;position:absolute;background:var(--select-background);z-index:99;border-radius:10px;overflow:hidden;max-height:315px;color:#fff}._c_1c9e1_11 [grid-calendar]{display:grid;grid-template-columns:35px 35px 35px 35px 35px 35px 35px}._c_1c9e1_11 [grid-month]{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;width:250px}._c_1c9e1_11 b{font-weight:400;display:block;padding:8px 5px;border-radius:5px;cursor:pointer;text-align:center}._c_1c9e1_11 b.__active_1c9e1_41{background:var(--bg-select-active)}._c_1c9e1_11 b:hover{background:var(--bg-select-hover)}._c_1c9e1_11 p{color:var(--color-placeholder);text-align:center;padding:0;cursor:default;pointer-events:none}._c_1c9e1_11 i{flex:0 30px;padding:9px;text-align:center;cursor:pointer;border-radius:5px}._c_1c9e1_11 i:hover{background:var(--bg-select-hover)}._c_1c9e1_11 i:before{cursor:pointer;display:block}._c_1c9e1_11 s{display:flex;font-style:normal;text-decoration:none;padding-bottom:5px;align-items:center}._c_1c9e1_11 s h2{flex:1 1;padding:0;margin:0;font-size:18px;text-align:center;font-weight:400;line-height:35px;color:#fff;cursor:default}._c_1c9e1_11 span{padding:2px;text-align:center}._c_1c9e1_11 span p{padding:8px 5px;color:var(--color-placeholder)}._c_1c9e1_11 ._as_1c9e1_94{cursor:ns-resize}._c_1c9e1_11 ._ap_1c9e1_97{cursor:pointer}[field=password] dd{white-space:nowrap;font-style:unset;-webkit-text-security:disc;user-select:none;-webkit-user-select:text}[field=password][show] dd{-webkit-text-security:none}[field=password] dd:before{-webkit-text-security:none}[field=code] div{display:flex;gap:8px}[field=select] dd{cursor:pointer}[field] dd:before{pointer-events:none}[field=check] dd{max-width:35px;padding:0;cursor:pointer}[field=check] [active]:after{content:"";background:#394264;width:15px;height:15px;display:block;border-radius:5px}[field=file] input{display:none}[field=file] dd{aspect-ratio:16/9;position:relative;cursor:pointer}[field=file] img{aspect-ratio:16/9;display:block;width:-webkit-fill-available;object-fit:contain;cursor:pointer}[field=file] label{aspect-ratio:16/9;display:block;width:-webkit-fill-available;object-fit:contain;position:absolute;cursor:pointer}[field=color] dd{display:flex;border:0;padding:0;gap:3px}[field=color] dd s{border:1px solid #dde2e4;border-radius:6px;flex:1;cursor:pointer;opacity:.6}[field=color] dd s:hover{opacity:.9}[field=color] dd s[active=true]{opacity:1}._l_r5ldz_1{display:flex;flex-direction:column;position:relative;min-width:var(--field-width)}._l_r5ldz_1[data-field=group] div{cursor:pointer;border-bottom:var(--field-border);margin:0;padding:var(--field-padding)}._l_r5ldz_1[data-field=group] div:last-child{border-bottom:0}._l_r5ldz_1 [placeholder]:empty:before{content:attr(placeholder);display:block;color:var(--field-placeholder)}._l_r5ldz_1 [placeholder]:focus:before{display:none}._f_r5ldz_25{box-sizing:border-box;display:flex;border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:0}._f_r5ldz_25>div{outline:0;flex:1;margin:var(--field-padding);min-height:var(--field-height);line-height:var(--field-height);text-wrap:pretty}._n_r5ldz_43 div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);padding-top:var(--field-note-padding-top)}._w_r5ldz_49>div{text-wrap:nowrap;overflow:hidden;overflow-x:scroll}._w_r5ldz_49>div::-webkit-scrollbar{width:0;height:0}._t_r5ldz_59{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:8px}._g_r5ldz_65{flex-direction:column}._h_r5ldz_69{--field-border: 0}._h_r5ldz_69 div{border:var(--field-check-box-border, --field-border);width:var(--field-height);height:var(--field-height);border-radius:var(--field-radius);background:var(--field-background);margin:0;flex:none;cursor:pointer;position:relative;gap:10px}._h_r5ldz_69 div[aria-checked=true]{background:var(--field-background-active)}._h_r5ldz_69 div:after{content:"";width:9px;height:5px;position:absolute;top:5px;left:4px;border:3px solid #fcfff4;border-top:none;border-right:none;background:transparent;transform:rotate(-45deg);margin:4px}._e_r5ldz_102{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}._n_1ery1_2{position:absolute;inset:var(--notice-inset);font-family:var(--notice-family);z-index:1111}._n_1ery1_2 ._e_1ery1_8{color:var(--notice-error, #bb2014)}._n_1ery1_2 ._s_1ery1_11{color:var(--notice-success, #367738)}._n_1ery1_2 ._r_1ery1_14{color:var(--notice-remark, #b77513)}._n_1ery1_2 ._с_1ery1_17{color:var(--notice-copy, #3f51b5)}._n_1ery1_2 li{-webkit-backdrop-filter:var(--notice-filter, blur(5px));backdrop-filter:var(--notice-filter, blur(5px));display:block;width:var(--notice-width, 300px);height:var(--notice-height, 70px);border-radius:var(--notice-radius, 5px);box-shadow:0 0 0 1px var(--notice-border),0 2px 2px #00000008,0 4px 4px #0000000a,0 10px 8px #0000000d,0 15px 15px #0000000f,0 30px 30px #00000012,0 70px 65px #00000017;background:var(--notice-background);overflow:hidden;cursor:pointer;margin:10px 0;transition:all 3s ease 0s;opacity:0}._n_1ery1_2 svg{float:left;width:50px;height:50px;margin:10px;font-size:40px;line-height:51px;text-align:center}._n_1ery1_2 b{width:222px;font-size:17px;font-weight:700;position:absolute;left:70px;display:block;margin-top:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._n_1ery1_2 p{color:var(--notice-color);font-size:14px;width:222px;position:absolute;left:70px;display:block;margin-top:37px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._n_1ery1_2 [data-status=show]{opacity:1;transition:1s;animation:_show-notice_1ery1_1 1s 1;animation-fill-mode:forwards}._n_1ery1_2 [data-status=hide]{opacity:1;transition:1s;animation:_hide-notice_1ery1_1 1s 1;animation-fill-mode:forwards}@keyframes _show-notice_1ery1_1{0%{opacity:0}to{opacity:1}}@keyframes _hide-notice_1ery1_1{0%{opacity:1}to{opacity:0}}:root{--primary-light: #8abdff;--primary: #6d5dfc;--primary-dark: #5b0eeb;--white: #fff;--greyLight-1: #e4ebf5;--greyLight-2: #abb6d2;--greyLight-3: #bec8e4;--greyDark: #9baacf;--inset: inset 2px 2px 2px var(--shadow), inset -1px -1px 1px var(--shade);--modal-radius: 10px}[shake=true]{-webkit-animation-name:_shake_oqfdb_1;animation-name:_shake_oqfdb_1;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@keyframes _shake_oqfdb_1{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}._modal_oqfdb_79{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;display:flex}._modal_oqfdb_79 ._sa_oqfdb_89{width:auto;margin:auto 20px}._modal_oqfdb_79 ._ss_oqfdb_94{width:400px}._modal_oqfdb_79 ._sm_oqfdb_98{width:500px}._modal_oqfdb_79 ._sl_oqfdb_102{width:800px}._modal_oqfdb_79 ._sx_oqfdb_106{width:1000px}._modal_oqfdb_79 ._sf_oqfdb_110{width:100%;max-width:1200px;min-width:910px}._o_oqfdb_116{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--modal-background-overflow, rgba(0, 0, 0, .7215686275))}._b_oqfdb_28{padding:15px 30px 30px;margin:auto}._w_oqfdb_15{box-shadow:5px 7px 18px 0 var(--modal-background-overflow, rgba(0, 0, 0, .7215686275));background-image:var(--modal-background-image);background-color:var(--modal-background-color);border-radius:var(--modal-radius);position:relative;min-width:300px;margin:auto;border-radius:10px;width:400px;max-height:90%;display:flex;flex-flow:column nowrap;overflow:hidden}._h_oqfdb_146{flex:1;font-size:15px;line-height:35px;font-weight:700;text-align:left;color:var(--modal-color);padding:10px 15px 5px 30px;user-select:none;-webkit-user-select:none;display:flex;z-index:1}._l_oqfdb_160{border-radius:10px;font-size:15px;box-shadow:var(--inset);color:var(--modal-color);margin:10px;overflow:hidden;overflow-y:scroll;padding:5px 0}._l_oqfdb_160 li{display:flex;margin:0 5px;padding:10px;position:relative}._l_oqfdb_160 li:after{content:"";border-bottom:1px solid #ddd;position:absolute;bottom:0;left:5px;right:5px}._l_oqfdb_160 li:last-child{border-bottom:0}._l_oqfdb_160 li:hover{background:#00000012;cursor:pointer;border-radius:5px}._t_oqfdb_197{padding-right:10px}._x_oqfdb_201{cursor:pointer;color:var(--modal-exit);opacity:.5;display:flex}._x_oqfdb_201 svg{width:20px}._x_oqfdb_201:hover{opacity:1}._s_oqfdb_89{flex:1;overflow-y:scroll}._c_oqfdb_219{text-align:center;margin:20px}._f_oqfdb_224{display:flex;padding:15px 30px 30px}._f_oqfdb_224 p{margin:auto;width:300px;padding:20px 0 5px;color:#1f253dc7;font-size:15px}._f_oqfdb_224._r__oqfdb_235{flex-direction:row}._f_oqfdb_224._r__oqfdb_235 dl{margin:7px 0;flex:1 1;flex-direction:row;display:flex}._f_oqfdb_224._r__oqfdb_235 dt{padding:7px 10px;color:var(--text);margin-left:7px;flex:0 1 150px}._f_oqfdb_224._c__oqfdb_250{flex-direction:column;gap:15px}._f_oqfdb_224._c__oqfdb_250 dt{padding-bottom:8px;margin-left:7px}._g_oqfdb_259{display:flex;gap:10px;overflow:hidden}._c_oqfdb_219{margin:10px 7px 20px;opacity:.8;box-shadow:var(--outset);border-radius:10px;padding:20px;flex:1;text-align:center;cursor:pointer}._c_oqfdb_219:first-child{margin-left:20px}._c_oqfdb_219:last-child{margin-right:20px}._c_oqfdb_219:hover{opacity:1;background:var(--tinge)}._c_oqfdb_219 i{font-size:70px;margin-bottom:20px;text-align:center;display:block;color:var(--disabled)}._c_oqfdb_219 b{text-align:center;display:block;color:var(--color)}._c_oqfdb_219 p{text-align:center;font-size:15px;color:var(--text)}._m_oqfdb_79{flex:1}._btn_1k1b3_1{opacity:.7;padding:7px 25px;border-radius:5px;box-shadow:var(--outset);display:flex;justify-content:center;cursor:pointer;transition:.3s ease}._btn_1k1b3_1:hover{opacity:1}._confirm_1k1b3_15{background:var(--button-confirm-bg, #4caf50);color:var(--button-confirm-color, #fff)}._cancel_1k1b3_20{background:var(--button-cancel-bg, #f44336);color:var(--button-cancel-color, #fff)}._action_1k1b3_25{background:var(--button-action-bg, #4094f7);color:var(--button-action-color, #fff)}._disabled_1k1b3_30{background:var(--button-disabled-bg, #efefef);color:var(--button-disabled-color, #000);opacity:1;cursor:default}._await_1k1b3_37{background:var(--button-await-bg, #efefef);color:var(--button-await-color, #000);opacity:1;cursor:default}._m_1k1b3_44{min-width:200px}._l_1k1b3_48{flex:1}:root{--select-overlay: #0000;--select-height: 35px;--select-separator: 1px solid #999;--select-color: #fff;--select-background: #28292d;--select-icon: calc(--select-height / 1.5);--select-icon-padding: calc((--select-height - --select-icon)/2) ;--select-font-size: 13px}._o_1wehm_12{position:fixed;z-index:98;top:0;left:0;right:0;bottom:0;background:var(--select-overlay)}._l_1wehm_22{padding:0;margin:0;display:block;position:absolute;background:var(--select-background);z-index:99;border-radius:10px;overflow:scroll;max-height:300px}._l_1wehm_22::-webkit-scrollbar{width:0;height:0}._l_1wehm_22 ul{overflow-y:auto;width:100%;max-height:300px;display:block;overflow-x:hidden}._l_1wehm_22 li{border-bottom:var(--select-separator);cursor:pointer;display:block;padding:0 15px;color:var(--select-color);border-left:0!important;text-align:left!important;height:var(--select-height);line-height:var(--select-height);font-size:var(--select-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}._l_1wehm_22 li:hover{opacity:1}._l_1wehm_22 li:last-child{border-bottom:0}._i_1wehm_72{position:absolute;width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding)}._f_1wehm_81{cursor:pointer}