— Defaults — Label — Input — Checkbox — Radio — File Input — Buttons — Alert Border — Alerts — Ratings — Tab Panel — Bootstrap DatePicker .description {
	float: left;
	margin-bottom: 40px;
}

.distance {
	padding: 60px 0;
}

.lineheight {
	height: 30px;
}

hr {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	/*border-bottom: 1px solid rgba(255, 255, 255, 0.3);*/
}
/* ============ FORM =========== */
.formLayout {
	background: #fff;
	padding: 20px 20px;
	position: relative;
	width: 94%;
	margin-left: 20px;
	margin-top: 14px;
	border-radius: 6px;
	margin-bottom: 50px;
	/*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.14), 2px 3px 1px -2px rgba(0,0,0,0.2), 2px 1px 5px 5px rgba(0,0,0,0.12)
}

.form-control {
	position: relative;
	/*z-index: 2;*/
	margin: 0;
	width: 100%;
	/*height: 41px;*/
	height: 37px;
	display: block;
	border: none;
	color: #898989;
	padding: 10px 0;
	will-change: background-position;
	transition: all .3s cubic-bezier(.64, .09, .08, 1);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 97%, #d2d2d2 97%);
	background-position: -100%;
	background-size: 100%;
	background-repeat: no-repeat;
	font-size: 12px;
	font-weight: 500;
	-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
	font-family: Montserrat;
	color:black;
}

select:focus {
outline: none;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 97%, blue 97%);
}

/*.form-heading {
	margin-top: -50px;
	text-transform: uppercase;
	color: white;
	font-size: 15px;
	font-weight: bold;
	font-family: Trebuchet MS;
	padding: 15px;
	color: black;
	background: mintcream;
	text-align:center;
	margin-bottom: 40px;
	border-radius: 3px;
	box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}*/

.form-heading {
	text-transform: uppercase;
	font-size: 15px;
	font-weight: bold;
	font-family: Montserrat;
	color: cadetblue;
	text-align: center;
	margin-bottom: 20px;
	/*border-radius: 3px;
	box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);*/
}
/* ============ INPUT =========== */
textarea{
	border: solid 1px #d2d2d2; /*color: #898989;*/color: black;padding: 9px; margin-top: 20px;font-family: Montserrat;
}
input[type=email],
input[type=text],
input[type=datepicker],
input[type=textarea],
input[type=password],
input[type=number] {
	font-family: Montserrat;
	position: relative;
	/*z-index: 2;*/
	/*margin-bottom: 30px;*/
	width: 100%;
	display: block;
	border: none;
	padding: 5px 0;
	border-bottom: solid 1px #d2d2d2;
	will-change: background-position;
	transition: all .3s cubic-bezier(.64, .09, .08, 1);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, blue 96%);
	background-position: -1920px 0;
	background-size: 100%;
	background-repeat: no-repeat;
	/*color: #000;*/
	color: black;
	font-size: 12px;
	font-weight: 500;
	/*text-transform:uppercase;*/
}

	input[type=email].input-active,
	input[type=email]:focus,
	input[type=text].input-active,
	input[type=text]:focus,
	input[type=datepicker].input-active,
	input[type=datepicker]:focus,
	input[type=textarea].input-active,
	input[type=textarea]:focus,
	input[type=password].input-active,
	input[type=password]:focus,
	input[type=number].input-active,
	input[type=number]:focus {
		background-position: 0 0;
		box-shadow: none;
		outline: 0;
	}

		input[type=email].input-active,
		input[type=email]:focus:after,
		input[type=text].input-active,
		input[type=text]:focus:after,
		input[type=datepicker].input-active,
		input[type=datepicker]:focus:after,
		input[type=textarea].input-active,
		input[type=textarea]:focus:after,
		input[type=password].input-active,
		input[type=password]:focus:after,
		input[type=number].input-active,
		input[type=number]:focus:after {
			position: relative;
			/*z-index: 2;*/
			/*margin-bottom: 30px;*/
			width: 100%;
			display: block;
			border: none;
			padding: 10px 0;
			border-bottom: solid 1px #d2d2d2;
			will-change: background-position;
			transition: all .3s cubic-bezier(.64, .09, .08, 1);
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, blue 96%);
			background-position: -1920px 0;
			background-size: 100%;
			background-repeat: no-repeat;
			/*color: #898989;*/
			color: black;
			font-size: 12px;
			font-weight: 500;
			/*text-transform:uppercase;*/
		}

	input[type=email]::-webkit-input-placeholder,
	input[type=text]::-webkit-input-placeholder,
	input[type=datepicker]::-webkit-input-placeholder,
	input[type=textarea]::-webkit-input-placeholder,
	input[type=password]::-webkit-input-placeholder,
	input[type=number]::-webkit-input-placeholder {
		transition: all .2s cubic-bezier(.64, .09, .08, 1);
	}

