@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 700;
   unicode-range: U+0020-0237;
   src: url('../fonts/WojoSansBold.woff2') format('woff2'), url('../fonts/WojoSansBold.woff') format('woff');
}
@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 600;
   unicode-range: U+0020-0237;
   src: url('../fonts/WojoSansDemi.woff2') format('woff2'), url('../fonts/WojoSansDemi.woff') format('woff');
}
@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 500;
   unicode-range: U+0020-0237;
   src: url('../fonts/WojoSansMedium.woff2') format('woff2'), url('../fonts/WojoSansMedium.woff') format('woff');
}
@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 400;
   unicode-range: U+0020-0237;
   src: url('../fonts/WojoSansRegular.woff2') format('woff2'), url('../fonts/WojoSansRegular.woff') format('woff');
}
@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 300;
   unicode-range: U+0020-0237;
   src: url('../fonts/WojoSansLight.woff2') format('woff2'), url('../fonts/WojoSansLight.woff') format('woff');
}
@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 200;
   unicode-range: U+0020-0237;
   src: url('../fonts/WojoSansExtraLight.woff2') format('woff2'), url('../fonts/WojoSansExtraLight.woff') format('woff');
}
html,
body {
   font-size: 16px;
   height: 100%;
}
body {
   font-family: "Wojo Sans", Helvetica, Arial, sans-serif;
   color: var(--body-color);
   background-color: #1A202C;
   font-weight: 400;
   line-height: 1.5;
   margin: 0 auto;
   padding: 0;
   height: 100vh;
   background-image: url(../images/login.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center top;
}
a {
   color: #8898aa;
   display: inline-block;
   text-decoration: none;
   -webkit-transition: all .35s ease;
   -moz-transition: all .35s ease;
   -o-transition: all .35s ease;
   transition: all .35s ease;
   outline: none;
   cursor: pointer;
}
div.wrap {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   width: 100%;
   min-height: 100%;
   padding: 1rem;
}
h2 {
   font-size: 1rem;
   font-weight: 600;
   text-transform: uppercase;
   display: inline-block;
   margin: 2.5rem .5rem .875rem;
}
#avatar {
   margin-bottom: 2rem;
   width:10rem;
}
#formContent {
   background-color: #E2E8F0;
   padding: 0;
   border-radius: .5rem;
   width: 90%;
   max-width: 450px;
   position: relative;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   text-align: center;
}
.formFooter {
   background-color: #E2E8F0;
   border-top: 1px solid #cbd5e0;
   padding: 1.750rem;
   text-align: center;
   border-radius: 0 0 .5rem .5rem;
}
footer {
   text-align: center;
   padding-top: 1rem;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.5);
   margin-top: 2em;
   font-size: .938em;
}
input[type="text"],
input[type="password"] {
   background-color: #fff;
   color: var(--dark-color);
   padding: .875rem 2rem;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: .875rem;
   width: 85%;   outline: none;
   margin: 0.5rem 0;
   -webkit-appearance: none;
   appearance: none;
   border: 0 solid #dee2e6;
   transition: all 0.15s ease 0s;
   border-radius: .250rem;
   font-family: inherit;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
   font-weight: 400;
}
input[type=text]:focus,
input[type="password"]:focus {
   background-color: #fff;
   border: 0 solid #6979f8;
   box-shadow: 0 0 0 3px rgba(66, 153, 225, .5);
}
input[type=text]::placeholder, input[type="password"]::placeholder, ::-webkit-input-placeholder {
   color: #cbd5e0;
}
input:-webkit-autofill {
   box-shadow: 0 0 0 30px #fff inset;
   background-color: #fff;
   -webkit-text-color: #fff;
   color: #fff;
}
input:-webkit-autofill:focus {
   -webkit-text-color: #fff;
   color: #fff;
}
.input-container.error {
   background-color: rgba(248, 0, 0, 0.15);
}
button[name=submit],
button[name=doopass] {
   outline: none;
   border: none;
   color: #FFF;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   text-transform: uppercase;
   font-size: .750rem;
   cursor: pointer;
   box-shadow: 0 10px 30px 0 rgba(105, 121, 248, 0.1);
   border-radius: .250rem;
   user-select: none;
   transition: all .3s ease-in-out;
   font-family: inherit;
   font-weight: 500;
   margin-top: 1.5rem;
   margin-bottom: 2rem;
   padding: 1rem 8rem;
   width: 85%;
   background-color: #1A202C;
   letter-spacing: 2px;
}
button[name=submit]:hover {
   background-color: #1A202C;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
}
button[name=submit]:active,
button[name=doopass]:active {
   background-color: #4a5568;
}
.underlineHover:after {
   display: block;
   left: 0;
   bottom: -10px;
   width: 0;
   height: 2px;
   background-color: #4a5568;
   content: "";
   transition: width 0.2s;
}
.underlineHover:hover {
   color: #4a5568;
}
.underlineHover:hover:after {
   width: 100%;
}
/* == Loading == */
button.loading {
   position: relative;
   cursor: default;
   color: transparent;
   opacity: 1;
   pointer-events: auto;
   -webkit-transition: all 0s linear, opacity 0.1s ease;
   transition: all 0s linear, opacity 0.1s ease;
}
button.loading:before {
   position: absolute;
   content: '';
   top: 50%;
   left: 50%;
   width: 1.5em;
   height: 1.5em;
   border-radius: 500rem;
   transform: translate(-50%, -50%);
   border: 4px solid rgba(0, 0, 0, 0.15);
}
button.loading:after {
   position: absolute;
   content: '';
   top: 50%;
   left: 50%;
   width: 1.5em;
   height: 1.5em;
   margin-left: -.875em;
   margin-top: -.875em;
   -webkit-animation: button-spin 0.6s linear;
   animation: button-spin 0.6s linear;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   border-radius: 500rem;
   border-color: #ffffff transparent transparent;
   border-style: solid;
   border-width: 4px;
   box-shadow: 0 0 0 1px transparent;
}
@-webkit-keyframes button-spin {
   from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}
