@import url("/ServiceCenter/OSIconStyle.css?956&996&1095&1");

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

/*  Service Center Theme                                                 */

/*  $0 - CSS Variables / Fonts                                           */
/*  $1 - Resets                                                          */
/*  $2 - Layout                                                          */
/*       $2.1 - Layout - Header                                          */
/*              $2.1.1 - Layout - Header - Logo                          */
/*              $2.1.2 - Layout - Header - Menu                          */
/*              $2.1.3 - Layout - Header - Actions                       */
/*       $2.2 - Layout - Sub Header                                      */
/*       $2.3 - Layout - Content                                         */
/*       $2.4 - Layout - Login                                           */
/*  $3 - Elements                                                        */
/*       $3.1 - Elements - Buttons                                       */
/*       $3.2 - Elements - Inputs                                        */
/*       $3.3 - Elements - Checkbox                                      */
/*       $3.4 - Elements - Radio Button                                  */
/*  $4 - Patterns                                                        */
/*       $4.1  - Patterns - Alert                                        */
/*       $4.2  - Patterns - Application Info                             */
/*       $4.3  - Patterns - Calendar                                     */
/*       $4.4  - Patterns - Card                                         */
/*       $4.5  - Patterns - Columns                                      */
/*       $4.6  - Patterns - Dropdown                                     */
/*       $4.7  - Patterns - Dropdown Select                              */
/*       $4.8  - Patterns - Expand Collapse                              */
/*       $4.9  - Patterns - Feedback Ajax Wait                           */
/*       $4.10 - Patterns - File Upload                                  */
/*       $4.11 - Patterns - Loading Spinner                              */
/*       $4.12 - Patterns - Search                                       */
/*       $4.13 - Patterns - Scrollbar                                    */
/*       $4.14 - Patterns - Separator                                    */
/*       $4.15 - Patterns - Step                                         */
/*       $4.16 - Patterns - Table                                        */
/*       $4.17 - Patterns - Tabs                                         */
/*       $4.18 - Patterns - Teaser                                       */
/*       $4.19 - Patterns - Time Picker                                  */
/*       $4.20 - Patterns - Tooltip                                      */
/*       $4.21 - Patterns - Mini-hub                                     */
/*  $5 - Styles                                                          */
/*       $5.1 - Styles - Typography                                      */
/*       $5.2 - Styles - Colors                                          */
/*       $5.3 - Styles - Space                                           */
/*       $5.4 - Styles - Flex                                            */
/*       $5.5 - Styles - Shadow                                          */
/*       $5.6 - Styles - Utilities                                       */
/*  $6 - Responsive                                                      */
/*  $7 - Specific CSS                                                    */

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


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

    /* App Settings */
    --header-size: 56px;
    --border-radius: 4px;
    
    /* Color Brand */
    --color-brand-light: #dc988a;
    --color-brand: #cc2200; 
    --color-brand-dark: #aa1100; 
    
    /* Color - Neutral */
    --color-neutral-0: #fff;
    --color-neutral-1: #f7f8f9;
    --color-neutral-2: #f1f2f4;
    --color-neutral-3: #e0e2e4;
    --color-neutral-4: #cccdd0;
    --color-neutral-5: #a2a4a7;
    --color-neutral-6: #87898d;
    --color-neutral-7: #626568;
    --color-neutral-8: #3b3d41;
    --color-neutral-9: #2c2f32;
    --color-neutral-10: #202327;
    --color-neutral-11: #101214;
    
    /* Color - Selection */
    --color-selection-0: #dcecfd;
    --color-selection-1: #add1fb;
    --color-selection-2: #66aaf7;
    --color-selection-3: #157df3;
    --color-selection-4: #006de9;
    --color-selection-5: #0066db;
    --color-selection-6: #19487f;
    --color-selection-7: #123661;
    
    /* Color - Error */
    --color-error-0: #ffe9e5;
    --color-error-1: #ffa99d;
    --color-error-2: #ff5b40;
    --color-error-3: #f44224;
    --color-error-4: #e53518;
    --color-error-5: #cb371f;
    --color-error-6: #7e2314;
    --color-error-7: #43130b;
  
    /* Color - Success */
    --color-success-0: #e1f8d1;
    --color-success-1: #a0e869;
    --color-success-2: #75d625;
    --color-success-3: #60b21f;
    --color-success-4: #4e921a;
    --color-success-5: #448016;
    --color-success-6: #2f5c10;
    --color-success-7: #203e0b;
  
    /* Color - Warning */
    --color-warning-0: #fff1dc;
    --color-warning-1: #ffcc80;
    --color-warning-2: #ff9f0f;
    --color-warning-3: #ee8f00;
    --color-warning-4: #e58b00;
    --color-warning-5: #cb7b00;
    --color-warning-6: #6a4200;
    --color-warning-7: #432b00;    
    
    /* Typography */
    --font-size-display: 36px;   
  
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 26px;
    --font-size-h4: 22px;
    --font-size-h5: 20px;
    --font-size-h6: 16px;
  
    --font-size-base: 14px;
    --font-size-s: 12px;
    --font-size-xs: 9px; 

    /* Typography - Weight */
    --font-light: 300;
    --font-regular: 400;
    --font-semi-bold: 600;
    --font-bold: 700;
    
    /* Space */
    --space-xs: 4px;
    --space-s: 8px;
    --space-base: 16px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 40px;
    --space-xxl: 48px;
    
    /* Shadow */
    --shadow-level-0: 0px 0.2px 0.5px rgba(32, 35, 39, 0.08), 0px 0.6px 2.5px rgba(32, 35, 39, 0.17); 
    --shadow-level-1: 0px 0.45px 1.35px rgba(32, 35, 39, 0.11), 0px 1.8px 5.4px rgba(32, 35, 39, 0.13);
    --shadow-level-2: 0px 0.6px 1.8px rgba(32, 35, 39, 0.11), 0px 3.2px 7.2px rgba(32, 35, 39, 0.13);
    --shadow-level-3: 0px 1.2px 3.6px rgba(32, 35, 39, 0.11), 0px 6.4px 14.4px rgba(32, 35, 39, 0.13);
  
    /* Transition Time */
    --time-s: 110ms;
    --time-m: 150ms;
    --time-l: 150ms;
    --time-xl: 300ms;
  
   /* Transition Eases */
   --ease-in: ease-in;
   --ease-out: ease-out;
   --linear: linear;
   
   /* Color - Upgrades Page */
    --color-running: #468ebd;
    --color-canceled: #e29181;
    --color-finish-success: #a5d581;
    --color-finish-error: #FFD680;
}

.dark-theme {
    /* Shadow */
    --shadow-level-0: 0px 0.2px 24px rgba(0, 0, 0, 0.08), 0px 0.6px 2.5px rgba(0, 0, 0, 0.51); 
    --shadow-level-1: 0px 0.45px 1.35px rgba(0, 0, 0, 0.33), 0px 1.8px 5.4px rgba(0, 0, 0, 0.39);
    --shadow-level-2: 0px 0.6px 1.8px rgba(0, 0, 0, 0.33), 0px 3.2px 7.2px rgba(0, 0, 0, 0.39);
    --shadow-level-3: 0px 1.2px 3.6px rgba(0, 0, 0, 0.33), 0px 6.4px 14.4px rgba(0, 0, 0, 0.39);
}

