body {
    margin:0;
    font-family: 'Roboto' ;
     color: #59597C;
}
.background-radial{
    height: 100vh;
    width: 100vw;
    top: auto;
    display: flex;
    position: absolute;
    z-index: -1;
}
span.desc{
  color: #9695A8;
}
.background-radial #grad1{
   justify-self: end;
  width:100vw;
  height:25vh;
  background: radial-gradient(circle at top right,  rgba(57, 100, 229,0.1), #ffffff 60%)
}
.background-radial #grad2{
    justify-self: start;
    width:100vw;
    height:25vh;
    background: radial-gradient(circle at center left,  rgba(255, 186, 130,0.1), #ffffff 30%)
 }
 .background-radial #grad3{
    justify-self: end;
    width:100vw;
    height:25vh;
    background: radial-gradient(circle at top right,  rgba(57, 100, 229,0.1), #ffffff 45%)


 }
 /* 
 rgba(57, 100, 229,0.1) 
  rgba(255, 186, 130,0.1)
 */
 .background-radial #grad4{
    justify-self: start;
    width:100vw;
  height:25vh;
  background: radial-gradient(circle at center left,  rgba(255, 186, 130,0.1), #ffffff 66%)

 }
 .table-borderless > tbody > tr > td,
 .table-borderless > tbody > tr > th,
 .table-borderless > tfoot > tr > td,
 .table-borderless > tfoot > tr > th,
 .table-borderless > thead > tr > td,
 .table-borderless > thead > tr > th {
    padding: 2px;
    border: none;
    /* vertical-align: middle; */
 }
 .borderless td, .borderless th {
   border: none;
}
 .smw-logo{
    height: auto;
    width: 136px;
 }

 div.content{
    padding: 5vw 5vw 0 5vw;
    font-weight: 700;
    margin-top: 3vw;
    width: 100vw;
 }
 h1.f{
   font-size: 5vw;
 }

 div.jtiket{
    display: flex;
    width: 100%;
    justify-content: center;
 }

 div.jtiket .single-tiket{
    height: max-content;
    width: 98%;
    background-color: rgb(255, 255, 255);
    border-radius: 16px;
    margin: 5vw 0 5vw 0;
    box-shadow:0px 10px 16px  rgba(57, 100, 229,0.2);
    padding: 2vw 3vw;
    display: block;
    transition: transform 0.1s;
 }
 div.jtiket .single-tiket:hover {
   transform: scale(1.02);
 }

 div.jtiket .single-tiket span.title{
   justify-self: start;
   font-size: 5vw;
   color: #FFA500;
 }
 div.jtiket .single-tiket div.price{
   display:block;
 }
 div.jtiket .single-tiket label{ 
   font-size: 3vw;
   color: #9695A8;
   display: block ;
   margin: 0;
   margin-right: auto;
   
 }
 span.harga{ 
   font-size: 3vw;
   font-weight: 700;
   color: #633C33;
 }
 div.jtiket .single-tiket div.deskripsi{ 
   font-size: 4w;
   color: #9695A8;
   font-weight: 700;
 }
 div.deskrips{ 
  font-size: 4w;
  color: #9695A8;
  font-weight: 700;
}
 div.tiket-footer{
   font-size: 3vw;
   padding: 0vw 1vw 7vw 0;
 }
 div.tiket-footer div.buy{
   display: inline;
   float: right;
 }
 div.tiket-footer span.available{
   background-color: rgba(255, 186, 130, 0.15);
   color: #FFBA82;
   padding: 1vw 3vw;
   border-radius: 10px;
 }
 div.tiket-footer a.buy{
   background-color: #8AB8D9;
   padding: 1.4vw 3.7vw;
   border-radius: 10px;
   text-decoration: none;
   color: #ffffff;
 }
 div.tiket-footer a.buy:hover{
   background-color: #FFA500;
   ;
 }
 div.tiket-footer a.buy a{
 text-decoration: none;
 color: #fff;
 height: 40%;
 }
 .i-orange{
   color : rgba(255, 186, 130);
}
.pointer{
   cursor: pointer;
}
/* smw card */

