.div_main > div {align-content: flex-start;}.div1.c{display: block;}
.pagecontent{
	margin: auto;
}
.sup {
  -webkit-font-feature-settings: "ordn";
  -moz-font-feature-settings: "ordn";
  font-feature-settings: "ordn";
  font-family: Calibri;
}
h3 {font-size: 18px;}
html {
    scroll-behavior: smooth;
}
#btn, .info_btn a {
  cursor: pointer;
  margin: 0 5px;
  background: #896a4c;
  padding: 3px 10px;
  border: 0;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
}
#btn {
	background: #c60;
	font-size:20px;
}
fieldset {
	border: 0;
	padding: 5px 15px 20px;
	background: #fff;
	border-radius: 20px;
	width: 100%;
}
select.h {
	display: none;
	height: 34px !important;
	width: 1px !important;
	position: relative !important;
	opacity: 0;
}
ol li p strong a {
	font-size: 20px;
	margin: 40px 5px 20px 0;
	display: block;
}
section.main {
	width: 100%;
	gap: 10px;
	display: flex;
	flex-wrap: wrap;
}
.select2-container--classic .select2-results > .select2-results__options {max-height: fit-content !important;}
calculation p {
	margin: 0;
  padding: 3px;
  display: block !important;
  }
calculation, calculation p {
	font-size: small;
	padding: 0 25px 10px;
	align-items: center;
	align-content: center;
	display: flex;
	justify-content: center;
}
calculator {
	background: #e9cea4;
	padding: 20px;
	border-radius: 20px;
	display: block;
	margin: 5px 0 20px 0;
}

fieldset #Custom_Settings {
	width:auto;
	border-radius: 0 0 20px 20px;
	margin: 0;
}
#Custom_Settings {
	transition: all 1s ease; 
	display: flex;
	overflow: hidden;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 15px;
	padding-left: 20px;
	padding-right: 20px;
	background: #d4ffd4;
}
#Custom_Settings div, .with_wrap div {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 3px;
}
#Custom_Settings div h3 span.info_btn a,
#Custom_Settings div .tocenter span > .select2-container--classic .select2-selection--single .select2-selection__arrow{
	background:#8cb78c !important;		
} 
#Custom_Settings div span input, 
#Custom_Settings div .tocenter  span span .select2-container--classic, 
#Custom_Settings div .tocenter .select2-selection--single{
	border: 2px solid #63AC63 !important;
}
.tocenter span > .select2-container--classic .select2-selection--single .select2-selection__arrow b {
	border-color: #fff transparent transparent transparent;
}
#Custom_Settings div h3{
	font-size: 16px;
	color: black;
}
#Custom_Settings div h3, .with_wrap div h3{
	display: flex;
	align-items: center;
	margin: 5px 0;
	padding: 0;
}
.info_btn.last {
	margin: 7px 6px 0 10px;
	display: block;
}
.UI_subnav {display: none;}
.header {font-size: 24px;
  color: #654F39;
  margin: 0 auto 15px;
  line-height: 1.4;
  max-width: 80%;
  text-align: center;
}
.total {flex-wrap:wrap;}

.div_main {
  display: grid;
  font-size: smaller;
  line-height: 1.2;
}
.div_row > :nth-child(8n) {  
	justify-content: flex-end !important;
}

.selectable.div_row:hover {
	background-color: #547c54;
	color: white;
	transition: 0.4s;
}
.div_row.no_highlight:hover {
	background: initial !important;
	cursor: initial;
}
.div_row.no_highlight2,
.div_row.no_highlight2:hover {
	background: #d4ffd4;
	cursor: initial;
}
.div_row.no_highlight3,
.div_row.no_highlight3:hover {
	background: #d4ffd4;
	cursor: initial;
}
.div_row {
	display: grid; 
	grid-template-columns: 3.5fr 25px 28px 53px 37px 37px 50px 1.2fr; 
	cursor: pointer;
}
.highlight {
	cursor: pointer;
	background: #d4ffd4;
}
.dropdownholder div.block {display: none !important;}
@media screen and (max-width: 630px) {
	.div_row {
	  display: grid;
	  grid-template-columns: 3.5fr 25px 28px 53px 50px 1.2fr; 
	}
	.div1.c.vertical-text.hide,
	.div1.c.hide {
		display: none !important;
	}
}

