/*
$color-background: #191a1f;
$color-border: #35344a;
$color-button: #5a71d7;
$color-title: white;
$color-text: #e4e6eb;
$color-icon: #bebebe;
$white: #202229;
$dark: #e4e6eb;
$gray-100: #242935;
$gray-200: #242935;
$gray-300: #252a36;
$gray-400: #252a36;
*/
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.loader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white url("../images/loader.svg") 50% 50% no-repeat;
  background-size: 40px;
  transition: all 0.4s ease; }

.modal {
  background: white;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2);
  border: 0;
  padding: 0;
  max-width: 75vw;
  left: 0 !important;
  top: 0;
  right: 0;
  margin: 0 auto !important; }
  .modal.staff-modal, .modal.history-modal {
    height: 70% !important; }
  .modal .inner-wrapper {
    border: 0;
    padding: 16px; }
    .modal .inner-wrapper header {
      padding: 16px 0 !important;
      border-color: #e8e8e9; }
      .modal .inner-wrapper header h2 {
        text-align: left;
        margin: 0 !important;
        font-weight: 700;
        color: var(--color-title);
        font-family: var(--font-family-monospace); }
    .modal .inner-wrapper .staff_actions h3 {
      font-size: 18px; }
    .modal .inner-wrapper .staff_actions label {
      margin-bottom: 0;
      margin-top: 4px;
      margin-right: 8px; }
    .modal .inner-wrapper .staff_actions .btn-link {
      color: var(--color-link);
      padding: 4px 10px;
      margin-top: 10px; }
    .modal .inner-wrapper form {
      padding: 20px 0; }
      .modal .inner-wrapper form button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: white;
        background-image: none;
        background: var(--color-button);
        border: 0;
        border-radius: 0px;
        text-shadow: none;
        box-shadow: none;
        outline: 0 !important;
        font-size: 0.95rem;
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        letter-spacing: normal;
        transition: all 0.4s ease;
        font-family: var(--font-family-monospace, "Space Grotesk", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        text-transform: none; }
        .modal .inner-wrapper form button:focus, .modal .inner-wrapper form button:active, .modal .inner-wrapper form button:hover, .modal .inner-wrapper form button:hover:not(:disabled) {
          background-image: none;
          background: var(--color-button) !important;
          color: white;
          border: 0;
          box-shadow: none !important;
          transition: all 0.4s ease;
          transform: scale(1.02, 1.02);
          outline: 0 !important; }
        .modal .inner-wrapper form button:disabled {
          background: #f2f3f3;
          color: #676666; }

#sign-in-form
> a.pgn__hyperlink.default-link.standalone-link.btn.btn-link.btn-sm.text-body.p-0.mb-4 {
  display: none; }

#saml-default {
  background: #1f3037;
  color: white; }

#root {
  background-color: #f6f5ea; }

.layout {
  background-image: url("https://s3.eu-central-1.amazonaws.com/cdn.cavilam.moocit.com/images/login_bg_img.png");
  background-repeat: no-repeat;
  background-size: 55%;
  min-height: 100vh;
  border: 2rem solid #f6f5ea;
  background-color: rgba(255, 255, 255, 0.6);
  border-top-left-radius: 100px; }
  @media screen and (max-width: 1200px) {
    .layout {
      border-top-left-radius: 0px;
      border: 0;
      justify-content: flex-start; } }
  .layout .company-logo {
    width: auto;
    height: 60px;
    position: static !important; }
  .layout .banner__image {
    background-color: transparent !important; }
    .layout .banner__image.large-layout {
      background-size: 420px;
      background-position: bottom; }
      .layout .banner__image.large-layout .company-logo {
        height: 80px; }
    @media screen and (max-width: 1200px) {
      .layout .banner__image {
        background-image: none !important;
        text-align: center; } }
    .layout .banner__image > div {
      min-height: auto !important; }
      .layout .banner__image > div h1 {
        display: none !important; }
  .layout .content {
    margin-top: 0;
    padding-top: 4rem;
    justify-content: flex-start; }
    .layout .content h1 {
      font-size: 2.5rem;
      padding-bottom: 1rem;
      line-height: 1.05;
      color: var(--brand) !important; }
      .layout .content h1 span {
        display: block; }
    @media screen and (max-width: 768px) {
      .layout .content {
        padding-top: 1rem; }
        .layout .content h1 {
          font-size: 1.5rem;
          padding-bottom: 0.5rem;
          line-height: 1.5rem;
          padding-left: 1rem; } }