body {
	overscroll-behavior-y: none;
	font-family: MonserratRegular;
}


/* my-app.css */
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}

.lighter{
	font-weight: 300;
}

.bolder{
	font-weight: 500;
}

.extra-bold{
	font-weight: 700;
}

.secondary-color{
	color: #ffb822;
}

.my-outline{
	border-color: #ffb822 !important;
}


.text-color-gray{
	color: #424242 !important;
}

/* ============================================== */

.red-top-bg{
	background: url(../images/bg-red-01.png) no-repeat top center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* ============================================== */

.home-name{
	color: #fff;
	padding-top: 10px;
	padding-left: 10px
}

.my-home-name{
	color: #fff;
	padding-left: 12px;
}

.home-avatar-circle-red{
	width: 35vw;
	height: 35vw;
	margin: 0 auto;
	border: 16px solid rgba(255,0,0,0.7);
	border-radius: 50%;	
	box-shadow: 0 0 10px rgba(0,0,0,.4);
}

.home-avatar-circle-green{
	width: 35vw;
	height: 35vw;
	margin: 0 auto;
	border: 16px solid rgba(20,145,20,0.8);
	border-radius: 50%;	
	box-shadow: 0 0 10px rgba(0,0,0,.4);
}

.home-avatar{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: url(../images/default-user-2.png) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.selfie-check{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin: 0 auto;
	margin-top: 40px;
}


/* ============================================== */

.bg-color-djp{
	/*background-color: #02275d !important;*/
	background-color: #fff !important;
}

.bg-color-silver{
	/*background-color: #02275d !important;*/
	background-color: #eeeeee !important;
}

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

.bg-color-my-red{
	background-color: #d32f2f !important;
}

.bg-color-white{
	/*background-color: #02275d !important;*/
	background-color: #ffffff !important;
}

.bg-transparent{
	background-color: transparent !important;
}


.my-full-div{
	width: 100vw;
	height: 100vh;
	/*background-color: #02275d; !important;*/
	background-color: #fff; !important;
}

.my-full-div-red{
	width: 100vw;
	height: 90vh;
	/*background-color: #02275d; !important;*/
	background-color: #d32f2f !important;
	color: #fff;
}


.dead-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  text-align: center;
  width: 80vw;
  height: 50vh;
}

.dead-center-alt {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  text-align: center;
  width: 80vw;
  height: 80vh;
}

.dead-center-qr {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  text-align: center;
  width: 70vw;
  height: 50vh;
}


.spacer{
	width: 100%;
	height: 2vh;
}


/* ==================================== */

.home-swiper{
	width: 100vw;
	height: 70vw;
	background: #D2D2D2;
	border-bottom: .25pt solid #808080;
}

.home-swiper-slide{
	width: 100vw;
	height: 70vw !important;
	background: #D2D2D2;
	overflow: hidden;
}

.home-stat{
	text-align: center;
	width: 90vw;
	min-height: 35px;
	margin: 0 auto;
	margin-top: 10px;
	padding: 2vw;
	border-radius: 5px;
	box-shadow: 0 0 4px rgba(0,0,0,.5); 
	color: #fff;
	background-color: #0080AA;
}

.menu-dynamic-flex-container {
	width: 100vw;
	margin: 15px auto;
}

.menu-dynamic-flex-container .swiper-wrapper:first-child{
	margin-left: 20px;
}

.menu-static-flex-container {
	width: 90vw;
	margin: 15px auto;
	display: flex;
	flex-wrap: wrap;
}

.home-icons{
	width: 60px;
	height: 70px;
	margin: 5px;
	margin-bottom: 12px;
	text-align: center;
	font-size: 11px !important;
	line-height: 12px;
	color: #808080;
}

.home-icons a, .home-icons a:active, .home-icons a:visited, .home-icons a:active{
	color: #808080;
}

.partner-title{
	width: 100vw;
	padding: 10px 0 10px 0;
	font-size: 12px;
	text-align: center;
	color: #808080;
	border-top: .25pt solid #A5A5A5;
}

.partner-swiper{
	color: #808080;
}

.partner-swiper .swiper-wrapper:first-child{
	margin-left: 20px;
}

.partner-logo{
	width: 100px;
	height: 36px;
	overflow: hidden;
}

.partner-logo img{
	height: 36px;
}


/* ==================================== */

::placeholder{
	/*color: #fff !important;*/
}

.progressbar-infinite{
	height: 3px !important;
	background: transparent !important;
}

.preloader-modal{
	background-color: transparent !important;
}

.input-focused{
	border-bottom: 0.25pt solid red !important;
}


/* notification oveeride */
.notification-title{
	color: #ff0000 !important;
	font-size: 12px !important;
	font-family: MonserratRegular !important;
}
.notification-subtitle{
	color: #303030 !important;
	font-size: 14px !important;
	font-family: MonserratRegular !important;
}
.notification-text{
	font-size: 11px !important;
	font-family: MonserratRegular !important;
}
/* =============== */
.my-input{
	background: transparent;
	color: #333;
	border: 0;
	font-size: 1em;
}

.my-bigass-input{
	background: transparent;
	color: #333;
	border: 0;
	font-size: 32px !important;
	text-align: center !important;
	letter-spacing: 3px !important;
	font-family: Smoolthan !important;
}

.my-bigass-input input placeholder{
	padding-top: 10px;
}

.x-header{
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 1.2em;
	padding: 56px 0;
}

.x-bottom{
	width: 100%;
	height: 50px;
	padding: 15px 0;
	position: fixed;
	bottom: 0;
	left: 0;
	text-align: center;
	color: #fff;
	z-index: 10000 !important;
}

.my-video{
	width: 100%;
	height: 100%;
	text-align: center;
}

.x-video{
	width: 100% !important;
}

.x-snap{
	width: 100% !important;
}

.my-x-snap{
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: 0 auto;
	width: 100vw;
	height: 100vw;
	/*border: 4px solid rgba(255,255,255,0.5);*/
}

.a2hs-btn{
	width: 100%;
	text-align: center;
	font-size: 1em;
	padding: 30px 0 0 0;
}

.my-image{
	background-image: url('../images/default-user.png');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center; 
	margin: 0 auto;
	width: 96px;
	height: 96px;
	border: 2px solid #fff;
	border-radius: 50%;
}

.xvideo{
	width: 80vw;
	height: 80vw !important;
	object-fit: cover;
}

.xcanvas{
	width: 80vw;
	height: 80vw !important;
	object-fit: cover;
}

.selfie-box{
	position: absolute;
	z-index: 1000;
	margin-top: -80vw;
	width: 80vw;
	height: 80vw !important;
	background-image: url('../images/selfie-box.png');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
}

.my-qr{
	/*background-image: url('../images/default-user.png');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center; */
	margin: 0 auto;
	width: 200px;
	height: 200px;
	/*border: 10px solid #fff;*/
}

.x-title{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}


.navbar .title {
	text-align: center !important;
	width: 100% !important;
}

.surveydiv{
	width: 100%;
	font-size: 1.1em;
	line-height: 0.9em;
	text-align: center;
}


.home-gauge{
	margin: 0 auto;
	width: 200px;
	height: 200px;
}

.my-gauge{	
	width: 100%;
	height: 100%;
}

.circle-profile{
	background: #f5f5f5 url(../images/default-user-2.png) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: 0 auto;
	margin-top: -180px !important;
	width: 160px;
	height: 160px;
	border-radius: 80px;
	background-position: contain;
}

.vax-strength{
	margin: 0 auto;
	margin-top: 40px;
	width: 160px;
	padding: 10px;
	background: #5A5A5A;
	color: #fff;
	border: 3px solid #4B4B4B;
	border-radius: 8px;
}

.capture-pic{
	width: 80vw;
	height: 80vw;
	margin: 0 auto;
	background: #fff url(../images/default-user-2.png) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	box-shadow: 0 0 5px rgba(0,0,0,.7);
}

.p-soal{
	padding: 25px 10px;
	color: #404040;
}


.test-pribadi-pos{	
	width: 16vw;
	height: 16vw;
	margin: 0 auto;
	margin-top: -8vw;
	margin-bottom: 4px;
	text-align: center;
	overflow: hidden;
	background: #d32f2f;
	border: 4vw solid #f44336;
	color: #ffffff;
	box-shadow: 0 0 5px rgba(0,0,0,.7);
	border-radius: 8vw;
}

.test-pribadi-pos-current{
	font-size: 24px;
	padding-top: 5px;
}

.test-pribadi-pos-total{
	font-size: 10px;
	margin-top: -4px !important;
}

.t2-static{
	position: fixed;
	width: 80vw;
	top: 55px;
	left: 10vw;
}

.test-table-key{
	width: 100%;
	border-collapse: collapse;
	background: #FFFFAA;
	font-size: 13px !important;
}

.test-table-key th, .test-table-key td{
	text-align: center !important;
	border: 1px solid #ddd;
	padding: 2px;
}

.test-table{
	width: 100%;
	border-collapse: collapse;
}

.test-table th, .test-table td{
	text-align: center !important;
	width: 10% !important;
	border: 1px solid #ddd;
	padding: 4px 2px;
}

.test-table tr:nth-child(even){
	background-color: #f2f2f2;
}

.test-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #FF552A;
  color: white;
} 


.t2-button-div{
	width: 80vw;
	margin: 10px auto;
	padding-bottom: 30px;
}

.profile-box{
	background-color: #eeeeee;
	height: 140px;
	padding: 20px 0;
	text-align: center;
}

.profile-avatar{
	width: 120px;
	height: 120px;
	border-radius: 60px;
}


/* == pulse anim == */

.pulse {
	position: relative;
	display: inline-block;
	width: 200px!important; 
	height: 200px!important; 
	line-height: 22px;
	border-radius: 100%;
	/* background-color: #ffcc00; */
	text-align: center;
	cursor: pointer; 
	margin: auto;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 5px gray;
	background-size: 220px;
  }

.pulse:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%;
	background-color: #cca92c;
	border-radius: 100%; 
	z-index: -1;
	animation: pulse 1s infinite; 
	will-change: transform;
  }
  
 @keyframes pulse {
	0% {
	  transform: scale(1);
	  opacity: 1;
	}
	100% {
	  transform: scale(2);
	  opacity: 0;
	}
   }



:root {
  --f7-tabbar-link-active-border-color: transparent !important;
}