@font-face {
    font-family: 'noto-sans';
    src:  url('/ServiceCenter/fonts/NotoSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'noto-sans';
    src:  url('/ServiceCenter/fonts/NotoSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'noto-sans';
    src:  url('/ServiceCenter/fonts/NotoSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'noto-sans';
    src:  url('/ServiceCenter/fonts/NotoSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* ===================================================================== */
/*  $1 - Resets                                                          */
/* ===================================================================== */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
    font-family: 'noto-sans', sans-serif;
    overflow-x: hidden;
    overflow: auto;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

body {
   background-color: var(--color-neutral-1);
   font-size: var(--font-size-s);
   color: var(--color-neutral-10);
   font-weight: 400;
   margin: 0;
}

.dark-theme body {
    background-color: var( --color-neutral-11);
    color: var(--color-neutral-2);
}

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

a {
    text-decoration: none;
    cursor: pointer;
}

a:-webkit-any-link {
    text-decoration: none;
    cursor: pointer;
}

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

.ponyfill-ready.sc-content {
    flex: none;
}

pre {
    margin: 0;
    word-wrap: break-word;
    white-space: pre-line;
}

input[type="time"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"] {
   display: inline-flex;
}

.FormEditPencil {
   display: none;
}


/* ===================================================================== */
/*  $2 - Layout                                                          */
/* ===================================================================== */
.sc-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.ie11 .sc-layout {
    display: none;
}

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

.sc-content {
    flex: 1;
}


/* ===================================================================== */
/*  $2.1 - Layout - Header                                               */
/* ===================================================================== */
.sc-header-wrapper {
    box-shadow: var(--shadow-level-1);    
    background-color: var(--color-neutral-0);
    border-bottom: 1px solid var(--color-neutral-3);
    position: relative;
    z-index: 3;
}

.dark-theme .sc-header-wrapper {
    background-color: var(--color-neutral-10); 
    border-bottom: 1px solid var(--color-neutral-8);   
}

.sc-header {
    padding: 0 var(--space-l);
    height: 56px; /* TODO: Create header-size variable */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.menu-icon {
    flex-direction: column;
    margin-right: var(--space-m);
    width: 24px;
    height: 100%;
    justify-content: center;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: none;
}

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

.dark-theme .menu-icon-line {
    background-color: var(--color-neutral-5);    
}


/* ===================================================================== */
/*  $2.1.1 - Layout - Header - Logo                                      */
/* ===================================================================== */
.sc-header-logo {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
}

.hide-light {
    display: none;
}

.dark-theme .hide-light {
    display: block;
}

.hide-dark {
    display: block;
}

.dark-theme .hide-dark {
    display: none;
}

/* ===================================================================== */
/*  $2.1.2 - Layout - Header - Menu                                      */
/* ===================================================================== */
.sc-navigation {
    display: flex;
    flex: 1;
}

.sc-header-menu {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: inline-flex;
    margin: 0 var(--space-l);
}

.sc-header-menu .sc-header-menu-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-neutral-7);
    font-size: var(--font-size-base);
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

.dark-theme .sc-header-menu .sc-header-menu-link {
    color: var(--color-neutral-5);    
}

.sc-header-menu .sc-header-menu-link:not(:first-child) {
    margin-left: var(--space-m);
}

.sc-header-menu .sc-header-menu-link:hover {
    color: var(--color-neutral-10);    
}

.dark-theme .sc-header-menu .sc-header-menu-link:hover {
    color: var(--color-neutral-2);    
}

.sc-header-menu .sc-header-menu-link-active {
    color: var(--color-neutral-9);
    font-weight: 600;
    border-bottom: 2px solid var(--color-brand);
}

.dark-theme .sc-header-menu .sc-header-menu-link-active {
    color: var(--color-neutral-2);     
}


/* ===================================================================== */
/*  $2.1.3 - Layout - Header - Actions                                   */
/* ===================================================================== */
.sc-header-actions {
    display: inline-flex;
    align-items: center;
}

.sc-header-actions-feedback {
    color: var(--color-neutral-6);
    font-size: var(--font-size-h3);
}

.dark-theme .sc-header-actions-feedback {
    color: var(--color-neutral-6);
}

.sc-header-actions-username {
    color: var(--color-neutral-10);
    font-size: var(--font-size-s);
}

.dark-theme .sc-header-actions-username {
    color: var(--color-neutral-2);
}

.sc-header-actions-logout {
    color: var(--color-selection-5);
    font-size: var(--font-size-s);
}

.sc-header-actions-feedback:hover, 
.sc-header-actions-username:hover {
    color: var(--color-neutral-8);
}

.dark-theme .sc-header-actions-feedback:hover, 
.dark-theme .sc-header-actions-username:hover {
    color: var(--color-neutral-4);
}

.sc-header-actions-logout:hover {
    color: var(--color-selection-6);
}


/* ===================================================================== */
/*  $2.2 - Layout - Sub Header                                           */
/* ===================================================================== */
.sc-sub-header {
    height: 40px;
    display: flex;
    align-items: stretch;
    margin: -1px var(--space-l);
    border-top: 1px solid var(--color-neutral-3);
}

.dark-theme .sc-sub-header {
    border-top: 1px solid var(--color-neutral-8);    
}

.sc-sub-header .sc-sub-header-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-neutral-7);
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    font-size: var(--font-size-s);    
}

.dark-theme .sc-sub-header .sc-sub-header-link {
    color: var(--color-neutral-5);
}

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

.sc-sub-header .sc-sub-header-link:hover {
    color: var(--color-neutral-9);    
}

.dark-theme .sc-sub-header .sc-sub-header-link:hover {
    color: var(--color-neutral-2);    
}

.sc-sub-header .sc-sub-header-link-active {
    border-bottom: 2px solid var(--color-brand);
    font-weight: 600;
    color: var(--color-neutral-9);
}

.dark-theme .sc-sub-header .sc-sub-header-link-active {
    color: var(--color-neutral-2);      
}


/* ===================================================================== */
/*  $2.3 - Layout - Content                                              */
/* ===================================================================== */
.sc-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.sc-content-main {
    flex: 1;
}

.sc-content-main-top {
    background-color: var(--color-neutral-0); 
    padding: var(--space-l);
}

.dark-theme .sc-content-main-top {
    background-color: var(--color-neutral-10);
    border-bottom: 1px solid var(--color-neutral-8); 
}

.sc-content-main-bottom {
    padding: var(--space-m) var(--space-l);
}

.sc-content-main-top:empty + .sc-content-main-bottom {
    padding: var(--space-l);
}

.sc-content-left {
    border-left: 1px solid var(--color-neutral-3);
    width: 240px;
    padding: var(--space-l);
    word-break: break-word;
}

.dark-theme .sc-content-left {
     border-left: 1px solid var(--color-neutral-8);   
}

/* ===================================================================== */
/*  $2.4 - Layout - Login                                                */
/* ===================================================================== */
.sc-layout-login {
    height: 100vh;
    display: flex;
}

.sc-layout-login-left,
.sc-layout-login-right {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
}

.sc-layout-login-right {
    width: 600px;
    background-color: var(--color-neutral-0);
}

.sc-layout-login-left {
    background-position: center center;
    color: var(--color-neutral-0);
    flex: 1;
    background-size: cover;
}

.sc-layout-login-left:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(32, 39, 47, 0.85);    
}

/*Customization to support IT Apps login*/
.it-app-login .sc-layout-login-left:before {
    background-color: #0A141E;
}

.sc-layout-login-left > div {
    z-index: 2;
    position: relative;
}

.login-background {
    position: absolute;
    object-fit: fill;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/*Customization to support IT Apps login*/
.it-app-login .login-background {
    object-fit: cover;
    z-index: auto;
}

.dark-theme .sc-layout-login-right {
    background-color: var( --color-neutral-10);
    color: var(--color-neutral-2);
}

.ponyfill-ready .login-background {
    display: none;
}

/*Customization to support IT Apps login*/
.it-app-login .border-radius {
    border-radius: 6px; 
}

/* ===================================================================== */
/*  $3 - Elements                                                        */
/* ===================================================================== */

/* ===================================================================== */
/*  $3.1 - Elements - Buttons                                            */
/* ===================================================================== */
.btn {
    align-items: center;
    background: linear-gradient(180deg, var(--color-neutral-0) 0%, var(--color-neutral-1) 100%);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-neutral-4);
    box-shadow: var(--shadow-level-0);
    color: var(--color-neutral-10); 
    cursor: pointer;
    font-weight: 600;
    height: 32px;
    justify-content: center;
    min-width: 70px;
    padding: 0 var(--space-base);
    transition: all var(--time-m) var(--linear);
}

.ponyfill-ready a.btn {
   display: inline-flex;
}

.dark-theme .btn {
    background: linear-gradient(180deg, #2C2F32 0%, #22262A 100%);
    border: 1px solid #626568;
    color: var(--color-neutral-2);  
}

.btn:hover {
    background: linear-gradient(180deg, #F6F6F6 0%, #EEEFF1 100%);  
}

.dark-theme .btn:hover {
    background: linear-gradient(180deg, #34373A 0%, #2C2F33 100%);  
}

.btn:active {
    background: linear-gradient(180deg, #ECEDED 0%, #E5E6E8 100%);
    box-shadow: none;
}

.dark-theme .btn:active {
    background: linear-gradient(180deg, #3C3F42 0%, #35383C 100%);  
}

.btn[disabled] {
    border: 1px solid var(--color-neutral-3);
    box-shadow: none;
    color: var(--color-neutral-5);  
    pointer-events: none;
}

.dark-theme .btn[disabled] {
    background: linear-gradient(180deg, #2C2F32 0%, #22262A 100%);
    border: 1px solid var(--color-neutral-8);  
    color: var(--color-neutral-7);  
}

:not(.dark-theme) .btn-primary {
    background: linear-gradient(180deg, var(--color-brand) 0%, #BC1F00 100%);
    border: 1px solid var(--color-brand-dark);
    color: var(--color-neutral-0);
}

:not(.dark-theme) .btn-primary:hover {
    border: 1px solid #991406;    
    background: linear-gradient(180deg, #B62307 0%, #AA2007 100%);
}

:not(.dark-theme) .btn-primary:active {
    background: linear-gradient(180deg, #A9230A 0%, #9E210A 100%);
    border: 1px solid #8E1509;  
}

:not(.dark-theme) .btn-primary[disabled] {
    background: linear-gradient(180deg, #E59080 0%, #DE8F80 100%);
    border: 1px solid #D48880;
    color: var(--color-neutral-0);
}

.dark-theme .btn-primary[disabled] {
    background: linear-gradient(180deg, #6E1B0C 0%, #66180B 100%);
    border: 1px solid #41120E;
    color: #9F6A61;
}

.btn-small {
    height: 24px;
    min-width: auto;
    padding: 0 var(--space-s);
}

.btn-large {
    height: 40px;
    padding: 0 24px;
}

.btn-icon {
    height: 24px;
    min-width: auto;
    padding: 0;
    width: 24px;
}

.btn [class^="osicon-"] {
    margin-right: var(--space-xs);
    color: var(--color-neutral-6);
}

.btn[disabled] [class^="osicon-"] {
   color: var(--color-neutral-5);
}

.dark-theme .btn [class^="osicon-"] {
   margin-right: var(--space-xs);
   color: var(--color-neutral-6);
}

.dark-theme .btn[disabled] [class^="osicon-"] {
   color: var(--color-neutral-7);
}

.btn-icon [class^="osicon-"] {
    margin-right: 0;
}

a.btn {
   display: inline-flex;
}

.ponyfill-ready .btn {
   display: inline-block;
}

.link {
    color: var(--color-selection-5);
    cursor: pointer;
}

.sc-layout-login-left .link,
.dark-theme .link {
    color: var(--color-selection-2);  
}

.link:hover {
    color: var(--color-selection-6);
}

.sc-layout-login-left .link:hover,
.dark-theme .link:hover {
    color: var(--color-selection-1);
}


.link[disabled] {
    color: var(--color-neutral-5);
    cursor: default;
    pointer-events: none;
}

.dark-theme .link[disabled] {
    color: var(--color-neutral-7);
}


/* ===================================================================== */
/*  $3.2 - Elements - Inputs                                             */
/* ===================================================================== */
label {
    color: var(--color-neutral-7);
    font-size: var(--font-size-s);
    margin-bottom: 4px;
}

.dark-theme label {
    color: var(--color-neutral-4);  
}

.input {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-neutral-4);
    color: var(--color-neutral-10);
    height: 32px;
    padding: 0 var(--space-s);
    transition: all var(--time-m) var(--linear);
}

.dark-theme .input {
    background-color: var(--color-neutral-9);
    border: 1px solid var(--color-neutral-7);
    color: var(--color-neutral-2);    
}

.input:hover {
    border: 1px solid var(--color-neutral-5);  
}

.dark-theme .input:hover {
    border: 1px solid var(--color-neutral-6);  
}

.input:focus {
    border: 1px solid var(--color-selection-3); 
    box-shadow: none;
}

:focus {
    box-shadow: 0px 0px 0px 2px var(--color-selection-3);
    outline: none;
}

.dark-theme .input:focus {
    border: 1px solid var(--color-selection-4); 
}

.input[readonly] {
    background-color: var(--color-neutral-2);
    border: 1px solid var(--color-neutral-3);
    color: var(--color-neutral-7);
}

.dark-theme .input[readonly] {
    background-color: var(--color-neutral-11);
    border: 1px solid var(--color-neutral-8);
    color: var(--color-neutral-5);
}

.input[disabled] {
    background-color: var(--color-neutral-1);
    border: 1px solid var(--color-neutral-3);
    color: var(--color-neutral-5);
}

.dark-theme .input[disabled] {
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-8);
    color: var(--color-neutral-7);
}

.input-small {
    height: 24px;
    padding: 0 4px;
}

.input-large {
    height: 40px;
}

.input-not-visible {
    position: absolute;
    top: -999px;
    left: -999px;
}

.textarea {
    height: auto;
    resize: none;
    padding: 8px;
    width: 100%;
}

.input-not-valid,
.input-not-valid:hover,
.input-not-valid:focus,
.input.Not_Valid,
.input.Not_Valid:hover,
.input.Not_Valid:focus {
    border: 1px solid var(--color-error-4);
}

.dark-theme .input-not-valid,
.dark-theme .input-not-valid:hover,
.dark-theme .input-not-valid:focus,
.dark-theme .input.Not_Valid,
.dark-theme .input.Not_Valid:hover,
.dark-theme .input.Not_Valid:focus {
    border: 1px solid var(--color-error-2);
}

.input-not-valid-message,
.ValidationMessage {
    color: var(--color-error-4);
    font-size: var(--font-size-s);
    margin-top: 4px;
    display: block;
}

.dark-theme .input-not-valid-message,
.dark-theme .ValidationMessage {
     color: var(--color-error-2); 
}


/* ===================================================================== */
/*  $3.3 - Elements - Checkbox                                           */
/* ===================================================================== */
.checkbox {
    margin: 0;
    padding: 0;
    border: 0;
    width: 16px;
    height: 16px;
    position: relative;
    cursor: pointer;
}

.checkbox:before {
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-neutral-4);
    border-radius: var(--border-radius);
    position: absolute;
    box-sizing: border-box;
    background-color: var(--color-neutral-0);
}

.dark-theme .checkbox:before {
    background-color: var(--color-neutral-9);
    border: 1px solid var(--color-neutral-7);
}

.checkbox:hover:before {
    border: 1px solid var(--color-neutral-5);  
}

.dark-theme .checkbox:hover:before {
    border: 1px solid var(--color-neutral-6);  
}

.checkbox:checked:before {
    background-color: var(--color-selection-3);
    border: 1px solid var(--color-selection-5);
}

.dark-theme .checkbox:checked:before {
    background-color: var(--color-selection-4);
    border: 1px solid var(--color-selection-6);
}

.checkbox:hover:checked:before {
    background-color: var(--color-selection-6);
}

.checkbox:disabled:before {
    background-color: var(--color-neutral-1);
    border: 1px solid var(--color-neutral-3); 
}

.dark-theme .checkbox:disabled:before {
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-8); 
}

.checkbox:checked:disabled:before {
    background-color: var(--color-neutral-3);
}

.dark-theme .checkbox:checked:disabled:before {
    background-color: var(--color-neutral-7);
    border: 1px solid var(--color-neutral-7); 
}

.checkbox:after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 8px;
    height: 5px;
    border: 2px solid var(--color-neutral-0);
    border-top: 0;
    border-right: 0;
    top: 5px;
    left: 4px;
    opacity: 0;
    transform: rotate(-45deg);
}

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

.dark-theme .checkbox:checked:disabled:after {
    border: 2px solid var(--color-neutral-10);
    border-top: 0;
    border-right: 0;  
}

.checkbox[disabled] {
    pointer-events: none;
}

/* ===================================================================== */
/*  $3.4 - Elements - Radio Button                                       */
/* ===================================================================== */
.radio-button {
    margin: 0;
    padding: 0;
    width: 16px;
    border: 0;
    height: 16px;
    position: relative;
    cursor: pointer;
}

.radio-button:before {
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-neutral-4);
    border-radius: 100%;
    position: absolute;
    box-sizing: border-box;
    background-color: var(--color-neutral-0);
}

.dark-theme .radio-button:before {
    background-color: var(--color-neutral-9);
    border: 1px solid var(--color-neutral-7);
}

.radio-button:hover:before {
    border: 1px solid var(--color-neutral-5);  
}

.dark-theme .radio-button:hover:before {
    border: 1px solid var(--color-neutral-6);  
}

.radio-button:checked:before {
    background-color: var(--color-selection-3);
    border: 1px solid var(--color-selection-5);
}

.dark-theme .radio-button:checked:before {
    background-color: var(--color-selection-4);
    border: 1px solid var(--color-selection-6);
}

.radio-button:hover:checked:before {
    background-color: var(--color-selection-6);
}

.radio-button:disabled:before {
    background-color: var(--color-neutral-1);
    border: 1px solid var(--color-neutral-3);
}

.dark-theme .radio-button:disabled:before {
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-8);
}

.radio-button:checked:disabled:before {
    background-color: var(--color-neutral-3);
}

.dark-theme .radio-button:checked:disabled:before {
    background-color: var(--color-neutral-7);
}

.radio-button:after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 6px;
    height: 6px;
    opacity: 0;
    background-color: var(--color-neutral-0);
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.radio-button:checked:after {
    opacity: 1;
}

.radio-button:checked:disabled:after {
    background-color: var(--color-neutral-0);
}

.dark-theme .radio-button:checked:disabled:after {
    background-color: var(--color-neutral-10);
}

.radio-button[disabled] {
  pointer-events: none;
}

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

/* ===================================================================== */
/*  $4.1 - Patterns - Alert                                              */
/* ===================================================================== */
.alert {
    padding: var(--space-base);
    font-size: var(--font-size-s);
    display: flex;
    align-items: center;
    position: relative;
    border-radius: var(--border-radius);
    color: var(--color-neutral-10);
}

.dark-theme .alert {
    color: var(--color-neutral-2);
}

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

.alert-dismissible .alert-message {
    display: flex;
}

.alert-dismissible .alert-message-dismissible {
    flex: 1;
}

.alert-dismissible .alert-close {
    display: flex;
    margin-left: 16px;
}

.alert-dismissible .alert-close a {
    color: var(--color-neutral-7);
    font-size: var(--font-size-xs);
}

.alert-dismissible .alert-close a:hover {
    color: var(--color-neutral-8);
}

.alert-error {
    background-color: var(--color-error-0);
    border: 1px solid var(--color-error-1);
}

.dark-theme .alert-error {
    background-color: var(--color-error-7);
    border: 1px solid var(--color-error-6);
}

.alert-info {
    background-color: var(--color-selection-0);
    border: 1px solid var(--color-selection-1);
}

.dark-theme .alert-info {
    background-color: var(--color-selection-7);
    border: 1px solid var(--color-selection-6);
}

.alert-success {
    background-color: var(--color-success-0);
    border: 1px solid var(--color-success-1);
}

.dark-theme .alert-success {
    background-color: var(--color-success-7);
    border: 1px solid var(--color-success-6);
}

.alert-warning {
    background-color: var(--color-warning-0);
    border: 1px solid var(--color-warning-1);
}

.dark-theme .alert-warning {
    background-color: var(--color-warning-7);
    border: 1px solid var(--color-warning-6);
}

.alert-icon {
    align-self: flex-start;
    font-family: 'Product-Icon-Font' !important;
    margin-right: var(--space-s);
    font-size: var(--font-size-base);
    max-width: 120px;
}

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

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

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

.dark-theme .alert-info .alert-icon {
    color: var(--color-selection-3);
}

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

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

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

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

.alert.alert-inline {
    border: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
}

.dark-theme .alert.alert-inline {
    background-color: transparent;
    border: 0;
}

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

.dark-theme .alert.alert-inline.alert-error {
    color: var(--color-error-2); 
}

.alert.alert-inline.alert-info {
    color: var(--color-selection-5); 
}

.dark-theme .alert.alert-inline.alert-info {
    color: var(--color-selection-2); 
}

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

.dark-theme .alert.alert-inline.alert-success {
    color: var(--color-success-2); 
}

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

.dark-theme .alert.alert-inline.alert-warning {
    color: var(--color-warning-2); 
}

.alert-message a {
    color: var(--color-selection-5);
}

.dark-theme .alert-message a {
    color: var(--color-selection-2);
}

.alert-message a:hover {
    color: var(--color-selection-6);
}

.dark-theme .alert-message a:hover {
    color: var(--color-selection-1);
}


/* ===================================================================== */
/*  $4.2 - Patterns - Application Info                                   */
/* ===================================================================== */
.application-type {
    position: relative;
    display: inline-flex;
    margin-right: 6px;
    margin-bottom: 6px;
}

.application-logo {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
}

.application-logo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.application-icon {
    background-color: var(--color-neutral-0);
    width: 24px;
    height: 24px;
    border-radius: 100%;
    position: absolute;
    bottom: -6px;
    right: -6px;
    color: var(--color-neutral-5);
    border: 1px solid var(--color-neutral-3);
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-s);
}

.dark-theme .application-icon {
    background-color: var(--color-neutral-10); 
    border: 1px solid var(--color-neutral-8);
}


/* ===================================================================== */
/*  $4.3 - Patterns - Calendar                                           */
/* ===================================================================== */
.calendar {
    background-color: var(--color-neutral-0);
    border-radius: 4px;
    border: 1px solid var(--color-neutral-3);
    padding: var(--space-base);
    box-shadow: var(--shadow-level-1);
}

.dark-theme .calendar {
    background-color: var(--color-neutral-10);   
    border: 1px solid var(--color-neutral-8);
}

.calendar,
.calendar table {
    position: relative;
    display: flex;
    flex-direction: column;
}

.calendar thead .title {
    color: var(--color-neutral-7);
}

.dark-theme .calendar thead .title {
    color: var(--color-neutral-5);
}

.calendar thead .name {
    padding: var(--space-base) 0 var(--space-s);
    color: var(--color-neutral-7);
    width: 32px;
    text-align: center;
    pointer-events: none;
}

.dark-theme .calendar thead .name {
    color: var(--color-neutral-5);    
}
    
.calendar tbody .day {
    text-align: center;
    height: 32px;
    width: 32px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.calendar tbody td.selected,
.calendar tbody th.selected,
.calendar tbody td.selected:hover,
.calendar tbody th.selected:hover {
    background-color: var(--color-selection-3);
    border-radius: 4px;
    color: var(--color-neutral-0);
}

.dark-theme .calendar tbody td.selected,
.dark-theme .calendar tbody th.selected,
.dark-theme .calendar tbody td.selected:hover,
.dark-theme .calendar tbody th.selected:hover {
    background-color: var(--color-selection-4); 
    color: var(--color-neutral-2);   
}

.calendar tbody td:hover,
.calendar tbody th:hover {
    background-color: var(--color-selection-0);
    border-radius: 4px;
}

.dark-theme .calendar tbody td:hover,
.dark-theme .calendar tbody th:hover {
    background-color: var(--color-selection-6);     
}

.calendar tbody .emptycell {
    display: inline-flex;
    text-align: center;
    height: 32px;
    width: 32px;
    cursor: pointer;
    display: inline-flex;
}

.calendar tbody .emptycell:hover {
    background-color: transparent;
    cursor: initial;
}

.calendar tbody .emptyrow {
    display: none; 
}

.calendar .combo {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 4em;
    cursor: default;
    z-index: 100;
}
   
.calendar table thead tr:first-child td:last-child {
    display: none;
}

.calendar table thead {
    position: relative;
    display: table;
}

.calendar .headrow {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.calendar .headrow td {
    padding-left: var(--space-s);
    color: var(--color-selection-5);
}

.dark-theme .calendar .headrow td {
    color: var(--color-selection-2);
}

.calendar .headrow td:hover {
    color: var(--color-selection-6);
}

.dark-theme .calendar .headrow td:hover {
    color: var(--color-selection-1);
}

.daysrow {
    display: flex;
}

.calendar tbody .time {
    color: var(--color-neutral-5);
}

.dark-theme .calendar tbody .time {
    color: var(--color-neutral-2);
}

.calendar tbody .time td:hover,
.calendar tbody .time th:hover {
    background-color: var(--color-neutral-0);
    color: currentColor;
}

.dark-theme .calendar tbody .time td:hover,
.dark-theme .calendar tbody .time th:hover {
    background-color: var(--color-neutral-10);
    color: currentColor;
}

.calendar tbody .time-input span {
    background-color: var(--color-neutral-0);
    color: var(--color-selection-5);
    cursor: pointer;
    padding-left: var(--space-xs); 
}

.dark-theme .calendar tbody .time-input span {
    color: var(--color-selection-2);   
    background-color: var(--color-neutral-10); 
}

.calendar tbody .time .time-input span:hover {
    background-color: var(--color-neutral-0);
    color: var(--color-selection-6);
}

.dark-theme .calendar tbody .time .time-input span:hover {
    background-color: var(--color-neutral-10);
    color: var(--color-selection-1);
}

.calendar tr.time,
.calendar tfoot {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: var(--space-s);
}


/* ===================================================================== */
/*  $4.4 - Patterns - Cards                                              */
/* ===================================================================== */
.card {
    background-color: var(--color-neutral-0);
    padding: var(--space-base);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-neutral-4);
}

.dark-theme .card {
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-8);  
}


/* ===================================================================== */
/*  $4.5 - Patterns - Columns                                            */
/* ===================================================================== */
.columns {
    display: flex;
}

.columns-item {
    flex: 1;
}

.columns-auto {
    flex: auto;
}

.columns-item-auto {
    flex: 0;
}

.columns.gutter-xs {
    margin-left: calc(-1 * var(--space-xs) / 2);
    margin-right: calc(-1 * var(--space-xs) / 2);
}

.columns.gutter-s {
    margin-left: calc(-1 * var(--space-s) / 2);
    margin-right: calc(-1 * var(--space-s) / 2);
}

.columns.gutter-base {
    margin-left: calc(-1 * var(--space-base) / 2);
    margin-right: calc(-1 * var(--space-base) / 2);
}

.columns.gutter-m {
    margin-left: calc(-1 * var(--space-m) / 2);
    margin-right: calc(-1 * var(--space-m) / 2);
}

.columns.gutter-l {
    margin-left: calc(-1 * var(--space-l) / 2);
    margin-right: calc(-1 * var(--space-l) / 2);
}

.columns.gutter-xl {
    margin-left: calc(-1 * var(--space-xl) / 2);
    margin-right: calc(-1 * var(--space-xl) / 2);
}

.columns.gutter-xxl {
    margin-left: calc(-1 * var(--space-xxl) / 2);
    margin-right: calc(-1 * var(--space-xxl) / 2);
}

.columns.gutter-xs .columns-item {
    padding: 0 calc(var(--space-xs) / 2);
}

.columns.gutter-s .columns-item {
    padding: 0 calc(var(--space-s) / 2);
}

.columns.gutter-base .columns-item {
    padding: 0 calc(var(--space-base) / 2);
}

.columns.gutter-m .columns-item {
    padding: 0 calc(var(--space-m) / 2);
}

.columns.gutter-l .columns-item {
    padding: 0 calc(var(--space-l) / 2);
}

.columns.gutter-xl .columns-item {
    padding: 0 calc(var(--space-xl) / 2);
}

.columns.gutter-xxl .columns-item {
    padding: 0 calc(var(--space-xxl) / 2);
}

.ponyfill-ready .columns-item-auto {
   flex: none;
}

/* ===================================================================== */
/*  $4.6 - Patterns - Dropdown                                           */
/* ===================================================================== */
.dropdown-container {
    border: 1px solid var(--color-neutral-3);
    box-shadow: var(--shadow-level-1);
}


/* ===================================================================== */
/*  $4.7 - Patterns - Dropdown Select                                    */
/* ===================================================================== */
.choices {
    position: relative;
}

.choices select {
    display: none !important;
}

.choices .search--wrapper {
    padding: var(--space-xs);
    position: relative;
}

.choices .search--wrapper:before {
    content: "\e60f";  
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Product-Icon-Font' !important;
    font-size: 10px;
    left: 16px;
    color: var(--color-neutral-7);
}

.choices__input {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-neutral-4);
    color: var(--color-neutral-10);
    font-size: var(--font-size-body-small);
    height: 32px;
    padding-left: 24px;
    width: 100%;
}

.dark-theme .choices__input {
    background-color: var(--color-neutral-9);
    border: 1px solid var(--color-neutral-7);
    color: var(--color-neutral-2);    
}

.choices__input:hover {
    border: 1px solid var(--color-neutral-5);  
}

.choices__input:focus {
    border: 1px solid var(--color-selection-3); 
    outline: none;
}

.dark-theme .choices__input:focus {
    border: 1px solid var(--color-selection-4); 
}

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

.choices__button {
    display: none;
}

.choices__inner {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-neutral-4);
    color: var(--color-neutral-9);
    font-size: var(--font-size-body-small);
    height: 32px;
    padding: 0 var(--space-s);
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all var(--time-m) var(--linear);    
}

.dark-theme .choices__inner {
    background-color: var(--color-neutral-9);   
    border: 1px solid var(--color-neutral-7); 
    color: var(--color-neutral-2);
}

.choices-small .choices__inner {
    height: 24px;
    padding: 0 var(--space-xs);
}

.choices-small .choices__input {
    height: 24px;
    padding-left: 20px;
}

.choices-small .search--wrapper:before {
     left: 12px;   
}

.choices__inner:hover {
    border: 1px solid var(--color-neutral-5);
}

.dark-theme .choices__inner:hover {
    border: 1px solid var(--color-neutral-6);
}

.is-focused .choices__inner,
.is-open .choices__inner {
    border: 1px solid var(--color-selection-3); 
    outline: none;
}

.dark-theme .is-focused .choices__inner,
.dark-theme .is-open .choices__inner {
    border: 1px solid var(--color-selection-4); 
    outline: none;
}

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

.choices__list--dropdown {
    background-color: var(--color-neutral-0);
    display: none;
    overflow: hidden;
    position: absolute;
    top: 100%;
    width: 100%;
    word-break: break-all;
    z-index: 1;
    border-radius: 4px;
    border: 1px solid var(--color-neutral-4);
    box-shadow: var(--shadow-level-1);
}

.dark-theme .choices__list--dropdown {
    background-color: var(--color-neutral-10); 
    border: 1px solid var(--color-neutral-7); 
}

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

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

.choices__list--dropdown .choices__item {
    cursor: pointer;
    height: 32px;
    padding: 0 var(--space-s);
    background-color: var(--color-neutral-0);
    display: flex;
    align-items: center;
}

.dark-theme .choices__list--dropdown .choices__item {
    background-color: var(--color-neutral-10);   
}

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

.dark-theme .choices__list--dropdown .choices__item.is-highlighted {
    background-color: var(--color-selection-7);
    color: var(--color-neutral-2);
}

.choices-small .choices__list--dropdown .choices__item {
    padding: var(--space-xs);
    height: 24px;
    font-size: var(--font-size-s);
}

.choices__inner:after {
    content: '';
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid var(--color-neutral-8);
    bottom: 0;
    box-sizing: border-box;
    position: absolute;
    right: 8px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 0;
    width: 0;
}

.dark-theme .choices__inner:after {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid var(--color-neutral-6);    
}

.choices__list--multiple {
    display: inline-flex;
    flex-wrap: wrap;
}

.choices-small.choices[data-type*="select-multiple"] .choices__input {
  height: 24px;
}

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

.choices[data-type*="select-multiple"] .choices__input {
    border: 0;
    padding: 0 8px;
}

.choices[data-type*="select-multiple"] .search--wrapper:before {
    content: none;
}

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

.choices[data-type*="select-multiple"] .choices__inner {
    height: auto;
    flex-wrap: wrap;
    padding: 0;
}

.choices[data-type*="select-multiple"] .choices__list--multiple .choices__item {
    min-height: 24px;
    background-color: var(--color-neutral-2);
    border: 1px solid var(--color-neutral-4);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-s);
    border-radius: 100px;
    margin-left: 4px;
    margin-top: 4px;
    color: var(--color-neutral-10);
}

.dark-theme .choices[data-type*="select-multiple"] .choices__list--multiple .choices__item {
    background-color: var(--color-neutral-9);
    border: 1px solid var(--color-neutral-7);
    color: var(--color-neutral-2);
}

.choices[data-type*="select-multiple"] .choices__list--multiple .choices__button {
    display: block;
    text-indent: -9999px;
    position: relative;
    padding: 0;
    background-color: transparent;
    border: 0;
    width: 8px;
    height: 8px;
    margin-left: var(--space-xs);
    cursor: pointer;
}

.choices[data-type*="select-multiple"] .choices__list--multiple .choices__button:after {
    content: "\e656";
    color: var(--color-neutral-7);
    font-family: 'Product-Icon-Font' !important;
    font-size: 8px;
    right: 0;
    position: absolute;
    text-indent: 0;
}

.choices__list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
 
.choices__list::-webkit-scrollbar-track {
    background-color: var(--color-neutral-1);
}

.dark-theme .choices__list::-webkit-scrollbar-track {
    background-color: var(--color-neutral-10);
}
 
.choices__list::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-4);
    border-radius: 6px;
}

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

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

