body {
font-family: 'Open Sans', sans-serif;
line-height:28px;  
}

.set-radius-zero {
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
}

.header-line {
    font-weight:900;
    padding-bottom:25px;
    border-bottom:1px solid #eeeeee;
    text-transform:uppercase;
}

.pad-botm {
    padding-bottom:30px;
}


.content-wrapper {
  padding: 2.1rem 1.04rem;
  width: 100%;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

@media (max-width: 767px) {
  .content-wrapper {
    padding: 1.5rem 1.5rem;
  }
}

/* =============================================================
   NAVBAR & MENU STYLES
 ============================================================ */
/* site logo */
.logo{
padding:10px;    
height: 60px;
width: 60px;   
}
/* menu area gain lissome */ 
.navbar {
min-height: 80px;
margin-bottom: 2px;
border-bottom: 2px solid #AA6C39;    
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color:transparent;
}
.navbar-toggle {    
background-color: transparent;
border: 1px solid black;
}

.recharge-main {
width: 100%;
padding-top: 30px !important;
padding-bottom: 30px !important;
box-shadow: 0 4px 9px 0 hsl(0deg 0% 84% / 50%);
color: #fff;
z-index: 1;
background-image: linear-gradient(100deg,#AA6C39,gold),linear-gradient(100deg,#8aaebb,#89adba);
    }

.recharge-main article{
display: flex;
max-width: 1080px;
margin: 0 auto;
padding: 0;
    }

.recharge-main .recharge-left {
flex: 0.65;
text-align: center;
    }
.recharge-main .recharge-left h4 {
padding-top: 10px;
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 1.8;
letter-spacing: normal;
text-align: center;
    }

.recharge-main .recharge-left p {
margin: 0;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
text-align: center;
}
    
.recharge-main .recharge-right {
flex: 1;
overflow: hidden;
    }

.recharge-main .recharge-right .recharge-form {
display: flex;
width: 100%;
overflow: hidden;
    }

.recharge-main .recharge-right .recharge-form .form-group {
flex: 1;
display: flex;
border-radius: 4px;
border: 1px solid #ededed;
background-color: #f8f8f8;
overflow: hidden;
margin: 0px;
    }

.recharge-main .recharge-right .recharge-form label.form-group{
margin: 0px;
font-weight: 400;
    }
.recharge-main .recharge-right .recharge-form .form-group div {
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
min-width: 55px;
color: #030303;
border-radius: 4px 0 0 4px;
border-right: 2px solid #ededed;
    }
    .recharge-main .recharge-right .recharge-form .form-group input {
padding: 14px;
border: none;
outline: none;
flex: 1;
background: transparent;
opacity: .6;
font-size: 14px;
min-height: 40px;
color: #030303;
overflow: hidden;
/* max-height: 40px; */
    }
    .recharge-main .recharge-right .recharge-form .submit-button {
margin-left: 3%;
border-radius: 4px;
background-color: #fff;
color: #e40000;
font-size: 14px;
font-weight: 700;
padding: 14px 25px;
border: none;
min-width: 130px;
outline: none;
transition: background-color .5s,color,.5s;
cursor: pointer;
    }
    .recharge-main .recharge-right .recharge-form .submit-button:hover {
color: #fff;
background-color: #e40000;
    }
    .recharge-main .recharge-right .recharge-form .submit-button:hover .loading-button span{
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid #ffffff;
    vertical-align: text-bottom;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
    margin-right: 10px;
}  
    .recharge-main .recharge-right .recharge-tab ul {
display: flex;
justify-content: space-between;
padding: 2px;
margin: 0 0 10px;
background-color: #f2f2f2;
border-radius: 4px;
max-width: calc(97% - 130px);
height: 42px;
overflow: auto;
overflow-y: hidden;
    }
    .recharge-main .recharge-right .recharge-tab ul li {
position: relative;
flex: 1;
padding: 8px 16px;
list-style: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #626262;
font-size: 14px;
font-weight: 600;
line-height: normal;
letter-spacing: normal;
text-align: center;
border: 2px solid #f2f2f2;
cursor: pointer;
transition: background-color .1s ease-in-out;
    }
    .recharge-main .recharge-right .recharge-tab ul li:hover {
background-color: #fff;
    }
    .recharge-main .recharge-right .recharge-tab ul li.active {
color: #e40000;
background-color: #fff;
box-shadow: 0 2px 4px -2px rgb(0 0 0 / 35%);
    }
    .recharge-main .recharge-right .recharge-tab ul li img {
max-width: 100%;
max-height: 100%;
    }
    .recharge-main .recharge-right .recharge-tab ul li img[alt] {
text-indent: -10000px;
    }
    .recharge-main .recharge-right .recharge-tab ul li img {
min-height: 24px;
min-width: 24px;
margin-right: 8px;
    }
    .recharge-main .recharge-right .error-msg {
margin-top: 4px;
    }


    .loading-button span{
display: inline-block;
width: 15px;
height: 15px;
border: 2px solid #e40000;
vertical-align: text-bottom;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border .75s linear infinite;
margin-right: 10px;
    }  

    .loading-button span span{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
    }


    @media (min-width: 270px) and (max-width: 767px) {
.recharge-main {
    background: #fff;
    padding: 2px 0 12px;
    box-shadow: none;
}
.recharge-main article {
    flex-direction: column;
    padding-left: 15px;
    padding-right: 15px;
}
.recharge-main .recharge-left h4 {
    position: relative;
    font-size: 14px;
    font-weight: 700;
    color: #393939;
    margin: 12px 0 8px;
}
.recharge-main .recharge-left h4:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 2px;
    width: 20px;
    border-radius: 2px;
    background-color: #e40000;
    transform: translateX(-50%);
}
.recharge-main .recharge-left p,
.recharge-main .recharge-right .recharge-tab ul li img {
    display: none;
}
.recharge-main .recharge-right .recharge-form .form-group {
    border-right: none;
}
.recharge-main .recharge-right .recharge-form .form-group input {
    padding: 12px;
}
.recharge-main .recharge-right .recharge-form .form-group input[type="text"] {
    padding: 10px;
}
.recharge-main .recharge-right .recharge-tab ul {
    background-color: transparent;
    max-width: 100%;
    justify-content: center;
}
.recharge-main .recharge-right .recharge-tab ul li {
    padding: 8px 12px;
    border: none;
}
.recharge-main .recharge-right .recharge-tab ul li.active {
    background-color: transparent;
    box-shadow: none;
    font-weight: 700;
}
.recharge-main .recharge-right .recharge-tab ul li.active:after {
    content: "";
    position: absolute;
    left: 15%;
    bottom: 0;
    height: 2px;
    width: 70%;
    border-radius: 4px;
    background-color: #e40000;
}
.recharge-main .recharge-right .error-msg {
    color: #e40000;
    font-size: 12px;
}
.recharge-main .recharge-right .recharge-form .submit-button {
    margin: 12px auto;
    padding: 12px;
    font-size: 12px;
    border-radius: 0 4px 4px 0;
    background-color: #e40000;
    color: #fff;
    min-width: 100px;
    width: 100% !important;
}


.recharge-main .recharge-right .recharge-form{
    flex-wrap:wrap;
    display: block;
}
.recharge-form label.form-group{
    flex:none;
}

.loading-button span{
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid #ffffff;
    vertical-align: text-bottom;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
    margin-right: 10px;
}

    }
    @media (min-width: 768px) and (max-width: 991px) {
.recharge-main .recharge-right .recharge-tab ul {
    max-width: 100%;
}
.recharge-main article{
    padding-left: 15px;
    padding-right: 15px;
}
.loading-button{
position: absolute;
top: 13px;
left: 5px;
}

    }
    @media (min-width: 992px) and (max-width: 1024px) {
.recharge-main .recharge-right .recharge-tab ul {
    max-width: 100%;
}
    }
    @media  all and (min-width: 992px){

    .loading-button{
position: absolute;
top: 13px;
left: 5px;
    }
    }

 

    @keyframes spinner-border {
to { transform: rotate(360deg); }
    }

    #quickRechargeBtn{
position: relative;
display: flex;
justify-content: center;
align-items: center;
    }

