@websolutespa/payload-plugin-bowl/dist/index.css

Bowl PayloadCms plugin of the BOM Repository

/* src/components/DataTree/DataTree.scss */
:root {
  --rct-item-height: 32px;
  --rct-item-margin: 2px;
  --rct-item-padding: 6px 0px;
  --rct-item-gap: 0px;
  --rct-item-border-radius: 2px;
  --rct-title-container-gap: 2px;
  --rct-bar-offset: 6px;
  --rct-bar-width: 2px;
  --rct-arrow-size: 10px;
  --rct-arrow-container-size: 16px;
  --rct-arrow-padding: 6px;
  --rct-search-width: 120px;
  --rct-search-height: 16px;
  --rct-search-padding: 20px;
  --rct-search-text-offset: calc(var(--rct-search-padding) * 2 + 16px);
  --rct-search-container-width: calc(var(--rct-search-width) + var(--rct-search-text-offset) + var(--rct-search-padding) + 2px);
  --rct-cursor: pointer;
}
:root {
  --rct-color-arrow: #373a3f;
  --rct-color-bar-bg: #0366d6;
  --rct-color-drag-between-line-bg: #0366d6;
  --rct-color-focustree-item-active-bg: #e4e6eb;
  --rct-color-focustree-item-active-text: #4f4f4f;
  --rct-color-focustree-item-draggingover-bg: #ebf0f4;
  --rct-color-focustree-item-draggingover-color: inherit;
  --rct-color-focustree-item-focused-border: #0366d6;
  --rct-color-focustree-item-hover-bg: #f0f2f5;
  --rct-color-focustree-item-hover-text: inherit;
  --rct-color-focustree-item-selected-bg: #f0f2f5;
  --rct-color-focustree-item-selected-text: inherit;
  --rct-color-nonfocustree-item-focused-border: #dbdbdb;
  --rct-color-nonfocustree-item-selected-bg: #e8eaed;
  --rct-color-nonfocustree-item-selected-text: inherit;
  --rct-color-renaming-input-submitbutton-bg-active: #095fc1;
  --rct-color-renaming-input-submitbutton-bg-hover: #0366d6;
  --rct-color-renaming-input-submitbutton-bg: inherit;
  --rct-color-renaming-input-submitbutton-text-active: #ffffff;
  --rct-color-renaming-input-submitbutton-text-hover: #ffffff;
  --rct-color-renaming-input-submitbutton-text: inherit;
  --rct-color-search-border-bottom: #0366d6;
  --rct-color-search-border: #b4b7bd;
  --rct-color-search-highlight-bg: #acccf1;
  --rct-color-tree-bg: transparent;
  --rct-color-tree-focus-outline: transparent;
  --rct-focus-outline: #000000;
  --rct-search-bg: #f8f9fa;
  --rct-search-text: #000000;
}
html[data-theme=dark],
.rct-dark {
  --rct-color-arrow: #ffffff;
  --rct-color-bar-bg: var(--color-success-400);
  --rct-color-drag-between-line-bg: var(--color-success-400);
  --rct-color-focustree-item-focused-border: var(--color-success-400);
  --rct-color-focustree-item-active-bg: #313131;
  --rct-color-focustree-item-active-text: #ffffff;
  --rct-color-focustree-item-draggingover-bg: #313131;
  --rct-color-focustree-item-draggingover-color: #ffffff;
  --rct-color-focustree-item-hover-bg: #373737;
  --rct-color-focustree-item-hover-text: #ffffff;
  --rct-color-focustree-item-selected-bg: #373737;
  --rct-color-focustree-item-selected-text: #ffffff;
  --rct-color-search-border-bottom: var(--color-success-400);
  --rct-color-search-border: #4f4f4f;
  --rct-color-search-highlight-bg: #2f5381;
  --rct-focus-outline: #ffffff;
  --rct-search-bg: #373737;
  --rct-search-text: #ffffff;
}
.rct-tree-root {
  font-family: sans-serif;
  background-color: var(--rct-color-tree-bg);
  padding: 4px 0;
  font-size: 16px;
}
.rct-tree-root-focus {
  outline: 1px solid var(--rct-color-tree-focus-outline);
}
.rct-tree-root.rct-tree-root-focus .rct-tree-item-title-container-selected {
  background-color: var(--rct-color-focustree-item-selected-bg);
  color: var(--rct-color-focustree-item-selected-text);
}
.rct-tree-root.rct-tree-root-focus .rct-tree-item-title-container-focused {
  outline: none;
  border-color: var(--rct-color-focustree-item-focused-border);
}
.rct-tree-root:not(.rct-tree-root-focus) .rct-tree-item-title-container-selected {
  background-color: var(--rct-color-nonfocustree-item-selected-bg);
  color: var(--rct-color-nonfocustree-item-selected-text);
}
.rct-tree-root:not(.rct-tree-root-focus) .rct-tree-item-title-container-focused {
  outline: none;
  border-color: var(--rct-color-nonfocustree-item-focused-border);
}
.rct-tree-items-container {
  margin: 0;
  padding: 0;
  outline: 1px solid var(--theme-elevation-100);
}
.rct-tree-item {
}
.rct-tree-item-li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.rct-tree-item-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.4rem;
  padding: 0.3rem;
}
.rct-tree-item-content .btn {
  margin: 0;
  padding: 0;
  flex: 0 0 60px;
}
.rct-tree-item-content .btn__label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  gap: 0.3em;
}
.rct-tree-item-content .btn__label svg {
  flex: 0 0 1.5em;
  fill: currentColor;
}
.rct-tree-item-title-container {
  display: flex;
  align-items: center;
  column-gap: var(--rct-title-container-gap);
  background-color: unset !important;
}
.rct-tree-item-title-container-dragging-over {
  background-color: var(--rct-color-focustree-item-draggingover-bg);
  color: var(--rct-color-focustree-item-draggingover-color);
  outline: 1px solid var(--color-success-400);
}
.rct-tree-item-title-container-dragging-over .rct-tree-item-button {
  background-color: var(--rct-color-focustree-item-draggingover-bg);
  color: var(--rct-color-focustree-item-draggingover-color);
}
.rct-tree-item-title-container-selected .rct-tree-item-button::before {
  content: "";
  position: absolute;
  top: calc(var(--rct-bar-offset) + var(var(--rct-item-margin)));
  left: calc(-0.5 * var(--rct-bar-width));
  height: calc(var(--rct-item-height) - 2 * var(--rct-bar-offset));
  width: var(--rct-bar-width);
  background-color: var(--rct-color-bar-bg);
  border-radius: 1px;
}
.rct-tree-item-arrow {
  position: absolute;
  z-index: 1;
  margin-left: 4px;
  width: var(--rct-arrow-container-size);
  height: var(--rct-arrow-container-size);
  display: flex;
  justify-content: center;
  align-content: center;
  border-radius: var(--rct-item-border-radius);
  cursor: var(--rct-cursor);
}
.rct-tree-item-arrow svg {
  width: var(--rct-arrow-size);
}
.rct-tree-item-arrow.rct-tree-item-arrow-isFolder:hover {
  background-color: var(--rct-color-focustree-item-hover-bg);
  color: var(--rct-color-focustree-item-hover-text);
}
.rct-tree-item-arrow-path {
  fill: var(--rct-color-arrow);
}
.rct-tree-item-button {
  flex-grow: 1;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--rct-item-height);
  padding: var(--rct-item-padding);
  padding-left: calc(var(--rct-arrow-container-size) + var(--rct-arrow-padding));
  border: none;
  border-radius: var(--rct-item-border-radius);
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  color: inherit;
  outline: none;
  transition: color 100ms ease-out, background-color 100ms ease-out;
  cursor: var(--rct-cursor);
}
.rct-tree-item-button:focus-visible {
  outline: 2px solid var(--rct-focus-outline);
}
.rct-tree-item-button:hover {
  background-color: var(--rct-color-focustree-item-hover-bg);
  color: var(--rct-color-focustree-item-hover-text);
}
.rct-tree-item-button:active {
  background-color: var(--rct-color-focustree-item-active-bg);
  color: var(--rct-color-focustree-item-active-text);
}
.rct-tree-item-button-search-match {
  font-style: italic;
}
.rct-tree-item-search-highlight {
  background-color: var(--rct-color-search-highlight-bg);
}
.rct-tree-item-renaming-form {
  flex-grow: 1;
  display: flex;
}
.rct-tree-item-renaming-input {
  flex-grow: 1;
  background-color: inherit;
  border: none;
  color: inherit;
  outline: none;
}
.rct-tree-item-renaming-submit-button {
  border: none;
  background-color: var(--rct-color-renaming-input-submitbutton-bg);
  border-radius: var(--rct-item-border-radius);
  color: var(--rct-color-renaming-input-submitbutton-text);
  cursor: pointer;
  visibility: hidden;
}
.rct-tree-item-renaming-submit-button:hover {
  background-color: var(--rct-color-renaming-input-submitbutton-bg-hover);
  color: var(--rct-color-renaming-input-submitbutton-text-hover);
}
.rct-tree-item-renaming-submit-button:active {
  background-color: var(--rct-color-renaming-input-submitbutton-bg-active);
  color: var(--rct-color-renaming-input-submitbutton-text-active);
}
.rct-tree-drag-between-line {
  position: absolute;
  right: 0;
  top: -2px;
  height: 3px;
  border-radius: 99px;
  background-color: var(--rct-color-drag-between-line-bg);
}
.rct-tree-drag-between-line-top {
  top: 0px;
}
.rct-tree-drag-between-line-bottom {
  top: -4px;
}
.rct-tree-search-input-container {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--rct-search-container-width);
}
.rct-tree-search-input {
  width: var(--rct-search-width);
  height: var(--rct-search-height);
  padding: var(--rct-search-padding);
  padding-left: var(--rct-search-text-offset);
  margin: 0;
  border: 1px solid var(--rct-color-search-border);
  border-bottom: 2px solid var(--rct-color-search-border-bottom);
  border-radius: var(--rct-item-border-radius);
  background-color: var(--rct-search-bg);
  color: var(--rct-search-text);
}
.rct-tree-search-input:focus {
  outline: none;
}
.rct-tree-input-icon {
  content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22currentColor%22%20fill%3D%22currentColor%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2016%2016%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
  position: fixed;
  transform: translateY(var(--rct-search-padding)) translateX(var(--rct-search-padding));
  z-index: 1;
}
.rct-dark .rct-tree-input-icon {
  content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22%23ffffff%22%20fill%3D%22%23ffffff%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2016%2016%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
}

