/* ===================================================================== */
/* ===================================================================== */

/*  OutSystems UI Web                                                    */
/*  Visit www.outsystems.com/outsystems-ui for more information          */

/*  $0 - Root - CSS Variables                                            */
/*  $1 - Resets (https://necolas.github.io/normalize.css/)               */
/*  $2 - HTML Elements                                                   */
/*       $2.1 - HTML Elements - Links                                    */
/*       $2.2 - HTML Elements - Images                                   */
/*       $2.3 - HTML Elements - Headings                                 */
/*       $2.4 - HTML Elements - Inputs and Selectors                     */
/*       $2.5 - HTML Elements - Buttons                                  */
/*  $3 - Page Layout                                                     */
/*       $3.1 - Page Layout - Header                                     */
/*              $3.1.1 - Page Layout - Header Top                        */
/*              $3.1.2 - Page Layout - Header Content                    */
/*       $3.2 - Page Layout - Menu                                       */
/*       $3.3 - Page Layout - Content                                    */
/*  $4 - Patterns                                                        */
/*       $4.1 - Patterns - Content                                       */
/*              $4.1.1   - Patterns - Content - Accordion                */
/*              $4.1.2   - Patterns - Content - Alert                    */
/*              $4.1.3   - Patterns - Content - Balloon                  */
/*              $4.1.4   - Patterns - Content - BlankSlate               */
/*              $4.1.5   - Patterns - Content - Bullets                  */
/*              $4.1.6   - Patterns - Content - Card                     */
/*              $4.1.7   - Patterns - Content - CardBackground           */
/*              $4.1.8   - Patterns - Content - CardSectioned            */
/*              $4.1.9   - Patterns - Content - Carousel                 */
/*              $4.1.10  - Patterns - Content - ChatMessage              */
/*              $4.1.11  - Patterns - Content - LightBoxImage            */
/*              $4.1.12  - Patterns - Content - Modal                    */
/*              $4.1.13  - Patterns - Content - Panel                    */
/*              $4.1.14  - Patterns - Content - Section                  */
/*              $4.1.15  - Patterns - Content - Tag                      */
/*              $4.1.16  - Patterns - Content - Tooltip                  */
/*       $4.2 - Patterns - Controls                                      */
/*              $4.2.1   - Patterns - Controls - AnimatedLabel           */
/*              $4.2.2   - Patterns - Controls - ButtonGroup             */
/*              $4.2.3   - Patterns - Controls - DatePicker              */
/*              $4.2.4   - Patterns - Controls - Dropdown                */
/*              $4.2.5   - Patterns - Controls - DropdownSelect          */
/*              $4.2.6   - Patterns - Controls - FileUpload              */
/*              $4.2.7   - Patterns - Controls - FloatingActions         */
/*              $4.2.8   - Patterns - Controls - InputWithIcon           */
/*              $4.2.9   - Patterns - Controls - RangeSlider             */
/*              $4.2.10  - Patterns - Controls - Search                  */
/*              $4.2.11  - Patterns - Controls - SearchBalloon           */
/*              $4.2.12  - Patterns - Controls - TimePicker              */
/*              $4.2.13  - Patterns - Controls - ToggleButton            */
/*              $4.2.14  - Patterns - Controls - Video                   */
/*       $4.3 - Patterns - Layouts                                       */
/*              $4.3.1   - Patterns - Layouts - Logins                   */
/*       $4.4 - Patterns - Navigation                                    */
/*              $4.4.1   - Patterns - Navigation - Breadcrumbs           */
/*              $4.4.2   - Patterns - Navigation - NavigationBar         */
/*              $4.4.3   - Patterns - Navigation - SectionIndex          */
/*              $4.4.4   - Patterns - Navigation - Sidebar               */
/*              $4.4.5   - Patterns - Navigation - Tabs                  */
/*              $4.4.6   - Patterns - Navigation - Timeline              */
/*              $4.4.7   - Patterns - Navigation - Wizard                */
/*       $4.5 - Patterns - Numbers                                       */
/*              $4.5.1   - Patterns - Numbers - Badge                    */
/*              $4.5.2   - Patterns - Numbers - Counter                  */
/*              $4.5.3   - Patterns - Numbers - IconBadge                */
/*              $4.5.4   - Patterns - Numbers - ProgressBar              */
/*              $4.5.5   - Patterns - Numbers - ProgressCircle           */
/*              $4.5.6   - Patterns - Numbers - UserAvatar               */
/*       $4.6 - Patterns - Responsive                                    */
/*              $4.6.1   - Patterns - Responsive - DisplayOnDevice       */
/*              $4.6.2   - Patterns - Responsive - LoadOnVisible         */
/*              $4.6.3   - Patterns - Responsive - MoveOnDevice          */
/*              $4.6.4   - Patterns - Responsive - ResponsiveTables      */
/*       $4.7 - Patterns - Structure                                     */
/*              $4.7.1   - Patterns - Structure - AlignCenter            */
/*              $4.7.2   - Patterns - Structure - Columns                */
/*              $4.7.3   - Patterns - Structure - Gallery                */
/*       $4.8 - Patterns - Utilities                                     */
/*              $4.8.1   - Patterns - Utilities - Animate                */
/*              $4.8.2   - Patterns - Utilities - ButtonLoading          */
/*              $4.8.3   - Patterns - Utilities - CharacterCount         */
/*              $4.8.4   - Patterns - Utilities - FlipContent            */
/*              $4.8.5   - Patterns - Utilities - Fieldset               */
/*              $4.8.6   - Patterns - Utilities - FlipContent            */
/*              $4.8.7   - Patterns - Utilities - Iframe                 */
/*              $4.8.8   - Patterns - Utilities - Separator              */
/*              $4.8.9   - Patterns - Utilities - StackedIcon            */
/*  $5 - Widgets & RichWidgets                                           */
/*       $5.1 - Widgets - Form / EditRecord                              */
/*       $5.2 - Widgets - TableRecords / EditableTable                   */
/*       $5.3 - RichWidgets - CounterMessage                             */
/*       $5.4 - RichWidgets - FeedbackAjaxWait                           */
/*       $5.5 - RichWidgets - FeedbackMessage                            */
/*       $5.6 - RichWidgets - Pagination                                 */
/*       $5.7 - RichWidgets - PopupEditor                                */
/*       $5.8 - RichWidgets - FiltersWrapper                             */
/*       $5.9 - RichWidgets - Calendar                                   */
/*  $6 - Styles                                                          */
/*       $6.1 - Styles - Typography                                      */
/*              $6.1.1 - Styles - Typography - Sizes Desktop             */
/*              $6.1.2 - Styles - Typography - Sizes Tablet              */
/*              $6.1.3 - Styles - Typography - Sizes Phone               */
/*              $6.1.4 - Styles - Typography - Transform                 */
/*              $6.1.5 - Styles - Typography - Weight                    */
/*       $6.2 - Styles - Colors                                          */
/*              $6.2.1 - Styles - Colors - Brand                         */
/*              $6.2.2 - Styles - Colors - Extendend                     */
/*              $6.2.3 - Styles - Colors - Neutral                       */
/*              $6.2.4 - Styles - Colors - Semantic                      */
/*       $6.3 - Styles - Space                                           */
/*              $6.3.1  - Styles - Space - Padding                       */
/*              $6.3.2  - Styles - Space - Padding Top                   */
/*              $6.3.3  - Styles - Space - Padding Right                 */
/*              $6.3.4  - Styles - Space - Padding Bottom                */
/*              $6.3.5  - Styles - Space - Padding Left                  */
/*              $6.3.6  - Styles - Space - Padding Vertical              */
/*              $6.3.7  - Styles - Space - Padding Horizontal            */
/*              $6.3.8  - Styles - Space - Margin                        */
/*              $6.3.9  - Styles - Space - Margin Top                    */
/*              $6.3.10 - Styles - Space - Margin Right                  */
/*              $6.3.11 - Styles - Space - Margin Bottom                 */
/*              $6.3.12 - Styles - Space - Margin Left                   */
/*              $6.3.13 - Styles - Space - Margin Vertical               */
/*              $6.3.14 - Styles - Space - Margin Horizontal             */
/*       $6.4 - Styles - Border Radius                                   */
/*       $6.5 - Styles - Border Size                                     */
/*       $6.6 - Styles - Elevation/Shadows                               */
/*       $6.7 - Styles - Display Flex Properties                         */
/*       $6.8 - Styles - Others                                          */
/*  $7 - Right-to-Left Mode                                              */
/*       $7.1 - RTL Mode - Page Layout / HTML Elements                   */
/*       $7.2 - RTL Mode - Patterns - Content                            */
/*              $7.2.1 - RTL Mode - Patterns - Content - Alert           */
/*              $7.2.2 - RTL Mode - Patterns - Content - CardSectioned   */
/*              $7.2.3 - RTL Mode - Patterns - Content - ChatMessage     */
/*       $7.3 - RTL Mode - Patterns - Controls                           */
/*              $7.3.1 - RTL Mode - Patterns - Controls - AnimatedLabel  */
/*              $7.3.2 - RTL Mode - Patterns - Controls - ButtonGroup    */
/*              $7.3.3 - RTL Mode - Patterns - Controls - DatePicker     */
/*              $7.3.4 - RTL Mode - Patterns - Controls - FileUpload     */
/*              $7.3.5 - RTL Mode - Patterns - Controls - FloatingActions*/
/*              $7.3.6 - RTL Mode - Patterns - Controls - InputWithIcons */
/*              $7.3.7 - RTL Mode - Patterns - Controls - RangeSlider    */
/*              $7.3.8 - RTL Mode - Patterns - Controls - ToogleButton   */
/*       $7.4 - RTL Mode - Patterns - Navigation                         */
/*              $7.4.1 - RTL Mode - Patterns - Navigation - SectionIndex */
/*              $7.4.2 - RTL Mode - Patterns - Navigation - Sidebar      */
/*              $7.4.3 - RTL Mode - Patterns - Navigation - Tabs         */
/*              $7.4.4 - RTL Mode - Patterns - Navigation - Timeline     */
/*              $7.4.5 - RTL Mode - Patterns - Navigation - Wizard       */
/*       $7.5 - RTL Mode - Patterns - Numbers                            */
/*              $7.5.1 - RTL Mode - Patterns - Numbers - ProgressBar     */
/*       $7.6 - RTL Mode - Patterns - Responsive                         */
/*              $7.6.1 - RTL Mode - Patterns - Responsive - TableRecords */
/*       $7.7 - RTL Mode - Widgets & RichWidgets                         */
/*              $7.7.1 - RTL Mode - Widgets - TableRecords               */
/*              $7.7.2 - RTL Mode - RichWidgets - FeedbackAjaxWait       */
/*              $7.7.3 - RTL Mode - RichWidgets - FeedbackMessage        */
/*              $7.7.4 - RTL Mode - RichWidgets - Pagination             */
/*       $7.8 - RTL Mode - Styles                                        */
/*              $7.8.1 - RTL Mode - Styles - Space - Padding Right       */
/*              $7.8.2 - RTL Mode - Styles - Space - Padding Left        */
/*              $7.8.3 - RTL Mode - Styles - Space - Margin Right        */
/*              $7.8.4 - RTL Mode - Styles - Space - Margin Left         */
/*              $7.8.5 - RTL Mode - Styles - Others                      */
/* ===================================================================== */
/* ===================================================================== */

/* ===================================================================== */
/*  $0 - Root - CSS Variables                                            */
/* ===================================================================== */
:root {

    /* Typography - Size */
    --font-size-display: 36px;
    
    --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-base: 16px;
    --font-size-s: 14px;
    --font-size-xs: 12px;   

    /* 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, .12);
    --color-primary-lightest: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));

    /* 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-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-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-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-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-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-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-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-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-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-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 - 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;

    /* 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, .1);
    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);
    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);
    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);
    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);

    /* App Settings */
    --color-background-body: #f3f6f8;
    --header-size: 56px;
    --side-menu-size: 300px;

}

/* ================================================================ */
/*  $1 - Resets                                                     */
/* ================================================================ */

* {
    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";
    overflow: auto;
    overflow-x: hidden;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    
}

body {    
    background-color: var(--color-background-body);
    font-size: var(--font-size-s);
    line-height: 1.5;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}

a {
    text-decoration: none;
    -webkit-text-decoration-skip: objects;
}

abbr[title] {
    border-bottom: 0;
    text-decoration: underline;
}

:focus {
    outline: 0;
}

.is--focusable :focus {
    outline: var(--border-size-m) solid #A3DAFF;
}

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="checkbox"]:not(.checkbox) {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

[type="radio"]:not(.radio-button) {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

[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;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
}

div[onclick] {
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

input::-ms-clear {
    display: none;
}

/* ================================================================ */
/*  $2 - HTML Elements                                              */
/* ================================================================ */

/* $2.1 - HTML Elements - Links */
a, 
a:visited {
    color: var(--color-primary);
    -webkit-transition: color 180ms linear;
            transition: color 180ms linear;
}

a:hover {
    color: var(--color-primary-hover);
}


/* $2.2 - HTML Elements - Images  */
img {
    max-width: 100%;
}


/* $2.3 - HTML Elements - Headings */
h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
    margin: 0;
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
    margin: 0;
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
    margin: 0;
}

h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
    margin: 0;
}

h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
    margin: 0;
}

h6 {
    font-size: var(--font-size-h6);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
    margin: 0;
}


/* $2.4 - HTML Elements - Inputs and Selectors */
label.MandatoryLabel:after {
    color: var(--color-error);
    content: '*';
    margin-left: var(--space-xs);
}

.ValidationMessage {
    color: var(--color-error);
    display: block;
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
}

input+.ValidationMessage {
    margin-top: var(--space-xs);
}

.input, 
textarea.input, 
.select {   
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-5);
    color: var(--color-neutral-9);
    font-size: var(--font-size-s);
    height: 40px;
    padding: var(--space-none) var(--space-base); 
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

textarea.input {
    height: auto;
    padding: var(--space-base);
}

.ie11 textarea.input,
.ie10 textarea.input { 
    overflow: auto; 
}

.select {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAOCAYAAAA8E3wEAAAAAXNSR0IArs4c6QAAAgpJREFUOBGlU79LW1EUPvfFPLQOQh06OPgHuKlV82NwqBYsndRSwTUPqVgpJS9DlyyCJFSUYKWR/gVugi46SCXRYNOpmq4OGTq0oKCBp32353vw5PblRtN6lnffOd+Pm7zvCOKy5pJFSTJCQux0PWwfS6fT1+jft1inpfrrYpukHBEkDvK5bNSAaNg0p9jsBwbVn5cf7mvk8z0t1oS258GDEIZHB/tnA9H4ZzacJpKD/UOxWrlULPjE/3lar5M2a6WEoFooZDxdW1o8gY5niMOXw0K1PxKvSClf8OuTvkjs29dSsYLZv1ZiPjnOl8+DZ4SMlx+XM7u+xo0hGuXDQoVNLxk8KoieP47Gd3ARH9zMc+aNPUCu3GRsWBhGKr+S+aTyWLe+EnM2385N4L83w+bg6vuF03pUfWf27btu58op8YUf8W9bX89lrCDKC02w2dX54BUSC6LjOFtWKtURxATfgQHWM0PaoaEprSHWolW2TxCJY/7wPbLmbiDiGr7XwgwYYMEBFxo6vNYQwFwufW6a5rNm1kWNPzjg6szQ+ys0QVDdunCgyqVCUcU1ir+KUc+3GgKIlPYOxb6TpEn+PiPquqjxJ0NM5ZezN/FXTdSzNqUqwD9b83ZSum4Gi8y7NYy++9vdk5LaOP42xz+L3l3VtCGE1HXxhG+JfyPjhqHREdR1uSv+Oj56fwCOW+0Oio0XpwAAAABJRU5ErkJggg==');
    background-position: center right 16px;
    background-repeat: no-repeat;
    background-size: 14px 7px;
    border-radius: var(--border-radius-soft);
}

.select[multiple="multiple"] {
    background-image: none;
}

.input:hover, 
.textarea:hover, 
.select:hover {
    border: var(--border-size-s) solid var(--color-neutral-6);
}

.input:focus, 
.textarea:focus, 
.select:focus {
    border: var(--border-size-s) solid var(--color-primary);
}

.input.Not_Valid, 
.textarea.Not_Valid, 
.select.Not_Valid {
    border: var(--border-size-s) solid var(--color-error);
}

.input-small {
    height: 32px;
    padding: var(--space-none) var(--space-s);    
}

.input-large {
    height: 48px; 
}

::-webkit-input-placeholder { color: var(--color-neutral-7); }
::-moz-placeholder { color: var(--color-neutral-7); }
:-ms-input-placeholder { color: var(--color-neutral-7); }

select[disabled="disabled"] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAOCAYAAAA8E3wEAAAAAXNSR0IArs4c6QAAAb1JREFUOBGlU79Lw1AQfhcSipM6OTo5uQmJVaGtiNAqOGgd/AN0cLf+D7o76OhYddMGivQHqNgUN/8AR1dBpKTmed+DR9OQtMHecnl3931f7r07Emxuq/MspVwhonomZ2+tE/URn9QaUpq9tvfA3JvM/VLMO6sGSC3TPCAhPpHotbyLSYU0HlxKjLmhgbgS3Fhb+hCGsSNI/EghD92mV9Gg/3pwgAuc4FYaTMaNDazW6uxy4EZFiPaLOft2kE3/5ba9PSFlFQgpRLmUd+40WnWoD0hIolO+BpIyuGago3NpPTDAKg7mCouBY6hDTeo2O5e4DryrZVnL+jp0Psk/Pr3N+77/yl3NkaCrYsE5itYOdaiTmbx9jIkF0Pf79/Vud1rnkjxqUKvEMO3MEVcbK4i1mMnMlvkv37nTxd/voNrgEY8jQAw51KAWGGCTVitWECTZ7MKXZZnbuFZ+j5HrMjT+jAEWHHGWKIji6LrU2t5JlCRp/KN1+hw7NDqpfXjMRWhdkuIaF+dTCQKouguCMywykVFAjMe/yYs2xYtdKeXsc8TGWWpBEIXXBedR4498nI18wyggvC7jxj+K1ec/4MHct8w87wUAAAAASUVORK5CYII=')
}

.checkbox,
.radio-button,
.TableRecords .TableRecords_Header [type="checkbox"] {
    -webkit-appearance: none;    
       -moz-appearance: none;
            appearance: none;    
    cursor: pointer;
    height: 24px;
    position: relative;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 24px;
}

.checkbox:before,
.radio-button:before, 
.TableRecords .TableRecords_Header [type="checkbox"]:before {
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    content: '';
    display: block;
    height: 22px;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 22px;
}

.checkbox:before,
.TableRecords .TableRecords_Header [type="checkbox"]:before { 
    border-radius: var(--border-radius-soft); 
}

.radio-button:before { 
    border-radius: var(--border-radius-rounded); 
}

.checkbox:hover:before,
.radio-button:hover:before,
.TableRecords .TableRecords_Header [type="checkbox"]:hover:before {
    border: var(--border-size-s) solid var(--color-neutral-6);
}

.checkbox:focus:before,
.radio-button:focus:before,
.TableRecords .TableRecords_Header [type="checkbox"]:focus:before {
    box-shadow: 0 0 0 2px #a3daff;
}

.checkbox:checked:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:before {
    background-color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-primary);
}

.radio-button:checked:before {
    background-color: var(--color-neutral-0);
    border: 6px solid var(--color-primary);
    height: 12px;
    width: 12px;
}

.checkbox:checked:hover:before,
.radio-button:checked:hover:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:hover:before {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
}

.checkbox[disabled="disabled"],
.radio-button[disabled="disabled"],
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"] {
    background-color: transparent;
    border: none;
    pointer-events: none;
}

.checkbox[disabled="disabled"]:before,
.radio-button[disabled="disabled"]:before,
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"]:before {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.radio-button[disabled="disabled"]:checked:before {
    background-color: var(--color-neutral-2);
    border: 6px solid var(--color-neutral-4);
}

.checkbox:after,
.TableRecords .TableRecords_Header [type="checkbox"]:after {
    border: var(--border-size-l) solid var(--color-neutral-0);
    border-right: var(--border-size-none);
    border-top: var(--border-size-none);
    content: '';
    display: block;
    height: 4px;
    left: 5px;
    opacity: 0;
    position: absolute;
    top: 7px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 12px;
}

.checkbox:checked:after,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:after {
    opacity: 1;
}

.checkbox[disabled="disabled"]:after,
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"]:after {
    border: var(--border-size-m) solid var(--color-neutral-4);
    border-right: var(--border-size-none);
    border-top: var(--border-size-none);
}

.checkbox.Not_Valid:before,
.radio-button.Not_Valid:before,
.TableRecords .TableRecords_Header [type="checkbox"].Not_Valid:before {
    border: var(--border-size-m) solid var(--color-error);
    height: 20px;
    width: 20px;
}


/* $2.5 - HTML Elements - Buttons */
.Button,
.btn {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid currentColor;
    color: var(--color-primary);
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    font-weight: var(--font-semi-bold);
    height: 40px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin: 0;
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.Is_Default {
    background-color: var(--color-primary);
    border: var(--border-size-none);
    color: var(--color-neutral-0);
}

.Button[class*="background-"],
.btn[class*="background-"] {
    border: var(--border-size-none);
    color: var(--color-neutral-0);
}

.Button[class*="text-"],
.btn[class*="text-"] {
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid currentColor;
}

.Button + .Button {
    margin-left: 24px;
}

.Button .fa {
    width: auto;
}

.Button .fa:first-child {
    padding-right: var(--space-s);
}

.Button .fa:last-child {
    padding-left: var(--space-s);
}

.Button:focus {
    box-shadow: 0 0 0 2px #a3daff;
}

.Button:hover {
    box-shadow: var(--shadow-s);
    -webkit-filter: brightness(.95);
            filter: brightness(.95);
}

.Button:hover:active {
    box-shadow: var(--shadow-none);
    -webkit-filter: brightness(.90);
            filter: brightness(.90);
}

.Is_Default:hover {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
}

.Is_Default:hover:active {
    box-shadow: var(--shadow-none);
    -webkit-filter: brightness(.8);
            filter: brightness(.8);
}

.btn-large {
    font-size: var(--font-size-base);
    height: 48px;
}

.btn-small {
    font-size: var(--font-size-xs);
    height: 32px;
    padding: var(--space-none) var(--space-s);
}

/* Default Responsive */
.phone .btn,
.phone .Button {
    display: inline-flex;
    width: 100%;
    margin-left: 0;
}

.phone .btn +.btn,
.phone .Button + .Button {
    margin-top: var(--space-base);
}

.phone .btn.ThemeGrid_MarginGutter,
.phone .Button.ThemeGrid_MarginGutter {
    margin-left: var(--space-none);
}

.phone .Button + .Button {
    margin-left: 0;
}

/* Buttons in Internet Explorer and Edge */
.edge .Button,
.ie11 .Button,
.ie10 .Button,
.edge .btn,
.ie11 .btn,
.ie11 .btn {
    display: inline-block;
}

.edge a.Button,
.ie11 a.Button,
.ie10 a.Button,
.edge a.btn,
.ie11 a.btn,
.ie11 a.btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}


/* ================================================================ */
/*  $3 - Page Layout                                                */
/* ================================================================ */

html,
body,
form {
    height: 100%;
}

.layout {
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.layout.layout-top {
    -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;
}

.main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.layout .main {
    /* Space between the main content and the top of the screen, calculated automatically in the Layout JS */
    --header-gutter: var(--header-size);
    padding-top: var(--header-gutter);
}

.layout.layout-top .main {
    
}

.phone [class*="ThemeGrid_Width"]:not(.no-responsive) {
    margin: var(--space-none) var(--space-none) var(--space-base) var(--space-none);
    width: 100%;
}

.ie10 .layout,
.ie11 .layout {
    display: none;   
}

.ie10.ponyfill-ready .layout,
.ie11.ponyfill-ready .layout {
    display: block;   
}

/* ================================================================ */
/*  $3.1 - Page Layout - Header                                     */
/* ================================================================ */

.layout .header {
    background-color: var(--color-neutral-0);
    box-shadow: 0 1px 5px 0 rgba(21, 24, 26, .1);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

.layout.layout-top .header {
    
}

.desktop-hd .layout.layout-side .header {
    left: var(--side-menu-size);
}

.desktop-big .layout.layout-side .header {
    left: calc(var(--side-menu-size) - 20px);
}

.layout.layout-side .header {
    left: calc(var(--side-menu-size) - 40px);
}

.desktop-small .layout.layout-side .header {
    left: calc(var(--side-menu-size) - 60px);
}

.phone .layout.layout-side .header,
.tablet .layout.layout-side .header {
    left: 0;
}

.layout.layout-side .navigation {
    background-color: var(--color-neutral-0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: var(--side-menu-size);
    z-index: 101;
}

.desktop-hd .layout.layout-side .main {
    margin-left: var(--side-menu-size);
}

.desktop-big .layout.layout-side .main {
    margin-left: calc(var(--side-menu-size) - 20px);
}

.layout.layout-side .main {
    margin-left: calc(var(--side-menu-size) - 40px);
}

.desktop-small .layout.layout-side .main {
    margin-left: calc(var(--side-menu-size) - 60px);
}

.desktop-hd .layout.layout-side .navigation {
    width: var(--side-menu-size);
}

.desktop-big .layout.layout-side .navigation {
    width: calc(var(--side-menu-size) - 20px);
}

.layout.layout-side .navigation {
    width: calc(var(--side-menu-size) - 40px);
}

.desktop-small .layout.layout-side .navigation {
    width: calc(var(--side-menu-size) - 60px);
}

.phone .layout.layout-side .navigation,
.tablet .layout.layout-side .navigation {
    width: var(--side-menu-size);
}

.phone .layout.layout-side .main,
.tablet .layout.layout-side .main {
    margin-left: 0;
}

.navigation-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: var(--header-size);
    padding: var(--space-none) var(--space-m);
}

.navigation-menu {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    -webkit-overflow-scrolling: touch;
                    overflow-y: auto;
    padding: var(--space-s);
}

.navigation-bottom {
    padding: var(--space-m);
}


/* $3.1.1 - Page Layout - Header Top */
.header-top {
    height: var(--header-size);
}

.header-left {

}

.header-center {
    padding: var(--space-none) var(--space-xl);
}

.header-right {

}


/*  $3.1.2 - Page Layout - Header Content  */
.header-content {
    width: 100%;
}

.app-logo {
    border-radius: var(--border-radius-soft);
    height: 32px;
    margin-right: var(--space-s);
    width: 32px;
}

.menu-icon {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    color: var(--color-neutral-10);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-right: var(--space-m);
    width: 24px;
}

.menu-icon-line {
    background-color: var(--color-neutral-8);
    border-radius: 20px;
    height: 3px;
    margin: 2px 0;
    width: 100%;
}

/* ================================================================ */
/*  $3.2 - Page Layout - Menu                                       */
/* ================================================================ */

.Application_Menu {
    height: 100%;
    width: 100%;
}

.Menu_TopMenu {
    height: 100%;
    position: relative;
    cursor: pointer;
}

.navigation .Menu_DropDownButton {
    width: 100%;
}

.header .Menu_TopMenu {
    border-bottom: var(--border-size-m) solid transparent;
    border-top: var(--border-size-m) solid transparent;
    padding: var(--space-none) var(--space-s);
    -webkit-transition: all 150ms linear;
            transition: all 150ms linear;
}

.header .Menu_DropDownButton:not(:first-child) {
    margin-left: var(--space-base);
}

.header .Menu_TopMenu:hover,
.header .Menu_TopMenu.Menu_TopMenuActive {
    border-bottom: var(--border-size-m) solid var(--color-primary);
}

.navigation .Menu_TopMenu {
    border-radius: var(--border-radius-soft);
    height: 40px;
    margin-bottom: var(--space-xs);
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 200ms linear;
            transition: all 200ms linear;
}

.navigation .Menu_TopMenu:hover {
    background-color: var(--color-neutral-2);
}

.Menu_TopMenu:hover > div .fa,
.Menu_TopMenu:hover > div a,
.Menu_TopMenu:hover > div a:visited {
    color: var(--color-neutral-9);
}

.Menu_TopMenu:hover.Menu_TopMenuActive > div .Menu_DropDownArrow:before,
.Menu_TopMenu:hover.Menu_TopMenuActive > div .Menu_DropDownArrow:after,
.Menu_TopMenuActive > div .Menu_DropDownArrow:before,
.Menu_TopMenuActive > div .Menu_DropDownArrow:after {
    background-color: var(--color-primary);
}

.Menu_TopMenu:hover > div .Menu_DropDownArrow:before,
.Menu_TopMenu:hover > div .Menu_DropDownArrow:after {
    background-color: var(--color-neutral-9);
}

.navigation .Menu_TopMenu.Menu_TopMenuActive {
    background: var(--color-primary) var(--color-primary-lightest);
}

.navigation .Menu_TopMenu.Menu_TopMenuActive .fa {
    color: var(--color-primary);
}

.Menu_TopMenu .fa,
.Menu_DropDownPanel .fa {
    color: var(--color-neutral-6);
    font-size: var(--font-size-h6);
    margin-right: var(--space-s);
    margin-top: var(--space-xs);
    text-align: left;
    width: 20px;
}

.Menu_DropDownPanel {
    background-color: var(--color-neutral-0);
    border: var(--border-size-none);
    box-shadow: var(--shadow-none);
    padding-left: var(--space-base);
    z-index: initial;
}

.Menu_DropDownPanel a,
.Menu_DropDownPanel a:link,
.Menu_DropDownPanel a:visited {
    color: var(--color-neutral-8);
    font-size: var(--font-size-s);
    height: auto;
    line-height: 1.5;
    padding: var(--space-s) var(--space-base) var(--space-s) var(--space-l);
    white-space: pre-wrap;
}

.header .Menu_DropDownPanel a,
.header .Menu_DropDownPanel a:link,
.header .Menu_DropDownPanel a:visited {
    padding: var(--space-s) var(--space-base) var(--space-s) var(--space-base);
}

.Menu_DropDownPanel a:hover {
    color: var(--color-neutral-9);
}

.Menu_DropDownPanel a.Menu_SubMenuItemActive {
    color: var(--color-primary);
}

.navigation .Menu_DropDownPanel {
    margin: var(--space-none);
    padding: var(--space-none);
}

.Menu_TopMenu > div {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: var(--font-semi-bold);
    height: 100%;
}

.Menu_TopMenu > div a,
.Menu_TopMenu > div a:visited {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    color: var(--color-neutral-8);
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    font-weight: var(--font-regular);
    height: 100%;
}

.Menu_TopMenuActive > div a,
.Menu_TopMenuActive > div a:visited,
.Menu_TopMenuActive > div a:hover,
.Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: var(--color-primary);
    font-weight: var(--font-semi-bold);
}

.Menu_TopMenus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}

