/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/

.row-actions span.device-wrapper {
  display: inline; }

#adminmenu .fs-submenu-item.pricing.upgrade-mode {
  color: white; }

.device-wrapper-admin-features {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 1em; }

.device-wrapper-admin-feature {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 0.5em 1em;
  background-color: #fff;
  border-radius: 1rem;
  -webkit-box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.15);
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex: 1;
      flex: 1; }
  .device-wrapper-admin-feature img {
    width: 4em;
    height: 4em; }

.device-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 100%; }
  .device-wrapper__out {
    display: table; }
  .device-wrapper__in {
    padding: 50% 0;
    height: 0; }
  .device-wrapper__rotate {
    -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(90deg) translate(0, -100%);
        -ms-transform: rotate(90deg) translate(0, -100%);
            transform: rotate(90deg) translate(0, -100%);
    margin-top: -50%;
    /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
    white-space: nowrap; }
  .device-wrapper .device-wrapper__inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    margin: 0;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
    .device-wrapper .device-wrapper__inner::after {
      content: "";
      position: absolute;
      display: block;
      background-color: var(--device-wrapper--bg-color, "transparent");
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1; }
    .device-wrapper .device-wrapper__inner img,
    .device-wrapper .device-wrapper__inner video,
    .device-wrapper .device-wrapper__inner iframe {
      width: 100%;
      height: auto;
      max-width: 100%;
      display: block; }
    .device-wrapper .device-wrapper__inner video {
      cursor: pointer; }
      .device-wrapper .device-wrapper__inner video.is-playing + .device-wrapper__play-button {
        opacity: 0; }
      .device-wrapper .device-wrapper__inner video:not(.is-playing):hover + .device-wrapper__play-button {
        opacity: 1; }
    .device-wrapper .device-wrapper__inner_iphone_15_pro {
      left: 5%;
      top: 2%;
      right: 5%;
      bottom: 2%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_15_pro-ls {
        top: 5%;
        left: 2%;
        bottom: 5%;
        right: 2%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_15_pro_max {
      left: 4%;
      top: 1%;
      right: 4%;
      bottom: 2%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_15_pro_max-ls {
        top: 4%;
        left: 1%;
        bottom: 4%;
        right: 1%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_16_pro {
      left: 5%;
      top: 2%;
      right: 5%;
      bottom: 2%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_16_pro-ls {
        top: 5%;
        left: 2%;
        bottom: 5%;
        right: 2%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_se {
      left: 6%;
      top: 11%;
      right: 6%;
      bottom: 11%;
      border-radius: 0; }
      .device-wrapper .device-wrapper__inner_iphone_se-ls {
        top: 6%;
        left: 11%;
        bottom: 6%;
        right: 11%;
        border-radius: 0; }
    .device-wrapper .device-wrapper__inner_iphone_11_pro {
      left: 5%;
      top: 2%;
      right: 5%;
      bottom: 2%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_11_pro-ls {
        top: 5%;
        left: 2%;
        bottom: 5%;
        right: 2%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_12 {
      left: 5%;
      top: 2%;
      right: 5%;
      bottom: 2%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_12-ls {
        top: 5%;
        left: 2%;
        bottom: 5%;
        right: 2%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_12_pro_max {
      left: 5%;
      top: 2%;
      right: 5%;
      bottom: 2%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_12_pro_max-ls {
        top: 5%;
        left: 2%;
        bottom: 5%;
        right: 2%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_13 {
      left: 5%;
      top: 1.75%;
      right: 5%;
      bottom: 1.75%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_13-ls {
        top: 5%;
        left: 1.75%;
        bottom: 5%;
        right: 1.75%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_13_pro_max {
      left: 5%;
      top: 1.75%;
      right: 5%;
      bottom: 1.75%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_13_pro_max-ls {
        top: 5%;
        left: 1.75%;
        bottom: 5%;
        right: 1.75%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_14_pro {
      left: 4.25%;
      top: 1.75%;
      right: 4.25%;
      bottom: 1.75%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_14_pro-ls {
        top: 4.25%;
        left: 1.75%;
        bottom: 4.25%;
        right: 1.75%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_14_pro_v2 {
      left: 5%;
      top: 2%;
      right: 5%;
      bottom: 2%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_14_pro_v2-ls {
        top: 5%;
        left: 2%;
        bottom: 5%;
        right: 2%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_14_pro_max {
      left: 5%;
      top: 1.5%;
      right: 5%;
      bottom: 2%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_14_pro_max-ls {
        top: 5%;
        left: 1.5%;
        bottom: 5%;
        right: 2%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_14 {
      left: 5%;
      top: 2%;
      right: 5%;
      bottom: 2%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_14-ls {
        top: 5%;
        left: 2%;
        bottom: 5%;
        right: 2%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_iphone_14_plus {
      left: 5%;
      top: 2%;
      right: 5%;
      bottom: 2%;
      border-radius: 6%; }
      .device-wrapper .device-wrapper__inner_iphone_14_plus-ls {
        top: 5%;
        left: 2%;
        bottom: 5%;
        right: 2%;
        border-radius: 6%; }
    .device-wrapper .device-wrapper__inner_ipad_pro_11 {
      left: 5%;
      top: 3.5%;
      right: 5%;
      bottom: 3.5%;
      border-radius: 3%; }
      .device-wrapper .device-wrapper__inner_ipad_pro_11-ls {
        top: 5%;
        left: 3.5%;
        bottom: 5%;
        right: 3.5%;
        border-radius: 3%; }
    .device-wrapper .device-wrapper__inner_ipad {
      left: 4%;
      top: 6.5%;
      right: 4%;
      bottom: 7.75%;
      border-radius: 0%; }
      .device-wrapper .device-wrapper__inner_ipad-ls {
        top: 4%;
        left: 6.5%;
        bottom: 4%;
        right: 7.75%;
        border-radius: 0%; }
    .device-wrapper .device-wrapper__inner_macbook_pro {
      left: 11%;
      top: 4.5%;
      right: 11%;
      bottom: 11.75%;
      border-radius: 0%; }
    .device-wrapper .device-wrapper__inner_macbook_pro_2023 {
      left: 10%;
      top: 2%;
      right: 10%;
      bottom: 10.75%;
      border-radius: 0%; }
    .device-wrapper .device-wrapper__inner_apple_studio {
      left: 2%;
      top: 2%;
      right: 2%;
      bottom: 27%;
      border-radius: 0%; }
    .device-wrapper .device-wrapper__inner_google_pixel_4 {
      left: 3%;
      top: 5.5%;
      right: 4%;
      bottom: 2.75%;
      border-radius: 3%; }
      .device-wrapper .device-wrapper__inner_google_pixel_4-ls {
        top: 3%;
        left: 5.5%;
        bottom: 3%;
        right: 2.75%;
        border-radius: 3%; }
    .device-wrapper .device-wrapper__inner_google_pixel_7_pro {
      left: 3%;
      top: 1.5%;
      right: 4%;
      bottom: 2%;
      border-radius: 3%; }
      .device-wrapper .device-wrapper__inner_google_pixel_7_pro-ls {
        top: 3%;
        left: 1.5%;
        bottom: 3%;
        right: 2%;
        border-radius: 3%; }
    .device-wrapper .device-wrapper__inner_samsung_galaxy_s23 {
      left: 4%;
      top: 1.75%;
      right: 6%;
      bottom: 2%;
      border-radius: 4%; }
      .device-wrapper .device-wrapper__inner_samsung_galaxy_s23-ls {
        top: 4%;
        left: 1.75%;
        bottom: 4%;
        right: 2%;
        border-radius: 4%; }
    .device-wrapper .device-wrapper__inner_iwatch_7 {
      left: 3%;
      top: 17.75%;
      right: 7%;
      bottom: 18.5%;
      border-radius: 19%; }
    .device-wrapper .device-wrapper__inner__scroll {
      height: 100%; }
    .device-wrapper .device-wrapper__inner_cover img,
    .device-wrapper .device-wrapper__inner_cover video,
    .device-wrapper .device-wrapper__inner_cover iframe {
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: center top;
         object-position: center top; }
    .device-wrapper .device-wrapper__inner_contain img,
    .device-wrapper .device-wrapper__inner_contain video {
      height: 100%;
      -o-object-fit: contain;
         object-fit: contain;
      -o-object-position: center;
         object-position: center; }
    .device-wrapper .device-wrapper__inner_contain iframe {
      width: 100%;
      height: auto; }
    .device-wrapper .device-wrapper__inner_contain.device-wrapper__inner_iframe {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center; }
    .device-wrapper .device-wrapper__inner_overflow img,
    .device-wrapper .device-wrapper__inner_overflow video,
    .device-wrapper .device-wrapper__inner_overflow iframe {
      width: auto;
      max-width: none;
      max-height: none; }
    .device-wrapper .device-wrapper__inner_overflow .device-wrapper__inner__scroll {
      overflow: auto; }
    .device-wrapper .device-wrapper__inner_overflow-x .simplebar-content {
      height: 100%;
      width: auto; }
    .device-wrapper .device-wrapper__inner_overflow-x img,
    .device-wrapper .device-wrapper__inner_overflow-x video,
    .device-wrapper .device-wrapper__inner_overflow-x iframe {
      width: auto;
      max-width: none;
      max-height: 100%;
      height: 100%; }
    .device-wrapper .device-wrapper__inner_overflow-x .device-wrapper__inner__scroll {
      overflow: hidden;
      overflow-x: auto; }
    .device-wrapper .device-wrapper__inner_overflow-y .device-wrapper__inner__scroll {
      overflow: hidden;
      overflow-y: auto; }
  .device-wrapper .device-wrapper__device {
    position: relative;
    z-index: 2;
    height: 100%;
    pointer-events: none; }
    .device-wrapper .device-wrapper__device img {
      width: 100%;
      height: auto;
      max-height: 100%;
      max-width: 100%;
      display: block; }
  .device-wrapper button.device-wrapper__play-button {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    background-color: transparent;
    background-image: url(../src/images/play-button.svg);
    background-size: clamp(50px, 5vw, 50%);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
    opacity: .5;
    z-index: 1;
    pointer-events: none; }
  .device-wrapper .simplebar-track.simplebar-horizontal {
    bottom: 10px; }
  .device-wrapper-admin {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-align: start;
        align-items: flex-start;
    max-width: 1600px;
    gap: 1em; }
  .device-wrapper-admin-description {
    background-color: #fff;
    border-radius: 1rem;
    padding: 1em 1.5em;
    position: relative;
    -webkit-box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.15);
            box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.15);
    max-width: 40rem;
    min-width: 15rem;
    -ms-flex: 1;
        flex: 1;
    word-break: break-word; }
  .device-wrapper-admin-screenshot {
    -ms-flex: 1 1 25rem;
        flex: 1 1 25rem; }
    .device-wrapper-admin-screenshot img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
      border-radius: 1rem;
      -webkit-box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.15);
              box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.15); }

/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */