/* sliding switch checkboxes */

.switch-container {
    display: inline;
    width: 40px !important;
    height: 21px !important;
    float: right;
}

.switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}

.switch-slider-flexbox {
    display: flex;
    align-items: center;
    height: 100%;
}

.switch-slider {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: var(--theme-danger);
    transition: var(--theme-transition-slow);
    border-radius: 17px;
}

.switch-slider::before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 2px;
    bottom: 2px;
    background-color: var(--theme-danger);
    filter: brightness(40%);
    transition: var(--theme-transition-slow);
    border-radius: 50%;
}

.switch-container input:checked+.switch-slider-flexbox .switch-slider {
    background-color: var(--theme-success) !important;
}

.switch-container input:checked+.switch-slider-flexbox .switch-slider:before {
    transform: translateX(19px);
    background-color: var(--theme-success) !important;
}

/* flex tables */
.flex-table {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    max-width: 1998px;
    margin: auto;
    margin-top: 50px;
    row-gap: 20px;
}

.flex-table .card {
    border: 1px solid #111;
    border-radius: 10px;
    padding: 5px 20px;
    width: 33%;
}

.flex-table .card .card-title {
    font-size: 24px;
}

/* parallax cards */
.parallax-card {
    cursor: default;
    transform-style: preserve-3d;
    box-shadow: 0 0 15px 1px black;
}

/* default buttons */
.btn {
    margin: 20px;
    padding: 10px 15px;
    border-radius: 10px;
    background-color: var(--theme-button-primary);
    color: var(--theme-button-text-primary);
    cursor: pointer;
    transition: var(--theme-transition-slow);
    border: 2px solid transparent;
}

.btn:hover {
    border: 2px solid var(--theme-button-primary);
    background-color: var(--theme-button-secondary);
}
.btn:active {
    filter: brightness(0.75);
}