@charset 'UTF-8';
@font-face {
    font-family: 'Lato';
    font-weight: normal;
    font-style: normal;

    src: url('/FD_Resources/lato-regular-webfont.woff2') format('woff2'), url('/FD_Resources/lato-regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-weight: normal;
    font-style: italic;

    src: url('/FD_Resources/lato-regular-webfont.woff2') format('woff2'), url('/FD_Resources/lato-regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-weight: bold;
    font-style: normal;

    src: url('/FD_Resources/lato-bold-webfont.woff2') format('woff2'), url('/FD_Resources/lato-bold-webfont.woff') format('woff');
}

/* ===================================================================== */
/* ===================================================================== */
/*  OutSystems UI Web                                                    */
/*  $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                                    */
/*       $3.4 - Page Layout - Footer                                     */
/*       $3.5 - Page Layout - Custom Layout Sidebar                        */
/*       $3.6 - Page Layout - Custom Layout Login                        */
/*  $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 - CharacterCount         */
/*              $4.8.3   - Patterns - Utilities - Fieldset               */
/*              $4.8.4   - Patterns - Utilities - FlipContent            */
/*              $4.8.5   - Patterns - Utilities - Iframe                 */
/*              $4.8.6   - Patterns - Utilities - Separator              */
/*              $4.8.7   - Patterns - Utilities - StackedIcon            */
/*       $4.9 - Patterns - Custom                                        */
/*              $4.9.1   - Patterns - Custom - Expand/Collapse Search    */
/*              $4.9.2   - Patterns - Custom - Advanced Search           */
/*              $4.9.3   - Patterns - Custom - AppCenter Tile            */
/*              $4.9.4 - Patterns - Custom - Notification Center         */
/*              $4.9.5 - Patterns - Custom - Notification Card           */
/*              $4.9.6 - Patterns - Custom - Directory List Item         */
/*              $4.9.7 - Patterns - Custom - Horizontal Navigation Bar   */
/*              $4.9.8 - Patterns - Custom - Fixed Table Header          */
/*              $4.9.9 - Patterns - Custom - Coloured Header Panel       */
/*              $4.9.10 - Patterns - Custom - User Picture Info          */
/*              $4.9.11 - Patterns - Custom - Collapsed Actions          */
/*              $4.9.12 - Patterns - Custom - Collapsed Tags             */
/*              $4.9.13 - Patterns - Custom - Menu Switcher              */
/*              $4.9.14 - Patterns - Custom - App Center Card            */
/*              4.9.15 - Patterns - Custom - Special Column Size         */
/*  $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                             */
/*  $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 - InputWithIcons */
/*              $7.3.6 - RTL Mode - Patterns - Controls - RangeSlider    */
/*              $7.3.7 - RTL Mode - Patterns - Controls - ToogleButton   */
/*       $7.4 - RTL Mode - Patterns - Numbers                            */
/*              $7.4.1 - RTL Mode - Patterns - Numbers - ProgressBar     */
/*       $7.5 - RTL Mode - Patterns - Navigation                         */
/*              $7.5.1 - RTL Mode - Patterns - Navigation - SectionIndex */
/*              $7.5.2 - RTL Mode - Patterns - Navigation - Sidebar      */
/*              $7.5.3 - RTL Mode - Patterns - Navigation - Tabs         */
/*              $7.5.4 - RTL Mode - Patterns - Navigation - Timeline     */
/*              $7.5.5 - RTL Mode - Patterns - Navigation - Wizard       */
/*       $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 {
    --border-radius-circle: 100%;
    --border-radius-none: 0;
    --border-radius-rounded: 100px;
    --border-radius-soft: 4px;
    --border-size-l: 3px;
    --border-size-m: 2px;
    --border-size-none: 0;
    --border-size-s: 1px;
    --color-background-body: #f6f7fa;
    --color-blue: #1a79cb;
    --color-blue-dark: #4c627b;
    --color-blue-darker: #465a71;
    --color-blue-darkest: #39495c;
    --color-blue-light: #6984a2;
    --color-blue-lighter: #93a6bc;
    --color-blue-lightest: #dce3ea;
    --color-cyan: #4eb6ff;
    --color-cyan-dark: #0a9aff;
    --color-cyan-darker: #007ed6;
    --color-cyan-darkest: #006ab4;
    --color-cyan-light: #70c4ff;
    --color-cyan-lighter: #92d2ff;
    --color-cyan-lightest: #e7f5ff;
    --color-error: #e03131;
    --color-error-light: #fceaea;
    --color-grape: #ae3ec9;
    --color-grape-dark: #9435ab;
    --color-grape-darker: #7a2b8d;
    --color-grape-darkest: #60226f;
    --color-grape-light: #c678d9;
    --color-grape-lighter: #dfb2e9;
    --color-grape-lightest: #f7ecfa;
    --color-green: #37b24d;
    --color-green-dark: #7aaf34;
    --color-green-darker: #68952c;
    --color-green-darkest: #5f8828;
    --color-green-light: #a4d266;
    --color-green-lighter: #daedc2;
    --color-green-lightest: #e8f4e8;
    --color-indigo: #4263eb;
    --color-indigo-dark: #3854c8;
    --color-indigo-darker: #2e45a5;
    --color-indigo-darkest: #243681;
    --color-indigo-light: #7b92f1;
    --color-indigo-lighter: #b3c1f7;
    --color-indigo-lightest: #eceffd;
    --color-info: #009dde;
    --color-info-light: #e5f5fc;
    --color-lime: #74b816;
    --color-lime-dark: #639c13;
    --color-lime-darker: #51810f;
    --color-lime-darkest: #40650c;
    --color-lime-light: #9ecd5c;
    --color-lime-lighter: #c7e3a2;
    --color-lime-lightest: #f1f8e8;
    --color-neutral-0: #fff;
    --color-neutral-1: #f8f9fa;
    --color-neutral-10: #15181a;
    --color-neutral-2: #f1f3f5;
    --color-neutral-3: #e9ecef;
    --color-neutral-4: #dee2e6;
    --color-neutral-5: #adadad;
    --color-neutral-6: #adb5bd;
    --color-neutral-7: #868e96;
    --color-neutral-8: #5c656d;
    --color-neutral-9: #343a40;
    --color-orange: #f59f00;
    --color-orange-dark: #b85802;
    --color-orange-darker: #a85002;
    --color-orange-darkest: #864001;
    --color-orange-light: #fc7802;
    --color-orange-lighter: #fd9c45;
    --color-orange-lightest: #fed2aa;
    --color-pink: #d6336c;
    --color-pink-dark: #b62b5c;
    --color-pink-darker: #96244c;
    --color-pink-darkest: #761c3b;
    --color-pink-light: #e27098;
    --color-pink-lighter: #efadc4;
    --color-pink-lightest: #f6eaec;
    --color-primary: #026b8f;
    --color-primary-hover: rgba(2, 107, 147, .5);
    --color-primary-lightest: lighten($color: #026b8f, $amount: 35%);
    --color-primary-selected: #015572;
    --color-red: #c92a2a;
    --color-red-dark: #ae2a3d;
    --color-red-darker: #85202f;
    --color-red-darkest: #6a1925;
    --color-red-light: #d75669;
    --color-red-lighter: #dd7282;
    --color-red-lightest: #eeb6be;
    --color-secondary: #b2d2dd;
    --color-secondary-lightest: lighten($color: #026b8f, $amount: 35%);
    --color-success: #2a843c;
    --color-success-light: #eaf3eb;
    --color-teal: #087f5b;
    --color-teal-dark: #076c4d;
    --color-teal-darker: #065940;
    --color-teal-darkest: #044632;
    --color-teal-light: #52a58c;
    --color-teal-lighter: #9cccbd;
    --color-teal-lightest: #e6f2ef;
    --color-text: #777776;
    --color-violet: #7048e8;
    --color-violet-dark: #5f3dc5;
    --color-violet-darker: #4e32a2;
    --color-violet-darkest: #3e2880;
    --color-violet-light: #9b7fef;
    --color-violet-lighter: #c6b6f6;
    --color-violet-lightest: #f1edfd;
    --color-warning: #e9a100;
    --color-warning-light: #fdf6e5;
    --color-yellow: #ffc000;
    --color-yellow-dark: #dda600;
    --color-yellow-darker: #aa8000;
    --color-yellow-darkest: #860;
    --color-yellow-light: #ffc822;
    --color-yellow-lighter: #ffe288;
    --color-yellow-lightest: #fff7dd;
    
    /* new color variables */
    --color-new-primary-special: #006084;
    --color-new-title-light: #EEEEEE;
    --color-new-title-lighter: #f6f6f6;
    
    --color-new-charts-1: #006084;
    --color-new-charts-2: #A6CDDB;
    --color-new-charts-3: #B2B2B2;
    --color-new-charts-4: #798BBF;
    --color-new-charts-5: #6F6F6F;
    --color-new-charts-6: #789EA5;
    
    --font-bold: 700;
    --font-family: 'Lato';
    --font-light: 300;
    --font-medium: 500;
    --font-regular: 400;
    --font-semi-bold: 600;
    --font-size-base: 14px;
    --font-size-display: 36px;
    --font-size-h1: 28px;
    --font-size-h2: 24px;
    --font-size-h3: 18px;
    --font-size-h4: 16px;
    --font-size-h5: 16px;
    --font-size-h6: 16px;
    --font-size-l: 24px;
    --font-size-m: 16px;
    --font-size-s: 12px;
    --font-size-xs: 10px;
    --header-background: #026b8f;
    --header-color-text: #fff;
    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);
    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);
    --shadow-none: none;
    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);
    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);
    --space-base: 16px;
    --space-l: 32px;
    --space-m: 24px;
    --space-none: 0;
    --space-s: 8px;
    --space-xl: 40px;
    --space-xs: 4px;
    --space-xxl: 48px;
    --theme-grid-width: 1600px;
    
   
}

/* ================================================================ */
/*  $1 - Resets                                                      */
/* ================================================================ */
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
    font-family: var(--font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    font-weight: normal;
    color: var(--color-text);

    overflow: auto;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
}

body {
    margin: 0;

    line-height: 1.5;
    font-size: var(--font-size-base);

    background-color: var(--color-background-body);

    -webkit-overflow-scrolling: touch;
}

a {
    text-decoration: none;

    -webkit-text-decoration-skip: objects;
}

abbr[title] {
    text-decoration: underline;

    border-bottom: 0;
}

:focus {
    outline: 0;
}

input,
textarea,
select,
button {
    margin: 0;

    line-height: 1.25;
    font-family: inherit;
    font-size: 100%;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

[type='checkbox'],
[type='radio'] {
    padding: 0;

    border: 0;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
    height: auto;
}

[type='search'] {
    outline-offset: -2px;

    -webkit-appearance: textfield;
       -moz-appearance: textfield;
            appearance: textfield;
}

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

/* ================================================================ */
/*  $2 - HTML Elements                                              */
/* ================================================================ */
/* $2.1 - HTML Elements - Links */
a {
    color: var(--color-primary);

    -webkit-transition: color 180ms linear;
            -o-transition: color 180ms linear;
            transition: color 180ms linear;
}

a:visited {
    color: var(--color-primary);

    -webkit-transition: color 180ms linear;
            -o-transition: color 180ms linear;
            transition: color 180ms linear;
}

a:hover {
    color: var(--color-primary);
    text-decoration: underline;

    cursor: pointer;
}

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

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

h2 {
    line-height: 1.25;
    font-size: var(--font-size-h2);
}

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

h4 {
    line-height: 1.25;
    font-size: var(--font-size-h4);
}

h5 {
    line-height: 1.25;
    font-size: var(--font-size-h5);
}

h6 {
    line-height: 1.25;
    font-size: var(--font-size-h6);
}

/* $2.4 - HTML Elements - Inputs and Selectors */
.layout label.MandatoryLabel:after {
    content: '*';

    width: 5px;
    height: 5px;
    margin: var(--space-s);
    padding: var(--space-none);

    color: transparent;

    background-color: var(--color-error);

    -webkit-border-radius: 5px;

    border-radius: 5px;

    position: absolute;
}

.ValidationMessage {
    display: block;

    margin-top: var(--space-xs);

    font-size: var(--font-size-base);
    color: var(--color-error);
}

.ValidationMessage:before {
    content: '\f057';

    margin-right: var(--space-xs);

    font-family: FontAwesome;
}

.success-message {
    display: block;

    margin-top: var(--space-xs);

    font-size: var(--font-size-base);
    color: var(--color-success);
}

.success-message:before {
    content: '\f058';

    margin-right: var(--space-xs);

    font-family: FontAwesome;
}

.info-message {
    display: block;

    margin-top: var(--space-xs);

    font-size: var(--font-size-base);
    color: var(--color-info);
}

.info-message:before {
    content: '\f05a';

    margin-right: var(--space-xs);

    font-family: FontAwesome;
}

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

.input,
.select {
    height: 40px;
    padding: var(--space-none) var(--space-base);

    font-size: var(--font-size-base);
    color: var(--color-neutral-9);

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;
}

.input::-webkit-input-placeholder,
.select::-webkit-input-placeholder {
    color: var(--color-neutral-5);
}

.input::-ms-input-placeholder,
.select::-ms-input-placeholder {
    color: var(--color-neutral-5);
}

.input::placeholder,
.select::placeholder {
    color: var(--color-neutral-5);
}

.input ~ input,
.select ~ input {
    margin-left: var(--space-base);
}

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

    resize: none;
}

input:not([type='text']) {
    cursor: pointer;
}

.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-repeat: no-repeat;
    background-position: center right 16px;
    -webkit-background-size: 14px 7px;
    background-size: 14px 7px;

    cursor: pointer;

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);
}

.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 {
    color: var(--color-error);

    border: var(--border-size-s) solid var(--color-error);
}

.input-success {
    color: var(--color-success);

    border: var(--border-size-s) solid var(--color-success);
}

.input-info {
    color: var(--color-info);

    border: var(--border-size-s) solid var(--color-info);
}

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

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 {
    width: 20px;
    height: 20px;

    cursor: pointer;

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;

    position: relative;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.checkbox ~ label,
.radio-button ~ label {
    line-height: 24px;
    vertical-align: top;
}

.checkbox:before,
.radio-button:before {
    content: '';
    display: block;

    width: 18px;
    height: 18px;

    background-color: var(--color-neutral-0);

    border: var(--border-size-m) solid var(--color-neutral-4);

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;
}

.checkbox:before {
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
}

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

.checkbox:hover:before,
.radio-button:hover:before {
    border: var(--border-size-m) solid var(--color-primary);
}

.checkbox:focus:before,
.radio-button:focus:before {
    -webkit-box-shadow: 0 0 0 2px var(--color-cyan);
    box-shadow: 0 0 0 2px var(--color-cyan);
}

.checkbox:checked:before {
    background-color: var(--color-primary);

    border: var(--border-size-m) solid var(--color-primary);
}

.radio-button:checked:before {
    width: 12px;
    height: 12px;
    margin-left: 2px;
    margin-top: 2px;
    background-color: var(--color-primary);

    border: var(--border-size-l) solid var(--color-neutral-0);
    -webkit-box-shadow: 0 0 0 var(--border-size-m) var(--color-primary);
    box-shadow: 0 0 0 var(--border-size-m) var(--color-primary);
}

.checkbox:checked:hover:before,
.radio-button:checked:hover:before {
            filter: brightness(.9);

    -webkit-filter: brightness(.9);
}

.checkbox[disabled='disabled'],
.radio-button[disabled='disabled'] {
    pointer-events: none;

    background-color: transparent;

    border: none;
}

.checkbox[disabled='disabled']:before {
    background-color: var(--color-neutral-2);

    border: var(--border-size-m) solid var(--color-neutral-4);
}

.radio-button[disabled='disabled']:before {
    background-color: #f2f2f2;

    border: var(--border-size-m) 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 {
    content: '';
    display: block;

    width: 10px;
    height: 4px;

    opacity: 0;

    border: var(--border-size-l) solid var(--color-neutral-0);
    border-top: var(--border-size-none);
    border-right: var(--border-size-none);

    -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;

    position: absolute;
    top: 6px;
    left: 5px;
}

.checkbox:checked:after {
    opacity: 1;
}

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

.checkbox.Not_Valid:before {
    width: 20px;
    height: 20px;

    border: var(--border-size-m) solid var(--color-error);
}

.radio-button.Not_Valid:before {
    width: 20px;
    height: 20px;

    border: var(--border-size-m) solid var(--color-error);
}

/* $2.5 - HTML Elements - Buttons */
.Button,
.btn,
.ActionAdd {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    min-width: 130px;
    height: 40px;
    margin: var(--space-none);
    padding: var(--space-none) var(--space-base);

    line-height: 18px;
    font-weight: var(--font-regular);
    color: var(--color-primary);

    background-color: var(--color-neutral-0);

    cursor: pointer;

    border: var(--border-size-s) solid var(--color-neutral-5);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.Button a,
.Button a:visited,
.btn a,
.btn a:visited,
.ActionAdd a,
.ActionAdd a:visited {
    color: var(--color-neutral-8);
}

.Button:hover,
.btn:hover,
.ActionAdd:hover {
    text-decoration: none;

    background-color: #f6f7fa;
}

.phone .Button,
.phone
.btn,
.phone
.ActionAdd {
    width: 100%;
}

.Button.Is_Default,
.btn.Is_Default,
.ActionAdd.Is_Default {
    color: var(--color-neutral-0);

    background-color: var(--color-primary);

    border: var(--border-size-none);
}

.Button.Is_Default:focus,
.btn.Is_Default:focus,
.ActionAdd.Is_Default:focus {
    color: var(--color-neutral-0);
}

.Button.Cancel,
.btn.Cancel,
.ActionAdd.Cancel {
    color: #597390;

    background-color: #dfe3ee;

    border: var(--border-size-none);
}

.Button.Cancel:focus,
.btn.Cancel:focus,
.ActionAdd.Cancel:focus {
    color: #597390;

    background-color: #dfe3ee;
}

.Button.Cancel:hover,
.btn.Cancel:hover,
.ActionAdd.Cancel:hover {
    background-color: #eef0f6;
}

.Button.Cancel:active:hover,
.btn.Cancel:active:hover,
.ActionAdd.Cancel:active:hover {
    background-color: #b1b4bd;
}

.Button.Success,
.btn.Success,
.ActionAdd.Success {
    color: var(--color-neutral-0);

    background-color: #a4d166;

    border: var(--border-size-none);
}

.Button.Success:hover,
.btn.Success:hover,
.ActionAdd.Success:hover {
    color: var(--color-neutral-0);

    opacity: .5;
}

.Button.Success:focus,
.btn.Success:focus,
.ActionAdd.Success:focus {
    color: var(--color-neutral-0);
}

.Button.Success:active:hover,
.btn.Success:active:hover,
.ActionAdd.Success:active:hover {
    color: var(--color-neutral-0);

    background-color: #83a751;

    opacity: 1;
}

.Button.Danger,
.btn.Danger,
.ActionAdd.Danger {
    color: var(--color-neutral-0);

    background-color: #d75769;

    border: var(--border-size-none);
}

.Button.Danger:hover,
.btn.Danger:hover,
.ActionAdd.Danger:hover {
    color: var(--color-neutral-0);

    opacity: .5;
}

.Button.Danger:focus,
.btn.Danger:focus,
.ActionAdd.Danger:focus {
    color: var(--color-neutral-0);
}

.Button.Danger:active:hover,
.btn.Danger:active:hover,
.ActionAdd.Danger:active:hover {
    color: var(--color-neutral-0);

    background-color: #ac4554;

    opacity: 1;
}

.Button.Link,
.btn.Link,
.ActionAdd.Link {
    color: var(--color-primary);

    background: transparent;

    border: none;
}

.Button.Link:hover,
.btn.Link:hover,
.ActionAdd.Link:hover {
    color: var(--color-primary);
    text-decoration: underline;

    background: transparent;
}

.Button.Link:focus,
.btn.Link:focus,
.ActionAdd.Link:focus {
    color: #4eb6ff;
    text-decoration: underline;

    background: transparent;

    -webkit-box-shadow: none;

    box-shadow: none;
}

.Button.Link:active:hover,
.btn.Link:active:hover,
.ActionAdd.Link:active:hover {
    color: #3a445c;
    text-decoration: underline;

    background: transparent;
}

.Button.Link[disabled='disabled'],
.btn.Link[disabled='disabled'],
.ActionAdd.Link[disabled='disabled'] {
    color: #b3b9c9;

    background-color: transparent;

    opacity: .5;
}

.Button.Icon,
.btn.Icon,
.ActionAdd.Icon {
    width: 50px;
    min-width: auto;
}

.Button.Small,
.btn.Small,
.ActionAdd.Small {
    min-width: 120px;
    height: 28px;
}

.Button[class*='background-'],
.btn[class*='background-'] {
    color: var(--color-neutral-0);

    border: var(--border-size-none);
}

.Button[class*='text-'],
.btn[class*='text-'] {
    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid currentColor;
}

.Button[disabled='disabled'],
.btn[disabled='disabled'] {
    color: #b3b9c9;

    background-color: #dfe3ee;

    border: none;
}

.Button + .Button {
    margin-left: var(--space-m);
}

.Button .fa {
    width: auto;
}

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

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

.Button:focus {
    color: var(--color-primary);

    -webkit-box-shadow: 0 0 0 2px #a3daff;

    box-shadow: 0 0 0 2px #a3daff;
}

.Button:hover {
    color: var(--color-primary);
}

.Button:hover:active {
    background-color: var(--color-neutral-2);
}

.Is_Default:hover {
    color: var(--color-neutral-0);

    background-color: var(--color-primary-hover);
}

.Is_Default:hover:active {
    color: var(--color-neutral-0);

    background-color: var(--color-primary-selected);
}

.btn-large {
    height: 48px;

    font-size: var(--font-size-base);
}

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

    font-size: var(--font-size-xs);
}

/* Default Responsive */
.phone .btn,
.phone .Button {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    width: 100%;
    margin-left: 0;
}

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

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

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

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

/* ================================================================ */
/*  $3 - Layout                                                     */
/* ================================================================ */
html,
body,
form {
    height: 100%;
}

.layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    min-height: 100%;
}

.layout.layout-top {
        -webkit-flex-direction: column;
        flex-direction: column;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.layout.layout-top .content-breadcrumbs {
    
    
    
    
}

.layout.layout-top .content-top-title,
.layout.layout-top .content-top-actions {
    
    
    
}

.layout.layout-top .content-middle {
    margin-top: 26px;

    
}

.layout.layout-top.layout-calendar .content {
    height: -webkit-calc(100vh - 30px - 50px - 42px);
    height: calc(100vh - 30px - 50px - 42px);

    overflow: hidden auto;
}

.layout.layout-top.layout-calendar .content .main-content {
    height: 100%;
}

.layout.layout-top.layout-calendar .content .main-content .content-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    height: -webkit-calc(100% - 16px - 16px - 25px);

    height: calc(100% - 16px - 16px - 25px);
    /* minus the padding and plus for padding of the container*/

    overflow: hidden;

    -webkit-box-align: start;

    -webkit-align-items: flex-start;

    -ms-flex-align: start;

    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
}

.layout.layout-top.layout-calendar .content .main-content .content-container .content-calendar {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 75%;
    -ms-flex: 1 0 75%;
    flex: 1 0 75%;
}

.layout.layout-top.layout-calendar .content .main-content .content-container .content-sidebar {
    height: 100%;
    margin-left: var(--space-m);

    overflow: hidden auto;

    -webkit-box-flex: 0;

    -webkit-flex: 0 1 25%;

    -ms-flex: 0 1 25%;

    flex: 0 1 25%;
}

.layout.layout-left {
        -webkit-flex-direction: row;
        flex-direction: row;

    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
}

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

.main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    -webkit-box-direction: normal;
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    -ms-flex-direction: column;
}

.ie10 .layout.layout-side .main,
.ie11 .layout.layout-side .main {
    padding-top: 56px;
}

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

/* ================================================================ */
/*  $3.1 - Layout Header and Navigation                             */
/* ================================================================ */
.layout .header {
    height: auto;

    color: var(--header-color-text);

    background-color: var(--header-background);

    -webkit-box-shadow: 0 1px 5px 0 rgba(21, 24, 26, .1);

    box-shadow: 0 1px 5px 0 rgba(21, 24, 26, .1);

    -webkit-transition: 350ms cubic-bezier(.59, .11, .59, .9);

    -o-transition: 350ms cubic-bezier(.59, .11, .59, .9);

    transition: 350ms cubic-bezier(.59, .11, .59, .9);

    position: -webkit-sticky;
    position:         sticky;
    top: 0;
    left: 0;
    z-index: 100;
}

.layout .header.header-mini {
    height: auto;
}

.layout .header.header-mini .header-top {
    height: auto;
}

.ie10 .layout .header,
.ie11 .layout .header {
    position: fixed;
    right: 0;
}

.ie10.desktop-hd .layout.layout-side .header,
.ie11.desktop-hd .layout.layout-side .header {
    left: 300px;
}

.ie10.desktop-big .layout.layout-side .header,
.ie11.desktop-big .layout.layout-side .header {
    left: 280px;
}

.ie10 .layout.layout-side .header,
.ie11 .layout.layout-side .header {
    left: 260px;
}

.ie10.desktop-small .layout.layout-side .header,
.ie11.desktop-small .layout.layout-side .header {
    left: 240px;
}

.layout.layout-side .navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    width: 260px;
    height: 100vh;

    background-color: var(--color-neutral-0);

    position: -webkit-sticky;
    position:         sticky;
    top: 0;
    left: 0;
    z-index: 101;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.ie10 .layout-side .navigation,
.ie11 .layout-side .navigation {
    position: fixed;
}

.ie10.desktop-hd .layout.layout-side .main,
.ie11.desktop-hd .layout.layout-side .main {
    margin-left: 300px;
}

.ie10.desktop-big .layout.layout-side .main,
.ie11.desktop-big .layout.layout-side .main {
    margin-left: 280px;
}

.ie10 .layout.layout-side .main,
.ie11 .layout.layout-side .main {
    margin-left: 260px;
}

.ie10.desktop-small .layout.layout-side .main,
.ie11.desktop-small .layout.layout-side .main {
    margin-left: 240px;
}

.desktop-hd .layout.layout-side .navigation {
    width: 300px;
}

.desktop-big .layout.layout-side .navigation {
    width: 280px;
}

.desktop-small .layout.layout-side .navigation {
    width: 240px;
}

.tablet .layout.layout-side .navigation,
.phone .layout.layout-side .navigation {
    width: 300px;
}

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

.navigation-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    height: 56px;
    padding: var(--space-none) var(--space-m);
}

.navigation-menu {
    padding: var(--space-s);

    overflow-y: auto;

    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
}

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

/* $3.1.1 - Layout Header */
.header__inner-container {
    background: var(--header-background);
}

.header-top {
    height: 50px;

    -webkit-transition: 350ms cubic-bezier(.59, .11, .59, .9);

    -o-transition: 350ms cubic-bezier(.59, .11, .59, .9);

    transition: 350ms cubic-bezier(.59, .11, .59, .9);

    position: relative;
}

.header-top .sidebar-container {
    color: var(--color-text);
}

.header-top__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 100%;

    position: absolute;
    left: 0;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;
}

.header-top__content__left {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    height: 100%;

    position: absolute;
    left: var(--space-base);

    

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.header-top__content__left .go-back-button a {
    color: #fff;
}

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

.header-top__content__right {
    height: 100%;

    position: absolute;
    right: var(--space-base);

    
}

.header-top__content__right .login-info .Menu_DropDownButton.open .Menu_DropDownPanel {
    margin-top: 10px;
}

.header-top__content__right .login-info .login-info__notifications-link {
    width: var(--space-m);
    margin-right: 0;
    margin-left: 0;
}

.desktop-small .header-top__content__right .login-info .login-info__notifications-link,
.tablet .header-top__content__right .login-info .login-info__notifications-link,
.phone .header-top__content__right .login-info .login-info__notifications-link {
    margin-right: var(--space-none);
}

.header-top__content__right .login-info .login-info__notifications-link .tippy-popper {
    margin-top: 15px;
}

.desktop-small .header-top__content__right .login-info .badge-icon {
    margin-right: var(--space-xs);
}

.header-top__content__right .login-info .badge-icon .icon {
    margin: var(--space-none);

    font-size: 24px;
    color: var(--color-neutral-0);
}

.header-top__content__right .login-info .badge-icon .badge {
    top: var(--space-s);
}

.header-top__content__right .login-info .login-info__username {
    width: 110px;
    margin-right: var(--space-s);

    line-height: var(--font-size-m);
    text-align: right;
    font-size: var(--font-size-s);
    font-weight: var(--font-regular);
    text-transform: uppercase;

    -webkit-transition: 350ms;

    -o-transition: 350ms;

    transition: 350ms;
}

.header-mini .header-top__content__right .login-info .login-info__username {
    margin-right: var(--space-s);
}

.header-top__content__right .login-info .user-avatar {
    margin-right: var(--space-xs);
}

.header-top__content__right .login-info .user-avatar ~ .Menu_DropDownArrow,
.header-top__content__right .login-info .user-avatar > .Menu_DropDownArrow {
    display: none;
}

.header-top__content__right .login-info img {
    width: var(--space-xl);
    height: var(--space-xl);
    margin-right: var(--space-s);

    border: var(--border-size-m) solid var(--color-primary);
    -webkit-border-radius: var(--space-xl);
    border-radius: var(--space-xl);

    -webkit-transition: -webkit-transform 350ms;

    transition: -webkit-transform 350ms;

    -o-transition: transform 350ms;

    transition: transform 350ms;

    transition: transform 350ms, -webkit-transform 350ms;
}

.header-mini .header-top__content__right .login-info img {
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
}

.header-top__content__right .login-info .language-switcher .Menu_DropDownPanel {
    min-width: 40px;
    margin-left: 5px;
}

.header-top__content__right .login-info .language-switcher .Menu_DropDownPanel a,
.header-top__content__right .login-info .language-switcher .Menu_DropDownPanel a:link,
.header-top__content__right .login-info .language-switcher .Menu_DropDownPanel a:visited {
    min-width: 40px;
}

.header-top__content__right .login-info .Menu_TopMenu {
    border: var(--border-size-none);
    /*
            &:before {
                content: '';
                position: absolute;
                right: 3px;
                top: 50%;
                transform: translateY(-50%);
                height: 20px;
                width: 20px;
                background: transparent;
                border-radius: var(--border-radius-circle);
                border: var(--border-size-s) solid var(--color-primary);

                .tablet &,
                .phone & {
                    top: 50%;
                    transform: translateY(-50%);
                    right: 19px;
                }
            }
*/
}

.header-top__content__right .login-info .Menu_TopMenu .Menu_DropDownArrow:before,
.header-top__content__right .login-info .Menu_TopMenu .Menu_DropDownArrow:after {
    background: var(--color-neutral-0);
}

.header-top__content__right .login-info .Menu_TopMenu:hover > div .Menu_DropDownArrow:before,
.header-top__content__right .login-info .Menu_TopMenu:hover > div .Menu_DropDownArrow:after {
    background-color: var(--color-neutral-5);
}

.tablet .header-top__content__right .login-info .Menu_TopMenu,
.phone .header-top__content__right .login-info .Menu_TopMenu {
    display: none;
}

.header-top__content__right .login-info .Menu_TopMenu:hover {
    border: var(--space-none);
}

.menu-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: none;
        -webkit-flex-direction: column;
        flex-direction: column;

    width: 24px;
    margin-right: var(--space-m);

    color: var(--color-neutral-10);

    z-index: 1;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-direction: column;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
}

.menu-icon-line {
    width: 100%;
    height: 2px;
    margin: 3px 0;

    background-color: var(--color-neutral-0);

    -webkit-border-radius: 20px;

    border-radius: 20px;
}

