/* Error template */
.k-notification {
    border: 0;
}



label.km-label-above {
    /*pointer-events: none !important;*/
}


/*switch BACKGROUND stop GREEN*/
.km-nova span.km-switch {
    color: green;
    border: none
}



/* remove border around switch*/
.km-nova .km-listview .km-switch {
    border: none
}

/* Error template */
.k-notification-error.k-group {
    background: rgba(100%,0%,0%,.7);
    color: #ffffff;
}

.half-chart-wrapper {
    width: 47%;
    height: auto;
    margin: 0 1%;
    border: solid 1px #525252;
    -webkit-box-shadow: #686868 2px 2px;
    box-shadow: #686868 2px 2px;
    display: inline-block;
}
.numericSystemPopup{
    z-index:1;
    display: none;
    position: absolute;
    width:100%;
    height:100%;
}
.topBorder {
    width: 100%;
    height: 34px;
    background-color: darkgreen;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 6px 0px 0px;
}
.numericSystems {
    width: 29%;
    border: 1px solid #e0e0e0;
    position: relative;
    left: 37%;
    top: 24%;
    border-radius: 7px;
    background-color: white;
    overflow: hidden;
}
.popupTitle {
    position: relative;
    display: flex;
    flex-direction: row;
}
.titleContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    font-weight: bold;
    text-align: center;
}
.resetModalWindowPopUp {
    z-index: 1;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}
.locationEditModalWindowPopUp {
    z-index: 10000;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}
.resetModalWindows {
    padding: 10px 0;
    width: 22%;
    border: 1px solid #e0e0e0;
    position: relative;
    left: 37%;
    top: 15%;
    border-top: 10px solid darkgreen;
    border-radius: 10px;
    background-color: white;
}
.resetModalWindowSoilProbe {
    padding: 10px 0;
    width: 22%;
    border: 1px solid #e0e0e0;
    position: relative;
    left: 37%;
    top: 30%;
    border-top: 10px solid darkgreen;
    border-radius: 10px;
    background-color: white;
}
.locationEditModalWindow {
    padding: 10px 0;
    width: 100%;
    max-width: 550px;
    border: 1px solid #e0e0e0;
    position: relative;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 60%;
    border-top: 10px solid darkgreen;
    border-radius: 10px;
    background-color: white;
}
.resetPopupTitle {
    display: flex;
    flex-direction: row;
}
.resetModalWindowPicker {
    min-height: 4em;
    justify-content: left;
    display: flex;
    cursor: pointer;
    padding: 0;
    border: none;
    margin-left: 10%;
}
.clickedSystem {
    /*background-color: #cbeacb;*/
    margin: 0;
}
.clickedSystem .circle{
    border: 4px solid rgb(0, 100, 0);
}
.numericSystem {
    min-height: 4em;
    justify-content: center;
    display: flex;
    cursor: pointer;
    padding: 0;
    border: none;
}
.greenLine {
    width: 100px;
    height: 1px;
    background-color: #538e53;
    margin: 10px 0px;
}
.cancelContainer {
    width: 19px;
    cursor: pointer;
}

.half-width-chart {
    width: 85%;
    height: 300px;
    margin: 0 auto;
    display: inline-block;
    float: left;
}

.note-wrap {
    width: 320px;
    height: auto;
    min-height: 70px;
    padding: 20px;
    vertical-align: middle;
}

.note-wrap img {
    vertical-align: middle;
    margin-right: 10px;
    height: 30px;
    width: 30px;
}

.k-edit-buttons{
    background-color: transparent !important;
}

/* Info template */
.k-notification-info.k-group {
    background: rgba(0%,0%,0%,.7);
    color: #2b98f3;
}

.k-notification-info {
    background-color: #bbdefb;
    color: #2b98f3 !important;
    border-color: #bbdefb;
    font-size: 1em !important;
}


/* Success template */
.k-notification-note-success {
    background: rgba(0%,60%,0%,.7);
    color: #fff !important;
}



/*fix issue with dialog buttons not next stop eathother*/
.k-dialog-buttongroup{
    display: inline-flex !important;
}

/*Editing forms*/

.hideinform {
    display: none !important;
}

.showinform {
    display: inherit !important;
}

.showsatelliteinform {
   display: inherit !important;
}

.hidesatelliteinform {
    display: inherit !important;
}

.showsoilprobeinform {
    display: inherit !important;
}

.showprobecanopyinform {
    display: inherit !important;
}

.showdammonitorinform {
    display: inherit !important;
}

.showtankmonitorinform {
    display: inherit !important;
}

.showflowmeterinform {
    display: inherit !important;
}

.showloragetwayinform {
    display: inherit !important;
}

.showweatherstationinform {
    display: inherit !important;
}

.gwpopupeditform label {
    margin-left: 10px;
    /*font-size: inherit !important;*/
}

.k-edit-form-container {
    width: 100%
}

.gwpopupeditform label span {
    margin-right: 10px;
}

/* For groups of headings with data */
.gweditpopupvalueswrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.gwpopuplabel {
    color: darkgrey !important;
    display:block;
}
    
.km-label-above.gweditpopupvalueswrapitem .k-widget {
        width: 97% !important;
}

.gweditpopupvalueswrapitem {
    margin: 3px;
    width: 97% !important;
    font-size: small !important;
}

.gweditpopupvalueswrapiteminneritem {
    border: none;
    margin: 3px !important;
    box-shadow: none;
}


.gaedit-textbox{
    width: 100% !important
}

.gaedit-dropdown {
    width: 100% !important
}*

/*horizontal Grid scrollbar should appear if the browser window is shrunk too much*/
.goappgrdiview table {
    min-width: 660px!important;
}

/* no min width*/
.goappgrdiviewnarrow table {
    
}

.k-pdf-export .pdf-hide {
    display: none;
}


.k-pdf-export .pdf-visible {
    display: block !important;
}


