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

/*  DigitalUI - Design System Theme - Version 2.5.9                      */

/*  $0 - Fonts / Iconography                                             */
/*  $1 - Root - CSS Variables                                            */
/*  $2 - Styles                                                          */
/*       $2.1 - Styles - Typography                                      */
/*              $2.1.1 - Styles - Typography - Sizes Desktop             */
/*              $2.1.2 - Styles - Typography - Sizes Tablet              */
/*              $2.1.3 - Styles - Typography - Sizes Phone               */
/*              $2.1.4 - Styles - Typography - Transform                 */
/*              $2.1.5 - Styles - Typography - Weight                    */
/*       $2.2 - Styles - Colors                                          */
/*              $2.2.1 - Styles - Colors - Brand                         */
/*              $2.2.2 - Styles - Colors - Extendend                     */
/*              $2.2.3 - Styles - Colors - Neutral                       */
/*              $2.2.4 - Styles - Colors - Semantic                      */
/*       $2.3 - Styles - Space                                           */
/*              $2.3.1  - Styles - Space - Padding                       */
/*              $2.3.2  - Styles - Space - Padding Top                   */
/*              $2.3.3  - Styles - Space - Padding Right                 */
/*              $2.3.4  - Styles - Space - Padding Bottom                */
/*              $2.3.5  - Styles - Space - Padding Left                  */
/*              $2.3.6  - Styles - Space - Padding Vertical              */
/*              $2.3.7  - Styles - Space - Padding Horizontal            */
/*              $2.3.8  - Styles - Space - Margin                        */
/*              $2.3.9  - Styles - Space - Margin Top                    */
/*              $2.3.10 - Styles - Space - Margin Right                  */
/*              $2.3.11 - Styles - Space - Margin Bottom                 */
/*              $2.3.12 - Styles - Space - Margin Left                   */
/*              $2.3.13 - Styles - Space - Margin Vertical               */
/*              $2.3.14 - Styles - Space - Margin Horizontal             */
/*       $2.4 - Styles - Border Radius                                   */
/*       $2.5 - Styles - Border Size                                     */
/*       $2.6 - Styles - Elevation/Shadows                               */
/*       $2.7 - Styles - OS Font Icon                                    */
/*       $2.8 - Styles - Essentials                                      */
/*  $3 - HTML Elements                                                   */
/*  $4 - Page Layout                                                     */
/*  $5 - Patterns - OutSystemsUI                                         */
/*  $6 - Patterns - Digital SG                                           */
/*  $7 - Widgets & RichWidgets                                           */
/*  $8 - Custom                                                          */
/*  $9 - Grid                                                            */
/*  $10 - Magic Classes                                                  */
/*  $11 - Accessibility                                                  */
/*  $12 - Dark Mode                                                      */

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


/* ===================================================================== */
/*  $0 - Fonts                                                           */
/* ===================================================================== */

