:root {
    --mdc-theme-primary: #003366;
}

.mdc-floating-label {
    color: var(--mdc-theme-primary) !important;
}

* {
    margin: 0;
}

body {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

.mdc-top-app-bar {
    z-index: 3;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
}

.main-wrapper {
    width: 100%;
    overflow: auto;
}

.break600w{
    width: 100%;
    max-width: 500px;
    height: calc(100vh - 64px);
    height: calc(100svh - 64px);
    margin: auto;
}

@media screen and (max-width: 600px) {
    .break600w {
        max-width: 100%;
        width: 100%;
        height: calc(100vh - 56px);
        height: calc(100svh - 56px);
    }
}

.hint-wrapper {
    width: calc(100% - 32px) !important;
    text-align: right;
    font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
    margin: 5px 15px 15px 15px !important;
}

.lbl-hint {
    color: dimgrey;
}

.btn-wrapper {
    text-align: center;
}

.instruction {
    width: calc(100% - 32px);
    font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
    font-size: 1.25rem;
    color: dimgrey;
    margin: 15px 15px 0px 15px !important;
}

.v-center {
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    max-height: 100%;
    padding: 0px;
    margin: 0;
    overflow: auto;
}