body {
/*	max-height: 100vh !important;*/
overflow: scroll; 
}

@media print {
div#details_page {
        display: inline !important;
    }
}


::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

* {
  -ms-overflow-style: none !important;
}

.row-height{
  height: 100vh !important;
  text-align: left;
}

.container-fluid {
    overflow: hidden;
    height: 90vh;
    padding-top: 50px;
}


div#header {
	position: sticky;
	top: 0;
	z-index: 9999;
	height: 5em;
}
div#header_native {
	background-color: none;
	height: 130px;
}

/*Filter section*/
	/*Checkboxes*/
	.filter_chx_label {
		/*display: block;*/
	}
	input.filter_chx {
		margin-left: 10px;
	}
	legend#characteristics_chxbox, legend#filter_characteristics, legend#fuels_chxbox {
    margin: 0px;
	}

	legend {
		font-size: 1em
	}
	fieldset#filter_characteristics, fieldset#filter_characteristics {
		text-align: center;
	}

	label.filter_chx_label {
		font-size: 0.8vw;;
	 }

	 input[type=checkbox] + span {
    	border-style: solid;
    	padding: 5px;
    	margin: 5px;
    	border-radius: 5px;
	}
	 input[type=checkbox]:checked + span {
	 	background: #356635;
	 	color: white;
	 	border-style: solid;
    	padding: 5px;
    	margin: 5px;
    	border-radius: 5px;
    	border-color: black;
	 }

	/*Radio button toggles*/
	.switch-field {
		display: flex;
		overflow: hidden;
	}

	.switch-field input {
		position: absolute !important;
		clip: rect(0, 0, 0, 0);
		height: 1px;
		width: 1px;
		border: 0;
		overflow: hidden;
	}

	.switch-field label {
		background-color: #e4e4e4;
		color: rgba(0, 0, 0, 0.6);
		font-size: 14px;
		line-height: 1;
		text-align: center;
		padding: 8px 16px;
		margin-right: -1px;
		border: 1px solid rgba(0, 0, 0, 0.2);
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
		transition: all 0.1s ease-in-out;
	}

	.switch-field label:hover {
		cursor: pointer;
	}

	.switch-field input:checked + label {
		background-color: #003c6f;
		box-shadow: none;
		color: white;
	}

	.switch-field label:first-of-type {
		border-radius: 4px 0 0 4px;
	}

	.switch-field label:last-of-type {
		border-radius: 0 4px 4px 0;
	}

	.switch-field > label {
    	font-size: 0.7vw;
    	width: 33%;
	}

	h5.toggle_label {
	    font-size: 0.8vw;
	    padding: 0px;
	    margin: -10px;
	    font-style: italic;
	}

	h5.toggle_label_header {
	    font-size: 0.6em;
	    padding: 0px;
	    margin: -10px;
	    font-style: italic;
	    font-weight: bolder;
	}

	legend#characteristics_chxbox, legend#fuels_chxbox {
	    text-align: center;
	    font-size: 1em;
	    padding: 0px;
	    margin: 0px;
	}

	.filter_subsection {
	    border-style: solid;
	    text-align: center;
	    padding: 5px;
	    margin: 3px;
	}

	div#filter_div{
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll; 
		padding: 5px;
	    padding-bottom: 30vh;
	    text-align: center;
	    border-style: solid;
	    border-color: lightgray;;
	}

	div#catalog_div{
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll; 
		padding-bottom: 30vh;
	}


/*Overriding CCA CSS*/
	button.btn.btn-info {
	    font-size: 0.8vw;
	    width: 100%;
	    /*background-color: #003c6f;*/
	    color: black;
	    border-radius: 3px;
	}


/*Slider*/
	div#tier_slider_div, div#price_slider_div {
		width: 70%;
		text-align: center;
		margin: auto;
	}

