@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400");
:root {
  --background-color: rgba(67,97,238, 1);
  --text-color: white;
  --background-image: url("https://s3-eu-west-1.amazonaws.com/blsq-dhis2/dhis2-assets/blsq-dhis2-intersos-hero-image.png");
  --left-panel-width: 420px;
}

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

/* HTML5 display-role reset for older browsers */
.loginPage article,
.loginPage aside,
.loginPage details,
.loginPage figcaption,
.loginPage figure,
.loginPage footer,
.loginPage header,
.loginPage hgroup,
.loginPage menu,
.loginPage nav,
.loginPage section {
  display: block;
}

.loginPage ol,
.loginPage ul {
  list-style: none;
}

.loginPage blockquote,
.loginPage q {
  quotes: none;
}

.loginPage blockquote:before,
.loginPage blockquote:after,
.loginPage q:before,
.loginPage q:after {
  content: "";
  content: none;
}

.loginPage table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
}

/* END OF RESET */
/* CUSTOM THEME */
html.loginPage {
  width: 100%;
  height: 100%;
  background: var(--background-color);
}

#loginField > #loginArea > #loginForm > #submitDiv {
  text-align: center;
  margin-top: 1em;
}

#loginForm label {
  font-size: 14px;
}

body.loginPage {
  position: relative;
  line-height: 1.15;
  width: var(--left-panel-width);
  height: 100vh;
  font-family: "Open Sans", "Arial", sans-serif;
  color: var(--text-color);
  text-align: left;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-flow: column-reverse;
}

/* Style all the blocks */
.loginPage > div {
  z-index: 1;
  padding-inline: 60px;
  background: var(--background-color);
}

/* Login block */
#loginField {
  position: static;
  order: 1;
  width: 100%;
  margin: 0;
  text-align: left;
  flex: 2;
  z-index: 2;
}

/* Intro & Title block */
.loginPage > div:not([id]) {
  order: 2;
  width: 100%;
  padding-top: 50px;
  text-align: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

/* Background Image */
body.loginPage:before {
  content: "";
  background-size: cover;
  background-repeat: no-repeat;
  background-image: var(--background-image);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
}

a,
a:visited {
  color: var(--text-color);
}

/* Background Banner area */
#bannerArea {
  display: block;
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
}

#bannerArea a img {
  max-height: 100px;
  max-width: 200px;
}

#titleArea,
#flagArea,
#introArea {
  position: static;
  color: var(--text-color);
}

#flagArea {
  display: none;
}

#titleArea {
  font-size: 24px;
  margin-top: 170px;
  /* For the banner image */
}

#introArea {
  display: block;
  margin-top: 1em;
  font-size: 16px;
  color: var(--text-color);
  width: 100%;
}

#loginArea {
  padding-top: 2em;
}

#loginField input[type=text],
input[type=password], input[type=code] {
  width: 100%;
  padding: 15px;
}

#loginField input[type=code] {
  margin-top: 8px;
}

#forgotPasswordLink,
#createAccountLink {
  font-size: 14px;
  color: var(--text-color);
}

#notificationArea {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: center;
  color: var(--text-color);
  font-size: 14px;
}

/* Footer area  */
#poweredByLabel {
  display: block;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1em;
  color: var(--text-color);
}

#footerArea {
  position: static;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  color: var(--text-color);
  padding-bottom: 30px;
  padding-inline: 16px;
}

#rightFooterArea {
  margin-right: 0;
  gap: 8px;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
  margin-top: 2em;
}

#leftFooterArea {
  margin: 0;
  flex-grow: 1;
  text-align: center;
  color: var(--text-color);
}

#signInLabel {
  display: none;
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  margin-bottom: 1em;
}

#loginMessage {
  color: darkorange;
  border-color: darkorange;
  background: transparent;
  padding: 12px;
  font-size: 14px;
}

#rightFooterArea > #localeSelect {
  /* Override the style attr on localeSelect with !important */
  margin-left: 0px !important;
}

/* Custom applicationIntro, uses `dd` */
dl.blsqContactDetails {
  display: flex;
  flex-wrap: wrap;
}

dl.blsqContactDetails > dt {
  width: 100%;
  font-weight: bold;
}

dl.blsqContactDetails > dd {
  min-width: 0;
  margin-left: auto;
  width: 100%;
}

/* Responsive */
@media screen and (max-width: 768px) {
  body.loginPage {
    width: 100vw;
    background-image: none;
  }

  #bannerArea {
    top: 20px;
  }

  #titleArea {
    margin-top: 90px;
    /* For the banner image */
  }
}
@media screen and (min-width: 1024px) {
  dl.blsqContactDetails > dt {
    width: 15%;
  }

  dl.blsqContactDetails > dd {
    width: 85%;
  }
}