/* :: 11.0 Footer Area CSS */
.footer-area {
  position: relative;
  z-index: 1;
  background-color: #021c3c; }
  .footer-area .single-footer-widget {
    position: relative;
    z-index: 1; }
    .footer-area .single-footer-widget .widget-title {
      font-size: 18px;
      color: #ffbb38;
      margin-bottom: 40px;
      font-weight: 400; }
    .footer-area .single-footer-widget ul li a {
      display: block;
      color: #ffffff;
      font-size: 14px;
      font-weight: 400;
      margin-bottom: 30px;
      position: relative;
      z-index: 1;
      padding-left: 23px; }
      .footer-area .single-footer-widget ul li a::before {
        content: '';
        width: 8px;
        height: 8px;
        top: 7px;
        left: 0;
        border-radius: 50%;
        background-color: #ffbb38;
        position: absolute;
        z-index: 1; }
      .footer-area .single-footer-widget ul li a:hover, .footer-area .single-footer-widget ul li a:focus {
        color: #ffbb38; }
    .footer-area .single-footer-widget ul li:last-child a {
      margin-bottom: 0; }
  .footer-area .copywrite-area {
    position: relative;
    z-index: 1;
    border-top: 1px solid #3c4450;
    padding: 30px 0; }
    .footer-area .copywrite-area .copywrite-text {
      font-size: 14px;
      margin-bottom: 0;
      color: #636b75;
      font-weight: 400; }
      @media only screen and (max-width: 767px) {
        .footer-area .copywrite-area .copywrite-text {
          margin-top: 30px; } }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
        .footer-area .copywrite-area .copywrite-text {
          margin-top: 0; } }
      .footer-area .copywrite-area .copywrite-text a {
        color: #636b75;
        font-size: 14px;
        font-weight: 400; }
        .footer-area .copywrite-area .copywrite-text a:hover, .footer-area .copywrite-area .copywrite-text a:focus {
          color: #ffbb38; }
/* =============================================================
   DASHBOARD STYLES
 ============================================================ */
.Dashboard-content-wrapper {
margin-top: 8.2%;    
padding: 1em 0.8em;
width: 100%;
-webkit-flex-grow: 1;
flex-grow: 1;
}

@media (max-width: 767px) {
.Dashboard-content-wrapper {
margin-top: 25%;      
padding: 0.5em 0.5em;
  }
}
.errorWrap {
    padding: 10px;
    margin: 0 0 20px 0;
    background: #fff;
    border-left: 4px solid #dd3d36;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}
.succWrap{
    padding: 10px;
    margin: 0 0 20px 0;
    background: #fff;
    border-left: 4px solid #5cb85c;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}

.img-comments {
border: 3px double #e1e1e1;
height: 60px;
}

.event-left{
background-color:#F0FFF0;
padding: 2%;
border-bottom: 2px solid #9400D3;    
}

.event-right{
padding: 2%;
background-color:#FBF6D9;
border-bottom: 2px solid #9400D3;      
}

.chat-widget-main {
    max-height:330px;
    overflow:auto;
}

.slide-bdr {
   border:5px solid #9170E4
}
.chat-widget-left:after {
    top: 100%;
    left: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #F70E62;
    border-width: 15px;
    margin-left: -15px;
}

.chat-widget-left {
    width: 100%;
    height: auto;
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #F70E62;
    font-size:12px;
}
.chat-widget-right:after {
    top: 100%;
    right: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #5AA8CC;
    border-width: 15px;
    margin-left: -15px;
}

.chat-widget-right {
    width: 100%;
    height: auto;
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #5AA8CC;
    font-size:12px;
}

.chat-widget-name-left {
   color: #808080;
    margin-top: 30px;
    margin-left: 60px;
    text-align:left;
}

    .img-left-chat {
        border:3px double #e1e1e1;
        float:left;
        margin-right:30px;
    }
     .img-right-chat {
        border:3px double #e1e1e1;
        float:right;
        margin-left:30px;
    }
     .chat-widget-main img-right {
        border:3px double #e1e1e1;
        float:left;
    }
.chat-widget-name-left h4 {
    font-weight:normal;
    font-size:11px;
    
}
.chat-widget-name-left h5 {
    font-weight:normal;
    font-size:10px;
}
.chat-widget-name-right h4 {
    font-weight:normal;
    font-size:11px;
}
.chat-widget-name-right h5 {
    font-weight:normal;
    font-size:10px;
}
.chat-widget-name-right {
    color: #808080;
    margin-top: 40px;
    margin-right: 60px;
    text-align:right;
}

.recent-users-sec img {
    max-height:80px;
    margin:15px;
}

.back-widget-set {
    background-color:transparent;
}

.nav-link {
    color: #4a5568;
}
.card {
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1rem;
}

.gutters-sm {
    margin-right: -8px;
    margin-left: -8px;
}

.gutters-sm>.col, .gutters-sm>[class*=col-] {
    padding-right: 8px;
    padding-left: 8px;
}
.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}

.bg-gray-300 {
    background-color: #e2e8f0;
}
.h-100 {
    height: 100%!important;
}
.shadow-none {
    box-shadow: none!important;
}



/* =============================================================
   FOOTER SECTION STYLES
 ============================================================ */
.footer-section {
padding:25px 50px 25px 50px;
color:#000;
font-size:13px;
background-color: #f7f7f7;
border-top:5px solid navy;
}

.footer-section a, .footer-section a:hover {
 color:#000;
    }

/* login page design */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
* {
    margin:0;
    padding:0
}
a,a:hover{
text-decoration: none;
}

.myform-area{
overflow: hidden;
padding: 60px 0;
background: #f4fffe;
padding-top: 80px;
padding-bottom: 80px;   
}
 
.form-area{
width: 100%;
overflow: hidden;
box-shadow: 0 0 40px 0 #e1e1e1;
margin-top:15px;     
}

.form-content{
position: relative;    
padding: 40px 30px;    
background: rgba(103,58,183,0.7);
height: 400px;    
box-sizing: border-box;
line-height:1;    
}

.form-content h2{
  color: #fff;
}
.form-content p{
  color: #fff;
}

.form-content ul{
  margin-top: 50px;
}

.form-content ul li{
  display: inline-block;
  margin-right: 10px;
}
.form-content a i{
    margin-right: 10px;
}

@media (max-width: 600px){
.form-content{visibility:hidden; 
/* Firefox */
height: -moz-calc(400px - 450px);
/* WebKit */
height: -webkit-calc(400px - 450px);
/* Opera */
height: -o-calc(400px - 450px);
/* Standard */
height: calc(400px - 450px);
margin: -moz-calc(10px - 50px);    
margin: -webkit-calc(10px - 50px);    
margin: -o-calc(10px - 50px);       
    } 
}

.facebook{
  display: block;
  padding: 10px 20px;
  background: #3B579D;
  color: #fff;
  font-size: 15px;
  text-transform: capitalize;
  border-radius: 4px;
  border: 1px solid #3B579D;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.facebook:hover,.facebook:focus{
    background: transparent;
}
   
.whatsapp{
  display: block;
   padding: 10px 20px;
   background: green;
   color: #fff;
   font-size: 15px;
   text-transform: capitalize;
   border-radius: 4px;
   border: 1px solid #00ACED;
   -webkit-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
}

.whatsapp:hover, .whatsapp:focus{
    background: transparent;
}


.form-input{
position: relative;
height: 400px;
box-sizing: border-box;
padding: 40px 30px;
background-color: white;
position: relative;
overflow: hidden;
box-shadow: 0 0 40px 0 purple; 
    }

.form-input h2{
margin-bottom: 20px;
color: #07315B;
}



.form-input input{
position: relative;
height: 60px;
padding: 20px 0;
}

.form-input textarea{
height: 120px;
padding: 20px 0;
}

.form-input input, .form-input textarea{
text-transform: capitalize;
width: 100%;
box-sizing: border-box;
outline: none;
border: none;
border-bottom: 2px solid #e1e1e1;
color: #07315B;
}

.form-input form .form-group{
    position: relative;
}

.form-input form .form-group label{
    position: absolute;
    text-transform: capitalize;
    top: 20px;
    left: 0;
    pointer-events: none;
    font-size: 14px;
    color: #595959;
    margin-bottom: 0;
    transition: all .6s;
}

.form-input input:focus ~ label, .form-input textarea:focus ~ label,
.form-input input:valid ~ label, .form-input textarea:valid ~ label{
    top: -5px;
    /*opacity: 0;*/
    left: 0;
    color: rgba(103,58,183);
    font-size: 12px;
    color: #07315B;
    font-weight: bold;
}

.form-input input:focus,.form-input textarea:focus, .form-input input:valid,.form-input textarea:valid{ border-bottom: 2px solid rgba(103,58,183);}

.form-text{
    margin-top: 30px;
}

.form-text span a{
    color: rgba(103,58,183);
}

.myform-button{
    margin-top: 30px;
}

.myform-button .myform-btn{
    padding: inherit;
    width: 100%;
    height: 50px;
    font-size: 17px;
    background: rgba(103,58,183);
    border: none;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.myform-button .myform-btn:hover{
    background: #07315B;
}

.login_mob_btm_info {
    
}


.login_mob_btm_info h4{
  color: navy;
}
.login_mob_btm_info p{
  color:fuchsia; line-height:1;
}

.login_mob_btm_info ul{
  margin-top: 50px;
}

.login_mob_btm_info ul li{
  display: inline-block;
  margin-right: 10px;
}
.login_mob_btm_info a i{
    margin-right: 10px;
}

.mob_facebook{
  display: block;
  padding: 5px 10px;
  background: #3B579D;
  color: #fff;
  font-size: 10px;
  text-transform: capitalize;
  border-radius: 4px;
  border: 1px solid #3B579D;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.mob_facebook:hover,.mob_facebook:focus{
    background: transparent;
}

.mob_whatsapp{
  display: block;
   padding: 5px 10px;
   background: green;
   color: #fff;
   font-size:10px;
   text-transform: capitalize;
   border-radius: 4px;
   border: 1px solid #00ACED;
   -webkit-transition: all .2s;
   -o-transition: all .2s;
   transition: all .2s;
}

.mob_whatsapp:hover, .whatsapp:focus{
    background: transparent;
}


@media (min-width: 600px){
.login_mob_btm_info{
visibility:hidden;   
    } 
}

@media (max-width: 600px){
.form-input{
margin: 20px;    
border: 3px solid #AA6C39; 
border-radius: 20px;    
position: relative;
box-sizing: border-box;
padding: 40px 30px;
background-color:#fff;
position: relative;
overflow: hidden;
box-shadow: 0 0 40px 0 #AA6C39; 
height: 670px;    
    } 
}

/* optiontab */
#optiontab {
    display: none ; position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.optiontab_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}
.optiontab_text{
  color:black ; 
}

/* settings tab */
#settingstab {
    display: none ; position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.settingstab_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}
.settingstab_text{
  color:black ; 
}

/* welcome_setting tab */
#welcome_setting {
    display: none ; position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.welcome_setting_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}
.welcome_setting_text{
  color:black ; 
}


/* welcome_setting tab */
#providus_modal {
    display: none ; position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.providus_modal_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}
