/*================================================================================
	Item Name: Apex - Angular 4 Bootstrap Admin Template
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
/* @import '~bootstrap/dist/css/bootstrap.min.css'; */
@font-face {
    font-family: 'halva_mediumregular';
    src: url('../fonts/halva-qzy3r-webfont.woff2') format('woff2'),
         url('../fonts/halvamediumregular-almwm-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'halvaregular';
    src: url('../fonts/halva-qzy3r-webfont.woff2') format('woff2'),
         url('../fonts/halva-qzy3r-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
    font-family: 'Cerebri Sans Book';
    font-style: normal;
    font-weight: normal;
    src: local('Cerebri Sans Book'), url('../fonts/Cerebri Sans Book.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Cerebri Sans Book Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Cerebri Sans Book Italic'), url('../fonts/Cerebri Sans Book Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Cerebri Sans Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Cerebri Sans Italic'), url('../fonts/Cerebri Sans Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Cerebri Sans SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Cerebri Sans SemiBold'), url('../fonts/Cerebri Sans SemiBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Cerebri Sans SemiBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Cerebri Sans SemiBold Italic'), url('../fonts/Cerebri Sans SemiBold Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Cerebri Sans Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Cerebri Sans Bold'), url('../fonts/Cerebri Sans Bold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Cerebri Sans Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Cerebri Sans Bold Italic'), url('../fonts/Cerebri Sans Bold Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Cerebri Sans ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Cerebri Sans ExtraBold'), url('../fonts/Cerebri Sans ExtraBold.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Cerebri Sans ExtraBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Cerebri Sans ExtraBold Italic'), url('../fonts/Cerebri Sans ExtraBold Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Cerebri Sans Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Cerebri Sans Heavy'), url('../fonts/Cerebri Sans Heavy.woff') format('woff');
    }
body{
	font-family: 'Cerebri Sans Book';
	font-size: 20px;
	font-weight: Normal;
	color: #000;
}
body.blank-page{
	font-family: 'halvaregular';
	font-size: 14px;
	font-weight: 500;
}
h1{
	font-family: 'Cerebri Sans Bold';
	font-size: 38px;
	font-weight: 700;
}
h3{
	font-size: 34px;
}
h3,h4,h5,h6{
	font-family: 'Cerebri Sans Bold';
}
form label, .form-group label{
	font-size: 16px;
	text-transform: capitalize;
}
.font-weight-lighter,.font-weight-light{
	font-family: 'Cerebri Sans Book' !important;
	font-weight: lighter;
}
.app-sidebar .navigation li.active::before{
	content: "";
	position: absolute;
	right: 0;
	width: 5px;
	height: 100%;
	background-color: #fff;
}
/*** login ***/
#login h1{
	font-family: 'halva_mediumregular';
	font-size: 1.8vw;
	font-weight: normal;
}

.bigHead{
	font-size: 4.2vw;
}
.semiBig{
	font-size: 3.5vw;
}
.left-div{
	background: #fff; height: 100%; display: flex; align-items: center; border-radius: 0 100px 100px 0; box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.15);
}
.left-div-pad{
	padding-left: 60px;
}
.formDiv{
	width: 75%;
	z-index: 2;
	position: relative;
}
.auth-checkbox label{
	font-size: 14px;
	
}
.auth-height::before{
	background-image: url(../img/gallery/cloud-btm.png);
	content: "";
	width: 811px;
	height: 253px;
	position: absolute;
	bottom: 0;
	right: 0;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}
.auth-height::after{
	background-image: url(../img/gallery/cloud-top.png);
	content: "";
	width: 694px;
	height: 337px;
	position: absolute;
	top: 0;
	left: 0;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}
.login-input{
	height: 50px;
	background: #EFF6FF;
border: 1px solid #C6DDFB;
box-sizing: border-box;
border-radius: 15px;
font-size: 16px;
}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #555555;;
	opacity: 1; /* Firefox */
  }
  
 .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #555555;
  }
  
  .form-control::-ms-input-placeholder { /* Microsoft Edge */
	color: #555555;
  }
.login-btn{
	height: 60px;
	border-radius: 15px;
	font-size: 16px;
}