div.smw-card{
   margin: 2vw 0 4vw 0 ;
   background-color: rgb(255, 255, 255);
   box-shadow:0px 10px 16px  rgba(57, 100, 229,0.2);
   border-top-right-radius: 10px;
   border-top-left-radius: 10px;
   padding: 2vw 2vw;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;

}
div.smw-card div.smw-card-header{
   border-bottom: 1px dashed #59597C;
   border-color: rgba(255, 186, 130, 0.318);
   padding: 5px 0;
}
div.smw-card div.smw-card-body{
   padding: 1vw ;
}
div.qty{
   font-size: 6vw;
}

 div.smw-card-body .card-label{
   border-color: rgba(255, 186, 130, 0.318);
}
.card-label{
   font-size: 3vw;
   color: #FFA500;;
}
div.smw-card-body span.harga{
   display: block;
}
.form-group label{ 
 font-size: 3.5vw;
}

      /*card tgl input */
      .input-date {
         position: relative;
         display: block;
       }
       .hidden-input {
         position: absolute;
         opacity: 0;
         width: 100%;
         height: 100%;
         cursor: pointer;
         z-index:2;
       }
   
       .date-label {
         position: relative; 
         display: block;
         font-size: 3.5vw;
         cursor: pointer;
         z-index: 1;
       }
   
       /* .date-label:hover {
         background-color: #ff0303fc;
       } */
       .success-message {
        background-color: #dcf8d7;
        color: #4d721c;
        padding: 10px;
        border-radius: 5px;
        font-size: 14px;
        border: 1px solid #f5c6cb;
    }
 div.info{
   font-size: 3.5vw;
 }
 div.info p{
   text-align: center;
 }
 .f12{
   font-size: 12px;
 }
 .btn-orange{
   color: #fff;
   text-shadow: 2px 2px rgba(255, 251, 248, 0.131);
    background-color: #FFA500;
    border-color: rgba(255, 186, 130,0.5);
    border-radius: 5px;
    float: auto;
 }
 .ft{
  font-size:3vw;
}
.ftc{
  /* color: #f23939; */
  color: #59597C;
}
 .mhs{
    min-height: 110px;
  }
@media (min-width:320px)  { 
  div.scan-member{
    display: none;
    }
    span.desc {
      font-size: 2.5vw;
      line-height: 2vw;
  }
  a#hidenav{
    display: none;
  }
  .fm{
    font-size: 3vw;
  }
  div.tiket-footer a.buy{
    padding: 2.4vw 4.7vw;
  }
}
@media (min-width:481px)  {
  .fm{
    font-size: 3vw;
  }

  div.scan-member{
    display: block;
    }
    span.desc {
      font-size: 2.5vw;
  }
  a#hidenav{
    display: none;
  }
  div.tiket-footer a.buy{
    padding: 2.4vw 4.7vw;
  }
 }
@media (min-width:641px)  { 
  a#hidenav{
    display: none ;
  }
  div.scan-member{
   display: none;
   }
   span.desc {
    font-size: 1vw;
}
 }
@media (min-width:768px)  { 
  .fm{
    font-size: 1vw;
  }
  span.desc {
    font-size: 1vw;
}
  div.scan-member{
    display: block;
    }
   div.content{
      padding-top: 1vw;
   }
   span.desc{
    font-size: 12px;
   }
   h1.f{
    font-size: 4vw;
   }
   div.jtiket .single-tiket{
    height: max-content; 
    margin: 20px 0 20px 0;
    }
    .lg-100{
       width: 100%;
     }
   div.jtiket .single-tiket span.title{
    justify-self: start;
    font-size: 16px;
  }
  div.jtiket .single-tiket div.price{
    display:block;
    margin-left: auto;
  }
  div.jtiket .single-tiket label{ 
    font-size: 1vw;
  }
  div.jtiket .single-tiket div.price span.harga{ 
    font-size: 12px;
  }
  div.tiket-footer{
    font-size: 1vw;
    padding: 2vw 0;
  }
  div.tiket-footer div.buy{
    display: inline;
    float: right;
  }
  div.tiket-footer span.available{
    padding: 1vw 2vw;
    border-radius: 10px;
  }
  div.tiket-footer a.buy{
    padding: 1.4vw 3.7vw;
    border-radius: 10px;
  }
   /*   d */
     
   div.smw-card div.smw-card-body{
    padding: 1vw ;
  }
  div.qty{
    font-size: 2vw;
  }

  div.smw-card-body .card-label{
    border-color: rgba(255, 186, 130, 0.318);
  }
  .card-label{
    font-size: 1.5vw;
    color: #FFA500;;
  }
  div.smw-card-body span.harga{
    display: block;
  font-size: 30px;

  }
  .form-group label{ 
  font-size: 1.5vw;
  }

   /*card tgl input */
   .input-date {
      position: relative;
      display: block;
    }
    .hidden-input {
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      z-index:2;
    }

    .date-label {
      position: relative; 
      display: block;
      font-size: 2vw;
      cursor: pointer;
      z-index: 1;
    }

    /* .date-label:hover {
      background-color: #ff0303fc;
    } */

    div.info{
      font-size: 1vw;
    }
    .ft{
      font-size: 2vw;
    }
    }
