*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

[x-cloak] {
    display: none;
}


.fade-hidden {
    opacity: 0;
}

.fade-in {
    animation: fadeIn .4s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.iono-metadata-subtitle,
.iono-player-metadata-subtitle {
    opacity: 0;
    transition: opacity .4s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
}

.visible {
    opacity: 1
}

.iono-metadata-description {
    min-height: 3lh;
    max-height: 3lh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.iono-metadata-description::-webkit-scrollbar {
    display: none;
}

.iono-metadata-description-square {
    min-height: 7lh;
    max-height: 7lh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.iono-metadata-description-square::-webkit-scrollbar {
    display: none;
}

.iono-coverart {
    transition: opacity 2s ease
}

.iono-coverart.fade {
    opacity: 0
}