outsystems-ui/dist/ODC.OutSystemsUI.css

OutSystems UI Framework

@charset "UTF-8";
/*!
OutSystems UI 2.22.0 • ODC Platform
Website:
 • https://www.outsystems.com/outsystems-ui
GitHub:
 • https://github.com/OutSystems/outsystems-ui
*/
/*!
Section Index:
0. Root - CSS Variables
1. Resets
2. HTML Elements
    2.1. Links
    2.2. Images
    2.3. Headings
3. Page Layout
    3.1. Layout
    3.2. Header
    3.3. Layout Native - Header
    3.4. Layout Side - Header
    3.5. Menu
    3.6. Layout Native - Menu
    3.7. Layout Side - Menu
    3.8. Menu - Header Logo
    3.9. Menu - App Menu Link
    3.10. Menu - App Login Info
    3.11. Content
    3.12. ThemeGrid_Container
    3.13. Section
    3.14. Login
    3.15. iOS Scroll Bounce
4. Widgets
    4.1. Inputs and TextAreas
    4.2. Switch
    4.3. Checkbox
    4.4. Dropdown
    4.5. Button
    4.6. List
    4.7. List Item
    4.8. Table
    4.9. Table - Sortable Icon
    4.10. Table - Bulk Actions
    4.11. Form
    4.12. Upload
    4.13. Button Group
    4.14. Popover
    4.15. Popover - ODC
    4.16. Popup
    4.17. Feedback Message
    4.18. Radio Button
5. Providers
    5.1. Flatpickr
    5.2. NoUiSlider
    5.3. Splide
    5.4. VirtualSelect
6. Patterns
    6.1. Adaptive
        6.1.1. Columns
        6.1.2. Gallery
        6.1.3. Master Detail
    6.2. Content
        6.2.1. Accordion
        6.2.2. Accordion Item
        6.2.3. Alert
        6.2.4. Blank Slate
        6.2.5. Card
        6.2.6. Card Background
        6.2.7. Card Item
        6.2.8. Card Sectioned
        6.2.9. Chat Message
        6.2.10. Flip Content
        6.2.11. Floating Content
        6.2.12. List Item Content
        6.2.13. Section
        6.2.14. Tag
        6.2.15. Tooltip
        6.2.16. User Avatar
    6.3. Interaction
        6.3.1. Action Sheet
        6.3.2. Animate
        6.3.3. Animated Label
        6.3.4. Balloon
        6.3.5. Bottom Sheet
        6.3.6. Carousel
        6.3.7. DatePicker
        6.3.8. Dropdown
            6.3.8.1 Dropdown Search
            6.3.8.2 Dropdown Tags
        6.3.9. Floating Actions
        6.3.10. Input With Icon
        6.3.11. Lightbox Image
        6.3.12. MonthPicker
        6.3.13. Notification
        6.3.14. RangeSlider
        6.3.15. Scrollable Area
        6.3.16. Sidebar
        6.3.17. Search
        6.3.18. Stacked Cards
        6.3.19. TimePicker
        6.3.20. Video
    6.4. Navigation
        6.4.1. Bottom Bar Item
        6.4.2. Breadcrumbs
        6.4.3. OverflowMenu
        6.4.4. Pagination
        6.4.5. Section Index
        6.4.6. Submenu
        6.4.7. Tabs
        6.4.8. Timeline
        6.4.9. Wizard
    6.5. Numbers
        6.5.1. Badge
        6.5.2. Counter
        6.5.3. Icon Badge
        6.5.4. Progress
            6.5.4.1 Progress Bar
            6.5.4.2 Progress Circle
        6.5.5. Rating
    6.6. Utilities
        6.6.1. Align Center
        6.6.2. Button Loading
        6.6.3. Center Content
        6.6.4. Margin Container
        6.6.5. Separator
        6.6.6. Pull to Refresh
        6.6.7. List Updating
        6.6.8. Provider Login Button
    6.7. Advanced
        6.7.1. Dropdown ServerSide
        6.7.2. Dropdown ServerSide Item
    6.8. Deprecated Patterns
        6.8.1. Accordion
        6.8.2. Button Loading
        6.8.3. Carousel
        6.8.4. Datepicker
        6.8.5. Dropdown Search an Tags (Common)
        6.8.6. Dropdown Search
        6.8.7. Dropdown Tags
        6.8.8. Flip Content
        6.8.9. Gallery
        6.8.10. Horizontal Scroll
        6.8.11. Notification
        6.8.12. Progress Bar
        6.8.13. Progress Circle
        6.8.14. Progress Circle Fraction
        6.8.15. Section Index
        6.8.16. Sidebar
        6.8.17. Search
        6.8.18. Submenu
        6.8.19. Tabs
        6.8.20. Tooltip
        6.8.21. Video
7. Usefull Classes
    7.1. a11y (Accessibility)
    7.2. Colors - Brand
    7.3. Colors - Neutral
    7.4. Colors - Palette
    7.5. Colors - Semantic
    7.6. Colors - Others
    7.7. Text
    7.8. Typography
    7.9. Border Size
    7.10. Border Radius
    7.11. Space - Margin
    7.12. Space - Padding
    7.13. Shadow
    7.14. Box Width
    7.15. Box Height
    7.16. Display
    7.17. Display - Flex
    7.18. Display - Align
    7.19. Images
    7.20. Overflow
    7.21. Visibility
    7.22. Position
    7.23. Position - Absolute
    7.24. Miscellaneous
8. Screen Transitions
9. Keyframes - Animations
    9.1. Animate
    9.2. Button Loading
    9.3. List Item
    9.4. Feedback Message
    9.5. Pull To Refresh
    9.6. Miscellaneous
10. Service Studio Preview
*/
/*! ==============================================================================
0. Root - CSS Variables
=============================================================================== */
:root{
  /*! Typography - Size */
  --font-size-h1:32px;
  --font-size-h2:28px;
  --font-size-h3:26px;
  --font-size-h4:22px;
  --font-size-h5:20px;
  --font-size-h6:18px;
  --font-size-display:36px;
  --font-size-base:16px;
  --font-size-s:14px;
  --font-size-xs:12px;
  --font-size-label:11px;
  /*! Typography - Weight */
  --font-light:300;
  --font-regular:400;
  --font-semi-bold:600;
  --font-bold:700;
  /*! Color - Brand */
  --color-primary:#1068eb;
  --color-secondary:#303d60;
  --color-primary-hover:#295fd6;
  --color-primary-selected:rgba(20, 110, 245, 0.12);
  --color-primary-lightest:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));
  /*! Color - Focus */
  --color-focus-outer:#ffd337;
  --color-focus-inner:var(--color-neutral-10);
  /*! Color - Extended */
  --color-red-lightest:#faeaea;
  --color-red-lighter:#e9aaaa;
  --color-red-light:#d96a6a;
  --color-red:#c92a2a;
  --color-red-dark:#ab2424;
  --color-red-darker:#8d1d1d;
  --color-red-darkest:#6f1717;
  --color-orange-lightest:#fef0e6;
  --color-orange-lighter:#fcc29c;
  --color-orange-light:#f99551;
  --color-orange:#f76707;
  --color-orange-dark:#d25806;
  --color-orange-darker:#ad4805;
  --color-orange-darkest:#883904;
  --color-yellow-lightest:#fef5e5;
  --color-yellow-lighter:#fbd999;
  --color-yellow-light:#f8bc4c;
  --color-yellow:#f59f00;
  --color-yellow-dark:#d08700;
  --color-yellow-darker:#ac6f00;
  --color-yellow-darkest:#875700;
  --color-lime-lightest:#f1f8e8;
  --color-lime-lighter:#c7e3a2;
  --color-lime-light:#9ecd5c;
  --color-lime:#74b816;
  --color-lime-dark:#639c13;
  --color-lime-darker:#51810f;
  --color-lime-darkest:#40650c;
  --color-green-lightest:#ebf7ed;
  --color-green-lighter:#afe0b8;
  --color-green-light:#73c982;
  --color-green:#37b24d;
  --color-green-dark:#2f9741;
  --color-green-darker:#267d36;
  --color-green-darkest:#1e622a;
  --color-teal-lightest:#e6f2ef;
  --color-teal-lighter:#9cccbd;
  --color-teal-light:#52a58c;
  --color-teal:#087f5b;
  --color-teal-dark:#076c4d;
  --color-teal-darker:#065940;
  --color-teal-darkest:#044632;
  --color-cyan-lightest:#e7f2f4;
  --color-cyan-lighter:#9eccd3;
  --color-cyan-light:#56a6b2;
  --color-cyan:#0d8091;
  --color-cyan-dark:#0b6d7b;
  --color-cyan-darker:#095a66;
  --color-cyan-darkest:#074650;
  --color-blue-lightest:#e8f2fa;
  --color-blue-lighter:#a3c9ea;
  --color-blue-light:#5fa1db;
  --color-blue:#1a79cb;
  --color-blue-dark:#1667ad;
  --color-blue-darker:#12558e;
  --color-blue-darkest:#0e4370;
  --color-indigo-lightest:#eceffd;
  --color-indigo-lighter:#b3c1f7;
  --color-indigo-light:#7b92f1;
  --color-indigo:#4263eb;
  --color-indigo-dark:#3854c8;
  --color-indigo-darker:#2e45a5;
  --color-indigo-darkest:#243681;
  --color-violet-lightest:#f1edfd;
  --color-violet-lighter:#c6b6f6;
  --color-violet-light:#9b7fef;
  --color-violet:#7048e8;
  --color-violet-dark:#5f3dc5;
  --color-violet-darker:#4e32a2;
  --color-violet-darkest:#3e2880;
  --color-grape-lightest:#f7ecfa;
  --color-grape-lighter:#dfb2e9;
  --color-grape-light:#c678d9;
  --color-grape:#ae3ec9;
  --color-grape-dark:#9435ab;
  --color-grape-darker:#7a2b8d;
  --color-grape-darkest:#60226f;
  --color-pink-lightest:#fbebf0;
  --color-pink-lighter:#efadc4;
  --color-pink-light:#e27098;
  --color-pink:#d6336c;
  --color-pink-dark:#b62b5c;
  --color-pink-darker:#96244c;
  --color-pink-darkest:#761c3b;
  /*! Color - Neutral */
  --color-neutral-0:#ffffff;
  --color-neutral-1:#f8f9fa;
  --color-neutral-2:#f1f3f5;
  --color-neutral-3:#e9ecef;
  --color-neutral-4:#dee2e6;
  --color-neutral-5:#ced4da;
  --color-neutral-6:#adb5bd;
  --color-neutral-7:#6a7178;
  --color-neutral-8:#4f575e;
  --color-neutral-9:#272b30;
  --color-neutral-10:#101213;
  /*! Color - Semantic */
  --color-error-light:#fceaea;
  --color-error:#dc2020;
  --color-warning-light:#fdf6e5;
  --color-warning:#e9a100;
  --color-success-light:#eaf3eb;
  --color-success:#29823b;
  --color-info-light:#e5f5fc;
  --color-info:#017aad;
  /*! Overlays */
  --overlay-background:rgba(0, 0, 0, 0.25);
  /*! Space - Sizes */
  --space-none:0;
  --space-xs:4px;
  --space-s:8px;
  --space-base:16px;
  --space-m:24px;
  --space-l:32px;
  --space-xl:40px;
  --space-xxl:48px;
  /*! Border Radius */
  --border-radius-none:0;
  --border-radius-soft:4px;
  --border-radius-rounded:100px;
  --border-radius-circle:100%;
  /*! Border Size */
  --border-size-none:0;
  --border-size-s:1px;
  --border-size-m:2px;
  --border-size-l:3px;
  /*! Elevation / Shadow */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-s:0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-m:0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-l:0 6px 8px rgba(0, 0, 0, 0.1);
  --shadow-xl:0 8px 10px rgba(0, 0, 0, 0.1);
  /*! App Settings */
  --header-color:#ffffff;
  --color-background-body:#f3f6f8;
  --color-background-login:#ffffff;
  --header-size:56px;
  --header-size-content:48px;
  --side-menu-size:300px;
  --bottom-bar-size:56px;
  --footer-height:0px;
  /*! Set the StatusBar variable that will be overwritten when it will be enable due to miss calculations! */
  --status-bar-height:0px;
  /*! iOS Safe Areas (Notch Support) */
  --os-safe-area-top:env(safe-area-inset-top);
  --os-safe-area-right:env(safe-area-inset-right);
  --os-safe-area-bottom:env(safe-area-inset-bottom);
  --os-safe-area-left:env(safe-area-inset-left);
  /*! Layer System */
  --layer-system-scale:5;
  --layer-above:var(--layer-system-scale);
  --layer-below:calc(-1 * var(--layer-system-scale));
  /*! Global Layers */
  --layer-global-screen:0;
  --layer-global-elevated:calc(var(--layer-above) + var(--layer-global-screen));
  --layer-global-navigation:calc(var(--layer-above) + var(--layer-global-elevated));
  --layer-global-off-canvas:calc(var(--layer-above) + var(--layer-global-navigation));
  --layer-global-instant-interaction:calc(var(--layer-above) + var(--layer-global-off-canvas));
  /*! Auxiliary */
  --layer-global-negative:-1;
  --layer-global-auto:auto;
  /*! Local Layers */
  --layer-local-tier-1:1;
  --layer-local-tier-2:2;
  --layer-local-tier-3:3;
  --layer-local-tier-4:4;
  --layer-local-tier-5:5;
  /*! Fixed/Absolute Patterns that need their variables on a global level to be referenced on all DOM contexts */
  --osui-bottom-sheet-layer:var(--layer-global-off-canvas);
  --osui-notification-layer:var(--layer-global-instant-interaction);
  --osui-popup-layer:var(--layer-global-off-canvas);
  --osui-sidebar-layer:var(--layer-global-off-canvas);
  --osui-menu-layer:calc(var(--layer-global-navigation) + var(--layer-local-tier-2));
}
/*! ==============================================================================
1. Resets
=============================================================================== */
*{
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
html{
  color:var(--color-neutral-9);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}
html{
  -servicestudio-overflow:hidden;
}
body{
  background-color:var(--color-background-body);
  direction:ltr;
  font-size:var(--font-size-s);
  line-height:1.5;
  margin:0;
}
:focus{
  outline:0;
}
::-moz-focus-inner{
  border:0;
}
.has-accessible-features :focus{
  -webkit-box-shadow:0 0 0 var(--border-size-l) var(--color-focus-outer);
          box-shadow:0 0 0 var(--border-size-l) var(--color-focus-outer);
}
.os-high-contrast .has-accessible-features :focus{
  -webkit-box-shadow:none;
          box-shadow:none;
  outline:var(--border-size-l) solid var(--color-focus-outer);
}
abbr[title]{
  border-bottom:0;
  text-decoration:underline;
}
div[onclick]{
  cursor:pointer;
}
label{
  color:var(--color-neutral-8);
}
[data-label].mandatory:after{
  color:var(--color-error);
  margin-left:var(--space-xs);
}
input,
textarea,
select,
button{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  font-family:inherit;
  font-size:100%;
  line-height:1.25;
  margin:0;
}
[type=checkbox],
[type=radio]{
  border:0;
  padding:0;
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button{
  height:auto;
}
[type=search]{
  -webkit-appearance:textfield;
     -moz-appearance:textfield;
          appearance:textfield;
  outline-offset:-2px;
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration{
  -webkit-appearance:none;
          appearance:none;
}
input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=time]:empty{
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
}
.chrome input[type=time], .chrome input[type=date], .chrome input[type=datetime], .chrome input[type=datetime-local], .chrome input[type=time]:empty{
  display:inline-block;
}
::-webkit-file-upload-button{
  -webkit-appearance:button;
          appearance:button;
}
select::-ms-expand{
  display:none;
}
input::-ms-clear{
  display:none;
}
.is-rtl-device input[type=date],
.is-rtl-device input[type=datetime-local]{
  direction:rtl;
}
.focus-trap-top{
  top:0;
}
.focus-trap-bottom{
  bottom:0;
}
/*! ==============================================================================
2. HTML Elements
=============================================================================== */
/*! 2.1. Links */
a{
  text-decoration:none;
  -webkit-text-decoration-skip:objects;
}
a, a:visited{
  color:var(--color-primary);
  -webkit-transition:all 180ms linear;
  transition:all 180ms linear;
}
a:hover, a:focus{
  color:var(--color-primary-hover);
  text-decoration:underline;
}
a[disabled]{
  color:var(--color-neutral-6);
}
.phone a:hover, .phone a:focus,
.tablet a:hover,
.tablet a:focus{
  text-decoration:none;
}
.has-accessible-features a:focus{
  background-color:var(--color-focus-outer);
  -webkit-box-shadow:0 2px var(--color-focus-inner);
          box-shadow:0 2px var(--color-focus-inner);
  color:var(--color-neutral-10);
}
.has-accessible-features a:focus, .has-accessible-features a:focus:hover{
  text-decoration:none;
}
.has-accessible-features a[disabled]{
  color:var(--color-neutral-6);
}
/*! 2.2. Images */
img{
  max-width:100%;
}
figure{
  margin:0;
}
/*! 2.3. Headings */
h1,
.heading1,
h2,
.heading2,
h3,
.heading3,
h4,
.heading4,
h5,
.heading5,
h6,
.heading6,
.font-size-display{
  font-weight:var(--font-semi-bold);
  line-height:1.25;
  margin:0;
}
h1,
.heading1{
  font-size:var(--font-size-h1);
}
h2,
.heading2{
  font-size:var(--font-size-h2);
}
h3,
.heading3{
  font-size:var(--font-size-h3);
}
h4,
.heading4{
  font-size:var(--font-size-h4);
}
h5,
.heading5{
  font-size:var(--font-size-h5);
}
h6,
.heading6{
  font-size:var(--font-size-h6);
}
.font-size-display{
  font-size:var(--font-size-display);
}
.font-size-h1{
  font-size:var(--font-size-h1);
}
.font-size-h2{
  font-size:var(--font-size-h2);
}
.font-size-h3{
  font-size:var(--font-size-h3);
}
.font-size-h4{
  font-size:var(--font-size-h4);
}
.font-size-h5{
  font-size:var(--font-size-h5);
}
.font-size-h6{
  font-size:var(--font-size-h6);
}
.tablet h1,
.tablet .heading1{
  font-size:calc(var(--font-size-h1) - 2px);
}
.tablet h2,
.tablet .heading2{
  font-size:calc(var(--font-size-h2) - 2px);
}
.tablet h3,
.tablet .heading3{
  font-size:calc(var(--font-size-h3) - 2px);
}
.tablet h4,
.tablet .heading4{
  font-size:calc(var(--font-size-h4) - 1px);
}
.tablet h5,
.tablet .heading5{
  font-size:calc(var(--font-size-h5) - 1px);
}
.tablet h6,
.tablet .heading6{
  font-size:calc(var(--font-size-h6) - 1px);
}
.tablet .font-size-display{
  font-size:calc(var(--font-size-display) - 2px);
}
.phone h1,
.phone .heading1{
  font-size:calc(var(--font-size-h1) - 4px);
}
.phone h2,
.phone .heading2{
  font-size:calc(var(--font-size-h2) - 4px);
}
.phone h3,
.phone .heading3{
  font-size:calc(var(--font-size-h3) - 4px);
}
.phone h4,
.phone .heading4{
  font-size:calc(var(--font-size-h4) - 2px);
}
.phone h5,
.phone .heading5{
  font-size:calc(var(--font-size-h5) - 2px);
}
.phone h6,
.phone .heading6{
  font-size:calc(var(--font-size-h6) - 2px);
}
.phone .font-size-display{
  font-size:calc(var(--font-size-display) - 4px);
}
/*! ==============================================================================
3. Page Layout
=============================================================================== */
/*! 3.1. Layout */
html,
body,
#reactContainer,
#transitionContainer,
.screen-container{
  height:100%;
}
.screen-container{
  overflow-x:hidden;
  overflow-y:auto;
}
.layout{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  min-height:100vh;
}
.layout.layout-top, .layout.layout-side:not(.layout-native){
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
}
.layout.layout-left{
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-direction:row;
          flex-direction:row;
}
.layout.layout-side .main{
  margin-left:var(--side-menu-size);
}
.layout.layout-side.aside-overlay .main{
  margin-left:0;
}
.layout.layout-native{
  -servicestudio-min-height:100vh !important;
}
.layout.layout-native .main{
  width:100%;
}
.layout.aside-expandable .main{
  margin-left:0;
}
.layout .main{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
}
.main,
.fixed-header .main{
  padding-top:0;
}
.layout-native .aside-navigation,
.layout-top .aside-navigation{
  -servicestudio-display:none !important;
}
.ios .layout{
  min-height:100%;
}
.ios .layout-native .footer{
  height:calc(var(--os-safe-area-bottom) + var(--bottom-bar-size));
}
.ios .layout .header{
  padding-top:var(--os-safe-area-top);
}
.desktop .layout-native.aside-visible, .desktop .layout-native.aside-expandable,
.tablet .layout-native.aside-visible,
.tablet .layout-native.aside-expandable{
  --side-menu-size:264px;
}
.desktop .layout-native.aside-visible .main, .desktop .layout-native.aside-expandable .main{
  width:calc(100% - var(--side-menu-size));
}
.tablet.landscape .layout-native.menu-visible.aside-visible .main, .tablet.landscape .layout-native.menu-visible.aside-expandable .main{
  margin-left:var(--side-menu-size);
  width:calc(100% - var(--side-menu-size));
}
.tablet.landscape .layout-side.layout-native.aside-expandable.menu-visible .main{
  margin-left:var(--side-menu-size);
}
.tablet.landscape .layout-side.layout-native.aside-expandable .main{
  margin-right:0;
}
.tablet .layout-side .main,
.phone .layout-side .main{
  margin-left:0;
}
.phone .layout:not(.layout-native) [class*=ThemeGrid_Width]:not(.no-responsive){
  margin:var(--space-none) var(--space-none) var(--space-base) var(--space-none);
  width:100%;
}
.is-rtl.tablet .layout-native.aside-visible .main, .is-rtl.tablet .layout-native.aside-expandable .main{
  margin-left:0;
}
.is-rtl.tablet .layout-side .main{
  margin-right:0;
}
.is-rtl.tablet.landscape .layout-side.layout-native.aside-expandable.menu-visible .main{
  margin-left:0;
  margin-right:var(--side-menu-size);
}
.is-rtl.tablet.landscape .layout-side.layout-native.aside-expandable .main{
  margin-right:0;
}
.is-rtl.phone .layout-side .main{
  margin-right:0;
}
.is-rtl .layout-side .main{
  margin-left:0;
  margin-right:var(--side-menu-size);
}
.is-rtl .layout-side.aside-overlay .main{
  margin-right:0;
}
.is-rtl .aside-expandable .main{
  margin-right:0;
}
.layout .main-content .layout{
  -servicestudio-min-width:calc(100vw - var(--space-xl) * 2);
}
.phone .layout .main-content .layout{
  -servicestudio-min-width:calc(100vw - var(--space-base) * 2);
}
.phone .layout .main-content .layout.layout-native{
  -servicestudio-min-width:100vw;
}
/*! 3.2. Header */
.header{
  background-color:var(--header-color);
  -webkit-box-shadow:0 1px 5px 0 rgba(21, 24, 26, 0.1);
          box-shadow:0 1px 5px 0 rgba(21, 24, 26, 0.1);
  z-index:var(--layer-global-navigation);
}
.header{
  -servicestudio-position:relative;
}
.header-top{
  height:var(--header-size);
}
.header-logo{
  padding-right:var(--space-base);
}
.header-logo .application-name{
  word-break:break-word;
}
.header-navigation{
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
}
.header .header-content{
  height:100%;
}
.header .header-content > [data-block*=ApplicationTitle] .application-name{
  margin-right:var(--space-m);
}
.header .app-logo{
  border-radius:var(--border-radius-soft);
  margin-right:var(--space-s);
  max-height:var(--header-size);
  max-width:120px;
}
.fixed-header .header{
  left:0;
  position:sticky;
  right:0;
  top:0;
}
.menu-icon{
  background-color:transparent;
  border:none;
  cursor:pointer;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  height:100%;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  margin-right:var(--space-m);
  padding:0;
  width:24px;
}
.menu-icon-line{
  background-color:var(--color-neutral-8);
  border-radius:20px;
  height:3px;
  margin:2px 0;
  width:24px;
}
.menu-back{
  color:var(--color-neutral-8);
}
.user-info{
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  height:100%;
}
.user-info div{
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
}
.aside-expandable .header .ThemeGrid_Container{
  max-width:100%;
}
.layout-native .app-menu-icon.back .menu-icon,
.desktop .menu-icon,
.tablet.landscape .layout-native.aside-visible .menu-icon,
.app-menu-icon.back .menu-icon,
.app-menu-icon:not(.back) .menu-back{
  display:none;
}
.desktop .header-content > [data-block*=ApplicationTitle] .application-name{
  display:none;
}
.desktop .aside-expandable .menu-icon,
.desktop .aside-overlay .menu-icon{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
.tablet .layout-top .header-navigation,
.phone .layout-top .header-navigation{
  height:100vh;
  left:0;
  position:fixed;
  top:0;
  z-index:var(--layer-global-navigation);
}
.is-rtl .header-logo{
  padding-left:var(--space-base);
  padding-right:0;
}
.is-rtl .header .header-content > [data-block*=ApplicationTitle] .application-name{
  margin-right:0;
  margin-left:var(--space-m);
}
.is-rtl .app-logo,
.is-rtl .layout-side .app-logo{
  margin-left:var(--space-s);
  margin-right:0;
}
.is-rtl .menu-icon{
  margin-left:var(--space-m);
  margin-right:0;
}
.osx.tablet .layout-top:not(.menu-visible) .header-navigation,
.osx.phone .layout-top:not(.menu-visible) .header-navigation{
  pointer-events:none;
}
/*! 3.3. Layout Native - Header */
.layout-native.hide-header-on-scroll .header{
  top:calc(-1 * (var(--header-size) + var(--os-safe-area-top)));
}
.layout-native .header{
  position:sticky;
  top:0;
}
.layout-native .header-top{
  padding:0 var(--space-l);
}
.layout-native .header-title{
  font-size:var(--font-size-h5);
  font-weight:var(--font-regular);
}
.layout-native .header-title{
  -servicestudio-text-align:center;
  -servicestudio-width:100%;
}
.layout-native .header-left{
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
  margin-right:var(--space-base);
}
.layout-native .header-right{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
  -webkit-box-pack:end;
      -ms-flex-pack:end;
          justify-content:flex-end;
  margin-left:var(--space-base);
  margin-right:auto;
}
.layout-native .header-right{
  -servicestudio-min-width:-webkit-fit-content;
  -servicestudio-min-width:-moz-fit-content;
  -servicestudio-min-width:fit-content;
}
.layout-native h1.header-title{
  -servicestudio-text-align:center;
  -servicestudio-width:100%;
}
.layout-native .content-bottom{
  bottom:0;
  position:sticky;
  z-index:var(--layer-global-navigation);
}
.layout-native .menu-icon{
  margin-right:0;
}
.landscape .layout.layout-native .header, .landscape .layout.layout-native:not(.blank) .main-content,
.landscape .layout.layout-native .bottom-bar-wrapper{
  padding-left:var(--os-safe-area-left);
  padding-right:var(--os-safe-area-right);
}
.landscape .layout.layout-native .app-menu{
  padding-bottom:var(--os-safe-area-bottom);
}
.tablet .layout-native .header-top,
.phone .layout-native .header-top{
  padding:0 var(--space-m);
}
.tablet .layout-native .header-title{
  font-size:calc(var(--font-size-h5) - 1px);
}
.phone .layout-native .header-title{
  font-size:calc(var(--font-size-h5) - 2px);
}
.android[data-status-bar-height] .layout-native.hide-header-on-scroll .header{
  top:calc(-1 * (var(--header-size) + var(--status-bar-height)));
}
.android[data-status-bar-height] .layout-native .header,
.android[data-status-bar-height] .layout-native .app-menu{
  padding-top:var(--status-bar-height);
}
.ios .layout-native .header{
  padding-top:var(--os-safe-area-top);
}
.is-rtl .layout-native .header-left{
  margin-left:var(--space-base);
  margin-right:0;
}
.is-rtl .layout-native .header-right{
  margin-left:auto;
  margin-right:var(--space-base);
}
/*! 3.4. Layout Side - Header */
.layout-side.fixed-header.aside-expandable .header{
  left:0;
}
.layout-side.fixed-header.aside-overlay .header{
  left:0;
}
.layout-side.fixed-header .header{
  left:var(--side-menu-size);
}
.layout-side.layout-native.aside-expandable .main .header{
  z-index:var(--layer-global-navigation);
}
.layout-side .aside-expandable:not(.fixed-header) .main .header{
  margin-left:calc(var(--side-menu-size) * -1);
}
.layout-side .aside-expandable.menu-visible:not(.fixed-header) .main .header{
  margin-left:0;
}
.layout-side .aside-expandable.menu-visible .header{
  left:0;
}
.layout-side .header-navigation{
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
}
.desktop .layout-side.layout-native.aside-expandable .header{
  margin-left:0;
}
.desktop .aside-expandable .header{
  z-index:var(--layer-global-navigation);
}
.tablet .layout-side.aside-expandable:not(.fixed-header) .main .header,
.phone .layout-side.aside-expandable:not(.fixed-header) .main .header{
  margin-left:0;
}
.tablet .layout-side.fixed-header .header,
.phone .layout-side.fixed-header .header{
  left:0;
}
.tablet.portrait .layout-side.layout-native.aside-expandable .main .header{
  z-index:var(--layer-global-navigation);
}
.phone .layout-side.layout-native.aside-expandable .main .header{
  z-index:var(--layer-global-navigation);
}
.is-rtl.tablet, .is-rtl.phone{
  left:0;
  right:0;
}
.is-rtl .layout-side.fixed-header.aside-expandable .header{
  left:0;
  right:0;
}
.is-rtl .layout-side.fixed-header .header{
  left:0;
  right:var(--side-menu-size);
}
.is-rtl .aside-expandable.menu-visible .header{
  left:0;
  right:0;
}
/*! 3.5. Menu */
.app-menu-content{
  height:100%;
}
.app-menu-content{
  -servicestudio-background-color:var(--header-color);
  -servicestudio-height:auto !important;
}
.app-menu-overlay{
  background-color:var(--overlay-background);
  height:100vh;
  left:0;
  opacity:0;
  pointer-events:none;
  position:fixed;
  top:0;
  -webkit-transition:opacity 130ms ease-in;
  transition:opacity 130ms ease-in;
  width:100vw;
  will-change:opacity;
  z-index:calc(var(--osui-menu-layer) - var(--layer-local-tier-1));
}
.app-menu-overlay{
  -servicestudio-display:none;
}
.menu-visible .app-menu-overlay{
  opacity:1;
  pointer-events:auto;
  -webkit-transition:opacity 330ms ease-out;
  transition:opacity 330ms ease-out;
}
.layout .app-menu-content{
  -servicestudio-height:100% !important;
}
.layout-top .header-content{
  -servicestudio-align-items:center;
  -servicestudio-flex-direction:row;
}
.layout-blank .header-content{
  -servicestudio-align-items:center;
  -servicestudio-flex-direction:row;
}
.layout-side .aside-navigation{
  -servicestudio-background-color:var(--color-neutral-0);
  -servicestudio-height:100%;
  -servicestudio-position:fixed;
  -servicestudio-width:var(--side-menu-size);
  -servicestudio-z-index:var(--layer-global-navigation);
}
.layout-side .aside-navigation > div{
  -servicestudio-height:100%;
}
.layout-side .header .app-menu-content{
  -servicestudio-flex-direction:row;
  -servicestudio-position:static;
  -servicestudio-width:100%;
}
.layout-side .header .app-menu-links{
  -servicestudio-align-items:center;
  -servicestudio-flex-direction:row;
}
.layout-side .header-navigation > div{
  -servicestudio-height:100%;
  -servicestudio-width:100%;
}
.desktop .app-menu-overlay{
  display:none;
}
.desktop .aside-overlay .app-menu-overlay{
  display:block;
}
.tablet .app-login-info,
.phone .app-login-info{
  padding:var(--space-s) var(--space-m);
}
.tablet .app-menu-content,
.phone .app-menu-content{
  background-color:var(--color-neutral-0);
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  height:100%;
  left:calc(-1 * var(--side-menu-size));
  position:fixed;
  top:0;
  -webkit-transform:translateX(0) translateZ(0);
          transform:translateX(0) translateZ(0);
  -webkit-transition:-webkit-transform 130ms ease-in;
  transition:-webkit-transform 130ms ease-in;
  transition:transform 130ms ease-in;
  transition:transform 130ms ease-in, -webkit-transform 130ms ease-in;
  width:var(--side-menu-size);
  will-change:transform;
  z-index:var(--osui-menu-layer);
}
.tablet .menu-visible .app-menu-content,
.phone .menu-visible .app-menu-content{
  -webkit-transform:translateX(var(--side-menu-size)) translateZ(0);
          transform:translateX(var(--side-menu-size)) translateZ(0);
  -webkit-transition:-webkit-transform 330ms ease-out;
  transition:-webkit-transform 330ms ease-out;
  transition:transform 330ms ease-out;
  transition:transform 330ms ease-out, -webkit-transform 330ms ease-out;
}
.tablet .layout-side .header .app-menu-content,
.tablet .layout-side .aside-navigation,
.phone .layout-side .header .app-menu-content,
.phone .layout-side .aside-navigation{
  -servicestudio-display:none;
}
.tablet.landscape .layout-native.aside-expandable .app-menu-overlay{
  display:none;
}
.phone .app-menu-content{
  padding-bottom:var(--os-safe-area-bottom);
  padding-left:var(--os-safe-area-left);
}
.android[data-status-bar-height].portrait .app-menu-content{
  padding-top:var(--status-bar-height);
}
.android[data-status-bar-height].landscape .app-menu-content{
  padding-left:var(--status-bar-height);
}
.ios .app-menu-content{
  padding-bottom:var(--os-safe-area-bottom);
  padding-top:var(--os-safe-area-top);
}
.is-rtl .app-menu-content{
  left:auto;
  right:calc(-1 * var(--side-menu-size));
}
.is-rtl .menu-visible .app-menu-content{
  right:0;
  -webkit-transform:translateX(0) translateZ(0);
  transform:translateX(0) translateZ(0);
}
.is-rtl.tablet .menu-visible .app-menu-content, .is-rtl.phone .menu-visible .app-menu-content{
  right:0;
  -webkit-transform:translateX(0) translateZ(0);
          transform:translateX(0) translateZ(0);
  -webkit-transition:all 330ms ease-out;
  transition:all 330ms ease-out;
}
/*! 3.6. Layout Native - Menu */
.layout-native.menu-visible .app-menu-content:after{
  pointer-events:none;
}
.layout-native .app-menu-content:after{
  background:transparent;
  content:"";
  height:100%;
  position:absolute;
  right:-24px;
  top:calc(var(--header-size) + var(--header-size-content));
  width:24px;
}
.desktop .layout.layout-native.layout-side.aside-expandable .app-menu-content{
  padding-top:calc(var(--header-size) + var(--header-size-content) + var(--os-safe-area-top));
}
.desktop .layout.layout-native.layout-side.aside-expandable.hide-header-on-scroll:not(.header-is--visible) .app-menu-content{
  padding-top:var(--header-size-content);
}
.desktop .layout-native.aside-visible .app-menu-content, .desktop .layout-native.aside-expandable .app-menu-content{
  -webkit-box-shadow:var(--shadow-m);
          box-shadow:var(--shadow-m);
  z-index:var(--osui-menu-layer);
}
.desktop .layout-native .landscape.android[data-status-bar-height].layout-side.aside-expandable .app-menu-content,
.tablet .layout-native .landscape.android[data-status-bar-height].layout-side.aside-expandable .app-menu-content{
  padding-top:calc(var(--header-size) + var(--header-size-content) + var(--status-bar-height));
}
.tablet.landscape .layout-native.aside-expandable .app-menu-content{
  display:none;
}
.tablet.landscape .layout-native.aside-visible .app-menu-content, .tablet.landscape .layout-native.aside-expandable .app-menu-content{
  -webkit-box-shadow:var(--shadow-m);
          box-shadow:var(--shadow-m);
  left:0;
  z-index:var(--osui-menu-layer);
}
.tablet.landscape .layout-native.layout-side.aside-expandable .app-menu-content{
  padding-top:calc(var(--header-size) + var(--header-size-content) + var(--os-safe-area-top));
}
.tablet.landscape .layout-side.layout-native.aside-expandable.hide-header-on-scroll:not(.header-is--visible) .app-menu-content{
  padding-top:var(--header-size-content);
}
.is-rtl .tablet.landscape.landscape.aside-visible .app-menu-content, .is-rtl .tablet.landscape.landscape.aside-expandable .app-menu-content{
  right:0;
}
/*! 3.7. Layout Side - Menu */
.layout-side .app-logo{
  border-radius:var(--border-radius-soft);
  margin-right:var(--space-s);
  max-height:var(--header-size);
  max-width:120px;
}
.layout-side .app-menu-content{
  background-color:var(--color-neutral-0);
  bottom:0;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  height:auto;
  position:fixed;
  top:0;
  width:var(--side-menu-size);
  z-index:var(--osui-menu-layer);
}
.aside-overlay .app-menu-content{
  background-color:var(--color-neutral-0);
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  height:100%;
  left:calc(-1 * var(--side-menu-size));
  position:fixed;
  top:0;
  -webkit-transform:translateX(0) translateZ(0);
          transform:translateX(0) translateZ(0);
  -webkit-transition:-webkit-transform 130ms ease-in;
  transition:-webkit-transform 130ms ease-in;
  transition:transform 130ms ease-in;
  transition:transform 130ms ease-in, -webkit-transform 130ms ease-in;
  width:var(--side-menu-size);
  will-change:transform;
  z-index:var(--osui-menu-layer);
}
.aside-overlay.menu-visible .app-menu-content{
  -webkit-transform:translateX(var(--side-menu-size)) translateZ(0);
          transform:translateX(var(--side-menu-size)) translateZ(0);
  -webkit-transition:-webkit-transform 330ms ease-out;
  transition:-webkit-transform 330ms ease-out;
  transition:transform 330ms ease-out;
  transition:transform 330ms ease-out, -webkit-transform 330ms ease-out;
}
.desktop .layout-side:not(.layout-native):not(.aside-overlay) .app-menu-content{
  left:0;
  right:0;
}
.desktop .layout-side.aside-expandable:not(.fixed-header) .app-menu-content{
  padding-top:var(--header-size);
  top:0;
}
.desktop .aside-expandable.menu-visible .app-menu-content{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
.desktop .aside-expandable.menu-visible .main{
  margin-left:var(--side-menu-size);
}
.desktop .aside-expandable .app-menu-content{
  display:none;
}
.tablet.landscape .layout-native.aside-expandable.menu-visible .app-menu-content{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-transform:none;
      -ms-transform:none;
          transform:none;
  -webkit-transition:none;
  transition:none;
}
.is-rtl.desktop .aside-expandable.menu-visible .main{
  margin-left:0;
  margin-right:var(--side-menu-size);
}
.is-rtl.tablet .app-menu-content, .is-rtl.phone .app-menu-content{
  right:calc(-1 * var(--side-menu-size));
  -webkit-transition:all 330ms ease-out;
  transition:all 330ms ease-out;
}
.is-rtl:not(.portrait) .layout-side.layout-native.aside-visible .app-menu-content{
  right:0;
}
.is-rtl .layout-side .app-menu-content{
  left:auto;
}
.is-rtl .aside-overlay.menu-visible .app-menu-content{
  right:0;
  -webkit-transform:translateX(0) translateZ(0);
          transform:translateX(0) translateZ(0);
  -webkit-transition:all 330ms ease-out;
  transition:all 330ms ease-out;
}
/*! 3.8. Menu - Header Logo */
.layout-side .header-logo{
  height:var(--header-size);
  padding:var(--space-none) var(--space-m);
}
.tablet .header-logo,
.phone .header-logo{
  height:var(--header-size);
  padding:var(--space-none) var(--space-m);
}
/*! 3.9. Menu - App Menu Link */
.app-menu-links{
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
  height:100%;
}
.app-menu-links{
  -servicestudio-align-items:center;
  -servicestudio-display:flex;
  -servicestudio-column-gap:var(--space-m);
}
.app-menu-links:empty{
  -servicestudio-position:relative;
}
.app-menu-links:empty:after{
  -servicestudio-color:var(--color-neutral-7);
  -servicestudio-content:"Drag screens to this container to create menu entries";
  -servicestudio-font-size:var(--font-size-xs);
  -servicestudio-left:50%;
  -servicestudio-position:absolute;
  -servicestudio-text-align:center;
  -servicestudio-top:50%;
  -servicestudio-transform:translateX(-50%) translateY(-50%);
}
.app-menu-links a{
  color:var(--color-neutral-9);
}
.app-menu-links a{
  -servicestudio-color:var(--color-neutral-9);
}
.app-menu-links a:hover, .app-menu-links a.active{
  color:var(--color-primary);
  text-decoration:none;
}
body .app-menu-content .app-menu-links{
  -servicestudio-align-items:flex-start;
  -servicestudio-padding:var(--space-none);
  -servicestudio-width:100% !important;
}
.layout .app-menu-links:empty:after{
  -servicestudio-content:"";
}
.layout:not(.layout-side) .app-menu-links a{
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  border-bottom:var(--border-size-m) solid transparent;
  border-top:var(--border-size-m) solid transparent;
  display:-webkit-inline-box;
  display:-ms-inline-flexbox;
  display:inline-flex;
}
.layout:not(.layout-side) .app-menu-links a.active{
  border-bottom:var(--border-size-m) solid var(--color-primary);
}
.layout-side .app-menu-links a,
.menu-visible .app-menu-links a{
  border-bottom:0;
  border-left:var(--border-size-m) solid transparent;
  border-top:0;
  margin-left:0;
  padding:var(--space-s) var(--space-m);
}
.layout-side .app-menu-links{
  -servicestudio-align-items:flex-start;
}
.layout-side .app-menu-links{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  -webkit-overflow-scrolling:touch;
  overflow-y:auto;
  padding-top:var(--space-s);
}
.layout-side .app-menu-links a.active{
  border-left:var(--border-size-m) solid var(--color-primary);
}
.landscape .layout-native .app-menu-links{
  padding-left:calc(var(--os-safe-area-left) / 2);
}
.desktop .layout:not(.layout-side) .app-menu-links{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
      flex-wrap:wrap;
}
.phone .app-menu-links,
.tablet .app-menu-links{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  -webkit-overflow-scrolling:touch;
  overflow-y:auto;
  padding-top:var(--space-s);
}
.phone .app-menu-links a,
.tablet .app-menu-links a{
  -servicestudio-margin-left:var(--space-none);
  -servicestudio-padding:var(--space-s) var(--space-m);
  -servicestudio-width:100%;
}
.phone .layout:not(.layout-side) .app-menu-links a.active,
.tablet .layout:not(.layout-side) .app-menu-links a.active{
  border-bottom:0;
}
.has-accessible-features .header a.active:focus{
  color:var(--color-primary);
}
.has-accessible-features .app-menu-links a:focus{
  background-color:transparent;
  -webkit-box-shadow:0 0 0 3px var(--color-focus-outer);
          box-shadow:0 0 0 3px var(--color-focus-outer);
}
/*! 3.10. Menu - App Login Info */
.layout-side .app-login-info{
  padding:var(--space-base) var(--space-m);
}
.layout-side .user-info{
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
}
.tablet .app-login-info,
.phone .app-login-info{
  padding:var(--space-base) var(--space-m);
}
.tablet .user-info,
.phone .user-info{
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
}
/*! 3.11. Content */
.content{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  position:relative;
}
.content-breadcrumbs{
  margin-bottom:var(--space-base);
}
.content-top{
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
}
.content-top-title{
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
  margin-bottom:var(--space-l);
}
.content-top-title .Title_Links{
  font-size:var(--font-size-s);
  font-weight:var(--font-regular);
}
.content-top-actions{
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
  -webkit-box-pack:end;
      -ms-flex-pack:end;
          justify-content:flex-end;
  margin-bottom:var(--space-l);
  text-align:right;
}
.content-top-title, .content-top-actions{
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
      flex-wrap:wrap;
}
.content-top-title > div:not([class*=ThemeGrid_Width]), .content-top-actions > div:not([class*=ThemeGrid_Width]){
  width:100%;
}
.content-middle{
  position:relative;
}
.content-middle{
  -servicestudio-min-height:420px;
}
.main-content{
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
  position:relative;
}
.layout-native .content{
  background-color:var(--color-background-body);
}
.layout-native .content-middle{
  height:100%;
}
.phone .content-top{
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
}
.phone .content-top-actions, .phone .content-top-title{
  -ms-flex-wrap:wrap;
      flex-wrap:wrap;
  width:100%;
}
/*! 3.12. ThemeGrid_Container */
.ThemeGrid_Container{
  margin:var(--space-none) auto;
  width:100%;
}
.header .ThemeGrid_Container{
  padding:var(--space-none) var(--space-xl);
}
.layout .main-content.ThemeGrid_Container{
  padding:var(--space-xl);
}
.layout .footer.ThemeGrid_Container{
  padding:var(--space-base) var(--space-xl);
}
.tablet .header .ThemeGrid_Container{
  padding:var(--space-none) var(--space-m);
}
.tablet .main-content.ThemeGrid_Container{
  padding:var(--space-m);
}
.tablet .footer.ThemeGrid_Container{
  padding:var(--space-base) var(--space-m);
}
.phone .header .ThemeGrid_Container{
  padding-left:calc(var(--os-safe-area-left) + var(--space-base));
  padding-right:calc(var(--os-safe-area-right) + var(--space-base));
}
.phone .main-content.ThemeGrid_Container{
  padding-bottom:var(--space-base);
  padding-left:calc(var(--os-safe-area-left) + var(--space-base));
  padding-right:calc(var(--os-safe-area-right) + var(--space-base));
  padding-top:var(--space-base);
}
.phone .footer.ThemeGrid_Container{
  padding-left:calc(var(--os-safe-area-left) + var(--space-base));
  padding-right:calc(var(--os-safe-area-right) + var(--space-base));
}
.layout-native .main-content.ThemeGrid_Container{
  padding:var(--space-none);
}
/*! 3.13. Section */
.full-width-section{
  position:relative;
}
.full-width-section .ThemeGrid_Container{
  padding:var(--space-none) var(--space-xl);
}
.section-background{
  left:0;
  position:absolute;
  top:0;
  height:100%;
  overflow:hidden;
  width:100%;
}
.section-background:empty{
  -servicestudio-min-height:80px;
  -servicestudio-position:relative;
}
.section-background img{
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  width:100%;
}
.section-content{
  position:relative;
}
/*! 3.14. Login */
.login-screen{
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  background-color:var(--color-primary);
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  height:100%;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
}
.login-screen > img{
  left:0;
  position:absolute;
  top:0;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  width:100%;
}
.login-form{
  background-color:var(--color-neutral-0);
  border-radius:var(--border-radius-soft);
  -webkit-box-shadow:var(--shadow-l);
          box-shadow:var(--shadow-l);
  min-width:435px;
  padding:var(--space-xxl);
  z-index:var(--layer-global-screen);
}
.layout-native .login-screen{
  background-color:var(--color-background-login);
  padding:var(--os-safe-area-top) var(--os-safe-area-right) var(--os-safe-area-bottom) var(--os-safe-area-left);
}
.layout-native .login-form{
  border-radius:0;
  -webkit-box-shadow:none;
          box-shadow:none;
}
.login-button [data-block*=ButtonLoading], .login-button [data-block*=ButtonLoading] > div{
  -servicestudio-width:100% !important;
}
.android[data-status-bar-height] .layout-native .login-screen{
  padding-top:var(--status-bar-height);
}
.phone .login-form{
  margin:var(--space-none) var(--space-base);
  min-width:auto;
  padding:var(--space-l);
  width:100%;
}
.phone .layout-native .login-form{
  background:transparent;
  margin:0;
}
.phone .layout-native .login-button .btn{
  padding-bottom:var(--os-safe-area-bottom);
}
.phone .layout-native.blank .login-button .btn{
  padding-bottom:var(--space-none);
}
/*! 3.15. iOS Scroll Bounce */
.ios .layout-native.ios-bounce:not(.hide-header-on-scroll) .main{
  display:grid;
  grid-template:auto 1fr auto/1fr;
  grid-template-areas:"header" "content" "footer";
  max-height:var(--viewport-height, 100vh);
  width:100%;
}
.ios .layout-native.ios-bounce:not(.hide-header-on-scroll) .main{
  -servicestudio-max-height:100% !important;
}
.ios .layout-native.ios-bounce:not(.hide-header-on-scroll) .header{
  grid-area:header;
  position:relative;
}
.ios .layout-native.ios-bounce:not(.hide-header-on-scroll) [data-block="Private.PullToRefresh"]{
  display:contents;
}
.ios .layout-native.ios-bounce:not(.hide-header-on-scroll) .pull-to-refresh{
  top:calc(var(--header-size) + var(--header-size-content) + var(--os-safe-area-top));
}
.ios .layout-native.ios-bounce:not(.hide-header-on-scroll) .content{
  background-color:var(--color-background-body);
  grid-area:content;
  overflow-x:hidden;
  overflow-y:auto;
}
.ios .layout-native.ios-bounce:not(.hide-header-on-scroll) .content-bottom{
  grid-area:footer;
  position:relative;
}
/*! ==============================================================================
4. Widgets
=============================================================================== */
/*! 4.1. Inputs and TextAreas */
::-webkit-input-placeholder{
  color:var(--color-neutral-7);
}
::-moz-placeholder{
  color:var(--color-neutral-7);
}
:-ms-input-placeholder{
  color:var(--color-neutral-7);
}
.form-control{
}
.form-control[data-input], .form-control[data-textarea]{
  background-color:var(--color-neutral-0);
  border:var(--border-size-s) solid var(--color-neutral-5);
  border-radius:var(--border-radius-soft);
  color:var(--color-neutral-9);
  font-size:var(--font-size-s);
  -webkit-transition:all 180ms linear;
  transition:all 180ms linear;
}
.form-control[data-input]:hover, .form-control[data-textarea]:hover{
  border:var(--border-size-s) solid var(--color-neutral-6);
}
.form-control[data-input]:focus, .form-control[data-textarea]:focus{
  border:var(--border-size-s) solid var(--color-primary);
}
.form-control[data-input][disabled], .form-control[data-textarea][disabled]{
  background-color:var(--color-neutral-2);
  border:var(--border-size-s) solid var(--color-neutral-4);
  color:var(--color-neutral-6);
}
.form-control[data-input]{
  height:40px;
  padding:var(--space-none) var(--space-base);
}
.form-control[data-textarea]{
  height:auto;
  padding:var(--space-base);
  resize:auto;
}
.form-control.input{
}
.form-control.input-small[data-input]{
  font-size:var(--font-size-xs);
  height:32px;
  padding:var(--space-none) var(--space-s);
}
.form-control.input-small[data-textarea]{
  font-size:var(--font-size-xs);
  padding:var(--space-s);
}
.form-control.input-large[data-input]{
  font-size:var(--font-size-base);
  height:48px;
}
.form-control.input-large[data-textarea]{
  font-size:var(--font-size-base);
}
.form-control.not-valid[data-input], .form-control.not-valid[data-textarea]{
  border:var(--border-size-s) solid var(--color-error);
}
.tablet .form-control[