@media (min-width:1025px) { 
  span.desc {
    font-size: 1vw;
}
  div.scan-member{
    display: block;
    }
    div.content{
        padding-top: 1vw;
     }
     h1.f{
      font-size: 4vw;
     }
     div.jtiket .single-tiket{
      height: 18vw; 
      margin: 20px 0 20px 0;
      }
      .lg-100{
         width: 100%;
       }
     div.jtiket .single-tiket span.title{
      justify-self: start;
      font-size: 18px;
    }
    div.jtiket .single-tiket div.price{
      display:block;
      margin-left: auto;
    }
    div.jtiket .single-tiket label{ 
      font-size: 1vw;
    }
    div.jtiket .single-tiket div.price span.harga{ 
      font-size: 16px;
    }
    div.tiket-footer{
      font-size: 1vw;
      padding: 2vw 0;
    }
    div.tiket-footer div.buy{
      display: inline;
      float: right;
    }
    div.tiket-footer span.available{
      padding: 1vw 2vw;
      border-radius: 10px;
    }
    div.tiket-footer a.buy{
      padding: 1.2vw 2.5vw;
      border-radius: 10px;
    }
     /* smw-card */
     
     div.smw-card div.smw-card-body{
      padding: 1vw ;
    }
    div.qty{
      font-size: 2vw;
    }

    div.smw-card-body .card-label{
      border-color: rgba(255, 186, 130, 0.318);
    }
    .card-label{
      font-size: 1.5vw;
      color: #FFA500;;
    }
    div.smw-card-body span.harga{
      display: block;
    font-size: 30px;

    }
    .form-group label{ 
    font-size: 17px;
    }

     /*card tgl input */
     .input-date {
        position: relative;
        display: block;
      }
      .hidden-input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index:2;
      }
  
      .date-label {
        position: relative; 
        display: block;
        font-size: 2vw;
        cursor: pointer;
        z-index: 1;
      }
  
      /* .date-label:hover {
        background-color: #ff0303fc;
      } */

      div.info{
        font-size: 1vw;
      }
      .ft{
        font-size: 1vw;
      }
  }

