/*loginpage style*/
:root {
    font-size: 16px;
    font-family: 'Open Sans';
    --text-primary: #b6b6b6;
    --text-primary-secondary: #dddddd;
    --text-secondary: #ececec;
    --text-tertiary: #f3f3f3;
    --text-quaternary: #fafafa;
    --bg-primary: #23232e;
    --bg-secondary: #141418;
    --transition-speed: 600ms;
    --transition-speed-box: 600ms;
    --transition-speed-table: calc(var(--transition-speed)/2);
    --transition-speed-inputfield: calc(var(--transition-speed)/4);
    --brand-primary: #ffa3ba;
    --brand-secondary: #8AE1FF;
    --brand-secondary-light: #c5f0ff;
    --text-hover-primary:#003b4f;
    --text-hover-secundary: #005876;
    --text-hover-tertiary: #0093c4;
    --border-primary: 1px Solid lightgray;
    --border-primary-color: lightgray;
    --submit-color-primary: #70ff41;
    --submit-color-primary-secondary: #9cff7c;
    --submit-color-secondary: #baffa3;
    --delete-color-primary: #ff0000;
    --delete-color-secondary: #ff4e4e;
    --cancel-color-primary: #ffa500;
    --cancel-color-secondary: #ffc14e;
    --cancel-color-secondary-secondary: #d6b577;
    --cancel-color-tertiary: #ffd689;
    --cancel-color-quaternary: #ffeac4;
    --cancel-color-quaternary-secondary: #f1e6d2;
    --background-color: white;
    --dropshadow-color: lightgrey;
    --text-color: black;
    --hover-filter-brightness: 95%;
    --scrollbar-track: #d5d5d5;
    --scrollbar-thumb: #c2c2c2;
    font-size: 20px;
    font-family: "open sans";
    -webkit-box-sizing: none;
    box-sizing: none;
}
.login-body {
    width: 100vw;
    height: 100vh;
    -webkit-box-sizing: none;
    box-sizing: none;
    -webkit-box-sizing: unset;
    box-sizing: unset;
}
.login-main {
    margin: 0px;
    padding: 0px;
    color: var(--background-color);
    z-index: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    -webkit-box-sizing: unset;
    box-sizing: unset;
}
.login-form {
    border-radius: 1.5rem;
    width: 80vw;
    height: calc(80vh - 5%);
    padding-bottom: 5%;
    padding-top: 5%;
    padding-left: 1%;
    padding-right: 1%;
    min-width: 300px;
    min-height: 300px;
    background-color: var(--background-color);
    filter: brightness(99%);
    box-shadow: 0 0 14px 0px var(--dropshadow-color);
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-box-sizing: unset;
    box-sizing: unset;
}
.login-form-form {
    height: 90%;
    width: 90%;
    text-align: center;
    color: var(--text-color);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5%;
    scrollbar-width: thin; /*for firefox*/
    scrollbar-color: var(--scrollbar-track) var(--scrollbar-thumb); /*for firefox*/
    -webkit-box-sizing: unset;
    box-sizing: unset;
}
.login-form-form::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}
.login-form-form::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 0.25rem;
}
.login-form-form::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 0.25rem;
}

/*Login page content*/
.login-header {
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    font-family: 'open sans';
    margin: 1rem;
    margin-bottom: 1rem;
    margin-top: 0rem;
}
.inputBox {
    transition: var(--transition-speed-inputfield) ease;
    border-radius: 0rem;
    border: 0px;
    border-bottom: 2px solid var(--dropshadow-color);
    width: 70%;
    text-align: center;
    height: 3rem;
    font-size: 20px;
    margin: 1.5rem;
    margin-left: calc((100% - 70%)/2);
    margin-right: calc((100% - 70%)/2);
}
.inputBox:hover {
    transition: var(--transition-speed-inputfield) ease;
    border-radius: 0rem;
    text-align: center;
}
.inputBox::placeholder {
    transition: var(--transition-speed-inputfield) ease;
    color: var(--text-color);
}
.inputBox:focus::placeholder {
    transition: var(--transition-speed-inputfield) ease;
    color: transparent;
}
.login-button-area{
    margin-top: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
.loginPageBtn {
    margin: 1rem;
    font-size: 18px;
    padding: 1rem;
    border-radius: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
.login-register {
    text-decoration: none;
}
.login-register a {
    transition: var(--transition-speed-inputfield) ease;
    text-decoration: none;
    color: var(--text-hover-tertiary);
}
.login-register a:hover {
    color: var(--text-hover-secundary);
}
.loginBtn {
    background-color: var(--brand-secondary-light);
}
.loginBtn:hover {
    background-color: var(--brand-secondary);
}
.loginBtn:focus {
    background-color: var(--brand-secondary);
}
.resetBtn {
    background-color: var(--cancel-color-quaternary);
}
.resetBtn:hover {
    background-color: var(--cancel-color-tertiary);
}
.resetBtn:focus {
    background-color: var(--cancel-color-tertiary);
}
.login-error {
    border-color: var(--delete-color-secondary);
    margin-bottom: 0rem
}
.error-text {
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    margin-left: calc((100% - 70%)/2);
    margin-right: calc((100% - 70%)/2);
}
.error-text-2 {
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    margin-left: calc((100% - 70%)/2);
    margin-right: calc((100% - 70%)/2);
}

/*per devise config*/
/*for large screens*/
@media screen and (min-width: 1000px) {
    .login-form {
        max-width: 500px;
    }
}

/*for phones*/
@media screen and (max-width: 1000px) {
    .login-header {
        font-size: 80px;
        margin-bottom: 6rem;
    }
    .inputBox {
        font-size: 50px;
        height: 6rem
    }
    .error-text {
        font-size: 40px;
    }
    .error-text-2 {
        font-size: 40px;
    }
    .loginPageBtn {
        margin: 1rem;
        margin-top: 4rem;
        margin-bottom: 4rem;
        font-size: 40px;
        padding: 2rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .login-register {
        font-size: 40px;
    }
}