@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");

:root {
    --navbar-height: 50px;
    /* color */
    --white: 255 255 255;
    --black: 0 0 0;
    --link: 0 87 255;
    --input-disabled: 122 132 146;
    /* surface */
    --surface-50: 245 244 242;
    --surface-100: 235 235 235;
    --surface-200: 224 224 224;
    --surface-300: 188 196 205;
    --surface-400: 171 171 171;
    --surface-500: 129 138 155;
    --surface-600: 118 118 118;
    --surface-700: 76 98 121;
    --surface-800: 46 46 46;
    --surface-900: 22 22 22;
    /* chart */
    --chart-color-1: 68 186 171;
    --chart-color-2: 52 133 225;
    --chart-color-3: 255 203 70;
    --chart-color-4: 134 97 237;
    --chart-color-5: 240 129 31;
    --chart-color-6: 236 91 86;
    --chart-color-7: 169 208 213;
    --chart-color-8: 57 86 129;
    --chart-color-9: 55 124 112;
    /* success */
    --success-400: 2 217 10;
    --success-500: 5 186 55;
    --success-600: 17 154 88;
    /* danger */
    --danger-100: 255 209 209;
    --danger-200: 255 193 193;
    --danger-300: 255 173 173;
    --danger-400: 255 68 68;
    --danger-500: 255 0 0;
    --danger-600: 208 0 0;
    /* warning */
    --warning-500: 255 206 49;
    --warning-600: 255 194 0;
    /* button */
    --button-clear: 111 126 146;
    --button-search: 47 154 161;
    --button-save: 54 107 178;
    /* button-dg */
    --button-dg-primary: 33 42 62;
    --button-dg-secondary: 57 72 103;
    --button-dg-quaternary: 94 120 170;
    --button-dg-third: 112 151 173;
    --button-dg-delete: 228 100 100;
    /* blue */
    --blue-100: 233 239 246;
    --blue-200: 205 214 223;
    --blue-300: 183 196 214;
    --blue-400: 193 227 255;
    --blue-500: 147 215 238;
    --blue-600: 35 87 156;
    --blue-700: 59 86 115;
    --blue-800: 89 129 173;
    --blue-900: 35 87 156;
    --blue-1000: 59 86 115;
    --blue-1050: 48 71 97;
    --blue-1100: 33 58 86;
    /* green */
    --green-300: 82 136 156;
    --green-500: 47 154 161;
    --green-600: 41 131 139;

    /* bs */
    --bs-font-sans-serif: "Noto Sans TC", sans-serif;
}

body {
    font-family: "Noto Sans TC", sans-serif;
    background: url("/Content/img/bg.png");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

pre {
    font-family: "Noto Sans TC", sans-serif;
    margin: 0;
    font-size: 16px;
    text-wrap: wrap;
    word-break: break-all;
}

.container.body-content {
    max-width: 92.5%;
    padding-top: 30px;
    padding-bottom: 20px;
}

.page-title {
    margin-bottom: 25px;
    font-size: 48px;
    line-height: 48px;
    color: white;
    text-align: center;
}

footer {
    color: #aad6d9;
    font-size: 18px;
    text-align: center;
}

.d-contents {
    display: contents;
}

/* rwd */
@media only screen and (max-width: 767px) {
    .container.body-content {
        padding-top: 21px;
    }

    .page-title {
        margin-bottom: 16px;
        font-size: 32px;
        line-height: 46px;
    }
}

/* sm */
@media (min-width: 576px) {
    .d-sm-contents {
        display: contents;
    }
}

/* md */
@media (min-width: 768px) {
    .d-md-contents {
        display: contents;
    }
}

/* lg */
@media (min-width: 992px) {
    .d-lg-contents {
        display: contents;
    }
}

/* xl */
@media (min-width: 1200px) {
    .d-xl-contents {
        display: contents;
    }
}

/* xxl */
@media (min-width: 1400px) {
    .d-xxl-contents {
        display: contents;
    }
}