.dark-theme .choices__list::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-neutral-5);
}

.choices-disabled .choices__inner {
    background-color: var(--color-neutral-1);
    color: var(--color-neutral-5);
    pointer-events: none;
    border: 1px solid var(--color-neutral-3);
}

.dark-theme .choices-disabled .choices__inner {
    background-color: var(--color-neutral-10); 
    border: 1px solid var(--color-neutral-8); 
    color: var(--color-neutral-7);  
}

.choices-disabled {
    pointer-events: none;
}

.choices-disabled .choices__input {
    opacity: 0;
}


/* ===================================================================== */
/*  $4.8 - Patterns - Expand Collapse                                    */
/* ===================================================================== */
.tabs-expandable .tabs-content-item {
    background-color: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-4);
    border-radius: 4px;
    padding: var(--space-base);
    margin-top: var(--space-s);
}

.dark-theme .tabs-expandable .tabs-content-item {
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-8);  
}

.tabs-expandable .tabs-content {
    border-top: 0;
}

.dark-theme .tabs-expandable .tabs-content {
    border-top: 0;    
}

.tabs-expandable .tabs-header-item,
.tabs-expandable .tabs-header-item.active {
    font-size: var(--font-size-s);
    padding: 0px;
    height: auto;
    cursor: pointer;
    color: var(--color-selection-5);
    border-top: 0;
    border-bottom: 0;
}

