* {
    margin: 0;
    padding: 0;
  }
  
  body {
    background: url(https://uploadku.vip/bannerlp/seokratos/stadium-1590576_1280.jpg);
    background-size: cover;
    background-position: center;
    font-family: monospace;  
  }

  .logo{
    text-align: center;
    max-width: 100%;
  }

  .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    place-items: center;
    margin: 20px;
    
  }

  .main-box {
    width: 100%;
    max-width: 1400px;
    font-size: 14px;
  }

  .title-box {
    width: 100%;
    height: 40px;
    /* background-color: rgba(255, 255, 255, 0.26); */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .title-box span {
    color: #ffffff;
    font-size: large;
    font-weight: 600;
  }

  .content-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* background-color: rgba(240, 255, 255, 0.432); */
    backdrop-filter: blur(10px);
    /* border-radius: 0 0 10px 10px; */
    padding: 20px;
    gap: 20px;
  }

  #menu {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
  }

  .bet-type {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }


  /* Tabs */
  .container { 
    max-width: 960px; 
    height: 100%;
    margin: 0 auto; 
    padding: 20px;
  }

  /* ------------------- */
  /* PEN STYLES      -- */
  /* ----------------- */

  .tabs {
    position: relative;
    display: flex;
    min-height: 800px;
    /* border-radius: 8px 8px 0 0; */
    /* overflow: hidden; */
  }

  .tabby-tab {
    flex: 1;
  }

  .tabby-tab label {
    display: block;
    box-sizing: border-box;
    /* tab content must clear this */
      height: 40px;
    
    padding: 10px;
    text-align: center;
    background: #eeeeee;
    cursor: pointer;
    transition: background 0.5s ease;
    
  }

  .tabby-tab label:hover {
    background: #99BEB1;
  }

  .tabby-content {
    position: absolute;
    left: 0; bottom: 0; right: 0;
    /* clear the tab labels */
    top: 40px; 
    /* border-radius: 0 0 8px 8px; */
    
    transition: 
      opacity 0.8s ease,
      transform 0.8s ease   ;
    
    /* show/hide */
      opacity: 0;
      transform: scale(0.1);
    
  }

  .tleft {
      transform-origin: left;
  }

  .tright{
      transform-origin: right;
  }

  .tabby-content img {
    float: left;
    margin-right: 20px;
    /* border-radius: 8px; */
  }


  /* MAKE IT WORK ----- */

  .tabby-tab [type=radio] { display: none; }
  [type=radio]:checked ~ label {
    background: #ACA9BB;
    /* z-index: 2; */
  }

  [type=radio]:checked ~ label ~ .tabby-content {
    z-index: 1;
    
    /* show/hide */
      opacity: 1;
      transform: scale(1);
  }

  .tombol{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 20px
}
.btnkiri {
    margin-right: 5%;
}

.button-85 {
padding: 10px 55px;
border: none;
outline: none;
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
transition: all .5s ease;
}

.button-85:before {
content: "";
background: linear-gradient(
    45deg,
    #ff0000,
    #fffb00,
    #ff0000,
    #fffb00
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
-webkit-filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing-button-85 20s linear infinite;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}

@keyframes glowing-button-85 {
0% {
    background-position: 0 0;
}
50% {
    background-position: 400% 0;
}
100% {
    background-position: 0 0;
}
}

.button-85:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 10px;
}

  /* BREAKPOINTS ----- */
  /* @media screen and (max-width: 767px) {
    .tabs { min-height: 400px;}
  } */

  @media screen and (max-width: 600px) {
    .result {
     flex-direction: column;
    }
    .btn2 span:last-child {
        right: 10px;
    }

    .btn2 span:first-child {
        left: 10px;
    }

    .select-items div {
        width: 112%;
        margin-left: auto;
    }
    .parsel div{
        background-color: red;
    }
    

    .tabs { 
        min-height: 800px;
        overflow: scroll;
    }
    .tabby-tab label { 
      height: 60px;
    }
    .tabby-content { top: 60px; }
    .tabby-content img {
      float: none;
      margin-right: 0;
      margin-bottom: 20px;
    }
  }
  .button-85 {
    padding: 10px 35px;
  }

  .bet-type {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 10px;
}

.singlebet, .parlaybet {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-col);
text-align: center;
width: 50%;
gap: 15px;
transition: all .3s ease;
}

.bet-wrapper {
display: flex;
overflow: hidden;
margin-top: 20px;
justify-content: center;
}

.single, .parlay {
display: flex;
transition: all .3s ease;
flex-direction: column;
/* gap: 20px; */
width: 0;
height: 0;
opacity: 0;
}

.single.on, .parlay.on {
width: 100%;
height: 100%;
opacity: 1;
}

.btn {
width: 100%;
/* background-color: var(--btn2-col); */
/* filter: drop-shadow(0px 4px 5px #0f0f0f); */
backdrop-filter: blur(2px);
/* border: 1px solid var(--main-col); */
/* border-radius: 10px; */
height: 2.75rem;
cursor: pointer;
user-select: none;
}


input[type="text"], input[type="number"] {
border: none;
background-color: transparent;
text-align: center;
font-size: 18px;
font-weight: 700;
width: 100%;
border-bottom: 1px solid black;
margin: 10px;
}

input:focus {
outline: none;
}


.btn.on {
color: var(--main-col);
background-color: #cfe1fb;
}

.btn:hover {
color: var(--main-col);
background-color: #cfe1fb;
opacity: .8;
}

.btn:active {
transform: translate(1px,1px);
}

.options {
display: flex;
flex-direction: row;
width: 100%;
gap: 10px;
align-items: center;
margin: 10px 0;
}

.field {
flex-direction: column;
}

