You are here

Home » API reference » Paragraphs grid 8

grid_widget.css in Paragraphs grid 8 

@-webkit-keyframes mdc-ripple-fg-radius-in {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  }
  to {
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  }
}
@keyframes mdc-ripple-fg-radius-in {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
  }
  to {
    -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  }
}
@-webkit-keyframes mdc-ripple-fg-opacity-in {
  from {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    opacity: 0;
  }
  to {
    opacity: var(--mdc-ripple-fg-opacity, 0);
  }
}
@keyframes mdc-ripple-fg-opacity-in {
  from {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    opacity: 0;
  }
  to {
    opacity: var(--mdc-ripple-fg-opacity, 0);
  }
}
@-webkit-keyframes mdc-ripple-fg-opacity-out {
  from {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    opacity: var(--mdc-ripple-fg-opacity, 0);
  }
  to {
    opacity: 0;
  }
}
@keyframes mdc-ripple-fg-opacity-out {
  from {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    opacity: var(--mdc-ripple-fg-opacity, 0);
  }
  to {
    opacity: 0;
  }
}
.mdc-ripple-surface--test-edge-var-bug {
  --mdc-ripple-surface-test-edge-var: 1px solid #000;
  visibility: hidden;
}
.mdc-ripple-surface--test-edge-var-bug::before {
  border: var(--mdc-ripple-surface-test-edge-var);
}
.mdc-fab {
  --mdc-ripple-fg-size: 0;
  --mdc-ripple-left: 0;
  --mdc-ripple-top: 0;
  --mdc-ripple-fg-scale: 1;
  --mdc-ripple-fg-translate-end: 0;
  --mdc-ripple-fg-translate-start: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  will-change: transform, opacity;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  border-radius: 28px;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 0;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, -webkit-transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
  border: none;
  fill: currentColor;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  background-color: #018786;
  color: #fff;
}
.mdc-fab::before,
.mdc-fab::after {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  content: "";
}
.mdc-fab::before {
  transition: opacity 15ms linear, background-color 15ms linear;
  z-index: 1;
}
.mdc-fab.mdc-ripple-upgraded::before {
  -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
  transform: scale(var(--mdc-ripple-fg-scale, 1));
}
.mdc-fab.mdc-ripple-upgraded::after {
  top: 0;
  left: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.mdc-fab.mdc-ripple-upgraded--unbounded::after {
  top: var(--mdc-ripple-top, 0);
  left: var(--mdc-ripple-left, 0);
}
.mdc-fab.mdc-ripple-upgraded--foreground-activation::after {
  -webkit-animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards;
  animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards;
}
.mdc-fab.mdc-ripple-upgraded--foreground-deactivation::after {
  -webkit-animation: 150ms mdc-ripple-fg-opacity-out;
  animation: 150ms mdc-ripple-fg-opacity-out;
  -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}
.mdc-fab::before,
.mdc-fab::after {
  top: calc(50% - 100%);
  left: calc(50% - 100%);
  width: 200%;
  height: 200%;
}
.mdc-fab.mdc-ripple-upgraded::after {
  width: var(--mdc-ripple-fg-size, 100%);
  height: var(--mdc-ripple-fg-size, 100%);
}
.mdc-fab.mdc-fab--mini {
  border-radius: 20px;
}
.mdc-fab.mdc-fab--extended {
  border-radius: 24px;
}
.mdc-fab::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.mdc-fab:hover,
.mdc-fab:focus {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.mdc-fab:active {
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12);
}
.mdc-fab:active,
.mdc-fab:focus {
  outline: none;
}
.mdc-fab:hover {
  cursor: pointer;
}
.mdc-fab > svg {
  width: 100%;
}
@supports not (-ms-ime-align: auto) {
  .mdc-fab {
    background-color: #018786;
  }
}
.mdc-fab .mdc-fab__icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.mdc-fab::before,
.mdc-fab::after {
  background-color: #fff;
}
@supports not (-ms-ime-align: auto) {
  .mdc-fab::before,
  .mdc-fab::after {
    background-color: #fff;
  }
}
.mdc-fab:hover::before {
  opacity: .08;
}
.mdc-fab:not(.mdc-ripple-upgraded):focus::before,
.mdc-fab.mdc-ripple-upgraded--background-focused::before {
  transition-duration: 75ms;
  opacity: .24;
}
.mdc-fab:not(.mdc-ripple-upgraded)::after {
  transition: opacity 150ms linear;
}
.mdc-fab:not(.mdc-ripple-upgraded):active::after {
  transition-duration: 75ms;
  opacity: .32;
}
.mdc-fab.mdc-ripple-upgraded {
  --mdc-ripple-fg-opacity: .32;
}
.mdc-fab--mini {
  width: 40px;
  height: 40px;
}
.mdc-fab--extended {
  font-family: Roboto, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: .875rem;
  line-height: 2.25rem;
  font-weight: 500;
  letter-spacing: .08929em;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 20px;
  width: auto;
  max-width: 100%;
  height: 48px;
}
.mdc-fab--extended .mdc-fab__icon {
  margin-left: -8px;
  margin-right: 12px;
}
[dir="rtl"] .mdc-fab--extended .mdc-fab__icon,
.mdc-fab--extended .mdc-fab__icon[dir="rtl"] {
  margin-left: 12px;
  margin-right: -8px;
}
.mdc-fab--extended .mdc-fab__label + .mdc-fab__icon {
  margin-left: 12px;
  margin-right: -8px;
}
[dir="rtl"] .mdc-fab--extended .mdc-fab__label + .mdc-fab__icon,
.mdc-fab--extended .mdc-fab__label + .mdc-fab__icon[dir="rtl"] {
  margin-left: -8px;
  margin-right: 12px;
}
.mdc-fab__label {
  justify-content: flex-start;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mdc-fab__icon {
  transition: -webkit-transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
  transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
  transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
  fill: currentColor;
  will-change: transform;
}
.mdc-fab .mdc-fab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mdc-fab--exited {
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: opacity 15ms linear 150ms, -webkit-transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);
  transition: opacity 15ms linear 150ms, transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);
  transition: opacity 15ms linear 150ms, transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);
  opacity: 0;
}
.mdc-fab--exited .mdc-fab__icon {
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: -webkit-transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);
  transition: transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);
  transition: transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);
}
.paragraph-form-item--has-subform .field--type-grid-field-type .form-item__toggle-description-placeholder {
  display: none;
}
.field--type-grid-field-type.paragraphs-content {
  position: relative;
}
.field--type-grid-field-type .mdc-fab {
  background-color: #009fe3;
}
.field--type-grid-field-type .btn-toggle-widget {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 4;
}
.field--type-grid-field-type .btn-toggle-widget .material-icons {
  background: transparent no-repeat center center scroll;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 18h5v-6h-5v6zm-6 0h5V5H4v13zm12 0h5v-6h-5v6zM10 5v6h11V5H10z' fill='%23FFFFFF'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
  background-size: 28px 28px;
}
.field--type-grid-field-type header.pg-bp-header {
  padding-top: 50px;
}
.field--type-grid-field-type header.pg-bp-header .device-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: transparent no-repeat center center scroll;
  background-size: contain;
  position: relative;
  z-index: 3;
}
.field--type-grid-field-type header.pg-bp-header .device-icon.mobile {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
.field--type-grid-field-type header.pg-bp-header .device-icon.smartphone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23999999' d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E");
}
.field--type-grid-field-type header.pg-bp-header .device-icon.tablet {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M18.5 0h-14C3.12 0 2 1.12 2 2.5v19C2 22.88 3.12 24 4.5 24h14c1.38 0 2.5-1.12 2.5-2.5v-19C21 1.12 19.88 0 18.5 0zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm7.5-4H4V3h15v16z'/%3E%3C/svg%3E");
}
.field--type-grid-field-type header.pg-bp-header .device-icon.laptop {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23999999' d='M20 18c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2H0c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2h-4zM4 5h16v11H4V5zm8 14c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E");
}
.field--type-grid-field-type header.pg-bp-header .device-icon.desktop {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23999999' d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 12H3V4h18v10z'/%3E%3C/svg%3E");
}
.field--type-grid-field-type header.pg-bp-header sub {
  position: relative;
  top: -10px;
}
.field--type-grid-field-type .pg-widget-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: -24px 0 45px;
  height: 0;
  overflow: hidden;
  transition: all .5s;
  border: solid #25a0e1;
  border-width: 1px 0;
}
.field--type-grid-field-type .pg-widget-container .form-item {
  position: relative;
  z-index: 2;
}
.field--type-grid-field-type .pg-widget-container select {
  width: 80%;
  min-width: 70px;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-view-mode {
  padding: 0 15px;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint {
  flex: 1 1 auto;
  padding: 0 15px 15px;
  background: transparent no-repeat left 18px top 45px scroll;
  position: relative;
  z-index: 2;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 700%;
  height: 120%;
  background-color: rgba(127, 127, 127, 0.08);
  box-shadow: 4px 4px 9px #000;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(1) {
  color: #979797;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(1):before {
  background-color: #cee4f1;
  top: 0;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(2) {
  color: #8f8f8f;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(2):before {
  background-color: #c2ddee;
  top: 8px;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(3) {
  color: #888;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(3):before {
  background-color: #b6d7ea;
  top: 16px;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(4) {
  color: gray;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(4):before {
  background-color: #aad0e7;
  top: 24px;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(5) {
  color: #787878;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(5):before {
  background-color: #9ecae3;
  top: 32px;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(6) {
  color: #717171;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(6):before {
  background-color: #93c3e0;
  top: 40px;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(7) {
  color: dimgray;
}
.field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(7):before {
  background-color: #87bddd;
  top: 48px;
}
.field--type-grid-field-type .pg-widget-container.pg-open {
  height: auto;
}
.field--type-grid-field-type .pg-widget-view-mode {
  flex: 1 1 100%;
  position: relative;
  z-index: 3;
  background-color: #eaf6fe;
  border: solid #25a0e1;
  border-width: 1px 0 0;
}

File

css/grid_widget.css
View source 
  1. @-webkit-keyframes mdc-ripple-fg-radius-in {

  2.   from {

  3.     -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  4.     animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  5.     -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);

  6.     transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);

  7.   }

  8.   to {

  9.     -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));

  10.     transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));

  11.   }

  12. }

  13. @keyframes mdc-ripple-fg-radius-in {

  14.   from {

  15.     -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  16.     animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  17.     -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);

  18.     transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);

  19.   }

  20.   to {

  21.     -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));

  22.     transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));

  23.   }

  24. }

  25. @-webkit-keyframes mdc-ripple-fg-opacity-in {

  26.   from {

  27.     -webkit-animation-timing-function: linear;

  28.     animation-timing-function: linear;

  29.     opacity: 0;

  30.   }

  31.   to {

  32.     opacity: var(--mdc-ripple-fg-opacity, 0);

  33.   }

  34. }

  35. @keyframes mdc-ripple-fg-opacity-in {

  36.   from {

  37.     -webkit-animation-timing-function: linear;

  38.     animation-timing-function: linear;

  39.     opacity: 0;

  40.   }

  41.   to {

  42.     opacity: var(--mdc-ripple-fg-opacity, 0);

  43.   }

  44. }

  45. @-webkit-keyframes mdc-ripple-fg-opacity-out {

  46.   from {

  47.     -webkit-animation-timing-function: linear;

  48.     animation-timing-function: linear;

  49.     opacity: var(--mdc-ripple-fg-opacity, 0);

  50.   }

  51.   to {

  52.     opacity: 0;

  53.   }

  54. }

  55. @keyframes mdc-ripple-fg-opacity-out {

  56.   from {

  57.     -webkit-animation-timing-function: linear;

  58.     animation-timing-function: linear;

  59.     opacity: var(--mdc-ripple-fg-opacity, 0);

  60.   }

  61.   to {

  62.     opacity: 0;

  63.   }

  64. }

  65. .mdc-ripple-surface--test-edge-var-bug {

  66.   --mdc-ripple-surface-test-edge-var: 1px solid #000;

  67.   visibility: hidden;

  68. }

  69. .mdc-ripple-surface--test-edge-var-bug::before {

  70.   border: var(--mdc-ripple-surface-test-edge-var);

  71. }

  72. .mdc-fab {

  73.   --mdc-ripple-fg-size: 0;

  74.   --mdc-ripple-left: 0;

  75.   --mdc-ripple-top: 0;

  76.   --mdc-ripple-fg-scale: 1;

  77.   --mdc-ripple-fg-translate-end: 0;

  78.   --mdc-ripple-fg-translate-start: 0;

  79.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  80.   will-change: transform, opacity;

  81.   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);

  82.   border-radius: 28px;

  83.   display: inline-flex;

  84.   position: relative;

  85.   align-items: center;

  86.   justify-content: center;

  87.   box-sizing: border-box;

  88.   width: 56px;

  89.   height: 56px;

  90.   padding: 0;

  91.   transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, -webkit-transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);

  92.   transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);

  93.   transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);

  94.   border: none;

  95.   fill: currentColor;

  96.   cursor: pointer;

  97.   -webkit-user-select: none;

  98.   -moz-user-select: none;

  99.   -ms-user-select: none;

  100.   user-select: none;

  101.   -moz-appearance: none;

  102.   -webkit-appearance: none;

  103.   overflow: hidden;

  104.   background-color: #018786;

  105.   color: #fff;

  106. }

  107. .mdc-fab::before,

  108. .mdc-fab::after {

  109.   position: absolute;

  110.   border-radius: 50%;

  111.   opacity: 0;

  112.   pointer-events: none;

  113.   content: "";

  114. }

  115. .mdc-fab::before {

  116.   transition: opacity 15ms linear, background-color 15ms linear;

  117.   z-index: 1;

  118. }

  119. .mdc-fab.mdc-ripple-upgraded::before {

  120.   -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));

  121.   transform: scale(var(--mdc-ripple-fg-scale, 1));

  122. }

  123. .mdc-fab.mdc-ripple-upgraded::after {

  124.   top: 0;

  125.   left: 0;

  126.   -webkit-transform: scale(0);

  127.   transform: scale(0);

  128.   -webkit-transform-origin: center center;

  129.   transform-origin: center center;

  130. }

  131. .mdc-fab.mdc-ripple-upgraded--unbounded::after {

  132.   top: var(--mdc-ripple-top, 0);

  133.   left: var(--mdc-ripple-left, 0);

  134. }

  135. .mdc-fab.mdc-ripple-upgraded--foreground-activation::after {

  136.   -webkit-animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards;

  137.   animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards;

  138. }

  139. .mdc-fab.mdc-ripple-upgraded--foreground-deactivation::after {

  140.   -webkit-animation: 150ms mdc-ripple-fg-opacity-out;

  141.   animation: 150ms mdc-ripple-fg-opacity-out;

  142.   -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));

  143.   transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));

  144. }

  145. .mdc-fab::before,

  146. .mdc-fab::after {

  147.   top: calc(50% - 100%);

  148.   left: calc(50% - 100%);

  149.   width: 200%;

  150.   height: 200%;

  151. }

  152. .mdc-fab.mdc-ripple-upgraded::after {

  153.   width: var(--mdc-ripple-fg-size, 100%);

  154.   height: var(--mdc-ripple-fg-size, 100%);

  155. }

  156. .mdc-fab.mdc-fab--mini {

  157.   border-radius: 20px;

  158. }

  159. .mdc-fab.mdc-fab--extended {

  160.   border-radius: 24px;

  161. }

  162. .mdc-fab::-moz-focus-inner {

  163.   padding: 0;

  164.   border: 0;

  165. }

  166. .mdc-fab:hover,

  167. .mdc-fab:focus {

  168.   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);

  169. }

  170. .mdc-fab:active {

  171.   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12);

  172. }

  173. .mdc-fab:active,

  174. .mdc-fab:focus {

  175.   outline: none;

  176. }

  177. .mdc-fab:hover {

  178.   cursor: pointer;

  179. }

  180. .mdc-fab > svg {

  181.   width: 100%;

  182. }

  183. @supports not (-ms-ime-align: auto) {

  184.   .mdc-fab {

  185.     background-color: #018786;

  186.   }

  187. }

  188. .mdc-fab .mdc-fab__icon {

  189.   width: 24px;

  190.   height: 24px;

  191.   font-size: 24px;

  192. }

  193. .mdc-fab::before,

  194. .mdc-fab::after {

  195.   background-color: #fff;

  196. }

  197. @supports not (-ms-ime-align: auto) {

  198.   .mdc-fab::before,

  199.   .mdc-fab::after {

  200.     background-color: #fff;

  201.   }

  202. }

  203. .mdc-fab:hover::before {

  204.   opacity: .08;

  205. }

  206. .mdc-fab:not(.mdc-ripple-upgraded):focus::before,

  207. .mdc-fab.mdc-ripple-upgraded--background-focused::before {

  208.   transition-duration: 75ms;

  209.   opacity: .24;

  210. }

  211. .mdc-fab:not(.mdc-ripple-upgraded)::after {

  212.   transition: opacity 150ms linear;

  213. }

  214. .mdc-fab:not(.mdc-ripple-upgraded):active::after {

  215.   transition-duration: 75ms;

  216.   opacity: .32;

  217. }

  218. .mdc-fab.mdc-ripple-upgraded {

  219.   --mdc-ripple-fg-opacity: .32;

  220. }

  221. .mdc-fab--mini {

  222.   width: 40px;

  223.   height: 40px;

  224. }

  225. .mdc-fab--extended {

  226.   font-family: Roboto, sans-serif;

  227.   -moz-osx-font-smoothing: grayscale;

  228.   -webkit-font-smoothing: antialiased;

  229.   font-size: .875rem;

  230.   line-height: 2.25rem;

  231.   font-weight: 500;

  232.   letter-spacing: .08929em;

  233.   text-decoration: none;

  234.   text-transform: uppercase;

  235.   padding: 0 20px;

  236.   width: auto;

  237.   max-width: 100%;

  238.   height: 48px;

  239. }

  240. .mdc-fab--extended .mdc-fab__icon {

  241.   margin-left: -8px;

  242.   margin-right: 12px;

  243. }

  244. [dir="rtl"] .mdc-fab--extended .mdc-fab__icon,

  245. .mdc-fab--extended .mdc-fab__icon[dir="rtl"] {

  246.   margin-left: 12px;

  247.   margin-right: -8px;

  248. }

  249. .mdc-fab--extended .mdc-fab__label + .mdc-fab__icon {

  250.   margin-left: 12px;

  251.   margin-right: -8px;

  252. }

  253. [dir="rtl"] .mdc-fab--extended .mdc-fab__label + .mdc-fab__icon,

  254. .mdc-fab--extended .mdc-fab__label + .mdc-fab__icon[dir="rtl"] {

  255.   margin-left: -8px;

  256.   margin-right: 12px;

  257. }

  258. .mdc-fab__label {

  259.   justify-content: flex-start;

  260.   text-overflow: ellipsis;

  261.   white-space: nowrap;

  262.   overflow: hidden;

  263. }

  264. .mdc-fab__icon {

  265.   transition: -webkit-transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);

  266.   transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);

  267.   transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);

  268.   fill: currentColor;

  269.   will-change: transform;

  270. }

  271. .mdc-fab .mdc-fab__icon {

  272.   display: inline-flex;

  273.   align-items: center;

  274.   justify-content: center;

  275. }

  276. .mdc-fab--exited {

  277.   -webkit-transform: scale(0);

  278.   transform: scale(0);

  279.   transition: opacity 15ms linear 150ms, -webkit-transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);

  280.   transition: opacity 15ms linear 150ms, transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);

  281.   transition: opacity 15ms linear 150ms, transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);

  282.   opacity: 0;

  283. }

  284. .mdc-fab--exited .mdc-fab__icon {

  285.   -webkit-transform: scale(0);

  286.   transform: scale(0);

  287.   transition: -webkit-transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);

  288.   transition: transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);

  289.   transition: transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1), -webkit-transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);

  290. }

  291. .paragraph-form-item--has-subform .field--type-grid-field-type .form-item__toggle-description-placeholder {

  292.   display: none;

  293. }

  294. .field--type-grid-field-type.paragraphs-content {

  295.   position: relative;

  296. }

  297. .field--type-grid-field-type .mdc-fab {

  298.   background-color: #009fe3;

  299. }

  300. .field--type-grid-field-type .btn-toggle-widget {

  301.   position: relative;

  302.   left: 50%;

  303.   -webkit-transform: translateX(-50%);

  304.   transform: translateX(-50%);

  305.   z-index: 4;

  306. }

  307. .field--type-grid-field-type .btn-toggle-widget .material-icons {

  308.   background: transparent no-repeat center center scroll;

  309.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 18h5v-6h-5v6zm-6 0h5V5H4v13zm12 0h5v-6h-5v6zM10 5v6h11V5H10z' fill='%23FFFFFF'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");

  310.   background-size: 28px 28px;

  311. }

  312. .field--type-grid-field-type header.pg-bp-header {

  313.   padding-top: 50px;

  314. }

  315. .field--type-grid-field-type header.pg-bp-header .device-icon {

  316.   display: inline-block;

  317.   width: 32px;

  318.   height: 32px;

  319.   background: transparent no-repeat center center scroll;

  320.   background-size: contain;

  321.   position: relative;

  322.   z-index: 3;

  323. }

  324. .field--type-grid-field-type header.pg-bp-header .device-icon.mobile {

  325.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");

  326. }

  327. .field--type-grid-field-type header.pg-bp-header .device-icon.smartphone {

  328.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23999999' d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E");

  329. }

  330. .field--type-grid-field-type header.pg-bp-header .device-icon.tablet {

  331.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M18.5 0h-14C3.12 0 2 1.12 2 2.5v19C2 22.88 3.12 24 4.5 24h14c1.38 0 2.5-1.12 2.5-2.5v-19C21 1.12 19.88 0 18.5 0zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm7.5-4H4V3h15v16z'/%3E%3C/svg%3E");

  332. }

  333. .field--type-grid-field-type header.pg-bp-header .device-icon.laptop {

  334.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23999999' d='M20 18c1.1 0 1.99-.9 1.99-2L22 5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2H0c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2h-4zM4 5h16v11H4V5zm8 14c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E");

  335. }

  336. .field--type-grid-field-type header.pg-bp-header .device-icon.desktop {

  337.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23999999' d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 12H3V4h18v10z'/%3E%3C/svg%3E");

  338. }

  339. .field--type-grid-field-type header.pg-bp-header sub {

  340.   position: relative;

  341.   top: -10px;

  342. }

  343. .field--type-grid-field-type .pg-widget-container {

  344.   display: flex;

  345.   flex-wrap: wrap;

  346.   flex-direction: row;

  347.   margin: -24px 0 45px;

  348.   height: 0;

  349.   overflow: hidden;

  350.   transition: all .5s;

  351.   border: solid #25a0e1;

  352.   border-width: 1px 0;

  353. }

  354. .field--type-grid-field-type .pg-widget-container .form-item {

  355.   position: relative;

  356.   z-index: 2;

  357. }

  358. .field--type-grid-field-type .pg-widget-container select {

  359.   width: 80%;

  360.   min-width: 70px;

  361. }

  362. .field--type-grid-field-type .pg-widget-container > .pg-widget-view-mode {

  363.   padding: 0 15px;

  364. }

  365. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint {

  366.   flex: 1 1 auto;

  367.   padding: 0 15px 15px;

  368.   background: transparent no-repeat left 18px top 45px scroll;

  369.   position: relative;

  370.   z-index: 2;

  371. }

  372. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:before {

  373.   content: '';

  374.   position: absolute;

  375.   top: 0;

  376.   left: 0;

  377.   width: 700%;

  378.   height: 120%;

  379.   background-color: rgba(127, 127, 127, 0.08);

  380.   box-shadow: 4px 4px 9px #000;

  381. }

  382. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(1) {

  383.   color: #979797;

  384. }

  385. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(1):before {

  386.   background-color: #cee4f1;

  387.   top: 0;

  388. }

  389. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(2) {

  390.   color: #8f8f8f;

  391. }

  392. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(2):before {

  393.   background-color: #c2ddee;

  394.   top: 8px;

  395. }

  396. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(3) {

  397.   color: #888;

  398. }

  399. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(3):before {

  400.   background-color: #b6d7ea;

  401.   top: 16px;

  402. }

  403. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(4) {

  404.   color: gray;

  405. }

  406. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(4):before {

  407.   background-color: #aad0e7;

  408.   top: 24px;

  409. }

  410. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(5) {

  411.   color: #787878;

  412. }

  413. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(5):before {

  414.   background-color: #9ecae3;

  415.   top: 32px;

  416. }

  417. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(6) {

  418.   color: #717171;

  419. }

  420. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(6):before {

  421.   background-color: #93c3e0;

  422.   top: 40px;

  423. }

  424. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(7) {

  425.   color: dimgray;

  426. }

  427. .field--type-grid-field-type .pg-widget-container > .pg-widget-bpoint:nth-child(7):before {

  428.   background-color: #87bddd;

  429.   top: 48px;

  430. }

  431. .field--type-grid-field-type .pg-widget-container.pg-open {

  432.   height: auto;

  433. }

  434. .field--type-grid-field-type .pg-widget-view-mode {

  435.   flex: 1 1 100%;

  436.   position: relative;

  437.   z-index: 3;

  438.   background-color: #eaf6fe;

  439.   border: solid #25a0e1;

  440.   border-width: 1px 0 0;

  441. }