html {
    --mdc-typography-font-family: Roboto, sans-serif;

    font-family: var(--mdc-typography-font-family, Roboto, sans-serif);

    --atlas-theme-background: #f7f7f7;

    --atlas-theme-primary: #167463;
    --atlas-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
    --mdc-theme-primary: var(--atlas-theme-primary) !important;
    --mdc-theme-text-primary-on-background: var(--atlas-theme-text-primary-on-background);

    --atlas-theme-surface: #fff;
    --mdc-theme-surface: var(--atlas-theme-surface);

    --atlas-theme-secondary: #c96c08;
    --mdc-theme-secondary: var(--atlas-theme-secondary) !important;

    --mdc-text-field-fill-color: rgba(0,0,0,.05);
    --mdc-select-fill-color: rgba(0,0,0,.05);
    
    height: 100%;
}

body {
    overflow-x: hidden;
    margin: 0;
    background-color: var(--atlas-theme-background);
    height: 100%;
}

body.loading {
    background-image: url(/img/logo.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}

mwc-draer[open]:not([type=modal]) {
    --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));
}

.smooth-scroll {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

atlas-login input {
    font-size: medium;
    padding: 10px 20px;
    border-radius: 25px;
    border: 1px solid #999;
    margin: 5px;
}

atlas-login input:focus {
    outline: 1px solid var(--atlas-theme-primary);
}

atlas-login label {
    text-align: left;
    padding-left: 20px;
    margin-bottom: 0px;
    font-weight: bold;
    color: #555;
    font-variant: all-small-caps;
}

atlas-login #newpassword:invalid,
atlas-login #newpassword-repeat:invalid {
    outline: 1px solid red;
}

@media only print {

    body {
        width: 21cm;
        background-color: white;
    }

}