/*input[type=radio]:after,
input[type=radio]:before {
	content: '';
	position: absolute;
	transition: all .3s cubic-bezier(.64, .09, .08, 1);
}*/

/*input[type=checkbox] {
	position: relative;
	cursor: pointer;
	top: -2px;
	margin-left: -1px;
	margin: 5px 12px 5px 0px;
}

input[type=checkbox] +label:before {
		content: '';
		width: 20px;
		height: 20px;
		border: 1px solid #00cc99;
		border-radius: 3px;
		background: #fff;
		position: relative;
		top: -22px;
		margin-left: -1px;
		display: block; 
	}

input[type=checkbox]+label:after {

		content: '\2713';
		color: #fff;
		background: #00cc99;
		position: relative;
		top: -22px;
		margin-left: -1px;
		left: 0;
		width: 20px;
		height: 20px;
		border: 1px solid #00cc99;
		border-radius: 3px;
		
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		opacity: 0;
		transition: opacity .3s cubic-bezier(.64, .09, .08, 1);
		will-change: opacity;

	}

input[type=checkbox]:checked+label:after {
		opacity: 1;
	}*/

	/*
input[type="checkbox"] {
  visibility: hidden;
}
*/
/* On mouse-over, add a grey background color */
 input[type="checkbox"] + label:before {
  border: 1px solid rgb(84,141,212);
  content: "\00a0";
  display: inline-block;
  font: 16px/1em sans-serif;
  height: 16px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 16px;
}
 input[type="checkbox"]:checked + label:before {
  background: #fff;
  color: rgb(84,141,212);
  content: "\2713";
  text-align: center;
}
 input[type="checkbox"]:checked + label:after {
  font-weight: bold;
}

 input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
}
.container {
	/*display: block;*/
	position: relative;
	padding-left: 28px;
	/*margin-bottom: 12px;*/
	cursor: pointer;
	/*font-size: 12px;*/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	/* Hide the browser's default checkbox */
	.container input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
	}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 15px;
	width: 15px;
	border: 1px solid rgb(84,141,212);
	background-color: #fff;
	font-family: Montserrat;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
	background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
	background-color: rgb(84,141,212);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
	left: 4px;
	top: 1px;
	width: 3px;
	height: 7px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}


.containerradio {
	/*display: block;*/
	position: relative;
	padding-left: 28px;
	/*margin-bottom: 12px;*/
	cursor: pointer;
	font-size: 12px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-family: Montserrat;
	color: #898989;
}

	/* Hide the browser's default radio button */
	.containerradio input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
	}

/* Create a custom radio button */
.checkmarkradio {
	position: absolute;
	top: 0;
	left: 0;
	height: 15px;
	width: 15px;
	background-color: #fff;
	border-radius: 50%;
	border: 1px solid rgb(84,141,212);
	font-family: Montserrat;
	color: #898989;
}

/* On mouse-over, add a grey background color */
.containerradio:hover input ~ .checkmarkradio {
	background-color: #fff;
	border: 1px solid rgb(84,141,212);
}

