@peculiar/fortify-webcomponents/dist/collection/components/fortify-enrollment/fortify-enrollment.css

Web-components for creating CSR or Certificate and viewing certificates list using Fortify

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--pv-font-family, inherit);
}

/**
 * Typography variants.
 */
.t-h1 {
  font-weight: var(--pv-text-h1-weight);
  font-size: var(--pv-text-h1-size);
  line-height: var(--pv-text-h1-height);
  letter-spacing: var(--pv-text-h1-spacing);
}

.t-h2 {
  font-weight: var(--pv-text-h2-weight);
  font-size: var(--pv-text-h2-size);
  line-height: var(--pv-text-h2-height);
  letter-spacing: var(--pv-text-h2-spacing);
}

.t-h3 {
  font-weight: var(--pv-text-h3-weight);
  font-size: var(--pv-text-h3-size);
  line-height: var(--pv-text-h3-height);
  letter-spacing: var(--pv-text-h3-spacing);
}

.t-h4 {
  font-weight: var(--pv-text-h4-weight);
  font-size: var(--pv-text-h4-size);
  line-height: var(--pv-text-h4-height);
  letter-spacing: var(--pv-text-h4-spacing);
}

.t-h5 {
  font-weight: var(--pv-text-h5-weight);
  font-size: var(--pv-text-h5-size);
  line-height: var(--pv-text-h5-height);
  letter-spacing: var(--pv-text-h5-spacing);
}

.t-s1 {
  font-weight: var(--pv-text-s1-weight);
  font-size: var(--pv-text-s1-size);
  line-height: var(--pv-text-s1-height);
  letter-spacing: var(--pv-text-s1-spacing);
}

.t-s2 {
  font-weight: var(--pv-text-s2-weight);
  font-size: var(--pv-text-s2-size);
  line-height: var(--pv-text-s2-height);
  letter-spacing: var(--pv-text-s2-spacing);
}

.t-b1 {
  font-weight: var(--pv-text-b1-weight);
  font-size: var(--pv-text-b1-size);
  line-height: var(--pv-text-b1-height);
  letter-spacing: var(--pv-text-b1-spacing);
}

.t-b2 {
  font-weight: var(--pv-text-b2-weight);
  font-size: var(--pv-text-b2-size);
  line-height: var(--pv-text-b2-height);
  letter-spacing: var(--pv-text-b2-spacing);
}

.t-b3 {
  font-weight: var(--pv-text-b3-weight);
  font-size: var(--pv-text-b3-size);
  line-height: var(--pv-text-b3-height);
  letter-spacing: var(--pv-text-b3-spacing);
}

.t-btn1 {
  font-weight: var(--pv-text-btn1-weight);
  font-size: var(--pv-text-btn1-size);
  line-height: var(--pv-text-btn1-height);
  letter-spacing: var(--pv-text-btn1-spacing);
}

.t-btn2 {
  font-weight: var(--pv-text-btn2-weight);
  font-size: var(--pv-text-btn2-size);
  line-height: var(--pv-text-btn2-height);
  letter-spacing: var(--pv-text-btn2-spacing);
}

.t-c1 {
  font-weight: var(--pv-text-c1-weight);
  font-size: var(--pv-text-c1-size);
  line-height: var(--pv-text-c1-height);
  letter-spacing: var(--pv-text-c1-spacing);
}

.t-c2 {
  font-weight: var(--pv-text-c2-weight);
  font-size: var(--pv-text-c2-size);
  line-height: var(--pv-text-c2-height);
  letter-spacing: var(--pv-text-c2-spacing);
}

/**
 *
 */
/**
 * Color variants.
 */
.c-primary-tint-5 {
  --pv-color-base: var(--pv-color-primary-tint-5);
}

.c-primary-tint-4 {
  --pv-color-base: var(--pv-color-primary-tint-4);
}

.c-primary-tint-3 {
  --pv-color-base: var(--pv-color-primary-tint-3);
}

.c-primary-tint-2 {
  --pv-color-base: var(--pv-color-primary-tint-2);
}

.c-primary-tint-1 {
  --pv-color-base: var(--pv-color-primary-tint-1);
}

.c-primary {
  --pv-color-base: var(--pv-color-primary);
}

.c-primary-shade-1 {
  --pv-color-base: var(--pv-color-primary-shade-1);
}

.c-primary-shade-2 {
  --pv-color-base: var(--pv-color-primary-shade-2);
}

.c-primary-shade-3 {
  --pv-color-base: var(--pv-color-primary-shade-3);
}

.c-primary-shade-4 {
  --pv-color-base: var(--pv-color-primary-shade-4);
}