/* src/components/Category/CategoryTree.scss */
.category-popup__content::-webkit-scrollbar {
  width: 0;
  height: 0;
  border-radius: 0;
}
.category-popup__content::-webkit-scrollbar-button {
  display: none;
}
.category-popup__content::-webkit-scrollbar-button:hover {
  display: none;
}
.category-popup__content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: none;
  border-radius: 0;
}
.category-popup__content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}
.category-popup__content::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 0;
}
.category-popup__content::-webkit-scrollbar-track:hover {
  background-color: transparent;
}
.data-tree__item {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
}
.category-tree__actions {
  flex-grow: 1;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 10px;
  padding: 13.5px 18.75px;
}
.category-tree__actions .btn {
  margin: 0;
  background-color: var(--theme-elevation-200);
}
.category-tree__foot {
  display: flex;
  gap: 2rem;
}
.category-tree__foot > .btn,
.category-tree__foot > .form-submit {
  flex: 1 1 calc(50% - 1rem);
}
.category-tree__foot > .btn > .btn,
.category-tree__foot > .form-submit > .btn {
  width: 100%;
}
.category__conflicts {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  font-size: 11px;
}
.category__conflict {
  color: var(--theme-error-500);
}
.category-popup__content {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  max-height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
}
.category-popup__card > h4 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--theme-elevation-150);
}
.category-popup__card > h4 span {
  font-size: 1.2rem;
}
.category-popup__card > h4 small {
  font-size: 0.8rem;
  color: var(--theme-error-500);
}
.category-popup__card > ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  padding: 0;
  margin: 0 0 1rem 0;
}
.category-popup__card > ul > li {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
.category-popup__card > ul > li .btn {
  flex: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8em;
  padding: 0.15em 0.75em;
  background-color: var(--theme-bg);
  box-shadow: inset 0 0 0 1px var(--theme-error-400);
  font-size: 0.9rem;
  line-height: 1;
}
.category-popup__card > ul > li .btn:hover {
  box-shadow: inset 0 0 0 1px var(--theme-error-600);
}
.category-popup__card > ul > li .btn span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.category-popup__card > ul > li .btn small {
  color: var(--theme-error-500);
  font-size: 0.8rem;
}
.category-popup__url {
  color: var(--theme-elevation-250);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}
.category-edit__modal:before,
.category-edit__modal:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.category-edit__modal:before {
  background: var(--theme-bg);
  opacity: 0.85;
}
.category-edit__modal:after {
  backdrop-filter: blur(5px);
}
.category-edit__modal .template-minimal {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 1.9230769231rem;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  min-height: 100vh;
  z-index: 1;
  position: relative;
}
.category-edit__modal .template-minimal__wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.category-edit__modal .collection-edit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0;
  min-height: 0;
  height: auto;
}
.category-edit__modal .collection-edit__header {
  width: 100%;
}
.category-edit__modal .collection-edit__header-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  margin: 0 0 2rem;
}
.category-edit__modal .collection-edit__header-content h2 {
  margin: 0;
}
.category-edit__modal .collection-edit__header-content .icon--x {
  width: 44px;
  height: 44px;
}
.category-edit__modal .collection-edit__edit {
  padding: 0;
  margin: 0;
}
.category-edit__modal .collection-edit__main {
  width: 100%;
}
.category-edit__modal .collection-edit__form {
  width: 100%;
  height: auto;
  z-index: 1000;
}
.category-edit__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.6rem 0;
}
.category-edit__header h3 {
  display: flex;
  gap: 0.5em;
  margin: 0;
}
.category-edit__header h3 svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.category-edit__main .rich-text__editor {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: max(160px, 100vh - 650px);
}
.category-edit__reference {
  color: var(--theme-elevation-400);
}
.category-edit__preview {
  margin: 0 0 0.6rem 0;
  padding: 1em;
  max-height: 150px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 2px solid var(--theme-elevation-150);
  border-radius: 4px;
  color: var(--theme-elevation-400);
}
.category-edit__foot {
  display: flex;
  gap: 2rem;
}
.category-edit__foot > .btn,
.category-edit__foot > .form-submit {
  flex: 1 1 calc(50% - 1rem);
}
.category-edit__foot > .btn > .btn,
.category-edit__foot > .form-submit > .btn {
  width: 100%;
}

