@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

body {
    font-family: "Jost", sans-serif;
}

.bg-yellowin-yellow {
    background: #ffc000;
    color: #000;
}

.bg-yellowin-black {
    background: #121313;
}

.btn-yellowin-yellow {
    background: #ffc000;
    border: #000 2px solid;
}

.btn-yellowin-yellow:hover {
    background: #000;
    border: #ffc000 2px solid;
    color: #ffc000 !important;
}

.dropdown-toggle::after {
    border-top: none !important;
}

.lineAdd {
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 20px;
}

.greenBtn {
    background: #12c41b;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.lineAdd {
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 20px;
}

.greenBtn {
    background: #12c41b;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.bg-yellowin-black, .sa-confirm-button-container>button {
    background: #121313 !important;
    color: #ffc000 !important;
}

.btn-yellowin-black {
    background: #121313;
    background: rgb(127, 94, 0);
    background: linear-gradient(
        180deg,
        rgba(127, 94, 0, 1) 0%,
        rgba(0, 0, 4, 1) 9%,
        rgba(67, 68, 72, 1) 100%
    );
    border: #000 2px solid;
    color: #ffc000;
}

.navbar a {
    font-weight: 700;
}

.navbar a.active {
    position: relative;
    color: #fff !important;
    padding: 20px 30px !important;
    z-index: 2;
}

.content-container {
    max-width: 1100px;
}

.navbar a.active::after {
    content: "";
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: rgb(127, 94, 0);
    background: linear-gradient(
        180deg,
        rgba(127, 94, 0, 1) 0%,
        rgba(0, 0, 4, 1) 30%,
        rgba(67, 68, 72, 1) 100%
    );
    transform: skewX(-10deg);
}

.btn-yellowin-black:hover {
    background: #ffc000;
    border: #000 2px solid;
    color: #121313;
}

.yfc-border-yellow {
    border: solid #ffc000 !important;
}

.br-7 {
    border-radius: 7px;
}

.br-15 {
    border-radius: 15px;
}

.br-30 {
    border-radius: 30px;
}

.link-yfc-black,
.link-yfc-black-bold {
    color: #333;
    font-size: 1rem;
}

.link-yfc-black-bold {
    font-weight: bold;
}

.text-yfc-yellow {
    color: #ffc000;
}

.footerlinks {
    color: #a4a4a4;
    font-weight: bold;
    font-size: 0.85rem;
}

.footerlinks:hover {
    color: #ffc000;
}

a {
    text-decoration: none;
}

.thick-yellow-right-border {
    border-right: solid 2px #ffc000;
}

.adminteamlogo {
    max-height: 30px;
}

.fm-border-right{
    border-right: 2px #000 solid;
}

.w-33{
    width: 33.33% !important;
}

@media (max-width: 768px) {
    .thick-yellow-right-border {
        border-right: none;
    }

    .footer-divider{
        display: none;
    }

    .navbar a.active {
        position: relative;
        color: #fff !important;
        padding: 0px 0px !important;
    }

    .navbar a.active::after {
        content: "";
        z-index: -1;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: none;
        transform: none;
    }

    .desktop-only{
        display: none !important;
    }
}

@media (min-width: 770px) {
    .mobile-only{
        display: none !important;
    }
}

.lineStream:nth-child(odd) {
    background-color: #d3d3d3;
}

.lineStream:nth-child(even) {
    background-color: #e9e9e9;
}

.bg-yfc-lighter-gray {
    background: #333435;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-25 {
    font-size: 25px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.active-pick {
  background-color: #000 !important;
  border: 2px solid #ffcb05 !important;
  color: #ffcb05 !important;
}

.active-pick-inv {
  background-color: #ffcb05 !important;
  border: 2px solid #000 !important;
  color: #000 !important;
}

.navbar-toggler {
    background: #000;
}

/* Supa page design */
.supaheading {
    background-color: black;
    color: #fff;
    border-radius: 20px;
    border: 3px solid #ffc000;
    margin: 20px 0;
    width: 100%;
    padding: 20px 30px;
}

.supaheading h1 {
    font-weight: 800;
}

.top-options .option {
    border: none;
    border-radius: 50px;
    font-weight: 700;
    color: black;
    position: relative;
}

.top-options .optionselect {
    position: relative;
}

.top-options .optionselect::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #000;
    top: 35%;
    right: 12%;
}

.match {
    align-items: center;
}

.match div:nth-child(1) {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.match div:nth-child(2) {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.match-content {
    padding: 10px;
}

.match-content .row {
    /* margin-left: -25px; */
    margin-right: -14px;
}

/* Option design */
/* Options customization */
.options {
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 70px;
}
/* Customize the label (the container) */
.optioncontainer {
    display: flex;
    position: relative;
    /* padding: 10px; */
    width: max-content;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0;
}

/* Hide the browser's default radio button */
.optioncontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.checkmark {
    position: relative;
    top: 0;
    left: 0;
    font-size: 15px;
    font-weight: 600;
    padding: 3px 20px;
    border-radius: 30px;
    background-color: transparent;
    border: 3px solid #000;
    transition: all 300ms ease-in-out;
}

/* On mouse-over, add a grey background color */
.optioncontainer:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.optioncontainer input:checked ~ .checkmark {
    background-color: #000;
    color: white;
}

.supagame-fixteams {
    overflow: hidden;
}

.supagame-fixteams b {
    white-space: nowrap;
}

.supaoutcome {
    font-weight: 600;
    padding: 3px 15px;
    border-radius: 30px;
    border: 3px solid #000;
}

.supaoutcomeselected, .supaoutcome:hover {
    background-color: #000;
    color: white;
}
/*  Supa page design end*/

.sweet-alert{
    color: #000;
    background: #ffc805 !important;
}

.sweet-alert h2{
    color: #000000 !important;
}

.sweet-alert .sa-icon.sa-error {
    border-color: #ff0000 !important;
}

.sweet-alert .sa-icon.sa-error .sa-line{
    background-color: #ff0000 !important;
}

.sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
    background: transparent !important;
}

.sweet-alert .sa-icon.sa-success .sa-fix {
    background-color: transparent !important;
}

.sweet-alert .sa-icon.sa-success .sa-placeholder {
    border: 4px solid #090 !important;
}

.sweet-alert .sa-icon.sa-success .sa-line {
    background-color: #090 !important;
}

.mtn-black-bg,
.mtn-black-bg:hover,
.nav-pills .nav-link.active {
    color: #ffc805;
    background: #000;
}

.mtn-yellow-bg,
.mtn-yellow-bg:hover,
.nav-pills .nav-link {
    background: #ffc805;
    color: #000;
}

.homegameimagecols{
    padding-right: 5px !important;
    padding-left: 5px !important;
}

@media (max-width: 575px) {
    .yellowin-game-list{
      max-width: 50% !important;
    }

    .fs-m-14{
        font-size: 14px !important;
    }

    .fs-m-12{
        font-size: 12px !important;
    }
}