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

*, *:before, *:after {
    position: relative;
    font-family: "Noto Sans TC", sans-serif, arial;
    font-weight: 400;
    box-sizing: border-box;
    transition: 0.2s linear;
}

a {
    display: inline-block;
    text-decoration: none;
}

button {
    background-color: unset;
    border: unset;
}

input, select {
    appearance: none;
    background-color: #ffffff;
    width: 100%;
    padding: 0.75em 1.5em;
    border: 1px solid #A3E38E;
    outline-color: #ffffff;
    border-radius: 2em;
    outline: none;
}

@media screen and (max-width: 640px) {
    input, select {
        font-size: 16px;
    }
}

input:focus, select:focus {
    outline: none;
}

input[disabled], select[disabled] {
    background-color: #E5E7EB;
    border-color: #9CA3AF;
    color: #4B5563;
    font-weight: 700;
    outline: 2px solid #9CA3AF66;
}

    input[disabled] ~ .icon, select[disabled] ~ .icon {
        background-color: #4B5563 !important;
    }

input[type=date]::-webkit-calendar-picker-indicator {
    display: none;
}

input[type=date]::-webkit-datetime-edit-text {
    font-size: 15.2px;
    color: #A3E38E;
}

input[type=date]:before {
    content: "";
}

input[type=checkbox] {
    width: 1em;
    height: 1em;
    padding: 0;
    color: #ffffff;
    border: 1px solid #70CF77;
    border-radius: 2px;
    z-index: 1;
}

    input[type=checkbox]:checked {
        background-color: #70CF77;
    }

        input[type=checkbox]:checked:after {
            position: absolute;
            top: calc(50% - 0.1em);
            left: 50%;
            content: "✓";
            color: #ffffff;
            font-size: 0.9em;
            font-weight: 500;
            transform: translate(-50%, -50%);
        }

input[type=radio] {
    position: absolute;
    top: 50%;
    left: 0.5em;
    width: 1em;
    height: 1em;
    padding: 0;
    cursor: pointer;
    transform: translateY(-50%);
}

    input[type=radio]:checked {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }

input[type=submit] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

input:focus {
    border-color: #3E9D45;
}

    input:focus[type=date]::-webkit-datetime-edit-text {
        color: #70CF77;
    }

input::placeholder {
    color: #9CA3AF;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: #D9F0F311;
    background-color: transparent;
    border-radius: 0.75em;
    transition: 0.2s linear;
}

::-webkit-scrollbar-thumb {
    background-color: #2C6691aa;
    border-radius: 0.5em;
    transition: 0.2s linear;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #2C6691;
        transition: 0.2s linear;
    }

.cont-box .cont, .card-box .cont {
    padding: 1.5em;
}

    .cont-box .cont:not(:last-of-type):before, .card-box .cont:not(:last-of-type):before {
        position: absolute;
        left: 2.5em;
        bottom: calc(-1em + 1px);
        display: block;
        content: "";
        mask-image: url(../images/part/port.svg);
        -webkit-mask-image: url(../images/part/port.svg);
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        width: 4em;
        height: 1em;
        font-size: 16px;
        z-index: 10;
    }

.cont-box .cont-img, .card-box .cont-img {
    background-color: #E7F7E8;
    background-image: url(../images/logo_coding_01.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    width: 100%;
    padding-bottom: 62.5%;
    border-radius: 20px;
}

    .cont-box .cont-img, .card-box .cont-img img {
        width: 100%;
        border-radius: 20px;
        padding-bottom: 0;
    }

.cont-box .cont:has(> p.text), .card-box .cont:has(> p.text) {
    padding: 2.5em 1.5em;
}

.cont .cont-info {
    padding-top: 10px;
}

.card-box .cont {
    padding: 1.25em;
}

    .card-box .cont:before {
        font-size: 8px;
    }

    .card-box .cont .title {
        font-size: 1.125em;
    }

    .card-box .cont .text {
        font-size: 1em;
    }

.box-clamp-1 {
    display: -webkit-box;
    height: 1.25em;
    line-height: 1.25em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-wrap: break-word;
    overflow: hidden;
}

.box-clamp-2 {
    display: -webkit-box;
    height: 2.5em;
    line-height: 1.25em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-wrap: break-word;
    overflow: hidden;
}

.box-clamp-3 {
    display: -webkit-box;
    height: 3.75em;
    line-height: 1.25em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    word-wrap: break-word;
    overflow: hidden;
}

.box-clamp-4 {
    display: -webkit-box;
    height: 5em;
    line-height: 1.25em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    word-wrap: break-word;
    overflow: hidden;
}

.box-clamp-5 {
    display: -webkit-box;
    height: 6.25em;
    line-height: 1.25em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    word-wrap: break-word;
    overflow: hidden;
}

.box-clamp-6 {
    display: -webkit-box;
    height: 7.5em;
    line-height: 1.25em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    word-wrap: break-word;
    overflow: hidden;
}

.box-clamp-7 {
    display: -webkit-box;
    height: 8.75em;
    line-height: 1.25em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    word-wrap: break-word;
    overflow: hidden;
}

.box-clamp-8 {
    display: -webkit-box;
    height: 10em;
    line-height: 1.25em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    word-wrap: break-word;
    overflow: hidden;
}

.box-clamp-9 {
    display: -webkit-box;
    height: 11.25em;
    line-height: 1.25em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    word-wrap: break-word;
    overflow: hidden;
}

.box-clamp-10 {
    display: -webkit-box;
    height: 12.5em;
    line-height: 1.25em;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    word-wrap: break-word;
    overflow: hidden;
}

.dialog-box {
    position: fixed;
    top: -200vh;
    left: 0;
    display: flex;
    background-color: #ffffffaa;
    width: 100%;
    height: 100%;
    opacity: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: top 0s linear 0.4s, opacity 0.4s linear;
    z-index: 5000;
}

    .dialog-box .dialog {
        position: absolute;
        top: -200vh;
    }

        .dialog-box .dialog.cont-box {
            box-shadow: 0 4px 8px #00000022;
        }

        .dialog-box .dialog.active {
            position: relative;
            top: unset;
        }

        .dialog-box .dialog .text-cont {
            padding: 1.5em 0.25em;
        }

            .dialog-box .dialog .text-cont .text-list {
                max-height: 48vh;
                padding: 0 0.5em;
                overflow-y: auto;
            }

    .dialog-box:has(.dialog.active) {
        top: 0;
        opacity: 1;
        transition: top 0s linear, opacity 0.4s linear;
    }

    .dialog-box .course-list {
        width: 24vw;
    }

        .dialog-box .course-list .list-cont {
            flex: 1 1 auto;
            padding: 1em 0.25em;
        }

        .dialog-box .course-list .list-box {
            max-height: calc(45.5vw - 7em);
            padding: 0 1em;
            overflow-y: auto;
        }

            .dialog-box .course-list .list-box .item {
                padding: 1em 0.5em;
            }

                .dialog-box .course-list .list-box .item:not(:last-of-type) {
                    border-bottom: 1px solid #ffffff;
                }

            .dialog-box .course-list .list-box .item-title {
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                align-items: center;
                margin: 0.25em 0;
                color: #A3E38E;
                font-size: 1.25em;
                border-radius: 12px;
                cursor: pointer;
            }

                .dialog-box .course-list .list-box .item-title:hover {
                    color: #FFFF81;
                }

            .dialog-box .course-list .list-box .item:before {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                content: "";
                margin: 0.5em 0;
                border-radius: 12px;
                width: 100%;
                height: calc(100% - 1em);
            }

            .dialog-box .course-list .list-box .item:has(:hover):before {
                background-color: #214D6D66;
            }

            .dialog-box .course-list .list-box .item:has(.active):before {
                background-color: #214D6D;
            }

            .dialog-box .course-list .list-box .item-count {
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                align-items: center;
                padding: 0.25em 1.25em;
                color: #214D6D;
                font-size: 0.5em;
            }

                .dialog-box .course-list .list-box .item-count:not(.complete) {
                    background-color: #A3E38E;
                }

                .dialog-box .course-list .list-box .item-count:before, .dialog-box .course-list .list-box .item-count:after {
                    display: inline-block;
                    content: "";
                    font-weight: 700;
                }

                .dialog-box .course-list .list-box .item-count:after {
                    content: "進度  " attr(data-count);
                }

                .dialog-box .course-list .list-box .item-count.complete {
                    padding: 0.25em 1.25em 0.25em 0.75em;
                    background-color: #FFFF81;
                }

                    .dialog-box .course-list .list-box .item-count.complete:before {
                        background-color: #3E9D45;
                        width: 2em;
                        height: 2em;
                        margin-right: 0.5em;
                        mask-repeat: no-repeat;
                        -webkit-mask-repeat: no-repeat;
                        mask-image: url(../images/icons/tick.svg);
                        -webkit-mask-image: url(../images/icons/tick.svg);
                    }

            .dialog-box .course-list .list-box .item-ul {
                padding: 0.5em 0 0;
            }

            .dialog-box .course-list .list-box .item-li {
                margin: 0.25em 0;
                padding: 0.5em 0 0.5em 3em;
                color: #ffffff;
                border-radius: 20px;
                cursor: pointer;
            }

                .dialog-box .course-list .list-box .item-li:before, .dialog-box .course-list .list-box .item-li:after {
                    position: absolute;
                    top: 0.5em;
                    left: 1em;
                    display: block;
                    content: "";
                    width: 1.5em;
                    height: 1.5em;
                }

                .dialog-box .course-list .list-box .item-li.complete {
                    color: #FFFF81;
                }

                    .dialog-box .course-list .list-box .item-li.complete:before {
                        background-color: #FFFF81;
                        mask-repeat: no-repeat;
                        -webkit-mask-repeat: no-repeat;
                        mask-image: url(../images/icons/tick.svg);
                        -webkit-mask-image: url(../images/icons/tick.svg);
                    }

                .dialog-box .course-list .list-box .item-li:hover {
                    background-color: #ffffffcc;
                    color: #214D6D;
                }

                .dialog-box .course-list .list-box .item-li.active {
                    background-color: #ffffff;
                    color: #214D6D;
                }

                    .dialog-box .course-list .list-box .item-li.active:before, .dialog-box .course-list .list-box .item-li.active:after {
                        top: 1em;
                        left: 1.4em;
                        background-color: #3E9D45;
                        mask-repeat: no-repeat;
                        -webkit-mask-repeat: no-repeat;
                        mask-image: url(../images/icons/hub-gear-eight.svg);
                        -webkit-mask-image: url(../images/icons/hub-gear-eight.svg);
                        width: 1em;
                        height: 1em;
                        animation: gear-turn 1s linear infinite;
                    }

                    .dialog-box .course-list .list-box .item-li.active:after {
                        top: 0.6em;
                        left: 0.75em;
                        width: 0.75em;
                        height: 0.75em;
                        animation: gear-turn 1s linear 0.1s infinite reverse;
                    }

    .dialog-box .section-cont .list-box {
        padding: 0.5em 1em 0.5em 0.5em;
    }

        .dialog-box .section-cont .list-box .item {
            display: flex;
            flex-flow: row nowrap;
            gap: 0.5em;
            justify-content: flex-start;
            align-items: center;
            padding: 0 4em 0 0;
            background-color: #ffffff;
            margin: 0 0 1em;
            border: 2px solid #ffffff;
            border-radius: 48px;
            cursor: pointer;
        }

            .dialog-box .section-cont .list-box .item .progress-pie {
                width: 5em;
                height: 5em;
                margin: -2px;
                border: 2px solid #ffffff;
            }

                .dialog-box .section-cont .list-box .item .progress-pie .pie-value {
                    background-color: #2C6691;
                }

                    .dialog-box .section-cont .list-box .item .progress-pie .pie-value span {
                        font-size: 12px;
                        transform: scale(0.75);
                    }

            .dialog-box .section-cont .list-box .item .item-info {
                display: flex;
                flex-flow: column wrap;
                gap: 0.5em;
                justify-content: flex-start;
            }

                .dialog-box .section-cont .list-box .item .item-info .title {
                    margin: 0 0.25em;
                    color: #214D6D;
                    font-size: 1.25em;
                    font-weight: 700;
                }

                .dialog-box .section-cont .list-box .item .item-info .states {
                    display: flex;
                    flex-flow: row nowrap;
                    gap: 2em;
                    background-color: #D9F0F3;
                    padding: 0 1.25em;
                    color: #2C6691;
                    border-radius: 20px;
                }

                    .dialog-box .section-cont .list-box .item .item-info .states .list {
                        display: flex;
                        flex-flow: row nowrap;
                        gap: 0.5em;
                        justify-content: flex-start;
                        align-items: baseline;
                    }

                        .dialog-box .section-cont .list-box .item .item-info .states .list span {
                            min-width: 1em;
                            text-align: center;
                            transform-origin: top center;
                        }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test] {
                                color: #FF6180;
                            }

                                .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test]:before {
                                    display: inline-block;
                                    content: attr(data-test);
                                    font-size: 1.25em;
                                    font-weight: 700;
                                }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="60"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="61"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="62"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="63"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="64"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="65"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="66"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="67"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="68"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="69"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="70"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="71"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="72"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="73"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="74"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="75"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="76"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="77"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="78"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="79"] {
                                color: #FFBF00;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="80"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="81"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="82"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="83"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="84"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="85"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="86"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="87"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="88"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="89"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="90"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="91"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="92"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="93"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="94"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="95"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="96"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="97"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="98"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="99"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-test="100"] {
                                color: #70CF77;
                            }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-value] {
                                color: #FF6180;
                            }

                                .dialog-box .section-cont .list-box .item .item-info .states .list span[data-value]:before {
                                    content: attr(data-value);
                                    font-size: 1.25em;
                                    font-weight: 700;
                                }

                            .dialog-box .section-cont .list-box .item .item-info .states .list span[data-total] {
                                color: #2C6691;
                            }

                                .dialog-box .section-cont .list-box .item .item-info .states .list span[data-total]:before {
                                    display: inline-block;
                                    content: "/ " attr(data-total) "小節";
                                }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="60"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="61"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="62"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="63"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="64"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="65"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="66"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="67"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="68"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="69"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="70"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="71"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="72"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="73"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="74"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="75"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="76"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="77"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="78"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="79"]) .states-complate span[data-value] {
                color: #FFBF00;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="80"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="81"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="82"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="83"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="84"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="85"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="86"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="87"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="88"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="89"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="90"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="91"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="92"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="93"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="94"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="95"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="96"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="97"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="98"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="99"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:has(.progress-pie .pie-value[data-value="100"]) .states-complate span[data-value] {
                color: #70CF77;
            }

            .dialog-box .section-cont .list-box .item:before {
                position: absolute;
                top: 50%;
                right: 1.25em;
                display: block;
                content: "";
                background-color: #2C6691;
                width: 2.5em;
                height: 2.5em;
                mask-image: url(../images/icons/arrow-right.svg);
                -webkit-mask-image: url(../images/icons/arrow-right.svg);
                transform: translateY(-50%);
                z-index: 10;
            }

            .dialog-box .section-cont .list-box .item:hover {
                background-color: #E7F7E8;
                border-color: #70CF77;
            }

                .dialog-box .section-cont .list-box .item:hover .progress-pie {
                    border-color: #70CF77;
                }

                .dialog-box .section-cont .list-box .item:hover .title {
                    color: #3E9D45;
                }

                .dialog-box .section-cont .list-box .item:hover .states {
                    background-color: #ffffff;
                }

                .dialog-box .section-cont .list-box .item:hover:before {
                    background-color: #3E9D45;
                }

            .dialog-box .section-cont .list-box .item.active {
                background-color: #A3E38E;
                border-color: #ffffff;
            }

                .dialog-box .section-cont .list-box .item.active .progress-pie {
                    border-color: #ffffff;
                }

                .dialog-box .section-cont .list-box .item.active .title {
                    color: #3E9D45;
                }

                .dialog-box .section-cont .list-box .item.active .states {
                    background-color: #ffffff;
                }

                .dialog-box .section-cont .list-box .item.active:before {
                    background-color: #ffffff;
                }

    .dialog-box .btn-close.round {
        position: absolute;
        top: -1.75em;
        right: -2.5em;
        z-index: 10;
    }

.icon {
    display: inline-block;
    background-color: #70CF77;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    width: 2em;
    height: 2em;
    color: #70CF77;
}

.icon-arrow-back {
    mask-image: url(../images/icons/arrow-back.svg);
    -webkit-mask-image: url(../images/icons/arrow-back.svg);
}

.icon-arrow-down {
    mask-image: url(../images/icons/arrow-down.svg);
    -webkit-mask-image: url(../images/icons/arrow-down.svg);
}

.icon-arrow-left {
    mask-image: url(../images/icons/arrow-left.svg);
    -webkit-mask-image: url(../images/icons/arrow-left.svg);
}

.icon-arrow-right {
    mask-image: url(../images/icons/arrow-right.svg);
    -webkit-mask-image: url(../images/icons/arrow-right.svg);
}

.icon-arrow-up {
    mask-image: url(../images/icons/arrow-up.svg);
    -webkit-mask-image: url(../images/icons/arrow-up.svg);
}

.icon-birthday {
    mask-image: url(../images/icons/birthday.svg);
    -webkit-mask-image: url(../images/icons/birthday.svg);
}

.icon-close {
    mask-image: url(../images/icons/close.svg);
    -webkit-mask-image: url(../images/icons/close.svg);
}

.icon-copy {
    mask-image: url(../images/icons/copy.svg);
    -webkit-mask-image: url(../images/icons/copy.svg);
}

.icon-coupon {
    mask-image: url(../images/icons/coupon.svg);
    -webkit-mask-image: url(../images/icons/coupon.svg);
}

.icon-door-open {
    mask-image: url(../images/icons/door-open.svg);
    -webkit-mask-image: url(../images/icons/door-open.svg);
}

.icon-email {
    mask-image: url(../images/icons/email.svg);
    -webkit-mask-image: url(../images/icons/email.svg);
}

.icon-exit {
    mask-image: url(../images/icons/exit.svg);
    -webkit-mask-image: url(../images/icons/exit.svg);
}

.icon-gear-eight {
    mask-image: url(../images/icons/gear-eight.svg);
    -webkit-mask-image: url(../images/icons/gear-eight.svg);
}

.icon-gear-six {
    mask-image: url(../images/icons/gear-six.svg);
    -webkit-mask-image: url(../images/icons/gear-six.svg);
}

.icon-graduation-cap {
    mask-image: url(../images/icons/graduation-cap.svg);
    -webkit-mask-image: url(../images/icons/graduation-cap.svg);
}

.icon-hub-gear-eight {
    mask-image: url(../images/icons/hub-gear-eight.svg);
    -webkit-mask-image: url(../images/icons/hub-gear-eight.svg);
}

.icon-hub-gear-six {
    mask-image: url(../images/icons/hub-gear-six.svg);
    -webkit-mask-image: url(../images/icons/hub-gear-six.svg);
}

.icon-key {
    mask-image: url(../images/icons/key.svg);
    -webkit-mask-image: url(../images/icons/key.svg);
}

.icon-key-repeat {
    mask-image: url(../images/icons/key-repeat.svg);
    -webkit-mask-image: url(../images/icons/key-repeat.svg);
}

.icon-papper-pen {
    mask-image: url(../images/icons/papper-pen.svg);
    -webkit-mask-image: url(../images/icons/papper-pen.svg);
}

.icon-program {
    mask-image: url(../images/icons/program.svg);
    -webkit-mask-image: url(../images/icons/program.svg);
}

.icon-progress-bar {
    mask-image: url(../images/icons/progress-bar.svg);
    -webkit-mask-image: url(../images/icons/progress-bar.svg);
}

.icon-python {
    mask-image: url(../images/icons/python.svg);
    -webkit-mask-image: url(../images/icons/python.svg);
}

.icon-register {
    mask-image: url(../images/icons/register.svg);
    -webkit-mask-image: url(../images/icons/register.svg);
}

.icon-replay {
    mask-image: url(../images/icons/replay.svg);
    -webkit-mask-image: url(../images/icons/replay.svg);
}

.icon-rotate-device {
    mask-image: url(../images/icons/rotate-device.svg);
    -webkit-mask-image: url(../images/icons/rotate-device.svg);
}

.icon-school {
    mask-image: url(../images/icons/school.svg);
    -webkit-mask-image: url(../images/icons/school.svg);
}

.icon-scratch {
    mask-image: url(../images/icons/scratch.svg);
    -webkit-mask-image: url(../images/icons/scratch.svg);
}

.icon-scratch-01 {
    mask-image: url(../images/icons/scratch-01.svg);
    -webkit-mask-image: url(../images/icons/scratch-01.svg);
}

.icon-smartphone {
    mask-image: url(../images/icons/smartphone.svg);
    -webkit-mask-image: url(../images/icons/smartphone.svg);
}

.icon-tick {
    mask-image: url(../images/icons/tick.svg);
    -webkit-mask-image: url(../images/icons/tick.svg);
}

.icon-turn-down-left {
    mask-image: url(../images/icons/turn-down-left.svg);
    -webkit-mask-image: url(../images/icons/turn-down-left.svg);
}

.icon-user {
    mask-image: url(../images/icons/user.svg);
    -webkit-mask-image: url(../images/icons/user.svg);
}

.tag {
    display: inline-block;
    background-color: #ffffff;
    padding: 0.25em 1em;
    color: #2C6691;
    font-size: 0.75em;
    border-radius: 20px;
}

.btn {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: #70CF77;
    min-width: 8em;
    margin: 0.5em;
    padding: 0.5em 1em;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.25em 0.5em;
    cursor: pointer;
}

@media screen and (max-width: 960px) {
    .btn {
        font-size: 15px;
    }
}

@media screen and (max-width: 640px) {
    .btn {
        font-size: 14px;
    }
}

.btn.flat {
    padding: 0.25em 0.75em;
    min-width: 6em;
}

.btn.white {
    background-color: #ffffff;
    color: #70CF77;
}

    .btn.white .icon {
        background-color: #70CF77;
    }

.btn:hover:not([class^=bg-]):not([class*=" bg-"]) {
    color: #ffffff;
    background-color: #A3E38E;
    text-shadow: 0 1px 2px #3E9D45;
    box-shadow: 0 1px 2px #3E9D45;
}

.btn:active {
    margin: 0.5em;
    box-shadow: 0 0 0 1px #3E9D45;
}

.btn.disabled {
    color: #ffffff;
    background-color: #9CA3AF;
}

    .btn.disabled:hover {
        background-color: #9CA3AF;
        text-shadow: 0 1px 2px #6B7280;
        box-shadow: 0 1px 2px #9CA3AF;
    }

.btn.round {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 2.5em;
    min-width: unset;
    height: 2.5em;
    margin: 0;
    padding: 0.5em;
    border-radius: 40px;
}

.btn:has(i.icon-arrow-left) {
    padding: 0.5em 1.25em 0.5em 0.5em;
}

.btn:has(i.icon-arrow-right) {
    padding: 0.5em 0.5em 0.5em 1.25em;
}

.btn .icon {
    background-color: #ffffff;
    width: 1.5em;
    height: 1.5em;
}

@media screen and (max-width: 1024px) {
    .btn:has(i.icon-arrow-left) {
        padding: 0.25em 0.75em 0.5em 0.25em;
    }

    .btn:has(i.icon-arrow-right) {
        padding: 0.25em 0.25em 0.25em 0.75em;
    }
}

@media screen and (max-width: 640px) {
    .btn {
        font-size: 16px;
    }
}

/* table
<div class="table-cont">
    <p class="tb-header">header</p> (可不加)
    <div class="tb-body>
        <div class="tb-table">
            <div class="tb-tr">
                <div class="tb-th">text</div>
            </div>
            <div class="tb-tr">
                <div class="tb-cell">text</div>
            </div>
        </div>
    </div>
</div> */
.table-cont {
    background-color: #ffffff;
    width: 100%;
    margin: 1em 0;
}

    .table-cont:after {
        position: sticky;
        bottom: 0;
        display: block;
        content: "";
        width: calc(100% - 2em);
        margin: 0 auto;
        border-bottom: 1px solid #70CF77;
    }

    .table-cont .tb-header {
        background-color: #E7F7E8;
        padding: 1em;
        color: #70CF77;
        font-size: 1em;
        font-weight: 700;
        text-align: center;
    }

    .table-cont .tb-body {
        overflow: auto;
    }

    .table-cont .tb-table {
        display: table;
        width: 100%;
        padding: 0 1em;
        counter-reset: num 0;
    }

        .table-cont .tb-table .tb-tr {
            display: table-row;
        }

            .table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd) {
                background-color: #E7F7E8;
            }

            .table-cont .tb-table .tb-tr:has(.tb-th) {
                position: sticky;
                top: 0;
                background-color: #ffffff;
                z-index: 10;
            }

            .table-cont .tb-table .tb-tr .tb-th, .table-cont .tb-table .tb-tr .tb-cell {
                display: table-cell;
                padding: 0.5em;
                text-align: left;
                vertical-align: middle;
            }

                .table-cont .tb-table .tb-tr .tb-th .btn, .table-cont .tb-table .tb-tr .tb-cell .btn {
                    margin: auto;
                }

            .table-cont .tb-table .tb-tr .tb-th {
                color: #70CF77;
                border-bottom: 1px solid #70CF77;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(1) {
                order: 1;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(2) {
                order: 2;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(3) {
                order: 3;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(4) {
                order: 4;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(5) {
                order: 5;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(6) {
                order: 6;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(7) {
                order: 7;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(8) {
                order: 8;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(9) {
                order: 9;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(10) {
                order: 10;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(11) {
                order: 11;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(12) {
                order: 12;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(13) {
                order: 13;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(14) {
                order: 14;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(15) {
                order: 15;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(16) {
                order: 16;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(17) {
                order: 17;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(18) {
                order: 18;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(19) {
                order: 19;
            }

            .table-cont .tb-table .tb-tr .tb-cell:nth-of-type(20) {
                order: 20;
            }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(1).text-left) :is(.tb-th, .tb-cell):nth-of-type(1) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(1).text-center) :is(.tb-th, .tb-cell):nth-of-type(1) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(1).text-right) :is(.tb-th, .tb-cell):nth-of-type(1) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(2).text-left) :is(.tb-th, .tb-cell):nth-of-type(2) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(2).text-center) :is(.tb-th, .tb-cell):nth-of-type(2) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(2).text-right) :is(.tb-th, .tb-cell):nth-of-type(2) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(3).text-left) :is(.tb-th, .tb-cell):nth-of-type(3) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(3).text-center) :is(.tb-th, .tb-cell):nth-of-type(3) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(3).text-right) :is(.tb-th, .tb-cell):nth-of-type(3) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(4).text-left) :is(.tb-th, .tb-cell):nth-of-type(4) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(4).text-center) :is(.tb-th, .tb-cell):nth-of-type(4) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(4).text-right) :is(.tb-th, .tb-cell):nth-of-type(4) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(5).text-left) :is(.tb-th, .tb-cell):nth-of-type(5) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(5).text-center) :is(.tb-th, .tb-cell):nth-of-type(5) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(5).text-right) :is(.tb-th, .tb-cell):nth-of-type(5) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(6).text-left) :is(.tb-th, .tb-cell):nth-of-type(6) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(6).text-center) :is(.tb-th, .tb-cell):nth-of-type(6) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(6).text-right) :is(.tb-th, .tb-cell):nth-of-type(6) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(7).text-left) :is(.tb-th, .tb-cell):nth-of-type(7) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(7).text-center) :is(.tb-th, .tb-cell):nth-of-type(7) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(7).text-right) :is(.tb-th, .tb-cell):nth-of-type(7) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(8).text-left) :is(.tb-th, .tb-cell):nth-of-type(8) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(8).text-center) :is(.tb-th, .tb-cell):nth-of-type(8) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(8).text-right) :is(.tb-th, .tb-cell):nth-of-type(8) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(9).text-left) :is(.tb-th, .tb-cell):nth-of-type(9) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(9).text-center) :is(.tb-th, .tb-cell):nth-of-type(9) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(9).text-right) :is(.tb-th, .tb-cell):nth-of-type(9) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(10).text-left) :is(.tb-th, .tb-cell):nth-of-type(10) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(10).text-center) :is(.tb-th, .tb-cell):nth-of-type(10) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(10).text-right) :is(.tb-th, .tb-cell):nth-of-type(10) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(11).text-left) :is(.tb-th, .tb-cell):nth-of-type(11) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(11).text-center) :is(.tb-th, .tb-cell):nth-of-type(11) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(11).text-right) :is(.tb-th, .tb-cell):nth-of-type(11) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(12).text-left) :is(.tb-th, .tb-cell):nth-of-type(12) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(12).text-center) :is(.tb-th, .tb-cell):nth-of-type(12) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(12).text-right) :is(.tb-th, .tb-cell):nth-of-type(12) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(13).text-left) :is(.tb-th, .tb-cell):nth-of-type(13) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(13).text-center) :is(.tb-th, .tb-cell):nth-of-type(13) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(13).text-right) :is(.tb-th, .tb-cell):nth-of-type(13) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(14).text-left) :is(.tb-th, .tb-cell):nth-of-type(14) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(14).text-center) :is(.tb-th, .tb-cell):nth-of-type(14) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(14).text-right) :is(.tb-th, .tb-cell):nth-of-type(14) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(15).text-left) :is(.tb-th, .tb-cell):nth-of-type(15) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(15).text-center) :is(.tb-th, .tb-cell):nth-of-type(15) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(15).text-right) :is(.tb-th, .tb-cell):nth-of-type(15) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(16).text-left) :is(.tb-th, .tb-cell):nth-of-type(16) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(16).text-center) :is(.tb-th, .tb-cell):nth-of-type(16) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(16).text-right) :is(.tb-th, .tb-cell):nth-of-type(16) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(17).text-left) :is(.tb-th, .tb-cell):nth-of-type(17) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(17).text-center) :is(.tb-th, .tb-cell):nth-of-type(17) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(17).text-right) :is(.tb-th, .tb-cell):nth-of-type(17) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(18).text-left) :is(.tb-th, .tb-cell):nth-of-type(18) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(18).text-center) :is(.tb-th, .tb-cell):nth-of-type(18) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(18).text-right) :is(.tb-th, .tb-cell):nth-of-type(18) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(19).text-left) :is(.tb-th, .tb-cell):nth-of-type(19) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(19).text-center) :is(.tb-th, .tb-cell):nth-of-type(19) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(19).text-right) :is(.tb-th, .tb-cell):nth-of-type(19) {
            text-align: right;
        }

        .table-cont .tb-table:first-of-type():has([class^=tb-]:nth-of-type(20).text-left) :is(.tb-th, .tb-cell):nth-of-type(20) {
            text-align: left;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(20).text-center) :is(.tb-th, .tb-cell):nth-of-type(20) {
            text-align: center;
        }

        .table-cont .tb-table:has([class^=tb-]:nth-of-type(20).text-right) :is(.tb-th, .tb-cell):nth-of-type(20) {
            text-align: right;
        }

@media screen and (max-width: 1600px) {
    .table-cont:has(.tb-rwd-4xl):after {
        content: none;
    }

    .table-cont .tb-body:has(.tb-rwd-4xl) {
        max-height: unset !important;
    }

    .table-cont .tb-table.tb-rwd-4xl {
        padding: 0;
        display: flex;
        flex-flow: column wrap;
        gap: 1em 0;
    }

        .table-cont .tb-table.tb-rwd-4xl .tb-tr {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            /* gap: 0.5em; */
            background-color: #E7F7E8;
            padding: 0.25em;
            border: 2px solid #A3E38E33;
            border-radius: 12px;
        }

            .table-cont .tb-table.tb-rwd-4xl .tb-tr:has(.tb-th) {
                display: none;
            }

            .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                flex: 1 1 auto;
                gap: 0.5em;
                max-width: unset;
                text-align: left;
                word-break: break-all;
            }

                .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell:before {
                    display: inline-block;
                    content: attr(data-title);
                    font-size: 0.75em;
                    text-align: center;
                    white-space: nowrap;
                }
}

@media screen and (max-width: 1440px) {
    .table-cont:has(.tb-rwd-3xl):after {
        content: none;
    }

    .table-cont .tb-body:has(.tb-rwd-3xl) {
        max-height: unset !important;
    }

    .table-cont .tb-table.tb-rwd-3xl {
        padding: 0;
        display: flex;
        flex-flow: column wrap;
        gap: 1em 0;
    }

        .table-cont .tb-table.tb-rwd-3xl .tb-tr {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            /* gap: 0.5em; */
            background-color: #E7F7E8;
            padding: 0.25em;
            border: 2px solid #A3E38E33;
            border-radius: 12px;
        }

            .table-cont .tb-table.tb-rwd-3xl .tb-tr:has(.tb-th) {
                display: none;
            }

            .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                flex: 1 1 auto;
                gap: 0.5em;
                max-width: unset;
                text-align: left;
                word-break: break-all;
            }

                .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell:before {
                    display: inline-block;
                    content: attr(data-title);
                    font-size: 0.75em;
                    text-align: center;
                    white-space: nowrap;
                }
}

@media screen and (max-width: 1280px) {
    .table-cont:has(.tb-rwd-2xl):after {
        content: none;
    }

    .table-cont .tb-body:has(.tb-rwd-2xl) {
        max-height: unset !important;
    }

    .table-cont .tb-table.tb-rwd-2xl {
        padding: 0;
        display: flex;
        flex-flow: column wrap;
        gap: 1em 0;
    }

        .table-cont .tb-table.tb-rwd-2xl .tb-tr {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            /* gap: 0.5em; */
            background-color: #E7F7E8;
            padding: 0.25em;
            border: 2px solid #A3E38E33;
            border-radius: 12px;
        }

            .table-cont .tb-table.tb-rwd-2xl .tb-tr:has(.tb-th) {
                display: none;
            }

            .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                flex: 1 1 auto;
                gap: 0.5em;
                max-width: unset;
                text-align: left;
                word-break: break-all;
            }

                .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell:before {
                    display: inline-block;
                    content: attr(data-title);
                    font-size: 0.75em;
                    text-align: center;
                    white-space: nowrap;
                }
}

@media screen and (max-width: 1024px) {
    .table-cont:has(.tb-rwd-xl):after {
        content: none;
    }

    .table-cont .tb-body:has(.tb-rwd-xl) {
        max-height: unset !important;
    }

    .table-cont .tb-table.tb-rwd-xl {
        padding: 0;
        display: flex;
        flex-flow: column wrap;
        gap: 1em 0;
    }

        .table-cont .tb-table.tb-rwd-xl .tb-tr {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            /* gap: 0.5em; */
            background-color: #E7F7E8;
            padding: 0.25em;
            border: 2px solid #A3E38E33;
            border-radius: 12px;
        }

            .table-cont .tb-table.tb-rwd-xl .tb-tr:has(.tb-th) {
                display: none;
            }

            .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                flex: 1 1 auto;
                gap: 0.5em;
                max-width: unset;
                text-align: left;
                word-break: break-all;
            }

                .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell:before {
                    display: inline-block;
                    content: attr(data-title);
                    font-size: 0.75em;
                    text-align: center;
                    white-space: nowrap;
                }
}

@media screen and (max-width: 960px) {
    .table-cont:has(.tb-rwd-lg):after {
        content: none;
    }

    .table-cont .tb-body:has(.tb-rwd-lg) {
        max-height: unset !important;
    }

    .table-cont .tb-table.tb-rwd-lg {
        padding: 0;
        display: flex;
        flex-flow: column wrap;
        gap: 1em 0;
    }

        .table-cont .tb-table.tb-rwd-lg .tb-tr {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            /* gap: 0.5em; */
            background-color: #E7F7E8;
            padding: 0.25em;
            border: 2px solid #A3E38E33;
            border-radius: 12px;
        }

            .table-cont .tb-table.tb-rwd-lg .tb-tr:has(.tb-th) {
                display: none;
            }

            .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                flex: 1 1 auto;
                gap: 0.5em;
                max-width: unset;
                text-align: left;
                word-break: break-all;
            }

                .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell:before {
                    display: inline-block;
                    content: attr(data-title);
                    font-size: 0.75em;
                    text-align: center;
                    white-space: nowrap;
                }
}

@media screen and (max-width: 800px) {
    .table-cont:has(.tb-rwd-md):after {
        content: none;
    }

    .table-cont .tb-body:has(.tb-rwd-md) {
        max-height: unset !important;
    }

    .table-cont .tb-table.tb-rwd-md {
        padding: 0;
        display: flex;
        flex-flow: column wrap;
        gap: 1em 0;
    }

        .table-cont .tb-table.tb-rwd-md .tb-tr {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            /* gap: 0.5em; */
            background-color: #E7F7E8;
            padding: 0.25em;
            border: 2px solid #A3E38E33;
            border-radius: 12px;
        }

            .table-cont .tb-table.tb-rwd-md .tb-tr:has(.tb-th) {
                display: none;
            }

            .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                flex: 1 1 auto;
                gap: 0.5em;
                max-width: unset;
                text-align: left;
                word-break: break-all;
            }

                .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell:before {
                    display: inline-block;
                    content: attr(data-title);
                    font-size: 0.75em;
                    text-align: center;
                    white-space: nowrap;
                }
}

@media screen and (max-width: 640px) {
    .table-cont:has(.tb-rwd-sm):after {
        content: none;
    }

    .table-cont .tb-body:has(.tb-rwd-sm) {
        max-height: unset !important;
    }

    .table-cont .tb-table.tb-rwd-sm {
        padding: 0;
        display: flex;
        flex-flow: column wrap;
        gap: 1em 0;
    }

        .table-cont .tb-table.tb-rwd-sm .tb-tr {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            /* gap: 0.5em; */
            background-color: #E7F7E8;
            padding: 0.25em;
            border: 2px solid #A3E38E33;
            border-radius: 12px;
        }

            .table-cont .tb-table.tb-rwd-sm .tb-tr:has(.tb-th) {
                display: none;
            }

            .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                flex: 1 1 auto;
                gap: 0.5em;
                max-width: unset;
                text-align: left;
                word-break: break-all;
            }

                .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell:before {
                    display: inline-block;
                    content: attr(data-title);
                    font-size: 0.75em;
                    text-align: center;
                    white-space: nowrap;
                }
}

@media screen and (max-width: 480px) {
    .table-cont:has(.tb-rwd-xs):after {
        content: none;
    }

    .table-cont .tb-body:has(.tb-rwd-xs) {
        max-height: unset !important;
    }

    .table-cont .tb-table.tb-rwd-xs {
        padding: 0;
        display: flex;
        flex-flow: column wrap;
        gap: 1em 0;
    }

        .table-cont .tb-table.tb-rwd-xs .tb-tr {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            /* gap: 0.5em; */
            background-color: #E7F7E8;
            padding: 0.25em;
            border: 2px solid #A3E38E33;
            border-radius: 12px;
        }

            .table-cont .tb-table.tb-rwd-xs .tb-tr:has(.tb-th) {
                display: none;
            }

            .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                flex: 1 1 auto;
                gap: 0.5em;
                max-width: unset;
                text-align: left;
                word-break: break-all;
            }

                .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell:before {
                    display: inline-block;
                    content: attr(data-title);
                    font-size: 0.75em;
                    text-align: center;
                    white-space: nowrap;
                }
}

@media screen and (max-width: 320px) {
    .table-cont:has(.tb-rwd-2xs):after {
        content: none;
    }

    .table-cont .tb-body:has(.tb-rwd-2xs) {
        max-height: unset !important;
    }

    .table-cont .tb-table.tb-rwd-2xs {
        padding: 0;
        display: flex;
        flex-flow: column wrap;
        gap: 1em 0;
    }

        .table-cont .tb-table.tb-rwd-2xs .tb-tr {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            /* gap: 0.5em; */
            background-color: #E7F7E8;
            padding: 0.25em;
            border: 2px solid #A3E38E33;
            border-radius: 12px;
        }

            .table-cont .tb-table.tb-rwd-2xs .tb-tr:has(.tb-th) {
                display: none;
            }

            .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                flex: 1 1 auto;
                gap: 0.5em;
                max-width: unset;
                text-align: left;
                word-break: break-all;
            }

                .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell:before {
                    display: inline-block;
                    content: attr(data-title);
                    font-size: 0.75em;
                    text-align: center;
                    white-space: nowrap;
                }
}

.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #70CF77;
}

.progress-bar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-width: 8em;
    max-height: 1em;
    background-color: #E7F7E8;
    border-radius: 20px;
    overflow: hidden;
}

    .progress-bar:before, .progress-bar:after {
        display: block;
        content: "";
    }

    .progress-bar:before {
        background-color: #70CF77;
        height: 1em;
        border-radius: 20px;
    }

    .progress-bar:after {
        content: attr(data-value) "%";
        margin: 0 0.25em;
        color: #70CF77;
        font-size: 0.75em;
        transform: scale(0.9);
    }

    .progress-bar[data-value="0"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="0"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="0"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="1"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="1"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="1"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="2"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="2"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="2"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="3"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="3"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="3"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="4"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="4"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="4"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="5"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="5"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="5"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="6"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="6"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="6"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="7"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="7"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="7"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="8"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="8"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="8"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="9"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="9"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="9"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="10"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="10"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="10"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="11"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="11"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="11"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="12"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="12"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="12"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="13"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="13"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="13"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="14"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="14"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="14"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="15"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="15"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="15"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="16"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="16"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="16"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="17"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="17"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="17"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="18"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="18"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="18"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="19"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="19"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="19"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="20"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="20"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="20"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="21"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="21"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="21"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="22"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="22"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="22"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="23"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="23"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="23"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="24"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="24"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="24"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="25"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="25"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="25"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="26"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="26"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="26"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="27"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="27"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="27"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="28"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="28"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="28"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="29"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="29"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="29"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="30"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="30"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="30"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="31"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="31"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="31"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="32"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="32"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="32"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="33"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="33"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="33"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="34"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="34"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="34"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="35"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="35"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="35"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="36"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="36"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="36"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="37"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="37"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="37"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="38"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="38"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="38"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="39"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="39"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="39"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="40"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="40"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="40"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="41"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="41"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="41"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="42"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="42"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="42"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="43"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="43"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="43"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="44"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="44"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="44"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="45"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="45"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="45"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="46"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="46"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="46"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="47"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="47"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="47"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="48"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="48"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="48"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="49"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="49"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="49"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="50"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="50"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="50"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="51"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="51"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="51"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="52"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="52"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="52"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="53"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="53"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="53"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="54"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="54"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="54"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="55"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="55"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="55"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="56"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="56"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="56"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="57"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="57"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="57"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="58"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="58"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="58"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="59"] {
        background-color: #FFEBEF;
    }

        .progress-bar[data-value="59"]:before {
            background-color: #FF6180;
        }

        .progress-bar[data-value="59"]:after {
            color: #FF6180;
        }

    .progress-bar[data-value="60"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="60"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="60"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="61"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="61"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="61"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="62"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="62"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="62"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="63"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="63"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="63"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="64"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="64"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="64"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="65"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="65"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="65"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="66"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="66"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="66"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="67"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="67"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="67"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="68"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="68"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="68"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="69"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="69"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="69"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="70"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="70"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="70"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="71"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="71"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="71"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="72"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="72"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="72"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="73"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="73"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="73"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="74"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="74"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="74"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="75"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="75"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="75"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="76"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="76"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="76"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="77"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="77"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="77"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="78"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="78"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="78"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="79"] {
        background-color: #FFFCE6;
    }

        .progress-bar[data-value="79"]:before {
            background-color: #FFBF00;
        }

        .progress-bar[data-value="79"]:after {
            color: #FFBF00;
        }

    .progress-bar[data-value="80"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="80"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="80"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="81"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="81"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="81"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="82"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="82"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="82"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="83"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="83"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="83"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="84"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="84"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="84"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="85"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="85"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="85"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="86"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="86"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="86"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="87"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="87"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="87"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="88"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="88"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="88"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="89"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="89"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="89"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="90"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="90"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="90"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="91"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="91"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="91"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="92"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="92"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="92"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="93"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="93"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="93"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="94"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="94"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="94"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="95"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="95"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="95"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="96"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="96"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="96"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="97"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="97"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="97"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="98"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="98"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="98"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="99"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="99"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="99"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="100"] {
        background-color: #E7F7E8;
    }

        .progress-bar[data-value="100"]:before {
            background-color: #70CF77;
        }

        .progress-bar[data-value="100"]:after {
            color: #70CF77;
        }

    .progress-bar[data-value="0"]:before {
        width: 0%;
    }

    .progress-bar[data-value="1"]:before {
        width: 1%;
    }

    .progress-bar[data-value="2"]:before {
        width: 2%;
    }

    .progress-bar[data-value="3"]:before {
        width: 3%;
    }

    .progress-bar[data-value="4"]:before {
        width: 4%;
    }

    .progress-bar[data-value="5"]:before {
        width: 5%;
    }

    .progress-bar[data-value="6"]:before {
        width: 6%;
    }

    .progress-bar[data-value="7"]:before {
        width: 7%;
    }

    .progress-bar[data-value="8"]:before {
        width: 8%;
    }

    .progress-bar[data-value="9"]:before {
        width: 9%;
    }

    .progress-bar[data-value="10"]:before {
        width: 10%;
    }

    .progress-bar[data-value="11"]:before {
        width: 11%;
    }

    .progress-bar[data-value="12"]:before {
        width: 12%;
    }

    .progress-bar[data-value="13"]:before {
        width: 13%;
    }

    .progress-bar[data-value="14"]:before {
        width: 14%;
    }

    .progress-bar[data-value="15"]:before {
        width: 15%;
    }

    .progress-bar[data-value="16"]:before {
        width: 16%;
    }

    .progress-bar[data-value="17"]:before {
        width: 17%;
    }

    .progress-bar[data-value="18"]:before {
        width: 18%;
    }

    .progress-bar[data-value="19"]:before {
        width: 19%;
    }

    .progress-bar[data-value="20"]:before {
        width: 20%;
    }

    .progress-bar[data-value="21"]:before {
        width: 21%;
    }

    .progress-bar[data-value="22"]:before {
        width: 22%;
    }

    .progress-bar[data-value="23"]:before {
        width: 23%;
    }

    .progress-bar[data-value="24"]:before {
        width: 24%;
    }

    .progress-bar[data-value="25"]:before {
        width: 25%;
    }

    .progress-bar[data-value="26"]:before {
        width: 26%;
    }

    .progress-bar[data-value="27"]:before {
        width: 27%;
    }

    .progress-bar[data-value="28"]:before {
        width: 28%;
    }

    .progress-bar[data-value="29"]:before {
        width: 29%;
    }

    .progress-bar[data-value="30"]:before {
        width: 30%;
    }

    .progress-bar[data-value="31"]:before {
        width: 31%;
    }

    .progress-bar[data-value="32"]:before {
        width: 32%;
    }

    .progress-bar[data-value="33"]:before {
        width: 33%;
    }

    .progress-bar[data-value="34"]:before {
        width: 34%;
    }

    .progress-bar[data-value="35"]:before {
        width: 35%;
    }

    .progress-bar[data-value="36"]:before {
        width: 36%;
    }

    .progress-bar[data-value="37"]:before {
        width: 37%;
    }

    .progress-bar[data-value="38"]:before {
        width: 38%;
    }

    .progress-bar[data-value="39"]:before {
        width: 39%;
    }

    .progress-bar[data-value="40"]:before {
        width: 40%;
    }

    .progress-bar[data-value="41"]:before {
        width: 41%;
    }

    .progress-bar[data-value="42"]:before {
        width: 42%;
    }

    .progress-bar[data-value="43"]:before {
        width: 43%;
    }

    .progress-bar[data-value="44"]:before {
        width: 44%;
    }

    .progress-bar[data-value="45"]:before {
        width: 45%;
    }

    .progress-bar[data-value="46"]:before {
        width: 46%;
    }

    .progress-bar[data-value="47"]:before {
        width: 47%;
    }

    .progress-bar[data-value="48"]:before {
        width: 48%;
    }

    .progress-bar[data-value="49"]:before {
        width: 49%;
    }

    .progress-bar[data-value="50"]:before {
        width: 50%;
    }

    .progress-bar[data-value="51"]:before {
        width: 51%;
    }

    .progress-bar[data-value="52"]:before {
        width: 52%;
    }

    .progress-bar[data-value="53"]:before {
        width: 53%;
    }

    .progress-bar[data-value="54"]:before {
        width: 54%;
    }

    .progress-bar[data-value="55"]:before {
        width: 55%;
    }

    .progress-bar[data-value="56"]:before {
        width: 56%;
    }

    .progress-bar[data-value="57"]:before {
        width: 57%;
    }

    .progress-bar[data-value="58"]:before {
        width: 58%;
    }

    .progress-bar[data-value="59"]:before {
        width: 59%;
    }

    .progress-bar[data-value="60"]:before {
        width: 60%;
    }

    .progress-bar[data-value="61"]:before {
        width: 61%;
    }

    .progress-bar[data-value="62"]:before {
        width: 62%;
    }

    .progress-bar[data-value="63"]:before {
        width: 63%;
    }

    .progress-bar[data-value="64"]:before {
        width: 64%;
    }

    .progress-bar[data-value="65"]:before {
        width: 65%;
    }

    .progress-bar[data-value="66"]:before {
        width: 66%;
    }

    .progress-bar[data-value="67"]:before {
        width: 67%;
    }

    .progress-bar[data-value="68"]:before {
        width: 68%;
    }

    .progress-bar[data-value="69"]:before {
        width: 69%;
    }

    .progress-bar[data-value="70"]:before {
        width: 70%;
    }

    .progress-bar[data-value="71"]:before {
        width: 71%;
    }

    .progress-bar[data-value="72"]:before {
        width: 72%;
    }

    .progress-bar[data-value="73"]:before {
        width: 73%;
    }

    .progress-bar[data-value="74"]:before {
        width: 74%;
    }

    .progress-bar[data-value="75"]:before {
        width: 75%;
    }

    .progress-bar[data-value="76"]:before {
        width: 76%;
    }

    .progress-bar[data-value="77"]:before {
        width: 77%;
    }

    .progress-bar[data-value="78"]:before {
        width: 78%;
    }

    .progress-bar[data-value="79"]:before {
        width: 79%;
    }

    .progress-bar[data-value="80"]:before {
        width: 80%;
    }

    .progress-bar[data-value="81"]:before {
        width: 81%;
    }

    .progress-bar[data-value="82"]:before {
        width: 82%;
    }

    .progress-bar[data-value="83"]:before {
        width: 83%;
    }

    .progress-bar[data-value="84"]:before {
        width: 84%;
    }

    .progress-bar[data-value="85"]:before {
        width: 85%;
    }

    .progress-bar[data-value="86"]:before {
        width: 86%;
    }

    .progress-bar[data-value="87"]:before {
        width: 87%;
    }

    .progress-bar[data-value="88"]:before {
        width: 88%;
    }

    .progress-bar[data-value="89"]:before {
        width: 89%;
    }

    .progress-bar[data-value="90"]:before {
        width: 90%;
    }

    .progress-bar[data-value="91"]:before {
        width: 91%;
    }

    .progress-bar[data-value="92"]:before {
        width: 92%;
    }

    .progress-bar[data-value="93"]:before {
        width: 93%;
    }

    .progress-bar[data-value="94"]:before {
        width: 94%;
    }

    .progress-bar[data-value="95"]:before {
        width: 95%;
    }

    .progress-bar[data-value="96"]:before {
        width: 96%;
    }

    .progress-bar[data-value="97"]:before {
        width: 97%;
    }

    .progress-bar[data-value="98"]:before {
        width: 98%;
    }

    .progress-bar[data-value="99"]:before {
        width: 99%;
    }

    .progress-bar[data-value="100"]:before {
        width: 100%;
    }

    .progress-bar[data-value="30"]:after {
        position: absolute;
        right: 70%;
        color: #ffffff;
    }

    .progress-bar[data-value="31"]:after {
        position: absolute;
        right: 69%;
        color: #ffffff;
    }

    .progress-bar[data-value="32"]:after {
        position: absolute;
        right: 68%;
        color: #ffffff;
    }

    .progress-bar[data-value="33"]:after {
        position: absolute;
        right: 67%;
        color: #ffffff;
    }

    .progress-bar[data-value="34"]:after {
        position: absolute;
        right: 66%;
        color: #ffffff;
    }

    .progress-bar[data-value="35"]:after {
        position: absolute;
        right: 65%;
        color: #ffffff;
    }

    .progress-bar[data-value="36"]:after {
        position: absolute;
        right: 64%;
        color: #ffffff;
    }

    .progress-bar[data-value="37"]:after {
        position: absolute;
        right: 63%;
        color: #ffffff;
    }

    .progress-bar[data-value="38"]:after {
        position: absolute;
        right: 62%;
        color: #ffffff;
    }

    .progress-bar[data-value="39"]:after {
        position: absolute;
        right: 61%;
        color: #ffffff;
    }

    .progress-bar[data-value="40"]:after {
        position: absolute;
        right: 60%;
        color: #ffffff;
    }

    .progress-bar[data-value="41"]:after {
        position: absolute;
        right: 59%;
        color: #ffffff;
    }

    .progress-bar[data-value="42"]:after {
        position: absolute;
        right: 58%;
        color: #ffffff;
    }

    .progress-bar[data-value="43"]:after {
        position: absolute;
        right: 57%;
        color: #ffffff;
    }

    .progress-bar[data-value="44"]:after {
        position: absolute;
        right: 56%;
        color: #ffffff;
    }

    .progress-bar[data-value="45"]:after {
        position: absolute;
        right: 55%;
        color: #ffffff;
    }

    .progress-bar[data-value="46"]:after {
        position: absolute;
        right: 54%;
        color: #ffffff;
    }

    .progress-bar[data-value="47"]:after {
        position: absolute;
        right: 53%;
        color: #ffffff;
    }

    .progress-bar[data-value="48"]:after {
        position: absolute;
        right: 52%;
        color: #ffffff;
    }

    .progress-bar[data-value="49"]:after {
        position: absolute;
        right: 51%;
        color: #ffffff;
    }

    .progress-bar[data-value="50"]:after {
        position: absolute;
        right: 50%;
        color: #ffffff;
    }

    .progress-bar[data-value="51"]:after {
        position: absolute;
        right: 49%;
        color: #ffffff;
    }

    .progress-bar[data-value="52"]:after {
        position: absolute;
        right: 48%;
        color: #ffffff;
    }

    .progress-bar[data-value="53"]:after {
        position: absolute;
        right: 47%;
        color: #ffffff;
    }

    .progress-bar[data-value="54"]:after {
        position: absolute;
        right: 46%;
        color: #ffffff;
    }

    .progress-bar[data-value="55"]:after {
        position: absolute;
        right: 45%;
        color: #ffffff;
    }

    .progress-bar[data-value="56"]:after {
        position: absolute;
        right: 44%;
        color: #ffffff;
    }

    .progress-bar[data-value="57"]:after {
        position: absolute;
        right: 43%;
        color: #ffffff;
    }

    .progress-bar[data-value="58"]:after {
        position: absolute;
        right: 42%;
        color: #ffffff;
    }

    .progress-bar[data-value="59"]:after {
        position: absolute;
        right: 41%;
        color: #ffffff;
    }

    .progress-bar[data-value="60"]:after {
        position: absolute;
        right: 40%;
        color: #ffffff;
    }

    .progress-bar[data-value="61"]:after {
        position: absolute;
        right: 39%;
        color: #ffffff;
    }

    .progress-bar[data-value="62"]:after {
        position: absolute;
        right: 38%;
        color: #ffffff;
    }

    .progress-bar[data-value="63"]:after {
        position: absolute;
        right: 37%;
        color: #ffffff;
    }

    .progress-bar[data-value="64"]:after {
        position: absolute;
        right: 36%;
        color: #ffffff;
    }

    .progress-bar[data-value="65"]:after {
        position: absolute;
        right: 35%;
        color: #ffffff;
    }

    .progress-bar[data-value="66"]:after {
        position: absolute;
        right: 34%;
        color: #ffffff;
    }

    .progress-bar[data-value="67"]:after {
        position: absolute;
        right: 33%;
        color: #ffffff;
    }

    .progress-bar[data-value="68"]:after {
        position: absolute;
        right: 32%;
        color: #ffffff;
    }

    .progress-bar[data-value="69"]:after {
        position: absolute;
        right: 31%;
        color: #ffffff;
    }

    .progress-bar[data-value="70"]:after {
        position: absolute;
        right: 30%;
        color: #ffffff;
    }

    .progress-bar[data-value="71"]:after {
        position: absolute;
        right: 29%;
        color: #ffffff;
    }

    .progress-bar[data-value="72"]:after {
        position: absolute;
        right: 28%;
        color: #ffffff;
    }

    .progress-bar[data-value="73"]:after {
        position: absolute;
        right: 27%;
        color: #ffffff;
    }

    .progress-bar[data-value="74"]:after {
        position: absolute;
        right: 26%;
        color: #ffffff;
    }

    .progress-bar[data-value="75"]:after {
        position: absolute;
        right: 25%;
        color: #ffffff;
    }

    .progress-bar[data-value="76"]:after {
        position: absolute;
        right: 24%;
        color: #ffffff;
    }

    .progress-bar[data-value="77"]:after {
        position: absolute;
        right: 23%;
        color: #ffffff;
    }

    .progress-bar[data-value="78"]:after {
        position: absolute;
        right: 22%;
        color: #ffffff;
    }

    .progress-bar[data-value="79"]:after {
        position: absolute;
        right: 21%;
        color: #ffffff;
    }

    .progress-bar[data-value="80"]:after {
        position: absolute;
        right: 20%;
        color: #ffffff;
    }

    .progress-bar[data-value="81"]:after {
        position: absolute;
        right: 19%;
        color: #ffffff;
    }

    .progress-bar[data-value="82"]:after {
        position: absolute;
        right: 18%;
        color: #ffffff;
    }

    .progress-bar[data-value="83"]:after {
        position: absolute;
        right: 17%;
        color: #ffffff;
    }

    .progress-bar[data-value="84"]:after {
        position: absolute;
        right: 16%;
        color: #ffffff;
    }

    .progress-bar[data-value="85"]:after {
        position: absolute;
        right: 15%;
        color: #ffffff;
    }

    .progress-bar[data-value="86"]:after {
        position: absolute;
        right: 14%;
        color: #ffffff;
    }

    .progress-bar[data-value="87"]:after {
        position: absolute;
        right: 13%;
        color: #ffffff;
    }

    .progress-bar[data-value="88"]:after {
        position: absolute;
        right: 12%;
        color: #ffffff;
    }

    .progress-bar[data-value="89"]:after {
        position: absolute;
        right: 11%;
        color: #ffffff;
    }

    .progress-bar[data-value="90"]:after {
        position: absolute;
        right: 10%;
        color: #ffffff;
    }

    .progress-bar[data-value="91"]:after {
        position: absolute;
        right: 9%;
        color: #ffffff;
    }

    .progress-bar[data-value="92"]:after {
        position: absolute;
        right: 8%;
        color: #ffffff;
    }

    .progress-bar[data-value="93"]:after {
        position: absolute;
        right: 7%;
        color: #ffffff;
    }

    .progress-bar[data-value="94"]:after {
        position: absolute;
        right: 6%;
        color: #ffffff;
    }

    .progress-bar[data-value="95"]:after {
        position: absolute;
        right: 5%;
        color: #ffffff;
    }

    .progress-bar[data-value="96"]:after {
        position: absolute;
        right: 4%;
        color: #ffffff;
    }

    .progress-bar[data-value="97"]:after {
        position: absolute;
        right: 3%;
        color: #ffffff;
    }

    .progress-bar[data-value="98"]:after {
        position: absolute;
        right: 2%;
        color: #ffffff;
    }

    .progress-bar[data-value="99"]:after {
        position: absolute;
        right: 1%;
        color: #ffffff;
    }

    .progress-bar[data-value="100"]:after {
        position: absolute;
        right: 0%;
        color: #ffffff;
    }

.progress-pie {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

    .progress-pie .pie-value, .progress-pie .pie {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }

    .progress-pie .pie-value {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 76%;
        height: 76%;
        color: #ffffff;
        text-shadow: 0 0 4px #111827;
    }

        .progress-pie .pie-value:before {
            display: block;
            content: attr(data-value) "%";
            color: #ffffff;
            white-space: nowrap;
        }

        .progress-pie .pie-value span {
            white-space: nowrap;
        }

    .progress-pie .pie {
        width: 100%;
        height: 100%;
        mask: radial-gradient(transparent, transparent 54%, #000 55%, #000 0%);
        -webkit-mask: radial-gradient(transparent, transparent 54%, #000 55%, #000 0%);
        background-image: conic-gradient(#FF6180 0%, #FF6180 0%);
        z-index: 10;
    }

        .progress-pie .pie .pie-round {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

            .progress-pie .pie:before, .progress-pie .pie .pie-round:before {
                position: absolute;
                top: 0;
                left: 50%;
                display: block;
                content: "";
                width: 12%;
                height: 12%;
                background-color: #70CF77;
                border-radius: 50%;
                transform: translateX(-50%);
            }

    .progress-pie:has(.pie-value[data-value="0"]) .pie:before, .progress-pie:has(.pie-value[data-value="0"]) .pie .pie-round:before {
        display: none;
    }

    .progress-pie:has(.pie-value[data-value="1"]) .pie .pie-round {
        transform: rotate(3.6deg);
    }

    .progress-pie:has(.pie-value[data-value="2"]) .pie .pie-round {
        transform: rotate(7.2deg);
    }

    .progress-pie:has(.pie-value[data-value="3"]) .pie .pie-round {
        transform: rotate(10.8deg);
    }

    .progress-pie:has(.pie-value[data-value="4"]) .pie .pie-round {
        transform: rotate(14.4deg);
    }

    .progress-pie:has(.pie-value[data-value="5"]) .pie .pie-round {
        transform: rotate(18deg);
    }

    .progress-pie:has(.pie-value[data-value="6"]) .pie .pie-round {
        transform: rotate(21.6deg);
    }

    .progress-pie:has(.pie-value[data-value="7"]) .pie .pie-round {
        transform: rotate(25.2deg);
    }

    .progress-pie:has(.pie-value[data-value="8"]) .pie .pie-round {
        transform: rotate(28.8deg);
    }

    .progress-pie:has(.pie-value[data-value="9"]) .pie .pie-round {
        transform: rotate(32.4deg);
    }

    .progress-pie:has(.pie-value[data-value="10"]) .pie .pie-round {
        transform: rotate(36deg);
    }

    .progress-pie:has(.pie-value[data-value="11"]) .pie .pie-round {
        transform: rotate(39.6deg);
    }

    .progress-pie:has(.pie-value[data-value="12"]) .pie .pie-round {
        transform: rotate(43.2deg);
    }

    .progress-pie:has(.pie-value[data-value="13"]) .pie .pie-round {
        transform: rotate(46.8deg);
    }

    .progress-pie:has(.pie-value[data-value="14"]) .pie .pie-round {
        transform: rotate(50.4deg);
    }

    .progress-pie:has(.pie-value[data-value="15"]) .pie .pie-round {
        transform: rotate(54deg);
    }

    .progress-pie:has(.pie-value[data-value="16"]) .pie .pie-round {
        transform: rotate(57.6deg);
    }

    .progress-pie:has(.pie-value[data-value="17"]) .pie .pie-round {
        transform: rotate(61.2deg);
    }

    .progress-pie:has(.pie-value[data-value="18"]) .pie .pie-round {
        transform: rotate(64.8deg);
    }

    .progress-pie:has(.pie-value[data-value="19"]) .pie .pie-round {
        transform: rotate(68.4deg);
    }

    .progress-pie:has(.pie-value[data-value="20"]) .pie .pie-round {
        transform: rotate(72deg);
    }

    .progress-pie:has(.pie-value[data-value="21"]) .pie .pie-round {
        transform: rotate(75.6deg);
    }

    .progress-pie:has(.pie-value[data-value="22"]) .pie .pie-round {
        transform: rotate(79.2deg);
    }

    .progress-pie:has(.pie-value[data-value="23"]) .pie .pie-round {
        transform: rotate(82.8deg);
    }

    .progress-pie:has(.pie-value[data-value="24"]) .pie .pie-round {
        transform: rotate(86.4deg);
    }

    .progress-pie:has(.pie-value[data-value="25"]) .pie .pie-round {
        transform: rotate(90deg);
    }

    .progress-pie:has(.pie-value[data-value="26"]) .pie .pie-round {
        transform: rotate(93.6deg);
    }

    .progress-pie:has(.pie-value[data-value="27"]) .pie .pie-round {
        transform: rotate(97.2deg);
    }

    .progress-pie:has(.pie-value[data-value="28"]) .pie .pie-round {
        transform: rotate(100.8deg);
    }

    .progress-pie:has(.pie-value[data-value="29"]) .pie .pie-round {
        transform: rotate(104.4deg);
    }

    .progress-pie:has(.pie-value[data-value="30"]) .pie .pie-round {
        transform: rotate(108deg);
    }

    .progress-pie:has(.pie-value[data-value="31"]) .pie .pie-round {
        transform: rotate(111.6deg);
    }

    .progress-pie:has(.pie-value[data-value="32"]) .pie .pie-round {
        transform: rotate(115.2deg);
    }

    .progress-pie:has(.pie-value[data-value="33"]) .pie .pie-round {
        transform: rotate(118.8deg);
    }

    .progress-pie:has(.pie-value[data-value="34"]) .pie .pie-round {
        transform: rotate(122.4deg);
    }

    .progress-pie:has(.pie-value[data-value="35"]) .pie .pie-round {
        transform: rotate(126deg);
    }

    .progress-pie:has(.pie-value[data-value="36"]) .pie .pie-round {
        transform: rotate(129.6deg);
    }

    .progress-pie:has(.pie-value[data-value="37"]) .pie .pie-round {
        transform: rotate(133.2deg);
    }

    .progress-pie:has(.pie-value[data-value="38"]) .pie .pie-round {
        transform: rotate(136.8deg);
    }

    .progress-pie:has(.pie-value[data-value="39"]) .pie .pie-round {
        transform: rotate(140.4deg);
    }

    .progress-pie:has(.pie-value[data-value="40"]) .pie .pie-round {
        transform: rotate(144deg);
    }

    .progress-pie:has(.pie-value[data-value="41"]) .pie .pie-round {
        transform: rotate(147.6deg);
    }

    .progress-pie:has(.pie-value[data-value="42"]) .pie .pie-round {
        transform: rotate(151.2deg);
    }

    .progress-pie:has(.pie-value[data-value="43"]) .pie .pie-round {
        transform: rotate(154.8deg);
    }

    .progress-pie:has(.pie-value[data-value="44"]) .pie .pie-round {
        transform: rotate(158.4deg);
    }

    .progress-pie:has(.pie-value[data-value="45"]) .pie .pie-round {
        transform: rotate(162deg);
    }

    .progress-pie:has(.pie-value[data-value="46"]) .pie .pie-round {
        transform: rotate(165.6deg);
    }

    .progress-pie:has(.pie-value[data-value="47"]) .pie .pie-round {
        transform: rotate(169.2deg);
    }

    .progress-pie:has(.pie-value[data-value="48"]) .pie .pie-round {
        transform: rotate(172.8deg);
    }

    .progress-pie:has(.pie-value[data-value="49"]) .pie .pie-round {
        transform: rotate(176.4deg);
    }

    .progress-pie:has(.pie-value[data-value="50"]) .pie .pie-round {
        transform: rotate(180deg);
    }

    .progress-pie:has(.pie-value[data-value="51"]) .pie .pie-round {
        transform: rotate(183.6deg);
    }

    .progress-pie:has(.pie-value[data-value="52"]) .pie .pie-round {
        transform: rotate(187.2deg);
    }

    .progress-pie:has(.pie-value[data-value="53"]) .pie .pie-round {
        transform: rotate(190.8deg);
    }

    .progress-pie:has(.pie-value[data-value="54"]) .pie .pie-round {
        transform: rotate(194.4deg);
    }

    .progress-pie:has(.pie-value[data-value="55"]) .pie .pie-round {
        transform: rotate(198deg);
    }

    .progress-pie:has(.pie-value[data-value="56"]) .pie .pie-round {
        transform: rotate(201.6deg);
    }

    .progress-pie:has(.pie-value[data-value="57"]) .pie .pie-round {
        transform: rotate(205.2deg);
    }

    .progress-pie:has(.pie-value[data-value="58"]) .pie .pie-round {
        transform: rotate(208.8deg);
    }

    .progress-pie:has(.pie-value[data-value="59"]) .pie .pie-round {
        transform: rotate(212.4deg);
    }

    .progress-pie:has(.pie-value[data-value="60"]) .pie .pie-round {
        transform: rotate(216deg);
    }

    .progress-pie:has(.pie-value[data-value="61"]) .pie .pie-round {
        transform: rotate(219.6deg);
    }

    .progress-pie:has(.pie-value[data-value="62"]) .pie .pie-round {
        transform: rotate(223.2deg);
    }

    .progress-pie:has(.pie-value[data-value="63"]) .pie .pie-round {
        transform: rotate(226.8deg);
    }

    .progress-pie:has(.pie-value[data-value="64"]) .pie .pie-round {
        transform: rotate(230.4deg);
    }

    .progress-pie:has(.pie-value[data-value="65"]) .pie .pie-round {
        transform: rotate(234deg);
    }

    .progress-pie:has(.pie-value[data-value="66"]) .pie .pie-round {
        transform: rotate(237.6deg);
    }

    .progress-pie:has(.pie-value[data-value="67"]) .pie .pie-round {
        transform: rotate(241.2deg);
    }

    .progress-pie:has(.pie-value[data-value="68"]) .pie .pie-round {
        transform: rotate(244.8deg);
    }

    .progress-pie:has(.pie-value[data-value="69"]) .pie .pie-round {
        transform: rotate(248.4deg);
    }

    .progress-pie:has(.pie-value[data-value="70"]) .pie .pie-round {
        transform: rotate(252deg);
    }

    .progress-pie:has(.pie-value[data-value="71"]) .pie .pie-round {
        transform: rotate(255.6deg);
    }

    .progress-pie:has(.pie-value[data-value="72"]) .pie .pie-round {
        transform: rotate(259.2deg);
    }

    .progress-pie:has(.pie-value[data-value="73"]) .pie .pie-round {
        transform: rotate(262.8deg);
    }

    .progress-pie:has(.pie-value[data-value="74"]) .pie .pie-round {
        transform: rotate(266.4deg);
    }

    .progress-pie:has(.pie-value[data-value="75"]) .pie .pie-round {
        transform: rotate(270deg);
    }

    .progress-pie:has(.pie-value[data-value="76"]) .pie .pie-round {
        transform: rotate(273.6deg);
    }

    .progress-pie:has(.pie-value[data-value="77"]) .pie .pie-round {
        transform: rotate(277.2deg);
    }

    .progress-pie:has(.pie-value[data-value="78"]) .pie .pie-round {
        transform: rotate(280.8deg);
    }

    .progress-pie:has(.pie-value[data-value="79"]) .pie .pie-round {
        transform: rotate(284.4deg);
    }

    .progress-pie:has(.pie-value[data-value="80"]) .pie .pie-round {
        transform: rotate(288deg);
    }

    .progress-pie:has(.pie-value[data-value="81"]) .pie .pie-round {
        transform: rotate(291.6deg);
    }

    .progress-pie:has(.pie-value[data-value="82"]) .pie .pie-round {
        transform: rotate(295.2deg);
    }

    .progress-pie:has(.pie-value[data-value="83"]) .pie .pie-round {
        transform: rotate(298.8deg);
    }

    .progress-pie:has(.pie-value[data-value="84"]) .pie .pie-round {
        transform: rotate(302.4deg);
    }

    .progress-pie:has(.pie-value[data-value="85"]) .pie .pie-round {
        transform: rotate(306deg);
    }

    .progress-pie:has(.pie-value[data-value="86"]) .pie .pie-round {
        transform: rotate(309.6deg);
    }

    .progress-pie:has(.pie-value[data-value="87"]) .pie .pie-round {
        transform: rotate(313.2deg);
    }

    .progress-pie:has(.pie-value[data-value="88"]) .pie .pie-round {
        transform: rotate(316.8deg);
    }

    .progress-pie:has(.pie-value[data-value="89"]) .pie .pie-round {
        transform: rotate(320.4deg);
    }

    .progress-pie:has(.pie-value[data-value="90"]) .pie .pie-round {
        transform: rotate(324deg);
    }

    .progress-pie:has(.pie-value[data-value="91"]) .pie .pie-round {
        transform: rotate(327.6deg);
    }

    .progress-pie:has(.pie-value[data-value="92"]) .pie .pie-round {
        transform: rotate(331.2deg);
    }

    .progress-pie:has(.pie-value[data-value="93"]) .pie .pie-round {
        transform: rotate(334.8deg);
    }

    .progress-pie:has(.pie-value[data-value="94"]) .pie .pie-round {
        transform: rotate(338.4deg);
    }

    .progress-pie:has(.pie-value[data-value="95"]) .pie .pie-round {
        transform: rotate(342deg);
    }

    .progress-pie:has(.pie-value[data-value="96"]) .pie .pie-round {
        transform: rotate(345.6deg);
    }

    .progress-pie:has(.pie-value[data-value="97"]) .pie .pie-round {
        transform: rotate(349.2deg);
    }

    .progress-pie:has(.pie-value[data-value="98"]) .pie .pie-round {
        transform: rotate(352.8deg);
    }

    .progress-pie:has(.pie-value[data-value="99"]) .pie .pie-round {
        transform: rotate(356.4deg);
    }

    .progress-pie:has(.pie-value[data-value="100"]) .pie .pie-round {
        transform: rotate(360deg);
    }

    .progress-pie:has(.pie-value[data-value="0"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 0%, #FFEBEF 0%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="0"]) .pie:before, .progress-pie:has(.pie-value[data-value="0"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="1"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 1%, #FFEBEF 1%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="1"]) .pie:before, .progress-pie:has(.pie-value[data-value="1"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="2"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 2%, #FFEBEF 2%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="2"]) .pie:before, .progress-pie:has(.pie-value[data-value="2"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="3"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 3%, #FFEBEF 3%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="3"]) .pie:before, .progress-pie:has(.pie-value[data-value="3"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="4"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 4%, #FFEBEF 4%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="4"]) .pie:before, .progress-pie:has(.pie-value[data-value="4"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="5"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 5%, #FFEBEF 5%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="5"]) .pie:before, .progress-pie:has(.pie-value[data-value="5"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="6"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 6%, #FFEBEF 6%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="6"]) .pie:before, .progress-pie:has(.pie-value[data-value="6"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="7"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 7%, #FFEBEF 7%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="7"]) .pie:before, .progress-pie:has(.pie-value[data-value="7"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="8"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 8%, #FFEBEF 8%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="8"]) .pie:before, .progress-pie:has(.pie-value[data-value="8"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="9"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 9%, #FFEBEF 9%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="9"]) .pie:before, .progress-pie:has(.pie-value[data-value="9"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="10"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 10%, #FFEBEF 10%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="10"]) .pie:before, .progress-pie:has(.pie-value[data-value="10"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="11"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 11%, #FFEBEF 11%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="11"]) .pie:before, .progress-pie:has(.pie-value[data-value="11"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="12"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 12%, #FFEBEF 12%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="12"]) .pie:before, .progress-pie:has(.pie-value[data-value="12"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="13"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 13%, #FFEBEF 13%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="13"]) .pie:before, .progress-pie:has(.pie-value[data-value="13"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="14"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 14%, #FFEBEF 14%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="14"]) .pie:before, .progress-pie:has(.pie-value[data-value="14"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="15"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 15%, #FFEBEF 15%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="15"]) .pie:before, .progress-pie:has(.pie-value[data-value="15"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="16"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 16%, #FFEBEF 16%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="16"]) .pie:before, .progress-pie:has(.pie-value[data-value="16"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="17"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 17%, #FFEBEF 17%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="17"]) .pie:before, .progress-pie:has(.pie-value[data-value="17"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="18"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 18%, #FFEBEF 18%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="18"]) .pie:before, .progress-pie:has(.pie-value[data-value="18"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="19"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 19%, #FFEBEF 19%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="19"]) .pie:before, .progress-pie:has(.pie-value[data-value="19"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="20"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 20%, #FFEBEF 20%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="20"]) .pie:before, .progress-pie:has(.pie-value[data-value="20"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="21"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 21%, #FFEBEF 21%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="21"]) .pie:before, .progress-pie:has(.pie-value[data-value="21"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="22"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 22%, #FFEBEF 22%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="22"]) .pie:before, .progress-pie:has(.pie-value[data-value="22"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="23"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 23%, #FFEBEF 23%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="23"]) .pie:before, .progress-pie:has(.pie-value[data-value="23"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="24"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 24%, #FFEBEF 24%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="24"]) .pie:before, .progress-pie:has(.pie-value[data-value="24"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="25"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 25%, #FFEBEF 25%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="25"]) .pie:before, .progress-pie:has(.pie-value[data-value="25"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="26"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 26%, #FFEBEF 26%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="26"]) .pie:before, .progress-pie:has(.pie-value[data-value="26"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="27"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 27%, #FFEBEF 27%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="27"]) .pie:before, .progress-pie:has(.pie-value[data-value="27"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="28"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 28%, #FFEBEF 28%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="28"]) .pie:before, .progress-pie:has(.pie-value[data-value="28"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="29"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 29%, #FFEBEF 29%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="29"]) .pie:before, .progress-pie:has(.pie-value[data-value="29"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="30"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 30%, #FFEBEF 30%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="30"]) .pie:before, .progress-pie:has(.pie-value[data-value="30"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="31"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 31%, #FFEBEF 31%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="31"]) .pie:before, .progress-pie:has(.pie-value[data-value="31"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="32"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 32%, #FFEBEF 32%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="32"]) .pie:before, .progress-pie:has(.pie-value[data-value="32"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="33"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 33%, #FFEBEF 33%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="33"]) .pie:before, .progress-pie:has(.pie-value[data-value="33"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="34"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 34%, #FFEBEF 34%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="34"]) .pie:before, .progress-pie:has(.pie-value[data-value="34"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="35"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 35%, #FFEBEF 35%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="35"]) .pie:before, .progress-pie:has(.pie-value[data-value="35"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="36"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 36%, #FFEBEF 36%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="36"]) .pie:before, .progress-pie:has(.pie-value[data-value="36"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="37"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 37%, #FFEBEF 37%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="37"]) .pie:before, .progress-pie:has(.pie-value[data-value="37"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="38"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 38%, #FFEBEF 38%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="38"]) .pie:before, .progress-pie:has(.pie-value[data-value="38"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="39"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 39%, #FFEBEF 39%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="39"]) .pie:before, .progress-pie:has(.pie-value[data-value="39"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="40"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 40%, #FFEBEF 40%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="40"]) .pie:before, .progress-pie:has(.pie-value[data-value="40"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="41"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 41%, #FFEBEF 41%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="41"]) .pie:before, .progress-pie:has(.pie-value[data-value="41"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="42"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 42%, #FFEBEF 42%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="42"]) .pie:before, .progress-pie:has(.pie-value[data-value="42"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="43"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 43%, #FFEBEF 43%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="43"]) .pie:before, .progress-pie:has(.pie-value[data-value="43"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="44"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 44%, #FFEBEF 44%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="44"]) .pie:before, .progress-pie:has(.pie-value[data-value="44"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="45"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 45%, #FFEBEF 45%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="45"]) .pie:before, .progress-pie:has(.pie-value[data-value="45"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="46"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 46%, #FFEBEF 46%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="46"]) .pie:before, .progress-pie:has(.pie-value[data-value="46"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="47"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 47%, #FFEBEF 47%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="47"]) .pie:before, .progress-pie:has(.pie-value[data-value="47"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="48"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 48%, #FFEBEF 48%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="48"]) .pie:before, .progress-pie:has(.pie-value[data-value="48"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="49"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 49%, #FFEBEF 49%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="49"]) .pie:before, .progress-pie:has(.pie-value[data-value="49"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="50"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 50%, #FFEBEF 50%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="50"]) .pie:before, .progress-pie:has(.pie-value[data-value="50"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="51"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 51%, #FFEBEF 51%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="51"]) .pie:before, .progress-pie:has(.pie-value[data-value="51"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="52"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 52%, #FFEBEF 52%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="52"]) .pie:before, .progress-pie:has(.pie-value[data-value="52"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="53"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 53%, #FFEBEF 53%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="53"]) .pie:before, .progress-pie:has(.pie-value[data-value="53"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="54"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 54%, #FFEBEF 54%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="54"]) .pie:before, .progress-pie:has(.pie-value[data-value="54"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="55"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 55%, #FFEBEF 55%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="55"]) .pie:before, .progress-pie:has(.pie-value[data-value="55"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="56"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 56%, #FFEBEF 56%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="56"]) .pie:before, .progress-pie:has(.pie-value[data-value="56"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="57"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 57%, #FFEBEF 57%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="57"]) .pie:before, .progress-pie:has(.pie-value[data-value="57"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="58"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 58%, #FFEBEF 58%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="58"]) .pie:before, .progress-pie:has(.pie-value[data-value="58"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="59"]) .pie {
        background-image: conic-gradient(#FF6180 0%, #FF6180 59%, #FFEBEF 59%, #FFEBEF);
    }

        .progress-pie:has(.pie-value[data-value="59"]) .pie:before, .progress-pie:has(.pie-value[data-value="59"]) .pie .pie-round:before {
            background-color: #FF6180;
        }

    .progress-pie:has(.pie-value[data-value="60"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 60%, #FFFCE6 60%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="60"]) .pie:before, .progress-pie:has(.pie-value[data-value="60"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="61"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 61%, #FFFCE6 61%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="61"]) .pie:before, .progress-pie:has(.pie-value[data-value="61"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="62"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 62%, #FFFCE6 62%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="62"]) .pie:before, .progress-pie:has(.pie-value[data-value="62"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="63"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 63%, #FFFCE6 63%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="63"]) .pie:before, .progress-pie:has(.pie-value[data-value="63"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="64"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 64%, #FFFCE6 64%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="64"]) .pie:before, .progress-pie:has(.pie-value[data-value="64"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="65"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 65%, #FFFCE6 65%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="65"]) .pie:before, .progress-pie:has(.pie-value[data-value="65"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="66"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 66%, #FFFCE6 66%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="66"]) .pie:before, .progress-pie:has(.pie-value[data-value="66"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="67"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 67%, #FFFCE6 67%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="67"]) .pie:before, .progress-pie:has(.pie-value[data-value="67"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="68"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 68%, #FFFCE6 68%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="68"]) .pie:before, .progress-pie:has(.pie-value[data-value="68"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="69"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 69%, #FFFCE6 69%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="69"]) .pie:before, .progress-pie:has(.pie-value[data-value="69"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="70"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 70%, #FFFCE6 70%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="70"]) .pie:before, .progress-pie:has(.pie-value[data-value="70"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="71"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 71%, #FFFCE6 71%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="71"]) .pie:before, .progress-pie:has(.pie-value[data-value="71"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="72"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 72%, #FFFCE6 72%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="72"]) .pie:before, .progress-pie:has(.pie-value[data-value="72"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="73"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 73%, #FFFCE6 73%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="73"]) .pie:before, .progress-pie:has(.pie-value[data-value="73"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="74"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 74%, #FFFCE6 74%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="74"]) .pie:before, .progress-pie:has(.pie-value[data-value="74"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="75"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 75%, #FFFCE6 75%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="75"]) .pie:before, .progress-pie:has(.pie-value[data-value="75"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="76"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 76%, #FFFCE6 76%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="76"]) .pie:before, .progress-pie:has(.pie-value[data-value="76"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="77"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 77%, #FFFCE6 77%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="77"]) .pie:before, .progress-pie:has(.pie-value[data-value="77"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="78"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 78%, #FFFCE6 78%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="78"]) .pie:before, .progress-pie:has(.pie-value[data-value="78"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="79"]) .pie {
        background-image: conic-gradient(#FFBF00 0%, #FFBF00 79%, #FFFCE6 79%, #FFFCE6);
    }

        .progress-pie:has(.pie-value[data-value="79"]) .pie:before, .progress-pie:has(.pie-value[data-value="79"]) .pie .pie-round:before {
            background-color: #FFBF00;
        }

    .progress-pie:has(.pie-value[data-value="80"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 80%, #E7F7E8 80%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="80"]) .pie:before, .progress-pie:has(.pie-value[data-value="80"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="81"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 81%, #E7F7E8 81%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="81"]) .pie:before, .progress-pie:has(.pie-value[data-value="81"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="82"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 82%, #E7F7E8 82%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="82"]) .pie:before, .progress-pie:has(.pie-value[data-value="82"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="83"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 83%, #E7F7E8 83%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="83"]) .pie:before, .progress-pie:has(.pie-value[data-value="83"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="84"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 84%, #E7F7E8 84%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="84"]) .pie:before, .progress-pie:has(.pie-value[data-value="84"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="85"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 85%, #E7F7E8 85%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="85"]) .pie:before, .progress-pie:has(.pie-value[data-value="85"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="86"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 86%, #E7F7E8 86%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="86"]) .pie:before, .progress-pie:has(.pie-value[data-value="86"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="87"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 87%, #E7F7E8 87%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="87"]) .pie:before, .progress-pie:has(.pie-value[data-value="87"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="88"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 88%, #E7F7E8 88%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="88"]) .pie:before, .progress-pie:has(.pie-value[data-value="88"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="89"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 89%, #E7F7E8 89%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="89"]) .pie:before, .progress-pie:has(.pie-value[data-value="89"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="90"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 90%, #E7F7E8 90%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="90"]) .pie:before, .progress-pie:has(.pie-value[data-value="90"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="91"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 91%, #E7F7E8 91%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="91"]) .pie:before, .progress-pie:has(.pie-value[data-value="91"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="92"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 92%, #E7F7E8 92%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="92"]) .pie:before, .progress-pie:has(.pie-value[data-value="92"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="93"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 93%, #E7F7E8 93%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="93"]) .pie:before, .progress-pie:has(.pie-value[data-value="93"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="94"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 94%, #E7F7E8 94%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="94"]) .pie:before, .progress-pie:has(.pie-value[data-value="94"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="95"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 95%, #E7F7E8 95%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="95"]) .pie:before, .progress-pie:has(.pie-value[data-value="95"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="96"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 96%, #E7F7E8 96%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="96"]) .pie:before, .progress-pie:has(.pie-value[data-value="96"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="97"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 97%, #E7F7E8 97%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="97"]) .pie:before, .progress-pie:has(.pie-value[data-value="97"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="98"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 98%, #E7F7E8 98%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="98"]) .pie:before, .progress-pie:has(.pie-value[data-value="98"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="99"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 99%, #E7F7E8 99%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="99"]) .pie:before, .progress-pie:has(.pie-value[data-value="99"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="100"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 100%, #E7F7E8 100%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="100"]) .pie:before, .progress-pie:has(.pie-value[data-value="100"]) .pie .pie-round:before {
            background-color: #70CF77;
        }

    .progress-pie:has(.pie-value[data-value="92"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 92%, #E7F7E8 92%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="92"]) .pie .pie-round {
            transform: rotate(331.2deg);
        }

            .progress-pie:has(.pie-value[data-value="92"]) .pie:before, .progress-pie:has(.pie-value[data-value="92"]) .pie .pie-round:before {
                background-color: #70CF77;
            }

    .progress-pie:has(.pie-value[data-value="93"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 92%, #E7F7E8 92%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="93"]) .pie .pie-round {
            transform: rotate(331.2deg);
        }

            .progress-pie:has(.pie-value[data-value="93"]) .pie:before, .progress-pie:has(.pie-value[data-value="93"]) .pie .pie-round:before {
                background-color: #70CF77;
            }

    .progress-pie:has(.pie-value[data-value="94"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 92%, #E7F7E8 92%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="94"]) .pie .pie-round {
            transform: rotate(331.2deg);
        }

            .progress-pie:has(.pie-value[data-value="94"]) .pie:before, .progress-pie:has(.pie-value[data-value="94"]) .pie .pie-round:before {
                background-color: #70CF77;
            }

    .progress-pie:has(.pie-value[data-value="95"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 92%, #E7F7E8 92%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="95"]) .pie .pie-round {
            transform: rotate(331.2deg);
        }

            .progress-pie:has(.pie-value[data-value="95"]) .pie:before, .progress-pie:has(.pie-value[data-value="95"]) .pie .pie-round:before {
                background-color: #70CF77;
            }

    .progress-pie:has(.pie-value[data-value="96"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 92%, #E7F7E8 92%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="96"]) .pie .pie-round {
            transform: rotate(331.2deg);
        }

            .progress-pie:has(.pie-value[data-value="96"]) .pie:before, .progress-pie:has(.pie-value[data-value="96"]) .pie .pie-round:before {
                background-color: #70CF77;
            }

    .progress-pie:has(.pie-value[data-value="97"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 95%, #E7F7E8 95%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="97"]) .pie .pie-round {
            transform: rotate(342deg);
        }

            .progress-pie:has(.pie-value[data-value="97"]) .pie:before, .progress-pie:has(.pie-value[data-value="97"]) .pie .pie-round:before {
                background-color: #70CF77;
            }

    .progress-pie:has(.pie-value[data-value="98"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 95%, #E7F7E8 95%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="98"]) .pie .pie-round {
            transform: rotate(342deg);
        }

            .progress-pie:has(.pie-value[data-value="98"]) .pie:before, .progress-pie:has(.pie-value[data-value="98"]) .pie .pie-round:before {
                background-color: #70CF77;
            }

    .progress-pie:has(.pie-value[data-value="99"]) .pie {
        background-image: conic-gradient(#70CF77 0%, #70CF77 95%, #E7F7E8 95%, #E7F7E8);
    }

        .progress-pie:has(.pie-value[data-value="99"]) .pie .pie-round {
            transform: rotate(342deg);
        }

            .progress-pie:has(.pie-value[data-value="99"]) .pie:before, .progress-pie:has(.pie-value[data-value="99"]) .pie .pie-round:before {
                background-color: #70CF77;
            }

.text-link {
    margin: 0.5em;
    color: #3E9D45;
    font-size: 15.2px;
    text-decoration: underline;
    cursor: pointer;
}

    .text-link:hover {
        color: #70CF77;
    }

.asterisk {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FF6180;
    width: 2em;
    height: 2em;
    color: #ffffff;
    font-size: 12px;
    mask-image: url(../images/icons/gear-eight.svg);
    -webkit-mask-image: url(../images/icons/gear-eight.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    transform: scale(0.75);
    cursor: default;
}

.asterisk-ul {
    display: flex;
    flex-flow: column wrap;
    background-color: #FFEBEF;
    width: calc(100% - 2em);
    margin: 0.5em;
    padding: 0.5em 1em;
    border-radius: 2em;
    counter-reset: num;
}

    .asterisk-ul li {
        display: block;
        padding: 0.25em 0.5em 0.25em 2.5em;
        color: #FF6180;
        font-size: 1em;
    }

        .asterisk-ul li:before {
            position: absolute;
            left: 0;
            top: -0.25em;
            display: flex;
            justify-content: center;
            align-items: center;
            counter-increment: num;
            content: counter(num);
            background-color: #FF6180;
            width: 2em;
            height: 2em;
            margin: 0.25em;
            color: #ffffff;
            font-size: 1em;
            mask-image: url(../images/icons/gear-eight.svg);
            -webkit-mask-image: url(../images/icons/gear-eight.svg);
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            transform: scale(0.6);
        }

.sort-cont {
    background-color: #ffffff;
    padding: 0 2.5em 0 0.5em;
    color: #2C6691;
    border-radius: 20px;
    cursor: default;
    z-index: 200;
}

    .sort-cont .item {
        display: none;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5em;
        min-width: 8em;
        padding: 0.5em;
        z-index: 10;
    }

        .sort-cont .item.active {
            display: flex;
        }

    .sort-cont .sort-list {
        position: absolute;
        top: 50%;
        left: 0;
        display: flex;
        flex-flow: column wrap;
        gap: 0.25em;
        background-color: #ffffff;
        width: 100%;
        height: 0;
        padding: 0 0.5em;
        border-radius: 0 0 20px 20px;
        opacity: 0;
        overflow: hidden;
    }

        .sort-cont .sort-list .list-item {
            display: flex;
            flex-flow: row nowrap;
            gap: 0.5em;
            padding: 0.5em;
            border-radius: 20px;
            cursor: pointer;
        }

            .sort-cont .sort-list .list-item:hover {
                background-color: #ffffff;
            }

        .sort-cont .sort-list:before {
            position: absolute;
            /* top: 1.5em; */
            left: 0;
            bottom: 0;
            display: block;
            content: "";
            background-color: #D9F0F3;
            width: 100%;
            height: calc(100% - 1.25em);
            border-radius: 20px;
        }

    .sort-cont:before {
        position: absolute;
        top: 50%;
        right: 0.75em;
        display: block;
        content: "";
        background-color: #2C6691;
        width: 1.5em;
        height: 1.5em;
        mask-image: url(../images/icons/arrow-down.svg);
        -webkit-mask-image: url(../images/icons/arrow-down.svg);
        transform: translateY(-50%);
        z-index: 10;
    }

    .sort-cont:hover .sort-list {
        height: auto;
        padding: 1.75em 0.5em 0.5em;
        opacity: 1;
    }

/* infomation */
.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #E7F7E8;
    width: 3em;
    height: 3em;
    border-radius: 2em;
    overflow: hidden;
}

/* menu */
.menu {
    margin: 0.5em;
}

    .menu li {
        background-color: #ffffff;
        margin: 0 1em;
        cursor: pointer;
        border-radius: 1em;
    }

        .menu li span {
            display: block;
        }

        .menu li:hover {
            background-color: #E7F7E8;
            box-shadow: 0 2px 4px #00000011;
        }

            .menu li:hover .text {
                color: #70CF77;
            }

        .menu li.active .text {
            color: #70CF77;
        }

/* cont */
.cont {
    width: 100%;
    padding: 0.5em;
}

.link-cont {
    margin: 0.5em;
}

.btn-cont {
    margin: 0.5em;
}

    .btn-cont .btn {
        min-width: unset;
        margin: 0;
    }

/* form */
.form-cont {
    margin: 0.5em 0;
}

    .form-cont .input-cont, .form-cont .checkbox-cont, .form-cont .radio-cont, .form-cont .verify-cont, .form-cont .select-cont {
        width: calc(100% - 1em);
        margin: 0.5em;
    }

        .form-cont .input-cont label.icon, .form-cont .checkbox-cont label.icon, .form-cont .radio-cont label.icon, .form-cont .verify-cont label.icon, .form-cont .select-cont label.icon {
            position: absolute;
            top: 50%;
            left: 1.25em;
            z-index: 10;
            transform: translateY(-50%);
        }

        .form-cont .input-cont .warning, .form-cont .checkbox-cont .warning, .form-cont .radio-cont .warning, .form-cont .verify-cont .warning, .form-cont .select-cont .warning {
            position: absolute;
            bottom: -0.75em;
            right: 1em;
            display: none;
            background-color: #FF6180;
            max-width: calc(100% - 7em);
            padding: 0 1em;
            margin: 0.5em 0.5em 0;
            color: #ffffff;
            font-size: 12px;
            letter-spacing: 0.1em;
            text-overflow: ellipsis;
            white-space: nowrap;
            border-radius: 2em;
            overflow: hidden;
            cursor: default;
        }

        .form-cont .input-cont.confirm input, .form-cont .checkbox-cont.confirm input, .form-cont .radio-cont.confirm input, .form-cont .verify-cont.confirm input {
            background-color: #FFEBEF;
            border-color: #FF6180;
        }

            .form-cont .input-cont.confirm input + .icon, .form-cont .checkbox-cont.confirm input + .icon, .form-cont .radio-cont.confirm input + .icon, .form-cont .verify-cont.confirm input + .icon {
                background-color: #FF6180 !important;
            }

            .form-cont .input-cont.confirm input[type=date]::-webkit-datetime-edit-text, .form-cont .checkbox-cont.confirm input[type=date]::-webkit-datetime-edit-text, .form-cont .radio-cont.confirm input[type=date]::-webkit-datetime-edit-text, .form-cont .verify-cont.confirm input[type=date]::-webkit-datetime-edit-text {
                color: #FF6180;
            }

            .form-cont .input-cont.confirm input[type=checkbox], .form-cont .checkbox-cont.confirm input[type=checkbox], .form-cont .radio-cont.confirm input[type=checkbox], .form-cont .verify-cont.confirm input[type=checkbox] {
                background-color: #FFEBEFcc;
                border-color: #FF6180;
            }

                .form-cont .input-cont.confirm input[type=checkbox]:checked, .form-cont .checkbox-cont.confirm input[type=checkbox]:checked, .form-cont .radio-cont.confirm input[type=checkbox]:checked, .form-cont .verify-cont.confirm input[type=checkbox]:checked {
                    background-color: #FF6180;
                }

            .form-cont .input-cont.confirm input:invalid, .form-cont .checkbox-cont.confirm input:invalid, .form-cont .radio-cont.confirm input:invalid, .form-cont .verify-cont.confirm input:invalid {
                background-color: #FFEBEF;
                border-color: #FF6180;
            }

            .form-cont .input-cont.confirm input:focus, .form-cont .checkbox-cont.confirm input:focus, .form-cont .radio-cont.confirm input:focus, .form-cont .verify-cont.confirm input:focus {
                border-color: #E51A66;
                outline: 2px solid #FF618099;
            }

                .form-cont .input-cont.confirm input:focus + .icon, .form-cont .checkbox-cont.confirm input:focus + .icon, .form-cont .radio-cont.confirm input:focus + .icon, .form-cont .verify-cont.confirm input:focus + .icon {
                    background-color: #E51A66;
                }

                .form-cont .input-cont.confirm input:focus[type=date]::-webkit-datetime-edit-text, .form-cont .checkbox-cont.confirm input:focus[type=date]::-webkit-datetime-edit-text, .form-cont .radio-cont.confirm input:focus[type=date]::-webkit-datetime-edit-text, .form-cont .verify-cont.confirm input:focus[type=date]::-webkit-datetime-edit-text {
                    color: #FF6180;
                }

        .form-cont .input-cont.confirm .warning, .form-cont .checkbox-cont.confirm .warning, .form-cont .radio-cont.confirm .warning, .form-cont .verify-cont.confirm .warning {
            display: inline-block;
        }

        .form-cont .select-cont select {
            padding: 0.75em 4em;
        }

        .form-cont .select-cont:before {
            position: absolute;
            top: 50%;
            right: 1em;
            display: block;
            content: "";
            background-color: #70CF77;
            display: inline-block;
            background-color: #70CF77;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            width: 2em;
            height: 2em;
            color: #70CF77;
            mask-image: url(../images/icons/arrow-down.svg);
            -webkit-mask-image: url(../images/icons/arrow-down.svg);
            transform: translateY(-50%);
            pointer-events: none;
            z-index: 10;
        }

        .form-cont .select-cont:has(select[disabled]):before {
            background-color: #4B5563;
        }

        .form-cont .select-cont.confirm:before {
            background-color: #FF6180 !important;
        }

        .form-cont .select-cont.confirm .icon {
            background-color: #FF6180 !important;
        }

        .form-cont .select-cont.confirm select {
            background-color: #FFEBEF;
            border-color: #FF6180;
        }

            .form-cont .select-cont.confirm select + .icon {
                background-color: #FF6180 !important;
            }

            .form-cont .select-cont.confirm select:invalid {
                background-color: #FFEBEF;
                border-color: #FF6180;
            }

            .form-cont .select-cont.confirm select:focus {
                border-color: #E51A66;
                outline: 2px solid #FF618099;
            }

                .form-cont .select-cont.confirm select:focus + .icon {
                    background-color: #E51A66;
                }

                .form-cont .select-cont.confirm select:focus[type=date]::-webkit-datetime-edit-text {
                    color: #FF6180;
                }

        .form-cont .select-cont.confirm .warning {
            display: inline-block;
        }

        .form-cont .input-cont input {
            padding: 0.75em 1.5em 0.75em 4em;
        }

            .form-cont .input-cont input[disabled] + .icon {
                background-color: #6B7280;
            }

        .form-cont .input-cont .input-label:not(.icon) {
            position: relative;
        }

        .form-cont .input-cont.confirm .input-label {
            color: #FF6180;
        }

        .form-cont .checkbox-cont .input-label {
            padding: 0 0 0 1.5em;
            color: #374151;
        }

        .form-cont .checkbox-cont input[type=checkbox] {
            position: absolute;
            top: 0.25em;
            left: 0;
        }

        .form-cont .checkbox-cont.confirm .warning {
            position: absolute;
            top: -1.5em;
            left: -0.5em;
            margin: 0;
        }

    .form-cont .radio-cont {
        display: flex;
        align-items: baseline;
    }

        .form-cont .radio-cont .input-label {
            color: #374151;
            margin: 0;
            padding: 0.5em 1em 0.5em 2em;
            cursor: pointer;
        }

        .form-cont .radio-cont input:checked + .input-label {
            margin: auto;
            padding: 0.5em 1.5em;
        }

    .form-cont .verify-cont {
        margin: 0;
    }

        .form-cont .verify-cont input[name=code] {
            margin: 0.5em;
            padding: 0.25em;
            width: 100%;
            max-width: calc(16.6666666667% - 0.5em);
            min-height: 2.75em;
            color: inherit;
            font-weight: 700;
            text-align: center;
            border-radius: 0.5em;
        }

@media screen and (max-width: 480px) {
    .form-cont .verify-cont input[name=code] {
        margin: 0.25em;
    }
}

/* flex */
.fx-column {
    display: flex;
    flex-flow: column wrap;
}

.fx-row {
    display: flex;
    flex-wrap: nowrap;
}

.fx-col {
    flex: 0 0 0%;
}

.fx-col-1 {
    flex: 0 0 calc(8.3333333333% - 1em);
}

.fx-col-2 {
    flex: 0 0 calc(16.6666666667% - 1em);
}

.fx-col-3 {
    flex: 0 0 calc(25% - 1em);
}

.fx-col-4 {
    flex: 0 0 calc(33.3333333333% - 1em);
}

.fx-col-5 {
    flex: 0 0 calc(41.6666666667% - 1em);
}

.fx-col-6 {
    flex: 0 0 calc(50% - 1em);
}

.fx-col-7 {
    flex: 0 0 calc(58.3333333333% - 1em);
}

.fx-col-8 {
    flex: 0 0 calc(66.6666666667% - 1em);
}

.fx-col-9 {
    flex: 0 0 calc(75% - 1em);
}

.fx-col-10 {
    flex: 0 0 calc(83.3333333333% - 1em);
}

.fx-col-11 {
    flex: 0 0 calc(91.6666666667% - 1em);
}

.fx-col-12 {
    flex: 0 0 calc(100% - 1em);
}

.fx-col-1-4xl {
    flex: 0 0 calc(8.3333333333% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-1-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-2-4xl {
    flex: 0 0 calc(16.6666666667% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-2-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-3-4xl {
    flex: 0 0 calc(25% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-3-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-4-4xl {
    flex: 0 0 calc(33.3333333333% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-4-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-5-4xl {
    flex: 0 0 calc(41.6666666667% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-5-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-6-4xl {
    flex: 0 0 calc(50% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-6-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-7-4xl {
    flex: 0 0 calc(58.3333333333% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-7-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-8-4xl {
    flex: 0 0 calc(66.6666666667% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-8-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-9-4xl {
    flex: 0 0 calc(75% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-9-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-10-4xl {
    flex: 0 0 calc(83.3333333333% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-10-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-11-4xl {
    flex: 0 0 calc(91.6666666667% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-11-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-12-4xl {
    flex: 0 0 calc(100% - 1em);
}

@media screen and (max-width: 1600px) {
    .fx-col-12-4xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-1-3xl {
    flex: 0 0 calc(8.3333333333% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-1-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-2-3xl {
    flex: 0 0 calc(16.6666666667% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-2-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-3-3xl {
    flex: 0 0 calc(25% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-3-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-4-3xl {
    flex: 0 0 calc(33.3333333333% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-4-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-5-3xl {
    flex: 0 0 calc(41.6666666667% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-5-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-6-3xl {
    flex: 0 0 calc(50% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-6-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-7-3xl {
    flex: 0 0 calc(58.3333333333% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-7-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-8-3xl {
    flex: 0 0 calc(66.6666666667% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-8-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-9-3xl {
    flex: 0 0 calc(75% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-9-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-10-3xl {
    flex: 0 0 calc(83.3333333333% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-10-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-11-3xl {
    flex: 0 0 calc(91.6666666667% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-11-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-12-3xl {
    flex: 0 0 calc(100% - 1em);
}

@media screen and (max-width: 1440px) {
    .fx-col-12-3xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-1-2xl {
    flex: 0 0 calc(8.3333333333% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-1-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-2-2xl {
    flex: 0 0 calc(16.6666666667% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-2-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-3-2xl {
    flex: 0 0 calc(25% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-3-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-4-2xl {
    flex: 0 0 calc(33.3333333333% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-4-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-5-2xl {
    flex: 0 0 calc(41.6666666667% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-5-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-6-2xl {
    flex: 0 0 calc(50% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-6-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-7-2xl {
    flex: 0 0 calc(58.3333333333% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-7-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-8-2xl {
    flex: 0 0 calc(66.6666666667% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-8-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-9-2xl {
    flex: 0 0 calc(75% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-9-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-10-2xl {
    flex: 0 0 calc(83.3333333333% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-10-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-11-2xl {
    flex: 0 0 calc(91.6666666667% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-11-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-12-2xl {
    flex: 0 0 calc(100% - 1em);
}

@media screen and (max-width: 1280px) {
    .fx-col-12-2xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-1-xl {
    flex: 0 0 calc(8.3333333333% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-1-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-2-xl {
    flex: 0 0 calc(16.6666666667% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-2-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-3-xl {
    flex: 0 0 calc(25% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-3-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-4-xl {
    flex: 0 0 calc(33.3333333333% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-4-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-5-xl {
    flex: 0 0 calc(41.6666666667% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-5-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-6-xl {
    flex: 0 0 calc(50% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-6-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-7-xl {
    flex: 0 0 calc(58.3333333333% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-7-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-8-xl {
    flex: 0 0 calc(66.6666666667% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-8-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-9-xl {
    flex: 0 0 calc(75% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-9-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-10-xl {
    flex: 0 0 calc(83.3333333333% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-10-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-11-xl {
    flex: 0 0 calc(91.6666666667% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-11-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-12-xl {
    flex: 0 0 calc(100% - 1em);
}

@media screen and (max-width: 1024px) {
    .fx-col-12-xl {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-1-lg {
    flex: 0 0 calc(8.3333333333% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-1-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-2-lg {
    flex: 0 0 calc(16.6666666667% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-2-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-3-lg {
    flex: 0 0 calc(25% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-3-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-4-lg {
    flex: 0 0 calc(33.3333333333% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-4-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-5-lg {
    flex: 0 0 calc(41.6666666667% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-5-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-6-lg {
    flex: 0 0 calc(50% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-6-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-7-lg {
    flex: 0 0 calc(58.3333333333% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-7-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-8-lg {
    flex: 0 0 calc(66.6666666667% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-8-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-9-lg {
    flex: 0 0 calc(75% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-9-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-10-lg {
    flex: 0 0 calc(83.3333333333% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-10-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-11-lg {
    flex: 0 0 calc(91.6666666667% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-11-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-12-lg {
    flex: 0 0 calc(100% - 1em);
}

@media screen and (max-width: 960px) {
    .fx-col-12-lg {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-1-md {
    flex: 0 0 calc(8.3333333333% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-1-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-2-md {
    flex: 0 0 calc(16.6666666667% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-2-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-3-md {
    flex: 0 0 calc(25% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-3-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-4-md {
    flex: 0 0 calc(33.3333333333% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-4-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-5-md {
    flex: 0 0 calc(41.6666666667% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-5-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-6-md {
    flex: 0 0 calc(50% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-6-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-7-md {
    flex: 0 0 calc(58.3333333333% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-7-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-8-md {
    flex: 0 0 calc(66.6666666667% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-8-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-9-md {
    flex: 0 0 calc(75% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-9-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-10-md {
    flex: 0 0 calc(83.3333333333% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-10-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-11-md {
    flex: 0 0 calc(91.6666666667% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-11-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-12-md {
    flex: 0 0 calc(100% - 1em);
}

@media screen and (max-width: 800px) {
    .fx-col-12-md {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-1-sm {
    flex: 0 0 calc(8.3333333333% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-1-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-2-sm {
    flex: 0 0 calc(16.6666666667% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-2-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-3-sm {
    flex: 0 0 calc(25% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-3-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-4-sm {
    flex: 0 0 calc(33.3333333333% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-4-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-5-sm {
    flex: 0 0 calc(41.6666666667% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-5-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-6-sm {
    flex: 0 0 calc(50% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-6-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-7-sm {
    flex: 0 0 calc(58.3333333333% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-7-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-8-sm {
    flex: 0 0 calc(66.6666666667% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-8-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-9-sm {
    flex: 0 0 calc(75% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-9-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-10-sm {
    flex: 0 0 calc(83.3333333333% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-10-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-11-sm {
    flex: 0 0 calc(91.6666666667% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-11-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-12-sm {
    flex: 0 0 calc(100% - 1em);
}

@media screen and (max-width: 640px) {
    .fx-col-12-sm {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-1-xs {
    flex: 0 0 calc(8.3333333333% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-1-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-2-xs {
    flex: 0 0 calc(16.6666666667% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-2-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-3-xs {
    flex: 0 0 calc(25% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-3-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-4-xs {
    flex: 0 0 calc(33.3333333333% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-4-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-5-xs {
    flex: 0 0 calc(41.6666666667% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-5-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-6-xs {
    flex: 0 0 calc(50% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-6-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-7-xs {
    flex: 0 0 calc(58.3333333333% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-7-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-8-xs {
    flex: 0 0 calc(66.6666666667% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-8-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-9-xs {
    flex: 0 0 calc(75% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-9-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-10-xs {
    flex: 0 0 calc(83.3333333333% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-10-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-11-xs {
    flex: 0 0 calc(91.6666666667% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-11-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-12-xs {
    flex: 0 0 calc(100% - 1em);
}

@media screen and (max-width: 480px) {
    .fx-col-12-xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-1-2xs {
    flex: 0 0 calc(8.3333333333% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-1-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-2-2xs {
    flex: 0 0 calc(16.6666666667% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-2-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-3-2xs {
    flex: 0 0 calc(25% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-3-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-4-2xs {
    flex: 0 0 calc(33.3333333333% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-4-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-5-2xs {
    flex: 0 0 calc(41.6666666667% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-5-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-6-2xs {
    flex: 0 0 calc(50% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-6-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-7-2xs {
    flex: 0 0 calc(58.3333333333% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-7-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-8-2xs {
    flex: 0 0 calc(66.6666666667% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-8-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-9-2xs {
    flex: 0 0 calc(75% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-9-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-10-2xs {
    flex: 0 0 calc(83.3333333333% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-10-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-11-2xs {
    flex: 0 0 calc(91.6666666667% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-11-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-col-12-2xs {
    flex: 0 0 calc(100% - 1em);
}

@media screen and (max-width: 320px) {
    .fx-col-12-2xs {
        flex: 1 1 auto;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.fx-gap-40em {
    gap: 40em;
}

.fx-gap-36em {
    gap: 36em;
}

.fx-gap-32em {
    gap: 32em;
}

.fx-gap-28em {
    gap: 28em;
}

.fx-gap-24em {
    gap: 24em;
}

.fx-gap-20em {
    gap: 20em;
}

.fx-gap-16em {
    gap: 16em;
}

.fx-gap-12em {
    gap: 12em;
}

.fx-gap-8em {
    gap: 8em;
}

.fx-gap-6em {
    gap: 6em;
}

.fx-gap-5\.75em {
    gap: 5.75em;
}

.fx-gap-5\.5em {
    gap: 5.5em;
}

.fx-gap-5\.25em {
    gap: 5.25em;
}

.fx-gap-5em {
    gap: 5em;
}

.fx-gap-4\.75em {
    gap: 4.75em;
}

.fx-gap-4\.5em {
    gap: 4.5em;
}

.fx-gap-4\.25em {
    gap: 4.25em;
}

.fx-gap-4em {
    gap: 4em;
}

.fx-gap-3\.75em {
    gap: 3.75em;
}

.fx-gap-3\.5em {
    gap: 3.5em;
}

.fx-gap-3\.25em {
    gap: 3.25em;
}

.fx-gap-3em {
    gap: 3em;
}

.fx-gap-2\.75em {
    gap: 2.75em;
}

.fx-gap-2\.5em {
    gap: 2.5em;
}

.fx-gap-2\.25em {
    gap: 2.25em;
}

.fx-gap-2em {
    gap: 2em;
}

.fx-gap-1\.75em {
    gap: 1.75em;
}

.fx-gap-1\.5em {
    gap: 1.5em;
}

.fx-gap-1\.25em {
    gap: 1.25em;
}

.fx-gap-1em {
    gap: 1em;
}

.fx-gap-0\.75em {
    gap: 0.75em;
}

.fx-gap-0\.5em {
    gap: 0.5em;
}

.fx-gap-0\.25em {
    gap: 0.25em;
}

.fx-gap-0\.125em {
    gap: 0.125em;
}

.fx-wrap {
    flex-wrap: wrap;
}

.fx-ltr {
    flex-direction: row;
}

.fx-rtl {
    flex-direction: row-reverse;
}

.fx-start {
    justify-content: flex-start;
    align-items: flex-start;
}

.fx-start-c-4xl {
    justify-content: start;
    align-items: start;
}

@media screen and (max-width: 1600px) {
    .fx-start-c-4xl {
        justify-content: center;
        align-items: center;
    }
}

.fx-start-c-3xl {
    justify-content: start;
    align-items: start;
}

@media screen and (max-width: 1440px) {
    .fx-start-c-3xl {
        justify-content: center;
        align-items: center;
    }
}

.fx-start-c-2xl {
    justify-content: start;
    align-items: start;
}

@media screen and (max-width: 1280px) {
    .fx-start-c-2xl {
        justify-content: center;
        align-items: center;
    }
}

.fx-start-c-xl {
    justify-content: start;
    align-items: start;
}

@media screen and (max-width: 1024px) {
    .fx-start-c-xl {
        justify-content: center;
        align-items: center;
    }
}

.fx-start-c-lg {
    justify-content: start;
    align-items: start;
}

@media screen and (max-width: 960px) {
    .fx-start-c-lg {
        justify-content: center;
        align-items: center;
    }
}

.fx-start-c-md {
    justify-content: start;
    align-items: start;
}

@media screen and (max-width: 800px) {
    .fx-start-c-md {
        justify-content: center;
        align-items: center;
    }
}

.fx-start-c-sm {
    justify-content: start;
    align-items: start;
}

@media screen and (max-width: 640px) {
    .fx-start-c-sm {
        justify-content: center;
        align-items: center;
    }
}

.fx-start-c-xs {
    justify-content: start;
    align-items: start;
}

@media screen and (max-width: 480px) {
    .fx-start-c-xs {
        justify-content: center;
        align-items: center;
    }
}

.fx-start-c-2xs {
    justify-content: start;
    align-items: start;
}

@media screen and (max-width: 320px) {
    .fx-start-c-2xs {
        justify-content: center;
        align-items: center;
    }
}

.fx-center {
    justify-content: center;
    align-items: center;
}

.fx-end {
    justify-content: flex-end;
    align-items: flex-end;
}

.fx-end-c-4xl {
    justify-content: end;
    align-items: end;
}

@media screen and (max-width: 1600px) {
    .fx-end-c-4xl {
        justify-content: center;
        align-items: center;
    }
}

.fx-end-c-3xl {
    justify-content: end;
    align-items: end;
}

@media screen and (max-width: 1440px) {
    .fx-end-c-3xl {
        justify-content: center;
        align-items: center;
    }
}

.fx-end-c-2xl {
    justify-content: end;
    align-items: end;
}

@media screen and (max-width: 1280px) {
    .fx-end-c-2xl {
        justify-content: center;
        align-items: center;
    }
}

.fx-end-c-xl {
    justify-content: end;
    align-items: end;
}

@media screen and (max-width: 1024px) {
    .fx-end-c-xl {
        justify-content: center;
        align-items: center;
    }
}

.fx-end-c-lg {
    justify-content: end;
    align-items: end;
}

@media screen and (max-width: 960px) {
    .fx-end-c-lg {
        justify-content: center;
        align-items: center;
    }
}

.fx-end-c-md {
    justify-content: end;
    align-items: end;
}

@media screen and (max-width: 800px) {
    .fx-end-c-md {
        justify-content: center;
        align-items: center;
    }
}

.fx-end-c-sm {
    justify-content: end;
    align-items: end;
}

@media screen and (max-width: 640px) {
    .fx-end-c-sm {
        justify-content: center;
        align-items: center;
    }
}

.fx-end-c-xs {
    justify-content: end;
    align-items: end;
}

@media screen and (max-width: 480px) {
    .fx-end-c-xs {
        justify-content: center;
        align-items: center;
    }
}

.fx-end-c-2xs {
    justify-content: end;
    align-items: end;
}

@media screen and (max-width: 320px) {
    .fx-end-c-2xs {
        justify-content: center;
        align-items: center;
    }
}

.fx-baseline {
    justify-content: baseline;
    align-items: baseline;
}

.fx-between {
    justify-content: space-between;
}

.fx-between-c-4xl {
    justify-content: space-between;
}

@media screen and (max-width: 1600px) {
    .fx-between-c-4xl {
        justify-content: center;
    }
}

.fx-between-c-3xl {
    justify-content: space-between;
}

@media screen and (max-width: 1440px) {
    .fx-between-c-3xl {
        justify-content: center;
    }
}

.fx-between-c-2xl {
    justify-content: space-between;
}

@media screen and (max-width: 1280px) {
    .fx-between-c-2xl {
        justify-content: center;
    }
}

.fx-between-c-xl {
    justify-content: space-between;
}

@media screen and (max-width: 1024px) {
    .fx-between-c-xl {
        justify-content: center;
    }
}

.fx-between-c-lg {
    justify-content: space-between;
}

@media screen and (max-width: 960px) {
    .fx-between-c-lg {
        justify-content: center;
    }
}

.fx-between-c-md {
    justify-content: space-between;
}

@media screen and (max-width: 800px) {
    .fx-between-c-md {
        justify-content: center;
    }
}

.fx-between-c-sm {
    justify-content: space-between;
}

@media screen and (max-width: 640px) {
    .fx-between-c-sm {
        justify-content: center;
    }
}

.fx-between-c-xs {
    justify-content: space-between;
}

@media screen and (max-width: 480px) {
    .fx-between-c-xs {
        justify-content: center;
    }
}

.fx-between-c-2xs {
    justify-content: space-between;
}

@media screen and (max-width: 320px) {
    .fx-between-c-2xs {
        justify-content: center;
    }
}

.fx-stretch {
    align-items: stretch;
}

.fx-justify-start {
    justify-content: flex-start;
}

.fx-justify-start-c-4xl {
    justify-content: flex-start;
}

@media screen and (max-width: 1600px) {
    .fx-justify-start-c-4xl {
        justify-content: center;
    }
}

.fx-justify-start-c-3xl {
    justify-content: flex-start;
}

@media screen and (max-width: 1440px) {
    .fx-justify-start-c-3xl {
        justify-content: center;
    }
}

.fx-justify-start-c-2xl {
    justify-content: flex-start;
}

@media screen and (max-width: 1280px) {
    .fx-justify-start-c-2xl {
        justify-content: center;
    }
}

.fx-justify-start-c-xl {
    justify-content: flex-start;
}

@media screen and (max-width: 1024px) {
    .fx-justify-start-c-xl {
        justify-content: center;
    }
}

.fx-justify-start-c-lg {
    justify-content: flex-start;
}

@media screen and (max-width: 960px) {
    .fx-justify-start-c-lg {
        justify-content: center;
    }
}

.fx-justify-start-c-md {
    justify-content: flex-start;
}

@media screen and (max-width: 800px) {
    .fx-justify-start-c-md {
        justify-content: center;
    }
}

.fx-justify-start-c-sm {
    justify-content: flex-start;
}

@media screen and (max-width: 640px) {
    .fx-justify-start-c-sm {
        justify-content: center;
    }
}

.fx-justify-start-c-xs {
    justify-content: flex-start;
}

@media screen and (max-width: 480px) {
    .fx-justify-start-c-xs {
        justify-content: center;
    }
}

.fx-justify-start-c-2xs {
    justify-content: flex-start;
}

@media screen and (max-width: 320px) {
    .fx-justify-start-c-2xs {
        justify-content: center;
    }
}

.fx-justify-center {
    justify-content: center;
}

.fx-justify-end {
    justify-content: flex-end;
}

.fx-justify-end-c-4xl {
    justify-content: flex-end;
}

@media screen and (max-width: 1600px) {
    .fx-justify-end-c-4xl {
        justify-content: center;
    }
}

.fx-justify-end-c-3xl {
    justify-content: flex-end;
}

@media screen and (max-width: 1440px) {
    .fx-justify-end-c-3xl {
        justify-content: center;
    }
}

.fx-justify-end-c-2xl {
    justify-content: flex-end;
}

@media screen and (max-width: 1280px) {
    .fx-justify-end-c-2xl {
        justify-content: center;
    }
}

.fx-justify-end-c-xl {
    justify-content: flex-end;
}

@media screen and (max-width: 1024px) {
    .fx-justify-end-c-xl {
        justify-content: center;
    }
}

.fx-justify-end-c-lg {
    justify-content: flex-end;
}

@media screen and (max-width: 960px) {
    .fx-justify-end-c-lg {
        justify-content: center;
    }
}

.fx-justify-end-c-md {
    justify-content: flex-end;
}

@media screen and (max-width: 800px) {
    .fx-justify-end-c-md {
        justify-content: center;
    }
}

.fx-justify-end-c-sm {
    justify-content: flex-end;
}

@media screen and (max-width: 640px) {
    .fx-justify-end-c-sm {
        justify-content: center;
    }
}

.fx-justify-end-c-xs {
    justify-content: flex-end;
}

@media screen and (max-width: 480px) {
    .fx-justify-end-c-xs {
        justify-content: center;
    }
}

.fx-justify-end-c-2xs {
    justify-content: flex-end;
}

@media screen and (max-width: 320px) {
    .fx-justify-end-c-2xs {
        justify-content: center;
    }
}

.fx-align-start {
    align-items: flex-start;
}

.fx-align-start-c-4xl {
    align-items: flex-start;
}

@media screen and (max-width: 1600px) {
    .fx-align-start-c-4xl {
        align-items: center;
    }
}

.fx-align-start-c-3xl {
    align-items: flex-start;
}

@media screen and (max-width: 1440px) {
    .fx-align-start-c-3xl {
        align-items: center;
    }
}

.fx-align-start-c-2xl {
    align-items: flex-start;
}

@media screen and (max-width: 1280px) {
    .fx-align-start-c-2xl {
        align-items: center;
    }
}

.fx-align-start-c-xl {
    align-items: flex-start;
}

@media screen and (max-width: 1024px) {
    .fx-align-start-c-xl {
        align-items: center;
    }
}

.fx-align-start-c-lg {
    align-items: flex-start;
}

@media screen and (max-width: 960px) {
    .fx-align-start-c-lg {
        align-items: center;
    }
}

.fx-align-start-c-md {
    align-items: flex-start;
}

@media screen and (max-width: 800px) {
    .fx-align-start-c-md {
        align-items: center;
    }
}

.fx-align-start-c-sm {
    align-items: flex-start;
}

@media screen and (max-width: 640px) {
    .fx-align-start-c-sm {
        align-items: center;
    }
}

.fx-align-start-c-xs {
    align-items: flex-start;
}

@media screen and (max-width: 480px) {
    .fx-align-start-c-xs {
        align-items: center;
    }
}

.fx-align-start-c-2xs {
    align-items: flex-start;
}

@media screen and (max-width: 320px) {
    .fx-align-start-c-2xs {
        align-items: center;
    }
}

.fx-align-center {
    align-items: center;
}

.fx-align-end {
    align-items: flex-end;
}

.fx-align-end-c-4xl {
    align-items: flex-end;
}

@media screen and (max-width: 1600px) {
    .fx-align-end-c-4xl {
        align-items: center;
    }
}

.fx-align-end-c-3xl {
    align-items: flex-end;
}

@media screen and (max-width: 1440px) {
    .fx-align-end-c-3xl {
        align-items: center;
    }
}

.fx-align-end-c-2xl {
    align-items: flex-end;
}

@media screen and (max-width: 1280px) {
    .fx-align-end-c-2xl {
        align-items: center;
    }
}

.fx-align-end-c-xl {
    align-items: flex-end;
}

@media screen and (max-width: 1024px) {
    .fx-align-end-c-xl {
        align-items: center;
    }
}

.fx-align-end-c-lg {
    align-items: flex-end;
}

@media screen and (max-width: 960px) {
    .fx-align-end-c-lg {
        align-items: center;
    }
}

.fx-align-end-c-md {
    align-items: flex-end;
}

@media screen and (max-width: 800px) {
    .fx-align-end-c-md {
        align-items: center;
    }
}

.fx-align-end-c-sm {
    align-items: flex-end;
}

@media screen and (max-width: 640px) {
    .fx-align-end-c-sm {
        align-items: center;
    }
}

.fx-align-end-c-xs {
    align-items: flex-end;
}

@media screen and (max-width: 480px) {
    .fx-align-end-c-xs {
        align-items: center;
    }
}

.fx-align-end-c-2xs {
    align-items: flex-end;
}

@media screen and (max-width: 320px) {
    .fx-align-end-c-2xs {
        align-items: center;
    }
}

/* spacing */
.mg-auto {
    margin: auto !important;
}

.mg-x-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mg-y-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.mg-10rem {
    margin: 10rem;
}

.mg-top-10rem {
    margin-top: 10rem;
}

.mg-left-10rem {
    margin-left: 10rem;
}

.mg-right-10rem {
    margin-right: 10rem;
}

.mg-bottom-10rem {
    margin-bottom: 10rem;
}

.mg-x-10rem {
    margin-left: 10rem;
    margin-right: 10rem;
}

.mg-y-10rem {
    margin-top: 10rem;
    margin-bottom: 10rem;
}

.mg-8rem {
    margin: 8rem;
}

.mg-top-8rem {
    margin-top: 8rem;
}

.mg-left-8rem {
    margin-left: 8rem;
}

.mg-right-8rem {
    margin-right: 8rem;
}

.mg-bottom-8rem {
    margin-bottom: 8rem;
}

.mg-x-8rem {
    margin-left: 8rem;
    margin-right: 8rem;
}

.mg-y-8rem {
    margin-top: 8rem;
    margin-bottom: 8rem;
}

.mg-6rem {
    margin: 6rem;
}

.mg-top-6rem {
    margin-top: 6rem;
}

.mg-left-6rem {
    margin-left: 6rem;
}

.mg-right-6rem {
    margin-right: 6rem;
}

.mg-bottom-6rem {
    margin-bottom: 6rem;
}

.mg-x-6rem {
    margin-left: 6rem;
    margin-right: 6rem;
}

.mg-y-6rem {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.mg-4rem {
    margin: 4rem;
}

.mg-top-4rem {
    margin-top: 4rem;
}

.mg-left-4rem {
    margin-left: 4rem;
}

.mg-right-4rem {
    margin-right: 4rem;
}

.mg-bottom-4rem {
    margin-bottom: 4rem;
}

.mg-x-4rem {
    margin-left: 4rem;
    margin-right: 4rem;
}

.mg-y-4rem {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.mg-3rem {
    margin: 3rem;
}

.mg-top-3rem {
    margin-top: 3rem;
}

.mg-left-3rem {
    margin-left: 3rem;
}

.mg-right-3rem {
    margin-right: 3rem;
}

.mg-bottom-3rem {
    margin-bottom: 3rem;
}

.mg-x-3rem {
    margin-left: 3rem;
    margin-right: 3rem;
}

.mg-y-3rem {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.mg-2\.75rem {
    margin: 2.75rem;
}

.mg-top-2\.75rem {
    margin-top: 2.75rem;
}

.mg-left-2\.75rem {
    margin-left: 2.75rem;
}

.mg-right-2\.75rem {
    margin-right: 2.75rem;
}

.mg-bottom-2\.75rem {
    margin-bottom: 2.75rem;
}

.mg-x-2\.75rem {
    margin-left: 2.75rem;
    margin-right: 2.75rem;
}

.mg-y-2\.75rem {
    margin-top: 2.75rem;
    margin-bottom: 2.75rem;
}

.mg-2\.5rem {
    margin: 2.5rem;
}

.mg-top-2\.5rem {
    margin-top: 2.5rem;
}

.mg-left-2\.5rem {
    margin-left: 2.5rem;
}

.mg-right-2\.5rem {
    margin-right: 2.5rem;
}

.mg-bottom-2\.5rem {
    margin-bottom: 2.5rem;
}

.mg-x-2\.5rem {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

.mg-y-2\.5rem {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.mg-2\.25rem {
    margin: 2.25rem;
}

.mg-top-2\.25rem {
    margin-top: 2.25rem;
}

.mg-left-2\.25rem {
    margin-left: 2.25rem;
}

.mg-right-2\.25rem {
    margin-right: 2.25rem;
}

.mg-bottom-2\.25rem {
    margin-bottom: 2.25rem;
}

.mg-x-2\.25rem {
    margin-left: 2.25rem;
    margin-right: 2.25rem;
}

.mg-y-2\.25rem {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
}

.mg-2rem {
    margin: 2rem;
}

.mg-top-2rem {
    margin-top: 2rem;
}

.mg-left-2rem {
    margin-left: 2rem;
}

.mg-right-2rem {
    margin-right: 2rem;
}

.mg-bottom-2rem {
    margin-bottom: 2rem;
}

.mg-x-2rem {
    margin-left: 2rem;
    margin-right: 2rem;
}

.mg-y-2rem {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mg-1\.75rem {
    margin: 1.75rem;
}

.mg-top-1\.75rem {
    margin-top: 1.75rem;
}

.mg-left-1\.75rem {
    margin-left: 1.75rem;
}

.mg-right-1\.75rem {
    margin-right: 1.75rem;
}

.mg-bottom-1\.75rem {
    margin-bottom: 1.75rem;
}

.mg-x-1\.75rem {
    margin-left: 1.75rem;
    margin-right: 1.75rem;
}

.mg-y-1\.75rem {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}

.mg-1\.5rem {
    margin: 1.5rem;
}

.mg-top-1\.5rem {
    margin-top: 1.5rem;
}

.mg-left-1\.5rem {
    margin-left: 1.5rem;
}

.mg-right-1\.5rem {
    margin-right: 1.5rem;
}

.mg-bottom-1\.5rem {
    margin-bottom: 1.5rem;
}

.mg-x-1\.5rem {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.mg-y-1\.5rem {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.mg-1\.25rem {
    margin: 1.25rem;
}

.mg-top-1\.25rem {
    margin-top: 1.25rem;
}

.mg-left-1\.25rem {
    margin-left: 1.25rem;
}

.mg-right-1\.25rem {
    margin-right: 1.25rem;
}

.mg-bottom-1\.25rem {
    margin-bottom: 1.25rem;
}

.mg-x-1\.25rem {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.mg-y-1\.25rem {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.mg-1rem {
    margin: 1rem;
}

.mg-top-1rem {
    margin-top: 1rem;
}

.mg-left-1rem {
    margin-left: 1rem;
}

.mg-right-1rem {
    margin-right: 1rem;
}

.mg-bottom-1rem {
    margin-bottom: 1rem;
}

.mg-x-1rem {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mg-y-1rem {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mg-0\.75rem {
    margin: 0.75rem;
}

.mg-top-0\.75rem {
    margin-top: 0.75rem;
}

.mg-left-0\.75rem {
    margin-left: 0.75rem;
}

.mg-right-0\.75rem {
    margin-right: 0.75rem;
}

.mg-bottom-0\.75rem {
    margin-bottom: 0.75rem;
}

.mg-x-0\.75rem {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

.mg-y-0\.75rem {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.mg-0\.5rem {
    margin: 0.5rem;
}

.mg-top-0\.5rem {
    margin-top: 0.5rem;
}

.mg-left-0\.5rem {
    margin-left: 0.5rem;
}

.mg-right-0\.5rem {
    margin-right: 0.5rem;
}

.mg-bottom-0\.5rem {
    margin-bottom: 0.5rem;
}

.mg-x-0\.5rem {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.mg-y-0\.5rem {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.mg-0\.25rem {
    margin: 0.25rem;
}

.mg-top-0\.25rem {
    margin-top: 0.25rem;
}

.mg-left-0\.25rem {
    margin-left: 0.25rem;
}

.mg-right-0\.25rem {
    margin-right: 0.25rem;
}

.mg-bottom-0\.25rem {
    margin-bottom: 0.25rem;
}

.mg-x-0\.25rem {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.mg-y-0\.25rem {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.mg-0\.125rem {
    margin: 0.125rem;
}

.mg-top-0\.125rem {
    margin-top: 0.125rem;
}

.mg-left-0\.125rem {
    margin-left: 0.125rem;
}

.mg-right-0\.125rem {
    margin-right: 0.125rem;
}

.mg-bottom-0\.125rem {
    margin-bottom: 0.125rem;
}

.mg-x-0\.125rem {
    margin-left: 0.125rem;
    margin-right: 0.125rem;
}

.mg-y-0\.125rem {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
}

.pd-40em {
    padding: 40em;
}

.pd-top-40em {
    padding-top: 40em;
}

.pd-left-40em {
    padding-left: 40em;
}

.pd-right-40em {
    padding-right: 40em;
}

.pd-bottom-40em {
    padding-bottom: 40em;
}

.pd-x-40em {
    padding-left: 40em;
    padding-right: 40em;
}

.pd-y-40em {
    padding-top: 40em;
    padding-bottom: 40em;
}

.pd-36em {
    padding: 36em;
}

.pd-top-36em {
    padding-top: 36em;
}

.pd-left-36em {
    padding-left: 36em;
}

.pd-right-36em {
    padding-right: 36em;
}

.pd-bottom-36em {
    padding-bottom: 36em;
}

.pd-x-36em {
    padding-left: 36em;
    padding-right: 36em;
}

.pd-y-36em {
    padding-top: 36em;
    padding-bottom: 36em;
}

.pd-32em {
    padding: 32em;
}

.pd-top-32em {
    padding-top: 32em;
}

.pd-left-32em {
    padding-left: 32em;
}

.pd-right-32em {
    padding-right: 32em;
}

.pd-bottom-32em {
    padding-bottom: 32em;
}

.pd-x-32em {
    padding-left: 32em;
    padding-right: 32em;
}

.pd-y-32em {
    padding-top: 32em;
    padding-bottom: 32em;
}

.pd-28em {
    padding: 28em;
}

.pd-top-28em {
    padding-top: 28em;
}

.pd-left-28em {
    padding-left: 28em;
}

.pd-right-28em {
    padding-right: 28em;
}

.pd-bottom-28em {
    padding-bottom: 28em;
}

.pd-x-28em {
    padding-left: 28em;
    padding-right: 28em;
}

.pd-y-28em {
    padding-top: 28em;
    padding-bottom: 28em;
}

.pd-24em {
    padding: 24em;
}

.pd-top-24em {
    padding-top: 24em;
}

.pd-left-24em {
    padding-left: 24em;
}

.pd-right-24em {
    padding-right: 24em;
}

.pd-bottom-24em {
    padding-bottom: 24em;
}

.pd-x-24em {
    padding-left: 24em;
    padding-right: 24em;
}

.pd-y-24em {
    padding-top: 24em;
    padding-bottom: 24em;
}

.pd-20em {
    padding: 20em;
}

.pd-top-20em {
    padding-top: 20em;
}

.pd-left-20em {
    padding-left: 20em;
}

.pd-right-20em {
    padding-right: 20em;
}

.pd-bottom-20em {
    padding-bottom: 20em;
}

.pd-x-20em {
    padding-left: 20em;
    padding-right: 20em;
}

.pd-y-20em {
    padding-top: 20em;
    padding-bottom: 20em;
}

.pd-16em {
    padding: 16em;
}

.pd-top-16em {
    padding-top: 16em;
}

.pd-left-16em {
    padding-left: 16em;
}

.pd-right-16em {
    padding-right: 16em;
}

.pd-bottom-16em {
    padding-bottom: 16em;
}

.pd-x-16em {
    padding-left: 16em;
    padding-right: 16em;
}

.pd-y-16em {
    padding-top: 16em;
    padding-bottom: 16em;
}

.pd-12em {
    padding: 12em;
}

.pd-top-12em {
    padding-top: 12em;
}

.pd-left-12em {
    padding-left: 12em;
}

.pd-right-12em {
    padding-right: 12em;
}

.pd-bottom-12em {
    padding-bottom: 12em;
}

.pd-x-12em {
    padding-left: 12em;
    padding-right: 12em;
}

.pd-y-12em {
    padding-top: 12em;
    padding-bottom: 12em;
}

.pd-8em {
    padding: 8em;
}

.pd-top-8em {
    padding-top: 8em;
}

.pd-left-8em {
    padding-left: 8em;
}

.pd-right-8em {
    padding-right: 8em;
}

.pd-bottom-8em {
    padding-bottom: 8em;
}

.pd-x-8em {
    padding-left: 8em;
    padding-right: 8em;
}

.pd-y-8em {
    padding-top: 8em;
    padding-bottom: 8em;
}

.pd-6em {
    padding: 6em;
}

.pd-top-6em {
    padding-top: 6em;
}

.pd-left-6em {
    padding-left: 6em;
}

.pd-right-6em {
    padding-right: 6em;
}

.pd-bottom-6em {
    padding-bottom: 6em;
}

.pd-x-6em {
    padding-left: 6em;
    padding-right: 6em;
}

.pd-y-6em {
    padding-top: 6em;
    padding-bottom: 6em;
}

.pd-5\.75em {
    padding: 5.75em;
}

.pd-top-5\.75em {
    padding-top: 5.75em;
}

.pd-left-5\.75em {
    padding-left: 5.75em;
}

.pd-right-5\.75em {
    padding-right: 5.75em;
}

.pd-bottom-5\.75em {
    padding-bottom: 5.75em;
}

.pd-x-5\.75em {
    padding-left: 5.75em;
    padding-right: 5.75em;
}

.pd-y-5\.75em {
    padding-top: 5.75em;
    padding-bottom: 5.75em;
}

.pd-5\.5em {
    padding: 5.5em;
}

.pd-top-5\.5em {
    padding-top: 5.5em;
}

.pd-left-5\.5em {
    padding-left: 5.5em;
}

.pd-right-5\.5em {
    padding-right: 5.5em;
}

.pd-bottom-5\.5em {
    padding-bottom: 5.5em;
}

.pd-x-5\.5em {
    padding-left: 5.5em;
    padding-right: 5.5em;
}

.pd-y-5\.5em {
    padding-top: 5.5em;
    padding-bottom: 5.5em;
}

.pd-5\.25em {
    padding: 5.25em;
}

.pd-top-5\.25em {
    padding-top: 5.25em;
}

.pd-left-5\.25em {
    padding-left: 5.25em;
}

.pd-right-5\.25em {
    padding-right: 5.25em;
}

.pd-bottom-5\.25em {
    padding-bottom: 5.25em;
}

.pd-x-5\.25em {
    padding-left: 5.25em;
    padding-right: 5.25em;
}

.pd-y-5\.25em {
    padding-top: 5.25em;
    padding-bottom: 5.25em;
}

.pd-5em {
    padding: 5em;
}

.pd-top-5em {
    padding-top: 5em;
}

.pd-left-5em {
    padding-left: 5em;
}

.pd-right-5em {
    padding-right: 5em;
}

.pd-bottom-5em {
    padding-bottom: 5em;
}

.pd-x-5em {
    padding-left: 5em;
    padding-right: 5em;
}

.pd-y-5em {
    padding-top: 5em;
    padding-bottom: 5em;
}

.pd-4\.75em {
    padding: 4.75em;
}

.pd-top-4\.75em {
    padding-top: 4.75em;
}

.pd-left-4\.75em {
    padding-left: 4.75em;
}

.pd-right-4\.75em {
    padding-right: 4.75em;
}

.pd-bottom-4\.75em {
    padding-bottom: 4.75em;
}

.pd-x-4\.75em {
    padding-left: 4.75em;
    padding-right: 4.75em;
}

.pd-y-4\.75em {
    padding-top: 4.75em;
    padding-bottom: 4.75em;
}

.pd-4\.5em {
    padding: 4.5em;
}

.pd-top-4\.5em {
    padding-top: 4.5em;
}

.pd-left-4\.5em {
    padding-left: 4.5em;
}

.pd-right-4\.5em {
    padding-right: 4.5em;
}

.pd-bottom-4\.5em {
    padding-bottom: 4.5em;
}

.pd-x-4\.5em {
    padding-left: 4.5em;
    padding-right: 4.5em;
}

.pd-y-4\.5em {
    padding-top: 4.5em;
    padding-bottom: 4.5em;
}

.pd-4\.25em {
    padding: 4.25em;
}

.pd-top-4\.25em {
    padding-top: 4.25em;
}

.pd-left-4\.25em {
    padding-left: 4.25em;
}

.pd-right-4\.25em {
    padding-right: 4.25em;
}

.pd-bottom-4\.25em {
    padding-bottom: 4.25em;
}

.pd-x-4\.25em {
    padding-left: 4.25em;
    padding-right: 4.25em;
}

.pd-y-4\.25em {
    padding-top: 4.25em;
    padding-bottom: 4.25em;
}

.pd-4em {
    padding: 4em;
}

.pd-top-4em {
    padding-top: 4em;
}

.pd-left-4em {
    padding-left: 4em;
}

.pd-right-4em {
    padding-right: 4em;
}

.pd-bottom-4em {
    padding-bottom: 4em;
}

.pd-x-4em {
    padding-left: 4em;
    padding-right: 4em;
}

.pd-y-4em {
    padding-top: 4em;
    padding-bottom: 4em;
}

.pd-3\.75em {
    padding: 3.75em;
}

.pd-top-3\.75em {
    padding-top: 3.75em;
}

.pd-left-3\.75em {
    padding-left: 3.75em;
}

.pd-right-3\.75em {
    padding-right: 3.75em;
}

.pd-bottom-3\.75em {
    padding-bottom: 3.75em;
}

.pd-x-3\.75em {
    padding-left: 3.75em;
    padding-right: 3.75em;
}

.pd-y-3\.75em {
    padding-top: 3.75em;
    padding-bottom: 3.75em;
}

.pd-3\.5em {
    padding: 3.5em;
}

.pd-top-3\.5em {
    padding-top: 3.5em;
}

.pd-left-3\.5em {
    padding-left: 3.5em;
}

.pd-right-3\.5em {
    padding-right: 3.5em;
}

.pd-bottom-3\.5em {
    padding-bottom: 3.5em;
}

.pd-x-3\.5em {
    padding-left: 3.5em;
    padding-right: 3.5em;
}

.pd-y-3\.5em {
    padding-top: 3.5em;
    padding-bottom: 3.5em;
}

.pd-3\.25em {
    padding: 3.25em;
}

.pd-top-3\.25em {
    padding-top: 3.25em;
}

.pd-left-3\.25em {
    padding-left: 3.25em;
}

.pd-right-3\.25em {
    padding-right: 3.25em;
}

.pd-bottom-3\.25em {
    padding-bottom: 3.25em;
}

.pd-x-3\.25em {
    padding-left: 3.25em;
    padding-right: 3.25em;
}

.pd-y-3\.25em {
    padding-top: 3.25em;
    padding-bottom: 3.25em;
}

.pd-3em {
    padding: 3em;
}

.pd-top-3em {
    padding-top: 3em;
}

.pd-left-3em {
    padding-left: 3em;
}

.pd-right-3em {
    padding-right: 3em;
}

.pd-bottom-3em {
    padding-bottom: 3em;
}

.pd-x-3em {
    padding-left: 3em;
    padding-right: 3em;
}

.pd-y-3em {
    padding-top: 3em;
    padding-bottom: 3em;
}

.pd-2\.75em {
    padding: 2.75em;
}

.pd-top-2\.75em {
    padding-top: 2.75em;
}

.pd-left-2\.75em {
    padding-left: 2.75em;
}

.pd-right-2\.75em {
    padding-right: 2.75em;
}

.pd-bottom-2\.75em {
    padding-bottom: 2.75em;
}

.pd-x-2\.75em {
    padding-left: 2.75em;
    padding-right: 2.75em;
}

.pd-y-2\.75em {
    padding-top: 2.75em;
    padding-bottom: 2.75em;
}

.pd-2\.5em {
    padding: 2.5em;
}

.pd-top-2\.5em {
    padding-top: 2.5em;
}

.pd-left-2\.5em {
    padding-left: 2.5em;
}

.pd-right-2\.5em {
    padding-right: 2.5em;
}

.pd-bottom-2\.5em {
    padding-bottom: 2.5em;
}

.pd-x-2\.5em {
    padding-left: 2.5em;
    padding-right: 2.5em;
}

.pd-y-2\.5em {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
}

.pd-2\.25em {
    padding: 2.25em;
}

.pd-top-2\.25em {
    padding-top: 2.25em;
}

.pd-left-2\.25em {
    padding-left: 2.25em;
}

.pd-right-2\.25em {
    padding-right: 2.25em;
}

.pd-bottom-2\.25em {
    padding-bottom: 2.25em;
}

.pd-x-2\.25em {
    padding-left: 2.25em;
    padding-right: 2.25em;
}

.pd-y-2\.25em {
    padding-top: 2.25em;
    padding-bottom: 2.25em;
}

.pd-2em {
    padding: 2em;
}

.pd-top-2em {
    padding-top: 2em;
}

.pd-left-2em {
    padding-left: 2em;
}

.pd-right-2em {
    padding-right: 2em;
}

.pd-bottom-2em {
    padding-bottom: 2em;
}

.pd-x-2em {
    padding-left: 2em;
    padding-right: 2em;
}

.pd-y-2em {
    padding-top: 2em;
    padding-bottom: 2em;
}

.pd-1\.75em {
    padding: 1.75em;
}

.pd-top-1\.75em {
    padding-top: 1.75em;
}

.pd-left-1\.75em {
    padding-left: 1.75em;
}

.pd-right-1\.75em {
    padding-right: 1.75em;
}

.pd-bottom-1\.75em {
    padding-bottom: 1.75em;
}

.pd-x-1\.75em {
    padding-left: 1.75em;
    padding-right: 1.75em;
}

.pd-y-1\.75em {
    padding-top: 1.75em;
    padding-bottom: 1.75em;
}

.pd-1\.5em {
    padding: 1.5em;
}

.pd-top-1\.5em {
    padding-top: 1.5em;
}

.pd-left-1\.5em {
    padding-left: 1.5em;
}

.pd-right-1\.5em {
    padding-right: 1.5em;
}

.pd-bottom-1\.5em {
    padding-bottom: 1.5em;
}

.pd-x-1\.5em {
    padding-left: 1.5em;
    padding-right: 1.5em;
}

.pd-y-1\.5em {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

.pd-1\.25em {
    padding: 1.25em;
}

.pd-top-1\.25em {
    padding-top: 1.25em;
}

.pd-left-1\.25em {
    padding-left: 1.25em;
}

.pd-right-1\.25em {
    padding-right: 1.25em;
}

.pd-bottom-1\.25em {
    padding-bottom: 1.25em;
}

.pd-x-1\.25em {
    padding-left: 1.25em;
    padding-right: 1.25em;
}

.pd-y-1\.25em {
    padding-top: 1.25em;
    padding-bottom: 1.25em;
}

.pd-1em {
    padding: 1em;
}

.pd-top-1em {
    padding-top: 1em;
}

.pd-left-1em {
    padding-left: 1em;
}

.pd-right-1em {
    padding-right: 1em;
}

.pd-bottom-1em {
    padding-bottom: 1em;
}

.pd-x-1em {
    padding-left: 1em;
    padding-right: 1em;
}

.pd-y-1em {
    padding-top: 1em;
    padding-bottom: 1em;
}

.pd-0\.75em {
    padding: 0.75em;
}

.pd-top-0\.75em {
    padding-top: 0.75em;
}

.pd-left-0\.75em {
    padding-left: 0.75em;
}

.pd-right-0\.75em {
    padding-right: 0.75em;
}

.pd-bottom-0\.75em {
    padding-bottom: 0.75em;
}

.pd-x-0\.75em {
    padding-left: 0.75em;
    padding-right: 0.75em;
}

.pd-y-0\.75em {
    padding-top: 0.75em;
    padding-bottom: 0.75em;
}

.pd-0\.5em {
    padding: 0.5em;
}

.pd-top-0\.5em {
    padding-top: 0.5em;
}

.pd-left-0\.5em {
    padding-left: 0.5em;
}

.pd-right-0\.5em {
    padding-right: 0.5em;
}

.pd-bottom-0\.5em {
    padding-bottom: 0.5em;
}

.pd-x-0\.5em {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.pd-y-0\.5em {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.pd-0\.25em {
    padding: 0.25em;
}

.pd-top-0\.25em {
    padding-top: 0.25em;
}

.pd-left-0\.25em {
    padding-left: 0.25em;
}

.pd-right-0\.25em {
    padding-right: 0.25em;
}

.pd-bottom-0\.25em {
    padding-bottom: 0.25em;
}

.pd-x-0\.25em {
    padding-left: 0.25em;
    padding-right: 0.25em;
}

.pd-y-0\.25em {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.pd-0\.125em {
    padding: 0.125em;
}

.pd-top-0\.125em {
    padding-top: 0.125em;
}

.pd-left-0\.125em {
    padding-left: 0.125em;
}

.pd-right-0\.125em {
    padding-right: 0.125em;
}

.pd-bottom-0\.125em {
    padding-bottom: 0.125em;
}

.pd-x-0\.125em {
    padding-left: 0.125em;
    padding-right: 0.125em;
}

.pd-y-0\.125em {
    padding-top: 0.125em;
    padding-bottom: 0.125em;
}

/* text */
.title {
    margin: 0.25em;
    font-size: 2em;
    font-weight: 500;
    line-height: 1.25em;
    text-align: justify;
}

    .title:not([class^=color-]):not([class*=" color-"]) {
        color: #FFFF81;
    }

.text {
    margin: 0.5em;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.25em;
    text-align: justify;
}

    .text:not([class^=color-]):not([class*=" color-"]) {
        color: #2C6691;
    }

    .text span {
        display: inline-block;
    }

.note {
    margin: 0.5em;
    font-size: 15.2px;
    padding: 0 0 0 0.8em;
}

    .note::before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        content: "*";
        font-size: 1.2em;
    }

.text-break {
    display: block;
    white-space: wrap;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.fw-nm {
    font-weight: 400;
}

.fw-md {
    font-weight: 500;
}

.fw-bd {
    font-weight: 700;
}

/* font-size */
.fs-4xl {
    font-size: 48px;
}

@media screen and (max-width: 1280px) {
    .fs-4xl {
        font-size: 42px;
    }
}

@media screen and (max-width: 640px) {
    .fs-4xl {
        font-size: 37.8px;
    }
}

.fs-3xl {
    font-size: 40px;
}

@media screen and (max-width: 1280px) {
    .fs-3xl {
        font-size: 36px;
    }
}

@media screen and (max-width: 640px) {
    .fs-3xl {
        font-size: 32.2px;
    }
}

.fs-2xl {
    font-size: 32px;
}

@media screen and (max-width: 1280px) {
    .fs-2xl {
        font-size: 27px;
    }
}

@media screen and (max-width: 640px) {
    .fs-2xl {
        font-size: 23.1px;
    }
}

.fs-xl {
    font-size: 24px;
}

@media screen and (max-width: 1280px) {
    .fs-xl {
        font-size: 21px;
    }
}

@media screen and (max-width: 640px) {
    .fs-xl {
        font-size: 18.2px;
    }
}

.fs-lg {
    font-size: 20px;
}

@media screen and (max-width: 1280px) {
    .fs-lg {
        font-size: 17.25px;
    }
}

@media screen and (max-width: 640px) {
    .fs-lg {
        font-size: 15.4px;
    }
}

.fs-md {
    font-size: 16px;
}

@media screen and (max-width: 1280px) {
    .fs-md {
        font-size: 15px;
    }
}

@media screen and (max-width: 640px) {
    .fs-md {
        font-size: 14px;
    }
}

.fs-sm {
    font-size: 15.2px;
}

@media screen and (max-width: 1280px) {
    .fs-sm {
        font-size: 13.5px;
    }
}

@media screen and (max-width: 640px) {
    .fs-sm {
        font-size: 12.6px;
    }
}

.fs-xs {
    font-size: 14.4px;
}

@media screen and (max-width: 1280px) {
    .fs-xs {
        font-size: 12.75px;
    }
}

@media screen and (max-width: 640px) {
    .fs-xs {
        font-size: 11.9px;
    }
}

.fs-40em {
    font-size: 40em;
}

.fs-36em {
    font-size: 36em;
}

.fs-32em {
    font-size: 32em;
}

.fs-28em {
    font-size: 28em;
}

.fs-24em {
    font-size: 24em;
}

.fs-20em {
    font-size: 20em;
}

.fs-16em {
    font-size: 16em;
}

.fs-12em {
    font-size: 12em;
}

.fs-8em {
    font-size: 8em;
}

.fs-6em {
    font-size: 6em;
}

.fs-5\.75em {
    font-size: 5.75em;
}

.fs-5\.5em {
    font-size: 5.5em;
}

.fs-5\.25em {
    font-size: 5.25em;
}

.fs-5em {
    font-size: 5em;
}

.fs-4\.75em {
    font-size: 4.75em;
}

.fs-4\.5em {
    font-size: 4.5em;
}

.fs-4\.25em {
    font-size: 4.25em;
}

.fs-4em {
    font-size: 4em;
}

.fs-3\.75em {
    font-size: 3.75em;
}

.fs-3\.5em {
    font-size: 3.5em;
}

.fs-3\.25em {
    font-size: 3.25em;
}

.fs-3em {
    font-size: 3em;
}

.fs-2\.75em {
    font-size: 2.75em;
}

.fs-2\.5em {
    font-size: 2.5em;
}

.fs-2\.25em {
    font-size: 2.25em;
}

.fs-2em {
    font-size: 2em;
}

.fs-1\.75em {
    font-size: 1.75em;
}

.fs-1\.5em {
    font-size: 1.5em;
}

.fs-1\.25em {
    font-size: 1.25em;
}

.fs-1em {
    font-size: 1em;
}

.fs-0\.75em {
    font-size: 0.75em;
}

.fs-0\.5em {
    font-size: 0.5em;
}

.fs-0\.25em {
    font-size: 0.25em;
}

.fs-0\.125em {
    font-size: 0.125em;
}

.fs-10rem {
    font-size: 10rem;
}

.fs-8rem {
    font-size: 8rem;
}

.fs-6rem {
    font-size: 6rem;
}

.fs-4rem {
    font-size: 4rem;
}

.fs-3rem {
    font-size: 3rem;
}

.fs-2\.75rem {
    font-size: 2.75rem;
}

.fs-2\.5rem {
    font-size: 2.5rem;
}

.fs-2\.25rem {
    font-size: 2.25rem;
}

.fs-2rem {
    font-size: 2rem;
}

.fs-1\.75rem {
    font-size: 1.75rem;
}

.fs-1\.5rem {
    font-size: 1.5rem;
}

.fs-1\.25rem {
    font-size: 1.25rem;
}

.fs-1rem {
    font-size: 1rem;
}

.fs-0\.75rem {
    font-size: 0.75rem;
}

.fs-0\.5rem {
    font-size: 0.5rem;
}

.fs-0\.25rem {
    font-size: 0.25rem;
}

.fs-0\.125rem {
    font-size: 0.125rem;
}

/* width */
.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.w-auto {
    width: auto;
}

.w-4xl {
    width: 1600px;
}

@media screen and (max-width: 1600px) {
    .w-4xl {
        width: calc(100% - 2em);
        margin-left: auto;
        margin-right: auto;
    }
}

.min-w-4xl {
    min-width: 1600px;
}

@media screen and (max-width: 1600px) {
    .min-w-4xl {
        width: 100vw;
        min-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.max-w-4xl {
    max-width: 1600px;
}

@media screen and (max-width: 1600px) {
    .max-w-4xl {
        width: calc(100% - 2em);
        max-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.w-3xl {
    width: 1440px;
}

@media screen and (max-width: 1440px) {
    .w-3xl {
        width: calc(100% - 2em);
        margin-left: auto;
        margin-right: auto;
    }
}

.min-w-3xl {
    min-width: 1440px;
}

@media screen and (max-width: 1440px) {
    .min-w-3xl {
        width: 100vw;
        min-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.max-w-3xl {
    max-width: 1440px;
}

@media screen and (max-width: 1440px) {
    .max-w-3xl {
        width: calc(100% - 2em);
        max-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.w-2xl {
    width: 1280px;
}

@media screen and (max-width: 1280px) {
    .w-2xl {
        width: calc(100% - 2em);
        margin-left: auto;
        margin-right: auto;
    }
}

.min-w-2xl {
    min-width: 1280px;
}

@media screen and (max-width: 1280px) {
    .min-w-2xl {
        width: 100vw;
        min-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.max-w-2xl {
    max-width: 1280px;
}

@media screen and (max-width: 1280px) {
    .max-w-2xl {
        width: calc(100% - 2em);
        max-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.w-xl {
    width: 1024px;
}

@media screen and (max-width: 1024px) {
    .w-xl {
        width: calc(100% - 2em);
        margin-left: auto;
        margin-right: auto;
    }
}

.min-w-xl {
    min-width: 1024px;
}

@media screen and (max-width: 1024px) {
    .min-w-xl {
        width: 100vw;
        min-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.max-w-xl {
    max-width: 1024px;
}

@media screen and (max-width: 1024px) {
    .max-w-xl {
        width: calc(100% - 2em);
        max-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.w-lg {
    width: 960px;
}

@media screen and (max-width: 960px) {
    .w-lg {
        width: calc(100% - 2em);
        margin-left: auto;
        margin-right: auto;
    }
}

.min-w-lg {
    min-width: 960px;
}

@media screen and (max-width: 960px) {
    .min-w-lg {
        width: 100vw;
        min-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.max-w-lg {
    max-width: 960px;
}

@media screen and (max-width: 960px) {
    .max-w-lg {
        width: calc(100% - 2em);
        max-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.w-md {
    width: 800px;
}

@media screen and (max-width: 800px) {
    .w-md {
        width: calc(100% - 2em);
        margin-left: auto;
        margin-right: auto;
    }
}

.min-w-md {
    min-width: 800px;
}

@media screen and (max-width: 800px) {
    .min-w-md {
        width: 100vw;
        min-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.max-w-md {
    max-width: 800px;
}

@media screen and (max-width: 800px) {
    .max-w-md {
        width: calc(100% - 2em);
        max-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.w-sm {
    width: 640px;
}

@media screen and (max-width: 640px) {
    .w-sm {
        width: calc(100% - 2em);
        margin-left: auto;
        margin-right: auto;
    }
}

.min-w-sm {
    min-width: 640px;
}

@media screen and (max-width: 640px) {
    .min-w-sm {
        width: 100vw;
        min-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.max-w-sm {
    max-width: 640px;
}

@media screen and (max-width: 640px) {
    .max-w-sm {
        width: calc(100% - 2em);
        max-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.w-xs {
    width: 480px;
}

@media screen and (max-width: 480px) {
    .w-xs {
        width: calc(100% - 2em);
        margin-left: auto;
        margin-right: auto;
    }
}

.min-w-xs {
    min-width: 480px;
}

@media screen and (max-width: 480px) {
    .min-w-xs {
        width: 100vw;
        min-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.max-w-xs {
    max-width: 480px;
}

@media screen and (max-width: 480px) {
    .max-w-xs {
        width: calc(100% - 2em);
        max-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.w-2xs {
    width: 320px;
}

@media screen and (max-width: 320px) {
    .w-2xs {
        width: calc(100% - 2em);
        margin-left: auto;
        margin-right: auto;
    }
}

.min-w-2xs {
    min-width: 320px;
}

@media screen and (max-width: 320px) {
    .min-w-2xs {
        width: 100vw;
        min-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.max-w-2xs {
    max-width: 320px;
}

@media screen and (max-width: 320px) {
    .max-w-2xs {
        width: calc(100% - 2em);
        max-width: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

.w-40em {
    width: 40em;
}

.max-w-40em {
    max-width: 40em;
}

.min-w-40em {
    min-width: 40em;
}

.w-36em {
    width: 36em;
}

.max-w-36em {
    max-width: 36em;
}

.min-w-36em {
    min-width: 36em;
}

.w-32em {
    width: 32em;
}

.max-w-32em {
    max-width: 32em;
}

.min-w-32em {
    min-width: 32em;
}

.w-28em {
    width: 28em;
}

.max-w-28em {
    max-width: 28em;
}

.min-w-28em {
    min-width: 28em;
}

.w-24em {
    width: 24em;
}

.max-w-24em {
    max-width: 24em;
}

.min-w-24em {
    min-width: 24em;
}

.w-20em {
    width: 20em;
}

.max-w-20em {
    max-width: 20em;
}

.min-w-20em {
    min-width: 20em;
}

.w-16em {
    width: 16em;
}

.max-w-16em {
    max-width: 16em;
}

.min-w-16em {
    min-width: 16em;
}

.w-12em {
    width: 12em;
}

.max-w-12em {
    max-width: 12em;
}

.min-w-12em {
    min-width: 12em;
}

.w-8em {
    width: 8em;
}

.max-w-8em {
    max-width: 8em;
}

.min-w-8em {
    min-width: 8em;
}

.w-6em {
    width: 6em;
}

.max-w-6em {
    max-width: 6em;
}

.min-w-6em {
    min-width: 6em;
}

.w-5\.75em {
    width: 5.75em;
}

.max-w-5\.75em {
    max-width: 5.75em;
}

.min-w-5\.75em {
    min-width: 5.75em;
}

.w-5\.5em {
    width: 5.5em;
}

.max-w-5\.5em {
    max-width: 5.5em;
}

.min-w-5\.5em {
    min-width: 5.5em;
}

.w-5\.25em {
    width: 5.25em;
}

.max-w-5\.25em {
    max-width: 5.25em;
}

.min-w-5\.25em {
    min-width: 5.25em;
}

.w-5em {
    width: 5em;
}

.max-w-5em {
    max-width: 5em;
}

.min-w-5em {
    min-width: 5em;
}

.w-4\.75em {
    width: 4.75em;
}

.max-w-4\.75em {
    max-width: 4.75em;
}

.min-w-4\.75em {
    min-width: 4.75em;
}

.w-4\.5em {
    width: 4.5em;
}

.max-w-4\.5em {
    max-width: 4.5em;
}

.min-w-4\.5em {
    min-width: 4.5em;
}

.w-4\.25em {
    width: 4.25em;
}

.max-w-4\.25em {
    max-width: 4.25em;
}

.min-w-4\.25em {
    min-width: 4.25em;
}

.w-4em {
    width: 4em;
}

.max-w-4em {
    max-width: 4em;
}

.min-w-4em {
    min-width: 4em;
}

.w-3\.75em {
    width: 3.75em;
}

.max-w-3\.75em {
    max-width: 3.75em;
}

.min-w-3\.75em {
    min-width: 3.75em;
}

.w-3\.5em {
    width: 3.5em;
}

.max-w-3\.5em {
    max-width: 3.5em;
}

.min-w-3\.5em {
    min-width: 3.5em;
}

.w-3\.25em {
    width: 3.25em;
}

.max-w-3\.25em {
    max-width: 3.25em;
}

.min-w-3\.25em {
    min-width: 3.25em;
}

.w-3em {
    width: 3em;
}

.max-w-3em {
    max-width: 3em;
}

.min-w-3em {
    min-width: 3em;
}

.w-2\.75em {
    width: 2.75em;
}

.max-w-2\.75em {
    max-width: 2.75em;
}

.min-w-2\.75em {
    min-width: 2.75em;
}

.w-2\.5em {
    width: 2.5em;
}

.max-w-2\.5em {
    max-width: 2.5em;
}

.min-w-2\.5em {
    min-width: 2.5em;
}

.w-2\.25em {
    width: 2.25em;
}

.max-w-2\.25em {
    max-width: 2.25em;
}

.min-w-2\.25em {
    min-width: 2.25em;
}

.w-2em {
    width: 2em;
}

.max-w-2em {
    max-width: 2em;
}

.min-w-2em {
    min-width: 2em;
}

.w-1\.75em {
    width: 1.75em;
}

.max-w-1\.75em {
    max-width: 1.75em;
}

.min-w-1\.75em {
    min-width: 1.75em;
}

.w-1\.5em {
    width: 1.5em;
}

.max-w-1\.5em {
    max-width: 1.5em;
}

.min-w-1\.5em {
    min-width: 1.5em;
}

.w-1\.25em {
    width: 1.25em;
}

.max-w-1\.25em {
    max-width: 1.25em;
}

.min-w-1\.25em {
    min-width: 1.25em;
}

.w-1em {
    width: 1em;
}

.max-w-1em {
    max-width: 1em;
}

.min-w-1em {
    min-width: 1em;
}

.w-0\.75em {
    width: 0.75em;
}

.max-w-0\.75em {
    max-width: 0.75em;
}

.min-w-0\.75em {
    min-width: 0.75em;
}

.w-0\.5em {
    width: 0.5em;
}

.max-w-0\.5em {
    max-width: 0.5em;
}

.min-w-0\.5em {
    min-width: 0.5em;
}

.w-0\.25em {
    width: 0.25em;
}

.max-w-0\.25em {
    max-width: 0.25em;
}

.min-w-0\.25em {
    min-width: 0.25em;
}

.w-0\.125em {
    width: 0.125em;
}

.max-w-0\.125em {
    max-width: 0.125em;
}

.min-w-0\.125em {
    min-width: 0.125em;
}

.w-10vmax {
    width: 10vmax;
}

.w-10vmin {
    width: 10vmin;
}

.max-w-10vmax {
    max-width: 10vmax;
}

.max-w-10vmin {
    max-width: 10vmin;
}

.min-w-10vmax {
    min-width: 10vmax;
}

.min-w-10vmin {
    min-width: 10vmin;
}

.w-20vmax {
    width: 20vmax;
}

.w-20vmin {
    width: 20vmin;
}

.max-w-20vmax {
    max-width: 20vmax;
}

.max-w-20vmin {
    max-width: 20vmin;
}

.min-w-20vmax {
    min-width: 20vmax;
}

.min-w-20vmin {
    min-width: 20vmin;
}

.w-30vmax {
    width: 30vmax;
}

.w-30vmin {
    width: 30vmin;
}

.max-w-30vmax {
    max-width: 30vmax;
}

.max-w-30vmin {
    max-width: 30vmin;
}

.min-w-30vmax {
    min-width: 30vmax;
}

.min-w-30vmin {
    min-width: 30vmin;
}

.w-40vmax {
    width: 40vmax;
}

.w-40vmin {
    width: 40vmin;
}

.max-w-40vmax {
    max-width: 40vmax;
}

.max-w-40vmin {
    max-width: 40vmin;
}

.min-w-40vmax {
    min-width: 40vmax;
}

.min-w-40vmin {
    min-width: 40vmin;
}

.w-50vmax {
    width: 50vmax;
}

.w-50vmin {
    width: 50vmin;
}

.max-w-50vmax {
    max-width: 50vmax;
}

.max-w-50vmin {
    max-width: 50vmin;
}

.min-w-50vmax {
    min-width: 50vmax;
}

.min-w-50vmin {
    min-width: 50vmin;
}

.w-60vmax {
    width: 60vmax;
}

.w-60vmin {
    width: 60vmin;
}

.max-w-60vmax {
    max-width: 60vmax;
}

.max-w-60vmin {
    max-width: 60vmin;
}

.min-w-60vmax {
    min-width: 60vmax;
}

.min-w-60vmin {
    min-width: 60vmin;
}

.w-70vmax {
    width: 70vmax;
}

.w-70vmin {
    width: 70vmin;
}

.max-w-70vmax {
    max-width: 70vmax;
}

.max-w-70vmin {
    max-width: 70vmin;
}

.min-w-70vmax {
    min-width: 70vmax;
}

.min-w-70vmin {
    min-width: 70vmin;
}

.w-80vmax {
    width: 80vmax;
}

.w-80vmin {
    width: 80vmin;
}

.max-w-80vmax {
    max-width: 80vmax;
}

.max-w-80vmin {
    max-width: 80vmin;
}

.min-w-80vmax {
    min-width: 80vmax;
}

.min-w-80vmin {
    min-width: 80vmin;
}

.w-90vmax {
    width: 90vmax;
}

.w-90vmin {
    width: 90vmin;
}

.max-w-90vmax {
    max-width: 90vmax;
}

.max-w-90vmin {
    max-width: 90vmin;
}

.min-w-90vmax {
    min-width: 90vmax;
}

.min-w-90vmin {
    min-width: 90vmin;
}

.w-100vmax {
    width: 100vmax;
}

.w-100vmin {
    width: 100vmin;
}

.max-w-100vmax {
    max-width: 100vmax;
}

.max-w-100vmin {
    max-width: 100vmin;
}

.min-w-100vmax {
    min-width: 100vmax;
}

.min-w-100vmin {
    min-width: 100vmin;
}

.w-110vmax {
    width: 110vmax;
}

.w-110vmin {
    width: 110vmin;
}

.max-w-110vmax {
    max-width: 110vmax;
}

.max-w-110vmin {
    max-width: 110vmin;
}

.min-w-110vmax {
    min-width: 110vmax;
}

.min-w-110vmin {
    min-width: 110vmin;
}

.w-120vmax {
    width: 120vmax;
}

.w-120vmin {
    width: 120vmin;
}

.max-w-120vmax {
    max-width: 120vmax;
}

.max-w-120vmin {
    max-width: 120vmin;
}

.min-w-120vmax {
    min-width: 120vmax;
}

.min-w-120vmin {
    min-width: 120vmin;
}

.w-130vmax {
    width: 130vmax;
}

.w-130vmin {
    width: 130vmin;
}

.max-w-130vmax {
    max-width: 130vmax;
}

.max-w-130vmin {
    max-width: 130vmin;
}

.min-w-130vmax {
    min-width: 130vmax;
}

.min-w-130vmin {
    min-width: 130vmin;
}

.w-140vmax {
    width: 140vmax;
}

.w-140vmin {
    width: 140vmin;
}

.max-w-140vmax {
    max-width: 140vmax;
}

.max-w-140vmin {
    max-width: 140vmin;
}

.min-w-140vmax {
    min-width: 140vmax;
}

.min-w-140vmin {
    min-width: 140vmin;
}

.w-150vmax {
    width: 150vmax;
}

.w-150vmin {
    width: 150vmin;
}

.max-w-150vmax {
    max-width: 150vmax;
}

.max-w-150vmin {
    max-width: 150vmin;
}

.min-w-150vmax {
    min-width: 150vmax;
}

.min-w-150vmin {
    min-width: 150vmin;
}

.w-160vmax {
    width: 160vmax;
}

.w-160vmin {
    width: 160vmin;
}

.max-w-160vmax {
    max-width: 160vmax;
}

.max-w-160vmin {
    max-width: 160vmin;
}

.min-w-160vmax {
    min-width: 160vmax;
}

.min-w-160vmin {
    min-width: 160vmin;
}

.w-170vmax {
    width: 170vmax;
}

.w-170vmin {
    width: 170vmin;
}

.max-w-170vmax {
    max-width: 170vmax;
}

.max-w-170vmin {
    max-width: 170vmin;
}

.min-w-170vmax {
    min-width: 170vmax;
}

.min-w-170vmin {
    min-width: 170vmin;
}

.w-180vmax {
    width: 180vmax;
}

.w-180vmin {
    width: 180vmin;
}

.max-w-180vmax {
    max-width: 180vmax;
}

.max-w-180vmin {
    max-width: 180vmin;
}

.min-w-180vmax {
    min-width: 180vmax;
}

.min-w-180vmin {
    min-width: 180vmin;
}

.w-190vmax {
    width: 190vmax;
}

.w-190vmin {
    width: 190vmin;
}

.max-w-190vmax {
    max-width: 190vmax;
}

.max-w-190vmin {
    max-width: 190vmin;
}

.min-w-190vmax {
    min-width: 190vmax;
}

.min-w-190vmin {
    min-width: 190vmin;
}

.w-200vmax {
    width: 200vmax;
}

.w-200vmin {
    width: 200vmin;
}

.max-w-200vmax {
    max-width: 200vmax;
}

.max-w-200vmin {
    max-width: 200vmin;
}

.min-w-200vmax {
    min-width: 200vmax;
}

.min-w-200vmin {
    min-width: 200vmin;
}

.w-210vmax {
    width: 210vmax;
}

.w-210vmin {
    width: 210vmin;
}

.max-w-210vmax {
    max-width: 210vmax;
}

.max-w-210vmin {
    max-width: 210vmin;
}

.min-w-210vmax {
    min-width: 210vmax;
}

.min-w-210vmin {
    min-width: 210vmin;
}

.w-220vmax {
    width: 220vmax;
}

.w-220vmin {
    width: 220vmin;
}

.max-w-220vmax {
    max-width: 220vmax;
}

.max-w-220vmin {
    max-width: 220vmin;
}

.min-w-220vmax {
    min-width: 220vmax;
}

.min-w-220vmin {
    min-width: 220vmin;
}

.w-230vmax {
    width: 230vmax;
}

.w-230vmin {
    width: 230vmin;
}

.max-w-230vmax {
    max-width: 230vmax;
}

.max-w-230vmin {
    max-width: 230vmin;
}

.min-w-230vmax {
    min-width: 230vmax;
}

.min-w-230vmin {
    min-width: 230vmin;
}

.w-240vmax {
    width: 240vmax;
}

.w-240vmin {
    width: 240vmin;
}

.max-w-240vmax {
    max-width: 240vmax;
}

.max-w-240vmin {
    max-width: 240vmin;
}

.min-w-240vmax {
    min-width: 240vmax;
}

.min-w-240vmin {
    min-width: 240vmin;
}

.w-250vmax {
    width: 250vmax;
}

.w-250vmin {
    width: 250vmin;
}

.max-w-250vmax {
    max-width: 250vmax;
}

.max-w-250vmin {
    max-width: 250vmin;
}

.min-w-250vmax {
    min-width: 250vmax;
}

.min-w-250vmin {
    min-width: 250vmin;
}

.w-260vmax {
    width: 260vmax;
}

.w-260vmin {
    width: 260vmin;
}

.max-w-260vmax {
    max-width: 260vmax;
}

.max-w-260vmin {
    max-width: 260vmin;
}

.min-w-260vmax {
    min-width: 260vmax;
}

.min-w-260vmin {
    min-width: 260vmin;
}

.w-270vmax {
    width: 270vmax;
}

.w-270vmin {
    width: 270vmin;
}

.max-w-270vmax {
    max-width: 270vmax;
}

.max-w-270vmin {
    max-width: 270vmin;
}

.min-w-270vmax {
    min-width: 270vmax;
}

.min-w-270vmin {
    min-width: 270vmin;
}

.w-280vmax {
    width: 280vmax;
}

.w-280vmin {
    width: 280vmin;
}

.max-w-280vmax {
    max-width: 280vmax;
}

.max-w-280vmin {
    max-width: 280vmin;
}

.min-w-280vmax {
    min-width: 280vmax;
}

.min-w-280vmin {
    min-width: 280vmin;
}

.w-290vmax {
    width: 290vmax;
}

.w-290vmin {
    width: 290vmin;
}

.max-w-290vmax {
    max-width: 290vmax;
}

.max-w-290vmin {
    max-width: 290vmin;
}

.min-w-290vmax {
    min-width: 290vmax;
}

.min-w-290vmin {
    min-width: 290vmin;
}

.w-300vmax {
    width: 300vmax;
}

.w-300vmin {
    width: 300vmin;
}

.max-w-300vmax {
    max-width: 300vmax;
}

.max-w-300vmin {
    max-width: 300vmin;
}

.min-w-300vmax {
    min-width: 300vmax;
}

.min-w-300vmin {
    min-width: 300vmin;
}

.w-310vmax {
    width: 310vmax;
}

.w-310vmin {
    width: 310vmin;
}

.max-w-310vmax {
    max-width: 310vmax;
}

.max-w-310vmin {
    max-width: 310vmin;
}

.min-w-310vmax {
    min-width: 310vmax;
}

.min-w-310vmin {
    min-width: 310vmin;
}

.w-320vmax {
    width: 320vmax;
}

.w-320vmin {
    width: 320vmin;
}

.max-w-320vmax {
    max-width: 320vmax;
}

.max-w-320vmin {
    max-width: 320vmin;
}

.min-w-320vmax {
    min-width: 320vmax;
}

.min-w-320vmin {
    min-width: 320vmin;
}

.w-330vmax {
    width: 330vmax;
}

.w-330vmin {
    width: 330vmin;
}

.max-w-330vmax {
    max-width: 330vmax;
}

.max-w-330vmin {
    max-width: 330vmin;
}

.min-w-330vmax {
    min-width: 330vmax;
}

.min-w-330vmin {
    min-width: 330vmin;
}

.w-340vmax {
    width: 340vmax;
}

.w-340vmin {
    width: 340vmin;
}

.max-w-340vmax {
    max-width: 340vmax;
}

.max-w-340vmin {
    max-width: 340vmin;
}

.min-w-340vmax {
    min-width: 340vmax;
}

.min-w-340vmin {
    min-width: 340vmin;
}

.w-350vmax {
    width: 350vmax;
}

.w-350vmin {
    width: 350vmin;
}

.max-w-350vmax {
    max-width: 350vmax;
}

.max-w-350vmin {
    max-width: 350vmin;
}

.min-w-350vmax {
    min-width: 350vmax;
}

.min-w-350vmin {
    min-width: 350vmin;
}

.w-360vmax {
    width: 360vmax;
}

.w-360vmin {
    width: 360vmin;
}

.max-w-360vmax {
    max-width: 360vmax;
}

.max-w-360vmin {
    max-width: 360vmin;
}

.min-w-360vmax {
    min-width: 360vmax;
}

.min-w-360vmin {
    min-width: 360vmin;
}

.w-370vmax {
    width: 370vmax;
}

.w-370vmin {
    width: 370vmin;
}

.max-w-370vmax {
    max-width: 370vmax;
}

.max-w-370vmin {
    max-width: 370vmin;
}

.min-w-370vmax {
    min-width: 370vmax;
}

.min-w-370vmin {
    min-width: 370vmin;
}

.w-380vmax {
    width: 380vmax;
}

.w-380vmin {
    width: 380vmin;
}

.max-w-380vmax {
    max-width: 380vmax;
}

.max-w-380vmin {
    max-width: 380vmin;
}

.min-w-380vmax {
    min-width: 380vmax;
}

.min-w-380vmin {
    min-width: 380vmin;
}

.w-390vmax {
    width: 390vmax;
}

.w-390vmin {
    width: 390vmin;
}

.max-w-390vmax {
    max-width: 390vmax;
}

.max-w-390vmin {
    max-width: 390vmin;
}

.min-w-390vmax {
    min-width: 390vmax;
}

.min-w-390vmin {
    min-width: 390vmin;
}

.w-400vmax {
    width: 400vmax;
}

.w-400vmin {
    width: 400vmin;
}

.max-w-400vmax {
    max-width: 400vmax;
}

.max-w-400vmin {
    max-width: 400vmin;
}

.min-w-400vmax {
    min-width: 400vmax;
}

.min-w-400vmin {
    min-width: 400vmin;
}

.w-410vmax {
    width: 410vmax;
}

.w-410vmin {
    width: 410vmin;
}

.max-w-410vmax {
    max-width: 410vmax;
}

.max-w-410vmin {
    max-width: 410vmin;
}

.min-w-410vmax {
    min-width: 410vmax;
}

.min-w-410vmin {
    min-width: 410vmin;
}

.w-420vmax {
    width: 420vmax;
}

.w-420vmin {
    width: 420vmin;
}

.max-w-420vmax {
    max-width: 420vmax;
}

.max-w-420vmin {
    max-width: 420vmin;
}

.min-w-420vmax {
    min-width: 420vmax;
}

.min-w-420vmin {
    min-width: 420vmin;
}

.w-430vmax {
    width: 430vmax;
}

.w-430vmin {
    width: 430vmin;
}

.max-w-430vmax {
    max-width: 430vmax;
}

.max-w-430vmin {
    max-width: 430vmin;
}

.min-w-430vmax {
    min-width: 430vmax;
}

.min-w-430vmin {
    min-width: 430vmin;
}

.w-440vmax {
    width: 440vmax;
}

.w-440vmin {
    width: 440vmin;
}

.max-w-440vmax {
    max-width: 440vmax;
}

.max-w-440vmin {
    max-width: 440vmin;
}

.min-w-440vmax {
    min-width: 440vmax;
}

.min-w-440vmin {
    min-width: 440vmin;
}

.w-450vmax {
    width: 450vmax;
}

.w-450vmin {
    width: 450vmin;
}

.max-w-450vmax {
    max-width: 450vmax;
}

.max-w-450vmin {
    max-width: 450vmin;
}

.min-w-450vmax {
    min-width: 450vmax;
}

.min-w-450vmin {
    min-width: 450vmin;
}

.w-460vmax {
    width: 460vmax;
}

.w-460vmin {
    width: 460vmin;
}

.max-w-460vmax {
    max-width: 460vmax;
}

.max-w-460vmin {
    max-width: 460vmin;
}

.min-w-460vmax {
    min-width: 460vmax;
}

.min-w-460vmin {
    min-width: 460vmin;
}

.w-470vmax {
    width: 470vmax;
}

.w-470vmin {
    width: 470vmin;
}

.max-w-470vmax {
    max-width: 470vmax;
}

.max-w-470vmin {
    max-width: 470vmin;
}

.min-w-470vmax {
    min-width: 470vmax;
}

.min-w-470vmin {
    min-width: 470vmin;
}

.w-480vmax {
    width: 480vmax;
}

.w-480vmin {
    width: 480vmin;
}

.max-w-480vmax {
    max-width: 480vmax;
}

.max-w-480vmin {
    max-width: 480vmin;
}

.min-w-480vmax {
    min-width: 480vmax;
}

.min-w-480vmin {
    min-width: 480vmin;
}

.w-490vmax {
    width: 490vmax;
}

.w-490vmin {
    width: 490vmin;
}

.max-w-490vmax {
    max-width: 490vmax;
}

.max-w-490vmin {
    max-width: 490vmin;
}

.min-w-490vmax {
    min-width: 490vmax;
}

.min-w-490vmin {
    min-width: 490vmin;
}

.w-500vmax {
    width: 500vmax;
}

.w-500vmin {
    width: 500vmin;
}

.max-w-500vmax {
    max-width: 500vmax;
}

.max-w-500vmin {
    max-width: 500vmin;
}

.min-w-500vmax {
    min-width: 500vmax;
}

.min-w-500vmin {
    min-width: 500vmin;
}

.w-510vmax {
    width: 510vmax;
}

.w-510vmin {
    width: 510vmin;
}

.max-w-510vmax {
    max-width: 510vmax;
}

.max-w-510vmin {
    max-width: 510vmin;
}

.min-w-510vmax {
    min-width: 510vmax;
}

.min-w-510vmin {
    min-width: 510vmin;
}

.w-520vmax {
    width: 520vmax;
}

.w-520vmin {
    width: 520vmin;
}

.max-w-520vmax {
    max-width: 520vmax;
}

.max-w-520vmin {
    max-width: 520vmin;
}

.min-w-520vmax {
    min-width: 520vmax;
}

.min-w-520vmin {
    min-width: 520vmin;
}

.w-530vmax {
    width: 530vmax;
}

.w-530vmin {
    width: 530vmin;
}

.max-w-530vmax {
    max-width: 530vmax;
}

.max-w-530vmin {
    max-width: 530vmin;
}

.min-w-530vmax {
    min-width: 530vmax;
}

.min-w-530vmin {
    min-width: 530vmin;
}

.w-540vmax {
    width: 540vmax;
}

.w-540vmin {
    width: 540vmin;
}

.max-w-540vmax {
    max-width: 540vmax;
}

.max-w-540vmin {
    max-width: 540vmin;
}

.min-w-540vmax {
    min-width: 540vmax;
}

.min-w-540vmin {
    min-width: 540vmin;
}

.w-550vmax {
    width: 550vmax;
}

.w-550vmin {
    width: 550vmin;
}

.max-w-550vmax {
    max-width: 550vmax;
}

.max-w-550vmin {
    max-width: 550vmin;
}

.min-w-550vmax {
    min-width: 550vmax;
}

.min-w-550vmin {
    min-width: 550vmin;
}

.w-560vmax {
    width: 560vmax;
}

.w-560vmin {
    width: 560vmin;
}

.max-w-560vmax {
    max-width: 560vmax;
}

.max-w-560vmin {
    max-width: 560vmin;
}

.min-w-560vmax {
    min-width: 560vmax;
}

.min-w-560vmin {
    min-width: 560vmin;
}

.w-570vmax {
    width: 570vmax;
}

.w-570vmin {
    width: 570vmin;
}

.max-w-570vmax {
    max-width: 570vmax;
}

.max-w-570vmin {
    max-width: 570vmin;
}

.min-w-570vmax {
    min-width: 570vmax;
}

.min-w-570vmin {
    min-width: 570vmin;
}

.w-580vmax {
    width: 580vmax;
}

.w-580vmin {
    width: 580vmin;
}

.max-w-580vmax {
    max-width: 580vmax;
}

.max-w-580vmin {
    max-width: 580vmin;
}

.min-w-580vmax {
    min-width: 580vmax;
}

.min-w-580vmin {
    min-width: 580vmin;
}

.w-590vmax {
    width: 590vmax;
}

.w-590vmin {
    width: 590vmin;
}

.max-w-590vmax {
    max-width: 590vmax;
}

.max-w-590vmin {
    max-width: 590vmin;
}

.min-w-590vmax {
    min-width: 590vmax;
}

.min-w-590vmin {
    min-width: 590vmin;
}

.w-600vmax {
    width: 600vmax;
}

.w-600vmin {
    width: 600vmin;
}

.max-w-600vmax {
    max-width: 600vmax;
}

.max-w-600vmin {
    max-width: 600vmin;
}

.min-w-600vmax {
    min-width: 600vmax;
}

.min-w-600vmin {
    min-width: 600vmin;
}

.w-610vmax {
    width: 610vmax;
}

.w-610vmin {
    width: 610vmin;
}

.max-w-610vmax {
    max-width: 610vmax;
}

.max-w-610vmin {
    max-width: 610vmin;
}

.min-w-610vmax {
    min-width: 610vmax;
}

.min-w-610vmin {
    min-width: 610vmin;
}

.w-620vmax {
    width: 620vmax;
}

.w-620vmin {
    width: 620vmin;
}

.max-w-620vmax {
    max-width: 620vmax;
}

.max-w-620vmin {
    max-width: 620vmin;
}

.min-w-620vmax {
    min-width: 620vmax;
}

.min-w-620vmin {
    min-width: 620vmin;
}

.w-630vmax {
    width: 630vmax;
}

.w-630vmin {
    width: 630vmin;
}

.max-w-630vmax {
    max-width: 630vmax;
}

.max-w-630vmin {
    max-width: 630vmin;
}

.min-w-630vmax {
    min-width: 630vmax;
}

.min-w-630vmin {
    min-width: 630vmin;
}

.w-640vmax {
    width: 640vmax;
}

.w-640vmin {
    width: 640vmin;
}

.max-w-640vmax {
    max-width: 640vmax;
}

.max-w-640vmin {
    max-width: 640vmin;
}

.min-w-640vmax {
    min-width: 640vmax;
}

.min-w-640vmin {
    min-width: 640vmin;
}

.w-650vmax {
    width: 650vmax;
}

.w-650vmin {
    width: 650vmin;
}

.max-w-650vmax {
    max-width: 650vmax;
}

.max-w-650vmin {
    max-width: 650vmin;
}

.min-w-650vmax {
    min-width: 650vmax;
}

.min-w-650vmin {
    min-width: 650vmin;
}

.w-660vmax {
    width: 660vmax;
}

.w-660vmin {
    width: 660vmin;
}

.max-w-660vmax {
    max-width: 660vmax;
}

.max-w-660vmin {
    max-width: 660vmin;
}

.min-w-660vmax {
    min-width: 660vmax;
}

.min-w-660vmin {
    min-width: 660vmin;
}

.w-670vmax {
    width: 670vmax;
}

.w-670vmin {
    width: 670vmin;
}

.max-w-670vmax {
    max-width: 670vmax;
}

.max-w-670vmin {
    max-width: 670vmin;
}

.min-w-670vmax {
    min-width: 670vmax;
}

.min-w-670vmin {
    min-width: 670vmin;
}

.w-680vmax {
    width: 680vmax;
}

.w-680vmin {
    width: 680vmin;
}

.max-w-680vmax {
    max-width: 680vmax;
}

.max-w-680vmin {
    max-width: 680vmin;
}

.min-w-680vmax {
    min-width: 680vmax;
}

.min-w-680vmin {
    min-width: 680vmin;
}

.w-690vmax {
    width: 690vmax;
}

.w-690vmin {
    width: 690vmin;
}

.max-w-690vmax {
    max-width: 690vmax;
}

.max-w-690vmin {
    max-width: 690vmin;
}

.min-w-690vmax {
    min-width: 690vmax;
}

.min-w-690vmin {
    min-width: 690vmin;
}

.w-700vmax {
    width: 700vmax;
}

.w-700vmin {
    width: 700vmin;
}

.max-w-700vmax {
    max-width: 700vmax;
}

.max-w-700vmin {
    max-width: 700vmin;
}

.min-w-700vmax {
    min-width: 700vmax;
}

.min-w-700vmin {
    min-width: 700vmin;
}

.w-710vmax {
    width: 710vmax;
}

.w-710vmin {
    width: 710vmin;
}

.max-w-710vmax {
    max-width: 710vmax;
}

.max-w-710vmin {
    max-width: 710vmin;
}

.min-w-710vmax {
    min-width: 710vmax;
}

.min-w-710vmin {
    min-width: 710vmin;
}

.w-720vmax {
    width: 720vmax;
}

.w-720vmin {
    width: 720vmin;
}

.max-w-720vmax {
    max-width: 720vmax;
}

.max-w-720vmin {
    max-width: 720vmin;
}

.min-w-720vmax {
    min-width: 720vmax;
}

.min-w-720vmin {
    min-width: 720vmin;
}

.w-730vmax {
    width: 730vmax;
}

.w-730vmin {
    width: 730vmin;
}

.max-w-730vmax {
    max-width: 730vmax;
}

.max-w-730vmin {
    max-width: 730vmin;
}

.min-w-730vmax {
    min-width: 730vmax;
}

.min-w-730vmin {
    min-width: 730vmin;
}

.w-740vmax {
    width: 740vmax;
}

.w-740vmin {
    width: 740vmin;
}

.max-w-740vmax {
    max-width: 740vmax;
}

.max-w-740vmin {
    max-width: 740vmin;
}

.min-w-740vmax {
    min-width: 740vmax;
}

.min-w-740vmin {
    min-width: 740vmin;
}

.w-750vmax {
    width: 750vmax;
}

.w-750vmin {
    width: 750vmin;
}

.max-w-750vmax {
    max-width: 750vmax;
}

.max-w-750vmin {
    max-width: 750vmin;
}

.min-w-750vmax {
    min-width: 750vmax;
}

.min-w-750vmin {
    min-width: 750vmin;
}

.w-760vmax {
    width: 760vmax;
}

.w-760vmin {
    width: 760vmin;
}

.max-w-760vmax {
    max-width: 760vmax;
}

.max-w-760vmin {
    max-width: 760vmin;
}

.min-w-760vmax {
    min-width: 760vmax;
}

.min-w-760vmin {
    min-width: 760vmin;
}

.w-770vmax {
    width: 770vmax;
}

.w-770vmin {
    width: 770vmin;
}

.max-w-770vmax {
    max-width: 770vmax;
}

.max-w-770vmin {
    max-width: 770vmin;
}

.min-w-770vmax {
    min-width: 770vmax;
}

.min-w-770vmin {
    min-width: 770vmin;
}

.w-780vmax {
    width: 780vmax;
}

.w-780vmin {
    width: 780vmin;
}

.max-w-780vmax {
    max-width: 780vmax;
}

.max-w-780vmin {
    max-width: 780vmin;
}

.min-w-780vmax {
    min-width: 780vmax;
}

.min-w-780vmin {
    min-width: 780vmin;
}

.w-790vmax {
    width: 790vmax;
}

.w-790vmin {
    width: 790vmin;
}

.max-w-790vmax {
    max-width: 790vmax;
}

.max-w-790vmin {
    max-width: 790vmin;
}

.min-w-790vmax {
    min-width: 790vmax;
}

.min-w-790vmin {
    min-width: 790vmin;
}

.w-800vmax {
    width: 800vmax;
}

.w-800vmin {
    width: 800vmin;
}

.max-w-800vmax {
    max-width: 800vmax;
}

.max-w-800vmin {
    max-width: 800vmin;
}

.min-w-800vmax {
    min-width: 800vmax;
}

.min-w-800vmin {
    min-width: 800vmin;
}

.w-810vmax {
    width: 810vmax;
}

.w-810vmin {
    width: 810vmin;
}

.max-w-810vmax {
    max-width: 810vmax;
}

.max-w-810vmin {
    max-width: 810vmin;
}

.min-w-810vmax {
    min-width: 810vmax;
}

.min-w-810vmin {
    min-width: 810vmin;
}

.w-820vmax {
    width: 820vmax;
}

.w-820vmin {
    width: 820vmin;
}

.max-w-820vmax {
    max-width: 820vmax;
}

.max-w-820vmin {
    max-width: 820vmin;
}

.min-w-820vmax {
    min-width: 820vmax;
}

.min-w-820vmin {
    min-width: 820vmin;
}

.w-830vmax {
    width: 830vmax;
}

.w-830vmin {
    width: 830vmin;
}

.max-w-830vmax {
    max-width: 830vmax;
}

.max-w-830vmin {
    max-width: 830vmin;
}

.min-w-830vmax {
    min-width: 830vmax;
}

.min-w-830vmin {
    min-width: 830vmin;
}

.w-840vmax {
    width: 840vmax;
}

.w-840vmin {
    width: 840vmin;
}

.max-w-840vmax {
    max-width: 840vmax;
}

.max-w-840vmin {
    max-width: 840vmin;
}

.min-w-840vmax {
    min-width: 840vmax;
}

.min-w-840vmin {
    min-width: 840vmin;
}

.w-850vmax {
    width: 850vmax;
}

.w-850vmin {
    width: 850vmin;
}

.max-w-850vmax {
    max-width: 850vmax;
}

.max-w-850vmin {
    max-width: 850vmin;
}

.min-w-850vmax {
    min-width: 850vmax;
}

.min-w-850vmin {
    min-width: 850vmin;
}

.w-860vmax {
    width: 860vmax;
}

.w-860vmin {
    width: 860vmin;
}

.max-w-860vmax {
    max-width: 860vmax;
}

.max-w-860vmin {
    max-width: 860vmin;
}

.min-w-860vmax {
    min-width: 860vmax;
}

.min-w-860vmin {
    min-width: 860vmin;
}

.w-870vmax {
    width: 870vmax;
}

.w-870vmin {
    width: 870vmin;
}

.max-w-870vmax {
    max-width: 870vmax;
}

.max-w-870vmin {
    max-width: 870vmin;
}

.min-w-870vmax {
    min-width: 870vmax;
}

.min-w-870vmin {
    min-width: 870vmin;
}

.w-880vmax {
    width: 880vmax;
}

.w-880vmin {
    width: 880vmin;
}

.max-w-880vmax {
    max-width: 880vmax;
}

.max-w-880vmin {
    max-width: 880vmin;
}

.min-w-880vmax {
    min-width: 880vmax;
}

.min-w-880vmin {
    min-width: 880vmin;
}

.w-890vmax {
    width: 890vmax;
}

.w-890vmin {
    width: 890vmin;
}

.max-w-890vmax {
    max-width: 890vmax;
}

.max-w-890vmin {
    max-width: 890vmin;
}

.min-w-890vmax {
    min-width: 890vmax;
}

.min-w-890vmin {
    min-width: 890vmin;
}

.w-900vmax {
    width: 900vmax;
}

.w-900vmin {
    width: 900vmin;
}

.max-w-900vmax {
    max-width: 900vmax;
}

.max-w-900vmin {
    max-width: 900vmin;
}

.min-w-900vmax {
    min-width: 900vmax;
}

.min-w-900vmin {
    min-width: 900vmin;
}

.w-910vmax {
    width: 910vmax;
}

.w-910vmin {
    width: 910vmin;
}

.max-w-910vmax {
    max-width: 910vmax;
}

.max-w-910vmin {
    max-width: 910vmin;
}

.min-w-910vmax {
    min-width: 910vmax;
}

.min-w-910vmin {
    min-width: 910vmin;
}

.w-920vmax {
    width: 920vmax;
}

.w-920vmin {
    width: 920vmin;
}

.max-w-920vmax {
    max-width: 920vmax;
}

.max-w-920vmin {
    max-width: 920vmin;
}

.min-w-920vmax {
    min-width: 920vmax;
}

.min-w-920vmin {
    min-width: 920vmin;
}

.w-930vmax {
    width: 930vmax;
}

.w-930vmin {
    width: 930vmin;
}

.max-w-930vmax {
    max-width: 930vmax;
}

.max-w-930vmin {
    max-width: 930vmin;
}

.min-w-930vmax {
    min-width: 930vmax;
}

.min-w-930vmin {
    min-width: 930vmin;
}

.w-940vmax {
    width: 940vmax;
}

.w-940vmin {
    width: 940vmin;
}

.max-w-940vmax {
    max-width: 940vmax;
}

.max-w-940vmin {
    max-width: 940vmin;
}

.min-w-940vmax {
    min-width: 940vmax;
}

.min-w-940vmin {
    min-width: 940vmin;
}

.w-950vmax {
    width: 950vmax;
}

.w-950vmin {
    width: 950vmin;
}

.max-w-950vmax {
    max-width: 950vmax;
}

.max-w-950vmin {
    max-width: 950vmin;
}

.min-w-950vmax {
    min-width: 950vmax;
}

.min-w-950vmin {
    min-width: 950vmin;
}

.w-960vmax {
    width: 960vmax;
}

.w-960vmin {
    width: 960vmin;
}

.max-w-960vmax {
    max-width: 960vmax;
}

.max-w-960vmin {
    max-width: 960vmin;
}

.min-w-960vmax {
    min-width: 960vmax;
}

.min-w-960vmin {
    min-width: 960vmin;
}

.w-970vmax {
    width: 970vmax;
}

.w-970vmin {
    width: 970vmin;
}

.max-w-970vmax {
    max-width: 970vmax;
}

.max-w-970vmin {
    max-width: 970vmin;
}

.min-w-970vmax {
    min-width: 970vmax;
}

.min-w-970vmin {
    min-width: 970vmin;
}

.w-980vmax {
    width: 980vmax;
}

.w-980vmin {
    width: 980vmin;
}

.max-w-980vmax {
    max-width: 980vmax;
}

.max-w-980vmin {
    max-width: 980vmin;
}

.min-w-980vmax {
    min-width: 980vmax;
}

.min-w-980vmin {
    min-width: 980vmin;
}

.w-990vmax {
    width: 990vmax;
}

.w-990vmin {
    width: 990vmin;
}

.max-w-990vmax {
    max-width: 990vmax;
}

.max-w-990vmin {
    max-width: 990vmin;
}

.min-w-990vmax {
    min-width: 990vmax;
}

.min-w-990vmin {
    min-width: 990vmin;
}

.w-1000vmax {
    width: 1000vmax;
}

.w-1000vmin {
    width: 1000vmin;
}

.max-w-1000vmax {
    max-width: 1000vmax;
}

.max-w-1000vmin {
    max-width: 1000vmin;
}

.min-w-1000vmax {
    min-width: 1000vmax;
}

.min-w-1000vmin {
    min-width: 1000vmin;
}

/* height */
.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-50vh {
    height: 50vh;
}

.h-40em {
    height: 40em;
}

.max-h-40em {
    max-height: 40em;
}

.min-h-40em {
    min-height: 40em;
}

.h-36em {
    height: 36em;
}

.max-h-36em {
    max-height: 36em;
}

.min-h-36em {
    min-height: 36em;
}

.h-32em {
    height: 32em;
}

.max-h-32em {
    max-height: 32em;
}

.min-h-32em {
    min-height: 32em;
}

.h-28em {
    height: 28em;
}

.max-h-28em {
    max-height: 28em;
}

.min-h-28em {
    min-height: 28em;
}

.h-24em {
    height: 24em;
}

.max-h-24em {
    max-height: 24em;
}

.min-h-24em {
    min-height: 24em;
}

.h-20em {
    height: 20em;
}

.max-h-20em {
    max-height: 20em;
}

.min-h-20em {
    min-height: 20em;
}

.h-16em {
    height: 16em;
}

.max-h-16em {
    max-height: 16em;
}

.min-h-16em {
    min-height: 16em;
}

.h-12em {
    height: 12em;
}

.max-h-12em {
    max-height: 12em;
}

.min-h-12em {
    min-height: 12em;
}

.h-8em {
    height: 8em;
}

.max-h-8em {
    max-height: 8em;
}

.min-h-8em {
    min-height: 8em;
}

.h-6em {
    height: 6em;
}

.max-h-6em {
    max-height: 6em;
}

.min-h-6em {
    min-height: 6em;
}

.h-5\.75em {
    height: 5.75em;
}

.max-h-5\.75em {
    max-height: 5.75em;
}

.min-h-5\.75em {
    min-height: 5.75em;
}

.h-5\.5em {
    height: 5.5em;
}

.max-h-5\.5em {
    max-height: 5.5em;
}

.min-h-5\.5em {
    min-height: 5.5em;
}

.h-5\.25em {
    height: 5.25em;
}

.max-h-5\.25em {
    max-height: 5.25em;
}

.min-h-5\.25em {
    min-height: 5.25em;
}

.h-5em {
    height: 5em;
}

.max-h-5em {
    max-height: 5em;
}

.min-h-5em {
    min-height: 5em;
}

.h-4\.75em {
    height: 4.75em;
}

.max-h-4\.75em {
    max-height: 4.75em;
}

.min-h-4\.75em {
    min-height: 4.75em;
}

.h-4\.5em {
    height: 4.5em;
}

.max-h-4\.5em {
    max-height: 4.5em;
}

.min-h-4\.5em {
    min-height: 4.5em;
}

.h-4\.25em {
    height: 4.25em;
}

.max-h-4\.25em {
    max-height: 4.25em;
}

.min-h-4\.25em {
    min-height: 4.25em;
}

.h-4em {
    height: 4em;
}

.max-h-4em {
    max-height: 4em;
}

.min-h-4em {
    min-height: 4em;
}

.h-3\.75em {
    height: 3.75em;
}

.max-h-3\.75em {
    max-height: 3.75em;
}

.min-h-3\.75em {
    min-height: 3.75em;
}

.h-3\.5em {
    height: 3.5em;
}

.max-h-3\.5em {
    max-height: 3.5em;
}

.min-h-3\.5em {
    min-height: 3.5em;
}

.h-3\.25em {
    height: 3.25em;
}

.max-h-3\.25em {
    max-height: 3.25em;
}

.min-h-3\.25em {
    min-height: 3.25em;
}

.h-3em {
    height: 3em;
}

.max-h-3em {
    max-height: 3em;
}

.min-h-3em {
    min-height: 3em;
}

.h-2\.75em {
    height: 2.75em;
}

.max-h-2\.75em {
    max-height: 2.75em;
}

.min-h-2\.75em {
    min-height: 2.75em;
}

.h-2\.5em {
    height: 2.5em;
}

.max-h-2\.5em {
    max-height: 2.5em;
}

.min-h-2\.5em {
    min-height: 2.5em;
}

.h-2\.25em {
    height: 2.25em;
}

.max-h-2\.25em {
    max-height: 2.25em;
}

.min-h-2\.25em {
    min-height: 2.25em;
}

.h-2em {
    height: 2em;
}

.max-h-2em {
    max-height: 2em;
}

.min-h-2em {
    min-height: 2em;
}

.h-1\.75em {
    height: 1.75em;
}

.max-h-1\.75em {
    max-height: 1.75em;
}

.min-h-1\.75em {
    min-height: 1.75em;
}

.h-1\.5em {
    height: 1.5em;
}

.max-h-1\.5em {
    max-height: 1.5em;
}

.min-h-1\.5em {
    min-height: 1.5em;
}

.h-1\.25em {
    height: 1.25em;
}

.max-h-1\.25em {
    max-height: 1.25em;
}

.min-h-1\.25em {
    min-height: 1.25em;
}

.h-1em {
    height: 1em;
}

.max-h-1em {
    max-height: 1em;
}

.min-h-1em {
    min-height: 1em;
}

.h-0\.75em {
    height: 0.75em;
}

.max-h-0\.75em {
    max-height: 0.75em;
}

.min-h-0\.75em {
    min-height: 0.75em;
}

.h-0\.5em {
    height: 0.5em;
}

.max-h-0\.5em {
    max-height: 0.5em;
}

.min-h-0\.5em {
    min-height: 0.5em;
}

.h-0\.25em {
    height: 0.25em;
}

.max-h-0\.25em {
    max-height: 0.25em;
}

.min-h-0\.25em {
    min-height: 0.25em;
}

.h-0\.125em {
    height: 0.125em;
}

.max-h-0\.125em {
    max-height: 0.125em;
}

.min-h-0\.125em {
    min-height: 0.125em;
}

.h-10vmax {
    height: 10vmax;
}

.h-10vmin {
    height: 10vmin;
}

.max-h-10vmax {
    max-height: 10vmax;
}

.max-h-10vmin {
    max-height: 10vmin;
}

.min-h-10vmax {
    min-height: 10vmax;
}

.min-h-10vmin {
    min-height: 10vmin;
}

.h-20vmax {
    height: 20vmax;
}

.h-20vmin {
    height: 20vmin;
}

.max-h-20vmax {
    max-height: 20vmax;
}

.max-h-20vmin {
    max-height: 20vmin;
}

.min-h-20vmax {
    min-height: 20vmax;
}

.min-h-20vmin {
    min-height: 20vmin;
}

.h-30vmax {
    height: 30vmax;
}

.h-30vmin {
    height: 30vmin;
}

.max-h-30vmax {
    max-height: 30vmax;
}

.max-h-30vmin {
    max-height: 30vmin;
}

.min-h-30vmax {
    min-height: 30vmax;
}

.min-h-30vmin {
    min-height: 30vmin;
}

.h-40vmax {
    height: 40vmax;
}

.h-40vmin {
    height: 40vmin;
}

.max-h-40vmax {
    max-height: 40vmax;
}

.max-h-40vmin {
    max-height: 40vmin;
}

.min-h-40vmax {
    min-height: 40vmax;
}

.min-h-40vmin {
    min-height: 40vmin;
}

.h-50vmax {
    height: 50vmax;
}

.h-50vmin {
    height: 50vmin;
}

.max-h-50vmax {
    max-height: 50vmax;
}

.max-h-50vmin {
    max-height: 50vmin;
}

.min-h-50vmax {
    min-height: 50vmax;
}

.min-h-50vmin {
    min-height: 50vmin;
}

.h-60vmax {
    height: 60vmax;
}

.h-60vmin {
    height: 60vmin;
}

.max-h-60vmax {
    max-height: 60vmax;
}

.max-h-60vmin {
    max-height: 60vmin;
}

.min-h-60vmax {
    min-height: 60vmax;
}

.min-h-60vmin {
    min-height: 60vmin;
}

.h-70vmax {
    height: 70vmax;
}

.h-70vmin {
    height: 70vmin;
}

.max-h-70vmax {
    max-height: 70vmax;
}

.max-h-70vmin {
    max-height: 70vmin;
}

.min-h-70vmax {
    min-height: 70vmax;
}

.min-h-70vmin {
    min-height: 70vmin;
}

.h-80vmax {
    height: 80vmax;
}

.h-80vmin {
    height: 80vmin;
}

.max-h-80vmax {
    max-height: 80vmax;
}

.max-h-80vmin {
    max-height: 80vmin;
}

.min-h-80vmax {
    min-height: 80vmax;
}

.min-h-80vmin {
    min-height: 80vmin;
}

.h-90vmax {
    height: 90vmax;
}

.h-90vmin {
    height: 90vmin;
}

.max-h-90vmax {
    max-height: 90vmax;
}

.max-h-90vmin {
    max-height: 90vmin;
}

.min-h-90vmax {
    min-height: 90vmax;
}

.min-h-90vmin {
    min-height: 90vmin;
}

.h-100vmax {
    height: 100vmax;
}

.h-100vmin {
    height: 100vmin;
}

.max-h-100vmax {
    max-height: 100vmax;
}

.max-h-100vmin {
    max-height: 100vmin;
}

.min-h-100vmax {
    min-height: 100vmax;
}

.min-h-100vmin {
    min-height: 100vmin;
}

/* box */
.bx-shadow {
    box-shadow: 0 4px 8px #00000022;
}

.radius-2xl {
    border-radius: 48px;
}

.radius-xl {
    border-radius: 40px;
}

.radius-lg {
    border-radius: 32px;
}

.radius-md {
    border-radius: 20px;
}

.radius-sm {
    border-radius: 12px;
}

.radius-xs {
    border-radius: 8px;
}

/* colors */
.color-tone-primary ::-webkit-scrollbar-track {
    background-color: #E7F7E833;
}

.color-tone-primary ::-webkit-scrollbar-thumb {
    background-color: #70CF77aa;
}

    .color-tone-primary ::-webkit-scrollbar-thumb:hover {
        background-color: #70CF77;
    }

.color-tone-primarybutton[disabled], .color-tone-primary button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-primarybutton[disabled]:hover, .color-tone-primary button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-primary.avatar, .color-tone-primary .avatar {
    background-color: #E7F7E8;
}

.color-tone-primary.menu li:hover, .color-tone-primary .menu li:hover {
    background-color: #E7F7E8;
}

    .color-tone-primary.menu li:hover .text, .color-tone-primary .menu li:hover .text {
        color: #3E9D45;
    }

.color-tone-primary.menu li.active .text, .color-tone-primary .menu li.active .text {
    color: #3E9D45;
}

.color-tone-primary .dialog-box .dialog .course-list .list-box .item-title {
    color: #A3E38E;
}

.color-tone-primary .dialog-box .dialog .course-list .list-box .item-count:not(.complete) {
    background-color: #A3E38E;
}

.color-tone-primary .dialog-box .dialog .course-list .list-box .item-count.complete:before {
    background-color: #3E9D45;
}

.color-tone-primary .dialog-box .dialog .course-list .list-box .item-li.active:before, .color-tone-primary .dialog-box .dialog .course-list .list-box .item-li.active:after {
    background-color: #3E9D45;
}

.color-tone-primary .dialog-box .dialog .section-cont .list-box .item:hover {
    background-color: #E7F7E8;
    border-color: #70CF77;
}

    .color-tone-primary .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #70CF77;
    }

    .color-tone-primary .dialog-box .dialog .section-cont .list-box .item:hover .title {
        color: #3E9D45;
    }

    .color-tone-primary .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

    .color-tone-primary .dialog-box .dialog .section-cont .list-box .item:hover:before {
        background-color: #3E9D45;
    }

.color-tone-primary .dialog-box .dialog .section-cont .list-box .item.active {
    background-color: #A3E38E;
    border-color: #ffffff;
}

    .color-tone-primary .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-primary .dialog-box .dialog .section-cont .list-box .item.active .title {
        color: #3E9D45;
    }

    .color-tone-primary .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-primary .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #70CF77;
}

.color-tone-primary.btn, .color-tone-primary .btn {
    background-color: #70CF77;
}

    .color-tone-primary.btn.white, .color-tone-primary .btn.white {
        background-color: #ffffff;
        color: #70CF77;
    }

        .color-tone-primary.btn.white:hover, .color-tone-primary .btn.white:hover {
            background-color: #A3E38E;
            color: #ffffff;
        }

            .color-tone-primary.btn.white:hover .icon, .color-tone-primary .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-primary.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-primary .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #70CF77;
        }

    .color-tone-primary.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-primary .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-primary.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-primary .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        background-color: #A3E38E;
        text-shadow: 0 1px 2px #3E9D45;
        box-shadow: 0 1px 2px #3E9D45;
    }

    .color-tone-primary.btn:active, .color-tone-primary .btn:active {
        background-color: #70CF77;
        box-shadow: 0 0 0 1px #3E9D45;
    }

    .color-tone-primary.btn.disabled, .color-tone-primary .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-primary.btn.disabled:hover, .color-tone-primary .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-primary.table-cont:after, .color-tone-primary .table-cont:after {
    border-color: #70CF77;
}

.color-tone-primary.table-cont .tb-header, .color-tone-primary .table-cont .tb-header {
    background-color: #E7F7E8;
    color: #70CF77;
}

.color-tone-primary.table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd), .color-tone-primary .table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd) {
    background-color: #E7F7E8;
}

.color-tone-primary.table-cont .tb-table .tb-tr .tb-th, .color-tone-primary .table-cont .tb-table .tb-tr .tb-th {
    color: #70CF77;
    border-color: #70CF77;
}

@media screen and (max-width: 1600px) {
    .color-tone-primary.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-primary .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-primary.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-primary .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-primary.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-primary .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-primary.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-primary .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-primary.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-primary .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-primary.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-primary .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-primary.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-primary .table-cont .tb-table.tb-rwd-xl .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-primary.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-primary .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-primary.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-primary .table-cont .tb-table.tb-rwd-lg .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-primary.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-primary .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-primary.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-primary .table-cont .tb-table.tb-rwd-md .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-primary.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-primary .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-primary.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-primary .table-cont .tb-table.tb-rwd-sm .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-primary.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-primary .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-primary.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-primary .table-cont .tb-table.tb-rwd-xs .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-primary.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-primary .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-primary.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-primary .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-primary.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-primary .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

.color-tone-primary.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-primary.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-primary .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-primary .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #70CF77;
}

.color-tone-primary .title:not([class^=color-]):not([class*=" color-"]) {
    color: #70CF77;
}

.color-tone-primary .text-link {
    color: #3E9D45;
}

    .color-tone-primary .text-link:hover {
        color: #70CF77;
    }

.color-tone-primary input:not([disabled]) {
    border-color: #A3E38E;
    outline-color: #70CF77;
}

    .color-tone-primary input:not([disabled])[type=date]::-webkit-datetime-edit-text {
        color: #A3E38E;
    }

    .color-tone-primary input:not([disabled])[type=checkbox] {
        border-color: #70CF77;
    }

        .color-tone-primary input:not([disabled])[type=checkbox]:checked {
            background-color: #70CF77;
        }

    .color-tone-primary input:not([disabled])[type=radio] {
        background-color: #E7F7E8;
        border-width: 2px;
        border-color: #3E9D45;
    }

        .color-tone-primary input:not([disabled])[type=radio]:checked {
            background-color: #E7F7E8;
            border-color: #70CF77;
        }

            .color-tone-primary input:not([disabled])[type=radio]:checked + .input-label {
                color: #70CF77;
            }

            .color-tone-primary input:not([disabled])[type=radio]:checked:after {
                background-color: #70CF77;
            }

    .color-tone-primary input:not([disabled]):focus {
        border-color: #3E9D45;
        outline: 2px solid #70CF7799;
    }

        .color-tone-primary input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #70CF77;
        }

        .color-tone-primary input:not([disabled]):focus + .icon {
            background-color: #3E9D45;
        }

.color-tone-primary.form-cont .input-cont .input-label, .color-tone-primary .form-cont .input-cont .input-label {
    color: #70CF77;
}

.color-tone-primary.form-cont .select-cont:before, .color-tone-primary .form-cont .select-cont:before {
    background-color: #70CF77;
}

.color-tone-primary.form-cont .radio-cont:hover .input-label, .color-tone-primary .form-cont .radio-cont:hover .input-label {
    color: #70CF77;
}

.color-tone-primary.note, .color-tone-primary .note {
    color: #70CF77;
}

.icon.color-primary {
    background-color: #70CF77;
}

.icon.color-primary-dark {
    background-color: #3E9D45;
}

.icon.color-primary-light {
    background-color: #A3E38E;
}

.icon.color-primary-thin {
    background-color: #E7F7E8;
}

.bg-primary:not(.btn-gear):not(.icon) {
    background-color: #70CF77;
}

.bg-primary .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-primary.cont {
    background-color: #70CF77;
}

    .bg-primary .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-primary.cont:before {
        background-color: #70CF77;
    }

.bg-primary-dark:not(.btn-gear):not(.icon) {
    background-color: #3E9D45;
}

.bg-primary-dark .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-primary-dark.cont {
    background-color: #3E9D45;
}

    .bg-primary-dark .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-primary-dark.cont:before {
        background-color: #3E9D45;
    }

.bg-primary-light:not(.btn-gear):not(.icon) {
    background-color: #A3E38E;
}

.bg-primary-light .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-primary-light.cont:before {
    background-color: #A3E38E;
}

.bg-primary-thin:not(.btn-gear):not(.icon) {
    background-color: #E7F7E8;
}

.bg-primary-thin .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-primary-thin.cont:before {
    background-color: #E7F7E8;
}

.bg-primary-blur:not(.btn-gear) {
    background-color: #70CF7799;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-primary-dark-blur:not(.btn-gear) {
    background-color: #3E9D4599;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-primary-light-blur:not(.btn-gear) {
    background-color: #A3E38E99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-primary-thin-blur:not(.btn-gear) {
    background-color: #E7F7E899;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-black-thin, .mark-black-light, .mark-black-dark, .mark-black, .mark-yellow-thin, .mark-yellow-light, .mark-yellow-dark, .mark-yellow, .mark-pink-thin, .mark-pink-light, .mark-pink-dark, .mark-pink, .mark-gray-thin, .mark-gray-light, .mark-gray-dark, .mark-gray, .mark-red-thin, .mark-red-light, .mark-red-dark, .mark-red, .mark-orange-thin, .mark-orange-light, .mark-orange-dark, .mark-orange, .mark-blue-thin, .mark-blue-light, .mark-blue-dark, .mark-blue, .mark-purple-thin, .mark-purple-light, .mark-purple-dark, .mark-purple, .mark-green-thin, .mark-green-light, .mark-green-dark, .mark-green, .mark-primary-thin, .mark-primary-light, .mark-primary-dark, .mark-primary {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-primary {
    background-color: #70CF77;
}

.mark-primary-dark {
    background-color: #3E9D45;
}

.mark-primary-light {
    background-color: #A3E38E;
}

.mark-primary-thin {
    background-color: #E7F7E8;
}

.color-primary:not(.icon) {
    color: #70CF77;
}

.color-primary-dark:not(.icon) {
    color: #3E9D45;
}

.color-primary-light:not(.icon) {
    color: #A3E38E;
}

.color-primary-thin:not(.icon) {
    color: #E7F7E8;
}

.color-tone-green ::-webkit-scrollbar-track {
    background-color: #E7F7E833;
}

.color-tone-green ::-webkit-scrollbar-thumb {
    background-color: #70CF77aa;
}

    .color-tone-green ::-webkit-scrollbar-thumb:hover {
        background-color: #70CF77;
    }

.color-tone-greenbutton[disabled], .color-tone-green button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-greenbutton[disabled]:hover, .color-tone-green button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-green.avatar, .color-tone-green .avatar {
    background-color: #E7F7E8;
}

.color-tone-green.menu li:hover, .color-tone-green .menu li:hover {
    background-color: #E7F7E8;
}

    .color-tone-green.menu li:hover .text, .color-tone-green .menu li:hover .text {
        color: #3E9D45;
    }

.color-tone-green.menu li.active .text, .color-tone-green .menu li.active .text {
    color: #3E9D45;
}

.color-tone-green .dialog-box .dialog .course-list .list-box .item-title {
    color: #A3E38E;
}

.color-tone-green .dialog-box .dialog .course-list .list-box .item-count:not(.complete) {
    background-color: #A3E38E;
}

.color-tone-green .dialog-box .dialog .course-list .list-box .item-count.complete:before {
    background-color: #3E9D45;
}

.color-tone-green .dialog-box .dialog .course-list .list-box .item-li.active:before, .color-tone-green .dialog-box .dialog .course-list .list-box .item-li.active:after {
    background-color: #3E9D45;
}

.color-tone-green .dialog-box .dialog .section-cont .list-box .item:hover {
    background-color: #E7F7E8;
    border-color: #70CF77;
}

    .color-tone-green .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #70CF77;
    }

    .color-tone-green .dialog-box .dialog .section-cont .list-box .item:hover .title {
        color: #3E9D45;
    }

    .color-tone-green .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

    .color-tone-green .dialog-box .dialog .section-cont .list-box .item:hover:before {
        background-color: #3E9D45;
    }

.color-tone-green .dialog-box .dialog .section-cont .list-box .item.active {
    background-color: #A3E38E;
    border-color: #ffffff;
}

    .color-tone-green .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-green .dialog-box .dialog .section-cont .list-box .item.active .title {
        color: #3E9D45;
    }

    .color-tone-green .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-green .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #70CF77;
}

.color-tone-green.btn, .color-tone-green .btn {
    background-color: #70CF77;
}

    .color-tone-green.btn.white, .color-tone-green .btn.white {
        background-color: #ffffff;
        color: #70CF77;
    }

        .color-tone-green.btn.white:hover, .color-tone-green .btn.white:hover {
            background-color: #A3E38E;
            color: #ffffff;
        }

            .color-tone-green.btn.white:hover .icon, .color-tone-green .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-green.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-green .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #70CF77;
        }

    .color-tone-green.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-green .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-green.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-green .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        background-color: #A3E38E;
        text-shadow: 0 1px 2px #3E9D45;
        box-shadow: 0 1px 2px #3E9D45;
    }

    .color-tone-green.btn:active, .color-tone-green .btn:active {
        background-color: #70CF77;
        box-shadow: 0 0 0 1px #3E9D45;
    }

    .color-tone-green.btn.disabled, .color-tone-green .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-green.btn.disabled:hover, .color-tone-green .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-green.table-cont:after, .color-tone-green .table-cont:after {
    border-color: #70CF77;
}

.color-tone-green.table-cont .tb-header, .color-tone-green .table-cont .tb-header {
    background-color: #E7F7E8;
    color: #70CF77;
}

.color-tone-green.table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd), .color-tone-green .table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd) {
    background-color: #E7F7E8;
}

.color-tone-green.table-cont .tb-table .tb-tr .tb-th, .color-tone-green .table-cont .tb-table .tb-tr .tb-th {
    color: #70CF77;
    border-color: #70CF77;
}

@media screen and (max-width: 1600px) {
    .color-tone-green.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-green .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-green.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-green .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-green.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-green .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-green.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-green .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-green.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-green .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-green.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-green .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-green.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-green .table-cont .tb-table.tb-rwd-xl .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-green.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-green .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-green.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-green .table-cont .tb-table.tb-rwd-lg .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-green.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-green .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-green.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-green .table-cont .tb-table.tb-rwd-md .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-green.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-green .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-green.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-green .table-cont .tb-table.tb-rwd-sm .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-green.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-green .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-green.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-green .table-cont .tb-table.tb-rwd-xs .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-green.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-green .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-green.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-green .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        background-color: #E7F7E8;
        border-color: #A3E38E33;
    }

        .color-tone-green.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-green .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: #A3E38E99;
        }
}

.color-tone-green.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-green.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-green .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-green .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #70CF77;
}

.color-tone-green .title:not([class^=color-]):not([class*=" color-"]) {
    color: #70CF77;
}

.color-tone-green .text-link {
    color: #3E9D45;
}

    .color-tone-green .text-link:hover {
        color: #70CF77;
    }

.color-tone-green input:not([disabled]) {
    border-color: #A3E38E;
    outline-color: #70CF77;
}

    .color-tone-green input:not([disabled])[type=date]::-webkit-datetime-edit-text {
        color: #A3E38E;
    }

    .color-tone-green input:not([disabled])[type=checkbox] {
        border-color: #70CF77;
    }

        .color-tone-green input:not([disabled])[type=checkbox]:checked {
            background-color: #70CF77;
        }

    .color-tone-green input:not([disabled])[type=radio] {
        background-color: #E7F7E8;
        border-width: 2px;
        border-color: #3E9D45;
    }

        .color-tone-green input:not([disabled])[type=radio]:checked {
            background-color: #E7F7E8;
            border-color: #70CF77;
        }

            .color-tone-green input:not([disabled])[type=radio]:checked + .input-label {
                color: #70CF77;
            }

            .color-tone-green input:not([disabled])[type=radio]:checked:after {
                background-color: #70CF77;
            }

    .color-tone-green input:not([disabled]):focus {
        border-color: #3E9D45;
        outline: 2px solid #70CF7799;
    }

        .color-tone-green input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #70CF77;
        }

        .color-tone-green input:not([disabled]):focus + .icon {
            background-color: #3E9D45;
        }

.color-tone-green.form-cont .input-cont .input-label, .color-tone-green .form-cont .input-cont .input-label {
    color: #70CF77;
}

.color-tone-green.form-cont .select-cont:before, .color-tone-green .form-cont .select-cont:before {
    background-color: #70CF77;
}

.color-tone-green.form-cont .radio-cont:hover .input-label, .color-tone-green .form-cont .radio-cont:hover .input-label {
    color: #70CF77;
}

.color-tone-green.note, .color-tone-green .note {
    color: #70CF77;
}

.icon.color-green {
    background-color: #70CF77;
}

.icon.color-green-dark {
    background-color: #3E9D45;
}

.icon.color-green-light {
    background-color: #A3E38E;
}

.icon.color-green-thin {
    background-color: #E7F7E8;
}

.bg-green:not(.btn-gear):not(.icon) {
    background-color: #70CF77;
}

.bg-green .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-green.cont {
    background-color: #70CF77;
}

    .bg-green .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-green.cont:before {
        background-color: #70CF77;
    }

.bg-green-dark:not(.btn-gear):not(.icon) {
    background-color: #3E9D45;
}

.bg-green-dark .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-green-dark.cont {
    background-color: #3E9D45;
}

    .bg-green-dark .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-green-dark.cont:before {
        background-color: #3E9D45;
    }

.bg-green-light:not(.btn-gear):not(.icon) {
    background-color: #A3E38E;
}

.bg-green-light .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-green-light.cont:before {
    background-color: #A3E38E;
}

.bg-green-thin:not(.btn-gear):not(.icon) {
    background-color: #E7F7E8;
}

.bg-green-thin .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-green-thin.cont:before {
    background-color: #E7F7E8;
}

.bg-green-blur:not(.btn-gear) {
    background-color: #70CF7799;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-green-dark-blur:not(.btn-gear) {
    background-color: #3E9D4599;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-green-light-blur:not(.btn-gear) {
    background-color: #A3E38E99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-green-thin-blur:not(.btn-gear) {
    background-color: #E7F7E899;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-black-thin, .mark-black-light, .mark-black-dark, .mark-black, .mark-yellow-thin, .mark-yellow-light, .mark-yellow-dark, .mark-yellow, .mark-pink-thin, .mark-pink-light, .mark-pink-dark, .mark-pink, .mark-gray-thin, .mark-gray-light, .mark-gray-dark, .mark-gray, .mark-red-thin, .mark-red-light, .mark-red-dark, .mark-red, .mark-orange-thin, .mark-orange-light, .mark-orange-dark, .mark-orange, .mark-blue-thin, .mark-blue-light, .mark-blue-dark, .mark-blue, .mark-purple-thin, .mark-purple-light, .mark-purple-dark, .mark-purple, .mark-green-thin, .mark-green-light, .mark-green-dark, .mark-green, .mark-primary, .mark-primary-dark, .mark-primary-light, .mark-primary-thin {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-green {
    background-color: #70CF77;
}

.mark-green-dark {
    background-color: #3E9D45;
}

.mark-green-light {
    background-color: #A3E38E;
}

.mark-green-thin {
    background-color: #E7F7E8;
}

.color-green:not(.icon) {
    color: #70CF77;
}

.color-green-dark:not(.icon) {
    color: #3E9D45;
}

.color-green-light:not(.icon) {
    color: #A3E38E;
}

.color-green-thin:not(.icon) {
    color: #E7F7E8;
}

.color-tone-purple ::-webkit-scrollbar-track {
    background-color: #FEF6FF33;
}

.color-tone-purple ::-webkit-scrollbar-thumb {
    background-color: #B453C8aa;
}

    .color-tone-purple ::-webkit-scrollbar-thumb:hover {
        background-color: #B453C8;
    }

.color-tone-purplebutton[disabled], .color-tone-purple button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-purplebutton[disabled]:hover, .color-tone-purple button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-purple.avatar, .color-tone-purple .avatar {
    background-color: #FEF6FF;
}

.color-tone-purple.menu li:hover, .color-tone-purple .menu li:hover {
    background-color: #FEF6FF;
}

    .color-tone-purple.menu li:hover .text, .color-tone-purple .menu li:hover .text {
        color: #9B29AD;
    }

.color-tone-purple.menu li.active .text, .color-tone-purple .menu li.active .text {
    color: #9B29AD;
}

.color-tone-purple .dialog-box .dialog .course-list .list-box .item-title {
    color: #F0A4FF;
}

.color-tone-purple .dialog-box .dialog .course-list .list-box .item-count:not(.complete) {
    background-color: #F0A4FF;
}

.color-tone-purple .dialog-box .dialog .course-list .list-box .item-count.complete:before {
    background-color: #9B29AD;
}

.color-tone-purple .dialog-box .dialog .course-list .list-box .item-li.active:before, .color-tone-purple .dialog-box .dialog .course-list .list-box .item-li.active:after {
    background-color: #9B29AD;
}

.color-tone-purple .dialog-box .dialog .section-cont .list-box .item:hover {
    background-color: #FEF6FF;
    border-color: #B453C8;
}

    .color-tone-purple .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #B453C8;
    }

    .color-tone-purple .dialog-box .dialog .section-cont .list-box .item:hover .title {
        color: #9B29AD;
    }

    .color-tone-purple .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

    .color-tone-purple .dialog-box .dialog .section-cont .list-box .item:hover:before {
        background-color: #9B29AD;
    }

.color-tone-purple .dialog-box .dialog .section-cont .list-box .item.active {
    background-color: #F0A4FF;
    border-color: #ffffff;
}

    .color-tone-purple .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-purple .dialog-box .dialog .section-cont .list-box .item.active .title {
        color: #9B29AD;
    }

    .color-tone-purple .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-purple .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #B453C8;
}

.color-tone-purple.btn, .color-tone-purple .btn {
    background-color: #B453C8;
}

    .color-tone-purple.btn.white, .color-tone-purple .btn.white {
        background-color: #ffffff;
        color: #B453C8;
    }

        .color-tone-purple.btn.white:hover, .color-tone-purple .btn.white:hover {
            background-color: #F0A4FF;
            color: #ffffff;
        }

            .color-tone-purple.btn.white:hover .icon, .color-tone-purple .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-purple.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-purple .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #B453C8;
        }

    .color-tone-purple.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-purple .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-purple.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-purple .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        background-color: #F0A4FF;
        text-shadow: 0 1px 2px #9B29AD;
        box-shadow: 0 1px 2px #9B29AD;
    }

    .color-tone-purple.btn:active, .color-tone-purple .btn:active {
        background-color: #B453C8;
        box-shadow: 0 0 0 1px #9B29AD;
    }

    .color-tone-purple.btn.disabled, .color-tone-purple .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-purple.btn.disabled:hover, .color-tone-purple .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-purple.table-cont:after, .color-tone-purple .table-cont:after {
    border-color: #B453C8;
}

.color-tone-purple.table-cont .tb-header, .color-tone-purple .table-cont .tb-header {
    background-color: #FEF6FF;
    color: #B453C8;
}

.color-tone-purple.table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd), .color-tone-purple .table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd) {
    background-color: #FEF6FF;
}

.color-tone-purple.table-cont .tb-table .tb-tr .tb-th, .color-tone-purple .table-cont .tb-table .tb-tr .tb-th {
    color: #B453C8;
    border-color: #B453C8;
}

@media screen and (max-width: 1600px) {
    .color-tone-purple.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-purple .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        background-color: #FEF6FF;
        border-color: #F0A4FF33;
    }

        .color-tone-purple.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-purple .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: #F0A4FF99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-purple.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-purple .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        background-color: #FEF6FF;
        border-color: #F0A4FF33;
    }

        .color-tone-purple.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-purple .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: #F0A4FF99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-purple.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-purple .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        background-color: #FEF6FF;
        border-color: #F0A4FF33;
    }

        .color-tone-purple.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-purple .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: #F0A4FF99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-purple.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-purple .table-cont .tb-table.tb-rwd-xl .tb-tr {
        background-color: #FEF6FF;
        border-color: #F0A4FF33;
    }

        .color-tone-purple.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-purple .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: #F0A4FF99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-purple.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-purple .table-cont .tb-table.tb-rwd-lg .tb-tr {
        background-color: #FEF6FF;
        border-color: #F0A4FF33;
    }

        .color-tone-purple.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-purple .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: #F0A4FF99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-purple.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-purple .table-cont .tb-table.tb-rwd-md .tb-tr {
        background-color: #FEF6FF;
        border-color: #F0A4FF33;
    }

        .color-tone-purple.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-purple .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: #F0A4FF99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-purple.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-purple .table-cont .tb-table.tb-rwd-sm .tb-tr {
        background-color: #FEF6FF;
        border-color: #F0A4FF33;
    }

        .color-tone-purple.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-purple .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: #F0A4FF99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-purple.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-purple .table-cont .tb-table.tb-rwd-xs .tb-tr {
        background-color: #FEF6FF;
        border-color: #F0A4FF33;
    }

        .color-tone-purple.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-purple .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: #F0A4FF99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-purple.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-purple .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        background-color: #FEF6FF;
        border-color: #F0A4FF33;
    }

        .color-tone-purple.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-purple .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: #F0A4FF99;
        }
}

.color-tone-purple.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-purple.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-purple .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-purple .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #B453C8;
}

.color-tone-purple .title:not([class^=color-]):not([class*=" color-"]) {
    color: #B453C8;
}

.color-tone-purple .text-link {
    color: #9B29AD;
}

    .color-tone-purple .text-link:hover {
        color: #B453C8;
    }

.color-tone-purple input:not([disabled]) {
    border-color: #F0A4FF;
    outline-color: #B453C8;
}

    .color-tone-purple input:not([disabled])[type=date]::-webkit-datetime-edit-text {
        color: #F0A4FF;
    }

    .color-tone-purple input:not([disabled])[type=checkbox] {
        border-color: #B453C8;
    }

        .color-tone-purple input:not([disabled])[type=checkbox]:checked {
            background-color: #B453C8;
        }

    .color-tone-purple input:not([disabled])[type=radio] {
        background-color: #FEF6FF;
        border-width: 2px;
        border-color: #9B29AD;
    }

        .color-tone-purple input:not([disabled])[type=radio]:checked {
            background-color: #FEF6FF;
            border-color: #B453C8;
        }

            .color-tone-purple input:not([disabled])[type=radio]:checked + .input-label {
                color: #B453C8;
            }

            .color-tone-purple input:not([disabled])[type=radio]:checked:after {
                background-color: #B453C8;
            }

    .color-tone-purple input:not([disabled]):focus {
        border-color: #9B29AD;
        outline: 2px solid #B453C899;
    }

        .color-tone-purple input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #B453C8;
        }

        .color-tone-purple input:not([disabled]):focus + .icon {
            background-color: #9B29AD;
        }

.color-tone-purple.form-cont .input-cont .input-label, .color-tone-purple .form-cont .input-cont .input-label {
    color: #B453C8;
}

.color-tone-purple.form-cont .select-cont:before, .color-tone-purple .form-cont .select-cont:before {
    background-color: #B453C8;
}

.color-tone-purple.form-cont .radio-cont:hover .input-label, .color-tone-purple .form-cont .radio-cont:hover .input-label {
    color: #B453C8;
}

.color-tone-purple.note, .color-tone-purple .note {
    color: #B453C8;
}

.icon.color-purple {
    background-color: #B453C8;
}

.icon.color-purple-dark {
    background-color: #9B29AD;
}

.icon.color-purple-light {
    background-color: #F0A4FF;
}

.icon.color-purple-thin {
    background-color: #FEF6FF;
}

.bg-purple:not(.btn-gear):not(.icon) {
    background-color: #B453C8;
}

.bg-purple .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-purple.cont {
    background-color: #B453C8;
}

    .bg-purple .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-purple.cont:before {
        background-color: #B453C8;
    }

.bg-purple-dark:not(.btn-gear):not(.icon) {
    background-color: #9B29AD;
}

.bg-purple-dark .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-purple-dark.cont {
    background-color: #9B29AD;
}

    .bg-purple-dark .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-purple-dark.cont:before {
        background-color: #9B29AD;
    }

.bg-purple-light:not(.btn-gear):not(.icon) {
    background-color: #F0A4FF;
}

.bg-purple-light .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-purple-light.cont:before {
    background-color: #F0A4FF;
}

.bg-purple-thin:not(.btn-gear):not(.icon) {
    background-color: #FEF6FF;
}

.bg-purple-thin .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-purple-thin.cont:before {
    background-color: #FEF6FF;
}

.bg-purple-blur:not(.btn-gear) {
    background-color: #B453C899;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-purple-dark-blur:not(.btn-gear) {
    background-color: #9B29AD99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-purple-light-blur:not(.btn-gear) {
    background-color: #F0A4FF99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-purple-thin-blur:not(.btn-gear) {
    background-color: #FEF6FF99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-black-thin, .mark-black-light, .mark-black-dark, .mark-black, .mark-yellow-thin, .mark-yellow-light, .mark-yellow-dark, .mark-yellow, .mark-pink-thin, .mark-pink-light, .mark-pink-dark, .mark-pink, .mark-gray-thin, .mark-gray-light, .mark-gray-dark, .mark-gray, .mark-red-thin, .mark-red-light, .mark-red-dark, .mark-red, .mark-orange-thin, .mark-orange-light, .mark-orange-dark, .mark-orange, .mark-blue-thin, .mark-blue-light, .mark-blue-dark, .mark-blue, .mark-purple-thin, .mark-purple-light, .mark-purple-dark, .mark-purple, .mark-primary, .mark-primary-dark, .mark-primary-light, .mark-primary-thin, .mark-green, .mark-green-dark, .mark-green-light, .mark-green-thin {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-purple {
    background-color: #B453C8;
}

.mark-purple-dark {
    background-color: #9B29AD;
}

.mark-purple-light {
    background-color: #F0A4FF;
}

.mark-purple-thin {
    background-color: #FEF6FF;
}

.color-purple:not(.icon) {
    color: #B453C8;
}

.color-purple-dark:not(.icon) {
    color: #9B29AD;
}

.color-purple-light:not(.icon) {
    color: #F0A4FF;
}

.color-purple-thin:not(.icon) {
    color: #FEF6FF;
}

.color-tone-blue ::-webkit-scrollbar-track {
    background-color: #D9F0F333;
}

.color-tone-blue ::-webkit-scrollbar-thumb {
    background-color: #2C6691aa;
}

    .color-tone-blue ::-webkit-scrollbar-thumb:hover {
        background-color: #2C6691;
    }

.color-tone-bluebutton[disabled], .color-tone-blue button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-bluebutton[disabled]:hover, .color-tone-blue button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-blue.avatar, .color-tone-blue .avatar {
    background-color: #D9F0F3;
}

.color-tone-blue.menu li:hover, .color-tone-blue .menu li:hover {
    background-color: #D9F0F3;
}

    .color-tone-blue.menu li:hover .text, .color-tone-blue .menu li:hover .text {
        color: #214D6D;
    }

.color-tone-blue.menu li.active .text, .color-tone-blue .menu li.active .text {
    color: #214D6D;
}

.color-tone-blue .dialog-box .dialog .course-list .list-box .item-title {
    color: #5388AF;
}

.color-tone-blue .dialog-box .dialog .course-list .list-box .item-count:not(.complete) {
    background-color: #5388AF;
}

.color-tone-blue .dialog-box .dialog .course-list .list-box .item-count.complete:before {
    background-color: #214D6D;
}

.color-tone-blue .dialog-box .dialog .course-list .list-box .item-li.active:before, .color-tone-blue .dialog-box .dialog .course-list .list-box .item-li.active:after {
    background-color: #214D6D;
}

.color-tone-blue .dialog-box .dialog .section-cont .list-box .item:hover {
    background-color: #D9F0F3;
    border-color: #2C6691;
}

    .color-tone-blue .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #2C6691;
    }

    .color-tone-blue .dialog-box .dialog .section-cont .list-box .item:hover .title {
        color: #214D6D;
    }

    .color-tone-blue .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

    .color-tone-blue .dialog-box .dialog .section-cont .list-box .item:hover:before {
        background-color: #214D6D;
    }

.color-tone-blue .dialog-box .dialog .section-cont .list-box .item.active {
    background-color: #5388AF;
    border-color: #ffffff;
}

    .color-tone-blue .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-blue .dialog-box .dialog .section-cont .list-box .item.active .title {
        color: #214D6D;
    }

    .color-tone-blue .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-blue .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #2C6691;
}

.color-tone-blue.btn, .color-tone-blue .btn {
    background-color: #2C6691;
}

    .color-tone-blue.btn.white, .color-tone-blue .btn.white {
        background-color: #ffffff;
        color: #2C6691;
    }

        .color-tone-blue.btn.white:hover, .color-tone-blue .btn.white:hover {
            background-color: #5388AF;
            color: #ffffff;
        }

            .color-tone-blue.btn.white:hover .icon, .color-tone-blue .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-blue.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-blue .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #2C6691;
        }

    .color-tone-blue.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-blue .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-blue.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-blue .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        background-color: #5388AF;
        text-shadow: 0 1px 2px #214D6D;
        box-shadow: 0 1px 2px #214D6D;
    }

    .color-tone-blue.btn:active, .color-tone-blue .btn:active {
        background-color: #2C6691;
        box-shadow: 0 0 0 1px #214D6D;
    }

    .color-tone-blue.btn.disabled, .color-tone-blue .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-blue.btn.disabled:hover, .color-tone-blue .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-blue.table-cont:after, .color-tone-blue .table-cont:after {
    border-color: #2C6691;
}

.color-tone-blue.table-cont .tb-header, .color-tone-blue .table-cont .tb-header {
    background-color: #D9F0F3;
    color: #2C6691;
}

.color-tone-blue.table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd), .color-tone-blue .table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd) {
    background-color: #D9F0F3;
}

.color-tone-blue.table-cont .tb-table .tb-tr .tb-th, .color-tone-blue .table-cont .tb-table .tb-tr .tb-th {
    color: #2C6691;
    border-color: #2C6691;
}

@media screen and (max-width: 1600px) {
    .color-tone-blue.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-blue .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        background-color: #D9F0F3;
        border-color: #5388AF33;
    }

        .color-tone-blue.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-blue .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: #5388AF99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-blue.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-blue .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        background-color: #D9F0F3;
        border-color: #5388AF33;
    }

        .color-tone-blue.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-blue .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: #5388AF99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-blue.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-blue .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        background-color: #D9F0F3;
        border-color: #5388AF33;
    }

        .color-tone-blue.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-blue .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: #5388AF99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-blue.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-blue .table-cont .tb-table.tb-rwd-xl .tb-tr {
        background-color: #D9F0F3;
        border-color: #5388AF33;
    }

        .color-tone-blue.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-blue .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: #5388AF99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-blue.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-blue .table-cont .tb-table.tb-rwd-lg .tb-tr {
        background-color: #D9F0F3;
        border-color: #5388AF33;
    }

        .color-tone-blue.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-blue .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: #5388AF99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-blue.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-blue .table-cont .tb-table.tb-rwd-md .tb-tr {
        background-color: #D9F0F3;
        border-color: #5388AF33;
    }

        .color-tone-blue.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-blue .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: #5388AF99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-blue.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-blue .table-cont .tb-table.tb-rwd-sm .tb-tr {
        background-color: #D9F0F3;
        border-color: #5388AF33;
    }

        .color-tone-blue.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-blue .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: #5388AF99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-blue.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-blue .table-cont .tb-table.tb-rwd-xs .tb-tr {
        background-color: #D9F0F3;
        border-color: #5388AF33;
    }

        .color-tone-blue.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-blue .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: #5388AF99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-blue.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-blue .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        background-color: #D9F0F3;
        border-color: #5388AF33;
    }

        .color-tone-blue.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-blue .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: #5388AF99;
        }
}

.color-tone-blue.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-blue.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-blue .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-blue .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #2C6691;
}

.color-tone-blue .title:not([class^=color-]):not([class*=" color-"]) {
    color: #2C6691;
}

.color-tone-blue .text-link {
    color: #214D6D;
}

    .color-tone-blue .text-link:hover {
        color: #2C6691;
    }

.color-tone-blue input:not([disabled]) {
    border-color: #5388AF;
    outline-color: #2C6691;
}

    .color-tone-blue input:not([disabled])[type=date]::-webkit-datetime-edit-text {
        color: #5388AF;
    }

    .color-tone-blue input:not([disabled])[type=checkbox] {
        border-color: #2C6691;
    }

        .color-tone-blue input:not([disabled])[type=checkbox]:checked {
            background-color: #2C6691;
        }

    .color-tone-blue input:not([disabled])[type=radio] {
        background-color: #D9F0F3;
        border-width: 2px;
        border-color: #214D6D;
    }

        .color-tone-blue input:not([disabled])[type=radio]:checked {
            background-color: #D9F0F3;
            border-color: #2C6691;
        }

            .color-tone-blue input:not([disabled])[type=radio]:checked + .input-label {
                color: #2C6691;
            }

            .color-tone-blue input:not([disabled])[type=radio]:checked:after {
                background-color: #2C6691;
            }

    .color-tone-blue input:not([disabled]):focus {
        border-color: #214D6D;
        outline: 2px solid #2C669199;
    }

        .color-tone-blue input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #2C6691;
        }

        .color-tone-blue input:not([disabled]):focus + .icon {
            background-color: #214D6D;
        }

.color-tone-blue.form-cont .input-cont .input-label, .color-tone-blue .form-cont .input-cont .input-label {
    color: #2C6691;
}

.color-tone-blue.form-cont .select-cont:before, .color-tone-blue .form-cont .select-cont:before {
    background-color: #2C6691;
}

.color-tone-blue.form-cont .radio-cont:hover .input-label, .color-tone-blue .form-cont .radio-cont:hover .input-label {
    color: #2C6691;
}

.color-tone-blue.note, .color-tone-blue .note {
    color: #2C6691;
}

.icon.color-blue {
    background-color: #2C6691;
}

.icon.color-blue-dark {
    background-color: #214D6D;
}

.icon.color-blue-light {
    background-color: #5388AF;
}

.icon.color-blue-thin {
    background-color: #D9F0F3;
}

.bg-blue:not(.btn-gear):not(.icon) {
    background-color: #2C6691;
}

.bg-blue .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-blue.cont {
    background-color: #2C6691;
}

    .bg-blue .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-blue.cont:before {
        background-color: #2C6691;
    }

.bg-blue-dark:not(.btn-gear):not(.icon) {
    background-color: #214D6D;
}

.bg-blue-dark .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-blue-dark.cont {
    background-color: #214D6D;
}

    .bg-blue-dark .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-blue-dark.cont:before {
        background-color: #214D6D;
    }

.bg-blue-light:not(.btn-gear):not(.icon) {
    background-color: #5388AF;
}

.bg-blue-light .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-blue-light.cont:before {
    background-color: #5388AF;
}

.bg-blue-thin:not(.btn-gear):not(.icon) {
    background-color: #D9F0F3;
}

.bg-blue-thin .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-blue-thin.cont:before {
    background-color: #D9F0F3;
}

.bg-blue-blur:not(.btn-gear) {
    background-color: #2C669199;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-blue-dark-blur:not(.btn-gear) {
    background-color: #214D6D99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-blue-light-blur:not(.btn-gear) {
    background-color: #5388AF99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-blue-thin-blur:not(.btn-gear) {
    background-color: #D9F0F399;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-black-thin, .mark-black-light, .mark-black-dark, .mark-black, .mark-yellow-thin, .mark-yellow-light, .mark-yellow-dark, .mark-yellow, .mark-pink-thin, .mark-pink-light, .mark-pink-dark, .mark-pink, .mark-gray-thin, .mark-gray-light, .mark-gray-dark, .mark-gray, .mark-red-thin, .mark-red-light, .mark-red-dark, .mark-red, .mark-orange-thin, .mark-orange-light, .mark-orange-dark, .mark-orange, .mark-blue-thin, .mark-blue-light, .mark-blue-dark, .mark-blue, .mark-primary, .mark-primary-dark, .mark-primary-light, .mark-primary-thin, .mark-green, .mark-green-dark, .mark-green-light, .mark-green-thin, .mark-purple, .mark-purple-dark, .mark-purple-light, .mark-purple-thin {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-blue {
    background-color: #2C6691;
}

.mark-blue-dark {
    background-color: #214D6D;
}

.mark-blue-light {
    background-color: #5388AF;
}

.mark-blue-thin {
    background-color: #D9F0F3;
}

.color-blue:not(.icon) {
    color: #2C6691;
}

.color-blue-dark:not(.icon) {
    color: #214D6D;
}

.color-blue-light:not(.icon) {
    color: #5388AF;
}

.color-blue-thin:not(.icon) {
    color: #D9F0F3;
}

.color-tone-orange ::-webkit-scrollbar-track {
    background-color: #FFFCE633;
}

.color-tone-orange ::-webkit-scrollbar-thumb {
    background-color: #FFBF00aa;
}

    .color-tone-orange ::-webkit-scrollbar-thumb:hover {
        background-color: #FFBF00;
    }

.color-tone-orangebutton[disabled], .color-tone-orange button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-orangebutton[disabled]:hover, .color-tone-orange button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-orange.avatar, .color-tone-orange .avatar {
    background-color: #FFFCE6;
}

.color-tone-orange.menu li:hover, .color-tone-orange .menu li:hover {
    background-color: #FFFCE6;
}

    .color-tone-orange.menu li:hover .text, .color-tone-orange .menu li:hover .text {
        color: #FF8F00;
    }

.color-tone-orange.menu li.active .text, .color-tone-orange .menu li.active .text {
    color: #FF8F00;
}

.color-tone-orange .dialog-box .dialog .course-list .list-box .item-title {
    color: #FFDF7F;
}

.color-tone-orange .dialog-box .dialog .course-list .list-box .item-count:not(.complete) {
    background-color: #FFDF7F;
}

.color-tone-orange .dialog-box .dialog .course-list .list-box .item-count.complete:before {
    background-color: #FF8F00;
}

.color-tone-orange .dialog-box .dialog .course-list .list-box .item-li.active:before, .color-tone-orange .dialog-box .dialog .course-list .list-box .item-li.active:after {
    background-color: #FF8F00;
}

.color-tone-orange .dialog-box .dialog .section-cont .list-box .item:hover {
    background-color: #FFFCE6;
    border-color: #FFBF00;
}

    .color-tone-orange .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #FFBF00;
    }

    .color-tone-orange .dialog-box .dialog .section-cont .list-box .item:hover .title {
        color: #FF8F00;
    }

    .color-tone-orange .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

    .color-tone-orange .dialog-box .dialog .section-cont .list-box .item:hover:before {
        background-color: #FF8F00;
    }

.color-tone-orange .dialog-box .dialog .section-cont .list-box .item.active {
    background-color: #FFDF7F;
    border-color: #ffffff;
}

    .color-tone-orange .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-orange .dialog-box .dialog .section-cont .list-box .item.active .title {
        color: #FF8F00;
    }

    .color-tone-orange .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-orange .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #FFBF00;
}

.color-tone-orange.btn, .color-tone-orange .btn {
    background-color: #FFBF00;
}

    .color-tone-orange.btn.white, .color-tone-orange .btn.white {
        background-color: #ffffff;
        color: #FFBF00;
    }

        .color-tone-orange.btn.white:hover, .color-tone-orange .btn.white:hover {
            background-color: #FFDF7F;
            color: #ffffff;
        }

            .color-tone-orange.btn.white:hover .icon, .color-tone-orange .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-orange.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-orange .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #FFBF00;
        }

    .color-tone-orange.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-orange .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-orange.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-orange .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        background-color: #FFDF7F;
        text-shadow: 0 1px 2px #FF8F00;
        box-shadow: 0 1px 2px #FF8F00;
    }

    .color-tone-orange.btn:active, .color-tone-orange .btn:active {
        background-color: #FFBF00;
        box-shadow: 0 0 0 1px #FF8F00;
    }

    .color-tone-orange.btn.disabled, .color-tone-orange .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-orange.btn.disabled:hover, .color-tone-orange .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-orange.table-cont:after, .color-tone-orange .table-cont:after {
    border-color: #FFBF00;
}

.color-tone-orange.table-cont .tb-header, .color-tone-orange .table-cont .tb-header {
    background-color: #FFFCE6;
    color: #FFBF00;
}

.color-tone-orange.table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd), .color-tone-orange .table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd) {
    background-color: #FFFCE6;
}

.color-tone-orange.table-cont .tb-table .tb-tr .tb-th, .color-tone-orange .table-cont .tb-table .tb-tr .tb-th {
    color: #FFBF00;
    border-color: #FFBF00;
}

@media screen and (max-width: 1600px) {
    .color-tone-orange.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-orange .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        background-color: #FFFCE6;
        border-color: #FFDF7F33;
    }

        .color-tone-orange.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-orange .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: #FFDF7F99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-orange.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-orange .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        background-color: #FFFCE6;
        border-color: #FFDF7F33;
    }

        .color-tone-orange.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-orange .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: #FFDF7F99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-orange.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-orange .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        background-color: #FFFCE6;
        border-color: #FFDF7F33;
    }

        .color-tone-orange.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-orange .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: #FFDF7F99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-orange.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-orange .table-cont .tb-table.tb-rwd-xl .tb-tr {
        background-color: #FFFCE6;
        border-color: #FFDF7F33;
    }

        .color-tone-orange.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-orange .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: #FFDF7F99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-orange.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-orange .table-cont .tb-table.tb-rwd-lg .tb-tr {
        background-color: #FFFCE6;
        border-color: #FFDF7F33;
    }

        .color-tone-orange.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-orange .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: #FFDF7F99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-orange.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-orange .table-cont .tb-table.tb-rwd-md .tb-tr {
        background-color: #FFFCE6;
        border-color: #FFDF7F33;
    }

        .color-tone-orange.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-orange .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: #FFDF7F99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-orange.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-orange .table-cont .tb-table.tb-rwd-sm .tb-tr {
        background-color: #FFFCE6;
        border-color: #FFDF7F33;
    }

        .color-tone-orange.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-orange .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: #FFDF7F99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-orange.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-orange .table-cont .tb-table.tb-rwd-xs .tb-tr {
        background-color: #FFFCE6;
        border-color: #FFDF7F33;
    }

        .color-tone-orange.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-orange .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: #FFDF7F99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-orange.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-orange .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        background-color: #FFFCE6;
        border-color: #FFDF7F33;
    }

        .color-tone-orange.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-orange .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: #FFDF7F99;
        }
}

.color-tone-orange.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-orange.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-orange .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-orange .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #FFBF00;
}

.color-tone-orange .title:not([class^=color-]):not([class*=" color-"]) {
    color: #FFBF00;
}

.color-tone-orange .text-link {
    color: #FF8F00;
}

    .color-tone-orange .text-link:hover {
        color: #FFBF00;
    }

.color-tone-orange input:not([disabled]) {
    border-color: #FFDF7F;
    outline-color: #FFBF00;
}

    .color-tone-orange input:not([disabled])[type=date]::-webkit-datetime-edit-text {
        color: #FFDF7F;
    }

    .color-tone-orange input:not([disabled])[type=checkbox] {
        border-color: #FFBF00;
    }

        .color-tone-orange input:not([disabled])[type=checkbox]:checked {
            background-color: #FFBF00;
        }

    .color-tone-orange input:not([disabled])[type=radio] {
        background-color: #FFFCE6;
        border-width: 2px;
        border-color: #FF8F00;
    }

        .color-tone-orange input:not([disabled])[type=radio]:checked {
            background-color: #FFFCE6;
            border-color: #FFBF00;
        }

            .color-tone-orange input:not([disabled])[type=radio]:checked + .input-label {
                color: #FFBF00;
            }

            .color-tone-orange input:not([disabled])[type=radio]:checked:after {
                background-color: #FFBF00;
            }

    .color-tone-orange input:not([disabled]):focus {
        border-color: #FF8F00;
        outline: 2px solid #FFBF0099;
    }

        .color-tone-orange input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #FFBF00;
        }

        .color-tone-orange input:not([disabled]):focus + .icon {
            background-color: #FF8F00;
        }

.color-tone-orange.form-cont .input-cont .input-label, .color-tone-orange .form-cont .input-cont .input-label {
    color: #FFBF00;
}

.color-tone-orange.form-cont .select-cont:before, .color-tone-orange .form-cont .select-cont:before {
    background-color: #FFBF00;
}

.color-tone-orange.form-cont .radio-cont:hover .input-label, .color-tone-orange .form-cont .radio-cont:hover .input-label {
    color: #FFBF00;
}

.color-tone-orange.note, .color-tone-orange .note {
    color: #FFBF00;
}

.icon.color-orange {
    background-color: #FFBF00;
}

.icon.color-orange-dark {
    background-color: #FF8F00;
}

.icon.color-orange-light {
    background-color: #FFDF7F;
}

.icon.color-orange-thin {
    background-color: #FFFCE6;
}

.bg-orange:not(.btn-gear):not(.icon) {
    background-color: #FFBF00;
}

.bg-orange .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-orange.cont {
    background-color: #FFBF00;
}

    .bg-orange .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-orange.cont:before {
        background-color: #FFBF00;
    }

.bg-orange-dark:not(.btn-gear):not(.icon) {
    background-color: #FF8F00;
}

.bg-orange-dark .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-orange-dark.cont {
    background-color: #FF8F00;
}

    .bg-orange-dark .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-orange-dark.cont:before {
        background-color: #FF8F00;
    }

.bg-orange-light:not(.btn-gear):not(.icon) {
    background-color: #FFDF7F;
}

.bg-orange-light .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-orange-light.cont:before {
    background-color: #FFDF7F;
}

.bg-orange-thin:not(.btn-gear):not(.icon) {
    background-color: #FFFCE6;
}

.bg-orange-thin .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-orange-thin.cont:before {
    background-color: #FFFCE6;
}

.bg-orange-blur:not(.btn-gear) {
    background-color: #FFBF0099;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-orange-dark-blur:not(.btn-gear) {
    background-color: #FF8F0099;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-orange-light-blur:not(.btn-gear) {
    background-color: #FFDF7F99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-orange-thin-blur:not(.btn-gear) {
    background-color: #FFFCE699;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-black-thin, .mark-black-light, .mark-black-dark, .mark-black, .mark-yellow-thin, .mark-yellow-light, .mark-yellow-dark, .mark-yellow, .mark-pink-thin, .mark-pink-light, .mark-pink-dark, .mark-pink, .mark-gray-thin, .mark-gray-light, .mark-gray-dark, .mark-gray, .mark-red-thin, .mark-red-light, .mark-red-dark, .mark-red, .mark-orange-thin, .mark-orange-light, .mark-orange-dark, .mark-orange, .mark-primary, .mark-primary-dark, .mark-primary-light, .mark-primary-thin, .mark-green, .mark-green-dark, .mark-green-light, .mark-green-thin, .mark-purple, .mark-purple-dark, .mark-purple-light, .mark-purple-thin, .mark-blue, .mark-blue-dark, .mark-blue-light, .mark-blue-thin {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-orange {
    background-color: #FFBF00;
}

.mark-orange-dark {
    background-color: #FF8F00;
}

.mark-orange-light {
    background-color: #FFDF7F;
}

.mark-orange-thin {
    background-color: #FFFCE6;
}

.color-orange:not(.icon) {
    color: #FFBF00;
}

.color-orange-dark:not(.icon) {
    color: #FF8F00;
}

.color-orange-light:not(.icon) {
    color: #FFDF7F;
}

.color-orange-thin:not(.icon) {
    color: #FFFCE6;
}

.color-tone-red ::-webkit-scrollbar-track {
    background-color: #FFEBEF33;
}

.color-tone-red ::-webkit-scrollbar-thumb {
    background-color: #FF6180aa;
}

    .color-tone-red ::-webkit-scrollbar-thumb:hover {
        background-color: #FF6180;
    }

.color-tone-redbutton[disabled], .color-tone-red button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-redbutton[disabled]:hover, .color-tone-red button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-red.avatar, .color-tone-red .avatar {
    background-color: #FFEBEF;
}

.color-tone-red.menu li:hover, .color-tone-red .menu li:hover {
    background-color: #FFEBEF;
}

    .color-tone-red.menu li:hover .text, .color-tone-red .menu li:hover .text {
        color: #E51A66;
    }

.color-tone-red.menu li.active .text, .color-tone-red .menu li.active .text {
    color: #E51A66;
}

.color-tone-red .dialog-box .dialog .course-list .list-box .item-title {
    color: #FFAFBF;
}

.color-tone-red .dialog-box .dialog .course-list .list-box .item-count:not(.complete) {
    background-color: #FFAFBF;
}

.color-tone-red .dialog-box .dialog .course-list .list-box .item-count.complete:before {
    background-color: #E51A66;
}

.color-tone-red .dialog-box .dialog .course-list .list-box .item-li.active:before, .color-tone-red .dialog-box .dialog .course-list .list-box .item-li.active:after {
    background-color: #E51A66;
}

.color-tone-red .dialog-box .dialog .section-cont .list-box .item:hover {
    background-color: #FFEBEF;
    border-color: #FF6180;
}

    .color-tone-red .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #FF6180;
    }

    .color-tone-red .dialog-box .dialog .section-cont .list-box .item:hover .title {
        color: #E51A66;
    }

    .color-tone-red .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

    .color-tone-red .dialog-box .dialog .section-cont .list-box .item:hover:before {
        background-color: #E51A66;
    }

.color-tone-red .dialog-box .dialog .section-cont .list-box .item.active {
    background-color: #FFAFBF;
    border-color: #ffffff;
}

    .color-tone-red .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-red .dialog-box .dialog .section-cont .list-box .item.active .title {
        color: #E51A66;
    }

    .color-tone-red .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-red .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #FF6180;
}

.color-tone-red.btn, .color-tone-red .btn {
    background-color: #FF6180;
}

    .color-tone-red.btn.white, .color-tone-red .btn.white {
        background-color: #ffffff;
        color: #FF6180;
    }

        .color-tone-red.btn.white:hover, .color-tone-red .btn.white:hover {
            background-color: #FFAFBF;
            color: #ffffff;
        }

            .color-tone-red.btn.white:hover .icon, .color-tone-red .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-red.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-red .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #FF6180;
        }

    .color-tone-red.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-red .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-red.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-red .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        background-color: #FFAFBF;
        text-shadow: 0 1px 2px #E51A66;
        box-shadow: 0 1px 2px #E51A66;
    }

    .color-tone-red.btn:active, .color-tone-red .btn:active {
        background-color: #FF6180;
        box-shadow: 0 0 0 1px #E51A66;
    }

    .color-tone-red.btn.disabled, .color-tone-red .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-red.btn.disabled:hover, .color-tone-red .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-red.table-cont:after, .color-tone-red .table-cont:after {
    border-color: #FF6180;
}

.color-tone-red.table-cont .tb-header, .color-tone-red .table-cont .tb-header {
    background-color: #FFEBEF;
    color: #FF6180;
}

.color-tone-red.table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd), .color-tone-red .table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd) {
    background-color: #FFEBEF;
}

.color-tone-red.table-cont .tb-table .tb-tr .tb-th, .color-tone-red .table-cont .tb-table .tb-tr .tb-th {
    color: #FF6180;
    border-color: #FF6180;
}

@media screen and (max-width: 1600px) {
    .color-tone-red.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-red .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        background-color: #FFEBEF;
        border-color: #FFAFBF33;
    }

        .color-tone-red.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-red .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: #FFAFBF99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-red.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-red .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        background-color: #FFEBEF;
        border-color: #FFAFBF33;
    }

        .color-tone-red.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-red .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: #FFAFBF99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-red.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-red .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        background-color: #FFEBEF;
        border-color: #FFAFBF33;
    }

        .color-tone-red.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-red .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: #FFAFBF99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-red.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-red .table-cont .tb-table.tb-rwd-xl .tb-tr {
        background-color: #FFEBEF;
        border-color: #FFAFBF33;
    }

        .color-tone-red.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-red .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: #FFAFBF99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-red.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-red .table-cont .tb-table.tb-rwd-lg .tb-tr {
        background-color: #FFEBEF;
        border-color: #FFAFBF33;
    }

        .color-tone-red.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-red .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: #FFAFBF99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-red.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-red .table-cont .tb-table.tb-rwd-md .tb-tr {
        background-color: #FFEBEF;
        border-color: #FFAFBF33;
    }

        .color-tone-red.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-red .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: #FFAFBF99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-red.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-red .table-cont .tb-table.tb-rwd-sm .tb-tr {
        background-color: #FFEBEF;
        border-color: #FFAFBF33;
    }

        .color-tone-red.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-red .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: #FFAFBF99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-red.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-red .table-cont .tb-table.tb-rwd-xs .tb-tr {
        background-color: #FFEBEF;
        border-color: #FFAFBF33;
    }

        .color-tone-red.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-red .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: #FFAFBF99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-red.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-red .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        background-color: #FFEBEF;
        border-color: #FFAFBF33;
    }

        .color-tone-red.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-red .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: #FFAFBF99;
        }
}

.color-tone-red.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-red.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-red .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-red .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #FF6180;
}

.color-tone-red .title:not([class^=color-]):not([class*=" color-"]) {
    color: #FF6180;
}

.color-tone-red .text-link {
    color: #E51A66;
}

    .color-tone-red .text-link:hover {
        color: #FF6180;
    }

.color-tone-red input:not([disabled]) {
    border-color: #FFAFBF;
    outline-color: #FF6180;
}

    .color-tone-red input:not([disabled])[type=date]::-webkit-datetime-edit-text {
        color: #FFAFBF;
    }

    .color-tone-red input:not([disabled])[type=checkbox] {
        border-color: #FF6180;
    }

        .color-tone-red input:not([disabled])[type=checkbox]:checked {
            background-color: #FF6180;
        }

    .color-tone-red input:not([disabled])[type=radio] {
        background-color: #FFEBEF;
        border-width: 2px;
        border-color: #E51A66;
    }

        .color-tone-red input:not([disabled])[type=radio]:checked {
            background-color: #FFEBEF;
            border-color: #FF6180;
        }

            .color-tone-red input:not([disabled])[type=radio]:checked + .input-label {
                color: #FF6180;
            }

            .color-tone-red input:not([disabled])[type=radio]:checked:after {
                background-color: #FF6180;
            }

    .color-tone-red input:not([disabled]):focus {
        border-color: #E51A66;
        outline: 2px solid #FF618099;
    }

        .color-tone-red input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #FF6180;
        }

        .color-tone-red input:not([disabled]):focus + .icon {
            background-color: #E51A66;
        }

.color-tone-red.form-cont .input-cont .input-label, .color-tone-red .form-cont .input-cont .input-label {
    color: #FF6180;
}

.color-tone-red.form-cont .select-cont:before, .color-tone-red .form-cont .select-cont:before {
    background-color: #FF6180;
}

.color-tone-red.form-cont .radio-cont:hover .input-label, .color-tone-red .form-cont .radio-cont:hover .input-label {
    color: #FF6180;
}

.color-tone-red.note, .color-tone-red .note {
    color: #FF6180;
}

.icon.color-red {
    background-color: #FF6180;
}

.icon.color-red-dark {
    background-color: #E51A66;
}

.icon.color-red-light {
    background-color: #FFAFBF;
}

.icon.color-red-thin {
    background-color: #FFEBEF;
}

.bg-red:not(.btn-gear):not(.icon) {
    background-color: #FF6180;
}

.bg-red .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-red.cont {
    background-color: #FF6180;
}

    .bg-red .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-red.cont:before {
        background-color: #FF6180;
    }

.bg-red-dark:not(.btn-gear):not(.icon) {
    background-color: #E51A66;
}

.bg-red-dark .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-red-dark.cont {
    background-color: #E51A66;
}

    .bg-red-dark .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-red-dark.cont:before {
        background-color: #E51A66;
    }

.bg-red-light:not(.btn-gear):not(.icon) {
    background-color: #FFAFBF;
}

.bg-red-light .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-red-light.cont:before {
    background-color: #FFAFBF;
}

.bg-red-thin:not(.btn-gear):not(.icon) {
    background-color: #FFEBEF;
}

.bg-red-thin .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-red-thin.cont:before {
    background-color: #FFEBEF;
}

.bg-red-blur:not(.btn-gear) {
    background-color: #FF618099;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-red-dark-blur:not(.btn-gear) {
    background-color: #E51A6699;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-red-light-blur:not(.btn-gear) {
    background-color: #FFAFBF99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-red-thin-blur:not(.btn-gear) {
    background-color: #FFEBEF99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-black-thin, .mark-black-light, .mark-black-dark, .mark-black, .mark-yellow-thin, .mark-yellow-light, .mark-yellow-dark, .mark-yellow, .mark-pink-thin, .mark-pink-light, .mark-pink-dark, .mark-pink, .mark-gray-thin, .mark-gray-light, .mark-gray-dark, .mark-gray, .mark-red-thin, .mark-red-light, .mark-red-dark, .mark-red, .mark-primary, .mark-primary-dark, .mark-primary-light, .mark-primary-thin, .mark-green, .mark-green-dark, .mark-green-light, .mark-green-thin, .mark-purple, .mark-purple-dark, .mark-purple-light, .mark-purple-thin, .mark-blue, .mark-blue-dark, .mark-blue-light, .mark-blue-thin, .mark-orange, .mark-orange-dark, .mark-orange-light, .mark-orange-thin {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-red {
    background-color: #FF6180;
}

.mark-red-dark {
    background-color: #E51A66;
}

.mark-red-light {
    background-color: #FFAFBF;
}

.mark-red-thin {
    background-color: #FFEBEF;
}

.color-red:not(.icon) {
    color: #FF6180;
}

.color-red-dark:not(.icon) {
    color: #E51A66;
}

.color-red-light:not(.icon) {
    color: #FFAFBF;
}

.color-red-thin:not(.icon) {
    color: #FFEBEF;
}

.color-tone-gray ::-webkit-scrollbar-track {
    background-color: #F3F4F633;
}

.color-tone-gray ::-webkit-scrollbar-thumb {
    background-color: #374151aa;
}

    .color-tone-gray ::-webkit-scrollbar-thumb:hover {
        background-color: #374151;
    }

.color-tone-graybutton[disabled], .color-tone-gray button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-graybutton[disabled]:hover, .color-tone-gray button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-gray.avatar, .color-tone-gray .avatar {
    background-color: #F3F4F6;
}

.color-tone-gray.menu li:hover, .color-tone-gray .menu li:hover {
    background-color: #F3F4F6;
}

    .color-tone-gray.menu li:hover .text, .color-tone-gray .menu li:hover .text {
        color: #111827;
    }

.color-tone-gray.menu li.active .text, .color-tone-gray .menu li.active .text {
    color: #111827;
}

.color-tone-gray .dialog-box .dialog .course-list .list-box .item-title {
    color: #9CA3AF;
}

.color-tone-gray .dialog-box .dialog .course-list .list-box .item-count:not(.complete) {
    background-color: #9CA3AF;
}

.color-tone-gray .dialog-box .dialog .course-list .list-box .item-count.complete:before {
    background-color: #111827;
}

.color-tone-gray .dialog-box .dialog .course-list .list-box .item-li.active:before, .color-tone-gray .dialog-box .dialog .course-list .list-box .item-li.active:after {
    background-color: #111827;
}

.color-tone-gray .dialog-box .dialog .section-cont .list-box .item:hover {
    background-color: #F3F4F6;
    border-color: #374151;
}

    .color-tone-gray .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #374151;
    }

    .color-tone-gray .dialog-box .dialog .section-cont .list-box .item:hover .title {
        color: #111827;
    }

    .color-tone-gray .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

    .color-tone-gray .dialog-box .dialog .section-cont .list-box .item:hover:before {
        background-color: #111827;
    }

.color-tone-gray .dialog-box .dialog .section-cont .list-box .item.active {
    background-color: #9CA3AF;
    border-color: #ffffff;
}

    .color-tone-gray .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-gray .dialog-box .dialog .section-cont .list-box .item.active .title {
        color: #111827;
    }

    .color-tone-gray .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-gray .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #374151;
}

.color-tone-gray.btn, .color-tone-gray .btn {
    background-color: #374151;
}

    .color-tone-gray.btn.white, .color-tone-gray .btn.white {
        background-color: #ffffff;
        color: #374151;
    }

        .color-tone-gray.btn.white:hover, .color-tone-gray .btn.white:hover {
            background-color: #9CA3AF;
            color: #ffffff;
        }

            .color-tone-gray.btn.white:hover .icon, .color-tone-gray .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-gray.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-gray .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #374151;
        }

    .color-tone-gray.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-gray .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-gray.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-gray .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        background-color: #9CA3AF;
        text-shadow: 0 1px 2px #111827;
        box-shadow: 0 1px 2px #111827;
    }

    .color-tone-gray.btn:active, .color-tone-gray .btn:active {
        background-color: #374151;
        box-shadow: 0 0 0 1px #111827;
    }

    .color-tone-gray.btn.disabled, .color-tone-gray .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-gray.btn.disabled:hover, .color-tone-gray .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-gray.table-cont:after, .color-tone-gray .table-cont:after {
    border-color: #374151;
}

.color-tone-gray.table-cont .tb-header, .color-tone-gray .table-cont .tb-header {
    background-color: #F3F4F6;
    color: #374151;
}

.color-tone-gray.table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd), .color-tone-gray .table-cont .tb-table .tb-tr:has(.tb-cell):nth-of-type(odd) {
    background-color: #F3F4F6;
}

.color-tone-gray.table-cont .tb-table .tb-tr .tb-th, .color-tone-gray .table-cont .tb-table .tb-tr .tb-th {
    color: #374151;
    border-color: #374151;
}

@media screen and (max-width: 1600px) {
    .color-tone-gray.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-gray .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        background-color: #F3F4F6;
        border-color: #9CA3AF33;
    }

        .color-tone-gray.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-gray .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: #9CA3AF99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-gray.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-gray .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        background-color: #F3F4F6;
        border-color: #9CA3AF33;
    }

        .color-tone-gray.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-gray .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: #9CA3AF99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-gray.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-gray .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        background-color: #F3F4F6;
        border-color: #9CA3AF33;
    }

        .color-tone-gray.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-gray .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: #9CA3AF99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-gray.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-gray .table-cont .tb-table.tb-rwd-xl .tb-tr {
        background-color: #F3F4F6;
        border-color: #9CA3AF33;
    }

        .color-tone-gray.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-gray .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: #9CA3AF99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-gray.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-gray .table-cont .tb-table.tb-rwd-lg .tb-tr {
        background-color: #F3F4F6;
        border-color: #9CA3AF33;
    }

        .color-tone-gray.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-gray .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: #9CA3AF99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-gray.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-gray .table-cont .tb-table.tb-rwd-md .tb-tr {
        background-color: #F3F4F6;
        border-color: #9CA3AF33;
    }

        .color-tone-gray.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-gray .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: #9CA3AF99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-gray.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-gray .table-cont .tb-table.tb-rwd-sm .tb-tr {
        background-color: #F3F4F6;
        border-color: #9CA3AF33;
    }

        .color-tone-gray.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-gray .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: #9CA3AF99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-gray.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-gray .table-cont .tb-table.tb-rwd-xs .tb-tr {
        background-color: #F3F4F6;
        border-color: #9CA3AF33;
    }

        .color-tone-gray.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-gray .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: #9CA3AF99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-gray.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-gray .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        background-color: #F3F4F6;
        border-color: #9CA3AF33;
    }

        .color-tone-gray.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-gray .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: #9CA3AF99;
        }
}

.color-tone-gray.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-gray.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-gray .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-gray .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #374151;
}

.color-tone-gray .title:not([class^=color-]):not([class*=" color-"]) {
    color: #374151;
}

.color-tone-gray .text-link {
    color: #111827;
}

    .color-tone-gray .text-link:hover {
        color: #374151;
    }

.color-tone-gray input:not([disabled]) {
    border-color: #9CA3AF;
    outline-color: #374151;
}

    .color-tone-gray input:not([disabled])[type=date]::-webkit-datetime-edit-text {
        color: #9CA3AF;
    }

    .color-tone-gray input:not([disabled])[type=checkbox] {
        border-color: #374151;
    }

        .color-tone-gray input:not([disabled])[type=checkbox]:checked {
            background-color: #374151;
        }

    .color-tone-gray input:not([disabled])[type=radio] {
        background-color: #F3F4F6;
        border-width: 2px;
        border-color: #111827;
    }

        .color-tone-gray input:not([disabled])[type=radio]:checked {
            background-color: #F3F4F6;
            border-color: #374151;
        }

            .color-tone-gray input:not([disabled])[type=radio]:checked + .input-label {
                color: #374151;
            }

            .color-tone-gray input:not([disabled])[type=radio]:checked:after {
                background-color: #374151;
            }

    .color-tone-gray input:not([disabled]):focus {
        border-color: #111827;
        outline: 2px solid #37415199;
    }

        .color-tone-gray input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #374151;
        }

        .color-tone-gray input:not([disabled]):focus + .icon {
            background-color: #111827;
        }

.color-tone-gray.form-cont .input-cont .input-label, .color-tone-gray .form-cont .input-cont .input-label {
    color: #374151;
}

.color-tone-gray.form-cont .select-cont:before, .color-tone-gray .form-cont .select-cont:before {
    background-color: #374151;
}

.color-tone-gray.form-cont .radio-cont:hover .input-label, .color-tone-gray .form-cont .radio-cont:hover .input-label {
    color: #374151;
}

.color-tone-gray.note, .color-tone-gray .note {
    color: #374151;
}

.icon.color-gray {
    background-color: #374151;
}

.icon.color-gray-dark {
    background-color: #111827;
}

.icon.color-gray-light {
    background-color: #9CA3AF;
}

.icon.color-gray-thin {
    background-color: #F3F4F6;
}

.bg-gray:not(.btn-gear):not(.icon) {
    background-color: #374151;
}

.bg-gray .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-gray.cont {
    background-color: #374151;
}

    .bg-gray .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-gray.cont:before {
        background-color: #374151;
    }

.bg-gray-dark:not(.btn-gear):not(.icon) {
    background-color: #111827;
}

.bg-gray-dark .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-gray-dark.cont {
    background-color: #111827;
}

    .bg-gray-dark .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-gray-dark.cont:before {
        background-color: #111827;
    }

.bg-gray-light:not(.btn-gear):not(.icon) {
    background-color: #9CA3AF;
}

.bg-gray-light .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-gray-light.cont:before {
    background-color: #9CA3AF;
}

.bg-gray-thin:not(.btn-gear):not(.icon) {
    background-color: #F3F4F6;
}

.bg-gray-thin .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-gray-thin.cont:before {
    background-color: #F3F4F6;
}

.bg-gray-blur:not(.btn-gear) {
    background-color: #37415199;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-gray-dark-blur:not(.btn-gear) {
    background-color: #11182799;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-gray-light-blur:not(.btn-gear) {
    background-color: #9CA3AF99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-gray-thin-blur:not(.btn-gear) {
    background-color: #F3F4F699;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-black-thin, .mark-black-light, .mark-black-dark, .mark-black, .mark-yellow-thin, .mark-yellow-light, .mark-yellow-dark, .mark-yellow, .mark-pink-thin, .mark-pink-light, .mark-pink-dark, .mark-pink, .mark-gray-thin, .mark-gray-light, .mark-gray-dark, .mark-gray, .mark-primary, .mark-primary-dark, .mark-primary-light, .mark-primary-thin, .mark-green, .mark-green-dark, .mark-green-light, .mark-green-thin, .mark-purple, .mark-purple-dark, .mark-purple-light, .mark-purple-thin, .mark-blue, .mark-blue-dark, .mark-blue-light, .mark-blue-thin, .mark-orange, .mark-orange-dark, .mark-orange-light, .mark-orange-thin, .mark-red, .mark-red-dark, .mark-red-light, .mark-red-thin {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-gray {
    background-color: #374151;
}

.mark-gray-dark {
    background-color: #111827;
}

.mark-gray-light {
    background-color: #9CA3AF;
}

.mark-gray-thin {
    background-color: #F3F4F6;
}

.color-gray:not(.icon) {
    color: #374151;
}

.color-gray-dark:not(.icon) {
    color: #111827;
}

.color-gray-light:not(.icon) {
    color: #9CA3AF;
}

.color-gray-thin:not(.icon) {
    color: #F3F4F6;
}

.color-tone-pink ::-webkit-scrollbar-track {
    background-color: 33;
}

.color-tone-pink ::-webkit-scrollbar-thumb {
    background-color: #E470DBaa;
}

    .color-tone-pink ::-webkit-scrollbar-thumb:hover {
        background-color: #E470DB;
    }

.color-tone-pinkbutton[disabled], .color-tone-pink button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-pinkbutton[disabled]:hover, .color-tone-pink button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-pink .dialog-box .dialog .section-cont .list-box .item:hover {
    border-color: #E470DB;
}

    .color-tone-pink .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #E470DB;
    }

    .color-tone-pink .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

.color-tone-pink .dialog-box .dialog .section-cont .list-box .item.active {
    border-color: #ffffff;
}

    .color-tone-pink .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-pink .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-pink .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #E470DB;
}

.color-tone-pink.btn, .color-tone-pink .btn {
    background-color: #E470DB;
}

    .color-tone-pink.btn.white, .color-tone-pink .btn.white {
        background-color: #ffffff;
        color: #E470DB;
    }

        .color-tone-pink.btn.white:hover, .color-tone-pink .btn.white:hover {
            color: #ffffff;
        }

            .color-tone-pink.btn.white:hover .icon, .color-tone-pink .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-pink.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-pink .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #E470DB;
        }

    .color-tone-pink.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-pink .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-pink.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-pink .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        text-shadow: 0 1px 2px;
        box-shadow: 0 1px 2px;
    }

    .color-tone-pink.btn:active, .color-tone-pink .btn:active {
        background-color: #E470DB;
        box-shadow: 0 0 0 1px;
    }

    .color-tone-pink.btn.disabled, .color-tone-pink .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-pink.btn.disabled:hover, .color-tone-pink .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-pink.table-cont:after, .color-tone-pink .table-cont:after {
    border-color: #E470DB;
}

.color-tone-pink.table-cont .tb-header, .color-tone-pink .table-cont .tb-header {
    color: #E470DB;
}

.color-tone-pink.table-cont .tb-table .tb-tr .tb-th, .color-tone-pink .table-cont .tb-table .tb-tr .tb-th {
    color: #E470DB;
    border-color: #E470DB;
}

@media screen and (max-width: 1600px) {
    .color-tone-pink.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-pink .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        border-color: 33;
    }

        .color-tone-pink.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-pink .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-pink.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-pink .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        border-color: 33;
    }

        .color-tone-pink.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-pink .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-pink.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-pink .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        border-color: 33;
    }

        .color-tone-pink.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-pink .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-pink.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-pink .table-cont .tb-table.tb-rwd-xl .tb-tr {
        border-color: 33;
    }

        .color-tone-pink.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-pink .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-pink.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-pink .table-cont .tb-table.tb-rwd-lg .tb-tr {
        border-color: 33;
    }

        .color-tone-pink.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-pink .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-pink.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-pink .table-cont .tb-table.tb-rwd-md .tb-tr {
        border-color: 33;
    }

        .color-tone-pink.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-pink .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-pink.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-pink .table-cont .tb-table.tb-rwd-sm .tb-tr {
        border-color: 33;
    }

        .color-tone-pink.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-pink .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-pink.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-pink .table-cont .tb-table.tb-rwd-xs .tb-tr {
        border-color: 33;
    }

        .color-tone-pink.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-pink .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-pink.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-pink .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        border-color: 33;
    }

        .color-tone-pink.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-pink .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: 99;
        }
}

.color-tone-pink.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-pink.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-pink .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-pink .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #E470DB;
}

.color-tone-pink .title:not([class^=color-]):not([class*=" color-"]) {
    color: #E470DB;
}

.color-tone-pink .text-link:hover {
    color: #E470DB;
}

.color-tone-pink input:not([disabled]) {
    outline-color: #E470DB;
}

    .color-tone-pink input:not([disabled])[type=checkbox] {
        border-color: #E470DB;
    }

        .color-tone-pink input:not([disabled])[type=checkbox]:checked {
            background-color: #E470DB;
        }

    .color-tone-pink input:not([disabled])[type=radio] {
        border-width: 2px;
    }

        .color-tone-pink input:not([disabled])[type=radio]:checked {
            border-color: #E470DB;
        }

            .color-tone-pink input:not([disabled])[type=radio]:checked + .input-label {
                color: #E470DB;
            }

            .color-tone-pink input:not([disabled])[type=radio]:checked:after {
                background-color: #E470DB;
            }

    .color-tone-pink input:not([disabled]):focus {
        outline: 2px solid #E470DB99;
    }

        .color-tone-pink input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #E470DB;
        }

.color-tone-pink.form-cont .input-cont .input-label, .color-tone-pink .form-cont .input-cont .input-label {
    color: #E470DB;
}

.color-tone-pink.form-cont .select-cont:before, .color-tone-pink .form-cont .select-cont:before {
    background-color: #E470DB;
}

.color-tone-pink.form-cont .radio-cont:hover .input-label, .color-tone-pink .form-cont .radio-cont:hover .input-label {
    color: #E470DB;
}

.color-tone-pink.note, .color-tone-pink .note {
    color: #E470DB;
}

.icon.color-pink {
    background-color: #E470DB;
}

.bg-pink:not(.btn-gear):not(.icon) {
    background-color: #E470DB;
}

.bg-pink .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-pink.cont {
    background-color: #E470DB;
}

    .bg-pink .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-pink.cont:before {
        background-color: #E470DB;
    }

.bg-pink-blur:not(.btn-gear) {
    background-color: #E470DB99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-pink-dark-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-pink-light-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-pink-thin-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-black-thin, .mark-black-light, .mark-black-dark, .mark-black, .mark-yellow-thin, .mark-yellow-light, .mark-yellow-dark, .mark-yellow, .mark-pink-thin, .mark-pink-light, .mark-pink-dark, .mark-pink, .mark-primary, .mark-primary-dark, .mark-primary-light, .mark-primary-thin, .mark-green, .mark-green-dark, .mark-green-light, .mark-green-thin, .mark-purple, .mark-purple-dark, .mark-purple-light, .mark-purple-thin, .mark-blue, .mark-blue-dark, .mark-blue-light, .mark-blue-thin, .mark-orange, .mark-orange-dark, .mark-orange-light, .mark-orange-thin, .mark-red, .mark-red-dark, .mark-red-light, .mark-red-thin, .mark-gray, .mark-gray-dark, .mark-gray-light, .mark-gray-thin {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-pink {
    background-color: #E470DB;
}

.color-pink:not(.icon) {
    color: #E470DB;
}

.color-tone-yellow ::-webkit-scrollbar-track {
    background-color: 33;
}

.color-tone-yellow ::-webkit-scrollbar-thumb {
    background-color: #FFFF81aa;
}

    .color-tone-yellow ::-webkit-scrollbar-thumb:hover {
        background-color: #FFFF81;
    }

.color-tone-yellowbutton[disabled], .color-tone-yellow button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-yellowbutton[disabled]:hover, .color-tone-yellow button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-yellow .dialog-box .dialog .section-cont .list-box .item:hover {
    border-color: #FFFF81;
}

    .color-tone-yellow .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #FFFF81;
    }

    .color-tone-yellow .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

.color-tone-yellow .dialog-box .dialog .section-cont .list-box .item.active {
    border-color: #ffffff;
}

    .color-tone-yellow .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-yellow .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-yellow .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #FFFF81;
}

.color-tone-yellow.btn, .color-tone-yellow .btn {
    background-color: #FFFF81;
}

    .color-tone-yellow.btn.white, .color-tone-yellow .btn.white {
        background-color: #ffffff;
        color: #FFFF81;
    }

        .color-tone-yellow.btn.white:hover, .color-tone-yellow .btn.white:hover {
            color: #ffffff;
        }

            .color-tone-yellow.btn.white:hover .icon, .color-tone-yellow .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-yellow.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-yellow .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #FFFF81;
        }

    .color-tone-yellow.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-yellow .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-yellow.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-yellow .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        text-shadow: 0 1px 2px;
        box-shadow: 0 1px 2px;
    }

    .color-tone-yellow.btn:active, .color-tone-yellow .btn:active {
        background-color: #FFFF81;
        box-shadow: 0 0 0 1px;
    }

    .color-tone-yellow.btn.disabled, .color-tone-yellow .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-yellow.btn.disabled:hover, .color-tone-yellow .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-yellow.table-cont:after, .color-tone-yellow .table-cont:after {
    border-color: #FFFF81;
}

.color-tone-yellow.table-cont .tb-header, .color-tone-yellow .table-cont .tb-header {
    color: #FFFF81;
}

.color-tone-yellow.table-cont .tb-table .tb-tr .tb-th, .color-tone-yellow .table-cont .tb-table .tb-tr .tb-th {
    color: #FFFF81;
    border-color: #FFFF81;
}

@media screen and (max-width: 1600px) {
    .color-tone-yellow.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-yellow .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        border-color: 33;
    }

        .color-tone-yellow.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-yellow .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-yellow.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-yellow .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        border-color: 33;
    }

        .color-tone-yellow.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-yellow .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-yellow.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-yellow .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        border-color: 33;
    }

        .color-tone-yellow.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-yellow .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-yellow.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-yellow .table-cont .tb-table.tb-rwd-xl .tb-tr {
        border-color: 33;
    }

        .color-tone-yellow.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-yellow .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-yellow.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-yellow .table-cont .tb-table.tb-rwd-lg .tb-tr {
        border-color: 33;
    }

        .color-tone-yellow.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-yellow .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-yellow.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-yellow .table-cont .tb-table.tb-rwd-md .tb-tr {
        border-color: 33;
    }

        .color-tone-yellow.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-yellow .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-yellow.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-yellow .table-cont .tb-table.tb-rwd-sm .tb-tr {
        border-color: 33;
    }

        .color-tone-yellow.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-yellow .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-yellow.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-yellow .table-cont .tb-table.tb-rwd-xs .tb-tr {
        border-color: 33;
    }

        .color-tone-yellow.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-yellow .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-yellow.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-yellow .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        border-color: 33;
    }

        .color-tone-yellow.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-yellow .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: 99;
        }
}

.color-tone-yellow.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-yellow.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-yellow .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-yellow .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #FFFF81;
}

.color-tone-yellow .title:not([class^=color-]):not([class*=" color-"]) {
    color: #FFFF81;
}

.color-tone-yellow .text-link:hover {
    color: #FFFF81;
}

.color-tone-yellow input:not([disabled]) {
    outline-color: #FFFF81;
}

    .color-tone-yellow input:not([disabled])[type=checkbox] {
        border-color: #FFFF81;
    }

        .color-tone-yellow input:not([disabled])[type=checkbox]:checked {
            background-color: #FFFF81;
        }

    .color-tone-yellow input:not([disabled])[type=radio] {
        border-width: 2px;
    }

        .color-tone-yellow input:not([disabled])[type=radio]:checked {
            border-color: #FFFF81;
        }

            .color-tone-yellow input:not([disabled])[type=radio]:checked + .input-label {
                color: #FFFF81;
            }

            .color-tone-yellow input:not([disabled])[type=radio]:checked:after {
                background-color: #FFFF81;
            }

    .color-tone-yellow input:not([disabled]):focus {
        outline: 2px solid #FFFF8199;
    }

        .color-tone-yellow input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #FFFF81;
        }

.color-tone-yellow.form-cont .input-cont .input-label, .color-tone-yellow .form-cont .input-cont .input-label {
    color: #FFFF81;
}

.color-tone-yellow.form-cont .select-cont:before, .color-tone-yellow .form-cont .select-cont:before {
    background-color: #FFFF81;
}

.color-tone-yellow.form-cont .radio-cont:hover .input-label, .color-tone-yellow .form-cont .radio-cont:hover .input-label {
    color: #FFFF81;
}

.color-tone-yellow.note, .color-tone-yellow .note {
    color: #FFFF81;
}

.icon.color-yellow {
    background-color: #FFFF81;
}

.bg-yellow:not(.btn-gear):not(.icon) {
    background-color: #FFFF81;
}

.bg-yellow .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-yellow.cont {
    background-color: #FFFF81;
}

    .bg-yellow .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-yellow.cont:before {
        background-color: #FFFF81;
    }

.bg-yellow-blur:not(.btn-gear) {
    background-color: #FFFF8199;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-yellow-dark-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-yellow-light-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-yellow-thin-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-black-thin, .mark-black-light, .mark-black-dark, .mark-black, .mark-yellow-thin, .mark-yellow-light, .mark-yellow-dark, .mark-yellow, .mark-primary, .mark-primary-dark, .mark-primary-light, .mark-primary-thin, .mark-green, .mark-green-dark, .mark-green-light, .mark-green-thin, .mark-purple, .mark-purple-dark, .mark-purple-light, .mark-purple-thin, .mark-blue, .mark-blue-dark, .mark-blue-light, .mark-blue-thin, .mark-orange, .mark-orange-dark, .mark-orange-light, .mark-orange-thin, .mark-red, .mark-red-dark, .mark-red-light, .mark-red-thin, .mark-gray, .mark-gray-dark, .mark-gray-light, .mark-gray-thin, .mark-pink, .mark-pink-dark, .mark-pink-light, .mark-pink-thin {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-yellow {
    background-color: #FFFF81;
}

.color-yellow:not(.icon) {
    color: #FFFF81;
}

.color-tone-black ::-webkit-scrollbar-track {
    background-color: 33;
}

.color-tone-black ::-webkit-scrollbar-thumb {
    background-color: #000000aa;
}

    .color-tone-black ::-webkit-scrollbar-thumb:hover {
        background-color: #000000;
    }

.color-tone-blackbutton[disabled], .color-tone-black button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-blackbutton[disabled]:hover, .color-tone-black button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-black .dialog-box .dialog .section-cont .list-box .item:hover {
    border-color: #000000;
}

    .color-tone-black .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #000000;
    }

    .color-tone-black .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

.color-tone-black .dialog-box .dialog .section-cont .list-box .item.active {
    border-color: #ffffff;
}

    .color-tone-black .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-black .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-black .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #000000;
}

.color-tone-black.btn, .color-tone-black .btn {
    background-color: #000000;
}

    .color-tone-black.btn.white, .color-tone-black .btn.white {
        background-color: #ffffff;
        color: #000000;
    }

        .color-tone-black.btn.white:hover, .color-tone-black .btn.white:hover {
            color: #ffffff;
        }

            .color-tone-black.btn.white:hover .icon, .color-tone-black .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-black.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-black .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #000000;
        }

    .color-tone-black.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-black .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-black.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-black .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        text-shadow: 0 1px 2px;
        box-shadow: 0 1px 2px;
    }

    .color-tone-black.btn:active, .color-tone-black .btn:active {
        background-color: #000000;
        box-shadow: 0 0 0 1px;
    }

    .color-tone-black.btn.disabled, .color-tone-black .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-black.btn.disabled:hover, .color-tone-black .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-black.table-cont:after, .color-tone-black .table-cont:after {
    border-color: #000000;
}

.color-tone-black.table-cont .tb-header, .color-tone-black .table-cont .tb-header {
    color: #000000;
}

.color-tone-black.table-cont .tb-table .tb-tr .tb-th, .color-tone-black .table-cont .tb-table .tb-tr .tb-th {
    color: #000000;
    border-color: #000000;
}

@media screen and (max-width: 1600px) {
    .color-tone-black.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-black .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        border-color: 33;
    }

        .color-tone-black.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-black .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-black.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-black .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        border-color: 33;
    }

        .color-tone-black.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-black .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-black.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-black .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        border-color: 33;
    }

        .color-tone-black.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-black .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-black.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-black .table-cont .tb-table.tb-rwd-xl .tb-tr {
        border-color: 33;
    }

        .color-tone-black.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-black .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-black.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-black .table-cont .tb-table.tb-rwd-lg .tb-tr {
        border-color: 33;
    }

        .color-tone-black.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-black .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-black.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-black .table-cont .tb-table.tb-rwd-md .tb-tr {
        border-color: 33;
    }

        .color-tone-black.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-black .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-black.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-black .table-cont .tb-table.tb-rwd-sm .tb-tr {
        border-color: 33;
    }

        .color-tone-black.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-black .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-black.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-black .table-cont .tb-table.tb-rwd-xs .tb-tr {
        border-color: 33;
    }

        .color-tone-black.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-black .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-black.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-black .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        border-color: 33;
    }

        .color-tone-black.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-black .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: 99;
        }
}

.color-tone-black.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-black.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-black .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-black .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #000000;
}

.color-tone-black .title:not([class^=color-]):not([class*=" color-"]) {
    color: #000000;
}

.color-tone-black .text-link:hover {
    color: #000000;
}

.color-tone-black input:not([disabled]) {
    outline-color: #000000;
}

    .color-tone-black input:not([disabled])[type=checkbox] {
        border-color: #000000;
    }

        .color-tone-black input:not([disabled])[type=checkbox]:checked {
            background-color: #000000;
        }

    .color-tone-black input:not([disabled])[type=radio] {
        border-width: 2px;
    }

        .color-tone-black input:not([disabled])[type=radio]:checked {
            border-color: #000000;
        }

            .color-tone-black input:not([disabled])[type=radio]:checked + .input-label {
                color: #000000;
            }

            .color-tone-black input:not([disabled])[type=radio]:checked:after {
                background-color: #000000;
            }

    .color-tone-black input:not([disabled]):focus {
        outline: 2px solid #00000099;
    }

        .color-tone-black input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #000000;
        }

.color-tone-black.form-cont .input-cont .input-label, .color-tone-black .form-cont .input-cont .input-label {
    color: #000000;
}

.color-tone-black.form-cont .select-cont:before, .color-tone-black .form-cont .select-cont:before {
    background-color: #000000;
}

.color-tone-black.form-cont .radio-cont:hover .input-label, .color-tone-black .form-cont .radio-cont:hover .input-label {
    color: #000000;
}

.color-tone-black.note, .color-tone-black .note {
    color: #000000;
}

.icon.color-black {
    background-color: #000000;
}

.bg-black:not(.btn-gear):not(.icon) {
    background-color: #000000;
}

.bg-black .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-black.cont {
    background-color: #000000;
}

    .bg-black .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-black.cont:before {
        background-color: #000000;
    }

.bg-black-blur:not(.btn-gear) {
    background-color: #00000099;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-black-dark-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-black-light-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-black-thin-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-black-thin, .mark-black-light, .mark-black-dark, .mark-black, .mark-primary, .mark-primary-dark, .mark-primary-light, .mark-primary-thin, .mark-green, .mark-green-dark, .mark-green-light, .mark-green-thin, .mark-purple, .mark-purple-dark, .mark-purple-light, .mark-purple-thin, .mark-blue, .mark-blue-dark, .mark-blue-light, .mark-blue-thin, .mark-orange, .mark-orange-dark, .mark-orange-light, .mark-orange-thin, .mark-red, .mark-red-dark, .mark-red-light, .mark-red-thin, .mark-gray, .mark-gray-dark, .mark-gray-light, .mark-gray-thin, .mark-pink, .mark-pink-dark, .mark-pink-light, .mark-pink-thin, .mark-yellow, .mark-yellow-dark, .mark-yellow-light, .mark-yellow-thin {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-black {
    background-color: #000000;
}

.color-black:not(.icon) {
    color: #000000;
}

.color-tone-white ::-webkit-scrollbar-track {
    background-color: 33;
}

.color-tone-white ::-webkit-scrollbar-thumb {
    background-color: #ffffffaa;
}

    .color-tone-white ::-webkit-scrollbar-thumb:hover {
        background-color: #ffffff;
    }

.color-tone-whitebutton[disabled], .color-tone-white button[disabled] {
    background-color: #9CA3AF;
}

    .color-tone-whitebutton[disabled]:hover, .color-tone-white button[disabled]:hover {
        background-color: #9CA3AFaa;
        text-shadow: 0 0 2px #6B7280;
        box-shadow: 0 1px 1px #9CA3AF;
    }

.color-tone-white .dialog-box .dialog .section-cont .list-box .item:hover {
    border-color: #ffffff;
}

    .color-tone-white .dialog-box .dialog .section-cont .list-box .item:hover .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-white .dialog-box .dialog .section-cont .list-box .item:hover .states {
        background-color: #ffffff;
    }

.color-tone-white .dialog-box .dialog .section-cont .list-box .item.active {
    border-color: #ffffff;
}

    .color-tone-white .dialog-box .dialog .section-cont .list-box .item.active .progress-pie {
        border-color: #ffffff;
    }

    .color-tone-white .dialog-box .dialog .section-cont .list-box .item.active:before {
        background-color: #ffffff;
    }

.color-tone-white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
    background-color: #ffffff;
}

.color-tone-white.btn, .color-tone-white .btn {
    background-color: #ffffff;
}

    .color-tone-white.btn.white, .color-tone-white .btn.white {
        background-color: #ffffff;
        color: #ffffff;
    }

        .color-tone-white.btn.white:hover, .color-tone-white .btn.white:hover {
            color: #ffffff;
        }

            .color-tone-white.btn.white:hover .icon, .color-tone-white .btn.white:hover .icon {
                background-color: #ffffff !important;
            }

        .color-tone-white.btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-white .btn.white .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
            background-color: #ffffff;
        }

    .color-tone-white.btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]), .color-tone-white .btn .icon:not([class^=bg-]):not([class*=" bg-"]):not([class^=color-]):not([class*=" color-"]) {
        background-color: #ffffff;
    }

    .color-tone-white.btn:not([class^=bg-]):not([class*=" bg-"]):hover, .color-tone-white .btn:not([class^=bg-]):not([class*=" bg-"]):hover {
        color: #ffffff;
        text-shadow: 0 1px 2px;
        box-shadow: 0 1px 2px;
    }

    .color-tone-white.btn:active, .color-tone-white .btn:active {
        background-color: #ffffff;
        box-shadow: 0 0 0 1px;
    }

    .color-tone-white.btn.disabled, .color-tone-white .btn.disabled {
        color: #ffffff;
        background-color: #9CA3AF;
    }

        .color-tone-white.btn.disabled:hover, .color-tone-white .btn.disabled:hover {
            background-color: #9CA3AF;
            text-shadow: 0 1px 0 #6B7280;
            box-shadow: 0 1px 2px #6B7280;
        }

.color-tone-white.table-cont:after, .color-tone-white .table-cont:after {
    border-color: #ffffff;
}

.color-tone-white.table-cont .tb-header, .color-tone-white .table-cont .tb-header {
    color: #ffffff;
}

.color-tone-white.table-cont .tb-table .tb-tr .tb-th, .color-tone-white .table-cont .tb-table .tb-tr .tb-th {
    color: #ffffff;
    border-color: #ffffff;
}

@media screen and (max-width: 1600px) {
    .color-tone-white.table-cont .tb-table.tb-rwd-4xl .tb-tr, .color-tone-white .table-cont .tb-table.tb-rwd-4xl .tb-tr {
        border-color: 33;
    }

        .color-tone-white.table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell, .color-tone-white .table-cont .tb-table.tb-rwd-4xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1440px) {
    .color-tone-white.table-cont .tb-table.tb-rwd-3xl .tb-tr, .color-tone-white .table-cont .tb-table.tb-rwd-3xl .tb-tr {
        border-color: 33;
    }

        .color-tone-white.table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell, .color-tone-white .table-cont .tb-table.tb-rwd-3xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1280px) {
    .color-tone-white.table-cont .tb-table.tb-rwd-2xl .tb-tr, .color-tone-white .table-cont .tb-table.tb-rwd-2xl .tb-tr {
        border-color: 33;
    }

        .color-tone-white.table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell, .color-tone-white .table-cont .tb-table.tb-rwd-2xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 1024px) {
    .color-tone-white.table-cont .tb-table.tb-rwd-xl .tb-tr, .color-tone-white .table-cont .tb-table.tb-rwd-xl .tb-tr {
        border-color: 33;
    }

        .color-tone-white.table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell, .color-tone-white .table-cont .tb-table.tb-rwd-xl .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 960px) {
    .color-tone-white.table-cont .tb-table.tb-rwd-lg .tb-tr, .color-tone-white .table-cont .tb-table.tb-rwd-lg .tb-tr {
        border-color: 33;
    }

        .color-tone-white.table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell, .color-tone-white .table-cont .tb-table.tb-rwd-lg .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 800px) {
    .color-tone-white.table-cont .tb-table.tb-rwd-md .tb-tr, .color-tone-white .table-cont .tb-table.tb-rwd-md .tb-tr {
        border-color: 33;
    }

        .color-tone-white.table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell, .color-tone-white .table-cont .tb-table.tb-rwd-md .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 640px) {
    .color-tone-white.table-cont .tb-table.tb-rwd-sm .tb-tr, .color-tone-white .table-cont .tb-table.tb-rwd-sm .tb-tr {
        border-color: 33;
    }

        .color-tone-white.table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell, .color-tone-white .table-cont .tb-table.tb-rwd-sm .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 480px) {
    .color-tone-white.table-cont .tb-table.tb-rwd-xs .tb-tr, .color-tone-white .table-cont .tb-table.tb-rwd-xs .tb-tr {
        border-color: 33;
    }

        .color-tone-white.table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell, .color-tone-white .table-cont .tb-table.tb-rwd-xs .tb-tr .tb-cell {
            border-color: 99;
        }
}

@media screen and (max-width: 320px) {
    .color-tone-white.table-cont .tb-table.tb-rwd-2xs .tb-tr, .color-tone-white .table-cont .tb-table.tb-rwd-2xs .tb-tr {
        border-color: 33;
    }

        .color-tone-white.table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell, .color-tone-white .table-cont .tb-table.tb-rwd-2xs .tb-tr .tb-cell {
            border-color: 99;
        }
}

.color-tone-white.table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-white.table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before, .color-tone-white .table-cont [class^=tb-rwd-] .tb-tr .tb-cell:before, .color-tone-white .table-cont [class*=" tb-rwd-"] .tb-tr .tb-cell:before {
    color: #ffffff;
}

.color-tone-white .title:not([class^=color-]):not([class*=" color-"]) {
    color: #ffffff;
}

.color-tone-white .text-link:hover {
    color: #ffffff;
}

.color-tone-white input:not([disabled]) {
    outline-color: #ffffff;
}

    .color-tone-white input:not([disabled])[type=checkbox] {
        border-color: #ffffff;
    }

        .color-tone-white input:not([disabled])[type=checkbox]:checked {
            background-color: #ffffff;
        }

    .color-tone-white input:not([disabled])[type=radio] {
        border-width: 2px;
    }

        .color-tone-white input:not([disabled])[type=radio]:checked {
            border-color: #ffffff;
        }

            .color-tone-white input:not([disabled])[type=radio]:checked + .input-label {
                color: #ffffff;
            }

            .color-tone-white input:not([disabled])[type=radio]:checked:after {
                background-color: #ffffff;
            }

    .color-tone-white input:not([disabled]):focus {
        outline: 2px solid #ffffff99;
    }

        .color-tone-white input:not([disabled]):focus[type=date]::-webkit-datetime-edit-text {
            color: #ffffff;
        }

.color-tone-white.form-cont .input-cont .input-label, .color-tone-white .form-cont .input-cont .input-label {
    color: #ffffff;
}

.color-tone-white.form-cont .select-cont:before, .color-tone-white .form-cont .select-cont:before {
    background-color: #ffffff;
}

.color-tone-white.form-cont .radio-cont:hover .input-label, .color-tone-white .form-cont .radio-cont:hover .input-label {
    color: #ffffff;
}

.color-tone-white.note, .color-tone-white .note {
    color: #ffffff;
}

.icon.color-white {
    background-color: #ffffff;
}

.bg-white:not(.btn-gear):not(.icon) {
    background-color: #ffffff;
}

.bg-white .cont:not([class^=bg-]):not([class*=" bg-"]), .bg-white.cont {
    background-color: #ffffff;
}

    .bg-white .cont:not([class^=bg-]):not([class*=" bg-"]):before, .bg-white.cont:before {
        background-color: #ffffff;
    }

.bg-white-blur:not(.btn-gear) {
    background-color: #ffffff99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-white-dark-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-white-light-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bg-white-thin-blur:not(.btn-gear) {
    background-color: 99;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mark-white-thin, .mark-white-light, .mark-white-dark, .mark-white, .mark-primary, .mark-primary-dark, .mark-primary-light, .mark-primary-thin, .mark-green, .mark-green-dark, .mark-green-light, .mark-green-thin, .mark-purple, .mark-purple-dark, .mark-purple-light, .mark-purple-thin, .mark-blue, .mark-blue-dark, .mark-blue-light, .mark-blue-thin, .mark-orange, .mark-orange-dark, .mark-orange-light, .mark-orange-thin, .mark-red, .mark-red-dark, .mark-red-light, .mark-red-thin, .mark-gray, .mark-gray-dark, .mark-gray-light, .mark-gray-thin, .mark-pink, .mark-pink-dark, .mark-pink-light, .mark-pink-thin, .mark-yellow, .mark-yellow-dark, .mark-yellow-light, .mark-yellow-thin, .mark-black, .mark-black-dark, .mark-black-light, .mark-black-thin {
    margin: 0 0.2em;
    padding: 0 1em;
    color: #ffffff;
    border-radius: 2em;
}

    .mark-white-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-white-light:not([class^=fs-]):not([class*=" fs-"]), .mark-white-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-white:not([class^=fs-]):not([class*=" fs-"]), .mark-primary:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-light:not([class^=fs-]):not([class*=" fs-"]), .mark-primary-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-green:not([class^=fs-]):not([class*=" fs-"]), .mark-green-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-green-light:not([class^=fs-]):not([class*=" fs-"]), .mark-green-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-purple:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-light:not([class^=fs-]):not([class*=" fs-"]), .mark-purple-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-blue:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-light:not([class^=fs-]):not([class*=" fs-"]), .mark-blue-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-orange:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-light:not([class^=fs-]):not([class*=" fs-"]), .mark-orange-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-red:not([class^=fs-]):not([class*=" fs-"]), .mark-red-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-red-light:not([class^=fs-]):not([class*=" fs-"]), .mark-red-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-gray:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-light:not([class^=fs-]):not([class*=" fs-"]), .mark-gray-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-pink:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-light:not([class^=fs-]):not([class*=" fs-"]), .mark-pink-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-light:not([class^=fs-]):not([class*=" fs-"]), .mark-yellow-thin:not([class^=fs-]):not([class*=" fs-"]), .mark-black:not([class^=fs-]):not([class*=" fs-"]), .mark-black-dark:not([class^=fs-]):not([class*=" fs-"]), .mark-black-light:not([class^=fs-]):not([class*=" fs-"]), .mark-black-thin:not([class^=fs-]):not([class*=" fs-"]) {
        font-size: 1em;
    }

.mark-white {
    background-color: #ffffff;
}

.color-white:not(.icon) {
    color: #ffffff;
}

@media screen and (max-width: 1280px) {
    body:has(.dialog-box .dialog.active), body:has(.header #nav_chk:checked), .coding-cont:has(.dialog-box .dialog.active), .coding-cont:has(.header #nav_chk:checked) {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}

/* coding style */
.coding-cont {
    background-color: #D9F0F3;
    width: 100%;
    min-height: 100vh;
    font-size: 16px;
}

@media screen and (max-width: 1280px) {
    .coding-cont {
        font-size: 15px;
    }
}

@media screen and (max-width: 640px) {
    .coding-cont {
        font-size: 14px;
    }
}

@media screen and (max-width: 320px) {
    .coding-cont {
        font-size: 12.6px;
    }
}

.coding-cont .deck-box {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #D9F0F3;
    width: 100%;
    height: 100vh;
}

.coding-cont .logo {
    width: 80vw;
    max-width: 240px;
}

@media screen and (max-width: 800px) {
    .coding-cont .logo {
        max-width: 180px;
    }
}

.coding-cont .icon-logo {
    display: inline-block;
    width: 2em;
    height: 2em;
}

.coding-cont .cont-box .cont .logo {
    position: absolute;
    left: 50%;
    bottom: -2em;
    transform: translateX(-50%);
    z-index: 10;
}

.coding-cont .cont-box .cont:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.coding-cont .cont-box .cont:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.coding-cont .cont-box .cont.register-cont .btn-gear {
    position: absolute;
    top: -2.5em;
    right: 2.5em;
}

@media screen and (max-width: 960px) {
    .coding-cont .cont-box .cont.register-cont .btn-gear {
        right: 2em;
    }
}

@media screen and (max-width: 640px) {
    .coding-cont .cont-box .cont.register-cont .btn-gear {
        right: 1.5em;
    }
}

.coding-cont .cont-box.course-box .course-cont {
    width: 100%;
}

@media screen and (max-width: 1440px) {
    .coding-cont .cont-box.course-box {
        max-width: 73em;
    }
}

@media screen and (max-width: 1080px) {
    .coding-cont .cont-box.course-box {
        max-width: 47em;
    }
}

@media screen and (max-width: 740px) {
    .coding-cont .cont-box.course-box .course-cont {
        flex-flow: column wrap;
        align-items: center;
        max-width: 320px;
        padding: 0;
    }
}

.coding-cont .card-box {
    width: calc(25% - 0.9375em);
    max-width: 360px;
    min-width: 320px;
    margin: 1em 0;
}

@media screen and (max-width: 1440px) {
    .coding-cont .card-box {
        width: calc(33.3333333333% - 0.8333333333em);
    }
}

@media screen and (max-width: 1024px) {
    .coding-cont .card-box {
        width: calc(50% - 0.625em);
    }
}

@media screen and (max-width: 640px) {
    .coding-cont .card-box {
        width: 100%;
    }
}

.coding-cont .card-box .cont .icon-logo {
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    background-color: #ffffff;
    width: 3.5em;
    height: 3.5em;
    border: 2px solid #ffffff;
    border-radius: 50%;
    z-index: 10;
}

.coding-cont .card-box .cont .tag {
    position: absolute;
    top: -1em;
    right: 1.75em;
}

.coding-cont .card-box .cont-states .btn-gear {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6.5em;
    height: 6.5em;
    transform: translate(-50%, -50%);
    z-index: 10;
}

    .coding-cont .card-box .cont-states .btn-gear .progress-pie {
        width: 76%;
        height: 76%;
    }

        .coding-cont .card-box .cont-states .btn-gear .progress-pie .pie-value span {
            font-size: 12px;
            transform: scale(0.75);
        }

        .coding-cont .card-box .cont-states .btn-gear .progress-pie .btn-play {
            position: absolute;
            top: 40%;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

            .coding-cont .card-box .cont-states .btn-gear .progress-pie .btn-play .icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

    .coding-cont .card-box .cont-states .btn-gear:hover .pie-value {
        top: 10%;
        opacity: 0;
    }

    .coding-cont .card-box .cont-states .btn-gear:hover .btn-play {
        top: 0;
        opacity: 1;
    }

.coding-cont .card-box .cont-states .list-box {
    display: flex;
    flex-flow: row wrap;
}

    .coding-cont .card-box .cont-states .list-box .list {
        display: flex;
        gap: 0.25em;
        flex-flow: row nowrap;
        align-items: center;
        background-color: #ffffff;
        width: 50%;
        margin: 0.25em 0;
        padding: 0.25em 0.5em;
        font-weight: 700;
        cursor: pointer;
    }

        .coding-cont .card-box .cont-states .list-box .list span {
            display: inline-block;
            color: #2C6691;
            font-size: 0.875em;
            font-weight: 700;
            letter-spacing: -0.05em;
        }

            .coding-cont .card-box .cont-states .list-box .list span:is([data-test], [data-value], [data-total]) {
                min-width: 1em;
                padding: 0;
                color: #70CF77;
                text-align: center;
                transform-origin: top center;
            }

                .coding-cont .card-box .cont-states .list-box .list span:is([data-test], [data-value], [data-total]):before {
                    display: inline-block;
                    content: "";
                    font-weight: 700;
                }

            .coding-cont .card-box .cont-states .list-box .list span[data-test] {
                color: #FF6180;
            }

                .coding-cont .card-box .cont-states .list-box .list span[data-test]:before {
                    content: attr(data-test);
                }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="60"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="61"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="62"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="63"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="64"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="65"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="66"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="67"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="68"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="69"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="70"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="71"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="72"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="73"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="74"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="75"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="76"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="77"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="78"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="79"] {
                color: #FFBF00;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="80"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="81"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="82"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="83"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="84"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="85"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="86"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="87"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="88"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="89"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="90"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="91"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="92"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="93"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="94"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="95"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="96"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="97"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="98"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="99"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-test="100"] {
                color: #70CF77;
            }

            .coding-cont .card-box .cont-states .list-box .list span[data-value] {
                color: #FF6180;
            }

                .coding-cont .card-box .cont-states .list-box .list span[data-value]:before {
                    content: attr(data-value);
                }

            .coding-cont .card-box .cont-states .list-box .list span[data-total] {
                color: #2C6691;
            }

                .coding-cont .card-box .cont-states .list-box .list span[data-total]:before {
                    display: inline-block;
                    content: "/ " attr(data-total);
                }

        .coding-cont .card-box .cont-states .list-box .list .icon {
            width: 1.5em;
            height: 1.5em;
        }

        .coding-cont .card-box .cont-states .list-box .list:nth-child(odd) {
            justify-content: flex-start;
            border-radius: 20px 0 0 20px;
            padding: 0.25em 3em 0.25em 0.75em;
        }

        .coding-cont .card-box .cont-states .list-box .list:nth-child(even) {
            justify-content: flex-end;
            border-radius: 0 20px 20px 0;
            padding: 0.25em 0.75em 0.25em 3em;
        }

        .coding-cont .card-box .cont-states .list-box .list:hover {
            background-color: #E7F7E8;
        }

            .coding-cont .card-box .cont-states .list-box .list:hover:nth-child(even) {
                gap: 0;
            }

                .coding-cont .card-box .cont-states .list-box .list:hover:nth-child(even) .icon {
                    margin-right: 0.125em;
                }

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="60"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="61"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="62"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="63"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="64"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="65"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="66"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="67"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="68"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="69"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="70"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="71"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="72"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="73"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="74"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="75"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="76"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="77"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="78"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="79"]) .list-box .states-complate span[data-value] {
    color: #FFBF00;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="80"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="81"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="82"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="83"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="84"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="85"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="86"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="87"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="88"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="89"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="90"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="91"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="92"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="93"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="94"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="95"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="96"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="97"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="98"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="99"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box .cont-states:has(.btn-gear .progress-pie .pie-value[data-value="100"]) .list-box .states-complate span[data-value] {
    color: #70CF77;
}

.coding-cont .card-box:hover {
    margin: 0.5em 0 1.5em;
    box-shadow: 0 4px 8px #00000033;
}

.coding-cont .coupon-maker .panel .btn-gear[data-dialog=serial-rule] {
    font-size: 14px;
}

@media screen and (max-width: 800px) {
    .coding-cont .coupon-maker .panel .btn-gear[data-dialog=serial-rule] {
        font-size: 12px;
    }
}

@media screen and (max-width: 640px) {
    .coding-cont .coupon-maker {
        flex-flow: column wrap;
        align-items: center;
    }

        .coding-cont .coupon-maker .form-cont {
            width: 100%;
        }

        .coding-cont .coupon-maker .panel {
            margin: 0.5em 0 0;
            align-items: stretch;
        }

            .coding-cont .coupon-maker .panel .btn {
                margin: 0;
            }

            .coding-cont .coupon-maker .panel .btn-gear[data-dialog=serial-rule] {
                background-color: #ffffff;
                width: auto;
                min-width: 8em;
                height: auto;
                padding: 0.5em 1em;
                font-size: 16px;
                border-radius: 0.25em 0.5em;
            }

                .coding-cont .coupon-maker .panel .btn-gear[data-dialog=serial-rule] .text {
                    width: auto;
                    margin: 0;
                    transform: none;
                }

                .coding-cont .coupon-maker .panel .btn-gear[data-dialog=serial-rule]:before {
                    content: none;
                }
}

.coding-cont .coupon-list {
    min-height: calc(100vh - 38em);
}

@media screen and (max-width: 1280px) {
    .coding-cont .coupon-list {
        min-height: 32em;
    }
}

.coding-cont .coupon-list .explain {
    font-size: 1.25em;
}

    .coding-cont .coupon-list .explain span {
        display: inline-block;
    }

    .coding-cont .coupon-list .explain .make-serial {
        display: none;
    }

    .coding-cont .coupon-list .explain.active span {
        display: none;
    }

    .coding-cont .coupon-list .explain.active .make-serial {
        display: inline-block;
    }

.coding-cont .coupon-list:has(.coupon-table.active) .explain {
    display: none;
}

.coding-cont .coupon-list .coupon-table {
    display: none;
}

    .coding-cont .coupon-list .coupon-table.active {
        display: block;
    }

@media screen and (max-width: 1280px) {
    .coding-cont .coupon-list .coupon-table .tb-body {
        max-height: unset !important;
    }
}

@media screen and (max-width: 800px) {
    .coding-cont .coupon-list .coupon-table .tb-rwd-md .tb-tr {
        flex-wrap: nowrap;
    }

    .coding-cont .coupon-list .coupon-table .tb-rwd-md .tb-cell:before {
        content: none;
    }

    .coding-cont .coupon-list .coupon-table .tb-rwd-md .tb-cell[data-title=NO] {
        flex: 1 0 auto;
        justify-content: center;
        align-items: center;
        width: 2.5em;
        padding: 0;
        color: #B453C8;
        font-size: 1.5em;
        font-weight: 700;
        text-align: center;
    }

    .coding-cont .coupon-list .coupon-table .tb-rwd-md .tb-cell[data-title=序號] {
        flex: 0 1 auto;
        flex-flow: column wrap;
        align-items: flex-start;
    }

    .coding-cont .coupon-list .coupon-table .tb-rwd-md .tb-cell[data-title=複製] {
        flex: 1 0 auto;
    }
}

@media screen and (max-width: 800px) {
    .coding-cont .record-table .tb-rwd-md .tb-tr {
        gap: 0;
        padding: 2em 0.75em 0.25em 0.75em;
    }

    .coding-cont .record-table .tb-rwd-md .tb-cell {
        text-align: left !important;
        border-bottom: 1px solid #A3E38E;
        box-shadow: 0 1px 0 #ffffff;
    }

        .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=NO], .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=學習歷程] {
            border: unset;
            box-shadow: none;
        }

            .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=NO]:before, .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=學習歷程]:before {
                content: none;
            }

        .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=NO] {
            position: absolute;
            top: 0;
            left: 0.75em;
            justify-content: center;
            align-items: center;
            padding: 0;
            color: #B453C8;
            font-size: 1.5em;
            font-weight: 700;
            text-align: center;
        }

        .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=姓名], .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=學生年級] {
            order: 1;
            width: 50%;
        }

        .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=學校名稱], .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=電子郵件], .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=最近登入時間], .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=學習歷程] {
            width: 100%;
        }

            .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=學校名稱]:before, .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=電子郵件]:before, .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=最近登入時間]:before, .coding-cont .record-table .tb-rwd-md .tb-cell[data-title=學習歷程]:before {
                min-width: 7em;
                text-align: left;
            }
}

.coding-cont .asterisk {
    position: absolute;
    top: -1em;
    left: 0.5em;
    z-index: 50;
}

.coding-cont:has(.dialog-box .dialog.active) {
    position: fixed;
}

/* customize icon */
.btn-gear {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 5em;
    height: 5em;
    cursor: pointer;
}

    .btn-gear:not([class^=fs-]):not([class*=" fs"]) {
        font-size: 16px;
    }

@media screen and (max-width: 960px) {
    .btn-gear:not([class^=fs-]):not([class*=" fs"]) {
        font-size: 15px;
    }
}

@media screen and (max-width: 640px) {
    .btn-gear:not([class^=fs-]):not([class*=" fs"]) {
        font-size: 14px;
    }
}

.btn-gear:before {
    background-color: #70CF77;
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    min-width: 1em;
    height: 100%;
    min-height: 1em;
    mask-image: url(../images/icons/gear-eight.svg);
    -webkit-mask-image: url(../images/icons/gear-eight.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.btn-gear .text {
    display: inline-block;
    width: 2em;
    color: #ffffff;
    line-height: 1.2em;
    transform: rotate(15deg);
}

.btn-gear .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #ffffff !important;
    transform: translate(-50%, -50%);
}

.btn-gear.color-primary-w:before {
    background-color: #ffffff;
}

.btn-gear.color-primary-w .text {
    color: #70CF77;
}

.btn-gear.color-primary-w .icon {
    background-color: #70CF77 !important;
}

.btn-gear.color-primary-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #3E9D45);
}

    .btn-gear.color-primary-w:hover:before {
        background-color: #E7F7E8;
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-primary .text {
    color: #ffffff;
}

.btn-gear.color-primary:before {
    background-color: #70CF77;
}

.btn-gear.color-primary:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #3E9D45);
}

    .btn-gear.color-primary:hover:before {
        background-color: #A3E38E;
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-primary:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px #3E9D45;
    }

.btn-gear.color-primary:active {
    transform: scale(0.9);
}

    .btn-gear.color-primary:active:before {
        background-color: #70CF77;
    }

.btn-gear.color-green-w:before {
    background-color: #ffffff;
}

.btn-gear.color-green-w .text {
    color: #70CF77;
}

.btn-gear.color-green-w .icon {
    background-color: #70CF77 !important;
}

.btn-gear.color-green-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #3E9D45);
}

    .btn-gear.color-green-w:hover:before {
        background-color: #E7F7E8;
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-green .text {
    color: #ffffff;
}

.btn-gear.color-green:before {
    background-color: #70CF77;
}

.btn-gear.color-green:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #3E9D45);
}

    .btn-gear.color-green:hover:before {
        background-color: #A3E38E;
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-green:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px #3E9D45;
    }

.btn-gear.color-green:active {
    transform: scale(0.9);
}

    .btn-gear.color-green:active:before {
        background-color: #70CF77;
    }

.btn-gear.color-purple-w:before {
    background-color: #ffffff;
}

.btn-gear.color-purple-w .text {
    color: #B453C8;
}

.btn-gear.color-purple-w .icon {
    background-color: #B453C8 !important;
}

.btn-gear.color-purple-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #9B29AD);
}

    .btn-gear.color-purple-w:hover:before {
        background-color: #FEF6FF;
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-purple .text {
    color: #ffffff;
}

.btn-gear.color-purple:before {
    background-color: #B453C8;
}

.btn-gear.color-purple:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #9B29AD);
}

    .btn-gear.color-purple:hover:before {
        background-color: #F0A4FF;
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-purple:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px #9B29AD;
    }

.btn-gear.color-purple:active {
    transform: scale(0.9);
}

    .btn-gear.color-purple:active:before {
        background-color: #B453C8;
    }

.btn-gear.color-blue-w:before {
    background-color: #ffffff;
}

.btn-gear.color-blue-w .text {
    color: #2C6691;
}

.btn-gear.color-blue-w .icon {
    background-color: #2C6691 !important;
}

.btn-gear.color-blue-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #214D6D);
}

    .btn-gear.color-blue-w:hover:before {
        background-color: #D9F0F3;
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-blue .text {
    color: #ffffff;
}

.btn-gear.color-blue:before {
    background-color: #2C6691;
}

.btn-gear.color-blue:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #214D6D);
}

    .btn-gear.color-blue:hover:before {
        background-color: #5388AF;
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-blue:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px #214D6D;
    }

.btn-gear.color-blue:active {
    transform: scale(0.9);
}

    .btn-gear.color-blue:active:before {
        background-color: #2C6691;
    }

.btn-gear.color-orange-w:before {
    background-color: #ffffff;
}

.btn-gear.color-orange-w .text {
    color: #FFBF00;
}

.btn-gear.color-orange-w .icon {
    background-color: #FFBF00 !important;
}

.btn-gear.color-orange-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #FF8F00);
}

    .btn-gear.color-orange-w:hover:before {
        background-color: #FFFCE6;
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-orange .text {
    color: #ffffff;
}

.btn-gear.color-orange:before {
    background-color: #FFBF00;
}

.btn-gear.color-orange:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #FF8F00);
}

    .btn-gear.color-orange:hover:before {
        background-color: #FFDF7F;
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-orange:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px #FF8F00;
    }

.btn-gear.color-orange:active {
    transform: scale(0.9);
}

    .btn-gear.color-orange:active:before {
        background-color: #FFBF00;
    }

.btn-gear.color-red-w:before {
    background-color: #ffffff;
}

.btn-gear.color-red-w .text {
    color: #FF6180;
}

.btn-gear.color-red-w .icon {
    background-color: #FF6180 !important;
}

.btn-gear.color-red-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #E51A66);
}

    .btn-gear.color-red-w:hover:before {
        background-color: #FFEBEF;
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-red .text {
    color: #ffffff;
}

.btn-gear.color-red:before {
    background-color: #FF6180;
}

.btn-gear.color-red:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #E51A66);
}

    .btn-gear.color-red:hover:before {
        background-color: #FFAFBF;
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-red:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px #E51A66;
    }

.btn-gear.color-red:active {
    transform: scale(0.9);
}

    .btn-gear.color-red:active:before {
        background-color: #FF6180;
    }

.btn-gear.color-gray-w:before {
    background-color: #ffffff;
}

.btn-gear.color-gray-w .text {
    color: #374151;
}

.btn-gear.color-gray-w .icon {
    background-color: #374151 !important;
}

.btn-gear.color-gray-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #111827);
}

    .btn-gear.color-gray-w:hover:before {
        background-color: #F3F4F6;
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-gray .text {
    color: #ffffff;
}

.btn-gear.color-gray:before {
    background-color: #374151;
}

.btn-gear.color-gray:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px #111827);
}

    .btn-gear.color-gray:hover:before {
        background-color: #9CA3AF;
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-gray:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px #111827;
    }

.btn-gear.color-gray:active {
    transform: scale(0.9);
}

    .btn-gear.color-gray:active:before {
        background-color: #374151;
    }

.btn-gear.color-pink-w:before {
    background-color: #ffffff;
}

.btn-gear.color-pink-w .text {
    color: #E470DB;
}

.btn-gear.color-pink-w .icon {
    background-color: #E470DB !important;
}

.btn-gear.color-pink-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px);
}

    .btn-gear.color-pink-w:hover:before {
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-pink .text {
    color: #ffffff;
}

.btn-gear.color-pink:before {
    background-color: #E470DB;
}

.btn-gear.color-pink:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px);
}

    .btn-gear.color-pink:hover:before {
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-pink:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px;
    }

.btn-gear.color-pink:active {
    transform: scale(0.9);
}

    .btn-gear.color-pink:active:before {
        background-color: #E470DB;
    }

.btn-gear.color-yellow-w:before {
    background-color: #ffffff;
}

.btn-gear.color-yellow-w .text {
    color: #FFFF81;
}

.btn-gear.color-yellow-w .icon {
    background-color: #FFFF81 !important;
}

.btn-gear.color-yellow-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px);
}

    .btn-gear.color-yellow-w:hover:before {
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-yellow .text {
    color: #ffffff;
}

.btn-gear.color-yellow:before {
    background-color: #FFFF81;
}

.btn-gear.color-yellow:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px);
}

    .btn-gear.color-yellow:hover:before {
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-yellow:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px;
    }

.btn-gear.color-yellow:active {
    transform: scale(0.9);
}

    .btn-gear.color-yellow:active:before {
        background-color: #FFFF81;
    }

.btn-gear.color-black-w:before {
    background-color: #ffffff;
}

.btn-gear.color-black-w .text {
    color: #000000;
}

.btn-gear.color-black-w .icon {
    background-color: #000000 !important;
}

.btn-gear.color-black-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px);
}

    .btn-gear.color-black-w:hover:before {
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-black .text {
    color: #ffffff;
}

.btn-gear.color-black:before {
    background-color: #000000;
}

.btn-gear.color-black:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px);
}

    .btn-gear.color-black:hover:before {
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-black:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px;
    }

.btn-gear.color-black:active {
    transform: scale(0.9);
}

    .btn-gear.color-black:active:before {
        background-color: #000000;
    }

.btn-gear.color-white-w:before {
    background-color: #ffffff;
}

.btn-gear.color-white-w .text {
    color: #ffffff;
}

.btn-gear.color-white-w .icon {
    background-color: #ffffff !important;
}

.btn-gear.color-white-w:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px);
}

    .btn-gear.color-white-w:hover:before {
        animation: gear-turn 1s linear infinite;
    }

.btn-gear.color-white .text {
    color: #ffffff;
}

.btn-gear.color-white:before {
    background-color: #ffffff;
}

.btn-gear.color-white:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 2px);
}

    .btn-gear.color-white:hover:before {
        animation: gear-turn 1s linear infinite;
    }

    .btn-gear.color-white:hover .text {
        color: #ffffff;
        text-shadow: 0 1px 2px;
    }

.btn-gear.color-white:active {
    transform: scale(0.9);
}

    .btn-gear.color-white:active:before {
        background-color: #ffffff;
    }

@keyframes gear-turn {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(0deg);
    }

    60% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(45deg);
    }
}

.dialog-course .video-box {
    width: 64vw;
    padding: 1em;
}

    .dialog-course .video-box .video-player {
        width: 100%;
        padding-bottom: 62.5%;
        background-color: #E7F7E8;
        background-image: url(../images/logo_coding_01.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 25%;
    }

.dialog-course .course-list .chapter-cont {
    gap: 0.5em;
}

@media screen and (max-width: 1280px) {
    .dialog-course .video-box {
        width: 63.5vw;
    }

    .dialog-course .course-list {
        width: 26vw;
    }

        .dialog-course .course-list .list-box {
            max-height: calc(45.5vw - 6em);
        }

        .dialog-course .course-list .chapter-cont .btn {
            justify-content: center;
            align-items: center;
            min-width: auto;
            font-size: 12px;
        }
}

@media screen and (max-width: 1024px) {
    .dialog-course .course-list .list-box {
        max-height: calc(47.5vw - 6em);
    }

    .dialog-course .course-list {
        font-size: 12px;
    }
}

@media screen and (max-width: 960px) {
    .dialog-course .btn-close.round {
        top: -1em;
        right: -3em;
        font-size: 12px;
    }

    .dialog-course .course-list .list-box {
        max-height: calc(48.5vw - 6.5em);
    }
}

@media screen and (max-width: 800px) {
    .dialog-course .video-box {
        width: 42vw;
    }

        .dialog-course .video-box .video-header .info {
            font-size: 12px;
        }

            .dialog-course .video-box .video-header .info .title {
                font-size: 1.5em;
            }

            .dialog-course .video-box .video-header .info .text {
                height: auto;
                -webkit-line-clamp: 1;
            }

    .dialog-course .course-list {
        width: 30vw;
    }

        .dialog-course .course-list .list-cont:before {
            left: 1.5em;
            bottom: calc(-0.5em + 1px);
            width: 2em;
            height: 0.5em;
        }

        .dialog-course .course-list .list-cont .list-box {
            max-height: 25vw;
        }

        .dialog-course .course-list .chapter-cont {
            padding: 0.5em;
        }
}

@media screen and (max-width: 960px) and (min-aspect-ratio: 16/9) {
    .dialog-course {
        font-size: 10px;
    }

        .dialog-course .video-box {
            width: 43.5vw;
        }

            .dialog-course .video-box .video-header .info {
                font-size: 12px;
            }

                .dialog-course .video-box .video-header .info .title {
                    font-size: 1.5em;
                }

                .dialog-course .video-box .video-header .info .text {
                    height: auto;
                    -webkit-line-clamp: 1;
                }

        .dialog-course .course-list {
            width: 32vw;
        }

            .dialog-course .course-list .list-cont:before {
                bottom: calc(-0.5em + 1px);
                width: 2em;
                height: 0.5em;
            }

            .dialog-course .course-list .list-cont .list-box {
                max-height: 25vw;
            }

            .dialog-course .course-list .chapter-cont {
                padding: 0.5em;
            }
}

.dialog-record .record-box {
    width: 6vw;
    min-width: 600px;
}

    .dialog-record .record-box .info-cont {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
    }

        .dialog-record .record-box .info-cont .student-info {
            display: flex;
            flex-flow: row nowrap;
            gap: 0.75em;
            justify-content: flex-start;
            align-items: center;
            color: #ffffff;
        }

            .dialog-record .record-box .info-cont .student-info .name {
                font-size: 1.25em;
                font-weight: 700;
            }

    .dialog-record .record-box .section-cont {
        flex: 1 1 auto;
        padding: 2em 0.25em 1em;
    }

        .dialog-record .record-box .section-cont .list-box {
            height: calc(40vw - 7.5em);
            padding: 0 1em;
            overflow-y: auto;
        }

.dialog-record .record-cont {
    display: flex;
    flex-flow: column wrap;
    gap: 0.5em;
}

.dialog-record .course-list .list-box {
    height: 48vw;
}

    .dialog-record .course-list .list-box .item, .dialog-record .course-list .list-box .item-title, .dialog-record .course-list .list-box .item-li {
        pointer-events: none;
    }

.dialog-record .course-list .list {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5em;
    justify-content: flex-end;
    align-items: baseline;
    font-weight: 700;
}

    .dialog-record .course-list .list span {
        min-width: 1em;
        color: #ffffff;
        text-align: center;
        transform-origin: top center;
    }

        .dialog-record .course-list .list span[data-test] {
            color: #FF6180;
        }

            .dialog-record .course-list .list span[data-test]:before {
                display: inline-block;
                content: attr(data-test);
                font-size: 1.5em;
                font-weight: 700;
            }

        .dialog-record .course-list .list span[data-test="60"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="61"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="62"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="63"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="64"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="65"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="66"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="67"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="68"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="69"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="70"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="71"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="72"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="73"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="74"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="75"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="76"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="77"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="78"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="79"] {
            color: #FFBF00;
        }

        .dialog-record .course-list .list span[data-test="80"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="81"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="82"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="83"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="84"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="85"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="86"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="87"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="88"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="89"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="90"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="91"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="92"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="93"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="94"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="95"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="96"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="97"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="98"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="99"] {
            color: #70CF77;
        }

        .dialog-record .course-list .list span[data-test="100"] {
            color: #70CF77;
        }

@media screen and (max-width: 1280px) {
    .dialog-record .record-box {
        width: 56vw;
        min-width: unset;
        font-size: 14px;
    }

    .dialog-record .course-list {
        width: 28vw;
    }

        .dialog-record .course-list .list-box {
            max-height: calc(48.5vw - 6.5em);
        }
}

@media screen and (max-width: 1024px) {
    .dialog-record .course-list {
        font-size: 12px;
    }
}

@media screen and (max-width: 960px) {
    .dialog-record .btn-close.round {
        top: -1em;
        right: -3em;
        font-size: 12px;
    }

    .dialog-record .course-list .list-box {
        padding: 0 0.5em;
    }
}

@media screen and (max-width: 800px) {
    .dialog-record .record-box {
        width: 54vw;
        font-size: 12px;
    }

        .dialog-record .record-box .info-cont:before {
            left: 1.5em;
            bottom: calc(-0.5em + 1px);
            width: 2em;
            height: 0.5em;
        }

        .dialog-record .record-box .section-cont {
            padding: 1em 0.25em;
        }

    .dialog-record .course-list {
        width: 30vw;
    }
}

@media screen and (max-width: 960px) and (min-aspect-ratio: 16/9) {
    .dialog-record {
        font-size: 10px;
    }

        .dialog-record .record-box {
            width: 54vw;
        }

            .dialog-record .record-box .info-cont {
                padding: 1em;
            }

                .dialog-record .record-box .info-cont:before {
                    left: 1.5em;
                    bottom: calc(-0.5em + 1px);
                    width: 2em;
                    height: 0.5em;
                }

            .dialog-record .record-box .section-cont {
                padding: 1em 0.25em;
            }

                .dialog-record .record-box .section-cont .list-box {
                    height: calc(30vw - 6.5em);
                }

                    .dialog-record .record-box .section-cont .list-box .item .item-info {
                        font-size: 8px;
                    }

        .dialog-record .course-list {
            width: 30vw;
        }

            .dialog-record .course-list .list-cont .list-box {
                max-height: 28vw;
            }
}

@media screen and (max-width: 800px) and (min-height: 801px), (max-aspect-ratio: 2/3) {
    .dialog-course.active, .dialog-record.active {
        display: none;
    }

        .dialog-course.active ~ .dialog-warn, .dialog-record.active ~ .dialog-warn {
            top: 0 !important;
            width: 100%;
            height: 100%;
            transition: 0s linear;
        }

            .dialog-course.active ~ .dialog-warn .text, .dialog-record.active ~ .dialog-warn .text {
                font-size: 1.25em;
                text-align: center;
            }

                .dialog-course.active ~ .dialog-warn .text span, .dialog-record.active ~ .dialog-warn .text span {
                    display: block;
                    margin: 0.25em;
                }

            .dialog-course.active ~ .dialog-warn .icon-rotate-device, .dialog-record.active ~ .dialog-warn .icon-rotate-device {
                background-color: #FF6180;
                font-size: 4em;
                margin: 1em;
                transform: scaleX(1) rotate(0deg);
                animation: rotate-device 3.2s linear infinite;
            }
}

.dialog-warn {
    transition: 0s linear;
}

/* header */
.header {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    min-height: 4.5em;
    box-shadow: 0 1px 4px #00000011;
    z-index: 1000;
}

    .header .logo-box {
        padding: 0.5em;
        z-index: 1000;
    }

        .header .logo-box a {
            position: absolute;
        }

            .header .logo-box a .logo {
                width: 20vw;
                max-width: 160px;
            }

    .header #nav_chk {
        position: absolute;
        display: none;
        visibility: hidden;
        z-index: -1000;
    }

        .header #nav_chk:checked ~ .menu-burger .line {
            opacity: 0;
            transition: 0.1s linear 0.1s;
        }

        .header #nav_chk:checked ~ .menu-burger:before, .header #nav_chk:checked ~ .menu-burger:after {
            top: 50%;
            transition: top 0.1s linear, transform 0.1s linear 0.1s;
        }

        .header #nav_chk:checked ~ .menu-burger:before {
            transform: rotate(45deg);
        }

        .header #nav_chk:checked ~ .menu-burger:after {
            transform: rotate(-45deg);
        }

    .header .menu-burger {
        position: fixed;
        top: 1.25em;
        right: 1em;
        display: none;
        width: 36px;
        height: 27px;
        cursor: pointer;
        transition: 0.2s ease-out;
        z-index: 250;
    }

@media screen and (max-width: 1280px) {
    .header .menu-burger {
        display: block;
    }
}

@media screen and (max-width: 800px) {
    .header .menu-burger {
        transform: scale(0.75);
    }
}

@media screen and (max-width: 480px) {
    .header .menu-burger {
        transform-origin: top;
    }
}

@media screen and (max-width: 320px) {
    .header .menu-burger {
        transform: scale(0.65);
    }
}

.header .menu-burger .line, .header .menu-burger:before, .header .menu-burger:after {
    position: absolute;
    content: "";
    display: block;
    background-color: #111827;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    transition: 0.2s linear, opacity 0.1s linear, top 0.1s linear 0.1s, transform 0.1s linear;
}

.header .menu-burger .line {
    top: 50%;
}

.header .menu-burger:before {
    top: 0%;
}

.header .menu-burger:after {
    top: 100%;
}

@media screen and (max-width: 1280px) {
    .header .logo-box {
        position: fixed;
        top: 0;
        left: 0;
    }

        .header .logo-box a .logo {
            max-width: 100px;
        }

    .header #nav_chk:checked ~ .nav-cont {
        right: 0;
        opacity: 1;
        transition: right 0s linear, opacity 0.4s linear;
    }

    .header .nav-cont {
        position: fixed;
        top: 0;
        right: 200vw;
        flex-flow: column-reverse;
        align-items: center;
        justify-content: center;
        background-color: #ffffffcc;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: right 0s linear 0.4s, opacity 0.4s linear;
    }

        .header .nav-cont .space-col {
            display: none;
        }

        .header .nav-cont :is(.menu, .infomation) {
            flex: 0 0 auto;
            flex-flow: column wrap;
            justify-content: flex-start;
        }

        .header .nav-cont .menu {
            gap: 1.5em;
            min-width: 10em;
            font-size: 20px;
        }

            .header .nav-cont .menu li {
                display: flex;
                justify-content: center;
                align-items: center;
                min-width: 12em;
                min-height: 4em;
                box-shadow: 0 4px 8px #00000022;
            }

        .header .nav-cont .infomation {
            margin-bottom: 1.25em;
            font-size: 24px;
        }

            .header .nav-cont .infomation .avatar {
                gap: 0.5em;
            }
}

/* footer */
.footer {
    position: sticky;
    top: 100vh;
    background-color: #ffffff;
    width: 100%;
    box-shadow: 0 -1px 4px #00000011;
    z-index: 950;
}

    .footer .cont .brand .logo {
        max-width: 179px;
    }

    .footer .cont .contact .label {
        letter-spacing: 0.05em;
        display: inline-block;
        width: 4em;
        margin: 0 1em 0 0;
        padding: 0 1em 0 0;
        text-align-last: justify;
        border-right: 1px solid #2C6691;
    }

.icon-test {
    width: 32px;
    height: 32px;
    color: #70CF77;
}

    .icon-test:before {
        display: block;
        content: "\e905";
        width: 100%;
        height: 100%;
    }

.Rectangle-1 {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

    .Rectangle-1 img {
        display: block;
        width: 60vw;
        max-width: 163px;
    }

@keyframes rotate-device {
    0% {
        background-color: #FF6180;
        transform: scaleX(0) rotate(0deg);
    }

    2% {
        transform: scaleX(1) rotate(0deg);
    }

    40% {
        transform: scaleX(1) rotate(0deg);
    }

    50% {
        background-color: #FF6180;
        transform: scaleX(1) rotate(90deg);
    }

    51% {
        background-color: #70CF77;
        transform: scaleX(1) rotate(90deg);
    }

    98% {
        transform: scaleX(1) rotate(90deg);
    }

    100% {
        background-color: #70CF77;
        transform: scaleX(0) rotate(90deg);
    }
}
/*# sourceMappingURL=style.css.map */