/* src/components/ImportExport/ImportExportList.scss */
.import-export-list {
  padding-top: 0.4807692308rem;
  padding-bottom: 0.4807692308rem;
  color: var(--theme-elevation-400);
  transform: translateY(-1.9230769231rem);
}
.import-export-list__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 10px;
  margin-top: -3.8461538462rem;
  margin-bottom: 3.8461538462rem;
}
.import-export-list__actions .btn {
  margin: 0;
}
.import-export-list__actions svg {
  fill: currentColor;
}
.import-export-list__modal:before,
.import-export-list__modal:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.import-export-list__modal:before {
  background: var(--theme-bg);
  opacity: 0.85;
}
.import-export-list__modal:after {
  backdrop-filter: blur(5px);
}
.import-export-list__modal .template-minimal {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 1.9230769231rem;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  min-height: 100vh;
  z-index: 1;
  position: relative;
}

/* src/components/ImportExport/ImportModal.scss */
.import-modal__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.6rem 0;
}
.import-modal__header h3 {
  display: flex;
  gap: 0.5em;
  margin: 0;
}
.import-modal__header h3 svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.import-modal__main .rich-text__editor {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: max(160px, 100vh - 650px);
}
.import-modal__foot {
  display: flex;
  gap: 2rem;
}
.import-modal__foot > .btn,
.import-modal__foot > .form-submit {
  flex: 1 1 calc(50% - 1rem);
}
.import-modal__foot > .btn > .btn,
.import-modal__foot > .form-submit > .btn {
  width: 100%;
}
.import-modal__dropzone {
  text-align: center;
  padding: 20px;
  margin-top: var(--base);
  border: 3px #2f2f2f dashed;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  cursor: pointer;
}
.import-modal__logs {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  list-style: none;
  padding: 0;
  margin: 1em 0 0 0;
  line-height: 1.4;
  padding: 1rem;
  border: 2px solid #2f2f2f;
  border-radius: 8px;
  max-height: 150px;
  overflow-y: auto;
}
.import-modal__log {
  padding: 0;
}
.import-modal__log--duplicate {
  color: red;
}
.import-modal__log--invalid {
  color: red;
}
.import-modal__log--required {
  color: red;
}
.import-modal__log--unexpected {
  color: orange;
}
.import-modal__log--optional {
  color: grey;
}

