/* Mix of general style */
a
{
	text-decoration: none;
}













/* Form Container Size - Responsive */
@media only screen and (min-width: 765px)
{
	.form-container-xlarge
	{
		margin: auto 20px;
	}
	.form-container-large
	{
		margin: auto 100px;
	}
	.form-container-medium
	{
		margin: auto 200px;
	}
	.form-container-small
	{
		margin: auto 400px;
	}

}
@media only screen and (max-width: 760px)
{
	.form-container-xlarge, .form-container-large, .form-container-medium, .form-container-small
	{
		margin: auto;
	}

}

/* Style the form - display items horizontally */
.form-inline
{
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

/* Add some margins for each label */
.form-inline label
{
	margin: 5px 10px 5px 0;
}

/* Style the input fields */
.form-inline input
{
	vertical-align: middle;
	margin: 5px 10px 5px 0;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
}

/* Style the submit button */
.form-inline button
{
	padding: 10px 20px;
	background-color: dodgerblue;
	border: 1px solid #ddd;
	color: white;
}

.form-inline button:hover
{
	background-color: royalblue;
}

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 760px)
{
	.form-inline input
	{
		margin: 10px 0;
	}

	.form-inline
	{
		flex-direction: column;
		align-items: stretch;
	}
}

/* CUSTOM Anchor BUTTON STYLE... */
 .kyn-a-btn {
 	border: 1px solid #999;
 	border-radius: 2px;
 	padding: 2px 6px;
 	margin-top: 0px;
 	background-color: #aaa;
 	
 }

/* CUSTOM FORM LABEL / INPUTS... */
input[type=text], input[type=number], input[type=tel], input[type=date], select, textarea
{
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
}

label
{
	padding: 12px 12px 12px 0;
	display: inline-block;
}

input[type=submit]
{
	background-color: #04AA6D;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	xfloat: right;
}

input[type=submit]:hover
{
	background-color: #45a049;
}

/* RESPONSIVE FORM FOR MOBILE */
.col-25-float
{
	float: left;
	width: 25%;
	margin-top: 6px;
}
.col-50-float
{
	float: left;
	width: 50%;
	margin-top: 6px;
}

.col-75-float
{
	float: left;
	width: 75%;
	margin-top: 6px;
}

/* Clear floats after the columns */
.row::after
{
	content: "";
	display: table;
	clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 760px)
{
	.col-25-float, .col-50-float, .col-75-float, input[type=submit]
	{
		width: 100%;
		margin-top: 0;
	}
}



/* BEST RESPONSIVE TABLE FOR MOBILE */
table
{
	border: 1px solid #ccc;
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

table th
{
	xtext-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
}

table tr
{
	border: 1px solid #ddd;
	padding: 5px;
}

tr:nth-child(odd)
{
	background: #eee;
}
tr:nth-child(even)
{
	/*Changes the backgorund color of even TR on mobile*/
	background: #aaa;

}

table th, table td
{
	padding: 10px;
	text-align: center;
}

@media only screen and (min-width: 765px)
{
	.td-width-2
	{
		width: 2%;
	}

	.td-width-5
	{
		width: 5%;
	}

	.td-width-8
	{
		width: 8%;
	}

	.td-width-10
	{
		width: 10%;
	}

	.td-width-15
	{
		width: 15%;
	}

	.td-width-20
	{
		width: 20%;
	}

	.td-width-25
	{
		width: 25%;
	}

	.td-width-30
	{
		width: 30%;
	}

	.td-width-35
	{
		width: 35%;
	}

	.td-width-40
	{
		width: 40%;
	}

	.td-width-45
	{
		width: 45%;
	}

	.td-width-50
	{
		width: 50%;
	}




	.td-width-100
	{
		width: 100%;
	}
}

@media only screen and (max-width: 760px)
{

	.div_table_container
	{
		margin: 0 auto;
		padding: 0px;
	}

	table
	{
		border: 0;
	}

	table thead
	{
		display: none;
	}

	table tr
	{
		margin-bottom: 10px;
		display: block;
		border-bottom: 2px solid #ddd;
	}

	tr:nth-child(even) > [data-label]:before
	{
		/*Changes the color of the label of even TR on mobile*/
		color: #fff;
	}


	table td
	{
		display: block;
		text-align: right;
		font-size: 13px;
		border-bottom: 1px dotted #ccc;
	}

	table td:last-child
	{
		border-bottom: 0;
	}

	table td:before
	{
		content: attr(data-label);
		float: left;
		text-transform: uppercase;
		font-weight: bold;
	}

	.td-width-100-mobile
	{
		width: 100%
	}


}



/* Style the sidenav links and the dropdown button */

.dropdown-container a,
.dropdown-btn
{
	padding: 6px 8px 6px 16px;
	text-decoration: none;
	display: block;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	cursor: pointer;
	outline: none;
}

/* On mouse-over */
.dropdown-btn a:hover, .dropdown-btn:hover, .dropdown-container a:hover
{
	color: #f1f1f1;
	background-color: #777;
}


/* Add an active class to the active dropdown button */
.active_dropdown-btn
{
	background-color: #999;
	color: white;
}


.dropdown-btn
{
	margin-bottom: 10px
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container
{
	display: none;
	background-color: #f0f0f0;
	padding-left: 0px;
	margin-top: -10px;
	margin-bottom: 10px;
}

/* Optional: Style the caret down icon */
.fa-caret-down
{
	float: right;
	padding-right: 8px;
}