.dark-theme .tabs-expandable .tabs-header-item,
.dark-theme .tabs-expandable .tabs-header-item.active {
    color: var(--color-selection-2);    
}

.tabs-expandable .tabs-header-item {
   margin-right: var(--space-base);
}

.tabs-expandable .tabs-header .link {
    font-size: var(--font-size-s);
}

.tabs-expandable .tabs-header-item:not(.active):hover {
    color: var(--color-selection-6);
    border-bottom: 0;
}

.dark-theme .tabs-expandable .tabs-header-item:not(.active):hover {
    color: var(--color-selection-1);
    border-bottom: 0;
}

.tabs-expandable .tabs-header-item:hover, 
.tabs-expandable .tabs-header-item.active:hover {
    color: var(--color-selection-6);
}

.dark-theme .tabs-expandable .tabs-header-item:hover, 
.dark-theme .tabs-expandable .tabs-header-item.active:hover {
    color: var(--color-selection-1);
}


/* ===================================================================== */
/*  $4.9 - Patterns - Feedback Ajax Wait                                 */
/* ===================================================================== */
/* PREVIEW PURPOSE */
.show-ajax {
    display: block !important;
}

.feedback-ajax {
    background-color: var(--color-neutral-2);
    border-radius: 0;
    display: block;
    font-size: 0;
    height: 4px;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

.feedback-ajax:before {
    -webkit-animation: ajax-wait 1700ms linear infinite;
            animation: ajax-wait 1700ms linear infinite;
    background-color: var(--color-brand);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    will-change: transform;
}

@-webkit-keyframes ajax-wait {
    0% {
        -webkit-transform: translateX(-105vw) translateZ(0) scaleX(1);
    }
    25% {
        -webkit-transform: translateX(-55vw) translateZ(0) scaleX(1.5);
    }
    50% {
        -webkit-transform: translateX(0) translateZ(0) scaleX(1.5);
    }
    75% {
        -webkit-transform: translateX(55vw) translateZ(0) scaleX(.5);
    }
    100% {
        -webkit-transform: translateX(105vw) translateZ(0) scaleX(.2);
    }
}

@keyframes ajax-wait {
    0% {
        transform: translateX(-105vw) translateZ(0) scaleX(1);
    }
    25% {
        transform: translateX(-55vw) translateZ(0) scaleX(1.5);
    }
    50% {
        transform: translateX(0) translateZ(0) scaleX(1.5);
    }
    75% {
        transform: translateX(55vw) translateZ(0) scaleX(.5);
    }
    100% {
        transform: translateX(105vw) translateZ(0) scaleX(.2);
    }
}


/* ===================================================================== */
/*  $4.10 - Patterns - File Upload                                       */
/* ===================================================================== */
.file-upload {
    -webkit-box-align: center;
       -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    font-size: var(--font-size-s);  
    display: inline-flex;
    -webkit-box-pack: justify;
       -ms-flex-pack: justify;
     justify-content: space-between;
    position: relative;
    padding: var(--space-base) 0;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.file-upload .file-upload-delete {
    color: var(--color-selection-5); 
    font-size: var(--font-size-s);  
    cursor: pointer;
    z-index: 20;
    margin-left: var(--space-s);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

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

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

.file-upload .file-upload-delete
.dark-theme .file-upload .file-upload-delete {
   color: var(--color-selection-2);
}

.file-upload-message .btn  {
    display: inline-flex;
}

/* ===================================================================== */
/*  $4.11 - Patterns - Loading Spinner                                   */
/* ===================================================================== */
.loading-spinner {
    width: 32px;
    height: 32px;
    border: 4px solid var(--color-neutral-6);
    border-radius: 100%;
    border-top: 4px solid transparent;
    -webkit-animation: loadingSpinner 850ms cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite;
            animation: loadingSpinner 850ms cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite;
}

.loading-spinner-small {
    height: 16px;
    width: 16px;
    border: 2px solid var(--color-neutral-6);
    border-top: 2px solid transparent;
}

/* Small spinner */
.loading-spinner.small-spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

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

@keyframes loadingSpinner {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
    }
}


/* ===================================================================== */
/*  $4.12 - Patterns - Search                                            */
/* ===================================================================== */
.search {
    position: relative;
}

.search .search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-family: 'Product-Icon-Font' !important;
    font-size: 12px;
}

.search .search-icon:before {
    content: "\e60f";      
}

.search .input {
    padding-left: var(--space-l);    
}

.sc-header-actions .search .input {
    border-radius: 100px;
    background-color: var(--color-neutral-1);
}

.dark-theme .sc-header-actions .search .input {
    background-color: var(--color-neutral-9);    
}

.sc-header-actions .search .input::-webkit-input-placeholder,
.sc-header-actions .search .input::placeholder  {
    color: var(--color-neutral-6);
}

.sc-header-actions .search .search-icon {
    color: var(--color-neutral-5);
}


/* ===================================================================== */
/*  $4.13 - Patterns - ScrollBar                                         */
/* ===================================================================== */
.scrollable-area {
    overflow-y: auto;
}

.scrollable-area::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
 
.scrollable-area::-webkit-scrollbar-track {
    background-color: var(--color-neutral-1);
}

.dark-theme .scrollable-area::-webkit-scrollbar-track {
    background-color: var(--color-neutral-11);
}
 
.scrollable-area::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-4);
    border-radius: 6px;
}

