/* =========================================
   RESET
   ========================================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: #34495e;

  overflow-x: hidden;
}


/* =========================================
   BACKGROUND
   ========================================= */

.index-wrapper {
  width: 100%;
  min-height: 100vh;

  background:
    #1830a9
    url("assets/maritime-background.jpg")
    no-repeat
    center center;

  background-size: cover;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 55px 18px;
}


.page-center {
  width: 100%;
  max-width: 900px;

  margin: 0 auto;
}


/* =========================================
   MAIN CARD
   ========================================= */

.main-card {
  position: relative;

  width: 100%;
  min-height: 520px;

  border-radius: 10px;

  background:
    linear-gradient(
      -43deg,
      #e74c3c 0%,
      #0031a5 88%
    );

  box-shadow:
    0 6px 14px
    rgba(0, 16, 54, 0.55);

  color: white;

  text-shadow:
    0 1px 3px
    rgba(0, 0, 0, 0.5);
}


/* =========================================
   LEFT
   ========================================= */

.left-panel {
  width: calc(100% - 470px);

  min-height: 520px;
}


.left-content {
  min-height: 520px;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;

  text-align: center;

  padding: 30px 15px;
}


.marina-logo {
  display: block;

  width: 250px;
  height: auto;

  max-height: 275px;

  object-fit: contain;

  margin-bottom: 30px;
}


.welcome {
  margin: 0;

  color: white;

  font-size: 30px;

  font-weight: 300;

  line-height: 1.4;
}


/* =========================================
   RIGHT PANEL
   ========================================= */

.right-panel {
  position: static;
}


.verification-box {
  position: absolute;

  width: 450px;

  min-height: 513px;

  right: 15px;

  top: -35px;

  padding:
    28px
    28px
    26px;

  border-radius: 10px;

  background: #2c3e50;

  box-shadow:
    0 6px 14px
    rgba(0, 16, 54, 0.55);

  overflow: hidden;
}


.verification-box::after {
  content: "";

  position: absolute;

  width: 140px;
  height: 172px;

  right: 16px;
  bottom: 10px;

  background:
    url("assets/marina-logo-transparent.png")
    no-repeat
    center;

  background-size: contain;

  opacity: 0.085;

  filter:
    grayscale(1)
    brightness(2);

  pointer-events: none;
}


.verification-box h1 {
  position: relative;

  z-index: 2;

  margin:
    0
    0
    12px;

  color: white;

  font-size: 30px;

  font-weight: 300;

  line-height: 1.2;
}


.divider {
  position: relative;

  z-index: 2;

  height: 1px;

  margin-bottom: 20px;

  background:
    rgba(0, 0, 0, 0.13);
}


/* =========================================
   FORM
   ========================================= */

.form-group {
  position: relative;

  z-index: 2;

  margin-bottom: 16px;
}


.form-group label {
  display: block;

  margin-bottom: 7px;

  color: white;

  font-size: 14px;

  font-weight: 600;
}


.form-control {
  display: block;

  width: 100%;
  height: 42px;

  padding: 7px 13px;

  border:
    2px solid
    #868686;

  border-radius: 5px;

  outline: none;

  background: #373737;

  color: white;

  font-family: inherit;

  font-size: 16px;
}


.form-control:focus {
  border-color: #66afe9;
}


select.form-control {
  cursor: pointer;
}


/* =========================================
   SERIAL NUMBER FIELD
   ========================================= */

.sn-wrapper {
  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transform:
    translateY(-6px);

  transition:
    max-height 0.22s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}


