@media (min-width: 450px) {
    .ui-controlgroup-controls {
        margin-left: 5px !important;
        width: 60% !important;
    }

    .select-add {
        display: inline-block;
        width: 60%;
    }

        .select-add .ui-select {
            width: 100%;
        }

    .ui-input-datebox {
        width: 59% !important;
    }
}

.logo {
    background: url('../images/icon_36x36.png') no-repeat transparent;
    width: 36px;
    height: 36px;
    margin-left: 5px;
    margin-top: 3px;
    float: left;
}

.synchronizeStatus {
    display: block;
    width: 36px;
    height: 36px;
    position: absolute;
    right: 5px;
    top: 3px !important;
    left: auto !important;
    float: right;
    background-color: Green;
    background-image: url('../images/check_03a_32px.png');
    background-repeat: no-repeat;
    background-size: 27px 27px;
    background-position: center; 
    border-radius: 3px;
}
    .synchronizeStatus.changes {
        background-color: Orange;
        background-image: url('../images/cloud_upload_white_05a_32px.png');
    }

    .synchronizeStatus.errors {
        background-color: Red;
    }

.logging tr.error {
    color: Red;
}

.logging tr.warning {
    color: Orange;
}

#mainContent[dailyinputnotifications="available"] #animalEvent {
    background-color: #ff4500;
    background-image: url('../images/alert_white.png');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position-x: 90%;
    background-position-y: 12px;
}

.orderedLabels label{
    display: inline-block;
    margin-right: 0 !important;
    padding-top: 8px;
    margin-bottom: 0 !important;
    width: 140px !important;
}
.orderedLabels .ui-input-text,
.orderedLabels .test{
    display: inline-block;
    width: -webkit-calc(100% - 148px) !important;
    width: -moz-calc(100% - 148px) !important;
    width: calc(100% - 148px) !important;
    float: right !important;
}

    .orderedLabels .ui-input-text .ui-input-text{
        display: inline-block;
        width: 100% !important;
        float: right !important;
    }

.test {
    display: inline-block;
    padding-top: 8px;
}

.panel-head-custom {
    background-color: #ecf0f4 !important;
    background-image: none !important;
}

.panel-title-custom {
    display: inline-block;
    color: black !important;
    padding-top: 3px;
}

.panel-title {
    display: inline-block;
}

.panel-button-custom {
    margin-top: calc(-0.4em - 1px);
    margin-bottom: calc(-0.4em - 1px);
    margin-right: calc(-1em - 1px);
    float: right;
    height: 40.45px;
    width: 40.45px;
}

table.grid input {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box;
}

.native-select-right {
    float: right;
}

div#loading-message {
    display: none;
    position: fixed;
    top: 30%;
    left: 30%;
    width: 40%;
    height: 20px;
    border: 1px solid black;
    background-color: #aaa;
    text-align: center;
    padding: 20px 0 20px 0;
    z-index: 1000000;
}