.odds, .status, .bet {
display: flex;
align-items: center;
justify-content: space-between;
cursor: default;
width: 100%;
gap: 10px;
padding: 0 12px;
/* background-color: var(--btn-col); */
}


.status {
z-index: 1;
}

.custom-select {
width: 100%;
padding-right: 20px;

}

/* The container must be positioned relative: */
.custom-select {
position: relative;
}

.custom-select select {
display: none;
/*hide original SELECT element: */
}

.select-selected {
background-color: transparent;
}

/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: rgb(255, 255, 255) transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
border-color: transparent transparent rgb(255, 255, 255) transparent;
top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
color: var(--text2-col);
padding: 8px 0;
border: 1px solid transparent;
border-color: transparent;
cursor: pointer;
}

.select-items div {
padding: 8px 6px;
background-color:#ACA9BB;
margin-left: auto;
}

.select-items:hover {
background-color:#ACA9BB;
}

/* Style items (options): */
.select-items {
position: absolute;
background-color: var(--btn-col);
top: 100%;
left: -5px;
right: 10px;
z-index: 1;
}

/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}

.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}

.odds.select {
z-index: 4;
}

.odds:hover, .status:hover, .bet:hover, .odds:hover .select-selected, .status:hover .select-selected {
color: black;
background-color: var(--btn-col);
opacity: 1;
}

.odds:active, .status:active, .bet:active {
transform: translate(0,0);
}

.btn2 {
background-color: #D0F6E9;
/* border-radius: 10px; */
height: 4rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
/* filter: drop-shadow(0px 4px 5px #0f0f0f); */
user-select: none;
padding: 0 12px;

}

.btn2 span {
position: relative;
color: var(--text-col);
}

.btn2 span:first-child {
/* left: 20px; */
font-size: 16px;
}

.btn2 span:last-child {
right: 20px;
font-size: 20px;
}

.result {
display: flex;
/* flex-direction: column; */
gap: 15px;
align-items: center;
justify-content: center;
}

.btn3 {
width: 100%;
background-color: var(--btn-col);
/* filter: drop-shadow(0px 4px 5px #0f0f0f); */
backdrop-filter: blur(2px);
/* border: 1px solid var(--main-col); */
/* border-radius: 15px; */
height: auto;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
justify-content: center;
user-select: none;
}

.note span {
color: var(--text3-col);
align-self: flex-start;
padding: 20px 0 0 20px;
}

.isian {
width: 80%;
display: flex;
flex-direction: column;
padding: 10px;
border-bottom: 1px solid #4b4b4b;
}

.isian:last-child {
margin-bottom: 50px;
}

input[type="checkbox"] {
display: none;
}

.dropdown {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
background-color: #e7e7e7;
width: 25px;
height: 25px;
align-self: center;
border-radius: 50%;
position: absolute;
transition: all .2s ease;
margin-left: -30px;
}

.dropdown::before {
content: ">";
font-size: small;
font-weight: bolder;
position: relative;
transition: all .2s ease;
}

.dropdown.on::before {
transform: rotate(90deg);
}

.wrapper {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20px;
cursor: pointer;
margin-left: 25px;
user-select: none;
}

.desc {
position: relative;
top: -100%;
height: 0;
color: #4b4b4b;
margin-top: 0;
opacity: 0;
transition: all .4s ease;
overflow: hidden;
}

.desc.on {
margin-top: 15px;
opacity: 1;
top: 0;
height: auto;
}

.lgnd {
width: 5%;
padding: 8px;
text-wrap: nowrap;
text-align: center;
}

.odds.add {
width: 42%;
}

.btn.status {
width: 50%;
}

.btn.bet, .btn.odds, .btn.status {
padding-right: 22px;
border: 1px dashed black;
}

.player-background {
display: flex;
width: 100%;
justify-content: space-between;
position: fixed;
bottom: 0;
z-index: -1;
}

.player-background div {
width: 400px;
}

.player-background img {
width: 100%;
}

@media screen and (max-width: 850px) {
input[type="text"], input[type="number"] {
    border-left-width: 0;
    border-radius: 0;
}
}

@media screen and (max-width: 600px) {

.base-container {
    margin-bottom: 170px;
}

.options {
    flex-direction: column;
}

.player-background {
    justify-content: flex-start;
}

.player-background img {
    width: 300px;
}

.player-background img[alt="player2"] {
    display: none;
}

.odds, .status, .bet, .lgnd {
    width: auto;
}

.lgnd {
    text-align: center;
}

.odds, .btn.status, .btn.bet, .odds.add {
    width: 91%;
}
}

@media screen and (max-width: 350px) {
  .button-85 {
    padding: 5px 10px;
    transition: all .5s ease;
  }
}

.fContainer {
width: 100%;
}
.firstname {
text-align: center;
margin: 20px;
}

.accord {
margin: 10px;
}

.accordion {
background-color: #ffffff;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
filter: drop-shadow(0px 0px 5px #5F5C6D);
}

/* .active, .accordion:hover {
background-color: #ccc;
} */

.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2212";
} 

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

.insidebox {
margin: 15px 0;
/* overflow: scroll; */
max-height: 390px;
color:black;
}

.insidebox h1 {
text-align: center;
margin-bottom: 20px;
color:black;
font-weight: bold;
}

.insidebox ul {
margin: 10px 10px 20px 20px;
}

.insidebox ul > li {
list-style-type: decimal;
}

.insidebox p {
font-family: "Verdana";
color:black;
margin-bottom: 20px;
}

.insidebox a {
color:#ff0000;
}

.insidebox img {
width: 70%;
margin-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 18px;
}

.footer {
margin-top: 20px;
text-align: center;
color: rgb(255, 187, 0);
}