/* ================================================================ */
/*  $3.2 - Layout Menu                                              */
/* ================================================================ */
.Application_Menu {
    width: 100%;
    height: 100%;
}

.Menu_TopMenu {
    height: 100%;

    cursor: pointer;

    position: relative;
}

.navigation .Menu_DropDownButton {
    width: 100%;
}

.header .Menu_TopMenu {
    padding: 0 20px;

    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;

    -webkit-transition: all 150ms linear;
            -o-transition: all 150ms linear;
            transition: all 150ms linear;
}

.tablet .header .Menu_TopMenu,
.phone .header .Menu_TopMenu {
    height: auto;

    border-bottom: 0;
    border-left: 3px solid transparent;
}

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

.tablet .header .Menu_TopMenu:hover,
.phone .header .Menu_TopMenu:hover,
.tablet .header .Menu_TopMenu.Menu_TopMenuActive,
.phone .header .Menu_TopMenu.Menu_TopMenuActive {
    border-bottom: 0;
    border-left: 3px solid var(--color-primary);
}

.navigation .Menu_TopMenu {
    height: 40px;
    margin-bottom: 4px;
    padding: 0 16px;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    -webkit-transition: all 200ms linear;
            -o-transition: all 200ms linear;
            transition: all 200ms linear;
}

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

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

.Menu_TopMenu:hover > div a {
    color: var(--color-neutral-9);
    text-decoration: none;
}

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

.tablet .Menu_TopMenu:hover > div a,
.phone .Menu_TopMenu:hover > div a {
    color: var(--color-neutral-4);
}

.tablet .Menu_TopMenu:hover > div a:visited,
.phone .Menu_TopMenu:hover > div a:visited {
    color: var(--color-neutral-4);
}

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

.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-primary);
}

.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 {
    width: 20px;
    margin-top: 4px;
    margin-right: 8px;

    text-align: left;
    font-size: 16px;
    color: var(--color-neutral-6);
}

.Menu_DropDownPanel {
    padding-left: 16px;

    background-color: var(--color-neutral-0);

    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;

    z-index: initial;
}

.Menu_DropDownPanel .fa {
    width: 20px;
    margin-top: 4px;
    margin-right: 8px;

    text-align: left;
    font-size: 16px;
    color: var(--color-neutral-6);
}

.Menu_DropDownPanel a {
    height: 44px;
    padding: 8px 16px 8px 32px;

    line-height: 1.5;
    font-size: 14px;
    color: var(--color-text);
    white-space: pre-wrap;
}

.Menu_DropDownPanel a:link,
.Menu_DropDownPanel a:visited {
    height: 44px;
    padding: 8px 16px 8px 32px;

    line-height: 1.5;
    font-size: 14px;
    color: var(--color-text);
    white-space: pre-wrap;
}

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

    border-left: 2px solid var(--color-primary);
}

.header .Menu_DropDownPanel a {
    padding: 8px 16px 8px 16px;
}

.header .Menu_DropDownPanel a:link,
.header .Menu_DropDownPanel a:visited {
    padding: 8px 16px 8px 16px;
}

.tablet .header .Menu_DropDownPanel a:hover,
.phone .header .Menu_DropDownPanel a:hover {
    background: none;
}

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

    background-color: #f6f8fa;
}

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

    background-color: #f6f8fa;
}

.navigation .Menu_DropDownPanel {
    margin: 0;
    padding: 0;
}

.Menu_TopMenu > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    height: 100%;

    font-weight: var(--font-semi-bold);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.Menu_TopMenu > div a {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    height: 100%;

    font-weight: var(--font-regular);
    color: var(--color-neutral-8);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    -ms-flex-align: center;
}

.tablet .Menu_TopMenu > div a,
.phone .Menu_TopMenu > div a {
    color: var(--color-neutral-0);
}

.Menu_TopMenuActive > div a {
    font-weight: var(--font-regular);
    color: var(--color-primary);
}

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

.tablet .Menu_TopMenuActive > div a,
.phone .Menu_TopMenuActive > div a {
    font-weight: var(--font-regular);
    color: var(--color-neutral-0);
}

.tablet .Menu_TopMenuActive > div a:visited,
.tablet .Menu_TopMenuActive > div a:hover,
.phone .Menu_TopMenuActive > div a:visited,
.phone .Menu_TopMenuActive > div a:hover {
    font-weight: var(--font-regular);
    color: var(--color-neutral-0);
}

.Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    font-weight: var(--font-regular);
    color: var(--color-primary);
}

.tablet .Menu_TopMenu:hover.Menu_TopMenuActive > div a:visited,
.tablet .Menu_TopMenu:hover.Menu_TopMenuActive > div a:hover,
.phone .Menu_TopMenu:hover.Menu_TopMenuActive > div a:visited,
.phone .Menu_TopMenu:hover.Menu_TopMenuActive > div a:hover {
    font-weight: var(--font-regular);
    color: var(--color-neutral-0);
}

.Menu_TopMenus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    height: 100%;

    font-size: var(--font-size-s);
    text-transform: uppercase;
}

.navigation .Menu_TopMenus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-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 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
}

.header .Menu_DropDownPanel {
    min-width: 140px;
    height: auto;
    margin: 0;

    border: var(--border-size-s) solid var(--color-neutral-3);
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: var(--shadow-m);
    box-shadow: var(--shadow-m);

    z-index: 250;
}

.header .header-right .Menu_DropDownPanel {
    margin-top: 8px;

    overflow: visible !important;
}

.header .Menu_DropDownPanel:after {
    content: '';

    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--color-neutral-0);
    border-left: 5px solid transparent;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    position: absolute;
    top: -8px;
    left: 50%;
}

.header .Menu_DropDownPanel:before {
    content: '';

    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--color-neutral-5);
    border-left: 5px solid transparent;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    position: absolute;
    top: -8px;
    left: 50%;
}

.Menu_DropDownArrow {
    display: block;

    width: 20px;
    height: 20px;
    padding-top: 0;

    line-height: 1;
    font-size: 20px;

    border-width: 0;
    border-top-color: var(--color-neutral-10);

    position: relative;
    top: -2px;
    right: 0;
}

.Menu_DropDownArrow:before {
    content: '';

    width: 2px;
    height: 8px;

    background-color: var(--color-neutral-6);

    -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: top;
            -ms-transform-origin: top;
            transform-origin: top;
    -webkit-transition: all 150ms linear;
            -o-transition: all 150ms linear;
            transition: all 150ms linear;

    position: absolute;
    top: 8px;
    left: 8px;
}

.Menu_DropDownArrow:after {
    content: '';

    width: 2px;
    height: 8px;

    background-color: var(--color-neutral-6);

    -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: top;
            -ms-transform-origin: top;
            transform-origin: top;
    -webkit-transition: all 150ms linear;
            -o-transition: all 150ms linear;
            transition: all 150ms linear;

    position: absolute;
    top: 8px;
    right: 0;
}

.tablet .Menu_DropDownArrow:before,
.tablet .Menu_DropDownArrow:after,
.phone .Menu_DropDownArrow:before,
.phone .Menu_DropDownArrow:after {
    background-color: var(--color-neutral-5);
}

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

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

.tablet .Menu_DropDownButton.open .Menu_DropDownArrow:before,
.tablet .Menu_DropDownButton.open .Menu_DropDownArrow:after,
.phone .Menu_DropDownButton.open .Menu_DropDownArrow:before,
.phone .Menu_DropDownButton.open .Menu_DropDownArrow:after {
    background-color: var(--color-neutral-5);
}

.Menu_DropDownButton.open .Menu_DropDownPanel {
    overflow: visible !important;
}

.Menu_DropDownPanel {
    position: relative;
}

.header .Menu_DropDownPanel {
    padding: 0;

    position: absolute;
}

.header .Menu_DropDownPanel a,
.header .Menu_DropDownPanel a:link,
.header .Menu_DropDownPanel a:visited {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    font-size: var(--font-size-s);

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

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

.menu {
    background-color: var(--color-neutral-0);

    -webkit-transition: 350ms cubic-bezier(.59, .11, .59, .9);

    -o-transition: 350ms cubic-bezier(.59, .11, .59, .9);

    transition: 350ms cubic-bezier(.59, .11, .59, .9);

    position: relative;
    z-index: -1;
}

.menu .menu__inner-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.menu .menu__inner-container .Menu_DropDownButton.open .Menu_DropDownPanel {
    max-height: 70vh;

    overflow: auto !important;
}

.tablet .menu,
.phone .menu {
    z-index: auto;
}

.menu nav {
    height: 42px;

    font-size: 16px;
}

.tablet .menu .Menu_DropDownButton:not(:first-of-type),
.phone .menu .Menu_DropDownButton:not(:first-of-type) {
    margin: 0;
}

.menu .Menu_DropDownArrow {
    margin-left: -webkit-calc(8px - 4px);
    margin-left: calc(8px - 4px);
}

.menu .responsive-menu__actions {
    height: 70px;
}

.menu .responsive-menu__actions .application-name a {
    margin: 0 auto;
}

.tablet .menu .responsive-menu__actions .application-name a,
.phone .menu .responsive-menu__actions .application-name a {
    pointer-events: none;
}

.menu .responsive-menu__actions span {
    display: none;
}

.menu .responsive-menu__actions .login-info .login-info__notifications-link {
    display: none;
}

.menu .responsive-menu__actions .login-info .Menu_DropDownButton {
    margin: 0;
}

.menu.menu-hide {
    -webkit-transform: translateY(-55px);
    -ms-transform: translateY(-55px);
    transform: translateY(-55px);
}

/* $3.2.1 - Responsive */
.phone .header .Menu_DropDownButton + .Menu_DropDownButton,
.tablet .header .Menu_DropDownButton + .Menu_DropDownButton {
    margin-left: 0;
}

.tablet .header .Menu_DropDownPanel,
.phone .header .Menu_DropDownPanel {
    margin: 0;
    padding: 16px 24px;

    background-color: var(--color-primary);

    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;

    position: relative;
}

.tablet .header .Menu_DropDownPanel a:link,
.tablet .header .Menu_DropDownPanel a:visited,
.phone .header .Menu_DropDownPanel a:link,
.phone .header .Menu_DropDownPanel a:visited {
    color: var(--color-neutral-0);
}

.tablet .layout-top .Application_Menu,
.phone .layout-top .Application_Menu {
    width: 100%;
    height: 100%;

    pointer-events: none;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.phone .layout-top .Application_Menu {
    width: 100%;
    height: 100%;

    pointer-events: none;

    position: fixed;
    top: 0;
    left: 0;
    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 {
    content: '';

    width: 100vw;
    height: 100%;

    pointer-events: none;

    background-color: rgba(0, 0, 0, .1);

    opacity: 0;

    -webkit-transform: translateX(0%);

    -ms-transform: translateX(0%);

    transform: translateX(0%);
    -webkit-transition: opacity 300ms ease-out;
    -o-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;

    position: fixed;
    top: 0;
    left: 300px;
}

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

    opacity: 1;
}

.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 {
    content: '';

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, .1);

    opacity: 0;

    -webkit-transition: opacity 530ms ease-out;
            -o-transition: opacity 530ms ease-out;
            transition: opacity 530ms ease-out;

    position: absolute;
    top: 0;
    left: 0;
}

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

.tablet .header .Menu_TopMenu > div {
    padding: 16px;

    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 2px solid transparent;
}

.phone .header .Menu_TopMenu > div {
    padding: 16px;

    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 2px solid transparent;
}

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

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

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

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

.tablet .layout-top .Menu_TopMenus,
.phone .layout-top .Menu_TopMenus,
.tablet .layout-side .navigation,
.phone .layout-side .navigation {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    width: 335px;
    height: 100%;

    background-color: var(--color-primary);

    -webkit-box-shadow: var(--shadow-xl);

    box-shadow: var(--shadow-xl);

    -webkit-transform: translateX(335px);

    -ms-transform: translateX(335px);

    transform: translateX(335px);
    -webkit-transition: transform 430ms ease-out;
            -webkit-transition: -webkit-transform 430ms ease-out;
            transition: -webkit-transform 430ms ease-out;
            -o-transition: transform 430ms ease-out;
            transition: transform 430ms ease-out;
            transition: transform 430ms ease-out, -webkit-transform 430ms ease-out;

    right: -335px;
    left: auto;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.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 {
    -webkit-transform: translateX(-335px);
    -ms-transform: translateX(-335px);
    transform: translateX(-335px);

    overflow-y: auto;
}

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

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

/* ================================================================ */
/*  $3.3 - Page Layout - Content                                    */
/* ================================================================ */
.content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    position: relative;

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;
}

.main-content {
    position: relative;

    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
}

.content-top {
    position: relative;

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;
}

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

.content-top-title .Title_Links {
    font-size: var(--font-size-base);
    font-weight: var(--font-regular);
}

.content-top-title a {
    color: var(--color-neutral-5);
}

.content-top-title a:visited {
    color: var(--color-neutral-5);
}

.content-top-title a:hover {
    color: var(--color-primary-hover);
}

.content-top-actions {
    text-align: right;

    -webkit-box-flex: 1;
    -webkit-box-pack: end;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.content-top-title,
.content-top-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.layout-top.full-layout-width .header .ThemeGrid_Container,
.layout-top.full-layout-width .content .menu .ThemeGrid_Container,
.layout-top.full-layout-width .content .ThemeGrid_Container,
.layout-top.full-layout-width .content-bottom .ThemeGrid_Container {
    max-width: 100%;
    padding-right: var(--space-l);
    padding-left: var(--space-l);
}

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

.layout-top .content .menu .ThemeGrid_Container {
    width: 100%;
    max-width: 1366px;
    padding: var(--space-base) 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.phone .content-top {
        -webkit-flex-direction: column;
        flex-direction: column;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.phone .content-top-actions,
.phone .content-top-title {
    width: 100%;

    -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
}

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

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

.desktop-small .header .ThemeGrid_Container,
.desktop .header .ThemeGrid_Container {
    padding: var(--space-none) var(--space-base);
}

.desktop-small .content .ThemeGrid_Container,
.desktop .content .ThemeGrid_Container {
    padding: var(--space-base);
}

.desktop-small .content-bottom .ThemeGrid_Container,
.desktop .content-bottom .ThemeGrid_Container {
    padding: var(--space-base);
}

/* ================================================================ */
/*  $3.4 - Page Layout - Footer                                     */
/* ================================================================ */
footer {
    height: 30px;

    background-color: #eff0f6;
}

footer > div {
    height: 100%;
}

footer img {
    width: auto;
    max-height: 20px;
    margin-left: var(--space-s);
}

/* ================================================================ */
/*  $3.5 - Page Layout - Custom Layout Sidebar                      */
/* ================================================================ */
.layout-sidebar {
    height: 100%;
}

.layout-sidebar .layout .sidebar-menu {
    width: 100%;
    max-width: 250px;

    
}

.layout-sidebar .layout .menu > div:first-child {
    
}

.layout-sidebar .layout .header-left,
.layout-sidebar .layout .header-right {
    
}

.layout-sidebar .layout .content-breadcrumbs {
    
    
    
    
}

.layout-sidebar .layout .content-top-title,
.layout-sidebar .layout .content-top-actions {
    
    
    
}

.layout-sidebar .layout .content-middle {
    
}

.layout-sidebar .layout .content-container {
    width: 100%;

    
}

.tablet.portrait .layout-sidebar .layout .main-content,
.phone .layout-sidebar .layout .main-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.tablet.portrait .layout-sidebar .layout .sidebar-menu,
.phone .layout-sidebar .layout .sidebar-menu {
    max-width: 100%;
    margin-bottom: var(--space-l);
}

/* ================================================================ */
/*  $3.6 - Page Layout - Custom Login                               */
/* ================================================================ */
.layout-login.layout-login-simple .layout-login-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 430px;
    max-width: 720px;
    height: 460px;

    -webkit-border-radius: var(--border-radius-none);

    border-radius: var(--border-radius-none);

    
    
    
    
    

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.desktop-small .layout-login.layout-login-simple .layout-login-form {
    max-width: 500px;
}

.tablet .layout-login.layout-login-simple .layout-login-form {
    max-width: 300px;
}

.phone .layout-login.layout-login-simple .layout-login-form {
    max-width: 100%;
    margin: var(--space-none);
}

.layout-login.layout-login-simple .layout-login-form input {
    height: 60px;

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);
}

.layout-login.layout-login-simple .layout-login-container {
    width: 100%;
    max-width: 335px;
}

.layout-login.layout-login-simple .layout-login-background > img {
    -o-object-fit: fill;
    object-fit: fill;
    -o-object-position: left;
    object-position: left;
}

/* ================================================================ */
/*  $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 {
    -webkit-border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
    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);
    -webkit-border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
}

.accordion-item .accordion-item-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    padding: var(--space-m);

    font-size: var(--font-size-h6);

    cursor: pointer;

    -webkit-align-items: flex-start;

    align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
}

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

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

    -webkit-box-ordinal-group: 2;

    -webkit-order: 1;

    -ms-flex-order: 1;

    order: 1;
}

.accordion-item .accordion-item-icon {
    margin-right: var(--space-base);

    color: var(--color-neutral-7);

    -webkit-transition: all 300ms ease-in-out;
            -o-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;

    -webkit-box-ordinal-group: 3;

    -webkit-order: 2;

    -ms-flex-order: 2;

    order: 2;
}

.accordion-item .accordion-item-icon .fa {
    width: auto;

    font-size: 24px;
}

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

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

    background-color: var(--color-neutral-3);
}

.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,
.accordion-item .accordion-item-content.is--collapsed {
    visibility: hidden;

    height: 0;
    padding: var(--space-none) var(--space-xxl);
}

.accordion-item .accordion-item-content.is--expanded {
    visibility: visible;

    height: auto;
    padding: var(--space-none) var(--space-m) var(--space-m) var(--space-m);
}

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

/* $4.1.2 - Patterns - Content - Alert */
.alert {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    padding: var(--space-xs) var(--space-s);

    color: var(--color-neutral-0);

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.alert.background-info {
    color: var(--color-text);

    background: transparent;

    border: 1px solid var(--color-info);
}

.alert.background-info .alert-icon .fa {
    color: var(--color-info);
}

.alert.background-success {
    color: var(--color-text);

    background: transparent;

    border: 1px solid var(--color-success);
}

.alert.background-success .alert-icon .fa {
    color: var(--color-success);
}

.alert.background-warning {
    color: var(--color-text);

    background: transparent;

    border: 1px solid var(--color-warning);
}

.alert.background-warning .alert-icon .fa {
    color: var(--color-warning);
}

.alert.background-error {
    color: var(--color-text);

    background: transparent;

    border: 1px solid var(--color-error);
}

.alert.background-error .alert-icon .fa {
    color: var(--color-error);
}

.alert-icon {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    margin-right: var(--space-base);

    font-size: 24px;

    -webkit-align-self: flex-start;

    -ms-flex-item-align: start;

    align-self: flex-start;
}

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

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

.alert-close {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 24px;
    height: 24px;
    margin-right: -webkit-calc(-1 * var(--space-xs));
    margin-right: calc(-1 * var(--space-xs));
    margin-left: var(--space-base);

    cursor: pointer;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

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

/* $4.1.3 - Patterns - Content - Balloon */
.balloon {
    background-color: var(--color-neutral-0);

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);
    -webkit-box-shadow: var(--shadow-s);
    box-shadow: var(--shadow-s);
}

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

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

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

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

    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
}

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

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

    border-top: var(--border-size-s) solid var(--color-neutral-4);
}

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

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

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

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

.tippy-popper {
    line-height: 1.4;
    pointer-events: none;

    outline: 0;

    -webkit-transition-timing-function: cubic-bezier(.165, .84, .44, 1);

    -o-transition-timing-function: cubic-bezier(.165, .84, .44, 1);

    transition-timing-function: cubic-bezier(.165, .84, .44, 1);

    z-index: 9999;

    -webkit-perspective: 700px;
            perspective: 700px;
}

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

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

    bottom: -8px;
}

.tippy-popper[x-placement^=top] .tippy-roundarrow svg {
    -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);

    position: absolute;
    left: 0;
}

/* arrow */
.tippy-popper[x-placement^=top] .tippy-arrow {
    border-top: 8px solid var(--color-neutral-0);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;

    -webkit-transform-origin: 50% 0;
            -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;

    bottom: -8px;
}

.tippy-popper[x-placement^=top] .tippy-backdrop {
    -webkit-transform-origin: 0 25%;
            -ms-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%);
            -ms-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%);
            -ms-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);
            -ms-transform: translateY(-10px);
            transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateY(-20px);
            -ms-transform: translateY(-20px);
            transform: translateY(-20px);
}

.tippy-popper[x-placement^=top] [data-animation=perspective] {
    -webkit-transform-origin: bottom;
            -ms-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);
            -ms-transform: translateY(-10px);
            transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=fade][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
            transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=visible] {
    opacity: 1;

    -webkit-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
            transform: translateY(-10px);
}

.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateY(0);
            -ms-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);
            -ms-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);
            -ms-transform: translateY(0) scale(.5);
            transform: translateY(0) scale(.5);
}

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

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

    top: -8px;
}

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

    position: absolute;
    left: 0;
}

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

    -webkit-transform-origin: 50% 100%;
            -ms-transform-origin: 50% 100%;
            transform-origin: 50% 100%;

    top: -8px;
}

.tippy-popper[x-placement^=bottom] .tippy-backdrop {
    -webkit-transform-origin: 0 -50%;
            -ms-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%);
            -ms-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%);
            -ms-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);
            -ms-transform: translateY(10px);
            transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateY(20px);
            -ms-transform: translateY(20px);
            transform: translateY(20px);
}

.tippy-popper[x-placement^=bottom] [data-animation=perspective] {
    -webkit-transform-origin: top;
            -ms-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);
            -ms-transform: translateY(10px);
            transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateY(10px);
            -ms-transform: translateY(10px);
            transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=visible] {
    opacity: 1;

    -webkit-transform: translateY(10px);
            -ms-transform: translateY(10px);
            transform: translateY(10px);
}

.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateY(0);
            -ms-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);
            -ms-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);
            -ms-transform: translateY(0) scale(.5);
            transform: translateY(0) scale(.5);
}

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

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

    right: -16px;
}

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

    position: absolute;
    left: 0;
}

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

    -webkit-transform-origin: 0 50%;
            -ms-transform-origin: 0 50%;
            transform-origin: 0 50%;

    right: -8px;
}

.tippy-popper[x-placement^=left] .tippy-backdrop {
    -webkit-transform-origin: 50% 0;
            -ms-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%);
            -ms-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%);
            -ms-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);
            -ms-transform: translateX(-10px);
            transform: translateX(-10px);
}

.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateX(-20px);
            -ms-transform: translateX(-20px);
            transform: translateX(-20px);
}

.tippy-popper[x-placement^=left] [data-animation=perspective] {
    -webkit-transform-origin: right;
            -ms-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);
            -ms-transform: translateX(-10px);
            transform: translateX(-10px);
}

.tippy-popper[x-placement^=left] [data-animation=fade][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateX(-10px);
            -ms-transform: translateX(-10px);
            transform: translateX(-10px);
}

.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=visible] {
    opacity: 1;

    -webkit-transform: translateX(-10px);
            -ms-transform: translateX(-10px);
            transform: translateX(-10px);
}

.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateX(0);
            -ms-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);
            -ms-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);
            -ms-transform: translateX(0) scale(.5);
            transform: translateX(0) scale(.5);
}

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

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

    left: -16px;
}

.tippy-popper[x-placement^=right] .tippy-roundarrow svg {
    -webkit-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);

    position: absolute;
    left: 0;
}

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

    -webkit-transform-origin: 100% 50%;
            -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;

    left: -7px;
}

.tippy-popper[x-placement^=right] .tippy-backdrop {
    -webkit-transform-origin: -50% 0;
            -ms-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%);
            -ms-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%);
            -ms-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);
            -ms-transform: translateX(10px);
            transform: translateX(10px);
}

.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(20px);
}

.tippy-popper[x-placement^=right] [data-animation=perspective] {
    -webkit-transform-origin: left;
            -ms-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);
            -ms-transform: translateX(10px);
            transform: translateX(10px);
}

.tippy-popper[x-placement^=right] [data-animation=fade][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateX(10px);
            -ms-transform: translateX(10px);
            transform: translateX(10px);
}

.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=visible] {
    opacity: 1;

    -webkit-transform: translateX(10px);
            -ms-transform: translateX(10px);
            transform: translateX(10px);
}

.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=hidden] {
    opacity: 0;

    -webkit-transform: translateX(0);
            -ms-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);
            -ms-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);
            -ms-transform: translateX(0) scale(.5);
            transform: translateX(0) scale(.5);
}

.tippy-tooltip {
    font-size: .9rem;
    color: #3a445c;

    background-color: #fff;

    border: 1px solid #e8eef4;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 12px #dfe3ee;
    box-shadow: 0 2px 12px #dfe3ee;

    position: relative;

    will-change: transform;
}

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

    font-size: .75rem;
}

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

    font-size: 1rem;
}

.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] {
    -webkit-transition-timing-function: cubic-bezier(.53, 2, .36, .85);
    -o-transition-timing-function: cubic-bezier(.53, 2, .36, .85);
    transition-timing-function: cubic-bezier(.53, 2, .36, .85);
}

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

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

    position: absolute;
}

.tippy-roundarrow {
    width: 24px;
    height: 8px;

    pointer-events: none;

    fill: #333;
}

.tippy-backdrop {
    width: -webkit-calc(110% + 2rem);
    width: calc(110% + 2rem);

    background-color: #333;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    -webkit-transition: all cubic-bezier(.46, .1, .52, .98);

    -o-transition: all cubic-bezier(.46, .1, .52, .98);

    transition: all cubic-bezier(.46, .1, .52, .98);

    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: transform;
}

.tippy-backdrop:after {
    content: '';
    float: left;

    padding-top: 100%;
}

.tippy-backdrop + .tippy-content {
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    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: -webkit-calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
}

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

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

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

.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow {
    border-top: 8px solid transparent;
    border-right: 8px solid var(--color-neutral-4);
    border-bottom: 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 {
    margin-left: -8px;

    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--color-neutral-0);
    border-left: 8px solid transparent;

    top: 1px;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow:before {
    margin-left: -8px;

    border-top: 8px solid var(--color-neutral-0);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;

    top: -9px;
}

.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme .tippy-arrow:before {
    margin-top: -8px;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--color-neutral-0);

    right: 1px;
}

.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow:before {
    margin-top: -8px;

    border-top: 8px solid transparent;
    border-right: 8px solid var(--color-neutral-0);
    border-bottom: 8px solid transparent;
}

/* Light Theme */
.tippy-tooltip.light-theme {
    color: var(--color-neutral-9);

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
    -webkit-box-shadow: var(--shadow-s);
    box-shadow: var(--shadow-s);
}

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

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

.tippy-tooltip.light-theme[data-animatefill] {
    background-color: transparent;
}

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

    padding: var(--space-l);

    border: 2px dotted var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    position: relative;
}

.blank-slate-content {
    text-align: center;

    position: relative;
    z-index: 1;
}

.blank-slate-content [class^='heading'] {
    color: var(--color-text);
}

