* {box-sizing:border-box;}

html {height:100%;}
body {background-color:#2b2b2b; height:100%; padding:.25rem; transition:.25s;}

div#container {background-color:#ffffff06; color:#e5b00d; max-width:1200px; width:100%; height:100%; padding:.75rem; /*border-radius:.35rem;*/ margin:0 auto; transition:.25s;}
div#container {display:flex; flex-direction:column; /*flex-wrap:wrap;*/}

div#container section#head {text-align:center; padding-bottom:.5rem; flex:0 1 auto;}

div#container section#body {flex:1 1 auto; display:flex; flex-direction:row;}

div#container section#body div.inputGroup {flex:0 1 auto; padding-bottom:.75rem; opacity:.5;}
div#container section#body div.inputGroup.active {opacity:1;}
div#container section#body div#noteSelector {display:flex; flex-direction:column;}
div#container section#body div#noteEditor {display:flex; flex-direction:column;}

div#container section#body div.inputGroup div.row {flex:0 1 auto;}
div#container section#body div.inputGroup div.row.fill {flex:1 1 auto; padding:.5rem 0;}
div#container section#body div.inputGroup div.button-row div.l {padding-right:.25rem;}
div#container section#body div.inputGroup div.button-row div.m {padding-right:.25rem; padding-left:.25rem;}
div#container section#body div.inputGroup div.button-row div.r {padding-left:.25rem;}
div#container section#body div.inputGroup div.button-row button {border:1px solid #888; background-color:#fffb; font-weight:600; padding:.25rem .5rem; width:100%; border-radius:.35rem; font-size:14px;}
div#container section#body div.inputGroup div.button-row button i.fa {font-size:1.25rem; opacity:.75; /*transition:.25s;*/}
div#container section#body div.inputGroup div.button-row button span.caption {margin-left:.1rem; position:relative; top:-1px; /*max-width:100%; transition:.25s;*/}

div#container section#body div#noteSelector div#rowA2 select#chooser {height:100%; background-color:#fffd; border:0 none; width:100%; border-radius:.35rem;}
div#container section#body div#noteSelector div#rowA2 select#chooser {padding:.25rem 0; font-size:14px;}
div#container section#body div#noteSelector div#rowA2 select#chooser option {padding:.25rem .5rem; border-radius:.35rem;}

div#container section#body div#noteEditor .entryData {background-color:#fffd; width:100%; border-radius:.35rem; border:0 none; font-size:14px;}
div#container section#body div#noteEditor input.entryData {height:32.5px; padding:.2rem .75rem;}
div#container section#body div#noteEditor textarea.entryData {height:100%; padding:2.5rem .75rem .5rem; resize:none;}
div#container section#body div#noteEditor label#noteDate {position:absolute; top:2.25rem; top:1.25rem; left:0; width:100%; margin-bottom:0;}
div#container section#body div#noteEditor label#noteDate {text-align:center; font-weight:100; color:#0008; padding:.1rem; font-size:12px; user-select:none;}




/* mobile (xs) */
@media screen and (max-width:575px) {
	div#container {border-radius:0;}
	div#container section#body {flex-direction:column;}
	div#container section#body div.inputGroup {width:100%; height:50%;}
	div#container section#body div#noteSelector {margin-bottom:.5rem;}
	div#container section#body div#noteSelector div#rowA2 select#chooser {/*height:auto;*/}
	div#container section#body div#noteEditor {}
}

/* tablet (sm) */
@media screen and (min-width:576px) and (max-width:767px) {
	div#container section#body div.inputGroup div.button-row button span.caption {/*display:none; max-width:0; height:0; opacity:0;*/}
}

/* not mobile (sm,md,lg,xl) */
@media screen and (min-width:576px) {
	div#container section#body div.inputGroup {display:flex; flex-direction:column; width:50%; height:100%;}
	div#container section#body div#noteSelector {padding-right:.25rem;}
	div#container section#body div#noteEditor {padding-left:.25rem;}

}