@media (min-width:1281px) { 
  div.scan-member{
    display: block;
    }
  .ft{
    font-size: 1vw;
  }
    div.content{
         padding-top: 1vw;
         margin: 20px 0 20px 0;
     }
     h1.f{
      font-size: 4vw;
     }
    .lg-100{
      width: 100%;
    }
    div.jtiket .single-tiket{
      height: 18vw; 
      margin: 20px 0 20px 0;
      }
      div.tiket-footer{
        padding: 2rem 0;
        display: flex;
        justify-content: end;
        align-items: end;
       }
       div.tiket-footer div.buy{
         display: inline;
         float: right;
       }
       div.tiket-footer span.available{
         padding: 1vw 2vw;
         border-radius: 10px;
       }
       div.tiket-footer a.buy{
         padding: 1vw 2vw;
         border-radius: 10px;
       }
       div.smw-card{
        margin: 2vw 0 4vw 0 ;
        background-color: rgb(255, 255, 255);
        box-shadow:0px 10px 16px  rgba(57, 100, 229,0.2);
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        padding: 1vw 2vw;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
     
     }
     div.smw-card div.smw-card-header{
        border-bottom: 1px dashed #59597C;
        border-color: rgba(255, 186, 130, 0.318);
        padding: 5px 0;
     }
     div.smw-card div.smw-card-body{
        padding: 1vw ;
     }
     div.qty{
        font-size: 5vw;
     }
     
      div.smw-card-body .card-label{
        border-color: rgba(255, 186, 130, 0.318);
     }
     .card-label{
        font-size: 3vw;
        color: #FFA500;;
     }
     div.smw-card-body span.harga{
        display: block;
     }
     .form-group label{ 
      font-size: 3.5vw;
     }

     /* smw-card */
     
    div.smw-card div.smw-card-body{
      padding: 1vw ;
    }
    div.qty{
      font-size: 2vw;
    }

    div.smw-card-body .card-label{
      border-color: rgba(255, 186, 130, 0.318);
    }
    .card-label{
      font-size: 1.5vw;
      color: #FFA500;;
    }
    div.smw-card-body span.harga{
      display: block;
    font-size: 35px;

    }
    .form-group label{ 
    font-size: 18px;
    }

     /*card tgl input */
     .input-date {
        position: relative;
        display: block;
      }
      .hidden-input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index:2;
      }
  
      .date-label {
        position: relative; 
        display: block;
        font-size: 2vw;
        cursor: pointer;
        z-index: 1;
      }
  
      /* .date-label:hover {
        background-color: #ff0303fc;
      } */
      div.info{
        font-size: 1vw;
      }
      }
      @media (max-width:1920) { 
        div.tiket-footer{
          font-size: 1vw;
          padding: 4vw 0;
        }
    }
 .footer {
   background-color: rgba(57, 100, 229, 0.1);
   padding: 20px;
    bottom: 0;
   text-align: center;
   z-index : 2
 }
 .m-form {
  height: 25px;
  padding: 2px;
 }

 .form-control{
  font-size: 1.3rem;
 }
 table tr td{
  font-weight: 400;
 }

 .lanjut-order
  {
    padding: 15px 15px;
    color: white;
    font-size: 18px;
    border-radius: 13px;
    font-weight: 550;
    margin-right: 18px;
}
@media (min-width: 1280px) and (max-width: 1366px) {

 
   div.jtiket .single-tiket span.title{
    justify-self: start;
    font-size: 2vw;
  }
 
  div.jtiket .single-tiket div.price span.harga{ 
    font-size: 1.6vw;
  }

  span.desc{ 
    font-size: 1vw;
  }
}
@media (min-width: 1367px) and (max-width: 1980px) {

  div.jtiket .single-tiket span.title{
    justify-self: start;
    font-size: 2vw;
  }

  div.jtiket .single-tiket div.price span.harga{ 
    font-size: 1.3vw;
  }

  span.desc{ 
    font-size: 1vw;
  }
}

div.scan-member{
 text-align: center;
}
@keyframes scanAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
div.scan-member a{
  font-size: 19px ;
  font-weight: 600;
  padding: 9px;
  animation: scanAnimation 5s infinite alternate;

}
.steam-app-title {
  font-size: 36px; /* Ukuran font */
  font-weight: bold; /* Ketebalan font */
  text-align: center; /* Pusatkan teks */
  color: #007acc; /* Warna teks */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* Bayangan teks */
  font-family: 'Arial', sans-serif;


}
.member-code {
  width: calc(35ch + 30px);
}

.member-code {
  font-size: 24px;
}

.ag-center{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  margin: auto;
}
.ag-center .smw-card{
  width: 100%;
}
.smid{
  font-weight: bold;
  text-align: center;
  padding: 1.4rem;
  color: #FFA500;
}

a#hidenav {
  display: block; /* Sembunyikan tombol awalnya */
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color:  #FFA500;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 99;
}
#html5-qrcode-button-camera-start,
#html5-qrcode-button-camera-stop {
    padding: 4px 6px;
    color: #fff;
    text-shadow: 2px 2px rgba(255, 251, 248, 0.131);
    background-color: #969bffde;
    border-color: rgba(255, 186, 130, 0.5);
    border-radius: 5px;
    float: auto;
    margin-bottom: 5px;
}
#html5-qrcode-button-camera-start:hover,
#html5-qrcode-button-camera-stop:hover {
  background-color: #5860fcde;

}
.steam-app-title img{
  height: 40px;
  width: auto;
}


.checkbox-lg{
  width: 25px;
  height: 18px;
}
.b-600{
  font-weight: 600;
}
.custom-div {
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.max-content{
  width: max-content;
  height: max-content;
}