html{
    min-width: 1024px !important;
}

#loginbody {
    background-image: url(../Content/beach-blur-boardwalk.jpg);
    background-size: cover;
}

.breadcrumbcontainer {
    background-color: #808080;
    height: 30px;
}

.menucontainer {
    background-color: #f4f4f4;
    border-bottom: 1px solid #ccc;
    height: 40px;
}

.floatleft {
    float: left;
}

.floatright{
    float:right;
}

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

#main{
    margin-left: 250px;
}

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 {
    color: #FFFFFF !important;
}

.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: #fafafa !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: #f0f0f0 !important;
}

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

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

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

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

.FocusedRow {
    background-color: #DDECF8 !important;
    color: black !important;
}

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

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


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

.HeaderStyle,
.HeaderStyle *,
.SessionHeaderSyle,
.HeaderStyleVerlofMutatiesDetailsRightAlign,
.HeaderStyleVerlofMutatiesDetailsLeftAlign {
    color: black !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;
    margin-left:10px;
    padding: 0 10px;
}

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

body input.dxeEditArea {
    color: inherit;
}

header {
    height: 100px;
}

#header {
    background: #222222;
    color: #999999;
    position: relative;
    height: 50px;
    margin-left: 0;
}
    #header .header-logo {
        float: left;
        padding: 10px 15px 0px 15px;
        font-size: 18px;
    }

    #header .header-logo img {
        margin-right: 10px;
    }

        #header .header-logo .header-logotext
        {
            padding-top: 5px;
        }

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

#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: 75px;
    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;*/
    /*position: absolute;*/
}

    .breadcrumbs a {
        padding: 0 30px 0 0;
        background: url(bg-breadcrumb-arrow.png) no-repeat center right;
        display: block;
        text-decoration: none;
        font-size: 13px;
        background-size: 14px 14px;
    }

    .breadcrumbs li {
        float: left;
        list-style: none;
        padding-top: 5px;
    }

        .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: 40px 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, ul.tile {
    list-style: none;
    margin: 0;
    padding: 0px;
}

ul.icons li {
    float: left;
    width: 150px;
    height: 110px;
    border-style: solid;
    border-width: 1px;
    margin: 5px;
    border-radius: 4px;
    border-color: black !important;
}

    li.tile {
        /*background-image: url('../include/briefcase-2-512.png');
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: center;*/
        background-color: rgba(216,216,216,0.3);
    }

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

ul.icons li.gauges {
    width: auto;
    height: auto;
    padding: 5px;
}

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%;
    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: 16px;
        border-style: solid;
    }

        .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 {
    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: 'Segoe UI Regular' !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(peopleinc_logo.png) no-repeat left center;
}*/

/*#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;
}

.navbar-brand {
    height: 43px;
    top: -10px;
    position: relative;
}

.navbar-inverse .navbar-brand:hover {
    color: #999999;
}

.fullwidth {
    max-width: 100% !important;
}

.glyphicon {
    font-family: "Glyphicons Halflings" !important;
}

.navbar-header .caret {
    border-top-color: white !important;
}

.sidenav {
    height: 100%;
    position: fixed;
    z-index: 1030;
    top: 80px;
    padding-top: 10px;
    left: 0;
    background-color: #ECECEC;
    overflow-x: hidden;
    transition: 0.5s;
    font-size: 0.9em;
    margin-left: -10px;
    padding-right: 15px;
    border-right: 1px solid #ccc;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    /*font-size: 25px;*/
    color: #6E6E6E;
    display: block;
    transition: 0.3s;
    text-align:left;
}

.sidenav a:hover {
    color: #000000;
    background-color: #cccccc;
    text-decoration: none;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 32px;
    margin-left: 50px;
    cursor: pointer;
}

.sidenav .glyphicon-pushpin {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 14px;
    cursor: pointer;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

.navbar-fixed-left {
    top: 90px;
    z-index: 1030;
    border-radius: 0;
    position: fixed;
    left: 0;
    bottom: 0;
    border-width: 0 0 1px;
    height: 100%;
}

@media (max-width: 768px) {
    .navbar-right {
        float: right;
        margin-right: 0px;
    }
}

.sub-menu li, .sidenav > li {
    list-style: none;
}

.betweenmenu {
    padding-top: 10px;
    margin-left: 250px;
    min-width: 1024px;
    text-align: left;
}

.betweenmenu > span:not(:first-child):not(:last-child), .betweenmenu > .btn-group:not(:first-child):not(:last-child) {
    margin: 0 10px 0 0;
}

.betweenmenu > span:first-child, .betweenmenu > .btn-group:first-child {
    margin: 0 10px 0 0;
}

.betweenmenu > span:not(:first-child):before, .betweenmenu > .btn-group:not(:first-child):before {
    content: '|';
    display: inline-block;
    padding-right: 10px;
    opacity: 0.3;
}


.betweenmenu span a:hover {
    text-decoration: none;
}

.betweenmenu span a img {
    margin-top: -3px;
}

.betweenmenu span a {
    color: rgb(69, 133, 175);
    font-size: 0.9em;
}

.btn-group{
    margin:0px 5px;
}

.navbar-header .dropdown-menu {
    text-align:left;
}

.navbar-right .dropdown-menu {
    text-align: right;
}

#cb_Employees {
    background-color: #fcfcfc;
    border-color: #222222;
    color: rgb(69, 133, 175);
}

.betweenmenu .btn-group .dropdown-menu li {
    text-align:left;
}

.openrequestclass, .companydocclass, .payslipsclass {
    padding-left: 0px;
    text-align: left;
}

.openrequestclass li, .companydocclass li {
    color: #0099FF;
    list-style: none;
    margin: 15px 0px;
}

.openrequestclass a, .companydocclass a {
    color: #0099FF !important;
}

.payslipsclass li {
    list-style: none;
    margin: 15px 0px;
}

.payslipsclass li a.title {
    color: #666 !important;
    font-weight: bold !important;
}

.StandardButton {
    width: auto !important;
    margin-top: -5px;
    color: #ffffff !important;
    background-color: #428bca;
    border-color: #357ebd;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 4px;
    background-image: none;
}

.GrayButton {
    width: auto !important;
    margin-top: -5px;
    color: #000000;
    background-color: #ececec;
    border-color: #ebf3f9;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 4px;
    background-image: none;
}

.glyphicon-chevron-down{
    font-size: 0.8em;
}

#messagetodelete {
    font-weight: bold;
    color: rgb(69, 133, 175);
}

.textdecorationnone {
    text-decoration: none;
}