/*Stove cards*/
	.row.stove_card {
	    text-align: center;
	    margin: 5px;
	    /*box-shadow: 7px 7px #255225;*/
	    box-shadow: 7px 7px 3px rgba(37, 82, 37, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	    border-radius: 10px;
	    height: 95%;
	    width: 22vw;
	    border-style: solid;
	    border-color: #0280BF;
	}

	h4.stove_name {
	    padding: 0px !important;
	    text-transform: uppercase;
	    font-size: 1.5vw;
	    margin: 0px;
	    color: #00689C;
	    %margin-bottom: -20px;
	    white-space: nowrap;
	    width: 100%;
	    height: 10%;
	}

	h5.stove_manu {
	    font-size: 0.7em;
	    padding: 0px;
	    margin: 0px;
	    font-style: italic;
    	color: #356635;
    	white-space: nowrap;
    	width: 100%;
    	height: 20%
	}

	.col-med-1.stove-tiers {
	    text-align: center;
	    margin: auto;
	    top: 0px !important;
	    position: relative;
	    margin-top: 7px;
	    height: 100%;
	    width: 30%;
	}

	span.tier_type {
    	text-decoration: underline;
    	font-size: 1vw;
    	font-weight: bolder;
	}

	div#catalog_header_key img {
    height: 50px;
    padding-right:  20px;
    padding-left:  2px;
	}

	div#catalog_header_key {
    text-align: center;
}

	div#tier_key_iwa, div#tier_key_iso {
	  margin: 10px;
    border-style: solid;
    border-radius: 25px;
    padding: 10px;
    text-align: left;
}

	span.icon_key_span {
    display: inline-block !important;
	}

	.row.stove_card .col-med-3.stove_info {
		width: 70%;
		max-height: 100%;
	}

	.col-med-3.stove_info img {
		max-width: 100%;
	    max-height: 100%;
	    object-fit: fill;
	}

	.stove_img_div {
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    max-width: 95%;
	    height: 70%;
	}

	.col-med-1.stove-compare {
	    position: absolute;
	    bottom: 10%;
	    right: 15%;
	}

	.col-med-1.stove-compare button {
	    border-radius: 20px;
	    padding: 5px;
	    font-size: x-small;
	    background-color: green;
	}

/*Tier tables*/
	.divTable{
		width: 90%;
		padding: 0;
		margin: 0;
		height: 90%;
	}
	.divTableRow {
		display: block;
		padding: 0;
		margin: 0;
		height: 17%;
	}
	.divTableHeading {

		display: table-header-group;
		padding: 0;
		margin: 0;
	}
	.divTableCell, .divTableHead {
		display: block;
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}
	.divTableHeading {
		background-color: #EEE;
		display: table-header-group;
		font-weight: bold;
	}
	.divTableFoot {
		background-color: #EEE;
		display: table-footer-group;
		font-weight: bold;
	}
	.divTableBody {
		display: block;
		padding: 0;
		margin: 0;
	}

	.divTableCell.tier_table_icon > img {
	    max-height: 100%;
	    max-width: 35%;
	    display: inline-block;
	}
	span.divTableCell {
	    width: 40%;
	    display: inline-block;
	    font-weight: 900;
    	font-size: 1.4vw;
	}

	.tier_setup.IWA .divTableRow.tier_table_iso {
		display: none;
	}

	.tier_setup.ISO .divTableRow.tier_table_iwa {
		display: none;
	}

	.tier_setup.none {
	    display: none;
	}

	div#catalog_header {
		width: 100%;
		text-align: center;
		margin: auto;
		background-color: #113061;
	}

	#catalog_header > span {
	    font-size: 2vw;
	    color: white;
	    font-weight: bolder;
	}

	.tier_setup.IWA {
    	padding-top: 2vh;
	}

