:root {
    --loginColor_submit: var(--appColor_blue1);
    --loginColor_submit_hov: var(--appColor_blue1_hov);
    --loginColor_option_underline: var(--appColor_blue1);
  }
  
  
          
        
        body { font-family: Assistant, sans serif; background-color:#F7F7F7; }
        input { font-family: Assistant, sans serif; }
        
        #backgroundTop {
          position:fixed; width:100%; height:0px; top:0; left:0; background-color:#F7F7F7;
        }
        
        
        .loginCard {
          margin:auto; margin-top:90px; padding: 30px 20px; position:relative; text-align:center;
          width:25%; min-width:270px; max-width:330px; height:330px; border: 0px solid black; background-color:white; font-size:16px; font-weight:600;
          box-shadow: 1px 2px 4px rgba(0,0,0,0.5);
        }
        #registerCard { height:480px; }
        .loginCard input { width:70%;  }
        .loginCard input[type="password"] { margin-top:28px; }
        .loginCard #usernameCheckmark { height:18px; position:absolute; right:38; visibility:hidden; }
                
                  .loginCard input[type="email"] { margin-top:28px; }
                
        
        #logoImage_container {
          width:75%; margin:auto; cursor:pointer;
        }
        #logoImage {
          border-radius:50%; box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.6); position:absolute; margin:auto; left:0; right:0; top:-40px;
          z-index:1;
        }
        #logoImage:hover { box-shadow:none; filter:grayscale(1); }
        #logoImage:hover + #backButton { transform: rotate(-180deg) translateX(70px); transition: transform .4s; }
        
        #backButton {
          vertical-align:top; transform:rotate(-180deg); position:absolute; margin:auto; left:0; right:0; top:-20px;
          z-index:0;
        }
        
        .loginForm {
          margin-top:100px; margin-left:auto; margin-right:auto; font-size:16px; font-weight:600;
        }
        .loginForm input {
          font-size:15px; font-weight:400;
          border: 0px solid rgba(0,0,0,0.0); border-bottom: 1px solid rgba(0,0,0,0.5); border-radius:0;
          background-color:white; outline:none;
        }
        
        .loginSubmit {
          font-size:15px; font-weight:400;
          margin-top:33px; padding:5px; border: 0px solid black; color:white; background-color:var(--loginColor_submit); width:70%; cursor:pointer;
          -webkit-transition: width .3s;
          transition: width .3s;
        }
        .loginSubmit:hover { color:white; background-color:var(--loginColor_submit_hov); width:76%; } 
        

        #loginForgotPassword {
          position:absolute; bottom:15; right:15; width:125px; padding-bottom:3px; 
          background-color:rgba(0,0,0,0.0); border:0; border-bottom: 2px solid rgba(0,0,0,0.2); font-size:13px; cursor:pointer;
          -webkit-transition: width 2s;
          transition: width 1s;
        }
        #loginForgotPassword:hover { width:135px; border-bottom: 2px solid var(--loginColor_option_underline); }
        
        
        #loginSignUp {
          position:absolute; bottom:15; left:15; width:110px; padding-bottom:3px; 
          background-color:rgba(0,0,0,0.0); border:0; border-bottom: 2px solid rgba(0,0,0,0.2); font-size:13px; cursor:pointer;
          -webkit-transition: width 2s; 
          transition: width 1s;
        }
        #loginSignUp:hover { width:120px; border-bottom: 2px solid var(--loginColor_option_underline); }
        
        
        
        #invalidCredsMessage {
          font-size:12px; font-weight:600; color:#ea2c2c; margin-top:14px; display:block; 
        }
        
        
        
        #inviteCode {
          width:60%; margin-top:28px; margin-bottom:10px;
        }
        
        #invite_email, #invite_note { border: 1px solid var(--appColor_green1); outline:none; background-color:rgba(0,0,0,0); font-size:18px; padding: 4 8; }
        #button_requestInvite { font-size:16px; margin:auto; background-color:var(--appColor_blue1); color:white; border:0px; border-radius:4px; padding: 12px 18px; }
        #button_requestInvite:hover { background-color:var(--appColor_green3); color:black;  }
        #invite_loadStatus { font-size:18px; font-weight:600; display:none; }