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

/* -------------------------------------------------------------
	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-top and -bottom control spacing between questions.
        This is important especially in bootstrap 5 because 5
        removes the definition of the form-group style (they want 
        you to use the standard grid styles), so we need
        to style it here.
    	 */
    margin: 1.5em 0;
}

.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-input {
  margin-top: .5em;
}
.form-check label {
	margin: .25em .25em;
}
.form-single-check-label {
    margin: .25em .5em;
}
.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;
}


/* -------------------------------------------------------------
	Question groups
------------------------------------------------------------- */
.question-group.ranking-group {
	border: 1px solid #ccc;
	padding: .5em;
	margin: 1em 0;
}


/* -------------------------------------------------------------
	The submit and cancel buttons
------------------------------------------------------------- */
.dmsbuttonbasic, .dmsbuttonsubmit {
    display: inline-block;
    color: #fff;
    background-color: #333;
    background-color: #dd7733; /* less=bright orange */
    border: none;
    margin: 1em 0 !important;
    padding: .5em 1em;
    border-radius: 4px;
    text-transform: uppercase;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    white-space: nowrap;
}
.dmsbuttoncancel {
    display: inline-block;
    color: #fff;
    background-color: #333;
    border: none;
    margin: 1em 0 !important;
    padding: .5em 1em;
    border-radius: 4px;
    text-transform: uppercase;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    white-space: nowrap;
}
.dmsbuttonbasic:hover, .dmsbuttonsubmit:hover {
	background-color: #FF7617; /* Brighter orange */
	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;
}
.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;
}