body{
  font-family: serif;
}

.banner{
    min-height: 200px;
  /* padding-bottom: 70px !important; */
}
.form-section{
  background: rgb(255, 255, 255);
}

.btn-custom{
  background-color: #F4C202 !important;
  font-weight: 600;
  color: #000;
}
.custom-form .btn-custom{
  min-width: 183px;
  padding: 11px;
  color: #fff !important;
  font-size: 19px;
}
.form-label span{
  opacity: 50%;
}
.custom-form{
  background: white;
  max-width: 500px;
  margin: auto;
  top: -50px;
  position: absolute;
  padding: 45px 35px;
  border-radius: 25px;
  box-shadow: 0px -10px 18px 0px #eeeeee;
  width: 100%;
}

.custom-form input{
  background: #f0f0f0;
  border-radius: 10px;
  padding: 10px 15px;
  border: none !important;
  min-height: 53px;
  font-size: 14px;
  /* margin-bottom: 28px !important; */
}
.custom-form .form-label{
  font-weight: 600;
  letter-spacing: 0.2px;
}

.custom-navbar{
  background-color: #F4C202 !important;
  padding: 10px;
  font-size: 35px;
  font-weight: bolder;
  color: #fff;
  min-height: 73px;
  text-align: center;
  justify-content: center;
}

.prize-box{
  border: 7px dotted;
  padding: 6px 15px;
  box-shadow: 0px 0px 11px #ffca00;
  font-size: 20px;
  background: #f4ac02;
  border-radius: 11px;
  color: #fff !important;
  text-align: center;
  font-weight: 700;
}



.flex-center
{
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
}

.flip-dial 
{
  position: relative;
  width: 100%;
  height: 100px;
  max-width: 75px;
}

.flip-card 
{
  position: absolute;
  width: 100%;
  height: 100px;
  transform-style: preserve-3d;
  perspective: 40vw;
  z-index: 0;
}

.flip-card.active {
  z-index: 1;
}

.flip-card .card
{
  width: 100%;
  height: 50%;
  border-radius: 15% 15% 0 0;
  border-bottom-width: 0;
  background: #ffffff;
  transform-origin: center bottom;
/*   transition: transform 0.2s ease-in-out; */
  overflow: hidden;
}

.flip-card.active .card {
  background: #ffffff;
}

.flip-card.flip .card {
  transition: transform 0.2s ease-in-out;
  transform: rotate3d(1,0,0,-90deg);
  z-index: 2;
  background: linear-gradient(0deg, rgb(212, 212, 212),rgb(255, 255, 255));
}

.flip-card .card.bottom
{
  border-radius: 0 0 15% 15%;
  background: #fff;
  transform-origin: center top;
  /* transform: rotate3d(1, 0, 0, 90deg); */
  transition-delay: 0.2s;
  border-top: 1px solid #3a4270;
}

.flip-card.flip .card.bottom {
  /* transform: rotate3d(1,0,0,0deg); */
}

.flip-card .card i
{
  color: #000000;
  font-size: 55px;
  font-style: normal;
  transform: translateY(31%);
  font-weight: bold;
}

.flip-card .bottom i
{
  transform: translateY(-30%);
}

