:root {
  --black: #29292a;
  --fonami-blue: #1178df;
  --line: #cfd2d8;
  --white: white;
  --light-grey: #f3f4f7;
  --shadow: rgba(0, 35, 90, .12);
  --silver: #c5c9d0;
  --light-fonami-blue: rgba(17, 120, 223, .24);
  --red: #f44336;
  --darker-grey: #545a66;
  --dark-grey: #8e94a3;
  --superlight: #f7f8fa;
  --medium-sea-green: #28d570;
  --gold: #ffc107;
}


.w-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}

.w-checkbox-input--inputType-custom {
  width: 12px;
  height: 12px;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom {
  width: 12px;
  height: 12px;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

body {
  color: #29292a;
  font-family: europa, sans-serif;
  font-size: 14px;
  line-height: 24px;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
}

h4 {
  color: #1178df;
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

p {
  margin-bottom: 24px;
}

a {
  color: #1178df;
  text-decoration: none;
}

ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

label {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  display: block;
}

.x-form-block {
  margin-bottom: 0;
}

.x-input-action {
  border-top: 1px solid #cfd2d8;
  justify-content: flex-end;
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  display: flex;
  position: relative;
}

.x-input-action.for-stacked {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
}

.x-center-container {
  width: 100%;
  max-width: 400px;
  padding: 16px;
}

.x-input-row {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  display: flex;
}

.x-input-row.for-100 {
  width: 100%;
  max-width: none;
  margin-bottom: 24px;
}

.x-nav-brand-link {
  display: block;
}

.x-nav-brand-img {
  height: 40px;
  max-width: none;
  padding: 4px;
}

.x-app-ver {
  color: #a3a3a3;
  background-color: #fff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 4px 24px;
  font-size: 10px;
  font-weight: 500;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.x-input-text {
  height: 40px;
  background-color: #f3f4f7;
  border: 1px solid #f3f4f7;
  border-radius: 8px;
  margin-bottom: 0;
  position: relative;
}

.x-input-text:focus {
  background-color: #fff;
  border-color: #007dc5;
  box-shadow: 0 4px 8px -4px rgba(0, 35, 90, .12);
}

.x-input-text.for-large {
  height: 40px;
  padding-left: 16px;
  padding-right: 16px;
}

.x-input-text.for-large.is-right {
  text-align: right;
}

.x-input-text.for-large.is-code, .x-input-text.for-large.is-centered {
  text-align: center;
}

.x-input-text.for-action-bar {
  box-shadow: none;
  background-color: #fff;
  border-style: none;
  flex: 1;
  padding-left: 48px;
}

.x-input-text.for-glyph {
  height: 32px;
  text-align: center;
  border-color: #cfd2d8;
}

.x-input-text.for-icon-preview {
  color: #1178df;
  text-align: center;
  border-style: none none solid;
  border-radius: 0;
  font-size: 20px;
  font-weight: 700;
}

.x-input-text.for-icon-preview:focus {
  background-color: #f3f4f7;
  border-bottom-color: #1178df;
}

.x-input-text.for-right {
  text-align: right;
}

.x-input-text.for-icon-class {
  height: 24px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  border-style: none;
}

.x-btn {
  min-width: 112px;
  text-align: center;
  letter-spacing: 1px;
  background-color: #1178df;
  border: 1px solid #1178df;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 8px 24px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  position: relative;
  box-shadow: 0 2px 4px rgba(17, 120, 223, .12), 0 6px 12px -6px rgba(0, 125, 197, .72);
}

.x-btn:hover {
  background-image: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08));
}

.x-btn:active {
  box-shadow: none;
  background-color: #29292a;
  border-color: #29292a;
}

.x-btn.for-submit {
  flex: 1;
  margin-left: 0;
  margin-right: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

.x-btn.for-copy {
  min-width: 0;
  box-shadow: none;
  text-transform: uppercase;
  background-color: #fff;
  border-color: #c5c9d0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: auto;
  right: 0%;
}

.x-btn.for-copy:hover {
  color: #fff;
  background-color: #1178df;
  border-color: #1178df;
}

.x-btn.for-copy:active {
  background-color: #29292a;
  border-color: #29292a;
}

.x-btn.for-ico-preview {
  min-width: 0;
  box-shadow: none;
  color: #1178df;
  background-color: rgba(17, 120, 223, .24);
  border-style: none;
  margin-left: 0;
  margin-right: 0;
  font-weight: 700;
}

.x-btn.for-ico-preview:hover {
  color: #fff;
  background-color: #1178df;
}

.x-btn.for-secondary {
  box-shadow: none;
  color: #1178df;
  background-color: #f3f4f7;
  border-color: #f3f4f7;
}

.x-btn.for-secondary:hover {
  color: #29292a;
  background-color: #cfd2d8;
}

.x-btn.for-red {
  box-shadow: none;
  background-color: #f44336;
  border-color: #f44336;
}

.x-btn.for-full {
  flex: 1;
}

.x-btn.for-plan {
  min-width: 0;
  grid-column-gap: 8px;
  box-shadow: none;
  color: #1178df;
  background-color: #f3f4f7;
  flex: 1;
  padding: 4px 12px;
}

.x-btn.for-plan.is-current {
  color: #fff;
  background-color: #1178df;
}

.x-center-wrapper {
  width: 100%;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.x-center-wrapper.for-sign-up {
  align-items: center;
  padding-top: 96px;
  padding-bottom: 96px;
}

.x-center-wrapper.for-library {
  align-items: flex-start;
  padding-top: 64px;
  padding-bottom: 64px;
}

.x-nav-brand {
  width: 200px;
  flex: none;
}

.x-nav-brand.for-access {
  width: auto;
}

.x-input-label {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
}

.x-input-label.for-sublabel {
  color: #545a66;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
}

.x-input-label.for-large {
  margin-bottom: 16px;
  font-size: 20px;
  line-height: 32px;
}

.x-input-label.for-left-reset {
  text-align: left;
}

.x-nav {
  z-index: 6500;
  background-image: linear-gradient(#fff, rgba(255, 255, 255, 0) 50%);
  justify-content: space-between;
  padding: 16px;
  display: flex;
  position: fixed;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.x-nav-menu, .x-nav-menu-wrapper {
  align-items: center;
  display: flex;
}

.x-nav-menu-list {
  align-items: center;
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}

.x-nav-menu-item {
  padding-left: 8px;
  padding-right: 8px;
}

.x-nav-menu-link {
  min-width: 96px;
  text-align: center;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
  display: block;
}

.x-nav-menu-link:hover {
  background-color: rgba(17, 120, 223, .24);
}

.x-nav-menu-link.for-solid {
  color: #fff;
  background-color: #1178df;
}

.x-nav-menu-link.for-solid:hover {
  background-color: #1178df;
}

.x-nav-menu-link.for-line {
  box-shadow: inset 0 0 0 1px #1178df;
}

.x-group-input {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
  display: flex;
  position: relative;
}

.x-input-mask {
  color: #8e94a3;
  margin-left: 8px;
  font-size: 18px;
}

.x-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  display: flex;
  position: relative;
}

.x-block.for-form-group {
  margin-bottom: 32px;
}

.x-section-label {
  color: #8e94a3;
  font-weight: 700;
}

.x-section-label.for-emp {
  margin-bottom: 0;
  font-size: 24px;
}

.x-input-select {
  height: 40px;
  background-color: #fff;
  border: 1px solid #c5c9d0;
  border-radius: 8px;
  margin-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 18px;
  box-shadow: 0 4px 8px -3px #c5c9d0;
}

.x-input-radio {
  margin-bottom: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 0;
}

.x-input-radio-button {
  width: 24px;
  height: 24px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 8px;
}

.x-input-radio-button.w--redirected-checked {
  border-width: 8px;
  box-shadow: 0 3px 8px rgba(17, 120, 223, .64);
}

.x-input-radio-button.w--redirected-focus {
  box-shadow: none;
}

.x-input-radio-label {
  margin-bottom: 0;
  font-size: 16px;
}

.x-tab-menu {
  flex: 1;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
  overflow: auto;
}

.x-tab-menu.for-left {
  justify-content: flex-start;
}

.x-tab-link {
  color: #8e94a3;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 4px;
  padding: 8px 24px;
  font-weight: 700;
}

.x-tab-link:hover {
  color: #29292a;
}

.x-tab-link.w--current {
  color: #1178df;
  background-color: rgba(17, 120, 223, .24);
}

.x-tab-content {
  overflow: visible;
}

.x-tab-pane {
  height: auto;
  max-height: none;
  transition: all .75s cubic-bezier(.86, 0, .07, 1);
}

.x-input-helper {
  color: #8e94a3;
  border-left: 2px solid #e6b60b;
  margin-top: 8px;
  padding-left: 8px;
  font-size: 12px;
  line-height: 14px;
}

.x-input-helper.for-error {
  color: #f44336;
  border-left-color: #f44336;
}

.x-input-resend {
  border-radius: 8px;
  flex: none;
  margin-left: 16px;
  padding: 4px 12px;
  font-weight: 700;
}

.x-input-resend:hover {
  background-color: rgba(17, 120, 223, .24);
}

.x-nav-account {
  align-items: center;
  margin-right: 16px;
  font-weight: 700;
  display: flex;
}

.x-avatar-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  background-color: #cfd2d8;
  border: 1px solid #cfd2d8;
  border-radius: 24px;
  display: block;
}

.x-avatar-img.for-acc {
  width: 80px;
  height: 80px;
  background-color: #f7f8fa;
  border-radius: 12px;
}

.x-avatar-img.for-avatar-list, .x-avatar-img.for-author {
  width: 24px;
  height: 24px;
}

.x-nav-account-name {
  margin-left: 8px;
}

.x-master {
  width: 100%;
  min-height: 100vh;
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
}

.x-wrapper {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.x-wrapper.for-subpage {
  max-width: 720px;
}

.x-wrapper.for-account {
  max-width: 560px;
}

.x-header {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  display: flex;
}

.x-header.for-subpage {
  flex-direction: row;
  justify-content: flex-start;
}

.x-section {
  position: relative;
}

.utility-page-wrap {
  width: 100vw;
  height: 100vh;
  max-height: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.utility-page-content {
  width: 260px;
  text-align: center;
  flex-direction: column;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.x-search {
  flex: 1;
  margin-bottom: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.x-icon {
  font-family: Remix, sans-serif;
  font-size: 24px;
  font-weight: 400;
}

.x-icon.for-btn-inline-left {
  margin-left: -8px;
  margin-right: 8px;
  font-size: 20px;
}

.x-icon.for-btn-inline-left.is-status {
  color: #28d570;
  background-color: #fff;
  border-radius: 50px;
  padding: 8px;
  font-size: 24px;
}

.x-icon.for-more-menu {
  margin-right: 12px;
}

.x-icon.for-accordion {
  margin-right: 4px;
  padding: 4px;
  transition: all .25s cubic-bezier(.86, 0, .07, 1);
  transform: rotate(0);
}

.x-icon.for-accordion.is-rotate {
  color: #ffc107;
  transform: rotate(90deg);
}

.x-icon.for-action-bar {
  z-index: 10;
  color: #8e94a3;
  margin-bottom: 0;
  padding: 8px;
  font-size: 24px;
  line-height: 24px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: auto;
}

.x-icon.for-toggle {
  color: #8e94a3;
  margin-right: 8px;
}

.x-icon.for-modal-close {
  color: #f44336;
  border-radius: 4px;
  margin-top: -4px;
  margin-bottom: -4px;
  margin-right: -4px;
  padding: 8px;
}

.x-icon.for-modal-close:hover {
  background-color: rgba(244, 67, 54, .08);
}

.x-icon.for-back {
  color: #29292a;
  margin-right: 16px;
  padding: 4px;
  font-size: 32px;
  line-height: 32px;
}

.x-icon.for-comp-edit {
  margin-left: 4px;
  padding: 4px;
}

.x-icon.for-noti-close {
  color: #f44336;
  border-radius: 24px;
  margin-top: -8px;
  margin-bottom: -8px;
  margin-right: -8px;
  padding: 8px;
  position: absolute;
  top: 24px;
  bottom: auto;
  left: auto;
  right: 24px;
}

.x-icon.for-noti-close:hover {
  background-color: rgba(244, 67, 54, .24);
}

.x-icon.for-validator {
  background-color: #ffc107;
  border-radius: 50px;
  padding: 4px;
  font-size: 16px;
  line-height: 16px;
  position: absolute;
  top: 12px;
  left: 8px;
}

.x-icon.for-validator.is-green {
  color: #fff;
  background-color: #28d570;
}

.x-icon.for-validator.is-red {
  color: #fff;
  background-color: #f44336;
}

.x-icon.for-list {
  font-size: 16px;
  line-height: 16px;
}

.x-icon.for-inline-left {
  margin-right: 12px;
}

.x-chip {
  color: #8e94a3;
  background-color: #f3f4f7;
  border-radius: 8px;
  margin-left: 4px;
  margin-right: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.x-chip.for-update {
  color: #fff;
  background-color: #f44336;
}

.x-chip.for-new {
  color: #fff;
  background-color: #1178df;
}

.x-helper-block {
  border: 1px solid #cfd2d8;
  border-left: 3px solid #ffc107;
  border-radius: 4px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 8px 12px;
  display: flex;
}

.x-avatar-link {
  position: relative;
  overflow: hidden;
}

.x-avatar-link.for-acc {
  border-radius: 12px;
}

.x-acc-view {
  align-items: center;
  margin-bottom: 40px;
  display: flex;
}

.x-avatar-upload {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  text-align: center;
  background-color: rgba(255, 255, 255, .64);
  margin-bottom: -32px;
  padding-top: 4px;
  padding-bottom: 4px;
  transition: all .25s cubic-bezier(.86, 0, .07, 1);
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.x-acc-info {
  flex: 1;
  margin-left: 24px;
}

.x-large-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.x-toggle-row {
  justify-content: space-between;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  display: flex;
}

.x-toggle-row.for-people {
  border-left: 1px solid #cfd2d8;
  margin-bottom: 0;
  margin-left: 12px;
  padding-left: 12px;
  font-size: 14px;
}

.x-toggle-row.for-modal {
  width: 100%;
}

.x-input-rtoggle {
  margin-bottom: 0;
  margin-left: 8px;
  padding-left: 0;
  position: relative;
}

.x-input-rtoggle-button {
  display: none;
}

.x-input-rtoggle-label {
  width: 36px;
  height: 20px;
  background-color: #e8eaed;
  border: 1px solid #d8dbe1;
  border-radius: 24px;
  margin-bottom: 0;
  transition: all .35s cubic-bezier(.86, 0, .07, 1);
  display: block;
  position: relative;
}

.x-log-out-button {
  z-index: 100;
  color: #f44336;
  background-color: #ffe9ec;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
  display: block;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 0%;
}

.x-profile-row {
  grid-column-gap: 24px;
  grid-row-gap: 0px;
  background-color: #f3f4f7;
  border-radius: 8px;
  grid-template: "Label Data"
  / 160px 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  margin-bottom: 12px;
  padding: 16px;
  display: grid;
}

.x-profile-label {
  margin-bottom: 0;
}

.x-org-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.x-org-nav-wrapper {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template: "Org Proj"
  / 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: flex;
}

.x-dd-toggle {
  min-width: 128px;
  background-color: #f3f4f7;
  border-radius: 8px;
  align-items: center;
  padding: 8px 32px 8px 16px;
  transition: all .35s cubic-bezier(.86, 0, .07, 1);
  display: flex;
}

.x-dd-toggle:hover {
  color: #fff;
  background-color: #29292a;
}

.x-dd-icon {
  margin-right: 12px;
}

.x-dd-list {
  max-height: 320px;
  border-radius: 12px;
  overflow: auto;
}

.x-dd-list.w--open {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 35, 90, .12), 0 4px 12px rgba(0, 35, 90, .12);
}

.x-dd-link:hover {
  background-color: #f3f4f7;
}

.x-org-gutter {
  width: 12px;
  height: 1px;
  background-color: #cfd2d8;
  flex: none;
}

.x-ico-header {
  z-index: 6000;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #fff;
  border-radius: 12px;
  grid-template-rows: auto;
  grid-template-columns: 240px 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  margin-bottom: 40px;
  padding: 8px;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 72px;
  box-shadow: 0 0 3px rgba(0, 35, 90, .12), 0 6px 40px -4px rgba(0, 35, 90, .12);
}

.x-ico-header-col.for-search {
  flex: 1;
}

.x-ico-header-col.for-lib-grid {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  display: flex;
}

.x-opt-group {
  align-items: center;
  display: flex;
  position: relative;
}

.x-opt-group.for-people {
  margin-left: 12px;
}

.x-opt-button {
  color: #8e94a3;
  border-radius: 8px;
  margin-left: 2px;
  margin-right: 2px;
  padding: 8px;
  font-family: Remix, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
  transition: all .35s cubic-bezier(.86, 0, .07, 1);
  position: relative;
}

.x-opt-button:hover {
  color: #29292a;
  background-color: #f3f4f7;
}

.x-opt-button.for-emp {
  color: #fff;
  background-color: #1178df;
  box-shadow: 0 1px 3px rgba(17, 120, 223, .32), -4px 4px 12px -6px rgba(17, 120, 223, .64);
}

.x-opt-button.for-nav {
  background-color: #f3f4f7;
}

.x-more-menu {
  z-index: 6000;
  perspective-origin: 100% 0;
  transform: scale3d(1none, 1none, 1none);
  transform-origin: 100% 0;
  transform-style: preserve-3d;
  background-color: #fff;
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  transition: all .35s cubic-bezier(.86, 0, .07, 1);
  position: absolute;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 0%;
  overflow: hidden;
  box-shadow: 0 8px 8px -4px rgba(0, 35, 90, .12), 0 6px 24px -2px rgba(0, 35, 90, .12);
}

.x-more-menu.for-hide {
  transform: scale(0);
}

.x-more-menu-list {
  padding-top: 8px;
  padding-bottom: 8px;
}

.x-more-menu-link {
  color: #8e94a3;
  align-items: center;
  padding: 12px 16px;
  transition: all .35s cubic-bezier(.86, 0, .07, 1);
  display: flex;
}

.x-more-menu-link:hover {
  color: #29292a;
  background-color: #f3f4f7;
}

.x-nowrap {
  white-space: nowrap;
}

.x-ico-section-item {
  border-bottom: 1px solid #cfd2d8;
  margin-bottom: 40px;
}

.x-ico-section-header {
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  display: flex;
}

.x-flex {
  align-items: center;
  display: flex;
  position: relative;
}

.x-flex.for-top {
  justify-content: space-between;
  align-items: flex-start;
}

.x-ico-section-group {
  margin-top: 40px;
}

.x-glyph-list {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-columns: 1fr;
  grid-auto-flow: row dense;
  margin-bottom: 40px;
  display: grid;
}

.x-glyph-container {
  position: relative;
}

.x-glyph-view {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px 12px;
  display: flex;
  position: relative;
}

.x-glyph-icon{
  color: #29292a;
  font-family: Remix, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;

}

.x-glyph-icon svg{
  width: 32px;
  height: 32px;
}

.x-glyph-icon.for-checked {
  color: #1178df;
}

.x-glyph-label {
  color: #8e94a3;
}

.x-glyph-label.for-checked {
  color: #1178df;
}

.x-glyph-opt {
  align-items: center;
  margin-left: -4px;
  margin-right: -4px;
  display: flex;
}

.x-glyph-opt.for-locked {
  margin-left: 0;
  margin-right: -4px;
}

.x-glyph-editable {
  flex: 1;
  padding-left: 4px;
  padding-right: 4px;
  position: relative;
}

.x-glyph-copy {
  color: #8e94a3;
  text-align: center;
  background-color: #f3f4f7;
  border-radius: 8px;
  margin-right: 4px;
  padding: 4px 12px;
  font-size: 12px;
}

.x-glyph-copy:active {
  color: #fff;
  background-color: #1178df;
}

.x-glyph-copy.for-text {
  opacity: 0;
  margin-right: 0;
  transition: all .15s cubic-bezier(.86, 0, .07, 1);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  right: 4px;
}

.x-glyph-copy.for-text:hover {
  opacity: 1;
}

.x-overlay {
  z-index: 5500;
  display: none;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.x-input-toggle {
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 0;
  padding-left: 0;
  font-weight: 400;
  position: relative;
}

.x-input-toggle-button {
  display: none;
}

.x-input-toggle-label {
  width: 40px;
  height: 24px;
  background-color: #c5c9d0;
  border: 1px solid #d8dbe1;
  border-radius: 24px;
  margin-bottom: 0;
  transition: all .35s cubic-bezier(.86, 0, .07, 1);
  display: block;
  position: relative;
}

.x-glyph-check {
  z-index: 100;
  margin-bottom: 0;
  padding-left: 0;
  transition: all .15s cubic-bezier(.86, 0, .07, 1);
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
}

.x-glyph-check-button {
  cursor: pointer;
  border-color: #cfd2d8;
  border-radius: 8px;
  margin-top: 0;
  margin-left: 0;
  display: none;
}

.x-glyph-check-label {
  width: 20px;
  height: 20px;
  color: #fff;
  background-color: #fff;
  border: 1px solid #c5c9d0;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  font-family: Remix, sans-serif;
  font-weight: 400;
  display: flex;
}

.x-glyph-check-label:hover {
  border-color: #1178df;
}

.x-icon-section-h2 {
  margin-right: 4px;
}

.x-bubble {
  width: 8px;
  height: 8px;
  background-color: #c5c9d0;
  border-radius: 8px;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%);
}

.x-bubble.for-new {
  background-color: #1178df;
  box-shadow: 0 2px 6px rgba(17, 120, 223, .8);
}

.x-bubble.for-update {
  background-color: #f44336;
  box-shadow: 0 2px 6px rgba(244, 67, 54, .8);
}

.x-bubble.for-noti {
  background-color: #f44336;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 0%;
  box-shadow: 0 2px 6px rgba(244, 67, 54, .8);
}

.x-vr-sep {
  width: 1px;
  height: 100%;
  background-color: #cfd2d8;
  margin-left: 12px;
  margin-right: 12px;
}

.x-vr-sep.for-opt-group {
  height: 40px;
  margin-left: 16px;
}

.x-vr-sep.for-btn {
  height: 40px;
  margin-left: 0;
  margin-right: 0;
}

.x-vr-sep.for-inv {
  width: 2px;
  height: auto;
  margin-left: 0;
  margin-right: 0;
}

.x-modal {
  z-index: 9000;
  max-width: 800px;
  min-width: 640px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, .64);
  border: 1px solid #cfd2d8;
  border-radius: 4px;
  padding: 16px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 8px rgba(0, 35, 90, .12), 0 8px 32px rgba(0, 35, 90, .12);
}

.x-modal.for-hide {
  display: none;
}

.x-modal-header {
  text-align: center;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-left: 8px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  position: relative;
}

.x-modal-body {
  background-color: #fff;
  border: 1px solid #cfd2d8;
  border-radius: 4px;
  overflow: hidden;
}

.x-ico-preview {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  display: flex;
  position: relative;
}

.x-ico-preview-char {
  margin-bottom: 12px;
  font-family: Remix, sans-serif;
  font-size: 64px;
  line-height: 72px;
}

.x-ico-attr {
  min-width: 400px;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr;
  grid-auto-rows: 0;
  grid-auto-columns: 1fr;
  margin-bottom: 12px;
  display: grid;
}

.x-ico-preview-opt {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #fff;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
  display: grid;
}

.x-small-text {
  font-size: 12px;
}

.x-small-text.for-grey {
  color: #8e94a3;
}

.x-modal-overlay {
  z-index: 8500;
  background-color: rgba(0, 35, 90, .12);
  display: none;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.x-modal-sheet {
  z-index: 10;
  background-color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  transition: all .55s cubic-bezier(.86, 0, .07, 1);
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  transform: translate(0);
}

.x-modal-sheet.for-hide {
  transform: translate(0, 100%);
}

.x-ico-preview-wrapper {
  position: relative;
}

.x-btn-container {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex: none;
  align-items: center;
  display: flex;
}

.x-btn-container.for-plan {
  justify-content: flex-end;
}

.x-embed {
  width: 100%;
  height: 128px;
  margin-bottom: 16px;
}

.x-org-nav-opt {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: flex;
}

.x-edit-opt-group {
  align-items: center;
  display: none;
}

.x-main-opt-group {
  align-items: center;
  margin-left: -2px;
  margin-right: -2px;
  display: flex;
}

.x-center-input-group {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
}

.x-add-header {
  z-index: 1000;
  border-bottom: 1px solid #cfd2d8;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  display: flex;
}

.x-add-section-list {
  margin-bottom: 0;
}

.x-add-section-item {
  border-bottom: 1px solid #cfd2d8;
  margin-bottom: 24px;
}

.x-add-list {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(64px, 64px));
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  margin-bottom: 24px;
  display: grid;
}

.x-add-icon-container {
  width: 64px;
  height: 64px;
  opacity: .4;
  cursor: pointer;
  border: 4px solid #cfd2d8;
  border-radius: 8px;
  padding: 12px;
  display: block;
}

.x-add-icon-container svg{
  width: 32px;
  height: 32px;
}

.x-add-icon-container.for-checked {
  opacity: 1;
  border-color: #1178df;
  box-shadow: 0 1px 3px rgba(17, 120, 223, .32), 0 3px 8px rgba(17, 120, 223, .64);
}

.x-add-icon-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

.x-empty-placeholder {
  width: 100%;
  min-height: 240px;
  text-align: center;
  background-image: url('../images/5de7eb4925af691d5d6c8c73_stripe1_15de7eb4925af691d5d6c8c73_stripe[1].png');
  background-position: 0 0;
  background-size: 8px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 40px 72px;
  display: flex;
}

.x-empty-placeholder.for-reset {
  margin-top: 0;
  margin-bottom: 0;
}

.x-edit-block {
  background-color: #fff;
  border: 1px solid #cfd2d8;
  border-radius: 4px;
  padding: 24px;
  box-shadow: 0 3px 6px rgba(0, 35, 90, .12), 0 8px 24px -4px rgba(0, 35, 90, .12);
}

.x-proj-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 12px;
  display: grid;
}

.x-proj-container {
  border: 1px solid #cfd2d8;
  border-radius: 12px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  display: flex;
  box-shadow: 0 1px 3px rgba(0, 35, 90, .12), 0 4px 8px -2px rgba(0, 35, 90, .12);
}

.x-proj-container.for-display {
  display: block;
}

.x-emp-text {
  font-weight: 700;
}

.x-emp-text.for-large {
  font-size: 18px;
}

.x-people-list {
  margin-bottom: 16px;
}

.x-people-item {
  border-bottom: 1px solid #cfd2d8;
  padding-top: 12px;
  padding-bottom: 12px;
}

.x-people-container {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.x-people-data {
  margin-left: 8px;
}

.x-people-opt {
  align-items: center;
  display: flex;
}

.x-action-bar {
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  padding: 4px;
  display: flex;
}

.x-info-block {
  color: #8e94a3;
  border: 1px solid #cfd2d8;
  border-left: 4px solid #1178df;
  border-radius: 4px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 8px 12px 8px 16px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
}

.x-info-block.for-red {
  border-left-color: #f44336;
}

.x-list-add-button {
  border: 1px solid #1178df;
  border-radius: 4px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  display: flex;
}

.x-list-add-button:hover {
  color: #29292a;
  border-color: #29292a;
}

.x-lib-stats {
  grid-column-gap: 16px;
  grid-row-gap: 0px;
  border-bottom: 1px solid #cfd2d8;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 24px;
  padding-bottom: 24px;
  display: grid;
}

.x-input-color {
  width: 40px;
  height: 40px;
  border: 1px solid #cfd2d8;
  border-radius: 8px;
}

.x-form-header {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  margin-bottom: 24px;
  display: flex;
}

.x-form-header.for-center {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.x-sharer-menu {
  z-index: 9000;
  width: 480px;
  background-color: #fff;
  flex-direction: column;
  transition: all .35s cubic-bezier(.86, 0, .07, 1);
  display: flex;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: auto;
  right: 0%;
  transform: translate(0);
  box-shadow: -2px 0 4px rgba(0, 35, 90, .12), -8px 0 24px rgba(0, 35, 90, .12);
}

.x-sharer-menu.for-hide {
  box-shadow: none;
  transform: translate(100%);
}

.x-sharer-header {
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 16px 24px;
  display: flex;
}

.x-sharer-body {
  flex: 1;
  overflow: auto;
}

.x-sharer-row {
  border-bottom: 1px solid #cfd2d8;
  padding: 24px;
}

.x-export-block {
  max-width: 800px;
  min-height: 400px;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.x-export-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  display: flex;
}

.x-export-thumb {
  width: 64px;
  height: 64px;
  border: 1px solid #cfd2d8;
  border-radius: 24px;
  margin-right: 24px;
  padding: 12px;
  display: block;
}

.x-export-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template: "User Date Icon Ver"
  / 1fr 160px 128px 128px;
  grid-auto-columns: 0;
  align-items: center;
  display: grid;
}

.x-export-history-item {
  margin-top: 16px;
  margin-bottom: 16px;
}

.x-righttext {
  text-align: right;
}

.x-hr-sep {
  height: 1px;
  background-color: #cfd2d8;
  flex: none;
  margin-top: 40px;
  margin-bottom: 40px;
}

.x-hr-sep.for-mini {
  margin-top: 12px;
  margin-bottom: 12px;
}

.x-hr-sep.for-reset {
  flex: none;
  margin-top: 0;
  margin-bottom: 0;
}

.x-setting-block {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.x-setting-row {
  margin-bottom: 32px;
}

.x-nav-menu-icon {
  color: #8e94a3;
  padding: 8px;
  font-family: Remix, sans-serif;
  font-size: 24px;
}

.x-nav-menu-icon:hover {
  color: #1178df;
  cursor: pointer;
}

.x-nav-menu-group {
  align-items: center;
  margin-right: 16px;
  display: flex;
  position: relative;
}

.x-noti {
  z-index: 9000;
  width: 400px;
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 6px rgba(0, 35, 90, .12), 0 8px 24px rgba(0, 35, 90, .12);
}

.x-noti.for-hide {
  display: none;
}

.x-noti-list {
  max-height: 400px;
  margin: 16px -24px;
  padding-left: 24px;
  padding-right: 24px;
  overflow: auto;
}

.x-noti-item {
  border-bottom: 1px solid #cfd2d8;
  margin-bottom: 16px;
  padding-bottom: 16px;
}

.x-noti-link {
  color: #29292a;
  align-items: flex-start;
  display: flex;
}

.x-noti-data {
  flex: 1;
}

.x-noti-icon {
  background-color: #f3f4f7;
  border-radius: 8px;
  margin-right: 12px;
  padding: 12px;
  font-family: Remix, sans-serif;
  font-size: 24px;
}

.x-noti-icon.for-amber {
  background-color: #ffc107;
}

.x-noti-icon.for-blue {
  color: #fff;
  background-color: #1178df;
}

.x-noti-text {
  margin-bottom: 4px;
  font-weight: 700;
  line-height: 18px;
}

.x-chkbox-field {
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}

.x-chkbox-button {
  width: 20px;
  height: 20px;
  border-width: 2px;
  border-color: #c5c9d0;
  border-radius: 8px;
  flex: none;
  margin-top: 0;
  margin-left: 0;
}

.x-chkbox-button.w--redirected-checked {
  width: 20px;
  height: 20px;
  background-color: #1178df;
  background-image: url('../images/check-line.svg');
  border-width: 2px;
  border-color: #1178df;
  border-radius: 8px;
  margin-top: 0;
  margin-left: 0;
  box-shadow: 0 1px 3px rgba(17, 120, 223, .8);
}

.x-chkbox-label {
  margin-left: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.x-question {
  font-family: Remix, sans-serif;
  font-size: 18px;
  font-weight: 400;
  display: inline-block;
}

.x-proj-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background-color: #f3f4f7;
  border-radius: 4px;
}

.x-input-img-upload {
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  align-items: stretch;
  display: flex;
  overflow: hidden;
}

.x-input-img {
  width: 64px;
  height: 64px;
  display: block;
}

.x-input-img-opt {
  border-left: 1px solid #cfd2d8;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 16px;
  font-weight: 700;
  display: flex;
}

.x-input-inline-label {
  margin-left: 8px;
  font-size: 18px;
  font-weight: 700;
}

.x-workspace-helper {
  margin-top: 24px;
}

.x-emp-link {
  font-weight: 700;
  text-decoration: underline;
}

.x-section-header {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.x-section-add {
  align-items: center;
  display: flex;
}

.x-action-success {
  color: #fff;
  text-align: left;
  background-color: #28d570;
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 10px;
  font-weight: 700;
}

.x-form-header-thumb {
  height: 128px;
  background-color: #1178df;
  border-radius: 40px;
  margin-bottom: 24px;
  padding: 24px;
  display: block;
}

.x-form-header-thumb.for-modal {
  height: 80px;
  background-color: #f44336;
  border-radius: 24px;
  margin-bottom: 12px;
}

.x-center-text {
  text-align: center;
}

.x-workspace-picker-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-direction: column;
  margin-bottom: 0;
  display: flex;
}

.x-workspace-picker-item {
  cursor: pointer;
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 8px 8px;
  display: flex;
}

.x-workspace-picker-item.for-active {
  background-color: rgba(17, 120, 223, .24);
  border-color: #1178df;
}

.x-workspace-link {
  background-color: #fff;
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 13px;
  font-weight: 700;
  display: flex;
  box-shadow: 0 4px 12px -4px rgba(0, 35, 90, .12);
}

.x-workspace-val {
  width: 40px;
  height: 40px;
  color: #29292a;
  background-color: #cfd2d8;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
  font-weight: 700;
  display: flex;
}

.x-status-img {
  margin-bottom: 24px;
  display: block;
}

.x-input-col {
  flex: 1;
  position: relative;
}

.x-input-col.for-fit {
  flex: 0 auto;
}

.x-input-col.for-cc-date, .x-input-col.for-cc-cvv {
  width: 88px;
  flex: none;
}

.x-input-group {
  align-items: center;
  display: flex;
  position: relative;
}

.x-input-prefix {
  white-space: nowrap;
  background-color: #dcdfe4;
  border-radius: 8px;
  margin-right: -12px;
  padding: 8px 22px 8px 12px;
  font-size: 12px;
  font-weight: 700;
}

.x-input-postfix {
  white-space: nowrap;
  background-color: #dcdfe4;
  border-radius: 8px;
  margin-left: -12px;
  padding: 8px 12px 8px 22px;
  font-size: 12px;
  font-weight: 700;
}

.x-input-number-opt {
  height: 36px;
  background-color: #fff;
  border: 1px solid #cfd2d8;
  border-radius: 6px;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 2px;
  right: 2px;
  overflow: hidden;
}

.x-input-number-btn {
  color: #8e94a3;
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
  font-family: Remix, sans-serif;
  font-size: 14px;
  line-height: 14px;
  transition: all .15s cubic-bezier(.645, .045, .355, 1);
}

.x-input-number-btn:hover {
  color: #29292a;
  background-color: #f3f4f7;
  padding-top: 4px;
  padding-bottom: 4px;
}

.x-wksp-mgr-block {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: block;
}

.x-wksp-list-block {
  z-index: 10;
  background-color: #fff;
  border: 1px solid #cfd2d8;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 16px -4px rgba(0, 35, 90, .12);
}

.x-wksp-list-header {
  padding: 8px;
  display: flex;
}

.x-lib-list {
  margin-bottom: 0;
}

.x-lib-item-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  /* grid-template-columns: 320px 88px 88px 88px 1fr 56px; */
  grid-template-columns: 320px 88px 128px 88px 88px 1fr 56px;
  grid-auto-columns: 1fr;
  display: grid;
}

.x-lib-item:hover {
  background-color: #f7f8fa;
}

.x-lib-list-header {
  border-top: 1px solid #cfd2d8;
}

.x-lib-item-grid-link {
  color: #8e94a3;
  align-items: center;
  padding: 12px;
  display: flex;
}

.x-lib-item-grid-link:hover {
  color: #29292a;
}

.x-lib-item-grid-header-link {
  color: #8e94a3;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  display: flex;
}

.x-lib-item-grid-header-link:hover {
  color: #29292a;
}

.x-lib-item-opt {
  justify-content: center;
  align-items: center;
  display: flex;
}

.x-avatar-list-block {
  align-items: center;
  display: flex;
}

.x-avatar-item {
  margin-right: -6px;
}

.x-avatar-list-counter {
  height: 24px;
  min-width: 24px;
  background-color: #fff;
  border: 1px solid #cfd2d8;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: flex;
}

.x-page-helper {
  max-width: 560px;
  color: #8e94a3;
  text-align: center;
  margin-top: 24px;
  font-size: 16px;
}

.x-ppl-item-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 96px 96px 96px 112px;
  /* grid-template-columns: 1fr 128px 88px 96px; */
  grid-auto-columns: 1fr;
  display: grid;
}

.x-ppl-item-thumb {
  margin-right: 12px;
}

.x-ppl-list-type {
  color: #fff;
  background-color: #545a66;
  border-radius: 16px;
  padding: 2px 12px;
}

.x-ppl-list-type.for-owner {
  background-color: #f44336;
}

.x-ppl-list-type.for-admin {
  background-color: #1178df;
}

.x-ppl-list-type.for-viewer {
  background-color: #00bcd4;
}

.x-ppl-list-status {
  color: #fff;
  background-color: #28d570;
  border-radius: 24px;
  padding: 2px 12px;
}

.x-ppl-list-status.for-invite {
  background-color: #c5c9d0;
}

.x-wksp-seller {
  background-image: linear-gradient(45deg, #def, #c8edf0);
  border: 1px solid #1178df;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -20px;
  padding: 12px 12px 36px;
  display: flex;
}

.x-wksp-seller.for-bottom {
  background-image: linear-gradient(45deg, #adf1fa, #dbf0c8);
  border-color: #00bcd4;
  margin-top: -20px;
  margin-bottom: 0;
  padding-top: 36px;
  padding-bottom: 12px;
}

.x-sml-button {
  color: #1178df;
  background-color: #fff;
  border-radius: 24px;
  margin-left: 8px;
  margin-right: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  box-shadow: inset 0 0 0 1px #1178df, 0 4px 8px -3px rgba(17, 120, 223, .64);
}

.x-sml-button:hover {
  color: #fff;
  background-color: #1178df;
}

.x-wksp-seller-text {
  max-width: 240px;
  color: #1178df;
  margin-right: 24px;
  line-height: 16px;
}

.x-modal-container {
  padding: 16px;
}

.x-scroller {
  height: 100%;
  overflow: auto;
}

.x-scroller.for-60 {
  max-height: 60vh;
}

.x-input-number {
  align-items: center;
  display: flex;
  position: relative;
}

.x-chkbox-group {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-direction: column;
  display: flex;
}

.x-chkbox-row {
  margin-bottom: 12px;
}

.x-chkbox-row.for-modal {
  margin-bottom: 24px;
}

.body {
  font-family: Inter, sans-serif;
}

.x-simple-lib-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.x-simple-lib-item {
  background-color: #fff;
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  display: flex;
}

.x-span-badge {
  background-color: #f3f4f7;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}

.x-span-badge.for-green {
  color: #fff;
  background-color: #28d570;
  padding-left: 8px;
  padding-right: 8px;
}

.x-tab-switch {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  margin-top: 24px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.x-tab-switch-link {
  color: #8e94a3;
  border-radius: 8px;
  flex: none;
  padding: 6px 16px;
  font-weight: 500;
}

.x-tab-switch-link:hover {
  color: #29292a;
  background-color: #f3f4f7;
}

.x-tab-switch-link.w--current {
  color: #1178df;
  background-color: rgba(17, 120, 223, .24);
}

.x-billing-block {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-direction: column;
  display: flex;
}

.x-plan-type-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  display: flex;
}

.x-plan-type-row {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 80px;
  grid-auto-columns: 1fr;
  padding: 16px;
  display: grid;
}

.x-plan-type-row.for-current {
  background-image: url('../images/5de7eb4925af691d5d6c8c73_stripe1_15de7eb4925af691d5d6c8c73_stripe[1].png');
  background-position: 0 0;
  background-size: auto;
  border-width: 2px;
  border-color: #1178df;
  box-shadow: 0 8px 16px -4px rgba(17, 120, 223, .24);
}

.x-plan-type-title {
  font-size: 24px;
  font-weight: 700;
}

.x-plan-type-feat {
  grid-column-gap: 2px;
  grid-row-gap: 1px;
  background-color: #f3f4f7;
  border-radius: 8px;
  flex-wrap: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  display: grid;
  overflow: hidden;
}

.x-plan-type-feat-chip {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: #fff;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 8px;
  display: flex;
}

.x-plan-type-feat-chip.for-primary {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-bottom: 1px solid #cfd2d8;
  flex-direction: column;
  flex: 1;
  padding: 8px;
}

.x-plan-type-indicator {
  width: 12px;
  height: 12px;
  color: #fff;
  background-color: #f44336;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  line-height: 14px;
  display: flex;
}

.x-plan-type-indicator.for-green {
  background-color: #28d570;
}

.x-account-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-direction: column;
  display: flex;
}

.x-plan-type-header {
  grid-column-gap: 8px;
  align-items: center;
  display: flex;
}

.x-plan-type-price {
  background-color: #f3f4f7;
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 12px;
  font-weight: 700;
}

.x-small-span {
  font-size: 60%;
}

.x-plan-type-choice {
  color: #fff;
  background-color: #f3f4f7;
  background-image: linear-gradient(225deg, #1178df, #b300ff 37%, #ec18a5 77%, red);
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 12px;
  font-weight: 700;
}

.x-sml-btn {
  min-width: 80px;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: #1178df;
  border: 1px solid #1178df;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 2px 12px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  position: relative;
  box-shadow: 0 2px 4px rgba(17, 120, 223, .12), 0 6px 12px -6px rgba(0, 125, 197, .72);
}

.x-sml-btn:hover {
  background-image: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08));
}

.x-sml-btn:active {
  box-shadow: none;
  background-color: #29292a;
  border-color: #29292a;
}

.x-sml-btn.for-secondary {
  box-shadow: none;
  color: #1178df;
  background-color: #f3f4f7;
  border-color: #f3f4f7;
}

.x-sml-btn.for-secondary:hover {
  color: #29292a;
  background-color: #cfd2d8;
}

.x-sml-btn.for-red {
  box-shadow: none;
  background-color: #f44336;
  border-color: #f44336;
}

.x-billing-row {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 128px 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.x-inv-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-direction: column;
  margin-bottom: 0;
  display: flex;
}

.x-inv-item {
  grid-column-gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.x-inv-item-group {
  grid-column-gap: 12px;
  align-items: flex-start;
  display: flex;
}

.x-inv-item-date {
  width: 88px;
  flex: none;
  font-weight: 700;
}

.x-inv-item-no {
  width: 128px;
  flex: none;
}

.x-plan-limit-block {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-direction: column;
  display: flex;
}

.x-plan-limit-row {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: 128px 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.x-progbar-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  display: flex;
}

.x-progbar-track {
  height: 8px;
  background-color: #f3f4f7;
  border-radius: 8px;
  flex: 1;
  overflow: hidden;
}

.x-progbar-track.for-lib-grid {
  flex: none;
}

.x-progbar-filler {
  width: 10%;
  height: 100%;
  background-color: #1178df;
  border-radius: 8px;
}

.x-progbar-val {
  width: 80px;
  color: #8e94a3;
  text-align: center;
  flex: none;
}

.x-form-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  padding: 16px;
  display: flex;
}

.x-form-wrapper.for-reset {
  padding: 0;
}

.x-input-textarea {
  min-height: 88px;
  background-color: #f3f4f7;
  border: 1px solid #f3f4f7;
  border-radius: 8px;
  margin-bottom: 0;
  position: relative;
}

.x-input-textarea:focus {
  background-color: #fff;
  border-color: #007dc5;
  box-shadow: 0 4px 8px -4px rgba(0, 35, 90, .12);
}

.x-social-link-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-direction: column;
  display: flex;
}

.x-social-link-row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.x-social-link-logo {
  width: 24px;
  height: 24px;
  display: block;
}

.x-social-link-group {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  display: flex;
}

.x-plan-choice-radio {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: #f3f4f7;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding: 2px 4px 2px 0;
  display: flex;
}

.x-plan-choice-radio-btn {
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-color: #cfd2d8;
  flex: none;
  margin-top: 0;
  margin-left: 0;
}

.x-plan-choice-radio-btn.w--redirected-checked {
  background-color: #1178df;
  border-style: none;
  box-shadow: 0 4px 8px -2px rgba(17, 120, 223, .24);
}

.x-plan-choice-radio-label {
  font-weight: 700;
}

.x-stepper-link {
  color: #8e94a3;
  margin-left: 12px;
  margin-right: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 20px;
}

.x-stepper-link.w--current {
  color: #1178df;
  font-weight: 700;
}

.x-stepper-sep {
  width: 1px;
  height: 40px;
  background-color: #cfd2d8;
  transform: rotate(12deg);
}

.x-payment-type-block {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  align-items: center;
  padding: 4px 4px 4px 8px;
  display: flex;
}

.x-billing-summary-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  flex-direction: column;
  padding: 16px;
  display: flex;
}

.x-message-stack-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  text-align: center;
  background-image: url('../images/5de7eb4925af691d5d6c8c73_stripe1_15de7eb4925af691d5d6c8c73_stripe[1].png');
  background-position: 0 0;
  background-size: auto;
  border: 2px solid #28d570;
  border-radius: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  display: flex;
}

.x-message-stack-thumb {
  height: 80px;
}

.x-promo-input-block {
  border: 1px solid #1178df;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 4px 16px;
  display: flex;
}

.x-lib-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 0;
  display: grid;
}

.x-lib-grid-block {
  min-height: 160px;
  border: 1px solid #cfd2d8;
  border-radius: 16px;
  flex-direction: column;
  transition: all .35s cubic-bezier(.645, .045, .355, 1);
  display: flex;
  overflow: hidden;
}

.x-lib-grid-block:hover {
  border-color: #1178df;
  box-shadow: 0 8px 24px -4px rgba(17, 120, 223, .24);
}

.x-lib-grid-link {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: #545a66;
  flex-direction: column;
  flex: 1;
  padding: 16px;
  display: flex;
}

.x-lib-grid-link:hover {
  background-color: #f3f4f7;
}

.x-lib-grid-link.for-empty {
  color: #c5c9d0;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.x-lib-grid-link.for-empty:hover {
  color: #1178df;
}

.x-lib-grid-opt {
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  display: flex;
}

.x-lib-grid-author {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: flex;
}

.x-lib-grid-info {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  display: flex;
}

.x-lib-grid-vol {
  width: 128px;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  border-radius: 8px;
  flex-direction: column;
  padding: 6px;
  display: flex;
  box-shadow: 0 2px 4px rgba(0, 35, 90, .12);
}

.x-lib-grid-val {
  color: #545a66;
  flex: none;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  display: flex;
}

.x-secure-icon-span {
  color: #1178df;
  margin-left: 2px;
  margin-right: 2px;
  font-family: Remix, sans-serif;
  font-weight: 400;
}

.x-picker-toggle {
  display: none;
}

.x-workspace-picker-btn {
  color: #8e94a3;
  background-color: #f3f4f7;
  border-radius: 4px;
  padding: 2px 12px;
}

.x-workspace-picker-btn.for-active {
  color: #fff;
  background-color: #1178df;
}

.x-workspace-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
  margin-right: 12px;
  display: block;
}

.x-inv-paper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border: 1px solid #cfd2d8;
  flex-direction: column;
  padding: 40px;
  display: flex;
  box-shadow: 0 8px 24px -4px rgba(0, 35, 90, .12);
}

.x-inv-printzone {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  display: flex;
}

.x-inv-paper-header, .x-inv-paper-body {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  display: flex;
}

.x-inv-paper-footer {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.x-inv-paper-header-row {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.x-inv-paper-label-group {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  display: flex;
}

.x-inv-paper-label-data {
  width: 240px;
  flex: none;
}

.x-inv-paper-header-info {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-direction: column;
  display: flex;
}

.x-inv-paper-paybar {
  border: 1px solid #cfd2d8;
  border-radius: 8px;
  padding: 12px;
  display: flex;
}

.x-inv-paper-paybar-block {
  flex: 1;
}

.x-table-cell {
  padding: 8px 12px;
}

.x-table-cell.for-amount {
  text-align: right;
}

.x-table-row {
  border-top: 1px solid #cfd2d8;
}

.x-table-header {
  text-align: left;
  padding: 6px 12px;
}

.x-table-header.for-amount {
  text-align: right;
}

.x-table-head {
  background-color: #f3f4f7;
}

.x-inv-paper-total {
  width: 240px;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-direction: column;
  margin-left: auto;
  display: flex;
}

.x-inv-paper-total-row {
  justify-content: space-between;
  display: flex;
}

.x-glyph-placeholder {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  background-image: url('../images/5de7eb4925af691d5d6c8c73_stripe1_15de7eb4925af691d5d6c8c73_stripe[1].png');
  background-position: 0 0;
  background-size: auto;
  border: 1px solid #c5c9d0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 8px;
  display: flex;
}

.x-glyph-placeholder-label {
  color: #8e94a3;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.x-ico-loader {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: #1178df;
  white-space: nowrap;
  background-color: rgba(17, 120, 223, .24);
  border-radius: 24px;
  flex: none;
  align-items: center;
  padding: 8px 12px 8px 8px;
  font-size: 12px;
  font-weight: 600;
  transition: all .85s cubic-bezier(.645, .045, .355, 1);
  display: flex;
  overflow: hidden;
}

.x-ico-loader.for-hide {
  margin-right: -160px;
}

.x-ico-status {
  border-radius: 24px;
  flex: none;
  overflow: hidden;
}

@media screen and (max-width: 991px) {
  .x-nav-brand-link {
    padding-left: 0;
    padding-right: 0;
  }

  .x-app-ver {
    z-index: 9999;
    position: fixed;
  }

  .x-nav-brand {
    width: auto;
  }
}

@media screen and (max-width: 767px) {
  .x-nav-brand-img {
    height: 32px;
  }
}

#w-node-e82e80c0-be81-e9f1-4fe7-db093b588fdf-05d7f328 {
  grid-area: Proj;
}

#w-node-_29bdba03-7b03-0e65-6f6f-9157095c1b2c-fca50dd4, #w-node-_29bdba03-7b03-0e65-6f6f-9157095c1b57-fca50dd4, #w-node-_29bdba03-7b03-0e65-6f6f-9157095c1b7e-fca50dd4, #w-node-_29bdba03-7b03-0e65-6f6f-9157095c1ba3-fca50dd4 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_2e631d0d-d7f8-6972-7be7-9370d496aa1d-5da50dd6 {
  grid-area: Data;
}

#w-node-_874687b2-d5d4-84ac-4d7a-1ec0acb6e086-5da50dd6 {
  grid-area: Label;
}

#w-node-_1926243d-513a-134e-3cbf-c7999f96f6b9-5da50dd6 {
  grid-area: Data;
}

