label{display: flex; align-items: center; justify-content: flex-start;margin-bottom: 1.5rem;}
input[type="checkbox"], input[type="radio"] { opacity: 1; position: relative; height: 20px; width: 25px; }
body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #23242a;flex-direction: column; }
.box { position: relative; width: 380px; height: 480px; border-radius: 8px; background: #1c1c1c; overflow: hidden; }
.box::before{ content: ''; position: absolute; top: -50%; left: -50%; width: 380px; height: 480px; background: linear-gradient(0deg, transparent, #f91a4d, #f91a4d); transform-origin: bottom right; animation: animate 6s linear infinite; }
.box::after{ content: ''; position: absolute; top: -50%; left: -50%; width: 380px; height: 480px; background: linear-gradient(0deg, transparent, #f91a4d, #f91a4d); transform-origin: bottom right; animation: animate 6s linear infinite; animation-delay: -3s; }
@keyframes animate {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
.form { position: absolute; inset: 2px; border-radius: 8px; background: #28292d; z-index: 10; padding: 50px 40px; display: flex; flex-direction: column; }
.inputBox{position: relative;margin-top: 35px;}
.inputBox input { position: relative; width: 100%; padding: 10px 9px 10px; background: transparent; border: none; outline: none; color: #fff; font-size: 1em; letter-spacing: 0.05em; z-index: 10; }
.inputBox span{ position: absolute; left: 0; padding: 10px 10px 10px; font-size: 1em; color: #8f8f8f; pointer-events: none; letter-spacing: 0.05em; transition: 0.5s; }
.inputBox input:valid ~ span, 
.inputBox input:focus ~ span  {color: #f91a4d;transform: translateX(0px) translateY(-34px);font-size: 0.75em;}
.inputBox i { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #f91a4d; border-radius: 4px; transition: 0.5s; pointer-events: none; z-index: 9; }
.inputBox input:valid ~ i, 
.inputBox input:focus ~ i {height: 44px;}
.links {display: flex;justify-content: space-between;}
.links a {margin: 10px 0;font-size: 00.75em;color: #8f8f8f;text-decoration: none;}
.links a:hover,
.links a:nth-child(2){color: #f91a4d;}
.form h2 { text-align: center;}
.refagreementform{padding: 20px; margin: 20px; border-radius: 8px; background: var(--background-color-1); box-shadow: var(--shadow-1);}
.thead h2{text-align: center;font-size: 3rem;}






#username-error, #password2-error, #password-error, #email2-error, #email-error { position: absolute; z-index: 10; background-color: #f44336; color: white; padding: 5px 10px; width: 100%; font-size: 12px; justify-content: center; bottom: 120%; left: 50%; transform: translateX(-50%); border-radius: 6px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); word-wrap: break-word; overflow-wrap: break-word; }
#username-error::after, #password2-error::after, #password-error::after, #email2-error::after, #email-error::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #f44336 transparent transparent transparent; }