/* When the radio button is checked, add a blue background */
.containerradio input:checked ~ .checkmarkradio {
	background-color: #fff;
	border: 1px solid rgb(84,141,212);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkradio:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerradio input:checked ~ .checkmarkradio:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.containerradio .checkmarkradio:after {
	top: 1px;
	left: 1px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgb(84,141,212);
}
/*input[type=radio] {
	position: relative;
	top: 2px;
	left: 2px;
	margin: 0 8px;
	cursor: pointer;
}

input[type=radio]:before {
		background-color: #fff;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 1px solid #00cc99;
		display: inline-block;
		top: -5px;
		left: -8px;
		background-image: radial-gradient(circle, #00cc99 60%, #fff 70%);
		background-size: 0;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		will-change: background-size;
		z-index: 2;
	}

input[type=radio]:after {
		width: 20px;
		height: 20px;
		background: #fff;
		border-radius: 50%;
	}

input[type=radio]:checked:before {
		background-size: 14px 14px;
	}*/
/* ============ LABEL =========== */

.label {
	color: #898989;
	font-size: 12px;
	/*font-weight: 300;*/
	transition: all .3s cubic-bezier(.64, .09, .08, 1);
	margin: 30px 0 30px;
	display: inline-block;
	font-family: Montserrat;
}

.labellbl {
	color: #898989;
	font-size: 15px;
	/*font-weight: 300;*/
	transition: all .3s cubic-bezier(.64, .09, .08, 1);
	margin: 20px 0 30px;
	display: inline-block;
	font-family: Montserrat;
}

.floating-label {
	-webkit-transform: translateY(-18px);
	transform: translateY(-18px);
	position: absolute;
	height: 44px;
}

.label-active {
	-webkit-transform: translateY(-38px);
	transform: translateY(-38px);
	font-size: 8px;
	color: #898989;
}

.label-required:before {
	content: '*';
	/*color: #9c27b0;*/
	color: red;
	position: absolute;
	margin-left: -10px;
}

.labelTxt {
	/*color: #898989;*/
	color:black;
	font-size: 14px;
	position: absolute;
	font-family: Montserrat;
    word-wrap: break-word;
}

.labelName {
	color: #898989;
	font-size: 15px;
	font-family: Montserrat;
}
/* ============ BUTTON =========== */

.btn {
	/*display: inline-block;
    padding: 6px 10px 5px 10px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
	margin-left: 10px;*/
}

.btn-Back {
	background-color: gray; /* Green */
	border: none;
	color: white;
	padding: 10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	border-radius: 5px;
	font-family: 'Montserrat';
	width: 98px;
	box-shadow: rgba(156, 39, 176, 0.28) 0px 12px 20px -10px, rgba(0, 0, 0, 0.12) 0px 4px 20px 0px, rgba(156, 39, 176, 0.2) 0px 7px 8px -5px;
	transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	cursor:pointer;
	text-shadow:-1px -1px rgba(0,0,0,0.5), 1px 1px rgba(255,255,255,0.5);
}
.btn-Back:focus {outline:0;
				 background-color: gray; /* Green */
		border: none;
		color: black;
		padding: 12px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		border-radius: 5px;
		font-family: 'Montserrat';
		width: 100px;
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
}

	.btn-Back:hover {
		background-color: gray; /* Green */
		border: none;
		color: black;
		padding: 12px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		border-radius: 5px;
		font-family: 'Montserrat';
		width: 100px;
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
	}


.btn-Success {
	background-color: rgb(0,204,153); /* Aqua Green */
	border: none;
	color: white;
	padding: 10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	border-radius: 5px;
	font-family: 'Montserrat';
	width: 98px;
	box-shadow: rgba(156, 39, 176, 0.28) 0px 12px 20px -10px, rgba(0, 0, 0, 0.12) 0px 4px 20px 0px, rgba(156, 39, 176, 0.2) 0px 7px 8px -5px;
	transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	cursor:pointer;
	text-shadow:-1px -1px rgba(0,0,0,0.5), 1px 1px rgba(255,255,255,0.5);
}
.btn-Success:focus {
	outline:0;
	background-color: rgb(0,204,153); /* Green */
	border: none;
	color: black;
	padding: 12px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	border-radius: 5px;
	font-family: 'Montserrat';
	width: 100px;
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
}

	.btn-Success:hover {
		background-color: rgb(0,204,153); /* Green */
		border: none;
		color: black;
		padding: 12px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		border-radius: 5px;
		font-family: 'Montserrat';
		width: 100px;
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
	}

.btn-Skip {
	background-color: steelblue; /* steelblue */
	border: none;
	color: white;
	padding: 10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	border-radius: 5px;
	font-family: 'Montserrat';
	width: 98px;
	box-shadow: rgba(156, 39, 176, 0.28) 0px 12px 20px -10px, rgba(0, 0, 0, 0.12) 0px 4px 20px 0px, rgba(156, 39, 176, 0.2) 0px 7px 8px -5px;
	transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	cursor:pointer;
	text-shadow:-1px -1px rgba(0,0,0,0.5), 1px 1px rgba(255,255,255,0.5);
}
.btn-Skip:focus {
	outline:0;
	background-color: steelblue; /* steelblue */
	border: none;
	color: black;
	padding: 12px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	border-radius: 5px;
	font-family: 'Montserrat';
	width: 100px;
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
}

	.btn-Skip:hover {
		background-color: steelblue; /* steelblue */
		border: none;
		color: black;
		padding: 12px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		border-radius: 5px;
		font-family: 'Montserrat';
		width: 100px;
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
	}

.btn-Reject {
	background-color: rgb(255,192,0); /* Orange */
	border: none;
	color: white;
	padding: 10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	border-radius: 5px;
	font-family: 'Montserrat';
	width: 98px;
	box-shadow: rgba(156, 39, 176, 0.28) 0px 12px 20px -10px, rgba(0, 0, 0, 0.12) 0px 4px 20px 0px, rgba(156, 39, 176, 0.2) 0px 7px 8px -5px;
	transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	cursor:pointer;
	text-shadow:-1px -1px rgba(0,0,0,0.5), 1px 1px rgba(255,255,255,0.5);
}
	.btn-Reject:focus {outline:0;
					   background-color: rgb(255,192,0); /* Green */
		border: none;
		color: black;
		padding: 12px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		border-radius: 5px;
		font-family: 'Montserrat';
		width: 100px;
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
	}
	.btn-Reject:hover {
		background-color: rgb(255,192,0); /* Green */
		border: none;
		color: black;
		padding: 12px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		border-radius: 5px;
		font-family: 'Montserrat';
		width: 100px;
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
	}

.btn-info {
	background-color: rgb(84,141,212); /* Blue */
	border: none;
	color: white;
	padding: 10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	border-radius: 5px;
	font-family: 'Montserrat';
	width: 98px;
	box-shadow: rgba(156, 39, 176, 0.28) 0px 12px 20px -10px, rgba(0, 0, 0, 0.12) 0px 4px 20px 0px, rgba(156, 39, 176, 0.2) 0px 7px 8px -5px;
	transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	cursor:pointer;
	text-shadow:-1px -1px rgba(0,0,0,0.5), 1px 1px rgba(255,255,255,0.5);
}
	.btn-info:focus {outline:0;
					 background-color: rgb(84,141,212); /* Blue */
		border: none;
		color: black;
		padding: 12px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		border-radius: 5px;
		font-family: 'Montserrat';
		width: 100px;
		
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
	}
	.btn-info:hover {
		background-color: rgb(84,141,212); /* Blue */
		border: none;
		color: black;
		padding: 12px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		border-radius: 5px;
		font-family: 'Montserrat';
		width: 100px;
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
	}


    .btn-delete {
	background-color: indianred; /* Red rgb(206, 64, 61)*/ 
	border: none;
	color: white;
	padding: 10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	border-radius: 5px;
	font-family: 'Trebuchet MS';
	width: 98px;
	box-shadow: rgba(156, 39, 176, 0.28) 0px 12px 20px -10px, rgba(0, 0, 0, 0.12) 0px 4px 20px 0px, rgba(156, 39, 176, 0.2) 0px 7px 8px -5px;
	transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	padding: 2px; font-size: 13px; width: 20px; border-radius: 10px; margin: 2px;
	cursor:pointer;
}
	.btn-delete:focus {outline:0;}
	.btn-delete:hover {
		background-color: indianred; /* Red */
		border: none;
		color: black;
		padding: 12px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		border-radius: 5px;
		font-family: 'Trebuchet MS';
		width: 100px;
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
		transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
		padding: 2px; font-size: 13px; width: 20px; border-radius: 10px; margin: 2px;
		cursor:pointer;
	}

.btn-close {
	background-color: indianred; /* Red rgb(206, 64, 61)*/ 
	border: none;
	color: white;
	padding: 10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	border-radius: 5px;
	font-family: 'Trebuchet MS';
	width: 98px;
	box-shadow: rgba(156, 39, 176, 0.28) 0px 12px 20px -10px, rgba(0, 0, 0, 0.12) 0px 4px 20px 0px, rgba(156, 39, 176, 0.2) 0px 7px 8px -5px;
	transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	padding: 2px; font-size: 13px; width: 20px; border-radius: 10px; margin: 2px;
	cursor:pointer;
	position: absolute;
    margin-top: -6px;
}
	.btn-close:focus {outline:0;}
	.btn-close:hover {
		background-color: indianred; /* Red */
		border: none;
		color: black;
		padding: 12px 5px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		border-radius: 5px;
		font-family: 'Trebuchet MS';
		width: 100px;
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
		transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
		padding: 2px; font-size: 13px; width: 20px; border-radius: 10px; margin: 2px;
		cursor:pointer;
			position: absolute;
		margin-top: -6px;
	}
/* ============ GRIDVIEW =========== */

.clsGridHeaderGreenTitle {
	font-family: Montserrat,Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	height: 20px;
	background-color: #00e0a8; /*background-color: #2D71A8; #6b82ab*/
	text-decoration: none;
}

.clsGridGreenItem {
	padding-right: 5px;
	padding-left: 5px;
	font-family: Montserrat,Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #333333;
	height: 22px;
	background-color: #FFFFFF;
	text-decoration: none;
}

.clsGridGreenAlternateItem {
	padding-right: 5px;
	padding-left: 5px;
	font-family: Montserrat,Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #333333;
	height: 22px;
	background-color: #f6fff6;
	text-decoration: none;
}

.clsGridPadding {
	padding-right: 5px;
	padding-left: 5px;
	border: 1px solid lightgrey;
}

.clsGridBorder {
	border-left: #CCCCCC 1px solid;
	border-top: #CCCCCC 1px solid;
	border-right: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	margin-bottom: 5px;
}

.clsError {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FF0000;
	border:1px solid lightgrey;
}
.clsTemplete{
            border:1px solid lightgrey;
}
/* ============ Menu =========== */
.menuContainer {
	/*width: 99%;*/
	/*margin: 0 auto;*/
	padding: 20px 0;
	z-index:9999;
	/*margin-top: 50px;*/
	display: inline-table;
    /*margin-left: 20px;*/
}

.nav {
	font-family: Montserrat,'Orienta', sans-serif;
	/*font-weight: 400;*/ /* 400 thinner */
	font-size: 13px;
	line-height: 13px;
	position: relative;
	padding: 0 0 0 4px; /* Fix for inline-block spacing*/
	margin: 0;
	/*<!--
	background-color: #1abc9c; -->*/
}


	.nav a, .nav a:link, .nav a:visited, .nav a:hover, .nav a:focus {
		color: #16a085;
		text-decoration: none;
	}


	.nav > li {
		display: inline-block;
		text-align: center;
		margin-left: -4px; /* For the inline-block spacing */
		background: #f6f6f6;
        margin-right: 5px;
		height:35px;
	}



		.nav > li > a {
			padding: 10px 5px;
			display: block;
		}

		.nav > li:hover > a {
			color: #fff;
		}

		.nav > li.dropdown:hover > a > span {
			color: #fff;
		}

		.nav > li:hover {
			background-color: #16a085;
			box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12);
		}



		.nav > li > ul {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			list-style: none;
			top: 53px;
			background-color: #16a085;
			width: 200px;
			text-align: left;
			margin-top: 30px;
			padding: 0px;
			z-index: 99;
		}


		.nav > li:hover > ul {
			opacity: 1;
			visibility: visible;
			margin-top: 0px;
		}


	.nav li > ul li {
		font-size: 11px;
		position: relative;
		display: block;
		padding: 15px 10px;
	}

	.nav > li > ul li:hover {
		background-color: #006191;
	}

	.nav ul li:hover > a {
		color: gold;
	}

	.nav > li > ul li ul li:hover {
		background-color: #004b6f;
	}

