:root {
    --tfaDarkColor: #13131300;
    --tfaGreyColor: #131313;
    --tfaLightColor: #fecb00;
    --tfaWhiteColor: #ffffff;
    --invertTextColor: #131313;
    --borderColor: #ffffff;
    --disabledColor: grey;
    --waGreenColor: #00d757;
}

.tfa-primary {
    background-color: var(--tfaDarkColor);
    color: var(--tfaWhiteColor);
}

.tfa-light {
    background-color: var(--tfaDarkColor);
    color: var(--tfaLightColor);
}

.tfa-highlight {
    background-color: var(--tfaLightColor)!important;
    border-color: var(--tfaLightColor)!important;
    color: var(--invertTextColor)!important;
    font-size: 1.1rem;
}

.tfa-highlight-invert {
    background-color: var(--tfaDarkColor)!important;
    border-color: var(--tfaDarkColor)!important;
    color: var(--tfaLightColor)!important;
    font-size: 1.1rem;
}

.tfa-borderless {
    border: unset;
}

.tfa-border {
    border: 1px solid var(--tfaLightColor)!important;
}

.tfa-rounded-border-5px {
    border-radius: 5px;
}

.primary-tfa-dark-color {
    background-color: var(--tfaDarkColor);
    //border-color: var(--borderColor);
    //color: var(--tfaLightColor);
    color: var(--tfaWhiteColor);
}

.tfa-dark-background {
    background-color: var(--tfaGreyColor);
}

hr {
    color: var(--tfaWhiteColor);
}

.tfa-full-width {
    width: 100%;
}

.tfa-full-width-block {
    width: 100%;
    display: block;
}

.tfa-text {
    color: var(--tfaLightColor);
}

.tfa-no-decor-text {
    color: var(--tfaLightColor);
    text-decoration: none;
}

.tfa-display-none {
    display: none;
}

.tfa-center {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    align-items: center;
}

.timer {
    animation: countdown 20s linear backwards, blinker 1s ease-in 10s 10;
}

@keyframes countdown {
  0% {
    width: 100%;
    background-color: green;
  }

  50% {
    width: 50%;
    background-color: yellow;
  }

  85% {
      width: 15%;
      background-color: red;
    }

  100% {
    width: 0%;
    background-color: red;
  }
}

