/* Minification failed. Returning unminified contents.
(3979,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '!important'
(4040,14): run-time error CSS1062: Expected semicolon or closing curly-brace, found '!important'
(4451,13): run-time error CSS1030: Expected identifier, found ';'
 */
/* ==== Verlofdagen.nl ==================== */

/* General settings
-------------------------------------------------------------*/
*, html, body, form {
    margin: 0px;
    padding: 0px;
}

    * html, * body /* hack voor ie6 om de hoogte op de parent elementen goed te krijgen */ {
        height: 100%;
    }


/* TODO this gives a problem in Safari with iframes */
html /* always show vertical scrollbar so website don't move horizontal when scrollbar appears */ {
    /* overflow-y:hidden; */
}


html, body, td {
    font-family: Arial;
    font-size: 12px;
}


    body.koptekst {
        position: relative;
        background: #D5E2F1;
        background-size: cover;
    }



        html.mobile body.koptekst,
        body.koptekst.members1 .content {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=100);
            -moz-opacity: 0;
            -khtml-opacity: 0;
            opacity: 0;
        }


p {
    margin-bottom: 10px;
    line-height: 140%;
}

a, a:hover {
    color: #0078c1;
}

/* messages and preload panels
-------------------------------------------------------------*/
.testbar {
    width: 310px;
    height: 45px;
    position: fixed;
    bottom: 0;
    right: 0px;
    z-index: 99999;
    text-align: center;
}

    .testbar p {
        color: #222 !important;
        width: 310px;
        font-weight: bold;
        margin: auto;
        margin-top: 6px;
        text-align: center;
        padding: 2px 5px;
        border: solid 1px #ddd;
        background: lightyellow;
    }


/* hack voor ie begrijpt position:fixed verkeerd */
* html .testbar {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 400px;
}

#preload {
    display: none;
}


#meldingcontainer {
    position: absolute;
    z-index: 997;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    background-color: #333;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -webkit-opacity: 0.8;
    opacity: 0.8;
}

    #meldingcontainer iframe {
        display: none;
    }

    * html #meldingcontainer iframe {
        display: block;
        height: 100%;
        width: 100%;
        background: #eee;
        filter: alpha(opacity=70);
    }

#melding {
    display: none;
    text-align: center;
}

.showopmerking, .showfoutmelding, .showwachtmelding, .showwachtmeldingleeg {
    position: absolute;
    z-index: 999;
    background: #fff;
    padding: 10px 20px;
    display: none;
    top: 100px;
    left: 0;
    border: solid 10px #eee;
    border-radius: 10px;
    font-weight: normal;
    text-align: center;
    line-height: 150%;
    box-shadow: 0 0 5px 0 #555;
}


.alertbox {
    position: relative;
    padding: 10px 10px;
    color: #dc5800;
    background: #FFECE5 url(/Content/Images/Ico/alert.png) no-repeat 9px 9px;
    border-bottom: solid 1px #FFB399;
    padding-left: 35px;
    line-height: 140%;
}

    .alertbox ul.horizontal li {
        display: inline-block;
        list-style: none;
        margin-right: 10px;
    }

.sluitmelding {
    margin: auto;
    margin-top: 10px;
    width: 50px;
    text-decoration: none;
    background: #007BE7;
    border-radius: 5px;
    color: #fff;
}

    .sluitmelding:hover {
        background: #5580AB;
        color: #fff;
    }

.showwachtmeldingleeg {
    background: #fff url(/Content/Images/loading.gif) no-repeat 10px 12px;
    padding: 10px;
    font-weight: bold;
}

#meldingtxt {
    padding: 10px;
}

.progresspanel {
    position: relative;
    text-align: left;
    border: solid 1px silver;
    width: 240px;
    margin: auto;
    margin-bottom: 22px;
}

.progressbalk {
    border: outset 1px silver;
    background: #00FF00 url(/Content/Images/Backgrounds/bg_progressbar.png);
    height: 12px;
    margin: 2px;
}

.progresstxt {
    display: block;
    position: absolute;
    top: 20px;
    left: 2px;
    font-size: 11px;
}

.showfoutmelding {
    background: #FFE5E5;
    border: solid 2px red;
    text-align: left;
}

    .showfoutmelding
    .sluitmelding {
        background: red;
        color: #fff;
    }

        .showfoutmelding
        .sluitmelding:hover {
            background: darkred;
            color: #fff;
        }

.showwachtmelding {
    background: #fff url(/Content/Images/loading.gif) no-repeat 10px 10px;
}


/* Supportpanel for testaccounts */
.testperiodpanel {
    height: 40px;
    margin: auto;
    background: #606060 url(/Content/Images/Backgrounds/bg_testperiod.png) repeat-x;
    font-size: 12px;
    border-bottom: solid 1px gold;
}

.testperiod {
    margin-left: 5px;
    float: left;
    line-height: 35px;
}

    .testperiod span {
        display: block;
        padding: 3px 10px 3px 0px;
        float: left;
        color: #fff;
        font-weight: bold;
    }

    .testperiod a.linkabonnement {
        position: relative;
        top: 3px;
        display: block;
        margin-left: 10px;
        color: #fff;
        padding: 0px 6px;
        border: solid 1px #66CC33;
        background: green url(/Content/Images/Backgrounds/bg_linkabonnement.png) repeat-x;
        text-shadow: 1px 1px #101010;
        box-shadow: 0 0 5px 0 #101010;
        height: 25px;
        line-height: 25px;
        font-weight: bold;
        font-size: 14px;
        text-decoration: none;
        border-radius: 5px;
        width: auto;
    }

        .testperiod a.linkabonnement:hover {
            background: #66CC33;
            border-color: #eee;
        }

    * html .testperiod a.linkabonnement {
        width: 160px;
    }

.supportpanel {
    float: right;
    line-height: 35px;
    padding-right: 10px;
}

    .supportpanel span {
        display: block;
        float: right;
        padding: 3px 8px 3px 0px;
        color: #eee;
    }

        .supportpanel span.highlight {
            color: #FFFF66;
            font-size: 15px;
            font-weight: bold;
        }

    .supportpanel a {
        color: #FFFF66;
    }




/* Container defines the size and location of the website 
-------------------------------------------------------------*/
.container {
    margin: auto; /* center the website */
    background: #fff;
    box-shadow: 0 0 6px 0 #555;
    overflow: hidden;
    background: #EDF2F8;
}

/* Header 
-------------------------------------------------------------*/
.header {
    height: 46px;
    margin: auto;
    background: #006DA3;
    background: #5580AB;
    background: #3F71A3;
    border-bottom: solid 3px #5580AB;
    border-bottom: solid 0px #ccc;
    position: relative;
    width: 100%;
}

.headercontent {
    max-width: 1020px;
    margin: auto;
    position: relative;
    height: 100%;
}

.logokoptekstpanel {
    position: absolute;
    top: 4px;
    left: 0px;
    height: 49px;
    width: 319px;
    border-radius: 15px;
    z-index: 299;
}

#objLeftMenu {
    display: none;
    vertical-align: middle;
    padding: 2px 0px 3px 10px;
    position: relative;
    z-index: 1500;
}

.headerlogo /* position of logo */ {
    display: inline-block;
    padding: 3px 8px;
    vertical-align: middle;
}

.header span.arrowdown {
    display: none;
    width: 12px;
    position: absolute;
    color: #eee;
    top: 8px;
    line-height: 1;
    right: 6px !important;
    float: none;
    margin: 0px;
    padding: 0px;
}

.hulpopafstand {
    display: block;
    width: 145px;
    position: absolute;
    top: -10px;
    height: 37px;
    line-height: 27px;
    left: 50%;
    margin-left: -75px;
    border: solid 1px #339900;
    background: #CCFFB3;
    line-height: 100%;
    border-radius: 5px;
    color: #fff;
    z-index: 800;
    box-shadow: 0 0 4px #111;
}

    .hulpopafstand:hover {
        background: #fff;
        cursor: pointer;
    }


/* ie6 hack */
* html .hulpopafstand {
    right: 135px;
    width: 300px;
}

    .hulpopafstand img {
        float: left;
        width: 16px;
        height: 16px;
        margin: 0px;
        margin-top: 15px;
        margin-left: 5px;
        padding: 0px;
    }

        .hulpopafstand img.imporsonate {
            position: absolute;
            top: 17px;
            left: -25px;
            width: 16px;
            height: 16px;
        }

    .hulpopafstand span {
        display: block;
        float: left;
        margin: 17px 8px;
        white-space: nowrap;
        color: #303030;
        font-weight: bold;
    }

    .hulpopafstand .arrowdown {
        margin-top: 9px !important;
        color: #999 !important;
    }

    .hulpopafstand a, .hulpopafstand a:hover {
        display: block;
        float: right;
        background: #004080 url('/images/bg_browseheader.jpg');
        text-decoration: none;
        font-size: 11px;
        color: White;
        margin: 5px 5px;
        margin-right: 5px;
        padding: 2px 8px;
        border: outset 1px;
        border-radius: 5px;
    }

        .hulpopafstand a:hover {
            background: #004080;
        }


/* alertpanel items*/

#alertpanelbox {
    position: absolute;
    display: block;
    padding: 3px 4px;
    margin: auto;
    background: #fff;
    border: solid 1px silver;
    box-shadow: 1px 1px 3px 0 #555;
    top: 8px;
    right: 0px;
}

.itemlink {
    display: block;
    line-height: 18px;
    height: 22px;
    color: gray;
    margin-right: 5px;
    padding: 0px 5px;
    text-decoration: none;
    border-radius: 5px;
    border: solid 1px silver;
    cursor: default;
    position: relative;
    width: 150px;
    border: solid 1px silver;
    background: #fff;
    margin-bottom: 3px;
}

    .itemlink:hover {
        box-shadow: 0 0 1px 0 #555;
        border: solid 1px #eee;
        background: #fff;
    }

    .itemlink span.number {
        position: absolute;
        top: 3px;
        right: 8px;
        font-size: 12px;
        font-weight: bold !important;
    }

    .itemlink.alerts, .itemlink.tips, .itemlink.openrequests {
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        position: relative;
    }

        .itemlink.alerts:hover {
            background: #fff;
            color: Red;
        }

    .itemlink.tips {
    }

        .itemlink.tips:hover {
            background: #fff;
            color: #0073E6 !important;
        }

    .itemlink.openrequests {
        font-weight: bold;
        color: #303030;
    }

        .itemlink.openrequests:hover {
            background: #fff;
        }

    .itemlink.disabled {
        color: silver !important;
        background: transparent;
        border: solid 1px #eee;
        box-shadow: none;
    }

        .itemlink.disabled img {
            opacity: 0.2;
            -mox-opacity: 0.2;
            -webkit-opacity: 0.2;
            filter: alpha(Opacity=20);
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
        }

    .itemlink img {
        position: absolute;
        top: 4px;
        left: 5px;
        border: 0px;
    }

    .itemlink a {
        text-decoration: none;
    }

    .itemlink.disabled .title {
        position: absolute;
        top: 5px;
        left: 30px;
        color: #999;
        width: 110px;
        font-size: 12px;
        letter-spacing: 0px;
        line-height: 100%;
    }

    .itemlink .title {
        position: absolute;
        top: 5px;
        left: 30px;
        color: #333;
        width: 110px;
        font-size: 12px;
        letter-spacing: 0px;
        line-height: 100%;
    }
/* Userpanel
-------------------------------------------------------------*/
.languagepanel /* position of language flags */ {
    position: absolute;
    right: 7px;
    top: 4px;
}

a.logoutbutton {
    display: block;
    padding: 5px;
    text-decoration: none;
    text-align: center;
    border-top: solid 1px #ddd;
}

    a.logoutbutton:hover {
        background: #D5E2F1;
    }