@font-face {  /* REGULAR */
    font-family: 'Cabin';
    src: url('https://www.outsystems.com/PartnersArea_Iframe/cabin-v14-latin-ext-latin-regular__MnFmZJEYYnOzu9u9lQVN5w.woff?MnFmZJEYYnOzu9u9lQVN5w') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face { /* SEMI-BOLD */
    font-family: 'Cabin';
    src: url('https://www.outsystems.com/PartnersArea_Iframe/cabin-v14-latin-ext-latin-600__kY8qEW4ZDaEXisBS1xQMg.woff?kY8q+EW4ZDaEXisBS1xQMg') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face { /* BOLD */
    font-family: 'Cabin';
    src: url('https://www.outsystems.com/PartnersArea_Iframe/cabin-v14-latin-ext-latin-700__RSWaaivgwI4LMaHGFJd3Cw.woff?RSWaaivgwI4LMaHGFJd3Cw') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face { /* REGULAR */
    font-family: 'NotoSans';
    src: url('https://www.outsystems.com/PartnersArea_Iframe/noto-sans-v9-latin-ext-latin-regular__O239uodDIbZezyn0O7qQ.woff?O239uodD++IbZezyn0O7qQ') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face { /* MEDIUM */
    font-family: 'NotoSans';
    src: url('https://www.outsystems.com/PartnersArea_Iframe/noto-sans-medium-500__dzKiVRBynMudW1rcvpxPgQ.woff2?dzKiVRBynMudW1rcvpxPgQ') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {  /* BOLD */
    font-family: 'NotoSans';
    src: url('https://www.outsystems.com/PartnersArea_Iframe/noto-sans-v9-latin-ext-latin-700__XdL6VDvIwQdSyuVe9z2Qjw.woff?XdL6VDvIwQdSyuVe9z2Qjw') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('https://www.outsystems.com/PartnersArea_Iframe/work-sans-variable-wght__ax3PZG0vsrWdprAP6wCoig.woff2?ax3PZG0vsrWdprAP6wCoig') format('woff2');
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
}

.font-notosans {
    font-family: 'NotoSans', Arial, Helvetica, sans-serif;
}

.font-cabin {
    font-family: 'Cabin', Arial, Helvetica, sans-serif;
}

.font-worksans {
    font-family: 'Work Sans', Arial, Helvetica, sans-serif;
}

/**** START OS ICON V2 FONT ****/
@font-face {
  font-family: 'osicons-v2';
  src:  url('https://www.outsystems.com/PartnersArea_Iframe/osicons-v2__orNAE485UCaJB5WEJ1UQ.woff?orNAE485UCaJB+5WE_J1UQ');
  font-weight: var(--tk-font-weight-s);
  font-style: normal;
  font-display: block;
}

[class*="osicons-v2"] {
    display: inline-block;
    font-family: osicons-v2 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: var(--tk-font-weight-s) !important;
    speak: none;
    text-transform: none;
    vertical-align: baseline;
}

/**** END OS ICON V2 FONT ****/

/* ===================================================================== */
/*  $1 - Root - CSS Variables                                            */
/* ===================================================================== */
:root {
    /* Typography - Family */
    --font-family-notosans: 'NotoSans', Arial, Helvetica, sans-serif;
    --font-family-cabin: 'Cabin', Arial, Helvetica, sans-serif;
    --font-family-worksans: 'Work Sans', Arial, Helvetica, sans-serif;

    /* Font Variables */
    --font-family-primary: var(--font-family-notosans);
    --font-family-secondary: var(--font-family-worksans);

    /* Typography - Size */
    --font-size-display: 3.75rem; /*60px*/
    
    --font-size-h1: 2.25rem; /*36px*/
    --font-size-h2: 2rem; /*32px*/
    --font-size-h3: 1.75rem; /*28px*/
    --font-size-h4: 1.625rem; /*26px*/
    --font-size-h5: 1.5rem; /*24px*/
    --font-size-h6: 1.375rem; /*22px*/
    --font-size-h7: 1.25rem; /*20px*/
    --font-size-h8: 1.125rem; /*18px*/
    --font-size-h9: 1rem; /*16px*/

    --font-size-base: 1rem; /*16px*/
    --font-size-xxl: 1.375rem; /*22px*/
    --font-size-xl: 1.25rem; /*20px*/
    --font-size-l: 1.125rem; /*18px*/
    --font-size-m: 1rem; /*16px*/
    --font-size-s: 0.875rem; /*14px*/
    --font-size-xs: 0.75rem; /*12px*/
    --font-size-xxs: 0.625rem; /*10px*/

    /* Typography - Weight */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
    
    /* Color - Brand */   
    --color-primary: var(--color-ruby);
    --color-secondary: var(--color-purple);
    
    --color-primary-hover: var(--color-ruby);

    /* Color - Extended */
    --color-transparent: transparent;
    
    --color-red-light: #f85e40;
    --color-red: #f22800;
    --color-red-dark: #db2400;
    --color-red-darker: #bb1f00;

    --color-ruby-light: #FB4563;
    --color-ruby: #FA173D;
    --color-ruby-dark: #DD1234;
    --color-ruby-darker: #C00E2C;
    
    --color-blue-lighter: #38bdff;
    --color-blue-light: #32a9e5;
    --color-blue: #0077b3;

    --color-green-light: #2DD267;
    --color-green: #00802D;
    --color-green-dark: #005F21;

    --color-turquoise: #37D5A5;
    --color-turquoise-dark: #008A61;

    --color-yellow-light: #fed06b;
    --color-yellow: #fdb515;
    --color-yellow-dark: #d99b11;

    --color-orange-light: #F7B8A1;
    --color-orange: #EE9B7C;
    --color-orange-dark: #E67E58;

    --color-purple: #5B28AE;

    /* Color - Black and White */
    --color-black: #0F0E0B;
    --color-white: #fff;

    /* Color - Neutral */
    --color-neutral-0: #F2F5F0;
    --color-neutral-1: #DEE0DB;
    --color-neutral-2: #C9CBC6;
    --color-neutral-3: #B4B6B1;
    --color-neutral-4: #A0A19D;
    --color-neutral-5: #8B8C88;
    --color-neutral-6: #767773;
    --color-neutral-7: #62625F;
    --color-neutral-8: #4D4D49;
    --color-neutral-9: #383835;
    --color-neutral-10: #242320;
    
    /* Color - Semantic */
    --color-info-lighter: #EBF1FF;
    --color-info-light: #C7DAFF;
    --color-info: #6699FF;
    
    --color-success-lighter: #EFFCE8;
    --color-success-light: #DBF9CD;
    --color-success: #67E727;
    --color-success-dark: #2C8500;
    
    --color-warning-lighter: #FFF6E5;
    --color-warning-light: #FFECC7;
    --color-warning: #FFAA00;
    
    --color-error-lighter: #FEEDEB;
    --color-error-light: #FECDC8;
    --color-error: #F9402F;

    --color-link-400: #37D5A5;
    --color-link-700: #008A61;

    --color-link: var(--color-link-700);
    
    /* Space - Sizes */
    --space-none: 0;
    --space-xxs: 0.125rem; /*2px*/
    --space-xs: 0.25rem; /*4px*/
    --space-s: 0.5rem; /*8px*/
    --space-base: 1rem; /*16px*/
    --space-m: 1.5rem; /*24px*/
    --space-l: 2rem; /*32px*/
    --space-xl: 2.5rem; /*40px*/
    --space-xxl: 3rem; /*48px*/
    --space-xxxl: 4.5rem; /*72px*/
    
    /* Space - Sizes EMs */
    --space-em-xxs: 0.125em; /*2px*/
    --space-em-xs: 0.25em; /*4px*/
    --space-em-s: 0.5em; /*8px*/
    --space-em-base: 1em; /*16px*/
    --space-em-m: 1.5em; /*24px*/
    --space-em-l: 2em; /*32px*/
    --space-em-xl: 2.5em; /*40px*/
    --space-em-xxl: 3em; /*48px*/
    --space-em-xxxl: 4.5rem; /*72px*/
    
    /* Border Radius */
    --border-radius-none: 0;
    --border-radius-soft-rounded: 3px;
    --border-radius-mid-rounded: 6px;
    --border-radius-hard-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-s: 0 3px 8px 0 rgba(10,20,30,0.1);
    --shadow-m: 0 5px 10px 0 rgba(10,20,30,0.1);
    --shadow-l: 0 7px 15px 0 rgba(10,20,30,0.1);

    /* App Settings */
    --color-background-body: #fff;
    --header-phone-size: 60px;
    --header-tablet-size: 60px;
    --header-size: 106px;
    --side-menu-size: 300px;
    
    /* Opacity */
    --opacity-s: 0.7;
    --opacity-m: 0.5;
    --opacity-l: 0.3;

    /* OS Font Icons */
    --osicons-arrow-link: "\e915";
    --osicons-arrow-link-thin: "\e921";
    --osicons-link-out: "\e920";
    --osicons-play: "\e918";
    --osicons-search: "\e908";
    --osicons-close: "\e92b";
    --osicons-plus: "\e916";
    --osicons-minus: "\e917";
    --osicons-select: "\e90a";
    --osicons-filter: "\e910";
    --osicons-arrow-down : "\e907";
    --osicons-arrow-up : "\e90d";
    --osicons-arrow-right : "\e90f";
    --osicons-arrow-left : "\e90e";
    --osicons-hamburguer : "\e90b";
    --osicons-tag : "\e905";
    --osicons-globe : "\e91a";
    --osicons-reload : "\e911";
    --osicons-email : "\e904";
    --osicons-sitemap : "\e926";
    --osicons-double-arrow-down : "\e923";
    --osicons-double-arrow-up : "\e922";
    --osicons-double-arrow-right : "\e925";
    --osicons-double-arrow-left : "\e924";
    --osicons-share : "\e903";
    --osicons-facebook : "\e900";
    --osicons-twitter : "\e902";
    --osicons-linkedin : "\e901";
    --osicons-hot : "\e919";
    --osicons-replay : "\e933";
    --osicons-rss : "\e909";
    --osicons-info : "\e90c";
    --osicons-warning : "\e935";
    --osicons-validated : "\e912";
    --osicons-pause : "\e914";
    --osicons-users : "\e928";
    --osicons-location : "\e91e";
    --osicons-stack : "\e927";
    --osicons-desktop : "\e913";
    --osicons-mobile : "\e91f";
    --osicons-responsive : "\e942";
    --osicons-calendar : "\e91b";
    --osicons-clock : "\e91c";
    --osicons-dragdrop : "\e91d";
    --osicons-draggable : "\e92e";
    --osicons-edit : "\e92f";
    --osicons-cancel : "\e906";
    --osicons-delete : "\e92c";
    --osicons-error : "\e930";
    --osicons-camera : "\e92a";
    --osicons-options : "\e932";
    --osicons-download : "\e92d";
    --osicons-bulb : "\e929";
    --osicons-logout : "\e931";
    --osicons-sort : "\e934";
    --osicons-switch : "\e940";
    --osicons-upload : "\e93b";
    --osicons-file : "\e943";
    --osicons-business : "\e936";
    --osicons-star-empty : "\e937";
    --osicons-star-half : "\e939";
    --osicons-star-full : "\e938";
    --osicons-thumbs-up-empty : "\e93d";
    --osicons-thumbs-down-empty : "\e93f";
    --osicons-thumbs-up-full : "\e93c";
    --osicons-thumbs-down-full : "\e93e";
    --osicons-dot-empty : "\e946";
    --osicons-dot-full : "\e945";
    --osicons-support : "\e941";
    --osicons-flag : "\e93a";
    --osicons-email-open : "\e944";
    --osicons-message : "\e947";
    --osicons-attachment : "\e955";
    --osicons-story : "\e954";
    --osicons-blog-post : "\e953";
    --osicons-video-testimonial : "\e952";
    --osicons-presentation : "\e951";
    --osicons-webinar : "\e950";
    --osicons-news : "\e94f";
    --osicons-press-release : "\e94e";
    --osicons-pin-empty : "\e94d";
    --osicons-pin-full : "\e94c";
    --osicons-visible : "\e94b";
    --osicons-hidden : "\e94a";
    --osicons-edit-disable : "\e949";
    --osicons-user : "\e948";
    --osicons-deck : "\e956";
    --osicons-folder : "\e95e";
    --osicons-link : "\e95d";
    --osicons-arrow-thread : "\e95c";
    --osicons-arrow-link-left : "\e95b";
    --osicons-arrow-link-up : "\e95a";
    --osicons-arrow-link-down : "\e959";
    --osicons-arrow-expand : "\e958";
    --osicons-arrow-collapse : "\e957";
    --osicons-settings : "\e960";
    --osicons-phone : "\e95f";
    --osicons-zoom-in : "\e964";
    --osicons-zoom-out : "\e965";
    --osicons-alert-empty : "\e962";
    --osicons-alert-full : "\e963";
    --osicons-alert-disabled : "\e961";
    --osicons-dark-mode : "\e966";
    --osicons-homepage : "\e967";
    --osicons-add-contact : "\e968";
    --osicons-youtube : "\e96a";
    --osicons-instagram : "\e969";
    --osicons-awards : "\e96b";
    --osicons-login : "\e96d";
    --osicons-video-camera-full : "\e976";
    --osicons-video-camera-empty : "\e975";
    --osicons-vacations : "\e974";
    --osicons-user-account : "\e973";
    --osicons-lock : "\e96c";
    --osicons-unlock : "\e972";
    --osicons-list-view : "\e980";
    --osicons-key : "\e97f";
    --osicons-gallery-view : "\e97d";
    --osicons-funnel : "\e97c";
    --osicons-copy : "\e97a";
    --osicons-arrow-end-left : "\e978";
    --osicons-arrow-end-right : "\e979";
    --osicons-chart: "\e970";
    --osicons-bookmark-full: "\e96f";
    --osicons-bookmark-empty: "\e96e";
    --osicons-mentorship: "\e971";
    --osicons-youtube-round: "\e977";
    --osicons-twitter-round: "\e97b";
    --osicons-threads: "\e97e";
    --osicons-threads-round: "\e981";
    --osicons-linkedin-round: "\e982";
    --osicons-instagram-round: "\e983";
    --osicons-facebook-round: "\e984";
    --osicons-sort-ascending: "\e985";
    --osicons-unlink: "\e986";
    --osicons-ai: "\e988";
    --osicons-forge: "\e987";
    --osicons-odc: "\e98b";
    --osicons-o11: "\e98a";
    --osicons-agentic-ai: "\e989";
    
    /*  Grid Vars */
    --container-grid: 1140px;
    --container-grid-tablet: 960px;
    --padding-grid: 15px;
}

/* ================================================================ */
/*  $2 - Styles                                                     */
/* ================================================================ */

html {
    overflow-y: auto;
}

#reactContainer {
    height: auto;
}

.screen-container  {
    display: block;
    height: auto;
    overflow: initial;
}

.layout .main {
    flex: 1;
}

.layout .main:not(.header-2022) {
     padding-top: 90px;
}

.layout .main.header-2022 {
    padding-top: var(--header-size);
}

.phone .layout .main {
    padding-top: var(--header-phone-size);
}

.tablet .layout .main {
    padding-top: var(--header-tablet-size);
}

[class*="fade-"] .layout {
    background-color: var(--color-background-body); /* fix transition modules */
}

/* ================================================================ */
/*  $2.7 - Styles - OS Font Icon                                    */
/* ================================================================ */

.osicons-v2-fb-brand:before,
.osicons-v2-fb:before,
.osicons-v2-facebook:before             {content: var(--osicons-facebook);}
.osicons-v2-in-brand:before,
.osicons-v2-in:before,
.osicons-v2-linkedin:before             {content: var(--osicons-linkedin);}
.osicons-v2-tw-brand:before,
.osicons-v2-tw:before,
.osicons-v2-twitter:before              {content:var(--osicons-twitter);}
.osicons-v2-share:before                {content: var(--osicons-share);}
.osicons-v2-email:before                {content: var(--osicons-email);}
.osicons-v2-tag:before                  {content: var(--osicons-tag);}
.osicons-v2-cancel:before               {content: var(--osicons-cancel);}
.osicons-v2-chevron-down:before,
.osicons-v2-arrow-down:before           {content: var(--osicons-arrow-down);}
.osicons-v2-search:before               {content: var(--osicons-search);}
.osicons-v2-valid:before,
.osicons-v2-select:before               {content: var(--osicons-select);}
.osicons-v2-hamburguer:before           {content: var(--osicons-hamburguer);}
.osicons-v2-chevron-up:before,
.osicons-v2-arrow-up:before             {content: var(--osicons-arrow-up);}
.osicons-v2-chevron-left:before,
.osicons-v2-arrow-left:before           {content: var(--osicons-arrow-left);}
.osicons-v2-chevron-right:before,
.osicons-v2-arrow-right:before          {content: var(--osicons-arrow-right);}
.osicons-v2-loader:before,
.osicons-v2-reload:before               {content: var(--osicons-reload);}
.osicons-v2-arrow-link:before           {content: var(--osicons-arrow-link);}
.osicons-v2-add:before,
.osicons-v2-plus:before                 {content: var(--osicons-plus);}
.osicons-v2-dash:before,
.osicons-v2-minus:before                {content: var(--osicons-minus);}
.osicons-v2-play:before                 {content: var(--osicons-play);}
.osicons-v2-spicy:before,
.osicons-v2-hot:before                  {content: var(--osicons-hot);}
.osicons-v2-lang:before,
.osicons-v2-globe:before                {content: var(--osicons-globe);}
.osicons-v2-link-out:before             {content: var(--osicons-link-out);}
.osicons-v2-filter:before               {content: var(--osicons-filter);}
.osicons-v2-link-in-card:before,
.osicons-v2-arrow-link-thin:before      {content: var(--osicons-arrow-link-thin);}
.osicons-v2-double-arrow-up:before      {content: var(--osicons-double-arrow-up);}
.osicons-v2-double-arrow-down:before    {content: var(--osicons-double-arrow-down);}
.osicons-v2-double-arrow-left:before    {content: var(--osicons-double-arrow-left);}
.osicons-v2-double-arrow-right:before   {content: var(--osicons-double-arrow-right);}
.osicons-v2-sitemap:before              {content: var(--osicons-sitemap);}
.osicons-v2-rss:before                  {content: var(--osicons-rss);}
.osicons-v2-info:before                 {content: var(--osicons-info);}
.osicons-v2-validated:before            {content: var(--osicons-validated);}
.osicons-v2-layers:before,
.osicons-v2-stack:before                {content: var(--osicons-stack);}
.osicons-v2-pause:before                {content: var(--osicons-pause);}
.osicons-v2-calendar:before             {content: var(--osicons-calendar);}
.osicons-v2-clock:before                {content: var(--osicons-clock);}
.osicons-v2-desktop:before              {content: var(--osicons-desktop);}
.osicons-v2-mobile:before               {content: var(--osicons-mobile);}
.osicons-v2-location:before             {content: var(--osicons-location);}
.osicons-v2-users:before                {content: var(--osicons-users);}
.osicons-v2-dragdrop:before             {content: var(--osicons-dragdrop);}
.osicons-v2-bulb:before                 {content: var(--osicons-bulb);}
.osicons-v2-camera:before               {content: var(--osicons-camera);}
.osicons-v2-close:before                {content: var(--osicons-close);}
.osicons-v2-delete:before               {content: var(--osicons-delete);}
.osicons-v2-download:before             {content: var(--osicons-download);}
.osicons-v2-draggable:before            {content: var(--osicons-draggable);}
.osicons-v2-edit:before                 {content: var(--osicons-edit);}
.osicons-v2-error:before                {content: var(--osicons-error);}
.osicons-v2-logout:before               {content: var(--osicons-logout);}
.osicons-v2-options:before              {content: var(--osicons-options);}
.osicons-v2-replay:before               {content: var(--osicons-replay);}
.osicons-v2-sort:before                 {content: var(--osicons-sort);}
.osicons-v2-warning:before              {content: var(--osicons-warning);}
.osicons-v2-star-full:before            {content: var(--osicons-star-full);}
.osicons-v2-star-empty:before           {content: var(--osicons-star-empty);}
.osicons-v2-star-half:before            {content: var(--osicons-star-half);}
.osicons-v2-business:before             {content: var(--osicons-business);}
.osicons-v2-flag:before                 {content: var(--osicons-flag);}
.osicons-v2-upload:before               {content: var(--osicons-upload);}
.osicons-v2-thumbs-up-full:before       {content: var(--osicons-thumbs-up-full);}
.osicons-v2-thumbs-up-empty:before      {content: var(--osicons-thumbs-up-empty);}
.osicons-v2-thumbs-down-full:before     {content: var(--osicons-thumbs-down-full);}
.osicons-v2-thumbs-down-empty:before    {content: var(--osicons-thumbs-down-empty);}
.osicons-v2-switch:before               {content: var(--osicons-switch);}
.osicons-v2-support:before              {content: var(--osicons-support);}
.osicons-v2-responsive:before           {content: var(--osicons-responsive);}
.osicons-v2-file:before                 {content: var(--osicons-file);}
.osicons-v2-email-open:before           {content: var(--osicons-email-open);}
.osicons-v2-dot-full:before             {content: var(--osicons-dot-full);}
.osicons-v2-dot-empty:before            {content: var(--osicons-dot-empty);}
.osicons-v2-message:before              {content: var(--osicons-message);}
.osicons-v2-attachment:before           {content: var(--osicons-attachment);} 
.osicons-v2-story:before                {content: var(--osicons-story);} 
.osicons-v2-blog-post:before            {content: var(--osicons-blog-post);} 
.osicons-v2-video-testimonial:before    {content: var(--osicons-video-testimonial);} 
.osicons-v2-presentation:before         {content: var(--osicons-presentation);} 
.osicons-v2-webinar:before              {content: var(--osicons-webinar);} 
.osicons-v2-news:before                 {content: var(--osicons-news);} 
.osicons-v2-press-release:before        {content: var(--osicons-press-release);} 
.osicons-v2-pin-empty:before            {content: var(--osicons-pin-empty);} 
.osicons-v2-pin-full:before             {content: var(--osicons-pin-full);} 
.osicons-v2-visible:before              {content: var(--osicons-visible);} 
.osicons-v2-hidden:before               {content: var(--osicons-hidden);} 
.osicons-v2-edit-disable:before         {content: var(--osicons-edit-disable);} 
.osicons-v2-user:before                 {content: var(--osicons-user);} 
.osicons-v2-deck:before                 {content: var(--osicons-deck);}
.osicons-v2-folder:before               {content: var(--osicons-folder);} 
.osicons-v2-link:before                 {content: var(--osicons-link);} 
.osicons-v2-arrow-thread:before         {content: var(--osicons-arrow-thread);} 
.osicons-v2-arrow-link-left:before      {content: var(--osicons-arrow-link-left);} 
.osicons-v2-arrow-link-up:before        {content: var(--osicons-arrow-link-up);} 
.osicons-v2-arrow-link-down:before      {content: var(--osicons-arrow-link-down);} 
.osicons-v2-arrow-expand:before         {content: var(--osicons-arrow-expand);} 
.osicons-v2-arrow-collapse:before       {content: var(--osicons-arrow-collapse);} 
.osicons-v2-settings:before             {content: var(--osicons-settings);} 
.osicons-v2-phone:before                {content: var(--osicons-phone);} 
.osicons-v2-alert-disabled:before       {content: var(--osicons-alert-disabled);}
.osicons-v2-alert-empty:before          {content: var(--osicons-alert-empty);}
.osicons-v2-alert-full:before           {content: var(--osicons-alert-full);}
.osicons-v2-zoom-in:before              {content: var(--osicons-zoom-in);}
.osicons-v2-zoom-out:before             {content: var(--osicons-zoom-out);}
.osicons-v2-dark-mode:before            {content: var(--osicons-dark-mode);}
.osicons-v2-homepage:before             {content: var(--osicons-homepage);}
.osicons-v2-add-contact:before          {content: var(--osicons-add-contact);}
.osicons-v2-youtube:before              {content: var(--osicons-youtube);}
.osicons-v2-instagram:before            {content: var(--osicons-instagram);}
.osicons-v2-awards:before               {content: var(--osicons-awards);}
.osicons-v2-login:before                { content: var(--osicons-login); }
.osicons-v2-video-camera-full:before    { content: var(--osicons-video-camera-full); }
.osicons-v2-video-camera-empty:before   { content: var(--osicons-video-camera-empty); }
.osicons-v2-vacations:before            { content: var(--osicons-vacations); }
.osicons-v2-user-account:before         { content: var(--osicons-user-account); }
.osicons-v2-lock:before                 { content: var(--osicons-lock); }
.osicons-v2-unlock:before               { content: var(--osicons-unlock); }
.osicons-v2-list-view:before            { content: var(--osicons-list-view); }
.osicons-v2-key:before                  { content: var(--osicons-key); }
.osicons-v2-gallery-view:before         { content: var(--osicons-gallery-view); }
.osicons-v2-funnel:before               { content: var(--osicons-funnel); }
.osicons-v2-copy:before                 { content: var(--osicons-copy); }
.osicons-v2-arrow-end-left:before       { content: var(--osicons-arrow-end-left); }
.osicons-v2-arrow-end-right:before      { content: var(--osicons-arrow-end-right); }
.osicons-v2-chart:before                { content: var(--osicons-chart); }
.osicons-v2-bookmark-full:before        { content: var(--osicons-bookmark-full); }
.osicons-v2-bookmark-empty:before       { content: var(--osicons-bookmark-empty); }
.osicons-v2-mentorship:before           {content: var(--osicons-mentorship);}
.osicons-v2-youtube-round:before        {content: var(--osicons-youtube-round);}
.osicons-v2-twitter-round:before        {content: var(--osicons-twitter-round);}
.osicons-v2-threads:before              {content: var(--osicons-threads);}
.osicons-v2-threads-round:before        {content: var(--osicons-threads-round);}
.osicons-v2-linkedin-round:before       {content: var(--osicons-linkedin-round);}
.osicons-v2-instagram-round:before      {content: var(--osicons-instagram-round);}
.osicons-v2-facebook-round:before       {content: var(--osicons-facebook-round);}
.osicons-v2-sort-ascending:before       {content: var(--osicons-sort-ascending);}
.osicons-v2-unlink:before               {content: var(--osicons-unlink);}
.osicons-v2-ai:before                   {content: var(--osicons-ai);}
.osicons-v2-forge:before               {content: var(--osicons-forge);}
.osicons-v2-odc:before                  {content: var(--osicons-odc);}
.osicons-v2-o11:before                  {content: var(--osicons-o11);}
.osicons-v2-agentic-ai:before           {content: var(--osicons-agentic-ai);}

/* ===================================================================== */
/*  $2.8 - Styles - Design Tokens                                        */
/* ===================================================================== */

:root {
    --tk-transition-time: 300ms;
    --tk-transition-base: all var(--tk-transition-time) ease-in-out;
    --tk-transition-fade: opacity var(--tk-transition-time) ease-in-out;
    
    /* Font Weight */
    --tk-font-weight-s: 500;
    --tk-font-weight-base: 500;
    --tk-font-weight-l: 700;

    /* Components */
    --tk-content-title-color: var(--color-neutral-9);
    --tk-content-text-color: var(--color-neutral-5);

    --tk-component-padding: var(--space-m);
    --tk-component-padding-x: var(--space-m);
    --tk-component-padding-y: var(--space-m);

    --tk-component-padding-s: var(--space-base);
    --tk-component-padding-x-s: var(--space-base);
    --tk-component-padding-y-s: var(--space-base);

    --tk-component-border-radius-100: 0; /* old 3px */
    --tk-component-border-radius-200: 0; /* old 4px or UP */

    /* Form Elements (inputs and dropdowns) */
    --tk-input-padding: var(--space-base);
    --tk-input-border: var(--border-size-m) solid var(--color-neutral-4);
    --tk-input-border-width: var(--border-size-m);

    --tk-element-height: var(--space-xl);

    --tk-element-height-100: calc(var(--tk-element-height) * 0.8);
    --tk-element-height-200: calc(var(--tk-element-height) * 1);
    --tk-element-height-300: calc(var(--tk-element-height) * 1.2); /* ????? */
    --tk-element-height-400: calc(var(--tk-element-height) * 1.6);

    /* Buttons */
    --tk-btn-display-after: block;

    --tk-btn-padding-base: var(--space-base);
    --tk-btn-padding-base-x: var(--tk-button-padding-base);
    --tk-btn-padding-base-y: var(--space-none);

    --tk-font-weight-btn: 700;

    --tk-btn-disabled-border-width: 0;

    --tk-btn-disabled-white: transparent;
    --tk-btn-disabled-neutral-2: transparent;
    --tk-btn-disabled-neutral-4: transparent;
    --tk-btn-disabled-neutral-6: transparent;

    --tk-btn-disabled-color-2: var(--color-neutral-2);
    --tk-btn-disabled-color-4: var(--color-neutral-4);
    --tk-btn-disabled-color-6: var(--color-neutral-6);
    --tk-btn-disabled-color-10: var(--color-neutral-10);
    --tk-btn-af-disabled-color-2: var(--color-neutral-2);
    --tk-btn-af-disabled-color-4: var(--color-neutral-4);
    --tk-btn-af-disabled-color-6: var(--color-neutral-6);
    --tk-btn-af-disabled-color-10: var(--color-neutral-10);

    --tk-btn-hover-transition: scale(1.035);
    
    --tk-btn-border: 0;
    --tk-btn-af-border: var(--border-size-m) solid var(--color-neutral-6);
    --tk-btn-border-radius: 50px;

    --tk-btn-height-s: var(--tk-element-height-100);
    --tk-btn-height-m: var(--tk-element-height-200);
    --tk-btn-height-l: var(--tk-element-height-300);
    --tk-btn-height-xl: var(--tk-element-height-400);


    /* Btn Default (same as secondary)  */
    --tk-btn-color-default: var(--color-neutral-8);
    --tk-btn-color-default-hover: var(--color-neutral-8);
    --tk-btn-bg-default: transparent;
    --tk-btn-bg-default-hover: transparent;
    --tk-btn-border-color-default: transparent;
    --tk-btn-border-color-default-hover: transparent;
    --tk-btn-af-bg-default: transparent;
    --tk-btn-af-bg-default-hover: transparent;
    --tk-btn-af-border-color-default: var(--color-black);
    --tk-btn-af-border-color-default-hover: var(--color-black);

    /* Btn Primary */
    --tk-btn-color-primary: var(--color-white);
    --tk-btn-color-primary-hover: var(--color-neutral-0);
    --tk-btn-bg-primary: var(--color-primary);
    --tk-btn-bg-primary-hover: var(--color-white);
    --tk-btn-border-color-primary: var(--tk-btn-bg-primary);
    --tk-btn-border-color-primary-hover: var(--tk-btn-bg-primary-hover);
    --tk-btn-af-bg-primary: var(--color-primary);
    --tk-btn-af-bg-primary-hover: var(--color-primary);
    --tk-btn-af-border-color-primary: var(--color-black);
    --tk-btn-af-border-color-primary-hover: var(--color-black);

    /* Btn Primary Inverted */
    --tk-btn-color-primary-inv: var(--color-black);
    --tk-btn-color-primary-inv-hover: var(--color-primary-hover);
    --tk-btn-bg-primary-inv: transparent;
    --tk-btn-bg-primary-inv-hover: transparent;
    --tk-btn-border-color-primary-inv: var(--color-primary);
    --tk-btn-border-color-primary-inv-hover: var(--color-primary);
    --tk-btn-af-bg-primary-inv: transparent;
    --tk-btn-af-bg-primary-inv-hover: transparent;
    --tk-btn-af-border-color-primary-inv: var(--color-primary);
    --tk-btn-af-border-color-primary-inv-hover: var(--color-primary);

    /* Btn Secondary */
    --tk-btn-color-secondary: var(--color-neutral-7);
    --tk-btn-color-secondary-hover: var(--color-neutral-7);
    --tk-btn-bg-secondary: transparent;
    --tk-btn-bg-secondary-hover: transparent;
    --tk-btn-border-color-secondary: transparent;
    --tk-btn-border-color-secondary-hover: transparent;
    --tk-btn-af-bg-secondary: transparent;
    --tk-btn-af-bg-secondary-hover: transparent;
    --tk-btn-af-border-color-secondary: var(--color-neutral-7);
    --tk-btn-af-border-color-secondary-hover: var(--color-neutral-7);

    /* Btn Secondary Inverted */
    --tk-btn-color-secondary-inv: var(--color-neutral-6);
    --tk-btn-color-secondary-inv-hover: var(--color-neutral-8);
    --tk-btn-bg-secondary-inv: transparent;
    --tk-btn-bg-secondary-inv-hover: transparent;
    --tk-btn-border-color-secondary-inv: transparent;
    --tk-btn-border-color-secondary-inv-hover: transparent;
    --tk-btn-af-bg-secondary-inv: transparent;
    --tk-btn-af-bg-secondary-inv-hover: var(--color-neutral-1);
    --tk-btn-af-border-color-secondary-inv: transparent;
    --tk-btn-af-border-color-secondary-inv-hover: var(--color-neutral-1);

    /* Btn Dark */
    --tk-btn-color-dark: var(--color-white);
    --tk-btn-color-dark-hover: var(--color-white);
    --tk-btn-bg-dark: transparent;
    --tk-btn-bg-dark-hover: transparent;
    --tk-btn-border-color-dark: transparent;
    --tk-btn-border-color-dark-hover: transparent;
    --tk-btn-af-bg-dark: var(--color-black);
    --tk-btn-af-bg-dark-hover: var(--color-black);
    --tk-btn-af-border-color-dark: var(--color-black);
    --tk-btn-af-border-color-dark-hover: var(--color-black);

    /* Btn Dark Inverted */
    --tk-btn-color-dark-inv: var(--color-black);
    --tk-btn-color-dark-inv-hover: var(--color-black);
    --tk-btn-bg-dark-inv: transparent;
    --tk-btn-bg-dark-inv-hover: transparent;
    --tk-btn-border-color-dark-inv: transparent;
    --tk-btn-border-color-dark-inv-hover: transparent;
    --tk-btn-af-bg-dark-inv: transparent;
    --tk-btn-af-bg-dark-inv-hover: transparent;
    --tk-btn-af-border-color-dark-inv: var(--color-black);
    --tk-btn-af-border-color-dark-inv-hover: var(--color-black);

    /* Btn Light */
    --tk-btn-color-light: var(--color-black);
    --tk-btn-color-light-hover: var(--color-black);
    --tk-btn-bg-light: transparent;
    --tk-btn-bg-light-hover: transparent;
    --tk-btn-border-color-light: transparent;
    --tk-btn-border-color-light-hover: transparent;
    --tk-btn-af-bg-light: var(--color-white);
    --tk-btn-af-bg-light-hover: var(--color-white);
    --tk-btn-af-border-color-light: var(--color-white);
    --tk-btn-af-border-color-light-hover: var(--color-white);

    /* Btn Light Inverted */
    --tk-btn-color-light-inv: var(--color-white);
    --tk-btn-color-light-inv-hover: var(--color-white);
    --tk-btn-bg-light-inv: transparent;
    --tk-btn-bg-light-inv-hover: transparent;
    --tk-btn-border-color-light-inv: transparent;
    --tk-btn-border-color-light-inv-hover: transparent;
    --tk-btn-af-bg-light-inv: transparent;
    --tk-btn-af-bg-light-inv-hover: transparent;
    --tk-btn-af-border-color-light-inv: var(--color-white);
    --tk-btn-af-border-color-light-inv-hover: var(--color-white);

    /* Btn Confirm */
    --tk-btn-color-confirm: var(--color-white);
    --tk-btn-color-confirm-hover: var(--color-neutral-0);
    --tk-btn-bg-confirm: transparent;
    --tk-btn-bg-confirm-hover: transparent;
    --tk-btn-border-color-confirm: transparent;
    --tk-btn-border-color-confirm-hover: transparent;
    --tk-btn-af-bg-confirm: var(--color-green);
    --tk-btn-af-bg-confirm-hover: var(--color-green);
    --tk-btn-af-border-color-confirm: var(--color-black);
    --tk-btn-af-border-color-confirm-hover: var(--color-black);

    /* Btn Utility */
    --tk-btn-color-utility: var(--color-white);
    --tk-btn-color-utility-hover: var(--color-white);
    --tk-btn-bg-utility: transparent;
    --tk-btn-bg-utility-hover: transparent;
    --tk-btn-border-color-utility: transparent;
    --tk-btn-border-color-utility-hover: transparent;
    --tk-btn-af-bg-utility: var(--color-blue-light);
    --tk-btn-af-bg-utility-hover: var(--color-blue-light);
    --tk-btn-af-border-color-utility: var(--color-black);
    --tk-btn-af-border-color-utility-hover: var(--color-black);

    /* Btn Error */
    --tk-btn-color-error: var(--color-white);
    --tk-btn-color-error-hover: var(--color-white);
    --tk-btn-bg-error: transparent;
    --tk-btn-bg-error-hover: transparent;
    --tk-btn-border-color-error: transparent;
    --tk-btn-border-color-error-hover: transparent;
    --tk-btn-af-bg-error: var(--color-red);
    --tk-btn-af-bg-error-hover: var(--color-red);
    --tk-btn-af-border-color-error: var(--color-black);
    --tk-btn-af-border-color-error-hover: var(--color-black);


/* REMOVE - START - DIEGO */
    /* Table */
    --tk-table-header-bg-color: var(--color-neutral-1);
    --tk-table-header-color: var(--color-neutral-8);

    /* REMOVE - END - DIEGO */


    /* Dropdown */
    --dropdown-padding-right: calc(var(--tk-component-padding-y-s) + var(--font-size-base) + (var(--font-size-base) / 2));
}

/* ===================================================================== */
/*  $3 - HTML Elements                                                   */
/* ===================================================================== */
body {
    background-color: var(--color-background-body);
    color: var(--color-neutral-8);
    font-family: var(--font-family-primary);
    font-weight: var(--tk-font-weight-s);
    font-size: 16px;
    margin: 0;
}

a,
a:visited {
    color: var(--color-link);
    text-decoration: none;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 0.15em;
}

a:hover,
a:visited:hover {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 0.15em;
}

a:focus {
    color: var(--color-link);
    text-decoration: none;
}

.text-underline {text-decoration: underline;}
.text-underline-none {text-decoration: none;}

.btn-link-container {
    align-items: baseline;
    display: flex; 
}

/* Button Default */
[class*="os-btn"],
[class*="os-btn"]:visited,
.btn,
.btn:visited {
    align-items: center;
    background-color: var(--tk-btn-bg-default);
    border: var(--tk-btn-border);
    border-color: var(--tk-btn-border-color-default);
    border-radius: var(--tk-btn-border-radius);
    color: var(--tk-btn-color-default);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-family-notosans);
    font-size: var(--font-size-base);
    font-weight: var(--tk-font-weight-btn);
    height: var(--tk-btn-height-m);
    justify-content: center;
    padding: var(--space-none) var(--tk-btn-padding-base);
    position: relative;
    text-decoration: none;
    transition: all 200ms ease;
    user-select: none;
    white-space: nowrap;
    z-index: 0;
}

[class*="os-btn"]:after,
[class*="os-btn"]:visited:after,
.btn:after,
.btn:visited:after {
    background-color: var(--tk-btn-af-bg-default);
    border: var(--tk-btn-af-border);
    border-color: var(--tk-btn-af-border-color-default);
    border-radius: var(--tk-btn-border-radius);
    box-sizing: border-box;
    content: "";
    display: var(--tk-btn-display-after);
    height: 100%;
    position: absolute;
    transition: all ease-out 0.128s;
    width: 100%;;
    z-index: -1;
}

[class*="os-btn"]:hover,
.btn:hover {
    background-color: var(--tk-btn-bg-default-hover);
    border-color: var(--tk-btn-border-color-default);
    color: var(--tk-btn-color-default-hover);
    text-decoration: none;
}

[class*="os-btn"]:hover:after,
.btn:hover:after {
    background-color: var(--tk-btn-af-bg-default-hover);
    border-color: var(--tk-btn-af-border-color-default);
    text-decoration: none;
    transform: var(--tk-btn-hover-transition);
}

a[class*="os-btn"]:focus,
a.btn:focus {
    text-decoration: none; /* UI overwrite */
}

[class*="os-btn-"]:focus,
[class*="os-btn-"]:focus-visible,
[class*="os-btn-"].disabled:focus-visible:after,
[class*="os-btn-"][disabled]:focus-visible:after {
    outline: none;
}

@supports selector(:focus-visible) {
    [class*="os-btn-"]:focus:before,
    [class*="os-btn"].disabled:focus-visible:before,
    [class*="os-btn"][disabled]:focus-visible:before {
        content: none;
    }

    [class*="os-btn-"]:focus-visible:before {
        border: 2px dashed var(--color-turquoise-dark);
        border-radius: 2rem;
        content: '';
        height: calc(100% + 4px);
        left: -4px;
        position: absolute;
        top: -4px;
        transition: all ease-out 0.128s;
        transition-timing-function: ease;
        width: calc(100% + 4px);
    }

    .os-btn-light:focus-visible:before,
    .os-btn-light btn-inverted:focus-visible:before {
        border-color: var(--color-turquoise);
    }

    [class*="os-btn-"]:hover:focus-visible:before {
        transform: scale(1.035);
    }
}

[class*="os-btn"].disabled,
[class*="os-btn"][disabled],
.btn.disabled,
.btn[disabled] {
    border: var(--tk-btn-disabled-border-width) solid var(--tk-btn-disabled-neutral-2);
    color: rgba(0,0,0, 0.48);
    cursor: default;
}

[class*="os-btn"].disabled:after,
[class*="os-btn"][disabled]:after,
.btn.disabled:after,
.btn[disabled]:after {
    border: var(--border-size-m) solid rgba(0,0,0, 0.48);
    border-color: rgba(0,0,0, 0.48);
}

[class*="os-btn"].disabled:hover:after,
[class*="os-btn"][disabled]:hover:after,
.btn.disabled:hover:after,
.btn[disabled]:hover:after {
    transform: scale(1);
}

/* Button Small */
[class*="os-btn"].btn-s,
[class*="os-btn"].btn-s:visited,
[class*="os-btn"].btn-small,
[class*="os-btn"].btn-small:visited {
    font-size: var(--font-size-s);
    height: var(--tk-btn-height-s);
    line-height: 20px;
    padding: 0 0.75rem;
}

/* Button Large */
[class*="os-btn"].btn-l,
[class*="os-btn"].btn-l:visited,
[class*="os-btn"].btn-big,
[class*="os-btn"].btn-big:visited  {
    font-size: var(--font-size-l);
    height: var(--tk-btn-height-l);
    padding: 0 1.25rem;
}

/* Button Extra Large */
[class*="os-btn"].btn-xl,
[class*="os-btn"].btn-xl:visited {
    font-size: var(--font-size-h3);
    height: var(--tk-btn-height-xl);
    padding: 0 var(--space-m);
}

/* Button Primary */
.os-btn-primary,
.os-btn-primary:visited,
a.os-btn-primary,
a.os-btn-primary:visited,
.btn-primary,
.btn-primary:visited {
    background-color: var(--tk-btn-bg-primary);
    border-color: var(--tk-btn-border-color-primary);
    color: var(--tk-btn-color-primary);
}

.os-btn-primary:after,
.os-btn-primary:visited:after,
a.os-btn-primary:after,
a.os-btn-primary:visited:after,
.btn-primary:after,
.btn-primary:visited:after {
    background-color: var(--tk-btn-af-bg-primary);
    border-color: var(--tk-btn-af-border-color-primary);
}

.os-btn-primary:hover,
a.os-btn-primary:hover,
.btn-primary:hover,
a.btn-primary:hover {
    background-color: var(--tk-btn-bg-primary-hover);
    border-color: var(--tk-btn-border-color-primary-hover);
    color: var(--tk-btn-color-primary-hover);
}

.os-btn-primary:hover:after,
a.os-btn-primary:hover:after,
.btn-primary:hover:after,
a.btn-primary:hover:after {
    background-color: var(--tk-btn-af-bg-primary-hover);
    border-color: var(--tk-btn-af-border-color-primary-hover);
}

.os-btn-primary.disabled,
.os-btn-primary[disabled],
a.os-btn-primary.disabled,
a.os-btn-primary[disabled],
.btn-primary.disabled,
.btn-primary[disabled],
a.btn-primary.disabled,
a.btn-primary[disabled] {
    background-color: var(--tk-btn-disabled-neutral-2);
    border-color: var(--tk-btn-disabled-neutral-2);
    color: var(--tk-btn-disabled-color-4);
}

.os-btn-primary.disabled:after,
.os-btn-primary[disabled]:after,
a.os-btn-primary.disabled:after,
a.os-btn-primary[disabled]:after,
.btn-primary.disabled:after,
.btn-primary[disabled]:after,
a.btn-primary.disabled:after,
a.btn-primary[disabled]:after {
    background-color: var(--tk-btn-af-disabled-color-2);
    border-color: var(--tk-btn-af-disabled-neutral-4);
}

/* Button Primary Inverted */
.os-btn-primary.btn-inverted,
.os-btn-primary.btn-inverted:visited,
a.os-btn-primary.btn-inverted,
a.os-btn-primary.btn-inverted:visited,
.btn-primary.btn-inverted,
.btn-primary.btn-inverted:visited,
a.btn-primary.btn-inverted,
a.btn-primary.btn-inverted:visited {
    background-color: var(--tk-btn-bg-primary-inv);
    border-color: var(--tk-btn-border-color-primary-inv);
    color: var(--tk-btn-color-primary-inv);
}

.os-btn-primary.btn-inverted:after,
.os-btn-primary.btn-inverted:visited:after,
a.os-btn-primary.btn-inverted:after,
a.os-btn-primary.btn-inverted:visited:after,
.btn-primary.btn-inverted:after,
.btn-primary.btn-inverted:visited:after,
a.btn-primary.btn-inverted:after,
a.btn-primary.btn-inverted:visited:after {
    background-color: var(--tk-btn-af-bg-primary-inv);
    border-color: var(--tk-btn-af-border-color-primary-inv);
}

.os-btn-primary.btn-inverted:hover,
a.os-btn-primary.btn-inverted:hover,
.btn-primary.btn-inverted:hover,
a.btn-primary.btn-inverted:hover {
    border-color: var(--tk-btn-border-color-primary-inv-hover);
    color: var(--tk-btn-color-primary-inv-hover);
}

.os-btn-primary.btn-inverted:hover:after,
a.os-btn-primary.btn-inverted:hover:after,
.btn-primary.btn-inverted:hover:after,
a.btn-primary.btn-inverted:hover:after {
    border-color: var(--tk-btn-af-border-color-primary-inv-hover);
}

.os-btn-primary.btn-inverted.disabled,
.os-btn-primary.btn-inverted[disabled],
a.os-btn-primary.btn-inverted.disabled,
a.os-btn-primary.btn-inverted[disabled] {
    background-color: var(--tk-btn-disabled-white);
    border-color: var(--tk-btn-disabled-neutral-2);
    color: var(--tk-btn-disabled-color-2);
}

.os-btn-primary.btn-inverted.disabled:after,
.os-btn-primary.btn-inverted[disabled]:after,
a.os-btn-primary.btn-inverted.disabled:after,
a.os-btn-primary.btn-inverted[disabled]:after {
    background-color: var(--tk-btn-af-disabled-white);
    border-color: var(--tk-btn-af-disabled-neutral-2);
}

/* Button Secondary */
.os-btn-secondary,
.os-btn-secondary:visited,
a.os-btn-secondary,
a.os-btn-secondary:visited,
.os-btn-cancel,
.os-btn-cancel:visited,
a.os-btn-cancel,
a.os-btn-cancel:visited {
    background-color: var(--tk-btn-bg-secondary);
    border-color: var(--tk-btn-border-color-secondary);
    color: var(--tk-btn-color-secondary);
}

.os-btn-secondary:after,
.os-btn-secondary:visited:after,
a.os-btn-secondary:after,
a.os-btn-secondary:visited:after,
.os-btn-cancel:after,
.os-btn-cancel:visited:after,
a.os-btn-cancel:after,
a.os-btn-cancel:visited:after {
    background-color: var(--tk-btn-af-bg-secondary);
    border-color: var(--tk-btn-af-border-color-secondary);
}

.os-btn-secondary:hover,
a.os-btn-secondary:hover,
.os-btn-cancel:hover,
a.os-btn-cancel:hover {
    background-color: var(--tk-btn-bg-secondary-hover);
    border-color: var(--tk-btn-border-color-secondary-hover);
    color: var(--tk-btn-color-secondary-hover);
}

.os-btn-secondary:hover:after,
a.os-btn-secondary:hover:after,
.os-btn-cancel:hover:after,
a.os-btn-cancel:hover:after {
    background-color: var(--tk-btn-af-bg-secondary-hover);
    border-color: var(--tk-btn-af-border-color-secondary-hover);
}

.os-btn-secondary.disabled,
.os-btn-secondary[disabled],
a.os-btn-secondary.disabled,
a.os-btn-secondary[disabled],
.os-btn-cancel.disabled,
.os-btn-cancel[disabled],
a.os-btn-cancel.disabled,
a.os-btn-cancel[disabled] {
    background-color: var(--tk-btn-disabled-white); /* to overwrite btn-cancel from UI */
    border-color: var(--tk-btn-disabled-neutral-2);
    color: var(--tk-btn-disabled-color-2);
}

.os-btn-secondary.disabled:after,
.os-btn-secondary[disabled]:after,
a.os-btn-secondary.disabled:after,
a.os-btn-secondary[disabled]:after,
.os-btn-cancel.disabled:after,
.os-btn-cancel[disabled]:after,
a.os-btn-cancel.disabled:after,
a.os-btn-cancel[disabled]:after {
    background-color: var(--tk-btn-af-disabled-white); /* to overwrite btn-cancel from UI */
    border-color: var(--tk-btn-af-disabled-neutral-2);;
}

/* Button Secondary Inverted */ 
.os-btn-secondary.btn-inverted,
.os-btn-secondary.btn-inverted:visited,
a.os-btn-secondary.btn-inverted,
a.os-btn-secondary.btn-inverted:visited {
    background-color: var(--tk-btn-bg-secondary-inv);
    border-color: var(--tk-btn-border-color-secondary-inv);
    color: var(--tk-btn-color-secondary-inv);
}

.os-btn-secondary.btn-inverted:after,
.os-btn-secondary.btn-inverted:visited:after,
a.os-btn-secondary.btn-inverted:after,
a.os-btn-secondary.btn-inverted:visited:after {
    background-color: var(--tk-btn-af-bg-secondary-inv);
    border-color: var(--tk-btn-af-border-color-secondary-inv);
}

.os-btn-secondary.btn-inverted:hover,
a.os-btn-secondary.btn-inverted:hover {
    background-color: var(--tk-btn-bg-secondary-inv-hover);
    border-color: var(--tk-btn-border-color-secondary-inv-hover);
    color: var(--tk-btn-color-secondary-inv-hover);
}

.os-btn-secondary.btn-inverted:hover:after,
a.os-btn-secondary.btn-inverted:hover:after {
    background-color: var(--tk-btn-af-bg-secondary-inv-hover);
    border-color: var(--tk-btn-af-border-color-secondary-inv-hover);
}

.os-btn-secondary.btn-inverted.disabled,
.os-btn-secondary.btn-inverted[disabled],
a.os-btn-secondary.btn-inverted.disabled,
a.os-btn-secondary.btn-inverted[disabled] {
    background-color: var(--tk-btn-disabled-white);
    border-color: var(--tk-btn-disabled-white);
    color: var(--tk-btn-disabled-color-2);
}

.os-btn-secondary.btn-inverted.disabled:after,
.os-btn-secondary.btn-inverted[disabled]:after,
a.os-btn-secondary.btn-inverted.disabled:after,
a.os-btn-secondary.btn-inverted[disabled]:after {
    background-color: var(--tk-btn-af-disabled-white);
    border-color: var(--color-white);
}

/* Button Confirm */
.os-btn-confirm,
.os-btn-confirm:visited,
a.os-btn-confirm,
a.os-btn-confirm:visited,
.btn-success, 
.btn-success:visited,
a.btn-success, 
a.btn-success:visited  {
    background-color: var(--tk-btn-bg-confirm);
    border-color: var(--tk-btn-border-color-confirm);
    color: var(--tk-btn-color-confirm);
}

.os-btn-confirm:after,
.os-btn-confirm:visited:after,
a.os-btn-confirm:after,
a.os-btn-confirm:visited:after,
.btn-success:after, 
.btn-success:visited:after,
a.btn-success:after, 
a.btn-success:visited:after  {
    background-color: var(--tk-btn-af-bg-confirm);
    border-color: var(--tk-btn-af-border-color-confirm);
}

.os-btn-confirm:hover,
a.os-btn-confirm:hover,
.btn-success:hover, 
a.btn-success:hover {
    background-color: var(--tk-btn-bg-confirm-hover);
    border-color: var(--tk-btn-border-color-confirm-hover);
    color: var(--tk-btn-color-confirm-hover);
}

.os-btn-confirm:hover:after,
a.os-btn-confirm:hover:after,
.btn-success:hover:after, 
a.btn-success:hover:after {
    background-color: var(--tk-btn-af-bg-confirm-hover);
    border-color: var(--tk-btn-af-border-color-confirm-hover);
}

.os-btn-confirm.disabled,
.os-btn-confirm[disabled],
a.os-btn-confirm.disabled,
a.os-btn-confirm[disabled],
.btn-success.disabled,
.btn-success[disabled],
a.btn-success.disabled,
a.btn-success[disabled] {
    background-color: var(--tk-btn-disabled-neutral-2);
    border-color: var(--tk-btn-disabled-neutral-2);
    color: var(--tk-btn-disabled-color-4);
}

.os-btn-confirm.disabled:after,
.os-btn-confirm[disabled]:after,
a.os-btn-confirm.disabled:after,
a.os-btn-confirm[disabled]:after,
.btn-success.disabled:after,
.btn-success[disabled]:after,
a.btn-success.disabled:after,
a.btn-success[disabled]:after {
    background-color: var(--tk-btn-af-disabled-color-2);
    border-color: var(--tk-btn-af-disabled-neutral-4);
}

/* Button Utility */
.os-btn-utility,
.os-btn-utility:visited,
a.os-btn-utility,
a.os-btn-utility:visited {
    background-color: var(--tk-btn-bg-utility);
    border-color: var(--tk-btn-border-color-utility);
    color: var(--tk-btn-color-utility);
}

.os-btn-utility:after,
.os-btn-utility:visited:after,
a.os-btn-utility:after,
a.os-btn-utility:visited:after {
    background-color: var(--tk-btn-af-bg-utility);
    border-color: var(--tk-btn-af-border-color-utility);
}

.os-btn-utility:hover,
a.os-btn-utility:hover {
    background-color: var(--tk-btn-bg-utility-hover);
    border-color: var(--tk-btn-border-color-utility-hover);
    color: var(--tk-btn-color-utility-hover);
}

.os-btn-utility:hover:after,
a.os-btn-utility:hover:after {
    background-color: var(--tk-btn-af-bg-utility-hover);
    border-color: var(--tk-btn-af-border-color-utility-hover);
}

.os-btn-utility.disabled,
.os-btn-utility[disabled],
a.os-btn-utility.disabled,
a.os-btn-utility[disabled] {
    background-color: var(--tk-btn-disabled-neutral-2);
    border-color: var(--tk-btn-disabled-neutral-2);
    color: var(--tk-btn-disabled-color-4);
}

.os-btn-utility.disabled:after,
.os-btn-utility[disabled]:after,
a.os-btn-utility.disabled:after,
a.os-btn-utility[disabled]:after {
    background-color: var(--tk-btn-af-disabled-color-2);
    border-color: var(--tk-btn-af-disabled-neutral-4);
}

/* Button Dark */
.os-btn-dark,
.os-btn-dark:visited,
a.os-btn-dark,
a.os-btn-dark:visited {
    background-color: var(--tk-btn-bg-dark);
    border-color: var(--tk-btn-border-color-dark);
    color: var(--tk-btn-color-dark);
}

.os-btn-dark:after,
.os-btn-dark:visited:after,
a.os-btn-dark:after,
a.os-btn-dark:visited:after {
    background-color: var(--tk-btn-af-bg-dark);
    border-color: var(--tk-btn-af-border-color-dark);
}

.os-btn-dark:hover,
a.os-btn-dark:hover {
    background-color: var(--tk-btn-bg-dark-hover);
    border-color: var(--tk-btn-border-color-dark-hover);
    color: var(--tk-btn-color-dark-hover);
}

.os-btn-dark:hover:after,
a.os-btn-dark:hover:after {
    background-color: var(--tk-btn-af-bg-dark-hover);
    border-color: var(--tk-btn-af-border-color-dark-hover);
}

.os-btn-dark.disabled,
.os-btn-dark[disabled],
a.os-btn-dark.disabled,
a.os-btn-dark[disabled] {
    background-color: var(--tk-btn-disabled-neutral-2);
    border-color: var(--tk-btn-disabled-neutral-2);
    color: var(--tk-btn-disabled-color-4);
}

.os-btn-dark.disabled:after,
.os-btn-dark[disabled]:after,
a.os-btn-dark.disabled:after,
a.os-btn-dark[disabled]:after {
    background-color: var(--tk-btn-af-disabled-color-2);
    border-color: var(--tk-btn-af-disabled-neutral-2);
}

/* Button Dark Inverted */
.os-btn-dark.btn-inverted,
.os-btn-dark.btn-inverted:visited,
a.os-btn-dark.btn-inverted,
a.os-btn-dark.btn-inverted:visited  {
    background-color: var(--tk-btn-bg-dark-inv);
    border-color: var(--tk-btn-border-color-dark-inv);
    color: var(--tk-btn-color-dark-inv);
}

.os-btn-dark.btn-inverted:after,
.os-btn-dark.btn-inverted:visited:after,
a.os-btn-dark.btn-inverted:after,
a.os-btn-dark.btn-inverted:visited:after  {
    background-color: var(--tk-btn-af-bg-dark-inv);
    border-color: var(--tk-btn-af-border-color-dark-inv);
}

.os-btn-dark.btn-inverted:hover,
a.os-btn-dark.btn-inverted:hover {
    background-color: var(--tk-btn-bg-dark-inv-hover);
    border-color: var(--tk-btn-border-color-dark-inv-hover);
    color: var(--tk-btn-color-dark-inv-hover);
}

.os-btn-dark.btn-inverted:hover:after,
a.os-btn-dark.btn-inverted:hover:after {
    background-color: var(--tk-btn-af-bg-dark-inv-hover);
    border-color: var(--tk-btn-af-border-color-dark-inv-hover);
}

.os-btn-dark.btn-inverted.disabled,
.os-btn-dark.btn-inverted[disabled],
a.os-btn-dark.btn-inverted.disabled,
a.os-btn-dark.btn-inverted[disabled] {
    background-color: var(--tk-btn-disabled-white);
    border-color: var(--tk-btn-disabled-neutral-2);
    color: var(--tk-btn-disabled-color-2);
}

.os-btn-dark.btn-inverted.disabled:after,
.os-btn-dark.btn-inverted[disabled]:after,
a.os-btn-dark.btn-inverted.disabled:after,
a.os-btn-dark.btn-inverted[disabled]:after {
    background-color: var(--tk-btn-disabled-white);
    border-color: var(--tk-btn-af-disabled-neutral-2);
}

/* Button Light */
.os-btn-light,
.os-btn-light:visited,
a.os-btn-light,
a.os-btn-light:visited {
    background-color: var(--tk-btn-bg-light);
    border-color: var(--tk-btn-border-color-light);
    color: var(--tk-btn-color-light);
}

.os-btn-light:after,
.os-btn-light:visited:after,
a.os-btn-light:after,
a.os-btn-light:visited:after {
    background-color: var(--tk-btn-af-bg-light);
    border-color: var(--tk-btn-af-border-color-light);
}

.os-btn-light:hover,
a.os-btn-light:hover {
    background-color: var(--tk-btn-bg-light-hover);
    border-color: var(--tk-btn-border-color-light-hover);
    color: var(--tk-btn-color-light-hover);
}

.os-btn-light:hover:after,
a.os-btn-light:hover:after {
    background-color: var(--tk-btn-af-bg-light-hover);
    border-color: var(--tk-btn-af-border-color-light-hover);
}

.os-btn-light.disabled,
.os-btn-light[disabled],
a.os-btn-light.disabled,
a.os-btn-light[disabled] {
    background-color: var(--tk-btn-disabled-neutral-6);
    border-color: var(--tk-btn-disabled-neutral-6);
    color: var(--tk-btn-disabled-color-10);
}

.os-btn-light.disabled:after,
.os-btn-light[disabled]:after,
a.os-btn-light.disabled:after,
a.os-btn-light[disabled]:after {
    background-color: rgba(255,255,255, 0.48);
    border-color: rgba(255,255,255, 0);
}

/* Button Light Inverted */
.os-btn-light.btn-inverted,
.os-btn-light.btn-inverted:visited,
a.os-btn-light.btn-inverted,
a.os-btn-light.btn-inverted:visited {
    background-color: var(--tk-btn-bg-light-inv);
    border-color: var(--tk-btn-border-color-light-inv);
    color: var(--tk-btn-color-light-inv);
}

.os-btn-light.btn-inverted:after,
.os-btn-light.btn-inverted:visited:after,
a.os-btn-light.btn-inverted:after,
a.os-btn-light.btn-inverted:visited:after {
    background-color: var(--tk-btn-af-bg-light-inv);
    border-color: var(--tk-btn-af-border-color-light-inv);
}

.os-btn-light.btn-inverted:hover,
a.os-btn-light.btn-inverted:hover {
    background-color: var(--tk-btn-bg-light-inv-hover);
    border-color: var(--tk-btn-border-color-light-inv-hover);
    color: var(--tk-btn-color-light-inv-hover);
}

.os-btn-light.btn-inverted:hover:after,
a.os-btn-light.btn-inverted:hover:after {
    background-color: var(--tk-btn-af-bg-light-inv-hover);
    border-color: var(--tk-btn-af-border-color-light-inv-hover);
}

.os-btn-light.btn-inverted.disabled,
.os-btn-light.btn-inverted[disabled],
a.os-btn-light.btn-inverted.disabled,
a.os-btn-light.btn-inverted[disabled] {
    background-color: var(--color-transparent);
    border-color: var(--tk-btn-disabled-neutral-6);
    color: var(--tk-btn-disabled-color-6);
}

.os-btn-light.btn-inverted.disabled:after,
.os-btn-light.btn-inverted[disabled]:after,
a.os-btn-light.btn-inverted.disabled:after,
a.os-btn-light.btn-inverted[disabled]:after {
    background-color: var(--color-transparent);
    border-color: var(--color-neutral-6);
}

/* Button Error UI */
.os-btn-error,
.os-btn-error:visited,
.btn-error,
.btn-error:visited,
a.btn-error,
a.btn-error:visited {
    background-color: var(--tk-btn-bg-error);
    border-color: var(--tk-btn-border-color-error);
    color: var(--tk-btn-color-error);
}

.os-btn-error:after,
.os-btn-error:visited:after,
.btn-error:after,
.btn-error:visited:after,
a.btn-error:after,
a.btn-error:visited:after {
    background-color: var(--tk-btn-af-bg-error);
    border-color: var(--tk-btn-af-border-color-error);
}

.os-btn-error:hover,
a.os-btn-error:hover,
.btn-error:hover,
a.btn-error:hover {
    background-color: var(--tk-btn-bg-error-hover);
    border-color: var(--tk-btn-border-color-error-hover);
    color: var(--tk-btn-color-error-hover);
}

.os-btn-error:hover:after,
a.os-btn-error:hover:after,
.btn-error:hover:after,
a.btn-error:hover:after {
    background-color: var(--tk-btn-af-bg-error-hover);
    border-color: var(--tk-btn-af-border-color-error-hover);
}

.os-btn-error.disabled,
.os-btn-error[disabled],
.btn-error.disabled,
.btn-error[disabled],
a.btn-error.disabled,
a.btn-error[disabled] {
    background-color: var(--tk-btn-disabled-neutral-2);
    border-color: var(--tk-btn-disabled-neutral-2);
    color: var(--tk-btn-disabled-color-4);
}

.os-btn-error.disabled:after,
.os-btn-error[disabled]:after,
.btn-error.disabled:after,
.btn-error[disabled]:after,
a.btn-error.disabled:after,
a.btn-error[disabled]:after {
    background-color: var(--tk-btn-af-disabled-color-2);
    border-color: var(--tk-btn-af-disabled-neutral-2);
}

/* Button Icon */
[class*="os-btn"].btn-icon,
[class*="os-btn"].btn-icon:visited {
    height: var(--tk-btn-height-m);
    padding: var(--space-none);
    width: var(--tk-btn-height-m);
}

[class*="os-btn"].btn-s.btn-icon,
[class*="os-btn"].btn-s.btn-icon:visited {
    height: var(--tk-btn-height-s);
    width: var(--tk-btn-height-s);
}

[class*="os-btn"].btn-l.btn-icon,
[class*="os-btn"].btn-l.btn-icon:visited {
    height: var(--tk-btn-height-l);
    width: var(--tk-btn-height-l);
}

[class*="os-btn"].btn-xl.btn-icon,
[class*="os-btn"].btn-xl.btn-icon:visited {
    height: var(--tk-btn-height-xl); 
    width: var(--tk-btn-height-xl);
}

[class*="os-btn"].btn-xl.btn-icon [class*="osicons-v2"],
[class*="os-btn"].btn-xl.btn-icon:visited [class*="osicons-v2"] {
    font-size: var(--font-size-xl);
}

/* Filter OSUI BTN */
.desktop .btn:hover {
    filter: brightness(1);
    -webkit-filter: brightness(1);
}

/* START - LINKS */
a.external-link,
a.internal-link,
a.play-link {
    display: inline-block;
    font-family: var(--font-family-primary);
}

a.external-link:after,
a.internal-link:after,
a.play-link:after {
    display: inline-block;
    font-family: osicons-v2;
    font-size: inherit;
    margin-left: var(--space-s);
    position: relative;
}

/* Link External */
a.external-link::after {
    content: var(--osicons-link-out);
    top: 1px;
}

/* Link Internal */
a.internal-link::after {
    content: var(--osicons-arrow-link);
    top: 1px;
}

/* Link Play */
a.play-link::after {
    content: var(--osicons-play);
}

/* Link Colors and Hovers */
.default-link,
a.default-link,
.default-link:hover,
a.default-link:hover { 
    color: var(--color-turquoise-dark); 
}

.default-link-light,
a.default-link-light,
.default-link-light:hover,
a.default-link-light:hover { 
    color: var(--color-turquoise); 
}

a.dark-link,
.black-link,
a.black-link,
a.dark-link:hover,
.black-link:hover,
a.black-link:hover {
    color: var(--color-neutral-10); 
}

.yellow-link,
a.yellow-link,
.yellow-link:hover,
a.yellow-link:hover {
    color: var(--color-yellow); 
}

.white-link,
a.white-link,
.white-link:hover,
a.white-link:hover {
    color: var(--color-white); 
}
/* END - LINKS */

/* FORM ELEMENTS */
.layout {
    overflow: initial;
}

.layout .Form .input.ReadOnly:not(.Not_Valid),
.layout .Form .select.ReadOnly:not(.Not_Valid) {
    background-color: var(--color-white);
    border: var(--border-size-s) solid var(--color-neutral-1);
}

.input,
textarea.input,
.select,
.input-with-icon .input-with-icon-content-icon,
.form-control[data-input],
.form-control[data-textarea],    
[data-dropdown] > div.dropdown-display,    
[data-dropdown] > select.dropdown-display {
    background-color: var(--color-white);
    border-color: var(--color-neutral-4);
    color: var(--color-neutral-6);
    height: var(--space-xl);
    font-size: var(--font-size-base);
    transition: var(--tk-transition-base);
}

.form-control[data-textarea],
textarea.input {
    height: auto;
}

.input:hover,
textarea.input:hover,
.select:hover,
.input-with-icon:hover .input-with-icon-content-icon,
.form-control[data-input]:focus,
.form-control[data-input]:hover,
.form-control[data-textarea]:hover,    
[data-dropdown] > div.dropdown-display:hover,    
[data-dropdown] > select.dropdown-display:hover {
    border-color: var(--color-neutral-6);
}

.input:focus,
.select:focus,
[data-dropdown] > div.dropdown-display:focus,    
[data-dropdown] > select.dropdown-display:focus {
    border: var(--tk-input-border-width) solid var(--color-neutral-6);
}

.textarea:focus,
.form-control[data-textarea]:focus {
    border: var(--tk-input-border-width) solid var(--color-neutral-6);
}

.Form input.Not_Valid,
.Form .select.Not_Valid,
.input.Not_Valid,
.select.Not_Valid {
    padding: var(--space-none) var(--space-base);
}

.Form textarea.Not_Valid,
textarea.input.Not_Valid {
    padding: var(--space-base);
}

.form.OSFillParent .form-control[class*=ThemeGrid_Width].not-valid + span.validation-message {
    left: 0;
}

.form.OSFillParent .form-control[class*=ThemeGrid_MarginGutter].not-valid + span.validation-message {
    left: 3.961%; /* % that matches the same behavior as the gutter */
}

.form .input-with-icon .input-with-icon-content-icon {
    padding-bottom: var(--space-none);
}

.form .radio-group.not-valid span.validation-message {
    bottom: -12px;
}

.form .dropdown-container.not-valid span.validation-message, 
.form .dropdown-container[class*=ThemeGrid_Width].not-valid div.dropdown-display ~ span.validation-message {
    bottom: -19px;
}

/* LABEL */
label {
    color: var(--color-neutral-8);
}

/* TEXTAREA */
.form-control[data-textarea] {
    border-radius: var(--tk-component-border-radius-200);
    border-width: var(--tk-input-border-width);
    color: var(--color-neutral-8);
}

.form-control[data-textarea]:hover {
    border-width: var(--tk-input-border-width);
}

.tablet .form-control[data-textarea]:not(.input-small), 
.phone .form-control[data-textarea]:not(.input-small),
.form-control[data-textarea] {
    font-size: var(--font-size-base);
    font-weight: var(--tk-font-weight-s);
    line-height: 1.5;
}

.form-control.input-small[data-textarea] {
    font-size: var(--font-size-s);
    padding: var(--space-base);
}

.tablet .form-control.input-large[data-textarea]:not(.input-small), 
.phone .form-control.input-large[data-textarea]:not(.input-small),
.form-control.input-large[data-textarea] {
     font-size: var(--font-size-l);
}

/* INPUT */
.form-control[data-input] {
    border-color: var(--color-neutral-4);
    border-radius: var(--tk-component-border-radius-200);
    color: var(--color-neutral-8);
    font-weight: var(--tk-font-weight-s);
    line-height: 1.5;
}

.form-control[data-input],
.form-control[data-input][disabled],
.form-control[data-input]:focus,
.form-control[data-input]:hover,
.form-control.not-valid[data-input] {
    border-width: var(--tk-input-border-width);
}

.form-control[data-input],
.tablet .form-control[data-input]:not(.input-small), 
.phone .form-control[data-input]:not(.input-small) {
    height: var(--space-xl);
}

.form-control[data-input],
.form-control.input-small[data-input],
.form-control.input-large[data-input] {
    padding: var(--space-none) var(--tk-input-padding);
}

.form-control.not-valid[data-input],
.form-control.not-valid[data-textarea] {
    border: var(--tk-input-border-width) solid var(--color-red);
}

.tablet .form-control.input-small[data-input], 
.phone .form-control.input-small[data-input],
.form-control.input-small[data-input] {
    font-size: var(--font-size-s);
}

.tablet .form-control.input-large[data-input], 
.phone .form-control.input-large[data-input],
.form-control.input-large[data-input] {
    font-size: var(--font-size-l);
    height: var(--space-xxl);
}

.form-control[data-input][disabled], 
.form-control[data-textarea][disabled] {
    background-color: var(--color-neutral-1);
    border: var(--tk-input-border-width) solid var(--color-neutral-2);
    color: var(--color-neutral-4);
} 

::placeholder {
    color: var(--color-neutral-4);
}

::-ms-input-placeholder {
    color: var(--color-neutral-4);
}

::-webkit-input-placeholder {
    color: var(--color-neutral-4);
}

::-moz-placeholder {
    color: var(--color-neutral-4);
}

.input-small {height: 32px;}
.input-big {height: 48px;}

/* INPUT ICON */
.input-with-icon .input-with-icon-content-icon {
    font-size: var(--font-size-s);
    line-height: 1.5;
    padding: var(--space-none) var(--space-base);
    width: auto;
    z-index: 1;
}

.input-with-icon .input-with-icon-content-icon .icon,
.input-with-icon .input-with-icon-content-icon [class*="osicons-v2"],
.input-with-icon .input-with-icon-content-icon {
    color: var(--color-neutral-3);
}

.input-with-icon .input-with-icon-content-icon .icon,
.input-with-icon .input-with-icon-content-icon [class*="osicons-v2"] {
    font-size: var(--font-size-base);
}

.input-with-icon:focus-within .input-with-icon-content-icon .icon,
.input-with-icon:focus-within .input-with-icon-content-icon [class*="osicons-v2"],
.input-with-icon:focus-within .input-with-icon-content-icon  { 
    color: var(--color-neutral-6);
    transition: 300ms ease;
}

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

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

/* Inputs with Icon Sizes */
/* Inputs with Icon Size Small */
.input-with-icon.input-small .form-control {
    font-size: var(--font-size-s);
    height: 32px;
}

.input-with-icon.input-small .input-with-icon-content-icon {
    font-size: var(--font-size-s);
    height: 32px;
    top: 1px;
}

.input-with-icon.input-small .input-with-icon-content-icon .icon,
.input-with-icon.input-small .input-with-icon-content-icon [class*="osicons-v2"] {
   font-size: var(--font-size-s);
}

/* Inputs with Icon Size Large */
.input-with-icon.input-large .form-control {
    font-size: var(--font-size-l);
    height: 48px;
}

.input-with-icon.input-large .input-with-icon-content-icon {
    font-size: var(--font-size-s);
    height:  48px;
    top: 1px;
}

.input-with-icon.input-large .input-with-icon-content-icon .icon,
.input-with-icon.input-large .input-with-icon-content-icon [class*="osicons-v2"] {
    font-size: var(--font-size-l);
}

/* Input with icon Mobile */
.tablet .input-with-icon.input-small .form-control,
.phone .input-with-icon.input-small .form-control {
    height: 32px;
}

.phone .input-with-icon .input-with-icon-content-icon {
    font-size: var(--font-size-xs);
}

.tablet .input-with-icon.input-large .form-control,
.phone .input-with-icon.input-large .form-control {
    height: 48px;
}

/* CHECKBOX AND RADIOBUTTON */
[data-checkbox][disabled]:before,
[data-checkbox][disabled]:checked:before {
    background-color: var(--color-neutral-2);
    border-color: var(--color-neutral-2);
    height: 18px;
    width: 18px;
}

[data-checkbox][disabled]:hover:before,
[data-checkbox][disabled]:checked:hover:before  {
    border-color: var(--color-neutral-2);
}

[data-checkbox]:checked:after {
    height: 4px;
    left: 5px;
    top: 6px;
    width: 8px;
}

/* Checkbox */
.checkbox,
.tablet [data-checkbox],
.phone [data-checkbox] {
    height: 20px;
    margin-bottom: var(--space-s);
    margin-right: var(--space-base);
    margin-top: var(--space-s);
    width: 20px;
}

.checkbox:before,
.tablet [data-checkbox]:before,
.phone [data-checkbox]:before {
    background-color: var(--color-transparent);
    border-radius: var(--border-size-none);
    border-style: solid;
    border-width: var(--border-size-m);
    height: 16px;
    width: 16px;
}

.checkbox:checked:before,
.checkbox.Not_Valid:checked:before {
    background-color: var(--color-turquoise-dark);
    border-color: var(--color-turquoise-dark);
    border-style: solid;
    border-width: var(--border-size-m);
    bottom: 0;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.checkbox:hover:before {
    border-color: var(--color-turquoise);
    border-style: solid;
    border-width: var(--border-size-m);
}

.checkbox:hover:checked:before,
.checkbox.Not_Valid:hover:checked:before {
    background-color: var(--color-turquoise);
    border-color: var(--color-turquoise);
}

.checkbox.Not_Valid:before {
    border-color:  var(--color-error);
}

.checkbox.Not_Valid:hover:before {
    border-color: var(--color-error);
}

.checkbox.size-s {
    height: 16px;
    width: 16px;
}

[data-checkbox]:before {
    border-color: var(--color-neutral-8);
    display: block;
}

[data-checkbox]:checked:after {
    align-items: center;
    border: none;
    border-right: none;
    border-top: none;
    color: var(--color-white);
    content: var(--osicons-select);
    display: flex;
    font-family: osicons-v2;
    height: 100%;
    justify-content: center;
    left: 50%;
    line-height: 0;
    -webkit-transform: none;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.tablet [data-checkbox]:checked:after,
.phone [data-checkbox]:checked:after {
    height: 100%;
    left: 50%;
    line-height: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

[data-checkbox].size-s:before,
.tablet [data-checkbox].size-s:before,
.phone [data-checkbox].size-s:before {
    height: 12px;
    width: 12px;
}

[data-checkbox][disabled]:before,
[data-checkbox][disabled]:checked:before {
    border-style: solid;
    border-width: var(--border-size-m);
    height: 16px;
    width: 16px;
}

[data-checkbox][disabled].size-s:before, 
[data-checkbox][disabled].size-s:checked:before {
    height: 12px;
    width: 12px;
}

[data-checkbox][disabled]:checked:after {
    border: none;
}

[data-checkbox][disabled]:checked:before {
    background-color: var(--color-neutral-2);
    border-color: var(--color-neutral-2);
}

.checkbox.size-s:checked:after,
.tablet [data-checkbox].size-s:checked:after,
.phone [data-checkbox].size-s:checked:after {
    height: 100%;
    font-size: var(--font-size-xs);  
    left: 50%;
    line-height: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/*Radio Button*/
.radio-button {
    height: 20px;
    width: 20px;
}

.radio-button:before {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-8);
}

/*Radio Button Checked*/
.radio-button:checked:before {
    background-color: var(--color-turquoise-dark);
    border: var(--border-size-m) solid var(--color-turquoise-dark);
    box-shadow: inset var(--border-size-none) var(--border-size-none) var(--border-size-none) var(--border-size-m) var(--color-white);
    transform: rotate(45deg); /*this fixes the firefox bug where the circle in the middle isn't centered*/
}

/*Radio Button Hover*/
.radio-button:hover:before {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-turquoise);
}

[data-radio-group] .radio-button + label:hover {
    cursor: pointer;
}

/*Radio Button Checked Hover*/
.radio-button:checked:hover:before {
    -webkit-filter: none;
    filter: none;
    background-color: var(--color-turquoise);
    border: var(--border-size-m) solid var(--color-turquoise);
}

/*Radio Button Disabled*/
.radio-button:disabled:before {
    background-color:var(--color-white);
}

.radio-button:disabled:before {
    background-color:var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-2);
}

/*Radio Button Checked Disabled*/
.radio-button:checked:disabled:before {
    border: var(--border-size-m) solid var(--color-neutral-2);
    box-shadow: inset var(--border-size-none) var(--border-size-none) var(--border-size-none) var(--border-size-m) var(--color-white);   
}

/*Radio Button Small size*/
.radio-button.radio-button-s {
    height: var(--space-base);
    width: var(--space-base);
}

/*Radio Button Error*/
[data-radio-group].not-valid [data-radio-button] .radio-button:before {
    border: var(--border-size-m) solid var(--color-error);
}

/*Radio Button Error Disabled*/ 
[data-radio-group].not-valid [data-radio-button] .radio-button:disabled:before {
    border: var(--border-size-m) solid var(--color-error-light);
}

[data-radio-group].not-valid [data-radio-button] .radio-button:disabled {
    border: none;
}

/*Radio Button Error Checked*/
[data-radio-group].not-valid [data-radio-button] .radio-button:checked:before {
    background-color: var(--color-turquoise-dark);
    border: var(--border-size-m) solid var(--color-turquoise-dark);
}

/*Radio Button Error Checked Disabled*/
[data-radio-group].not-valid [data-radio-button] .radio-button:checked:disabled:before {
    background-color: var(--color-neutral-2);
    border: var(--border-size-m) solid var(--color-neutral-2);
}

/*Radio Button Error Hover*/
[data-radio-group].not-valid [data-radio-button] .radio-button:hover:before {
    border-color: var(--color-error);
}

/*Radio Button Error Checked Hover*/
[data-radio-group].not-valid [data-radio-button] .radio-button:checked:hover:before {
    background-color: var(--color-turquoise);
    border: var(--border-size-m) solid var(--color-turquoise);
}

/*Radio Button Label*/
.radio-button + label {
    color: var(--color-neutral-6);
    font-size: var(--font-size-m);
}

/*Radio Button Disabled and Error Checked Disabled Label*/
.radio-button:disabled + label,
[data-radio-group].not-valid [data-radio-button] .radio-button:checked:disabled + label {
    color: var(--color-neutral-2);
}

/*Radio Button Small Label*/
.radio-button.radio-button-s + label {
    font-size: var(--font-size-s);
}

/*Radio Button Error Label*/
[data-radio-group].not-valid [data-radio-button] .radio-button + label {
    color: var(--color-error);
}

/*Radio Button and Error Checked Label*/
.radio-button:checked + label,
[data-radio-group].not-valid [data-radio-button] .radio-button:checked + label {
    color: var(--color-neutral-8);
}

/*Radio Button Error Checked Disabled Label*/
[data-radio-group].not-valid [data-radio-button] .radio-button:disabled + label {
    color: var(--color-error-light);   
}

/* Dropdown */
/* Dropdown Arrow Icon */
.dropdown-container:after,
.tablet .dropdown-container:after, 
.phone .dropdown-container:after { /* override OutSystemsUI*/
    border: var(--border-size-none);
    bottom: auto;
    color: var(--color-neutral-3);
    content: var(--osicons-arrow-down);
    font-family: osicons-v2;
    font-size: var(--font-size-base);
    height: 16px;
    line-height: 1;
    top: 12px;
    right: var(--space-base);
    transform: none;
    width: 16px;
}

.dropdown-expanded.dropdown-container:after {
    border: 0 none;
    transform: rotate(180deg);
}

.dropdown-container .dropdown-list .dropdown-popup-row {
    padding: var(--space-s) var(--space-base);
}
/* Dropdown Arrow Icon Hover */
.dropdown-container:hover:after {
    color: var(--color-neutral-6);
}

/* Dropdown Content List */
div.dropdown-display-content > span,
div.dropdown-display-content > div {
    color: var(--color-neutral-4);
    font-size: var(--font-size-base);
    overflow: hidden;
    text-overflow: ellipsis;
}

div.dropdown-display-content > span[data-expression],
div.dropdown-display-content > div[data-expression] {
    color: var(--color-neutral-8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-dropdown] .scrollable-list {
    height: auto;
}

.dropdown-container .scrollable-list-with-scroll {
    max-height: initial;
    padding: var(--space-none);
}

.dropdown-container .dropdown-popup-row {
    color: var(--color-neutral-8);
    cursor: pointer;
    height: auto;
    padding: var(--space-s) var(--tk-component-padding);
}

.dropdown-container > div.dropdown-display, 
.dropdown-container > select.dropdown-display {
    border-radius: var(--tk-component-border-radius-200);
    border-width: var(--tk-input-border-width);
    font-size: var(--font-size-base);
    overflow: hidden;
    padding: calc(var(--tk-component-padding-y-s) / 2) var(--dropdown-padding-right) calc(var(--tk-component-padding-y-s) / 2) var(--tk-component-padding-x-s);
    text-overflow: ellipsis;
}

[data-dropdown] > div.dropdown-display:hover, 
[data-dropdown] > select.dropdown-display:hover {
    border-width: var(--tk-input-border-width);
}

.dropdown-container.dropdown-expanded > div.dropdown-display {
    border: var(--tk-input-border-width) solid var(--color-neutral-6);
}

.dropdown-container .dropdown-popup-row:hover,
.dropdown-container .dropdown-popup-row-selected:hover {
    background-color: var(--color-neutral-0);
}

.dropdown-container .dropdown-popup-row-selected {
    background-color: var(--color-neutral-0);
    color: var(--color-neutral-8);
}

.dropdown-container > div.dropdown-list {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-6);
    border-radius: var(--tk-component-border-radius-200);
    border-width: var(--tk-input-border-width);
    box-shadow: none;
    z-index: 3;
}

.dropdown-disabled.dropdown-container:after,
.dropdown-disabled.dropdown-container:hover:after {
    color: var(--color-neutral-3);
}

.dropdown-disabled div.dropdown-display-content > span[data-expression],
.dropdown-disabled div.dropdown-display-content > div[data-expression] {
    color: var(--color-neutral-4);
}

/* Dropdown Tag */
.dropdown-display-content [data-block*="Tag"] {
    display: flex;
}

.dropdown-popup-row [data-block*="Tag"] {
    display: inline-flex;
    overflow: hidden;
}

.dropdown-popup-row .tag {
    max-width: 100%;
}

.dropdown-display-content .tag span,
.dropdown-popup-row .tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown Text Only */
.dropdown-display.dropdown option {
    color: var(--color-neutral-8);
    padding: var(--space-s) var(--space-base);
}

.dropdown-display.dropdown option:hover {
    color: var(--color-neutral-8);
    padding: var(--space-s) var(--space-base);
}

/* Dropdown ellipsis */
[data-dropdown] .dropdown-display-content {
    align-items: center;
    display: flex;
    overflow: hidden; /* Ellipsis */
}

/* Dropdown Disabled */
[data-dropdown] > div.dropdown-display[disabled],
[data-dropdown] > div.dropdown-display.dropdown-disabled,
[data-dropdown] > select.dropdown-display[disabled],
[data-dropdown] > select.dropdown-display.dropdown-disabled {
    background-color: var(--color-neutral-1);
    border: var(--tk-input-border-width) solid var(--color-neutral-2);
    color: var(--color-neutral-4);
}

/* Dropdown No-Valid - Error */
[data-dropdown].not-valid .dropdown-display,
[data-dropdown].not-valid .dropdown-display,
[data-dropdown] > select.dropdown-display.not-valid,
[data-dropdown] > select.dropdown-display.not-valid {
    background-color: var(--color-white);
    border: var(--tk-input-border-width) solid var(--color-red);
}

.dropdown-container.not-valid.dropdown-expanded > div.dropdown-display, 
.dropdown-container.not-valid > select.dropdown-display {
    border-width: var(--tk-input-border-width);
}

.not-valid.dropdown-expanded.dropdown-container:after {
    border: var(--border-size-none);
    transform: rotate(180deg) translateY(0) translateX(0);
    -webkit-transform: rotate(180deg) translateY(0) translateX(0); /* to override UI */
    -ms-transform: rotate(180deg) translateY(0) translateX(0); /* to override UI */
}

.form .not-valid.dropdown-expanded.dropdown-container:after { /* correct OSUI bug that adds the expanded class when it isn't valid. */
    transform: none;
}

.dropdown-container.not-valid.dropdown-expanded > div.dropdown-display:hover {
    border-color: var(--color-neutral-6);
}



/* Dropdown Small */
.dropdown-container.dropdown-s > div.dropdown-display,
.dropdown-container.dropdown-s > select.dropdown-display {
    font-size: var(--font-size-s);
}

.dropdown-s.dropdown-container:after {
    top: 8px;
}

.dropdown-s[data-dropdown] > div.dropdown-display,
.dropdown-s[data-dropdown] > select.dropdown-display {
    height: var(--space-l);
}

.dropdown-s div.dropdown-display-content > span,
.dropdown-s div.dropdown-display-content > div {
    font-size: var(--font-size-s);
}

.dropdown-container.dropdown-s .dropdown-popup-row {
    font-size: var(--font-size-s);
    padding: var(--space-xs) var(--space-base);
}

.dropdown .dropdown-s .fa,
.dropdown .dropdown-s [class*="osicons-v2"] {
    padding-left: 1px; /* to fix icon rendering with overflow:hidden to cut the text */
}

/* Dropdown Large */
.dropdown-l[data-dropdown] > div.dropdown-display,
.dropdown-l[data-dropdown] > select.dropdown-display {
    height: var(--space-xxl);
}

.dropdown-l.dropdown-container:after {
    top: 16px;
}

.dropdown-container.dropdown-l > div.dropdown-display,
.dropdown-container.dropdown-l > select.dropdown-display {
    font-size: var(--font-size-l);
}

.dropdown-l div.dropdown-display-content > span, 
.dropdown-l div.dropdown-display-content > div {
    font-size: var(--font-size-l);
}

.dropdown-container.dropdown-l .dropdown-popup-row {
    font-size: var(--font-size-l);
    padding: var(--space-s) var(--space-base);
}

/* Dropdown Mobile */
.tablet .dropdown-s div.dropdown-display .dropdown-display-content > span,
.tablet .dropdown-s div.dropdown-display .dropdown-display-content > div,
.tablet .dropdown-s select.dropdown-display .dropdown-display-content > span,
.tablet .dropdown-s select.dropdown-display .dropdown-display-content > div,
.phone .dropdown-s div.dropdown-display .dropdown-display-content > span,
.phone .dropdown-s div.dropdown-display .dropdown-display-content > div,
.phone .dropdown-s select.dropdown-display .dropdown-display-content > span,
.phone .dropdown-s select.dropdown-display .dropdown-display-content > div {
    font-size: var(--font-size-s);
}

.tablet .dropdown-l div.dropdown-display .dropdown-display-content > span,
.tablet .dropdown-l div.dropdown-display .dropdown-display-content > div,
.tablet .dropdown-l select.dropdown-display .dropdown-display-content > span,
.tablet .dropdown-l select.dropdown-display .dropdown-display-content > div,
.phone .dropdown-l div.dropdown-display .dropdown-display-content > span,
.phone .dropdown-l div.dropdown-display .dropdown-display-content > div,
.phone .dropdown-l select.dropdown-display .dropdown-display-content > span,
.phone .dropdown-l select.dropdown-display .dropdown-display-content > div {
    font-size: var(--font-size-l);
}


/* Dropdown Avatar */
.dropdown .avatar {
    height: 24px;
    width: 24px;
}

.dropdown [data-expression].ThemeGrid_MarginGutter {
    margin-left: var(--space-none); /* to override UI */
}

.dropdown.dropdown-l .avatar {
    display: flex; /* aligns the avatar in the center */
}

.dropdown-container .dropdown-popup-row:hover .avatar,
.dropdown-container .dropdown-popup-row-selected .avatar {
    border-color: var(--color-neutral-0);
}

/* Dropdown Icon / Avatar */
.dropdown .avatar,
.dropdown .fa,
.dropdown [class*="osicons-v2"] {
    margin-right: var(--space-base);
}

.dropdown .avatar + [data-expression],
.dropdown [class*="osicons-v2"] + [data-expression],
.dropdown .fa + [data-expression] {
    margin-left: var(--space-none);
}

/* Dropdown Multiple Values */
.dropdown-container.dropdown-multiple .dropdown-popup-row {
    align-items: flex-start;
    flex-direction: column;
}

.dropdown-container.dropdown-multiple .dropdown-popup-row span {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: initial;
} /* Limit the texts to 2 lines */

.dropdown-multiple .dropdown-display-content span:not(:first-of-type),
.dropdown-multiple .dropdown-display-content div:not(:first-of-type) {
    display: none; /* To show only the first expression of the choosen values */
}

.dropdown-multiselect-window {
    
    
}

.dropdown-multiselect.is-open .dropdown-multiselect-window {
    
}

/* Dropdown with Badge */
.dropdown.dropdown-badge .dropdown-display-content {
    justify-content: space-between;
    width: 100%;
}

.dropdown.dropdown-badge .dropdown-display-content .badge {
    margin-left: var(--space-s);
}

.dropdown.dropdown-badge div.dropdown-display-content [data-block*="Numbers.Badge"] {
    flex-shrink: 0; /* to prevent the badge to be cut when the text displayed is bigger than the space available */
}

.dropdown.dropdown-badge .dropdown-popup-row {
    justify-content: space-between;
}

.dropdown.dropdown-badge .dropdown-popup-row .badge {
    margin-left: var(--space-s);
}

/* Dropdown with Links */
.dropdown-container.dropdown-links .dropdown-display-content a {
    color: var(--color-neutral-8);
    pointer-events: none;
}

.dropdown-container.dropdown-links > div.dropdown-list a {
    color: var(--color-neutral-8);
    display: block;
    width: 100%;
}

.dropdown-container.dropdown-links > div.dropdown-list a:hover,
.dropdown-container.dropdown-links > div.dropdown-list a:focus,
.dropdown-container.dropdown-links > div.dropdown-list a:active {
    color: var(--color-neutral-8);
    text-decoration: none;
}

.dropdown-container.dropdown-links .dropdown-display-content a,
.dropdown-container.dropdown-links .dropdown-display-content span,
.dropdown-popup-row a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Dropdown Links Dark and Light */
.dropdown-container.dropdown-links.dropdown-links-dark .dropdown-display,
.dropdown-container.dropdown-links.dropdown-links-dark > div.dropdown-display:hover,
.dropdown-container.dropdown-expanded.dropdown-links.dropdown-links-dark > div.dropdown-display,
.dropdown-container.dropdown-links.dropdown-links-light .dropdown-display,
.dropdown-container.dropdown-links.dropdown-links-light > div.dropdown-display:hover,
.dropdown-container.dropdown-expanded.dropdown-links.dropdown-links-light > div.dropdown-display,
.dropdown-container select.dropdown-links.dropdown-links-dark.dropdown-display,
.dropdown-container select.dropdown-links.dropdown-links-light.dropdown-display {
    border: transparent;
}

/* Dropdown Links Dark */
.dropdown-container.dropdown-links.dropdown-links-dark .dropdown-display,
.dropdown-container.dropdown-expanded.dropdown-links.dropdown-links-dark > div.dropdown-display,
.dropdown-container select.dropdown-links.dropdown-links-dark.dropdown-display {
    background-color: transparent;
}

/* Dropdown Links Light */
.dropdown-container.dropdown-links.dropdown-links-light .dropdown-display,
.dropdown-container.dropdown-links.dropdown-links-light > div.dropdown-display:hover,
.dropdown-container.dropdown-expanded.dropdown-links.dropdown-links-light > div.dropdown-display,
.dropdown-container select.dropdown-links.dropdown-links-light.dropdown-display {
    background-color: transparent;
    color: var(--color-white);
}

.dropdown-container.dropdown-links.dropdown-links-light .dropdown-display-content a,
.dropdown-container .dropdown-links.dropdown-links-light .dropdown-display-content a {
    color: var(--color-white);
}

.dropdown-container.dropdown-links.dropdown-links-light:after,
.tablet .dropdown-container.dropdown-links.dropdown-links-light:after,
.phone .dropdown-container.dropdown-links.dropdown-links-light:after,
.dropdown-container .dropdown-links.dropdown-links-light:after {
    color: var(--color-white);
}

/* Dropdown With no List Icons */
.dropdown-container.dropdown-without-list-icons > div.dropdown-list .fa,
.dropdown-container.dropdown-without-list-icons > div.dropdown-list [class*="osicons-v2"] {
    display: none;
}

/* Pre and Code tag fix to break the text */
pre code,
code {
    white-space: pre-wrap;
}


/* ===================================================================== */
/*  $4 - Page Layout                                                     */
/* ===================================================================== */
.layout {
    flex-direction: column;
}

.layout.no-padding-top .main {
    padding-top: 0;
}

.hidden {
    display: none;
}

.layout-top .content .ThemeGrid_Container {
    padding-bottom: 0;
    padding-top: 0;
}

.layout-top .content .header-wrapper > .ThemeGrid_Container {
    padding-top: var(--space-xl);
}

.layout-top .content .ThemeGrid_Container,
div.ThemeGrid_Container,
.ThemeGrid_Container {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.layout-top .content .ThemeGrid_Container.padding-x-none,
div.ThemeGrid_Container.padding-x-none,
.ThemeGrid_Container.padding-x-none {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 992px) {
    .layout-top .content .ThemeGrid_Container,
    div.ThemeGrid_Container,
    .ThemeGrid_Container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .layout-top .content .ThemeGrid_Container,
    div.ThemeGrid_Container,
    .ThemeGrid_Container {
        max-width: 1140px;
    }
}

/* List */
.list .list-item,
.desktop .list .list-item:hover:not(.list-item-selected),
.desktop .list .list-item:hover:not(.list-item-no-hover):not(.list-item-selected) {
    background-color: var(--color-transparent);
}

.list-item {
    border-bottom: 0;
    padding: var(--space-none);
}

.list.list--overflow-visible {
    overflow: visible;
}
 
/* ===================================================================== */
/*  $5 - Patterns - OutSystemsUI                                         */
/* ===================================================================== */

/* Breadcrumbs */
.phone .breadcrumbs {
    display: inline-block;
}

.breadcrumbs-item {
    color: var(--color-black);
    font-size: var(--font-size-s);
}

.breadcrumbs-item .icon {
    color: var(--color-black);
    font: inherit;
    margin: var(--space-none) var(--space-xs);
}

.breadcrumbs-item .icon:before {
    content: "/";
}

/* Card */
.card {
    background-color: var(--color-white);
    border: var(--border-size-s) solid var(--color-neutral-1);
    border-radius: var(--tk-component-border-radius-200);
    padding: var(--tk-component-padding);
}

.card-title {
    font-size: var(--font-size-xl);
}

.card-footer {
    border-top: 1px solid var(--color-neutral-0);
    padding: 15px 30px;
}

/* Card + Card Background */
.card .card-background {
        border: var(--border-size-none);
}

/* Tag */
.tag {
    font-size: var(--font-size-s);
    font-weight: var(--tk-font-weight-base);
    height: var(--space-m);
}

.tag-content {
    align-items: center;
    display: flex;
    font-size: var(--font-size-s);
}

.tag-content a,
.tag-content a:visited {
    color: var(--color-neutral-10);
}

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

.tag.tag-medium {
    height: 32px;
    padding: var(--space-none) var(--space-base);
}

/* Wizard */
.wizard-item-icon-wrapper {
    margin: var(--space-xs) var(--space-none);
}

.wizard-item-icon {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-2);
    color: var(--color-neutral-2);
    font-size: var(--font-size-m);
    font-weight: var(--tk-font-weight-l);
}

/* Wizard Past*/
.wizard-wrapper-item.past .wizard-item-icon {
    background-color: var(--color-white);
    border-color: var(--color-turquoise-dark);
    color: var(--color-turquoise-dark);
}

.wizard-wrapper-item.past .wizard-item-icon:empty {
    background-color: var(--color-turquoise-dark);
}

/* Wizard Active*/
.wizard-wrapper-item.active .wizard-item-icon {
    background-color: var(--color-turquoise-dark);
    border-color: var(--color-turquoise-dark);
    color: var(--color-white);
}

/*Wizard Next*/
.wizard-wrapper-item.next .wizard-item-label {
    opacity: .5;
}

/* Wizard Before*/
.wizard-wrapper-item.next .wizard-item-icon-wrapper:before {
    background-color: var(--color-neutral-2);
}

.wizard-wrapper-item.active .wizard-item-icon-wrapper:before {
    background-color: var(--color-turquoise-dark);
}

.wizard-wrapper-item .wizard-item-icon-wrapper:before {
    right: calc(50% + var(--space-m));
    transform: translateY(-50%);
    width: calc(100% - var(--space-xxl));
}

.wizard-wrapper-item.past .wizard-item-icon:empty {
    background-color: var(--color-turquoise-dark);
}

/* Wizard Vertical */
.wizard-wrapper.wizard-vertical [data-block*=WizardItem] .wizard-wrapper-item {
    align-items: flex-start;
    position: relative;
}

.wizard-wrapper.wizard-vertical .wizard-item-label {
    text-align: left;   
}

.wizard-wrapper.wizard-vertical .wizard-wrapper-item .wizard-item-icon-wrapper:before {
    display: none;
}

.wizard-wrapper.wizard-vertical .wizard-wrapper-item:before {
    background-color: var(--color-neutral-2);
    height: calc(100% - var(--space-base));
    top: calc(32px + var(--space-s));
    content: '';
    position: absolute;
    left: 15px;
    width: 2px;
}

.wizard-wrapper.wizard-vertical .wizard-wrapper-item.past:before {
    background-color: var(--color-turquoise-dark);
}

.wizard-wrapper.wizard-vertical .wizard-item-icon:empty {
    margin: 12px;
}

.wizard-wrapper.wizard-vertical [data-block*=WizardItem]:last-child .wizard-wrapper-item:before {
    display: none;
}

/* Table Records */
.TableRecords,
.EditableTable {
    border: var(--border-size-s) solid var(--color-neutral-1);
}

.TableRecords .TableRecords_Header,
.TableRecords .TableRecords_Header {
    border: 0;
    border-bottom: var(--border-size-s) solid var(--color-neutral-1);
}

.table,
.TableRecords .TableRecords_Header:first-child,
.TableRecords .TableRecords_Header:last-child {
    border-radius: var(--tk-component-border-radius-200);
}

.TableRecords .TableRecords_Header,
.EditableTable thead th {
    background-color: var(--background-transparent);
    border-bottom: var(--border-size-s) solid var(--color-neutral-1);
    color: var(--color-neutral-4);
    text-align: inherit;
}

.TableRecords .TableRecords_OddLine,
.TableRecords .TableRecords_EvenLine {
    background-color: var(--background-transparent);
    border-bottom: var(--border-size-s) solid var(--color-neutral-1);
}

.desktop .TableRecords tr:hover .TableRecords_OddLine,
.desktop .TableRecords tr:hover .TableRecords_EvenLine,
.table-row:hover td {
    background-color: var(--color-neutral-0);
}

.tablet .table-row:hover td,
.phone .table-row:hover td {
    background-color: var(--color-transparent);
}

.table {
    border-color: var(--color-neutral-1);
}

.phone .table:not(.table-no-responsive), 
.tablet .table:not(.table-no-responsive) {
    border-bottom: none;
}

.table-header {
    background-color: var(--color-neutral-1);
}

.table-header th {
    color: var(--color-neutral-8);
    font-size: var(--font-size-xs);
    font-weight: var(--tk-font-weight-l);
    padding: var(--space-s) var(--space-l) var(--space-s) var(--space-s);
    position: relative;
}

.table-header th:first-child {
    border-radius: var(--tk-component-border-radius-200) var(--border-radius-none) var(--border-radius-none) var(--border-radius-none);
}

.table-header th:last-child {
    border-radius: var(--border-radius-none) var(--tk-component-border-radius-200) var(--border-radius-none) var(--border-radius-none);
}

.table-header th.sorted {
    color: var(--color-neutral-6);
}

.table-header th.sorted .sortable-icon:before {
    border-bottom: var(--border-none);
}

.phone .table:not(.table-no-responsive) td:before, 
.tablet .table:not(.table-no-responsive) td:before {
    font-weight: var(--tk-font-weight-l);
}

.table-header th:last-child {
    border-right: none;
}

.table .sortable-icon {
    display: inline-block;
    font-family: osicons-v2 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: var(--tk-font-weight-s);
    position: absolute;
    speak: none;
    text-transform: none;
    vertical-align: baseline;
}

.desktop .table-header th.sortable:hover {
    color: var(--color-neutral-10);
}

.sortable-icon:before {
    border: none;
    content: var(--osicons-sort);
}

.desktop .table-header th.sortable:hover .sortable-icon:before {
    border: none;
}

.table .sortable-icon:after {
    display: none;
}

.phone .table:not(.table-no-responsive) .table-row, 
.tablet .table:not(.table-no-responsive) .table-row {
    border-color: var(--color-neutral-1);
}

.table-row td {
    background-color: var(--color-transparent);
    font-size: var(--font-size-s);
    height: calc( var(--space-xxl) + var(--space-s));
    padding: var(--space-s) var(--space-s);
}

.table-header th,
.table-row td {
    border-bottom: 1px solid var(--color-neutral-1);
    border-right: 1px solid var(--color-neutral-1);
}

.tablet .table-row td,
.phone .table-row td {
    border-right: var(--border-size-none);
}

.table-row td:last-child {
    border-right: none;
}

.tablet .table .table-row-stripping:nth-child(odd) td,
.phone .table .table-row-stripping:nth-child(odd) td,
.table-row-stripping:nth-child(odd) td {
    background-color: var(--color-neutral-0);
}

.table-header th,
.table-row-stripping:nth-child(even) td {
    background-color: var(--color-transparent);
}

.table-row-small td {
    height: var(--space-xxl);
    padding: var(--space-xs) var(--space-s);
}

.table-row-medium td  {
    height: calc(var(--space-xxl) + var(--space-base));
}

.phone .table:not(.table-no-responsive) .table-row-medium td, 
.tablet .table:not(.table-no-responsive) .table-row-medium td {
    padding: var(--space-base) var(--space-s);
}

.table .checkbox {
    margin: 0;
}

.table.font-size-xs td {
    font-size: var(--font-size-xs);
}

.table [data-checkbox], 
.table [data-checkbox]:before {
    box-sizing: border-box;
    height: 16px;
    width: 16px;
}

.tablet .table [data-checkbox]:before, 
.phone .table [data-checkbox]:before,
.tablet .table [data-checkbox], 
.phone .table [data-checkbox] {
    height: 24px;
    width: 24px;
}

.table [data-checkbox]:checked:after {
    border: none;
    display: flex;
    height: 100%;
    left: 50%;
    top: 50%;
    width: 100%;
}

.table .checkbox-intermediate:before {
    background-color: var(--color-turquoise-dark);
    border: var(--color-turquoise-dark);
}

.table .checkbox-intermediate:after, 
.table .checkbox-intermediate[data-checkbox]:checked:after {
    background-color: var(--color-white);
    content: "";
    height: 2px;
    width: 8px;
}

/* 6.8.12. Progress Bar */
.progress-bar {
    background-color: var(--color-neutral-1);
}

/* 6.8.13. Progress Circle */
.progress-circle {
    
}

.progress-circle svg {
    stroke-linecap: initial;
}

.progress-circle .progressbar-text {
    user-select: none;
    width: 100%;
    z-index: 1;
}

.progress-circle-outer[class*=font-size] .progress-circle-small .progressbar-text,
.progress-circle-outer[class*=heading] .progress-circle-small .progressbar-text,
.progress-circle-outer[class*=font-size] .progress-circle-medium .progressbar-text,
.progress-circle-outer[class*=heading] .progress-circle-medium .progressbar-text,
.progress-circle-outer[class*=font-size] .progress-circle-large .progressbar-text,
.progress-circle-outer[class*=heading] .progress-circle-large .progressbar-text {
    font-size: inherit;
}

.progress-circle-outer:not([class*=font-size]):not([class*=heading]) .progress-circle-medium .progressbar-text {
    font-size: var(--font-size-h3);
}

.progress-circle-outer .progress-circle-large .progressbar-text {
    font-size: var(--font-size-display);
}

.progress-circle-outer:not([class*=font-size]):not([class*=heading]) .progress-circle-small .progressbar-text {
    font-size: var(--font-size-h4);
}

.progress-circle-outer:not([class*=font-size]):not([class*=heading]) .progress-circle-medium .progressbar-text {
    font-size: var(--font-size-h3);
}

.progress-circle-outer:not([class*=font-size]):not([class*=heading]) .progress-circle-large .progressbar-text {
    font-size: var(--font-size-display);
}

/* Pagination Component */
.pagination-button {
    background-color: var(--color-transparent);
    border: var(--border-size-m) solid var(--color-transparent);
    color: var(--color-turquoise-dark);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--tk-font-weight-btn);
    height: 28px;
    min-width: 26px;
    padding: var(--space-none) var(--space-s);
    user-select: none;
    width: auto;
}   

.pagination-button .fa {
    display: inline-block;
    font-family: osicons-v2 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: var(--tk-font-weight-s);
    speak: none;
    text-transform: none;
    vertical-align: baseline;
}

.pagination-previous > i:before {
    content: var(--osicons-arrow-left);
}

.pagination-next > i:before {
    content: var(--osicons-arrow-right);
}

/* Pagination Active */
.pagination-button.is--active {
    border: var(--border-size-m) solid var(--color-black);
    border-radius: var(--tk-component-border-radius-200);
    color: var(--color-black);
}

/* Pagination Button Disabled */
.pagination-button[disabled] {
    color: var(--color-neutral-2);
    opacity: 1;
}

/* Pagination Button Hover */
.desktop .pagination-button:not(.is--ellipsis):hover,
.pagination-button:not(.is--ellipsis):hover {
    background-color: var(--transparent);
    border: var(--border-size-m) solid var(--color-transparent);
    text-decoration: underline;
}

/* Pagination Next Button */
.pagination-container > .pagination-button:last-child {
    font-size: var(--font-size-xl);
    padding: var(--space-none);
}

/* Pagination Previous Button */
.pagination-container > .pagination-button:first-child {
    font-size: var(--font-size-xl);
    padding: var(--space-none) var(--space-none) var(--space-none) var(--space-s);
}

/* Pagination Next & Previous Button Hover */
.pagination-container > .pagination-button:last-child:hover,
.pagination-container > .pagination-button:first-child:hover {
    color: var(--color-turquoise);
}

/* Pagination Mobile Pagination */
.tablet .pagination-button,
.phone .pagination-button {
    font-size: var(--font-size-s);
    height: 28px;
}

 /* Pagination Ellispis width adjusment */
.pagination-button.is--ellipsis {
    padding: var(--space-none)
}

/* Timeline */
.timeline-item-separator {
    background-color: var(--color-neutral-2);
    width: 2px;
}

/* Carousel */

.osui-carousel.splide .splide__arrow {    
  background-color: rgba(255, 255, 255, 0.5);
  border-radius:var(--border-radius-circle);
  box-shadow: none;
  color: var(--color-neutral-4);
  font-size:var(--font-size-h4);
  height: 32px;
  opacity:1;
  top:50%;
  transform:translateY(-25px);
  transition: var(--tk-transition-base);
  width: 32px;
  z-index: var(--layer-local-tier-2);
}

.osui-carousel.splide .splide__arrow--next {
    right: 24px;
}

.osui-carousel.splide .splide__arrow--prev {
    left: 24px;
}

.osui-carousel.splide .splide__arrow:disabled { 
    opacity: 0;
    pointer-events: none;
}

.osui-carousel.splide .splide__arrow svg path {
    fill: var(--color-neutral-4);
    transition: var(--tk-transition-base);
}

.osui-carousel.splide .splide__arrow:hover svg path {
    fill: var(--color-neutral-9);
}

.osui-carousel__track.splide__track {
    padding-bottom: var(--space-base);
}

.osui-carousel.splide .splide__pagination .splide__pagination__page {
    background-color: var(--color-neutral-1);
    margin: 0 var(--space-xs);
    opacity: 1;
    transition: var(--tk-transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .osui-carousel.splide .splide__pagination .splide__pagination__page:hover {
        background-color: var(--color-neutral-3);
        opacity: 1;
    } 
}

.osui-carousel.splide .splide__pagination .splide__pagination__page.is-active,
.osui-carousel.splide .splide__pagination .splide__pagination__page.is-active:hover {
    background-color: var(--color-neutral-9);
    opacity: 1;
    transform: scale(1);
}

.osui-carousel.splide .splide__pagination .splide__pagination__page.disabled {
  display:none;
}

/* Carousel Deprecated */
.carousel .carousel-navigation {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
    color: var(--color-neutral-4);
    height: 32px;
    transition: var(--tk-transition-base);
    width: 32px;
}

.carousel .carousel-navigation:hover {
    color: var(--color-neutral-9);
}   

.carousel .carousel-navigation.disabled {
    opacity: 0;
    pointer-events: none;
}

.carousel .carousel-dots-container .carousel-dot.active,
.carousel .carousel-dots-container .carousel-dot.active:hover {
    background-color: var(--color-neutral-9);
}

.carousel .carousel-dots-container .carousel-dot {
    background-color: var(--color-neutral-1);
    transition: var(--tk-transition-base);
}

.carousel .carousel-dots-container .carousel-dot:hover {
    background-color: var(--color-neutral-3);
}

.carousel .carousel-navigation.carousel-navigation-right .icon,
.carousel .carousel-navigation.carousel-navigation-left .icon  {
    font-family: osicons-v2 !important;
    font-size: var(--font-size-base);
}

.carousel .carousel-navigation.carousel-navigation-right .fa:before {
    content: var(--osicons-arrow-right);
    padding-left: 3px; /* fix visual to align icon */
}

.carousel .carousel-navigation.carousel-navigation-left .fa:before {
    content: var(--osicons-arrow-left);
}

/* Input With Icon */
.input-with-icon .input-with-icon-content-icon,
.ie11 .input-with-icon .input-with-icon-content-icon {
    background-color: transparent;
}

/* Select2 */
.choices__inner {
    background-color: var(--color-white);
    border: var(--tk-input-border);
    border-radius: var(--tk-component-border-radius-200);
    color: var(--color-neutral-8);
    font-size: var(--font-size-base);
    font-weight: var(--tk-font-weight-base);
    line-height: 1.5;
    padding: var(--space-s) 0 var(--space-s) var(--space-base);
}

.choices.is-disabled .choices__inner {
    background-color: var(--color-neutral-1);
    border: var(--tk-input-border);
    border-color: var(--color-neutral-2);
}

.choices__inner:hover {
    border-color: var(--color-neutral-4);
}

.choices.is-focused .choices__inner,
.choices.is-open.is-focused .choices__inner {
    border: var(--tk-input-border-width) solid var(--color-neutral-6);
    border-radius: var(--tk-component-border-radius-200);
}

.choices[data-type*="select-one"].is-open:after {
    color: var(--color-neutral-8);
}

.choices__list--dropdown {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-6);
    border-width: var(--tk-input-border-width);
    box-shadow: none;
}

.choices__list--dropdown .choices__item {
    font-size: var(--font-size-s);
}

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

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

.search--wrapper input {
    border-color: var(--color-neutral-1);
}

/* ========  CSS to 2.8 version. To be deleted - START  ========== */
/* Calendar - Date Picker */
.calendar-help,
.calendar-help-dialog,
.calendar-help-dialog.is--open {
    display: none;
}

.calendar.week-numbers .is-inrange:before,
.is-inrange:last-child:before {
    right: 0;
}

.calendar.week-numbers .pika-row td:nth-of-type(2):before,
.is-inrange:first-child:before {
    left: 0;
}

.calendar.week-numbers .pika-table thead {
    padding: var(--space-xs) var(--space-m) var(--space-none);
}

.calendar.week-numbers .pika-table thead th:first-of-type {
    display: none;
}

.is-inrange:before {
    background: var(--color-success-lighter);
    border-radius: 0;
}

.is-inrange .pika-button,
.is-inrange:hover .pika-button {
    background: var(--color-success-lighter);
    color: var(--color-neutral-8);
}

.is-outside-current-month .pika-button {
    color: var(--color-neutral-4);
}

.is-today:not(.is-selected) .pika-button {
    background-color: transparent;
    border: var(--border-size-s) solid var(--color-neutral-6);
}

.is-selected.is-endrange .pika-button,
.is-selected.is-endrange:hover .pika-button,
.is-endrange .pika-button,
.is-endrange:hover .pika-button,
.is-selected .pika-button,
.is-selected:hover .pika-button,
.is-startrange .pika-button,
.is-startrange:hover .pika-button,
.is-today.is-endrange .pika-button,
.is-today.is-startrange .pika-button,
.is-today:not(.is-selected):hover.is-endrange .pika-button,
.is-today:not(.is-selected):hover.is-startrange .pika-button,
.is-today.is-inrange.is-endrange:hover .pika-button {
    background: var(--color-turquoise-dark);
    color: var(--color-white);
    font-weight: var(--tk-font-weight-l);
}

.is-today:not(.is-selected):hover .pika-button,
.pika-button:hover {
    background-color: var(--color-turquoise);
    color: var(--color-white);
    transition: all 300ms ease;
}

.pika-button {
    border-radius: var(--tk-component-border-radius-200);
    color: var(--color-neutral-8);
    font-size: var(--font-size-s);
    font-weight: var(--tk-font-weight-base);
    height: 40px;
    line-height: 1.5;
    width: 40px;
}

.pika-button .pika-go-today {
    color: var(--color-neutral-7);
    font-size: var(--font-size-s);
}

.pika-go-today.btn {
    border: var(--border-size-none);
    padding: var(--space-none);
}

.pika-go-today.btn:after {
    border: var(--border-size-none);
}

.pika-label {
    margin: 0;
}

.pika-label, 
.pika-label:hover,
.pika-time-container {
    color: var(--color-neutral-6);
    text-decoration: none;
}

.pika-labels {
    display: flex;
    font-size: var(--font-size-base);
    justify-content: space-around;
    order: 2;
    transition: all 200ms ease;
}

.pika-lendar abbr {
    color: var(--color-neutral-4);
}

.pika-next, 
.pika-prev {
    color: var(--color-turquoise-dark);
    font-family: osicons-v2;
    padding: var(--space-s);
}

.pika-next {
    margin-left: var(--space-none);
    order: 4;
}

.pika-next:before {
    content: var(--osicons-arrow-right);
    font-size: var(--font-size-xs);
}

.pika-prev {
    margin-right: var(--space-none);
    order: 1;
}

.pika-prev:before {
    content: var(--osicons-arrow-left);
    font-size: var(--font-size-xs);
}

.pika-select-hour {
    text-align: right;
}

.pika-single {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-6);
    border-radius: var(--tk-component-border-radius-200);
    box-shadow: none;
    max-width: 352px;
}

.pika-table {
    padding: var(--space-none) var(--space-m) var(--space-m);
}

.pika-table th {
    align-items: center;
    display: flex;
    font-size: var(--font-size-s);
    font-weight: var(--tk-font-weight-base);
    height: 40px;
    justify-content: center;
    width: 40px;
}

.pika-table th button {
    font-weight: var(--tk-font-weight-base);
}

.pika-table thead {
    padding: var(--space-xs) var(--space-none);
}

.pika-time-container {
    margin-right: var(--space-none);
}

.pika-time-container:hover {
    background-color: transparent;
    color: var(--color-neutral-6);
}

.pika-title select {
    color: var(--color-neutral-6);
    font-size: var(--font-size-s);
    line-height: 1.5;
    transition: all 200ms ease;
}

.desktop .pika-select-month,
.tablet .pika-select-month {
    min-width: 125px;
}

.desktop .pika-title .pika-select-month,
.desktop .pika-title .pika-select-year,
.tablet .pika-title .pika-select-month,
.tablet .pika-title .pika-select-year {
    padding: 0 var(--space-base);
    transform: translateX(calc(var(--space-base) * -1));
    width: calc(100% + (3 * var(--space-base)));
}

.pika-time-container select {
    cursor: pointer;
    text-align: center;
}

.desktop .pika-time-container select {
    min-width: 45px;
}

.safari.desktop .pika-time-container select {
    min-width: auto;
}

.pika-title option[selected],
.pika-title option:hover {
    background-color: var(--color-neutral-0);
    cursor: pointer;
}

.pika-today-container {
    cursor: pointer;
    font-size: var(--font-size-s);
    transition: all 300ms ease;
}

.pika-today-container:hover.pika-button {
    background-color: transparent;
    color: var(--color-blue);
}

.pika-today-container.pika-button {
    height: auto;
    margin: auto;
    padding: var(--space-none) var(--space-none) var(--space-m);
}

.pika-week {
    color: var(--color-neutral-4);
    font-size: var(--font-size-s);
}

.pika-button.pika-year {
    display: block; /*tablet bug*/
}

.phone .calendar .pika-table th {
    width: auto;
}

.tablet .calendar tr {
    border-bottom: none;
}
/* ========  CSS to 2.8 version. To be deleted - END  ========== */

/* Calendar - Date Picker */
.flatpickr-calendar {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-6);
    border-radius: var(--border-radius-none);
    max-width: 352px;
    width: auto;
}

.flatpickr-calendar.open,
.flatpickr-calendar.static.open {
    z-index: 3;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    display: none;
}

.flatpickr-calendar.osui-datepicker-calendar.date-picker--fixed {
    position: fixed;
}

.flatpickr-calendar.osui-datepicker-calendar.arrowBottom {
    margin-top: -4px;
}

.flatpickr-calendar.inside-sidebar,
.flatpickr-calendar.open.inside-sidebar  {
    z-index: 500;
}

.flatpickr-months {
    display: flex;
    justify-content: space-between;
    padding: var(--space-m) var(--space-l) var(--space-base);
}

.flatpickr-current-month .numInputWrapper {
    order: 3;
}

.flatpickr-current-month .numInputWrapper:hover,
.flatpickr-current-month .numInputWrapper:focus,
.flatpickr-current-month .numInputWrapper .numInput:hover,
.flatpickr-current-month .numInputWrapper .numInput:focus {
    background-color: transparent;
}

.flatpickr-current-month .numInputWrapper input {
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
}

.flatpickr-calendar .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--color-neutral-8);
}
.flatpickr-calendar .numInputWrapper span.arrowDown:after {
    border-top-color: var(--color-neutral-8);
}

