@font-face {
    font-family: 'VM Circular Yell';
    src: url('/static/fonts/VMCircularYell-Black.otf') format('opentype');
    font-weight: 900; /* Black weight */
    font-style: normal;
}

@font-face {
    font-family: 'VM Circular Shout';
    src: url('/static/fonts/VMCircularShout-Bold.otf') format('opentype');
    font-weight: 700; /* Bold weight */
    font-style: normal;
}

:root {
    /* Palette */
    --color-body: #1E2833;
    --color-body-alt: #25303c;
    /* Skeleton shimmer: a lighter offset of --color-body-alt so the
       moving highlight reads against the themed base band. */
    --skeleton-shine: #354859;
    --color-primary: #ED0000;
    --color-secondary: var(--color-white);

    /* Text */
    --text-color: var(--color-white);

    /* Font */
    --font-sans: 'VM Circular Yell', sans-serif;
    --font-sans-bold: 'VM Circular Shout', sans-serif;

    /* Border */
    --color-border: #4B535C;

    /* Accordion */
    --accordion-body-background: #1B1C23;
    --accordion-body-color: #fff;
    --accordion-border-color: #3F4045;
    --accordion-divide-color: #1D1D1D;
    --accordion-header-background: #1B1C23;
    --accordion-header-color: #fff;
    --accordion-item-background: #3F4045;

    /* Account */
    --account-bg: #1B1C23;
    --account-update-color: var(--color-primary);

    /* Badge */
    --badge-info-border: 1px solid var(--color-white);

    /* Breadcrumb */
    --breadcrumb-active-color: var(--color-white);
    --breadcrumb-color: var(--color-white);
    --breadcrumb-seperator-color: var(--color-white);

    /* Button */
    --button-border-radius: 4px;
    --button-lg-border-radius: 4px;
    --button-md-border-radius: 4px;
    --button-sm-border-radius: 4px;
    --button-primary-text-color: var(--color-white);
    --button-primary-hover-text-color: var(--color-black);
    /* Secondary (e.g. modal Cancel) — a dark slate, not the default white
       (--color-secondary) which rendered white-on-white. */
    --button-secondary-text-color: var(--color-white);
    --button-secondary-background-color: #3A444A;
    --button-secondary-border-color: #3A444A;
    --button-secondary-hover-text-color: var(--color-white);
    --button-secondary-hover-background-color: #454F56;
    --button-secondary-hover-border-color: #454F56;

    /* Card */
    --card-background-color: var(--color-body);
    --card-border: 2px solid #3F4045;
    --card-hr-border-color: #6B7378;

    /* Dropdown */
    --dropdown-item-hover-background: var(--color-primary);
    --dropdown-item-hover-color: var(--color-black);
    --dropdown-item-active-background: var(--color-primary);
    --dropdown-item-active-color: var(--color-black);

    /* Footer */
    --footer-background-color: var(--color-body);
    --footer-social-background-color: var(--color-white);
    --footer-social-font-color: var(--color-body);

    /* Form */
    --form-control-primary-background-color: #1B1C23;
    --form-control-primary-border: 1px solid #3F4045;
    --form-control-primary-border-radius: 3px;
    --form-control-primary-color: #fff;
    --form-select-background-color: var(--color-secondary);
    --form-select-background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

    /* Header */
    --header-background-gradient: linear-gradient(180deg, #1E2833 0%, rgba(13, 30, 41, 0.00) 100%, rgba(23, 51, 71, 0.00) 100%);
    --header-nav-toggler-color: #fff;

    /* Hero */
    --hero-blur-background: rgba(29, 29, 29, 0.5);
    --hero-bottom-gradient-background: linear-gradient(180deg, rgba(29, 29, 29, 0) 0%, #1E2833 100%);
    --hero-image-blur: 6px;

    /* Image / thumbnail */
    --img-placeholder: #666666AA;
    --img-thumbnail-border-radius: 6px;
    --thumbnail-border-radius: 0px;

    /* Modal */
    --modal-border: 2px solid #4B535C;
    --modal-backdrop-background-color: #1E2833;
    --modal-body-background-color: #142129 !important;
    --modal-footer-background-color: #142129;
    --modal-footer-border-top: 2px solid #3F4045;
    --modal-footer-padding: 20px 110px;

    /* Nav */
    --nav-link-hover-color: inherit;
    --mobile-nav-background: rgba(0, 0, 0, 0.85);

    /* Notification */
    --notification-background: var(--color-primary);
    --notification-color: var(--color-white);

    /* Play icon */
    --play-icon-background: var(--color-primary);
    --play-icon-border: var(--color-primary);
    --play-icon-color: var(--color-white);

    /* Progress */
    --progress-bar-background: var(--color-primary);

    /* Section */
    --section-background-color: #1E2833;
    --section-border-color: #1E2833;

    /* Slider */
    --slider-pagination-active-background-color: rgba(255, 255, 255, 0.8);
    --slider-pagination-background-color: rgba(255, 255, 255, 0.4);

    /* Misc */
    --live-now-color: var(--color-black);
    --ts-bg-color: #29333D;
}

/* Modal panel: shared SCSS hardcodes `.modal-content` to var(--color-body)
   (#1E2833); Virgin wants modals a touch darker than the page body. */
.modal-content {
    background-color: #142129 !important;
}

/* Multi-select dropdown list */
.multi {
    background-color: #29333D !important;
    color: #ffffff !important;
}

/* Multi-select chosen options */
.ts-control .item {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    padding: 5px;
    border-radius: 4px;
}
.ts-control{
    border-radius: .375rem !important;
}
.ts-control,.ts-dropdown{
    background-color: var(--ts-bg-color) !important;
    border-color: var(--color-border) !important;
}
.ts-dropdown .active{
    background-color: rgba(0,0,0,.1) !important;
    color: rgba(255,255,255,0.7) !important;
    transition: all;
}
.ts-dropdown{
    z-index: 99999 !important;
}

#tomselect-1-ts-control::placeholder {
    color: #ffffff !important;
}