input#mobile_menu {
	display: none;
}

.nav > li > ul li ul li ul {
	background-color: #004b6f;
}

	.nav > li > ul li ul li ul li:hover {
		background-color: #00344d;
	}



.nav > li > .fulldrop {
	line-height: 8px;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	list-style: none;
	top: 34px;
	left: 0.5px;
	background-color: white;
	width: 100%;
	min-height: 100px;
	text-align: left;
	margin-top: 30px;
	padding: 0;
	z-index: 99;
	overflow: hidden;
	background: mintcream;
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12);
}


.nav > li:hover .fulldrop {
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}

.nav ul li:hover:after {
	color: white;
}

.nav > li:hover .coldrop {
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}

.nav .coldrop .column {
	width: 130px;
	margin: 0 9px;
}



.nav .column {
	width: auto;
	display: inline-table;
	color: #16a085;
	margin: 0 0 0 2.2%;
}


	.nav .column ul {
		padding: 0;
		margin: 0;
	}

		.nav .column ul li {
			padding: 0;
			list-style: none;
			font-size: 11px;
		}

	.nav .column h3 {
		font-size: 14px;
		padding: 14px 0;
		font-weight: bold;
		margin: 5px 0 5px 0;
	}

	.nav .column ul li a {
		display: block;
		padding: 0 0 15px 0;
	}