.providus_modal_text{
  color:black ; 
}

/* welcome_setting tab */
#providus_loading {
    display: none ; position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.providus_loading_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}
.providus_loading_text{
  color:black ; 
}

/* welcome_setting tab */
#retailer {
    display: none;
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.retailer_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}
.retailer_text{
  color:black ; 
}


/* welcome_setting tab */
#phonset_suc {
    display: none ; position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.phonset_suc_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}
.phonset_suc_text{
  color:black ; 
}

/* loader Waiting for response board */
#loading_Board {
    display: none;
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.loading_Board_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}

.loading_Boardtext{
  color:black ; 
}
/* loader Waiting for response board */
#loading_Board2 {
    display: none ; position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.loading_Board2_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}

.loading_Board2text{
  color:black ; 
}

/* Server response  result */
#Server_response {
    display: none;
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.Server_response_conent{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}

.Server_responsetext{
  color:black;  
}

/* Server response  result */
#confirm_response {
    display: none ; position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.confirm_response_conent{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}

.confirm_responsetext{
  color:black;  
}

/* Activator response  result */
#activator_response {
    display: none ; position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.activator_response_conent{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}

.activator_responsetext{
  color:black;  
}

/* error response  result */
#err_response {
    display: none;
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.err_response_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}

.err_response_Boardtext{
  color:black  
}

