body{
	font-family: 'Nunito Sans', sans-serif !important;
	background-color: #F3F2FD !important;
	font-size: 16px;
}
/*============ LOGIN ===========*/

.panel-login{
	padding: 15px;
}
.login{
	padding: 50px 0;
}
.img-login img{
	width: 100%;
	max-height: 300px;
}
.logo-login{
	margin-bottom: 50px !important;
}
.logo-login img{
	max-height: 250px;
	width: 70%;
}
.box-panel{
	border-radius: 10px;
	margin: 0 13%;
	padding: 25px;
	border:1px solid #E0E0E0;
}
.form-input .form-control{
	border:0;
	padding-left: 35px;
	border-bottom: 1px solid #DFDEF0;
	color: #7E83A5;
}
.form-input .form-control:focus{
	border-color: #141C4F;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset, 0 0 8px rgba(0, 0, 0, 0);
	outline: 0 none;
}
.form-input label{
	position: absolute;
	padding-top: 5px;
}
.form-input i{
	color: #F37065;
}
.link-login{
	margin-top: 30px;
}
.link-login a{
	margin: 0 20px;
}
.link-login i{
	color: #7E83A5;
	font-size: 24px;
}
.link-login i:hover{
	color: #F37065;
}
.captcha-code-register{
	margin-left: 35px;
	/*color: #7E83A5;*/
	color: #f37065;
	font-weight: bold;
}
.logo-q7 img{
	max-height: 70px;
}
.ilustration-confimr-img{
	margin-top: 50px;
}
.ilustration-confimr-img img{
	max-height: 250px;
	/*width: 50%;*/
	width: 40%;
}

.box-text-welcome{
	margin-top:70px;
	margin-right: 30px;
	margin-left: 30px;
}

.text-orange {
	color: #F55339;
}

.text-kode{
	/*color: #7E83A5;*/
	color: #f37065;
	font-size:20px;
	margin-left: 34px;
	margin-bottom: 3px;
}

.active-menu{
	background-color: #F3F2FD;
}

.active-menu-m{
	color: #ef4115 !important;
}

.form-error{
    color: #F37065;
    margin-left: 35px;
    font-size: 14px;
}
/*=========== Dashboard =============*/

#panel-dashboard{
	margin: 50px 0;
	border:1px solid #E0E0E0;
	border-radius: 10px;
	height: 100%;
}
.header-dashboard{
	border-bottom: 1px solid #E0E0E0;
	width: 100%;
	margin-bottom: -15px;
}
.header-dashboard-right{
	padding-top: 10px;
}
.header-dashboard-right p{
	margin-bottom: 5px;
}
/*-------------------------*/
.sidepanel  {
	width: 0;
	position: fixed;
	z-index: 1;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #F3F2FD;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
}
.padding-top-menu{
	padding-top: 30px;
}
.sidepanel a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 18px;
	color: #818181;
	display: block;
	transition: 0.3s;
}

.sidepanel a:hover {
	color: #EF4115;
}

.sidepanel .closebtnSide {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
}


.openbtn:hover {
	background-color:#444;
}
/*------------------------*/
.nav-side-menu {
	overflow: auto;
	margin:50px 0;
	font-size: 12px;
	font-weight: 200;
	top: 0px;
	width: 100%;
	color: #e1ffff;
	z-index: 101;
}
.nav-side-menu .brand {
	background-color: #fff;
	line-height: 50px;
	margin-bottom: 50px;
	display: block;
	text-align: center;
	font-size: 14px;
}
.nav-side-menu .toggle-btn {
	display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
	list-style: none;
	padding: 0px;
	margin: 0px;
	line-height: 35px;
	cursor: pointer;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
	font-family: FontAwesome;
	content: "\f078";
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	vertical-align: middle;
	float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
	background-color: #F3F2FD;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
	color: #111;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
	color: #111;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
	background-color: #181c20;
	border: none;
	line-height: 28px;
	margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
	background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
	font-family: FontAwesome;
	content: "\f105";
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	vertical-align: middle;
}
.nav-side-menu li {
	margin-left: 25px;
	padding-left: 20px;
	margin-bottom: 15px;
}
.nav-side-menu li a {
	text-decoration: none;
	color: #7E83A5;
	font-size: 16px;
	display:block;
}
.nav-side-menu li a i {
	padding-left: 10px;
	width: 20px;
	padding-right: 20px;
}
.nav-side-menu li:hover {
	background-color: #F3F2FD;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.menu-content img{
	width: 20px;
}

/*--- Notifikasi ---*/
.bubble-info {
    background-color: #EC421A;
    color: #fff;
    padding: 2px 6px;
    border-radius: 30px;
    font-size: 12px;
    position: relative;
    bottom: 15px;
    right: 100px;
}

/*page pagination*/
.pagination li a{
	border: 1px solid #C6CBEA;
    border-radius: 10px;
    padding: 7px 10px;
	margin-right: 7px;
	color: #7E83A5;
}

.text-pagination{
	margin-bottom:15px;
	color: #7E83A5;
}
/*page pagination*/

@media (max-width: 992px) {
	.nav-side-menu {
		position: relative;
		width: 100%;
		margin-bottom: 10px;
	}
	.nav-side-menu .toggle-btn {
		display: block;
		cursor: pointer;
		position: absolute;
		right: 20px;
		top: 10px;
		z-index: 10 !important;
		padding: 3px;
		background-color: #ffffff;
		color: #000;
		width: 40px;
		text-align: center;
	}
}
@media (min-width: 992px) {
	.nav-side-menu .menu-list .menu-content {
		display: block;
	}
}
.brand-logo-dasbboard{
	padding: 20px 10px 0 10px;
}
.brand-logo-dasbboard img{
	max-height: 80px;
}
.content-dashboard{
	padding: 15px 0 0 0;
}
.humberger{
	padding-top: 20px;
	padding-right: 10px;
	display: none;
}
.border-content{
	border-left: 1px solid #E0E0E0;
	/* border-right: 1px solid #E0E0E0; */
}
.content-center-dashboard{
	/* padding: 40px 0; */
    padding: 40px 25px;
    min-height: 535px;
}
.content-right-dashboard{
	padding: 40px 0;
}
.fa-sort-down{
	color: #EC421A;
	font-size: 22px;
}
.list-notif{
	border-bottom: 1px solid #DFDEF0;
	margin-bottom: 15px;
}
.list-notif p{
	text-align: left !important;
}
.w-50{
	width: 35px;
}
.box-info{
	background-color: #7E83A5;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 20px;
}
.box-info:hover{
	box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .2);
}
.arrow-right:hover{
	-webkit-animation-name: pulse;
	animation-name: pulse;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@keyframes pulse {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
/*---- Reward ----*/
.info-reward h3{
	margin-top: -10px;
}
/*--- menu survey ---*/
.list-survey{
	border:1px solid #C6CBEA;
	border-radius: 10px;
	padding: 15px 15px 5px 15px;
	margin-bottom: 30px;
}
.list-survey:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
}
.list-survey .active{
	background-color: #fff;	
}
.list-survey.finish-survey{
	background-color: #F3F2FD !important;
	filter: grayscale(90%);
}
.list-survey h6{
	font-weight: 600;
	font-size: 14px;
}
.list-survey p{
	font-size: 12px;
}
.status-survey{
	/*margin-top: 35px;	*/
	margin-top: 5px;
	margin-bottom: 10px;
}
.status-survey span {
	background-color: #B87AF7;
	padding: 5px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}
.status-survey.new span {
	background-color: #B87AF7;
	padding: 5px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}
.status-survey.aktif span {
	background-color: #007bff;
	padding: 5px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}
.status-survey.selesai span {
	background-color: #fd7e14;
	padding: 5px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}
.status-survey.tidakaktif span {
	background-color: #6c757d;
	padding: 5px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}
.status-quiz {
    margin-top: 22px;	
}
.status-quiz span {
    background-color: #B87AF7;
	padding: 5px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}
.thumbnail-survey img{
	max-height: 300px;
	width: 100%;
}

/*Scan struk belanja*/
.list-receipt{
	border:1px solid #C6CBEA;
	border-radius: 10px;
	padding: 20px 15px 0 15px;
	margin-bottom: 30px;
}
.list-receipt:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
}
.list-receipt .active{
	background-color: #fff;	
}
.list-receipt.finish-receipt{
	background-color: #F3F2FD !important;
	filter: grayscale(90%);
}
.list-receipt h6{
	font-weight: 600;
	font-size: 14px;
}
.list-receipt p{
	font-size: 12px;
}
.status-receipt{
    text-align: left;
    margin-top: -5px;	
    position: absolute;
    left: -10px;
}
.status-receipt span {
	background-color: #B87AF7;
	padding: 0px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}