#w-node-_1926243d-513a-134e-3cbf-c7999f96f6bb-5da50dd6 {
  grid-area: Label;
}

#w-node-cda7eaeb-a011-0a30-25ba-5a837cf5d1e5-5da50dd6 {
  grid-area: Data;
}

#w-node-cda7eaeb-a011-0a30-25ba-5a837cf5d1e7-5da50dd6 {
  grid-area: Label;
}

#w-node-_45d56a48-e359-4835-e22b-4ab50225b00e-5da50dd6 {
  grid-area: Data;
}

#w-node-_45d56a48-e359-4835-e22b-4ab50225b010-5da50dd6 {
  grid-area: Label;
}

#w-node-_072e7a6b-0023-d2f8-2bfb-81c336242f39-83cd02be, #w-node-b81b232f-530b-a1cb-92c4-3c36890b6973-83cd02be, #w-node-eb582fd9-4919-49f8-1fce-46117968cebf-83cd02be, #w-node-e7a02c27-38ca-d1a5-9762-ace3ba19a859-83cd02be, #w-node-_2134d4b3-579f-c172-929c-7cbe9cde9c91-83cd02be, #w-node-e5334347-89d0-60ae-f0f5-be8615fc8175-83cd02be, #w-node-a8bf5f71-b76b-01cf-ed3d-b2a6e4753cfe-83cd02be, #w-node-c821cd82-16b7-f7d4-a09b-f573818a305d-83cd02be, #w-node-_6c4bd723-a105-6a5f-edee-4a1345821e75-83cd02be, #w-node-_645c04fb-d4ab-21fa-8721-cef14d6c29e2-83cd02be, #w-node-_52b81492-04de-f410-f51f-d755f77083e9-83cd02be, #w-node-_68966718-7f7b-fe42-bba6-f129530bb0e1-83cd02be, #w-node-_23be511d-56ed-0c8c-df16-9c146091ca30-83cd02be, #w-node-_23be511d-56ed-0c8c-df16-9c146091ca31-83cd02be, #w-node-_23be511d-56ed-0c8c-df16-9c146091ca36-83cd02be, #w-node-_23be511d-56ed-0c8c-df16-9c146091ca39-83cd02be, #w-node-_23be511d-56ed-0c8c-df16-9c146091ca3c-83cd02be, #w-node-_23be511d-56ed-0c8c-df16-9c146091ca3f-83cd02be, #w-node-_23be511d-56ed-0c8c-df16-9c146091ca4b-83cd02be, #w-node-_71f3432a-7252-557b-4225-922447400c8e-83cd02be, #w-node-_71f3432a-7252-557b-4225-922447400c8f-83cd02be, #w-node-_71f3432a-7252-557b-4225-922447400c94-83cd02be, #w-node-_71f3432a-7252-557b-4225-922447400c97-83cd02be, #w-node-_71f3432a-7252-557b-4225-922447400c9a-83cd02be, #w-node-_71f3432a-7252-557b-4225-922447400c9d-83cd02be, #w-node-_71f3432a-7252-557b-4225-922447400ca9-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bfef8-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bfef9-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff02-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff03-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff07-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff08-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff0c-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff0d-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff12-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff13-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff1b-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff1e-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff21-83cd02be, #w-node-_83538019-354b-6ebd-f75a-a2c0366bff2d-83cd02be, #w-node-a6874ac5-3787-2499-8d2d-dee74e8f421c-83cd02be, #w-node-a6874ac5-3787-2499-8d2d-dee74e8f421d-83cd02be, #w-node-a6874ac5-3787-2499-8d2d-dee74e8f4225-83cd02be, #w-node-a6874ac5-3787-2499-8d2d-dee74e8f4228-83cd02be, #w-node-a6874ac5-3787-2499-8d2d-dee74e8f422b-83cd02be, #w-node-a6874ac5-3787-2499-8d2d-dee74e8f422e-83cd02be, #w-node-_7b5a97e6-71a1-0ad6-da5e-4d64a3392694-83cd02be, #w-node-_7b5a97e6-71a1-0ad6-da5e-4d64a3392695-83cd02be, #w-node-_7b5a97e6-71a1-0ad6-da5e-4d64a339269d-83cd02be, #w-node-_7b5a97e6-71a1-0ad6-da5e-4d64a33926a0-83cd02be, #w-node-_7b5a97e6-71a1-0ad6-da5e-4d64a33926a3-83cd02be, #w-node-_7b5a97e6-71a1-0ad6-da5e-4d64a33926a6-83cd02be {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_9d2838f3-d51f-fa46-0e79-5763b69ef2a7-b184ab85 {
  grid-area: User;
}

