@import url("/LisbonTheme/Theme.LisbonTheme.css?1626");


:root
{
    --color-primary-50:#AFDFF9;
    --color-primary-100:#01A9F4;
    
    --color-neutral-0: #fff;
}


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

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

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

/*------------------------------------*\
            Util Colors
\*------------------------------------*/

.VNGBlue {
    color: #01a9f4;   
}

.VNGBlue_bg {
    background-color: #01a9f4;   
}

.VNGDarkBlue{
    color: #004488;
}

.VNGDarkBlue_bg{
    background-color: #004488;
}

.VNGMidnightBlue{
    color: #007FA1;
}

.VNGMidnightBlue_bg{
    background-color: #007FA1;
}

.VNGLightBlue{
    color: #AFDFF9;
}

.VNGLightBlue_bg{
    background-color: #AFDFF9;
}

.VNGDarkPink{
    color: #ED6D91;
}

.VNGDarkPink_bg{
    background-color: #ED6D91;
}

.VNGLightPink{
    color: #F6AF95;
}

.VNGLightPink_bg{
    background-color: #F6AF95;
}

.VNGYellow{
    color: #FFF656;
}

.VNGYellow_bg{
    background-color: #FFF656;
}

.VNGRed{
    color: #F84444;
}

.VNGRed_bg{
    background-color: #F84444;
}

.VNGGreen{
    color: #88C448;
}

.VNGGreen_bg{
    background-color: #88C448;
}


.VNGGray {
    color: #878787;
}

.VNGGray_bg {
    background-color: #878787;
}

.VNGOrange {
    color: #FF9900;
}

.VNGOrange_bg {
    background-color: #FF9900;
}

.VNGMandatoryRed {
    color: #BF1601;   
}

.VNGMandatoryRed_bg {
    background-color: #BF1601;   
}


.background-color-primary
{
    background-color: var(--color-primary-100);    
}

.color-neutral-0
{
    color: var(--color-neutral-0);   
}


.badge-color-primary
{
    background-color: white;
    color: var(--color-primary-100);
}

.WDCAdminOption{
    color: #E50045 !important;
}
/*------------------------------------*\
             Font Definition
\*------------------------------------*/

html,
body,
a,
select,
fieldset,
input,
button,
select,
textarea,
optgroup,
option {
    font-family: 'Roboto', sans-serif;
}

.Roboto_Regular {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.Roboto_Bold {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

a,
a:link,
a:visited,
.Footer a,
.Footer a:link,
.Footer a:visited {
    color: #01a9f4;
}

.desktop a:hover,
.desktop a:link:hover,
.desktop a:visited:hover {
    color: #01a9f4;
}

.Others_Menu {
    max-height: 30px !important;
}

.Header_background {
    background-color: #FFF;
    box-shadow: 0px -5px 20px #004488;
}

.Header_Title {    
    border-right-color: #01a9f4;
}

.Header_Menu a,
.Header_Menu a:link,
.Header_Menu a:visited{
    color: #01a9f4;
}

.Header_Menu a:link {
    border-radius: 500px;
    transition: color .2s, background-color .2s;
}

.Application_Title a,
.Application_Title a:link,
.Application_Title a:visited,
.Application_Title a:hover {
    color: #004488;
    width: 800px;
    text-align: left;
}

.Page.active .Header_ButtonMenu {
    color: #01a9f4;
}

.tablet .Header_Menu .Application_Menu .Menu_TopMenus .Menu_TopMenu a,
.tablet .Header_Menu .Application_Menu .Menu_TopMenus .Menu_TopMenu a:link,
.phone .Header_Menu .Application_Menu .Menu_TopMenus .Menu_TopMenu a,
.phone .Header_Menu .Application_Menu .Menu_TopMenus .Menu_TopMenu a:link {
    color: white;
}

.phone .Others_Menu {
    display: none;
}

.Menu_TopMenu:hover {
    color: #01a9f4;
}

.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a {
    border-radius: 500px;
    text-transform: uppercase;
    max-height: 30px;
    line-height: 2;
}

.Menu_DropDownPanel {
    background-color: #01a9f4;
}

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

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

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

.Menu_TopMenuActive {
    border-top-color: #FFF;
    color: white !important;
}

.Menu_TopMenuActive {
    color: white;
    background-color: #01a9f4;
    border-radius: 500px;
    max-height: 30px;
    line-height: 2;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    transition: none;
    box-shadow:none;
    border-top: 1px;
    border-top-color: white;
}

.Header_Menu a:hover, 
.Header_Menu a:link:hover, 
.Header_Menu a:visited:hover {
    font-weight: bold;
    color: white !important;
    background-color: #01a9f4;
    border-radius: 500px;
}

.Header_Title a:hover,
.Header_Title a:link:hover,
.Header_Title a:visited:hover{
    color: #004488;
}

.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 a {
    font-weight: bold;
    color:white;

}

.Menu_TopMenu .Menu_DropDownArrow {
    border-top-color: #004488;
    opacity: 1 !important;
}

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

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

.Menu_DropDownButton.open .Menu_TopMenu a {
    color: #01a9f4;
}
.Menu_DropDownButton.open:hover {
 color: white;   
}

.Menu_DropDownButton {
    margin-right: 0.3rem;
}


div.Menu_DropDownPanel a, div.Menu_DropDownPanel a:link, div.Menu_DropDownPanel a:visited {
    color: #FFF;
}

.fa,
.fas,
.far,
.CCTitle a .fa,
.CCTitle a .fas,
.CCTitle a .far  {
    opacity: 0.5;
}

a .fa,
a .fas,
a .far,
.IconDropdown .fa,
.IconDropdown .fas,
.IconDropdown .far {
    opacity: 1;
}

/* ------------------------------------------------------------------------- */
.Title_Section{
    background-color: #004488;
    color: #FFF;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22757%22%20height%3D%22393%22%20viewBox%3D%220%200%20757%20393%22%3E%3Cg%20opacity%3D%22.1%22%20fill%3D%22%23FFF%22%3E%3Cpath%20d%3D%22M557.679-1.494a10.951%2010.951%200%200%200-.757-.028h-62.7c-13.56%200-24.591%2011.021-24.591%2024.568s11.031%2024.568%2024.591%2024.568h62.153c82.198%200%20149.071%2066.79%20149.071%20148.886%200%2082.095-66.873%20148.885-149.071%20148.885H346.987v-35.768h-49.185v84.904h259.12l5-.006v-.076c106.709-2.963%20192.707-90.733%20192.707-197.94C754.629%2088%20666.293-.787%20557.679-1.494z%22%2F%3E%3Cpath%20d%3D%22M262.778%20345.385h-62.155c-82.197%200-149.07-66.79-149.07-148.885s66.873-148.885%20149.07-148.885h209.389v35.768h49.183V-1.522H200.077l-5%20.007v.076C88.368%201.522%202.371%2089.293%202.371%20196.5c0%20108.553%2088.424%20197.374%20197.052%20197.998.214.014.43.024.654.024h62.702c13.56%200%2024.591-11.021%2024.591-24.567%200-13.549-11.032-24.57-24.592-24.57z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position-x: 50vw;
    background-position-y: 50px;
    background-size: 250px;
}

.Title_Section a,
.Title_Section a:link,
.Title_Section a:visited{
    color: #FFF;
    font-weight: bold;
}

.Title_Section .Actions{
    padding-right: 150px;
}

.Header .Search_wrapper input[type="text"] {
    color: black;
    background-color: #fff;
}

.desktop .ProjectFeatures, .desktop .ProjectFeatures tbody > tr > td:first-child {
    padding-left: 0px;
    background-color: #FFFFFF;
    border: 0px;
    box-shadow: 0 0px 0px;
    margin-top: 0px;
    color: #999;
}

.desktop .ProjectFeatures > tbody > tr:hover,
.desktop .ProjectFeatures > tbody > tr:hover td {
    background: #ffffff;
}

div.ProjectImage {
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
}

div.ProjectImage img {
  vertical-align: middle;
}

.Column .DashboardGroup {
    padding: 0;
}

.desktop .Column .DashboardGroup {
    padding: 0 1rem;
}

.Column.ColFirst .DashboardGroup {
    padding-left: 0;
}

.Column.ColLast .DashboardGroup {
    padding-right: 0;
}

/* exFieldset is our own "card" class */
.exFieldset {
    margin: 1rem 1rem 2rem 1rem;
    background-color: #fff;
    padding: 1em;
    border: 0;
    box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.1);
    position: relative;
    border-radius: 0 0 0 1rem;
}

.exFieldsetTitle {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0.2rem;
    margin-left: 0 !important;
    margin-bottom: 0.8rem;
    margin-top: -0.3rem;
    width: auto !important;
}

.exFieldsetSubtitle {
 font-weight: normal;
 color: #888;
 font-size: 12px;
}

.exFieldset div[onclick] {
    cursor: auto;
}

.ProjectDetailIcon {
    top: 1.1rem;
    left: 1rem;
    margin: 0;
    width: 2.2rem !important;
    text-align: center;
    margin-right: 0.2em;
}

a:link.exFieldsetButton {
    display: block;
    top: -1rem;
    right: -1rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    padding: 0.3rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
    color: #01a9f4 !important;
    background-color: #fff !important;
    transition: all .2s;
}

a:link.exFieldsetButton:hover {
    color: #fff !important;
    background-color: #01a9f4 !important;
    box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.1);
}

