.textbox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	width: 400px;
	max-width: 100%;
    	padding: 8px 12px;
    	margin: 0 0 8px;
    	display: inline-block;
    	border: 2px solid #ccc;
    	border-radius: 8px;
    	box-sizing: border-box;}

.textbox-short {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	width: 300px;
	max-width: 60%;
    	padding: 8px 12px;
    	margin: 0 0 8px;
    	display: inline-block;
    	border: 2px solid #ccc;
    	border-radius: 8px;
    	box-sizing: border-box;}

.textboxred {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	width: 400px;
	max-width: 100%;
    	padding: 8px 12px;
    	margin: 0 0 8px;
    	display: inline-block;
    	border: 3px solid #c00;
    	border-radius: 8px;
    	box-sizing: border-box;}

.textboxred-short {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	width: 300px;
	max-width: 60%;
    	padding: 8px 12px;
    	margin: 0 0 8px;
    	display: inline-block;
    	border: 3px solid #c00;
    	border-radius: 8px;
    	box-sizing: border-box;}

input[color="blue"]::-webkit-input-placeholder { /* Chrome */
  color: blue;
  opacity: 0.5;
}
input[color="blue"]:-ms-input-placeholder { /* IE 10+ */
  color: blue;
  opacity: 0.5;
}
input[color="blue"]::-moz-placeholder { /* Firefox 19+ */
  color: blue;
  opacity: 0.5;
}
input[color="blue"]:-moz-placeholder { /* Firefox 4 - 18 */
  color: blue;
  opacity: 0.5;
}

input[color="red"]::-webkit-input-placeholder { /* Chrome */
  color: red;
  opacity: 0.5;
}
input[color="red"]:-ms-input-placeholder { /* IE 10+ */
  color: red;
  opacity: 0.5;
}
input[color="red"]::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 0.5;
}
input[color="red"]:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 0.5;
}

textarea[color="blue"]::-webkit-input-placeholder { /* Chrome */
  color: blue;
  opacity: 0.5;
}
textarea[color="blue"]:-ms-input-placeholder { /* IE 10+ */
  color: blue;
  opacity: 0.5;
}
textarea[color="blue"]::-moz-placeholder { /* Firefox 19+ */
  color: blue;
  opacity: 0.5;
}
textarea[color="blue"]:-moz-placeholder { /* Firefox 4 - 18 */
  color: blue;
  opacity: 0.5;
}