/* $4.1.5 - Patterns - Content - Bullets */
ol.bullets,
ul.bullets {
    margin-top: var(--space-none);
    margin-bottom: 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 {
    padding: var(--space-m);

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
}

/* $4.1.7 - Patterns - Content - CardBackground */
.card-background {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    height: 100%;
    padding: var(--space-m);

    color: var(--color-neutral-0);

    position: relative;

    overflow: hidden;
}

.card-background.no-shadow .card-background-color:after {
    display: none;
}

.card-background-content {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    width: 100%;

    position: relative;
    z-index: 1;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -webkit-flex-flow: column;

    -ms-flex-flow: column;

    flex-flow: column;
}

.card-background-content.top-left {
    text-align: left;

    -webkit-box-align: start;

    -webkit-align-items: flex-start;

    -ms-flex-align: start;

    align-items: flex-start;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.card-background-content.center-left {
    text-align: left;

    -webkit-box-align: start;

    -webkit-align-items: flex-start;

    -ms-flex-align: start;

    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.card-background-content.bottom-left {
    text-align: left;

    -webkit-box-align: start;

    -webkit-align-items: flex-start;

    -ms-flex-align: start;

    align-items: flex-start;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

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

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.card-background-content.center {
    text-align: center;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

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

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.card-background-content.top-right {
    text-align: right;

    -webkit-box-align: end;

    -webkit-align-items: flex-end;

    -ms-flex-align: end;

    align-items: flex-end;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.card-background-content.center-right {
    text-align: right;

    -webkit-box-align: end;

    -webkit-align-items: flex-end;

    -ms-flex-align: end;

    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.card-background-content.bottom-right {
    text-align: right;

    -webkit-box-align: end;

    -webkit-align-items: flex-end;

    -ms-flex-align: end;

    align-items: flex-end;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.card-background-image,
.card-background-color {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
}

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

.card-background-color:after {
    content: '';

    width: 100%;
    height: 100%;

    background:      -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%);
    background:         linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 100%);

    opacity: 1;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.card-background-image img {
    width: 100%;
    height: 100%;

    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
}

/* $4.1.8 - Patterns - Content - CardSectioned */
.card-sectioned {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    padding: var(--space-none);

    overflow: hidden;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

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

    overflow: hidden;

    -webkit-flex-basis: 200px;

    -ms-flex-preferred-size: 200px;

    flex-basis: 200px;
}

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

.card-image img {
    display: block;

    width: 100%;
    height: 100%;
    margin: 0 auto;

    -o-object-fit: cover;

    object-fit: cover;
}

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

    font-size: var(--font-size-h4);
    font-weight: var(--font-semi-bold);
}

.card-sectioned.flex-direction-row .card-image {
    min-height: 270px;
    padding: var(--space-m) var(--space-none) var(--space-m) var(--space-m);

    -webkit-flex-basis: 150px;

    -ms-flex-preferred-size: 150px;

    flex-basis: 150px;
}

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

.card-sectioned.flex-direction-row .card-image.padding-none img {
    height: 100%;
}

.card-content {
    padding: var(--space-m);

    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
}

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

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

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

    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
}

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

    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}

.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 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
}

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

.ie10 .card-sectioned.flex-direction-row,
.ie11 .card-sectioned.flex-direction-row {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-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 {
    -webkit-transition: opacity 330ms ease;
            -o-transition: opacity 330ms ease;
            transition: opacity 330ms ease;

    position: relative;
}

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

.carousel .tns-outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;

    width: 100%;

    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column-reverse;
}

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

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

.carousel .tns-nav {
    margin: 18px 0 0 0;
}

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

.carousel .carousel-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 100%;

    -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.carousel .carousel-arrow-left,
.carousel .carousel-arrow-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 40px;
    height: 40px;

    color: var(--color-neutral-7);

    background: var(--color-neutral-0);

    cursor: pointer;

    -webkit-border-radius: 50%;

    border-radius: 50%;
    -webkit-box-shadow: var(--shadow-xs);
            box-shadow: var(--shadow-xs);

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;

    position: absolute;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.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 {
    text-align: center;
    font-size: 100px;
    font-weight: 100;
    color: #fff;
}

.carousel .visually-hidden {
    opacity: 0;

    position: fixed;
    left: -10000px;
}

/* 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 {
    width: 17em;
    height: 1000px;
    height: 100vh;

    background-color: #fff;

    -webkit-box-shadow: 2px 0 15px rgba(0, 0, 0, .15);
            box-shadow: 2px 0 15px rgba(0, 0, 0, .15);

    -webkit-transition: left .25s;

    -o-transition: left .25s;

    transition: left .25s;

    position: fixed;
    top: 0;
    left: -17em;
    z-index: 100;

    overflow-y: auto;
}

.carousel .nav a {
    display: block;

    padding: .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 {
    padding: 10px;

    color: #fff;

    background-color: #af23ff;

    cursor: pointer;

    -webkit-transition: left .25s;

    -o-transition: left .25s;

    transition: left .25s;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.carousel .nav-toggle-handle:before {
    content: 'â—„';
    display: none;

    padding-right: 5px;

    font-size: .8em;
}

.carousel .nav-toggle-handle:after {
    content: 'â–º';

    padding-left: 5px;

    font-size: .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 {
    height: auto;
    max-height: 50px;

    vertical-align: bottom;
}

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

.carousel .controls li {
    display: block;

    height: 60px;
    margin-top: -30px;
    padding: 0 15px;

    line-height: 60px;

    cursor: pointer;

    -webkit-transition: background .3s;

    -o-transition: background .3s;

    transition: background .3s;

    position: absolute;
    top: 50%;
}

.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 {
    margin-bottom: 10px;

    text-align: center;
}

.carousel .tns-controls [aria-controls] {
    height: 2.5em;
    margin: 0 5px;
    padding: 0 1em;

    font-size: 15px;
    color: #000;

    background: #6cf;

    border: 0;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

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

.carousel [data-action] {
    display: block;

    min-width: 3em;
    margin: 10px auto;

    text-align: center;
    font-size: 17px;

    background: transparent;

    border: 0;
}

.carousel .tns-controls [disabled] {
    color: #999;

    background: #b3b3b3;

    cursor: not-allowed !important;
}

.carousel .tns-nav {
    margin: 18px 0 0 0;

    text-align: center;
}

.carousel .tns-nav > [aria-controls] {
    width: 9px;
    height: 9px;
    margin: 0 5px;
    padding: 0;

    background: var(--color-neutral-5);

    border: 0;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

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

    cursor: pointer;

    border: 1px solid  #ccc;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

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

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

.carousel .suite-container li {
    line-height: 1.4;
    font-size: 12px;

    background: #f5f5f5;
}

.carousel .suite-container .title {
    font-size: 14px;
    font-weight: bold;
    text-transform: capitalize;

    background: #8acac6;
}

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

    background: #dedede;
}

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

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

.carousel [class*='vertical'] .img:before {
    content: '';
    display: inline-block;

    width: 1px;
    height: 100%;
    margin-right: -1px;

    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(-.78125deg) skewY(-.78125deg);
                transform: skewX(-.78125deg) skewY(-.78125deg);
    }
    77.7% {
        -webkit-transform: skewX(.39063deg) skewY(.39063deg);
                transform: skewX(.39063deg) skewY(.39063deg);
    }
    88.8% {
        -webkit-transform: skewX(-.19531deg) skewY(-.19531deg);
                transform: skewX(-.19531deg) skewY(-.19531deg);
    }
}

@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(-.78125deg) skewY(-.78125deg);
                transform: skewX(-.78125deg) skewY(-.78125deg);
    }
    77.7% {
        -webkit-transform: skewX(.39063deg) skewY(.39063deg);
                transform: skewX(.39063deg) skewY(.39063deg);
    }
    88.8% {
        -webkit-transform: skewX(-.19531deg) skewY(-.19531deg);
                transform: skewX(-.19531deg) skewY(-.19531deg);
    }
}

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

@-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;
            -o-transition: all 0s;
            transition: all 0s;
}

.carousel .tns-slider > .tns-item {
    -webkit-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: '';
    clear: both;
    display: table;
}

.carousel .tns-horizontal.tns-no-subpixel > .tns-item {
    float: left;

    margin-right: -100%;
}

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

.carousel .tns-gallery {
    min-height: 1px;

    position: relative;
    left: 0;
}

.carousel .tns-gallery > .tns-item {
    -webkit-transition: transform 0s, opacity 0s;
            -webkit-transition: opacity 0s, -webkit-transform 0s;
            transition: opacity 0s, -webkit-transform 0s;
            -o-transition: transform 0s, opacity 0s;
            transition: transform 0s, opacity 0s;
            transition: transform 0s, opacity 0s, -webkit-transform 0s;

    position: absolute;
    left: -100%;
}

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

.carousel .tns-gallery > .tns-moving {
    -webkit-transition: all .25s;
            -o-transition: all .25s;
            transition: all .25s;
}

.carousel .tns-lazy-img {
    opacity: .6;

    -webkit-transition: opacity .6s;
            -o-transition: opacity .6s;
            transition: opacity .6s;
}

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

.carousel .tns-ah {
    padding: 0 75px;

    -webkit-transition: height 0s;
            -o-transition: height 0s;
            transition: height 0s;
}

.card:not(.card-background) .carousel .tns-ah {
    padding: 0;

    text-align: center;
}

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

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

.carousel .tns-transparent {
    visibility: hidden;

    opacity: 0;
}

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

    z-index: 0;
}

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

    z-index: -1;
}

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

    width: 100%;
}

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

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

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

.chat.is-right {
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;

    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row-reverse;
}

.chat .chat-message-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    max-width: 600px;
    padding: var(--space-base);

    word-break: break-word;

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);

    position: relative;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

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

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

.chat-message-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    margin-top: var(--space-xs);

    font-size: var(--font-size-xs);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

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

.chat.is-inline .chat-message-content {
    padding: 0;

    background-color: transparent;

    cursor: initial;
}

.phone .chat-message {
    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-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;

    width: 100%;
    height: 100%;

    outline: none;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1500;
    z-index: 500;

    overflow: hidden;
    /* create separate layer, to avoid paint on window.onscroll in webkit/blink */

    -webkit-backface-visibility: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-touch-action: none;
        touch-action: none;
}

.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: .001;
    /* for open/close transition */

    -webkit-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
            -o-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
            transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);

    will-change: opacity;
}

.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 {
    width: 100%;
    height: 100%;

    background: #000;

    opacity: 0;

    position: absolute;
    top: 0;
    left: 0;

    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

.pswp__scroll-wrap {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -ms-touch-action: none;
        touch-action: none;
}

/* 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 {
    width: 100%;

    -webkit-transform-origin: left top;
            -ms-transform-origin: left top;
            transform-origin: left top;
    /* for open/close transition */
    -webkit-transition: -webkit-transform 333ms cubic-bezier(.4, 0, .22, 1);
            transition: -webkit-transform 333ms cubic-bezier(.4, 0, .22, 1);
            -o-transition:         transform 333ms cubic-bezier(.4, 0, .22, 1);
            transition:         transform 333ms cubic-bezier(.4, 0, .22, 1);
            transition:         transform 333ms cubic-bezier(.4, 0, .22, 1), -webkit-transform 333ms cubic-bezier(.4, 0, .22, 1);

    position: absolute;
}

.pswp__bg {
    /* for open/close transition */
    -webkit-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
            -o-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
            transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);

    will-change: opacity;
}

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

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

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

    overflow: hidden;
}

.pswp__img {
    width: auto;
    height: auto;

    position: absolute;
    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;

    top: 0;
    left: 0;
}

/*
    Error message appears when image is not loaded
    (JS option errorMsg controls markup)
*/
.pswp__error-msg {
    width: 100%;
    margin-top: -8px;

    line-height: 16px;
    text-align: center;
    font-size: 14px;
    color: #ccc;

    position: absolute;
    top: 50%;
    left: 0;
}

.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 {
    float: right;
    display: block;

    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;

    background: none;

    cursor: pointer;
    opacity: .75;

    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;

    -webkit-transition: opacity .2s;
            -o-transition: opacity .2s;
            transition: opacity .2s;

    position: relative;

    overflow: visible;

    -webkit-appearance: none;
}

.pswp__button:focus,
.pswp__button:hover {
    opacity: 1;
}

.pswp__button:active {
    opacity: .9;

    outline: none;
}

.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 {
    width: 44px;
    height: 44px;

    background: url(/WebPatterns/img/PhotoswipeSkin.png?18249&18249&18397&37&1124) 0 0 no-repeat;
    -webkit-background-size: 264px 88px;
    background-size: 264px 88px;
}

.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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 40px;
    height: 40px;

    color: var(--color-neutral-5);

    background: var(--color-neutral-9);

    -webkit-border-radius: 50%;

    border-radius: 50%;
    -webkit-box-shadow: var(--shadow-s);
            box-shadow: var(--shadow-s);

    position: absolute;
    top: 50%;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

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

    width: 100%;
    height: 100%;
    padding: 10px;

    background: rgba(0, 0, 0, .5);

    opacity: 0;

    -webkit-transition: opacity .25s ease-out;
            -o-transition: opacity .25s ease-out;
            transition: opacity .25s ease-out;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1600;

    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

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

.pswp__share-tooltip {
    display: block;

    width: auto;

    background: #fff;

    -webkit-border-radius: 2px;

    border-radius: 2px;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
            box-shadow: 0 2px 5px rgba(0, 0, 0, .25);

    -webkit-transform: translateY(6px);
            -ms-transform: translateY(6px);
            transform: translateY(6px);
    -webkit-transition: -webkit-transform .25s;
            transition: -webkit-transform .25s;
            -o-transition:         transform .25s;
            transition:         transform .25s;
            transition:         transform .25s, -webkit-transform .25s;

    position: absolute;
    top: 56px;
    right: 44px;
    z-index: 1620;

    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.pswp__share-tooltip a {
    display: block;

    padding: 8px 12px;

    line-height: 18px;
    font-size: 14px;
    color: #000;
    text-decoration: none;
}

.pswp__share-tooltip a:hover {
    color: #000;
    text-decoration: none;
}

.pswp__share-tooltip a:first-child {
    /* round corners on the first/last list item */
    -webkit-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
}

.pswp__share-tooltip a:last-child {
    -webkit-border-radius: 0 0 2px 2px;
    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);
            -ms-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;

            pointer-events: none;

    border: 6px solid transparent;
    border-bottom-color: #fff;

    position: absolute;
    top: -12px;
    right: 15px;

    -webkit-pointer-events: none;
       -moz-pointer-events: none;
}

a.pswp__share--facebook:hover {
    color: #fff;

    background: #3e5c9a;
}

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

a.pswp__share--twitter:hover {
    color: #fff;

    background: #55acee;
}

a.pswp__share--pinterest:hover {
    color: #ce272d;

    background: #ccc;
}

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

/*

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

 */
.pswp__counter {
    height: 44px;
    padding: 0 10px;

    line-height: 44px;
    font-size: var(--font-size-base);
    color: #fff;

    opacity: .75;

    position: absolute;
    top: 0;
    left: 0;
}

/*
    
    4. Caption

 */
.pswp__caption {
    width: 100%;
    min-height: 44px;

    position: absolute;
    bottom: 0;
    left: 0;
}

.pswp__caption small {
    font-size: 11px;
    color: #bbb;
}

.pswp__caption__center {
    max-width: 420px;
    margin: 0 auto;
    padding: 10px;

    line-height: 20px;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-semi-bold);
    color: #ccc;
}

.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;
    margin-left: -22px;

    opacity: 0;

    -webkit-transition: opacity .25s ease-out;
            -o-transition: opacity .25s ease-out;
            transition: opacity .25s ease-out;

    position: absolute;
    top: 0;
    left: 50%;

    direction: ltr;
    will-change: opacity;
}

.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&37&1124) 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(.4, 0, .22, 1) infinite;
            animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
    width: 14px;
    height: 14px;
    margin: 0;

    background: none;

    opacity: .75;

    position: absolute;
    top: 15px;
    left: 15px;
}

.pswp--css_animation .pswp__preloader__cut {
    width: 7px;
    height: 14px;
    /* 
            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;

    overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin: 0;

    background: none;

    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
    -webkit-border-radius: 50%;
    border-radius: 50%;

    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) {
    .pswp__preloader {
        float: right;

        margin: 0;

        position: relative;
        top: auto;
        left: auto;
    }
}

@-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 {
    visibility: visible;

    opacity: 1;

    z-index: 1550;

    -webkit-font-smoothing: auto;
}

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

    position: absolute;
    top: 0;
    left: 0;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    -webkit-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
            -o-transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);
            transition: opacity 333ms cubic-bezier(.4, 0, .22, 1);

    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

/* 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, .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, .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: .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: -webkit-flex;
    display: flex;

    width: 100%;
    height: 100%;
    padding: var(--space-l);

    pointer-events: none;

    opacity: 0;

    -webkit-transition: opacity 330ms ease;
            -o-transition: opacity 330ms ease;
            transition: opacity 330ms ease;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 102;

    

    
}

.modal.is--visible {
    pointer-events: auto;

    opacity: 1;
}

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

.modal-wrapper {
    width: 100%;
    max-width: 500px;

    background-color: var(--color-neutral-0);

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

.modal-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    padding: var(--space-base) var(--space-base) var(--space-none);
}

.modal-title {
    font-size: var(--font-size-m);
    font-weight: var(--font-bold);

    -webkit-box-flex: 1;

    -webkit-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 {
    padding: var(--space-base) var(--space-base) var(--space-base) var(--space-base);
}

.modal-footer {
    padding: var(--space-base);

    text-align: right;

    border-top: var(--border-size-s) solid var(--color-neutral-4);
}

/* $4.1.13 - Patterns - Content - Panel */
.panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    padding: var(--space-none);

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.panel-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.panel-title {
    padding: var(--space-m) var(--space-m) var(--space-none) var(--space-l);

    font-size: var(--font-size-h4);
    font-weight: var(--font-semi-bold);
}

.panel-actions {
    padding: var(--space-m) var(--space-l) var(--space-none) var(--space-m);

    text-align: right;
}

.panel-content {
    padding: var(--space-l);

    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
}

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

.panel-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    padding: var(--space-m) var(--space-base);

    background-color: var(--color-neutral-0);

    border-top: var(--border-size-s) solid var(--color-neutral-3);

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

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

.section-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    padding-bottom: var(--space-s);

    border-bottom: var(--border-size-s) solid var(--color-neutral-4);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-semi-bold);

    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
}

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

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

/* $4.1.15 - Patterns - Content - Tag */
.tag {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;

    min-width: 32px;
    height: 32px;
    padding: var(--space-none) var(--space-base);

    line-height: 1;
    font-weight: var(--font-semi-bold);
    color: var(--color-neutral-0);
    word-break: normal;

    background-color: var(--color-primary);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

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

    font-size: var(--font-size-xs);
}

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

    font-size: var(--font-size-base);
}

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

/* $4.1.16 - Patterns - Content - Tooltip */
.tooltip {
    padding: var(--space-base);

    text-align: center;
    color: var(--color-text);

    background-color: var(--color-neutral-0);

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);

    z-index: 50;
}

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

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

/** Input-calendar z-index fix */
div.calendar {
    z-index: 102;
}

/* ================================================================ */
/*  $4.2 - Patterns - Controls                                      */
/* ================================================================ */
/* $4.2.1 - Patterns - Controls - AnimatedLabel */
.animated-label {
    display: block;

    position: relative;
}

.animated-label-text {
    color: var(--color-neutral-8);
    pointer-events: none;

    -webkit-transition: all 300ms ease;
            -o-transition: all 300ms ease;
            transition: all 300ms ease;

    position: absolute;
    top: 15px;
    left: 16px;
}

.animated-label.active .animated-label-text {
    font-size: var(--font-size-xs);
    font-weight: var(--font-bold);
    color: var(--color-neutral-6);

    top: 4px;
}

.animated-label-input .input {
    height: auto;
    padding: var(--space-m) var(--space-base) var(--space-s) var(--space-base);

    color: var(--color-text);
}

.animated-label-inline .input,
.layout .Form .animated-label-inline .input.ReadOnly:not(.Not_Valid) {
    padding: var(--space-m) var(--space-none) var(--space-xs) var(--space-s);

    background-color: transparent;

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);
}

.animated-label-inline .animated-label-text {
    left: var(--space-s);
}

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

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

.button-group.justified {
    width: 100%;
}

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

.button-group label {
    word-break: normal;

    position: relative;

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;
}

.button-group label:hover {
    color: var(--color-primary);
}

.button-group .btn {
    width: 100%;

    color: var(--color-neutral-7);
    white-space: nowrap;

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-none);
    border-radius: var(--border-radius-none);
}

.button-group .btn:hover {
    color: var(--color-primary);
}

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

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

.button-group label:last-child .btn {
    -webkit-border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
    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 .btn:focus {
    border: var(--border-size-s) solid var(--color-cyan);
}

.button-group label .btn:focus:active {
    color: var(--color-primary);

    background-color: var(--color-neutral-7);
}

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

.button-group label:focus {
    border: var(--border-size-s) solid var(--color-cyan);
}

.button-group label:focus:active {
    color: var(--color-primary);

    background-color: var(--color-neutral-7);
}

.button-group input[type='radio'] {
    width: 100%;
    height: 100%;

    opacity: 0;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

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

    background-color: var(--color-primary);

    border: var(--border-size-s) solid var(--color-primary);
}

.button-group input[type='radio'][disabled='disabled'] + .btn {
    color: var(--color-neutral-6);

    background-color: #dfe3ee;

    opacity: .5;

    border-color: #dfe3ee;
}

.button-group input[type='radio'][disabled='disabled'] + .btn:hover {
    color: var(--color-neutral-5);

    cursor: not-allowed;
}

.phone .button-group {
    width: 100%;
}

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

    -webkit-box-flex: 0;

    -webkit-flex: none;

    -ms-flex: none;

    flex: none;
}

.ie11 .button-group:not(.justified) label {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
}

/* $4.2.3 - Patterns - Controls - DatePicker */
.pika-single {
    display: block;

    width: 320px;
    margin-top: var(--space-xs);

    background: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    position: relative;
}

.pika-single.is-bound {
    -webkit-box-shadow: var(--shadow-s);
    box-shadow: var(--shadow-s);

    position: absolute;
    z-index: 151;
}

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

.pika-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    padding: var(--space-m);

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

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

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;
}

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

.pika-prev {
    padding: var(--space-none) var(--space-s);

    font: normal normal normal 0 FontAwesome;
    color: var(--color-neutral-7);

    background-color: transparent;

    cursor: pointer;

    border: var(--border-size-none);
}

.pika-next {
    margin-left: var(--space-base);
    padding: var(--space-none) var(--space-s);

    font: normal normal normal 0 FontAwesome;
    color: var(--color-neutral-7);

    background-color: transparent;

    cursor: pointer;

    border: var(--border-size-none);
}

.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-label {
    color: var(--color-primary);

    cursor: pointer;
}

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

.pika-table {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    width: 100%;
    padding: var(--space-none) var(--space-m);
}

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

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

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;
}

.pika-table th {
    font-weight: var(--font-regular);
    color: var(--color-neutral-7);

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;
}

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

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

.pika-table tbody tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -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: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    height: 32px;

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.pika-button {
    width: 32px;
    height: 32px;
    padding: var(--space-none);

    color: var(--color-neutral-10);

    background-color: transparent;

    cursor: pointer;

    border: var(--border-size-none);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    position: relative;
}

.pika-button:hover {
    color: #fff;

    background-color: var(--color-primary);

    opacity: .5;
}

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

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

    background-color: var(--color-primary);
}

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

    background-color: var(--color-neutral-3);
}

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

.has-event .pika-button:before {
    content: '';

    width: 4px;
    height: 4px;
    margin-left: -2px;

    background-color: var(--color-primary);

    -webkit-border-radius: var(--border-radius-circle);

    border-radius: var(--border-radius-circle);

    position: absolute;
    bottom: 3px;
    left: 50%;
}

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

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

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

.pika-go-today {
    padding: var(--space-none);

    color: var(--color-primary);

    background-color: transparent;

    cursor: pointer;

    border: var(--border-size-none);
}

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

.month-picker,
.year-picker {
        -webkit-flex-direction: row;
        flex-direction: row;

    padding: var(--space-none);

    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
}

.pika-month,
.pika-year {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 33.333%;
    margin-bottom: var(--space-base);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

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

    background-color: var(--color-primary);
}

.prev-year,
.next-year {
    color: var(--color-neutral-7);
}

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

.ie10 .pika-days-picker + .pika-table thead tr th,
.ie11 .pika-days-picker + .pika-table thead tr th {
    display: block;

    margin: 0 auto;

    -webkit-box-flex: 0;

    -webkit-flex: none;

    -ms-flex: none;

    flex: none;
}

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

.dropdown .dropdown-content .dropdown-content-list {
    width: 100%;
}

.dropdown .dropdown-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 100%;

    background-image: none;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    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);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.dropdown .dropdown-icon {
    color: var(--color-neutral-7);

    -webkit-transition: all 300ms ease-in-out;
            -o-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.dropdown .dropdown-icon .fa {
    width: auto;

    font-size: 24px;
}

.dropdown .dropdown-content .dropdown-content-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    margin-top: var(--space-xs);
    padding: var(--space-s) var(--space-none);

    background: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-transition: opacity 180ms ease;
            -o-transition: opacity 180ms ease;
            transition: opacity 180ms ease;

    position: absolute;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

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

.dropdown.is--hidden .dropdown-content .dropdown-content-list {
    visibility: hidden;

    pointer-events: none;

    opacity: 0;
}

dropdown.is--visible .dropdown-content-list {
    visibility: visible;

    opacity: 1;
}

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

    opacity: 0;
}

.dropdown .dropdown-content .dropdown-content-list a {
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    height: 40px;
    padding: var(--space-none) var(--space-base);

    color: var(--color-neutral-9);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.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);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
}

.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 {
    width: 100%;
    margin-bottom: var(--space-none);
    padding: var(--space-s);
    padding-left: var(--space-xl);

    background-color: var(--color-neutral-0);

    border-bottom: var(--border-size-s) solid var(--color-neutral-5);

    position: relative;
}

.choices[data-type*='select-one'] .choices__button {
    width: 20px;
    height: auto;
    margin-top: -10px;
    margin-right: var(--space-m);
    padding: var(--space-none);

    position: absolute;
    top: 50%;
    right: 0;
}

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

.choices[data-type*='select-one'] .choices__button:focus {
    opacity: 1;

    -webkit-box-shadow: 0 0 0 2px var(--shadow-xs);

    box-shadow: 0 0 0 2px var(--shadow-xs);
}

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

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

.choices[data-type*='select-one']:after {
    content: '\f107';

    font: normal normal normal 24px/1 FontAwesome;
    font-family: 'FontAwesome';
    color: var(--color-neutral-7);

    -webkit-transform-origin: center;

    -ms-transform-origin: center;

    transform-origin: center;
    -webkit-transition: all 300ms ease;
            -o-transition: all 300ms ease;
            transition: all 300ms ease;

    position: absolute;
    top: 8px;
    right: 16px;
}

.choices[data-type*='select-one'].is-open:after {
    color: var(--color-primary);

    -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

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

.choices[data-type*='select-one'][dir='rtl'].is-open:after {
    left: 16px;
}

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

    right: auto;
    left: 0;
}

.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 {
    display: inline-block;

    width: 8px;
    margin-top: var(--space-none);
    margin-right: -4px;
    margin-bottom: var(--space-none);
    margin-left: var(--space-s);
    padding-left: var(--space-base);

    line-height: 1;

    border: var(--border-size-none);

    position: relative;
}

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

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

/* Arrow icon */
.choices__inner {
    display: inline-block;

    width: 100%;
    height: 40px;
    padding-left: var(--space-base);

    line-height: -webkit-calc(var(--font-size-base) * 2);

    line-height: calc(var(--font-size-base) * 2);
    vertical-align: top;
    color: var(--color-neutral-3);

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-5);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;
}

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

.is-focused .choices__inner {
    color: var(--color-neutral-1);

    border-color: var(--color-primary);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
}

.is-open .choices__inner {
    color: var(--color-neutral-1);

    border-color: var(--color-primary);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
    -webkit-border-radius: var(--border-radius-none);
    border-radius: var(--border-radius-none);
}

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

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

    list-style: none;
}

.choices__list--single {
    display: inline-block;

    width: 100%;
    padding-right: var(--space-base);
}

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

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

.choices__input.choices__input--cloned {
    border: var(--space-none);
}

.search--wrapper {
    position: relative;
}

.search--wrapper input {
    height: 40px;
    padding: var(--space-none) var(--space-base);

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;
}

.search--wrapper:before {
    content: '\f002';

    font-family: 'FontAwesome';
    color: var(--color-neutral-6);

    -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);

    position: absolute;
    top: 50%;
    left: var(--space-base);
}

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

.choices__list--multiple .choices__item {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    height: 32px;
    margin-right: var(--space-xs);
    margin-bottom: var(--space-xs);
    padding: var(--space-xs) var(--space-s);

    vertical-align: middle;
    font-size: var(--font-size-xs);
    font-weight: var(--font-semi-bold);
    color: var(--color-neutral-9);
    word-break: break-all;

    background-color: var(--color-neutral-3);

    border: var(--border-size-s) solid var(--color-neutral-3);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.choices[data-type*='select-multiple'] .choices__button {
    color: var(--color-neutral-7);
}

.choices[data-type*='select-multiple'] .choices__button:hover {
    color: var(--color-primary);
}

.choices[data-type*='select-multiple'] .choices__button:after {
    content: '\f057';

    font: normal normal normal 14px/1 FontAwesome;
    font-family: 'FontAwesome';
    text-indent: 0;

    -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);

    position: absolute;
    top: 50%;
    left: 0;
}

.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 {
    min-width: 100%;

    border: var(--border-size-s) solid var(--color-neutral-4);
}

.choices[data-type*='select-multiple'] .search--wrapper input:focus {
    border: var(--border-size-s) solid var(--color-primary);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.choices[data-type*='select-multiple'] .choices__inner {
    height: auto;
    padding: var(--space-none);

    border: none;
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
}

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

.choices[data-type*='select-multiple'].is-focused.is-open .choices__inner {
    border: none;
}

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

.choices__list--multiple .choices__item.is-highlighted {
    color: var(--color-neutral-0);

    background-color: var(--color-primary);

    border: var(--border-size-s) solid var(--color-primary);
}

.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 {
    display: none;

    width: 100%;

    word-break: break-all;

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-5);

    position: absolute;
    top: 100%;
    z-index: 1;

    overflow: hidden;
}

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

.is-flipped .choices__list--dropdown {
    margin-top: var(--space-none);
    margin-bottom: -1px;

    -webkit-border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);

    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);

    top: auto;
    bottom: 100%;
}

.choices__list--dropdown .choices__list {
    max-height: 300px;

    position: relative;

    overflow: auto;

    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

.choices__list--dropdown .choices__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    height: 40px;
    padding: var(--space-none) var(--space-base);

    position: relative;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

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

.choices__heading {
    padding: var(--space-s);

    font-size: var(--font-size-base);
    font-weight: var(--font-semi-bold);
    color: var(--color-neutral-5);

    border-bottom: var(--border-size-s) solid var(--color-neutral-0);
}

.choices__button {
    text-indent: -9999px;

    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;

    cursor: pointer;

    border: var(--border-size-none);

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.choices__button:focus {
    outline: none;
}

.choices__input {
    display: inline-block;

    width: 100%;

    vertical-align: baseline;

    background-color: var(--color-neutral-0);

    border: var(--border-size-none);
    -webkit-border-radius: var(--border-radius-none);
    border-radius: var(--border-radius-none);
}

.choices__input:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 1px var(--color-neutral-5);
    box-shadow: 0 0 0 1px var(--color-neutral-5);
}

.choices__placeholder {
    opacity: .5;
}

.choices__list--single .choices__item {
    width: 99%;
    padding-top: var(--space-xs);
    padding-right: var(--space-base);

    color: var(--color-neutral-10);
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;

    overflow: hidden;
}

.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-right: var(--space-xs);
    padding-left: var(--space-base);
}

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

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

.choices[dir='rtl'] .choices__input {
    padding-right: 2px;
    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;

        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);

        position: absolute;
        top: 50%;
        right: 10px;
    }
    .choices[dir='rtl'] .choices__list--dropdown .choices__item--selectable {
        padding-right: var(--space-s);
        padding-left: 100px;

        text-align: right;
    }
    .choices[dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
        right: auto;
        left: 10px;
    }
}

/* $4.2.6 - Patterns - Controls - FileUpload */
.file-upload {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    padding: var(--space-base);

    background: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;

    position: relative;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.file-upload .file-upload-icon {
    color: var(--color-primary);
}

.file-upload .file-upload-delete {
    color: var(--color-neutral-5);
    pointer-events: none;

    cursor: pointer;
    opacity: 0;

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;
}

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

    opacity: 1;
}

.file-upload .file-upload-message {
    padding-left: var(--space-base);

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;
}

.file-upload .file-upload-message > div {
    color: var(--color-primary) !important;
}

.file-upload .file-upload-widget input[type=file] {
    width: 100%;
    height: 100%;

    cursor: pointer;
    opacity: 0;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

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

    position: relative;
}

.input-with-icon .input-with-icon-content-icon {
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;

    width: 40px;
    height: 40px;

    position: absolute;
    left: 0;
}

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

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

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

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

.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 {
    right: 0;
    left: auto;
}

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

.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: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    margin-bottom: var(--space-l);

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.range-slider-values {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.range-slider .noUi-connect {
    background: var(--color-primary);
}

.range-slider .noUi-target {
    background: var(--color-neutral-5);

    border: none;
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
}

.range-slider .noUi-handle {
    width: 24px;
    height: 24px;
    margin-top: -10px;

    background: var(--color-neutral-0);

    cursor: pointer;

    border: var(--border-size-m) solid var(--color-primary);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: var(--shadow-xs);
    box-shadow: var(--shadow-xs);

    -webkit-transition: 150ms;

    -o-transition: 150ms;

    transition: 150ms;
}

.range-slider .noUi-handle:before,
.range-slider .noUi-handle:after {
    height: 10px;
    margin-top: -5px;

    background: transparent;

    border-style: solid;
    border-color: var(--color-neutral-7);

    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);

    left: 6px;
}

.range-slider .noUi-handle:after {
    width: 3px;

    border-width: var(--border-size-none) var(--border-size-s);
    border-style: solid;

    left: 10px;
}

.range-slider .noUi-handle.noUi-active {
    background: var(--color-primary);

    border: var(--border-size-m) solid var(--color-primary);

    -webkit-transform: scale(1.2);

    -ms-transform: scale(1.2);

    transform: scale(1.2);
}

.range-slider .noUi-handle.noUi-active:before,
.range-slider .noUi-handle.noUi-active:after {
    border-color: var(--color-primary);
}

.range-slider .noUi-handle:hover {
    background: var(--color-primary);

    border: var(--border-size-m) solid var(--color-primary);
}

.range-slider .noUi-handle:hover:before,
.range-slider .noUi-handle:hover:after {
    border-color: var(--color-primary);
}

.range-slider .noUi-connects {
    -webkit-border-radius: var(--border-radius-soft);
    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[disabled='disabled'],
.range-slider[disabled] {
    pointer-events: none;

    cursor: not-allowed;
}

.range-slider[disabled='disabled'] .noUi-connect,
.range-slider[disabled] .noUi-connect {
    background: var(--color-background-body);
}

.range-slider[disabled='disabled'] .noUi-handle,
.range-slider[disabled] .noUi-handle {
    background: var(--color-neutral-5);

    border-color: var(--color-neutral-5);
}

.range-slider-label {
    margin-left: var(--space-s);

    color: var(--color-neutral-8);
}

.range-slider-separator {
    width: 16px;
    height: 2px;
    margin: var(--space-none) var(--space-s);

    font-size: 0;

    background-color: var(--color-neutral-4);
}

.range-slider-values .input {
    height: auto;
    margin-left: var(--space-none);
    padding: var(--space-none);

    background: transparent;

    border: 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 {
    width: 100%;
    height: 4px;
    margin: var(--space-base) var(--space-none) var(--space-base);
}

.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%);
            -ms-transform: translate(-50%, 20%);
            transform: translate(-50%, 20%);
}