.detail-status-receipt{
    margin-top: 10px;
    margin-bottom: 20px;
}
.detail-status-receipt span {
	background-color: #B87AF7;
	padding: 5px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}
.thumbnail-receipt img{
	width: 100%;
    margin-bottom: 20px;
}
.detail-receipt h6{
    margin-top: 20px;
}

/*---- Merchandise ----*/
.jenis-merchandise span {
	background-color: #B87AF7;
	padding: 0px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}

/*--- Menu notifikasi ---*/
.list-notifikasi{
	border:1px solid #C6CBEA;
	border-radius: 10px;
	padding: 15px 15px 0 15px;
	margin-bottom: 30px;
}
.list-notifikasi:hover{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
}
.list-notifikasi.read{
	background-color: #F3F2FD !important;
	filter: grayscale(90%);
}
.list-notifikasi p{
	font-size: 15px;
}
.list-notifikasi .date {
    font-weight: bold;
    font-size: 12px;
}
.list-notifikasi .message {
    
}
.status-notifikasi {
    margin-top: 25px;	
}
.status-notifikasi span {
    background-color: #B87AF7;
	padding: 5px 10px;
	border-radius: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}

/*---- Profil ----*/
.title-info{
	text-align: right;
	margin-top: -30px;
	cursor: pointer;
}
.title-info p{
	color: #B87AF7;
}
.btn-close a{
	color: #fff !important;
	cursor: pointer;
}
#myProgress {
	width: 100%;
	background-color: #DFDEF0;
}
#myBar label{
	text-align: center;
}
#myBar {
	width: 25%;
	height: 2px;
	background-color: #F37065;
}
.menu-profil{
	margin-top: 25px;
}
.menu-profil label{
	color: #121A50;
}
.menu-profil ul li a{
	color: #A6ACD0;
	font-weight: bold;
}
.menu-profil ul li a.active{
	color: #EC421A;
}
.border-bottom-form .form-control{
	border:0;
	padding-left: 0;
	border-bottom: 1px solid #DFDEF0;
	color: #7E83A5;
}
.border-bottom-form .form-control:focus{
	border-color: #141C4F;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset, 0 0 8px rgba(0, 0, 0, 0);
	outline: 0 none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
	-moz-appearance:textfield; /* Firefox */
}
/*.icon-input span{*/
    /*position: absolute; */
    /*right: 20px;*/
    /*margin-top: -30px;*/
    /*color: #F37065;*/
/*}*/
.icon-input .icon-form{
    position: absolute; 
    right: 20px;
    margin-top: -30px;
    color: #F37065;
}
.menu-profil select {
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none; /* Safari and Chrome */
	appearance:none;
}
.thumbnail-img{
	max-height: 250px;
}
.upload-btn-wrapper {
	position: relative;
	overflow: hidden;
}
.upload-btn-wrapper input[type=file] {
	font-size: 100px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;

}
.btn-upload {
	text-align: left;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
	position: relative;
}
.btn-upload:hover{
	cursor: pointer !important;	
}

/*========= Template Survey =========*/
#header-survey{
	position: fixed;
	width: 100%;
	z-index: 101;
	background-color: #fff;
}
#back_page {
	position: fixed;
    top: 13px;
    left: 20px;
    z-index: 102;
}
#footer-template-survey{
	position: absolute;
	background-color: #fff;
	/* margin-top: -60px; */
	text-align:center;
	width: 100%;
	padding: 20px 0 10px 0;
}
.header-no-login{
	padding-bottom: 20px;
}
.header-survey{
	padding: 12px 0 0 0;
	background-color: #F3F2FD;
}
.header-survey-left{ /*edited by candra*/
	/*padding-top: 10px;*/
    position: absolute;
    right: 20px;
    top: -30px;
}
.title-survey{
	padding-top: 8px;
}
.title-survey h4{
	font-weight: bold;
	color: #141C4F;
}
.img-template-survey img{ /*edited by candra*/
	max-height: 85px;
	max-width: 200px;
}
#progress_survey {
	width: 100%;
	background-color: #DFDEF0;
}
#survey_bar {
	width: 0%;
	height: 5px;
	background-color: #EC421A;
}
.panel-survey{
	position: relative;
    min-height: 100vh;
    /*padding-top: 150px;*/
    padding-top: 130px;
}
.title-survey-mobile{
	/*display: none;*/
    display: block;
	margin-bottom: 30px;
}
.hidden-title-mobile{
    display: none;
}
.menu-survey-mobile{
	display: none;
	padding-top: 10px;
}
.list-footer-survey{
	text-align: right;
}
.list-footer-survey ul li{
	display: inline-block;
	margin-left: 15px;
}
.list-footer-survey ul li:before{
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 100px;
	cursor: pointer;
	border: 1px solid #7E83A5;
	background: #7E83A5;
	margin-bottom: 3px;
}
.list-footer-survey ul li a{
	color: #7E83A5;
	font-size: 14px;
	font-weight: 500;
}
.list-footer-survey ul li a:hover{
	font-weight: 600;
}
.menu-survey-mobile .fa-bars{
	font-size: 24px;
}
.sidebarFormSurvey {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 102;
	top: 0;
	left: 0;
	background-color:#F3F2FD;
	overflow-x: hidden;
	transition: 0.5s;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 6px 28px 0 rgba(0, 0, 0, .19)
}
.overlay-content-survey {
	position: relative;
	top: 10%;
	width: 100%;
	left: 15px;
	text-align: left;
	margin-top: 30px;
	;
}
.sidebarFormSurvey h6{
	font-size: 18px;
	margin-bottom: 10px;
	color: #141C4F;
}
.sidebarFormSurvey a {
	padding: 8px 0 8px 0;
	text-decoration: none;
	font-size: 18px;
	color: #141C4F;
	display: block;
	transition: 0.3s;
}

