.VerlofDetailGroup {
    border-color: #8B8B8B !important;
}

#header {
    background: white;
    width: 100% !important;
	height: 100%;
	object-fit: contain;
	z-index: 1 ;
}

    #header #left {
        background: url(mnaheader-left.png) left no-repeat;
		
    }


    #header #right {
        background: url(mnaheader-right.jpg) right no-repeat;
    }


A.link, #main a, #main a:active, #main a:visited {
    color: navy
}

    /* Schermnamen op het dashboard en de submenu's. Namen van rapporten etc in de menu's, Into, Geplaatst, ReadMore van de nieuwsberichten  */
    .title,
    .SubMenuItemStyle .dx-vam,
    #main .workflowTabelNaam a.HuidigeScreen,
    #main .workflowTabelNaam a.NietHuidigeScherm,
    #main a .dx-vam,
    .Intro,
    .ReadMore,
    .ReadMore a,
    .Geplaatst {
        color: #666;
    }

/* Titel van de nieuwsberichten */
.Titel,
.Titel a {
    color: #0099FF  !important;
}

.dxeTextBox,
.dxeButtonEdit,
.dxeMemo {
    border-color: gray !important;
}

/* Schermnamen op het dashboard en de submenu's. Namen van rapporten etc in de menu's  */
.title {
    font-size: 11.2px;
}

ul.icons li:hover {
    background-color: lightgray !important;
}

ul.icons li {
    border-color: #0099FF  !important;
}

.breadcrumbs a,
.WelcomePanel,
.WerknemerCombobox,
.dxrpControl td.dxrpHeader,
.dxrpControl td.dxrpHeader span.dxrpHT,
.dxrpControlGB span.dxrpHeader .WelcomePanel input.dxeEditArea {
    color: #0099FF !important;
}

.WerknemerCombobox,
.WerknemerCombobox :focus
{
    border-style: none;
    outline-style: none;
}

.WerknemerCombobox option{
    color:black;
    font-size: 12px;
    font-weight: normal;
}

.dxrpControl td.dxrpHeader {
    background-color: #F2F2F2 !important;
}

.smallpagegroup {
    border-color: darkgray !important;
}

#WebClientSection,
.SectionBorder,
.dxrpControl.dxrp-noCollapsing > tbody > tr.dxrpCR > .dxrpcontent:first-child,
.dxrpControl > tbody > tr.dxrpCR > .dxrpcontent > .dxrpAW > .dxrpCW, .dxrpControl > tbody > tr.dxrpCR > .dxrpcontent > .dxrpCW,
.WelcomePanel, /* Header */
.dxrpControl td.dxrpHeader,
.dxrpControl > tbody > tr > .dxrpcontent,
.dxrpControl td.dxrpHeader span.dxrpHT,
.dxrpControlGB span.dxrpHeader .WelcomePanel input.dxeEditArea, dxpnlControl,
.dlTegoed td, .dlTegoed th {
    border-color: lightgray !important;
	  background: rgba(255,255,255, 0.4);
}

body,
.HeaderStyleVerlofMutatiesDetailsRightAlign,
.HeaderStyleVerlofMutatiesDetailsLeftAlign {
    background-color: #FFFFFF !important;
}

body {
	
  background: url("mnaback.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 1;
}

#maincontainer,
.group {
    background-color: #FFFFFF !important;
}

.DefaultRow {
    background-color: #FFFFFF !important;
}

.AlternatingRow {
    background-color: #D5EFFC  !important;
}

.FocusedRow {
    background-color: navy  !important;
}

.HeaderStyle, .HeaderStyle *,
.dxgvControl,
.dxgvDisabled,
.HoveredStyle {
    background-color: #F2F2F2 !important;
}

.dxgvControl,
.dxgvDisabled {
    color: black !important;
    border-bottom-color: gray !important;
}

.dxICheckBox{
    border-color: black !important;
    color: black !important;	

}

.ReadOnly,
.ReadOnly .dxeEditAreaSys,
.ReadOnly .dxeEditArea,
.ReadOnly .dxeMemoEditAreaSys,
.ReadOnly input[type="text"].dxeEditAreaSys,
.ReadOnly input[type="password"].dxeEditAreaSys,
.ReadOnly .dxeMemo,
.ReadOnly  {
    border-color: darkgray !important;
    color: black !important;
	background-color: #ffffe1 !important; 
}

.HeaderStyle,
.HeaderStyle *,
.SessionHeaderSyle,
.HeaderStyleVerlofMutatiesDetailsRightAlign,
.HeaderStyleVerlofMutatiesDetailsLeftAlign {
    color: navy !important;
}

body {
    font-size: 14px;
    text-align: center;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
}

.page-width {
    min-width: 960px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 10px;
}

.smallpage-width {
    margin: 0 auto;
    padding: 0 10px;
}

body input.dxeEditArea {
    color: inherit;
}

#header {
    position: relative;
    height: 135px;
   /* z-index: 0;*/
}

    #header #left {
        position: absolute;
        left: 0px;
        right: 50%;
        top: 0px;
        height: 115px;
        z-index: -1;
    }

    #header #right {
        position: absolute;
        right: 0px;
        top: 0px;
        left: 50%;
        height: 115px;
        z-index: -1;
    }

