/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
:root{
    --secondary-color-600:#1d1b31;
    --secondary-color-500:#11101D;
    --secondary-color-400:#1d1b31;
    --secondary-color-300:#302d52;

    --success-color: rgb(20, 186, 20);
    --warning-color: rgb(240, 174, 22);
    --error-color: rgb(206, 54, 40);


    --secondary-text: #edaa24;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins" , sans-serif;
}
body,.container{
    overflow-x: hidden;
    background-color: #efeff6;
    min-height: 100vh;
}
.center{
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.tx-secondary{
    color: var(--secondary-text) !important;
}
.w-100{
    width: 100%;
}
.mt-1{
    margin-top: 1rem;
}
.login-card{
    padding: 24px ;
    border-radius: 12px;
    background-color: var(--secondary-color-500);
    color: #fff;
    width: 400px;
}
.login-card .title{
    color: var(--text-light) !important;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
}
.login-card .error{
    margin-top: 6px;
    border-radius: 6px;
    background-color: var(--error-color);
    width: 100%;
    padding: 6px;
}
.tx-center{
    text-align: center;
}
.login-form a{
    text-decoration: none;
    color: var(--accent-color);
    font-weight: bold;
}
.login-form .form-group{
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}
.login-form .form-group label{
    margin-bottom: 4px;
}
.login-form .form-group input ,.login-form .form-group input:valid{
    height: 50px;
    background-color: #ffffff;
    border: solid 1px var(--accent-color) ;
    outline: none;
    border-radius: 12px !important;
    padding: 6px 12px;
}
.login-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color:var(--success-color) !important;
    color: #fff;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s !important;
    border: none !important;
}
.login-button:hover{
    background-color: rgb(141, 226, 141) !important;
}
.login-container{
    padding: 24px ;
    border-radius: 12px;
    background-color: var(--secondary-color-500);
    color: #fff;
    width: 400px;
}
.login-container .form-group{
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
}
.login-container .form-group input{
    height: 40px;
    background-color: var(--secondary-color-400);
    border: none;
    border-radius: 12px;
    color: #fff;
    padding: 6px;
}
.login-container .form-title{
    text-align: center;
    width: 100%;
    font-size: 1.5rem;
    font-weight: bold;
}
.btn{
    outline: none;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 6px 12px;
    font-weight: 500;
}
.btn-success{
    color: white;
    background-color: rgb(58, 184, 23);
    transition: 0.1s ease-in all;
}
.btn-success:hover{
    background-color:rgb(48, 151, 20);
}