:root {
    --toastify-color-light: var(--czl-main) !important;
    --toastify-color-dark: var(--czl-main-dark) !important;
    --toastify-color-info: var(--czl-info-color) !important;
    --toastify-color-success: var(--czl-success-color) !important;
    --toastify-color-warning: var(--czl-warning-color) !important;
    --toastify-color-error: var(--czl-error-color) !important;
    --toastify-icon-color-info: var(--czl-info-color) !important;
    --toastify-icon-color-success: var(--czl-success-color) !important;
    --toastify-icon-color-warning: var(--czl-warning-color) !important;
    --toastify-icon-color-error: var(--czl-error-color) !important;
    --toastify-toast-background: var(--czl-main) !important;
    --toastify-text-color-light: var(--czl-seat) !important;
    --toastify-text-color-dark: var(--czl-grayD) !important;
    --toastify-text-color-info: var(--czl-info-color) !important;
    --toastify-text-color-success: var(--czl-success-color) !important;
    --toastify-text-color-warning: var(--czl-warning-color) !important;
    --toastify-text-color-error: var(--czl-error-color) !important;
    --toastify-spinner-color: var(--czl-seat) !important;
    --toastify-spinner-color-empty-area: var(--czl-minor) !important;
    --toastify-color-progress-light: linear-gradient(to right, var(--czl-success-color), var(--czl-primary-color-hover), var(--czl-primary-color), var(--czl-primary-color-suppl), var(--czl-chat-bg-color), var(--czl-error-color)) !important;
    --toastify-color-progress-dark: var(--czl-primary-color-dark) !important;
    --toastify-color-progress-info: var(--czl-info-color) !important;
    --toastify-color-progress-success: var(--czl-success-color) !important;
    --toastify-color-progress-warning: var(--czl-warning-color) !important;
    --toastify-color-progress-error: var(--czl-error-color) !important;


    /* Light Mode Colors */
    --czl-primary-color: #2EA7E0;
    --czl-primary-color-hover: #58c3ed;
    --czl-primary-color-pressed: #1e83ba;
    --czl-primary-color-suppl: #58c3ed;
    --czl-chat-bg-color: #84ddfa;
    --czl-success-color: #22BB33;
    --czl-error-color: #FF3333;
    --czl-warning-color: #FFAA00;
    --czl-info-color: #3366FF;
    --czl-link-color: #0645AD;
    --czl-main: #f5f5f7;
    --czl-routine: #DCDFE6;
    --czl-minor: #C0C4CC;
    --czl-seat: #666;
    --czl-grayA: #515253;
    --czl-grayB: #454545;
    --czl-grayC: #414243;
    --czl-grayD: #303030;

    /* Dark Mode Colors */
    --czl-primary-color-dark: #84ddfa;
    --czl-primary-color-hover-dark: #b0eeff;
    --czl-primary-color-pressed-dark: #58c3ed;
    --czl-primary-color-suppl-dark: #b0eeff;
    --czl-chat-bg-color-dark: #d9f8ff;
    --czl-success-color-dark: #22BB33;
    --czl-error-color-dark: #FF3333;
    --czl-warning-color-dark: #FFAA00;
    --czl-info-color-dark: #3366FF;
    --czl-link-color-dark: #0645AD;
    --czl-main-dark: #181818;
}

@font-face {
    font-family: 'CZL';
    src: url('https://cdn-r2.czl.net/fonts/CZL/CZL_Sans_SC_Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CZL';
    src: url('https://cdn-r2.czl.net/fonts/CZL/CZL_Sans_SC_gray.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CZL';
    src: url('https://cdn-r2.czl.net/fonts/CZL/CZL_Sans_SC_Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CZL';
    src: url('https://cdn-r2.czl.net/fonts/CZL/CZL_Sans_SC_Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CZL';
    src: url('https://cdn-r2.czl.net/fonts/CZL/CZL_Sans_SC_Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CZL';
    src: url('https://cdn-r2.czl.net/fonts/CZL/CZL_Sans_SC_Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    padding-top: 55px;
    overflow-y: scroll;
    font-family: "CZL", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: none;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
input,
div,
label,
pre,
select,
option,
textarea,
th,
td,
li,
em,
strong,
cite,
q,
dfn,
abbr,
time,
var,
samp,
kbd,
sub,
sup,
i,
b,
u,
mark,
ruby,
rt,
rp,
bdi,
bdo,
s,
small,
del,
ins,
caption,
figure,
figcaption,
main,
nav,
article,
section,
header,
footer,
aside,
details,
summary，code {
    font-family: "CZL", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

button {
    font-family: "CZL", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif !important;
}

body::-webkit-scrollbar {
    display: none;
}

code {
    font-family: "CZL",source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.main-content {
    padding: 4px;
}

.small-icon .icon {
    font-size: 1em !important;
}

.custom-footer {
    font-size: 1.1em;
}

@media only screen and (max-width: 600px) {
    .hide-on-mobile {
        display: none !important;
    }
}

@media only screen and (min-width: 1200px) {
   .ui.container {
        width: 1200px !important;
    }
}