/* Arrows */
.nav > li.dropdown > a > span {
	color: #16a085;
	text-decoration: none;
}



.nav > li.dropdown > a:after {
	/*content: "\25BC";*/
	font-family: Montserrat;
	color: #fff;
}

.nav ul li.dropdown:after {
	position: absolute;
	left: 170px;
	font-family: Montserrat;
	display: inline-block;
	color: #fff;
	margin-left: 10px;
	margin-top: 2px;
}


.nav > li.search {
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	float: right;
	padding: 11px 6px;
	position: relative;
}

	.nav > li.search:hover {
		background-color: transparent;
	}


.nav > li input {
	padding: 7px 6px 6px 38px;
	margin: 0 5px;
	color: #fff;
	border: none;
	background-color: #16a085;
	font-size: 14px;
	border: 2px solid #16a085;
}

	.nav > li input:focus {
		outline: none;
		border-color: white;
	}

.nav > li.search i {
	position: absolute;
	left: 20px;
	top: 20px;
	color: #fff;
	font-size: 17px;
}

.nav .column ul li a:hover {
	color: gold;
}

.expand:before {
	content: '+';
	padding: 4px;
	background-color: #00cc99;
	border-radius: 50%;
	display: inline-block;
	color: #fff;
	text-align:center;
}