a:link.exFieldsetButton .fa {
    opacity: 1;
}

a:link.exFieldsetExpandBtn {
    display: block;
    bottom: -1rem;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    padding: 0.3rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
    color: #01a9f4 !important;
    background-color: #fff !important;
    transition: all .2s;
}

a:link.exFieldsetExpandBtn:hover {
    color: #fff !important;
    background-color: #01a9f4 !important;
    box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.1);
}

a:link.exFieldsetExpandBtn .fa {
    opacity: 1;
}

.NumberBadgeLink {
    margin-bottom: 1.5em;
    display: block;
}

.NumberBadge {
    height: 3em !important;
    width: 3em !important;
    background-color: white;
    border-width: 0.25em;
    border-style: solid;
    border-radius: 50% !important;
    box-shadow: 0 0.3em 0.5em rgba(0,0,0,0.1);
    text-align: center !important;
    font-weight: bold;
    line-height: 2.4em;
    transition: all .2s;
    font-size: 1em;
    overflow: hidden;
}

.NumberBadge.LargeAmount .BadgeText {
    font-size: 0.8em;
}
.NumberBadge.LargeAmount {
    line-height: 2.4em;
}

a:hover .NumberBadge {
    border-color: #fff;
    box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.1);
}

.LabelContainer{
    position: relative;
    font-size: 1.3em;
    min-height: 2.5em;
    padding: 0 0.5em 0 0.5em;
    width: calc(100% - 2.5em);
    line-height: 0;
}

.LabelContainer::first-line {
    line-height: 2.2em;
}

.Link_Note {
    font-size: 12px; 
    color: #01a9f4 !important;    
}


.SmallNote {
    line-height: 1.5em;
    color: #999;
    font-size: 0.75em;
    overflow: hidden;
    position: absolute;
    background-color: #fff;
    margin: -0.5em 0 0 4em;
    padding: 1em;
    border-radius: 1em;
    box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.1);
    opacity: 0;
    transition: all .2s;
    width: calc(100% - 5em);
}

a:hover.NumberBadgeLink .SmallNote {
    opacity: 1;
    margin-left: 2em;
    z-index: 999;
}

a:hover .NumberBadge .BadgeText {
    opacity: 1;
    color: #01a9f4;
}

.BadgeText {
    text-align: center;
    transition: all .2s;
}

.CounterCard {
    margin-left: 1rem;
}

div.ProjectCard {
    border-radius: 1em;
    overflow: hidden;
    margin-bottom: 2rem;
}

