/* CSS Document */

body{
	background-color: #F8F8F8;
	color: #222;
}
/*Navbar design*/
.navbar{
	background-color: #ffffff;
	border-bottom-style: solid;
	border-bottom-color: #cccccc;
	border-bottom-width: thin;
	font-family: Arial, sans-serif;
}

 
/*Main titledesign*/
#titlecontainer{
	background-image: url("https://www.aquark.com/wp-content/uploads/2024/08/titlebg2-scaled.jpg");
	background-size: cover;
	font-family: Helvetica, "sans-serif";
	padding: 50px 0px;
}

#maintitle{
	align: center;
	color: white;
	max-width: 70%;
	padding: 5px 0px;
}

/*Sections*/

#resultinfo{
	display: none;
}

#advancedinfo{
	display: none;
}

#resultbuttons{
	display: none;
}

/*Radio design*/
.input-hidden {
  position: absolute;
  left: -9999px;
}


.hpoption img{
	width: inherit;
	height: 100%;
}


/*Input style*/
.text-input{
	
}

.text-drop{
	
}

/*Disable input arrows
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}*/


/*Button designs*/
.btn_yellow{
	border: solid thin #ffd100;
	border-radius: 3px;
	color: #000;
	background-color: #ffd100;
	padding: 5px 5px;
	width: 50%;
}

.btn_yellow:hover{
	border: solid thin #000;
	background-color: #ffd100;
	color: #000;
}

.btn_grey{
	border: solid thin #666;
	border-radius: 3px;
	color: #666;
	background-color: #fff;
	padding: 5px 5px;
	width: 50%;
	font-family: Arial, sans-serif;
}

.btn_grey:hover{
	border: solid thin #666;
	color: #FFF;
	background-color: #666;
}

/*Error messages*/
#poolmessage, #usagemessage{
	color: #FF0000;
}


/*Vertical center*/
.vertical-center {
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.container-res{
	display: flex;
}

.container-lg{
	margin-top: 20px;
	margin-bottom: 20px;
}

.selectiontitle{
	background-color:#666666;
	color: #FFFFFF;
	width: 100%;
	padding: 10px 15px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin:0px;
	
}


#optioncontainer{
	background-color:#FFFBE8;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 10px 0px;
}

#hpselectimg{
	width: auto;
	height:auto;
}

#inputcontainer{
	padding: 25px 0px;
}

/*----------------------------------------------------
						IDs
----------------------------------------------------*/
#settings{
	position: fixed;
	bottom: 0;
	min-width: 100vw;
	display: flex;
	justify-content: center;
}


#padcontainer{
	display: none;
}

#tradcontainer{
	display: none;
}

#naseriescontainer{
	display: none;
}

#resultCapacityBTU{
	display: none;
}

#showBTUTitle{
	display: none;
}

#showcapacityBTU{
	display: none;
}

/*----------------------------------------------------
						Classes
----------------------------------------------------*/

.settingcontainer{
	align-content: center;
	background-color: #222;
	padding: 5px 25px 5px 25px;
	width: auto;
	min-width: 60%;
	border: solid medium #AAAAAA;
	border-radius: 15px;
	color: white;
	font-size: small;
	margin: 0px 10px;
}

.settingcontainer .row{
	width: auto;
}

input[class*=settingoption] + label{
	align-content: center;
	border: thin solid #DDDDDD;
	border-radius: 15px;
	transition: 500ms all;
	margin: 5px 5px;
	padding: 2px 10px;
}

input[class*=settingoption]:checked + label {
  	align-content: center;
	background-color: #DDD;
	border: thin solid #DDD;
	color: #000000;
	border-radius: 15px;
	transition: 500ms all;
}

.steptitle{
	border-left: solid 15px #FFDD00;
	align-content: left;
	padding: 10px 25px 5px 25px;
	background-color: #F4F4F4;
	color: #222;
}

.darksteptitle{
	border-left: solid 15px #444;
	align-content: left;
	padding: 10px 25px 5px 25px;
	background-color: #333;
	color: #eee;
}

.stepcontainer{
	border-radius: 0px;
	border-bottom: solid thick #ffd100;
	align-content: center;
	background-color: #fff;
	margin: 20px;
	color: #222;
	/*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.20);*/
}

