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

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

/*  Seguradoras Unidas Theme -                                           */

/*  $1 - Root - CSS Variables                                            */
/*  $2 - Styles                                                          */
/*       $2.1 - Styles - Typography                                      */
/*              $2.1.1 - Styles - Typography - Custom Fonts              */
/*       $2.2 - Theme                                                    */
/*              $2.2.1  - Theme - Main Definitions                       */
/*              $2.2.1  - Theme - Structure                              */
/*       $2.3 - Styles - Colors                                          */
/*              $2.3.1  - Styles - Colors - Brand                        */
/*   $3 - Patterns                                                       */
/*       $3.1 - Patterns - OutsystemsUI                                  */
/*       $3.2 - Patterns - Columns                                       */
/*       $3.3 - Patterns - Floating Actions                              */
/*       $3.4 - Patterns - Separator                                     */
/*       $3.5 - Patterns - Tabs                                          */
/*   $4 - Widgets                                                        */
/*       $4.1 - Widgets - OutsystemsUI                                   */
/*       $4.2 - Widgets - RichWidgets                                    */
/*       $4.3 - Widgets - Buttons                                        */
/*       $4.4 - Widgets - Editable Table                                 */
/*       $4.5 - Widgets - Feedback Ajax Wait                             */
/*       $4.6 - Widgets - Form Elements                                  */
/*   $5 - Forms                                                          */
/*       $5.1 - Forms > Inputs, Selects & Textarea                       */
/*       $5.2 - Forms > ReadOnly & Disabled                              */
/*       $5.3 - Forms > Not Valid                                        */
/*       $5.4 - Forms > Radio Button & Checkbox                          */
/*   $6 - DynamicThemes                                                  */
/*   $7 - Accessibility                                                  */

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

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

    /* Typography - Size */
    --font-size-display: 36px;

    --font-size-base: 16px;
    --font-size-s: 14px;
    --font-size-xs: 12px;
    --font-size-xxs: 10px;  
    
    /* Color - Brand */
    --color-G1: #43B02A;
    --color-G2: #44883E;
    --color-G3: #006845;
    --color-G4: #00AF41;
    --color-G5: #00C389;
    --color-G6: #008264;
    --color-G7: #79863C;
    --color-G8: #95D600;
    --color-G9: #7A9A01;
    --color-G10: #00685E;
    --color-G11: #00965E;
    --color-G12: #4A7729;
    --color-G13: #009982;
    --color-G14: #E6EBE6;
    
    /* Color - Brand - ICON */
    --color-G15: #DADC33;
    --color-G16: #B0BCAF;
    --color-G17: #73C3D5;
    --color-G18: #C0b460;
    --color-G19: #BF853C;
    --color-G20: #8DC63f;

    /* Color - Neutral */
    --color-black: #000000;  /*Black*/
    --color-darkGrey: #666; /*text*/ 
    --color-grey: #999;/* disabled inputs and widget grey color */
    --color-mediumGrey: #cdcdcd; /* border */
    --color-lightGrey: #F8F8F8; /* background*/
    --color-white: #FFF; /* replace white colors everywhere */
    
    --color-shadow-grey: #F0F1F3; /* grey shadow */
    --color-shadow-lightGrey: #FBFBFB; /* light grey shadow */
    
    --color-primary: var(--color-G4);
    --color-secondary:var(--color-G3);
    --color-terciary: var(--color-G8);
    
    --color-primary-hover:var(--color-G3);
    --color-primary-selected: rgba(37, 119, 25, .12);
    --color-primary-lightest: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));
    
    /* Color - Semantic */
    --color-error-light: #fceaea;
    --color-error: #dc2020;
    
    --color-warning-light: #fdf6e5;
    --color-warning: #e9a100;
    
    --color-success-light: #eaf3eb;
    --color-success: #29823b;
    
    --color-info-light: #e5f5fc;
    --color-info: #017aad;
    
    --border-radius-soft: 6px;

    /* App Settings */
    --color-background-body: #fff;
    --header-size: 56px;
    --side-menu-size: 300px;
    
    /* Custom Settings */    
    --theme-colorBar-horizontal: 15px;
    --theme-colorBar-vertical: 120px;    
    --theme-default-transition: all .250s ease-in-out;    
    --theme-header-height-full: 100px;
    --theme-header-height-scrolled: 50px;
    
    --theme-left-menu-width: 300px;
    --theme-left-menu-resume-height: 100px;
    
    --theme-right-menu-width: 400px;
    --theme-right-menu-resume-height: 200px;
    
    --theme-footer-height: 70px;
    
    --theme-menu-small-width: 50px;
    
    --theme-menu-background: #E6EBE6;
    --theme-menu-toggle-icon-size: 20px;
        
    --theme-border-line: 1px solid #ddd;
    
    --theme-menu-item-background: #00af41;
    --theme-menu-item-color: #fff;

}

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

/* ================================================================ */
/*  $2.1 - Styles - Typography                                      */
/* ================================================================ */

/* $2.1.1 - Styles - Typography - Custom Fonts */
/* Tranquilidade official font 'Regular TQ'*/
@font-face {
    font-family:'Regular TQ';
    src:    url('/SU_Resources/fonts-trq/RegularTQ-RegularItalicWEB.eot')format('embedded-opentype');
    src:    url('/SU_Resources/fonts-trq/RegularTQ-RegularItalicWEB.woff')format('woff'),
            url('/SU_Resources/fonts-trq/RegularTQ-RegularItalicWEB.woff2')format('woff2'),
            url('/SU_Resources/fonts-trq/RegularTQ-RegularItalicWEB.svg')format('svg');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family:'Regular TQ';
    src:    url('/SU_Resources/fonts-trq/RegularTQ-RegularWEB.eot')format('embedded-opentype');
    src:    url('/SU_Resources/fonts-trq/RegularTQ-RegularWEB.woff')format('woff'),
            url('/SU_Resources/fonts-trq/RegularTQ-RegularWEB.woff2')format('woff2'),
            url('/SU_Resources/fonts-trq/RegularTQ-RegularWEB.svg')format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family:'Regular TQ';
    src:    url('/SU_Resources/fonts-trq/RegularTQ-BoldWEB.eot')format('embedded-opentype');
    src:    url('/SU_Resources/fonts-trq/RegularTQ-BoldWEB.woff')format('woff'),
            url('/SU_Resources/fonts-trq/RegularTQ-BoldWEB.woff2')format('woff2'),
            url('/SU_Resources/fonts-trq/RegularTQ-BoldWEB.svg')format('svg');
    font-weight: 700;
    font-style: normal;
}
/* Tranquilidade official font 'Regular TQ'*/

@font-face {
    font-family: 'Regular';
    src: url('/SU_Resources/fonts/Regular-Medium.eot');
    src: url('/SU_Resources/fonts/Regular-Medium.eot?#iefix') format('embedded-opentype'), 
        url('/SU_Resources/fonts/Regular-Medium.woff') format('woff'), 
        url('/SU_Resources/fonts/Regular-Medium.ttf') format('truetype'), 
        url('/SU_Resources/fonts/Regular-Medium.svg#Regular-Medium') format('svg');
    font-weight: 500;
    font-style: normal; 
}

@font-face {
    font-family: 'Regular';
    src: url('/SU_Resources/fonts/Regular-Extrabold.eot');
    src: url('/SU_Resources/fonts/Regular-Extrabold.eot?#iefix') format('embedded-opentype'), 
        url('/SU_Resources/fonts/Regular-Extrabold.woff') format('woff'), 
        url('/SU_Resources/fonts/Regular-Extrabold.ttf') format('truetype'), 
        url('/SU_Resources/fonts/Regular-Extrabold.svg#Regular-Extrabold') format('svg');
  font-weight: 800;
  font-style: normal; 
}

@font-face {
    font-family: 'Regular';
    src: url('/SU_Resources/fonts/Regular-Bold.eot');
    src: url('/SU_Resources/fonts/Regular-Bold.eot?#iefix') format('embedded-opentype'), 
        url('/SU_Resources/fonts/Regular-Bold.woff') format('woff'), 
        url('/SU_Resources/fonts/Regular-Bold.ttf') format('truetype'), 
        url('/SU_Resources/fonts/Regular-Bold.svg#Regular-Bold') format('svg');
    font-weight: 700;
    font-style: normal; 
}

@font-face {
    font-family: 'Regular';
    src: url('/SU_Resources/fonts/Regular-Regular.eot');
    src: url('/SU_Resources/fonts/Regular-Regular.eot?#iefix') format('embedded-opentype'), 
        url('/SU_Resources/fonts/Regular-Regular.woff') format('woff'), 
        url('/SU_Resources/fonts/Regular-Regular.ttf') format('truetype'), 
        url('/SU_Resources/fonts/Regular-Regular.svg#Regular-Regular') format('svg');
    font-weight: normal;
    font-style: normal; 
}

