@import "./variables";
$player-container-height: calc( 100% - $navbar-height);
#player-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
#player-container__main {
    display: flex;
    flex-grow: 1;
    height: 100%;
}
#player-container__content__main {
    width: 100%;
    height: 100%;
    background-color: $dark-theme-panel-bg-color;
    margin: .2em .45em .32em 0;
    border-radius: $layout-border-radius;
    padding-bottom: 5em;
    overflow: auto;
}
.v-application {
    overflow: hidden;
}


.user-avatar {
    .badge {
        position: absolute;
        top: -1px;
        left: -2px;
        i {
            font-size: 21px !important;
        }
    }
}

.successful-payment {
    display: flex;
    flex-direction: column;
    align-items: center;
    &__icon {
        i {
            font-size: 13em !important;
        }
    }
    &__text {
        font-size: 1.3em;
        font-weight: bold;
        padding: 1em 0;
    }
}


.hovered {
    .control-layer {
        opacity: 1;
        .button-dots {
            opacity: 0;
        }
        .button-heart {
            opacity: 0;
        }
    }
}