:root {
    --background-color: #f6faff;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    color: #474747;
    font-family: Arial,"Microsoft JhengHei","\5FAE\8EDF\6B63\9ED1\9AD4",sans-serif;
    font-size: 14px;
}

button:disabled,
.btn:disabled {
    pointer-events: unset;
}

textarea.resize-none {
    resize: none;
}

body.bg-color {
    background-color: var(--background-color);
}

.color-danger {
    color: #dc3545!important;
}

.text-danger {
    font-size: 15px;
    font-weight: 700;
}

    .text-danger.field-validation-error {
        display: flex;
        margin-top: .25rem;
    }

        .text-danger.field-validation-error:before {
            margin-left: .25rem;
            margin-right: .25rem;
            content: "\e001";
            font-family: "Material Icons";
            font-size: 16px;
        }

.form-control:focus,
.form-select:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control.input-validation-error,
.form-select.input-validation-error {
    border: 1px solid #dc3545;
}

.input-group > .form-control {
    border-right: 0;
}

/* captcha */
.captcha i {
    margin-left: 3px;
    color: #e45a2c;
}

.captcha-refresh {
    height: 100%;
    background-color: #fff;
    cursor: pointer;
}

    .captcha-refresh:hover .fa-sync-alt {
        color: #e45a2c;
    }

/* pw eye */
.pw-eye {
    height: 100%;
    background-color: #fff;
    cursor: pointer;
}

    .pw-eye .fa-eye {
        color: #e45a2c;
    }

/* self layout */
.self {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    height: 100%;
    background-color: var(--background-color);
    text-align: center;
}

    .self main {
        padding: 15px;
        max-width: 500px;
        color: #6c757d;
    }

    .self .project,
    .self h3 {
        font-family: 'Noto Serif TC', serif;
    }

    .self .project {
        margin-top: .5rem;
        margin-bottom: 0;
        color: #e45a2c;
    }

    .self .link {
        color: #6c757d;
        font-size: 1rem;
        font-weight: bold;
    }

.st-wrapper {
    margin: 0 auto;
    padding: 1rem;
    max-width: 500px;
}

    .st-wrapper .st-title {
        margin-bottom: 1rem;
        font-family: 'Noto Serif TC', serif;
        color: #6c757d;
        text-align: center;
    }

        .st-wrapper .st-title > span {
            color: #e45a2c;
        }

    .st-wrapper .st-reminder-text {
        margin-left: 6px;
        margin-bottom: 3px;
    }

        .st-wrapper .st-reminder-text > code {
            font-size: 14px;
            font-weight: 700;
        }

    .st-wrapper .st-error {
        text-align: center;
    }

        .st-wrapper .st-error .icon {
            margin-bottom: 1rem;
            font-size: calc(3.3rem + .6vw);
        }

        .st-wrapper .st-error .message {
            font-size: calc(1.3rem + .6vw);
        }

        .st-wrapper .st-error .back {
            margin-top: 30px;
        }

/* popup layout */
.popup {
    margin-bottom: 0;
}

/* menu overlay */
#menu-overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    z-index: 999;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

    #menu-overlay.close {
        display: none;
    }

/* footer */
.st-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #27527c;
    color: #fff;
    white-space: nowrap;
}

    .st-footer .st-copyright {
        margin-bottom: 0;
        text-align: center;
        font-size: 1rem;
        line-height: 50px;
    }

/* modal error */
#error.control-xs:has(div) {
    margin-bottom: 2rem;
}