#HeaderTemplate_mnuInfo {
    padding-top: 9px;
    padding-left: 8px;
}

#logo {
    z-index: 10;
}

#header .page-width {
    height: 75px;
    line-height: 75px;
}

#header #logo a {
    display: block;
    float: left;
    padding-top: 10px;
}

#header nav {
    background: url(bg-nav.png) repeat-x;
    height: 54px;
    position: absolute;
    top: 115px;
    min-width: 100%;
}

    #header nav .page-width {
        padding: 0;
        height: 54px;
        line-height: 45px;
    }

    #header nav .breadcrumbs {
        float: left;
    }

    #header nav .button, #header nav form {
        float: right;
        margin-left: 10px;
        margin-right: 10px;
    }

    #header nav form {
        margin-right: 15px;
    }

    #header nav .button {
        position: relative;
        top: 8px;
    }

.breadcrumbs {
    padding-left: 15px;
}

    .breadcrumbs a {
        padding: 0 30px 0 0;
        background: url(bg-breadcrumb-arrow.png) no-repeat top right;
        display: block;
        height: 50px;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
    }

    .breadcrumbs li {
        float: left;
    }

        .breadcrumbs li + li {
            margin-left: 10px;
        }

.button:hover, .button, .button * {
    text-decoration: none;
}

    .button span {
        display: inline-block;
        margin: 0;
        float: left;
        height: 32px;
        line-height: 32px;
    }

    .button .left, .button .right {
        width: 4px;
        background: url(bg-button-left.png) no-repeat;
    }

    .button .right {
        background: url(bg-button-right.png) no-repeat;
        width: 5px;
    }

    .button .text {
        background: url(bg-button-middle.png) repeat-x;
        color: #333;
        padding: 0 10px;
        font-size: 14px;
    }

#footer {
    line-height: normal;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 30px;
    background-color: #bfbfbf;
    border-top: solid 1px #8f8f8f;
    display: none;
}

#maincontainer {
    border-top: 1px solid silver;
    border-width: 0px 1px 1px 1px;
    border-left: none;
    border-right: none;
    text-align: left;
    padding: 0px;
    margin-bottom: auto;
    margin-left: 0px;
    margin-top: auto;
    margin-right: auto;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-top: 0px;
    padding-right: 10px;
}

#subcontainerfullwidth, .subcontainerfullwidth {
    text-align: left;
    margin: auto;
}


#main {
    padding: 65px 0 20px 0;
}

nav ul, nav li {
    margin: 0;
    list-style: none;
    list-style-image: none;
}


#WebClientSection {
    border-style: solid;
    border-width: 1px;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.SectionBorder {
    border-style: solid;
    border-width: 1px;
}

.smallpagegroup {
  /*  border-style: solid; */
    border-width: 1px;
}

.VerlofDetailGroup {
    border-style: solid;
    border-width: 1px;
}

.clearfix:before, .clearfix:after, ul.icons:before, ul.icons:after, .group header:before, .group header:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after, ul.icons:after, .group header:after {
    clear: both;
}

ul.icons {
    list-style: none;
    margin: 0;
    padding: 0px;
}

    ul.icons li {
        float: left;
        width: 150px;
        height: 110px;
        border-style: solid;
        border-width: 1px;
        margin: 5px;
    }

        ul.icons li.gauges:hover {
            background-color: transparent !important;
        }

        ul.icons li a {
            display: block;
            height: 100%;
            text-decoration: none;
        }

            ul.icons li a span {
                display: block;
                text-align: center;
                font-size: 11.2px;
            }

                ul.icons li a span.icon {
                    padding: 30px 0 10px 0;
                }

.dxtc-leftIndent {
    width: 0px !important;
}

.CellStyle {
    padding-right: 10px;
    /* Een ASPxGridView overschrijf het font mbv een DXR.axd, functionaliteit van DevExpress :-( */
    word-wrap: normal;
}

