/****************************
        COLOR PALETTE
*****************************
*****************************
		   MAIN
-----------------------------
	  background color
off-white: 		 #f8f2e4
off-white-modal: #fff2e6
-----------------------------
		   text
warm-gray-text: #9b9da0
dark-gray-text: #686c6e
brown-text: 	#b6a292

*****************************
		  BUTTONS
-----------------------------
		dark gray
button-main:   #8b8986
button-border: #6a6562
-----------------------------
		   blue
button-main:   #0275d8
button-border: #0259a6
-----------------------------
		  orange
button-main:   #da7141
button-border: #c75d34
-----------------------------
		  green
button-main:   #5cb85c
button-border: #428542
-----------------------------
		   red
button-main:   #d9534f
button-border: #a63f3c
-----------------------------
		  gray
button-main:   #bebbb7
button-border: #8c8a87
*****************************/

body{
    zoom: 70%;
}

.container {
    position: relative;
	height: 900px;
	min-width: 1200px;
	padding: 0 2em;
}

h1 {
	color: #9b9da0;
	font-family: serif;
	font-size: 40px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	line-height: 48px;
	margin: 0.5em 0 0 0;
}

p, p1, p2 {
	color: #b6a292;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: 600;
	max-width: 500px;
	text-indent: 0px !important;
	margin: 0 0 0.4em 0;
}

p1 {
	font-size: 24px;
	padding: 0px 10px;
	vertical-align: middle;
}

p2 {
	color: #686c6e;
	font-size: 18px;
	vertical-align: middle;
}

.currency {
	color: #1286C1;
	width: 100%;
}

.blue {
	color: #1286C1;
}


input[type=number]::-webkit-inner-spin-button {
	opacity: 1;
}

.page-header {
	margin: 0 0 0 0;
}

.btn, .btn:hover, .btn:focus {
	color: #FFF;
	margin: 0em 0.25em;
    border-radius: 0.25em;
    font-size: 22px;
	font-weight: 700;
	padding: 0.4em 0.8em;
	min-width: 50px;
    background-color: #8b8986;
	border-color: #8b8986;
	border-left-color: #6a6562;
	border-bottom-color: #6a6562;
	border-width: 0px 0px 4px 4px;
	box-shadow: -3px 3px 6px #999;
}
.btn:active {
	background-color: #6a6562;
	padding: 0.5em 0.9em 0.3em 0.7em;
	box-shadow: -3px 3px 6px #bbb;
}
.btn-primary, .btn-primary:hover, .btn-primary:focus {
    background-color: #0275d8;
	border-color: #0275d8;
	border-left-color: #0259a6;
	border-bottom-color: #0259a6;
}
.btn-primary:active {
	background-color: #0259a6;
}
.btn-warning, .btn-warning:hover, .btn-warning:focus {
    background-color: #da7141;
	border-color: #da7141;
	border-left-color: #c75d34;
	border-bottom-color: #c75d34;
}
.btn-warning:active {
	background-color: #c75d34;
}
.btn-success, .btn-success:hover, .btn-success:focus {
    background-color: #5cb85c;
	border-color: #5cb85c;
	border-left-color: #428542;
	border-bottom-color: #428542;
}
.btn-success:active {
	background-color: #428542;
}
.btn-danger, .btn-danger:hover, .btn-danger:focus {
    background-color: #d9534f;
	border-color: #d9534f;
	border-left-color: #a63f3c;
	border-bottom-color: #a63f3c;
}
.btn-danger:active {
	background-color: #a63f3c;
}
.btn-info, .btn-info:hover, .btn-info:focus {
    background-color: #bebbb7;
	border-color: #bebbb7;
	border-left-color: #8c8a87;
	border-bottom-color: #8c8a87;
	border-width: 0px 0px 4px 4px;
	box-shadow: -2px 2px 2px #999;
}
.btn-info:active {
	background-color: #8c8a87;
	box-shadow: -2px 2px 3px #BBB;
}
.btn-delete, .btn-delete:hover, .btn-delete:focus {
	padding: 0.2em 0.4em;
	min-width: 10px;
	box-shadow: none;	
}
.btn-delete:active {
	padding: 0.3em 0.5em 0.1em 0.3em;
	box-shadow: none;
}

#name0,  #name1,  #name2,  #name3,  #name4,  #name5,  #name6,  #name7,  #name8,  #name9,
#name10, #name11, #name12, #name13, #name14, #name15, #name16, #name17, #name18, #name19 {
	font-size: 24px;
    color: #1286C1;
    margin: 0px;
	text-align: center;
	overflow: scroll;
	width: 200px;
}

#tabval0,  #tabval1,  #tabval2,  #tabval3,  #tabval4,  #tabval5,  #tabval6,  #tabval7,  #tabval8,  #tabval9,
#tabval10, #tabval11, #tabval12, #tabval13, #tabval14, #tabval15, #tabval16, #tabval17, #tabval18, #tabval19 {
	font-size: 24px;
    color: #1286C1;
    margin: 0px;
	text-align: center;
	overflow: scroll;
	width: 120px;
}

#flowrate0,  #flowrate1,  #flowrate2,  #flowrate3,  #flowrate4,  #flowrate5,  #flowrate6,  #flowrate7,  #flowrate8,  #flowrate9,
#flowrate10, #flowrate11, #flowrate12, #flowrate13, #flowrate14, #flowrate15, #flowrate16, #flowrate17, #flowrate18, #flowrate19 {
	font-size: 18px;
    color: #1286C1;
    margin: 0px;
	text-align: center;
	overflow: scroll;
	width: 135px;
	font-weight: 600;
}