.Regular {
    font-family: "Regular TQ", Regular;
    font-weight: 400;
}

.Regular_Bold {
    font-family: "Regular TQ", Regular;
    font-weight: 700;
}

/* ================================================================ */
/*  $2.2 - Theme                                                    */
/* ================================================================ */

html {
    font-family: "Regular TQ", Regular, Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {    
    font-size: var(--font-size-s);
}

.is--focusable :focus {
    outline: none;
}

html,
body,
form,
.Page {
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

.Header {
    background: var(--color-white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    height: var(--theme-header-height-full);
    position: fixed;
    top: var(--theme-colorBar-horizontal);
    -webkit-transition: var(--theme-default-transition);
         -o-transition: var(--theme-default-transition);
            transition: var(--theme-default-transition);
    z-index: 21;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    
    
    
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

.Page:not(.HasLeftMenu):not(.HasRightMenu),
.Header.HasFullHeader {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

.HasLeftMenu:not(.HasRightMenu) .Header {
    left: var(--theme-left-menu-width);
    width: calc(100% - var(--theme-left-menu-width));
}

.HasLeftMenu:not(.HasRightMenu).LeftMenuClosed .Header {
    left: 0;
    width: 100%;
}

.HasLeftMenu:not(.HasRightMenu).LeftMenuSmall .Header {
    left: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-menu-small-width));
}

.HasRightMenu:not(.HasLeftMenu) .Header {
    right: var(--theme-right-menu-width);
    width: calc(100% - var(--theme-right-menu-width));
}

.HasRightMenu:not(.HasLeftMenu).RightMenuClosed .Header {
    right: 0;
    width: 100%;
}

.HasRightMenu:not(.HasLeftMenu).RightMenuSmall .Header {
    right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-menu-small-width));
}

.HasRightMenu:not(.HasLeftMenu).HasRightHeader .Header,
.HasRightMenu:not(.HasLeftMenu).HasRightHeader.RightMenuClosed .Header,
.HasRightMenu:not(.HasLeftMenu).HasRightHeader.RightMenuSmall .Header {
    right: 0;
    width: 100%;
}

.HasLeftMenu.HasRightMenu .Header {
    left: var(--theme-left-menu-width);
    right: var(--theme-right-menu-width);
    width: calc(100% - var(--theme-left-menu-width) - var(--theme-right-menu-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed .Header {
    left: 0;
    right: var(--theme-right-menu-width);
    width: calc(100% - var(--theme-right-menu-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall .Header {
    left: var(--theme-menu-small-width);
    right: var(--theme-right-menu-width);
    width: calc(100% - var(--theme-menu-small-width) - var(--theme-right-menu-width));
}

.HasLeftMenu.HasRightMenu.RightMenuClosed .Header {
    left: var(--theme-left-menu-width);
    right: 0;
    width: calc(100% - var(--theme-left-menu-width));
}

.HasLeftMenu.HasRightMenu.RightMenuSmall .Header {
    left: var(--theme-left-menu-width);
    right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-left-menu-width) - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed.RightMenuClosed .Header {
    left: 0;
    right: 0;
    width: 100%;
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed.RightMenuSmall .Header {
    left: 0;
    right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall.RightMenuClosed .Header {
    left: var(--theme-menu-small-width);
    right: 0;
    width: calc(100% - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall.RightMenuSmall .Header {
    left: var(--theme-menu-small-width);
    right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-menu-small-width) - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.RightMenuClosed .Header {
    left: var(--theme-left-menu-width);
    right: 0;
    width: calc(100% - var(--theme-left-menu-width));
}

.HasLeftMenu.HasRightMenu.RightMenuSmall .Header {
    left: var(--theme-left-menu-width);
    right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-left-menu-width) - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed.RightMenuClosed .Header {
    left: 0;
    right: 0;
    width: 100%;
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed.RightMenuSmall .Header {
    left: 0;
    right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall.RightMenuClosed .Header {
    left: var(--theme-left-menu-width);
    right: 0;
    width: calc(100% - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall.RightMenuSmall .Header {
    left: var(--theme-left-menu-width);
    right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-left-menu-width) - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.HasRightHeader .Header {
    left: var(--theme-left-menu-width);
    right: 0;
    width: calc(100% - var(--theme-left-menu-width));
}

.HasLeftMenu.HasRightMenu.HasRightHeader.RightMenuClosed .Header,
.HasLeftMenu.HasRightMenu.HasRightHeader.RightMenuSmall .Header {
    left: var(--theme-left-menu-width);
    right: 0;
    width: calc(100% - var(--theme-left-menu-width));
}

.HasLeftMenu.HasRightMenu.HasRightHeader.LeftMenuClosed .Header,
.HasLeftMenu.HasRightMenu.HasRightHeader.LeftMenuClosed.RightMenuClosed .Header,
.HasLeftMenu.HasRightMenu.HasRightHeader.LeftMenuClosed.RightMenuSmall .Header {
    left: 0;
    right: 0;
    width: 100%;
}

.HasLeftMenu.HasRightMenu.HasRightHeader.LeftMenuSmall .Header,
.HasLeftMenu.HasRightMenu.HasRightHeader.LeftMenuSmall.RightMenuClosed .Header,
.HasLeftMenu.HasRightMenu.HasRightHeader.LeftMenuSmall.RightMenuSmall .Header {
    left: var(--theme-menu-small-width);
    right: 0;
    width: calc(100% - var(--theme-menu-small-width));
}

.Header.js-hasScrolled {
    height: var(--theme-header-height-scrolled);
}

.Header {
    -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,.25);
            box-shadow: 0 5px 5px 0 rgba(0,0,0,.25);
}

/* Structure > Header Wrapper */
.HeaderWrapper {
    padding: 10px var(--space-base);
    -webkit-transition: var(--theme-default-transition);
         -o-transition: var(--theme-default-transition);
            transition: var(--theme-default-transition);

     
    
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

.HeaderWrapper.HeaderLogo {
    display: flex;
    align-items: center;
}

body.iframe-window-internal .HeaderWrapper.HeaderLogo {
    display: none;
}

.HeaderWrapper.HeaderLogo .HeaderWrapper_Logo {
    display: table-cell;
    vertical-align: middle;
}

.HeaderWrapper.HeaderLogo .HeaderWrapper_Logo,
.HeaderWrapper.HeaderLogo .HeaderWrapper_Logo img {
    width: auto;
    height: auto;
    max-width: inherit;
    max-height: 80px;
    -webkit-transition: var(--theme-default-transition);
         -o-transition: var(--theme-default-transition);
            transition: var(--theme-default-transition);
}

.js-hasScrolled .HeaderWrapper.HeaderLogo .HeaderWrapper_Logo,
.js-hasScrolled .HeaderWrapper.HeaderLogo .HeaderWrapper_Logo img {
    /*height: 40px;
    width: 40px;*/
    max-width: inherit;
    max-height: 40px;
}

.HeaderWrapper.HeaderContent {
    flex: 2;
}

.HeaderWrapper.HeaderContent,
.HeaderWrapper.HeaderInfo {
    padding-left: 0;    
}

.HeaderWrapper.HeaderInfo {
    padding-left: 0;    
}

.LayoutWizard.HasRightMenu .HeaderWrapper.HeaderInfo {
    width: var(--theme-right-menu-width);
}

.Header.js-hasScrolled .HeaderWrapper {
    padding: 5px var(--space-base);
}

.Header.js-hasScrolled .HeaderWrapper.HeaderContent,
.Header.js-hasScrolled .HeaderWrapper.HeaderInfo {
    padding-left: 0;  
}

/* Structure > MainArea */
.MainArea {
    width: 100%;

    
}

.Page:not(.HasLeftMenu) .MainArea_Menu.Left,
.Page:not(.HasRightMenu) .MainArea_Menu.Right {
    display: none;
}

.MainArea_Menu {
    background: var(--theme-menu-background);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        flex-direction: column;
    height: calc(100vh - var(--theme-colorBar-horizontal) - var(--theme-colorBar-horizontal));
    overflow: hidden;
    position: fixed;
    top: var(--theme-colorBar-horizontal);
    -webkit-transition: var(--theme-default-transition);
         -o-transition: var(--theme-default-transition);
            transition: var(--theme-default-transition);
    z-index: 21;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

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

.MainArea_Menu:not(.Splitter):after {
    width: 3px;
    height: 100%;
    position: absolute;
    top: 0;
    content: '';
}

.MainArea_Menu.Left:not(.Splitter):after {
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 100%);
    right: 0;
}

.MainArea_Menu.Right:not(.Splitter):after {
    background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, transparent 100%);
    left: 0;
}

.Header.HasFullHeader + .MainArea .MainArea_Menu,
.Page.HasRightHeader .Header + .MainArea .MainArea_Menu.Right {
    height: calc(100vh - var(--theme-colorBar-horizontal) - var(--theme-colorBar-horizontal) - var(--theme-header-height-full));
    top: calc(var(--theme-colorBar-horizontal) + var(--theme-header-height-full));
}

.Header.HasFullHeader.js-hasScrolled + .MainArea .MainArea_Menu,
.Page.HasRightHeader .Header.js-hasScrolled + .MainArea .MainArea_Menu.Right {
    height: calc(100vh - var(--theme-colorBar-horizontal) - var(--theme-colorBar-horizontal) - var(--theme-header-height-scrolled));
    top: calc(var(--theme-colorBar-horizontal) + var(--theme-header-height-scrolled));
}

.MainArea_Menu.Left {
    left: 0;
    width: var(--theme-left-menu-width);
}

.LeftMenuClosed .MainArea_Menu.Left {
    left: calc(-1 * var(--theme-left-menu-width));
}

.LeftMenuSmall .MainArea_Menu.Left {
    left: 0;
    width: var(--theme-menu-small-width);
}

.MainArea_Menu.Right {
    right: 0;
    width: var(--theme-right-menu-width);
}

.RightMenuClosed .MainArea_Menu.Right {
    right: calc(-1 * var(--theme-right-menu-width));
}

.RightMenuSmall .MainArea_Menu.Right {
    right: 0;
    width: var(--theme-menu-small-width);
}

.MainArea_Menu.Splitter .Menu_Options {
    display: none;
}

.MainArea_Menu:not(.Splitter) .Menu_Options {
    font-size: var(--theme-menu-toggle-icon-size);
    line-height: var(--theme-menu-toggle-icon-size);
    padding: 5px 10px;
    -webkit-transition: var(--theme-default-transition);
         -o-transition: var(--theme-default-transition);
            transition: var(--theme-default-transition);
    width: 100%;

    
}

.MainArea_Menu:not(.Splitter).Left .Menu_Options {
    text-align: right;
}

.MainArea_Menu.Close:not(.Splitter).Left .Menu_Options {
    padding: 5px;
    text-align: center;
}

.MainArea_Menu:not(.Splitter).Right .Menu_Options {
    text-align: left;
}

.MainArea_Menu.Close:not(.Splitter).Right .Menu_Options {
    text-align: center;
}


.MainArea_Menu .Menu_Content {
    overflow: hidden;
    -webkit-transition: var(--theme-default-transition);
         -o-transition: var(--theme-default-transition);
            transition: var(--theme-default-transition);
    width: 100%;

    
    align-self: stretch;
    -webkit-box-flex: 2;
    -ms-flex: 2;
        flex: 2;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
}

.MainArea_Menu:not(.Resume) .Menu_Resume {
    display: none;
}

.MainArea_Menu.Footer1{
    
 --theme-right-menu-resume-height:150px;    
}


.MainArea_Menu.Resume .Menu_Resume {
    width: 100%;

    
}

.MainArea_Menu.Resume .Menu_Resume:empty {
    height: 0;
}

.MainArea_Menu:not(.Footer) .Menu_Footer {
    display: none;
}

.MainArea_Menu.Footer1:not(.Footer) .Menu_Footer {
    display: block;
    background: #fff;
    height: var(--theme-footer-height);
    width: 100%;

    
}
.MainArea_Menu.Footer .Menu_Footer {
    background: var(--color-white);
    height: var(--theme-footer-height);
    width: 100%;

    
}

.MainArea_Content {
    background-color: var(--color-shadow-lightGrey);
    margin-left: 0;
    margin-right: 0;
    min-height: 100vh;
    -webkit-transition: var(--theme-default-transition);
         -o-transition: var(--theme-default-transition);
            transition: var(--theme-default-transition);
    width: 100%;
    z-index: 19;

    
    
    
    
    
}

.Page:not(.HasLeftMenu):not(.HasRightMenu) .MainArea_Content {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.HasLeftMenu:not(.HasRightMenu) .MainArea_Content {
    margin-left: var(--theme-left-menu-width);
    margin-right: 0;
    width: calc(100% - var(--theme-left-menu-width));
}

.HasLeftMenu:not(.HasRightMenu).LeftMenuClosed .MainArea_Content {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.HasLeftMenu:not(.HasRightMenu).LeftMenuSmall .MainArea_Content {
    margin-left: var(--theme-menu-small-width);
    margin-right: 0;
    width: calc(100% - var(--theme-menu-small-width));
}

.HasRightMenu:not(.HasLeftMenu) .MainArea_Content {
    margin-left: 0;
    margin-right: var(--theme-right-menu-width);
    width: calc(100% - var(--theme-right-menu-width));
}

.tablet.portrait .HasRightMenu:not(.HasLeftMenu) .MainArea_Content {
    width: 100%;   
}



.HasRightMenu:not(.HasLeftMenu).RightMenuClosed .MainArea_Content {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.tablet.portrait .HasRightMenu:not(.HasLeftMenu).RightMenuClosed .MainArea_Content {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.HasRightMenu:not(.HasLeftMenu).RightMenuSmall .MainArea_Content {
    margin-left: 0;
    margin-right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu .MainArea_Content {
    margin-left: var(--theme-left-menu-width);
    margin-right: var(--theme-right-menu-width);
    width: calc(100% - var(--theme-left-menu-width) - var(--theme-right-menu-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed .MainArea_Content {
    margin-left: 0;
    margin-right: var(--theme-right-menu-width);
    width: calc(100% - var(--theme-right-menu-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall .MainArea_Content {
    margin-left: var(--theme-menu-small-width);
    margin-right: var(--theme-right-menu-width);
    width: calc(100% - var(--theme-menu-small-width) - var(--theme-right-menu-width));
}

.HasLeftMenu.HasRightMenu.RightMenuClosed .MainArea_Content {
    margin-left: var(--theme-left-menu-width);
    margin-right: 0;
    width: calc(100% - var(--theme-left-menu-width));
}

.HasLeftMenu.HasRightMenu.RightMenuSmall .MainArea_Content {
    margin-left: var(--theme-left-menu-width);
    margin-right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-left-menu-width) - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed.RightMenuClosed .MainArea_Content {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed.RightMenuSmall .MainArea_Content {
    margin-left: 0;
    margin-right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall.RightMenuClosed .MainArea_Content {
    margin-left: var(--theme-menu-small-width);
    margin-right: 0;
    width: calc(100% - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall.RightMenuSmall .MainArea_Content {
    margin-left: var(--theme-menu-small-width);
    margin-right: var(--theme-menu-small-width);
    width: calc(100% - var(--theme-menu-small-width) - var(--theme-menu-small-width));
}

.Page:not(.FixedFooter) .MainArea__ContentFooter {
    display: none;
}

.Page.FixedFooter .MainArea__ContentFooter {
    background: var(--color-white);
    bottom: var(--theme-colorBar-horizontal);
    -webkit-box-shadow: 0 -1px 5px 0 rgba(0,0,0,.25);
            box-shadow: 0 -1px 5px 0 rgba(0,0,0,.25);
    height: var(--theme-footer-height);
    position: fixed;
    -webkit-transition: var(--theme-default-transition);
         -o-transition: var(--theme-default-transition);
            transition: var(--theme-default-transition);
    width: 100%;

    
    
}

.Page:not(.HasLeftMenu):not(.HasRightMenu) .MainArea__ContentFooter {
    width: 100%;
}

.HasLeftMenu:not(.HasRightMenu) .MainArea__ContentFooter {
    width: calc(100% - var(--theme-left-menu-width));
}

.HasLeftMenu:not(.HasRightMenu).LeftMenuClosed .MainArea__ContentFooter {
    width: 100%;
}

.HasLeftMenu:not(.HasRightMenu).LeftMenuSmall .MainArea__ContentFooter {
    width: calc(100% - var(--theme-menu-small-width));
}

.HasRightMenu:not(.HasLeftMenu) .MainArea__ContentFooter {
    width: calc(100% - var(--theme-right-menu-width));
}

.HasRightMenu:not(.HasLeftMenu).RightMenuClosed .MainArea__ContentFooter {
    width: 100%;
}

.HasRightMenu:not(.HasLeftMenu).RightMenuSmall .MainArea__ContentFooter {
    width: calc(100% - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu .MainArea__ContentFooter {
    width: calc(100% - var(--theme-left-menu-width) - var(--theme-right-menu-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed .MainArea__ContentFooter {
    width: calc(100% - var(--theme-right-menu-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall .MainArea__ContentFooter {
    width: calc(100% - var(--theme-menu-small-width) - var(--theme-right-menu-width));
}

.HasLeftMenu.HasRightMenu.RightMenuClosed .MainArea__ContentFooter {
    width: calc(100% - var(--theme-left-menu-width));
}

.HasLeftMenu.HasRightMenu.RightMenuSmall .MainArea__ContentFooter {
    width: calc(100% - var(--theme-left-menu-width) - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed.RightMenuClosed .MainArea__ContentFooter {
    width: 100%;
}

.HasLeftMenu.HasRightMenu.LeftMenuClosed.RightMenuSmall .MainArea__ContentFooter {
    width: calc(100% - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall.RightMenuClosed .MainArea__ContentFooter {
    width: calc(100% - var(--theme-menu-small-width));
}

.HasLeftMenu.HasRightMenu.LeftMenuSmall.RightMenuSmall .MainArea__ContentFooter {
    width: calc(100% - var(--theme-menu-small-width) - var(--theme-menu-small-width));
}

.MainArea_ContentOverlay,
.RightMenuClosed .MainArea_ContentOverlay {
    display: none;
}

.MainArea_Menu:not(.Splitter) .Menu_Splitter {
    display: none;
}

.MainArea_Menu.Splitter .Menu_Splitter {
    position: fixed;
    -webkit-transition: var(--theme-default-transition);
         -o-transition: var(--theme-default-transition);
            transition: var(--theme-default-transition);
    width: 10px;
    z-index: 2;

    
    
    
    
    
}

.Menu_Splitter.Left {
    background: url("/SU_Resources/img/LeftSpliter_Bar.png?89366&79792") repeat-y left;
    left: var(--theme-left-menu-width);
}

.Menu_Splitter.Right {
    background: url("/SU_Resources/img/RightSpliter_Bar.png?89366&79792") repeat-y right;
    right: var(--theme-right-menu-width);
}

.LeftMenuClosed .Menu_Splitter.Left {
    left: 0;
}

.LeftMenuSmall .Menu_Splitter.Left {
    left: var(--theme-menu-small-width);
}

.RightMenuClosed .Menu_Splitter.Right {
    right: 0;
}

.RightMenuSmall .Menu_Splitter.Right {
    right: var(--theme-menu-small-width);
}

.Header.js-hasScrolled + .MainArea .Menu_Splitter {
    height: calc(100vh  - var(--theme-colorBar-horizontal) - var(--theme-colorBar-horizontal) - var(--theme-header-height-scrolled));
    top: calc(var(--theme-header-height-scrolled) + var(--theme-colorBar-horizontal));
}

.MainArea__SplitterContent {
    height: 65px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 36px;

        
}

.Menu_Splitter.Left .MainArea__SplitterContent {
    background: url("/SU_Resources/img/LeftSpliter_Button.png?89366&79792") no-repeat;
    left: 0;
}

.Menu_Splitter.Right .MainArea__SplitterContent {
    background: url("/SU_Resources/img/RightSpliter_Button.png?89366&79792") no-repeat;
    right: 0;
}

.MainArea__SplitterContent > * {
    font-size: var(--font-size-h5);
    line-height: 20px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 20px;
}

.Menu_Splitter.Left .MainArea__SplitterContent > * {
    left: -18px;
    margin-right: auto;
}

.Menu_Splitter.Right .MainArea__SplitterContent > * {
    margin-left: auto;
    right: -16px;
}

.Page:not(.HasRightMenu) .MainArea_Menu.Right {
    display: none;
}

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

/* Structure > Content */
.Page .MainContent {
    padding: calc(var(--theme-colorBar-horizontal) + var(--theme-header-height-full) + var(--space-base)) var(--space-base) calc(var(--theme-colorBar-horizontal) + var(--space-base));
}

.Page.FixedFooter .MainContent {
    padding: calc(var(--theme-colorBar-horizontal) + var(--theme-header-height-full) + var(--space-base)) var(--space-base) calc(var(--theme-colorBar-horizontal) + var(--theme-footer-height) + var(--space-base));
}

.display-inline-block {
    display: inline-block;
}

.vertical-align-middle {
    vertical-align: middle;
}

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

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

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

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

.display-grid {
    display: grid;
}

/* Structure > ScrollableArea */
.ScrollableArea, .ScrollableArea .scroll-table {
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}

.ScrollableArea:hover, .ScrollableArea .scroll-table:hover {
    scrollbar-color: silver #f3f6f8;
}

.ScrollableArea::-webkit-scrollbar, .ScrollableArea .scroll-table::-webkit-scrollbar,
.ScrollableArea::-webkit-scrollbar-thumb, .ScrollableArea .scroll-table::-webkit-scrollbar-thumb,
.ScrollableArea::-webkit-scrollbar-track, .ScrollableArea .scroll-table::-webkit-scrollbar-track {
    background-color: transparent;
    width: 6px;
}

.ScrollableArea:hover::-webkit-scrollbar-thumb, .ScrollableArea .scroll-table:hover::-webkit-scrollbar-thumb {
    background-color: silver;
}

.ScrollableArea:hover::-webkit-scrollbar, .ScrollableArea .scroll-table:hover::-webkit-scrollbar,
.ScrollableArea:hover::-webkit-scrollbar-track, .ScrollableArea .scroll-table:hover::-webkit-scrollbar-track {
    background-color: #f3f6f8;
}

/* Structure > AnimatedLabel */

.animated-label-input input::-webkit-input-placeholder {
   color:transparent;
}

.animated-label-input input:-moz-placeholder {
   color:transparent; 
}

.animated-label-input input::-moz-placeholder {
   color:transparent; 
}

.animated-label-input input:-ms-input-placeholder {  
   color:transparent;
}

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

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

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

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

.animated-label-inline .select:focus,
.layout .Form .animated-label-inline .select.ReadOnly:not(.Not_Valid):focus,
.animated-label-inline .textarea:focus,
.layout .Form .animated-label-inline .textarea.ReadOnly:not(.Not_Valid):focus {
    border: 0;
    border-bottom: var(--border-size-s) solid var(--color-primary);
    background-color: var(--color-lightGrey) !important;
} 

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

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

.animated-label select:-webkit-autofill,
.animated-label textarea:-webkit-autofill {
   animation-name: onAutoFillStart;
   -webkit-animation-name: onAutoFillStart;

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

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

.animated-label .animated-label-text {
    z-index: 1;
    font-weight: normal;
}

.animated-label .animated-label-input input,
.animated-label .animated-label-input select,
.animated-label .animated-label-input textarea {
    font-weight: bold;
    color: var(--color-neutral-9);
}

.animated-label input,
.animated-label select,
.animated-label textarea {
   line-height: 15px !important;
   height: auto !important;
}

.animated-label textarea {
   resize: none;
}

.animated-label select {
   background-image: none;
}

@-moz-document url-prefix() {
    .animated-label select {
       text-indent: -2px;
    }
}

.animated-label .input-with-icon.input-with-icon-right .input-with-icon-content-icon:not(:empty) + .input-with-icon-input input {
    padding-left: 0px;
}

.animated-label-checkbox {
    height: 45px;
    padding: var(--space-m) var(--space-none) var(--space-xs) var(--space-none);
    border-bottom: var(--border-size-s) solid var(--color-neutral-5)     
}

.animated-label-checkbox .animated-label-input {
    position: absolute;
    right: 10px;
    top: 10px; 
}

.animated-label-checkbox.active {
    border: 0;
    border-bottom: var(--border-size-s) solid var(--color-primary);
    background-color: var(--color-lightGrey) !important;
}

.animated-label .animated-label-text label {
  color: var(--color-neutral-9);
  font-size: var(--font-size-s);
  font-weight: normal;
}

.animated-label.animated-label-readonly .animated-label-text label {
  color: var(--color-grey);
}

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

.animated-label-checkbox.active .animated-label-text {
    font-size: var(--font-size-s);
    top: 15px;
}

.animated-label-checkbox.active .animated-label-text label {
    font-size: var(--font-size-s);
}

.animated-label-inline .input[readonly=readonly] {
  border-bottom: var(--border-size-s) solid var(--color-neutral-5);
  background-color: transparent;
}

/* ================================================================ */
/*  $2.3 - Style - Colors                                           */
/* ================================================================ */

/* ================================================================ */
/*  $2.3.1 - Style - Colors - Brand                                 */
/* ================================================================ */

/* Style - Colors - Main Brand Colors */

.background-G1 { background-color: var(--color-G1);}
.background-G2 { background-color: var(--color-G2);}
.background-G3 { background-color: var(--color-G3);}
.background-G4 { background-color: var(--color-G4);}
.background-G5 { background-color: var(--color-G5);}
.background-G6 { background-color: var(--color-G6);}
.background-G7 { background-color: var(--color-G7);}
.background-G8 { background-color: var(--color-G8);}
.background-G9 { background-color: var(--color-G9);}
.background-G10 { background-color: var(--color-G10);}
.background-G11 { background-color: var(--color-G11);}
.background-G12 { background-color: var(--color-G12);}
.background-G13 { background-color: var(--color-G13);}
.background-G14 { background-color: var(--color-G14);}

.text-G1 { color: var(--color-G1);}
.text-G2 { color: var(--color-G2);}
.text-G3 { color: var(--color-G3);}
.text-G4 { color: var(--color-G4);}
.text-G5 { color: var(--color-G5);}
.text-G6 { color: var(--color-G6);}
.text-G7 { color: var(--color-G7);}
.text-G8 { color: var(--color-G8);}
.text-G9 { color: var(--color-G9);}
.text-G10 { color: var(--color-G10);}
.text-G11 { color: var(--color-G11);}
.text-G12 { color: var(--color-G12);}
.text-G13 { color: var(--color-G13);}
.text-G14 { color: var(--color-G14);}

/* Style - Colors - Brand Colors - Icons*/

.background-G15 { background-color: var(--color-G15);}
.background-G16 { background-color: var(--color-G16);}
.background-G17 { background-color: var(--color-G17);}
.background-G18 { background-color: var(--color-G18);}
.background-G19 { background-color: var(--color-G19);}
.background-G20 { background-color: var(--color-G20);}

.text-G15 { color: var(--color-G15);}
.text-G16 { color: var(--color-G16);}
.text-G17 { color: var(--color-G17);}
.text-G18 { color: var(--color-G18);}
.text-G19 { color: var(--color-G19);}
.text-G20 { color: var(--color-G20);}


/* Style - Colors - Brand Colors - Neutrals*/

.background-mediumGrey { background-color: var(--color-mediumGrey);}
.background-black { background-color: var(--color-black);}
.background-lightGrey { background-color: var(--color-lightGrey);}
.background-darkGrey { background-color: var(--color-darkGrey);}
.background-white { background-color: var(--color-white);}
.background-grey { background-color: var(--color-grey);}

.text-mediumGrey { color: var(--color-mediumGrey);}
.text-black { color: var(--color-black);}
.text-lightGrey { color: var(--color-lightGrey);}
.text-darkGrey { color: var(--color-darkGrey);}
.text-white { color: var(--color-white);}
.text-grey { color: var(--color-grey);}


.background-primary-lightest {background-color: var(--color-G14);}/* Background color for the User Initials Pattern */

.su-page-title {
    color: var(--color-primary);
    font-size: var(--font-size-h3);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
}

.su-page-subtitle {
    color: var(--color-primary);
    font-size: var(--font-size-h5);
    font-weight: var(--font-semi-bold);
    line-height: 1.25;
}


/* ================================================================ */
/*  $3 - Patterns                                                   */
/* ================================================================ */

/* ================================================================ */
/*  $3.1 - Patterns - OutsystemUI                                   */
/* ================================================================ */

/* Patterns - OutsystemUI - Controls - ButtonGroup */
.button-group label:not(:first-child) .btn,
.button-group .btn {
    background-color: var(--color-lightGrey);
    border-width: 2px 1px 2px 1px;
    border-style: solid;
    border-color: var(--color-mediumGrey);
    width: 100%;
    color: #666;
    font-size: var(--font-size-s);
    font-weight: normal;;
    
}

.button-group input[type="radio"]:checked + .btn,
.button-group input[type="radio"]:checked:hover + .btn {
    box-shadow:none;
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    font-size: var(--font-size-s);
    font-weight: bold;
}
.button-group .btn,
.button-group input[type="radio"]:checked {
    border-right-width: var(--border-size-s);
}

.button-group input[type="radio"]:not(:checked):hover + .btn {
    box-shadow: none;
    background-color: var(--color-lightGrey);
    border-color:var(--color-primary);
    color: var(--color-darkGrey);
}


.button-group label:last-child .btn{ 
    border-right-width: var(--border-size-m);
}

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

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

/* Specific for BothSelectionButton */

.BoxData .ThemeGrid_Width6 {
    width: 130px;
}

/* Patterns - OutsystemUI - Controls - DatePicker - TimePicker*/
div.calendar tbody td.selected, 
div.calendar tbody th.selected {
    background-color: var(--color-primary);
}

div.calendar tbody td.hilite, 
div.calendar tbody th.hilite {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

div.calendar tbody .rowhilite td.selected, 
div.calendar tbody .rowhilite th.selected{
    background-color: var(--color-secondary);
    color: var(--color-white);
}
    
.pika-go-today,
.pika-label{
   
}

.pika-today-container:hover, .pika-today-container:hover .pika-go-today, .pika-go-today:hover{
      background-color: var(--color-primary);
      color: var(--color-white);
  }

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

.time-picker {
    border:none;
}

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

.is-disabled .pika-button,
.is-outside-current-month.is-selection-disabled.is-disabled .pika-button {
    background-color: var(--color-neutral-2);
    text-decoration: none;
    color: var(--color-neutral-6);
}

/* Patterns - OutsystemUI - Controls - Dropdown */
.is--visible .dropdown-header.select{
    border: var(--border-size-m) solid var(--color-primary);
     background: var(--color-white);
}

.dropdown .dropdown-header{
    background-color: var(--color-lightGrey);
    border: var(--border-size-s) solid var(--color-mediumGrey);
    color: var(--color-darkGrey);
    font-size: var(--font-size-s);
    font-weight: var(--font-regular);
}

.dropdown.is--visible .dropdown-content .dropdown-content-list{
     border: var(--border-size-m) solid var(--color-primary);
}

.dropdown.is--visible .dropdown-icon{
    color: var(--color-primary);
}


/* Patterns - OutsystemUI - Controls - Dropdown Select */
.choices__inner{
    background-color: var(--color-lightGrey);
    border: var(--border-size-s) solid var(--color-mediumGrey);
    color: var(--color-darkGrey);
    font-size: var(--font-size-s);
    font-weight: var(--font-regular);
    padding: 0 15px;
}

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

.is-focused .choices__inner {
    background: var(--color-white);
    border: var(--border-size-m) solid var(--color-primary);
}


.choices__list--dropdown
{
    background-color: var(--color-white);
    color: var(--color-darkGrey);
}

.choices__list--dropdown.is-active{
    border-color: var(--color-primary);
}

.choices__list--dropdown .choices__item {
    min-height: 40px;
    height: auto;
    word-break: break-word;
}

.choices__list--single .choices__item {
    color: var(--color-darkGrey);
}

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

/* Patterns - OutsystemUI - Controls - Toggle Button */
.toggle-button{
    background-color: var(--color-mediumGrey);
    width: 60px;
    border-radius: 20px;
    height: 26px;  
}

 .toggle-button.toggle-button-checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
} 

 .toggle-button:after{
     height:19px;
     width:19px;
}

 .toggle-button.toggle-button-checked:after {
    -webkit-transform: translateX(35px) translateZ(0);
            transform: translateX(35px) translateZ(0);  
}

.toggle-button:before {
  content: "\f00d";
  font-weight: bold;
  font-size: var(--font-size-h6);
  font-family: 'FontAwesome';
  color: white;
  position: absolute;
  left: 34px;
  top: -1.5px;
}

.toggle-button.toggle-button-checked:before{
     content: "\f00c";
    left: 6px;
}

/* ===================================================================== */
/*  $3.2 - Patterns - Columns                                            */
/* ===================================================================== */
.column-item-preview {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-3);
    color: var(--color-neutral-7);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--font-size-h2);
    height: 110px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}


/* ===================================================================== */
/*  $3.3 - Patterns - Floating Actions                                   */
/* ===================================================================== */
.floating-actions-button {
    box-shadow: none;
}

.floating-actions.is--open .floating-actions-button {
    /*-webkit-filter: none;*/
     filter: none;
}

.floating-actions-button:hover {
    /*-webkit-filter: none;*/
     filter: none;
}

.floating-actions {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0;
    position: relative;
}

.floating-actions-button {
    margin-left: 56px; 
}

.floating-actions-item-button {
    box-shadow: none;
    border: var(--border-size-m) solid var(--color-mediumGrey);
}


/* ===================================================================== */
/*  $3.4 - Patterns - Separator                                          */
/* ===================================================================== */
.separator-preview {
    position: relative;
}

.separator-preview:before,
.separator-preview:after {
    background-color: var(--color-primary);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

.separator-preview:before {
    top: 100%;    
}

.separator-preview:after {
    bottom: 100%;    
}

.separator-preview.margin-y-xs:before,
.separator-preview.margin-y-xs:after {
    height: var(--space-xs);
}

.separator-preview.margin-y-s:before,
.separator-preview.margin-y-s:after  {
    height: var(--space-s);
}

.separator-preview.margin-y-base:before,
.separator-preview.margin-y-base:after {
    height: var(--space-base);
}

.separator-preview.margin-y-m:before,
.separator-preview.margin-y-m:after {
    height: var(--space-m);
}

.separator-preview.margin-y-l:before,
.separator-preview.margin-y-l:after {
    height: var(--space-l);
}

.separator-preview.margin-y-xl:before,
.separator-preview.margin-y-xl:after {
    height: var(--space-xl);
}

.separator-preview.margin-y-xxl:before,
.separator-preview.margin-y-xxl:after {
    height: var(--space-xxl);
}

/* ===================================================================== */
/*  $3.5 - Patterns - Tabs                                               */
/* ===================================================================== */

.tabs .tabs-header > span {
    display: flex;
}

/*----------Horizontal Tabs -------------*/

.CustomTabs .tabs-header {
margin-left:1px;
margin-right:1px;

}

.CustomTabs .tabs-header-item {
    font-size: var(--font-size-s);
    font-family: 'Regular TQ', Arial;
    color: var(--color-white);
    border-right: var(--border-size-m) solid var(--color-primary);
    border-bottom: var(--border-size-m) solid var(--color-primary);
    border-top: var(--border-size-m) solid var(--color-primary);
    border-left: var(--border-size-m) solid var(--color-primary);
    background-color: var(--color-primary);
    font-weight: bold;
    margin-left: 1px;
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}

.CustomTabs .tabs-header-item:hover{
    border: var(--border-size-m) solid var(--color-secondary);
    border-bottom: var(--border-size-m) solid var(--color-secondary);
    color: var(--color-white);
    font-weight: bold;
    background-color: var(--color-secondary);
    }

.CustomTabs .tabs-header-item.active {
    border-left: var(--border-size-m) solid var(--color-primary);
    border-top: var(--border-size-m) solid var(--color-primary);
    border-bottom: var(--border-size-m) solid var(--color-primary);
    border-right:var(--border-size-m) solid var(--color-primary);
    color: var(--color-primary);
    font-weight: bold;
    background-color: var(--color-white);
     
}

.CustomTabs .tabs .tabs-content {
  border: var(--color-white);
}

/*-----------Justified Tabs--------------*/
.Custom .tabs.justified .tabs-header-item {
    margin-left: 1px;
    -webkit-box-flex: 0;
    flex: 0;
}

/*------------Vertical Tabs--------------*/

.CustomTabs .tabs.tabs-vertical .tabs-header-item {
    font-size: var(--font-size-s);
    font-family: 'Regular TQ', Arial;
    color: var(--color-white) ;
    border-right: var(--border-size-m) solid var(--color-primary);
    border-bottom: var(--border-size-m) solid var(--color-primary);
    border-top: var(--border-size-m) solid var(--color-primary);
    border-left: var(--border-size-m) solid var(--color-primary);
    background-color: var(--color-primary);
    font-weight: bold;
    margin-top: 1px;
    padding-left: var(--space-s);  
}
.CustomTabs .tabs.tabs-vertical .tabs-header-item.active, 
.CustomTabs .tabs.tabs-vertical .tabs-header-item.active:hover {
    border-left: var(--border-size-m) solid var(--color-primary);
    border-top: var(--border-size-m) solid var(--color-primary);
    border-bottom: var(--border-size-m) solid var(--color-primary);
    border-right: var(--border-size-m) solid var(--color-primary);
    color: var(--color-primary);
    font-weight: bold;
    background-color: var(--color-white);
}

.CustomTabs .tabs.tabs-vertical .tabs-header-item:hover {
    border: var(--border-size-m) solid var(--color-secondary);
    border-bottom: var(--border-size-m) solid var(--color-secondary);
    color: var(--color-white);
    font-weight: bold;
    background-color: var(--color-secondary);
}

.CustomTabs .tabs.tabs-vertical .tabs-content {
    border: var(--color-white);
    margin-left: 1px;
}


.CustomTabs .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item {
    font-size: var(--font-size-s);
    font-family: 'Regular TQ', Arial;
    color: var(--color-white);
    border-right: var(--border-size-m) solid var(--color-primary);
    border-bottom: var(--border-size-m) solid var(--color-primary);
    border-top: var(--border-size-m) solid var(--color-primary);
    border-left: var(--border-size-m) solid var(--color-primary);
    background-color: var(--color-primary);
    font-weight: bold;
    margin-top: 1px;
    padding-right: var(--space-s); 
}
.CustomTabs .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item:hover {
    border: var(--border-size-m) solid var(--color-secondary);
    border-bottom: var(--border-size-m) solid var(--color-secondary);
    color: var(--color-white);
    font-weight: bold;
    background-color: var(--color-secondary);
}
.CustomTabs .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-item.active {
    border-left: var(--border-size-m) solid var(--color-primary);
    border-top: var(--border-size-m) solid var(--color-primary);
    border-bottom: var(--border-size-m) solid var(--color-primary);
    border-right: var(--border-size-m) solid var(--color-primary);
    color: var(--color-primary);
    font-weight: bold;
    background-color: var(--color-white);
}

.CustomTabs .tabs.tabs-vertical.tabs-header-right .tabs-content {
    border: var(--color-white);
    margin-right: 1px;
}





/* ================================================================ */
/*  $4 - Widgets                                                    */
/* ================================================================ */

/* ================================================================ */
/*  $4.1 - Widgets - OutsystemUI                                    */
/* ================================================================ */

/* Widgets - OutsystemsUI - File Upload */
.file-upload > label {
    display: contents;
}

/* Widgets - OutsystemsUI - Table Records */
.TableRecords_Header.SortColumns_Sortable{
    color: var(--color-primary);
}

.TableRecords .TableRecords_Header{
    color: var(--color-primary);
}

.desktop .TableRecords .TableRecords_Header.SortColumns_Sortable:hover{
    color: var(--color-terciary);
}

.TableRecords .TableRecords_Header.SortColumns_Sorted{
    color: var(--color-terciary);
}

.TableRecords tr.active-row > td {
  background-color: var(--color-G14);
}

div.Feedback_Message_Warning, div.Feedback_Message_Warning a.Feedback_Message_Wrapper_Close::before {
    color: var(--color-neutral-0);
}

tablet div.Feedback_Message_Error,
tablet div.Feedback_Message_Warning,
tablet div.Feedback_Message_Success,
tablet div.Feedback_Message_Info {
    max-width: 80%;
    min-width: auto;
}

.phone div.Feedback_Message_Error,
.phone div.Feedback_Message_Warning,
.phone div.Feedback_Message_Success,
.phone div.Feedback_Message_Info {
    max-width: 95%;
    min-width: auto;
}

.tablet a.Feedback_Message_Wrapper_Close, .phone a.Feedback_Message_Wrapper_Close {
    display: none;
}

/* ================================================================ */
/*  $4.2 - Patterns - RichWidgets                                   */
/* ================================================================ */

/* Patterns - RichWidgets - Feedback Ajax Loading */
div.Feedback_AjaxWait {
    border: 0;
    font-size: var(--font-size-s);
    padding: 20px 10px 20px 5px;
    top: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    position: fixed;
}

div.Feedback_AjaxWait:before {
    display: none;
}

/* Patterns - RichWidgets - Popup Editor */
.os-internal-ui-dialog-content .Text_Note {
    margin-top: 10px !important;
}

/* ===================================================================== */
/*  $4.3 - Widgets - Buttons                                             */
/* ===================================================================== */
.Is_Default.button-hover {
    /*-webkit-filter: brightness(.9);*/
            filter: brightness(.9);
}

.button-hover {
    /*-webkit-filter: brightness(.95);*/
            filter: brightness(.95);
}

.Is_Default.button-pressed {
    /*-webkit-filter: brightness(.8);*/
            filter: brightness(.8);
}

.button-pressed {
    /*-webkit-filter: brightness(.9);*/
            filter: brightness(.9);
}

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

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

/*---------Live StyleGuide----------*/
/*---------Primary Buttons----------*/
.Button.Is_Default {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: var(--border-size-m) solid var(--color-primary);
}

.Button.Is_Default[disabled], .Button.Is_Default:disabled, .Button.Danger[disabled], .Button.Danger:disabled, .Button.Success[disabled], .Button.Success:disabled { 
    background-color: var(--color-lightGrey);
    border-color: var(--color-mediumGrey);
    color: var(--color-grey);
}

/*-----------Secondary Button-----------------*/

.Button {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-primary);
    color: var(--color-primary);
    height: var(--space-xl);
    border-radius: var(--border-radius-soft);
}

.Button[disabled], .Button:disabled {
    border: var(--border-size-m) solid var(--color-mediumGrey);
    box-shadow: none;
    color: var(--color-grey);
    pointer-events: none;
    background-color: var(--color-white);
}

/*------------Hover-----------------------*/

.Button:hover{
    background-color: var(--color-secondary);
    border: var(--border-size-m) solid var(--color-secondary);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button:hover:active {
    background-color: var(--color-secondary);
    border: var(--border-size-m) solid var(--color-secondary);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.Hover, .Button.Pressed {
    background-color: var(--color-secondary);
    border: var(--border-size-m) solid var(--color-secondary);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

/*----------------Cancel Button-------------*/
.Button.Cancel{
    border: var(--border-size-m) solid var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-white);
}

/*---------------Button Size---------------*/
.Button.btn-Large {
     font-size: var(--font-size-base);
    height: var(--space-xxl);
}
/*------------------Shape---------------------*/


.btn-border-radius-none {
    border-radius: var(--border-radius-none);
}

.btn-border-radius-rounded {
    border-radius: var(--border-radius-rounded);
}
/*---------------Color Button-------------*/

/*Primary Buttons*/
.Button.Is_Default.ColorG1 {
    background-color: var(--color-G1);
    color: var(--color-white);
    border: var(--border-size-m) solid var(--color-G1);
}
.Button.Is_Default.ColorG1:hover{
    background-color:var(--color-G2);
    border: var(--border-size-m) solid var(--color-G2);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.Is_Default.ColorG1:active {
    background-color:var(--color-G2);
    border: var(--border-size-m) solid var(--color-G2);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.Is_Default.ColorG8 {
    background-color: var(--color-G8);
    color: var(--color-white);
    border: var(--border-size-m) solid var(--color-G8);
}
.Button.Is_Default.ColorG8:hover{
    background-color:var(--color-G9);
    border: var(--border-size-m) solid var(--color-G9);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.Is_Default.ColorG8:active{
    background-color:var(--color-G9);
    border: var(--border-size-m) solid var(--color-G9);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.Is_Default.ColorG5 {
    background-color: var(--color-G5);
    color: var(--color-white);
    border: var(--border-size-m) solid var(--color-G5);
}
.Button.Is_Default.ColorG5:hover{
    background-color: var(--color-G13);
    border: var(--border-size-m) solid var(--color-G13);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.Is_Default.ColorG5:active {
    background-color: var(--color-G13);
    border: var(--border-size-m) solid var(--color-G13);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

/*Extended Buttons*/
.Button.ColorG1 {
    background-color: var(--color-white);
    color: var(--color-G1);
    border: var(--border-size-m) solid var(--color-G1);
}
.Button.ColorG1:hover{
    background-color: var(--color-G2);
    border: var(--border-size-m) solid var(--color-G2);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.ColorG1:active {
    background-color: var(--color-G2);
    border: var(--border-size-m) solid var(--color-G2);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.ColorG8 {
    background-color: var(--color-white);
    color: var(--color-G8);
    border: var(--border-size-m) solid var(--color-G8);
}
.Button.ColorG8:hover{
    background-color: var(--color-G9);
    border: var(--border-size-m) solid var(--color-G9);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.ColorG8:active{
    background-color: var(--color-G9);
    border: var(--border-size-m) solid var(--color-G9);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.ColorG5 {
    background-color: var(--color-white);
    color: var(--color-G5);
    border: var(--border-size-m) solid var(--color-G5);
}
.Button.ColorG5:hover{
    background-color: var(--color-G13);
    border: var(--border-size-m) solid var(--color-G13);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

.Button.ColorG5:active {
    background-color: var(--color-G13);
    border: var(--border-size-m) solid var(--color-G13);
    color: var(--color-white);
    /*-webkit-filter: brightness(100%);*/
    filter: brightness(100%);
}

/* ===================================================================== */
/*  $4.4 - Widgets - Editable Table                                      */
/* ===================================================================== */
.align-left .ListNavigation_Wrapper {
    -webkit-box-pack: start;
       -ms-flex-pack: start;
     justify-content: flex-start;
}

.EditableTable select {
    display: none;
}

.EditableTable .OnEdit select {
    display: table-cell;
}

.EditableTable .Selected.OnEdit .tag,
.EditableTable .Selected.OnEdit .custom-class {
    display: none;
}


/* ===================================================================== */
/*  $4.5 - Widgets - Feedback Ajax Wait                                  */
/* ===================================================================== */
.Feedback_AjaxWait.show-ajax  {
    display: block !important;
}


/* ===================================================================== */
/*  $4.6 - Widgets - Form Elements                                       */
/* ===================================================================== */
input.input-hover,
select.input-hover,
textarea.input-hover {
    border: var(--border-size-s) solid var(--color-neutral-6);
}

input.input-active,
select.input-active,
textarea.input-active,
input.input-active:hover,
select.input-active:hover,
textarea.input-active:hover{
    border: var(--border-size-m) solid var(--color-primary);
}

.input-small.input[type="text"] {
    height: var(--space-l);
    padding: var(--space-none) var(--space-s);    
}

.input-large.input[type="text"]{
    height: var(--space-xxl); 
}


/*------------------------------------*\
    $5. Forms
\*-------------------------------------*/

/*------------------------------------------------------------*/
/* 5.1 Forms > Inputs, Selects & Textarea *********************/
/*------------------------------------------------------------*/
.input, textarea.input, .select {
    background-color: var(--color-lightGrey);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-5);
    color: var(--color-neutral-9);
    font-size: var(--font-size-s);
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 180ms linear;
    transition: all 180ms linear;
}

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

input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    height: 40px;
    line-height: 38px;
}


textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
    background-color: var(--color-lightGrey);
    border: var(--border-size-m) solid var(--color-primary);
    color: var(--color-darkGrey);
}

select,
.Form select, 
.Form select.ReadOnly {
    height: 40px;
    line-height: 22px;
    padding: 9px 25px 9px 15px;
}

textarea,
.Form textarea,
.Form textarea.ReadOnly {
    line-height: 22px;
    padding: 10px 15px;
}

label,
.Form label {
    color: var(--color-grey);
    font-size: var(--font-size-s);
    font-weight: var(--font-bold);
    padding: 0 0 5px;
}

/* responsive context */
.tablet input[type="text"],
.tablet input[type="password"],
.tablet input[type="datetime"],
.tablet input[type="datetime-local"],
.tablet input[type="date"],
.tablet input[type="month"],
.tablet input[type="time"],
.tablet input[type="week"],
.tablet input[type="number"],
.tablet input[type="email"],
.tablet input[type="url"],
.tablet input[type="search"],
.tablet input[type="tel"],
.tablet input[type="color"],
.tablet select,
.phone input[type="text"],
.phone input[type="password"],
.phone input[type="datetime"],
.phone input[type="datetime-local"],
.phone input[type="date"],
.phone input[type="month"],
.phone input[type="time"],
.phone input[type="week"],
.phone input[type="number"],
.phone input[type="email"],
.phone input[type="url"],
.phone input[type="search"],
.phone input[type="tel"],
.phone input[type="color"],
.phone select {
    height: 40px;
}

.tablet select,
.phone select {
    line-height: 22px;
}

/*------------------------------------------------------------*/
/* 5.2 Forms > ReadOnly & Disabled ****************************/
/*------------------------------------------------------------*/

.Form input.ReadOnly:not(.Not_Valid),
.Form textarea.ReadOnly:not(.Not_Valid),
.Form select.ReadOnly:not(.Not_Valid) {
    background-color: var(--color-lightGrey);
    border: var(--border-size-s) solid var(--color-mediumGrey);
    color: var(--color-darkGrey);
}

.Form input[type='radio'].ReadOnly:not(.Not_Valid) {
    background-color: transparent;
    border: 0;
}

.Form textarea.ReadOnly:focus,
.Form select.ReadOnly:focus,
.Form .input.ReadOnly:not(.Not_Valid):focus,
.Form input[type="text"].ReadOnly:focus,
.Form input[type="password"].ReadOnly:focus,
.Form input[type="datetime"].ReadOnly:focus,
.Form input[type="datetime-local"].ReadOnly:focus,
.Form input[type="date"].ReadOnly:focus,
.Form input[type="month"].ReadOnly:focus,
.Form input[type="time"].ReadOnly:focus,
.Form input[type="week"].ReadOnly:focus,
.Form input[type="number"].ReadOnly:focus,
.Form input[type="email"].ReadOnly:focus,
.Form input[type="url"].ReadOnly:focus,
.Form input[type="search"].ReadOnly:focus,
.Form input[type="tel"].ReadOnly:focus,
.Form input[type="color"].ReadOnly:focus {
    background-color: var(--color-lightGrey);
    border: var(--border-size-m) solid var(--color-primary);
    color: var(--color-darkGrey);
}

.Form textarea.ReadOnly[disabled="disabled"],
.Form select.ReadOnly[disabled="disabled"],
.Form input.ReadOnly[disabled="disabled"],
textarea[disabled="disabled"],
select[disabled="disabled"],
input[disabled="disabled"] {
    background: var(--color-lightGrey);
    border: var(--border-size-s) solid #ccc;
    color: var(--color-grey);
}

/*------------------------------------------------------------*/
/* 5.3 Forms > Not Valid **************************************/
/*------------------------------------------------------------*/
.input.Not_Valid, .textarea.Not_Valid, .select.Not_Valid {
    border: var(--border-size-s) solid var(--color-error);
}

.Form input.not[type="radio"].Not_Valid,
.Form textarea.Not_Valid,
.Form select.Not_Valid,
input.not[type="radio"].Not_Valid,
textarea.Not_Valid,
select.Not_Valid,
input[type="text"].Not_Valid,
input[type="password"].Not_Valid,
input[type="datetime"].Not_Valid,
input[type="datetime-local"].Not_Valid,
input[type="date"].Not_Valid,
input[type="month"].Not_Valid,
input[type="time"].Not_Valid,
input[type="week"].Not_Valid,
input[type="number"].Not_Valid,
input[type="email"].Not_Valid,
input[type="url"].Not_Valid,
input[type="search"].Not_Valid,
input[type="tel"].Not_Valid,
input[type="color"].Not_Valid {
    /* !important to ensure style on Invalid input */
    border: var(--border-size-m) solid var(--color-error) !important;
    padding: 0 15px;
}


.ValidationMessage {
    color: var(--color-error);
    font-size: var(--font-size-xs);
    font-weight: var(--font-regular);
    margin-top: 4px;
}

.MandatoryCaption:after,
.Form label.MandatoryLabel:after,
.EditableTable thead th.Mandatory:after {
    color: var(--color-error);
    font-size: var(--font-size-s);
    font-weight: var(--font-bold);
    position: relative;
}

/*------------------------------------------------------------*/
/* 5.4 Forms > Radio Button & Checkbox ************************/
/*------------------------------------------------------------*/
/*Radio Button*/

.radio-button{
/*height: 16px;*/
margin-bottom: 2px;
}
.radio-button:checked:before {
    height: 8px;
    width: 8px;
}

.radio-button:not(:checked):before {
    height: 18px;
    width: 18px;
}


input[type="checkbox"],
input[type="checkbox"].ReadOnly,
.Form input[type="checkbox"].ReadOnly {
    border: 0;
    padding: 0;
}


/* Disabled ************************* */

input[type="checkbox"]:disabled:before,
input[type="checkbox"]:disabled:checked:before {
    background: var(--color-lightGrey);
    border: var(--border-size-s) solid #ccc;
    -webkit-box-shadow: none;
            box-shadow: none;
}

input[type="checkbox"]:disabled:checked:after {
    border-color: var(--color-grey);
}

/*------------------------------------------------------------*/
/* 6 Dynamic Themes *******************************************/
/*------------------------------------------------------------*/

.DynamicSULogo {
    background-image: url(/SU_Resources/img/sitelogoextended.png?79792);
    background-repeat: no-repeat;
}

.DynamicPartnerLogo {
    display: none;
    background-repeat: no-repeat;
}

/*------------------------------------------------------------*/
/* 7 Accessibility ********************************************/
/*------------------------------------------------------------*/

.accessibility-on {
    --focus-border-color: #ffffff;
    --focus-outline-color: #4f5f5e;

    --color-G1: #b02a2a;
    --color-G2: #883e3e;
    --color-G3: #aa1b17; /* --color-secondary */
    --color-G4: #c21b17; /* --color-primary */
    --color-G5: #c30000;
    --color-G6: #820000;
    --color-G7: #863c3c;
    --color-G8: #00af41; /* --color-terciary */
    --color-G9: #9a0101;
    --color-G10: #680000;
    --color-G11: #960000;
    --color-G12: #772929;
    --color-G13: #990000;
    --color-G14: #ebe6e6;

    --color-primary: var(--color-G4);
    --color-secondary: var(--color-G3);
    --color-terciary: var(--color-G8);
    --color-primary-hover: var(--color-G3);
}

.accessibility-on :focus:not(a):not(.choices):not(.checkbox):not(.radio-button):not(.StepsItem__Step):not(.tooltip-widget),
.accessibility-on .button-group :focus + .btn,
.accessibility-on .CustomRadioCheckbox input:focus + div:before,
.accessibility-on .choices.is-focused .choices__inner,
.accessibility-on .toggle-button:has(input:focus),
.accessibility-on .checkbox:focus:before,
.accessibility-on .tooltip-widget:focus > div:first-child {
    border: var(--focus-border-color) solid 1px !important;
    outline: var(--focus-outline-color) solid 3px !important;
}

.accessibility-on .radio-button:focus:before {
    outline: var(--focus-outline-color) solid 3px !important;
}

.accessibility-on .tooltip-widget > span.fa:before {
    width: 14px;
    display: inline-block;
}

.accessibility-on .tooltip-widget:focus > span.fa:before {
    border: var(--focus-border-color) solid 1px !important;
    outline: var(--focus-outline-color) solid 2px !important;
    border-radius: 50%;
}

.accessibility-on div.Steps_Container {
    margin-top: 1px;
}

.accessibility-on svg.OctagonSVG {
    overflow: visible;
}

.accessibility-on div.StepsItem__Step:focus .Octagon-line {
    fill: var(--focus-outline-color);
    stroke: var(--focus-outline-color);
    stroke-width: 1px;
}

.accessibility-on a:focus {
    border-bottom: 2px solid var(--focus-outline-color);
    margin-bottom: -2px;
}

.accessibility-on a:focus:before {
    color: var(--focus-border-color) !important;
}

.accessibility-on a.skip-to-main-content {
    position: absolute;
    top: -100px;
    z-index: 2147483648;
    padding: 1em;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: var(--color-secondary);
    border: 2px solid var(--focus-outline-color);
}

.accessibility-on a.skip-to-main-content:focus {
    top: 0;
}

.accessibility-on .modal {
    display: none;
}

.accessibility-on .modal.is--visible {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
}

.accessibility-on .gm-style > iframe[aria-hidden] {
    display: none;
}

.accessibility-on div:has(.gm-style) > div[role=region] {
    width:auto !important;
    height: auto !important;
}

.accessibility-on label,
.accessibility-on .Form label {
    color: var(--color-black);
}

.accessibility-on .Button.Is_Default[disabled], 
.accessibility-on .Button.Is_Default:disabled, 
.accessibility-on .Button.Danger[disabled], 
.accessibility-on .Button.Danger:disabled, 
.accessibility-on .Button.Success[disabled], 
.accessibility-on .Button.Success:disabled,
.accessibility-on .Button[disabled], 
.accessibility-on .Button:disabled { 
    background-color: var(--color-neutral-1);
    color: var(--color-darkgrey);
}

.accessibility-on .choices__list--single .choices__item {
    color: var(--color-neutral-10);
}

.accessibility-on .toggle-button.toggle-button-checked,
.accessibility-on .TableRecords .TableRecords_Header [type="checkbox"]:checked:before,
.accessibility-on .checkbox:checked:before,
.CustomRadioCheckbox input[type="radio"]:checked + div:after {
    background-color: var(--color-terciary);
    border-color: var(--color-terciary);
}

.accessibility-on .radio-button:checked:before {
    border-color: var(--color-terciary);
}

.accessibility-on div.Feedback_AjaxWait .Loader div {
    background-color: var(--color-primary) !important;
}

.accessibility-on div.Feedback_Message_Wrapper {
    font-size: var(--font-size-base);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    white-space: nowrap;
}