body {
    /* background: #f8f9fe !important; */
    /* background: linear-gradient( rgb(43 73 98), rgb(255 0 0 / 42%) ), url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcBwuhFxIlj4-OyiF8XXtco_oesPMVypNluw&usqp=CAU); */
    background-size: cover;
    background-repeat: no-repeat;
}


.tp-gradient {
    background: linear-gradient(to right, #2c3e50, #2980b9) !important;
}

.grid-card-text {
    color: #475f7b !important;
    font-size: 14px;
}

.border_bottom {
    border-bottom: 1px solid #d5dfea !important;
}

.receipt_content {
    padding: 16px;
    font-size: 12px;
}

.receipt_btn {
    background: linear-gradient(to right, #2c3e50, #2980b9);
    margin: 0px;
    width: 100%;
    border: none !important;
    /* box-shadow: 1.171px 9.607px 15px 0px rgb(71 95 123 / 20%) !important; */
    height: 55px;
}

.wrapper {
    background: #fcfdfd !important;
}

.col_padding {
    padding: 1px !important;
}

.custom_card_shadow {
    /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px !important; */
    box-shadow: 0 25.3437px 67.2582px -28.268px #d2d7e1 !important;
    /* box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px !important; */
}

.skeleton_shadow {
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.service-font {
    font-weight: 700 !important;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
}

.service-grid {
    width: 43px;
    height: 43px;
    line-height: 96px;
    font-size: 1.429rem;
}

.service-card {
    height: 105px !important;
}

.card_style {
    margin-bottom: 3px !important;
    height: 150px;    
}

.wallet_card {
    /* background: url(/images/TP-background.jpg) !important;  */
    border-top: 1px solid #2b4a63 !important; 
    /* opacity: 0.5; */
    /* background-size: contain !important; 
    background-repeat: round !important */
}


.fund_wallet_btn {
    font-size: 12px !important;
    background: linear-gradient(to right, #2c3e50, #2980b9) !important;
    /* background: rgb(226, 232, 240) !important;
     color: rgb(65, 116, 178) !important; */
     /* background: #2c3e50 !important; */
     border-radius: 10px !important;
    border: none !important;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 600;
}

.carousel_style {
    border-radius: 10px;
    height: 150px;
    width: 100%;
    margin-bottom: 3px !important;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; */
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px !important;
}

.network-img {
    width: 45px;
    height: 45px;
    line-height: 96px;
    font-size: 1.429rem;
    border-radius: 50%;
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}

.network-card {
    height: 75px !important;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-color: #fff;
}

.network-font {
    font-weight: 700 !important;
    font-family: "Nunito Sans", sans-serif;
    font-size: 12px;
}

.header_ {
    background: linear-gradient(to right, #2c3e50, #2980b9) !important;
}

.content-header-text {
    font-family: 'Abril Fatface', cursive; 
    font-size: 15px; 
    margin-top: 15px;
    margin-bottom: 13px;
}

.vertical-line {
    border-left: 1px dashed #475f7b;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: 30px;
}

.wallet-card-text {
    font-family: 'Fira Sans', sans-serif;
    /* font-weight: 700; */
    font-size: 14px;    
    /* letter-spacing: 1px; */
}

.balance_text {
    /* font-family: 'Uchen', serif; */
    font-family: 'Fira Sans', sans-serif;
    /* color: #747c85; */
    font-size: 18px !important;
    letter-spacing: 0.2px !important;
    font-weight: 600;
}

.tp_btn {
    background: linear-gradient(to right, #2c3e50, #2980b9) !important;
    margin: 0px;
    width: 100%;
    border: none !important;
    box-shadow: 1.171px 9.607px 15px 0px rgb(71 95 123 / 20%) !important;
    height: 55px;
    border-radius: 10px !important;
}

.select_list_text {
    font-size: 13px !important;
    color: #475f7b;
    font-weight: 700;
    font-family: "Nunito Sans",sans-serif;
}

.go_back {
    cursor: context-menu;
    background: white; 
    border: 1px solid #fff; 
    padding: 10px; 
    border-radius: 16px; 
    font-size: 13px;
    box-shadow: 0 5px 30px 0 rgb(0 0 0 / 11%), 0 5px 15px 0 rgb(0 0 0 / 2%) !important;
}

.toggle_div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Fonts */

.font_nunito {
    font-family: "Nunito Sans", sans-serif !important;
}

.font_noto {
    font-family: 'Noto Serif Khojki', serif !important;
}

.font_lobster {
    font-family: 'Lobster', cursive !important;
}

.selected-mtn-network {
    border: 1px solid #fecb00;
    background: beige;
}

.selected-glo-network {
    border: 1px solid #42a747; 
    background: center; 
}


.selected-airtel-network {
    border: 1px solid #fe0101;
    background: bisque;
}

.selected-9mobile-network {
    border: 1px solid #006d50;
    background: fixed; 
}


.selected-blue-border {
    border: 1px solid #006d50;
    background: fixed; 
}

.selected-gotv {
    border: 1px solid;
    background: fixed; 
    border-color: red green;
}

.bg-green {
    background-color: green;
    color: white;
}

.bg-red {
    background-color: #ff1100 !important;
    color: white;
  }

  .badge {
    border-radius: 5px !important;
    line-height: 1 !important;
    font-size: 80% !important;
  }

.overlay_icon {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 30px;
    align-items: center;
    justify-content: center;
}

.pin-input {
    height: 65px !important;
    width: 120px !important;
    border-color: #f7f9fb !important; 
    box-shadow: 1.171px 9.607px 15px 0px rgb(71 95 123 / 20%) !important;
    font-size: 15px;
    font-weight: 600;
    font-family: "Nunito Sans",sans-serif;
    letter-spacing: 15px;
}

.input-area {
    /* padding: 20px;  */
    background: white !important;
    height: 65px !important;
    border-color: #f7f9fb !important; 
    box-shadow: 1.171px 9.607px 15px 0px rgb(71 95 123 / 20%) !important;
    font-size: 15px;
    font-weight: 600;
    font-family: "Nunito Sans",sans-serif;
}

.select-input {
    /* padding: 20px;  */
    height: 65px !important;
    border-color: #f7f9fb !important; 
    box-shadow: 1.171px 9.607px 15px 0px rgb(71 95 123 / 20%) !important;
    color: #475f7b;
    font-weight: 700;
    font-family: "Nunito Sans",sans-serif;
}

.text-area {
    /* padding: 20px;  */
    /* height: 105px !important; */
    border-color: #f7f9fb !important; 
    box-shadow: 1.171px 9.607px 15px 0px rgb(71 95 123 / 20%) !important;
    font-size: 15px;
    border-radius: 8px !important;
    font-weight: 600;
    font-family: "Nunito Sans",sans-serif;
    line-height: 25px;
    word-break: break-all;
}

/* Webkit based */
textarea::placeholder { /* Modern browsers */
  color: #0bf;  
}


.styled-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 50%;
}

.actionsheet_ {
    /* height: 300px; */
    max-height: 400px !important;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    background-color: #fff !important;
}

.paste-my-number {
    /* border: 1px solid #4bab5b; */
    border-bottom-right-radius: 0px !important;
    border-color: #607d8b !important;
    border-top-left-radius: 0px !important;
    color: #ea3023;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    background: #fff !important;
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 10%) !important;
}


.login-input {
    padding: 20px !important; 
    height: 53px !important;
    /* border-color: #f7f9fb !important;  */
    /* border-color: rgba(0, 0, 0, 0.08) !important; */
    background-color: white !important;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px !important;
    font-size: 14.5px;
    font-weight: 600;
    font-family: "Nunito Sans",sans-serif;
    border: 1px solid #ced4da !important;
    border-radius: 10px !important;
}

.auth-card {
    margin: 0px 15px !important;
    box-shadow: rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px;
    border-radius: 10px;
    /* border-bottom: 2px solid #153747 !important;    
    border-top: 2px solid #153747!important; */
}

.rounded-radius {
    border-radius: 50%;
}
    
.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.upload_btn {
    border: 1px solid #f7f9fb ;
    color: #475f7b;
    background-color: white;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
  

.flex {
    display: flex !important;
}

.font-bold {
    font-weight: 700 !important;
}

.fira-sans {
    font-family: 'Fira Sans', sans-serif !important;
}

.justify-content-sb {
    justify-content: space-between !important;
}

.form_pin {
    display: flex;
    justify-content: center;
  }

.pincode-input-text {
  padding:0 !important;
  margin:0 2px;
  text-align:center;
  border: 1px solid rgb(204, 204, 204) !important;
  border-radius: 5px;
  background: transparent;
  width: 35px !important;
  height: 35px !important;
}

.pincode-input-text:focus {
  outline:none;
  box-shadow:none;
}

.stamp {
    box-shadow: 0 0 0 3px #0000ff3b, 0 0 0 2px #eaf5ec57 inset;
    border: 3px dashed #2c4a63bd;
    border-radius: 4px;
    display: inline-block;
    padding: 5px 2px;
    line-height: 22px;
    color: #2c4a63bd;
    font-size: 20px;
    font-weight: 900;
    /* font-family: 'Black Ops One', cursive; */
    text-transform: uppercase;
    text-align: center;
    opacity: 0.1;
    width: auto;
    transform: rotate(-15deg);
    position: absolute;
    top: 220px;
    left: 95px;
  }

.tranx-desc-txt {
    font-size: 11px !important;
    color: #475f7b;
    font-weight: 700;
    font-family: "Nunito Sans",sans-serif;
    /* opacity: 0.8; */
}

.tranx-header-txt {
    font-size: 13px !important;
    color: #475f7b;
    font-weight: 700;
    font-family: "Nunito Sans",sans-serif;
    margin-bottom: 2px !important;
}

.card-top {
    z-index: 2;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
}


.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
  }
  
  .chip img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }

  .fw-header-txt{
    font-size: 15px;
    color: #475f7b;
    font-weight: 600;
    /* font-family: 'Lobster', cursive !important; */
    margin-bottom: 1px !important; 
  }


  .data_balance_card {
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px !important;
    background: white;
  }

  .fw_img_shadow {
    box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px !important;
  }


.set-pin {
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px !important;
    height: 48px !important;
    width: 120px !important;
    border-color: #f7f9fb !important; 
    font-size: 15px;
    font-weight: 600;
    font-family: "Nunito Sans",sans-serif;
    letter-spacing: 15px;
}


.search-input {
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px !important;
    height: 48px !important;
    width: 100% !important;
    border-color: #f7f9fb !important; 
    font-size: 13px;
    font-weight: 600;
    font-family: "Nunito Sans",sans-serif;
    /* letter-spacing: 15px; */
}

.search-btn {
    /* background: linear-gradient(to right, #2c3e50, #2980b9); */
    background: #2c3e50;
    border: none; 
    width: 125px; 
    height: 40px; 
    color: white;
    font-size: 12px !important;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px !important;
    font-weight: 600;
    font-family: "Nunito Sans",sans-serif;
    border-radius: 10px !important;
}

.pagination-btn {
    /* background: linear-gradient(to right, #2c3e50, #2980b9); */
    background: #2a77ab;
    border: none; 
    width: 115px; 
    height: 50px; 
    color: white;
    padding: 14px 16px !important;
    font-size: 12px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px !important;
    font-weight: 600;
    font-family: "Nunito Sans",sans-serif;
    border-radius: 10px !important;
}

.nav-border {
    border-bottom: 1px solid #f1f1f1;
}




.sweetalert {
    box-shadow: 0px 0px 0px 4000px rgba(0, 0, 0, 0.712);
}


.swal-modal {
    /* background-color: rgba(63,255,106,0.69); */
    /* border: 3px solid white; */
    /* box-shadow: #2c3e50ad 5px 5px, #2c3e50a3 10px 10px, #2c3e5070 15px 15px, #2c3e5040 20px 20px, #2c3e5014 25px 25px; */
    box-shadow: #2980b9f5 5px 5px, #2980b9ba 10px 10px, #2980b97d 15px 15px, #2980b954 20px 20px, #2980b91a 25px 25px;

  }

.swal-text {
    background-color: #2980ba09;
    padding: 10px;
    font-weight: 600 !important;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
   
    /* border: 1px solid #0c1c2c; */
    /* display: block; */
    margin: 0px 15px;
    /* text-align: center; */
    color: #61534e;
    /* font-family: "Nunito Sans", sans-serif !important; */
    line-height: 22px;
  }

  .swal-footer {
    /* background-color: rgb(245, 248, 250); */
    /* margin-top: 32px; */
    border-top: 1px dotted #E9EEF1;
    overflow: hidden;
  }

  .swal-button {
    /* padding: 7px 19px; */
    border-radius: 2px;
    background: linear-gradient(to right, #2c3e50, #2980b9) !important;
    font-size: 12px;
    border: 1px solid #3e549a;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
  }



  .red_btn {
        background: red !important;
        margin: 0px;
        width: 100%;
        border: none !important;
        box-shadow: 1.171px 9.607px 15px 0px rgb(71 95 123 / 20%) !important;
        height: 55px;
        border-radius: 10px !important;
    }


    .green_btn {
        background: green !important;
        margin: 0px;
        width: 100%;
        border: none !important;
        box-shadow: 1.171px 9.607px 15px 0px rgb(71 95 123 / 20%) !important;
        height: 55px;
        border-radius: 10px !important;
    }