/* Forms */
.form-container{
	width: 100%;
	max-width: 600px;
	height: auto;
	padding: 20px;
	margin: 0 auto;
	margin-top:20px;
    margin-bottom: 20px;
}

.input-control{ width: 100%; height: auto; margin-bottom: 30px; }
.input-control span{ font-size:16px; font-weight: bold; color: var(--color-dark-blue); }
.input-control > input { 
	width: 100%; 
	height: 55px; 
	padding: 10px;
	border:1px solid var(--color-dark-blue);
	background-color: var(--color-white);
	margin-top: 10px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--color-dark-blue);
}

.input-control > input:hover { border:1px solid var(--color-orange); }
.input-control-row .input-control{ width: 48%; }



 select {
    background-color: white;
    border: thin solid blue;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;
  
    /* select reset */
    margin: 0;      
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
  }



.input-control > select { 
	width: 100%; 
	height: 55px; 
	padding: 10px;
	border:1px solid var(--color-dark-blue);
	background-color: var(--color-white);
	margin-top: 10px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--color-dark-blue);


	background-image:
    linear-gradient(45deg, transparent 50%, var(--color-dark-blue) 50%),
    linear-gradient(135deg, var(--color-dark-blue) 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 12px),
    calc(100% - 15px) calc(1em + 12px),
    calc(100% - 2.5em) 1.2em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

.input-control > select:hover { border:1px solid var(--color-orange); }




.input-control select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
  }




.input-control > textarea { 
	width: 100%; 
	height: 150px; 
	padding: 10px;
	border:1px solid var(--color-dark-blue);
	background-color: var(--color-white);
	margin-top: 10px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--color-dark-blue);
	font-family: 'Roboto';
}

.input-control > textarea:hover { border:1px solid var(--color-orange); }




.checkbox-control {
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	padding-top: 3px;
	font-size:14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox-control input {
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
}


.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: var(--color-dark-blue);
	border-radius: 5px;
}

.checkbox-control:hover input ~ .checkmark {
	background-color: var(--color-gray-1)
}

.checkbox-control input:checked ~ .checkmark {
	background-color: var(--color-orange);
	border-radius: 5px;
}

.checkbox-control > label{
	color: var(--color-gray-1);
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkbox-control input:checked ~ .checkmark:after {
	display: block;
}

.checkbox-control .checkmark:after {
	left: 7px;
	top: 2px;
	width: 4px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}


.button-control{
	width: 100%;
	height: auto;
	margin-top: 40px;
}

.button-control > button,
.button-control > input{
	padding: 15px 20px;
	background-color: var(--color-orange);
	font-size:16px;
	font-weight: bold;
	color: var(--color-white);
	border:none;
	border-radius: 6px;
}

.button-control > button:hover,
.button-control > input:hover{
	background-color: var(--color-dark-blue);
}


.button-control > button i{
	font-size:16px;
	margin-left:10px;
}

.form-link{
	font-size:14px;
	color: var(--color-dark-blue);
}

.form-link > a{
	font-size:14px;
	font-weight: bold;
	color: var(--color-orange);
	margin-left: 10px;
}

.form-link > a:hover{
	color: var(--color-dark-blue);
}