@charset "UTF-8";
/* CSS Document */
/*
colors!
	navy = #001446, 1 less = #001D66, 2 less = #00237A;
	blue = #0096d1, 2 less = #0ABAFF, 2 more = #0084B8
	plum = #622650, 2 less = #83346C, 2 more = #491D3C
	teal = #429eae, 2 less = #5CB2C1, 2 more = #388694
	white = #f1f2f2, 2 more = #DFE2E2
	red = #d64933
	yellow = #FFB01F, 2 less = #FFBF47
*/

fieldset {
	border: none;
	padding: 0;
	display: block;
}

input[type=text], input[type=number], input[type=tel], input[type=email], input[type=url], input[type=zip], input[type=search], input[type=date], input[type=datetime], input[type=time], input[type=password], input[type=datetime-local], input[type=month], input[type=week], input[type=date] {
	background: #f1f2f2;
	font-size: 100%;
	font-family: 'Roboto', sans-serif;
	padding: 0.625em;
	border: thin solid #AAB1B1;
	border-radius: 0.1875em;
	color: #1D2020;
	-webkit-appearance: none;
}

input[type=text], input[type=tel], input[type=email], input[type=url], input[type=search],input[type=password] {
	width: 40%;
}

input[type=search] {
	background-image:url("../files/magnifying-glass.png");
	background-size: 1em;
	background-position: 0.75em; 
  	background-repeat: no-repeat;	
	padding-left: 2em;
}

input:focus, textarea:focus, input[type=range]:focus {
	background-color: #F9F0F7;
	border-color: #622650;
	outline: none;
}

input::file-selector-button {
	font-size: 1.5em;
	font-weight: bold;    
	color: #491D3C;    
	background-color: rgba(98,38,80,0.50);
	padding: 0.625em;    
	border: thin solid grey;    
	border-radius: 0.1875em;
	cursor: pointer;
}

input::file-selector-button:hover {
	background-color: rgba(98,38,80,0.70);
	cursor: pointer;
}

textarea {
	width: 80%;
	height: 7em;
	background: #f1f2f2;
	color: #1D2020;
	border: thin solid #AAB1B1;
	border-radius: 0.1875em;
	font-size: 100%;
	font-family: 'Roboto', sans-serif;
	padding: 0.625em;
}

select {
	appearance: none;
	min-width: 40%;
    padding: 0.625em;
   	border: thin solid #AAB1B1;
	border-radius: 0.1875em;
    background-color: #f1f2f2;
	font-size: 100%;
	font-family: 'Roboto', sans-serif;
	margin: 0.625em 0;
	display: inline-grid;
	color: #1D2020;
	background-image: url("../files/caret-down.png");
	background-size: 1em;
	background-repeat: no-repeat;
	background-position: right 1.25em center;
}

select:focus {
	outline: none;
}

select:hover, input:hover {
	background-color: #F9F0F7;
	border-color: #622650;
}

select[multiple] {
	border: thin solid #AAB1B1;
	border-radius: 0.1875em;
	padding: 0.625em;
	color: #1D2020;
	background-image: url();
	vertical-align:sub;
}

select[mutliple]:focus {
	outline: none;
}

select[multiple] option:checked {
	color: #83346C !important;
}

select[multiple] option {
	color: #454A4A;
}

input:disabled, textarea:disabled, select:disabled {
	background-color: #D5D8D8;
	cursor: not-allowed;
}

input[type=submit], input[type=button], input[type=reset], button[type=button].submit {
	display: inline-block;
	background-color: #622650;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 0.75em 1em;
	margin: 0.5em;
	font-size: 100%;
	cursor: pointer;
	-webkit-appearance: none;
	text-decoration: none;
	border: solid medium #622650;
	text-overflow: ellipsis;
}

input[type=submit]:hover, input[type=button]:hover, button[type=button].submit:hover {
	background-color: #491D3C;
	border-color: #491D3C;
}

input[type=reset]:hover {
	background-color: #fff;
	color: #622650;
}

