@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap");

.creo-coins{
 background-image: url('./assets/3drender.png'); 
 height: 300px;
 width: 100%;
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: initial;
 background-position: center;
}

.creo-rewards{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 51.2px;
    line-height: 60px;
    /* display: flex; */
    align-items: center;
    padding: 93px 0;
    /* border: 3px solid green; */
    text-align: center;
    color: white;
}

/* ul li a .active{
    border-radius: 100px !important;
    padding: 10px 60px !important; 
    background: #117AED !important;
}

ul li a{
    border-radius: 100px !important;
    border: 1px solid gray !important;
    padding: 10px 60px !important;
}

ul li {
    padding: 0 15px !important;
} */

.coin-balance-wrapper p{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 23px;
    /* display: flex; */
    align-items: center;
    text-align: center;
    color: #000000;
    /* margin: 20px 3px; */
    margin-top: 1rem;
}

.coin-balance-check p{
    /* margin-top: 1rem; */
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 51.2px;
    line-height: 60px;
    display: flex;
    align-items: center;
    color: #000000;
    padding: 0 12px;
}

.coin-balance-check{
    display: flex;
    justify-content: center;
    align-items: start;
}

.coin-balance-update{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    /* display: flex; */
    align-items: center;
    color: #000000;
    text-align: center;
}

.accordion-button:focus{
    border-color: #ABA4A4 !important;
    outline: none !important;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed){
    color: #000000 !important;
    background-color: #ffffff !important;
}

.coupon {
    /* border: 5px dotted #bbb; */
    width: 91%;
    border-radius: 15px; /* Rounded border */
    margin: 0 auto; /* Center the coupon */
    max-width: 600px;
}
  .promo {
    background: #ccc;
    padding: 3px;
  }
  
  .expire {
    color: red;
  }
  .super-p{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    display: flex;
    align-items: center;
    color: #000000;
    margin-bottom: 6px;
  }
  .hilight-p{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    color: #000000;
  }

  .coupon button{
    background: #00B4FF;
    border-radius: 5px;
    /* transform: matrix(-1, 0, 0, 1, 0, 0); */
    padding: 0.5rem 5.4rem;
    border: none;
    color: white;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 19.2682px;
    line-height: 23px;
    /* display: flex; */
    align-items: center;
    color: #FFFFFF;
    width: 100%;
  }

.table-button{
  background: #FFFFFF;
  border: 1px solid #117AED;
  border-radius: 5px;
  padding: 8px 0px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  /* display: flex; */
  align-items: center;
  text-align: center;
  color: #117AED;
  width: 100%;
}

table{
  text-align: center;
}

td{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  /* line-height: 19px; */
  /* display: flex; */
  align-items: center;
  text-align: center;
  color: #000000;
}
td{
  border-bottom: 1px solid #C7C7C7 !important;
}

th{
  text-align: center !important;
}
.table{
  text-align: start;
  margin-bottom: 0px !important;
}
.table tr td:last-child{
  color: #000000 !important;
}
::-webkit-scrollbar {
  width: 0px;
}

.progressbar{
  position: relative;
  top: -30px;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.progressbar li{
  list-style-type: none;
  float: left;
  width: 11.11%;
  position: relative;
  text-align: center;
}

.progressbar li::before{
  content: '\2736';
  /* width: 12px; */
  height: 20px;
  /* border: 1px solid #ddd; */
  display: block;
  text-align: center;
  line-height: 30px;
  margin: 0 auto 10px auto;
  /* border-radius: 50%; */
  /* background-color: #ffffff; */
  position: relative;
  z-index: 1;
  /* color: darkgray; */
  font-size: 36px;
}
.progressbar li::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #ddd;
  top: 13px;
  left: 0%;

}
.progressbar li.active{
  color: #FFA500;
}
.progressbar li.active::before{
  border-color: #FFA500;
}
.progressbar li.active + li::after{
  background-color: #FFA500;
}

.progressbar li.active:first-child::after{
  background-color: #FFA500;

}

.card{
  background: #E6E9ED !important;
  border-radius: 20px !important;
  border: none !important;
  /* width: 150px; */
  /* height: 75px; */
  background-color: black;
  /* color: #fff; */
  /* padding: 24px 0px; */
  position: relative;
  /* margin: 40px; */
  /* float: left;*/
}

.card.arrow-top::after{
  content: " ";
  position: absolute;
  right: 50%;
  top: -15px;
  border-top: none;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 15px solid #E6E9ED;
}

.card p{
  margin: 0;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 15.08px;
  line-height: 35px;
  /* display: flex; */
  align-items: center;
  text-align: center;
  color: #000000;
}

.card p::before{
  content: "";
  display: block;
  width: 130px;
  height: 3px;
  background: #D9D9D9;
  left: 340px;
  top: 17%;
  position: absolute;
}

.card p::after{
  content: "";
  display: block;
  /* width: 130px; */
  /* height: 5px; */
  /* background: #191970; */
  /* right: 0; */
  /* top: 50%; */
  position: absolute;
  width: 130px;
  height: 3px;
  background: #D9D9D9;
  right: 340px;
  top: 17%;
}

