/***********************************************************\
\                                                           /
\   BKapp stylesheet 'registration.css'                     /
\                                                           /
\   (c) 2023 Apexion B.V. All rights reserved.              /
\                                                           /
\   This software is licensed through a private agreement.  /
\   It is not intended for redestribution.                  /
\                                                           /
\***********************************************************/

/* Contents */

/* 
  01. cleanup
  02. type
  03. colors
  04. atoms
  05. tablet
  06. mobile
*/

/* 01. cleanup */

    *, *:before, *:after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: helvetica;
    }

    .center {
        margin-left: auto;
        margin-right: auto;
    }

    input {
        outline: none;
    }

/* 02. type */

    a {
        text-decoration: none;
    }

    .link {
        color: #005dae;
    }

    .link:hover,
    .cookiebanner a:hover {
        text-decoration: underline;
    }

    .link:visited {
        color: #005dae;
    }

    p, label {    
        font-size: 12px;
        padding: 0;
        margin: 0;
        line-height: 16px;
    }

    b {    
        font-weight: 600;
        padding: 0;
        margin: 0;
        line-height: 16px;
    }

    h1 {
        font-size: 32px;
        padding: 0;
        margin: 10px 0;
    }

    h2 { 
        font-size: 24px;
        padding: 0;
        margin: 0;
    }

    h3 { 
        font-size: 20px;
        padding: 0;
        margin: 0;
    }

    h4 {
        font-size: 14px;
        padding: 0;
        margin: 0;
    }

    h5 {
        font-size: 12px;
        padding: 0;
        margin: 0;
    }

    h6 { 
        text-transform: uppercase;
        font-size: 12px;
        padding: 0;
        margin: 0;
    }

/* 03. colors */

    .blue {
        background-color: rgb(36,132,198);
    }

    .blue:hover {
        background-color: #005dae;
    }

    .grey {
        background-color: #bbbbbb;
    }
        
    .grey:hover {
        background-color: #999;
    }

    .grey-text {
        color: #888;
    }

/* 04. atoms */

    .background {
        background: rgb(226,232,237);
        background: linear-gradient(140deg, rgba(226,232,237,1) 0%, rgba(206,222,235,1) 40%, rgba(221,229,236,1) 100%); 
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container {
        border-radius: 20px;
        background-color: #fff;
        width: 460px;
        height: fit-content;
        padding: 30px;
        box-shadow: 0px 15px 15px 2px rgba(27,67,122,0.2);
    }

    /* step-container for registration process */

    .step-container {
        border-bottom: 1px solid #888;
        margin-bottom: 30px;
    }

    .step {
        display: inline-block;
        padding: 10px;
    }

    .step:nth-child(1) {
        border-right: 1px solid #888;
    }

    .step:nth-last-child(1) {
        border-left: 1px solid #888;
    }

    /* background image for login forms */

    .login-image {
        height: 150px;
        background-color: rgba(36,132,198,0.8);
        margin: -30px -30px 30px -30px;
        border-radius: 20px 20px 0 0;
        background-image: url('../img/image1.jpg');
        background-size: cover;
        background-position: 50% 60%;
    }

    .login-overlay {
        background-color: rgba(36,132,198,0.5);
        border-radius: 20px 20px 0 0;
        width: 100%;
        height: 100%;
    }

    /* form styling */

    input[type="email"],
    input[type="text"],
    input[type="password"] {
        margin: 6px 0 10px 0;
    }
    
    button, .button {
        color: #fff;
        border: none;
        width: fit-content;
        display: inline-block;
        font-family: helvetica;
        height: 26px;
        padding: 6px 11px; 
        font-size: 15px;
        line-height: 15px;
        border-radius: 7px;
        text-transform: none;
    }
    
    button:hover, .button:hover {
        cursor: pointer;
    }

    .indent {
        margin-left: 27px;
    }

    .error, .errorlist {
        border: 1px solid #F04923;
        color: #F04923;
        padding: 10px;
        font-size: 12px;
    }

    .errorlist li {
        list-style-type: none;
    }

    .version {
        position: fixed;
        right: 26px;
        bottom: 20px;
        color: #888;
    }

    .addition {
        position: relative;
        text-align: center;
        top: 80px;
    }

    .addition a {
        color: #fff;
        box-shadow: 0px 5px 20px 4px rgba(27,67,122,0.2);
    }

    .addition a:visited {
        color: #fff;
    }

    .addition a:hover {
        color: #fff;
    }

    .cookiebanner {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 12px;
        width: 100%;
        background-color: #333;
        color: #fff;
        padding: 10px;
        text-align: center;
        z-index: 100000;
    }

    .cookiebanner a,
    .cookibanner a:visited {
        color: #98cce1;
    }
    

/* 05. tablet */

@media screen and (max-width: 1400px){
}

/* 06. mobile */

@media screen and (max-width: 700px){
    .background {
        background-image: none;
        width: 100vw;
        height: 100%;
    }

    .container {
        width: 100vw;
        height: 100%;
        padding: 20px;
        box-shadow: none;
        border-radius: 0px;
    }

    .step {
        width: 30%;
    }

    .login-image {
        margin: -20px -20px 30px -20px;
        border-radius: 0px;
    }

    .login-overlay {
        border-radius: 0px;
    }

    .version {
        position: initial;
        padding-top: 14px;
    }
}