/*Helper divs*/

	/*About section*/
	div#about_cat {
	    position: fixed;
	    top: 20vh;
	    text-align: center;
	    width: 100vw;
	    border-style: solid;
	    border-color: #356635;
	    border-width: 5px;
	    background-color: white;
	    display: none;
	}

	div#about_cat_header {
	    background-color: #356635;
	    height: 10vh;
	}

	div#about_cat_header > h2 {
	    color: white;
	    font-size: 4vw;
	    display: inline-block;
	}

	div#about_cat > p {
    	text-align: left;
    	padding-left: 10px;
    	padding-right: 10px;
	}

	div#about_cat_header_close {
	    float: right;
	    padding: 2.5vh;
	    border-style: solid;
	    font-size: 2vh;
	    font-weight: bolder;
	    color: white;
	}

	button#btn_about_cat {
	    width: 77%;
	    background-color: #F99303;
	    padding: 20px;
	    box-shadow: 3px 3px 3px rgb(37 82 37 / 30%), 0 1px rgb(255 255 255 / 10%);
	    margin-bottom: 5px;
	    border-radius: 3px;
	}

	/*About tier section*/
	div#about_tiers {
	    height: 80vh;
	    position: absolute;
	    top: 20vh;
	    text-align: center;
	    width: 100vw;
	    border-style: solid;
	    border-color: #356635;
	    border-width: 5px;
	    background-color: white;
	    overflow: scroll;
	    display: none;
	}

	div#about_tiers_header {
	    background-color: #356635;
	    height: 10vh;
	}

	div#about_tiers_header > h2 {
	    color: white;
	    font-size: 2vw;
	    display: inline-block;
	}

	div#about_tiers > p {
    	text-align: left;
    	padding-left: 10px;
    	padding-right: 10px;
	}

	div#about_tiers_header_close {
	    float: right;
	    padding: 2.5vh;
	    border-style: solid;
	    font-size: 2vh;
	    font-weight: bolder;
	    color: white;
	}

	button#btn_about_tiers {
	    width: 35%;
	    background-color: #F99303;
	    padding: 20px;
	    box-shadow: 3px 3px 3px rgb(37 82 37 / 30%), 0 1px rgb(255 255 255 / 10%);
	    margin-bottom: 5px;
	    border-radius: 3px;
	}

	div#about_tiers_div {
	    width: 100%;
	    text-align: center;
	    padding-top: 30px;
	}

	/*Details Section*/
	div#details_page {
    	width: 90%;
    	margin: auto;
    	text-align: center;
	}

	div#stove_details_right {
   		 width: 90%;
    	padding-left: 5vw;
	}

	div#details_header {
		width:  100%;
		text-align: center;
    	margin: auto;
    	background-color: #113061;
    	margin-top: 50px;
	}

	div#details_header > span {
	    font-size: 2vw;
	    color: white;
	    font-weight: bolder;
	}

	div#report_info {
    	text-align: center;
    	background-color: #EBF5FA;
    	color: black;
    	font-size: 1.3em;
    	font-style: italic;
	}

	div#stove_details_left {
    	text-align: center;
	}

	div#stove_details_left > img {
	    width: 100%;
	    max-width: 300px;
	}
	
	h4.details_header_text {
    	display: inline;
    	font-size: 1.8vw;
	}

	div.details_tiers_icon > img {
    	width: 90%;
    	text-align: center;
    }

    div#details_tiers_top.iwa > div.details_tiers_icon.iso {
    	display: none;
    }
    div#details_tiers_bottom.iwa >	div.details_tiers_nums.iso {
    	display: none;
    }

    div#details_tiers_middle.iwa >	div.details_tiers_text.iso {
    	display: none;
    }

    div#details_tiers_top.iso >	div.details_tiers_icon.iwa {
    	display: none;
    }

    div#details_tiers_bottom.iso >	div.details_tiers_nums.iwa {
    	display: none;
    }

    div#details_tiers_middle.iso >	div.details_tiers_text.iwa {
    	display: none;
    }

    div#details_tiers_top, div#details_tiers_bottom, div#details_tiers_middle {
    		text-align: center;
    		width: 100vw;
	}

	div.details_tiers_icon, div.details_tiers_nums, div.details_tiers_text {
    	width: 10vw;
    	display: inline-block;
    	font-size: 1vw;
	}

	div#details_tier_current {
    text-align: center;
    font-size: 1.5em;
    width: 100vw;}

	h2#stove_details_name {
		font-size: 2vw;
	}

	button#show_result_details {
		padding: 20px;
		border-radius: 3px;
	}

	div#stove_det_customer, div#stove_det_general {
    background-color: lightgrey;
    margin: 10px;
    padding: 10px;
	}

	div#stove_det_customer > h3, div#stove_det_general > h3 {
    font-size: 2em;
	}

	.stove_det {
    text-align: left;
	}

	.stove_det span {
    padding-left: 10px;
	}

	div#qrcode_master {
    max-width: 20vw !important;
    display: none;
	}

	.stove_det {
    font-weight: bolder;
	}

	.stove_det > span {
    font-weight: normal;
	}

	th.performance_table {
    	width: 20%;
    	text-align: center;
    	font-weight: normal;
	}


	tr.performance_table_first th {
    	font-weight: bolder;
	}

	.testing_info {
	    width: 60vw;
	    text-align: center;
	    margin: auto;
	    background-color: #EBF5FA;
	    font-style: italic;
	}


/*Mobile friendly elements*/
@media only screen and (max-width: 850px) {
	.switch-field  {
	    display: block; 
	    overflow: hidden;
	    width: 100%;
	}
	.switch-field  > label {
	    display: block; 
	    overflow: hidden;
	    width: 100%;
	    font-size: 3vw;
	}

	h5.toggle_label {
		font-size: 2vw;
	}

	button.btn.btn-info {
    	font-size: 2vw;
    	border-radius: 3px;
	}


}


