body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    /*background: #292c2f;*/
    background: #333333;
}

.results, .vejrikoner {
    font-size: 40px;
}

@media screen and (max-width: 518px) {
    #data-row-1 {
        margin-top: 85px;
    }
}

#lastUpdatedText {
    font-size: 20px;
}


@media screen and (max-width: 371px) {
    #hiveweight-control input {
        max-width: initial !important;
    }
    #hive-data-from {
        margin-right: 0 !important;
    }
    #hive-data-to {
        margin-left: 0 !important;
    }
    #data-row-1 {
        margin-top: 160px !important;
    }
}

/*465*/
@media screen and (max-width: 625px) {
    .results, .vejrikoner {
        font-size: 30px;
    }
    .results {
        display: block;
    }
}

@media screen and (min-width: 625px) {
    .iconAndResult {
        transform: translateY(50%);
    }
}

@font-face {
    font-family: "Operator Mono Extra Light";
    src: url(../font/OperatorMono/OperatorMono-XLight.otf) format("opentype");
}

body {
    font-family: 'Open Sans', sans-serif;
}

ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: 'Open Sans', sans-serif !important;
}

.offlineTooltip {
    font-family: 'Open Sans', sans-serif !important;
    background: #232323 !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 15px !important;
}

#hiveweight-control {
    height: 85px;
    margin-bottom: 10px;
}

#hiveweight-control input {
    /*max-width: fit-content;*/
    color: #fff;
    width: auto;
    margin: 0 auto;
    display: inline;
}

#hive-data-from {
    margin-right: 10px;
}

#update-hive-data {
    color: #fff !important;;
}

#hiveweight-control a {
    color: #fff;
}

#search-hive-data-btn {
    color: #fff !important;
    vertical-align: text-top;
    margin-left: 10px !important;
}

table.striped tbody tr:nth-child(even) {
    color: #fff;
    background: #009688;
}

#hive-data-table thead {
    color: #fff;
}

#hive-data-to {
    margin-left: 10px;
}

.picker__select--month, .picker__select--year {
    height: auto !important;
}

svg {
    width: 100% !important;
}


#hiveweight-control a {
    margin-bottom: 0;
}

#offline-message {
    color: #F44336;
    font-size: 30px;
}

@media screen and (max-width: 365px) {
    .brand-logo {
        font-size: 27px !important;
    }
}

#control-form [type="checkbox"]:not(:checked)+label:before,
#control-form [type="checkbox"]:not(:checked)+label:after {
    top: 50%;
    margin-top: -9px;
}

.tabs li.tab {
    background-color: #795548 !important;
}

.tabs li.tab a {
    color: #ffffff !important;
}

main {
    flex: 1 0 auto;
}

.vejrikoner {
    margin: 5px;
}

#control-form a {
    color: #03a9f4;
    margin-bottom: 0;
}

#control-form {
    line-height: 85px;
    height: 85px;
    /*margin: 30px auto;*/
    margin-bottom: 10px;
}

.data-column {
    min-height: 200px;
    color: #fff;
    margin: 0 auto !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.page-footer {
    background-color: #ee6e73a3 !important;
    width: 100vw;
    max-width: 100%;
}

#hive-data-from::placeholder, #hive-data-to::placeholder {
    color: #fff;
}

#header {
    background-image: url('../images/hive.png');
    background-color: hsla(0, 0%, 0%, 0.3);
    background-blend-mode: overlay;
    background-size: cover;
}

.colTemperature {
    background: #8ac68f;
}

.colHumidity {
    background: #517baa;
}

.colRain {
    background: #5e8862;
}

.colBarometer {
    background: #c7cd6d;
}

.colWindDirection {
    background: #5196aa;
}

.colWindSpeed {
    background: #bf4646;
}

.iconAndResult.clickable {
    cursor: pointer;
}

.colOdd {
    float: right !important;
}

.data-row {
    text-align: center !important;
    /*justify-content: center !important;*/
    align-items: center !important;
    align-content: center !important;
    display: flex;
}

#auto-reload:not(:checked)+label {
    padding-left: 30px !important;
    padding-right: 30px !important;
}