.span-credit-green{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    /* line-height: 21px; */
    /* display: flex; */
    align-items: center;
    color: #05B00B;
    margin: 10px;
}

.span-credit-red{
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    /* line-height: 21px; */
    /* display: flex; */
    align-items: center;
    color: #D4082D;
    margin: 10px;
}

.nav-pills>li{
  float: none;
}
.nav-test{
  display: flex;
    justify-content: center;
}

.nav-pills>li.active>a{
  border-radius: 100px !important;
  padding: 10px 75px !important; 
  background: #117AED !important;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 21px;
  /* display: flex; */
  align-items: center;
  text-align: center;
  color: #FFFFFF;
}

.nav-pills>li>a{
  border-radius: 100px !important;
  border: 1px solid gray !important;
  padding: 10px 75px !important;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  /* display: flex; */
  align-items: center;
  text-align: center;
  color: #000000;
}

.nav-pills>ul>li{
  padding: 0px 15px;
}

.nav-pills>li{
  padding: 0px 15px;
}


.panel-body{
  padding: 0px !important;
}

.panel-default>.panel-heading{
  background: #ffffff !important;
}

.panel-heading{
  padding: 15px 15px !important;
}

.panel-heading a {
  display: block;
  position: relative;
  font-weight: bold;
}
  .panel-heading a::after {
    content: "";
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(45deg);
  }

  a[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    top: 5px;
  }
  .content table{
    width: 100% !important;
    border-collapse: collapse !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: rgba(0,0,0,0.1);
  }

  .content table tr{
    border-bottom: none !important;
  }

  #accordion a:focus, #accordion a:hover{
    color: #5B5B5B !important;
  }

  .panel-title{
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 18px !important;
    line-height: 21px;
    /* display: flex; */
    align-items: center;
    color: #5B5B5B !important;
  }

  .table > tbody > tr > td{
    line-height: 2.5rem !important;
  }

  .links {
    text-align: center;
    width: 300px;
    margin-top:5%;
    margin-left:5%;
    border: 1px solid #ccc;
    border-radius: 10px;
  }
  .gray-button {
    text-align: center;
    background-color: #aaa;
    padding: 6px 12px 10px 12px;
    width: 160px;
    height: 33px;
    color: white;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
  }
  
  /* modal details */
  .modal-dialog{
    position: relative;
    display: table; /* This is important */
    width: auto;
    min-width: 500px; 
  /*   overflow-y: scroll; */
    overflow-x: auto;
  }
  
  /* Get rid of the background fade */
  modal-backdrop {
    opacity:0;
  }
  
  /* Vertical scroll bar part 1 */
  
  /* .modal-dialog{ */
  /*   overflow-y: initial !important; */
  /* } */
  
  /* Vertical scroll bar part 2 */
  .modal-body {
    /*   max-height: 800px; */
  /*   width: 700px; */
  
    /*   overflow-y: auto; */ /* Enable for scrollbar */
  }
  
  
  .ball {
      display: inline-block;
      width: 100%;
      height: 100%;
      margin: 0;
      border-radius: 50%;
      position: relative;
      background-color: blue;
    /*   background: url(http://hop.ie/balls/images/tennisball.png) no-repeat; */
      background-size: 100%;
  }
  .ball:before {
      content: "";
      position: absolute;
      top: 1%;
      left: 5%;
      width: 90%;
      height: 90%;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
      -webkit-filter: blur(5px);
      z-index: 2;
  }
  .ball:after {
      content: "";
      position: absolute;
      border-radius: 100%;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: radial-gradient(circle at 40% 30%, rgba(245, 237, 48, 0), rgba(200, 190, 20, 0.2) 50%, #575300 100%);
  }
  .ball .shadow {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
      -webkit-transform: rotateX(90deg) translateZ(-160px);
      transform: rotateX(90deg) translateZ(-160px);
      z-index: 1; }
  .stage {
      width: 200px;
      height: 200px;
      display: inline-block;
      margin: 20px;
      -webkit-perspective: 1200px;
      -moz-perspective: 1200px;
      -ms-perspective: 1200px;
      -o-perspective: 1200px;
      perspective: 1200px;
      -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
      -ms-perspective-origin: 50% 50%;
      -o-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
  }
  
  @media (min-width: 992px){
.modal-lg {
    width: 500px !important;
}}

@media (min-width: 992px){
.modal-lg {
    width: 500px !important;
}}

.modal-header{
  border-bottom: none !important;
  background: #ffffff !important;
  border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
}

/* .modal-footer{
  border-top: none !important;
  background: #ffffff !important;

} */

.modal-body{
  border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}

.modal-title{
  text-align: start;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    /* line-height: 26px; */
    /* display: flex; */
    align-items: center;
    /* text-align: center; */
    color: #000000;
}

.close {
  float: right;
  font-size: 30px !important;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: 1 !important;
}

.bg-modal{
  background-image: url('/assets/resources/assets/Group.png');
}