#w-node-_1f258745-e01d-1f6e-b60e-c029471f3c89-b184ab85 {
  grid-area: Date;
}

#w-node-daf48889-a8a5-1139-2c25-e0661ee3eaad-b184ab85 {
  grid-area: Icon;
}

#w-node-f43ba467-f89d-49f4-8bc9-690db4724dec-b184ab85 {
  grid-area: Ver;
}

#w-node-e8765328-a811-9667-91fd-d3aaac9bcc9a-b184ab85 {
  grid-area: User;
}

#w-node-_20bb2cdd-7aff-0ad7-a6ab-2b74bf88d626-b184ab85 {
  grid-area: Date;
}

#w-node-dc660e13-99a8-28b9-f804-daa10f0f5162-b184ab85 {
  grid-area: Icon;
}

#w-node-_579036c0-f96f-72bc-fb2a-e683681b71b2-b184ab85 {
  grid-area: Ver;
}

#w-node-_1d8337a4-e16d-96f6-5d16-7c3502368aea-b184ab85 {
  grid-area: User;
}

#w-node-_1d8337a4-e16d-96f6-5d16-7c3502368aee-b184ab85 {
  grid-area: Date;
}

#w-node-_1d8337a4-e16d-96f6-5d16-7c3502368af1-b184ab85 {
  grid-area: Icon;
}

