:root, [data-bs-theme="dark"] {
--bs-primary: #62a0ea;
--bs-btn-bg: #62a0ea;
--bs-primary-hover: #7aaeed;
--bs-primary-active: #81b3ee;
--bs-primary-subtle: #e0ecfb;
--bs-primary-subtle-hover: #c8def8;
--bs-primary-subtle-active: #c0d9f7;
--bs-primary-emphasis: #3b608c;
--bs-primary-emphasis-hover: #2c4869;
--bs-primary-border-subtle: #c0d9f7;
--bs-primary-rgb: 98, 160, 234;
--bs-text-on-primary: #000000;
--bs-border-radius: 0rem;
--bs-border-width: 2px;
--bs-code-color: #77b9ff;
--bs-table-hover-bg: #313539;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main.main-content {
    flex: 1 0 auto;
    width: 100%;
}

footer {
    flex-shrink: 0;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(5040deg);
    }
}

.rotating {
    animation: rotate 5s ease-in-out infinite;
    transform-origin: center center;
}

.navbar .navbar-actions {
    width: 100%;
    min-width: 0;
}

.navbar .navbar-search {
    flex: 1 1 32rem;
    width: 100%;
    min-width: 20rem;
}

.navbar .navbar-search .input-group {
    width: 100%;
}

.navbar .navbar-search input[type="text"] {
    flex: 1 1 auto;
}

@media (max-width: 991.98px) {
    .navbar .navbar-search {
        flex-basis: 100%;
        min-width: 100%;
    }
}

.track-search .download-btn-track,
.track-search .download-btn-album {
    padding: 0;
}

.track-search .download-btn-track {
    width: 96px;
    height: 96px;
}

.track-search .download-btn-album {
    width: 140px;
    height: 140px;
}

@media (max-width: 767.98px) {
    .track-search .download-btn-track,
    .track-search .download-btn-album {
        width: 100%;
        height: auto;
        padding: 0.75rem;
    }
}

@media (max-width: 989.98px) {
  #canvas-wrapper canvas {
    width: 100% !important;
    height: auto !important;
  }
      .navbar-brand {
        font-size: 1.1rem;
    }
      body {
        font-size: 0.8rem;
    }
    tr > td > img {
	width: 40px;
	height: 40px;
    }
}

.auth-page {
    min-height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.auth-card {
    width: 100%;
    max-width: 520px;
}

.audio-player .audio-seek {
    min-width: 6rem;
    margin-bottom: 0;
}