/*@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,700');*/
@import url('https://cdn.lineicons.com/1.0.1/LineIcons.min.css');


body {
margin:0;
padding:0;
/*font-family: 'Nunito Sans', sans-serif;*/
font-size:15px;
color:#333;
letter-spacing:0.6px;
}
footer {
	letter-spacing:0;
}

input, button, select, textarea {
	/*font-family: 'Nunito Sans', sans-serif;*/
}

.center {
	text-align:center;
}

table, td, th {
	text-align:center;
}
/*--------------------------------------------------------------
# Responsive Grid
--------------------------------------------------------------*/
.grid{
max-width:1220px;
margin:0 auto;
}

.grid.flex{
width:100%;
max-width:100%;

}

.row{
display:block;
/*overflow:hidden;*/
clear:both;
}

.row:before,
.row:after {
  content: "";
  display: table;
}

.row:after {
  clear: both;
}

.row {
  zoom: 1; /* ie 6/7 */
}


.{ width:95%; margin:0 auto;}

*[class*="col_"].alpha{margin-left:0;}
*[class*="col_"].omega{margin-right:0;}
 
.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

*[class*="col_"]{
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
margin-top:0.5em;
margin-bottom:0.5em;
float: left;
display: block;
}

.grid img{
max-width: 100%;
height:auto;
}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix, *:first-child+html .clearfix{zoom:1}

/* Viewable Grids 
	To view your grids, add the class .visible to any grid container.
	This will add a background color so you can see the layout of your grids. 
*/
*[class*="col_"].visible{
background:#eee;
border:1px dotted #ccc;
}


/*---------------------------------
	Responsive Grid Media Queries - 1280, 1024, 768, 480
	1280-1024 	- desktop (default grid)
	1024-768 	- tablet landscape
	768-480 	- tablet 
	480-less 	- phone landscape & smaller
-----------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) {
	
	.grid *[class*="col_"]{}
	.grid{max-width: 1024px;}
	.show-desktop	{display:block;}
	.hide-desktop	{display:none;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}

@media all and (min-width: 768px) and (max-width: 1024px) {
	
	.grid *[class*="col_"]{}
	.grid{max-width: 768px;}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}


@media all and (min-width: 480px) and (max-width: 768px) {

	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 480px;}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}

@media all and (max-width: 480px) {
	
	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 100%;/*320*/}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:block;}
	.hide-phone		{display:none;}
	
}




/*--------------------------------------------------------------
# Custom Styles
--------------------------------------------------------------*/

.calculator-container {
	padding:65px 0;
}

#dateType {

    width: 100%;
    border: solid 1px #ccc;
    height: 35px;
    border-radius: 5px;
    padding-left: 10px;

}

.formfieldrow label {
	line-height:35px;
}

#datepicker {
	height: 35px;
border: solid 1px #ccc;
border-radius: 5px;
padding-left: 10px;
min-width: 200px;
background:url(calendar.png) no-repeat 98% 50%;
}

.buttons {
	padding-top:10px;
}

#calculateBtn {
	background:#1f5c6f;
	font-size:14px;
	color:#fff;
	border-radius:5px;
	border:none;
	margin-right:20px;
	cursor:pointer;
	padding:10px 15px;
}

#resetBtn {
	background:#222;
	font-size:14px;
	color:#fff;
	border-radius:5px;
	border:none;
	margin-right:20px;
	cursor:pointer;
	padding:10px 15px;
}
.icons {
	text-align:right;
}
.icons i {
	font-size:25px;
	color:#fff;
}
.icons .ui-button {
	border:none;
	background:#1f5c6f;
	padding: .4em 0.6em;
}
#printBtn, #emailBtn {
	border:none;
	background:#1f5c6f;
	padding: .4em 0.6em;
	border-radius:5px;
	cursor:pointer;
}
#printBtn:hover, #emailBtn:hover {
	background:#000;
	color:#fff;
}
.icons .ui-button:hover {
	background:#000;
	color:#fff;
}
.icons .ui-corner-all {
	border-radius:5px;
}
.datepickerdiv {
	position:relative;
}

.datepickerdiv i {
	position: absolute;
left: 260px;
font-size: 25px;
top: 5px;
color: #555;
}
.ui-widget-header {
	background:#1f5c6f!important;
	color:#fff!important;
}
input#email {
	width:75%;
}
.ui-dialog-buttonset button:first-child {
	background:#1f5c6f!important;
	color:#fff!important;
	border:none!important;;
	border-radius:5px!important;
}
.ui-dialog-buttonset button:nth-child(2) {
	background:#222!important;
	color:#fff!important;
	border:none!important;;
	border-radius:5px!important;
}
.ui-datepicker .ui-datepicker-header {
	background:#dadada!important;
	color:#000!important;
}
@media all and (max-width: 800px) {
	.grid {
		padding:0 5%;
	}
	.datepickerdiv {
		padding:8px 0;
	}
	#datepicker {
		min-width:70%;
	}
	.datepickerdiv i {
		right:5%;
		top:25%;
		left:auto;
	}
	.calculator-container {
		padding-top:75px;
		padding-bottom:50px;
	}
	#schedule th {
		font-size:16px!important;
		padding:8px 5px!important;
	}
	.icons  {
		padding:25px 0;
	}
	
	 }