/* we need to sometimes add things to get new hashes */
html, body {
  background-color:#03bdf6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  font-family: var(--ctm-font-stack-primary);
  font-weight: 300;
  font-size: 13px;
  color: #586064;

  padding-top: 40px;
  padding-bottom: 40px;
}
html.framed, body.framed {
  padding: 0px;
  margin: 0px;
  background:#fff;
}
html:not(.framed), body:not(.framed) {
  /*background: url(/assets/userflow_bg-e6c325e7f0724b65b30afa16eff05d894449167f20d70d43101d2ea9f97b5602.svg) no-repeat center center fixed!important;*/
  background: #F5FCFE !important;
  background-size: cover!important;
}
/* Authbox */
#authentication #header, #authentication .wrapper {
  width:350px;
}
#authentication.oauth2 {
  width:650px;
  margin: 0 auto;
}
#authentication #content {
  background:white;
  max-width: 90%;
  width: 330px;
  padding: 15px;
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  box-shadow:0px 2px 7px rgba(0, 0, 0, 0.40);
  min-height: 400px;
}
#authentication.oauth2 #content {
  width:630px;
}
#authentication.main #content {
  width: 400px;
  position: relative;
}
@media (max-width: 400px) {
  html:not(.framed), body:not(.framed) {
    background: white !important;
    padding: 0;
  }
  #authentication.main #content {
    box-shadow:none;
  }
}
#authentication.main #content #authbox {
  padding: 20px;
}
#authentication #regions select {
  padding: 10px;
  width: 100%;
  margin-bottom: 13px;
  height: auto;
  border-radius: var(--border-radius);
}
#authentication.framed #content {
  margin: 0 auto;
  border:none;
  border-radius:0;
  box-shadow:none;
}
#authentication.framed #logo { display:none; }
html.dark #authentication #content {
  background: #424242;
  border-color: #5a5a5a;
}
html.dark, html.dark body {
  background-color: #303030;
}

#authentication #content form {
  margin-bottom:0;
}
#authentication #content form h3 {
  text-align:center;
}
#authentication input {
  position:relative;
  margin:0;
}
#authentication input[type=text],
#authentication input[type=number],
#authentication input[type=password],
#authentication input[type=email] {
  padding: 10px;
  width:100%;
  margin-bottom:13px;
  height: auto;
  border-radius: var(--border-radius);
}
#authentication input[type=password] + .hint {
  margin-top: -13px;
  margin-bottom: 13px;
}
#authentication .phonenumber input[type=text] {
  padding:inherit;
  width:100%;
  margin-bottom:inherit;
  height: auto;
}
#authentication .bigbutton {
  width:100%;
}
#authentication.oauth2 .bigbutton {
  width:auto;
}

#signin {
  width:100%;
  margin:0 auto;
  min-height: 25rem;
}
#authentication :not(.bootstrap-switch-content) > label {
  display: block;
  line-height: 22px;
}
#authentication #content #logo {
  position:static;
  background-position:center center;
  margin:0 auto;
  margin-bottom:10px;
  width: 240px;
  height: 52px;
  text-indent:-99999px;
  background-size: contain;
}
#authentication.main #content #logo {
  width: 270px;
  height: 72px;
}
a img {
  border:none;
}
#forgot {
  clear:both;
  padding-top: 15px;
  padding-bottom: 10px;
}
#forgot a {
  border-left:1px solid #ccc;
  padding-left: 15px;
}
@media (max-width: 400px) {
  #forgot a {
    float: none;
    display:block;
    border:none;
    padding-left:0;
    margin-bottom:0px;
    font-size: 12px;
  }
}
#forgot a:first-child {
  border:none;
  padding-left:0;
}
#authentication.main footer {
  height:30px;
  margin-top:30px;
}
#authentication.main #forgot {
  position: absolute;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
  width: 100%;
  left: 0;
  padding: 18px 12px;
  display: flex;
  justify-content: space-evenly;
}
@media (max-width: 400px) {
  #authentication.main #forgot {
    padding: 8px;
    position: fixed;
  }
}
#authentication.main .or-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
  max-width: 350px;
}
#authentication.main .or-divider .line-left,
#authentication.main .or-divider .line-right {
  background: rgba(0, 0, 0, 0.07);
  height: 2px;
  display:inline-block;
  width: calc(50% - 40px);
}
#authentication.main .or-divider .line-left {
  margin-right: 20px;
}
#authentication.main .or-divider .line-right {
  margin-left: 20px;
}

.flash {
  margin:auto;
}
#authentication.oauth2 h2 {
  text-align:center;
}
#error_explanation h2 {
  font-size: 16px;
  color: red;
  margin-bottom: 10px;
  width: 100%;
}
#authentication .phonenumber .select2-container {
  width: 100px;
}
#authentication .phonenumber input.phone {
  width:calc(100% - 100px);
}

#authentication .select2-search input {
  margin-top: 3px;
}
#authentication .link-google {
  display: block;
  width: 200px;
  height: 48px;
  margin: 0 auto;
}
@media (max-width: 400px) {
  #authentication .link-google {
    width: 100%;
  }
}
#authentication .callout {
  background-color: #03bdf5
}