/* fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

/* common */
* { margin: 0px; padding: 0px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-size: 18px; }
html, body { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 12px; color: #000; overflow-x: hidden; }
html { height:100%; }
body { min-height:100%; position: relative; }
input, select, textarea { font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 12px; color: #8c806e; }
img { border: 0px; display: block; max-width: 100%; }
a, input { outline: none; text-decoration: none; }
.auto-width { width: auto; display: inline-block }
.no-margin { margin: 0px; }

/* bootstrap fixes */
.form-group { margin-bottom: 5px; }
.form-control { font-size: 18px; font-weight: 300; outline: none; box-shadow: none; -webkit-box-shadow: none; border: 1px solid rgba(0, 0, 0, 0.1); }
.form-control:focus { outline: none; box-shadow: none; -webkit-box-shadow: none; }
.form-control[readonly] { background: #fff; }
.container-fluid { margin: 0px 35px; }
.well { background: #f7f7f7; border: none; }
.alert { border-radius: 0px; border: none; font-size: 15px; }

/* colors */
.btn { border: none; outline: none; box-shadow: none; text-transform: uppercase }
.btn-primary { background: #b7cf3d; }
.pretty.primary input:checked+label i:before { background-color: #b7cf3d !important; border: none !important; }
.pretty.primary input:checked+label i:after { border-color: #b7cf3d; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:hover { background: #5f8e3f; }
.btn-rounded { border-radius: 50%; height: 40px; width: 40px; text-align: center; line-height: 1.5; }

/* timepicker */
.ui-widget-header { border: none; background: transparent; text-transform: uppercase; color: rgba(255, 255, 255, 0.2); padding: 10px 0px; font-weight: 300; }
.ui-timepicker-table { background: #545454; padding-bottom: 10px; }
.ui-timepicker-table table { margin: 0px 10px; }
.ui-timepicker-table td { vertical-align: top; }
.ui-timepicker-table td.ui-timepicker-hours { padding-bottom: 10px; }
.ui-timepicker-table td a { text-align: center; width: 50px; height: 50px; padding: 15px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.2); }
.ui-state-default, .ui-widget-content .ui-state-default { background: rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.3); border: none; }
.ui-state-active, .ui-widget-content .ui-state-active { background: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.8); }
.ui-timepicker-hours, .ui-timepicker-minutes { padding: 0px 10px; }

/* datepicker */
.ui-widget-header { color: #fff; }
.ui-datepicker { background: #545454; width: auto; }
.ui-datepicker th { color: #fff; }
.ui-datepicker td { vertical-align: top; }
.ui-datepicker td a { text-align: center; width: 50px; height: 50px; padding: 15px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.2); }
.ui-widget-header .ui-state-hover { background: rgba(255, 255, 255, 0.2); border: none; color: #fff; }
.ui-widget-header .ui-state-hover .ui-icon { background-image: url(../images/ui-icons_ffffff_256x240.png); }

/* selects */
.selectric-wrapper { display: inline-block; width: 25%; margin-right: 5px; width: 100%; }
.selectric { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; background: #fff; box-shadow: none; }
.selectric .button { border-left: 1px solid rgba(0, 0, 0, 0.1); }

/* tables */
.table thead tr th a { text-decoration: none }
.table thead tr th img { display: inline-block }

.breadcrumb .back {
    position: absolute;
    left: 6px;
}

#background-filter { z-index: 1; position: fixed; float: left; min-width: 100%; min-height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.65); }

/* header */
#header { z-index: 2; position: relative }

    #header .navigation { width: 100%; background: #fff; height: 65px; }
    #header .navigation .logo { display: inline-block; margin-left: 50px; }
    #header .navigation .logo img { max-height: 100%; }
    #header .navigation .menu { float: right; margin: 10px; margin-right: 20px; padding-top: 10px; }
    #header .navigation .menu ul { list-style: none; }
    #header .navigation .menu ul li { display: inline-block; padding: 0px 10px; border-left: 1px solid rgba(0, 0, 0, 0.1); text-align: center; list-style-type: none; }
    #header .navigation .menu ul li:first-child { border-left: none; }
    #header .navigation .menu ul li span { font-size: 30px; font-weight: 700; height: 30px; width: 30px; }
    #header .navigation .menu ul li a { color: #000; }
    #header .navigation .menu ul li a:hover { text-decoration: none; }

    #header .breadcrumb { width: 100%; background: #b7cf3d; border-radius: 0px; padding: 15px 50px; }
    #header .breadcrumb a:hover { text-decoration: none }
    #header .breadcrumb i { color: #fff; font-size: 20px; padding-right: 20px; }
    #header .breadcrumb h2 { font-size: 22.5px; color: #fff; font-weight: 500; margin: 0px; display: inline-block }

/* content */
#content { z-index: 2; position: relative }

    /* block login */
    #content .block-login { margin-top: 30px; }
    #content .block-login input.form-control { margin-bottom: 5px; padding-left: 40px; }
    #content .block-login #input-user { background-image: url(../images/icon_inloggen_gebruiker.png); background-position: center left 10px; background-repeat: no-repeat; }
    #content .block-login #input-password { background-image: url(../images/icon_inloggen_wachtwoord.png); background-position: center left 12px; background-repeat: no-repeat; }
    #content .block-login label span { line-height: 1.8; color: #000; }
    #content .block-login .forgotten { text-align: center; margin-top: 10px; }
    #content .block-login .forgotten a { color: #000; text-decoration: underline; font-size: 18px; font-weight: 500; }
    #content .block-login .btn { padding: 10px; margin-top: 20px; }

    /* block dashboard */
    #content .link-dashboard:hover { text-decoration: none; }
    #content .link-dashboard { text-decoration: none; color: transparent }
    #content .link-dashboard label { text-decoration: none; color: #000; cursor: pointer; }

    #content .block-dashboard { text-align: center; border: none; background-color: #fff; margin-top: 10px; margin-bottom: 0px; }
    #content .block-dashboard span { font-size: 50px; color: #b7cf3d; margin-bottom: 15px; display: block; }
    #content .block-dashboard h2 { text-transform: uppercase; font-weight: 400; color: #000; font-size: 25px; -webkit-margin-before: 0em; -webkit-margin-after: 0em;  -webkit-margin-start: 0px; -webkit-margin-end: 0px; }
    #content .block-dashboard h3 { font-weight: 300; color: #000; font-size: 25px; padding-bottom: 15px; margin-top: 0px; -webkit-margin-before: 0em; -webkit-margin-after: 0em;  -webkit-margin-start: 0px; -webkit-margin-end: 0px; margin-bottom: 21px; }
    #content .block-dashboard .icon-inline span { display: inline-block; color: #d5d5d5; }

    /* block weeks */
    #content .block-weeks { display: block; margin-top: -20px; width: 100%; background-color: #545454; padding: 15px; padding-left: 50px; margin-bottom: 15px; }
    #content .block-weeks.in-content { border-radius: 5px; }
    #content .block-weeks.no-margin { margin-bottom: 0px; }
    #content .block-weeks a { text-decoration: none; }
    #content .block-weeks ul { -webkit-margin-before: 0em; -webkit-margin-after: 0em;  -webkit-margin-start: 0px; -webkit-margin-end: 0px; }
    #content .block-weeks ul li { width: 140px; font-size: 19px; text-align: center; margin-right: 10px; padding: 5px 15px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.2); display: inline-block; color: rgba(255, 255, 255, 0.8) }
    #content .block-weeks ul li strong { font-weight: 700; display: block; font-size: 19px; }
    #content .block-weeks ul li span { text-transform: uppercase; }
    #content .block-weeks ul li.active { border: 2px solid #b7cf3d }
    #content .block-weeks ul li.active strong,
    #content .block-weeks ul li.active span { color: #fff; }

    #content .block-weeks span { display: inline-block; color: #fff; font-size: 18px; margin-right: 10px; margin-top: 2px; }
    #content .block-weeks ul.week-numbers { width: auto; display: inline-block; }
    #content .block-weeks ul.week-numbers li { width: auto; padding: 5px 0px; }
    #content .block-weeks ul.week-numbers li a { padding: 5px 15px; color: #fff; }

    /* block stat */
    #content .block-stat { border-radius: 5px; background-color: rgba(0, 0, 0, 0.15); padding: 10px; padding-left: 60px; margin-top: 10px; }
    #content .block-stat:first-child { margin-top: 0px; }
    #content .block-stat label { font-weight: 300; font-size: 19px; text-transform: uppercase; line-height: 1; display: block; }
    #content .block-stat strong { display: inline-block; font-weight: 500; font-size: 19px; line-height: 1 }

    #content .block-stat#stat-hour { background-image: url(../images/icon_reguliere_uren.png); background-position: center left 10px; background-repeat: no-repeat; }
    #content .block-stat#stat-overhour { background-image: url(../images/icon_overuren.png); background-position: center left 10px; background-repeat: no-repeat; }
    #content .block-stat#stat-leavesaldo { background-image: url(../images/icon_verlof.png); background-position: center left 10px; background-repeat: no-repeat; }
    #content .block-stat#stat-name { background-image: url(../images/icon_account.png); background-position: center left 10px; background-repeat: no-repeat; }
    #content .block-stat#stat-contract { background-image: url(../images/icon_contract.png); background-position: center left 10px; background-repeat: no-repeat; }
    #content .block-stat#stat-hourrate { background-image: url(../images/icon_uurtarief.png); background-position: center left 10px; background-repeat: no-repeat; }

    /* block hour */
    #content .block-uur .table { border-collapse: separate; border-spacing: 0 5px; }

    #content .block-uur .table thead tr th, #content .block-uur .table tbody tr td { border: none; }
    #content .block-uur .table thead tr th:first-child { font-weight: 700; font-size: 30px; line-height: 1.2; padding: 0px; width: 80px; }
    #content .block-uur .table thead tr th:last-child { padding: 0px; }
    #content .block-uur .table thead tr th:last-child a span { display: inline-block; padding-top: 6px; }
    #content .block-uur .table thead tr th.hour span { font-weight: 500; font-size: 19px; line-height: 1.2; padding: 0px; padding-bottom: 3px; }
    #content .block-uur .table thead tr th.hour i { font-weight: 700; font-size: 19px; line-height: 1.2; padding: 0px; padding-bottom: 0px; margin-right: 10px; }
    #content .block-uur .btn-rounded { border-radius: 50%; height: 40px; width: 40px; text-align: center; line-height: 1.5; }

    #content .block-uur .table tbody tr.row-add { border-radius: 5px; display: none; }
    #content .block-uur .table tbody tr.row-add td { background-color: #fff; padding-left: 20px; border-radius: 10px; padding-top: 12px; }
    #content .block-uur .table tbody tr.row-add input[type="text"] { padding: 0px 10px; width: 15%; height: 31px; vertical-align: top; margin-right: 5px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.1); }
    #content .block-uur .table tbody tr.row-add .btn { width: 17%; vertical-align: top; float: right; }
    #content .block-uur .table tbody tr.row-add .selectric-wrapper { width: 22%; }

    #content .block-uur .table tbody tr.row-hour {  }
    #content .block-uur .table tbody tr.row-hour td { background-color: #fff; font-size: 17.5px; color: rgba(0, 0, 0, 0.6); vertical-align: middle; }
    #content .block-uur .table tbody tr.row-hour td:first-child { padding-left: 20px; color: #000; font-weight: 700; -webkit-box-shadow: inset 7px 0px 0px 0px #b9cf3c; -moz-box-shadow: inset 7px 0px 0px 0px #b9cf3c; box-shadow: inset 7px 0px 0px 0px #b9cf3c; border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
    #content .block-uur .table tbody tr.row-hour td:last-child { vertical-align: middle; color: #ef400a; padding-right: 25px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
    #content .block-uur .table tbody tr.row-hour td:last-child a { vertical-align: middle; color: #ef400a; padding-right: 25px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; }

    /* block overview */
    #content .block-overview .table { border-collapse: separate; border-spacing: 0 5px; }
    #content .block-overview .table thead tr th { font-size: 20px; font-weight: 600; text-transform: uppercase; border-bottom: none; }
    #content .block-overview .table tbody tr {  }
    #content .block-overview .table tbody tr td { background-color: #fff; font-size: 17.5px; color: rgba(0, 0, 0, 0.6); }
    #content .block-overview .table tbody tr td a { color: #000 }
    #content .block-overview .table tbody tr td:first-child { padding-left: 20px; color: #000; font-weight: 700; -webkit-box-shadow: inset 7px 0px 0px 0px #b9cf3c; -moz-box-shadow: inset 7px 0px 0px 0px #b9cf3c; box-shadow: inset 7px 0px 0px 0px #b9cf3c; border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
    #content .block-overview .table tbody tr td:last-child { border-top-right-radius: 7px; border-bottom-right-radius: 7px; }

    /* block message */
    #content .block-message .btn { margin-bottom: 5px; }
    #content .block-message h3 {  }
    #content .block-message ul { list-style: none; }
    #content .block-message ul li { background-image: url(../images/icon_bericht.png); background-position: center left 15px; background-repeat: no-repeat; padding: 10px; padding-left: 60px; background-color: rgba(0, 0, 0, 0.15); border-radius: 5px; margin-bottom: 5px; }
    #content .block-message ul li.active { background-color: #fff; -webkit-box-shadow: inset 7px 0px 0px 0px #b9cf3c; -moz-box-shadow: inset 7px 0px 0px 0px #b9cf3c; box-shadow: inset 7px 0px 0px 0px #b9cf3c; }
    #content .block-message ul li a:hover {  text-decoration: none; }
    #content .block-message ul li span, #content .block-message ul li div { display: block; color: #000; font-weight: 300; text-decoration: none; }
    #content .block-message ul li strong { display: block; color: #000; font-size: 17px; font-weight: 500;  }

    /* message content */
    #content .message-content { background-color: #fff; }
    #content .message-content p { color: #a3a3a3; font-size: 18px; font-weight: 300; }
    #content .message-content a { display: block; margin-bottom: 5px; color: #000; }
    #content .message-content strong { font-size: 20px; margin-bottom: 15px; display: inline-block; }
    #content .message-content span { font-weight: 300; font-size: 15px; }

    /* block gegevens */
    #content .block-gegevens { background-color: #fff; }
    #content .block-gegevens ul { list-style: none; }
    #content .block-gegevens ul li div { display: inline-block; font-size: 18px; }
    #content .block-gegevens ul li .title { width: 10%; color: #a3a3a3; }
    #content .block-gegevens ul li .desc { width: 80%; color: #000; }

    /* block graph | Statistieken pagina */
    #content .block-graph .table { border-collapse: separate; border-spacing: 0 5px; }
    #content .block-graph .table thead tr th { font-size: 20px; font-weight: 600; text-transform: uppercase; border-bottom: none; }
    #content .block-graph .table tbody tr {  }
    #content .block-graph .table tbody tr td { vertical-align: middle; background-color: rgba(0, 0, 0, 0.15); font-size: 17.5px; color: rgba(0, 0, 0, 0.6); }
    #content .block-graph .table tbody tr.active td { background-color: #fff; }
    #content .block-graph .table tbody tr.active td:first-child { -webkit-box-shadow: inset 7px 0px 0px 0px #b9cf3c; -moz-box-shadow: inset 7px 0px 0px 0px #b9cf3c; box-shadow: inset 7px 0px 0px 0px #b9cf3c; }
    #content .block-graph .table tbody tr td a { color: #000; font-weight: 400;  }
    #content .block-graph .table tbody tr td:first-child { padding-left: 20px; color: #000; border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
    #content .block-graph .table tbody tr td:last-child { border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
    #content .block-graph .table tbody tr td progress { height: 10px; width: 150px; border: 2px solid rgba(0, 0, 0, 0.2); }
    #content .block-graph .table tbody tr td progress[value] { appearance: none; background-color: whiteSmoke; border-radius: 3px; box-shadow: 0 2px 3px rgba(0,0,0,.5) inset; color: royalblue; }
    #content .block-graph .table tbody tr td progress[value]::-webkit-progress-bar { background-color: #fff; }
    #content .block-graph .table tbody tr td progress[value]::-webkit-progress-value { background-color: #b7cf3d; }
    #content .block-graph .table tbody tr.right td { background-color: #fff; }
    #content .block-graph .table tbody tr td span.hours { width: 85px; text-align: right; display: inline-block; }

/* pages fix */
#page-home .col-md-4, #page-home .col-md-8 { padding-right: 5px; padding-left: 5px; }
#page-home .block-stat { background-color: #fff; padding-left: 10px; text-align: center; margin-top: 10px !important; }
#page-home .block-stat img { margin: 0 auto; display: inline-block; padding-right: 15px; }
#page-home .block-stat label { display: inline-block; font-weight: 400; vertical-align: middle; font-size: 25px; padding-top: 5px; }

.btn-primary{
	border: 2px solid #b7cf3d;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}
.btn-left{
	float: left;
    outline: 0px;
    border: 0;
    background-color: #000;
}
.btn-right{
	float: right !important;
    outline: 0px;
    border: 0;
    background-color: #000;
}
.div_monthbox{
	height: 60px;
    background-color: #000;
    position: fixed;
    margin-top: 121px;
    z-index: 999999999;
}
.activeheader{
	position: fixed;
    z-index: 999;
    width: 100%;
}
.rowbox{
	margin-top: 210px;
    margin-bottom: 20px;
}
#month_year{
	text-align: center;
	color:#fff;
	background-color:#000;
	position: fixed;
	width: 100%;
	
}
.ileft{
	font-size:57px;color:#fff; margin-left:15px;
}
.iright{
	font-size:57px;color:#fff; margin-right:15px;
}
.div_month{
	font-size: 25px;
    padding-top: 13px;
    left: 40px;
    right: 40px;
    max-width: 80%;
}

.planning_div{
	background-color: #fff;
    min-height: 70px;
    border-radius: 5px;
    padding: 5px;
    text-align: -webkit-center;
    margin-top: 4px;
    overflow: auto;
	left: 0px;
    text-align: -webkit-auto;
}

.planning_actie_div{
	height: 25px;
	width: 25px;
	float:left;
	margin-left:3px;
	border:1px solid #ccc;
	border-radius:2px;
}
<!--opbouw = 2-->
.planning_type_div2{
	background-color:#390;
}
<!--afbouw = 3-->
.planning_type_div3{
	background-color: #fbf45f;
}
<!--beursdag = 9-->
.planning_type_div9{
	background-color: #999;
}
<!--verlof = 4-->
.planning_type_div4{
	background-color: #F00;
}
<!--productie = 5-->
.planning_type_div5{
	background-color: #FFF;
}
.planning_bed_div{
	height: 25px;
	width: 25px;
	background-color: #fff;
	float:left;
	margin-left:3px;
	border:1px solid #ccc;
	border-radius:2px;
}
.planning_tr1{
	
}
.planning_td1{
	font-size: 22px;
    width: 90px;
    border-right: 1px solid #ccc;
}
.planning_td2{
	width: 50px;
	padding-left: 15px;
}
.planning_td3{
    font-weight: 500;
	overflow:hidden;
}
.planning_td4{
	border-right: 1px solid #ccc;
}
.planning_td5{
	width:20px;
	padding-left: 15px;
}
.planning_span1{
	font-weight: 400;
	text-transform:uppercase;
}
.planning_span2{
	font-weight: bold;
    margin-left: 7px;
}
.planning_img{
	width:25px;
}
#m_y{
    text-transform: capitalize;
	font-size: 25px;
}
    
@media only screen and (min-width: 600px) {
	#m_y{	
		padding-left: 10%;
	}
}
@media only screen and (max-width: 600px) {
	#m_y{
		width: 100%;
		margin-left: 0%;	
	}
}