@font-face {
    font-family: 'Konnect';
    font-weight: bold;
    font-style: normal;
    src: local('Konnect Black'), url('../fonts/Konnect-Black.otf') format('opentype');
}

@font-face {
    font-family: 'Konnect';
    font-weight: normal;
    font-style: normal;
    src: local('Konnect Bold'), url('../fonts/Konnect-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Konnect';
    font-weight: 100;
    font-style: normal;
    src: local('Konnect Medium'), url('../fonts/Konnect-Medium.otf') format('opentype');
}

body {
    margin: 0;
    font-family: 'Konnect', 'Roboto', 'Noto', sans-serif;
    font-size: 15px;
    font-weight: normal;
    /* line-height: 1.5; */
    min-height: 60vh;
    background-color: white;
}

body.loading #splash {
    background: white;
    opacity: 1;
}

.grecaptcha-badge { 
    visibility: hidden !important;
}

#splash {
    align-items: center;
    bottom: 0;
    display: flex;
    flex-direction: column;
    font-family: verdana, sans-serif;
    font-size: 18px;
    height: 100vh;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 500ms cubic-bezier(0,0,0.2,1);
    will-change: opacity;
    z-index: 1;
    /* max-width: 500px; */
    margin: 0 auto;
}

#splash p {
    color: #000;
    font-size: 0.8em;
    font-weight: bold;
    margin-top: 1em;
}

.spinner {
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #000;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

paper-button.primary {
    --paper-font-common-base_-_font-family: 'Konnect', 'Roboto', 'Noto', sans-serif;
    --paper-font-common-base_-_-webkit-font-smoothing: initial;
    visibility: visible;
    --paper-button-custom_-_font-size: 1.15em !important;
    --paper-button-mini-custom_-_bottom: -12px !important;
    text-align: var(--bottom-drawer-text-align, center);
    --paper-material_-_display: block;
    --paper-material_-_position: relative;
    --paper-material_-_max-height: initial;
    --paper-material_-_overflow: initial;
    --paper-material_-_padding: initial;
    --paper-material-elevation-1_-_box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
    --paper-material-elevation-2_-_box-shadow: var(--shadow-elevation-4dp_-_box-shadow);
    --paper-material-elevation-3_-_box-shadow: var(--shadow-elevation-6dp_-_box-shadow);
    --paper-material-elevation-4_-_box-shadow: var(--shadow-elevation-8dp_-_box-shadow);
    --paper-material-elevation-5_-_box-shadow: var(--shadow-elevation-16dp_-_box-shadow);
    align-items: var(--layout-center-center_-_align-items);
    position: relative;
    box-sizing: border-box;
    min-width: 5.14em;
    margin: 0 0.29em;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    user-select: none;
    cursor: pointer;
    z-index: 0;
    font-family: var(--paper-font-common-base_-_font-family);
    -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    width: var(--paper-button_-_width);
    transition: var(--shadow-transition_-_transition);
    display: var(--layout-horizontal_-_display);
    flex-direction: var(--layout-horizontal_-_flex-direction);
    justify-content: var(--layout-around-justified_-_justify-content);
    border: 2px solid white;
    border-radius: 26px;
    padding: 12px 28px;
    font-weight: normal;
    outline: none;
    text-transform: inherit;
    white-space: nowrap;
    --paper-button_-_width: max-content;
    font-size: var(--paper-button-custom_-_font-size, .9em) !important;
    background: var(--app-primary-color);
    border-color: var(--app-primary-color);
    color: white;
}

paper-button.thin {
    padding: 4px 20px;
}
#update-container {
    align-items: center;
    display: none;
    height: 100vh;
    justify-content: center;
    position: relative;
    padding: 0;
    z-index: 9000;
}

#update-container::before {
    background: #000;
    bottom: 0;
    content: '';
    opacity: 0.7;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10000;
}

#update-container > .container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    position: relative;
    z-index: 10001;
}

#update-container > .container .popup {
    background: white;
    border-radius: 15px;
    max-width: 90%;
    text-align: center;
    padding: 15px;
    width: 500px;
}

#update-container > .container .popup .title {
    font-size: 1.5em;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f1f1;
}

#update-container > .container .popup .content {
    font-weight: thin;
    line-height: 1.6em;
    padding: 10px;
}

#update-container > .container .popup .content #updateCountdown {
    font-size: 1.4em;
    font-weight: normal;
}

#update-container > .container .popup .button {
    border-top: 1px solid #f1f1f1;
}

#update-container > .container .popup .button a {
    background: var(--app-primary-color, green);
    border-radius: 16px;
    color: white;
    display: inline-block;
    margin-top: 15px;
    padding: 8px 16px;
    text-decoration: none;
}