body { margin: 0; padding: 0px 0 0 0; font-family: 'Roboto-Regular'; font-size: 16px; }
* { box-sizing: border-box; }

#topbar { display: flex; justify-content: center; padding: 20px 0; box-shadow: 0 0 10px #d4d4d4; position: sticky; top: 0; background-color: #ffffff; }
#topbar img { height: 70px; }
.playground { display: flex; justify-content: center; }
.container { width: 900px; max-width: 98%; display: flex; flex-direction: column; padding: 50px 0; }
.container h1 { text-align: center; font-family: 'ProductSans-Bold'; font-size: 38px; margin: 0 0 20px 0; }
.container p { font-size: 18px; line-height: 28px; }
.container p.description { font-family: 'ProductSans-Regular'; }
ul { margin: 0 0 0 20px; padding: 0; }
li { padding-bottom: 20px; line-height: 25px; }
.button-set { padding: 50px 0; display: flex; justify-content: center; align-items: center; }
.button-set.col { flex-direction: column; gap: 15px; }
.button-set.toppadding { padding: 15px 0 0 0; }
.button-set.sb { justify-content: space-between;}
.button-set.fe { justify-content: flex-end;}
a.btn:link, a.btn:visited { display: flex; text-decoration: none; padding: 12px 35px; border-radius: 35px; text-transform: uppercase; font-family: 'ProductSans-Regular'; letter-spacing: 1px; }
a.btn.blue { background-color: #1967d2; color: #ffffff; }
a.btn span { display: flex; }
a.btn img { display: none; }
a.btn.action img { display: flex; }
a.btn.action span { display: none; }
a.brand:link, a.brand:visited { text-decoration: none; font-size: 12px; color: #242424; transition: all .5s; }
a.brand:hover { text-decoration: none; font-size: 12px; color: #cc0001; }
a.brand span { color: #cc0001; }
a.brand:hover span { color: #242424; }
a.brand.absolute { position: absolute; bottom: 20px; left: 20px; }

.popup-container { position: fixed; display: flex; top: 0; right: 0; bottom: 0; left: 0; justify-content: center; align-items: center; display: none; }
.popup-container.show { display: flex; }
.popup-container .shadow { position: absolute; display: flex; top: 0; right: 0; bottom: 0; left: 0; background-color: #ffffff; opacity: .8; }
.popup-container .content { width: 650px; background-color: #ffffff; position: relative; padding: 55px 35px 35px 35px; border-radius: 10px; box-shadow: 0 0 15px #cccccc; }
.popup-container .content a.close-btn { position: absolute; right: 10px; top: 10px;  }
.popup-container .content a.close-btn i { color: #242424; }

form { display: flex; flex-direction: column; }
form .field-row { display: flex; gap: 15px; margin-bottom: 20px; }
form .field-row .ufield { display: flex; flex-direction: column; gap: 10px; }
form .field-row .ufield input { padding: 12px 15px; border-radius: 4px; border: #d4d4d4 1.5px solid; font-family: 'ProductSans-Regular'; font-size: 16px; }
form .field-row .ufield.error input { border: #cc0001 1.5px solid; outline: none; }
form .field-row .ufield span { font-size: 12px; color: #999999; }
form .field-row .ufield span.error { display: none; color: #cc0001; }
form .field-row .ufield.error span.error { display: flex; }
form .field-row .ufield label span { color: #cc0001; padding-left: 5px; font-family: 'ProductSans-Medium'; font-size: 16px;  }
form .field-row .ufield label { font-family: 'ProductSans-Medium'; font-size: 16px;  }
form .field-row .ufield .ucheck label { font-family: 'ProductSans-Regular'; font-size: 14px;  }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }

#_success { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; }
#_success img { height: 150px; }
#_success p { text-align: center; line-height: 26px; }

.ucheck { display: flex; flex-direction: row; gap: 10px; font-size: 13px; line-height: 20px; }
.ucheck label { cursor: pointer; }
.ucheck.error label { color: #cc0001; }
.ucheck i { color: #1967d2; }
.ucheck i.selected { display: none; }
.ucheck i.unselected { display: flex; }
.ucheck.error i.unselected { color: #cc0001; }
.ucheck.checked i.selected { display: flex; }
.ucheck.checked i.unselected { display: none; }