body {
    background-image: url() no-repeat;
    font-size: 1rem;
    font-family: 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
}

.QJ label,
#Select-Gua label,
.card-body label {
    cursor: pointer;
    text-indent: .25rem;
}

#Select-GJ .QJ>.row {
    max-height: 13rem;
    overflow-y: auto;
    overflow-x: hidden;
}

@keyframes changeBgUp {
    from {
        background-color: #fdf3d0;
    }
    to {
        background-color: rgb(248, 249, 250);
    }
}

@keyframes changeBgUp-GJ {
    from {
        background-color: #fdf3d0;
    }
    to {
        background-color: rgb(25, 135, 84);
    }
}

@keyframes changeBgUp-Gua {
    from {
        background-color: #fdf3d0;
    }
    to {
        background-color: rgb(220, 53, 69);
    }
}

.Empty {
    border-color: transparent;
    background-color: rgb(248, 249, 250);
    animation-name: changeBgUp;
    animation-duration: 2s;
}

.Empty-GJ {
    border-color: transparent;
    background-color: rgb(25, 135, 84);
    animation-name: changeBgUp-GJ;
    animation-duration: 2s;
}

.Empty-Gua {
    border-color: transparent;
    background-color: rgb(220, 53, 69);
    animation-name: changeBgUp-Gua;
    animation-duration: 2s;
}

.text-indent {
    text-indent: 2rem;
}

.img-header {
    text-align: right;
    position: relative;
    top: -1.25rem;
    padding-right: 1.75rem;
    font-weight: bolder;
    margin-top: -3rem;
    color: #557595;
    text-shadow: 1px 0 2px rgba(207, 198, 188, .7), 0 1px 2px rgba(207, 198, 188, .7), -1px 0 2px rgba(207, 198, 188, .7), 0 -1px 2px rgba(207, 198, 188, .7), .2rem .3rem .2rem rgba(207, 198, 188, .75);
}

.youtube {
    height: 140px;
    padding-top: 35px;
    padding-bottom: 35px;
}

.form-check .form-check-input {
    margin-left: -1.25em!important;
}

#Select-GJ .form-check-input:checked[type=checkbox]~label.form-check-label {
    color: #198754;
    font-weight: bold;
}

#Select-GJ input[type="checkbox"]:focus {
    border-color: #19875430;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 0 .25rem rgba(57, 129, 43, 0.33);
    outline: 0 none;
}

#Select-GJ .form-check-input:checked {
    border-color: #198754;
    background-color: #198754;
}

#Select-Gua .form-check-input:checked[type=checkbox]~label.form-check-label {
    color: #dc3545;
    font-weight: bold;
}

#Select-Gua input[type="checkbox"]:focus {
    border-color: #dc354545;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 0 .25rem rgba(239, 104, 147, 0.33);
    outline: 0 none;
}

#Select-Gua .form-check-input:checked {
    border-color: #dc3545;
    background-color: #dc3545;
}

div[id^="S-"] .lead {
    color: purple;
}

.list-group-flush>.list-group-item:last-child {
    border-bottom-width: 1px!important;
}

@media (min-width: 160px) and (max-width: 576px) {
    #inserBirth .card {
        width: 22rem;
    }
    #QM-List .lead {
        font-size: 100%;
    }
    .youtube {
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
    }
    div[id^="S-"] .lead {
        font-size: 105%;
    }
}