body{
  background-color: #FFF;
  padding:0;
  margin:0;
}
.card-body.br_20_bottom{
    height: 10rem !important;
    overflow: hidden;
}
.card-body{
    height: 6rem;
    overflow: hidden;
}
.bg_img {
  background-image: url('../../../assets/img/home_page.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.login_contain{
  margin: 0;
  position: absolute;
  width:280px;
  top: 50%;
  left: 30%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
}

.select2-container--default .select2-selection--single{
   border-radius: 0 !important;
   border: 0 !important;
   border-bottom: 2px solid #ced1d2 !important;
   -webkit-appearance: none;
}
.select2-container--default.select2-container--focus .select2-selection--single {
   border: 0 !important;
   border-bottom: 2px solid #ced1d2 !important;
   -webkit-appearance: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}
.select2-container *:focus {
    outline: none;
}

.select2-selection {
  -webkit-box-shadow: 0;
  box-shadow: 0;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  color: #555555;
  font-size: 14px;
  outline: 0;
  min-height: 32px;
  text-align: left;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: #D3D0C9 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

.select2-selection__rendered {
  margin: 5px;
}

.select2-selection__arrow {
  margin: 5px;
}

.select2-drop li {
  white-space: pre-line;
}

.nav_icon_size{font-size:22px;}
.letter_spacing02{letter-spacing: 0.2px;}
.font_color_gray {color: #D3D0C9;}
.font_color_gray_force {color: #D3D0C9 !important;}
.bd {border: 1px solid #d8d8d8;}
.example1 {box-shadow: 10px 10px 25px -10px #888;}
.example2 {box-shadow: 10px 10px 15px -10px #888;}
.br_20 {border-radius: 20px;}
.br_5 {border-radius: 5px;}
.br_top_20 {border-radius: 20px 20px 0px 0px;}
.br_20_upper{border-top-left-radius: 20px;border-top-right-radius:20px;}
.br_20_bottom{border-bottom-left-radius: 20px;border-bottom-right-radius:20px;}
.bg_grey{background:#f1f1f2;}
.default_link, .default_link:hover{text-decoration:none; color:#2c96f2;}
.whats_new_desc{font-size:0.7rem; line-height:15px;}
.cust_ul{padding:0;}
.cust_ul li{margin:0 0 6px 0; padding:0; font-size:0.9rem; font-weight:600;}
/* Add */
.br_30_upper_right{border-top-right-radius: 65px;}
.br_30_bottom_right{border-bottom-right-radius: 65px;}
/* Add End */
.list-inline{line-height:14px;}
small{font-size:0.7rem;}
h6{font-size:0.8rem;}
h5{font-size:0.9rem;}
h4{font-size:1.3rem;}
h1{font-size:3rem; font-weight:400;}
h1.cust_small{font-size:2.8rem; font-weight:400;}
h3.cust_small{font-size:1.5rem;}
.custom_font{font-size:2rem;color:#000;}
.custom_bg_dark{background:#000;}
.black_font{color:#000;}
.border0{border:0;}
.bg-white-wallet {
	background-image: url('../../img/bg_shape.png');
	background-repeat: no-repeat;
	background-attachment: inherit;
	background-position: 120% 30%;
	
}
.msisdn_class{color: #D3D0C9; text-decoration:none;}
.msisdn_class:hover{color: #000; text-decoration:none;}
.lh-5{line-height:5px;}
.lh-10{line-height:10px;}
.lh-14{line-height:14px;}

/*layerui*/
body .layui-m-layer-custom-template-class .layui-m-layercont{padding:30px; text-align:left;}
body .layui-m-layer-custom-template-class .layui-m-layerbtn{background-color:#000; width:100%;}
body .layui-m-layer-custom-template-class .layui-m-layerbtn span[yes]{color:#FFFFFF;}

body .layui-m-layer-custom-template-class2 .layui-m-layercont{padding:30px; text-align:left;}
body .layui-m-layer-custom-template-class2 .layui-m-layerbtn{width:100%;}

.custom_h2{font-weight:100;line-height:1;}
.custom_h3{font-weight:700;line-height:1;}
.font_white_link, .font_white_link:hover{color: #FFFFFF; text-decoration:none;}
.custom_field {
	border-bottom:1px solid #cecece; 
	font-size:2.1rem;
	padding:0 5px;
}

input.mobile_input_layerui:focus,input.mobile_input_layerui:active{
	outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-color: transparent;
	border-bottom:1px solid #cecece;
}
/*body .default-class .layui-layer-content{word-break:normal;}*/


/* HOME */
.content-title{
  font-size:4rem;
}

.mt-110{margin-top:110px;}
.no_deco{
  text-decoration: none;
}
.no_deco:hover{
  text-decoration: none;
}

.carousel-control-next.what_hot, .carousel-control-prev.what_hot{
  z-index: 1000 !important;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 5%;
    color: #8d8f92;
    text-align: center;
    opacity: .5;
    transition: opacity .15s ease;
}
.carousel-control-next.what_hot{
  right: -3vw;
}
.carousel-control-prev.what_hot{
  left: -3vw; 
}
.loading_page{
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}
.bottom-0{
  bottom:0;
}
.top-0{
  top:0;
}
.left-0{
  left:0;
}
.right-0{
  right:0;
}
@media (min-width: 992px){
  .mt-lg-n6, .my-lg-n6 {
      margin-top: -9rem !important;
  }
}
.cust_line_bottom{
  border-bottom: 2px solid #ced1d2;
}
.cust_line_left{
  border-left: 2px solid #ced1d2;
}
.mobile_input_layerui{
  width: 100%;
  width: -moz-available; 
  width: -webkit-fill-available;
  width: fill-available;
}
.prevent_fokus:focus{
  outline: -webkit-focus-ring-color auto 0px !important;
}
.oval_button_5{
  border-radius: 5rem;
}
.cust_select_box{
  border-radius: 0px;
  border-left:0px;
  border-right:0px;
  border-top:0px;
  border-bottom: 2px solid #ced1d2;
  -webkit-appearance: none;
}
.cust_select_box:focus{
  box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0);
}
.cust_select_box_register{
  border-radius: 0px;
  border-left:0px;
  border-right:0px;
  border-top:0px;
  border-bottom: 0px;
  -webkit-appearance: none;
}
.cust_select_box_register:focus{
  box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0);
}
.cust_input_box{
  border-radius: 0px;
  border-left:0px;
  border-right:0px;
  border-top:0px;
  border-bottom: 2px solid #ced1d2;
}
.cust_input_box:focus{
  box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0);
}
.cust_input_box::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ced1d2;
  opacity: 1; /* Firefox */
}

.cust_input_box:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ced1d2;
}

.cust_input_box::-ms-input-placeholder { /* Microsoft Edge */
  color: #ced1d2;
}
.cust_input_box_register{
  border-radius: 0px;
  border-left:0px;
  border-right:0px;
  border-top:0px;
  border-bottom: 0px;
}
.cust_input_box_register:focus{
  box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0);
}
.cust_input_box_register::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ced1d2;
  opacity: 1; /* Firefox */
}

.cust_input_box_register:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ced1d2;
}

.cust_input_box_register::-ms-input-placeholder { /* Microsoft Edge */
  color: #ced1d2;
}
.cust_input_box_register:disabled { /* Microsoft Edge */
  background-color: #fff;
}
.overflow_middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.snap_background{
  background-color: #7c7d7f;
}
.image_h2{
  height: 1.8rem;
}
.custom_color_card{
  background-color: #23232C;
}

.rounded-top-1 {
    border-top-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
}

.btn-cust-1 {
    color: #fff;
    background-color: #010101;
    border-color: #010101;
}

.btn-cust-1:hover{
    color: #fff;
    background-color: #010101;
    border-color: #010101;
}

.btn-cust-4 {
    color: #fff;
    background-color: #B6B8BA;
    border-color: #B6B8BA;
}

.btn-cust-4:hover{
    color: #fff;
    background-color: #B6B8BA;
    border-color: #B6B8BA;
}

.btn-cust-5 {
    color: #fff;
    background-color: #5D2B85;
    border-color: #5D2B85;
}

.btn-cust-5:hover{
    color: #fff;
    background-color: #5D2B85;
    border-color: #5D2B85;
}
.default_font_color{
  color:#212529;
}
.default_font_color:hover{
  color:#212529;
}

/*---------- Begin Radial Progress Bars css ----------*/

.largeradialProgressBar {
  border-radius: 50%;
  /*-webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);*/
  width: 150px;
  height: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #ddd;
  margin: 0 auto;
  /*float:left;*/
}
.largeradialProgressBar .overlay {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: auto;
  background: #FFFFFF;
  text-align: center;
  padding-top: 20%;
}


.radialProgressBar {
  border-radius: 50%;
  /*-webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);*/
  width: 90px;
  height: 90px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #ddd;
  margin: 0 auto;
  /*float:left;*/
}
.radialProgressBar .overlay {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: auto;
  background: #FFFFFF;
  text-align: center;
  padding-top: 20%;
}


.smallradialProgressBar {
  border-radius: 50%;
  /*-webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);*/
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #ddd;
  margin: 0 auto;
  /*float:left;*/
}
.smallradialProgressBar .overlay {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin: auto;
  background: #FFFFFF;
  text-align: center;
  padding-top: 10%;
}

.progress-0,.progress-1,.progress-2,.progress-3,.progress-4,.progress-5{
  background-image: -webkit-linear-gradient(left, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #ddd 50%, #ddd 50%);
}

.progress-86,.progress-87,.progress-88,.progress-89,.progress-90,.progress-91,.progress-92,.progress-93,.progress-94,.progress-95{
  background-image: -webkit-linear-gradient(36deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(54deg, #000 50%, transparent 50%), linear-gradient(90deg, #ddd 50%, #000 50%);
}

.progress-76,.progress-77,.progress-78,.progress-79,.progress-80,.progress-81,.progress-82,.progress-84,.progress-85 {
  background-image: -webkit-linear-gradient(72deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(18deg, #000 50%, transparent 50%), linear-gradient(90deg, #ddd 50%, #000 50%);
}

.progress-66,.progress-67,.progress-68,.progress-69,.progress-70,.progress-71,.progress-72,.progress-73,.progress-74,.progress-75 {
  background-image: -webkit-linear-gradient(108deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(-18deg, #000 50%, transparent 50%), linear-gradient(90deg, #ddd 50%, #000 50%);
}

.progress-56,.progress-57,.progress-58,.progress-59,.progress-60,.progress-61,.progress-62,.progress-63,.progress-64,.progress-65 {
  background-image: -webkit-linear-gradient(144deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(-54deg, #000 50%, transparent 50%), linear-gradient(90deg, #ddd 50%, #000 50%);
}

.progress-46,.progress-47,.progress-48,.progress-49,.progress-50,.progress-51,.progress-52,.progress-53,.progress-54,.progress-55 {
  background-image: -webkit-linear-gradient(right, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(-90deg, #000 50%, transparent 50%), linear-gradient(90deg, #ddd 50%, #000 50%);
}

.progress-36,.progress-37,.progress-38,.progress-39,.progress-40,.progress-41,.progress-42,.progress-43,.progress-44,.progress-45 {
  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(36deg, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(54deg, #ddd 50%, #000 50%);
}

.progress-26,.progress-27,.progress-28,.progress-28,.progress-30,.progress-31,.progress-32,.progress-33,.progress-34,.progress-35 {
  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(72deg, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(18deg, #ddd 50%, #000 50%);
}

.progress-20,.progress-21,.progress-22,.progress-23,.progress-24,.progress-25,.progress-16,.progress-17,.progress-18,.progress-19 {
  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(108deg, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(-18deg, #ddd 50%, #000 50%);
}

.progress-10,.progress-6,.progress-7,.progress-8,.progress-9,.progress-11,.progress-12,.progress-13,.progress-14,.progress-15 {
  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(144deg, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(-54deg, #ddd 50%, #000 50%);
}

 .progress-96,.progress-97,.progress-98,.progress-99,.progress-100 {
  background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(right, #028cd5 50%, #ddd 50%);
  background-image: linear-gradient(90deg, #000 50%, transparent 50%), linear-gradient(-90deg, #000 50%, #ddd 50%);
}

/*---------- End Radial Progress Bars css ----------*/
/* Pagination */
.pagination {

  display: inline-block;

  padding-left: 0;

  margin: 20px 0;

  border-radius: 4px;

}

.pagination > li {

  display: inline;

}

.pagination > li > a,

.pagination > li > span {

  position: relative;

  float: left;

  padding: 6px 12px;

  margin-left: -1px;

  line-height: 1.42857143;

  color: #337ab7;

  text-decoration: none;

  background-color: #fff;

  border: 1px solid #ddd;

}

.pagination > li:first-child > a,

.pagination > li:first-child > span {

  margin-left: 0;

  border-top-left-radius: 4px;

  border-bottom-left-radius: 4px;

}

.pagination > li:last-child > a,

.pagination > li:last-child > span {

  border-top-right-radius: 4px;

  border-bottom-right-radius: 4px;

}

.pagination > li > a:hover,

.pagination > li > span:hover,

.pagination > li > a:focus,

.pagination > li > span:focus {

  z-index: 2;

  color: #23527c;

  background-color: #eee;

  border-color: #ddd;

}

.pagination > .active > a,

.pagination > .active > span,

.pagination > .active > a:hover,

.pagination > .active > span:hover,

.pagination > .active > a:focus,

.pagination > .active > span:focus {

  z-index: 3;

  color: #fff;

  cursor: default;

  background-color: #337ab7;

  border-color: #337ab7;

}

.pagination > .disabled > span,

.pagination > .disabled > span:hover,

.pagination > .disabled > span:focus,

.pagination > .disabled > a,

.pagination > .disabled > a:hover,

.pagination > .disabled > a:focus {

  color: #777;

  cursor: not-allowed;

  background-color: #fff;

  border-color: #ddd;

}

.pagination-lg > li > a,

.pagination-lg > li > span {

  padding: 10px 16px;

  font-size: 18px;

  line-height: 1.3333333;

}

.pagination-lg > li:first-child > a,

.pagination-lg > li:first-child > span {

  border-top-left-radius: 6px;

  border-bottom-left-radius: 6px;

}

.pagination-lg > li:last-child > a,

.pagination-lg > li:last-child > span {

  border-top-right-radius: 6px;

  border-bottom-right-radius: 6px;

}

.pagination-sm > li > a,

.pagination-sm > li > span {

  padding: 5px 10px;

  font-size: 12px;

  line-height: 1.5;

}

.pagination-sm > li:first-child > a,

.pagination-sm > li:first-child > span {

  border-top-left-radius: 3px;

  border-bottom-left-radius: 3px;

}

.pagination-sm > li:last-child > a,

.pagination-sm > li:last-child > span {

  border-top-right-radius: 3px;

  border-bottom-right-radius: 3px;

}