@charset "utf-8";

body{
	background-color: #fff;
}
.form-control {
	background-color: #fff;
	color: #222;
	border: 1px solid #ccc;
}
input[type="text"], input[type="password"] {
	background-color: #fff !important;
	color: #222 !important;
	border: 1px solid #ccc;
}

.red-color{ color: #ff3300;}

/* common.css hide .bs-searchbox, so we over-write style here */
.bs-searchbox {
	display: inherit;
}

.radius-8 {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
}

/*For jquery-ui sortable placeholder style*/
.sortable-placeholder {
	border: 1px dashed #00b987;
	background-color: #f7faf9;
	margin: 5px 0;
	height: 100px;
	min-height: 100px;
	border-radius: 8px;
}

.box-shadow-green-light{
	border: #ececec solid 1px;
	-webkit-box-shadow: 0px 0px 4px #ececec;
	-moz-box-shadow: 0px 0px 4px #ececec;
	box-shadow: 0px 0px 4px #ececec;
}

.box-shadow-green-heavy{
	border: #ececec solid 1px;
	-webkit-box-shadow: 0px 0px 4px #00b987;
	-moz-box-shadow: 0px 0px 4px #00b987;
	box-shadow: 0px 0px 4px #00b987;
}

/* bootstrap select option, nowrap -> normal */
.dropdown-menu>li>a{ white-space: normal; line-height: 28px; padding: 0 20px;}
.dropdown-menu>li>a:hover{ color: #434343; background-color: transparent;}
.bootstrap-select.btn-group .dropdown-menu li a.opt{padding-left: 20px;}
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
	color: inherit;
	text-decoration: none;
	background-color: transparent;
	outline: 0;
}

.bootstrap-select .dropdown-menu .divider {display: none;}
.dropdown-header {
	display: block;
	padding: 3px 20px;
	font-size: 14px;
	line-height: 28px;
	color: #434343;
	white-space: nowrap;
	background-color: #fff;
	font-family: graphik2, Helvetica, Arial, sans-serif !important;
}


.ticket-question-main{ width: 100%; max-width: 508px; margin: 0 auto; margin-bottom: 100px;}

.ticket-question-main .question-builder-content{ padding: 15px 15px; margin-bottom: 30px;}
.ticket-question-main .question-builder-content .ele-edit-panel{ position: relative;}
.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-box{ border: #fff solid 1px; padding: 5px 10px; background-color: #fff;}
.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-box>[class*="col-xs-"]{padding-left: 5px; padding-right: 5px; margin-top: 5px; margin-bottom: 5px;}
.ticket-question-main .btn-default{ font-size: 12px; color: #999;}
.ticket-question-main .btn-default .glyphicon{ font-size: 28px;}
.ticket-question-main .ele-edit-panel .ele-render-box input[type="radio"] + button.btn-default span.btn-label{
	overflow-wrap:break-word; white-space: pre-line; word-wrap: break-word;
	display: flex;   align-items: center;   justify-content: center; height: 32px; overflow: hidden;
	font-family: "graphik", Helvetica, Arial, sans-serif !important;
}
/*Auto adjust the height of textarea*/
.ticket-question-main textarea{ resize: none; line-height: 24px; overflow: hidden;}
.ticket-question-main .ele-textarea-box{ position: relative;}
.ticket-question-main .ele-textarea-box p#count_letter{ font-size: 12px; line-height: 20px; position: absolute; bottom: -30px; right:5px; color: #999;}

.ticket-question-main input[type=text]:focus,
.ticket-question-main input[type=email]:focus,
.ticket-question-main input[type=password]:focus,
.ticket-question-main textarea:focus{
	border: 1px solid #00b987 !important;
	-webkit-box-shadow: 0px 0px 4px #c5eae0 !important;
	-moz-box-shadow: 0px 0px 4px #c5eae0 !important;
	box-shadow: 0px 0px 4px #c5eae0 !important;
}
.ticket-question-main input[type=text].error,
.ticket-question-main input[type=email].error,
.ticket-question-main input[type=password].error,
.ticket-question-main textarea.error{
	border: 1px solid #ff6600 !important;
	-webkit-box-shadow: 0px 0px 4px #e18787 !important;
	-moz-box-shadow: 0px 0px 4px #e18787 !important;
	box-shadow: 0px 0px 4px #e18787 !important;
}

label.error{ color: #ff6600;}

.ticket-question-main .btn-default:hover,
.ticket-question-main .btn-default:active,
.ticket-question-main .btn-default:focus,
.ticket-question-main .btn-default.focus,
.ticket-question-main .ele-edit-panel .ele-render-box input[type="radio"]:checked + button{
	border: #00b987 solid 1px; background-color: #dff0d8; color: #006937;
	-webkit-box-shadow: 0px 0px 4px #c5eae0;
	-moz-box-shadow: 0px 0px 4px #c5eae0;
	box-shadow: 0px 0px 4px #c5eae0;
}
.ticket-question-main .btn-lg,
.ticket-question-main .btn-group-lg>.btn {
	padding: 6px 12px;
}

.ticket-question-main .ele-btn-form-submit button{  font-size: 14px; line-height: 28px;}


.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-box:hover,
.ticket-question-main .question-builder-content .ele-edit-panel.focus .ele-render-box{ border: #fff solid 1px;}

.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-box .ele-item-label h3{ font-size: 16px; font-weight: 500; margin-top: 8px;}
.ticket-question-main .question-builder-content .ele-edit-panel:first-child .ele-render-box .ele-item-label h3{text-align: center;}
.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-box .ele-item-label h3 .glyphicon-info-sign{ font-size: 16px; line-height: 1.2em; color: #888; cursor: pointer;}
.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-box .ele-item-label p{ color: #444; text-align: justify;}
.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-box .ele-item-label p.ele-item-sub-label{ color: #999;}
.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-box .um-upload-file-button input[type='file']{ display: none;}

.ticket-question-main .question-builder-content .ele-edit-panel .ele-question-code{ width: 120px; height: auto; position: absolute; left: -120px; padding-top: 20px; z-index: 10;}
.ticket-question-main .question-builder-content .ele-edit-panel .ele-question-code:after{ content: ""; width: 100%; height: 1px; display: block; position: absolute; top:30px; left: 0; z-index: -1; background-color: #00b987;}
.ticket-question-main .question-builder-content .ele-edit-panel .ele-question-code .badge{ color: #666; background-color: #00b987;}
.ticket-question-main .question-builder-content .ele-edit-panel .ele-question-code .light-bg{ background-color: #efefef; color: #0B8E8B;}
.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-edit-ui{ width: 508px; height: auto; position: absolute; top:0; left: 518px; }

.ele-render-edit-ui .ele-edit-btn-group{ border-bottom: #efefef solid 1px; padding-bottom: 10px;}


.ticket-question-main .ele-add-question-btn-group{border: #fff solid 1px; padding: 15px 15px; margin-bottom: 200px;}
.ticket-question-main .ele-add-question-btn-group>[class*="col-xs-"]{padding-left: 5px; padding-right: 5px; margin-top: 5px; margin-bottom: 5px;}

.ele-top-bar{ background-color: #006937;}
.ele-top-bar .navbar-header{ width: 100%;}
.ele-top-bar .navbar-header .navbar-brand{padding-left: 30px; padding-top: 12px;}
.ele-top-bar .navbar-header p.form-header-title{ display: inline-block; color: #fff; font-size: 22px; font-family: "graphik2", "courier new", "Arial"; margin-top: 10px; float: right; padding-right: 15px;}

.form-control {
	background-color: #fff;
	color: #222 !important;
	border: 1px solid #ccc;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
	width: 100%;
}

@media (max-width: 507px) {
	.ticket-question-main .question-builder-content{ padding: 15px 0;}
	.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-box{ padding: 5px 3px;}
	.ticket-question-main .question-builder-content .ele-edit-panel .ele-render-box>[class*="col-xs-"]{padding-left: 3px; padding-right: 3px;}
	.ticket-question-main .btn-lg,
	.ticket-question-main .btn-group-lg>.btn {
		padding: 6px 2px;
	}
}