@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    color: #f3f2f5;
    background: linear-gradient(90deg, #20182A 0%, #1C1328 100%);
}

h1, h2, h3, h4, h5 {
    font-family: "Bebas Neue", sans-serif;
}

a:hover {
    color: #c095fd;
}

a.activeLink {
    color: #c095fd;
}

.nav-link:focus, .nav-link:hover {
    color: #c095fd;
}

.btn {
    border-radius: 20px;
}

.btn-primary {
    background-color: #8c42fa;
    border-color: #8c42fa;
    color: #f3f2f5;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #732fe0;
    border-color: #732fe0;
    color: #f3f2f5;
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: #c095fd;
    border-color: #c095fd;
    color: #000;
}

.btn-outline-primary {
    color: #c095fd;
    border-color: #c095fd;
}

.btn-outline-primary:hover {
    color: #f3f2f5;
    background-color: #c095fd;
    border-color: #c095fd;
}

.btn-primary.active, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: #c095fd;
    border-color: #c095fd;
    box-shadow: 0 0 0 .2rem rgba(192, 149, 253, .5) !important;
}

.btn-primary.focus, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-outline-primary.focus, .btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):focus {
    box-shadow: 0 0 0 .2rem rgba(192, 149, 253, .25);
}

.form-control {
    color: #f3f2f5;
    border-color: #5a457b;
    background-color: #2a1d3d;
    border-radius: 20px;
}

.form-control:focus {
    color: #f3f2f5;
    border-color: #9b90b2;
    background-color: #382752;
    box-shadow: 0 0 0 .2rem rgba(192, 149, 253, .25);
}

.dropdown-item.active, .dropdown-item.active:hover, .dropdown-item:active {
    color: rgb(255, 255, 255);
    background-color: #8c42fa;
}

#content .widget input.cmn-toggle-round:checked + label:after {
    background-color: #8c42fa;
}

#content .widget .content .mediaList .image .watchProgress span {
    background: #c095fd;
}

#content .channelInfo .header .nav .active,
#content .channelInfo .header .nav .active:hover,
#content .tvShowFullInfo .header .nav .active,
#content .tvShowFullInfo .header .nav .active:hover {
    color: #c095fd;
}

#content .channelInfo .header .nav .likesBar span,
#content .tvShowFullInfo .header .nav .likesBar span {
    background-color: #c095fd;
}

#content .mediaInfo #mediaTabs .nav .active .fas,
#content .mediaInfo #mediaTabs .nav .active:hover .fas {
    color: #c095fd;
}

#content .mediaComments .content .commentInput:focus {
    border-bottom: 1px solid #c095fd;
}

@media (min-width: 992px) {

    .navbar #mainMenu .nav-link:before {
        background-color: #c095fd;
    }
}

@media (max-width: 992px) {

    .navbar .navbar-nav .nav-link:hover {
        color: #c095fd;
    }
}

.systemMenu .dropdown-header {
    color: #c095fd;
}

.badge-primary {
    color: #000;
    background-color: #c095fd;
}

.interactiveArea .nav .nav-link.active, .interactiveArea .nav .nav-link.active:hover {
    border-bottom: 2px solid #8c42fa;
}

#content .widget .content .mediaList .image .liveEventLabel {
    background: rgba(140, 66, 250, .85);
}

#content .widget .content .mediaList .image .liveEventLabel.ended {
    color: rgba(239, 239, 239, 0.85);
    background: rgba(54, 54, 54, .7);
}

#content .memberWrapper,
#content .memberLoginSection .content,
#content .memberRegisterSection .content,
#content .memberForgotPasswordSection .content {
    background: #2a1d3d;
}

.searchInput, .searchInput:focus {
    color: #000;
    background: rgba(255, 255, 255, 0.8);
    border: none;
}

.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid {
    background-color: #2a1d3d;
}