.navigation .Menu_TopMenus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
}

.ie10 .Menu_TopMenu > div a,
.ie11 .Menu_TopMenu > div a, 
.ie10 .Menu_TopMenu > div a:visited,
.ie11 .Menu_TopMenu > div a:visited {
    flex: none;
}

.header .Menu_DropDownPanel {
    border-radius: var(--space-xs);
    border: var(--border-size-s) solid var(--color-neutral-3);
    box-shadow: var(--shadow-m);
    height: auto;
    margin: var(--space-none);
    min-width: 140px;
    z-index: 250;
}

.Menu_DropDownArrow {
    border-top-color: var(--color-neutral-10);
    border-width: var(--border-size-none);
    display: block;
    font-size: 20px;
    height: 20px;
    line-height: 1;
    padding-top: var(--space-none);
    position: relative;
    right: 0;
    top: 0;
    width: 20px;
}

.Menu_DropDownArrow:before {
    content: '';
    height: 8px;
    left: 8px;
    position: absolute;
    top: 8px;
    background-color: var(--color-neutral-6);
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition: all 150ms linear;
            transition: all 150ms linear;
    width: 2px;
}

.Menu_DropDownArrow:after {
    background-color: var(--color-neutral-6);
    content: '';
    height: 8px;
    position: absolute;
    right: 0;
    top: 8px;
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: all 150ms linear;
            transition: all 150ms linear;
    width: 2px;
}

.Menu_DropDownButton.open .Menu_DropDownArrow:before{
    left: 12px;
}

.Menu_DropDownButton.open .Menu_DropDownArrow:after {
    right: 5px;
}

.Menu_DropDownPanel {
    position: relative;
}

.header .Menu_DropDownPanel {
    padding: var(--space-none);
    position: absolute;
}

.navigation .Menu_TopMenuActive+.Menu_DropDownPanel:not(:Empty) {
    display: block;
}


/* $3.2.1 - Responsive */
.phone .header .Menu_DropDownButton+.Menu_DropDownButton,
.tablet .header .Menu_DropDownButton+.Menu_DropDownButton {
    margin-left: var(--space-none);
}

.phone .header .Menu_DropDownPanel,
.tablet .header .Menu_DropDownPanel {
    border: var(--border-size-none);
    box-shadow: var(--shadow-none);
    margin: var(--space-none);
    padding: var(--space-base);
    position: relative;
}

.tablet .layout-top .Application_Menu,
.phone .layout-top .Application_Menu {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.tablet .layout-side .navigation,
.phone .layout-side .navigation,
.tablet .layout-top .Menu_TopMenus,
.phone .layout-top .Menu_TopMenus {
    position: fixed;
}

.tablet .layout-side .navigation:before,
.phone .layout-side .navigation:before {
    background-color: rgba(0, 0, 0, .1);
    content: '';
    height: 100%;
    left: var(--side-menu-size);
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    -webkit-transition: opacity 300ms ease-out;
            transition: opacity 300ms ease-out;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    width: 100vw;
}

.tablet .layout-side .navigation.is--visible:before,
.phone .layout-side .navigation.is--visible:before {
    opacity: 1;
    pointer-events: auto;
}

.tablet .layout.layout-top .Menu_TopMenus,
.phone .layout.layout-top .Menu_TopMenus {
    -webkit-overflow-scrolling: touch;
                    overflow-y: auto;
} 

.tablet .layout-top .Application_Menu.is--visible,
.phone .layout-top .Application_Menu.is--visible {
    pointer-events: auto;
}

.tablet .layout-top .Application_Menu:before,
.phone .layout-top .Application_Menu:before {
    background-color: rgba(0, 0, 0, .1);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 530ms ease-out;
            transition: opacity 530ms ease-out;
    width: 100%;
}

.tablet .layout-top .Application_Menu.is--visible:before,
.phone .layout-top .Application_Menu.is--visible:before {
    opacity: 1;
}

.tablet .header .Menu_TopMenu > div,
.phone .header .Menu_TopMenu > div {
    border-bottom: var(--border-size-none) solid transparent;
    border-left: var(--border-size-m) solid transparent;
    border-top: var(--border-size-none) solid transparent;
    padding: var(--space-base);
}

.phone .layout-side .header .Application_Menu,
.tablet .layout-side .header .Application_Menu {
    display: none;
}

.desktop .animate,
.desktop .navigation.animate {
    animation-name: initial;
}

.is--visible .Menu_TopMenus.enter-left,
.is--hidden .Menu_TopMenus.leave-left {
    animation-name: initial;
}


.tablet .layout-top .Menu_TopMenus,
.phone .layout-top .Menu_TopMenus,
.tablet .layout-side .navigation,
.phone .layout-side .navigation {
    background-color: var(--color-neutral-0);
    box-shadow: var(--shadow-xl);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    height: 100%;
    width: var(--side-menu-size);
    left: calc(0px - var(--side-menu-size));
    transform: translateX(0); 
    -webkit-transition: transform 430ms ease-out;
            transition: transform 430ms ease-out; 
}

.tablet .layout-top .is--visible .Menu_TopMenus,
.phone .layout-top .is--visible .Menu_TopMenus,
.tablet .layout-side .is--visible.navigation,
.phone .layout-side .is--visible.navigation  {
    transform: translateX(100%);    
}

.tablet .menu-icon,
.phone .menu-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.tablet .menu-icon {
    cursor: pointer;
}

.phone .header-right {
    display: none;
}

.desktop .Application_Menu .user-info,
.tablet .Application_Menu .user-info {
    display: none;
}

.phone .Menu_TopMenus .user-info {
    bottom: 10px;
    left: calc(var(--space-s) + var(--space-base));
    position: absolute;
}


/* ================================================================ */
/*  $3.3 - Page Layout - Content                                    */
/* ================================================================ */

.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    position: relative;
}

.main-content {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    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;
}

.content-top-title, 
.content-top-actions {
    flex-wrap: wrap;
}

.content-top-title > div:not([class*="ThemeGrid_Width"]), 
.content-top-actions > div:not([class*="ThemeGrid_Width"]) {
    width: 100%;
}

.layout-top .header .ThemeGrid_Container {
    margin: var(--space-none) auto;
    padding: var(--space-none) var(--space-xl);
    width: 100%;
}

.layout-top .content .ThemeGrid_Container {
    margin: var(--space-none) auto;
    padding: var(--space-xl);
    width: 100%;
}

.layout-top .content-bottom .ThemeGrid_Container {
    padding: var(--space-base) var(--space-xl);
    width: 100%;
}

.layout-side .header .ThemeGrid_Container {
    margin: var(--space-none) auto;
    padding: var(--space-none) var(--space-l);
    width: 100%;
}

.layout-side .content .ThemeGrid_Container {
    margin: var(--space-none) auto;
    padding: var(--space-l);
    width: 100%;
}

.ie10 .layout .content .ThemeGrid_Container,
.ie11 .layout .content .ThemeGrid_Container {
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
}

.ie10 .main-content,
.ie11 .main-content {
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
}

.layout-side .content-bottom .ThemeGrid_Container {
    padding: var(--space-base) var(--space-l);
    width: 100%;
}

.tablet .header .ThemeGrid_Container {
    padding: var(--space-none) var(--space-m);
}

.tablet .content .ThemeGrid_Container {
    padding: var(--space-m);
}

.ie10.tablet .content .ThemeGrid_Container,
.ie11.tablet .content .ThemeGrid_Container {
    width: 100%;
}

.tablet .content-bottom .ThemeGrid_Container {
    padding: var(--space-base) var(--space-m);
}

.phone .header .ThemeGrid_Container {
    padding: var(--space-none) var(--space-base);
}

.phone .content .ThemeGrid_Container {
    padding: var(--space-base);
}

.ie10.phone .content .ThemeGrid_Container,
.ie11.phone .content .ThemeGrid_Container {
    width: 100%;
}

.phone .content-bottom .ThemeGrid_Container {
    padding: var(--space-base);
}

.layout-top .website-section .ThemeGrid_Container {
    padding: 0 var(--space-xl);
}

.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%;
}

.phone .content-top-actions .btn:not(:last-child),
.phone .content-top-actions .Button:not(:last-child) {
    margin-bottom: var(--space-base);
}

.phone .content-top-actions .btn,
.phone .content-top-actions .Button {
    margin-left: var(--space-none);
}

/* ================================================================ */
/*  $4 - Patterns                                                   */
/* ================================================================ */

/* ================================================================ */
/*  $4.1 - Patterns - Content                                       */
/* ================================================================ */

/* $4.1.1 - Patterns - Content - Accordion */
.accordion {
    background-color: var(--color-neutral-0);
}

.accordion-item {
    border: var(--border-size-s) solid var(--color-neutral-4);
    border-bottom-width: var(--border-size-none);
}

.accordion-item:first-child {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.accordion-item:last-child {
    border-bottom-width: var(--border-size-s);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
}

.accordion-item.is--open {
    border-top: var(--border-size-m) solid var(--color-primary);
}

.accordion-item .accordion-item-header {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--font-size-h6);
    padding: var(--space-m);
}

.accordion-item.is--open .accordion-item-header {
    font-weight: var(--font-semi-bold);
}

.accordion-item .accordion-item-title {
    width: 100%;
}

.accordion-item .accordion-item-icon {
    color: var(--color-primary);
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.accordion-item .accordion-item-icon .fa {
    font-size: 24px;
    width: auto;
}

.accordion-item.is--open .accordion-item-icon {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.accordion-item.is--disabled {
    color: var(--color-neutral-7);
    pointer-events: none;
}

.accordion-item.is--disabled .accordion-item-icon {
    color: var(--color-neutral-6);
}

.accordion-item .accordion-item-content {
    display: block;
    overflow: hidden;
}

.accordion-item .accordion-item-content.is--animating.is--expanded {
    overflow: hidden;
}

.accordion-item .accordion-item-content.is--expanded {
    overflow: visible;
}

.accordion-item .accordion-item-content,
.accordion-item .accordion-item-content.is--collapsed {
    height: 0;
    padding: var(--space-none) var(--space-m);
    visibility: hidden;
}

.accordion-item .accordion-item-content.is--expanded {
    height: auto;
    padding: var(--space-none) var(--space-m) var(--space-m);
    visibility: visible;
}

.accordion-item .accordion-item-content.is--animating {
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}


/* $4.1.2 - Patterns - Content - Alert */
.alert {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    border-radius: var(--border-radius-soft);
    color: var(--color-neutral-0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: var(--space-base);
}

.alert-icon {
    -ms-flex-item-align: start;
             align-self: flex-start;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 24px;
    margin-right: var(--space-base);
}

.alert .fa-fw {
    width: auto;
}

.alert-message {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.alert-close {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 24px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-left: var(--space-base);
    margin-right: calc(-1 * var(--space-xs));
    width: 24px;
}

.alert.is--hidden,
.alert-close.is--hidden {
    display: none;
}


/* $4.1.3 - Patterns - Content - Balloon */
.balloon {
    
    
    
    
}

.only-balloon .tippy-popper {
    max-width:350px;
}

[data-balloon="balloon"] {
    cursor: pointer;
}

span[data-balloon="balloon"] {
    color: var(--color-primary);
}

.balloon-title {
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
    padding: var(--space-base);
}

.balloon-content {
    padding: var(--space-base);
}

.balloon-footer {
    border-top: var(--border-size-s) solid var(--color-neutral-4);
    padding: var(--space-base);
}

/* Fix to hide content on start */
.balloon-container {
    display: none;
}

.tippy-popper .balloon-container {
    display: block;
}

/* Tippy */
.tippy-iOS {
    cursor: pointer !important;
}

.tippy-notransition {
    transition: none !important;
}

.tippy-popper {
    pointer-events: none;
    line-height: 1.4; 
    outline: 0;
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    z-index: 9999;
}

.tippy-popper[x-placement^=top] .tippy-backdrop {
    border-radius: 40% 40% 0 0
}

.tippy-popper[x-placement^=top] .tippy-roundarrow {
    bottom: -8px;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
}

.tippy-popper[x-placement^=top] .tippy-roundarrow svg {
    left: 0;
    position: absolute;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.tippy-active {
    cursor: pointer;   
}

/* arrow */
.tippy-popper[x-placement^=top] .tippy-arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--color-neutral-9);
    bottom: -8px;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
}

.tippy-popper[x-placement^=top] .tippy-backdrop {
    -webkit-transform-origin: 0 25%;
            transform-origin: 0 25%;
}

.tippy-popper[x-placement^=top] .tippy-backdrop[data-state=visible] {
    opacity: 1;
    -webkit-transform: scale(1) translate(-50%, -55%);
            transform: scale(1) translate(-50%, -55%);
}

.tippy-popper[x-placement^=top] .tippy-backdrop[data-state=hidden] {
    opacity: 0;
    -webkit-transform: scale(.2) translate(-50%, -45%);
            transform: scale(.2) translate(-50%, -45%);
}

.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
}

.tippy-popper[x-placement^=top] [data-animation=perspective] {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
}

.tippy-popper[x-placement^=top] [data-animation=perspective][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateY(-10px) rotateX(0);
            transform: translateY(-10px) rotateX(0);
}

.tippy-popper[x-placement^=top] [data-animation=perspective][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateY(0) rotateX(60deg);
            transform: translateY(0) rotateX(60deg);
}

.tippy-popper[x-placement^=top] [data-animation=fade][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=fade][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.tippy-popper[x-placement^=top] [data-animation=scale][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateY(-10px) scale(1);
            transform: translateY(-10px) scale(1);
}

.tippy-popper[x-placement^=top] [data-animation=scale][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateY(0) scale(.5);
            transform: translateY(0) scale(.5);
}

.tippy-popper[x-placement^=bottom] .tippy-backdrop {
    border-radius: 0 0 30% 30%;
}

.tippy-popper[x-placement^=bottom] .tippy-roundarrow {
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    top: -8px;
}

.tippy-popper[x-placement^=bottom] .tippy-roundarrow svg {
    left: 0;
    position: absolute;
    -webkit-transform: rotate(0);
            transform: rotate(0);
}

.tippy-popper[x-placement^=bottom] .tippy-arrow {
    border-bottom: 8px solid var(--color-neutral-9);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    top: -8px;
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
}

.tippy-popper[x-placement^=bottom] .tippy-backdrop {
    -webkit-transform-origin: 0 -50%;
            transform-origin: 0 -50%;
}

.tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=visible] {
    opacity: 1;
    -webkit-transform: scale(1) translate(-50%, -45%);
            transform: scale(1) translate(-50%, -45%);
}

.tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=hidden] {
    opacity: 0;
    -webkit-transform: scale(.2) translate(-50%);
            transform: scale(.2) translate(-50%);
}

.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px)
}

.tippy-popper[x-placement^=bottom] [data-animation=perspective] {
    -webkit-transform-origin: top;
            transform-origin: top;
}

.tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateY(10px) rotateX(0);
            transform: translateY(10px) rotateX(0);
}

.tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateY(0) rotateX(-60deg);
            transform: translateY(0) rotateX(-60deg);
}

.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateY(10px) scale(1);
            transform: translateY(10px) scale(1);
}

.tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateY(0) scale(.5);
            transform: translateY(0) scale(.5);
}

.tippy-popper[x-placement^=left] .tippy-backdrop {
    border-radius: 50% 0 0 50%;
}

.tippy-popper[x-placement^=left] .tippy-roundarrow {
    right: -16px;
    -webkit-transform-origin: 33.33333333% 50%;
            transform-origin: 33.33333333% 50%;
}

.tippy-popper[x-placement^=left] .tippy-roundarrow svg {
    left: 0;
    position: absolute;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
}

.tippy-popper[x-placement^=left] .tippy-arrow {
    border-left: 8px solid var(--color-neutral-9);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    right: -8px;
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
}

.tippy-popper[x-placement^=left] .tippy-backdrop {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
}

.tippy-popper[x-placement^=left] .tippy-backdrop[data-state=visible] {
    opacity: 1;
    -webkit-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%);
}

.tippy-popper[x-placement^=left] .tippy-backdrop[data-state=hidden] {
    opacity: 0;
    -webkit-transform: scale(.2) translate(-75%, -50%);
            transform: scale(.2) translate(-75%, -50%);
}

.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
}

.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
}

.tippy-popper[x-placement^=left] [data-animation=perspective] {
    -webkit-transform-origin: right;
            transform-origin: right;
}

.tippy-popper[x-placement^=left] [data-animation=perspective][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateX(-10px) rotateY(0);
            transform: translateX(-10px) rotateY(0);
}

.tippy-popper[x-placement^=left] [data-animation=perspective][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateX(0) rotateY(-60deg);
            transform: translateX(0) rotateY(-60deg);
}

.tippy-popper[x-placement^=left] [data-animation=fade][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
}

.tippy-popper[x-placement^=left] [data-animation=fade][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
}

.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
}

.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.tippy-popper[x-placement^=left] [data-animation=scale][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateX(-10px) scale(1);
            transform: translateX(-10px) scale(1);
}

.tippy-popper[x-placement^=left] [data-animation=scale][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateX(0) scale(.5);
            transform: translateX(0) scale(.5);
}

.tippy-popper[x-placement^=right] .tippy-backdrop {
    border-radius: 0 50% 50% 0;
}

.tippy-popper[x-placement^=right] .tippy-roundarrow {
    left: -16px;
    -webkit-transform-origin: 66.66666666% 50%;
            transform-origin: 66.66666666% 50%;
}

.tippy-popper[x-placement^=right] .tippy-roundarrow svg {
    left: 0;
    position: absolute;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
}

.tippy-popper[x-placement^=right] .tippy-arrow {
    border-right: 8px solid var(--color-neutral-9);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    left: -7px;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
}

.tippy-popper[x-placement^=right] .tippy-backdrop {
    -webkit-transform-origin: -50% 0;
            transform-origin: -50% 0;
}

.tippy-popper[x-placement^=right] .tippy-backdrop[data-state=visible] {
    opacity: 1;
    -webkit-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%);
}

.tippy-popper[x-placement^=right] .tippy-backdrop[data-state=hidden] {
    opacity: 0;
    -webkit-transform: scale(.2) translate(-25%, -50%);
            transform: scale(.2) translate(-25%, -50%);
}

.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
}

.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
}

.tippy-popper[x-placement^=right] [data-animation=perspective] {
    -webkit-transform-origin: left;
        transform-origin: left;
}

.tippy-popper[x-placement^=right] [data-animation=perspective][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateX(10px) rotateY(0);
            transform: translateX(10px) rotateY(0);
}

.tippy-popper[x-placement^=right] [data-animation=perspective][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateX(0) rotateY(60deg);
            transform: translateX(0) rotateY(60deg);
}

.tippy-popper[x-placement^=right] [data-animation=fade][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
}

.tippy-popper[x-placement^=right] [data-animation=fade][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
}

.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
}

.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.tippy-popper[x-placement^=right] [data-animation=scale][data-state=visible] {
    opacity: 1;
    -webkit-transform: translateX(10px) scale(1);
            transform: translateX(10px) scale(1);
}

.tippy-popper[x-placement^=right] [data-animation=scale][data-state=hidden] {
    opacity: 0;
    -webkit-transform: translateX(0) scale(.5);
            transform: translateX(0) scale(.5);
}

.tippy-tooltip {
    background-color: #333;
    border-radius: 4px;
    color: #fff;
    font-size: .9rem;
    position: relative;
    will-change: transform;
}

.tippy-tooltip[data-size=small] {
    font-size: .75rem;
    padding: .2rem .4rem;
}

.tippy-tooltip[data-size=large] {
    font-size: 1rem;
    padding: .4rem .8rem;
}

.tippy-tooltip[data-animatefill] {
    background-color: transparent;
    overflow: hidden;
}

.tippy-tooltip[data-interactive],
.tippy-tooltip[data-interactive] path {
    pointer-events: auto;
}

.tippy-tooltip[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.53, 2, .36, .85);
}

.tippy-tooltip[data-inertia][data-state=hidden] {
    transition-timing-function: ease;
}

.tippy-arrow,
.tippy-roundarrow {
    height: 0;
    position: absolute;
    width: 0;
}

.tippy-roundarrow {
    fill: #333;
    height: 8px;
    pointer-events: none;
    width: 24px;
}

.tippy-backdrop {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    background-color: #333;
    border-radius: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: all cubic-bezier(.46, .1, .52, .98);
    width: calc(110% + 2rem);
    will-change: transform;
    z-index: -1;
}

.tippy-backdrop:after {
    content: "";
    float: left;
    padding-top: 100%;
}

.tippy-backdrop+.tippy-content {
    transition-property: opacity;
}

.tippy-backdrop+.tippy-content[data-state=visible] {
    opacity: 1;
}

.tippy-backdrop+.tippy-content[data-state=hidden] {
    opacity: 0;
}

@media (max-width:360px) {
    .tippy-popper {
        max-width: 96%;
        max-width: calc(100% - 20px);
    }
}

.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--color-neutral-4);
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme .tippy-arrow {
    border-bottom: 8px solid var(--color-neutral-4);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme .tippy-arrow {
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--color-neutral-4);
    border-top: 8px solid transparent;
}

.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow {
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--color-neutral-4);
    border-top: 8px solid transparent;
}

/* Arrow Fix for border */
.tippy-popper[x-placement^=bottom] .tippy-arrow:before,
.tippy-popper[x-placement^=top] .tippy-arrow:before, 
.tippy-popper[x-placement^=left] .tippy-arrow:before,
.tippy-popper[x-placement^=right] .tippy-arrow:before {
    content: " ";
    pointer-events: none;
    position: absolute;
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme .tippy-arrow:before {
    border-bottom: 8px solid var(--color-neutral-0);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    margin-left: -8px;
    top: 1px;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow:before {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--color-neutral-0);
    margin-left: -8px;
    top: -9px;
}

.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme .tippy-arrow:before {
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--color-neutral-0);
    border-top: 8px solid transparent;
    margin-top: -8px;
    right: 1px;
}

.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow:before {
    margin-top: -8px;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--color-neutral-0);
    border-top: 8px solid transparent;
}

/* Light Theme */
.tippy-tooltip.light-theme {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    box-shadow: var(--shadow-s);
    color: var(--color-neutral-9);
}

.tippy-tooltip.light-theme .tippy-backdrop {
    background-color: #fff;
}

.tippy-tooltip.light-theme .tippy-roundarrow {
    fill: #fff;
}


/* $4.1.4 - Patterns - Content - BlankSlate */
.blank-slate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.blank-slate-content {
    position: relative;
    text-align: center;
    z-index: 1;
 }


/* $4.1.5 - Patterns - Content - Bullets */
ol.bullets,
ul.bullets {
    margin-bottom: var(--space-none);
    margin-top: var(--space-none);
    padding-left: var(--space-m);
}

ol.bullets li:not(:last-child),
ul.bullets li:not(:last-child) {
    margin-bottom: var(--space-s);
}


/* $4.1.6 - Patterns - Content - Card */
.card {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    padding: var(--space-m);
}


/* $4.1.7 - Patterns - Content - CardBackground */
.card-background {
    color: var(--color-neutral-0);
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    height: 100%;
    overflow: hidden;
    padding: var(--space-m);
    position: relative;
}

.card-background-content {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    position: relative;
    width: 100%;
    z-index: 1;
}

.card-background-content.top-left,
.card-background-content.center-left,
.card-background-content.bottom-left {
    text-align: left;
}

.card-background-content.top-center,
.card-background-content.center,
.card-background-content.bottom-center {
    text-align: center;
}

.card-background-content.top-right,
.card-background-content.center-right,
.card-background-content.bottom-right {
    text-align: right;
}

.card-background-image,
.card-background-color {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.card-background-color {
    opacity: .6;
}

.card-background-color:after {
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    content: '';
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.card-background-image img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
    width: 100%;
}

.card-background-ie .card-background-image {
    background-size: cover;
}

.card-background-ie .card-background-image img {
    display: none;
}


/* $4.1.8 - Patterns - Content - CardSectioned */
.card-sectioned {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
    padding: var(--space-none);
}

.card-image {
    padding: var(--space-m) var(--space-m) var(--space-none);
}

.ie10 .card-image,
.ie11 .card-image {
    height: auto;
    width: 100%;
}

.card-image img {
    display: block;
    margin: 0 auto;
}

.card-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-semi-bold);
    padding: var(--space-m) var(--space-m) var(--space-none) var(--space-m);
}

.card-sectioned.flex-direction-row .card-image {
    padding: var(--space-m) var(--space-none) var(--space-m) var(--space-m);
}

.card-sectioned.flex-direction-row .card-image.padding-none {
    padding: var(--space-none);
}

.card-content {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    padding: var(--space-m);
}

.ie10 .card-content,
.ie11 .card-content {
    flex: none;
}

.card-footer {
    padding: var(--space-none) var(--space-m) var(--space-m);
}

.card-sectioned-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.card-sectioned.flex-direction-row.card-sectioned-right .card-image {
    -webkit-box-ordinal-group: 3;
               -ms-flex-order: 2;
                        order: 2;
    padding: var(--space-m) var(--space-m) var(--space-m) var(--space-none);
}

.card-sectioned.flex-direction-row.card-sectioned-right .card-image.padding-none {
    padding: var(--space-none);
}

.ie10 .card-sectioned-top.flex-direction-column,
.ie11 .card-sectioned-top.flex-direction-column {
    flex: none;
}

.ie10 .flex-direction-row .card-sectioned-top.flex-direction-column,
.ie11 .flex-direction-row .card-sectioned-top.flex-direction-column {
    flex: 1;
}

.ie10 .card-sectioned.flex-direction-row,
.ie11 .card-sectioned.flex-direction-row {
    -webkit-box-pack: start;
       -ms-flex-pack: start;
     justify-content: flex-start;
}

.ie10 .card-sectioned.flex-direction-row .card-image,
.ie11 .card-sectioned.flex-direction-row .card-image {
   width: auto;
}


/* $4.1.9 - Patterns - Content - Carousel */
.carousel {
    position: relative;
    -webkit-transition: opacity 330ms ease;
            transition: opacity 330ms ease;
}

.carousel.is--hidden {
    opacity: 0;
    
}

.carousel .tns-outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
    -ms-flex-direction:column-reverse;
    flex-direction:column-reverse;
    width: 100%;
}

.carousel .tns-ovh {
    position: relative;
}

.carousel .tns-item {
    cursor: -webkit-grab;
}

.carousel .tns-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: var(--space-m);
}

.carousel .tns-nav button {
    cursor: pointer;
}