.LastCellStyle {
    border-right-style: none !important;
    padding-right: 10px;
    /* Een ASPxGridView overschrijf het font mbv een DXR.axd, functionaliteit van DevExpress :-( */
    word-wrap: normal;
}

.group + .group {
    margin-top: 20px;
}

.group header {
    background: #F3F3F3;
    padding: 10px 15px;
}

    .group header h1 {
        float: left;
        font-size: 1.3em;
    }

    .group header form {
        float: right;
        line-height: 1.6em;
    }

        .group header form label {
            margin-right: 10px;
        }

    .group header table {
        float: right;
        margin-left: 10px;
    }

        .group header table table {
            margin-left: 0px;
        }

A.link, #main a, #main a:active, #main a:visited {
    font-size: 11px;
    text-decoration: none;
    font-weight: bold;
}


.HeaderStyle, .HeaderStyle * {
    border-width: 1px;
    text-align: left;
    vertical-align: bottom;
    padding-right: 10px;
    line-height: normal;
    font-weight: bold;
}

.SessionHeaderSyle {
    font-weight: bold;
    text-align: left;
}

.dxgvControl,
.dxgvDisabled {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    cursor: default;
    min-width: 960px;
    max-width: 1280px;
    font-size: 11.25px;
}

.error {
    font-size: 12px;
    color: Red;
}

b, i, fieldset, P {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

td.text {
    text-align: center;
    font-size: 11px;
    color: black;
    line-height: 190%;
}

td.exheader {
    font-size: 11px;
    font-weight: bold;
    color: Black;
    text-align: left;
    padding-left: 5px;
    vertical-align: top;
}

td.extext {
    font-size: 11px;
    color: Black;
    text-align: left;
    padding-left: 5px;
    vertical-align: top;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 15px;
}

.dx-vam {
    font-weight: normal;
}

#lblFeedback,
.dxeEditAreaSys,
.dxeEditArea,
.dxeBase,
.dxeMemoEditAreaSys, /*Bootstrap correction*/
input[type="text"].dxeEditAreaSys, /*Bootstrap correction*/
input[type="password"].dxeEditAreaSys /*Bootstrap correction*/ {
    font-size: 11.25px;
}

.DefaultInput .dxeEditAreaSys,
.DefaultInput .dxeEditArea,
.DefaultInput .dxeMemoEditAreaSys,
.DefaultInput input[type="text"].dxeEditAreaSys,
.DefaultInput input[type="password"].dxeEditAreaSys {
    font-size: 11.25px;
}

.dxeTextBox,
.dxeButtonEdit,
.dxeMemo {
    border-width: 1px;
    border-style: solid;
}

.WerknemerCombobox,
.WerknemerCombobox .dxeEditAreaSys,
.WerknemerCombobox .dxeEditArea,
.WerknemerCombobox input[type="text"].dxeEditAreaSys {
    font-size: 18px !important;
    font-weight: bold;
    border-style: none;
}

.WerknemerCombobox .dxeButtonEditSys .dxeButtonEdit {
    padding: 0px;
    border-style: none;
}

#ParentContainerTable {
    table-layout: fixed;
}

    #ParentContainerTable tr th {
        text-align: left !important;
        font-size: 11px;
        padding-right: 10px;
        padding-left: 0px;
    }

    #ParentContainerTable tr td.gecontrol {
        padding-right: 10px;
        padding-left: 0px;
        padding-bottom: 5px;
        font-size: 11px;
    }

#ContainerTable tr th {
    text-align: left !important;
    font-size: 11px;
    padding: 0px 5px 0px 5px;
}

#ContainerTable tr td.gecontrol {
    padding-right: 10px;
    padding-bottom: 5px;
    font-size: 11px;
}

td.GridEntryCell {
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 1px;
    padding-bottom: 1px;
}

#GridContainer {
    width: auto;
}

.StyledButton span {
    display: inline-block;
    margin: 0;
    float: left;
    height: 15px;
    line-height: 15px;
}

.CheckedStyle {
    border-style: none !important;
}

#CustomGroup {
    margin-left: auto;
    margin-right: auto;
}

input, textarea, keygen, select, button {
    font-size: 0.9em;
}

.smalltext {
    font-size: 0.8em;
}

.dxtlControl {
    cursor: default;
    font: 12px Tahoma, Geneva, sans-serif;
    color: black;
    border: 1px none #9f9f9f;
}