.dark-theme .scrollable-area::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-7);
}

.scrollable-area::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-neutral-5);
}


/* ===================================================================== */
/*  $4.14 - Patterns - Separator                                         */
/* ===================================================================== */
.separator {
    height: 1px;
    background-color: var(--color-neutral-3);
    margin: var(--space-m) 0;
}

.dark-theme .separator {
    background-color: var(--color-neutral-8);    
}

/* ===================================================================== */
/*  $4.15 - Patterns - Step                                              */
/* ===================================================================== */

.sub-steps-item .table-row {
    background-color: var(--color-neutral-2);    
}

.steps-item-status {
    width: 16px;
    height: 16px;
}

.steps-icon-small {
    width: 16px;
    height: 16px;
}

.main-steps-item:hover .table-row {
    background-color: var(--color-neutral-1);
    cursor: pointer;
}

.main-steps-item .steps-item-collapseicon {
    position: relative;
    text-align: center;
    color: var(--color-neutral-6);
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    transition: transform 170ms ease-out;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-steps-item.collapsed .steps-item-collapseicon {
    -webkit-transform: rotate(-90deg); 
            transform: rotate(-90deg);    

}

.main-steps-item .steps-item-collapseicon:before {
    content: "\e649";
    font-family: 'Product-Icon-Font' !important;
}

.steps-item-success .steps-item-status, 
.steps-icon-success {
    background-image: url(/ServiceCenter/img/Icon_Success.svg);
    background-repeat: no-repeat;
    -webkit-animation: none;
            animation: none;
}

.steps-item-warning .steps-item-status, 
.steps-icon-warning {
    background-image: url(/ServiceCenter/img/Icon_Warning.svg);
    background-repeat: no-repeat;
        -webkit-animation: none;
            animation: none;
}

.steps-item-error .steps-item-status, 
.steps-icon-error{
    background-image: url(/ServiceCenter/img/Icon_Error.svg);
    background-repeat: no-repeat;
    -webkit-animation: none;
            animation: none;
}

.steps-item-info .steps-item-status, 
.steps-icon-info{
    background-image: url(/ServiceCenter/img/Icon_Info.svg);
    background-repeat: no-repeat;
    -webkit-animation: none;
            animation: none;
}

.steps-item-current .steps-item-status{
    height: 16px;
    width: 16px;
    border: 2px solid var(--color-neutral-6);
    border-top: 2px solid transparent;
    border-radius: 100%;
    -webkit-animation: loadingSpinner 850ms cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite;
            animation: loadingSpinner 850ms cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite;
}


/* ===================================================================== */
/*  $4.16 - Patterns - Table                                             */
/* ===================================================================== */
.table {
    width: 100%;
    border-radius: var(--border-radius);
    border-spacing: 0;
    background-color: var(--color-neutral-0);
    empty-cells: show;
    border: thin solid var(--color-neutral-3);
}

.dark-theme .table {
    background-color: var(--color-neutral-10); 
    border: thin solid var(--color-neutral-8);   
}

.table-header {
    border-bottom: thin solid var(--color-neutral-3);
    color: var(--color-neutral-7);
    font-weight: 600;
    height: 32px;
    padding: var(--space-s);
    text-align: left;
    font-size: var(--font-size-s);
    position: relative;
}

.dark-theme .table-header {
    border-bottom: thin solid var(--color-neutral-8);
    color: var(--color-neutral-5);
}

.table-row {
    background: var(--color-neutral-0); 
    border-bottom: thin solid var(--color-neutral-3);
    height: 32px;
    padding: var(--space-s); 
    color: var(--color-neutral-9);   
    font-size: var(--font-size-s);
}

.dark-theme .table-row {
    background-color: var(--color-neutral-10); 
    border-bottom: thin solid var(--color-neutral-8);  
    color: var(--color-neutral-2);      
}

.table tbody tr:last-child .table-row {
    border-bottom: none;
}

.table tbody tr:last-child .table-row {
    border-bottom: none;
}

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

tr:first-child .table-header:last-child {
    border-right: 0;
}

.table tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

.table tr:last-child td:last-child {
    border-radius: 0 0 4px 0;
}

.table-flex tr {
    margin-bottom: var(--space-base);
    display: flex;
}

.sc-content-left .table-flex tr {
    margin-bottom: var(--space-s);    
}


.table-flex tr:last-child {
    margin-bottom: 0;
}

.table-flex td {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0;
    flex-direction: column;
    justify-content: center;
}

.table-header:first-child,
.table-row:first-child {
    padding-left: var(--space-base);
}

.table-header:last-child,
.table-row:last-child {
    padding-right: var(--space-base);
}

.table-header .checkbox,
.table-row .checkbox {
   display: block;
}

.table-row.row-selected {
    background-color: var(--color-selection-0);
}

.dark-theme .table-row.row-selected {
   background-color: var(--color-selection-7);
}

.table-row img {
    display: block;
}

.table-native .table-header {
    border-right: thin solid var(--color-neutral-3);
}

.table-native .table-row {
    border-right: thin solid var(--color-neutral-3);    
}

.dark-theme .table-native .table-header {
    border-right: thin solid var(--color-neutral-8);
}

.dark-theme .table-native .table-row {
    border-right: thin solid var(--color-neutral-8);    
}

.table-native .table-row:last-child {
    border-right: 0;
}

.table.table-inline,
.table.table-inline .table-row,
.dark-theme .table.table-inline,
.dark-theme .table.table-inline .table-row {
    background: transparent;
    border: 0;
    padding: 0 0 var(--space-base) 0;
}

.table-row[rowspan] {
    border-bottom: 0;
}

.table-inline tbody tr:last-child .table-row {
    padding: 0;
}


/* ===================================================================== */
/*  $4.17 - Patterns - Tabs                                              */
/* ===================================================================== */
.tabs {
    display: flex;
    flex-direction: column;
}

.tabs-header {
    display: flex;
    z-index: 1; 
}

.tabs-box .tabs-header {
    background-color: var(--color-neutral-2);    
}

.tabs-header-item {
    display: flex;
    align-items: center;
    font-size: var(--font-size-s);
    padding: 0 16px;
    height: 32px;
    cursor: pointer;
    color: var(--color-neutral-7);
}

.dark-theme .tabs-header-item  {
    color: var(--color-neutral-5);
}

.tabs-header-item.active {
    color: var(--color-neutral-10);
}

.dark-theme .tabs-header-item.active {
    color: var(--color-neutral-2);
}

.tabs-box .tabs-header-item {
    border: 1px solid transparent;
    border-bottom: 1px solid transparent;    
}

.tabs-inline .tabs-header-item {
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}

.tabs-inline .tabs-header-item.active {
    border-bottom: 2px solid var(--color-selection-3);
}

.dark-theme .tabs-inline .tabs-header-item.active {
    border-bottom: 2px solid var(--color-selection-4);
}

.tabs-header-item:not(.active):hover {
    border-bottom: 2px solid var(--color-selection-1);
    color: var(--color-neutral-10);
} 

.dark-theme .tabs-header-item:not(.active):hover {
    border-bottom: 2px solid var(--color-selection-6);
    color: var(--color-neutral-2);
} 

.tabs-content {
    border-top: 1px solid var(--color-neutral-4); 
    margin-top: -1px;           
}

.dark-theme .tabs-content {
    border-top: 1px solid var(--color-neutral-8); 
}

.tabs-content-item {
    padding: var(--space-l) 0 ;
}

.tabs-content-item:not(.active) {
    display: none;
}

.tabs-big .tabs-header-item {
    height: 48px;
    font-size: var(--font-size-base);
}

.tabs-big .tabs-header-item .ds-preview-icon-tabs {
    margin-right: 8px;
    width: 24px;
    height: 24px;
}


/* ===================================================================== */
/*  $4.18 - Patterns - Teaser                                            */
/* ===================================================================== */


/* ===================================================================== */
/*  $4.19 - Patterns - Time Picker                                       */
/* ===================================================================== */
.dropdown,
.dropdown .dropdown-content .dropdown-content-list,
.dropdown .dropdown-header {
    width: 100%;
}

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

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

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

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

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

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

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

.dark-theme .dropdown .dropdown-content .dropdown-content-list {
    background-color: var(--color-neutral-10); 
    border: 1px solid var(--color-neutral-7);  
}

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

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

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

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

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

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

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

.dark-theme .dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: var(--color-selection-7);
}