.carousel .carousel-navigation {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.carousel .carousel-arrow-left,
.carousel .carousel-arrow-right {
    position: absolute;
    background:  var(--color-neutral-0);
    border-radius: 50%;
    cursor: pointer;
    height: 40px;
    width: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:  center;
    -ms-flex-pack:  center;
    justify-content:  center;
    -webkit-box-align:  center;
    -ms-flex-align:  center;
    align-items:  center;
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);
    color: var(--color-neutral-7);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.carousel .carousel-arrow-left:hover,
.carousel .carousel-arrow-right:hover {
    color: var(--color-neutral-9);
}

.carousel .carousel-arrow-left {
    left: 0;
}

.carousel .carousel-arrow-right {
    right: 0;
}

.carousel .carousel-navigation.carousel-padding-none .carousel-arrow-left {
    left: 24px;
}

.carousel .carousel-navigation.carousel-padding-none .carousel-arrow-right {
    right: 24px;
}

.carousel .carousel-arrow-left .fa-fw,
.carousel .carousel-arrow-right .fa-fw {
    font-size: 24px;
}

.carousel .carousel-arrow-left .fa-fw {
    margin: -2px 0 0 -2px;
}

.carousel .carousel-arrow-right .fa-fw {
    margin: -2px -2px 0 0;
}

/* Library CSS */
.carousel img:not(.tns-lazy-img),
.carousel .lazyload img {
    height: auto;
}
.carousel [class*="autoWidth"] img {
    max-width: none;
}

.carousel .img {
    font-size: 100px;
    font-weight: 100;
    color: #fff;
    text-align: center;
}

.carousel .visually-hidden {
    position: fixed;
    left: -10000px;
    opacity: 0;
}

/* nav */
.carousel .nav.active ul {
    left: 0;
}

.carousel .nav.active .nav-toggle-handle {
    left: 17em;
}

.carousel .nav.active .nav-toggle-handle:before {
    display: inline-block;
}

.carousel .nav.active .nav-toggle-handle:after {
    display: none;
}

.carousel .nav ul {
    position: fixed;
    top: 0;
    left: -17em;
    z-index: 100;
    width: 17em;
    height: 1000px;
    height: 100vh;
    background-color: #fff;
    -webkit-box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
    transition: left 0.25s;
    overflow-y: auto;
}

.carousel .nav a {
    display: block;
    padding: 0.7em 1em;
    color: inherit;
    text-decoration: none;
}

.carousel .nav a:hover {
    background-color: #F3F3F3;
}

.carousel .nav .active {
    color: #fff;
    background-color: #af23ff !important;
}

.carousel .nav-toggle-handle {
    position: fixed;
    transition: left 0.25s;
    left: 0;
    top: 0;
    z-index: 100;
    padding: 10px;
    color: #fff;
    background-color: #af23ff;
    cursor: pointer;
}

.carousel .nav-toggle-handle:before { 
    display: none;
    padding-right: 5px;
    content: 'â—„'; 
    font-size: 0.8em;
}

.carousel .nav-toggle-handle:after { 
    padding-left: 5px;
    content: 'â–º'; 
    font-size: 0.8em;
}

.carousel .customize-tools {
    position: relative;
}

.carousel .thumbnails { 
    margin: 20px 0;
    text-align: center;
}

.carousel .thumbnails li {
    display: inline-block;
    cursor: pointer;
    border: 5px solid #fff;
}

.carousel .thumbnails [aria-selected="true"] {
    background: none;
    border-color: #000;
}

.carousel .thumbnails li {
    width: 50px;
}

.carousel .thumbnails img {
    vertical-align: bottom;
    height: auto;
    max-height: 50px;
}

.carousel .controls {
    text-align: center;
}

.carousel .controls li {
    display: block;
    position: absolute;
    top: 50%;
    height: 60px;
    line-height: 60px;
    margin-top: -30px;
    padding: 0 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.carousel .controls li img {
    display: inline-block;
    vertical-align: middle;
}

.carousel .controls .prev {
    left: 0;
}

.carousel .controls .next {
    right: 0;
}

.carousel .controls li:hover {
    background: #f2f2f2;
}

.carousel .tns-controls {
    text-align: center;
    margin-bottom: 10px;
}

.carousel .tns-controls [aria-controls] {
    font-size: 15px;
    margin: 0 5px;
    padding: 0 1em;
    height: 2.5em;
    color: #000;
    background: #66CCFF;
    border-radius: 3px;
    border: 0;
}

.carousel .lt-ie9 .tns-controls > [aria-controls] {
    line-height: 2.5em;
}

.carousel [data-action] {
    display: block;
    margin: 10px auto;
    font-size: 17px;
    min-width: 3em;
    text-align: center;
    background: transparent;
    border: 0;
}

.carousel .tns-controls [disabled] { 
    color: #999999;
    background: #B3B3B3; 
    cursor: not-allowed !important;
}

.carousel .tns-nav > [aria-controls] {
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--color-neutral-5);
    border: 0;
}

.carousel .tns-nav > [aria-selected="true"] {
    background: var(--color-primary);
}

.carousel .playbutton-wrapper {
    text-align: center;
}

.carousel .playbutton-wrapper button {
    height: 34px;
    padding: 0 10px;
    font-size: 14px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid  #ccc;
    cursor: pointer;
}

.carousel .wrapper {
    padding: 0 5em;
}

.carousel .suite-container .title, 
.carousel .suite-container .subtitle, 
.carousel .suite-container li {
    padding: 5px 10px;
}

.carousel .suite-container li {
    font-size: 12px;
    line-height: 1.4;
    background: #f5f5f5;
}
.carousel .suite-container .title {
    font-size: 14px;
    font-weight: bold;
    background: #8acac6;
    text-transform: capitalize;
}

.carousel .suite-container .subtitle {
    font-size: 13px;
    font-weight: bold;
    background: #dedede;
    text-transform: capitalize;
}

.carousel .suite-container .fail {
    background: #FFADE2;
}

.carousel [class*="vertical"] .img {
    padding: 30px 0;
}

.carousel [class*="vertical"] .img:before {
    content: '';
    display: inline-block;
    width: 1px;
    margin-right: -1px;
    height: 100%;
    vertical-align: middle;
}

.carousel [class*="vertical"] .img a {
    display: inline-block;
    padding: 0;
}
.carousel [class*="vertical"] .img-1 { height: 137px; }
.carousel [class*="vertical"] .img-2 { height: 122px; }
.carousel [class*="vertical"] .img-3 { height: 143px; }
.carousel [class*="vertical"] .img-4 { height: 325px; }
.carousel [class*="vertical"] .img-5 { height: 140px; }
.carousel [class*="vertical"] .img-6 { height: 119px; }
.carousel [class*="vertical"] .img-7 { height: 223px; }
.carousel [class*="vertical"] .img-8 { height: 164px; }

/* https://daneden.github.io/animate.css/ */
@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center;
}

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}

/*########## tny slider css ##########*/
.carousel .tns-outer {
    padding: 0 !important;
}

.carousel .tns-outer [hidden] {
    display: none !important;
}

.carousel .tns-outer [aria-controls], .carousel .tns-outer [data-action] {
    cursor: pointer;
}

.carousel .tns-slider {
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
}

.carousel .tns-slider > .tns-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.carousel .tns-horizontal.tns-subpixel > .tns-item {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}

.carousel .tns-horizontal.tns-no-subpixel:after {
    content: '';
    display: table;
    clear: both;
}

.carousel .tns-horizontal.tns-no-subpixel > .tns-item {
    float: left;
    margin-right: -100%;
}

.carousel .tns-no-calc {
    position: relative;
    left: 0;
}

.carousel .tns-gallery {
    position: relative;
    left: 0;
    min-height: 1px;
}

.carousel .tns-gallery > .tns-item {
    position: absolute;
    left: -100%;
    -webkit-transition: transform 0s, opacity 0s;
    -moz-transition: transform 0s, opacity 0s;
    transition: transform 0s, opacity 0s;
}

.carousel .tns-gallery > .tns-slide-active {
    position: relative;
    left: unset !important;
}

.carousel .tns-gallery > .tns-moving {
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
}

.carousel .tns-lazy-img {
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
    opacity: 0.6;
}

.carousel .tns-lazy-img.loaded {
    opacity: 1;
}

.carousel .tns-ah {
    -webkit-transition: height 0s;
    -moz-transition: height 0s;
    transition: height 0s;
}

.carousel .tns-ovh {
    overflow: hidden;
}

.carousel .tns-visually-hidden {
    position: absolute;
    left: -10000em;
}

.carousel .tns-transparent {
    opacity: 0;
    visibility: hidden;
}

.carousel .tns-fadeIn {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 0;
}

.carousel .tns-normal, .carousel .tns-fadeOut {
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: -1;
}


/* $4.1.10 - Patterns - Content - ChatMessage */
.chat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.chat + .chat {
    margin-top: var(--space-base);
}

.chat-photo {
    margin-right: var(--space-base);
}

.chat.is-right .chat-photo {
    margin-left: var(--space-base);
    margin-right: var(--space-none);
}

.chat.is-right {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.chat .chat-message-content {
    border-radius: var(--border-radius-soft);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 600px;
    padding: var(--space-base);
    position: relative;
    word-break: break-word;
}

.chat.is-right .chat-message-content {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.chat-message-name {
    margin-bottom: var(--space-s);
}

.chat-message-actions {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);  
}

.chat-message-actions.is--hidden {
    display: none;
}

.chat.is-inline .chat-message-content {
    background-color: transparent;
    cursor: initial;
    padding: 0;
}

.phone .chat-message {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.phone .chat-message-content {
    width: 100%;
}

/* $4.1.11 - Patterns - Content - LightBoxImage */
.lightbox figure {
    margin: 0;
    padding: 0;
}

.lightbox-content-thumbnail {
    width: 100%;
}

/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
    Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none;
  z-index: 500; }
  .pswp * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .pswp img {
    max-width: none; }

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--open {
  display: block; }

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab; }

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing; }

/*
    Background is added as a separate element.
    As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  will-change: opacity; }

.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.pswp__container,
.pswp__zoom-wrap {
  -ms-touch-action: none;
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; }

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  /* for open/close transition */
  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1), -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  -webkit-transition: none;
  transition: none; }

.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden;
  will-change: transform; }

.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden; }

.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0; }

/*
    stretched thumbnail or div placeholder element (see below)
    style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
  -webkit-backface-visibility: hidden; }

/*
    div element that matches size of large image
    large image loads on top of it
*/
.pswp__img--placeholder--blank {
  /*background: #222;*/
}

.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0; }

/*
    Error message appears when image is not loaded
    (JS option errorMsg controls markup)
*/
.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #CCC; }

.pswp__error-msg a {
  color: #CCC;
  text-decoration: underline; }


/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*

    Contents:

    1. Buttons
    2. Share modal and links
    3. Index indicator ("1 of X" counter)
    4. Caption
    5. Loading indicator
    6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*
    
    1. Buttons

 */
/* <button> css reset */
.pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  -webkit-transition: opacity 0.2s;
          transition: opacity 0.2s;
  -webkit-box-shadow: none;
          box-shadow: none; }
  .pswp__button:focus,
  .pswp__button:hover {
    opacity: 1; }
  .pswp__button:active {
    outline: none;
    opacity: 0.9; }
  .pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0; }

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
  opacity: 1; }

.pswp__button {
  background: url(/WebPatterns/img/PhotoswipeSkin.png?18249&18249&18397&559) 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px; }

.pswp__button--close {
  background-position: 0 -44px; }

.pswp__button--share {
  background-position: -44px -44px; }

.pswp__button--fs {
  display: none; }

.pswp--supports-fs .pswp__button--fs {
  display: block; }

.pswp--fs .pswp__button--fs {
  background-position: -44px 0; }

.pswp__button--zoom {
  display: none;
  background-position: -88px 0; }

.pswp--zoom-allowed .pswp__button--zoom {
  display: block; }

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0; }

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden; }

/*
    Arrow buttons hit area
    (icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  top: 50%;
  position: absolute;
  width: 40px;
  height: 40px;
  background: var(--color-neutral-9);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--color-neutral-5);
  -webkit-box-shadow: var(--shadow-xs);
          box-shadow: var(--shadow-xs);
  }

.pswp__button--arrow--left {
  left: 24px;
  }

.pswp__button--arrow--right {
  right: 24px;
  }

.pswp__button--arrow--left:hover,
.pswp__button--arrow--right:hover {
    color: var(--color-neutral-7);
}

.pswp__button--arrow--left .fa-fw,
.pswp__button--arrow--right .fa-fw {
    font-size: 24px;
    pointer-events: none;
}

.pswp__button--arrow--left .fa-fw {
    margin: -2px 0 0 -2px;
}

.pswp__button--arrow--right .fa-fw {
    margin: -2px -2px 0 0;
}

/*

    2. Share modal/popup and links

 */
.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none; }

.pswp__share-modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
          transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity; }

.pswp__share-modal--hidden {
  display: none; }

.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #FFF;
  top: 56px;
  border-radius: 2px;
  display: block;
  width: auto;
  right: 44px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  -webkit-transition: -webkit-transform 0.25s;
          transition: -webkit-transform 0.25s;
          transition: transform 0.25s;
          transition: transform 0.25s, -webkit-transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform; }
  .pswp__share-tooltip a {
    display: block;
    padding: 8px 12px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px; }
    .pswp__share-tooltip a:hover {
      text-decoration: none;
      color: #000; }
    .pswp__share-tooltip a:first-child {
      /* round corners on the first/last list item */
      border-radius: 2px 2px 0 0; }
    .pswp__share-tooltip a:last-child {
      border-radius: 0 0 2px 2px; }

.pswp__share-modal--fade-in {
  opacity: 1; }
  .pswp__share-modal--fade-in .pswp__share-tooltip {
    -webkit-transform: translateY(0);
            transform: translateY(0); }

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px; }

a.pswp__share--facebook:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid transparent;
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none; }

a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF; }
  a.pswp__share--facebook:hover:before {
    border-bottom-color: #3E5C9A; }

a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF; }

a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D; }

a.pswp__share--download:hover {
  background: #DDD; }

/*

    3. Index indicator ("1 of X" counter)

 */
.pswp__counter {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  font-size: var(--font-size-s);
  line-height: 44px;
  color: #FFF;
  opacity: 0.75;
  padding: 0 10px;
  }

/*
    
    4. Caption

 */
.pswp__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px; }
  .pswp__caption small {
    font-size: 11px;
    color: #BBB; }

.pswp__caption__center {
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  font-size: var(--font-size-base);
  padding: 10px;
  line-height: 20px;
  color: #CCC;
  font-weight: var(--font-semi-bold);
  }

.pswp__caption--empty {
  display: none; }

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
  visibility: hidden; }

/*

    5. Loading indicator (preloader)

    You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.pswp__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
          transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr; }

.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px; }

.pswp__preloader--active {
  opacity: 1; }
  .pswp__preloader--active .pswp__preloader__icn {
    /* We use .gif in browsers that don't support CSS animation */
    background: url(/WebPatterns/img/PhotoswipePreloader.gif?18249&18249&18397&559) 0 0 no-repeat; }

.pswp--css_animation .pswp__preloader--active {
  opacity: 1; }
  .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
    -webkit-animation: clockwise 500ms linear infinite;
            animation: clockwise 500ms linear infinite; }
  .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
    -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
            animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }

.pswp--css_animation .pswp__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0; }

.pswp--css_animation .pswp__preloader__cut {
  /* 
            The idea of animating inner circle is based on Polymer ("material") loading indicator 
             by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
        */
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden; }

.pswp--css_animation .pswp__preloader__donut {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #FFF;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0; }

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right; } }

@-webkit-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@-webkit-keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    -webkit-transform: rotate(-140deg);
            transform: rotate(-140deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

@keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    -webkit-transform: rotate(-140deg);
            transform: rotate(-140deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

/*
    
    6. Additional styles

 */
/* root element of UI */
.pswp__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550; }

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%; }

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible; }

.pswp__top-bar,
.pswp__caption {
  background-color: rgba(0, 0, 0, 0.5); }

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: rgba(0, 0, 0, 0.3); }

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
  opacity: 0; }

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0; }

/*
    pswp__ui--hidden class is added when controls are hidden
    e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001; }

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none; }

.pswp__element--disabled {
  display: none !important; }

.pswp--minimal--dark .pswp__top-bar {
  background: none; }
  
[data-size] + figcaption {
    display: none; }


/* $4.1.12 - Patterns - Content - Modal */
.modal {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    height: 100%;
    left: 0;
    opacity: 0;
    padding: var(--space-l);
    pointer-events: none;
    position: fixed;
    top: 0;
    -webkit-transition: opacity 330ms ease;
            transition: opacity 330ms ease;
    width: 100%;
    z-index: 102;
    
    
    
    
}

.modal .animate {
    -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
}

.modal.is--visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-overlay {
    background-color: rgba(0, 0, 0, .25);
 }

.modal-wrapper {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-xl);
    max-height: 100%;
    max-width: 500px;
    width: 100%;
    
}

.modal-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: var(--space-m) var(--space-m) var(--space-none);
}

.modal-title {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.modal-close a, 
.modal-close a:visited {
    color: var(--color-neutral-8);
}

.modal-close a:hover {
    color: var(--color-neutral-9);
}

.modal-content {
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-m);
    
}

.modal-content .choices__list--dropdown {
    margin-bottom: var(--space-m);
}

.modal-content .choices__list--dropdown .choices__list {
    max-height: 200px;
}

.modal-footer {
    border-top: var(--border-size-s) solid var(--color-neutral-4);
    padding: var(--space-m);
}


/* $4.1.13 - Patterns - Content - Panel */
.panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    padding: var(--space-none);
}

.panel-header {
    -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;
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
}

.panel-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-semi-bold);
    padding: var(--space-m) var(--space-m) var(--space-none) var(--space-m);
}

.panel-actions {
    text-align: right;
    padding: var(--space-m) var(--space-m) var(--space-none) var(--space-m);
}

.panel-content {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    padding: var(--space-m);
}

.ie10 .panel-content,
.ie11 .panel-content {
    flex: none;
}

.panel-footer {
    -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;
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
    justify-content: space-between;
    padding: var(--space-none) var(--space-m) var(--space-m);
}


/* $4.1.14 - Patterns - Content - Section */
.section {
    position: relative;
}

.section-header {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
    padding-bottom: var(--space-s);
}

.section-title {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    font-size: var(--font-size-h2);
    font-weight: var(--font-semi-bold);
}

.section-actions {
    margin-left: var(--space-xs);
}

.section-content {
    padding-top: var(--space-s);
}


/* $4.1.15 - Patterns - Content - Tag */
.tag {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: var(--font-semi-bold);
    height: 32px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    line-height: 1;
    min-width: 32px;
    padding: var(--space-none) var(--space-base);
    word-break: normal;
}

.tag.tag-small {
    font-size: var(--font-size-xs);
    height: 24px;
    padding: var(--space-none) var(--space-s);
}

.tag.tag-medium {
    font-size: var(--font-size-base);
    height: 40px;
    padding: var(--space-none) var(--space-m);
}

.tag.background-neutral-0,
.tag.background-neutral-1,
.tag.background-neutral-2,
.tag.background-neutral-3,
.tag.background-neutral-4 {
    color: var(--color-neutral-9);  
}

.tag-content:empty { 
    
}

/* $4.1.16 - Patterns - Content - Tooltip */
.tooltip {
    background-color: var(--color-neutral-9);
    border-radius: var(--border-radius-soft);
    color: var(--color-neutral-0);
    padding: var(--space-xs) var(--space-s);
    text-align: center;
    z-index: 50;
}

.tooltip:empty {
    
}

/* Fix to get the tooltip to not render on refresh */
.tooltip {
    display: none;
}

.tippy-popper .tooltip {
    display: block;
}


/* ================================================================ */
/*  $4.2 - Patterns - Controls                                      */
/* ================================================================ */

/* $4.2.1 - Patterns - Controls - AnimatedLabel */
.animated-label {
    position: relative;
    display: block;
}

.animated-label-text {
    color: var(--color-neutral-8);
    left: 16px;
    pointer-events: none;
    position: absolute;
    top: 15px;
    -webkit-transition: all 300ms ease;
            transition: all 300ms ease;            
    
    
}

.animated-label.active .animated-label-text {
    font-size: var(--font-size-xs);
    top: 4px;
}

.animated-label-input .input,
.layout .Form .animated-label-input .input.Not_Valid {
    height: auto;
    padding: var(--space-m) var(--space-base) var(--space-s) var(--space-base);
}

.animated-label-inline .input,
.layout .Form .animated-label-inline .input.ReadOnly:not(.Not_Valid) {
    background-color: transparent;
    border-left: 0;
    border-radius: var(--border-radius-none);
    border-right: 0;
    border-top: 0;
    padding: var(--space-m) var(--space-none) var(--space-xs) var(--space-none);
}

.animated-label-inline .animated-label-text {
    left: 0;
}

.layout .Form .animated-label-inline .input.ReadOnly:not(.Not_Valid):hover {
    border-left: 0;
    border-radius: var(--border-radius-none);
    border-right: 0;
    border-top: 0;    
}

.animated-label-inline .input:hover,
.layout .Form .animated-label-inline .input.ReadOnly:not(.Not_Valid):hover {
    border: 0;
    border-bottom: var(--border-size-s) solid var(--color-neutral-6);
} 

.animated-label-inline .input:focus,
.layout .Form .animated-label-inline .input.ReadOnly:not(.Not_Valid):focus {
    border: 0;
    border-bottom: var(--border-size-s) solid var(--color-primary);
} 

.animated-label-inline .input.Not_Valid,
.layout .Form .animated-label-inline .input.Not_Valid {
    border: 0;
    border-bottom: var(--border-size-s) solid var(--color-error);
    padding-left: var(--space-none);
}

.animated-label-inline .input.Not_Valid:hover,
.animated-label-inline .input.Not_Valid:focus {
    border: 0;
    border-bottom: var(--border-size-s) solid var(--color-error);
} 

.animated-label input:-webkit-autofill {
   animation-name: onAutoFillStart;
   -webkit-animation-name: onAutoFillStart;

   transition: background-color 10000s ease-in-out 0s;
}

.animated-label input:not(:-webkit-autofill) {
   animation-name: onAutoFillCancel;
   -webkit-animation-name: onAutoFillCancel;
}

@-webkit-keyframes onAutoFillStart {  from {/**/}  to {/**/}}
@-webkit-keyframes onAutoFillCancel {  from {/**/}  to {/**/}}
@keyframes onAutoFillStart {  from {/**/}  to {/**/}}
@keyframes onAutoFillCancel {  from {/**/}  to {/**/}}


/* $4.2.2 - Patterns - Controls - ButtonGroup */
.button-group {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.button-group.justified,
.button-group.justified .ListRecords {
    width: 100%
}

.button-group .ListRecords {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.button-group label {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    position: relative;
    word-break: normal;
}

/* Enable a label to be used inside button group */
.button-group label > label {
   pointer-events: none;
}

.button-group .btn {
    border-radius: var(--border-radius-none);
    border: var(--border-size-s) solid var(--color-primary);
    color: var(--color-primary);
    display: inline-flex;
    white-space: nowrap;
    width: 100%;
    
}

.Form .button-group .btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.button-group label:first-child .btn {
    border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
}

.button-group label:last-child .btn {
    border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
}

.button-group label .btn {
    text-align: center;
}

.button-group label:not(:first-child) .btn {
    border-left: var(--border-size-none);
}

.button-group input[type="radio"] {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    
    
    
    
    
    
}

.button-group input[type="radio"]:checked + .btn {
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}

.phone .button-group label {
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    width: 100%; 
}

.phone .button-group label .btn:not(:first-child) {
    border-left: 1px solid var(--color-primary); 
}

.phone .button-group label:not(:first-of-type) .btn {
    border-top: none;
}

.phone .button-group label:first-child .btn {
    border-radius: var(--space-none);
    border-top-left-radius: var(--border-radius-soft);
    border-top-right-radius: var(--border-radius-soft);
}

.phone .button-group label:last-child .btn {
    border-radius: var(--space-none);
    border-bottom-left-radius: var(--border-radius-soft);
    border-bottom-right-radius: var(--border-radius-soft);
}

.phone .button-group,
.phone .button-group .ListRecords {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
}

.ie10 :not(.justified).button-group label {
    display: table-cell;
}

.ie10 .button-group:not(.justified) label,
.ie11 .button-group:not(.justified) label {
    flex: none;
}

.Form.form-top .button-group label {
    padding-bottom: 0;
}

/* ButtonGroup Service Studio Styles */
.button-group > div,
.button-group .ListRecords > div{
    
    
}

.button-group > div:first-child .btn {
    
}

.button-group > div:last-child .btn {
    
}

.button-group > div:not(:first-child) .btn {
    
}

.button-group .radio-button:before {
    
    
}

/* $4.2.3 - Patterns - Controls - DatePicker */
.pika-single {
    background: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    display: block;
    margin-top: var(--space-xs);
    position: relative;
    width: 300px;
}

.pika-single.is-bound {
    box-shadow: var(--shadow-s);
    position: absolute;
    z-index: 151;
}

.pika-single.is-hidden {
    display: none;
}

.pika-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;    
    -webkit-box-pack: justify;    
       -ms-flex-pack: justify;    
     justify-content: space-between;
    padding: var(--space-m) var(--space-base) var(--space-m) var(--space-m);
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
}

.pika-labels {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.year-first .pika-select-month {
    margin-left: var(--space-base);
    margin-right: 0;
}

.pika-select-month {
    margin-right: var(--space-base);
}

.pika-prev,
.pika-next {
    background-color: transparent;
    border: var(--border-size-none);
    color: var(--color-neutral-7);
    cursor: pointer;
    font: normal normal normal 0 FontAwesome;
    padding: var(--space-none) var(--space-s);
}

.pika-next {
    margin-left: var(--space-base);
}

.pika-prev:before {
    content: "\f104";
    font-size: var(--font-size-h5);
    position: relative;
}

.pika-next:before {
    content: "\f105";
    font-size: var(--font-size-h5);
    position: relative;
}

.pika-next.is-disabled,
.pika-prev.is-disabled {
    color: var(--color-neutral-6);
}

.pika-label {
    color: var(--color-primary);
    cursor: pointer;
}

.pika-label:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.pika-table {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    padding: var(--space-none) var(--space-base);
    width: 100%;
}

.pika-table thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
}

.pika-table thead tr {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.pika-table th {
    color: var(--color-neutral-7);
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    font-weight: var(--font-regular);
}

.pika-table th abbr[title] {
    text-decoration: none;
}

.pika-table tbody {
    margin-top: var(--space-s);
}

.pika-table tbody tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
    margin-bottom: var(--space-xs);
}

.pika-table tbody tr:last-child {
    margin-bottom: var(--space-none);
}

.pika-table tbody td {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}

.pika-button {
    background-color: transparent;
    border-radius: var(--border-radius-soft);
    border: var(--border-size-none);
    color: var(--color-neutral-10);
    cursor: pointer;
    height: 32px;
    padding: var(--space-none);
    position: relative;
    width: 32px;
}

.pika-button:hover {
    background-color: var(--color-neutral-3);
}

.pika-button.is-disabled{
    background-color: transparent;
    border: none;
    color: var(--color-neutral-6);
    pointer-events: none;
}

.is-today .pika-button {
    background-color: var(--color-neutral-4);
}

.is-selected .pika-button {
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}

.is-disabled .pika-button,
.is-disabled.is-outside-current-month .pika-button {
    color: var(--color-neutral-7);
    pointer-events: none;
    text-decoration: line-through;
}

.is-outside-current-month .pika-button {
    color: var(--color-neutral-7);
    text-decoration: none;
}

.has-event .pika-button:before {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-circle);
    bottom: 3px;
    content: '';
    height: 4px;
    left: 50%;
    margin-left: -2px;
    position: absolute;
    width: 4px;
}

.is-selected.has-event .pika-button:before {
    background-color: var(--color-neutral-0);
}

.pika-today-container {
    height: auto;
    padding: var(--space-base);
    width: 100%;
}

.pika-today-container:hover {
    background-color: transparent;
}

.pika-go-today {
    background-color: transparent;
    border: var(--border-size-none);
    color: var(--color-primary);
    cursor: pointer;
    padding: var(--space-none);
}

.pika-go-today:hover {
    color: var(--color-primary-hover);
}

.month-picker,
.year-picker {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: var(--space-none);
}

.pika-month,
.pika-year {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-bottom: var(--space-base);
    width: 33.333%;
}

.pika-month.is-selected,
.pika-year.is-selected {
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}

.is-inrange .pika-button {
    background: var(--color-primary) var(--color-primary-lightest);
}

.is-startrange .pika-button,
.is-endrange .pika-button {
    background: var(--color-primary);
    color: var(--color-neutral-0);
}

.ie10 .pika-table,
.ie11 .pika-table {
    display: table;
}

.ie10 .pika-month, 
.ie10 .pika-year,
.ie11 .pika-month, 
.ie11 .pika-year {
    display: inline-flex;
}

.ie10 .pika-table thead tr th,
.ie11 .pika-table thead tr th {
    display: block;
    flex: none;
    margin: 0 auto;
}

/* $4.2.4 - Patterns - Controls - Dropdown */
.dropdown,
.dropdown .dropdown-content .dropdown-content-list,
.dropdown .dropdown-header {
    width: 100%;
}

.dropdown .dropdown-header {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-image: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
}

.is--visible .dropdown-header.select {
    border: var(--border-size-s) solid var(--color-primary);
}

.dropdown .dropdown-content {
    position: relative;
    z-index: 50;
}

.dropdown.is--visible .dropdown-icon {
    color: var(--color-primary);
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.dropdown .dropdown-icon .fa {
    font-size: 24px;
    width: auto;
}

.dropdown .dropdown-icon {
    color: var(--color-neutral-7);
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.dropdown .dropdown-content .dropdown-content-list {
    background: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    margin-top: var(--space-xs);
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-s) var(--space-none);
    position: absolute;
    -webkit-transition: opacity 180ms ease;
            transition: opacity 180ms ease;
            
    
    
}

.dropdown.is--visible .dropdown-content .dropdown-content-list {
    opacity: 1;
}

.dropdown.is--hidden .dropdown-content .dropdown-content-list {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
}

.dropdown.is--visible .dropdown-content-list {
    opacity: 1;
    visibility: visible;
}

.dropdown.is--hidden .dropdown-content-list {
    opacity: 0;
    pointer-events: none;
}

.dropdown .dropdown-content .dropdown-content-list a {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    color: var(--color-neutral-9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    padding: var(--space-none) var(--space-base);
}

.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: var(--color-neutral-2);
}


/* $4.2.5 - Patterns - Controls - DropdownSelect */
.choices {
    min-width: 150px;
    position: relative;
}

.choices.is-open.is-focused .choices__inner {
    border: var(--border-size-s) solid var(--color-primary);
    border-radius: var(--border-radius-soft);
}

.choices.Not_Valid .choices__inner {
    border: var(--border-size-s) solid var(--color-error);
}

.choices .choices__inner select {    
    opacity: 0;
    position: absolute;
    z-index: -10;
    pointer-events: none;
    width: 1px;
}

.choices:focus {
    outline: none;
}

.choices:last-child {
    margin-bottom: var(--space-none);
}

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
    background-color: var(--color-neutral-0);
    cursor: not-allowed;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.choices.is-disabled .choices__item {
    cursor: not-allowed;
}

.choices[data-type*="select-one"] {
    cursor: pointer;
}

.choices[data-type*="select-one"] .choices__inner .choices__inner {
    padding-bottom: var(--space-none);
}

/*.choices[data-type*="select-one"] .choices__inner .choices__input {
    background-color: var(--color-neutral-0);
    border-bottom: var(--border-size-s) solid var(--color-neutral-5);
    margin-bottom: var(--space-none);
    padding-left: var(--space-xl);
    padding: var(--space-s);
    position: relative;
    width: 100%;
}*/

.choices[data-type*="select-one"] .choices__button {
    height: auto;
    margin-right: var(--space-m);
    margin-top: -10px;
    padding: var(--space-none);
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
}

.choices[data-type*="select-one"] .choices__button:hover,
.choices[data-type*="select-one"] .choices__button:focus {
    opacity: 1;
}

.choices[data-type*="select-one"] .choices__button:focus {
    box-shadow: 0 0 0 2px var(--shadow-xs);
}

.choices .search--wrapper input:not(.btn):not(.checkbox):not(.radio-button),
.choices .search--wrapper .input {
    padding-left: var(--space-xl);
    max-width: 100%;
}

.choices .search--wrapper {
    padding: var(--space-s);
}

/* Arrow icon */
.choices[data-type*="select-one"]:after {
    color: var(--color-neutral-7);
    content: '\f107';
    font: normal normal normal 24px/1 FontAwesome;
    font-family: 'FontAwesome';
    position: absolute;
    right: 16px;
    top: 8px;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    transform-origin: center;
}

.choices[data-type*="select-one"].is-open:after {
    color: var(--color-primary);
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.choices[data-type*="select-one"][dir="rtl"]:after {
    left: 16px;
    right: auto;
}

.choices[data-type*="select-one"][dir="rtl"] .choices__button {
    left: 0;
    margin-left: var(--space-m);
    margin-right: var(--space-none);
    right: auto;
}

.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="text"] .choices__inner {
    cursor: text;
}

.choices[data-type*="select-one"] .choices__button {
    display: none;
}

.choices[data-type*="select-multiple"] .choices__button,
.choices[data-type*="text"] .choices__button {
    border: var(--border-size-none);
    display: inline-block;
    line-height: 1;
    margin-bottom: var(--space-none);
    margin-left: var(--space-s);
    margin-right: -4px;
    margin-top: var(--space-none);
    padding-left: var(--space-base);
    position: relative;
    width: 8px;
}

.choices[data-type*="select-multiple"] .choices__button:hover,
.choices[data-type*="select-multiple"] .choices__button:focus,
.choices[data-type*="text"] .choices__button:hover,
.choices[data-type*="text"] .choices__button:focus {
    opacity: 1;
}

.choices__inner {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    color: var(--color-neutral-3);
    display: inline-block;
    height: 40px;
    line-height: calc(var(--font-size-base) * 2);
    padding-left: var(--space-base);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    vertical-align: top;
    width: 100%; 
}

.choices[data-type*="select-multiple"] .choices__inner {
    height: auto;
    padding: var(--space-s);
    border-radius: var(--border-radius-soft);
}

.choices__inner:hover {
    border: var(--border-size-s) solid var(--color-neutral-6);
}

.is-focused .choices__inner,
.is-open .choices__inner {
    border-color: var(--color-primary);
    border-radius: var(--border-radius-soft);
    color: var(--color-neutral-1);
}

.is-open .choices__inner {
    border-radius: var(--border-radius-none);
}

.is-flipped.is-open .choices__inner {
    border-radius: var(--border-radius-none);
}

.choices__list {
    list-style: none;
    margin: var(--space-none);
    padding-left: var(--space-none);
}

.choices__list--single {
    display: inline-block;
    padding-right: var(--space-base);
    width: 100%;
}

.choices__list.choices__list--dropdown {
    border-radius: var(--border-radius-soft);
}

.choices__list.choices__list--dropdown.is-active {
    margin-top: var(--space-xs);
}


.search--wrapper {
    position: relative;
}

.search--wrapper input {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    height: 40px;
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.search--wrapper:before {
    color: var(--color-neutral-6);
    content: '\f002';
    font-family: 'SilkWeb4';
    left: var(--space-base);
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

/* Choices Multiple */
.choices__list--multiple {
    display: inline;
}

.choices__list--multiple .choices__item {
    align-items: center;
    background-color: var(--color-neutral-3);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-3);
    color: var(--color-neutral-9);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-semi-bold);
    height: 32px;
    margin-top: var(--space-xs);
    margin-left: var(--space-xs); 
    padding: var(--space-xs) var(--space-s);
    vertical-align: middle;
    word-break: break-all;  
}

.choices[data-type*="select-multiple"] .choices__button::after {
    content: "\f00d";
    color: var(--color-neutral-7);
    font: normal normal normal 14px/1 FontAwesome;
    font-family: 'FontAwesome';
    left: 0;
    position: absolute;
    text-indent: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);  
}