/* src/fields/color-picker/styles.scss */
.add-color.btn {
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
}
.custom-color-picker__btn.btn {
  margin: 0.4807692308rem;
}
.custom-color-picker__btn.btn:first-of-type {
  margin-left: unset;
}
.custom-color-picker__input {
  box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.05), 0 10px 4px -8px rgba(0, 2, 4, 0.02);
  font-family: var(--font-body);
  width: 100%;
  border: 1px solid var(--theme-elevation-150);
  background: var(--theme-input-bg);
  color: var(--theme-elevation-800);
  border-radius: 0;
  font-size: 1rem;
  height: 3.8461538462rem;
  line-height: 1.9230769231rem;
  padding: 0.9615384615rem 1.4423076923rem;
  -webkit-appearance: none;
}
.custom-color-picker__input:not(:disabled):hover {
  box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.13), 0 6px 4px -4px rgba(0, 2, 4, 0.1);
}
.custom-color-picker__input:not(:disabled):active,
.custom-color-picker__input:not(:disabled):focus-within,
.custom-color-picker__input:not(:disabled):focus {
  box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.16), 0 6px 4px -4px rgba(0, 2, 4, 0.13);
}
.custom-color-picker__input[data-rtl=true] {
  direction: rtl;
}
.custom-color-picker__input::-webkit-input-placeholder {
  color: var(--theme-elevation-400);
  font-weight: normal;
  font-size: 1rem;
}
.custom-color-picker__input::-moz-placeholder {
  color: var(--theme-elevation-400);
  font-weight: normal;
  font-size: 1rem;
}
.custom-color-picker__input:hover {
  border-color: var(--theme-elevation-250);
}
.custom-color-picker__input:focus,
.custom-color-picker__input:focus-within,
.custom-color-picker__input:active {
  border-color: var(--theme-elevation-400);
  outline: 0;
}
.custom-color-picker__input:disabled {
  background: var(--theme-elevation-200);
  color: var(--theme-elevation-450);
}
.custom-color-picker__input:disabled:hover {
  border-color: var(--theme-elevation-150);
}
.custom-color-picker__colors {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.chip {
  border-radius: 50%;
  border: 2px solid #fff;
  height: 2.4038461538rem;
  width: 2.4038461538rem;
  margin-right: 0.9615384615rem;
  box-shadow: none;
}
.chip--selected {
  box-shadow: 0 0 0 2px #333333;
}
.chip--clickable {
  cursor: pointer;
}

/* src/fields/debug-field/styles.scss */
.custom-text {
  border: 1px solid red;
  padding: 10px;
}

/* src/fields/ui-static/styles.scss */

/* src/ui/icon/icon.scss */
.icon img {
  width: 32px;
  height: 32px;
  margin: auto;
}

/* src/ui/logo/logo.scss */
.logo {
  display: flex;
  align-items: center;
  gap: 1em;
}
.logo img {
  width: 52px;
  height: 52px;
  margin: auto;
}
.logo h1 {
  margin: 0;
  letter-spacing: 0.1rem;
  line-height: 1;
  font-size: 2rem;
  margin-top: 0.5rem;
  font-weight: 100;
  color: #5aeb79;
}