/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 3-jun-2016, 15:59:16
    Author     : thaulk
*/

/***************** main *********************/


/*************** algemeen *******************/


.left {
    float: left; 
}

.right {
    float: right; 
}

.top {
    margin-top: 1em; 
}

.half-top {
    margin-top: 0.5em; 
}


.error {
    color: red; 
}

.confirm {
    color: green; 
}

.space {
    margin-right: 1em; 
    margin-left: 1em;
}

.bold {
    font-weight: bolder; 
}

.inline {
    display: inline-block; 
}

#download {
    text-decoration: none; 
    color: #FFFFFF; 
    border-color: #CCCCCC; 
    border-width: 1px; 
} 
#download:hover {
    color: #17665F; 
}

.center{
    text-align: center; 
}
/******************* header ************/

header#header{
    display: block; 
    height: 48px; 
    background-color: #26A69A; 
    width: 100vw; 
    overflow: hidden; 
}

header h3 {
    display: inline-block; 
    margin-top: 12px; 
}

header h3 a, header h3 a:hover, header h3 a:focus {
    text-decoration: none;
    color: inherit; 
}

header #logout {
    margin-top: 7px;
}

header h4 {
    display: inline-block;
    margin-top: 13.9px; 
    margin-right: 28px; 
    color: #17665F;
}

header h4 em {
    color: black; 
}

#exception.alert {
    margin-top: 1em; 
}

#exception.alert.alert-warning{
    background-color: #E88672; 
    color: #301C18; 
}

#user {
    min-width: 200px;
}

/****************** login ***************/
#loginForm{
    height: 100vh; 
}
@media screen and (min-width:768px){
    #loginForm{
        margin-top: 10vh; 
        height: inherit; 
    }
    #loginForm button.btn-primary {
        width: 65px; 
    }
}
#loginForm.col-xs-12 {
    padding-left: 0; 
    padding-right: 0; 
}

#loginForm.panel-primary > .panel-heading {
    background-color: #26A69A;
    border-color: #26A69A; 
}

#loginForm.panel-primary {
    border-color: #26A69A;   
}

#loginForm .btn-primary {
    background-color: #26A69A;
    border-color: #26A69A; 
    width: 100%; 
    
}

#loginForm .btn-primary:hover {
      
}

/******************* reportingsheet *****************/

/********* absence ****************/

.m-view {
    display: none; 
}

#dpd1.xs-correction, #dpd2.xs-correction {
    display: block; 
    float: none; 
    width: 80vw; 
}

@media screen and (min-width:415px){
    span.glyphicon.glyphicon-remove.xs-view{
        display: none; 
    }   
    .m-view{
        display: inline-block; 
    }
    #dpd1.xs-correction, #dpd2.xs-correction {
        float: right; 
        width: auto; 
        display: inline-block; 
        min-width: 375px;
        margin-left: 1em;
    }
       
}

div.datepicker.dropdown-menu{
    z-index: 9999; 
}

.absenceStatus{
    color: lightgray;
    font-weight: lighter; 
    cursor: pointer; 
}

div.modal-body {
    overflow: hidden; 
}
#absenceBanner {
    display: block;
    position: fixed; 
    bottom: 0; 
    right: 0; 
    height: 48px; 
    background-color: #26A69A; 
    width: auto; 
    overflow: hidden; 
    border-top-left-radius: 2em; 
    cursor: pointer; 
    color: #17665F; 
    padding-left: 15px; 
    padding-right: 15px; 
}

#absenceBanner:hover {
    color: #FFFFFF;
}

#absenceBanner h4 {
    display: inline-block;
    float: right; 
    margin-top: 14px;   
}

#removeAbsenceBtn {
    cursor: pointer; 
    color: lightgray; 
    margin-right: 1em; 
}

#absenceBanner span {
    margin-left: 0.5em;
}

/********* end absence ************/

#statusBox h2 {
    margin-top: 2em; 
    text-align: center; 
}
#statusBox h4 {
    margin-top: 2em; 
    margin-bottom: 0; 
    text-align: center; 
}
#statusBox table {
    margin-top: 2em; 
}
#statusBox {
    margin-bottom: 48px; 
}
#formContainer {
    width: 100vw; 
}
#formContainer h2 {
    margin-top: 0; 
    display: inline-block;
    vertical-align: bottom; 
    margin-bottom: 0; 
}
#formContainer div.table-responsive {
    margin-top: 1em; 
}

#addLine {
    cursor: pointer;
    color: #26A69A; 
}
#addLine:hover {
    background-color: #26A69A; 
    color: black; 
}
#addLine span {
    margin-right: 2em;     
}
.trashCan, .sortArrow{
    cursor: pointer; 
}
.trashCan:hover, .sortArrow:hover, #here:hover, #there:hover{
    padding-top: 12px; 
    color: orangered; 
}
#here, #there {
    padding-top: 18px;
    color: #26A69A; 
}
#headline{
    margin-top: 1em;
    vertical-align: bottom;
}
#homeForm {
    display: inline-block; 
    float: right;   
}
#endHomeForm{
    display: block;
    float: right; 
    width: 100%; 
}
#endHomeForm div{
    float: right; 
}
#endHomeForm div.form-group {
    float: right; 
    width: auto; 
    min-width: 320px; 
}
#endHome, #startHome {
    width: 105.4px;
    margin-right: 8px; 
/*    float: right; */
}
td.pc-control {
    /* width: 15%;  */
}

#hardReloadMsg:hover {
    cursor: pointer;
}

input.form-control.pc1, 
input.form-control.pc2, 
input.form-control.pc3 {
    display: inline-block;
    width: 26%; 
}
.mission {
    max-width: 90px; 
}
.empty, select.form-control.empty, input.form-control.empty {   
    background-color: #E88672; 
    border-color: #E88672;
    
}
.timebreach, select.form-control.timebreach {
    background-color: #D9EDF7;
    border-color: #BCE8F1; 
}
#submitBtn {
    display: block; 
    width: 100%; 
    margin-top: 1em;   
    font-weight: bolder; 
}
#submitBtn:hover {
    background-color: #26A69A;
}

input[type="checkbox"].threeFourths-top {
    margin-top: 0.7em; 
}

#legend {
    margin-left: 15px; 
    margin-right: 15px; 
    margin-top: 6em; 
    margin-bottom: 1em;
}
#legend div {
    text-align: center;  
}

#formComment {
    width: 100%; 
    margin-top: 1em; 
}

div#commentWell.well{
    background-color: #FFF; 
} 

#commentText{
    display: inline-block; 
    max-width: 65vw; 
    vertical-align: top; 
} 
/********** min width ***********/
select.form-control.account, 
input.form-control.city {
    min-width: 150px; 
}
td.form-group.pc-control, 
input.form-control.shop {
    min-width: 150px; 
}
select.form-control.mission, 
select.form-control.sshop, 
select.form-control.eshop {
    min-width: 85px; 
}

/********************************/
/************ view ************/

#homeTable {
    display: inline-block; 
    float: right;   
}

#endHomeTable {
    display: block;
    float: right; 
}

/*****flex + clearfix*****/

/* clear */
.cf{clear:both;}
/*clearfix hack*/

.clearFix:before, .clearFix:after{
    content: " ";
    display: table;
}
.clearFix:after{
    clear:both;
}
/*enkel voor IE6/7 */
.clearFix{
    *zoom: 1;
}