:root {
  --color-light: #BBDEFB;
  --color-primary: #2196F3;
  --color-dark: #1876D2;
  --color-accent: #01A9F4;
  --color-correct: #00B11B;
  --color-incorrect: #E00000;
  --color-grey-light: #F5F5F5;
  --color-grey: #BDBDBD;
  --color-grey-dark: #757575;
  --gradient: linear-gradient(102.85deg, #01A9F4 9.87%, #0998E9 48.87%, #1876D2 83.83%);
  --font-family: 'Poppins';
  --font-size: 16px;
  --max-width: 1288px;
  --radius: 0.3rem;
}

html, body { min-height: 100%; width: 100%; font-size: var(--font-size); color: #000; margin: 0; padding: 0; font-size: calc(6px + 0.9vh); }
body { display: flex; flex-direction: column; gap: 0; font-family: var(--font-family); font-weight: 300; }
body *:not(script,style,img) { all: unset; font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit; display: block; box-sizing: border-box; line-height: 1.5em; }
body h1 { font-size: 3.5rem; line-height: 1em; font-weight: 700; }
body h2 { font-size: 3rem; line-height: 1em; font-weight: 600; }
body h3 { font-size: 2rem; line-height: 1em; font-weight: 600; }
body h4 { font-size: 2rem; line-height: 1em; font-weight: 600; }
body h5 { font-size: 1.5rem; line-height: 1em; font-weight: 600; }
body h6 { font-size: 1.25rem; line-height: 1em; font-weight: 600; }
body a { text-decoration: underline; cursor: pointer; }
body b { font-weight: 600; }
body ul, body li { margin: 0; padding: 0; list-style-type: none; }
body a, body b, body span { display: inline-block; }
body [type="checkbox"] { margin: 0.25rem 0; display: inline-block; margin: 0; padding: 0; width: 1.5rem; height: 1.5rem; line-height: 1em; border-radius: var(--radius); cursor: pointer; background: url(images/ico-checkbox-false.svg) no-repeat center center; background-size: contain; }
body [type="checkbox"]:checked { background-image: url(images/ico-checkbox-true.svg) }
body [type="text"],body [type="tel"],body [type="email"] { height: 3rem; padding: 0 1rem; line-height: 1em; box-shadow: inset 0px 0px 1px rgba(0,0,0,0.5); border-radius: var(--radius); display: block; width: 100%; transition: 0.25s; }
body [type="text"]:focus,body [type="tel"]:focus,body [type="email"]:focus { box-shadow: inset 0px 0px 2px var(--color-primary); transform: scale(1.025) }
body label:has(* > .error) { color: var(--color-incorrect); }
body [type="text"].error { box-shadow: inset 0px 0px 2px var(--color-incorrect); color: var(--color-incorrect); }

body > main { display: flex; flex-direction: column; }
body > footer { background: var(--color-grey-light); font-size: 1rem !important; }
body > footer .logo img { height: 3rem; }
body > footer .socialmedia { display: flex; gap: 1rem; justify-content: center;}
body > footer .socialmedia img { width: 2.5rem; height: 2.5rem; }

p:first-child { margin-top: 0; padding-top: 0; }
p:last-child { margin-bottom: 0; padding-bottom: 0; }
.gap-default { gap: 2rem; }
.gap-default-2 { gap: 4rem; }
.line-height-1 { line-height: 1em; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.width { max-width: var(--max-width); margin: auto; padding: 0rem 2rem !important; }
.box { max-width: var(--max-width); margin: auto; padding: 3.25rem 2rem !important; }
.nowrap { white-space: nowrap; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { justify-content: center; align-items: center; }
.flex-1 { flex: 1; }
.btn { height: 3rem; line-height: 3rem; padding: 0 1rem; line-height: 1rem; background: var(--gradient); color: #fff; display: inline-block; border-radius: var(--radius); cursor: pointer; font-weight: 500; text-align: center; transition: 0.25s }
.btn:hover { transform: scale(1.05) }
.btn-w { background: #fff; color: var(--color-primary) }

.mobile .m-flex-column { flex-direction: column; display: flex; }
.mobile .m-gap-default { gap: 2rem; }
.mobile .m-hidden { display: none; }
.mobile .m-text-center { text-align: center; }

.commentBox { all: revert; display: block; font-size: inherit; font-family: inherit;; text-align: center; }
.commentBox > * { all: revert; font-size: inherit; font-family: inherit; padding: 1rem; display: flex; flex-direction: column; gap: 0.2em; border-radius: 0.5rem }
.commentBox > * > * { all: revert; display: block; }

.commentBox > .true { background: #E6EE9C !important; }
.commentBox > .false { background: #FFCDD2 !important; }
.commentBox > .alert { background: #FFE082 !important; }
.commentBox > .help  { background: #CFD8DC !important; }
.commentBox > .info  { background: #B3E5FC !important; }
.commentBox > .error  { background: #E53935 !important; color: #fff !important; opacity: 1; }