div.ProjectCard a {
    font-size: 1.25rem;
    font-weight: bold;
}

div.ProjectCard div.ProjectWidgetImage {
    width: calc(100% + 2em);
    height: 10em;
    overflow: hidden;
    position: relative;
    margin: -1em -1em 0 -1em;
}

div.ProjectCard div.ProjectWidgetImage img.ProjectWidgetImage {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: all .2s;
}

.RssCard {
    padding: 1em;
}

.NewsCard {
    padding: 1em;
    clear: left;
}

.NewsCard .Title {
    font-size: 1.05rem;
}

.NewNewsImage {
    background-size: contain;
}

div.NewsCard div.NewsImage {
    max-width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    border-radius: 0.5em;
    float: left;
    margin: 0 1rem 1rem 0;
    background-size: contain;
}

div.NewsCard div.NewsImage img {
    max-width: 100%;
    min-width: 250px;
    max-height: 100%;
    position: relative;
}

.NewsCard p {
    line-height: 1.8em;
}

.tablet .NewsCard .NewsImage {
    width: auto;
}

.NewsCard .NewsText {
    display: inline;
}

.image_container
{
    display: grid;
    place-items: center;
    height: 100%;
    
}

.speech-bubble {
    padding: 1rem;
}

.CCTitle {
 font-size: 2em;
 font-weight: bold;
 opacity: 0.8;
 border-bottom: 0;
}

div.CCTitle a {
    color: #004488;
}

div.CCTitle span.fa {
    margin-right: 0.25em;
}

/* default of 20px is too much */
.OSAutoMarginTop {
    margin-top: 10px;
}

/* expressions that need to look like a label */
.ExpressionAsLabel {
    color: #999;
    padding-top: 5px;
    display: block;
}

.tooltipstered {
    color: #01a9f4;
    cursor: pointer;
}

.FoundationCostsLetterMain {
  padding-top:30px;
  padding-left: 80px;
  padding-right: 70px;
  padding-bottom: 30px;
  font-family: Arial;
  font-size: 16px;
}

.FoundationCostsLetterAdress {
  margin-top: 70px;
  min-height: 150px;
}

.FoundationCostsLetterInfo {
  margin-top: 40px;
}

.FoundationCostsLetterInfoTable {
  padding:0px;
  border: 0px;
}

.FoundationCostsLetterBody {
  margin-top: 80px;
}

.FoundationCostsLetterCode {
    font-family: Courier;
}

.Invisible {
  display: none;
}

.ToggleButton {
    background-color: #bf2201d4;
}

.ButtonGroup_button.Button {
    color: black;
}

.ButtonGroup_button.active, .desktop .ButtonGroup_button.active:hover {
    color: white;
}

/* override the css for WebPatterns/modal */
body.ModalOpened .ModalContainer{
    transform: translateX(-50%) translateY(-200%) translateZ(0);
}

/* somehow lists end up way too far to the left */
ul {
    margin-left: 30px;
}

/*------------------------------------*\
    Navigate Buttons on detail pages
\*------------------------------------*/

.NavigateContainer {
 text-align:right;
 margin-right: 20px;
}

.NavigateButton {
    margin-left: 10px;
    border: 1px solid rgb(204, 204, 204);
    overflow: hidden;
    height: 2rem;
    padding: 0.25rem 1rem;
    border-radius: 2.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
    background-color: #fff;
    color: #01a9f4;
    cursor: pointer;
    transition: all .2s;
    vertical-align: middle;
    min-width: 5%;
    text-align: center;
    
}

.NavigateButton:hover {
    background-color: #01a9f4;
    color: #fff;
}

.NavigateButton a:link {
    transition: all 0.2s;   
}

.NavigateButton:hover a:link, .NavigateButton:hover a:visited {
    color: #fff;
}


/*---------------------------------------------------------------------------*/

a.ActionAdd,
a.ActionAdd:link,
a.ActionAdd:visited,
a.ActionEdit,
a.ActionEdit:link,
a.ActionEdit:visited,
a.ActionDelete,
a.ActionDelete:link,
a.ActionDelete:visited,
a.ActionChange,
a.ActionChange:link,
a.ActionChange:visited {
    background-color: #01a9f4;
    border-color: #01a9f4;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.desktop a.ActionAdd:hover,
.desktop a.ActionAdd:hover:visited,
.desktop a.ActionAdd:link:hover,
.desktop a.ActionEdit:hover,
.desktop a.ActionEdit:link:hover,
.desktop a.ActionEdit:link:visited,
.desktop a.ActionDelete:hover,
.desktop a.ActionDelete:hover:visited,
.desktop a.ActionDelete:link:hover,
.desktop a.ActionChange:hover,
.desktop a.ActionChange:hover:visited,
.desktop a.ActionChange:link:hover {
    background-color: #01a9f4;
    border-color: #01a9f4;
    box-shadow: none;
    color: #fff;
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
    
}

.desktop a.ActionAdd:hover:active,
.desktop a.ActionEdit:hover:active,
.desktop a.ActionDelete:hover:active,
.desktop a.ActionChange:hover:active {
    background-color: #01a9f4;
    border-color: #01a9f4;
    color: #FFF;
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
    
}

.Login_Footer {
    background: #01a9f4;
    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___icon > .fa {
    color: #01a9f4;
}
.AccordionVertical_item.open > .AccordionVertical__header > .AccordionVertical___icon > .fa {
    color: #01a9f4;
}

.expanded .SectionExpandable__icon.Heading2 > .fa {
    color: #01a9f4;
}

.ExpandableLink > div {
    position: absolute;
    min-height: 20px;
    box-sizing: content-box;
    padding: 13px 10px;
    width: 426px;
    margin: -23px -10px;
    z-index: 100;
}

.Panel .SectionExpandable__icon.Heading2 > .fa {
    color: #01a9f4;
}

.ButtonGroup_button.Button:hover {
    background: #01a9f4;
}

.select2-container .select2-choice span {
    color: #333;
}

.select2-dropdown-open .select2-choice {
    background-color: #fff;
}

.select2-results .select2-highlighted {
    background-color: #01a9f4;
}

.IconBadge_number {
    background-color: #01a9f4;
}

.desktop .NavigationBar a:hover, 
.desktop .NavigationBar a:link:hover {
    color: #01a9f4;
}

.NavigationBar a.Active {
    color: #01a9f4;
}

.desktop .NavigationBar a:hover:after, 
.desktop .NavigationBar a:link:hover:after,
.NavigationBar a.Active:after {
    background-color: #01a9f4;
}

.NavigationBar a.Active:not(.IE8):before {
    border-bottom-color: #01a9f4;
}

.desktop .NavigationBar.Vertical a:hover,
.desktop .NavigationBar.Vertical a:link:hover,
.NavigationBar.Vertical a.Active,
.NavigationBar.Vertical a:link.Active {
  border-color: #01a9f4;
}

.NavigationBar.Vertical a.Active:not(.IE8):before {
    border-left-color: #01a9f4;
}

.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: #01a9f4;
}

.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: #01a9f4;
}