/*** DashBoard ***/
.panalHead a{
	position: relative;
	font-family: 'Cerebri Sans Book';
	font-weight: normal;
	margin-bottom: 10px;
}
.panalHead a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	background-color:#157C68;
	width: 50%;
	height: 4px;
}
/* .custom-nav{
	background: #fff;
    z-index: 1111;
	box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
} */

/*** Profile ***/
.profileTab .nav-link.active{
	border-bottom: none;
	font-family: 'Cerebri Sans Bold';
}
.profileTab .nav-link{
	padding-left: 0;
}
.roundedCard{
	border-radius: 30px;
}
.roundedCard .card-body{
	padding: 30px;
}

.customUpload{
	position: relative;
	overflow: hidden;
	background: rgba(10, 87, 72, 0.14);
	border: 2px solid rgba(10, 87, 72, 0.14);
	box-sizing: border-box;
	border-radius: 60px;
	width: 180px;
	height: 38px;
	font-size: 16px;
	color: #0A5748;
	text-align: center;
	text-transform: uppercase;
	line-height: 35px;
	margin-bottom: 20px;
	}
	.customUpload input {
	position: absolute;
	font-size: 50px;
	opacity: 0;
	right: 0;
	top: 0;
	}
.profImg img{
	width: 110px;
	height: 110px;
	border-radius: 100px;
	object-fit: cover;
	}
.roundBtn{
	min-width: 220px;
	height: 60px;
	border-radius: 60px;
	font-size: 16px;
	font-weight: normal;
}

