@import url("/DublinTheme/Theme.DublinTheme.css?66");

/*
    How to generate a theme for your company: 
    
        1 - Go to http://labs.outsystems.net/ThemeCustomizer/GenerateDublin.aspx
        2 - Copy the generated CSS
        3 - Replace the CSS for Primary Color Customization below with the Generated CSS

*/

/*------------------------------------*\
             Import Font
\*------------------------------------*/



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

.Body02 {
    color: #101010;
    font-size: 14px;
    font-weight: 400;
    
}


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

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

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

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

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

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

/*------------------------------------*\
             Font Definition
\*------------------------------------*/

html, body, a, select, form, fieldset, table, tr, td, img, input, button, select, textarea, optgroup, option {
   
   font-family: 'Open-Sans', Meiryo, sans-serif;
 
   
}

.TileIcon_text, .TileNumber_text, .TileIconText_label, .Heading1, .Heading2, .Heading3, .Heading4, .Header_title a, .EditableTable thead td, .TableRecords_Header {
   
    font-family: 'Oswald', Meiryo, sans-serif;
}
/*------------------------------------*\
   Font Definition via google fonts
\*------------------------------------*/
@font-face {    
    font-family: 'Montserrat';
    src: url('/KanguruWeb/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 400;  
    font-style: normal;
}

@font-face {    
    font-family: 'Montserrat';
    src: url('/KanguruWeb/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 700;  
    font-style: normal;
}

@font-face {    
    font-family: 'Montserrat';
    src: url('/KanguruWeb/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 900;  
    font-style: normal;
}

html, body, a, select, form, fieldset, table, tr, td, img, input, button, select, textarea, optgroup, option {
   
   font-family: 'Montserrat', sans-serif; 
   color: #101010;
   font-size: 14px;
   font-weight: 400;
}


.TileIcon_text, .TileNumber_text, .TileIconText_label, .Heading1, .Heading2, .Heading3, .Heading4, .Header_title a, .EditableTable thead td, .TableRecords_Header {
   
    font-family: 'Montserrat', sans-serif;
}

/*------------------------------------*\
              Font Classes
\*------------------------------------*/

/* Font Oswald classes */

.Oswald_Regular {
    font-family: 'Oswald',Meiryo;
    font-weight: 400;
}

.Oswald_Bold {
    font-family: 'Oswald',Meiryo;
    font-weight: 700;
}

.Oswald_Light {
    font-family: 'Oswald',Meiryo;
    font-weight: 300;
}

/* Font OpenSans classes */

.OpenSans_Regular {
    font-family:  'Open-Sans', Meiryo, sans-serif;
    font-weight: 400;
}

.OpenSans_Bold {
    font-family:  'Open-Sans', Meiryo, sans-serif;
    font-weight: 700;
}

.OpenSans_Italic {
    font-family:  'Open-Sans',Meiryo, sans-serif;
    font-style: italic;
}

.OpenSans_Semibold {
    font-family:  'Open-Sans',Meiryo, sans-serif;
    font-weight: 600;
}



/***************************************/
/***** PRIMARY COLOR CUSTOMIZATION *****/
/***************************************/

:root {
    
    /* Typography - Size */
    --font-size-display: 36px;
    --font-size-h1: 50x;
    --font-size-h2: 42px;
    --font-size-h3: 35px;
    --font-size-h4: 29px;
    --font-size-h5: 24px;
    --font-size-h6: 18px;
    --font-size-base: 16px;
    --font-size-s: 14px;
    --font-size-xs: 12px;    
    
    /*! Typography - Weight */
    --font-light:300;
    --font-regular:400;
    --font-bold:700;
    --font-black:900;

    /* Color - Brand */
    --kanguru-dark: #999103;
    --kanguru-lower: #c8bd06;
    --kanguru-base: #fff32a;
    --kanguru-light: #FFFFBE;

    /* Color - System */
    --danger-dark: #A81D18;
    --danger-base: #f84944;
    --danger-light: #f26d69;
    --danger-bright: #ffb2af;

    --warning-dark: #ca720b;
    --warning-base: #ef9a1b;
    --warning-light: #ffb35a;
    --warning-bright: #ffdbb1;

    --success-dark: #31691d;
    --success-base: #3d931f;
    --success-light: #85d768;
    --success-bright: #c4f6b3;

    --info-dark: #114955;
    --info-base: #1f7e93;
    --info-light: #20afce;
    --info-bright: #aff1ff;

    /* Color - Neutral */
    --black: #000;
    --gray-1000: #101010;
    --gray-800: #101010;
    --gray-600: #3c3c3c;
    --gray-400: #777;
    --gray-300: #9b9b9b;
    --gray-200: #c4c4c4;
    --gray-100: #f4f4f4;
    --white: #fff;

}

.Title.Heading1 {
    border-bottom:none;
}

.Heading1,
.Heading2,
.Heading3,
.Heading4 {
    font-family: 'Montserrat', sans-serif;
    color: #101010; /*primary-color*/
    font-weight: var(--font-black) !important;
}
.Heading5 {
    font-family: 'Montserrat', sans-serif;
    color: #101010;
    font-size: 24px;
    font-weight: var(--font-black) !important;
    
}
.Heading6{ font-family: 'Montserrat', sans-serif; font-size: var(--font-size-h6); font-weight: var(--font-black) !important; color: #101010;}
.Subtitle01{ font-family: 'Montserrat', sans-serif; font-size: var(--font-size-base); font-weight: var(--font-bold); color: #101010;}
.Subtitle02{ font-family: 'Montserrat', sans-serif; font-size: var(--font-size-s); font-weight: var(--font-bold); color: #101010;}
.Body01{ font-family: 'Montserrat', sans-serif; font-size: var(--font-size-base); font-weight: var(--font-regular); color: #101010;}
.Body02{ font-family: 'Montserrat', sans-serif; font-size: var(--font-size-s); font-weight: var(--font-regular); color: #101010;}
.Caption01{ font-family: 'Montserrat', sans-serif; font-size: var(--font-size-xs); font-weight: var(--font-bold); color: #3c3c3c;}
.Caption02{ font-family: 'Montserrat', sans-serif; font-size: var(--font-size-xs); font-weight: regular; color: #3c3c3c;}

.Menu_DropDownPanel {
    background-color: #fff32a; /*primary-color*/
    -webkit-filter: brightness(110%);
    filter: brightness(1.1);
}

.Header__activity,
.LoginInfo,
.Login_Text,
.Text_black {
    color: #fff32a; /*primary-color*/
    background-color: #d6d946;
    font-family: 'Montserrat';
}

.phone .Menu .LoginInfo {
    background-color: #fff32a; /*primary-color*/
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
    
}


.Menu {
    background: #101010; /*primary-color*/
}

.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a {
    border-bottom-color: rgba(0,0,0,0.1);
    box-shadow:none;
}

.Menu_DropDownPanel a.Menu_SubMenuItemActive, 
.Menu_DropDownPanel a.Menu_SubMenuItemActive:visited,
.Menu_DropDownPanel a.Menu_SubMenuItemActive:link,
.Menu_DropDownPanel a.Menu_SubMenuItem:hover {
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
    
}

.Menu_TopMenu a:hover, 
.Menu_TopMenu a:link:hover, 
.Menu_TopMenu a:visited {
    border-left-color: #fff32a; /*primary-color*/
}


.Menu_TopMenu a span.fa {
    border-color: #101010;
}

.Menu_TopMenu:hover,
.Menu_TopMenu:hover a [class^=fa],
.Menu_TopMenuActive a:link [class^=fa],
.Menu_TopMenuActive a:visited [class^=fa],
.Menu_DropDownPanel a.Menu_SubMenuItemActive, 
.Menu_DropDownPanel a.Menu_SubMenuItemActive:visited,
.Menu_DropDownPanel a.Menu_SubMenuItemActive:link,
.Menu_DropDownPanel a.Menu_SubMenuItem:hover {
    background-color: #fff32a; /*primary-color*/
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
    
}

.Menu_TopMenu a:hover, 
.Menu_TopMenu a:link:hover, 
.Menu_TopMenu a:visited {
    border-left-color: #FFF;
}

.tablet .Menu_TopMenu .Menu_DropDownArrow {
    border-left-color: #fff32a; /*primary-color*/
    -webkit-filter: brightness(80%);
    filter: brightness(0.8);
    
}

.tablet .Menu_TopMenu:hover .Menu_DropDownArrow {
    border-left-color: #FFF;
}

.tablet .Menu_TopMenuActive .Menu_DropDownArrow, 
.tablet .Menu_TopMenuActive:hover .Menu_DropDownArrow {
    border-left-color: #FFF;
}

.Menu_TopMenu:hover span.fa {
    border-color: #FFF;
    color: #FFF;
}

.Menu_TopMenu:hover .Menu_DropDownArrow {
    border-top-color: #FFF;
}

.Menu_TopMenuActive:hover a:link, .Menu_TopMenuActive a:link,
.Menu_TopMenuActive:hover a:visited, .Menu_TopMenuActive a:visited,
.Menu_TopMenuActive:hover a, .Menu_TopMenuActive a,
.Menu_TopMenu:hover a, .Menu_TopMenu a {
    color: #FFF;
}

.Menu_TopMenuActive .Menu_DropDownArrow,
.Menu_TopMenuActive:hover .Menu_DropDownArrow {
    border-top-color: #FFF;
    border-left-color: #fff32a; /*primary-color*/
}

.Menu_DropDownArrow {
    border-top-color: #FFF;
}


.Menu_TopMenuActive a:link,
.Menu_TopMenuActive a:visited {
   background-color: #fff32a; /*primary-color*/
   border-left-color: #FFF;
}

.Menu_TopMenuActive a span.fa {
    color: #FFF;
    border-color: #FFF;
}

.Menu_TopMenuActive{
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
    
}

.Menu_DropDownPanel a span.fa {
    color: #101010;
}

a.ListNavigation_PageNumber:link,
span.ListNavigation_CurrentPageNumber,
span.ListNavigation_Ellipsis {
    color: #101010; /*primary-color*/
}



a.ListNavigation_Previous:link,
a.ListNavigation_Next:link,
span.ListNavigation_DisabledNext, 
span.ListNavigation_DisabledPrevious {
    color: #101010; /*primary-color*/
}

.Feedback_AjaxWait {
    color: #fff32a; /*primary-color*/
}

.Login_Footer {
    background: #fff32a; /*primary-color*/
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image:    -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image:     -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image:      -o-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    background-image:          linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.AccordionVertical_item.open .AccordionVertical__header {
    border-top-color: #fff; /*primary-color*/
}

.AccordionVertical_item.open .AccordionVertical___icon > .fa {
    background-color:  #c4c4c4; /*primary-color*/
    border-color:  #c4c4c4; /*primary-color*/
}

.AccordionVertical_item.open > .AccordionVertical__header > .AccordionVertical___icon > .fa {
    background-color: #c4c4c4; /*primary-color*/
    border-color: #c4c4c4; /*primary-color*/
}

.Post_icon img {
    border-color: #fff32a; /*primary-color*/
}

.expanded .SectionExpandable__icon.Heading2 > .fa {
    background-color: #fff32a; /*primary-color*/
    border: #fff32a; /*primary-color*/
}

.Panel .SectionExpandable__icon.Heading2 > .fa {
    color: #fff32a; /*primary-color*/
    border: 1px solid #fff32a; /*primary-color*/
}

.Panel .expanded .SectionExpandable__icon.Heading2 > .fa {
    background-color: #fff32a; /*primary-color*/
    border: #fff32a; /*primary-color*/
}
.Calendar-day-selected, 
.Calendar-day-selected:hover {
    background: #fff32a; /*primary-color*/
}

.Calendar-navDisabled > div, 
.topBar-navDisabled .Calendar-navBtn > div,
.Calendar-time-down, 
.Calendar-time-up, 
.Calendar-time-am {
    color: #fff32a; /*primary-color*/
}

.Calendar-dayNames {
    border-top-color: #fff32a; /*primary-color*/
}

.Calendar-navBtn > div {
    color: #fff32a; /*primary-color*/
}

.select2-container .select2-choice {
    color: #fff32a; /*primary-color*/
}

.desktop .NavigationBar a:hover, 
.desktop .NavigationBar a:link:hover {
    color: #fff32a; /*primary-color*/
}

.NavigationBar a.Active {
    color: #fff32a; /*primary-color*/
}

.desktop .NavigationBar a:hover:after, 
.desktop .NavigationBar a:link:hover:after,
.NavigationBar a.Active:after {
    background-color: #fff32a; /*primary-color*/ 
}

.NavigationBar a.Active:not(.IE8):before {
    border-bottom-color: #fff32a; /*primary-color*/
}

.desktop .NavigationBar.Vertical a:hover,
.desktop .NavigationBar.Vertical a:link:hover,
.NavigationBar.Vertical a.Active,
.NavigationBar.Vertical a:link.Active {
  border-color: #fff32a; /*primary-color*/
}

.NavigationBar.Vertical a.Active:not(.IE8):before {
    border-left-color: #fff32a; /*primary-color*/
}

.phone .NavigationBar .InlineDropdown:active,
.phone .NavigationBar .InlineDropdown:link:active,
.tablet .NavigationBar .InlineDropdown:active,
.tablet .NavigationBar .InlineDropdown:link:active,
.phone .NavigationBar a:active, 
.phone .NavigationBar a:link:active,
.tablet .NavigationBar a:active, 
.tablet .NavigationBar a:link:active {
    color: #fff32a; /*primary-color*/
}

.phone .NavigationBar .InlineDropdown:active:after,
.phone .NavigationBar .InlineDropdown:link:active:after,
.tablet .NavigationBar .InlineDropdown:active:after,
.tablet .NavigationBar .InlineDropdown:link:active:after,
.phone .NavigationBar a:active:after, 
.phone .NavigationBar a:link:active:after,
.tablet .NavigationBar a:active:after, 
.tablet .NavigationBar a:link:active:after {
    background-color: #fff32a; /*primary-color*/
}

.Tabs__tab.active {
    border-top-color: #fff32a; /*primary-color*/
}

.Panel .Tabs__tab.active:not(.ie8):before {
    border-top-color: #fff32a; /*primary-color*/
}

.WizardStep.ActiveStep {
    background: #fff32a; /*primary-color*/
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
    
}

.WizardStep.ActiveStep:before {
    border-top-color: #fff32a; /*primary-color*/
    border-bottom-color: #fff32a; /*primary-color*/
}

.WizardStep.Past {
    background: #fff32a; /*primary-color*/
}

.WizardStep.Past:before {
    border-top-color: #fff32a; /*primary-color*/
    border-bottom-color: #fff32a; /*primary-color*/
}



a,
a:link,
a:visited,
.EditableTable tr.RowControlGroup a,
.Button.Link {
    color: #181818; /*primary-color*/
}

a.ActionAdd:hover{
    background-color: #fff32a; /*primary-color*/
    border-bottom-color: #fff32a; /*primary-color*/
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
    
}
a.ActionDelete:hover{
    background-color: #bb5858;
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
    
}

a.ActionAdd,
a.ActionDelete {
    color: #FFF;
}

a.ActionAdd {
    background-color: #fff32a; /*primary-color*/
    border-bottom-color: #fff32a; /*primary-color*/
}


.desktop .Button.Link:hover {
    background-color: transparent;
    border-color: #fff32a; /*primary-color*/
    color: #fff32a; /*primary-color*/
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    background: #101010; /*primary-color*/
}


.SectionIndex a.active, 
.SectionIndex a:hover{    
    border-bottom-color: #fff32a; /*primary-color*/
    color: #fff32a; /*primary-color*/
}

.SectionIndex.vertical a.active, 
.SectionIndex.vertical  a:hover{
    border-left-color: #fff32a; /*primary-color*/
}

.TableRecords > tbody > tr > td a {
    color: #fff32a; /*primary-color*/
}
.TableRecords tr:nth-child(even) {
    background-color: #fff;
}
.IconBadge_number {
    background-color: #fff32a; /*primary-color*/
}

.pika-prev:after,
.pika-next:after {
    color: #fff32a; /*primary-color*/ 
}

.pika-title {
    border-bottom: 2px solid #fff32a; /*primary-color*/
}

.is-selected .pika-button {
   background-color: #fff32a; /*primary-color*/
}

.has-event .pika-button:after {
   background-color: #fff32a; /*primary-color*/ 
}



.Feedback_AjaxWait {
    color: #101010;
}

@-webkit-keyframes loader {
    0%,
    100% {
        box-shadow: 0 -3em 0 .2em #101010, 2em -2em 0 0 #101010, 3em 0 0 -.5em #101010, 2em 2em 0 -.5em #101010, 0 3em 0 -.5em #101010, -2em 2em 0 -.5em #101010, -3em 0 0 -.5em #101010, -2em -2em 0 0 #101010;
    }
    12.5% {
        box-shadow: 0 -3em 0 0 #101010, 2em -2em 0 .2em #101010, 3em 0 0 0 #101010, 2em 2em 0 -.5em #101010, 0 3em 0 -.5em #101010, -2em 2em 0 -.5em #101010, -3em 0 0 -.5em #101010, -2em -2em 0 -.5em #101010;
    }
    25% {
        box-shadow: 0 -3em 0 -.5em #101010, 2em -2em 0 0 #101010, 3em 0 0 .2em #101010, 2em 2em 0 0 #101010, 0 3em 0 -.5em #101010, -2em 2em 0 -.5em #101010, -3em 0 0 -.5em #101010, -2em -2em 0 -.5em #101010;
    }
    37.5% {
        box-shadow: 0 -3em 0 -.5em #101010, 2em -2em 0 -.5em #101010, 3em 0 0 0 #101010, 2em 2em 0 .2em #101010, 0 3em 0 0 #101010, -2em 2em 0 -.5em #101010, -3em 0 0 -.5em #101010, -2em -2em 0 -.5em #101010;
    }
    50% {
        box-shadow: 0 -3em 0 -.5em #101010, 2em -2em 0 -.5em #101010, 3em 0 0 -.5em #101010, 2em 2em 0 0 #101010, 0 3em 0 .2em #101010, -2em 2em 0 0 #101010, -3em 0 0 -.5em #101010, -2em -2em 0 -.5em #101010;
    }
    62.5% {
        box-shadow: 0 -3em 0 -.5em #101010, 2em -2em 0 -.5em #101010, 3em 0 0 -.5em #101010, 2em 2em 0 -.5em #101010, 0 3em 0 0 #101010, -2em 2em 0 .2em #101010, -3em 0 0 0 #101010, -2em -2em 0 -.5em #101010;
    }
    75% {
        box-shadow: 0 -3em 0 -.5em #101010, 2em -2em 0 -.5em #101010, 3em 0 0 -.5em #101010, 2em 2em 0 -.5em #101010, 0 3em 0 -.5em #101010, -2em 2em 0 0 #101010, -3em 0 0 .2em #101010, -2em -2em 0 0 #101010;
    }
    87.5% {
        box-shadow: 0 -3em 0 0 #101010, 2em -2em 0 -.5em #101010, 3em 0 0 -.5em #101010, 2em 2em 0 -.5em #101010, 0 3em 0 -.5em #101010, -2em 2em 0 0 #101010, -3em 0 0 0 #101010, -2em -2em 0 .2em #101010;
    }
}
@keyframes loader {
    0%,
    100% {
        box-shadow: 0 -3em 0 .2em #101010, 2em -2em 0 0 #101010, 3em 0 0 -.5em #101010, 2em 2em 0 -.5em #101010, 0 3em 0 -.5em #101010, -2em 2em 0 -.5em #101010, -3em 0 0 -.5em #101010, -2em -2em 0 0 #101010;
    }
    12.5% {
        box-shadow: 0 -3em 0 0 #101010, 2em -2em 0 .2em #101010, 3em 0 0 0 #101010, 2em 2em 0 -.5em #101010, 0 3em 0 -.5em #101010, -2em 2em 0 -.5em #101010, -3em 0 0 -.5em #101010, -2em -2em 0 -.5em #101010;
    }
    25% {
        box-shadow: 0 -3em 0 -.5em #101010, 2em -2em 0 0 #101010, 3em 0 0 .2em #101010, 2em 2em 0 0 #101010, 0 3em 0 -.5em #101010, -2em 2em 0 -.5em #101010, -3em 0 0 -.5em #101010, -2em -2em 0 -.5em #101010;
    }
    37.5% {
        box-shadow: 0 -3em 0 -.5em #101010, 2em -2em 0 -.5em #101010, 3em 0 0 0 #101010, 2em 2em 0 .2em #101010, 0 3em 0 0 #101010, -2em 2em 0 -.5em #101010, -3em 0 0 -.5em #101010, -2em -2em 0 -.5em #101010;
    }
    50% {
        box-shadow: 0 -3em 0 -.5em #101010, 2em -2em 0 -.5em #101010, 3em 0 0 -.5em #101010, 2em 2em 0 0 #101010, 0 3em 0 .2em #101010, -2em 2em 0 0 #101010, -3em 0 0 -.5em #101010, -2em -2em 0 -.5em #101010;
    }
    62.5% {
        box-shadow: 0 -3em 0 -.5em #101010, 2em -2em 0 -.5em #101010, 3em 0 0 -.5em #101010, 2em 2em 0 -.5em #101010, 0 3em 0 0 #101010, -2em 2em 0 .2em #101010, -3em 0 0 0 #101010, -2em -2em 0 -.5em #101010;
    }
    75% {
        box-shadow: 0 -3em 0 -.5em #101010, 2em -2em 0 -.5em #101010, 3em 0 0 -.5em #101010, 2em 2em 0 -.5em #101010, 0 3em 0 -.5em #101010, -2em 2em 0 0 #101010, -3em 0 0 .2em #101010, -2em -2em 0 0 #101010;
    }
    87.5% {
        box-shadow: 0 -3em 0 0 #101010, 2em -2em 0 -.5em #101010, 3em 0 0 -.5em #101010, 2em 2em 0 -.5em #101010, 0 3em 0 -.5em #101010, -2em 2em 0 0 #101010, -3em 0 0 0 #101010, -2em -2em 0 .2em #101010;
    }
}

.Scrollable_Wrapper_Horizontal {
    overflow-x: scroll;
    overflow-y: hidden;
}
.Scrollable_Wrapper_Vertical {
    overflow-x: hidden;
    overflow-y: scroll;
}
.Scrollable_Wrapper_Horizontal_Vertical {
    overflow-x: scroll;
    overflow-y: scroll;    
}

.BoxBranco{
    background: white; 
    padding: 10px;
}
div.calendar {
    z-index: 9999 !important;
}
/*** Generated classes from Style Editor in OutSystems 10 ***/
[data-style-key="VXSxB18ut0W73IDEBwRC2g"] { display:inline-block; width:114px; }
[data-style-key="c8pt7b+gqEOZjA2sJI4xaA"] { display:inline-block; width:104px; }
/*** Generated classes from Style Editor in OutSystems 10 ***/
.label_inputs, .label_inputs.label_inputs {
    color: #c4c4c4;
}
.inputsForm, .inputsForm.inputsForm {
    background-color: #fff;
}
.inputsForm, .input.inputsForm, .input {
    background-color: #fff !important;
    font-size: 14px !important;
    height: 40px !important;
    box-shadow: none !important;
    border:1px solid #9b9b9b !important;
    border-radius: 4px;
    margin-top:4px;
}

.inputObs{
    background-color: #fff !important;
    font-size: 14px !important;
    box-shadow: none;
    border:1px solid #9b9b9b !important;
    border-radius: 4px;
    margin-top:4px;
}

.select {
    background-color: #fff;
    font-size: 14px !important;
    height: 40px !important;
    box-shadow: none;
    border:1px solid #9b9b9b !important;
    border-radius: 4px;
    margin-top: 4px;
}


input[type="checkbox"]:before {
    box-shadow: none !important;
    border-color: #c4c4c4;
}

.data, .datahora {
    background-color: #fff !important;
    height: 40px !important;
    box-shadow: none;
    border:1px solid #9b9b9b !important;
    border-radius: 4px;
    margin-top:4px;
}

.radio-button {
    background-color: #fff;
    box-shadow: none;
    border:1px solid #c4c4c4;
    margin-top: 4px;
}

.Text_Note {
    color: #181818;
    font-size: 14px;
    font-weight: 300;
}

/********            MENU        ************/

.Application_Menu {
     /*primary-color*/
    background-color: #101010 !important;
    margin-top:10px;
}

.Menu_DropDownPanel a:hover,
.Menu_DropDownPanel a:link:hover,
.Menu_DropDownPanel a:visited:hover {
    background-color: #101010;
    color: #fff32a;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

a.textoMenu:link{
    color: #fff;
}

.Menu_TopMenu a span.fa{
    border-color: #fff32a; /*primary-color*/
}
.Menu_DropDownPanel a span.fa {
    color: #fff32a;
}

.expanded .SectionExpandable__icon.Heading2 > .fa {
    background-color: #d2d1cc;
}




/********            FIM MENU        ************/

/*** Estilização de classes para Botões Fundo colorido e Branco ***/
/*** Botões Pesquisar, Adicionar, Limpar, Fechar, Voltar ***/

/********            BOTÕES        ************/
.Button,
a.Button {
    color: #101010;
    background-color: var(--kanguru-base);
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 4px !important;

}

.Button.ButtonDefault,
.Button.Is_Default {
    background-color: #fff32a; /*primary-color*/
    border-color: #fff32a; /*primary-color*/
    border-bottom-color: rgba(0,0,0,0.2);
    text-transform: uppercase;
    font-weight: bold;
    
}

.desktop .Button.ButtonDefault:hover, 
.desktop .Button.Is_Default:hover {
    background-color: #ffffbe; /*primary-color*/
    border-color: #ffffbe; /*primary-color*/
    border-bottom-color: rgba(0,0,0,0.2);
    -webkit-filter: brightness(80%);
    filter: brightness(0.8);
    
}
.Button.Cancel,
.desktop .Button.Cancel:hover {
    border-color: #999;
    color: #999;
}
.desktop .Button.Cancel:hover {
    -webkit-filter: brightness(80%);
    filter: brightness(0.8);
    
}

.btnPersonalizadoPrincipal{
    height: 40px;
    width: auto;
    padding: 4px 10px 4px 10px;
    background-color: #101010;
    border-radius: 4px;
    font-weight: bold !important;
    text-align: center;
    color: #fff32a !important;
    text-transform: uppercase;
}
.btnPersonalizadoPrincipal:hover{
    background-color: #3c3c3c;
}

.btnPersonalizadoSecundario{
    width: auto;
    height: 40px;
    border-color: #101010;
    border-width: 2px;
    border-style: solid;
    border-radius: 4px;
    font-weight: 700 !important;
    padding: 4px 10px 4px 10px;
    text-transform: uppercase;
    text-align: center;
}

.Texto{
    color: #101010;
    margin-left: 5px;
}
.btnPersonalizadoSecundario:hover{
    text-decoration: none;
    border-style: solid;
    border-width: 2px;
    border-color: #999103;
    color: #999103;
}

.BtnPersonalizadoDesabilitado{
    width: auto;
    height: 40px;
    background-color: #fff;
    border-color: #d2d1cc;
    border-width: 2px;
    border-style: solid;
    border-radius: 4px;
    margin-left: 0px;
    font-weight: normal;
    padding: 0px 10px 5px 10px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}
.btnPersonalizadoInternoDesabilitado{
    color: #b6b2b2;
    margin: 0 5px;
}
.:hover{
    cursor: not-allowed;
    text-decoration: none;
    margin: 10px;
}

.btnPersonalizadoInternoDesabilitadoTexto{
    margin-left: 2px;
}



/********            FIM BOTÕES        ************/

.Header_title {
    border-right: none;
    height: 70px;
    left: 0;
    line-height: 54px;
    padding-left: 30px;
    position: absolute;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px;
    z-index: 2;
}

.Header_search {
    position:absolute;
    margin-bottom: none;
    margin-top: 4px;
    min-height: 70px;
}

.Header__loginInfo {
    background-color: #101010;
    border:none;
}

.Header {
    background-color: #101010;
    border-bottom: none;
    color: #fff;
    display: table;
    height: 70px;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
    
}

/******     INICIO LINKS      ******/

.Menu_TopMenu a span.fa {
    border:none;

}

.Menu_TopMenuActive a:link, 
.Menu_TopMenuActive a:visited {
    background-color: #101010;
}

.Menu_DropDownPanel {
    background-color: #101010;
    -webkit-filter: brightness(110%);
    filter: brightness(1.1);
}

.Menu_TopMenu:hover, 
.Menu_TopMenu:hover a [class^=fa], 
.Menu_TopMenuActive a:link [class^=fa], 
.Menu_TopMenuActive a:visited [class^=fa], 
.Menu_DropDownPanel a.Menu_SubMenuItemActive, 
.Menu_DropDownPanel a.Menu_SubMenuItemActive:visited, 
.Menu_DropDownPanel a.Menu_SubMenuItemActive:link, 
.Menu_DropDownPanel a.Menu_SubMenuItem:hover {
    background-color: #101010;
    -webkit-filter: brightness(90%);
    filter: brightness(0.9);
}

.Menu_DropDownPanel a:hover, 
.Menu_DropDownPanel a:link:hover, 
.Menu_DropDownPanel a:visited:hover {
    background-color: #101010;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}


.Header__activity, .LoginInfo, .Login_Text, .Text_black {
    color: #fff;
    background-color: #101010;
}


.IconBadge_number {
    background-color: #3c3c3c;
    border: 0px solid #fff;
    border-radius: 25px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 1px;
    min-width: 18px;
    padding: 1px 5px;
    position: absolute;
    right: -10px;
    text-align: center;
    text-shadow: 1px 1px #369;
    top: -12px;
    font-weight: 100;
}



.Menu_TopMenu a:link, .Menu_TopMenu a:visited, .Menu_TopMenu a {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 20px;
    text-decoration: none;
    text-shadow: none;
    background-color: #101010;
    text-transform: none;
    }
    
    .Menu_TopMenu a span.fa {
    color: #fffa32;
}


internal-ui-dialog .os-internal-ui-dialog-titlebar {
    background: #101010;
}


.Icone_Letra{
color: #181818;
}
a:link{
    font-weight: bold;
    color: #181818;
}

/*----------------------------------------------------------------------------
    ESTILO DOS CONTADORES
----------------------------------------------------------------------------*/

.ContadorFundoBranco{
    padding: 5px;
    height: 85px;
    background-color: #fff;
    border-radius: 8px;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
}
.ContadorFundoBrancoImagem{
    padding: 5px; 
    font-size: 14px;
    width: auto;
    border-radius: 4px;
}
.ContadorFundoBrancoInterno{
    font-size: 15px;
    margin-top: 5px;
    font-weight: normal;
}

.ContadorFundoAmarelo{
    padding-top: 5px;
    height: 85px;
    background-color: #fff42a;
    border-radius: 4px;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
}

.ContadorFundoAmareloImagem{
    padding-top: 5px; 
    font-size: 15px;
    width: auto;
}
.ContadorFundoAmareloInterno{
    font-size: 15px;
    margin-top: 5px;
    font-weight: normal;

}
/*----------------------------------------------------------------------------
    ESTILO DOS CONTADORES MENORES TELA GESTÃO VIAGENS
----------------------------------------------------------------------------*/

.ContadorFundoBrancoPeq{
    padding: 4px;
    height: auto;
    min-height: 100px;
    background-color: #fff;
    border-radius: 4px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
}
.ContadorFundoBrancoImagemPeq{
    padding-top: 5px; 
    font-size: 14px;
    width: auto;
}
.ContadorFundoBrancoInternoPeq{
    font-size: 10px;
    margin-top: 5px;
    font-weight: normal;
    white-space: pre-line;
}

a, a:link {
    color: #181818;
}

.TableRecords > tbody > tr > td a {
    color: #181818;
}
.FooterFixo{
    
    position: fixed;
     
    bottom: 0;
    z-index: 0;
    background-color: white;
    width: 90%
    

}
/*----------------------------------------------------------------------------
    CAIXA DE FILTROS
----------------------------------------------------------------------------*/
.BoxFiltros {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
}


/****************************************************************
            CHECKBOX INATIVO - ALTERAÇÃO DA COR
****************************************************************/

input[type="checkbox"]:disabled:checked:after {
    border-color: #777;
}

/****************************************************************
            IMPUT INATIVO - ALTERAÇÃO DA COR DA FONTE
****************************************************************/
select[disabled="disabled"], input[disabled="disabled"] {
    background-color: #d9d9d9;
    background-image: none;
    color: #101010;
    cursor: not-allowed;
}

select[disabled="disabled"] {
    background-color: #f5f5f5;
    background-image: none;
    color: #101010;
    cursor: not-allowed;
}
.Form select.ReadOnly[disabled="disabled"] {
    background-color: #f5f5f5;
    background-image: none;
    color: #101010;
    cursor: not-allowed;
}

/****************************************************************
        ÍCONES DE STATUS E AÇÕES
****************************************************************/
.BotaoIcone {
color: #181818;
border-radius: 4px;
border-style: solid;
border-width: 2px;
margin-top: 2px;
padding: 0px 3px 0px 0px;
width: 40px;
height: 40px;
margin-left: 4px;
}
.BotaoIcone:hover {
    border-color: #999103;
    color: #999103;
border-radius: 4px;
border-style: solid;
border-width: 2px;
margin-top: 2px;
padding: 0px 3px 0px 0px;
width: 40px;
height: 40px;
margin-left: 4px;
}
.BotaoIconeDesabilitado {
    border-radius: 4px;
    border-style: solid;
    border-width: 2px;
    margin-top: 2px;
    padding: 0px 3px 0px 0px;
    width: 40px;
    height: 40px;
    margin-left: 4px;
    opacity: 40%;
}


.IconStatusDisponivel{
border-radius: 4px;
color: var(--white) !important;
background-color: var(--success-base);
text-align: center;
margin-top: 0px;
width: 32px;
height: 32px;
padding: 6px 4px 6px 4px;
}

.IconStatusPendente{
border-radius: 4px;
color: var(--white) !important;
background-color: var(--warning-base);
text-align: center;
margin-top: 0px;
width: 32px;
height: 32px;
padding: 6px 4px 6px 4px;
}
.IconStatusNaodisponivel{
border-radius: 4px;
color: var(--white) !important;
background-color: var(--danger-base);
text-align: center;
margin-top: 0px;
width: 32px;
height: 32px;
padding: 6px 4px 6px 4px;
}
.IconStatusInativo{
border-radius: 4px;
color: var(--gray-400);
background-color: var(--gray-200);
text-align: center;
margin-top: 0px;
width: 32px;
height: 32px;
padding: 6px 4px 6px 4px;
}
.IconStatusAmarelo{
    border-radius: 4px;
    color: #101010;
    background-color: #FFF32A;
    text-align: center;
    margin-top: 0px;
    width: 32px;
    height: 32px;
    padding: 6px 4px 6px 4px;
}


.FooterFixo{
    position: fixed;
     
    bottom: 0;
    z-index: 0;
    background-color: white;
    width: 90%
}

/****************************************************************
            BOARDS INFORMATIVOS
****************************************************************/

.Infoboard{
background-color: #aff1ff;
border-radius: 8px;
margin-bottom: 8px;
margin-top: 8px;
padding: 8px;
text-align: left;
color: #114955;
}

.Infoboard-alerta{
background-color: #FFDBB1;
border-radius: 8px;
margin-bottom: 8px;
margin-top: 8px;
padding: 8px;
text-align: left;
font-weight: var(--font-bold);
color: #CA720B;
}

.Infoboard-aprovado{
background-color: #C4F6B3;
border-radius: 8px;
margin-bottom: 8px;
margin-top: 8px;
padding: 8px;
text-align: left;
color: #31691D;
}

/****************************************************************
            TABELAS
****************************************************************/

.TableRecords_Header {
    border-bottom: 2px solid #c4c4c4;
    color: #181818;
    letter-spacing: 1px;
    padding: 10px 0 10px 10px;
    text-transform: initial;
    text-align: left !important;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-size-s);
    font-weight: var(--font-bold);
}


body {
    border: 0;
    -moz-box-sizing: border-box; /*   Add this rule for old Firefox   */
    box-sizing: border-box;
    font-size: 100%;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/****************************************************************
                    LISTA CARGAS DISPONIVEIS
****************************************************************/
.listaPrazoVencido{
    background-color: #f84944;
    border-radius: 5px;
    padding: 5px;
}
.listaPrazoVencidoInterno{
    background-color: #b22222;
    border-radius: 5px;
    color: #fff;
    margin-top: 3px;
    padding: 5px;
}
.listaPrazoProximoVencimento{
    background-color: #ef9a1b;
    border-radius: 5px;
    padding: 5px;
    margin-left: 5px;
}
.listaPrazoProximoVencimentoInterno{
    background-color: #cac574;
    border-radius: 5px;
    color: #fff;
    margin-top: 3px;
    padding: 5px;
}
.listaDentroPrazo{
    background-color: #3d931f;
    border-radius: 5px;
    margin-top: 5px;
    padding: 5px;
}
.listaDentroPrazoInterno{
    background-color: #044f0a;
    border-radius: 5px;
    color: #fff;
    margin-top: 3px;
    padding: 5px;
}
.Header_user {
    width: auto;
}