.flatpickr-current-month {
    color: var(--color-neutral-6);
    font-size: var(--font-size-base);
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: var(--font-medium);
    line-height: 1.5;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:hover {
    background-color: transparent;
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
    stroke: var(--color-turquoise-dark);
}

.flatpickr-weekdays {
    height: auto;
    margin-bottom: var(--space-s);
    padding: var(--space-xs) var(--space-none);
}

span.flatpickr-weekday {
    align-items: center;
    color: var(--color-neutral-4);
    display: flex;
    font-weight: var(--font-medium);
    justify-content: center;
    height: 40px;
    width: 40px;
}

.flatpickr-weekwrapper .flatpickr-weekday {
    margin-bottom: var(--space-base);
}

.flatpickr-innerContainer {
    padding: var(--space-none) var(--space-m) var(--space-m);
}

.flatpickr-day {
    align-items: center;
    border-radius: var(--border-radius-none);
    color: var(--color-neutral-8);
    display: flex;
    font-weight: var(--font-medium);
    height: 40px;
    margin-bottom: var(--space-xs);
    max-width: auto;
    width: 40px;
}

.flatpickr-calendar.hasWeeks .flatpickr-weekwrapper .flatpickr-weeks .flatpickr-day {
    color: var(--color-neutral-4);
}

.flatpickr-calendar.hasWeeks .flatpickr-weekwrapper .flatpickr-weeks {
    -webkit-box-shadow: 0 0 0;
    box-shadow: 0 0 0;
}

.flatpickr-calendar.hasWeeks span.flatpickr-day {
    max-width: 40px;
}

.flatpickr-day.selected:hover, 
.flatpickr-day.selected:focus,
.flatpickr-day:hover, 
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover, 
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:hover, 
.flatpickr-day.nextMonthDay:focus  {
    background-color: var(--color-turquoise);
    border: var(--border-size-none);
    color: var(--color-white);
    transition: all 300ms ease;
}

.flatpickr-day.selected {
    background: var(--color-turquoise-dark);
    border: var(--border-size-none);
    color: var(--color-white);
    font-weight: var(--font-bold);
}

.flatpickr-day.today, 
.flatpickr-day.today.selected:hover,
.flatpickr-day.today.selected:focus {
    border: var(--border-size-s) solid var(--color-neutral-6);
}

.flatpickr-day.today.selected {
    border: var(--border-size-none);
}

.flatpickr-day.today:hover, 
.flatpickr-day.today:focus {
    background-color: var(--color-turquoise);
    color: var(--color-white);
}

.flatpickr-day.prevMonthDay, 
.flatpickr-day.nextMonthDay {
    color: var(--color-neutral-4);
    font-weight: var(--font-medium);
}

.flatpickr-day.prevMonthDay.flatpickr-disabled:hover, 
.flatpickr-day.nextMonthDay.flatpickr-disabled:hover  {
    background-color: var(--color-white);
}

.flatpickr-day.flatpickr-disabled, 
.flatpickr-day.prevMonthDay.flatpickr-disabled,
.flatpickr-day.nextMonthDay.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay.flatpickr-disabled:hover,
.flatpickr-day.nextMonthDay.flatpickr-disabled:hover {
    color: var(--color-neutral-7);
    pointer-events: none;
    text-decoration: line-through;
}

.flatpickr-today-button {
    padding: var(--space-none) var(--space-base) var(--space-l);
}

.flatpickr-today-button a {
    color: var(--color-neutral-7);
    font-size: var(--font-size-s);
    font-weight: var(--font-bold);
}

.flatpickr-time input.flatpickr-hour {
    font-weight: var(--font-medium);
}

.flatpickr-time.time24hr .numInputWrapper {
    width: 20%;
}

.numInputWrapper:hover {
    background-color: transparent;
}

.flatpickr-time input {
    color: var(--color-neutral-8);
}

.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
    font-weight: var(--font-medium);
}

