@import "https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;600;700&display=swap";
@import "https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css";
@import "./notification.css";

#gac-background {
    position: fixed;
    bottom: 0;
    background-color: white;
    width: 100%;
    z-index: 99;
    box-shadow: 0 0 5px -3px black;
    height: 50px;
}

#gac {
    background-image: url(../img/mobile.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 320px;
    height: 50px;
    margin: auto;
}

@media screen and (min-width: 1000px) {

    #gac-background {
        position: static;
        margin: auto;
        margin-bottom: calc(5 * var(--unit));
        box-shadow: 0 0 1px 0 black;
        width: 728px;
    }

    #gac {
        background-image: url(../img/banner.jpg);
        width: 728px;
        height: 90px;
    }

    main {
        margin: calc(6 * var(--unit)) 0;
        margin-top: var(--unit);
    }

}

* {
    font-family: "Quicksand", sans-serif !important;
}

html,
body {
    margin: 0;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: fill-available;
    font-size: 16px;
    min-width: calc(30 * var(--unit));
    min-width: fit-content;
}

input,
select,
button {
    font-size: 1rem;
}

aside.loading {
    transition: opacity 0.2s;
    display: none;
}

body.API-loading aside.loading {
    display: unset;
}

body.API-loading.API-loading-delay aside.loading {
    opacity: 1;
}

@media screen and (min-width: 1000px) {

    html,
    body {
        min-height: 100vh;
    }
}

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    --unit: 10px;
    font-size: 16px;
}

body.authenticated .not-authenticated {
    display: none;
}

body:not(.authenticated) .authenticated {
    display: none;
}

body:not(.authentication-initialised) .not-authenticated,
body:not(.authentication-initialised) .authenticated,
body:not(.authentication-initialised) .needs-authentication-initialised {
    display: none;
}

/* colors */

html {
    --light-blue: rgb(26, 173, 240);
    --blue: rgb(26, 173, 240);
    --light-blue-highlight: rgb(26, 173, 240);
    --white: rgb(255, 255, 255);
    --light-grey: #EEE;
    --grey: #6A6A6A;
    --dark: rgba(0, 0, 0, .87);
    --gold-yellow: #ffcc2e;
    --bright-red: #ef476f;
    --mint-green: #07dba3;
    --darkblue: rgb(16, 95, 140);
}

a {
    color: var(--light-blue-highlight);
}

/* body themes */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

main {
    width: 100%;
    height: 100%;
    max-width: calc(100 * var(--unit));
    box-sizing: border-box;
}


/* ripple effect */
button.ripple {
    background-position: center;
    transition: background 0.8s;
}

button.ripple:hover {
    background: var(--light-blue-highlight) radial-gradient(circle, transparent 1%, var(--light-blue-highlight) 1%) center/15000%;
}

button.ripple:active {
    background-color: var(--light-blue);
    background-size: 100%;
    transition: background 0s;
}

button {
    background-color: var(--light-blue);
    border: none;
    min-height: calc(3 * var(--unit));
    min-width: calc(10 * var(--unit));
    padding: var(--unit);
    border-radius: calc(0.5 * var(--unit));
    color: var(--white);
    transition: background-color 0.1s;
}

button:disabled {
    background-color: var(--light-grey);
}

/* styles */

aside.login {
    position: absolute;
    top: var(--unit);
    right: var(--unit);
    color: var(--white);
}

body:not(.show-pwa-install-prompt) .pwa-install-prompt {

    display: none;

}