@carrot-farm/mongsil-ui
Version:
react ui library
224 lines (215 loc) • 28.5 kB
CSS
:root {
--color-base-deg: 216;
--color-primary-deg: 216;
--color-base: hsl(var(--color-base-deg) 22% 95%);
--color-primary: hsl(var(--color-primary-deg) 100% 72%);
--color-secondary: hsl(360deg 100% 72%);
--color-error: hsl(0deg 84% 60%);
--color-warning: hsl(38deg 92% 50%);
--easing: 200ms ease-in-out;
--emboss-0: 0px 0px 0px hsl(var(--color-base-deg) 3% 5% / 6%),
0px 0px 0px hsl(var(--color-base-deg) 3% 5% / 10%),
0px 0px 0px hsl(var(--color-base-deg) 3% 100% / 80%),
0px 0px 0px hsl(var(--color-base-deg) 5% 100% / 80%);
--emboss-100: 1px 1px 1px hsl(var(--color-base-deg) 3% 5% / 6%),
2px 2px 4px hsl(var(--color-base-deg) 3% 5% / 10%),
-1px -1px 1px hsl(var(--color-base-deg) 3% 100% / 80%),
-2px -2px 4px hsl(var(--color-base-deg) 5% 100% / 80%);
--emboss-200: 2px 2px 2px hsl(var(--color-base-deg) 3% 5% / 6%),
4px 4px 8px hsl(var(--color-base-deg) 3% 5% / 10%),
-2px -2px 2px hsl(var(--color-base-deg) 3% 100% / 80%),
-4px -4px 8px hsl(var(--color-base-deg) 5% 100% / 80%);
--emboss-300: 3px 3px 3px hsl(var(--color-base-deg) 3% 5% / 6%),
5px 5px 12px hsl(var(--color-base-deg) 3% 5% / 10%),
-3px -3px 3px hsl(var(--color-base-deg) 3% 100% / 80%),
-5px -5px 12px hsl(var(--color-base-deg) 5% 100% / 80%);
--emboss-400: 4px 4px 4px hsl(var(--color-base-deg) 3% 5% / 6%),
6px 6px 16px hsl(var(--color-base-deg) 3% 5% / 10%),
-4px -4px 4px hsl(var(--color-base-deg) 3% 100% / 80%),
-6px -6px 16px hsl(var(--color-base-deg) 5% 100% / 80%);
--emboss-500: 5px 5px 5px hsl(var(--color-base-deg) 3% 5% / 6%),
7px 7px 20px hsl(var(--color-base-deg) 3% 5% / 10%),
-5px -5px 5px hsl(var(--color-base-deg) 3% 100% / 80%),
-7px -7px 20px hsl(var(--color-base-deg) 5% 100% / 80%);
--dent-0: inset 0px 0px 0px hsl(var(--color-base-deg) 3% 5% / 6%),
inset 0px 0px 0px hsl(var(--color-base-deg) 3% 5% / 10%),
inset 0px -0px 0px hsl(var(--color-base-deg) 3% 100% / 80%),
inset 0px 0px 0px hsl(var(--color-base-deg) 5% 100% / 80%);
--dent-100: inset 1px 1px 1px hsl(var(--color-base-deg) 3% 5% / 6%),
inset 2px 2px 4px hsl(var(--color-base-deg) 3% 5% / 10%),
inset -1px -1px 1px hsl(var(--color-base-deg) 3% 100% / 80%),
inset -2px -2px 4px hsl(var(--color-base-deg) 5% 100% / 80%);
--dent-200: inset 2px 2px 2px hsl(var(--color-base-deg) 3% 5% / 6%),
inset 4px 4px 8px hsl(var(--color-base-deg) 3% 5% / 10%),
inset -2px -2px 2px hsl(var(--color-base-deg) 3% 100% / 80%),
inset -4px -4px 8px hsl(var(--color-base-deg) 5% 100% / 80%);
--dent-300: inset 3px 3px 3px hsl(var(--color-base-deg) 3% 5% / 6%),
inset 5px 5px 12px hsl(var(--color-base-deg) 3% 5% / 10%),
inset -3px -3px 3px hsl(var(--color-base-deg) 3% 100% / 80%),
inset -5px -5px 12px hsl(var(--color-base-deg) 5% 100% / 80%);
--dent-400: inset 4px 4px 4px hsl(var(--color-base-deg) 3% 5% / 6%),
inset 6px 6px 16px hsl(var(--color-base-deg) 3% 5% / 10%),
inset -4px -4px 4px hsl(var(--color-base-deg) 3% 100% / 80%),
inset -6px -6px 16px hsl(var(--color-base-deg) 5% 100% / 80%);
--dent-500: inset 5px 5px 5px hsl(var(--color-base-deg) 3% 5% / 6%),
inset 7px 7px 20px hsl(var(--color-base-deg) 3% 5% / 10%),
inset -5px -5px 5px hsl(var(--color-base-deg) 3% 100% / 80%),
inset -7px -7px 20px hsl(var(--color-base-deg) 5% 100% / 80%);
/** ===== 하이라이드 비활성화 ===== */
outline: none;
-webkit-tap-highlight-color: transparent;
}
/** ===== scroll bar ===== */
:root ::-webkit-scrollbar {
width: 8px;
}
:root ::-webkit-scrollbar-thumb {
background-color: hsl(var(--color-primary-deg) 100% 72% / 50%);
border-radius: 10px;
padding: 5px;
}
:root ::-webkit-scrollbar-track {
background-color: hsl(var(--color-base-deg) 22% 93%);
}
:root html,
:root body {
background-color: var(--color-base);
}/** ===== Unstyled ===== */.dropdown {
position: relative;
display: inline-block;
}.dropdown > *:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}.dropdown .dropdown-content {
visibility: hidden;
position: absolute;
z-index: 50;
opacity: 0;
transition: opacity 0.3s linear, visible 0.3s linear;
}.dropdown-end .dropdown-content {
right: 0px;
}.dropdown-left .dropdown-content {
top: 0px;
right: 100%;
bottom: auto;
}.dropdown-right .dropdown-content {
left: 100%;
top: 0px;
bottom: auto;
}.dropdown-top .dropdown-content {
bottom: 100%;
top: auto;
}.dropdown-end.dropdown-right .dropdown-content {
bottom: 0px;
top: auto;
}.dropdown-end.dropdown-left .dropdown-content {
bottom: 0px;
top: auto;
}.dropdown:focus-within .dropdown-content.visible {
visibility: visible;
opacity: 1;
}/** ===== Styled ===== */.dropdown .dropdown-content.styled {
cursor: pointer;
overflow-y: auto;
overflow-x: hidden;
border-radius: 0.25rem;
padding: 0px;
--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
background: hsl(var(--color-base-deg) 22% 95% / 70%);
backdrop-filter: blur(2px);
background: hsl(var(--color-base-deg) 22% 95% / 70%);
z-index: 10;
margin: 0.25rem;
border-radius: 0.25rem;
border-width: 2px;
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
padding-left: 0px;
min-height: 40px;
max-height: 160px;
}.dropdown .dropdown-content.styled a, .dropdown .dropdown-content.styled li {
--tw-text-opacity: 1;
color: rgba(55, 65, 81, var(--tw-text-opacity));
}.dropdown .dropdown-content.styled li {
margin-bottom: 0px;
padding: 1rem;
}.dropdown .dropdown-content.styled li:hover,
.dropdown .dropdown-content.styled li.selected {
background-color: hsl(var(--color-primary-deg) 100% 72% / 10%);
}.dropdown .dropdown-content.styled li.selected {
font-weight: 700;
}#Mongsil-modal-root {
z-index: 1000;
}#Mongsil-modal-root .Mongsil-modal-backdrop {
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
background-color: hsla(var(--color-base-deg) 22% 95% / 0);
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}#Mongsil-modal-root .Mongsil-modal-backdrop.show {
background-color: hsla(var(--color-base-deg) 22% 95% / 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
visibility: visible;
}#Mongsil-modal-root .Mongsil-modal-container {
position: fixed;
left: 0px;
top: 0px;
display: flex;
width: 100%;
justify-content: center;
}#Mongsil-modal-root .Mongsil-modal-container.body-scroll {
max-height: 100vh;
overflow-y: auto;
}#Mongsil-modal-root .Mongsil-modal-container {
z-index: 1;
}.Mongsil-dialog-root {
border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 0.25rem;
overflow: hidden;
width: 90%;
max-width: 90%;
background-color: var(--color-base);
opacity: 0.5;
box-shadow: var(--emboss-0);
}@media (min-width: 640px) {
.Mongsil-dialog-root {
width: 470px;
}
}.Mongsil-dialog-root.show {
transition: box-shadow 0.2s linear, opacity 0.2s linear;
opacity: 1;
box-shadow: var(--emboss-300);
}/** scroll type */.Mongsil-dialog-root.scrolled-body {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}.Mongsil-dialog-root.scrolled-modal {
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 80px);
}.Mongsil-dialog-root.scrolled-modal-in .dialog-body {
max-height: calc(100vh - 178px);
overflow: auto;
}.Mongsil-dialog-root > div {
padding-left: 24px;
padding-right: 24px;
padding-top: 4px;
padding-bottom: 4px;
}.Mongsil-dialog-root .dialog-header {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
}.Mongsil-dialog-root .dialog-body {
padding-top: 1rem;
padding-bottom: 1rem;
min-height: 70px;
}.Mongsil-dialog-root .dialog-footer {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com*//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:initial;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder, textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder, textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:-moz-focusring{outline:auto}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity));--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-blur:var(--tw-empty,/*!*/ /*!*/);--tw-brightness:var(--tw-empty,/*!*/ /*!*/);--tw-contrast:var(--tw-empty,/*!*/ /*!*/);--tw-grayscale:var(--tw-empty,/*!*/ /*!*/);--tw-hue-rotate:var(--tw-empty,/*!*/ /*!*/);--tw-invert:var(--tw-empty,/*!*/ /*!*/);--tw-saturate:var(--tw-empty,/*!*/ /*!*/);--tw-sepia:var(--tw-empty,/*!*/ /*!*/);--tw-drop-shadow:var(--tw-empty,/*!*/ /*!*/);--tw-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.Mongsil-button-root{border-radius:.25rem;padding:.5rem 1rem;font-weight:600;transition-property:box-shadow;transition-timing-function:ease-in-out;transition-duration:.2s}.Mongsil-button-root.disabled{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.Mongsil-button-root.emboss{box-shadow:var(--emboss-300)}.Mongsil-button-root.emboss.pressed{box-shadow:var(--emboss-0)}.Mongsil-button-root.dent{box-shadow:var(--dent-0)}.Mongsil-button-root.dent.pressed{box-shadow:var(--dent-200)}.Mongsil-button-root>.Mongsil-button-label{transition-property:transform;transition-timing-function:ease-in-out;transition-duration:.2s}.Mongsil-button-root.pressed>.Mongsil-button-label{transform:scale(.95)}.Mongsil-input-root,.Mongsil-textarea-root{border-radius:.25rem;border-width:1px;background-color:initial;--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity));box-shadow:var(--dent-0);transition-property:box-shadow;transition-property:border;transition-timing-function:ease-in-out;transition-duration:.2s}.Mongsil-input-root.focused,.Mongsil-textarea-root.focused{border-color:transparent;box-shadow:var(--dent-100)}.Mongsil-input-root>.Mongsil-input-base,.Mongsil-textarea-root>.Mongsil-textarea-base{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:initial;padding:.5rem 1rem;--tw-text-opacity:1;color:rgba(55,65,81,var(--tw-text-opacity))}.Mongsil-input-root>.Mongsil-input-base:focus,.Mongsil-textarea-root>.Mongsil-textarea-base:focus{background-color:initial;outline:2px solid transparent;outline-offset:2px}.Mongsil-input-root.disabled,.Mongsil-input-root.disabled>.Mongsil-input-base,.Mongsil-textarea-root.disabled,.Mongsil-textarea-root.disabled>.Mongsil-textarea-base{cursor:not-allowed;--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.Mongsil-checkbox-root{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;padding:.5rem}.Mongsil-checkbox-root>.Mongsil-checkbox-base{-webkit-appearance:none;-moz-appearance:none;appearance:none}.Mongsil-checkbox-root>.Mongsil-checkbox-checker{display:inline-flex;height:1.25rem;width:1.25rem;align-items:center;justify-content:center;border-radius:.25rem;background-color:initial;--tw-text-opacity:1;color:rgba(209,213,219,var(--tw-text-opacity));transition:box-shadow var(--easing),color var(--easing)}.Mongsil-checkbox-root>.Mongsil-checkbox-checker.emboss,.Mongsil-checkbox-root>.Mongsil-checkbox-checker.emboss-fill,.Mongsil-checkbox-root>.Mongsil-checkbox-checker.emboss-outline{box-shadow:var(--emboss-200)}.Mongsil-checkbox-root>.Mongsil-checkbox-checker.emboss-outline{border-width:1px;border-color:transparent;transition:border var(--easing),color .2s var(--easing),box-shadow var(--easing)}.Mongsil-checkbox-root>.Mongsil-checkbox-checker.emboss-fill{transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out}.Mongsil-checkbox-root.checked>.Mongsil-checkbox-checker{box-shadow:var(--emboss-0)}.Mongsil-checkbox-root.checked>.Mongsil-checkbox-checker.emboss{color:var(--color-primary)}.Mongsil-checkbox-root.checked>.Mongsil-checkbox-checker.emboss-fill{background-color:var(--color-primary);font-size:1rem;line-height:1.5rem;color:var(--color-base)}.Mongsil-checkbox-root.checked>.Mongsil-checkbox-checker.emboss-outline{--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity));color:var(--color-primary)}.Mongsil-checkbox-root>.Mongsil-checkbox-checker.dent,.Mongsil-checkbox-root>.Mongsil-checkbox-checker.dent-outline{box-shadow:var(--dent-0)}.Mongsil-checkbox-root.checked>.Mongsil-checkbox-checker.dent,.Mongsil-checkbox-root.checked>.Mongsil-checkbox-checker.dent-outline{box-shadow:var(--dent-100)}.Mongsil-checkbox-root>.Mongsil-checkbox-checker.dent{transition:color var(--easing),box-shadow var(--easing)}.Mongsil-checkbox-root.checked>.Mongsil-checkbox-checker.dent{color:var(--color-primary)}.Mongsil-checkbox-root>.Mongsil-checkbox-checker.dent-outline{border-width:1px;--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity));transition:border var(--easing),color .2s var(--easing),box-shadow var(--easing)}.Mongsil-checkbox-root.checked>.Mongsil-checkbox-checker.dent-outline{border-color:transparent;color:var(--color-primary)}.Mongsil-checkbox-root .Mongsil-checkbox-icon{width:.75rem;transition:width var(--easing)}.Mongsil-checkbox-root>.Mongsil-checkbox-base:checked+.Mongsil-checkbox-checker .Mongsil-checkbox-icon{width:.5rem}.Mongsil-checkbox-root>label{margin-left:.75rem;cursor:pointer}.Mongsil-checkbox-root.disabled{cursor:not-allowed!important}.Mongsil-checkbox-root.disabled>.Mongsil-checkbox-checker{cursor:not-allowed!important;--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.Mongsil-checkbox-root.disabled .Mongsil-checkbox-icon{cursor:not-allowed!important;--tw-text-opacity:1;color:rgba(209,213,219,var(--tw-text-opacity))}.Mongsil-checkbox-root.disabled .Mongsil-checkbox-label{cursor:not-allowed!important;--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.Mongsil-radio-root{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;padding:.5rem}.Mongsil-radio-root>.Mongsil-radio-base{-webkit-appearance:none;-moz-appearance:none;appearance:none}.Mongsil-radio-root>.Mongsil-radio-checker{position:relative;display:inline-flex;height:1.25rem;width:1.25rem;align-items:center;justify-content:center;border-radius:9999px;background-color:var(--color-base);--tw-text-opacity:1;color:rgba(209,213,219,var(--tw-text-opacity))}.Mongsil-radio-root>.Mongsil-radio-checker>.Mongsil-radio-checker-outer{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity));width:14px;height:14px;transition:border-color var(--easing)}.Mongsil-radio-root .Mongsil-radio-base:checked+.Mongsil-radio-checker>.Mongsil-radio-checker-outer{border-color:var(--color-primary)}.Mongsil-radio-root>.Mongsil-radio-checker .Mongsil-radio-checker-inner{border-radius:9999px;background-color:var(--color-primary);transition-property:transform;transition-timing-function:ease-in-out;transition-duration:.2s;width:6px;height:6px;transform:scale(0)}.Mongsil-radio-root>.Mongsil-radio-base:checked+.Mongsil-radio-checker .Mongsil-radio-checker-inner{transform:scale(1)}.Mongsil-radio-root>.Mongsil-radio-label{margin-left:.75rem;cursor:pointer}.Mongsil-radio-root .Mongsil-radio-checker.emboss{box-shadow:var(--emboss-200)}.Mongsil-radio-root .Mongsil-radio-base:checked+.Mongsil-radio-checker.emboss .Mongsil-radio-checker-outer{transition:border-width var(--easing);border-width:1px}.Mongsil-radio-root .Mongsil-radio-base:checked+.Mongsil-radio-checker.emboss{box-shadow:var(--emboss-0)}.Mongsil-radio-root>.Mongsil-radio-checker.dent{border-width:1px;--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity));box-shadow:var(--dent-0);transition:box-shadow var(--easing),border-color var(--easing)}.Mongsil-radio-root .Mongsil-radio-base:checked+.Mongsil-radio-checker.dent{border-color:transparent;box-shadow:var(--dent-100)}.Mongsil-radio-root>.Mongsil-radio-base:checked+.Mongsil-radio-checker.dent .Mongsil-radio-checker-outer,.Mongsil-radio-root>.Mongsil-radio-checker.dent .Mongsil-radio-checker-outer{border-style:none}.Mongsil-radio-root>.Mongsil-radio-base:checked+.Mongsil-radio-checker.dent .Mongsil-radio-checker-inner{transform:scale(1.5)}.Mongsil-radio-root.disabled,.Mongsil-radio-root.disabled .Mongsil-radio-label{cursor:not-allowed!important;--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.Mongsil-radio-root.disabled .Mongsil-radio-checker{cursor:not-allowed!important;--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.Mongsil-radio-root.disabled .Mongsil-radio-checker-inner{--tw-bg-opacity:1;background-color:rgba(209,213,219,var(--tw-bg-opacity))}.Mongsil-radio-checker>.Mongsil-radio-checker-outer,.Mongsil-radio-root.disabled,.Mongsil-radio-root.disabled .Mongsil-radio-base:checked+.Mongsil-radio-checker>.Mongsil-radio-checker-outer{--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity))}.Mongsil-switch-root{position:relative;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;padding:.5rem}.Mongsil-switch-root>.Mongsil-switch-base{-webkit-appearance:none;-moz-appearance:none;appearance:none}.Mongsil-switch-root>.Mongsil-switch-bg{position:relative;display:flex;height:1.5rem;width:2.75rem;align-items:center;border-radius:9999px}.Mongsil-switch-root>.Mongsil-switch-bg.dent{box-shadow:var(--dent-100)}.Mongsil-switch-root>.Mongsil-switch-bg.emboss{border-width:1px;--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity))}.Mongsil-switch-root .Mongsil-switch-checker{display:inline-flex;height:1rem;width:1rem;align-items:center;justify-content:center;border-radius:9999px;position:absolute;--tw-bg-opacity:1;background-color:rgba(209,213,219,var(--tw-bg-opacity));left:4px;transition:transform .2s ease-in-out,background-color .2s ease-in-out}.Mongsil-switch-root .Mongsil-switch-bg.emboss .Mongsil-switch-checker{box-shadow:var(--emboss-200)}.Mongsil-switch-root .Mongsil-switch-base:checked+.Mongsil-switch-bg .Mongsil-switch-checker{background-color:var(--color-primary);transform:translateX(20px)}.Mongsil-switch-root.disabled .Mongsil-switch-bg{cursor:not-allowed!important;--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.Mongsil-switch-root.disabled .Mongsil-switch-base+.Mongsil-switch-bg .Mongsil-switch-checker,.Mongsil-switch-root.disabled .Mongsil-switch-base:checked+.Mongsil-switch-bg .Mongsil-switch-checker{--tw-bg-opacity:1;background-color:rgba(209,213,219,var(--tw-bg-opacity));--tw-shadow:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.Mongsil-select-root{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}.Mongsil-form_item-root.Mongsil-select-root .Mongsil-form_item-label{padding-bottom:.5rem}.Mongsil-select-root>.Mongsil-select-value-container{display:flex;cursor:pointer;align-items:center;justify-content:space-between;border-radius:.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity));padding:.5rem 1rem;width:100%}.Mongsil-select-root .Mongsil-select-value{display:inline-flex;line-height:1.5;height:1.5rem;min-width:3rem}.Mongsil-select-root .Mongsil-select-icon{margin-left:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.Mongsil-select-root .Mongsil-select-float-container{position:relative;width:100%}.Mongsil-select-root .Mongsil-select-float-panel{position:absolute;left:0;z-index:10;width:100%;cursor:pointer;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;--tw-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);top:0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:hsl(var(--color-base-deg) 22% 95%/70%);box-sizing:border-box;transform-origin:top;display:none;min-height:40px;max-height:160px;overflow-y:auto;overflow-x:hidden}.Mongsil-select-root .Mongsil-select-float-panel.animate-visible-panel{display:block}.Mongsil-select-root.disabled{--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.Mongsil-select-root.disabled>.Mongsil-select-value-container,.Mongsil-select-root.disabled button{cursor:not-allowed}.Mongsil-select-root.disabled .Mongsil-select-icon svg{--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.Mongsil-option-root{padding:.5rem 1rem}.Mongsil-option-root.selected,.Mongsil-option-root:hover{background:hsl(var(--color-primary-deg) 100% 72%/10%)}.Mongsil-option-root.selected{font-weight:700}.Mongsil-form_item-root{position:relative;display:flex}.Mongsil-form_item-root .Mongsil-form_item-container{position:relative}.Mongsil-form_item-root .Mongsil-form_item-label{font-size:.875rem;line-height:1.25rem}.Mongsil-form_item-root.flex-col .Mongsil-form_item-label{padding-bottom:.5rem}.Mongsil-form_item-root.flex-row .Mongsil-form_item-label>span{display:inline-block;padding-right:.5rem;padding-top:.5rem}.Mongsil-form_item-root .Mongsil-form_item-error_message,.Mongsil-form_item-root .Mongsil-form_item-helper_text{margin-top:.25rem;font-size:.75rem;line-height:1rem}.Mongsil-form_item-root .Mongsil-form_item-error_message{color:var(--color-error)}.Mongsil-form_item-root.disabled .Mongsil-form_item-error_message,.Mongsil-form_item-root.disabled .Mongsil-form_item-helper_text,.Mongsil-form_item-root.disabled .Mongsil-form_item-label{cursor:not-allowed!important;--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.Mongsil-layout-root{position:relative;display:grid}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.m-1{margin:.25rem}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.mb-0{margin-bottom:0}.ml-1{margin-left:.25rem}.mt-48{margin-top:12rem}.mr-\[-10px\]{margin-right:-10px}.mr-\[-12px\]{margin-right:-12px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-12{height:3rem}.h-9{height:2.25rem}.h-full{height:100%}.w-12{width:3rem}.w-full{width:100%}.w-11\/12{width:91.666667%}.w-9{width:2.25rem}.w-52{width:13rem}.flex-grow{flex-grow:1}.-rotate-90{--tw-rotate:-90deg;transform:var(--tw-transform)}@-webkit-keyframes visible-panel{0%{visibility:hidden;opacity:0;transform:scaleY(0)}10%{visibility:visible}to{opacity:1;transform:scaleY(1)}}@keyframes visible-panel{0%{visibility:hidden;opacity:0;transform:scaleY(0)}10%{visibility:visible}to{opacity:1;transform:scaleY(1)}}.animate-visible-panel{-webkit-animation:visible-panel .2s cubic-bezier(.25,1,.5,1) forwards;animation:visible-panel .2s cubic-bezier(.25,1,.5,1) forwards}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.25rem*var(--tw-space-x-reverse));margin-left:calc(1.25rem*(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.break-all{word-break:break-all}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-gray-500{--tw-border-opacity:1;border-color:rgba(107,114,128,var(--tw-border-opacity))}.bg-base{background-color:var(--color-base)}.p-0{padding:0}.p-2{padding:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-normal{font-weight:400}.text-gray-700{--tw-text-opacity:1;color:rgba(55,65,81,var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.text-error{color:var(--color-error)}.text-gray-500{--tw-text-opacity:1;color:rgba(107,114,128,var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgba(75,85,99,var(--tw-text-opacity))}.text-primary{color:var(--color-primary)}.filter{filter:var(--tw-filter)}emboss-400{box-shadow:var(--emboss-400)}emboss-500{box-shadow:var(--emboss-500)}