.choices[data-type*="select-multiple"] .choices__item.is-highlighted .choices__button::after {
    color: var(--color-neutral-0);
}

.choices[data-type*="select-multiple"] .search--wrapper input {
    border: 0;
    min-width: 100%;
}

.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="select-multiple"] .search--wrapper,
.choices[data-type*="select-multiple"].is-open .search--wrapper {
    padding: 0;
}

.choices[data-type*="select-multiple"] .search--wrapper input:focus {
    border: 0;
    box-shadow: none;
}

.choices[data-type*="select-multiple"].is-open .choices__inner {
    border: var(--border-size-s) solid var(--color-neutral-5);
}

.choices[data-type*="select-multiple"] .search--wrapper::before {
    left: var(--space-base);
}

.choices__list--multiple .choices__item[data-deletable] {
    padding-right: var(--space-xs);
}

.choices__list--multiple .choices__item.is-highlighted {
    background-color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-primary);
    color: var(--color-neutral-0);
}

.is-disabled .choices__list--multiple .choices__item {
    background-color: var(--color-neutral-6);
    border: var(--border-size-s) solid var(--color-neutral-7);
}

.choices__list--dropdown {
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    display: none;
    overflow: hidden;
    position: absolute;
    top: 100%;
    width: 100%;
    word-break: break-all;
    z-index: 100;
}

.choices__list--dropdown.is-active {
    display: block;
}

.is-flipped .choices__list--dropdown {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
    bottom: 100%;
    margin-bottom: -1px;
    margin-top: var(--space-none);
    top: auto;
}

.choices__list--dropdown .choices__list {
    -webkit-overflow-scrolling: touch;
    max-height: 300px;
    overflow: auto;
    position: relative;
    will-change: scroll-position;
}

.phone.landscape .choices__list--dropdown .choices__list {
    max-height: 100px;
}

.choices__list--dropdown .choices__item {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    padding: var(--space-none) var(--space-base);
    position: relative;
}

.choices__item--disabled {
    cursor: not-allowed;
    opacity: .5;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.choices__heading {
    border-bottom: var(--border-size-s) solid var(--color-neutral-0);
    color: var(--color-neutral-5);
    font-size: var(--font-size-s);
    font-weight: var(--font-semi-bold);
    padding: var(--space-s);
}

.choices__button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    border: var(--border-size-none);
    cursor: pointer;
    text-indent: -9999px;
}

.choices__button:focus {
    outline: none;
}

.choices__input {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-none);
    border: var(--border-size-none);
    display: inline-block;
    vertical-align: baseline;
    width: 100%;
}


.choices__placeholder {
    opacity: .5;
}

.choices__list--single .choices__item {
    color: var(--color-neutral-10);
    overflow: hidden;
    padding-right: var(--space-base);
    padding-top: var(--space-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 99%;
}

.choices__list::-webkit-scrollbar {
    width: 5px;
}

.choices__list::-webkit-scrollbar-track {
    background: var(--color-neutral-4);
}

.choices__list::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-6);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--color-neutral-2);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
    opacity: .5;
}

.choices__item {
    cursor: default;
}

.choices__item--selectable {
    cursor: pointer;
}

/* rtl */
.choices[dir="rtl"] .search--wrapper input:not(.btn):not(.checkbox):not(.radio-button) {
    padding-right: var(--space-xl);
}

.choices[dir="rtl"] .search--wrapper:before {
    right: var(--space-base);
}
.choices[dir="rtl"] .choices__list--single {
    padding-left: var(--space-base);
    padding-right: var(--space-xs);
}

.choices[dir="rtl"] .choices__list--multiple .choices__item {
    margin-left: var(--space-none);
    margin-right: var(--space-xs);
}

.choices[dir="rtl"] .choices__list--dropdown .choices__item {
    text-align: right;
}

.choices[dir="rtl"] .choices__input {
    padding-left: var(--space-none);
    padding-right: 2px;
}

.choices[data-type*="select-multiple"][dir="rtl"] .choices__button, 
.choices[data-type*="text"][dir="rtl"] .choices__button {
    margin-right: var(--space-s);
    margin-left: 0;
    padding-left: var(--space-none);
}

/* Media Queries */
@media (min-width: 640px) {
    .choices__list--dropdown .choices__item--selectable:after {
        content: attr(data-select-text);
        font-size: var(--font-size-xs);
        opacity: 0;
        position: absolute;
        right: 10px;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }
    .choices[dir="rtl"] .choices__list--dropdown .choices__item--selectable {
        padding-left: 100px;
        padding-right: var(--space-s);
        text-align: right;
    }
    .choices[dir="rtl"] .choices__list--dropdown .choices__item--selectable:after {
        left: 10px;
        right: auto;
    }
}


/* Choices Disabled */
.choices-disabled {
    pointer-events: none;
}

.choices-disabled .choices__inner {
    background-color: var(--color-neutral-2);
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAOCAYAAAA8E3wEAAAAAXNSR0IArs4c6QAAAb1JREFUOBGlU79Lw1AQfhcSipM6OTo5uQmJVaGtiNAqOGgd/AN0cLf+D7o76OhYddMGivQHqNgUN/8AR1dBpKTmed+DR9OQtMHecnl3931f7r07Emxuq/MspVwhonomZ2+tE/URn9QaUpq9tvfA3JvM/VLMO6sGSC3TPCAhPpHotbyLSYU0HlxKjLmhgbgS3Fhb+hCGsSNI/EghD92mV9Gg/3pwgAuc4FYaTMaNDazW6uxy4EZFiPaLOft2kE3/5ba9PSFlFQgpRLmUd+40WnWoD0hIolO+BpIyuGago3NpPTDAKg7mCouBY6hDTeo2O5e4DryrZVnL+jp0Psk/Pr3N+77/yl3NkaCrYsE5itYOdaiTmbx9jIkF0Pf79/Vud1rnkjxqUKvEMO3MEVcbK4i1mMnMlvkv37nTxd/voNrgEY8jQAw51KAWGGCTVitWECTZ7MKXZZnbuFZ+j5HrMjT+jAEWHHGWKIji6LrU2t5JlCRp/KN1+hw7NDqpfXjMRWhdkuIaF+dTCQKouguCMywykVFAjMe/yYs2xYtdKeXsc8TGWWpBEIXXBedR4498nI18wyggvC7jxj+K1ec/4MHct8w87wUAAAAASUVORK5CYII=');    
    background-position: center right 16px;
    background-repeat: no-repeat;
    background-size: 14px 7px;
    border: 1px solid var(--color-neutral-4);
}

.choices[data-type*="select-one"].choices-disabled:after {
    content: none;
}

.choices-disabled .choices__list--single .choices__item {
    color: var(--color-neutral-6);    
}

.choices-disabled[dir="rtl"] .choices__inner {
    background-position: center left 16px;     
}

/* $4.2.6 - Patterns - Controls - FileUpload */
.file-upload {
    -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
    background: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-4);
    border-radius: var(--border-radius-soft);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
    padding: var(--space-base);
    position: relative;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.file-upload .file-upload-icon,
.file-upload .file-upload-delete {
    color: var(--color-neutral-5);
}

.file-upload .file-upload-delete {
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.file-upload.active .file-upload-delete {
    opacity: 1;
    pointer-events: auto;
}

.file-upload .file-upload-message {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    padding-left: var(--space-base);
    
}

.file-upload .file-upload-widget input[type=file] {
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}


/* $4.2.7 - Patterns - Controls - FloatingActions */
.floating-actions {
    -webkit-box-align: end;
       -ms-flex-align: end;
          align-items: flex-end;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: var(--space-l);
    position: fixed;
    right: 0;
    will-change: transform, opacity;
    z-index: 51;
}

.floating-actions-items {
    -webkit-box-align: end;
       -ms-flex-align: end;
          align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-bottom: var(--space-s);
    padding-right: var(--space-s);
}

.floating-actions-item {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-base);
    opacity: 0;
    -webkit-transform: translateY(--space-base) translateZ(0);
            transform: translateY(--space-base) translateZ(0);
    -webkit-transition: all 100ms ease-in;
            transition: all 100ms ease-in;

    
    
}

.floating-actions:not(.is--open) {
    pointer-events: none;
}

.floating-actions.is--open .floating-actions-item { 
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0) scale(1) ;
            transform: translateY(0px) translateZ(0) scale(1);
    -webkit-transition: all 180ms ease-out;
            transition: all 180ms ease-out;
    -webkit-transition-delay: calc(var(--delay) * 40ms);
            transition-delay: calc(var(--delay) * 40ms);
}

.floating-actions-item-button {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-rounded);
    box-shadow: var(--shadow-s);
    color: var(--color-primary);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--font-size-base);
    height: 40px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-left: var(--space-base);
    width: 40px;
    -webkit-transform: translateZ(0) scale(0.3);
            transform: translateZ(0) scale(0.3);
    -webkit-transition: transform 180ms ease-out;
            transition: transform 180ms ease-out;
    -webkit-transition-delay: calc(var(--delay) * 40ms);
            transition-delay: calc(var(--delay) * 40ms);

    
}

.floating-actions.is--open .floating-actions-item-button {
    -webkit-transform: translateZ(0) scale(1);
            transform: translateZ(0) scale(1);
}

.floating-actions-item-button:hover {
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}

.floating-actions-button {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-rounded);
    box-shadow: var(--shadow-xl);
    color: var(--color-neutral-0);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--font-size-h4);
    height: 56px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    pointer-events: auto;
    width: 56px;
    -webkit-transform: rotate(0deg) translateZ(0);
            transform: rotate(0deg) translateZ(0);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.floating-actions.is--open .floating-actions-button {
    box-shadow: var(--shadow-none);
    -webkit-transform: rotate(135deg) translateZ(0);
            transform: rotate(135deg) translateZ(0);
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
}

.floating-actions-button:hover {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
}


/* $4.2.8 - Patterns - Controls - InputWithIcon */
.input-with-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.input-with-icon .input-with-icon-content-icon {
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    height: 40px;
    left: 0;
    position: absolute;
    width: 40px;
}

.input-with-icon.input-with-icon-right .input-with-icon-content-icon {
    left: auto;
    right: 0;
}

.input-with-icon .input-with-icon-content-icon,
.input-with-icon .input-with-icon-content-icon a {
    color: var(--color-neutral-6);
}

.input-with-icon .input-with-icon-input,
.input-with-icon .input-with-icon-input input {
    width: 100%;
}

.input-with-icon .input-with-icon-content-icon:not(:empty)+.input-with-icon-input input {
    padding-left: var(--space-xl);
}

.input-with-icon.input-with-icon-right .input-with-icon-content-icon:not(:empty)+.input-with-icon-input input {
    padding-right: var(--space-xl);
    padding-left: var(--space-base);
}

.input-with-icon .fa-fw {
    width: auto;
}

.input-with-icon .input-with-icon-content-icon.search-actions {
    left: auto;
    right: 0;
}

.input-with-icon.input-with-icon-right .input-with-icon-content-icon.search-actions {
    left: 0;
    right: auto;
}

.input-with-icon .input-with-icon-content-icon.search-actions:hover {
    color: var(--color-neutral-8);
    cursor: pointer;
}


/* $4.2.9 - Patterns - Controls - RangeSlider */
.range-slider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    margin-bottom: var(--space-l);
}

.range-slider-values {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.range-slider .noUi-connect {
    background: var(--color-primary);
}

.range-slider .noUi-target {
    background: var(--color-neutral-5);
    border-radius: var(--border-radius-soft);
    border: none;
}

.range-slider .noUi-handle {
    background: var(--color-neutral-0);
    border-radius: 50%;
    border: var(--border-size-s) solid var(--color-neutral-7);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    height: 24px;
    margin-top: -10px;
    width: 24px;
}

.range-slider .noUi-handle.noUi-active,
.range-slider .noUi-handle:hover {
    border: var(--border-size-s) solid var(--color-primary);
}

.range-slider .noUi-handle:before,
.range-slider .noUi-handle:after {
    background: transparent;
    border-color: var(--color-neutral-7);
    border-style: solid;
    content: '';
    height: 10px;
    margin-top: -5px;
    position: absolute;
    top: 50%;
}

.range-slider .noUi-handle:before {
    border-width: var(--border-size-none) var(--border-size-none) var(--border-size-none) var(--border-size-s);
    content: '';
    left: 6px;
}

.range-slider .noUi-handle:after {
    border-style: solid;
    border-width: var(--border-size-none) var(--border-size-s);
    left: 10px;
    width: 3px;
}

.range-slider .noUi-handle.noUi-active:before,
.range-slider .noUi-handle.noUi-active:after,
.range-slider .noUi-handle:hover:before,
.range-slider .noUi-handle:hover:after {
    border-color: var(--color-primary);
}

.range-slider .noUi-connects {
    border-radius: var(--border-radius-soft);
}

.range-slider .noUi-pips {
    color: var(--color-neutral-8);
}

.range-slider .noUi-marker {
    background: var(--color-neutral-5);
}

.range-slider .range-slider-separator.is--hidden {
    display: none;
}

.range-slider-label {
    color: var(--color-neutral-8);
    margin-left: var(--space-s);
}

.range-slider-separator {
    background-color: var(--color-neutral-4);
    font-size: 0;
    height: 2px;
    margin: var(--space-none) var(--space-s);
    width: 16px;
}

.range-slider-values .input {
    background: transparent;
    border: none;
    height: auto;
    margin-left: var(--space-none);
    padding: var(--space-none);
}

.range-slider .range-slider-values > * {
    word-break: normal;
}


/* Horizontal */
html:not([dir="rtl"]) .range-slider .noUi-horizontal .noUi-handle {
    right: -12px;
}

.range-slider .noUi-horizontal {
    height: 4px;
    margin: var(--space-base) var(--space-none) var(--space-base);
    width: 100%;
}

.range-slider .noUi-marker-horizontal {
    height: 4px;
}

.range-slider .noUi-pips-horizontal {
    padding: var(--space-s) var(--space-none) var(--space-none) var(--space-none);
}

.range-slider .noUi-value-horizontal {
    -webkit-transform: translate(-50%, 20%);
            transform: translate(-50%, 20%);
}

.range-slider .noUi-pips-horizontal {
    height: 30px;
}

/* Vertical */
.range-slider.vertical .range-slider-object {
    height: 100%;
    margin-top: var(--space-m);
}

.range-slider .noUi-vertical {
    height: 100px;
    margin-top: var(--space-base);
    width: 4px;
}

.range-slider .noUi-vertical .noUi-handle {
    left: -14px;
    top: -4px;
}

.range-slider .noUi-pips-vertical {
    padding: var(--space-none) var(--space-none) var(--space-none) 12px;
}

.range-slider .noUi-value-vertical {
    padding-left: var(--space-s);
}

.range-slider [data-isdisabled="true"] {
    pointer-events: none;
}

.range-slider [data-isdisabled="true"].noUi-target {
    background-color: var(--color-neutral-4);    
}

.range-slider [data-isdisabled="true"] .noUi-connect {
    background-color: var(--color-neutral-6);     
}

.range-slider [data-isdisabled="true"] .noUi-handle {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-5);
    box-shadow: none;
}

.range-slider [data-isdisabled="true"] .noUi-handle:before, 
.range-slider [data-isdisabled="true"] .noUi-handle:after {
    border-color: var(--color-neutral-6);
}

.range-slider [data-isdisabled="true"] .noUi-pips {
    color: var(--color-neutral-6);
}

/* RangeSlider Service Studio Styles */
.range-slider {
    
}

.range-slider .range-slider-object {
    
    
    
    
    
}

.range-slider .range-slider-object:after {
    
    
    
    
    
    
    
}

.range-slider.interval .range-slider-object:after {
    
}

.range-slider:before,
.range-slider:after {
    
    
    
    
    
    
    
    
    
    
    
    
}

.range-slider.interval:after {
    
}


/* $4.2.10 - Patterns - Controls - Search */
.search .input-with-icon .input-with-icon-content-icon + .input-with-icon-input input {
    padding: 0 var(--space-xl);
}


/* $4.2.11 - Patterns - Controls - SearchBalloon */
.search-balloon {
    position: relative;   
}

.search-balloon [data-balloon="balloon"] {
    cursor: auto;
}

.search-balloon .tippy-popper {
    width: 100% !important;   
}

.search-balloon .balloon {
    max-width: 100%;
    width: 100%;
}

.search-balloon-answers {
    position: relative;
    background: var(--color-neutral-0);
}

.search-balloon .tippy-arrow {
    display: none;
}

.search-balloon .tippy-tooltip {
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-s) var(--space-none);
}

.search-balloon .balloon-content {
    padding: var(--space-none);
    
}

.search-balloon .tippy-popper[x-placement^=bottom] .tippy-tooltip {
   -webkit-transform: translateY(var(--space-xs));
           transform: translateY(var(--space-xs));
}

.search-balloon a {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    color: var(--color-neutral-9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    padding: var(--space-none) var(--space-base);
}

.search-balloon a:hover {
    background-color: var(--color-neutral-2);
}


/* $4.2.12 - Patterns - Controls - TimePicker */
.time-picker .dropdown-content-list .time-option[disabled="disabled"] {
    color: var(--color-neutral-6);
}

.time-picker .select {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    height: 100%;
    padding: 0;
    position: relative;
}

.time-picker .select:hover,
.time-picker .select:focus {
    border: 0;
}

.time-picker .is--visible .dropdown-header.select {
    border: 0;
}

.time-picker .dropdown-header-text {
    width: 100%;
}

.time-picker .dropdown-icon {
    position: absolute;
    right: 16px;
    top: 8px
}

.time-picker .dropdown-content {
   
}

.time-option-selected {
    background-color: var(--color-neutral-2);
 }

.is-rtl .time-picker .dropdown-icon {
    left: 16px;
    right: auto;
}


/* $4.2.13 - Patterns - Controls - ToogleButton */
.toggle-button {
    background-color: var(--color-neutral-5);
    border-radius: 50px;
    border: var(--border-size-s) solid var(--color-neutral-5);
    display: inline-block;
    height: 32px;
    position: relative;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 50px;
}

.toggle-button:hover {
    background-color: var(--color-neutral-6);
    border: var(--border-size-s) solid var(--color-neutral-6);    
}

.toggle-button.toggle-button-checked {
    background-color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-primary);
} 

.toggle-button.toggle-button-checked:hover {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
}

.toggle-button.toggle-button-disabled {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-4);
    pointer-events: none;
}

.toggle-button:after {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-rounded);
    border: var(--border-size-none);
    content: '';
    height: 24px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 3px;
    -webkit-transform: translateX(3px) translateZ(0);
            transform: translateX(3px) translateZ(0);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 24px;    
}

.toggle-button.toggle-button-checked:after {
    -webkit-transform: translateX(21px) translateZ(0);
            transform: translateX(21px) translateZ(0);
}

.toggle-button.toggle-button-disabled:after {
    background-color: var(--color-neutral-5);    
}

.toggle-button .checkbox {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    width: 100%;  
}

/* $4.2.14 - Patterns - Controls - Video */


/* ================================================================ */
/*  $4.3 - Patterns - Layouts                                       */
/* ================================================================ */

/* $4.3.1 - Patterns - Layouts - Logins */
.layout-login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
    height: 100%;
    position: relative;
}

.layout-login > .columns {
    width: 100%;
}

.layout-login > .columns > .columns-item {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}
.layout-login > .columns > .columns-item > .layout-login-background {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.layout-login > .columns > .columns-item > .layout-login-background * {
    position: relative;
    z-index: 2;
}

.layout-login > .columns > .columns-item > img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    width: 100%;
}

.layout-login-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    min-width: 435px;
    position: relative;
    z-index: 2;
}

.layout-login-simple .layout-login-background {
    background-color: var(--color-primary);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.layout-login-simple .layout-login-background > img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
}

.layout-login-simple .layout-login-form-content {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    position: relative;
    width: 100%;
    z-index: 2;
}

.layout-login-simple .layout-login-form {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-l);
    padding: var(--space-xxl);
}

.phone .layout-login-simple .layout-login-form-content,
.phone .layout-login > .columns > .columns-item {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
}

.phone .layout-login-form {
    margin: var(--space-xl) var(--space-none) var(--space-none);
    min-width: auto;
    padding: var(--space-l);
    width: 100%;
}

.phone .layout-login-simple .layout-login-form {
    margin: var(--space-xl) var(--space-base);
}


/* ================================================================ */
/*  $4.4 - Patterns - Navigation                                    */
/* ================================================================ */

/* $4.4.1 - Patterns - Navigation - Breadcrumbs */
.breadcrumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
}

.breadcrumbs-item {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    color: var(--color-neutral-8);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.breadcrumbs-item .icon {
    color: var(--color-neutral-6);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin: var(--space-none) var(--space-s);
}

.breadcrumbs-item .icon .fa-fw {
    font-size: var(--font-size-xs);
    width: auto;
}

/* $4.4.2 - Patterns - Navigation - NavigationBar */
.navigation-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.phone .navigation-bar {
    position: relative;
}

.navigation-bar.is--sticky {
    position: -webkit-sticky;
    position: sticky;
}

.ie10 .is--sticky,
.ie11 .is--sticky {
    position: fixed;
}

.navigation-bar a,
.navigation-bar a:visited {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--color-neutral-8);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.navigation-bar a:hover,
.navigation-bar-item-title:hover {
    color: var(--color-neutral-9);
}

.navigation-bar-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.navigation-bar-item-title {
    color: var(--color-neutral-8);
    cursor: pointer;
    font-size: var(--font-size-base);
    margin: var(--space-s) var(--space-none);
}

.navigation-bar-item-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: var(--space-base);
}

.navigation-bar-item-content a {
    margin: var(--space-xs) var(--space-none);
}

.navigation-bar-item.is--open .navigation-bar-item-title a {
    color: var(--color-primary);
    font-weight: var(--font-semi-bold);
}

.navigation-bar-item.is--active .navigation-bar-item-title a {
    color: var(--color-primary); 
    font-weight: var(--font-semi-bold);
}

.navigation-bar-item.is--active .navigation-bar-item-title {
    color: var(--color-neutral-9);
    font-weight: var(--font-semi-bold); 
}

.navigation-bar-item-subitem:not(:last-child) {
    margin-bottom: var(--space-s);
}

.ListRecords .navigation-bar-item-title,
.ListRecords .navigation-bar-item-subitem {
    margin: var(--space-xs) 0;
}

.ListRecords .navigation-bar-item-subitem:last-child {
    margin-bottom: 0;
}

.navigation-bar-item-subitem.is--active,
.navigation-bar-item-subitem.is--active a,
.ListRecords .navigation-bar-item-subitem.is--active,
.ListRecords .navigation-bar-item-subitem.is--active a {
    color: var(--color-primary);
    font-weight: var(--font-semi-bold);
}

.navigation-bar-item .navigation-bar-item-content {
    display: block;
    overflow: hidden;
}

.navigation-bar-item .navigation-bar-item-content,
.navigation-bar-item .navigation-bar-item-content.is--collapsed {
    height: 0;
    visibility: hidden;
}

.navigation-bar-item .navigation-bar-item-content.is--expanded {
    height: auto;
    visibility: visible;
}

