/**************
 Main Layout 
**************/
html {
    cursor: default;
}

body {
    display: flex;
    justify-content: center;
}

html, body {
    height: 100%;
    width: 100%;
    align-content: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

article {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    article {
        padding: 0;
    }
}

main {
    flex: 1;
    display: inline-grid;
    margin: 5% 0;
}

/*********************
 General Components 
*********************/
.logo {
    width: 80%;
    max-height: 20rem;
    object-fit: contain;
    margin: 2vw 0 1vw 0;
    padding-top: 2vw;
}

.button {
    color: var(--theme-contrastcolor);
    background-color: var(--theme-backgroundcolor);
    align-self: center;
    border: none;
    border-radius: 2vw;
    padding: 0.5vw 2vw;
    font-size: larger;
}

    .button:hover {
        color: var(--theme-darkcontrastcolor);
        background-color: var(--theme-darkbackgroundcolor);
    }

:not(.btn-check) + .button:active {
    color: var(--theme-darkcontrastcolor);
    background-color: var(--theme-darkbackgroundcolor);
    border: none;
    filter: brightness(150%);
}

.label {
    padding: 0.5vw 0;
    align-content: center;
}

.input {
    align-content: center;
    width: 100%;
    margin: 1vw 0 0 0;
}

/**********************
 Material Components 
**********************/
.mdc-card {
    flex: auto;
    flex-direction: column;
    align-items: center;
    width: 60vw;
    padding: 2.5% 10%;
    background-color: white;
}

.mdc-text-field__resizer {
    resize: none;
}

@media (max-width: 1024px) {
    .mdc-card {
        padding: 0;
        width: 100%;
    }
}

/******************
  Vendere Theme  
******************/
:root {
    --mdc-theme-primary: var(--theme-maincolor);
    --mdc-theme-secondary: var(--theme-maincolor);
    --mdc-theme-surface: white;
}


/* FTQ Theme Colors
    --theme-maincolor: #006cb6;
    --theme-secondarycolor: #f0f0f0;
    --theme-textcolor: #000000;
    --theme-errorcolor: #b00020;

:root {
    --mdc-theme-primary: "#FFFFFF";
    --mdc-theme-secondary: "#FFFFFF";
    --mdc-theme-surface: white;
}*/

/* 
    MainColor: "#FFFFFF"
    backgroundColor: "#424242"
    ContrastColor: "#FFFFFF"
    DarkBackgroundColor: "#353434"
    DarkContrastColor: "#FFFFFF"
*/

/*Bootstrap Buttons*/
.link {
    color: var(--theme-maincolor);
    text-decoration: none;
}

    .link:hover {
        color: var(--theme-darkbackgroundcolor);
    }

.btn:first-child:active, :not(.btn-check) + .btn:active {
    color: var(--theme-darkbackgroundcolor);
    filter: brightness(150%);
}

:not(.btn-check) + .button:active {
    color: var(--theme-darkcontrastcolor);
    background-color: var(--theme-darkbackgroundcolor);
    border: none;
    filter: brightness(150%);
}

/*Standard theme css*/
.theme-text-color:not(:disabled) {
    color: var(--theme-maincolor);
}

.theme-text-color-bg:not(:disabled) {
    color: var(--theme-backgroundcolor);
}

.theme-text-dark-color-bg:not(:disabled) {
    color: var(--theme-darkbackgroundcolor);
}

.theme-text-contrast:not(:disabled) {
    color: var(--theme-contrastcolor);
}

.theme-text-dark-contrast:not(:disabled) {
    color: var(--theme-darkcontrastcolor);
}

.theme-background-color:not(:disabled) {
    background-color: var(--theme-backgroundcolor);
}

.theme-background-dark-color:not(:disabled) {
    background-color: var(--theme-darkbackgroundcolor);
}

/*On hover theme css*/
.theme-text-color-hover:hover {
    color: var(--theme-maincolor);
}

.theme-text-color-bg-hover:hover {
    color: var(--theme-backgroundcolor);
}

.theme-text-dark-color-bg-hover:hover {
    color: var(--theme-darkbackgroundcolor);
}

.theme-text-contrast-hover:hover {
    color: var(--theme-contrastcolor);
}

.theme-text-dark-contrast-hover:hover {
    color: var(--theme-darkcontrastcolor);
}

.theme-background-color-hover:hover {
    background-color: var(--theme-backgroundcolor);
}

.theme-background-dark-color-hover:hover {
    background-color: var(--theme-darkbackgroundcolor);
}