@keyframes blinker {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes border-blinker {
  from {
    border: 0.7vH solid lightgreen;
  }

  to {
    border: 0vH solid lightgreen;
  }
}

.nav-tabs .nav-link.active {
    color: var(--tfaGreyColor);
    background-color: var(--tfaLightColor);
    border: 1px solid var(--tfaLightColor);
}

.nav-tabs .nav-link {
    color: var(--tfaLightColor);
    border-bottom: 1px solid var(--tfaLightColor);
}

.blink {
    animation: blinker 0.75s linear infinite alternate;
}

.btn-primary, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active, ui-button-icon  {
    border: 1px solid var(--borderColor);
    padding-left: 3%;
    padding-right: 3%;
    background: var(--tfaDarkColor);
    color: var(--tfaLightColor);
}

.btn-primary:hover, .ui-button:hover, .ui-button-icon:hover {
    background-color: inherit;
    background: inherit;
    border-color: inherit;
    border: inherit;
    color: inherit;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.btn-check:focus+.btn-primary, .btn-primary:focus {
        color: inherit;
        background-color: inherit;
        border-color: inherit;
        box-shadow: inherit;
}

.jconfirm.jconfirm-supervan .jconfirm-bg {
    background-color: var(--tfaGreyColor)!important;
}

.jconfirm-buttons button {
    background-color: var(--tfaGreyColor)!important;
    border: 1px solid var(--borderColor)!important;
}

.badge-TFA {
    background-color: #fecb00!important;
    color: #000000!important;
    border-color: #000000!important;
    border: 1px;
    border-style: solid;
}

.badge-RCB {
    background-color: #000!important;
    color: #ebb578!important;
    border-color: #ebb578!important;
    border: 1px;
    border-style: solid;
}

.badge-MI {
    background-color: #035ea3!important;
    color: #fdca35!important;
    border-color: #fdca35!important;
    border: 1px;
    border-style: solid;
}

.badge-CSK {
    background-color: #f8ff97!important;
    color: #092bd4!important;
    border-color: #092bd4!important;
    border: 1px;
    border-style: solid;
}

.badge-DC {
    background-color: #224c8e!important;
    color: #d41f24!important;
    border-color: #d41f24!important;
    border: 1px;
    border-style: solid;
}

.badge-PK {
    background-color: #d40e4e!important;
    color: #aeafae!important;
    border-color: #aeafae!important;
    border: 1px;
    border-style: solid;
}

.badge-KKR {
    background-color: #38205c!important;
    color: #f6c524!important;
    border-color: #f6c524!important;
    border: 1px;
    border-style: solid;
}

.badge-RR {
    background-color: #fd88a8!important;
    color: #172959!important;
    border-color: #172959!important;
    border: 1px;
    border-style: solid;
}

.badge-SRH {
    background-color: #fa6a1d!important;
    color: #000000!important;
    border-color: #000000!important;
    border: 1px;
    border-style: solid;
}

.badge-GT {
    background-color: #1a3557!important;
    color: #ffffff!important;
    border-color: #ffffff!important;
    border: 1px;
    border-style: solid;
}

.badge-LSG {
    background-color: #fecb00!important;
    color: #000000!important;
    border-color: #000000!important;
    border: 1px;
    border-style: solid;
}

.badge-IND {
    background-color: #393a5d!important;
    color: #e95e3d!important;
    border-color: #e95e3d!important;
    border: 1px;
    border-style: solid;
}

.badge-AUS {
    background-color: #e8ea39!important;
    color: #167138!important;
    border-color: #167138!important;
    border: 1px;
    border-style: solid;
}

.badge-BAN {
    background-color: #1d5936!important;
    color: #ff5b43!important;
    border-color: #ff5b43!important;
    border: 1px;
    border-style: solid;
}

.badge-ENG {
    background-color: #79bbe3!important;
    color: #072d5b!important;
    border-color: #072d5b!important;
    border: 1px;
    border-style: solid;
}

.badge-WI {
    background-color: #5e0d1a!important;
    color: #eed540!important;
    border-color: #eed540!important;
    border: 1px;
    border-style: solid;
}

.badge-AFG {
    background-color: #2b5dd0!important;
    color: #ff5b43!important;
    border-color: #ff5b43!important;
    border: 1px;
    border-style: solid;
}

.badge-SL {
    background-color: #0a0c19!important;
    color: #d9774e!important;
    border-color: #d9774e!important;
    border: 1px;
    border-style: solid;
}

.badge-PAK {
    background-color: #00283b!important;
    color: #15ab64!important;
    border-color: #15ab64!important;
    border: 1px;
    border-style: solid;
}

.badge-SA {
    background-color: #16623e!important;
    color: #eeb80c!important;
    border-color: #eeb80c!important;
    border: 1px;
    border-style: solid;
}

.badge-NZ {
    background-color: #1693ad!important;
    color: #ffffff!important;
    border-color: #ffffff!important;
    border: 1px;
    border-style: solid;
}

.badge-IRE {
    background-color: #c1e932!important;
    color: #000000!important;
    border-color: #000000!important;
    border: 1px;
    border-style: solid;
}

.badge-NAM {
    background-color: #04080b!important;
    color: #015aa7!important;
    border-color: #015aa7!important;
    border: 1px;
    border-style: solid;
}

.badge-NED {
    background-color: #f00300!important;
    color: #0d2148!important;
    border-color: #0d2148!important;
    border: 1px;
    border-style: solid;
}

.badge-OMAN {
    background-color: #d70602!important;
    color: #ffffff!important;
    border-color: #ffffff!important;
    border: 1px;
    border-style: solid;
}

.badge-SCO {
    background-color: #170a20!important;
    color: #9b42bf!important;
    border-color: #9b42bf!important;
    border: 1px;
    border-style: solid;
}

.badge-ZIM {
    background-color: #CD151C!important;
    color: #F8B526!important;
    border-color: #F8B526!important;
    border: 1px;
    border-style: solid;
}

.badge-USA {
    background-color: #ff192e!important;
    color: #292e37!important;
    border-color: #292e37!important;
    border: 1px;
    border-style: solid;
}

.badge-PNG {
    background-color: #fbe882!important;
    color: #191617!important;
    border-color: #191617!important;
    border: 1px;
    border-style: solid;
}

.badge-NPL {
    background-color: #bc2025!important;
    color: #101c4f!important;
    border-color: #101c4f!important;
    border: 1px;
    border-style: solid;
}

.badge-CAN {
    background-color: #eb111d!important;
    color: #fefbfe!important;
    border-color: #fefbfe!important;
    border: 1px;
    border-style: solid;
}

.badge-UGD {
    background-color: #fd3522!important;
    color: #fff987!important;
    border-color: #fff987!important;
    border: 1px;
    border-style: solid;
}

.tfa-center-cropped {
    width: 300px;
    height: 300px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.arrow {
    transform: translate(-50%, -50%);
    transform: rotate(90deg);
    cursor: pointer;
}

.arrow span {
    display: block;
    width: 5vw;
    height: 5vw;
    border-bottom: 5px solid var(--tfaLightColor);
    border-right: 5px solid var(--tfaLightColor);
    transform: rotate(-45deg);
    animation: animate 2s infinite;
}

.arrow span:nth-child(2) {
    animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
    animation-delay: -0.4s;
}

.arrow span:nth-child(4) {
    animation-delay: -0.6s;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(225deg) translate(0vw, 0vw);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(225deg) translate(10vw, 10vw);
    }
}

@keyframes animate-small {
    0% {
        opacity: 0;
        transform: rotate(225deg) translate(0vw, 0vw);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(225deg) translate(7vw, 7vw);
    }
}

.tfa-light-background {
    background-color: var(--tfaLightColor);
}

.tfa-nav-button-poly {
    clip-path: polygon(10px 0px, 100% 0%, 100% 10px, 100% 100%, 0% 100%, 0% 10px);
}

.tfa-button-poly {
    clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 90% 100%, 0% 100%, 0% 10%);
}

.tfa-hex-outer {
    -webkit-clip-path: polygon(24.5% 4%, 75.5% 4%, 96% 24.5%, 96% 75.5%, 75.5% 96%, 24.5% 96%, 4% 75.5%, 4% 24.5%);
    clip-path: polygon(24.5% 4%, 75.5% 4%, 96% 24.5%, 96% 75.5%, 75.5% 96%, 24.5% 96%, 4% 75.5%, 4% 24.5%);
    -webkit-clip-path: circle(50%);
    clip-path: circle(50%);
}

.tfa-hex {
    -webkit-clip-path: polygon(25% 5%, 75% 5%, 95% 25%, 95% 75%, 75% 95%, 25% 95%, 5% 75%, 5% 25%);
    clip-path: polygon(25% 5%, 75% 5%, 95% 25%, 95% 75%, 75% 95%, 25% 95%, 5% 75%, 5% 25%);
    -webkit-clip-path: circle(48%);
    clip-path: circle(48%);
}

.tfa-small-screen-only {
    display: none;
}

.tfa-big-screen-only {
    display: none;
}

.tfa-bottom-light-border {
    border-bottom: 1px solid var(--disabledColor);
}

.tfa-small-bottom-margin {
    margin-bottom: 0.2rem;
}

.tfa-current-bid-adjust-team {
}

.tfa-90-height {
    height: 90%;
}

.tfa-cover-full {
    width: 100%;
    height: 100%;
}

.auction-get-player-btn-div-width {
    width: 100%;
}

.team-name-modal {
    font-size: 1.5rem;
}

.modal {
    z-index: 9999!important;
}

.tfa-current-player-img-scale {
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    transform: scale(0.7);
}

.tfa-current-player-img {
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.bounce-enter-active {
  animation: bounce-in 1s;
}
.bounce-leave-active {
  animation: bounce-in 0s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  49% {
    transform: scale(0);
  }
  50% {
    transform: scale(2.5);
  }
  100% {
    transform: scale(1);
  }
}

.blink-fade-enter-active {
  animation: blink-fade 1s;
}
.blink-fade-leave-active {
  animation: blink-fade 0s reverse;
}
@keyframes blink-fade {
  0% {
    opacity: 1;
  }
  14% {
    opacity: 0;
}
28% {
    opacity: 1;
}
40% {
opacity: 0;
}
48% {
opacity: 1;
}
54% {
opacity: 0;
}
61% {
opacity: 1;
}
66% {
opacity: 0;
}
70% {
opacity: 1;
}
74% {
opacity: 0;
}
78% {
opacity: 1;
}
81% {
opacity: 0;
}
84% {
opacity: 1;
}
86% {
opacity: 0;
}
88% {
opacity: 1;
}
90% {
opacity: 0;
}
92% {
opacity: 1;
}
93% {
opacity: 0;
}
94% {
opacity: 1;
}
95% {
    transform: scale(2.5);
  }
  100% {
    transform: scale(1);
  }
}

.vtimeline-content {
    background: #eee0!important;
}

.vtimeline-date {
    background: #eee0!important;
}

.vtimeline:before {
    background: var(--tfaLightColor)!important;
}

.vtimeline-icon {
    background: #eee0!important;
}

.popover {
  z-index: 9999998;
}

.btn.btn-primary.tfa-highlight.collapsed {
    background-color: var(--tfaDarkColor)!important;
    border: 1px solid var(--tfaLightColor)!important;
    color: var(--tfaLightColor)!important;
    font-size: 1.25rem;
    font-weight: 700;
    font-style: italic;
}

#players-table_length {
    label {
        select {
            color: white;
        }
    }
    color: white;
}

#players-table_filter {
    label {
        input {
            color: white;
        }
    }
    color: white;
}

