@font-face {
  font-family: 'GilroyB';
  src: url('fonts/Gilroy-ExtraBold.otf'); /* IE9 Compat Modes */
  src: url('fonts/Gilroy-ExtraBold.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
}
@font-face {
  font-family: 'CairoL';
  src: url('../fonts/Gilroy-Light.otf'); /* IE9 Compat Modes */
  src: url('../fonts/Gilroy-Light.otf/?#iefix') format('embedded-opentype'), /* IE6-IE8 */
}

@font-face {
  font-family: 'CairoR';
  src: url('fonts/Cairo-Regular.ttf'); /* IE9 Compat Modes */
  src: url('fonts/Cairo-Regular.ttf/?#iefix') format('embedded-opentype'), /* IE6-IE8 */
}

@font-face {
  font-family: 'CairoB';
  src: url('fonts/Cairo-Bold.ttf'); /* IE9 Compat Modes */
  src: url('fonts/Cairo-Bold.ttf/?#iefix') format('embedded-opentype'), /* IE6-IE8 */
}
@font-face {
  font-family: 'CairoL';
  src: url('../fonts/Cairo-Light.ttf'); /* IE9 Compat Modes */
  src: url('../fonts/Cairo-Light.ttf/?#iefix') format('embedded-opentype'), /* IE6-IE8 */
}


html, body {
    font-family: CairoR !important;
  }

.service-card{
  padding: 15px;
}
  .service{
    font-size: 16px;
    font-weight: bold;

  }
  .service-details{
     font-size: 12px;
     margin-top: -15px;
       font-weight: bold;
       color:#008AD0;;

  }
  .service-btn{
    min-width: 175px !important;
    border-radius: 15px;
    padding: 10px ;
    /* outline: 3px solid #eee; */
    border-top: 4px solid #eee !important;
    font-size: 16px;
    border: none;
    margin: 15px 0px;
    min-height: 50px;
  }
  

  .on-btn{
    min-width: 175px !important;
    min-height: 50px;
    border-radius: 15px;
    padding: 10px ;
    background: #fff;
    /* outline: 3px solid #eee; */
    border-top: 4px solid #eee;
    font-size: 16px;
    margin: 10px;
    color: #0094A5;
  }
  .on-btn i{
      font-size: 18px;
  }

  .on-btn:hover, .on-btn:active{
     background-color: #F5F5F5 !important;
     border-top: 0px solid #f6f9ff;
     color: #0094A5;
  }



   .activate{
      background-color: #11D276;
  }

 .change{
      background-color: #008AD0;
  }
  .activate:hover, .activate:active, .activate:focus, .change:hover, .change:active,.change:focus{
     background-color: #2692B2;
     border-top: 2px solid #eee  !important;
     color: #fff;
 }



  .social-links a{
    font-size: 24px;
    color:   #607d8b;
    padding: 10px;
  }
  .social-links a:hover{
  color: #008AD0;
  }


  .add-balance{
   transition: transform .2s; /* Animation */
    transition: box-shadow .3s;
  }
  .add-balance:hover {
    box-shadow: 0 0 3px rgba(33,33,33,.2);
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }


.modal-content{
  text-align: center;
background-color: #f6f9ff;
background: #F5F5F5;
}

.modal-body{
  margin-bottom: 45px;
}

.modal-header {
  border-bottom: none;
}

.modal-title{
  padding: 10px 20px 10px 20px;
  background-color: #fff;
  border-radius: 22px;
  width: 200px;
  height: 61px;
  text-align: center;
color: #0094A5;
font-size: 16px;
font-weight: bold;
margin-bottom: 40px;
}

.topu-form{
  background-color: #0094A5;
  background-image: url('form_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 35px;
  border-radius: 65px;
  margin: 0px 30px 0px 30px;
}
.topu-form p{
  font-size: 14px;
  color: #fff;
  font-weight: bold;
}

.input-group{
text-align: center;
}

.md-form input[type=date], .md-form input[type=datetime-local], .md-form input[type=email],
 .md-form input[type=number], .md-form input[type=password], .md-form input[type=search-md],
  .md-form input[type=search],.md-form input[type=tel], .md-form input[type=text],
 .md-form input[type=time], .md-form input[type=url], .md-form textarea.md-textarea {
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #fff;
    -webkit-border-radius: 0;
    border-radius: 0;
    background-color: transparent;
    text-align: center;
}

.form-label{
  color: #fff;
  opacity: 0.9; /* Firefox */
  font-weight: 200;
}

.topu-form .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 0.7; /* Firefox */
  font-weight: 200;
}

.topu-form .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fff;
}

.topu-form .form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff;
}

  .topu-form .form-control {
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;
}