.osui-datepicker.input-small .form-control[data-input] {
    font-size: var(--fm-input-font-s, var(--font-size-s));
    height: var(--fm-input-height-s, var(--space-l));
}

.flatpickr-calendar.input-small {
    height: auto;
}

.osui-datepicker.input-large .form-control[data-input] {
    font-size: var(--fm-input-font-l, var(--font-size-l));
    height: var(--fm-input-height-l, var(--space-xxl));
}

.osui-datepicker input.flatpickr-input[disabled] + input {
    background-color: var(--color-neutral-1);
    border: var(--tk-input-border-width) solid var(--color-neutral-2);
    color: var(--color-neutral-4);
}  

.flatpickr-calendar:not(hasWeeks) {
    width: fit-content;
}

.flatpickr-calendar:not(hasWeeks) .flatpickr-weekdays,
.flatpickr-calendar:not(hasWeeks) .dayContainer {
    width: 280px;
}   

.flatpickr-calendar:not(hasWeeks) .flatpickr-weekdays .flatpickr-weekdaycontainer {
    flex: 0;
}

.flatpickr-calendar:not(hasWeeks) .dayContainer {
    justify-content: normal;
}

.flatpickr-calendar:not(hasWeeks) .flatpickr-day {
    max-width: 40px;
}

/* Date-Picker-Range*/
.flatpickr-day.startRange,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.startRange.inRange,
.flatpickr-day.startRange:focus,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.endRange.inRange,
.flatpickr-day.endRange:focus,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.inRange,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected.inRange.prevMonthDay,
.flatpickr-day.selected.inRange.nextMonthDay,
.flatpickr-day.selected.inRange.nextMonthDay:hover,
.flatpickr-day.selected.inRange.nextMonthDay:focus,
.flatpickr-day.selected.inRange.prevMonthDay:hover,
.flatpickr-day.selected.inRange.prevMonthDay:focus {
    background-color: var(--color-turquoise-dark);
    border: var(--border-size-none);
    color: var(--color-white);
    font-weight: var(--font-bold);
}

.flatpickr-day.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.prevMonthDay.today.inRange {
    background-color: var(--color-success-lighter);
    border: var(--border-size-none);
}

.flatpickr-day.today.inRange {
    background-color: var(--color-success-lighter);
    border: var(--border-size-s) solid var(--color-neutral-6);
}

.flatpickr-day.today.inRange:hover {
    background-color: var(--color-turquoise);
    border: var(--border-size-s) solid var(--color-neutral-6);
    color: var(--color-white);
}

.flatpickr-day.selected.startRange, 
.flatpickr-day.startRange.startRange, 
.flatpickr-day.endRange.startRange,
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange,
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
    border-radius: var(--border-radius-none);
}

.flatpickr-day.inRange:hover,
.flatpickr-day.inRange:focus {
    background-color: var(--color-success-lighter);
    color: var(--color-neutral-8);
}

.flatpickr-day.inRange.nextMonthDay:hover,
.flatpickr-day.inRange.nextMonthDay:focus,
.flatpickr-day.inRange.prevMonthDay:hover,
.flatpickr-day.inRange.prevMonthDay:focus {
    background-color: var(--color-success-lighter);
    color: var(--color-neutral-4);
}

.flatpickr-day.selected.startRange:before,
.flatpickr-day.startRange.startRange:before,
.flatpickr-day.endRange.startRange:before,
.flatpickr-day.selected.endRange:before,
.flatpickr-day.startRange.endRange:before,
.flatpickr-day.endRange.endRange:before,
.flatpickr-day.inRange:before {
    background-color: var(--color-success-lighter);
}

.rangeMode .flatpickr-day {
    margin-top: 0;
}

/* Time Picker */
.osui-timepicker__dropdown.hasTime.noCalendar .flatpickr-time .numInputWrapper {
    width: var(--space-xxl);
}

.osui-timepicker__dropdown .flatpickr-time .numInputWrapper .numInput {
    font-weight: var(--font-medium);
}

.osui-timepicker__dropdown.hasTime.noCalendar .flatpickr-time .flatpickr-am-pm {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-soft);
    height: 18px;
    line-height: 16px;
    text-transform: lowercase;
    width: 40px;
}

.osui-timepicker input.flatpickr-input[disabled] + input {
    background-color: var(--color-neutral-1);
    border: var(--tk-input-border-width) solid var(--color-neutral-2);
    color: var(--color-neutral-4)
}

.osui-timepicker.input-small .form-control[data-input] {
    font-size: var(--fm-input-font-s, var(--font-size-s));
    height: var(--fm-input-height-s, var(--space-l));
}

.osui-timepicker.input-large .form-control[data-input] {
    font-size: var(--fm-input-font-l, var(--font-size-l));
    height: var(--fm-input-height-l, var(--space-xxl));
}

.flatpickr-calendar.osui-timepicker__dropdown.arrowBottom {
    margin-top: -4px;
}

.flatpickr-calendar.hasTime,
.flatpickr-calendar.hasTime:not(.inline) {
    position: absolute;
}

/* Month Picker */
.flatpickr-monthSelect-months .flatpickr-monthSelect-month {
    border-radius: var(--border-radius-none);
    color: var(--color-neutral-8);
    font-weight: var(--font-medium);
}

.osui-monthpicker__dropdown .flatpickr-months {
    padding-bottom: var(--space-base);
}

.flatpickr-monthSelect-months .flatpickr-monthSelect-month:hover,
.flatpickr-monthSelect-months .flatpickr-monthSelect-month:focus,
.flatpickr-monthSelect-months .flatpickr-monthSelect-month.today:not(.selected):not(.flatpickr-disabled):hover,
.flatpickr-monthSelect-months .flatpickr-monthSelect-month.today:not(.selected):not(.flatpickr-disabled):focus {
    background-color: var(--color-turquoise);
    color: var(--color-white);
    transition: var(--tk-transition-base);
}

.flatpickr-monthSelect-months .flatpickr-monthSelect-month.selected {
    background: var(--color-turquoise-dark);
    border: var(--border-size-none);
    color: var(--color-white);
    font-weight: var(--font-bold);
}

.flatpickr-monthSelect-months .flatpickr-monthSelect-month.flatpickr-disabled {
    color: var(--color-neutral-4);
}

.flatpickr-monthSelect-months .flatpickr-monthSelect-month.flatpickr-disabled:hover {
    color: var(--color-neutral-5);
}

.flatpickr-calendar:before,
.flatpickr-calendar:after {
    content: none;
}

.osui-monthpicker.input-small .form-control[data-input] {
    font-size: var(--fm-input-font-s, var(--font-size-s));
    height: var(--fm-input-height-s, var(--space-l));
}

.osui-monthpicker.input-large .form-control[data-input] {
    font-size: var(--fm-input-font-l, var(--font-size-l));
    height: var(--fm-input-height-l, var(--space-xxl));
}

.osui-monthpicker input.flatpickr-input[disabled] + input {
    background-color: var(--color-neutral-1);
    border: var(--tk-input-border-width) solid var(--color-neutral-2);
    color: var(--color-neutral-4);
}  

.flatpickr-calendar.osui-monthpicker__dropdown.arrowBottom {
    margin-top: -4px;
}