table.grid {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

    table.grid thead input {
        width: 100%;
        font-size: 15px;
    }

    table.grid thead, table.grid tfoot {
        font-size: 15px;
    }

        table.grid thead th, table.grid tfoot tr {
            text-align: left;
            padding: 4px 0 4px 20px;
            line-height: 30px;
            background: #fff;
            color: #000;
            border: 0;
            background-repeat: no-repeat;
            background-position: center left;
            cursor: pointer;
        }

        table.grid tfoot.total-top-border {
            border-top: 1px solid black;
        }
            table.grid tfoot td {
                font-weight: bold;
            }

            table.grid tfoot td.fw-normal {
                font-weight: normal;
        }

    table.grid .headerSort {
        background-image: url(../images/sort.gif);
    }

    table.grid .headerSortUp {
        background-image: url(../images/asc.gif);
    }

    table.grid .headerSortDown {
        background-image: url(../images/desc.gif);
    }

    table.grid thead td, table.grid tfoot td {
        text-align: left;
        padding: 0 10px 10px 10px;
    }

    table.grid th.col-a {
        width: 17%;
    }

    table.grid th.col-b {
        width: 17%;
    }

    table.grid th.col-c {
        width: 58%;
    }

    table.grid th.col-c2 {
        width: 25%;
    }

    table.grid th.col-c3 {
        width: 25%;
    }

    table.grid th.col-d {
        width: 8%;
    }

    table.grid tbody tr {
        cursor: pointer;
    }

        table.grid tbody tr:active {
            background-color: #dcdcdc !important;
        }

        table.grid tbody tr:nth-child(odd) {
            background-color: #e9f2fc;
        }

        table.grid tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

    table.grid tbody td {
        text-align: left;
        padding: 15px 10px;
        border: 0;
    }

table.grid2 {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
}

    table.grid2 td {
        text-align: left;
        padding: 0;
        border: 0;
    }

    table.grid2 tbody tr:nth-child(odd) {
        background-color: transparent;
    }

    table.grid2 tbody tr:nth-child(even) {
        background-color: transparent;
    }

    table.grid2 tbody td {
        text-align: left;
        padding: 0;
        border: 0;
    }

input.error {
    border: 1px dashed red;
}

span.error {
    color: red;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.4;
    margin-top: 0.5em;
    width: 100%;
    float: none;
    display: inline-block;
}

div.inline-message {
    float: left;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 5px;
}

div.inline-message-nofloat {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 5px;
}

div.box-right {
    padding: 10px;
    margin: 0 0 10px 10px;
    font-weight: bold;
    background: #ebf0f4;
}

div.inline-message label {
    padding-top: 5px;
}

div.morespace {
    padding: 0;
}

div.koekaart_container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

    div.koekaart_container.inline {
        margin-top: 10px;
    }

    div.koekaart_container table {
        border-collapse: collapse;
        text-align: left;
        font-size: 11pt;
    }

table.koekaart {
    z-index: 2;
    float: left;
    margin: 0 0 10px 0;
    white-space: nowrap;
    border: 1px solid #B3B3B3;
}

    table.koekaart th,
    table.koekaart td {
        padding: 4px;
        border-right: 1px solid #B3B3B3;
        border-bottom: 2px solid #B3B3B3;
    }

    table.koekaart th {
        color: #fff;
        font-weight: 400;
        background: #4794E1;
    }

    table.koekaart td {
        background: #ebf0f4;
    }

        table.koekaart td.more {
            line-height: 1.3em;
        }

        table.koekaart td.active {
            background: #000;
            border: 1px solid #000;
        }

        table.koekaart td.passive {
            background: #fff;
            border: 1px solid #000;
        }

        table.koekaart td.activeLF {
            background: #000;
            border-left: 1px solid #000;
            border-right: 1px solid #fff;
            border-top: 1px solid #000;
            border-bottom: 1px solid #fff;
        }

        table.koekaart td.activeRF {
            background: #000;
            border-left: 1px solid #fff;
            border-right: 1px solid #000;
            border-top: 1px solid #000;
            border-bottom: 1px solid #fff;
        }

        table.koekaart td.activeLR {
            background: #000;
            border-left: 1px solid #000;
            border-right: 1px solid #fff;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #000;
        }

        table.koekaart td.activeRR {
            background: #000;
            border-left: 1px solid #fff;
            border-right: 1px solid #000;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #000;
        }

table td.spacer {
    height: 8px;
    padding: 0;
    border: 0;
}

table.table-horizontal {
    width: 100%;
    text-align: left;
    font-size: 11pt;
    border-collapse: collapse;
}

    table.table-horizontal th {
        padding: 10px;
        border: 1px solid #B3B3B3;
        border-bottom: 2px solid #B3B3B3;
    }

    table.table-horizontal th {
        text-align: left;
        white-space: nowrap;
        width: 20%;
        font-weight: bold;
        color: #fff;
        background: #4794E1;
        text-shadow: 0 0;
    }

    table.table-horizontal td {
        width: 80%;
        white-space: nowrap;
        font-weight: 600;
    }

        table.table-horizontal td.content {
            background: #ebf0f4;
            border: 1px solid #B3B3B3;
            border-bottom: 2px solid #B3B3B3;
        }

table td.koenaam {
    text-align: center;
    border-right: 0;
    background: #d7d7d7;
}

table.swipeable {
    z-index: 0;
    left: 0;
}

table.firstcol {
    position: absolute;
    z-index: 2;
    left: 0;
}

div.dots {
    color: #14648F;
    text-align: center;
    width: 100%;
    display: block;
    padding-bottom: 10px;
}

    div.dots div.dot {
        background-image: url('../images/dotsleft.png');
        height: 12px;
        width: 30px;
        display: inline-block;
    }

        div.dots div.dot.more {
            background-image: url('../images/dotsright.png');
        }

table.koeienlijst {
    width: 100%;
    border-collapse: collapse;
    background: #fcfcfc;
}

    table.koeienlijst tr.oneven {
        background: #F0F8FD;
    }

    table.koeienlijst th {
        padding-left: 15px;
        text-align: left;
    }



table.chooseFour {
    background: #fff;
    margin: 0 auto;
    border-collapse: collapse;
}

table.mini-report {
    width: 100%;
}

table.mini-report tbody th:nth-child(1) {
    text-align: left;
}

table.mini-report thead tr {
    background-color: #4794e1;
    color: #fff;
    /*text-shadow: none;*/
}

table.mini-report tbody tr:nth-child(odd) {
    background-color: #e9f2fc;
}

table.mini-report tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

table.mini-report tr.split-row {
    background-color: #4794e1 !important;
}

table.mini-report tr.split-row td {
    height: 1px !important;
}

table.mini-report tr.important th {
    font-weight: 900 !important;
}

.btnDeleteBox {
    margin-top: -1px;
    margin-right: -1px;
}

div.iconKoekaart {
    background-image: url(../images/icons-18-black.png);
    background-position: -612px 50%;
    width: 18px;
    height: 18px;
    float: right;
}

div.iconcheck {
    background-image: url(../images/check_18x18.png);
    width: 18px;
    height: 18px;
    float: right;
}

div.icondoublecheck {
    background-image: url(../images/checkcheck_18x18.png);
    width: 18px;
    height: 18px;
    float: right;
}

div.iconclock {
    background-image: url(../images/clock_18x18.png);
    width: 18px;
    height: 18px;
    float: right;
}

div.iconalert {
    background-image: url(../images/alert_18x18.png);
    width: 18px;
    height: 18px;
    float: right;
}

div.locationImage {
    width: 15px;
    height: 15px;
    float: left;
    margin-left: 3px;
}

div.location0000 {
    background-image: url('../images/Location0000.png');
}

div.location0001 {
    background-image: url('../images/Location0001.png');
}

div.location0011 {
    background-image: url('../images/Location0011.png');
}

div.location0111 {
    background-image: url('../images/Location0111.png');
}

div.location1111 {
    background-image: url('../images/Location1111.png');
}

div.location1000 {
    background-image: url('../images/Location1000.png');
}

div.location1100 {
    background-image: url('../images/Location1100.png');
}

div.location1110 {
    background-image: url('../images/Location1110.png');
}

div.location1010 {
    background-image: url('../images/Location1010.png');
}

div.location1101 {
    background-image: url('../images/Location1101.png');
}

div.location0101 {
    background-image: url('../images/Location0101.png');
}

div.location0010 {
    background-image: url('../images/Location0010.png');
}

div.location0100 {
    background-image: url('../images/Location0100.png');
}

div.location1000 {
    background-image: url('../images/Location1000.png');
}

div.location1001 {
    background-image: url('../images/Location1001.png');
}

div.location0110 {
    background-image: url('../images/Location0110.png');
}

div.location1011 {
    background-image: url('../images/Location1011.png');
}

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

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

.feed-view {
    font-size: 24px;
    padding: 1em 10px;
}

    .feed-view .ui-grid-a {
        margin: 20px 10px;
        clear: both;
    }

        .feed-view .ui-grid-a .ui-block-a {
            font-weight: bold;
            width: auto !important;
            float: left;
        }

        .feed-view .ui-grid-a .ui-block-b {
            float: right;
            width: auto !important;
        }

    .feed-view .block-grid [class^="ui-block"] {
        width: 25% !important;
        float: left !important;
    }


    .feed-view .ui-btn {
        padding: 30px 0;
    }

        .feed-view .ui-btn:after {
            display: none;
        }

.googleplay {
    width: 129px;
    height: 45px;
    cursor: pointer;
    background: url('../images/btn_google_play.png') no-repeat transparent;
}

.iosstore {
    width: 150px;
    height: 52px;
    cursor: pointer;
    background: url('../images/btn_ios_store.png') no-repeat transparent;
}

/* start custom jquery mobile styles */
.ui-overlay-a, .ui-page-theme-a {
    background: url('../images/background.jpg') repeat 0 0 transparent;
}

.ui-collapsible-content, .ui-body-a {
    background: none #fff;
}

.ui-field-contain label, .ui-field-contain legend {
    font-weight: bold;
}

@media all and (max-width: 450px) {
    .ui-field-contain, .ui-mobile fieldset.ui-field-contain {
        border-width: 0 !important;
        padding: 0 !important;
        margin: 1em 0 !important;
    }
}

.ui-dialog .ui-header .ui-btn-left {
    left: auto;
    right: 10px;
}

/* DISABLED SINCE 2015.1 updated jquery mobile agrovision.css
.ui-body-a, .ui-overlay-a {
    background: url('../images/background.jpg') repeat 0 0;
}

div.ui-input-text {
    background-color: #fff;
}

label.ui-input-text,
label.ui-select,
div.ui-controlgroup-label {
    font-weight: bold;
}

.ui-navbar li .ui-btn:last-child {
    margin-right: -2px;
}

.ui-footer-fixed {
    padding-bottom: 0;
    bottom: 0;
}

.select-add .ui-btn {
    margin: 6px 0 0 0;
}

.ui-li .ui-btn-text a.ui-link-inherit {
    white-space: normal;
}



plus icon on add buttons aligned with dropdown select box
.ui-btn-icon-right .ui-icon-plus {
    right: 15px;
}

.ui-br {
    border-bottom: none;
}    
*/

/* end custom jquery mobile styles */
.localization {
    height: 30px;
    width: 100%;
}

.animalState {
    border-radius: 10px;
    width: 15px;
    height: 15px;
    display: inline-block;
    border: 1px solid #000;
    /*margin-top: 5px;*/
    float: left;
}

.stateForSale {
    background-color: #000;
}

.stateDryOff {
    background-color: #E08000;
}

.stateNotPregnant {
    background-color: #FF0000;
}

.statePregnant {
    background-color: #008000;
}

.stateMating {
    background-color: #FFFF00;
}

.stateOpen {
    background-color: #00FFFF;
}

.keyboard-key {
    width: 16.666666% !important; /* 16.6% for 6 tabs wide */
    clear: none !important; /* Prevent line break caused by ui-block-a */
}

.keyboard-backspace {
    background: url('../images/icons-png/arrow-l-black.png') no-repeat transparent;
    width: 14px;
    height: 15px;
    margin-top: 0.23em;
    margin-bottom: 0.23em;
}

.keyboard-return {
    background: url('../images/icons-png/carat-d-black.png') no-repeat transparent;
    width: 14px;
    height: 15px;
    margin-top: 0.23em;
    margin-bottom: 0.23em;
}