@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), url(/auth/static/Roboto-Light.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(/auth/static/Roboto-Regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/auth/static/Roboto-Medium.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(/auth/static/Roboto-Bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --text_color:  #ffffff;
  --hint_color:  #c1c1c1;
  --color_ok:    #1bc963;
  --color_3:     #cddc39;
  --color_warn:  #ffeb3b;
  --color_1:     #ff9800;
  --color_error: #f44336;
  --color_motd:  #f4365f;
  --color_info:  #03a9f4;
  --message_bg:  rgb(0,0,0,0.3);
  --box_bg:      #161616;
  --bg_color:    #1f1f1f;
  --hr_color:    #313131;

  --screen_min: 350px;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 3em;
    line-height: 1em;
    display: block;
    margin: 0;
    color: var(--text_color);
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(to right, var(--color_info) 0%, var(--color_info) 49%, var(--text_color) 51%, var(--text_color) 100%);
    background-size: 300% 100%;
    background-position: 100% 0%;
    animation: loader 1.5s linear 1 paused;
    animation-fill-mode: forwards;
}

h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.3em;
    display: block;
    margin: 0;
    color: var(--hint_color);
    text-align: right;
}

.title {
    margin: 0 0 20px 0;
}

@keyframes loader {
    0% {
        background-position: 76% 0%;
    }

    100% {
        background-position: 24% 0%;
    }
}

form {
    margin: 15px auto;
}

input:not([type="checkbox"]), button {
    display: block;
    font-size: 1em;
    padding: 10px;
    margin: 5px 0;
    width: 100%;
}

input, button {
    box-sizing: border-box;
    outline: 0px;
    border-radius: 0px;
    border: none;
    background-color: var(--text_color);
    color: #000;
}

input:focus {
    outline: 2px solid var(--color_info);
}

input::placeholder  {
    color: transparent;
}

input[type='submit'], button {
    margin-top: 20px;
    padding: 10px 20px;
    font-family: 'Roboto', sans-serif;
    background-color: #028edc;
    border-radius: 30px;
    color: var(--text_color);
    border-color: --text_color;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
}

input[type="submit"]:focus, button:focus {
    outline: 2px solid var(--text_color);
}

input[type='submit']:hover, button:hover {
    filter: contrast(150%);

}

button#sso {
    padding: 20px;
}

main {
    display: block;
    flex: 0 1 content;
    padding: 60px min(max(5px, calc((100vw - var(--screen_min)) / 2)), 60px);
    box-sizing: border-box;
    border-image: linear-gradient(45deg, var(--color_ok), var(--color_info)) 1;
    min-width: 470px;
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;       
}

html {
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    background: var(--bg_color);
}

label {
    font-weight: 400;
    color: var(--text_color);
    display: block;
}

label:not(.show_password) {
    font-size: 1.1em;
}

label.show_password {
    color: var(--hint_color);
}

.hint {
    font-weight: 300;
    color: var(--hint_color);
    display: block;
}

.line {
    margin: 15px 0;
}

.table {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    margin: -10px 0;
    flex-wrap: wrap;
}

.col {
    flex: 0 1 var(--screen_min);
    margin: 0 10px;
}

message {
    display: block;
    padding: 10px;
    color: var(--text_color);
    margin: 5px auto;
    max-width: var(--screen_min);
    box-sizing: border-box;

    &.message-ok {
        border-left: 10px solid var(--color_ok);
        background: var(--message_bg);
    }
    &.message-error {
        border-left: 10px solid var(--color_error);
        background: var(--message_bg);
    }
    &.message-info {
        border-left: 10px solid var(--color_info);
        background: var(--message_bg);
    }
    &.message-motd {
        border-left: 10px solid var(--color_motd);
        background: var(--message_bg);
    }

    &.level0 {
        border-left: 10px solid var(--color_error);
        background: var(--message_bg);
    }
    &.level1 {
        border-left: 10px solid var(--color_1);
        background: var(--message_bg);
    }
    &.level2 {
        border-left: 10px solid var(--color_warn);
        background: var(--message_bg);
    }
    &.level3 {
        border-left: 10px solid var(--color_3);
        background: var(--message_bg);
    }
    &.level4 {
        border-left: 10px solid var(--color_ok);
        background: var(--message_bg);
    }

    a {
        color: var(--text_color);
    }

    .ref {
      color: var(--hint_color);
      text-transform: uppercase;
      font-size: 0.7em;
      text-align: right;
      margin-top: 0.35em;
      font-weight: 300;
    }
}

strength {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 5px 0;

    & > level {
        flex: 0 1 auto;
        width: calc(20% - 2.5px);
        height: 8px;
        /*border-radius: 1px;*/

        &.level {
            background: #ffffff73;
        }
        &.level0 {
            background: var(--color_error);
        }
        &.level1 {
            background: var(--color_1);
        }
        &.level2 {
            background: var(--color_warn);
        }
        &.level3 {
            background: var(--color_3);
        }
        &.level4 {
            background: var(--color_ok);
        }
    }
} 

.hidden {
    display: none !important;
}

hr {
    border: 1px solid var(--hr_color);
}

/* Priority */
@media (max-width: 469px) {
    main {
        flex: 0 1 100%;
        min-width: inherit;
    }
    body {
        justify-content: normal;
    }
}
@media (min-width: 350px) {
    .col {
        width: var(--screen_min);
    }
}