.image {
    border: solid 1px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.dxrpControl {
    background-color: transparent !important;
}

    .dxrpControl td.dxrpHeader {
        padding-bottom: 25px !important;
        padding-top: 25px !important;
        text-align: left;
    }


    .dxrpControl.dxrp-noCollapsing > tbody > tr.dxrpCR > .dxrpcontent:first-child,
    .dxrpControl > tbody > tr.dxrpCR > .dxrpcontent > .dxrpAW > .dxrpCW, .dxrpControl > tbody > tr.dxrpCR > .dxrpcontent > .dxrpCW {
        padding: 10px 25px;
    }

    .WelcomePanel, /* Header */
    .dxrpControl td.dxrpHeader,
    .dxrpControl td.dxrpHeader span.dxrpHT,
    .dxrpControlGB span.dxrpHeader .WelcomePanel input.dxeEditArea {
        font-weight: bold !important;
        font-size: 18px;
        border-style: solid;
        border-width: 1px;
    }

        .WelcomePanel .dxeButtonEditButton {
            border-style: none;
            /*background-color: transparent;*/
        }

    .dxrpControl.dxrp-noCollapsing > tbody > tr.dxrpCR > .dxrpcontent:first-child,
    .dxrpControl > tbody > tr.dxrpCR > .dxrpcontent > .dxrpAW > .dxrpCW, .dxrpControl > tbody > tr.dxrpCR > .dxrpcontent > .dxrpCW {
        padding: 10px 10px 10px 10px;
    }

.PopUpHeader {
    font-weight: bold;
    position: absolute;
    left: 0px;
    text-align: left;
}

.HeaderStyleVerlofMutatiesDetailsRightAlign,
.HeaderStyleVerlofMutatiesDetailsLeftAlign {
    border-width: 1px;
    vertical-align: bottom;
    padding-right: 10px;
    line-height: normal;
    font-weight: bold;
}

.HeaderStyleVerlofMutatiesDetailsLeftAlign {
    text-align: left;
}

.HeaderStyleVerlofMutatiesDetailsRightAlign {
    text-align: right;
}

.ItemVerlofMutatiesDetailsStyleRightAlign,
.ItemVerlofMutatiesDetailsStyleLeftAlign {
    padding-right: 10px;
    border-width: 1px;
}

.ItemVerlofMutatiesDetailsStyleLeftAlign {
    text-align: left;
}

.ItemVerlofMutatiesDetailsStyleRightAlign {
    text-align: right;
}

#pspAbsenceTooltip {
    font-size: 10px;
}

.ExternalPageProgressIndicatorStyle {
    background-color: gray;
    width: 200px;
    height: 200px;
    border: solid 2px black;
    top: 40%;
    left: 40%;
    z-index: 99999;
    position: absolute;
    display: block;
}

.ItemleftStyle {
    text-align: left;
    padding-right: 10px;
}

.ItemrightStyle {
    text-align: right;
    padding-left: 10px;
}

#dgVerlofMutaties,
#dgOvergenomenBW,
#dgOvergenomenW,
#dgOvergenomen {
    min-width: 500px;
}

.dxeButtonEditButton, .dxeSpinLargeIncButton, .dxeSpinLargeDecButton {
    background: none;
}

/* De font-family  */
body,
*, .dxeBase, .dxeEditAreaSys, .dxeListBoxItem,
.CellStyle,
.LastCellStyle,
.HeaderStyle,
.HeaderStyle *,
#ParentContainerTable tr th,
#ContainerTable tr th,
input, textarea, keygen, select, button,
.dxrpControl,
.ItemVerlofMutatiesDetailsStyleRightAlign,
.ItemVerlofMutatiesDetailsStyleLeftAlign {
    font-family: Sans-serif !important;
}

#main .workflowTabelNaam a {
    float: left;
    margin-top: -27px;
    padding-left: 121px;
    text-align: left;
    width: 80%;
    font-weight: 100;
    display: block;
    font-size: 12px;
    text-decoration: none;
}

    #main .workflowTabelNaam a.HuidigeScreen,
    #main .workflowTabelNaam a.HuidigeScreenVerplichtScreen {
        font-weight: 700;
    }

    #main .workflowTabelNaam a.HuidigeScreenVerplichtScreen,
    #main .workflowTabelNaam a.NietHuidigeSchermVerplichtScreen {
        color: orange !important;
    }

.workflowTabelNaam a:first-letter {
    text-transform: uppercase;
}

.PeopleIncMenuImage {
    background-image: url(Icon_blue.png);
    background-size: contain;
}

#logo {
    /*background: url(semefab=resize.jpg) no-repeat  left;*/
	width: 100%;
	height: 100%;
}

#HeaderTemplate_HeaderImage {
  /*  background: url(bg-header-3.jpg) no-repeat right center;*/
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    select{
        -webkit-appearance: menulist;
     }
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    select{
        -webkit-appearance: menulist;
     }
}

.WerknemerCombobox {
    height: 22px;
}