#w-node-_1d8337a4-e16d-96f6-5d16-7c3502368af3-b184ab85 {
  grid-area: Ver;
}

#w-node-_2a23bcb0-9de4-fda5-4352-abf1660040ae-b184ab85 {
  grid-area: User;
}

#w-node-_2a23bcb0-9de4-fda5-4352-abf1660040b2-b184ab85 {
  grid-area: Date;
}

#w-node-_2a23bcb0-9de4-fda5-4352-abf1660040b5-b184ab85 {
  grid-area: Icon;
}

#w-node-_2a23bcb0-9de4-fda5-4352-abf1660040b7-b184ab85 {
  grid-area: Ver;
}

#w-node-_563b4c1c-9cb9-3854-f4b9-9456bb088335-b184ab85 {
  grid-area: User;
}

#w-node-_563b4c1c-9cb9-3854-f4b9-9456bb088339-b184ab85 {
  grid-area: Date;
}

#w-node-_563b4c1c-9cb9-3854-f4b9-9456bb08833c-b184ab85 {
  grid-area: Icon;
}

#w-node-_563b4c1c-9cb9-3854-f4b9-9456bb08833e-b184ab85 {
  grid-area: Ver;
}

#w-node-_29bdba03-7b03-0e65-6f6f-9157095c1b2c-d9142e09, #w-node-_29bdba03-7b03-0e65-6f6f-9157095c1b57-d9142e09, #w-node-_29bdba03-7b03-0e65-6f6f-9157095c1b7e-d9142e09, #w-node-_29bdba03-7b03-0e65-6f6f-9157095c1ba3-d9142e09 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}


@font-face {
  font-family: 'Remix';
  src: url('../fonts/remix.eot') format('embedded-opentype'), url('../fonts/remix.woff') format('woff'), url('../fonts/remix.ttf') format('truetype'), url('../fonts/remix.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



.x-payment-pro-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border: 1px solid var(--silver);
  background-color: var(--superlight);
  box-shadow: 0 8px 12px -4px var(--shadow);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  display: flex;
  margin: 16px 0;
}

.x-payment-pro-logo {
  width: 48px;
  border: 1px solid var(--line);
  border-radius: 4px;
  flex: none;
}