/* https://getbootstrap.com/docs/5.0/layout/breakpoints/ */

@media (max-width: 767.98px) {
    div.soundcloud-tracks div.track {
        font-size: .9rem;
    }

    div.soundcloud-user div.user-buttons a.icon-button {
        margin-bottom: 1rem;
        text-align: center;
        width: -webkit-fill-available;
    }
}

@media (min-width: 992px) {

}


a, a:active, a:focus, a:visited {color: gold;}
a:hover {color: whitesmoke;}

body {margin: .4rem;}

body,
button,
input,
select,
textarea,
.btn,
.icon-button {
    color: whitesmoke !important;

    font-family: "Lato", sans-serif;
    font-optical-sizing: auto;
    font-size: 1.2rem !important;
    font-weight: 400;
    font-style: normal;
}

button,
input[type="submit"],
.btn,
.icon-button {
    font-weight: 600 !important;
}

h1, h2, h3 {
    color: gold;
    margin: 1rem 0;
}

h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.3rem;
    color: cyan;
}

h3 {font-size: 1.2rem;}

h4 {
    color: darkcyan;
    font-size: 1.1rem;
}

hr {
    border-top: 1px solid darkslategray;
    opacity: 1;
}

.text-focus {
    color: gold;
    font-weight: 600;
}

.icon-button {
    background-color: darkslategray !important;
    border-radius: .4rem;
    color: whitesmoke;
    display: inline-block;
    margin-right: .8rem;
    padding: .2rem .8rem;
    text-decoration: none;

    --bs-btn-color: darkslategray !important;
    --bs-btn-hover-color: darkslategray !important;
    --bs-btn-active-color: darkslategray !important;
    --bs-btn-disabled-color: darkslategray !important;
    --bs-btn-active-shadow: none !important;
}


.icon-button:hover {
    background-color: darkslategray !important;
}
.icon-button:hover span.text {
    color: gold !important;
}

.icon-button img {
    height: 1rem;
    margin-right: .4rem;
}

.btn.small {font-size: .9rem !important;}

.bg-success {
    background-color: darkslategray !important;
}

.btn-primary,
.btn-secondary {
    color: whitesmoke !important;
    --bs-btn-color: whitesmoke;
    --bs-btn-hover-color: whitesmoke;
    --bs-btn-active-color: whitesmoke;
    --bs-btn-disabled-color: whitesmoke;
    --bs-btn-disabled-bg: dimgrey;
    --bs-btn-disabled-border-color: dimgrey;
    --bs-btn-active-shadow: none !important;
}


.btn-primary {
    background-color: deeppink;
    --bs-btn-bg: deeppink;
    --bs-btn-border-color: deeppink;
    --bs-btn-focus-shadow-rgb: deeppink;
    --bs-btn-active-bg: deeppink;
    --bs-btn-active-border-color: deeppink;
    --bs-btn-hover-bg: darkslategray;
    --bs-btn-hover-border-color: darkslategray;
}

.btn-secondary {
    background-color: darkslategray;
    --bs-btn-bg: darkslategray;
    --bs-btn-border-color: darkslategray;
    --bs-btn-focus-shadow-rgb: darkslategray;
    --bs-btn-active-bg: darkslategray;
    --bs-btn-active-border-color: darkslategray;
    --bs-btn-hover-bg: deeppink;
    --bs-btn-hover-border-color: deeppink;
}

@media (max-width: 991.98px) {
    .button-fixed .icon-button {
        text-align: center;
        width: -webkit-fill-available;
    }    
}


.fade-element {
  opacity: 1;
  transition: opacity 2s ease;
}

.fade-element.fade-out {
  opacity: 0;
}

.flash-message {
    color: deeppink;
    font-weight: 600;
}

.stretch {width: 100%;}


div#soundcloud-users hr {margin-top: 2rem;}

div#soundcloud-users h2#search-results {
    margin-bottom: 0;
}

div#soundcloud-track-widget {
    margin-bottom: 1rem;
}

div.brand-logo {
    line-height: 3rem;
    vertical-align: middle;
}

div.brand-logo a {
    color: whitesmoke;
    text-decoration: none;
}

div.brand-logo a:hover {
    color: gold;
}

div.brand-logo img {
    width: 4rem;
    margin-right: .4rem;
}

div.soundcloud-user {
    margin-top: 1rem;
}


div.soundcloud-user h2.title span {
    color: gold;
    font-size: .8rem;
    margin-left: .8rem;
}

div.soundcloud-user div.item-content .btn {
    margin-right: .4rem;
}


div.soundcloud-user div.ai-results h3, 
div.soundcloud-user div.ai-results h4 {
    color: darkslategray;
}

div.soundcloud-user div.ai-disclaimer {
    color: deeppink;
    font-size: .9rem;
    margin-top: 1rem;
}

div.soundcloud-user img.avatar {
    border-radius: .4rem;
    width: 100%;
}

div.soundcloud-user-tracks {
    border-bottom: 1px solid darkslategray;
    padding-bottom: 1rem;
}

div.soundcloud-user-tracks h3 {
    color: gold;
    display: inline-block;
    margin: 1rem 0;
}

div.tracks-more div.track:first-child {
    margin-top: 1rem !important;
}

div.track span.title a,
div.track span.title a:visited {
    color: whitesmoke;
    text-decoration: none;
}

div.track span.title a:hover {
    color: gold;
}

div.track {
    margin-bottom: 1rem;
}

div.track span.created,
div.track span.duration {
    color: darkgray;
    margin-right: 1rem;
}

div.track a.play-track {
    margin-right: 1rem;
}

div.track a.play-track span.icon {
    text-shadow: 0 0 0 whitesmoke;
}

div.track a.play-track span.icon.right {
    margin-left: .8rem;
}

div#task-info span.text {
    color: gold;
    font-size: 1.2rem;
    line-height: 2.4rem;
}

div.user-event a {
    color: whitesmoke;
    text-decoration: none;
}

div.user-event a:hover {
    color: gold;
}

div.user-event h3 {
    color: cyan;
    margin: 1rem 0 .4rem 0;
}

div.user-event div.datetime {
    color: darkcyan;
}

div.user-event div.link {
    line-height: 2rem;
}

div.user-event div.link img {
    margin-right: .2rem;
    width: 1.4rem;
}

div.user-event div.link span {
    vertical-align: middle;
}

span#spinner span.label {
    color: gold;
}

span.icon {
    color: transparent;
    margin-right: .4rem;
    text-shadow: 0 0 0 gold;
}

span.fixed {
    color: darkgray;
    display: inline-block;
    margin-right: 1rem;
    min-width: 3.5rem;
}

span.last {
    color: darkgray;
    margin-right: .4rem;
    min-width: 3rem;
    display: inline-block;
}