legend {
	font-size: 1.5em;
	font-weight: bold;
	color: #622650;
}

label {
	margin-right:.5em;
	font-weight: bold;
}

input[type=checkbox], input[type=radio] {
  	-webkit-appearance: none;
 	appearance: none;
 	background-color: #f1f2f2;
 	margin: 0px;
	font: inherit;
  	color: #622650;
 	width: 1.3em;
 	height: 1.3em;
 	border: 0.15em solid rgba(0,5,0,0.6);
 	border-radius: 0.15em;
  	transform: translateY(-0.075em);
	display: grid;
  	place-content: center;
}

input[type=radio], input[type=radio]::before {
	border-radius: 50%;
}

input[type=checkbox]::before, input[type=radio]::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #622650;
}

input[type=checkbox]:checked::before, input[type=radio]:checked::before {
  transform: scale(1);
}

input[type=checkbox]:hover, input[type=radio]:hover {
  background-color: #F9F0F7;
}

input[type=checkbox]:disabled, input[type=radio]:disabled {
  background-color: lightgray;
  cursor: not-allowed;
}

.form-control {
	display: grid;
	grid-template-columns: 1em auto;
	gap: 0.7em;
	vertical-align:text-top;
	padding-top:10px;
}

input[type=range] {
   -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 40%;
}

input[type=range]::-webkit-slider-runnable-track {
  	background-color: #f1f2f2;
   	border: thin solid #AAB1B1;
	border-radius: 0.5rem;
   	height: 0.5rem;  
}

input[type=range]::-moz-range-track {
   	background-color: #f1f2f2;
	border: thin solid #AAB1B1;
   	border-radius: 0.5rem;
   	height: 0.5rem;
}

input[type=range]::-webkit-slider-thumb {
 	-webkit-appearance: none;
  	appearance: none;
   	background-color: #622650;
   	height: 1.25rem;
   	width: 1.25rem;
	border-radius: 50%;
	margin-top:-0.4rem;
}

input[type=range]::-moz-range-thumb {
   	border-radius: 50%;
   	background-color: #622650;
   	height: 1.25rem;
   	width: 1.25rem;
	margin-top:-0.4rem;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  	background-color: #F9F0F7;
   	border: thin solid #622650;
}

input[type=range]:focus::-moz-range-track {
   	background-color: #F9F0F7;
	border: thin solid #622650;
}

input[type=color] {
	-webkit-appearance: none;
	border: thin solid #AAB1B1;
	border-radius: 0.15em;
	height: 2.5rem;
	padding: none;
}

.inputSide {
	width: 75%;
}

.view-table {
	display: table;
	width: 100%;
	height: 100%;
}

.view-row {
	display: table-row;
	padding: 0.5em;
	height: auto;
}

.view-row:nth-child(even) {
	background: #f1f2f2;
}

.view-cell {
	display: table-cell;
	padding: 0.625em;
	height: auto;
	justify-content: center;
	align-items: center;
	vertical-align:middle;
}

.view-th {
	display: table-cell;
	padding: 0.625em;
	height: auto;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	color: #001446;
	font-weight: bold;
	border-bottom: #001446 0.125em solid;
	text-align: center;
}

@media ( max-width: 600px ) {
	.inputSide {
		width: auto;
	}
	
	input[type=text], input[type=number], input[type=tel], input[type=email], input[type=url], input[type=zip], input[type=search], input[type=date], input[type=datetime], input[type=time], input[type=password], input[type=datetime-local], input[type=month], input[type=week], select, textarea {
		padding: .25em 2%;
		width:90%;
		margin: 0 2%;
	}
	
	input[type=search] {
		padding-left: 2em;
	}
	
	.view-row {
		display: table;
		width: 100%;
		margin: 0.625em 0;
	}
	
	label {
		margin: 2%;
	}
	
	.view-cell {
		display: table-row;
		width: 100%;
		min-width: 100%;
		padding: 0.625em;
	}
	
	.form-table td {
		display: table-row;
		width: 90vw;
		min-width: 100%;
	}
}