#contests-table_length {
    label {
        select {
            color: white;
        }
    }
    color: white;
}

#contests-table_filter {
    label {
        input {
            color: white;
        }
    }
    color: white;
}

.slide-enter-active {
   -moz-transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -moz-transition-timing-function: ease-in;
   -webkit-transition-timing-function: ease-in;
   -o-transition-timing-function: ease-in;
   transition-timing-function: ease-in;
}

.slide-leave-active {
   -moz-transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slide-enter-to, .slide-leave {
   max-height: 100px;
   overflow: hidden;
}

.slide-enter, .slide-leave-to {
   overflow: hidden;
   max-height: 0;
}

.highlight-icon {
  position: relative;
  display: inline-block;
  border-radius: 16px;
  overflow: hidden;
  padding: 4px;
  border: 4px solid gold;
  animation: borderPulse 3s infinite ease-in-out;
}

.highlight-icon::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, crimson 10%, transparent 70%);
  animation: ripple 5s infinite ease-in-out;
  z-index: 0;
  opacity: 0.2;
}

.highlight-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 215, 0, 0.4), transparent);
  animation: shine 4s infinite linear;
  z-index: 1;
}

.highlight-icon img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

@keyframes borderPulse {
  0%, 100% {
    box-shadow: 0 0 12px gold;
    border-color: var(--tfaLightColor);
  }
  50% {
    box-shadow: 0 0 20px crimson;
    border-color: #cc2708;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0.9);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.05;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.2;
  }
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

.navbar-toggler:focus {
    box-shadow: unset!important;
}

#displayType-toggle:checked {
    background-color: var(--tfaLightColor);
    border-color: var(--tfaLightColor);
}

