html{
    height: 100%;
}
body
{
    height: 100%;
    background-color: transparent!important;

    font-family: 'Poppins'!important;
}

h1, h4, .form-element{
    color: #e0e0e0;
}
.center-wrapper{
    display: flex;
    justify-content: center;    /* horizontal centering */
    align-items: center;        /* vertical centering */
    min-height: 100vh;          /* ensure it fills the screen height */
    padding: 1rem;              /* optional: avoid edge clipping on small screens */
    box-sizing: border-box;
}
a{
    color: #F72585!important;
}

a:hover
{
 color: #a930c1!important;
}

h2, p {
    color: #a0a0a0!important;
}
h1
{
    font-size: 24px;
    letter-spacing: 1px;
    font-weight: 600;
    color: #a930c1;

}

h2{
    font-size: 20px;
    color: #a930c1;
    letter-spacing: 1px;
}

h4
{
    font-size: 18px;
}

.Header{
    height: 100%;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background: #2a2a2a !important;
    -webkit-box-shadow: 0 0 0px 1000px #2a2a2a inset !important;
    color: #e0e0e0 !important;
    -webkit-text-fill-color: #ffffff !important;
}

input[type="password"], input[type="email"], input[type="text"] {
    width: 580px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 48px;
    padding: 24px;
    background-color: #2a2a2a;
    font-size: 24px;
    font-weight: 100;
    border-radius: 8px;
    font-family: 'Poppins'!important;
}

.content-wrapper{
    max-width: fit-content;
    margin: 36px auto;
    /* transform: translate(-50%, -50%); */
    background-color: rgba(18, 18, 18, 0.8);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(169, 48, 193, 0.6);
    height: fit-content;
}


fieldset
{
    width: 100%;
    margin: auto;
    border: transparent;
}

.select-element
{
    height: 34px;
}
legend
{
    color: #a0a0a0;
    padding: 5px 0;
    font-size: 16px;
}


.field-label
{
    color: #a0a0a0;
    padding: 5px 0;
    font-size: 20px;
    margin: 12px 0;
}



.field-label:hover
{
    color: #F72585;
}

.showMore{
    display:block;  
    cursor: pointer;
    
  }
  .showMore + input{
    display:none;
    transition: opacity 1s ease-out;
    opacity: 0;
  }
  .showMore + input + *{
    display:none;
    transition: opacity 1s ease-out;
    opacity: 0;
  }
  .showMore + input:checked + *{
    display:block;
    transition: ease-in .8s;
    opacity: 1;
      
  }

.logo-container
{
    text-align: left;
    padding: 24px;
    padding-bottom: 0;
    /* min-width: 480px; */
}


.logo
{
    /* height: 100px;
     */
     width: 200px;
}

.form-element
{
    display: block;
    width: 580px;
    border-radius: 4px;
    border-color: transparent;
    margin: 8px 0;
}

.form-submit
{
    font-size: 16px;
    padding: 8px;
    font-weight: bold;
    color: #a930c1;
    border: solid 1px #a930c1;
    background: #2a2a2a;
    margin: 8px 0px;
    height: 48px;
    width: 581px;

    font-family: 'Poppins'!important;

    
}

.forgot-submit{
    margin: 18px auto;
}
.logo-disp
{
    max-width: 200px;
    padding: 15px 0;
    position: relative;
    z-index: 100;
    margin: auto;
    margin-right: 0;
}

.file-input
{
    max-height: 48px;
    width: fit-content;
}

input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #006a3d;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
  }
  
  input[type=file]::file-selector-button:hover {
    background: #a930c1;
  }

  .message
  {
    text-align: left;
    color: #e0e0e0!important;
    margin: auto 0;
    max-width: 580px;
  }


  /* input:focus, input:not(:placeholder-shown) {
    background-color: white;
} */


.right-wrapper
{

    margin: auto;
}

i
{
    color: #c1c1c1;
}

i:hover{
    color: #F72585;
}

.form-submit:hover{
    color: #F72585;
    border: solid 1px #F72585;
}



.form-container
{
    width: fit-content;
    margin: auto 0;
}