.darkstepcontainer{
	border-radius: 0px;
	border-bottom: solid thick #444;
	align-content: center;
	background-color: #2A2A2A;
	margin: 20px;
	color: #eee;
	/*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.20);*/
}

.stepcontent{
	background-color: #fff;
	color: #222;
	padding: 25px;
}

.darkstepcontent{
	background-color: #2A2A2A;
	color: #eee;
	padding: 25px;
}


/*Textbox designs*/
.txtbox_def{
	border: solid thin #ccc;
	background-color: #fff;
	border-radius: 3px;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	color: #222;
	width: 30%;
}

.darktxtbox_def{
	border: solid thin #ccc;
	background-color: #444;
	border-radius: 3px;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	color: #eee;
	width: 30%;
}

.txtbox_error{
	border: solid thin #FF2400;
	background-color: #ffc9c9;
	border-radius: 3px;
	text-align: center;
	font-family: Arial, sans-serif;
}

.txtbox_month{
	border: solid thin #ccc;
	background-color: #fff;
	border-radius: 3px;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	max-width:70%;
}


/*Dropdown for unit selection*/
.unitselect{
	align-content: center;
	border: solid thin #ccc;
	border-radius: 3px;
	transition: 500ms all;
	padding: 3px 10px;
	color: #222;
	background-color: #fff;
}

.darkunitselect{
	align-content: center;
	border: solid thin #ccc;
	border-radius: 3px;
	transition: 500ms all;
	padding: 3px 10px;
	color: #eee;
	background-color: #444;
}

input[class*=seriesoption] + label{
	align-content: center;
	font-size: small;
	border: thin solid #DDDDDD;
	border-radius: 5px;
	transition: 500ms all;
	padding: 5px 10px;
	width: auto;
}

input[class*=seriesoption]:checked + label {
  	align-content: center;
	font-size: small;
	color: #222222;
	background-color: #DDDDDD;
	border: thin solid #DDDDDD;
	border-radius: 5px 5px 0px 0px;
	padding: 10px 10px;
	transition: 500ms all;
}

.seriescontainer{
	border-top: medium solid #DDDDDD;
	align-content: center;
	padding: 20px 10px;
	width: 80%;
}

input[class*=hpoption] + label{
	align-content: center;
	border: thin solid #DDDDDD;
	border-radius: 1px;
	transition: 500ms all;
	margin: 5px 5px;
	padding: 5px 10px;
	width: auto;
}

input[class*=hpoption]:checked + label {
  	align-content: center;
	background-color: #FFDD00;
	border: thin solid #FFDD00;
	border-radius: 1px;
	transition: 500ms all;
}

input[class*=darkhpoption] + label{
	align-content: center;
	border: thin solid #ccc;
	border-radius: 1px;
	transition: 500ms all;
	margin: 5px 5px;
	padding: 5px 10px;
	width: auto;
}

input[class*=darkhpoption]:checked + label {
  	align-content: center;
	background-color: #444;
	border: thin solid #ccc;
	border-radius: 1px;
	transition: 500ms all;
}

input[class*=pooloption] + label{
	align-content: center;
	border: solid thin #ccc;
	border-radius: 3px;
	transition: 500ms all;
	padding: 5px 30px;
}

input[class*=pooloption]:checked + label {
	border: solid thin #ffd100;
	border-radius: 3px;
	background-color: #ffd100;
}



input[class*=darkpooloption] + label{
	align-content: center;
	border: solid thin #ccc;
	border-radius: 3px;
	transition: 500ms all;
	padding: 5px 30px;
}

input[class*=darkpooloption]:checked + label {
	border: solid thin #ccc;
	border-radius: 3px;
	background-color: #444;
}

/*Result box design*/
.resultbox{
	max-width: 80%;
	padding: 20px;
	margin-bottom: 25px;
}
 
.btn_switch{
	font-size: small;
	font-color: #CCC;
	padding: 2px 10px;
	border: thin solid #CCC;
	border-radius: 10px;
	background-color: #fff;
}

.btn_switch:hover{
	font-size: small;
	padding: 2px 10px;
	border: thin solid #CCC;
	border-radius: 10px;
	background-color: #CCC;
}