@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?122163");

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');

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

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

/*  $0 - Root - CSS Variables                                            */
/*  $1 - Resets (https://necolas.github.io/normalize.css/)               */
/*  $2 - HTML Elements                                                   */
/*       $2.1 - HTML Elements - Links                                    */
/*       $2.2 - HTML Elements - Images                                   */
/*       $2.3 - HTML Elements - Headings                                 */
/*       $2.4 - HTML Elements - Inputs and Selectors                     */
/*       $2.5 - HTML Elements - Buttons                                  */
/*  $3 - Page Layout                                                     */
/*       $3.1 - Page Layout - Header                                     */
/*              $3.1.1 - Page Layout - Header Top                        */
/*              $3.1.2 - Page Layout - Header Content                    */
/*       $3.2 - Page Layout - Menu                                       */
/*       $3.3 - Page Layout - Content                                    */
/*  $4 - Patterns                                                        */
/*       $4.1 - Patterns - Content                                       */
/*              $4.1.1   - Patterns - Content - Accordion                */
/*              $4.1.2   - Patterns - Content - Alert                    */
/*              $4.1.3   - Patterns - Content - Balloon                  */
/*              $4.1.4   - Patterns - Content - BlankSlate               */
/*              $4.1.5   - Patterns - Content - Bullets                  */
/*              $4.1.6   - Patterns - Content - Card                     */
/*              $4.1.7   - Patterns - Content - CardBackground           */
/*              $4.1.8   - Patterns - Content - CardSectioned            */
/*              $4.1.9   - Patterns - Content - Carousel                 */
/*              $4.1.10  - Patterns - Content - ChatMessage              */
/*              $4.1.11  - Patterns - Content - LightBoxImage            */
/*              $4.1.12  - Patterns - Content - Modal                    */
/*              $4.1.13  - Patterns - Content - Panel                    */
/*              $4.1.14  - Patterns - Content - Section                  */
/*              $4.1.15  - Patterns - Content - Tag                      */
/*              $4.1.16  - Patterns - Content - Tooltip                  */
/*       $4.2 - Patterns - Controls                                      */
/*              $4.2.1   - Patterns - Controls - AnimatedLabel           */
/*              $4.2.2   - Patterns - Controls - ButtonGroup             */
/*              $4.2.3   - Patterns - Controls - DatePicker              */
/*              $4.2.4   - Patterns - Controls - Dropdown                */
/*              $4.2.5   - Patterns - Controls - DropdownSelect          */
/*              $4.2.6   - Patterns - Controls - FileUpload              */
/*              $4.2.7   - Patterns - Controls - FloatingActions         */
/*              $4.2.8   - Patterns - Controls - Input, 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.2.15  - Patterns - Controls - Fake input              */
/*       $4.3 - Patterns - Layouts                                       */
/*              $4.3.1   - Patterns - Layouts - Logins                   */
/*       $4.4 - Patterns - Navigation                                    */
/*              $4.4.1   - Patterns - Navigation - Breadcrumbs           */
/*              $4.4.2   - Patterns - Navigation - NavigationBar         */
/*              $4.4.3   - Patterns - Navigation - SectionIndex          */
/*              $4.4.4   - Patterns - Navigation - Sidebar               */
/*              $4.4.5   - Patterns - Navigation - Tabs                  */
/*              $4.4.6   - Patterns - Navigation - Timeline              */
/*              $4.4.7   - Patterns - Navigation - Wizard                */
/*       $4.5 - Patterns - Numbers                                       */
/*              $4.5.1   - Patterns - Numbers - Badge                    */
/*              $4.5.2   - Patterns - Numbers - Counter                  */
/*              $4.5.3   - Patterns - Numbers - IconBadge                */
/*              $4.5.4   - Patterns - Numbers - ProgressBar              */
/*              $4.5.5   - Patterns - Numbers - ProgressCircle           */
/*              $4.5.6   - Patterns - Numbers - UserAvatar               */
/*       $4.6 - Patterns - Responsive                                    */
/*              $4.6.1   - Patterns - Responsive - DisplayOnDevice       */
/*              $4.6.2   - Patterns - Responsive - LoadOnVisible         */
/*              $4.6.3   - Patterns - Responsive - MoveOnDevice          */
/*              $4.6.4   - Patterns - Responsive - ResponsiveTables      */
/*       $4.7 - Patterns - Structure                                     */
/*              $4.7.1   - Patterns - Structure - AlignCenter            */
/*              $4.7.2   - Patterns - Structure - Columns                */
/*              $4.7.3   - Patterns - Structure - Gallery                */
/*       $4.8 - Patterns - Utilities                                     */
/*              $4.8.1   - Patterns - Utilities - Animate                */
/*              $4.8.2   - Patterns - Utilities - ButtonLoading          */
/*              $4.8.3   - Patterns - Utilities - CharacterCount         */
/*              $4.8.4   - Patterns - Utilities - FlipContent            */
/*              $4.8.5   - Patterns - Utilities - Fieldset               */
/*              $4.8.6   - Patterns - Utilities - FlipContent            */
/*              $4.8.7   - Patterns - Utilities - Iframe                 */
/*              $4.8.8   - Patterns - Utilities - Separator              */
/*              $4.8.9   - Patterns - Utilities - StackedIcon            */
/*  $5 - Widgets & RichWidgets                                           */
/*       $5.1 - Widgets - Form / EditRecord                              */
/*       $5.2 - Widgets - TableRecords / EditableTable                   */
/*       $5.3 - RichWidgets - CounterMessage                             */
/*       $5.4 - RichWidgets - FeedbackAjaxWait                           */
/*       $5.5 - RichWidgets - FeedbackMessage                            */
/*       $5.6 - RichWidgets - Pagination                                 */
/*       $5.7 - RichWidgets - PopupEditor                                */
/*       $5.8 - RichWidgets - FiltersWrapper                             */
/*       $5.9 - RichWidgets - Calendar                                   */
/*       $5.10 - VISJS - Timeline                                        */
/*       $5.11 - Extra Info Dropdown                                     */
/*       $5.12 - CKE editor                                              */
/*       $5.13 - File upload dropzone                                    */
/*       $5.14 - Dashboard - Statistic                                   */
/*       $5.15 - Message Box                                             */
/*       $5.16 - Password Validator                                      */
/*       $5.17 - Request - Step en selectbox                             */
/*       $5.18 - Date Time Picker (v2)                                   */
/*       $5.19 - Call banner                                             */
/*       $5.20 - Fullscreen loader                                       */
/*  $6 - Styles                                                          */
/*       $6.1 - Styles - Typography                                      */
/*              $6.1.1 - Styles - Typography - Sizes Desktop             */
/*              $6.1.2 - Styles - Typography - Sizes Tablet              */
/*              $6.1.3 - Styles - Typography - Sizes Phone               */
/*              $6.1.4 - Styles - Typography - Transform                 */
/*              $6.1.5 - Styles - Typography - Weight                    */
/*       $6.2 - Styles - Colors                                          */
/*              $6.2.1 - Styles - Colors - Brand                         */
/*              $6.2.2 - Styles - Colors - Extendend                     */
/*              $6.2.3 - Styles - Colors - Neutral                       */
/*              $6.2.4 - Styles - Colors - Semantic                      */
/*       $6.3 - Styles - Space                                           */
/*              $6.3.1  - Styles - Space - Padding                       */
/*              $6.3.2  - Styles - Space - Padding Top                   */
/*              $6.3.3  - Styles - Space - Padding Right                 */
/*              $6.3.4  - Styles - Space - Padding Bottom                */
/*              $6.3.5  - Styles - Space - Padding Left                  */
/*              $6.3.6  - Styles - Space - Padding Vertical              */
/*              $6.3.7  - Styles - Space - Padding Horizontal            */
/*              $6.3.8  - Styles - Space - Margin                        */
/*              $6.3.9  - Styles - Space - Margin Top                    */
/*              $6.3.10 - Styles - Space - Margin Right                  */
/*              $6.3.11 - Styles - Space - Margin Bottom                 */
/*              $6.3.12 - Styles - Space - Margin Left                   */
/*              $6.3.13 - Styles - Space - Margin Vertical               */
/*              $6.3.14 - Styles - Space - Margin Horizontal             */
/*       $6.4 - Styles - Border Radius                                   */
/*       $6.5 - Styles - Border Size                                     */
/*       $6.6 - Styles - Elevation/Shadows                               */
/*       $6.7 - Styles - Display Flex Properties                         */
/*       $6.8 - Styles - Others                                          */
/*  $7 - Right-to-Left Mode                                              */
/*       $7.1 - RTL Mode - Page Layout / HTML Elements                   */
/*       $7.2 - RTL Mode - Patterns - Content                            */
/*              $7.2.1 - RTL Mode - Patterns - Content - Alert           */
/*              $7.2.2 - RTL Mode - Patterns - Content - CardSectioned   */
/*              $7.2.3 - RTL Mode - Patterns - Content - ChatMessage     */
/*       $7.3 - RTL Mode - Patterns - Controls                           */
/*              $7.3.1 - RTL Mode - Patterns - Controls - AnimatedLabel  */
/*              $7.3.2 - RTL Mode - Patterns - Controls - ButtonGroup    */
/*              $7.3.3 - RTL Mode - Patterns - Controls - DatePicker     */
/*              $7.3.4 - RTL Mode - Patterns - Controls - FileUpload     */
/*              $7.3.5 - RTL Mode - Patterns - Controls - FloatingActions*/
/*              $7.3.6 - RTL Mode - Patterns - Controls - InputWithIcons */
/*              $7.3.7 - RTL Mode - Patterns - Controls - RangeSlider    */
/*              $7.3.8 - RTL Mode - Patterns - Controls - ToogleButton   */
/*       $7.4 - RTL Mode - Patterns - Navigation                         */
/*              $7.4.1 - RTL Mode - Patterns - Navigation - SectionIndex */
/*              $7.4.2 - RTL Mode - Patterns - Navigation - Sidebar      */
/*              $7.4.3 - RTL Mode - Patterns - Navigation - Tabs         */
/*              $7.4.4 - RTL Mode - Patterns - Navigation - Timeline     */
/*              $7.4.5 - RTL Mode - Patterns - Navigation - Wizard       */
/*       $7.5 - RTL Mode - Patterns - Numbers                            */
/*              $7.5.1 - RTL Mode - Patterns - Numbers - ProgressBar     */
/*       $7.6 - RTL Mode - Patterns - tabletableResponsive                         */
/*              $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                      */
/*  $8.0 - VISJS - Timeline                                              */
/*  $9.0 - Animations                                                    */
/*       $9.1 - Blinking                                                 */
/* ===================================================================== */
/* ===================================================================== */

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

    /* Do NOT CHANGE THESE ROOT PARAMETERS INSTEAD OVERWRITE THEM IN THE General_Th STYLESHEET RESROUCE THAT IS SPECIFIED FOR THAT ORGANIZATION
      changed fontsizes from standard outsystems to sizings taken from styleguide Livewords
      also primary, secondary color, changed the neutral color scales. neutral 10 is black, neutral 9 - 6 are shades of black in accordance with styleguide
    */

    /* Typography - Size */
    --font-size-display-s: 26px;  
    --font-size-display: 36px;    
    --font-size-display-l: 74px;    
    --font-size-h1: 38px;
    --font-size-h2: 18px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --font-size-h5: 13px;
    --font-size-h6: 16px;
    --font-size-xxl: 30px;
    --font-size-xl: 26px;
    --font-size-l: 20px; 
    --font-size-base: 16px;
    --font-size-m: 14px;
    --font-size-s: 13px;
    --font-size-xs: 11px; 
    --font-size-xxs: 10px;
    

    /* Typography - Weight */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-medium-bold:700;
    --font-bold: 800;
    
    /* Color - Brand */
    /*--color-primary: #E84E0F;
    //--color-primary-darker: #b83e0c;
    //--color-primary-light:#EE763B;
    //--color-primary-lighter:#F49C6A;
    //--color-secondary: #FDC300;
    //--color-secondary-darker: #e3af00;
    //--color-secondary-light:#FFCE44;
    //--color-secondary-lighter:#FFDB7C;
    //--color-gray-primary:#373737;
    //--color-gray-light:#4A4A4A;
    //--color-gray-lighter:#9B9B9B;
    //--color-gray-lightest:#DEDEDE;
    */

    /* Color - Brand */
    --color-primary: #126CEE;
    --color-primary-darker: #0d50b6;
    --color-primary-light:#70a6f5;
    --color-primary-lighter:#b7d2fa;
    --color-secondary: #e6bc56;
    --color-secondary-darker: #a58b42;
    --color-secondary-light: #f0d799;
    --color-secondary-lighter: #f8ebcc;

    --color-ribbon-100: #126cee;
    --color-goldfish-100: #e6bc56;
    --color-zodiac-100: #0b1c34;
    --color-ribbon-90: rgba(18, 108, 238, 0.9);
    --color-goldfish-90: rgba(230, 188, 86, 0.9);
    --color-zodiac-90: rgba(11, 28, 52, 0.9);
    --color-ribbon-80: rgba(18, 108, 238, 0.8);
    --color-goldfish-80: rgba(230, 188, 86, 0.8);
    --color-zodiac-80: rgba(11, 28, 52, 0.8);
    --color-ribbon-70: rgba(18, 108, 238, 0.7);
    --color-goldfish-70: rgba(230, 188, 86, 0.7);
    --color-zodiac-70: rgba(11, 28, 52, 0.7);
    --color-ribbon-60: rgba(18, 108, 238, 0.6);
    --color-goldfish-60: rgba(230, 188, 86, 0.6);
    --color-zodiac-60: rgba(11, 28, 52, 0.6);
    --color-ribbon-50: rgba(18, 108, 238, 0.5);
    --color-goldfish-50: rgba(230, 188, 86, 0.5);
    --color-zodiac-50: rgba(11, 28, 52, 0.5);
    --color-ribbon-40: rgba(18, 108, 238, 0.4);
    --color-goldfish-40: rgba(230, 188, 86, 0.4);
    --color-zodiac-40: rgba(11, 28, 52, 0.4);
    --color-ribbon-30: rgba(18, 108, 238, 0.3);
    --color-goldfish-30: rgba(230, 188, 86, 0.3);
    --color-zodiac-30: rgba(11, 28, 52, 0.3);
    --color-ribbon-20: rgba(18, 108, 238, 0.2);
    --color-goldfish-20: rgba(230, 188, 86, 0.2);
    --color-zodiac-20: rgba(11, 28, 52, 0.2);
    --color-ribbon-10: rgba(18, 108, 238, 0.1);
    --color-goldfish-10: rgba(230, 188, 86, 0.1);
    --color-zodiac-10: rgba(11, 28, 52, 0.1);
    --color-ribbon-5: rgba(18, 108, 238, 0.05);
    --color-goldfish-5: rgba(230, 188, 86, 0.05);
    --color-zodiac-5: rgba(11, 28, 52, 0.05);
    --color-ribbon-2: rgba(18, 108, 238, 0.02);
    --color-goldfish-2: rgba(230, 188, 86, 0.02);
    --color-zodiac-2: rgba(11, 28, 52, 0.02);
    
    --color-menu-background:#bdbec0;
    --color-menu-text:#FDC300; 
    --color-menuItem-border:#E84E0F;
    --color-table-header:#d1d3d4;
    --header-background-color:#ffffff;
    --home-button-background: #d1d3d4;
    /*--color-button:#ffc20e;
    //--color-button-hover:#eead1f;
    */
    --color-button:#126CEE;
    --color-button-hover:#0d50b6;
    --color-label:#6d6e71;
    --color-input-background-gray:#e6e7e8;
    --color-input-background-light-gray:#f3f4f4;
    --color-input-background-dark-gray:#cbcdd0;
    
    --color-primary-hover: #295fd6;
    --color-primary-selected: rgba(20, 110, 245, .12);
    --color-primary-lightest: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));

    /* Color - Extended */
    --color-red-lightest: #faeaea;
    --color-red-lighter: #e9aaaa;
    --color-red-light: #d96a6a;
    --color-red: #c92a2a;
    --color-custom-red: #ED1C24; 
    --color-red-dark: #ab2424;
    --color-red-darker: #8d1d1d;
    --color-red-darkest: #6f1717;
    
    --color-pink-lightest: #fbebf0;
    --color-pink-lighter: #efadc4;
    --color-pink-light: #e27098;
    --color-pink: #d6336c;
    --color-pink-dark: #b62b5c;
    --color-pink-darker: #96244c;
    --color-pink-darkest: #761c3b;
    
    --color-grape-lightest: #f7ecfa;
    --color-grape-lighter: #dfb2e9;
    --color-grape-light: #c678d9;
    --color-grape: #ae3ec9;
    --color-grape-dark: #9435ab;
    --color-grape-darker: #7a2b8d;
    --color-grape-darkest: #60226f;
    
    --color-violet-lightest: #f1edfd;
    --color-violet-lighter: #c6b6f6;
    --color-violet-light: #9b7fef;
    --color-violet: #7048e8;
    --color-violet-dark: #5f3dc5;
    --color-violet-darker: #4e32a2;
    --color-violet-darkest: #3e2880;
   
    --color-indigo-lightest: #eceffd;
    --color-indigo-lighter: #b3c1f7;
    --color-indigo-light: #7b92f1;
    --color-indigo: #4263eb;
    --color-indigo-dark: #3854c8;
    --color-indigo-darker: #2e45a5;
    --color-indigo-darkest: #243681;
    
    --color-blue-lightest: #e8f2fa;
    --color-blue-lighter: #a3c9ea;
    --color-blue-light: #5fa1db;
    --color-blue: #1a79cb;
    --color-blue-dark: #1667ad;
    --color-blue-darker: #12558e;
    --color-blue-darkest: #0e4370;
    
    --color-cyan-lightest: #e7f2f4;
    --color-cyan-lighter: #9eccd3;
    --color-cyan-light: #56a6b2;
    --color-cyan: #0d8091;
    --color-cyan-dark: #0b6d7b;
    --color-cyan-darker: #095a66;
    --color-cyan-darkest: #074650;
    
    --color-teal-lightest: #e6f2ef;
    --color-teal-lighter: #9cccbd;
    --color-teal-light: #52a58c;
    --color-teal: #087f5b;
    --color-teal-dark: #076c4d;
    --color-teal-darker: #065940;
    --color-teal-darkest: #044632;
    
    --color-green-lightest: #ebf7ed;
    --color-green-lighter: #afe0b8;
    --color-green-light: #73c982;
    --color-green: #37b24d;
    --color-green-dark: #2f9741;
    --color-green-darker: #267d36;
    --color-green-darkest: #1e622a;
    
    --color-lime-lightest: #f1f8e8;
    --color-lime-lighter: #c7e3a2;
    --color-lime-light: #9ecd5c;
    --color-lime: #74b816;
    --color-lime-dark: #639c13;
    --color-lime-darker: #51810f;
    --color-lime-darkest: #40650c;
    
    --color-orange-lightest: #fef0e6;
    --color-orange-lighter: #fcc29c;
    --color-orange-light: #f99551;
    --color-orange: #f76707;
    --color-orange-dark: #d25806;
    --color-orange-darker: #ad4805;
    --color-orange-darkest: #883904;
    
    --color-yellow-lightest: #fef5e5;
    --color-yellow-lighter: #fbd999;
    --color-yellow-light: #f8bc4c;
    --color-yellow: #f59f00;
    --color-yellow-dark: #d08700;
    --color-yellow-darker: #ac6f00;
    --color-yellow-darkest: #875700;
    
    /* Color - Neutral */
    --color-neutral-0: #ffffff;
    --color-neutral-1: #f8f9fa;
    --color-neutral-2: #f1f3f5;
    --color-neutral-3: #e9ecef;
    --color-neutral-4: #dee2e6;
    --color-neutral-5: var(--color-menu-background);
    --color-neutral-6: #DEDEDE; /*Livewords Main gray 40% */
    --color-neutral-7: #9B9B9B; /*Livewords Main gray 60% */
    --color-neutral-8: #4A4A4A; /*Livewords Main gray 80% */
    --color-neutral-9: #373737; /*Livewords Main gray*/
    --color-neutral-10: #000;
    
    /* Color - Semantic */
    --color-error-light: #fceaea;
    --color-error: #ed1c24;
    
    --color-warning-light: #fdf6e5;
    --color-warning: #e9a100;
    
    --color-success-light: #eaf3eb;
    --color-success: #29823b;
    
    --color-info-light: #e5f5fc;
    --color-info: #017aad;

    /* Space - Sizes */
    --space-none: 0;
    --space-xs: 5px;
    --space-s: 10px;
    --space-base: 15px;
    --space-m: 20px;
    --space-l: 30px;
    --space-xl: 40px;
    --space-xxl: 50px;
    
    
    /* Heights*/
    --height-m: 50px;
    --height-s: 40px;
    --height-xs: 32px;
    
    
    
    /* Border Radius */
    --border-radius-none: 0;
    --border-radius-soft: 0px;
    --border-radius-medium: 5px;
    --border-radius-rounded: 100px;
    --border-radius-circle: 100%;
    
    /* Border Size */
    --border-size-none: 0;
    --border-size-s: 1px;
    --border-size-m: 2px;
    --border-size-l: 3px;

    /* Elevation / Shadow */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);
    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);
    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);
    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);
    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);

    /* App Settings */
    --color-background-body: #e7e7e8;
    --header-size: 80px;
    --side-menu-size: 300px;
    --popup-width: 940px;
    
    /* Top menu icons */
    --config: url(/IMSGeneral_Th/img/icon_config_yellow.svg);
    --help: url(/IMSGeneral_Th/img/icon_help_yellow.svg);
    --profile: url(/IMSGeneral_Th/img/icon_profile_yellow.svg);
    --switch: url(/IMSGeneral_Th/img/icon_switch_yellow.svg); 
    --vendorlogout: url(/IMSGeneral_Th/img/iconvendorlogoutyellow.svg);
    --vendormessagebox: url(/IMSGeneral_Th/img/iconvendormessageboxyellow.svg);

}




/*## BASETHEME ##*/


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

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {    
  /*color: var(--color-neutral-10);*/
  color: #0B1C34;
  font-family: 'Montserrat', sans-serif;
  /*font-family: 'Noto Sans', sans-serif;*/
  overflow: hidden;
  overflow-x: hidden;
  -moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

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

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

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

:focus {
  outline: 0;
}

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

input, 
textarea, 
select, 
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.25;
  margin: 0;
}

[type="checkbox"], 
[type="radio"] {
  border: 0;
  padding: 0;
}

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

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

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

[type="search"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button, 
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

div[onclick] {
  cursor: pointer;
}

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

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

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

/* $2.1 - HTML Elements - Links */
a, 
a:visited {
  color: #000;
  -webkit-transition: color 180ms linear;
          transition: color 180ms linear;
}

a:hover {
  color: #000;
}

a.text-link, 
a.text-link:visited,
.text-link,
.text-link:visited {
  color: var(--color-primary);
  -webkit-transition: color 180ms linear;
          transition: color 180ms linear;
  text-decoration: underline;
}

a.text-link:hover,
.text-link:hover {
  color: var(--color-primary-darker);
}

a.text-link-white, 
a.text-link-white:visited,
.text-link-white,
.text-link-white:visited {
  color: var(--color-neutral-0);
  -webkit-transition: color 180ms linear;
          transition: color 180ms linear;
  text-decoration: underline;
}

a.text-link-white:hover,
.text-link-white:hover {
  color: var(--color-neutral-0);
  opacity: 0.8;
}

.clickable-row a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

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


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

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

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

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

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

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

ul.bullet-list {

}

ul.bullet-list li {

}

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

.Form label.MandatoryLabel:after {
  content: "*";
  color: var(--color-label);
  position: absolute;
  padding: 0px 5px 5px 3px;
  font-size: 12px;
  font-weight: normal;
}

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

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

input.OSFillParent,
button.OSFillParent,
select.OSFillParent,
textarea.OSFillParent {
 display: block;
}

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

textarea.input,
.Form textarea.input,
.Form textarea.input.ReadOnly {
  display: block;
  height: auto !important;
  padding: var(--space-s);
  resize: none;
}

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

.select,
.Form .select,
.PopUpLayoutMain .Form .select,
.dropdown-header.select {
  background-image: url(/IMSGeneral_Th/img/icon_dropdown.svg);
  background-position: center right 16px;
  background-repeat: no-repeat;
  background-size: 13px 13px;
  border-radius: 0px;
}

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

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

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

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

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

.input-large {
  height: 48px; 
}

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

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

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

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

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

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

.checkbox:focus:before,
.radio-button:focus:before,
.TableRecords .TableRecords_Header [type="checkbox"]:focus:before {
  box-shadow: none;
}

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

.radio-button:checked:before {
  background-color: var(--color-neutral-0);
  border: 4px solid var(--color-secondary);
  height: 8px;
  width: 8px;
}

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

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

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

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

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

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

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

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



/* $2.5 - HTML Elements - Buttons */

/*Button Styling changed to more resemble styling used on www.livewords.com
  for example the size and color of the button from primary to secondary
*/

.Button,
.btn {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--color-neutral-0);
  border-radius: var(--border-radius-none);
  border: var(--border-size-m) solid var(--color-secondary);
  color: var(--color-neutral-10);
  cursor: pointer;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  font-size: var(--font-size-s);
  font-weight: var(--font-medium);
  height: var(--height-xs);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  -webkit-transition: all 180ms linear;
  transition: all 180ms linear;
}

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

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

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

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

.Button .fa {
  width: auto;
}

.fa-fw {
  width: auto;
}

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

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

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

.Button:hover{
  transform:unset;
  
}

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

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

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

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

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

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

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

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

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

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

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

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


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

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

.layout {
  /* min-height: 100%; */
  /* display: -webkit-box; */
  display: -ms-flexbox;
  display: block;
  width: 100%;
  height: 100%;
}

.layout.layout-top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}

.layout.layout-left {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
}

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

.layout .main {
  width:100%;
  height:100%;

  /* Space between the main content and the top of the screen, calculated automatically in the Layout JS */
  --header-gutter: 0px;
  padding-top: unset;
}

.layout.layout-top .main {
  
}

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

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

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

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

.layout .header {
  background-color: var(--header-background-color);
  box-shadow: none;
  border-bottom: 1px solid var(--color-background-body);
  display: block;
  width: calc(100% - 80px);
  float: right;
  height: 80px;
  position: unset;
}

.layout.layout-top.hide-side-menu .header {
  float: left;
  width: 100%;
}

