npm - @yoobic/yobi - Versions diffs - 8.2.0-13 → 8.2.0-16 - Mend

@yoobic/yobi 8.2.0-13 → 8.2.0-16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1199) hide show

package/dist/esm/yoo-collapsible.entry.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-019c1b1a.js';
-import { t as translate } from './index-916ec137.js';
-import './lodash-9d33f885.js';
+import { t as translate } from './index-16ec3116.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
-const collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000);background:var(--light, #ffffff)}.outer-container{position:relative;width:100%;min-height:var(--spacing-32, 2rem)}.outer-container.collapsed{max-height:60px;overflow:hidden}.header-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:var(--spacing-08, 0.5rem);cursor:pointer}.header-container yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}.header-container .title{padding-right:var(--spacing-08, 0.5rem)}.header-container .title.pdf{padding:0;font-weight:bold}.header-container.button yoo-button{width:6.25rem}.header-container yoo-button.deletable{position:absolute;right:0}.arrow{margin-right:var(--spacing-16, 1rem);-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}.arrow.down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.slot-container{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:unset;padding-top:var(--spacing-08, 0.5rem)}.slot-container.collapsed{display:none !important;height:0}:host(.stable) .text-container{color:var(--stable, #adadad)}:host(.stable) .slot-container{color:initial}:host(.padding) .outer-container .text-container{padding:0 var(--spacing-16, 1rem)}:host(.simple) .text-container,:host(.simple) span{padding:0;color:var(--stable, #adadad)}:host(.simple) yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}:host(.form) .outer-container{padding:var(--spacing-08, 0.5rem) 0;padding-top:0}:host(.form) .outer-container:not(.collapsed){width:auto;margin:0}:host(.form) .outer-container.collapsed .text-container{padding:0}:host(.form) .outer-container .text-container{padding:0}:host(.form) .outer-container .text-container .title{padding-left:0;font-weight:bold;font-size:var(--font-size-16, 1rem)}:host(.form) .outer-container .slot-container{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host(.form) .outer-container .slot-container:not(.collapsed){width:auto;margin-top:var(--spacing-08, 0.5rem);padding:0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);padding-top:var(--spacing-08, 0.5rem);background-color:var(--stable-ultralight, #fafafa);border:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:var(--spacing-08, 0.5rem)}:host(.form.subform) .outer-container .slot-container:not(.collapsed){border:none;border-top:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:0}:host(.no-padding) .text-container .title{padding:0}:host(.no-padding.lesson-detail:not(.padding)) .text-container{padding:0}:host(.secondary) .text-container{width:100%;padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--dark-20, rgba(0, 0, 0, 0.2))}:host(.secondary) .text-container .title{padding:0;color:var(--dark, #000000);font-weight:bold}:host(.secondary) .text-container yoo-icon{margin-left:auto}:host(.secondary) .slot-container{-webkit-transform:none;transform:none}:host(.transparent){background:transparent}:host(.transparent) .slot-container{padding-top:0.3rem}:host(.center) .outer-container .header-container{-ms-flex-pack:center;justify-content:center}:host(.lesson-detail) .outer-container .text-container{-ms-flex-pack:justify;justify-content:space-between}:host(.lesson-detail) .outer-container .header-container{padding-bottom:var(--spacing-08, 0.5rem)}:host(.lesson-detail) .outer-container .slot-container{padding:0}:host(.bold) .outer-container .title{padding-left:0;font-weight:bold}:host(.subform){margin-top:0 !important;background:transparent}:host(.subform) .outer-container{min-height:auto;padding-bottom:0}:host(.subform) .outer-container .slot-container:not(.collapsed){margin-top:var(--spacing-04, 0.25rem);padding:0}:host(.subform) .outer-container .header-container .title{color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host(.large) .outer-container .title{font-size:var(--font-size-16, 1rem)}:host(.full-width) .outer-container .title{-ms-flex:1;flex:1}";
+const collapsibleCss = ":host{display:block;width:100%;color:var(--dark, #000000);background:var(--light, #ffffff)}.outer-container{position:relative;width:100%;min-height:var(--spacing-32, 2rem)}.outer-container.collapsed{max-height:60px;overflow:hidden}.header-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:var(--spacing-08, 0.5rem);cursor:pointer}.header-container yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}.header-container .title{padding-right:var(--spacing-08, 0.5rem)}.header-container .title.pdf{padding:0;font-weight:bold}.header-container.button yoo-button{width:6.25rem}.header-container yoo-button.deletable{position:absolute;right:0}.arrow{margin-right:var(--spacing-16, 1rem);-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}.arrow.down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.slot-container{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:unset;padding-top:var(--spacing-08, 0.5rem)}.slot-container.collapsed{display:none !important;height:0}:host(.stable) .text-container{color:var(--stable, #adadad)}:host(.stable) .slot-container{color:initial}:host(.padding) .outer-container .text-container{padding:0 var(--spacing-16, 1rem)}:host(.simple) .text-container,:host(.simple) span{padding:0;color:var(--stable, #adadad)}:host(.simple) yoo-icon.prefix{margin-right:var(--spacing-08, 0.5rem)}:host(.form) .outer-container{padding:var(--spacing-08, 0.5rem) 0;padding-top:0}:host(.form) .outer-container:not(.collapsed){width:auto;margin:0}:host(.form) .outer-container.collapsed .text-container{padding:0}:host(.form) .outer-container .text-container{padding:0}:host(.form) .outer-container .text-container .title{padding-left:0;font-weight:bold;font-size:var(--font-size-16, 1rem)}:host(.form) .outer-container .slot-container{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host(.form) .outer-container .slot-container:not(.collapsed){width:auto;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);background-color:var(--stable-ultralight, #fafafa);border:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:var(--spacing-08, 0.5rem)}:host(.form.subform) .outer-container .slot-container:not(.collapsed){border:none;border-top:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:0}:host(.no-padding) .text-container .title{padding:0}:host(.no-padding.lesson-detail:not(.padding)) .text-container{padding:0}:host(.secondary) .text-container{width:100%;padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--dark-20, rgba(0, 0, 0, 0.2))}:host(.secondary) .text-container .title{padding:0;color:var(--dark, #000000);font-weight:bold}:host(.secondary) .text-container yoo-icon{margin-left:auto}:host(.secondary) .slot-container{-webkit-transform:none;transform:none}:host(.transparent){background:transparent}:host(.transparent) .slot-container{padding-top:0.3rem}:host(.center) .outer-container .header-container{-ms-flex-pack:center;justify-content:center}:host(.lesson-detail) .outer-container .text-container{-ms-flex-pack:justify;justify-content:space-between}:host(.lesson-detail) .outer-container .header-container{padding-bottom:var(--spacing-08, 0.5rem)}:host(.lesson-detail) .outer-container .slot-container{padding:0}:host(.bold) .outer-container .title{padding-left:0;font-weight:bold}:host(.subform){margin-top:0 !important;background:transparent}:host(.subform) .outer-container{min-height:auto;padding-bottom:0}:host(.subform) .outer-container .slot-container:not(.collapsed){margin-top:var(--spacing-04, 0.25rem);padding:0}:host(.subform) .outer-container .header-container .title{color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host(.large) .outer-container .title{font-size:var(--font-size-16, 1rem)}:host(.full-width) .outer-container .title{-ms-flex:1;flex:1}";
 const YooCollapsibleComponent = class {
   constructor(hostRef) {

package/dist/esm/yoo-color-selector.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-019c1b1a.js';
-import { bg as getContrastColor, v as isIOS } from './index-916ec137.js';
-import './lodash-9d33f885.js';
+import { bh as getContrastColor, v as isIOS } from './index-16ec3116.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const colorSelectorCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.border-accent{border:0.0625rem solid var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.border-app-color{border:0.0625rem solid var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.border-danger{border:0.0625rem solid var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.border-dark{border:0.0625rem solid var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.border-energized{border:0.0625rem solid var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.border-info{border:0.0625rem solid var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.border-light{border:0.0625rem solid var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.border-stable{border:0.0625rem solid var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.border-stable-alt{border:0.0625rem solid var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.border-stable-light{border:0.0625rem solid var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.border-stable-ultralight{border:0.0625rem solid var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.border-success{border:0.0625rem solid var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.border-text-color{border:0.0625rem solid var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.border-warning{border:0.0625rem solid var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}.border-wood{border:0.0625rem solid var(--wood, #99644c)}@-webkit-keyframes scale-up{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.15);transform:scale(1.15)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.15);transform:scale(1.15)}100%{-webkit-transform:scale(1);transform:scale(1)}}:host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:35rem;height:3.5rem;background-color:var(--dark-20, rgba(0, 0, 0, 0.2));cursor:pointer}:host>*{margin:0 var(--spacing-08, 0.5rem) 0 auto}:host yoo-form-color-picker{position:relative;background:conic-gradient(red, orange, yellow, lime, aqua, blue, magenta)}:host yoo-form-color-picker #preview{position:absolute;top:0;right:0;width:1.25rem;height:1.25rem;background:black;border-radius:50%;-webkit-transform:translate(25%, -25%);transform:translate(25%, -25%)}:host yoo-form-color-picker,:host .item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem);border:0.1rem solid var(--light, #ffffff);border-radius:50%;-webkit-transition:background-color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out}:host yoo-form-color-picker#picker yoo-icon,:host .item#picker yoo-icon{fill:var(--light, #ffffff)}:host yoo-form-color-picker:active,:host .item:active{-webkit-animation:scale-up 0.75s ease-in-out forwards;animation:scale-up 0.75s ease-in-out forwards}:host([disable-picker]) #picker{background-color:var(--stable-ultralight, #fafafa)}:host([disable-picker]) #picker yoo-icon{fill:var(--stable-alt, #d0d0d0)}";

package/dist/esm/yoo-community-detail.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { o as isWeb, p as debounce, T as translateMulti, W as pipes, t as translate } from './index-916ec137.js';
-import { b as getAppContext } from './common-helpers-40913a60.js';
-import './lodash-9d33f885.js';
+import { o as isWeb, p as debounce, T as translateMulti, W as pipes, t as translate } from './index-16ec3116.js';
+import { b as getAppContext } from './common-helpers-162a2c9d.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const communityDetailCss = ":host{width:100%}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;background:var(--light, #ffffff)}:host .outer-container .top-container{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;height:5.5rem;-webkit-transition:0.2s;transition:0.2s}:host .outer-container .top-container.expanded{height:auto}:host .outer-container .top-container .image-container{width:7.375rem;height:5.5rem;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(-73%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.5))), -webkit-gradient(linear, left top, left bottom, from(#276ef1), to(#276ef1));background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0) -73%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, #276ef1, #276ef1)}:host .outer-container .top-container .image-container yoo-img{height:100%;--image-background:var(--accent-10, rgba(39, 110, 241, 0.1))}:host .outer-container .top-container .information-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding:var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);border-bottom:var(--stable-light, #f1f1f1) solid var(--border-width-01, 0.0625rem)}:host .outer-container .top-container .information-container .title-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--dark, #000000);font-weight:var(--font-weight-900, 900);font-size:var(--font-size-24, 1.5rem)}:host .outer-container .top-container .information-container .title-container .more-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:var(--spacing-16, 1rem);margin-left:auto}:host .outer-container .top-container .information-container .members-container{color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .top-container .information-container .description-container{display:-ms-flexbox;display:flex;color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .top-container .information-container .description-container yoo-button{padding:0 1rem}:host .outer-container .tab-container{position:relative;width:100%;max-width:20rem;background:var(--light, #ffffff);border-left:0.0625rem solid var(--stable-40, rgba(173, 173, 173, 0.4));-webkit-transition:0.3s;transition:0.3s}:host .outer-container .tab-container .collapsible-icon-container{position:absolute;top:0.5rem;right:0.5rem;bottom:auto;left:auto;z-index:10;cursor:pointer}:host .outer-container .tab-container.collapsed{width:0;min-width:48px !important}:host .outer-container .tab-container:not(.collapsed){-ms-flex:1 1 15rem;flex:1 1 15rem;min-width:15rem}:host .outer-container .bottom-container{display:-ms-flexbox;display:flex;height:100%;background:var(--stable-light, #f1f1f1)}:host .outer-container .bottom-container .feed-container{position:relative;-ms-flex:1 1 30rem;flex:1 1 30rem;width:100%;background:var(--stable-ultralight, #fafafa)}:host .outer-container .bottom-container .feed-container .grid-container{margin:0 6.5rem}:host .outer-container .bottom-container .community-info{width:22.5rem}:host(.mobile) .top-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start;height:16.25rem;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(-73%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.5))), -webkit-gradient(linear, left top, left bottom, from(#276ef1), to(#276ef1));background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0) -73%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, #276ef1, #276ef1)}:host(.mobile) .top-container yoo-img{position:absolute;top:0;right:0;bottom:0;left:0;--image-background:var(--accent-10, rgba(39, 110, 241, 0.1));height:100%}:host(.mobile) .top-container .title-container{position:absolute;top:auto;right:auto;bottom:2.5rem;left:1rem;z-index:1;color:var(--light, #ffffff);font-weight:var(--font-weight-900, 900);font-size:var(--font-size-24, 1.5rem)}:host(.mobile) .top-container .members-container{position:absolute;top:auto;right:auto;bottom:1rem;left:1rem;z-index:1;color:var(--light, #ffffff);font-size:var(--font-size-12, 0.75rem)}:host(.mobile) .top-container .bottom-overlay{position:absolute;bottom:0;left:0;z-index:0;width:100%;height:100px;background-image:var(--linear-gradient-01-bottom, linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.19), rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.81), rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.94), var(--dark, #000000)));opacity:0.5}:host(.mobile) .description-container{margin:0 var(--spacing-16, 1rem);padding:var(--spacing-08, 0.5rem) 0;color:var(--text-color, #807f83);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.mobile) .bottom-container .feed-container{margin:0;background:var(--light, #ffffff)}:host(.mobile) .bottom-container .feed-container .grid-container{margin:0}";

package/dist/esm/yoo-context-menu-dialog.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { I as closeModal, an as copyToClipboard, T as translateMulti, R as isNullOrUndefined } from './index-916ec137.js';
-import { i as isFunction } from './lodash-9d33f885.js';
-import { b as getAppContext } from './common-helpers-40913a60.js';
+import { I as closeModal, an as copyToClipboard, T as translateMulti, R as isNullOrUndefined } from './index-16ec3116.js';
+import { i as isFunction } from './lodash-b0ad17f3.js';
+import { b as getAppContext } from './common-helpers-162a2c9d.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const contextMenuDialogCss = ":host{position:absolute;top:auto;right:auto;bottom:auto;left:auto;--width-dropdown-content:11.5rem;--max-width-dropdown-content:21.5rem;--max-height-dropdown-content:28.5rem;z-index:10000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-width:var(--width-dropdown-content);max-width:var(--max-width-dropdown-content);font-size:var(--font-size-16, 1rem);background:var(--light, #ffffff);border:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host hr{width:100%;height:0.0625rem;margin:0;background-color:var(--stable-light, #f1f1f1);border:0}:host ul{max-height:var(--max-height-dropdown-content);margin:0;overflow-x:hidden;overflow-y:auto;line-height:1.75;list-style:none;-webkit-padding-start:inherit;padding-inline-start:inherit}:host ul::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host ul::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host ul::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host ul li:first-child{padding-top:var(--spacing-08, 0.5rem)}:host ul li:last-child{padding-bottom:var(--spacing-04, 0.25rem)}:host ul li.app-color{background:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host ul:hover::-webkit-scrollbar-track{background-color:var(--stable-light, #f1f1f1)}:host ul:hover::-webkit-scrollbar-thumb{background:var(--stable, #adadad)}:host yoo-icon[class*=arrow]{opacity:0}:host .title{padding:var(--spacing-08, 0.5rem);padding-bottom:0;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-14, 0.875rem)}:host .icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-width:var(--spacing-32, 2rem)}:host .content{position:relative}:host .content ul{max-height:var(--max-height-dropdown-content)}:host .content.to-left{direction:ltr}:host .content.to-left .wrapper{-webkit-transform:translate(-100%, -0.35rem);transform:translate(-100%, -0.35rem)}:host .content.to-right{direction:rtl}:host .content.to-right li{direction:ltr;text-align:left}:host .content.to-right li .wrapper{-webkit-transform:translate(100%, -0.35rem);transform:translate(100%, -0.35rem)}:host li{position:static;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:var(--spacing-32, 2rem);padding:var(--spacing-02, 0.125rem) var(--spacing-08, 0.5rem);color:var(--dark, #000000);cursor:pointer}:host li.content-start{-ms-flex-align:start;align-items:flex-start}:host li:first-child{border-radius:var(--spacing-04, 0.25rem) var(--spacing-04, 0.25rem) 0 0}:host li:last-child{border-bottom-right-radius:var(--spacing-04, 0.25rem);border-bottom-left-radius:var(--spacing-04, 0.25rem)}:host li:hover:not(.selected):not(.disabled):not(.no-hover){background:var(--stable-light, #f1f1f1)}:host li:hover:not(.selected):not(.disabled):not(.no-hover)>.item-content>yoo-icon[class*=arrow]{opacity:1}:host li:hover:not(.selected):not(.disabled):not(.no-hover)>.item-content>.wrapper{visibility:visible;opacity:1}:host li.selected{background:var(--stable-light, #f1f1f1)}:host li.delete-content{border-top:0.0625rem solid var(--stable-light, #f1f1f1)}:host li.sub-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host li.sub-item:hover yoo-icon.arrows{position:absolute;top:auto;right:0;bottom:auto;left:auto;display:block}:host li.active{color:var(--stable-light, #f1f1f1)}:host li .item-content{display:-ms-flexbox;display:flex;gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;width:100%}:host li .text{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-right:auto;overflow:hidden}@supports (display: -webkit-box){:host li .text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host li .text.app-color{color:var(--app-color, #5a30f4)}:host li .text.danger{color:var(--danger, #d44333)}:host li .text .content-description{color:var(--text-color, #807f83)}:host li.disabled .text{color:var(--stable-alt, #d0d0d0);cursor:unset}:host li .wrapper{position:absolute;right:100%;z-index:10001;width:var(--width-dropdown-content);max-width:var(--max-width-dropdown-content);background:var(--light, #ffffff);border:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));visibility:hidden;opacity:0;-webkit-transition:opacity 0.25s ease-in-out;transition:opacity 0.25s ease-in-out}:host li .wrapper.to-left{right:auto;left:0}:host li .wrapper.to-left ul{direction:ltr}:host li .wrapper.to-right{right:0;left:auto}:host li .wrapper.to-right ul{direction:rtl}:host li .wrapper .text{padding:0 var(--spacing-08, 0.5rem)}:host li .wrapper .title{margin-bottom:-0.5rem;padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);cursor:default}:host li.actionable-icon .text{min-width:unset}:host(.inline){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:unset;min-width:inherit;max-width:unset;white-space:nowrap}:host(.inline) ul{display:-ms-inline-flexbox;display:inline-flex;margin:0}:host(.inline) ul li{position:unset;display:-ms-flexbox;display:flex;height:auto;min-height:2.375rem;padding:0;padding:0 var(--spacing-02, 0.125rem)}:host(.inline) ul li yoo-icon{padding:0 var(--spacing-04, 0.25rem)}:host(.overflow-contained){width:16rem;max-width:16rem}:host(.overflow-contained) li .sub-menu{width:16rem;max-width:16rem}:host(.overflow-contained) li .text{overflow:hidden}:host(.side-menu){width:12rem;margin-left:10px;background-color:var(--anthracite, #1a1a1a);border-color:transparent;-webkit-transform:inherit;transform:inherit}:host(.side-menu) .arrow-cursor{position:absolute;left:0;width:10px;height:10px;margin-left:-6px;background-color:var(--anthracite, #1a1a1a);border:inherit;border-radius:0px 0px 0px 0.1em;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-clip-path:polygon(0% 0%, 100% 100%, 0% 100%);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}:host(.side-menu) .cursor_top{top:14px}:host(.side-menu) .cursor_center{top:51%}:host(.side-menu) .cursor_bottom{top:calc(100% - 43px)}:host(.side-menu) hr{width:10.5rem;margin:0 var(--spacing-16);background-color:var(--light-20, rgba(255, 255, 255, 0.2))}:host(.side-menu) li{margin:var(--spacing-08, 0.5rem);padding:var(--spacing-04, 0.25rem);color:var(--light, #ffffff);border-radius:3px}:host(.side-menu) li.sub-menu-title{margin:var(--spacing-08) var(--spacing-16);padding:0;cursor:initial}:host(.side-menu) li.sub-menu-title:hover{background-color:inherit !important}:host(.side-menu) li.sub-menu-title:hover yoo-icon{fill:inherit}:host(.side-menu) li:hover{background-color:var(--light-10, rgba(255, 255, 255, 0.1)) !important}:host(.side-menu) li:hover yoo-icon{fill:var(--light, #ffffff)}:host(.side-menu) li.selected{background:inherit}:host(.side-menu) li.selected yoo-icon{fill:var(--light, #ffffff)}:host(.side-menu) li yoo-icon{margin-right:var(--spacing-08, 0.5rem);fill:var(--text-color, #807f83)}:host(.side-menu) li yoo-avatar{margin-right:var(--spacing-08, 0.5rem)}:host(.side-menu) li .item-content{overflow:hidden;color:var(--light, #ffffff)}:host(.side-menu) li .text{overflow:hidden;font-size:var(--font-size-16, 1rem);white-space:nowrap;text-overflow:ellipsis}:host(.side-menu) li .text>span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.side-menu) li .content-description{-ms-flex:1;flex:1}:host(.side-menu) li.is-toggle{display:-ms-flexbox;display:flex}:host(.side-menu) li.is-toggle yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host(.side-menu) li.is-toggle .text{-ms-flex:1;flex:1;min-width:auto;margin-right:var(--spacing-08, 0.5rem)}:host(.width-unset){width:auto;max-width:unset}:host(.width-unset) .item-content{-ms-flex:1;flex:1;overflow:hidden}:host(.width-unset) .sub-menu{width:auto;max-width:unset}:host(.width-unset) .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.width-unset) .text>div{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";

package/dist/esm/yoo-context-menu.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { dg as showContextMenu, fr as closeMenuModal, fs as isMouseInBoundaries } from './index-916ec137.js';
-import { b as getAppContext } from './common-helpers-40913a60.js';
-import './lodash-9d33f885.js';
+import { dh as showContextMenu, fs as closeMenuModal, ft as isMouseInBoundaries } from './index-16ec3116.js';
+import { b as getAppContext } from './common-helpers-162a2c9d.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const contextMenuCss = ":host{position:relative;display:block}:host .dropdown-toggle ::slotted(*){cursor:pointer}:host(.side-menu.flex) span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:var(--spacing-16)}:host(.side-menu.flex) yoo-icon{margin-left:calc(var(--spacing-08) * -1)}:host(.flex) span{display:-ms-flexbox;display:flex}";

package/dist/esm/yoo-copyright.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, e as Host } from './index-019c1b1a.js';
-import { t as translate } from './index-916ec137.js';
-import './lodash-9d33f885.js';
+import { t as translate } from './index-16ec3116.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const copyrightCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--dark, #000000);font-size:var(--font-size-12, 0.75rem)}:host img{margin:0 var(--spacing-04, 0.25rem)}";

package/dist/esm/yoo-count-down.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { t as translate } from './index-916ec137.js';
-import { b as getAppContext } from './common-helpers-40913a60.js';
-import './lodash-9d33f885.js';
+import { t as translate } from './index-16ec3116.js';
+import { b as getAppContext } from './common-helpers-162a2c9d.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const countDownCss = ":host{top:0;right:0;bottom:0;left:0}@-webkit-keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 0 0 rgba(0, 0, 0, 0.1)}100%{-webkit-box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1)}}@keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 0 0 rgba(0, 0, 0, 0.1)}100%{-webkit-box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1)}}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%}:host .outer-container .ripple{padding:var(--spacing-24, 1.5rem);background-color:var(--light, #ffffff);border-radius:100%;-webkit-animation:pulse 1s infinite;animation:pulse 1s infinite}:host .outer-container .getready{-ms-flex-align:center;align-items:center;color:var(--app-color, #5a30f4);font-weight:var(--font-weight-700, 700);font-size:calc(var(--font-size-18, 1.125rem) * 2);text-align:center}:host .outer-container .timer{width:9.375rem;height:9.375rem;color:var(--light, #ffffff);font-size:calc(var(--font-size-18, 1.125rem) * 4);line-height:9.375rem;text-align:center;background-color:var(--app-color, #5a30f4);border-radius:100%;-webkit-box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);-webkit-animation:pulse 1s infinite;animation:pulse 1s infinite}:host(.web) .outer-container{position:absolute;right:0;left:0;background:var(--light, #ffffff)}";

package/dist/esm/yoo-course-detail.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { T as translateMulti, a3 as getPlanDueDate, ao as formatDistanceFromNow, ap as minsToMinsAndSecs } from './index-916ec137.js';
-import { A as get } from './lodash-9d33f885.js';
-import { b as getAppContext } from './common-helpers-40913a60.js';
+import { T as translateMulti, a3 as getPlanDueDate, ao as formatDistanceFromNow, ap as minsToMinsAndSecs } from './index-16ec3116.js';
+import { A as get } from './lodash-b0ad17f3.js';
+import { b as getAppContext } from './common-helpers-162a2c9d.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const courseDetailCss = ":host{height:100%;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host .course-detail{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;margin:var(--spacing-32, 2rem) var(--spacing-48, 3rem)}:host .course-detail .scroll-spacer{height:5.75rem}:host .course-detail .title-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .course-detail .title-container yoo-tag{margin-bottom:var(--spacing-16, 1rem)}:host .course-detail .title-container .title{margin-bottom:var(--spacing-16, 1rem);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem)}:host .course-detail .title-container .due-date .first{color:var(--dark, #000000)}:host .course-detail .title-container .due-date .second{color:var(--app-color, #5a30f4)}:host .course-detail .menu{margin:0;padding:0;font-size:100%;vertical-align:baseline;list-style:none outside none;background:none repeat scroll 0 0 transparent;border:0 none;outline:0 none;-webkit-tap-highlight-color:transparent;margin-top:1.875rem;padding:var(--spacing-16, 1rem);list-style:none}:host .course-detail .menu .menu-item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .course-detail .menu .menu-item:not(:last-child) .menu-content{margin-bottom:var(--spacing-24, 1.5rem)}:host .course-detail .menu .menu-item .menu-left{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}:host .course-detail .menu .menu-item .menu-left.with-dot{width:2rem;margin-left:0.0313rem}:host .course-detail .menu .menu-item .menu-left .menu-icon{z-index:2;width:1.875rem;height:1.875rem;text-align:center}:host .course-detail .menu .menu-item .menu-left .menu-icon.menu-dot{width:1rem;height:1rem}:host .course-detail .menu .menu-item .menu-left .menu-icon yoo-icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:1.875rem;height:1.875rem;padding:0;color:var(--light, #ffffff);font-size:var(--font-size-18, 1.125rem);line-height:1.875rem;background-color:var(--app-color, #5a30f4);border-radius:50%}:host .course-detail .menu .menu-item .menu-left .menu-icon yoo-icon.dark{background-color:var(--dark, #000000)}:host .course-detail .menu .menu-item .menu-left .menu-icon yoo-icon.info{background-color:var(--info, #d84c96)}:host .course-detail .menu .menu-item .menu-left .menu-icon yoo-icon.danger{background-color:var(--danger, #d44333)}:host .course-detail .menu .menu-item .menu-left .border{width:0.0625rem;height:100%;background-color:var(--stable-alt, #d0d0d0)}:host .course-detail .menu .menu-item .menu-left .border.border-pre{height:2.5rem}:host .course-detail .menu .menu-item .menu-left .border.border-pre.last{height:1rem}:host .course-detail .menu .menu-item .menu-left .border.dark{background-color:var(--dark, #000000)}:host .course-detail .menu .menu-item .menu-left .border.danger{background-color:var(--danger, #d44333)}:host .course-detail .menu .menu-item .menu-left .border.info{background-color:var(--info, #d84c96)}:host .course-detail .menu .menu-item .menu-right{width:100%;margin-left:var(--spacing-08, 0.5rem);overflow:hidden}:host .course-detail .menu .menu-item .menu-right .menu-title{font-weight:bold;line-height:1}:host .course-detail .menu .menu-item .menu-right .menu-content{color:var(--text-color, #807f83)}:host .course-detail .menu .menu-item .menu-right .menu-content.menu-chart{margin-bottom:0}:host .course-detail .menu .menu-item .menu-right .menu-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2rem}:host .course-detail .menu .menu-item .menu-right .menu-content span{margin-right:0.5rem}:host .course-detail .menu .menu-item .menu-right .menu-content yoo-avatar{margin-right:0.3125rem}:host .course-detail .menu .menu-item .menu-right .menu-content .font-medium{font-size:var(--font-size-14, 0.875rem)}:host .course-detail .menu .menu-item .menu-right .menu-content .font-small{font-size:var(--font-size-12, 0.75rem)}:host .course-detail .menu .menu-item .menu-right .menu-content .dark{color:var(--dark, #000000)}:host .course-detail .menu .menu-item .menu-right .menu-content .success{color:var(--success, #3aa76d)}:host .course-detail .menu .menu-item .menu-right .menu-content .danger{color:var(--danger, #d44333)}:host .course-detail .menu .menu-item .menu-right .menu-content .text-color{color:var(--text-color, #807f83)}:host .course-detail .menu .menu-item .menu-right .menu-content table{width:100%;table-layout:fixed}:host .course-detail .menu .menu-item .menu-right .menu-content table td{overflow:hidden;text-overflow:ellipsis}:host .course-detail .menu .menu-item .menu-right .menu-content .tags{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .course-detail .menu .menu-item .menu-right .menu-content .tags .badge-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:4rem;margin:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);font-size:var(--font-size-12, 0.75rem)}:host .course-detail .menu .menu-item .menu-right .menu-content .tags .badge-container .tag-title{color:var(--dark, #000000);text-align:center}:host .course-detail .menu .menu-item:last-child .menu-left .border{display:none}:host(.web){border-radius:8px;-webkit-box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1));box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1))}";

package/dist/esm/yoo-course-info-card.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, e as Host } from './index-019c1b1a.js';
-import { t as translate, T as translateMulti } from './index-916ec137.js';
-import './lodash-9d33f885.js';
+import { t as translate, T as translateMulti } from './index-16ec3116.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const courseInfoCardCss = ":host{display:block;margin-bottom:var(--spacing-16, 1rem);padding:var(--spacing-08, 0.5rem);background-color:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host .top-container{display:grid;grid-template-columns:4.0625rem auto;padding-bottom:var(--spacing-08, 0.5rem);-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem);border-bottom:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1)}:host .top-container yoo-img{width:4.0625rem;height:3.125rem;margin-right:var(--spacing-08, 0.5rem);--border-radius:var(--border-radius-04, 0.25rem)}:host .top-container .side-container h4{margin:0;margin-top:var(--spacing-02, 0.125rem)}:host .sub-container{display:grid;grid-auto-columns:minmax(0, 1fr);grid-auto-flow:column;margin-top:var(--spacing-08, 0.5rem)}:host .sub-container .kpi-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;justify-items:center;padding:0 var(--spacing-04, 0.25rem)}:host .sub-container .kpi-container .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}:host .sub-container .kpi-container .value{font-size:var(--font-size-14, 0.875rem)}:host .sub-container .kpi-container:last-of-type{padding-right:0}:host .sub-container .kpi-container:first-of-type{padding-left:0}:host .sub-container .kpi-container:not(:last-of-type){border-right:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1)}";

package/dist/esm/yoo-course-summary.entry.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { k as Cloudinary, t as translate, o as isWeb, a3 as getPlanDueDate, ao as formatDistanceFromNow, T as translateMulti } from './index-916ec137.js';
-import { A as get } from './lodash-9d33f885.js';
-import { b as getAppContext } from './common-helpers-40913a60.js';
+import { k as Cloudinary, t as translate, o as isWeb, a3 as getPlanDueDate, ao as formatDistanceFromNow, T as translateMulti } from './index-16ec3116.js';
+import { A as get } from './lodash-b0ad17f3.js';
+import { b as getAppContext } from './common-helpers-162a2c9d.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
-const courseSummaryCss = ":host{display:block}:host .course-info-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .course-info-container .info-sub-container{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem)}:host .course-info-container .info-sub-container yoo-collapsible{background:transparent}:host .course-info-container .info-sub-container yoo-collapsible div[slot=title]{padding-left:0;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem)}:host .course-info-container .info-sub-container yoo-collapsible .details-container{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing-08, 0.5rem)}:host .course-info-container .info-sub-container .button-container{padding-top:var(--spacing-08, 0.5rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .course-info-container yoo-background{display:block}:host .course-info-container yoo-background.hidden{display:none}:host .course-info-container .course-description{padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .course-info-container .progress-bar-container{display:-ms-flexbox;display:flex;padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .course-info-container .progress-bar-container yoo-progress-bar{margin-right:var(--spacing-04, 0.25rem)}:host(.web:not(.force-mobile)) .full-width-view{width:35%}:host(.mobile) .course-info-container{border:none}:host(.mobile) .course-info-container .course-title{margin:0;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-24, 1.5rem);line-height:normal}:host(.mobile) .course-info-container .course-info{margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-info yoo-tag{font-size:var(--font-size-16, 1rem)}:host(.mobile) .course-info-container .course-points{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-points yoo-tag{padding-right:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-points .badges-container{display:-ms-flexbox;display:flex}:host(.mobile) .course-info-container .course-points .badges-container yoo-tag{padding-right:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .progress-bar-container{height:1.25rem;margin-top:var(--spacing-16, 1rem);padding:0}:host(.mobile) .course-info-container .course-description{margin-top:var(--spacing-16, 1rem);padding:0;color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.web) yoo-progress-bar{--progress-value-font-size:var(--font-size-14, 0.875rem)}";
+const courseSummaryCss = ":host{display:block}:host .course-info-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .course-info-container .info-sub-container{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem)}:host .course-info-container .info-sub-container yoo-collapsible{background:transparent}:host .course-info-container .info-sub-container yoo-collapsible div[slot=title]{padding-left:0;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem)}:host .course-info-container .info-sub-container yoo-collapsible .details-container{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing-08, 0.5rem)}:host .course-info-container .info-sub-container .button-container{padding-top:var(--spacing-08, 0.5rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .course-info-container yoo-background{display:block}:host .course-info-container yoo-background.hidden{display:none}:host .course-info-container .course-description{padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .course-info-container .progress-bar-container{display:-ms-flexbox;display:flex;padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .course-info-container .progress-bar-container yoo-progress-bar{margin-right:var(--spacing-04, 0.25rem);--progress-bar-color:var(--app-color, #5a30f4)}:host(.web:not(.force-mobile)) .full-width-view{width:35%}:host(.mobile) .course-info-container{border:none}:host(.mobile) .course-info-container .course-title{margin:0;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-24, 1.5rem);line-height:normal}:host(.mobile) .course-info-container .course-info{margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-info yoo-tag{font-size:var(--font-size-16, 1rem)}:host(.mobile) .course-info-container .course-points{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-points yoo-tag{padding-right:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-points .badges-container{display:-ms-flexbox;display:flex}:host(.mobile) .course-info-container .course-points .badges-container yoo-tag{padding-right:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .progress-bar-container{height:1.25rem;margin-top:var(--spacing-16, 1rem);padding:0}:host(.mobile) .course-info-container .course-description{margin-top:var(--spacing-16, 1rem);padding:0;color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.web) yoo-progress-bar{--progress-value-font-size:var(--font-size-14, 0.875rem)}";
 const YooCourseSummaryComponent = class {
   constructor(hostRef) {
@@ -90,13 +90,13 @@ const YooCourseSummaryComponent = class {
           'progress-bar-container': true,
           'full-width-view': this.fullWidthProgressBar
         } }, (isWeb() ? this.renderWebProgressBar() :
-        h("yoo-progress-bar", { class: "app-color", animated: this.animated, value: this.courseProgress }))));
+        h("yoo-progress-bar", { animated: this.animated, value: this.courseProgress }))));
     }
   }
   renderWebProgressBar() {
     const lessonsCount = get(this.actualPlan, 'missiondescriptionsRef', []).length;
     const pluralizedLabel = translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON');
-    return [h("yoo-progress-bar", { class: "app-color", metric: "step", animated: this.animated, maxStep: lessonsCount, currentStep: this.course.finishedLessonsCount }), h("span", null, pluralizedLabel)];
+    return [h("yoo-progress-bar", { metric: "step", animated: this.animated, maxValue: lessonsCount, value: this.course.finishedLessonsCount }), h("span", null, pluralizedLabel)];
   }
   renderCompetency() {
     var _a, _b, _c, _d, _e;

package/dist/esm/yoo-dashboard-detail.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, h } from './index-019c1b1a.js';
-import { T as translateMulti, t as translate, W as pipes } from './index-916ec137.js';
-import './lodash-9d33f885.js';
+import { T as translateMulti, t as translate, W as pipes } from './index-16ec3116.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const dashboardDetailCss = ":host .container{padding:0.5rem}:host .container .title{font-size:var(--font-size-18, 1.125rem)}:host .container .description html,:host .container .description body,:host .container .description div:not([class^=fr-]),:host .container .description span:not([class^=fr-]),:host .container .description img:not([class^=fr-]),:host .container .description applet,:host .container .description object,:host .container .description iframe,:host .container .description h1,:host .container .description h2,:host .container .description h3,:host .container .description h4,:host .container .description h5,:host .container .description h6,:host .container .description p,:host .container .description blockquote,:host .container .description pre,:host .container .description a,:host .container .description abbr,:host .container .description acronym,:host .container .description address,:host .container .description big,:host .container .description cite,:host .container .description code,:host .container .description del,:host .container .description dfn,:host .container .description em,:host .container .description font,:host .container .description ins,:host .container .description kbd,:host .container .description q,:host .container .description s,:host .container .description samp,:host .container .description small,:host .container .description strike,:host .container .description strong,:host .container .description sub,:host .container .description sup,:host .container .description tt,:host .container .description var,:host .container .description dl,:host .container .description dt,:host .container .description dd,:host .container .description ol,:host .container .description ul,:host .container .description li,:host .container .description fieldset,:host .container .description form,:host .container .description label,:host .container .description legend,:host .container .description table,:host .container .description caption,:host .container .description tbody,:host .container .description tfoot,:host .container .description thead,:host .container .description tr,:host .container .description th{margin:0;padding:0;font-weight:inherit;font-size:100%;font-family:inherit;font-style:inherit;vertical-align:baseline;border:0;outline:0;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}:host .container .date{color:var(--text-color, #807f83)}";

