.select2-container, .select2-choice {
    background-color: white;
    -webkit-transition: background-color 0.2s ease-in-out;
    text-align: left;
}

labour-line input:focus,
labour-line select:focus,
labour-line input:active,
labour-line select:active,
.select2-container-active .select2-choice {
    border: 1px solid rgba(50, 110, 170, 0.90) !important;
    background-color: rgba(50, 110, 170, 0.40) !important;
    color: black;
}

.select2-container-active .select2-choice .select2-arrow {
    background-color: transparent;
}

.select2-drop-active .select2-search, .select2-drop-active .select2-results {
    background-color: rgba(50, 110, 170, 0.40) !important;
    margin: 0;
    padding: 4px;
}

labour-line input[type=text]:hover,
labour-line select:hover {
    background-color: rgba(50, 110, 170, 0.20) !important;
}

labour-line .labour-icons {
    padding-left: 15px;
    padding-right: 15px;
}

/* Fix hours register widget */
labour-line input.time-field.form-control {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    display:inline-block;
    width: 100%;
    box-sizing: border-box;
    vertical-align: top;
    padding: 2px;
}

labour-line input.time-field.duration.form-control::-webkit-input-placeholder {
    text-align: left;
}


.labour-icons .fa {
    color: black;
}

.labour-icons .fa.active {
    color: rgba(0, 158, 15, 0.72);
}

.labour-icons .fa {
    font-size: 20px;
    vertical-align: middle;
}

.labour-icons .fa.inactive {
    color: #666;
}

labour-line ul.inputnote {
    max-width: 75%;
    position: absolute;
    top: 2px;
    right: 10px;
    font-size: 12px;
    list-style-type: none;
    color: rgba(50, 110, 170, 0.90);
    font-style: italic;
    background-color: rgba(255, 255, 255, 0.8);
    overflow-y: hidden;
    max-height: 1.5em;
}
labour-line input.form-control[type="text"]:focus + ul.inputnote {
    top: -10px;
}
labour-line ul.inputnote:hover {
    max-height: initial;
    font-size: 12px;
    z-index: 50;
}
labour-line ul.inputnote > li {
    display: inline;
}
labour-line ul.inputnote > li + li::before {
    content: '\23fa';
    color: rgba(50, 110, 170, 0.90);
    font-style: italic;
}

.select2-drop {
    border: 1px solid black !important;
    border-top: 0 !important;
}

.travelDist input {
    width: 40px;
    text-align: right;
    padding-right: 24px !important;
}

.travelDist:after {
    content: 'km';
    position: absolute;
    top: 6px;
    right: 5px;
}

col#icons td.icons {
    width: 150px;
    white-space: nowrap;
    vertical-align: middle;
    padding-bottom: 5px;
}

.travelVehicle .select2-container {
    width: 100%;
}

.travelDest .select2-container, .colService .select2-container {
    width: 100%;
    max-width: 300px;
}

.fa .active {
    color: green;
}

.fa .inactive {
    color: gray;
}

::-webkit-input-placeholder {
    text-align: left;
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
}

 input.time-field::-webkit-input-placeholder {
    text-align: center;
}

 input::-webkit-input-placeholder {
     opacity: 0.2
 }

input:focus::-webkit-input-placeholder, input:active::-webkit-input-placeholder {
    opacity: 0.02;
}

labour-line .labourGap .timeBox input {
    border: 0;
    text-align: center;
    color: rgba(82, 142, 202, 0.28) !important;
}

/* 2018-01-15 rsm: TODO: remove this, because I think it is not used anywhere */
.labourTime {
    padding: 0;
    text-align: center;
}

.labourTime input {
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    width: 32%;
    box-sizing: border-box;
    vertical-align: top;
    margin: 0;
    padding: 0;
    margin-right: .3%;
}

labour-line .labourTypeSelect {
    padding-left: 15px;
    padding-right: 15px;
}

labour-line .labourTypeSelect .select2-chosen {
    font-size: 16px;
    font-weight: bold;
}

button.submit {
    background-color: rgba(0, 158, 15, 0.72);
    font-weight: bold;
    color: white;
    border: 1px solid #ccc;
}

labour-line input:disabled,
labour-line input:disabled:focus,
labour-line .select2-container.select2-container-disabled .select2-choice {
    border: 0 !important;
    color: #333 !important;
    opacity: 0.7;
    padding-left: 4px;
}

labour-line .select2-container.select2-container-disabled .select2-choice .select2-arrow {
    display: none;
}

labour-line input:disabled:active,
labour-line input:disabled:hover,
labour-line .select2-container:hover.select2-container-disabled .select2-choice {
    background-color: white !important;
}

labour-line .select2-container.select2-container-disabled.immutable {
    border: 1px solid #dddedf !important;
}

labour-line .select2-container.select2-container-disabled.immutable .select2-choice {
    cursor: not-allowed;
    color: #dddedf !important;
}