.range-slider .noUi-pips-horizontal {
    height: 30px;
}

.range-slider.vertical .range-slider-object {
    height: 100%;
    margin-top: var(--space-m);
}

.range-slider .noUi-vertical {
    width: 6px;
    height: 100px;
    margin-top: var(--space-base);
}

.range-slider .noUi-vertical .noUi-handle {
    top: -4px;
    left: -10px;
}

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

/* Vertical */
/* $4.2.10 - Patterns - Controls - Search */
.search .input-with-icon .input-with-icon-content-icon:not(:empty) + .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 {
    width: 100%;
    max-width: 100%;
}

.search-balloon-answers {
    margin-top: var(--space-s);

    position: relative;
}

.search-balloon .tippy-arrow {
    display: none;
}

/* $4.2.12 - Patterns - Controls - TimePicker */
/* $4.2.13 - Patterns - Controls - ToogleButton */
.toggle-button {
    display: inline-block;

    width: 40px;
    height: 22px;
}

.toggle-button-label {
    width: 40px;
    height: 22px;
}

.toggle-button .checkbox {
    width: auto;
    height: auto;

    background-color: transparent;

    position: relative;
}

.toggle-button .checkbox:before {
    width: 36px;
    height: 20px;

    background-color: var(--color-neutral-4);

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: 50px;
    border-radius: 50px;

    position: relative;
}

.toggle-button .checkbox:hover:before {
    background-color: var(--color-primary-hover);

    border: var(--border-size-s) solid var(--color-primary-hover);
}

.toggle-button .checkbox:checked:before {
    background-color: var(--color-success);

    border: var(--border-size-s) solid var(--color-success);
}

.toggle-button .checkbox:focus:before {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.toggle-button .checkbox:after {
    width: 16px;
    height: 16px;

    background-color: var(--color-neutral-0);

    opacity: 1;

    border: var(--border-size-none);
    -webkit-border-radius: 50%;
    border-radius: 50%;

    -webkit-transform: translateX(3px);

    -ms-transform: translateX(3px);

    transform: translateX(3px);

    position: absolute;
    top: 3px;
    left: 0;
}

.toggle-button .checkbox:checked:after {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19px);
    transform: translateX(19px);
}

.toggle-button .checkbox[disabled='disabled'],
.toggle-button .checkbox[disabled] {
    cursor: not-allowed;
}

.toggle-button .checkbox[disabled='disabled']:before,
.toggle-button .checkbox[disabled]:before {
    background-color: var(--color-neutral-2);

    border: var(--border-size-s) solid var(--color-neutral-4);
}

.toggle-button .checkbox[disabled='disabled']:after,
.toggle-button .checkbox[disabled]:after {
    background-color: var(--color-neutral-5);
}

/* $4.2.12 - Patterns - Controls - TimePicker */
.time-picker .dropdown-content-list .time-option[disabled='disabled'] {
    color: var(--color-neutral-6);
}

.time-picker .select {
    height: 100%;
    padding: 0;

    background-color: transparent;

    border: 0;
    -webkit-border-radius: 0;
    border-radius: 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.select {
    border: 0;
}

.time-picker .dropdown-header-text {
    width: 100%;
}

.time-picker .dropdown-icon {
    pointer-events: none;

    position: absolute;
    top: 8px;
    right: 16px;
}

.modal .time-picker .dropdown.is--visible .dropdown-content .dropdown-content-list {
    max-height: 200px;

    overflow-y: auto;
}

.time-option-selected {
    background-color: var(--color-neutral-2);
}

/* ================================================================ */
/*  $4.3 - Patterns - Layouts                                       */
/* ================================================================ */
/* $4.3.1 - Patterns - Layouts - Logins */
.layout-login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;

    height: 100%;

    position: relative;

    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
}

.layout-login > .columns {
    width: 100%;
}

.layout-login > .columns > .columns-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.layout-login > .columns > .columns-item > .layout-login-background {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.layout-login > .columns > .columns-item > .layout-login-background * {
    position: relative;
    z-index: 2;
}

.layout-login > .columns > .columns-item > img {
    width: 100%;
    height: 100%;

    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}

.layout-login-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    min-width: 435px;

    position: relative;
    z-index: 2;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.layout-login-simple .layout-login-background {
    width: 100%;
    height: 100%;

    background-color: var(--color-primary);

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.layout-login-simple .layout-login-background > img {
    display: block;

    width: 100%;
    height: 100%;

    -o-object-fit: cover;
       object-fit: cover;
}

.layout-login-simple .layout-login-form-content {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    width: 100%;
    height: 100%;

    position: relative;
    z-index: 2;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.layout-login-simple .layout-login-form {
    padding: var(--space-xxl);

    background-color: var(--color-neutral-0);

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);
    -webkit-box-shadow: var(--shadow-l);
    box-shadow: var(--shadow-l);
}

.phone .layout-login-simple .layout-login-form-content,
.phone .layout-login > .columns > .columns-item {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
}

.phone .layout-login-form {
    width: 100%;
    min-width: auto;
    margin: var(--space-xl) var(--space-none) var(--space-none);
    padding: var(--space-l);
}

.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: -webkit-flex;
    display: flex;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.breadcrumbs-item {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    color: var(--color-neutral-6);

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.breadcrumbs-item .icon {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    margin: var(--space-none) var(--space-s);

    color: var(--color-neutral-6);

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;
}

.breadcrumbs-item .icon .fa-fw {
    width: auto;

    font-size: var(--font-size-xs);
}

.breadcrumbs-item .title {
    color: var(--color-neutral-6);
}

.breadcrumbs-item .title a,
.breadcrumbs-item .title a:visited {
    color: var(--color-neutral-6);
    text-decoration: underline;
}

.breadcrumbs-item:hover .title a,
.breadcrumbs-item:hover .title a:visited {
    color: var(--color-primary);
}

/* $4.4.2 - Patterns - Navigation - NavigationBar */
.navigation-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    color: var(--color-neutral-8);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.navigation-bar a:visited {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    color: var(--color-neutral-8);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

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

.navigation-bar-item-title:hover {
    color: var(--color-neutral-9);
}

.navigation-bar-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.navigation-bar-item-title {
    margin: var(--space-s) var(--space-none);

    font-size: var(--font-size-base);
    color: var(--color-neutral-8);

    cursor: pointer;
}

.navigation-bar-item-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    padding-left: var(--space-base);

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.navigation-bar-item-content a {
    margin: var(--space-xs) var(--space-none);
}

.navigation-bar-item.is--open .navigation-bar-item-title a {
    font-weight: var(--font-semi-bold);
    color: var(--color-primary);
}

.navigation-bar-item.is--active .navigation-bar-item-title {
    font-weight: var(--font-semi-bold);
    color: var(--color-neutral-9);
}

.navigation-bar-item.is--active .navigation-bar-item-title a {
    font-weight: var(--font-semi-bold);
    color: var(--color-primary);
}

.navigation-bar-item-subitem:not(:last-child) {
    margin-bottom: var(--space-s);
}

.ListRecords .navigation-bar-item-title {
    margin: var(--space-xs) 0;
}

.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,
.ListRecords .navigation-bar-item-subitem.is--active {
    font-weight: var(--font-semi-bold);
    color: var(--color-primary);
}

.navigation-bar-item-subitem.is--active a,
.ListRecords .navigation-bar-item-subitem.is--active a {
    font-weight: var(--font-semi-bold);
    color: var(--color-primary);
}

.navigation-bar-item .navigation-bar-item-content {
    display: block;
    visibility: hidden;

    height: 0;

    overflow: hidden;
}

.navigation-bar-item .navigation-bar-item-content.is--collapsed {
    visibility: hidden;

    height: 0;
}

.navigation-bar-item .navigation-bar-item-content.is--expanded {
    visibility: visible;

    height: auto;
}

.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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    border-left: var(--border-size-m) solid var(--color-neutral-4);

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.section-index.is--sticky {
    position: -webkit-sticky;
    position:         sticky;
}

.section-index a {
    margin-bottom: var(--space-s);
    margin-left: -2px;
    padding-left: var(--space-base);

    color: var(--color-neutral-8);

    border-left: var(--border-size-m) solid transparent;
}

.section-index a:visited {
    margin-bottom: var(--space-s);
    padding-left: var(--space-base);

    color: var(--color-neutral-8);

    border-left: var(--border-size-m) solid transparent;
}

.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 {
    font-weight: var(--font-semi-bold);
    color: var(--color-neutral-9);

    border-left: var(--border-size-m) solid var(--color-primary);
}

.edge .section-index.is--sticky {
    position: fixed;
}

/* $4.4.4 - Patterns - Navigation - Sidebar */
.sidebar-container {
    width: 500px;
    height: 100vh;

    background: var(--color-neutral-0);

    -webkit-box-shadow: var(--shadow-l);

    box-shadow: var(--shadow-l);

    -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            transform: translateX(100%);

    position: fixed;
    top: 0;
    right: 0;
    z-index: 150;

    overflow-y: auto;
}

.sidebar-header,
.sidebar-content {
    padding: var(--space-base) var(--space-m);
}

.sidebar-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    line-height: var(--font-size-h2);
    font-size: var(--font-size-h3);

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;
}

.sidebar-header a,
.sidebar-header a:visited {
    font-size: var(--font-size-m);
    color: var(--color-neutral-3);
}

.sidebar-overlay {
    width: 100vw;
    height: 100vh;

    pointer-events: none;

    background-color: rgba(0, 0, 0, .5);

    cursor: pointer;
    opacity: 0;

    position: fixed;
    top: 0;
    right: 0;
    z-index: 103;
}

.sidebar.is--visible .sidebar-overlay {
    pointer-events: initial;
}

.phone .sidebar-container {
    width: 70vw;
}

/* $4.4.5 - Patterns - Navigation - Tabs */
.tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;
}

.tabs.tabs-vertical {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-flex-wrap: nowrap;

    -ms-flex-wrap: nowrap;

    flex-wrap: nowrap;
}

.tabs .tabs-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;

    position: relative;
}

.tabs .tabs-header .ListRecords {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.tabs.justified .tabs-header {
    width: 100%;
}

.tabs-header-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    margin-left: var(--space-l);
    padding: var(--space-s) var(--space-m);

    cursor: pointer;

    border-bottom: var(--border-size-m) solid transparent;

    -webkit-transition: border 150ms linear, background-color 500ms;

    -o-transition: border 150ms linear, background-color 500ms;

    transition: border 150ms linear, background-color 500ms;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.tabs-header-item:first-child {
    margin-left: var(--space-none);
}

.tabs-header-item:hover {
    color: var(--color-primary);

    border-bottom: var(--border-size-m) solid transparent;
}

.tabs-header-item:active {
    color: var(--color-primary);

    background-color: var(--color-neutral-3);

    border-bottom: var(--border-size-m) solid transparent;
}

.tabs-header-item.active {
    font-weight: var(--font-regular);
    color: var(--color-primary);

    border-bottom: var(--border-size-m) solid var(--color-primary);

    z-index: 1;
}

.tabs-header-item .fa-fw {
    width: auto;
    margin-right: var(--space-s);
}

.tabs-header-item.active .fa-fw {
    color: var(--color-primary);
}

.tabs-header-item .badge {
    margin-left: var(--space-s);
}

.tabs.justified .tabs-header-item {
    margin-left: var(--space-none);

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;
}

.tabs .tabs-content {
    width: 100%;
    margin-top: -2px;
    padding: var(--space-m) var(--space-none) var(--space-none);

    border-top: var(--border-size-m) solid var(--color-neutral-3);

    position: relative;

    -webkit-box-flex: 1;

    -webkit-flex-grow: 1;

    -ms-flex-positive: 1;

    flex-grow: 1;
}

.tabs .tabs-content-item:not(.active) {
    display: none;
}

.tabs.tabs-vertical .tabs-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    width: auto;
    height: 100%;

    word-break: initial;
}

.tabs.tabs-vertical.justified .tabs-header {
    height: auto;
}

.tabs.tabs-vertical .tabs-header-item {
    margin-left: var(--space-none);
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-none);

    border-right: var(--border-size-m) solid transparent;
    border-bottom: var(--border-size-none);

    -webkit-box-pack: start;

    -webkit-justify-content: flex-start;

    -ms-flex-pack: start;

    justify-content: flex-start;
}

.tabs.tabs-vertical .tabs-header-item.active {
    border-right: var(--border-size-m) solid var(--color-primary);
}

.tabs.tabs-vertical .tabs-content {
    margin-top: var(--space-none);
    margin-left: -2px;
    padding: var(--space-none) var(--space-m);

    border-top: var(--border-size-none);
    border-left: var(--border-size-m) solid var(--color-neutral-3);
}

.tabs.tabs-vertical.tabs-header-right .tabs-header {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}

.tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item {
    padding: var(--space-s) var(--space-none) var(--space-s) var(--space-m);

    border-right: var(--border-size-none);
    border-left: var(--border-size-m) solid transparent;
}

.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 {
    margin-right: -1px;
    margin-left: var(--space-none);

    border-right: var(--border-size-s) solid var(--color-neutral-5);
    border-left: var(--border-size-none);
}

.phone .tabs .tabs-header,
.tablet .tabs .tabs-header {
    overflow-x: auto;
}

.phone .tabs-header-item,
.tablet .tabs-header-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    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,
.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: -webkit-flex;
    display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;

    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
}

.timeline-item-left {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    margin-right: var(--space-base);
    padding: var(--space-s) var(--space-none) var(--space-none);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-align: center;
    -ms-flex-direction: column;
}

.timeline-item-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 24px;
    height: 24px;

    color: var(--color-neutral-0);

    -webkit-border-radius: var(--border-radius-circle);

    border-radius: var(--border-radius-circle);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.timeline-item-icon .fa-fw {
    width: auto;

    font-size: var(--font-size-xs);
}

.timeline-item-icon:empty {
    width: 8px;
    height: 8px;
}

.timeline-item-separator {
    width: 1px;
    margin: var(--space-s) var(--space-none) var(--space-none);

    background-color: var(--color-neutral-5);

    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
}

.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 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    width: 100%;

    position: relative;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.wizard-item.label-top .wizard-item-icon-wraper {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}

.wizard-item.label-top .wizard-item-label {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}

.wizard-item-icon {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 32px;
    height: 32px;
    margin: 0 auto;

    font-weight: var(--font-bold);
    color: var(--color-neutral-7);

    background-color: var(--color-neutral-0);

    border: var(--border-size-m) solid var(--color-neutral-5);
    -webkit-border-radius: var(--border-radius-circle);
    border-radius: var(--border-radius-circle);

    position: relative;
    z-index: 2;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.wizard-item-icon:empty {
    width: 8px;
    height: 8px;
}

.wizard-item.active .wizard-item-icon {
    color: var(--color-primary);

    background-color: var(--color-neutral-0);

    border-color: var(--color-primary);
}

.wizard-item.past .wizard-item-icon {
    color: var(--color-neutral-0);

    background-color: var(--color-primary);

    border-color: var(--color-primary);
}

.wizard-item-icon .fa-fw {
    width: auto;

    font-size: var(--font-size-xs);
}

.wizard-item-icon-wraper {
    width: 100%;
    margin: var(--space-s) var(--space-none);

    position: relative;
}

.wizard-item .wizard-item-icon-wraper:before {
    content: '';

    width: -webkit-calc(100% - 24px);

    width: calc(100% - 24px);
    height: 2px;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    position: absolute;
    top: 50%;
    right: -webkit-calc(50% + 12px);
    right: calc(50% + 12px);
    z-index: 0;
}

.wizard-item.past .wizard-item-icon-wraper:before,
.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.next .wizard-item-icon-wraper .wizard-item-icon {
    color: var(--color-neutral-5);
}

.wizard-item:first-child .wizard-item-icon-wraper:before {
    content: none;
}

.wizard-item-label {
    text-align: center;
    color: var(--color-neutral-7);
}

.wizard-item.past .wizard-item-label {
    color: var(--color-neutral-7);
}

.wizard-item.active .wizard-item-label {
    color: var(--color-neutral-7);
}

.wizard-item.next .wizard-item-label {
    color: var(--color-neutral-5);
}

.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;
    -webkit-flex-direction: row;
    -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 {
    width: auto;
    margin: var(--space-none) var(--space-s) var(--space-none) var(--space-none);
}

.wizard-vertical .wizard-item .wizard-item-icon-wraper:before {
    width: 2px;
    height: -webkit-calc(100% + 18px);
    height: calc(100% + 18px);

    -webkit-transform: translateY(0) translateX(-50%);

    -ms-transform: translateY(0) translateX(-50%);

    transform: translateY(0) translateX(-50%);

    top: auto;
    bottom: -webkit-calc(50% + 12px);
    bottom: calc(50% + 12px);
    left: 50%;
}

.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: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.wizard-vertical .ListRecords {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* ================================================================ */
/*  $4.5 - Patterns - Numbers                                       */
/* ================================================================ */
/* $4.5.1 - Patterns - Numbers - Badge */
.badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;

    min-width: 32px;
    height: 32px;

    line-height: 1;
    font-weight: var(--font-semi-bold);
    color: var(--color-neutral-0);

    background-color: var(--color-primary);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.badge-small {
    min-width: 24px;
    height: 24px;
    padding: var(--space-none) var(--space-xs);

    font-size: var(--font-size-xs);
}

.badge-medium {
    min-width: 40px;
    height: 40px;

    font-size: var(--font-size-base);
}

.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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    padding: var(--space-none) var(--space-m);

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-box-shadow: var(--shadow-none);
    box-shadow: var(--shadow-none);

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.counter .center-align {
    width: 100%;
}

.counter .center-align.flex-direction-column {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.counter .center-align.flex-direction-row {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.counter[class*='background-'] {
    color: var(--color-neutral-0);

    border: var(--border-size-none);
}

/* $4.5.3 - Patterns - Numbers - IconBadge */
.badge-icon {
    margin-right: var(--space-s);

    position: relative;
}

.badge-icon .badge {
    min-width: 18px;
    height: 18px;
    padding: var(--space-none) var(--space-xs);

    font-size: var(--font-size-xs);

    border: 1px solid var(--color-neutral-0);
    -webkit-border-radius: var(--border-radius-rounded);
    border-radius: var(--border-radius-rounded);

    -webkit-transform: translateY(-40%);
            -ms-transform: translateY(-40%);
            transform: translateY(-40%);

    position: absolute;
    top: 0;
    left: 35%;
}

.badge-icon .icon {
    font-size: var(--font-size-l);
    color: var(--color-text);
}

/* $4.5.4 - Patterns - Numbers - ProgressBar */
.progress-container,
.progress-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    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 {
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -ms-flex-align: center;
    -ms-flex-direction: row-reverse;
}

.progress-container.flex-direction-row .progress {
    margin-right: var(--space-s);
}

.progress-container .progress,
.progress-container .progress-title,
.progress-container .progress-value {
    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
}

.progress-container .progress-content {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    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 {
    height: 100%;

    background-color: var(--color-neutral-3);
}

.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 {
    position: relative;
}

.progress-circle-content {
    -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    position: absolute;
    top: 50%;
    left: 50%;
}

.progress-semi-circle-content {
    -webkit-transform: translate(-50%, 0%);
            -ms-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);

    position: absolute;
    bottom: 0;
    left: 50%;
}

.progress-circle-content,
.progress-semi-circle-content {
    text-align: center;
}

.progress-circle svg {
    stroke-linecap: round;
}

/* $4.5.6 - Patterns - Numbers - UserAvatar */
.user-avatar {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    width: 32px;
    height: 32px;

    font-weight: var(--font-semi-bold);
    color: var(--color-neutral-0);
    text-transform: uppercase;

    background-color: var(--color-primary);

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.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);

    -webkit-box-shadow: 0 2px 22px 0 rgba(0, 0, 0, .1);

    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, .1);
}

.user-avatar.background-primary-lightest {
    -webkit-box-shadow: 0 2px 22px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, .1);
}

.user-avatar.background-primary {
    background-color: var(--color-primary);

    border: var(--border-size-m) solid var(--color-primary);
}

.user-avatar.background-red {
    background-color: var(--color-red);

    border: var(--border-size-m) solid var(--color-red);
}

.user-avatar.background-pink {
    background-color: var(--color-pink);

    border: var(--border-size-m) solid var(--color-pink);
}

.user-avatar.background-grape {
    background-color: var(--color-grape);

    border: var(--border-size-m) solid var(--color-grape);
}

.user-avatar.background-violet {
    background-color: var(--color-violet);

    border: var(--border-size-m) solid var(--color-violet);
}

.user-avatar.background-indigo {
    background-color: var(--color-indigo);

    border: var(--border-size-m) solid var(--color-indigo);
}

.user-avatar.background-blue {
    background-color: var(--color-blue);

    border: var(--border-size-m) solid var(--color-blue);
}

.user-avatar.background-cyan {
    background-color: var(--color-cyan);

    border: var(--border-size-m) solid var(--color-cyan);
}

.user-avatar.background-teal {
    background-color: var(--color-teal);

    border: var(--border-size-m) solid var(--color-teal);
}

.user-avatar.background-green {
    background-color: var(--color-green);

    border: var(--border-size-m) solid var(--color-green);
}

.user-avatar.background-lime {
    background-color: var(--color-lime);

    border: var(--border-size-m) solid var(--color-lime);
}

.user-avatar.background-yellow {
    background-color: var(--color-yellow);

    border: var(--border-size-m) solid var(--color-yellow);
}

.user-avatar.background-orange {
    background-color: var(--color-orange);

    border: var(--border-size-m) solid var(--color-orange);
}

/* ================================================================ */
/*  $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,
.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: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child,
.phone .expandable-row .TableRecords tbody tr td:first-child {
    display: block;

    padding-right: var(--space-xxl);
    padding-bottom: var(--space-base);

    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;

    border-bottom: var(--border-size-s) solid var(--color-neutral-4);

    -webkit-transition: none;
            -o-transition: none;
            transition: none;

    position: relative;

    overflow: hidden;
}

.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 {
    content: '\f107';

    width: 16px;

    font: normal normal normal 24px/1 FontAwesome;
    color: var(--color-primary);

    -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transition: transform 180ms linear;
            -webkit-transition: -webkit-transform 180ms linear;
            transition: -webkit-transform 180ms linear;
            -o-transition: transform 180ms linear;
            transition: transform 180ms linear;
            transition: transform 180ms linear, -webkit-transform 180ms linear;

    position: absolute;
    top: 50%;
    right: 20px;
}

.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);
            -ms-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 .TableRecords_ExpandedRow td:first-child,
.phone .expandable-row .TableRecords tbody .TableRecords_ExpandedRow td:first-child {
    font-weight: var(--font-semi-bold);

    border-bottom: var(--border-size-s) solid transparent;
}

/* Scrollable Row */
.tablet.portrait .scrollable-row .TableRecords_Label,
.phone .scrollable-row .TableRecords_Label {
    display: none;
}

.tablet.portrait .scrollable-row .TableRecords thead,
.phone .scrollable-row .TableRecords thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.tablet.portrait .scrollable-row .TableRecords thead tr,
.phone .scrollable-row .TableRecords thead tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.tablet.portrait .scrollable-row .TableRecords thead th,
.phone .scrollable-row .TableRecords thead th {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 100% !important;
    height: auto;
    padding: var(--space-base) var(--space-m);

    pointer-events: none;

    border-right: var(--border-size-s) solid var(--color-neutral-4);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    -ms-flex-align: center;
}

.tablet.portrait .scrollable-row .TableRecords thead th:last-child,
.phone .scrollable-row .TableRecords thead th:last-child {
    border-bottom: var(--border-size-s) solid transparent;
    -webkit-border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
}

.tablet.portrait .scrollable-row .TableRecords tbody,
.phone .scrollable-row .TableRecords tbody {
        -webkit-flex-direction: row;
        flex-direction: row;

    position: relative;

    overflow-x: auto;

    -webkit-box-direction: normal;
    -webkit-box-flex: 1;
    -webkit-box-orient: horizontal;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    -ms-flex-direction: row;
    -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

.tablet.portrait .scrollable-row .TableRecords tbody tr,
.phone .scrollable-row .TableRecords tbody tr {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
        -webkit-flex: 1 0 auto;
        flex: 1 0 auto;
}

.tablet.portrait .scrollable-row .TableRecords tbody tr td,
.phone .scrollable-row .TableRecords tbody tr td {
    padding: var(--space-base) var(--space-m);

    border-right: var(--border-size-s) solid var(--color-neutral-4);
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);

    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
}

.tablet.portrait .scrollable-row .TableRecords tbody tr:last-child td,
.phone .scrollable-row .TableRecords tbody tr:last-child td {
    border-right: var(--border-size-s) solid transparent;
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
}

.tablet.portrait .scrollable-row .TableRecords tbody tr td:not(:last-child),
.phone .scrollable-row .TableRecords tbody tr td:not(:last-child) {
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
}

.tablet.portrait .scrollable-row .TableRecords tbody tr td:last-child,
.phone .scrollable-row .TableRecords tbody tr td:last-child {
    border-bottom: var(--border-size-s) solid transparent;
}

.tablet.portrait .scrollable-row .TableRecords_Label,
.phone .scrollable-row .TableRecords_Label {
    display: none;
}

/* ================================================================ */
/*  $4.7 - Patterns - Structure                                     */
/* ================================================================ */
/* $4.7.1 - Patterns - Structure - AlignCenter */
.center-align {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 100%;
    height: 100%;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.center-align.flex-direction-column {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* $4.7.2 - Patterns - Structure - Columns */
.columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
}

.columns.gutter-none {
    margin-right: var(--space-none);
    margin-left: var(--space-none);
}

.columns.gutter-xs {
    margin-right: -webkit-calc(-1 * var(--space-xs) / 2);
    margin-right: calc(-1 * var(--space-xs) / 2);
    margin-left: -webkit-calc(-1 * var(--space-xs) / 2);
    margin-left: calc(-1 * var(--space-xs) / 2);
}

.columns.gutter-s {
    margin-right: -webkit-calc(-1 * var(--space-s) / 2);
    margin-right: calc(-1 * var(--space-s) / 2);
    margin-left: -webkit-calc(-1 * var(--space-s) / 2);
    margin-left: calc(-1 * var(--space-s) / 2);
}

.columns.gutter-base {
    margin-right: -webkit-calc(-1 * var(--space-base) / 2);
    margin-right: calc(-1 * var(--space-base) / 2);
    margin-left: -webkit-calc(-1 * var(--space-base) / 2);
    margin-left: calc(-1 * var(--space-base) / 2);
}

.columns.gutter-m {
    margin-right: -webkit-calc(-1 * var(--space-m) / 2);
    margin-right: calc(-1 * var(--space-m) / 2);
    margin-left: -webkit-calc(-1 * var(--space-m) / 2);
    margin-left: calc(-1 * var(--space-m) / 2);
}

.columns.gutter-l {
    margin-right: -webkit-calc(-1 * var(--space-l) / 2);
    margin-right: calc(-1 * var(--space-l) / 2);
    margin-left: -webkit-calc(-1 * var(--space-l) / 2);
    margin-left: calc(-1 * var(--space-l) / 2);
}

.columns.gutter-xl {
    margin-right: -webkit-calc(-1 * var(--space-xl) / 2);
    margin-right: calc(-1 * var(--space-xl) / 2);
    margin-left: -webkit-calc(-1 * var(--space-xl) / 2);
    margin-left: calc(-1 * var(--space-xl) / 2);
}

.columns.gutter-xxl {
    margin-right: -webkit-calc(-1 * var(--space-xxl) / 2);
    margin-right: calc(-1 * var(--space-xxl) / 2);
    margin-left: -webkit-calc(-1 * var(--space-xxl) / 2);
    margin-left: calc(-1 * var(--space-xxl) / 2);
}

.columns > .columns-item {
    word-break: break-word;

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;
    -webkit-flex-basis: 130px;
    -ms-flex-preferred-size: 130px;
    flex-basis: 130px;
}

.columns.columns-small-left > .columns-item:last-child,
.columns.columns-small-right > .columns-item:first-child {
    -webkit-box-flex: 4;
    -ms-flex: 4;
        -webkit-flex: 4;
        flex: 4;
}

.columns.columns-medium-left > .columns-item:last-child,
.columns.columns-medium-right > .columns-item:first-child {
    -webkit-box-flex: 2;
    -ms-flex: 2;
        -webkit-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) -webkit-calc(var(--space-xs) / 2);
    padding: var(--space-none) calc(var(--space-xs) / 2);
}

.columns.gutter-s > .columns-item {
    margin-bottom: var(--space-s);
    padding: var(--space-none) -webkit-calc(var(--space-s) / 2);
    padding: var(--space-none) calc(var(--space-s) / 2);
}

.columns.gutter-base > .columns-item {
    margin-bottom: var(--space-base);
    padding: var(--space-none) -webkit-calc(var(--space-base) / 2);
    padding: var(--space-none) calc(var(--space-base) / 2);
}

.columns.gutter-m > .columns-item {
    margin-bottom: var(--space-m);
    padding: var(--space-none) -webkit-calc(var(--space-m) / 2);
    padding: var(--space-none) calc(var(--space-m) / 2);
}

.columns.gutter-l > .columns-item {
    margin-bottom: var(--space-l);
    padding: var(--space-none) -webkit-calc(var(--space-l) / 2);
    padding: var(--space-none) calc(var(--space-l) / 2);
}

.columns.gutter-xl > .columns-item {
    margin-bottom: var(--space-xl);
    padding: var(--space-none) -webkit-calc(var(--space-xl) / 2);
    padding: var(--space-none) calc(var(--space-xl) / 2);
}

.columns.gutter-xxl > .columns-item {
    margin-bottom: var(--space-xxl);
    padding: var(--space-none) -webkit-calc(var(--space-xxl) / 2);
    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,
.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 {
    width: 100%;

    -webkit-box-flex: 0;
    -ms-flex: none;
        -webkit-flex: none;
        flex: none;
}

.tablet .columns.columns4.tablet-break-middle > .columns-item,
.phone .columns.columns4.phone-break-middle > .columns-item {
    width: 50%;

    -webkit-box-flex: 0;
    -ms-flex: none;
        -webkit-flex: none;
        flex: none;
}

.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) {
    width: 33.333%;

    -webkit-box-flex: 0;
    -ms-flex: none;
        -webkit-flex: none;
        flex: none;
}

.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) {
    width: 33.333%;

    -webkit-box-flex: 0;
    -ms-flex: none;
        -webkit-flex: none;
        flex: none;
}

.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) {
    width: 33.333%;

    -webkit-box-flex: 0;
    -ms-flex: none;
        -webkit-flex: none;
        flex: none;
}

.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) {
    width: 33.333%;

    -webkit-box-flex: 0;
    -ms-flex: none;
        -webkit-flex: none;
        flex: none;
}

.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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
}

.gallery-content.ListRecords {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
}

.gallery-content.is--hidden {
    opacity: 0;
}

.gallery-content.is--visible {
    opacity: 1;
}