.navigation-bar-item .navigation-bar-item-content.is--animating {
    -webkit-transition: all 300ms ease-in-out;
         -o-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.is-rtl .navigation-bar-item-content {
    padding-right: var(--space-base);
}

/* $4.4.3   - Patterns - Navigation - SectionIndex */
.section-index {
    border-left: var(--border-size-s) solid var(--color-neutral-4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.section-index.is--sticky {
    position: -webkit-sticky;
    position: sticky;
}

.section-index a,
.section-index a:visited {
    border-left: var(--border-size-m) solid transparent;
    color: var(--color-neutral-8);
    margin-bottom: var(--space-s);
    padding-left: var(--space-base);
}

.section-index a:hover {
    color: var(--color-neutral-9);  
}

.section-index-item {
    cursor: pointer;
}

.section-index-item:last-child {
    margin-bottom: var(--space-none);
}

a.section-index-item.is--active {
    border-left: var(--border-size-m) solid var(--color-primary);
    color: var(--color-neutral-9); 
    font-weight: var(--font-semi-bold);
}

.edge .section-index.is--sticky {
    position: fixed;
}

/* $4.4.4 - Patterns - Navigation - Sidebar */
.sidebar {
    
    
}

.sidebar-container {
    background: var(--color-neutral-0);
    box-shadow: var(--shadow-l);
    height: 100vh;
    position: fixed;
    overflow-y: auto;
    right: 0;
    top: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    width: 500px;
    z-index: 150;
    
    
    
}

.sidebar-header,
.sidebar-content {
    padding: var(--space-base) var(--space-m);
}

.sidebar-overlay {
    background-color: rgba(190, 190, 190, .25);
    cursor: pointer;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    width: 100vw;
    z-index: 103;
    
}

.sidebar.is--visible .sidebar-overlay {
    pointer-events: initial;
}

.phone .sidebar-container {
    width: 85vw;
}

/* Fix for usage inside tabs*/
.tabs .is--visible .sidebar-container.enter-right,
.tabs .is--hidden .sidebar-container.leave-right,
.tabs .is--visible .sidebar-overlay.enter-fade,
.tabs .is--hidden .sidebar-overlay.leave-fade {
    -webkit-animation-name: none;
            animation-name: none;
}

.tabs .sidebar-container,
.tabs .sidebar-overlay {
    transition: transform 1000ms ease-out, opacity 1000ms ease-out;
    will-change: transform, opacity;
}

.tabs .is--visible .sidebar-container {
    -webkit-transform: translateX(0) translateZ(0);
            transform: translateX(0) translateZ(0);
}

.tabs .is--visible .sidebar-overlay {
    opacity: 1;
}

/* $4.4.5 - Patterns - Navigation - Tabs */
.tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.tabs.tabs-vertical {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

.tabs .tabs-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%;
    z-index: 2;
}

.tabs .tabs-header .ListRecords {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.tabs.justified .tabs-header {
    width: 100%;
}

.tabs-header-item {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    border-bottom: var(--border-size-m) solid transparent;
    color: var(--color-neutral-8);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-left: var(--space-l);
    padding: var(--space-base) var(--space-xs);
    -webkit-transition: border 150ms linear;
            transition: border 150ms linear;
}

.tabs-header-item:first-child {
    margin-left: var(--space-none);
}

.tabs-header-item:hover {
    border-bottom: var(--border-size-m) solid var(--color-neutral-6);
    color: var(--color-neutral-10);
}

.tabs-header-item.active {
    border-bottom: var(--border-size-m) solid var(--color-primary);
    color: var(--color-neutral-10);
    font-weight: var(--font-semi-bold);
}

.tabs-header-item .fa-fw {
    margin-right: var(--space-s);
    width: auto;
}

.tabs-header-item.active .fa-fw {
    color: var(--color-primary);
}

.tabs-header-item .badge {
    margin-left: var(--space-s);
}

.tabs.justified .tabs-header-item {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    margin-left: var(--space-none);
}

.tabs .tabs-content {
    border-top: var(--border-size-s) solid var(--color-neutral-5);
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
            flex-grow: 1;
    margin-top: -1px;
    padding: var(--space-m) var(--space-none);
    position: relative;
    width: 100%;
    z-index: auto;
}

.tabs .tabs-content-item:not(.active) {
    display: none;
}

.tabs.tabs-vertical .tabs-header,
.tabs.tabs-vertical .tabs-header .ListRecords {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    width: auto;
    word-break: initial;
}


.tabs.tabs-vertical.justified .tabs-header {
    height: auto;
}

.tabs.tabs-vertical .tabs-header-item {
    border-bottom: var(--border-size-none);
    border-right: var(--border-size-m) solid transparent;
    -webkit-box-pack: start;
       -ms-flex-pack: start;
     justify-content: flex-start;
    margin-left: var(--space-none);
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-none);
}

.tabs.tabs-vertical .tabs-header-item.active {
    border-right: var(--border-size-m) solid var(--color-primary);
}

.tabs.tabs-vertical .tabs-content {
    border-left: var(--border-size-s) solid var(--color-neutral-5);
    border-top: var(--border-size-none);
    margin-left: -1px;
    margin-top: var(--space-none);
    padding: var(--space-none) var(--space-m);
}

.tabs.tabs-vertical.tabs-header-right .tabs-header {
    -webkit-box-ordinal-group: 3;
               -ms-flex-order: 2;
                        order: 2;
}

.tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item {
    border-left: var(--border-size-m) solid transparent;
    border-right: var(--border-size-none);
    padding: var(--space-s) var(--space-none) var(--space-s) var(--space-m);
}

.tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item.active {
    border-left: var(--border-size-m) solid var(--color-primary);
}

.tabs.tabs-vertical.tabs-header-right .tabs-content {
    border-left: var(--border-size-none);
    border-right: var(--border-size-s) solid var(--color-neutral-5);
    margin-left: var(--space-none);
    margin-right: -1px
}

.phone .tabs .tabs-header,
.tablet .tabs .tabs-header {
    overflow-x: auto;
}

.phone .tabs-header-item,
.tablet .tabs-header-item {
    flex: 1 0 auto;
}

/* Tabs Patterns inside Card Pattern */
.card > .tabs:not(.justified) .tabs-header {
    padding: var(--space-none) var(--space-m);
}

.card > .tabs.tabs-vertical .tabs-header {
    padding: var(--space-none);
}

.card > .tabs .tabs-content {
    padding: var(--space-m);
}

.card > .tabs.tabs-vertical .tabs-header-item {
    padding: var(--space-base) var(--space-m) var(--space-base) var(--space-m);
}

.card > .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item {
    padding: var(--space-base) var(--space-m) var(--space-base) var(--space-m);
}


/* $4.4.6 - Patterns - Navigation - Timeline */
.timeline-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
}

.timeline-item-left {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    margin-right: var(--space-base);
    padding: var(--space-s) var(--space-none) var(--space-none);
}

.timeline-item-icon {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    border-radius: var(--border-radius-circle);
    color: var(--color-neutral-0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 24px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
    justify-content: center;
    width: 24px;
}

.timeline-item-icon .fa-fw {
    font-size: var(--font-size-xs);
    width: auto;
}

.timeline-item-icon:empty {
    height: 8px;
    width: 8px;
}

.timeline-item-separator {
    background-color: var(--color-neutral-5);
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    margin: var(--space-s) var(--space-none) var(--space-none);
    width: 1px;
}

.timeline-item:last-child .timeline-item-separator {
    display: none;
}

.timeline-item-right {
    margin-bottom: var(--space-xl);
}

.timeline-item:last-child .timeline-item-right {
    margin-bottom: var(--space-none);
}

.timeline-item-date {
    margin-bottom: var(--space-xs);
}


/* $4.4.7 - Patterns - Navigation - Wizard */
.wizard-item {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    position: relative;
    width: 100%;
}

.wizard-item.label-top .wizard-item-icon-wraper {
    -webkit-box-ordinal-group: 3;
               -ms-flex-order: 2;
                        order: 2;
}

.wizard-item.label-top .wizard-item-label {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    -webkit-box-ordinal-group: 2;
               -ms-flex-order: 1;
                        order: 1;
}

.ie11 .wizard.flex-direction-row .wizard-item.label-top .wizard-item-label,
.ie10 .wizard.flex-direction-row .wizard-item.label-top .wizard-item-label {
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;    
}

.wizard-item-icon:empty {
    height: 8px;
    width: 8px;
}

.wizard-item-icon {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-circle);
    border: var(--border-size-m) solid var(--color-neutral-5);
    color: var(--color-neutral-7);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 32px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin: 0 auto;
    position: relative;
    width: 32px;
    z-index: 2;
}

.wizard-item.active .wizard-item-icon {
    background-color: var(--color-neutral-0);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.wizard-item.past .wizard-item-icon {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-neutral-0);
}

.wizard-item-icon .fa-fw {
    font-size: var(--font-size-xs);
    width: auto;
}

.wizard-item-icon-wraper {
    margin: var(--space-s) var(--space-none);
    position: relative;
    width: 100%;
}

.wizard-item .wizard-item-icon-wraper:before {
    content: '';
    height: 2px;
    position: absolute;
    right: calc(50% + 12px);
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: calc(100% - 24px);
    z-index: 0;
}

.wizard-item.past .wizard-item-icon-wraper:before {
    background-color: var(--color-primary);
}

.wizard-item.active .wizard-item-icon-wraper:before {
    background-color: var(--color-primary);
}

.wizard-item.next .wizard-item-icon-wraper:before {
    background-color: var(--color-neutral-5);
}

.wizard-item:first-child .wizard-item-icon-wraper:before {
    content: none;
}

.wizard-item-label {
    color: var(--color-neutral-7);
    text-align: center;
}

.wizard-item.past .wizard-item-label {
    color: var(--color-neutral-8);
}

.wizard-item.active .wizard-item-label {
    color: var(--color-neutral-10);
}

.wizard-item.next .wizard-item-icon .fa-fw {
    color: var(--color-neutral-5);
}

.wizard-vertical .wizard-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
    margin-bottom: var(--space-l);
}

.wizard-vertical .wizard-item:last-child {
    margin-bottom: var(--space-none);
}

.wizard-vertical .wizard-item-icon-wraper {
    margin: var(--space-none) var(--space-s) var(--space-none) var(--space-none);
    width: auto;
}

.wizard-vertical .wizard-item .wizard-item-icon-wraper:before {
    bottom: calc(50% + 12px);
    height: calc(100% + 18px);
    left: 50%;
    top: auto;
    -webkit-transform: translateY(0) translateX(-50%);
            transform: translateY(0) translateX(-50%);
    width: 2px;
}

.wizard-vertical .wizard-item.label-top .wizard-item-label {
    text-align: right;
}

.wizard-vertical .wizard-item.label-top .wizard-item-icon-wraper {
    margin: var(--space-none) var(--space-none) var(--space-none) var(--space-s);
}

.wizard .ListRecords {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.wizard-vertical .ListRecords {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
}

.ie11 .wizard-vertical .wizard-item {
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
}

/* ================================================================ */
/*  $4.5 - Patterns - Numbers                                       */
/* ================================================================ */

/* $4.5.1 - Patterns - Numbers - Badge */
.badge {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: var(--font-semi-bold);
    height: 32px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    min-width: 32px;
    line-height: 1;
}

.badge-small {
    font-size: var(--font-size-xs);
    height: 24px;
    min-width: 24px;
    padding: var(--space-none) var(--space-xs);
}

.badge-medium {
    font-size: var(--font-size-base);
    height: 40px;
    min-width: 40px;
}

.badge.background-neutral-0,
.badge.background-neutral-1,
.badge.background-neutral-2,
.badge.background-neutral-3,
.badge.background-neutral-4 {
    color: var(--color-neutral-9);  
}

/* $4.5.2 - Patterns - Numbers - Counter */
.counter {
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-4);
    box-shadow: var(--shadow-none);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    padding: var(--space-none) var(--space-m);
}

.counter .center-align {
    width: 100%;
}

.counter .center-align.flex-direction-column {
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}

.counter .center-align.flex-direction-row {
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
}

.counter[class*="background-"] {
    border: var(--border-size-none);
    color: var(--color-neutral-0);
}


/* $4.5.3 - Patterns - Numbers - IconBadge */
.badge-icon {
    margin-right: var(--space-s);
    position: relative;
}

.badge-icon .badge {
    border-radius: var(--border-radius-rounded);
    font-size: var(--font-size-xs);
    height: 18px;
    left: 35%;
    min-width: 18px;
    padding: var(--space-none) var(--space-xs);
    position: absolute;
    top: 0;
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
    white-space: nowrap;
}


.badge-icon .icon { 
    color: var(--color-neutral-7); 
}


/* $4.5.4 - Patterns - Numbers - ProgressBar */
.progress-container,
.progress-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.progress-container.flex-direction-column .progress-content .progress-title,
.progress-container.flex-direction-column .progress-content .progress-value { 
    margin-bottom: var(--space-s); 
}

.progress-container.flex-direction-row .progress { 
    margin-right: var(--space-s); 
}

.progress-container.flex-direction-row {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
}


.progress-container .progress {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.ie11 .progress-container.flex-direction-column .progress,
.ie10 .progress-container.flex-direction-column .progress {
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
}

.progress-container .progress-content {
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
}

.progress-container.flex-direction-row .progress-title { 
    display: none; 
}

.progress-container .progress-title { 
    text-align: left; 
}

.progress-container .progress-value { 
    text-align: right; 
}

.progress {
    background-color: var(--color-neutral-3);
    height: 100%;
}

.progress-bar-extra-small {
    height: var(--space-xs); 
}

.progress-bar-small { 
    height: var(--space-s); 
}

.progress-bar-base { 
    height: var(--space-base); 
}


/* $4.5.5 - Patterns - Numbers - ProgressCircle */
.progress-circle {
    padding-top: 100%;
    position: relative;
    
    
    
    
    
}

.progress-circle-content {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);    
            transform: translate(-50%, -50%);
}

.progress-semi-circle-content {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);    
            transform: translate(-50%, -50%);
}

.progress-circle-content,
.progress-semi-circle-content {
    text-align: center;
}

.progress-circle svg {
    left: 0; 
    position: absolute;
    stroke-linecap: round;
    top: 0;
}


/* $4.5.6 - Patterns - Numbers - UserAvatar */
.user-avatar {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: var(--font-semi-bold);
    height: 32px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    text-transform: uppercase;
    width: 32px;
}

.user-avatar.background-neutral-0,
.user-avatar.background-neutral-1, 
.user-avatar.background-neutral-2,
.user-avatar.background-neutral-3,
.user-avatar.background-neutral-4 {
    color: var(--color-neutral-9);  
}

.user-avatar-small {
    font-size: var(--font-size-xs);
    height: 24px;
    width: 24px;
}

.user-avatar-medium {
    font-size: var(--font-size-base);
    height: 40px;
    width: 40px;
}

/* ================================================================ */
/*  $4.6 - Patterns - Responsive                                    */
/* ================================================================ */

/* $4.6.1 - Patterns - Responsive - DisplayOnDevice */


/* $4.6.2 - Patterns - Responsive - LoadOnVisible */


/* $4.6.3 - Patterns - Responsive - MoveOnDevice */


/* $4.6.4 - Patterns - Responsive - ResponsiveTables */

/* Expanded Row */
.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child .TableRecords_Label,
.phone .expandable-row .TableRecords tbody tr td:first-child .TableRecords_Label {
    display: none;    
}

.tablet.portrait .expandable-row .TableRecords tbody tr td:not(:first-child),
.phone .expandable-row .TableRecords tbody tr td:not(:first-child) {
    display: none;
}

.tablet.portrait .expandable-row .TableRecords tbody tr.TableRecords_ExpandedRow td:not(:first-child),
.phone .expandable-row .TableRecords tbody tr.TableRecords_ExpandedRow td:not(:first-child) {
    display: flex;
}

.tablet.portrait .table-records-responsive.expandable-row .TableRecords tbody tr td:first-child, 
.phone .table-records-responsive.expandable-row .TableRecords tbody tr td:first-child {
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
    display: block;
    overflow: hidden;
    padding-bottom: var(--space-base);
    padding-right: var(--space-xxl);
    position: relative;
    text-overflow: ellipsis;
    -webkit-transition: none;
    transition: none;
    white-space: nowrap;
}

.tablet.portrait .expandable-row .TableRecords tbody tr td:nth-child(2),
.phone .expandable-row .TableRecords tbody tr td:nth-child(2) {
    padding-top: var(--space-none);
}

.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child:after,
.phone .expandable-row .TableRecords tbody tr td:first-child:after {
    color: var(--color-primary);
    content: "\f107";
    font: normal normal normal 24px/1 FontAwesome;
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);    
            transform: translateY(-50%);
    -webkit-transition: transform 180ms linear;
            transition: transform 180ms linear;
    width: 16px;
}

.tablet.portrait .expandable-row .TableRecords tbody .TableRecords_ExpandedRow td:first-child:after,
.phone .expandable-row .TableRecords tbody .TableRecords_ExpandedRow td:first-child:after {
    -webkit-transform: translateY(-50%) rotate(180deg);    
            transform: translateY(-50%) rotate(180deg);  
}

.tablet.portrait .expandable-row .TableRecords tbody td:first-child,
.phone .expandable-row .TableRecords tbody td:first-child {
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);    
}

.tablet.portrait .expandable-row .TableRecords tbody tr.TableRecords_ExpandedRow td:first-child, 
.phone .expandable-row .TableRecords tbody tr.TableRecords_ExpandedRow td:first-child {
    font-weight: var(--font-semi-bold);
    border-bottom: var(--border-size-s) solid transparent;
}