.draw-fn-area{
  display: flex;
  gap: 10px;
  /* background-color: #3A4270; */
  /* background: linear-gradient(0deg, black 77%, #828282); */
  background: linear-gradient(180deg, #721414 40%, #131313);
  padding: 10px 40px;
  align-items: center;
}

.draw-numbers{
  display: flex;
  gap: 14px;
  width:100%;
  justify-content: center;
}
.counter-svg{
  width: 115px;
  height: 115px;
  min-width: 115px;
}
.draw-counter .number-display{
  position: absolute;
  font-size: 55px;
  font-weight: bold;
}

.draw-counter{
  display: flex;
  align-items: center;
  justify-content: center;
}

.draw-area-main{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ctrl-btn-group{
  display: flex;
  gap: 20px;
}

.banner-image{
  /* max-height: calc(100vh - 218px); */
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ctrl-btn-group .btn{
  width:65px;
  height: 65px;
  border-radius: 50px;
  border: 3px solid #F4C202 !important;
  color: #fff !important;
  font-weight: 600;
}

.btn-start{
 background-color: #00AE24;
}
.btn-start:hover,.btn-start:focus,.btn-start:active{
  background-color: #007217 !important;
 }
.btn-stop{
  background-color: #D60000;
}

.btn-stop:hover,.btn-stop:focus,.btn-stop:active{
  background-color: #880000 !important;
}

.flip-dial::before{
  background-color: #3A4270;
  width: 3px;
  height: 12px;
  content: "";
  position: absolute;
  z-index: 15;
  top: 43px;
  left: 0;
}
.flip-dial::after{
  background-color: #3A4270;
  width: 3px;
  height: 12px;
  content: "";
  position: absolute;
  z-index: 15;
  top: 43px;
  right:0;
}
.draw-controls .btn-custom{
  color: #000 !important;
  min-width: 150px !important;
}

.banner-area{
  background-image: url(../images/banner-cover.jpg);
  background-size: cover;
}

.result-view{
  background: white;
  border: 17px solid red;
  display: flex;
  flex-direction: column;
  max-width: 400px;
  justify-content: space-between;
  margin: auto;
  height: 100%;

  padding: 10px;
    border-image: linear-gradient(#dfc778 54%, #fab355 58%) 30;
    border-width: 3px !important;
    border-style: solid;
    overflow: hidden;
    z-index: 2;
    position: relative;
}

.result-view h2{
    font-size: 32px;
    color: #f4c202;
    text-align: center;
    padding: 10px;
    font-family: serif;
}

.result-view .table td{
  font-size: 18px;
    font-weight: 600;
    vertical-align: middle;
    background: #f9f9f7;
    letter-spacing: 1px;
}

.result-view td .btn-custom{
  border: 1px solid #f4c202;
    background: white !important;
    padding: 4px 12px !important;
    font-size: 15px;
}

.btn-prnt{
  border-radius: 0px !important;
  font-family: serif;
  font-size: 27px;
  font-weight: 500;
  margin-top: 11px !important;
  font-size: 18px;
  color: #ffff;
  background: linear-gradient(45deg, #ff9b00, transparent);
}

.modal-header{
  color: #3A4270;
}


.detail-fl-box{
  margin-top: 10px;
  font-size: 14px;
}
.detail-fl-box label{
  min-width: 110px;
  color: #6c757dba;
}

.result-view .table-responsive{
  /* height: calc(100vh - 365px) !important; */
  height: calc(100vh - 407px) !important;
  min-height: 200px;
}
.text-win-area label{
  color: #7e4747;
  font-size: 20px;
  margin-top: 20px;
  display: block;
}
.text-win-area span{
  display: block;
  font-size: 40px;
  font-weight: 600;
  background: -webkit-linear-gradient(#000000, #a68800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff00;
  line-height: normal;
}
.detail-fl-box span{
  font-weight: 700;
}
.trophy-gif{
  max-width: 150px;
  margin: auto;
  display: block;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: white;
  padding: 10px;
  opacity: 71%;
}

.customer-detail .btn-close{
  position: absolute;
  right: 25px;
    top: 25px;
}

.cong-msg{
  /* background: #ffc300; */
    padding: 12px;
    border-radius: 10px;
    background-image: url(../images/golden-bk.jpg);
    background-size: cover;
    margin-bottom: 30px;
}

.winner-popup{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  background-image: url(../images/confetti.gif);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #00000096;
  z-index: 25;
}

.winner-popup .wp-main-body{
  width: 100%;
    max-width: 700px;
    max-height: 500px;
    /* background-color: #3A4270; */
    text-align: center;
    z-index: 108;
    border-radius: 18px;
}

.glitter-border{
  max-width: 500px;
  width: 100%;
  max-height: 260px;
}
.wp-main-content{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wp-main-body h2{
  background: -webkit-linear-gradient(#ffd6d6, #a68800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff00;
  font-size: 75px;
  font-weight: 600;
  font-family: serif;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.wp-main-body h2::before{
  width: 100px;
  content: "";
  border-top: 1px solid #a68800;
  height: 1px;
  position: absolute;
  left: -100px;
}
.wp-main-body h2::after{
  width: 100px;
  content: "";
  border-top: 1px solid #a68800;
  height: 1px;
  position: absolute;
  right: -100px;
}

.cg-cm{
  background: -webkit-linear-gradient(#ffd400, #a68800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff00;
    font-size: 17px;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.w-sl-number{
  background: -webkit-linear-gradient(#ded19f, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff00;
  font-size:75px;
  border: 2px inset #ba9a31;
  border-radius: 9px;
  padding: 2px 20px;
  margin-bottom: 20px;
  font-weight: 700;
}

.winner-declare-area{
  width: 100%;
  /* background: linear-gradient(358deg, #1b2145, #3a4270); */
  background: linear-gradient(358deg, #000000, #6e0000);
  padding: 20px;
  z-index: 1;
  overflow: hidden;
  position: relative;
}

.wp-main-body::after{
  content: "";
    background-image: url(../images/glitter.gif);
    width: 100%;
    height: 110%;
    position: absolute;
    left: 0;
    top: -5%;
    background-size: 50% 99%;
}

.banner-image-collection img{
  width: 50%;
  object-fit: contain;
}
.count-form-spin input{
      background: #ffffff !important;
    box-shadow: none !important;
    font-size: 21px;
    border-radius: 5px !important;
    border: 1px solid #f4c202 !important;
}
.count-form-spin .input-group-text span{
   background: #f4c20257 !important;
    border: none !important;
    color: #3f3306;
    padding: 7px 10px;
    border-radius: 6px;
    margin-left: 10px !important;
    display: block;
    font-weight: 800;
    font-size: 20px;
    line-height: normal;
}
.count-form-spin .input-group-text{
        margin-left: 5px !important;
    border: 1px solid #f4c202;
    color: #ab8801;
}
.total-count-overall{
    display: inline-block;
    margin-top: 18px;
    background: #f4c20214;
    padding: 5px 12px;
    border-radius: 5px;
    border: 1px dashed #f4c202;
}
.total-count-overall b{
        font-size: 19px;
    margin-left: 7px;
    color: #9f7f02;
    font-family: sans-serif;
}

.count-label-modal{
    opacity: 75%;
    margin-bottom: 10px;
}

.result-view  tr:nth-child(even)>td{
  background-color: #f9f9f7 !important;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.error{
  color:red;
}

.total-count-overall {
    display: inline-block;
    font-size: 17px;
    margin-top: 10px;
    color: #000000a1;
}
.count-form-spin{
    background: #f6e6a63b;
    padding: 10px;
}