/* MODERN BUTTONS */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    justify-content: flex-end;
    min-width: 25%;
}

.btn {
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    padding: 0.65em 1.35em;
    /* border: none;
            border-radius: 0.7em; */
    cursor: pointer;
    transition: box-shadow 0.15s, filter 0.15s, transform 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    box-shadow: 0 1px 8px #0001;
    outline: none;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0;
}

.btn:focus,
.btn:hover,
.btn.active {
    transform: translateY(-2px) scale(1.04);
    z-index: 1;
}

a.btn,
a.btn:focus,
a.btn:hover,
a.btn:active,
a.btn.active {
    text-decoration: none;
}

.btn.sending {
    transform: translateY(0px) scale(1.08);
    z-index: 1;
    filter: saturate(0.25);
}

.btn.disabled {
    filter: saturate(0.25);
}

.btn-row .btn>b {
    transform: scale(1.5);
    /* text-shadow: 0 0 3px #000000; */
}

.btn-danger {
    background: #b00020;
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #c62828;
    box-shadow: 0 3px 12px #b0002028;
}

.btn-warning {
    background: #ff9800;
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
    background: #f57c00;
    box-shadow: 0 3px 12px #ff980028;
}

.btn-favs {
    background: #e91e63;
    color: #fff;
}

.btn-favs:hover,
.btn-favs:focus {
    background: #c2185b;
    box-shadow: 0 3px 12px #e91e6328;
}


.btn-success {
    background: #27692a;
    color: #fff;
}

.btn-success:hover,
.btn-success:focus {
    background: #2e7031;
    box-shadow: 0 3px 12px #388e3c28;
}

.btn-primary {
    background: #1976d2;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #1976d2;
    box-shadow: 0 3px 12px #2094d138;
}

.btn-default {
    background: #fff;
    color: #333;
    border: 1.5px solid #d4d7da;
}

.btn-default:hover,
.btn-default:focus {
    background: #f3f6fa;
}

.btn-dark {
    background: #222;
    color: #ffe066;
}

.btn-dark:hover,
.btn-dark:focus {
    background: #424242;
}

.btn .icon-fix {
    /* Invisible icon for alignment */
    display: inline-block;
    width: 1.2em;
    text-align: center;
    opacity: 0;
    font-size: 1.15em;
}


.theme-toggle-btn .night {
    display: inline;
}

.theme-toggle-btn .day {
    display: none;
}

.theme-toggle-btn {
    background: #23262a;
    color: #ffe066;
    border: 1.5px solid #383b40;
}


@media (max-width: 1280px) {
    .btn {
        padding: 0.3em 1.35em;
    }
}

@media (max-width: 700px) {

    .btn {
        padding: 0.5em 0.75em;
    }

    .btn-row {
        flex-direction: row;
        gap: 0.5em;
        font-size: 0.7em;
    }

    .btn.r {
        border-radius: 50%;
        padding: 0.5em 0.7em;
    }
}




html[data-theme="dark"] .btn-dark {
    background: #23262a !important;
    color: #ffe066 !important;
    border: 1px solid #383b40 !important;
}

html[data-theme="dark"] .btn-row .btn {
    box-shadow: 0 1px 8px #1112 !important;
}

html[data-theme="dark"] .btn-danger {
    background: #e57373 !important;
    color: #fff !important;
}

html[data-theme="dark"] .btn-warning {
    background: #ff9800 !important;
    color: #fff !important;
}

html[data-theme="dark"] .btn-favs {
    background: #f06292 !important;
    color: #fff !important;
}

html[data-theme="dark"] .btn-success {
    background: #66bb6a !important;
    color: #fff !important;
}

html[data-theme="dark"] .btn-primary {
    background: #0d47a1 !important;
    color: #fff !important;
}

html[data-theme="dark"] .btn-default {
    background: #23262a !important;
    color: #fafafc !important;
    border-color: #383b40 !important;
}


html[data-theme="dark"] .theme-toggle-btn {
    background: #a5a5a5 !important;
    color: #ffcb00 !important;
    border: 1.5px solid #c7c7c7 !important;
}

/* Show night icon in dark mode */
html[data-theme="dark"] .theme-toggle-btn .night {
    display: none;
}

html[data-theme="dark"] .theme-toggle-btn .day {
    display: inline;
}