/*** Explore ***/
.statusDiv{
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
.statusDiv h3{
	color: #fff;
	margin-bottom: 20px;
}

.statusBox{
	border-radius: 10px;
	background-size: cover;
	padding: 20px;
	min-height: 172px;
	display: flex;
	align-items: center;
	position: relative;
}
.statusBox img{
	width: 60px !important;
	height: 60px;
	object-fit: contain;
}
.statusBox::after{
	content: "";
	position: absolute;
	background-image: url(../img/explore/star.png);
	background-size: contain;
	width: 64px;
	height: 65px;
	right: 20px;
}
.statusContent p{
	font-size: 16px;
	font-weight: 400;
}
.imgRad input[type="radio"][id^="cb"] {
  display: none;
}

.imgRad label {
  border: 1px solid transparent;
  padding: 0;
  display: inline-block;
  position: relative;
  margin: 0;
  cursor: pointer;
  width:100%;
  max-width:100%;
  display: flex;
  align-items: center;
  border-radius: 16px;
}

.imgRad label::after {
	content: " ";
	position: absolute;
	width: 45px;
	height: 45px;
	display: block;
  background-color: white;
  border: 10px solid #C4C4C4;
  right: 20px;
  border-radius: 50%;
  z-index: 2;
  /* color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid #b2304d;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0); */
}

.imgRad label img {
  height: 177px;
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
  position: relative;
}

.imgRad :checked + label {
  border-color: rgba(10,87,72,.4);;
}

.imgRad :checked + label::after {
	border-color: #FA5A00;
	transform: scale(1);
	line-height:1.5;
	z-index:1
  }
  
  .imgRad label h4{ 
	  display: block;
	  position: absolute;
	  font-size: 35px;
	  font-family: 'Cerebri Sans Bold';
	  color: #fff;
	  z-index: 2;
	  left: 20px;
	  margin-bottom: 0;
  }
  .imgRad label h4 span{
	  font-size: 60px;
	  display: block;
	  padding-top: 20px;
  }
.green-grad label::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	border-radius: 16px;
	background: linear-gradient(90deg, rgba(10, 87, 72, 0.7) 41.79%, rgba(255, 255, 255, 0.392) 103.04%), url(.png);
}
.blue-grad label::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	border-radius: 16px;
	background: linear-gradient(90deg, rgba(6, 6, 140, 0.7) 42.86%, rgba(255, 255, 255, 0.392) 100%), url(.jpg);
}
.gen-input{
	height: 50px;
	background: #fff;
	border: 1px solid #999999;
	box-sizing: border-box;
	border-radius: 15px;
	font-size: 16px;
	color: #000;
}
.gen-input:focus {
    color: #555555;
    background-color: transparent;
    border-color: #0A5748;
    outline: 0;
    box-shadow: none;
}
.save-btn{
	height: 70px;
	width: 70px;
	border: 2px solid #ccc;
	/* background-color: rgba(48, 90, 82, 1); */
	background-color: rgba(48, 90, 82, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	margin: 0 15px;
}
.save-btn.clicked{
	background-color: rgba(59, 137, 20, 1);
}
.save-btn:hover{
	cursor: pointer;
	background-color: rgba(16, 106, 89, 1);
}
.save-btn.clicked,.save-btn:visited{
	background-color: rgba(59, 137, 20, 1);
}
/*** Scoring ***/
.scoreBoard{
	width: 100%;
	padding: 30px;
	min-height: 455px;
	border-radius: 30px;
	background:url(../img/explore/green-board.png);
	background-size: cover;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
}
.scoreHead{
	font-size: 40px;
	color: #fff;
	font-family: 'Cerebri Sans SemiBold';
}
.question{
	color:#fff;
	font-size: 90px;
	font-family: 'Cerebri Sans SemiBold';
	display: flex;
	justify-content: center;
	align-items: center;
}
.question > div{
	margin:0 15px;
}
.answerInput{
	width: 170px;
	height: 118px;
	border-radius: 20px;
	border: none;
	text-align: center;
	font-size: 90px;
	font-family: 'Cerebri Sans SemiBold';
	color:rgba(137, 135, 135, 1);
}
.answerInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color:rgba(214, 211, 211, 1);
	opacity: 1; /* Firefox */
  }
  
 .answerInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:rgba(214, 211, 211, 1);
  }
  
  .answerInput::-ms-input-placeholder { /* Microsoft Edge */
	color:rgba(214, 211, 211, 1)
  }
  .remark{
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  .scoreBtn{
	  display: flex;
  }
  .scoreBtn .btn{
	  height: 70px;
	  border-radius: 20px;
	  font-size: 16px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin: 0 15px;
  }
  .btn-plain{
	  background-color: #fff;
	  color: #0A5748;
  }
  .btn-plain:hover,.btn-plain:focus{
	  background-color:rgba(255,255,255,0.9);
	  color: #0A5748;
  }
  .btn i{
	  font-size: 25px;
	  margin: 0 10px;
  }
/*** Result ***/
	.resultList{
		padding-left: 20px;
		list-style-type:decimal;
	}
	.resultList .listItem{
		display: flex;
		align-items: center;
		margin-bottom: 40px;
	}
	.resultBoard{
		background: #FFFFFF;
		box-shadow: 0px 4px 54px rgba(0, 0, 0, 0.05);
		border-radius: 30px;
		width: 100%;
		padding: 30px;
		min-height: 455px;
	}
	.quest{
		background: #FFFFFF;
		box-shadow: 0px 4px 54px rgba(0, 0, 0, 0.1);
		border-radius: 100px;
		padding-left: 58px;
		height: 52px;
		position: relative;
		display: flex;
		align-items: center;
		width: 58%;
		margin-right: 20px;
		font-size: 25px;
		margin-left: 100px;
	}
	.ans{
		width: 40%;
		display: flex;
		color: #59AD2E;
		font-size: 18px;
		background: #FFFFFF;
		box-shadow: 0px 4px 54px rgba(0, 0, 0, 0.1);
		border-radius: 100px;
		padding: 12.9px 25px;
	}
.tick{
	background-color: #59AD2E;
	width: 38px;
	height: 38px;
	display: flex;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 7px;
	top: 7px;
}
.cross{
	background-color: #FE0000;
	width: 38px;
	height: 38px;
	display: flex;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 7px;
	top: 7px;
}
/*** Owl ***/

.owl-theme .owl-nav [class*=owl-] {
    font-size: 35px !important;
    margin: 5px;
    padding: 0px 14px !important;
    background: #ccc !important;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
    color: #000 !important;
}
.owl-theme .owl-nav{
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
}
.owl-theme .owl-nav .owl-prev,.owl-theme .owl-nav .owl-next{
	position: absolute;
}
.owl-theme .owl-nav .owl-prev{
	left: 0;
}
.owl-theme .owl-nav .owl-next{
	right: 0;
}
/* .statusDiv {
	position: relative;
  }
  .statusDiv .owl-theme .owl-nav {
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
  }
  .statusDiv .owl-theme .owl-nav .owl-prev, .statusDiv .owl-theme .owl-nav .owl-next {
	position: absolute;
	height: 100px;
	color: inherit;
	background: none;
	border: none;
	z-index: 100;
  }
  .statusDiv .owl-theme .owl-nav .owl-prev i, .statusDiv .owl-theme .owl-nav .owl-next i {
	font-size: 2.5rem;
	color: #cecece;
  }
  .statusDiv .owl-theme .owl-nav .owl-prev {
	left: 0;
  }
  .statusDiv .owl-theme .owl-nav .owl-next {
	right: 0;
  } */
/*** Media ***/
  @media screen and (min-width:991px) and (max-width:1024px){
	.bigHead{
		font-size: 45px;
	}
	.semiBig{
		font-size: 40px;
	}
	#login h1{
		font-size: 30px;
	}
	.auth-height::before{
		background-image: url(../img/gallery/cloud-btm.png);
		content: "";
		width: 385px;
    	height: 120px;
	}
	.auth-height::after{
		background-image: url(../img/gallery/cloud-top.png);
		width: 360px;
    	height: 175px;
	}
}
@media screen and (min-width:768px) and (max-width:990px){
	.bigHead{
		font-size: 45px;
	}
	.semiBig{
		font-size: 40px;
	}
	#login h1{
		font-size: 30px;
	}
	.left-div{
		border-radius: 0;
	}
	.auth-height::before{
		background-image: url(../img/gallery/cloud-btm.png);
		content: "";
		width: 385px;
    	height: 120px;
	}
	.auth-height::after{
		background-image: url(../img/gallery/cloud-top.png);
		width: 360px;
    	height: 175px;
	}
	
}
@media screen and (min-width:551px) and (max-width:767px){
	.bigHead{
		font-size: 45px;
	}
	.semiBig{
		font-size: 40px;
	}
	#login h1{
		font-size: 30px;
	}
	.auth-height::before{
		background-image: url(../img/gallery/cloud-btm.png);
		content: "";
		width: 385px;
    	height: 120px;
	}
	.auth-height::after{
		background-image: url(../img/gallery/cloud-top.png);
		width: 360px;
    	height: 175px;
	}
	.left-div{
		border-radius: 0;
	}
	.formDiv{
		width: 100%;
	}
}
@media screen and (max-width:550px) {
	
	.bigHead{
		font-size: 30px;
	}
	.semiBig{
		font-size: 25px;
	}
	#login h1{
		font-size: 20px;
	}
	.auth-height::before{
		background-image: url(../img/gallery/cloud-btm.png);
		content: "";
		width: 385px;
    	height: 120px;
	}
	.auth-height::after{
		background-image: url(../img/gallery/cloud-top.png);
		width: 360px;
    	height: 175px;
	}
	.left-div{
		border-radius: 0;
	}
	.left-div-pad{
		padding-left: 0;
	}
	.formDiv{
		width: 100%;
	}
	.scoreBoard,.question,.scoreBtn{
		display: block;
	}
	.scoreBtn .btn{
		width: 100%;
		height: 50px;
		margin: 15px 0;
	}
	.resultList .listItem{
		display: block;
	}
	.quest,.ans{
		width: 100%;
	}
	.quest{
		margin-bottom: 15px;
	}
}
 /* You can add global styles to this file, and also import other style files  */
.loader-holder{ width:100%; height: 100%; position:fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.6); z-index: 99999;}
.loader img{ object-fit:contain;position:absolute; margin:auto; width:150px; left:0; right:0; top:0%; bottom:0; }
.main-panel:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 942px;
    /* background-image: url('../../../assets/img/sidebar-bg/common_bg.jpg'); */
	background-image: url('../../assets/img/sidebar-bg/common_bg.jpg');
    z-index: -1;
    opacity: 0.3;
}