/* header navbar */
.navbar {
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
    background-color: #27527c;
}

    .navbar.st-nav-header {
        z-index: 1001;
    }

    .navbar.st-nav-info {
        height: 48px;
        box-shadow: 0px 3px 6px #00000029;
    }

    .navbar .st-nav-content {
        position: relative;
    }

        .navbar .st-nav-content ul {
            display: flex;
            flex-grow: 1;
            flex-basis: 100%;
            justify-content: space-between;
            align-items: center;
            padding: 0;
            list-style: none;
        }

        .navbar .st-nav-content .st-nav-signin .st-nav-link {
            display: flex;
            align-items: center;
            height: 100%;
            color: #fff;
            font-size: 1rem;
            font-weight: bold;
        }

            .navbar .st-nav-content .st-nav-signin .st-nav-link img {
                margin-right: 6px;
            }

        .navbar .st-nav-content .st-nav-signout {
            position: relative;
            display: flex;
            align-items: center;
            height: 48px;
        }

            .navbar .st-nav-content .st-nav-signout .dropdown-toggle::after {
                vertical-align: 0;
                color: #fff;
                -webkit-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
            }

            .navbar .st-nav-content .st-nav-signout .dropdown-toggle.show::after {
                transform: rotate(180deg);
            }

        /* st-nav-desktop */
        .navbar .st-nav-content .st-nav-desktop .st-nav-fixed,
        .navbar .st-nav-content .st-nav-desktop .st-nav-signin {
            display: flex;
            align-items: center;
            height: 48px;
        }

            .navbar .st-nav-content .st-nav-desktop .st-nav-fixed .st-nav-link {
                display: flex;
                align-items: center;
                height: 100%;
            }

            .navbar .st-nav-content .st-nav-desktop .st-nav-fixed .st-nav-link:not(:last-child) {
                padding-right: 1rem;
            }

            .navbar .st-nav-content .st-nav-desktop .st-nav-fixed .dropdown-toggle::after {
                vertical-align: 0;
                color: #fff;
                -webkit-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
            }

            .navbar .st-nav-content .st-nav-desktop .st-nav-fixed .dropdown-toggle.hover::after {
                transform: rotate(180deg);
            }

        .navbar .st-nav-content .st-nav-collapse {
            padding: 0 0 10px;
            width: 100%;
        }

            .navbar .st-nav-content .st-nav-collapse .st-nav-item {
                position: relative;
                width: 100%;
                height: auto;
            }

                .navbar .st-nav-content .st-nav-collapse .st-nav-item:not(.dropdown) .st-nav-link {
                    display: flex;
                    align-items: center;
                    padding-left: 2.5rem;
                    padding-right: 2rem;
                    height: 50px;
                    font-size: 1rem;
                }

                    .navbar .st-nav-content .st-nav-collapse .st-nav-item:not(.dropdown) .st-nav-link::after {
                        content: "\f0da";
                        position: absolute;
                        left: 16px;
                        border: 0;
                        font-family: 'Font Awesome 5 Free';
                        font-weight: 900;
                        font-style: normal;
                        color: #fff;
                        line-height: 1;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                        -webkit-transition: all 0.3s ease-out;
                        transition: all 0.3s ease-out;
                    }

            .navbar .st-nav-content .st-nav-collapse .dropdown-toggle {
                display: flex;
                align-items: center;
                padding-left: 2.5rem;
                padding-right: 2rem;
                height: 50px;
                font-size: 1rem;
            }

                .navbar .st-nav-content .st-nav-collapse .dropdown-toggle.show {
                    background-color: #96cade;
                }

                    .navbar .st-nav-content .st-nav-collapse .dropdown-toggle.show::after {
                        transform: rotate(90deg);
                    }

                .navbar .st-nav-content .st-nav-collapse .dropdown-toggle::after {
                    margin-left: 0;
                    content: "\f0da";
                    position: absolute;
                    left: 16px;
                    border: 0;
                    font-family: 'Font Awesome 5 Free';
                    font-weight: 900;
                    font-style: normal;
                    color: #fff;
                    line-height: 1;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    -webkit-transition: all 0.3s ease-out;
                    transition: all 0.3s ease-out;
                }

            .navbar .st-nav-content .st-nav-collapse.show .dropdown-menu {
                position: static;
                border-top: 3px solid #efb617;
            }

        /* st-nav-profile */
        .navbar .st-nav-content .st-nav-profile {
            position: absolute;
            top: 100%;
            right: .75rem;
            padding: .5rem 0;
            border: 1px solid rgba(0,0,0,0.3);
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            background-color: #fff;
            z-index: 1000;
        }

            .navbar .st-nav-content .st-nav-profile:not(.show) {
                display: none;
            }

            .navbar .st-nav-content .st-nav-profile .st-nav-profile-wrapper {
                display: flex;
                width: 100%;
                padding: 10px 20px;
            }

                .navbar .st-nav-content .st-nav-profile .st-nav-profile-wrapper .st-nav-my-account {
                    display: flex;
                    align-items: center;
                    padding-left: 15px;
                    padding-right: 15px;
                }

                    .navbar .st-nav-content .st-nav-profile .st-nav-profile-wrapper .st-nav-my-account .icon-person {
                        color: #777;
                        font-size: 75px;
                    }

                .navbar .st-nav-content .st-nav-profile .st-nav-profile-wrapper .st-nav-account-detail {
                    padding-left: 15px;
                    padding-right: 15px;
                }

                    .navbar .st-nav-content .st-nav-profile .st-nav-profile-wrapper .st-nav-account-detail .name {
                        font-size: 1rem;
                    }

                    .navbar .st-nav-content .st-nav-profile .st-nav-profile-wrapper .st-nav-account-detail .pw-change {
                        color: #e45a2c;
                    }

    .navbar .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0;
        width: 100%;
        border: 0;
        border-radius: 0;
        background-color: #f6f6f6;
        box-shadow: 0 2px 4px rgba(0 0 0 / 20%);
    }

        .navbar .dropdown-menu .container {
            display: flex;
            flex-wrap: wrap;
        }

        .navbar .dropdown-menu .st-nav-menu-item {
            /*flex-grow: 1;
            flex-basis: 250px;*/
            padding: 10px 15px;
        }

            .navbar .dropdown-menu .st-nav-menu-item .st-nav-title {
                margin-bottom: .5rem;
                color: #dc3545;
                font-weight: bold;
            }

            .navbar .dropdown-menu .st-nav-menu-item ul {
                display: block;
                margin-right: 40px;
                padding-left: 2rem;
                list-style: disc;
            }

                .navbar .dropdown-menu .st-nav-menu-item ul > li {
                    position: relative;
                    width: fit-content;
                    line-height: 1.8;
                }

                    .navbar .dropdown-menu .st-nav-menu-item ul > li a {
                        color: #6c757d;
                    }

                        .navbar .dropdown-menu .st-nav-menu-item ul > li a::after {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 24px;
                            width: 0;
                            height: 1px;
                            background-color: #dc3545;
                            -webkit-transition: all 0.3s ease-out;
                            transition: all 0.3s ease-out;
                        }

                        .navbar .dropdown-menu .st-nav-menu-item ul > li a:hover::after,
                        .navbar .dropdown-menu .st-nav-menu-item ul > li a:focus::after,
                        .navbar .dropdown-menu .st-nav-menu-item ul > li a.active::after {
                            width: 100%;
                        }

        .navbar .st-nav-content .st-nav-sub {
            justify-content: right;
        }

            .navbar .st-nav-content .st-nav-sub li:not(:last-child) {
                display: flex;
                align-items: center;
                margin-right: 1rem;
            }