/* Userpanel
-------------------------------------------------------------*/
.userpanel {
    position: absolute;
    top: 9px;
    right: 5px;
    height: 28px;
    line-height: 28px;
    width: 320px;
    background: #eee;
    background-image: -ms-linear-gradient(top, #EDEDED 0%, #DBDBDB 100%);
    background-image: -moz-linear-gradient(top, #EDEDED 0%, #DBDBDB 100%);
    background-image: -o-linear-gradient(top, #EDEDED 0%, #DBDBDB 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EDEDED), color-stop(1, #DBDBDB));
    background-image: -webkit-linear-gradient(top, #EDEDED 0%, #DBDBDB 100%);
    background-image: linear-gradient(to bottom, #EDEDED 0%, #DBDBDB 100%);
    background: #e9e9e9;
    background: transparent;
    border-bottom: solid 1px #ccc;
    border-left: solid 1px #ddd;
    border-bottom-left-radius: 6px;
    border: 0;
    z-index: 500;
    white-space: nowrap;
}

    .userpanel .loggedin span {
        padding: 0px 5px 0px 8px;
        font-size: 12px;
        float: left;
        display: block;
        color: #eee;
        white-space: nowrap;
        overflow: hidden;
    }

div.loggedin {
    display: inline-block;
    float: right;
    font-size: 12px;
    max-width: 200px;
    margin-right: 5px;
    padding: 3px 5px 4px 4px;
    border-right: solid 0px #436180;
    line-height: 16px;
    color: #ddd;
    text-decoration: none;
    box-shadow: 0 0 0px 0 #999;
}

    div.loggedin:hover {
        background: #7699BC;
        border-color: #4C739A;
        cursor: pointer;
    }

    div.loggedin a {
        color: #ddd;
        line-height: 18px;
    }


a.helpbutton, a.helpbutton:hover /* position of help button */ {
    display: inline-block;
    float: right;
    position: relative;
    width: 70px;
    height: 26px;
    line-height: 26px;
    cursor: pointer;
    color: #eee;
    text-decoration: none;
    font-size: 12px;
    font-weight: normal;
    background: #7699BC;
    border: solid 1px #4C739A;
    background: #4C739A;
    border: solid 1px #7699BC;
    border-radius: 0px;
    border: 0;
    background: transparent;
}

    a.helpbutton:hover {
        color: #fff;
        background: #7699BC;
        /*border-color:#4C739A;*/
    }

    a.helpbutton img {
        border: 0px;
        position: absolute;
        top: 5px;
        left: 8px;
        opacity: 0.85;
    }

    a.helpbutton:hover img {
        opacity: 1;
    }

    a.helpbutton span.help {
        display: block;
        position: absolute;
        font-size: 13px;
        left: 30px;
        top: 0px;
        font-weight: bold;
    }

#alertsignlink {
    display: inline-block;
    float: right;
    padding: 0px 10px 0px 0px;
    position: relative;
    height: 26px;
    width: 30px;
    border: 0px;
    z-index: 2;
    background: #4C739A;
    border: solid 1px #7699BC;
    background: transparent;
    border: 0;
    border-right: solid 0px #436180;
    line-height: 26px;
    border-radius: 0px;
    margin-right: 5px;
}

    #alertsignlink:hover {
        color: #fff;
        background: #7699BC;
        border-color: #4C739A;
        cursor: pointer;
    }

.alertpaneliframe {
    padding: 0px 0px;
    position: absolute;
    top: 30px;
    width: 300px;
    height: 168px;
    border: 0px;
    z-index: 2;
    right: 75px;
}

.alertpanel {
    display: block;
    padding: 0px 8px 0px 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 4;
}


.alertsign img {
    position: absolute;
    top: 5px;
    left: 7px;
}

.alertsignnumber {
    position: absolute;
    top: 0px;
    left: 14px;
    background: red;
    color: #fff;
    font-size: 10px;
    width: 16px;
    height: 15px;
    text-shadow: 1px 1px 1px #333;
    font-weight: bold;
    line-height: 13px;
    border-radius: 6px;
    text-align: center;
}

div.userpopmenu {
    position: absolute;
    right: 0px;
    top: 29px;
    min-width: 320px;
    max-width: 650px;
    overflow: hidden;
    background: #fff;
    z-index: 10;
    border: solid 1px silver;
    box-shadow: 0px 0px 4px 0 #999;
    padding-top: 5px;
}

    div.userpopmenu .row {
        margin: 0px 2px;
        padding: 2px 8px;
        line-height: 25px !important;
        white-space: nowrap;
        font-size: 12px;
    }

.userpanel .actionpanel {
    padding: 5px 5px;
    margin: 0px;
    line-height: 1;
    text-align: center;
}

.userpanel .row span.label {
    margin-right: 3px;
    color: #777;
    width: 70px;
    line-height: 24px;
    font-size: 11px;
}

.userpanel .row span.variable {
    line-height: 24px;
    width: auto;
    color: #333;
}

/* Middlepanel 
----------------------------------------------------------- */
.middlepanel {
    overflow: hidden;
    margin: auto;
    max-width: 1020px;
    padding-top: 0px;
    /* min-height:100px;*/
    border-left: solid 0px #ccc;
    position: relative;
    z-index: 0;
    background: #EDF2F8;
}

.contenthider {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
    display: none;
}


/* leftpanel | companylogo & menu */
.leftpanel {
    position: relative;
    float: left;
    width: 160px;
    border-right: solid 0px #fff;
    z-index: 500;
    overflow: hidden;
    background: #EDF2F8;
}

/* leftpanel | companylogo & menu */
html.mobile .leftpanel {
    width: 250px;
}

.togglemenupanel {
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 99;
    width: 15px;
    height: 100%;
    display: none;
}

    .togglemenupanel a {
        display: block;
        position: absolute;
        top: 10px;
        left: -11px;
        width: 10px;
        background: #fff;
        text-decoration: none;
        background-image: -ms-linear-gradient(top, #303030 0%, #999999 100%);
        background-image: -moz-linear-gradient(top, #303030 0%, #999999 100%);
        background-image: -o-linear-gradient(top, #303030 0%, #999999 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #303030), color-stop(1, #999999));
        background-image: -webkit-linear-gradient(top, #303030 0%, #999999 100%);
        background-image: linear-gradient(to bottom, #303030 0%, #999999 100%);
        border: solid 1px #202020;
        border-radius: 8px;
        padding: 6px 4px 6px 19px;
        line-height: 11px;
        font-size: 10px;
        font-weight: bold;
        box-shadow: 2px 2px 3px 0px #555;
        border-left: 0px;
        color: #fff;
    }


.companylogopanel {
    text-align: center;
    margin: 8px 10px 3px;
    margin-bottom: 3px;
}

.companylogo {
    margin: auto;
    border: solid 1px #ddd;
    border-radius: 5px;
}


/* panel with content */
.contentpanel {
    position: relative;
    padding: 0px;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 160px;
    /* min-height:350px;  */
    background: #fff;
    padding-bottom: 0px;
    border-right: solid 1px #C8D6EA;
    border-left: solid 1px #C8D6EA;
}

* html .contentpanel {
    /*   height:500px;*/
}
/* page title */
h1 {
    padding: 0px 5px;
    overflow: hidden;
    margin: 0px;
    padding-top: 12px;
    margin-left: 23px;
    margin-bottom: 5px; /* 15px */
    height: 32px;
    line-height: 32px;
    font-size: 20px;
    font-weight: normal;
    color: #5580AB;
    background: #fff;
    border-bottom: solid 0px silver;
    border-radius: 5px;
}

.righttoppanel {
    position: absolute;
    right: 15px;
    top: 12px;
}

.pageactionpanel .righttoppanel {
    float: right;
    margin-right: 10px;
    position: relative;
    right: auto;
    top: auto;
}
/* content */
.content {
    padding: 10px 0px;
}

.werknemers .content {
    padding: 0px 0px;
}



.contentbox {
    overflow: hidden;
    padding: 10px 15px 10px 15px;
    margin: 0px 10px 0px 12px !important;
    border: solid 1px #ccc;
    border: 0px;
    border-radius: 0px;
    position: relative;
    box-shadow: 0px 0px 2px 0px #999;
    box-shadow: none;
}

* html .contentbox /* hack ie6 */ {
    padding: 8px 0px 8px 10px;
    width: 97%;
}

.bodyiframe {
}

    .bodyiframe .contentbox {
        margin: 0px !important;
    }

.contentbox.iframe {
    width: 99%;
    padding: 0px;
    margin: 0px;
    border: 0px;
    background: transparent;
    overflow: hidden;
    border-radius: 0px;
    box-shadow: none;
}

.contentbrowsecolumn {
    position: relative;
    width: 250px;
    float: left;
    margin-right: 10px;
    height: 480px;
    overflow: auto;
    border: solid 0px silver;
    -webkit-overflow-scrolling: touch; /* ipad scrolling */
}
/* leftcolumn next to browselist */
.contentleftcolumn {
    margin-top: 0px;
    margin-left: 260px;
    /* specify width on the the page self */
}

/* titles */
h2, h3, h4 {
    color: #303030;
    font-family: Arial;
    font-size: 14px;
    padding: 0px;
    margin: 0px 0px 7px 0px;
}

.contentbox h1 {
    color: #303030;
    font-size: 14px;
    margin: 0px;
    padding-top: 0px !important;
    background: transparent;
    font-weight: bold;
}

.contentbox h2 {
    position: relative;
    padding: 0px 2px 6px 2px !important;
    border-bottom: solid 1px #ddd;
    margin-bottom: 11px !important;
    font-weight: normal;
    font-size: 16px;
    color: #5580AB;
}

.contentbox.iframe h2 {
    margin: 3px 0px 2px 0px !important;
    border-bottom: 0px;
    padding: 0px;
    background: transparent;
}

h3 {
    font-size: 12px;
    margin-top: 5px;
}

h4 {
    font-size: 12px;
    margin: 5px 0px 2px 0px;
}

/* padding for form elements */
.contentbox form {
    padding: 0px 0px;
    margin-bottom: 0px;
}

/* alertbox */
div.alert {
    border: solid 1px #FF6666;
    background: #fefefe;
    background: #FFF2F2;
    padding: 10px;
    margin-bottom: 15px;
}

    div.alert p {
        line-height: 170%;
    }

    div.alert.nomargin {
        margin: 5px;
    }

    div.alert.message {
        border: solid 1px #B3CCE6;
        color: #777;
    }

        div.alert.message.openstaand {
            background: #f5f5f5;
            border: solid 1px #ddd;
        }

div.attention {
    border: solid 1px red;
    padding: 10px;
}

/* horizontal line */
hr {
    border: 0px;
    border-bottom: solid 1px silver;
    margin: 0px;
    padding: 5px 0px;
}


/* Footer 
---------------------------------------------------------- */

.footer {
    margin: auto;
    border: solid 0px silver;
    background-image: -ms-linear-gradient(top, #eee 0%, #F0F0F0 100%);
    background-image: -moz-linear-gradient(top, #eee 0%, #F0F0F0 100%);
    background-image: -o-linear-gradient(top, #eee 0%, #F0F0F0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(1, #F0F0F0));
    background-image: -webkit-linear-gradient(top, #eee 0%, #F0F0F0 100%);
    background-image: linear-gradient(to bottom, #eee 0%, #F0F0F0 100%);
    background: #444;
    overflow: hidden;
    color: #ccc;
    line-height: 120%;
    height: 40px;
    text-align: center;
    position: relative;
    z-index: 120;
    bottom: 0;
}

.footercontent {
    position: relative;
    margin: auto;
    max-width: 1020px;
    margin-top: 3px;
}

.footer a, footer a:hover {
    color: #ccc;
}

    .footer a:hover {
        color: #fff;
    }

    .footer a img {
        width: 60px;
        margin-top: -1px;
        opacity: 0.7;
        -moz-opacity: 0.7;
    }

    .footer a:hover img {
        opacity: 1;
        -moz-opacity: 1;
    }

.footer span {
    padding: 10px 10px;
    display: block;
    float: left;
    font-size: 11px;
}

/* SPECIAL ELEMENTS
===============================================================*/

/* Misc */
.itemtitle {
    margin: 14px 5px 12px 14px;
    font-size: 21px;
    color: #5580AB;
    font-weight: normal;
    border: solid 0px silver;
    overflow: hidden;
    white-space: nowrap;
}


table td {
    padding: 6px 3px;
}


span.letop {
    color: red;
    display: inline-block;
    margin-bottom: 3px;
}

.datepickeimage {
    vertical-align: bottom;
    border: solid 1px silver;
    background-color: #ddd;
    padding: 3px 6px 4px 4px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    cursor: pointer;
    cursor: hand;
    margin-left: -9px;
    position: relative;
    z-index: 0;
    display: inline-block !important;
    float: none !important;
}

.meerdereverzoeken {
    display: block;
    margin-left: 7px;
    margin-top: 2px;
}

.verzoekopmerking {
    display: none;
    background: #FFFFE5;
    padding: 5px 0px;
    border: solid 1px #ddd;
    width: 310px;
    position: absolute;
    left: -10px;
    top: 0px;
    border-radius: 5px;
    z-index: 100;
    box-shadow: 0 0 2px #333;
}

/* Rooster 
-----------------------------------------*/

.rooster {
    overflow: hidden;
    margin-bottom: 10px;
}


/* blok om de eigenschappen links te plaatsen (bij profiel) */
.roosterprops {
    overflow: hidden;
}


    .roosterprops .formrow .label,
    .roosterbox .formrow .label,
    .roosterboxedit .formrow .label {
        width: 120px;
    }

/* blok om het rooster rechts te plaatsen (bij profiel) */
.roosterbox {
    width: 380px;
}

.roosterboxedit {
}

    .roosterbox table,
    .roosterboxedit table {
        border-collapse: collapse;
        border: solid 1px silver;
        border-right: 0px;
        width: 100%;
    }

        .roosterbox table td,
        .roosterboxedit table td {
            padding: 2px 6px;
            border-right: solid 1px silver;
        }

.wkdays {
    background: #eee;
    border-bottom: solid 1px silver;
}

.roosterbox table td .roosterveld,
.roosterboxedit table td .roosterveld {
    width: 35px;
}

/* Tabs 
------------------------------------------------------------*/
.tabbox {
    position: relative;
    margin: 0px;
    padding: 0px;
    margin: 0px 0px;
}

    .tabbox ul {
        position: relative;
        top: 0px;
        left: 0px;
        margin: 0px;
        padding: 0px;
        height: 24px;
    }

    .tabbox #tab.nocontent {
        border-bottom: solid 1px silver;
    }

        .tabbox #tab.nocontent.double {
            height: 42px;
        }



li.tab,
li.tabactief,
li.tabnieuw,
li.tablabel {
    position: relative;
    list-style: none;
    margin: 0px;
    margin-left: -1px;
    background: #eee;
    border: solid 1px silver;
    border-bottom: solid 1px #ccc;
    cursor: pointer;
    float: left;
    font-size: 12px;
    padding: 4px 9px 1px 9px;
    color: #303030;
    height: 18px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    z-index: 2;
    color: #666;
}

ul.double li.tab,
ul.double li.tabactief,
ul.double li.tabnieuw,
ul.double li.tablabel {
    height: 38px !important;
    line-height: 19px;
    padding: 3px 9px 1px 9px;
}


li.tablabel {
    border: solid 1px #fff;
    border-bottom: solid 1px silver;
    cursor: default;
    color: #666;
    background: #fff;
    padding-left: 1px !important;
    padding-right: 10px !important;
}

    li.tablabel:first-child {
        margin-left: 0 !important;
    }

li.tabnieuw {
    background: #9FBEDF;
    color: #fff;
    font-weight: bold;
    padding: 4px 9px 1px 9px;
    border-right-width: 2px;
    border-color: #5580AB;
    border-bottom-color: silver;
}

    li.tabnieuw:hover {
        background: #5580AB;
    }

.tabbox.full li.tab,
.tabbox.full li.tabactief {
    min-width: 90px;
    padding: 4px 4px 1px 4px;
}

html.mobile .tabbox.full li.tab,
html.mobile .tabbox.full li.tabactief {
    min-width: 50px;
}

.tabbox.mobile li.tab,
.tabbox.mobile li.tabactief {
    height: 30px;
    margin-left: 0px;
    padding: 4px 2px 1px 2px;
    min-width: 10px;
}

li.tabactief {
    background-color: #fff;
    padding: 4px 10px 1px 10px;
    z-index: 3;
    color: #000;
}

.tabbox #tab.nocontent li.tabactief {
    font-weight: bold;
}

li.tab:hover {
    background: #ECF2F8;
    background: #ddd;
    color: #000;
}

li.tab:first-child, li.tabactief:first-child {
    margin-left: 12px;
}

li.tabactief {
    background: #fff;
    border-color: #ccc;
    border-bottom: 0px;
    border-top: solid 2px #E6B800; /* gold*/
    border-top: solid 3px #ccc; /* zilver*/
    border-top: solid 2px #7EA4CE; /* blauw*/
    font-weight: normal;
    color: #202020;
    height: 18px;
}

#tab .actueel {
    position: absolute;
    background: #7EA4CE;
    top: -13px;
    padding: 1px 0px 1px 0px;
    text-align: center;
    left: 0px;
    width: 100%;
    color: #fff;
    line-height: 12px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

* html li.tab, * html li.tabactief /* hack voor ie */ {
    height: 20px;
    padding-top: 2px;
}

.tabicon {
    display: inline-block;
    margin-right: 2px;
    vertical-align: top;
}

    .tabicon img {
        height: 16px !important;
    }

.tablabel {
    display: block;
    margin-bottom: 3px;
    text-align: center;
}

.tabcount {
    position: relative;
    display: inline-block;
    font-weight: bold;
    color: #444;
    padding: 1px 1px;
    border-radius: 6px;
    min-width: 15px;
    margin-left: 1px;
    text-align: center;
}

.tabcontent {
    border-top: solid 1px #ccc;
    padding: 15px 20px 10px 20px;
    margin-left: 1px;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    min-width: 550px;
}


/* Row elements
-------------------------------------------------------------*/
.row {
    overflow: hidden;
    padding: 3px 0px;
    width: 100%;
    margin-bottom: 3px;
}

    .row span, .row img {
        display: block;
        float: left;
    }

    .row img {
        margin-right: 5px;
        cursor: pointer;
    }

    .row span img {
        margin-top: -2px;
        margin-right: 8px;
    }

    /* filter */
    .row .nopadding .formrow {
        padding: 0px !important;
    }

/* Form elements
-------------------------------------------------------------*/
.formrow {
    overflow: hidden;
    padding: 2px 0px;
    margin-bottom: 3px;
}
/* ie6 hack */
* html .formrow {
    width: 99%;
}

.bottomline {
    border-bottom: solid 1px #eee !important;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.topline {
    border-top: solid 1px #eee !important;
    padding-top: 5px;
    margin-top: 5px;
}

.topline10 {
    padding-top: 10px;
    margin-top: 10px;
    border-top: solid 1px silver;
}

.formrow.formheader {
    background: #eee url('/images/backgrounds/bg_adminkoptekstachtervlak.png') repeat-x;
    color: #333;
    padding: 0px 5px 3px 5px;
}

.formrow span {
    display: block;
    line-height: 22px;
    float: left;
}

.bold {
    font-weight: bold;
}

.small {
    font-size: 11px !important;
}


.formrow .label {
    width: 180px;
    margin-top: 2px;
}

    .formrow .label.autowidth {
        width: auto;
        margin-top: 2px;
    }


    .formrow .label.alert {
        position: absolute;
        left: 300px;
        font-size: 11px;
        color: #5580AB;
        background: #fff;
        margin-top: -1px;
        padding: 4px 8px;
        border: solid 1px silver;
        box-shadow: 1px 1px 3px #999;
        width: auto;
        font-size: 12px;
        line-height: 14px !important;
        display: none;
        font-weight: normal;
    }


.formrow.seperator {
    border-bottom: solid 1px silver;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.formrow .variable {
    width: auto;
    margin-right: 15px;
}

select, select:focus {
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    border: solid 1px silver;
    padding-left:5px;
}

    select:focus {
        background: #FFFFE5;
    }

input /* global for all browsers */ {
    font-family: Arial;
    font-size: 11px;
}

* html input {
    padding: 2px 5px;
}

    input[type=text],
    input[type=text]:focus,
    input[type=text]:hover,
    input[type=password],
    input[type=password]:focus,
    input[type=password]:hover
    input[type="date"],
    input[type="datetime"], input[type="datetime-local"], input[type="month"],
    input[type="week"], input[type="email"], input[type="number"],
    input[type="search"], input[type="tel"], input[type="time"],
    input[type="url"] {
        border: solid 1px silver;
        height: 21px;
        line-height: 21px;
        padding: 1px 5px !important;
        background: #fff;
        font-family: Arial;
        font-size: 12px;
        border-radius: 5px;
    }

        input[type=text]:hover,
        input[type=password]:hover {
            background: #fff;
            border: solid 1px gray;
        }

        input[type=text]:focus,
        input[type=password]:focus {
            border: solid 1px gray;
            background: #FFFAE8;
            box-shadow: inset 1px 1px 1px 0px #999;
        }

.formrow .text.unitright {
    text-align: right;
    padding-right: 20px;
    float: left
}

.formrow .labelunitright {
    color: #505050;
    margin-left: -17px;
}


.actionpanel {
    overflow: hidden;
    width: 100%;
    border-top: solid 1px #ddd;
    padding-top: 5px;
    margin-top: 9px;
}


    .actionpanel.popup {
        padding-top: 0px;
        margin-top: 2px;
        height: 35px;
        bottom: 0px;
        left: 0px;
        width: 100%;
    }

    .actionpanel span {
        display: block;
        float: left;
        padding: 5px 10px 5px 5px;
    }

        .actionpanel span a span {
            padding: 0px;
            padding-right: 4px;
        }

/* Buttons */

input.button, input.button.vervaltip,
input[type=button],
input[type=submit] {
    margin: 0px;
    border: solid 1px #A7C5E8;
    background: #DAE5F5;
    box-shadow: 0 0 0px 0 #555;
    color: #303030;
    font-size: 12px;
    padding: 0px 8px;
    height: 23px;
    font-weight: normal;
    width: auto;
    cursor: pointer;
    overflow: visible; /* hack for fix buttonwidth IE8 */
    border-radius: 6px;
    border-radius: 3px;
}



.pageactionpanel input.button {
    background: #eee;
    border: solid 1px silver;
}

input.button.vervaltip {
    background: #FFFAE5;
    border: solid 1px #FFF0B3;
    color: #606060;
}

    input.button.vervaltip:hover {
        color: #202020;
        background: #FFF9E5;
        border: solid 1px gold;
    }

input.button:hover {
    box-shadow: 0px 0px 3px #555;
}


/* upload dummie */
.uploadbutton {
    position: absolute;
    z-index: 5;
    opacity: 0;
    top: 2px;
    left: 2px;
}

.uploadlabel {
    border: solid 1px #ddd;
    background: #f5f5f5;
    margin-left: 10px;
    padding: 1px 5px;
    min-width: 300px;
    height: 20px;
}

input.button.browse {
    float: left;
}



input[type=button].disabled, input[type=submit].disabled, input.disabled,
input[type=button].disabled:hover, input[type=submit].disabled:hover, input.disabled:hover {
    background-color: #eee !important;
    color: Silver;
    cursor: default;
    border: solid 1px silver;
    box-shadow: none;
}

input.button.save,
.linkbutton.save {
    padding-left: 23px;
    background-image: url('/Content/Images/Buttons/save.png');
    background-position: 3px 3px;
    background-repeat: no-repeat;
}

    input.button.save:hover,
    .linkbutton.save:hover {
        padding-left: 23px;
        background: aliceblue url('/Content/Images/Buttons/save.png') no-repeat 3px 3px;
    }

input.button.delete {
    padding-left: 23px;
    background: #DAE5F5 url('/Content/Images/Buttons/delete.png') no-repeat 3px 3px;
}

    input.button.delete:hover {
        padding-left: 23px;
        background: aliceblue url('/Content/Images/Buttons/delete.png') no-repeat 3px 3px;
    }

input.button.add {
    padding-left: 23px;
    background: #DAE5F5 url('/Content/Images/Buttons/add.png') no-repeat 3px 3px;
}

    input.button.add:hover {
        padding-left: 23px;
        background: aliceblue url('/Content/Images/Buttons/add.png') no-repeat 3px 3px;
    }

input.button.edit {
    padding-left: 23px;
    background: #DAE5F5 url('/Content/Images/Buttons/edit.png') no-repeat 3px 3px;
}

    input.button.edit:hover {
        padding-left: 23px;
        background: aliceblue url('/Content/Images/Buttons/edit.png') no-repeat 3px 3px;
    }

input.button.info {
    padding-left: 23px;
    background: #DAE5F5 url('/Content/Images/Buttons/detail.png') no-repeat 3px 3px;
}

    input.button.info:hover {
        padding-left: 23px;
        background: aliceblue url('/Content/Images/Buttons/detail.png') no-repeat 3px 3px;
    }

input.button.werknemerkoppelen,
.linkbutton.werknemerkoppelen {
    padding-left: 23px;
    background: #DAE5F5 url('/Content/Images/Ico/werknemerskoppelen.png') no-repeat 3px 3px;
}

    input.button.werknemerkoppelen:hover,
    .linkbutton.werknemerkoppelen:hover {
        padding-left: 23px;
        background: aliceblue url('/Content/Images/Ico/werknemerskoppelen.png') no-repeat 3px 3px;
    }

input.button.next {
    padding-left: 10px;
    width: 16px;
    border: solid 0px silver;
    background: transparent url('/images/ico/buttons/next.png') no-repeat 0px 4px;
}

    input.button.next:hover {
        padding-left: 10px;
        width: 16px;
        border: solid 0px silver;
        background: transparent url('/images/ico/buttons/next_hover.png') no-repeat 0px 4px;
    }

input.button.previous {
    padding-left: 10px;
    width: 18px;
    border: solid 0px silver;
    background: transparent url('/images/ico/buttons/previous.png') no-repeat 3px 4px;
}

    input.button.previous:hover {
        padding-left: 10px;
        width: 18px;
        border: 0px;
        background: transparent url('/images/ico/buttons/previous_hover.png') no-repeat 3px 4px;
    }

input.button.go {
    padding-left: 23px;
    background: #DAE5F5 url('/Content/Images/Buttons/go.png') no-repeat 3px 3px;
}

    input.button.go:hover {
        padding-left: 23px;
        background: aliceblue url('/Content/Images/Buttons/go.png') no-repeat 3px 3px;
    }


input.backbutton,
input.backbutton:hover {
    background: transparent;
    border: 0px;
    text-decoration: underline;
    color: #404040;
    margin: 0px;
    padding-left: 0px;
    height: 23px;
    cursor: pointer;
}

    input.backbutton:hover {
        color: #0078c1;
    }

.iframeactionpanel {
    background: #eee;
    border: solid 1px silver;
    padding: 4px 5px 2px 5px;
    overflow: hidden;
    margin-bottom: 15px;
}

.formrow label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
    border: solid 0px silver;
}

input[type=checkbox] {
    border: solid 1px silver;
    width: 13px;
    height: 13px;
    padding: 0px;
    margin: 0px;
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
/* ie6 hack */
* html input[type=checkbox] {
    overflow: hidden;
}

textarea {
    width: 100%;
    font-family: Arial;
    font-size: 12px;
    line-height: 140%;
    border: solid 1px silver;
    resize: none;
    box-shadow: inset 1px 1px 3px #888;
    padding: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    textarea:focus {
        background: #FFFAE8;
    }


.linkbutton,
.linkbutton:visited {
    background: #eee url(/images/backgrounds/overlay.png) repeat-x;
    background: #eee url(/images/backgrounds/bg_contentbox.png);
    background-image: -ms-linear-gradient(top, #FCFCFC 0%, #F0F0F0 100%);
    background-image: -moz-linear-gradient(top, #FCFCFC 0%, #F0F0F0 100%);
    background-image: -o-linear-gradient(top, #FCFCFC 0%, #F0F0F0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCFCFC), color-stop(1, #F0F0F0));
    background-image: -webkit-linear-gradient(top, #FCFCFC 0%, #F0F0F0 100%);
    background-image: linear-gradient(to bottom, #FCFCFC 0%, #F0F0F0 100%);
    line-height: 130% !important;
    display: inline-block;
    padding: 5px 2px 5px 28px !important;
    color: #555 !important;
    text-decoration: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0 0 2px 0 #999;
    position: relative;
    cursor: pointer;
    font-weight: normal;
    font-size: 12px !important;
    text-decoration: none !important;
    margin-right: 5px;
    overflow: hidden;
    height: 15px;
}

    .linkbutton:hover {
        background-color: #fff;
        color: #303030;
        box-shadow: 0 0 2px 0 #222;
    }


        .linkbutton.disabled,
        .linkbutton:hover.disabled {
            opacity: 0.5;
            box-shadow: none;
            cursor: default;
            border: solid 1px #aaa;
        }

    .linkbutton img {
        position: absolute;
        left: 6px !important;
        top: 4px !important;
        border: 0px;
    }

    .linkbutton span {
        padding-right: 4px;
        padding: 0 4px 0 0;
    }

    .linkbutton.noimage {
        padding: 4px 7px 5px 7px;
        margin: 0px;
    }

    .linkbutton.notext {
        padding: 0px 7px 0px 7px;
        margin: 0px;
        width: 16px;
        height: 23px;
    }

    .linkbutton.active {
        background: #fff;
        box-shadow: 1px 1px 2px 0 #555 inset;
    }

        .linkbutton.active img {
            top: 5px;
            left: 7px;
        }



/* Header budget panel 
-----------------------------------------------------*/
.headerbudgetpanel {
    border: solid 1px lightblue;
    background: #E8F0FC;
    background: #D9E6F2 url('/Content/Images/Backgrounds/bg_actionpanel.png');
    height: 35px;
    line-height: 35px;
    position: relative;
    /* overflow:hidden; */
    border-radius: 5px;
}

* html .headerbudgetpanel /* hack voor ie6 */ {
    width: 816px;
}

.statusicon {
    position: absolute;
    top: 1px;
    left: 0px;
}

.headerbudgetpanel span {
    display: block;
    float: left;
    padding-right: 15px;
    width: auto;
}

    .headerbudgetpanel span.buttonpanel {
    }
    /* hack voor ie6 fix top and right outline */
    * html .headerbudgetpanel span.buttonpanel {
    }



/* Gridviews iframe / select
---------------------------------------------------------*/

.gridviewpanel {
    overflow: auto;
    margin-bottom: 15px;
    border: solid 1px #ddd;
    border-radius: 0px;
}

.gridviewtop {
    width: 100%;
    background: #777;
    color: #fff;
    height: 26px;
    line-height: 25px;
    font-weight: bold;
}

    .gridviewtop.light {
        width: 100%;
        background: #eee;
        color: #111;
        height: 28px;
        font-size: 14px;
        line-height: 28px;
        font-weight: normal;
    }


#werknemerspanel .gridviewtop {
    background: #777 !important;
    color: #eee !important;
    margin-left: -10px !important;
    padding-left: 15px !important;
    width: 100% !important;
    font-size: 15px;
    height: 39px;
    line-height: 36px;
    font-weight: normal;
}

.gridviewtoprow {
    padding-left: 6px;
}

.gridviewsearchpanel {
    width: 100%;
    background: url('/Content/Images/Backgrounds/bg_actionpanel.png');
    position: relative;
    height: 30px;
    border-bottom: solid 1px #ccc;
}

.gridviewheader {
    width: 100%;
    overflow: hidden;
    background: #eee url('/Content/Images/Backgrounds/bg_gridviewheader.png');
    white-space: nowrap;
    border-bottom: solid 1px silver;
}

.gridviewheaderrow {
    padding: 0px 5px;
    white-space: nowrap;
}

.gridviewheader span {
    padding: 2px 0px;
    display: block;
    float: left;
    font-family: Arial;
    font-size: 11px;
    line-height: 150%;
}

.gridviewrowspanel {
    overflow: auto;
    width: 100%;
    margin: 0px;
    padding: 0px;
    line-height: 100%;
    cursor: pointer !important;
    -webkit-overflow-scrolling: touch;
}

.gridviewrowpanel.clickable:hover {
    background: #FFFAE8 !important;
    cursor: pointer;
}


.gridviewrowpanel.categorie,
.gridviewrowpanel.categorie:hover {
    height: 35px;
    line-height: 35px;
    border: 0 !important;
}


select.multiselectpanel option {
    padding: 4px 5px;
    border-bottom: solid 1px #ddd;
}



.gridviewrowpanel.categorie span {
    height: 35px !important;
    line-height: 35px !important;
}

    .gridviewrowpanel.categorie span.budgetcode {
        height: auto !important;
        line-height: 16px !important;
    }


.gridviewrowpanel.categorie .gridviewrow span.categorieomschrijving {
    font-size: 14px !important;
}


.gridviewrowpanel .gridviewrow.tegel span {
    font-size: 12px;
}


.gridviewrow span img.icon {
    width: 12px !important;
    height: 12px !important;
    vertical-align: text-bottom;
}

    .gridviewrow span img.icon.hide {
        display: none;
    }

.gridviewrow.admin img {
    margin: 2px 0px;
    width: 12px;
    margin-right: 3px;
}

.gridviewrow.admin {
    border: solid 1px #d5d5d5;
    margin-bottom: 3px;
}

    .gridviewrow.admin:hover {
        background: #e1ebef;
        background: #EEF3F6;
    }

    .gridviewrow.admin img.notactive {
        opacity: 0.2;
        display: none;
    }


/*  ook in list.css */
.tegelpanel span.arrow {
    position: absolute;
    right: 9px;
    top: 3px;
    border: solid 1px silver;
    height: 14px !important;
    line-height: 14px !important;
    background: #eee;
    font-size: 10px;
    padding: 0px 3px;
    opacity: 0.25;
    border-radius: 4px;
}


/*  ook in list.css */
.tegelpanel:hover .arrow {
    opacity: 0.7;
}

/*  ook in list.css */
.tegelpanel .arrow.up {
    right: 34px;
}

/*  ook in list.css */
.tegelpanel .arrow:hover {
    background: #eee;
    border: solid 1px gray;
    box-shadow: 1px 1px 2px #555;
    opacity: 1;
}


.gridviewiframe {
    border: 0px;
    width: 100%;
    border: 0px;
    border: solid 0px silver;
    overflow: hidden;
}

.gridviewactionpanel {
    width: 100%;
    overflow: hidden;
    background: #D9E6F2 url('/Content/Images/Backgrounds/bg_actionpanel.png');
    margin: 0px;
    line-height: 100%;
    border-top: solid 1px silver;
}

    .gridviewactionpanel span {
        display: block;
        float: left;
        margin: 0px 4px;
        padding: 3px 0px;
    }

.gridviewfilterpanel {
    width: 100%;
    overflow: hidden;
    background: #E0E0E0;
    margin: 0px;
    height: 25px;
    line-height: 25px;
    border-top: solid 1px silver;
}

    .gridviewfilterpanel span {
        display: block;
        float: left;
        margin: 0px 2px;
    }


/* koppelbuttons */
.koppelbuttonpanel {
    margin-top: 50px;
    float: left;
    width: 60px;
}

input.koppelbutton, input.koppelbutton:hover {
    width: 30px;
    margin: 0px 15px 5px 15px;
}

iframe {
    -webkit-overflow-scrolling: touch; /* ipad scrolling */
}


/* POPUP CALENDAR styles for table 
-----------------------------------------------------------------*/

td.cel, td.celover, td.celWeekend, td.weekday, td.kopWeek, td.kop {
    border: solid 1px #eee;
    cursor: pointer;
    text-align: center;
}

    td.cel a, td.celWeekend a {
        color: #004080;
    }

td.celover {
    border: solid 1px #004080;
    background: #fff;
}

    td.celover a {
        font-weight: bold;
        color: #303030;
    }

td.weekday, td.kopWeek {
    cursor: default;
    color: gray;
    border: 0px;
    font-size: 11px;
}

td.kopWeek {
    text-transform: lowercase;
}

td.celactive {
    border: solid 1px #0078c1;
    cursor: pointer;
    background: gold;
}

    td.celactive a {
        font-weight: bold;
        color: #303030;
    }

td.blank {
    color: #eee;
    border: solid 1px #fefefe;
    background: #eee;
}

    td.blank a {
        color: Silver;
    }

td.kop {
    border: 0px;
    text-transform: lowercase;
    color: #303030;
    font-weight: bold;
}

td.kopmaand {
    vertical-align: top;
    background: #eee;
    border: solid 1px silver;
}

.clickvervaltip {
    cursor: hand;
    cursor: pointer;
    color: #606060;
}

    .clickvervaltip:hover {
        color: #101010;
    }

.vervaldatatip:hover {
    opacity: 0.85;
}


.inemailnotification {
    color: red;
}
/* groepen | e-mailnotificatie */

#speciallabelverlof,
#speciallabelverzuim {
    display: none;
    border: solid 1px #808080;
    background: #fff;
    color: red;
    padding: 2px 4px;
    border-radius: 5px;
    position: absolute;
    top: 3px;
    right: 0px;
    font-size: 10px;
}

/* instellingen | verzuimmodule */
.verzuimmoduleinfobox {
    padding: 5px 85px 5px 15px;
}

    .verzuimmoduleinfobox p,
    .verzuimmoduleinfobox ul li {
        line-height: 150%;
        font-size: 12px;
    }

    .verzuimmoduleinfobox ul li {
        line-height: 180%;
    }

.verzuimopenstaandrecord {
    display: block;
    background: #fff;
    margin: 1px;
    padding: 0px;
}

    .verzuimopenstaandrecord img {
        border: 0px;
    }

.elementdisabled {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 5;
    background: #FFF;
    opacity: 0.7;
}


.opmerking {
    border-bottom: solid 1px #DAE6F1;
    background: #ECF2F8 url('/Content/Images/Ico/info16.gif') no-repeat 9px 8px;
    color: #111;
    line-height: 130%;
    padding: 8px 10px 6px 35px;
    width: auto;
}

p.opmerking {
    line-height: 150%;
}

.buttonurenvervallen {
    position: absolute;
    right: 10px;
    margin: auto;
    cursor: pointer;
    width: 230px;
    border: solid 1px #ddd;
    box-shadow: 1px 1px 4px #aaa;
    background: #f5f5f5;
    padding: 3px 5px;
    border-radius: 5px;
    color: #666;
}


    .buttonurenvervallen:hover {
        background: #fff;
    }

.dashboardurenvervallen {
    margin: auto;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 8px;
    border: solid 1px #ddd;
    overflow: hidden;
    color: #404040;
    box-shadow: 0px 0px 6px #555;
}

    .dashboardurenvervallen b {
        color: #404040;
        font-weight: bolder;
    }

    .dashboardurenvervallen span {
        display: block;
        float: left;
        line-height: 150%;
    }

        .dashboardurenvervallen span.vervalrij {
            display: block;
            padding: 3px 0px;
        }


/*

@media (max-width:320px)
{
	.container
	{
		width:320px; 
	}
}


@media (max-width:320px) and (max-width:768px)
{
	.container
	{
		width:768px; 
	}
}
@media (min-width:1024px)
{
	.container
	{
		width:1004px;
	}
}
*/


.categorybox {
    border: solid 1px silver;
    padding: 5px 10px;
    background: #fff;
    position: relative;
}

.backlink {
    display: block;
    margin-top: 4px;
    margin-right: 6px;
    float: left;
    text-decoration: none;
}

.breadrumbpanel {
    background: #fff;
    padding: 10px 8px 4px 8px;
    overflow: hidden;
    border-bottom: solid 1px #ddd;
    background: #f5f5f5;
    /* hieronder weghalen voor andere layout  
	position:absolute;
	width:280px;
	white-space:nowrap;
	background:#eee;
	border:solid 1px #ddd;
	z-index:99;*/
}

.verzoekinfostatusicon {
    position: relative;
    font-weight: normal;
    color: #555;
}

    .verzoekinfostatusicon img {
        position: relative;
        margin-right: 5px;
        margin-left: 5px;
        top: 4px;
    }


#totalpanel {
    margin-top: 0px;
    border: solid 1px #ddd;
    background: #f5f5f5;
    padding: 4px 4px;
    margin-bottom: 15px;
}

    #totalpanel .categorieitembutton {
        cursor: pointer;
        border: outset 1px #eee;
        padding: 0px 6px 4px 6px;
        display: inline-block;
        margin-right: 0px;
        width: auto;
        text-align: center;
    }

    #totalpanel .categorieitembuttontw {
        cursor: pointer;
        border: outset 1px #eee;
        padding: 0px 6px 4px 6px;
        display: inline-block;
        margin-right: 0px;
        width: auto;
        text-align: center;
    }

        #totalpanel .categorieitembutton:hover {
            background: #eee;
        }

        #totalpanel .categorieitembuttontw:hover {
            background: #eee;
        }

        #totalpanel .categorieitembutton.active {
            background: #ddd;
            border: inset 1px #ddd;
        }

        #totalpanel .categorieitembuttontw.active {
            background: #ddd;
            border: inset 1px #ddd;
        }


/* staat ook in list.css */
span.budgetcode,
.formrow .label.autowidth.budgetcode {
    padding: 0px !important;
    text-align: center !important;
    margin: 8px 0px 0px 4px !important;
    display: inline-block !important;
    line-height: 15px !important;
    font-size: 10px !important;
    border-radius: 5px !important;
    width: 40px;
    height: auto !important;
    white-space: nowrap;
    overflow: hidden;
    color: #FFF !important;
}

    span.budgetcode.small {
        width: 12px !important;
        border: solid 1px #ddd;
        padding: 0 !important;
        line-height: 12px !important;
        margin-top: 5px !important;
        height: 12px !important;
    }

.tegelrij span.budgetcode {
    margin-left: 5px !important;
    margin-right: 8px !important;
}

.errorpanel {
    margin-bottom: 10px;
    border: solid 1px red;
    padding: 6px;
    background: #FFE5E5;
    color: red;
    display: none;
}



/* Tegelpanel 
===============================================================	*/

.tegelpanel {
    border: solid 1px #e1e1e1;
    margin: 8px 0px;
    padding: 5px 7px;
    background: #f8f8f8;
    position: relative;
}

a.tegelpanel {
    text-decoration: none;
}


.tegelpanel.current {
    border-color: #5580AB;
    background: #fff;
}


.tegelpanel:hover {
    box-shadow: 1px 1px 1px #bbb;
    border: solid 1px #CEDBE4;
    cursor: pointer;
    background: #f4f4f4;
    background: #EEF3F6;
}

.tegelpanel.info {
    padding-left: 15px;
    font-size: 12px !important;
}

    .tegelpanel.info ul {
        margin-left: 40px;
        margin-bottom: 15px;
        line-height: 150%;
    }

.tegelpanel.noclick:hover,
.tegelpanel.noclick:hover h3 {
    box-shadow: none;
    cursor: default;
    background: #f8f8f8;
    text-decoration: none !important;
}

.tegelpanel.nopointer {
    background: #f7f7f7
}

    .tegelpanel.nopointer:hover {
        border: solid 1px #ddd;
        margin: 8px 0px;
        padding: 5px 7px;
        background: #f7f7f7;
        box-shadow: none;
        pointer: default;
    }

.tegelpanel.tegelrij {
    margin: 2px 0px 6px 0px !important;
    padding: 0px 8px;
    height: 34px;
    position: relative;
    background: #fff;
    white-space: nowrap;
}

    .tegelpanel.tegelrij.parent {
        height: auto;
        white-space: normal !important;
        padding-bottom: 5px !important;
    }

    .tegelpanel.tegelrij.child {
        height: auto;
        margin: 0 !important;
    }

    .tegelpanel.tegelrij.hover:hover {
        background: #e1eff7;
    }

    .tegelpanel.tegelrij .item-inline {
        display: inline-block;
        line-height: 1 !important;
        border: solid 1px #ddd;
        border-radius: 4px;
        padding: 3px 7px;
        margin-top: 6px;
        background: #eee;
        margin-right: 5px;
    }

        .tegelpanel.tegelrij .item-inline span {
            line-height: 1;
            color: #333;
        }


    .tegelpanel.tegelrij span {
        display: inline-block;
        line-height: 34px;
        vertical-align: top;
    }

.tegelrij .gray {
    color: #777;
}

.tegelpanel.tegelrij .linkbutton {
    position: absolute;
    top: 5px;
}

.tegelpanel .tegelrij {
    padding: 0px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
}

    .tegelpanel .tegelrij .block {
        display: inline-block;
        padding: 0px 7px;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
    }

        .tegelpanel .tegelrij .block:first-child {
            padding-left: 0;
        }

        .tegelpanel .tegelrij .block:last-child {
            padding-right: 0;
        }



        .tegelpanel .tegelrij .block.seperator {
            border-right: solid 1px #ddd;
        }

        .tegelpanel .tegelrij .block h3 {
            line-height: 11px !important;
            height: 11px;
            font-size: 10px !important;
            text-decoration: none;
            margin: 0 0 8px 0 !important;
        }

        .tegelpanel .tegelrij .block p {
            line-height: 1;
            margin: 0;
            padding: 0;
        }

            .tegelpanel .tegelrij .block p.disabled {
                color: #aaa;
            }

            .tegelpanel .tegelrij .block p.attentie {
                color: #CC3300;
            }

.tegelpanel .iconpanel {
    margin-right: 5px;
}




.tegelpanel .icon.normal {
    height: 14px !important;
    margin-top: 8px !important;
    margin-left: 5px;
}

    .tegelpanel .icon.normal.disabled {
        opacity: 0.2;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
        filter: alpha(opacity=20);
    }



.tegelpanel.icon {
    padding-left: 65px;
    padding-top: 4px;
    height: 77px;
    position: relative;
}

.tegelpanel.no-icon {
    width: 45% !important;
    padding-top: 4px;
    position: relative;
}

.tegelpanel.thirty-percent {
    float: left;
    width: 28%;
    margin-right: 10px;
    margin-top: 0;
}

.tegelpanel.fifty-percent {
    float: left;
    width: 38%;
    margin-right: 10px;
    margin-top: 0;
}

.tegelpanel.icon img {
    position: absolute;
    top: 12px;
    left: 16px;
}

.tegelpanel h3 {
    color: #555 !important;
    margin-bottom: 6px !important;
    color: #5580AB !important;
    display: inline-block;
    font-weight: normal;
    font-size: 17px !important;
    line-height: 140%;
}

    .tegelpanel h3:hover,
    .tegelpanel:hover h3 {
        color: #555 !important;
        color: #5580AB !important;
        text-decoration: underline;
    }

.tegelpanel.icon span {
    line-height: 17px;
    margin-right: 20px;
    display: block;
    color: #303030;
}



.tegelpanel.tab.small {
    width: 105px;
    height: 75px;
    text-align: center !important;
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 6px;
}

    .tegelpanel.tab.small img {
        display: block;
        width: 28px;
        height: 28px;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .tegelpanel.tab.small span {
        font-size: 13px !important;
        color: #5580AB;
        float: none;
    }

    .tegelpanel.tab.small:hover span {
        text-decoration: underline;
    }

    .tegelpanel.tab.small sup {
        position: absolute;
        top: 4px;
        right: 4px;
        font-size: 11px !important;
        color: #555;
        background: transparent;
        min-width: 16px;
        height: 16px;
        padding: 0px 3px;
        line-height: 16px;
    }

        .tegelpanel.tab.small sup.zero {
            color: #ccc;
        }

.werknemerdashboard.icon {
    padding: 0px !important;
    height: 40px !important;
    background: #eee;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    border-top: solid 1px #ddd;
}

    .werknemerdashboard.icon .tegelpanel.tab.small {
        width: auto;
        min-width: 51px;
        overflow: hidden;
        font-size: 0 !important;
        height: 40px;
        margin: 0;
        margin-right: -4px;
        padding: 0px;
        display: inline-block;
        background: #eee;
        position: relative;
        border-top-width: 0;
    }

        .werknemerdashboard.icon .tegelpanel.tab.small:hover {
            background: #EEF3F6;
            box-shadow: none;
        }

            .werknemerdashboard.icon .tegelpanel.tab.small:hover img {
                -webkit-filter: grayscale(25%);
                filter: grayscale(25%);
            }

        .werknemerdashboard.icon .tegelpanel.tab.small img {
            width: 16px;
            height: 16px;
            margin-top: 5px;
            margin-bottom: 4px;
            -webkit-filter: grayscale(10%);
            filter: grayscale(10%);
        }

        .werknemerdashboard.icon .tegelpanel.tab.small span {
            font-size: 11px !important;
            color: #777;
            display: block;
            padding: 0px 8px;
            text-align: center;
            text-shadow: 1px 1px 1px #fff;
        }

        .werknemerdashboard.icon .tegelpanel.tab.small:hover span,
        .werknemerdashboard.icon .tegelpanel.tab.small.active span {
            display: block !important;
            text-decoration: none;
            color: #5580AB;
        }

        .werknemerdashboard.icon .tegelpanel.tab.small.active,
        .werknemerdashboard.icon .tegelpanel.tab.small.active:hover {
            background: #fff !important;
            border: solid 1px #fff;
            border-left: solid 1px #ddd;
            border-right: solid 1px #ddd;
            z-index: 10;
            box-shadow: none;
        }

            .werknemerdashboard.icon .tegelpanel.tab.small.active img {
                -webkit-filter: grayscale(0%);
                filter: grayscale(0%);
            }

.tegelpanelnextbutton {
    border-left: solid 1px #ddd;
    padding-left: 10px;
    float: right;
    margin-top: 4px;
    font-size: 16px;
    font-weight: normal;
    color: #ccc;
    text-decoration: none;
    height: 100%;
    line-height: 100%;
}

.tegelrij .tegelpanelnextbutton {
    margin-top: 0px;
    width: 20px;
    position: absolute;
    height: 35px;
    line-height: 35px;
    right: 0px;
}

.separator {
    width: 12px;
}

.tegelrij:hover .tegelpanelnextbutton {
    background: #eee;
    color: #999;
}

.tegelpanelwijzigbutton {
    color: #555;
}

.tegelpanel .propertiepanel span {
    color: #555;
}

.tegelpanel .tegeldelete,
.tegelpanel:hover .tegelpanel .tegeldelete {
    opacity: 0.5;
    position: absolute;
    top: -8px !important;
    right: -8px !important;
    display: none;
}

.tegelpanel:hover .tegeldelete,
.tegelpanel:hover .tegelpanel:hover .tegeldelete {
    display: block;
}

.tegelpanel .tegeldelete:hover {
    opacity: 1;
}

.tegelrij.child.hover .tegeldelete {
    top: 6px !important;
    right: 10px !important;
}


.tegeldelete.disabled,
.tegeldelete.disabled:hover {
    opacity: 0.25;
}


.tegelpanel .categorypanel {
    min-height: 45px;
    overflow: hidden;
}


.tegelpanel .isdefault {
    background: gold;
    color: #000;
    padding: 2px 6px;
    font-size: 10px;
    position: absolute;
    top: 18px;
    left: -35px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.isdefault.settings {
    position: absolute;
    background: gold;
    top: 18px;
    right: 25px;
    color: #333;
    font-size: 14px;
    line-height: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
}

.isdefaultregio {
    padding: 0px !important;
    text-align: center !important;
    margin: 8px 10px 0px 4px !important;
    display: inline-block !important;
    line-height: 15px !important;
    font-size: 10px !important;
    border-radius: 95px !important;
    width: 60px;
    height: auto !important;
    white-space: nowrap;
    overflow: hidden;
    color: #555 !important;
    background: gold;
}



.verlofcode {
    margin-right: 6px;
    margin-top: 0px;
    overflow: hidden;
    font-size: 10px;
    font-weight: bold;
    display: block;
    padding: 0px;
    line-height: 1;
    float: left;
    color: #fff;
    width: 13px !important;
    height: 11px;
    border-radius: 10px;
    border: solid 1px #fff !important;
}


.timebutton {
    display: block;
    margin-top: -3px;
    padding: 3px 7px;
    cursor: pointer;
    border: solid 1px #ccc;
    background: #f7f7f7;
    font-size: 10px;
}

    .timebutton:hover {
        background: #eee;
        border: solid 1px #bbb;
        box-shadow: 1px 1px 5px #555;
    }

/* pageactionpanel */

.pageactionpanel {
    /*margin-top:-10px;*/
    background: #eee;
    border-bottom: solid 1px #ddd;
    padding: 6px 0px 7px 10px;
    height: 23px;
    overflow: hidden;
}

    .pageactionpanel.popup {
        margin-top: 0;
    }

    .pageactionpanel.werknemers {
        margin-top: 0;
    }

    .pageactionpanel span {
        float: left;
        display: block;
        margin-right: 3px;
    }

.pagesearch.button {
    height: 21px;
    position: absolute;
    right: 3px;
    top: 1px;
    width: 20px;
    border-radius: 0px;
    background: transparent;
    border: 0px;
}




.title_tooltip {
    position: absolute;
    z-index: 999;
    border: solid 1px #ddd;
    background: lightyellow;
    display: none;
    top: 0px;
    left: 0px;
    padding: 2px 5px 3px 5px;
    box-shadow: 1px 1px 3px 0 #555;
    max-width: 310px;
    color: #444;
    line-height: 140%;
}


span.informatie_icon {
    border: solid 1px #bbb;
    display: inline-block;
    float: none !important;
    margin-left: 5px;
    background: #aaa;
    color: #eee;
    font-weight: bold;
    line-height: 1;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 5px;
}

    span.informatie_icon:hover {
        background: #555;
        cursor: default;
    }

.selectedwerknemerpanel {
    border: solid 1px #ddd;
    padding: 10px 15px 10px 35px;
    background: #f5f5f5;
    position: relative;
    font-weight: bold !important;
}

html.mobile .selectedwerknemerpanel {
    background: #999;
    color: #fff;
    padding-left: 15px;
    border: 0;
}

    html.mobile .selectedwerknemerpanel img {
        display: none;
    }



/* checkbox slidebutton 
========================================================*/

.slider-button-placeholder {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 23px;
    line-height: 1;
    padding: 0px;
    margin: 0px;
    overflow: visible;
    vertical-align: top;
}

.slider-button-frame,
.slider-button-frame.on {
    padding: 0px !important;
    top: 2px;
    position: absolute;
    border: solid 1px #ddd;
    box-shadow: 2px 2px 3px #777 inset;
    border-radius: 10px;
    background: #B37272;
    width: 38px;
    height: 18px;
    display: inline-block;
    overflow: visible;
}

    .slider-button-frame.on {
        background: #00B300;
        border: solid 1px #ddd;
    }

    .slider-button-frame.disabled {
        opacity: 0.5;
    }


    .slider-button-frame input {
        display: none;
    }

    .slider-button-frame .slider-button {
        position: absolute;
        width: 14px;
        color: #fff;
        border-radius: 8px;
        background: #eee;
        left: 1px;
        top: 1px;
        height: 14px;
        border: solid 1px #ccc;
    }

    .slider-button-frame.on .slider-button {
        right: 1px;
        left: auto;
    }



.fullopacity {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

.relative {
    position: relative;
}

.align-right {
    text-align: right;
}

.helptekst {
    padding: 0px 20px 10px 25px;
    font-size: 13px;
}

.infobox {
    border: solid 1px #98B3CD;
    background: #ECF0F3;
    margin: 15px;
    margin-bottom: 0px;
    padding: 10px 15px;
    font-family: arial;
    font-size: 13px;
    position: relative;
    line-height: 24px !important;
}

.infoclosebutton {
    position: absolute;
    top: 0px;
    right: 0px;
    text-decoration: none;
    padding: 8px 10px;
    border-left: solid 1px #98B3CD;
    border-bottom: solid 1px #98B3CD;
}

    .infoclosebutton:hover {
        text-decoration: none;
        background: #5580AB;
        color: #eee;
    }

.infoverberglink {
    position: absolute;
    right: 70px;
    top: 6px;
    padding: 3px;
    color: #999;
}

    .infoverberglink:hover {
        text-decoration: underline;
    }

.pageactionpanel span.infoactionbutton {
    display: none;
}

/* Filter klanten*/
.filtermodulespanel {
    margin: 10px 0px;
    position: absolute;
    right: 20px;
    top: 15px;
}

    .filtermodulespanel span {
        display: inline-block;
        margin-right: 15px;
    }

        .filtermodulespanel span img {
            vertical-align: middle;
        }

.ui-widget-content .ui-icon {
    background-image: url("../../Content/themes/base/images/ui-icons_222222_256x240.png") !important;
}

.ui-widget-header .ui-icon {
    background-image: url("../../Content/themes/base/images/ui-icons_222222_256x240.png") !important;
}

/* LEG */

html.mobile input[type=text],
html.mobile input[type=text]:focus,
html.mobile input[type=text]:hover,
html.mobile input[type=password],
html.mobile input[type=password]:focus,
html.mobile input[type=password]:hover
html.mobile input[type="date"],
html.mobile input[type="datetime"],
html.mobile input[type="datetime-local"],
html.mobile input[type="month"],
html.mobile input[type="week"],
html.mobile input[type="email"],
html.mobile input[type="number"],
html.mobile input[type="search"],
html.mobile input[type="tel"],
html.mobile input[type="time"],
html.mobile input[type="url"] {
    border: solid 1px silver;
    height: 30px;
    line-height: 30px;
    padding: 1px 5px !important;
    background: #fff;
    font-family: Arial;
    font-size: 12px;
    border-radius: 5px;
    margin-bottom: 5px;
}

html.mobile .datepickeimage {
    vertical-align: bottom;
    border: solid 1px silver;
    background-color: #ddd;
    padding: 8px 6px 8px 6px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    cursor: pointer;
    cursor: hand;
    position: relative;
    z-index: 0;
    display: inline-block !important;
    float: none !important;
    margin-bottom: 5px; /* LeGL */
    margin-top: 0px;
}

    html.mobile .datepickeimage img {
        /*
        width: 20px;
        height: 25px;
        */
    }

html.mobile img.datepickeimage {
    /*width: 20px;
    height: 20px;*/
}

html.mobile .linkbutton img {
    position: absolute;
    left: 6px !important;
    top: 6px !important; /* was 6 LeGL */
    border: 0px;
}



html.mobile .ov.tabbox ul {
    height: 39px;
}


html.mobile .ov.li.tabactief {
    height: 33px;
}

html.mobile li.tab,
html.mobile li.tabactief,
html.mobile li.tabnieuw,
html.mobile li.tablabe {
    height: 33px;
}

html.mobile h1 {
    margin: 0px;
    padding-top: 12px;
    margin-left: 23px;
    margin-bottom: 0px;
    height: 32px;
}

html.mobile select,
html.mobile select:focus {
    height: 34px;
}

.selectroosterjaaropbouw {
    display: none;
    float: right;
    margin-right: 20px;
}


html.mobile .checkboxmobile {
    /*zoom: 1.3; */
    transform: scale(1.3);
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transform: scale(1.3);
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}

html.mobile input[type='checkbox']:checked {
}

html.mobile .aantaliframesmobile {
    font-size: 14px;
}


.userpanel {
    width: 220px;
}

html.mobile .werknemerdashboard.icon {
    height: 50px !important;
}

html.mobile .tegelpanel.tab.small {
    height: 50px !important;
}

html.mobile .pageactionpanel {
    /*margin-top:-10px;*/
    background: #eee;
    border-bottom: solid 1px #ddd;
    padding: 6px 0px 7px 10px;
    height: 33px;
    overflow: hidden;
}


html.mobile .linkbutton,
html.mobile .linkbutton:visited {
    background: #eee url(/images/backgrounds/overlay.png) repeat-x;
    background: #eee url(/images/backgrounds/bg_contentbox.png);
    background-image: -ms-linear-gradient(top, #FCFCFC 0%, #F0F0F0 100%);
    background-image: -moz-linear-gradient(top, #FCFCFC 0%, #F0F0F0 100%);
    background-image: -o-linear-gradient(top, #FCFCFC 0%, #F0F0F0 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCFCFC), color-stop(1, #F0F0F0));
    background-image: -webkit-linear-gradient(top, #FCFCFC 0%, #F0F0F0 100%);
    background-image: linear-gradient(to bottom, #FCFCFC 0%, #F0F0F0 100%);
    line-height: 130% !important;
    display: inline-block;
    padding: 5px 2px 5px 28px !important;
    color: #555 !important;
    text-decoration: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0 0 2px 0 #999;
    position: relative;
    cursor: pointer;
    font-weight: normal;
    font-size: 12px !important;
    text-decoration: none !important;
    margin-right: 5px;
    overflow: hidden;
    height: 22px; /* Was 25 LeGL*/
}

/* LeGL */
    html.mobile .linkbutton span {
        /*padding-right: 4px;
        */
        /*padding-top:2px;*/
    }

html.mobile .userpanel .row span.label {
    margin-right: 3px;
    color: #777;
    width: 100px;
    line-height: 24px;
    font-size: 11px;
}

html.mobile span.budgetcode,
html.mobile .formrow .label.autowidth.budgetcode {
    padding: 0px 0px 0px 0px !important;
    text-align: center !important;
    margin: 8px 0px 0px 4px !important;
    display: inline-block !important;
    line-height: 15px !important;
    font-size: 10px !important;
    border-radius: 5px !important;
    width: 52px;
    height: auto !important;
    white-space: nowrap;
    overflow: hidden;
    color: #FFF !important;
}

html.mobile.android .header {
    height: 56px !important;
}

html.android .linkbutton,
html.android .linkbutton:visited {
    font-weight: normal;
    font-size: 12px !important;
    text-decoration: none !important;
    margin-right: 5px;
    overflow: hidden;
    height: 28px; /* Was 25 LeGL*/
}

html.android .linkbutton span {
    padding: 2px 5px 1px 1px;
}

html.android select,
html.android select:focus {
    height: 37px !important;
}

html.android .pageactionpanel {
    height: 40px;
}

html.android .linkbutton img {
    top: 8px !important; /* was 6 LeGL */
}

html.mobile.android .footer {
    bottom: 40px;
}
/*    

	START FORM STYLES	
	==================================================================

*/
form
{
	position:relative;
}
form.hiddenform
{
	position:absolute;
	height:0;
	visibility:hidden;
	top:0;
	left:0;
	width:0;
}

.errormessagespanel
{
	position:relative;
	border:solid 1px red;
	background:#FFCCCC;
	margin:0px 15px;
	box-sizing:border-box;
	padding:10px 12px;
	color:darkred !important;
	display:none;
}
.errormessagespanel ul
{
	margin:5px 0px 5px 15px;
	padding:0;
}
.errormessagespanel ul li
{
	margin:0;
	padding:0;
	margin-bottom:3px;
	font-size:14px;
}


a.closemelding
{
	position:absolute;
	top:0px;
	right:0px;
	cursor:pointer;
	color:#FFCCCC;
	background:darkred;
	text-decoration:none;
	padding:2px 5px;
	text-transform:lowercase;
}

a.closemelding:hover
{
	color:#fff;
}


.formpanel
{
    padding:8px 5px;
    margin:2px;
    border:solid 1px #eee;
    background:transparent;
    margin:2px auto;
    box-sizing:border-box;
}


.loadingimage
{
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-10px;
	margin-left:-30px;
	z-index:100;
}

/* GABY
input[type="text"], input[type="password"], input[type="date"],
input[type="datetime"], input[type="datetime-local"], input[type="month"],
input[type="week"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="time"],
input[type="url"]
{
	display:block;
    padding:10px 12px;
    width:100%;
    border:solid 1px #eee;
    box-sizing:border-box;
    background:#f5f5f5;
    border-top:solid 1px #fff;
    border-left:solid 1px #fff;
	border-bottom:solid 1px #1f84d9;
}



input.dynamic
{
	display:inline-block;
	width:100px;
}

input[type="text"], input[type="password"], input[type="date"],
input[type="datetime"], input[type="datetime-local"], input[type="month"],
input[type="week"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="time"],
input[type="url"], textarea
    { font-size: 16px; }

GABY
*/

input:focus
{
    
	background:#f5f5f5;
}
input:hover
{
    background:#fff;
	border-bottom:solid 1px #999;
}



.errorfield,
.errorfield:focus
{
	border:solid 1px red !important;
	background:#FFCCCC !important;
	color:darkred !important;
	-webkit-box-shadow: 0 0 0 1000px #FFCCCC inset !important;
	box-shadow: 0 0 0 1000px #FFCCCC inset !important;

}

input.numeriek
{
	text-align:right;
}


input.readonly
{
	border:0 !important;
	background:transparent;
}

input.validfield
{
	border:solid 1px green !important;
	background:#C6ECC6 !important;
	-webkit-box-shadow: 0 0 0 1000px #C6ECC6 inset !important;
	color:green !important;
}

input.datum
{
	width:140px !important;
	max-width:none !important;
}

input:focus
{
    background:#fff;
}

img.ui-datepicker-trigger
{
	position:absolute;
	right:22px;
	top:19px;
	height:20px;
	cursor:pointer;
}


.linkbutton_form
{
    display:block;
    border:solid 1px #ddd;
    background:#777;
    color:#eee;
    padding:10px 12px;
    font-size:16px;
    text-decoration:none;
    width:100%;
    box-sizing:border-box;
    text-shadow:none !important;
	cursor:pointer;
	text-align:center;
	height:25px !important;
}



	.linkbutton_form:hover
	{
		color:#fff;
	}


.linkbutton_form img
{
	width:16px;
}


    .linkbutton_form.green
    {
        background:#339900;
        color:#eee !important;
    }
     .linkbutton_form.green:hover
    {
        background:#2B8000;
        color:#fff !important;
    }

    .linkbutton_form.blue
    {
        background:#1f84d9;
        color:#eee !important;
    }
     .linkbutton_form.blue:hover
    {
        background:#1C79C4;
        color:#fff !important;
    }
    .linkbutton_form.orange
    {
        background:#ff6600;
        color:#eee!important;
    }
     .linkbutton.orange:hover
    {
        background:#ff6633;
        color:#fff !important;
    }
    .linkbutton_form.red
    {
        background:red;
        color:#eee!important;
    }
     .linkbutton.red:hover
    {
        background:#555;
        color:#fff !important;
    }
	
	 .linkbutton_form.disabled,
	 .linkbutton_form.disabled:hover
	 {
		 background:#ddd !important;
		 color:#bbb !important;
		 border:solid 1px #ccc;
	 }

.formrow.inline
{
	padding-top:10px !important;
	padding-bottom:10px; !important
}

.formrow span.label
{
	color:#555;
}

small.nextline
{
	display:block;
	margin-top:5px;
}

.formrow.inline span.label
{
	display:inline-block;
	margin:0;
	margin-right:10px;
	max-width:45% !important;
	padding:10px 0px;
	box-sizing:border-box;
}
.formrow.inline span.label.big
{
	max-width:60% !important;

}

.formrow.inline input
{
	display:inline-block !important;
	float:right !important;
	max-width:40%;
	box-sizing:border-box;
}

.formrow.inline h3,
.formrow.inline span,
.formrow.inline a.linkbutton
{
	display:inline-block;
	width:auto !important;
}
.formrow.inline h3
{
	margin-right:15px;
}
.linkbutton.rightalign
{
	display:block;
	float:right;
}


span.memofield
{
	border:solid 1px #ddd;
	border-top:0;
	border-left:0;
	border-bottom:solid 1px #1f84d9;
	width:100%; !important;
	min-width:100% !important;
	display:block !important;
	min-height:40px;
	padding:8px 10px;
	background:#fff;
	color:#555;
	box-sizing:border-box;
	line-height:22px;
}
span.memofield:focus
{
	
	background:#f5f5f5;
	color:#333;
	border-bottom:solid 1px #1f84d9;
}


/* selectbox feestdagentypes*/

.selectbox
{
	border:solid 1px #ddd;
	padding:6px 10px;
	display:inline-block;
	width:100%;
	box-sizing:border-box;
	margin-top:10px;
	font-size:15px;
	background:#f5f5f5;
	color:#555;
	cursor:pointer;
	position:relative;
	box-shadow:1px 1px 1px #ccc; 
}
.selectbox:hover
{
	background:#fff;
}

.pageactionpanel .selectbox
{
	width:220px;
}

.selectbox .itemmore
{
	position:absolute;
	right:7px;
	top:5px;
	font-size:12px;
	margin-top:2px;
	font-weight:bold;

}

ul.selectpanel
{
	display:none;
	position:absolute;
	top:30px;
	left:0;
	width:250px;
	border:solid 1px #ddd;
	background:#f5f5f5;
	list-style:none;
	margin:0;
	padding:3px 5px;
	z-index:100;
	box-shadow:0 0 5px #222;
}


ul.selectpanel li
{
	padding:8px 8px;
	cursor:pointer;
	font-size:15px;
	margin:3px;
	color:#555;
	border:solid 1px #ddd;
}
ul.selectpanel li img
{
	vertical-align:middle;
	display:inline-block;
	margin-right:5px;
}

ul.selectpanel li:hover
{
	background:#fff;
	color:#333;
}

/* checkbox slidebutton */

.formrow.check
{
	text-align:left !important;
}
.formrow.check span
{
	font-size:15px;
}

.slider-button-placeholder
{
	position:relative;
	display:inline-block;
	width:45px;
	height:24px;
	line-height:1;
	padding:0px;
	margin:0px;
	overflow:hidden;
	vertical-align:top;

}


.slider-button-frame,
.slider-button-frame.on {
    padding: 0px !important;
    top: 0px;
    position: absolute;
    border: solid 1px #ddd;
    box-shadow: 2px 2px 7px #333 inset;
    border-radius: 15px;
    background: #B37272;
    width: 40px;
    height: 20px;
    display: inline-block;
    overflow: hidden;
}
    .slider-button-frame.on {
        /*background: #1f84d9;*/
        background: #20bf04;
    }
.slider-button-frame.disabled
{
	opacity:0.5;
}


	.slider-button-frame input
	{
		display:none;
	}


	/*button*/
    .slider-button-frame .slider-button {
        position: absolute;
        width: 15px;
        color: #fff;
        border-radius: 10px;
        /*background:#B37272;*/
        box-shadow: 1px 1px 3px #555;
        left: 1px;
        right: auto;
        top: 1px;
        height: 15px;
        border: solid 1px #ddd;
    }

	.slider-button-frame.on .slider-button
	{
		right:1px;
		left:auto;
	}




/*    

	End FORM STYLES	
	==================================================================

*/

.vminfomessagespanel
{
	position:relative;
	border:solid 3px green;
	background:#C6ECC6;
	margin:15px 15px;
	box-sizing:border-box;
	padding:15px 15px;
	color:darkgreen !important;
	font-size:15px;
}
.vminfomessagespanel ul
{
	margin:5px 10px 5px 15px;
	padding:1px;
}

.vminfomessagespanelw
{
	position:relative;
	border:solid 3px #1a00ff;
	background:#d7f3f6;
	margin:15px 15px;
	box-sizing:border-box;
	padding:15px 15px;
	color:darkblue !important;
	font-size:15px;
}
.vminfomessagespanelw ul
{
	margin:5px 10px 5px 15px;
	padding:1px;
}


a.vmclosemeldinginfo
{
	position:absolute;
	top:0px;
	right:0px;
	cursor:pointer;
	color:#FFCCCC;
	background:darkgreen;
	text-decoration:none;
	padding:2px 5px;
	text-transform:lowercase;
}

a.vmclosemeldinginfo:hover
{
	color:#fff;
}
/* 
Opmaak Navigatie (linkermenu)
*/


.navigationpanel
{
	margin:0px 0px;
	margin-top:0px;
	border-top:solid 0px #fff;
	overflow:hidden;
	margin-bottom:10px;
	margin-right:-3px;
	display:block; /*was none ???*/
}

ul.navbox 
	{
	margin:0px 0px 0px 5px;
	padding:0px;
	list-style:none;
	font-weight:bold;
	display:block;
	text-align:left;
    background:transparent;
    border:solid 0px silver;
}

.navbox li.menuheader
{
    font-size:12px;
    padding:15px 5px 4px;
    display:block;
    border-bottom:solid 0px #C8D6EA !important;
	color:#555 !important;
	text-transform:uppercase;
}

html.mobile .navbox li.menuheader {
    font-size: 14px;
}

.navbox li span
{
	padding:0px;
	line-height:100%;
}


	
ul.navbox ul.itembox
{
    display:block;
    list-style:none;
    margin:0px;
    padding:0px;
    color:#fff;
    border:solid 0px silver;

}
.navbox ul.itembox li
{
    margin:0px;
    padding:0px;
    overflow:hidden;
    white-space:nowrap;
}

.navbox ul.itembox li a
{
	display:block;
	margin:0px;
	overflow:hidden;
	font-size:12px;
    line-height:27px;
    height:27px;
    text-shadow:1px 1px #fff;
    border-bottom:solid 0px #C8D6EA ;
}

.navbox ul.itembox li a:last-child
{
    border-bottom:solid 0px #ddd;
}

* html .navbox ul.itembox li a
{
	text-decoration:none;	
}

ul.itembox li.navActief
{
}


ul.itembox .navActief a
	{
	position:relative;
	font-weight:normal;
	background:#7EA4CE;
	background:#fff;
	color:#333;
	font-weight:bold;
	white-space:nowrap;
	text-decoration:none;
    text-shadow:none !important;
	border:solid 1px #ddd !important;
	border-radius:5px;
	cursor:pointer;
	z-index:99;
	}


ul.itembox li.navNietActief a
	{
	font-weight:normal; 
	white-space:nowrap;
	color:#555;
	text-decoration:none;
	position:relative;
	}

ul.itembox li.navNietActief a:hover
	{
	color:#333;
	font-weight:normal;
	white-space:nowrap;
	cursor:hand;
	cursor:pointer; 
	text-decoration:none;
	text-shadow:none;
	background:#C8D7EA;
	}

.navigationpanel ul li a img
{
    float:left;
    width:16px;
    height:16px;
    margin:5px 12px 5px 7px;
	opacity:0.8;
/*	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);*/
}

.navigationpanel ul li.navActief a img,
.navigationpanel ul li:hover a img
{
	opacity:1 !important;
/*	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);*/

}



.navigationpanel ul li a span
{
    line-height:27px;
    height:27px;
    display:block;
    float:left;
    white-space:nowrap;
}

html.mobile .navigationpanel ul li a span {
    margin-top: -4px;
}


ul.itembox li a.navigatielink i
{
	font-style:normal;
	font-weight:normal;
	text-shadow:none;
	background:#888;
	width:auto!;
	padding:0px 6px;
	line-height:14px;
	font-size:11px;
	color:#fff;
	position:absolute;
	right:7px;
	top:6px;
	border-radius:5px;
	text-align:center;
	opacity:0.6;
}
ul.itembox li a.navigatielink:hover i
{
	background:red;
	opacity:1;
}
/* Style voor popup divs 
===================================
- helppopup
- modalpopup
=================================== */

/* helppopup 
----------------------------------- */

.popup
{
	font-family: Arial;
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	display: none;
	position: absolute;
	background: #fff;
	border: solid 0px silver;
	z-index: 999;
	width: 450px;
	height: 535px;
	right: 15px;
	top: 46px;
	border-radius:5px;
    box-shadow: 0 5px 5px 1px #333;
    -moz-box-shadow: 0 1px 5px 1px #333;
    -webkit-box-shadow: 0 1px 5px 1px #333;	
}
.popupframe
{
	border: solid 0px silver;
	background:#fff;
	position: absolute;
	left: 0px;
	top: 35px;
	width: 100%;
	height: 500px;
}
.popupheader
{
	background: #5580AB;
	background:#777;
	color: White;
	height: 35px;
}
.popuptitle
{
	float: left;
	margin:8px;
	font-size: 14px;
	font-weight: bold;
	color: White;
}
.popup h2
{
	padding:3px 10px;
}
a.popupsluiten, a.popupsluiten:hover
{
	color: White;
	text-decoration:none;
	font-size:14px;
}

.popupafsluiten
{
	float: right;
	margin: 8px;
	margin-top:6px;
}
.popupfooter
{
	position: absolute;
	top: 25px;
	left: 0px;
	height: 45px;
	width: 500px;
}
a.footerlinks, a.footerlinks:hover
{
	border: solid 1px silver;
	height:30px;
	line-height:30px;
	padding:0px 10px;
	float: left;
	margin: 5px 2px;
	color: black;
	font-size: 12px;
	font-weight:bold;
	text-decoration:none;
	border-radius:5px;
	background: #E8EFFC;
}
a.footerlinks:hover
{
	background: #fff;
	border: outset 1px;
}

/* modalpopup 
------------------------------ */


#modalpopup
{
	display: none;
	position: absolute;
	z-index: 998;
	padding: 0;
	border:solid 0 #ddd;
	margin: 0;
    background: #fff;
	background:#fff;
	border-radius:0;
	box-shadow:0 0 5px #333;
}

.modaltop
{
	text-align: left;
	font-weight: bold;
	font-size: 14px;
	color: #fff;
	padding: 5px 10px;
	margin-bottom:0px;
	height:27px;
	line-height:27px;
	font-size:17px;
	font-weight:normal;
	border-bottom:solid 1px #ddd;
	background:#3973AC;
}
.modaliframepanel
{
	width:100%;
	padding:0px;
    margin:0px;
	-webkit-overflow-scrolling: touch; /* ipad scrolling */
	overflow:auto;
}

.modaltop a, .modaltop a:visited, .modaltop a:hover
{
	color:#eee;
	float: right;
    height:26px;
    line-height:26px;
    text-decoration:none;
}
.modaltop a:hover
{
    color:#000;
    font-weight:bold;
}
.modalpopup form
{
	margin: 0px;
	padding: 0px;
}
.modalpopupframe
{
	width: 100%;
	height: 100%;
	border:0px;
	margin:0px;
	padding:0px;
	-webkit-overflow-scrolling: touch; /* ipad scrolling */
	overflow:auto;
}
.modalbottom
{
margin:0px;
padding:5px;
border-top:0px;
}
#modalbottom.actionpanel
{
	margin-top:0;
}

/* modalpopup wizard
------------------------------ */


#modalpopupwizard
{
	display: none;
	position: absolute;
	z-index: 998;
	padding: 0px;
	margin: 0px;
	background: transparent;
}

.modalpopupwizard form
{
	margin: 0px;
	padding: 0px;
}



/* OVERZICHTEN 
=================================================
*/



.contentbox.overzicht
{
padding:0px !important;
margin:0px !important;
overflow:visible;
}

.linkbutton.afdrukken
{
	display:none;
}

/* Cijferoverzicht */
.tblCijferoverzicht {
    padding-bottom: 5px;
    
    padding: 0px;
    margin: 0px;
    border: solid 1px silver;
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    line-height: 22px;
}
		        
.tablerow
{
    white-space:nowrap;
    width:auto;
    margin-left:150px;
    padding:0;
    display:table-row;
    font-size:0;
}

.tblCijferoverzicht span,
.tblCijferoverzicht td,
.tblCijferoverzicht th 
{
    display: table-cell;
    font-size: 11px !important;
    display: inline-block;
    width: 60px;
    height: 23px;
    line-height: 23px;
    padding: 1px 2px;
    text-align: right;
}

table.verzuimoverzicht th,
table.afwezigheidsoverzichtwerknemer th
{
    background:#eee;
    border:solid 1px silver;
    font-weight:normal;
    vertical-align:top;
    padding:3px 8px;
}

.tablerow.omschrijving span,
.tablerow.omschrijving td,
.tablerow.omschrijving th 
{
    text-align: left !important;
    border-bottom: solid 1px #ddd;
}

.tablerow.subheader span,
.tablerow.subheader td,
.tablerow.subheader th 
{
    border-bottom: solid 1px #ccc;
}

.tblCijferoverzicht .tablerow.werknemerrij:hover,
.tblCijferoverzicht .tablerow.werknemerrij:hover span.fixed,
.tblCijferoverzicht .tablerow.werknemerrij:hover td.fixed,
.tblCijferoverzicht .tablerow.werknemerrij:hover th.fixed 
{
    background: lightyellow;
    cursor: default;
}
.tblCijferoverzicht span.fixed,
.tblCijferoverzicht td.fixed,
.tblCijferoverzicht th.fixed 
{
    position: absolute;
    left: 5px;
    text-align: left !important;
    font-weight: normal;
    width: 150px;
    overflow: hidden;
    *width: 145px; /* Hack ie 7 and below  */
    background: #fff;
    border-right: solid 1px #ddd;
}

.tblCijferoverzicht td.first,
.tblCijferoverzicht span.first,
.tblCijferoverzicht th.first {
    width: 160px;
}
		        
		        
*.tblCijferoverzicht span.first
{
*display:none; /* Hack ie 7 and below  */
}

.lastcel
{
	border-right:solid 1px #bbb;
}
.tablerow .lastcel:last-child
{
	border-right:0px;
}
.tablerow.cijfertotalen
{
	height:40px;
}
    .tablerow.cijfertotalen span,
    .tablerow.cijfertotalen td,
    .tablerow.cijfertotalen th 
    {
        border-top: solid 1px #aaa;
    }
.contentbox.cijferoverzicht
{
    overflow:visible !important;
}


/* grafische verlofoverzichten zonder roostervrij */
table.tableverlofoverzicht
{
    padding:0px;
    table-layout:fixed;
    line-height:100%;
    border-collapse:collapse;
}
    table.tableverlofoverzicht td,
    table.tableverlofoverzicht th 
    {
        height: 18px;
        padding: 0px 0px;
        color: #000;
        /*	position:relative;*/
    }

.verlofoverzichtblank, .verlofoverzichtblankrightborder
{
	border-bottom:solid 1px #ccc;
	
}
.verlofoverzichtblankrightborder
{
	border-right:solid 1px #ccc;
}
.verlofoverzichtkleur, .verlofoverzichtkleurleftborder, .verlofoverzichtkleurrightborder, .verlofoverzichtkleurleftrightborder
{
	border-bottom:solid 1px #ccc;
	cursor:pointer;
	text-align:center;
	vertical-align:top;
	position:relative;
}
.verlofoverzichtkleurleftborder
{
	border-left:solid 1px #ccc;
}
.verlofoverzichtkleurrightborder
{
	border-right:solid 1px #ccc;
}
.verlofoverzichtkleurleftrightborder
{
	border-left:solid 1px #ccc;
	border-right:solid 1px #ccc;
}
.urenlabel
{
	background:white;
	filter:	alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;	
	padding:0px 5px;
	left:20px;
	top:1px;
	border:solid 0px gray;
	font-size:10px;
}

.overzichtnaam
{
	width:155px;
	border:solid 1px #ccc;
	border-top:0px;
	font-size:11px;
	overflow:hidden;
	position:relative;
}
.overzichtnaam span
{
display:block;
white-space:nowrap;
overflow:hidden;
padding:2px 5px;
}

.overzichtheader
{
	background:#f2f2f2;
	width:22px;
	border:solid 1px #ccc;
	border-left:0px;
	border-top:0px;
	font-size:10px;
}

.overzichtheadertop
{
	background:#f2f2f2;
	width:18px;
	border:solid 1px #ccc;
	border-left:0px;
	font-size:10px;
}
.overzichtheadertopjaar
{
	border-bottom:solid 1px #ccc;
	border-right:solid 1px #ccc;
	border-top:solid 1px #ccc;
	font-size:10px;
	text-align:center;
	background:#eee;
}
.overzichtfeestdag
{
	background:#f7ec9f;
	border-bottom:solid 1px #ccc;
	width:1px;
}
.groepskleurcoderand
{
	position:relative;
	height:2px;
	display:block;
	border-bottom:solid 1px #fff;
	width:100%;
	z-index:95;
	
}


/* grafische verlofoverzichten met roostervrij  */

.roosteroverzichtblank
{
	border-bottom:1px solid #ccc; 
	padding-left:8px;
	background-color:white;
}

.roosteroverzichtfeestdag
{
	border-bottom:1px solid #ccc; 
	padding-left:8px;
	background-color:#f7ec9f;
	cursor:pointer;
}

.roosteroverzichtziek
{
	border-bottom:1px solid #ccc; 
	padding-left:8px;
	background-color:red;
}

.roosteroverzichtvrijedag
{
	border-bottom:1px solid #ccc; 
	padding-left:8px;
	background-color:#f7ec9f;
}



.roosteroverzichtpartieelverzuim
{
	border-bottom:1px solid #ccc; 
	vertical-align:top;
	padding-left:8px;
	text-align:center;
	background-color:pink;
}


.roosteroverzichtroostervrij
{
	border-bottom:1px solid #ccc; 
	vertical-align:top;
	padding-left:8px;
	text-align:center;
	background-color:#FFD9B3;
}

.roosteroverzichtverlof
{
	border-bottom:1px solid #ccc; 
	padding-left:8px;
	vertical-align:top;
	text-align:center;
	cursor:hand;
	cursor:pointer;
}

.roosteroverzichtverlof.nopointer
{
	cursor:default;
}

.roosteroverzichtroostervrijverlof
{
	border-bottom:1px solid #ccc; 
	padding-left:8px;
	text-align:center;
	cursor:hand;
	cursor:pointer;	
}

.roosteroverzichturenlabel
{
	background:white;
	filter:	alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;	
	padding:0px 5px;
	border:solid 0px gray;
	font-size:11px;
	text-align:center;
}

.verlofoverzichtlegendalink
{
    border:solid 1px silver;
    display:inline-block;
    cursor:pointer;
    padding:2px 6px;
    background:#eee;
}


/* verlofoverzicht special days 
============================================================*/

/* in de headers */
table.tableverlofoverzicht .currentday
{
    border:solid 1px #ccc;
    background:#fff;
    color:red;
    text-align:center;
    font-weight:bold;
}


table.tableverlofoverzicht .overzichtheadertop.currentday
{
    background:#fff url(/images/ico/browsedesc.gif) no-repeat 5px -4px;
}
table.tableverlofoverzicht .weekendday
{
    border:solid 1px #ccc;
    background:#E0E0E0;
}
table.tableverlofoverzicht .weekday
{
    border:solid 1px #ccc;
    background:#f2f2f2;
}

/* in de rijen van de werknemers */
tr.overzichtnaamrij .weekendday,
td.weekendday
{
    background:#eee;
}
tr.overzichtnaamrij .weekday
{
    background:#fff;
}

tr.overzichtnaamrij .currentday
{
    background:#FFE5E5;
    background:#fff;
    border-color:#ccc;
}

/* verzuimoverzichten 
==========================================================*/
.tablewrapper
{
    
    border:solid 1px silver;
    border-radius:5px;
    overflow:hidden;
}
table.verzuimoverzicht
{
    padding:0px;
    margin:0px;
    border:solid 1px silver;
    border-collapse:collapse;
    width:100%;
    font-size:12px;
    line-height:22px;
}
table.verzuimoverzicht th,
table.afwezigheidsoverzichtwerknemer th
{
    background:#eee;
    border:solid 1px silver;
    font-weight:normal;
    vertical-align:top;
    padding:3px 8px;
}
table.verzuimoverzicht td,
table.afwezigheidsoverzichtwerknemer td
{
    border:solid 1px silver;
    text-align:center;
    padding:3px 8px;
}
table.verzuimoverzicht tr.totalenrecord td

{
    font-weight:normal;
    background:#fafafa;
}
table.verzuimoverzicht .omschrijving
{
    text-align:left;
}

table.afwezigheidsoverzichtwerknemer
{
    border:solid 1px silver;
    border-collapse:collapse;
    width:100%;
    font-size:11px;

}
table.afwezigheidsoverzichtwerknemer td,
table.afwezigheidsoverzichtwerknemer th
{
    border:solid 1px silver;
    text-align:center;
    padding:3px 3px;
    width:12px;
    font-size:11px;
    vertical-align:top;
}

.afwezigheidfeestdag
{
	background:#FFDB4D !important;
}

.afwezigheidweekend, .afwezigheidpartieel, .afwezigheidtransparent, .afwezigheidvrijedag
{
	position:absolute;
	width:26px;
	height:21px;
	background:#BBB;
	z-index:100;
	top:-3px;
	left:-4px;
}
.afwezigheidweekend, .afwezigheidtransparent
{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    opacity:0.5;
}
.afwezigheidverzuim
{
	background:Red !important;
}

.afwezigheidoverlappend
{
	background:#F4A3FF;
}

.afwezigheidpartieel
{
	height:11px;
	background:Red;
	top:7px;
}
.afwezigheidvrijedag
{
    height:6px;
    background:#FFDB4D;
    top:-3px
}
.afwezigheidpartieel.transparent
{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    opacity:0.5;
}

.afwezigheidvakantie
{
	background-color:#C3FA94;
}
.afwezigheidadv
{
	background-color:#F1C98E;
}
.afwezigheidbijzonderverlof
{
	background-color:#BDE0FF;
}
.afwezigheideindemaand
{
	background-color:#AAA
}
.afwezigheidmaandkolom
{
	background-color:#EEE;
	width:40px;
}

.afwezigheidtransparent
{
	background:#FFF;
}
.cellwrapper
{
	position:relative;
	top:0px;
	left:0px;
	z-index:100;
}

/* legenda */
.legendalink
{
    float:right;
    padding:2px 5px;
    background:#f7f7f7;
    border:solid 1px #ddd;
    text-decoration:none;
    color:Gray;
}
.legendalink:hover
{
    color:#333;
    border-color:#aaa;
}


.overzichtlegenda
{
    position:absolute;
    background:#fff;
    z-index:105;
    overflow:hidden;
    border:solid 1px silver;
    border-radius:5px;
    margin:0px 0px;
    padding:2px 2px;
    box-shadow:1px 1px 5px #555;
}
.overzichtlegendaitem
{
    display:block;
    float:left;
    position:relative;
    padding:3px 6px;
}

.overzichtlegendaitem
{
}
.overzichtlegendaitem span
{
    display:block;
    font-size:10px;
}
.overzichtlegendaitemrow
{
    display:block;
    float:left;
    overflow:hidden;
    padding:0px 5px;
    margin:0px;
    width:100px;
    margin-bottom:7px;
    border-bottom:solid 1px #ddd;
}
.overzichtlegendaitemrow.categorie
{
    width:160px !important;
}
.overzichtlegendaboxes
{
    margin-left:20px;
}
.overzichtlegendabox
{
   width:15px;
   float:left;
   height:13px;
   text-align:center;
   border:solid 1px silver;
   margin:1px 5px 2px;
   line-height:12px;
   position:relative;
}
.overzichtlegendabox.opacity {
    /*zoom: 1; */
    transform: scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
}
.overzichtlegendabox.vakantie
{
   background-color:#C3FA94;   

}
.overzichtlegendabox.adv
{
   background-color:#F1C98E;   
}
.overzichtlegendabox.bijzonderverlof
{
   background-color:#BDE0FF;   
}
.overzichtlegendabox.verzuim
{
   background-color:red;   
}
.overzichtlegendabox.verzuimpartieel
{
    background-color:#fff; 
}
.overzichtlegendabox.verzuimpartieel .verzuimpartieelbottom,
.overzichtlegendabox.vrijedag .vrijedagbottom
{
    position:absolute;
    bottom:0px;
    left:0px;
    width:15px;
    background-color:Red;
    height:7px;
}
.overzichtlegendabox.vrijedag .vrijedagbottom
{
    height:4px;
    background-color:#FFDB4D;
}
.overzichtlegendabox.feestdag
{
   background-color:#FFDB4D;   
}
.overzichtlegendabox.weekend
{
   	background:#BBB;
	border:solid 1px gray;  
}
.overzichtlegendabox.meerdere
{
   	background:#F4A3FF;
	border:solid 1px gray;  
}

.overzichtlegendabox.blank
{
    border:0px;
}

.overzichtlegendalabel
{
    color:#404040;
    line-height:18px;
}

.overzichtlegendalabel.opacity
{
    opacity:0.8;
}

#verloflijsten.contentbox h2
{
	border-bottom:0px !important;
	font-size:20px;
	margin-bottom:0px !important;
	padding:0 !important;
}

#verloflijsten.contentbox.multiple
{
	background:#fff !important;
	border:solid 1px #ccc !important;
	box-shadow:1px 1px 5px #555;
	border-radius:0 !important;
}
/* verlofverzoekoverzicht */


.divframe {
    overflow: auto;
    position: relative;
}


.koptekstoverzicht {
    border-bottom: solid 1px #eee;
    font-weight: bold;
    padding: 3px;
}



.verzoekoverzichtrij {
    display: block;
    /*height: 33px;*/
    height: 43px;
    line-height: 34px;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    margin-bottom: 4px;
    padding-left: 4px;
    cursor: auto;
}

* html .verzoekoverzichtrij {
    height: 32px;
}



    .verzoekoverzichtrij:hover {
        cursor: pointer;
        background: #f1f1f1;
        border-color: #ccc;
    }

    .verzoekoverzichtrij.old {
        background: #f5f5f5;
        opacity: 0.7;
    }

        .verzoekoverzichtrij.old span {
            color: #333;
        }

.nohover .verzoekoverzichtrij:hover,
.nohover.verzoekoverzichtrij:hover {
    cursor: auto;
    background: #fff !important;
    box-shadow: none;
}


.verzoekoverzichtrij.totaal,
.verzoekoverzichtrij.totaal:hover {
    border: 0;
    background: #e5e5e5 !important;
    color: #fff !important;
    line-height: 16px;
    height: 26px;
    margin-top: 10px;
    border-radius: 5px;
}

    .verzoekoverzichtrij.totaal span {
        height: 24px;
        line-height: 24px;
    }


.verzoekoverzichtrij:first-child {
}

.verzoekoverzichtrij span {
    float: left;
    font-size: 12px;
    font-family: arial;
    line-height: 32px;
    height: 32px;
    border-right: solid 0px #eee;
    letter-spacing: 0px;
    color: #353535;
    white-space: nowrap;
    display: block;
}

.verzoekoverzichtuitklap {
    margin-left: 5px;
    padding: 9px 4px;
}

.verzoekoverzichtinitialen {
    padding: 0px 5px;
    font-weight: bold;
    width: 30px;
}

* html verzoekoverzichtinitialen {
    width: 35px;
}

* html verzoekoverzichtuitklap {
    width: 36px;
}

.verzoekoverzichtico {
    padding: 4px 2px;
    width: 16px;
}

.verzoekoverzichtdatum {
    padding: 0px 3px 0px 5px;
    width: 57px;
    text-align: left;
}

* html .verzoekoverzichtdatum {
    width: 66px;
}

span.verzoekoverzichturen {
    width: 24px;
    text-align: right;
    padding: 0px 2px;
    padding-right: 4px;
    color: #555;
    font-weight: normal;
}
/* hack ie */
* html span.verzoekoverzichturen {
    width: 28px;
}

span.verzoekoverzichtbindstreep {
    width: 15px;
    text-align: center;
    border: 0px;
    color: #999;
}

span.verzoekoverzichtgroep {
    position: absolute;
    width: 130px;
    text-align: center;
    left: 135px;
    top: 0px;
    background: transparent;
    border: solid 1px #eee;
    border: 0px;
    color: Green;
}

span.verzoekoverzichtverloftype {
    margin-left: 5px;
    padding-top: 7px;
    margin-right: 5px;
}

span.verzoekoverzichturentotaal, span.verzoekoverzichturentotaaldoorgestreept {
    font-weight: normal;
    width: 44px;
    padding-right: 10px;
    text-align: right;
    font-weight: bold;
    color: #000;
}

    span.verzoekoverzichturentotaal b {
        font-size: 12px;
        color: #000;
        font-weight: bold;
    }

span.verzoekoverzichturentotaaldoorgestreept {
    text-decoration: line-through;
    color: #E08585;
}

span.verzoekoverzichtstatus {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 4px 14px 4px 8px;
    text-align: right;
    background: #FFF;
}

    span.verzoekoverzichtstatus img {
        padding-top: 2px;
    }

.verzoekoverzichtrij:hover span.verzoekoverzichtstatus {
    background: #f1f1f1;
}

span.verzoekoverzichtcompensatietekst, span.verzoekoverzichtgroepcompensatietekst {
    padding: 0px 4px;
    width: 134px;
    color: #FFB366;
    text-align: center;
}

span.verzoekoverzichtgroepcompensatietekst {
    color: #FF531A;
}

* html span.verzoekoverzichtcompensatietekst, * html span.verzoekoverzichtgroepcompensatietekst {
    width: 142px;
}

span.verzoekoverzichtvakantie, span.verzoekoverzichtadv, span.verzoekoverzichtbijzonderverlof, span.verzoekoverzichtcompensatie, span.verzoekoverzichtverzuim {
    height: 15px;
    width: 35px;
    text-align: center;
    overflow: hidden;
    cursor: default;
    padding: 0px;
    font-size: 10px;
    line-height: 15px;
    font-weight: bold;
    border-radius: 4px;
}


span.verzoekoverzichtverzuim {
    color: Red;
    font-weight: bold;
    border: solid 1px #E49595;
}

span.verzoekoverzichtcode {
    cursor: default;
    padding: 0px 3px;
    width: 45px;
}

* html span.verzoekoverzichtcode {
    width: 51px;
}

span.verzoekoverzichtopmerkingen,
span.verzoekoverzichtopmerkingenfeestdag {
    width: 50px;
    float: left;
    padding: 0px 5px;
    background: transparent;
    border-right: 0px;
    position: relative;
}




* html span.verzoekoverzichtopmerkingen /* hack voor ie6 */ {
    display: block;
    float: left;
    padding: 0px 2px;
    background: transparent;
    border-right: 0px;
    width: 60px;
    overflow: hidden;
    position: relative;
}

    span.verzoekoverzichtopmerkingen img {
        position: relative;
        top: 1px;
        left: 0px;
        margin-right: 5px;
    }

span.verzoekoverzichtwaarschuwing {
    position: absolute;
    top: 0px;
    right: 5px;
    cursor: pointer;
}


input[type=button].alertbutton, input .alertbutton {
    border: solid 1px red;
    height: 18px;
    font-size: 10px;
    background: #fff;
}

    input[type=button].alertbutton:hover, input .alertbutton:hover {
        border: solid 1px red;
        height: 18px;
        font-size: 10px;
        background: red;
        color: #fff;
    }

span.verzoekoverzichtoudnieuw {
    padding: 0px 5px;
    width: 40px;
    font-weight: bold;
}

* html span.verzoekoverzichtoudnieuw {
    width: 50px;
}



/*  vcal adjustments  */
.verzoekoverzichtrij.vcal {
    height: 60px;
}

    /*  vcal adjustments  */
    .verzoekoverzichtrij.vcal .overzichttijdvan {
        line-height: 1;
        margin-top: -3px;
        color: #777;
    }

.verzoekoverzichtrij.supervisor {
    height: 72px;
}


/*  vcal   */
.verzoekoverzichtrij.vcal.supervisor {
    height: 75px;
}

.verzoekoverzichtrij.compensatie.supervisor {
    height: 60px;
}

.verzoekoverzichtrij.supervisor .verzoekoverzichtstatus {
    top: 29px;
}


.verzoekoverzichtrij.vcal.supervisor span,
.verzoekoverzichtrij.compensatie.supervisor span {
    height: 24px;
    padding: 2px;
    margin: 0;
    line-height: 24px;
}

    .verzoekoverzichtrij.vcal.supervisor span.verzoekoverzichtuitklap img,
    .verzoekoverzichtrij.compensatie.supervisor span.verzoekoverzichtuitklap img {
        padding-top: 5px;
    }

.verzoekoverzichtrij .overzichttijdvan {
    line-height: 1 !important;
}


.verzoekoverzichtrij.vcal .overzichttijdvan.geentijd {
    line-height: 1;
    margin-top: -3px;
    color: #bbb;
}

/* mobile */
html.mobile .verzoekoverzichtrij.vcal {
    height: 78px;
}

html.mobile span.verzoekoverzichturentotaal,
html.mobile span.verzoekoverzichturentotaaldoorgestreept {
    font-weight: normal;
    width: 94px;
    padding-right: 10px;
    text-align: right;
    font-weight: bold;
    color: #000;
}

html.mobile .verzoekoverzichtrij.totaal,
html.mobile .verzoekoverzichtrij.totaal:hover {
    border: 0;
    background: #e5e5e5 !important;
    color: #fff !important;
    line-height: 16px;
    height: 36px;
    margin-top: 10px;
    border-radius: 5px;
}

html.mobile span.verzoekoverzichtbindstreep {
    /*
    
    text-align: right;
     color: #999;
    margin-right: 5px;
    margin-left:30px;
    */
    width: 15px;
    border: solid 0px red;
}



html.mobile span.verzoekoverzichtopmerkingen {
    display: none !important;
}

    html.mobile span.verzoekoverzichtopmerkingen.feestdagen {
        display: block !important;
    }

html.mobile span.verzoekoverzichtopmerkingenfeestdag {
    display: block !important;
}


html.mobile span.verzoekoverzichtcompensatietekst,
html.mobile span.verzoekoverzichtgroepcompensatietekst {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    margin-right: 0px;
    padding: 0px;
    width: 60px;
    color: #FFB366;
    text-align: center;
    border: solid 0px red;
}

html.mobile .verzoekoverzichtdatum {
    padding: 0px 0px 0px 10px;
    width: 80px;
    border: solid 0px red;
    /*
     width: 85px;
    text-align: left;
    */
}

.verzoekoverzichtdatumverzuim {
    padding: 0px 3px 0px 3px;
    width: 80px;
    text-align: left;
}

html.mobile .verzoekoverzichtdatumverzuim {
    padding: 0px 0px 0px 10px;
    width: 80px;
}

html.mobile .verzoekoverzichtrij.supervisor {
    height: 105px;
}


    html.mobile .verzoekoverzichtrij.supervisor .verzoekoverzichtstatus {
        top: 38px;
    }

html.mobile #divOpenstaandeVerzuimVerzoeken h3 {
    padding-left: 15px;
}

html.mobile #divOpenstaandeVerlofVerzoeken h3 {
    padding-left: 15px;
}

html.mobile #divOpenstaandeCompensatieVerzoeken h3 {
    padding-left: 15px;
}


.headeropenstaandeverzoeken {
    height: 28px;
    background: #eee;
    display: block;
    position: relative;
    overflow: hidden;
}

html.mobile .headeropenstaandeverzoeken {
    height: 38px;
}

html.mobile #werknemertabs .verzoekoverzichtuitklap img {
    height: 16px;
}


html.mobile span.mobileurentotaal {
    width: 20px !important;
    position: absolute;
    margin-left: 76%;
    border: solid 0px red;
}

html.mobile span.mobileurentotaalverzuim {
    width: 0px !important;
    margin-left: 50px;
    display: none;
}



html.mobile span.verzoekoverzichtopmerkingenfeestdag {
    width: 94px;
    overflow: hidden;
    position: absolute;
    margin-left: 42%;
    border: solid 0px red;
}


span.verzoekoverzichturentotaallijst, span.verzoekoverzichturentotaaldoorgestreeptlijst {
    font-weight: normal;
    width: 90px;
    padding-right: 10px;
    text-align: right;
    font-weight: bold;
    color: #000;
}

    span.verzoekoverzichturentotaallijst b {
        font-size: 12px;
        color: #000;
        font-weight: bold;
    }

span.verzoekoverzichturentotaaldoorgestreeptlijst {
    text-decoration: line-through;
    color: #E08585;
}

html.mobile .verzoekoverzichturentotaallijst {
    padding-left: 9px;
    font-size: 10px;
}

html.mobile #verloflijsten .verzoekoverzichturentotaallijst {
    padding-left: 5px;
    text-align: right;
}

html.mobile span.verzoekoverzichturentotaallijst,
html.mobile span.verzoekoverzichturentotaaldoorgestreeptlijst {
    width: 1px;
    border: solid 0px red;
    position: absolute;
    margin-left: 77%;
}

html.mobile span.verzoekoverzichturentotaaldoorgestreeptlijst {
    /* margin-left: 45px; */
    font-size: 10px;
    padding-left: 5px;
}

html.mobile .alertmobile {
    margin-top: 15px;
}

html.mobile span.verzoekoverzichtoudnieuw {
    width: 4px;
}

html.mobile * html span.verzoekoverzichtoudnieuw {
    width: 5px;
}

html.mobile span.verzoekoverzichtstatus img {
    padding-top: 2px;
    margin-right: -10px;
}



/* Beheer --> Dashboard */
h1.big {
    font-size: 30px;
    line-height: 30px;
    padding-top: 20px;
    margin-bottom: 15px;
}

.contentbox.dashboardbeheerder {
    margin-left: 5px !important;
    margin-right: 5px !important;
}


h1.dashboard {
    color: #555;
    font-weight: normal;
}

.tegelpanel.dashboard,
.tegelpanel.dashboard:hover {
    margin: 5px !important;
    display: inline-block !important;
    color: #555;
    vertical-align: top;
    padding: 5px 5px;
    background: transparent;
    border: 0;
    margin-bottom: 15px !important;
    margin-top: 0;
    padding-top: 5px;
    box-shadow: none;
    cursor: default;
    border-top: 0;
    border-left: 0;
    background: #fff;
    border: solid 0px #ddd;
}

    .tegelpanel.dashboard.gray {
        margin-bottom: 3px !important;
        background: transparent;
        border: 0;
    }

.tegelpanel.fullwidth,
.tegelpanel.fullwidth:hover {
    width: 100% !important;
    box-sizing: border-box;
    border: solid 0px #ddd;
    padding: 10px 35px 30px 25px;
    margin: 0px !important;
    border-bottom: solid 1px #ddd;
}


    .tegelpanel.fullwidth.actueelbox {
        border-radius: 0px;
        border: solid 1px #ddd !important;
        padding: 15px;
    }

.tegelpanel.sixty,
.tegelpanel.sixty:hover {
    width: 63% !important;
    border: solid 1px #eee;
    box-shadow: 1px 1px 2px #999;
}

.tegelpanel.fifty,
.tegelpanel.fifty:hover {
    width: 47% !important;
}

.tegelpanel.thirty,
.tegelpanel.thirty:hover {
    width: 30% !important;
    margin: 4px !important;
    border: solid 1px #eee;
    box-shadow: 1px 1px 2px #999;
    padding: 10px 6px;
}

.tegelpanel.dashboard h3 {
    font-size: 18px;
    font-weight: normal;
    border-bottom: solid 1px #D9E5F2;
    padding-bottom: 5px;
    margin: 2px 5px 8px 5px;
    color: #666 !important;
    padding-left: 30px;
    position: relative;
    display: block;
    text-decoration: none;
}

    .tegelpanel.dashboard h3 img {
        position: absolute;
        top: 0px;
        left: 3px;
        width: 20px;
        borcder: 0;
    }

.tegelpanel.dashboard a {
    display: block;
    padding-left: 38px;
    line-height: 28px;
    text-decoration: none;
    position: relative;
    font-size: 13px;
}



a.nolink,
a.nolink:hover {
    color: #333;
    cursor: default;
    text-decoration: none !important;
}


.tegelpanel.dashboard a:hover {
    text-decoration: underline;
}

.tegelpanel.dashboard a img {
    position: absolute;
    top: 5px;
    left: 8px;
    width: 17px;
}

.tegelpanel.dashboard .formrow {
    padding: 0px 0px;
}

    .tegelpanel.dashboard .formrow span {
        line-height: 20px !important;
        padding: 0px;
        font-size: 12px;
    }

.wijzigbaar {
    margin-top: 5px !important;
    height: 10px;
    width: 10px !important;
    background: #44CC00;
    border-radius: 10px;
    margin-right: 15px !important;
}

    .wijzigbaar.orange {
        background: #FF9A57;
    }

.tegelpanel .row .label {
    display: inline-block;
    width: 140px;
}

.autowidth {
    width: auto !important;
}


.tegelpanel.dashboard .contentbox {
    margin: 0 !important;
    padding: 0 !important;
}


.dashboard .alertpanel {
    position: relative;
    border: 0;
    padding: 0;
    margin: 0;
}

.dashboard #alertpanelbox {
    position: relative;
    top: auto !important;
    right: auto !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dashboard .itemlink {
    display: block;
    line-height: 27px !important;
    height: 23px;
    color: gray;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 0px;
    text-decoration: none;
    border-radius: 0px;
    cursor: default;
    position: relative;
    width: auto !important;
    border: solid 1px #fff;
    font-weight: normal !important;
    background: #fff;
}

    .dashboard .itemlink:hover {
        box-shadow: none !important;
        border: solid 1px #ddd;
        background: #fff;
        cursor: pointer;
    }

    .dashboard .itemlink span.number {
        position: absolute;
        top: -1px;
        right: 8px;
        font-size: 12px;
    }

    .dashboard .itemlink img {
        position: absolute;
        top: 3px !important;
        left: 2px !important;
        border: 0px;
    }



/* Alertpanel  */

.alertpanelinnerbox {
    padding: 0 !important;
    overflow: hidden !important;
}

.alertroosterjaarpanel {
    border: 0 !important;
    margin: 2px 10px 2px 5px;
    border-bottom: solid 1px #ddd !important;
    white-space: nowrap;
}



.nieuwsitems .alertroosterjaarpanel {
    margin: 0 2px;
    height: 30px;
    line-height: 30px !important;
}

    .nieuwsitems .alertroosterjaarpanel:hover {
        background: #eee;
        cursor: pointer;
    }

.alertroosterjaarpanel span {
    line-height: 30px;
    height: 30px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}



    .alertroosterjaarpanel span img {
        width: 14px !important;
        vertical-align: text-bottom;
        margin-right: 5px;
    }

.alertpaneljaar {
    font-weight: bold;
    margin-right: 6px;
}

.nieuwsitems .alertpaneljaar {
    min-width: 51px;
}

span.alertlink {
    display: inline-block !important;
    float: right !important;
    line-height: 30px;
}

.nieuwsitems span.alertlink {
    margin-right: 10px;
}

span.alertlink a {
    display: block !important;
    font-size: 12px !important;
}

.nieuwsitems .nieuwsitem {
    overflow: hidden;
}

    .nieuwsitems .nieuwsitem p {
        overflow: hidden;
    }

.berichtpanel p {
    color: #111;
    line-height: 23px;
}

.berichtpanel {
    color: #111;
}

    .berichtpanel h2 {
        color: #333;
        border: 0;
        padding-bottom: 0px !important;
        margin-bottom: 3px !important;
        font-size: 14px;
        font-weight: bold;
        padding-left: 0;
    }

.nieuwsitems .nieuwsitem span {
    overflow: hidden;
}

.nieuwsitemlink {
    background: #fff;
}

.nieuwsitems .nieuwsitem:hover,
.nieuwsitems .nieuwsitem:hover .nieuwsitemlink {
    background: #eee;
    cursor: pointer;
}

.nieuwsitems .nieuwsitem.nohover:hover,
.nieuwsitems .nieuwsitem.nohover:hover .nieuwsitemlink,
.nieuwsitems .nieuwsitem.nohover a:hover {
    background: #fff !important;
}

/* Beheer --> Instellingen  */

.contentbox.modules .tegelpanel {
    background: #eee;
    opacity: 0.9;
}

    .contentbox.modules .tegelpanel h3 {
        color: #555 !important;
    }


    .contentbox.modules .tegelpanel:hover {
        opacity: 1;
        background: #f5f5f5;
    }

.triangle {
    position: absolute;
    top: 0;
    right: 0;
    border-color: #ddd #ddd #fff #fff;
    border-style: solid;
    border-width: 15px;
    width: 0px; /* real width is 100px; */
    height: 0px; /* same as width */
    line-height: 0px;
}

.moduleactiveren {
    position: absolute;
    display: block;
    top: 0px;
    right: -20px;
    border: solid 0px #70B8DB;
    padding: 2px 7px;
    color: #fff !important;
    background: #bbb;
    z-index: 99;
    text-decoration: none;
    font-weight: bold;
}

    .moduleactiveren:hover,
    .tegelpanel.icon:hover .moduleactiveren {
        color: #fff !important;
        background: #ff6600;
    }

.tegelpanel.icon:hover .triangle {
    background: #ccc;
}

.tegelpanel.icon h4 {
    position: absolute;
    bottom: 15px;
    left: 10px;
    background: #999;
    padding: 2px 3px;
    color: #fff;
    width: 38px;
    text-align: center;
    font-weight: bold;
}

    .tegelpanel.icon h4.free {
        background: #99CC00
    }

/* Beheer --> Instellingen --> Algmene instellingen
-----------------------------------------------------*/
.algemeneinstellingen .formrow .label {
    width: 210px;
}





/* BEHEER --> Contractbudgetten  
-------------------------------------------------*/

.inlinelabel {
    margin-left: 20px;
    color: #777 !important;
}


span.contractbudgetcode {
    display: inline-block;
    vertical-align: top;
    margin-top: 8px;
    color: #5580AB;
    padding: 2px 5px;
    margin-left: 15px !important;
    font-size: 11px;
    font-weight: normal;
    background: #999;
    color: #fff;
    border-radius: 4px;
}


.tegelpanel .propertiepanel {
    height: 35px;
    line-height: 35px;
    margin: 0px 10px;
}

.admin .tegelpanel .propertiepanel span {
    display: inline-block;
}
/* Beheer --> Contractbudgetten --> Tabs
-------------------------------------------------------------*/
.closenieuweversie {
    background: #CC3300;
    color: #fff;
    padding: 2px 5px;
}

    .closenieuweversie:hover {
        background: #ff0000;
    }



/* Beheer --> Contractbudgetten --> Leeftijdscategorieen
-----------------------------------------------------*/
ul.leeftijddoorrekenjaren {
    margin-left: 20px;
}


/* Beheer -->  Contractbudgetten --> Koppelen
-------------------------------------------------------------*/

.contractbudgettenkoppelenpanel .formrow .label {
    width: 110px;
}

.contractbudgettenkoppelenpanel .formrow span {
    margin-right: 5px;
}

.contractbudgettenkoppelenpanel .formrow.koppelheader {
    margin: 0px 0px 10px 0px;
    padding-bottom: 10px;
    border-bottom: solid 1px silver;
}


/* Beheer --> Vrije dagen 
-------------------------------------------------*/

.contentbox.vrijedagen {
    padding-top: 0px !important;
}

.formrow.selectregio {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: solid 1px #ddd;
}

/* Beheer --> Werknemers 
-------------------------------------------------*/
.werknemers.pageactionpanel .linkbuttonpanel {
    display: none;
}

#werknemerspanel .gridviewrowspanel {
    border: 0 !important;
    border-right: solid 1px #ccc !important;
}

.zoekwerknemers {
    padding: 4px 5px 4px 5px;
    border-top: solid 0px #ddd;
    background: #e5e5e5;
    width: 140px;
    float: left;
}

#werknemerspanel .historiepanel {
    padding: 7px 5px 4px 5px;
    background: #e5e5e5;
    color: #333;
    width: 98px;
    float: left;
}

#werknemerspanel .gridviewpanel {
    background: #e5e5e5;
    border: 0px;
    border-right: solid 1px silver;
    overflow-x: hidden;
}

    #werknemerspanel .gridviewpanel.hidden {
        background: #bbb;
    }

#werknemerslijst {
    text-decoration: none;
    border: solid 1px #fff;
    color: #999 !important;
    background: #f3f3f3;
    height: 18px;
    width: 18px;
    line-height: 18px;
    font-size: bold;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0px 0px 3px #777;
    position: absolute;
    top: 51px;
    left: 219px;
}

    #werknemerslijst:hover {
        background: #eee;
        color: #333;
        box-shadow: 0px 0px 3px #222;
    }

.werknemerdetails {
    margin-top: 0px;
}



.werknemerdetailpanel {
    margin-top: 0px !important;
}

    .werknemerdetailpanel div {
        margin-left: 0px !important;
        padding: 4px 10px;
    }

        .werknemerdetailpanel div.basicproperties {
            padding: 3px 10px 12px 10px;
        }

div.extraproperties {
    display: block;
    padding-left: 5px !important;
    border-top: solid 1px #ccc;
    padding: 7px 5px 7px 12px !important;
}

    div.extraproperties div {
        margin: 3px 0px;
    }

        .werknemerdetailpanel div span,
        div.extraproperties div span {
            display: inline-block !important;
            margin: 2px 0 !important;
            padding: 0px 0px !important;
            line-height: 15px !important;
            vertical-align: top;
        }

            .werknemerdetailpanel div span.budgetcodepanel,
            .werknemerdetailpanel div span.budgetcodepanel span {
                margin: 0 !important;
                padding: 0px 5px !important;
            }

/* beheer werknemers --> Rechten overzichten 
-------------------------------------------------*/

.item-inline div.groupcolor {
    margin-right: 3px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
}





.rechtenlistpanel {
    display: none;
    margin-right: 5px;
    vertical-align: top;
    overflow: hidden;
}


    .rechtenlistpanel .tegelrij {
        min-height: 33px !important;
    }

    .rechtenlistpanel .item-inline {
        max-width: 100%;
        color: #555;
        white-space: nowrap;
        overflow: hidden;
    }

#rechtenoverzichtenpanel .tegelpanel {
}

    #rechtenoverzichtenpanel .tegelpanel:hover {
        border: solid 1px #ddd;
        box-shadow: none;
        cursor: pointer;
    }



/* Werknemers --> profiel --> profielgegevens
-------------------------------------------------*/
.profielinloggegevens {
    position: absolute;
    top: 0px;
    left: 430px;
}

/* werknemer --> overzicht 
--------------------------------------------------*/
span.legendalink {
    position: absolute;
    display: block;
    cursor: pointer;
    width: 74px;
    height: 22px;
    padding-top: 1px;
    margin: 0px;
    text-align: center;
    background: transparent url('/images/bg_legendalink.png') no-repeat;
    font-size: 10px;
    font-weight: bold;
    color: White;
    top: 1px;
    right: 5px;
    z-index: 1;
}

/* werknemer --> verlofverzoek 
-------------------------------------------------*/
.verlofverzoekgegevenspanel {
    float: left;
    width: 650px;
    padding-left: 15px;
    border-left: solid 1px silver;
}
/* ie6 hack */
* html .verlofverzoekgegevenspanel {
    padding-left: 0px;
}


/* werknemer --> verlofverzoek 
-------------------------------------------------*/
.verzuimgegevenspanel {
    padding: 0px 5px 5px 5px;
    border: solid 1px #ddd;
    border-top: 0px;
}
/* ie6 hack */
* html .verzuimgegevenspanel {
    padding-left: 0px;
}

.formrow.verzoekperiodetm {
    padding: 0px 0px 10px 0px;
    border-bottom: solid 1px silver;
}

.verzoekopmerkingen {
    float: left;
    width: 300px;
    height: 100px;
}

    .verzoekopmerkingen.history {
        width: 280px;
        margin-left: 40px;
        border: solid 1px #FFFF66;
        font-size: 11px;
        background: #ffffee;
        overflow: auto;
        box-shadow: 1px 1px silver;
    }
    /* ie6 hack */
    * html .verzoekopmerkingen.history {
        margin-left: 20px;
    }

    .verzoekopmerkingen textarea {
        width: 100%;
        height: 100px;
    }

    .verzoekopmerkingen.history div {
        color: #303030;
        padding: 5px 8px;
        line-height: 100%;
    }


/* werknemer*/
.statusbullet {
    position: absolute;
    bottom: 11px;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background: #eee;
    left: 8px;
    border: solid 1px #fff;
}

    .statusbullet.green {
        background: #3CB300;
    }

    .statusbullet.red {
        background: red;
    }

    .statusbullet.orange {
        background: #FFA31A;
    }

/* Documenten */
.uploaddocform .label {
    width: 120px !important;
}

/*tabcontenttitle*/
h1.tabcontenttitle {
    margin-bottom: 8px;
    color: #555;
    font-size: 18px;
    margin-left: 0px;
    padding-left: 0px;
    font-weight: normal;
}


/* Overzichten --> verloflijst 
-------------------------------------------------*/

h3.verlofoverzichtheader {
    width: 100%;
    margin: 24px 0px 3px 0px;
    padding: 0px 0px 3px 0px;
    border-bottom: solid 0px #eee;
    color: #5580AB;
    color: #555;
    font-size: 14px;
    font-weight: bold;
}

#verloflijsten h3.verlofoverzichtheader:first-child {
}


/* Dashboard werknemer
--------------------------------------------------*/

.budgettenpanel {
    margin-bottom: 5px;
    background: #f9f9f9;
    border: solid 1px #ddd;
    padding: 2px 0px 8px 10px;
    border-radius: 4px;
    overflow: hidden;
}

    .budgettenpanel:hover {
    }

.budgetcategorypanel {
    margin: 2px 0px;
    margin-top: 4px;
    overflow: hidden;
    float: left;
    max-height: 36px;
}

html.mobile.android .budgetcategorypanel {
    margin: 2px 0px;
    margin-top: 0px;
    max-height: 50px;
}

    .budgetcategorypanel:last-child {
        padding-bottom: 0px;
        border-bottom: 0px;
    }

.budgettencategorylabel {
    line-height: 17px;
    margin-left: 4px;
    width: 90%;
    color: #333;
    overflow: hidden;
    font-size: 12px;
    padding-top: 3px;
}

    .budgettencategorylabel span {
        padding: 0px;
        margin: 0px;
        color: #777;
    }

.budgettencategorygraphpanel {
    width: 92%;
    margin-right: 10px;
    height: 15px;
}

.budgettencategorygraph {
    position: relative;
    background: #999;
    width: 100%;
    height: 9px;
    border: solid 1px #aaa;
    border-radius: 5px;
    top: 4px;
    box-shadow: 1px 1px 2px #555 inset;
}

.budgettencategorygraphfill {
    position: absolute;
    background: #3CB300;
    height: 9px;
    border-right: solid 2px #eee;
}

.budgettencateorieproperties {
    clear: both;
    font-size: 12px;
    color: #333;
    line-height: 20px;
    padding-top: 3px;
    margin-left: 5px;
    margin-top: 2px;
}

    .budgettencateorieproperties span {
        display: inline-block;
        margin-right: 6px;
        color: #888;
        min-width: 60px;
        font-size: 12px;
    }

        .budgettencateorieproperties span.bold {
            margin-right: 15px;
            padding-right: 6px;
            color: #333;
            font-weight: normal;
        }

#toevoegbuttonpanel.mobile {
    position: absolute;
    z-index: 1500;
    background: #fff;
    border: solid 1px #ccc;
    box-shadow: 0px 0px 3px #555;
    padding: 10px 6px 2px 10px;
    background: #eee;
    margin-top: 30px;
}

    #toevoegbuttonpanel.mobile .toevoegbutton {
        position: relative;
        display: block;
        float: none;
        clear: both;
        margin-bottom: 12px;
        z-index: 605;
    }

        #toevoegbuttonpanel.mobile .toevoegbutton .linkbutton {
            width: 200px;
            display: block;
            font-size: 13px !important;
            font-weight: bold !important;
            line-height: 24px !important;
            padding-left: 30px;
            height: 24px; /* LeGL 30 */
            z-index: 605;
            position: relative;
        }

            #toevoegbuttonpanel.mobile .toevoegbutton .linkbutton span {
            }

            #toevoegbuttonpanel.mobile .toevoegbutton .linkbutton img {
                top: 7px !important; /* LeGL */
            }



