/*
   statusbar-overlay sets the background color for the overlay. Black text is the default when the statusbar plugin is not added. When the
   statusbar plugin is added, it also adds default setting to make the content white via:

       <preference name="StatusBarStyle" value="lightcontent"/>

   Setting the background color to black will allow the default light content (white text/icons) to show on it. The statusbar plugin is included
   in the config.xml file and will be added by the CLI when you build locally.

   See https://github.com/apache/cordova-plugin-statusbar
*/

:root {
  --f7-dialog-input-text-align: right;
  --f7-dialog-input-bg-color: #ddd;
}

.statusbar-overlay {
    background: #000000;
}


div[class*="XXcol"] {
  background: #fff;
  text-align: center;
  color: #000;
  border: 1px solid #ddd;
  padding: 30px;
  margin-bottom: 15px;
  font-size: 12px;
}

.page_main {
  background: url("../img/loginbg.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
}

.page_main2 {
  background: white !important;
  background-size: cover !important;
}

/* Portrait layout (default) */
.panel_left {
    background:url(../img/mplbp_logo2.png) no-repeat center bottom; /* 180 x 225 */
    position:absolute;             /* position in the center of the screen */
    leftx:50%;
    topx:50%;
    heightx:100px;                   /* text area height */
    widthx:300px;                   /* text area width */
    text-align:center;
    paddingx:0px 0px 0px 0px;     /* image height is 225 (bottom 20px are overlapped with text) */
    margin: 0px 0px 0px 0px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}



/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}


.card-content-padding {
  padding: 16px 16px 16px 16px;
}



.block_shadow {

-webkit-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);

}

/*
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
*/

.button_mainX {

  border-radius: 10px;

background: linear-gradient(0deg, #e3ffe7 0%, #d9e7ff 100%);

background: linear-gradient(0deg, #efd5ff 0%, #515ada 100%);

background: linear-gradient(0deg, #00d2ff 0%, #3a47d5 100%);

background: white;


  text-align: center;
  color: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
  font-size: 12px;
  

}

.button_main {
 
  text-align: center;
  color: #fff;
  padding: 5px;
  margin-bottom: 0px;
  font-size: 12px;
  

}

.button_label {
  font-weight: normal;  
}

.button_urusniaga {

  border-radius: 10px;

  background: linear-gradient(0deg, #00d2ff 0%, #3a47d5 100%);
  background: white;

  text-align: left;
  color: #000;
  border: 1px solid #ddd;
  padding: 5px;
  margin-bottom: 5px;
  font-size: 14px;

}

.button_urusniaga a {
    display: inline-block;
    width: 100%;

	border: 0px solid #000;
	font-size: 14px;
}


.button_urusniaga span {
	color: #000;
	font-size: 14px;
}



.card_main {

  border-radius: 10px;
  background: #fff;

  text-align: left;
  color: #000;
  border: 1px solid #ddd;
  paddingX: 30px;
  margin-bottomX: 15px;
  font-size: 12px;

}

.card_main2 {

  xborder-radius: 10px;
  background: #f0f5ff;

  text-align: left;
  color: #000;
  border: 1px solid #ddd;
  paddingX: 30px;
  margin-bottomX: 15px;
  font-size: 12px;

}

.button_main a {
  font-weight: bold;
  color: #000000;
}

.label_account {

  text-align: left;
  font-weight: bold;
  color: #000;
  padding: 2px 0px 2px 0px;
  margin-top: 0px;
  font-size: 12px;

}

.label_referrence {

  text-align: left;
  color: #000;
  padding: 2px 0px 2px 0px;
  margin-top: 0px;
  font-size: 12px;

}

.label_referrence p {

  display: inline;
  text-align: left;
  font-weight: bold;

}


.label_amount {
  position: absolute;
  right: 15px;
  top: 2px;
  width: 50%;

  text-align: right;
  font-weight: bold;
  color: blue;
  margin-top: 0px;
  font-size: 18px;
  
}

.label_amount_asal {

  text-align: left;
  font-weight: bold;
  color: blue;
  paddingx: 2px 0px 2px 0px;
  margin-top: 0px;
  font-size: 24px;

}

.label_carno {
  text-align: left;
  font-weight: bold;
  color: blue;
  margin-top: 0px;
  font-size: 18px;

}

.label_kompaun_amaun {
  position: absolute;
  right: 15px;
  top: 2px;
  width: 50%;

  text-align: right;
  font-weight: bold;
  color: green;
  margin-top: 0px;
  font-size: 18px;

}

.swiper-slide img {
  border-radius: 5px !important;
  height: 100%;
}

.demo-swiper .swiper-slide {
  font-size: 25px;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #000;
}
.demo-swiper .swiper-slide {
  box-sizing: border-box;
  border: 0px solid #ddd;
  background: #fff;
}
.demo-swiper {
  margin: 0px 0 35px;
  font-size: 18px;
  height: 120px;
}
.demo-swiper.demo-swiper-auto .swiper-slide {
  width: 90%;
}