.Tabs__tab.active {
    border-top-color: #01a9f4;
    color: #01a9f4;
}

/** Wizard **/

.WizardStep a,
.WizardStep a:link,
.desktop .WizardStep a:hover,
.desktop .WizardStep a:link:hover
{
    color: #01a9f4;
}


.WizardStep.ActiveStep {
    background: #01a9f4;
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
    
}

.WizardStep.ActiveStep:before {
    border-top-color: #01a9f4;
    border-bottom-color: #01a9f4;
}

.WizardStep.Past {
    background: #01a9f4;
}

.WizardStep.Past:before {
    border-top-color: #01a9f4;
    border-bottom-color: #01a9f4;
}

.WizardStep.Past a,
.WizardStep.Past a:hover,
.WizardStep.Past a:link,
.WizardStep.Past a:link:hover,
.WizardStep.Past a[disabled="disabled"],
.WizardStep.Past a[disabled="disabled"]:hover
.WizardStep.ActiveStep a,
.WizardStep.ActiveStep a:hover,
.WizardStep.ActiveStep a:link,
.WizardStep.ActiveStep a:link:hover,
.WizardStep.ActiveStep a[disabled="disabled"],
.WizardStep.ActiveStep a[disabled="disabled"]:hover {
    color: #FFF;
}

.WizardStep.Past:after {
    border-right-color: #01a9f4;
    border-top-color: #01a9f4;
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
    
}


.WizardDisabled .WizardStep.Past {
 background: #878787   
}

.WizardDisabled .WizardStep.Past::before {
 border-top-color: #878787;
 border-bottom-color: #878787;
}

.WizardDisabled .WizardStep.Past::after {
 border-top-color: #878787;
 border-right-color: #878787;
}

.WizardDisabled .WizardStep.Past a {
 -webkit-filter: brightness(0.7);
 filter: brightness(0.7);   
}

.WizardStep.Past a[disabled="disabled"], .WizardStep.Past a[disabled="disabled"]:hover {
    color: inherit;
}

.WizardStep a:hover {
    color: inherit;   
}


/** Button **/

.Button,
a.Button {
    background-color: #878787;
    color: #FFF;
    border-radius: 0 100px 100px 0;    
}

.Button.ButtonDefault,
.Button.Is_Default {
    background-color: #004488; 
    border-color: #004488;
    font-weight: bold;
}

/* FloatingButton is our own button */

.FloatingButton {
    border-radius: 50%;
    width: 5rem !important;
    height: 5rem !important;
    position: fixed;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 0 0.2rem .75rem rgba(0,0,0,0.1);
    transition: all .2s;
    border-width: 0;
    z-index: 10;
}

.FloatingButton:hover {
    background-color: #33c2ff;
    box-shadow: 0 0.3rem 0.75rem rgba(0,0,0,0.1);
    width: 5.4rem !important;
    height: 5.4rem !important;
}

.FloatingButton.bottom-left {
    bottom: 2rem;
    left: 2rem;  
}

.FloatingButton.bottom-left:hover {
    bottom: 1.8rem;
    left: 1.8rem;
}

.FloatingButton.bottom-right {
    bottom: 2rem;
    right: 2rem;  
}

.FloatingButton.bottom-right:hover {
    bottom: 1.8rem;
    right: 1.8rem;
}

.FloatingButton .fa {
    color: #ffffff;
    font-size: 3rem;
    line-height: 5rem;
    transition: all .2s;
}

.FloatingButton:hover .fa {
    line-height: 5.4rem;
    font-size: 3.2rem;
}

/* Custom tooltop for this button */

.tooltip-fixed.bottom-left {
    position: fixed;
    width: 8rem;
    bottom: 7.5rem;
    left: 0.5rem;
    z-index: 100000; 
}

.tooltip-fixed.bottom-right  {
    position: fixed;
    width: 8rem;
    bottom: 7.5rem;
    right: 0.5rem;
    z-index: 100000; 
}

/* IconHacks for CustomIcons on this FloatingButton */

.fa-save::before {
   content: "" !important;
}

.fa-save {
    background-image: url("/VNGTheme_Th/icon-save.png?1956");
    background-position: 50%;
    background-size: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}


.fa-thumbs-up::before {
   content: "" !important;
}