/* openstaand */
.framebeoordelen {
    /*   background:#fff;
    border:solid 2px #ddd;
    margin:0;
    padding:0;
    display:none;

     */
}


/* help */

.faqvragenpanel {
    background: #fff;
    border: solid 1px #ddd;
    padding: 0px 15px;
}

.faqpanelbox {
    list-style: square;
    margin-left: 15px;
    padding-left: 0;
    border-bottom: 0;
}

h3.faqsubheader {
    margin-top: -10px;
    font-weight: normal;
    color: #666;
}

.faqpanelbox li {
    margin: 0;
    padding: 8px 0px;
    cursor: pointer;
    border-bottom: solid 1px #ddd;
    background: #fff;
    font-size: 15px;
    line-height: 17px;
    color: silver;
    position: relative;
}

    .faqpanelbox li span {
        color: #333;
        font-size: 13px;
    }

span.zoekstring {
    display: inline-block !important;
    background-color: yellow !important;
}

span.newfaq {
    position: absolute;
    top: 11px;
    left: -35px;
    color: #fff !important;
    padding: 2px 3px;
    font-size: 10px !important;
    background-color: #2C8437;
    border-radius: 2px;
    z-index: 10;
    line-height: 1;
}


.faqpanelbox li:last-child {
    border: 0;
}