/* Session expired response response  result */
#exp_session {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.exp_session_conent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}

.exp_session_Boardtext{
  color:orangered;
}

/*ussd dialer section*/
/* dial pad area */
.dialer_content-wrapper {
margin-top: 40px;
min-height:200%;
padding-bottom:90px;
color: aliceblue;    
}

.dialer_stand{
position: fixed;
bottom: 0;
width: 100%;
margin-bottom:0;    
}

@media (max-width:600px){
.dialer_stand{
margin-bottom:6%;    
}    
}

.header {
width:90%;
padding-left:10%;    
padding-top:10px;
padding-bottom:10px;
}

.header::after {
display:block;
content:"";
clear:both;
}

#dialer_table {
width: 100%;
font-size: 1.5em;
}

sup{
text-transform:uppercase;
color:dimgray;
font-size: 12px;    
}

sup.none {
display: none; 
padding-bottom: 15px;    
}

.wrkonu{
height:100px; 
}

#dialer_table tr td {
text-align: center;
height: 50px;
width: 33%;
}

#dialer_table #dialer_input_td {
border-bottom: 1px solid #cccccc;
border: none;    
}

#dialer_table #dialer_input_td input {
width: 100%;
border: none;
font-size: 0.7em;
font-weight: 700;    
color: #fff;    
}

