/*remove just before project completed.

all product related css removed - 05/07/2018 
added descriptions to all rules - 05/07/2018

*/


/*modal outline*/
.modaloutline {
	background: rgba(0,0,0,0.5);
	bottom: 0;
	display: none;
	left: 0;
	max-width: 23em;
	min-width: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
	z-index: 100000;
	-moz-box-shadow: 0 0 12px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 12px rgba(0,0,0,.4);
	box-shadow: 0 0 12px rgba(0,0,0,.4);
}


/*modal inner outline*/
.modaloutline .popupinner {
	left: calc(50% - 11.5em);
	max-width: 23em;
	min-width: 23em;
	position: absolute;
	top: calc(50% - 10em);
	-webkit-box-shadow: 0 0 12px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 0 12px rgba(0, 0, 0, .4);
	box-shadow: 0 0 12px rgba(0, 0, 0, .4);
}


/*modal header*/
.popupheader {
	background-color: transparent;
    border-bottom: 1px solid transparent;
	color: #444444;
	margin: 0em;
	overflow: hidden;
	padding: .5em .5em 0 .5em;
	text-align: left;
}


/*modal header icon*/
.popupheader h3[class*="flaticon-"]:before {
	font-size: 1em;
	margin-right: .3em;
}


/*modal header h3*/
.popupheader h3 {
	display: block;
	font-size: 1.17em;
	font-weight: 400;
	margin: 0;
}


/*modal close icon*/
.popupinner span.flaticon.flaticon-close, .popupinner span.flaticon.flaticon-close-circ {
/*	color: #737373 !important;*/
	color: #FFFFFF !important;
	cursor: pointer;
	position: absolute;
	right: .6em;
	font-size: 1.3em;
    top: .4em;
}


/*modal message content*/
.popupinner .popupbody {
	background-color: #FFF;
	display: block;
	overflow-y: auto;
	width: auto;
	max-height: 20em;
}


/*modal paragraph*/
.popupinner .popupbody p {
	font-size: 1.17em;
	margin: 0;
	padding: 1em;
}


/*modal button outline*/
.popupinner .popupbody .actionButtons {
	margin-bottom: 1em;
	text-align: center;
	width: 100%;
}


/*modal buttons*/
.popupinner .actionButtons button {
	border-radius: .2em !important;
	box-shadow: none !important;
	display: inline-block;
	font-weight: 300;
	margin-left: 0;
	margin-right: .5em;
	margin-top: 1.5em;
	padding-bottom: .4em;
	padding-top: .4em;
	-webkit-font-smoothing: subpixel-antialiased;
}


/*modal input*/
.popupinner .popupbody input[type=text] {
	width: 100%;
}

#suggestMessage, #trainingMessage {
	width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
	display: none;
}

#suggestMessage .popupinner, #trainingMessage .popupinner {
	max-width: 30em;
	position: relative;    
    top: 10%;	
	margin: 0 auto;
	background: #fff;
	display: block;		
	padding-bottom: 2px;
	min-width: 240px;
	text-align: center;	
	z-index: 1002;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 0 12px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 0 12px rgba(0, 0, 0, .4);
	box-shadow: 0 0 12px rgba(0, 0, 0, .4);

}

#suggestInputOuter .ui-input-text {
	margin: 0;
    padding: 0;
}

#suggestedValue {
	display: inline-block;
	width: 18em;
	padding: 0;
	min-height: auto;
}

#suggestMessage .suggest-label {
	min-width: 8em;
    width: 8em;
    max-width: 8em;
    float: left;
}

#suggestInputOuter {
	text-align: left;
	margin-top: 1em;
}

#suggestTypeOuter {
	text-align: left;
	margin-top: 0.5em;
}

#suggestMessage .popupheader h3, #trainingMessage .popupheader h3 {
	text-align: left;
    padding-left: 1rem;
}

#suggestMessage .suggest-btn, #trainingMessage .training-btn {
	background-color: #0f2f55;
	color: #FFF;
}

#suggestMessage .suggest-btn:hover, #trainingMessage .training-btn:hover {
	background-color: #962d91;	
	border-color: #962d91;
}

#suggestErrorOuter {
	text-align: left;
	color: #dd0031;
    padding-left: 8rem;
	display: none;
}

#suggestMessage .actionButtons {
	margin-top: 1em;
}

@media only screen and (max-width: 1080px) {
	#suggestMessage .popupinner, #trainingMessage .popupinner {
		max-width: 25em;
	}
	
	#suggestInputOuter .ui-input-text {
		margin-top: 0.8em;
	}
	
	#suggestedValue {    
    	width: 21.4em;		
	}	
	
	#suggestErrorOuter {
		padding: 0;
	}
}

@media only screen and (max-width: 737px) {
	#suggestMessage .popupinner, #trainingMessage .popupinner {
		max-width: 20em;
		top: 5%;
	}
		
	#suggestMessage .popupbody, #trainingMessage .popupbody {
		font-size: 0.8em;
	}
}