:root {
  --red: rgb(255, 0, 0);
  --blue: rgb(0, 0, 248);
  --yellow: rgb(255, 215, 0);
  --green: rgb(0, 255, 13);
  --item-color: white;
}

@media print {
  .no-print {
    display: none;
  }
}

.hidden {
  display: none;
  /* opacity: 0;
  pointer-events: none; */
}

/* .filters {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
} */

.bg-red {
  background: var(--red);
}

.bg-blue {
  background: var(--blue);
}
.bg-yellow {
  background: var(--yellow);
}
.bg-green {
  background: var(--green);
}
.my-table {
  border: 1px solid black;
  border-collapse: separate;
  table-layout: fixed;
  width: 99%;
}

.my-table td,
.my-table th {
  border: 1px solid black;
  padding: 5px;
}

.my-table-white {
  border: 1px solid white;
  border-collapse: separate;
  table-layout: fixed;
  width: 99%;
}

.my-table-white td,
.my-table-white th {
  border: 1px solid white;
  padding: 5px;
  width: auto;
}
.my-table-print {
  border: 1px solid black;
  border-collapse: separate;
  /* table-layout: fixed; */
  width: 100%;
}

.my-table-print td,
.my-table-print th {
  border: 1px solid black;
  padding: 5px;
  /* width: auto; */
}
.my-table-btn {
  border: 1px solid #262626;
  border-collapse: collapse;
  /* table-layout: fixed; */
  width: 100%;
}

.my-table-btn td,
.my-table-btn th {
  border: 1px solid #262626;
  padding: 2px;
  width: auto;
}

.text-small {
  font-size: 0.8rem;
}
.text-middle {
  font-size: 1.3rem;
}

.text-roman {
  font-family: "Times New Roman", Times, serif;
  font: 1em Times;
  font-weight: bolder;
}

.bg-circle {
  /* border-radius: 90%; */
  color: white;
  height: 20px;
  width: 20px;
  text-align: center;
  padding: 2px;
}

.tab-buttons {
  width: 100px;
  height: 100px;
}

.avatar-circle {
  border-radius: 50%;
  overflow: hidden;
}

.score-container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.nilai-audience {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17rem;
  line-height: 1;
  font-weight: bold;
}

.bg-dim {
  background-color: rgba(67, 68, 67, 0.411);
}

.text-outline {
  text-shadow: 
    -1px -1px 0 #5e5c5c44,
    1px -1px 0 #5e5c5c44,
    -1px 1px 0 #5e5c5c44,
    1px 1px 0 #5e5c5c44; 
}

.td-skor {
  border: 1px solid white;
  text-align: center;
  padding: 0px;
}

.box-penalty {
  height: 33.3%;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  vertical-align: middle;
}

.text-red {
  color: red;
}

.text-blue {
  color: blue;
}

.bg-grad-red {
  background: var(--red);
  background: linear-gradient(
    180deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(189, 0, 0, 1) 100%
  );
  color: #fff;
}

.bg-grad-blue {
  background: var(--blue);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 248, 1) 0%,
    rgba(0, 0, 177, 1) 100%
  );
  color: #fff;
}

.bg-grad-green {
  background: var(--green);
  background: linear-gradient(
    180deg,
    rgb(0, 220, 0, 1) 0%,
    rgba(0, 150, 0, 1) 100%
  );
  color: #fff;
}
.bg-grad-yellow {
  background: var(--yellow);
  background: linear-gradient(
    180deg,
    rgb(255, 215, 0, 1) 0%,
    rgb(230, 200, 0, 1) 100%
  );
}
.my-modal {
  padding: 1em;
  max-width: 50ch;
}

.my-modal::backdrop {
  background: white;
  opacity: 0.4;
}

.aud-modal {
  padding: 1em;
  max-width: 50ch;
}

.text-timer {
  font-size: 35vh;
  font-weight: 700;
  background: black;
  color: white;
}

.timer {
  font-family: sans-serif;
  color: white;
}