/* Remove arrows from type number input : Chrome, Safari, Edge, Opera */
#dialer_table #dialer_input_td input::-webkit-outer-spin-button,
#dialer_table #dialer_input_td input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
 }
/* Remove arrows from type number input : Firefox */
#dialer_table #dialer_input_td input[type=text] {
-moz-appearance: textfield;
color: #200f2c; 
background: transparent;
border: none;  
text-align: center; 
outline: none;    
 }

#dialer_table #dialer_input_td input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color:dimgrey;
opacity: 2; /* Firefox */
}

#dialer_table #dialer_input_td input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: dimgrey;
}

#dialer_table #dialer_input_td input::-ms-input-placeholder { /* Microsoft Edge */
color: dimgrey;
 }

#dialer_table #dialer_call_btn_td {
width:60px;
height:60px;
border-radius:100%;
border:none;
color:#fff;
font-size:35px;
padding-top:15px;    
box-shadow:0 5px 10px 0 #eee;    
background-color:#0BDA51;
cursor: pointer;
text-align: center;
display: inline-block;
transition: all 300ms ease;
-moz-transition: all 300ms ease;
--webkit-transition: all 300ms ease;
        }

#dialer_table #dialer_call_btn_td:active {
background-color: #009d00;
}

#dialer_table .dialer_num_tr td {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
        }