.page-template {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.page-template .header {
        position: absolute;
        top: 30px;
        left: 30px;
        right: 30px;
        border-bottom: 1px solid #888;
        text-align: center;
}

.page-template .footer {
        position: absolute;
        bottom: 30px;
        left: 30px;
        right: 30px;
}

.graphpagebackground {
    background-color: #F4F6F6
}

.fullwidth {
    width: 100%;
}

.noborder {
    border: none !important;
}

.nowrap {
    white-space: nowrap;
}

.nomargin {
    margin: 0px 0px 0px 0px !important;
}

.nopadding {
    padding: 0px 0px 0px 0px !important;
}

.noshadow {
    box-shadow: none !important;
}

.gwtextline {
    padding: 2px 2px 2px 2px
}

/*Background colors*/
.selecteddiv {
    color: darkorange;
    background-color: darkorange;
}

/*text displayed input thead header color-profile gridviews (not buttons but free text)*/
.gagridlistheadertext {
    display: inline-block;
    color: red;
}


/* slick stuff */
.slick-slideme {
    margin: 2px !important;
}

.slick-list {
    width: 100%
}

/*grid cells*/
/*in headers*/
.k-grid {
    font-size: 12px;
}

th.k-header.goappgridrightcell {
    text-align: right;
}

th.k-header.goappgridcentercell {
    text-align: center;
}

th.k-header.goappgridleftcell {
    text-align: left;
}

/*rows*/
.goappgridrightcell {
    text-align: right;
    padding: 3px
}

.goappgridcentercell {
    text-align: center;
    padding: 3px;
}

.goappgridleftcell {
    text-align: left;
    padding: 3px;
}


/*button*/
.goappgridbuttoncell {
    padding: 0px;
    text-align: center;
}


/*Modal views for map details*/
.goapp-map-modalwindow {
    border: 2px solid darkgreen;
    width: 310px;
}


/*Reduce general cell padding*/
.k-grid td {
    padding: 3px;
}

/*Hide export buttons from exported docs content grids*/
.k-pdf-export .k-grid-excel,
.k-pdf-export .k-grid-pdf {
    display: none;
}

.km-nova {
    font-family: "Open Sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif;    
    /*font-size: 0.9em !important;*/
    line-height: 1.2;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

    .km-nova h3 {
        font-size: .9em;
    }

    .km-nova a {
        color: darkgreen;
    }

        .km-nova a:not([class]) {
            color: darkgreen;
        }



/*Icons*/

.km-connect-icon:after,
.km-connect-icon:before {
    content: "\e073";
}



.km-calculator:after,
.km-calculator:before {
    content: "\e07a";
}

.km-graphing:after,
.km-graphing:before {
    content: "\E04F";
}

.km-map-pin:after,
.km-map-pin:before {
    content: "\e0b4";
}

.km-remove-icon:after,
.km-remove-icon:before {
    content: "\e033";
}

.k-i-remove-icon:after,
.k-i-remove-icon:before {
    content: "\e033";
}

.km-add-icon:after,
.km-add-icon:before {
    content: "\e039";
}


.km-map-icon:after,
.km-map-icon:before {
    content: "\e0dc";
}

.km-listing-icon:after,
.km-listing-icon:before {
    content: "\e103";
}

.km-filter-icon:after,
.km-filter-icon:before {
    content: "\e06c";
}

.km-close-icon:after,
.km-close-icon:before {
    content: "\e038";
}

.km-calendar-icon:after,
.km-calendar-icon:before {
    content: "\e089";
}


.k-pager-numbers .k-state-selected {
    color: darkgreen;
    border-color: darkgreen;
}

.km-nova .km-content {
    color: darkgreen;
}

.km-nova .k-button .km-primary {
    color: white;
}

.km-nova .km-primary {
    color: white !important;
    background: darkgreen;
    background-color: darkgreen;
    border-color: darkgreen;
}

.km-nova .km-tabstrip {
    background-image: none;
    background-color: white;
}

    .km-nova .km-tabstrip .km-button.km-state-active {
        background-image: none;
        border: 2px solid;
    }

    .km-nova .km-tabstrip .km-button {
        color: darkgreen;
        opacity: .6;
        border-radius: 0;
    }

.km-nova .km-drawer .km-content {
    background-color: white;
}

.km-label-above .km-input-search {
    cursor:zoom-in
}

.km-label-above .km-input-search-readonly {
    /*use this for when we are resd only*/ 

}

.gwvalueswrapitem .km-input-reset .km-clear {
    margin-top: .4em !important;
    width: 100%;
    height: 100%;
    color: #cacdce;
}

.gwvalueswrapitem .km-clear:after {
    content: "\e031";
}

.gwvalueswrapitem .km-input-reset {
    cursor: pointer;
    font-size: 1.4em !important;
    margin-right: -.84em !important;
    width: 3em !important;
    z-index: 1 !important;
    position: relative;
    float: right !important;
}


.km-label-above .km-input-reset .km-clear {
    margin-top: .4em !important;
    width: 100%;
    height: 100%;
    color: #cacdce;
}

.km-label-above .km-input-reset {
    cursor: pointer;
    font-size: 1.4em !important;
    margin-top: -.5em !important;
    margin-right: -.84em !important;
    height: 3em !important;
    width: 3em !important;
    z-index: 1 !important;
    position: relative;
    float: right !important;
}

.km-label-above .km-clear:after {
    content: "\e031";
}

.km-nova .km-drawer .km-list > li > .km-listview-link {
    color: darkgreen;
    opacity: .6;
}

.km-nova .km-drawer .km-list > li .km-icon {
    color: darkgreen;
}

.km-nova .km-light.km-navbar .km-button {
    color: darkgreen;
    opacity: .6;
}

.km-back:before, .km-nova .km-light.km-navbar .km-back:before, .km-nova .km-light.km-navbar .km-button {
    color: darkgreen;
    opacity: .6;
}

.km-nova .km-light .km-view-title {
    color: darkgreen;
    opacity: .6;
}

.km-nova .km-button.km-small {
    color: darkgreen;
}

.k-grid-toolbar .k-button {
    color: darkgreen;
    opacity: .6;
}

.k-grid tbody .k-button {
    min-width: unset;
}

.km-navbar .k-button {
    color: darkgreen;
    opacity: .6;
}



/*general colors form font*/
.red {
    color: red
}


/*@media screen and (max-width: 699px) {
    we want thead pager stop embed bigger content mobile phone
    .div.k-grid-content.k-auto-scrollable.km-widget.km-native-scroller {
        height: 431px;
    }
}*/

/*slider general settings*/
.gacarousel {
    margin-top: 15px;
    margin-bottom: 15px;
}


.gacarouselitem {
    flex-grow: .2;
    height: 50px;
    flex-wrap: wrap;
    white-space: normal;
    border: 1px solid darkgrey;
    /*border-radius: 3%;*/
    color: black;
    text-align: center;
    margin: 1px;
    background-color: white;
    font-size: 0.9em !important;
}

.gacarouselitemunselected {
    border: 1px solid #DCE1E1 !important;
    color: #9B9B9B !important;
}

.gacarouselitemselected {
    border: 2px solid #038E03 !important;
    color: #038E03 !important;
}

.cursorpointer {
    cursor: pointer;
}

.gacarouselitem .item-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.gacarouselitem .item-title {
    font-size: 14px;
    color: black;
}

.gacarouselitem .item-title-selected {
    font-size: 14px;
    color: #038E03;
}


/* For groups of headings with data */
.gwvalueswrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-bottom: 1px solid #e6f0f3;
}

.gwvalueswrapitem {
    flex-grow: .9;
    /*border: 2px solid #3885a0;*/
    /*border-radius: 3px;*/
    padding: 4px;
    flex-wrap: wrap;
    white-space: normal;
    color: black;
    margin: 4px;
    background-color: white;
    box-shadow: 3px 3px 5px 0px #DCE1E1
}

.gwvalueswrapiteminneritem {
    border: none;
    margin: 0px;
    box-shadow: none;
}

.gwsectionheading {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    margin-left: 5px
}

.gwsectiontext {
    font-size: 13px;
    color: #333333;
    margin-left: 10px;
    line-height: 140%;
}

.gwsectionbutton {
    float: right;
    display: block;
    background: linear-gradient(#05A005, #008000) !important;
    color: white !important;
    max-height: 35px !important;
    max-width: 60px !important;
    min-height: 35px !important;
    min-width: 60px !important;
}

.gwoptionbutton:disabled,
.gwoptionbutton[disabled]{
    color: #808080 !important;
    border-color: #808080 !important;
}

.gwoptionbutton{
    color: #038E03 !important;
    border-color: #038E03 !important;
}


.gwoptionbuttonactive {
    background: #038E03 !important;
    color: #fff !important;
    border-color: #038E03 !important;
}


@media screen and (max-width: 670px) {

    .gweditpopupvalueswrap {
        flex-wrap: wrap;
    }

    .gweditpopupvalueswrapitem {
        width: 47% !important;
    }

}


@media screen and (max-width: 480px) {
        /*we want column flex on portrait phone*/
        .gwvalueswrap {
            flex-direction: column;
        }

        /*text displayed input thead header color-profile gridviews (not buttons but free text)*/
        .gagridlistheadertext {
            display: inline-block;
        }

    .gweditpopupvalueswrap {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .km-label-above.gweditpopupvalueswrapitem .k-widget {
        width: 97% !important;
    }

    .gweditpopupvalueswrapitem {
        width: 97% !important;
    }


}
    /*Now Page Stuff*/
    /*General*/
    /* HTML5 display definitions
   ========================================================================== */
    /**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
    article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
        display: block;
    }

    /**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

    audio,
    canvas,
    progress,
    video {
        display: inline-block; /* 1 */
        vertical-align: baseline; /* 2 */
    }

        /**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

        audio:not([controls]) {
            display: none;
            height: 0;
        }

    /**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

    [hidden],
    template {
        display: none;
    }

    /* Links
   ========================================================================== */

    /**
 * Remove the gray background color from active links in IE 10.
 */

    a {
        background-color: transparent;
    }

        /**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

        a:active,
        a:hover {
            outline: 0;
        }

    /* Text-level semantics
   ========================================================================== */

    /**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

    abbr[title] {
        border-bottom: 1px dotted;
    }

    /**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

    b,
    strong {
        font-weight: bold;
    }

    /**
 * Address styling not present in Safari and Chrome.
 */

    dfn {
        font-style: italic;
    }

    /**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

    h1 {
        font-size: 2em;
        margin: .67em 0;
    }

    /**
 * Address styling not present in IE 8/9.
 */

    mark {
        background: #ff0;
        color: #000;
    }

    /**
 * Address inconsistent and variable font size in all browsers.
 */

    small {
        font-size: 80%;
    }

    /**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sup {
        top: -.5em;
    }

    sub {
        bottom: -.25em;
    }

    /* Embedded content
   ========================================================================== */

    /**
 * Remove border when inside `a` element in IE 8/9/10.
 */

    img {
        border: 0;
    }

    /**
 * Correct overflow not hidden in IE 9/10/11.
 */

    svg:not(:root) {
        overflow: hidden;
    }

    /* Grouping content
   ========================================================================== */

    /**
 * Address margin not present in IE 8/9 and Safari.
 */

    figure {
        margin: 1em 40px;
    }

    /**
 * Address differences between Firefox and other browsers.
 */

    hr {
        box-sizing: content-box;
        height: 0;
    }

    /**
 * Contain overflow in all browsers.
 */

    pre {
        overflow: auto;
    }

    /**
 * Address odd `em`-unit font size rendering in all browsers.
 */

    code,
    kbd,
    pre,
    samp {
        font-family: monospace, monospace;
        font-size: 1em;
    }

    /* Forms
   ========================================================================== */

    /**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

    /**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

    button,
    input,
    optgroup,
    select,
    textarea {
        color: inherit; /* 1 */
        font: inherit; /* 2 */
        margin: 0; /* 3 */
    }

    /**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

    button {
        overflow: visible;
    }

    /**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

    button,
    select {
        text-transform: none;
    }

    /**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: button; /* 2 */
        cursor: pointer; /* 3 */
    }

        /**
 * Re-set default cursor for disabled elements.
 */

        button[disabled],
        html input[disabled] {
            cursor: default;
        }

        /**
 * Remove inner padding and border in Firefox 4+.
 */

        button::-moz-focus-inner,
        input::-moz-focus-inner {
            border: 0;
            padding: 0;
        }

    /**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

    input {
        line-height: normal;
    }

        /**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

        input[type="checkbox"],
        input[type="radio"] {
            box-sizing: border-box; /* 1 */
            padding: 0; /* 2 */
        }

        /**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            height: auto;
        }

        /**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

        input[type="search"] {
            -webkit-appearance: textfield; /* 1 */
            box-sizing: content-box; /* 2 */
        }

            /**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

            input[type="search"]::-webkit-search-cancel-button,
            input[type="search"]::-webkit-search-decoration {
                -webkit-appearance: none;
            }

    /**
 * Define consistent border, margin, and padding.
 */

    fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: .35em .625em .75em;
    }

    /**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

    legend {
        border: 0; /* 1 */
        padding: 0; /* 2 */
    }

    /**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

    textarea {
        overflow: auto;
    }

    /**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

    optgroup {
        font-weight: bold;
    }

    /* Tables
   ========================================================================== */

    /**
 * Remove most spacing between table cells.
 */

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    td,
    th {
        padding: 0;
    }

    .list-degree,
    .list-now .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }

    .open-close .opener:after,
    .btn,
    .block-rainfall .link,
    .block-rainfall .link:after {
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    .ellipsis {
        white-space: nowrap; /* 1 */
        text-overflow: ellipsis; /* 2 */
        overflow: hidden;
    }

    html {
        box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }

    * {
        max-height: 1000000px;
    }

    body {
        color: #333;
        background: #fff;
        font: 16px/1.2 "Open Sans", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
        min-width: 320px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    img {
        max-width: 100%;
        height: auto;
    }

.description-block {
    height: 29%;
}

.gm-style img {
    max-width: none;
}

    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6,
    .h {
        font-family: inherit;
        font-weight: bold;
        margin: 0 0 .5em;
        color: inherit;
    }

    h1,
    .h1 {
        font-size: 30px;
    }

    h2,
    .h2 {
        font-size: 27px;
    }

    h3,
    .h3 {
        font-size: 24px;
    }

    h4,
    .h4 {
        font-size: 21px;
    }

    h5,
    .h5 {
        font-size: 17px;
    }

    h6,
    .h6 {
        font-size: 15px;
    }

    p {
        margin: 0 0 1em;
    }

    a {
        color: #39f;
    }

        a:hover,
        a:focus {
            text-decoration: none;
        }

    form,
    fieldset {
        margin: 0;
        padding: 0;
        border-style: none;
    }

    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="search"],
    input[type="password"],
    textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
        box-sizing: border-box;
        border: 0px solid #999;
        padding: .4em .7em;
    }

        input[type="text"]:focus,
        input[type="tel"]:focus,
        input[type="email"]:focus,
        input[type="search"]:focus,
        input[type="password"]:focus,
        textarea:focus {
            border-color: #333;
        }

        input[type="text"]::-webkit-input-placeholder,
        input[type="tel"]::-webkit-input-placeholder,
        input[type="email"]::-webkit-input-placeholder,
        input[type="search"]::-webkit-input-placeholder,
        input[type="password"]::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #999;
        }

        input[type="text"]::-moz-placeholder,
        input[type="tel"]::-moz-placeholder,
        input[type="email"]::-moz-placeholder,
        input[type="search"]::-moz-placeholder,
        input[type="password"]::-moz-placeholder,
        textarea::-moz-placeholder {
            opacity: 1;
            color: #999;
        }

        input[type="text"]:-moz-placeholder,
        input[type="tel"]:-moz-placeholder,
        input[type="email"]:-moz-placeholder,
        input[type="search"]:-moz-placeholder,
        input[type="password"]:-moz-placeholder,
        textarea:-moz-placeholder {
            color: #999;
        }

        input[type="text"]:-ms-input-placeholder,
        input[type="tel"]:-ms-input-placeholder,
        input[type="email"]:-ms-input-placeholder,
        input[type="search"]:-ms-input-placeholder,
        input[type="password"]:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: #999;
        }

        input[type="text"].placeholder,
        input[type="tel"].placeholder,
        input[type="email"].placeholder,
        input[type="search"].placeholder,
        input[type="password"].placeholder,
        textarea.placeholder {
            color: #999;
        }

    select {
        -webkit-border-radius: 0;
    }

    textarea {
        resize: vertical;
        vertical-align: top;
    }

    button,
    input[type="button"],
    input[type="reset"],
    input[type="file"],
    input[type="submit"] {
        -webkit-appearance: none;
        -webkit-border-radius: 0;
        cursor: pointer;
    }

    body {
        /*background-image: -webkit-linear-gradient(234deg, #cdece5 0%, #0995cd 100%);
	background-image: linear-gradient(216deg, #cdece5 0%, #0995cd 100%);*/
        min-height: 100vh;
    }


    /*Specific*/


    .wrapper {
        margin: auto;
        overflow: hidden;
    }

    .container {
        margin: auto;
        padding: 0 19px;
    }

    .rainy .img-rainy {
        display: block;
    }

    .rainy .img-sunny {
        display: none;
    }

    .rainy .block-header {
        background-image: -webkit-linear-gradient(270deg, #447f97 0%, #d2e9f1 100%);
        background-image: linear-gradient(180deg, #447f97 0%, #d2e9f1 100%);
    }

    .rainy .list-degree {
        color: #446480;
    }

    .rainy .block-now {
        background-color: #dbecf0;
    }

    .sunny .img-rainy {
        display: none;
    }

    .sunny .img-sunny {
        display: block;
    }

    .sunny .block-header {
        background-image: -webkit-linear-gradient(269deg, #3ca6d2 0%, #d3efe7 100%);
        background-image: linear-gradient(181deg, #3ca6d2 0%, #d3efe7 100%);
    }

    .sunny .list-degree {
        color: #3885a0;
    }

    .sunny .block-now {
        background-color: #d1eeea;
    }

    main {
        position: relative;
    }

        main .block-header {
            padding: 10px 0;
            position: relative;
        }

            main .block-header .container {
                overflow: hidden;
            }

        main .top-block {
            padding: 33px 0 0 126px;
            position: relative;
            margin-bottom: 26px;
            font: bold
        }

        main .img-rainy {
            position: absolute;
            top: 0;
            left: -19px;
            bottom: 0;
            right: 0;
            z-index: 0;
        }

            main .img-rainy img {
                margin-left: 0 !important;
                max-width: none;
                margin-top: 0 !important;
            }

        main .img-sunny {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: -35px;
        }

            main .img-sunny img {
                margin-left: 0 !important;
                max-width: none;
                margin-top: 0 !important;
            }

        main .title-block {
            color: #fff;
            font-size: 12px;
            font-weight: 700;
        }

            main .title-block h1 {
                color: #fff;
                font-size: 16px;
                line-height: 21px;
                text-transform: uppercase;
                font-weight: 700;
            }

            main .title-block p {
                color: #fff;
                font-weight: 700;
            }

    .date-block {
        color: #fff;
        overflow: hidden;
        margin-bottom: 22px;
    }

        .date-block .date {
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            display: inline-block;
        }

        .date-block .time-text {
            display: flex;
            margin-bottom: 9px;
        }

        .date-block .date-text {
            display: block;
        }

        .date-block .degree {
            display: inline-block;
            padding: 0 0 0 20px;
        }

        .date-block .degree-text {
            font-size: 68px;
            font-weight: 700;
            position: relative;
        }

        .date-block .sensor-text {
            font-size: 68px;
            font-weight: 700;
            position: relative;
        }

        .date-block .degree-text:before {
            position: absolute;
            content: "";
            width: 12px;
            height: 12px;
            border: 1px solid #fff;
            border-radius: 50%;
            right: -16px;
            top: 36px;
        }

        .date-block .degree-US-text {
            font-size: 68px;
            font-weight: 700;
            position: relative;
        }

        .date-block .degree-US-text:before {
            position: absolute;
            content: "F";
            right: -16px;
        }

        .date-block .sensor-unit-text {
            position: relative;
            content: "";
            width: 12px;
            height: 12px;
            right: -8px;
            top: -36px;
        }

    .list-degree li {
        display: inline-block;
        vertical-align: top;
        margin-right: 90px;
        width: 70px;
    }

        .list-degree li:last-child {
            margin-right: 0;
        }

    .list-degree .degree-text {
        font-size: 28px;
        font-weight: 700;
        position: relative;
        display: inline-block;
        margin-bottom: 10px;
    }

    .list-degree .text {
        font-size: 28px;
        font-weight: 700;
        position: relative;
        display: inline-block;
        margin-bottom: 10px;
    }

    .list-degree .degree-US-text {
        font-size: 24px;
        font-weight: 700;
        position: relative;
        display: inline-block;
        margin-bottom: 10px;
    }

    .list-degree .degree-US-text:before {
        position: absolute;
        content: "°F";
        right: -25px;
    }

.list-degree .degree-text:before {
    position: absolute;
    content: "°C";
    right: -30px;
}


    .list-degree .units-text {
        position: absolute;
        width: 8px;
        height: 8px;
        right: -17px;
        top: 11px;
    }

    .list-degree .humidity-text {
        font-size: 28px;
        font-weight: 700;
        position: relative;
        display: inline-block;
        margin-bottom: 10px;
    }

        .list-degree .humidity-text:before {
            position: absolute;
            content: "%";
            right: -22px;
            top: 2px;
            height: 10px;
            font-size: 19px;
        }

    .list-degree .text-time {
        display: block;
        font-size: 14px;
    }

        .list-degree .text-time b {
            font-size: 13px;
            text-transform: uppercase;
        }

    .list-degree b .text-time {
        font-size: 13px;
        text-transform: uppercase;
    }

    .block-now {
        background-color: #dbecf0;
        padding: 0px 0 18px 0;
        overflow: hidden;
    }

        .block-now .container {
            position: relative;
            overflow: hidden;
        }

    .list-now {
        /*width: 1800px;*/
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding-left: 20px;
        margin-bottom: 9px;
        height: 100%;
        -webkit-padding-start: 14px;
    }


        .list-now li {
            display: inline-block;
            vertical-align: top;
            margin-right: 14px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            height: 180px
        }

    .item-now {
        height: 100%;
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 2px 0 #c2d9e0;
        /*change padding to fit long text*/
        /*padding: 13px 20px 15px 20px;*/
        padding: 13px 0px 15px 0px;
        text-align: center;
        text-align: -webkit-center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

        .item-now .title-now {
            margin-top: -13px;
            display: block;
            font-size: 14px;
            color: black;
        }

        .item-now .degree-text {
            font-size: 21px;
            font-weight: 300;
            position: relative;
            display: inline-block;
            color: #555a5c;
            margin-bottom: 3px;
        }

        .item-now .sensor-text {
            font-size: 21px;
            font-weight: 300;
            position: relative;
            display: inline-block;
            color: #555a5c;
            margin-bottom: 3px;
        }

        .item-now .sensor-unit-text {
            position: relative;
            width: 8px;
            height: 8px;
            color: #555a5c;
        }

            .item-now .sensor-unit-text.degrees {
                position: relative;
                width: 8px;
                height: 8px;
                top: -7px;
                color: #555a5c;
            }


        .item-now .degree-text:before {
            position: absolute;
            content: "";
            width: 8px;
            height: 8px;
            border: 1px solid #555a5c;
            border-radius: 50%;
            right: -10px;
            top: 8px;
        }

        .item-now .degree-US-text {
            font-size: 21px;
            font-weight: 300;
            position: relative;
            display: inline-block;
            color: #555a5c;
            margin-bottom: 3px;
        }

        .item-now .degree-US-text:before {
            position: absolute;
            content: "F";
            right: -10px;
        }




        .item-now .degree-info {
            font-size: 21px;
            font-weight: 300;
            position: relative;
            display: inline-block;
            color: #555a5c;
        }

    .open-close {
        padding-top: 10px;
    }

        .open-close .opener {
            color: #148db7;
            text-decoration: none;
            position: relative;
            font-size: 14px;
        }

            .open-close .opener:after {
                position: absolute;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                border-color: rgba(255, 255, 255, 0);
                border-top-color: #446480;
                border-width: 6px;
                top: 30%;
                margin-left: 10px;
            }

    .slide {
        text-align: left;
    }

        .slide .list-slide {
            padding-left: 20px;
            font-size: 14px;
            margin-bottom: 10px;
        }

            .slide .list-slide li {
                position: relative;
            }

                .slide .list-slide li:after {
                    position: absolute;
                    content: "";
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    border: 1px solid #148db7;
                    left: -20px;
                    top: 50%;
                    -webkit-transform: translate(0, -50%);
                    -ms-transform: translate(0, -50%);
                    transform: translate(0, -50%);
                }

    .active .opener:after {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        top: 0;
    }

    .btn {
        border: 1px solid #148db7;
        white-space: nowrap;
        font-size: 13px;
        text-decoration: none;
        color: #333;
        padding: 10px;
        display: block;
        text-align: center;
    }

        .btn b {
            color: #148db7;
        }

        .btn:hover {
            background-color: #fff;
        }

    .block-rainfall {
        padding: 16px 0 25px 0;
        background-color: #fff;
    }

        .block-rainfall .title {
            font-size: 14px;
            text-transform: uppercase;
            margin-bottom: 18px;
            display: block;
        }

        .block-rainfall .place-holder {
            margin-bottom: 33px;
        }

        .block-rainfall .link {
            float: right;
            position: relative;
            margin-right: 20px;
            color: #148db7;
            font-size: 14px;
            text-decoration: none;
        }

            .block-rainfall .link:hover {
                color: #333;
            }

                .block-rainfall .link:hover:after {
                    border-top-color: #333;
                }

            .block-rainfall .link:after {
                position: absolute;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                border-color: rgba(255, 255, 255, 0);
                border-top-color: #148db7;
                border-width: 6px;
                top: 15%;
                margin-left: 10px;
                -webkit-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                transform: rotate(270deg);
            }



    /*Make font-face bigger input grids content phones*/
    @media (max-width: 667px) {
        .goappgrdiview {
            font-size: 10px;
        }

        .fa {
            font-size: x-large;
        }
    }

    @media (max-width: 768px) {
        .list-now li {
            height: 170px;
            /*font-size: 21px;*/
        }

        .item-now {
            height: 170px;
            /*font-size: 25px;*/
        }

            .item-now .sensor-unit-text {
                font-size: 15px;
                color: black;
            }

            .item-now .sensor-text {
                font-size: 18px;
                color: black;
                font-weight: normal
            }

            .item-now .degree-info {
                font-size: 22px;
            }
    }


    @media  (max-width: 414px) {
        .km-view-title .title-left {
            margin-left: -30px
        }
    }


   /*Phone*/
    @media (min-width: 376px) {
        .container {
            padding: 0 29px;
        }

        main .top-block {
            padding: 41px 0 0 107px;
        }

        .date-block .degree {
            padding: 0 0 0 68px;
        }

        .list-degree li {
            margin-right: 90px;
        }

        .list-now {
            padding-left: 14px;
        }
    }


    @media (min-width: 320px) {

        .date-block {
            float: right;
        }

            .date-block .date {
                float: right;
                margin-top: 60px;
            }

            .date-block .time-text {
                display: flex;
            }

            .date-block .date-text {
                display: inline-block;
            }

            .date-block .degree {
                padding: 0 0 0 0;
                margin-top: -15px;
            }

            .date-block .degree-text {
                margin-right: 30px;
            }

        .block-now .container {
            padding-bottom: 23px;
        }

            .block-now .container:after {
                content: "";
                height: 1px;
                background-color: #e6f0f3;
                position: absolute;
                left: 27px;
                right: 27px;
                bottom: 0;
            }

        .block-rainfall .title {
            display: inline-block;
            vertical-align: top;
            margin-bottom: 0;
        }

        .block-rainfall .place-holder {
            display: inline-block;
            vertical-align: top;
        }

        .list-degree {
            display: inline-block;
        }
    }


    @media (min-width: 376px) {

        .date-block {
            float: right;
        }

            .date-block .date {
                float: right;
                margin-top: 60px;
            }

            .date-block .time-text {
                display: flex;
            }

            .date-block .date-text {
                display: inline-block;
            }

            .date-block .degree {
                padding: 0 0 0 0;
                margin-top: -15px;
            }

            .date-block .degree-text {
                margin-right: 30px;
            }

        .block-now .container {
            padding-bottom: 23px;
        }

            .block-now .container:after {
                content: "";
                height: 1px;
                background-color: #e6f0f3;
                position: absolute;
                left: 27px;
                right: 27px;
                bottom: 0;
            }

        .block-rainfall .title {
            display: inline-block;
            vertical-align: top;
            margin-bottom: 0;
        }

        .block-rainfall .place-holder {
            display: inline-block;
            vertical-align: top;
        }

        .list-degree {
            display: inline-block;
        }
    }

    @media (min-width: 768px) {
        body {
            padding: 10px;
        }

        .wrapper {
            border-radius: 10px;
            margin: auto;
            max-width: 982px;
        }

        .rainy .block-now {
            background-color: #fff;
        }

        .sunny .block-now {
            background-color: #fff;
        }

        main .top-block {
            padding: 31px 0 0 160px;
            margin-bottom: 0;
        }

        main .img-rainy {
            left: 0;
        }

        main .img-sunny {
            left: 0;
        }

        main .title-block {
            font-size: 20px;
        }

            main .title-block h1 {
                font-size: 24px;
                font-weight: 600;
            }

        .date-block {
            float: right;
        }

            .date-block .date {
                float: right;
                margin-top: 60px;
            }

            .date-block .time-text {
                display: flex;
                padding-right:30px;
            }

            .date-block .date-text {
                display: inline-block;
            }

            .date-block .degree {
                padding: 0 0 0 0;
                margin-top: -15px;
            }

            .date-block .degree-text {
                margin-right: 30px;
            }

        .list-degree {
            margin-left: 0;
        }

        .block-now .container {
            padding-bottom: 23px;
        }

            .block-now .container:after {
                content: "";
                height: 1px;
                background-color: #e6f0f3;
                position: absolute;
                left: 27px;
                right: 27px;
                bottom: 0;
            }

        .list-now {
            width: 100%;
            padding: 0 20px;
            -webkit-box-align: stretch;
            -webkit-align-items: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

            .list-now li {
                border-bottom: 1px solid #e6f0f3;
                border-right: 1px solid #e6f0f3;
                margin-right: 0;
            }

                .list-now li:nth-child(6) {
                    border-right: 0;
                }

                .list-now li:nth-child(12) {
                    border-right: 0;
                }

        .item-now {
            box-shadow: none;
            /*width: 100%;*/
            padding: 13px 10px 11px 10px;
        }

            .item-now .img-holder {
                margin-bottom: 0px;
            }

            .item-now .degree-text {
                margin-bottom: 0;
                font-size: 25px;
            }

        item-now .sensor-text {
            margin-bottom: 0;
            font-size: 25px;
            color: black;
            font-weight: normal;
        }


        .item-now .degree-info {
            font-size: 25px;
        }

        .box-holder {
            float: right;
            min-width: 300px;
        }

        .open-close {
            text-align: right;
        }

            .open-close .opener {
                max-width: 200px;
                margin-right: 43px;
            }

        .slide {
            padding-top: 10px;
            padding-bottom: 10px;
        }

            .slide .list-slide li {
                margin-bottom: 10px;
            }

        .btn:hover {
            background-color: #f2f6f5;
        }

        .block-rainfall .title {
            display: inline-block;
            vertical-align: top;
            margin-bottom: 0;
        }

        .block-rainfall .place-holder {
            display: inline-block;
            vertical-align: top;
        }
    }

    @media (min-width: 768px) and (orientation: landscape) {
        main .block-header {
            padding: 12px 0 3px 0;
        }

        main .img-rainy {
            left: 0;
        }

        main .img-sunny {
            left: 0;
        }

        .date-block {
            padding-top: 9px;
        }

            .date-block .date {
                margin-right: 24px;
            }

            .date-block .degree {
                margin-right: -80px;
            }

            .date-block .degree-text:before {
                top: 23px;
            }

        .block-now {
            padding: 26px 0 18px 0;
        }

        .list-now {
            -webkit-padding-start: 1px;
            margin-bottom: 24px;
        }

        .item-now {
            display: flex;
            padding: 13px 10px 0px 10px;
            flex-direction: column;
            align-items: center;
        }

            .item-now .title-now {
            }

            .item-now .img-holder {
                margin-bottom: 0px;
            }

            .item-now .degree-text {
                margin-bottom: 0;
                font-size: 21px;
            }

            .item-now .sensor-text {
                margin-bottom: 0;
                font-size: 21px;
            }

            .item-now .degree-info {
                font-size: 21px;
            }

        .block-rainfall {
            padding: 16px 0 48px 0;
        }

            .block-rainfall .place-holder {
                /*min-width: 582px;*/
                padding-left: 24px;
                margin-bottom: 18px;
            }

                .block-rainfall .place-holder img {
                    min-width: 582px;
                }

            .block-rainfall .link {
                margin-right: 30px;
            }
    }


    @media (min-width: 908px) and (orientation: landscape) {
        .list-degree {
            display: inline-block;
            margin-left: 38px;
            padding-top: 6px;
        }
    }

    @media (min-width: 1024px) {
        body {
            min-height: 100vh;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            padding: 10px 0;
        }
    }

.numericSystem > .km-button {
    display: flex;
    width: 100%;
    border: none;
    color: black;
    font-weight: bold;
    align-items: center;
    border-radius: 0;
    padding: 0px 25px;
    background: none;
}
.circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #9da2a4;
}
.numericSystem > .km-button > span{
    padding: 0 20px;
}
.km-rightitem {
    right: 0;
    display: flex;
    justify-content: flex-end;
}

.numericSystem > .km-button > div > img{
    width:2.5em;
}
.gearIcon span img {
    margin-top: 35%;
}

@media screen and (max-width: 1024px) {
    .km-rightitem .gearIcon.km-button {
        padding: 7px 10px;
        width: 9%;
        touch-action: none;
        margin-right: 0%;
    }

        .km-rightitem .gearIcon.km-button span img {
            margin-top: 0;
            width: 60%;
        }

    .numericSystems {
        min-width: 70%;
        left: 15%;
    }

    .resetModalWindows {
        left: 15%;
        min-width: 70%;
        top: 30%;
    }

    .resetModalWindowSoilProbe {
        left: 15%;
        min-width: 70%;
        top: 45%;
    }

    .locationEditModalWindow {
        max-width: 550px;
        top: 60%;
    }

    .titleContainer {
        margin: auto;
    }

    .cancelContainer {
        margin-left: 36%;
    }
}

@media screen and (max-width: 980px) {
    .km-rightitem .gearIcon.km-button {
        padding: 7px 10px;
        width: 9%;
        touch-action: none;
        margin-right: 0%;
    }

    .km-rightitem .gearIcon.km-button span img {
        margin-top: 0;
        width:75%;
    }

    .numericSystems {
        min-width: 70%;
        left: 15%;
    }

    .resetModalWindows {
        min-width: 70%;
        left: 15%;
        top: 30%;
    }

    .resetModalWindowSoilProbe {
        left: 15%;
        min-width: 70%;
        top: 45%;
    }

    .locationEditModalWindow {
        max-width: 550px;
        top: 60%;
    }

    .titleContainer {
        margin: auto;
    }

    .cancelContainer {
        margin-left: 28%;
    }
}

@media screen and (max-width: 650px) {
    .km-rightitem .gearIcon.km-button {
        padding: 7px 10px;
        width: 9%;
        touch-action: none;
        margin-right: 0%;
    }

    .km-rightitem .gearIcon.km-button span img {
        margin-top: 0;
        width: 100%;

    }

    .numericSystems {
        min-width: 70%;
        left: 15%;
    }

    .resetModalWindows {
        min-width: 70%;
        left: 15%;
        top: 30%;
    }

    .resetModalWindowSoilProbe {
        left: 15%;
        min-width: 70%;
        top: 45%;
    }

    .locationEditModalWindow {
        max-width: 450px;
        top: 60%;
    }

    .titleContainer {
        margin: auto;
    }

    .cancelContainer {
        margin-left: 25%;
    }
}


@media screen and (max-width: 480px) {
    .km-rightitem .gearIcon.km-button {
        padding: 10px 0px;
        width: 9%;
        touch-action: none;
        margin-right: 3%;
    }

    .km-rightitem .gearIcon.km-button span img{
        margin-top: 0;
        width: 100%;
    }

    .numericSystems {
        min-width: 70%;
        left: 15%;
    }

    .resetModalWindows {
        min-width: 70%;
        left: 15%;
        top: 30%;
    }

    .resetModalWindowSoilProbe {
        left: 15%;
        min-width: 70%;
        top: 45%;
    }

    .locationEditModalWindow {
        max-width: 350px;
        top: 60%;
    }

    .titleContainer {
        margin: auto;
    }

    .cancelContainer {
        margin-left: 13%;
    }
}


.km-loader {
    position: fixed !important;
    height: 100vh !important;
    width: 100vw !important;
}
    

.k-loading-mask {
    position: fixed !important;
    height: 100vh !important;
    width: 100vw !important;
}

#goappweathersensors .slick-slide {
    min-width: 11%;
}

.k-slider-selection {
    background-color: darkgreen !important;
}


li.k-tick.k-first.k-tick-large{
    margin-left: 13px;
}

.km-widget .k-slider .k-button, .km-widget .k-slider .k-label, .km-widget .k-slider .k-tick{
    display: block;
    margin-top: 10px;
}


@media screen and (max-width: 1024px) {
    .sliderMain {
        width: 100% !important;
    }

    .alarmsliderClass {
        width: 500px !important;
    }
}


@media screen and (max-width: 1024px) {
    .sliderMain {
        width: 100% !important;
    }

    .alarmsliderClass {
        width: 500px !important;
    }
}

@media screen and (max-width: 980px) {
    .sliderMain {
        width: 100% !important;
    }

    .alarmsliderClass {
        width: 500px !important;
    }

    .RootZone {
        flex-wrap: wrap !important;
    }
}

@media screen and (max-width: 650px) {
    .sliderMain {
        width: 100% !important;
    }

    .alarmsliderClass {
        width: 480px !important;
    }
}


@media screen and (max-width: 480px) {
    .sliderMain {
        width: 100% !important;
    }

    .alarmsliderClass {
        width: 320px !important;
    }
}

@media screen and (max-width: 480px) {
    .sliderMain {
        width: 100% !important;
    }

    .alarmsliderClass {
        width: 280px !important;
    }
}

.input-validation-error {
    border: 1px solid #ff0000 !important;
    background-color: #ffeeee !important;
}

#RemoteApis > span {
    margin-bottom: 20px;
    display: block;
}

.chart-loadder {
    position: relative;
}

.lds-ring {
    position: absolute;
    top: 50%;
    left: calc(50% - 32px);
    transform: translate(-50%,-50%);
    z-index: 2;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 64px;
        height: 64px;
        margin: 8px;
        border: 8px solid #fff;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #34BF34 transparent transparent transparent;
    }

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.options{
    display: flex;
    width: 100%;

}

.optionsItem1,
.optionsItem2 {
    background-color: #E8EAEE;
    cursor: pointer;
    width: 50%;
    padding: 15px 15px 15px;
    color: black;
}

.divider{
    height: 100%;
    width: 3px;
    color: darkgreen;
}

.optionActive {
    background-color: white;
    transition: 0.2s;
    background-color: rgba(0,128,0, 0.25);
    color: darkgreen;
}

.hidden{
    display: none;
}

.shown{
    display: block;
}


.optionsItem1:hover,
.optionsItem2:hover {
    color: darkgreen !important;
}

.deffaultDateRange {
    min-height: 4em;
    justify-content: center;
    display: flex;
    cursor: pointer;
    padding: 0;
    border: none;
}


.deffaultDateRange > .km-button {
    display: flex;
    width: 100%;
    border: none;
    color: black;
    font-weight: bold;
    align-items: center;
    border-radius: 0;
    padding: 0px 25px;
    background: none;
}

.deffaultDateRange > .km-button > span {
    padding: 0 20px;
}

.deffaultDateRange > .km-button > div > img {
    width: 2.5em;
}


.RootZone {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100vw;
}

.gwcollapsible .km-collapsible-header {
    border: none;
    height: 2em;
    line-height: 2em;
    padding-left: 0;
}

.gwcollapsible .km-collapsible-content {
    padding-left: 0;
    padding-right: 0;
    border: none;
}

.gwcollapsible .km-collapsible-header .km-icon, .gwcollapsible .km-expanded .km-collapsible-header .km-icon {
    left: unset;
    right: 0;
    color: #333333 !important;
}
.km-collapsible-content, .km-nova .km-collapsible-content {
    padding: 0;
}