.c-primary-shade-5 {
  --pv-color-base: var(--pv-color-primary-shade-5);
}

.c-primary-contrast {
  --pv-color-base: var(--pv-color-primary-contrast);
}

.c-secondary-tint-5 {
  --pv-color-base: var(--pv-color-secondary-tint-5);
}

.c-secondary-tint-4 {
  --pv-color-base: var(--pv-color-secondary-tint-4);
}

.c-secondary-tint-3 {
  --pv-color-base: var(--pv-color-secondary-tint-3);
}

.c-secondary-tint-2 {
  --pv-color-base: var(--pv-color-secondary-tint-2);
}

.c-secondary-tint-1 {
  --pv-color-base: var(--pv-color-secondary-tint-1);
}

.c-secondary {
  --pv-color-base: var(--pv-color-secondary);
}

.c-secondary-shade-1 {
  --pv-color-base: var(--pv-color-secondary-shade-1);
}

.c-secondary-shade-2 {
  --pv-color-base: var(--pv-color-secondary-shade-2);
}

.c-secondary-shade-3 {
  --pv-color-base: var(--pv-color-secondary-shade-3);
}

.c-secondary-shade-4 {
  --pv-color-base: var(--pv-color-secondary-shade-4);
}

.c-secondary-shade-5 {
  --pv-color-base: var(--pv-color-secondary-shade-5);
}

.c-secondary-contrast {
  --pv-color-base: var(--pv-color-secondary-contrast);
}

.c-wrong-tint-5 {
  --pv-color-base: var(--pv-color-wrong-tint-5);
}

.c-wrong-tint-4 {
  --pv-color-base: var(--pv-color-wrong-tint-4);
}

.c-wrong-tint-3 {
  --pv-color-base: var(--pv-color-wrong-tint-3);
}

.c-wrong-tint-2 {
  --pv-color-base: var(--pv-color-wrong-tint-2);
}

.c-wrong-tint-1 {
  --pv-color-base: var(--pv-color-wrong-tint-1);
}

.c-wrong {
  --pv-color-base: var(--pv-color-wrong);
}

.c-wrong-shade-1 {
  --pv-color-base: var(--pv-color-wrong-shade-1);
}

.c-wrong-shade-2 {
  --pv-color-base: var(--pv-color-wrong-shade-2);
}

.c-wrong-shade-3 {
  --pv-color-base: var(--pv-color-wrong-shade-3);
}

.c-wrong-shade-4 {
  --pv-color-base: var(--pv-color-wrong-shade-4);
}

.c-wrong-shade-5 {
  --pv-color-base: var(--pv-color-wrong-shade-5);
}

.c-wrong-contrast {
  --pv-color-base: var(--pv-color-wrong-contrast);
}

.c-attention-tint-5 {
  --pv-color-base: var(--pv-color-attention-tint-5);
}

.c-attention-tint-4 {
  --pv-color-base: var(--pv-color-attention-tint-4);
}

.c-attention-tint-3 {
  --pv-color-base: var(--pv-color-attention-tint-3);
}

.c-attention-tint-2 {
  --pv-color-base: var(--pv-color-attention-tint-2);
}

.c-attention-tint-1 {
  --pv-color-base: var(--pv-color-attention-tint-1);
}

.c-attention {
  --pv-color-base: var(--pv-color-attention);
}

.c-attention-shade-1 {
  --pv-color-base: var(--pv-color-attention-shade-1);
}

.c-attention-shade-2 {
  --pv-color-base: var(--pv-color-attention-shade-2);
}

.c-attention-shade-3 {
  --pv-color-base: var(--pv-color-attention-shade-3);
}

.c-attention-shade-4 {
  --pv-color-base: var(--pv-color-attention-shade-4);
}

.c-attention-shade-5 {
  --pv-color-base: var(--pv-color-attention-shade-5);
}

.c-success-tint-5 {
  --pv-color-base: var(--pv-color-success-tint-5);
}

.c-success-tint-4 {
  --pv-color-base: var(--pv-color-success-tint-4);
}

.c-success-tint-3 {
  --pv-color-base: var(--pv-color-success-tint-3);
}

.c-success-tint-2 {
  --pv-color-base: var(--pv-color-success-tint-2);
}

.c-success-tint-1 {
  --pv-color-base: var(--pv-color-success-tint-1);
}

.c-success {
  --pv-color-base: var(--pv-color-success);
}

.c-success-shade-1 {
  --pv-color-base: var(--pv-color-success-shade-1);
}

.c-success-shade-2 {
  --pv-color-base: var(--pv-color-success-shade-2);
}

.c-success-shade-3 {
  --pv-color-base: var(--pv-color-success-shade-3);
}