@keyframes button-spin {
   from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

/* Styles for Sub-Admin Registration Form */
#formContent.wider {
   max-width: 500px;
}

.formRow {
   margin: 0.5rem 0;
}

.wojo.message {
   margin: 1rem;
   padding: 1rem;
   border-radius: 0.25rem;
}

.wojo.error.message {
   background-color: #FEE2E2;
   color: #B91C1C;
   border-left: 4px solid #DC2626;
}

.wojo.success.message {
   background-color: #DCFCE7;
   color: #166534;
   border-left: 4px solid #16A34A;
}

.wojo.message .header {
   font-weight: bold;
   margin-bottom: 0.5rem;
}

/* Hide Message Display */
.hide-all {
   display: none;
}

/* Registration button styling */
.wojo.small.secondary.button {
   background-color: #4a5568;
   color: white;
   padding: 8px 16px;
   border-radius: 4px;
   border: none;
   cursor: pointer;
   font-size: 14px;
   transition: background-color 0.3s ease;
   margin-top: 10px;
   width: auto;
   display: inline-block;
   text-transform: none;
   letter-spacing: normal;
}

.wojo.small.secondary.button:hover {
   background-color: #2d3748;
}

/* Homepage Button Styling */
.homepageBtn {
   display: block;
   width: 85%;
   margin: 0 auto 1.5rem;
   padding: 0.75rem 0;
   background-color: #4a5568;
   color: white;
   border-radius: 0.25rem;
   text-align: center;
   font-size: 0.875rem;
   font-weight: 500;
   transition: all 0.3s ease;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.homepageBtn:hover {
   background-color: #2d3748;
   color: white;
   transform: translateY(-2px);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.homepageBtn .icon {
   margin-right: 0.5rem;
}

/* Ensure responsiveness */
@media screen and (max-width: 480px) {
   .homepageBtn {
      width: 90%;
      padding: 0.625rem 0;
      font-size: 0.8125rem;
   }
   
   button[name=submit],
   button[name=doopass] {
      padding: 0.875rem 1rem;
   }
}