.minus:before {
	content: ' - ';
	padding: 4px;
	background-color: #00cc99;
	border-radius: 50%;
	display: inline-block;
	color: #fff;
	font-size:15px;
	text-align:center;
}

span.clear { clear: left; display: block; }
/*.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}*/

/* ============ Searcher =========== */


 .SearchBox {
        width: 330px;
        height: 34px;
		margin-top:3px;
        padding: 10px 5px;
        float:left;   
        font-size:  15px;
		font-family:Montserrat;
        border: 0;
		color:898989;
        background: #eee;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;      
    }
    
    .SearchBox:focus {
        outline: 0;
        background: #fff;
        -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    }
    
    .SearchBox::-webkit-input-placeholder {
       color: #999;
       font-weight: normal;
       font-style: italic;
    }
    
    .SearchBox:-moz-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
    }
    
    .SearchBox:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
    }    
    
    .SearchBoxBtn {
		overflow: visible;
        position: relative;
        border: 0;
        padding: 0;
        cursor: pointer;
        height: 34.2px;
		margin-top: 3px;
        width: 110px;
        font: bold 18px 'lucida sans', 'trebuchet MS', 'Tahoma';
        color: #fff;
        text-transform: uppercase;
        background: #d83c3c;
        -moz-border-radius: 0 3px 3px 0;
        -webkit-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;      
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    }   
      
    .SearchBoxBtn:hover{		
        background: #e54040;
    }	
      
    .SearchBoxBtn:active,
    .SearchBoxBtn:focus{   
        background: #c42f2f;    
    }
    
    .SearchBoxBtn:before {
        content: '';
        position: absolute;
        border-width: 8px 8px 8px 0;
        border-style: solid solid solid none;
        border-color: transparent #d83c3c transparent;
        top: 9px;
        left: -6px;
    }
    
    .SearchBoxBtn:hover:before{
        border-right-color: #e54040;
    }
    
    .SearchBoxBtn:focus:before{
        border-right-color: #c42f2f;
    }    
    
    .SearchBoxBtn::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