.sidebarFormSurvey a:hover, .sidebarFormSurvey a:focus {
	color: #f1f1f1;
}

.sidebarFormSurvey .closebtn {
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 30px;
}

/*jawaban pertanyaan sebelumnya*/


.answer-prev-question-title {
	opacity: 0.8;
}

.answer-prev-question-value {
	opacity: 0.8;
    font-weight: bold;
}

.answer-prev-question ul{
	list-style-type: none;
    width: 100%;
	margin-left: -20px;
}

.answer-prev-question ul li{
	margin-bottom: 7px;
}



/*end of jawaban pertanyaan sebelumnya*/

.pdl-0{
	padding-left:0px !important;
}
.no-padding {
    padding: 0px !important;
}

.mg-10 {
    margin: 10px !important;
}

.mgt-15 {
    margin-top: 15px !important;
}

/* LOADING */
.bg-loading {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
	z-index: 9999;
	/* opacity: 0.4; */
}

#img-loading {
	position: fixed;
	left: 50%;
	margin-left: -30px;
	top: 50%;
	margin-top: -30px;
	opacity: 1;
}
/* End of LOADING */

/* Ringkasan nilai */
.box-nilai {
    background-color: #7E83A5;
    color: #fff;
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: 10px;
}

/* End of Ringkasan nilai */

/* === survey timer === */
#survey_timer {
    display: block;
    position: fixed;
    bottom: 50px;
    left: 70px;
    z-index: 99;
    color: #F37065;
    background-color: white;
    padding: 2px 20px;
    border-radius: 5px;
    box-shadow: 0px 6px 16px #00000029;
}

#survey_timer #timer {
    font-weight: bold;
    font-size: 2em;
    padding-left: 5px;
}

/* === end of survey timer === */

@media screen and (max-height: 450px) {
	.sidebarFormSurvey a {font-size: 20px}
	.sidebarFormSurvey .closebtn {
		font-size: 40px;
		top: 15px;
		right: 35px;
	}
}
.answer .form-control:focus{
	border-color: #141C4F;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset, 0 0 8px rgba(0, 0, 0, 0);
	outline: 0 none;
	background-color: #FDE6E0;
}
.answer label{
	color: #7E83A5;
	font-weight: bold;
}
/*---- List Survey -----*/
.list_survey{
	margin-bottom: 50px;
}
.boxAnswer{
	padding: 30px 30px 30px 30px;
	margin-bottom: 50px;
	opacity: 0.2;
}
.number-survey2{
	margin-top: -50px;
	text-align: center !important;
	margin-bottom: 30px;
}
.number-survey2 label{
	height: 50px;
	width: 50px;
	border-radius: 100px;
	border:1px solid #DFDEF0;
	background-color: #fff;
	color: #F37065;
	padding-top: 10px;
	font-weight: 600;
}
.box-question .form-control{
	background-color: #fff;
}
.boxAnswer .form-control{
	border-radius: 0 !important;
}
.boxAnswer.active{
    display: block;
	opacity:1;
	box-shadow: 0px 12px 16px #00000029;
	border-radius: 10px;
	background-color: #fff;
}

/* Quiz navigation */
.boxAnswer.hidden-question {
    display: none;
}
.nav-quiz-navigation {
    /* overflow: auto; */
    width: 100%;
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    margin-bottom: 15px;
}
.quiz-navigation {
    /* margin-left: auto; */
    /* margin-right: auto; */
    margin: auto;
}
.quiz-navigation > li > a {
    color: #7E83A5; 
}
.quiz-navigation > .active > a {
    color: white;
    background-color: #EC421A !Important;
    border: solid 1px #fff !Important;
}
.quiz-navigation > .answered > a {
    background-color: #DFDEF0 !Important;
    color: #7E83A5 !important;
    border: solid 1px #fff !Important;
}

/*.boxAnswer.bg-active.active{
	background-color: #fff;
}*/
.boxAnswer.active-btn{
	opacity:1;
}
.number-survey{
	text-align: center;
}
.number-survey{
	font-weight: lighter;
}
.answer{
	margin-top: 20px;
}
.number-survey h4{
	color: #F37065;
	font-size: 22px;
}
.question{
	/*font-weight: bold;*/
	color: #141C4F;
	font-size: 22px;
}
.footer-logo-survey{
	max-width: 100px;
	margin-left: 10px;
}

/* Answer type Single textbox */


/* answer radio button */
.answerRadioButton input:hover{
	background-color: #F3F2FD;
}
.radio-question{
	opacity: 0;
	position: absolute;   
}
.radio-question, .radio-question-label {
	display: inline-block;
	vertical-align: middle;
	margin: 5px;
	cursor: pointer;
	font-size: 16px;
}
.radio-question-label{
	padding: 5px 15px;
	color: #141C4F;
}
.radio-question-label:hover{
	background-color: #F3F2FD;
}
.radio-question + .radio-question-label:before {
	content: '';
	background: #fff;
	border-radius: 5px;
	border: 1px solid #141C4F;
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	/*padding: 0 8px 15px 0;*/
	border-radius:100px;
	margin-right: 10px;
	text-align: center;
}

.radio-question:checked + .radio-question-label:before {
	font-family: "FontAwesome";
	content: "\f00c";
	display: inline-block;
	vertical-align: middle;
	color: #B87AF7;
	font-size: 12px;
	font-weight: 900;
	text-align: center;
}
.radio-question:checked + .radio-question-label {
	background-color: #FDE6E0;	
	padding: 5px 15px;
}

/* answer select */
.answerSelect select{

}
.answerSelect select{
	-moz-appearance:none; 
	-webkit-appearance:none; 
	appearance:none;
}
/*.answerSelect span{*/
	/*position: absolute;*/
	/*right: 25px;*/
	/*margin-top: -30px;*/
/*}*/
.answerSelect .icon-answer{
    position: absolute;
    right: 25px;
    margin-top: -30px;
}
.fa-sort{
	color: #F37065;
}
#showBtnNext2{
	display: none;
}

.box-logo{
	margin-bottom:12px;
}

/* answer type range */
.answerRange{
	margin-right: 150px;
}
.answerRange .output {
	color: #7E83A5;
	font-weight: 600;
	border: 1px solid #C2C0D6;
	width: 66px;
	font-size: 28px;
	height: 46.67px;
	text-align: center;
	padding-top: 2px;
	border-radius: 5px;
}