#households0,  #households1,  #households2,  #households3,  #households4,  #households5,  #households6,  #households7,  #households8,  #households9,
#households10, #households11, #households12, #households13, #households14, #households15, #households16, #households17, #households18, #households19 {
	font-size: 24px;
    color: #1286C1;
    margin: 0px;
	text-align: center;
	overflow: scroll;
	width: 70px;
}

#answer0,  #answer1,  #answer2,  #answer3,  #answer4,  #answer5,  #answer6,  #answer7,  #answer8,  #answer9,
#answer10, #answer11, #answer12, #answer13, #answer14, #answer15, #answer16, #answer17, #answer18, #answer19 {
	font-size: 24px;
    color: #1286C1;
    margin: 0px;
	text-align: center;
	overflow: scroll;
	width: 200px;
}

input,
select {
	color: #1286C1;
	background-color: #FFF;
	font-size: 22px;
	background-color: #CCC;
	margin: 3px 0px;
	padding: 2px;
	border: 2px solid #CCC;
	border-left-color: #999;
	border-top-color: #777;
	/*border-top-color: #000;*/
	height: 38px;
	text-transform: uppercase;
	max-width: 10em;
	min-width: 1em;
}

select {
	background-color: #444;
}

@media (min-width: 500px) {
	.textContent {
		width: 40%;
		max-width: 575px;
		margin-left: 0em;
		margin-top: 1em;
		margin-bottom: 1em;
		margin-right: 1em;
	}
}

.row {
	margin: 0 1em;
	float: left;
	width: 100%;
	position: static;
}

#saveButtonsContainer {
	position:static;
	margin: 0 1em;
	width: 100%;
	float:left;
}

.footerDiv {
    margin: 0 2em 0 0;
    position: relative;
	float: left;
	width: 100%;
}

.canvas-div {
	max-height: 600px;
	float: right;
	position: static;
}

.btn-group {
	position: static;
	float: right;
	font-family: "Georgia", sans-serif;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	color: #666;
	background-color: rgba(255, 242, 230, 0.00);
	padding-top: 1em; 
	margin: 0 8em 0 0;
}

figure {
	margin: 0px;
}
figcaption{
	color: #999;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-top: 3px;
}

a {
	color: #666;
}

.headerImage {
    overflow: hidden;
	position: absolute;
	float: left;
	width: 73%;
	min-width: 425px;
}

body {
	background-color: #f8f2e4;
}

.evans-button {
	display: inline-block;
}

.table td,
.table th {
	padding: 0px;
	vertical-align: middle;
	border-top: 0px solid #000;
}

table,
.table {
	border-collapse: initial;
	margin: 0px;
    padding: 0px;
    max-width: 95%;
}

td {
	margin: 0px;
	padding: 0px;
}

.bucket-table-header {
	border-bottom: 0px dotted #000 !important;
}

.modal-body,
.modal-footer,
.modal-content {
	background-color: #FFF2E6;
	border-top-left-radius: 25px !important;
	border-top-right-radius: 25px !important;
	border: 0px solid #000;
	width: 1100px !important;
	margin: 0 auto;
}

.modal-footer {
	border: 0px;
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
	border-bottom-left-radius: 25px !important;
	border-bottom-right-radius: 25px !important;
}

.modal-content {
	border-radius: 25px !important;
}

input,
select {
	background-color: rgba(255, 255, 255, 0.5)
}

.modal-xl {
	width: 90%;
	max-width: 1200px;
}

.modal-pdf {
	width: 100%;
	max-width: 1900px;
}

.bucket-table {
	background-color: #FFF2E6;
	margin: 0 auto;
	width: 100%;
}

@media (min-width: 600px) {
	.homePageCanvas {
		width: 45%;
		height: 65%;
		float: left;
		margin-right: 1em;
		margin-left: 3.5em;
		position: static;
	}
}

@media (min-width: 600px) {
	.homepage {
		width: 35%;
		height: 65%;
		float: right;
		margin-left: 2em;
		position: static;
	}
}

@media (min-width: 600px) {
	.currencyDropDown {
		font-family: "Century Gothic", CenturyGothic, AppleGothic, Arial, sans-serif;
		font-size: 40px;
		font-style: normal;
		font-variant: normal;
		font-weight: bold;
		line-height: 48px;
		color: #9b9da0;
		float: right;
		position: static;
	}
}


.playbtn {
	float: left;
	width: 10em;
	height: 2.5em;
	border-radius: 0.5em;
	margin-left: 1em;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top, #faa51a, #f47a20);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
	font-family: "Georgia", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	line-height: 18px;
	color: #fef4e9;
}


/*.playbtn:hover {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(top,  #f88e11,  #f06015);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    }*/

.playbtn:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top, #f47a20, #faa51a);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

.openbtn {
	float: left;
	width: 10em;
	height: 2.5em;
	border-radius: 0.5em;
	font-family: "Georgia", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	line-height: 18px;
	color: #fef4e9;
	border: solid 1px #1D2ACB;
	background: #1D2ACB;
	background: -webkit-gradient(linear, left top, left bottom, from(#295AF5), to(#1D2ACB));
	background: -moz-linear-gradient(top, #295AF5, #1D2ACB);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#1D2ACB');
}

.openbtn:hover {
	background: #1D2ACB;
	background: -webkit-gradient(linear, left top, left bottom, from(#295AF5), to(#0F1A9E));
	background: -moz-linear-gradient(top, #103ED3, #081398);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#295AF5', endColorstr='#0F1A9E');
}

.openbtn:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#1D2ACB), to(#295AF5));
	background: -moz-linear-gradient(top, #1D2ACB, #295AF5);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1D2ACB', endColorstr='#295AF5');
}

.file {
	width: 10em;
	height: 2.5em;
	opacity: 1;
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: inherit;
}