.searchcontainer{
	width: 50%;
    background: #fff;
    padding: 20px 20px;
    position: absolute;
    top: 40px;
    left: 320px;
    z-index: 9999;
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.searchcontainerMask{
	background-color: rgb(0,0,0) ;
	background: transparent\9;
    background:rgba(0,0,0,0.7);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
}
	

	/* ============ Upload File =========== */
	.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 15px;
    /* 20px */
    /*font-weight: 700;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
	font-family: Montserrat;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}
.inputfile-3 + label {
    color: #898989;
}

.inputfile-3:focus + label,
.inputfile-3.has-focus + label,
.inputfile-3 + label:hover {
    color: #722040;
}

/*new*/
.input-file-container {
  position: relative;
  /*width: 225px;*/
} 
.js .input-file-trigger {
  /*display: block;*/
  padding: 10px 15px;
  background: grey;
  color: #fff;
  font-size: 18px;
  transition: all .4s;
  cursor: pointer;
  width:125px;
  border-radius:5px;
      font-family: 'Montserrat';
    text-shadow: -1px -1px rgba(0,0,0,0.5), 1px 1px rgba(255,255,255,0.5);
}
.js .input-file {
  position: absolute;
  top: 0; left: 0;
  width: 225px;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
}
.js .input-file:hover + .input-file-trigger,
.js .input-file:focus + .input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
  background: #34495E;
  color: #39D2B4;
}
	/* ============ TootTip =========== */