.answerRange input[type=range] {
	-webkit-appearance: none;
	-moz-apperance: none;
	width: 100%;
	height: 6px;
	background-image: -webkit-gradient(linear,
		left top, 
		right top, 
		color-stop(15%, #DFDEF0),
		color-stop(15%, #DFDEF0));

	background-image: -moz-linear-gradient(left center,
		#DFDEF0 0%, #DFDEF0 0%,
		#DFDEF0 15%, #DFDEF0 100%);
	cursor: pointer;
}

.answerRange input[type="range"]::-moz-range-track {
	border: none;
	background: none;
	outline: none;
}

.answerRange input[type=range]:focus {
	outline: none;
	border: none;
}

.answerRange input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	background-color: #F37065;
	width: 30px;
	height: 30px;
	color: #fff;
	border-radius: 100px;
}

.answerRange input[type=range]::-moz-range-thumb {
	-moz-appearance: none !important;
	background-color: #F37065;
	border: none;
	height: 30px;
	width: 30px;
	color: #fff;
	border-radius: 100px;
}


/* answer checkbox button */

.answerCheckbox input:hover{
	background-color: #F3F2FD;
}
.checkbox-question{
	opacity: 0;
	position: absolute;   
}
.checkbox-question, .checkbox-question-label {
	display: inline-block;
	vertical-align: middle;
	margin: 5px 5px;
	cursor: pointer;
	font-size: 16px;
}
.checkbox-question-label{
	padding: 5px 15px;
	color: #141C4F;
	/* width: 250px; */
}
.checkbox-question-label:hover{
	background-color: #F3F2FD;
}
.checkbox-question + .checkbox-question-label:before {
	content: '';
	background: #fff;
	border: 1px solid #141C4F;
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	text-align: center;
}

.checkbox-question:checked + .checkbox-question-label:before {
	font-family: "FontAwesome";
	content: "\f00c";
	display: inline-block;
	vertical-align: middle;
	color: #141C4F;
	font-size: 13px;
	font-weight: 900;
	text-align: center;
}
.checkbox-question:checked + .checkbox-question-label{
	background-color: #FDE6E0;
	/* width: 250px; */
	padding: 5px 15px;
}
.btn-sumbit-survey{
	background-color: #F3F2FD;
	padding: 20px 0;
}
.btn-sumbit-survey .fa-long-arrow-alt-right{
	font-size: 18px;
	right: 0;
	top: 3px;
	position: relative;
}


/*----- answer input -------*/
.answerInput{
	margin-right: 150px;
}
/*----- answer calender -------*/
.answerTime span{
	position: absolute;
	left: 25px;
	top: 7px;
}
.answerTime .form-control{
	padding-left: 30px;
}
.answerTime i{
	color: #F37065;
}
/*---- answer upload file -----*/
.answerUpload h6{
	color: #7E83A5;
	font-size: 13px;
	font-style: italic;
	margin-bottom: 15px;
}
.answerUpload h5{
	color: #F37065;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
}
.img-upload-file{
	max-height: 25px;
}
.btn-action div{
	display: inline-block;
	margin-right: 10px;
}
.btn-upload-file button{
	background-color: #F37065;
	color: #fff;
	font-weight: bold;
	border-radius: 0;
	border: 3px solid #F37065;
}
.btn-upload-file button:hover{
	background-color: #F37065;
	color: #fff;
}
.box-upload-file{
	border: 1px solid #E0E0E0;
	background-color: #fff;
}
.file-upload{
	display:block;
	text-align:center;
	font-size: 12px;
}
.file-upload .file-select{
	display:block;
	color: #34495e;
	cursor:pointer;
	height:40px;
	line-height:40px;
	text-align:left;
	overflow:hidden;
	position:relative;
	
}
.file-upload .file-select .file-select-button{
	background-color: #fff;
	padding:0 10px;
	display:inline-block;
	height:40px;line-height:40px;
}
.file-upload .file-select .file-select-name{
	line-height:40px;
	display:inline-block;
	padding:0 10px;
	font-size: 16px;
	font-weight: 500;
	position: absolute;
}
.file-upload .file-select:hover{
	border-color:#fff;
	transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}
.file-upload .file-select:hover .file-select-button{
	background-color: #fff;
	color:#666666;
	transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}
.file-upload.active .file-select{
	border-color:#7E83A5;
	transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}
.file-upload.active .file-select .file-select-button{
	background:#FDE6E0;
	color:#666666;
	transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}
.file-upload .file-select input[type=file]{
	z-index:100;
	cursor:pointer;
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	opacity:0;
	color: #666666;
	filter:alpha(opacity=0);
}
.file-upload .file-select.file-select-disabled{
	opacity:0.65;
}
.file-upload .file-select.file-select-disabled:hover{
	cursor:default;
	display:block;
	border: 1px solid #7E83A5;
	color: #34495e;
	cursor:pointer;
	height:40px;
	line-height:40px;
	margin-top:5px;
	text-align:left;
	/* background:; */
	overflow:hidden;
	position:relative;
}
.file-upload .file-select.file-select-disabled:hover .file-select-button{
	background:#dce4ec;
	color:#666666;
	padding:0 10px;
	display:inline-block;
	height:40px;
	line-height:40px;
}
.file-upload .file-select.file-select-disabled:hover .file-select-name{
	line-height:40px;
	display:inline-block;
	padding:0 10px;
}
/*------ answer sort -----*/
.answerSort{
	padding: 25px 25px 15px 25px;
}
.sort-number {
	background-color: #F3F2FD;
	border: 1px solid #C2C0D6;
	max-height: 46.67px;
	max-width:73.67px;
	text-align: center;

}
.sort-number h5{
	color: #7E83A5;
	padding-top: 5px;
}
.bar-icon {
	padding-top: 10px;
}
.bar-icon i{
	color: #F37065;
}
.sort-number i{
	position: relative;
	top: 2px;
}
.desc-opsi h5{
	color: #7E83A5;
	font-weight: 400;
}
.optionSort{
	border-bottom: 1px solid #DFDEF0;
	padding-bottom: 10px;
	margin-bottom: 15px;
	cursor: pointer;
}
#sortable{
	margin-left: -50px;
}
#sortable li{
	list-style: none;
	border-bottom: 1px solid #DFDEF0;
	padding-bottom: 20px;
	margin-bottom: 15px;
	color: #7E83A5;
	cursor: -webkit-grab; 
	cursor: grab;
}
#sortable li span{
	color: #7E83A5;
	padding: 10px 15px;
	background-color: #F3F2FD;
	border: 1px solid #C2C0D6;
	height: 46.67px;
	width:73.67px;
	text-align: center;
	margin-right: 10px;
}
#sortable li:before{
	font-family: FontAwesome;
	content: "\f0c9";
	margin-right: 20px;
	color: #F37065;
	display: inline-block;
}
#sortable select{
	width: 70px;
}
.sortList{
	position: absolute;
	margin-top: -40px;
	margin-left: 30px;
}
.sortList .form-control{
	background-color: #F3F2FD;
	border: 1px solid #C2C0D6;
	color: #7E83A5;
}
/*======= Type Opsi Matrix ==============*/
.panel-box-martrix{
	border-bottom: 1px solid #C2C0D6;
	padding-bottom: 15px;
	margin-bottom: 25px;
}
.panel-box-martrix h5{
	color: #F37065;
	font-weight: 600;
}
/*============= Opsi checkbox gambar ===========*/
.no-img{
	max-height: 200px;
	width: 100%;
}
.checkbox-question2{
	opacity: 0;
	position: absolute;   
}
.checkbox-question2, .checkbox-question-label2 {
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px;
	cursor: pointer;
	font-size: 16px;
}
.checkbox-question-label2{
	padding: 10px 15px;
	color: #141C4F;
	width: 250px;
}
.checkbox-question-label2:hover{
	background-color: #F3F2FD;
}
.checkbox-question2 + .checkbox-question-label2:before {
	content: '';
	background: #fff;
	border: 1px solid #141C4F;
	display: inline-block;
	/*vertical-align: middle;*/
	width: 20px;
	height: 20px;
	/*margin-right: 10px;*/
	/*text-align: center;*/
    position: absolute;
    top: 70px;
}