.fa-thumbs-up {
    background-image: url("/VNGTheme_Th/icon-approve.png?1956");
    background-position: 50%;
    background-size: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.fa-thumbs-down::before {
   content: "" !important;
}

.fa-thumbs-down {
    background-image: url("/VNGTheme_Th/icon-approve.png?1956");
    background-position: 50%;
    background-size: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    transform: scaleY(-1);
}

.fa-send::before {
   content: "" !important;
}

.fa-send {
    background-image: url("/VNGTheme_Th/icon-submit.png?1956");
    background-position: 50%;
    background-size: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

/* ------------------- */

.Button.FloatingActionButton {
    background-color: #009FE3;
    border-radius: 50%;
    width: 5rem !important;
    height: 5rem !important;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 0 0.2rem .75rem rgba(0,0,0,0.1);
    transition: all .2s;
    border-width: 0;
    z-index: 100;
}

.Button.FloatingActionButton:hover {
    background-color: #33c2ff;
    box-shadow: 0 0.3rem 0.75rem rgba(0,0,0,0.1);
    width: 5.4rem !important;
    height: 5.4rem !important;
    bottom: 1.8rem;
    right: 1.8rem;
}

.Button.Save {
    background-image: url("icon-save.png?1956");
}
.Button.Check {
    background-image: url("icon-check.png?1956");
}

.Save.FloatingActionButton{
    background-image: url("/VNGTheme_Th/icon-save.png?1956");
}

.Approve.FloatingActionButton{
    background-image: url("/VNGTheme_Th/icon-approve.png?1956");
}

.Submit.FloatingActionButton{
    background-image: url("/VNGTheme_Th/icon-submit.png?1956");
}

.Next.FloatingActionButton{
    background-image: url("/VNGTheme_Th/icon-next.png?1956");
}

.desktop .Button.ButtonDefault:hover, 
.desktop .Button.Is_Default:hover {
    background-color: #004488;
    border-color: #004488;
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
    
}

.Button:hover:active,
a.Button:hover:active {
    color: #FFF; 
}

.Button.ButtonDefault:hover,
.Button.Is_Default:hover {
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
    
}

.Button.ButtonDefault:hover:active,
.Button.Is_Default:hover:active {
    background-color: #004488;
    border-color: #004488;
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
    
}

.ButtonDropdown_button.Button{
    background-color: #01a9f4;
}

.ButtonDropdown_icon {
    background-color: transparent;
}

.ButtonDropdown.open .ButtonDropdown_button.Button {
    color: #01a9f4;
}

.IconDropdown_button.Button .IconDown {
    background-color: transparent;
}

.IconDropdown.open .IconDropdown_button.Button {
    color: #01a9f4;
}

.desktop a.ActionAdd:hover:active,
.desktop a.ActionEdit:hover:active,
.desktop a.ActionDelete:hover:active,
.desktop a.ActionChange:hover:active {
    background-color: #01a9f4;
    border-color: #01a9f4;
    color: #fff;
}

.ListItem {
    border: 0;
    padding: 0.75rem;
}

a,
a:link,
a:visited,
.EditableTable tr.RowControlGroup a  {
    color: #01a9f4;
}

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: #01a9f4;
}

.Menu_DropDownPanel a.Menu_SubMenuItem:hover {
    background-color: #01a9f4;
}

.Menu_DropDownButton.open .Menu_TopMenu .Menu_DropDownArrow {
    border-top-color: #fff;
    opacity: 1;
}

.tablet a.Header_ButtonMenu, 
.phone a.Header_ButtonMenu {
    color: #01a9f4;
}

.Page.active .Header_ButtonMenu {
    color: #01a9f4;
}

.SectionIndex.vertical a.active, 
.SectionIndex.vertical a:hover {
    color: #01a9f4;
    border-left-color: #01a9f4;
}

.SectionIndex a, 
.SectionIndex a:link, 
.SectionIndex a:visited,
.SectionIndex a.active, 
.SectionIndex a:hover,
.desktop .SectionIndex a:hover{
    color: #01a9f4;
    border-bottom-color: #01a9f4;
    text-decoration: none;
}

.AccordionVertical___title {
    color: #01a9f4;
}

.Heading5 {
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
}

.SectionExpandable .SectionExpandable_header .Heading2,
.SectionExpandable.expanded .SectionExpandable_header .Heading2 {
    color: #01a9f4;
}

.Button.Link {
    color: #01a9f4;
}

.desktop .Button.Link:hover {
    border-color: #01a9f4;
    color: #01a9f4;
}

.desktop .Button:hover, 
.desktop a.Button:hover {
    color: #01a9f4;
}

.ButtonGroup_button.active, 
.desktop .ButtonGroup_button.active:hover {
    background-color: #01a9f4;
}

.ButtonGroup_button.Button:hover,
.ButtonGroup_button.Button:hover .fa{
    color: #FFF;
}


.Calendar-day-selected, 
.Calendar-day-selected:hover {
    background: #01a9f4;
}

.Calendar-navDisabled > div, 
.topBar-navDisabled .Calendar-navBtn > div,
.Calendar-time-down, 
.Calendar-time-up, 
.Calendar-time-am {
    color: #01a9f4;
}
    
.pika-prev:after,
.pika-next:after {
    color: #01a9f4; 
}

.pika-title {
    border-bottom: 2px solid #01a9f4;
}

.is-selected .pika-button {
   background-color: #01a9f4;
}

.has-event .pika-button:after {
   background-color: #01a9f4; 
}


.DropdownMenu .PH > a,
.DropdownMenu .PH > a:hover {
    color: #01a9f4;
}

.SliderRange .ui-slider-range, .noUi-origin.noUi-connect {
    background-color: #01a9f4;
}

.EditableTable tr.RowControlGroup a:hover {
    color:  #01a9f4;
}

.desktop .Button.ButtonDefault:hover,
.Button.Button.Is_Default:hover {
    background-color: #01a9f4;
    border-color: #01a9f4;
}
.owl-theme .owl-controls .owl-page.active span, 
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background-color: #01a9f4;
}

.owl-theme .owl-controls .owl-buttons div {
    background: transparent;
    color: #79868a;
    font-size: 14px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    padding: 0.3rem;
    box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 10%);
    color: #01a9f4 !important;
    background-color: #fff !important;
    transition: all .2s;
    opacity: 1;
}

.owl-theme .owl-controls .owl-buttons div:hover {
    color: #fff !important;
    background-color: #01a9f4 !important;
    box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.1);
}

.owl-next.fa.fa-fw.fa-angle-right {
    position: absolute;
    right: 0px;
}