.tooltip {
    position: relative;
    display: inline-block;
	width: 100%;
    /*border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext {
       visibility: hidden;
    width: 120px;
    /* background-color: grey; */
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 86%;
    right: -151.5%;
    font-size: 10px;
    /* margin-left: -60px; */
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}


	/* ============ FavouriteBtn =========== */
	.FavBtn{float:right;color:white;font-size:35px;cursor: pointer;}
	.FavBtn:hover{float:right;color:gold;font-size:35px;cursor: pointer;}
	.FavContainer{
		background: white;
    border: 1px solid lightgray;
    z-index: 1;
    position: absolute;
    width: 23%;
    top: 78px;
    right: 97px;
    /* height: 300px; */
    border-radius: 0px 0px 5px 5px;
    overflow: overlay;
	} 
	.FavAddBtn{
    padding: 6px;
    float: right;
    margin-right: 15px;
    color: black;
    border-radius: 5px;
    background-color: #fafafa;
    border: 1px solid lightgray;
    }
	.FavAddBtn:active{
   padding: 6px;
    float: right;
    margin-right: 15px;
    color: black;
    border-radius: 5px;
    background-color: #fafafa;
    border: 1px solid lightgray;
	 outline: none
    }
	.FavAddBtn:focus{
    padding: 6px;
    float: right;
    margin-right: 15px;
    color: black;
    border-radius: 5px;
    background-color: #fafafa;
    border: 1px solid lightgray;
	 outline: none
    }
	.FavAddBtn:hover{
    padding: 6px;
    float: right;
    margin-right: 15px;
    color: black;
    border-radius: 5px;
    background-color: gainsboro;
    border: 1px solid gainsboro;
    }
	
	.FavTab{
		background: #fafafa;
    margin-left: 10px;
    margin-right: 10px;
    border-right: 1px solid lightgray;
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
    height: 30px;
    /* border-bottom: 1px solid #fafafa; */
    width: 133px;
    text-align: center;
	}
	.FavSubMenu{
		background-color: #fafafa;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    /*border-top: 1px solid lightgray;*/
	}
	.FavTopBorder{
		border-bottom: 1px solid lightgray;
    position: relative;
    /*right: 10px;*/
    left: 133px;
    width: 156px;
    /* width: 50%; */
    background-color: #fafafa;
	}

	.FavSubMenuDiv{
			font-size:15px;
			 margin-left: 5px;
    margin-right: 5px;
	padding: 3px;
	}
	.FavSubMenuDiv:hover{
	background-color: darkgray;
    color: white;
    margin-left: 5px;
    margin-right: 5px;
	font-size:15px;
	}
		/* ============ Validate&Disabled =========== */
	[disabled] { cursor: not-allowed; }



/*============ALert Dailog box ======================*/
    .jconfirm {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 99999999;
            font-family: inherit;
            font-family: Montserrat;
            overflow: hidden;
            background: rgb(0, 0, 0);
            background: rgba(0, 0, 0, 0.6);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
        }


        .jcontainer {
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 500px;
            height: 100px;
            /* background-color: #ccc; */
            border-radius: 3px;
        }

        .jconfirm .jconfirm-box.jconfirm-type-orange {
            border-top: solid 7px #f1c40f;
            -webkit-animation-name: type-orange;
            animation-name: type-orange;
        }
        .jconfirm .jconfirm-box.jconfirm-type-green {
            border-top: solid 7px rgb(0,204,153);
            -webkit-animation-name: type-orange;
            animation-name: type-orange;
        }
         .jconfirm .jconfirm-box.jconfirm-type-blue {
            border-top: solid 7px blue;
            -webkit-animation-name: type-orange;
            animation-name: type-orange;
        }
        .jconfirm .jconfirm-box.jconfirm-type-crimson {
            border-top: solid 7px crimson;
            -webkit-animation-name: type-orange;
            animation-name: type-orange;
        }
        .jconfirm .jconfirm-box {
            opacity: 1;
            -webkit-transition-property: all;
            transition-property: all;
        }

        .jconfirm .jconfirm-box {
            background: white;
            border-radius: 4px;
            position: relative;
            outline: none;
            padding: 15px 15px 0;
            overflow: hidden;
            margin-left: auto;
            margin-right: auto;
        }

            .jconfirm .jconfirm-box div.jconfirm-title-c {
                display: block;
                font-size: 22px;
                line-height: 20px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                cursor: default;
                padding-bottom: 15px;
            }

                .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    font-size: inherit;
                    font-family: inherit;
                    display: inline-block;
                    vertical-align: middle;
                }

            .jconfirm .jconfirm-box div.jconfirm-content-pane {
                margin-bottom: 15px;
                height: auto;
                -webkit-transition: height 0.4s ease-in;
                transition: height 0.4s ease-in;
                display: inline-block;
                width: 100%;
                position: relative;
                overflow-x: hidden;
                overflow-y: auto;
            }

        .jConfirmBtn {
            background: #ddd;
            margin-bottom: 10px;
            float: right;
            border-radius: 5px;
            border: none;
            padding: 6px;
            width: 60px;
            cursor: pointer;
            text-decoration:underline;
        }

		.labelTxt2 {
	/*color: #898989;*/
	color:#898989;
	font-size: 12px;
	position: inherit;
	font-family: Montserrat;
}

		.accordion_head:before{
			content:"|";
			color:white;
		}