[data-simplebar] {
position: relative;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.simplebar-mask {
direction: inherit;
position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: auto !important;
height: auto !important;
z-index: 0;
}
.simplebar-offset {
direction: inherit !important;
box-sizing: inherit !important;
resize: none !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
-webkit-overflow-scrolling: touch;
}
.simplebar-content-wrapper {
direction: inherit;
box-sizing: border-box !important;
position: relative;
display: block;
height: 100%; width: auto;
max-width: 100%; max-height: 100%; overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.simplebar-content:before,
.simplebar-content:after {
content: ' ';
display: table;
}
.simplebar-placeholder {
max-height: 100%;
max-width: 100%;
width: 100%;
pointer-events: none;
}
.simplebar-height-auto-observer-wrapper {
box-sizing: inherit !important;
height: 100%;
width: 100%;
max-width: 1px;
position: relative;
float: left;
max-height: 1px;
overflow: hidden;
z-index: -1;
padding: 0;
margin: 0;
pointer-events: none;
flex-grow: inherit;
flex-shrink: 0;
flex-basis: 0;
}
.simplebar-height-auto-observer {
box-sizing: inherit;
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 1000%;
width: 1000%;
min-height: 1px;
min-width: 1px;
overflow: hidden;
pointer-events: none;
z-index: -1;
}
.simplebar-track {
z-index: 1;
position: absolute;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
[data-simplebar].simplebar-dragging {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
[data-simplebar].simplebar-dragging .simplebar-content {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
[data-simplebar].simplebar-dragging .simplebar-track {
pointer-events: all;
}
.simplebar-scrollbar {
position: absolute;
left: 0;
right: 0;
min-height: 10px;
}
.simplebar-scrollbar:before {
position: absolute;
content: '';
background: black;
border-radius: 7px;
left: 2px;
right: 2px;
opacity: 0;
transition: opacity 0.2s 0.5s linear;
}
.simplebar-scrollbar.simplebar-visible:before {
opacity: 0.5;
transition-delay: 0s;
transition-duration: 0s;
}
.simplebar-track.simplebar-vertical {
top: 0;
width: 11px;
}
.simplebar-scrollbar:before {
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
}
.simplebar-track.simplebar-horizontal {
left: 0;
height: 11px;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
right: auto;
left: 0;
top: 0;
bottom: 0;
min-height: 0;
min-width: 10px;
width: auto;
} [data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
right: auto;
left: 0;
}
.simplebar-dummy-scrollbar-size {
direction: rtl;
position: fixed;
opacity: 0;
visibility: hidden;
height: 500px;
width: 500px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: scrollbar !important;
}
.simplebar-dummy-scrollbar-size > div {
width: 200%;
height: 200%;
margin: 10px 0;
}
.simplebar-hide-scrollbar {
position: fixed;
left: 0;
visibility: hidden;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}.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%; 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(//cg-life-blog.com/wp-content/plugins/device-wrapper/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); }:root{--swiper-theme-color:#fff}.swiper{list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0}.swiper,.swiper-wrapper{position:relative;z-index:1}.swiper-wrapper{box-sizing:content-box;display:flex;height:100%;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;width:100%}.swiper-android .swiper-slide,.swiper-wrapper{-webkit-transform:translateZ(0);transform:translateZ(0)}.swiper-pointer-events{touch-action:pan-y}.swiper-slide{flex-shrink:0;height:100%;position:relative;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:height,-webkit-transform;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transform:translateZ(0);transform:translateZ(0);transition:opacity .3s;z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:50%;display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px))}button.swiper-pagination-bullet{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-pagination-lock{display:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto} :root{--swiper-nav-size:40px;--swiper-nav-border-width:2px}.swiper-button-next,.swiper-button-prev{background:rgba(0,0,0,.6);color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;height:calc(var(--swiper-nav-size)*1.2);padding:calc(var(--swiper-nav-size)*.4) calc(var(--swiper-nav-size)*.3);position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:var(--swiper-nav-size);z-index:10}.swiper-button-next:after,.swiper-button-prev:after{box-sizing:border-box;content:"";display:block;height:calc(var(--swiper-nav-size)*.4);position:relative;-webkit-transform:rotate(45deg) skew(10deg,10deg);transform:rotate(45deg) skew(10deg,10deg);width:calc(var(--swiper-nav-size)*.4)}.swiper-button-next .swiper-button-disabled,.swiper-button-prev .swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}.swiper-button-prev:after{border-bottom:var(--swiper-nav-border-width) solid;border-left:var(--swiper-nav-border-width) solid;left:calc(var(--swiper-nav-size)*.05)}.swiper-button-next:after{border-right:var(--swiper-nav-border-width) solid;border-top:var(--swiper-nav-border-width) solid;right:calc(var(--swiper-nav-size)*.05)}.swiper-button-prev{left:0;right:auto}.swiper-button-next{left:auto;right:0}