.st-banner,
.st-banner-200 {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 1;
}

    .st-banner .st-banner-title {
        position: absolute;
        bottom: 25%;
        width: 73.5%;
    }

    .st-banner-200 .st-banner-title {
        position: absolute;
        left: 14.5%;
        bottom: 32%;
        width: 73%;
    }

.st-project {
    background-color: #eef5ff;
    -webkit-box-shadow: 0px 3px 6px #00000029;
    box-shadow: 0px 3px 6px #00000029;
}

    .st-project .container {
        display: flex;
        padding: 48px 0;
    }

    .st-project .st-menu {
        display: flex;
        flex-grow: 1;
        flex-basis: 100%;
        justify-content: space-evenly;
        padding: 0;
        list-style: none;
    }

        .st-project .st-menu .st-nav-link {
            position: relative;
            transition: all 0.3s;
        }

            .st-project .st-menu .st-nav-link:hover {
                top: -15px;
            }

        .st-project .st-menu img {
            height: 250px;
        }

/* main wrapper */
.st-main-wrapper {
    padding: 28px 0 0;
}

    .st-main-wrapper .st-bulletin a,
    .st-main-wrapper .st-links a {
        color: #636063;
    }

        .st-main-wrapper .st-bulletin a:hover,
        .st-main-wrapper .st-bulletin a:focus,
        .st-main-wrapper .st-bulletin a.active,
        .st-main-wrapper .st-links a:hover,
        .st-main-wrapper .st-links a:focus,
        .st-main-wrapper .st-links a.active {
            color: #efb617;
        }

    .st-main-wrapper .st-content {
        padding-bottom: 60px;
    }

        .st-main-wrapper .st-content.st-w-640 {
            margin: 0 auto;
            max-width: 640px;
        }

        .st-main-wrapper .st-content:last-child {
            padding-bottom: 40px;
        }

    .st-main-wrapper .st-header {
        display: flex;
        align-items: end;
        margin-bottom: 1rem;
    }

        .st-main-wrapper .st-header .st-icon {
            margin-right: 1rem;
        }

        .st-main-wrapper .st-header .st-more {
            display: block;
            margin-bottom: 1rem;
        }

    .st-main-wrapper .st-bulletin .st-body {
        padding: 24px 60px;
        background-color: #fff;
        color: #636063;
        font-size: 16px;
        box-shadow: 0px 3px 6px #00000029;
    }

        .st-main-wrapper .st-bulletin .st-body .st-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
        }

            .st-main-wrapper .st-bulletin .st-body .st-item p {
                margin-bottom: 0;
            }

            .st-main-wrapper .st-bulletin .st-body .st-item .st-subject {
                flex-grow: 1;
                position: relative;
                padding: 0 24px;
            }
            
                .st-main-wrapper .st-bulletin .st-body .st-item .st-subject:before {
                    content: '';
                    background: url('../images/icon-arrow-right.svg') center center no-repeat;
                    background-size: contain;
                    position: absolute;
                    top: 3px;
                    left: -9px;
                    margin-right: 1rem;
                    width: 16px;
                    height: 16px;
                }

            .st-main-wrapper .st-bulletin .st-body .st-item .st-time {
                display: flex;
            }

    .st-main-wrapper .st-download .st-body {
        color: #636063;
        font-size: 16px;
    }

        .st-main-wrapper .st-download .st-body .st-item {
            display: flex;
            justify-content: space-between;
            background-color: #fff;
            box-shadow: 0px 3px 6px #00000029;
        }

            .st-main-wrapper .st-download .st-body .st-item:not(:last-child) {
                margin-bottom: 1rem;
            }

            .st-main-wrapper .st-download .st-body .st-item .st-time {
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 15px 30px 9px;
                width: 190px;
            }

                .st-main-wrapper .st-download .st-body .st-item .st-time p {
                    margin-bottom: 0;
                    text-align: center;
                }

                .st-main-wrapper .st-download .st-body .st-item .st-time .st-ym {
                    font-size: 22px;
                }

                .st-main-wrapper .st-download .st-body .st-item .st-time .st-d {
                    font-size: 32px;
                    font-weight: bold;
                }

            .st-main-wrapper .st-download .st-body .st-item .st-subject {
                flex: 1;
                margin: 15px 0;
                border-left: 2px solid #efb617;
            }

                .st-main-wrapper .st-download .st-body .st-item .st-subject p {
                    display: flex;
                    align-items: center;
                    margin: 0;
                    padding: 0 30px;
                    height: 100%;
                }

            .st-main-wrapper .st-download .st-body .st-item .st-icon-download {
                width: 110px;
                background-color: #27527c;
            }

                .st-main-wrapper .st-download .st-body .st-item .st-icon-download a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                }

    .st-main-wrapper .st-links .st-body {
        color: #636063;
        font-size: 16px;
    }

        .st-main-wrapper .st-links .st-body .st-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            box-shadow: 0px 3px 6px #00000029;
        }

            .st-main-wrapper .st-links .st-body .st-item .st-icon {
                display: flex;
                justify-content: center;
                padding-left: 12px;
                width: 70px;
            }

                .st-main-wrapper .st-links .st-body .st-item .st-icon img {
                    height: 36px;
                }

            .st-main-wrapper .st-links .st-body .st-item .st-subject {
                flex: 1;
                position: relative;
                margin: 0;
            }

            .st-main-wrapper .st-links .st-body .st-item .st-sn {
                position: relative;
                background-color: #27527c;
                width: 80px;
                height: 100px;
                clip-path: polygon(26% 0, 100% 0, 100% 100%, 65% 100%);
            }

                .st-main-wrapper .st-links .st-body .st-item .st-sn > span {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    color: #fff;
                }

    .st-main-wrapper .st-content-center {
        position: absolute;
        top: 50px;
        bottom: 50px;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
    }

    .st-main-wrapper button .fa-cloud-download-alt {
        margin-right: 3px;
        color: coral;
    }

    .st-main-wrapper button .fa-cloud-upload-alt {
        margin-right: 3px;
        color: gray;
    }

    .st-main-wrapper button:hover .fa-cloud-download-alt,
    .st-main-wrapper button:hover .fa-cloud-upload-alt {
        color: #fff;
    }

