﻿body {
  color: #3D3E3E;
  font-size: 1rem;
}

.ksp-account-container {
  -moz-min-width: 31.25rem;
  -ms-min-width: 31.25rem;
  -o-min-width: 31.25rem;
  -webkit-min-width: 31.25rem;
  min-width: 31.25rem;
  max-width: 31.25rem;
  height: 100%;
  float: right;
  background-color: white;
}

.ksp-account-container > .ksp-scrollable { height: 100%; }

.ksp-account-content {
  text-align: center;
  height: calc(100% - 13.125rem);
  display: table;
  width: calc(100% - 0.625rem);
  margin: 0 0.3125rem;
}

.ksp-account-content > form,
.ksp-account-content > div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.ksp-account-content > div .title { margin-bottom: 0.625rem; }

.ksp-account-content > form > div,
.ksp-account-content > div > div {
  width: 18.75rem;
  display: inline-block;
}

.ksp-account-content > form .field > input { width: calc(100% - 2em) !important; }

.ksp-account-content > form .field > .ui.dropdown {
  width: calc(100% - 3.6em) !important;
  min-height: 0;
}

.ksp-account-display {
  -ms-background-size: cover;
  background-size: cover;
  background-image: url('../../Content/images/ksp-login-backg.png');
  height: 100%;
  overflow: hidden;
  text-align: center;
  display: flex;
}

.ksp-account-display > * {
  flex: 50%;
  height: 100%;
  display: inline-block;
}

.ksp-account-display .left {
  color: #fff;
  padding-left: 2.5em;
}

.ksp-account-display .left > * {
  display: block;
  height: 33%;
  vertical-align: middle;
  vert-align: middle;
  text-align: left;
  position: relative;
}

.ksp-account-display .left > .logo-powered {
  background-image: url('../../Content/images/ksp-logo-kheiron_powered.png');
  background-repeat: no-repeat;
  background-position: left center;
  -ms-background-size: 200px auto;
  background-size: 200px auto;
}

.ksp-account-display .left > *:last-child { height: 34%; }

.ksp-account-display .left .logo-land {
  height: 130px;
  width: 50px;
  display: inline-block;
  vertical-align: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  position: absolute;
}

.ksp-account-display .left .logo-land.linkedin {
  background-image: url('../../Content/images/ksp-land-linkedin.png');
  bottom: 0;
  left: 0px;
}

.ksp-account-display .left .logo-land.twitter {
  background-image: url('../../Content/images/ksp-land-twitter.png');
  bottom: 0;
  left: 50px;
}

.ksp-account-display .left .logo-land.facebook {
  background-image: url('../../Content/images/ksp-land-facebook.png');
  bottom: 0;
  left: 100px;
}

.ksp-account-display .left .logo-land.email {
  background-image: url('../../Content/images/ksp-land-email.png');
  bottom: 0;
  left: 150px;
  width: 200px;
  padding-left: 55px;
  padding-top: 4px;
  color: #fff;
}

.ksp-account-display .right { padding: 5rem 5rem 0 5rem; }

.ksp-account-display .right > div {
  background-image: url('../../Content/images/ksp-logo-tree.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  -ms-background-size: contain;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.ksp-account-display .ksp-content-img {
  background-image: url('../../Content/images/ksp-logo-tree.png');
  background-repeat: no-repeat;
  background-position: center center;
  -ms-background-size: contain;
  background-size: contain;
  display: inline-block;
  width: 20.5625rem;
  height: 35.0625rem;
}

.ksp-account-header {
  padding: 0.625rem 0;
  width: 100%;
  top: 0;
  text-align: center;
}

.ksp-account-header > div {
  background-image: url('../../Content/images/ksp-logo-kheiron-service-platform-dark.svg');
  background-repeat: no-repeat;
  -moz-background-position-y: center;
  -o-background-position-y: center;
  background-position-y: center;
  -ms-background-size: contain;
  background-size: contain;
  height: 4.375rem;
  width: 10.6875rem;
  display: inline-block;
}

.ksp-divider {
  padding-top: 0.625rem;
  display: block;
  width: 100%;
}

#ExtLoginBtn, #FgtBtn, #RegBtn { 
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

#ksp-lang-select {
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
}

