/* Darker yellow */
.button-yellow-60 {
    color: var(--text-dark) !important;
    background-color: rgba(126, 179, 164, .15) !important;
}

.button-yellow-60:hover {
    background-color: rgba(126, 179, 164, .22) !important;
}

/* Toggle buttons */
.wpcf7 input[type="checkbox"],
body.dark-theme input[type="checkbox"],
body.dark-theme input[type="checkbox"]:focus,
input[type="checkbox"],
input[type="checkbox"]:focus,
input.toggle[type="checkbox"],
input.toggle[type="checkbox"]:focus {
    appearance: none;
    position: relative;
    display: inline-block;
    box-sizing: content-box;
    min-width: 2.6rem;
    width: 2.6rem;
    height: 1.4rem !important;
    padding: 0.3rem !important;
    border: none !important;
    cursor: pointer;
    border-radius: 1.5rem !important;
    overflow: hidden;
    background-color: rgba(136, 163, 152, 40%) !important;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
    transition: background ease 0.3s !important;
}

.wpcf7 input[type="checkbox"]:hover,
body.dark-theme input[type="checkbox"]:hover,
input[type="checkbox"]:hover,
input.toggle[type="checkbox"]:hover {
    background-color: rgba(136, 163, 152, 55%) !important;
}

.wpcf7 input[type="checkbox"]:before,
body.dark-theme input[type="checkbox"]:before,
input[type="checkbox"]:before,
input.toggle[type="checkbox"]:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    width: 1.4rem;
    height: 1.4rem;
    background: #ffffff;
    border-radius: 1.5rem;
    box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.2), 0 0 3px rgba(0, 0, 0, 0.15);
    transition: transform cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

body.dark-theme input[type="checkbox"]:checked,
body.dark-theme input[type="checkbox"]:checked:hover,
body.dark-theme input[type="checkbox"]:checked:focus,
input[type="checkbox"]:checked,
input[type="checkbox"]:checked:hover,
input[type="checkbox"]:checked:focus,
input.toggle[type="checkbox"]:checked,
input.toggle[type="checkbox"]:checked:hover,
input.toggle[type="checkbox"]:checked:focus {
    background-color: rgb(143 232 198 / 70%) !important;
}

body.dark-theme input[type="checkbox"]:checked:before,
input[type="checkbox"]:checked:before,
input.toggle[type="checkbox"]:checked:before {
    transform: translateX(1.3em);
}

@media only screen and (max-width: 640px) {

    body.dark-theme input[type="checkbox"]:checked:before,
    input[type="checkbox"]:checked:before,
    input.toggle[type="checkbox"]:checked:before {
        transform: translateX(1.6em);
    }
}

body.dark-theme input[type="checkbox"][disabled="disabled"],
input[type="checkbox"][disabled="disabled"],
input[type="checkbox"][disabled="disabled"]:checked,
input[type="checkbox"][disabled="disabled"]:checked:hover,
input[type="checkbox"][disabled="disabled"]:checked:focus,
input.toggle[type="checkbox"][disabled="disabled"],
input.toggle[type="checkbox"][disabled="disabled"]:checked,
input.toggle[type="checkbox"][disabled="disabled"]:checked:hover,
input.toggle[type="checkbox"][disabled="disabled"]:checked:focus {
    background-color: rgb(143 232 198 / 35%) !important;
    cursor: default;
}

body.dark-theme input[type="checkbox"][disabled="disabled"]:before,
input[type="checkbox"][disabled="disabled"]:before,
input.toggle[type="checkbox"][disabled="disabled"]:before {
    background: rgb(199 208 205 / 50%)
}

/* Modal button spinner */
.modal-button-send.loading,
.modal-input-button.loading,
.button-primary.loading,
.button-secondary.loading {
    position: relative;
    color: transparent !important;
    padding: 0 2.6rem !important;
}

.modal-button-send.loading:after,
.modal-input-button.loading:after,
.button-primary.loading:after,
.button-secondary.loading:after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 45%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    animation: modal-spinner 0.8s linear infinite;
}

.modal-input-button.button-primary.loading:after {
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-top-color: #000;
}

@keyframes modal-spinner {
    to {
        transform: rotate(360deg);
    }
}