.animated-form .required::before {
  content: '*';
  color: #000000;
  position: absolute;
  font-size: 22px;
  left: -12px;
}

.animated-form .form-group {
  margin-top: 30px;
  position: relative;
}

.animated-form .form-group > label {
  color: #C4C4C4;
  font-size: 14px;
  font-weight: 400;
  left: 13px;
  position: absolute;
  top: 7px;
  /* Animate */
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.animated-form .form-group > .animated {
  color: #5C5C5C;
  font-size: 12px;
  left: 10px;
  top: -18px;
  /* Animate */
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.animated-form .form-group > span {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 0%;
  height: 2px;
  background: #72a4cb;
  transition: all 0.6s;
}

.form-group-inanimated {
  margin-top: 30px;
  margin-bottom: 15px;
  position: relative;
}
.form-group-inanimated > label {
  position: absolute;
  top: -18px;
  padding-left: 8px;
}
.form-group-inanimated.label-normal > label {
  position: static;
  padding-left: 8px;
}

.animated-form .form-group > .active {
  width: calc(100% - 8px);
}

/* Error States */
.animated-form .error::before {
  color: #FF0000;
}

.animated-form .error > label {
  color: #FF0000 !important;
}

.animated-form .error > span {
  background-color: #FF0000;
}

.animated-form .form-group > .dateOnlyInput {
  position: relative;
  left: 0px;
  background: none;
}

.animated-form .form-group > .noSpanStyle {
  position: relative !important;
}

.animated-input-group.activeSpan {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 95.5%;
  margin-left: 1.8%;
  height: 2px;
  background: #72a4cb;
  transition: all 0.6s;
}

.non-animated-input-group {
  margin-top: 30px;
  margin-bottom: 15px;
  position: relative;
}
.non-animated-input-group label {
  color: #5C5C5C;
  font-size: 12px;
  left: 10px;
  position: absolute;
  top: -18px;
}

.requiredElement::before {
  content: '*';
  color: #000000;
  font-weight: bold;
  position: absolute;
  font-size: 22px;
  left: -12px;
}

.errorElement {
  color: red !important;
}

.errorElement::before {
  color: red !important;
}

.errorElement > label {
  color: red !important;
}

.errorElement .activeSpan {
  background: red !important;
}

.animated-input-group {
  margin-top: 30px;
  margin-bottom: 15px;
  position: relative;
}

.animated-input-group .OutputLabel {	
	font-family: "Open Sans";
	font-size: 14px;
	font-weight: bold;	
	line-height: 19px;
	color: #333333;
}

.animated-input-group .LmsNewAppLabel, .LmsStepStyle {	
	font-family: "Open Sans";
	font-size: 18px;
	font-weight: 400;	
	line-height: 19px;
	color: #336699;
}

.animated-input-group .InputLabel {
  font-family: "Open Sans";
  font-size: 16px;
  line-height: 22px;
  color: #777777; 
  /* color: #C4C4C4;
  font-size: 14px;*/
  font-weight: bold; 
  /*left: 13px;*/
  position: absolute;
  top: 7px;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  margin-left: 10px;
}

.animated-input-group .bottomShade {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 0%;
  height: 2px;
  background: #336699;
  transition: all 0.6s;
}

.animated-input-group span.activeSpan {
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 98%;
  margin-left: 1.0%;
  height: 1px;
  background: #336699;
  transition: all 0.6s;
}

.animated-input-group .InputLabel_In {
  font-family: "Open Sans";
  font-size: 14px;
  line-height: 19px;
  color: #333333; 
  /*color: #5C5C5C;
  font-size: 12px;*/
  font-weight: bold;
  /* left: 10px;*/
  top: -18px;
  /* Animate */
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.spinner {
  background: rgba(0, 0, 0, 0.2);
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  -webkit-transition: opacity 400ms ease-in-out;
  -moz-transition: opacity 400ms ease-in-out;
  transition: opacity 400ms ease-in-out;
}

.spinner .spinner-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url("../DDStyle/_assets/spin7.gif");
  background-size: cover;
  height: 100px;
  width: 100px;
  margin-left: -50px;
  margin-top: -50px;
}

.form-control:focus {
  /*border-color: #CCCCCC;*/
  box-shadow: none;
  border-style: none;
  border-bottom: 2px solid #CECECE;
}

.multi-step-process {
    display: inline-block;
    width: 20%;
    margin-left: -4px;
    vertical-align: top;
}
.new-req-item {
    display: block;
    margin-bottom: 20px;
    border-radius: 10px !important;
    font-weight: 300;
    padding: 8px 20px 8px 20px !important;
}
.app-item {
    display: block;
    margin-bottom: 20px;
    font-weight: 300;
    padding: 8px 20px 8px 20px !important;
}
.esri-popup__pointer-direction {
    background: #336699 !important;
}
.esri-popup__main-container {
    background: #336699 !important;
    border-radius: 15px !important;
    color: #fff !important;
}

.esri-popup__action-text {
    color: #fff !important;
}
 
.esri-popup__icon {
    color: #fff !important;
}

.esri-popup__button {
    color: #fff !important;
}

.esri-popup-renderer__content-element {
    padding: 0 !important;
}

.esri-popup__position-container.esri-popup--shadow.esri-popup--footer-visible.esri-popup--feature-updated.esri-popup--title-visible.esri-popup--content-visible.esri-popup--top-aligned {
    border-radius: 15px !important;
     box-shadow: 0 0px 29px 5px rgba(0, 0, 0, 0.3) !important;
        margin-bottom: 15px !important;
}

.esri-widget table {
    background: #336699 !important;
    color: #fff !important;
}
            
.esri-search-result-renderer .esri-search-result-renderer__more-results-item {
    background-color: #336699 !important;
	color: white !important;
	margin-bottom: 0px !important;
}

.esri-search-result-renderer .esri-search-result-renderer__more-results--show-more-results .esri-search-result-renderer__more-results-list {
	background-color: #336699 !important;
	color: white !important;
	margin-top: 0px !important;
}

.esri-popup-renderer {
    background-color: #336699 !important;
	color: white !important;
}

.esri-popup__content a {
    background-color: #336699 !important;
	color: white !important;
}			

/*.esri-ui-bottom-right,
.esri-ui-bottom-left {
    top: 230px !important;
}

@media(max-width:991px) {
    .esri-ui-bottom-right,
	.esri-ui-bottom-left {
    	top: 330px !important;
	}
}

@media(max-width:769px) {
    .esri-ui-bottom-right,
	.esri-ui-bottom-left {
    	    top: 180px !important;
    		z-index: 0;
	}
}*/


/* .bs-wizard {margin-top: 40px;} */
.bs-wizard {margin-top: 0px;}
/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 10px 0 30px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
/* .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;} */
.bs-wizard > .bs-wizard-step.complete > .bs-wizard-info {color: #336699; font-size: 12px;}
.bs-wizard > .bs-wizard-step.active > .bs-wizard-info {color: #336699; font-size: 12px;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-info {color: #AAAAAA; font-size: 12px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 36px; height: 36px; display: block; background: #336699; top: 24px; left: 50%; margin-top: -15px; margin-left: -18px; border-radius: 50%; text-align:center; padding-top: 8px;} 
/* .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; }  */
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 1px; box-shadow: none; margin: 27px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #336699;}
.bs-wizard > .bs-wizard-step.disabled > .progress > .progress-bar {width:100%; background: #AAAAAA}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%; background: #336699;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:100%; background: #336699;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width: 100%; background: #AAAAAA}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.complete > .bs-wizard-dot { background-color: #FFFFFF; border: 1px solid #336699; color: #336699;}
.bs-wizard > .bs-wizard-step.active > .bs-wizard-dot { background-color: #336699; border: 1px solid #336699; color: #FFFFFF;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot { background-color: #FFFFFF; border: 1px solid #999999; color: #999999;}
/* .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;} */
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }

/* Responsive no-more-tables style */
#no-more-tables thead tr th { background-color: #97c4da; }
@media only screen and (max-width: 800px) {
	/* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr {
		display: block;
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	#no-more-tables tr { border: 1px solid #ccc; }
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
		min-height: 16px;
	}
	#no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
	/* Label the data */
	#no-more-tables td:before { content: attr(data-title); }
	
}