.btn {
    --mdb-btn-box-shadow: rgba(0, 0, 0, 1.0) !important;
    --mdb-btn-hover-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 10px 0px !important;
    transition: 500ms;
}

.btn, .btn * {
    font-family: "Comfortaa", sans-serif;
    --mdb-font-sans-serif: "Comfortaa", sans-serif;
    --mdb-btn-padding-x: 2.0rem;
    --mdb-btn-font-size: 0.85rem !important;
}

@media (min-width: 1601px) {
    --mdb-btn-font-size: 1.05rem !important;
}

@media (min-width: 2000px) {
    --mdb-btn-font-size: 1.10rem !important;
}

@media (min-width: 3000px) {
    --mdb-btn-font-size: 1.15rem !important;
}

.btn-primary {
    background: var(--mdb-primary) !important;
    color: var(--mdb-light) !important;
    box-shadow: var(--mdb-btn-box-shadow) !important;
}

.btn-secondary {
    background: var(--mdb-secondary) !important;
    color: var(--mdb-light) !important;
    box-shadow: var(--mdb-btn-box-shadow) !important;
}

.btn-light {
    background: var(--mdb-light) !important;
    color: var(--mdb-gray-dark) !important;
    box-shadow: var(--mdb-btn-box-shadow) !important;
}

.btn-success {
    background: var(--audija-gradient-green) !important;
    color: var(--mdb-light) !important;
    box-shadow: var(--mdb-btn-box-shadow) !important;
}

.btn-outline-secondary {
    color: var(--mdb-light) !important;
    border-color: var(--mdb-secondary) !important;
    box-shadow: var(--mdb-btn-box-shadow) !important;
}

.btn-outline-success {
    color: var(--mdb-light) !important;
    border-color: var(--mdb-success) !important;
    box-shadow: var(--mdb-btn-box-shadow) !important;
}

.btn-outline-danger {
    color: var(--mdb-gray-dark) !important;
    border-color: var(--mdb-danger) !important;
    box-shadow: var(--mdb-btn-box-shadow) !important;
}

.btn-outline-dark {
    color: var(--mdb-gray-dark) !important;
    border-color: var(--mdb-dark) !important;
    box-shadow: var(--mdb-btn-box-shadow) !important;
}

:not(.btn-check) + .btn-primary:hover, .btn-primary:hover, .btn-primary:first-child:hover, .btn-primary:focus, .btn-primary:active,
:not(.btn-check) + .btn-secondary:hover, .btn-secondary:hover, .btn-secondary:first-child:hover, .btn-secondary:focus, .btn-secondary:active,
:not(.btn-check) + .btn-light:hover, .btn-light:first-child:hover, .btn-light:hover, .btn-light:focus, .btn-secondary:active,
:not(.btn-check) + .btn-success:hover, .btn-success:first-child:hover, .btn-success:hover, .btn-success:focus, .btn-success:active,
:not(.btn-check) + .btn-outline-success:hover, .btn-outline-success:first-child:hover, .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active,
:not(.btn-check) + .btn-outline-danger:hover, .btn-outline-danger:first-child:hover, .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active,
:not(.btn-check) + .btn-outline-dark:hover, .btn-outline-dark:first-child:hover, .btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active {
    box-shadow: var(--mdb-btn-hover-box-shadow) !important;
}

.btn-gradient-purple {
    background: var(--audija-gradient-purple) !important;
    color: var(--mdb-light) !important;
    box-shadow: var(--mdb-btn-box-shadow) !important;
}

.btn-scroll-top {
    position: fixed;
    right: 2rem;
    bottom: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    text-align: center;
    color: var(--mdb-light) !important;
    background: var(--mdb-primary);
    line-height: 46px;
    transition: 0.5s;
    z-index: 999;
}

.btn-changelog {
    background: var(--audija-bg) !important;
    border-top-left-radius: var(--mdb-border-radius-lg);
    border-bottom-right-radius: var(--mdb-border-radius-lg);
}

.play-button {
    color: var(--mdb-light);
    padding-left: 0.7rem;
    padding-right: 0.8rem;
    border-radius: 15px;
    background: linear-gradient(45deg, rgba(8, 126, 137, 0.85), rgba(1, 235, 198, 0.85) 100%);
}

.play-button .fa-circle {
    color: rgb(0, 105, 128);
}

.play-button .fa-play {
    margin-right: 0.3rem;
}

/* Chart Toggle Button */
.btn-chart-custom {
    position: relative;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background-image: linear-gradient(to right, #8a2be2, #4b0082);
    border: none;
    overflow: hidden;
}

.btn-chart-custom .btn-chart-mask {
    position: absolute;
    z-index: 1;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background-color: #0f1029;
    border-radius: 0.25rem;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.btn-chart-custom.btn-chart-filled .btn-chart-mask {
    opacity: 0;
}

.btn-chart-custom svg {
    position: relative;
    z-index: 2;
    color: var(--mdb-light);
    transition: color 0.3s ease-in-out;
}

.btn-chart-custom:hover svg, .btn-chart-custom.btn-chart-filled svg {
    color: var(--mdb-white);
}

/* Change color of expanded accordion item. */
.accordion-button:not(.collapsed){
    color: var(--mdb-primary);
}

/* Design of the arrow in a accordion. */
.accordion-button:not(.collapsed):after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234F4F4F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.nav-pills .nav-link {
    border-radius: 4px !important;
    color: var(--mdb-gray-dark);
}

.nav-pills .nav-link.active {
    background: var(--audija-gradient-purple);
    color: var(--mdb-dark);
}