@charset "UTF-8";@font-face {
  font-family: lexis-nexis-icons;
  src: url("../fonts/lexis-nexis-icons-a8b8c7fa.ttf?6c0f9a") format("truetype"),url("../fonts/lexis-nexis-icons-e651f52f.woff?6c0f9a") format("woff"),url("../fonts/lexis-nexis-icons-196a4808.svg?6c0f9a#lexis-nexis-icons") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: block
}

.cipher-title-container {
  display: flex;
  position: relative;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  font: bold 32px / 1.25 Lato, NotoSansJP, NotoSansKR, NotoSansSC, serif;
  margin-bottom: 40px;
}

.cipher-arrow-container {
  position: absolute;
  left: 0px;
  top: 2px;
  height: 100%;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
}

.cipher-arrow-left {
  font-family: lexis-nexis-icons !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cipher-arrow-left:before {
  content: "";
}

a {
  color: inherit;
}

a:active, a:focus, a:hover, .login-pf a:hover {
  color: rgb(3, 155, 229);
}

.pf-c-button.pf-m-primary, .pf-c-button.pf-m-primary:active, .pf-c-button.pf-m-primary:focus, .pf-c-button.pf-m-primary:hover {
  align-items: center;
  height: 40px;
  padding-left: 24px;
  padding-right: 24px;
  font: 600 16px / 1 Lato, NotoSansJP, NotoSansKR, NotoSansSC, serif;
  border-radius: 4px;
  border: 0px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  background-image: linear-gradient(72deg, rgb(221, 44, 0), rgb(217, 27, 90));

}

.pf-c-button.pf-m-primary:hover {
  background-image: linear-gradient(72deg, rgb(246, 39, 28), rgb(236, 64, 122));
  box-shadow: none;
}

#kc-form-buttons {
  margin-top: 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group.login-pf-settings {
  margin: 0;
}

.pf-c-form-control,
.pf-c-form-control:-webkit-autofill::first-line,
.pf-c-form-control:-webkit-autofill,
.pf-c-form-control:-webkit-autofill:hover,
.pf-c-form-control:-webkit-autofill:focus,
.pf-c-form-control:-webkit-autofill:active {
  /* Override login button colour */
  --pf-global--primary-color--100: #d91e3e;

  padding: 6px 12px !important;
  border-radius: 3px;
  border: 2px solid rgb(172, 186, 201);
  background-color: white;
  width: 100%;

  font: 400 16px / 1.5 Lato, NotoSansJP, NotoSansKR, NotoSansSC, serif;
}

.pf-c-form-control:not(textarea) {
  height: auto;
}

.pf-c-form-control:focus-visible, .pf-c-form-control:active, .pf-c-form-control:focus {
  /* Outline for input fields, when selected */
  /* outline-color: #d91e3e; */
  padding-bottom: 6px;
}

.pf-c-form-control:hover {
  border-color: rgb(104, 124, 150);
}

.cipher-username-input-disabled, .cipher-username-input-disabled:disabled, .cipher-username-input-disabled:hover {
  border-color: rgb(220, 220, 230);
}   

@media (max-width: 500px) {
  /* Ensure phones have narrow width (iPhone forces full-size render when form is focussed, so can overflow...)*/
  .login-pf-page .card-pf {
    max-width: 300px;
    margin: 0 auto;
  }
}

.login-pf body,
.login-pf {
  background: #E6EBEC;
}

.login-pf-page {
  display: flex;
  flex-direction: column;
  -webkit-box-pack: justify;
  justify-content: space-between;
  height: 100vh;

  padding-top: 0;
  color: rgb(33, 33, 33);
  font: 400 15px / 1.475 Lato, NotoSansJP, NotoSansKR, NotoSansSC, serif;

  background-color: rgb(0, 23, 46);
  background-image: url("../img/wave-bright-red.d2b1d693440b6888ea05.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
}

.cipher_header_container {
  padding-left: 15px;
  display: flex;
  flex-basis: 80px;
  align-items: center;
}

@media (min-width: 576px) {
  .cipher_header_container {
    padding-left: 24px;
  }
}

.cipher_header_link {
  display: block;
  background-image: url("../img/classification-logo.png");
  background-repeat: no-repeat;
  background-size: 188px 40px;
  height: 40px;
  width: 188px;
}

.cipher_header_link:hover,
.cipher_header_link:focus,
.cipher_header_link:visited {
  text-decoration: none;
}

.cipher_header_logo {
  display: block;
  background-image: url("../img/cipher-logo-small.png");
  background-repeat: no-repeat;
  background-size: 30px;
  height: 30px;
  width: 34px;
}

@media (min-width: 576px) {
  .cipher_header_logo {
    background-size: 42px 44px;
    height: 44px;
    width: 48px;
  }
}

@media (min-width: 576px) {
  #kc-header {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

#kc-header {
  background-color: #1a3d59;
  height: 56px;
}

#kc-header-wrapper {
  /* Seems like there is no way to share images across different theme types. */
  /* i.e. they must be duplicated in each theme type */
  position: static;
  background-image: url("../img/cipher-logo.png");
  background-repeat: no-repeat;
  height: 56px;
  width: 100%;
  background-position: center;
  margin: 0;
  background-position-x: 15px;
  background-position-y: 6px;
}

#kc-page-title {
  font-weight: 700;
  font-size: 32px;
}

