html {
  overflow-x: hidden;
  height:100%;
}

body {
  font-family: "Roboto", sans-serif;
  color: #9fa1a4;
  line-height: 1.5;
 min-height:100%;  
 background:#f5f5f5;
}

a {
  color: #777;
  transition: .3s all ease;
} 
a:visited, a:active {
    color: ##f5593d;
}
a:hover {
  color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: 'Nunito Sans', sans-serif;
  color: #333;
  font-weight:900;
}

.h1_div{margin:40px 4px 10px 4px;}

section{padding: 50px 2px;}


::placeholder {color: #ddd;opacity: 1;}/* Firefox */
:-ms-input-placeholder {color: #ddd;} /* Internet Explorer 10-11 */
::-ms-input-placeholder {color: #ddd;}  /* Microsoft Edge */



.bck_white{background:#fff !important;opacity: 1 !important;;}
.color_dither{color:#eee;}
.color_active{color:#333;}
.centered{text-align:center;}
.txt_dark{color:#333 !important;}

.input-lg{padding: 10px 20px;background:#fff !important;}


/* login */
.bck_login{background-color:#3a0322; color:#b2c2d1;} /*c2e4e*/
.bck_login .div_center{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	
}
.bck_login .boxshadow{	
	-webkit-box-shadow: 10px 10px 14px -6px rgba(0,0,0,0.44);
	-moz-box-shadow: 10px 10px 14px -6px rgba(0,0,0,0.44);
	box-shadow: 10px 10px 14px -6px rgba(0,0,0,0.44);
	padding:40px 60px 20px 60px;
}
.bck_login .login_div{
	width:500px;
	height: auto;
	border-radius: 25px;
	background:#fff;

	
}
.bck_login .login_hd{font-size:3.2em;color:#000;}
.bck_login .login_hd b{font-weight:900;}

.my-error-class {color:#f66 !important;}
.my-valid-class {}




/* dashboard*/
.newsurvey_pad{margin:auto;padding:30px 4px;}
.newsurvey_pad .hd{padding-bottom:20px;}
.newsurvey_pad .divinput{display:inline-block;}
.newsurvey_pad .divinput input{width:300px;}
.newsurvey_pad .divbtn{display:inline-block;padding-left:16px;}



.msgbox_green{background:#12cd4c;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding:20px 20px 20px 20px;text-align:left;}
.msgbox_red{background:#d00;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding:20px 20px 20px 20px;text-align:left;}
.msgbox_grey{background:#888;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding:20px 20px 20px 20px;text-align:left;}



.menu_pad_wrap{padding:10px;}
.menu_pad{
	position:relative;width:100%;background:#fff;height:180px;padding:10px 10px;
	-webkit-box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	transition: all 0.3s;
}
.menu_pad_s{background:#3a0322;}
.menu_pad:hover{transform: scale(1.1);cursor:pointer;}

.menu_pad .imgtd{padding:20px 2px;text-align:center;}
.menu_pad .imgtd img{width:48px;}
.menu_pad .txttd{padding:0px 2px;text-align:left;padding-right:20px;}
.menu_pad .txttd h3{color:#333;font-size:28px;margin:0px;}
.menu_pad .txttd .h3_s{color:#fff;}
.menu_pad .p_td {color:#a7a7a7;padding:0px 20px 10px 20px;line-height:150%;}
.menu_pad .p_td_s {color:#d9d9d9;;padding:0px 20px 10px 20px;line-height:150%;}

.menu_pad_buttons{padding:4px;float:left;display:inline-block;} /*small displays only*/

.wrkspace_pad{
	position:relative;background:#fff;width:100%;height:220px;padding:20px 40px;display:inline-block;
	-webkit-box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	transition: all 0.3s;
}
.wrkspace_whitebox{
	position:relative;background:#fff;width:100%;padding:20px 40px;
	-webkit-box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	transition: all 0.3s;
}
.dashtable{width:100%;}
.dashtable tr{
	border-bottom:1px solid;
    border-color: #ddd;
}
.dashtable th{
    padding: 12px 8px;
    vertical-align: middle;
	font-weight:700;
	color:#333;
}
.dashtable td{
    padding: 12px 8px;
    vertical-align: middle;

}
.dashtable .survey_listrow{cursor:pointer;}

.wrkspace_pad:hover{transform: scale(1.1);cursor:pointer;}
.wrkspace_pad_wrap{padding:20px;}

.tbl_columns{width:80%;}
.tblcell_top{vertical-align:top;}

/* icons */
.ico48_info{background:url(/img/icons48x48.png) 0px 0px no-repeat;display:inline-block;width:48px;height:48px;}




/* Editor */
.topbar{background:#fff;} 
.topbar_top{border-bottom:1px solid #eee;color:#333;padding:8px 20px;height:60px;} 
.topbar_submenu{position:relative;border-bottom:1px solid #eee;color:#333;padding:0px 20px;height:60px;} 
.topbar_submenu .left{position:absolute;left:20px;padding:18px 0px;height:60px;} 
.topbar_submenu .left .surveytitle{font-size:14px;padding-right:20px;}
.topbar_submenu .right{position:absolute;right:0px;top:0px;padding:0px 0px;} 
.topbar .logo_div{font-size:2em;display:inline-block;float:left;cursor:pointer;display:inline-block;	}
.topbar .logo_div b{font-weight:900;}
.topbar .logout_div{display:inline-block;float:right;cursor:pointer;border:1px solid #ddd;padding:6px 8px;color:#bbb;}
.topbar .topright_menu_div{position:absolute;right:20px;padding:0px 0px;font-size:28px;color:#bbb;}
.topbar .topright_menu_btn{padding-right:10px;padding-bottom:12px;padding-top:0px;margin:0px;} 
.topbar .topbar_img{position:absolute;top:8px;right:50px;opacity: 0.85;border:0px;height:32px;}
.topbar_link a:link, .topbar_link a:visited, .topbar_link a:hover, .topbar_link a:active{
	font-weight: 600; padding: 2px 18px;text-transform: uppercase;font-size: 12px;} 
.topbar_icon{border-left:1px solid #eee;padding:8px 16px;height:60px !important;display:inline-block;}
.topbar_icon img{position:relative;width:42px; height:42px;}




#dashboard{position:relative;}
.dashboardheight{min-height: calc(100vh - 120px);}
.bckedleft{background:#f5f5f5;position:absolute;left:0px;min-width: calc(100% - 300px);padding:20px 40px;}
.bckedright{background:#fbfbfbfb;color:#888;padding:20px 10px;width:300px;position:absolute;right:0px;} 

.opt_nav_buttons{position:relative;height:50px;}
.opt_nav_buttons .btn_next{position:absolute;right:0px;display:inline-block;}
.opt_nav_buttons .btn_prev{position:absolute;left:0px;display:inline-block;}
#previewwin{position:relative;background:#fff;width:100%;min-height: calc(100vh - 200px);padding:30px 40px;
	-webkit-box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
	box-shadow: 0px 10px 31px -10px rgba(0,0,0,0.25);
}
.pws_question_extra{padding-bottom:20px;}
.pwr_question_spacer{padding-bottom:20px;}

#previewtxt_layer{position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:100;}
#previewtxt_layer .centeraligned{position: relative;float: left;top: 50%;left: 50%;transform: translate(-50%, -50%);color:#eee;font-size:4.6em;font-weight:900;}



.opt_inputtext{padding-bottom:4px;} 
.opt_answer{padding: 2px 0px 2px 0px;display:inline-block;} 
.opt_hd{padding-top:16px; padding-bottom:4px; font-weight:400; font-size: 1.4em;}
.opt_but{padding-top:0px; padding-bottom:4px; margin-top:0px;}
.opt_break{padding-top:16px; padding-bottom:4px; }	
	
.opt_select{position:relative;}	
.opt_select .txt{position:absolute;left:0;padding-top:4px;font-weight:400;font-size: 1.4em;}
.opt_select .select{position:absolute;right:0;}		
.opt_select .select100{padding-top:36;width:100%;}	


.opt_slider{position:relative;height:30px;}	
.opt_slider .txt{position:absolute;left:0;padding-top:4px;font-weight:400;font-size: 1.4em;}
.opt_slider .slider_value {position:absolute;right:0;font-size: 1.4em;padding-top:4px;font-weight:400;}		
.slider .noUi-handle{
	border-color: #f5593d;
	border-width: 2px;
	width: 18px;
    height: 18px;
    left: -12px;
    top: -8px;
}
.slider .noUi-base{}

.opt_toggle{position:relative;min-height:42px;}	
.opt_toggle .txt{position:absolute;left:0;font-weight:400;font-size: 1.4em;}
.opt_toggle .togglebutton{position:absolute;right:0;padding-top:2px;}	



.prw_rating_div{padding:20px 0px;}
table.prw_rating{border-collapse: separate !important;}
table.prw_rating tr th{color:#888;text-align:center;padding:10px 2px;font-weight:normal;border:0px solid;}
.td_normal{cursor:pointer;text-align:center;padding:20px 25px; font-size: 1.0em; color:#888;border-left:1px solid #aaa; border-top:1px solid #aaa; border-bottom:1px solid #aaa;}
.td_first {
	border-left:1px solid #aaa; border-top:1px solid #aaa; border-bottom:1px solid #aaa;
	border-top-left-radius: 8px !important;
	border-bottom-left-radius: 8px;
}
.td_last {
	border:1px solid #aaa;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}
.td_dontknow{padding:10px 30px;}
.td_smiley{padding:10px 10px;text-align:center;}
.td_smiley .imgwrap img{}	 
.td_smiley .imgwrap{width:64px;height:74px;display:inline-block;text-align:center;}
.td_smiley .imgwrap_many img{width:44px;}	
.td_smiley .imgwrap_many{width:44px;height:54px;display:inline-block;text-align:center;margin:auto;	}
.td_smiley .checkbox_wrap{margin:auto;width:25px;padding-left:20px;height:15px;}
.td_smiley .radiowrap{width:44px;height:44px;display:inline-block;}	
	
	
.bckedright .option_layer{background:#fbfbfbfb;color:#888;padding:0px 10px;position:absolute;bottom:0px;left:0px;width:100%;height:1px;z-index:100;opacity: 1;}

.questionpage{}
.questionpage .pageimg{position:relative;width:70px;padding-top:10px;padding-right:30px;}
.questionpage .pageimg>img{width:50px;opacity: 0.5;}
.questionpage .pageimg .pageno{position:absolute;top:35;left:22;}
.questionpage .questiontxt{width:90%;cursor:pointer;padding:10px 0px 30px 0px;}
.questionpage .questiontxt .hd{font-weight:700; font-size: 26px;font-family: "Roboto", sans-serif;}
.questionpage .question_css{}
.questionpage .menu{padding-top:20px;padding-left:20px;text-align:right;}
.questionpage .divider_container{padding:10px 0px 10px 0px;}
.questionpage .divider{
    border-top: 2px dashed #e8e8e8;
    z-index: 2;
    width: 100%; /*can be in percentage also.*/
    margin: 0 auto;
    position: relative;
	height:2px;
}
.questionpage .gradientfade{
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
    height: 100px;
    margin-top: -100px;
    position: relative;
    width: 100%;
	z-index:2;
}


.previewheader{position:relative;height:30px;}
.previewheader label{position:absolute;margin:0px;left:20px;bottom:0px;z-index:100;display:inline-block;padding:6px 30px 0px 30px;background:#fff;color:#aaa;	
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	font-weight:600;font-size:1.4em;
	font-family: 'Nunito Sans', sans-serif;
}

.slidedonwdiv{cursor:pointer;}




.loading_bck{display:none;z-index:1000;width: 100%;height: 100%;position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0,0,0,.5);}   
/* popup win */
#popup_questiontypes{display:none;z-index:10000;position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #fff;width:800px; height:500px;margin:auto;color:#000;border-radius: 8px;}  
#popup_questiontypes .button_box{text-align:center;padding-top:40px;} 
.popup_wrap{padding:20px 40px;text-align:center;}
.popup_wrap p{font-size: 1.2em;}
.popup_wrap h5{font-size: 1.4em;text-align:center;}
.popup_wrap h2{font-size: 32px;font-weight:700;padding-bottom:20px;}
#popup_close_qt{position:absolute;top:10;right:10;cursor:pointer;border:1px solid #aaa;padding:2px 8px 2px 8px;display:inner-block;border-radius: 2px;}
#popup_questiontypes .qt_td {height:85px;display:table;border-right:1px solid #ddd;}
#popup_questiontypes .qt_td_w {height:85px;display:table;border-right:1px solid #fff;}
#popup_questiontypes .qt_imgwrap{display:table-cell;width:32px;vertical-align: middle;padding-left:20px;}
#popup_questiontypes .qt_txt{padding-left:20px;font-size:18px;color:#000;font-weight:600;text-align:left;
			display:table-cell; vertical-align:middle;}
#popup_questiontypes .qt_td:hover,#popup_questiontypes .qt_td_w:hover{background-color:#f4f4f4;cursor:pointer;}

/*survey*/
.s_question{font-weight:700; font-size: 26px;padding-bottom:20px;}

/* buttons */
.btn_black{background: #444;color:#fff;}
.btn-sm{padding-left:20px;padding-right:20px;}

/* colorpicker */
.jscolor{
	border:1px solid #888;
	border-radius: 3px;
	padding:8px;
	background: url('/img/caret_down.png') no-repeat right 16px center;

}

/* -------------- form objectss ----------*/
/*.form-control {padding: 13px 12px;border: 1px solid #d9d9d9;border-radius: 8px;height: auto;box-shadow:none;-webkit-appearance:none;}*/
.form-control_select{
	-moz-appearance: none;-webkit-appearance: none;appearance: none;
	background: #fff url(/img/ico_chevron_down.png) no-repeat; background-position: right 15px top 15px; 
}


/* ---------------------------------------*/
/* custom checkmark / radiobutton */
/* ---------------------------------------*/
.label_font{font-size:20px;}

.check_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 18px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.check_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.check_checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
	background-color: #fff;
  border: 2px solid #888;
}

/* On mouse-over, add a grey background color */
.check_container:hover input ~ .check_checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check_container input:checked ~ .check_checkmark {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.check_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.check_container input:checked ~ .check_checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.check_container .check_checkmark:after {
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid #888;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



/* ----- radio ----------*/

.radio_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 18px;
  cursor: pointer;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.radio_checkmark {
  position: absolute;
  top: 2;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 2px solid #888;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .radio_checkmark {
  background-color: #eee;
}

/* When the radio button is checked, add a blue background */
.radio_container input:checked ~ .radio_checkmark {
  background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked ~ .radio_checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .radio_checkmark:after {
  top: 6px;
  left: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #888;
}



/* ----- Toggle ----------*/
.toggle_switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.toggle_switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle_slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .toggle_slider {
  background-color: #12cd4c;
}

input:focus + .toggle_slider {
  box-shadow: 0 0 1px #12cd4c;
}

input:checked + .toggle_slider:before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

/* Rounded sliders */
.toggle_slider.round {
  border-radius: 30px;
}

.toggle_slider.round:before {
  border-radius: 50%;
}




/* ---------------------------------------*/
/* media queries */
/* ---------------------------------------*/

/* Large desktops and laptops */
@media (min-width: 1200px) {
.hide_md{display:none;}

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

.hide_md{display:none;}
.menu_pad_wrap{padding:0px;}
.menu_pad{
	position:relative;width:100%;background:#fff;height:150px;padding:10px 10px;
	-webkit-box-shadow: 0px 10px 31px -10px rgba(0,0,0,0);
	-moz-box-shadow: 0px 10px 31px -10px rgba(0,0,0,0);
	box-shadow: 0px 10px 31px -10px rgba(0,0,0,0);
	transition: all 0.3s;
}
.menu_pad_s{background:#3a0322;}
.menu_pad .imgtd{padding:10px 2px;text-align:center;}
.menu_pad .imgtd img{width:32px;height:32px;}
.menu_pad .txttd{padding:0px 2px;text-align:left;padding-right:20px;padding-left:10px;}
.menu_pad .txttd h3{color:#333;font-size:20px;margin:0px;}
.menu_pad .txttd .h3_s{color:#fff;}
.menu_pad .p_td {color:#a7a7a7;padding:10px 5px 10px 5px;}

/*
.menu_pad_wrap{padding:0px;}
.menu_pad_s{background:#3a0322;}
.menu_pad:hover{transform: scale(1.1);cursor:pointer;}
.menu_pad .imgdiv{position:absolute;top:25;left:15;}
.menu_pad .imgdiv img{width:32px;height:32px;}
.menu_pad .hd, .menu_pad .hd_s{position:absolute;top:7;left:60;}
.menu_pad .hd h3{color:#333;font-size:20px;}		
.menu_pad .hd_s h3{color:#fff;font-size:20px;}			
.menu_pad .txt{position:absolute;top:70;left:15;color:#a7a7a7;font-size:14px;padding-right:10px;}		
.menu_pad .txt_s{position:absolute;top:70;left:15;color:#d9d9d9;font-size:14px;padding-right:10px;}	
*/

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
.hide_sm{display:none;}
.questionpage .questiontxt{font-size:1em;}	
.questionpage .pageimg>img{width:40px;}
.questionpage .pageimg .pageno{position:absolute;top:28;left:15;}


}
/* Iphone x*/
/*
@media only screen 
    and (device-width : 812px) 
    and (device-height : 375px) 
    and (-webkit-device-pixel-ratio : 3) { 
		.logo{max-height:22px;}    	
}
*/

/* Landscape phones and portrait tablets */
@media (max-width: 768px) {
	.hide_sxm{display:none;}

	


/* Portrait phones and smaller */
@media (max-width: 480px) {
	.hide_sx{display:none;}


}
@media only screen and (min-device-width : 375px)  and (max-device-width : 812px)  and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {

}