._userIcon_kkfvw_1 {
position: relative;
display: flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
align-items: center;
border-style: none;
background-color: var(--accent-key-color-15);
color: var(--accent-key-color);
transition: all 0.2s;
}
.ant-dropdown-trigger > ._userIcon_kkfvw_1 {
cursor: pointer;
}
._userIcon_kkfvw_1:after {
pointer-events: none;
position: absolute;
display: block;
height: 100%;
width: 100%;
border-radius: 9999px;
background-color: var(--transparent-10);
opacity: 0;
content: "";
transition: opacity 0.2s;
}
.ant-dropdown-open ._userIcon_kkfvw_1:after {
opacity: 1;
}
/* set the uploader size as parent component*/
._uploader_10fok_2 {
width: 100%;
height: 100%;
}
._uploader_10fok_2 .ant-upload-select,
._uploader_10fok_2 .ant-upload-list,
._uploader_10fok_2 .ant-upload-list-item-container,
._uploader_10fok_2 .ant-upload-list-item::before,
._uploader_10fok_2 .ant-upload-list-item.ant-upload-list-item-done {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
._uploader_10fok_2 .ant-upload-list-item.ant-upload-list-item-done {
padding: 0 !important;
border: none !important;
}
._uploader_10fok_2 .ant-upload-list-item-uploading {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
._uploader_10fok_2 .ant-upload-list-item-progress {
top: 60%;
bottom: unset;
}
._uploader_10fok_2 .ant-upload-list-item-thumbnail {
border: 1px dashed transparent;
box-sizing: content-box;
}
/* Push the delete button to the right to make space for custom buttons */
._uploader_10fok_2 .with-custom-cropper-button .ant-upload-list-item-actions > a {
margin-right: 30px;
}
/* Make sure the thumbnail stays in the custom renderer (same as vanilla antd) */
._uploader_10fok_2 .with-custom-cropper-button .ant-upload-list-item-thumbnail {
-o-object-fit: cover !important;
object-fit: cover !important;
width: 100%;
height: 100%;
}
._uploader_10fok_2 .with-custom-cropper-button .ant-upload-list-item-thumbnail img {
-o-object-fit: cover !important;
object-fit: cover !important;
width: 100%;
height: 100%;
}
/* Make sure the default buttons are displayed along with the custom one all the time */
._uploader_10fok_2 .group:hover .custom-edit-button,
._uploader_10fok_2 .group:hover .ant-upload-list-item-actions,
._uploader_10fok_2 .group:hover .ant-upload-list-item-actions > a,
._uploader_10fok_2 .group:hover .ant-upload-list-item-actions > button {
opacity: 1 !important;
}
/* Negate the default antd mask on :hover */
._uploader_10fok_2 .with-custom-cropper-button:hover .ant-upload-list-item::before {
background-color: transparent !important;
}
/* avoid the animate break the UI */
._uploader_10fok_2 .ant-upload-animate-inline-leave {
display: none !important;
}
/* show red border when upload fail */
._error_10fok_73 .ant-upload-select,
._error_10fok_73 .ant-upload-list-item-thumbnail {
border-color: var(--system-danger) !important;
}
._searchField_15lvq_1 .ant-input-group-addon {
display: none;
}
._searchField_15lvq_1 .ant-input-affix-wrapper {
border-radius: 8px !important;
}
/* stylelint-disable */
html,
body {
width: 100%;
height: 100%;
}
input::-ms-clear,
input::-ms-reveal {
display: none;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
}
[tabindex='-1']:focus {
outline: none;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: 500;
}
p {
margin-top: 0;
margin-bottom: 1em;
}
abbr[title],
abbr[data-original-title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline;
text-decoration: underline dotted;
border-bottom: 0;
cursor: help;
}
address {
margin-bottom: 1em;
font-style: normal;
line-height: inherit;
}
input[type='text'],
input[type='password'],
input[type='number'],
textarea {
-webkit-appearance: none;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1em;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 500;
}
dd {
margin-bottom: 0.5em;
margin-left: 0;
}
blockquote {
margin: 0 0 1em;
}
dfn {
font-style: italic;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
pre,
code,
kbd,
samp {
font-size: 1em;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
pre {
margin-top: 0;
margin-bottom: 1em;
overflow: auto;
}
figure {
margin: 0 0 1em;
}
img {
vertical-align: middle;
border-style: none;
}
a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea {
touch-action: manipulation;
}
table {
border-collapse: collapse;
}
caption {
padding-top: 0.75em;
padding-bottom: 0.3em;
text-align: left;
caption-side: bottom;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html [type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type='radio'],
input[type='checkbox'] {
box-sizing: border-box;
padding: 0;
}
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
-webkit-appearance: listbox;
}
textarea {
overflow: auto;
resize: vertical;
}
fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
legend {
display: block;
width: 100%;
max-width: 100%;
margin-bottom: 0.5em;
padding: 0;
color: inherit;
font-size: 1.5em;
line-height: inherit;
white-space: normal;
}
progress {
vertical-align: baseline;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
[type='search'] {
outline-offset: -2px;
-webkit-appearance: none;
}
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none !important;
}
mark {
padding: 0.2em;
background-color: #feffe6;
}
/* SN Ads design token primitives exported from figma */
:root {
/* Value */
/* colors */
--accent-key-color: #0099eb;
--accent-key-color-15: #0099eb26;
--brand-sn-blue: #329fe7;
--brand-sn-green: #00cc8b;
--brand-sn-orange: #fb9200;
--brand-sn-red: #fd4749;
--general-green: #34c759;
--general-grey-blue: #f4f6f9;
--general-yellow: #faad14;
--grey-0: #ffffff;
--grey-100: #f9f9f9;
--grey-300: #e0e0e0;
--grey-400: #bbbbbb;
--transparent-10: #0000001a;
--transparent-20: #00000033;
--transparent-60: #00000099;
--transparent-87: #000000de;
/* tokens */
--surface-stroke: var(--grey-300);
--surface-active: var(--accent-key-color-15);
--surface-default: var(--grey-0);
--surface-disabled: var(--grey-100);
--surface-hover: var(--transparent-10);
--surface-keycolor: var(--accent-key-color);
--surface-secondary: var(--general-grey-blue);
--surface-tertiary: var(--grey-100);
--system-danger: var(--brand-sn-red);
--system-idle: var(--grey-400);
--system-success: var(--general-green);
--system-validating: var(--accent-key-color);
--system-warning: var(--general-yellow);
--text-danger: var(--brand-sn-red);
--text-default: var(--transparent-87);
--text-disabled: var(--transparent-20);
--text-keycolor: var(--accent-key-color);
--text-secondary: var(--transparent-60);
--text-white: var(--grey-0);
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--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-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--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-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
.container {
width: 100%
}
@media (min-width: 1200px) {
.container {
max-width: 1200px
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px
}
}
#body .pointer-events-none {
pointer-events: none
}
#body .visible {
visibility: visible
}
#body .\!visible {
visibility: visible !important
}
#body .invisible {
visibility: hidden
}
#body .collapse {
visibility: collapse
}
#body .static {
position: static
}
#body .fixed {
position: fixed
}
#body .absolute {
position: absolute
}
#body .relative {
position: relative
}
#body .sticky {
position: sticky
}
#body .inset-0 {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px
}
#body .top-0 {
top: 0px
}
#body .left-0 {
left: 0px
}
#body .right-0 {
right: 0px
}
#body .top-\[80px\] {
top: 80px
}
#body .bottom-0 {
bottom: 0px
}
#body .top-1 {
top: 0.25rem
}
#body .right-1 {
right: 0.25rem
}
#body .top-\[50px\] {
top: 50px
}
#body .left-full {
left: 100%
}
#body .top-\[16px\] {
top: 16px
}
#body .right-\[16px\] {
right: 16px
}
#body .right-\[-56px\] {
right: -56px
}
#body .z-loading {
z-index: 50
}
#body .z-10 {
z-index: 10
}
#body .z-50 {
z-index: 50
}
#body .z-sticky {
z-index: 100
}
#body .m-0 {
margin: 0px
}
#body .m-r0\.8 {
margin: .8rem
}
#body .m-auto {
margin: auto
}
#body .m-2 {
margin: 0.5rem
}
#body .m-\[-4px\] {
margin: -4px
}
#body .m-\[4px\] {
margin: 4px
}
#body .m-1 {
margin: 0.25rem
}
#body .mx-\[8px\] {
margin-left: 8px;
margin-right: 8px
}
#body .mx-0 {
margin-left: 0px;
margin-right: 0px
}
#body .mx-\[24px\] {
margin-left: 24px;
margin-right: 24px
}
#body .my-r0\.8 {
margin-top: .8rem;
margin-bottom: .8rem
}
#body .mx-\[2px\] {
margin-left: 2px;
margin-right: 2px
}
#body .mx-\[-24px\] {
margin-left: -24px;
margin-right: -24px
}
#body .my-\[12px\] {
margin-top: 12px;
margin-bottom: 12px
}
#body .mx-auto {
margin-left: auto;
margin-right: auto
}
#body .my-r2\.2 {
margin-top: 2.2rem;
margin-bottom: 2.2rem
}
#body .my-\[8px\] {
margin-top: 8px;
margin-bottom: 8px
}
#body .my-\[24px\] {
margin-top: 24px;
margin-bottom: 24px
}
#body .my-r0\.6 {
margin-top: .6rem;
margin-bottom: .6rem
}
#body .mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem
}
#body .my-r2\.4 {
margin-top: 2.4rem;
margin-bottom: 2.4rem
}
#body .my-r1\.6 {
margin-top: 1.6rem;
margin-bottom: 1.6rem
}
#body .my-\[16px\] {
margin-top: 16px;
margin-bottom: 16px
}
#body .mx-\[-16px\] {
margin-left: -16px;
margin-right: -16px
}
#body .my-\[10px\] {
margin-top: 10px;
margin-bottom: 10px
}
#body .mx-\[16px\] {
margin-left: 16px;
margin-right: 16px
}
#body .mx-r1\.6 {
margin-left: 1.6rem;
margin-right: 1.6rem
}
#body .mt-\[24px\] {
margin-top: 24px
}
#body .mt-4 {
margin-top: 1rem
}
#body .mt-r2\.4 {
margin-top: 2.4rem
}
#body .mt-8 {
margin-top: 2rem
}
#body .ml-4 {
margin-left: 1rem
}
#body .ml-r1\.6 {
margin-left: 1.6rem
}
#body .ml-2 {
margin-left: 0.5rem
}
#body .ml-auto {
margin-left: auto
}
#body .mb-0 {
margin-bottom: 0px
}
#body .mr-auto {
margin-right: auto
}
#body .ml-\[8px\] {
margin-left: 8px
}
#body .mr-r0\.2 {
margin-right: .2rem
}
#body .mt-r0\.8 {
margin-top: .8rem
}
#body .mr-\[-4px\] {
margin-right: -4px
}
#body .mt-\[-4px\] {
margin-top: -4px
}
#body .mt-\[4px\] {
margin-top: 4px
}
#body .mb-r0\.8 {
margin-bottom: .8rem
}
#body .ml-1 {
margin-left: 0.25rem
}
#body .mr-r1\.6 {
margin-right: 1.6rem
}
#body .mr-r0\.8 {
margin-right: .8rem
}
#body .mr-\[2px\] {
margin-right: 2px
}
#body .mt-2 {
margin-top: 0.5rem
}
#body .mt-r0\.4 {
margin-top: .4rem
}
#body .mr-\[8px\] {
margin-right: 8px
}
#body .mt-\[2px\] {
margin-top: 2px
}
#body .mb-\[8px\] {
margin-bottom: 8px
}
#body .mb-r2\.4 {
margin-bottom: 2.4rem
}
#body .ml-r0\.8 {
margin-left: .8rem
}
#body .mb-4 {
margin-bottom: 1rem
}
#body .mr-\[32px\] {
margin-right: 32px
}
#body .mt-r1\.6 {
margin-top: 1.6rem
}
#body .mb-\[24px\] {
margin-bottom: 24px
}
#body .mr-2 {
margin-right: 0.5rem
}
#body .mr-\[16px\] {
margin-right: 16px
}
#body .mb-r1\.6 {
margin-bottom: 1.6rem
}
#body .mb-\[-8px\] {
margin-bottom: -8px
}
#body .mt-\[16px\] {
margin-top: 16px
}
#body .mb-\[16px\] {
margin-bottom: 16px
}
#body .mb-r0\.4 {
margin-bottom: .4rem
}
#body .ml-r0\.4 {
margin-left: .4rem
}
#body .mr-r0\.4 {
margin-right: .4rem
}
#body .mt-\[8px\] {
margin-top: 8px
}
#body .mb-2 {
margin-bottom: 0.5rem
}
#body .mt-6 {
margin-top: 1.5rem
}
#body .mt-12 {
margin-top: 3rem
}
#body .mr-0 {
margin-right: 0px
}
#body .ml-\[38px\] {
margin-left: 38px
}
#body .mr-3 {
margin-right: 0.75rem
}
#body .mt-0 {
margin-top: 0px
}
#body .mb-\[4px\] {
margin-bottom: 4px
}
#body .ml-10 {
margin-left: 2.5rem
}
#body .mb-r2\.8 {
margin-bottom: 2.8rem
}
#body .ml-r1\.8 {
margin-left: 1.8rem
}
#body .ml-r1\.2 {
margin-left: 1.2rem
}
#body .mr-4 {
margin-right: 1rem
}
#body .mb-6 {
margin-bottom: 1.5rem
}
#body .ml-\[4px\] {
margin-left: 4px
}
#body .mb-8 {
margin-bottom: 2rem
}
#body .-mb-4 {
margin-bottom: -1rem
}
#body .mr-6 {
margin-right: 1.5rem
}
#body .mb-1 {
margin-bottom: 0.25rem
}
#body .ml-\[16px\] {
margin-left: 16px
}
#body .mt-\[10px\] {
margin-top: 10px
}
#body .ml-\[10px\] {
margin-left: 10px
}
#body .mr-\[4px\] {
margin-right: 4px
}
#body .mb-\[21px\] {
margin-bottom: 21px
}
#body .mt-\[20px\] {
margin-top: 20px
}
#body .ml-3 {
margin-left: 0.75rem
}
#body .mb-\[18px\] {
margin-bottom: 18px
}
#body .ml-\[2px\] {
margin-left: 2px
}
#body .mt-\[-12px\] {
margin-top: -12px
}
#body .mt-r1\.2 {
margin-top: 1.2rem
}
#body .block {
display: block
}
#body .inline-block {
display: inline-block
}
#body .inline {
display: inline
}
#body .flex {
display: flex
}
#body .inline-flex {
display: inline-flex
}
#body .table {
display: table
}
#body .grid {
display: grid
}
#body .contents {
display: contents
}
#body .hidden {
display: none
}
#body .\!hidden {
display: none !important
}
#body .aspect-square {
aspect-ratio: 1 / 1
}
#body .aspect-\[6\/5\] {
aspect-ratio: 6/5
}
#body .aspect-\[16\/9\] {
aspect-ratio: 16/9
}
#body .h-\[400px\] {
height: 400px
}
#body .h-screen {
height: 100vh
}
#body .h-96 {
height: 24rem
}
#body .h-auto {
height: auto
}
#body .h-\[300px\] {
height: 300px
}
#body .h-full {
height: 100%
}
#body .h-\[180px\] {
height: 180px
}
#body .h-\[248px\] {
height: 248px
}
#body .h-\[472px\] {
height: 472px
}
#body .h-\[266px\] {
height: 266px
}
#body .h-\[40vh\] {
height: 40vh
}
#body .h-\[16px\] {
height: 16px
}
#body .h-r0\.6 {
height: .6rem
}
#body .h-\[68px\] {
height: 68px
}
#body .h-\[20px\] {
height: 20px
}
#body .h-\[22px\] {
height: 22px
}
#body .h-\[100px\] {
height: 100px
}
#body .h-\[48px\] {
height: 48px
}
#body .h-\[24px\] {
height: 24px
}
#body .h-\[264px\] {
height: 264px
}
#body .h-\[calc\(100vh-80px\)\] {
height: calc(100vh - 80px)
}
#body .h-\[28px\] {
height: 28px
}
#body .h-\[114px\] {
height: 114px
}
#body .h-\[80px\] {
height: 80px
}
#body .h-\[500px\] {
height: 500px
}
#body .h-\[25px\] {
height: 25px
}
#body .h-\[34px\] {
height: 34px
}
#body .h-\[calc\(100vh_-_var\(--sn-navbar-height\)\)\] {
height: calc(100vh - var(--sn-navbar-height))
}
#body .h-\[6px\] {
height: 6px
}
#body .h-\[18px\] {
height: 18px
}
#body .h-\[50px\] {
height: 50px
}
#body .h-\[96px\] {
height: 96px
}
#body .h-r0\.8 {
height: .8rem
}
#body .h-r3\.2 {
height: 3.2rem
}
#body .h-r3 {
height: 3rem
}
#body .h-\[43px\] {
height: 43px
}
#body .h-\[26px\] {
height: 26px
}
#body .h-\[425px\] {
height: 425px
}
#body .h-\[47px\] {
height: 47px
}
#body .h-\[420px\] {
height: 420px
}
#body .h-\[450px\] {
height: 450px
}
#body .h-\[23px\] {
height: 23px
}
#body .h-\[72px\] {
height: 72px
}
#body .h-\[30px\] {
height: 30px
}
#body .h-\[94px\] {
height: 94px
}
#body .h-\[186px\] {
height: 186px
}
#body .h-\[170px\] {
height: 170px
}
#body .max-h-\[calc\(100vh_-_310px\)\] {
max-height: calc(100vh - 310px)
}
#body .max-h-\[50vh\] {
max-height: 50vh
}
#body .max-h-\[90vh\] {
max-height: 90vh
}
#body .max-h-0 {
max-height: 0px
}
#body .max-h-\[200px\] {
max-height: 200px
}
#body .max-h-\[150px\] {
max-height: 150px
}
#body .max-h-\[470px\] {
max-height: 470px
}
#body .min-h-screen {
min-height: 100vh
}
#body .min-h-\[200px\] {
min-height: 200px
}
#body .min-h-\[180px\] {
min-height: 180px
}
#body .min-h-\[45px\] {
min-height: 45px
}
#body .min-h-72 {
min-height: 18rem
}
#body .min-h-\[500px\] {
min-height: 500px
}
#body .min-h-\[84px\] {
min-height: 84px
}
#body .w-full {
width: 100%
}
#body .w-\[400px\] {
width: 400px
}
#body .w-96 {
width: 24rem
}
#body .w-\[300px\] {
width: 300px
}
#body .w-\[320px\] {
width: 320px
}
#body .w-auto {
width: auto
}
#body .w-\[16px\] {
width: 16px
}
#body .w-r0\.6 {
width: .6rem
}
#body .w-\[200px\] {
width: 200px
}
#body .w-r11\.2 {
width: 11.2rem
}
#body .w-\[460px\] {
width: 460px
}
#body .w-\[24px\] {
width: 24px
}
#body .w-\[260px\] {
width: 260px
}
#body .w-\[310px\] {
width: 310px
}
#body .w-\[290px\] {
width: 290px
}
#body .w-\[114px\] {
width: 114px
}
#body .w-\[500px\] {
width: 500px
}
#body .w-\[100px\] {
width: 100px
}
#body .w-\[34px\] {
width: 34px
}
#body .w-\[525px\] {
width: 525px
}
#body .w-\[375px\] {
width: 375px
}
#body .w-\[6px\] {
width: 6px
}
#body .w-\[240px\] {
width: 240px
}
#body .w-r40 {
width: 40.0rem
}
#body .w-r0\.8 {
width: .8rem
}
#body .w-r24 {
width: 24.0rem
}
#body .w-\[26px\] {
width: 26px
}
#body .w-14 {
width: 3.5rem
}
#body .w-\[18px\] {
width: 18px
}
#body .w-\[90px\] {
width: 90px
}
#body .w-\[211px\] {
width: 211px
}
#body .w-\[48px\] {
width: 48px
}
#body .w-\[94px\] {
width: 94px
}
#body .w-\[229\.2px\] {
width: 229.2px
}
#body .w-\[120px\] {
width: 120px
}
#body .w-\[330px\] {
width: 330px
}
#body .w-\[80px\] {
width: 80px
}
#body .w-8 {
width: 2rem
}
#body .w-\[252px\] {
width: 252px
}
#body .min-w-\[120px\] {
min-width: 120px
}
#body .min-w-minWebpageWidth {
min-width: 1260px
}
#body .min-w-\[60px\] {
min-width: 60px
}
#body .min-w-r11\.2 {
min-width: 11.2rem
}
#body .min-w-\[124px\] {
min-width: 124px
}
#body .min-w-\[260px\] {
min-width: 260px
}
#body .min-w-r9\.6 {
min-width: 9.6rem
}
#body .min-w-\[130px\] {
min-width: 130px
}
#body .min-w-\[200px\] {
min-width: 200px
}
#body .min-w-\[280px\] {
min-width: 280px
}
#body .min-w-\[90px\] {
min-width: 90px
}
#body .min-w-\[94px\] {
min-width: 94px
}
#body .min-w-0 {
min-width: 0px
}
#body .max-w-\[500px\] {
max-width: 500px
}
#body .max-w-\[128ch\] {
max-width: 128ch
}
#body .max-w-none {
max-width: none
}
#body .max-w-full {
max-width: 100%
}
#body .max-w-\[600px\] {
max-width: 600px
}
#body .max-w-\[1000px\] {
max-width: 1000px
}
#body .max-w-\[150px\] {
max-width: 150px
}
#body .max-w-\[80vw\] {
max-width: 80vw
}
#body .max-w-3xl {
max-width: 76.8rem
}
#body .\!max-w-\[300px\] {
max-width: 300px !important
}
#body .flex-1 {
flex: 1 1 0%
}
#body .flex-auto {
flex: 1 1 auto
}
#body .flex-none {
flex: none
}
#body .flex-shrink-0 {
flex-shrink: 0
}
#body .shrink-0 {
flex-shrink: 0
}
#body .flex-grow {
flex-grow: 1
}
#body .grow {
flex-grow: 1
}
#body .basis-3\/5 {
flex-basis: 60%
}
#body .basis-2\/5 {
flex-basis: 40%
}
#body .basis-1\/5 {
flex-basis: 20%
}
#body .rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), 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))
}
#body .cursor-pointer {
cursor: pointer
}
#body .cursor-default {
cursor: default
}
#body .cursor-text {
cursor: text
}
#body .cursor-help {
cursor: help
}
#body .\!cursor-default {
cursor: default !important
}
#body .select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}
#body .snap-x {
scroll-snap-type: x var(--tw-scroll-snap-strictness)
}
#body .snap-center {
scroll-snap-align: center
}
#body .list-none {
list-style-type: none
}
#body .grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
#body .grid-rows-\[0fr\] {
grid-template-rows: 0fr
}
#body .grid-rows-\[1fr\] {
grid-template-rows: 1fr
}
#body .flex-row {
flex-direction: row
}
#body .flex-row-reverse {
flex-direction: row-reverse
}
#body .flex-col {
flex-direction: column
}
#body .flex-wrap {
flex-wrap: wrap
}
#body .flex-nowrap {
flex-wrap: nowrap
}
#body .items-start {
align-items: flex-start
}
#body .items-end {
align-items: flex-end
}
#body .items-center {
align-items: center
}
#body .items-stretch {
align-items: stretch
}
#body .justify-start {
justify-content: flex-start
}
#body .justify-end {
justify-content: flex-end
}
#body .justify-center {
justify-content: center
}
#body .justify-between {
justify-content: space-between
}
#body .gap-4 {
gap: 1rem
}
#body .gap-2 {
gap: 0.5rem
}
#body .gap-8 {
gap: 2rem
}
#body .gap-r0\.8 {
gap: .8rem
}
#body .gap-\[8px\] {
gap: 8px
}
#body .gap-\[24px\] {
gap: 24px
}
#body .gap-\[4px\] {
gap: 4px
}
#body .gap-r0\.4 {
gap: .4rem
}
#body .gap-\[16px\] {
gap: 16px
}
#body .gap-\[48px\] {
gap: 48px
}
#body .gap-r1\.6 {
gap: 1.6rem
}
#body .gap-3 {
gap: 0.75rem
}
#body .gap-10 {
gap: 2.5rem
}
#body .gap-6 {
gap: 1.5rem
}
#body .gap-7 {
gap: 1.75rem
}
#body .space-x-r1\.2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.2rem * var(--tw-space-x-reverse));
margin-left: calc(1.2rem * calc(1 - var(--tw-space-x-reverse)))
}
#body .space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
}
#body .space-x-r0\.4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(.4rem * var(--tw-space-x-reverse));
margin-left: calc(.4rem * calc(1 - var(--tw-space-x-reverse)))
}
#body .space-y-16 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(4rem * var(--tw-space-y-reverse))
}
#body .space-x-\[8px\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(8px * var(--tw-space-x-reverse));
margin-left: calc(8px * calc(1 - var(--tw-space-x-reverse)))
}
#body .self-start {
align-self: flex-start
}
#body .self-end {
align-self: flex-end
}
#body .self-center {
align-self: center
}
#body .overflow-auto {
overflow: auto
}
#body .overflow-hidden {
overflow: hidden
}
#body .overflow-x-auto {
overflow-x: auto
}
#body .overflow-y-auto {
overflow-y: auto
}
#body .overflow-x-hidden {
overflow-x: hidden
}
#body .overflow-x-scroll {
overflow-x: scroll
}
#body .overflow-y-scroll {
overflow-y: scroll
}
#body .scroll-smooth {
scroll-behavior: smooth
}
#body .truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
#body .text-ellipsis {
text-overflow: ellipsis
}
#body .whitespace-nowrap {
white-space: nowrap
}
#body .whitespace-pre-line {
white-space: pre-line
}
#body .break-all {
word-break: break-all
}
#body .rounded {
border-radius: .4rem
}
#body .rounded-lg {
border-radius: .8rem
}
#body .rounded-none {
border-radius: 0px
}
#body .rounded-full {
border-radius: 9999px
}
#body .rounded-\[4px\] {
border-radius: 4px
}
#body .rounded-\[8px\] {
border-radius: 8px
}
#body .rounded-md {
border-radius: .6rem
}
#body .rounded-sm {
border-radius: .2rem
}
#body .rounded-xl {
border-radius: 1.2rem
}
#body .rounded-r0\.5 {
border-radius: 0.5rem
}
#body .rounded-b-none {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px
}
#body .rounded-tr-sm {
border-top-right-radius: .2rem
}
#body .border-\[1px\] {
border-width: 1px
}
#body .border-0 {
border-width: 0px
}
#body .border {
border-width: 1px
}
#body .border-\[1\.5px\] {
border-width: 1.5px
}
#body .border-b {
border-bottom-width: 1px
}
#body .border-t {
border-top-width: 1px
}
#body .border-r-\[3px\] {
border-right-width: 3px
}
#body .border-t-\[1px\] {
border-top-width: 1px
}
#body .border-b-\[0\.5px\] {
border-bottom-width: 0.5px
}
#body .border-solid {
border-style: solid
}
#body .border-none {
border-style: none
}
#body .border-surface-stroke {
border-color: var(--grey-300)
}
#body .border-surface-keycolor {
border-color: var(--accent-key-color)
}
#body .border-system-danger {
border-color: var(--brand-sn-red)
}
#body .border-\[\#D9D9D9\] {
--tw-border-opacity: 1;
border-color: rgb(217 217 217 / var(--tw-border-opacity))
}
#body .border-red-required {
--tw-border-opacity: 1;
border-color: rgb(255 77 79 / var(--tw-border-opacity))
}
#body .border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(240 242 245 / var(--tw-border-opacity))
}
#body .border-\[\#e8e8e8\] {
--tw-border-opacity: 1;
border-color: rgb(232 232 232 / var(--tw-border-opacity))
}
#body .border-text-danger {
border-color: var(--brand-sn-red)
}
#body .border-text-keycolor {
border-color: var(--accent-key-color)
}
#body .border-black\/20 {
border-color: rgb(0 0 0 / 0.2)
}
#body .border-\[\#f0f0f0\] {
--tw-border-opacity: 1;
border-color: rgb(240 240 240 / var(--tw-border-opacity))
}
#body .border-\[\#e0e0e0\] {
--tw-border-opacity: 1;
border-color: rgb(224 224 224 / var(--tw-border-opacity))
}
#body .border-\[\#F0F0F0\] {
--tw-border-opacity: 1;
border-color: rgb(240 240 240 / var(--tw-border-opacity))
}
#body .border-\[\#CCCCCC\] {
--tw-border-opacity: 1;
border-color: rgb(204 204 204 / var(--tw-border-opacity))
}
#body .border-\[var\(--accent-key-color\)\] {
border-color: var(--accent-key-color)
}
#body .border-transparent {
border-color: transparent
}
#body .border-danger {
border-color: var(--brand-sn-red)
}
#body .border-surface-tertiary {
border-color: var(--grey-100)
}
#body .border-r-transparent {
border-right-color: transparent
}
#body .border-r-text-keycolor {
border-right-color: var(--accent-key-color)
}
#body .bg-surface-secondary {
background-color: var(--general-grey-blue)
}
#body .bg-slate-400 {
--tw-bg-opacity: 1;
background-color: rgb(148 163 184 / var(--tw-bg-opacity))
}
#body .bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
#body .bg-black\/40 {
background-color: rgb(0 0 0 / 0.4)
}
#body .bg-surface-tertiary {
background-color: var(--grey-100)
}
#body .bg-transparent {
background-color: transparent
}
#body .bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(250 250 250 / var(--tw-bg-opacity))
}
#body .bg-system-danger {
background-color: var(--brand-sn-red)
}
#body .bg-system-warning {
background-color: var(--general-yellow)
}
#body .bg-system-success {
background-color: var(--general-green)
}
#body .bg-surface-keycolor {
background-color: var(--accent-key-color)
}
#body .bg-system-idle {
background-color: var(--grey-400)
}
#body .bg-surface-stroke {
background-color: var(--grey-300)
}
#body .bg-surface-active {
background-color: var(--accent-key-color-15)
}
#body .bg-\[var\(--general-grey-blue\)\] {
background-color: var(--general-grey-blue)
}
#body .bg-text-keycolor {
background-color: var(--accent-key-color)
}
#body .bg-black\/3 {
background-color: rgb(0 0 0 / .03)
}
#body .bg-\[\#DFDFDF\] {
--tw-bg-opacity: 1;
background-color: rgb(223 223 223 / var(--tw-bg-opacity))
}
#body .bg-black\/50 {
background-color: rgb(0 0 0 / 0.5)
}
#body .bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(240 242 245 / var(--tw-bg-opacity))
}
#body .bg-surface-default {
background-color: var(--grey-0)
}
#body .bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}
#body .bg-brand-green {
--tw-bg-opacity: 1;
background-color: rgb(0 204 139 / var(--tw-bg-opacity))
}
#body .bg-brand-red {
--tw-bg-opacity: 1;
background-color: rgb(253 71 73 / var(--tw-bg-opacity))
}
#body .bg-\[\#DBDBDB\] {
--tw-bg-opacity: 1;
background-color: rgb(219 219 219 / var(--tw-bg-opacity))
}
#body .bg-\[\#D9D9D9\] {
--tw-bg-opacity: 1;
background-color: rgb(217 217 217 / var(--tw-bg-opacity))
}
#body .bg-\[\#f5f5f5\] {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
#body .bg-\[\#f2f2f2\] {
--tw-bg-opacity: 1;
background-color: rgb(242 242 242 / var(--tw-bg-opacity))
}
#body .bg-\[\#F9F9F9\] {
--tw-bg-opacity: 1;
background-color: rgb(249 249 249 / var(--tw-bg-opacity))
}
#body .bg-surface-disabled {
background-color: var(--grey-100)
}
#body .bg-\[var\(--grey-100\)\] {
background-color: var(--grey-100)
}
#body .bg-opacity-100 {
--tw-bg-opacity: 1
}
#body .bg-opacity-50 {
--tw-bg-opacity: 0.5
}
#body .bg-opacity-85 {
--tw-bg-opacity: .85
}
#body .bg-contain {
background-size: contain
}
#body .bg-center {
background-position: center
}
#body .bg-no-repeat {
background-repeat: no-repeat
}
#body .object-cover {
-o-object-fit: cover;
object-fit: cover
}
#body .object-center {
-o-object-position: center;
object-position: center
}
#body .object-top {
-o-object-position: top;
object-position: top
}
#body .p-r0\.8 {
padding: .8rem
}
#body .p-0 {
padding: 0px
}
#body .p-16 {
padding: 4rem
}
#body .p-4 {
padding: 1rem
}
#body .p-r2\.4 {
padding: 2.4rem
}
#body .p-\[8px\] {
padding: 8px
}
#body .p-r1\.2 {
padding: 1.2rem
}
#body .p-\[24px\] {
padding: 24px
}
#body .p-\[22px\] {
padding: 22px
}
#body .p-r1\.6 {
padding: 1.6rem
}
#body .p-\[4px\] {
padding: 4px
}
#body .p-\[16px\] {
padding: 16px
}
#body .p-\[2px\] {
padding: 2px
}
#body .p-r1\.0 {
padding: 1.0rem
}
#body .p-r1\.1 {
padding: 1.1rem
}
#body .p-r1\.4 {
padding: 1.4rem
}
#body .p-2 {
padding: 0.5rem
}
#body .p-1 {
padding: 0.25rem
}
#body .px-r1\.6 {
padding-left: 1.6rem;
padding-right: 1.6rem
}
#body .py-r1\.8 {
padding-top: 1.8rem;
padding-bottom: 1.8rem
}
#body .py-r0\.6 {
padding-top: .6rem;
padding-bottom: .6rem
}
#body .py-0 {
padding-top: 0px;
padding-bottom: 0px
}
#body .px-4 {
padding-left: 1rem;
padding-right: 1rem
}
#body .px-0 {
padding-left: 0px;
padding-right: 0px
}
#body .py-r0\.4 {
padding-top: .4rem;
padding-bottom: .4rem
}
#body .px-r2\.4 {
padding-left: 2.4rem;
padding-right: 2.4rem
}
#body .py-r1\.6 {
padding-top: 1.6rem;
padding-bottom: 1.6rem
}
#body .px-\[24px\] {
padding-left: 24px;
padding-right: 24px
}
#body .py-16 {
padding-top: 4rem;
padding-bottom: 4rem
}
#body .px-r0\.8 {
padding-left: .8rem;
padding-right: .8rem
}
#body .py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem
}
#body .py-\[16px\] {
padding-top: 16px;
padding-bottom: 16px
}
#body .py-r1\.2 {
padding-top: 1.2rem;
padding-bottom: 1.2rem
}
#body .py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem
}
#body .py-\[13px\] {
padding-top: 13px;
padding-bottom: 13px
}
#body .py-\[2px\] {
padding-top: 2px;
padding-bottom: 2px
}
#body .px-r1\.0 {
padding-left: 1.0rem;
padding-right: 1.0rem
}
#body .py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
#body .py-r0\.8 {
padding-top: .8rem;
padding-bottom: .8rem
}
#body .py-r1\.0 {
padding-top: 1.0rem;
padding-bottom: 1.0rem
}
#body .px-\[16px\] {
padding-left: 16px;
padding-right: 16px
}
#body .py-\[12px\] {
padding-top: 12px;
padding-bottom: 12px
}
#body .py-\[4px\] {
padding-top: 4px;
padding-bottom: 4px
}
#body .px-7 {
padding-left: 1.75rem;
padding-right: 1.75rem
}
#body .px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem
}
#body .pt-\[8px\] {
padding-top: 8px
}
#body .pr-r1\.6 {
padding-right: 1.6rem
}
#body .pb-0 {
padding-bottom: 0px
}
#body .pb-\[24px\] {
padding-bottom: 24px
}
#body .pb-r8 {
padding-bottom: 8.0rem
}
#body .pl-\[32px\] {
padding-left: 32px
}
#body .pt-\[16px\] {
padding-top: 16px
}
#body .pr-\[24px\] {
padding-right: 24px
}
#body .pl-r1\.6 {
padding-left: 1.6rem
}
#body .pt-\[80px\] {
padding-top: 80px
}
#body .pb-\[120px\] {
padding-bottom: 120px
}
#body .pl-8 {
padding-left: 2rem
}
#body .pb-6 {
padding-bottom: 1.5rem
}
#body .pt-r0\.2 {
padding-top: .2rem
}
#body .pt-0 {
padding-top: 0px
}
#body .pl-\[2\.5px\] {
padding-left: 2.5px
}
#body .pr-\[1\.5px\] {
padding-right: 1.5px
}
#body .pb-16 {
padding-bottom: 4rem
}
#body .pr-2 {
padding-right: 0.5rem
}
#body .pt-2 {
padding-top: 0.5rem
}
#body .pl-r2\.4 {
padding-left: 2.4rem
}
#body .pb-r2\.4 {
padding-bottom: 2.4rem
}
#body .pb-\[96px\] {
padding-bottom: 96px
}
#body .pb-r0\.8 {
padding-bottom: .8rem
}
#body .pt-r0\.8 {
padding-top: .8rem
}
#body .pt-r5\.6 {
padding-top: 5.6rem
}
#body .pb-8 {
padding-bottom: 2rem
}
#body .pt-8 {
padding-top: 2rem
}
#body .pl-0 {
padding-left: 0px
}
#body .pb-r1\.6 {
padding-bottom: 1.6rem
}
#body .pt-r2\.4 {
padding-top: 2.4rem
}
#body .text-left {
text-align: left
}
#body .text-center {
text-align: center
}
#body .text-right {
text-align: right
}
#body .align-top {
vertical-align: top
}
#body .align-middle {
vertical-align: middle
}
#body .font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}
#body .text-xs {
font-size: 1.2rem;
line-height: 1.6rem
}
#body .text-r1\.4 {
font-size: 1.4rem
}
#body .text-base {
font-size: 1.6rem;
line-height: 2.4rem
}
#body .text-\[32px\] {
font-size: 32px
}
#body .text-sm {
font-size: 1.4rem;
line-height: 2.0rem
}
#body .text-2xl {
font-size: 2.4rem;
line-height: 3.2rem
}
#body .text-r2\.0 {
font-size: 2.0rem
}
#body .text-\[16px\] {
font-size: 16px
}
#body .text-lg {
font-size: 1.8rem;
line-height: 2.8rem
}
#body .text-xl {
font-size: 2.0rem;
line-height: 2.8rem
}
#body .text-r1\.5 {
font-size: 1.5rem;
line-height: 2.25rem
}
#body .text-\[12px\] {
font-size: 12px
}
#body .text-\[30px\] {
font-size: 30px
}
#body .text-\[22px\] {
font-size: 22px
}
#body .text-\[10px\] {
font-size: 10px
}
#body .text-r2\.8 {
font-size: 2.8rem
}
#body .text-r1\.1 {
font-size: 1.1rem;
line-height: 1.57rem
}
#body .text-\[24px\] {
font-size: 24px
}
#body .text-\[11px\] {
font-size: 11px
}
#body .text-\[18px\] {
font-size: 18px
}
#body .text-\[1\.6rem\] {
font-size: 1.6rem
}
#body .text-4xl {
font-size: 3.6rem;
line-height: 4.0rem
}
#body .font-semibold {
font-weight: 600
}
#body .font-normal {
font-weight: 400
}
#body .font-medium {
font-weight: 500
}
#body .font-bold {
font-weight: 700
}
#body .font-light {
font-weight: 300
}
#body .italic {
font-style: italic
}
#body .leading-r1\.75 {
line-height: 1.75rem
}
#body .leading-r2\.8 {
line-height: 2.8rem
}
#body .leading-\[normal\] {
line-height: normal
}
#body .leading-r2\.2 {
line-height: 2.2rem
}
#body .leading-\[55px\] {
line-height: 55px
}
#body .leading-\[22px\] {
line-height: 22px
}
#body .leading-\[23px\] {
line-height: 23px
}
#body .leading-none {
line-height: 1
}
#body .leading-4 {
line-height: 1rem
}
#body .leading-\[47px\] {
line-height: 47px
}
#body .leading-\[24px\] {
line-height: 24px
}
#body .leading-r1\.1 {
line-height: 1.1rem
}
#body .leading-tight {
line-height: 1.25
}
#body .leading-\[30px\] {
line-height: 30px
}
#body .leading-\[48px\] {
line-height: 48px
}
#body .text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity))
}
#body .text-text-secondary {
color: var(--transparent-60)
}
#body .text-text-keycolor {
color: var(--accent-key-color)
}
#body .text-text-default {
color: var(--transparent-87)
}
#body .text-inherit {
color: inherit
}
#body .text-black\/45 {
color: rgb(0 0 0 / .45)
}
#body .text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity))
}
#body .text-\[\#FAAD14\] {
--tw-text-opacity: 1;
color: rgb(250 173 20 / var(--tw-text-opacity))
}
#body .text-system-warning {
color: var(--general-yellow)
}
#body .text-slate-500 {
--tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity))
}
#body .text-subtitle {
color: rgba(0, 0, 0, 0.45)
}
#body .text-text-danger {
color: var(--brand-sn-red)
}
#body .text-system-danger {
color: var(--brand-sn-red)
}
#body .text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity))
}
#body .text-\[\#1a1a1a\]\/50 {
color: rgb(26 26 26 / 0.5)
}
#body .\!text-text-keycolor {
color: var(--accent-key-color) !important
}
#body .text-text-white {
color: var(--grey-0)
}
#body .text-black\/38 {
color: rgb(0 0 0 / .38)
}
#body .text-\[\#8C8C8C\] {
--tw-text-opacity: 1;
color: rgb(140 140 140 / var(--tw-text-opacity))
}
#body .text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}
#body .text-red-required {
--tw-text-opacity: 1;
color: rgb(255 77 79 / var(--tw-text-opacity))
}
#body .text-neutral-300 {
--tw-text-opacity: 1;
color: rgb(212 212 212 / var(--tw-text-opacity))
}
#body .text-brand-red {
--tw-text-opacity: 1;
color: rgb(253 71 73 / var(--tw-text-opacity))
}
#body .text-sky-400 {
--tw-text-opacity: 1;
color: rgb(56 189 248 / var(--tw-text-opacity))
}
#body .text-\[\#337ab7\] {
--tw-text-opacity: 1;
color: rgb(51 122 183 / var(--tw-text-opacity))
}
#body .text-\[\#878787\] {
--tw-text-opacity: 1;
color: rgb(135 135 135 / var(--tw-text-opacity))
}
#body .text-\[\#91D5FF\] {
--tw-text-opacity: 1;
color: rgb(145 213 255 / var(--tw-text-opacity))
}
#body .text-red-500 {
--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity))
}
#body .text-\[var\(--accent-key-color\)\] {
color: var(--accent-key-color)
}
#body .text-system-success {
color: var(--general-green)
}
#body .text-\[\#bbbbbb\] {
--tw-text-opacity: 1;
color: rgb(187 187 187 / var(--tw-text-opacity))
}
#body .text-text-disabled {
color: var(--transparent-20)
}
#body .text-system-validating {
color: var(--accent-key-color)
}
#body .text-opacity-45 {
--tw-text-opacity: .45
}
#body .underline {
text-decoration-line: underline
}
#body .no-underline {
text-decoration-line: none
}
#body .opacity-0 {
opacity: 0
}
#body .opacity-25 {
opacity: 0.25
}
#body .opacity-\[0\.87\] {
opacity: 0.87
}
#body .opacity-40 {
opacity: 0.4
}
#body .shadow-none {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
#body .shadow-\[0px_4px_16px_2px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
--tw-shadow: 0px 4px 16px 2px rgba(0,0,0,0.10);
--tw-shadow-colored: 0px 4px 16px 2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
#body .shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
#body .outline {
outline-style: solid
}
#body .blur {
--tw-blur: blur(8px);
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)
}
#body .filter {
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)
}
#body .transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
#body .transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
#body .transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
}
#body .duration-200 {
transition-duration: 200ms
}
#body .duration-300 {
transition-duration: 300ms
}
.\!\[position\:relative\] {
position: relative !important
}
.\[width\:100\%\] {
width: 100%
}
#body .first-of-type\:border-t-0:first-of-type {
border-top-width: 0px
}
#body .last-of-type\:mb-0:last-of-type {
margin-bottom: 0px
}
#body .hover\:border-surface-keycolor:hover {
border-color: var(--accent-key-color)
}
#body .hover\:border-system-danger:hover {
border-color: var(--brand-sn-red)
}
#body .hover\:bg-surface-hover:hover {
background-color: var(--transparent-10)
}
#body .hover\:bg-opaque-hover-bg-color:hover {
background-color: var(--opaque-hover-bg-color)
}
#body .hover\:\!bg-transparent:hover {
background-color: transparent !important
}
#body .hover\:bg-surface-active:hover {
background-color: var(--accent-key-color-15)
}
#body .hover\:bg-\[\#f0f0f0\]:hover {
--tw-bg-opacity: 1;
background-color: rgb(240 240 240 / var(--tw-bg-opacity))
}
#body .hover\:text-text-keycolor:hover {
color: var(--accent-key-color)
}
#body .hover\:text-text-danger:hover {
color: var(--brand-sn-red)
}
#body .group:hover .group-hover\:opacity-100 {
opacity: 1
}
#body .group:hover .group-hover\:opacity-45 {
opacity: .45
}
#body .group.ant-table-cell-row-hover .group-\[\&\.ant-table-cell-row-hover\]\:max-h-\[24px\] {
max-height: 24px
}
@media (min-width: 1200px) {
#body .laptop\:mb-0 {
margin-bottom: 0px
}
#body .laptop\:w-\[65\.6\%\] {
width: 65.6%
}
#body .laptop\:w-\[34\.4\%\] {
width: 34.4%
}
#body .laptop\:max-w-\[355\.26px\] {
max-width: 355.26px
}
#body .laptop\:max-w-\[186px\] {
max-width: 186px
}
#body .laptop\:flex-nowrap {
flex-wrap: nowrap
}
}
@media (min-width: 1280px) {
#body .xl\:mt-\[20px\] {
margin-top: 20px
}
#body .xl\:block {
display: block
}
#body .xl\:h-\[140px\] {
height: 140px
}
#body .xl\:w-\[140px\] {
width: 140px
}
#body .xl\:min-w-\[140px\] {
min-width: 140px
}
}
.\[\&\~section\:first-of-type\]\:\[margin-top\:16px\]~section:first-of-type {
margin-top: 16px
}
.\[\&\~section\:last-of-type\]\:\[margin-bottom\:16px\]~section:last-of-type {
margin-bottom: 16px
}
#body .\[\&\>div\]\:mb-r0\.8>div {
margin-bottom: .8rem
}
#body .\[\&\>div\:last-child\]\:mb-r2\.4>div:last-child {
margin-bottom: 2.4rem
}
#body .\[\&_\.ant-alert\]\:mb-0 .ant-alert {
margin-bottom: 0px
}
#body .\[\&\>span\>strong\]\:text-text-default>span>strong {
color: var(--transparent-87)
}
#body .\[\&\>\.ant-alert\]\:mb-r0\.8>.ant-alert {
margin-bottom: .8rem
}
#body .\[\&\>\.ant-alert\:last-child\]\:mb-r1\.6>.ant-alert:last-child {
margin-bottom: 1.6rem
}
#body .\[\&\>td\]\:py-r1\.6>td {
padding-top: 1.6rem;
padding-bottom: 1.6rem
}
#body .\[\&_\*\]\:max-w-none * {
max-width: none
}
/* Global reset */
html {
color: var(--text-default);
font-size: 0.625rem;
}
#root {
height: 100%;
}
/* Modify .ant-component when theme is not supported */
:root {
--text-hover: black 10%;
--control-height: 48px;
--opaque-hover-bg-color: color-mix(
in srgb,
var(--surface-hover),
var(--surface-default)
);
}
/* Menu -------------------------------------------- */
.ant-menu-item {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ant-menu-horizontal .ant-menu-overflow-item + .ant-menu-overflow-item {
margin-left: 16px;
}
.ant-menu-horizontal .ant-menu-item,
.ant-menu-horizontal .ant-menu-submenu {
font-weight: 600;
}
.ant-menu-horizontal .ant-menu-title-content {
display: inline-flex;
}
.ant-menu-horizontal .ant-menu-submenu-title,
.ant-menu-horizontal .ant-menu-item-only-child {
padding-left: 2rem;
padding-right: 2rem;
}
.ant-menu-horizontal .ant-menu-submenu-arrow {
display: inline-block;
position: relative;
inset-inline-end: 0;
margin-left: 1rem;
transform: rotate(90deg);
top: -4px;
}
.ant-menu-vertical .ant-menu-title-content {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.ant-menu-submenu .ant-menu-item-selected {
font-weight: 600;
}
/*
* antd disabled prop only block the click event, the link is still clickable
* disable the link by pointer-events
*/
.ant-menu-submenu .ant-menu-item-disabled a {
pointer-events: none;
}
/* Select -------------------------------------------- */
.ant-select {
caret-color: var(--surface-keycolor);
}
.ant-select > .ant-select-selector {
padding-left: 16px !important;
padding-right: 16px !important;
}
.ant-select > .ant-select-selector .ant-select-selection-item {
height: 24px;
line-height: 22px;
}
.ant-select.ant-select-multiple .ant-select-selection-placeholder {
inset-inline-start: 16px;
inset-inline-end: 16px;
padding-inline-end: 18px;
}
.ant-select > .ant-select-arrow {
inset-inline-end: 16px;
}
.ant-select-focused > .ant-select-selector {
border-color: var(--accent-key-color) !important;
}
/* Set Select hover bg color, unless focused */
:not(.ant-select-focused) > .ant-select-selector:hover {
background-color: var(--opaque-hover-bg-color) !important;
}
/* Select arrow */
.ant-select .ant-select-arrow .anticon-down {
/* Replace by custom svg */
display: block;
position: relative;
}
.ant-select .ant-select-arrow .anticon-down:before {
top: -8px;
right: 0;
content: "";
display: block;
position: absolute;
width: 16px;
height: 16px;
background: url('data:image/svg+xml,');
}
.ant-select .ant-select-arrow .anticon-down > svg {
display: none;
}
.ant-select-dropdown .ant-select-item-group {
font-weight: 500;
}
/* Input -------------------------------------------- */
.ant-form-item-control-input-content > * {
width: 100%;
max-width: 500px;
}
.no-max-width * {
max-width: none !important;
}
.ant-input,
.ant-input-number-input,
.ant-picker-input {
caret-color: var(--surface-keycolor);
background-color: transparent;
}
/* Set input hover bg color, unless focused */
:not(.ant-input-affix-wrapper-focused).ant-input-affix-wrapper:hover,
:not(.ant-input-affix-wrapper) > .ant-input:hover:not(:focus),
:not(.ant-input-number-focused).ant-input-number:hover {
background-color: var(--opaque-hover-bg-color) !important;
}
.ant-input-group-wrapper-disabled .ant-input-affix-wrapper:hover {
background-color: var(--surface-disabled);
}
.ant-input-affix-wrapper-focused,
.ant-input-number-focused,
:not(.ant-input-affix-wrapper) > .ant-input:focus {
border-color: var(--surface-keycolor) !important;
}
/* Input with prefix */
.ant-input-affix-wrapper-focused > .ant-input-prefix {
color: var(--text-disabled);
transition: linear 100ms;
}
.ant-input-prefix {
/* transition from focused to normal */
transition: linear 100ms;
margin-right: 8px !important;
}
/* custom style for InputNumber + addonBefore */
.ant-input-number-group > .ant-input-number-group-addon {
background-color: transparent;
border: 0;
position: absolute;
top: 0;
left: 11px;
z-index: 10;
padding: 0;
height: 100%;
display: flex;
align-items: center;
}
.ant-input-number-group > .ant-input-number-group-addon + .ant-input-number {
padding-left: 22px;
border-radius: 8px;
}
.ant-input-number-group > .ant-input-number-group-addon:has(+ .ant-input-number-focused) {
color: var(--text-disabled);
}
/* Tabs -------------------------------------------- */
.ant-tabs > .ant-tabs-nav .ant-tabs-nav-list {
width: 100%;
}
.ant-tabs .ant-tabs-content-holder {
background: white;
}
.ant-tabs-card.ant-tabs-top > .ant-tabs-nav {
padding: 0 24px;
}
.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab {
width: 100%;
max-width: 458px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
color: var(--text-secondary);
}
.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
background-color: var(--surface-stroke);
}
/* Button -------------------------------------------- */
.ant-btn:not(.ant-btn-sm) {
padding: 14px 16px;
line-height: 1.25;
/* Token controlHeight doesn't work for Modal.confirm buttons */
height: var(--control-height);
}
/* disable click effect */
.ant-btn .ant-wave {
display: none;
}
/*
* overwrite text color in `type:text`,
* can't update the Token(colorText) because it's also used in `type:default`
*/
.ant-btn-text {
color: var(--text-keycolor);
}
/*
* overwrite disabled bg-color in `type:default`
* can't update the Token(colorBgContainerDisabled) because it's also used in `type:primary`
*/
.ant-btn-default:disabled {
background-color: var(--surface-disabled);
}
/*
* overwrite border-color in `type:default+dangerous`
* can't update the Token(colorError) because it's also used as text-color
*/
.ant-btn-dangerous.ant-btn-default {
border-color: var(--surface-stroke);
}
/*
* for `type:primary,default,text`, customize hover background-color
* ant-btn__hover is for previous the hovering style in storybook
*/
.ant-btn__hover:not(.ant-btn-link),
.ant-btn:not(.ant-btn-link):hover {
/* blend original bg-color with var(--surface-hover) */
background-blend-mode: multiply;
background-image: linear-gradient(
0deg,
var(--surface-hover),
var(--surface-hover)
);
}
/* keep original color when hovering */
.ant-btn__hover:not(.ant-btn-link).ant-btn-default:not(:disabled), .ant-btn:not(.ant-btn-link):hover.ant-btn-default:not(:disabled) {
color: var(--text-default);
border-color: var(--surface-stroke);
}
.ant-btn__hover:not(.ant-btn-link).ant-btn-text:not(:disabled), .ant-btn:not(.ant-btn-link):hover.ant-btn-text:not(:disabled) {
color: var(--text-keycolor);
border-color: transparent;
background-color: transparent;
}
.ant-btn__hover:not(.ant-btn-link).ant-btn-primary.ant-btn-dangerous:not(:disabled), .ant-btn:not(.ant-btn-link):hover.ant-btn-primary.ant-btn-dangerous:not(:disabled) {
background-color: var(--system-danger);
}
.ant-btn__hover:not(.ant-btn-link).ant-btn-text.ant-btn-dangerous:not(:disabled),
.ant-btn__hover:not(.ant-btn-link).ant-btn-default.ant-btn-dangerous:not(:disabled),
.ant-btn:not(.ant-btn-link):hover.ant-btn-text.ant-btn-dangerous:not(:disabled),
.ant-btn:not(.ant-btn-link):hover.ant-btn-default.ant-btn-dangerous:not(:disabled) {
color: var(--system-danger);
}
/*
* for `type:link`, customize hover text-color
* ant-btn__hover is for previous the hovering style in storybook
*/
.ant-btn-link.ant-btn__hover:disabled, .ant-btn-link:hover:disabled {
color: color-mix(in srgb, var(--text-hover), var(--text-disabled));
}
.ant-btn-link.ant-btn__hover:not(:disabled):not(.ant-btn-disabled), .ant-btn-link:hover:not(:disabled):not(.ant-btn-disabled) {
color: color-mix(in srgb, var(--text-hover), var(--text-keycolor));
}
.ant-btn-link.ant-btn__hover:not(:disabled):not(.ant-btn-disabled).ant-btn-dangerous, .ant-btn-link:hover:not(:disabled):not(.ant-btn-disabled).ant-btn-dangerous {
color: color-mix(in srgb, var(--text-hover), var(--system-danger));
}
/* HyperLink -------------------------------------------- */
a {
color: var(--text-keycolor);
}
a:hover,
a:active {
color: color-mix(in srgb, var(--text-hover), var(--text-keycolor));
}
/* Dropdown -------------------------------------------- */
.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title {
display: flex;
align-items: center;
padding-inline-end: 12px !important;
}
.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-expand-icon,
.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-arrow {
position: static !important;
}
.ant-dropdown .ant-dropdown-menu-submenu .anticon-right {
/* Replace by custom svg */
position: relative;
width: 10px;
}
.ant-dropdown .ant-dropdown-menu-submenu .anticon-right:before {
transform: rotate(-90deg);
top: -14px;
left: 2px;
content: "";
display: block;
position: absolute;
width: 16px;
height: 16px;
background: url('data:image/svg+xml,');
}
.ant-dropdown .ant-dropdown-menu-submenu .anticon-right > svg {
display: none;
}
.ant-dropdown-menu .ant-dropdown-menu-submenu-title {
min-height: 48px;
}
.ant-dropdown-menu .ant-dropdown-menu-item,
.ant-dropdown-menu .ant-dropdown-menu-submenu {
margin-top: 4px !important;
min-height: 48px;
}
.ant-dropdown-menu .ant-dropdown-menu-item:first-of-type, .ant-dropdown-menu .ant-dropdown-menu-submenu:first-of-type {
margin-top: 0 !important;
}
.ant-dropdown-menu .ant-dropdown-menu-item-selected {
font-weight: 600 !important;
}
/* Checkbox -------------------------------------------- */
.ant-checkbox-wrapper {
padding: 15px 8px;
border-radius: 8px;
}
.ant-checkbox-wrapper:hover {
background-color: var(--opaque-hover-bg-color);
}
.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled)
> .ant-checkbox-checked:not(.ant-checkbox-disabled)
> .ant-checkbox-inner {
background-color: var(--accent-key-color) !important;
border-color: var(--accent-key-color) !important;
}
/* Radio -------------------------------------------- */
.ant-radio-wrapper {
padding: 15px 8px;
border-radius: 8px;
}
.ant-radio-wrapper:hover {
background-color: var(--opaque-hover-bg-color);
}
/* Table -------------------------------------------- */
/* show the action buttons when hovering the table row */
.ant-table-cell .showWhenRowHover {
display: none;
}
.ant-table-cell.ant-table-cell-row-hover .showWhenRowHover {
display: flex;
}
.ant-table-cell.ant-table-cell-row-hover .hideWhenRowHover {
display: none;
}
.ant-table-cell .visibleWhenRowHover {
visibility: hidden;
}
.ant-table-cell.ant-table-cell-row-hover .visibleWhenRowHover {
visibility: visible;
}
.ant-table-cell.ant-table-cell-row-hover .invisibleWhenRowHover {
visibility: hidden;
}
.ant-table-tbody > tr > td.ant-table-cell {
padding: 6px 16px;
}
.ant-table-selection-column .ant-checkbox-wrapper {
padding: 0;
}
.ant-table-selection-column .ant-checkbox-wrapper:hover {
background-color: transparent;
}
/* Date-Picker, Date-Range-Picker -------------------------------------------- */
.ant-picker {
padding: 0 36px;
width: 164px;
min-width: 164px;
}
.ant-picker.ant-picker-range {
width: 284px;
min-width: 284px;
}
.ant-picker > .ant-picker-input {
height: 48px;
padding: 0 4px;
border-radius: 8px;
}
.ant-picker > .ant-picker-input > input {
text-align: center;
height: 100%;
}
/* insert the prefix, suffix icon */
.ant-picker:before {
content: "";
position: absolute;
top: 16px;
left: 16px;
width: 16px;
height: 16px;
background: url('data:image/svg+xml,');
}
.ant-picker.time-picker:before {
background: url('data:image/svg+xml,');
}
/* show dropdown arrow only when not hovered, so it doesn't overlap the clear button */
.ant-picker:not(:hover):after {
content: "";
position: absolute;
top: 16px;
right: 16px;
width: 16px;
height: 16px;
background: url('data:image/svg+xml,');
}
/* custom hover style */
.ant-picker:not(.ant-picker-focused):hover {
background-color: var(--opaque-hover-bg-color);
}
.ant-picker.ant-picker-range:hover:not(.ant-picker-disabled) {
background-color: var(--surface-default);
}
.ant-picker.ant-picker-range:not(.ant-picker-focused) > .ant-picker-input:hover,
.ant-picker.ant-picker-range.ant-picker-focused
> .ant-picker-input:not(.ant-picker-input-active):hover {
background-color: var(--opaque-hover-bg-color);
}
/* custom active style */
.ant-picker.ant-picker-focused:not(.ant-picker-range) {
border-color: var(--surface-keycolor);
}
.ant-picker.ant-picker-focused:not(.ant-picker-range):before {
background: url('data:image/svg+xml,');
}
.ant-picker.ant-picker-focused:not(.ant-picker-range).time-picker:before {
background: url('data:image/svg+xml,');
}
.ant-picker.ant-picker-range.ant-picker-focused > .ant-picker-input-active {
box-shadow: 0 0 0 1px var(--surface-keycolor);
}
.ant-picker .ant-picker-active-bar {
display: none;
}
/* adjust clear btn style and position */
.ant-picker:hover .ant-picker-clear {
opacity: 1;
}
.ant-picker .ant-picker-clear {
border-radius: 50%;
right: -20px;
/* overlay the suffix icon*/
z-index: 1;
}
.ant-picker.ant-picker-range .ant-picker-clear {
right: 16px;
}
/* disabled style */
.ant-picker.ant-picker-disabled {
opacity: 0.4;
}
.ant-picker.ant-picker-disabled > .ant-picker-input > input {
color: var(--text-default);
}
/* pagination ------------------------------------------------ */
.ant-pagination .ant-pagination-options .ant-pagination-options-size-changer {
height: 32px;
}
.ant-pagination .ant-pagination-options .ant-select-selection-item {
line-height: normal;
}
.ant-pagination .ant-select:hover .ant-select-arrow:not(:last-child) {
opacity: 1;
}
/*Image Preview -------------------------------------------------------------- */
.ant-image-preview-operations,
.ant-image-preview-close,
.ant-image-preview-switch-left,
.ant-image-preview-switch-right {
background-color: var(--transparent-60);
}
/* Style ui/Tooltip tooltip content */
.tippy-content {
word-wrap: break-word;
}
/* Ant design popover */
.ant-popover-inner {
padding: 24px !important;
}
:root {
--sn-navbar-height: 80px;
}
.sn-navbar {
position: relative;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
align-items: center;
border-width: 0px;
padding-left: 24px;
padding-right: 24px;
height: var(--sn-navbar-height);
min-height: 80px;
}
.sn-navbar::after {
position: absolute;
left: 0px;
bottom: 0px;
display: block;
width: 100%;
height: 2px;
content: "";
background: linear-gradient(
to right,
var(--brand-sn-red) 0%,
var(--brand-sn-red) 25%,
var(--brand-sn-orange) 25%,
var(--brand-sn-orange) 50%,
var(--brand-sn-green) 50%,
var(--brand-sn-green) 75%,
var(--brand-sn-blue) 75%,
var(--brand-sn-blue) 100%
);
}
._modal_1kghg_1 .ant-modal-content {
padding: 0;
}
._modal_1kghg_1 .ant-modal-header {
padding: 16px 24px;
border-bottom: 1px solid #e8e8e8;
margin-bottom: 0;
}
._modal_1kghg_1 .ant-modal-body {
padding: 24px;
}
._modal_1kghg_1 .ant-modal-footer {
padding: 16px 24px;
border-top: 1px solid #e8e8e8;
}
._dropdownSelected_q8x29_1 {
color: var(--text-keycolor) !important;
}
._dropdownSelected_q8x29_1 > span:first-of-type svg {
fill: var(--text-keycolor) !important;
}
._buttonDropdown_q8x29_11.ant-dropdown-open {
border-color: var(--surface-keycolor) !important;
color: var(--text-disabled) !important;
}
/* prefix icon */
._buttonDropdown_q8x29_11.ant-dropdown-open > span:first-of-type > span > svg {
fill: var(--text-disabled) !important;
}
._buttonDropdown_q8x29_11.ant-dropdown-open:hover {
background-color: var(--surface-default) !important;
background-image: none !important;
}
._buttonDropdown_q8x29_11:disabled {
color: var(--text-disabled) !important;
background: var(--grey-100);
}
._buttonDropdown_q8x29_11:disabled svg {
fill: var(--text-disabled) !important;
}
/* align the Icon with first line */
._alert_zabij_2 {
margin-bottom: 2.4rem;
align-items: flex-start;
padding-left: 1.6rem;
padding-right: 1.6rem;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
}
._alert_zabij_2 > span > svg {
margin-top: 3px;
}
._alert_zabij_2 .ant-alert-icon {
font-size: 16px;
}
._alert_zabij_2 .ant-alert-close-icon {
margin-top: 4px;
}
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}/* override / enhance
https://www.b-story.co.jp/stande/core/stande-1.0.7.css */
.business-name-input .StandeStyle-view {
border-radius: 8px;
border-color: var(--surface-stroke);
top: 50px !important;
left: 0 !important;
width: auto !important;
right: 0 !important;
}
.business-name-input .StandeStyle-topBox {
padding: 8px;
}
.business-name-input .StandeStyle-closeButton {
width: 20px;
cursor: pointer;
}
.business-name-input .StandeStyle-companyItem {
cursor: pointer;
border: none;
border-radius: 8px;
margin: 4px !important;
padding: 8px 12px;
}
.business-name-input .StandeStyle-companyItem:hover {
background-color: var(--surface-hover);
}