@font-face {
    font-family: Coolvetica;
    src: url("/static/fonts/coolvetica\ rg.otf");
}

body {
    background: linear-gradient(135deg, #000000 0%, #120012 25%, #130013 50%, #2c012c 75%, #000000 100%);
    min-height: 100vh;
    font-family: Coolvetica;
    font-size: 14px;
    max-width: 100vw;
    overflow-x: hidden;
}

.bg-image {
    background: url("/static/img/stars.jpg") 50% 0 fixed;
}

.bg-body {
    background: url("/static/img/stars.jpg") 50% 0 fixed;
}

.bg-accent {
    background: #b403b4;
}

.bg-accent-light {
    background-color: #d8a0d8;
}

.border-accent {
    border-style: solid;
    border-color: #b403b4;
}

.border-accent-light {
    border-style: solid;
    border-color: #d8a0d8;
}

.color-accent {
    color: #b403b4;
    border-color: #b403b4;
}

.color-accent-light {
    color: #d8a0d8;
    border-color: #d8a0d8;
}

.navbar-main {
    background: #000000AA;
    backdrop-filter: blur(10px);
    color: #fff !important;
}

.navbar-main a{
    color: #fff;
}

.footer-main {
    background: #000;
    color: #aaaaaa !important
}

.footer-main a {
    color: #aaaaaa !important;
}

.footer-main .h7 {
    color: #ffffff !important;
}

.btn-primary {
    background-color: #b403b4;
    padding: 0.25rem 1.5rem;
    border-color: #b403b4;
}

.btn-secondary {
    background-color: #d8a0d8;
    border-color: #b403b4;
}

.btn-inactive {
    background-color: #fff;
    border: solid #b403b4!important;
    color: #000;
}

.btn-active {
    background-color: #b403b4;
    border: solid #b403b4!important;
    color: #fff
}

.main-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid #b403b4!important;
    color: #fff;
}
.top-no-shadow {
    clip-path: inset(0px -10px -20px -10px);
}
.main-header {
    background-color: #343a40;
    color: #ffffff;
}
.secondary-card {
    box-shadow: 0 0 20px #b403b4;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid #b403b4!important;
    color: #fff;
}
.options-card {
    background-color: #d8a0d8;
    color: #000000;
}
.info-card {
    box-shadow: 0 0 20px #620162;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid #b403b4!important;
    color: #fff;
    padding: 1rem;
    border-radius: 0.25rem;
}
.city-show {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    color: #fff;
}

.diva-show {
    background-color: #d8a0d8;
    color: #000000;
}

.menu-tab-row {
    background-color: transparent;
    color: #000;
    flex: 1 1 auto;
    padding: 0;
}
.menu-tab-row .nav-tabs {
    border: 0 !important;
}

.tab-active {
    box-shadow: 0 0 20px #b403b488;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid #b403b4 !important;
    color: #fff;
}

.tab-inactive {
    color: #7c7979;
    background-color: transparent;
    border: 1px solid #000;
}
.tab-inactive:hover {
    color: #fff;
}

.calendar-month {
    background-color: #000;
    color: #ffffff;
}

.calendar-header {
    background-color: #fff;
    color: #000000;
}

.calendar-blurred-day {
    background-color: #d8a0d8;
    color: #000000;
}

.calendar-active-day {
    background-color: #fff;
    color: #000000;
}

.calendar-blurred-day-span {
    background-color: #d8a0d8;
    color: #000000;
}

.calendar-active-day-span {
    background-color: #b403b4;
    color: #fff;
}

.calendar-schedule {
    background-color: #d8a0d8;
    color: #000000;
}

.light-button {
    color: #fff;
    border-color: #fff;
}

.light-button img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(126deg) brightness(109%) contrast(104%);
}

.badge {
    white-space: normal;
    font-size: 65%;
}

.calendar-info {
    min-height: 1.1rem;
    font-size: 75%;
    font-weight: 700;
}

.link-card {
    background: #FFFFFFDD;
    padding: 0.2rem;
    height: 3.6rem;
    border-color: #ffffff;
    border-radius: 6px;
}

.profile-image {
    border-radius: 50%;
    max-width: 85px
}

.description-text {
    border: 1px solid #1D1304FF !important;
    font-size: small;
}

.detail-text {
    font-size: small;
}

.image-link {
    height: 3rem;
}

.link-name {
    padding: 2rem;
}

.link-item {
    color: #000000;
    display: inline-block;
    width: calc(100% - 3.5rem);
}

hr.custom-hr {
    border: 2px solid white;
    height: 0;
    /* Firefox... */
    box-shadow: 0 0 10px 1px white;
}

