@charset "UTF-8";

@font-face {
  font-family: 'Basier';
  src: url('./assets/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.eot'); /* IE9 Compat Modes */
  src: url('./assets/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('./assets/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('./assets/fonts/Basier-Circle-regular-webfont/basiercircle-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
}

html {
  height: 100%;
  font-family: 'Basier', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent
}

body {
  height: 100%;
  margin: 0;
  font-family: 'Basier', sans-serif !important;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #ffffff;
}

.page {
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  justify-content:flex-end;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

:before, :after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

input {
  outline: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}

html input[disabled] {
  cursor: default
}

input::-moz-focus-inner {
  border: 0;
  padding: 0
}

a {
  background-color: transparent;
  color: #337ab7;
  text-decoration: none;
}

a:active, a:hover {
  outline: 0
}

a:hover, a:focus {
  text-decoration: underline
}

a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px
}

::selection, ::-moz-selection {
  background-color: #00c6ff;
  color: #000
}

img {
  border: 0;
}

.login {
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  justify-content:space-between;
  flex-grow:1;
}

.login > * {
  margin:0px;
}

.login__form {
  display:flex;
  flex-direction:column;
  align-self:stretch;
  justify-content:center;
  align-items:center;
}

.login__title {
  color: #fff;
  font-family: "Basier", Sans-Serif;
  font-size: 36px;
  font-weight: 400;
  padding-bottom: 41px;
  text-align: center;
  max-width: 393px;
  line-height: 1.1;
  margin: 0 auto
}

.login__subtitle {
  color: #fff;
  font-family: "Basier", Sans-Serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  max-width: 405px;
  line-height: 1.1;
  margin: 0 auto
}

.login__form-img {
  margin-bottom: 0px
}

.login__form > * {
  margin-bottom: 0px
}

.login__form-input {
  display: block;
  width: 100%;
  border: 1px solid #001D77;
  border-radius: 5px;
  padding-top: 14px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  margin-bottom: 30px;
  color: #001D77;
  font-family: "Basier", Sans-Serif;
  font-size: 18px;
  font-weight: 400
}

.login__form-input:focus {
  border-color: #0361a3
}

.login__form-submit {
  display: block;
  border-radius: 5px;
  background-color: #60BB46;
  text-align: center;
  line-height: 48px;
  color: #fff;
  font-family: "Basier", Sans-Serif;
  font-size: 24px;
  font-weight: 400;
  width: 100%;
  border: 0;
  padding-top: 5px;
  margin-bottom: 14px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.login__form-submit:hover {
  background-color: #3A8A38;
}

.login__form-submit:disabled {
    background-color: #b5b5b5 !important;
    cursor: not-allowed !important;
    color: #ececec !important;
    border: 1px solid #fff !important;
}

.login__form-cancel {
  display: block;
  border-radius: 5px;
  background-color: #FB5C48;
  text-align: center;
  line-height: 48px;
  color: #fff;
  font-family: "Basier", Sans-Serif;
  font-size: 24px;
  font-weight: 400;
  width: 100%;
  border: 0;
  padding-top: 5px;
  margin-bottom: 14px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.login__form-cancel:hover {
  background-color: #b53c2d
}

.login__center_div_col {
  display:flex;
  flex-direction:column;
  align-self:center;
  align-items:center;
}

.login__left_div_col {
  display:flex;
  flex-direction:column;
  align-self:start;
  align-items:start;
}

.login__right_div_col {
  display:flex;
  flex-direction:column;
  align-self:end;
  align-items:end;
}

.login__center_div_row {
  display:flex;
  flex-direction:row;
  align-self:center;
  align-items:center;
}

.login__sso {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #d2d2d2;
  padding: 4px 12px 4px 56px;
  margin-bottom: 12px;
  text-align: left;
  height: 48px;
  color: #001D77;
  font-family: "Basier", Sans-Serif;
  font-size: 14px;
  font-weight: 400;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
}

.login__sso_microsoft {
  background:url('../images/microsoft-icon.png') no-repeat 10px center;
  margin-top: 48px;
}

.login__sso_google {
  background:url('../images/google-icon.png') no-repeat 10px center;
}

.login__sso_okta {
  background:url('../images/okta-icon2.png') no-repeat 6px center;
}

.login__form-link {
  color: #001D77;
  font-family: "Basier", Sans-Serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.login__form-link:hover {
  color: #001D77
}

    .footer {
      color:#ffffff;
      background-color:#0068b2;
      display:flex;
      justify-content:center;
      align-items: center;
      margin-top: 40px;
    }
    .footer > img {
      margin-top:-30px;
    }

@media only screen and (max-width:1150px) {
  .login__title {
    font-size: 24px;
    line-height: 1.2
  }
  .login__subtitle {
    font-size: 14px;
    padding: 0 10px;
    line-height: 1.2
  }
  .login__form {
    left: 60%
  }
}

@media only screen and (max-width:960px) {
  .login__aside {
    display: none;
    align-content:right;
  }
  .login__form {
    left: 50%
  }
  .footer {
    display: none
  }
}

@media only screen and (max-width:550px) {
/*  .login__form {
    position: static;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    display: block;
    margin: 0 auto;
    padding: 0 20px;
    padding-top: 30px
  } 
  .login__form > img {
    display: block;
    margin: 0 auto;
    margin-bottom: 30px
  } */
}