/* Sign-in page: reproduces the Harmony SSO login page (sso.harmony2.cm/account/login).
   Loaded after Bootstrap 4.5 and MDB 6.0.0, in the same order as on Harmony. */

:root {
  --primary: #F29400 !important;
  --mdb-primary: #F29400 !important;
  --hover: #cd9118;
  --hover-black: #222;
}

/* Harmony ships a patched MDB where .img-fluid fills its container. */
.img-fluid, .img-thumbnail { width: 100%; height: 100%; }

body, html { width: 100%; height: 100%; font-size: 0.85rem; font-family: "Roboto"; }

.main {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: #F0F2F5;
  height: 100% !important;
  font-family: 'Poppins';
  font-size: 0.85rem;
  font-style: normal;
}
.main a { color: black; }
.main a.link-dgi { color: #F29400; }
.main a.back-home:hover, .main a.back-home:focus { color: #F29400; }

.main-side { flex-grow: 2; position: relative; }

.logo { color: var(--primary); width: 50%; margin-top: -10px; }
.logo:hover { color: var(--hover); }

/* Never squeeze the language select: on phones the bar overflows into the
   empty space left of it (its column is right-aligned). */
.lang-bar, .lang-bar > * { flex-shrink: 0; }
.back-home { display: inline-flex; align-items: center; gap: .5rem; margin-right: 1.5rem; white-space: nowrap; }

.btn_refesh { cursor: pointer; }

/* The error alert is focused by script so screen readers announce it;
   it is not a control, so no focus ring. */
#sign-in-form-container .alert:focus { outline: none; }

.btn-dgi, .btn-dgi:hover { background: #F29400; }
.btn-dgi:focus { background: #c37a08; }

.copyright {
  margin-left: -20px;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 20px;
  border-top: 0.5px solid #aaafb6;
  padding-top: 5px;
}

@media only screen and (max-width: 600px) {
  .logo { width: 20%; margin-top: 0px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .main { height: auto; min-height: 100vh; overflow-y: auto; }
  .main-side { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
  .main-side > .container { flex: 1; }
  .logo { width: 25%; }
  .copyright { position: relative; bottom: auto; margin-left: 0; margin-top: 0; width: 100%; }
}