#ksp-lang-select > div:not(.menu) {
  line-height: 1.875rem;
  -moz-min-width: 1.875rem;
  -ms-min-width: 1.875rem;
  -o-min-width: 1.875rem;
  -webkit-min-width: 1.875rem;
  min-width: 1.875rem;
  text-align: center;
}

.ksp-account-footer {
  padding: 0.625rem 0;
  width: 100%;
  bottom: 0;
  position: relative;
  font-size: 0.9rem;
}

.ksp-account-footer-desc {
  width: 60%;
  display: inline-block;
  padding-left: 0.625rem;
}

.ksp-account-footer-logo {
  display: inline-block;
  margin-right: 0.625rem;
  float: right;
}

.ksp-account-footer-logo > a > div {
  background-image: url('../../Content/images/ksp-logo-iothink.png');
  background-repeat: no-repeat;
  -ms-background-size: contain;
  background-size: contain;
  height: 2.5rem;
  width: 9.375rem;
}

a {
  color: #3D3E3E;
  text-decoration: none;
}

input,
select {
  color: #3D3E3E;
  border: 1px solid #3D3D3E;
}

/* FORM */

.ui.form .field > label,
.ui.form .field label {
  text-align: left;
  color: #3D3E3E;
}

@media screen and (max-width: 1000px) {
  .ksp-account-display > div { display: none; }
}

@media screen and (max-width: 640px) {
  .ksp-account-container {
    max-width: none;
    -moz-min-width: 19.375rem;
    -ms-min-width: 19.375rem;
    -o-min-width: 19.375rem;
    -webkit-min-width: 19.375rem;
    min-width: 19.375rem;
    width: 100%;
    height: 100%;
    float: none;
    background-color: white;
  }

  .ksp-account-display { display: none; }

  .ksp-account-footer-desc {
    width: 100%;
    display: inline-block;
  }

  .ksp-account-footer-logo {
    width: 100%;
    margin: 0;
    float: none;
  }

  .ksp-account-footer-logo > a {
    width: 100%;
    display: inline-block;
    text-align: center;
  }

  .ksp-account-footer-logo > a > div { display: inline-block; }
}

.ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="url"], .ui.form textarea, .ui.dropdown, .ui.selection.dropdown, .ui.dropdown .menu, .ui.dropdown .menu > .item, .ui.selection.dropdown .menu, .ui.form .ui.dropdown .menu > .item, .ui.form .ui.selection.dropdown .menu > .item {
  background-color: #fff !important;
  color: #2b2b2b !important;
}

.ui.form input:not([type]):focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="number"]:focus, .ui.form input[type="password"]:focus, .ui.form input[type="search"]:focus, .ui.form input[type="tel"]:focus, .ui.form input[type="time"]:focus, .ui.form input[type="text"]:focus, .ui.form input[type="url"]:focus, .ui.form input:-webkit-autofill:focus, .ui.form textarea:focus, .ui.form .field.field input:-webkit-autofill:focus, .ui.form .ui.dropdown:focus, .ui.form .ui.dropdown:-webkit-autofill:focus, .ui.form .ui.dropdown.active, .ui.form .ui.dropdown.active, .ui.form .ui.dropdown .menu, .ui.form .ui.selection.dropdown .menu {
  background-color: #fff;
}

.ui.form input:-webkit-autofill,
.ui.form input:-webkit-autofill:hover,
.ui.form input:-webkit-autofill:focus,
.ui.form input:-webkit-autofill:active,
.ui.form .field.field input:-webkit-autofill,
.ui.form .field.field input:-webkit-autofill:hover,
.ui.form .field.field input:-webkit-autofill:focus,
.ui.form .field.field input:-webkit-autofill:active,
.ui.dropdown:-webkit-autofill,
.ui.dropdown:-webkit-autofill:hover,
.ui.dropdown:-webkit-autofill:focus,
.ui.dropdown:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: #2b2b2b !important;
  border-color: rgba(34, 36, 38, 0.15) !important;
}

.ui.checkbox { width: auto !important; }