.timer__part {
  font-weight: 700;
  font-size: 24vh;
  color: white;
}

.timer-audience {
  font-weight: 700;
  font-size: 10vh;
  color: white;
}

.timer__btn {
  height: 2em;
  background: #8208e6 !important;
  color: white;
  width: 100%;
  font-size: 2em;
  font-weight: bold;
}

.timer__btn--start {
  background: #00b84c !important;
}

.timer__btn--stop {
  background: #ff0256 !important;
}

.ronde__btn {
  height: 2em;
  background: #00b84c;
  width: 100%;
  color: white;
  font-size: 2em;
  font-weight: bold;
}

.verif__btn {
  height: 3em;
  background: #00b84c;
  width: 100%;
  color: white;
  font-size: 1em;
  font-weight: bold;
}

.ronde__btn--aktif {
  background: yellow;
  color: #00b84c;
}

.audience__timer {
  font-family: sans-serif;
  font-size: 7em;
  font-weight: bold;
}

.singleEvent__view {
  height: 50vh;
  object-fit: cover;
  object-position: top center;
  margin-bottom: 3rem;
  border-radius: 0.7rem;
}

.singleEvent__title {
  font-size: 3.6rem;
  font-weight: 700;
  margin-bottom: 3rem;
}

#side_nav {
  background: #000;
  min-width: 250px;
  max-width: 250px;
  transition: all 0.3s;
}
.content {
  min-height: 100vh;
  width: 100%;
}
hr.h-color {
  color: #eee;
  /* border: 2px solid white; */
}
.sidebar li.active {
  background: #eee;
  border-radius: 8px;
}
.sidebar li.active a,
.sidebar li.active a:hover {
  color: #000;
}
.sidebar li a {
  color: #fff;
}

@media (max-width: 767px) {
  #side_nav {
    margin-left: -250px;
    position: fixed;
    min-height: 100vh;
    z-index: 1;
  }
}

#side_nav.active {
  margin-left: 0;
}

.tr__search {
  border-radius: 20%;
}

.card__purple {
  background-color: #8208e6;
}

.alert {
  display: inline-flex;
  gap: 3rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.5rem;
  border-radius: 3px;
  border: 1px solid var(--color-white-light);
  margin-bottom: 1rem;
  margin-right: 1rem;
}

.loser {
  background-color: grey;
  color: lightgrey;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

.border-black {
  border: 1px solid black;
}

section {
  font-family: Arial, Helvetica, sans-serif;
  /* border: 10px solid gray; */
  height: 100vh;
  background: black;
  position: relative;
}

.full {
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(-50vw + 50%);
}

.full-text {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;

  font-size: 14rem;
  font-weight: bolder;
  margin: 0;
  padding: 0;
}

.timer__display {
  max-width: 700px;
  width: 100%;

  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0;

  background: black;
}

.btn-dwn-tgl-clear {
  width: 10rem;
  height: 6rem;
  /* background: limegreen; */
  /* background: #00b84c; */
  color: white;
  font-size: 2.5rem;
  border-radius: 1rem;
  margin-right: 15px;
}

.btn-dwn-tgl {
  width: 10rem;
  height: 6rem;
  /* background: red; */
  /* background: #00b84c; */
  color: white;
  font-size: 2.5rem;
  border-radius: 1rem;
  margin-left: 15px;
}

.seni__btn--blue {
  height: 3em;
  background: blue;
  width: 100%;
  color: white;
  font-size: 2em;
  font-weight: bold;
}
.seni__btn--red {
  height: 3em;
  background: red;
  width: 100%;
  color: white;
  font-size: 2em;
  font-weight: bold;
}

.seni__btn--aktif {
  background: yellow;
  color: #00b84c;
}

.w-3 {
  width: 3%;
}
.w-5 {
  width: 5%;
}

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.slide-in {
  animation: slideIn 1s forwards;
}

.slide-out {
  animation: slideOut 1s backwards;
}

.btn-td {
  height: 5rem;
}