/* Fix for flatpickrs within OSUI sidebar */
.osui-sidebar.osui-sidebar-absolute-fix {
    height: calc(100% + var(--header-size));
    position: absolute;
    top: calc(var(--header-size)* -1);
}

/* Range Slider */
.osui-range-slider .osui-range-slider__provider[disabled=true] {
    background-color: var(--color-neutral-6);
}

.osui-range-slider .osui-range-slider__provider[disabled] {
    pointer-events: none;
}

.osui-range-slider .osui-range-slider__provider[disabled].noUi-target {
    background-color: var(--color-neutral-2);
}

.osui-range-slider .osui-range-slider__provider[disabled] .noUi-connect,
.osui-range-slider .osui-range-slider__provider[disabled] .noUi-marker-large {
    background-color: var(--color-neutral-5);
}

.osui-range-slider .osui-range-slider__provider[disabled] .noUi-handle {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.osui-range-slider .osui-range-slider__provider[disabled] .noUi-handle:before,
.osui-range-slider .osui-range-slider__provider[disabled] .noUi-handle:after {
    border-color: var(--color-neutral-8);
}

.osui-range-slider .osui-range-slider__provider[disabled] .noUi-pips,
.osui-range-slider .osui-range-slider__provider[disabled] .noUi-tooltip {
    color: var(--color-neutral-4);
}

/* Feedback Messages */
div.feedback-message-error,
div.feedback-message-info,
div.feedback-message-success,
div.feedback-message-warning {
    color: var(--color-neutral-10);
}

div.feedback-message-error {
    background-color: var(--color-error-lighter);
    border: var(--border-size-s) solid var(--color-error-light);
}

div.feedback-message-info {
    background-color: var(--color-info-lighter);
    border: var(--border-size-s) solid var(--color-info-light);
}

div.feedback-message-success {
    background-color: var(--color-success-lighter);
    border: var(--border-size-s) solid var(--color-success-light);
}

div.feedback-message-warning {
    background-color: var(--color-warning-lighter);
    border: var(--border-size-s) solid var(--color-warning-light);
}

div.feedback-message-error i {
    color: var(--color-error);
}

div.feedback-message-info i {
    color: var(--color-info);
}

div.feedback-message-success i {
    color: var(--color-success);
}

div.feedback-message-warning i {
    color: var(--color-warning);
}

div.feedback-message-error i:before,
div.feedback-message-info i:before,
div.feedback-message-success i:before,
div.feedback-message-warning i:before {
    font-family: 'osicons-v2';
}

div.feedback-message-error i:before {
    content: var(--osicons-error);
}

div.feedback-message-info i:before {
    content: var(--osicons-info);
}

div.feedback-message-success i:before {
    content: var(--osicons-validated);
}

div.feedback-message-warning i:before {
    content: var(--osicons-warning);
}

.feedback-message {
    border-radius: var(--tk-component-border-radius-200);
    box-shadow: none;
    font-size: var(--font-size-l);
    font-weight: var(--font-medium);
    max-width: 1136px;
    min-width: 318px;
    width: fit-content;
}

.feedback-message i {
    font-size: var(--font-size-l);
    margin-top: 3px;
}

.phone .feedback-message {
    border-radius: var(--tk-component-border-radius-200);
    left: calc(50% - var(--space-s));
    margin: var(--space-s) var(--space-s) var(--space-none) var(--space-s);
    min-width: calc(100vw - var(--space-base));
}

.phone .feedback-message,
.phone .feedback-message i {
    font-size: var(--font-size-s);
}

.tablet .feedback-message {
    left: calc(50% - var(--space-s));
    margin: var(--space-s) var(--space-s) var(--space-none) var(--space-s);
}

/* Alert */
.alert {
    border-radius: var(--tk-component-border-radius-200);
    color: var(--color-neutral-8);
    padding: var(--tk-component-padding-s);
    width: fit-content;
}

.alert .alert-icon .fa{
    font-family: 'osicons-v2';
    font-size: var(--font-size-base);
    line-height: 1;
}

.alert-error {
    background-color: var(--color-error-lighter);
    border: var(--border-size-s) solid var(--color-error-light);
}

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

.alert-error .alert-icon .fa:before {
    content: var(--osicons-error);
}

.alert-icon {
    margin-top: 3px;
}

.alert-info {
    background-color: var(--color-info-lighter);
    border: var(--border-size-s) solid var(--color-info-light);
}

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

.alert-info .alert-icon .fa:before {
    content: var(--osicons-info);
}

.alert-success {
    background-color: var(--color-success-lighter);
    border: var(--border-size-s) solid var(--color-success-light);
}

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

.alert-success .alert-icon .fa:before {
    content: var(--osicons-validated);
}

.alert-warning {
    background-color: var(--color-warning-lighter);
    border: var(--border-size-s) solid var(--color-warning-light);
}

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

.alert-warning .alert-icon .fa:before {
    content: var(--osicons-warning);
}

/* ========  CSS to 2.8 version. To be deleted - START  ========== */
/* Accordion */
.accordion {
    position: relative;
}

.accordion .section-expandable:after {
    background-color: var(--color-neutral-8);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
}

.accordion [data-block*=AccordionItem]:last-child .section-expandable:after {
    display: none;
}

[data-block*=AccordionItem]:first-of-type .section-expandable,
[data-block*=AccordionItem]:last-of-type .section-expandable {
    border-radius: var(--border-radius-none);
}

.section-expandable {
    background-color: var(--color-white);
    border: none;
}

.section-expandable.is--open {
    border-top: none;
}

.section-expandable .section-expandable-icon {
    color: var(--color-neutral-8);
    font-family: osicons;
    font-size: var(--font-size-s);
    user-select: none;
    -webkit-user-select: none;
}

.section-expandable .section-expandable-icon:after {
    content: var(--osicons-arrow-down);
    font-family: 'osicons-v2';
}

.section-expandable .section-expandable-title {
    align-items: center;
    color: var(--tk-content-title-color);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-m);
    font-weight: var(--tk-font-weight-l);
    line-height: 1.5;
    min-height: 56px;
    padding: var(--space-base) var(--space-m);
}

.section-expandable.is--open .section-expandable-title {
    font-weight: var(--tk-font-weight-l); /* fix ui */
}

.section-expandable .section-expandable-content {
    color: var(--tk-accordion-text-color);
    font-size: var(--font-size-m);
    padding: var(--space-none) var(--tk-component-padding-x);
}

.section-expandable .section-expandable-content.is--expanded {
    padding: var(--space-s) var(--space-m) var(--space-l);
}

.section-expandable-title .dividers {
    align-items: center;
    display: flex;
    padding-right: var(--space-base);
}

.section-expandable-title .icon,
.section-expandable-title [class*="osicons-v2"] {
    margin-right: var(--space-base);
}

.phone .section-expandable .section-expandable-title {
    font-size: var(--font-size-m);
}

/* Accordion Disabled */
.section-expandable.is--disabled {
    color: var(--tk-content-title-color);
    opacity: 30%;
}

.section-expandable.is--disabled .section-expandable-icon {
    color: var(--color-neutral-8);
}

/* Accordion Sizes */
.accordion-l .section-expandable .section-expandable-content {
    font-size: var(--font-size-l);
}

.accordion-l .section-expandable .section-expandable-title {
    font-size: var(--font-size-l);
    min-height: 64px;
}

.accordion-s .section-expandable .section-expandable-content {
    font-size: var(--font-size-s);
}

.accordion-s .section-expandable .section-expandable-title {
    font-size: var(--font-size-s);
    min-height: 53px;
}

/* Accordion with link */
.accordion .section-expandable-title a {
    font-weight: var(--font-medium);
}

/* Accordion with icon */
.accordion .section-expandable-title i {
    font-size: var(--font-size-l);
}

.accordion.accordion-l .section-expandable-title i {
    font-size: var(--font-size-xl);
}

.accordion.accordion-s .section-expandable-title i {
    font-size: var(--font-size-m);
}

.simple-accordion.section-expandable {
    background-color: var(--color-transparent);
    border: var(--border-radius-none);
}

.simple-accordion .section-expandable-title {
    padding: var(--space-base) var(--space-none);
}

.simple-accordion .section-expandable-title .dividers {
    width: fit-content;
}

.simple-accordion.section-expandable .section-expandable-content.is--expanded,
.simple-accordion.section-expandable .section-expandable-content.is--collapsed {
    padding: var(--space-none);
}

/* ========  CSS to 2.8 version. To be deleted - END  ========== */

/* Accordion */
.osui-accordion-item {
    background-color: var(--color-white);
    border: var(--border-size-none);
    border-radius: var(--border-radius-none);
}

.osui-accordion-item:after  {
    background-color: var(--color-neutral-8);
    border: var(--border-size-none);
    border-radius: var(--border-radius-none);
    bottom: 0;
    content: "";
    height: 1px;
    opacity: 1;
    position: absolute;
    pointer-events: none;
    top: auto;
    width: 100%;
}

.osui-accordion .osui-accordion-item:after {
    border-radius: var(--border-radius-none);
}

.osui-accordion-item--is-open:after {
    border: var(--border-size-none);
}

.osui-accordion :first-child:not(.list) > .osui-accordion-item:after,
.osui-accordion .list :first-child > .osui-accordion-item:after {
    border-radius: var(--border-radius-none);
}

.osui-accordion :first-child:not(.list) > .osui-accordion-item,
.osui-accordion .list :first-child > .osui-accordion-item {
    border-radius: var(--border-radius-none);
}

.osui-accordion-item__title {
    color: var(--tk-content-title-color);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-m);
    font-weight: var(--tk-font-weight-l);
    line-height: 1.5;
    min-height: 56px;
    padding: var(--space-base) var(--space-m);
}

.osui-accordion-item__title__placeholder {
    align-items: center;
    display: flex;
    gap: var(--space-base);
}

.osui-accordion-item--is-open > .osui-accordion-item__title {
    font-weight: var(--tk-font-weight-l);
}

.osui-accordion-item__icon--caret:after {
    color: var(--color-neutral-8);
    content: var(--osicons-arrow-down);
    font-family: "osicons-v2";
    font-size: var(--font-size-s);
}

.osui-accordion-item__content {
    color: var(--color-neutral-9);
    font-size: var(--font-size-m);
    padding: var(--space-none) var(--tk-component-padding-x);
}

.osui-accordion-item__content--is-expanded {
    padding: var(--space-none) var(--space-m) var(--space-l);
}

/* Accordion with link */
.osui-accordion-item__title a {
    font-weight: var(--font-medium);
}

/* Accordion Disabled */
.osui-accordion-item--is-disabled {
    color: var(--tk-content-title-color);
    opacity: 0.3;
}

/* Accordion Sizes */
.osui-accordion .accordion-l .osui-accordion-item__content {
    font-size: var(--font-size-l);
}

.osui-accordion .accordion-l .osui-accordion-item__title {
    font-size: var(--font-size-l);
    min-height: 64px;
}

.osui-accordion .accordion-s .osui-accordion-item__content {
    font-size: var(--font-size-s);
}

.osui-accordion .accordion-s .osui-accordion-item__title {
    font-size: var(--font-size-s);
    min-height: 53px;
}

/* Accordion with icon */
.osui-accordion .osui-accordion-item__title i {
    font-size: var(--font-size-l);
}

.osui-accordion .accordion-l .osui-accordion-item__title i {
    font-size: var(--font-size-xl);
}

.osui-accordion .accordion-s .osui-accordion-item__title i {
    font-size: var(--font-size-m);
}

.simple-accordion.osui-accordion-item {
    background-color: var(--color-transparent);
}

.simple-accordion.osui-accordion-item:after {
    height: 0;
    opacity: 0;
}

.simple-accordion .osui-accordion-item__title {
    padding: var(--space-base) var(--space-none);
}

.simple-accordion .osui-accordion-item__title__placeholder {
    margin-right: var(--space-s);
    width: fit-content;
}

.simple-accordion .osui-accordion-item__content {
    padding: var(--space-none);
}

/* ========  CSS to 2.8 version. To be deleted - START  ========== */
/* Tabs */
.tabs .tabs-header {
    z-index: 1;
    
}

.tabs .tabs-header, 
.tabs .tabs-header .list {
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-overflow-x: auto;
}

.tabs .tabs-header-tab {
    background-color: var(--color-white);
    border-bottom: var(--border-size-m) solid var(--color-neutral-2);
    border-left: 0 none;
    border-right: 0 none;
    border-top: 0 none;
    color: var(--color-neutral-5);
    font-size: var(--font-size-s);
    line-height: 1.5;
    margin-left: var(--space-none);
    min-height: var(--space-xl); /* height to fix the after */
    padding: var(--space-base);
    position: relative;
}

[data-block*=TabsHeaderItem]:first-child .tabs-header-tab {
    border-left: 0 none; /* override UI */
}

.tabs .tabs-content {
    background-color: var(--color-transparent);
    border: 0;
}

/* Tabs Before */
.tabs .tabs-header-tab:before {
    background-color: var(--color-neutral-2);
    bottom: -2px;
    content: '';
    display: block;
    height: 2px;
    left: var(--space-none);
    position: absolute;
    top: auto;
    transition: all 400ms ease;
    width: 0;
    z-index: 2;
}

.tabs .tabs-header-tab:hover:before {
    background-color: var(--color-neutral-7);
}

/* Tabs Hover */
.desktop .tabs-header-tab:hover,
.tabs .tabs-header-tab:hover {
    border-bottom: var(--border-size-m) solid var(--color-neutral-1);
    color: var(--color-neutral-7);
}

.desktop .tabs-header-tab.active:before,
.tabs .tabs-header-tab.active:before {
    background-color: var(--color-primary);
}

.desktop .tabs-header-tab.active:before,
.tabs .tabs-header-tab.active:before,
.desktop .tabs-header-tab:hover:before,
.tabs .tabs-header-tab:hover:before {
    width: 100%;
}

.desktop .tabs-header-tab.active:hover,
.tabs .tabs-header-tab.active:hover {
    color: var(--color-primary);
}

.desktop .tabs-header-tab.active:hover {
    border-bottom: var(--border-size-m) solid var(--color-transparent);
}

/* Tabs Focus */
.desktop .tabs-header-tab:focus-visible,
.tabs .tabs-header-tab:focus:focus-visible {
    outline: 1px dashed var(--color-neutral-8);
    text-decoration: none;
}

/* Tabs Active */
.tabs .tabs-header-tab.active {
    border-bottom: var(--border-size-m) solid var(--color-neutral-1);
    border-top: 0 none;
    color: var(--color-primary);
    font-weight: var(--tk-font-weight-base);
}

/* Tabs Disabled */
.tabs .tabs-header-tab.is-disabled {
    color: var(--color-neutral-3);
    pointer-events: none;
}

/* Tabs No Border */
.tabs.tabs-no-border .tabs-header-tab {
    border-bottom: var(--border-size-m) solid transparent;
}

/* Tabs Vertical */
.tabs.tabs-vertical .tabs-header {
    width: 130px;
}

.tabs.tabs-vertical .tabs-header .tabs-header-tab {
    border-bottom: 0 none;
    border-left: var(--border-size-m) solid var(--color-neutral-1);
    border-right: 0 none;
    padding: var(--space-base);
}

.tabs.tabs-vertical .tabs-content  {
    border-left: 0 none;
}

.tabs.tabs-vertical.justified [data-block*=TabsHeaderItem] {
    flex: none; /* fix OSUI */ 

    -webkit-box-flex: initial; /* fix OSUI */ 
    -ms-flex: none; /* fix OSUI */ 
}

/* Tabs Vertical Before */
.tabs.tabs-vertical .tabs-header .tabs-header-tab:before {
    bottom: auto;
    height: 0;
    left: -2px;
    top: 0;
    width: 2px;
    z-index: 2;
}

/* Tabs Vertical Hover */
.tabs.tabs-vertical .tabs-header-tab:hover,
.desktop .tabs.tabs-vertical .tabs-header-tab:hover {
    border-right: 0 none;
}

.tabs.tabs.tabs-vertical .tabs-header-tab:hover:before,
.desktop .tabs.tabs-vertical .tabs-header-tab:hover:before {
    height: 100%;
}

/* Tabs Vertical Active */
.tabs.tabs-vertical .tabs-header-tab.active {
    border-right: 0 none;
    padding-right: 0;
}

.tabs.tabs-vertical .tabs-header-tab.active:hover,
.desktop .tabs.tabs-vertical .tabs-header-tab.active:hover {
    border-right: 0 none;
    height: 100%;
}

.tabs.tabs-vertical .tabs-header-tab.active:before {
    height: 100%;
}

/* Tabs Vertical No Border */
.tabs.tabs-no-border.tabs-vertical .tabs-header-tab {
    border-left: var(--border-size-m) solid transparent;
}

.tabs.tabs-vertical.tabs-header-right .tabs-header-tab,
.desktop .tabs.tabs-vertical.tabs-header-right .tabs-header-tab 
.tabs.tabs-vertical.tabs-header-right .tabs-header-tab:hover,
.desktop .tabs.tabs-vertical.tabs-header-right .tabs-header-tab:hover {
    border-left: var(--border-size-m) solid transparent;
}

/* Tabs Vertical Right */
.tabs.tabs-vertical.tabs-header-right .tabs-content {
    border-right: 0 none;
}

.tabs.tabs-vertical.tabs-header-right .tabs-header-tab:hover,
.desktop .tabs.tabs-vertical.tabs-header-right .tabs-header-tab:hover,
.tabs.tabs-vertical.tabs-header-right .tabs-header-tab,
.desktop .tabs.tabs-vertical.tabs-header-right .tabs-header-tab {
    border-left: var(--border-size-m) solid var(--color-neutral-1);
}

/* Tabs Horizontal Alignment*/
.tabs-horizontal.tabs-align-center .tabs-header,
.tabs-horizontal.tabs-align-center .tabs-header .list,
.tabs-horizontal.tabs-align-right .tabs-header,
.tabs-horizontal.tabs-align-right .tabs-header .list {
    display: inline-block;
    white-space: nowrap;
}

.tabs-horizontal.tabs-align-center .tabs-header-tab, 
.tabs-horizontal.tabs-align-right .tabs-header-tab {
    display: inline-flex;
}

.tabs-horizontal.tabs-align-center .tabs-header {
    text-align: center;
}

.tabs-horizontal.tabs-align-right .tabs-header {
    text-align: right;
}
/* ========  CSS to 2.8 version. To be deleted - END  ========== */

/* Tabs */
.osui-tabs__header-item {
    border-bottom: var(--border-size-m) solid var(--color-neutral-2);
    color: var(--color-neutral-5);
    font-weight: var(--font-medium);
    line-height: 1.5;
    position: relative;
}

.osui-tabs__header-item.osui-tabs--is-active {
    color: var(--color-primary);
    text-shadow: none;
}

.osui-tabs--is-horizontal .osui-tabs__content {
    border-top: var(--border-size-none);
}

.osui-tabs--is-horizontal .osui-tabs__header__indicator,
.osui-tabs--is-vertical > .osui-tabs__header > .osui-tabs__header__indicator {
    display: none;
}

.osui-tabs--is-horizontal > .osui-tabs__header .osui-tabs__header-item {
    padding: var(--space-base);
}

/* Tabs before */
.osui-tabs .osui-tabs__header-item:before {
    background-color: var(--color-neutral-2);
    bottom: -2px;
    content: '';
    height: 2px;
    left: var(--space-none);
    position: absolute;
    top: auto;
    transition: all 400ms ease;
    width: 0;
    z-index: 2;
}

.osui-tabs .osui-tabs__header-item:hover:before {
    background-color: var(--color-neutral-7);
}

.osui-tabs .osui-tabs__header-item.osui-tabs--is-active:before {
    background-color: var(--color-primary);
}

/* Tabs hover */
.osui-tabs .osui-tabs__header-item:hover {
    border-bottom: var(--border-size-m) solid var(--color-neutral-1);
    color: var(--color-neutral-7);
}

.osui-tabs .osui-tabs__header-item.osui-tabs--is-active:hover {
    border-bottom: var(--border-size-m) solid var(--color-transparent);
    color: var(--color-primary);
}

.osui-tabs.osui-tabs--is-horizontal .osui-tabs__header-item.osui-tabs--is-active:before,
.osui-tabs.osui-tabs--is-horizontal .osui-tabs__header-item:hover:before {
    width: 100%;
}

/* Tabs vertical */
.osui-tabs--is-vertical.osui-tabs--is-left .osui-tabs__content {
    border-left: var(--border-size-none);
}

.osui-tabs--is-vertical.osui-tabs--is-right .osui-tabs__content {
    border-width: var(--border-size-none);
    margin-right: var(--space-none);
}

.osui-tabs.osui-tabs--is-vertical > .osui-tabs__header .osui-tabs__header-item {
    border-bottom: var(--border-size-none);
    border-left: var(--border-size-m) solid var(--color-neutral-1);
    padding: var(--space-base);
}

.osui-tabs--is-vertical .osui-tabs__header .osui-tabs__header-item:before {
    bottom: auto;
    height: 0;
    left: -2px;
    top: 0;
    width: 2px;
    z-index: 2;
}

.osui-tabs.osui-tabs--is-vertical .osui-tabs__header-item.osui-tabs--is-active:before,
.osui-tabs.osui-tabs--is-vertical .osui-tabs__header-item:hover:before {
    height: 100%;
}

/* Tabs disabled */
.osui-tabs__header-item.is-disabled,
.osui-tabs__header-item[disabled="true"] {
    color: var(--color-neutral-3);
    pointer-events: none;
}

/* Tabs align center */
.osui-tabs.tabs-align-center.osui-tabs--is-horizontal .osui-tabs__header {
    justify-content: center;
}

/* Tabs align right */
.osui-tabs.tabs-align-right.osui-tabs--is-horizontal .osui-tabs__header,
.osui-tabs.osui-tabs--is-right.osui-tabs--is-horizontal .osui-tabs__header {
    justify-content: end;
}

/* Tabs no border */
.osui-tabs.tabs-no-border .osui-tabs__header-item {
    border-bottom: var(--border-size-m) solid transparent;
}

.osui-tabs.tabs-no-border.osui-tabs--is-vertical .osui-tabs__header-item,
.osui-tabs.tabs-no-border.osui-tabs--is-vertical .osui-tabs__header-item.is-disabled {
    border-left: var(--border-size-m) solid var(--color-transparent);
}

/* Tooltip deprecated */
.tooltip .tooltip-wrapper {
    background-color: var(--color-neutral-8);
    border-radius: var(--tk-component-border-radius-100);
    color: var(--color-white);
    font-size: var(--font-size-s);
    min-width: 68px;
    padding: var(--space-xs) var(--space-s);
}

.tooltip .tooltip-wrapper.bottom:after,
.tooltip .tooltip-wrapper.bottom-left:after,
.tooltip .tooltip-wrapper.bottom-right:after {
    border-bottom: 7px solid var(--color-neutral-8);
    bottom: 100%;
    height: auto;
}

.tooltip .tooltip-wrapper.left:after {
    border-left: 7px solid var(--color-neutral-8);
}

.tooltip .tooltip-wrapper.right:after {
    border-right: 7px solid var(--color-neutral-8);
}

.tooltip .tooltip-wrapper.top:after,
.tooltip .tooltip-wrapper.top-left:after,
.tooltip .tooltip-wrapper.top-right:after {
    border-top: 7px solid var(--color-neutral-8);
    top: 100%;
}

/* Tooltip Deprecated - is balloon */
.tooltip.is-balloon .tooltip-wrapper {
    background-color: var(--color-neutral-0);
    border-radius: var(--tk-component-border-radius-200);
    color: var(--color-neutral-7);
    max-width: 252px;
    padding: var(--tk-component-padding-s);
    text-align: left;
    width: max-content;
}

.tooltip.is-balloon .tooltip-wrapper.bottom:after,
.tooltip.is-balloon .tooltip-wrapper.bottom-left:after,
.tooltip.is-balloon .tooltip-wrapper.bottom-right:after {
    border-bottom: 7px solid var(--color-neutral-0);
    bottom: 100%;
    height: auto;
}

.tooltip.is-balloon .tooltip-wrapper.left:after {
    border-left: 7px solid var(--color-neutral-0);
}

.tooltip.is-balloon .tooltip-wrapper.right:after {
    border-right: 7px solid var(--color-neutral-0);
}

.tooltip.is-balloon .tooltip-wrapper.top:after,
.tooltip.is-balloon .tooltip-wrapper.top-left:after,
.tooltip.is-balloon .tooltip-wrapper.top-right:after {
    border-top: 7px solid var(--color-neutral-0);
    top: 100%;
}

/* Tooltip */
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper {
    z-index: 1;
}

.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper__balloon {
    background-color: var(--color-neutral-8);
    border-radius: var(--tk-component-border-radius-100);
    color: var(--color-white);
    font-size: var(--font-size-s);
    font-weight: var(--tk-font-weight-base);
    line-height: 1.5;
    min-width: 62px;
    padding: var(--space-xs) var(--space-s);
    text-align: center;
}

.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: transparent transparent var(--color-neutral-8) transparent;
}

.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.left .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: transparent transparent transparent var(--color-neutral-8);
}

.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.right .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: transparent var(--color-neutral-8) transparent transparent;
}

.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.top .osui-tooltip__balloon-wrapper__balloon:before,
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.top-left .osui-tooltip__balloon-wrapper__balloon:before,
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.top-right .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: var(--color-neutral-8) transparent transparent transparent;
}

.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.bottom .osui-tooltip__balloon-wrapper__balloon:before, 
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.bottom-left .osui-tooltip__balloon-wrapper__balloon:before, 
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.bottom-right .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: transparent transparent var(--color-neutral-8) transparent;
}

.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper:not(.left):not(.right):not(.center):not(.top):not(.top-left):not(.top-right):not(.bottom):not(.bottom-left):not(.bottom-right) .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: transparent var(--color-neutral-8) transparent transparent;
}

.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.center .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: transparent transparent var(--color-neutral-8) transparent;
}

/* Tooltip - is-balloon */
.is-balloon.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper__balloon {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-2);
    color: var(--color-neutral-7);
    max-width: 252px;
    padding: var(--space-base);
    text-align: left;
    width: max-content;
}

.is-balloon.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: transparent transparent var(--color-neutral-0) transparent;
    display: none;
}

.is-balloon.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.left .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: transparent transparent transparent var(--color-neutral-0);
    display: none;
}

.is-balloon.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.right .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: transparent var(--color-neutral-0) transparent transparent;
    display: none;
}

.is-balloon.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.top .osui-tooltip__balloon-wrapper__balloon:before, 
.is-balloon.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.top-left .osui-tooltip__balloon-wrapper__balloon:before,
.is-balloon.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.top-right .osui-tooltip__balloon-wrapper__balloon:before {
    border-color: var(--color-neutral-0) transparent transparent transparent;
    display: none;
}

.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper,
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper--is-open.top, 
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper--is-open.top-left, 
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper--is-open.top-right,
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.bottom, 
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.bottom-left, 
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper.bottom-right,
.osui-tooltip:not(:has(.osui-tooltip__balloon-arrow)) .osui-tooltip__balloon-wrapper--is-open.center {
    max-height: 100vh;
}

/* Tooltip 2.19 */
.osui-tooltip:has(.osui-tooltip__balloon-arrow) {
    --osui-tooltip-background-color: var(--color-neutral-8);
    --osui-tooltip-arrow-size: 9px;
    --osui-floating-offset: 8px;
    display: inline-block;
    position: relative;
    
}

.osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-balloon {
    background-color: var(--osui-tooltip-background-color);
    border: var(--border-none);
    border-radius: var(--border-radius-none);
    box-shadow: var(--shadow-none);
    color: var(--color-white);
    font-size: var(--font-size-s);
    font-weight: var(--font-medium);
    line-height: 1.5;
    max-height: 100vh;
    max-width: 250px;
    min-width: 62px;
    padding: var(--space-xs) var(--space-s);
    text-align: center;
}

.osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-balloon:after {
    display: none;
}

.osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-balloon[class*="left"] {
    left: calc(var(--osui-floating-position-x) - var(--osui-floating-offset));
}

.osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-balloon[class*="right"] {
    left: calc(var(--osui-floating-position-x) + var(--osui-floating-offset));
}

.osui-tooltip__balloon-arrow {
    background-color: var(--osui-tooltip-background-color);
    height: var(--osui-tooltip-arrow-size);
    position: absolute;
    transform: rotate(45deg);
    width: var(--osui-tooltip-arrow-size);
    z-index: -1;
}

.osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-tooltip__content {
    cursor: pointer;
}

.osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-tooltip__balloon-wrapper__balloon {
    text-wrap: wrap;
}

.is-balloon.osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-balloon {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-2);
    border-radius: var(--border-radius-none);
    box-shadow: var(--shadow-none);
    color: var(--color-neutral-7);
    left: var(--osui-floating-position-x);
    max-width: 252px;
    padding: var(--space-base);
    text-align: left;
    top: var(--osui-floating-position-y);
    width: max-content;
}

.is-balloon.osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-balloon[class*="left"] {
    left: calc(var(--osui-floating-position-x) - var(--osui-floating-offset));
}

.is-balloon.osui-tooltip.osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-balloon[class*="right"] {
    left: calc(var(--osui-floating-position-x) + var(--osui-floating-offset));
}

.is-balloon.osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-tooltip__balloon-arrow {
    display: none;
}

/* Mobile */
.phone .osui-tooltip:has(.osui-tooltip__balloon-arrow) .osui-balloon {
    max-width: initial;
    min-width: initial;
    width: 40vw;
}

/* Rating */
/* Rating Replacing the icons and icon family */
.rating .fa {
    color: var(--color-yellow);
    font-family: osicons-v2;
    font-size: var(--rating-size);
}
  
.rating-item-filled .fa-star:before { 
    content: var(--osicons-star-full);
}

.rating-item-half .fa-star-half:before { 
    content: var(--osicons-star-half);
}

.rating-item-empty .fa-star:before { 
    content: var(--osicons-star-empty);
}

.rating input:checked + label .rating-item-half {
    opacity: 0;
}

 /* Rating Sizing and Space for default size */ 
.rating { 
    --rating-size: var(--font-size-xxl);
}

/* Rating Sizing for medium size */
.rating.rating-medium {
    --rating-size: var(--font-size-h4);
}

/* Rating Sizing for small size */
.rating.rating-small {
    --rating-size: var(--font-size-l);
}

.rating.rating-small .rating-item {
    padding-right: calc(var(--rating-size) + var(--space-xs));
}

/* Rating Sizing and Space for extra small size */
.rating-extra-small {
    --rating-size: var(--font-size-xs);
}

.rating.rating-extra-small .rating-item {
    padding-right: calc(var(--rating-size) + var(--space-xxs));
}

/* Card Background */
.card-background {
    border-radius: var(--tk-component-border-radius-200);
    padding: var(--tk-component-padding);
}

/* Card Sectioned */
.card-image {
    padding: var(--tk-component-padding);
}

.card-title {
    padding: var(--tk-component-padding);
    padding-bottom: 0;;
}

.card-content {
    padding: var(--tk-component-padding);
}

.card-bottom {
    padding: var(--tk-component-padding);
    padding-top: 0;
}

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

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

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

/* Chat Message */
.chat-message  {
    border-radius: var(--tk-component-border-radius-200);
}

/* Action Sheet */
.action-sheet-actions .btn {
    border-radius: var(--tk-btn-border-radius);
}

.action-sheet-buttons {
    border-radius: var(--tk-btn-border-radius);
    overflow: visible;
}

.action-sheet-cancel .btn {
    background-color: var(--color-transparent);
}

/* Animated Label */
.animated-label-input .form-control[data-input], .animated-label-input .form-control[data-textarea] {
    border-bottom: var(--tk-input-border);
}

.animated-label-input .form-control[data-input]:focus, 
.animated-label-input .form-control[data-textarea]:focus {
    border-bottom: var(--border-size-m) solid var(--color-neutral-6);
}

.animated-label-input .form-control[data-input].not-valid, 
.animated-label-input .form-control[data-input].not-valid:focus,
.animated-label-input .form-control[data-textarea].not-valid,
.animated-label-input .form-control[data-textarea].not-valid:focus {
    border: none;
    border-bottom: var(--border-size-m) solid var(--color-error);
}

.animated-label-input .form-control[data-input]:focus, 
.animated-label-input .form-control[data-textarea]:focus {
    border: none;
    border-bottom: var(--border-size-m) solid var(--color-neutral-6);
}

.animated-label-input .form-control[data-input][disabled], 
.animated-label-input .form-control[data-textarea][disabled] {
    background: var(--color-transparent);
    border-top-color: var(--color-transparent);
    border-left-color: var(--color-transparent);
    border-right-color: var(--color-transparent);
    border-bottom-color: var(--color-neutral-2);
    color: var(--color-neutral-4);
}

.animated-label-input .form-control[data-input]:focus::-webkit-datetime-edit, 
.animated-label-input .form-control[data-textarea]:focus::-webkit-datetime-edit {
    color: var(--color-neutral-8);
}

.has-accessible-features .animated-label-input .form-control[data-input] {
    border-color: var(--color-neutral-4);
}

.has-accessible-features .animated-label-input .form-control[data-input]:hover {
    border-color: var(--color-neutral-6);
}

/* Dropdown Search */
.choices__list--dropdown .choices__list {
    will-change: initial;
}

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

.choices[data-type*=select-one] .choices__inner {
    align-items: center;
    display: inline-flex;
    height: var(--space-xl);
}
 
.choices[data-type*=select-one]:after {
    color: var(--color-neutral-3);
    content: var(--osicons-arrow-down);
    font-family: osicons-v2;
    font-size: var(--font-size-base);
    top: 11px;
}

.choices[data-type*=select-one].is-disabled:after {
    color: var(--color-neutral-3);
}

.choices.is-open.is-focused:after {
    top: 11px;
}

