/* overriding legacy style */
html, body { margin: 0px; height: 100vh; }
ul, p, figure { margin: 0; padding: 0; }
body { background: none !important; }
#body { width: auto !important; margin: 0 !important; }

@font-face { font-family: robotoRegular; src: url(../fonts/Roboto-Regular.ttf); }
@font-face { font-family: robotoBold; src: url(../fonts/Roboto-Bold.ttf); }
@font-face { font-family: robotoBlack; src: url(../fonts/Roboto-Black.ttf); }
@font-face { font-family: robotoLight; src: url(../fonts/Roboto-Light.ttf); }
@font-face { font-family: robotoMedium; src: url(../fonts/Roboto-Medium.ttf); }

#body { display: flex; flex-flow: column; min-height: 100vh; }
#body > *:not(script) { flex-direction: column; justify-content: center; flex: 1 0 auto; }
#body > header, #body > footer, #body > section { font-family: robotoRegular; }
#body > header { background-color: #c22821; height: 9.938rem; max-height: 9.938rem; justify-content: flex-start; }
#body > footer, #body #app-footer { color: #fff; background-color: #333; /*height: 5.625rem; max-height: 5.625rem;*/ flex: 0 0 auto; }
#body > section, #body > form { justify-content: flex-start; margin: 30px 0 40px; }
#body > section, #body > form, #body > div:not(#head) { text-align: center; padding: 0 2.5rem; }
#body > form, #body > div { justify-content: flex-start; font-size: 11px; }
#body > form *, #body > div * { font-family: Lato, 'Font Awesome 5 Free', Arial; }
#body > #head {/* max-height: fit-content; */}

#body .form_box_g { margin-left: 0; }

.f-wrapper { display: flex; margin: 15px 33.75px; flex-flow: row wrap; align-items: center; }
.f-wrapper a { text-decoration: underline; color: #fff !important; }
.f-wrapper > small { max-width: 56rem; font: 12px/20px robotoRegular; letter-spacing: -0.02px; flex: 2; margin-right: 10px; text-align: left; }
.f-wrapper > small > span { letter-spacing: 0px; }
.f-wrapper > picture { margin: 0 0 0 auto; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; flex: 1; }
.f-wrapper > picture > img { width: 124px; height: 56px; }
.f-wrapper > picture > a { margin-left: 30px; }
.f-wrapper > picture > a > img { width: 214px; height: 2.625rem; margin-left: 5px; }

@media all and (max-width: 1250px) {
	#body > section, #body > form, #body > div:not(#head) { padding: 0 45px; }
	.h-wrapper-foot { padding: 0 45px; }
}

@media all and (max-width: 905px) {
	#body > footer { height: auto; max-height: none; }
	.f-wrapper { flex-flow: column-reverse; margin: 20px 33.75px; justify-content: center; align-items: stretch; }
	.f-wrapper > small, .f-wrapper > picture { flex: 1 0 auto; text-align: center; }
	.f-wrapper > small { margin: 0 20px; }
	.f-wrapper > small > span { display: block; margin-top: 10px; }
	.f-wrapper > picture { justify-content: center; margin: 0 0 20px 0; }
}
@media all and (max-width: 768px) {
	.responsive-content {
		overflow-x: auto;
	}
}

@media all and (min-width: 1024px) {
	#body > section, #body > form, #body > div:not(#head) { padding: 0 5rem; }
}

@media all and (min-width: 1280px) {
	#body > section, #body > form, #body > div:not(#head) { padding: 0 8rem; }
}

/* CONVIVENCIA */
#cont select, #popupInner form table select, table.form > tbody > tr > td > select { border: 1px solid rgb(169, 169, 169) !important; }
#cont img, #popupInner table img,  table.form > tbody > tr > td > img { display: inline; }

/* POPUP CONVIVENCIA */
#popupContainer, #popupContainer * {
	box-sizing: unset;
}