.owl-prev.fa.fa-fw.fa-angle-left {
    position: absolute;
    left: 0px;
}

td.RowWithAddAction a:hover {
    color: #01a9f4;
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
    
}

.InfoTooltip .tooltipstered,
.ListItem  .tooltipstered{
    color: #01a9f4;
}

.Menu_TopMenu .Menu_DropDownArrow {
 opacity: 1;   
}

div.Menu_DropDownPanel a:hover, 
div.Menu_DropDownPanel a:link:hover,
div.Menu_DropDownPanel a:visited:hover,
div.Menu_DropDownPanel a.Menu_SubMenuItem:hover,
div.Menu_DropDownPanel a.Menu_SubMenuItem.Menu_SubMenuItemActive {
    color: #FFF;
    background-color: rgba(0, 0, 0, .1);
    border-radius:0px;
}

/* Menu tablet and phone */
.tablet .Application_Menu,
.phone .Application_Menu {
    background: #01a9f4;
}

.OnlyOnPhone_Menu {
    display:none;
}

.phone .OnlyOnPhone_Menu {
    display: block;   
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title{
    color: #FFF;
    top:0;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close {
    opacity: 1;
    top: 15px;
    background-image: url(/WebPatterns/img/PopupCloseWhite.png?1631);
}

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{
    padding-top:0;
}


div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title{
    color: #FFF;
    top:10px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close {
    opacity: 1;
    top: 15px;
    background-image: url(/WebPatterns/img/PopupCloseWhite.png?1631);
}

.FitImgToDiv {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.textJustify {
    text-align: justify;
}

.SecondaryBar {
    background-color: #fff;
    border: 0;
    position: relative;
    margin: -20px -20px 35px -20px;
    padding: 2rem;
    box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.1);
    z-index: 10;
}

.Search_wrapper {
    margin-right: 1rem;
}

.Page.small .Menu_TopMenu a {
    font-size: 0.7rem;
}

/* This keeps the footer from creeping up */
.Content {
    min-height: calc(100% - 7rem);
}

/* Our loading animation */
.Page .Feedback_AjaxWait {
    width: 100vw;
    height: 100vh;
    right: 0;
    left: 0;
    top: 0;
    position: fixed;
    margin: 0;
    background-color: rgba(0,0,0,0.5);
    border-radius: 0;
    box-shadow: none;
    font-size: 2rem;
    color: white;
    font-family: 'Roboto', sans-serif;
    padding-top: calc(50vh + 3rem);
    text-align: center;
    display: block;
    z-index: 99999;
}

.Page .Feedback_AjaxWait .Loader {
    position: absolute;
    left: calc(50vw - 3rem);
    top: calc(50vh - 3rem);
    width: 6rem;
    height: 6rem;
    margin: 0;
    background: none;
    text-indent: initial;
    border: 0.5rem solid rgba(255,255,255,1);
    border-top-color: #009FE3;
    border-radius: 50%;
    animation: spin 2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(1080deg); }
}

/* small page version (doesn't cover the entire page) */
.Page.small .Feedback_AjaxWait {
    height: 20vw;
    width: 20vw;
    right: 0;
    left: auto;
    bottom: 0;
    top: auto;
    padding-top: 15vw;
    font-size: 0.8rem;
    border-radius: 1rem 0 0 0;
}

.Page.small .Feedback_AjaxWait .Loader {
    width: 10vw;
    height: 10vw;
    left: 5vw;
    top: 4vw;
    border-width: 1vw;
}

/* List navigation */
.ListNavigation_Wrapper {
    margin: 0 1rem;
}

.ListNavigation_Wrapper a.ListNavigation_PageNumber:link,
.ListNavigation_Wrapper span.ListNavigation_CurrentPageNumber,
.ListNavigation_Wrapper span.ListNavigation_Ellipsis,
.ListNavigation_Wrapper a.ListNavigation_Previous:link,
.ListNavigation_Wrapper a.ListNavigation_Next:link {
    border: 0;
    box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.1);
    transition: all .2s;
}

/* fixing this evil */
.ListNavigation_Wrapper span.ListNavigation_CurrentPageNumber,
.ListNavigation_Wrapper span.ListNavigation_CurrentPageNumber:hover,
.ListNavigation_Wrapper span.ListNavigation_Ellipsis,
.ListNavigation_Wrapper span.ListNavigation_Ellipsis:hover,
.ListNavigation_Wrapper span.ListNavigation_DisabledNext,
.ListNavigation_Wrapper span.ListNavigation_DisabledNext:hover,
.ListNavigation_Wrapper span.ListNavigation_DisabledPrevious,
.ListNavigation_Wrapper span.ListNavigation_DisabledPrevious:hover {
    cursor: auto;
}

.ListNavigation_Wrapper a.ListNavigation_PageNumber:link,
.ListNavigation_Wrapper a.ListNavigation_Previous:link,
.ListNavigation_Wrapper a.ListNavigation_Next:link {
    color: #01a9f4;
}

.ListNavigation_Wrapper a.ListNavigation_PageNumber:hover,
.ListNavigation_Wrapper a.ListNavigation_Previous:hover,
.ListNavigation_Wrapper a.ListNavigation_Next:hover,
.ListNavigation_Wrapper span.ListNavigation_CurrentPageNumber,
.ListNavigation_Wrapper span.ListNavigation_CurrentPageNumber:hover {
    color: white;
    background-color: #01a9f4;
}

/* sidebar */
.Title_Section.VNGSidebar a,
.Title_Section.VNGSidebar a:link,
.Title_Section.VNGSidebar a:visited{
    color: var(--color-primary-100);
    font-weight: bold;
}

.desktop .MainContent.VNGSidebar {
    position: absolute;
    width:30rem;
    padding:0px;
    background-color: #fff;
    box-shadow: 0 0.5rem 0.75rem rgb(0 0 0 / 10%);
    color: #000;
    border: 0;
}

.desktop .VNGSidebarMainContent {
    margin-left: 30rem;
    width: calc(100% - 30rem);
}

.tablet .MainContent.VNGSidebar {
    background-color: #fff;
    box-shadow: 0 0.5rem 0.75rem rgb(0 0 0 / 10%);
    width: 100%;
    padding: 0;
}

.tablet .MainContent.VNGSidebar .SideBar {
    width: auto;
    white-space: nowrap;
    overflow-x: scroll;
    height: auto;
    padding-bottom: 1rem;
}

.tablet .MainContent.VNGSidebar .VNGSideBarNav div,
.tablet .MainContent.VNGSidebar .VNGSideBarNav div a div {
    display: inline-block;
}

.tablet a .CategoryMenu,
.tablet .CategoryMenuMiscItem {
    margin:0.5rem;
}

.tablet .VNGSideBarNav span:first-child div a div {
    margin-left: 2rem;
}

.tablet .VNGSideBarNav span:last-child div a div {
    margin-right: 2rem;
}

.tablet .MainContent.VNGSidebar .SideBar::before,
.tablet .MainContent.VNGSidebar .SideBar::after {
    content: "";
    width: 2rem;
    background: linear-gradient(to right, rgb(237, 241, 243), rgba(0,0,0,0));
    height: 5rem;
    display: block;
    position: absolute;
    top: 11.5rem;
}

.tablet .MainContent.VNGSidebar .SideBar::before {
    background: linear-gradient(to right, rgb(237, 241, 243), rgba(237, 241, 243,0));
    left: 0;
}

.tablet .MainContent.VNGSidebar .SideBar::after {
    background: linear-gradient(to right, rgba(237, 241, 243,0), rgb(237, 241, 243));
    right: 0;
}

a .CategoryMenu,
.CategoryMenuMiscItem {
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: normal;
    word-break: break-word;
    background-color: #fff;
    border-radius: 0.6rem 0;
    transition: color .2s, background-color .2s;
    margin: 1rem 1rem -0.25rem 1rem;
    color: #01a9f4;
    box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.1);
}