.dropdownholder div.tocenter {
	transition:.2s;		
}
@media screen and (max-width: 550px) {
	.div_row {
	  display: grid;
	  grid-template-columns: 3.5fr 28px 53px 50px 1.3fr; 
	}
	.div1.c.vertical-text.hide2,
	.div1.c.hide2 {
		display: none !important;
	}
	calculator {
		margin: 0 -13px 0 -13px;
		padding: 15px 5px 15px 5px;
	}
	.dropdownholder {
		display: block !important;
		width: 100%;
		height: 50px;
	}
	.dropdownholder div.toblock {
		display: block !important;
		width: 100%;
	}
	.dropdownholder div.tocenter {
		display: block !important;
		position:absolute;
		margin:auto;
		width: calc(100% - 20%);
		left: 10%;
	}
}

@media screen and (max-width: 500px) {
	.div_row {
	  display: grid;
	  grid-template-columns: 3.5fr 28px 53px 1.3fr; 
	}
	.div1.c.vertical-text.hide3,
	.div1.c.hide3 {
		display: none !important;
	}
}
.highlight div.div1.c.h {
	background: initial;
}
.div_row > div {
  padding: 1px 2px;
  border-bottom: 1px solid #896a4c;
  font-size: small;
  align-content: center;
}
.div1.mb {display: flex;justify-content: space-between;flex-wrap: wrap;}
.div1.mb span {padding-right: 5px;}
.div1.c.h {
	background: #de7f0040;
}
.div1.c {
	justify-content: center;
	display: flex;
	word-wrap: anywhere;
	border-left: 1px solid #896a4c;
	align-items: center;
}
.c {
	text-align: center;
	align-content: center;
	max-height: 120px;
	text-align: left;
	line-height: initial;
}
.vertical-text {
	writing-mode: sideways-lr; 
	justify-content: left !important;
	align-content: center !important;
	align-items: center;
	padding-bottom: 5px !important;
}
.step {color: #c5925f;}
.step_holder {
	display: flex;
	flex-wrap: wrap;
  gap: 5px;
  padding-bottom: 8px;
}
.math {
	text-align: center;
	padding: 15px;
	background: #e9cea47a;
	border-radius: 5.2px;
	color: black;
	margin-top: 10px;
	margin-bottom: 40px;
	margin-right: 20px;
	margin-left: 20px;
}
.time{
	display:flex;align-items: center;
	flex-wrap: wrap;
}
.tocenter.frames_per_second {width: 200px}
.tocenter.pixel_count {width: 360px}
.tocenter.VideoCodec_select {width: 330px}
.tocenter.ColorChannels {width: 320px}
.tocenter.bit_rate {width: 410px;}
.tocenter.chroma_subsampling {width: 360px;}

@media only screen and (max-width: 460px) {
	.time{
	  justify-content: right;
	  width: min-content;
	}
	.time span {
		width: 130px;
		justify-content: space-between;
	}
	.math {
		margin: 10px 5px !important;
		padding: 10px 5px !important;
	}
	p {
		font-size: 16px !important;
		padding: 0 5px 10px !important;
	}
	.dropdownholder div.tocenter {
		width: calc(100% - 8%);
		left: 4%;
	}
  
}
.selected_highlight {
	background: #d4ffd4;
}
#RunningTime,
#FrameRate,
#FrameSize,
#VideoCodec,
#Bit_rate,
#ColorChannels,
#ChromaSubsampling,
#CodecCompression,
#ColorDepth {
  scroll-margin-top: 2em; /* or however much offset you want */
}

@keyframes flashBackground {
  0%, 100% { background-color: #d4ffd4; } 
  6%      { background-color: #547c5488; }
}

.flash {
  animation: flashBackground .6s linear 1;
}