#pp-value {
    color: #fff;
}

.card-body2 {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

.card {
    padding: 0px;
}

.card-title {
    color: rgb(255, 116, 116);
}

.form-check-input {
    background-color: #b39b9b;
    border: var(--bs-border-width) solid rgb(233, 70, 70);
}

.form-check-input:checked {
    background-color: rgb(255, 116, 116);
    border-color: rgb(233, 70, 70);
}

.form-control {
    color: #fff;
}

.wrapper {
    align-items: center;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

.hidden {
    display: none;
}

.basic-margin {
    margin: 1rem;
}

input[type=number] {
    text-align: center;
}

.mod {
    display:none;
}

.mod + label {
    background-image: url("https://taikopp.com/img/EZ.png");
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center; 
    height: 66px;
    width: 68px;
    display: inline-block;
    padding: 0;
    cursor: pointer;
    
    -webkit-transition: background-size 0.2s, -webkit-transform 0.2s;
    transition:         background-size 0.2s, transform 0.2s;
    -webkit-transition-timing-function: ease;
    transition-timing-function:         ease;
}

.mod:checked + label {
    background-size: 100%;
    -webkit-transform: rotate(5deg);
    transform:         rotate(5deg);
}

#EZ + label {
    background-image: url("https://taikopp.com/img/EZ.png");
}

#DT + label {
    background-image: url("https://taikopp.com/img/DT.png");
}

#HT + label {
    background-image: url("https://taikopp.com/img/HT.png");
}

#HD + label {
    background-image: url("https://taikopp.com/img/HD.png");
}

#HR + label {
    background-image: url("https://taikopp.com/img/HR.png");
}

#FL + label {
    background-image: url("https://taikopp.com/img/FL.png");
}

#NF + label {
    background-image: url("https://taikopp.com/img/NF.png");
}

/* copy from katk1.dev */
[data-bs-theme=dark] {
    --bs-body-bg: #1a1818;
    --bs-secondary-bg: #080404;
    --bs-body-color: #ffa6a6;
}

a {
    color: rgb(233, 70, 70);
}

.display-3 {
    color: rgb(255, 116, 116);
}

h4 {
    color: rgb(229, 147, 147);
}

.btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgb(233, 70, 70);
}

.btn-primary {
    --bs-btn-bg: rgb(216, 112, 112);
    --bs-btn-border-color: rgb(233, 70, 70);
    --bs-btn-hover-bg: rgb(165, 82, 82);
}

.btn-secondary {
    --bs-btn-bg: rgb(216, 112, 112);
    --bs-btn-border-color: rgb(233, 70, 70);
    --bs-btn-hover-bg: rgb(165, 82, 82);
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: #fff;
    border-color: rgb(233, 70, 70);
    background-color: rgb(216, 112, 112);
}

.dropdown-menu {
    --bs-dropdown-color: rgb(216, 112, 112);
    --bs-dropdown-bg: #241f1f;
}

.dropdown-item.active {
    background-color: rgb(216, 112, 112);
}

.dropdown-header {
    color: rgb(165, 82, 82);
}

.row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.text-bg-success {
    color: #fff !important;
    background-color: rgb(233, 70, 70) !important;
}

.text-bg-secondary {
    color: #fff !important;
    background-color: rgb(107, 36, 36) !important;
}