a:hover .CategoryMenu,
a .CategoryMenuSelected {
    color: #fff;
    background-color: #01a9f4;
}

/*.VNGSideBarNav span:first-child div a div {
    font-size: 1.5rem;
    font-weight: bold;
}*/

/* "Back" Button top right of area */
.BackLink:hover {
    color: white;
    background-color: #01a9f4;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
}

.BackLink {
    font-size: 1rem;
    background-color: white;
    padding: 0.5rem;
    color: #01a9f4;
    border-radius: 0 1rem;
    transition: all .2s;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
}

.BackLink .fas{
    min-height: 14px;
    width: 14px;
    margin-right: 10px;
}

.exFieldset .BackLink {
    box-shadow: none;
}

/* Borderless tablerecords */
table.TableRecords.Borderless,
table.TableRecords.Borderless tr,
table.TableRecords.Borderless td,
table.TableRecords.Borderless thead,
table.TableRecords.Borderless th {
    border: 0 !important;
    box-shadow: none;
    font-size: 1rem;
}

table.TableRecords.Borderless .TableRecords_Header {
    font-size: 0.95em;
}

table.TableRecords.Borderless td.Thumbnail img {
    border-radius: 0.25em;
    max-height: 6rem;
    width: 10rem;
    object-fit: cover;
    box-shadow: 0 0.35rem 0.75rem rgba(0,0,0,0.1);
}

table.TableRecords.Borderless td.Thumbnail {
    padding: 1rem;
    text-align: center;
}

/* Valuation manuals */
.ValuationManualButton,
.ValuationManualButton div,
.ValuationManualButton a {
    cursor: pointer;
}

table.TableRecords {
    box-shadow: none;
    position: relative;
}

.ValuationManuals td {
    padding: 1rem !important;
}

.ValuationManuals td.Actions {
    width: 0;
}

.ValuationManuals tr.NonPublic,
.ValuationManuals tr:hover.NonPublic {
    background-color: #dddfe0 !important;
}

.ValuationManuals tr.Public,
.ValuationManuals tr:hover.Public {
    background-color: #fff !important;
}

.ValuationManuals td {
    background: none !important;
}

/* VNG style dropdown menu */
.VNGDropdown .IconDropdown {
    position: absolute;
    left: 1rem;
    width: 3rem;
    border: 0;
}

.VNGDropdown .IconDropdown .Button {
    border-radius: 0 0 1.5rem 0;
    border: 0;
    background-color: #004488;
    padding: 0 0.75rem;
    width: 100%;
    height: 2rem;
}

.VNGDropdown .IconDropdown.open .Button {
    background-color: #fff !important;
    color: #01a9f4 !important;
    box-shadow: none;
    border-radius: 0;
}

.VNGDropdown .IconDropdown .Button:hover {
    color: #fff;
    background-color: #01a9f4;
}

.VNGDropdown .IconDropdown .IconDown {
    display: none;
}

.VNGDropdown .DropdownMenu {
    background-color: #fff;
    border: 0;
    left: 0;
    min-width: 10em;
    position: absolute;
    text-align: left;
    top: 2rem;
    z-index: 25;
    box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.1);
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s;
}

.VNGDropdown .open .DropdownMenu {
    height: auto;
    opacity: 1;
}

.VNGDropdown .IconDropdown a.VNGDropdownButton {
    width: 100%;
    white-space: nowrap;
    display: block;
    padding: 0.5em;
    background-color: #fff;
    color: #01a9f4;
    transition: all .2s;
}

.VNGDropdown .IconDropdown a.VNGDropdownButton:hover,
.VNGDropdown .IconDropdown a.VNGDropdownButton:link:hover{
    background-color: #01a9f4;
    color: #fff;
}

.VNGDropdown .IconDropdown a.VNGDropdownButton span {
    margin-right: 0.5em;
}
/* Print page styling */

.PrintMarginTop{
    margin-top: 10px;
}