#kc-content {
  /* margin-top: 30px; */
}

#kc-content-wrapper {
  margin-top: 0;
}

#kc-header,
.login-pf .container {
  color: #4d4d4d;
}

#kc-username {
  display: none; /* Hide header on login page 2 (password form) */
}

.login-pf .container .details {
  border: none;
}

.pf-c-button[aria-label="Show password"] {
  display: none;
}

.login-pf-signup {
  margin: 40px 0 0 !important;
}

.cipher-login-form {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  background-color: rgb(255, 255, 255);
  width: 364px;
  margin: 15px auto;
  padding: 32px 32px;
  line-height: 1.5;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 12px 0px;
}

.cipher-form-options-container {
  padding: 10px 0 20px;
  color: rgb(3, 155, 229);
}

.pf-c-form__label {
  color: rgb(69, 90, 100);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.alert-warning {
  border: none;
}

.cipher-lnip-login-button, .cipher-lnip-login-button:hover  {
  color: #363636 !important;
  text-decoration: none !important;
  font-size: 14px;
  padding: 8px;
  border: 1px solid lightgray;

  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.cipher-lnip-login-button:hover {
  background-color: #F4F4F5;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}

.cipher-lnip-login-pre-label {
  font-size: 14px;
}

.cipher-footer-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-top: 1px solid rgb(33,33,33);
  padding: 30px;
  min-height: 150px;
  background-color: rgba(19, 42, 67, 0.48);
}

@media (max-width: 500px) {
  .cipher-footer-container {
    flex-direction: column;
    padding: 15px;
  }
}

.lexis-nexis-logo {
  filter: brightness(0) invert(1);
  cursor: pointer;
  width: 200px;
}

@media (max-width: 500px) {
  .lexis-nexis-logo {
    width: 120px;
    position: relative;
    left: -4px;
  }
}

.relx-logo {  
  filter: brightness(0) invert(1);
  cursor: pointer;
  width: 100px;
  margin-top: 15px;
  position: relative;
  left: -9px;
}

@media (max-width: 500px) {
  .relx-logo {
    width: 75px;
    position: relative;
    left: -5px;
  }
}

.cipher-footer-rows-container {
  display: flex;
  flex-direction: column;
}

.cipher-footer-row-item {
  margin-top: 15px;
  color: white;
}

.cipher-footer-row-item a, a.cipher-footer-row-item {
  color: white !important;
}

.cipher-footer-row-item:first-of-type {
  margin-top: 0;
}

@media (max-width: 500px) {
  .cipher-footer-row-item:first-of-type {
    margin-top: 15px;
  }
}

.cipher-or-container {
  line-height: 0.1em;
  text-align: center;
  border-bottom: 1px solid #78909c;
  font-weight: bold;
  margin: 60px 0 30px;
}

.cipher-or-inner {
  padding: 0 20px;
  background: #fff
}

.cipher-button-sso {
  outline: 0 !important;
  background: none !important;
  color: #00172e !important;
  border: 2px solid rgb(19,42,67) !important;
}

.cipher-button-sso:hover {
  outline: 0 !important;
  box-shadow: rgb(236, 239, 241) 0px 0px 0px 2px !important
}

.cipher-sso-info-container {
  display: inline-block;
  margin-left: 0.5rem;
  cursor: pointer;
}

.cipher-sso-info-container:hover .cipher-sso-info {
  display: block;
}

.cipher-sso-info {
  display: none;
  background: #edeff1;
  margin-left: -362px;
  margin-top: 24px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  width: 380px;
  height: 100px;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
}

.cipher-sso-button-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}