.button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	width: 300px;
	max-width: 70%;
	min-height: 50px;
	padding: 5px 5px;
	margin-top: 10px;
	background: -moz-linear-gradient(
		top,
		#e6f7fa 0%,
		#9ec6de 50%,
		#aac9e0 50%,
		#9cc4d6 65%,
		#7daebd);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#e6f7fa),
		color-stop(0.50, #9ec6de),
		color-stop(0.50, #aac9e0),
		color-stop(0.65, #9cc4d6),
		to(#7daebd));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(29,60,84,0.5),
		inset 0px 0px 5px rgba(108,162,176,0.6);
	-webkit-box-shadow:
		0px 1px 3px rgba(29,60,84,0.5),
		inset 0px 0px 5px rgba(108,162,176,0.6);
	box-shadow:
		0px 1px 3px rgba(29,60,84,0.5),
		inset 0px 0px 5px rgba(108,162,176,0.6);
	text-shadow:
		0px -1px 3px rgba(255,255,255,0.8),
		0px 1px 0px rgba(255,255,255,0.3);
}

.infobuttongray {
	font-family: trebuchet MS, sans-serif;
	font-size: 14px;
	font-weight: normal;
	width: 400px;
	max-width: 100%;
	color: #000000;
	padding: 4px 8px;
	margin-top: 10px;
	background: -moz-linear-gradient(
		top,
		#edeef0 0%,
		#bec1d1);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#edeef0),
		to(#bec1d1));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 3px rgba(255,255,255,0.8),
		0px 1px 0px rgba(255,255,255,0.3);
}


.infobuttongreen {
	font-family: trebuchet MS, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	width: 400px;
	max-width: 100%;
	padding: 4px 8px;
	margin-top: 10px;
	background: -moz-linear-gradient(
		top,
		#edeef0 0%,
		#a9f9c4);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#edeef0),
		to(#a9f9c4));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 3px rgba(255,255,255,0.8),
		0px 1px 0px rgba(255,255,255,0.3);
}

.infobuttonlightblue {
	font-family: trebuchet MS, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	width: 400px;
	max-width: 100%;
	padding: 4px 8px;
	margin-top: 10px;
	background: -moz-linear-gradient(
		top,
		#edeef0 0%,
		#a9eff9);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#edeef0),
		to(#a9eff9));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 3px rgba(255,255,255,0.8),
		0px 1px 0px rgba(255,255,255,0.3);
}

.infobuttonyellow {
	font-family: trebuchet MS, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	width: 400px;
	max-width: 100%;
	padding: 4px 8px;
	margin-top: 10px;
	background: -moz-linear-gradient(
		top,
		#edeef0 0%,
		#ecf087);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#edeef0),
		to(#ecf087));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 3px rgba(255,255,255,0.8),
		0px 1px 0px rgba(255,255,255,0.3);
}

.infobuttonred {
	font-family: trebuchet MS, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	width: 400px;
	max-width: 100%;
	padding: 4px 8px;
	margin-top: 10px;
	background: -moz-linear-gradient(
		top,
		#edeef0 0%,
		#edc4c4);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#edeef0),
		to(#edc4c4));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 3px rgba(255,255,255,0.8),
		0px 1px 0px rgba(255,255,255,0.3);
}


input[type=radio] {
    display: none;
}
input[type=radio] + label::before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em -0.4em;
}
input[type=radio]:checked + label::before {
    background-color: #848eff;
}

.radio1 + label::before {
    width: 0.5em;
    height: 0.5em;
}

.radio2 + label::before {
    width: 0.75em;
    height: 0.75em;
}

.radio3 + label::before {
    width: 1em;
    height: 1em;
}

.radio4 + label::before {
    width: 1.5em;
    height: 1.5em;
}

.fixed-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #082149;
	height: 40px;
	box-sizing: border-box;
	padding: 5px;
}
.fixed-nav a {
	font-size: 16px;
    color: white;
    text-decoration: none;
	padding: 10px;
	font-family: arial;
}
.fixed-nav img {
  vertical-align:middle;
}
.dropdown {
    float: right;
	width: 150px;
    overflow: hidden;
}
.dropdown .dropbtn {
    cursor: pointer;
	width: 150px;
	height: 30px;
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 0;
    background-color: inherit;
}
.fixed-nav a:hover, .dropdown:hover .dropbtn {
    background-color: #000;
	color: #eee;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    float: left;
    color: black;
    padding: 0px 5px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}
.show {
    display: block;
}
.sbtn {
    float: none;
	margin: 5px 0;
	background: -moz-linear-gradient(
		top,
		#e6f7fa 0%,
		#9ec6de 50%,
		#aac9e0 50%,
		#9cc4d6 65%,
		#7daebd);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#e6f7fa),
		color-stop(0.50, #9ec6de),
		color-stop(0.50, #aac9e0),
		color-stop(0.65, #9cc4d6),
		to(#7daebd));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000000;
    outline: none;
	font-size: 12px;
    color: black;
	background-color: #f9f9f9;
    padding: 2px 2px;
	min-height: 40px;
    text-decoration: none;
	width: 140px;
    display: block;
    text-align: center;
}
main {
  margin-top:40px;
}

.customerinfo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
table.customerinfo {
  margin: 0 auto;
  border: 1px solid #000000;
  background-color: #ccffff;
  width: 400px;
  max-width: 100%;
  margin-top: 5px;
  text-align: left;
  border-collapse: collapse;
}
table.calendar {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 auto;
  border: 1px solid #000000;
  width: 400px;
  max-width: 100%;
  margin-top: 5px;
  text-align: left;
  border-collapse: collapse;
}
table.calendar button{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	width: 100%;
    	padding: 4px 8px;
    	margin: 0;
    	display: inline-block;
    	border: 2px solid #ccc;
    	border-radius: 4px;
    	box-sizing: border-box;
}
.taskinfo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
table.taskinfo {
  margin: 0 auto;
  border: 1px solid #2E59AA;
  background-color: #AFD7F5;
  width: 400px;
  max-width: 100%;
  margin-top: 5px;
  text-align: left;
  border-collapse: collapse;
}
table.taskinfo td {
  font-size: 12px;
  padding: 2px;
}
table.taskinfo input[type=text], input[type=date]{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	width: 100%;
    	padding: 4px 8px;
    	margin: 0;
    	display: inline-block;
    	border: 2px solid #ccc;
    	border-radius: 4px;
    	box-sizing: border-box;
}
table.taskinfo textarea{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	width: 100%;
    	padding: 4px 8px;
    	margin: 0;
    	display: inline-block;
    	border: 2px solid #ccc;
    	border-radius: 4px;
    	box-sizing: border-box;
}
table.taskinfo input[fcolor=red] {
	border: 3px solid #c00;
    	}

table.radiobg {
	margin: 0 2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #ffffff;
	width: 99%;
    	padding: 2px 8px;
    	display: inline-block;
    	border: 2px solid #ccc;
    	border-radius: 4px;
    	box-sizing: border-box;}

table.radiobgred {
	margin: 0 2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #ffffff;
	width: 99%;
    	padding: 2px 8px;
    	display: inline-block;
    	border: 3px solid #c00;
    	border-radius: 4px;
    	box-sizing: border-box;}