package/dist/esm/yoo-date.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, e as Host } from './index-019c1b1a.js';
-import { W as pipes } from './index-916ec137.js';
-import './lodash-9d33f885.js';
+import { W as pipes } from './index-16ec3116.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const YooDateComponent = class {
   constructor(hostRef) {

package/dist/esm/yoo-detail-bar.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-019c1b1a.js';
-import { R as isNullOrUndefined, Z as dateFormat, t as translate, T as translateMulti, U as getLanguageKey } from './index-916ec137.js';
-import { E as isBoolean, l as isNumber } from './lodash-9d33f885.js';
-import { g as groupsFullResolver } from './entities-helpers-761673a0.js';
+import { R as isNullOrUndefined, Z as dateFormat, t as translate, T as translateMulti, U as getLanguageKey } from './index-16ec3116.js';
+import { E as isBoolean, l as isNumber } from './lodash-b0ad17f3.js';
+import { g as groupsFullResolver } from './entities-helpers-241530a3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-daddf2c7.js';
+import './index-03cf233d.js';
 const detailBarCss = ":host{width:100%}.section-container{padding:var(--spacing-16, 1rem) 0;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}.section-container .section-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-20, 1.25rem)}.section-container .section-title yoo-tag{margin-left:var(--spacing-08, 0.5rem)}.section-container .collapsible-container{display:-ms-flexbox;display:flex}.section-container .collapsible-container .items{display:block;padding-left:var(--spacing-04, 0.25rem)}.section-container .collapsible-container .items yoo-tag{margin-bottom:var(--spacing-08, 0.5rem);margin-left:var(--spacing-08, 0.5rem)}.section-container .section-subtitle{padding-right:var(--spacing-04, 0.25rem);color:var(--text-color, #807f83)}.section-container .content{color:var(--dark, #000000)}.section-container yoo-button{width:8.75rem;margin:var(--spacing-08, 0.5rem) 0}.section-container .sub-section-content{padding-bottom:var(--spacing-08, 0.5rem)}.section-container .sub-section-content .content{padding-right:var(--spacing-04, 0.25rem);white-space:normal}.section-container .sub-section-content .content yoo-tag.competency{max-width:100%}.section-container .sub-section-content .content yoo-tag.competency yoo-tooltip{display:initial}.section-container .sub-section{display:-ms-flexbox;display:flex;padding-bottom:var(--spacing-08, 0.5rem);white-space:nowrap}.section-container .sub-section .bullet{padding:0 var(--spacing-02, 0.125rem)}.section-container .sub-section yoo-img{width:var(--logo-07, 5rem);height:var(--logo-07, 5rem);margin:0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem)}.section-container .sub-section yoo-img.course{width:7.5rem;height:5.625rem}.section-container .sub-section yoo-tag{margin-left:var(--spacing-08, 0.5rem)}.section-container .sub-section yoo-avatar{padding-right:var(--spacing-04, 0.25rem)}.section-container .sub-section .content{padding-right:var(--spacing-04, 0.25rem);white-space:normal}.section-container .sub-section.language{-ms-flex-wrap:wrap;flex-wrap:wrap}.section-container .sub-section *{padding-bottom:var(--spacing-09)}.section-container yoo-collapsible{background:transparent}.section-container yoo-collapsible yoo-tag{margin-bottom:var(--spacing-08, 0.5rem);margin-left:var(--spacing-08, 0.5rem)}";

package/dist/esm/yoo-device-list.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { p as devices } from './index-daddf2c7.js';
-import { I as closeModal, t as translate } from './index-916ec137.js';
-import { u as uniq } from './lodash-9d33f885.js';
+import { p as devices } from './index-03cf233d.js';
+import { I as closeModal, t as translate } from './index-16ec3116.js';
+import { u as uniq } from './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
 const deviceListCss = ":host .header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .header yoo-button{padding:var(--spacing-08, 0.5rem)}:host .header .title{width:100%;padding-right:var(--spacing-40, 2.5rem);text-align:center}:host .divider{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:1.5rem;padding-left:var(--spacing-16, 1rem);color:var(--text-color, #807f83);font-weight:bold;font-size:var(--font-size-12, 0.75rem);background:var(--stable-ultralight, #fafafa)}:host yoo-form-choice-button,:host yoo-form-choice-chat,:host yoo-form-choice-card,:host yoo-form-choice-image,:host yoo-form-choice-radio{padding:0 var(--spacing-16, 1rem)}";

package/dist/esm/yoo-device.entry.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { r as registerInstance, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { p as devices } from './index-daddf2c7.js';
-import { p as debounce, r as findParent } from './index-916ec137.js';
-import './lodash-9d33f885.js';
+import { p as devices } from './index-03cf233d.js';
+import { p as debounce, r as findParent } from './index-16ec3116.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-const deviceCss = ".marvel-device{position:relative;display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box}.marvel-device .screen{position:relative;z-index:3;display:block;width:100%;height:100%;overflow:hidden;background:var(--light, #ffffff);border-radius:var(--border-width-01, 0.0625rem);-webkit-box-shadow:0 0 0 3px #111;box-shadow:0 0 0 3px #111}.marvel-device .top-bar,.marvel-device .bottom-bar{display:block;width:100%;height:3px;background:var(--dark, #000000)}.marvel-device .middle-bar{position:absolute;top:0px;left:90px;width:3px;height:4px;background:var(--dark, #000000)}.marvel-device.iphone8{width:375px;height:667px;padding:105px 24px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2)}.marvel-device.iphone8:before{position:absolute;top:6px;left:6px;z-index:1;width:calc(100% - 12px);height:calc(100% - 12px);background:#f8f8f8;border-radius:50px;content:\"\"}.marvel-device.iphone8:after{position:absolute;top:8px;left:8px;z-index:2;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #fff;content:\"\"}.marvel-device.iphone8 .home{position:absolute;bottom:22px;left:50%;z-index:3;width:68px;height:68px;margin-left:-34px;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);border-radius:100%}.marvel-device.iphone8 .home:before{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);background:#f8f8f8;border-radius:100%;content:\"\"}.marvel-device.iphone8 .top-bar{position:absolute;top:68px;left:0;height:14px;background:#bfbfc0}.marvel-device.iphone8 .bottom-bar{position:absolute;bottom:68px;left:0;height:14px;background:#bfbfc0}.marvel-device.iphone8 .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;background:#d9dbdc;border-radius:0px 2px 2px 0px}.marvel-device.iphone8 .volume{position:absolute;top:188px;left:-4px;z-index:0;width:4px;height:66px;background:#d9dbdc;border-radius:2px 0px 0px 2px}.marvel-device.iphone8 .volume:before{position:absolute;top:-78px;left:2px;display:block;width:2px;height:40px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone8 .volume:after{position:absolute;top:82px;left:0px;display:block;width:4px;height:66px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone8 .camera{position:absolute;top:24px;left:50%;z-index:3;width:12px;height:12px;margin-left:-6px;background:#3c3d3d;border-radius:100%}.marvel-device.iphone8 .sensor{position:absolute;top:49px;left:134px;z-index:3;width:16px;height:16px;background:#3c3d3d;border-radius:100%}.marvel-device.iphone8 .speaker{position:absolute;top:54px;left:50%;z-index:3;width:70px;height:6px;margin-left:-35px;background:#292728;border-radius:6px}.marvel-device.iphone8.gold{background:#f9e7d3}.marvel-device.iphone8.gold .top-bar,.marvel-device.iphone8.gold .bottom-bar{background:var(--light, #ffffff)}.marvel-device.iphone8.gold .sleep,.marvel-device.iphone8.gold .volume{background:#f9e7d3}.marvel-device.iphone8.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 var(--dark-80, rgba(0, 0, 0, 0.8));box-shadow:inset 0 0 3px 0 var(--dark-80, rgba(0, 0, 0, 0.8))}.marvel-device.iphone8.black:before{background:#080808}.marvel-device.iphone8.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121}.marvel-device.iphone8.black .top-bar,.marvel-device.iphone8.black .bottom-bar{background:#212121}.marvel-device.iphone8.black .volume,.marvel-device.iphone8.black .sleep{background:#464646}.marvel-device.iphone8.black .camera{background:#080808}.marvel-device.iphone8.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8.black .home:before{background:#080808}.marvel-device.iphone8.landscape{width:667px;height:375px;padding:24px 105px}.marvel-device.iphone8.landscape .sleep{top:100%;right:190px;width:66px;height:4px;border-radius:0px 0px 2px 2px}.marvel-device.iphone8.landscape .volume{top:-4px;left:calc(100% - 188px - 66px);width:66px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:before{top:2px;right:-78px;left:auto;width:40px;height:2px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:after{top:0;left:-82px;width:66px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .top-bar{top:0;left:calc(100% - 68px - 14px);width:14px;height:100%}.marvel-device.iphone8.landscape .bottom-bar{top:0;left:68px;width:14px;height:100%}.marvel-device.iphone8.landscape .home{top:50%;left:22px;margin-top:-34px;margin-left:0}.marvel-device.iphone8.landscape .sensor{top:134px;left:calc(100% - 49px - 16px)}.marvel-device.iphone8.landscape .speaker{top:50%;left:calc(100% - 54px - 6px);width:6px;height:70px;margin-top:-35px;margin-left:0px}.marvel-device.iphone8.landscape .camera{top:50%;left:calc(100% - 32px);margin-top:-5px;margin-left:0px}.marvel-device.iphone8plus{width:414px;height:736px;padding:112px 26px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2)}.marvel-device.iphone8plus:before{position:absolute;top:6px;left:6px;z-index:1;width:calc(100% - 12px);height:calc(100% - 12px);background:#f8f8f8;border-radius:50px;content:\"\"}.marvel-device.iphone8plus:after{position:absolute;top:8px;left:8px;z-index:2;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #fff;content:\"\"}.marvel-device.iphone8plus .home{position:absolute;bottom:24px;left:50%;z-index:3;width:68px;height:68px;margin-left:-34px;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);border-radius:100%}.marvel-device.iphone8plus .home:before{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);background:#f8f8f8;border-radius:100%;content:\"\"}.marvel-device.iphone8plus .top-bar{position:absolute;top:68px;left:0;height:14px;background:#bfbfc0}.marvel-device.iphone8plus .bottom-bar{position:absolute;bottom:68px;left:0;height:14px;background:#bfbfc0}.marvel-device.iphone8plus .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;background:#d9dbdc;border-radius:0px 2px 2px 0px}.marvel-device.iphone8plus .volume{position:absolute;top:188px;left:-4px;z-index:0;width:4px;height:66px;background:#d9dbdc;border-radius:2px 0px 0px 2px}.marvel-device.iphone8plus .volume:before{position:absolute;top:-78px;left:2px;display:block;width:2px;height:40px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone8plus .volume:after{position:absolute;top:82px;left:0px;display:block;width:4px;height:66px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone8plus .camera{position:absolute;top:29px;left:50%;z-index:3;width:12px;height:12px;margin-left:-6px;background:#3c3d3d;border-radius:100%}.marvel-device.iphone8plus .sensor{position:absolute;top:54px;left:154px;z-index:3;width:16px;height:16px;background:#3c3d3d;border-radius:100%}.marvel-device.iphone8plus .speaker{position:absolute;top:59px;left:50%;z-index:3;width:70px;height:6px;margin-left:-35px;background:#292728;border-radius:6px}.marvel-device.iphone8plus.gold{background:#f9e7d3}.marvel-device.iphone8plus.gold .top-bar,.marvel-device.iphone8plus.gold .bottom-bar{background:var(--light, #ffffff)}.marvel-device.iphone8plus.gold .sleep,.marvel-device.iphone8plus.gold .volume{background:#f9e7d3}.marvel-device.iphone8plus.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8plus.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 var(--dark-80, rgba(0, 0, 0, 0.8));box-shadow:inset 0 0 3px 0 var(--dark-80, rgba(0, 0, 0, 0.8))}.marvel-device.iphone8plus.black:before{background:#080808}.marvel-device.iphone8plus.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121}.marvel-device.iphone8plus.black .top-bar,.marvel-device.iphone8plus.black .bottom-bar{background:#212121}.marvel-device.iphone8plus.black .volume,.marvel-device.iphone8plus.black .sleep{background:#464646}.marvel-device.iphone8plus.black .camera{background:#080808}.marvel-device.iphone8plus.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8plus.black .home:before{background:#080808}.marvel-device.iphone8plus.landscape{width:736px;height:414px;padding:26px 112px}.marvel-device.iphone8plus.landscape .sleep{top:100%;right:190px;width:66px;height:4px;border-radius:0px 0px 2px 2px}.marvel-device.iphone8plus.landscape .volume{top:-4px;left:calc(100% - 188px - 66px);width:66px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:before{top:2px;right:-78px;left:auto;width:40px;height:2px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:after{top:0;left:-82px;width:66px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .top-bar{top:0;left:calc(100% - 68px - 14px);width:14px;height:100%}.marvel-device.iphone8plus.landscape .bottom-bar{top:0;left:68px;width:14px;height:100%}.marvel-device.iphone8plus.landscape .home{top:50%;left:24px;margin-top:-34px;margin-left:0}.marvel-device.iphone8plus.landscape .sensor{top:154px;left:calc(100% - 54px - 16px)}.marvel-device.iphone8plus.landscape .speaker{top:50%;left:calc(100% - 59px - 6px);width:6px;height:70px;margin-top:-35px;margin-left:0px}.marvel-device.iphone8plus.landscape .camera{top:50%;left:calc(100% - 29px);margin-top:-5px;margin-left:0px}.marvel-device.iphone5s,.marvel-device.iphone5c{width:320px;height:568px;padding:105px 22px;background:#2c2b2c;border-radius:50px}.marvel-device.iphone5s:before,.marvel-device.iphone5c:before{position:absolute;top:4px;left:4px;z-index:1;width:calc(100% - 8px);height:calc(100% - 8px);background:#1e1e1e;border-radius:46px;content:\"\"}.marvel-device.iphone5s .sleep,.marvel-device.iphone5c .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;background:#282727;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s .volume,.marvel-device.iphone5c .volume{position:absolute;top:180px;left:-4px;z-index:0;width:4px;height:27px;background:#282727;border-radius:2px 0px 0px 2px}.marvel-device.iphone5s .volume:before,.marvel-device.iphone5c .volume:before{position:absolute;top:-75px;left:0px;display:block;width:4px;height:35px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone5s .volume:after,.marvel-device.iphone5c .volume:after{position:absolute;bottom:-64px;left:0px;display:block;width:4px;height:27px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone5s .camera,.marvel-device.iphone5c .camera{position:absolute;top:32px;left:50%;z-index:3;width:10px;height:10px;margin-left:-5px;background:#3c3d3d;border-radius:5px}.marvel-device.iphone5s .sensor,.marvel-device.iphone5c .sensor{position:absolute;top:60px;left:160px;z-index:3;width:10px;height:10px;margin-left:-32px;background:#3c3d3d;border-radius:5px}.marvel-device.iphone5s .speaker,.marvel-device.iphone5c .speaker{position:absolute;top:60px;left:50%;z-index:3;width:64px;height:10px;margin-left:-32px;background:#292728;border-radius:5px}.marvel-device.iphone5s.landscape,.marvel-device.iphone5c.landscape{width:568px;height:320px;padding:22px 105px}.marvel-device.iphone5s.landscape .sleep,.marvel-device.iphone5c.landscape .sleep{top:calc(100% - 120px);right:-4px;width:4px;height:60px;border-radius:0px 2px 2px 0px}.marvel-device.iphone5s.landscape .volume,.marvel-device.iphone5c.landscape .volume{top:-4px;left:calc(100% - 180px);width:27px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:before,.marvel-device.iphone5c.landscape .volume:before{top:0px;right:-75px;left:auto;width:35px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:after,.marvel-device.iphone5c.landscape .volume:after{bottom:0px;left:-64px;z-index:999;width:27px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .sensor,.marvel-device.iphone5c.landscape .sensor{top:160px;left:calc(100% - 60px);margin-top:-32px;margin-left:0px}.marvel-device.iphone5s.landscape .speaker,.marvel-device.iphone5c.landscape .speaker{top:50%;left:calc(100% - 60px);width:10px;height:64px;margin-top:-32px;margin-left:0px}.marvel-device.iphone5s.landscape .camera,.marvel-device.iphone5c.landscape .camera{top:50%;left:calc(100% - 32px);margin-top:-5px;margin-left:0px}.marvel-device.iphone5s .home{position:absolute;bottom:19px;left:50%;z-index:3;width:68px;height:68px;margin-left:-34px;border-radius:36px;-webkit-box-shadow:inset 0 0 0 4px #2c2b2c;box-shadow:inset 0 0 0 4px #2c2b2c}.marvel-device.iphone5s .top-bar{position:absolute;top:70px;left:0}.marvel-device.iphone5s .bottom-bar{position:absolute;bottom:70px;left:0}.marvel-device.iphone5s.landscape .home{bottom:50%;left:19px;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5s.landscape .top-bar{top:0px;left:70px;width:3px;height:100%}.marvel-device.iphone5s.landscape .bottom-bar{right:70px;bottom:0px;left:auto;width:3px;height:100%}.marvel-device.iphone5s.silver{background:#bcbcbc}.marvel-device.iphone5s.silver:before{background:#fcfcfc}.marvel-device.iphone5s.silver .volume,.marvel-device.iphone5s.silver .sleep{background:#d6d6d6}.marvel-device.iphone5s.silver .top-bar,.marvel-device.iphone5s.silver .bottom-bar{background:#eaebec}.marvel-device.iphone5s.silver .home{-webkit-box-shadow:inset 0 0 0 4px #bcbcbc;box-shadow:inset 0 0 0 4px #bcbcbc}.marvel-device.iphone5s.gold{background:#f9e7d3}.marvel-device.iphone5s.gold:before{background:#fcfcfc}.marvel-device.iphone5s.gold .volume,.marvel-device.iphone5s.gold .sleep{background:#f9e7d3}.marvel-device.iphone5s.gold .top-bar,.marvel-device.iphone5s.gold .bottom-bar{background:var(--light, #ffffff)}.marvel-device.iphone5s.gold .home{-webkit-box-shadow:inset 0 0 0 4px #f9e7d3;box-shadow:inset 0 0 0 4px #f9e7d3}.marvel-device.iphone5c{background:var(--light, #ffffff);-webkit-box-shadow:0 var(--border-width-01, 0.0625rem) 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 var(--border-width-01, 0.0625rem) 2px 0 rgba(0, 0, 0, 0.2)}.marvel-device.iphone5c .top-bar,.marvel-device.iphone5c .bottom-bar{display:none}.marvel-device.iphone5c .home{position:absolute;bottom:19px;left:50%;z-index:3;width:68px;height:68px;margin-left:-34px;background:#242324;border-radius:36px}.marvel-device.iphone5c .home:after{position:absolute;top:50%;left:50%;display:block;width:20px;height:20px;margin-top:-11px;margin-left:-11px;border:var(--border-width-01, 0.0625rem) solid rgba(255, 255, 255, 0.1);border-radius:4px;content:\"\"}.marvel-device.iphone5c.landscape .home{bottom:50%;left:19px;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5c .volume,.marvel-device.iphone5c .sleep{background:#dddddd}.marvel-device.iphone5c.red{background:#f96b6c}.marvel-device.iphone5c.red .volume,.marvel-device.iphone5c.red .sleep{background:#ed5758}.marvel-device.iphone5c.yellow{background:#f2dc60}.marvel-device.iphone5c.yellow .volume,.marvel-device.iphone5c.yellow .sleep{background:#e5ce4c}.marvel-device.iphone5c.green{background:#97e563}.marvel-device.iphone5c.green .volume,.marvel-device.iphone5c.green .sleep{background:#85d94d}.marvel-device.iphone5c.blue{background:#33a2db}.marvel-device.iphone5c.blue .volume,.marvel-device.iphone5c.blue .sleep{background:#2694cd}.marvel-device.iphone4s{width:320px;height:480px;padding:129px 27px;background:#686868;border-radius:54px}.marvel-device.iphone4s:before{position:absolute;top:4px;left:4px;z-index:1;width:calc(100% - 8px);height:calc(100% - 8px);background:#1e1e1e;border-radius:50px;content:\"\"}.marvel-device.iphone4s .top-bar{position:absolute;top:60px;left:0}.marvel-device.iphone4s .bottom-bar{position:absolute;bottom:90px;left:0}.marvel-device.iphone4s .camera{position:absolute;top:72px;left:134px;z-index:3;width:10px;height:10px;margin-left:-5px;background:#3c3d3d;border-radius:100%}.marvel-device.iphone4s .speaker{position:absolute;top:72px;left:50%;z-index:3;width:64px;height:10px;margin-left:-32px;background:#292728;border-radius:5px}.marvel-device.iphone4s .sensor{position:absolute;top:36px;left:50%;z-index:3;width:40px;height:10px;margin-left:-20px;background:#292728;border-radius:5px}.marvel-device.iphone4s .home{position:absolute;bottom:30px;left:50%;z-index:3;width:72px;height:72px;margin-left:-36px;background:#242324;border-radius:100%}.marvel-device.iphone4s .home:after{position:absolute;top:50%;left:50%;display:block;width:20px;height:20px;margin-top:-11px;margin-left:-11px;border:var(--border-width-01, 0.0625rem) solid rgba(255, 255, 255, 0.1);border-radius:4px;content:\"\"}.marvel-device.iphone4s .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;background:#4d4d4d;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s .volume{position:absolute;top:160px;left:-4px;width:4px;height:27px;background:#4d4d4d;border-radius:2px 0px 0px 2px}.marvel-device.iphone4s .volume:before{position:absolute;top:-70px;left:0px;display:block;width:4px;height:35px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone4s .volume:after{position:absolute;bottom:-64px;left:0px;display:block;width:4px;height:27px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone4s.landscape{width:480px;height:320px;padding:27px 129px}.marvel-device.iphone4s.landscape .bottom-bar{bottom:0px;left:90px;width:3px;height:100%}.marvel-device.iphone4s.landscape .top-bar{top:0px;left:calc(100% - 60px);width:3px;height:100%}.marvel-device.iphone4s.landscape .camera{top:134px;left:calc(100% - 72px);margin-left:0}.marvel-device.iphone4s.landscape .speaker{top:50%;left:calc(100% - 72px);width:10px;height:64px;margin-top:-32px;margin-left:0}.marvel-device.iphone4s.landscape .sensor{top:50%;left:calc(100% - 36px);width:10px;height:40px;margin-top:-20px;margin-left:0}.marvel-device.iphone4s.landscape .home{bottom:50%;left:30px;margin-bottom:-36px;margin-left:0}.marvel-device.iphone4s.landscape .sleep{top:calc(100% - 120px);right:-4px;width:4px;height:60px;border-radius:0px 2px 2px 0px}.marvel-device.iphone4s.landscape .volume{top:-4px;left:calc(100% - 187px);width:27px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:before{top:0px;right:-70px;left:auto;width:35px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:after{bottom:0px;left:-64px;width:27px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.silver{background:#bcbcbc}.marvel-device.iphone4s.silver:before{background:#fcfcfc}.marvel-device.iphone4s.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 var(--border-width-01, 0.0625rem) #bcbcbc;box-shadow:inset 0 0 0 var(--border-width-01, 0.0625rem) #bcbcbc}.marvel-device.iphone4s.silver .home:after{border:var(--border-width-01, 0.0625rem) solid rgba(0, 0, 0, 0.2)}.marvel-device.iphone4s.silver .volume,.marvel-device.iphone4s.silver .sleep{background:#d6d6d6}.marvel-device.nexus5{width:320px;height:568px;padding:50px 15px 50px 15px;background:#1e1e1e;border-radius:20px}.marvel-device.nexus5:before{position:absolute;top:0;top:50%;left:50%;width:calc(100% - 26px);height:103.1%;background:inherit;border-radius:600px/50px;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);content:\"\"}.marvel-device.nexus5 .top-bar{position:absolute;top:3px;left:4px;width:calc(100% - 8px);height:calc(100% - 6px);background:#181818;border-radius:20px}.marvel-device.nexus5 .top-bar:before{position:absolute;top:0;top:50%;left:50%;width:calc(100% - 26px);height:103%;background:inherit;border-radius:600px/50px;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);content:\"\"}.marvel-device.nexus5 .bottom-bar{display:none}.marvel-device.nexus5 .sleep{position:absolute;top:110px;left:-3px;width:3px;height:100px;background:inherit;border-radius:2px 0px 0px 2px}.marvel-device.nexus5 .volume{position:absolute;top:70px;right:-3px;width:3px;height:45px;background:inherit;border-radius:0px 2px 2px 0px}.marvel-device.nexus5 .camera{position:absolute;top:18px;left:50%;z-index:3;width:10px;height:10px;margin-left:-5px;background:#3c3d3d;border-radius:100%}.marvel-device.nexus5 .camera:before{position:absolute;top:2px;left:-100px;z-index:3;display:block;width:6px;height:6px;background:#3c3d3d;border-radius:100%;content:\"\"}.marvel-device.nexus5.landscape{width:568px;height:320px;padding:15px 50px 15px 50px}.marvel-device.nexus5.landscape:before{width:103.1%;height:calc(100% - 26px);border-radius:50px/600px}.marvel-device.nexus5.landscape .top-bar{top:4px;left:3px;width:calc(100% - 6px);height:calc(100% - 8px)}.marvel-device.nexus5.landscape .top-bar:before{width:103%;height:calc(100% - 26px);border-radius:50px/600px}.marvel-device.nexus5.landscape .sleep{top:-3px;left:calc(100% - 210px);width:100px;height:3px;border-radius:2px 2px 0px 0px}.marvel-device.nexus5.landscape .volume{top:100%;right:70px;width:45px;height:3px;border-radius:0px 0px 2px 2px}.marvel-device.nexus5.landscape .camera{top:50%;left:calc(100% - 18px);margin-top:-5px;margin-left:0}.marvel-device.nexus5.landscape .camera:before{top:-100px;left:2px}.marvel-device.s5{width:320px;height:568px;padding:60px 18px;background:#bcbcbc;border-radius:42px}.marvel-device.s5:before,.marvel-device.s5:after{position:absolute;left:50%;display:block;width:calc(100% - 52px);height:26px;background:inherit;border-radius:500px/40px;-webkit-transform:translateX(-50%);transform:translateX(-50%);content:\"\"}.marvel-device.s5:before{top:-7px}.marvel-device.s5:after{bottom:-7px}.marvel-device.s5 .bottom-bar{display:none}.marvel-device.s5 .top-bar{position:absolute;top:5px;left:5px;z-index:2;width:calc(100% - 10px);height:calc(100% - 10px);background:radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 0 0, radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 3px 3px;background-color:var(--light, #ffffff);background-position:center;background-size:4px 4px;border-radius:37px}.marvel-device.s5 .top-bar:before,.marvel-device.s5 .top-bar:after{position:absolute;left:50%;display:block;width:calc(100% - 48px);height:26px;background:inherit;border-radius:500px/40px;-webkit-transform:translateX(-50%);transform:translateX(-50%);content:\"\"}.marvel-device.s5 .top-bar:before{top:-7px}.marvel-device.s5 .top-bar:after{bottom:-7px}.marvel-device.s5 .sleep{position:absolute;top:100px;left:-3px;width:3px;height:100px;background:#cecece;border-radius:2px 0px 0px 2px}.marvel-device.s5 .speaker{position:absolute;top:20px;left:50%;z-index:3;display:block;width:68px;height:8px;margin-left:-34px;background-color:#bcbcbc;background-position:top left;border-radius:4px}.marvel-device.s5 .sensor{position:absolute;top:20px;right:110px;z-index:3;display:block;width:8px;height:8px;background:#3c3d3d;border-radius:100%}.marvel-device.s5 .sensor:after{position:absolute;top:0px;right:12px;z-index:3;display:block;width:8px;height:8px;background:#3c3d3d;border-radius:100%;content:\"\"}.marvel-device.s5 .camera{position:absolute;top:24px;right:42px;z-index:3;display:block;width:10px;height:10px;background:var(--dark, #000000);border-radius:100%}.marvel-device.s5 .camera:before{position:absolute;top:50%;left:50%;width:4px;height:4px;margin-top:-2px;margin-left:-2px;background:#3c3d3d;border-radius:100%;content:\"\"}.marvel-device.s5 .home{position:absolute;bottom:17px;left:50%;z-index:3;display:block;width:70px;height:20px;margin-left:-35px;background:var(--light, #ffffff);border:2px solid black;border-radius:18px}.marvel-device.s5.landscape{width:568px;height:320px;padding:18px 60px}.marvel-device.s5.landscape:before,.marvel-device.s5.landscape:after{width:26px;height:calc(100% - 52px);border-radius:40px/500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape:before{top:50%;left:-7px}.marvel-device.s5.landscape:after{top:50%;right:-7px;left:auto}.marvel-device.s5.landscape .top-bar:before,.marvel-device.s5.landscape .top-bar:after{width:26px;height:calc(100% - 48px);border-radius:40px/500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape .top-bar:before{top:50%;right:-7px;left:auto}.marvel-device.s5.landscape .top-bar:after{top:50%;right:auto;left:-7px}.marvel-device.s5.landscape .sleep{top:-3px;left:calc(100% - 200px);width:100px;height:3px;border-radius:2px 2px 0px 0px}.marvel-device.s5.landscape .speaker{top:50%;left:calc(100% - 20px);width:8px;height:68px;margin-top:-34px;margin-left:0}.marvel-device.s5.landscape .sensor{top:calc(100% - 110px);right:20px}.marvel-device.s5.landscape .sensor:after{right:0px;left:-12px}.marvel-device.s5.landscape .camera{top:calc(100% - 42px);right:24px}.marvel-device.s5.landscape .home{bottom:50%;left:17px;width:20px;height:70px;margin-bottom:-35px;margin-left:0}.marvel-device.s5.black{background:#1e1e1e}.marvel-device.s5.black .speaker{background:var(--dark, #000000)}.marvel-device.s5.black .sleep{background:#1e1e1e}.marvel-device.s5.black .top-bar{background:radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 0 0, radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 3px 3px;background-color:#2c2b2c;background-size:4px 4px}.marvel-device.s5.black .home{background:#2c2b2c}.marvel-device.lumia920{width:320px;height:533px;padding:80px 35px 125px 35px;background:#ffdd00;border-radius:40px/3px}.marvel-device.lumia920 .bottom-bar{display:none}.marvel-device.lumia920 .top-bar{position:absolute;top:16px;left:12px;z-index:1;width:calc(100% - 24px);height:calc(100% - 32px);background:var(--dark, #000000);border-radius:24px}.marvel-device.lumia920 .top-bar:before{position:absolute;top:2px;left:2px;display:block;width:calc(100% - 4px);height:calc(100% - 4px);background:#1e1e1e;border-radius:22px;content:\"\"}.marvel-device.lumia920 .volume{position:absolute;top:130px;right:-3px;width:3px;height:100px;background:#1e1e1e;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:before{position:absolute;top:190px;right:0px;display:block;width:3px;height:50px;background:inherit;border-radius:0px 2px 2px 0px;content:\"\"}.marvel-device.lumia920 .volume:after{position:absolute;top:460px;right:0px;display:block;width:3px;height:50px;background:inherit;border-radius:0px 2px 2px 0px;content:\"\"}.marvel-device.lumia920 .camera{position:absolute;top:34px;right:130px;z-index:5;width:10px;height:10px;background:#3c3d3d;border-radius:5px}.marvel-device.lumia920 .speaker{position:absolute;top:38px;left:50%;z-index:3;width:64px;height:10px;margin-left:-32px;background:#292728;border-radius:5px}.marvel-device.lumia920.landscape{width:568px;height:320px;padding:35px 80px 35px 125px;border-radius:2px/100px}.marvel-device.lumia920.landscape .top-bar{top:12px;left:16px;width:calc(100% - 32px);height:calc(100% - 24px)}.marvel-device.lumia920.landscape .volume{top:100%;right:130px;width:100px;height:3px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:before{top:0px;right:190px;width:50px;height:3px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:after{top:0px;right:430px;width:50px;height:3px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .camera{top:calc(100% - 140px);right:30px}.marvel-device.lumia920.landscape .speaker{top:50%;left:calc(100% - 48px);width:10px;height:64px;margin-top:-32px;margin-left:0}.marvel-device.lumia920.black{background:var(--dark, #000000)}.marvel-device.lumia920.white{background:var(--light, #ffffff);-webkit-box-shadow:0 var(--border-width-01, 0.0625rem) 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 var(--border-width-01, 0.0625rem) 2px 0 rgba(0, 0, 0, 0.2)}.marvel-device.lumia920.blue{background:#00acdd}.marvel-device.lumia920.red{background:#cc3e32}.marvel-device.htc-one{width:320px;height:568px;padding:72px 25px 100px 25px;background:#bebebe;border-radius:34px}.marvel-device.htc-one:before{position:absolute;top:2px;left:2px;display:block;width:calc(100% - 4px);height:calc(100% - 4px);background:var(--stable, #adadad);border-radius:32px;content:\"\"}.marvel-device.htc-one:after{position:absolute;top:4px;left:4px;display:block;width:calc(100% - 8px);height:calc(100% - 8px);background:#eeeeee;border-radius:30px;content:\"\"}.marvel-device.htc-one .top-bar{position:absolute;top:50px;left:2px;z-index:1;width:calc(100% - 4px);height:635px;background:#424242}.marvel-device.htc-one .top-bar:before{position:absolute;top:0px;left:2px;z-index:1;width:calc(100% - 4px);height:100%;background:var(--dark, #000000);content:\"\"}.marvel-device.htc-one .bottom-bar{display:none}.marvel-device.htc-one .speaker{position:absolute;top:22px;left:50%;z-index:2;display:block;width:216px;height:16px;margin-left:-108px;background:radial-gradient(#343434 25%, transparent 50%) 0 0, radial-gradient(#343434 25%, transparent 50%) 4px 4px;background-position:top left;background-size:4px 4px}.marvel-device.htc-one .speaker:after{position:absolute;top:676px;left:50%;z-index:2;display:block;width:216px;height:16px;margin-left:-108px;background:inherit;content:\"\"}.marvel-device.htc-one .camera{position:absolute;top:18px;right:38px;z-index:3;display:block;width:24px;height:24px;background:#3c3d3d;border-radius:100%}.marvel-device.htc-one .camera:before{position:absolute;top:50%;left:50%;width:8px;height:8px;margin-top:-4px;margin-left:-4px;background:var(--dark, #000000);border-radius:100%;content:\"\"}.marvel-device.htc-one .sensor{position:absolute;top:29px;left:60px;z-index:3;display:block;width:8px;height:8px;background:#3c3d3d;border-radius:100%}.marvel-device.htc-one .sensor:after{position:absolute;top:0px;right:12px;z-index:3;display:block;width:8px;height:8px;background:#3c3d3d;border-radius:100%;content:\"\"}.marvel-device.htc-one.landscape{width:568px;height:320px;padding:25px 72px 25px 100px}.marvel-device.htc-one.landscape .top-bar{top:2px;left:calc(100% - 685px);width:635px;height:calc(100% - 4px)}.marvel-device.htc-one.landscape .speaker{top:50%;left:calc(100% - 38px);width:16px;height:216px;margin-top:-108px;margin-left:0px}.marvel-device.htc-one.landscape .speaker:after{top:50%;left:calc(100% - 692px);width:16px;height:216px;margin-top:-108px;margin-left:0}.marvel-device.htc-one.landscape .camera{top:calc(100% - 38px);right:18px}.marvel-device.htc-one.landscape .sensor{top:60px;left:calc(100% - 29px)}.marvel-device.htc-one.landscape .sensor :after{top:-12px;right:0}.marvel-device.ipad{width:576px;height:768px;padding:23px;background:#242324;border-radius:30px}.marvel-device.ipad:before{position:absolute;top:4px;left:4px;display:block;width:calc(100% - 8px);height:calc(100% - 8px);background:#1e1e1e;border-radius:40px;content:\"\"}.marvel-device.ipad .camera{position:absolute;top:44px;left:50%;width:10px;height:10px;margin-left:-5px;background:#3c3d3d;border-radius:100%}.marvel-device.ipad .top-bar,.marvel-device.ipad .bottom-bar{display:none}.marvel-device.ipad .screen{border-radius:6px}.marvel-device.ipad .home{position:absolute;bottom:22px;left:50%;width:50px;height:50px;margin-left:-25px;background:#242324;border-radius:36px}.marvel-device.ipad .home:after{position:absolute;top:50%;left:50%;display:block;width:15px;height:15px;margin-top:-8px;margin-left:-8px;border:var(--border-width-01, 0.0625rem) solid rgba(255, 255, 255, 0.1);border-radius:4px;content:\"\"}.marvel-device.ipad.landscape{width:768px;height:576px;padding:25px 90px}.marvel-device.ipad.landscape .camera{top:50%;left:calc(100% - 44px);margin-top:-5px;margin-left:0}.marvel-device.ipad.landscape .home{top:50%;left:22px;margin-top:-25px;margin-left:0}.marvel-device.ipad.silver{background:#bcbcbc}.marvel-device.ipad.silver:before{background:#fcfcfc}.marvel-device.ipad.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 var(--border-width-01, 0.0625rem) #bcbcbc;box-shadow:inset 0 0 0 var(--border-width-01, 0.0625rem) #bcbcbc}.marvel-device.ipad.silver .home:after{border:var(--border-width-01, 0.0625rem) solid rgba(0, 0, 0, 0.2)}.marvel-device.macbook{width:960px;height:600px;margin:0 auto;padding:44px 44px 76px;background:#bebebe;border-radius:34px}.marvel-device.macbook:before{position:absolute;top:4px;left:4px;display:block;width:calc(100% - 8px);height:calc(100% - 8px);background:#1e1e1e;border-radius:30px;content:\"\"}.marvel-device.macbook .top-bar{position:absolute;top:688px;left:0;display:block;width:100%;height:40px;background:#bebebe;border-bottom-right-radius:90px 18px;border-bottom-left-radius:90px 18px;-webkit-box-shadow:inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6);box-shadow:inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6);content:\"\"}.marvel-device.macbook .top-bar:before{position:relative;top:0;left:0;display:block;width:100%;height:24px;background:#f0f0f0;border-bottom:2px solid #aaa;border-radius:5px;content:\"\"}.marvel-device.macbook .top-bar:after{position:absolute;top:0;right:0;left:0;display:block;width:16%;height:14px;margin-right:auto;margin-left:auto;background:#ddd;border-radius:0 0 20px 20px;-webkit-box-shadow:inset 0px -3px 10px #999;box-shadow:inset 0px -3px 10px #999;content:\"\"}.marvel-device.macbook .bottom-bar{position:absolute;top:688px;left:0;display:block;width:100%;height:26px;background:transparent;content:\"\"}.marvel-device.macbook .bottom-bar:before,.marvel-device.macbook .bottom-bar:after{position:absolute;top:0;display:block;width:80px;height:calc(100% - 2px);content:\"\"}.marvel-device.macbook .bottom-bar:before{left:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#747474), color-stop(5%, #c3c3c3), color-stop(14%, #ebebeb), color-stop(41%, #979797), color-stop(80%, #f0f0f0), color-stop(100%, #f0f0f0), to(#f0f0f0));background:linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%)}.marvel-device.macbook .bottom-bar:after{right:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#f0f0f0), color-stop(0%, #f0f0f0), color-stop(20%, #f0f0f0), color-stop(59%, #979797), color-stop(86%, #ebebeb), color-stop(95%, #c3c3c3), to(#747474));background:linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%)}.marvel-device.macbook .camera{position:absolute;top:20px;left:50%;width:10px;height:10px;margin-left:-5px;background:#3c3d3d;border-radius:100%}.marvel-device.macbook .home{display:none}.marvel-device.iphone-x{width:350px;height:702px;padding:26px;background:#fdfdfd;border-radius:66px;-webkit-box-shadow:inset 0 0 11px 0 black;box-shadow:inset 0 0 11px 0 black}.marvel-device.iphone-x .overflow{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:66px}.marvel-device.iphone-x .shadow{position:absolute;width:90px;height:90px;background:radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 60%);border-radius:100%}.marvel-device.iphone-x .shadow--tl{top:-20px;left:-20px}.marvel-device.iphone-x .shadow--tr{top:-20px;right:-20px}.marvel-device.iphone-x .shadow--bl{bottom:-20px;left:-20px}.marvel-device.iphone-x .shadow--br{right:-20px;bottom:-20px}.marvel-device.iphone-x:before{position:absolute;top:5px;left:5px;z-index:1;width:calc(100% - 10px);height:calc(100% - 10px);background:var(--dark, #000000);border-radius:61px;content:\"\"}.marvel-device.iphone-x .inner-shadow{position:absolute;top:10px;left:10px;z-index:1;width:calc(100% - 20px);height:calc(100% - 20px);overflow:hidden;border-radius:56px;-webkit-box-shadow:inset 0 0 15px 0 rgba(255, 255, 255, 0.66);box-shadow:inset 0 0 15px 0 rgba(255, 255, 255, 0.66)}.marvel-device.iphone-x .inner-shadow:before{position:absolute;top:-8%;left:0;z-index:2;width:100%;height:116%;border-radius:200px/112px;-webkit-box-shadow:inset 0 0 20px 0 var(--light, #ffffff);box-shadow:inset 0 0 20px 0 var(--light, #ffffff);content:\"\"}.marvel-device.iphone-x .screen{border-radius:40px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.iphone-x .top-bar,.marvel-device.iphone-x .bottom-bar{position:absolute;left:0;width:100%;height:8px;background:rgba(0, 0, 0, 0.1)}.marvel-device.iphone-x .top-bar{top:80px}.marvel-device.iphone-x .bottom-bar{bottom:80px}.marvel-device.iphone-x .volume,.marvel-device.iphone-x .volume:before,.marvel-device.iphone-x .volume:after,.marvel-device.iphone-x .sleep{position:absolute;width:3px;background:#b5b5b5}.marvel-device.iphone-x .volume{top:116px;left:-3px;height:32px}.marvel-device.iphone-x .volume:before{top:62px;left:0;height:62px;content:\"\"}.marvel-device.iphone-x .volume:after{top:140px;left:0;height:62px;content:\"\"}.marvel-device.iphone-x .sleep{top:200px;right:-3px;height:96px}.marvel-device.iphone-x .camera{position:absolute;top:9px;left:154px;width:6px;height:6px;background:#0d4d71;border-radius:100%}.marvel-device.iphone-x .speaker{position:absolute;top:9px;left:50%;width:60px;height:6px;margin-left:-30px;background:#171818;border-radius:6px}.marvel-device.iphone-x .notch{position:absolute;top:26px;right:0;left:0;z-index:4;width:210px;height:30px;margin:auto;background:var(--dark, #000000);border-bottom-right-radius:24px;border-bottom-left-radius:24px}.marvel-device.iphone-x .notch:before,.marvel-device.iphone-x .notch:after{position:absolute;top:0;width:8px;height:8px;content:\"\"}.marvel-device.iphone-x .notch:after{left:-8px;background:radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%)}.marvel-device.iphone-x .notch:before{right:-8px;background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%)}.marvel-device.iphone-x.landscape{width:812px;height:375px}.marvel-device.iphone-x.landscape .top-bar,.marvel-device.iphone-x.landscape .bottom-bar{top:0;width:8px;height:100%}.marvel-device.iphone-x.landscape .top-bar{left:80px}.marvel-device.iphone-x.landscape .bottom-bar{right:80px;bottom:auto;left:auto}.marvel-device.iphone-x.landscape .volume,.marvel-device.iphone-x.landscape .volume:before,.marvel-device.iphone-x.landscape .volume:after,.marvel-device.iphone-x.landscape .sleep{height:3px}.marvel-device.iphone-x.landscape .inner-shadow:before{top:0;left:-8%;width:116%;height:100%;border-radius:112px/200px}.marvel-device.iphone-x.landscape .volume{top:auto;bottom:-3px;left:116px;width:32px}.marvel-device.iphone-x.landscape .volume:before{top:0;left:62px;width:62px}.marvel-device.iphone-x.landscape .volume:after{top:0;left:140px;width:62px}.marvel-device.iphone-x.landscape .sleep{top:-3px;right:auto;left:200px;width:96px}.marvel-device.iphone-x.landscape .camera{top:auto;bottom:154px;left:9px}.marvel-device.iphone-x.landscape .speaker{top:50%;left:9px;width:6px;height:60px;margin-top:-30px;margin-left:0}.marvel-device.iphone-x.landscape .notch{top:auto;bottom:108px;left:26px;width:30px;height:210px;border-top-right-radius:24px;border-bottom-right-radius:24px;border-bottom-left-radius:0}.marvel-device.iphone-x.landscape .notch:before,.marvel-device.iphone-x.landscape .notch:after{left:0}.marvel-device.iphone-x.landscape .notch:after{top:auto;bottom:-8px;background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%)}.marvel-device.iphone-x.landscape .notch:before{top:-8px;background:radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%)}.marvel-device.note8{width:400px;height:822px;padding:45px 10px;background:var(--dark, #000000);border-radius:34px}.marvel-device.note8 .overflow{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:34px}.marvel-device.note8 .speaker{position:absolute;top:25px;left:50%;z-index:1;width:56px;height:8px;margin-left:-28px;background:#171818;border-radius:8px}.marvel-device.note8 .camera{position:absolute;top:18px;left:86px;z-index:1;width:18px;height:18px;background:#212b36;border-radius:100%}.marvel-device.note8 .camera:before{position:absolute;top:5px;left:-22px;z-index:1;width:8px;height:8px;background:#212b36;border-radius:100%;content:\"\"}.marvel-device.note8 .sensors{position:absolute;top:22px;left:120px;z-index:1;width:10px;height:10px;background:#1d233b;border-radius:100%}.marvel-device.note8 .sensors:before{position:absolute;top:0;left:18px;z-index:1;width:10px;height:10px;background:#1d233b;border-radius:100%;content:\"\"}.marvel-device.note8 .more-sensors{position:absolute;top:18px;left:285px;z-index:1;width:16px;height:16px;background:#33244a;border-radius:100%;-webkit-box-shadow:0 0 0 2px rgba(255, 255, 255, 0.1);box-shadow:0 0 0 2px rgba(255, 255, 255, 0.1)}.marvel-device.note8 .more-sensors:before{position:absolute;top:4px;left:40px;z-index:1;width:11px;height:11px;background:#214a61;border-radius:100%;content:\"\"}.marvel-device.note8 .sleep{position:absolute;top:288px;right:-2px;width:2px;height:56px;background:var(--dark, #000000)}.marvel-device.note8 .volume{position:absolute;top:168px;left:-2px;width:2px;height:120px;background:var(--dark, #000000)}.marvel-device.note8 .volume:before{position:absolute;top:168px;left:0;width:2px;height:56px;background:var(--dark, #000000);content:\"\"}.marvel-device.note8 .inner{position:absolute;top:2px;left:0px;z-index:1;width:100%;height:calc(100% - 8px);background:var(--dark, #000000);border-top:var(--border-width-02, 0.125rem) solid #9fa0a2;border-bottom:var(--border-width-02, 0.125rem) solid #9fa0a2;border-radius:34px;-webkit-box-shadow:inset 0 0 6px 0 rgba(255, 255, 255, 0.5);box-shadow:inset 0 0 6px 0 rgba(255, 255, 255, 0.5);content:\"\"}.marvel-device.note8 .shadow{position:absolute;top:-0.5%;left:10px;z-index:5;width:calc(100% - 20px);height:101%;border-radius:38px;-webkit-box-shadow:inset 0 0 60px 0 white, inset 0 0 30px 0 rgba(255, 255, 255, 0.5), 0 0 20px 0 white, 0 0 20px 0 rgba(255, 255, 255, 0.5);box-shadow:inset 0 0 60px 0 white, inset 0 0 30px 0 rgba(255, 255, 255, 0.5), 0 0 20px 0 white, 0 0 20px 0 rgba(255, 255, 255, 0.5);content:\"\";pointer-events:none}.marvel-device.note8 .screen{border-radius:14px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.note8.landscape{width:822px;height:400px;padding:10px 45px}.marvel-device.note8.landscape .speaker{top:50%;right:25px;left:auto;width:8px;height:56px;margin-top:-28px;margin-left:0}.marvel-device.note8.landscape .camera{top:86px;right:18px;left:auto}.marvel-device.note8.landscape .camera:before{top:-22px;left:5px}.marvel-device.note8.landscape .sensors{top:120px;right:22px;left:auto}.marvel-device.note8.landscape .sensors:before{top:18px;left:0}.marvel-device.note8.landscape .more-sensors{top:285px;right:18px;left:auto}.marvel-device.note8.landscape .more-sensors:before{top:40px;left:4px}.marvel-device.note8.landscape .sleep{top:auto;right:288px;bottom:-2px;width:56px;height:2px}.marvel-device.note8.landscape .volume{top:-2px;right:168px;left:auto;width:120px;height:2px}.marvel-device.note8.landscape .volume:before{top:0;right:168px;left:auto;width:56px;height:2px}.marvel-device.note8.landscape .inner{top:0;left:2px;width:calc(100% - 8px);height:100%;border-top:0;border-right:var(--border-width-02, 0.125rem) solid #9fa0a2;border-bottom:0;border-left:var(--border-width-02, 0.125rem) solid #9fa0a2}.marvel-device.note8.landscape .shadow{top:10px;left:-0.5%;width:101%;height:calc(100% - 20px)}:host(.responsive){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%}:host(.responsive) .marvel-device{width:100%;height:100%}:host(.responsive) .marvel-device.iphone-x{max-width:414px;max-height:896px}:host(.responsive) .marvel-device.iphone-x .notch{left:125px}:host(.responsive) .marvel-device.ipad{max-width:576px;max-height:768px}:host(.responsive) .marvel-device.macbook{max-width:960px;max-height:600px}:host(.responsive.iphone-x){height:calc(100% - 52px)}:host(.responsive.ipad){height:calc(100% - 46px)}:host(.responsive.macbook){height:calc(100% - 120px)}.time{display:none}:host(.no-shadow) .marvel-device{-webkit-box-shadow:none !important;box-shadow:none !important}:host(.iphone-x.simple) .marvel-device.iphone-x{width:360px;height:780px;padding:0.3125rem;background:var(--light, #ffffff);-webkit-box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1))}:host(.iphone-x.simple) .marvel-device.iphone-x::before{background:var(--light, #ffffff);border-radius:32px}:host(.iphone-x.simple) .time{display:initial}:host(.iphone-x.simple) .time .hours{position:absolute;top:0.5rem;left:1.5rem;z-index:4;font-weight:bold;font-size:var(--font-size-16, 1rem)}:host(.iphone-x.simple) .time .icons{position:absolute;top:0.5rem;right:1rem;z-index:4;display:-ms-flexbox;display:flex}:host(.iphone-x.simple) .notch{top:0;left:80px;height:25px;background:var(--dark, #000000)}:host(.iphone-x.simple) .notch .camera,:host(.iphone-x.simple) .notch .speaker{display:none}:host(.iphone-x.simple) .notch::before{right:-7px}:host(.iphone-x.simple) .notch::after{left:-7px}:host(.iphone-x.simple) .top-bar,:host(.iphone-x.simple) .sleep,:host(.iphone-x.simple) .bottom-bar,:host(.iphone-x.simple) .volume{display:none}:host(.iphone-x.simple) .overflow{border-radius:32px}:host(.iphone-x.simple) .overflow .shadow{background:var(--light, #ffffff)}:host(.iphone-x.simple) .inner-shadow{-webkit-box-shadow:none;box-shadow:none}";
+const deviceCss = ".marvel-device{position:relative;display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box}.marvel-device .screen{position:relative;z-index:3;display:block;width:100%;height:100%;overflow:hidden;background:var(--light, #ffffff);border-radius:var(--border-width-01, 0.0625rem);-webkit-box-shadow:0 0 0 3px #111;box-shadow:0 0 0 3px #111}.marvel-device .top-bar,.marvel-device .bottom-bar{display:block;width:100%;height:3px;background:var(--dark, #000000)}.marvel-device .middle-bar{position:absolute;top:0px;left:90px;width:3px;height:4px;background:var(--dark, #000000)}.marvel-device.iphone8{width:375px;height:667px;padding:105px 24px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2)}.marvel-device.iphone8:before{position:absolute;top:6px;left:6px;z-index:1;width:calc(100% - 12px);height:calc(100% - 12px);background:#f8f8f8;border-radius:50px;content:\"\"}.marvel-device.iphone8:after{position:absolute;top:8px;left:8px;z-index:2;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #fff;content:\"\"}.marvel-device.iphone8 .home{position:absolute;bottom:22px;left:50%;z-index:3;width:68px;height:68px;margin-left:-34px;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);border-radius:100%}.marvel-device.iphone8 .home:before{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);background:#f8f8f8;border-radius:100%;content:\"\"}.marvel-device.iphone8 .top-bar{position:absolute;top:68px;left:0;height:14px;background:#bfbfc0}.marvel-device.iphone8 .bottom-bar{position:absolute;bottom:68px;left:0;height:14px;background:#bfbfc0}.marvel-device.iphone8 .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;background:#d9dbdc;border-radius:0px 2px 2px 0px}.marvel-device.iphone8 .volume{position:absolute;top:188px;left:-4px;z-index:0;width:4px;height:66px;background:#d9dbdc;border-radius:2px 0px 0px 2px}.marvel-device.iphone8 .volume:before{position:absolute;top:-78px;left:2px;display:block;width:2px;height:40px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone8 .volume:after{position:absolute;top:82px;left:0px;display:block;width:4px;height:66px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone8 .camera{position:absolute;top:24px;left:50%;z-index:3;width:12px;height:12px;margin-left:-6px;background:#3c3d3d;border-radius:100%}.marvel-device.iphone8 .sensor{position:absolute;top:49px;left:134px;z-index:3;width:16px;height:16px;background:#3c3d3d;border-radius:100%}.marvel-device.iphone8 .speaker{position:absolute;top:54px;left:50%;z-index:3;width:70px;height:6px;margin-left:-35px;background:#292728;border-radius:6px}.marvel-device.iphone8.gold{background:#f9e7d3}.marvel-device.iphone8.gold .top-bar,.marvel-device.iphone8.gold .bottom-bar{background:var(--light, #ffffff)}.marvel-device.iphone8.gold .sleep,.marvel-device.iphone8.gold .volume{background:#f9e7d3}.marvel-device.iphone8.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 var(--dark-80, rgba(0, 0, 0, 0.8));box-shadow:inset 0 0 3px 0 var(--dark-80, rgba(0, 0, 0, 0.8))}.marvel-device.iphone8.black:before{background:#080808}.marvel-device.iphone8.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121}.marvel-device.iphone8.black .top-bar,.marvel-device.iphone8.black .bottom-bar{background:#212121}.marvel-device.iphone8.black .volume,.marvel-device.iphone8.black .sleep{background:#464646}.marvel-device.iphone8.black .camera{background:#080808}.marvel-device.iphone8.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8.black .home:before{background:#080808}.marvel-device.iphone8.landscape{width:667px;height:375px;padding:24px 105px}.marvel-device.iphone8.landscape .sleep{top:100%;right:190px;width:66px;height:4px;border-radius:0px 0px 2px 2px}.marvel-device.iphone8.landscape .volume{top:-4px;left:calc(100% - 188px - 66px);width:66px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:before{top:2px;right:-78px;left:auto;width:40px;height:2px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:after{top:0;left:-82px;width:66px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .top-bar{top:0;left:calc(100% - 68px - 14px);width:14px;height:100%}.marvel-device.iphone8.landscape .bottom-bar{top:0;left:68px;width:14px;height:100%}.marvel-device.iphone8.landscape .home{top:50%;left:22px;margin-top:-34px;margin-left:0}.marvel-device.iphone8.landscape .sensor{top:134px;left:calc(100% - 49px - 16px)}.marvel-device.iphone8.landscape .speaker{top:50%;left:calc(100% - 54px - 6px);width:6px;height:70px;margin-top:-35px;margin-left:0px}.marvel-device.iphone8.landscape .camera{top:50%;left:calc(100% - 32px);margin-top:-5px;margin-left:0px}.marvel-device.iphone8plus{width:414px;height:736px;padding:112px 26px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2)}.marvel-device.iphone8plus:before{position:absolute;top:6px;left:6px;z-index:1;width:calc(100% - 12px);height:calc(100% - 12px);background:#f8f8f8;border-radius:50px;content:\"\"}.marvel-device.iphone8plus:after{position:absolute;top:8px;left:8px;z-index:2;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #fff;content:\"\"}.marvel-device.iphone8plus .home{position:absolute;bottom:24px;left:50%;z-index:3;width:68px;height:68px;margin-left:-34px;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);border-radius:100%}.marvel-device.iphone8plus .home:before{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);background:#f8f8f8;border-radius:100%;content:\"\"}.marvel-device.iphone8plus .top-bar{position:absolute;top:68px;left:0;height:14px;background:#bfbfc0}.marvel-device.iphone8plus .bottom-bar{position:absolute;bottom:68px;left:0;height:14px;background:#bfbfc0}.marvel-device.iphone8plus .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;background:#d9dbdc;border-radius:0px 2px 2px 0px}.marvel-device.iphone8plus .volume{position:absolute;top:188px;left:-4px;z-index:0;width:4px;height:66px;background:#d9dbdc;border-radius:2px 0px 0px 2px}.marvel-device.iphone8plus .volume:before{position:absolute;top:-78px;left:2px;display:block;width:2px;height:40px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone8plus .volume:after{position:absolute;top:82px;left:0px;display:block;width:4px;height:66px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone8plus .camera{position:absolute;top:29px;left:50%;z-index:3;width:12px;height:12px;margin-left:-6px;background:#3c3d3d;border-radius:100%}.marvel-device.iphone8plus .sensor{position:absolute;top:54px;left:154px;z-index:3;width:16px;height:16px;background:#3c3d3d;border-radius:100%}.marvel-device.iphone8plus .speaker{position:absolute;top:59px;left:50%;z-index:3;width:70px;height:6px;margin-left:-35px;background:#292728;border-radius:6px}.marvel-device.iphone8plus.gold{background:#f9e7d3}.marvel-device.iphone8plus.gold .top-bar,.marvel-device.iphone8plus.gold .bottom-bar{background:var(--light, #ffffff)}.marvel-device.iphone8plus.gold .sleep,.marvel-device.iphone8plus.gold .volume{background:#f9e7d3}.marvel-device.iphone8plus.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8plus.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 var(--dark-80, rgba(0, 0, 0, 0.8));box-shadow:inset 0 0 3px 0 var(--dark-80, rgba(0, 0, 0, 0.8))}.marvel-device.iphone8plus.black:before{background:#080808}.marvel-device.iphone8plus.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121}.marvel-device.iphone8plus.black .top-bar,.marvel-device.iphone8plus.black .bottom-bar{background:#212121}.marvel-device.iphone8plus.black .volume,.marvel-device.iphone8plus.black .sleep{background:#464646}.marvel-device.iphone8plus.black .camera{background:#080808}.marvel-device.iphone8plus.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8plus.black .home:before{background:#080808}.marvel-device.iphone8plus.landscape{width:736px;height:414px;padding:26px 112px}.marvel-device.iphone8plus.landscape .sleep{top:100%;right:190px;width:66px;height:4px;border-radius:0px 0px 2px 2px}.marvel-device.iphone8plus.landscape .volume{top:-4px;left:calc(100% - 188px - 66px);width:66px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:before{top:2px;right:-78px;left:auto;width:40px;height:2px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:after{top:0;left:-82px;width:66px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .top-bar{top:0;left:calc(100% - 68px - 14px);width:14px;height:100%}.marvel-device.iphone8plus.landscape .bottom-bar{top:0;left:68px;width:14px;height:100%}.marvel-device.iphone8plus.landscape .home{top:50%;left:24px;margin-top:-34px;margin-left:0}.marvel-device.iphone8plus.landscape .sensor{top:154px;left:calc(100% - 54px - 16px)}.marvel-device.iphone8plus.landscape .speaker{top:50%;left:calc(100% - 59px - 6px);width:6px;height:70px;margin-top:-35px;margin-left:0px}.marvel-device.iphone8plus.landscape .camera{top:50%;left:calc(100% - 29px);margin-top:-5px;margin-left:0px}.marvel-device.iphone5s,.marvel-device.iphone5c{width:320px;height:568px;padding:105px 22px;background:#2c2b2c;border-radius:50px}.marvel-device.iphone5s:before,.marvel-device.iphone5c:before{position:absolute;top:4px;left:4px;z-index:1;width:calc(100% - 8px);height:calc(100% - 8px);background:#1e1e1e;border-radius:46px;content:\"\"}.marvel-device.iphone5s .sleep,.marvel-device.iphone5c .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;background:#282727;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s .volume,.marvel-device.iphone5c .volume{position:absolute;top:180px;left:-4px;z-index:0;width:4px;height:27px;background:#282727;border-radius:2px 0px 0px 2px}.marvel-device.iphone5s .volume:before,.marvel-device.iphone5c .volume:before{position:absolute;top:-75px;left:0px;display:block;width:4px;height:35px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone5s .volume:after,.marvel-device.iphone5c .volume:after{position:absolute;bottom:-64px;left:0px;display:block;width:4px;height:27px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone5s .camera,.marvel-device.iphone5c .camera{position:absolute;top:32px;left:50%;z-index:3;width:10px;height:10px;margin-left:-5px;background:#3c3d3d;border-radius:5px}.marvel-device.iphone5s .sensor,.marvel-device.iphone5c .sensor{position:absolute;top:60px;left:160px;z-index:3;width:10px;height:10px;margin-left:-32px;background:#3c3d3d;border-radius:5px}.marvel-device.iphone5s .speaker,.marvel-device.iphone5c .speaker{position:absolute;top:60px;left:50%;z-index:3;width:64px;height:10px;margin-left:-32px;background:#292728;border-radius:5px}.marvel-device.iphone5s.landscape,.marvel-device.iphone5c.landscape{width:568px;height:320px;padding:22px 105px}.marvel-device.iphone5s.landscape .sleep,.marvel-device.iphone5c.landscape .sleep{top:calc(100% - 120px);right:-4px;width:4px;height:60px;border-radius:0px 2px 2px 0px}.marvel-device.iphone5s.landscape .volume,.marvel-device.iphone5c.landscape .volume{top:-4px;left:calc(100% - 180px);width:27px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:before,.marvel-device.iphone5c.landscape .volume:before{top:0px;right:-75px;left:auto;width:35px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:after,.marvel-device.iphone5c.landscape .volume:after{bottom:0px;left:-64px;z-index:999;width:27px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .sensor,.marvel-device.iphone5c.landscape .sensor{top:160px;left:calc(100% - 60px);margin-top:-32px;margin-left:0px}.marvel-device.iphone5s.landscape .speaker,.marvel-device.iphone5c.landscape .speaker{top:50%;left:calc(100% - 60px);width:10px;height:64px;margin-top:-32px;margin-left:0px}.marvel-device.iphone5s.landscape .camera,.marvel-device.iphone5c.landscape .camera{top:50%;left:calc(100% - 32px);margin-top:-5px;margin-left:0px}.marvel-device.iphone5s .home{position:absolute;bottom:19px;left:50%;z-index:3;width:68px;height:68px;margin-left:-34px;border-radius:36px;-webkit-box-shadow:inset 0 0 0 4px #2c2b2c;box-shadow:inset 0 0 0 4px #2c2b2c}.marvel-device.iphone5s .top-bar{position:absolute;top:70px;left:0}.marvel-device.iphone5s .bottom-bar{position:absolute;bottom:70px;left:0}.marvel-device.iphone5s.landscape .home{bottom:50%;left:19px;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5s.landscape .top-bar{top:0px;left:70px;width:3px;height:100%}.marvel-device.iphone5s.landscape .bottom-bar{right:70px;bottom:0px;left:auto;width:3px;height:100%}.marvel-device.iphone5s.silver{background:#bcbcbc}.marvel-device.iphone5s.silver:before{background:#fcfcfc}.marvel-device.iphone5s.silver .volume,.marvel-device.iphone5s.silver .sleep{background:#d6d6d6}.marvel-device.iphone5s.silver .top-bar,.marvel-device.iphone5s.silver .bottom-bar{background:#eaebec}.marvel-device.iphone5s.silver .home{-webkit-box-shadow:inset 0 0 0 4px #bcbcbc;box-shadow:inset 0 0 0 4px #bcbcbc}.marvel-device.iphone5s.gold{background:#f9e7d3}.marvel-device.iphone5s.gold:before{background:#fcfcfc}.marvel-device.iphone5s.gold .volume,.marvel-device.iphone5s.gold .sleep{background:#f9e7d3}.marvel-device.iphone5s.gold .top-bar,.marvel-device.iphone5s.gold .bottom-bar{background:var(--light, #ffffff)}.marvel-device.iphone5s.gold .home{-webkit-box-shadow:inset 0 0 0 4px #f9e7d3;box-shadow:inset 0 0 0 4px #f9e7d3}.marvel-device.iphone5c{background:var(--light, #ffffff);-webkit-box-shadow:0 var(--border-width-01, 0.0625rem) 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 var(--border-width-01, 0.0625rem) 2px 0 rgba(0, 0, 0, 0.2)}.marvel-device.iphone5c .top-bar,.marvel-device.iphone5c .bottom-bar{display:none}.marvel-device.iphone5c .home{position:absolute;bottom:19px;left:50%;z-index:3;width:68px;height:68px;margin-left:-34px;background:#242324;border-radius:36px}.marvel-device.iphone5c .home:after{position:absolute;top:50%;left:50%;display:block;width:20px;height:20px;margin-top:-11px;margin-left:-11px;border:var(--border-width-01, 0.0625rem) solid rgba(255, 255, 255, 0.1);border-radius:4px;content:\"\"}.marvel-device.iphone5c.landscape .home{bottom:50%;left:19px;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5c .volume,.marvel-device.iphone5c .sleep{background:#dddddd}.marvel-device.iphone5c.red{background:#f96b6c}.marvel-device.iphone5c.red .volume,.marvel-device.iphone5c.red .sleep{background:#ed5758}.marvel-device.iphone5c.yellow{background:#f2dc60}.marvel-device.iphone5c.yellow .volume,.marvel-device.iphone5c.yellow .sleep{background:#e5ce4c}.marvel-device.iphone5c.green{background:#97e563}.marvel-device.iphone5c.green .volume,.marvel-device.iphone5c.green .sleep{background:#85d94d}.marvel-device.iphone5c.blue{background:#33a2db}.marvel-device.iphone5c.blue .volume,.marvel-device.iphone5c.blue .sleep{background:#2694cd}.marvel-device.iphone4s{width:320px;height:480px;padding:129px 27px;background:#686868;border-radius:54px}.marvel-device.iphone4s:before{position:absolute;top:4px;left:4px;z-index:1;width:calc(100% - 8px);height:calc(100% - 8px);background:#1e1e1e;border-radius:50px;content:\"\"}.marvel-device.iphone4s .top-bar{position:absolute;top:60px;left:0}.marvel-device.iphone4s .bottom-bar{position:absolute;bottom:90px;left:0}.marvel-device.iphone4s .camera{position:absolute;top:72px;left:134px;z-index:3;width:10px;height:10px;margin-left:-5px;background:#3c3d3d;border-radius:100%}.marvel-device.iphone4s .speaker{position:absolute;top:72px;left:50%;z-index:3;width:64px;height:10px;margin-left:-32px;background:#292728;border-radius:5px}.marvel-device.iphone4s .sensor{position:absolute;top:36px;left:50%;z-index:3;width:40px;height:10px;margin-left:-20px;background:#292728;border-radius:5px}.marvel-device.iphone4s .home{position:absolute;bottom:30px;left:50%;z-index:3;width:72px;height:72px;margin-left:-36px;background:#242324;border-radius:100%}.marvel-device.iphone4s .home:after{position:absolute;top:50%;left:50%;display:block;width:20px;height:20px;margin-top:-11px;margin-left:-11px;border:var(--border-width-01, 0.0625rem) solid rgba(255, 255, 255, 0.1);border-radius:4px;content:\"\"}.marvel-device.iphone4s .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;background:#4d4d4d;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s .volume{position:absolute;top:160px;left:-4px;width:4px;height:27px;background:#4d4d4d;border-radius:2px 0px 0px 2px}.marvel-device.iphone4s .volume:before{position:absolute;top:-70px;left:0px;display:block;width:4px;height:35px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone4s .volume:after{position:absolute;bottom:-64px;left:0px;display:block;width:4px;height:27px;background:inherit;border-radius:2px 0px 0px 2px;content:\"\"}.marvel-device.iphone4s.landscape{width:480px;height:320px;padding:27px 129px}.marvel-device.iphone4s.landscape .bottom-bar{bottom:0px;left:90px;width:3px;height:100%}.marvel-device.iphone4s.landscape .top-bar{top:0px;left:calc(100% - 60px);width:3px;height:100%}.marvel-device.iphone4s.landscape .camera{top:134px;left:calc(100% - 72px);margin-left:0}.marvel-device.iphone4s.landscape .speaker{top:50%;left:calc(100% - 72px);width:10px;height:64px;margin-top:-32px;margin-left:0}.marvel-device.iphone4s.landscape .sensor{top:50%;left:calc(100% - 36px);width:10px;height:40px;margin-top:-20px;margin-left:0}.marvel-device.iphone4s.landscape .home{bottom:50%;left:30px;margin-bottom:-36px;margin-left:0}.marvel-device.iphone4s.landscape .sleep{top:calc(100% - 120px);right:-4px;width:4px;height:60px;border-radius:0px 2px 2px 0px}.marvel-device.iphone4s.landscape .volume{top:-4px;left:calc(100% - 187px);width:27px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:before{top:0px;right:-70px;left:auto;width:35px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:after{bottom:0px;left:-64px;width:27px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.silver{background:#bcbcbc}.marvel-device.iphone4s.silver:before{background:#fcfcfc}.marvel-device.iphone4s.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 var(--border-width-01, 0.0625rem) #bcbcbc;box-shadow:inset 0 0 0 var(--border-width-01, 0.0625rem) #bcbcbc}.marvel-device.iphone4s.silver .home:after{border:var(--border-width-01, 0.0625rem) solid rgba(0, 0, 0, 0.2)}.marvel-device.iphone4s.silver .volume,.marvel-device.iphone4s.silver .sleep{background:#d6d6d6}.marvel-device.nexus5{width:320px;height:568px;padding:50px 15px 50px 15px;background:#1e1e1e;border-radius:20px}.marvel-device.nexus5:before{position:absolute;top:0;top:50%;left:50%;width:calc(100% - 26px);height:103.1%;background:inherit;border-radius:600px/50px;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);content:\"\"}.marvel-device.nexus5 .top-bar{position:absolute;top:3px;left:4px;width:calc(100% - 8px);height:calc(100% - 6px);background:#181818;border-radius:20px}.marvel-device.nexus5 .top-bar:before{position:absolute;top:0;top:50%;left:50%;width:calc(100% - 26px);height:103%;background:inherit;border-radius:600px/50px;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);content:\"\"}.marvel-device.nexus5 .bottom-bar{display:none}.marvel-device.nexus5 .sleep{position:absolute;top:110px;left:-3px;width:3px;height:100px;background:inherit;border-radius:2px 0px 0px 2px}.marvel-device.nexus5 .volume{position:absolute;top:70px;right:-3px;width:3px;height:45px;background:inherit;border-radius:0px 2px 2px 0px}.marvel-device.nexus5 .camera{position:absolute;top:18px;left:50%;z-index:3;width:10px;height:10px;margin-left:-5px;background:#3c3d3d;border-radius:100%}.marvel-device.nexus5 .camera:before{position:absolute;top:2px;left:-100px;z-index:3;display:block;width:6px;height:6px;background:#3c3d3d;border-radius:100%;content:\"\"}.marvel-device.nexus5.landscape{width:568px;height:320px;padding:15px 50px 15px 50px}.marvel-device.nexus5.landscape:before{width:103.1%;height:calc(100% - 26px);border-radius:50px/600px}.marvel-device.nexus5.landscape .top-bar{top:4px;left:3px;width:calc(100% - 6px);height:calc(100% - 8px)}.marvel-device.nexus5.landscape .top-bar:before{width:103%;height:calc(100% - 26px);border-radius:50px/600px}.marvel-device.nexus5.landscape .sleep{top:-3px;left:calc(100% - 210px);width:100px;height:3px;border-radius:2px 2px 0px 0px}.marvel-device.nexus5.landscape .volume{top:100%;right:70px;width:45px;height:3px;border-radius:0px 0px 2px 2px}.marvel-device.nexus5.landscape .camera{top:50%;left:calc(100% - 18px);margin-top:-5px;margin-left:0}.marvel-device.nexus5.landscape .camera:before{top:-100px;left:2px}.marvel-device.s5{width:320px;height:568px;padding:60px 18px;background:#bcbcbc;border-radius:42px}.marvel-device.s5:before,.marvel-device.s5:after{position:absolute;left:50%;display:block;width:calc(100% - 52px);height:26px;background:inherit;border-radius:500px/40px;-webkit-transform:translateX(-50%);transform:translateX(-50%);content:\"\"}.marvel-device.s5:before{top:-7px}.marvel-device.s5:after{bottom:-7px}.marvel-device.s5 .bottom-bar{display:none}.marvel-device.s5 .top-bar{position:absolute;top:5px;left:5px;z-index:2;width:calc(100% - 10px);height:calc(100% - 10px);background:radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 0 0, radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 3px 3px;background-color:var(--light, #ffffff);background-position:center;background-size:4px 4px;border-radius:37px}.marvel-device.s5 .top-bar:before,.marvel-device.s5 .top-bar:after{position:absolute;left:50%;display:block;width:calc(100% - 48px);height:26px;background:inherit;border-radius:500px/40px;-webkit-transform:translateX(-50%);transform:translateX(-50%);content:\"\"}.marvel-device.s5 .top-bar:before{top:-7px}.marvel-device.s5 .top-bar:after{bottom:-7px}.marvel-device.s5 .sleep{position:absolute;top:100px;left:-3px;width:3px;height:100px;background:#cecece;border-radius:2px 0px 0px 2px}.marvel-device.s5 .speaker{position:absolute;top:20px;left:50%;z-index:3;display:block;width:68px;height:8px;margin-left:-34px;background-color:#bcbcbc;background-position:top left;border-radius:4px}.marvel-device.s5 .sensor{position:absolute;top:20px;right:110px;z-index:3;display:block;width:8px;height:8px;background:#3c3d3d;border-radius:100%}.marvel-device.s5 .sensor:after{position:absolute;top:0px;right:12px;z-index:3;display:block;width:8px;height:8px;background:#3c3d3d;border-radius:100%;content:\"\"}.marvel-device.s5 .camera{position:absolute;top:24px;right:42px;z-index:3;display:block;width:10px;height:10px;background:var(--dark, #000000);border-radius:100%}.marvel-device.s5 .camera:before{position:absolute;top:50%;left:50%;width:4px;height:4px;margin-top:-2px;margin-left:-2px;background:#3c3d3d;border-radius:100%;content:\"\"}.marvel-device.s5 .home{position:absolute;bottom:17px;left:50%;z-index:3;display:block;width:70px;height:20px;margin-left:-35px;background:var(--light, #ffffff);border:2px solid black;border-radius:18px}.marvel-device.s5.landscape{width:568px;height:320px;padding:18px 60px}.marvel-device.s5.landscape:before,.marvel-device.s5.landscape:after{width:26px;height:calc(100% - 52px);border-radius:40px/500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape:before{top:50%;left:-7px}.marvel-device.s5.landscape:after{top:50%;right:-7px;left:auto}.marvel-device.s5.landscape .top-bar:before,.marvel-device.s5.landscape .top-bar:after{width:26px;height:calc(100% - 48px);border-radius:40px/500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape .top-bar:before{top:50%;right:-7px;left:auto}.marvel-device.s5.landscape .top-bar:after{top:50%;right:auto;left:-7px}.marvel-device.s5.landscape .sleep{top:-3px;left:calc(100% - 200px);width:100px;height:3px;border-radius:2px 2px 0px 0px}.marvel-device.s5.landscape .speaker{top:50%;left:calc(100% - 20px);width:8px;height:68px;margin-top:-34px;margin-left:0}.marvel-device.s5.landscape .sensor{top:calc(100% - 110px);right:20px}.marvel-device.s5.landscape .sensor:after{right:0px;left:-12px}.marvel-device.s5.landscape .camera{top:calc(100% - 42px);right:24px}.marvel-device.s5.landscape .home{bottom:50%;left:17px;width:20px;height:70px;margin-bottom:-35px;margin-left:0}.marvel-device.s5.black{background:#1e1e1e}.marvel-device.s5.black .speaker{background:var(--dark, #000000)}.marvel-device.s5.black .sleep{background:#1e1e1e}.marvel-device.s5.black .top-bar{background:radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 0 0, radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 3px 3px;background-color:#2c2b2c;background-size:4px 4px}.marvel-device.s5.black .home{background:#2c2b2c}.marvel-device.lumia920{width:320px;height:533px;padding:80px 35px 125px 35px;background:#ffdd00;border-radius:40px/3px}.marvel-device.lumia920 .bottom-bar{display:none}.marvel-device.lumia920 .top-bar{position:absolute;top:16px;left:12px;z-index:1;width:calc(100% - 24px);height:calc(100% - 32px);background:var(--dark, #000000);border-radius:24px}.marvel-device.lumia920 .top-bar:before{position:absolute;top:2px;left:2px;display:block;width:calc(100% - 4px);height:calc(100% - 4px);background:#1e1e1e;border-radius:22px;content:\"\"}.marvel-device.lumia920 .volume{position:absolute;top:130px;right:-3px;width:3px;height:100px;background:#1e1e1e;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:before{position:absolute;top:190px;right:0px;display:block;width:3px;height:50px;background:inherit;border-radius:0px 2px 2px 0px;content:\"\"}.marvel-device.lumia920 .volume:after{position:absolute;top:460px;right:0px;display:block;width:3px;height:50px;background:inherit;border-radius:0px 2px 2px 0px;content:\"\"}.marvel-device.lumia920 .camera{position:absolute;top:34px;right:130px;z-index:5;width:10px;height:10px;background:#3c3d3d;border-radius:5px}.marvel-device.lumia920 .speaker{position:absolute;top:38px;left:50%;z-index:3;width:64px;height:10px;margin-left:-32px;background:#292728;border-radius:5px}.marvel-device.lumia920.landscape{width:568px;height:320px;padding:35px 80px 35px 125px;border-radius:2px/100px}.marvel-device.lumia920.landscape .top-bar{top:12px;left:16px;width:calc(100% - 32px);height:calc(100% - 24px)}.marvel-device.lumia920.landscape .volume{top:100%;right:130px;width:100px;height:3px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:before{top:0px;right:190px;width:50px;height:3px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:after{top:0px;right:430px;width:50px;height:3px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .camera{top:calc(100% - 140px);right:30px}.marvel-device.lumia920.landscape .speaker{top:50%;left:calc(100% - 48px);width:10px;height:64px;margin-top:-32px;margin-left:0}.marvel-device.lumia920.black{background:var(--dark, #000000)}.marvel-device.lumia920.white{background:var(--light, #ffffff);-webkit-box-shadow:0 var(--border-width-01, 0.0625rem) 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 var(--border-width-01, 0.0625rem) 2px 0 rgba(0, 0, 0, 0.2)}.marvel-device.lumia920.blue{background:#00acdd}.marvel-device.lumia920.red{background:#cc3e32}.marvel-device.htc-one{width:320px;height:568px;padding:72px 25px 100px 25px;background:#bebebe;border-radius:34px}.marvel-device.htc-one:before{position:absolute;top:2px;left:2px;display:block;width:calc(100% - 4px);height:calc(100% - 4px);background:var(--stable, #adadad);border-radius:32px;content:\"\"}.marvel-device.htc-one:after{position:absolute;top:4px;left:4px;display:block;width:calc(100% - 8px);height:calc(100% - 8px);background:#eeeeee;border-radius:30px;content:\"\"}.marvel-device.htc-one .top-bar{position:absolute;top:50px;left:2px;z-index:1;width:calc(100% - 4px);height:635px;background:#424242}.marvel-device.htc-one .top-bar:before{position:absolute;top:0px;left:2px;z-index:1;width:calc(100% - 4px);height:100%;background:var(--dark, #000000);content:\"\"}.marvel-device.htc-one .bottom-bar{display:none}.marvel-device.htc-one .speaker{position:absolute;top:22px;left:50%;z-index:2;display:block;width:216px;height:16px;margin-left:-108px;background:radial-gradient(#343434 25%, transparent 50%) 0 0, radial-gradient(#343434 25%, transparent 50%) 4px 4px;background-position:top left;background-size:4px 4px}.marvel-device.htc-one .speaker:after{position:absolute;top:676px;left:50%;z-index:2;display:block;width:216px;height:16px;margin-left:-108px;background:inherit;content:\"\"}.marvel-device.htc-one .camera{position:absolute;top:18px;right:38px;z-index:3;display:block;width:24px;height:24px;background:#3c3d3d;border-radius:100%}.marvel-device.htc-one .camera:before{position:absolute;top:50%;left:50%;width:8px;height:8px;margin-top:-4px;margin-left:-4px;background:var(--dark, #000000);border-radius:100%;content:\"\"}.marvel-device.htc-one .sensor{position:absolute;top:29px;left:60px;z-index:3;display:block;width:8px;height:8px;background:#3c3d3d;border-radius:100%}.marvel-device.htc-one .sensor:after{position:absolute;top:0px;right:12px;z-index:3;display:block;width:8px;height:8px;background:#3c3d3d;border-radius:100%;content:\"\"}.marvel-device.htc-one.landscape{width:568px;height:320px;padding:25px 72px 25px 100px}.marvel-device.htc-one.landscape .top-bar{top:2px;left:calc(100% - 685px);width:635px;height:calc(100% - 4px)}.marvel-device.htc-one.landscape .speaker{top:50%;left:calc(100% - 38px);width:16px;height:216px;margin-top:-108px;margin-left:0px}.marvel-device.htc-one.landscape .speaker:after{top:50%;left:calc(100% - 692px);width:16px;height:216px;margin-top:-108px;margin-left:0}.marvel-device.htc-one.landscape .camera{top:calc(100% - 38px);right:18px}.marvel-device.htc-one.landscape .sensor{top:60px;left:calc(100% - 29px)}.marvel-device.htc-one.landscape .sensor :after{top:-12px;right:0}.marvel-device.ipad{width:576px;height:768px;padding:23px;background:#242324;border-radius:30px}.marvel-device.ipad:before{position:absolute;top:4px;left:4px;display:block;width:calc(100% - 8px);height:calc(100% - 8px);background:#1e1e1e;border-radius:40px;content:\"\"}.marvel-device.ipad .camera{position:absolute;top:44px;left:50%;width:10px;height:10px;margin-left:-5px;background:#3c3d3d;border-radius:100%}.marvel-device.ipad .top-bar,.marvel-device.ipad .bottom-bar{display:none}.marvel-device.ipad .screen{border-radius:6px}.marvel-device.ipad .home{position:absolute;bottom:22px;left:50%;width:50px;height:50px;margin-left:-25px;background:#242324;border-radius:36px}.marvel-device.ipad .home:after{position:absolute;top:50%;left:50%;display:block;width:15px;height:15px;margin-top:-8px;margin-left:-8px;border:var(--border-width-01, 0.0625rem) solid rgba(255, 255, 255, 0.1);border-radius:4px;content:\"\"}.marvel-device.ipad.landscape{width:768px;height:576px;padding:25px 90px}.marvel-device.ipad.landscape .camera{top:50%;left:calc(100% - 44px);margin-top:-5px;margin-left:0}.marvel-device.ipad.landscape .home{top:50%;left:22px;margin-top:-25px;margin-left:0}.marvel-device.ipad.silver{background:#bcbcbc}.marvel-device.ipad.silver:before{background:#fcfcfc}.marvel-device.ipad.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 var(--border-width-01, 0.0625rem) #bcbcbc;box-shadow:inset 0 0 0 var(--border-width-01, 0.0625rem) #bcbcbc}.marvel-device.ipad.silver .home:after{border:var(--border-width-01, 0.0625rem) solid rgba(0, 0, 0, 0.2)}.marvel-device.macbook{width:960px;height:600px;margin:0 auto;padding:44px 44px 76px;background:#bebebe;border-radius:34px}.marvel-device.macbook:before{position:absolute;top:4px;left:4px;display:block;width:calc(100% - 8px);height:calc(100% - 8px);background:#1e1e1e;border-radius:30px;content:\"\"}.marvel-device.macbook .top-bar{position:absolute;top:688px;left:0;display:block;width:100%;height:40px;background:#bebebe;border-bottom-right-radius:90px 18px;border-bottom-left-radius:90px 18px;-webkit-box-shadow:inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6);box-shadow:inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6);content:\"\"}.marvel-device.macbook .top-bar:before{position:relative;top:0;left:0;display:block;width:100%;height:24px;background:#f0f0f0;border-bottom:2px solid #aaa;border-radius:5px;content:\"\"}.marvel-device.macbook .top-bar:after{position:absolute;top:0;right:0;left:0;display:block;width:16%;height:14px;margin-right:auto;margin-left:auto;background:#ddd;border-radius:0 0 20px 20px;-webkit-box-shadow:inset 0px -3px 10px #999;box-shadow:inset 0px -3px 10px #999;content:\"\"}.marvel-device.macbook .bottom-bar{position:absolute;top:688px;left:0;display:block;width:100%;height:26px;background:transparent;content:\"\"}.marvel-device.macbook .bottom-bar:before,.marvel-device.macbook .bottom-bar:after{position:absolute;top:0;display:block;width:80px;height:calc(100% - 2px);content:\"\"}.marvel-device.macbook .bottom-bar:before{left:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#747474), color-stop(5%, #c3c3c3), color-stop(14%, #ebebeb), color-stop(41%, #979797), color-stop(80%, #f0f0f0), color-stop(100%, #f0f0f0), to(#f0f0f0));background:linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%)}.marvel-device.macbook .bottom-bar:after{right:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#f0f0f0), color-stop(0%, #f0f0f0), color-stop(20%, #f0f0f0), color-stop(59%, #979797), color-stop(86%, #ebebeb), color-stop(95%, #c3c3c3), to(#747474));background:linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%)}.marvel-device.macbook .camera{position:absolute;top:20px;left:50%;width:10px;height:10px;margin-left:-5px;background:#3c3d3d;border-radius:100%}.marvel-device.macbook .home{display:none}.marvel-device.iphone-x{width:350px;height:702px;padding:26px;background:#fdfdfd;border-radius:66px;-webkit-box-shadow:inset 0 0 11px 0 black;box-shadow:inset 0 0 11px 0 black}.marvel-device.iphone-x .overflow{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:66px}.marvel-device.iphone-x .shadow{position:absolute;width:90px;height:90px;background:radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 60%);border-radius:100%}.marvel-device.iphone-x .shadow--tl{top:-20px;left:-20px}.marvel-device.iphone-x .shadow--tr{top:-20px;right:-20px}.marvel-device.iphone-x .shadow--bl{bottom:-20px;left:-20px}.marvel-device.iphone-x .shadow--br{right:-20px;bottom:-20px}.marvel-device.iphone-x:before{position:absolute;top:5px;left:5px;z-index:1;width:calc(100% - 10px);height:calc(100% - 10px);background:var(--dark, #000000);border-radius:61px;content:\"\"}.marvel-device.iphone-x .inner-shadow{position:absolute;top:10px;left:10px;z-index:1;width:calc(100% - 20px);height:calc(100% - 20px);overflow:hidden;border-radius:56px;-webkit-box-shadow:inset 0 0 15px 0 rgba(255, 255, 255, 0.66);box-shadow:inset 0 0 15px 0 rgba(255, 255, 255, 0.66)}.marvel-device.iphone-x .inner-shadow:before{position:absolute;top:-8%;left:0;z-index:2;width:100%;height:116%;border-radius:200px/112px;-webkit-box-shadow:inset 0 0 20px 0 var(--light, #ffffff);box-shadow:inset 0 0 20px 0 var(--light, #ffffff);content:\"\"}.marvel-device.iphone-x .screen{border-radius:40px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.iphone-x .top-bar,.marvel-device.iphone-x .bottom-bar{position:absolute;left:0;width:100%;height:8px;background:rgba(0, 0, 0, 0.1)}.marvel-device.iphone-x .top-bar{top:80px}.marvel-device.iphone-x .bottom-bar{bottom:80px}.marvel-device.iphone-x .volume,.marvel-device.iphone-x .volume:before,.marvel-device.iphone-x .volume:after,.marvel-device.iphone-x .sleep{position:absolute;width:3px;background:#b5b5b5}.marvel-device.iphone-x .volume{top:116px;left:-3px;height:32px}.marvel-device.iphone-x .volume:before{top:62px;left:0;height:62px;content:\"\"}.marvel-device.iphone-x .volume:after{top:140px;left:0;height:62px;content:\"\"}.marvel-device.iphone-x .sleep{top:200px;right:-3px;height:96px}.marvel-device.iphone-x .camera{position:absolute;top:9px;left:154px;width:6px;height:6px;background:#0d4d71;border-radius:100%}.marvel-device.iphone-x .speaker{position:absolute;top:9px;left:50%;width:60px;height:6px;margin-left:-30px;background:#171818;border-radius:6px}.marvel-device.iphone-x .notch{position:absolute;top:26px;right:0;left:0;z-index:4;width:210px;height:30px;margin:auto;background:var(--dark, #000000);border-bottom-right-radius:24px;border-bottom-left-radius:24px}.marvel-device.iphone-x .notch:before,.marvel-device.iphone-x .notch:after{position:absolute;top:0;width:8px;height:8px;content:\"\"}.marvel-device.iphone-x .notch:after{left:-8px;background:radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%)}.marvel-device.iphone-x .notch:before{right:-8px;background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%)}.marvel-device.iphone-x.landscape{width:812px;height:375px}.marvel-device.iphone-x.landscape .top-bar,.marvel-device.iphone-x.landscape .bottom-bar{top:0;width:8px;height:100%}.marvel-device.iphone-x.landscape .top-bar{left:80px}.marvel-device.iphone-x.landscape .bottom-bar{right:80px;bottom:auto;left:auto}.marvel-device.iphone-x.landscape .volume,.marvel-device.iphone-x.landscape .volume:before,.marvel-device.iphone-x.landscape .volume:after,.marvel-device.iphone-x.landscape .sleep{height:3px}.marvel-device.iphone-x.landscape .inner-shadow:before{top:0;left:-8%;width:116%;height:100%;border-radius:112px/200px}.marvel-device.iphone-x.landscape .volume{top:auto;bottom:-3px;left:116px;width:32px}.marvel-device.iphone-x.landscape .volume:before{top:0;left:62px;width:62px}.marvel-device.iphone-x.landscape .volume:after{top:0;left:140px;width:62px}.marvel-device.iphone-x.landscape .sleep{top:-3px;right:auto;left:200px;width:96px}.marvel-device.iphone-x.landscape .camera{top:auto;bottom:154px;left:9px}.marvel-device.iphone-x.landscape .speaker{top:50%;left:9px;width:6px;height:60px;margin-top:-30px;margin-left:0}.marvel-device.iphone-x.landscape .notch{top:auto;bottom:108px;left:26px;width:30px;height:210px;border-top-right-radius:24px;border-bottom-right-radius:24px;border-bottom-left-radius:0}.marvel-device.iphone-x.landscape .notch:before,.marvel-device.iphone-x.landscape .notch:after{left:0}.marvel-device.iphone-x.landscape .notch:after{top:auto;bottom:-8px;background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%)}.marvel-device.iphone-x.landscape .notch:before{top:-8px;background:radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%)}.marvel-device.note8{width:400px;height:822px;padding:45px 10px;background:var(--dark, #000000);border-radius:34px}.marvel-device.note8 .overflow{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:34px}.marvel-device.note8 .speaker{position:absolute;top:25px;left:50%;z-index:1;width:56px;height:8px;margin-left:-28px;background:#171818;border-radius:8px}.marvel-device.note8 .camera{position:absolute;top:18px;left:86px;z-index:1;width:18px;height:18px;background:#212b36;border-radius:100%}.marvel-device.note8 .camera:before{position:absolute;top:5px;left:-22px;z-index:1;width:8px;height:8px;background:#212b36;border-radius:100%;content:\"\"}.marvel-device.note8 .sensors{position:absolute;top:22px;left:120px;z-index:1;width:10px;height:10px;background:#1d233b;border-radius:100%}.marvel-device.note8 .sensors:before{position:absolute;top:0;left:18px;z-index:1;width:10px;height:10px;background:#1d233b;border-radius:100%;content:\"\"}.marvel-device.note8 .more-sensors{position:absolute;top:18px;left:285px;z-index:1;width:16px;height:16px;background:#33244a;border-radius:100%;-webkit-box-shadow:0 0 0 2px rgba(255, 255, 255, 0.1);box-shadow:0 0 0 2px rgba(255, 255, 255, 0.1)}.marvel-device.note8 .more-sensors:before{position:absolute;top:4px;left:40px;z-index:1;width:11px;height:11px;background:#214a61;border-radius:100%;content:\"\"}.marvel-device.note8 .sleep{position:absolute;top:288px;right:-2px;width:2px;height:56px;background:var(--dark, #000000)}.marvel-device.note8 .volume{position:absolute;top:168px;left:-2px;width:2px;height:120px;background:var(--dark, #000000)}.marvel-device.note8 .volume:before{position:absolute;top:168px;left:0;width:2px;height:56px;background:var(--dark, #000000);content:\"\"}.marvel-device.note8 .inner{position:absolute;top:2px;left:0px;z-index:1;width:100%;height:calc(100% - 8px);background:var(--dark, #000000);border-top:var(--border-width-02, 0.125rem) solid #9fa0a2;border-bottom:var(--border-width-02, 0.125rem) solid #9fa0a2;border-radius:34px;-webkit-box-shadow:inset 0 0 6px 0 rgba(255, 255, 255, 0.5);box-shadow:inset 0 0 6px 0 rgba(255, 255, 255, 0.5);content:\"\"}.marvel-device.note8 .shadow{position:absolute;top:-0.5%;left:10px;z-index:5;width:calc(100% - 20px);height:101%;border-radius:38px;-webkit-box-shadow:inset 0 0 60px 0 white, inset 0 0 30px 0 rgba(255, 255, 255, 0.5), 0 0 20px 0 white, 0 0 20px 0 rgba(255, 255, 255, 0.5);box-shadow:inset 0 0 60px 0 white, inset 0 0 30px 0 rgba(255, 255, 255, 0.5), 0 0 20px 0 white, 0 0 20px 0 rgba(255, 255, 255, 0.5);content:\"\";pointer-events:none}.marvel-device.note8 .screen{border-radius:14px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.note8.landscape{width:822px;height:400px;padding:10px 45px}.marvel-device.note8.landscape .speaker{top:50%;right:25px;left:auto;width:8px;height:56px;margin-top:-28px;margin-left:0}.marvel-device.note8.landscape .camera{top:86px;right:18px;left:auto}.marvel-device.note8.landscape .camera:before{top:-22px;left:5px}.marvel-device.note8.landscape .sensors{top:120px;right:22px;left:auto}.marvel-device.note8.landscape .sensors:before{top:18px;left:0}.marvel-device.note8.landscape .more-sensors{top:285px;right:18px;left:auto}.marvel-device.note8.landscape .more-sensors:before{top:40px;left:4px}.marvel-device.note8.landscape .sleep{top:auto;right:288px;bottom:-2px;width:56px;height:2px}.marvel-device.note8.landscape .volume{top:-2px;right:168px;left:auto;width:120px;height:2px}.marvel-device.note8.landscape .volume:before{top:0;right:168px;left:auto;width:56px;height:2px}.marvel-device.note8.landscape .inner{top:0;left:2px;width:calc(100% - 8px);height:100%;border-top:0;border-right:var(--border-width-02, 0.125rem) solid #9fa0a2;border-bottom:0;border-left:var(--border-width-02, 0.125rem) solid #9fa0a2}.marvel-device.note8.landscape .shadow{top:10px;left:-0.5%;width:101%;height:calc(100% - 20px)}:host(.responsive.notch-normal) .marvel-device{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.responsive.notch-normal) .marvel-device.iphone-x .notch{left:0}:host(.responsive){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%}:host(.responsive) .marvel-device{width:100%;height:100%}:host(.responsive) .marvel-device.iphone-x{max-width:414px;max-height:896px}:host(.responsive) .marvel-device.iphone-x .notch{left:125px}:host(.responsive) .marvel-device.ipad{max-width:576px;max-height:768px}:host(.responsive) .marvel-device.macbook{max-width:960px;max-height:600px}:host(.responsive.iphone-x){height:calc(100% - 52px)}:host(.responsive.ipad){height:calc(100% - 46px)}:host(.responsive.macbook){height:calc(100% - 120px)}.time{display:none}:host(.no-shadow) .marvel-device{-webkit-box-shadow:none !important;box-shadow:none !important}:host(.iphone-x.simple) .marvel-device.iphone-x{width:360px;height:780px;padding:0.3125rem;background:var(--light, #ffffff);-webkit-box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1))}:host(.iphone-x.simple) .marvel-device.iphone-x::before{background:var(--light, #ffffff);border-radius:32px}:host(.iphone-x.simple) .time{display:initial}:host(.iphone-x.simple) .time .hours{position:absolute;top:0.5rem;left:1.5rem;z-index:4;font-weight:bold;font-size:var(--font-size-16, 1rem)}:host(.iphone-x.simple) .time .icons{position:absolute;top:0.5rem;right:1rem;z-index:4;display:-ms-flexbox;display:flex}:host(.iphone-x.simple) .notch{top:0;left:80px;height:25px;background:var(--dark, #000000)}:host(.iphone-x.simple) .notch .camera,:host(.iphone-x.simple) .notch .speaker{display:none}:host(.iphone-x.simple) .notch::before{right:-7px}:host(.iphone-x.simple) .notch::after{left:-7px}:host(.iphone-x.simple) .top-bar,:host(.iphone-x.simple) .sleep,:host(.iphone-x.simple) .bottom-bar,:host(.iphone-x.simple) .volume{display:none}:host(.iphone-x.simple) .overflow{border-radius:32px}:host(.iphone-x.simple) .overflow .shadow{background:var(--light, #ffffff)}:host(.iphone-x.simple) .inner-shadow{-webkit-box-shadow:none;box-shadow:none}";
 const YooDeviceComponent = class {
   constructor(hostRef) {