.Login .layout .header,
.Public .layout .header {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

.header-left {

}

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

.header-right {

}


/*  $3.1.2 - Page Layout - Header Content  */
.app-logo {
  border-radius: var(--border-radius-soft);
  height: 32px;
  margin-right: var(--space-s);
  width: 32px;
}

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

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

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

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

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

.navigation .Menu_DropDownButton {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.Menu_DropDownPanel {
  position: relative;
}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

.main > .content {
 float: left;
 height:calc(100% - 80px);
 width:calc(100% - 80px);
 overflow-y: overlay;
 
}

.layout.layout-top.hide-side-menu .main > .content {
  float: left;
  width: 100%;
}

.main > .content.empty {
  float: left;
  height: 100%;
  width: 100%;
  overflow-y: overlay;
 }

.Login .content,
.Public .content {
  width:100%;
}

.Public.boxed .layout-top .content .ThemeGrid_Container {
  max-width: 1100px;
}

/* .Public.boxed.phone .layout-top .content .ThemeGrid_Container,
.Public.boxed.tablet .layout-top .content .ThemeGrid_Container {
  padding: var(--space-base);
} */

.main-content {
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  position: relative;
}

.content-breadcrumbs {
  margin-bottom: var(--space-base);
}

.content-message {
  
}

.content-message:empty {
  display: none;
}

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

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

.content-top-title > span,
.content-top-title > span.heading1 {
  height: auto;
}

.content-top-title .tag {
  margin-top: 7px;
}

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

.content-top-actions {
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-bottom: var(--space-l);
  text-align: right;
}

.content-top-actions:empty {
  display: none;
}

.content-top-title,
.content-top-actions {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

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

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

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

.layout-top .content .ThemeGrid_Container .Login {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.phone .content-top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}

.phone .content-top-actions,
.phone .content-top-title {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}

.phone .content-top-actions .btn,
.phone .content-top-actions .Button,
.phone .content-top-actions .ContainerButton,
.content-top-actions .btn,
.content-top-actions .Button,
.content-top-actions .ContainerButton {
  margin-bottom: var(--space-xs);
  margin-top: var(--space-xs);
}

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

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

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

/* $4.1.1 - Patterns - Content - Accordion */
.accordion {
  background-color: transparent;
}

.accordion-item {
  border: none;
  position: relative;
  background-color:#fff;
}

.accordion-item .TableRecords  {
  border: 1px solid var(--color-table-header);
}

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

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

.accordion-item.is--open {
  border-top: none;
}

.accordion-item .accordion-item-header {
  /* margin-top: 10px; */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: var(--font-size-h6);
  height: 50px;
  padding: 0 var(--space-m) 0 var(--space-m);
  background-color: #fff;
}

.accordion-item .accordion-item-header .btn-align-bottom-absolute {
  position: absolute;
  bottom: 0;
  right: 0;
}

.accordion-item.accordion-item-header-auto .accordion-item-header {
  height: auto;
  padding: var(--space-m);
}

.accordion-item.accordion-item-extra-bottom-spacing {
  padding-bottom: calc(1.75 * var(--space-xl));
}

.accordion-item.accordion-item-extra-bottom-spacing .btn-align-bottom-absolute {
  position: absolute;
  bottom: var(--space-m);
  right: var(--space-m);
}

.accordion-item.accordion-item-header-auto .accordion-item-content.is--expanded {
  margin-top: calc(-1 * var(--space-m));
}

.accordion-item.accordion-item-header-auto .accordion-item-content.is--animating {
  transition: visibility 300ms ease-in-out, height 300ms ease-in-out !important;
  -webkit-transition: visibility 300ms ease-in-out, height 300ms ease-in-out !important;
  -moz-transition: visibility 300ms ease-in-out, height 300ms ease-in-out !important;
  -ms-transition: visibility 300ms ease-in-out, height 300ms ease-in-out !important;
  -o-transition: visibility 300ms ease-in-out, height 300ms ease-in-out !important;
}

.accordion-item .accordion-item-header .columns .columns-item {
  margin-bottom: 0;
}

.accordion-item.accordion-item-header-auto .accordion-item-icon {
  position: absolute;
  right: var(--space-m);
  top: var(--space-base);
}

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

.accordion-item .accordion-item-title {
  color: var(--color-secondary);
  font-size: 18px;
  font-weight: bold;
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

.accordion-item-content .accordion-item-content .DetailContentContainer {

}


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tippy-active {
  cursor: pointer;   
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tippy-tooltip {
  background-color:  var(--color-neutral-0) /* #333*/;
  border-radius: 4px;
  color: var(--color-neutral-9) /* #fff */;
  font-size: .9rem;
  position: relative;
  will-change: transform;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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


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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

.carousel .carousel-navigation {
  display: block;
  position: absolute;
  top: var(--space-m);
  left: auto;
  right: var( --space-m);
  height: 20px;
  line-height: 20px;
  width: 50px;
  -webkit-transform: translate(0%);
          transform: translate(0%);
  width: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.carousel .carousel-arrow-left,
.carousel .carousel-arrow-right {
  position: absolute;
  background:  none;
  border-radius: 0;
  cursor: pointer;
  height: 20px;
  line-height:20px;
  width: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack:  center;
  -ms-flex-pack:  center;
  justify-content:  center;
  -webkit-box-align:  center;
  -ms-flex-align:  center;
  align-items:  center;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: var(--color-neutral-10);
  -webkit-transition: all 180ms linear;
          transition: all 180ms linear;
  top: 0;
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
}

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

.carousel .carousel-arrow-left {
  left: 0px;
  right: auto;
  background-image: url(/IMSGeneral_Th/img/icon_previous.svg);
}

.carousel .carousel-arrow-right {
  right: 0;
  background-image: url(/IMSGeneral_Th/img/icon_next.svg);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes rollOut {
from {
  opacity: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pswp--open {
display: block; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

  Contents:

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

*/
/*
  
  1. Buttons

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

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

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

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

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

.pswp__button--fs {
display: none; }

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

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

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

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

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

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

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

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

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

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

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

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

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

/*

  2. Share modal/popup and links

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

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

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

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

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

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

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

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

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

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

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

/*

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

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

/*
  
  4. Caption

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

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

.pswp__caption--empty {
display: none; }

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

/*

  5. Loading indicator (preloader)

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
  
  6. Additional styles

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

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

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

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

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

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

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

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

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

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

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

.pswp--minimal--dark .pswp__top-bar {
background: none; }

[data-size] + figcaption {
  display: none; }


/* $4.1.12 - Patterns - Content - Modal */


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

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

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

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

.modal-wrapper {
  background-color: var(--color-neutral-0);
  border-radius: var(--border-radius-soft);
  box-shadow: none;
  max-height: none;
  width: 570px;
  min-width: 570px;
  min-height: 20vh;
  overflow-y: visible;
  padding-bottom: 30px;
}

.modal-wrapper.modal-wide {
  width: 700px;
  min-width: 700px;
}

.modal-wrapper.modal-wide {
  width: 700px;
  min-width: 700px;
}

.modal-wrapper.modal-extra-wide {
  width: 890px;
  min-width: 890px;
}

/* .modal-wrapper.add-auto-scroll {
  overflow-y: overlay;
  overflow-x: hidden;
} */

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

.modal-title {
  font-size:var(--font-size-h1);
  font-weight:var(--font-bold);
  line-height:1;
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
}

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

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

.modal-close:hover{
  cursor:pointer;
}

.modal-close img{
  width:15px;
}

.modal-content {
  max-height: none;
 
 
 
 overflow: visible;
  padding: 0px var(--space-l);
  width: 100%;
}

.modal-wrapper.modal-wide .modal-content {
  max-height: none;
  padding: 0px var(--space-l);
}

.modal-scroll > .modal-content {
  max-height: 75vh;
  overflow-y: auto;
}

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

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

.modal-footer {
  border-top: 0px;
  padding: var(--space-s)  var(--space-l) 0 var(--space-l);
  text-align:right;
}


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

.panel-header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}

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

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

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

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

.panel-footer {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
  justify-content: space-between;
  padding: var(--space-none) var(--space-m) var(--space-m);
}


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

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

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

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

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


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

.tag.tag-small {
  font-size: var(--font-size-xs);
  height: auto;
  min-height: 30px;
  padding: var(--space-xs) var(--space-s);
  line-height: 14px;
}

.tag.tag-medium {
  font-size: var(--font-size-m);
  height: auto;
  min-height: 35px;
  padding: var(--space-xs) var(--space-s);
}

.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);
  background: var(--color-input-background-dark-gray);  
}

.tag.background-neutral-4 span.fa {
  color: var(--color-label);
}

.tag-content:empty { 
  
}

.ListRecords .tag {
  max-width: 100%;
}

.ListRecords .tag .tag-content {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.tag.with-close-icon .tag-content {
  padding-right: 20px;
  position: relative;
}

.tag .close-tag {
  position: absolute;
  right: 0;
  top: 1px;
  width: 10px;
  text-align: center;
}

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

.tooltip:empty {
  
}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

.button-group .ListRecords.list-jobtype {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.button-group label {
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  position: relative;
  word-break: normal;
  margin-right: var(--space-s);
}

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

.button-group .btn {
  border-radius: var(--border-radius-none);
  border: none;
  color: var(--color-neutral-10);
  display: inline-flex;
  transition: none;
  white-space: nowrap;
  width: 100%;
  font-size: var(--font-size-m);
}

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

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

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

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

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

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

.button-group input[type="radio"]:checked + .btn {
  background-color: var(--color-neutral-4);
  color: var(--color-neutral-10);
  font-weight: bold;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pika-single.top-aligned {
  margin-top: calc(-1 * var(--space-xs));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.dropdown .dropdown-header input {
  background-image: none;
}

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

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

.dropdown .dropdown-icon .fa {
  display:none;
}

.dropdown .dropdown-icon {
  position: absolute;
  right: 16px;
  top: 8px;
  height: 13px;
  width: 13px;
  background-image: url(/IMSGeneral_Th/img/icon_dropdown.svg);
}

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

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

.dropdown.is--visible .dropdown-icon {
  transform: none;
}

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

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

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

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

.dropdown .dropdown-content .dropdown-content-list a > div {
  min-width: 100%;
}

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


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

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

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

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

.choices:focus {
  outline: none;
}

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

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

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

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

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

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

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

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

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

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

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

/* Arrow icon */
.choices[data-type*="select-one"]:after {
  content: "";
  width: 13px;
  height: 13px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background-position: center center;
}

.choices[data-type*="select-one"].is-open:after {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

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

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

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

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

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

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

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

.accordion .choices__inner .search--wrapper input,
.modal-content .choices__inner .search--wrapper input,
.PopUpLayoutMain .choices__inner .search--wrapper input,
.DetailBlockNoToggle .choices__inner .search--wrapper input {
  background-color: transparent;
}

.accordion .choices__inner,
.modal-content .choices__inner,
.PopUpLayoutMain .choices__inner,
.DetailBlockNoToggle .choices__inner {
  background-color: var(--color-input-background-gray);
}


.accordion .choices.is-focused .choices__inner,
.modal-content .choices.is-focused .choices__inner,
.PopUpLayoutMain .choices.is-focused .choices__inner,
.accordion .choices.is-focused .choices__inner .search--wrapper input,
.modal-content .choices.is-focused .choices__inner .search--wrapper input,
.PopUpLayoutMain .choices.is-focused .choices__inner .search--wrapper input,
.accordion .choices.is-focused .choices__inner .search--wrapper,
.modal-content .choices.is-focused .choices__inner .search--wrapper,
.PopUpLayoutMain .choices.is-focused .choices__inner .search--wrapper {
  background-color: var(--color-input-background-dark-gray);
}

.accordion .choices.is-focused .choices__list--multiple .choices__item,
.modal-content .choices.is-focused .choices__list--multiple .choices__item,
.PopUpLayoutMain .choices.is-focused .choices__list--multiple .choices__item {
  background-color: var(--color-input-background-gray);
}

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

.choices__inner:hover {
  border: none;
}

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

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

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

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

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

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

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


.search--wrapper {
  position: relative;
  line-height: 30px;
}

.search--wrapper input {
  background-color: var(--color-input-background-gray);
  border-radius: var( --border-radius-soft);
  border: none;
  height: 30px;
  padding: 0 var(--space-s) 0 var(--space-l) ;
  -webkit-transition: all 180ms linear;
          transition: all 180ms linear;
}

.search--wrapper--onnonwhitebackground .search--wrapper input {
    background-color: var(--color-neutral-0);
}

.search--wrapper:before {
  color: var(--color-neutral-9);
  content: '\f002';
  font-family: 'SilkWeb4';
  height: 30px;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  transform: none;
  width: 30px;
}

/* Choices Multiple */
.choices__list--multiple {
  display: inline-block;
  padding: 0 var(--space-s);
  width: 100%;
}

.choices__list--multiple:empty {
  display: none;
}

.choices__list--multiple .choices__item {
  align-items: center;
  background-color: var(--color-input-background-dark-gray);
  border-radius: var(--border-radius-soft);
  border: none;
  color: var(--color-neutral-9);
  display: inline-flex;
  font-size: var(--font-size-xs);
  font-weight: var(--font-semi-bold);
  height: auto;
  line-height: 10px;
  margin-bottom: var(--space-s);
  margin-left: 0; 
  max-width: 100%;
  margin-right: var(--space-s);
  overflow: hidden;
  padding: var(--space-s) var(--space-s);
  position: relative;
  text-overflow: ellipsis;
  vertical-align: middle;
  word-break: break-all;
  white-space: nowrap;
}

.choices__list .choices__list--multiple .vendor-rate-mcl {
    max-height: 150px;
    overflow-y: auto;
}

.choices__list--multiple .choices__item  .vendor-rate-mcl {
    max-height: 150px;
    overflow-y: auto;
}

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

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

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

.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="select-multiple"] .search--wrapper,
.choices[data-type*="select-multiple"].is-open .search--wrapper {
  padding: 0;
  margin: 0;
  background-color: var(--color-input-background-gray);
}

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

.choices[data-type*="select-multiple"].is-open .choices__inner {
  border: none;
}

.choices[data-type*="select-multiple"] .search--wrapper::before {
  left: 0;
}

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

.choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--color-input-background-dark-gray);
  border: none;
  color: var(--color-neutral-9);
}

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

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

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

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

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

.dropdown-small .choices__list--dropdown .choices__list {
  max-height: 150px;
}

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

.choices__list--dropdown .choices__item {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  line-height: initial;
  padding: var(--space-s) var(--space-base);
  position: relative;
}

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

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

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

.choices__button:focus {
  outline: none;
}

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

.choices__placeholder {
  opacity: .5;
}

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

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

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

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

.Public .choices__list--dropdown .choices__item--selectable[data-value=__ossli_0] {
  display: none;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--color-input-background-dark-gray);
}

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

.choices__item {
  cursor: default;
}

.choices__item--selectable {
  cursor: pointer;
}

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

.file-upload .file-upload-message > div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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


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

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

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

  
  
}

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

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

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

  
}

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

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

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

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

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


/* $4.2.8 - Patterns - Controls - Input */

.input-on-white-background {
    background-color: var(--color-input-background-gray);
}



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

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

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

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

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

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

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

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

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

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

.input-with-icon .input-with-icon-content-icon.search-actions:hover {
  color: var(--color-neutral-8);
  cursor: pointer;
}


/* $4.2.9 - Patterns - Controls - RangeSlider */
.range-slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: row-reverse;
         flex-direction: row-reverse;
  margin-bottom: var(--space-l);
}

.range-slider-values {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: var(--font-size-base);
  padding-left: var(--space-m)
}

.range-slider-values .input {
  width: 25px;
  text-align: right;
}

.range-slider .noUi-connect {
  background: var(--color-primary);
}

.range-slider .noUi-target {
  background: var(--color-neutral-5);
  border-radius: var(--border-radius-soft);
  border: none;
}

.range-slider .noUi-handle {
  background: var(--color-neutral-0);
  border-radius: 50%;
  border: var(--border-size-s) solid var(--color-neutral-7);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  height: 24px;
  margin-top: -10px;
  width: 24px;
}

.range-slider .noUi-handle.noUi-active,
.range-slider .noUi-handle:hover {
  border: var(--border-size-s) solid var(--color-primary);
}

.range-slider .noUi-handle:before,
.range-slider .noUi-handle:after {
  background: transparent;
  border-color: var(--color-neutral-7);
  border-style: solid;
  content: '';
  height: 10px;
  margin-top: -5px;
  position: absolute;
  top: 50%;
}

.range-slider .noUi-handle:before {
  border-width: var(--border-size-none) var(--border-size-none) var(--border-size-none) var(--border-size-s);
  content: '';
  left: 6px;
}

.range-slider .noUi-handle:after {
  border-style: solid;
  border-width: var(--border-size-none) var(--border-size-s);
  left: 10px;
  width: 3px;
}

.range-slider .noUi-handle.noUi-active:before,
.range-slider .noUi-handle.noUi-active:after,
.range-slider .noUi-handle:hover:before,
.range-slider .noUi-handle:hover:after {
  border-color: var(--color-primary);
}

.range-slider .noUi-connects {
  border-radius: var(--border-radius-soft);
}

.range-slider .noUi-pips {
  color: var(--color-neutral-8);
}

.range-slider .noUi-marker {
  background: var(--color-neutral-5);
}

.range-slider .range-slider-separator.is--hidden {
  display: none;
}

.range-slider-label {
  color: var(--color-neutral-8);
  font-size: var(--font-size-base);
  font-weight: bold;
  margin-left: var(--space-xs);
}

.range-slider-separator {
  background-color: var(--color-neutral-4);
  font-size: 0;
  height: 2px;
  margin: var(--space-none) var(--space-s);
  width: 16px;
}

.range-slider-values .input {
  background: none !important;
  border: none;
  font-weight: bold;
  font-size: var(--font-size-base);
  height: auto;
  margin-left: var(--space-none);
  padding: var(--space-none);
}

.range-slider .range-slider-values > * {
  word-break: normal;
}


/* Horizontal */
html:not([dir="rtl"]) .range-slider .noUi-horizontal .noUi-handle {
  right: -12px;
}

.range-slider .noUi-horizontal {
  height: 4px;
  margin: var(--space-base) var(--space-none) var(--space-base);
  width: 100%;
}

.range-slider .noUi-marker-horizontal {
  height: 4px;
}

.noUi-value::after {
  content: " %";
}

.range-slider .noUi-pips-horizontal {
  padding: var(--space-s) var(--space-none) var(--space-none) var(--space-none);
}

.range-slider .noUi-value-horizontal {
  -webkit-transform: translate(-50%, 20%);
          transform: translate(-50%, 20%);
}

.range-slider .noUi-pips-horizontal {
  height: 30px;
}

/* Vertical */
.range-slider.vertical .range-slider-object {
  height: 100%;
  margin-top: var(--space-m);
}

.range-slider .noUi-vertical {
  height: 100px;
  margin-top: var(--space-base);
  width: 4px;
}

.range-slider .noUi-vertical .noUi-handle {
  left: -14px;
  top: -4px;
}

.range-slider .noUi-pips-vertical {
  padding: var(--space-none) var(--space-none) var(--space-none) 12px;
}

.range-slider .noUi-value-vertical {
  padding-left: var(--space-s);
}

.range-slider [data-isdisabled="true"] {
  pointer-events: none;
}

.range-slider [data-isdisabled="true"].noUi-target {
  background-color: var(--color-neutral-4);    
}

.range-slider [data-isdisabled="true"] .noUi-connect {
  background-color: var(--color-neutral-7);     
}

.range-slider [data-isdisabled="true"] .noUi-handle {
  background-color: var(--color-input-background-light-gray);
  border: none;
  box-shadow: none;
}

.range-slider [data-isdisabled="true"] .noUi-handle:before, 
.range-slider [data-isdisabled="true"] .noUi-handle:after {
  border: none;
}

.range-slider [data-isdisabled="true"] .noUi-pips {
  color: var(--color-neutral-7);
}

/* RangeSlider Service Studio Styles */
.range-slider {
  
}

.range-slider .range-slider-object {
  
  
  
  
  
}

.range-slider .range-slider-object:after {
  
  
  
  
  
  
  
}

.range-slider.interval .range-slider-object:after {
  
}

.range-slider:before,
.range-slider:after {
  
  
  
  
  
  
  
  
  
  
  
  
}

.range-slider.interval:after {
  
}


/* $4.2.10 - Patterns - Controls - Search */
.search .input-with-icon .input-with-icon-content-icon + .input-with-icon-input input {
  padding: 0 var(--space-l);
}

.search .input-with-icon .input-with-icon-content-icon + .input-with-icon-input input.normal-spacing {
  padding: 0 var(--space-s);
}


/* $4.2.11 - Patterns - Controls - SearchBalloon */
.search-balloon {
  position: relative;   
}

.search-balloon [data-balloon="balloon"] {
  cursor: auto;
}

.search-balloon .tippy-popper {
  width: 100% !important;   
}

.search-balloon .balloon {
  max-width: 100%;
  width: 100%;
}

.search-balloon-answers {
  position: relative;
  background: var(--color-neutral-0);
}

.search-balloon .tippy-arrow {
  display: none;
}

.search-balloon .tippy-tooltip {
  max-height: 300px;
  overflow-y: auto;
  padding: var(--space-s) var(--space-none);
}

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

.search-balloon .tippy-popper[x-placement^=bottom] .tippy-tooltip {
 -webkit-transform: translateY(var(--space-xs));
         transform: translateY(var(--space-xs));
}

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

.search-balloon a:hover {
  background-color: var(--color-neutral-2);
}


/* $4.2.12 - Patterns - Controls - TimePicker */
.time-picker .dropdown-content-list .time-option[disabled="disabled"] {
  color: var(--color-neutral-7);
}

.time-picker .select {
  background-color: transparent;
  border-radius: 0;
  border: 0;
  height: 100%;
  padding: 0;
  position: relative;
}

.time-picker .select:hover,
.time-picker .select:focus {
  border: 0;
}

.time-picker .is--visible .dropdown-header.select {
  border: 0;
}

.time-picker .dropdown-header-text {
  width: 100%;
}

.time-picker .dropdown-icon {
  position: absolute;
  right: 16px;
  top: 8px
}

.time-picker .dropdown-content {
 
}

.time-option-selected {
  background-color: var(--color-neutral-2);
}

.is-rtl .time-picker .dropdown-icon {
  left: 16px;
  right: auto;
}


/* $4.2.13 - Patterns - Controls - ToogleButton */
.toggle-button {
  background-color: #a7a9ac;
  border-radius: 50px;
  border: 0px solid var(--color-neutral-5);
  display: inline-flex;
  height: 20px;
  margin-bottom: var(--space-s);
  position: relative;
  -webkit-transition: all 180ms linear;
          transition: all 180ms linear;
  width: 40px;
  top: 5px;
}

.toggle-button:hover {
  background-color: #d1d3d4;
  border: 0px solid var(--color-neutral-6);    
}

.toggle-button.toggle-button-checked {
  background-color: var(--color-button);
  border: 0px solid #ffffff;
} 

.toggle-button.toggle-button-checked:hover {
  -webkit-filter: brightness(.95);
          filter: brightness(.95);
}

.toggle-button.toggle-button-disabled {
  background-color: var(--color-input-background-light-gray);
  border: none;
  pointer-events: none;
}

.toggle-button:after {
  background-color: var(--color-neutral-0);
  border-radius: var(--border-radius-rounded);
  border: var(--border-size-none);
  content: '';
  height: 16px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 2px;
  -webkit-transform: translateX(3px) translateZ(0);
  transform: translateX(3px) translateZ(0);
  -webkit-transition: all 180ms linear;
  transition: all 180ms linear;
  width: 16px;
}

.toggle-button.toggle-button-checked:after {
  -webkit-transform: translateX(21px) translateZ(0);
          transform: translateX(21px) translateZ(0);
}

.toggle-button.toggle-button-disabled:after {
  background-color: var(--color-neutral-5);    
}

.toggle-button .checkbox {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  width: 100%;  
}

/* $4.2.14 - Patterns - Controls - Video */

/* $4.2.15 - Fake input  */

.fake-input {
  height: 30px;
  font-size: 13px;
  color: #000;
  background: var(--color-input-background-gray);
  padding: 0 30px 0 10px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fake-input .fake-input-icon {
  position: absolute;
  right: 10px;
  top: 0;
  height: 30px;
  line-height: 30px;
}

.fake-input.disabled {
  background: white;
  color: #000;
}

.fake-input.disabled .fake-input-icon {
  right: 0;
}

/* ================================================================ */
/*  $4.3 - Patterns - Layouts                                       */
/* ================================================================ */

/* $4.3.1 - Patterns - Layouts - Logins */
.layout-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
  height: 100%;
  position: relative;
}

.layout-login > .columns {
  width: 100%;
}

.layout-login > .columns > .columns-item {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
}
.layout-login > .columns > .columns-item > .layout-login-background {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.layout-login > .columns > .columns-item > .layout-login-background * {
  position: relative;
  z-index: 2;
}

.layout-login > .columns > .columns-item > img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
}

.layout-login-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
  min-width: 435px;
  position: relative;
  z-index: 2;
}

.layout-login-simple .layout-login-background {
  background-color: var(--color-primary);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.layout-login-simple .layout-login-background > img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.layout-login-simple .layout-login-form-content {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  position: relative;
  width: 100%;
  z-index: 2;
}

.layout-login-simple .layout-login-form {
  background-color: var(--color-neutral-0);
  border-radius: var(--border-radius-soft);
  box-shadow: var(--shadow-l);
  padding: var(--space-xxl);
}

.phone .layout-login-simple .layout-login-form-content,
.phone .layout-login > .columns > .columns-item {
  -webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
}

.phone .layout-login-form {
  margin: 0;
  min-width: auto;
  padding: 0;
  width: 100%;
}

.phone .layout-login-simple .layout-login-form {
  margin: var(--space-xl) var(--space-base);
}


/* ================================================================ */
/*  $4.4 - Patterns - Navigation                                    */
/* ================================================================ */

/* $4.4.1 - Patterns - Navigation - Breadcrumbs */
.breadcrumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

.breadcrumbs-item {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  color: var(--color-neutral-8);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.breadcrumbs-item .icon {
  color: var(--color-neutral-6);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  margin: var(--space-none) var(--space-s);
}

.breadcrumbs-item .icon .fa-fw {
  font-size: var(--font-size-xs);
  width: auto;
}

/* $4.4.2 - Patterns - Navigation - NavigationBar */
.navigation-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.phone .navigation-bar {
  position: relative;
}

.navigation-bar.is--sticky {
  position: -webkit-sticky;
  position: sticky;
}

.ie10 .is--sticky,
.ie11 .is--sticky {
  position: fixed;
}

.navigation-bar a,
.navigation-bar a:visited {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--color-neutral-8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.navigation-bar a:hover,
.navigation-bar-item-title:hover {
  color: var(--color-neutral-10);
}

.navigation-bar-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.navigation-bar-item-title {
  color: var(--color-neutral-10);
  cursor: pointer;
  font-size: 15px;
  font-weight: var(--font-semi-bold);
  margin: var(--space-s) var(--space-none);
}

.navigation-bar-item-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-left: var(--space-base);
}

.navigation-bar-item-content a {
  margin: var(--space-xs) var(--space-none);
}

.navigation-bar-item.is--open .navigation-bar-item-title a {
  color: var(--color-neutral-10);
  font-weight: var(--font-semi-bold);
}

.navigation-bar-item.is--active .navigation-bar-item-title a {
  color: var(--color-neutral-10); 
  font-weight: var(--font-semi-bold);
}

.navigation-bar-item.is--active .navigation-bar-item-title {
  color: var(--color-neutral-10);
  font-weight: var(--font-semi-bold); 
}

.navigation-bar-item-subitem:not(:last-child) {
  margin-bottom: var(--space-s);
}

.navigation-bar-item-subitem {
  position: relative;
}

.navigation-bar-item-subitem:before {
  background: transparent;
  content: "";
  height: 100%;
  left: calc(-1 * var(--space-base));
  position: absolute;
  width: 2px;
}

.ListRecords .navigation-bar-item-title,
.ListRecords .navigation-bar-item-subitem {
  margin: var(--space-xs) 0;
}

.ListRecords .navigation-bar-item-subitem:last-child {
  margin-bottom: 0;
}

.navigation-bar-item-subitem.is--active,
.navigation-bar-item-subitem.is--active a,
.ListRecords .navigation-bar-item-subitem.is--active,
.ListRecords .navigation-bar-item-subitem.is--active a,
.navigation-bar-item-subitem:hover,
.navigation-bar-item-subitem:hover a,
.ListRecords .navigation-bar-item-subitem:hover,
.ListRecords .navigation-bar-item-subitem:hover a {
  color: var(--color-neutral-10);
  font-weight: var(--font-semi-bold);
}


.navigation-bar-item-subitem.is--active:before,
.ListRecords .navigation-bar-item-subitem.is--active:before,
.navigation-bar-item-subitem:hover:before,
.ListRecords .navigation-bar-item-subitem:hover:before {
  background: var(--color-neutral-10);
}

.navigation-bar-item-subitem.is--active,
.navigation-bar-item-subitem.is--active a,
.ListRecords .navigation-bar-item-subitem.is--active,
.ListRecords .navigation-bar-item-subitem.is--active a {
  color: var(--color-neutral-10);
  font-weight: var(--font-semi-bold);
}

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

.navigation-bar-item .navigation-bar-item-content,
.navigation-bar-item .navigation-bar-item-content.is--collapsed {
  height: 0;
  visibility: hidden;
}

.navigation-bar-item .navigation-bar-item-content.is--expanded {
  height: auto;
  visibility: visible;
}

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

.is-rtl .navigation-bar-item-content {
  padding-right: var(--space-base);
}

/* $4.4.3   - Patterns - Navigation - SectionIndex */
.section-index {
  border-left: var(--border-size-s) solid var(--color-neutral-4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.section-index.is--sticky {
  position: -webkit-sticky;
  position: sticky;
}

.section-index a,
.section-index a:visited {
  border-left: var(--border-size-m) solid transparent;
  color: var(--color-neutral-8);
  margin-bottom: var(--space-s);
  padding-left: var(--space-base);
}

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

.section-index-item {
  cursor: pointer;
}

.section-index-item:last-child {
  margin-bottom: var(--space-none);
}

a.section-index-item.is--active {
  border-left: var(--border-size-m) solid var(--color-primary);
  color: var(--color-neutral-9); 
  font-weight: var(--font-semi-bold);
}

.edge .section-index.is--sticky {
  position: fixed;
}

/* $4.4.4 - Patterns - Navigation - Sidebar */
.sidebar {
  
  
}

.sidebar-container {
  background: var(--color-neutral-0);
  box-shadow: var(--shadow-l);
  height: 100vh;
  position: fixed;
  overflow-y: auto;
  right: 0;
  top: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  width: 500px;
  z-index: 150;
  
  
  
}

.sidebar-header,
.sidebar-content {
  padding: var(--space-base) var(--space-m);
}

.sidebar-overlay {
  background-color: rgba(190, 190, 190, .25);
  cursor: pointer;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 103;
  
}

.sidebar.is--visible .sidebar-overlay {
  pointer-events: initial;
}

.phone .sidebar-container {
  width: 85vw;
}

/* Fix for usage inside tabs*/
.tabs .is--visible .sidebar-container.enter-right,
.tabs .is--hidden .sidebar-container.leave-right,
.tabs .is--visible .sidebar-overlay.enter-fade,
.tabs .is--hidden .sidebar-overlay.leave-fade {
  -webkit-animation-name: none;
          animation-name: none;
}

.tabs .sidebar-container,
.tabs .sidebar-overlay {
  transition: transform 1000ms ease-out, opacity 1000ms ease-out;
  will-change: transform, opacity;
}

.tabs .is--visible .sidebar-container {
  -webkit-transform: translateX(0) translateZ(0);
          transform: translateX(0) translateZ(0);
}

.tabs .is--visible .sidebar-overlay {
  opacity: 1;
}

/* $4.4.5 - Patterns - Navigation - Tabs */
.tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.tabs.tabs-vertical {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

/*SubTabs Styling*/
.SubTabs.tabs .tabs-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-y: hidden;
  width: 100%;
}

.SubTabs.tabs .tabs-header::after {
  background: #000;
  bottom: 0;
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
}

.SubTabs .tabs-header .active{
  border-bottom: var(--color-background-body) solid 1px;
  position: inherit;
  top: 1px;
}

.tabs .tabs-header .ListRecords {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.tabs.justified .tabs-header {
  width: 100%;
}

.SubTabs .tabs-header-item {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--color-neutral-8);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: var(--space-s);
  padding: var(--space-xs) var(--space-m);
  -webkit-transition: none;
  transition: none;
}

.SubTabs .tabs-header-item > div,
.SubTabs .tabs-header-item > a {
    padding: var(--space-xs) var(--space-m);
    margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-m));
    position: relative;
    top: 0px;
    left: 0;
    bottom: -5px;
}

.SubTabs .tabs-header-item::after {
  display: none;
}

.tabs-header-item:first-child {
  margin-left: var(--space-none);
}

.SubTabs .tabs-header-item:hover {
  border-bottom: 0px solid transparent;
  color: var(--color-neutral-10);
  font-weight: normal;
  transition: none;
}

.SubTabs .tabs-header-item.active {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: solid 1px var(--color-background-body);
  color: var(--color-neutral-10);
  font-weight: var(--font-bold);
  z-index: 1;
}


/**/


/* Modal tabs styling */
.ModalTabsWrapper {
    background-color: var(--color-neutral-2);
    padding: var(--space-l);
}

.ModalTabs .TableRecords .TableRecords_EvenLine {
    background-color: var(--color-neutral-4);
}

.ModalTabs .tabs-header-item.active {
    color: var(--color-neutral-9);
    font-weight: var(--font-semi-bold);
    border: 0;
    font-size: var(--font-size-s);
    background: var(--color-neutral-4);
}

.ModalTabs.tabs .tabs-header::after {
    background: var(--color-neutral-4);
    height: 2px;
}

/* 
Commented due to IMS-11559 request

.ModalTabs.tabs.tabs-no-js-links .tabs-header-item > a:hover {
    background: var(--color-neutral-4);
}

*/


.tabs-header-item .fa-fw {
  margin-right: var(--space-s);
  width: auto;
}

.tabs-header-item.active .fa-fw {
  color: var(--color-primary);
}

.tabs-header-item .badge {
  margin-left: var(--space-s);
}

.tabs.justified .tabs-header-item {
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  margin-left: var(--space-none);
}

.tabs .tabs-content {
  border-top: 0px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  margin-top: -1px;
  padding: var(--space-l) var(--space-none);
  position: relative;
  width: 100%;
  z-index: auto;
}

.tabs .tabs-content-item:not(.active) {
  display: none;
}

.tabs.tabs-vertical .tabs-header,
.tabs.tabs-vertical .tabs-header .ListRecords {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  width: auto;
  word-break: initial;
}


.tabs.tabs-vertical.justified .tabs-header {
  height: auto;
}

.tabs.tabs-vertical .tabs-header-item {
  border-bottom: var(--border-size-none);
  border-right: var(--border-size-m) solid transparent;
  -webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;
  margin-left: var(--space-none);
  padding: var(--space-s) var(--space-m) var(--space-s) var(--space-none);
}

.tabs.tabs-vertical .tabs-header-item.active {
  border-right: var(--border-size-m) solid var(--color-primary);
}

.tabs.tabs-vertical .tabs-content {
  border-left: var(--border-size-s) solid var(--color-neutral-5);
  border-top: var(--border-size-none);
  margin-left: -1px;
  margin-top: var(--space-none);
  padding: var(--space-none) var(--space-m);
}

.tabs.tabs-vertical.tabs-header-right .tabs-header {
  -webkit-box-ordinal-group: 3;
             -ms-flex-order: 2;
                      order: 2;
}

.tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item {
  border-left: var(--border-size-m) solid transparent;
  border-right: var(--border-size-none);
  padding: var(--space-s) var(--space-none) var(--space-s) var(--space-m);
}

.tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item.active {
  border-left: var(--border-size-m) solid var(--color-primary);
}

.tabs.tabs-vertical.tabs-header-right .tabs-content {
  border-left: var(--border-size-none);
  border-right: var(--border-size-s) solid var(--color-neutral-5);
  margin-left: var(--space-none);
  margin-right: -1px
}

.phone .tabs .tabs-header,
.tablet .tabs .tabs-header {
  overflow-x: auto;
}

.phone .tabs-header-item,
.tablet .tabs-header-item {
  flex: 1 0 auto;
}

/* Tabs Patterns inside Card Pattern */
.card > .tabs:not(.justified) .tabs-header {
  padding: var(--space-none) var(--space-m);
}

.card > .tabs.tabs-vertical .tabs-header {
  padding: var(--space-none);
}

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

.card > .tabs.tabs-vertical .tabs-header-item {
  padding: var(--space-base) var(--space-m) var(--space-base) var(--space-m);
}

.card > .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item {
  padding: var(--space-base) var(--space-m) var(--space-base) var(--space-m);
}


/* 4.4.5+  TopTabs Styling */
.tabs .tabs-header.TopTabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  border-bottom: 0px solid;
}

.tabs-header-item{
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: none;
  color: var(--color-neutral-10);
  font-size:15px;
  line-height:25px;
  position: relative;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: var(--space-none);
  padding: var(--space-xs) var(--space-m);
  -webkit-transition: none;
  transition: none;
  font-weight: normal;
}

.tabs-header-item::after {
  background: #000;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
}

.tabs-header-item:hover::after,
.tabs-header-item.active::after {
  content: "";
  height: 2px;
}

.tabs-header-item:hover,
.tabs-header-item.active {
  color: var(--color-neutral-10);
  border-bottom: none;
}

.tabs-header-item.active {
  background-color: var(--color-background-body);
  border-top: 0px solid black;
  border-left: 0px solid black;
  border-right: 0px solid black;
  font-weight: var(--font-bold);
  font-size: 15px;
}


/* $4.4.6 - Patterns - Navigation - Timeline */

.timeline-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
}

.timeline-item-left {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
  margin-right: var(--space-base);
  padding: 0 var(--space-none) var(--space-none);
}

.timeline-item-icon {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  border-radius: var(--border-radius-circle);
  color: var(--color-neutral-0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 26px;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
  justify-content: center;
  width: 26px;
}

.timeline-item-icon .fa-fw {
  font-size: var(--font-size-s);
  position: relative;
  width: auto;
}

.timeline-item-icon .fa-phone {
  bottom: -1px;
}

.timeline-item-icon:empty {
  height: 8px;
  width: 8px;
}

.timeline-item-separator {
  background-color: var(--color-table-header);
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  margin: var(--space-xs) var(--space-none);
  width: 2px;
}

.timeline-item:last-child .timeline-item-separator {
  display: none;
}

.timeline-item-right {
  line-height: 20px;
  padding-bottom: var(--space-l);
  margin-bottom: 0;
  width: 100%;
}

.timeline-item:last-child .timeline-item-right {
  padding-bottom: var(--space-none);
}

.timeline-item-date {
  margin-bottom: 0;
}

.timeline-item:not(.timeline-item--labelled) .timeline-item-date span {
  color: var(--color-label);
  font-size: var(--font-size-m);
}

.timeline-item__side-label {
    color: var(--color-label);
    position: relative;
    text-align: right;
    top: -30px;
    width: 60px;
}

.timeline-item--labelled .timeline-item-icon {
    color: unset;
}

/* $4.4.7 - Patterns - Navigation - Wizard */
.wizard-item {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  position: relative;
  width: 100%;
}

.wizard-item.label-top .wizard-item-icon-wraper {
  -webkit-box-ordinal-group: 3;
             -ms-flex-order: 2;
                      order: 2;
}

.wizard-item.label-top .wizard-item-label {
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  -webkit-box-ordinal-group: 2;
             -ms-flex-order: 1;
                      order: 1;
}

.ie11 .wizard.flex-direction-row .wizard-item.label-top .wizard-item-label,
.ie10 .wizard.flex-direction-row .wizard-item.label-top .wizard-item-label {
  -webkit-box-flex: 0;
          -ms-flex: none;
              flex: none;    
}

.wizard-item-icon:empty {
  height: 8px;
  width: 8px;
}

.wizard-item-icon {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--color-input-background-gray);
  border-radius: var(--border-radius-circle);
  border: 4px solid var(--color-input-background-gray);
  color: var(--color-input-background-gray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 20px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  width: 20px;
  z-index: 2;
}

.wizard-item-icon a {
  border-radius: var(--border-radius-circle);
  color: var(--color-input-background-gray);
}

.wizard-item.active .wizard-item-icon {
  background-color: var(--color-secondary);
  border-color: var(--color-input-background-gray);
  color: var(--color-secondary);
}

.wizard-item.active .wizard-item-icon a {
  border-color: var(--color-input-background-gray);
  color: var(--color-secondary);
}

.wizard-item.past .wizard-item-icon {
  background-color: var(--color-neutral-7);
  border-color: var(--color-input-background-gray);
  color: var(--color-neutral-7);
}

.wizard-item.past .wizard-item-icon a {
  border-color: var(--color-input-background-gray);
  color: var(--color-neutral-7);
}

.wizard-item-icon .fa-fw {
  font-size: var(--font-size-xs);
  width: auto;
}

.wizard-item-icon-wraper {
  margin: var(--space-s) var(--space-none);
  position: relative;
  width: 100%;
}

.wizard-item .wizard-item-icon-wraper:before {
  content: '';
  height: 2px;
  position: absolute;
  right: calc(50% + 8px);
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: calc(100% - 18px);
  z-index: 0;
}

.wizard-item.past .wizard-item-icon-wraper:before {
  background-color: var(--color-neutral-5);
}

.wizard-item.active .wizard-item-icon-wraper:before {
  background-color: var(--color-neutral-5);
}

.wizard-item.next .wizard-item-icon-wraper:before {
  background-color: var(--color-neutral-5);
}

.wizard-item:first-child .wizard-item-icon-wraper:before {
  content: none;
}

.wizard-item-label {
  color: var(--color-neutral-7);
  text-align: center;
}

.wizard-item.past .wizard-item-label {
  color: var(--color-neutral-8);
}

.wizard-item.active .wizard-item-label {
  color: var(--color-neutral-10);
}

.wizard-item.next .wizard-item-icon .fa-fw {
  color: var(--color-neutral-5);
}

.wizard-vertical .wizard-item {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
  margin-bottom: var(--space-l);
}

.wizard-vertical .wizard-item:last-child {
  margin-bottom: var(--space-none);
}

.wizard-vertical .wizard-item-icon-wraper {
  margin: var(--space-none) var(--space-s) var(--space-none) var(--space-none);
  width: auto;
}

.wizard-vertical .wizard-item .wizard-item-icon-wraper:before {
  bottom: calc(50% + 12px);
  height: calc(100% + 18px);
  left: 50%;
  top: auto;
  -webkit-transform: translateY(0) translateX(-50%);
          transform: translateY(0) translateX(-50%);
  width: 2px;
}

.wizard-vertical .wizard-item.label-top .wizard-item-label {
  text-align: right;
}

.wizard-vertical .wizard-item.label-top .wizard-item-icon-wraper {
  margin: var(--space-none) var(--space-none) var(--space-none) var(--space-s);
}

.wizard .ListRecords {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.wizard-vertical .ListRecords {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}

.ie11 .wizard-vertical .wizard-item {
  -webkit-box-flex: 0;
          -ms-flex: none;
              flex: none;
}



/* ================================================================ */
/*  $4.5 - Patterns - Numbers                                       */
/* ================================================================ */

/* $4.5.1 - Patterns - Numbers - Badge */
.badge {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  background-color: var(--color-primary);
  color: var(--color-neutral-0);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: var(--font-semi-bold);
  height: 32px;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  min-width: 32px;
  line-height: 1;
}

.badge-small {
  font-size: var(--font-size-xs);
  height: 24px;
  min-width: 24px;
  padding: var(--space-none) var(--space-xs);
}

.badge-medium {
  font-size: var(--font-size-base);
  height: 40px;
  min-width: 40px;
}

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

/* $4.5.2 - Patterns - Numbers - Counter */
.counter {
  background-color: var(--color-neutral-0);
  border: var(--border-size-s) solid var(--color-neutral-4);
  box-shadow: var(--shadow-none);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  padding: var(--space-none) var(--space-m);
}

.counter .center-align {
  width: 100%;
}

.counter .center-align.flex-direction-column {
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
}

.counter .center-align.flex-direction-row {
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}

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


/* $4.5.3 - Patterns - Numbers - IconBadge */
.badge-icon {
  margin-right: var(--space-s);
  position: relative;
}

.badge-icon .badge {
  border-radius: var(--border-radius-rounded);
  font-size: var(--font-size-xs);
  height: 18px;
  left: 35%;
  min-width: 18px;
  padding: var(--space-none) var(--space-xs);
  position: absolute;
  top: 0;
  -webkit-transform: translateY(-40%);
          transform: translateY(-40%);
  white-space: nowrap;
}


.badge-icon .icon { 
  color: var(--color-neutral-7); 
}


/* $4.5.4 - Patterns - Numbers - ProgressBar */
.progress-container,
.progress-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.progress-container.flex-direction-column .progress-content .progress-title,
.progress-container.flex-direction-column .progress-content .progress-value { 
  margin-bottom: var(--space-s); 
}

.progress-container.flex-direction-row .progress { 
  margin-right: var(--space-none); 
}

.progress-container.flex-direction-row {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
}

.progress-container .progress {
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
}

.ie11 .progress-container.flex-direction-column .progress,
.ie10 .progress-container.flex-direction-column .progress {
  -webkit-box-flex: 0;
          -ms-flex: none;
              flex: none;
}

.progress-container .progress-content {
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}

.progress-container.flex-direction-row .progress-title { 
  display: block; 
}

.progress-container .progress-title { 
  text-align: left;
  width: 15px;
}

.progress-container .progress-value {
  margin-right: var(--space-s);
  width: 60px;
}

.progress {
  background-color: var(--color-neutral-3);
  height: 100%;
}

.progress-bar-extra-small {
  height: var(--space-xs); 
}

.progress-bar-small { 
  height: var(--space-s); 
}

.progress-bar-base { 
  height: var(--space-base); 
}


/* $4.5.5 - Patterns - Numbers - ProgressCircle */
.progress-circle {
  padding-top: 100%;
  position: relative;
  
  
  
  
  
}

.progress-circle-content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);    
          transform: translate(-50%, -50%);
}

.progress-semi-circle-content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);    
          transform: translate(-50%, -50%);
}

.progress-circle-content,
.progress-semi-circle-content {
  text-align: center;
}

.progress-circle svg {
  left: 0; 
  position: absolute;
  stroke-linecap: round;
  top: 0;
}


/* $4.5.6 - Patterns - Numbers - UserAvatar */
.user-avatar {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  background-color: var(--color-primary);
  color: var(--color-neutral-0);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: var(--font-semi-bold);
  height: 32px;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  text-transform: uppercase;
  width: 32px;
}

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

.user-avatar-small {
  font-size: var(--font-size-xs);
  height: 24px;
  width: 24px;
}

.user-avatar-medium {
  font-size: var(--font-size-base);
  height: 40px;
  width: 40px;
}

/* ================================================================ */
/*  $4.6 - Patterns - Responsive                                    */
/* ================================================================ */

/* $4.6.1 - Patterns - Responsive - DisplayOnDevice */


/* $4.6.2 - Patterns - Responsive - LoadOnVisible */


/* $4.6.3 - Patterns - Responsive - MoveOnDevice */


/* $4.6.4 - Patterns - Responsive - ResponsiveTables */

/* Expanded Row */
.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child .TableRecords_Label,
.phone .expandable-row .TableRecords tbody tr td:first-child .TableRecords_Label {
  display: none;    
}

.tablet.portrait .expandable-row .TableRecords tbody tr td:not(:first-child),
.phone .expandable-row .TableRecords tbody tr td:not(:first-child) {
  display: none;
}

.tablet.portrait .expandable-row .TableRecords tbody tr.TableRecords_ExpandedRow td:not(:first-child),
.phone .expandable-row .TableRecords tbody tr.TableRecords_ExpandedRow td:not(:first-child) {
  display: flex;
}

.tablet.portrait .table-records-responsive.expandable-row .TableRecords tbody tr td:first-child, 
.phone .table-records-responsive.expandable-row .TableRecords tbody tr td:first-child {
  border-bottom: var(--border-size-s) solid var(--color-neutral-4);
  display: block;
  overflow: hidden;
  padding-bottom: var(--space-base);
  padding-right: var(--space-xxl);
  position: relative;
  text-overflow: ellipsis;
  -webkit-transition: none;
  transition: none;
  white-space: nowrap;
}

.tablet.portrait .expandable-row .TableRecords tbody tr td:nth-child(2),
.phone .expandable-row .TableRecords tbody tr td:nth-child(2) {
  padding-top: var(--space-none);
}

.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child:after,
.phone .expandable-row .TableRecords tbody tr td:first-child:after {
  color: var(--color-primary);
  content: "\f107";
  font: normal normal normal 24px/1 FontAwesome;
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);    
          transform: translateY(-50%);
  -webkit-transition: transform 180ms linear;
          transition: transform 180ms linear;
  width: 16px;
}

.tablet.portrait .expandable-row .TableRecords tbody .TableRecords_ExpandedRow td:first-child:after,
.phone .expandable-row .TableRecords tbody .TableRecords_ExpandedRow td:first-child:after {
  -webkit-transform: translateY(-50%) rotate(180deg);    
          transform: translateY(-50%) rotate(180deg);  
}

.tablet.portrait .expandable-row .TableRecords tbody td:first-child,
.phone .expandable-row .TableRecords tbody td:first-child {
  border-bottom: var(--border-size-s) solid var(--color-neutral-4);    
}

.tablet.portrait .expandable-row .TableRecords tbody tr.TableRecords_ExpandedRow td:first-child, 
.phone .expandable-row .TableRecords tbody tr.TableRecords_ExpandedRow td:first-child {
  font-weight: var(--font-semi-bold);
  border-bottom: var(--border-size-s) solid transparent;
}


/* Scrollable Row */
.tablet.portrait .table-records-responsive.scrollable-row .TableRecords .TableRecords_Label, 
.phone .table-records-responsive.scrollable-row .TableRecords .TableRecords_Label {
  display: none;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords thead, 
.phone .table-records-responsive.scrollable-row .TableRecords thead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords thead tr,
.phone .table-records-responsive.scrollable-row .TableRecords thead tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords thead th,
.phone .table-records-responsive.scrollable-row .TableRecords thead th {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  border-right: var(--border-size-s) solid var(--color-neutral-4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  height: auto;
  padding: var(--space-base) var(--space-m);
  pointer-events: none;
  width: 100% !important;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords thead th:last-child,
.phone .table-records-responsive.scrollable-row .TableRecords thead th:last-child {
  border-bottom: var(--border-size-s) solid transparent;
  border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody, .phone .table-records-responsive.scrollable-row .TableRecords tbody {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  overflow-x: auto;
  position: relative;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody tr,
.phone .table-records-responsive.scrollable-row .TableRecords tbody tr {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody tr td,
.phone .table-records-responsive.scrollable-row .TableRecords tbody tr td {
  border-bottom: var(--border-size-s)solid var(--color-neutral-4);
  border-right: var(--border-size-s)solid var(--color-neutral-4);
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  padding: var(--space-base) var(--space-m);
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody tr:last-child td,
.phone .table-records-responsive.scrollable-row .TableRecords tbody tr:last-child td {
  border-bottom: var(--border-size-s) solid var(--color-neutral-4);
  border-right: var(--border-size-s) solid transparent;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody tr td:not(:last-child),
.phone .table-records-responsive.scrollable-row .TableRecords tbody tr td:not(:last-child) {
  border-bottom: var(--border-size-s) solid var(--color-neutral-4);    
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords tbody tr td:last-child,
.phone .table-records-responsive.scrollable-row .TableRecords tbody tr td:last-child {
  border-bottom: var(--border-size-s) solid transparent;
}

.tablet.portrait .table-records-responsive.scrollable-row .TableRecords thead th .checkbox,
.phone .table-records-responsive.scrollable-row .TableRecords thead th .checkbox {
  pointer-events: auto;
}


/* ================================================================ */
/*  $4.7 - Patterns - Structure                                     */
/* ================================================================ */

/* $4.7.1 - Patterns - Structure - AlignCenter */
.center-align {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  height: 100%;
  width: 100%;
}

.center-align.flex-direction-column {
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
}


/* $4.7.2 - Patterns - Structure - Columns */
.columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.columns.gutter-none {
  margin-left: var(--space-none);
  margin-right: var(--space-none);
}

.columns.gutter-xs {
  margin-left: calc(-1 * var(--space-xs) / 2);
  margin-right: calc(-1 * var(--space-xs) / 2);
}

.columns.gutter-s {
  margin-left: calc(-1 * var(--space-s) / 2);
  margin-right: calc(-1 * var(--space-s) / 2);
}

.columns.gutter-base {
  margin-left: calc(-1 * var(--space-base) / 2);
  margin-right: calc(-1 * var(--space-base) / 2);
}

.columns.gutter-m {
  margin-left: calc(-1 * var(--space-m) / 2);
  margin-right: calc(-1 * var(--space-m) / 2);
}

.columns.gutter-l {
  margin-left: calc(-1 * var(--space-l) / 2);
  margin-right: calc(-1 * var(--space-l) / 2);
}

.columns.gutter-xl {
  margin-left: calc(-1 * var(--space-xl) / 2);
  margin-right: calc(-1 * var(--space-xl) / 2);
}

.columns.gutter-xxl {
  margin-left: calc(-1 * var(--space-xxl) / 2);
  margin-right: calc(-1 * var(--space-xxl) / 2);
}

.columns > .columns-item {
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
}

.columns.columns-small-left > .columns-item:last-child,
.columns.columns-small-right > .columns-item:first-child {
  -webkit-box-flex: 3;
          -ms-flex: 3;
              flex: 3;
}

.columns.columns-medium-left > .columns-item:last-child,
.columns.columns-medium-right > .columns-item:first-child {
  -webkit-box-flex: 2;
          -ms-flex: 2;
              flex: 2;
}

.columns.gutter-none > .columns-item {
  margin-bottom: var(--space-none);
  padding: var(--space-none) var(--space-none);
}

.columns.gutter-xs > .columns-item {
  margin-bottom: var(--space-xs);
  padding: var(--space-none) calc(var(--space-xs) / 2);
}

.columns.gutter-s > .columns-item {
  margin-bottom: var(--space-s);
  padding: var(--space-none) calc(var(--space-s) / 2);
}

.columns.gutter-base > .columns-item {
  margin-bottom: var(--space-base);
  padding: var(--space-none) calc(var(--space-base) / 2);
}

.columns.gutter-m > .columns-item {
  margin-bottom: var(--space-m);
  padding: var(--space-none) calc(var(--space-m) / 2);
}

.columns.gutter-l > .columns-item {
  margin-bottom: var(--space-l);
  padding: var(--space-none) calc(var(--space-l) / 2);
}

.columns.gutter-xl > .columns-item {
  margin-bottom: var(--space-xl);
  padding: var(--space-none) calc(var(--space-xl) / 2);
}

.columns.gutter-xxl > .columns-item {
  margin-bottom: var(--space-xxl);
  padding: var(--space-none) calc(var(--space-xxl) / 2);
}

.columns .columns-item > .card { 
  height: 100%; 
}

.columns:only-child > .columns-item { 
  margin-bottom: var(--space-none); 
}

/* Columns Responsive */
.tablet .columns.tablet-break-first > .columns-item:first-child,
.phone .columns.phone-break-first > .columns-item:first-child,
.tablet .columns.tablet-break-last > .columns-item:last-child,
.phone .columns.phone-break-last > .columns-item:last-child,
.tablet .columns.tablet-break-all > .columns-item,
.phone .columns.phone-break-all > .columns-item {
  -webkit-box-flex: 0;
          -ms-flex: none;
              flex: none;
  width: 100%;
}

.tablet .columns.columns2.tablet-break-middle > .columns-item,
.phone .columns.columns2.phone-break-middle > .columns-item,
.tablet .columns.columns3.tablet-break-middle > .columns-item:last-child,
.phone .columns.columns3.phone-break-middle > .columns-item:last-child,
.tablet .columns.columns-small-left.tablet-break-middle > .columns-item,
.phone .columns.columns-small-left.phone-break-middle > .columns-item,
.tablet .columns.columns-medium-left.tablet-break-middle > .columns-item,
.phone .columns.columns-medium-left.phone-break-middle > .columns-item,
.tablet .columns.columns-small-right.tablet-break-middle > .columns-item,
.phone .columns.columns-small-right.phone-break-middle > .columns-item,
.tablet .columns.columns-medium-right.tablet-break-middle > .columns-item,
.phone .columns.columns-medium-right.phone-break-middle > .columns-item {
  -webkit-box-flex: 0;
          -ms-flex: none;
              flex: none;
  width: 100%;
}

.tablet .columns.columns4.tablet-break-middle > .columns-item,
.phone .columns.columns4.phone-break-middle > .columns-item {
  -webkit-box-flex: 0;
          -ms-flex: none;
              flex: none;
  width: 50%;
}

.tablet .columns.columns5.tablet-break-middle > .columns-item:nth-child(1),
.tablet .columns.columns5.tablet-break-middle > .columns-item:nth-child(2),
.tablet .columns.columns5.tablet-break-middle > .columns-item:nth-child(3),
.phone .columns.columns5.phone-break-middle > .columns-item:nth-child(1),
.phone .columns.columns5.phone-break-middle > .columns-item:nth-child(2),
.phone .columns.columns5.phone-break-middle > .columns-item:nth-child(3),
.tablet .columns.columns6.tablet-break-middle > .columns-item:nth-child(1),
.tablet .columns.columns6.tablet-break-middle > .columns-item:nth-child(2),
.tablet .columns.columns6.tablet-break-middle > .columns-item:nth-child(3),
.phone .columns.columns6.phone-break-middle > .columns-item:nth-child(1),
.phone .columns.columns6.phone-break-middle > .columns-item:nth-child(2),
.phone .columns.columns6.phone-break-middle > .columns-item:nth-child(3) {
  -webkit-box-flex: 0;
          -ms-flex: none;
              flex: none;
  width: 33.333%;
}

.tablet .columns.gutter-xs.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xs.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xs.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xs.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xs.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xs.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xs.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xs.phone-break-all:only-child > .columns-item:not(:last-child) {
  margin-bottom: var(--space-xs);       
}

.tablet .columns.gutter-s.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-s.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-s.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-s.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-s.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-s.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-s.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-s.phone-break-all:only-child > .columns-item:not(:last-child) {
  margin-bottom: var(--space-s);       
}

.tablet .columns.gutter-base.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-base.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-base.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-base.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-base.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-base.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-base.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-base.phone-break-all:only-child > .columns-item:not(:last-child) {
  margin-bottom: var(--space-base);       
}

.tablet .columns.gutter-m.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-m.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-m.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-m.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-m.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-m.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-m.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-m.phone-break-all:only-child > .columns-item:not(:last-child) {
  margin-bottom: var(--space-m);       
}

.tablet .columns.gutter-l.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-l.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-l.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-l.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-l.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-l.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-l.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-l.phone-break-all:only-child > .columns-item:not(:last-child) {
  margin-bottom: var(--space-l);       
}

.tablet .columns.gutter-xl.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xl.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xl.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xl.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xl.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xl.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xl.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xl.phone-break-all:only-child > .columns-item:not(:last-child) {
  margin-bottom: var(--space-xl);       
}

.tablet .columns.gutter-xxl.tablet-break-first:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xxl.phone-break-first:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xxl.tablet-break-last:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xxl.phone-break-last:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xxl.tablet-break-middle:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xxl.phone-break-middle:only-child > .columns-item:not(:last-child),
.tablet .columns.gutter-xxl.tablet-break-all:only-child > .columns-item:not(:last-child),
.phone .columns.gutter-xxl.phone-break-all:only-child > .columns-item:not(:last-child) {
  margin-bottom: var(--space-xxl);       
}

/* $4.7.3 - Patterns - Structure - Gallery */
.gallery-content,
.gallery-content.ListRecords {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.gallery-content.is--hidden {
  opacity: 0;
  
}

.gallery-content.is--visible {
  opacity: 1;
}

.gallery-content.is--hidden .gallery-item {
  transition: none;
}


/* ================================================================ */
/*  $4.8 - Patterns - Utilities                                     */
/* ================================================================ */

/* $4.8.1 - Patterns - Utilities - Animate */
.animate-wrapper {
  position: relative;
  
  
}

.animate {
  -webkit-animation-duration: 1000ms;
          animation-duration: 1000ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  will-change: transform;
}

.animate-slow {
  -webkit-animation-duration: 1500ms;
          animation-duration: 1500ms;
}

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

.animate-wrapper .animate:empty {
  
}

.is--visible .enter-fade {
  -webkit-animation-name: enter-fade;
          animation-name: enter-fade;
}

@-webkit-keyframes enter-fade {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes enter-fade {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

.is--visible .enter-top {
  -webkit-animation-name: enter-top;
          animation-name: enter-top;
}

@-webkit-keyframes enter-top {
  from {
      opacity: 0;
      -webkit-transform: translateX(0) translateY(-100%) translateZ(0);
  }
  to {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0) translateZ(0);
  }
}

@keyframes enter-top {
  from {
      opacity: 0;
      transform: translateX(0) translateY(-100%) translateZ(0);
  }
  to {
      opacity: 1;
      transform: translateX(0) translateY(0) translateZ(0);
  }
}

.is--visible .enter-right {
  -webkit-animation-name: enter-right;
          animation-name: enter-right;
}

@-webkit-keyframes enter-right {
  from {
      opacity: 0;
      -webkit-transform: translateX(100%) translateY(0) translateZ(0);
  }
  to {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0) translateZ(0);
  }
}

@keyframes enter-right {
  from {
      opacity: 0;
      transform: translateX(100%) translateY(0) translateZ(0);
  }
  to {
      opacity: 1;
      transform: translateX(0) translateY(0) translateZ(0);
  }
}

.is--visible .enter-bottom {
  -webkit-animation-name: enter-bottom;
          animation-name: enter-bottom;
}

@-webkit-keyframes enter-bottom {
  from {
      opacity: 0;
      -webkit-transform: translateX(0) translateY(100%) translateZ(0);
  }
  to {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0) translateZ(0);
  }
}

@keyframes enter-bottom {
  from {
      opacity: 0;
      transform: translateX(0) translateY(100%) translateZ(0);
  }
  to {
      opacity: 1;
      transform: translateX(0) translateY(0) translateZ(0);
  }
}

.is--visible .enter-left {
  -webkit-animation-name: enter-left;
          animation-name: enter-left;
}

@-webkit-keyframes enter-left {
  from {
      opacity: 0;
      -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
  }
  to {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0) translateZ(0);
  }
}

@keyframes enter-left {
  from {
      opacity: 0;
      transform: translateX(-100%) translateY(0) translateZ(0);
  }
  to {
      opacity: 1;
      transform: translateX(0) translateY(0) translateZ(0);
  }
}

.is--visible .enter-scale {
  -webkit-animation-name: enter-scale;
          animation-name: enter-scale;
}

@-webkit-keyframes enter-scale {
  from {
      opacity: 0;
      -webkit-transform: scale(.5) translateZ(0);
  }
  to {
      opacity: 1;
      -webkit-transform: scale(1) translateZ(0);
  }
}

@keyframes enter-scale {
  from {
      opacity: 0;
      transform: scale(.5) translateZ(0);
  }
  to {
      opacity: 1;
      transform: scale(1) translateZ(0);
  }
}

.is--hidden .leave-fade {
  -webkit-animation-name: leave-fade;
          animation-name: leave-fade;
  pointer-events: none;
}

@-webkit-keyframes leave-fade {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}

@keyframes leave-fade {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}

.is--hidden .leave-top {
  -webkit-animation-name: leave-top;
          animation-name: leave-top;
  pointer-events: none;
}

@-webkit-keyframes leave-top {
  from {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0) translateZ(0);
  }
  to {
      opacity: 0;
      -webkit-transform: translateX(0) translateY(-100%) translateZ(0);
  }
}

@keyframes leave-top {
  from {
      opacity: 1;
      transform: translateX(0) translateY(0) translateZ(0);
  }
  to {
      opacity: 0;
      transform: translateX(0) translateY(-100%) translateZ(0);
  }
}

.is--hidden .leave-right {
  -webkit-animation-name: leave-right;
          animation-name: leave-right;
  pointer-events: none;
}

@-webkit-keyframes leave-right {
  from {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0) translateZ(0);
  }
  to {
      opacity: 0;
      -webkit-transform: translateX(100%) translateY(0) translateZ(0);
  }
}

@keyframes leave-right {
  from {
      opacity: 1;
      transform: translateX(0) translateY(0) translateZ(0);
  }
  to {
      opacity: 0;
      transform: translateX(100%) translateY(0) translateZ(0);
  }
}

.is--hidden .leave-bottom {
  -webkit-animation-name: leave-bottom;
          animation-name: leave-bottom;
  pointer-events: none;
}

@-webkit-keyframes leave-bottom {
  from {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0) translateZ(0);
  }
  to {
      opacity: 0;
      -webkit-transform: translateX(0) translateY(100%) translateZ(0);
  }
}

@keyframes leave-bottom {
  from {
      opacity: 1;
      transform: translateX(0) translateY(0) translateZ(0);
  }
  to {
      opacity: 0;
      transform: translateX(0) translateY(100%) translateZ(0);
  }
}

.is--hidden .leave-left {
  -webkit-animation-name: leave-left;
          animation-name: leave-left;
  pointer-events: none;
}

@-webkit-keyframes leave-left {
  from {
      opacity: 1;
      -webkit-transform: translateX(0) translateY(0) translateZ(0);
  }
  to {
      opacity: 0;
      -webkit-transform: translateX(-100%) translateY(0) translateZ(0);
  }
}

@keyframes leave-left {
  from {
      opacity: 1;
      transform: translateX(0) translateY(0) translateZ(0);
  }
  to {
      opacity: 0;
      transform: translateX(-100%) translateY(0) translateZ(0);
  }
}

.is--hidden .leave-scale {
  -webkit-animation-name: leave-scale;
          animation-name: leave-scale;
  pointer-events: none;
}

@-webkit-keyframes leave-scale {
  from {
      opacity: 1;
      -webkit-transform: scale(1) translateZ(0);
  }
  to {
      opacity: 0;
      -webkit-transform: scale(.5) translateZ(0);
  }
}

@keyframes leave-scale {
  from {
      opacity: 1;
      transform: scale(1) translateZ(0);
  }
  to {
      opacity: 0;
      transform: scale(.5) translateZ(0);
  }
}

/* $4.8.2 - Patterns - Utilities - ButtonLoading */
button.OSFillParent {
display: inline-flex;
}

.is--loading .btn {
  pointer-events: none;
}

.btn-loading {
  display: none;
  position: absolute;
}

.btn-show-label .btn-loading {
  position: relative;
}

.is--loading .btn-loading {
  display: inline-flex;
}

.is--loading .btn-label {
  opacity: 0;   
}

.btn-show-label .btn-label {
  opacity: 1;
}

.btn-loading .loading-spinner {
  -webkit-animation: loadingSpinner 850ms cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite;
          animation: loadingSpinner 850ms cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite;
  border: var(--border-size-m) solid currentColor;
  border-radius: 100%;
  border-top: var(--border-size-m) solid transparent;
  height: 16px;
  width: 16px;
  will-change: transform;
}

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

@keyframes loadingSpinner {
0% {
  transform: rotate(0deg) translateZ(0);
}
100% {
  transform: rotate(360deg) translateZ(0);
}
}


/* $4.8.3 - Patterns - Utilities - CharacterCount */


/* $4.8.4 - Patterns - Utilities - FlipContent */
.flip-content {
  -webkit-perspective: 1000px;
          perspective: 1000px;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  will-change: transform;
}

.flip-content.is--click {
  cursor: pointer;
}

.flip-content .flip-content-front,
.flip-content .flip-content-back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: transform 600ms ease-out;
          transition: transform 600ms ease-out;
  width: 100%;
}

.flip-content .flip-content-front {
  position: relative;
}

.flip-content .flip-content-back { 
  -webkit-transform:  rotateY(-180deg) translateZ(0);
          transform:  rotateY(-180deg) translateZ(0);   

}

.flip-content.is--hover:hover .flip-content-front,
.flip-content.is--flipped .flip-content-front {
  -webkit-transform: rotateY(180deg) translateZ(0);
          transform: rotateY(180deg) translateZ(0);   
}

.flip-content.is--hover:hover .flip-content-back,
.flip-content.is--flipped .flip-content-back{
  -webkit-transform:  rotateY(0deg) translateZ(0);
          transform: rotateY(0deg) translateZ(0);   
}

.ie11 .flip-content .flip-content-front,
.ie11 .flip-content .flip-content-back {
  -webkit-backface-visibility: inherit;
          backface-visibility: inherit;
  -webkit-transition: all 600ms ease-out;
          transition: all 600ms ease-out;
}

.ie11 .flip-content .flip-content-back {
  opacity: 0;
}

.ie11 .flip-content.is--hover:hover .flip-content-back,
.ie11 .flip-content.is--flipped .flip-content-back {
  opacity: 1;
}

/* $4.8.5 - Patterns - Utilities - Fieldset */
fieldset {
  
  
  
  
  
}

.fieldset {
  border: 1px solid var(--color-neutral-4);
  border-radius: var(--border-radius-soft);
  margin: 0;
  padding: var(--space-m);
}

.fieldset-legend {
  color: var(--color-neutral-8);
  padding: 0 var(--space-xs);
  
  
  
  
}

/* $4.8.6 - Patterns - Utilities - FlipContent */


/* $4.8.7 - Patterns - Utilities - Iframe */


/* $4.8.8 - Patterns - Utilities - Separator */
.separator-vertical {
  display: inline-block;
  height: 100%;
  min-height: 20px;
  min-width: 1px;
  width: 1px;
}

.separator-horizontal {
  height: 1px;
  width: 100%;
}


/* $4.8.9 - Patterns - Utilities - StackedIcon */

/* ================================================================ */
/*  $5 - Widgets & RichWidgets                                      */
/* ================================================================ */

/* $5.1 - Widgets - Form / EditRecord */

.Form label {
  color: var(--color-label);
  font-weight:var(--font-regular);
}

.Form:not(.form-top) label {
  padding-top: 0px;
}

.layout .Form .input.ReadOnly:not(.Not_Valid),
.layout .Form .select.ReadOnly:not(.Not_Valid) {
  background-color: var(--color-neutral-0);
  border: none;
  border-radius:0px;
  color: var(--color-neutral-10);
}

.accordion .Form .input.ReadOnly:not(.Not_Valid),
.accordion .Form .select.ReadOnly:not(.Not_Valid),
.DetailBlockContentContainer .Form .input.ReadOnly:not(.Not_Valid),
.DetailBlockContentContainer .Form .select.ReadOnly:not(.Not_Valid),
.modal-content .Form .input.ReadOnly:not(.Not_Valid),
.modal-content .Form .select.ReadOnly:not(.Not_Valid),
.accordion .input, 
.accordion textarea.input, 
.accordion .select,
.DetailBlockContentContainer .input, 
.DetailBlockContentContainer textarea.input, 
.DetailBlockContentContainer .select,
.modal-content .input, 
.modal-content textarea.input, 
.modal-content .select,
.choices,
.PopUpLayoutMain .input, 
.PopUpLayoutMain textarea.input, 
.PopUpLayoutMain .select
.PopUpLayoutMain .Form .input.ReadOnly:not(.Not_Valid), 
.PopUpLayoutMain .Form .select.ReadOnly:not(.Not_Valid), 
.PopUpLayoutMain textarea.input,
.PopUpLayoutMain .input:not([disabled="disabled"]), 
.PopUpLayoutMain textarea.input:not([disabled="disabled"]), 
.PopUpLayoutMain .select:not([disabled="disabled"]),
.PopUpLayoutMain .Form input,
.PopUpLayoutMain .Form textarea,
.PopUpLayoutMain .Form select  {
  background-color:var(--color-input-background-gray);
}

.Form .input.ReadOnly:not(.Not_Valid)[readonly='readonly'],
.Form .select.ReadOnly:not(.Not_Valid)[disabled='disabled'],
.input.ReadOnly:not(.Not_Valid)[readonly='readonly'],
.select.ReadOnly:not(.Not_Valid)[disabled='disabled'],
.PopUpLayoutMain .input[disabled="disabled"], 
.PopUpLayoutMain textarea.input[disabled="disabled"], 
.PopUpLayoutMain .select[disabled="disabled"],
.PopUpLayoutMain .Form input[disabled="disabled"],
.PopUpLayoutMain .Form textarea[disabled="disabled"],
.PopUpLayoutMain .Form select[disabled="disabled"],
[disabled="disabled"],
[readonly="readonly"],
textarea[readonly="readonly"],
.accordion .input[readonly='readonly'],
.accordion .input[disabled='disabled'],
.accordion textarea.input[readonly='readonly'],
.accordion textarea.input[disabled='disabled'],
.accordion .select[readonly='readonly'],
.accordion .select[disabled='disabled'],
.DetailBlockContentContainer .input[readonly='readonly'],
.DetailBlockContentContainer .input[disabled='disabled'],
.DetailBlockContentContainer textarea.input[readonly='readonly'],
.DetailBlockContentContainer textarea.input[disabled='disabled'],
.DetailBlockContentContainer .select[readonly='readonly'],
.DetailBlockContentContainer .select[disabled='disabled'],
.modal-content .input[readonly='readonly'],
.modal-content .input[disabled='disabled'],
.modal-content textarea.input[readonly='readonly'],
.modal-content textarea.input[disabled='disabled'],
.modal-content .select[readonly='readonly'],
.modal-content .select[disabled='disabled'],
.layout .Form .input.ReadOnly:not(.Not_Valid)[readonly='readonly'],
.layout .Form .select.ReadOnly:not(.Not_Valid)[disabled='disabled'],
.modal-content .choices.choices-disabled,
.modal-content .choices.choices-disabled .choices__inner,
.modal-content .choices.choices-disabled .choices__inner .choices__list,
.modal-content .choices.choices-disabled .choices__inner .choices__list .choices__item,
.DetailBlockContentContainer .choices.choices-disabled,
.DetailBlockContentContainer .choices.choices-disabled .choices__inner,
.DetailBlockContentContainer .choices.choices-disabled .choices__inner .choices__list,
.DetailBlockContentContainer .choices.choices-disabled .choices__inner .choices__list .choices__item,
.PopUpLayoutMain .choices.choices-disabled,
.PopUpLayoutMain .choices.choices-disabled .choices__inner,
.PopUpLayoutMain .choices.choices-disabled .choices__inner .choices__list,
.PopUpLayoutMain .choices.choices-disabled .choices__inner .choices__list .choices__item {
  background-color: transparent;
  background-image: none;
  border: none;
  color: #000;
  pointer-events: none;
  padding-left: 0;
  padding-right: 0;
}

.Form .input.ReadOnly:not(.Not_Valid):focus,
.Form .select.ReadOnly:not(.Not_Valid):focus,
.input.ReadOnly:not(.Not_Valid):focus,
.select.ReadOnly:not(.Not_Valid):focus,
.PopUpLayoutMain .input:focus, 
.PopUpLayoutMain textarea.input:focus, 
.PopUpLayoutMain .select:focus,
.PopUpLayoutMain .Form input:focus,
.PopUpLayoutMain .Form textarea:focus,
.PopUpLayoutMain .Form select:focus,
.accordion .input:focus,
.accordion textarea.input:focus,
.accordion .select:focus,
.DetailBlockContentContainer .input:focus,
.DetailBlockContentContainer textarea.input:focus,
.DetailBlockContentContainer .select:focus,
.Detail .select:focus,
.modal-content .input:focus,
.modal-content .input:focus,
.modal-content textarea.input:focus,
.modal-content textarea.input:focus,
.modal-content .select:focus,
.modal-content .select:focus,
.layout .Form .input.ReadOnly:not(.Not_Valid):focus,
.layout .Form .select.ReadOnly:not(.Not_Valid):focus,
.choices.is-focused {
  background-color:var(--color-input-background-dark-gray);
}

.modal-content .choices.choices-disabled .choices__inner,
.modal-content .choices.choices-disabled .choices__list--single .choices__item {
  background: none;
  color: #000;
}

.Form input.ReadOnly,
.Form textarea.ReadOnly,
.Form select.ReadOnly,
input.ReadOnly,
textarea.ReadOnly,
select.ReadOnly {
  font-size: 13px;
  height:30px;
}

.Form:not(.ReadOnly) input.ReadOnly,
.Form:not(.ReadOnly) textarea.ReadOnly {
  cursor: text;
}

.Form:not(.ReadOnly) .button-group input.ReadOnly {
  cursor: pointer;
}

.layout .Form .select.ReadOnly:not(.Not_Valid),
.choices:after {
  background-image: url(/IMSGeneral_Th/img/icon_dropdown.svg);
  background-position: center right 16px;
  background-repeat: no-repeat;
  background-size: 13px 13px;
  border-radius: 0px;
}

.layout .Form .input.ReadOnly:not(.Not_Valid):hover,
.layout .Form .select.ReadOnly:not(.Not_Valid):hover {
  border: none;
}

.layout .Form .input.ReadOnly:not(.Not_Valid):focus,
.layout .Form .select.ReadOnly:not(.Not_Valid):focus {
  border: none;
}

.layout .Form .input.Not_Valid,
.layout .Form .select.Not_Valid {
  border: var(--border-size-s) solid var(--color-error);
  padding: var(--space-none) var(--space-base);
  background-color: var(--color-neutral-0);
}

.layout .Form textarea.input.Not_Valid {
 padding: var(--space-base);
}

.Form:not(.WithTouchEvents) input.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil,
.Form:not(.WithTouchEvents) textarea.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil,
.Form:not(.WithTouchEvents) select.ReadOnly:hover:not(.SmartInput_Changed) + .SmartInput_Undo + .FormEditPencil {
  display: none;
}

.Form input.SmartInput_Changed.ReadOnly + a.SmartInput_Undo,
.Form textarea.SmartInput_Changed.ReadOnly + a.SmartInput_Undo,
.Form select.SmartInput_Changed.ReadOnly + a.SmartInput_Undo {
  display: none;
}

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

.Form .toggle-button input.checkbox {
  cursor: pointer;
  margin: 0;
}

.layout .Form:not(.ReadOnly) .checkbox.ReadOnly, 
.layout .Form:not(.ReadOnly) .radio-button.ReadOnly {
  cursor: pointer;
}

/* Override Form.css look inside SS */
.Form input[type="text"],
.Form input[type="password"],
.Form input[type="datetime"],
.Form input[type="datetime-local"],
.Form input[type="date"],
.Form input[type="month"],
.Form input[type="time"],
.Form input[type="week"],
.Form input[type="number"],
.Form input[type="email"],
.Form input[type="url"],
.Form input[type="search"],
.Form input[type="tel"],
.Form input[type="color"],
.Form select,
.Form textarea {
  
}

/* $5.2 - Widgets - TableRecords / EditableTable */
.TableRecords,
.EditableTable {
  border-radius: var(--border-radius-soft);
  border-spacing: 0;
  border: 0px solid var(--color-neutral-4);
  empty-cells: show;
}

.EditableTable {
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.TableRecords .TableRecords_Header,
.EditableTable  thead th {
  background-color: var(--color-table-header);
  border-bottom:  0px solid var(--color-neutral-4);
  color: var(--color-neutral-10);
  font-weight: var(--font-medium-bold);
  height: 50px;
  padding: var(--space-none) var(--space-s);
  position: relative;
  text-align: left;
}

.card .TableRecords,
.card .EditableTable {
  border: 0;
}

.desktop .TableRecords .TableRecords_Header.SortColumns_Sortable:hover {
  color:#000;
  text-decoration: none;
}

.TableRecords .TableRecords_Header.SortColumns_Sorted {
  color:#000;
  text-decoration: none;    
}

.TableRecords .TableRecords_Header:first-child {
  border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-none);
  padding-left: var(--space-m);
}

.TableRecords .TableRecords_Header:last-child {
  border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
  padding-right: var(--space-m);
}

.TableRecords .TableRecords_Header .fa {
  font-size: var(--font-size-xs);
  margin-left: var(--space-s);
  width: auto;
}

.TableRecords .TableRecords_Header .fa:only-child {
  margin-left: 0;
}


.phone .TableRecords .TableRecords_Header .fa,
.phone .TableRecords .TableRecords_Label .fa, 
.tablet.portrait .TableRecords .TableRecords_Header .fa,
.tablet.portrait .TableRecords .TableRecords_Label .fa {
  display: none;
}

.TableRecords .TableRecords_OddLine,
.TableRecords .TableRecords_EvenLine {
  border-bottom: 0px solid var(--color-neutral-4);
  height: 50px;
  padding: var(--space-s) var(--space-s);
  text-align: left;
  -webkit-transition: all 180ms linear;
          transition: all 180ms linear;
          position: relative;
}

.TableRecords .TableRecords_OddLine.narrow,
.TableRecords .TableRecords_EvenLine.narrow {
    width: 10%;
}

.TableRecords .TableRecords_OddLine:first-child,
.TableRecords .TableRecords_EvenLine:first-child {
  padding-left: var(--space-m);
}

.TableRecords .TableRecords_OddLine:last-child,
.TableRecords .TableRecords_EvenLine:last-child {
  padding-right: var(--space-m);
}

.TableRecords .TableRecords_EvenLine {
  background-color: #f1f2f2;
}

.TableRecords .TableRecords_OddLine {
  background-color: var(--color-neutral-0);
}


.table-no-header .TableRecords_OddLine, 
.table-no-header .TableRecords_EvenLine {
  padding: var(--space-s) 0;
}


.tablet.portrait .panel .TableRecords tbody tr td, 
.phone .panel .TableRecords tbody tr td {
  padding: var(--space-base) var(--space-none);
}

.table-records-small .TableRecords_OddLine,
.table-records-small .TableRecords_EvenLine {
  height: 48px;    
}

.table-records-medium .TableRecords_OddLine,
.table-records-medium .TableRecords_EvenLine {
  height: 64px;    
}

.table-records-stripping .TableRecords_EvenLine {
  background-color: #f1f2f2;
}

.desktop .TableRecords tr:hover .TableRecords_OddLine,
.desktop .TableRecords tr:hover .TableRecords_EvenLine {
  background-color: #dcddde;
}

.TableRecords tr.highlighted .TableRecords_OddLine,
.TableRecords tr.highlighted .TableRecords_EvenLine {
  background-color: var(--color-secondary-lighter);
}

.TableRecords tbody tr:last-child td {
  border-bottom: var(--border-size-none);
}

.TableRecords tbody tr:last-child td:first-child {
  border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
}

.TableRecords tbody tr:last-child td:last-child {
  border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-none);
}

.TableRecords_Wrapper .Heading2 {
  color: var(--color-neutral-10);
  font-size: var(--font-size-h2);
  font-weight: var(--font-semi-bold);
  line-height: 1.25;
  margin-bottom: var(--space-m);
}

.TableRecords_TopNavigation {
  margin-bottom: var(--space-s);
}


.desktop .TableRecords.table-color-primary .TableRecords_Header {
  background-color: var(--color-primary-light);
  color: var(--color-neutral-0);
}
.desktop .TableRecords.table-color-primary .TableRecords_OddLine {
  background-color: var(--color-ribbon-2);
}
.desktop .TableRecords.table-color-primary .TableRecords_EvenLine {
  background-color: var(--color-ribbon-10);
}
.desktop .TableRecords.table-color-secondary .TableRecords_Header {
  background-color: var(--color-secondary-light);
}
.desktop .TableRecords.table-color-secondary .TableRecords_OddLine {
  background-color: var(--color-goldfish-2);
}
.desktop .TableRecords.table-color-secondary .TableRecords_EvenLine {
  background-color: var(--color-goldfish-10);
}
.desktop .TableRecords.table-sticky-header thead tr {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1;
}
.desktop .TableRecords.table-draggable-rows td {
  cursor: all-scroll;
}

/* Default Responsive TableRecords */
.TableRecords_Label {
  display: none;
}

.TableRecords_Label {
  color: var(--color-neutral-8);
  font-weight: var(--font-semi-bold);
  margin-right: 40px;
  min-width: 100px;
}

.tablet.portrait .TableRecords:not(.no-responsive) .TableRecords_Label,
.phone .TableRecords:not(.no-responsive) .TableRecords_Label {
  display: block;
}

.phone .TableRecords:not(.no-responsive) .TableRecords_Label {
  min-width: 70px;
  max-width: 70px;
}

.tablet.portrait .TableRecords:not(.no-responsive),
.phone .TableRecords:not(.no-responsive) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.tablet.portrait .TableRecords:not(.no-responsive) thead,
.phone .TableRecords:not(.no-responsive) thead {
  display: none;
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody,
.phone .TableRecords:not(.no-responsive) tbody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
  width: 100%;
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr,
.phone .TableRecords:not(.no-responsive) tbody tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr td,
.phone .TableRecords:not(.no-responsive) tbody tr td  {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  padding: var(--space-base) var(--space-m) var(--space-none) var(--space-m);
  width: 100% !important;
}

.phone .TableRecords:not(.no-responsive) tbody tr td {
  -webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr td:last-child,
.phone .TableRecords:not(.no-responsive) tbody tr td:last-child {
  padding-bottom: var(--space-base);
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr td:not(:last-child),
.phone .TableRecords:not(.no-responsive) tbody tr td:not(:last-child) {
  border-bottom: var(--border-size-none);
}

.tablet.portrait .TableRecords:not(.no-responsive) tbody tr:first-child td,
.phone .TableRecords:not(.no-responsive) tbody tr:first-child td {
  border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.phone .TableRecords.table-no-header tbody tr,
.tablet .TableRecords.table-no-header tbody tr {
  border-bottom: 1px solid var(--color-neutral-4);
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal; 
  -ms-flex-direction: row;
  flex-direction: row;
}

.tablet .TableRecords.table-no-header tbody tr:last-child, 
.phone .TableRecords.table-no-header tbody tr:last-child {
 border: none;
}

.TableRecords.table-no-header .TableRecords_OddLine,
.TableRecords.table-no-header .TableRecords_EvenLine {
  border-bottom: none;
}

.tablet .TableRecords.table-no-header tbody td:not(:last-child), 
.phone .TableRecords.table-no-header tbody td:not(:last-child) {
  padding: var(--space-base) var(--space-m) var(--space-base) var(--space-m);
}

.TableRecords.no-wrap {

}

.TableRecords.no-wrap .TableRecords_OddLine > div,
.TableRecords.no-wrap .TableRecords_EvenLine > div,
.TableRecords.no-wrap .TableRecords_Header {
  white-space: nowrap;
}

.TableRecords.one-line {

}

.TableRecords.one-line .TableRecords_OddLine > div,
.TableRecords.one-line .TableRecords_EvenLine > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  align-items: center;
  padding: var(--space-s);
}

.TableRecords.one-line .TableRecords_OddLine .ExtraInfoValue,
.TableRecords.one-line .TableRecords_EvenLine .ExtraInfoValue {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* EditableTable */
.EditableTable tr.Selected td {
  background-color: var(--color-neutral-3);
}

.EditableTable tbody tr:not(.RowControlGroup) td {
  border-bottom: 1px solid var(--color-neutral-4);
}

.EditableTable tfoot td {
  padding: var(--space-base) var(--space-m);
  border-bottom: 0;
}

.EditableTable tfoot td a {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.EditableTable tfoot td a[disabled="disabled"] {
  background-color: transparent;
  border: var(--border-size-s) solid transparent;
}

.EditableTable tfoot td a i {
  margin-right: var(--space-s);
}

.EditableTable tbody tr.Selected {
  background-color: var(--color-neutral-3);
}

.EditableTable tbody tr:last-child {
  display: none;
}

.EditableTable thead th.Mandatory:after {
  margin-left: var(--space-xs);
  color: var(--color-error);
  position: relative;
}

.EditableTable tbody tr td {
  padding: var(--space-s);
}

.TableRecords_BottomNavigation {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: var(--space-m);
}

.TableRecords_BottomNavigation .columns {
  width: 100%;
}

.phone .TableRecords_BottomNavigation {
  flex-direction: column;
}

.phone .TableRecords_BottomNavigation > div {
  width: 100% !important;
}

body .EditableTable input, 
body .EditableTable textarea, 
body .EditableTable select {
  font-size: 14px;
}

.EditableTable input:not(.btn):not(.checkbox):not(.radio-button)[readonly="readonly"] {
  background-color: transparent;
  border: var(--border-size-s) solid transparent;
  color: var(--color-neutral-10);
  pointer-events: auto;
}

.EditableTable tr.Selected input:not(.btn):not(.checkbox):not(.radio-button) {
  pointer-events: auto;
}

.OnEdit.EditableTable input:not(.btn):not(.checkbox):not(.radio-button) {
  pointer-events: none;
}

.OnEdit.EditableTable input:not(.btn):not(.checkbox):not(.radio-button)[readonly="readonly"] {
  color: var(--color-neutral-6);
}

.EditableTable .ColumnHeader {
  display: none;
}

.EditableTable tbody tr.RowControlGroup {
  position: relative;
  visibility: collapse;
}

.EditableTable tbody tr.RowControlGroup td {
  padding: var(--space-none);
  position: relative;
}

.EditableTable tr.RowControlGroup .ControlActions {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--color-neutral-3);
  border-top: var(--border-size-none);
  border: var(--border-size-s) solid var(--color-neutral-4);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 40px;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  left: 50%;
  position: absolute;
  top: -1px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  visibility: visible;
  width: 130px;
  z-index: 10;
  margin-top: 0;
  margin-left: 0;
}

.EditableTable tr.RowControlGroup a {
  cursor: pointer;
  font-size: var(--font-size-h5);
  text-align: center;
  width: 30px;
  color: var(--color-secondary);
}

.tablet.portrait .EditableTable tbody tr td, .phone .EditableTable tbody tr td {
  padding: var(--space-s) var(--space-none);
}

body.tablet.portrait .EditableTable input:not(.InEditMode), 
body.tablet.portrait .EditableTable textarea:not(.InEditMode), 
body.tablet.portrait .EditableTable select:not(.InEditMode), 
body.phone .EditableTable input:not(.InEditMode), 
body.phone .EditableTable textarea:not(.InEditMode), 
body.phone .EditableTable select:not(.InEditMode) {
  font-size: 14px;
}

.tablet.portrait .EditableTable tbody tr:not(.RowControlGroup):not(.Selected) td:first-child, 
.phone .EditableTable tbody tr:not(.RowControlGroup):not(.Selected) td:first-child {
  border-bottom: 1px solid var(--color-neutral-4);
  position: relative;
}

.tablet.portrait .EditableTable tbody tr.Selected td, 
.phone .EditableTable tbody tr.Selected td {
  padding: var(--space-base) var(--space-base);
}

.tablet.portrait .EditableTable .ColumnHeader, 
.phone .EditableTable .ColumnHeader {
  color: var(--color-neutral-8);
  font-weight: var(--font-semi-bold);
  margin-bottom: var(--space-xs);
  text-align: left;
}

.tablet.portrait .EditableTable input:not(.InEditMode), 
.tablet.portrait .EditableTable textarea:not(.InEditMode), 
.tablet.portrait .EditableTable select:not(.InEditMode), 
.phone .EditableTable input:not(.InEditMode), 
.phone .EditableTable textarea:not(.InEditMode), 
.phone .EditableTable select:not(.InEditMode) {
  transition: none;
  padding: var(--space-none) var(--space-xl) var(--space-none) var(--space-base);
}

.tablet.portrait .EditableTable tbody tr:not(.RowControlGroup):not(.OnEdit) td:first-child:before, 
.phone .EditableTable tbody tr:not(.RowControlGroup):not(.OnEdit) td:first-child:before {
  color: var(--color-primary);
  content: "\f107";
  font: normal normal normal 24px/1 FontAwesome;
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: transform 180ms linear;
          transition: transform 180ms linear;
  width: 16px;
  margin: 0;
}


/* $5.3 - RichWidgets - CounterMessage */
div.Counter_Message {
  color: var(--color-neutral-7);
}


/* $5.4 - RichWidgets - FeedbackAjaxWait */
div.Feedback_AjaxWait {
  background: var(--color-primary) var(--color-primary-lightest);
  border-radius: var(--border-radius-none);
  display: block;
  font-size: 0;
  height: 4px;
  padding: var(--space-none);
  position: fixed;
  top: 0;
  width: 100%;
}

div.Feedback_AjaxWait:before {
  -webkit-animation: ajax-wait 1700ms linear infinite;
          animation: ajax-wait 1700ms linear infinite;
  background-color: var(--color-primary);
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
  will-change: transform;
}

@-webkit-keyframes ajax-wait {
  0% {
      -webkit-transform: translateX(-105vw) translateZ(0) scaleX(1);
  }
  25% {
      -webkit-transform: translateX(-55vw) translateZ(0) scaleX(1.5);
  }
  50% {
      -webkit-transform: translateX(0) translateZ(0) scaleX(1.5);
  }
  75% {
      -webkit-transform: translateX(55vw) translateZ(0) scaleX(.5);
  }
  100% {
      -webkit-transform: translateX(105vw) translateZ(0) scaleX(.2);
  }
}

@keyframes ajax-wait {
  0% {
      transform: translateX(-105vw) translateZ(0) scaleX(1);
  }
  25% {
      transform: translateX(-55vw) translateZ(0) scaleX(1.5);
  }
  50% {
      transform: translateX(0) translateZ(0) scaleX(1.5);
  }
  75% {
      transform: translateX(55vw) translateZ(0) scaleX(.5);
  }
  100% {
      transform: translateX(105vw) translateZ(0) scaleX(.2);
  }
}

div.Feedback_AjaxWait img {
  display: none;
}


/* $5.5 - RichWidgets - FeedbackMessage */
div.Feedback_Message_Wrapper img {
  display: none;
}

div.Feedback_Message_Wrapper {
  margin-top: 100px;
}

div.Feedback_Message_Wrapper [class*="Feedback_Message_"] span {
  padding-left: var(--space-base);
}

div.Feedback_Message_Error,
div.Feedback_Message_Warning,
div.Feedback_Message_Success,
div.Feedback_Message_Info {
  -webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
  border-radius: var(--border-radius-soft);
  border: var(--border-size-none);
  box-shadow: var(--shadow-none);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;    
  font-size: var(--font-size-h6);
  margin-left: var(--space-none);
  padding: var(--space-base) var(--space-xl) var(--space-base) var(--space-m);
  position: relative;
  max-width: 600px;
  min-width: 400px;
}

.phone div.Feedback_Message_Error,
.phone div.Feedback_Message_Warning,
.phone div.Feedback_Message_Success,
.phone div.Feedback_Message_Info {
  min-width: 300px;
}

div.Feedback_Message_Error:before,
div.Feedback_Message_Warning:before,
div.Feedback_Message_Success:before,
div.Feedback_Message_Info:before {
  background-repeat: no-repeat;
  content: "";
  font: normal normal normal 20px/1 FontAwesome;
  height: 25px;
  margin-top: 0;
  min-width: 25px;
  position: relative;
  width: 25px;
}

div.Feedback_Message_Error,
div.Feedback_Message_Warning {
  background-color: var(--color-error);
  color: #fff;
}

div.Feedback_Message_Error:before {
  background-image: url(/IMSGeneral_Th/img/icon_error_white.svg);
}

div.Feedback_Message_Warning:before {
  background-image: url(/IMSGeneral_Th/img/icon_warning_white.svg);
}

div.Feedback_Message_Success {
  background-color: var(--color-success);
}

div.Feedback_Message_Success:before {
  background-image: url(/IMSGeneral_Th/img/icon_success_white.svg);
}

div.Feedback_Message_Info {
  background-color: var(--color-info);
}

div.Feedback_Message_Info:before {
  background-image: url(/IMSGeneral_Th/img/icon_info_white.svg);
}

a.Feedback_Message_Wrapper_Close {
  background: url(/IMSGeneral_Th/img/icon_close_white.svg) no-repeat;
  height: 13px;
  right: 10px;
  top: 10px;
  width: 13px;
}

.tablet a.Feedback_Message_Wrapper_Close,
.phone a.Feedback_Message_Wrapper_Close {
  pointer-events: none;
}

a.Feedback_Message_Wrapper_Close:before {
  color: var(--color-neutral-0);
  content: "";
  font: normal normal normal 14px FontAwesome;
  position: relative;
}

a.Feedback_Message_Wrapper_Close img {
  display: none;
}

div.Feedback_Message_Warning,
div.Feedback_Message_Warning a.Feedback_Message_Wrapper_Close:before {
  color: var(--color-neutral-0);
}


/* $5.6 - RichWidgets - Pagination */
.ListNavigation_Wrapper {
  display: unset;
  display: unset;
  display: unset;
  -webkit-box-pack: unset;
  -ms-flex-pack: unset;
  justify-content: unset;
}

.phone .ListNavigation_Wrapper {
  justify-content: flex-start;
  margin-top: 16px;
}

.ListNavigation_PageNumber {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  background-color: var(--color-neutral-0);
  border-radius: var(--border-radius-soft);
  border: var(--border-size-s) solid var(--color-neutral-4);
  color: var(--color-neutral-8);
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: var(--font-regular);
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  margin-left: var(--space-s);
  height: 32px;
  width: 32px;
  padding: var(--space-none);
  text-align: center;
}

a.ListNavigation_Previous,
a.ListNavigation_Next {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  background-color: var(--color-neutral-0);
  border-radius: var(--border-radius-soft);
  border: var(--border-size-s) solid var(--color-neutral-4);
  color: var(--color-neutral-8);
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: var(--font-regular);
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  margin-left: var(--space-s);
  height: 32px;
  width: 32px;
  padding: var(--space-none);
  text-align: center;
}

span.ListNavigation_DisabledPrevious,
span.ListNavigation_DisabledNext {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  background-color: var(--color-neutral-0);
  border-radius: var(--border-radius-soft);
  border: var(--border-size-s) solid var(--color-neutral-4);
  color: var(--color-neutral-8);
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: var(--font-regular);
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  margin-left: var(--space-s);
  height: 32px;
  width: 32px;
  opacity: .5;
  padding: var(--space-none);
  pointer-events: none;
  text-align: center;
}

a.ListNavigation_Previous,
a.ListNavigation_Next,
span.ListNavigation_DisabledPrevious,
span.ListNavigation_DisabledNext {
  font: normal normal normal 0 FontAwesome;
}

a.ListNavigation_Previous:before,
span.ListNavigation_DisabledPrevious:before {
  content: "\f104";
  position: relative;
  font-size: 14px;
}

a.ListNavigation_Next:before,
span.ListNavigation_DisabledNext:before {
  content: "\f105";
  position: relative;
  font-size: 14px;
}

.ListNavigation_CurrentPageNumber {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  background: var(--color-primary) var(--color-primary-lightest);
  border-radius: var(--border-radius-soft);
  border: var(--border-size-s) solid var(--color-neutral-4);
  color: var(--color-primary);
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: var(--font-regular);
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  margin-left: var(--space-s);
  height: 32px;
  width: 32px;
  padding: var(--space-none);
  text-align: center;
}

span.ListNavigation_CurrentPageNumber {
  font-weight: var(--font-regular);
}

.ListNavigation_PageNumber:hover, 
.ListNavigation_Previous:hover, 
.ListNavigation_Next:hover {
  background-color: rgba(21, 24, 26, .04);
  border: var(--border-size-s) solid var(--color-neutral-4);
  color: var(--color-neutral-8);
}

span.ListNavigation_Ellipsis {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  background-color: transparent;
  border-radius: var(--border-radius-soft);
  border: var(--border-size-s) solid transparent;
  color: var(--color-neutral-8);
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: var(--font-regular);
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  margin-left: var(--space-s);
  height: 32px;
  width: 16px;
  padding: var(--space-none);
  pointer-events: none;
  text-align: center;
}

.list-navigation-inline .ListNavigation_PageNumber,
.list-navigation-inline a.ListNavigation_Previous,
.list-navigation-inline a.ListNavigation_Next,
.list-navigation-inline span.ListNavigation_DisabledPrevious,
.list-navigation-inline span.ListNavigation_DisabledNext {
  background-color: transparent;
  border: var(--border-size-s) solid transparent;
}

.list-navigation-inline .ListNavigation_PageNumber:hover,
.list-navigation-inline .ListNavigation_Previous:hover,
.list-navigation-inline .ListNavigation_Next:hover {
  background-color: rgba(21, 24, 26, .04);
  border: var(--border-size-s) solid var(--color-neutral-4);
  color: var(--color-neutral-8);
}

.list-navigation-sharp .ListNavigation_PageNumber,
.list-navigation-sharp a.ListNavigation_Previous,
.list-navigation-sharp a.ListNavigation_Next,
.list-navigation-sharp span.ListNavigation_DisabledPrevious,
.list-navigation-sharp span.ListNavigation_DisabledNext,
.list-navigation-sharp .ListNavigation_CurrentPageNumber {
  border-radius: var(--border-radius-none);
}

.list-navigation-circle .ListNavigation_PageNumber,
.list-navigation-circle a.ListNavigation_Previous,
.list-navigation-circle a.ListNavigation_Next,
.list-navigation-circle span.ListNavigation_DisabledPrevious,
.list-navigation-circle span.ListNavigation_DisabledNext,
.list-navigation-circle .ListNavigation_CurrentPageNumber {
  border-radius: var(--border-radius-circle);
}

/* $5.7 - RichWidgets - PopupEditor */


/* Popup Iframe **************************/
.os-internal-Popup.os-internal-ui-dialog iframe {
  border-radius: 0px;
  min-width: 570px;
  max-width: var(--popup-width);
  width: 99.99%;
}

/* Popups **************************/
.os-internal-Popup .os-internal-ui-dialog,
.os-internal-Popup.os-internal-ui-dialog {
  border: 0;
  border-radius: 0px;
  box-shadow: none !important;
  max-height: 95%; /* iframe document height fix */
  min-width: 300px;
  overflow: visible !important;
}

body.desktop .os-internal-Popup .os-internal-ui-dialog,
body.desktop .os-internal-Popup.os-internal-ui-dialog,
.os-internal-Popup .os-internal-ui-dialog,
.os-internal-Popup.os-internal-ui-dialog {
  min-width: 430px;
  top: 50% !important;
  transform: translateY(-50%);
  max-width: var(--popup-width);
}

div.os-internal-Popup .os-internal-ui-dialog,
div.os-internal-Popup.os-internal-ui-dialog {
  background-color: #fff;
  border: none;
  border-radius: 0px;
  position: fixed;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-content,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-content {
  max-height: 100%; /* iframe document height fix */
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title {
  color: #fff;
  font-weight: 600;
  left: 20px;
  margin: 0;
  top: 10px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close {
  background: url(/OutSystemsUIWeb/img/PopupCloseWhite.png?14311&255&7395&122163) no-repeat;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 10px;
  transition: all .3s ease;
  width: 20px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover {
  opacity: .7;
  transform: rotate(90deg);
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
  background: #333;
  border-bottom: none;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  height: 40px;
}

div.os-internal-Popup .os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space,
div.os-internal-Popup.os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space {
  height: 0px !important;
  background-color: transparent;
  cursor: default;
  position: absolute;
  width: 100%;
  pointer-events:none
}

ul.os-internal-ui-autocomplete a {
  -webkit-transition: none;
          transition: none;
}

ul.os-internal-ui-autocomplete a.os-internal-ui-state-hover {
  background: #069;
  cursor: default;
  text-decoration: none;
}

.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title,
.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title {
  top: 4px;
}

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title {
  background: url(/IMSGeneral_Th/img/icon_close.svg) no-repeat;
  height: 15px;
  right: 30px;
  top: 30px;
  transition: all .3s ease;
  width: 20px;
  pointer-events: all;
}

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title:hover {
  background: url(/IMSGeneral_Th/img/icon_close.svg) no-repeat;
  opacity: .7;
  transform: unset;
}
.MainPopup .ThemeGrid_Width6 {
  width: 100%;
}

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

.tablet .MainPopup .btn,
.tablet .MainPopup .Button {
  display: inline-flex;
  width: 100%;
  margin-left: 0;
}

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

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

.tablet .MainPopup .Button + .Button {
  margin-left: 0;
}

/* $5.8 - RichWidgets - Calendar */
div.calendar, 
div.calendar table {
  z-index: 110;
}

/* $5.10 - VISJS - Timeline */

.vispanel.background {
  z-index: -1;
}

.vis.timeline.root {
  background: #fff;
  border: none;
  overflow: visible;
  pointer-events: none;
  margin-right: 35px;
}

.vis.timeline .item {
  background: none !important;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
  pointer-events: all;
}

.vis.timeline .item .content,
.vis.timeline .item.background .content {
  cursor: pointer;
  font-size: 0;
  pointer-events: all;
  position: absolute;
  left: 0;
  top: 6px;
  right: 0;
  bottom: 6px;
  background: var(--color-secondary);
  margin: var(--space-xs) 2px;
  z-index: 1;
  transition: background 100ms ease-in-out;
}

.vis.timeline .item .content,
.vis.timeline .item.background .content {
  background: var(--color-secondary);
}

.vis.timeline .item.even .content,
.vis.timeline .item.background.even .content {
  background: var(--color-secondary-lighter);
}

.vis.timeline .item .content:hover,
.vis.timeline .item.background .content:hover {
  background: var(--color-secondary-darker);
}

.vis.timeline .item.not-available .content,
.vis.timeline .item.not-available.even .content,
.vis.timeline .item.background.not-available.even .content {
  background: var(--color-custom-red);
}

.vis.timeline .item.not-available .content:hover,
.vis.timeline .item.not-available.even .content:hover,
.vis.timeline .item.background.not-available.even .content:hover {
  background: var(--color-red-dark);
}

.vis.timeline .vispanel.bottom,
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.top {
  border: none;
}

.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right {
  border: none;
  margin-top: 4px;
}

.vis.timeline .vispanel.bottom,
.vis.timeline .vispanel.left {
  z-index: 3;
}

.vis.timeline .vispanel.bottom:after {
  background: #fff;
  content: " ";
  height: 100%;
  position: absolute;
  right: -5px;
  top: 0;
  width: 5px;
  z-index: -2;
}

.vis.timeline .vispanel.background.vertical {
  overflow: visible;
  z-index: 2;
}

.vis .overlay {
  display: none;
}

.vis.timeline .foreground .group {
  border: none;
}

.vis.timeline .timeaxis.foreground {
  background: #fff;
  overflow: visible;
  z-index: -1;
}


.vis.timeline .timeaxis.background {
  overflow: visible
}

.vis.timeline .labelset .vlabel {
  border: none;
  min-width: 150px;
}

.vis.timeline .labelset .vlabel .inner {
  padding: 5px 0;
}

.vis.timeline .grid.vertical.minor:first-child {
  left: 0 !important;
}

.vis.timeline .timeaxis .text,
.vis.timeline .labelset .vlabel {
  color: #000;
}

.vis.timeline .timeaxis .text.major {
  display: none
}

.vis.timeline .timeaxis .grid.major {
  width: 0px !important;
}

/* $5.11 - Extra Info Dropdown */

.ExtraInfoContainer {
  display: inline;
  position:relative;
}

.ExtraInfoValue,
.ExtraInfoNumber {
  display: inline-block;
}

.ExtraInfoContainer.NoNumber .ExtraInfoValue {
  max-width: 100%;
}

.FixedWidthForToolTip {
    width: 200px;
}

.ExtraInfoNumber {
  background: var(--color-secondary);
  border-radius: 20px;
  color: #000;
  font-size: 11px;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-left: 5px;
  min-width: 20px;
  padding: 0 4px;
  position: relative;
  text-align: center;
  top: 0px;
}

.ExtraInfoContainer:hover .ExtraInfoToolTip {
  display:flex;
}

.ExtraInfoToolTip{
  display: none;
  position:absolute;
  left: 30px;
  top: 30px;
  z-index:100;
  background-color:#fff;
  padding:10px;
  border:gray 1px solid;
  white-space: nowrap;
}

.ExtraInfoToolTip.ToolTipAlignTop {
  bottom: calc(100% + 5px);
  left: unset;
  padding: 5px 10px;
  right: 100%;
  top: unset;
  transform: translateX(50%);
}

.ExtraInfoToolTip.ToolTipAlignRight {
  transform: translateX(20px);
}


/* $5.12 - CKE Editor */

.cke {
  max-height: 271px;
}

.cke_screen_reader_only {
  height: 0px !important;
  width: 0px !important;
}

/* $5.13 - File upload dropzone */

.fileuploadContainer {
  display: none;
}

.file-upload-dropzone {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: transparent;
  border: var(--border-size-s) solid var(--color-neutral-4);
  border-radius: var(--border-radius-soft);
  cursor: pointer; 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: var(--space-base);
  position: relative;
  -webkit-transition: all 180ms linear;
  transition: all 180ms linear;
}

.file-upload-dropzone.file-upload-dropzone-medium {
  height: 100px;
}

.file-upload-dropzone.file-upload-dropzone-transparent {
  border: var(--border-size-m) dashed var(--color-neutral-5);
  background: transparent;
  justify-content: center;
}

.file-upload-dropzone.file-upload-dropzone-transparent .file-upload-dropzone-icon,
.file-upload-dropzone.file-upload-dropzone-transparent .file-upload-dropzone-content {
  color: var(--color-neutral-10);
}

.file-upload-dropzone-icon {
  color: var(--color-neutral-5);
  margin-right: var(--space-m);
  line-height: initial;
}

.file-upload-dropzone-content {
  color: var(--color-neutral-5);
}

.file-upload-dropzone-link {
  color: var(--color-neutral-5);
}

.file-upload-dropzone-link {
  color: var(--color-neutral-5);
}

/* $5.14 - Dashboard Statistic */

.dashboard-statistic {
  height: 100%;
  margin: var(--space-base) 0;
}

.dashboard-statistic:first-of-type {
  margin-top: 0;
}

.dashboard-statistic:last-of-type {
  margin-bottom: 0;
}

/* $5.15 - Message Box */

.MessageBox {
  background-color: var(--color-neutral-8);
  font-size: 13px;
  color: #fff;
  min-height: 50px;
  padding:15px;
  line-height:20px;
  width: 100%;
}

.MessageBox.Info {
  background-color: var(--color-info);
}

.MessageBox.Success {
  background-color: var(--color-success);
}

.MessageBox.Error {
  background-color: var(--color-error);
}

.MessageBox.Warning {
  background-color: var(--color-warning);
  color: var(--color-neutral-10);
}

.MessageBoxImageContainer {
  max-height: 20px;
}

.MessageBoxImage{
  width: 20px;
  margin-right: 15px;
  max-height: 20px;
}

.MessageBoxMessageContainer {

}

.MessageBox.PopUpMessageBox {
  height: auto;
  margin-right: 30px;
  padding: 8px;
}

.MessageBox.MessageBox_Call {
  background-color: var(--color-primary-lighter);
  color: var(--color-neutral-10);
  overflow: hidden;
  position: relative;
}

.MessageBox_Call_PhoneIcon {
  bottom: -12px;
  color: var(--color-neutral-0);
  font-size: 4em;
  left: 30%;
  opacity: 0.2;
  position: absolute;
}

.MessageBox_Call_VideoIcon {
  color: var(--color-neutral-0);
  font-size: 4em;
  left: 30%;
  opacity: 0.2;
  position: absolute;
  top: -28px;
}

.MessageBox_Call_VideoIcon svg {
  width: 82px;
  height: 82px;
}

.DashboardTop {
    --negative-space-l: calc(-1 * var(--space-l));
    margin: var(--negative-space-l) var(--negative-space-l) 0 var(--negative-space-l);
    width: calc(100% + 2 * var(--space-l));
    padding-left: var(--space-l);
    padding-right: var(--space-l);
}

/* $5.16 - Password Validator */

.password-validator {

}

.password-validator > div,
.password-validator > div > div {
  width: 100%;
}

/* $5.17 - Request step & selectbox */

/* Step */
.request-step-container {
  
}

.request-step-label {
  font-weight: normal;
  font-size: 13px;
  color: #6d6e71;
  line-height: 30px;
}

.request-step-content {
  border-bottom: 1px solid var(--color-neutral-5);
}

.request-step-container.NoBorder .request-step-content {
  border-bottom: none;
}

.request-step-edit-button {
  position: absolute;
  right: 0;
  top: -3px;
}

/* Selectbox */
.select-box {
  line-height: initial;
  min-height: 100px;
  padding: var(--space-base) calc(var(--space-base) + 5px);
  width: 100%;
}

.select-box.small {
  min-height: 70px;
}

.select-box-square {
  width: 100px;
  height: 100px;
  min-height: 100px;
  text-align: center;
  line-height: 100px;
  padding: 0;
}

.select-box.select-box-square.small {
  width: 70px;
  height: 70px;
  min-height: 70px;
  text-align: center;
}

.select-box > div {
  width: 100%;
}

.ListRecords.select-list-records {
  display: flex;
  flex-wrap: wrap;
  
  margin: -8px;
  padding-left: 0;
}

.ListRecords.select-list-records .select-box {
  height: 100%;
}

.select-list-records > span,
.select-list-records > div,
.select-list-records > a {
  flex: 0 0 calc(33.33333% - 16px);
  margin: 8px;
  
}

.select-list-records > span > div {
  width: 100%;
  height: 100%;
}

/* $5.18 - Date Time Picker */
.date-time-picker-date.date-time-picker-full-width, 
.input-date-time-picker-width {
  width: calc(100% - (2 * var(--space-m) + 2 * 75px));
}

.date-time-picker-date {
  max-width: calc(100% - (2 * var(--space-m) + 2 * 75px));
}

.date-time-picker-time-hour,
.date-time-picker-time-minutes{
  width: 40px;
}

.date-time-picker-time-seperator{
  width: var(--space-m);
  text-align: center;
  line-height: 30px;
}

/* $5.19 - Call Banner */

.call-banner, .call-banner-open, .call-banner-closed {
  bottom: var(--space-l);
  position: fixed;
  right: var(--space-l);
  z-index: 101;
  
}
.call-banner-open {
  width: 325px;
}
.call-banner-closed {
  width: 50px;
}

.call-banner .call-banner-content {
  -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
  box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.call-banner .call-banner-button {
  float: right;
}

.call-banner .call-banner-disconnect {
  color: #fff;
  position:absolute;
  right: var(--space-base);
  top: var(--space-base);
}

.call-banner .call-banner-disconnect {
  color: #fff;
  position:absolute;
  right: var(--space-base);
  top: var(--space-base);
}

.call-banner .call-banner-button .ContainerButton {
  -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
  box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
}

.call-banner .call-banner-button .CustomIcon {
  display: flex;
}

/* $5.20 - Fullscreen loader */

.full-screen-loader {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: rgba(255,255,255,0.8);
  
  
  
  z-index: 1000;

}

.full-screen-loader-close {
  position:absolute;
  top: var(--space-l);
  right: var(--space-l);
}

/* $5.21 - Form list */

.ListRecords.form-list {

}

.ListRecords.form-list .form-list-item {
  padding: var(--space-s) 0;
  margin-bottom: var(--space-s);
  border-bottom: 2px solid var(--color-neutral-6);
}

/* $5.22 - Triangle content */

.triangle-container {
  display: inline-flex;
  position: relative;
  width: 22px;
  height: 20px;
  align-items: flex-end;
  justify-content: center;
}

.triangle-container .triangle-background, .triangle-container .triangle-background-high-alert {
  position: absolute;
  left: 0;
  top: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
}
.triangle-container .triangle-background-high-alert {
    border-bottom: 20px solid var(--color-custom-red);
}
.triangle-container .triangle-background {
  border-bottom: 20px solid var(--color-secondary);
}


.triangle-container .triangle-content {
  text-align: center;
  color: #fff;
  z-index: 1;
  position: relative;
  bottom: -2px;
}


/* ================================================================ */
/*  $6 - Styles                                                     */
/* ================================================================ */

/* ================================================================ */
/*  $6.1 - Styles - Typography                                      */
/* ================================================================ */

/* $6.1.1 - Styles - Typography - Sizes Desktop */
.font-size-display {
  color: var(--color-neutral-10);
  font-size: var(--font-size-display);
  font-weight: var(--font-bold);
  line-height: 1.25;
}

.font-size-display-l {
  color: var(--color-neutral-10);
  font-size: var(--font-size-display-l);
  font-weight: var(--font-light);
  line-height: 1;
}

.font-size-display-s {
  color: var(--color-neutral-10);
  font-size: var(--font-size-display-s);
  font-weight: var(--font-bold);
  line-height: 1.25;
}

.heading1 {
  color: #000;
  font-size: var(--font-size-h1);
  font-weight: var(--font-semi-bold);
  line-height: 1.3;
}

.heading2 {
  color: var(--color-secondary);
  font-size: var(--font-size-h2);
  font-weight: var(--font-semi-bold);
  line-height: 1.4;
}

.heading3 {
  color: #000;
  font-size: var(--font-size-h3);
  font-weight: var(--font-semi-bold);
  line-height: 1.25;
}

.heading4 {
  color: #000;
  font-size: var(--font-size-h4);
  font-weight: var(--font-semi-bold);
  line-height: 1.25;
}

.heading5 {
  color: #000;
  font-size: var(--font-size-h5);
  font-weight: var(--font-semi-bold);
  line-height: 1.25;
}

.heading6 {
  color: #000;
  font-size: var(--font-size-h6);
  font-weight: var(--font-semi-bold);
  line-height: 1.25;
}

.font-size-xxl { font-size: var(--font-size-xl); }
.font-size-xl { font-size: var(--font-size-xl); }
.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); }
.font-size-xxs { font-size: var(--font-size-xxs); }

.font-size-85 { font-size: 80%; }


/* $6.1.2 - Styles - Typography - Sizes Tablet */
.tablet .font-size-display { --font-size-display: 34px; }
.tablet .heading1 { --font-size-h1: 30px; }
.tablet .heading2 { --font-size-h2: 26px; }
.tablet .heading3 { --font-size-h3: 24px; }
.tablet .heading4 { --font-size-h4: 21px; }
.tablet .heading5 { --font-size-h5: 19px; }
.tablet .heading6 { --font-size-h6: 17px; }


/* $6.1.3 - Styles - Typography - Sizes Tablet */
.phone .font-size-display { --font-size-display: 32px; }
.phone .heading1 { --font-size-h1: 28px; }
.phone .heading2 { --font-size-h2: 24px; }
.phone .heading3 { --font-size-h3: 22px; } 
.phone .heading4 { --font-size-h4: 20px; }
.phone .heading5 { --font-size-h5: 18px; }
.phone .heading6 { --font-size-h6: 16px; }


/* $6.1.4 - Styles - Typography - Transform */
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-no-underline { text-decoration: none; }
.text-underline { text-decoration: underline; }

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-wrap {
  white-space: nowrap;
}

/* $6.1.5 - Styles - Typography - Weight */
.font-light { font-weight: var(--font-light); }
.font-regular { font-weight: var(--font-regular); }
.font-semi-bold { font-weight: var(--font-semi-bold); }
.font-bold { font-weight: var(--font-bold); }




/* ================================================================ */
/*  $6.2 - Styles - Colors                                          */
/* ================================================================ */

/* $6.2.1 - Styles - Colors - Brand */
.background-primary { background-color: var(--color-primary); }
.background-secondary { background-color: var(--color-secondary); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }

/* Background and Text Colors used when IsLight parameter for Badge / Tag / UserInitials is True */
.background-primary-light { background-color: var(--color-primary-light); }
.background-secondary-light { background-color: var(--color-secondary-light); }

.background-primary-lighter { background-color: var(--color-primary-lighter); }
.background-secondary-lighter { background-color: var(--color-secondary-lighter); }

.background-primary-lightest { background-color: var(--color-primary-lightest); }
.background-secondary-lightest { background-color: var(--color-secondary-lightest); }

.text-primary-darker { color: var(--color-primary);}
.text-secondary-darker { color: var(--color-secondary); }

.background-ribbon-100 {
  background-color: var(--color-ribbon-100);
}

.text-ribbon-100 {
  color: var(--color-ribbon-100);
}

.background-goldfish-100 {
  background-color: var(--color-goldfish-100);
}

.text-goldfish-100 {
  color: var(--color-goldfish-100);
}

.background-zodiac-100 {
  background-color: var(--color-zodiac-100);
}

.text-zodiac-100 {
  color: var(--color-zodiac-100);
}

.background-ribbon-90 {
  background-color: var(--color-ribbon-90);
}

.text-ribbon-90 {
  color: var(--color-ribbon-90);
}

.background-goldfish-90 {
  background-color: var(--color-goldfish-90);
}

.text-goldfish-90 {
  color: var(--color-goldfish-90);
}

.background-zodiac-90 {
  background-color: var(--color-zodiac-90);
}

.text-zodiac-90 {
  color: var(--color-zodiac-90);
}

.background-ribbon-80 {
  background-color: var(--color-ribbon-80);
}

.text-ribbon-80 {
  color: var(--color-ribbon-80);
}

.background-goldfish-80 {
  background-color: var(--color-goldfish-80);
}

.text-goldfish-80 {
  color: var(--color-goldfish-80);
}

.background-zodiac-80 {
  background-color: var(--color-zodiac-80);
}

.text-zodiac-80 {
  color: var(--color-zodiac-80);
}

.background-ribbon-70 {
  background-color: var(--color-ribbon-70);
}

.text-ribbon-70 {
  color: var(--color-ribbon-70);
}

.background-goldfish-70 {
  background-color: var(--color-goldfish-70);
}

.text-goldfish-70 {
  color: var(--color-goldfish-70);
}

.background-zodiac-70 {
  background-color: var(--color-zodiac-70);
}

.text-zodiac-70 {
  color: var(--color-zodiac-70);
}

.background-ribbon-60 {
  background-color: var(--color-ribbon-60);
}

.text-ribbon-60 {
  color: var(--color-ribbon-60);
}

.background-goldfish-60 {
  background-color: var(--color-goldfish-60);
}

.text-goldfish-60 {
  color: var(--color-goldfish-60);
}

.background-zodiac-60 {
  background-color: var(--color-zodiac-60);
}

.text-zodiac-60 {
  color: var(--color-zodiac-60);
}

.background-ribbon-50 {
  background-color: var(--color-ribbon-50);
}

.text-ribbon-50 {
  color: var(--color-ribbon-50);
}

.background-goldfish-50 {
  background-color: var(--color-goldfish-50);
}

.text-goldfish-50 {
  color: var(--color-goldfish-50);
}

.background-zodiac-50 {
  background-color: var(--color-zodiac-50);
}

.text-zodiac-50 {
  color: var(--color-zodiac-50);
}

.background-ribbon-40 {
  background-color: var(--color-ribbon-40);
}

.text-ribbon-40 {
  color: var(--color-ribbon-40);
}

.background-goldfish-40 {
  background-color: var(--color-goldfish-40);
}

.text-goldfish-40 {
  color: var(--color-goldfish-40);
}

.background-zodiac-40 {
  background-color: var(--color-zodiac-40);
}

.text-zodiac-40 {
  color: var(--color-zodiac-40);
}

.background-ribbon-30 {
  background-color: var(--color-ribbon-30);
}

.text-ribbon-30 {
  color: var(--color-ribbon-30);
}

.background-goldfish-30 {
  background-color: var(--color-goldfish-30);
}

.text-goldfish-30 {
  color: var(--color-goldfish-30);
}

.background-zodiac-30 {
  background-color: var(--color-zodiac-30);
}

.text-zodiac-30 {
  color: var(--color-zodiac-30);
}

.background-ribbon-20 {
  background-color: var(--color-ribbon-20);
}

.text-ribbon-20 {
  color: var(--color-ribbon-20);
}

.background-goldfish-20 {
  background-color: var(--color-goldfish-20);
}

.text-goldfish-20 {
  color: var(--color-goldfish-20);
}

.background-zodiac-20 {
  background-color: var(--color-zodiac-20);
}

.text-zodiac-20 {
  color: var(--color-zodiac-20);
}

.background-ribbon-10 {
  background-color: var(--color-ribbon-10);
}

.text-ribbon-10 {
  color: var(--color-ribbon-10);
}

.background-goldfish-10 {
  background-color: var(--color-goldfish-10);
}

.text-goldfish-10 {
  color: var(--color-goldfish-10);
}

.background-zodiac-10 {
  background-color: var(--color-zodiac-10);
}

.text-zodiac-10 {
  color: var(--color-zodiac-10);
}

.background-ribbon-5 {
  background-color: var(--color-ribbon-5);
}

.text-ribbon-5 {
  color: var(--color-ribbon-5);
}

.background-goldfish-5 {
  background-color: var(--color-goldfish-5);
}

.text-goldfish-5 {
  color: var(--color-goldfish-5);
}

.background-zodiac-5 {
  background-color: var(--color-zodiac-5);
}

.text-zodiac-5 {
  color: var(--color-zodiac-5);
}

.background-ribbon-2 {
  background-color: var(--color-ribbon-2);
}

.text-ribbon-2 {
  color: var(--color-ribbon-2);
}

.background-goldfish-2 {
  background-color: var(--color-goldfish-2);
}

.text-goldfish-2 {
  color: var(--color-goldfish-2);
}

.background-zodiac-2 {
  background-color: var(--color-zodiac-2);
}

.text-zodiac-2 {
  color: var(--color-zodiac-2);
}

/* $6.2.2 - Styles - Colors - Extendend */
.background-red-lightest { background-color: var(--color-red-lightest); }
.background-red-lighter { background-color: var(--color-red-lighter); }
.background-red-light { background-color: var(--color-red-light); }
.background-red { background-color: var(--color-red); }
.background-red-dark { background-color: var(--color-red-dark); }
.background-red-darker { background-color: var(--color-red-darker); }
.background-red-darkest { background-color: var(--color-red-darkest); }

.text-red-lightest { color: var(--color-red-lightest); }
.text-red-lighter { color: var(--color-red-lighter); }
.text-red-light { color: var(--color-red-light); }
.text-red { color: var(--color-red); }
.text-red-dark { color: var(--color-red-dark); }
.text-red-darker { color: var(--color-red-darker); }
.text-red-darkest { color: var(--color-red-darkest); }

.background-pink-lightest { background-color: var(--color-pink-lightest); }
.background-pink-lighter { background-color: var(--color-pink-lighter); }
.background-pink-light { background-color: var(--color-pink-light); }
.background-pink { background-color: var(--color-pink); }
.background-pink-dark { background-color: var(--color-pink-dark); }
.background-pink-darker { background-color: var(--color-pink-darker); }
.background-pink-darkest { background-color: var(--color-pink-darkest); }

.text-pink-lightest { color: var(--color-pink-lightest); }
.text-pink-lighter { color: var(--color-pink-lighter); }
.text-pink-light { color: var(--color-pink-light); }
.text-pink { color: var(--color-pink); }
.text-pink-dark { color: var(--color-pink-dark); }
.text-pink-darker { color: var(--color-pink-darker); }
.text-pink-darkest { color: var(--color-pink-darkest); }

.background-grape-lightest { background-color: var(--color-grape-lightest); }
.background-grape-lighter { background-color: var(--color-grape-lighter); }
.background-grape-light { background-color: var(--color-grape-light); }
.background-grape { background-color: var(--color-grape); }
.background-grape-dark { background-color: var(--color-grape-dark); }
.background-grape-darker {  background-color: var(--color-grape-darker); }
.background-grape-darkest { background-color: var(--color-grape-darkest); }

.text-grape-lightest { color: var(--color-grape-lightest); }
.text-grape-lighter { color: var(--color-grape-lighter); }
.text-grape-light { color: var(--color-grape-light); }
.text-grape { color: var(--color-grape); }
.text-grape-dark { color: var(--color-grape-dark); }
.text-grape-darker { color: var(--color-grape-darker); }
.text-grape-darkest { color: var(--color-grape-darkest); }

.background-violet-lightest { background-color: var(--color-violet-lightest); }
.background-violet-lighter { background-color: var(--color-violet-lighter); }
.background-violet-light { background-color: var(--color-violet-light); }
.background-violet { background-color: var(--color-violet); }
.background-violet-dark { background-color: var(--color-violet-dark); }
.background-violet-darker { background-color: var(--color-violet-darker); }
.background-violet-darkest { background-color: var(--color-violet-darkest); }

.text-violet-lightest { color: var(--color-violet-lightest); }
.text-violet-lighter { color: var(--color-violet-lighter); }
.text-violet-light { color: var(--color-violet-light); }
.text-violet { color: var(--color-violet); }
.text-violet-dark { color: var(--color-violet-dark); }
.text-violet-darker { color: var(--color-violet-darker); }
.text-violet-darkest { color: var(--color-violet-darkest); }

.background-indigo-lightest { background-color: var(--color-indigo-lightest); }
.background-indigo-lighter { background-color: var(--color-indigo-lighter); }
.background-indigo-light { background-color: var(--color-indigo-light); }
.background-indigo { background-color: var(--color-indigo); }
.background-indigo-dark { background-color: var(--color-indigo-dark); }
.background-indigo-darker { background-color: var(--color-indigo-darker); }
.background-indigo-darkest { background-color: var(--color-indigo-darkest); }

.text-indigo-lightest { color: var(--color-indigo-lightest); }
.text-indigo-lighter { color: var(--color-indigo-lighter); }
.text-indigo-light { color: var(--color-indigo-light); }
.text-indigo { color: var(--color-indigo); }
.text-indigo-dark { color: var(--color-indigo-dark); }
.text-indigo-darker { color: var(--color-indigo-darker); }
.text-indigo-darkest { color: var(--color-indigo-darkest); }

.background-blue-lightest { background-color: var(--color-blue-lightest); }
.background-blue-lighter { background-color: var(--color-blue-lighter); }
.background-blue-light { background-color: var(--color-blue-light); }
.background-blue { background-color: var(--color-blue); }
.background-blue-dark { background-color: var(--color-blue-dark); }
.background-blue-darker { background-color: var(--color-blue-darker); }
.background-blue-darkest { background-color: var(--color-blue-darkest); }

.text-blue-lightest { color: var(--color-blue-lightest); }
.text-blue-lighter { color: var(--color-blue-lighter); }
.text-blue-light { color: var(--color-blue-light); }
.text-blue { color: var(--color-blue); }
.text-blue-dark { color: var(--color-blue-dark); }
.text-blue-darker {color: var(--color-blue-darker); }
.text-blue-darkest { color: var(--color-blue-darkest); }

.background-cyan-lightest { background-color: var(--color-cyan-lightest); }
.background-cyan-lighter { background-color: var(--color-cyan-lighter); }
.background-cyan-light { background-color: var(--color-cyan-light); }
.background-cyan { background-color: var(--color-cyan); }
.background-cyan-dark { background-color: var(--color-cyan-dark); }
.background-cyan-darker { background-color: var(--color-cyan-darker); }
.background-cyan-darkest { background-color: var(--color-cyan-darkest); }

.text-cyan-lightest { color: var(--color-cyan-lightest); }
.text-cyan-lighter { color: var(--color-cyan-lighter); }
.text-cyan-light { color: var(--color-cyan-light); }
.text-cyan { color: var(--color-cyan); }
.text-cyan-dark { color: var(--color-cyan-dark); }
.text-cyan-darker { color: var(--color-cyan-darker); }
.text-cyan-darkest { color: var(--color-cyan-darkest); }

.background-teal-lightest { background-color: var(--color-teal-lightest); }
.background-teal-lighter { background-color: var(--color-teal-lighter); }
.background-teal-light { background-color: var(--color-teal-light); }
.background-teal { background-color: var(--color-teal); }
.background-teal-dark { background-color: var(--color-teal-dark); }
.background-teal-darker { background-color: var(--color-teal-darker); }
.background-teal-darkest { background-color: var(--color-teal-darkest); }

.text-teal-lightest { color: var(--color-teal-lightest); }
.text-teal-lighter { color: var(--color-teal-lighter); }
.text-teal-light { color: var(--color-teal-light); }
.text-teal { color: var(--color-teal); }
.text-teal-dark { color: var(--color-teal-dark); }
.text-teal-darker { color: var(--color-teal-darker); }
.text-teal-darkest { color: var(--color-teal-darkest); }

.background-green-lightest { background-color: var(--color-green-lightest); }
.background-green-lighter { background-color: var(--color-green-lighter); }
.background-green-light { background-color: var(--color-green-light); }
.background-green { background-color: var(--color-green); }
.background-green-dark { background-color: var(--color-green-dark); } 
.background-green-darker { background-color: var(--color-green-darker); }
.background-green-darkest { background-color: var(--color-green-darkest); }

.text-green-lightest { color: var(--color-green-lightest); }
.text-green-lighter { color: var(--color-green-lighter); } 
.text-green-light { color: var(--color-green-light); }
.text-green { color: var(--color-green); }
.text-green-dark { color: var(--color-green-dark); }
.text-green-darker { color: var(--color-green-darker); }
.text-green-darkest { color: var(--color-green-darkest); }

.background-lime-lightest { background-color: var(--color-lime-lightest); }
.background-lime-lighter { background-color: var(--color-lime-lighter); }
.background-lime-light { background-color: var(--color-lime-light); }
.background-lime { background-color: var(--color-lime); }
.background-lime-dark { background-color: var(--color-lime-dark); }
.background-lime-darker { background-color: var(--color-lime-darker); }
.background-lime-darkest { background-color: var(--color-lime-darkest); }

.text-lime-lightest { color: var(--color-lime-lightest); }
.text-lime-lighter { color: var(--color-lime-lighter); }
.text-lime-light { color: var(--color-lime-light); }
.text-lime { color: var(--color-lime); }
.text-lime-dark { color: var(--color-lime-dark); }
.text-lime-darker { color: var(--color-lime-darker); }
.text-lime-darkest { color: var(--color-lime-darkest); }

.background-yellow-lightest { background-color: var(--color-yellow-lightest); }
.background-yellow-lighter { background-color: var(--color-yellow-lighter); }
.background-yellow-light { background-color: var(--color-yellow-light); }
.background-yellow { background-color: var(--color-yellow); }
.background-yellow-dark { background-color: var(--color-yellow-dark); }
.background-yellow-darker { background-color: var(--color-yellow-darker); }
.background-yellow-darkest { background-color: var(--color-yellow-darkest); }

.text-yellow-lightest { color: var(--color-yellow-lightest); }
.text-yellow-lighter { color: var(--color-yellow-lighter); }
.text-yellow-light { color: var(--color-yellow-light); }
.text-yellow { color: var(--color-yellow); }
.text-yellow-dark { color: var(--color-yellow-dark); }
.text-yellow-darker { color: var(--color-yellow-darker); }
.text-yellow-darkest { color: var(--color-yellow-darkest); }

.background-orange-lightest { background-color: var(--color-orange-lightest); }
.background-orange-lighter { background-color: var(--color-orange-lighter); }
.background-orange-light { background-color: var(--color-orange-light); }
.background-orange { background-color: var(--color-orange); }
.background-orange-dark { background-color: var(--color-orange-dark); }
.background-orange-darker { background-color: var(--color-orange-darker); }
.background-orange-darkest { background-color: var(--color-orange-darkest); }

.text-orange-lightest { color: var(--color-orange-lightest); }
.text-orange-lighter { color: var(--color-orange-lighter); }
.text-orange-light { color: var(--color-orange-light); }
.text-orange { color: var(--color-orange); }
.text-orange-dark { color: var(--color-orange-dark); }
.text-orange-darker { color: var(--color-orange-darker); }
.text-orange-darkest { color: var(--color-orange-darkest); }


/* $6.2.3 - Styles - Colors - Neutral */
.background-transparent { background-color: transparent; }
.background-neutral-0 { background-color: var(--color-neutral-0); }
.background-neutral-1 { background-color: var(--color-neutral-1); }
.background-neutral-2 { background-color: var(--color-neutral-2); }
.background-neutral-3 { background-color: var(--color-neutral-3); }
.background-neutral-4 { background-color: var(--color-neutral-4); }
.background-neutral-5 { background-color: var(--color-neutral-5); }
.background-neutral-6 { background-color: var(--color-neutral-6); }
.background-neutral-7 { background-color: var(--color-neutral-7); }
.background-neutral-8 { background-color: var(--color-neutral-8); }
.background-neutral-9 { background-color: var(--color-neutral-9); }
.background-neutral-10 { background-color: var(--color-neutral-10); }

.text-transparent { color: transparent; }
.text-neutral-0 { color: var(--color-neutral-0); }
.text-neutral-1 { color: var(--color-neutral-1); }
.text-neutral-2 { color: var(--color-neutral-2); }
.text-neutral-3 { color: var(--color-neutral-3); }
.text-neutral-4 { color: var(--color-neutral-4); }
.text-neutral-5 { color: var(--color-neutral-5); }
.text-neutral-6 { color: var(--color-neutral-6); }
.text-neutral-7 { color: var(--color-neutral-7); }
.text-neutral-8 { color: var(--color-neutral-8); }
.text-neutral-9 { color: var(--color-neutral-9); }
.text-neutral-10 { color: var(--color-neutral-10); }

/* Background and Text Colors used when IsLight parameter for Badge / Tag / UserInitials is True */
.background-neutral-0-lightest,
.background-neutral-1-lightest,
.background-neutral-2-lightest,
.background-neutral-3-lightest,
.background-neutral-4-lightest {
  background-color: var(--color-neutral-9);  
}

.background-neutral-5-lightest,
.background-neutral-6-lightest,
.background-neutral-7-lightest,
.background-neutral-8-lightest,
.background-neutral-9-lightest,
.background-neutral-10-lightest {
  background-color: var(--color-neutral-0);
}

.text-neutral-5-darker { color: var(--color-neutral-5); }
.text-neutral-6-darker { color: var(--color-neutral-6); }
.text-neutral-7-darker { color: var(--color-neutral-7); }
.text-neutral-8-darker { color: var(--color-neutral-8); }
.text-neutral-9-darker { color: var(--color-neutral-9); }
.text-neutral-10-darker { color: var(--color-neutral-10); }

/* Background Transparent when used in IE11 to be more specific than CSSVars Polyfill */
.ie11 .background-transparent { background-color: transparent; }


/* $6.2.4 - Styles - Colors - Semantic */
.background-error-light { background-color: var(--color-error-light); }
.background-error { background-color: var(--color-error); }

.text-error-light { color: var(--color-error-light); }
.text-error { color: var(--color-error); }

.background-warning-light { background-color: var(--color-warning-light); }
.background-warning { background-color: var(--color-warning); }

.text-warning-light { color: var(--color-warning-light); }
.text-warning { color: var(--color-warning); }

.background-success-light { background-color: var(--color-success-light); }
.background-success { background-color: var(--color-success); }

.text-success-light { color: var(--color-success-light); }
.text-success { color: var(--color-success); }

.background-info-light { background-color: var(--color-info-light); }
.background-info { background-color: var(--color-info); }

.text-info-light { color: var(--color-info-light); }
.text-info { color: var(--color-info); }

/* ================================================================ */
/*  $6.3 - Styles - Space                                           */
/* ================================================================ */

/* $6.3.1 - Styles - Space - Padding */
.padding-none { padding: var(--space-none); }
.padding-xs { padding: var(--space-xs); }
.padding-s { padding: var(--space-s); }
.padding-base {  padding: var(--space-base); }
.padding-m { padding: var(--space-m); }
.padding-l { padding: var(--space-l); }
.padding-xl { padding: var(--space-xl); }
.padding-xxl { padding: var(--space-xxl); }


/* $6.3.2 - Styles - Space - Padding Top */
.padding-top-none { padding-top: var(--space-none); }
.padding-top-xs { padding-top: var(--space-xs); }
.padding-top-s { padding-top: var(--space-s); }
.padding-top-base { padding-top: var(--space-base); }
.padding-top-m { padding-top: var(--space-m); }
.padding-top-l { padding-top: var(--space-l); }
.padding-top-xl { padding-top: var(--space-xl); }
.padding-top-xxl { padding-top: var(--space-xxl); }


/* $6.3.3 - Styles - Space - Padding Right */
.padding-right-none { padding-right: var(--space-none); }
.padding-right-xs { padding-right: var(--space-xs); }
.padding-right-s { padding-right: var(--space-s); }
.padding-right-base { padding-right: var(--space-base); }
.padding-right-m { padding-right: var(--space-m); }
.padding-right-l { padding-right: var(--space-l); }
.padding-right-xl { padding-right: var(--space-xl); }
.padding-right-xxl { padding-right: var(--space-xxl); }


/* $6.3.4 - Styles - Space - Padding Bottom */
.padding-bottom-none { padding-bottom: var(--space-none); }
.padding-bottom-xs { padding-bottom: var(--space-xs); }
.padding-bottom-s { padding-bottom: var(--space-s); }
.padding-bottom-base { padding-bottom: var(--space-base); }
.padding-bottom-m { padding-bottom: var(--space-m); }
.padding-bottom-l { padding-bottom: var(--space-l); }
.padding-bottom-xl { padding-bottom: var(--space-xl); }
.padding-bottom-xxl { padding-bottom: var(--space-xxl); }
.padding-bottom-3xl { padding-bottom: calc(3 * var(--space-xxl)); }


/* $6.3.5 - Styles - Space - Padding Left */
.padding-left-none { padding-left: var(--space-none); }
.padding-left-xs { padding-left: var(--space-xs); }
.padding-left-s { padding-left: var(--space-s); }
.padding-left-base { padding-left: var(--space-base); }
.padding-left-m { padding-left: var(--space-m); }
.padding-left-l { padding-left: var(--space-l); }
.padding-left-xl { padding-left: var(--space-xl); }
.padding-left-xxl { padding-left: var(--space-xxl); }


/* $6.3.6 - Styles - Space - Padding Vertical */
.padding-y-none {
  padding-top: var(--space-none);
  padding-bottom: var(--space-none);
}
.padding-y-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.padding-y-s {
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
}
.padding-y-base {
  padding-top: var(--space-base);
  padding-bottom: var(--space-base);
}
.padding-y-m {
  padding-top: var(--space-m);
  padding-bottom: var(--space-m);
}
.padding-y-l {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}
.padding-y-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.padding-y-xxl {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}


/* $6.3.7 - Styles - Space - Padding Horizontal */
.padding-x-none {
  padding-left: var(--space-none);
  padding-right: var(--space-none);
}
.padding-x-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}
.padding-x-s {
  padding-left: var(--space-s);
  padding-right: var(--space-s);
}
.padding-x-base {
  padding-left: var(--space-base);
  padding-right: var(--space-base);
}
.padding-x-m {
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}
.padding-x-l {
  padding-left: var(--space-l);
  padding-right: var(--space-l);
}
.padding-x-xl {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.padding-x-xxl {
  padding-left: var(--space-xxl);
  padding-right: var(--space-xxl);
}


/* $6.3.8 - Styles - Space - Margin */
.margin-none { margin: var(--space-none); }
.margin-xs { margin: var(--space-xs); }
.margin-s { margin: var(--space-s); }
.margin-base { margin: var(--space-base); }
.margin-m { margin: var(--space-m); }
.margin-l { margin: var(--space-l); }
.margin-xl { margin: var(--space-xl); }
.margin-xxl { margin: var(--space-xxl); }

.margin-auto { margin: 0 auto;}


/* $6.3.9 - Styles - Space - Margin Top */
.margin-top-none { margin-top: var(--space-none); }
.margin-top-xs { margin-top: var(--space-xs); }
.margin-top-s { margin-top: var(--space-s); }
.margin-top-base { margin-top: var(--space-base); }
.margin-top-m { margin-top: var(--space-m); }
.margin-top-l { margin-top: var(--space-l); }
.margin-top-xl { margin-top: var(--space-xl); }
.margin-top-xxl { margin-top: var(--space-xxl); }
.margin-top-minusl { margin-top: calc(var(--space-l) * -1); }


/* $6.3.10 - Styles - Space - Margin Right */
.margin-right-none { margin-right: var(--space-none); }
.margin-right-xs { margin-right: var(--space-xs); }
.margin-right-s { margin-right: var(--space-s); }
.margin-right-base { margin-right: var(--space-base); }
.margin-right-m { margin-right: var(--space-m); }
.margin-right-l { margin-right: var(--space-l); }
.margin-right-xl { margin-right: var(--space-xl); }
.margin-right-xxl { margin-right: var(--space-xxl); }


/* $6.3.11 - Styles - Space - Margin Bottom */
.margin-bottom-none { margin-bottom: var(--space-none); }
.margin-bottom-xs { margin-bottom: var(--space-xs); }
.margin-bottom-s { margin-bottom: var(--space-s); }
.margin-bottom-base { margin-bottom: var(--space-base); }
.margin-bottom-m { margin-bottom: var(--space-m); }
.margin-bottom-l { margin-bottom: var(--space-l); }
.margin-bottom-xl { margin-bottom: var(--space-xl); } 
.margin-bottom-xxl { margin-bottom: var(--space-xxl); }


/* $6.3.12 - Styles - Space - Margin Left */
.margin-left-none { margin-left: var(--space-none); }
.margin-left-xs { margin-left: var(--space-xs); }
.margin-left-s { margin-left: var(--space-s); }
.margin-left-base { margin-left: var(--space-base); }
.margin-left-m { margin-left: var(--space-m); }
.margin-left-l { margin-left: var(--space-l); }
.margin-left-xl { margin-left: var(--space-xl); }
.margin-left-xxl { margin-left: var(--space-xxl); }


/* $6.3.13 - Styles - Space - Margin Vertical */
.margin-y-none {
  margin-top: var(--space-none);
  margin-bottom: var(--space-none);
}
.margin-y-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.margin-y-s {
  margin-top: var(--space-s);
  margin-bottom: var(--space-s);
}
.margin-y-base {
  margin-top: var(--space-base);
  margin-bottom: var(--space-base);
}
.margin-y-m {
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
}
.margin-y-l {
  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
}
.margin-y-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.margin-y-xxl {
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-xxl);
}


/* $6.3.14 - Styles - Space - Margin Horizontal */
.margin-x-none {
  margin-left: var(--space-none);
  margin-right: var(--space-none);
}
.margin-x-xs {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}
.margin-x-s {
  margin-left: var(--space-s);
  margin-right: var(--space-s);
}
.margin-x-base {
  margin-left: var(--space-base);
  margin-right: var(--space-base);
}
.margin-x-m {
  margin-left: var(--space-m);
  margin-right: var(--space-m);
}
.margin-x-l {
  margin-left: var(--space-l);
  margin-right: var(--space-l);
}
.margin-x-xl {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}
.margin-x-xxl {
  margin-left: var(--space-xxl);
  margin-right: var(--space-xxl);
}


/* ================================================================ */
/*  $6.4 - Styles - Border Radius                                   */
/* ================================================================ */
.border-radius-none { border-radius: var(--border-radius-none); }
.border-radius-soft { border-radius: var(--border-radius-soft); }
.border-radius-rounded { border-radius: var(--border-radius-rounded); }
.border-radius-circle { border-radius: var(--border-radius-circle); }


/* ================================================================ */
/*  $6.5 - Styles - Border Size                                     */
/* ================================================================ */
.border-size-none { border-width: var(--border-size-none); }
.border-size-s { border: var(--border-size-s) solid currentColor; }
.border-size-m {border: var(--border-size-m) solid currentColor; }
.border-size-l { border: var(--border-size-l) solid currentColor; }


/* ================================================================ */
/*  $6.6 - Styles - Elevation/Shadows                               */
/* ================================================================ */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-xs { box-shadow: var(--shadow-xs);}
.shadow-s { box-shadow: var(--shadow-s); }
.shadow-m { box-shadow: var(--shadow-m); }
.shadow-l { box-shadow: var(--shadow-l); }
.shadow-xl { box-shadow: var(--shadow-xl); }


/* ================================================================ */
/*  $6.7 - Styles - Display & Display Flex Properties                         */
/* ================================================================ */

.min-100 {
  min-height: 100%;
}

.height-100 {
  height: 100%;
}

.display-inline-block {
  display: inline-block;
}

.display-inline {
  display: inline;
}

.display-none
{
    display: none;
}
.display-flex, .display-flex-top, .display-flex-center, .display-flex-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.align-items-center, .display-flex-center  {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

.align-items-top, .display-flex-top  {
  -webkit-box-align: top;
     -ms-flex-align: top;
        align-items: top;
}
.gap-base
{
    gap: var(--space-base);
}
.gap-s
{
    gap: var(--space-s);
}
.gap-xs
{
    gap: var(--space-xs);
}
.gap-l
{
    gap: var(--space-l);
}

.position-relative
{
    position: relative;
}
.position-absolute
{
    position: absolute;
}
/*
does not work, align-items bottom does not exist , use display-flex-end instead
.align-items-bottom, .display-flex-bottom  {
  -webkit-box-align: bottom;
     -ms-flex-align: bottom;
        align-items: bottom;
}
*/

.align-items-flex-end, .display-flex-end  {
  -webkit-box-align: flex-end;
     -ms-flex-align: flex-end;
        align-items: flex-end;
}
.flex-none {
  -webkit-box-flex: none;
          -ms-flex: none;
              flex: none;
}
.flex-initial {
  -webkit-box-flex: initial;
          -ms-flex: initial;
              flex: initial;
}
.flex-auto {
  -webkit-box-flex: auto;
          -ms-flex: auto;
              flex: auto;
}
.flex1 {
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
}

.flex2 {
  -webkit-box-flex: 2;
          -ms-flex: 2;
              flex: 2;
}

.flex3 {
  -webkit-box-flex: 3;
          -ms-flex: 3;
              flex: 3;
}

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

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

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

.justify-content-space-between {
  justify-content: space-between;
}

.justify-content-space-evenly {
  justify-content: space-evenly;
}
.justify-content-flex-end {
  -webkit-box-pack: end;
     -ms-flex-pack: end;
  justify-content: flex-end;
}
.justify-content-center {
  justify-content: center;
}

.display-flex-top {
  -webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
}
.top-left {
  -webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
  -webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;
}

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

.top-right {
  -webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
  -webkit-box-pack: end;
     -ms-flex-pack: end;
   justify-content: flex-end;
}

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

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

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

.bottom {
  -webkit-box-align: end;
     -ms-flex-align: end;
        align-items: flex-end;
}

.bottom-left {
  -webkit-box-align: end;
     -ms-flex-align: end;
        align-items: flex-end;
  -webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;    
}

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

.bottom-right {
  -webkit-box-align: end;
     -ms-flex-align: end;
        align-items: flex-end;
  -webkit-box-pack: end;
     -ms-flex-pack: end;
   justify-content: flex-end;
}

.bottom-right {
-webkit-box-align: end;
   -ms-flex-align: end;
      align-items: flex-end;
-webkit-box-pack: end;
   -ms-flex-pack: end;
 justify-content: flex-end;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-start {
  align-self: flex-start;
}

/* ================================================================ */
/*  $6.8 - Styles - Others                                          */
/* ================================================================ */
.display-block { display: block; }

.ph:empty { display: none; }

.hidden { display: none; }

.full-height { height: 100%; }

.full-width { width: 100%;}

.fit-content { width: fit-content;}

.text-align-left { text-align: left; }

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

.text-align-right { text-align: right; }

.fixed { position: fixed; }

.overflow-hidden { overflow: hidden; }

.seperator {
  border: 1px solid #000;
  height: 1px;
}

.sticky {     
  position: -webkit-sticky;
  position: sticky; 
}

.img-cover {
  object-fit: cover;
  height: 100%;
}

a:not(.Button)[disabled="disabled"] {
  background-color: transparent;
  border: none;
}

a:not(.Button)[disabled="disabled"] .ContainerButton,
a.Button[disabled="disabled"] {
  background-color: var(--color-neutral-6);
  color: var(--color-neutral-7);
}

.hide-on-service-studio {
  
}

.scrollable-listrecords {
  max-height: 200px;
  border: 1px solid var(--color-input-background-gray);
  padding: 0 var(--space-s);
  overflow-y: auto
}

@font-face {
  font-family: 'SilkWeb4';
  src: url('SilkWeb4.eot');
  src: url('SilkWeb4.eot#iefix') format('embedded-opentype'),
       url('SilkWeb4.ttf') format('truetype'),
       url('SilkWeb4.woff') format('woff'),
       url('SilkWeb4.svg#SilkWeb4') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'SilkWeb4' !important;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-silk-search:before { content: "\f002"; }
.icon-silk-chevron-down:before { content: "\f078"; }
.icon-silk-angle-down:before { content: "\f107"; }
.icon-silk-rocket:before { content: "\e900"; }

.highcharts-container,
.highcharts-container > svg {
 
}


.CustomIcon-bold::before {
  font-weight: var(--font-bold);
}

/* Skip-nav link used on Accessibility*/
.skip-nav[data-showskipcontent="False"] {
  display: none;
}

.skip-nav[data-showskipcontent="True"] {
  display: block;
}

.skip-nav {
  left: var(--space-xl);
  opacity: 0;
  pointer-events: none;
  padding: var(--space-s) var(--space-base);
  position: absolute;
  text-transform: uppercase;
  top: 10px;
  z-index: 100;     
}

.skip-nav:focus,
.skip-nav:active {
  background-color: var(--color-info);
  color: var(--color-neutral-0); 
  opacity: 1;
  pointer-events: auto;    
}

ul.bullet-list {
  padding: 0;
  margin: 0;
  list-style-position: inside;
  list-style-type: square;
}


ul.bullet-list li {
  position: relative;
}

.nowrap
{
    white-space: nowrap;
}
    

/* ================================================================ */
/*  $7 - Right-to-Left Mode                                         */
/* ================================================================ */

/* ================================================================ */
/*  $7.1 - RTL Mode - Page Layout / HTML Elements                   */
/* ================================================================ */

.is-rtl {
  direction: rtl;
}

/* RTL Mode - Side Menu - Navigation */
.is-rtl .layout.layout-side .navigation {
  left: auto;
}

/* RTL Mode - Side Menu - Header */
.is-rtl.desktop-hd .layout.layout-side .header {
  left: 0;
  right: var(--side-menu-size);
}

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

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

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

.is-rtl.phone .layout.layout-side .header,
.is-rtl.tablet .layout.layout-side .header {
  right: 0;
}

/* RTL Mode - Side Menu - Main */
.is-rtl.desktop-hd .layout.layout-side .main {
  margin-left: 0;
  margin-right: var(--side-menu-size);
}

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

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

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

.is-rtl.phone .layout.layout-side .main,
.is-rtl.tablet .layout.layout-side .main {
  margin-right: 0;
}

.is-rtl .app-logo {
  margin-right: var(--space-none);
  margin-left: var(--space-s);
}

.is-rtl .Menu_TopMenu .fa, 
.is-rtl .Menu_DropDownPanel .fa {
   margin-left: var(--space-s);
   margin-right: var(--space-none);
}

.is-rtl .Menu_DropDownPanel a,
.is-rtl .Menu_DropDownPanel a:link,
.is-rtl .Menu_DropDownPanel a:visited {
  padding: var(--space-s) var(--space-l) var(--space-s) var(--space-base);
  text-align: right;
}

.is-rtl .layout-top .Menu_DropDownPanel a,
.is-rtl .layout-top .Menu_DropDownPanel a:link,
.is-rtl .layout-top .Menu_DropDownPanel a:visited {
  padding: var(--space-s) var(--space-base);
}

.is-rtl .Menu_DropDownArrow:before { left: 0; }

.is-rtl .Menu_DropDownArrow:after { right: 8px; }

.is-rtl .Menu_DropDownButton.open .Menu_DropDownArrow:before { left: 6px; }

.is-rtl .Menu_DropDownButton.open .Menu_DropDownArrow:after { right: 12px; }

.is-rtl .content-top-actions { text-align: left; }

.is-rtl .select { background-position: center left 16px; }

.is-rtl .menu-icon {
  margin-left: var(--space-m);
  margin-right: 0;
}

.is-rtl.tablet .layout-side .navigation, 
.is-rtl.phone .layout-side .navigation, 
.is-rtl.tablet .layout-top .Menu_TopMenus, 
.is-rtl.phone .layout-top .Menu_TopMenus {
  right: calc(0px - var(--side-menu-size));
  left: auto;
}

.is-rtl.tablet .layout-side .navigation:before, 
.is-rtl.phone .layout-side .navigation:before {
  right: 300px;
  left: 0;
}

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

.is-rtl .Button + .Button {
  margin-left: 0;
  margin-right: 24px;
}

/* ================================================================ */
/*  $7.2 - RTL Mode - Patterns - Content                            */
/* ================================================================ */

/* $7.2.1 - RTL Mode - Patterns - Content - Alert */
.is-rtl .alert-icon {
  margin-left: var(--space-base);
  margin-right: var(--space-none);
}

.is-rtl .alert-close {
  margin-left: var(--space-none);
  margin-right: var(--space-base);    
}

/* $7.2.2 - RTL Mode - Patterns - Content - CardSectioned */
.is-rtl .card-sectioned.flex-direction-row .card-image.padding-none { padding: var(--space-none); }

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

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

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

/* $7.2.3 - RTL Mode - Patterns - Content - ChatMessage */
.is-rtl .chat-photo {
  margin-left: var(--space-base);
}

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


/* ================================================================ */
/*  $7.3 - RTL Mode - Patterns - Controls                           */
/* ================================================================ */

/* $7.3.1 - RTL Mode - Patterns - Controls - AnimatedLabel */
.is-rtl .animated-label-text {
  left: auto;
  right: 16px;
}

.is-rtl .animated-label-inline .animated-label-text {
  left: auto;
  right: 0;
}


/* $7.3.2 - RTL Mode - Patterns - Controls - ButtonGroup */
.is-rtl .button-group label:first-child .btn {
  border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
}

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

.is-rtl .button-group label:not(:first-child) .btn {
  border-right: var(--border-size-none);
  border-left: var(--border-size-s) solid var(--color-primary);
}

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

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

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


/* $7.3.3 - RTL Mode - Patterns - Controls - DatePicker */
.is-rtl .pika-next {
  margin-left: var(--space-none);
  transform: rotate(180deg);
}

.is-rtl .pika-prev {
  transform: rotate(180deg);  
  margin-left: var(--space-base);  
}

.is-rtl .pika-select-month { margin-right: var(--space-none); }

.is-rtl .pika-select-year { margin-right: var(--space-base); }


/* $7.3.4 - RTL Mode - Patterns - Controls - FileUpload */
.is-rtl .file-upload .file-upload-message {
  padding-left: var(--space-none);
  padding-right: var(--space-base);
}


/* $7.3.5 - RTL Mode - Patterns - Controls - FloatingActions */
.is-rtl .floating-actions {
  left: 0;
  right: auto;
}

.is-rtl .floating-actions-item-button {
  margin-left: var(--space-none);
  margin-right: var(--space-base);
}

.is-rtl .floating-actions-items {
  padding-left: var(--space-s);
  padding-right: var(--space-none);
}

.is-rtl .floating-actions-button {
  direction: ltr;
}


/* $7.3.6 - RTL Mode - Patterns - Controls - InputWithIcons */
.is-rtl .input-with-icon.flex-direction-row .input-with-icon-content-icon:not(:empty)+.input-with-icon-input input {
  padding-left: var(--space-base);
  padding-right: var(--space-xl);
}

.is-rtl .input-with-icon.flex-direction-row-reverse .input-with-icon-content-icon:not(:empty)+.input-with-icon-input input {
  padding-left: var(--space-xl);
  padding-right: var(--space-base);
}

.is-rtl .input-with-icon.flex-direction-row .input-with-icon-content-icon.search-actions {
  left: 0;
  right: auto;
}

.is-rtl .search .input-with-icon .input-with-icon-content-icon {
  left: auto;
}

.is-rtl .search  .input-with-icon.flex-direction-row .input-with-icon-content-icon:not(:empty)+.input-with-icon-input input {
  padding: 0 var(--space-xl);
}

/* $7.3.7 - RTL Mode - Patterns - Controls - RangeSlider */
.is-rtl .range-slider-label {
  margin-left: var(--space-none);
  margin-right: var(--space-s);
}


/* $7.3.8 - RTL Mode - Patterns - Controls - ToogleButton */
.is-rtl .toggle-button:after {
  -webkit-transform: translateX(21px);
          transform: translateX(21px);
}

.is-rtl .toggle-button.toggle-button-checked:after {
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
}


/* ================================================================ */
/*  $7.4 - RTL Mode - Patterns - Navigation                         */
/* ================================================================ */

/* $7.4.1 - RTL Mode - Patterns - Navigation - SectionIndex */
.is-rtl .section-index {
  border-left: none;
  border-right: var(--border-size-s) solid var(--color-neutral-4);
}

.is-rtl a.section-index-item.is--active {
  border-left: none;
  border-right: var(--border-size-m) solid var(--color-primary);
}

.is-rtl .section-index a, 
.is-rtl .section-index a:visited {
  border-left: none;
  border-right: var(--border-size-m) solid transparent;
  padding: var(--space-none) var(--space-base) var(--space-none) var(--space-none);
}

/* $7.4.2 - RTL Mode - Patterns - Navigation - Sidebar */
.is-rtl .sidebar-container {
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  right: auto;
}

.is-rtl .is--visible .sidebar-container.enter-right {
  -webkit-animation-name: enter-left;
          animation-name: enter-left;
}

.is-rtl .is--hidden .sidebar-container.leave-right {
  -webkit-animation-name: leave-left;
          animation-name: leave-left;
}


/* $7.4.3 - RTL Mode - Patterns - Navigation - Tabs */
.is-rtl .tabs-header-item {
  margin-left: var(--space-none);
  margin-right: var(--space-l);
}

.is-rtl .tabs-header-item:first-child {
  margin-right: var(--space-none);
}

.is-rtl .tabs-header-item .badge {
  margin-left: var(--space-none);
  margin-right: var(--space-s);
}

.is-rtl .tabs-header-item .fa-fw {
  margin-left: var(--space-s);
  margin-right: var(--space-none);
}

.is-rtl .tabs.tabs-vertical .tabs-header-item {
  border-left: var(--border-size-m) solid transparent;
  border-right: var(--border-size-none) solid transparent;
  margin-right: var(--space-none);
  padding: var(--space-s) var(--space-none) var(--space-s) var(--space-m);
}

.is-rtl .tabs.tabs-vertical .tabs-header-item.active {
  border-left: var(--border-size-m) solid var(--color-primary);
  border-right: var(--border-size-none) solid transparent;
}

.is-rtl .tabs.tabs-vertical .tabs-content {
  border-right: var(--border-size-s) solid var(--color-neutral-5);
  border-left: var(--border-size-none) solid transparent;
  margin-left: 0;
  margin-right: -1px;
}

.is-rtl .card > .tabs.tabs-vertical .tabs-header-item {
  padding: var(--space-base) var(--space-m) var(--space-base) var(--space-m)
}

.is-rtl .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item {
  border-left: var(--border-size-none) solid transparent;
  border-right: var(--border-size-m) solid transparent;
  padding: var(--space-s) var(--space-m) var(--space-s) var(--space-none);
  text-align: left;
  justify-content: flex-end;
}

.is-rtl .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item.active {
  border-right: var(--border-size-m) solid var(--color-primary);
}

.is-rtl .tabs.tabs-vertical.tabs-header-right .tabs-content {
  border-left: var(--border-size-s) solid var(--color-neutral-5);
  border-right: var(--border-size-none) solid transparent;
  margin-left: -1px;
  margin-right: 0;
}

.is-rtl .card > .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item {
  padding: var(--space-s) var(--space-m) var(--space-s) var(--space-m);
}


/* $7.4.4 - RTL Mode - Patterns - Navigation - Timeline */
.is-rtl .timeline-item-left {
  margin-left: var(--space-base);
  margin-right: var(--space-none);
}


/* $7.4.5 - RTL Mode - Patterns - Navigation - Wizard */
.is-rtl .wizard-item .wizard-item-icon-wraper:before {
  left: calc(50% + 12px);
  right: auto;
}

.is-rtl .wizard-vertical .wizard-item-icon-wraper {
  margin: var(--space-none) var(--space-none) var(--space-none) var(--space-s); 
}

.is-rtl .wizard-vertical .wizard-item .wizard-item-icon-wraper:before { left: 50%; }


/* ================================================================ */
/*  $7.5 - RTL Mode - Patterns - Numbers                            */
/* ================================================================ */

/* $7.5.1 - RTL Mode - Patterns - Numbers - ProgressBar */
.is-rtl .progress-container .progress-title { text-align: right; }

.is-rtl .progress-container .progress-value { text-align: left; }

.is-rtl .progress-container.flex-direction-row .progress {
  margin-left: var(--space-s);
  margin-right: var(--space-none);    
}

.progress-container.custom-bar-red .progress-bar { background: var(--color-custom-red); }

/* ================================================================ */
/*  $7.6 - RTL Mode - Patterns - Responsive                         */
/* ================================================================ */

/* $7.6.1 - RTL Mode - Patterns - Responsive - ResponsiveTableRecords */
.is-rtl.tablet.portrait .scrollable-row .TableRecords thead th, 
.is-rtl.phone .scrollable-row .TableRecords thead th {
  border-left: var(--border-size-s) solid var(--color-neutral-4);
  border-right: var(--border-size-none) solid var(--color-neutral-4);
}

.is-rtl.tablet.portrait .scrollable-row .TableRecords tbody tr:last-child td, 
.is-rtl.phone .scrollable-row .TableRecords tbody tr:last-child td {
  border-right: var(--border-size-s) solid var(--color-neutral-4);
}

.is-rtl.tablet.portrait .scrollable-row .TableRecords tbody tr:first-child td, 
.is-rtl.phone .scrollable-row .TableRecords tbody tr:first-child td {
  border-right: var(--border-size-none) solid var(--color-neutral-4);
}

.is-rtl.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child, 
.is-rtl.phone .expandable-row .TableRecords tbody tr td:first-child {
  padding-right: var(--space-m);
  padding-left: var(--space-xxl);
}

.is-rtl.tablet.portrait .expandable-row .TableRecords tbody tr td:first-child:after, 
.is-rtl.phone .expandable-row .TableRecords tbody tr td:first-child:after {
  left: 16px;
  right: auto;
}


/* ================================================================ */
/*  $7.7 - RTL Mode - Widgets & RichWidgets                         */
/* ================================================================ */

/* $7.7.1 - RTL Mode - Widgets - TableRecords  */
.is-rtl .TableRecords .TableRecords_Header, 
.is-rtl .EditableTable thead th {
  text-align: right;
}

.is-rtl .TableRecords .TableRecords_OddLine, 
.is-rtl .TableRecords .TableRecords_EvenLine {
  text-align: right;
}

.is-rtl .TableRecords .TableRecords_OddLine.narrow, 
.is-rtl .TableRecords .TableRecords_EvenLine.narrow {
  width: 10%;
}

.is-rtl .TableRecords_Label {
  margin-left: 40px;
  margin-right: 0;
}

.is-rtl .layout .Form .select.ReadOnly:not(.Not_Valid) {
  background-position: center left 16px;
}


/* $7.7.2 - RTL Mode - RichWidgets - FeedbackAjaxWait  */
.is-rtl div.Feedback_AjaxWait:before {
  -webkit-animation: ajax-wait-rtl 1700ms linear infinite;
          animation: ajax-wait-rtl 1700ms linear infinite;
}

@-webkit-keyframes ajax-wait-rtl {
  0% {
      -webkit-transform: translateX(105vw) translateZ(0) scaleX(1);
  }
  25% {
      -webkit-transform: translateX(55vw) translateZ(0) scaleX(1.5);
  }
  50% {
      -webkit-transform: translateX(0) translateZ(0) scaleX(1.5);
  }
  75% {
      -webkit-transform: translateX(-55vw) translateZ(0) scaleX(.5);
  }
  100% {
      -webkit-transform: translateX(-105vw) translateZ(0) scaleX(.2);
  }
}

@keyframes ajax-wait-rtl {
  0% {
      transform: translateX(105vw) translateZ(0) scaleX(1);
  }
  25% {
      transform: translateX(55vw) translateZ(0) scaleX(1.5);
  }
  50% {
      transform: translateX(0) translateZ(0) scaleX(1.5);
  }
  75% {
      transform: translateX(-55vw) translateZ(0) scaleX(.5);
  }
  100% {
      transform: translateX(-105vw) translateZ(0) scaleX(.2);
  }
}

/* $7.7.3 - RTL Mode - RichWidgets - FeedbackMessage  */
.is-rtl div.Feedback_Message_Wrapper [class*="Feedback_Message_"] span {
  padding-left: var(--space-none);
  padding-right: var(--space-base);
}

.is-rtl a.Feedback_Message_Wrapper_Close {
  left: 8px;
  right: auto;
}


/* $7.7.4 - RTL Mode - RichWidgets - Pagination  */
.is-rtl a.ListNavigation_Previous, 
.is-rtl span.ListNavigation_DisabledPrevious {
  transform: rotate(180deg)
}

.is-rtl a.ListNavigation_Next, 
.is-rtl span.ListNavigation_DisabledNext {
  transform: rotate(180deg)
}


/* ================================================================ */
/*  $7.8 - RTL Mode - Styles                                        */
/* ================================================================ */

/* $7.8.1 - RTL Mode - Styles - Space - Padding Right  */
.is-rtl .padding-right-none { 
  padding-left: var(--space-none); 
  padding-right: var(--space-none); 
}
.is-rtl .padding-right-xs { 
  padding-left: var(--space-xs); 
  padding-right: var(--space-none); 
}
.is-rtl .padding-right-s { 
  padding-left: var(--space-s); 
  padding-right: var(--space-none); 
}
.is-rtl .padding-right-base { 
  padding-left: var(--space-base); 
  padding-right: var(--space-none); 
}
.is-rtl .padding-right-m { 
  padding-left: var(--space-m); 
  padding-right: var(--space-none); 
}
.is-rtl .padding-right-l { 
  padding-left: var(--space-l); 
  padding-right: var(--space-none); 
}
.is-rtl .padding-right-xl { 
  padding-left: var(--space-xl);
  padding-right: var(--space-none); 
}
.is-rtl .padding-right-xxl { 
  padding-left: var(--space-xxl); 
  padding-right: var(--space-none); 
}


/* $7.8.2 - RTL Mode - Styles - Space - Padding Left  */
.is-rtl .padding-left-none { 
  padding-left: var(--space-none); 
  padding-right: var(--space-none); 
}
.is-rtl .padding-left-xs { 
  padding-left: var(--space-none); 
  padding-right: var(--space-xs); 
}
.is-rtl .padding-left-s { 
  padding-left: var(--space-none); 
  padding-right: var(--space-s); 
}
.is-rtl .padding-left-base { 
  padding-left: var(--space-none); 
  padding-right: var(--space-base); 
}
.is-rtl .padding-left-m { 
  padding-left: var(--space-none); 
  padding-right: var(--space-m); 
}
.is-rtl .padding-left-l { 
  padding-left: var(--space-none); 
  padding-right: var(--space-l); 
}
.is-rtl .padding-left-xl { 
  padding-left: var(--space-none);
  padding-right: var(--space-xl); 
}
.is-rtl .padding-left-xxl { 
  padding-left: var(--space-none); 
  padding-right: var(--space-xxl); 
}


/* $7.8.3 - RTL Mode - Styles - Space - Margin Right  */
.is-rtl .margin-right-none { 
  margin-left: var(--space-none); 
  margin-right: var(--space-none); 
}
.is-rtl .margin-right-xs { 
  margin-left: var(--space-xs); 
  margin-right: var(--space-none); 
}
.is-rtl .margin-right-s { 
  margin-left: var(--space-s); 
  margin-right: var(--space-none); 
}
.is-rtl .margin-right-base { 
  margin-left: var(--space-base); 
  margin-right: var(--space-none); 
}
.is-rtl .margin-right-m { 
  margin-left: var(--space-m); 
  margin-right: var(--space-none); 
}
.is-rtl .margin-right-l { 
  margin-left: var(--space-l); 
  margin-right: var(--space-none); 
}
.is-rtl .margin-right-xl { 
  margin-left: var(--space-xl);
  margin-right: var(--space-none); 
}
.is-rtl .margin-right-xxl { 
  margin-left: var(--space-xxl); 
  margin-right: var(--space-none); 
}


/* $7.8.4 - RTL Mode - Styles - Space - Margin Right  */
.is-rtl .margin-left-none { 
  margin-left: var(--space-none); 
  margin-right: var(--space-none); 
}
.is-rtl .margin-left-xs { 
  margin-left: var(--space-none); 
  margin-right: var(--space-xs); 
}
.is-rtl .margin-left-s { 
  margin-left: var(--space-none); 
  margin-right: var(--space-s); 
}
.is-rtl .margin-left-base { 
  margin-left: var(--space-none); 
  margin-right: var(--space-base); 
}
.is-rtl .margin-left-m { 
  margin-left: var(--space-none); 
  margin-right: var(--space-m); 
}
.is-rtl .margin-left-l { 
  margin-left: var(--space-none); 
  margin-right: var(--space-l); 
}
.is-rtl .margin-left-xl { 
  margin-left: var(--space-none);
  margin-right: var(--space-xl); 
}
.is-rtl .margin-left-xxl { 
  margin-left: var(--space-none); 
  margin-right: var(--space-xxl); 
}


/* $7.8.5 - RTL Mode - Styles - Others  */
.is-rtl [align="right"],
.is-rtl .text-align-right {
  text-align: left;
}

.is-rtl [align="left"],
.is-rtl .text-align-left {
  text-align: right;
}

/* $8.0 - VISJS - Timeline  */

.vis.timeline .vispanel > .content {
  position: relative;
  height: auto !important;
  overflow-y: initial;
  width: auto;
  float: none;
  display: block;
}

/* $9.0 - Animations  */

/* $9.1 - Blinking  */

.blinking{
    animation:  blinking 0.8s infinite;
}

@keyframes blinking {
    0%  {    opacity: 0.5;    }
    33% {    opacity: 1;    }
    67% {    opacity: 1;    }
    100%{    opacity: 0.5;    }
}

/* The CSS classes below will be excluded in the Style Classes dropwdown of Widgets */
/* ExcludeFromPickers: accordion, accordion-item, accordion-item-content, accordion-item-header, accordion-item-icon, accordion-item-title, active, alert, alert-close, alert-icon, alert-message, align-items-center, animate, 
animated-label, animated-label-inline, animated-label-input, animated-label-text, Application_Menu, app-logo, badge, badge-icon, badge-medium, badge-small, balloon, balloon-container, balloon-content, balloon-footer, balloon-title, 
blank-slate, blank-slate-content, bottom-center, bottom-left, bottom-right, breadcrumbs, breadcrumbs-item, Button, button-group, card-background, card-background-color, card-background-content, card-background-image, card-content, 
card-footer, card-image, card-sectioned, card-sectioned-right, card-sectioned-top, card-title, carousel, carousel-arrow-left, carousel-arrow-right, carousel-navigation, carousel-padding-none, center, center-align, 
center-left, center-right, chat, chat-message, chat-message-actions, chat-message-content, chat-message-name, chat-photo, checkbox, choices, choices__button, choices__heading, choices__inner, choices__input, 
choices__input--cloned, choices__item, choices__item--disabled, choices__item--selectable, choices__list, choices__list--dropdown, choices__list--multiple, choices__list--single, choices__placeholder, ColumnHeader, 
columns, columns2, columns3, columns4, columns5, columns6, columns-item, columns-medium-left, columns-medium-right, columns-small-left, columns-small-right, content, content-bottom, content-breadcrumbs, content-middle, content-top, 
content-top-actions, content-top-title, ControlActions, controls, counter, Counter_Message, customize-tools, desktop, desktop-big, desktop-hd, desktop-small, dropdown, dropdown-container, dropdown-content, dropdown-content-list, 
dropdown-header, dropdown-icon, EditableTable, EditRecord, enter-bottom, enter-fade, enter-left, enter-right, enter-scale, enter-top, expandable-row, fa, fa-fw, fail, Feedback_AjaxWait, Feedback_AjaxWait_CursorProgress, 
Feedback_Message_Error, Feedback_Message_Info, Feedback_Message_Success, Feedback_Message_Warning, Feedback_Message_Wrapper, Feedback_Message_Wrapper_Close, file-upload, file-upload-button, file-upload-delete, 
file-upload-icon, file-upload-message, file-upload-widget, Form, gallery-content, gallery-item, has-event, header, header-center, header-content, header-left, header-right, header-top, hide-on-service-studio, icon, 
icon-silk-angle-down, icon-silk-chevron-down, icon-silk-rocket, icon-silk-search, ie10, ie11, img, img-1, img-2, img-3, img-4, img-5, img-6, img-7, img-8, InEditMode, input, input-with-icon, input-with-icon-content-icon, 
input-with-icon-input, interval, Is_Default, is-active, is--active, is--animating, is-bound, is--closed, is--collapsed, is-disabled, is--disabled, is--expanded, is-flipped, is-focused, is-hidden, is--hidden, 
is-highlighted, is-inline, is-open, is--open, is-outside-current-month, is-right, is-rtl, is-selected, is-today, is--visible, jello, justified, justify-content-flex-end, label-top, layout, layout-left, layout-login, 
layout-login-background, layout-login-form, layout-login-form-content, layout-login-simple, layout-side, layout-top, lazyload, leave-bottom, leave-fade, leave-left, leave-right, leave-scale, leave-top, left, lightbox, 
lightbox-content-thumbnail, light-theme, ListNavigation_CurrentPageNumber, ListNavigation_DisabledNext, ListNavigation_DisabledPrevious, ListNavigation_Ellipsis, ListNavigation_Next, ListNavigation_PageNumber, 
ListNavigation_Previous, ListNavigation_Wrapper, list-navigation-circle, list-navigation-inline, list-navigation-sharp, ListRecords, loaded, logo-preview, lt-ie9, main, main-content, MandatoryLabel, 
Menu_DropDownArrow, Menu_DropDownButton, Menu_DropDownPanel, Menu_SubItemsPlaceholder, Menu_SubMenuItemActive, Menu_TopMenu, Menu_TopMenuActive, Menu_TopMenus, menu-icon, menu-icon-line, modal, modal-close, modal-content, 
modal-footer, modal-overlay, modal-title, modal-top, modal-wrapper, month-picker, nav, navigation, navigation-bar, navigation-bar-item, navigation-bar-item-content, navigation-bar-item-subitem, navigation-bar-item-title, 
navigation-bottom, navigation-menu, navigation-top, nav-toggle-handle, next, next-year, Not_Valid, noUi-active, noUi-connect, noUi-connects, noUi-handle, noUi-horizontal, noUi-marker, noUi-marker-horizontal, noUi-pips, 
noUi-pips-horizontal, noUi-pips-vertical, noUi-target, noUi-value-horizontal, noUi-value-vertical, noUi-vertical, OnEdit, only-balloon, open, os-internal-header-space, os-internal-Popup, os-internal-PopupCallOut, 
os-internal-ui-autocomplete, os-internal-ui-dialog, os-internal-ui-dialog-buttonpane, os-internal-ui-dialog-content, os-internal-ui-dialog-title, os-internal-ui-dialog-titlebar, os-internal-ui-dialog-titlebar-close, 
os-internal-ui-dialog-titlebar-close-hover, os-internal-ui-dialog-titlebar-close-no-title, os-internal-ui-draggable, os-internal-ui-resizable-e, os-internal-ui-resizable-n, os-internal-ui-resizable-ne, os-internal-ui-resizable-nw, 
os-internal-ui-resizable-s, os-internal-ui-resizable-se, os-internal-ui-resizable-sw, os-internal-ui-resizable-w, os-internal-ui-state-hover, os-internal-ui-widget-overlay, OUTSYSTEMS_INTERNAL_BLOCK_INSTANCE, panel, panel-actions, 
panel-content, panel-footer, panel-header, panel-title, past, ph, phone, phone-break-all, phone-break-first, phone-break-last, phone-break-middle, pika-button, pika-days-picker, pika-go-today, pika-label, pika-labels, 
pika-month, pika-next, pika-prev, pika-select-month, pika-select-year, pika-single, pika-table, pika-title, pika-today-container, pika-year, playbutton-wrapper, portrait, prev, prev-year, progress, progress-bar-base, 
progress-bar-extra-small, progress-bar-small, progress-container, progress-content, progress-title, progress-value, pswp, pswp__bg, pswp__button, pswp__button--arrow--left, pswp__button--arrow--right, pswp__button--close, 
pswp__button--fs, pswp__button--share, pswp__button--zoom, pswp__caption, pswp__caption__center, pswp__caption--empty, pswp__caption--fake, pswp__container, pswp__counter, pswp__element--disabled, pswp__error-msg, pswp__img, 
pswp__img--placeholder, pswp__img--placeholder--blank, pswp__item, pswp__preloader, pswp__preloader__cut, pswp__preloader__donut, pswp__preloader__icn, pswp__preloader--active, pswp__scroll-wrap, pswp__share--download, 
pswp__share--facebook, pswp__share-modal, pswp__share-modal--fade-in, pswp__share-modal--hidden, pswp__share--pinterest, pswp__share-tooltip, pswp__share--twitter, pswp__top-bar, pswp__ui, pswp__ui--fit, 
pswp__ui--hidden, pswp__ui--idle, pswp__ui--one-slide, pswp__ui--over-close, pswp__zoom-wrap, pswp--animate_opacity, pswp--animated-in, pswp--css_animation, pswp--dragging, pswp--fs, pswp--has_mouse, pswp--ie, pswp--minimal--dark, 
pswp--open, pswp--supports-fs, pswp--touch, pswp--zoom-allowed, pswp--zoomed-in, radio-button, range-slider, range-slider-label, range-slider-object, range-slider-separator, range-slider-values, ReadOnly, right, rollOut, 
RowControlGroup, scrollable-row, search, search-actions, search-balloon, search-balloon-answers, search--wrapper, section-actions, section-content, section-header, select, Selected, separator, separator-horizontal, 
separator-vertical, sidebar, sidebar-container, sidebar-content, sidebar-header, sidebar-overlay, SmartInput_Changed, SortColumns_Sortable, SortColumns_Sorted, subtitle, suite-container, table-no-header, TableRecords, 
TableRecords_BottomNavigation, TableRecords_EvenLine, TableRecords_ExpandedRow, TableRecords_Header, TableRecords_Label, TableRecords_OddLine, table-records-medium, table-records-small, table-records-stripping, 
tablet, tablet-break-all, tablet-break-first, tablet-break-last, tablet-break-middle, tabs, tabs-content, tabs-content-item, tabs-header, tabs-header-item, tabs-header-right, tabs-vertical, tag, tag-medium, tag-small, 
textarea, ThemeGrid_Container, ThemeGrid_MarginGutter, thumbnails, timeline-item, timeline-item-date, timeline-item-icon, timeline-item-left, timeline-item-right, timeline-item-separator, tippy-arrow, tippy-backdrop, 
tippy-iOS, tippy-notransition, tippy-popper, tippy-roundarrow, tippy-tooltip, title, Title_Links, tns-ah, tns-controls, tns-fadeIn, tns-fadeOut, tns-gallery, tns-horizontal, tns-item, tns-lazy-img, tns-moving, tns-nav, 
tns-no-calc, tns-normal, tns-no-subpixel, tns-outer, tns-ovh, tns-slide-active, tns-slider, tns-subpixel, tns-transparent, tns-visually-hidden, toggle-button, toggle-button-label, tooltip, tooltip-bottom, tooltip-container, 
tooltip-left, tooltip-right, tooltip-top, tooltip-widget, top-center, top-left, top-right, user-avatar, ValidationMessage, vertical, visually-hidden, wizard, wizard-item, wizard-item-icon, wizard-item-icon-wraper, wizard-item-label,
wizard-vertical, wrapper, year-picker, Heading2 */



/*## START OF THE STYLESHEET ##*/


/*Root declarations and variables*/
:root{
--menu-animation-speed:0.5s;
}

.font-style-italic {
font-style: italic;
}

.font-size-xxs{
  font-size: 10px;
}

/* ### Styling for the SideMenu ###*/

.overflow-y-scroll {
  overflow-y: scroll;
}

.THMenuItem{
  background-color: var(--color-menu-background);
  transition:ease-in-out var(--menu-animation-speed);
  height:80px;
}

.THSideMenu {
  background-color: var(--color-menu-background);
  height: 100%;
  max-width: 80px;
  overflow: hidden;
  position: absolute;
  transition: ease-in-out var(--menu-animation-speed);
  width: 80px;
  z-index: 101;  
}

.SideMenu{
  float:left;
  height:100%;
  width:80px;
}

.layout.layout-top.hide-side-menu .SideMenu {
  display: none;
}

.THSideMenu:hover {
  width: auto;
  max-width:300px;
  transition:max-width ease-in-out var(--menu-animation-speed);

}


div.THMenuItem:hover,
div.HomeButtonBackground:hover{
cursor:pointer;
background-color: #b1b3b6;
transition:ease-in-out var(--menu-animation-speed);

}

a .THMenuItem:hover{
text-decoration:none;
}



.THMenuText, .THMenuIcon {
  color:#414042 ;
  text-transform: uppercase;
  font-size:13px;
  line-height:1;
}

.THMenuText{
  display:none; 
  margin-left:20px;   
}

:hover.THSideMenu .THMenuText{
display:inline;
transition:ease-in-out var(--menu-animation-speed);
padding-right:30px;

} 



.IconClassGeneral {
  min-height: 46px;
  min-width: 46px;
  margin-left:17px;
}


:hover.THSideMenu .THHomeText{
display:inline;
color:#000;
transition:ease-in-out var(--menu-animation-speed);
}

.THHomeText{
  display:none; 
  text-transform: uppercase;
  margin-left:20px;
  font-size:10px;
}
.HomeButtonBackground{
  background-color: var(--home-button-background);
  background-position: center;
  border-bottom: 1px solid var(--color-menu-background);
  min-height: 80px;
  min-width: 46px;
  padding-top: 17px;
}

.HomeButton{
  background-image: url(/IMSGeneral_Th/img/icon_home_circle.svg);
  background-repeat:no-repeat;
  background-position:center;
}

.CompanyLogo{
display: block;
}


/*## TopMenuStyling ##*/

.AppLogoContainer img{
  display: block;
  width: auto;
  height: auto; 
}

.TopMenuItem {
  margin: 0 20px;
}

.TopMenuItem .dropdown-content-list {
  margin-top: var(--space-s)
}

.TopMenuItem:last-child {
  margin-right: 0px;
}

.TopMenuItemImgIcon {
  width: 40px;
  height: 40px;
  background-repeat:no-repeat;
  background-position:center;
  cursor: pointer; cursor: hand;
}

.TopMenuItemImgIcon.TopMenuItemImgIconSwitch {
  background-image: var(--switch);
}

.ButtonDropdown:hover .TopMenuItemImgIcon.TopMenuItemImgIconSwitch,
.TopMenuItemImgIcon.TopMenuItemImgIconSwitch:hover
 {
  background-image: url(/IMSGeneral_Th/img/icon_switch_grey.svg);
}


.TopMenuItemImgIcon.TopMenuItemImgIconConfig {
  background-image: var(--config);
}

.ButtonDropdown:hover .TopMenuItemImgIcon.TopMenuItemImgIconConfig {
  background-image: url(/IMSGeneral_Th/img/icon_config_grey.svg);
}

.TopMenuItemImgIcon.TopMenuItemImgIconProfile {
  background-image: var(--profile);
}

.ButtonDropdown:hover .TopMenuItemImgIcon.TopMenuItemImgIconProfile,
.TopMenuItemImgIcon.TopMenuItemImgIconProfile:hover
 {
  background-image: url(/IMSGeneral_Th/img/icon_profile_grey.svg);
}

.TopMenuItemImgIcon.TopMenuItemImgIconHelp {
  background-image: var(--help);
}

.ButtonDropdown:hover .TopMenuItemImgIcon.TopMenuItemImgIconHelp,
.TopMenuItemImgIcon.TopMenuItemImgIconHelp:hover {
  background-image: url(/IMSGeneral_Th/img/icon_help_grey.svg);
}

.TopMenuItemImgIcon.TopMenuItemImgIconMessageBox {
  background-image: var(--vendormessagebox);
}

.ButtonDropdown:hover .TopMenuItemImgIcon.TopMenuItemImgIconMessageBox,
.TopMenuItemImgIcon.TopMenuItemImgIconMessageBox:hover {
  background-image: url(/IMSGeneral_Th/img/iconvendormessageboxgrey.svg);
}

.TopMenuItemImgIcon.TopMenuItemImgIconLogout {
  background-image: var(--vendorlogout);
}

.ButtonDropdown:hover .TopMenuItemImgIcon.TopMenuItemImgIconLogout,
.TopMenuItemImgIcon.TopMenuItemImgIconLogout:hover {
  background-image: url(/IMSGeneral_Th/img/iconvendorlogoutgrey.svg);
}

.ConfigIcon_yellow{
  background-image: url(/IMSGeneral_Th/img/icon_config_yellow.svg);
  }
  
.config-open .ConfigIcon_yellow{
  background-image: url(/IMSGeneral_Th/img/icon_config_grey.svg);}

.ConfigIcon_grey{
  background-image: url(/IMSGeneral_Th/img/icon_config_grey.svg);
}

.UserIcon{
  background-image: var(--profile);
}

.user-open .UserIcon{
  background-image:url(/IMSGeneral_Th/img/icon_profile_grey.svg); 
}
  
.HelpIcon_yellow{
  background-image: var(--help);
}

.HelpIcon_yellow:hover{
  background-image: url(/IMSGeneral_Th/img/icon_help_grey.svg);
}

.HelpIcon_grey{
  background-image: url(/IMSGeneral_Th/img/icon_help_grey.svg);
}


.IconClassTopMenu{
  width: 40px;
  height: 40px;
  background-repeat:no-repeat;
  background-position:center;
}

.Button .fa:first-child {
   padding: 0px; 
}

.TopMenuItemIcon{
  color: #000;
  font-size: 18px;
  height: 30px;
  width: 15px;
}

.TopMenuItemText{
  font-size: 10px;
  height: 30px;
  padding: 8px 0px 0px 0px;
  white-space: nowrap;
  width: 80px;
  margin-left: 0;
}





/*####*/
.locale__toggle{
background-color: #e6e7e8;
border-width: 0px;
height: 30px;
width:57px;
padding:10px;
display:inline-flex;
}


.LocaleToggleFlag{
height: 10px;
margin-right: 15px;
width: 15px;
}


.locale__toggle .ButtonIconRight img{
margin-top:1.5px;
}

/*####*/

.Login .LocaleSelectorDropdown,
.Public .LocaleSelectorDropdown
 {
font-size: 10px;
overflow:hidden;
height:0px;
background-color:var(--header-background-color);
max-width:200px;
width:auto;
min-width:113px;
position:absolute;
right:80px; 
margin-top: 65px;
z-index: 1000;
transition:ease-in-out var(--menu-animation-speed);
}


.LocaleSelectorDropdown{
font-size: 10px;
overflow:hidden;
height:0px;
background-color:var(--header-background-color);
max-width:200px;
width:auto;
min-width:113px;
position:absolute;
right:240px; 
margin-top: 35px;
z-index: 1000;
transition:ease-in-out var(--menu-animation-speed);
}


.locale-open .LocaleSelectorDropdown,
.locale-open .Login.LocaleSelectorDropdown{
height:auto;
transition:ease-in-out var(--menu-animation-speed);
}

.LocaleSubMenuItem {
height: 30px;
padding: 10px 10px;
margin-left:0px;
display: inline-table;
}

.LocaleSubMenuItemParent{
text-align:left;
}

.LocaleSubMenuItemParent:hover{
background-color:#f1f2f2;
}

.LocaleSubMenuItemParent:last-child .LocaleSubMenuItem{
border-bottom: solid black 0px;
}


.LocaleSubMenuItem img{
margin-right:15px;
min-width:15px;
max-width:15px;
min-height:10px;
max-height:10px;

}

.LocaleLanguageName {
height:10px;
max-height:10px;
font-size:11px;
overflow:inherit;
line-height:10px;

}

.QuickAddChild{
margin-left:20px;
position: absolute;
}

.QuickAddItem:after,
.LocaleSubMenuItemParent:after,
.ConfigSelectorItem:after,
.UserLayOverItem:after{
content:"";
display:block;
width:inherit;
height:1px;
background-color:#e6e7e8;
margin-left:10px;
margin-right:10px;
}

.QuickAddItem:last-child:after,
.LocaleSubMenuItemParent:last-child:after,
.ConfigSelectorItem:last-child:after,
.UserLayOverItem:last-child:after{
height:0px;
}


.QuickAddSelectorDropdown{
margin-top:15px;
font-size: 11px;
overflow:hidden;
background-color:var(--header-background-color);
width: 100%;
height:0px;
z-index: 1000;
transition:ease-in-out var(--menu-animation-speed);
}

.quickadd__toggle{
  margin-right: 20px;
  margin-top: 25px;
}

.quickadd-open .QuickAddSelectorDropdown{
height:auto;
width: 100%;
transition:ease-in-out var(--menu-animation-speed);
}

.QuickAddItem:hover{
background-color:#f1f2f2;
}

.QuickAddItem:hover .SubMenuItem{
background-color:unset;
}


.ConfigSelectorDropdown{
font-size: 11px;
overflow:hidden;
height:0px;
background-color:#fff;
width:115px;
position:absolute;
margin-left: -80px;
margin-top: 50px;
z-index: 1000;
text-align:left;
transition:ease-in-out var(--menu-animation-speed);
}

.config-open .ConfigSelectorDropdown{
height:auto;
width: auto;
transition:ease-in-out var(--menu-animation-speed);
}

.ConfigSelectorItem:hover{
background-color:#f1f2f2;
}



.ConfigSelectorItem .SubMenuItemIcon img{
min-width:10px;
max-width:10px;
min-height:unset;
max-height:unset;
margin-top:10px;
} 

.TopMenuContainer{
background-color:var(--color-neutral-4);
min-height: 30px;
min-width: 55px;
padding: 5px;
margin-top: 18px;
}


.user-layover{
font-size: 11px;
overflow:hidden;
height:0px;
background-color:#fff;
width:auto;
min-width:115px;
max-width:200px;
position:fixed;
right:0px;
text-align:left;
margin-top: 50px;
z-index: 1000;
transition:ease-in-out var(--menu-animation-speed);
}

.UserLayOverItem .SubMenuItemIcon{
margin-right:11px;
}

.UserLayOverItem:hover{
background-color:#f1f2f2;
}

.user-open .user-layover {
height:auto;
width: auto;
transition:ease-in-out var(--menu-animation-speed);
}

.help__toggle{}

/*Company Screen Styling*/

.HeaderColor{
  color: #ffdc7c;
}

.PrimaryText{
  color: #E84E0F
}

.SecondaryText{
  color: #FBC215 
}

.FilterBackground{
  background: #DEDEDE; 
  box-shadow: 3px 3px 3px #ffdc7c;
  padding:var(--space-base);
}

.FilterBox{
  background: #9B9B9B
}

.accordion-item:first-child {
  border-radius: 0px;
}

.FilterInput {
  background-color: #9B9B9B;
  color: #ffdc7c;
}

.input--filter, .choices--filter .choices__inner {
  background-color: var(--color-neutral-2);
}

.choices--filter .choices__inner {
  min-width: 150px;
}

.BackgroundHeader {
  background-color: #4A4A4A;
  color: #ffdc7c;
  padding: var(--space-base);
}


.ContainerAlignment {
  margin-left: -3%;
}

/*### Custom Pagination Widget ###*/

.PaginationIcon{
  background-repeat:no-repeat;
  height:20px;
  background-color:var(--color-button);
  width:20px;
  margin-right:10px;
  padding:5px;
  display:inline-flex;
  }


.PaginationIcon:hover{
background-color: var(--color-button-hover);
}

.PaginationText{
margin-left: 10px;
margin-right: 20px;
}


.PaginationText, .PaginationTotalsText{
  font-size:14px;
}

.disabled .PaginationIcon{
background-color: #d1d3d4;
opacity:0.9;
cursor: default;
}

.PaginationTotalsText{
  margin-left: 10px;
  overflow: visible;
}

.IconFirst{
  background-image: url(/IMSGeneral_Th/icon_first.svg);
  }

.IconPrevious{
  background-image: url(/IMSGeneral_Th/icon_previous.svg);
  }

.IconNext{
  background-image: url(/IMSGeneral_Th/icon_next.svg);
  }

.IconLast{
  background-image: url(/IMSGeneral_Th/icon_last.svg);
  }
  

.pagination-container {
  min-height: 30px;
}

.pagination-container .pagination-navigation {
  flex-grow: 1;
}

.pagination-extra-content:empty {
  display: none;
}

.pagination-extra-content {
  min-width: 150px;
}

.LineCountText{
font-size:14px;
}

.choices.LineCountDropdown{
margin-left:15px;
width:80px;
height:30px;
text-align: left;
}

.LineCountButtons:empty {
  display: none;
}
  
/*### Transformation stylings ###*/

.rotate90{
transform: rotate(90deg);
}

.display-block{
display: block;
}



/*## Tab navigation styling ##*/



/*## top menu styling ##*/



/*## Button Styling ##*/
.ContainerButton {
  text-transform:uppercase;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--color-button);
  border-radius: var(--border-radius-none);
  border: 0px solid;
  color: var(--color-neutral-0);
  cursor: pointer;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  vertical-align:middle;
  font-size: var(--font-size-s);
  font-weight: var(--font-medium);
  height: 30px;
  line-height:30px;
  white-space:nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0px 10px;
  -webkit-transition: all 180ms linear;
  transition: all 180ms linear;
}

.ContainerButton.ContainerButtonCircle {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50px;
  font-size: var(--font-size-l);
  padding: 0;
}

.ContainerButton.ContainerButtonPrimary {
  background-color: var(--color-button);
  /*color: var(--color-neutral-10);*/
  color: var(--color-neutral-0);
}

.ContainerButton.ContainerButtonPrimary:hover {
  background-color:var(--color-button-hover);
  /*color: var(--color-neutral-10);*/
  color: var(--color-neutral-0);
}

.ContainerButton:hover{
  background-color:var(--color-button-hover);
}

.ContainerButton.ContainerButtonSecondary {
  background-color: var(--color-secondary);
  color: var(--color-neutral-0);
}
.ContainerButton.ContainerButtonSecondary:hover {
  background-color: var(--color-secondary-darker);
}

.ContainerButton.ContainerButtonGrey {
  background-color: #e6e7e8;
  color: var(--color-neutral-10);
}

.ContainerButton.ContainerButtonGrey:hover{
  background-color: #e6e7e8;
  color: var(--color-neutral-10);
}

.ContainerButton.ContainerButtonBlue {
  background-color: var(--color-blue);
}

.ContainerButton.ContainerButtonBlue:hover{
  background-color:  var(--color-blue-dark);
}

.ContainerButton.ContainerButtonDarkGrey {
  background-color: var(--color-neutral-5);
  color: var(--color-neutral-10);
}

.ContainerButton.ContainerButtonDarkGrey:hover{
  background-color: var(--color-neutral-7);
  color: var(--color-neutral-10);
}

.ContainerButton.ContainerButtonWhite {
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-10);
}

.ContainerButton.ContainerButtonWhite:hover{
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-10);
}

.ContainerButton.ContainerButtonRed {
  background-color: var(--color-red);
}

.ContainerButton.ContainerButtonRed:hover{
  background-color: var(--color-red-dark);
}

.ContainerButton.ContainerButtonGreen {
  background-color: var(--color-green-dark);
}

.ContainerButton.ContainerButtonGreen:hover{
  background-color: var(--color-green-darkest);
}

.ButtonIcon{
 /* margin-left:10px; */
 margin-right:10px;
 display: flex;
}

.ButtonIcon:empty {
  display: none;
 }

.ButtonIcon img{
min-width:13px;
max-width:13px;
/* margin-top: -1px;*/
display:inline-block;
vertical-align:middle;
}

.ButtonIconRight img{
min-width:7px;
max-width:7px;
/* min-height:10px; */
/* max-height:10px; */
/* margin-top: 10px; */
display: flex;
}

.ButtonIconRight{
margin-left: 15px;
margin-right: 0px;
}

.ButtonText{
font-size:13px;
display:inline-block;
vertical-align:middle;
}

.SubMenuItem{
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: inherit;
  border-radius: var(--border-radius-none);
  border: 0px solid;
  color: #000000;
  cursor: pointer;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
  font-size: 11px;
  font-weight: var(--font-medium);
  height: 30px;
  padding-left:10px;
  padding-right:10px;
  white-space:nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-transition: all 180ms linear;
  transition: all 180ms linear;
}


.SubMenuItemIcon{
margin-right:10px;
}

.SubMenuItem img{
min-width: 13px;
max-width: 13px;
min-height:13px;
max-height:13px;
margin-top: 8px;
}

.SubMenuItemText{
margin-top: 10px;
margin-bottom: 10px;
line-height: 10px;
}


/*Custom input, select and textarea*/

.Label{
  font-size: 11px;
  font-weight: regular;
  font-color : #000000;
  text-transform: uppercase;
}

.Dropdown, .dropdown{
  font-size: 14px;
  font-weight: regular;
  font-color : #000000;
}
.Dropdown-medium, .dropdown-medium{
  min-width: 350px;
}
.Dropdown-small, .dropdown-small{
  min-width: 200px;
}


/* Custom layout-top */


.layout-top .content .ThemeGrid_Container .Login {
  margin: 0px 0px 0px 0px;
  padding: 20px 20px 0px 20px;
  max-width: 100%;
  width: auto !important;
}

/* custom title/h1 */
.customheadingh1 {
  font-size: 38px;
  color: rgb(0,0,0, 0.87);
  font-weight: 800;
}


/* custom headertop*/

.layout .header {
  box-shadow: none;
}

.ApplicationTitleImageMainContainer {

}

.layout.layout-top.hide-top-menu .TopMenuMainContainer{
  display: none;
}

/* custom breadcrumbs styling*/

.borderbottom {
  border-bottom: 3px solid #000;   
}

.borderbottomLight {
  border-bottom: 1px solid #000;   
}


/*TabPage styling*/
.TabPageHeading{
  font-size: 38px;
  font-weight: 800;
  line-height: 30px;
  color: #000
}

.NoSubTab{
margin-top: 57px;
}




/*## EDITABLE TABLE STYLING ###*/
.EditableTable tr:nth-child(even) {
  background-color: #f1f2f2;
  }

.EditableTable:not(.WithTouchEvents) tbody tr:hover td {
      background-color: #dcddde;
  }


/*##True Or False Icon Styling ##*/

.TrueOrFalseIcon{
  width: 20px;
  }

.inline-custom-icon{
  position: relative;
  bottom: -4px;
  width: 15px;
}
  

/*## Detail accordion Styling ##*/
.DetailBlockContentContainer {
  margin: var(--space-s) calc(-1 * var(--space-m)) 0 calc(-1 * var(--space-m));
}

.DetailBlockButtons {
  padding: 0 var(--space-m);
}

.DetailBlockButtons:empty {
  display: none;
}

.DetailBlockItem {
  display: inline-block;
  line-height: 30px;
  min-height: 30px;
  padding: 0 var(--space-m);
  width: 50%;
}

.DetailRow {
  line-height: 30px;
  min-height: 30px;
  position: relative;
}

.DetailRow.DetailRowSmallLabel .DetailLabel {
  line-height: 30px;
  min-height: 30px;
  position: relative;
}

.DetailBlockItemFullWidth,
.DetailBlockItemFill {
  width: 100%;
}

.DetailBlockItemNoPadding {
  padding: 0;
}

.DetailBlockItemFullWidth .DetailLabel {
  width: calc(20% - 8px)
}

.DetailBlockItemFullWidth .DetailValue {
  width: calc(80% + 8px)
}

.DetailBlockItemFullWidth.DetailBlockItemWideLabel .DetailLabel {
  width: calc(30%);
}

.DetailBlockItemFullWidth.DetailBlockItemWideLabel .DetailValue {
  width: calc(70%);
}

.DetailBlockItemSubtitle {
  display: inline-block;
  line-height: 30px;
  min-height: 30px;
  padding: 0 var(--space-m);
  width: 100%;
}

.DetailLabel,
.DetailValue,
.DetailLabelFixed,
.DetailValueFixed{
  font-weight: normal;
  font-size: var(--font-size-s);
}

.DetailLabel,
.DetailLabelFixed {
  color: #6d6e71;
  padding-right: var(--space-s);
}

.DetailRow.DetailRowSmallLabel .DetailLabel {
  width: 30% !important;
}

.DetailRow.DetailRowSmallLabel .DetailValue {
  width: 70% !important;
}

.DetailRow.DetailRowSimple {
    width: 100%;
}

.DetailRow.DetailRowSimple .DetailValue {
    line-height: 1.5;
}

.DetailLabel label,
.DetailLabelFixed label {
  padding-bottom: 0 !important;
}

.DetailLabelFixed{
    width: 200px;
}

.Single.DetailValueFixed{
    width: 310px;
}

.DetailValueFixed{
    width: 200px;
}

.DetailValueFill {
  width: 100%;
}

.DetailValue p:only-child {
  margin: 0;
}

.DetailValue p:not(:only-child):first-child {
  margin-top: 0;
}

.DetailValue p:not(:only-child):last-child {
  margin-bottom: 0;
}

.DetailBlockContentContainer .ContainerButton {
  margin-left: var(--space-m);
}

.DetailBlockContentContainer .ExtraButtonsContainer .ContainerButton {
  margin-right: var(--space-m);
  margin-left: 0;
}

.DetailBlockContentContainer .ExtraButtonsContainer > *:last-child .ContainerButton {
  margin-right: 0;
  margin-left: 0;
}

.DetailBlockList {
  display: inline-block;
  line-height: 30px;
  margin-bottom: var(--space-s);
  min-height: 30px;
  padding: 0 var(--space-m);
  width: 100%;
}


.DetailBlockList.padding-none {
  padding: 0;
}

.DetailBlockList .DetailBlockListHeader {
  background: var(--color-table-header);
  font-weight: bold;
  padding: 0 var(--space-s);
  min-height: 50px;
  line-height: 50px;
}

.DetailBlockList .DetailBlockListList {
  border: 1px solid var(--color-table-header);
  border-top: none;
  line-height: 40px;
  min-height: 40px;
}

.DetailBlockList .DetailBlockListList > span:not(.ListRecords) {
  padding: 0 var(--space-s);
}

.DetailBlockList .DetailBlockListList .ListRecords > div {
  cursor: pointer;
  cursor: hand;
  display: block;
  margin-bottom: 0;
  padding: 0 var(--space-s);
  line-height: 40px;
  min-height: 40px;
}

.DetailBlockList .DetailBlockListList .ListRecords > div:nth-child(even) {
  background: #f1f2f2;
}

.DetailBlockList .DetailBlockListList .ListRecords > div:hover {
  background: #dcddde;
}

.DetailLabels{
  width: calc(20% - 24px);
}

.DetailInputs{
  width: calc(30% - 36px);
}

.DetailLabelsLeft{
}

.DetailInputsLeft{
  
}

.DetailLabelsRight{
  margin-left: 40px;
}

.DetailInputsRight{
  
}

.DetailValueText {
  display: block;
  padding: 5px 0;
  line-height: 20px;
}


/* Detail Block Grid Columns Styling  20-04-2023*/

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  margin-bottom: var(--space-m);
}

.grid-container.grid-header {
    font-weight: bold;
}

.grid-container > div:not(.column1) {
    justify-content: center;
}

.grid-cell {
    display: flex;
    align-items: center;
    font-size: var(--font-size-s);
    padding-bottom: var(--space-m);
}

.grid-cell.border-bottom_neutral {
    border-bottom: 1px solid var(--color-neutral-3);
}



/*## Search block Styling ##*/

.SearchBlock {
}

.SearchBlockContent {
  width: 100%;
}

.SearchBlockContent > div {
  margin-right: var(--space-l)
}

.SearchBlockItem {
}

.SearchBlockButtons {
}

.SearchBlockButtons .ContainerButton {
  margin-bottom: var(--space-s);
}

.SearchBlockItemLabel {
}

.SearchBlockItemContent

/*##POPUP PAGE STYLING##*/



.PopUpLayoutMain{
  padding: 0px 0px 30px 0px;
  background-color: #fff;  
}

.PopUpLayoutMain .DetailRow{
  margin-left: 30px;
  margin-right: 30px;
  min-height: 30px;
  line-height: 30px;
}

.PopupTitle{
    font-size:38px;
    color:#000;
    font-weight:800;
    line-height: 1;
}

.PopupClose {
  display: block;
  height: 15px;
  position: absolute;
  right: 35px;
  top: 30px;
  width: 15px;
}

.PopupContent{
    margin: 40px -30px 10px -30px;
}


.PopupFooter{
  width: 100%;
}

.os-internal-ui-dialog.os-internal-ui-widget.os-internal-ui-widget-content.os-internal-ui-corner-all.os-internal-Popup.os-internal-ui-draggable form,
.os-internal-ui-dialog.os-internal-ui-widget.os-internal-ui-widget-content.os-internal-ui-corner-all.os-internal-Popup.os-internal-ui-draggable body,
.os-internal-ui-dialog.os-internal-ui-widget.os-internal-ui-widget-content.os-internal-ui-corner-all.os-internal-Popup.os-internal-ui-draggable html{
    height:100%;
}

.PosRelative{
    position: relative;
}


/*##END OF POPUP PAGE STYLING##*/

/**/
.FilterArrow img{
  height: 15px;
  margin-top: 7.5px;
}

.FilterArrow{
  width:30px;
  display:inline-block;
}


/*##Image Icon styling##*/
.BaseSizeIcon{
  width: 20px;
  height: 20px;
}

/*## BUTTON DROPDOWN STYLING ##*/

.ButtonDropdown {
  position: relative;
}

.ButtonDropdown .dropdown {
  width: auto;
}

.ButtonDropdown .dropdown .dropdown-header {
background: none;
border: none;
height: auto;
padding: 0;
}

.ButtonDropdown .dropdown.is--visible .dropdown-header {
background: none;
border: none;
}

.ButtonDropdown .dropdown .dropdown-header .dropdown-icon {
display: none;
}

.ButtonDropdown .dropdown .dropdown-content {
  right: 0;
  min-width: 100%;
  position: absolute;
}

.ButtonDropdown.ButtonDropdownAlignLeft .dropdown .dropdown-content {
  right: unset;
  left: 0;
}

.ButtonDropdown.ButtonDropdownStartOutside .dropdown .dropdown-content {
  right: calc(-1 * var(--space-m));
}

.ButtonDropdown.ButtonDropdownAlignLeft.ButtonDropdownStartOutside .dropdown .dropdown-content {
  right: unset;
  left: calc(-1 * var(--space-m));
}

.ButtonDropdown .dropdown .dropdown-content .dropdown-content-list {
border: none;
padding: 0;
position: relative;
margin-top: var(--space-s);
min-width: 100%;
width: auto;
pointer-events: unset;
}

.ButtonDropdown.ButtonDropdownShowOnHover .dropdown .dropdown-content,
.ButtonDropdown:not(.ButtonDropdownShowOnHover) .dropdown.is--hidden .dropdown-content {
  height: 0;
}


.ButtonDropdown.ButtonDropdownShowOnHover:hover .dropdown .dropdown-content,
.ButtonDropdown:not(.ButtonDropdownShowOnHover) .dropdown.is--visible .dropdown-content {
  display: block;
  height: auto;
}

.dropdown.is--visible .dropdown-content .dropdown-content-list,
.ButtonDropdown.ButtonDropdownShowOnHover:hover .dropdown .dropdown-content .dropdown-content-list {
  opacity: 1;
  visibility: visible;
}


.ButtonDropdownItem {
height: 30px;
padding: 0 10px;
position: relative;
cursor: pointer;
cursor: hand;
}

.ButtonDropdownItem:hover {
  background: #f1f2f2;
}

.ButtonDropdownItem::after {
  bottom: 0;
  border-bottom: 1px solid #e6e7e8;
  content: "";
  left: 10px;
  position: absolute;
  width: calc(100% - 20px);
}

.dropdown-content-list > div > div:last-child .ButtonDropdownItem::after,
.dropdown-content-list > div > a:last-child .ButtonDropdownItem::after,
.dropdown-content-list > div .ListRecords > div:last-child .ButtonDropdownItem::after  {
  display: none;
}

.dropdown-content-list > div > div:not(:last-child) .ButtonDropdownItem:only-child::after,
.dropdown-content-list > div .ListRecords > div:not(:last-child) .ButtonDropdownItem:only-child::after {
  display: block;
}

.ButtonDropdownItem .ButtonDropdownItemIcon {
  height: 10px;
  line-height: 10px;
}

.ButtonDropdownItem .ButtonDropdownItemIcon img {
width: 10px;
max-width: none;
}

.ButtonDropdownItem .ButtonDropdownItemText {
line-height: 30px;
padding-left: 10px;
font-size: 11px;
white-space: nowrap;
}

.ButtonDropdownItemLanguage .ButtonDropdownItem {
  padding-left: 35px;
}

.ButtonDropdownItemLanguage .ButtonDropdownItemText {
  padding-left: 0;
}

.ButtonDropdownItemLanguage .ButtonDropdownLanguageFlag {
  position: absolute;
  left: 10px;
}

/*##  BASETHEME   ##*/


/*##CUSTOM STYLING FOR AUTOCOMPLETE WIDGET##*/
input.os-internal-ui-autocomplete-loading {
    cursor: progress;
}

ul.os-internal-ui-autocomplete, ul.os-internal-ui-autocomplete li {
    margin: 0; 
    padding: 0; 
    list-style: none;
}

ul.os-internal-ui-autocomplete {
    position: absolute;
    z-index: 9999;
    margin-bottom: -5px;
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    border: var(--border-size-s) solid var(--color-neutral-5);
    background-color: #ffffff;
}


ul.os-internal-ui-autocomplete::-webkit-scrollbar{
    display:none;
}

ul.os-internal-ui-autocomplete li a {
    display: block;
    font-weight: normal;
    padding: 2px;
    outline: none;
    padding: var(--space-s) var(--space-base);
}

ul.os-internal-ui-autocomplete a {
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
    background-color: #ffffff;
    color: #000 !important;
}

ul.os-internal-ui-autocomplete a.os-internal-ui-state-hover {
    border-top: 0px solid #999999;
    border-bottom: 0px solid #999999;
    background-color: #f1f2f2;
    color: #000!important;
}

/* END OF CUSTOM AUTOCOMPLETE WIDGET STYLING*/


/*timepickerclass*/
.time-picker .dropdown-icon {
}


.CloseButtonContainer img{
    width: 12px;
    position: absolute;
    right: 30px;
}





/*########## VENDOR_CW Styling ############*/

/*## STyling VendorDetail ##*/

/*
.headingdetail {
 color: var(--color-secondary);   
}
*/
/*
.check {
    color: green;
}
*/
.fitlocale {
    white-space: nowrap;
}

 .TrueOrFalseIcon{
    width: 14px;
}

.TrueOrFalseIcon img{
    width: 14px;
}

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

.accordion-item.is--open {
    border-top: var(--border-none) !important;
}

.accordion-item--always-open {
    pointer-events: none;
}

.accordion-item--always-open .accordion-item-icon {
    display: none;
}

.fix {
    position: absolute;    
}


.borderbottom {
    border-bottom: 3px solid #000;   
}

.borderbottomLight {
    border-bottom: 1px solid #000;   
}

.red {
  color: red;   
}

.green {
 color: green;    
}

.longtitle {
  font-size: 50%;
}

.normaltitle {
  font-size: 100%;
}

.puntjes,
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

.break-word {
    word-break: break-all
}

.headingdetail {
    font: Noto Sans;
    font-weight: bold;
    color: var(--color-secondary); 
    margin-left: 5px;
    font-size: 18px;
}

.labelleft {
 margin-left: 0px;
 font: Noto Sans;
 font-weight: normal; 
 color :  #6d6e71;
 font-size : 13px;
}

.labelright {
 font: Noto Sans;
 font-weight: normal;
 color:  #6d6e71;
 font-size : 13px;
}



.dataviewmode {
 /*max-width: 1200px;   */
 font: Noto Sans;
 font-weight: normal;
 font-color :  #000000;
 font-size : 13px;
}
/*
@media only screen and (max-width: 1600px) {
  [class*="dataviewmode"] {
    max-width: 1000px;  
  }
}
*/
.topcontainer {
 height: 10px;   
}

.marginbottomdetailsection {
    height: 20px;   
}

.emptyrow {
    height: 20px;   
}

.emptyinput {
    height: 30px;   
}

.viewcontainer {
    height: 30px; 
    vertical-align: middle;
}

.addresstitle {
 font: Noto Sans;
 font-weight: bold;
font-color : #000000;
font-size : 13px;
height: 40px;
margin: auto;
}

/*## Styling TabVendorLanguagesWB ##*/

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

.fitlocale {
    white-space: nowrap;
}



/**/


/*#### HPVENDOR STYLING ####*/


/*## Vendor Detail Availability ##*/
.availability-at-night-header {
  display: block;
  height: var(--space-l);
  line-height: var(--space-l);
}

.availability-at-night-item {
  height: 31px;
  line-height: 31px;
}

/*## Vendor WIzard Webblocks styling##*/
.PopupButtonFooterContainer{
    padding-right:25px;
}

/*## Timepicker listrecords adjustment on modal and popups ##*/

.TimePickerDropdown .ListRecords{
    height: 100px;
}

/*#### CLIENT_CW ####*/

/*## MaindataClientDetailWB##*/
.borderbottom {
    border-bottom: 3px solid #000;   
}

.borderbottomLight {
    border-bottom: 1px solid #000;   
}

/*##Client Relations Webblock Styling##*/
.PosRelative{
    position: relative;
}

.PosAbsoluteBottom{
    position: absolute;
    bottom: 0px;
}

/*##### HP_CLIENT #####*/

/*## ClientDetail##*/

/*For the accordeon headers:*/
.headingdetail {
    font: Noto Sans;
    font-weight: bold;
    color: var(--color-secondary); 
    margin-left: 5px;
    font-size: 18px;
}

/*To remove the red border in the accordeon */
.accordion-item.is--open {
    border-top: var(--border-none) !important;
}

/*Red arrow accordeon should also be changed to the colour in the wireframe
(no css for this yet)*/

.labelleft {
 margin-left: 0px;
 font: Noto Sans;
 font-weight: normal; 
 color :  #6d6e71;
 font-size : 13px;
}

.labelright {
 font: Noto Sans;
 font-weight: normal;
 color:  #6d6e71;
 font-size : 13px;
}


 .TrueOrFalseIcon{
    width: 14px;
    }


.dataviewmode {
 /*max-width: 1200px;   */
 font: Noto Sans;
 font-weight: normal;
 font-color :  #000000;
 font-size : 13px;
}
/*
@media only screen and (max-width: 1600px) {
  [class*="dataviewmode"] {
    max-width: 1000px;  
  }
}
*/
.topcontainer {
 height: 10px;   
}

.marginbottomdetailsection {
 height: 20px;   
}

.emptyrow {
    height: 20px;   
}


.labeldetail {
 margin-top: 5px;   
 font: Noto Sans;
 font-weight: normal;
font-color : #6d6e71;
font-size : 13px;
}

.emptyinput {
      height: 30px;   
}

.viewcontainer {
    height: 30px; 
    vertical-align: middle;
}

.addresstitle {
 font: Noto Sans;
 font-weight: bold;
font-color : #000000;
font-size : 13px;
height: 40px;
margin: auto;
}

.icon {
    height: 15px;
    width: 15px;
    margin-left: 3px;
}

/*### ClientOverView ###*/
.listContainer{
    height: 600px;
}

.unset_fa-fw .fa-fw{
width: unset;
}

.BackGround_Gray{
    background-color: var(--color-gray-primary); 
}

.BackGround_LightGray{
    background-color: var(--color-gray-light); 
}

.BackGround_LighterGray{
    background-color: var(--color-gray-lighter);
}

.BackGround_LightestGray{
    background-color: var(--color-gray-lightest);
}



.fitlocale {
    white-space: nowrap;
}

.borderbottom {
    border-bottom: 3px solid #000;   
}

.borderbottomLight {
    border-bottom: 1px solid #000;   
}

.icon{
    width: 20px;
    height: 20px;
}


/*### HPCompany ###*/

/*CONFIGURATION screen*/
.headingdetail {
    font: Noto Sans;
    font-weight: bold;
    color: var(--color-secondary); 
    font-size: 18px;
}

.flag {
   width:  15px;
   height: 10px;
   margin-right: 15px; 
}

.TrueOrFalseIcon {
    width: 14px;
}




/*## Login page##*/

.layout.layout-top .content > .Login {
    height: 100%;
}

.layout.layout-top .content > .Login > .content-middle {
  height: 100%;
}

.LoginDiv{
    width: 100%;
    max-width: 450px;
    padding: 40px;
    background-color: var(--color-background-body);
    height: 100%;
    -webkit-box-shadow: 0 0 25px 0 rgba(0,0,0,0.15);
    box-shadow: 0 0 25px 0 rgba(0,0,0,0.15);
    overflow: auto;
}

.LoginDiv.WideForm{
  max-width: 550px;
}

.main,
.LoginDiv,
.layout-login-form
/* , .content-middle, .Login, .layout.layout-top*/
{
    height:100%;
}

.layout-login-form{
    overflow: auto;
}

.LoginTitle{
    text-transform:uppercase;
}

.LoginSubTitle{
    text-transform:uppercase;
}

.LoginLink, .LoginLink a{
    color : #f15a22;
    font-size : 12px;
    text-decoration:underline;
}

.TogglePasswordIconContainer{
    width: 30px;
}

.TogglePasswordIconContainer img{
    margin-right:10px;
}

.TogglePasswordVisibleContainer{
    padding-top: 5px;
}

.eyeToggleContainer{
    width: 8.4958%;
}

.BackgroundImageContainer{
    z-index:-1;
    position:absolute;
    overflow:hidden;
    top:0px;
    min-width:100%;
    min-height:100%;
    
}

.BackgroundImageContainer img{
    position:absolute;
    bottom:0px;
    right:0px;    
    width:100%;
    height: 100%;
    object-fit: cover;

}

/*no background for the range slider*/
.range-slider.no-slider-background .noUi-connect {
  background: none;
}

/*API-user and API-system user*/
.custom-width{
    width: 65%;
    text-align: right;
}

/* max lentg of listrecords in a popup so popup doesnt precalculate neeeded length and create unnesceary whitespace below*/
/* .PopUpLayoutMain .ListRecords{
  max-height:150px;
} */

/**/

.layout-print {
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 30px rgb(0 0 0 / 70%);
  margin: auto;
  width: 21cm;
  min-height: 29.7cm;
  padding: 1cm 1cm;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Noto Sans', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;  
  color: #000;
  font-size: 8pt;
  line-height: 1.5;
}

.background-appbanner { background-color: #b7d2fa }

.full-width{
    width: 100%;
}
.line-height-s
{
  line-height: var(--space-base); /* height must be larger than font-size! */
}
   

.minimize-multifile-upload .qq-upload-drop-area
{
  min-height: 0px;
  height: 0px;
}
.minimize-multifile-upload .qq-upload-button
{
  margin: 0px;
  float: unset;
  text-align: unset;
  padding-left: var(--space-base);
}

.minimize-multifile-upload .file-upload-dropzone
{
    padding: 0px;
}
.minimize-multifile-upload .qq-uploader
{
    width: auto;
}
 .grid-header{
     font-weight: bold;
 }
.test-section-header { color: var(--color-blue); 
  font-size: var(--font-size-h4);
  font-weight: var(--font-semi-bold);
}
.test-section-content input, 
.test-section-content textarea, 
.test-section-content select
{
  border: 1px solid black;
}
.test-section-content .button input
{
    border: var(--border-size-m) solid var(--color-secondary);
}
.negative-amount
{
    color: var(--color-custom-red);
}

.adhoc-match-settings {
    max-width: 478px;
}

.call-now {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space-xs);
}

.call-now .call-now__button {
  background-color: var(--color-green);
  border-radius: var(--border-radius-circle);
  color: var(--color-neutral-0);
  display: grid;
  height: calc(2 * var(--call-btn-size));
  place-content: center;
  width: calc(2 * var(--call-btn-size));
  --call-btn-size: 15px;
}

.call-now .call-now__button-disabled {
  background-color: var(--color-neutral-7);
  border-radius: var(--border-radius-circle);
  color: var(--color-neutral-0);
  display: grid;
  height: calc(2 * var(--call-btn-size));
  place-content: center;
  width: calc(2 * var(--call-btn-size));
  --call-btn-size: 15px;
}

.call-now .call-now__text {
  color: var(--color-success);
  font-size: var(--font-size-h5);
  font-weight: var(--font-semi-bold);
  text-transform: uppercase;
  white-space: nowrap;
}

.call-now .call-now__text-disabled {
  color: var(--color-neutral-7);
  font-size: var(--font-size-h5);
  font-weight: var(--font-semi-bold);
  text-transform: uppercase;
  white-space: nowrap;
}

.call-now:hover .call-now__button {
  background-color: var(--color-green-darker);
  color: var(--color-neutral-1);
}
.call-now:hover .call-now__text {
  color: var(--color-green-darkest);
}

.landing-page-portal-ctn {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.landing-page-portal-ctn-btn-holder {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-m);
}

.landing-page-footer {
    background-color: #131d2c;
    min-height: 50px;
    text-align: center;
}

/*Styles to fix modals sizing*/
.popup-scroll-y{
    max-height: 90vh;
    overflow-y: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.popup-scroll-y .modal-content{
    overflow-y: auto;
    overflow-x: hidden;
}
.popup-scroll-x{
    max-width: 100%;
    width: auto;
}
.popup-scroll-x .modal-content{
    overflow-x: auto;
}

.modal-wrapper .choices__list.choices__list--multiple{
    max-height: 270px;
    overflow-y: auto;
}