/* reset css start */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }


/* end */


/*Roboto*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local("Roboto Thin"), local("Roboto-Thin"), url(../font/Font_Roboto/Roboto-Thin.ttf) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"), url(../font/Font_Roboto/Roboto-Light.ttf) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Regular"), local("Roboto-Regular"), url(../font/Font_Roboto/Roboto-Regular.ttf) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"), local("Roboto-Medium"), url(../font/Font_Roboto/Roboto-Medium.ttf) format("truetype"); }

body, html {
    height: 100%;
}


.LoginPage {
  width: 100vw;
  background-image: url("../img/login-bg.png");
  display: grid;
  grid-template-columns: 1fr minmax(auto, 653px) 1fr;
  grid-template-rows: minmax(auto, 233px) 534px 1fr;
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.LoginPage__form {
  grid-row: 2/3;
  grid-column: 2/3;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  font-family: "Roboto";
  max-width: 1140px; }

.LoginPage__brand {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 60px;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center; }

.LoginPage__logo {
  height: 58px;
  width: 223px;
  margin-top: 50px;
  background-image: url("../img/login-logo.svg");
  background-repeat: no-repeat;
  align-self: flex-start; }

.LoginPage__description {
  margin-top: 16px;
  align-self: flex-start;
  color: #002F87;
  opacity: 90%;
  font-family: "Roboto";
  font-size: 18px;
  letter-spacing: -0.17px;
  line-height: 30px;
  font-weight: 400;
  text-align: center; }


.LoginPage__copyright {
  margin-top: 5px;
  color: #002F87;
  opacity: 90%;
  font-family: "Roboto";
  font-size: 15px;
  letter-spacing: -0.17px;
  line-height: 30px;
  font-weight: 400;
  text-align: center;
}

.LoginPage__url {
  color: #00A0DF;
  text-decoration: none;
}

.LoginPage__formGroup {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(1fr, 3);
  padding-bottom: 50px;
  padding-left: 50px;
  padding-right: 50px;
  row-gap: 14px; }

.LoginPage__label {
  display: block;
  color: #4D4D4D;
  font-family: 'Roboto';
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.17px;
  line-height: 30px;
  margin-bottom: 4px; }

.LoginPage__input {
  box-sizing: border-box;
  width: 100%;
  height: 59px;
  font-size: 18px;
  letter-spacing: -0.17px;
  line-height: 30px;
  font-family: "Roboto", sans-serif;
  padding-left: 10px;
  color: #999999;
  background-color: #F2F4F8;
  border: 0px;
  font-weight: 400; }

.LoginPage__input:focus {
  outline: none;
  color: #002F87;
  background-color: white;
  border: 1px solid #002F87; }

.LoginPage__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 50px;
  width: 100%;
  border-radius: 0;
  border: 2px solid #002F87;
  color: #002F87;
  font-family: "Roboto";
  font-size: 18px;
  letter-spacing: -0.17px;
  line-height: 30px;
  padding-left: 15px;
  -ms-word-break: normal;
  word-break: normal;
  background: url("../img/caret-down.svg") 96%/15% no-repeat #fff;
  cursor: pointer; }

/*To remove button from IE11 */
.LoginPage__select::-ms-expand {
  display: none; }

.LoginPage__button {
  justify-self: flex-end;
  height: 50px;
  width: 171px;
  border: 0;
  background-color: #00A0DF;
  color: #FFFFFF;
  font-family: "Roboto";
  font-size: 18px;
  font-weight: bold;
  letter-spacing: -0.17px;
  line-height: 21px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer; }

.LoginPage__button:hover {
  opacity: 80%; }

.LoginPage__actionGroup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  justify-content: space-between;
  margin-top: 25px; }

.LoginPage__spinner {
  justify-self: center;
  align-self: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border-top: 2px solid #07d;
  border-right: 2px solid transparent;
  animation: spinner .6s linear infinite; }

.LoginPage__loading {
  display: none;
  justify-self: flex-end;
  width: 171px; }

@media (max-width: 375px) {
  .LoginPage__form {
    grid-row: 1/3; }
  .LoginPage__actionGroup {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    justify-content: center;
    align-items: center;
    justify-items: center;
    row-gap: 10px;
    margin-top: 0; }
  .LoginPage__button {
    justify-self: center; }
  .LoginPage__error {
    text-align: center; }
  .LoginPage__loading {
    justify-self: center; } }

.LoginPage__selectBox {
  position: relative;
  width: 171px; }

.extra-margin {
  margin-top: 6px; }

.LoginPage__error {
  font-family: "Roboto";
  font-size: 18px;
  color: #c00; }

.LoginPage__error > ul {
  list-style: none;
}

@keyframes spinner {
  to {
    transform: rotate(360deg); } }