.gallery-content.is--hidden .gallery-item {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

/* ================================================================ */
/*  $4.8 - Patterns - Utilities                                     */
/* ================================================================ */
/* $4.8.1 - Patterns - Utilities - Animate */
.animate {
    -webkit-transition-timing-function: ease-out;
            -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-animation-duration: 530ms;
            animation-duration: 530ms;

    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    will-change: transform;
}

.is--visible .enter-fade {
    -webkit-animation-name: enter-fade;
            animation-name: enter-fade;
}

.is--visible .enter-top {
    -webkit-animation-name: enter-top;
            animation-name: enter-top;
}

.is--visible .enter-right {
    -webkit-animation-name: enter-right;
            animation-name: enter-right;
}

.is--visible .enter-bottom {
    -webkit-animation-name: enter-bottom;
            animation-name: enter-bottom;
}

.is--visible .enter-left {
    -webkit-animation-name: enter-left;
            animation-name: enter-left;
}

.is--visible .enter-scale {
    -webkit-animation-name: enter-scale;
            animation-name: enter-scale;
}

@-webkit-keyframes enter-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes enter-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes enter-top {
    from {
        -webkit-transform: translateX(0) translateY(-100%) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
}

@keyframes enter-top {
    from {
        -webkit-transform: translateX(0) translateY(-100%) translateZ(0);
        transform: translateX(0) translateY(-100%) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
        transform: translateX(0) translateY(0) translateZ(0);
    }
}

@-webkit-keyframes enter-right {
    from {
        -webkit-transform: translateX(100%) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
}

@keyframes enter-right {
    from {
        -webkit-transform: translateX(100%) translateY(0) translateZ(0);
        transform: translateX(100%) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
        transform: translateX(0) translateY(0) translateZ(0);
    }
}

@-webkit-keyframes enter-bottom {
    from {
        -webkit-transform: translateX(0) translateY(100%) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
}

@keyframes enter-bottom {
    from {
        -webkit-transform: translateX(0) translateY(100%) translateZ(0);
        transform: translateX(0) translateY(100%) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
        transform: translateX(0) translateY(0) translateZ(0);
    }
}

@-webkit-keyframes enter-left {
    from {
        -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
}

@keyframes enter-left {
    from {
        -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
        transform: translateX(-100%) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
        transform: translateX(0) translateY(0) translateZ(0);
    }
}

@-webkit-keyframes enter-scale {
    from {
        -webkit-transform: scale(.8) translateZ(0);
    }
    to {
        -webkit-transform: scale(1) translateZ(0);
    }
}

@keyframes enter-scale {
    from {
        -webkit-transform: scale(.8) translateZ(0);
        transform: scale(.8) translateZ(0);
    }
    to {
        -webkit-transform: scale(1) translateZ(0);
        transform: scale(1) translateZ(0);
    }
}

.is--hidden .leave-fade {
    -webkit-animation-name: leave-fade;
            animation-name: leave-fade;
}

.is--hidden .leave-top {
    -webkit-animation-name: leave-top;
            animation-name: leave-top;
}

.is--hidden .leave-right {
    -webkit-animation-name: leave-right;
            animation-name: leave-right;
}

.is--hidden .leave-bottom {
    -webkit-animation-name: leave-bottom;
            animation-name: leave-bottom;
}

.is--hidden .leave-left {
    -webkit-animation-name: leave-left;
            animation-name: leave-left;
}

.is--hidden .leave-scale {
    -webkit-animation-name: leave-scale;
            animation-name: leave-scale;
}

@-webkit-keyframes leave-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes leave-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@-webkit-keyframes leave-top {
    from {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(-100%) translateZ(0);
    }
}

@keyframes leave-top {
    from {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
        transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(-100%) translateZ(0);
        transform: translateX(0) translateY(-100%) translateZ(0);
    }
}

@-webkit-keyframes leave-right {
    from {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(100%) translateY(0) translateZ(0);
    }
}

@keyframes leave-right {
    from {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
        transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(100%) translateY(0) translateZ(0);
        transform: translateX(100%) translateY(0) translateZ(0);
    }
}

@-webkit-keyframes leave-bottom {
    from {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(100%) translateZ(0);
    }
}

@keyframes leave-bottom {
    from {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
        transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(0) translateY(100%) translateZ(0);
        transform: translateX(0) translateY(100%) translateZ(0);
    }
}

@-webkit-keyframes leave-left {
    from {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
    }
}

@keyframes leave-left {
    from {
        -webkit-transform: translateX(0) translateY(0) translateZ(0);
        transform: translateX(0) translateY(0) translateZ(0);
    }
    to {
        -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
        transform: translateX(-100%) translateY(0) translateZ(0);
    }
}

@-webkit-keyframes leave-scale {
    from {
        -webkit-transform: scale(1) translateZ(0);
    }
    to {
        -webkit-transform: scale(.8) translateZ(0);
    }
}

@keyframes leave-scale {
    from {
        -webkit-transform: scale(1) translateZ(0);
        transform: scale(1) translateZ(0);
    }
    to {
        -webkit-transform: scale(.8) translateZ(0);
        transform: scale(.8) translateZ(0);
    }
}

/* $4.8.2 - Patterns - Utilities - CharacterCount */
/* $4.8.3 - Patterns - Utilities - Fieldset */
/* $4.8.4 - Patterns - Utilities - FlipContent */
/* $4.8.5 - Patterns - Utilities - Iframe */
/* $4.8.6 - Patterns - Utilities - Separator */
.separator-vertical {
    display: inline-block;

    width: 1px;
    min-width: 1px;
    height: 100%;
    min-height: 20px;
}

.separator-horizontal {
    width: 100%;
    height: 1px;
}

/* $4.8.7 - Patterns - Utilities - StackedIcon */
/* Full Calendar */
/*!
 * FullCalendar v3.10.0
 * Docs & License: https://fullcalendar.io/
 * (c) 2018 Adam Shaw
 */
.fc button,
.fc table,
body .fc {
    font-size: 1em;
}

.fc .fc-axis,
.fc button,
.fc-day-grid-event .fc-content,
.fc-list-item-marker,
.fc-list-item-time,
.fc-time-grid-event .fc-time,
.fc-time-grid-event.fc-short .fc-content {
    white-space: nowrap;
}

.fc-event,
.fc-event:hover,
.fc-state-hover,
.fc.fc-bootstrap3 a,
.ui-widget .fc-event,
a.fc-more {
    text-decoration: none;
}

.fc {
    text-align: left;

    direction: ltr;
}

.fc-rtl {
    text-align: right;
}

.fc-month-view .fc-widget-content {
    background-color: #fff;
}

.fc-agendaWeek-view.fc-agenda-view .fc-day-grid.fc-unselectable .fc-week td.fc-day {
    border-color: transparent;
}

.fc th,
.fc-basic-view .fc-day-top .fc-week-number,
.fc-basic-view td.fc-week-number,
.fc-icon,
.fc-toolbar {
    text-align: center;
}

.fc-highlight {
    background: #bce8f1;

    opacity: .3;
}

.fc-bgevent {
    background: #8fdf82;

    opacity: .3;
}

.fc-nonbusiness {
    background: #d7d7d7;
}

.fc button,
.fc-state-default {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    min-width: 130px;
    height: 40px;
    margin: var(--space-none);
    padding: var(--space-none) var(--space-base);

    line-height: 18px;
    font-weight: var(--font-regular);
    color: var(--color-neutral-8);

    background-color: var(--color-neutral-0);

    cursor: pointer;

    border: var(--border-size-s) solid var(--color-neutral-5);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.fc button.fc-state-active,
.fc button.fc-state-down,
.fc-state-default.fc-state-active,
.fc-state-default.fc-state-down {
    color: var(--color-neutral-0);

    background-color: var(--color-primary);

    border: var(--border-size-s) solid var(--color-primary);
}

.fc button.fc-prev-button.fc-button.fc-state-default,
.fc button.fc-next-button.fc-button.fc-state-default,
.fc-state-default.fc-prev-button.fc-button.fc-state-default,
.fc-state-default.fc-next-button.fc-button.fc-state-default {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 42px;
    height: 42px;
    padding: 0;

    background-color: #fff;

    border: 1px solid #dfe3ee;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 12px 0 #dfe3ee;
    box-shadow: 0 2px 12px 0 #dfe3ee;
}

.fc button.fc-prev-button.fc-button.fc-state-default .fc-icon,
.fc button.fc-next-button.fc-button.fc-state-default .fc-icon,
.fc-state-default.fc-prev-button.fc-button.fc-state-default .fc-icon,
.fc-state-default.fc-next-button.fc-button.fc-state-default .fc-icon {
    height: auto;

    line-height: 42px;
    color: var(--color-primary);
}

.fc button::-moz-focus-inner {
    margin: 0;
    padding: 0;
}

.fc-state-default.fc-corner-left {
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.fc-state-default.fc-corner-right {
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.fc button .fc-icon {
    margin: 0 .2em;

    vertical-align: middle;

    position: relative;
    top: -.05em;
}

.fc-state-active,
.fc-state-disabled,
.fc-state-down,
.fc-state-hover {
    color: #333;

    background-color: #e6e6e6;
}

.fc-state-hover {
    color: var(--color-primary);
}

.fc-state-active,
.fc-state-down {
    color: var(--color-neutral-0);

    background-color: var(--color-primary);

    border: var(--border-size-s) solid var(--color-primary);
}

.fc-state-disabled {
    background-image: none;

    cursor: default;
    opacity: .65;

    -webkit-box-shadow: none;

    box-shadow: none;
}

.fc-event.fc-draggable,
.fc-event[href],
.fc-popover .fc-header .fc-close,
a[data-goto] {
    cursor: pointer;
}

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

.fc-button-group .fc-button {
    width: 100%;

    color: var(--color-neutral-7);
    white-space: nowrap;

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-none);
    border-radius: var(--border-radius-none);
}

.fc-button-group .fc-button:hover {
    color: var(--color-primary);
}

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

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

.fc .fc-button-group > * {
    float: left;

    margin: 0 0 0 -1px;
}

.fc .fc-button-group > :first-child {
    margin-left: 0;
}

.fc-popover {
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);

    position: absolute;
}

.fc-popover .fc-header {
    padding: 2px 4px;
}

.fc-popover .fc-header .fc-title {
    margin: 0 2px;
}

.fc-ltr .fc-popover .fc-header .fc-title,
.fc-rtl .fc-popover .fc-header .fc-close {
    float: left;
}

.fc-ltr .fc-popover .fc-header .fc-close,
.fc-rtl .fc-popover .fc-header .fc-title {
    float: right;
}

.fc-divider {
    border-width: 1px;
    border-style: solid;
}

hr.fc-divider {
    height: 0;
    margin: 0;
    padding: 0 0 2px;

    border-width: 1px 0;
}

.fc-bg table,
.fc-row .fc-bgevent-skeleton table,
.fc-row .fc-highlight-skeleton table {
    height: 100%;
}

.fc-clear {
    clear: both;
}

.fc-bg,
.fc-bgevent-skeleton,
.fc-helper-skeleton,
.fc-highlight-skeleton {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.fc-bg {
    bottom: 0;
}

.fc .fc-head-container.fc-widget-header {
    border-width: 0;
}

.fc .fc-head-container.fc-widget-header .fc-row.fc-widget-header {
    border-color: transparent;
}

.fc .fc-head-container.fc-widget-header .fc-axis.fc-widget-header {
    padding: 0 5px;

    border-color: transparent;
}

.fc .fc-head-container.fc-widget-header .fc-day-header {
    padding-bottom: var(--space-s);

    border-color: transparent;
}

.fc .fc-head-container.fc-widget-header .fc-day-header.fc-widget-header {
    line-height: 17px;
    font-size: 14px;
    font-weight: 500;
    color: #adadad;
}

.fc .fc-head-container.fc-widget-header .fc-day-header.fc-today {
    color: var(--color-primary);
}

.fc table {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;

    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}

.fc td,
.fc th {
    padding: 0;

    vertical-align: top;

    border-width: 1px;
    border-style: solid;
}

.fc td.fc-today {
    border-style: double;
}

a[data-goto]:hover {
    text-decoration: underline;
}

.fc .fc-row {
    border-width: 0;
    border-style: solid;
}

.fc-row table {
    border-right: 0 hidden transparent;
    border-bottom: 0 hidden transparent;
    border-left: 0 hidden transparent;
}

.fc-row:first-child table {
    border-top: 0 hidden transparent;
}

.fc-row {
    position: relative;
}

.fc-row .fc-bg {
    z-index: 1;
}

.fc-row .fc-bgevent-skeleton,
.fc-row .fc-highlight-skeleton {
    bottom: 0;
}

.fc-row .fc-bgevent-skeleton td,
.fc-row .fc-highlight-skeleton td {
    border-color: transparent;
}

.fc-row .fc-bgevent-skeleton {
    z-index: 2;
}

.fc-row .fc-highlight-skeleton {
    z-index: 3;
}

.fc-row .fc-content-skeleton {
    padding-bottom: 2px;

    position: relative;
    z-index: 4;
}

.fc-row .fc-helper-skeleton {
    z-index: 5;
}

.fc .fc-row .fc-content-skeleton table,
.fc .fc-row .fc-content-skeleton td,
.fc .fc-row .fc-helper-skeleton td {
    background: 0 0;

    border-color: transparent;
}

.fc-row .fc-content-skeleton td,
.fc-row .fc-helper-skeleton td {
    border-bottom: 0;
}

.fc-row .fc-content-skeleton tbody td,
.fc-row .fc-helper-skeleton tbody td {
    border-top: 0;
}

.fc-scroller {
    -webkit-overflow-scrolling: touch;
}

.fc-day-grid-event .fc-content,
.fc-icon,
.fc-row.fc-rigid,
.fc-time-grid-event {
    overflow: hidden;
}

.fc-scroller > .fc-day-grid,
.fc-scroller > .fc-time-grid {
    width: 100%;

    position: relative;
}

.fc-event {
    display: block;

    line-height: 1.3;
    font-size: .85em;

    border: 1px solid #3a87ad;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    position: relative;
}

.fc-event,
.fc-event-dot {
    background-color: #3a87ad;
}

.fc-event,
.fc-event:hover {
    color: #fff;
}

.fc-not-allowed,
.fc-not-allowed .fc-event {
    cursor: not-allowed;
}

.fc-event .fc-bg {
    background: #fff;

    opacity: .25;

    z-index: 1;
}

.fc-event .fc-content {
    position: relative;
    z-index: 2;
}

.fc-event .fc-resizer {
    display: none;

    position: absolute;
    z-index: 4;
}

.fc-event.fc-allow-mouse-resize .fc-resizer,
.fc-event.fc-selected .fc-resizer {
    display: block;
}

.fc-event.fc-selected .fc-resizer:before {
    content: '';

    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;

    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9999;
}

.fc-event.fc-selected {
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);

    z-index: 9999 !important;
}

.fc-event.fc-selected.fc-dragging {
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
}

.fc-h-event.fc-selected:before {
    content: '';

    position: absolute;
    top: -10px;
    right: 0;
    bottom: -10px;
    left: 0;
    z-index: 3;
}

.fc-ltr .fc-h-event.fc-not-start,
.fc-rtl .fc-h-event.fc-not-end {
    margin-left: 0;
    padding-left: 1px;

    border-left-width: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
}

.fc-ltr .fc-h-event.fc-not-end,
.fc-rtl .fc-h-event.fc-not-start {
    margin-right: 0;
    padding-right: 1px;

    border-right-width: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}

.fc-ltr .fc-h-event .fc-start-resizer,
.fc-rtl .fc-h-event .fc-end-resizer {
    cursor: w-resize;

    left: -1px;
}

.fc-ltr .fc-h-event .fc-end-resizer,
.fc-rtl .fc-h-event .fc-start-resizer {
    cursor: e-resize;

    right: -1px;
}

.fc-h-event.fc-allow-mouse-resize .fc-resizer {
    width: 7px;

    top: -1px;
    bottom: -1px;
}

.fc-h-event.fc-selected .fc-resizer {
    width: 6px;
    height: 6px;
    margin-top: -4px;

    background: #fff;

    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    top: 50%;
}

.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
.fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
    margin-left: -4px;
}

.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
.fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
    margin-right: -4px;
}

.fc-day-grid-event {
    margin: 1px 2px 0;
    padding: 0 1px;
}

tr:first-child > td > .fc-day-grid-event {
    margin-top: 2px;
}

.fc-day-grid-event.fc-selected:after {
    content: '';

    background: #000;

    opacity: .25;

    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: 1;
}

.fc-day-grid-event .fc-time {
    font-weight: 700;
}

.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
    margin-left: -2px;
}

.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
    margin-right: -2px;
}

a.fc-more {
    margin: 1px 3px;

    font-size: .85em;

    cursor: pointer;
}

a.fc-more:hover {
    text-decoration: underline;
}

.fc-limited {
    display: none;
}

.fc-day-grid .fc-row {
    z-index: 1;
}

.fc-more-popover {
    width: 220px;

    z-index: 2;
}

.fc-more-popover .fc-event-container {
    padding: 10px;
}

.fc-bootstrap3 .fc-popover .panel-body,
.fc-bootstrap4 .fc-popover .card-body {
    padding: 0;
}

.fc-now-indicator {
    border: 0 solid var(--color-primary);

    position: absolute;
}

.fc-bootstrap3 .fc-today.alert,
.fc-bootstrap4 .fc-today.alert {
    -webkit-border-radius: 0;
    border-radius: 0;
}

.fc-unselectable {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

     -khtml-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.fc-unthemed .fc-content,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
    border-color: #d3d8e9;
}

.fc-bg td.fc-axis.fc-widget-content,
.fc-day-grid.fc-unselectable .fc-row.fc-week.fc-widget-content {
    border-color: transparent;
}

.fc-unthemed .fc-divider {
    background-color: transparent;

    border: none;
}

.fc-unthemed .fc-popover {
    background-color: #fff;

    border-width: 1px;
    border-style: solid;
}

.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-popover .fc-header {
    background: #eee;
}

.fc-unthemed td.fc-today {
    background: #eff1f6;
}

.fc-unthemed .fc-disabled-day {
    background: #d7d7d7;

    opacity: .3;
}

.fc-scroller.fc-time-grid-container {
    border: 1px solid #d3d8e9;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.fc-view.fc-agendaWeek-view.fc-agenda-view .fc-body td.fc-widget-content:first-of-type,
.fc-view.fc-agendaDay-view.fc-agenda-view .fc-body td.fc-widget-content:first-of-type {
    border-color: transparent;
}

.fc-view.fc-agendaWeek-view.fc-agenda-view .fc-body td.fc-widget-content:first-of-type.fc-time,
.fc-view.fc-agendaDay-view.fc-agenda-view .fc-body td.fc-widget-content:first-of-type.fc-time {
    border-right-color: #d3d8e9;
}

.fc-view.fc-agendaWeek-view.fc-agenda-view .fc-view.fc-agendaWeek-view.fc-agenda-view td.fc-today,
.fc-view.fc-agendaWeek-view.fc-agenda-view .fc-view.fc-agendaDay-view.fc-agenda-view td.fc-today,
.fc-view.fc-agendaDay-view.fc-agenda-view .fc-view.fc-agendaWeek-view.fc-agenda-view td.fc-today,
.fc-view.fc-agendaDay-view.fc-agenda-view .fc-view.fc-agendaDay-view.fc-agenda-view td.fc-today {
    border-color: transparent;
}

.fc-icon {
    display: inline-block;

    height: 1em;

    line-height: 1em;
    font-family: 'Courier New',Courier,monospace;
    font-size: 1em;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

     -khtml-user-select: none;
    -webkit-touch-callout: none;
}

.fc-icon:after {
    position: relative;
}

.fc-icon-left-single-arrow:after {
    content: '\2039';

    font-size: 200%;
    font-weight: 700;

    top: -7%;
}

.fc-icon-right-single-arrow:after {
    content: '\203A';

    font-size: 200%;
    font-weight: 700;

    top: -7%;
}

.fc-icon-left-double-arrow:after {
    content: '\AB';

    font-size: 160%;

    top: -7%;
}

.fc-icon-right-double-arrow:after {
    content: '\BB';

    font-size: 160%;

    top: -7%;
}

.fc-icon-left-triangle:after {
    content: '\25C4';

    font-size: 125%;

    top: 3%;
}

.fc-icon-right-triangle:after {
    content: '\25BA';

    font-size: 125%;

    top: 3%;
}

.fc-icon-down-triangle:after {
    content: '\25BC';

    font-size: 125%;

    top: 2%;
}

.fc-icon-x:after {
    content: '\D7';

    font-size: 200%;

    top: 6%;
}

.fc-unthemed .fc-popover .fc-header .fc-close {
    margin-top: 2px;

    font-size: .9em;
    color: #666;
}

.fc-unthemed .fc-list-item:hover td {
    background-color: #f5f5f5;
}

.ui-widget .fc-disabled-day {
    background-image: none;
}

.fc-bootstrap3 .fc-time-grid .fc-slats table,
.fc-bootstrap4 .fc-time-grid .fc-slats table,
.fc-time-grid .fc-slats .ui-widget-content {
    background: 0 0;
}

.fc-popover > .ui-widget-header + .ui-widget-content {
    border-top: 0;
}

.fc-bootstrap3 hr.fc-divider,
.fc-bootstrap4 hr.fc-divider {
    border-color: inherit;
}

.ui-widget .fc-event {
    font-weight: 400;
    color: #fff;
}

.ui-widget td.fc-axis {
    font-weight: 400;
}

.fc.fc-bootstrap3 a[data-goto]:hover {
    text-decoration: underline;
}

.fc.fc-bootstrap4 a {
    text-decoration: none;
}

.fc.fc-bootstrap4 a[data-goto]:hover {
    text-decoration: underline;
}

.fc-bootstrap4 a.fc-event:not([href]):not([tabindex]) {
    color: #fff;
}

.fc-bootstrap4 .fc-popover.card {
    position: absolute;
}

.fc-toolbar.fc-header-toolbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: var(--space-m);

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;
}

.fc-toolbar.fc-footer-toolbar {
    margin-top: 1em;
}

.fc-toolbar .fc-left {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.fc-toolbar .fc-right {
    text-align: right;

    -webkit-align-self: flex-end;

    -ms-flex-item-align: end;

    align-self: flex-end;
    -webkit-flex-basis: 50px;
    -ms-flex-preferred-size: 50px;
    flex-basis: 50px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.fc-toolbar .fc-right > div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.fc-toolbar .fc-right h2 {
    line-height: 20px;
    font-size: 18px;
}

.fc-toolbar .fc-center {
    display: inline-block;
}

.fc .fc-toolbar > * > * {
    float: left;

    margin-left: .75em;
}

.fc .fc-toolbar > * > :first-child {
    margin-left: 0;
}

.fc-toolbar h2 {
    margin: 0;
}

.fc-toolbar button {
    position: relative;
}

.fc-toolbar .fc-state-hover,
.fc-toolbar .ui-state-hover {
    z-index: 2;
}

.fc-toolbar .fc-state-down {
    z-index: 3;
}

.fc-toolbar .fc-state-active,
.fc-toolbar .ui-state-active {
    z-index: 4;
}

.fc-toolbar button:focus {
    z-index: 5;
}

.fc-view-container *,
.fc-view-container :after,
.fc-view-container :before {
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
}

.fc-view,
.fc-view > table {
    position: relative;
    z-index: 1;
}

.fc-basicDay-view .fc-content-skeleton,
.fc-basicWeek-view .fc-content-skeleton {
    padding-bottom: 1em;
}

.fc-basic-view .fc-body .fc-row {
    min-height: 4em;
}

.fc-row.fc-rigid .fc-content-skeleton {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.fc-day-top.fc-other-month {
    opacity: .3;
}

.fc-basic-view .fc-day-number,
.fc-basic-view .fc-week-number {
    padding: 2px;
}

.fc-basic-view th.fc-day-number,
.fc-basic-view th.fc-week-number {
    padding: 0 2px;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number,
.fc-rtl .fc-basic-view .fc-day-top .fc-day-number {
    display: block;

    line-height: 15px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #777776;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number:hover,
.fc-rtl .fc-basic-view .fc-day-top .fc-day-number:hover {
    background-color: #dfe3ee;

    cursor: pointer;

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);
}

.fc-ltr .fc-basic-view .fc-day-top .fc-week-number {
    float: left;

    -webkit-border-radius: 0 0 3px;

    border-radius: 0 0 3px;
}

.fc-rtl .fc-basic-view .fc-day-top .fc-week-number {
    float: right;

    -webkit-border-radius: 0 0 0 3px;

    border-radius: 0 0 0 3px;
}

.fc-basic-view .fc-day-top .fc-week-number {
    min-width: 1.5em;

    color: grey;

    background-color: #f2f2f2;
}

.fc-basic-view td.fc-week-number > * {
    display: inline-block;

    min-width: 1.25em;
}

.fc-agenda-view .fc-day-grid {
    position: relative;
    z-index: 2;
}

.fc-agenda-view .fc-day-grid .fc-row {
    min-height: 3em;
}

.fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton {
    padding-bottom: 1em;
}

.fc .fc-axis {
    padding: 0 4px;

    vertical-align: middle;
}

.fc-ltr .fc-axis {
    text-align: right;
}

.fc-rtl .fc-axis {
    text-align: left;
}

.fc-time-grid,
.fc-time-grid-container {
    background-color: var(--color-neutral-0);

    position: relative;
    z-index: 1;
}

.fc-time-grid {
    min-height: 100%;
}

.fc-time-grid table {
    border: 0 hidden transparent;
}

.fc-time-grid > .fc-bg {
    z-index: 1;
}

.fc-time-grid .fc-slats,
.fc-time-grid > hr {
    position: relative;
    z-index: 2;
}

.fc-time-grid .fc-content-col {
    position: relative;
}

.fc-time-grid .fc-content-skeleton {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
}

.fc-time-grid .fc-business-container {
    position: relative;
    z-index: 1;
}

.fc-time-grid .fc-bgevent-container {
    position: relative;
    z-index: 2;
}

.fc-time-grid .fc-highlight-container {
    position: relative;
    z-index: 3;
}

.fc-time-grid .fc-event-container {
    position: relative;
    z-index: 4;
}

.fc-time-grid .fc-now-indicator-line {
    z-index: 5;
}

.fc-time-grid .fc-helper-container {
    position: relative;
    z-index: 6;
}

.fc-time-grid .fc-slats td {
    height: 1.5em;

    border-bottom: 0;
}

.fc-time-grid .fc-slats .fc-minor td {
    border-top-style: dashed;
}

.fc-time-grid .fc-slats .fc-minor td.fc-axis.fc-time {
    background-color: #fff;

    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.fc-time-grid .fc-highlight {
    position: absolute;
    right: 0;
    left: 0;
}

.fc-ltr .fc-time-grid .fc-event-container {
    margin: 0 2.5% 0 2px;
}

.fc-rtl .fc-time-grid .fc-event-container {
    margin: 0 2px 0 2.5%;
}

.fc-time-grid .fc-bgevent,
.fc-time-grid .fc-event {
    position: absolute;
    z-index: 1;
}

.fc-time-grid .fc-bgevent {
    right: 0;
    left: 0;
}

.fc-v-event.fc-not-start {
    padding-top: 1px;

    border-top-width: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
}

.fc-v-event.fc-not-end {
    padding-bottom: 1px;

    border-bottom-width: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
}

.fc-time-grid-event.fc-selected {
    overflow: visible;
}

.fc-time-grid-event.fc-selected .fc-bg {
    display: none;
}

.fc-time-grid-event .fc-content {
    padding: var(--space-xs);

    overflow: hidden;
}

.fc-time-grid-event .fc-time,
.fc-time-grid-event .fc-title {
    padding: 0 1px;
}

.fc-time-grid-event .fc-time {
    font-size: .85em;
}

.fc-time-grid-event.fc-short .fc-time,
.fc-time-grid-event.fc-short .fc-title {
    display: inline-block;

    vertical-align: top;
}

.fc-time-grid-event.fc-short .fc-time span {
    display: none;
}

.fc-time-grid-event.fc-short .fc-time:before {
    content: attr(data-start);
}

.fc-time-grid-event.fc-short .fc-time:after {
    content: '\A0-\A0';
}

.fc-time-grid-event.fc-short .fc-title {
    padding: 0;

    font-size: .85em;
}

.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
    height: 8px;

    line-height: 8px;
    text-align: center;
    font-family: monospace;
    font-size: 11px;

    cursor: s-resize;

    right: 0;
    bottom: 0;
    left: 0;

    overflow: hidden;
}

.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
    content: '=';
}

.fc-time-grid-event.fc-selected .fc-resizer {
    width: 8px;
    height: 8px;
    margin-left: -5px;

    background: #fff;

    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    bottom: -5px;
    left: 50%;
}

.fc-time-grid .fc-now-indicator-line {
    border-top-width: 1px;

    right: 0;
    left: 0;
}

.fc-time-grid .fc-now-indicator-arrow {
    margin-top: -5px;
}

.fc-ltr .fc-time-grid .fc-now-indicator-arrow {
    border-width: 5px 0 5px 6px;
    border-top-color: transparent;
    border-bottom-color: transparent;

    left: 0;
}

.fc-rtl .fc-time-grid .fc-now-indicator-arrow {
    border-width: 5px 6px 5px 0;
    border-top-color: transparent;
    border-bottom-color: transparent;

    right: 0;
}

.fc-event-dot {
    display: inline-block;

    width: 10px;
    height: 10px;

    -webkit-border-radius: 5px;

    border-radius: 5px;
}

.fc-rtl .fc-list-view {
    direction: rtl;
}

.fc-list-view {
    border-width: 1px;
    border-style: solid;
}

.fc .fc-list-table {
    table-layout: auto;
}

.fc-list-table td {
    padding: 8px 14px;

    border-width: 1px 0 0;
}

.fc-list-table tr:first-child td {
    border-top-width: 0;
}

.fc-list-heading {
    border-bottom-width: 1px;
}

.fc-list-heading td {
    font-weight: 700;
}

.fc-ltr .fc-list-heading-main {
    float: left;
}

.fc-ltr .fc-list-heading-alt,
.fc-rtl .fc-list-heading-main {
    float: right;
}

.fc-rtl .fc-list-heading-alt {
    float: left;
}

.fc-list-item.fc-has-url {
    cursor: pointer;
}

.fc-list-item-marker,
.fc-list-item-time {
    width: 1px;
}

.fc-ltr .fc-list-item-marker {
    padding-right: 0;
}

.fc-rtl .fc-list-item-marker {
    padding-left: 0;
}

.fc-list-item-title a {
    color: inherit;
    text-decoration: none;
}

.fc-list-item-title a[href]:hover {
    text-decoration: underline;
}

.fc-list-empty-wrap2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.fc-list-empty-wrap1 {
    display: table;

    width: 100%;
    height: 100%;
}

.fc-list-empty {
    display: table-cell;

    text-align: center;
    vertical-align: middle;
}

.fc-unthemed .fc-list-empty {
    background-color: #eee;
}

.fc-more-cell {
    background-color: #c0c0c0;

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);
}

.fc-more-cell a.fc-more {
    line-height: 15px;
    font-size: 12px;
    font-weight: bold;
    color: var(--color-neutral-0);
}

.fc-content {
    font-size: var(--font-size-s);
}

/* Allocation calendar styles */
.full-resources {
    /* **For 2 day view** */
}

.full-resources .fc-view-container {
    overflow-x: scroll;
}

.full-resources .fc-view.fc-agendaDay-view.fc-agenda-view {
    width: 100%;
}

.full-resources .fc-view.fc-agendaTwoDay-view.fc-agenda-view {
    width: 100%;
}

.full-resources th.fc-resource-cell {
    margin-bottom: var(--space-s);
    padding: 0 var(--space-xs);
}

.full-resources th.fc-resource-cell:before {
    content: '\f007';
    display: inline-block;

    margin-right: var(--space-s);

    font-family: 'Font Awesome 5 Pro';
    font-size: var(--font-size-s);
}

.full-resources .fc-time-grid-event .fc-content {
    padding: var(--space-s);
}

.full-resources .fc-title {
    margin-bottom: var(--space-s);

    line-height: 17px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: bold;
}

.full-resources .fc-event-phone,
.full-resources .fc-event-time {
    margin-bottom: var(--space-s);

    line-height: 17px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
}

.full-resources .fc-event-phone span[class^='fa-'],
.full-resources .fc-event-phone span[class*='fa-'],
.full-resources .fc-event-time span[class^='fa-'],
.full-resources .fc-event-time span[class*='fa-'] {
    margin-right: var(--space-xs);

    font-size: var(--font-size-s);
}

.full-resources .fc-time-grid .fc-slats .fc-minor td {
    border-top: none;
}

.full-resources td.fc-today {
    border-color: #d3d8e9;
}

/* Draggable external event */
.draggable-handle {
    width: 25px;
    height: 30px;

    line-height: 30px;
    text-align: center;

    background-color: #eff1f6;

    cursor: -webkit-grab;

    cursor: grab;

    border: 1px solid #d3d8e9;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;

    position: absolute;
    right: 0;
}

.draggable-handle > span:first-child {
    margin-right: 3px;
}

/* Navigation Buttons for full calendar */
.nav-full-calendar {
    width: 40px;
    height: 40px;
    margin: 0 var(--space-s);

    line-height: 40px;
    text-align: center;

    background-color: #fff;

    border: 1px solid #dfe3ee;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 12px 0 #dfe3ee;
    box-shadow: 0 2px 12px 0 #dfe3ee;
}

.nav-full-calendar:last-child {
    margin-right: 0;
}

/* Error Page Image */
.page-four-o-three,
.page-four-o-four,
.page-five-hundred {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    position: absolute;
    top: 50%;
    left: 50%;
}

.error-image {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    max-width: 500px;
    margin: 0 auto;
    padding: 50px;

    position: relative;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.error-image .error-image__outer-display {
    width: 300px;
    height: 200px;
    padding: 20px;

    background: var(--color-secondary);

    -webkit-border-radius: var(--border-radius-soft);

    border-radius: var(--border-radius-soft);
}

.error-image .error-image__inner-display {
    height: 100%;

    background: #fffffe;

    position: relative;
}

.error-image .error-image__inner-display .error-image__header {
    height: 30px;
    padding: 5px;

    background: var(--color-primary);

    position: relative;
}

.error-image .error-image__inner-display .error-image__header .error-image__dots {
    width: 8px;
    height: 8px;

    background: #3a5283;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    position: relative;
}

.error-image .error-image__inner-display .error-image__header .error-image__dots:before,
.error-image .error-image__inner-display .error-image__header .error-image__dots:after {
    content: '';

    width: inherit;
    height: inherit;

    background: inherit;

    -webkit-border-radius: inherit;

    border-radius: inherit;

    position: absolute;
}

.error-image .error-image__inner-display .error-image__header .error-image__dots:before {
    left: 12px;
}

.error-image .error-image__inner-display .error-image__header .error-image__dots:after {
    left: 24px;
}

.error-image .error-image__inner-display .error-image__viewport {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    height: -webkit-calc(100% - 30px);

    height: calc(100% - 30px);
    padding: 20px 30px;

    background: #fffffe;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.error-image .error-image__inner-display .error-image__viewport .error-image__dashed-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 100%;

    font: 70px sans-serif;
    font-weight: bold;
    color: var(--color-primary);

    background: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--color-secondary)), color-stop(0%, #fff)) top/15px 1px repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(50%, var(--color-secondary)), color-stop(0%, #fff)) right/1px 15px repeat-y, -webkit-gradient(linear, left top, right top, color-stop(50%, var(--color-secondary)), color-stop(0%, #fff)) bottom/15px 1px repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(50%, var(--color-secondary)), color-stop(0%, #fff)) left/1px 15px repeat-y;

    background: -webkit-linear-gradient(left, var(--color-secondary) 50%, #fff 0%) top/15px 1px repeat-x, -webkit-linear-gradient(var(--color-secondary) 50%, #fff 0%) right/1px 15px repeat-y, -webkit-linear-gradient(left, var(--color-secondary) 50%, #fff 0%) bottom/15px 1px repeat-x, -webkit-linear-gradient(var(--color-secondary) 50%, #fff 0%) left/1px 15px repeat-y;

    background: -o-linear-gradient(left, var(--color-secondary) 50%, #fff 0%) top/15px 1px repeat-x, -o-linear-gradient(var(--color-secondary) 50%, #fff 0%) right/1px 15px repeat-y, -o-linear-gradient(left, var(--color-secondary) 50%, #fff 0%) bottom/15px 1px repeat-x, -o-linear-gradient(var(--color-secondary) 50%, #fff 0%) left/1px 15px repeat-y;

    background: linear-gradient(to right, var(--color-secondary) 50%, #fff 0%) top/15px 1px repeat-x, linear-gradient(var(--color-secondary) 50%, #fff 0%) right/1px 15px repeat-y, linear-gradient(to right, var(--color-secondary) 50%, #fff 0%) bottom/15px 1px repeat-x, linear-gradient(var(--color-secondary) 50%, #fff 0%) left/1px 15px repeat-y;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* left */
}

.error-image .error-image__stand {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    position: relative;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.error-image .error-image__stand .error-image__top-stand {
    width: 150px;
    height: 40px;

    background: var(--color-primary);
}

.error-image .error-image__stand .error-image__bottom-stand {
    width: 250px;
    height: 10px;

    background: var(--color-secondary);
}

.error-image .error-image__addons {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.error-image .error-image__addons .error-image__plus {
    position: absolute;
}

.error-image .error-image__addons .error-image__plus:before,
.error-image .error-image__addons .error-image__plus:after {
    content: '';

    width: 4px;
    height: 15px;

    background: inherit;

    -webkit-border-radius: 2px;

    border-radius: 2px;

    position: absolute;
}

.error-image .error-image__addons .error-image__plus:before {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.error-image .error-image__addons .error-image__circle {
    width: 15px;
    height: 15px;

    background: transparent;

    border: 3px solid;
    -webkit-border-radius: 15px;
    border-radius: 15px;

    position: absolute;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(1) {
    -webkit-animation: 3s sparkle -2.8s infinite;
    animation: 3s sparkle -2.8s infinite;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(2) {
    -webkit-animation: 2s sparkle -4.1s infinite;
    animation: 2s sparkle -4.1s infinite;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(3) {
    -webkit-animation: 2s sparkle -.2s infinite;
    animation: 2s sparkle -.2s infinite;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(4) {
    -webkit-animation: 2s sparkle -2.5s infinite;
    animation: 2s sparkle -2.5s infinite;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(5) {
    -webkit-animation: 2s sparkle -1.7s infinite;
    animation: 2s sparkle -1.7s infinite;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(6) {
    -webkit-animation: 1s sparkle -2.7s infinite;
    animation: 1s sparkle -2.7s infinite;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(7) {
    -webkit-animation: 2s sparkle -2.8s infinite;
    animation: 2s sparkle -2.8s infinite;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(8) {
    -webkit-animation: 2s sparkle -1.2s infinite;
    animation: 2s sparkle -1.2s infinite;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(9) {
    -webkit-animation: 4s sparkle -4.1s infinite;
    animation: 4s sparkle -4.1s infinite;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(1) {
    background: var(--color-secondary);

    bottom: 30px;
    left: 100px;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(2) {
    background: var(--color-primary);

    bottom: 150px;
    left: 20px;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(3) {
    border-color: var(--color-primary);

    bottom: 250px;
    left: 0;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(4) {
    border-color: var(--color-secondary);

    top: 20px;
    left: 150px;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(5) {
    background: var(--color-primary);

    top: 0;
    left: 300px;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(6) {
    border-color: var(--color-secondary);

    top: 20px;
    right: 100px;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(7) {
    background: var(--color-secondary);

    right: 30px;
    bottom: 250px;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(8) {
    border-color: var(--color-secondary);

    right: 15px;
    bottom: 80px;
}

.error-image .error-image__addons > [class*='error-image__']:nth-child(9) {
    border-color: var(--color-secondary);

    right: 100px;
    bottom: 40px;
}

@-webkit-keyframes sparkle {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
    100% {
        opacity: 1;
    }
}

@keyframes sparkle {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
    100% {
        opacity: 1;
    }
}

/* UserCard */
.user-card {
    padding: var(--space-s) var(--space-s);

    background: var(--color-neutral-0);

    border: var(--border-size-s) solid #d3d8e9;
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
}

.user-card .user-card__name {
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
    color: var(--color-primary);
}

.user-card .user-card__user-info {
    line-height: var(--font-size-base);
    font-size: var(--font-size-s);
    font-weight: var(--font-bold);
    color: var(--color-text);
}

.user-card .user-card__user-info .user-card__phone-number > span:first-child {
    margin-right: var(--space-xs);
}

.user-card .user-card__user-info .user-card__phone-number ~ .user-card__nif-ssn {
    margin-left: var(--space-m);

    position: relative;
}

.user-card .user-card__user-info .user-card__phone-number ~ .user-card__nif-ssn:before {
    content: '';

    width: 1px;
    height: 9px;

    background: var(--color-text);

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    position: absolute;
    top: 50%;
    left: -12px;
}

.user-card .user-card__user-info .user-card__phone-number ~ .user-card__nif-ssn:empty {
    display: none;
}

.user-card .user-card__schedule-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    min-height: 34px;

    font-size: var(--font-size-s);
    color: #adadad;
}

.user-card .user-card__schedule-info .user-card__date-time {
    margin-top: var(--space-base);
}

.user-card .user-card__schedule-info .user-card__date-time ~ .user-card__type {
    margin-left: var(--space-m);

    position: relative;
}

.user-card .user-card__schedule-info .user-card__date-time ~ .user-card__type:empty {
    display: none;
}

.user-card .user-card__schedule-info .user-card__date-time ~ .user-card__type > span:first-child {
    margin-right: var(--space-xs);
}

.user-card .user-card__schedule-info .user-card__date-time ~ .user-card__type:before {
    content: '';

    width: 1px;
    height: 9px;

    background: #adadad;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    position: absolute;
    top: 50%;
    left: -12px;
}

.user-card .user-card__schedule-info .user-card__type {
    margin-top: var(--space-base);
}

.user-card .user-card__actions .Button {
    width: 100%;
    margin-top: var(--space-s);
}

/* $4.9.6 - Patterns - Custom - Horizontal Navigation Bar */
.navigation-bar.is-horizontal {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
}

.navigation-bar.is-horizontal:after {
    content: '';

    width: 100%;
    height: 1px;

    background: var(--color-primary);

    position: absolute;
    bottom: 0;
    left: 0;
}

.navigation-bar.is-horizontal.navigation-bar--full-width {
    position: relative;

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;
}

.navigation-bar.is-horizontal.navigation-bar--full-width .navigation-bar-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.navigation-bar.is-horizontal .navigation-bar-item {
    padding: var(--space-base);

    border-bottom: 4px solid transparent;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.navigation-bar.is-horizontal .navigation-bar-item .navigation-bar-item-title {
    margin: 0;

    line-height: var(--font-size-h3);
    font-size: var(--font-size-h3);
}

.navigation-bar.is-horizontal .navigation-bar-item.is--active,
.navigation-bar.is-horizontal .navigation-bar-item:hover {
    cursor: pointer;

    border-bottom-color: var(--color-primary);
}

.navigation-bar.is-horizontal .navigation-bar-item.is--active .navigation-bar-item-title,
.navigation-bar.is-horizontal .navigation-bar-item:hover .navigation-bar-item-title {
    font-weight: var(--font-regular);
    color: var(--color-primary);
}

.navigation-bar.is-horizontal .navigation-bar-item.is--active .navigation-bar-item-title a,
.navigation-bar.is-horizontal .navigation-bar-item:hover .navigation-bar-item-title a {
    color: var(--color-primary);
    text-decoration: none;
}

/* $4.9.7 - Patterns - Custom - Alphabet Filter Bar */
.filter-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 60px;

    background: var(--color-neutral-0);

    position: relative;

    overflow: hidden;
    overflow-x: auto;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.filter-bar > .filter-bar__link:first-child {
    opacity: 1;
}

.filter-bar span.ListRecords {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    width: 100%;
    height: 100%;

    -webkit-justify-content: space-around;

    -ms-flex-pack: distribute;

    justify-content: space-around;
}

.filter-bar .filter-bar__link {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    height: 100%;
    padding: var(--space-none) var(--space-s);

    white-space: nowrap;

    opacity: .5;

    border-top: var(--space-s) solid transparent;
    border-bottom: var(--space-s) solid transparent;

    -webkit-transition: 350ms;

    -o-transition: 350ms;

    transition: 350ms;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.filter-bar .filter-bar__link a,
.filter-bar .filter-bar__link a:link,
.filter-bar .filter-bar__link a:visited {
    line-height: 31px;
    font-size: var(--font-size-base);
    font-weight: bold;
    color: var(--color-text);
    text-decoration: none;
}

.filter-bar .filter-bar__link:hover {
    cursor: pointer;
    opacity: 1;
}

.filter-bar .filter-bar__link.active {
    opacity: 1;

    border-bottom-color: var(--color-primary);
}

.filter-bar .filter-bar__link:last-child {
    margin-right: var(space-s);
}

/* $4.9.8 - Patterns - Custom - Card Row */
.card-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.card-row.card {
    padding: 0;
}

.card-row__title,
.card-row__content,
.card-row__actions {
    padding: var(--space-s) var(--space-m);
}

.card-row__content {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;

    border-left: inherit;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/* $4.9.9 - Patterns - Custom - Small Right Column Fixed */
.columns-small-right-fixed > .columns-item:last-child > div {
    max-height: 100%;

    overflow: auto;
}

/* $4.9.10 - Patterns - Custom - Fixed on Scroll */
.fixed-on-scroll {
    position: relative;
    z-index: 10;
}

/* $4.9.11 - Patterns - Custom - Open Appointments Button */
.open-appointments .tippy-content .balloon-content {
    height: 100%;
    max-height: 70vh;

    overflow: hidden auto;
}

/* $4.9.12 - Patterns - Custom - FullCalendar Label */
.fc-label {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.fc-label .fc-label-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    padding: 10px 0 5px;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.fc-label .fc-label-item__color {
    width: 15px;
    height: 15px;

    -webkit-border-radius: 15px;

    border-radius: 15px;
}

.fc-label .fc-label-item__description {
    margin-left: 5px;
}

.fc-label-item ~ .fc-label-item {
    margin-left: 20px;
}

/* $4.9.13 - Patterns - Custom - Complex Table */

.complex-table table{
    text-transform: uppercase;
    text-align: center;
    table-layout: fixed;
    font-weight: bold;
    border-spacing: 0px;
}

/*First Header*/
.complex-table .TableRecords .TableRecords_Header table:nth-child(1) tr:nth-child(1) > td {
    background: #EEEEEE 0% 0% no-repeat padding-box;
    border: 2px solid #FFFFFF;
    opacity: 1;
}

.complex-table .TableRecords .TableRecords_Header tr{
     height: 47px;  
}

.complex-table .TableRecords .TableRecords_Header table:nth-child(2) tr:nth-child(1){
    color: var(--color-primary);
}

/*style for first column of the second row*/
.complex-table .TableRecords .TableRecords_Header tr:nth-child(2) > td:nth-child(1){
    font-size: 20px;
}

.complex-table .TableRecords .TableRecords_Header tr:nth-child(2) > td:nth-child(1){
    color: black;
}

.complex-table .TableRecords .TableRecords_Header tr:nth-child(2),
.complex-table .TableRecords .TableRecords_Header tr:nth-child(3),
.complex-table .TableRecords .TableRecords_OddLine tr > td:nth-child(1) {
    color: var(--color-primary);    
}


/*== ROWS ==*/
.complex-table .TableRecords .TableRecords_EvenLine tr > td,
.complex-table .TableRecords .TableRecords_OddLine tr > td{
    padding: 10px 0px 10px 0px;
}

/*unser height of the row to be possible set the padding and change the background color*/
.complex-table .TableRecords .TableRecords_EvenLine,
.complex-table .TableRecords .TableRecords_OddLine{
    height: unset;
    padding: unset;
    color: black;
    border-bottom: 4px white solid !important;
    border-top-width: 0px !important;
}

/*Set the first and last columns for every rows*/
.complex-table .TableRecords .TableRecords_EvenLine tr > td:nth-child(1),
.complex-table .TableRecords .TableRecords_OddLine tr > td:nth-child(1),
.complex-table .TableRecords .TableRecords_EvenLine tr > td:nth-last-child(1),
.complex-table .TableRecords .TableRecords_OddLine tr > td:nth-last-child(1) {
    background-color: white;
    color: var(--color-primary);
}

.complex-table .TableRecords tr:hover .TableRecords_OddLine td,
.complex-table .TableRecords tr:hover .TableRecords_EvenLine td{
    background-color: white !important;
}

/* $4.9.14 - Patterns - Custom - Scrollable Table */
/* scrollable table */
.tableWrapper {
    width: 100%;

    overflow-x: auto;
}

.tableWrapper table {
    white-space: nowrap;
}

.tableWrapper.scrollRight {
    background: -webkit-gradient(linear, left top, right top, color-stop(95%, rgba(187, 187, 187, 0)), to(#bbb));
    background: -webkit-linear-gradient(left, rgba(187, 187, 187, 0) 95%, #bbb 100%);
    background: -o-linear-gradient(left, rgba(187, 187, 187, 0) 95%, #bbb 100%);
    background: linear-gradient(to right, rgba(187, 187, 187, 0) 95%, #bbb 100%);
}

.tableWrapper.scrollLeft {
    background: -webkit-gradient(linear, left top, right top, from(#bbb), color-stop(5%, rgba(187, 187, 187, 0)));
    background: -webkit-linear-gradient(left, #bbb 0%, rgba(187, 187, 187, 0) 5%);
    background: -o-linear-gradient(left, #bbb 0%, rgba(187, 187, 187, 0) 5%);
    background: linear-gradient(to right, #bbb 0%, rgba(187, 187, 187, 0) 5%);
}

.tableWrapper.scrollLeft.scrollRight {
    background: -webkit-gradient(linear, left top, right top, from(#bbb), color-stop(5%, rgba(187, 187, 187, 0)), color-stop(95%, rgba(187, 187, 187, 0)), to(#bbb));
    background: -webkit-linear-gradient(left, #bbb 0%, rgba(187, 187, 187, 0) 5%, rgba(187, 187, 187, 0) 95%, #bbb 100%);
    background: -o-linear-gradient(left, #bbb 0%, rgba(187, 187, 187, 0) 5%, rgba(187, 187, 187, 0) 95%, #bbb 100%);
    background: linear-gradient(to right, #bbb 0%, rgba(187, 187, 187, 0) 5%, rgba(187, 187, 187, 0) 95%, #bbb 100%);
}

/* ================================================================ */
/*  $5 - Widgets & RichWidgets                                      */
/* ================================================================ */
/* $5.1 - Widgets - Form / EditRecord */
.Form {
    background-color: transparent;
}

.Form label {
    color: var(--color-neutral-7);
}

.Form:not(.form-top) label {
    padding-top: 0;
}

.layout .Form .input.ReadOnly:not(.Not_Valid),
.layout .Form .select.ReadOnly:not(.Not_Valid) {
    color: var(--color-neutral-10);

    background: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-4);
}

.Form input.ReadOnly,
.Form textarea.ReadOnly,
.Form select.ReadOnly {
    font-size: var(--font-size-base);
}

.Form:not(.ReadOnly) textarea.ReadOnly {
    cursor: text;
}

.Form:not(.ReadOnly) .button-group input.ReadOnly {
    cursor: pointer;
}

.Form input.checkbox.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==') !important;
    background-repeat: no-repeat;
    background-position: center right 16px;
    -webkit-background-size: 14px 7px;
    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 {
    padding: var(--space-none) var(--space-base);

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-error);
}

.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),
.EditRecord input:not(.checkbox) .EditRecord input:not(.radio-button) {
    height: 40px;
    padding: var(--space-none) var(--space-base);

    font-size: var(--font-size-base);
    color: var(--color-neutral-9);

    background-color: var(--color-neutral-0);

    border: var(--border-size-s) solid var(--color-neutral-5);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-transition: all 180ms linear;
            -o-transition: all 180ms linear;
            transition: all 180ms linear;
}

/* $5.2 - Widgets - TableRecords / EditableTable */
.TableRecords {
    empty-cells: show;
    border-spacing: 0;

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
}

.EditableTable {
    margin: 0;
    padding: 0;

    font-size: 14px;

    empty-cells: show;
    border-spacing: 0;

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
}

.TableRecords .TableRecords_Header,
.EditableTable thead th {
    height: 48px;
    padding: var(--space-none) var(--space-m);

    text-align: left;
    font-weight: var(--font-bold);
    color: var(--color-text);

    background-color: var(--color-neutral-0);

    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
}

.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 {
    -webkit-border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-none);
    border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-none);
}

.TableRecords .TableRecords_Header:last-child {
    -webkit-border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
    border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.TableRecords .TableRecords_Header .fa {
    width: auto;
    margin-left: var(--space-s);

    font-size: var(--font-size-xs);
}

.tablet.portrait .TableRecords .TableRecords_Header .fa,
.phone .TableRecords .TableRecords_Header .fa {
    display: none;
}

.TableRecords .TableRecords_OddLine,
.TableRecords .TableRecords_EvenLine {
    height: auto;
    padding: var(--space-s) var(--space-m);

    text-align: left;

    background-color: var(--color-neutral-0);

    border-bottom: 1px solid var(--color-neutral-4);

    -webkit-transition: background-color 180ms;
            -o-transition: background-color 180ms;
            transition: background-color 180ms;
}

.table-no-header .TableRecords_OddLine,
.table-no-header .TableRecords_EvenLine {
    padding: var(--space-s) 0;
}

.phone .TableRecords.table-no-header.no-responsive tbody tr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    border-bottom: 1px solid var(--color-neutral-4);

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.tablet .TableRecords.table-no-header.no-responsive tbody tr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    border-bottom: 1px solid var(--color-neutral-4);

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}

.tablet .TableRecords.table-no-header.no-responsive tbody tr:last-child {
    padding: var(--space-none) var(--space-none) var(--space-base) var(--space-none);

    border: none;
}

.phone .TableRecords.table-no-header.no-responsive tbody tr:last-child {
    padding: var(--space-none) var(--space-none) var(--space-base) var(--space-none);

    border: none;
}

.tablet .TableRecords.table-no-header.no-responsive tbody td,
.phone .TableRecords.table-no-header.no-responsive tbody td {
    padding: var(--space-base) var(--space-none);

    border: none;
}

.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: #efefef;
}

/* Default Responsive TableRecords */
.desktop .TableRecords_Label {
    display: none;
}

.tablet .TableRecords_Label {
    display: none;
}

.tablet.portrait .TableRecords_Label {
    display: block;
}

.phone .TableRecords_Label {
    display: block;
}

.TableRecords_Label {
    min-width: 100px;
    margin-right: 40px;

    font-weight: var(--font-semi-bold);
    color: var(--color-neutral-8);
}

.phone .TableRecords_Label {
    min-width: 70px;
    max-width: 70px;
}

.tablet.portrait .TableRecords,
.phone .TableRecords:not(.no-responsive) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.tablet.portrait .TableRecords thead,
.phone .TableRecords thead {
    display: none;
}

.tablet.portrait .TableRecords tbody,
.phone .TableRecords tbody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    width: 100%;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.tablet.portrait .TableRecords tbody tr,
.phone .TableRecords tbody tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.tablet.portrait .TableRecords tbody tr td {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 100% !important;
    height: auto;
    padding: var(--space-base) var(--space-m) var(--space-none) var(--space-m);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.phone .TableRecords tbody tr td {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 100% !important;
    height: auto;
    padding: var(--space-base) var(--space-m) var(--space-none) var(--space-m);

    -webkit-align-items: flex-start;

    align-items: flex-start;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-flex-align: center;
}

.tablet.portrait .TableRecords tbody tr td:last-child,
.phone .TableRecords tbody tr td:last-child {
    padding-bottom: var(--space-base);
}

.tablet.portrait .TableRecords tbody tr td:not(:last-child),
.phone .TableRecords tbody tr td:not(:last-child) {
    border-bottom: var(--border-size-none);
}

.tablet.portrait .TableRecords tbody tr:first-child td,
.phone .TableRecords tbody tr:first-child td {
    -webkit-border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

/* 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 {
    padding: 0;

    background-color: transparent;

    cursor: pointer;

    border: 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 tbody tr td {
    padding: var(--space-s);
}

.TableRecords_BottomNavigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    margin-top: var(--space-m);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.phone .TableRecords_BottomNavigation {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    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'] {
    color: var(--color-neutral-10);
    pointer-events: auto;

    background-color: transparent;

    border: var(--border-size-s) solid transparent;
}

.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 {
    visibility: collapse;

    position: relative;
}

.EditableTable tbody tr.RowControlGroup td {
    padding: var(--space-none);

    position: relative;
}

.EditableTable tr.RowControlGroup .ControlActions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    visibility: visible;

    width: 130px;
    height: 40px;
    margin-top: 0;
    margin-left: 0;

    background-color: var(--color-neutral-3);

    border: var(--border-size-s) solid var(--color-neutral-4);
    border-top: var(--border-size-none);

    -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);

    position: absolute;
    top: -1px;
    left: 50%;
    z-index: 10;

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.EditableTable tr.RowControlGroup a {
    width: 30px;

    text-align: center;
    font-size: var(--font-size-h5);
    color: var(--color-primary);

    cursor: pointer;
}

.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) {
    font-size: 14px;
}

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 {
    margin-right: 40px;
    margin-bottom: var(--space-xs);

    font-weight: var(--font-semi-bold);
    color: var(--color-neutral-8);
}

.tablet.portrait .EditableTable input:not(.InEditMode),
.tablet.portrait .EditableTable textarea:not(.InEditMode),
.tablet.portrait .EditableTable select:not(.InEditMode) {
    padding: var(--space-none) var(--space-xl) var(--space-none) var(--space-base);

    -webkit-transition: none;

    -o-transition: none;

    transition: none;
}

.phone .EditableTable input:not(.InEditMode),
.phone .EditableTable textarea:not(.InEditMode),
.phone .EditableTable select:not(.InEditMode) {
    padding: var(--space-none) var(--space-xl) var(--space-none) var(--space-base);

    -webkit-transition: none;

    -o-transition: none;

    transition: none;
}

.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 {
    content: '\f107';

    width: 16px;
    margin: 0;

    font: normal normal normal 24px/1 FontAwesome;
    color: var(--color-primary);

    -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transition: transform 180ms linear;
            -webkit-transition: -webkit-transform 180ms linear;
            transition: -webkit-transform 180ms linear;
            -o-transition: transform 180ms linear;
            transition: transform 180ms linear;
            transition: transform 180ms linear, -webkit-transform 180ms linear;

    position: absolute;
    top: 50%;
    right: 16px;
}

/* $5.3 - RichWidgets - CounterMessage */
div.Counter_Message {
    color: var(--color-neutral-7);
}

/* $5.4 - RichWidgets - FeedbackAjaxWait */
div.Feedback_AjaxWait {
    display: block;

    width: 100%;
    height: 4px;
    padding: var(--space-none);

    font-size: 0;

    background: var(--color-primary) var(--color-primary-lightest);

    -webkit-border-radius: var(--border-radius-none);

    border-radius: var(--border-radius-none);

    position: fixed;
    top: 0;
}

div.Feedback_AjaxWait:before {
    content: '';

    width: 50%;
    height: 100%;

    background-color: var(--color-primary);

    -webkit-animation: ajax-wait 1700ms linear infinite;
            animation: ajax-wait 1700ms linear infinite;

    position: absolute;
    top: 0;
    left: 0;

    will-change: transform;
}

div.Feedback_AjaxWait img {
    display: none;
}

@-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% {
        -webkit-transform: translateX(-105vw) translateZ(0) scaleX(1);
        transform: translateX(-105vw) translateZ(0) scaleX(1);
    }
    25% {
        -webkit-transform: translateX(-55vw) translateZ(0) scaleX(1.5);
        transform: translateX(-55vw) translateZ(0) scaleX(1.5);
    }
    50% {
        -webkit-transform: translateX(0) translateZ(0) scaleX(1.5);
        transform: translateX(0) translateZ(0) scaleX(1.5);
    }
    75% {
        -webkit-transform: translateX(55vw) translateZ(0) scaleX(.5);
        transform: translateX(55vw) translateZ(0) scaleX(.5);
    }
    100% {
        -webkit-transform: translateX(105vw) translateZ(0) scaleX(.2);
        transform: translateX(105vw) translateZ(0) scaleX(.2);
    }
}

/* $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 {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;

    min-width: 400px;
    max-width: 600px;
    margin-left: var(--space-none);
    padding: var(--space-s) var(--space-l) var(--space-s) var(--space-s);

    font-size: var(--font-size-base);

    border: var(--border-size-none);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);
    -webkit-box-shadow: var(--shadow-none);
    box-shadow: var(--shadow-none);

    position: relative;

    -webkit-align-items: flex-start;

    align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
}

.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 {
    color: var(--color-text);

    background-color: var(--color-neutral-0);

    border: 1px solid var(--color-error);
}

div.Feedback_Message_Error:before {
    content: '\f00d';

    width: auto;
    margin-top: 2px;

    font: normal normal normal 20px/1 'Font Awesome 5 Pro';
    font-weight: 900;
    color: var(--color-error);

    position: relative;
}

div.Feedback_Message_Warning {
    color: var(--color-text);

    background-color: var(--color-neutral-0);

    border: 1px solid var(--color-warning);
}

div.Feedback_Message_Warning:before {
    content: '\f071';

    width: auto;
    margin-top: 2px;

    font: normal normal normal 20px/1 'Font Awesome 5 Pro';
    font-weight: 900;
    color: var(--color-warning);

    position: relative;
}

div.Feedback_Message_Success {
    color: var(--color-text);

    background-color: var(--color-neutral-0);

    border: 1px solid var(--color-success);
}

div.Feedback_Message_Success:before {
    content: '\f00c';

    width: auto;
    margin-top: 2px;

    font: normal normal normal 20px/1 'Font Awesome 5 Pro';
    font-weight: 900;
    color: var(--color-success);

    position: relative;
}

div.Feedback_Message_Info {
    color: var(--color-text);

    background-color: var(--color-neutral-0);

    border: 1px solid var(--color-info);
}

div.Feedback_Message_Info:before {
    content: '\f129';

    width: auto;
    margin-top: 2px;

    font: normal normal normal 18px/1 'Font Awesome 5 Pro';
    font-weight: 900;
    color: var(--color-info);

    position: relative;
}

div.Feedback_Message_Info a {
    text-decoration: none;
}

a.Feedback_Message_Wrapper_Close {
    top: 25%;
    right: 8px;
}

.tablet a.Feedback_Message_Wrapper_Close,
.phone a.Feedback_Message_Wrapper_Close {
    pointer-events: none;
}

a.Feedback_Message_Wrapper_Close:before {
    content: '\f00d';

    font: normal normal normal 14px FontAwesome;
    color: var(--color-text);

    position: relative;
}

a.Feedback_Message_Wrapper_Close img {
    display: none;
}

/* $5.6 - RichWidgets - Pagination */
.ListNavigation_Wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.phone .ListNavigation_Wrapper {
    margin-top: 16px;

    -webkit-box-pack: start;

    -webkit-justify-content: flex-start;

    -ms-flex-pack: start;

    justify-content: flex-start;
}

.ListNavigation_PageNumber {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;

    min-width: 32px;
    min-height: 32px;
    margin-left: var(--space-s);
    padding: var(--space-none);

    text-align: center;
    font-weight: var(--font-regular);
    color: var(--color-neutral-8);

    background-color: var(--color-neutral-0);

    cursor: pointer;

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

a.ListNavigation_Previous,
a.ListNavigation_Next {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;

    min-width: 32px;
    min-height: 32px;
    margin-left: var(--space-s);
    padding: var(--space-none);

    text-align: center;
    font-weight: var(--font-regular);
    color: var(--color-neutral-8);

    background-color: var(--color-neutral-0);

    cursor: pointer;

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

span.ListNavigation_DisabledPrevious,
span.ListNavigation_DisabledNext {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;

    min-width: 32px;
    min-height: 32px;
    margin-left: var(--space-s);
    padding: var(--space-none);

    text-align: center;
    font-weight: var(--font-regular);
    color: var(--color-neutral-8);
    pointer-events: none;

    background-color: var(--color-neutral-0);

    cursor: pointer;
    opacity: .5;

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

a.ListNavigation_Previous,
a.ListNavigation_Next {
    font: normal normal normal 0 FontAwesome;
}

span.ListNavigation_DisabledPrevious,
span.ListNavigation_DisabledNext {
    font: normal normal normal 0 FontAwesome;
}

a.ListNavigation_Previous:before,
span.ListNavigation_DisabledPrevious:before {
    content: '\f104';

    font-size: 14px;

    position: relative;
}

a.ListNavigation_Next:before,
span.ListNavigation_DisabledNext:before {
    content: '\f105';

    font-size: 14px;

    position: relative;
}

.ListNavigation_CurrentPageNumber {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;

    min-width: 32px;
    min-height: 32px;
    margin-left: var(--space-s);
    padding: var(--space-none);

    text-align: center;
    font-weight: var(--font-regular);
    color: var(--color-primary);

    background: var(--color-primary) var(--color-primary-lightest);

    cursor: pointer;

    border: var(--border-size-s) solid var(--color-neutral-4);
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

span.ListNavigation_CurrentPageNumber {
    font-weight: var(--font-regular);
}

.ListNavigation_PageNumber:hover,
.ListNavigation_Previous:hover,
.ListNavigation_Next:hover {
    color: var(--color-neutral-8);

    background-color: rgba(21, 24, 26, .04);

    border: var(--border-size-s) solid var(--color-neutral-4);
}

span.ListNavigation_Ellipsis {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;

    min-width: 16px;
    min-height: 32px;
    margin-left: var(--space-s);
    padding: var(--space-none);

    text-align: center;
    font-weight: var(--font-regular);
    color: var(--color-neutral-8);
    pointer-events: none;

    background-color: transparent;

    cursor: pointer;

    border: var(--border-size-s) solid transparent;
    -webkit-border-radius: var(--border-radius-soft);
    border-radius: var(--border-radius-soft);

    -webkit-align-items: center;

    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.list-navigation-inline .ListNavigation_PageNumber {
    background-color: transparent;

    border: var(--border-size-s) solid transparent;
}

.list-navigation-inline a.ListNavigation_Previous,
.list-navigation-inline a.ListNavigation_Next {
    background-color: transparent;

    border: var(--border-size-s) solid transparent;
}

.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 {
    color: var(--color-neutral-8);

    background-color: rgba(21, 24, 26, .04);

    border: var(--border-size-s) solid var(--color-neutral-4);
}

.list-navigation-sharp .ListNavigation_PageNumber {
    -webkit-border-radius: var(--border-radius-none);
    border-radius: var(--border-radius-none);
}

.list-navigation-sharp a.ListNavigation_Previous,
.list-navigation-sharp a.ListNavigation_Next {
    -webkit-border-radius: var(--border-radius-none);
    border-radius: var(--border-radius-none);
}

.list-navigation-sharp span.ListNavigation_DisabledPrevious,
.list-navigation-sharp span.ListNavigation_DisabledNext {
    -webkit-border-radius: var(--border-radius-none);
    border-radius: var(--border-radius-none);
}

.list-navigation-sharp .ListNavigation_CurrentPageNumber {
    -webkit-border-radius: var(--border-radius-none);
    border-radius: var(--border-radius-none);
}

.list-navigation-circle .ListNavigation_PageNumber {
    -webkit-border-radius: var(--border-radius-circle);
    border-radius: var(--border-radius-circle);
}

.list-navigation-circle a.ListNavigation_Previous,
.list-navigation-circle a.ListNavigation_Next {
    -webkit-border-radius: var(--border-radius-circle);
    border-radius: var(--border-radius-circle);
}

.list-navigation-circle span.ListNavigation_DisabledPrevious,
.list-navigation-circle span.ListNavigation_DisabledNext {
    -webkit-border-radius: var(--border-radius-circle);
    border-radius: var(--border-radius-circle);
}

.list-navigation-circle .ListNavigation_CurrentPageNumber {
    -webkit-border-radius: var(--border-radius-circle);
    border-radius: var(--border-radius-circle);
}

/* $5.7 - RichWidgets - PopupEditor */
/* Popup Iframe **************************/
.os-internal-Popup.os-internal-ui-dialog iframe {
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.os-internal-Popup .os-internal-ui-dialog,
.os-internal-Popup.os-internal-ui-dialog {
    /* iframe document height fix */
    min-width: 300px;
    max-height: 95%;

    border: 0;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) !important;

    overflow: visible !important;
}

/* Popups **************************/
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;
    -webkit-border-radius: 4px;
    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 {
    margin: 0;

    font-size: var(--font-size-m);
    font-weight: 600;
    color: var(--color-text);

    top: 10px;
    left: 20px;
}

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 {
    width: 20px;
    height: 20px;

    background: url(/OutSystemsUIWeb/img/PopupCloseWhite.png?14311&37&163) no-repeat;

    -webkit-transition: all .3s ease;

    -o-transition: all .3s ease;

    transition: all .3s ease;

    position: absolute;
    top: 10px;
    right: 10px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:before,
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:after,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:before,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:after {
    content: '';

    width: 16px;
    height: 4px;

    background: var(--color-text);

    -webkit-border-radius: 4px;

    border-radius: 4px;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

    position: absolute;
    top: 8px;
    right: 2px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:before,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

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;

    -webkit-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    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 {
    height: 40px;

    background: var(--color-neutral-0);

    border-bottom: none;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
}

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;
            -o-transition: none;
            transition: none;
}

ul.os-internal-ui-autocomplete a.os-internal-ui-state-hover {
    text-decoration: none;

    background: #069;

    cursor: default;
}

.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 {
    width: 20px;
    height: 20px;

    background: url(/OutSystemsUIWeb/img/PopupCloseDark.png?14311&37&163) no-repeat;

    -webkit-transition: all .3s ease;

    -o-transition: all .3s ease;

    transition: all .3s ease;

    top: 5px;
    right: 5px;
}

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title:hover {
    background: url(/OutSystemsUIWeb/img/PopupCloseDark.png?14311&37&163) no-repeat;

    opacity: .7;

    -webkit-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);
}

/* $5.7 - RichWidgets - Filters Wrapper */
.ie11 .Filters_Wrapper,
.edge .Filters_Wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.Filters_Wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    margin-bottom: 20px;
    padding: var(--space-base);

    background-color: #fff;

    border: 1px solid #d3d8e9;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-align: end;

    -webkit-align-items: flex-end;

    -ms-flex-align: end;

    align-items: flex-end;
}

.phone .Filters_Wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
}

.Filters_Wrapper > div:not(:first-child),
.Filters_Wrapper > input:not(:first-child) {
    margin-left: var(--space-base);
}

/* ================================================================ */
/*  $6 - Styles                                                     */
/* ================================================================ */
/* ================================================================ */
/*  $6.1 - Styles - Typography                                      */
/* ================================================================ */
/* $6.1.1 - Styles - Typography - Sizes Desktop */
.font-size-display {
    line-height: 1.25;
    font-size: var(--font-size-display);
    font-weight: var(--font-semi-bold);
}

.heading1 {
    line-height: 1.25;
    font-size: var(--font-size-h1);
    font-weight: var(--font-bold);
}

.heading2 {
    line-height: 1.25;
    font-size: var(--font-size-h2);
    font-weight: var(--font-regular);
}

.heading3 {
    line-height: 1.25;
    font-size: var(--font-size-h3);
    font-weight: var(--font-bold);
}

.heading4 {
    line-height: 1.25;
    font-size: var(--font-size-h4);
    font-weight: var(--font-regular);
}

.heading5 {
    line-height: 1.25;
    font-size: var(--font-size-h5);
    font-weight: var(--font-regular);
}

.heading6 {
    line-height: 1.25;
    font-size: var(--font-size-h6);
    font-weight: var(--font-regular);
}

.font-size-l {
    font-size: var(--font-size-l);
}

.font-size-m {
    font-size: var(--font-size-m);
}

.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-uppercase {
    text-transform: uppercase;
}

.text-ellipsis {
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;

    overflow: hidden;
}

/* $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-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);
}

/* $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-right: var(--space-none);
    padding-left: var(--space-none);
}

.padding-x-xs {
    padding-right: var(--space-xs);
    padding-left: var(--space-xs);
}

.padding-x-s {
    padding-right: var(--space-s);
    padding-left: var(--space-s);
}

.padding-x-base {
    padding-right: var(--space-base);
    padding-left: var(--space-base);
}

.padding-x-m {
    padding-right: var(--space-m);
    padding-left: var(--space-m);
}

.padding-x-l {
    padding-right: var(--space-l);
    padding-left: var(--space-l);
}

.padding-x-xl {
    padding-right: var(--space-xl);
    padding-left: var(--space-xl);
}

.padding-x-xxl {
    padding-right: var(--space-xxl);
    padding-left: 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-right: var(--space-none);
    margin-left: var(--space-none);
}

.margin-x-xs {
    margin-right: var(--space-xs);
    margin-left: var(--space-xs);
}

.margin-x-s {
    margin-right: var(--space-s);
    margin-left: var(--space-s);
}

.margin-x-base {
    margin-right: var(--space-base);
    margin-left: var(--space-base);
}

.margin-x-m {
    margin-right: var(--space-m);
    margin-left: var(--space-m);
}

.margin-x-l {
    margin-right: var(--space-l);
    margin-left: var(--space-l);
}

.margin-x-xl {
    margin-right: var(--space-xl);
    margin-left: var(--space-xl);
}

.margin-x-xxl {
    margin-right: var(--space-xxl);
    margin-left: var(--space-xxl);
}

/* ================================================================ */
/*  $6.4 - Styles - Border Radius                                   */
/* ================================================================ */
.border-radius-none {
    -webkit-border-radius: var(--border-radius-none);
    border-radius: var(--border-radius-none);
}

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

.border-radius-rounded {
    -webkit-border-radius: var(--border-radius-rounded);
    border-radius: var(--border-radius-rounded);
}

.border-radius-circle {
    -webkit-border-radius: var(--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 {
    -webkit-box-shadow: var(--shadow-none);
    box-shadow: var(--shadow-none);
}

.shadow-xs {
    -webkit-box-shadow: var(--shadow-xs);
    box-shadow: var(--shadow-xs);
}

.shadow-s {
    -webkit-box-shadow: var(--shadow-s);
    box-shadow: var(--shadow-s);
}

.shadow-m {
    -webkit-box-shadow: var(--shadow-m);
    box-shadow: var(--shadow-m);
}

.shadow-l {
    -webkit-box-shadow: var(--shadow-l);
    box-shadow: var(--shadow-l);
}

.shadow-xl {
    -webkit-box-shadow: var(--shadow-xl);
    box-shadow: var(--shadow-xl);
}

/* ================================================================ */
/*  $6.7 - Styles - Display Flex Properties                         */
/* ================================================================ */
.display-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.align-items-center {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.justify-content-flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.justify-content-space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.justify-content-space-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.justify-content-space-evenly {
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

.flex1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
        -webkit-flex: 1;
        flex: 1;
}

.flex2 {
    -webkit-box-flex: 2;
    -ms-flex: 2;
        -webkit-flex: 2;
        flex: 2;
}

.flex3 {
    -webkit-box-flex: 3;
    -ms-flex: 3;
        -webkit-flex: 3;
        flex: 3;
}

.flex-direction-column {
        -webkit-flex-direction: column;
        flex-direction: column;

    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
}

.flex-direction-row {
        -webkit-flex-direction: row;
        flex-direction: row;

    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
}

.flex-direction-row-reverse {
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;

    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row-reverse;
}

.top-left {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-align: start;
    -webkit-box-pack: start;
    -ms-flex-align: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.top-center {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-align: start;
    -webkit-box-pack: center;
    -ms-flex-align: start;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.top-right {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-align: start;
    -webkit-box-pack: end;
    -ms-flex-align: start;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.center-left {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: start;
    -ms-flex-align: center;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.center {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.center-right {
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-box-pack: end;
    -ms-flex-align: center;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.bottom-left {
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-box-align: end;
    -webkit-box-pack: start;
    -ms-flex-align: end;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.bottom-center {
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-box-align: end;
    -webkit-box-pack: center;
    -ms-flex-align: end;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.bottom-right {
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-box-align: end;
    -webkit-box-pack: end;
    -ms-flex-align: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

/* ================================================================ */
/*  $6.8 - Styles - Others                                          */
/* ================================================================ */
.display-block {
    display: block;
}

.ph:empty,
.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;
}

.sticky {
    position: -webkit-sticky;
    position:         sticky;
}

.img-cover {
    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;
}

[disabled='disabled'],
[readonly='readonly'],
textarea[readonly='readonly'] {
    color: var(--color-neutral-5);
    pointer-events: none;

    background-color: var(--color-neutral-4);

    border: 1px solid var(--color-neutral-4);
}

@font-face {
    font-family: 'SilkWeb4';
    font-weight: normal;
    font-style: normal;

    src: url('SilkWeb4.eot#iefix') format('embedded-opentype'), url('SilkWeb4.ttf') format('truetype'), url('SilkWeb4.woff') format('woff'), url('SilkWeb4.svg#SilkWeb4') format('svg');
    src: url('SilkWeb4.eot');
}

[class^='icon-'],
[class*=' icon-'] {
    line-height: 1;
    font-family: 'SilkWeb4' !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: none;
}

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

/* ================================================================ */
/*  $7 - Right-to-Left Mode                                         */
/* ================================================================ */
/* ================================================================ */
/*  $7.1 - RTL Mode - Page Layout / HTML Elements                   */
/* ================================================================ */
.is-rtl {
    direction: rtl;
}

.is-rtl .app-logo {
    margin-right: var(--space-none);
    margin-left: var(--space-s);
}

.is-rtl .Menu_TopMenu .fa {
    margin-right: var(--space-none);
    margin-left: var(--space-s);
}

.is-rtl .Menu_DropDownPanel .fa {
    margin-right: var(--space-none);
    margin-left: var(--space-s);
}

.is-rtl .Menu_DropDownPanel a {
    padding: var(--space-s) var(--space-l) var(--space-s) var(--space-base);

    text-align: right;
}

.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 .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-right: 0;
    margin-left: var(--space-m);
}

.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: -300px;
    left: 0;
}

.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 {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

.is-rtl .alert-icon {
    margin-right: var(--space-none);
    margin-left: var(--space-base);
}

.is-rtl .alert-close {
    margin-right: var(--space-base);
    margin-left: 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-image.padding-none {
    padding: 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);
}

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

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

.is-rtl .animated-label-text {
    right: 16px;
    left: auto;
}

.is-rtl .animated-label-inline .animated-label-text {
    right: 0;
    left: auto;
}

.is-rtl .button-group label:first-child .btn {
    -webkit-border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
    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 {
    -webkit-border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
    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);
}

.is-rtl .button-group label:last-child .btn {
    border-right: 1px solid var(--color-primary);
    border-left: 1px solid var(--color-primary);
}

.is-rtl .pika-next {
    margin-left: var(--space-none);

    -webkit-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg);
}

.is-rtl .pika-prev {
    margin-left: var(--space-base);

    -webkit-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg);
}

.is-rtl .pika-select-month {
    margin-right: var(--space-none);
}

.is-rtl .pika-select-year {
    margin-right: var(--space-base);
}

.is-rtl .file-upload .file-upload-message {
    padding-right: var(--space-base);
    padding-left: var(--space-none);
}

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

.is-rtl .input-with-icon.flex-direction-row-reverse .input-with-icon-content-icon:not(:empty) + .input-with-icon-input input {
    padding-right: var(--space-base);
    padding-left: var(--space-xl);
}

.is-rtl .input-with-icon.flex-direction-row .input-with-icon-content-icon.search-actions {
    right: auto;
    left: 0;
}

.is-rtl .range-slider-label {
    margin-right: var(--space-s);
    margin-left: var(--space-none);
}

.is-rtl .toggle-button .checkbox:after {
    -webkit-transform: translateX(22px);
            -ms-transform: translateX(22px);
            transform: translateX(22px);
}

.is-rtl .toggle-button .checkbox:checked:after {
    -webkit-transform: translateX(4px);
            -ms-transform: translateX(4px);
            transform: translateX(4px);
}

.is-rtl .progress-container .progress-title {
    text-align: right;
}

.is-rtl .progress-container .progress-value {
    text-align: left;
}

.is-rtl .section-index {
    border-right: var(--border-size-s) solid var(--color-neutral-4);
    border-left: none;
}

.is-rtl a.section-index-item.is--active {
    border-right: var(--border-size-m) solid var(--color-primary);
    border-left: none;
}

.is-rtl .section-index a {
    padding: var(--space-none) var(--space-base) var(--space-none) var(--space-none);

    border-right: var(--border-size-m) solid transparent;
    border-left: none;
}

.is-rtl .section-index a:visited {
    padding: var(--space-none) var(--space-base) var(--space-none) var(--space-none);

    border-right: var(--border-size-m) solid transparent;
    border-left: none;
}

.is-rtl .sidebar-container {
    -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);

    right: auto;
    left: 0;
}

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

.is-rtl .tabs-header-item {
    margin-right: var(--space-l);
    margin-left: var(--space-none);
}

.is-rtl .tabs-header-item:first-child {
    margin-right: var(--space-none);
}

.is-rtl .tabs-header-item .badge {
    margin-right: var(--space-s);
    margin-left: var(--space-none);
}

.is-rtl .tabs-header-item .fa-fw {
    margin-right: var(--space-none);
    margin-left: var(--space-s);
}

.is-rtl .tabs.tabs-vertical .tabs-header-item {
    margin-right: var(--space-none);
    padding: var(--space-s) var(--space-none) var(--space-s) var(--space-m);

    border-right: var(--border-size-none) solid transparent;
    border-left: var(--border-size-m) solid transparent;
}

.is-rtl .tabs.tabs-vertical .tabs-header-item.active {
    border-right: var(--border-size-none) solid transparent;
    border-left: var(--border-size-m) solid var(--color-primary);
}

.is-rtl .tabs.tabs-vertical .tabs-content {
    margin-right: -1px;
    margin-left: 0;

    border-right: var(--border-size-s) solid var(--color-neutral-5);
    border-left: var(--border-size-none) solid transparent;
}

.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 {
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-none);

    text-align: left;

    border-right: var(--border-size-m) solid transparent;
    border-left: var(--border-size-none) solid transparent;

    -webkit-box-pack: end;

    -webkit-justify-content: flex-end;

    -ms-flex-pack: end;

    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 {
    margin-right: 0;
    margin-left: -1px;

    border-right: var(--border-size-none) solid transparent;
    border-left: var(--border-size-s) solid var(--color-neutral-5);
}

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

.is-rtl .timeline-item-left {
    margin-right: var(--space-none);
    margin-left: var(--space-base);
}

.is-rtl .wizard-item .wizard-item-icon-wraper:before {
    right: auto;
    left: -webkit-calc(50% + 12px);
    left: calc(50% + 12px);
}

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

.is-rtl.tablet.portrait .scrollable-row .TableRecords thead th,
.is-rtl.phone .scrollable-row .TableRecords thead th {
    border-right: var(--border-size-none) solid var(--color-neutral-4);
    border-left: var(--border-size-s) 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 {
    right: auto;
    left: 16px;
}

.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-right: 0;
    margin-left: 40px;
}

.is-rtl div.Feedback_AjaxWait:before {
    -webkit-animation: ajax-wait-rtl 1700ms linear infinite;
            animation: ajax-wait-rtl 1700ms linear infinite;
}

.is-rtl div.Feedback_Message_Wrapper [class*='Feedback_Message_'] span {
    padding-right: var(--space-base);
    padding-left: var(--space-none);
}

.is-rtl a.Feedback_Message_Wrapper_Close {
    right: auto;
    left: 8px;
}

.is-rtl a.ListNavigation_Previous {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.is-rtl span.ListNavigation_DisabledPrevious,
.is-rtl a.ListNavigation_Next,
.is-rtl span.ListNavigation_DisabledNext {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.is-rtl .padding-right-none {
    padding-right: var(--space-none);
    padding-left: var(--space-none);
}

.is-rtl .padding-right-xs {
    padding-right: var(--space-none);
    padding-left: var(--space-xs);
}

.is-rtl .padding-right-s {
    padding-right: var(--space-none);
    padding-left: var(--space-s);
}

.is-rtl .padding-right-base {
    padding-right: var(--space-none);
    padding-left: var(--space-base);
}

.is-rtl .padding-right-m {
    padding-right: var(--space-none);
    padding-left: var(--space-m);
}

.is-rtl .padding-right-l {
    padding-right: var(--space-none);
    padding-left: var(--space-l);
}

.is-rtl .padding-right-xl {
    padding-right: var(--space-none);
    padding-left: var(--space-xl);
}

.is-rtl .padding-right-xxl {
    padding-right: var(--space-none);
    padding-left: var(--space-xxl);
}

.is-rtl .padding-left-none {
    padding-right: var(--space-none);
    padding-left: var(--space-none);
}

.is-rtl .padding-left-xs {
    padding-right: var(--space-xs);
    padding-left: var(--space-none);
}

.is-rtl .padding-left-s {
    padding-right: var(--space-s);
    padding-left: var(--space-none);
}

.is-rtl .padding-left-base {
    padding-right: var(--space-base);
    padding-left: var(--space-none);
}

.is-rtl .padding-left-m {
    padding-right: var(--space-m);
    padding-left: var(--space-none);
}

.is-rtl .padding-left-l {
    padding-right: var(--space-l);
    padding-left: var(--space-none);
}

.is-rtl .padding-left-xl {
    padding-right: var(--space-xl);
    padding-left: var(--space-none);
}

.is-rtl .padding-left-xxl {
    padding-right: var(--space-xxl);
    padding-left: var(--space-none);
}

.is-rtl .margin-right-none {
    margin-right: var(--space-none);
    margin-left: var(--space-none);
}

.is-rtl .margin-right-xs {
    margin-right: var(--space-none);
    margin-left: var(--space-xs);
}

.is-rtl .margin-right-s {
    margin-right: var(--space-none);
    margin-left: var(--space-s);
}

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

.is-rtl .margin-right-m {
    margin-right: var(--space-none);
    margin-left: var(--space-m);
}

.is-rtl .margin-right-l {
    margin-right: var(--space-none);
    margin-left: var(--space-l);
}

.is-rtl .margin-right-xl {
    margin-right: var(--space-none);
    margin-left: var(--space-xl);
}

.is-rtl .margin-right-xxl {
    margin-right: var(--space-none);
    margin-left: var(--space-xxl);
}

.is-rtl .margin-left-none {
    margin-right: var(--space-none);
    margin-left: var(--space-none);
}

.is-rtl .margin-left-xs {
    margin-right: var(--space-xs);
    margin-left: var(--space-none);
}

.is-rtl .margin-left-s {
    margin-right: var(--space-s);
    margin-left: var(--space-none);
}

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

.is-rtl .margin-left-m {
    margin-right: var(--space-m);
    margin-left: var(--space-none);
}

.is-rtl .margin-left-l {
    margin-right: var(--space-l);
    margin-left: var(--space-none);
}

.is-rtl .margin-left-xl {
    margin-right: var(--space-xl);
    margin-left: var(--space-none);
}

.is-rtl .margin-left-xxl {
    margin-right: var(--space-xxl);
    margin-left: var(--space-none);
}

.is-rtl [align='right'],
.is-rtl .text-align-right {
    text-align: left;
}

.is-rtl [align='left'],
.is-rtl .text-align-left {
    text-align: right;
}

/* ================================================================ */
/*  $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 - InputWithIcons */
/* $7.3.6 - RTL Mode - Patterns - Controls - RangeSlider */
/* $7.3.7 - RTL Mode - Patterns - Controls - ToogleButton */
/* ================================================================ */
/*  $7.4 - RTL Mode - Patterns - Numbers                            */
/* ================================================================ */
/* $7.4.1 - RTL Mode - Patterns - Numbers - ProgressBar */
/* ================================================================ */
/*  $7.5 - RTL Mode - Patterns - Navigation                         */
/* ================================================================ */
/* $7.5.1 - RTL Mode - Patterns - Navigation - SectionIndex */
/* $7.5.2 - RTL Mode - Patterns - Navigation - Sidebar */
/* $7.5.3 - RTL Mode - Patterns - Navigation - Tabs */
/* $7.5.4 - RTL Mode - Patterns - Navigation - Timeline */
/* $7.5.5 - RTL Mode - Patterns - Navigation - Wizard */
/* ================================================================ */
/*  $7.6 - RTL Mode - Patterns - Responsive                         */
/* ================================================================ */
/* $7.6.1 - RTL Mode - Patterns - Responsive - ResponsiveTableRecords */
/* ================================================================ */
/*  $7.7 - RTL Mode - Widgets & RichWidgets                         */
/* ================================================================ */
/* $7.7.1 - RTL Mode - Widgets - TableRecords  */
/* $7.7.2 - RTL Mode - RichWidgets - FeedbackAjaxWait  */
@-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% {
        -webkit-transform: translateX(105vw) translateZ(0) scaleX(1);
        transform: translateX(105vw) translateZ(0) scaleX(1);
    }
    25% {
        -webkit-transform: translateX(55vw) translateZ(0) scaleX(1.5);
        transform: translateX(55vw) translateZ(0) scaleX(1.5);
    }
    50% {
        -webkit-transform: translateX(0) translateZ(0) scaleX(1.5);
        transform: translateX(0) translateZ(0) scaleX(1.5);
    }
    75% {
        -webkit-transform: translateX(-55vw) translateZ(0) scaleX(.5);
        transform: translateX(-55vw) translateZ(0) scaleX(.5);
    }
    100% {
        -webkit-transform: translateX(-105vw) translateZ(0) scaleX(.2);
        transform: translateX(-105vw) translateZ(0) scaleX(.2);
    }
}

/* $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 Right  */
/* $7.8.5 - RTL Mode - Styles - Others  */
/* 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,
fa-acorn, fa-acquisitions-incorporated, fa-ad, fa-address-book, fa-address-card, fa-adjust, fa-adn, fa-adversal, fa-affiliatetheme, fa-air-freshener, fa-alarm-clock, fa-algolia, fa-alicorn, fa-align-center, fa-align-justify, 
fa-align-left, fa-align-right, fa-alipay, fa-allergies, fa-amazon, fa-amazon-pay, fa-ambulance, fa-american-sign-language-interpreting, fa-amilia, fa-analytics, fa-anchor, fa-android, fa-angellist, fa-angle-double-down, fa-angle-double-left, 
fa-angle-double-right, fa-angle-double-up, fa-angle-down, fa-angle-left, fa-angle-right, fa-angle-up, fa-angry, fa-angrycreative, fa-angular, fa-ankh, fa-app-store, fa-app-store-ios, fa-apper, fa-apple, fa-apple-alt, fa-apple-crate,
fa-apple-pay, fa-archive, fa-archway, fa-arrow-alt-circle-down, fa-arrow-alt-circle-left, fa-arrow-alt-circle-right, fa-arrow-alt-circle-up, fa-arrow-alt-down, fa-arrow-alt-from-bottom, fa-arrow-alt-from-left, fa-arrow-alt-from-right, 
fa-arrow-alt-from-top, fa-arrow-alt-left, fa-arrow-alt-right, fa-arrow-alt-square-down, fa-arrow-alt-square-left, fa-arrow-alt-square-right, fa-arrow-alt-square-up, fa-arrow-alt-to-bottom, fa-arrow-alt-to-left, fa-arrow-alt-to-right, 
fa-arrow-alt-to-top, fa-arrow-alt-up, fa-arrow-circle-down, fa-arrow-circle-left, fa-arrow-circle-right, fa-arrow-circle-up, fa-arrow-down, fa-arrow-from-bottom, fa-arrow-from-left, fa-arrow-from-right, fa-arrow-from-top, fa-arrow-left, 
fa-arrow-right, fa-arrow-square-down, fa-arrow-square-left, fa-arrow-square-right, fa-arrow-square-up, fa-arrow-to-bottom, fa-arrow-to-left, fa-arrow-to-right, fa-arrow-to-top, fa-arrow-up, fa-arrows, fa-arrows-alt, fa-arrows-alt-h, 
fa-arrows-alt-v, fa-arrows-h, fa-arrows-v, fa-assistive-listening-systems, fa-asterisk, fa-asymmetrik, fa-at, fa-atlas, fa-atom, fa-atom-alt, fa-audible, fa-audio-description, fa-autoprefixer, fa-avianex, fa-aviato, fa-award, fa-aws, 
fa-axe, fa-axe-battle, fa-backpack, fa-backspace, fa-backward, fa-badge, fa-badge-check, fa-badge-dollar, fa-badge-percent, fa-badger-honey, fa-balance-scale, fa-balance-scale-left, fa-balance-scale-right, fa-ballot, fa-ballot-check, 
fa-ban, fa-band-aid, fa-bandcamp, fa-barcode, fa-barcode-alt, fa-barcode-read, fa-barcode-scan, fa-bars, fa-baseball, fa-baseball-ball, fa-basketball-ball, fa-basketball-hoop, fa-bat, fa-bath, fa-battery-bolt, fa-battery-empty,
fa-battery-full, fa-battery-half, fa-battery-quarter, fa-battery-slash, fa-battery-three-quarters, fa-bed, fa-beer, fa-behance, fa-behance-square, fa-bell, fa-bell-school, fa-bell-school-slash, fa-bell-slash, fa-bezier-curve, 
fa-bible, fa-bicycle, fa-bimobject, fa-binoculars, fa-birthday-cake, fa-bitbucket, fa-bitcoin, fa-bity, fa-black-tie, fa-blackberry, fa-blanket, fa-blender, fa-blender-phone, fa-blind, fa-blogger, fa-blogger-b, fa-bluetooth, 
fa-bluetooth-b, fa-bold, fa-bolt, fa-bomb, fa-bone, fa-bone-break, fa-bong, fa-book, fa-book-alt, fa-book-dead, fa-book-heart, fa-book-open, fa-book-reader, fa-book-spells, fa-bookmark, fa-books, fa-booth-curtain, fa-bow-arrow, 
fa-bowling-ball, fa-bowling-pins, fa-box, fa-box-alt, fa-box-ballot, fa-box-check, fa-box-fragile, fa-box-full, fa-box-heart, fa-box-open, fa-box-up, fa-box-usd, fa-boxes, fa-boxes-alt, fa-boxing-glove, fa-braille, fa-brain, 
fa-briefcase, fa-briefcase-medical, fa-broadcast-tower, fa-broom, fa-browser, fa-brush, fa-btc, fa-bug, fa-building, fa-bullhorn, fa-bullseye, fa-bullseye-arrow, fa-bullseye-pointer, fa-burn, fa-buromobelexperte, fa-bus, fa-bus-alt, 
fa-bus-school, fa-business-time, fa-buysellads, fa-cabinet-filing, fa-calculator, fa-calculator-alt, fa-calendar, fa-calendar-alt, fa-calendar-check, fa-calendar-edit, fa-calendar-exclamation, fa-calendar-minus, fa-calendar-plus, 
fa-calendar-star, fa-calendar-times, fa-camera, fa-camera-alt, fa-camera-retro, fa-campfire, fa-campground, fa-candle-holder, fa-candy-corn, fa-cannabis, fa-capsules, fa-car, fa-car-alt, fa-car-battery, fa-car-bump, fa-car-crash, 
fa-car-garage, fa-car-mechanic, fa-car-side, fa-car-tilt, fa-car-wash, fa-caret-circle-down, fa-caret-circle-left, fa-caret-circle-right, fa-caret-circle-up, fa-caret-down, fa-caret-left, fa-caret-right, fa-caret-square-down, 
fa-caret-square-left, fa-caret-square-right, fa-caret-square-up, fa-caret-up, fa-cart-arrow-down, fa-cart-plus, fa-cat, fa-cauldron, fa-cc-amazon-pay, fa-cc-amex, fa-cc-apple-pay, fa-cc-diners-club, fa-cc-discover, fa-cc-jcb, 
fa-cc-mastercard, fa-cc-paypal, fa-cc-stripe, fa-cc-visa, fa-centercode, fa-certificate, fa-chair, fa-chair-office, fa-chalkboard, fa-chalkboard-teacher, fa-charging-station, fa-chart-area, fa-chart-bar, fa-chart-line, fa-chart-line-down, 
fa-chart-pie, fa-chart-pie-alt, fa-check, fa-check-circle, fa-check-double, fa-check-square, fa-chess, fa-chess-bishop, fa-chess-bishop-alt, fa-chess-board, fa-chess-clock, fa-chess-clock-alt, fa-chess-king, fa-chess-king-alt, 
fa-chess-knight, fa-chess-knight-alt, fa-chess-pawn, fa-chess-pawn-alt, fa-chess-queen, fa-chess-queen-alt, fa-chess-rook, fa-chess-rook-alt, fa-chevron-circle-down, fa-chevron-circle-left, fa-chevron-circle-right, fa-chevron-circle-up, 
fa-chevron-double-down, fa-chevron-double-left, fa-chevron-double-right, fa-chevron-double-up, fa-chevron-down, fa-chevron-left, fa-chevron-right, fa-chevron-square-down, fa-chevron-square-left, fa-chevron-square-right, 
fa-chevron-square-up, fa-chevron-up, fa-child, fa-chrome, fa-church, fa-circle, fa-circle-notch, fa-city, fa-claw-marks, fa-clipboard, fa-clipboard-check, fa-clipboard-list, fa-clipboard-list-check, fa-clipboard-prescription, 
fa-clock, fa-clone, fa-closed-captioning, fa-cloud, fa-cloud-download, fa-cloud-download-alt, fa-cloud-drizzle, fa-cloud-hail, fa-cloud-hail-mixed, fa-cloud-meatball, fa-cloud-moon, fa-cloud-moon-rain, fa-cloud-rain, 
fa-cloud-rainbow, fa-cloud-showers, fa-cloud-showers-heavy, fa-cloud-sleet, fa-cloud-snow, fa-cloud-sun, fa-cloud-sun-rain, fa-cloud-upload, fa-cloud-upload-alt, fa-clouds, fa-clouds-moon, fa-clouds-sun, fa-cloudscale, 
fa-cloudsmith, fa-cloudversify, fa-club, fa-cocktail, fa-code, fa-code-branch, fa-code-commit, fa-code-merge, fa-codepen, fa-codiepie, fa-coffee, fa-coffee-togo, fa-coffin, fa-cog, fa-cogs, fa-coins, fa-columns, fa-comment, 
fa-comment-alt, fa-comment-alt-check, fa-comment-alt-dollar, fa-comment-alt-dots, fa-comment-alt-edit, fa-comment-alt-exclamation, fa-comment-alt-lines, fa-comment-alt-minus, fa-comment-alt-plus, fa-comment-alt-slash, 
fa-comment-alt-smile, fa-comment-alt-times, fa-comment-check, fa-comment-dollar, fa-comment-dots, fa-comment-edit, fa-comment-exclamation, fa-comment-lines, fa-comment-minus, fa-comment-plus, fa-comment-slash, fa-comment-smile, 
fa-comment-times, fa-comments, fa-comments-alt, fa-comments-alt-dollar, fa-comments-dollar, fa-compact-disc, fa-compass, fa-compass-slash, fa-compress, fa-compress-alt, fa-compress-wide, fa-concierge-bell, fa-connectdevelop, 
fa-container-storage, fa-contao, fa-conveyor-belt, fa-conveyor-belt-alt, fa-cookie, fa-cookie-bite, fa-copy, fa-copyright, fa-corn, fa-couch, fa-cow, fa-cpanel, fa-creative-commons, fa-creative-commons-by, fa-creative-commons-nc, 
fa-creative-commons-nc-eu, fa-creative-commons-nc-jp, fa-creative-commons-nd, fa-creative-commons-pd, fa-creative-commons-pd-alt, fa-creative-commons-remix, fa-creative-commons-sa, fa-creative-commons-sampling, 
fa-creative-commons-sampling-plus, fa-creative-commons-share, fa-creative-commons-zero, fa-credit-card, fa-credit-card-blank, fa-credit-card-front, fa-cricket, fa-critical-role, fa-crop, fa-crop-alt, fa-cross, fa-crosshairs, 
fa-crow, fa-crown, fa-css3, fa-css3-alt, fa-cube, fa-cubes, fa-curling, fa-cut, fa-cuttlefish, fa-d-and-d, fa-d-and-d-beyond, fa-dagger, fa-dashcube, fa-database, fa-deaf, fa-delicious, fa-democrat, fa-deploydog, fa-deskpro, 
fa-desktop, fa-desktop-alt, fa-dev, fa-deviantart, fa-dewpoint, fa-dharmachakra, fa-diagnoses, fa-diamond, fa-dice, fa-dice-d10, fa-dice-d12, fa-dice-d20, fa-dice-d4, fa-dice-d6, fa-dice-d8, fa-dice-five, fa-dice-four, 
fa-dice-one, fa-dice-six, fa-dice-three, fa-dice-two, fa-digg, fa-digital-ocean, fa-digital-tachograph, fa-diploma, fa-directions, fa-discord, fa-discourse, fa-divide, fa-dizzy, fa-dna, fa-do-not-enter, fa-dochub, fa-docker, 
fa-dog, fa-dog-leashed, fa-dollar-sign, fa-dolly, fa-dolly-empty, fa-dolly-flatbed, fa-dolly-flatbed-alt, fa-dolly-flatbed-empty, fa-donate, fa-door-closed, fa-door-open, fa-dot-circle, fa-dove, fa-download, fa-draft2digital, 
fa-drafting-compass, fa-dragon, fa-draw-circle, fa-draw-polygon, fa-draw-square, fa-dribbble, fa-dribbble-square, fa-dropbox, fa-drum, fa-drum-steelpan, fa-drumstick, fa-drumstick-bite, fa-drupal, fa-duck, fa-dumbbell, 
fa-dungeon, fa-dyalog, fa-ear, fa-earlybirds, fa-ebay, fa-eclipse, fa-eclipse-alt, fa-edge, fa-edit, fa-eject, fa-elementor, fa-elephant, fa-ellipsis-h, fa-ellipsis-h-alt, fa-ellipsis-v, fa-ellipsis-v-alt, fa-ello, fa-ember, 
fa-empire, fa-empty-set, fa-engine-warning, fa-envelope, fa-envelope-open, fa-envelope-open-dollar, fa-envelope-open-text, fa-envelope-square, fa-envira, fa-equals, fa-eraser, fa-erlang, fa-ethereum, fa-etsy, fa-euro-sign, 
fa-exchange, fa-exchange-alt, fa-exclamation, fa-exclamation-circle, fa-exclamation-square, fa-exclamation-triangle, fa-expand, fa-expand-alt, fa-expand-arrows, fa-expand-arrows-alt, fa-expand-wide, fa-expeditedssl, 
fa-external-link, fa-external-link-alt, fa-external-link-square, fa-external-link-square-alt, fa-eye, fa-eye-dropper, fa-eye-evil, fa-eye-slash, fa-facebook, fa-facebook-f, fa-facebook-messenger, fa-facebook-square, 
fa-fantasy-flight-games, fa-fast-backward, fa-fast-forward, fa-fax, fa-feather, fa-feather-alt, fa-female, fa-field-hockey, fa-fighter-jet, fa-file, fa-file-alt, fa-file-archive, fa-file-audio, fa-file-certificate, 
fa-file-chart-line, fa-file-chart-pie, fa-file-check, fa-file-code, fa-file-contract, fa-file-csv, fa-file-download, fa-file-edit, fa-file-excel, fa-file-exclamation, fa-file-export, fa-file-image, fa-file-import, 
fa-file-invoice, fa-file-invoice-dollar, fa-file-medical, fa-file-medical-alt, fa-file-minus, fa-file-pdf, fa-file-plus, fa-file-powerpoint, fa-file-prescription, fa-file-signature, fa-file-spreadsheet, fa-file-times, 
fa-file-upload, fa-file-user, fa-file-video, fa-file-word, fa-fill, fa-fill-drip, fa-film, fa-film-alt, fa-filter, fa-fingerprint, fa-fire, fa-fire-extinguisher, fa-fire-smoke, fa-firefox, fa-first-aid, fa-first-order, 
fa-first-order-alt, fa-firstdraft, fa-fish, fa-fist-raised, fa-flag, fa-flag-alt, fa-flag-checkered, fa-flag-usa, fa-flame, fa-flask, fa-flask-poison, fa-flask-potion, fa-flickr, fa-flipboard, fa-flushed, fa-fly, fa-fog, 
fa-folder, fa-folder-minus, fa-folder-open, fa-folder-plus, fa-folder-times, fa-folders, fa-font, fa-font-awesome, fa-font-awesome-alt, fa-font-awesome-flag, fa-font-awesome-logo-full, fa-fonticons, fa-fonticons-fi, 
fa-football-ball, fa-football-helmet, fa-forklift, fa-fort-awesome, fa-fort-awesome-alt, fa-forumbee, fa-forward, fa-foursquare, fa-fragile, fa-free-code-camp, fa-freebsd, fa-frog, fa-frown, fa-frown-open, fa-fulcrum, 
fa-function, fa-funnel-dollar, fa-futbol, fa-galactic-republic, fa-galactic-senate, fa-gamepad, fa-gas-pump, fa-gas-pump-slash, fa-gavel, fa-gem, fa-genderless, fa-get-pocket, fa-gg, fa-gg-circle, fa-ghost, fa-gift, 
fa-gift-card, fa-git, fa-git-square, fa-github, fa-github-alt, fa-github-square, fa-gitkraken, fa-gitlab, fa-gitter, fa-glass-martini, fa-glass-martini-alt, fa-glasses, fa-glasses-alt, fa-glide, fa-glide-g, fa-globe, 
fa-globe-africa, fa-globe-americas, fa-globe-asia, fa-globe-stand, fa-gofore, fa-golf-ball, fa-golf-club, fa-goodreads, fa-goodreads-g, fa-google, fa-google-drive, fa-google-play, fa-google-plus, fa-google-plus-g, 
fa-google-plus-square, fa-google-wallet, fa-gopuram, fa-graduation-cap, fa-gratipay, fa-grav, fa-greater-than, fa-greater-than-equal, fa-grimace, fa-grin, fa-grin-alt, fa-grin-beam, fa-grin-beam-sweat, fa-grin-hearts, 
fa-grin-squint, fa-grin-squint-tears, fa-grin-stars, fa-grin-tears, fa-grin-tongue, fa-grin-tongue-squint, fa-grin-tongue-wink, fa-grin-wink, fa-grip-horizontal, fa-grip-vertical, fa-gripfire, fa-grunt, fa-gulp, 
fa-h-square, fa-h1, fa-h2, fa-h3, fa-hacker-news, fa-hacker-news-square, fa-hackerrank, fa-hammer, fa-hammer-war, fa-hamsa, fa-hand-heart, fa-hand-holding, fa-hand-holding-box, fa-hand-holding-heart, fa-hand-holding-magic, 
fa-hand-holding-seedling, fa-hand-holding-usd, fa-hand-holding-water, fa-hand-lizard, fa-hand-paper, fa-hand-peace, fa-hand-point-down, fa-hand-point-left, fa-hand-point-right, fa-hand-point-up, fa-hand-pointer, 
fa-hand-receiving, fa-hand-rock, fa-hand-scissors, fa-hand-spock, fa-hands, fa-hands-heart, fa-hands-helping, fa-hands-usd, fa-handshake, fa-handshake-alt, fa-hanukiah, fa-hashtag, fa-hat-witch, fa-hat-wizard, 
fa-haykal, fa-hdd, fa-head-side, fa-head-vr, fa-heading, fa-headphones, fa-headphones-alt, fa-headset, fa-heart, fa-heart-circle, fa-heart-rate, fa-heart-square, fa-heartbeat, fa-helicopter, fa-helmet-battle, 
fa-hexagon, fa-highlighter, fa-hiking, fa-hippo, fa-hips, fa-hire-a-helper, fa-history, fa-hockey-mask, fa-hockey-puck, fa-hockey-sticks, fa-home, fa-home-heart, fa-hood-cloak, fa-hooli, fa-hornbill, fa-horse, 
fa-hospital, fa-hospital-alt, fa-hospital-symbol, fa-hot-tub, fa-hotel, fa-hotjar, fa-hourglass, fa-hourglass-end, fa-hourglass-half, fa-hourglass-start, fa-house-damage, fa-house-flood, fa-houzz, fa-hryvnia, 
fa-html5, fa-hubspot, fa-humidity, fa-hurricane, fa-i-cursor, fa-id-badge, fa-id-card, fa-id-card-alt, fa-image, fa-images, fa-imdb, fa-inbox, fa-inbox-in, fa-inbox-out, fa-indent, fa-industry, fa-industry-alt, 
fa-infinity, fa-info, fa-info-circle, fa-info-square, fa-inhaler, fa-instagram, fa-integral, fa-internet-explorer, fa-intersection, fa-inventory, fa-ioxhost, fa-italic, fa-itunes, fa-itunes-note, fa-jack-o-lantern, 
fa-java, fa-jedi, fa-jedi-order, fa-jenkins, fa-joget, fa-joint, fa-joomla, fa-journal-whills, fa-js, fa-js-square, fa-jsfiddle, fa-kaaba, fa-kaggle, fa-key, fa-key-skeleton, fa-keybase, fa-keyboard, fa-keycdn, 
fa-keynote, fa-khanda, fa-kickstarter, fa-kickstarter-k, fa-kidneys, fa-kiss, fa-kiss-beam, fa-kiss-wink-heart, fa-kite, fa-kiwi-bird, fa-knife-kitchen, fa-korvue, fa-lambda, fa-lamp, fa-landmark, fa-landmark-alt, 
fa-language, fa-laptop, fa-laptop-code, fa-laravel, fa-lastfm, fa-lastfm-square, fa-laugh, fa-laugh-beam, fa-laugh-squint, fa-laugh-wink, fa-layer-group, fa-layer-minus, fa-layer-plus, fa-leaf, fa-leaf-heart, 
fa-leaf-maple, fa-leaf-oak, fa-leanpub, fa-lemon, fa-less, fa-less-than, fa-less-than-equal, fa-level-down, fa-level-down-alt, fa-level-up, fa-level-up-alt, fa-life-ring, fa-lightbulb, fa-lightbulb-dollar, 
fa-lightbulb-exclamation, fa-lightbulb-on, fa-lightbulb-slash, fa-line, fa-link, fa-linkedin, fa-linkedin-in, fa-linode, fa-linux, fa-lips, fa-lira-sign, fa-list, fa-list-alt, fa-list-ol, fa-list-ul, fa-location, 
fa-location-arrow, fa-location-circle, fa-location-slash, fa-lock, fa-lock-alt, fa-lock-open, fa-lock-open-alt, fa-long-arrow-alt-down, fa-long-arrow-alt-left, fa-long-arrow-alt-right, fa-long-arrow-alt-up, 
fa-long-arrow-down, fa-long-arrow-left, fa-long-arrow-right, fa-long-arrow-up, fa-loveseat, fa-low-vision, fa-luchador, fa-luggage-cart, fa-lungs, fa-lyft, fa-mace, fa-magento, fa-magic, fa-magnet, fa-mail-bulk, 
fa-mailchimp, fa-male, fa-mandalorian, fa-mandolin, fa-map, fa-map-marked, fa-map-marked-alt, fa-map-marker, fa-map-marker-alt, fa-map-marker-alt-slash, fa-map-marker-check, fa-map-marker-edit, fa-map-marker-exclamation, 
fa-map-marker-minus, fa-map-marker-plus, fa-map-marker-question, fa-map-marker-slash, fa-map-marker-smile, fa-map-marker-times, fa-map-pin, fa-map-signs, fa-markdown, fa-marker, fa-mars, fa-mars-double, fa-mars-stroke, 
fa-mars-stroke-h, fa-mars-stroke-v, fa-mask, fa-mastodon, fa-maxcdn, fa-medal, fa-medapps, fa-medium, fa-medium-m, fa-medkit, fa-medrt, fa-meetup, fa-megaphone, fa-megaport, fa-meh, fa-meh-blank, fa-meh-rolling-eyes, 
fa-memory, fa-menorah, fa-mercury, fa-meteor, fa-microchip, fa-microphone, fa-microphone-alt, fa-microphone-alt-slash, fa-microphone-slash, fa-microscope, fa-microsoft, fa-mind-share, fa-minus, fa-minus-circle, fa-minus-hexagon, 
fa-minus-octagon, fa-minus-square, fa-mix, fa-mixcloud, fa-mizuni, fa-mobile, fa-mobile-alt, fa-mobile-android, fa-mobile-android-alt, fa-modx, fa-monero, fa-money-bill, fa-money-bill-alt, fa-money-bill-wave, fa-money-bill-wave-alt, 
fa-money-check, fa-money-check-alt, fa-monitor-heart-rate, fa-monkey, fa-monument, fa-moon, fa-moon-cloud, fa-moon-stars, fa-mortar-pestle, fa-mosque, fa-motorcycle, fa-mountain, fa-mountains, fa-mouse-pointer, fa-music, fa-napster, 
fa-narwhal, fa-neos, fa-network-wired, fa-neuter, fa-newspaper, fa-nimblr, fa-nintendo-switch, fa-node, fa-node-js, fa-not-equal, fa-notes-medical, fa-npm, fa-ns8, fa-nutritionix, fa-object-group, fa-object-ungroup, fa-octagon, 
fa-odnoklassniki, fa-odnoklassniki-square, fa-oil-can, fa-oil-temp, fa-old-republic, fa-om, fa-omega, fa-opencart, fa-openid, fa-opera, fa-optin-monster, fa-osi, fa-otter, fa-outdent, fa-page4, fa-pagelines, fa-paint-brush, 
fa-paint-brush-alt, fa-paint-roller, fa-palette, fa-palfed, fa-pallet, fa-pallet-alt, fa-paper-plane, fa-paperclip, fa-parachute-box, fa-paragraph, fa-parking, fa-parking-circle, fa-parking-circle-slash, fa-parking-slash, 
fa-passport, fa-pastafarianism, fa-paste, fa-patreon, fa-pause, fa-pause-circle, fa-paw, fa-paw-alt, fa-paw-claws, fa-paypal, fa-peace, fa-pegasus, fa-pen, fa-pen-alt, fa-pen-fancy, fa-pen-nib, fa-pen-square, fa-pencil, 
fa-pencil-alt, fa-pencil-paintbrush, fa-pencil-ruler, fa-pennant, fa-penny-arcade, fa-people-carry, fa-percent, fa-percentage, fa-periscope, fa-person-booth, fa-person-carry, fa-person-dolly, fa-person-dolly-empty, 
fa-person-sign, fa-phabricator, fa-phoenix-framework, fa-phoenix-squadron, fa-phone, fa-phone-office, fa-phone-plus, fa-phone-slash, fa-phone-square, fa-phone-volume, fa-php, fa-pi, fa-pie, fa-pied-piper, fa-pied-piper-alt, 
fa-pied-piper-hat, fa-pied-piper-pp, fa-pig, fa-piggy-bank, fa-pills, fa-pinterest, fa-pinterest-p, fa-pinterest-square, fa-place-of-worship, fa-plane, fa-plane-alt, fa-plane-arrival, fa-plane-departure, fa-play, fa-play-circle, 
fa-playstation, fa-plug, fa-plus, fa-plus-circle, fa-plus-hexagon, fa-plus-octagon, fa-plus-square, fa-podcast, fa-podium, fa-podium-star, fa-poll, fa-poll-h, fa-poll-people, fa-poo, fa-poo-storm, fa-poop, fa-portrait, fa-pound-sign, 
fa-power-off, fa-pray, fa-praying-hands, fa-prescription, fa-prescription-bottle, fa-prescription-bottle-alt, fa-presentation, fa-print, fa-print-slash, fa-procedures, fa-product-hunt, fa-project-diagram, fa-pumpkin, 
fa-pushed, fa-puzzle-piece, fa-python, fa-qq, fa-qrcode, fa-question, fa-question-circle, fa-question-square, fa-quidditch, fa-quinscape, fa-quora, fa-quote-left, fa-quote-right, fa-quran, fa-r-project, fa-rabbit, fa-rabbit-fast, 
fa-racquet, fa-rainbow, fa-raindrops, fa-ram, fa-ramp-loading, fa-random, fa-ravelry, fa-react, fa-reacteurope, fa-readme, fa-rebel, fa-receipt, fa-rectangle-landscape, fa-rectangle-portrait, fa-rectangle-wide, 
fa-recycle, fa-red-river, fa-reddit, fa-reddit-alien, fa-reddit-square, fa-redo, fa-redo-alt, fa-registered, fa-renren, fa-repeat, fa-repeat-1, fa-repeat-1-alt, fa-repeat-alt, fa-reply, fa-reply-all, fa-replyd, 
fa-republican, fa-researchgate, fa-resolving, fa-retweet, fa-retweet-alt, fa-rev, fa-ribbon, fa-ring, fa-road, fa-robot, fa-rocket, fa-rocketchat, fa-rockrms, fa-route, fa-route-highway, fa-route-interstate, 
fa-rss, fa-rss-square, fa-ruble-sign, fa-ruler, fa-ruler-combined, fa-ruler-horizontal, fa-ruler-triangle, fa-ruler-vertical, fa-running, fa-rupee-sign, fa-sad-cry, fa-sad-tear, fa-safari, fa-sass, fa-save, 
fa-scalpel, fa-scalpel-path, fa-scanner, fa-scanner-keyboard, fa-scanner-touchscreen, fa-scarecrow, fa-schlix, fa-school, fa-screwdriver, fa-scribd, fa-scroll, fa-scroll-old, fa-scrubber, fa-scythe, fa-search, 
fa-search-dollar, fa-search-location, fa-search-minus, fa-search-plus, fa-searchengin, fa-seedling, fa-sellcast, fa-sellsy, fa-server, fa-servicestack, fa-shapes, fa-share, fa-share-all, fa-share-alt, fa-share-alt-square, 
fa-share-square, fa-sheep, fa-shekel-sign, fa-shield, fa-shield-alt, fa-shield-check, fa-shield-cross, fa-ship, fa-shipping-fast, fa-shipping-timed, fa-shirtsinbulk, fa-shoe-prints, fa-shopping-bag, fa-shopping-basket, 
fa-shopping-cart, fa-shopware, fa-shovel, fa-shower, fa-shredder, fa-shuttle-van, fa-shuttlecock, fa-sigma, fa-sign, fa-sign-in, fa-sign-in-alt, fa-sign-language, fa-sign-out, fa-sign-out-alt, fa-signal, fa-signal-1, 
fa-signal-2, fa-signal-3, fa-signal-4, fa-signal-alt, fa-signal-alt-1, fa-signal-alt-2, fa-signal-alt-3, fa-signal-alt-slash, fa-signal-slash, fa-signature, fa-simplybuilt, fa-sistrix, fa-sitemap, fa-sith, fa-skeleton, 
fa-skull, fa-skull-crossbones, fa-skyatlas, fa-skype, fa-slack, fa-slack-hash, fa-slash, fa-sliders-h, fa-sliders-h-square, fa-sliders-v, fa-sliders-v-square, fa-slideshare, fa-smile, fa-smile-beam, fa-smile-plus, 
fa-smile-wink, fa-smog, fa-smoke, fa-smoking, fa-smoking-ban, fa-snake, fa-snapchat, fa-snapchat-ghost, fa-snapchat-square, fa-snow-blowing, fa-snowflake, fa-socks, fa-solar-panel, fa-sort, fa-sort-alpha-down, 
fa-sort-alpha-up, fa-sort-amount-down, fa-sort-amount-up, fa-sort-down, fa-sort-numeric-down, fa-sort-numeric-up, fa-sort-up, fa-soundcloud, fa-spa, fa-space-shuttle, fa-spade, fa-speakap, fa-spider, fa-spider-black-widow, 
fa-spider-web, fa-spinner, fa-spinner-third, fa-splotch, fa-spotify, fa-spray-can, fa-square, fa-square-full, fa-square-root, fa-square-root-alt, fa-squarespace, fa-squirrel, fa-stack-exchange, fa-stack-overflow, fa-staff, 
fa-stamp, fa-star, fa-star-and-crescent, fa-star-exclamation, fa-star-half, fa-star-half-alt, fa-star-of-david, fa-star-of-life, fa-stars, fa-staylinked, fa-steam, fa-steam-square, fa-steam-symbol, fa-steering-wheel, 
fa-step-backward, fa-step-forward, fa-stethoscope, fa-sticker-mule, fa-sticky-note, fa-stomach, fa-stop, fa-stop-circle, fa-stopwatch, fa-store, fa-store-alt, fa-strava, fa-stream, fa-street-view, fa-strikethrough, 
fa-stripe, fa-stripe-s, fa-stroopwafel, fa-studiovinari, fa-stumbleupon, fa-stumbleupon-circle, fa-subscript, fa-subway, fa-suitcase, fa-suitcase-rolling, fa-sun, fa-sun-cloud, fa-sun-dust, fa-sun-haze, fa-sunrise, 
fa-sunset, fa-superpowers, fa-superscript, fa-supple, fa-surprise, fa-swatchbook, fa-swimmer, fa-swimming-pool, fa-sword, fa-swords, fa-synagogue, fa-sync, fa-sync-alt, fa-syringe, fa-table, fa-table-tennis, fa-tablet, 
fa-tablet-alt, fa-tablet-android, fa-tablet-android-alt, fa-tablet-rugged, fa-tablets, fa-tachometer, fa-tachometer-alt, fa-tachometer-alt-average, fa-tachometer-alt-fast, fa-tachometer-alt-fastest, fa-tachometer-alt-slow, 
fa-tachometer-alt-slowest, fa-tachometer-average, fa-tachometer-fast, fa-tachometer-fastest, fa-tachometer-slow, fa-tachometer-slowest, fa-tag, fa-tags, fa-tally, fa-tape, fa-tasks, fa-taxi, fa-teamspeak, fa-teeth, 
fa-teeth-open, fa-telegram, fa-telegram-plane, fa-temperature-frigid, fa-temperature-high, fa-temperature-hot, fa-temperature-low, fa-tencent-weibo, fa-tennis-ball, fa-terminal, fa-text-height, fa-text-width, fa-th, 
fa-th-large, fa-th-list, fa-the-red-yeti, fa-theater-masks, fa-themeco, fa-themeisle, fa-thermometer, fa-thermometer-empty, fa-thermometer-full, fa-thermometer-half, fa-thermometer-quarter, fa-thermometer-three-quarters, 
fa-theta, fa-think-peaks, fa-thumbs-down, fa-thumbs-up, fa-thumbtack, fa-thunderstorm, fa-thunderstorm-moon, fa-thunderstorm-sun, fa-ticket, fa-ticket-alt, fa-tilde, fa-times, fa-times-circle, fa-times-hexagon, 
fa-times-octagon, fa-times-square, fa-tint, fa-tint-slash, fa-tire, fa-tire-flat, fa-tire-pressure-warning, fa-tire-rugged, fa-tired, fa-toggle-off, fa-toggle-on, fa-toilet-paper, fa-toilet-paper-alt, fa-tombstone, 
fa-tombstone-alt, fa-toolbox, fa-tooth, fa-toothbrush, fa-torah, fa-torii-gate, fa-tornado, fa-tractor, fa-trade-federation, fa-trademark, fa-traffic-cone, fa-traffic-light, fa-traffic-light-go, fa-traffic-light-slow, 
fa-traffic-light-stop, fa-train, fa-transgender, fa-transgender-alt, fa-trash, fa-trash-alt, fa-treasure-chest, fa-tree, fa-tree-alt, fa-trees, fa-trello, fa-triangle, fa-tripadvisor, fa-trophy, fa-trophy-alt, fa-truck, 
fa-truck-container, fa-truck-couch, fa-truck-loading, fa-truck-monster, fa-truck-moving, fa-truck-pickup, fa-truck-ramp, fa-tshirt, fa-tty, fa-tumblr, fa-tumblr-square, fa-turkey, fa-turtle, fa-tv, fa-tv-retro, fa-twitch, 
fa-twitter, fa-twitter-square, fa-typo3, fa-uber, fa-uikit, fa-umbrella, fa-umbrella-beach, fa-underline, fa-undo, fa-undo-alt, fa-unicorn, fa-union, fa-uniregistry, fa-universal-access, fa-university, fa-unlink, fa-unlock, 
fa-unlock-alt, fa-untappd, fa-upload, fa-usb, fa-usd-circle, fa-usd-square, fa-user, fa-user-alt, fa-user-alt-slash, fa-user-astronaut, fa-user-chart, fa-user-check, fa-user-circle, fa-user-clock, fa-user-cog, fa-user-crown, 
fa-user-edit, fa-user-friends, fa-user-graduate, fa-user-injured, fa-user-lock, fa-user-md, fa-user-minus, fa-user-ninja, fa-user-plus, fa-user-secret, fa-user-shield, fa-user-slash, fa-user-tag, fa-user-tie, fa-user-times, 
fa-users, fa-users-class, fa-users-cog, fa-users-crown, fa-ussunnah, fa-utensil-fork, fa-utensil-knife, fa-utensil-spoon, fa-utensils, fa-utensils-alt, fa-vaadin, fa-value-absolute, fa-vector-square, fa-venus, fa-venus-double, 
fa-venus-mars, fa-viacoin, fa-viadeo, fa-viadeo-square, fa-vial, fa-vials, fa-viber, fa-video, fa-video-plus, fa-video-slash, fa-vihara, fa-vimeo, fa-vimeo-square, fa-vimeo-v, fa-vine, fa-vk, fa-vnv, fa-volcano, fa-volleyball-ball, 
fa-volume, fa-volume-down, fa-volume-mute, fa-volume-off, fa-volume-slash, fa-volume-up, fa-vote-nay, fa-vote-yea, fa-vr-cardboard, fa-vuejs, fa-walking, fa-wallet, fa-wand, fa-wand-magic, fa-warehouse, fa-warehouse-alt, 
fa-watch, fa-watch-fitness, fa-water, fa-water-lower, fa-water-rise, fa-weebly, fa-weibo, fa-weight, fa-weight-hanging, fa-weixin, fa-whale, fa-whatsapp, fa-whatsapp-square, fa-wheat, fa-wheelchair, fa-whistle, fa-whmcs, 
fa-wifi, fa-wifi-1, fa-wifi-2, fa-wifi-slash, fa-wikipedia-w, fa-wind, fa-wind-warning, fa-window, fa-window-alt, fa-window-close, fa-window-maximize, fa-window-minimize, fa-window-restore, fa-windows, fa-windsock, 
fa-wine-bottle, fa-wine-glass, fa-wine-glass-alt, fa-wix, fa-wizards-of-the-coast, fa-wolf-pack-battalion, fa-won-sign, fa-wordpress, fa-wordpress-simple, fa-wpbeginner, fa-wpexplorer, fa-wpforms, fa-wpressr, fa-wrench, 
fa-x-ray, fa-xbox, fa-xing, fa-xing-square, fa-y-combinator, fa-yahoo, fa-yandex, fa-yandex-international, fa-yelp, fa-yen-sign, fa-yin-yang, fa-yoast, fa-youtube, fa-youtube-square, fa-zhihu */