hr.custom-hr:after {
    /* Not really supposed to work, but does */
    content: "\00a0";
    /* Prevent margin collapse */
}

.login-container {
    display: grid;
    place-items: center;
    height: 100vh;
    width: 100vw;
}

.tooltip-container {
    width: 100%;
    padding: 0.25rem;
    background-color: black;
}

.tooltip-element {
    color: white;
    padding: 0.5rem;
    border: 1px solid white;
}

.tag {
    color: #ffffff;
    font-weight: bold;
}

.form-group>label,
.description-field-text {
    font-weight: bold;
}

.opt-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 100%;
    border-radius: 7px;
    padding: 12px;
}

.opt-link-neutral {
    background-color: #ffffff;
    color: #000000;
}

.opt-link-primary {
    background-color: rgb(39, 106, 163);
    color: #ffffff;
}

.opt-link-primary>img>svg {
    fill: #ffffff;
}

.opt-link-danger {
    background-color: red;
    color: #ffffff;
}

.opt-link-danger>img>svg {
    fill: #ffffff;
}

.small-icon-button {
    background-color: transparent;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
}

.thumbnail-img {
    max-width: 25vw;
    width: 90px;
    object-fit: cover;
    aspect-ratio: 2 / 3;
}

.banner-img {
    max-width: 80vw;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.loader {
    width: 32px;
    height: 16px;
    display: flex;
}

.loader:before,
.loader:after {
    content: "";
    flex: 1;
    background: #FFFFFF;
    transform-origin: top right;
    animation: l10-1 2s infinite;
}

.loader:after {
    background: #000000;
    transform-origin: top left;
    animation-delay: .25s;
}

@keyframes l10-1 {

    0%,
    5% {
        transform: rotate(0)
    }

    20%,
    30% {
        transform: rotate(90deg)
    }

    45%,
    55% {
        transform: rotate(180deg)
    }

    70%,
    80% {
        transform: rotate(270deg)
    }

    95%,
    100% {
        transform: rotate(360deg)
    }
}

.loader-container {
    display: grid;
    place-items: center;
    background: #444444AA;
    z-index: 10;
    width: 100vw;
    height: 100vh;
}

.image-overlay-container {
    position: relative;
}

/* Make the image to responsive */
.image {
    display: block;
    width: 100%;
    height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 1;
    color: white;
    text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.image-overlay-container:hover .overlay {
    opacity: 0;
}

.slick-dots li button:before
{
    opacity: .75;
    color: #d8a0d8;
}

.slick-dots li.slick-active button:before
{
    opacity: 1;
    color: #b403b4;
}

.slick-prev:before, .slick-next:before {
    color: #000 !important;
}

.bg-blue {
    background-color: #007bff;
}

.bg-pink {
    background-color: #ff69b4;
}

.filter-white {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(126deg) brightness(109%) contrast(104%);
}

.filter-black {
    filter: invert(0%) sepia(98%) saturate(7486%) hue-rotate(183deg) brightness(112%) contrast(100%);
}

.menu-img {
    width: 1rem;
    height: 1rem;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(126deg) brightness(109%) contrast(104%);
}

.menu-btn {
    border: 1px solid #ffffff;
    color: #fff;
}

.network-span {
    padding: 0.2rem 0.5rem 0.2rem 2rem;
    border-radius: 10px;
}

.span-x {
    background-color: #000000;
    color: #ffffff;
    border: solid;
    border-color: #000000;
}

.span-x>img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(126deg) brightness(109%) contrast(104%);
}

.span-i {
    background-color: #ff69b4;
    color: #ffffff;
    border: solid;
    border-color: #dc3545;
}

.span-i>img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(126deg) brightness(109%) contrast(104%);
}

.span-T {
    background-color: #007bff;
    color: #ffffff;
    border: solid;
    border-color: #0000ff;
}

.span-T>img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(126deg) brightness(109%) contrast(104%);
}

.span-t {
    background-color: #000000;
    color: #ffffff;
    border: solid;
    border-color: #aaaaaa;
}

.span-t>img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(126deg) brightness(109%) contrast(104%);
}

.span-o {
    background-color: #007bff;
    color: #ffffff;
    border: solid;
    border-color: #aaaaaa;
}

.span-o>img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(126deg) brightness(109%) contrast(104%);
}

.span-wa {
    background-color: #e0f8e3;
    color: #000000;
    border: solid;
    border-color: #218b1d;
}

.icon-network {
    width: 2rem;
    height: 2rem;
    padding: 5px;
    border-radius: 10px;
    position: absolute;
    float: left;
}

.pointer {
    cursor: pointer;
}