.faqpanelbox li:hover span {
    color: #5580AB;
    text-decoration: underline;
}

.faqvraag {
    font-weight: normal;
    line-height: 22px;
    font-size: 16px;
    color: #5580AB;
    margin-bottom: 8px;
    border-top: solid 1px #ddd;
    padding: 16px 4px 12px 7px;
    position: relative;
    margin-top: 7px;
}

.faqlabel {
    position: absolute;
    line-height: 1;
    top: -8px;
    left: 4px;
    padding: 2px 5px;
    background: #fff;
    font-size: 10px;
    color: #999;
    font-weight: bold;
    text-transform: uppercase;
}

.faqantwoord {
    font-size: 13px;
    line-height: 20px;
    padding-top: 18px;
    padding-left: 3px;
    padding: 18px 4px 10px 7px;
    margin-top: 10px;
    margin-left: 3px;
    padding-bottom: 3px;
    margin-bottom: 10px;
    border-top: solid 1px #ddd;
    position: relative;
    color: #333;
}


    .faqantwoord h2 {
        font-size: 16px;
        font-weight: bold;
    }

    .faqantwoord h3 {
        font-size: 14px;
        font-weight: bold;
    }

    .faqantwoord ul {
        margin-left: 25px;
        margin-bottom: 10px;
    }

    .faqantwoord li {
        margin-bottom: 2px;
    }