/* forget password */
.st-forget {
    margin-top: 1rem;
    text-align: center;
}

    .st-forget .st-link {
        color: #6c757d;
        font-size: 1rem;
        font-weight: 700;
    }

        .st-forget .st-link i {
            margin-right: 0.25rem;
            color: #e45a2c;
        }

/* breadcrumb */
.st-breadcrumb {
    border-bottom: 1px solid #ededed;
    height: 50px;
}

    .st-breadcrumb .container {
        position: relative;
        display: flex;
        justify-content: space-between;
        height: 100%;
    }

    .st-breadcrumb .st-title {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        margin: 0;
        color: #6c757d;
        font-family: 'Noto Serif TC', serif;
        font-size: 22px;
        font-weight: bold;
    }

        .st-breadcrumb .st-title > span {
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 16px;
            height: 100%;
        }

            .st-breadcrumb .st-title > span::after {
                content: '';
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #dc3545;
            }

    .st-breadcrumb .breadcrumb {
        position: absolute;
        align-items: center;
        margin: 0;
        padding-left: 6px;
        height: 50px;
    }

    .st-breadcrumb .breadcrumb-item {
        color: #acacac;
    }

        .st-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
            float: none;
            content: '\f105';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            font-style: normal;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .st-breadcrumb .breadcrumb-item.active,
        .st-breadcrumb .breadcrumb-item a,
        .st-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
            color: #acacac;
        }

            .st-breadcrumb .breadcrumb-item a:hover {
                color: #dc3545;
            }

    .st-breadcrumb .st-return {
        position: absolute;
        right: 16px;
        display: flex;
        align-items: center;
        margin: 0;
        height: 50px;
    }

