:root {
    --rg-base-color: #c999f9;
    --rg-base-color-hover: #f8f0ff;
    --rg-base-font-family: 'Noto Sans TC', sans-serif;
    --rg-base-font-weight: 400;
}

/* override DNN style */
a, a:visited {
    color: var(--bs-nav-link-color);
}

#dnn_dnnLOGO_imgLogo {
    width: 44px;
}

.TitleH2 {
    display: block;
    font-size: 24px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: var(--rg-base-color) 4px solid;
    font-family: var(--rg-base-font-family);
}

.Normal {
    font-size: 16px;
}

.dropdown-menu {
    left: auto !important;
    right: 0px;
}

.dropdown-item {
    font-weight: inherit;
}

/* override bootstrap style */
.form-control::placeholder {
    color: #bbb;
}

a.btn:visited {
    color: var(--bs-btn-color);
}

/* custom style */
body {
    font-family: var(--rg-base-font-family);
    font-weight: var(--rg-base-font-weight);
    overflow-y: scroll;
}

nav.navbar {
    border-bottom: var(--rg-base-color) 3px solid;
    background-color: #fff;
}

/*ul {
    list-style: initial;
}*/

#modalSignin .modal-dialog {
    margin: 0px;
}

#modalSignin .modal-content {
    border-color: var(--rg-base-color);
}

.rg-footer-rainbow img {
    width: 100%;
    height: auto;
}

footer {
    background: #2f2f34;
    color: #fff !important;
    font-size: 14px;
}

    footer a {
        color: #fff !important;
    }

    footer .social-media a {
        color: #fff;
    }

    footer .social-media .icon {
        text-align: center;
    }

.login-box {
    background-color: #f8f9fa;
    border-color: var(--rg-base-color);
}

.rg-notice-box {
    background: #eeeeee;
    padding: 10px;
    text-align: center;
    margin-top: 20px;
}

.rg-header {
    border-bottom: #212529 1px solid;
    font-size: 20px;
    margin-bottom: 15px;
    margin-top: 50px;
    padding-bottom: 5px;
}

.rg-content {
    color: #0e0e0f;
    font-weight: var(--rg-base-font-weight);
    text-align: justify;
}

.rg-regForm-step-containter {
}

.rg-regForm-step {
    width: 100px;
    margin: 20px;
    font-size: 14px;
    text-align: center;
}

    .rg-regForm-step .rg-regForm-step-inner {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #f4f4f4;
        margin: 0px auto 10px auto;
    }

        .rg-regForm-step .rg-regForm-step-inner div {
            width: 90%;
            height: 90%;
            border-radius: 50%;
            background-color: #fff;
            text-align: center;
            font-size: 24px;
            padding-top: 6px;
        }

.rg-regForm-step-selected .rg-regForm-step-inner {
    background-image: url('../img/rg-logo.png');
    background-position: center;
}

.rg-regForm-step-completed .rg-regForm-step-inner {
    background-image: url('../img/rg-step-completed.svg');
    background-position: center;
}

    .rg-regForm-step-completed .rg-regForm-step-inner div {
        display: none;
    }

.rg-buttongroup {
    text-align: center;
}

.rg-button {
    border-radius: 24px;
    min-width: 200px;
}

    .rg-button.btn-outline-primary {
        border-color: var(--rg-base-color);
        color: var(--rg-base-color);
    }

        .rg-button.btn-outline-primary:hover {
            background-color: var(--rg-base-color);
            color: #fff;
        }

.btn-check:checked + .btn {
    background-color: var(--rg-base-color);
}

.rg-regForm-header {
    margin: 10px 0px;
    font-weight: bold;
}

.rg-regForm-content {
}

.rg-reviewForm-header,
.rg-reviewForm-content {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px #ccc solid;
}

.rg-reviewForm-header {
    font-weight: bold;
}

.rg-reviewForm-content {
}

.rg-star {
    color: red;
}

.rg-explaination {
    margin-left: 10px;
    color: blue;
}

    .rg-explaination .bi {
        margin-right: 5px;
    }


.paymentDesc {
    font-weight: var(--rg-base-font-weight);
    border-left: 0.25rem var(--rg-base-color) solid;
    padding: 1.25rem;
    margin-top: 10px;
    background-color: var(--rg-base-color-hover);
}



/* Container styles */
.rg-footer-marquee-container {
    height: 60px;
    background-color: #def23e;
    overflow: hidden;
}

/* Inner container styles */
.marquee-inner {
    display: flex;
    white-space: nowrap;
    font-size: 30px;
    font-weight: 600;
    padding: 8px 0;
}

/* Text styles */
.marquee-text {
    display: flex;
    color: #5b31fc;
}

.marquee-text-item {
    padding: 0 30px;
}

/* Apply the animation to the text items */
.marquee-inner > div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Pause the animation when a user hovers over it */
.rg-footer-marquee-container:hover .marquee-inner > div {
    animation-play-state: paused;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}