.faqtagspanel {
    padding-top: 10px;
    border-top: solid 1px #ddd;
}

ul.faqtags {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-bottom: 15px;
}

    ul.faqtags li {
        float: left;
        margin-right: 7px;
        border: solid 1px #ddd;
        background: #eee;
        font-size: 12px;
        padding: 1px 6px;
        color: #5580AB;
        border-radius: 6px;
    }

        ul.faqtags li:hover {
            cursor: pointer;
        }

.contentbox.faq {
    background: #fff !important;
}



/* verlofverzoek span*/
.tijdselectpanel {
    float: left;
}

.labeltijdvan,
.tijdveld {
    margin-top: 0px;
    border: solid 1px #ccc;
    padding: 4px 6px 4px 6px;
    width: 60px;
    display: block;
    overflow: hidden;
    background-color: #fff !important;
    background-image: url(/Content/Images/Ico/clock.png) !important;
    background-repeat: no-repeat !important;
    background-position: 50px 3px !important;
}

    .labeltijdvan:hover,
    .tijdveld:hover {
        background-color: #eee;
        border: solid 1px #aaa;
        cursor: pointer;
    }

/*OVERZICHTE |  afwezigheidsoverzicht*/

.afwezigheidslegendapanel {
    float: left;
    overflow: hidden;
    border: solid 1px #ddd;
    padding: 0px 0px 0px 0px;
    margin: 10px 3px;
}

    .afwezigheidslegendapanel table {
        table-layout: fixed;
    }


    .afwezigheidslegendapanel tr th,
    .afwezigheidslegendapanel tr td {
        border-bottom: solid 1px #ddd;
        padding: 5px 4px 5px 4px;
        text-align: left;
        font-size: 11px;
        color: #333;
        overflow: hidden;
    }

    .afwezigheidslegendapanel tr:last-child td {
    }

    .afwezigheidslegendapanel tr th {
        background: #eee;
    }

    .afwezigheidslegendapanel tr td {
        white-space: nowrap;
    }

        .afwezigheidslegendapanel tr td span.omschrijving {
            display: inline-block;
            height: 14px;
            vertical-align: bottom;
            overflow: hidden;
            width: 220px;
            white-space: nowrap;
        }



    .afwezigheidslegendapanel .align-right {
        text-align: right;
    }

    .afwezigheidslegendapanel tr td span.budgetcode {
        margin-top: 0px !important;
        width: 20px;
        border-radius: 0px !important;
        text-align: center;
        margin: 0px !important;
        margin-right: 5px !important;
    }

        .afwezigheidslegendapanel tr td span.budgetcode.partieelverzuim {
            position: relative;
        }

            .afwezigheidslegendapanel tr td span.budgetcode.partieelverzuim .verzuimpartieelbottom {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 40%;
                z-index: 10;
                background-color: red;
            }