.time-picker .dropdown-content-list .time-option[disabled="disabled"] {
    color: var(--color-neutral-6);
}

.time-picker .select {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    height: 100%;
    padding: 0;
    position: relative;
}

.time-picker .select:hover,
.time-picker .select:focus {
    border: 0;
    outline: none;
}

.time-picker .is--visible .dropdown-header.select {
    border: 0;
}

.time-picker .dropdown-header-text {
    width: 100%;
}

.time-picker .dropdown-icon {
    position: absolute;
    right: 16px;
    top: 8px
}

.dropdown .dropdown-content .dropdown-content-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
 
.dropdown-content-list::-webkit-scrollbar-track {
    background-color: var(--color-neutral-1);
}

.dark-theme .dropdown-content-list::-webkit-scrollbar-track {
    background-color: var(--color-neutral-10);
}
 
.dropdown-content-list::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-4);
    border-radius: 6px;
}

.dark-theme .dropdown-content-list::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-7);
}

.dropdown-content-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-neutral-5);
}


/* ===================================================================== */
/*  $4.20 - Patterns - Tooltip                                           */
/* ===================================================================== */
.tooltip {
    background-color: var(--color-neutral-9);
    color: var(--color-neutral-0);
    padding: var(--space-s);
    font-size: var(--font-size-s);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-level-2);
    word-break: break-word;
    white-space: normal;
}

.tooltip {
    display: none;
}

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

.tippy-popper {
    max-width: 500px;
}

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

.tippy-popper[x-placement^=right] .tooltip {
    margin-left: 8px;
}

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

.tippy-popper[x-placement^=left] .tooltip {
    margin-right: 8px;
}

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

.tippy-popper[x-placement^=top] .tooltip {
    margin-bottom: 8px;
}

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

.tippy-popper[x-placement^=bottom] .tooltip {
    margin-top: 8px;
}

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

.tooltip-container {
    display: inline-flex;
    vertical-align: unset;
}

.tooltip-widget {
    display: inline-flex;
}

.tooltip .link {
    color: var(--color-selection-5);   
}

.dark-theme .tooltip .link {
    color: var(--color-selection-2);   
}

.tooltip .link:hover {
    color: var(--color-selection-6);   
}

.dark-theme .tooltip .link:hover {
    color: var(--color-selection-1);   
}