#dialer_table .dialer_num_tr .dialer_num {
color:black;
cursor: pointer;
padding: 0.8%;   
font-size: 1.2em;
font-weight: 800;    
        }

#dialer_table .dialer_num_tr .dialer_num:active {
background-color:#ba8cd7;
border-radius :100px;     
        }

#dialer_table .dialer_num_tr:nth-child(0) td {
border-top: 1px solid #fafafa;
        }

#dialer_table .dialer_del_td{
width: 35px;    
cursor: pointer;
    }

#dialer_table .dialer_del_td:active{
width: 45px;
    }
.btm_text{
    color: black;
    font-size:12px; 
}

a.btm_text:link{
color:black;    
}
a.btm_text:hover{
color:red;
text-decoration: none;    
}
a.btm_text:focus{
color:red;
text-decoration: none;    
}

/* Card printing listen */
/* Create three equal columns that floats next to each other */
.wrap {width:210mm;}
.wrap:after {content: ".";display: block;height: 0;clear: both;}
.wrap .card_holder {float: left;width:67mm;border:0.5px solid purple;height:30mm;margin-right:0.2%;margin-top:0.5%;padding:0.3%;}
.logo img{float: left;}
.card-header{font-family: serif; color:purple; font-size:0.82em; font-weight:bolder; display:flex; text-transform: uppercase;height:27px;}.logo-spc{width:20%;}
.product-ref-spc{width:80%;}#divider{ line-height:1; border-bottom: 2px solid navy;}
.price {padding-left:45px;}

.card-body{height: 78px; font-family: serif; padding-top: 1.8%;}
.card_pin{color:black;font-size: 1.3em; font-weight: 900; line-height:1; flex:100; width:255px;}
.dial{color:navy;font-size:1.1em; font-weight: 800; line-height:1;flex:100; width:255px; margin-top:7px;}
.bal{color:red;font-size:1em; font-weight: 800; line-height:1;margin-top:5px;}
.instruct{color:crimson; font-size:0.5em; font-weight: 900; line-height:1;margin-top:3px; flex:100; width:255px;}
.turnb{color:darkgreen; font-weight: 800; line-height:1;margin-top:4px; flex:100; width:230px;}

/*back side styling*/
.back_cover{}
.card-back-header{font-family: serif; color:purple; font-size:0.82em; font-weight:bolder; display:flex; text-transform: uppercase;height:27px;} img.logo_back{height:35px; width:35px; float: left; }
.back-logo-spc{width:25%;}
.back-product-ref-spc{width:75%;}#b-divider{ line-height:1; border-bottom: 2px solid navy;}.back-price {padding-left:30px; }

.back-card-body{height: 78px; font-family: serif; margin-top:5px; width: 240px;}
.back-card_note{color:black;font-size:0.8em; font-weight: 300; line-height:1; margin:5px;}