/* Speech bubble */
.speech-bubble {
    position: relative;
    background: #ffffff;
    border-radius: .4em;
    box-shadow: -0.1rem 0.5rem 0.75rem #ccc;
    margin: 1rem 1rem 1.5rem 1rem;
    padding: 1rem;
}

.speech-bubble:after {
    content: '';
    position: absolute;
    right: 0;
    top: 70%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-left-color: #ffffff;
    border-right: 0;
    border-top: 0;
    margin-top: -7.5px;
    margin-right: -15px;   
}

/* General small button */
a.SmallButton {
    display: inline-block;
    margin: 0 0.5rem 0 0;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    padding: 0.3rem;
    color: #01a9f4 !important;
    background-color: rgba(255,255,255,0) !important;
    box-shadow: none;
    transition: all .2s;
}

a.SmallButton:hover {
    color: #fff !important;
    background-color: #01a9f4 !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}

a.SmallButton.ExtraSmall {
    width: 1.3rem;
    height: 1.3rem;
    padding: 0.1rem;
    font-size: 0.9rem;
}

/* Simple Link for Navigation */
.SimpleLink {
    position: relative;
}

.SimpleLink:before {
    content: "\f054";
    font-family: 'FontAwesome';
    margin-right: 0.5em;
    font-size: 12px;
}

.SimpleLink:after{
    content: "";
    display: block;
    left: 1em;
    bottom: -1.5px;
    right: 0;
    position: absolute;
    height: 1.5px;
    background-color: #01a9f4;
    transform:scaleX(0);
    transform-origin:left;
    transition: 0.15s transform;
}

.SimpleLink:hover:after, .SimpleLink:link:hover:after, .SimpleLink:visited:hover:after {
    transform: scaleX(1);
}

/* Right Sidebar VNG styles */


.UseSidebar .Content {
    padding-top:50px;
}

.desktop:not(.small).UseSidebar .Content {
    margin-right: 400px;
}

.UseSidebar .Title_Section {
    margin: 0;
}

.Sidebar {
    background-color: #fff;
    width: 400px;
}

.desktop.small .Sidebar.open, .tablet .Sidebar.open {
    -webkit-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
    z-index: 10;
}

.desktop.small .Sidebar, .tablet .Sidebar {
    background-color: #fff;
    right: -400px;
    -webkit-transition: -webkit-transform 300ms ease;
    transition: transform 300ms ease;
}

.Sidebar::before {
    content: "";
    height: 90px;
    display: block;
    border-bottom: 1px dashed#004488;
    margin-bottom: 20px;
}

/* Forum */
a.ForumLeftButton {
    position: absolute;
    left: -2rem;
}

.VNGDropdown.Forum {
    position: absolute;
    left: -1rem;
    top: 0;
}
.link {
    margin:10px;
    padding:10px;
}
.text, .link.text {
    padding:0px;
}



/*-- Divs as ExKeyfigureTable --*/

:root {
    --line: 20px;
}

.oneLine {
    height: var(--line);   
}

.twoLine {
    height: calc(2 * var(--line));
}

.threeLine {
    height: calc(3 * var(--line));
}

.fourLine {
    height: calc(4 * var(--line));
}

.oneLine, .twoLine, .threeLine, .fourLine {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 5px;
    line-height: var(--line);
}

.oneLine_Left {
    justify-content: left;
}

.exKeyfigureTable {
    box-sizing: border-box;
}

.exKeyfigureTable .oneLine, .exKeyfigureTable .twoLine, .exKeyfigureTable .threeLine, .exKeyfigureTable .fourLine, .exKeyfigureTable .TableHalfFill {
    border-bottom: 1px solid var(--color-primary-50);
    box-sizing: border-box;
}

.TableFill {
    background-color: var(--color-primary-50);
    font-weight: bold;
    border-color: white !important;
    border-style: solid;
    border-width: 0 1px 1px 0;
    padding: 0 5px;
}


.TableFill .Text_Note , .TableHalfFill .Text_Note {
    font-weight: normal;
}


.TableFillHeader {
    background-color: var(--color-primary-50);
    font-weight: normal;
    padding: 5px;
    border-color: #fff;
    border-style: solid;
    border-width: 0 1px 1px 0 !important;
}

.KeyfigureTable .TableHalfFill {
    padding: 5px;
    border-bottom: 1px solid var(--color-primary-50);
    box-sizing: border-box;
}

/*-- Divs as KeyFigureMBVP --*/

.KeyFigureMBVP_Column{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.KeyFigureMBVP_SubTitel{
    font-weight: bold;
    text-decoration: underline;
}

.KeyFigureMBVP_PaddingUpperAndBottomHalf{
    margin-bottom: 20px;
}

.KeyFigureMBVP_NameAndResult{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.KeyFigureMBVP_AlignRight{
    text-align: right;
}

.KeyFigureMBVP_AlignLeft{
    text-align: left;
}

/** Navigation Bar on border with top blue bar **/

.TopBorderContainer {
    position: relative;
    top: -35px;
    margin-bottom: -35px;
    margin-right: 1rem;
    z-index: 10;
}

/** flip container util **/

.flip-horizontal {
    transform: scaleX(-1)
}

.flip-vertical {
    transform: scaleY(-1)
}

/** Inline Slider, with slider next to the label **/

.InlineSlider .Slider {
    margin-top: 6px !important;
    margin-bottom: 0px;
}

.InlineSlider .LabelValues {
    float: left;
    width: 150px;
}

.InlineSlider .SliderContainer {
    float: left;
    width: calc(100% - 150px);
    padding-left: 1rem;
    padding-right: 2rem;
}

/*** Generated classes from Style Editor in OutSystems 10 ***/
.ForgotPassword[data-style-key="ApC0kd5GEkma2FzVkYnKhw"] { margin:px; }
.ForgotPassword[data-style-key="cB11kclXu0qtVgE_KNNxJA"] { margin:px; }
[data-style-key="JpLHDSXqgUadugXG_ofhhA"] { height:0px; }
/*** Generated classes from Style Editor in OutSystems 10 ***/