/* divider */
.st-divider {
    position: relative;
}

    .st-divider hr {
        margin-bottom: 2rem;
    }

    .st-divider .st-title {
        position: absolute;
        top: -11px;
        left: 50%;
        margin-left: -50px;
        width: 100px;
        background-color: #fff;
        color: #777;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
    }

        .st-divider .st-title.st-w-200 {
            width: 200px;
            margin-left: -100px;
        }

body.bg-color .st-divider .st-title {
    background-color: var(--background-color);
}

.row.st-divider .st-title {
    top: 5px;
}

/* login log */
.st-login-wrapper {
    margin-bottom: 1rem;
    color: #777;
}

    .st-login-wrapper .st-history {
        display: flex;
        flex-wrap: wrap;
    }

        .st-login-wrapper .st-history .st-timeline {
            position: relative;
            flex-basis: 0;
            flex-grow: 1;
            margin-left: 12px;
            max-width: 24px;
        }

            .st-login-wrapper .st-history .st-timeline .st-line-color {
                position: absolute;
                top: 28px;
                left: 8px;
                bottom: -4px;
                width: 1px;
                background-color: #eee;
            }

            .st-login-wrapper .st-history .st-timeline .st-dot {
                position: absolute;
                top: 4px;
                left: -3px;
                width: 24px;
                height: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #ccc;
                border-radius: 50%;
            }

                .st-login-wrapper .st-history .st-timeline .st-dot .fa-check {
                    color: #28a745;
                }

                .st-login-wrapper .st-history .st-timeline .st-dot .fa-times {
                    color: #dc3545;
                }

        .st-login-wrapper .st-history:first-child .st-line-color {
            top: 28px;
        }

        .st-login-wrapper .st-history:last-child .st-line-color {
            height: 0;
        }

        .st-login-wrapper .st-history .st-time {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-basis: 0;
            flex-grow: 1;
            margin-bottom: 8px;
            max-width: 150px;
        }

            .st-login-wrapper .st-history .st-time > p {
                margin-bottom: 0;
                font-size: 20px;
                color: #1a73e8;
            }

            .st-login-wrapper .st-history .st-time > span {
                font-size: 1rem;
            }

        .st-login-wrapper .st-history .st-desc {
            flex-basis: 0;
            flex-grow: 1;
        }

            .st-login-wrapper .st-history .st-desc .st-main {
                margin-top: 2px;
                margin-bottom: 0;
                font-size: 1rem;
            }

            .st-login-wrapper .st-history .st-desc .st-from {
                display: flex;
            }

                .st-login-wrapper .st-history .st-desc .st-from::before {
                    content: "\f3c5";
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    margin-right: 3px;
                }

            .st-login-wrapper .st-history .st-desc .st-additional {
                margin-top: 2px;
                margin-right: 12px;
                display: flex;
                justify-content: flex-end;
                font-size: 14px;
            }