/*This is for the license card*/
/*Front card*/
div.scroll {width:100%;overflow-x: auto;overflow-y: hidden;}
#L_wrap{width:86mm;height:54mm;border-radius:10px;  box-shadow: 5px 5px 2.5px lightblue; background-repeat: no-repeat; background-size:120% 100%;background-image: url("../img/back_use.jpg"); border: 2px solid transparent; margin-top:50px;margin-bottom:50px; }
#L_wrap:after {content: ".";display: block;height: 0;clear: both; visibility:hidden;}
.identity-card{text-transform:uppercase; font-size:14.5px; font-weight:900; color: navy;}
.card_header{margin:0; font-weight:700; font-size:10px;}
.content_card{text-transform:uppercase;margin:0;font-weight:600;font-size:10px;width:100%;line-height:1.3;margin-bottom:3px;margin-top:3px;}.card_wrapper{width:100%;height:100%; background-image: url("../img/icons/icon-128x128.png"); background-repeat: no-repeat;background-attachment:inherit; background-position: center;background-size:100px 100px;}.card_row{padding:10px;width:100%;height:100%; background-color:rgb(194,249,112);background-color: rgba(194,249,112, 0.4);color:navy;font-weight: bold; border-radius:10px; display: flex; }.col-1{flex:74%;}.info-mother{display:flex;}.info-child1{flex:60%;}.info-child2{flex:40%; border: 2px solid transparent; margin-top:29%;margin-left:10px;margin-right: 10px;width:100%;height:120px;}.card_specify_role{font-size:0.8em; text-align: left; margin-top: 10px;}.office{text-transform:uppercase;margin:0;font-size:0.8em;line-height:1.2;margin-bottom:5px;margin-top:2px;} 
.col-2{margin-top:10px; flex:26%;text-align:right;}.card_photo{ border:2px solid #0096FF; height:80px;}img.card_passport{width:100%;height:100%;}
/*Card Back*/
.card_row_back{width:100%;height:100%; background-color:rgb(194,249,112);background-color: rgba(194,249,112, 0.4);color:navy;font-weight: bold; border-radius:10px;}
.back-top{height:60%;padding-left:10px;padding-right:10px;padding-top:20px;}.back-top h4{ text-transform: uppercase;font-weight:700; font-size:1.2em;line-height:1;}.back-top p{font-size:0.5em;line-height:1;margin-top:12%;}
.back-btm{height:40%;background-color:#fff;padding-left:20px;padding-right:20px;padding-top:10px;padding-bottom:10px; text-transform: uppercase;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}.back-btm h5{font-weight: 600;}

/*this area is for the cards pagination*/
.page_link{
background-color: #FFFFFF;
color:navy;
border: 1px solid #C9C9C9;
display: inline-block;
height: 35px;
line-height: 24px;
min-width: 30px !important;
padding: 4px;
text-align: center;
text-decoration: none;
font-weight: 800;    
}

.previous_link{
background-color:olive;
border: 1px solid #C9C9C9;
color:#fff;
display: inline-block;
height:35px;
line-height:24px;
padding: 4px;
text-align: center;
text-decoration: none;
width: 55px;
}
.next_link{
background-color:olive;
border: 1px solid #C9C9C9;
color:#fff;
display: inline-block;
height:35px;
line-height:24px;
padding: 4px;
text-align: center;
text-decoration: none;
width: 55px;
}
    
#page_navigation{
padding-top:8px;
}    


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid Navy;
  border-top-color: #D0FA58;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.body-text{
font-size:0.8em;    
}

.target-board{  
border: 2px ; 
margin-bottom:20px;  
box-shadow: 0 4px 9px 1px hsl(0deg 0% 84% / 50%);    
padding: 10px;
text-transform: uppercase;
font-weight: 600;    
}

/**
* PRINTING BOARD PAGINATION AND ACTIVE BTN
***/

.pagination-number,
.pagination-button{
  font-size: 1.1rem;
  background-color:aquamarine;
  border: none;
  margin: 0.25rem 0.25rem;
  cursor: pointer;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: .2rem;
}

.pagination-number:hover,
.pagination-button:not(.disabled):hover {
  background: #fff;
}

.pagination-number.active {
  color: #fff;
  background: #0085b6;
}


/* Activator response  result */
#loan_pan{
    display: none ; position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.loan_pan-conent{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
}
.loan_pan-text{
  color:black;  
}