.choices[data-type*=select-one]:hover:after, 
.choices[data-type*=select-one].is-open:after {
    color: var(--color-neutral-8);
}

.choices__inner:hover {
    border: var(--tk-input-border-width) solid var(--color-neutral-6);
}

.choices .search--wrapper::before {
    left: var(--space-m);
}

.choices__input {
    background-color: var(--color-white);
    border: var(--tk-input-border-width) solid var(--color-neutral-4);
    border-radius: var(--tk-component-border-radius-200);
    color: var(--color-neutral-8);
    font-size: var(--font-size-base);
}

.choices[data-type*=select-one] .search--wrapper input:not(.btn):not(.checkbox):not(.radio-button){
    padding-left: var(--space-xxl); /*override OutSystemsUI*/
}

.choices__list--single .choices__item.choices__placeholder {
    color: var(--color-neutral-4);
}

.choices__list.choices__list--dropdown {
    border-radius: var(--tk-component-border-radius-200);
    box-shadow: none;
}

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

.choices__list--dropdown .choices__item {
    font-size: var(--font-size-base);
    padding: var(--space-s) var(--tk-component-padding-s);
}

.choices__list--single .choices__item {
    color: var(--color-neutral-8);
}

.choices[data-type*=select-one].is-disabled .choices__list--single .choices__item {
    color: var(--color-neutral-4);
}

.choices__placeholder {
    opacity: 1;
}

.choices.dropdown-search-size-l .choices__inner {
    height: var(--space-xxl);
    font-size: var(--font-size-l);
}

.choices.dropdown-search-size-s .choices__inner {
    height: var(--space-l);
    font-size: var(--font-size-s);
}

.dropdown-search-size-l[data-type*=select-one]:after,
.dropdown-search-size-l.is-open.is-focused:after {
    top: 15px;
}

.dropdown-search-size-s[data-type*=select-one]:after,
.dropdown-search-size-s.is-open.is-focused:after {
    top: 7px;
}

.dropdown-search-size-l .choices__list--dropdown .choices__item {
    font-size: var(--font-size-l);
}

.dropdown-search-size-s .choices__list--dropdown .choices__item {
    font-size: var(--font-size-s);
}

.dropdown-search-size-l .search--wrapper:before {
    font-size: var(--font-size-l);
}

.dropdown-search-size-s .search--wrapper:before {
    font-size: var(--font-size-s);
}

.dropdown-search-size-l .search--wrapper input {
    height: 48px;
    font-size: var(--font-size-l);
}

.dropdown-search-size-s .search--wrapper input {
    height: 32px;
    font-size: var(--font-size-s);
}

.search--wrapper:before {
    color: var(--color-neutral-3);
    content: var(--osicons-search);
    font-family: osicons-v2;
    font-size: var(--font-size-base);
}

.search--wrapper input {
    border-color: var(--color-neutral-4);
    padding-left: var(--space-xxl);
}

.search--wrapper input:hover,
.search--wrapper input:focus,
.search--wrapper input:focus-visible {
    border-color: var(--color-neutral-6);
}

.tablet .choices[data-type*=select-one]:after,
.phone .choices[data-type*=select-one]:after {
    top: 14px;
}

.tablet .choices.dropdown-search-size-l[data-type*=select-one]:after, 
.phone .dropdown-search-size-l[data-type*=select-one]:after {
    top: 15px;
}

.tablet .choices.dropdown-search-size-s[data-type*=select-one]:after, 
.phone .dropdown-search-size-s[data-type*=select-one]:after {
    top: 7px;
}

/* Dropdown Tags */
[data-block*="DropdownTags"] .choices__inner {
    background-color: transparent;
}

.choices[data-type*=select-multiple] .choices__inner,
.choices[data-type*=select-multiple].is-open.is-focused .choices__inner {
    border: 0;
}

.choices.is-disabled[data-type*=select-multiple] .choices__inner {
    background-color: transparent;
}

.choices[data-type*=select-multiple] .choices__list--multiple {
    display: inline-block;
    padding-bottom: 0.75rem;
}

.choices[data-type*=select-multiple] .search--wrapper {
    padding: var(--space-none);
}

.choices[data-type*=select-multiple] .search--wrapper:before {
    font-size: var(--font-size-l);
}

.choices[data-type*=select-multiple] .search--wrapper input,
.choices[data-type*=select-multiple] .search--wrapper input:focus {
    border: var(--border-size-m) solid var(--color-neutral-4);
    border-radius: var(--tk-component-border-radius-200);
    color: var(--color-neutral-8);
    font-size: var(--font-size-base);
    height: var(--space-xl);
}

.choices[data-type*=select-multiple].is-open.is-focused .search--wrapper input {
    border-color: var(--color-neutral-6);
}

.choices.is-disabled[data-type*=select-multiple] .search--wrapper input {
    background-color: var(--color-neutral-1);
    border-color: var(--color-neutral-2);
    color: var(--color-neutral-4);
}

.choices[data-type*=select-multiple] .search--wrapper input:focus,
.choices[data-type*=select-multiple] .search--wrapper input:focus-visible,
.choices[data-type*=select-multiple] .search--wrapper input:hover {
    border-color: var(--color-neutral-6);
    outline: none;
}

.choices[data-type*=select-multiple] .choices__input {
    background-color: var(--color-white);
}

.choices[data-type*=select-multiple] .choices__input::placeholder {
    color: var(--color-neutral-4);
    opacity: 1; /* Firefox */
}

.choices[data-type*=select-multiple] .search--wrapper input:not(.btn):not(.checkbox):not(.radio-button) {
    padding-left: var(--space-xxl); /*Override OutSystemsUI*/
}

.is-flipped[data-type*=select-multiple] .choices__list--dropdown {
    bottom: 44px;
}

.choices[data-type*=select-multiple] .choices__list--dropdown .choices__item {
    font-size: var(--font-size-base);
    padding: var(--space-s) var(--space-base);
}

.choices[data-type*=select-multiple] .choices__list--multiple .choices__item {
    background-color: var(--color-info-lighter);
    border: solid var(--border-size-none) var(--color-info-light);
    border-radius: var(--border-radius-hard-rounded);
    color: var(--color-neutral-7);
    display: inline-flex;
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    height: 28px;
    margin-left: var(--space-xs);
    padding: var(--space-none) var(--space-s);
}

.choices[data-type*=select-multiple] .choices__list--multiple .choices__item + .choices__item {
    margin-right: 0;
}

.choices[data-type*=select-multiple] .choices__button::after {
    color: var(--color-neutral-7);
    content: var(--osicons-close);
    font-family: "osicons-v2";
    font-size: var(--font-size-base);
}

.choices[data-type*=select-multiple] .choices__button:hover::after,
.choices[data-type*=select-multiple] .choices__button:focus::after,
.choices[data-type*=select-multiple] .choices__button:focus-visible::after  {
    color: var(--color-neutral-7);
    outline: none;
    transition: none;
}

.choices[data-type*=select-multiple].is-disabled .choices__item.choices__item--selectable {
    color: var(--color-neutral-4);
    background-color: var(--color-neutral-1);
    border: var(--border-size-m) solid var(--color-neutral-2);
}

.choices.dropdown-s[data-type*=select-multiple] .search--wrapper input, 
.choices.dropdown-s[data-type*=select-multiple] .search--wrapper input:focus,
.choices.dropdown-s[data-type*=select-multiple] .search--wrapper:before,
.choices.dropdown-s[data-type*=select-multiple] .choices__list--dropdown .choices__item,
.choices.dropdown-s[data-type*=select-multiple] .choices__list--multiple .choices__item,
.choices.dropdown-s[data-type*=select-multiple] .choices__button::after {
    font-size: var(--font-size-s);
}

.choices.dropdown-s[data-type*=select-multiple] .search--wrapper input {
    height: var(--space-l);
}

.choices.dropdown-l[data-type*=select-multiple] .search--wrapper input, 
.choices.dropdown-l[data-type*=select-multiple] .search--wrapper input:focus,
.choices.dropdown-l[data-type*=select-multiple] .search--wrapper:before,
.choices.dropdown-l[data-type*=select-multiple] .choices__list--dropdown .choices__item,
.choices.dropdown-l[data-type*=select-multiple] .choices__list--multiple .choices__item,
.choices.dropdown-l[data-type*=select-multiple] .choices__button::after {
    font-size: var(--font-size-l);
}

.choices.dropdown-l[data-type*=select-multiple] .search--wrapper input {
    height: var(--space-xxl);
}

/*Dropdown Search and Tags 2.10 */
.vscomp-wrapper {
    font-family: var(--font-family-primary);
}

.vscomp-toggle-button,
.phone .vscomp-toggle-button, 
.tablet .vscomp-toggle-button {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-4);
    border-radius: var(--border-radius-none);
    color: var(--color-neutral-4);
    font-size: var(--font-size-base);
    height: var(--space-xl);
    line-height: 1.5;
}

.vscomp-toggle-button,
.vscomp-wrapper.has-clear-button .vscomp-toggle-button {
    padding: var(--space-s) var(--space-base);
}

.has-value .vscomp-toggle-button {
    color: var(--color-neutral-8);
}

.osui-dropdown-search .vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button {
    display: none; 
    right: var(--space-xl);
    transition: all 0.25s ease;
}

.vscomp-clear--visible.osui-dropdown-search .vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button {
    display: flex;
}

.osui-dropdown--remove-clear .vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button {
    display: none;
}

.osui-dropdown-search .vscomp-clear-button:hover {
    background-color: var(--color-neutral-0);
    cursor: pointer;
}

.vscomp-value {
    font-size: var(--font-size-base);
    height: auto;
    line-height: 1.5;
    padding-right: var(--space-l);
}

.vscomp-wrapper:not(.has-value) .vscomp-value {
    opacity: 1;
}

/* DROPDOWN */
.vscomp-dropbox,
.vscomp-wrapper.show-as-popup .vscomp-dropbox {
    --border-color: var(--color-neutral-6);
    --border-size: var(--border-size-m);
    background-color: var(--color-white);
    border-radius: var(--border-radius-none);
    /* border: var(--border-size-m) solid var(--color-neutral-6); */
}

.vscomp-search-container,
.vscomp-wrapper.show-as-popup .vscomp-dropbox .vscomp-search-container {
    border: var(--border-size-m) solid var(--color-neutral-4);
    height: var(--space-xl);
    margin: var(--space-s);
    padding: var(--space-s) var(--space-base) var(--space-s) var(--space-xxl);
}

.vscomp-wrapper.show-as-popup.multiple .vscomp-dropbox .vscomp-search-container {
    padding: var(--space-s) var(--space-base);
}

.vscomp-search-input {
    padding: var(--space-none);
    width: 100%;
}

.vscomp-search-input::placeholder {
    color: var(--color-neutral-4);
    opacity: 1;
}

.vscomp-option {
    background-color: var(--color-white);
    height: auto !important; /* override JS */
    padding: var(--space-s) var(--space-base);
}

.vscomp-search-input,
.vscomp-option-text {
    color: var(--color-neutral-8);
    font-size: var(--font-size-base);
    font-weight: var(--tk-font-weight-s);
    line-height: 1.5;
}

.vscomp-wrapper.has-select-all .vscomp-search-input, 
.vscomp-wrapper.has-select-all .vscomp-toggle-all-label {
    width: 100%;
}

/* ICONS */ 
.vscomp-clear-icon {
    height: 14px;
    width: 14px;
}

.vscomp-ele .vscomp-clear-icon:after {
    content: var(--osicons-close);
    font-family: osicons-v2;
    font-size: var(--font-size-s);
}

.vscomp-ele .vscomp-clear-icon:before {
    content: none;
}

.vscomp-toggle-button:after,
.vscomp-search-container:before,
.vscomp-search-container .vscomp-search-clear:after {
    color: var(--color-neutral-3);
    font-family: osicons-v2;
    font-size: var(--font-size-base);
}

.vscomp-toggle-button:after {
    content: var(--osicons-arrow-down);
    font-size: var(--font-size-base);
}

.vscomp-search-container .vscomp-search-clear:after {
    content: var(--osicons-close);
}

.vscomp-search-container:before {
    color: var(--color-neutral-4);
    content: var(--osicons-search);
}

.vscomp-search-container .vscomp-search-clear,
.vscomp-search-container .vscomp-search-clear:hover {
    color: var(--color-transparent);
    display: none;
    position: relative;
}

.vscomp-search-container .vscomp-search-clear:after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.vscomp-wrapper.has-no-options .vscomp-no-search-results .vscomp-no-options,
.vscomp-wrapper.has-no-search-results .vscomp-no-search-results .vscomp-no-search-results {
    color: var(--color-neutral-8);
    display: block;
    font-size: var(--font-size-base);
    padding: var(--space-s) var(--space-base);
}

/* DROPDOWN TAGS */
.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-value {
    min-height: var(--space-none);
    padding-bottom: var(--space-xs);
}

.vscomp-wrapper.show-value-as-tags .vscomp-value {
    margin-right: var(--space-none);
}

.vscomp-wrapper.show-value-as-tags .vscomp-toggle-button,
.phone .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button,
.tablet .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button {
    margin-bottom: var(--space-none);
    min-height: var(--space-xl);
    padding: var(--space-xs) var(--space-base) var(--space-none) var(--space-base);
}

.osui-dropdown-tags .vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button {
    display: none;
}

.vscomp-wrapper.has-value.show-value-as-tags .vscomp-toggle-button {
    padding-left: var(--space-base);
}

.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-toggle-button {
    padding-bottom: var(--space-none);
}

.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon,
.vscomp-wrapper .checkbox-icon.checked {
    background-color: var(--color-turquoise-dark);
    border-color: var(--color-turquoise-dark);
    border-radius: var(--border-radius-none);
    border-style: solid;
    border-width: var(--border-size-m);
}

.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon:after,
.vscomp-wrapper .checkbox-icon.checked:after {
    align-items: center;
    border: none;
    color: var(--color-white);
    content: var(--osicons-select);
    display: flex;
    font-family: osicons-v2;
    height: 100%;
    justify-content: center;
    left: 50%;
    line-height: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content {
    margin-right: var(--space-xs);
    overflow: visible;
}

.vscomp-wrapper .checkbox-icon {
    background-color: var(--color-transparent);
    border: var(--border-size-m) solid var(--color-neutral-8);
    border-radius: var(--border-size-none);
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
    background-color: var(--color-info-lighter);
    border: var(--border-size-none) solid var(--color-info-light);
    border-radius: var(--border-radius-hard-rounded);
    color: var(--color-neutral-7);
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    height: 28px;
    margin-bottom: var(--space-xs);
    margin-left: var(--space-none);
    padding: var(--space-none) var(--space-s);
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button {
    background-color: transparent;
    border-radius: var(--border-radius-none);
    height: var(--font-size-l);
    position: relative;
    right: auto;
    width: var(--font-size-l);
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-clear-button .vscomp-clear-icon {
    height: var(--space-base);
    transform: none;
    width: var(--space-base);
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button .vscomp-clear-icon:after {
    color: var(--color-neutral-7);
    font-size: var(--font-size-base);
}

.vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button:hover .vscomp-clear-icon:after,
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button:focus .vscomp-clear-icon:after {
    color: var(--color-neutral-8);
}

.vscomp-wrapper.show-as-popup.show-value-as-tags .vscomp-dropbox .vscomp-search-container {
    padding-left: var(--space-base);
}

/* SIZES */
.dropdown-s .vscomp-value,
.dropdown-s .vscomp-search-container:before,
.dropdown-s .vscomp-search-input,
.dropdown-s .vscomp-option-text,
.dropdown-s .vscomp-search-container .vscomp-search-clear:after,
.dropdown-s .vscomp-wrapper.show-value-as-tags .vscomp-value-tag,
.dropdown-s .vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button .vscomp-clear-icon:after,
.dropdown-s .vscomp-no-options,
.dropdown-s .vscomp-no-search-results {
    font-size: var(--font-size-s);
}

.dropdown-s .vscomp-toggle-button,
.dropdown-s .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button,
.dropdown-s .vscomp-search-container,
.phone .dropdown-s .vscomp-toggle-button, 
.tablet .dropdown-s .vscomp-toggle-button  {
    height: var(--space-l);
}

.dropdown-s .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button,
.phone .dropdown-s .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button,
.tablet .dropdown-s .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button  {
    height: auto;
    min-height: var(--space-l); /* override dropdown tags */
    padding: var(--space-xxs) var(--space-base) var(--space-none) var(--space-base);
}

.dropdown-s .vscomp-option {
    padding: var(--space-xs) var(--space-base);
}

.dropdown-s .vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-value {
    padding-bottom: var(--space-xs);
}

.dropdown-s .vscomp-wrapper.show-value-as-tags .vscomp-value {
    min-height: 20px;
}

.dropdown-s .vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
    height: auto;
    margin-bottom: var(--space-xxs);
}

.dropdown-l .vscomp-value,
.dropdown-l .vscomp-search-container:before,
.dropdown-l .vscomp-search-input,
.dropdown-l .vscomp-option-text,
.dropdown-l .vscomp-search-container .vscomp-search-clear:after,
.dropdown-l .vscomp-wrapper.show-value-as-tags .vscomp-value-tag,
.dropdown-l .vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button .vscomp-clear-icon:after,
.dropdown-l .vscomp-no-options,
.dropdown-l .vscomp-no-search-results {
    font-size: var(--font-size-l);
}

.dropdown-l .vscomp-toggle-button,
.dropdown-l .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button,
.dropdown-l .vscomp-search-container,
.phone .dropdown-l .vscomp-toggle-button, 
.tablet .dropdown-l .vscomp-toggle-button {
    height: var(--space-xxl);
}

.dropdown-l .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button,
.phone .dropdown-l .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button,
.tablet .dropdown-l .vscomp-wrapper.show-value-as-tags .vscomp-toggle-button {
    height: auto;
    min-height: var(--space-xxl); /* override dropdown tags */
}

/* FOCUS / HOVER  */
.vscomp-ele.pop-comp-active .vscomp-toggle-button,
.vscomp-toggle-button:hover,
.osui-dropdown-search.osui-dropdown--not-valid .vscomp-toggle-button:hover {
    border-color: var(--color-neutral-6);
}

.vscomp-ele.pop-comp-active .vscomp-toggle-button:after,
.vscomp-toggle-button:hover .vscomp-toggle-button:after,
.vscomp-clear-button:hover .vscomp-clear-icon:after {
    color: var(--color-neutral-6);
}

.vscomp-toggle-button:hover:after {
    color: var(--color-neutral-8);
}

.vscomp-clear-button:hover,
.vscomp-search-container .vscomp-search-clear:hover,
.vscomp-option.selected {
    background-color: var(--color-transparent);
}

.vscomp-option.focused {
    background-color: var(--color-neutral-0);
}

.vscomp-search-container:focus-within,
.vscomp-wrapper.show-as-popup .vscomp-dropbox .vscomp-search-container:focus-within {
    border-color: var(--color-neutral-6);
}

/* DISABLED */
.osui-dropdown-search.vscomp-ele[disabled] .vscomp-toggle-button, 
.osui-dropdown-serverside.vscomp-ele[disabled] .vscomp-toggle-button, 
.osui-dropdown-tags.vscomp-ele[disabled] .vscomp-toggle-button {
    background-color: var(--color-neutral-1);
    border:  var(--border-size-m) solid var(--color-neutral-2);
    color: var(--color-neutral-4);
}

.osui-dropdown-tags[disabled] .vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
    background-color: var(--color-neutral-4);
}

.osui-dropdown-tags[disabled] .vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
    background-color: var(--color-neutral-4);
}

.vscomp-ele[disabled].osui-dropdown-search .vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button,
.osui-dropdown-tags[disabled] .vscomp-wrapper.show-value-as-tags .vscomp-value-tag .vscomp-value-tag-clear-button {
    display: none;
}

/* Notification */
.osui-notification {
    --osui-notification-margin: var(--space-m);
    background-color: var(--color-white);
    border-radius: var(--tk-component-border-radius-200); 
    border: var(--border-size-s) solid var(--color-neutral-4); 
    box-shadow: var(--shadow-none); 
    cursor: pointer;
    opacity: 0;
    padding: var(--tk-component-padding);
    pointer-events: none;
    transition: opacity 200ms ease-in-out;
    width: var(--notification-width);
    z-index: 300;
}

.osui-notification--is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Notification Deprecated */
.notification {
    border-radius: var(--tk-component-border-radius-200);
    box-shadow: none;
}

/* Side Bar */
.osui-sidebar {
    box-shadow: none;
}

/* ========  CSS to 2.8 version. To be deleted - START  ========== */
/* Section Index */
.section-index {
    border-left: 0 none;
}

.section-index a, 
.section-index a:visited  {
    border-left: var(--border-size-m) solid var(--color-neutral-1);
    color: var(--color-neutral-4);
    margin-bottom: var(--space-none);
    padding: var(--space-xs) var(--space-base);
}

.section-index a:hover {
    border-left: var(--border-size-m) solid var(--color-neutral-7);
    color: var(--color-neutral-7);
    text-decoration: none;
}

.section-index-item.is--active {
    border-left: var(--border-size-m) solid var(--color-primary);
    color: var(--color-primary);
    font-weight: var(--font-medium);
}

.section-index .section-index-item.is--active:hover {
    border-left: var(--border-size-m) solid var(--color-primary);
    color: var(--color-primary);
}
/* ========  CSS to 2.8 version. To be deleted - END  ========== */

/* Section Index */
.osui-section-index:before {
    display: none;
}

.osui-section-index-item, 
.osui-section-index-item:visited  {
    color: var(--color-neutral-4);
    margin-bottom: var(--space-none);
    padding: var(--space-xs) var(--space-base);
    transition: var(--tk-transition-base);
}

.osui-section-index-item:before {
    background-color: var(--color-neutral-1);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    transition: var(--tk-transition-base);
    width: 2px;
}

.osui-section-index-item:hover {
    color: var(--color-neutral-7);
    text-decoration: none;
}

.osui-section-index-item:hover:before {
    background-color: var(--color-neutral-7);
    width: 2px;
} 

.osui-section-index-item.is--active {
    color: var(--color-primary);
    font-weight: var(--font-medium);
}

.osui-section-index-item--is-active,
.osui-section-index-item--is-active:hover {
    color: var(--color-primary);
}

.osui-section-index-item--is-active:before,
.osui-section-index-item--is-active:hover:before {
    background: var(--color-primary);
}

.osui-section-index:before {
    background-color: var(--color-neutral-1);
    width: 2px;
}

/* Section Index - Mobile */
.phone .osui-section-index--is-sticky {
    position: sticky;
}

.android .osui-section-index-item:not(.osui-section-index-item--is-active):hover,
.ios .osui-section-index-item:not(.osui-section-index-item--is-active):hover,
body.android:has(.has-accessible-features) .osui-section-index-item:not(.osui-section-index-item--is-active):focus,
body.ios:has(.has-accessible-features) .osui-section-index-item:not(.osui-section-index-item--is-active):focus,
.android .osui-section-index-item:not(.osui-section-index-item--is-active):focus,
.ios .osui-section-index-item:not(.osui-section-index-item--is-active):focus {
    color: var(--color-primary);
}

.android .osui-section-index-item:not(.osui-section-index-item--is-active):hover:before,
.ios .osui-section-index-item:not(.osui-section-index-item--is-active):hover:before,
body.android:has(.has-accessible-features) .osui-section-index-item:not(.osui-section-index-item--is-active):focus:before,
body.ios:has(.has-accessible-features) .osui-section-index-item:not(.osui-section-index-item--is-active):focus:before,
.android .osui-section-index-item:not(.osui-section-index-item--is-active):focus:before,
.ios .osui-section-index-item:not(.osui-section-index-item--is-active):focus:before {
    background-color: var(--color-primary);
}

/* Submenu */
.osui-submenu__header {
    border: var(--border-size-none);
    font-size: var(--font-size-xs);
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-base);
}

.osui-submenu.active .osui-submenu__header {
    border-bottom: var(--border-size-m) solid var(--color-primary);
}

.desktop .osui-submenu:not(.active) .osui-submenu__header:hover {
    border-bottom: var(--border-size-none);
}

.desktop .osui-submenu.active .osui-submenu__header:hover .osui-submenu__header__item {
    color: var(--color-neutral-8);
}

.osui-submenu__header__icon {
    color: var(--color-neutral-6);
    transform: none;
    -webkit-transform: none;
}

.osui-submenu__header__icon:before {
    border: var(--border-size-none);
    content: var(--osicons-arrow-down);
    font-family: osicons-v2;
    height: auto;
    width: auto;
}

.osui-submenu:hover .osui-submenu__header__icon:before,
.osui-submenu.active .osui-submenu__header__icon:before {
    border: var(--border-size-none);
}

.osui-submenu--is-open .osui-submenu__header__icon {
    top: 1px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.osui-submenu__header__item,
.osui-submenu.active .osui-submenu__header__item, 
.osui-submenu.active .osui-submenu__header__item a {
    color: var(--color-neutral-8); 
    font-weight: var(--font-bold);
}

.osui-submenu__items {
    background-color: var(--color-white); 
    border-color: var(--color-neutral-6); 
    border-radius: var(--border-radius-none);
    border-width: var(--border-size-m);
    box-shadow: var(--shadow-none);
    -webkit-box-shadow: var(--shadow-none);
    font-size: var(--font-size-xs);
    min-width: fit-content;
    padding: var(--space-none);
    width: 100%;
    z-index: 3;
}

.osui-submenu__items a.active,
.desktop .osui-submenu__items a.active:hover {
    color: var(--color-neutral-8);
    font-weight: var(--font-bold);
}

.osui-submenu__items a:focus {
    color: var(--color-neutral-8);
}

.desktop .osui-submenu__items a:hover {
    background-color: var(--color-neutral-0); 
    color: var(--color-neutral-8);
    text-decoration: none;
}

/* Submenu - with layout side */

.layout-side .osui-submenu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

.layout-side .osui-submenu .osui-submenu__header {
    border: var(--border-size-none);
    border-bottom: var(--border-size-m) solid var(--color-primary);
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-base);
}

.layout-side .osui-submenu .osui-submenu__header__item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.layout-side .osui-submenu.active .osui-submenu__header {
    border-left: var(--border-size-none);
}

.layout-side .osui-submenu__items {
    border: var(--border-size-m) solid var(--color-neutral-6);
    padding: var(--space-none);
}

/* Submenu sizes */
.submenu-l .osui-submenu__header,
.submenu-l .osui-submenu__items {
    font-size: var(--font-size-s);
}

.submenu-s .osui-submenu__header, 
.submenu-s .osui-submenu__items {
    font-size: var(--font-size-xxs);
}

/* Submenu disabled */
.osui-submenu.submenu-disabled {
    pointer-events: none;
}

.submenu-disabled .osui-submenu__header {
    background-color: var(--color-neutral-1);
}

.submenu-disabled .osui-submenu__header__icon {
    color: var(--color-neutral-2);
}

.submenu-disabled .osui-submenu__header__item,
.osui-submenu.active.submenu-disabled .osui-submenu__header__item {
    color: var(--color-neutral-4);
}

/* Submenu mobile */
.tablet .osui-submenu__header, 
.phone .osui-submenu__header,
.tablet .osui-submenu.active .osui-submenu__header, 
.phone .osui-submenu.active .osui-submenu__header {
    border: var(--border-size-none);
    font-size: var(--font-size-s);
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-base);
}

.tablet .osui-submenu__items, 
.phone .osui-submenu__items {
    border: var(--tk-input-border-width) solid var(--color-neutral-6);
    font-size: var(--font-size-s);
    padding: var(--space-none);
}

.tablet .submenu-l .osui-submenu__header, 
.phone .submenu-l .osui-submenu__header,
.tablet .osui-submenu.active.submenu-l .osui-submenu__header, 
.phone .osui-submenu.active.submenu-l .osui-submenu__header,
.tablet .submenu-l .osui-submenu__items, 
.phone .submenu-l .osui-submenu__items {
    font-size: var(--font-size-base);
}

.tablet .submenu-s .osui-submenu__header, 
.phone .submenu-s .osui-submenu__header,
.tablet .osui-submenu.active.submenu-s .osui-submenu__header, 
.phone .osui-submenu.active.submenu-s .osui-submenu__header,
.tablet .submenu-s .osui-submenu__items, 
.phone .submenu-s .osui-submenu__items {
    font-size: var(--font-size-xs);
}

/* Submenu 2.18 CSS conflict */

.osui-submenu:first-of-type:not(.osui-submenu--is-open) .osui-submenu__header .osui-submenu__header__icon {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* Timeline Item */
.timeline-icon-line {
    background-color: var(--color-neutral-2);
    width: 2px;
}

/* Button Loading */
/* ========  CSS to 2.8 version. To be deleted - START  ========== */
.osui-btn-loading .btn {
    display: flex; /* Firefox Bug */
}
/* ========  CSS to 2.8 version. To be deleted - END  ========== */
.osui-btn-loading--is-loading [class*="os-btn"] .osui-btn-loading__spinner-animation {
    height: var(--font-size-base);
    margin-left: var(--space-s);
    margin-right: 0;
    width: var(--font-size-base);
}

.osui-btn-loading-show-spinner [class*="os-btn"] .osui-btn-loading__spinner-animation {
   margin-left: var(--space-none);
}

.osui-btn-loading--is-loading [class*="os-btn"].btn-s .osui-btn-loading__spinner-animation {
    height: var(--font-size-s);
    width: var(--font-size-s);
}

.osui-btn-loading--is-loading [class*="os-btn"].btn-l .osui-btn-loading__spinner-animation {
    height: var(--font-size-l);
    width: var(--font-size-l);
}

.osui-btn-loading--is-loading [class*="os-btn"].btn-xl .osui-btn-loading__spinner-animation {
    height: var(--font-size-h3);
    width: var(--font-size-h3);
}

/* Popover */
[data-popover] > .popover-bottom {
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-2);
    border-radius: var(--tk-component-border-radius-100);
    box-shadow: none;
}

/* Popup */
.popup-dialog {
    border: 2px solid var(--color-neutral-2);
    border-radius: var(--tk-component-border-radius-100);
    box-shadow: none;
    overflow-y: auto;
}

/* Badge */
.badge {
    font-size: var(--font-size-s);
    font-weight: var(--font-medium);
    height: 24px;
    min-width: 24px;
}

.badge-small {
    font-size: var(--font-size-xxs);
    height: 18px;
    line-height: normal;
    min-width: 18px;
}

.badge-medium {
    font-size: var(--font-size-m);
    height: 32px;
    line-height: normal;
    min-width: 32px;
}

.badge-dot {
    height: 8px;
    min-width: 8px;
}

.badge-dot span {
    display: none; /* to remove the text of the badge*/
}

[data-block*="Numbers.Badge"] { 
    display: inline-flex; /* to fix vertical align of the badge in small size*/
}

.badge.badge-info {
    background-color: var(--color-info);
}

.badge.badge-success {
    background-color: var(--color-success-dark);
}

.badge.badge-warning {
    background-color: var(--color-warning);
}

.badge.badge-error {
    background-color: var(--color-error);
}

/* Icon Badge */
.icon-badge {
    color: var(--color-neutral-10);
}
.icon-badge badge {
    font-size: var(--font-size-xxs);
}

.icon-badge-primary .badge {
    background-color: var(--color-primary);
}

.icon-badge-secondary .badge {
    background-color: var(--color-neutral-6);
}

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

.icon-badge-success .badge {
    background-color: var(--color-success-dark);
}

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

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

/* Floating Actions */
.floating-button {
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    color: var(--tk-btn-color-primary);
    font-size: var(--font-size-xl);
    height: 56px;
    position: relative;
    transition:  var(--tk-transition-base);
    width: 56px;
}

.floating-button:after {
    background-color: var(--tk-btn-af-bg-primary);
    border: var(--tk-btn-af-border);
    border-color: var(--tk-btn-af-border-color-primary);
    border-radius: var(--border-radius-circle);
    box-sizing: border-box;
    content: "";
    height: 56px;
    left: 0;
    position: absolute;
    top: 0;
    transition: all ease-out 0.128s;
    width: 56px;
    z-index: -1;
}

.floating-button:hover {
    filter: none;
    -webkit-filter: none;
}

.floating-button:hover:after {
    background-color: var(--tk-btn-af-bg-primary-hover);
    border-color: var(--tk-btn-af-border-color-primary-hover);
    transform: var(--tk-btn-hover-transition);
}

.floating-button .fa {
    font-family: osicons-v2 !important;
}

.floating-button .fa:before {
    content: var(--osicons-plus);
}

.floating-actions-wrapper.is--open .floating-button {
    filter: none;
    -webkit-filter: none;
}

.floating-actions-wrapper.is--open .floating-button:after {
    transform: var(--tk-btn-hover-transition);
}

.floating-actions-item-label {
    color: var(--color-neutral-7);
    font-size: var(--font-size-s);
}

.floating-actions-item-button {
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    color: var(--tk-btn-color-secondary);
    height: var(--tk-btn-height-m);
    position: relative;
    width: var(--tk-btn-height-m);
}

.floating-actions-wrapper.is--open .floating-actions-item-button {
    transform: none;
}

.floating-actions-item-button:after {
    background-color: var(--color-white); /* prevent overlay problems with content below */
    border: var(--tk-btn-af-border);
    border-color: var(--tk-btn-af-border-color-secondary); 
    border-radius: var(--border-radius-circle);
    box-sizing: border-box;
    content: "";
    height: var(--tk-btn-height-m);
    left: 0;
    position: absolute;
    top: 0;
    transition: all ease-out 0.128s;
    width: var(--tk-btn-height-m);
    z-index: -1;
}

.floating-actions-item-button:hover {
    background-color: transparent;
    color: var(--tk-btn-color-secondary-hover);
}

.floating-actions-item-button:hover:after {
    border-color: var(--tk-btn-af-border-color-secondary-hover);
    transform: var(--tk-btn-hover-transition);
}

