:root{
    /* --MAIN_COLOR: #3b5998;
    --SUB_COLOR: #3E69C0;
    --BTN_COLOR: #5294e2; */
    

    --MAIN_COLOR: #646468d4;
    --SUB_COLOR: #646468;
    --BTN_COLOR: #323234;
    --TITLE_COLOR: #8b8a8f;
    
    
    --CHECKOUT_PRODUCT_WIDGET_COLOR: #35523ba8;
    --CHECKOUT_PRODUCT_ITEM_WIDGET_COLOR: #b4b4bb4d;
    --OPEN_WIDGET_COLOR: #b4b4bb85;
    --WIDGET_COLOR: #b4b4bb4d;
    --WIDGET_SELECTED_COLOR: rgba(115, 255, 0, 0.85);

    /* --FONT_COLOR: #f0f0f0; */
    --FONT_COLOR: #f0f0f0;

    --ORANGE_PALETTE: #A57F59;
    --GREEN_PALETTE: #7FA559;
    --RED_PALETTE: #c32d2d;
    --YELLOW_PALETTE: #B2B24C;
    --PURPLE_PALETTE: #5959A5;
    --BLUE_PALETTE: #59A5A5;

    --ORANGE_PALETTE_opacity_half: rgba(165, 127, 89, 0.5);
    --GREEN_PALETTE_opacity_half: rgba(127, 165, 89, 0.5);
    --RED_PALETTE_opacity_half: rgba(178, 76, 76, 0.5);
    --YELLOW_PALETTE_opacity_half: rgba(178, 178, 76, 0.5);
    --PURPLE_PALETTE_opacity_half: rgba(89, 89, 165, 0.5);
    --BLUE_PALETTE_opacity_half: rgba(89, 165, 165, 0.5);

}




.btn-default{
   background-color: var(--BTN_COLOR);
   font-size: 1.4em;
   color: white;
   border-radius: 10px;
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

/* 
    Login
 */

#login-container{
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   /* background-color: wheat; */
}
#loginform{
   position: relative;
   width: 500px;
   height: auto;
   padding: 40px 0px 20px 0px;
   background-color: var(--MAIN_COLOR);
   box-shadow: 0px 0px 7px 0px rgba(255, 255, 255); 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-items: center;
   border-radius: 10px;
   z-index: 2;
   border-radius: 20px;
}
#loginform > .header{
   width: 80%;
   font-size: 1.4em;
   padding-left: 10px;
   text-align: left;
}
#loginform > input{
   width: 80%;
   font-size: 1.3em;
   padding: 10px 20px;
   border: none;
   margin: 5px 10px 10px 10px;
   border-radius: 10px;
}
#loginform > input.invalid{
   border: solid 2px var(--RED_PALETTE);
}
#loginform > button{
   width: 80%;
   font-size: 1.4em;
   padding: 10px 20px;
   border: none;
   margin: 10px;
}


#verify-otp-container{
   position: relative;
   width: 100vw;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   display: none;
}
#verify-otp{
   position: relative;
   width: 500px;
   height: auto;
   padding: 40px 0px 20px 0px;
   background-color: var(--MAIN_COLOR);
   box-shadow: 0px 0px 7px 0px rgba(255, 255, 255); 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-items: center;
   border-radius: 10px;
   z-index: 2;
   border-radius: 20px;
}
#verify-otp > .header{
   width: 80%;
   font-size: 1.4em;
   padding-left: 10px;
   text-align: left;
}
#verify-otp > input{
   width: 80%;
   font-size: 1.3em;
   padding: 10px 20px;
   border: none;
   outline: none;
   text-align: center;
   background-color: whitesmoke;
   margin: 5px 10px 10px 10px;
   border-radius: 10px;
}
#verify-otp > button{
   width: 80%;
   font-size: 1.4em;
   padding: 10px 20px;
   border: none;
   margin: 10px;
}



@media (max-width: 480px) {
    
   #loginform{
      min-width: calc(100vw - 40px);
      max-width: calc(100vw - 40px);
      height: auto;
   }
   #verify-otp{
      min-width: calc(100vw - 40px);
      max-width: calc(100vw - 40px);
      height: auto;
   }
}