/* school data upload */
.st-stability-rate {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

    .st-stability-rate tr,
    .st-stability-rate td {
        border: 1px solid #ddd;
    }

    .st-stability-rate .st-tbl-caption th {
        background-color: #006989;
        color: #fff;
    }

    .st-stability-rate .st-tbl-title th {
        width: 50%;
        border-bottom: 1px solid #fff;
        background-color: #006989;
        color: #fff;
    }

    .st-stability-rate .st-tbl-header th {
        width: 10%;
        border-bottom: 1px solid #fff;
        background-color: #006989;
        color: #fff;
    }

    .st-stability-rate .st-tbl-data td {
        height: 40px;
        background-color: #cef7a0;
    }

        .st-stability-rate .st-tbl-data td:first-child {
            border-left: 1px solid #ddd;
        }

        .st-stability-rate .st-tbl-data td:not(:last-child) {
            border-right: 1px solid #fff;
        }

.st-tbl-sh-upload .ui-jqgrid .ui-jqgrid-htable th:last-child {
    border-right: 0 none;
}

.st-tbl-sh-upload tr.jqgrow:last-child {
    border-bottom-color: #fff;
}

.st-tbl-sh-upload tr.jqgrow td:last-child {
    border-right-color: #fff;
}

/* upload state */
.st-upload-state-img {
    height: 30px;
    width: 30px;
    margin: 0 0 0 0.3rem;
}

.st-upload-success {
    display: flex;
    justify-items: center;
    background-image: url(../images/icon_green.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
}

.st-upload-audit {
    display: flex;
    justify-items: center;
    background-image: url(../images/icon_grey.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
}

.st-upload-re-upload {
    display: flex;
    justify-items: center;
    background-image: url(../images/icon_yellow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
}

.st-upload-not-upload {
    display: flex;
    justify-items: center;
    background-image: url(../images/icon_red.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
}

.st-upload-desc {
    padding-left: 2rem;
    display: flex;
    align-items: center;
}

/* import error */
.st-import-error-report {
    display: none;
}

    .st-import-error-report.show {
        display: block;
        margin-top: 1rem;
    }

    .st-import-error-report .st-agree {
        padding: .5rem 0 .5rem 2.5rem;
    }

    .st-import-error-report .st-password {
        display: none;
    }

        .st-import-error-report .st-password.show {
            display: flex;
            margin-top: 1rem;
        }

        .st-import-error-report .st-password .form-control:read-only {
            cursor: default;
        }

        .st-import-error-report .st-password .toast {
            margin-bottom: 1rem;
            float: right;
        }

/* student inquiry */
.st-student-wq #PIds {
    height: 495px;
    resize: none;
}

.st-student-wq .ui-jqgrid .ui-jqgrid-hdiv {
    border-bottom: 0 none;
}

.st-student-wq .ui-jqgrid .ui-jqgrid-htable th:last-child {
    border-right: 0;
}

.st-student-fq .st-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 15px;
    padding-left: 15px;
}

    .st-student-fq .st-content > div {
        width: 640px;
        max-width: 100%;
    }

    .st-student-fq .st-content .st-template {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1rem;
    }

        .st-student-fq .st-content .st-template .st-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #777;
        }

            .st-student-fq .st-content .st-template .st-title i {
                font-size: 1.5rem;
                color: #e45a2c;
            }

        .st-student-fq .st-content .st-template .st-file-download {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

            .st-student-fq .st-content .st-template .st-file-download .btn {
                flex: 1;
                max-width: 200px;
                margin: 0.25rem;
            }

    .st-student-fq .st-content .st-upload {
        position: relative;
        padding: 16px 0;
        text-align: center;
    }

        .st-student-fq .st-content .st-upload hr {
            margin-top: 0 !important;
        }

        .st-student-fq .st-content .st-upload .st-title {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -50px;
            width: 100px;
            background-color: var(--background-color);
            color: #777;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
        }

        .st-student-fq .st-content .st-upload .st-uploader {
            position: relative;
            margin-top: 2rem;
            border: 1px dashed #ccc;
            border-radius: 5px;
            background-color: #fbfcff;
        }

            .st-student-fq .st-content .st-upload .st-uploader .st-file-area {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 1.5rem;
                margin-bottom: 1.5rem;
                color: #777;
                font-weight: 700;
            }

                .st-student-fq .st-content .st-upload .st-uploader .st-file-area .st-icon {
                    margin-bottom: 1rem;
                    color: #e45a2c;
                    font-size: 1.5rem;
                }

            .st-student-fq .st-content .st-upload .st-uploader .st-input-area {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

                .st-student-fq .st-content .st-upload .st-uploader .st-input-area .st-input-fileupload {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    font-size: 0;
                    opacity: 0;
                    cursor: pointer;
                }

        .st-student-fq .st-content .st-upload .st-upload-list {
            padding: 0;
            list-style: none;
        }

            .st-student-fq .st-content .st-upload .st-upload-list > li {
                display: flex;
                height: 42px;
                line-height: 42px;
                font-size: 14px;
                font-weight: 500;
            }

                .st-student-fq .st-content .st-upload .st-upload-list > li + li {
                    margin-top: 10px;
                }

                .st-student-fq .st-content .st-upload .st-upload-list > li:first-child {
                    margin-top: 1rem;
                }

                .st-student-fq .st-content .st-upload .st-upload-list > li .st-file-type,
                .st-student-fq .st-content .st-upload .st-upload-list > li .st-file-name,
                .st-student-fq .st-content .st-upload .st-upload-list > li .st-file-size {
                    background-color: #dae6ff;
                }

                .st-student-fq .st-content .st-upload .st-upload-list > li .st-file-type {
                    display: flex;
                    border-radius: 4px 0 0 4px;
                    padding: 8px;
                }

                    .st-student-fq .st-content .st-upload .st-upload-list > li .st-file-type .st-icon {
                        border: 1px solid #ccc;
                        border-radius: 3px;
                        padding: 4px;
                        background-color: #fff;
                    }

                        .st-student-fq .st-content .st-upload .st-upload-list > li .st-file-type .st-icon i {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 16px;
                            height: 16px;
                        }

                .st-student-fq .st-content .st-upload .st-upload-list > li .st-file-name {
                    flex-grow: 1;
                    overflow: hidden;
                    text-align: left;
                }

                .st-student-fq .st-content .st-upload .st-upload-list > li .st-file-size {
                    margin-left: auto;
                    border-radius: 0 4px 4px 0;
                    padding: 0 10px;
                }

    .st-student-fq .st-content .st-inquiry {
        display: flex;
        justify-content: center;
        margin-top: .5rem;
    }

        .st-student-fq .st-content .st-inquiry .btn {
            flex: 1;
            max-width: 200px;
        }

/* select並列 */
.ar-select-juxtaposd {
    text-align: center;
    overflow: auto;
    overflow-y: hidden;
}

    .ar-select-juxtaposd option {
        width: 150px;
        display: inline-block;
        border-radius: 5px;
    }

/* gss school ratio */
.st-sh-ratio .table {
    font-size: 1.2rem;
}

    .st-sh-ratio .table caption {
        padding-top: 0;
        caption-side: top;
        color: black;
        font-size: 1.4rem;
    }

    .st-sh-ratio .table tr {
        text-align: center;
        vertical-align: middle;
    }

    .st-sh-ratio .table > thead > tr > th{
        background-color: #17a2b8;
        color: white;
    }

.st-sh-ratio input {
    text-align: center;
}

.st-sh-ratio .source-html {
    padding: 1rem;
    width: 591.28pt;
    background-color: #fff;
    font-family: 標楷體;
}

    .st-sh-ratio .source-html table,
    .st-sh-ratio .source-html th,
    .st-sh-ratio .source-html td {
        border: 1px solid;
        font-size: 1.2rem;
    }

.st-sh-ratio #source-html {
    display: flex;
    justify-content: center;
    align-items: center;
}

.st-sh-ratio .st-step-title {
    font-size: 1.4rem;
    color: black;
}

.st-sh-ratio .st-btn-upload,
.st-sh-ratio .st-btn-download {
    margin-left: 1rem;
    width: auto;
    font-size: 1.2rem;
}

.st-sh-ratio .p-a4 {
    width: 21cm;
    margin: auto;
    border: 1px solid;
}

.st-sh-ratio .sp {
    position: absolute;
    left: 17.7rem;
}

.st-sh-ratio .st-rpt-padding {
    display: block;
    height: 20px;
}

/* about & privacy */
.st-about .st-title,
.st-privacy .st-title {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

    .st-about .st-title span,
    .st-privacy .st-title span {
        margin-left: 20px;
        color: #27527c;
        font-family: 'Noto Serif TC', serif;
        font-size: 40px;
        font-weight: bold;
    }

    .st-about .st-body p,
    .st-privacy .st-body p {
        font-size: 24px;
        text-align: justify;
    }

/* 左線條 */
.sub-left-line {
    position: relative; 
    padding-left: 20px; 
}

.sub-left-line::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0; 
    width: 2px;
    background-color: gold;
    border-radius: 5px;
}

/* 靠右且換行置中 */
.sub-right-align {
    text-align: right;
    width: 100%;
}

.sub-right-align span {
    display: inline-block;
    text-align: center; 
}

.sub-right-align:has(span:only-child:empty) {
    text-align: center; 
}

.theme-table td, .theme-table th {
    padding-top: 20px;
    padding-bottom: 20px;
}

.theme-table .big-title {
    white-space: pre-wrap;
    word-break: break-all;
    background: linear-gradient(90deg, #00d2ff, #0c4fab);
    color: white;
    font-size: 24px;
    border-radius: 2px;
}

.st-sub .dropdown-link {
    flex-direction: column;
}

.st-sub .st-icon-download a:hover {
    background-color: #efb617;
}

.st-sub .dropdown-link span,
.st-sub .dropdown-menu a {
    color: white;
}

.st-sub .dropdown-item {
    padding: 10px 30px;
}

.st-sub .dropdown-item i {
    margin-right: 5px;
}

.st-sub .dropdown-menu {
    background-color: rgb(39, 82, 124);
    box-shadow: 0px 3px 6px #00000029;
    border: none;
    /* 左拉 */
    top: 0;
    left: auto;
    right: 100%;
}