.xmpl {
  display: flex;
  flex-direction: column; }

.xmpl{
  text-align: center;
  margin: 0px 19px 6px;
  border-radius: 18px 9px;
  padding : 4px 0px;
  font-family: monospace; 
  font-size : 22px;
  background-color: white; }


.xmpl .button.touchStart{
  background-color: transparent; }

.xmpl img{
  object-fit: contain;
  width : 100%; 
  border : 6px solid ivory;
  background-image: url(icons8-placeholder-100.png);
  background-repeat: no-repeat;
  background-position: center;
  min-height: 128px;
  margin-bottom: 12px; 
}


#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.no-js #loader {
  display: none;
}

.js #loader {
  display: block;
  position: absolute;
  left: 100px;
  top: 0;
}

#loginBg{
  background: url() no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#signupBg{
  background: url() no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* #itemDaily{
  display: none;
} */

.navbar-bg:after {
  display:none;
}

.toolbar:before {
  display:none;
}

.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;
  background: #fff;

}

.demo-swiper {
  margin: 0px 0 35px;
  font-size: 18px;
  height: 120px;
}

.demo-swiper.demo-swiper-auto .swiper-slide {
  width: 85%;
}

.demo-swiper.demo-swiper-auto .swiper-slide:nth-child(2n) {
  width: 70%;
}

.demo-swiper.demo-swiper-auto .swiper-slide:nth-child(3n) {
  width: 30%;
}

#swipe-slide-1{
  background-image: url("../assets/img/banner-1.gif");
}

#swipe-slide-2{
  background-image: url("../assets/img/banner-2.gif");
}

#swipe-slide-3{
  background-image: url("../assets/img/banner-3.gif");
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #089ED9;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #089ED9;
  cursor: pointer;
}

/* iOS Cordova Tweak */
.device-cordova.device-ios {
  height: 100vh;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button > i {
  width: 24px;
  margin-right: 5px;
}



.transbox {
  background-color: transparent;
}



.video-container
{
  /* background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat; */
  color: #fff;
  height: 128px;
  position: absolute;
  top: 0%;
  width: 100%;
  justify-content: center;
  z-index: 1; 
}

.gd-background{
  background-image: linear-gradient(to top, #07972bdc 0%, #94aa9adc 100%);
}

.per-discount{
  background-image: linear-gradient(to top, #07972bdc 0%, #539966dc 100%);
  color: #fff;
}

.btn-grad-service {background-image: linear-gradient(to right, #07972bdc 0%, #0f9b0f  51%, #07972bdc  100%)}

 .btn-grad-service:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }


.btn-grad-main {background-image: linear-gradient(-225deg, #0f9b61 0%, #0f9b0f 52%, #539966dc 100%);}

 .btn-grad-main:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }


.btn-grad {background-image: linear-gradient(to right, #52c234 0%, #061700  51%, #52c234  100%)}

 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }

/* #loginVideo{
  z-index: 1; 
  opacity: 0.3;
  background-color: rgba(0, 4, 255, 0.3);
} */


body {
  display: flex;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


.button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button > i {
  width: 24px;
  margin-right: 5px;
}

.video-container
{
  /* background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat; */
  color: #fff;
  height: 128px;
  position: absolute;
  top: 0%;
  width: 100%;
  z-index: 1; 
}

/* iOS Cordova Tweak */
.device-cordova.device-ios {
  height: 100vh;
}

/* Custom color theme properties */
:root {
  --f7-theme-color: #23a349;
  --f7-theme-color-rgb: 35, 163, 73;
  --f7-theme-color-shade: #1c813a;
  --f7-theme-color-tint: #2ac558;
}

/* Invert navigation bars to fill style */
:root,
:root.dark,
:root .dark {
  --f7-bars-bg-color: var(--f7-theme-color);
  --f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
  --f7-bars-translucent-opacity: 0.9;
  --f7-bars-text-color: #fff;
  --f7-bars-link-color: #fff;
  --f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
  --f7-bars-border-color: transparent;
  --f7-tabbar-link-active-color: #fff;
  --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
  --f7-sheet-border-color: transparent;
  --f7-tabbar-link-active-border-color: #fff;
}
.appbar,
.navbar,
.toolbar,
.subnavbar,
.calendar-header,
.calendar-footer {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-link-highlight-color: var(--f7-link-highlight-white);
  --f7-link-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-button-text-color: #fff;
  --f7-button-pressed-bg-color: rgba(255,255,255,0.1);
}
.navbar-large-transparent,
.navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #000;

  --r: 35;
  --g: 163;
  --b: 73;
  --progress: var(--f7-navbar-large-collapse-progress);
  --f7-bars-link-color: rgb(
    calc(var(--r) + (255 - var(--r)) * var(--progress)),
    calc(var(--g) + (255 - var(--g)) * var(--progress)),
    calc(var(--b) + (255 - var(--b)) * var(--progress))
  );
}
.dark .navbar-large-transparent,
.dark .navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #fff;
}

/* Left Panel right border when it is visible by breakpoint */
.panel-left.panel-in-breakpoint:before {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(0,0,0,0.1);
  content: '';
  z-index: 6000;
}

/* Hide navbar link which opens left panel when it is visible by breakpoint */
.panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel="left"] {
  display: none;
}

/*
  Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)
*/
.ios .panel-left:not(.panel-in-breakpoint).panel-in ~ .view-main:before,
.ios .panel-left:not(.panel-in-breakpoint).panel-closing ~ .view-main:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(0,0,0,0.1);
  content: '';
  z-index: 6000;
}

.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../assets/img/ripple-loader.gif') 50% 50% no-repeat rgb(249,249,249);
  opacity: .8;
}