.checkbox-question2:checked + .checkbox-question-label2:before {
	font-family: "FontAwesome";
	content: "\f00c";
	display: inline-block;
	/*vertical-align: middle;*/
	color: #141C4F;
	font-size: 13px;
	font-weight: 900;
	text-align: center;
}
.checkbox-question2:checked + .checkbox-question-label2{
	background-color: #FDE6E0;
	width: 250px;
	padding: 10px 15px;
}

/*============= Opsi radiobutton gambar ===========*/
.radio-question2{
	opacity: 0;
	position: absolute;   
}
.radio-question2, .radio-question-label2 {
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px;
	cursor: pointer;
	font-size: 16px;
}
.radio-question-label2{
	padding: 10px 15px;
	color: #141C4F;
	width: 250px;
}
.radio-question-label2:hover{
	background-color: #F3F2FD;
}
.radio-question2 + .radio-question-label2:before {
	content: '';
	background: #fff;
	border: 1px solid #141C4F;
	display: inline-block;
	/*vertical-align: middle;*/
	width: 20px;
	height: 20px;
	border-radius: 100px;
	/*margin-right: 10px;*/
	/*text-align: center;*/
    position: absolute;
    top: 70px;
}
.radio-question2:checked + .radio-question-label2:before {
	font-family: "FontAwesome";
	content: "\f00c";
	display: inline-block;
	/*vertical-align: middle;*/
	color: #141C4F;
	font-size: 13px;
	font-weight: 900;
    text-align: center;
}
.radio-question2:checked + .radio-question-label2{
	background-color: #FDE6E0;
	width: 250px;
	padding: 10px 15px;
}