.sn-wrapper.show {
  max-height: 100px;

  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================
   STATUS
   ========================================= */

.inline-status {
  position: relative;

  z-index: 2;

  min-height: 21px;

  margin:
    -5px
    0
    10px;

  color: #ffd989;

  font-size: 13px;

  line-height: 1.35;
}


/* =========================================
   BUTTONS
   ========================================= */

.button {
  position: relative;

  z-index: 2;

  display: block;

  width: 100%;
  height: 42px;

  border: 0;

  border-radius: 5px;

  color: white;

  font-family: inherit;

  font-size: 16px;

  cursor: pointer;
}


.button:disabled {
  opacity: 0.55;

  cursor: not-allowed;
}


.check-button {
  margin-top: 3px;

  background: #1777ca;
}


.check-button:not(:disabled):hover {
  background: #126bb8;
}


.cancel-button {
  margin-top: 9px;

  background: #1189f4;
}


.cancel-button:hover {
  background: #087de3;
}


/* =========================================
   UNOFFICIAL IDENTIFIER
   ========================================= */

.demo-badge {
  position: fixed;

  right: 10px;
  bottom: 8px;

  z-index: 500;

  padding:
    5px
    8px;

  border:
    1px solid
    rgba(255, 255, 255, 0.45);

  border-radius: 4px;

  background:
    rgba(20, 28, 35, 0.88);

  color: white;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-shadow: none;
}



/* =========================================
   CERTIFICATE MODAL
   ========================================= */

body.modal-open {
  overflow: hidden;
}


.certificate-overlay {
  /*
    Completely hidden until .show
  */

  display: none;

  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  z-index: 999999;

  background:
    rgba(0, 0, 0, 0.72);

  padding: 18px;

  align-items: center;
  justify-content: center;
}


/* SHOW CERTIFICATE */

.certificate-overlay.show {
  display: flex;
}


/* =========================================
   LARGE VIEWER
   ========================================= */

.certificate-viewer {
  position: relative;

  /*
    Large centered viewer.
  */

  width: min(
    920px,
    calc(100vw - 36px)
  );

  height:
    calc(100vh - 36px);

  max-height: 1100px;

  margin: auto;

  background: white;

  border-radius: 4px;

  overflow: hidden;

  box-shadow:
    0
    18px
    60px
    rgba(0, 0, 0, 0.58);
}


/* =========================================
   PDF IFRAME
   ========================================= */

.certificate-frame {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  min-width: 100%;
  min-height: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  background: white;
}


/* =========================================
   CLOSE BUTTON
   ========================================= */

.certificate-close {
  position: absolute;

  right: 9px;
  bottom: 9px;

  z-index: 100;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 29px;
  height: 29px;

  padding: 0;

  border:
    1px solid
    rgba(0, 0, 0, 0.28);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.97);

  color: #444;

  font-family: Arial, sans-serif;

  font-size: 21px;

  line-height: 1;

  cursor: pointer;

  box-shadow:
    0
    2px
    7px
    rgba(0, 0, 0, 0.3);
}


.certificate-close:hover {
  color: #147bd1;

  background: white;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 930px) {

  .index-wrapper {
    padding:
      58px
      14px
      80px;
  }


  .page-center {
    max-width: 650px;
  }


  .main-card {
    min-height: 930px;
  }


  .left-panel {
    width: 100%;

    min-height: 500px;
  }


  .left-content {
    min-height: 500px;
  }


  .verification-box {
    top: 430px;

    right: 50%;

    transform:
      translateX(50%);

    width:
      min(
        450px,
        calc(100% - 30px)
      );
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 650px) {

  .index-wrapper {
    padding:
      30px
      8px
      70px;
  }


  .main-card {
    min-height: 900px;
  }


  .left-panel,
  .left-content {
    min-height: 450px;
  }


  .marina-logo {
    width: 205px;
  }


  .welcome {
    font-size: 25px;
  }


  .verification-box {
    top: 390px;

    padding:
      24px
      20px;
  }


  .verification-box h1 {
    font-size: 26px;
  }


  /* Certificate takes almost whole mobile screen */

  .certificate-overlay {
    padding: 4px;
  }


  .certificate-viewer {
    width:
      calc(100vw - 8px);

    height:
      calc(100vh - 8px);

    max-height: none;

    border-radius: 2px;
  }


  .certificate-close {
    width: 28px;
    height: 28px;

    right: 7px;
    bottom: 7px;
  }

}