@import"https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap";*{padding:0;margin:0;box-sizing:border-box}body{background-color:#dff1e7;position:relative}.App{padding:1rem;background-color:#dff1e7;font-family:Karla,serif;font-optical-sizing:auto;font-weight:400;font-style:normal}.required:after{content:" *";color:green}form{display:grid;padding:1.5rem;background-color:#fff;border-radius:15px}form h1{font-family:Karla,serif;font-optical-sizing:auto;font-weight:700;font-style:normal}label,textarea{border-radius:5px;padding-top:1.5rem;padding-bottom:.5rem}input{padding:.8rem;border-radius:5px}input[type=text],input[type=email]{border:2px solid hsl(186,15%,59%)}input[type=text]:focus,input[type=email]:focus{border-color:#0c7d69;outline:none}span{margin-top:.5rem;color:#d73c3c}input[type=radio],input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;margin:0;cursor:pointer;position:relative;margin:0 .5rem;outline:none}input[type=radio]:before{content:"";display:inline-block;width:15px;height:15px;border:2px gray solid;background-size:cover;position:absolute;top:10%;left:17%;border-radius:50%}input[type=radio]:checked:before{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='21'%20fill='none'%20viewBox='0%200%2020%2021'%3e%3cpath%20fill='%230C7D69'%20d='M10%20.75a9.75%209.75%200%201%200%209.75%209.75A9.76%209.76%200%200%200%2010%20.75Zm0%2018a8.25%208.25%200%201%201%208.25-8.25A8.26%208.26%200%200%201%2010%2018.75Zm5.25-8.25a5.25%205.25%200%201%201-10.499%200%205.25%205.25%200%200%201%2010.499%200Z'/%3e%3c/svg%3e") no-repeat center center;background-size:cover;border:none;width:20px;height:20px}input[type=checkbox]:before{content:"";display:inline-block;width:15px;height:15px;border:2px gray solid;background-size:cover;position:absolute;top:10%;left:17%;border-radius:0}input[type=checkbox]:checked:before{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20fill='none'%20viewBox='0%200%2018%2018'%3e%3cpath%20fill='%230C7D69'%20d='M16.5%200h-15A1.5%201.5%200%200%200%200%201.5v15A1.5%201.5%200%200%200%201.5%2018h15a1.5%201.5%200%200%200%201.5-1.5v-15A1.5%201.5%200%200%200%2016.5%200Zm-3.22%207.28-5.25%205.25a.748.748%200%200%201-1.06%200l-2.25-2.25a.75.75%200%201%201%201.06-1.06l1.72%201.72%204.72-4.72a.751.751%200%200%201%201.06%201.06Z'/%3e%3c/svg%3e") no-repeat center center;background-size:cover;border:none;width:20px;height:20px}.input-text{display:grid;margin-bottom:1.5rem}fieldset{border:none;padding:0}fieldset legend{margin:1rem 0}fieldset label{border:1px gray solid;display:flex;align-items:center;padding:.7rem;margin-bottom:1rem;cursor:pointer}fieldset input[type=radio]:checked+label{background-color:#dff1e7}fieldset label:has(input[type=radio]:checked){background-color:#dff1e7;border:solid 1px hsl(169,82%,27%)}.box{position:relative;display:flex;gap:.5rem;align-items:center;padding:2.2rem 0;cursor:pointer}.box input{margin:0}.checkbox-warn{position:absolute;bottom:11px}input[type=submit]{background-color:#0c7d69;color:#fff;border:none;cursor:pointer}.msg{padding-bottom:0}#submitted-popup{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:1000;min-width:300px;color:#fff}#submitted-popup .popup-content{background-color:#2b4246;padding:20px 30px;border-radius:12px;box-shadow:0 4px 12px #0000001a}#submitted-popup img{margin-right:1rem;position:relative;top:3px}#submitted-popup h1{font-size:1.2rem;margin:1rem 0}@media screen and (min-width: 510px){fieldset div{display:flex;justify-content:space-between;-moz-column-gap:1rem;column-gap:1rem}fieldset div label{width:100%}.input-text{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto auto auto auto;grid-template-areas:"F-title L-title" "F-input L-input" "F-warn L-warn" "eTitle eTitle" "eInput eInput" "eWarn eWarn";-moz-column-gap:1rem;column-gap:1rem}.input-text label[for=Fname]{grid-area:F-title}.input-text .F-name-input{grid-area:F-input}.input-text .Fname-warn{grid-area:F-warn}.input-text label[for=Lname]{grid-area:L-title}.input-text .L-name-input{grid-area:L-input}.input-text .Lname-warn{grid-area:L-warn}.input-text label[for=mail]{grid-area:eTitle}.input-text input[type=email]{grid-area:eInput}.input-text .email-warn{grid-area:eWarn}#submitted-popup{width:-moz-max-content;width:max-content}}