.floating-overlay.is--open {
    opacity: 0;
}

.floating-actions-wrapper {
    z-index: 50;
}

/* Blank Slate */
.blank-slate.large .blank-slate-icon {
    font-size: 0;
    margin-bottom: var(--space-xxl);
}

.blank-slate-description {
    color: var(--color-neutral-7);
}

.blank-slate-actions {
    padding: var(--space-s) var(--space-base);
}

.blank-slate.large .blank-slate-actions {
    padding: var(--space-s) var(--space-base);
}

/* Modal */
.modal-wrapper {
    z-index: 1002;
}

.modal-overlay.show-modal {
    z-index: 1001;
}

.vscomp-dropbox-container.pop-comp-wrapper {
    z-index: 3!important; /* override JS */
}

body:has(.popup-content .vscomp-ele-wrapper) .vscomp-dropbox-container.pop-comp-wrapper {
    z-index: 251!important; /* Popup fix */
}

/* Dropdown ServerSide */
.osui-dropdown-serverside__selected-values {
    color: var(--color-neutral-4);
}

.osui-dropdown-serverside__selected-values:after {
    color: var(--color-neutral-3);
    content: var(--osicons-arrow-down);
    font-family: osicons-v2;
    font-size: 1rem;
    right: var(--space-base);
}

.osui-dropdown-serverside__selected-values > *::-moz-selection {
    background-color: var(--color-transparent);
}

.osui-dropdown-serverside__selected-values > *::selection {
    background-color: var(--color-transparent);
}

.osui-dropdown-serverside__selected-values-wrapper {
    background-color:  var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-4);
    border-radius:  var(--border-radius-none);
    color: var(--color-neutral-8);
    font-size: 1rem;
    height: 40px;
    padding: calc(var(--space-base) / 2) calc(var(--space-base) + var(--font-size-base) + (var(--font-size-base) / 2)) calc(var(--space-base) / 2) var(--space-base);
}

.osui-dropdown-serverside__selected-values-wrapper:hover {
    border: var(--border-size-m) solid var(--color-neutral-6);
}

.osui-dropdown-serverside--is-opened .osui-dropdown-serverside__selected-values-wrapper {
    border: var(--border-size-m) solid var(--color-neutral-6);
}

.osui-dropdown-serverside__selected-values [data-expression] {
    color: var(--color-neutral-8);
    white-space: nowrap;
}

.osui-dropdown-serverside__selected-values-wrapper:hover .osui-dropdown-serverside__selected-values:after {
    color: var(--color-neutral-6);
}

.osui-dropdown-serverside__balloon-container {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-6);
    border-radius: var(--border-radius-none);
    box-shadow: none;
}

.osui-dropdown-serverside__balloon-search-wrapper {
    background-color: var(--color-white);
    padding: var(--space-s);
}

.osui-dropdown-serverside__balloon-search:before {
    color: var(--color-neutral-3);
    content: var(--osicons-search);
    font-family: osicons-v2;
    font-size: var(--font-size-l);
    left: var(--space-m);
}    

.osui-dropdown-serverside__balloon-search input,
.osui-dropdown-serverside__balloon-search .form-control[data-input] {
    padding: var(--space-s) var(--space-base) var(--space-s) var(--space-xxl);
}

.osui-dropdown-serverside__balloon-search-icon {
    align-items: center;
    display: flex;
    font-size: 1rem;
    height: 40px;
    padding: var(--space-none) var(--space-base);
    right: var(--space-s);
    position: absolute;
}

.osui-dropdown-serverside__balloon-search-icon a [class*="osicons"] {
    color: var(--color-neutral-3);
    transition: var(--tk-transition-fade);
}

.osui-dropdown-serverside__balloon-search-icon a:hover [class*="osicons"] {
    color: var(--color-neutral-6);
}

.osui-dropdown-serverside__balloon-search-icon a {
    color: var(--color-neutral-3);
}

.osui-dropdown-serverside__balloon-search-icon a:hover {
    color: var(--color-neutral-6);
}

.osui-dropdown-serverside__balloon-search-icon  .icon:before {
    content: var(--osicons-close);
    font-family: osicons-v2;
    font-style: normal;
}

.osui-dropdown-serverside__balloon-content > *:not([data-list]) {
    padding: var(--space-s) var(--space-base);
}

.osui-dropdown-serverside__balloon-content {
    border: var(--border-size-none);
}

.osui-dropdown-serverside__balloon-footer {
    border-top: var(--border-size-m) solid var(--color-neutral-6);
    padding: var(--space-s) var(--space-base);
}

.osui-dropdown-serverside__balloon--is-top .osui-dropdown-serverside__balloon-footer {
    border-bottom: var(--border-size-m) solid var(--color-neutral-6);
}

.osui-dropdown-serverside__balloon--is-top .osui-dropdown-serverside__balloon-container {
    transition: var(--tk-transition-fade);
}

.osui-dropdown-serverside__balloon--is-top .osui-dropdown-serverside__balloon-content {
    border-top: var(--border-size-none);
}

.osui-dropdown-serverside__balloon--is-top .osui-dropdown-serverside__balloon-search-wrapper {
    order: 3;
}

.osui-dropdown-serverside--is-opened .osui-dropdown-serverside__selected-values:after {
    color: var(--color-neutral-6);
}

.osui-dropdown-serverside--is-disabled .osui-dropdown-serverside__selected-values-wrapper {
    background-color: var(--color-neutral-1);
    border: var(--border-size-m) solid var(--color-neutral-2);
    pointer-events: none;
}

.osui-dropdown-serverside--is-disabled .osui-dropdown-serverside__selected-values,
.osui-dropdown-serverside--is-disabled .osui-dropdown-serverside__selected-values [data-expression] {
    color: var(--color-neutral-4);
}

.osui-dropdown-serverside--not-valid .osui-dropdown-serverside__selected-values-wrapper {
    border-color: var(--color-error);
}

.osui-dropdown-serverside--not-valid + .osui-dropdown-serverside-error-message {
    color: var(--color-error);
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
}

.osui-dropdown-serverside__balloon-wrapper .input-search .form-control {
    border: var(--border-size-m) solid var(--color-neutral-6);
    padding-right: var(--space-xl);
}

.dropdown-s .osui-dropdown-serverside__selected-values-wrapper,
.dropdown-s .osui-dropdown-serverside__balloon-search-wrapper .form-control,
.dropdown-s .osui-dropdown-serverside__balloon-search-icon {
    height:  calc(40px - 0.5rem);
    font-size: var(--font-size-s);
}

.dropdown-s .osui-dropdown-serverside__balloon-search:before {
    font-size: var(--font-size-s);
}

.dropdown-l .osui-dropdown-serverside__selected-values-wrapper,
.dropdown-l .osui-dropdown-serverside__balloon-search-wrapper .form-control,
.dropdown-l .osui-dropdown-serverside__balloon-search-icon {
    height: calc(40px + 0.5rem);
    font-size: var(--font-size-l);
}

.dropdown-l .osui-dropdown-serverside__balloon-search:before {
    font-size: var(--font-size-l);
}


/*! Dropdown ServerSide Item */
.osui-dropdown-serverside-item {
    background-color: var(--color-white);
    color: var(--color-neutral-9);
    font-size: 1rem;
    font-weight: var(--font-medium);
    padding: var(--space-s) var(--space-base);
    transition: var(--tk-transition-fade);
}

.osui-dropdown-serverside-item:hover {
    background-color: var(--color-neutral-0);
}

.osui-dropdown-serverside-item--is-selected {
    background-color: var(--color-transparent);
}

.tablet .osui-dropdown-serverside-item,
.phone .osui-dropdown-serverside-item{
    background-color: var(--color-white);
}

.tablet .osui-dropdown-serverside-item--is-selected,
.phone .osui-dropdown-serverside-item--is-selected{
    background-color: var(--fm-span-background-hover, var(--color-neutral-0));
}

/* Dropdown ServerSide - Sizes */
.dropdown-s .osui-dropdown-serverside-item,
.dropdown-s .osui-dropdown-serverside__balloon-footer {
    font-size:var(--font-size-s);
    padding: var(--space-xs) var(--space-base);
}

.dropdown-l .osui-dropdown-serverside-item,
.dropdown-l .osui-dropdown-serverside__balloon-footer {
    font-size: var(--font-size-l);
    padding: var(--space-s) var(--space-base);
}

/* Dropdown ServerSide 2.19 */
.osui-dropdown-serverside:has(.osui-balloon) {
  --osui-dropdown-ss-balloon-max-height: 200px;
}

.osui-dropdown-serverside .osui-balloon {
    border: var(--border-size-none)
}

.osui-dropdown-serverside .osui-balloon.top-start {
    top: calc( var(--osui-floating-position-y) - 5px );
}

.osui-dropdown-serverside .osui-balloon.bottom-start {
    top: calc( var(--osui-floating-position-y) + 5px );
}

.osui-dropdown-serverside:has(.osui-balloon).osui-dropdown-serverside__balloon-footer,
.osui-dropdown-serverside:has(.osui-balloon).osui-dropdown-serverside__balloon-content {
    background-color: var(--color-white);
}

.osui-dropdown-serverside:has(.osui-balloon):has(.osui-dropdown-serverside--is-opened) .osui-dropdown-serverside__selected-values-wrapper {
  border-color: var(--color-neutral-6);
}

.osui-dropdown-serverside:has(.osui-balloon) .osui-dropdown-serverside__selected-values:after  {
  transition: var(--tk-transition-base)
}

.osui-dropdown-serverside:has(.osui-balloon):has(.osui-dropdown-serverside--is-opened) .osui-dropdown-serverside__selected-values:after {
  color: var(--color-neutral-6);
}

.osui-dropdown-serverside:has(.osui-balloon) .osui-dropdown-serverside__balloon-search input,
.osui-dropdown-serverside:has(.osui-balloon) .osui-dropdown-serverside__balloon-search .form-control[data-input] {
  border: var(--tk-input-border-width) solid var(--color-neutral-6);
}

.phone .osui-dropdown-serverside:has(.osui-balloon):has(.osui-dropdown-serverside--is-opened).osui-balloon {
    position: fixed;
}

/* Dropdown ServerSide Arrow */
.osui-dropdown-serverside--only-arrow .osui-dropdown-serverside__selected-values-wrapper {
    height: var(--space-xl);
    padding: var(--space-none);
    width: var(--space-xl);
}

.osui-dropdown-serverside--only-arrow.dropdown-s .osui-dropdown-serverside__selected-values-wrapper {
    height: var(--space-l);
    width: var(--space-l);
}

.osui-dropdown-serverside--only-arrow.dropdown-l .osui-dropdown-serverside__selected-values-wrapper {
    height: var(--space-xxl);
    width: var(--space-xxl);
}

.osui-dropdown-serverside--only-arrow .osui-dropdown-serverside__selected-values > * {
    display: none;
}

.osui-dropdown-serverside--only-arrow .osui-dropdown-serverside__selected-values {
    margin-right: var(--space-none);
}

.osui-dropdown-serverside--only-arrow .osui-dropdown-serverside__selected-values:after {
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

.osui-dropdown-serverside--only-arrow.osui-dropdown-serverside:has(.osui-dropdown-serverside--is-opened):has(.osui-balloon) .osui-dropdown-serverside__selected-values:after {
    transform: translate(-50%,-50%) rotate(180deg);
}

/* ===================================================================== */
/*  $6 - Patterns - Digital SG                                           */
/* ===================================================================== */

/* Feedback */
html.popup-disable-scroll:has(.cr-feedback--side) {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

[data-popup-backdrop]:has(.cr-feedback) {
    background: transparent;
}

[data-popup-backdrop] .popup-dialog:has(.cr-feedback) {
    background-color: #fff;
    border: 1px solid #DEE2E6;
    border-radius: 16px;
    box-shadow: 0 5px 10px 0 rgba(10, 20, 30, 0.2);
    margin: 16px;
    padding: 16px;
}

[data-popup-backdrop] .popup-dialog:has(.cr-feedback--modal) {
    padding: 32px;
}

[data-popup-backdrop]:has(.cr-feedback--modal) {
    background-color: rgba(0,0,0,0.25);
}

/* Image Circular */
.image-circular {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.image-circular img {
    border-radius: 100%;
    height: 35px;
    min-width: 35px;
    overflow: hidden;
    width: 35px;
}

.image-circular.has-border img {
    border: var(--border-size-s) solid var(--color-white);
}

.image-circular.has-shadow img {
    box-shadow: var(--shadow-s);
}

.image-circular.size-xl img {
    height: 60px;
    min-width: 60px;
    width: 60px;
}

.image-circular.size-l img {
    height: 45px;
    min-width: 45px;
    width: 45px;
}

.image-circular.size-m img {
    height: 35px;
    min-width: 35px;
    width: 35px;
}

.image-circular.size-s img {
    height: 30px;
    min-width: 30px;
    width: 30px;
}

.image-circular.size-xs img {
    height: 24px;
    min-width: 24px;
    width: 24px;
}

/* Icon Dropdown */
.dropdown.icon-dropdown {
    font-family: inherit!important; /* overlap OutSystemsUI important */
    position: relative;
    text-align: right;
}

.dropdown.icon-dropdown .dropdown-header {
    display: inline-flex;
    justify-content: center;
    width: 42px;
}

.dropdown .dropdown-icon {
    display: flex;
}

.dropdown .dropdown-header-text:empty {
    display: none;
}

.dropdown .dropdown-header-text {
    align-items: center;
    display: flex;
    flex: 1;
    margin-right: var(--space-s);
}

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

.dropdown.is--visible .dropdown-icon {
    color: var(--color-neutral-8);
}

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

.dropdown.icon-dropdown .dropdown-icon .fa {
    font-family: 'osicons-v2';
}

.dropdown.icon-dropdown .dropdown-icon .fa-angle-down:before {
    content: var(--osicons-options);
}

.dropdown.icon-dropdown .dropdown-content {
    font-size: var(--font-size-s);
    text-align: left;
    
    
}

.dropdown.icon-dropdown .dropdown-content-list {
    right: 0;
}

.dropdown .dropdown-content .dropdown-content-list {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-neutral-6);
    box-shadow: none;
    font-size: var(--font-size-s);
    min-width: 100%;
    width: auto;
}

.dropdown .dropdown-content .dropdown-content-list a {
    white-space: nowrap;
}

.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: var(--color-neutral-0);
    text-decoration: none;
}

.dropdown.icon-dropdown.simple .dropdown-header.select {
    border: var(--border-size-m) solid var(--color-neutral-1);
}

.dropdown.icon-dropdown.simple .dropdown-header:hover {
    border-color: var(--color-neutral-4);
}

.dropdown.icon-dropdown.simple .dropdown-icon {
    padding: 0;
}

.dropdown.icon-dropdown.simple .dropdown-icon .fa {
    font-size: var(--font-size-h5);
}

.dropdown.icon-dropdown.icon-dropdown--small .dropdown-icon .fa {
    font-size: var(--font-size-s);
}

.dropdown.icon-dropdown.icon-dropdown--small .dropdown-header {
    height: var(--space-l);
    padding: 0;
    width: var(--space-l);
}

/* Image Circle Group */
.image-circle-group .image-circular {
    border: var(--border-size-s) solid var(--color-white);
    width: 25px;
}
.image-circle-group .image-circular.size-xl {width: 40px;}
.image-circle-group .image-circular.size-l  {width: 35px;}
.image-circle-group .image-circular.size-m  {width: 25px;}
.image-circle-group .image-circular.size-s  {width: 20px;}
.image-circle-group .image-circular.size-xs {width: 18px;}

/* Alert Digital */
.alert-digital {
    color: var(--color-white);
    display: none;
}

.alert-digital:not(.is--hidden) {
    display: block;
}

.layout-top .content .alert-digital .ThemeGrid_Container,
.alert-digital .ThemeGrid_Container {
    padding-bottom: 15px;
    padding-top: 15px;
}

.alert-digital__container {
    position: relative;
}

.alert-digital__icon {
    font-size: var(--font-size-h3);
    width: 32px;
}

.alert-digital__icon .fa-fw {
    vertical-align: top;
}

.alert-digital__text {
    display: inline-block;
    margin-left: 10px;
    width: calc(100% - 45px);
}

.alert-digital__close,
.alert-digital__close-custom {
    cursor: pointer;
    font-size: var(--font-size-xl);
    position: absolute;
    right: 0;
    top: 0;
}

/* Navigation Item Group */
.phone .navigation-item-group {
    overflow: auto;
    white-space: nowrap;
}

/* Navigation Item */
.navigation-item,
.navigation-item a {
    color: var(--color-neutral-5);
}

.navigation-item a {
    display: inline-block;
    padding: 10px 15px;
    position: relative;
}

.navigation-item a:before {
    background-color: var(--color-primary);
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: all 200ms ease;
    width: 100%;
}

.phone .navigation-item a:before {
    bottom: 0;
}

.navigation-item--active,
.navigation-item--active a {
    color: var(--color-primary);
    font-weight: var(--tk-font-weight-l);
}

.navigation-item a:hover {
    text-decoration: none;
}

.navigation-item a:hover:before,
.navigation-item--active a:before {
    opacity: 1;
}

/* Header Wrapper */
.header-wrapper {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-1);
}

/* Separator Dot */
.separator-dot {
    text-align: center;
    width: 25px;
}

.separator-dot:before {
    background-color: #BDC5C7;
    border-radius: 100%;
    content: "";
    height: 5px;
    width: 5px;
}

/* Balloon Fixed */
.balloon-fixed {
    height: 20px;
    left: 20px;
    position: relative;
    width: 20px;
    z-index: 1;
}

.balloon-fixed.width-s .balloon-fixed__container {width: 200px;}
.balloon-fixed.width-m .balloon-fixed__container {width: 340px;}
.balloon-fixed.width-l .balloon-fixed__container {width: 600px;}

.balloon-fixed__container {
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-2);
    border-radius: 4px;
    box-shadow: var(--shadow-s);
    padding: var(--space-base) var(--space-m);
    position: absolute;
    top: -20px;
}

.balloon-fixed__container:before {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-1);
    border-left: 1px solid var(--color-neutral-1);
    content: "";
    height: 10px;
    left: -6px;
    position: absolute;
    top: 20px;
    transform: rotate(45deg);
    width: 10px;
}

.balloon-fixed__title {
    font-weight: var(--tk-font-weight-l);
}

/* LinkLikeTabWrapper */
.link-like-tab-wrapper {
    border-bottom: 1px solid var(--color-neutral-0);
    width: 100%;
}

/* Link Like Tab */
.link-like-tab a {
    color: var(--color-neutral-4);
    display: inline-block;
    padding: 10px 20px;
    position: relative;
}

.link-like-tab a:before {
    background-color: var(--color-neutral-1);
    bottom: -1px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
}

.link-like-tab a:hover {
    color: var(--color-neutral-8);
    text-decoration: none;
}

.link-like-tab a:hover:before {
    background-color: var(--color-neutral-1);
}

.link-like-tab a.active {
    color: var(--color-primary);
    font-weight: var(--tk-font-weight-l);
}

.link-like-tab a.active:before {
    background-color: var(--color-primary);
    height: 2px;
}

/* Layout Popup */
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: 0 !important; /* important to overlap OSUI important */
}

.title-popup {
    font-size: var(--font-size-xl);
    font-weight: var(--tk-font-weight-l);
    padding: var(--space-m);
    padding-bottom: var(--space-l);
}

.title-popup:empty {
    display: none;
}

.main-popup {
    flex: 1;
    min-height: 140px;
}

.all-popup {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.all-popup.has-margins .main-popup {
    padding: 0 var(--space-m) var(--space-xl) var(--space-m);
}

.all-popup.popup-content-vertical-align .main-popup {
    align-items: center;
    display: flex;
}

.all-popup.has-action-border .actions-popup {
    border-top: 1px solid var(--color-neutral-1);
}

.all-popup.has-action-border .actions-popup:empty,
.actions-popup:empty {
    display: none;
}

.actions-popup {
    padding: var(--space-m);
}

/* Loader Overlay */
.loader-overlay { 
    background-color: rgba(255, 255, 255, 0.9);
    bottom: 0;
    display: none;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1000;/*because of menu*/
    
    
    
}


.loader-overlay.js-loader-overlay--show {
    display: block;
    -webkit-animation: showOverlay 0.2s linear 1;
            animation: showOverlay 0.2s linear 1;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

@keyframes showOverlay {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes showOverlay {
  0% {
    opacity: 0;
  }

  100% {
   opacity: 1;
  }
}

.loader-overlay__container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    
    
}

/* TeamMembers */
.os-team-members {
    display: flex;
}

.phone .os-team-members {
    flex-direction: column;
}

.os-team-members.has-border {
    border: var(--border-size-s) solid var(--color-neutral-1);
    border-radius: var(--border-radius-mid-rounded);
}

.os-team-members.has-padding {
    padding: var(--space-m);
}

.phone .os-team-members.has-padding {
    padding: 0;
}

.os-team-members__actions {
    display: inline-block;
    padding-right: var(--space-m);
    width: 50%;
}

.phone .os-team-members__actions {
    padding: var(--space-m);
    width: 100%;
}

.os-team-members__title {
    font-size: var(--font-size-l);
    font-weight: var(--tk-font-weight-l);
    margin-bottom: var(--space-s);
}

.os-team-members__title:empty {
    display: none;
}

.os-team-members__input {
    display: inline-block;
    width: calc(100% - 35px);
}

.os-team-members__add {
    display: inline-block;
    margin-top: var(--space-s);
    text-align: right;
    vertical-align: top;
    width: 35px;
}

.os-team-members__add a:hover {
    text-decoration: none;
}

.os-team-members__add a:hover .osicons-v2-plus {
    border: var(--border-size-s) solid var(--color-neutral-8);
    color: var(--color-neutral-8);
}

.os-team-members__add .osicons-v2-plus {
    align-items: center;
    border: var(--border-size-s) solid var(--color-neutral-1);
    border-radius: var(--border-radius-circle);
    color: var(--color-neutral-1);
    display: inline-flex;
    height: 24px;
    transition: all 200ms ease;
    width: 24px;
}

.os-team-members__add .osicons-v2-plus:before {
    text-align: center;
    width: 100%;
}

.os-team-members__right {
    border-left: var(--border-size-s) solid var(--color-neutral-1);
    display: inline-block;
    min-height: 40px;
    padding-left: var(--space-m);
    vertical-align: top;
    width: 50%;
}

.phone .os-team-members__right {
    border-left: 0;
    border-top: var(--border-size-s) solid var(--color-neutral-1);
    padding: var(--space-m);
    width: 100%;
}

.os-team-members__list:empty {
    display: none;
}

.os-team-members__empty-msg {
    align-items: center;
    display: none;
    height: 100%;
}

.os-team-members__list:empty + .os-team-members__empty-msg {
    color: var(--color-neutral-4);
    display: flex;
    font-size: var(--font-size-s);
    width: 100%;
}

/* Select2 Country Phone Prefix */
.select2-country-phone-prefix {
    border: var(--border-size-s) solid var(--color-neutral-1);
    border-radius: var(--border-radius-mid-rounded);
    display: flex;
    height: 40px;
}

.select2-country-phone-prefix__select {
    width: 110px;
}

.select2-country-phone-prefix__select .select2-container {
    height: 40px;
}

.select2-country-phone-prefix__select .select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 0;
    height: 100%;
}

.select2-country-phone-prefix__select .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 100%;
    line-height: 40px;
}

.select2-country-phone-prefix__select .select2-container .select2-selection--single {
    display: flex;
    height: 40px;
    line-height: 40px;
}

.select2-country-phone-prefix__select .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 10px;
}

.select2-country-phone-prefix__select .select2-selection--single .select2-selection__arrow {
    top: 6px;
}

.select2-country-phone-prefix__select .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-country-phone-prefix__select .select2-selection--single .select2-selection__arrow:before {
    content: var(--osicons-arrow-down);
    font-family: osicons-v2;
}

.select2-country-phone-prefix__select .select2-container--open .select2-selection--single .select2-selection__arrow:before {
    content: var(--osicons-arrow-up);
}
 
.select2-country-phone-prefix__input .input,
.select2-country-phone-prefix__input .input:hover,
.select2-country-phone-prefix__input .input:focus {
    border: 0;
    height: 38px;
}

.select2-container--phone-prefix .select2-results__option {
    white-space: nowrap;
}

.select2-container--phone-prefix .select2-dropdown--below {
    width: auto!important; /* To overlap select2 inline style */
}

.select2-container--phone-prefix .img-flag {
    width: 21px;
}

.select2-container--phone-prefix .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}

select2-country-phone-prefix__input {
    flex: 1;
}

/* RatingStars */
.os-rating-stars .os-rating-stars__star {
    color: var(--color-yellow);
    cursor: default;
    font-size: var(--font-size-h2);
    padding: 0 3px;
}

.os-rating-stars.os-rating-stars__size-s .os-rating-stars__star {
    font-size: var(--font-size-m);
    padding: 0 2px;
}

.os-rating-stars.os-rating-stars__size-m .os-rating-stars__star {
    font-size: var(--font-size-h5);
}

.os-rating-stars.editable .os-rating-stars__star {
    cursor: pointer;
}

.os-rating-stars td:nth-child(1) .os-rating-stars__star {
    padding-left: 0;
}

.os-rating-stars td:nth-child(5) .os-rating-stars__star {
    padding-right: 0;
}

.os-rating-stars.editable .star1 td:nth-child(1) .os-rating-stars__star:before,
.os-rating-stars.editable .star2 td:nth-child(1) .os-rating-stars__star:before,
.os-rating-stars.editable .star2 td:nth-child(2) .os-rating-stars__star:before,
.os-rating-stars.editable .star3 td:nth-child(1) .os-rating-stars__star:before,
.os-rating-stars.editable .star3 td:nth-child(2) .os-rating-stars__star:before,
.os-rating-stars.editable .star3 td:nth-child(3) .os-rating-stars__star:before,
.os-rating-stars.editable .star4 td:nth-child(1) .os-rating-stars__star:before,
.os-rating-stars.editable .star4 td:nth-child(2) .os-rating-stars__star:before,
.os-rating-stars.editable .star4 td:nth-child(3) .os-rating-stars__star:before,
.os-rating-stars.editable .star4 td:nth-child(4) .os-rating-stars__star:before,
.os-rating-stars.editable .star5 .os-rating-stars__star:before {
    content: var(--osicons-star-full);
}

/*  CR Rating  */
.cr-rating {
    width: 272px;
}

.cr-rating__fieldset {
    margin: 0px;
    padding: 0px;
}

.cr-rating__wrapper {
    gap: 8px;
}

.cr-rating__input {
    border-radius: 8px;
    height: 48px;
    width: 48px;
}

.cr-rating__button {
    color: #101213;
    background-color: #E9ECEF;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    height: 48px;
    width: 48px;
}

.cr-rating__input:hover + label .cr-rating__button {
    background-color: #CED4DA;
}

.cr-rating__input:focus-visible + label .cr-rating__button {
    outline: 1px dotted #4D4AE6;
}

.cr-rating__input:checked + label .cr-rating__button {
    background-color: #101213;
    color: #fff; 
}

.cr-rating__button--star,
.cr-rating__input:checked + label .cr-rating__button--star {
    background-color: transparent;
    color: #E9ECEF;
    font-size: 32px;
}

.cr-rating__button--star-selected i {
    color: #FDB515;
}

.cr-rating__input:hover  + label .cr-rating__button--star {
    background-color: transparent;
    color: #A0A19D;
}

.cr-rating__labels {
    color: #767773;
    font-size: 14px;
    gap: 16px;
    justify-content: space-between;
    margin-top: 8px;
}

/* File Upload UI */
.upload-file .upload {
    background: var(--color-white);
    border: var(--border-size-s) dashed var(--color-neutral-2);
    border-radius: var(--tk-component-border-radius-200);
    justify-content: center;
    flex-direction: column;
    max-width: 400px;
    min-height: 140px;
    text-align: center;
}

.upload-file .upload .icon {
    background-image: url("https://www.outsystems.com/PartnersArea_Iframe/img/DigitalUIReact_Th.UploadIcon__a1kaPkenJ9GHh62jL7Pg.svg?a1k+aPkenJ9GH+h62jL7Pg");
    height: 32px;
    margin-right: var(--space-none);
    margin-bottom: var(--space-base);
    width: 32px;
}

.upload-file .upload .icon:before {
    content: '';
    display: inline-block;
    font-family: osicons-v2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 30px;
    font-style: normal;
    font-variant: normal;
    font-weight: var(--font-medium);
    opacity: 0;
    speak: none;
    text-transform: none;
    transition: var(--transition-fade);
    vertical-align: baseline;
}

.upload-file.upload-image-withoverlay .icon {
    display: none
}

.upload-file .upload span {
    margin-left: var(--space-none);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-upload].upload-image-withoverlay .change-image {
    color: var(--color-neutral-9);
}

[data-upload].upload-image-withoverlay .change-image .icon {
    display: none;
}

[data-upload].upload-image-withoverlay img:not([src]) {
    content: url("https://www.outsystems.com/PartnersArea_Iframe/img/DigitalUIReact_Th.UploadIcon__a1kaPkenJ9GHh62jL7Pg.svg?a1k+aPkenJ9GH+h62jL7Pg");
    height: 32px;
    width: 32px;
}

.upload-file .uploaded {
    background-color: var(--color-success-lighter);
    border: var(--border-size-s) solid var(--color-success-light);
}

.upload-file .uploaded .icon,
[data-upload].upload-image-withoverlay.uploaded .change-image {
    background-color: var(--color-success-lighter);
}

.upload-file .uploaded .icon:before {
    color: var(--color-success);
    content: var(--osicons-validated);
    opacity: 1;
}

.upload-file .uploaded .icon,
.upload-file .not-valid .icon {
    background-image: none;
    margin-bottom: var(--space-s);
}

.upload-file .not-valid {
    background-color: var(--color-error-lighter);
    border: var(--border-size-s) solid var(--color-error-light);
}

.upload-file .not-valid .icon,
[data-upload].upload-image-withoverlay.not-valid .change-image {
    background-color: var(--color-error-lighter);
}

.upload-file .not-valid .icon:before {
    color: var(--color-red-light);
    content: var(--osicons-warning);
    opacity: 1;
}

/* EllipsisMultiLines */
.ellipsis-multilines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.ellipsis-multilines.lines-1 {-webkit-line-clamp: 1;}
.ellipsis-multilines.lines-2 {-webkit-line-clamp: 2;}
.ellipsis-multilines.lines-3 {-webkit-line-clamp: 3;}
.ellipsis-multilines.lines-4 {-webkit-line-clamp: 4;}
.ellipsis-multilines.lines-5 {-webkit-line-clamp: 5;}

/* UserInitials */
.user-avatar-xs {
    font-size: 7px;
    height: 16px;
    line-height: 15px;
    width: 16px;
}

.user-avatar-s {
    font-size: 10px;
    line-height: 15px;
}

.user-avatar-l {
    font-size: 18px;
    height: 48px;
    line-height: 27px;
    width: 48px;
}

.user-avatar-xl {
    font-size: 20px;
    height: 56px;
    line-height: 30px;
    width: 56px;
}

/* Drag and Drop */
.multiple-file-upload-file__list {
    border: 1px solid var(--color-neutral-1);
}

/* ===================================================================== */
/*  $7 - Widgets & RichWidgets                                           */
/* ===================================================================== */

/* Pagination */
.ListNavigation_Wrapper {
    display: inline-flex;
}

a.ListNavigation_Previous,
span.ListNavigation_DisabledPrevious,
a.ListNavigation_Next,
span.ListNavigation_DisabledNext {
    font-family: osicons-v2;
}

.phone a.ListNavigation_Previous,
.phone span.ListNavigation_DisabledPrevious,
.phone a.ListNavigation_Next,
.phone span.ListNavigation_DisabledNext,
.phone a.ListNavigation_PageNumber,
.phone span.ListNavigation_CurrentPageNumber,
.phone span.ListNavigation_Ellipsis {
    height: 40px;
    width: 40px;
}

a.ListNavigation_Previous:before,
span.ListNavigation_DisabledPrevious:before {
    content: var(--osicons-arrow-left);
    font-size: var(--font-size-l);
}

a.ListNavigation_Next:before,
span.ListNavigation_DisabledNext:before {
    content: var(--osicons-arrow-right);
    font-size: var(--font-size-l);
}

.ListNavigation_PageNumber:hover,
.ListNavigation_Previous:hover,
.ListNavigation_Next:hover,
a.ListNavigation_Previous,
a.ListNavigation_Next,
.ListNavigation_PageNumber {
    background-color: var(--color-transparent);
    border: var(--border-size-m) solid var(--color-transparent);
    color: var(--color-blue);
}

.ListNavigation_CurrentPageNumber {
    background: var(--color-transparent);
    border: var(--border-size-m) solid var(--color-neutral-8);
    color: var(--color-neutral-8);
    height: 28px;
    width: 28px;
}

span.ListNavigation_DisabledPrevious,
span.ListNavigation_DisabledNext {
    background-color: var(--color-transparent);
    border: var(--border-size-m) solid var(--color-transparent);
    color: var(--color-neutral-1);
}

/* Search Deprecated */
.search .form-control {
    border-color: var(--color-neutral-4);
    border-radius: var(--tk-component-border-radius-200);
    font-size: var(--font-size-l);
    height: 48px;
    line-height: 27px;
}

.search .form-control[data-input] {
    color: var(--color-neutral-8);
    font-size: var(--font-size-base);
    height: var(--space-xl);
    padding-left: var(--space-xxl);
}

.search .search-input:after {
    color: var(--color-neutral-3);
    content: var(--osicons-search);
    font-family: osicons-v2; 
    font-size: var(--font-size-base);
    left: var(--space-base);
}

.search:focus-within .search-input:after {
    color: var(--color-neutral-3);
}

