/*----------------------------------------------
	 Antics DMS Question Form Styles Rev 2.23.22
----------------------------------------------*/


/* -------------------------------------------------------------
	Indicator for which questions are required, and which 
	required questions were not answered,
	or which questions were answered improperly
------------------------------------------------------------- */
span.required {
	display: inline !important;
}
/* Class applied to form inputs when the content is invalid */
.dms_invalid {
	 border-color: #dc3545 !important;
	 padding-right: calc(1.5em + .75rem);
	 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") !important;	 
	 background-repeat: no-repeat !important;	 
	 background-position: center right calc(.375em + .1875rem) !important;
	 background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important; 
}

/* Errors displayed when a form field does not validate */
label.error {
	color: red;
}

/* -------------------------------------------------------------
	Style the individual form input elements
------------------------------------------------------------- */
.form-group {
    margin-left: 0 !important; /* Without this, Bootstrap 3 grid breaks */
    margin-right:0 !important;
}

.form-group input[type=text],
.form-group input[type=password],
.form-group select,
.form-group textarea
 {
	background-image: none;
	background: #fafafa;
	border: 1px solid #e4e3e4;
	height: 2em;
}
.form-group input[type=file]{
}

.form-group select.multiselect {
	height: 7em;
}

.form-group textarea {
	font-size: .9rem;
	width: 100%;
	height: 4em;
	padding: 6px;
	resize: both;
}

.form-group label {
	margin: .25em 0;
}

.form-check {
	margin: 0;
}
.form-check label {
	margin: .2em .25em;
}
.form-group input[type=checkbox], 
.form-group input[type=radio] {
	height: 1em;
}


/* -------------------------------------------------------------
	Confirm your answer and 'if other please specify'
------------------------------------------------------------- */
.form-otherval,
.form-verification {
	margin: .75em 0;
}
.form-otherval input,
.form-verification input {
	height: 2em;
}
.form-otherval label,
.form-verification label {
	margin: 0 0 .25em 0;
}



/* -------------------------------------------------------------
	Support for e-signatures
------------------------------------------------------------- */
#signature {
	background: #fafafa;
	border: 1px solid #e4e3e4;
	max-width: 700px;
}


/* -------------------------------------------------------------
	Placeholder text (default values in open-ended text quesitons
------------------------------------------------------------- */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ddd !important;
  opacity: 1; /* Firefox */
}
::-webkit-input-placeholder { /* Edge */
  color: #ddd !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ddd !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: #ddd !important;
}


/* -------------------------------------------------------------
	Styles for the "additional HTML" and eguide "must have/nice to have"
------------------------------------------------------------- */
.form-additional {
	font-size: .9rem;
	margin: .5em 0;	
}
.questionnicetohave {
	font-size: .9rem;
	margin: .5em 0;
}


/* -------------------------------------------------------------
	The submit and cancel buttons
------------------------------------------------------------- */
.dmsbuttonsubmit, .dmsbuttoncancel {
	color: #fff;
	background-color: #333;
	border: none;
	padding: .5em 2em;
	text-transform: uppercase; 
	-webkit-transition-duration: 0.2s; /* Safari */
	transition-duration: 0.2s;	
}
.dmsbuttonsubmit:hover {
	background-color: #4CAF50; /* Green */
	color: white;
}
.dmsbuttoncancel:hover {
	background-color: #F00; /* Red */
	color: white;
}


/* -------------------------------------------------------------
	Add Fontawsome Icons to appropriate input field such as date pickers
------------------------------------------------------------- */
.inputWithIcon input[type="text"] {
  padding-left: 40px;
}
.inputWith2Icons input[type="text"] {
  padding-left: 50px;
}
.inputWithIcon, .inputWith2Icons {
  position: relative;
}
.inputWithIcon i, .inputWith2Icons i {
  position: absolute;
  left: 0;
  top: .5em;
  padding: 0 8px;
  color: #aaa;
  transition: 0.3s;
}
.inputWith2Icons i:nth-child(2) {
  left: 16px;
}


/* -------------------------------------------------------------
	Fontawsome Icons for star ratings questions
	Rev 11.5.20
------------------------------------------------------------- */

/* Style the stars themselves */
.starinnercontainer span.fa-star {
  font-size: 1.2em;
}
.starinnercontainer span.fa-star:hover {
	cursor: pointer;
}
.starinnercontainer span.fa-star.checked {
  color: orange;
}


/* Then style the containers around them */
.starradios  {
	display: none; /* Hide the corresponding radio buttons */
}
.staroutercontainer {
	position: relative;
	margin-bottom: 3em;
}
.starerrorcontainer {
	z-index: 1;
	position: absolute;
	margin: .25em 0 0 .25em;
	height: 0px;
	width: 0px;
	overflow: hidden;
}
.starerrorcontainer input {
	height: 1em !important;
	width: .5em !important;
	border: none !important;
	background: transparent !important;
}
.starinnercontainer {
	z-index: 100;
	position: absolute;
}


/* -------------------------------------------------------------
	If we need to randomize the order of questions or answers, hide the original order 
------------------------------------------------------------- */
.randomQuestions .questionlist {
	display: none;
}

.randomRadioAnswers .radiolist,
.randomCheckboxAnswers .checkboxlist {
	display: none;
}


/* -------------------------------------------------------------
	DMS question template to display list of radio buttons as a slider
------------------------------------------------------------- */	
	.slideradios{
 		display: none;  /* Hide the radio buttons from view */
		clear: both;
	}
	
	.slidecontainer {
		margin: .5em 0 3em 0;
	}
	.dmsSlider {
		-webkit-appearance: none;
		width: 100%;
		height: 15px;
		border-radius: 5px;  
		outline: none;
		opacity: 0.7;
		-webkit-transition: .2s;
		transition: opacity .2s;
		background: #d3d3d3;  /* Slider background color */
	}
	
	.dmsSlider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 25px;
		height: 25px;
		border-radius: 50%; 
		cursor: pointer;
		background: #333; /* Slider thumb color */
	}

	.dmsSlider::-moz-range-thumb {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		cursor: pointer;
		background: #333; /* Slider thumb color */
	}
	.sliderFirstLabel {
		float: left;		
	}
	.sliderLastLabel {		
		float: right;
	}