/* ===================================================================== */
/*  $4.21 - Patterns - Mini-hub                                          */
/* ===================================================================== */

.close-popup-wrapper {
  text-align: right; 
}

.close-popup {
  color:var(--color-neutral-6);
  cursor:pointer;
  height:24px;
  width:24px;
}

.close-popup:hover {
  color:var(--color-neutral-8);
}

.hub {
  height: 24px;
  outline: 0;
  width: 24px;
}

.hub div {
    outline: 0;
}

.hub a {
  color: var(--color-selection-2);
}

.hub-icon {
  border-radius:4px;
  color:var(--color-neutral-6);
  cursor: pointer;
  height: 24px;
  width: 24px;
}

.hub-icon div {
  height: 24px;
  width: 24px;
}

.hub-icon:hover {
  background-color:var(--color-neutral-3);
  color:var(--color-neutral-8);
}

.hub-section-title {
  margin:var(--space-s);
}

.hub-product-card {
    cursor: pointer;
  padding:var(--space-s);
}

.hub-product-card:hover {
  background:var(--color-selection-0);
  border-radius:4px;
}

.hub-product-card-title {
  color:var(--color-selection-5);
  font-size:14px;
  font-weight:600;
  line-height:24px;
  text-transform:capitalize;
}

.hub-product-desc {
  color:var(--color-neutral-7);
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px;
}

.hub-product-desc > a {
    color: color:var(--color-neutral-7);
}

.hub-product-card-links {
  padding-top:4px;
}

.hub-links-separator {
  background:var(--color-neutral-3);
  height:16px;
  margin:0 8px;
  width:1px;
}

.hub-eap-tag {
  background:var(--color-error-5);
  border-radius:2px;
  color:var(--color-neutral-0);
  font-size:10px;
  font-weight:600;
  height:16px;
  line-height:16px;
  margin:4px 0px 4px 8px;
  text-align:center;
  width:30px;
}

.hub a:focus {
  color:var(--color-selection-4);
}

.hub a:hover,
.hub a:focus:hover {
  color:var(--color-selection-6);
}

.vertical-align .hub-section span {
  display:inline;
}

.hub .tooltip {
  background-color:var(--color-neutral-0);
  -webkit-box-shadow:0px 2px 15px rgba(32, 39, 47, 0.3);
          box-shadow:0px 2px 15px rgba(32, 39, 47, 0.3);
  color:inherit;
  cursor:auto;
  max-width:500px;
  min-width:400px;
  text-align:left;
  width:55vw;
}

.hub .tippy-popper {
  outline: 0;
}

.hub .tippy-arrow {
  display:none;
}

.hub-product-card-links .ListRecords {
    display: flex;
}

/* ===================================================================== */
/*  $4.21 - Patterns - Progress Bar                                      */
/* ===================================================================== */

.progress-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: var(--space-s); 
    background-color: var(--color-neutral-3);
    height: 10px;
    border-radius: 4px;
}

.progress-bar-warning .progress {
    background-color: var(--color-warning-4);  
}

.progress-bar-error .progress {
    background-color: var(--color-error-4);
}

.progress-bar-stopped .progress:before {
    animation-play-state: paused;
    opacity: 0;
}

.progress {
    position: relative;
    overflow: hidden;
    height: 100%; 
    border-radius: 4px;
    background-color: var(--color-success-4);
}

.progress:before {
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%, rgba(255,255,255,0) 100%);
    width: 100%;
    position: absolute;
    transform-origin: left;
    -webkit-animation: progress-wait 1700ms linear infinite;
            animation: progress-wait 1700ms linear infinite;
    
            
}

@keyframes progress-wait {
    0% {
        transform: translateX(-105%) translateZ(0) scaleX(1);
    }
    50% {
        transform: translateX(0%) translateZ(0) scaleX(1);
    }
    100% {
        transform: translateX(105%) translateZ(0) scaleX(1);
    }
}

.summary {
    background-color: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-4);
    border-radius: 4px;
    padding: var(--space-base);
    margin-top: var(--space-s);
    
}

/* ===================================================================== */
/*  $5 - Styles                                                          */
/* ===================================================================== */

/* ===================================================================== */
/*  $5.1 - Styles - Typography                                           */
/* ===================================================================== */
.font-size-display {
    font-size: var(--font-size-display);
    font-weight: 600;
}

.heading1 {
    font-size: var(--font-size-h1);
    font-weight: 600;
}

.heading2 {
    font-size: var(--font-size-h2);
    font-weight: 600;
}

.heading3 {
    font-size: var(--font-size-h3);
    font-weight: 600;
}

.heading4 {
    font-size: var(--font-size-h4);
    font-weight: 600;
}

.heading5 {
    font-size: var(--font-size-h5);
    font-weight: 600;
}

.heading6 {
    font-size: var(--font-size-h6);
    font-weight: 600;
}

.font-size-base { font-size: var(--font-size-base); }
.font-size-s { font-size: var(--font-size-s); }
.font-size-xs { font-size: var(--font-size-xs); }

.source-code-text {
    font-family: 'Source Code Pro', monospace;
    font-size: var(--font-size-body-small);   
}

/* Styles - Typography - Weight */
.font-light { font-weight: var(--font-light); }
.font-regular { font-weight: var(--font-regular); }
.font-semi-bold { font-weight: var(--font-semi-bold); }
.font-bold { font-weight: var(--font-bold); }


/* ===================================================================== */
/*  $5.2 - Styles - Colors                                               */
/* ===================================================================== */

/* Color Brand */
.background-brand-light { background-color: var(--color-brand-light); }
.background-brand { background-color: var(--color-brand); }
.background-brand-dark { background-color: var(--color-brand-dark); }

.text-brand-light { color: var(--color-brand-light); }
.text-brand { color: var(--color-brand); }
.text-brand-dark { color: var(--color-brand-dark); }


/* Color - Neutral  */
.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); }
.background-neutral-11 { background-color: var(--color-neutral-11); }

.dark-theme .background-neutral-0 {
    --color-neutral-0: var(--color-neutral-9);
}

.text-neutral-0 { color: var(--color-neutral-0); }
.text-neutral-1 { color: var(--color-neutral-1); }
.text-neutral-2 { color: var(--color-neutral-2); }
.text-neutral-3 { color: var(--color-neutral-3); }
.text-neutral-4 { color: var(--color-neutral-4); }
.text-neutral-5 { color: var(--color-neutral-5); }
.text-neutral-6 { color: var(--color-neutral-6); }
.text-neutral-7 { color: var(--color-neutral-7); }
.text-neutral-8 { color: var(--color-neutral-8); }
.text-neutral-9 { color: var(--color-neutral-9); }
.text-neutral-10 { color: var(--color-neutral-10); }
.text-neutral-11 { color: var(--color-neutral-11); }

.dark-theme .text-neutral-0 {
    --color-neutral-0: var(--color-neutral-2);
}

.dark-theme .text-neutral-5 {
    --color-neutral-5: var(--color-neutral-7);
}

.dark-theme .text-neutral-7 {
    --color-neutral-7: var(--color-neutral-5);
}

/* Color - Selection */
.background-selection-0 { background-color: var(--color-selection-0); }
.background-selection-1 { background-color: var(--color-selection-1); }
.background-selection-2 { background-color: var(--color-selection-2); }
.background-selection-3 { background-color: var(--color-selection-3); }
.background-selection-4 { background-color: var(--color-selection-4); }
.background-selection-5 { background-color: var(--color-selection-5); }
.background-selection-6 { background-color: var(--color-selection-6); }
.background-selection-7 { background-color: var(--color-selection-7); }

.text-selection-0 { color: var(--color-selection-0); }
.text-selection-1 { color: var(--color-selection-1); }
.text-selection-2 { color: var(--color-selection-2); }
.text-selection-3 { color: var(--color-selection-3); }
.text-selection-4 { color: var(--color-selection-4); }
.text-selection-5 { color: var(--color-selection-5); }
.text-selection-6 { color: var(--color-selection-6); }
.text-selection-7 { color: var(--color-selection-7); }

/* Color - Error */
.background-error-0 { background-color: var(--color-error-0); }
.background-error-1 { background-color: var(--color-error-1); }
.background-error-2 { background-color: var(--color-error-2); }
.background-error-3 { background-color: var(--color-error-3); }
.background-error-4 { background-color: var(--color-error-4); }
.background-error-5 { background-color: var(--color-error-5); }
.background-error-6 { background-color: var(--color-error-6); }
.background-error-7 { background-color: var(--color-error-7); }

.text-error-0 { color: var(--color-error-0); }
.text-error-1 { color: var(--color-error-1); }
.text-error-2 { color: var(--color-error-2); }
.text-error-3 { color: var(--color-error-3); }
.text-error-4 { color: var(--color-error-4); }
.text-error-5 { color: var(--color-error-5); }
.text-error-6 { color: var(--color-error-6); }
.text-error-7 { color: var(--color-error-7); }

.dark-theme .text-error-4 {
    --color-error-4: var(--color-error-3);
}

.dark-theme .text-error-5 {
    --color-error-5: var(--color-error-2);
}

/* Color - Success */
.background-success-0 { background-color: var(--color-success-0); }
.background-success-1 { background-color: var(--color-success-1); }
.background-success-2 { background-color: var(--color-success-2); }
.background-success-3 { background-color: var(--color-success-3); }
.background-success-4 { background-color: var(--color-success-4); }
.background-success-5 { background-color: var(--color-success-5); }
.background-success-6 { background-color: var(--color-success-6); }
.background-success-7 { background-color: var(--color-success-7); }

.text-success-0 { color: var(--color-success-0); }
.text-success-1 { color: var(--color-success-1); }
.text-success-2 { color: var(--color-success-2); }
.text-success-3 { color: var(--color-success-3); }
.text-success-4 { color: var(--color-success-4); }
.text-success-5 { color: var(--color-success-5); }
.text-success-6 { color: var(--color-success-6); }
.text-success-7 { color: var(--color-success-7); }