/* Deprecated Search Sizes */
.search.input-small .form-control[data-input],
.search.input-small .search-input:after {
    font-size: var(--font-size-s);
}

.search.input-large .form-control[data-input],
.search.input-large .search-input:after {
    font-size: var(--font-size-l);
}

.phone .search.input-small .form-control,
.tablet .search.input-small .form-control,
.search.input-small .form-control {
    height: var(--space-l);
}

.phone .search.input-large .form-control,
.tablet .search.input-large .form-control,
.search.input-large .form-control {
    height: var(--space-xxl);
}

/* Search */
.osui-search .form-control[data-input] {
    background-image: none;
    padding-left: var(--space-xxl);
}

.osui-search:after {
    color: var(--color-neutral-3);
    content: var(--osicons-search);
    font-family: osicons-v2;
    font-size: var(--font-size-base);
    left: var(--space-base);
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Search Sizes */
.osui-search.input-small .form-control[data-input], 
.osui-search.input-small:after {
    font-size: var(--font-size-s);
}

.osui-search.input-small .form-control[data-input] {
    height: var(--space-l);
}

.osui-search.input-large .form-control[data-input], 
.osui-search.input-large:after {
    font-size: var(--font-size-l);
}

.osui-search.input-large .form-control[data-input] {
    height: var(--space-xxl);
}

/* Switch */
[data-switch]:empty:before {
    background-color: var(--color-neutral-4);
    border: var(--border-size-s) solid var(--color-neutral-4);
}

[data-switch]:empty:hover:before {
    background-color: var(--color-neutral-6);
    border: var(--border-size-s) solid var(--color-neutral-6);
}

[data-switch]:checked:before {
    background-color: var(--color-turquoise-dark);
    border: var(--border-size-s) solid var(--color-turquoise-dark);
}

[data-switch]:checked:hover:before {
    background-color: var(--color-turquoise);
    border: var(--border-size-s) solid var(--color-turquoise);
}

/* Switch Disabled */
[data-switch][disabled]:empty:before {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-2);
}

[data-switch][disabled]:empty:after {
    background-color: var(--color-white);
}

[data-switch] {
   height: 24px;
   width: 48px;
}

[data-switch]:after { 
    height: 16px;
    top: 5px;
    width: 16px;
} 

[data-switch]:empty:before {
    height: 24px;
    width: 48px;
}

[data-switch]:empty:after {
    height: 16px;
    transform: translateX(4px) translateZ(0);
    -webkit-transform: translateX(4px) translateZ(0); /* override UI */
    top: 5px;
    width: 16px;
}

[data-switch]:checked:after {
    transform: translateX(28px) translateZ(0);
    -webkit-transform: translateX(28px) translateZ(0); /* override UI */
}

.switch.inverted-switch,
[data-switch].inverted-switch {
    transform: rotate(180deg);
    top: 2px; /* to align the span div from OSUI */
}

/* Switch Mobile */
.phone [data-switch] {
    height: 32px;
    width: 56px;
}

.phone [data-switch]:empty:before {
    height: 32px;
    width: 56px;
}

.phone [data-switch]:checked:after {
    transform: translateX(28px) translateZ(0);
    -webkit-transform: translateX(28px) translateZ(0); /* override UI */
}

.phone [data-switch]:after { 
    height: 24px;
    width: 24px;
} 

.phone [data-switch]:empty:hover:before {
    background-color: var(--color-neutral-4);
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.phone [data-switch]:checked:hover:before {
    background-color: var(--color-turquoise);
    border: var(--border-size-s) solid var(--color-turquoise);
}

/* Button Group */
[data-button-group] > div {
    background-color: var(--color-neutral-4);
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
}

[data-button-group-item] {
    flex: 1;
}

.button-group .btn { /* Needed for teams that duplicated the traditional structure  */
    border: var(--border-size-s) solid var(--color-turquoise-dark);
    color: var(--color-neutral-6);
}

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

.button-group-item,
.tablet .button-group-item, 
.phone .button-group-item {
    align-items: center;
    background-color: var(--color-white);
    border: /*var(--border-size-m) solid var(--color-neutral-4);*/ var(--border-size-none);
    color: var(--color-neutral-8);
    display: inline-flex;  
    font-size: var(--font-size-base);
    font-weight: var(--tk-font-weight-base);
    justify-content: center;
    height: 36px;
    line-height: 1.5;                                    
    padding: 0 var(--tk-component-padding);
    transition: /*all 200ms ease;*/ background-color 200ms ease, color 200ms ease;
    white-space: nowrap;
}

.button-group-item:hover {
    background-color: var(--color-turquoise);
    border-color: var(--color-neutral-4);
    color: var(--color-neutral-8);
    z-index: 1;
}

.button-group-item:first-child {
    border-radius: var(--tk-component-border-radius-200) var(--border-radius-none) var(--border-radius-none) var(--tk-component-border-radius-200);
}

.button-group-item:last-child {
    border-radius: var(--border-radius-none) var(--tk-component-border-radius-200) var(--tk-component-border-radius-200) var(--border-radius-none);
}

.button-group--small .button-group-item {
    font-size: var(--font-size-s);
    height: 28px;
    padding: 0 var(--tk-component-padding);
}

.button-group--large .button-group-item {
    font-size: var(--font-size-l);
    height: 36px;
}

.button-group-item.button-group-selected-item {
    background-color: var(--color-turquoise-dark);
    border-color: var(--color-turquoise-dark);
    color: var(--color-white);
    height: calc(36px + 4px);
    margin: calc(-1 * 2px);
    width: calc(100% + 4px);                           
}

.button-group-item.button-group-selected-item:hover {
    background-color: var(--color-turquoise);
    border-color: var(--color-turquoise);
    color: var(--color-neutral-8);
}

.button-group-item[disabled],
.button-group-item[disabled].button-group-selected-item {
    background-color: var(--color-neutral-1);
    border-color: var(--color-neutral-2);
    border-width: var(--border-size-m);
    color:  var(--color-neutral-4);
    height: calc(36px + 4px);
    margin: calc(-1 * 2px);
    width: calc(100% + 4px);
}

.button-group--small .button-group-item.button-group-selected-item,
.button-group--small .button-group-item[disabled], 
.button-group--small .button-group-item[disabled].button-group-selected-item {
   height: calc(28px + 4px);
}

.button-group-item [data-block*="DigitalUI_Content.Tag"] {
    line-height: 1;
}

.button-group-item[disabled] .tag {
    background-color: var(--color-neutral-0);
    color: var(--color-neutral-8);
}

/* Button Group with Badge */
.button-group .badge,
.button-group--large .badge,
.button-group--small .badge {
    font-size: var(--font-size-xxs);
    height: 18px;
    margin-left: var(--space-s);
    min-width: 18px;
}

/*  Overflow Menu */
.osui-overflow-menu {
    --border-radius-rounded: var(--tk-component-border-radius-200);
}

.osui-overflow-menu__trigger {
    background-color: var(--tk-btn-bg-dark-inv);
    border-color: var(--tk-btn-border-color-dark-inv);
    color: var(--tk-btn-color-dark-inv);
    font-size: var(--font-size-base);
    font-weight: var(--tk-font-weight-btn);
    height: var(--tk-btn-height-m);
    padding: var(--space-none) var(--tk-btn-padding-base);
    width: var(--tk-btn-height-m);
}

.osui-overflow-menu--is-open .osui-overflow-menu__trigger {
    background-color: var(--tk-btn-bg-dark-inv);
}

.osui-overflow-menu__balloon a {
    color: var(--color-neutral-8);
    text-decoration: none;
    white-space: nowrap;
}

.osui-overflow-menu__balloon a:hover {
    background-color: var(--color-neutral-0);
    color: var(--color-neutral-8);
}

.osui-overflow-menu__balloon a:not([class^=padding-]) {
    padding: var(--space-s) var(--space-base);
}

.tablet .osui-overflow-menu .osui-overflow-menu__trigger.btn,
.phone .osui-overflow-menu .osui-overflow-menu__trigger.btn {
    width: var(--tk-btn-height-m); 
}

/*  Ballon  */
.osui-balloon {
    --border-radius-rounded: var(--tk-component-border-radius-200);
    background-color: var(--color-white);
    border: var(--tk-input-border-width) solid var(--color-neutral-6);
    border-radius: var(--tk-component-border-radius-200);
    box-shadow: none;
    position: absolute;
    z-index: 3;
}

.osui-tabs__header-item .osui-balloon {
    text-align: left;
}

.osui-tabs__content .osui-balloon {
    position: fixed;
}

/* ===================================================================== */
/*  $8 - Custom                                                          */
/* ===================================================================== */
.display-flex           {display: flex; width: 100%;}
.display-inline-flex    {display: inline-flex; width: 100%;}
.display-inline         {display: inline;}
.display-inline-block   {display: inline-block;}
.display-table          {display: table; width: 100%;}
.display-table-cell     {display: table-cell;}
.display-block          {display: block;}
.display-none           {display: none;}

.align-items-baseline { align-items: baseline; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-items-start { align-items: flex-start; }
.align-items-stretch { align-items: stretch; }

.align-content-around { align-content: space-around; }
.align-content-between { align-content: space-between; }
.align-content-center { align-content: center; }
.align-content-end { align-content: flex-end; }
.align-content-start { align-content: flex-start; }
.align-content-stretch { align-content: stretch; }

.align-self-auto { align-self: auto; }
.align-self-baseline { align-self: baseline; }
.align-self-center { align-self: center; }
.align-self-end { align-self: flex-end; }
.align-self-start { align-self: flex-start; }
.align-self-stretch { align-self: stretch; }

.justify-content-around { justify-content: space-around; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-start { justify-content: flex-start; }

.phone .hide-on-phone,
.tablet .hide-on-tablet,
.desktop .hide-on-desktop {display: none;}

.cursor-pointer {
    cursor: pointer;
}

/* Taking out the sort icon from tableheaders*/
.table-header.no-sortable-icon .sortable-icon {
    display: none;
    height: var(--space-none);
    margin-left: var(--space-none);
    width: var(--space-none);
}

img.img-contain,
.img-contain {
    height: 100%;
    object-fit: contain;
}

/* ===================================================================== */
/*  $9 - Grid                                                            */
/* ===================================================================== */
.tablet .col-1-tablet  {width: 6.5359477124183%;}
.tablet .col-2-tablet  {width: 15.0326797385621%;}
.tablet .col-3-tablet  {width: 23.5294117647059%;}
.tablet .col-4-tablet  {width: 32.0261437908497%;}
.tablet .col-5-tablet  {width: 40.5228758169935%;}
.tablet .col-6-tablet  {width: 49.0196078431373%;}
.tablet .col-7-tablet  {width: 57.516339869281%;}
.tablet .col-8-tablet  {width: 66.0130718954248%;}
.tablet .col-9-tablet  {width: 74.5098039215686%;}
.tablet .col-10-tablet {width: 83.0065359477124%;}
.tablet .col-11-tablet {width: 91.5032679738562%;}
.tablet .col-12-tablet {width: 100%;}

.phone .col-1-phone  {width: 6.5359477124183%;}
.phone .col-2-phone  {width: 15.0326797385621%;}
.phone .col-3-phone  {width: 23.5294117647059%;}
.phone .col-4-phone  {width: 32.0261437908497%;}
.phone .col-5-phone  {width: 40.5228758169935%;}
.phone .col-6-phone  {width: 49.0196078431373%;}
.phone .col-7-phone  {width: 57.516339869281%;}
.phone .col-8-phone  {width: 66.0130718954248%;}
.phone .col-9-phone  {width: 74.5098039215686%;}
.phone .col-10-phone {width: 83.0065359477124%;}
.phone .col-11-phone {width: 91.5032679738562%;}
.phone .col-12-phone {width: 100%;}

/* ===================================================================== */
/*  $10 - Magic Classes                                                  */
/* ===================================================================== */
/* Fadein Hover Effect  */
.fade-in-hover-100 {
    opacity: .20;
}
.fade-in-hover-200 {
    opacity: .40;
}
.fade-in-hover-300 {
    opacity: .60;
}
.fade-in-hover-400 {
    opacity: .80;
}

[class*="fade-in-hover"] {
    transition: var(--tk-transition-fade);
}

[class*="fade-in-hover"]:hover {
    opacity: 1;
    text-decoration: none;
}

/* Special Class to add diferent hover effects */
.cronos-hover:hover {
    text-decoration: none;
}

/* ================================================================ */
/*  $2.1 - Styles - Typography                                      */
/* ================================================================ */

/* $2.1.1 - Styles - Typography - Sizes Desktop */
.font-size-display {
    color: var(--color-neutral-10);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-display);
    font-weight: var(--tk-font-weight-l);
    line-height: 1.25;
}

h1, .heading1,
h2, .heading2,
h3, .heading3,
h4, .heading4,
h5, .heading5,
h6, .heading6,
h7, .heading7,
h8, .heading8,
h9, .heading9 { 
    color: var(--color-neutral-10);
    font-family: var(--font-family-secondary);
    font-weight: var(--tk-font-weight-l);
    line-height: 1.25;
    margin: 0;
}

h1, .heading1 {font-size: var(--font-size-h1);}
h2, .heading2 {font-size: var(--font-size-h2);}
h3, .heading3 {font-size: var(--font-size-h3);}
h4, .heading4 {font-size: var(--font-size-h4);}
h5, .heading5 {font-size: var(--font-size-h5);}
h6, .heading6 {font-size: var(--font-size-h6);}
h7, .heading7 {font-size: var(--font-size-h7);}
h8, .heading8 {font-size: var(--font-size-h8);}
h9, .heading9 {font-size: var(--font-size-h9);}

a h1,
a h2,
a h3,
a h4,
a h5,
a h6,
a .heading1,
a .heading2,
a .heading3,
a .heading4,
a .heading5,
a .heading6 {
    color: inherit;
}

.input.font-size-base,
.font-size-base { font-size: var(--font-size-base); }
.input.font-size-xxl,
.font-size-xxl { font-size: var(--font-size-xxl); }
.input.font-size-xl,
.font-size-xl { font-size: var(--font-size-xl); }
.input.font-size-l,
.font-size-l { font-size: var(--font-size-l); }
.input.font-size-m,
.font-size-m { font-size: var(--font-size-m); }
.input.font-size-s,
.font-size-s { font-size: var(--font-size-s); }
.input.font-size-xs,
.font-size-xs { font-size: var(--font-size-xs); }
.input.font-size-xxs,
.font-size-xxs { font-size: var(--font-size-xxs); }

.max-width-initial {
    max-width: initial;
}

/* $2.1.4 - Styles - Typography - Transform */
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }

.text-nowrap {white-space: nowrap;}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-strike {
    text-decoration: line-through;
}

a.text-decoration-none,
a.text-decoration-none:visited,
a.text-decoration-none:hover,
a.text-decoration-none:visited:hover,
.text-decoration-none,
.text-decoration-none:hover {
    text-decoration: none;
}

.text-align-left   {text-align: left;}
.text-align-center {text-align: center;}
.text-align-right  {text-align: right;}


/* $2.1.5 - Styles - Typography - Weight */
.font-light { font-weight: var(--font-light); }
.font-regular { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semi-bold { font-weight: var(--font-semi-bold); }
.font-bold { font-weight: var(--font-bold); }


/* ================================================================ */
/*  $2.2 - Styles - Colors                                          */
/* ================================================================ */

/* $2.2.1 - Styles - Colors - Brand */
.background-primary { background-color: var(--color-primary); }
.background-secondary { background-color: var(--color-secondary); }

a.text-primary,
a.text-primary:visited,
.text-primary { color: var(--color-primary); }
a.text-secondary,
a.text-secondary:visited,
.text-secondary { color: var(--color-secondary); }

/* Background and Text Colors used when IsLight parameter for Badge / Tag / UserInitials is True */
.background-primary-lightest { background-color: var(--color-neutral-0); }
.background-secondary-lightest { background-color: var(--color-neutral-0); }

.text-primary-darker { color: var(--color-primary);}
.text-secondary-darker { color: var(--color-secondary); }


/* $2.2.2 - Styles - Colors - Extendend */
.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); }

a.text-red-light,
a.text-red-light:visited,
.text-red-light { color: var(--color-red-light); }
a.text-red,
a.text-red:visited,
.text-red { color: var(--color-red); }
a.text-red-dark,
a.text-red-dark:visited,
.text-red-dark { color: var(--color-red-dark); }
a.text-red-darker,
a.text-red-darker:visited,
.text-red-darker { color: var(--color-red-darker); }

.background-ruby-light  { background-color: var(--color-ruby-light); }
.background-ruby        { background-color: var(--color-ruby); }
.background-ruby-dark   { background-color: var(--color-ruby-dark); }
.background-ruby-darker { background-color: var(--color-ruby-darker); }

.text-ruby-light     { color: var(--color-ruby-light); }
.text-ruby           { color: var(--color-ruby); }
.text-ruby-dark      { color: var(--color-ruby-dark); }
.text-ruby-darker    { color: var(--color-ruby-darker); }

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

a.text-blue-lighter,
a.text-blue-lighter:visited,
.text-blue-lighter { color: var(--color-blue-lighter); }
a.text-blue-light,
a.text-blue-light:visited,
.text-blue-light { color: var(--color-blue-light); }
a.text-blue,
a.text-blue:visited,
.text-blue { color: var(--color-blue); }

.background-green-light,
.background-lime { background-color: var(--color-green-light); }
.background-green { background-color: var(--color-green); }
.background-green-dark { background-color: var(--color-green-dark); }

a.text-green-light,
a.text-lime,
a.text-green-light:visited,
a.text-lime:visited,
.text-green-light,
.text-lime { color: var(--color-green-light); }
a.text-green,
a.text-green:visited,
.text-green { color: var(--color-green); }
a.text-green-dark,
a.text-green-dark:visited,
.text-green-dark { color: var(--color-green-dark); }

.background-turquoise { background-color: var(--color-turquoise); }
.background-turquoise-dark { background-color: var(--color-turquoise-dark); }

a.text-turquoise,
a.text-turquoise:visited,
.text-turquoise { color: var(--color-turquoise); }
a.text-turquoise-dark,
a.text-turquoise-dark:visited,
.text-turquoise-dark { color: var(--color-turquoise-dark); }

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

.text-orange-light { color: var(--color-orange-light); }
.text-orange { color: var(--color-orange); }
.text-orange-dark { color: var(--color-orange-dark); }

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

a.text-yellow-light,
a.text-yellow-light:visited,
.text-yellow-light { color: var(--color-yellow-light); }
a.text-yellow,
a.text-yellow:visited,
.text-yellow { color: var(--color-yellow); }
a.text-yellow-dark,
a.text-yellow-dark:visited,
.text-yellow-dark { color: var(--color-yellow-dark); }

.background-black { background-color: var(--color-black); }
a.text-black,
a.text-black:visited,
.text-black { color: var(--color-black); }

.background-white { background-color: var(--color-white); }
a.text-white,
a.text-white:visited,
.badge.text-white,
.text-white { color: var(--color-white); }


/* $2.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); }

a.text-neutral-0:hover,
.text-neutral-0 { color: var(--color-neutral-0); }
a.text-neutral-1:hover,
.text-neutral-1 { color: var(--color-neutral-1); }
a.text-neutral-2:hover,
.text-neutral-2 { color: var(--color-neutral-2); }
a.text-neutral-3:hover,
.text-neutral-3 { color: var(--color-neutral-3); }
a.text-neutral-4:hover,
.text-neutral-4 { color: var(--color-neutral-4); }
a.text-neutral-5:hover,
.text-neutral-5 { color: var(--color-neutral-5); }
.text-neutral-6:visited,
a.text-neutral-6:hover,
.text-neutral-6 { color: var(--color-neutral-6); }
a.text-neutral-7:hover,
.text-neutral-7 { color: var(--color-neutral-7); }
a.text-neutral-8:hover,
.text-neutral-8 { color: var(--color-neutral-8); }
.text-neutral-9:visited,
a.text-neutral-9:hover,
.text-neutral-9 { color: var(--color-neutral-9); }
a.text-neutral-10:hover,
.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); }


/* $2.2.4 - Styles - Colors - Semantic */
.background-error-lighter { background-color: var(--color-error-lighter); }
.background-error-light { background-color: var(--color-error-light); }
.background-error { background-color: var(--color-error); }

.text-error-lighter { color: var(--color-error-lighter); }
.text-error-light { color: var(--color-error-light); }
.text-error { color: var(--color-error); }

.background-warning-lighter { background-color: var(--color-warning-lighter); }
.background-warning-light { background-color: var(--color-warning-light); }
.background-warning { background-color: var(--color-warning); }

.text-warning-lighter { color: var(--color-warning-lighter); }
.text-warning-light { color: var(--color-warning-light); }
.text-warning { color: var(--color-warning); }

.background-success-lighter { background-color: var(--color-success-lighter); }
.background-success-light { background-color: var(--color-success-light); }
.background-success { background-color: var(--color-success); }
.background-success-dark { background-color: var(--color-success-dark); }

.text-success-lighter { color: var(--color-success-lighter); }
.text-success-light { color: var(--color-success-light); }
.text-success { color: var(--color-success); }
.text-success-dark { color: var(--color-success-dark); }

.background-info-lighter { background-color: var(--color-info-lighter); }
.background-info-light { background-color: var(--color-info-light); }
.background-info { background-color: var(--color-info); }

.text-info-lighter { color: var(--color-info-lighter); }
.text-info-light { color: var(--color-info-light); }
.text-info { color: var(--color-info); }

.text-link { color: var(--color-link); }

.opacity-s {opacity: var(--opacity-s);}
.opacity-m {opacity: var(--opacity-m);}
.opacity-l {opacity: var(--opacity-l);}

/* Colors - Missing on DigitalUI from OSUI */
.background-cyan {background-color: var(--color-cyan);}
.background-teal {background-color:var(--color-teal);}
.background-indigo {background-color:var(--color-indigo);}
.background-violet {background-color:var(--color-violet);}
.background-grape {background-color:var(--color-grape);}
.background-pink {background-color:var(--color-pink);}

/* ================================================================ */
/*  $2.3 - Styles - Space                                           */
/* ================================================================ */

.height-full {height: 100%;}
.width-auto {width: auto;}
.width-full {width: 100%;}

/* $2.3.1 - Styles - Space - Padding */
.padding-none { padding: var(--space-none); }
.padding-xxs { padding: var(--space-xxs); }
.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); }
.padding-xxxl { padding: var(--space-xxxl); }


/* $2.3.2 - Styles - Space - Padding Top */
.padding-top-none { padding-top: var(--space-none); }
.padding-top-xxs { padding-top: var(--space-xxs); }
.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); }
.padding-top-xxxl { padding-top: var(--space-xxxl); }


/* $2.3.3 - Styles - Space - Padding Right */
.padding-right-none { padding-right: var(--space-none); }
.padding-right-xxs { padding-right: var(--space-xxs); }
.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); }
.padding-right-xxxl { padding-right: var(--space-xxxl); }


/* $2.3.4 - Styles - Space - Padding Bottom */
.padding-bottom-none { padding-bottom: var(--space-none); }
.padding-bottom-xxs { padding-bottom: var(--space-xxs); }
.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-xxxl { padding-bottom: var(--space-xxxl); }


/* $2.3.5 - Styles - Space - Padding Left */
.padding-left-none { padding-left: var(--space-none); }
.padding-left-xxs { padding-left: var(--space-xxs); }
.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); }
.padding-left-xxxl { padding-left: var(--space-xxxl); }


/* $2.3.6 - Styles - Space - Padding Vertical */
.padding-y-none {
    padding-top: var(--space-none);
    padding-bottom: var(--space-none);
}
.padding-y-xxs {
    padding-top: var(--space-xxs);
    padding-bottom: var(--space-xxs);
}
.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);
}

.padding-y-xxxl {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
}


/* $2.3.7 - Styles - Space - Padding Horizontal */
.padding-x-none {
    padding-left: var(--space-none);
    padding-right: var(--space-none);
}
.padding-x-xxs {
    padding-left: var(--space-xxs);
    padding-right: var(--space-xxs);
}
.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);
}
.padding-x-xxxl {
    padding-left: var(--space-xxxl);
    padding-right: var(--space-xxxl);
}


/* $2.3.8 - Styles - Space - Margin */
.phone .margin-none-phone,
.margin-none { margin: var(--space-none); }
.phone .margin-xxs-phone,
.margin-xxs { margin: var(--space-xxs); }
.phone .margin-xs-phone,
.margin-xs { margin: var(--space-xs); }
.phone .margin-s-phone,
.margin-s { margin: var(--space-s); }
.phone .margin-base-phone,
.margin-base { margin: var(--space-base); }
.phone .margin-m-phone,
.margin-m { margin: var(--space-m); }
.phone .margin-l-phone,
.margin-l { margin: var(--space-l); }
.phone .margin-xl-phone,
.margin-xl { margin: var(--space-xl); }
.phone .margin-xxl-phone,
.margin-xxl { margin: var(--space-xxl); }
.phone .margin-xxxl-phone,
.margin-xxxl { margin: var(--space-xxxl); }

.phone .margin-auto-phone,
.margin-auto { margin: 0 auto;}


/* $2.3.9 - Styles - Space - Margin Top */
.phone .margin-top-none-phone,
.margin-top-none { margin-top: var(--space-none); }
.phone .margin-top-xxs-phone,
.margin-top-xxs { margin-top: var(--space-xxs); }
.phone .margin-top-xs-phone,
.margin-top-xs { margin-top: var(--space-xs); }
.phone .margin-top-s-phone,
.margin-top-s { margin-top: var(--space-s); }
.phone .margin-top-base-phone,
.margin-top-base { margin-top: var(--space-base); }
.phone .margin-top-m-phone,
.margin-top-m { margin-top: var(--space-m); }
.phone .margin-top-l-phone,
.margin-top-l { margin-top: var(--space-l); }
.phone .margin-top-xl-phone,
.margin-top-xl { margin-top: var(--space-xl); }
.phone .margin-top-xxl-phone,
.margin-top-xxl { margin-top: var(--space-xxl); }
.phone .margin-top-xxxl-phone,
.margin-top-xxxl { margin-top: var(--space-xxxl); }


/* $2.3.10 - Styles - Space - Margin Right */
.phone .margin-right-none-phone,
.margin-right-none { margin-right: var(--space-none); }
.phone .margin-right-xxs-phone,
.margin-right-xxs { margin-right: var(--space-xxs); }
.phone .margin-right-xs-phone,
.margin-right-xs { margin-right: var(--space-xs); }
.phone .margin-right-s-phone,
.margin-right-s { margin-right: var(--space-s); }
.phone .margin-right-base-phone,
.margin-right-base { margin-right: var(--space-base); }
.phone .margin-right-m-phone,
.margin-right-m { margin-right: var(--space-m); }
.phone .margin-right-l-phone,
.margin-right-l { margin-right: var(--space-l); }
.phone .margin-right-xl-phone,
.margin-right-xl { margin-right: var(--space-xl); }
.phone .margin-right-xxl-phone,
.margin-right-xxl { margin-right: var(--space-xxl); }
.phone .margin-right-xxxl-phone,
.margin-right-xxxl { margin-right: var(--space-xxxl); }


/* $2.3.11 - Styles - Space - Margin Bottom */
.phone .margin-bottom-none-phone,
.margin-bottom-none { margin-bottom: var(--space-none); }
.phone .margin-bottom-xxs-phone,
.margin-bottom-xxs { margin-bottom: var(--space-xxs); }
.phone .margin-bottom-xs-phone,
.margin-bottom-xs { margin-bottom: var(--space-xs); }
.phone .margin-bottom-s-phone,
.margin-bottom-s { margin-bottom: var(--space-s); }
.phone .margin-bottom-base-phone,
.margin-bottom-base { margin-bottom: var(--space-base); }
.phone .margin-bottom-m-phone,
.margin-bottom-m { margin-bottom: var(--space-m); }
.phone .margin-bottom-l-phone,
.margin-bottom-l { margin-bottom: var(--space-l); }
.phone .margin-bottom-xl-phone,
.margin-bottom-xl { margin-bottom: var(--space-xl); } 
.phone .margin-bottom-xxl-phone,
.margin-bottom-xxl { margin-bottom: var(--space-xxl); }
.phone .margin-bottom-xxxl-phone,
.margin-bottom-xxxl { margin-bottom: var(--space-xxxl); }


/* $2.3.12 - Styles - Space - Margin Left */
.phone .margin-left-none-phone,
.margin-left-none { margin-left: var(--space-none); }
.phone .margin-left-xxs-phone,
.margin-left-xxs { margin-left: var(--space-xxs); }
.phone .margin-left-xs-phone,
.margin-left-xs { margin-left: var(--space-xs); }
.phone .margin-left-s-phone,
.margin-left-s { margin-left: var(--space-s); }
.phone .margin-left-base-phone,
.margin-left-base { margin-left: var(--space-base); }
.phone .margin-left-m-phone,
.margin-left-m { margin-left: var(--space-m); }
.phone .margin-left-l-phone,
.margin-left-l { margin-left: var(--space-l); }
.phone .margin-left-xl-phone,
.margin-left-xl { margin-left: var(--space-xl); }
.phone .margin-left-xxl-phone,
.margin-left-xxl { margin-left: var(--space-xxl); }
.phone .margin-left-xxxl-phone,
.margin-left-xxxl { margin-left: var(--space-xxxl); }


/* $2.3.13 - Styles - Space - Margin Vertical */
.margin-y-none {
    margin-top: var(--space-none);
    margin-bottom: var(--space-none);
}
.margin-y-xxs {
    margin-top: var(--space-xxs);
    margin-bottom: var(--space-xxs);
}
.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);
}
.margin-y-xxxl {
    margin-top: var(--space-xxxl);
    margin-bottom: var(--space-xxxl);
}


/* $2.3.14 - Styles - Space - Margin Horizontal */
.margin-x-none {
    margin-left: var(--space-none);
    margin-right: var(--space-none);
}
.margin-x-xxs {
    margin-left: var(--space-xxs);
    margin-right: var(--space-xxs);
}
.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);
}
.margin-x-xxxl {
    margin-left: var(--space-xxxl);
    margin-right: var(--space-xxxl);
}


/* ================================================================ */
/*  $2.4 - Styles - Border Radius                                   */
/* ================================================================ */
.border-radius-none { border-radius: var(--border-radius-none); }
.border-radius-soft-rounded { border-radius: var(--border-radius-soft-rounded); }
.border-radius-soft,
.border-radius-mid-rounded { border-radius: var(--border-radius-mid-rounded); }
.border-radius-rounded,
.border-radius-hard-rounded { border-radius: var(--border-radius-hard-rounded); }
.border-radius-circle { border-radius: var(--border-radius-circle); }


/* ================================================================ */
/*  $2.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; }

.border-white-m {
    border: var(--border-size-m) solid var(--color-white);
}

/* ================================================================ */
/*  $2.6 - Styles - Elevation/Shadows                               */
/* ================================================================ */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-s { box-shadow: var(--shadow-s); }
.shadow-m { box-shadow: var(--shadow-m); }
.shadow-l { box-shadow: var(--shadow-l); }


/* ===================================================================== */
/*  $11 - Accessibility                                     */
/* ===================================================================== */

.screen-reader-only {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}

/* ===================================================================== */
/*  $12 - Dark Mode                                                      */
/* ===================================================================== */

.layout.cronos-dmode {
    /* Color - Brand */   
    --color-primary: var(--color-ruby);
    --color-secondary: var(--color-purple);
    
    --color-primary-hover: var(--color-ruby);

    /* Color - Extended */
    --color-transparent: transparent;
    
    --color-red-light: #f85e40;
    --color-red: #f22800;
    --color-red-dark: #db2400;
    --color-red-darker: #bb1f00;

    --color-ruby-light: #FA1339;
    --color-ruby: #D90528;
    --color-ruby-dark: #EE3453;
    --color-ruby-darker: #EE1338;
    
    --color-blue-lighter: #38bdff;
    --color-blue-light: #32a9e5;
    --color-blue: #0077b3;

    --color-green-light: #2DD267;
    --color-green: #00802D;
    --color-green-dark: #005F21;

    --color-turquoise: #26B388;
    --color-turquoise-dark: #00BD85;

    --color-yellow-light: #fed06b;
    --color-yellow: #fdb515;
    --color-yellow-dark: #d99b11;

    --color-orange-light: #F39472;
    --color-orange: #E8794F;
    --color-orange-dark: #DF5C2C;

    --color-purple: #7238D1;

    /* Color - Black and White */
    --color-black: #FFFFFF;
    --color-white: #0F0E0B;

    /* Color - Neutral */
    --color-neutral-0: #53504A;
    --color-neutral-1: #61615C;
    --color-neutral-2: #72726C;
    --color-neutral-3: #82827E;
    --color-neutral-4: #92928F;
    --color-neutral-5: #A2A3A0;
    --color-neutral-6: #B3B4B1;
    --color-neutral-7: #C3C5C1;
    --color-neutral-8: #D4D5D1;
    --color-neutral-9: #E5E6E2;
    --color-neutral-10: #F5F7F3;
    
    /* Color - Semantic */
    --color-info-lighter: #B8CDFF;
    --color-info-light: #94B8FF;
    --color-info: #3377FF;
    
    --color-success-lighter: #D0F6BB;
    --color-success-light: #BAF49F;
    --color-success: #50C516;
    --color-success-dark: #3DB800;
    
    --color-warning-lighter: #FFE4B2;
    --color-warning-light: #FFDB94;
    --color-warning: #FFBB33;
    
    --color-error-lighter: #FCC1BA;
    --color-error-light: #FD9F96;
    --color-error: #EE1A07;

    --color-link: var(--color-link-400);
    
    /* App Settings */
    --color-background-body: #0F0E0B;

    /* Specific CSS to change */
    --tk-btn-color-primary: var(--color-black);

    background-color: #0F0E0B;
    color: var(--color-black);
}