:root {
    --toggle-display-2 : none;
    --toggle-display-1 : grid;
}


body {
  background-image: unset ;
  /* background-image: url('../images/login-background.png') ; */
  background-color: var(--primary-color);
  height: 100vh;
  font-family: var(--font-primary);
}


/* box-shadow: inset 4px -1px 10px 4px #636363; */

/* -------------------------------------------------------------------------- */
/* added 11/2/24*/




#password-error-message {
  margin-top: 5px;
  margin-bottom:  20px;
  text-align: center;
  color: red;
}




/* -------------------------------------------------------------------------- */
.MAIN-GRID {
    height:100%;
    display: grid;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: "top" "login" "footer";
    justify-content: center;
    justify-items: center;

    .login-logo {
        display: flex;
        justify-content: center;
        align-content: center;

        .heights-logo-login {
            /* width: min(100%,448px); */
            width: 80%;
            align-content: center;

            .login-logo-image {
                width: 100%;
            }
        }
    }


    .login-block {
        display: grid;
        height: 100%;
        width: 80%;
        /* justify-content: center;  */
        /* align-content: center; */
        justify-self: center;
        justify-items: stretch;
        align-self: center;
        /* justify-content: center; */
    }

    #c-top {
        grid-area: top;
        height:100%;
    }


    #login-main {


        grid-area: login;
        display: flex;
        width: 40rem;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        height: min(800px, 100%);
        align-self: center;

        #login-container {
            height: 100%;
            /* width:60rem; */
            background-image: var(--carbon_fiber);
            background-color: var(--white-tinted);
            border-radius: 5%;
            display: var(--toggle-display-1);
            grid-template-rows: 20% 5% 75%;
    
            .login-input-container {
                height: 100%;
                width: 100%;
                display: grid;



                #login-form{

                    #username{
                        margin-bottom: 1rem;
                    }
                    /* display: flex; */
                }
            }
            
    
            .login-buttons-container {
                width: 100%;
                height: 100%;
                display: grid;
    
                .login-buttons {
                    display: flex;
                    flex-direction: column;
                    row-gap: 2rem;
                    width: 100%;
    
                }
    
            }
        
        }





        /*~ -------------------------------------------------------------------------- */
        #forgot-password-container {
            height: 100%;
            /* width:60rem; */
            background-image: var(--carbon_fiber);
            background-color: var(--white-tinted);
            border-radius: 5%;
            display: var(--toggle-display-2);
            grid-template-rows: 20% 1% 79%;

            sl-input::part(form-control-help-text){
                color: blue;
                font-size:1rem;
                font-style:italic;
            }

            #forgot-password-input-container {
                 grid-template-rows: min-content 1fr 1fr 1fr 10px 1fr 1fr 1fr 1fr 1fr;
                 justify-items: center;
                 align-items: center;
                 grid-template-areas: 
                 "lock"
                 "info"
                 "email"
                 "btn_send_token"
                 "divider"
                 "token_input"
                 "new_password"
                 "retype_new_password"
                 "btn_reset_password"
                 ;
                 sl-input{
                    width: 100%;
                 }
                 sl-avatar {
                    --size: 5rem;
                 }
                 sl-avatar::part(base){
                    background-color:rgb(24, 21, 21) !important;
                    color:rgb(208, 208, 208);
                 }




                #lock-icon {
                    grid-area: lock;
                }
                #information-block {
                    font-size: 2rem;
                    grid-area: info;
                }
                #password-reset-username {
                    grid-area: email;
                }
                #btn-send-password-reset-token {
                    grid-area: btn_send_token;
                }   
                
                #divider{
                    grid-area:divider;
                    width: 80%;
                    align-self: center;
                    justify-self: center;
                    --color: rgb(205, 205, 205);
                }

                #reset-token-input{
                    grid-area:token_input;
                }

                #new-password {
                    grid-area:new_password;
                }

                #retype-new-password{
                    grid-area:retype_new_password;
                }

                #btn-reset-password{
                    grid-area:btn_reset_password;
                }



                
               


            }

            /* grid-template-rows: 1fr 3fr 1fr; */

        }
        /*~ -------------------------------------------------------------------------- */

        
    }



    #c-footer .footer-login {
        grid-area: f4; 
        /* ^ intertwined with other files */
        
        text-align: center;
        color: #dbd8d8;
        font-size: 1.2rem;
    }


}




/* --------------------- */












@media screen and (max-width: 480px) {
  #login-container {
    height: 100vh;
    width: 100vw;
    border-radius: 0px!important;
    grid-template-rows: 30% 50% 20%;


  }

  .MAIN-GRID {
    /* margin: 0 3vw 0 3vw; */
    display: unset;
    height: 100%;

  }

  #login-main{
    height: 100%!important;
    width: 100%!important;
   
  }

  #c-footer {
    
    display: none;
  }

  #c-top {
    display: none;
  }


}





/*~Non structural-----------------------------------------------------------------*/


sl-button::part(base) {
    line-height: 4rem;
    font-size: 1.6rem;
    width: 100%;
}
#button-login{
    width: 100%;
    background-color: var(--warm-light);
    color:grey;
}
.login-buttons{

    sl-button::part(base) {
        color:black;
        font-weight:700;
    background-color: unset;
    box-shadow: var(--elevation-2);
    }
}


sl-button[data-login_ready="1"]::part(base) {
    background-color: #3475a0;
    color:var(--grey1);
}


sl-button[data-login_ready="1"]::part(base):hover {
    background-color: var(--confirm-blue);
}



.login-input-container .or-seperator-block {
width:100%;
height:10px;
margin-left: 0;
/* margin-left: 10%;
margin-bottom: 4rem;
margin-top: 2em; */
display: flex;
justify-content: space-evenly;
align-items: center;
}

.login-input-container .or-seperator-block  .or-text{
font-size: 16px;
color: #cecdcd;
}

.login-input-container .or-seperator-block .or-line{
position: relative;
height:1px;
width: 25%;
background-color: #cecdcd;
/* background-color: #353232; */

}