.img-wrap {
    height: 150px;
    position: relative;
    background: #d7dcde;
    margin-left: 30px;
}
.img-checkbox{
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*--------- Ratting -----------*/
.box-rating-skala i{
	font-size: 42px;
}
/*============ Color, Bg Color ===========*/
a:hover{
	text-decoration: none !important;
}
.red{
	color: #EC421A;
}
.bg-color{
	background-color: #F3F2FD;
}
.bg-white{
	background-color: #FFFFFF;
}
.blue{
	color: #141C4F;
}
.orange{
	color: #EC4115;
}
.bg-pink {
    background-color: #F37065 !important; 
}
.soft-blue{
	color: #7E83A5;
}
.white{
	color: #fff !important;
}
.f-12{
	font-size: 12px;
}
.f-14{
	font-size: 14px;
}
/*============ button, Checkbox, Radio ===========*/
.btn-purple {
	background-color: #B87AF7;
	color: #fff;
	padding: 10px 20px;
}
.btn-purple:hover{
	background-color: #B87AF7;
	color: #fff;
}
.btn-grey {
	background-color: #7E83A5;
	color: #fff;
	padding: 10px 20px;
	border-radius: 10px;
}
.btn-grey:hover{
	background-color: #7E83A5;
	color: #fff;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 6px 28px 0 rgba(0, 0, 0, .19);
}
.btn-sumbit-survey button{
	background-color: #EC421A;
	color: #fff;
	width: 230px;
	font-weight: 600;
	border-radius: 10px;
}
.btn-sumbit-survey button:hover{
	color: #fff;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 6px 28px 0 rgba(0, 0, 0, .19);
}
.btn-outline-orange button{
	border: 1px solid #F37065;
	color: #F37065;
	font-weight: 600;
}
.btn-outline-orange button:hover{
	border: 1px solid #F37065;
	background-color: #F37065;
	color: #fff;
}
.showBtnNext button{
	border: 1px solid #F37065;
	color: #F37065;
	font-weight: 600;
}
.showBtnNext button:hover{
	border: 1px solid #F37065;
	background-color: #F37065;
	color: #fff;
}
.btn-save button{
	background-color: #F37065;
	padding:  10px 15px;
	color: #fff;
	font-size: 12px;
	border-radius: 10px;
	font-weight: 600;
}
.btn-save button:hover{
	background-color: #F37065;
	color: #fff;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 6px 28px 0 rgba(0, 0, 0, .19);
}
.btn-orange{
	background-color: #F37065;
	padding: 10px 25px;
	color: #fff;
	border-radius: 10px;
}
.btn-orange:hover{
	background-color: #F37065;
	padding: 10px 25px;
	color: #fff;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 6px 28px 0 rgba(0, 0, 0, .19);
}
.btn-orange2{
	background-color: #F37065;
	padding: 20px 85px;
	color: #fff;
	border-radius: 10px;
}
.btn-orange2:hover{
	background-color: #F37065;
	color: #fff;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 6px 28px 0 rgba(0, 0, 0, .19);
}
.link-orange{
	color: #EC421A !important;
	cursor: pointer;
	text-align: center;
}
.btn-orange-dark{
	background-color: #EC421A;
	padding: 10px 0;
	text-align: center;
	color: #fff;
	border-radius: 10px;
}
.btn-orange-dark:hover{
	background-color: #EC421A;
	color: #fff;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 6px 28px 0 rgba(0, 0, 0, .19);
}
.btn-orange3{
	background-color: #EC421A;
	padding: 20px 85px;
	color: #fff;
	border-radius: 10px;
}
.btn-orange3:hover{
	background-color: #EC421A;
	color: #fff;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 6px 28px 0 rgba(0, 0, 0, .19);
}
.btn-submit button{
	background-color: #F37065;
	padding: 15px ;
	color: #fff;
	border-radius: 10px;
}
.btn-submit button:hover{
	background-color: #F37065;
	padding: 15px ;
	color: #fff;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 6px 28px 0 rgba(0, 0, 0, .19);
}
.btn-submit2 button{
	padding: 15px 65px;
	color: #fff;
	border-radius: 10px;
	background-color: #EC421A;
}
.btn-submit2 button:hover{
	padding: 15px 65px;
	color: #fff;
	background-color: #EC421A;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 6px 28px 0 rgba(0, 0, 0, .19);
}
.dropbtn {
	color: #141C4F;
	padding: 0 10px;
	font-size: 18px;
	border: none;
	cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
	font-weight: bold !important;
}

.dropdown {
	position: relative;
	display: inline-block;
	margin-top: -30px;
}

.dropdown-content {
	display: none;
	border-radius: 10px;
	padding: 0 10px;
	text-align: left;
	position: absolute;
	background-color: #fff;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	color: #7E83A5;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
.dropdown-content-border{
	border-bottom: 1px solid #DFDEF0;
	padding: 0 15px;
}

.dropdown-content a:hover {
	color: #EC421A;
	font-weight: 600;
}

.show {display: block;}

/*--btn filter--*/
.filter {
	color: #B87AF7 !important;
	font-size: 16px;
	border: none;
	font-weight: bold;
	cursor: pointer;
}
.filter:hover{
	font-weight: bold;
}
.filter:focus{
	font-weight: bold;
}
.openFilter {
	position: relative;
	display: inline-block;
}
.close-filter i{
	cursor: pointer;
	position: absolute;
	right: 10px;
	color: #B87AF7;
	font-size: 22px;
}
.dropdown-content-filter {
	display: none;
	left: -15px;
	border-radius: 10px;
	position: absolute;
	margin-top: 5px;
	background-color: #fff;
	padding: 10px;
	min-width: 290px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}


.dropdown-content-filter a:hover {background-color: #ddd;}

.show {display: block;}

/*--- radio button ---*/
.checkbox-custom {
	opacity: 0;
	position: absolute;   
}
.checkbox-custom-label:hover{
	font-weight: bold;
}
.checkbox-custom, .checkbox-custom-label {
	display: inline-block;
	vertical-align: middle;
	margin: 10px 0;
	cursor: pointer;
	color: #121A50;
}

.checkbox-custom + .checkbox-custom-label:before {
	content: '';
	background: #fff;
	border-radius: 5px;
	border: 2px solid #7E83A5;
	display: inline-block;
	vertical-align: middle;
	width: 23px;
	height: 23px;
	margin-top: -5px;
	padding:-5px 0 15px 0;
	border-radius:100px;
	margin-right: 10px;
	text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
	font-family: "FontAwesome";
	content: "\f00c";
	display: inline-block;
	vertical-align: middle;
	color: #B87AF7;
	font-weight: 900;
	text-align: center;
}

.box-btn-submit{
	padding: 30px 30px 30px 30px;
	margin-bottom: 30px;
	opacity: 0.2;
}

.hide{
	display:none;
}

/*.img-checkbox{*/
	/*max-width: 83%;*/
/*}*/

.text-images-opsi{
	margin-left: 35px;
    margin-right: 3px;
    font-weight: 500;
    color: #000000;
}

/*--- Top of mind ---*/
.keterangan-tom{
    margin-bottom: -15px;
    color:#F37065;
    font-size: medium;
    font-weight: 600;
}

.btn-history-survey{
	float: right;
    color: #B87AF7 !important;
    cursor: pointer;
}

.btn-history-survey a{
    color: #B87AF7 !important;
}

.img-answer-prev-question{
	max-width:100%;
	height:200px;
	margin-bottom:5px;
}

/*=========== Responsive ============*/
@media (min-width: 120px) and (max-width: 320px) {
	/*---login---*/
	.box-panel{
		margin: 0 5%;
		padding: 25px;
	}
	.panel-login{
		padding: 5px;
	}
	.img-login img{
		display: none;
	}
	/*---- dashboard----*/
    .content-center-dashboard{
        padding: 40px 0;
    }
	.content-dashboard{
		margin-top: -50px;
	}
	.humberger{
		display: block;
	}
	.header-dashboard-right{
		display: none;
	}
	.border-content{
		border-left: 0;
		border-right: 0;
		border-bottom: 1px solid #E0E0E0;
	}
	.nav-side-menu li {
		margin-right: 25px;
	}
	/*---menu survey---*/
	/*.status-survey{
		text-align: right;
		margin-top: -15px;	
		right: 5px;
		position: absolute;
	}*/
    /*---menu quiz---*/
	/*.status-quiz{
		text-align: right;
		margin-top: -15px;	
		right: 5px;
		position: absolute;
	}*/
    /*---menu struk belanja---*/
	.status-receipt{
		margin-top: -15px;	
        margin-bottom: 15px;
		left: 0px;
		position: relative;
	}
	/*----menu profil----*/
	.title-info{
		margin-top: 20px;
	}
	.scroll-menu{
		overflow-y:auto;
		margin-bottom: -30px;
		display:inline-block;
	}
	.scroll-menu ul{
		text-align: left !important;
		margin-left: -50px;
	}
	.scroll-menu::-webkit-scrollbar { 
		display: none; 
	} 
	.scroll{
		width: 200%;
	}
    
    /*--- Menu notifikasi ---*/
    .status-notifikasi {
        position: absolute;
        bottom: -10px;    
        right: 10px;
    }

	/*--- template survey ----*/
	.img-template-survey img{
		max-height: 80px;
		max-width: 100%;
		/*padding-top: 9px;*/
	}
	.boxRatting{
		margin-left: -10px;
	}
	.panel-survey{
		padding-top: 120px;
	}
	.header-no-login{
		padding-bottom: 0;
	}
	.title-survey-mobile{
		display: block;
	}
	.hidden-title-mobile{
		display: none;
	}
	.menu-survey-mobile{ /*edited by candra*/
		display: block;
        position: absolute;
        right: 20px;
        top: -40px;
	}
	.header-survey-left{
		display: none;
	}
	.title-survey h4{
		font-size: 18px;
	}
	.boxAnswer{
		padding: 20px;
	}
	.number-survey h4{
		font-size: 18px;
	}
	.question{
		/* font-weight: bold; */
		font-size: 18px;
	}
	.question li{
		margin-bottom: 10px;
	}
	.answerRange{
		margin-right: 0;
	}
	.answerInput{
		margin-right: 0;
	}
	.number_question{
		margin-right:0; 
	}
	.logo-template-footer{
		text-align: center;
	}
	.list-footer-survey{
		text-align: center;
	}
	.list-footer-survey ul{
		margin-left: -45px;
	}
	#footer-template-survey{
		background-color: #fff;
		width: 100%;
	}
	.optionSort h5{
		font-size: 14px;
	}
	.bar-icon {
		padding-top: 5px;
	}
	
	.box-logo{
		margin-bottom:8px;
	}

	/* .nps-custom-label{
		visibility: hidden;
	} */

	.nps-custom-label{
		font-size: small !important;
		display: inline-flex;
		margin-left: 8px;
		align-items: center;
		padding: 8px 2px;
	}

	.nps-range-label{
		visibility: hidden;
	}

	.answer-nps .nps-list{
		width: 50px;
    	margin-bottom: 5px !important;
	}
}
@media (min-width: 321px) and (max-width: 576px) {
	/*---login---*/
	.logo-login img{
		max-height: 250px;
		width: 80%;
	}
	.box-panel{
		margin: 0 5%;
		padding: 25px;
	}
	.panel-login{
		padding: 5px;
	}
	.img-login img{
		display: none;
	}
	/*---- dashboard----*/
	#panel-dashboard{
		margin: 10px 0;
		border:1px solid #E0E0E0;
		border-radius: 10px;
		height: 100%;
	}
	.humberger{
		display: block;
	}
	.header-dashboard-right{
		display: none;
	}
    .content-center-dashboard{
        padding: 40px 0;
    }
	.content-dashboard{
		margin-top: -50px;
	}
	.brand-logo-dasbboard img{
		max-height: 50px;
	}
	.border-content{
		border-left: 0;
		border-right: 0;
		border-bottom: 1px solid #E0E0E0;
	}
	.nav-side-menu li {
		margin-right: 25px;
	}
	/*---menu survey---*/
	/*.status-survey{
		text-align: right;
		margin-top: -15px;	
		right: 5px;
		position: absolute;
	}*/
    /*---menu quiz---*/
	/*.status-quiz{
		text-align: right;
		margin-top: -15px;	
		right: 5px;
		position: absolute;
	}*/
    /*---menu struk belanja---*/
	.status-receipt{
		margin-top: -15px;	
        margin-bottom: 15px;
		left: 0px;
		position: relative;
	}
	/*----menu profil----*/
	.title-info{
		margin-top: 20px;
	}

    /*--- Menu notifikasi ---*/
    .status-notifikasi {
        position: absolute;
        bottom: -10px;    
        right: 10px;
    }
    
	.scroll-menu{
		overflow-y:auto;
		/* margin-bottom: -30px; */
		display:inline-block;
	}
	.scroll-menu ul{
		text-align: left !important;
		margin-left: -66px;
	}
	.scroll-menu::-webkit-scrollbar { 
		display: none; 
	} 
	.scroll{
		width: 200%;
	}
	/*--- template survey ----*/
	.panel-survey{
		padding-top: 120px;
	}
	.header-no-login{
		padding-bottom: 0;
	}
	.title-survey-mobile{
		display: block;
	}
	.hidden-title-mobile{
		display: none;
	}
	.menu-survey-mobile{ /*edited by candra*/
		display: block;
        position: absolute;
        right: 20px;
        top: -40px;
	}
	.header-survey-left{
		display: none;
	}
	.title-survey h4{
		font-size: 22px;
		margin-bottom: 40px;
	}
	.boxAnswer{
		padding: 20px;
	}
	.number-survey h4{
		font-size: 18px;
	}
	.question{
		/* font-weight: bold; */
		font-size: 18px;
	}
	.question li{
		margin-bottom: 10px;
	}
	.answerRange{
		margin-right: 0;
	}

	.answerInput{
		margin-right: 0;
	}
	.number_question{
		margin-right:0; 
	}
	.list-footer-survey{
		text-align: center;
	}
	.logo-template-footer{
		text-align: center;
	}
	.list-footer-survey{
		text-align: center;
	}
	.list-footer-survey ul{
		margin-left: -45px;
	}
	.optionSort h5{
		font-size: 18px;
	}
	.bar-icon {
		padding-top: 5px;
	}
	#rateYo{
		font-size: 32px !important;
	}
	
	.box-logo{
		margin-bottom:8px;
	}

	/* .nps-custom-label{
		visibility: hidden;
	} */

	.nps-custom-label{
		display: inline-flex;
		margin-left: 10px;
		align-items: center;
		padding: 6px 2px;
	}

	.nps-range-label{
		visibility: hidden;
	}

	.answer-nps .nps-list{
		width: 100px;
    	margin-bottom: 5px !important;
	}
}
@media (min-width: 577px) and (max-width: 767px) {
	/*---login---*/
	.logo-login img{
		max-height: 250px;
		width: 80%;
	}
	.box-panel{
		margin: 0 5%;
		padding: 25px;
	}
	.panel-login{
		padding: 5px;
	}
	/*---- dashboard----*/
	.humberger{
		display: block;
	}
	.header-dashboard-right{
		display: none;
	}
	.content-dashboard{
		margin-top: -50px;
	}
	.border-content{
		border-left: 0;
		border-right: 0;
		border-bottom: 1px solid #E0E0E0;
	}
	.nav-side-menu li {
		margin-right: 25px;
	}

    /*--- Menu notifikasi ---*/
    .status-notifikasi {
        position: absolute;
        bottom: -10px;    
        right: 10px;
    }

	/*---menu survey---*/
	/*.status-survey{
		text-align: right;
		margin-top: -15px;	
		right: 5px;
		position: absolute;
	}*/
    /*---menu quiz---*/
	/*.status-quiz{
		text-align: right;
		margin-top: -15px;	
		right: 5px;
		position: absolute;
	}*/
    /*---menu struk belanja---*/
	.status-receipt{
		margin-top: -15px;	
        margin-bottom: 15px;
		left: 0px;
		position: relative;
	}
	/*--- template survey ----*/
	.panel-survey{
		padding-top: 120px;
	}
	.title-survey-mobile{
		display: block;
	}
	.hidden-title-mobile{
		display: none;
	}
	.title-survey-mobile{
		display: block;
	}
	.hidden-title-mobile{
		display: none;
	}
	.menu-survey-mobile{ /*edited by candra*/
		display: block;
        position: absolute;
        right: 20px;
        top: -40px;
	}
	.header-survey-left{
		display: none;
	}
	.answerInput{
		margin-right: 0;
	}
	.number_question{
		margin-right:0; 
	}
	.list-footer-survey{
		text-align: center;
	}
	.logo-template-footer{
		text-align: center;
	}
	.list-footer-survey{
		text-align: center;
	}
	.list-footer-survey ul{
		margin-left: -45px;
	}
	.optionSort h5{
		font-size: 18px;
	}
	.bar-icon {
		padding-top: 5px;
	}

	/* .nps-custom-label{
		visibility: hidden;
	} */

	.nps-custom-label{
		display: inline-flex;
		margin-left: 10px;
		align-items: center;
		padding: 6px 2px;
	}

	.nps-range-label{
		visibility: hidden;
	}

	.answer-nps .nps-list{
		width: 100px;
    	margin-bottom: 5px !important;
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	.content-dashboard{
		margin-top: -100px;
	}
	.border-content{
		border-left: 0;
		/* border-right: 1px solid #E0E0E0; */
        border-right: 0;
		border-bottom: 1px solid #E0E0E0;
	}
	.border-left-mobile{
		margin-top: -10px;
	}
	.humberger{
		display: block;
	}
	.header-dashboard-right{
		display: none;
	}
	.content-dashboard{
		margin-top: -50px;
	}
	/*---menu survey---*/
	/*.status-survey{
		text-align: right;
		margin-top: 35px;	
		right: 5px;
		position: absolute;
	}*
    /*---menu quiz---*/
	/*.status-quiz{
		text-align: right;
		margin-top: 22px;	
		right: 5px;
		position: absolute;
	}*/
	/*--- template survey ----*/
	.title-survey-mobile{
		display: block;
	}
	.hidden-title-mobile{
		display: none;
	}
	.title-survey-mobile{
		display: block;
	}
	.hidden-title-mobile{
		display: none;
	}
	.menu-survey-mobile{ /*edited by candra*/
		display: block;
        position: absolute;
        right: 20px;
        top: -40px;
	}
	.header-survey-left{
		display: none;
	}
	.logo-template-footer{
		text-align: center;
	}
	.list-footer-survey ul{
		margin-left: -45px;
	}
	.list-footer-survey{
		text-align: center;
	}
	.optionSort h5{
		font-size: 18px;
	}
	.bar-icon {
		padding-top: 5px;
	}

	/* .nps-custom-label{
		visibility: hidden;
	} */

	.nps-custom-label{
		font-size: small !important;
		display: flex;
		height: 30px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.nps-range-label{
		visibility: hidden;
	}

}

@media (min-width: 993px) and (max-width: 999px) {
	.border-content{
		border-left: 0;
		/* border-right: 1px solid #E0E0E0; */
        border-right: 0;
		border-bottom:0;
	}
	/*--- template survey ----*/
	.panel-survey{
		padding-top: 120px;
	}
	.title-survey-mobile{
		display: block;
	}
	.hidden-title-mobile{
		display: none;
	}
	.title-survey-mobile{
		display: block;
	}
	.hidden-title-mobile{
		display: none;
	}
	.menu-survey-mobile{ /*edited by candra*/
		display: block;
        position: absolute;
        right: 20px;
        top: -40px;
	}
	.header-survey-left{
		display: none;
	}

	.nps-custom-label{
		font-size: small !important;
		display: flex;
		height: 30px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.nps-range-label{
		visibility: hidden;
	}
}
@media (min-width: 1000px) and (max-width: 1200px) {
	.border-left-mobile{
		margin-top: 13px;
		border-right: 1px solid #E0E0E0;
	}

	.border-content{
		border-left: 0;
		/* border-right: 1px solid #E0E0E0; */
        border-right: 0;
		border-bottom:0;
	}
	.title-survey-mobile{
		display: block;
	}
	.hidden-title-mobile{
		display: none;
	}
	.menu-survey-mobile{ /*edited by candra*/
		display: block;
        position: absolute;
        right: 20px;
        top: -40px;
	}
	.header-survey-left{
		display: none;
	}

	.nps-custom-label{
		font-size: small !important;
		display: flex;
		height: 30px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.nps-range-label{
		visibility: hidden;
	}
}


/*gaya jawaban NPS*/
.answer-nps {
	margin-bottom:10px
}

.answer-nps .btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.answer-nps .btn-group-justified {
    display: table !important;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
	border: 1px solid #D2DADF;
    border-radius: 3px;
}

.answer-nps .btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.answer-nps .btn-group-justified>.btn, .btn-group-justified>.btn-group {
    float: none;
    display: table-cell;
    width: 1%;
}

.answer-nps .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	-webkit-box-shadow: none;
    box-shadow: none;
}

.answer-nps .btn-default {
    background-color: #fff;
    color: #444;
    border-color: #D2DADF;
}

.answer-nps .btn:hover {
	background-color: #d9d8ea;
	border: 1px solid #FFFFFF;
}

/*hover untuk nps custom color*/
.answer-nps .bc-green:hover {
	border: 1px solid #24b270 !important;
	background-color: #24b270 !important;
	color: #FFFFFF;
}

.answer-nps .bc-green-yellow:hover {
	border: 1px solid #aac240 !important;
	background-color: #aac240 !important;
	color: #FFFFFF;
}

.answer-nps .bc-yellow:hover {
	border: 1px solid #e8d711 !important;
	background-color: #e8d711 !important;
	color: #FFFFFF;
}

.answer-nps .bc-orange:hover {
	border: 1px solid #f58c5e !important;
	background-color: #f58c5e !important;
	color: #FFFFFF;
}

.answer-nps .bc-red:hover {
	border: 1px solid #FA233C !important;
	background-color: #FA233C !important;
	color: #FFFFFF;
}

.answer-nps .bc-blue:hover {
	border: 1px solid #81adf0 !important;
	background-color: #81adf0 !important;
	color: #FFFFFF;
}

.answer-nps .bc-gray:hover {
	border: 1px solid #D2DADF !important;
	background-color: #D2DADF !important;
	color: #FFFFFF;
}

.answer-nps .bc-black:hover {
	border: 1px solid #000000 !important;
	background-color: #000000 !important;
	color: #FFFFFF;
}
/*end of hover untuk nps custom color*/


.answer-nps .btn-group>.btn, .btn-group-vertical>.btn {
    position: relative;
    float: left;
}

.answer-nps .btn-group>.btn:first-child {
    margin-left: 0;
}

.answer-nps .btn-group-justified>.btn-group .btn {
    width: 100%;
}

.answer-nps .btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child, .btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.answer-nps .nps-list{
    /*margin-left: 0.5px !important;*/
}

.answer-nps .active {
	background-color: #d9d8ea;
	border: 1px solid #FFFFFF;
}

/*class active untuk nps custom color*/
.answer-nps .bc-green.active {
	border: 1px solid #24b270 !important;
	background-color: #24b270 !important;
	color: #FFFFFF;
}

.answer-nps .bc-green-yellow.active {
	border: 1px solid #aac240 !important;
	background-color: #aac240 !important;
	color: #FFFFFF;
}

.answer-nps .bc-yellow.active {
	border: 1px solid #e8d711 !important;
	background-color: #e8d711 !important;
	color: #FFFFFF;
}

.answer-nps .bc-orange.active {
	border: 1px solid #f58c5e !important;
	background-color: #f58c5e !important;
	color: #FFFFFF;
}

.answer-nps .bc-red.active {
	border: 1px solid #FA233C !important;
	background-color: #FA233C !important;
	color: #FFFFFF;
}

.answer-nps .bc-blue.active {
	border: 1px solid #81adf0 !important;
	background-color: #81adf0 !important;
	color: #FFFFFF;
}

.answer-nps .bc-gray.active {
	border: 1px solid #D2DADF !important;
	background-color: #D2DADF !important;
	color: #FFFFFF;
}

.answer-nps .bc-black.active {
	border: 1px solid #000000 !important;
	background-color: #000000 !important;
	color: #FFFFFF;
}

/*end of class active untuk nps custom color*/

.answer-nps .btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) {
    margin-left: 0px;
}
/*end of gaya jawaban NPS*/

.box-description-page{
	margin-top:15px;
	margin-bottom:40px;
	color: #141C4F;
	background-color: #FFFFFF;
	/*font-weight: bold;*/
	font-size: 18px;
	box-shadow: 0px 12px 16px #00000012;
}

.text-description-page{
	text-align: center!important;
	padding: 5px 15px;
	
}

/* Extra small devices "Phones" (<768px) */
@media (max-width: 767px) {
	.answer-nps .btn-default {
		padding: 6px 2px;
	}
}
/* End of Extra small devices "Phones" (<768px) */


/* Small devices "Tablets" (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {

}
/* End of Small devices "Tablets" (≥768px) */


/* Medium devices "Desktops" (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {

}
/* End of Medium devices "Desktops" (≥992px) */


/* Large devices Desktops (≥1200px) */
@media (min-width: 1200px) {
    /*menu struk belanja*/
    .status-receipt{
        text-align: left;
        margin-top: -5px;	
        position: absolute;
        left: -45px;
    }

	.nps-custom-label{
		display: flex;
		text-align: center;
		height: 40px;
		align-items: center;
		justify-content: center;
	}

	.nps-range-label{
		visibility: hidden;
	}
}
/* End of Large devices Desktops (≥1200px)) */