/* colorpicker epos */
#colorpickercolors {
    display: none;
    border: solid 1px silver;
    padding: 9px 5px 3px 7px;
    width: 211px;
    background: #fff;
    overflow: hidden;
    position: absolute;
    box-shadow: 1px 1px 4px #333;
}

.colorpickerpanel {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0px 4px;
    cursor: pointer;
    padding: 0px;
    line-height: 14px !important;
    border: solid 2px transparent;
}

    .colorpickerpanel:hover {
        opacity: 0.8;
        border: solid 2px #ddd;
    }

.colorpickerselectedcolorpanel {
    padding: 0px 2px;
    background: #fff;
    color: #fff;
}

.colorpickerpanel.selected {
    line-height: 14px !important;
    text-align: center;
}



/* include --> subbudgetten */
.gridviewrowpanel.subbudgetten {
    height: 28px !important;
    line-height: 28px !important;
}

    .gridviewrowpanel.subbudgetten span {
        height: 28px !important;
        line-height: 28px !important;
    }



/*  overzichten  */
a.closebutton {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #999;
    height: 24px;
    width: 24px;
    text-align: center;
    line-height: 24px;
    text-decoration: none;
    background: #eee;
    border: solid 1px #bbb;
    border-radius: 15px;
}

    a.closebutton:hover {
        border-color: red;
        color: red;
    }