div#new_win_note {
    position: fixed;
    top: 20vh;
    text-align: center;
    width: 100vw;
    border-style: solid;
    border-color: #356635;
    border-width: 5px;
    background-color: white;
    margin: auto;
    display: none;
    border-radius: 25px;
}


span.pagination_btn {
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin: auto;
    text-align: center;
    background-color: #F99303;
    display: inline-block;
    border-radius: 10px;
    width: 100px;
    font-weight: bolder;
    margin: 20px;}

div#pagination_div {
    width: 100%;
    text-align: center;
}


/*Map setting*/
#map {
	height: 350px;
	width: 700px;
	margin: auto;
}


/*Error reporting*/
div#error_reporting {
    display: none;
    width: 50vw;
    margin: auto;
    position: relative;
    bottom: 50vh;
    background-color: lightblue;
    padding: 50px;
    text-align: center; 
}

button#error_report_btn {
    position: relative;
    bottom: 0px;
    float: right;
    margin-top: 30px;
    border-radius: 3px;
}

.js-plotly-plot .plotly, .js-plotly-plot .plotly div {
	margin: auto !important;
}

button#hide_filters, button#show_filters {
	display: none;
	position: absolute;
    bottom: 0;
    width: 100vw;
    z-index: 9999;
    border-radius: 3px;
}


@media only screen and (max-width: 600px) {
  .row.stove_card {
  	width: 90vw;
  }

  div#filter_div {
  	display: none;
  }

  span.divTableCell {
    font-size: 1em;
}

h4.stove_name, h5.stove_manu {
	font-size: 2em;
}

span.tier_type {
    font-size: 1em;
}

.details_header_text {
    font-size: 1em !important;
}

.details_tiers_text {
    font-size: 0.5em !important;
}

.details_tiers_nums {
    font-size: 0.5em !important;
    vertical-align: middle;
}

button#btn_about_tiers {
	width: 90vw;
	border-radius: 3px;
}

div#tier_chart {
	display: none;
}
div#iwa_emissions_table, .testing_info, div#iwa_efficiency_table, div#stove_det_data {
	display: none;
}

h2#stove_details_name {
    font-size: 2em;
}

div#catalog_header_key img {
	    height: 30px;
}

button#show_filters{
	display: block;
	border-radius: 3px;
}


label.filter_chx_label {
    font-size: 0.8em;
    padding: 10px;
}

h5.toggle_label {
    font-size: 1em;
}
}

/*Start of hover text*/



/*Start of adding data*/
div#add_stove_floating {
    position: absolute;
    z-index: 9999999;
    bottom: 0px;
    right: 0px;
    background-color: #F99303;
    font-size: 1.4em;
    padding: 4px;
}


div#add_stove {
    margin: auto;
    width: 50vw;
    position: fixed;
    top: 20vh;
    left: 25vw;
    text-align: center;
    background-color: #99D4F2;
    display: none;
}

/*End of adding data*/



div#source_info {
    position: fixed;
    top: 20vh;
    width: 50vw;
    left: 25vw;
    background-color: grey;
    padding: 20px;
    display: none;
}



/*Start of admin portal*/
/*div#stove_det_char, div#stove_det_fuel {
    border-style: solid;
}
*/
div#admin_header {
    width: 100vw;
    color: white;
    background-color: #255225;
    font-size: 2em;
    margin-bottom: 10vh;
}

button#admin {
    font-size: 1.4em;
    padding: 10px;
    background-color: #255225;
    color: white;
}

div#admin_error {
    color: red;
    font-size: 1.2em;
    padding-top: 30px;
    display:none;
}

div#dasboard_header {
    width: 100vw;
    padding: 10px;
    font-size: 1.4em;
    background-color: green;
    color: white;
    text-align: center;
}

.dashboard_ele {
    text-align: center;
}

.dashboard_ele > h3 {
    background-color: black;
    color: white;
}


table#change_table {
            margin: 0 auto;
            border-collapse: collapse;
            border-style: hidden;
            /*Remove all the outside
            borders of the existing table*/
        }
table#change_table td {
    padding: 0.5rem;
    border: 5px solid orange;
}
table#change_table th {
    padding: 0.5rem;
    border: 5px solid ForestGreen;
}

div#change_log {
    height: 50vh;
    overflow: scroll;
}

/*End of admin portal*/