/* Scrollable Row */
.tablet.portrait .table-records-responsive.scrollable-row .TableRecords .TableRecords_Label, 
.phone .table-records-responsive.scrollable-row .TableRecords .TableRecords_Label {
    display: none;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords thead, 
.phone .table-records-responsive.scrollable-row .TableRecords thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords thead tr,
.phone .table-records-responsive.scrollable-row .TableRecords thead tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords thead th,
.phone .table-records-responsive.scrollable-row .TableRecords thead th {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    border-right: var(--border-size-s) solid var(--color-neutral-4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    height: auto;
    padding: var(--space-base) var(--space-m);
    pointer-events: none;
    width: 100% !important;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords thead th:last-child,
.phone .table-records-responsive.scrollable-row .TableRecords thead th:last-child {
    border-bottom: var(--border-size-s) solid transparent;
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody, .phone .table-records-responsive.scrollable-row .TableRecords tbody {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    overflow-x: auto;
    position: relative;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody tr,
.phone .table-records-responsive.scrollable-row .TableRecords tbody tr {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody tr td,
.phone .table-records-responsive.scrollable-row .TableRecords tbody tr td {
    border-bottom: var(--border-size-s)solid var(--color-neutral-4);
    border-right: var(--border-size-s)solid var(--color-neutral-4);
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    padding: var(--space-base) var(--space-m);
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody tr:last-child td,
.phone .table-records-responsive.scrollable-row .TableRecords tbody tr:last-child td {
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
    border-right: var(--border-size-s) solid transparent;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody tr td:not(:last-child),
.phone .table-records-responsive.scrollable-row .TableRecords tbody tr td:not(:last-child) {
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);    
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody tr td:last-child,
.phone .table-records-responsive.scrollable-row .TableRecords tbody tr td:last-child {
    border-bottom: var(--border-size-s) solid transparent;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords thead th .checkbox,
.phone .table-records-responsive.scrollable-row .TableRecords thead th .checkbox {
    pointer-events: auto;
}


/* ================================================================ */
/*  $4.7 - Patterns - Structure                                     */
/* ================================================================ */

/* $4.7.1 - Patterns - Structure - AlignCenter */
.center-align {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    height: 100%;
    width: 100%;
}

.center-align.flex-direction-column {
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}


/* $4.7.2 - Patterns - Structure - Columns */
.columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.columns.gutter-none {
    margin-left: var(--space-none);
    margin-right: var(--space-none);
}

.columns.gutter-xs {
    margin-left: calc(-1 * var(--space-xs) / 2);
    margin-right: calc(-1 * var(--space-xs) / 2);
}

.columns.gutter-s {
    margin-left: calc(-1 * var(--space-s) / 2);
    margin-right: calc(-1 * var(--space-s) / 2);
}

.columns.gutter-base {
    margin-left: calc(-1 * var(--space-base) / 2);
    margin-right: calc(-1 * var(--space-base) / 2);
}

.columns.gutter-m {
    margin-left: calc(-1 * var(--space-m) / 2);
    margin-right: calc(-1 * var(--space-m) / 2);
}

.columns.gutter-l {
    margin-left: calc(-1 * var(--space-l) / 2);
    margin-right: calc(-1 * var(--space-l) / 2);
}

.columns.gutter-xl {
    margin-left: calc(-1 * var(--space-xl) / 2);
    margin-right: calc(-1 * var(--space-xl) / 2);
}

.columns.gutter-xxl {
    margin-left: calc(-1 * var(--space-xxl) / 2);
    margin-right: calc(-1 * var(--space-xxl) / 2);
}

.columns > .columns-item {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.columns.columns-small-left > .columns-item:last-child,
.columns.columns-small-right > .columns-item:first-child {
    -webkit-box-flex: 3;
            -ms-flex: 3;
                flex: 3;
}

.columns.columns-medium-left > .columns-item:last-child,
.columns.columns-medium-right > .columns-item:first-child {
    -webkit-box-flex: 2;
            -ms-flex: 2;
                flex: 2;
}

.columns.gutter-none > .columns-item {
    margin-bottom: var(--space-none);
    padding: var(--space-none) var(--space-none);
}

.columns.gutter-xs > .columns-item {
    margin-bottom: var(--space-xs);
    padding: var(--space-none) calc(var(--space-xs) / 2);
}

.columns.gutter-s > .columns-item {
    margin-bottom: var(--space-s);
    padding: var(--space-none) calc(var(--space-s) / 2);
}

.columns.gutter-base > .columns-item {
    margin-bottom: var(--space-base);
    padding: var(--space-none) calc(var(--space-base) / 2);
}

.columns.gutter-m > .columns-item {
    margin-bottom: var(--space-m);
    padding: var(--space-none) calc(var(--space-m) / 2);
}

.columns.gutter-l > .columns-item {
    margin-bottom: var(--space-l);
    padding: var(--space-none) calc(var(--space-l) / 2);
}

.columns.gutter-xl > .columns-item {
    margin-bottom: var(--space-xl);
    padding: var(--space-none) calc(var(--space-xl) / 2);
}

.columns.gutter-xxl > .columns-item {
    margin-bottom: var(--space-xxl);
    padding: var(--space-none) calc(var(--space-xxl) / 2);
}

.columns .columns-item > .card { 
    height: 100%; 
}

.columns:only-child > .columns-item { 
    margin-bottom: var(--space-none); 
}

/* Columns Responsive */
.tablet .columns.tablet-break-first > .columns-item:first-child,
.phone .columns.phone-break-first > .columns-item:first-child,
.tablet .columns.tablet-break-last > .columns-item:last-child,
.phone .columns.phone-break-last > .columns-item:last-child,
.tablet .columns.tablet-break-all > .columns-item,
.phone .columns.phone-break-all > .columns-item {
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    width: 100%;
}

.tablet .columns.columns2.tablet-break-middle > .columns-item,
.phone .columns.columns2.phone-break-middle > .columns-item,
.tablet .columns.columns3.tablet-break-middle > .columns-item:last-child,
.phone .columns.columns3.phone-break-middle > .columns-item:last-child,
.tablet .columns.columns-small-left.tablet-break-middle > .columns-item,
.phone .columns.columns-small-left.phone-break-middle > .columns-item,
.tablet .columns.columns-medium-left.tablet-break-middle > .columns-item,
.phone .columns.columns-medium-left.phone-break-middle > .columns-item,
.tablet .columns.columns-small-right.tablet-break-middle > .columns-item,
.phone .columns.columns-small-right.phone-break-middle > .columns-item,
.tablet .columns.columns-medium-right.tablet-break-middle > .columns-item,
.phone .columns.columns-medium-right.phone-break-middle > .columns-item {
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    width: 100%;
}

.tablet .columns.columns4.tablet-break-middle > .columns-item,
.phone .columns.columns4.phone-break-middle > .columns-item {
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    width: 50%;
}

.tablet .columns.columns5.tablet-break-middle > .columns-item:nth-child(1),
.tablet .columns.columns5.tablet-break-middle > .columns-item:nth-child(2),
.tablet .columns.columns5.tablet-break-middle > .columns-item:nth-child(3),
.phone .columns.columns5.phone-break-middle > .columns-item:nth-child(1),
.phone .columns.columns5.phone-break-middle > .columns-item:nth-child(2),
.phone .columns.columns5.phone-break-middle > .columns-item:nth-child(3),
.tablet .columns.columns6.tablet-break-middle > .columns-item:nth-child(1),
.tablet .columns.columns6.tablet-break-middle > .columns-item:nth-child(2),
.tablet .columns.columns6.tablet-break-middle > .columns-item:nth-child(3),
.phone .columns.columns6.phone-break-middle > .columns-item:nth-child(1),
.phone .columns.columns6.phone-break-middle > .columns-item:nth-child(2),
.phone .columns.columns6.phone-break-middle > .columns-item:nth-child(3) {
    -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    width: 33.333%;
}

.tablet .columns.gutter-xs.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xs.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xs.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xs.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xs.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xs.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xs.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xs.phone-break-all:only-child > .columns-item:not(:last-child) {
    margin-bottom: var(--space-xs);       
}

.tablet .columns.gutter-s.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-s.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-s.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-s.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-s.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-s.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-s.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-s.phone-break-all:only-child > .columns-item:not(:last-child) {
    margin-bottom: var(--space-s);       
}

.tablet .columns.gutter-base.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-base.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-base.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-base.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-base.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-base.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-base.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-base.phone-break-all:only-child > .columns-item:not(:last-child) {
    margin-bottom: var(--space-base);       
}

.tablet .columns.gutter-m.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-m.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-m.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-m.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-m.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-m.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-m.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-m.phone-break-all:only-child > .columns-item:not(:last-child) {
    margin-bottom: var(--space-m);       
}

.tablet .columns.gutter-l.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-l.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-l.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-l.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-l.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-l.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-l.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-l.phone-break-all:only-child > .columns-item:not(:last-child) {
    margin-bottom: var(--space-l);       
}

.tablet .columns.gutter-xl.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xl.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xl.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xl.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xl.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xl.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xl.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xl.phone-break-all:only-child > .columns-item:not(:last-child) {
    margin-bottom: var(--space-xl);       
}

.tablet .columns.gutter-xxl.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xxl.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xxl.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xxl.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xxl.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xxl.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xxl.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xxl.phone-break-all:only-child > .columns-item:not(:last-child) {
    margin-bottom: var(--space-xxl);       
}

/* $4.7.3 - Patterns - Structure - Gallery */
.gallery-content,
.gallery-content.ListRecords {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.gallery-content.is--hidden {
    opacity: 0;
    
}

.gallery-content.is--visible {
    opacity: 1;
}

.gallery-content.is--hidden .gallery-item {
    transition: none;
}


/* ================================================================ */
/*  $4.8 - Patterns - Utilities                                     */
/* ================================================================ */

/* $4.8.1 - Patterns - Utilities - Animate */
.animate-wrapper {
    position: relative;
    
    
}

.animate {
    -webkit-animation-duration: 1000ms;
            animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    will-change: transform;
}

.animate-slow {
    -webkit-animation-duration: 1500ms;
            animation-duration: 1500ms;
}

.animate-fast {
    -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
}

.animate-wrapper .animate:empty {
    
}

.is--visible .enter-fade {
    -webkit-animation-name: enter-fade;
            animation-name: enter-fade;
}

@-webkit-keyframes enter-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes enter-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.is--visible .enter-top {
    -webkit-animation-name: enter-top;
            animation-name: enter-top;
}

@-webkit-keyframes enter-top {
    from {
        opacity: 0;
        -webkit-transform: translateX(0) translateY(-100%) translateZ(0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
}

@keyframes enter-top {
    from {
        opacity: 0;
        transform: translateX(0) translateY(-100%) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) translateZ(0);
    }
}

.is--visible .enter-right {
    -webkit-animation-name: enter-right;
            animation-name: enter-right;
}

@-webkit-keyframes enter-right {
    from {
        opacity: 0;
        -webkit-transform: translateX(100%) translateY(0) translateZ(0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
}

@keyframes enter-right {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(0) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) translateZ(0);
    }
}

.is--visible .enter-bottom {
    -webkit-animation-name: enter-bottom;
            animation-name: enter-bottom;
}

@-webkit-keyframes enter-bottom {
    from {
        opacity: 0;
        -webkit-transform: translateX(0) translateY(100%) translateZ(0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
}

@keyframes enter-bottom {
    from {
        opacity: 0;
        transform: translateX(0) translateY(100%) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) translateZ(0);
    }
}

.is--visible .enter-left {
    -webkit-animation-name: enter-left;
            animation-name: enter-left;
}

@-webkit-keyframes enter-left {
    from {
        opacity: 0;
        -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
}

@keyframes enter-left {
    from {
        opacity: 0;
        transform: translateX(-100%) translateY(0) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) translateZ(0);
    }
}

.is--visible .enter-scale {
    -webkit-animation-name: enter-scale;
            animation-name: enter-scale;
}

@-webkit-keyframes enter-scale {
    from {
        opacity: 0;
        -webkit-transform: scale(.5) translateZ(0);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1) translateZ(0);
    }
}

@keyframes enter-scale {
    from {
        opacity: 0;
        transform: scale(.5) translateZ(0);
    }
    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

.is--hidden .leave-fade {
    -webkit-animation-name: leave-fade;
            animation-name: leave-fade;
    pointer-events: none;
}

@-webkit-keyframes leave-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes leave-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.is--hidden .leave-top {
    -webkit-animation-name: leave-top;
            animation-name: leave-top;
    pointer-events: none;
}

@-webkit-keyframes leave-top {
    from {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(0) translateY(-100%) translateZ(0);
    }
}

@keyframes leave-top {
    from {
        opacity: 1;
        transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        opacity: 0;
        transform: translateX(0) translateY(-100%) translateZ(0);
    }
}

.is--hidden .leave-right {
    -webkit-animation-name: leave-right;
            animation-name: leave-right;
    pointer-events: none;
}

@-webkit-keyframes leave-right {
    from {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(100%) translateY(0) translateZ(0);
    }
}

@keyframes leave-right {
    from {
        opacity: 1;
        transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%) translateY(0) translateZ(0);
    }
}

.is--hidden .leave-bottom {
    -webkit-animation-name: leave-bottom;
            animation-name: leave-bottom;
    pointer-events: none;
}

@-webkit-keyframes leave-bottom {
    from {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(0) translateY(100%) translateZ(0);
    }
}

@keyframes leave-bottom {
    from {
        opacity: 1;
        transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        opacity: 0;
        transform: translateX(0) translateY(100%) translateZ(0);
    }
}

.is--hidden .leave-left {
    -webkit-animation-name: leave-left;
            animation-name: leave-left;
    pointer-events: none;
}

@-webkit-keyframes leave-left {
    from {
        opacity: 1;
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
    }
}

@keyframes leave-left {
    from {
        opacity: 1;
        transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%) translateY(0) translateZ(0);
    }
}

.is--hidden .leave-scale {
    -webkit-animation-name: leave-scale;
            animation-name: leave-scale;
    pointer-events: none;
}

@-webkit-keyframes leave-scale {
    from {
        opacity: 1;
        -webkit-transform: scale(1) translateZ(0);
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.5) translateZ(0);
    }
}

@keyframes leave-scale {
    from {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
    to {
        opacity: 0;
        transform: scale(.5) translateZ(0);
    }
}

/* $4.8.2 - Patterns - Utilities - ButtonLoading */
button.OSFillParent {
  display: inline-flex;
}

.is--loading .btn {
    pointer-events: none;
}

.btn-loading {
    display: none;
    position: absolute;
}

.btn-show-label .btn-loading {
    position: relative;
}

.is--loading .btn-loading {
    display: inline-flex;
}

.is--loading .btn-label {
    opacity: 0;   
}

.btn-show-label .btn-label {
    opacity: 1;
}

.btn-loading .loading-spinner {
    -webkit-animation: loadingSpinner 850ms cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite;
            animation: loadingSpinner 850ms cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite;
    border: var(--border-size-m) solid currentColor;
    border-radius: 100%;
    border-top: var(--border-size-m) solid transparent;
    height: 16px;
    width: 16px;
    will-change: transform;
}

@-webkit-keyframes loadingSpinner {
  0% {
    -webkit-transform: rotate(0deg) translateZ(0);
  }
  100% {
    -webkit-transform: rotate(360deg) translateZ(0);
  }
}

@keyframes loadingSpinner {
  0% {
    transform: rotate(0deg) translateZ(0);
  }
  100% {
    transform: rotate(360deg) translateZ(0);
  }
}


/* $4.8.3 - Patterns - Utilities - CharacterCount */


/* $4.8.4 - Patterns - Utilities - FlipContent */
.flip-content {
    -webkit-perspective: 1000px;
            perspective: 1000px;
    position: relative;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    will-change: transform;
}

.flip-content.is--click {
    cursor: pointer;
}

.flip-content .flip-content-front,
.flip-content .flip-content-back {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: transform 600ms ease-out;
            transition: transform 600ms ease-out;
    width: 100%;
}

.flip-content .flip-content-front {
    position: relative;
}

.flip-content .flip-content-back { 
    -webkit-transform:  rotateY(-180deg) translateZ(0);
            transform:  rotateY(-180deg) translateZ(0);   

}

.flip-content.is--hover:hover .flip-content-front,
.flip-content.is--flipped .flip-content-front {
    -webkit-transform: rotateY(180deg) translateZ(0);
            transform: rotateY(180deg) translateZ(0);   
}

.flip-content.is--hover:hover .flip-content-back,
.flip-content.is--flipped .flip-content-back{
    -webkit-transform:  rotateY(0deg) translateZ(0);
            transform: rotateY(0deg) translateZ(0);   
}

.ie11 .flip-content .flip-content-front,
.ie11 .flip-content .flip-content-back {
    -webkit-backface-visibility: inherit;
            backface-visibility: inherit;
    -webkit-transition: all 600ms ease-out;
            transition: all 600ms ease-out;
}

.ie11 .flip-content .flip-content-back {
    opacity: 0;
}

.ie11 .flip-content.is--hover:hover .flip-content-back,
.ie11 .flip-content.is--flipped .flip-content-back {
    opacity: 1;
}

/* $4.8.5 - Patterns - Utilities - Fieldset */
fieldset {
    
    
    
    
    
}

.fieldset {
    border: 1px solid var(--color-neutral-4);
    border-radius: var(--border-radius-soft);
    margin: 0;
    padding: var(--space-m);
}

.fieldset-legend {
    color: var(--color-neutral-8);
    padding: 0 var(--space-xs);
    
    
    
    
}

/* $4.8.6 - Patterns - Utilities - FlipContent */


/* $4.8.7 - Patterns - Utilities - Iframe */


/* $4.8.8 - Patterns - Utilities - Separator */
.separator-vertical {
    display: inline-block;
    height: 100%;
    min-height: 20px;
    min-width: 1px;
    width: 1px;
}

.separator-horizontal {
    height: 1px;
    width: 100%;
}


/* $4.8.9 - Patterns - Utilities - StackedIcon */

/* ================================================================ */
/*  $5 - Widgets & RichWidgets                                      */
/* ================================================================ */

/* $5.1 - Widgets - Form / EditRecord */

.Form label {
    color: var(--color-neutral-8);
}

.Form:not(.form-top) label {
    padding-top: 0px;
}

.layout .Form .input.ReadOnly:not(.Not_Valid),
.layout .Form .select.ReadOnly:not(.Not_Valid) {
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    color: var(--color-neutral-10);
}

.layout .Form .input.ReadOnly:not(.Not_Valid)[readonly='readonly'],
.layout .Form .select.ReadOnly:not(.Not_Valid)[disabled='disabled']{
    background-color: var(--color-neutral-2);
    border: 1px solid var(--color-neutral-4);
    color: var(--color-neutral-6);
    pointer-events: none;
}

.layout .Form .select.ReadOnly:not(.Not_Valid)[disabled='disabled'] {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAOCAYAAAA8E3wEAAAAAXNSR0IArs4c6QAAAb1JREFUOBGlU79Lw1AQfhcSipM6OTo5uQmJVaGtiNAqOGgd/AN0cLf+D7o76OhYddMGivQHqNgUN/8AR1dBpKTmed+DR9OQtMHecnl3931f7r07Emxuq/MspVwhonomZ2+tE/URn9QaUpq9tvfA3JvM/VLMO6sGSC3TPCAhPpHotbyLSYU0HlxKjLmhgbgS3Fhb+hCGsSNI/EghD92mV9Gg/3pwgAuc4FYaTMaNDazW6uxy4EZFiPaLOft2kE3/5ba9PSFlFQgpRLmUd+40WnWoD0hIolO+BpIyuGago3NpPTDAKg7mCouBY6hDTeo2O5e4DryrZVnL+jp0Psk/Pr3N+77/yl3NkaCrYsE5itYOdaiTmbx9jIkF0Pf79/Vud1rnkjxqUKvEMO3MEVcbK4i1mMnMlvkv37nTxd/voNrgEY8jQAw51KAWGGCTVitWECTZ7MKXZZnbuFZ+j5HrMjT+jAEWHHGWKIji6LrU2t5JlCRp/KN1+hw7NDqpfXjMRWhdkuIaF+dTCQKouguCMywykVFAjMe/yYs2xYtdKeXsc8TGWWpBEIXXBedR4498nI18wyggvC7jxj+K1ec/4MHct8w87wUAAAAASUVORK5CYII=')
}

.layout .Form .select.ReadOnly:not(.Not_Valid)[disabled='disabled'][multiple='multiple'] { 
    background-image: none
}

.Form input.ReadOnly,
.Form textarea.ReadOnly,
.Form select.ReadOnly {
    font-size: var(--font-size-s);
}

.Form:not(.ReadOnly) input.ReadOnly,
.Form:not(.ReadOnly) textarea.ReadOnly {
    cursor: text;
}

.Form:not(.ReadOnly) .button-group input.ReadOnly {
    cursor: pointer;
}

.layout .Form .select.ReadOnly:not(.Not_Valid) {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAOCAYAAAA8E3wEAAAAAXNSR0IArs4c6QAAAgpJREFUOBGlU79LW1EUPvfFPLQOQh06OPgHuKlV82NwqBYsndRSwTUPqVgpJS9DlyyCJFSUYKWR/gVugi46SCXRYNOpmq4OGTq0oKCBp32353vw5PblRtN6lnffOd+Pm7zvCOKy5pJFSTJCQux0PWwfS6fT1+jft1inpfrrYpukHBEkDvK5bNSAaNg0p9jsBwbVn5cf7mvk8z0t1oS258GDEIZHB/tnA9H4ZzacJpKD/UOxWrlULPjE/3lar5M2a6WEoFooZDxdW1o8gY5niMOXw0K1PxKvSClf8OuTvkjs29dSsYLZv1ZiPjnOl8+DZ4SMlx+XM7u+xo0hGuXDQoVNLxk8KoieP47Gd3ARH9zMc+aNPUCu3GRsWBhGKr+S+aTyWLe+EnM2385N4L83w+bg6vuF03pUfWf27btu58op8YUf8W9bX89lrCDKC02w2dX54BUSC6LjOFtWKtURxATfgQHWM0PaoaEprSHWolW2TxCJY/7wPbLmbiDiGr7XwgwYYMEBFxo6vNYQwFwufW6a5rNm1kWNPzjg6szQ+ys0QVDdunCgyqVCUcU1ir+KUc+3GgKIlPYOxb6TpEn+PiPquqjxJ0NM5ZezN/FXTdSzNqUqwD9b83ZSum4Gi8y7NYy++9vdk5LaOP42xz+L3l3VtCGE1HXxhG+JfyPjhqHREdR1uSv+Oj56fwCOW+0Oio0XpwAAAABJRU5ErkJggg==');
    background-position: center right 16px;
    background-repeat: no-repeat;
    background-size: 14px 7px;
}

.layout .Form .input.ReadOnly:not(.Not_Valid):hover,
.layout .Form .select.ReadOnly:not(.Not_Valid):hover {
    border: var(--border-size-s) solid var(--color-neutral-6);
}

.layout .Form .input.ReadOnly:not(.Not_Valid):focus,
.layout .Form .select.ReadOnly:not(.Not_Valid):focus {
    border: var(--border-size-s) solid var(--color-primary);
}

.layout .Form .input.Not_Valid,
.layout .Form .select.Not_Valid {
    border: var(--border-size-s) solid var(--color-error);
    padding: var(--space-none) var(--space-base);
    background-color: var(--color-neutral-0);
}

.layout .Form textarea.input.Not_Valid {
   padding: var(--space-base);
}

.Form:not(.WithTouchEvents) input.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil,
.Form:not(.WithTouchEvents) textarea.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil,
.Form:not(.WithTouchEvents) select.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil {
    display: none;
}

.Form input.SmartInput_Changed.ReadOnly + a.SmartInput_Undo,
.Form textarea.SmartInput_Changed.ReadOnly + a.SmartInput_Undo,
.Form select.SmartInput_Changed.ReadOnly + a.SmartInput_Undo {
    display: none;
}

.EditRecord input:not(.Button) {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-5);
    color: var(--color-neutral-9);
    font-size: var(--font-size-s);
    height: 40px;
    padding: var(--space-none) var(--space-base); 
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.Form .toggle-button input.checkbox {
    cursor: pointer;
    margin: 0;
}

.layout .Form:not(.ReadOnly) .checkbox.ReadOnly, 
.layout .Form:not(.ReadOnly) .radio-button.ReadOnly {
    cursor: pointer;
}

/* Override Form.css look inside SS */
.Form input[type="text"],
.Form input[type="password"],
.Form input[type="datetime"],
.Form input[type="datetime-local"],
.Form input[type="date"],
.Form input[type="month"],
.Form input[type="time"],
.Form input[type="week"],
.Form input[type="number"],
.Form input[type="email"],
.Form input[type="url"],
.Form input[type="search"],
.Form input[type="tel"],
.Form input[type="color"],
.Form select,
.Form textarea {
    
}

/* $5.2 - Widgets - TableRecords / EditableTable */
.TableRecords,
.EditableTable {
    border-radius: var(--border-radius-soft);
    border-spacing: 0;
    border: var(--border-size-s) solid var(--color-neutral-4);
    empty-cells: show;
}

.EditableTable {
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.TableRecords .TableRecords_Header,
.EditableTable  thead th {
    background-color: var(--color-neutral-0);
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
    color: var(--color-neutral-8);
    font-weight: var(--font-semi-bold);
    height: 48px;
    padding: var(--space-none) var(--space-m);
    position: relative;
    text-align: left;
}

.card .TableRecords,
.card .EditableTable {
    border: 0;
}

.desktop .TableRecords .TableRecords_Header.SortColumns_Sortable:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.TableRecords .TableRecords_Header.SortColumns_Sorted {
    color: var(--color-primary);
    text-decoration: none;    
}

.TableRecords .TableRecords_Header:first-child {
    border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-none);
}

.TableRecords .TableRecords_Header:last-child {
    border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.TableRecords .TableRecords_Header .fa {
    font-size: var(--font-size-xs);
    margin-left: var(--space-s);
    width: auto;
}

.phone .TableRecords .TableRecords_Header .fa,
.phone .TableRecords .TableRecords_Label .fa, 
.tablet.portrait .TableRecords .TableRecords_Header .fa,
.tablet.portrait .TableRecords .TableRecords_Label .fa {
    display: none;
}

.TableRecords .TableRecords_OddLine,
.TableRecords .TableRecords_EvenLine {
    background-color: var(--color-neutral-0);
    border-bottom: 1px solid var(--color-neutral-4);
    height: 56px;
    padding: var(--space-s) var(--space-m);
    text-align: left;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.table-no-header .TableRecords_OddLine, 
.table-no-header .TableRecords_EvenLine {
    padding: var(--space-s) 0;
}


.tablet.portrait .panel .TableRecords tbody tr td, 
.phone .panel .TableRecords tbody tr td {
    padding: var(--space-base) var(--space-none);
}

.table-records-small .TableRecords_OddLine,
.table-records-small .TableRecords_EvenLine {
    height: 48px;    
}

.table-records-medium .TableRecords_OddLine,
.table-records-medium .TableRecords_EvenLine {
    height: 64px;    
}

.table-records-stripping .TableRecords_EvenLine {
    background-color: var(--color-neutral-1);
}

.desktop .TableRecords tr:hover .TableRecords_OddLine,
.desktop .TableRecords tr:hover .TableRecords_EvenLine {
    background-color: var(--color-neutral-2);
}

.TableRecords tbody tr:last-child td {
    border-bottom: var(--border-size-none);
}

.TableRecords tbody tr:last-child td:first-child {
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
}

.TableRecords tbody tr:last-child td:last-child {
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-none);
}

.TableRecords_Wrapper .Heading2 {
    color: var(--color-neutral-10);
    font-size: var(--font-size-h2);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
    margin-bottom: var(--space-m);
}

.TableRecords_TopNavigation {
    margin-bottom: var(--space-s);
}

/* Default Responsive TableRecords */
.TableRecords_Label {
    display: none;
}

.TableRecords_Label {
    color: var(--color-neutral-8);
    font-weight: var(--font-semi-bold);
    margin-right: 40px;
    min-width: 100px;
}

.tablet.portrait .TableRecords:not(.no-responsive) .TableRecords_Label,
.phone .TableRecords:not(.no-responsive) .TableRecords_Label {
    display: block;
}

.phone .TableRecords:not(.no-responsive) .TableRecords_Label {
    min-width: 70px;
    max-width: 70px;
}

.tablet.portrait .TableRecords:not(.no-responsive),
.phone .TableRecords:not(.no-responsive) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.tablet.portrait .TableRecords:not(.no-responsive) thead,
.phone .TableRecords:not(.no-responsive) thead {
    display: none;
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody,
.phone .TableRecords:not(.no-responsive) tbody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    width: 100%;
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr,
.phone .TableRecords:not(.no-responsive) tbody tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr td,
.phone .TableRecords:not(.no-responsive) tbody tr td  {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    padding: var(--space-base) var(--space-m) var(--space-none) var(--space-m);
    width: 100% !important;
}

.phone .TableRecords:not(.no-responsive) tbody tr td {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr td:last-child,
.phone .TableRecords:not(.no-responsive) tbody tr td:last-child {
    padding-bottom: var(--space-base);
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr td:not(:last-child),
.phone .TableRecords:not(.no-responsive) tbody tr td:not(:last-child) {
    border-bottom: var(--border-size-none);
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr:first-child td,
.phone .TableRecords:not(.no-responsive) tbody tr:first-child td {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.phone .TableRecords.table-no-header tbody tr,
.tablet .TableRecords.table-no-header tbody tr {
    border-bottom: 1px solid var(--color-neutral-4);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal; 
    -ms-flex-direction: row;
    flex-direction: row;
}

.tablet .TableRecords.table-no-header tbody tr:last-child, 
.phone .TableRecords.table-no-header tbody tr:last-child {
   border: none;
}

.TableRecords.table-no-header .TableRecords_OddLine,
.TableRecords.table-no-header .TableRecords_EvenLine {
    border-bottom: none;
}

.tablet .TableRecords.table-no-header tbody td:not(:last-child), 
.phone .TableRecords.table-no-header tbody td:not(:last-child) {
    padding: var(--space-base) var(--space-m) var(--space-base) var(--space-m);
}


/* EditableTable */
.EditableTable tr.Selected td {
    background-color: var(--color-neutral-3);
}

.EditableTable tbody tr:not(.RowControlGroup) td {
    border-bottom: 1px solid var(--color-neutral-4);
}

.EditableTable tfoot td {
    padding: var(--space-base) var(--space-m);
    border-bottom: 0;
}

.EditableTable tfoot td a {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.EditableTable tfoot td a[disabled="disabled"] {
    background-color: transparent;
    border: var(--border-size-s) solid transparent;
}

.EditableTable tfoot td a i {
    margin-right: var(--space-s);
}

.EditableTable tbody tr.Selected {
    background-color: var(--color-neutral-3);
}

.EditableTable tbody tr:last-child {
    display: none;
}

.EditableTable thead th.Mandatory:after {
    margin-left: var(--space-xs);
    color: var(--color-error);
    position: relative;
}

.EditableTable tbody tr td {
    padding: var(--space-s);
}

.TableRecords_BottomNavigation {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: var(--space-m);
}

.TableRecords_BottomNavigation .columns {
    width: 100%;
}

.phone .TableRecords_BottomNavigation {
    flex-direction: column;
}

.phone .TableRecords_BottomNavigation > div {
    width: 100% !important;
}

body .EditableTable input, 
body .EditableTable textarea, 
body .EditableTable select {
    font-size: 14px;
}

.EditableTable input:not(.btn):not(.checkbox):not(.radio-button)[readonly="readonly"] {
    background-color: transparent;
    border: var(--border-size-s) solid transparent;
    color: var(--color-neutral-10);
    pointer-events: auto;
}

.EditableTable tr.Selected input:not(.btn):not(.checkbox):not(.radio-button) {
    pointer-events: auto;
}

.OnEdit.EditableTable input:not(.btn):not(.checkbox):not(.radio-button) {
    pointer-events: none;
}

.OnEdit.EditableTable input:not(.btn):not(.checkbox):not(.radio-button)[readonly="readonly"] {
    color: var(--color-neutral-6);
}

.EditableTable .ColumnHeader {
    display: none;
}

.EditableTable tbody tr.RowControlGroup {
    position: relative;
    visibility: collapse;
}

.EditableTable tbody tr.RowControlGroup td {
    padding: var(--space-none);
    position: relative;
}

.EditableTable tr.RowControlGroup .ControlActions {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--color-neutral-3);
    border-top: var(--border-size-none);
    border: var(--border-size-s) solid var(--color-neutral-4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    left: 50%;
    position: absolute;
    top: -1px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: visible;
    width: 130px;
    z-index: 10;
    margin-top: 0;
    margin-left: 0;
}

.EditableTable tr.RowControlGroup a {
    cursor: pointer;
    font-size: var(--font-size-h5);
    text-align: center;
    width: 30px;
    color: var(--color-primary);
}

.tablet.portrait .EditableTable tbody tr td, .phone .EditableTable tbody tr td {
    padding: var(--space-s) var(--space-none);
}

body.tablet.portrait .EditableTable input:not(.InEditMode), 
body.tablet.portrait .EditableTable textarea:not(.InEditMode), 
body.tablet.portrait .EditableTable select:not(.InEditMode), 
body.phone .EditableTable input:not(.InEditMode), 
body.phone .EditableTable textarea:not(.InEditMode), 
body.phone .EditableTable select:not(.InEditMode) {
    font-size: 14px;
}

.tablet.portrait .EditableTable tbody tr:not(.RowControlGroup):not(.Selected) td:first-child, 
.phone .EditableTable tbody tr:not(.RowControlGroup):not(.Selected) td:first-child {
    border-bottom: 1px solid var(--color-neutral-4);
    position: relative;
}

.tablet.portrait .EditableTable tbody tr.Selected td, 
.phone .EditableTable tbody tr.Selected td {
    padding: var(--space-base) var(--space-base);
}

.tablet.portrait .EditableTable .ColumnHeader, 
.phone .EditableTable .ColumnHeader {
    color: var(--color-neutral-8);
    font-weight: var(--font-semi-bold);
    margin-bottom: var(--space-xs);
    text-align: left;
}

.tablet.portrait .EditableTable input:not(.InEditMode), 
.tablet.portrait .EditableTable textarea:not(.InEditMode), 
.tablet.portrait .EditableTable select:not(.InEditMode), 
.phone .EditableTable input:not(.InEditMode), 
.phone .EditableTable textarea:not(.InEditMode), 
.phone .EditableTable select:not(.InEditMode) {
    transition: none;
    padding: var(--space-none) var(--space-xl) var(--space-none) var(--space-base);
}

.tablet.portrait .EditableTable tbody tr:not(.RowControlGroup):not(.OnEdit) td:first-child:before, 
.phone .EditableTable tbody tr:not(.RowControlGroup):not(.OnEdit) td:first-child:before {
    color: var(--color-primary);
    content: "\f107";
    font: normal normal normal 24px/1 FontAwesome;
    position: absolute;
    right: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transition: transform 180ms linear;
            transition: transform 180ms linear;
    width: 16px;
    margin: 0;
}


/* $5.3 - RichWidgets - CounterMessage */
div.Counter_Message {
    color: var(--color-neutral-7);
}


/* $5.4 - RichWidgets - FeedbackAjaxWait */
div.Feedback_AjaxWait {
    background: var(--color-primary) var(--color-primary-lightest);
    border-radius: var(--border-radius-none);
    display: block;
    font-size: 0;
    height: 4px;
    padding: var(--space-none);
    position: fixed;
    top: 0;
    width: 100%;
}

div.Feedback_AjaxWait:before {
    -webkit-animation: ajax-wait 1700ms linear infinite;
            animation: ajax-wait 1700ms linear infinite;
    background-color: var(--color-primary);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    will-change: transform;
}

@-webkit-keyframes ajax-wait {
    0% {
        -webkit-transform: translateX(-105vw) translateZ(0) scaleX(1);
    }
    25% {
        -webkit-transform: translateX(-55vw) translateZ(0) scaleX(1.5);
    }
    50% {
        -webkit-transform: translateX(0) translateZ(0) scaleX(1.5);
    }
    75% {
        -webkit-transform: translateX(55vw) translateZ(0) scaleX(.5);
    }
    100% {
        -webkit-transform: translateX(105vw) translateZ(0) scaleX(.2);
    }
}

@keyframes ajax-wait {
    0% {
        transform: translateX(-105vw) translateZ(0) scaleX(1);
    }
    25% {
        transform: translateX(-55vw) translateZ(0) scaleX(1.5);
    }
    50% {
        transform: translateX(0) translateZ(0) scaleX(1.5);
    }
    75% {
        transform: translateX(55vw) translateZ(0) scaleX(.5);
    }
    100% {
        transform: translateX(105vw) translateZ(0) scaleX(.2);
    }
}

div.Feedback_AjaxWait img {
    display: none;
}


/* $5.5 - RichWidgets - FeedbackMessage */
div.Feedback_Message_Wrapper img {
    display: none;
}

div.Feedback_Message_Wrapper [class*="Feedback_Message_"] span {
    padding-left: var(--space-base);
}

div.Feedback_Message_Error,
div.Feedback_Message_Warning,
div.Feedback_Message_Success,
div.Feedback_Message_Info {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    border-radius: var(--border-radius-soft);
    border: var(--border-size-none);
    box-shadow: var(--shadow-none);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;    
    font-size: var(--font-size-h6);
    margin-left: var(--space-none);
    padding: var(--space-base);
    position: relative;
    max-width: 600px;
    min-width: 400px;
}

.phone div.Feedback_Message_Error,
.phone div.Feedback_Message_Warning,
.phone div.Feedback_Message_Success,
.phone div.Feedback_Message_Info {
    min-width: 300px;
}

div.Feedback_Message_Error {
    background-color: var(--color-error);
}

div.Feedback_Message_Error:before {
    content: "\f05e";
    font: normal normal normal 20px/1 FontAwesome;
    margin-top: 2px;
    position: relative;
    width: auto;
}

div.Feedback_Message_Warning {
    background-color: var(--color-warning);
}

div.Feedback_Message_Warning:before {
    content: "\f06a";
    font: normal normal normal 20px/1 FontAwesome;
    margin-top: 2px;
    position: relative;
    width: auto;
}

div.Feedback_Message_Success {
    background-color: var(--color-success);
}

div.Feedback_Message_Success:before {
    content: "\f058";
    font: normal normal normal 20px/1 FontAwesome;
    margin-top: 2px;
    position: relative;
    width: auto;
}

div.Feedback_Message_Info {
    background-color: var(--color-info);
}

div.Feedback_Message_Info:before {
    content: "\f05a";
    font: normal normal normal 20px/1 FontAwesome;
    margin-top: 2px;
    position: relative;
    width: auto;
}

a.Feedback_Message_Wrapper_Close {
    right: 8px;
    top: 0;
}

a.Feedback_Message_Wrapper_Close:before {
    color: var(--color-neutral-0);
    content: "\f00d";
    font: normal normal normal 14px FontAwesome;
    position: relative;
}

a.Feedback_Message_Wrapper_Close img {
    display: none;
}

div.Feedback_Message_Warning,
div.Feedback_Message_Warning a.Feedback_Message_Wrapper_Close:before {
    color: var(--color-neutral-10);
}


/* $5.6 - RichWidgets - Pagination */
.ListNavigation_Wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
       -ms-flex-pack: end;
     justify-content: flex-end;
}

.phone .ListNavigation_Wrapper {
    justify-content: flex-start;
    margin-top: 16px;
}

.ListNavigation_PageNumber {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    color: var(--color-neutral-8);
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: var(--font-regular);
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-left: var(--space-s);
    height: 32px;
    width: 32px;
    padding: var(--space-none);
    text-align: center;
}

a.ListNavigation_Previous,
a.ListNavigation_Next {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    color: var(--color-neutral-8);
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: var(--font-regular);
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-left: var(--space-s);
    height: 32px;
    width: 32px;
    padding: var(--space-none);
    text-align: center;
}

span.ListNavigation_DisabledPrevious,
span.ListNavigation_DisabledNext {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    color: var(--color-neutral-8);
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: var(--font-regular);
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-left: var(--space-s);
    height: 32px;
    width: 32px;
    opacity: .5;
    padding: var(--space-none);
    pointer-events: none;
    text-align: center;
}

a.ListNavigation_Previous,
a.ListNavigation_Next,
span.ListNavigation_DisabledPrevious,
span.ListNavigation_DisabledNext {
    font: normal normal normal 0 FontAwesome;
}

a.ListNavigation_Previous:before,
span.ListNavigation_DisabledPrevious:before {
    content: "\f104";
    position: relative;
    font-size: 14px;
}

a.ListNavigation_Next:before,
span.ListNavigation_DisabledNext:before {
    content: "\f105";
    position: relative;
    font-size: 14px;
}

.ListNavigation_CurrentPageNumber {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background: var(--color-primary) var(--color-primary-lightest);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    color: var(--color-primary);
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: var(--font-regular);
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-left: var(--space-s);
    height: 32px;
    width: 32px;
    padding: var(--space-none);
    text-align: center;
}

span.ListNavigation_CurrentPageNumber {
    font-weight: var(--font-regular);
}

.ListNavigation_PageNumber:hover, 
.ListNavigation_Previous:hover, 
.ListNavigation_Next:hover {
    background-color: rgba(21, 24, 26, .04);
    border: var(--border-size-s) solid var(--color-neutral-4);
    color: var(--color-neutral-8);
}

span.ListNavigation_Ellipsis {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: transparent;
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid transparent;
    color: var(--color-neutral-8);
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: var(--font-regular);
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-left: var(--space-s);
    height: 32px;
    width: 16px;
    padding: var(--space-none);
    pointer-events: none;
    text-align: center;
}

.list-navigation-inline .ListNavigation_PageNumber,
.list-navigation-inline a.ListNavigation_Previous,
.list-navigation-inline a.ListNavigation_Next,
.list-navigation-inline span.ListNavigation_DisabledPrevious,
.list-navigation-inline span.ListNavigation_DisabledNext {
    background-color: transparent;
    border: var(--border-size-s) solid transparent;
}

.list-navigation-inline .ListNavigation_PageNumber:hover,
.list-navigation-inline .ListNavigation_Previous:hover,
.list-navigation-inline .ListNavigation_Next:hover {
    background-color: rgba(21, 24, 26, .04);
    border: var(--border-size-s) solid var(--color-neutral-4);
    color: var(--color-neutral-8);
}

.list-navigation-sharp .ListNavigation_PageNumber,
.list-navigation-sharp a.ListNavigation_Previous,
.list-navigation-sharp a.ListNavigation_Next,
.list-navigation-sharp span.ListNavigation_DisabledPrevious,
.list-navigation-sharp span.ListNavigation_DisabledNext,
.list-navigation-sharp .ListNavigation_CurrentPageNumber {
    border-radius: var(--border-radius-none);
}

.list-navigation-circle .ListNavigation_PageNumber,
.list-navigation-circle a.ListNavigation_Previous,
.list-navigation-circle a.ListNavigation_Next,
.list-navigation-circle span.ListNavigation_DisabledPrevious,
.list-navigation-circle span.ListNavigation_DisabledNext,
.list-navigation-circle .ListNavigation_CurrentPageNumber {
    border-radius: var(--border-radius-circle);
}

/* $5.7 - RichWidgets - PopupEditor */

/* Popup Iframe **************************/
.os-internal-Popup.os-internal-ui-dialog iframe {
    border-radius: 4px;
}

/* Popups **************************/
.os-internal-Popup .os-internal-ui-dialog,
.os-internal-Popup.os-internal-ui-dialog {
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) !important;
    max-height: 95%; /* iframe document height fix */
    min-width: 300px;
    overflow: visible !important;
}

body.desktop .os-internal-Popup .os-internal-ui-dialog,
body.desktop .os-internal-Popup.os-internal-ui-dialog {
    min-width: 500px;
}

div.os-internal-Popup .os-internal-ui-dialog,
div.os-internal-Popup.os-internal-ui-dialog {
    background-color: #fff;
    border: none;
    border-radius: 4px;
    position: fixed;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-content,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-content {
    max-height: 100%; /* iframe document height fix */
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title {
    color: #fff;
    font-weight: 600;
    left: 20px;
    margin: 0;
    top: 10px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close {
    background: url(/OutSystemsUIWeb/img/PopupCloseWhite.png?14311&1452) no-repeat;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: all .3s ease;
    width: 20px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover {
    opacity: .7;
    transform: rotate(90deg);
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    background: #333;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 40px;
}

div.os-internal-Popup .os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space,
div.os-internal-Popup.os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space {
    height: 30px !important;
    background-color: transparent;
    cursor: default;
}

ul.os-internal-ui-autocomplete a {
    -webkit-transition: none;
            transition: none;
}

ul.os-internal-ui-autocomplete a.os-internal-ui-state-hover {
    background: #069;
    cursor: default;
    text-decoration: none;
}

.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title,
.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title {
    top: 4px;
}

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title {
    background: url(/OutSystemsUIWeb/img/PopupCloseDark.png?14311&1452) no-repeat;
    height: 20px;
    right: 5px;
    top: 5px;
    transition: all .3s ease;
    width: 20px;
}

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title:hover {
    background: url(/OutSystemsUIWeb/img/PopupCloseDark.png?14311&1452) no-repeat;
    opacity: .7;
    transform: rotate(90deg);
}

.tablet .MainPopup [class*="ThemeGrid_Width"]:not(.no-responsive) {
    margin: var(--space-none) var(--space-none) var(--space-base) var(--space-none);
    width: 100%;
}

.tablet .MainPopup .btn,
.tablet .MainPopup .Button {
    display: inline-flex;
    width: 100%;
    margin-left: 0;
}

.tablet .MainPopup .btn +.btn,
.tablet .MainPopup .Button + .Button {
    margin-top: var(--space-base);
}

.tablet .MainPopup .btn.ThemeGrid_MarginGutter,
.tablet .MainPopup .Button.ThemeGrid_MarginGutter {
    margin-left: var(--space-none);
}

.tablet .MainPopup .Button + .Button {
    margin-left: 0;
}

/* $5.8 - RichWidgets - Calendar */
div.calendar, 
div.calendar table {
    z-index: 110;
}

/* ================================================================ */
/*  $6 - Styles                                                     */
/* ================================================================ */

/* ================================================================ */
/*  $6.1 - Styles - Typography                                      */
/* ================================================================ */

/* $6.1.1 - Styles - Typography - Sizes Desktop */
.font-size-display {
    color: var(--color-neutral-10);
    font-size: var(--font-size-display);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
}

.heading1 {
    color: var(--color-neutral-10);
    font-size: var(--font-size-h1);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
}

.heading2 {
    color: var(--color-neutral-10);
    font-size: var(--font-size-h2);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
}

.heading3 {
    color: var(--color-neutral-10);
    font-size: var(--font-size-h3);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
}

.heading4 {
    color: var(--color-neutral-10);
    font-size: var(--font-size-h4);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
}

.heading5 {
    color: var(--color-neutral-10);
    font-size: var(--font-size-h5);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
}

.heading6 {
    color: var(--color-neutral-10);
    font-size: var(--font-size-h6);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
}

.font-size-base { font-size: var(--font-size-base); }
.font-size-s { font-size: var(--font-size-s); }
.font-size-xs { font-size: var(--font-size-xs); }


/* $6.1.2 - Styles - Typography - Sizes Tablet */
.tablet .font-size-display { --font-size-display: 34px; }
.tablet .heading1 { --font-size-h1: 30px; }
.tablet .heading2 { --font-size-h2: 26px; }
.tablet .heading3 { --font-size-h3: 24px; }
.tablet .heading4 { --font-size-h4: 21px; }
.tablet .heading5 { --font-size-h5: 19px; }
.tablet .heading6 { --font-size-h6: 17px; }


/* $6.1.3 - Styles - Typography - Sizes Tablet */
.phone .font-size-display { --font-size-display: 32px; }
.phone .heading1 { --font-size-h1: 28px; }
.phone .heading2 { --font-size-h2: 24px; }
.phone .heading3 { --font-size-h3: 22px; } 
.phone .heading4 { --font-size-h4: 20px; }
.phone .heading5 { --font-size-h5: 18px; }
.phone .heading6 { --font-size-h6: 16px; }


/* $6.1.4 - Styles - Typography - Transform */
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* $6.1.5 - Styles - Typography - Weight */
.font-light { font-weight: var(--font-light); }
.font-regular { font-weight: var(--font-regular); }
.font-semi-bold { font-weight: var(--font-semi-bold); }
.font-bold { font-weight: var(--font-bold); }



/* ================================================================ */
/*  $6.2 - Styles - Colors                                          */
/* ================================================================ */

/* $6.2.1 - Styles - Colors - Brand */
.background-primary { background-color: var(--color-primary); }
.background-secondary { background-color: var(--color-secondary); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }

/* Background and Text Colors used when IsLight parameter for Badge / Tag / UserInitials is True */
.background-primary-lightest { background-color: var(--color-neutral-0); }
.background-secondary-lightest { background-color: var(--color-neutral-0); }

.text-primary-darker { color: var(--color-primary);}
.text-secondary-darker { color: var(--color-secondary); }


/* $6.2.2 - Styles - Colors - Extendend */
.background-red-lightest { background-color: var(--color-red-lightest); }
.background-red-lighter { background-color: var(--color-red-lighter); }
.background-red-light { background-color: var(--color-red-light); }
.background-red { background-color: var(--color-red); }
.background-red-dark { background-color: var(--color-red-dark); }
.background-red-darker { background-color: var(--color-red-darker); }
.background-red-darkest { background-color: var(--color-red-darkest); }

.text-red-lightest { color: var(--color-red-lightest); }
.text-red-lighter { color: var(--color-red-lighter); }
.text-red-light { color: var(--color-red-light); }
.text-red { color: var(--color-red); }
.text-red-dark { color: var(--color-red-dark); }
.text-red-darker { color: var(--color-red-darker); }
.text-red-darkest { color: var(--color-red-darkest); }

.background-pink-lightest { background-color: var(--color-pink-lightest); }
.background-pink-lighter { background-color: var(--color-pink-lighter); }
.background-pink-light { background-color: var(--color-pink-light); }
.background-pink { background-color: var(--color-pink); }
.background-pink-dark { background-color: var(--color-pink-dark); }
.background-pink-darker { background-color: var(--color-pink-darker); }
.background-pink-darkest { background-color: var(--color-pink-darkest); }

.text-pink-lightest { color: var(--color-pink-lightest); }
.text-pink-lighter { color: var(--color-pink-lighter); }
.text-pink-light { color: var(--color-pink-light); }
.text-pink { color: var(--color-pink); }
.text-pink-dark { color: var(--color-pink-dark); }
.text-pink-darker { color: var(--color-pink-darker); }
.text-pink-darkest { color: var(--color-pink-darkest); }

.background-grape-lightest { background-color: var(--color-grape-lightest); }
.background-grape-lighter { background-color: var(--color-grape-lighter); }
.background-grape-light { background-color: var(--color-grape-light); }
.background-grape { background-color: var(--color-grape); }
.background-grape-dark { background-color: var(--color-grape-dark); }
.background-grape-darker {  background-color: var(--color-grape-darker); }
.background-grape-darkest { background-color: var(--color-grape-darkest); }

.text-grape-lightest { color: var(--color-grape-lightest); }
.text-grape-lighter { color: var(--color-grape-lighter); }
.text-grape-light { color: var(--color-grape-light); }
.text-grape { color: var(--color-grape); }
.text-grape-dark { color: var(--color-grape-dark); }
.text-grape-darker { color: var(--color-grape-darker); }
.text-grape-darkest { color: var(--color-grape-darkest); }

.background-violet-lightest { background-color: var(--color-violet-lightest); }
.background-violet-lighter { background-color: var(--color-violet-lighter); }
.background-violet-light { background-color: var(--color-violet-light); }
.background-violet { background-color: var(--color-violet); }
.background-violet-dark { background-color: var(--color-violet-dark); }
.background-violet-darker { background-color: var(--color-violet-darker); }
.background-violet-darkest { background-color: var(--color-violet-darkest); }

.text-violet-lightest { color: var(--color-violet-lightest); }
.text-violet-lighter { color: var(--color-violet-lighter); }
.text-violet-light { color: var(--color-violet-light); }
.text-violet { color: var(--color-violet); }
.text-violet-dark { color: var(--color-violet-dark); }
.text-violet-darker { color: var(--color-violet-darker); }
.text-violet-darkest { color: var(--color-violet-darkest); }

.background-indigo-lightest { background-color: var(--color-indigo-lightest); }
.background-indigo-lighter { background-color: var(--color-indigo-lighter); }
.background-indigo-light { background-color: var(--color-indigo-light); }
.background-indigo { background-color: var(--color-indigo); }
.background-indigo-dark { background-color: var(--color-indigo-dark); }
.background-indigo-darker { background-color: var(--color-indigo-darker); }
.background-indigo-darkest { background-color: var(--color-indigo-darkest); }

.text-indigo-lightest { color: var(--color-indigo-lightest); }
.text-indigo-lighter { color: var(--color-indigo-lighter); }
.text-indigo-light { color: var(--color-indigo-light); }
.text-indigo { color: var(--color-indigo); }
.text-indigo-dark { color: var(--color-indigo-dark); }
.text-indigo-darker { color: var(--color-indigo-darker); }
.text-indigo-darkest { color: var(--color-indigo-darkest); }

.background-blue-lightest { background-color: var(--color-blue-lightest); }
.background-blue-lighter { background-color: var(--color-blue-lighter); }
.background-blue-light { background-color: var(--color-blue-light); }
.background-blue { background-color: var(--color-blue); }
.background-blue-dark { background-color: var(--color-blue-dark); }
.background-blue-darker { background-color: var(--color-blue-darker); }
.background-blue-darkest { background-color: var(--color-blue-darkest); }

.text-blue-lightest { color: var(--color-blue-lightest); }
.text-blue-lighter { color: var(--color-blue-lighter); }
.text-blue-light { color: var(--color-blue-light); }
.text-blue { color: var(--color-blue); }
.text-blue-dark { color: var(--color-blue-dark); }
.text-blue-darker {color: var(--color-blue-darker); }
.text-blue-darkest { color: var(--color-blue-darkest); }

.background-cyan-lightest { background-color: var(--color-cyan-lightest); }
.background-cyan-lighter { background-color: var(--color-cyan-lighter); }
.background-cyan-light { background-color: var(--color-cyan-light); }
.background-cyan { background-color: var(--color-cyan); }
.background-cyan-dark { background-color: var(--color-cyan-dark); }
.background-cyan-darker { background-color: var(--color-cyan-darker); }
.background-cyan-darkest { background-color: var(--color-cyan-darkest); }

.text-cyan-lightest { color: var(--color-cyan-lightest); }
.text-cyan-lighter { color: var(--color-cyan-lighter); }
.text-cyan-light { color: var(--color-cyan-light); }
.text-cyan { color: var(--color-cyan); }
.text-cyan-dark { color: var(--color-cyan-dark); }
.text-cyan-darker { color: var(--color-cyan-darker); }
.text-cyan-darkest { color: var(--color-cyan-darkest); }

.background-teal-lightest { background-color: var(--color-teal-lightest); }
.background-teal-lighter { background-color: var(--color-teal-lighter); }
.background-teal-light { background-color: var(--color-teal-light); }
.background-teal { background-color: var(--color-teal); }
.background-teal-dark { background-color: var(--color-teal-dark); }
.background-teal-darker { background-color: var(--color-teal-darker); }
.background-teal-darkest { background-color: var(--color-teal-darkest); }

.text-teal-lightest { color: var(--color-teal-lightest); }
.text-teal-lighter { color: var(--color-teal-lighter); }
.text-teal-light { color: var(--color-teal-light); }
.text-teal { color: var(--color-teal); }
.text-teal-dark { color: var(--color-teal-dark); }
.text-teal-darker { color: var(--color-teal-darker); }
.text-teal-darkest { color: var(--color-teal-darkest); }

.background-green-lightest { background-color: var(--color-green-lightest); }
.background-green-lighter { background-color: var(--color-green-lighter); }
.background-green-light { background-color: var(--color-green-light); }
.background-green { background-color: var(--color-green); }
.background-green-dark { background-color: var(--color-green-dark); } 
.background-green-darker { background-color: var(--color-green-darker); }
.background-green-darkest { background-color: var(--color-green-darkest); }

.text-green-lightest { color: var(--color-green-lightest); }
.text-green-lighter { color: var(--color-green-lighter); } 
.text-green-light { color: var(--color-green-light); }
.text-green { color: var(--color-green); }
.text-green-dark { color: var(--color-green-dark); }
.text-green-darker { color: var(--color-green-darker); }
.text-green-darkest { color: var(--color-green-darkest); }

.background-lime-lightest { background-color: var(--color-lime-lightest); }
.background-lime-lighter { background-color: var(--color-lime-lighter); }
.background-lime-light { background-color: var(--color-lime-light); }
.background-lime { background-color: var(--color-lime); }
.background-lime-dark { background-color: var(--color-lime-dark); }
.background-lime-darker { background-color: var(--color-lime-darker); }
.background-lime-darkest { background-color: var(--color-lime-darkest); }

.text-lime-lightest { color: var(--color-lime-lightest); }
.text-lime-lighter { color: var(--color-lime-lighter); }
.text-lime-light { color: var(--color-lime-light); }
.text-lime { color: var(--color-lime); }
.text-lime-dark { color: var(--color-lime-dark); }
.text-lime-darker { color: var(--color-lime-darker); }
.text-lime-darkest { color: var(--color-lime-darkest); }

.background-yellow-lightest { background-color: var(--color-yellow-lightest); }
.background-yellow-lighter { background-color: var(--color-yellow-lighter); }
.background-yellow-light { background-color: var(--color-yellow-light); }
.background-yellow { background-color: var(--color-yellow); }
.background-yellow-dark { background-color: var(--color-yellow-dark); }
.background-yellow-darker { background-color: var(--color-yellow-darker); }
.background-yellow-darkest { background-color: var(--color-yellow-darkest); }

.text-yellow-lightest { color: var(--color-yellow-lightest); }
.text-yellow-lighter { color: var(--color-yellow-lighter); }
.text-yellow-light { color: var(--color-yellow-light); }
.text-yellow { color: var(--color-yellow); }
.text-yellow-dark { color: var(--color-yellow-dark); }
.text-yellow-darker { color: var(--color-yellow-darker); }
.text-yellow-darkest { color: var(--color-yellow-darkest); }

.background-orange-lightest { background-color: var(--color-orange-lightest); }
.background-orange-lighter { background-color: var(--color-orange-lighter); }
.background-orange-light { background-color: var(--color-orange-light); }
.background-orange { background-color: var(--color-orange); }
.background-orange-dark { background-color: var(--color-orange-dark); }
.background-orange-darker { background-color: var(--color-orange-darker); }
.background-orange-darkest { background-color: var(--color-orange-darkest); }

.text-orange-lightest { color: var(--color-orange-lightest); }
.text-orange-lighter { color: var(--color-orange-lighter); }
.text-orange-light { color: var(--color-orange-light); }
.text-orange { color: var(--color-orange); }
.text-orange-dark { color: var(--color-orange-dark); }
.text-orange-darker { color: var(--color-orange-darker); }
.text-orange-darkest { color: var(--color-orange-darkest); }


/* $6.2.3 - Styles - Colors - Neutral */
.background-transparent { background-color: transparent; }
.background-neutral-0 { background-color: var(--color-neutral-0); }
.background-neutral-1 { background-color: var(--color-neutral-1); }
.background-neutral-2 { background-color: var(--color-neutral-2); }
.background-neutral-3 { background-color: var(--color-neutral-3); }
.background-neutral-4 { background-color: var(--color-neutral-4); }
.background-neutral-5 { background-color: var(--color-neutral-5); }
.background-neutral-6 { background-color: var(--color-neutral-6); }
.background-neutral-7 { background-color: var(--color-neutral-7); }
.background-neutral-8 { background-color: var(--color-neutral-8); }
.background-neutral-9 { background-color: var(--color-neutral-9); }
.background-neutral-10 { background-color: var(--color-neutral-10); }

.text-transparent { color: transparent; }
.text-neutral-0 { color: var(--color-neutral-0); }
.text-neutral-1 { color: var(--color-neutral-1); }
.text-neutral-2 { color: var(--color-neutral-2); }
.text-neutral-3 { color: var(--color-neutral-3); }
.text-neutral-4 { color: var(--color-neutral-4); }
.text-neutral-5 { color: var(--color-neutral-5); }
.text-neutral-6 { color: var(--color-neutral-6); }
.text-neutral-7 { color: var(--color-neutral-7); }
.text-neutral-8 { color: var(--color-neutral-8); }
.text-neutral-9 { color: var(--color-neutral-9); }
.text-neutral-10 { color: var(--color-neutral-10); }

/* Background and Text Colors used when IsLight parameter for Badge / Tag / UserInitials is True */
.background-neutral-0-lightest,
.background-neutral-1-lightest,
.background-neutral-2-lightest,
.background-neutral-3-lightest,
.background-neutral-4-lightest {
    background-color: var(--color-neutral-9);  
}

.background-neutral-5-lightest,
.background-neutral-6-lightest,
.background-neutral-7-lightest,
.background-neutral-8-lightest,
.background-neutral-9-lightest,
.background-neutral-10-lightest {
    background-color: var(--color-neutral-0);
}

.text-neutral-5-darker { color: var(--color-neutral-5); }
.text-neutral-6-darker { color: var(--color-neutral-6); }
.text-neutral-7-darker { color: var(--color-neutral-7); }
.text-neutral-8-darker { color: var(--color-neutral-8); }
.text-neutral-9-darker { color: var(--color-neutral-9); }
.text-neutral-10-darker { color: var(--color-neutral-10); }

/* Background Transparent when used in IE11 to be more specific than CSSVars Polyfill */
.ie11 .background-transparent { background-color: transparent; }


/* $6.2.4 - Styles - Colors - Semantic */
.background-error-light { background-color: var(--color-error-light); }
.background-error { background-color: var(--color-error); }

.text-error-light { color: var(--color-error-light); }
.text-error { color: var(--color-error); }

.background-warning-light { background-color: var(--color-warning-light); }
.background-warning { background-color: var(--color-warning); }

.text-warning-light { color: var(--color-warning-light); }
.text-warning { color: var(--color-warning); }

.background-success-light { background-color: var(--color-success-light); }
.background-success { background-color: var(--color-success); }

.text-success-light { color: var(--color-success-light); }
.text-success { color: var(--color-success); }

.background-info-light { background-color: var(--color-info-light); }
.background-info { background-color: var(--color-info); }

.text-info-light { color: var(--color-info-light); }
.text-info { color: var(--color-info); }

/* ================================================================ */
/*  $6.3 - Styles - Space                                           */
/* ================================================================ */

/* $6.3.1 - Styles - Space - Padding */
.padding-none { padding: var(--space-none); }
.padding-xs { padding: var(--space-xs); }
.padding-s { padding: var(--space-s); }
.padding-base {  padding: var(--space-base); }
.padding-m { padding: var(--space-m); }
.padding-l { padding: var(--space-l); }
.padding-xl { padding: var(--space-xl); }
.padding-xxl { padding: var(--space-xxl); }


/* $6.3.2 - Styles - Space - Padding Top */
.padding-top-none { padding-top: var(--space-none); }
.padding-top-xs { padding-top: var(--space-xs); }
.padding-top-s { padding-top: var(--space-s); }
.padding-top-base { padding-top: var(--space-base); }
.padding-top-m { padding-top: var(--space-m); }
.padding-top-l { padding-top: var(--space-l); }
.padding-top-xl { padding-top: var(--space-xl); }
.padding-top-xxl { padding-top: var(--space-xxl); }


/* $6.3.3 - Styles - Space - Padding Right */
.padding-right-none { padding-right: var(--space-none); }
.padding-right-xs { padding-right: var(--space-xs); }
.padding-right-s { padding-right: var(--space-s); }
.padding-right-base { padding-right: var(--space-base); }
.padding-right-m { padding-right: var(--space-m); }
.padding-right-l { padding-right: var(--space-l); }
.padding-right-xl { padding-right: var(--space-xl); }
.padding-right-xxl { padding-right: var(--space-xxl); }


/* $6.3.4 - Styles - Space - Padding Bottom */
.padding-bottom-none { padding-bottom: var(--space-none); }
.padding-bottom-xs { padding-bottom: var(--space-xs); }
.padding-bottom-s { padding-bottom: var(--space-s); }
.padding-bottom-base { padding-bottom: var(--space-base); }
.padding-bottom-m { padding-bottom: var(--space-m); }
.padding-bottom-l { padding-bottom: var(--space-l); }
.padding-bottom-xl { padding-bottom: var(--space-xl); }
.padding-bottom-xxl { padding-bottom: var(--space-xxl); }


/* $6.3.5 - Styles - Space - Padding Left */
.padding-left-none { padding-left: var(--space-none); }
.padding-left-xs { padding-left: var(--space-xs); }
.padding-left-s { padding-left: var(--space-s); }
.padding-left-base { padding-left: var(--space-base); }
.padding-left-m { padding-left: var(--space-m); }
.padding-left-l { padding-left: var(--space-l); }
.padding-left-xl { padding-left: var(--space-xl); }
.padding-left-xxl { padding-left: var(--space-xxl); }


/* $6.3.6 - Styles - Space - Padding Vertical */
.padding-y-none {
    padding-top: var(--space-none);
    padding-bottom: var(--space-none);
}
.padding-y-xs {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
}
.padding-y-s {
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
}
.padding-y-base {
    padding-top: var(--space-base);
    padding-bottom: var(--space-base);
}
.padding-y-m {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
}
.padding-y-l {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
}
.padding-y-xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}
.padding-y-xxl {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);
}


/* $6.3.7 - Styles - Space - Padding Horizontal */
.padding-x-none {
    padding-left: var(--space-none);
    padding-right: var(--space-none);
}
.padding-x-xs {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
}
.padding-x-s {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
}
.padding-x-base {
    padding-left: var(--space-base);
    padding-right: var(--space-base);
}
.padding-x-m {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}
.padding-x-l {
    padding-left: var(--space-l);
    padding-right: var(--space-l);
}
.padding-x-xl {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}
.padding-x-xxl {
    padding-left: var(--space-xxl);
    padding-right: var(--space-xxl);
}


/* $6.3.8 - Styles - Space - Margin */
.margin-none { margin: var(--space-none); }
.margin-xs { margin: var(--space-xs); }
.margin-s { margin: var(--space-s); }
.margin-base { margin: var(--space-base); }
.margin-m { margin: var(--space-m); }
.margin-l { margin: var(--space-l); }
.margin-xl { margin: var(--space-xl); }
.margin-xxl { margin: var(--space-xxl); }

.margin-auto { margin: 0 auto;}


/* $6.3.9 - Styles - Space - Margin Top */
.margin-top-none { margin-top: var(--space-none); }
.margin-top-xs { margin-top: var(--space-xs); }
.margin-top-s { margin-top: var(--space-s); }
.margin-top-base { margin-top: var(--space-base); }
.margin-top-m { margin-top: var(--space-m); }
.margin-top-l { margin-top: var(--space-l); }
.margin-top-xl { margin-top: var(--space-xl); }
.margin-top-xxl { margin-top: var(--space-xxl); }


/* $6.3.10 - Styles - Space - Margin Right */
.margin-right-none { margin-right: var(--space-none); }
.margin-right-xs { margin-right: var(--space-xs); }
.margin-right-s { margin-right: var(--space-s); }
.margin-right-base { margin-right: var(--space-base); }
.margin-right-m { margin-right: var(--space-m); }
.margin-right-l { margin-right: var(--space-l); }
.margin-right-xl { margin-right: var(--space-xl); }
.margin-right-xxl { margin-right: var(--space-xxl); }


/* $6.3.11 - Styles - Space - Margin Bottom */
.margin-bottom-none { margin-bottom: var(--space-none); }
.margin-bottom-xs { margin-bottom: var(--space-xs); }
.margin-bottom-s { margin-bottom: var(--space-s); }
.margin-bottom-base { margin-bottom: var(--space-base); }
.margin-bottom-m { margin-bottom: var(--space-m); }
.margin-bottom-l { margin-bottom: var(--space-l); }
.margin-bottom-xl { margin-bottom: var(--space-xl); } 
.margin-bottom-xxl { margin-bottom: var(--space-xxl); }


/* $6.3.12 - Styles - Space - Margin Left */
.margin-left-none { margin-left: var(--space-none); }
.margin-left-xs { margin-left: var(--space-xs); }
.margin-left-s { margin-left: var(--space-s); }
.margin-left-base { margin-left: var(--space-base); }
.margin-left-m { margin-left: var(--space-m); }
.margin-left-l { margin-left: var(--space-l); }
.margin-left-xl { margin-left: var(--space-xl); }
.margin-left-xxl { margin-left: var(--space-xxl); }


/* $6.3.13 - Styles - Space - Margin Vertical */
.margin-y-none {
    margin-top: var(--space-none);
    margin-bottom: var(--space-none);
}
.margin-y-xs {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}
.margin-y-s {
    margin-top: var(--space-s);
    margin-bottom: var(--space-s);
}
.margin-y-base {
    margin-top: var(--space-base);
    margin-bottom: var(--space-base);
}
.margin-y-m {
    margin-top: var(--space-m);
    margin-bottom: var(--space-m);
}
.margin-y-l {
    margin-top: var(--space-l);
    margin-bottom: var(--space-l);
}
.margin-y-xl {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}
.margin-y-xxl {
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-xxl);
}


/* $6.3.14 - Styles - Space - Margin Horizontal */
.margin-x-none {
    margin-left: var(--space-none);
    margin-right: var(--space-none);
}
.margin-x-xs {
    margin-left: var(--space-xs);
    margin-right: var(--space-xs);
}
.margin-x-s {
    margin-left: var(--space-s);
    margin-right: var(--space-s);
}
.margin-x-base {
    margin-left: var(--space-base);
    margin-right: var(--space-base);
}
.margin-x-m {
    margin-left: var(--space-m);
    margin-right: var(--space-m);
}
.margin-x-l {
    margin-left: var(--space-l);
    margin-right: var(--space-l);
}
.margin-x-xl {
    margin-left: var(--space-xl);
    margin-right: var(--space-xl);
}
.margin-x-xxl {
    margin-left: var(--space-xxl);
    margin-right: var(--space-xxl);
}


/* ================================================================ */
/*  $6.4 - Styles - Border Radius                                   */
/* ================================================================ */
.border-radius-none { border-radius: var(--border-radius-none); }
.border-radius-soft { border-radius: var(--border-radius-soft); }
.border-radius-rounded { border-radius: var(--border-radius-rounded); }
.border-radius-circle { border-radius: var(--border-radius-circle); }


/* ================================================================ */
/*  $6.5 - Styles - Border Size                                     */
/* ================================================================ */
.border-size-none { border-width: var(--border-size-none); }
.border-size-s { border: var(--border-size-s) solid currentColor; }
.border-size-m {border: var(--border-size-m) solid currentColor; }
.border-size-l { border: var(--border-size-l) solid currentColor; }


/* ================================================================ */
/*  $6.6 - Styles - Elevation/Shadows                               */
/* ================================================================ */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-xs { box-shadow: var(--shadow-xs);}
.shadow-s { box-shadow: var(--shadow-s); }
.shadow-m { box-shadow: var(--shadow-m); }
.shadow-l { box-shadow: var(--shadow-l); }
.shadow-xl { box-shadow: var(--shadow-xl); }


/* ================================================================ */
/*  $6.7 - Styles - Display Flex Properties                         */
/* ================================================================ */
.display-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.align-items-center {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
}

.justify-content-flex-end {
    -webkit-box-pack: end;
       -ms-flex-pack: end;
    justify-content: flex-end;
}

.flex1 {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.flex2 {
    -webkit-box-flex: 2;
            -ms-flex: 2;
                flex: 2;
}

.flex3 {
    -webkit-box-flex: 3;
            -ms-flex: 3;
                flex: 3;
}

.flex-direction-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
}

.flex-direction-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
}

.flex-direction-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
}

.top-left {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    -webkit-box-pack: start;
       -ms-flex-pack: start;
     justify-content: flex-start;
}

.top-center {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}

.top-right {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    -webkit-box-pack: end;
       -ms-flex-pack: end;
     justify-content: flex-end;
}

.center-left {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    -webkit-box-pack: start;
       -ms-flex-pack: start;
     justify-content: flex-start;
}

.center {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}

.center-right {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    -webkit-box-pack: end;
       -ms-flex-pack: end;
     justify-content: flex-end;
}

.bottom-left {
    -webkit-box-align: end;
       -ms-flex-align: end;
          align-items: flex-end;
    -webkit-box-pack: start;
       -ms-flex-pack: start;
     justify-content: flex-start;    
}

.bottom-center {
    -webkit-box-align: end;
       -ms-flex-align: end;
          align-items: flex-end;    
    -webkit-box-pack: center;    
       -ms-flex-pack: center;    
     justify-content: center;
}

.bottom-right {
    -webkit-box-align: end;
       -ms-flex-align: end;
          align-items: flex-end;
    -webkit-box-pack: end;
       -ms-flex-pack: end;
     justify-content: flex-end;
}


/* ================================================================ */
/*  $6.8 - Styles - Others                                          */
/* ================================================================ */
.display-block { display: block; }

.ph:empty { display: none; }

.hidden { display: none; }

.full-height { height: 100%; }

.full-width { width: 100%;}

.text-align-left { text-align: left; }

.text-align-center { text-align: center; }

.text-align-right { text-align: right; }

.fixed { position: fixed; }

.overflow-hidden { overflow: hidden; }

.sticky {     
    position: -webkit-sticky;
    position: sticky; 
}

.img-cover {
    object-fit: cover;
    height: 100%;
}

[disabled="disabled"],
[readonly="readonly"],
textarea[readonly="readonly"] {
    background-color: var(--color-neutral-2);
    border: 1px solid var(--color-neutral-4);
    color: var(--color-neutral-6);
    pointer-events: none;
}

a:not(.Button)[disabled="disabled"] {
    background-color: transparent;
    border: none;
}

.hide-on-service-studio {
    
}

@font-face {
    font-family: 'SilkWeb4';
    src: url('SilkWeb4.eot');
    src: url('SilkWeb4.eot#iefix') format('embedded-opentype'),
         url('SilkWeb4.ttf') format('truetype'),
         url('SilkWeb4.woff') format('woff'),
         url('SilkWeb4.svg#SilkWeb4') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'SilkWeb4' !important;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-silk-search:before { content: "\f002"; }
.icon-silk-chevron-down:before { content: "\f078"; }
.icon-silk-angle-down:before { content: "\f107"; }
.icon-silk-rocket:before { content: "\e900"; }

.highcharts-container,
.highcharts-container > svg {
   
}

/* Skip-nav link used on Accessibility*/
.skip-nav[data-showskipcontent="False"] {
    display: none;
}

.skip-nav[data-showskipcontent="True"] {
    display: block;
}

.skip-nav {
    left: var(--space-xl);
    opacity: 0;
    pointer-events: none;
    padding: var(--space-s) var(--space-base);
    position: absolute;
    text-transform: uppercase;
    top: 10px;
    z-index: 100;     
}

.skip-nav:focus,
.skip-nav:active {
    background-color: var(--color-info);
    color: var(--color-neutral-0); 
    opacity: 1;
    pointer-events: auto;    
}


/* ================================================================ */
/*  $7 - Right-to-Left Mode                                         */
/* ================================================================ */

/* ================================================================ */
/*  $7.1 - RTL Mode - Page Layout / HTML Elements                   */
/* ================================================================ */

.is-rtl {
    direction: rtl;
}

/* RTL Mode - Side Menu - Navigation */
.is-rtl .layout.layout-side .navigation {
    left: auto;
}

/* RTL Mode - Side Menu - Header */
.is-rtl.desktop-hd .layout.layout-side .header {
    left: 0;
    right: var(--side-menu-size);
}

.is-rtl.desktop-big .layout.layout-side .header {
    left: 0;
    right: calc(var(--side-menu-size) - 20px);
}

.is-rtl .layout.layout-side .header {
    left: 0;
    right: calc(var(--side-menu-size) - 40px);
}

.is-rtl.desktop-small .layout.layout-side .header {
    left: 0;
    right: calc(var(--side-menu-size) - 60px);
}

.is-rtl.phone .layout.layout-side .header,
.is-rtl.tablet .layout.layout-side .header {
    right: 0;
}

/* RTL Mode - Side Menu - Main */
.is-rtl.desktop-hd .layout.layout-side .main {
    margin-left: 0;
    margin-right: var(--side-menu-size);
}

.is-rtl.desktop-big .layout.layout-side .main {
    margin-left: 0;
    margin-right: calc(var(--side-menu-size) - 20px);
}

.is-rtl .layout.layout-side .main {
    margin-left: 0;
    margin-right: calc(var(--side-menu-size) - 40px);
}

.is-rtl.desktop-small .layout.layout-side .main {
    margin-left: 0;
    margin-right: calc(var(--side-menu-size) - 60px);
}

.is-rtl.phone .layout.layout-side .main,
.is-rtl.tablet .layout.layout-side .main {
    margin-right: 0;
}

.is-rtl .app-logo {
    margin-right: var(--space-none);
    margin-left: var(--space-s);
}

.is-rtl .Menu_TopMenu .fa, 
.is-rtl .Menu_DropDownPanel .fa {
     margin-left: var(--space-s);
     margin-right: var(--space-none);
}

.is-rtl .Menu_DropDownPanel a,
.is-rtl .Menu_DropDownPanel a:link,
.is-rtl .Menu_DropDownPanel a:visited {
    padding: var(--space-s) var(--space-l) var(--space-s) var(--space-base);
    text-align: right;
}

.is-rtl .layout-top .Menu_DropDownPanel a,
.is-rtl .layout-top .Menu_DropDownPanel a:link,
.is-rtl .layout-top .Menu_DropDownPanel a:visited {
    padding: var(--space-s) var(--space-base);
}

.is-rtl .Menu_DropDownArrow:before { left: 0; }

.is-rtl .Menu_DropDownArrow:after { right: 8px; }

.is-rtl .Menu_DropDownButton.open .Menu_DropDownArrow:before { left: 6px; }

.is-rtl .Menu_DropDownButton.open .Menu_DropDownArrow:after { right: 12px; }

.is-rtl .content-top-actions { text-align: left; }

.is-rtl .select { background-position: center left 16px; }

.is-rtl .menu-icon {
    margin-left: var(--space-m);
    margin-right: 0;
}

.is-rtl.tablet .layout-side .navigation, 
.is-rtl.phone .layout-side .navigation, 
.is-rtl.tablet .layout-top .Menu_TopMenus, 
.is-rtl.phone .layout-top .Menu_TopMenus {
    right: calc(0px - var(--side-menu-size));
    left: auto;
}

.is-rtl.tablet .layout-side .navigation:before, 
.is-rtl.phone .layout-side .navigation:before {
    right: 300px;
    left: 0;
}

.is-rtl.tablet .layout-top .is--visible .Menu_TopMenus,
.is-rtl.phone .layout-top .is--visible .Menu_TopMenus,
.is-rtl.tablet .layout-side .is--visible.navigation,
.is-rtl.phone .layout-side .is--visible.navigation  {
    transform: translateX(-100%);
}

.is-rtl .Button + .Button {
    margin-left: 0;
    margin-right: 24px;
}

/* ================================================================ */
/*  $7.2 - RTL Mode - Patterns - Content                            */
/* ================================================================ */

/* $7.2.1 - RTL Mode - Patterns - Content - Alert */
.is-rtl .alert-icon {
    margin-left: var(--space-base);
    margin-right: var(--space-none);
}

.is-rtl .alert-close {
    margin-left: var(--space-none);
    margin-right: var(--space-base);    
}

/* $7.2.2 - RTL Mode - Patterns - Content - CardSectioned */
.is-rtl .card-sectioned.flex-direction-row .card-image.padding-none { padding: var(--space-none); }

.is-rtl .card-sectioned.flex-direction-row .card-image { padding: var(--space-m) var(--space-m) var(--space-m) var(--space-none); }

.is-rtl .card-sectioned.flex-direction-row.card-sectioned-right .card-image { padding: var(--space-m) var(--space-none) var(--space-m) var(--space-m); }

.is-rtl .card-sectioned.flex-direction-row.card-sectioned-right .card-image.padding-none { padding: var(--space-none); }

/* $7.2.3 - RTL Mode - Patterns - Content - ChatMessage */
.is-rtl .chat-photo {
    margin-left: var(--space-base);
}

.is-rtl .chat.is-right .chat-photo {
    margin-right: var(--space-base);
}


/* ================================================================ */
/*  $7.3 - RTL Mode - Patterns - Controls                           */
/* ================================================================ */

/* $7.3.1 - RTL Mode - Patterns - Controls - AnimatedLabel */
.is-rtl .animated-label-text {
    left: auto;
    right: 16px;
}

.is-rtl .animated-label-inline .animated-label-text {
    left: auto;
    right: 0;
}


/* $7.3.2 - RTL Mode - Patterns - Controls - ButtonGroup */
.is-rtl .button-group label:first-child .btn {
    border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
}

.is-rtl .button-group label:last-child .btn {
    border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
}

.is-rtl .button-group label:not(:first-child) .btn {
    border-right: var(--border-size-none);
    border-left: var(--border-size-s) solid var(--color-primary);
}

.is-rtl.phone .button-group label .btn:not(:first-child) {
    border-right: 1px solid var(--color-primary);
}

.is-rtl.phone .button-group label:first-child .btn {
    border-radius: var(--space-none);
    border-top-left-radius: var(--border-radius-soft);
    border-top-right-radius: var(--border-radius-soft);
}

.is-rtl.phone .button-group label:last-child .btn {
    border-radius: var(--space-none);
    border-bottom-left-radius: var(--border-radius-soft);
    border-bottom-right-radius: var(--border-radius-soft);
}


/* $7.3.3 - RTL Mode - Patterns - Controls - DatePicker */
.is-rtl .pika-next {
    margin-left: var(--space-none);
    transform: rotate(180deg);
}

.is-rtl .pika-prev {
    transform: rotate(180deg);  
    margin-left: var(--space-base);  
}

.is-rtl .pika-select-month { margin-right: var(--space-none); }

.is-rtl .pika-select-year { margin-right: var(--space-base); }


/* $7.3.4 - RTL Mode - Patterns - Controls - FileUpload */
.is-rtl .file-upload .file-upload-message {
    padding-left: var(--space-none);
    padding-right: var(--space-base);
}


/* $7.3.5 - RTL Mode - Patterns - Controls - FloatingActions */
.is-rtl .floating-actions {
    left: 0;
    right: auto;
}

.is-rtl .floating-actions-item-button {
    margin-left: var(--space-none);
    margin-right: var(--space-base);
}

.is-rtl .floating-actions-items {
    padding-left: var(--space-s);
    padding-right: var(--space-none);
}

.is-rtl .floating-actions-button {
    direction: ltr;
}


/* $7.3.6 - RTL Mode - Patterns - Controls - InputWithIcons */
.is-rtl .input-with-icon.flex-direction-row .input-with-icon-content-icon:not(:empty)+.input-with-icon-input input {
    padding-left: var(--space-base);
    padding-right: var(--space-xl);
}

.is-rtl .input-with-icon.flex-direction-row-reverse .input-with-icon-content-icon:not(:empty)+.input-with-icon-input input {
    padding-left: var(--space-xl);
    padding-right: var(--space-base);
}

.is-rtl .input-with-icon.flex-direction-row .input-with-icon-content-icon.search-actions {
    left: 0;
    right: auto;
}

.is-rtl .search .input-with-icon .input-with-icon-content-icon {
    left: auto;
}

.is-rtl .search  .input-with-icon.flex-direction-row .input-with-icon-content-icon:not(:empty)+.input-with-icon-input input {
    padding: 0 var(--space-xl);
}

/* $7.3.7 - RTL Mode - Patterns - Controls - RangeSlider */
.is-rtl .range-slider-label {
    margin-left: var(--space-none);
    margin-right: var(--space-s);
}


/* $7.3.8 - RTL Mode - Patterns - Controls - ToogleButton */
.is-rtl .toggle-button:after {
    -webkit-transform: translateX(21px);
            transform: translateX(21px);
}

.is-rtl .toggle-button.toggle-button-checked:after {
    -webkit-transform: translateX(3px);
            transform: translateX(3px);
}


/* ================================================================ */
/*  $7.4 - RTL Mode - Patterns - Navigation                         */
/* ================================================================ */

/* $7.4.1 - RTL Mode - Patterns - Navigation - SectionIndex */
.is-rtl .section-index {
    border-left: none;
    border-right: var(--border-size-s) solid var(--color-neutral-4);
}

.is-rtl a.section-index-item.is--active {
    border-left: none;
    border-right: var(--border-size-m) solid var(--color-primary);
}

.is-rtl .section-index a, 
.is-rtl .section-index a:visited {
    border-left: none;
    border-right: var(--border-size-m) solid transparent;
    padding: var(--space-none) var(--space-base) var(--space-none) var(--space-none);
}

/* $7.4.2 - RTL Mode - Patterns - Navigation - Sidebar */
.is-rtl .sidebar-container {
    left: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    right: auto;
}

.is-rtl .is--visible .sidebar-container.enter-right {
    -webkit-animation-name: enter-left;
            animation-name: enter-left;
}

.is-rtl .is--hidden .sidebar-container.leave-right {
    -webkit-animation-name: leave-left;
            animation-name: leave-left;
}


/* $7.4.3 - RTL Mode - Patterns - Navigation - Tabs */
.is-rtl .tabs-header-item {
    margin-left: var(--space-none);
    margin-right: var(--space-l);
}

.is-rtl .tabs-header-item:first-child {
    margin-right: var(--space-none);
}

.is-rtl .tabs-header-item .badge {
    margin-left: var(--space-none);
    margin-right: var(--space-s);
}

.is-rtl .tabs-header-item .fa-fw {
    margin-left: var(--space-s);
    margin-right: var(--space-none);
}

.is-rtl .tabs.tabs-vertical .tabs-header-item {
    border-left: var(--border-size-m) solid transparent;
    border-right: var(--border-size-none) solid transparent;
    margin-right: var(--space-none);
    padding: var(--space-s) var(--space-none) var(--space-s) var(--space-m);
}

.is-rtl .tabs.tabs-vertical .tabs-header-item.active {
    border-left: var(--border-size-m) solid var(--color-primary);
    border-right: var(--border-size-none) solid transparent;
}

.is-rtl .tabs.tabs-vertical .tabs-content {
    border-right: var(--border-size-s) solid var(--color-neutral-5);
    border-left: var(--border-size-none) solid transparent;
    margin-left: 0;
    margin-right: -1px;
}

.is-rtl .card > .tabs.tabs-vertical .tabs-header-item {
    padding: var(--space-base) var(--space-m) var(--space-base) var(--space-m)
}

.is-rtl .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item {
    border-left: var(--border-size-none) solid transparent;
    border-right: var(--border-size-m) solid transparent;
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-none);
    text-align: left;
    justify-content: flex-end;
}

.is-rtl .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item.active {
    border-right: var(--border-size-m) solid var(--color-primary);
}

.is-rtl .tabs.tabs-vertical.tabs-header-right .tabs-content {
    border-left: var(--border-size-s) solid var(--color-neutral-5);
    border-right: var(--border-size-none) solid transparent;
    margin-left: -1px;
    margin-right: 0;
}

.is-rtl .card > .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item {
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-m);
}


/* $7.4.4 - RTL Mode - Patterns - Navigation - Timeline */
.is-rtl .timeline-item-left {
    margin-left: var(--space-base);
    margin-right: var(--space-none);
}


/* $7.4.5 - RTL Mode - Patterns - Navigation - Wizard */
.is-rtl .wizard-item .wizard-item-icon-wraper:before {
    left: calc(50% + 12px);
    right: auto;
}

.is-rtl .wizard-vertical .wizard-item-icon-wraper {
    margin: var(--space-none) var(--space-none) var(--space-none) var(--space-s); 
}

.is-rtl .wizard-vertical .wizard-item .wizard-item-icon-wraper:before { left: 50%; }


/* ================================================================ */
/*  $7.5 - RTL Mode - Patterns - Numbers                            */
/* ================================================================ */

/* $7.5.1 - RTL Mode - Patterns - Numbers - ProgressBar */
.is-rtl .progress-container .progress-title { text-align: right; }

.is-rtl .progress-container .progress-value { text-align: left; }

.is-rtl .progress-container.flex-direction-row .progress {
    margin-left: var(--space-s);
    margin-right: var(--space-none);    
}


/* ================================================================ */
/*  $7.6 - RTL Mode - Patterns - Responsive                         */
/* ================================================================ */

/* $7.6.1 - RTL Mode - Patterns - Responsive - ResponsiveTableRecords */
.is-rtl.tablet.portrait .scrollable-row .TableRecords thead th, 
.is-rtl.phone .scrollable-row .TableRecords thead th {
    border-left: var(--border-size-s) solid var(--color-neutral-4);
    border-right: var(--border-size-none) solid var(--color-neutral-4);
}

.is-rtl.tablet.portrait .scrollable-row .TableRecords tbody tr:last-child td, 
.is-rtl.phone .scrollable-row .TableRecords tbody tr:last-child td {
    border-right: var(--border-size-s) solid var(--color-neutral-4);
}

.is-rtl.tablet.portrait .scrollable-row .TableRecords tbody tr:first-child td, 
.is-rtl.phone .scrollable-row .TableRecords tbody tr:first-child td {
    border-right: var(--border-size-none) solid var(--color-neutral-4);
}

.is-rtl.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child, 
.is-rtl.phone .expandable-row .TableRecords tbody tr td:first-child {
    padding-right: var(--space-m);
    padding-left: var(--space-xxl);
}

.is-rtl.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child:after, 
.is-rtl.phone .expandable-row .TableRecords tbody tr td:first-child:after {
    left: 16px;
    right: auto;
}


/* ================================================================ */
/*  $7.7 - RTL Mode - Widgets & RichWidgets                         */
/* ================================================================ */

/* $7.7.1 - RTL Mode - Widgets - TableRecords  */
.is-rtl .TableRecords .TableRecords_Header, 
.is-rtl .EditableTable thead th {
    text-align: right;
}

.is-rtl .TableRecords .TableRecords_OddLine, 
.is-rtl .TableRecords .TableRecords_EvenLine {
    text-align: right;
}

.is-rtl .TableRecords_Label {
    margin-left: 40px;
    margin-right: 0;
}

.is-rtl .layout .Form .select.ReadOnly:not(.Not_Valid) {
    background-position: center left 16px;
}


/* $7.7.2 - RTL Mode - RichWidgets - FeedbackAjaxWait  */
.is-rtl div.Feedback_AjaxWait:before {
    -webkit-animation: ajax-wait-rtl 1700ms linear infinite;
            animation: ajax-wait-rtl 1700ms linear infinite;
}

@-webkit-keyframes ajax-wait-rtl {
    0% {
        -webkit-transform: translateX(105vw) translateZ(0) scaleX(1);
    }
    25% {
        -webkit-transform: translateX(55vw) translateZ(0) scaleX(1.5);
    }
    50% {
        -webkit-transform: translateX(0) translateZ(0) scaleX(1.5);
    }
    75% {
        -webkit-transform: translateX(-55vw) translateZ(0) scaleX(.5);
    }
    100% {
        -webkit-transform: translateX(-105vw) translateZ(0) scaleX(.2);
    }
}

@keyframes ajax-wait-rtl {
    0% {
        transform: translateX(105vw) translateZ(0) scaleX(1);
    }
    25% {
        transform: translateX(55vw) translateZ(0) scaleX(1.5);
    }
    50% {
        transform: translateX(0) translateZ(0) scaleX(1.5);
    }
    75% {
        transform: translateX(-55vw) translateZ(0) scaleX(.5);
    }
    100% {
        transform: translateX(-105vw) translateZ(0) scaleX(.2);
    }
}

/* $7.7.3 - RTL Mode - RichWidgets - FeedbackMessage  */
.is-rtl div.Feedback_Message_Wrapper [class*="Feedback_Message_"] span {
    padding-left: var(--space-none);
    padding-right: var(--space-base);
}

.is-rtl a.Feedback_Message_Wrapper_Close {
    left: 8px;
    right: auto;
}


/* $7.7.4 - RTL Mode - RichWidgets - Pagination  */
.is-rtl a.ListNavigation_Previous, 
.is-rtl span.ListNavigation_DisabledPrevious {
    transform: rotate(180deg)
}
 
.is-rtl a.ListNavigation_Next, 
.is-rtl span.ListNavigation_DisabledNext {
    transform: rotate(180deg)
}


/* ================================================================ */
/*  $7.8 - RTL Mode - Styles                                        */
/* ================================================================ */

/* $7.8.1 - RTL Mode - Styles - Space - Padding Right  */
.is-rtl .padding-right-none { 
    padding-left: var(--space-none); 
    padding-right: var(--space-none); 
}
.is-rtl .padding-right-xs { 
    padding-left: var(--space-xs); 
    padding-right: var(--space-none); 
}
.is-rtl .padding-right-s { 
    padding-left: var(--space-s); 
    padding-right: var(--space-none); 
}
.is-rtl .padding-right-base { 
    padding-left: var(--space-base); 
    padding-right: var(--space-none); 
}
.is-rtl .padding-right-m { 
    padding-left: var(--space-m); 
    padding-right: var(--space-none); 
}
.is-rtl .padding-right-l { 
    padding-left: var(--space-l); 
    padding-right: var(--space-none); 
}
.is-rtl .padding-right-xl { 
    padding-left: var(--space-xl);
    padding-right: var(--space-none); 
}
.is-rtl .padding-right-xxl { 
    padding-left: var(--space-xxl); 
    padding-right: var(--space-none); 
}


/* $7.8.2 - RTL Mode - Styles - Space - Padding Left  */
.is-rtl .padding-left-none { 
    padding-left: var(--space-none); 
    padding-right: var(--space-none); 
}
.is-rtl .padding-left-xs { 
    padding-left: var(--space-none); 
    padding-right: var(--space-xs); 
}
.is-rtl .padding-left-s { 
    padding-left: var(--space-none); 
    padding-right: var(--space-s); 
}
.is-rtl .padding-left-base { 
    padding-left: var(--space-none); 
    padding-right: var(--space-base); 
}
.is-rtl .padding-left-m { 
    padding-left: var(--space-none); 
    padding-right: var(--space-m); 
}
.is-rtl .padding-left-l { 
    padding-left: var(--space-none); 
    padding-right: var(--space-l); 
}
.is-rtl .padding-left-xl { 
    padding-left: var(--space-none);
    padding-right: var(--space-xl); 
}
.is-rtl .padding-left-xxl { 
    padding-left: var(--space-none); 
    padding-right: var(--space-xxl); 
}


/* $7.8.3 - RTL Mode - Styles - Space - Margin Right  */
.is-rtl .margin-right-none { 
    margin-left: var(--space-none); 
    margin-right: var(--space-none); 
}
.is-rtl .margin-right-xs { 
    margin-left: var(--space-xs); 
    margin-right: var(--space-none); 
}
.is-rtl .margin-right-s { 
    margin-left: var(--space-s); 
    margin-right: var(--space-none); 
}
.is-rtl .margin-right-base { 
    margin-left: var(--space-base); 
    margin-right: var(--space-none); 
}
.is-rtl .margin-right-m { 
    margin-left: var(--space-m); 
    margin-right: var(--space-none); 
}
.is-rtl .margin-right-l { 
    margin-left: var(--space-l); 
    margin-right: var(--space-none); 
}
.is-rtl .margin-right-xl { 
    margin-left: var(--space-xl);
    margin-right: var(--space-none); 
}
.is-rtl .margin-right-xxl { 
    margin-left: var(--space-xxl); 
    margin-right: var(--space-none); 
}


/* $7.8.4 - RTL Mode - Styles - Space - Margin Right  */
.is-rtl .margin-left-none { 
    margin-left: var(--space-none); 
    margin-right: var(--space-none); 
}
.is-rtl .margin-left-xs { 
    margin-left: var(--space-none); 
    margin-right: var(--space-xs); 
}
.is-rtl .margin-left-s { 
    margin-left: var(--space-none); 
    margin-right: var(--space-s); 
}
.is-rtl .margin-left-base { 
    margin-left: var(--space-none); 
    margin-right: var(--space-base); 
}
.is-rtl .margin-left-m { 
    margin-left: var(--space-none); 
    margin-right: var(--space-m); 
}
.is-rtl .margin-left-l { 
    margin-left: var(--space-none); 
    margin-right: var(--space-l); 
}
.is-rtl .margin-left-xl { 
    margin-left: var(--space-none);
    margin-right: var(--space-xl); 
}
.is-rtl .margin-left-xxl { 
    margin-left: var(--space-none); 
    margin-right: var(--space-xxl); 
}


/* $7.8.5 - RTL Mode - Styles - Others  */
.is-rtl [align="right"],
.is-rtl .text-align-right {
    text-align: left;
}

.is-rtl [align="left"],
.is-rtl .text-align-left {
    text-align: right;
}

/* The CSS classes below will be excluded in the Style Classes dropwdown of Widgets */
/* ExcludeFromPickers: accordion, accordion-item, accordion-item-content, accordion-item-header, accordion-item-icon, accordion-item-title, active, alert, alert-close, alert-icon, alert-message, align-items-center, animate, 
animated-label, animated-label-inline, animated-label-input, animated-label-text, Application_Menu, app-logo, badge, badge-icon, badge-medium, badge-small, balloon, balloon-container, balloon-content, balloon-footer, balloon-title, 
blank-slate, blank-slate-content, bottom-center, bottom-left, bottom-right, breadcrumbs, breadcrumbs-item, Button, button-group, card-background, card-background-color, card-background-content, card-background-image, card-content, 
card-footer, card-image, card-sectioned, card-sectioned-right, card-sectioned-top, card-title, carousel, carousel-arrow-left, carousel-arrow-right, carousel-navigation, carousel-padding-none, center, center-align, 
center-left, center-right, chat, chat-message, chat-message-actions, chat-message-content, chat-message-name, chat-photo, checkbox, choices, choices__button, choices__heading, choices__inner, choices__input, 
choices__input--cloned, choices__item, choices__item--disabled, choices__item--selectable, choices__list, choices__list--dropdown, choices__list--multiple, choices__list--single, choices__placeholder, ColumnHeader, 
columns, columns2, columns3, columns4, columns5, columns6, columns-item, columns-medium-left, columns-medium-right, columns-small-left, columns-small-right, content, content-bottom, content-breadcrumbs, content-middle, content-top, 
content-top-actions, content-top-title, ControlActions, controls, counter, Counter_Message, customize-tools, desktop, desktop-big, desktop-hd, desktop-small, dropdown, dropdown-container, dropdown-content, dropdown-content-list, 
dropdown-header, dropdown-icon, EditableTable, EditRecord, enter-bottom, enter-fade, enter-left, enter-right, enter-scale, enter-top, expandable-row, fa, fa-fw, fail, Feedback_AjaxWait, Feedback_AjaxWait_CursorProgress, 
Feedback_Message_Error, Feedback_Message_Info, Feedback_Message_Success, Feedback_Message_Warning, Feedback_Message_Wrapper, Feedback_Message_Wrapper_Close, file-upload, file-upload-button, file-upload-delete, 
file-upload-icon, file-upload-message, file-upload-widget, Form, gallery-content, gallery-item, has-event, header, header-center, header-content, header-left, header-right, header-top, hide-on-service-studio, icon, 
icon-silk-angle-down, icon-silk-chevron-down, icon-silk-rocket, icon-silk-search, ie10, ie11, img, img-1, img-2, img-3, img-4, img-5, img-6, img-7, img-8, InEditMode, input, input-with-icon, input-with-icon-content-icon, 
input-with-icon-input, interval, Is_Default, is-active, is--active, is--animating, is-bound, is--closed, is--collapsed, is-disabled, is--disabled, is--expanded, is-flipped, is-focused, is-hidden, is--hidden, 
is-highlighted, is-inline, is-open, is--open, is-outside-current-month, is-right, is-rtl, is-selected, is-today, is--visible, jello, justified, justify-content-flex-end, label-top, layout, layout-left, layout-login, 
layout-login-background, layout-login-form, layout-login-form-content, layout-login-simple, layout-side, layout-top, lazyload, leave-bottom, leave-fade, leave-left, leave-right, leave-scale, leave-top, left, lightbox, 
lightbox-content-thumbnail, light-theme, ListNavigation_CurrentPageNumber, ListNavigation_DisabledNext, ListNavigation_DisabledPrevious, ListNavigation_Ellipsis, ListNavigation_Next, ListNavigation_PageNumber, 
ListNavigation_Previous, ListNavigation_Wrapper, list-navigation-circle, list-navigation-inline, list-navigation-sharp, ListRecords, loaded, logo-preview, lt-ie9, main, main-content, MandatoryLabel, 
Menu_DropDownArrow, Menu_DropDownButton, Menu_DropDownPanel, Menu_SubItemsPlaceholder, Menu_SubMenuItemActive, Menu_TopMenu, Menu_TopMenuActive, Menu_TopMenus, menu-icon, menu-icon-line, modal, modal-close, modal-content, 
modal-footer, modal-overlay, modal-title, modal-top, modal-wrapper, month-picker, nav, navigation, navigation-bar, navigation-bar-item, navigation-bar-item-content, navigation-bar-item-subitem, navigation-bar-item-title, 
navigation-bottom, navigation-menu, navigation-top, nav-toggle-handle, next, next-year, Not_Valid, noUi-active, noUi-connect, noUi-connects, noUi-handle, noUi-horizontal, noUi-marker, noUi-marker-horizontal, noUi-pips, 
noUi-pips-horizontal, noUi-pips-vertical, noUi-target, noUi-value-horizontal, noUi-value-vertical, noUi-vertical, OnEdit, only-balloon, open, os-internal-header-space, os-internal-Popup, os-internal-PopupCallOut, 
os-internal-ui-autocomplete, os-internal-ui-dialog, os-internal-ui-dialog-buttonpane, os-internal-ui-dialog-content, os-internal-ui-dialog-title, os-internal-ui-dialog-titlebar, os-internal-ui-dialog-titlebar-close, 
os-internal-ui-dialog-titlebar-close-hover, os-internal-ui-dialog-titlebar-close-no-title, os-internal-ui-draggable, os-internal-ui-resizable-e, os-internal-ui-resizable-n, os-internal-ui-resizable-ne, os-internal-ui-resizable-nw, 
os-internal-ui-resizable-s, os-internal-ui-resizable-se, os-internal-ui-resizable-sw, os-internal-ui-resizable-w, os-internal-ui-state-hover, os-internal-ui-widget-overlay, OUTSYSTEMS_INTERNAL_BLOCK_INSTANCE, panel, panel-actions, 
panel-content, panel-footer, panel-header, panel-title, past, ph, phone, phone-break-all, phone-break-first, phone-break-last, phone-break-middle, pika-button, pika-days-picker, pika-go-today, pika-label, pika-labels, 
pika-month, pika-next, pika-prev, pika-select-month, pika-select-year, pika-single, pika-table, pika-title, pika-today-container, pika-year, playbutton-wrapper, portrait, prev, prev-year, progress, progress-bar-base, 
progress-bar-extra-small, progress-bar-small, progress-container, progress-content, progress-title, progress-value, pswp, pswp__bg, pswp__button, pswp__button--arrow--left, pswp__button--arrow--right, pswp__button--close, 
pswp__button--fs, pswp__button--share, pswp__button--zoom, pswp__caption, pswp__caption__center, pswp__caption--empty, pswp__caption--fake, pswp__container, pswp__counter, pswp__element--disabled, pswp__error-msg, pswp__img, 
pswp__img--placeholder, pswp__img--placeholder--blank, pswp__item, pswp__preloader, pswp__preloader__cut, pswp__preloader__donut, pswp__preloader__icn, pswp__preloader--active, pswp__scroll-wrap, pswp__share--download, 
pswp__share--facebook, pswp__share-modal, pswp__share-modal--fade-in, pswp__share-modal--hidden, pswp__share--pinterest, pswp__share-tooltip, pswp__share--twitter, pswp__top-bar, pswp__ui, pswp__ui--fit, 
pswp__ui--hidden, pswp__ui--idle, pswp__ui--one-slide, pswp__ui--over-close, pswp__zoom-wrap, pswp--animate_opacity, pswp--animated-in, pswp--css_animation, pswp--dragging, pswp--fs, pswp--has_mouse, pswp--ie, pswp--minimal--dark, 
pswp--open, pswp--supports-fs, pswp--touch, pswp--zoom-allowed, pswp--zoomed-in, radio-button, range-slider, range-slider-label, range-slider-object, range-slider-separator, range-slider-values, ReadOnly, right, rollOut, 
RowControlGroup, scrollable-row, search, search-actions, search-balloon, search-balloon-answers, search--wrapper, section-actions, section-content, section-header, select, Selected, separator, separator-horizontal, 
separator-vertical, sidebar, sidebar-container, sidebar-content, sidebar-header, sidebar-overlay, SmartInput_Changed, SortColumns_Sortable, SortColumns_Sorted, subtitle, suite-container, table-no-header, TableRecords, 
TableRecords_BottomNavigation, TableRecords_EvenLine, TableRecords_ExpandedRow, TableRecords_Header, TableRecords_Label, TableRecords_OddLine, table-records-medium, table-records-small, table-records-stripping, 
tablet, tablet-break-all, tablet-break-first, tablet-break-last, tablet-break-middle, tabs, tabs-content, tabs-content-item, tabs-header, tabs-header-item, tabs-header-right, tabs-vertical, tag, tag-medium, tag-small, 
textarea, ThemeGrid_Container, ThemeGrid_MarginGutter, thumbnails, timeline-item, timeline-item-date, timeline-item-icon, timeline-item-left, timeline-item-right, timeline-item-separator, tippy-arrow, tippy-backdrop, 
tippy-iOS, tippy-notransition, tippy-popper, tippy-roundarrow, tippy-tooltip, title, Title_Links, tns-ah, tns-controls, tns-fadeIn, tns-fadeOut, tns-gallery, tns-horizontal, tns-item, tns-lazy-img, tns-moving, tns-nav, 
tns-no-calc, tns-normal, tns-no-subpixel, tns-outer, tns-ovh, tns-slide-active, tns-slider, tns-subpixel, tns-transparent, tns-visually-hidden, toggle-button, toggle-button-label, tooltip, tooltip-bottom, tooltip-container, 
tooltip-left, tooltip-right, tooltip-top, tooltip-widget, top-center, top-left, top-right, user-avatar, ValidationMessage, vertical, visually-hidden, wizard, wizard-item, wizard-item-icon, wizard-item-icon-wraper, wizard-item-label,
wizard-vertical, wrapper, year-picker, Heading2 */