.overzichtpopuppanel {
    width: 90%;
    min-height: 100%;
    position: fixed;
    z-index: 998;
    background: #eee;
    display: none;
    max-width: 980px;
    border: solid 1px #ddd;
    padding: 0px 10px 20px 10px;
    box-sizing: border-box;
    box-shadow: 0 0 5px #444;
    overflow: hidden;
}

    .overzichtpopuppanel h1 {
        margin-left: 0px !important;
        margin-bottom: 16px;
        background: transparent;
        font-size: 24px;
        padding-top: 6px;
    }


    .overzichtpopuppanel #reportbox {
        overflow: auto;
        padding-top: 10px;
        border: solid 1px #ddd;
        background: #fff;
        margin-top: 5px;
        padding: 6px 15px;
    }


    .overzichtpopuppanel #afdrukken {
        position: absolute;
        right: 50px;
        top: 12px;
    }

.overzichtpopup {
    display: none;
}



#filterSelected {
    border-top: solid 1px #ddd;
    padding: 12px 10px 0px 10px;
    margin-bottom: 10px;
    position: relative;
}


    #filterSelected .leftcolumn {
        vertical-align: top;
        display: inline-block;
        max-width: 70%;
        width: 70%;
    }

    #filterSelected .rightcolumn {
        vertical-align: top;
        display: inline-block;
        max-width: 25%;
        width: 25%;
    }