.c-success-shade-4 {
  --pv-color-base: var(--pv-color-success-shade-4);
}

.c-success-shade-5 {
  --pv-color-base: var(--pv-color-success-shade-5);
}

.c-black {
  --pv-color-base: var(--pv-color-black);
}

.c-gray-10 {
  --pv-color-base: var(--pv-color-gray-10);
}

.c-gray-9 {
  --pv-color-base: var(--pv-color-gray-9);
}

.c-gray-8 {
  --pv-color-base: var(--pv-color-gray-8);
}

.c-gray-7 {
  --pv-color-base: var(--pv-color-gray-7);
}

.c-gray-6 {
  --pv-color-base: var(--pv-color-gray-6);
}

.c-gray-5 {
  --pv-color-base: var(--pv-color-gray-5);
}

.c-gray-4 {
  --pv-color-base: var(--pv-color-gray-4);
}

.c-gray-3 {
  --pv-color-base: var(--pv-color-gray-3);
}

.c-gray-2 {
  --pv-color-base: var(--pv-color-gray-2);
}

.c-gray-1 {
  --pv-color-base: var(--pv-color-gray-1);
}

.c-white {
  --pv-color-base: var(--pv-color-white);
}

.c-extra-1 {
  --pv-color-base: var(--pv-color-extra-1);
}

.c-extra-2 {
  --pv-color-base: var(--pv-color-extra-2);
}

/**
 *
 */
.typography {
  color: var(--pv-color-base);
}

.button {
  display: inline-flex;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  outline: none;
  font-family: inherit;
  border-radius: 4px;
  height: calc(var(--pv-size-base) * 7);
  min-width: calc(var(--pv-size-base) * 7);
  padding: 0 calc(var(--pv-size-base) * 3);
  transition: background-color 200ms ease 0s;
  align-items: center;
  justify-content: center;
  gap: var(--pv-size-base);
  font-size: 0;
  transition: background-color 200ms ease 0s, color 200ms ease 0s, box-shadow 200ms ease 0s, border-color 200ms ease 0s;
}
.button_child_text {
  color: inherit;
}
.button:disabled {
  pointer-events: none;
  box-shadow: none;
}
.button_default {
  color: var(--pv-color-secondary);
}
.button_default:hover {
  background-color: var(--pv-color-secondary-tint-5);
}
.button_default:focus-visible {
  background-color: var(--pv-color-secondary-tint-4);
}
.button_default:active {
  background-color: var(--pv-color-secondary-tint-3);
}
.button_default:disabled {
  color: var(--pv-color-gray-7);
}
.button_secondary {
  border-color: var(--pv-color-gray-8);
  color: var(--pv-color-black);
}
.button_secondary:hover {
  background-color: var(--pv-color-gray-3);
}
.button_secondary:focus-visible {
  background-color: var(--pv-color-gray-4);
}
.button_secondary:active {
  background-color: var(--pv-color-gray-5);
}
.button_secondary:disabled {
  color: var(--pv-color-gray-7);
  border-color: var(--pv-color-gray-4);
}
.button_primary {
  background-color: var(--pv-color-primary);
  color: var(--pv-color-primary-contrast);
  box-shadow: var(--pv-shadow-light-low);
}
.button_primary:hover {
  background-color: var(--pv-color-primary-tint-1);
}
.button_primary:focus-visible {
  background-color: var(--pv-color-primary-tint-2);
}
.button_primary:active {
  background-color: var(--pv-color-primary-tint-2);
  box-shadow: var(--pv-shadow-light-medium);
}
.button_primary:disabled {
  color: var(--pv-color-gray-8);
  background-color: var(--pv-color-gray-4);
}

.button_text {
  color: var(--pv-color-base);
  text-decoration: none;
  background: transparent;
  display: inline-flex;
  border: none;
  cursor: pointer;
  transition: opacity 200ms ease 0s;
}
.button_text:hover {
  opacity: 0.7;
}

.layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--pv-color-white);
  border-radius: 3px;
  overflow: hidden;
}
.layout_main {
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
}
.layout_footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  height: calc(var(--pv-size-base) * 10);
  align-items: center;
  padding: 0px calc(var(--pv-size-base) * 3);
  border-top: 1px solid var(--pv-color-gray-5);
  gap: calc(var(--pv-size-base) * 2);
  color: var(--pv-color-footer-text);
  background-color: var(--pv-color-footer);
}
.layout_footer_text {
  color: inherit;
}

.mt_2 {
  margin-top: calc(var(--pv-size-base) * 2);
}

.mt_4 {
  margin-top: calc(var(--pv-size-base) * 4);
}

.mt_6 {
  margin-top: calc(var(--pv-size-base) * 6);
}