#soundSetting-toggle:checked {
    background-color: var(--tfaLightColor);
    border-color: var(--tfaLightColor);
}

#timerSetting-toggle:checked {
    background-color: var(--tfaLightColor);
    border-color: var(--tfaLightColor);
}

#sponsorSetting-toggle:checked {
    background-color: var(--tfaLightColor);
    border-color: var(--tfaLightColor);
}

.introjs-overlay {
  background-color: black;
  opacity: 0.5;
}

.introjs-tooltip {
    background-color: rgba(000, 0, 0, 0.75);
}

.row-cols-7 > * {
  flex: 0 0 auto;
  width: calc(100% / 7);
}

.row-cols-8 > * {
  flex: 0 0 auto;
  width: calc(100% / 8);
}

.row-cols-9 > * {
  flex: 0 0 auto;
  width: calc(100% / 9);
}

.row-cols-10 > * {
  flex: 0 0 auto;
  width: calc(100% / 10);
}

#fireworks-container {
  position: absolute;   /* important */
  bottom: 0;
  width: 100%;
  z-index: 0;
  height: 90vh;        /* OR any fixed / responsive height */
  overflow: hidden;     /* prevents canvas from spilling out */
}

#fireworks-container canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none; /* prevents blocking clicks */
}

#contests-table .dataTables_wrapper.dataTables_paginate.paginate_button {
  color: white!important;
}