h4.filterselectieheader {
    position: absolute;
    top: -17px;
    left: 3px;
    color: #333;
    font-weight: normal;
    background: #eee;
    font-size: 13px;
    color: #333;
    padding: 3px 8px;
    border: solid 1px #ddd;
    display: none;
}

.formrow.filterselected {
    display: block;
    border-bottom: solid 0px #ddd;
    padding: 2px 0px 0px 0px !important;
    line-height: 17px;
    height: 17px;
    white-space: nowrap;
}

    .formrow.filterselected:last-child {
        border: 0;
    }

    .formrow.filterselected span {
        display: inline-block;
        padding: 0px 8px 0px 0px;
        margin-right: 0px;
        line-height: 12px;
        font-size: 11px;
        color: #5580AB;
        color: #333;
    }

        .formrow.filterselected span.checkbox {
            padding: 0px 8px 0px 14px;
            background: transparent url(/Content/Images/Ico/enabled.png) no-repeat;
        }


        .formrow.filterselected span:last-child {
            border-right: 0;
        }

        .formrow.filterselected span.filterselectedheader {
            font-weight: bold;
            border-color: transparent;
            background: transparent !important;
            padding-left: 0 !important;
            width: 66px;
            color: #111;
        }

/* urenselectie panel */
.urenselectievaluelabel {
    color: #333 !important;
    border: solid 1px #bbb;
    background: #FFF;
    padding: 0px 10px;
    border-radius: 3px;
    cursor: pointer;
    width: 30px;
}

.urenselectietotaalpanel {
    width: 300px;
    z-index: 500;
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
    border: solid 1px #ccc;
    background: #f5f5f5;
    padding: 0px 0px;
    box-shadow: 0 0 2px #999;
}

    .urenselectietotaalpanel .actionpanel {
        margin-top: 5px;
        padding-bottom: 10px;
    }

    .urenselectietotaalpanel div {
        float: none;
        clear: both;
    }

div.urenselectieurenpanel,
div.urenselectieminutenpanel {
    padding: 3px 1px;
    text-align: center;
}

div.urenselectieurenpanel {
    border-bottom: solid 1px #ddd;
    background: #eee;
}

.clsTmp {
    display: inline-block;
    clear: none !important;
    width: auto;
}

.urenselectietotaalpanel span {
    display: inline-block !important;
    margin: 2px;
    text-align: center;
    padding: 1px 3px !important;
    border: solid 1px #ccc;
    color: #555 !important;
    cursor: pointer;
    float: none !important;
    background: #fff;
    font-size: 14px;
}

    .urenselectietotaalpanel span:hover {
        border: solid 1px #5580AB !important;
        color: #3B5978 !important;
        background: #EEF3F6;
    }

.urenselectietotaalpanel div.urenselectieurenpanel span {
    width: 15px !important;
}

.urenselectietotaalpanel div.urenselectieminutenpanel span {
    color: #999 !important;
    width: 45px;
    margin: 4px;
    padding: 2px 5px;
}


    .urenselectietotaalpanel div.urenselectieminutenpanel span.attention {
        color: #555 !important;
    }

        .urenselectietotaalpanel div.urenselectieminutenpanel span.attention.thirty {
            color: #333 !important;
        }


        .urenselectietotaalpanel div.urenselectieminutenpanel span.attention.sixty {
            color: #111 !important;
        }

.urenselectietotaalpanel div span.selected {
    border: solid 1px #5580AB !important;
    color: #3B5978 !important;
    background: #EEF3F6;
}

/*
#werknemeriframescrollpanel
{
	border:solid 1px green;
}

#tabcontent
{
	border:solid 1px blue;
	overflow:hidden;
}
#ifrWerkNemer, #ifrGroep
{
	border:solid 1px gold;
}
*/



.listpopup {
    background: #fff;
    z-index: 1010;
    display: none;
    top: 10px;
    left: 10px;
    border: solid 1px #ddd;
    position: absolute;
    clear: both;
    width: 410px;
    padding: 10px 15px;
    box-shadow: 1px 1px 5px #333;
}


    .listpopup h2 {
        font-family: arial;
        font-size: 16px;
        margin: 0;
        padding-bottom: 14px;
    }

.listpopuprow {
    margin: 0;
    padding: 0;
    height: 28px;
    line-height: 28px;
    border-bottom: solid 1px #ddd;
}

.listpopupheader {
    border-top: 0 !important;
}

.listpopuprow span {
    height: 20px;
    line-height: 20px;
}

.listpopupclose {
    position: absolute;
    top: 5px;
    right: 5px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    color: #777;
    text-decoration: none;
}

    .listpopupclose:hover {
        color: #fff;
        background: red;
    }

.listpopuplink {
    color: #fff;
    font-size: 11px;
    background: #5580AB;
    padding: 1px 0px;
}

/* LeG */
html.mobile .labeltijdvan,
html.mobile .tijdveld {
    margin-top: 0px;
    border: solid 1px #ccc;
    padding: 4px 6px 4px 6px;
    width: 65px; /* LeGL 60 */
    display: block;
    overflow: hidden;
    background-color: #fff !important;
    background-image: url(/Content/Images/Ico/clock.png) !important;
    background-repeat: no-repeat !important;
    background-position: 55px 7px !important; /* LeGL 50 7*/
}

html.mobile .urenselectievaluelabel {
    color: #333 !important;
    border: solid 1px #bbb;
    background: #FFF;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 0px;
    border-radius: 3px;
    cursor: pointer;
    width: 30px;
    height: 29px;
}

html.mobile .urenselectietotaalpanel {
    width: 210px;
    z-index: 500;
    position: absolute;
    top: 5px;
    left: 5px;
    display: none;
    border: solid 1px #ccc;
    background: #f5f5f5;
    padding: 0px 0px;
    box-shadow: 0 0 2px #999;
    position: relative;
    left: -150px;
    top: -20px;
}


/* openstaand */
html.mobile .framebeoordelen {
    margin: 5px;
}

/* Beheer --> Werknemers --> budgetten --> urenopbouw
------------------------------------------------------*/
.urenopbouw
{
    position:relative;
	width:100%;
}

.urenopbouw .categorypanel
{
    padding-bottom:8px;
    padding-top:0px;
    background:#fff;
    border:solid 1px silver;
    border-top:0px;
}

.urenopbouwpanelscroll
{
} 
.urenopbouw .formrow 
{
    padding:0px 5px;
    margin:0px;
    border:solid 0px green;
    background:#fff;
	clear:both;
	white-space:nowrap;
	box-sizing:border-box;
}

.urenopbouw .formrow.persoonlijk
{
    border:solid 1px silver;
    border-top:0px;
}

.urenopbouw .formrow span
{
	border:solid 0px;
	margin:0px;
	padding:3px 5px 3px 0px;
	color:#505050;
	display:inline-block;
	float:none;
}

.urenopbouw.mobile .formrow span
{
	font-size:11px !important;
}

.urenopbouw .formrow.budgetheader
{
    margin-top:2px;
    background:#eee;
    border:solid 1px silver;
}
.urenopbouw .formrow.budgetfooter
{
    font-weight:bold;
    background:#f7f7f7;
    border:solid 1px silver;
    padding:2px 2px 1px 8px;
}
.urenopbouw .formrow.budgetfooter span
{
    color:#000;
    font-size:13px;
}

.urenopbouw .formrow.expired span
{
	color:darkred;
	font-weight:normal !important;
}
.urenopbouw .formrow.negative span
{
	color:red !important;
	font-weight:normal !important;
}
.urenopbouw .formrow.negativeover span
{
	color:darkred !important;
	font-weight:normal !important;
}
.col5.negative
{
	color:red !important;
}
.urenopbouw .formrow.level1
{
    border-bottom:solid 1px #eee !important;
}

.urenopbouw .formrow.level1 span
{
    color:#000 !important;
}
.urenopbouw .formrow.level2 span
{
    padding-top:4px;
    padding-bottom:1px;
    line-height:19px; 
  
}

.urenopbouw .formrow.level3 span
{
	padding-top:1px !important;
	line-height:18px !important;
}


.urenopbouw .formrow.level1 span.col5.negative
{
    color:Red !important;
}

.urenopbouw .formrow span.col1
{
}
span.col1.persoonlijk
{
}


.urenopbouw.persoonlijk .formrow span
{
	border:solid 0px;
	margin:0px;
	padding:3px 5px 3px 0px;
	color:#505050;
	display:inline-block;
	float:none;
	overflow:hidden;
}

.urenopbouw.persoonlijk.mobile .formrow span {
    padding: 3px 1px 3px 0px;
}

.urenopbouw .formrow span.col1 span
{
	padding:0px;
	border:0px;
	border:solid 0px;
}

.urenopbouw .formrow .col1 span.description
{
	width:auto;
}
.urenopbouw .formrow .col1 span.description.level1
{
	
}
.urenopbouw .formrow .col1 span.description.level2
{
	margin-left:20px;
}
.urenopbouw .formrow .col1 span.description.level3
{
	margin-left:30px;
}
.urenopbouw .formrow.negativeover .col1 span.description.level3
{
	margin-left:20px;
}

.urenopbouw .formrow .col1 .catbullet
{
    display:inline-block;
    border:solid 2px #ddd;
    width:11px !important;
    height:11px;
    border-radius:6px;
    line-height:11px;
    padding:0px;
    margin:0px;
	vertical-align:middle;
	margin-right:3px;
}

.urenopbouw .formrow .col2
{
	text-align:center;
	width:80px;

}
.urenopbouw .formrow.level3 .col2
{
}


.urenopbouw .formrow .col2 img
{
	position:absolute;
	right:-2px;
}


.urenopbouw .formrow .col3, .urenopbouw .col4, .urenopbouw .col5
{
	width:65px;
	text-align:right;
	/* position:relative; */
}


.urenopbouw .col5 {
    width: 80px;
}

.urenopbouw .col2.expired,
.urenopbouw .col5.expired
{
	color:darkred;
}

.urenopbouw .col5.expired
{
	text-decoration: line-through;
}

.urenopbouw .col5.expiredtotal
{
	color:darkRed;
}


.budgetheader .col1
{
	width:182px;
}


.col2.tobeexpired,
.col5.tobeexpired
{
	color:#ff6600 !important;
}


.urenopbouw img
{
    cursor:pointer;
	width:14px;
}

.urenopbouw .prognose
{
    margin-top:15px;
    color:Gray;
    border:solid 1px silver;
    background:#fafafa;
}
.urenopbouw .prognose:first-child
{
    border-top:0px;
}

a.editablebutton
{
    position:absolute;
    border:solid 0px silver;
    width:20px;
    height:20px;
    right:-20px;
    text-decoration:none;
    z-index:10000;
}

/* voor popup opmerkingen */
.formrow.visible
{
    overflow:visible;
    min-height:30px;
    z-index:1;
}

.remarkpanel
{
    position:absolute;
    display:none;
    background:#ddd;
    border:solid 1px silver; 
    box-shadow:3px 3px 3px 0 #777;
    padding:5px 5px; 
    overflow:visible;
    top:22px;
    right:-50px;
    width:300px;
    max-height:120px;
    z-index:999;
    text-align:left;
    color:#202020;
}
.remarkpanel span
{
	color:#202020 !important;
}

.remarkpanel .remarks
{
    width:278px;
    max-height:110px;
    overflow:auto;
    border:solid 1px silver !important;
    background:#fefefe;
    padding:5px 10px !important;
    display:block;
    z-index:111;
}
a.remarkclosebutton
{
    border:solid 2px #202020;
    background:#888;
    box-shadow:3px 0px 3px 0 #777;
    padding:0px 4px;
    position:absolute;
    top:-18px;
    right:0px;
    color:#fff;
    font-weight:bold;
    font-size:10px;
    line-height:15px;
    text-decoration:none;
}
a.remarkclosebutton:hover
{
    background:#202020;
}

a.remarkopener
{
    position:absolute;
    cursor:pointer;
    cursor:hand;
    right:-15px;
    top:2px;
    border:0px;
}


/* detail nivea panel & buttons */
.collapsebuttonpanel
{
    border:solid 1px #ccc;
    Background:#efefef;
    padding:3px 9px;
    border-radius:8px;
}

a.collapsebutton
{
    float:right;
    margin-right:4px;
    padding:2px 6px;
    text-decoration:none;
    color:#333;
    width:12px;
    height:14px;
    text-align:center;
    border-radius:6px;
    position:relative;
    box-shadow:1px 1px 1px 0 #999;
    background:#eee;
    border:solid 1px #ccc;
}

/* mouse over link */
.collapsebutton a:hover {
    color: hotpink;
	box-shadow:1px 1px 5px 0 #444;
}

a.collapsebutton:hover
{
    box-shadow:1px 1px 5px 0 #444;
}
a.collapsebutton.active
{
    background:#fff;
    box-shadow:inset 1px 1px 2px #555;
    border:solid 1px #ddd;

}
a.collapsebutton img
{
    position:absolute;
    top:4px;   
    left:6px;
}
a.collapsebutton img.edit
{
    position:absolute;
    top:1px !important;   
    left:5px;
}

.budgettypepanel
{
     border:solid 1px #bbb;
     margin-bottom:10px;
     padding:5px 8px 10px 8px;
     box-shadow:0 0 2px #555;
}

.contentbox.iframe h2.persoonlijk,
h2.persoonlijk
{
	margin-top:15px !important;
}



.urenverbruikpanel
{
	border:solid 0px #ddd;
	border-bottom:solid 0px #ddd;
	padding:2px 0px 5px 0px;
	margin:0px 10px 3px 10px;
}
.urenverbruikpanel h2
{
	margin:0;
	padding:0;
	margin-bottom:5px;
	font-size:11px;
	color:#333;
	text-transform:uppercase;
	letter-spacing:1;
	display:none;
}
.urenverbruikpanel div
{
	height:20px; /* was 19*/
	line-height:20px; /* was 19*/
	white-space:nowrap;
	padding:0 10px 0 15px;
	border-bottom:solid 1px #eee;
	position:relative;
}
    .urenverbruikpanel div span {
        display: inline-block;
        width: 64px;
        height: 0px !important; /* was 19*/
        line-height: 0px !important; /* was 19*/
        color: #666 !important;
        font-size: 11.5px;
        font-style: italic;
        padding-right: 2px;
    }
.urenverbruikpanel div span.verbruiktomschrijvingtype
{
	width:60px !important;
}
.urenverbruikpanel div span.verbruiktvolgnr
{
	width:32px;
	margin-right:10px;
	text-align:right;
	color:#666 !important;
	font-size:11px;
}
.urenverbruikpanel div span.verbruiktdatum
{
	width:32px !important;
}

.urenverbruikpanel div.selectedrecord
{
	background:#DEE6F7;
	color:#000 !important;
}

.urenverbruikpanel div span.verbruikt
{
	width:214px;
}
.urenverbruikpanel div span.verbruikttotaal
{
	width:95px !important;
	font-size:11px !important;
	color:#666 !important;
}

.urenverbruikpanel div.Negatief span
{
	color:red !important;
}
.urenverbruikpanel div.Verzuim span
{
	color:darkred !important;
}
.urenverbruikpanel div.Verplicht span
{
	color:#333 !important;
}


/* 
Opmaak tijdregistratie
*/

.tijdregistratieiframe 
{
    height:370px;
    width:100%;
}

::-webkit-input-placeholder { /* Edge */
    color: GrayText;
    font-size: 11px;
    font-style: italic;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: GrayText;
    font-size: 11px;
    font-style: italic;
}

::-moz-placeholder { /* Firefox 19+ */
    color: GrayText;
    font-size: 11px;
    font-style: italic;
}

:-moz-placeholder { /* Firefox 18- */
    color: GrayText;
    font-size: 11px;
    font-style: italic;
}

::placeholder {
    color: GrayText;
    font-size: 11px;
    font-style: italic;
}