.dark-theme .text-success-4 {
    --color-success-4: var(--color-success-3);
}

.dark-theme .text-success-5 {
    --color-success-5: var(--color-success-2);
}

/* Color - Warning */
.background-warning-0 { background-color: var(--color-warning-0); }
.background-warning-1 { background-color: var(--color-warning-1); }
.background-warning-2 { background-color: var(--color-warning-2); }
.background-warning-3 { background-color: var(--color-warning-3); }
.background-warning-4 { background-color: var(--color-warning-4); }
.background-warning-5 { background-color: var(--color-warning-5); }
.background-warning-6 { background-color: var(--color-warning-6); }
.background-warning-7 { background-color: var(--color-warning-7); }

.text-warning-0 { color: var(--color-warning-0); }
.text-warning-1 { color: var(--color-warning-1); }
.text-warning-2 { color: var(--color-warning-2); }
.text-warning-3 { color: var(--color-warning-3); }
.text-warning-4 { color: var(--color-warning-4); }
.text-warning-5 { color: var(--color-warning-5); }
.text-warning-6 { color: var(--color-warning-6); }
.text-warning-7 { color: var(--color-warning-7); }

/* ===================================================================== */
/*  $5.3 - Styles - Space                                                */
/* ===================================================================== */
.margin-xs { margin: var(--space-xs); }
.margin-s { margin: var(--space-s); }
.margin-base { margin: var(--space-base); }
.margin-m { margin: var(--space-m); }
.margin-l { margin: var(--space-l); }
.margin-xl { margin: var(--space-xl); }
.margin-xxl { margin: var(--space-xxl); }

.margin-top-xs { margin-top: var(--space-xs); }
.margin-top-s { margin-top: var(--space-s); }
.margin-top-base { margin-top: var(--space-base); }
.margin-top-m { margin-top: var(--space-m); }
.margin-top-l { margin-top: var(--space-l); }
.margin-top-xl { margin-top: var(--space-xl); }
.margin-top-xxl { margin-top: var(--space-xxl); }

.margin-right-xs { margin-right: var(--space-xs); }
.margin-right-s { margin-right: var(--space-s); }
.margin-right-base { margin-right: var(--space-base); }
.margin-right-m { margin-right: var(--space-m); }
.margin-right-l { margin-right: var(--space-l); }
.margin-right-xl { margin-right: var(--space-xl); }
.margin-right-xxl { margin-right: var(--space-xxl); }

.margin-bottom-none { margin-bottom: 0; }
.margin-bottom-xs { margin-bottom: var(--space-xs); }
.margin-bottom-s { margin-bottom: var(--space-s); }
.margin-bottom-base { margin-bottom: var(--space-base); }
.margin-bottom-m { margin-bottom: var(--space-m); }
.margin-bottom-l { margin-bottom: var(--space-l); }
.margin-bottom-xl { margin-bottom: var(--space-xl); }
.margin-bottom-xxl { margin-bottom: var(--space-xxl); }

.margin-left-xs { margin-left: var(--space-xs); }
.margin-left-s { margin-left: var(--space-s); }
.margin-left-base { margin-left: var(--space-base); }
.margin-left-m { margin-left: var(--space-m); }
.margin-left-l { margin-left: var(--space-l); }
.margin-left-xl { margin-left: var(--space-xl); }
.margin-left-xxl { margin-left: var(--space-xxl); }

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

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


/* ===================================================================== */
/*  $5.4 - Styles - Flex                                                 */
/* ===================================================================== */
.display-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1;
}

.flex-direction-column {
  flex-direction: column;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: flex-end;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-start {
    align-items: flex-start;
}

.space-between {
  justify-content: space-between;
}

.overflow-x-auto {
  overflow-x: auto;
}

/* ===================================================================== */
/*  $5.5 - Styles - Shadow                                               */
/* ===================================================================== */
.shadow-level-0 { box-shadow: var(--shadow-level-0); }
.shadow-level-1 { box-shadow: var(--shadow-level-1); }
.shadow-level-2 { box-shadow: var(--shadow-level-2); }
.shadow-level-3 { box-shadow: var(--shadow-level-3); }


/* ===================================================================== */
/*  $5.5 - Styles - Utlities                                             */
/* ===================================================================== */
.display-none {
    display: none;
}

.display-block {
    display: block;
}

.ph:empty {
    display: none;   
}

.no-wrap {
  white-space: nowrap;
}

.break-all {
    word-break: break-all;   
}

.feedback-grid {
    max-width: 500px;
    margin: 0 auto;
}

.center-form {
    height: 32px;
    display: flex;
    align-items: center;
}

.text-ellipsis {
    width: 175px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ===================================================================== */
/*  $6 - Responsive                                                      */
/* ===================================================================== */
@media only screen and (max-width: 1200px) {
    .sc-sub-header {
        margin-left: var(--space-m);
        margin-right: 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .sc-sub-header .sc-sub-header-link:last-child {
        padding-right: var(--space-base);
    }
    
    .sc-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
}


@media only screen and (max-width: 900px) {
    .columns-item-hide {
        display: none;
    }
        
    .sc-header-wrapper {
        position: -webkit-sticky;
        position: sticky;
        top: -57px;
    }
    
    .tabs-header {
        overflow-x: auto;
    }

    .tabs:not(.tabs-expandable) .tabs-header-item {
        flex: 1 0 auto;
        justify-content: center;
    }
        
    .sc-navigation {
        width: 300px;
        position: fixed;
        top: 0;
        left: -330px;
        height: 100%;
        box-shadow: var(--shadow-level-1);
        -webkit-transition: transform 330ms ease-out;
                transition: transform 330ms ease-out;
        flex-direction: column;
        -webkit-transform: translateX(0);
                transform: translateX(0);
        z-index: 2;
    }

    .sc-header-menu {
        flex-direction: column;
        margin: 0;
        background-color: var(--color-neutral-0);
        z-index: 2;
    }
    
    .dark-theme .sc-header-menu {
        background-color: var(--color-neutral-10);
    }

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

    .is--visible .sc-navigation {
        -webkit-transform: translateX(330px);
                transform: translateX(330px);
    }

    .sc-header-menu .sc-header-menu-link {
        margin: 0;
        padding: var(--space-base) var(--space-m);
    }

    .sc-header-menu .sc-header-menu-link:not(:first-child) {
        margin: 0;
    }

    .search {
        width: 100%;
        margin-bottom: var(--space-base);
    }

    .sc-header-actions .search .input {
        width: 100%;
    }

    .sc-content-left {
        display: none;
    }

    .sc-header-actions {
        flex-direction: column;
        padding: var(--space-base) var(--space-m);
        z-index: 2;
        background-color: var(--color-neutral-0);
    }
    
    .dark-theme .sc-header-actions {
        background-color: var(--color-neutral-10);
    }

    .sc-navigation-overlay {
        background-color: var(--color-neutral-9);
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        opacity: 0;
        pointer-events: none;
        transition: opacity 330ms ease-out;
        transform: none;
    }
    
    .is--visible .sc-navigation-overlay {
        opacity: .3;
        pointer-events: auto;
    }
  
    .sc-content-main-top:empty + .sc-content-main-bottom {
        padding: var(--space-m);
    }
  
    .sc-header {
        padding: 0 var(--space-m);
    }
    
    .columns-item-buttons > div {
        display: flex;
    }
    
    .columns-item-buttons > div .btn {
        width: 50%;
    }
    
    .phone-columns-item-full-width {
        flex: 0 0 100%;
    }
    
    .phone-columns-item-half {
        flex: 0 0 50%;
        margin-bottom: var(--space-base);
    }
    
    .filters-columns .columns {
        flex-wrap: wrap;
    }
    
    .sc-layout-login {
        justify-content: center;
    }
    
    .sc-layout-login-left {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
    
    .sc-layout-login-right {
        background-color: transparent;
        width: 100%;
        max-width: 500px;
    }
    
    .login-form {
        background-color: var(--color-neutral-0);
        padding: var(--space-xl) var(--space-l);
        margin: var(--space-m);
        border-radius: 4px;    
    }
    
    .login-form img {
        max-width: 100%;
    }
    
    .hide-on-phone {
        display: none;
    }
    
    .login-form .phone-columns-item-full-width {
        margin-bottom: var(--space-base);
    }

    .login-form .phone-columns-item-full-width .btn {
        width: 100% !important;
    }
    
}

/* ===================================================================== */
/*  $7 - Specific CSS                                                    */
/* ===================================================================== */

/* ===================================================================== */
/*  $7.1 License Feature Graph                                           */
/* ===================================================================== */

.License_FeatureGraph {
    display: block;
    white-space: nowrap;
    font-size: 7px;
    height: 8px;
    margin-top: var(--space-xs);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.License_FeatureGraphBar {
    float: left;
    display: block;
    height: 8px;
}

.License_FeatureGraphLimit {
    background-color: var(--color-neutral-3);
}

.dark-theme .License_FeatureGraphLimit {
    background-color: var(--color-neutral-8);    
}

.License_FeatureGraphInLimit {
    background-color: var(--color-success-3);
}

.License_FeatureGraphInGrace {
    background-color:  var(--color-warning-3);
}

.License_FeatureGraphViolating {
    background-color:  var(--color-error-3);
}



/* Tagsticker */

.background-running {background-color: var(--color-running); }
.text-running { color: var(--color-running); }
.background-finish-error {background-color: var(--color-finish-error); }
.text-finish-error { color: var(--color-finish-error); }
.background-finish-success {background-color: var(--color-finish-success); }
.text-finish-success { color: var(--color-finish-success); }
.background-canceled { background-color: var(--color-canceled); }
.text-canceled { color: var(--color-canceled); }

.tagsticker {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 24px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    line-height: 1;
    min-width: 32px;
    padding: 0px var(--space-s);
    border-radius: 20px;
    word-break: normal;
}

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

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

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

.tagsticker-content:empty { 
    
}