.topup-btn{
  min-width: 250px !important;
  min-height: 50px;
  border-radius: 15px;
  padding: 10px ;
  background: #fff;
  /* outline: 3px solid #eee; */
  border-top: 4px solid #eee;
  font-size: 16px;
  margin: 10px;
  color: #0094A5;
}

.topup-btn:hover, .topup-btn:active{
   background-color: #F5F5F5 !important;
   border-top: 0px solid #f6f9ff;
   color: #0094A5;
}

.changeModal .modal-content{
  background-color: #008AD0;
  background-image: url('form_bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.changeModal .modal-title{
  color: #008AD0;
  margin-bottom: 20px !important;
}

.changeModal .current-pro {
  color:#494949;
}
.changeModal .current-pro p{
  color: red;
  font-size: 12px;
}

.change-form{
  background: #F5F5F5;
  padding: 20px 0px 20px 0px;
  border-radius: 65px 65px 8px 8px;
  margin: 0px -17px -62px -17px;
}


.nav-tabs-bordered {
  border-bottom: none;
  padding-inline-start: 0px !important;
}

.nav-tabs-bordered .nav-item{
    margin: 7px;
}
.nav-tabs-bordered .nav-link {
  font-family: 'CairoB';
    min-width: 80px;
    margin-bottom: -2px;
    border: none;
    color: #008AD0;
    border-radius: 15px;
    /* padding:15px  15px; */
    border-top: 3px solid #eee !important;
    border-bottom: none;
    background-color: #fff;
}
.nav-tabs-bordered .nav-link.active {
    background-color: #008AD0;
    color:  #fff;
    border-bottom: none;
    border-top: 3px solid #eee !important;
}


.pro-btn{
  min-width: 100%;
  min-height: 60px;
  border-radius: 15px;
  padding: 10px ;
  background: #fff;
  /* outline: 3px solid #eee; */
  border: none;
  border-top: 4px solid #eee;
  font-size: 16px;
  margin: 5px;
  color: #494949;
}

.pro-btn:hover, .pro-btn:active{
   background-color: #fff !important;
   color: #494949;
   border-top: 0px solid #eee !important;
}

.w-btn{
  min-width: 250px !important;
  min-height: 50px;
  border-radius: 15px;
  padding: 10px ;
  background: #fff;
  border: none;
  /* outline: 3px solid #eee; */
  border-top: 4px solid #eee;
  font-size: 16px;
  margin: 10px;
  color: #5c5c5c;
}

.w-btn:hover, .w-btn:active{
   background-color: #fff !important;
   border-top: 1px solid #f6f9ff;
   color: #5c5c5c;
}


.b-btn{
  min-width: 250px !important;
  min-height: 50px;
  border-radius: 15px;
  padding: 10px ;
  background: #008AD0;
  border: none;
  /* outline: 3px solid #eee; */
  border-top: 4px solid #0074af;
  font-size: 16px;
  margin: 10px;
  color: #fff;
}

.b-btn:hover, .b-btn:active{
   background-color: #008AD0 !important;
   border-top: 2px solid #0074af;
   color: #fff;
}

.g-btn{
  min-width: 250px !important;
  min-height: 50px;
  border-radius: 15px;
  padding: 10px ;
  background: #0094A5;
  border: none;
  /* outline: 3px solid #eee; */
  border-top: 4px solid #007d8b;
  font-size: 16px;
  margin: 10px;
  color: #fff;
}

.g-btn:hover, .g-btn:active{
   background-color: #0094A5 !important;
   border-top: 2px solid #007d8b;
   color: #fff;
}


.activateModal .modal-content{
  background-color: #007d8b;
  background-image: url('form_bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.activateModal .modal-title{
  color: #007d8b;
  margin-bottom: 20px !important;
}

.activateModal .current-pro {
  color:#494949;
}


.activateModal .current-pro h6{
  color: #007d8b;
  font-size: 22px;
}

.activate-form{
  background: #F5F5F5;
  padding: 20px 0px 20px 0px;
  border-radius: 65px 65px 8px 8px;
  margin: 0px -17px -62px -17px;
}

.onModal .modal-content{
  background-color: #0094A5;
  background-image: url('form_bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.onModal .modal-title{
  color: #0094A5;
  margin-bottom: 20px !important;
}

.onModal .current-pro {
  color:#494949;
}


.onModal .current-pro h6{
  color: #0094A5;
  font-size: 22px; 
}

.on-form{
  background: #F5F5F5;
  padding: 20px 0px 20px 0px;
  border-radius: 65px 65px 8px 8px;
  margin: 0px -17px -62px -17px;
}