﻿html { scroll-behavior: smooth }  .btnScrollTop { position: fixed; z-index: 1000; bottom: 190px; left: 90vw; font-size: 2em }
.holy-grail-content { background-color: #d9b3; margin-top: 10px !important; padding-bottom: 2rem; border-radius: 25px 25px 25px 25px; margin: auto; position: relative; overflow: hidden; min-height: 32rem }

a.link1 { font-weight: bold; font-style: italic; color: brown; } a.link1 { color: green }
.my_hdr1 { margin: 2rem; letter-spacing: 1px; text-align: justify } .myHdr1_subhdr { width: 53%; display: block; margin: 1.5rem auto; } 
.emph1 { font-size: 1.5rem; font-weight: bold; color: brown; position: relative } .emph2 { font-weight: bold; color: brown; font-family: Georgia }
	
.mgnAuto { display: block; width: 50%; margin: auto; background-color: #f2daf2; box-shadow: 3px 3px 6px #dfbee5, -3px 0 6px #dfbee5 }
.container { display: flex; flex-direction: row } 			
.formTitle { width: 100%; background-color: #dfafe7; padding: 1rem; font-weight: bold; font-size: 1.4rem; letter-spacing: 2px }

.box-0 { background-color: #dfafe7; width: 100%; height: 3rem; } .box-1 { width: 25ch; white-space: nowrap; font-weight: bold; letter-spacing: 1px; margin: 10px 0; padding: 20px 10px 20px 30px }
.box-1, .box-2 { align-items: center; justify-items: center } .box-2 { width: 50% } 			
			
.subHdr1B { font-weight: bold; text-align: center; margin: 2rem 1rem 1rem; color: brown }
.subHdr1  { margin: 0.5rem 3em 0 1.9rem; display: block; text-align: justify } .subHdr2 { margin: 1rem }
.box-2-sub2 { margin: 0 1.5rem } .box-2-sub2 input.Txt { width: 90% !important; } .subHdr3 { padding: 10px 50px 10px 30px; text-align: justify }

.subcontainer2, .subcontainer3 { display: grid; padding: 0 5px } .subcontainer2 { width: 50% } .subcontainer3 { width: 33% } 
.box-1-sub, .box-1-sub1 { font-weight: bold; text-align: center } .box-2-sub { text-align: center } .box-2-sub input.Txt { width: 7rem !important; }

.msgOK, .msgNOK { margin: 1rem 2rem; text-align: justify } .imgCook { width: 25%; margin-top: 2rem }

input.Txt, input.Nmbr, .selectCat, .TxtArea { width: 100%; padding: 15px; background: rgba(255,255,255,0.5); margin: 15px 0 15px 0; 
	border: 5px solid white; box-shadow: inset 0 0 8px  rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); 
	-webkit-box-shadow: inset 0 0 8px  rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); 
	-moz-box-shadow:    inset 0 0 8px  rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); 				
}
.TxtArea { height: 5rem; resize: none } input::placeholder, textarea::placeholder { font-weight: bold; opacity: 0.5; color: brown }
			
#uploadImage { display: none } 
.file-upload-label { width: 100%; border: 5px solid white; box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); letter-spacing: 1px; display: inline-block; padding: 15px 24px; cursor: pointer; background-color: rgba(255,255,255,0.5) }
.icon_dwnload { padding-left: 15px; color: green; float: right } .icon-file { padding-right: 10px } .colorOK { color: green } .colorNOK { color: brown }
.slctExtOK, .slctExtNOK { font-style: italic; padding-top: 10px; text-shadow: 0 0 grey } .slctExtOK { color: green } .slctExtNOK { color: brown }
#slctFileContainer { font-size: 1.1rem; padding-top: 10px; text-align: center } .maxH_0 { display: none; visibility: hidden; max-height: 0 }
			
label.rdoYes { font-weight: bold; color: green } label.rdoNo { font-weight: bold; color: brown }
.btnSubmit { margin: 2rem auto; padding: 20px 60px; background-color: #ddc6ee } .btnSubmit:hover { background-color: antiquewhite } 

@media (max-width: 750px) { .mgnAuto { width: 80% } .box-1 { padding-bottom: 0 !important } .container { flex-direction: column } .box-0, .box-1, .box-2 { flex: 1; width: 70% } }