.select2-container.ng-invalid .select2-choice {
    border: 1px solid red;
}

.row.error {
    margin: 0;
}

.error {
    color: #eb8282;
    padding: 5px;
    font-weight: bold;
}

.error i.fa {
    color: #eb8282;
    float: left;
}

.error ul {
    margin-left: 20px;
}

.error em {
    white-space: pre;
}

labour-line .ontime {
    color: green;
}

labour-line .overtime {
    color: orange;
}

labour-line .overtime.overmaxtime {
    color: red;
}

section.timeBox, section.day-navigation {
    float: left;
    text-align: center;
}


labour-line .description {
    position: relative;
}

section.vehicles .vehicleSelect,
section.vehicles .distance,
section.vehicles .destinationSelect {
    float: left;
    padding: 5px;
}

section.vehicles {
    width: 100%;
    position: relative;
}

section.vehicles .timeBox {
    position: absolute;
    top: 10px;
    left: -25px;
}

section.vehicles i.fa.fa-car {
    margin: 0;
    float: initial;
}

section.vehicles .vehicleSelect {
    width: calc(60% - 80px);
    padding: 5px;
    padding-bottom: 0px;
}

section.vehicles .distance {
    width: 80px;
    padding: 5px;
}

section.vehicles .destinationSelect {
    width: 40%;
    padding: 5px;
}

button.submit:disabled {
    background-color: rgba(255, 0, 0, 0.4);
    cursor: not-allowed;
}

@media (max-width: 850px) {

    .development #contents {
        margin: 0;
        padding: 5px;
    }

    #page-header {
        height: 70px;
    }

    #page-header .icon-menu:before {
        display: none;
    }

    #full-page-container {
        margin: 0;
        padding: 5px;
    }

    #page-header nav#menu > ul {
        position: absolute;
        top: 6px;
        right: 0px;
        list-style: none;
        margin: 0px;
        left: 96px;
    }

    section.timeBox, section.day-navigation {
        float: left;
        text-align: center;
    }

    .person-select .select2-container {
        width: calc(100% - 35px) !important;
    }

    .labourGap strong {
        display: block;
    }

    labour-line .labourGap .projectInputBox {
        text-align: center;
    }

    footer > div:first-child {
        float: left !important;
    }

    footer > div {
        float: left;
        width: 100%;
    }

    footer strong {
        margin-top: 15px;
        display: block;
        border-bottom: 1px solid black;
        margin-bottom: 10px;
        width: 100%;
    }

}

button.trbutton:disabled {
    color: grey !important;
    cursor: not-allowed;
}

.recent-projects {
    position: absolute;
    width: 500px;
    right: -525px;
    padding: 20px;
    border: 1px solid #6a6d6f;
    z-index: 2;
    background-color: white;
    transition: right .5s;
    transition-delay: .5s;
}
.recent-projects-trigger:hover .recent-projects {
    right: 0;
    transition-delay: 0s;
}

.space-right {
    padding-left: 0;
    padding-right: 7px;
}

labour-line .select2-chosen {
    font-size: 14px;
}

labour-line .form-control[disabled] {
    background-color: #ffffff;
}

labour-line select {
    padding: 6px;
    height: auto;
    width: 100%;
}

labour-line {
    border-bottom: 1px dashed #ccc;
    display: block;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

labour-line .no-padding,
labour-line .no-padding-left {
    padding-left: 0;
}

labour-line .no-padding,
labour-line .no-padding-right {
    padding-right: 0;
}

labour-line .col {
    margin-bottom: 2px !important;
}


.modal-body #page-title {
    display: none;
}

.modal-body table.list {
    width: 100%;
    border: 1px solid transparent;
}


.modal-body table.list tr {
    background: transparent;
    border: 0;
}

.modal-body table.list th {
    background: transparent;
    border: 0;
    font-weight: bold;
    vertical-align:middle;

    border-bottom: 1px solid #ccc;
}

.modal-body table.list tbody td {
    white-space: nowrap;
    border: 0;
}

#auditTrail-popup tbody td {
    vertical-align: top;
    white-space: pre;
    border-top: 1px solid #ccc;
}


#auditTrail-popup .modal-body {
    overflow-x: auto;
}

@media (max-width: 992px) {
    labour-line .col-xs-6.timefields input.time-field {
        font-size: 15px;
    }
}

@media (min-width: 992px) {
    labour-line .col-md-3.timefields input.time-field {
        font-size: 18px;
    }
}

/* these fields typically hold 4 characters and a colon */
@media (min-width: 1200px) {
    labour-line .col-lg-2.timefields input.time-field {
        font-size: 1.2vw;
    }
}

@media (max-width: 767px) {
    .recent-projects-trigger,
    .recent-projects {
        display: none !important;
    }
}

.toast-top-right {
    top: 120px;
}

labour-line INPUT.labour-is-in-focus {
    border: solid 1px black;
}