.container_status {
  height: 100%;
  text-align: center;
  padding: calc(var(--pv-size-base) * 12);
}
.container_status_logo {
  display: block;
  margin: 0 auto calc(var(--pv-size-base) * 6);
}
.container_status_illustration {
  margin-top: calc(var(--pv-size-base) * 12);
  margin-bottom: calc(var(--pv-size-base) * 10);
}
.container_status_actions {
  display: flex;
  gap: calc(var(--pv-size-base) * 2);
  justify-content: center;
}
.container_status_authorization_number {
  height: calc(var(--pv-size-base) * 8);
  width: calc(var(--pv-size-base) * 6);
  border-radius: 4px;
  border: 1px solid var(--pv-color-gray-5);
  text-align: center;
  line-height: calc(var(--pv-size-base) * 8);
}

.container_actions {
  display: flex;
  gap: calc(var(--pv-size-base) * 2);
}

[hidden] {
  display: none;
}

:host {
  display: block;
  min-height: 550px;
  height: 550px;
}

.enrollment_form {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.enrollment_form_header {
  padding: calc(var(--pv-size-base) * 6) calc(var(--pv-size-base) * 6) calc(var(--pv-size-base) * 4);
}
.enrollment_form_content {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 calc(var(--pv-size-base) * 6);
}
.enrollment_form_footer {
  padding: calc(var(--pv-size-base) * 6);
  justify-content: flex-end;
}
.enrollment_form_group {
  padding: calc(var(--pv-size-base) * 6) 0;
}
.enrollment_form_group:not(:first-child) {
  border-top: 1px solid var(--pv-color-gray-4);
}
.enrollment_form_group_fields {
  display: grid;
  grid-column-gap: calc(var(--pv-size-base) * 2);
  grid-row-gap: calc(var(--pv-size-base) * 2);
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}
.enrollment_form_group_fields_usage {
  display: flex;
  gap: calc(var(--pv-size-base) * 4);
}

form.enrollment_form_content {
  border-top: 1px solid var(--pv-color-gray-5);
  border-bottom: 1px solid var(--pv-color-gray-5);
}

.form_field {
  width: 100%;
  height: calc(var(--pv-size-base) * 7);
  border-radius: 4px;
  padding: 0 calc(var(--pv-size-base) * 2);
  color: var(--pv-color-black);
  outline: none;
  background-color: var(--pv-color-gray-1);
  border: 1px solid var(--pv-color-gray-8);
  appearance: none;
  transition: background-color 200ms ease 0s, color 200ms ease 0s, border-color 200ms ease 0s;
}
.form_field::placeholder {
  color: var(--pv-color-gray-9);
}
.form_field:hover {
  background-color: var(--pv-color-gray-3);
  border-color: var(--pv-color-gray-7);
}
.form_field:focus-visible {
  background-color: var(--pv-color-secondary-tint-5);
  border-color: var(--pv-color-secondary-tint-3);
}
.form_field:disabled {
  background-color: var(--pv-color-gray-1);
  border-color: var(--pv-color-gray-5);
  color: var(--pv-color-gray-7);
}
.form_field_container {
  position: relative;
  margin-top: 3px;
}
.form_field_icon_required {
  position: absolute;
  top: 2px;
  right: 2px;
  color: var(--pv-color-wrong);
}
.form_field_icon_arrow_down {
  position: absolute;
  right: 0px;
  top: calc(50% - 12px);
  pointer-events: none;
  margin: 0px var(--pv-size-base);
  color: var(--pv-color-gray-10);
}
.form_field_result {
  height: calc(100% - var(--pv-size-base));
  resize: none;
  margin: 0;
  overflow: auto;
  padding: calc(var(--pv-size-base) * 2);
}

select.form_field {
  padding-right: calc(var(--pv-size-base) * 6);
}

.form_checkbox {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  outline: 0px;
  border-radius: 2px;
  appearance: none;
  color: var(--pv-color-gray-9);
  border: 2px solid currentcolor;
  background-color: transparent;
  cursor: pointer;
}
.form_checkbox:checked {
  color: var(--pv-color-primary-shade-1);
  background-color: var(--pv-color-primary);
}
.form_checkbox:checked + [aria-hidden] {
  opacity: 1;
}
.form_checkbox_container {
  position: relative;
  width: calc(var(--pv-size-base) * 4);
  height: calc(var(--pv-size-base) * 4);
}
.form_checkbox_icon_check {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: var(--pv-color-white);
  pointer-events: none;
}
.form_checkbox_root {
  display: flex;
  align-items: center;
  gap: calc(var(--pv-size-base) * 2);
  text-transform: capitalize;
}