/* Custom CSS for Certifications
*/

:root {
  
}

.CertBodyWrapper {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1200 / 627;
  container-type: inline-size;
  overflow: hidden;
  color: var(--box-white) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  color: #FFFFFF !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.TopBlueBar { display: none !important; }

.CertContentWrapper {
  position: relative;
  height: 100%;
  min-height: 0;
  position: absolute !important;
  
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: block !important;
  padding: 144px 0 0 73px !important;
  padding: 0 !important;
  text-align: left !important;
  z-index: 2;
}

.CertCertifiedText { display: none !important; }

.CertLearnerName {
  position: absolute !important;
  top: 26.50%;
  left: 6.08%;
  width: 688px;
  width: 57.36%;
  max-width: 57.3%;
  height: 91px;
  margin: 0 0 28px !important;
  font-family: "Inter Display", Inter, Arial, Helvetica, sans-serif !important;
  font-size: 72.45px !important;
  height: 14.51%;
  margin: 0 !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 5.4338cqw !important;
  font-weight: 500 !important;
  line-height: 126% !important;
  letter-spacing: 0 !important;
  color: var(--box-white) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.CertHasCompletedText {
  position: absolute !important;
  top: 269.6px;
  left: 74px;
  width: 653px;
  top: 47.00%;
  left: 6.17%;
  width: 62%;
  max-width: none !important;
  height: 92px;
  height: 14.67%;
  margin: 0 !important;
  font-family: "Inter Display", Inter, Arial, Helvetica, sans-serif !important;
  font-size: 36.22px !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 2.7165cqw !important;
  font-weight: 400 !important;
  line-height: 126% !important;
  letter-spacing: 0 !important;
  color: var(--box-white) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* The certification title is already part of the supplied seal artwork. */
/* The certification title is also rendered dynamically in the left text block. */
.CertHasCompletedText span {
  display: block !important;
  color: var(--box-white) !important;
  font-family: inherit !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  margin-top: 0 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.CertHasCompletedText span br {
  display: none !important;
}

/* Keep the title container on its own line, but do not let WorkRamp's
   nested word fragments become separate block-level lines. */
.CertHasCompletedText span span {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
}

.CertHasCompletedText span,
.CertHasCompletedText span * {
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: 126% !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  white-space: nowrap !important;
}

.CertLearnerName *,
.CertHasCompletedText *,
.CertEarnedOn *,
.CertExpiration * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.CertEarnedOn,
.CertExpiration {
  position: absolute !important;
  left: 74px;
  left: 6.17% !important;
  padding: 0 !important;
  text-indent: 0 !important;
  margin: 0 !important;
  font-family: "Inter Display", Inter, Arial, Helvetica, sans-serif !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  color: var(--box-white) !important;
  color: #FFFFFF !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 5 !important;
}

.CertEarnedOn {
  top: 435.6px;
  width: 522.4px;
  height: 36px;
  font-size: 28.98px !important;
  top: 74.00%;
  width: 43.53%;
  height: 5.74%;
  font-size: 2.1735cqw !important;
}

.CertExpiration {
  top: 482.8px;
  left: 74px;
  width: 365.68px;
  height: 26px;
  font-size: 20.29px !important;
  color: var(--box-white) !important;
  top: 81.25%;
  width: 30.47%;
  height: 4.15%;
  font-size: 1.5217cqw !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: .6 !important;
}

/* The background already contains the Box wordmark and seal. */
.CertLogo { display: none !important; }

@media (max-width: 767px) {
  .CertBodyWrapper,
  .CertContentWrapper { min-height: 420px; }

  .CertContentWrapper { padding: 120px 7% 0 !important; }

  .CertLearnerName,
  .CertHasCompletedText { max-width: 58%; }

  .CertLearnerName { margin-bottom: 18px !important; }

}