/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team. 
 */
/* ==========================================================================
   Base styles: opinionated defaults  
   ========================================================================== */
/************
RVPlanet_SharedStyle_FlexBase.less
*************/
.d-flex {
  display: flex;
}
.flex-none {
  flex: none;
}
/**************** Flex Direction ***************/
.flex-direction-column {
  flex-direction: column;
}
.flex-direction-row {
  flex-direction: row;
}
.flex-direction-row-reverse {
  flex-direction: row-reverse;
}
/**************** Flex Vertical Alignment ***************/
.flex-align-top {
  align-items: flex-start;
}
.flex-align-strech {
  align-items: stretch;
}
.flex-align-middle {
  align-items: center;
}
.flex-justify-content-middle {
  justify-content: center;
}
.flex-justify-content-start {
  justify-content: flex-start;
}
.flex-justify-content-end {
  justify-content: flex-end;
}
.flex-align-bottom {
  align-items: flex-end;
}
.flex-align-baseline {
  align-items: baseline;
}
.flex-self-align-baseline {
  align-self: baseline;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-self-align-start {
  align-self: flex-start;
}
.flex-self-align-end {
  align-self: flex-end;
}
/**************** Flex Horizontal Alignment ***************/
.flex-spread-horizontal-items-evenly {
  justify-content: space-between;
}
.flex-align-row-center {
  justify-content: center;
}
.flex-align-row-end {
  justify-content: flex-end;
}
.flex-align-row-start {
  justify-content: flex-start;
}
/*********************************************************/
.flex-col-full-size {
  flex: 1;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.flex-6 {
  flex: 6;
}
.flex-7 {
  flex: 7;
}
.flex-8 {
  flex: 8;
}
.flex-9 {
  flex: 9;
}
.flex-10 {
  flex: 10;
}
.flex-11 {
  flex: 11;
}
.flex-12 {
  flex: 12;
}
.flex-row-break {
  flex-basis: 100%;
  height: 0;
}
.design-danger-label {
  color: #d9534f;
}
.danger-border {
  border-color: red !important;
}
.danger-label {
  padding-right: 15px;
  margin-top: 20px;
}
.future-events-table {
  max-height: 300px;
  overflow-y: auto;
}
.text-center {
  text-align: center;
}
.title-h4 {
  font-size: 24px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
.input-number-width {
  max-width: 80px;
}
.header-above-table-repeat {
  margin: 20px 0;
}
.row-alert-valid {
  width: 212px;
}
body.md-dialog-is-showing {
  top: 0 !important;
}
.md-dialog-container {
  z-index: 9999;
}
md-time-picker ng-form {
  max-width: 200px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
md-time-picker ng-form .md-icon-button.md-button {
  order: 3;
}
md-time-picker ng-form md-hours-minutes[type="HH"] {
  order: 0;
}
md-time-picker ng-form .time-colon {
  display: none;
  order: 1;
}
md-time-picker ng-form md-hours-minutes[type="MM"] {
  order: 2;
}
md-time-picker md-input-container {
  margin: 0;
}
md-time-picker .md-icon-button.md-button {
  margin: 0;
  padding: 0;
  width: 30px;
}
md-time-picker .md-up-arrow {
  top: 9px;
}
md-time-picker .md-down-arrow {
  top: 9px;
}
.rtl md-time-picker ng-form {
  flex-direction: row-reverse;
}
.rtl md-time-picker .md-icon-button.md-button,
.rtl md-time-picker md-hours-minutes[type="HH"],
.rtl md-time-picker .time-colon,
.rtl md-time-picker md-hours-minutes[type="MM"] {
  order: 0;
}
.mobile-view md-time-picker input {
  border-radius: 2px;
  border: 1px #999 solid;
  background: #fff;
  color: #333333;
}
.mobile-view md-time-picker .md-up-arrow {
  top: 5px;
}
.mobile-view md-time-picker .md-down-arrow {
  top: 5px;
}
.toast-info {
  background-color: #FFD800 !important;
  color: black !important;
}
.controller-images {
  padding-bottom: 20px;
  /*.color-666 {
        color:#666 ;
    }*/
}
.controller-images .overflow-elipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.controller-images .images-list-container {
  /*border: 1px solid gray;*/
  background-color: #f7f7f7;
  border-radius: 10px;
  padding: 5px;
}
.controller-images .image-item-wrapper {
  margin: 5px;
  width: 250px;
  display: inline-block;
  vertical-align: top;
}
.controller-images .image-item-wrapper .image-title {
  font-weight: bold;
}
.controller-images .image-item-wrapper .image-comments {
  font-size: 14px;
}
.controller-images .image-item-wrapper .btn-edit-image {
  border: none;
  font-size: 16px;
  background-color: transparent;
  color: #666;
}
.controller-images .image-item-wrapper .btn-edit-image:hover {
  background-color: #EEE;
}
.controller-images .image-item-wrapper .btn-delete-image {
  color: red;
  border: none;
  font-size: 16px;
  background-color: transparent;
}
.controller-images .image-item-wrapper .btn-delete-image:hover {
  background-color: #EEE;
}
.controller-images .image-frame {
  width: 250px;
  height: 250px;
  margin-bottom: 5px;
  /*border: solid 1px #AAA;*/
  background-color: #eee;
  border-radius: 10px;
  padding: 5px;
  text-align: center;
  display: flex;
  cursor: pointer;
}
.controller-images .image-frame .image {
  max-width: 235px;
  max-height: 235px;
  border-radius: 10px;
  display: block;
  margin: auto;
}
.controller-images .add-image-container {
  /*border: silver solid 1px;*/
  background-color: #f7f7f7;
  border-radius: 10px;
  padding: 15px 0;
  margin-bottom: 12px;
  margin-top: 12px;
}
.controller-images .add-image-input {
  border: 1px solid black;
  width: 100%;
  padding: 2px 4px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
}
.controller-images .add-image-input.button-item {
  background-color: #5bc0de;
  color: white;
  width: 150px;
  font-weight: normal;
}
.controller-images .modal-controller-image {
  /*.modal-body {
            height: 70vh;
            text-align: center;
        }*/
}
.controller-images .modal-controller-image .modal-dialog {
  width: 70vw;
}
.controller-images .modal-controller-image .modal-content {
  background-color: #696868 !important;
  border: 1px solid silver !important;
  /*padding: 0px;*/
}
.controller-images .modal-controller-image .modal-content .close {
  color: white;
}
.controller-images .modal-controller-image .modal-content .modal-header {
  background: transparent;
}
.controller-images .modal-controller-image .modal-content .modal-title {
  color: #f2f2f2;
}
.controller-images .modal-controller-image .modal-content .modal-body {
  max-height: 70vh;
  height: auto;
  text-align: center;
}
.controller-images .modal-controller-image .modal-image-comments {
  padding: 10px;
  background-color: #737373;
  border-radius: 6px;
  margin: 10px;
  color: #ffffff;
}
.controller-images .modal-controller-image .image-wrapper {
  width: 100%;
  height: 100%;
}
.controller-images .modal-controller-image .modal-image {
  /*border-radius: 10px;
            width: auto;
            height: auto;
           
            position: absolute;
            left: 50%;
            top: 50%;
            height: auto;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);*/
  /*height: 100%;
            width: 100%;
            object-fit: contain;*/
  height: 60vh;
  width: 65vw;
  object-fit: contain;
  object-position: center;
}
.controller-images .modal-controller-image .btn-modal-image-change {
  color: #666;
  border: none;
  position: absolute;
  font-size: 32px;
  margin: auto;
  top: 45%;
  /*background-color: rgba(255, 255, 255, 0.5);*/
}
.controller-images .modal-controller-image .btn-modal-image-change .fa-chevron-right {
  font-size: 32px;
}
.mobile-view .image-item-wrapper {
  margin: auto;
  display: block;
  margin-bottom: 15px;
  margin-top: 5px;
}
.mobile-view .modal-controller-image .modal-dialog {
  width: auto;
}
.managers-report .report-title {
  font-size: 75px;
}
.managers-report .table-of-content .caption {
  font-size: 52px;
  text-decoration: underline;
}
.managers-report .table-of-content li {
  font-size: 35px;
  margin: 20px;
}
.managers-report h2 {
  font-size: 30px;
  text-decoration: underline;
  margin-bottom: 20px;
}
.managers-report .table td,
.managers-report .table th {
  text-align: center;
  font-size: 20px;
}
.managers-report .table .data {
  direction: ltr;
}
.managers-report .table-summary {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.managers-report .consumption-grid-header-wrapper {
  padding-left: 17px;
}
.managers-report .consumption-grid-data-wrapper {
  height: calc(100vh - 345px);
  overflow-y: scroll;
}
.managers-report .attention {
  -webkit-print-color-adjust: exact;
  background-color: red !important;
  color: black !important;
}
.managers-report .valid {
  -webkit-print-color-adjust: exact;
  background-color: #70ad47 !important;
  color: black !important;
}
.managers-report .prev-year-cell {
  -webkit-print-color-adjust: exact;
  background-color: #22bb36a1 !important;
  color: black !important;
}
.managers-report .curr-year-cell {
  -webkit-print-color-adjust: exact;
  background-color: #065ff2a1 !important;
  color: black !important;
}
.managers-report .prev-year-gray-cell {
  -webkit-print-color-adjust: exact;
  background-color: #bc8fdd !important;
  color: black !important;
}
.managers-report .curr-year-gray-cell {
  -webkit-print-color-adjust: exact;
  background-color: #7030a0 !important;
  color: white !important;
}
@media print {
  .managers-report .consumption-grid-data-wrapper {
    height: auto;
    overflow-y: hidden;
  }
  .managers-report .consumption-grid-header-wrapper {
    padding-left: 0;
  }
}
.dashboard {
  background-color: white;
  /*min-height: 100vh;*/
  border-radius: 5px;
  margin: 8px 0 0 0;
  color: #326e90;
  padding-bottom: 10px;
}
.dashboard .warinig-light {
  color: #fbca05;
}
.dashboard .warinig-medium {
  color: #f98803;
}
.dashboard .warinig-high {
  color: #ff4d4d;
}
.dashboard .dashboard-page-header {
  padding: 0 20px;
}
.dashboard .dashboard-page-header .page-title {
  /*font-family: Assistant;*/
  font-size: 32px;
  color: #6f6e6e;
}
.dashboard .show-only-on-parent-hover {
  display: none;
}
.dashboard .widget-box {
  box-shadow: 2px 2px 20px 2px #ddd;
  border-radius: 8px;
}
.dashboard .widget-box:hover .show-only-on-parent-hover {
  display: inline;
}
.dashboard .dashboard-gauge-label .dashboard-label-value {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #2E6E91;
  font-family: 'Assistant';
}
.dashboard .dashboard-gauge-label .dashboard-label-title {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  color: #333;
  font-family: 'Assistant';
}
.dashboard .large-widget {
  height: 320px;
  margin: 5px;
  padding: 20px;
}
.dashboard .large-widget .large-widget-caption {
  font-size: 24px;
}
.dashboard .large-widget .large-widget-caption-bold {
  font-size: 24px;
  font-weight: bold;
}
.dashboard .large-widget .large-value {
  line-height: 100px;
  font-size: 100px;
  font-weight: bold;
  padding-top: 40px;
  text-align: center;
}
.dashboard .total-widgt {
  text-align: center;
  padding-top: 10px;
  height: 85px;
  width: 100%;
}
.dashboard .total-widgt .total-value {
  font-size: 24px;
}
.dashboard .total-widgt .total-caption {
  font-size: 16px;
}
.dashboard .dashboard-weather-container {
  background-image: url('/app/components/dashboard/images/weather-widget-bg-desktop-half.jpg'), url('/app/components/dashboard/images/weather-widget-bg-desktop-sky.jpg');
  background-repeat: no-repeat, repeat;
  background-size: contain;
  background-position: left top, left top;
  height: 85px;
  border-radius: 10px;
}
.dashboard .weather-no-connection-label {
  font-size: 24px;
  color: white;
  padding-top: 22px;
  padding: 22px 30px;
}
.dashboard .weather-data-container {
  color: white;
  text-align: center;
  padding-top: 14px;
}
.dashboard .weather-data-container .weather-data-icon-container {
  font-size: 42px;
  display: inline-block;
  width: 40px;
}
.dashboard .weather-data-container .weather-data-value-container {
  display: inline-block;
  text-align: right;
  /*vertical-align: sub;*/
  padding-right: 8px;
}
.dashboard .weather-data-container .weather-data-value-container .weather-data-value-value {
  font-size: 24px;
  line-height: 1.1;
  direction: ltr;
}
.dashboard .weather-data-container .weather-data-value-container .weather-data-value-caption {
  font-size: 16px;
}
.dashboard .valves-errors-container {
  border-bottom: 1px solid #EEE;
  padding-bottom: 10px;
  /*.valve-error-value {
            display: inline-block;
            font-size: 42px;
            line-height: 50px;
            width: 60px;
            text-align: left;
        }

        .valve-error-caption-container {
            display: inline-block;
            text-align: right;
            padding-right: 8px;
            vertical-align: super;

            .valve-error-caption-valve-lable {
                font-size: 16px;
                color: #2b2b2b;
                line-height: 10px;
            }

            .valve-error-caption-lable {
                font-size: 22px;
                font-weight: bold;
                line-height: 26px;
            }
        }

        .valve-error-caption {
            font-size: 16px;
            color: #2b2b2b;
        }*/
}
.dashboard .valves-errors-container .valve-error-value {
  font-size: 28px;
  margin-top: 8px;
}
.dashboard .valves-errors-container .irr-err-nav-icon {
  font-size: 24px;
}
.dashboard .return-errors-container {
  background-color: #f1f3f4;
  border-radius: 10px;
  margin: 10px 45px;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  padding: 6px 0;
}
.dashboard .return-errors-container .return-errors-value {
  color: #eb0d38;
}
.dashboard .map-container {
  position: relative;
  box-shadow: 2px 2px 20px 2px #ddd;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.dashboard .map-isShowConrollers-container {
  position: absolute;
  background-color: white;
  left: 15px;
  top: 50px;
  z-index: 9;
  padding: 8px 15px 9px 15px;
  font-size: 16px;
  margin: 11px;
  color: black;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}
.dashboard .map-connected-users-container {
  position: absolute;
  background-color: white;
  /*max-width: calc(~'100% - 150px');*/
  width: 250px;
  right: 20px;
  z-index: 9;
  font-size: 16px;
  margin: 11px;
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}
.dashboard #grid_waterLeakageControllers .k-grid-content,
.dashboard #grid_irrErrors .k-grid-content {
  max-height: 70vh;
  /*min-height: 50vh;*/
  overflow-y: auto;
}
.dashboard .ui-table-on-kendo .k-grid-header th {
  background-color: white;
  padding: 5px;
  border: 1px solid #ddd;
  background-image: none;
  color: black;
}
.dashboard .ui-table-on-kendo .k-grid-header .k-link {
  color: black;
}
.dashboard .k-rtl .k-grid-header .k-header {
  text-align: center;
}
.mobile-view .dashboard .dashboard-page-header {
  padding: 0px 0 10px 0;
}
.mobile-view .dashboard .dashboard-page-header .page-title {
  font-size: 24px;
}
.mobile-view .dashboard .mobile-widget-container {
  margin-top: 18px;
}
.mobile-view .dashboard .widget-box:hover .show-only-on-parent-hover {
  display: none;
}
.mobile-view .dashboard .large-widget {
  height: auto;
  padding: 20px;
}
.mobile-view .dashboard .large-widget .large-widget-caption {
  font-size: 20px;
}
.mobile-view .dashboard .large-widget .large-value {
  font-size: 60px;
  padding-top: 20px;
  line-height: 85px;
}
.mobile-view .dashboard .weather-no-connection-label {
  padding: 33px 2px;
}
.mobile-view .dashboard .valves-errors-container {
  /*  .valve-error-value {
                font-size: 40px;
                width: 45px;
            }

            .valve-error-caption-container {

                .valve-error-caption-valve-lable {
                    font-size: 14px;
                    color: #2b2b2b;
                    line-height: 10px;
                }

                .valve-error-caption-lable {
                    font-size: 18px;
                    font-weight: bold;
                    line-height: 26px;
                }
            }*/
}
.mobile-view .dashboard .valves-errors-container .valve-error-value {
  font-size: 24px;
}
.mobile-view .dashboard .valves-errors-container .irr-err-nav-icon {
  font-size: 22px;
}
.mobile-view .dashboard .return-errors-container {
  margin: 10px;
  font-size: 20px;
}
.mobile-view .dashboard .dashboard-weather-container-mobile {
  background-image: url('/app/components/dashboard/images/weather-widget-bg-mobile-half.jpg'), url('/app/components/dashboard/images/weather-widget-bg-mobile-sky.jpg');
  background-repeat: no-repeat, repeat;
  background-size: cover;
  background-position: left top, left top;
  height: 160px;
  border-radius: 10px;
}
.mobile-view .dashboard .dashboard-weather-container-mobile .weather-data-container .weather-data-value-container {
  width: 80px;
}
.mobile-view .dashboard .dashboard-weather-container-mobile .weather-data-container .weather-data-value-container .weather-data-value-value {
  font-size: 20px;
}
.green-mng-search-text-wrapper {
  margin: 15px 0;
  z-index: 9;
  display: inline-block;
  position: relative;
}
.green-mng-search-text-wrapper input {
  line-height: 20px;
  font-size: 16px;
  border-width: 0 0 1px 0;
  border-color: #999;
  outline: none;
}
.green-mng-search-text-wrapper .btn-clear-search {
  background: none;
  border: none;
  left: 0px;
  top: 0px;
  position: absolute;
}
.green-mng-blue-grid .k-grid-header th {
  background-color: #337ab7 !important;
}
.users-table-inactiveUser {
  color: gray;
}
.green-bulk-action-modal {
  background-color: #f8f9fb;
}
.green-bulk-action-modal .bulk-action-field-wrapper {
  border: 1px solid #DDD;
  border-radius: 10px;
  padding: 10px 15px;
  background-color: white;
  margin: 15px;
}
.green-modal-form .form-group {
  margin-bottom: 4px;
}
.green-modal-form .form-group .form-control-static {
  padding-top: 0;
}
.green-modal-form .form-group label {
  margin-bottom: 0;
}
.green-modal-form .ui-grouped-radio-button {
  font-size: 14px;
  margin: 3px 3px;
}
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  background: #d2d4d8;
}
ul li {
  list-style: none;
}
body {
  font-family: Assistant;
  font-size: 16px;
  height: 100%;
}
h4:focus,
button:focus {
  outline: 0;
}
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}
h1 {
  color: #1f4e70;
}
/* ==========================================================================
   Agam theme parameters
   ========================================================================== */
/* General Colors */
/* Statuses */
/* ==========================================================================
  UI-Components  
   ========================================================================== */
/************************
        UI-input
************************/
.ui-input {
  background: #fff;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 2px;
  text-indent: 2px;
}
.input-edit {
  border: 1px solid #444;
}
.time-edit-mode ng-form[name=timeForm] input {
  border: 1px solid #444;
}
/* if RTL */
/************************
        UI-breadcrumbs   
************************/
.ui-breadcrumbs {
  font-size: 16px;
  border-radius: 0;
  padding: 0 30px;
  line-height: 36px;
  background-color: #555;
  margin-bottom: 0;
  color: #eeeff1;
}
.ui-breadcrumbs > .active {
  color: #fff;
  font-weight: 600;
}
.ui-breadcrumbs > li + li:before {
  padding: 0 5px;
  color: #eeeff1;
  content: "/ ";
}
.ui-breadcrumbs a {
  color: #eeeff1;
}
/************************
        UI-button 
************************/
.ui-button {
  color: #fff;
  background: #68add5;
  border: none;
  border-radius: 2px;
  padding: 7px 15px;
}
.ui-button i {
  padding: 0 15px 0 0;
}
.ui-button:hover {
  background: #7ebadc;
  color: #fff;
}
.ui-button:focus {
  outline: none;
}
.button-design-padding {
  padding: 7px 15px;
}
.design-confirm {
  color: white;
  background: silver;
}
/* if RTL */
.rtl .ui-button i {
  padding: 0 0px 0 15px;
}
/* Customize the label (the container) */
.ui-checkbox,
.ui-checkbox2 {
  display: inline-block;
  height: 25px;
  width: 25px;
  position: relative;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0 5px;
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
}
.ui-checkbox input,
.ui-checkbox2 input {
  position: absolute;
  opacity: 0;
}
.ui-checkbox input:checked ~ .checkboxbtn,
.ui-checkbox2 input:checked ~ .checkboxbtn {
  background-color: #fff;
}
.ui-checkbox input:checked ~ .checkboxbtn:after,
.ui-checkbox2 input:checked ~ .checkboxbtn:after {
  display: block;
}
.ui-checkbox .checkboxbtn,
.ui-checkbox2 .checkboxbtn {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 2px;
  border: 1px solid #999;
  /* Create the checkmark/indicator (hidden when not checked) */
}
.ui-checkbox .checkboxbtn:after,
.ui-checkbox2 .checkboxbtn:after {
  content: "";
  position: absolute;
  display: none;
  /* Style the checkmark/indicator */
  left: 8px;
  top: 3px;
  width: 8px;
  height: 15px;
  border: solid #68add5;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.ui-checkbox:hover input ~ .checkboxbtn,
.ui-checkbox2:hover input ~ .checkboxbtn {
  background-color: #ccc;
}
/***************************
        UI-Container-panel   
***************************/
.ui-container-panel {
  position: relative;
  background: #fff;
  border-radius: 4px;
  margin: 0 auto;
  margin-top: 12px;
  padding: 10px 15px;
  min-width: 1170px;
}
.ui-container-panel .sk-wave {
  position: absolute;
}
.ui-container-panel .on-loading-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background-color: gray;
  opacity: 0.4;
}
.ui-container-panel .container-fix-title {
  padding-top: 4px;
}
.ui-container-panel .container-fix-button {
  margin-top: 4px;
}
.ui-container-panel .margin-DurationInMinutes {
  margin-right: 10px;
}
.ui-container-panel .container-panel-title-section {
  padding: 10px;
  height: 40px;
}
.ui-container-panel .container-panel-title-section h4 {
  margin: 0;
}
.ui-container-panel.search-panel {
  border: 5px solid #efa042;
}
.ui-container-panel .edit-btn {
  outline: none;
}
.ui-container-panel .edit-btn .icon-edit {
  color: #326e90;
}
.ui-container-panel .edit-btn .icon-edit:hover {
  color: #68add5;
}
.ui-container-panel .edit-table-report {
  margin-bottom: 20px;
  margin-left: 20px;
  margin-top: 10px;
  margin-right: 20px;
}
.ui-container-panel .edit-controller-target {
  visibility: collapse;
}
.ui-container-panel .edit-remark-red {
  display: inline-block;
  color: #e52e50;
  padding: 3px 1px;
  font-weight: bold;
}
.ui-container-panel .edit-remark-green {
  display: inline-block;
  color: #75d26d;
  padding: 3px 1px;
  font-weight: bold;
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .ui-container-panel .container-panel-title-section {
    height: initial;
  }
}
.rtl .margin-DurationInMinutes {
  margin-left: 10px;
}
/************************
        UI-Info-field
************************/
.ui-info-field {
  border: 1px #cccccc solid;
  padding: 3px 5px;
  background: #fff;
  border-radius: 2px;
  margin: 5px 0;
}
.ui-info-field h4 {
  margin: 0;
  font-weight: normal;
  border-bottom: 1px solid #e6e9ec;
}
.ui-info-field label {
  margin-bottom: 0;
  padding: 5px 0 0 0;
}
.ui-info-field label.validation-error {
  padding: 2px 4px;
}
.ui-info-field i {
  padding-left: 0;
  padding-right: 7px;
  font-size: 20px;
  color: #7a7a7a;
}
.ui-info-field i.Watering-now {
  color: #51985d;
}
.ui-info-field i.active {
  color: #68add5;
}
.ui-info-field i.disabled {
  color: #7a7a7a;
}
.ui-info-field i.danger {
  color: #d24949;
}
.edit-mode .ui-info-field {
  border: none;
}
/* if RTL */
.rtl .ui-info-field i {
  padding-right: 0;
  padding-left: 7px;
}
/************************
        UI-Frame   
************************/
.ui-frame {
  min-width: 1200px;
}
/* if RTL */
.rtl .ui-frame {
  direction: rtl;
  text-align: right;
}
/************************
        UI-Menu   
************************/
.ui-menu .menu-item {
  background: #68add5;
  display: inline-block;
  width: 105px;
  height: 65px;
  padding: 10px 10px;
  font-size: 18px;
  float: left;
  cursor: pointer;
  border-right: 1px solid #fff;
}
.ui-menu .menu-item:hover {
  background: #7ec3eb;
}
.ui-menu .menu-item:last-child {
  border: none;
}
.ui-menu .menu-item.ui-quick-nav-btn {
  background: #7a7a7a;
  width: 115px;
}
.ui-menu .menu-item.ui-quick-nav-btn:hover {
  background: #949393;
}
.ui-menu .menu-item.ui-search-button {
  background: #efa042;
  width: 75px;
}
.ui-menu .menu-item.ui-search-button:hover {
  background: #fbb460;
}
.ui-menu .menu-item i {
  color: #c6e0ef;
  font-size: 120%;
}
/* if RTL */
.rtl .menu-item {
  float: right;
  border-left: 1px solid #fff;
}
/************************
        UI-Mobile-Menu   
************************/
.ui-mobile-menu {
  width: 100%;
  z-index: 9999;
}
.ui-mobile-menu .mobile-toggle-button {
  background: #68add5;
  padding: 10px;
  position: absolute;
  left: -1px;
  top: 5px;
  width: 39px;
  height: 45px;
  border: 1px solid #fff;
  border-radius: 2px;
  color: #fff;
}
.ui-mobile-menu .mobile-toggle-button .icon-bar {
  background-color: #ffffff;
  display: block;
  margin-top: 4px;
  height: 2px;
  border-radius: 1px;
}
.ui-mobile-menu .mobile-toggle-button span:first-child {
  margin-top: 0;
}
.ui-mobile-menu .nav-container {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.ui-mobile-menu .nav-container.show-nav {
  visibility: visible;
  opacity: 1;
  height: auto;
  transition: all 0.2s ease-out;
}
.ui-mobile-menu .nav-container.hide-nav {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.2s ease-out;
}
.ui-mobile-menu .menu-item {
  background: #68add5;
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid #fff;
}
.ui-mobile-menu .menu-item a {
  color: #fff;
}
.ui-mobile-menu .menu-item .mobil-sub-menu {
  width: 100%;
  position: relative;
  background: none;
  border: none;
  box-shadow: none;
}
.ui-mobile-menu .menu-item .mobil-sub-menu li {
  border-bottom: 1px solid #eee;
}
.ui-mobile-menu .menu-item .mobil-sub-menu li:last-child {
  border: none;
}
.ui-mobile-menu .menu-item .mobil-sub-menu li a {
  padding: 10px 20px;
  color: #fff;
  background: #558fb1;
}
.ui-mobile-menu .menu-item:hover {
  background: #7ec3eb;
}
.ui-mobile-menu .menu-item:last-child {
  border: none;
}
.ui-mobile-menu .menu-item.ui-search-button {
  background: #efa042;
  width: 75px;
}
.ui-mobile-menu .menu-item.ui-search-button:hover {
  background: #fbb460;
}
.ui-mobile-menu .menu-item i {
  color: #c6e0ef;
  font-size: 120%;
}
/* if RTL */
.rtl .ui-mobile-menu .mobile-toggle-button {
  right: 4px;
}
/***********************
        UI-Quick-nav   
************************/
.ui-quick-nav {
  z-index: 1000;
  padding: 10px;
  background-color: white;
  position: fixed;
  top: 105px;
  width: 350px;
  height: 100%;
  border: 1px solid #ccc;
}
.ui-quick-nav.historyCollapsed {
  right: -350px;
  transition: right 0.35s ease-in-out;
}
.ui-quick-nav.historyExpanded {
  right: 0;
  transition: right 0.35s ease-in-out;
}
.ui-quick-nav .toggle-container {
  position: absolute;
  left: -62px;
  top: 0;
  height: 44px;
  padding: 0;
  background-color: #68add5;
  border-radius: 20px 0 0 20px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-left: -2px;
  z-index: 9;
}
.ui-quick-nav .toggle-container .history-panel-toggle {
  text-align: center;
  padding: 5px;
  color: #fff;
  font-size: 24px;
  outline: 0;
  width: 62px;
}
.ui-quick-nav .toggle-container.active {
  background-color: #efa042;
}
.ui-quick-nav .toggle-container:hover {
  background-color: #3788b7;
}
.ui-quick-nav ul {
  height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
.ui-quick-nav .fa-times {
  color: #999;
}
.ui-quick-nav .arrow {
  display: inline-block;
  height: 12px;
  width: 12px;
  background: white;
  position: absolute;
  border-width: 0 0 1px 1px;
  border-color: #ccc;
  border-style: solid;
  transform: rotate(135deg);
  top: -6px;
  right: 49px;
}
.ui-quick-nav h5 {
  margin: 0 0 10px 0;
  color: #fff;
}
.ui-quick-nav .controller-name {
  font-size: 16px;
  color: #555;
  font-weight: bold;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-quick-nav .status-icon {
  font-size: 20px;
}
.ui-quick-nav a {
  text-decoration: none;
}
.ui-quick-nav .quick-nav-item {
  border-bottom: 1px solid #d7d7d7;
  padding: 20px 5px;
}
.ui-quick-nav .quick-nav-item:last-child {
  border: none;
  margin-bottom: 110px;
}
.ui-quick-nav .quick-nav-item .footer {
  margin: 5px 0 5px 0;
}
.ui-quick-nav .show-controller {
  color: #fff;
  background: #68add5;
  border: none;
  border-radius: 2px;
  padding: 1px 7px;
}
.ui-quick-nav .show-controller:hover {
  color: #fff;
  background: #7ec3eb;
}
.ui-quick-nav .ui-quick-nav-btn {
  background: #7a7a7a;
}
.ui-quick-nav .ui-quick-nav-btn span {
  display: block;
  height: 26px;
  width: 36px;
  margin: 0 auto 0;
  border: 1px solid #fff;
  text-align: center;
  line-height: 22px;
  color: #fff;
}
.ui-quick-nav .ui-quick-nav-btn i.fa {
  color: #fff;
  opacity: 0.7;
}
.ui-quick-nav .ui-quick-nav-btn:hover i.fa {
  opacity: 1;
}
/* if RTL */
.rtl .ui-quick-nav.historyCollapsed {
  left: -350px;
  right: auto;
  transition: left 0.35s ease-in-out;
}
.rtl .ui-quick-nav.historyExpanded {
  left: 0;
  right: auto;
  transition: left 0.35s ease-in-out;
}
.rtl .ui-quick-nav .toggle-container {
  right: -62px;
  left: auto;
  border-radius: 0 20px 20px 0;
  border-right: 1px solid #ccc;
  margin-left: -2px;
}
/* Customize the label (the container) */
.ui-radio-button {
  display: block;
  position: relative;
  padding-left: 35px;
  padding-right: 0;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
}
.ui-radio-button input {
  position: absolute;
  opacity: 0;
  /* When the radio button is checked, add a blue background */
}
.ui-radio-button input:checked ~ .radiobtn {
  background-color: #b1cbe2;
  /* Show the indicator (dot/circle) when checked */
}
.ui-radio-button input:checked ~ .radiobtn:after {
  display: block;
}
.ui-radio-button .radiobtn {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  height: 22px;
  width: 22px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 50%;
  /* Style the indicator (dot/circle) */
  /* Create the indicator (the dot/circle - hidden when not checked) */
}
.ui-radio-button .radiobtn:after {
  content: "";
  position: absolute;
  display: none;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #337ab7;
}
.ui-radio-button:hover {
  /* On mouse-over, add a grey background color */
}
.ui-radio-button:hover input ~ .radiobtn {
  background-color: #ccc;
}
/************************************************************

    UI GROUPED RADIO
**********************************************************/
.ui-grouped-radio-button input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}
.ui-grouped-radio-button label {
  float: left;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  line-height: 1.7em;
  margin-bottom: 0;
  width: 70px;
  border: none;
  border-right: 1px solid #999;
  color: #999;
  background: #e9ebec;
}
.ui-grouped-radio-button label:last-child {
  border: none;
}
.ui-grouped-radio-button label:hover {
  background-color: #ccc;
}
.ui-grouped-radio-button .radio-group-button-width {
  width: 135px;
}
.ui-grouped-radio-button label-report {
  float: left;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  line-height: 1.7em;
  margin-bottom: 0;
  width: 130px;
  border: none;
  border-right: 1px solid #999;
  color: #999;
  background: #e9ebec;
}
.ui-grouped-radio-button label-report:last-child {
  border: none;
}
.ui-grouped-radio-button label-report:hover {
  background-color: #ccc;
}
.ui-grouped-radio-button input[type=radio]:checked + label {
  color: #fff;
  background: #326e90;
  cursor: default;
}
.ui-grouped-radio-button.radio-grp {
  /*border: solid #999 1px;*/
  display: inline-block;
  border-radius: 2px;
  vertical-align: middle;
  overflow: hidden;
}
.rtl .ui-grouped-radio-button label {
  float: right;
  border: none;
  /*border-left: 1px solid #999;*/
}
.rtl .radiobtn {
  right: 0;
  left: auto;
}
.rtl .ui-radio-button {
  padding-right: 35px;
  padding-left: 0;
}
/************************
        UI-tab-view-container   
************************/
.ui-tab-view-container {
  text-align: center;
}
.ui-tab-view-container ul {
  /*display: inline-block;*/
}
.ui-tab-view-container .tab-pane {
  text-align: left;
}
.ui-tab-view-container.search-results {
  text-align: left;
}
.ui-tab-view-container-meterological {
  text-align: center;
}
.ui-tab-view-container-meterological ul {
  display: inline-block;
}
.ui-tab-view-container-meterological .tab-pane {
  text-align: left;
}
.ui-tab-view-container-meterological.search-results {
  text-align: left;
}
.rtl .ui-tab-view-container.search-results {
  text-align: right;
}
.rtl .ui-tab-view-container .tab-pane {
  text-align: right;
}
.rtl .ui-tab-view-container-meterological.search-results {
  text-align: right;
}
.rtl .ui-tab-view-container-meterological .tab-pane {
  text-align: right;
}
/************************
        UI-switch   
************************/
.ui-switch {
  display: inline-block;
  margin: 0;
}
.ui-switch.md-checked .md-thumb {
  background-color: #68add5;
}
.ui-switch.md-checked .md-bar {
  background-color: rgba(104, 173, 213, 0.5);
}
.ui-switch.md-checked .md-ink-ripple {
  color: #68add5;
}
/* if RTL */
/************************
        UI-table   
************************/
.ui-table .cell-width-md {
  width: 75px;
}
.ui-table .cell-content-centered {
  text-align: center;
}
.ui-table .table-container {
  border: 1px #d7d7d7 solid;
  border-radius: 2px;
}
.ui-table .cell-header {
  padding: 5px 2px;
  border: 1px solid silver;
}
.ui-table .icon-pipe-papillion {
  color: #efa042;
}
.ui-table .flow-note {
  font-size: 11px;
  font-weight: bold;
  color: #d9534f;
}
.ui-table .flow-table-lstFlows input {
  width: 55px;
  color: #333333;
  text-align: center;
  border: 1px solid #a1a1a1;
  border-radius: 2px;
}
.ui-table.flow-table tbody tr:hover {
  background-color: #e0e3e5;
}
.ui-table.flow-table {
  width: 100%;
  margin: 0;
  max-width: none;
  border-spacing: 0;
  border-width: 0;
  outline: 0;
}
.ui-table.flow-table td {
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc;
  -webkit-overflow-scrolling: touch;
}
.ui-table.flow-table.graphic-table td {
  padding: 0;
  border: none;
  vertical-align: top;
}
.ui-table.flow-table.graphic-table tr:hover {
  background: none;
}
.ui-table.header-table tr:hover {
  background: none !important;
}
.ui-table.header-table td {
  color: #333333;
  font-weight: bold;
  line-height: 20px;
  border: none !important;
  text-align: center;
}
.ui-table.header-table td:nth-child(1) {
  text-align: left !important;
}
.ui-table.header-table span.warning-text {
  color: #d24949;
  font-size: 80%;
  font-weight: bold;
}
.ui-table.header-table div {
  padding: 5px 2px;
  border: 1px solid silver;
}
/************************
        UI-table-planning   
************************/
.ui-table-planing {
  width: 100%;
  margin: 0;
  max-width: none;
  border-spacing: 0;
  empty-cells: show;
  border-width: 0;
  outline: 0;
  border-color: #ccc;
  /*td:nth-child(5),
    td:nth-child(3) {
        width: 100px;
    }*/
}
.ui-table-planing td:nth-child(1),
.ui-table-planing td:nth-child(6),
.ui-table-planing td:nth-child(7),
.ui-table-planing td:nth-child(8),
.ui-table-planing td:nth-child(9),
.ui-table-planing td:nth-child(10),
.ui-table-planing td:nth-child(11),
.ui-table-planing td:nth-child(12),
.ui-table-planing td:nth-child(13) {
  text-align: center;
}
.ui-table-planing .cell-width-50px {
  width: 50px;
}
.ui-table-planing .cell-width-89px {
  width: 89px;
}
.ui-table-planing .cell-width-110px {
  width: 110px;
  min-width: 110px;
}
.ui-table-planing .cell-width-140px {
  width: 140px;
  min-width: 140px;
}
.ui-table-planing .hover-in-td {
  cursor: pointer;
}
.ui-table-planing .activeDay {
  background: #68add5 !important;
  color: white !important;
}
.ui-table-planing td:nth-child(14) {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.ui-table-planing td {
  padding: 5px;
  vertical-align: middle;
  text-overflow: ellipsis;
  /*border: 1px solid #ddd;*/
  -webkit-overflow-scrolling: touch;
}
.ui-table-planing tr:nth-child(1) td:nth-child(7) {
  padding: 0;
}
.ui-table-planing tr:nth-child(1) td:nth-child(7) td {
  padding: 0;
}
.ui-table-planing .program-name-cell {
  min-width: 180px;
}
.ui-table-planing .input-group-addon {
  padding: 6px;
  background: none;
  border: none;
}
.ui-table-planing tr.invalid td {
  background: #ffbdc9;
}
.ui-table-planing th {
  padding: 4px;
}
.ui-table-planing tbody:nth-child(odd) .content-row {
  background: #f0f0f1;
}
.ui-table-planing tbody:nth-child(even) .content-row {
  background: #fff;
}
.ui-table-planing .edit-valve {
  display: none;
}
.ui-table-planing .open-edit-window md-checkbox .md-icon {
  background: #fff;
  background-color: #fff;
  width: 25px;
  height: 25px;
  border-color: #999;
}
.ui-table-planing .open-edit-window md-checkbox.md-checked .md-icon {
  background-color: #fff;
  color: #68add5;
}
.ui-table-planing .open-edit-window md-checkbox.md-checked .md-icon:after {
  border-color: #68add5;
  border-width: 4px;
  left: 6.66667px;
  width: 9.66667px;
  height: 18.33333px;
}
.ui-table-planing .open-edit-window md-checkbox .md-ink-ripple {
  color: #68add5;
}
.ui-table-planing .open-edit-window .edit-valve {
  display: inline-block;
}
.ui-table-planing .open-edit-window .ap-select {
  border: 1px #999 solid;
}
.ui-table-planing .open-edit-window input[type=time],
.ui-table-planing .open-edit-window input[type=text],
.ui-table-planing .open-edit-window input[type=number] {
  border-radius: 2px;
  border: 1px #999 solid;
  background: #fff;
  color: #333333;
}
.ui-table-planing .edit-row {
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  opacity: 0;
  height: 0;
  background: #edf4f7;
  padding: 0;
  margin: 0;
}
.ui-table-planing .edit-row .close-edit-window {
  border-radius: 5px;
  border: none;
  background: #333333;
  color: #fff;
}
.ui-table-planing .in-edit-mode {
  color: red;
}
.ui-table-planing .edit-row:hover {
  background: #9ac6e5 !important;
}
.ui-table-planing .edit-row td {
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  padding: 0;
  position: relative;
}
.ui-table-planing .edit-row td div {
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  height: 0px;
}
.ui-table-planing .edit-row.open-edit-window {
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  height: 100px;
  opacity: 1;
}
.ui-table-planing .expand-steps-button {
  display: none;
}
.ui-table-planing .open-edit-window .edit-valve {
  font-size: 16px;
  display: inline-block;
  position: absolute;
  top: 2px;
  right: 3px;
  color: #68add5;
  cursor: pointer;
}
.ui-table-planing .open-edit-window .edit-valve:hover {
  color: #7ec3eb;
}
.ui-table-planing .open-edit-window .expand-steps-button {
  display: inline-block;
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px #999 solid;
  border-radius: 2px;
  background: #fff;
}
.ui-table-planing .open-edit-window .expand-steps-button i.fa-plus-circle {
  display: inline-block;
  color: #68add5;
  font-size: 24px;
  position: absolute;
  top: 7px;
  left: 10px;
}
.ui-table-planing .open-edit-window .expand-steps-button i.fa-plus-circle:hover {
  color: #7ec3eb;
}
.ui-table-planing .edit-row.open-edit-window td {
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  padding: 10px;
}
.ui-table-planing .edit-row.open-edit-window td > div {
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  height: 100px;
}
.ui-table-planing .content-row.open-edit-window {
  background: #edf4f7 !important;
}
.ui-table-planing tbody tr:hover {
  background-color: #e0e3e5 !important;
}
.ui-table-planing thead:nth-child(1) {
  background: #f8f9fb;
  color: #555;
  font-weight: bold;
  text-align: center;
}
.ui-table-planing thead:first-child th {
  text-align: center;
}
.ui-table-planing thead tr:nth-child(2) th {
  color: #333333;
  text-align: left;
  background-color: #d7d7d7;
}
.ui-table-planing .expand-step-cell {
  background: #7db0dc;
  padding: 0;
}
.ui-table-planing tbody input[type="time"] {
  line-height: 17px;
}
.rtl .ui-table-planing thead tr:nth-child(2) th {
  text-align: right;
}
.rtl .ui-table-planing thead:nth-child(2) th:nth-child(6),
.rtl .ui-table-planing thead:nth-child(2) th:nth-child(7),
.rtl .ui-table-planing thead:nth-child(2) th:nth-child(8),
.rtl .ui-table-planing thead:nth-child(2) th:nth-child(9),
.rtl .ui-table-planing thead:nth-child(2) th:nth-child(10),
.rtl .ui-table-planing thead:nth-child(2) th:nth-child(11),
.rtl .ui-table-planing thead:nth-child(2) th:nth-child(12),
.rtl .ui-table-planing thead:nth-child(2) th:nth-child(13) {
  text-align: center;
}
.rtl .ui-table-planing .open-edit-window .edit-valve {
  right: unset;
  left: 3px;
}
/************************
        UI-irrigation-planing-mobile     
************************/
.ui-irrigation-planing-mobile {
  padding: 5px;
}
.ui-irrigation-planing-mobile .irrigation-plan {
  background: #fff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  padding: 5px;
}
.ui-irrigation-planing-mobile .irrigation-plan.program-active-mobile {
  box-shadow: 0 1px 2px 2px rgba(128, 185, 130, 0.7);
  background: rgba(128, 185, 130, 0.1);
}
.ui-irrigation-planing-mobile .irrigation-plan .plan-subject-container {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-top: 5px;
  margin-bottom: 5px 10px;
}
.ui-irrigation-planing-mobile .irrigation-plan .plan-subject-container i.fa-pencil-square {
  font-size: 17px;
  color: #68add5;
}
.ui-irrigation-planing-mobile .irrigation-plan .three-dots-btn {
  text-align: center;
  cursor: pointer;
}
.ui-irrigation-planing-mobile .irrigation-plan .three-dots-btn .dropdown-toggle {
  padding: 10px 15px 10px 10px;
  margin-right: 9px;
}
.ui-irrigation-planing-mobile .irrigation-plan .three-dots-btn.pull-right > .dropdown-menu {
  left: 0;
  right: auto;
}
.ui-irrigation-planing-mobile md-input-container {
  margin: 0;
}
.ui-irrigation-planing-mobile md-input-container .md-input {
  height: 26px;
}
.ui-irrigation-planing-mobile mdp-time-picker .md-button.md-icon-button {
  margin: 0;
}
.ui-irrigation-planing-mobile .md-button,
.ui-irrigation-planing-mobile md-icon-button {
  height: 34px;
  min-height: 34px;
}
.ui-irrigation-planing-mobile .edit-table {
  padding: 10px;
}
.ui-irrigation-planing-mobile .expand-steps-button {
  display: inline-block;
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px #999 solid;
  border-radius: 2px;
  background: #fff;
  margin-bottom: -25px;
  /*margin-top: 7px;*/
}
.ui-irrigation-planing-mobile .expand-steps-button i.fa-plus-circle {
  display: inline-block;
  color: #68add5;
  font-size: 24px;
  position: absolute;
  top: 7px;
  left: 10px;
}
.ui-irrigation-planing-mobile .expand-steps-button i.fa-plus-circle:hover {
  color: #7ec3eb;
}
.ui-irrigation-planing-mobile .irrigation-plan-header {
  line-height: 1.2em;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}
.ui-irrigation-planing-mobile .program-number {
  font-size: 1.2em;
  font-weight: bold;
}
.ui-irrigation-planing-mobile .program-name {
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.ui-irrigation-planing-mobile .day-container {
  width: 14.2%;
  text-align: center;
  font-weight: bold;
}
.ui-irrigation-planing-mobile .edit-background {
  background: #edf4f7;
}
@media only screen and (min-width: 320px) and (max-width: 499px) {
  .program-name {
    width: 203px;
  }
}
@media only screen and (min-width: 500px) and (max-width: 767px) {
  .program-name {
    width: 315px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 412px) {
  mdp-time-picker .md-button.md-icon-button {
    margin: 0;
    position: absolute;
    top: 3px;
    left: 16px;
  }
}
.edit-installment {
  visibility: collapse;
}
.notification-danger-alert {
  color: #d9534f;
}
.notification-danger-alert:hover {
  color: #d02520;
  font-weight: bold;
}
.notification-valid-alert {
  color: green;
}
.ui-notification-area {
  user-select: none;
  /*border-right: 1px solid #999;*/
  padding: 0px 10px;
  /*height: 66px;*/
  outline-color: transparent !important;
}
.ui-notification-area .notification-area-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.ui-notification-area .rounded-md {
  border-radius: 10px;
}
.ui-notification-area .rounded-sm {
  border-radius: 6px;
}
.ui-notification-area .rounded-lg {
  border-radius: 18px;
}
.ui-notification-area .inner-row-margin {
  margin: 4px -15px;
}
.ui-notification-area .highlight-item {
  background-color: #ecf1f5;
  padding: 2px 4px;
  border-radius: 6px;
}
.ui-notification-area .highlight-item:hover {
  background-color: #d9e0e6;
}
.ui-notification-area .repeater-wrapper {
  max-height: calc(100vh - 200px);
  overflow: auto;
  overflow-x: hidden;
  display: block;
  width: 100%;
  font-size: 14px;
}
.ui-notification-area .user-alert-side-panel {
  position: absolute;
  left: 0px;
  /*background-color: white;*/
  width: 380px;
  direction: ltr;
  box-shadow: 0 4px 5px 1px rgba(160, 160, 160, 0.5);
  cursor: pointer;
  z-index: 9;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid deepskyblue;
  background-color: #f3f3f3;
}
.ui-notification-area .alert-item {
  /*display: block;
        width: 100%;
        font-size: 14px;*/
}
.ui-notification-area .alerts-top-panel {
  margin: 4px 10px;
}
.ui-notification-area .no-alerts-panel {
  text-align: center;
  font-size: large;
  padding: 20px;
}
.ui-notification-area .font-x-small {
  font-size: x-small;
}
.ui-notification-area .badge-margin {
  margin: 0 6px;
}
.ui-notification-area .badge-padding {
  padding: 6px;
}
.ui-notification-area .badge-info {
  background-color: deepskyblue;
}
.ui-notification-area .badge-light {
  background-color: #f2f2f2;
  color: #666;
}
.ui-notification-area .badge-link:hover {
  background-color: aliceblue;
}
.ui-notification-area .close-button {
  margin-right: 20px;
}
.ui-notification-area .alert-top-wrapper {
  /*display: flex;*/
  width: 24px;
  padding: 4px;
  margin-top: 16px;
  display: block;
  outline-color: transparent !important;
}
.ui-notification-area .bell-item {
  /*display: flex;*/
  display: block;
  font-size: large;
}
.ui-notification-area .user-alert-badge {
  /*background-color: crimson;*/
  top: -26px;
  position: relative;
  font-size: 10px;
  z-index: 2;
  background-color: #F44336;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  left: -8px;
}
.ui-notification-area .user-notifications-pageframe-modal,
.ui-notification-area .user-alert-side-panel {
  cursor: pointer;
}
.ui-notification-area .user-notifications-pageframe-modal .user-notifications-table-wrapper,
.ui-notification-area .user-alert-side-panel .user-notifications-table-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*max-height: calc(~'100vh - 100px');
            overflow: auto;
            overflow-x: hidden;*/
  /*background-color:#eee;*/
}
.ui-notification-area .user-notifications-pageframe-modal .user-notifications-table-wrapper .date-span,
.ui-notification-area .user-alert-side-panel .user-notifications-table-wrapper .date-span {
  float: left;
  direction: ltr;
  color: gray;
  font-size: smaller;
}
.ui-notification-area .user-notifications-pageframe-modal .user-notifications-table-wrapper .user-alerts-box,
.ui-notification-area .user-alert-side-panel .user-notifications-table-wrapper .user-alerts-box {
  /*border-bottom: 1px solid silver;*/
  padding: 4px 8px;
  background-color: white;
  margin: 5px;
  border-radius: 6px;
}
.ui-notification-area .user-notifications-pageframe-modal .user-notifications-table-wrapper .user-alerts-box md-input-container,
.ui-notification-area .user-alert-side-panel .user-notifications-table-wrapper .user-alerts-box md-input-container {
  padding: 0px;
  margin: 0px;
}
.ui-notification-area .user-notifications-pageframe-modal .user-notifications-table-wrapper .user-alerts-box md-input-container md-checkbox,
.ui-notification-area .user-alert-side-panel .user-notifications-table-wrapper .user-alerts-box md-input-container md-checkbox {
  margin: 0px;
}
.ui-notification-area .user-notifications-pageframe-modal .user-notifications-table-wrapper .user-alerts-box md-input-container md-checkbox.md-checked .md-icon,
.ui-notification-area .user-alert-side-panel .user-notifications-table-wrapper .user-alerts-box md-input-container md-checkbox.md-checked .md-icon {
  background-color: #46aced;
}
.ui-notification-area .user-notifications-pageframe-modal .user-notifications-table-wrapper .user-alerts-box .alert-title,
.ui-notification-area .user-alert-side-panel .user-notifications-table-wrapper .user-alerts-box .alert-title {
  line-height: 1.4;
  /*font-weight: 600;*/
  font-size: 14px;
  direction: rtl;
}
/************************
        UI-table-controller-programing      
************************/
.ui-table-controller-programing {
  margin: 0;
  max-width: none;
  border-spacing: 0;
  empty-cells: show;
  border-width: 0;
  outline: 0;
  border-color: #ccc;
  /********************* valves-table ***************************/
  /********************* grouped-edit-table ***************************/
  /********************* flow-table ***************************/
  /********************* water-rations-table ***************************/
  /*input {
        background: #fff !important;
    }*/
}
.ui-table-controller-programing .cell-min-width-lg {
  min-width: 140px;
}
.ui-table-controller-programing .cell-width-lg {
  width: 140px;
}
.ui-table-controller-programing .cell-min-width-common {
  min-width: 105px;
}
.ui-table-controller-programing .cell-width-common {
  width: 105px;
}
.ui-table-controller-programing .cell-min-width-xl {
  min-width: 200px;
  width: 200px;
}
.ui-table-controller-programing .cell-min-width-sm {
  min-width: 55px;
}
.ui-table-controller-programing .cell-min-width-xs {
  min-width: 30px;
}
.ui-table-controller-programing .cell-width-xs {
  width: 30px;
}
.ui-table-controller-programing .cell-content-centered {
  text-align: center;
}
.ui-table-controller-programing.valves-table .cell-min-width-common {
  min-width: 150px;
}
.ui-table-controller-programing.valves-table .cell-min-width-xl {
  min-width: 200px;
  width: 200px;
}
.ui-table-controller-programing.valves-table .cell-min-width-sm {
  min-width: 70px;
}
.ui-table-controller-programing.valves-table thead,
.ui-table-controller-programing.valves-table tbody {
  display: block;
}
.ui-table-controller-programing.valves-table tbody {
  max-height: 35vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ui-table-controller-programing.valves-table .cell-valve-number {
  width: 70px;
  min-width: 70px;
}
.ui-table-controller-programing.valves-table thead:nth-child(1) th {
  color: #fff;
  background-color: #7a7a7a;
}
.ui-table-controller-programing.grouped-edit-table td {
  text-align: center;
  border: none;
  padding: 1px;
}
.ui-table-controller-programing.grouped-edit-table td span {
  color: #fff;
  background: #ccc;
  display: inline-block;
  height: 25px;
  width: 25px;
  float: right;
  font-weight: bold;
}
.ui-table-controller-programing.grouped-edit-table td button {
  height: 25px;
  line-height: 25px;
  float: left;
  width: 78px;
  border: none;
  text-align: center;
  background: #68add5;
  color: #fff;
}
.ui-table-controller-programing.grouped-edit-table td input.ui-input {
  width: 101px;
  margin: 1px;
  border-color: #68add5;
}
.ui-table-controller-programing.grouped-edit-table tbody tr.content-row.none-hover:hover {
  background: none;
  background-color: none;
}
.ui-table-controller-programing.grouped-edit-table td:nth-child(2) {
  width: 200px;
}
.ui-table-controller-programing.grouped-edit-table td:nth-child(1) {
  width: 55px;
}
.ui-table-controller-programing.grouped-edit-table td:nth-child(11) {
  width: 205px;
}
.ui-table-controller-programing.grouped-edit-table td:nth-child(10) {
  width: 135px;
}
.ui-table-controller-programing.grouped-edit-table td:nth-child(2) {
  width: 200px;
}
.ui-table-controller-programing.flow-table thead,
.ui-table-controller-programing.flow-table tbody {
  display: block;
}
.ui-table-controller-programing.flow-table tbody {
  max-height: 35vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ui-table-controller-programing.flow-table .cell-valve-number {
  width: 70px;
  height: 45px;
  text-align: center;
  position: relative;
}
.ui-table-controller-programing.flow-table td:nth-child(2) {
  width: 200px;
}
.ui-table-controller-programing.water-rations-table thead,
.ui-table-controller-programing.water-rations-table tbody {
  display: block;
}
.ui-table-controller-programing.water-rations-table tbody {
  max-height: 35vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ui-table-controller-programing.water-rations-table .cell-valve-number {
  width: 70px;
  min-width: 70px;
}
.ui-table-controller-programing .ui-grouped-radio-button label {
  width: 60px;
}
.ui-table-controller-programing input[type=number] {
  width: 94px;
}
.ui-table-controller-programing tr {
  line-height: 30px;
}
.ui-table-controller-programing th,
.ui-table-controller-programing td {
  padding: 5px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  line-height: 1.6em;
  vertical-align: middle;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}
.ui-table-controller-programing .open-edit-window .ap-select {
  color: #333333;
  border-radius: 2px;
  border: 1px #999 solid;
  background: #fff;
  height: 27px;
}
.ui-table-controller-programing .open-edit-window input[type=time],
.ui-table-controller-programing .open-edit-window input[type=text],
.ui-table-controller-programing .open-edit-window input[type=number] {
  max-width: 100px;
  border-radius: 2px;
  border: 1px #999 solid;
  background: #fff;
  color: #333333;
}
.ui-table-controller-programing tbody tr:hover {
  background-color: #eef1f3;
}
.ui-table-controller-programing thead:first-child th {
  text-align: center;
}
.ui-table-controller-programing thead tr:nth-child(2) th {
  color: #fff;
  background-color: #7a7a7a;
}
.ui-table-controller-programing tbody input[type="time"] {
  line-height: 17px;
}
.ui-table-controller-programing .edit-mode-cell {
  background: #edf4f7;
}
/**************** RTL **********************/
.rtl .ui-table-controller-programing .ui-input {
  float: none !important;
  margin: 0;
}
/************************
        UI-Search-button   
************************/
.ui-search-button div .icon-search {
  color: #fff;
  font-size: 26px;
}
.ui-search-button:hover {
  background: #fbb460;
}
/************************
        UI-expander   
************************/
.ui-expander {
  border: 1px solid #ccc;
  position: relative;
  height: 46px;
}
.ui-expander:focus {
  outline: none;
}
.ui-expander .expander-title-section {
  display: inline-block;
  padding: 10px;
  outline: none;
}
.ui-expander .expander-title-section .fa-chevron-down,
.ui-expander .expander-title-section .fa-chevron-up,
.ui-expander .expander-title-section .icon-edit,
.ui-expander .expander-title-section .expander-title {
  color: #326e90;
  margin-left: 5px;
}
.ui-expander .expander-title-section .edit-btn:focus {
  outline: 0;
}
.ui-expander .expander-title-section .icon-edit {
  float: left;
}
.ui-expander .expander-title-section .icon-edit:hover {
  color: #68add5;
}
.ui-expander .edit-mode tbody {
  background: #edf4f7;
}
.ui-expander .expander-title-addons-section {
  position: absolute;
  top: 0;
  right: 1px;
}
.ui-expander .expander-title-addons-section .expander-title-addons {
  border-left: 1px #ccc solid;
  width: 75px;
  text-align: center;
}
.ui-expander .expander-title-addons-section .expander-title-addons.valve div {
  position: relative;
  height: 45px;
  font-weight: bold;
}
.ui-expander .expander-title-addons-section .expander-title-addons.valve div span {
  display: block;
  padding-top: 5px;
}
.ui-expander .expander-title-addons-section .expander-title-addons.valve div .icon-pipe-papillion {
  position: absolute;
  bottom: 5px;
  left: 50%;
  margin-left: -11px;
}
.ui-expander .expander-title-addons-section .expander-title-addons.valve div .icon-pipe-papillion {
  color: orange;
}
.rtl .ui-expander .expander-title-addons-section {
  left: 1px;
  right: unset;
}
.rtl .ui-expander .expander-title-addons {
  border-left: none;
  border-right: 1px #ccc solid;
}
/***************************
        UI-main-valve   
***************************/
.main-valve-container {
  height: 100%;
  width: 100%;
  /*for IE*/
  width: 75px;
  position: relative;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph;
  /*IE*/
  filter: fliph;
  /*IE*/
}
.main-valve-container .main-valve-inner-container {
  margin-top: 30px;
}
.main-valve-container .flow-lebel {
  color: #980311;
  border-radius: 2px;
  border: 1px solid #000;
  position: absolute;
  top: 116px;
  font-weight: bold;
  font-size: 18px;
  right: 10px;
  padding: 0 5px;
  top: 80px;
  width: 55px;
  background: #1a72a2;
  color: white;
  height: 30px;
  z-index: 9;
}
.main-valve-container .puls-indicator {
  position: absolute;
  top: 114px;
  height: 12px;
  width: 12px;
  background: linear-gradient(#a70505, #c53535);
  border: 1px solid #6d1010;
  right: 0;
  padding: 0 5px;
}
.main-valve-container .compost-puls-indicator {
  position: absolute;
  top: 128px;
  height: 12px;
  width: 12px;
  background: #66BB6A;
  border: 1px solid #6d8a00;
  right: 0;
  padding: 0 5px;
}
.m-parts {
  position: absolute;
  height: 100%;
  min-height: 10px;
  left: 0;
  z-index: 2;
  width: 75px;
  margin: 0;
  padding: 0;
}
.m-pipe {
  position: absolute;
  height: 100%;
  left: 0;
  width: 75px;
  margin: 0;
  padding: 0;
}
.main-valve .m-handle {
  fill: url(#m-handle);
}
.main-valve .m-handle-open {
  fill: url(#m-handle-open);
  transform-origin: 50% 76%;
  transform: rotate(90deg);
}
.main-valve .cls-1 {
  fill: none;
}
.main-valve .m-vertical-pipe {
  fill: url(#m-vertical-pipe);
}
.main-valve .m-vertical-pipe-open {
  fill: url(#m-vertical-pipe-open);
}
.main-valve .m-bottom-pipe {
  fill: url(#m-bottom-pipe);
}
.main-valve .m-midle-top {
  fill: #326c7b;
}
.main-valve .m-widget {
  fill: #9cbcc3;
}
.main-valve .m-widget2 {
  fill: #717373;
}
.main-valve .m-widget3 {
  fill: #d5d6d5;
}
.main-valve .m-widget4 {
  fill: #474748;
}
.main-valve .m-widgete5 {
  fill: #fff;
}
.main-valve .m-widget6 {
  fill: #2f8942;
}
.main-valve .m-widget7 {
  fill: #686869;
}
.main-valve .m-nuts {
  fill: #0d1a22;
}
.main-valve .m-nuts1 {
  fill: #1a323f;
}
.main-valve .m-nuts2 {
  fill: #005380;
}
.main-valve .m-nuts3 {
  fill: #1a72a2;
}
.main-valve .m-nuts4 {
  fill: #409bcd;
}
.main-valve .m-turn {
  fill: url(#m-turn);
}
.main-valve .m-bottom-ring,
.main-valve .cls-26,
.main-valve .cls-27 {
  stroke: #575757;
  stroke-miterlimit: 10;
}
.main-valve .m-bottom-ring {
  fill: url(#m-bottom-ring);
}
.main-valve .m-bottom-ring2 {
  fill: #575757;
}
.main-valve .m-valve-pipe {
  fill: url(#m-valve-pipe);
}
.main-valve .m-valve-nuts {
  fill: #6e6648;
}
.main-valve .m-valve-nuts1 {
  fill: #ae9f61;
}
.main-valve .m-valve-nuts2 {
  fill: #cebc75;
}
.main-valve .m-valve-nuts3 {
  fill: #edd883;
}
.main-valve .m-handle-focal {
  fill: #6e6755;
}
.main-valve .m-vertical-ring,
.main-valve .cls-27 {
  stroke-width: 2px;
}
.main-valve .m-vertical-ring {
  fill: url(#m-vertical-ring);
}
.main-valve .m-top-ring {
  fill: url(#m-top-ring);
}
.rtl .main-valve-container {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  transform: none;
  -ms-filter: unset;
  /*IE*/
  filter: unset;
  /*IE*/
}
/* Arrows animation */
.m-arrow-animation {
  z-index: 1;
  opacity: 0.8;
  position: absolute;
  top: 187px;
  left: 33px;
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Safari */
  transform: rotate(180deg);
}
/***************************
        UI-single-valve   
***************************/
.valve-container {
  height: 100%;
  width: 100%;
  position: relative;
  /*for IE*/
  width: 75px;
  margin: 0;
  margin-top: 10px;
  padding: 0;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph;
  /*IE*/
  filter: fliph;
  /*IE*/
}
.water-left,
.compost-left,
.nominal-flow {
  position: absolute;
  left: 50%;
  margin-left: -33px;
  width: 55px;
  border: 1px solid darkred;
  font-size: 14px;
  z-index: 99;
  background: #fff;
  text-align: center;
  padding: 2px;
  border-radius: 2px;
  line-height: 15px;
}
.water-left .value,
.compost-left .value,
.nominal-flow .value {
  font-size: 16px;
}
.water-left {
  top: 25px;
  border: 1px solid #333333;
  background: #ffffff;
  color: #000;
}
.compost-left {
  top: 65px;
  border: 1px solid #333333;
  background: #66BB6A;
  color: #000;
}
.compost-warning {
  background: #d24949;
  color: #fff;
}
.nominal-flow {
  top: 145px;
  background: #d24949;
  color: #fff;
}
.valve-part {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 2;
  /*for IE*/
  width: 75px;
  margin: 0;
  padding: 0;
}
.valve-number {
  position: absolute;
  left: 50%;
  bottom: 0px;
  margin-left: -10px;
  font-weight: bold;
  font-size: 1.3em;
}
.no-control {
  color: darkred;
  text-align: center;
  font-size: 13px;
  line-height: 20px;
  font-weight: bold;
  padding: 0 2px;
}
.indicator-icons-container {
  height: 20px;
  width: 70px;
  margin-right: 5px;
}
.table-GView-inticator.icon-q {
  color: #68add5;
}
.table-GView-inticator.icon-q:before {
  margin: 0;
}
.table-GView-inticator.fa-user {
  color: #6baf3a;
}
.table-GView-inticator.fa-user:before {
  margin: 0;
}
.table-GView-inticator.icon-no-entrance {
  color: darkred;
}
.table-GView-inticator.icon-no-entrance:before {
  margin: 0;
}
.pipe-cover {
  position: absolute;
  height: 100%;
  width: 100%;
  /*for IE*/
  width: 75px;
  top: 34px;
}
.no-control-BG {
  background: #fff;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(rgba(246, 248, 249, 0.96), rgba(255, 255, 255, 0.75), rgba(247, 244, 244, 0.16));
  /* For Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(rgba(246, 248, 249, 0.96), rgba(255, 255, 255, 0.75), rgba(247, 244, 244, 0.16));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(246, 248, 249, 0.96), rgba(255, 255, 255, 0.75), rgba(247, 244, 244, 0.16));
  /* Standard syntax */
  height: 27px;
  width: 64px;
}
.bottom-T-pipe-cover {
  fill: url(#linear-gradient-2-cover);
}
#single-valve .horizontal-pipe {
  fill: url(#linear-gradient);
}
#single-valve .horizontal-pipe-open {
  fill: url(#horizontal-pipe-open);
}
#single-valve .bottom-T-pipe {
  fill: url(#linear-gradient-2);
}
#single-valve .bottom-T-pipe-cover-open {
  fill: url(#bottom-T-pipe-cover-open);
}
#single-valve .pipe-ring-part-1 {
  fill: #97999a;
}
#single-valve .pipe-ring {
  fill: #5a6267;
}
#single-valve .pipe-ring-part-4,
#single-valve .pipe-ring-part-3,
#single-valve .pipe-ring-part-2 {
  stroke: #575757;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}
#single-valve .pipe-ring-part-2 {
  fill: url(#linear-gradient-3);
}
#single-valve .vertical-pipe {
  fill: url(#linear-gradient-4);
}
#single-valve .vertical-pipe-open {
  fill: url(#linear-gradient-4-2);
}
#single-valve .valve-pipe {
  fill: url(#linear-gradient-5);
}
#single-valve .valve-pipe-warning {
  fill: url(#linear-gradient-5-2);
}
#single-valve .valve-pipe-disabled {
  fill: url(#linear-gradient-5-3);
}
#single-valve .nuts-group {
  fill: #6e6648;
}
#single-valve .nuts-1 {
  fill: #ae9f61;
}
#single-valve .nuts-2 {
  fill: #cebc75;
}
#single-valve .nuts-3 {
  fill: #edd883;
}
#single-valve .valve-circle {
  fill: #6e6755;
}
#single-valve .handle {
  fill: url(#linear-gradient-6);
}
#single-valve .handle-open {
  fill: url(#handle-open);
  transform-origin: 45% 45%;
  transform: rotate(90deg);
}
#single-valve .handle-disabled {
  fill: url(#linear-gradient-6-3);
}
#single-valve .pipe-ring-part-4 {
  fill: url(#linear-gradient-7);
}
#single-valve .pipe-ring-part-3 {
  fill: url(#linear-gradient-8);
}
.rtl .valve-container {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  transform: none;
  -ms-filter: unset;
  /*IE*/
  filter: unset;
  /*IE*/
}
/***************************
        UI-filter   
***************************/
.filter-container {
  height: 100%;
  width: 100%;
  position: relative;
  /*for IE*/
  width: 75px;
  margin: 0;
  margin-top: 22px;
  padding: 0;
}
.cls-1 {
  fill: none;
}
.f-horizontal-pipe {
  fill: url(#f-horizontal-pipe);
}
.f-top-point {
  fill: url(#f-top-point);
}
.f-horizontal-ring {
  fill: #575757;
}
.f-ring-vertical-line {
  fill: #333333;
}
.f-filter-top {
  fill: url(#f-filter-top);
}
.f-filter-bottom {
  fill: url(#f-filter-bottom);
}
.f-vertical-pipe {
  fill: url(#f-vertical-pipe);
}
.f-handle1 {
  fill: url(#f-handle1);
}
.f-nuts {
  fill: #6e6648;
}
.f-nuts1 {
  fill: #ae9f61;
}
.f-nuts2 {
  fill: #cebc75;
}
.f-nuts3 {
  fill: #edd883;
}
.f-handle-focal {
  fill: #6e6755;
}
.f-handle2 {
  fill: url(#f-handle2);
}
.f-handle2-open {
  fill: url(#handle-open);
  transform-origin: 51% 45%;
  transform: rotate(90deg);
}
.f-left-ring,
.f-right-ring {
  stroke: #575757;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}
.f-left-ring {
  fill: url(#f-left-ring);
}
.f-right-ring {
  fill: url(#f-right-ring);
}
/***************************
        UI-compost   
***************************/
.compost-container {
  margin-top: -15px;
  position: relative;
}
.compost-container .top-rings {
  position: absolute;
  width: 75px;
  z-index: 999;
}
.cls-1 {
  fill: none;
}
.c-horizontal-pipe {
  fill: url(#c-horizontal-pipe);
}
.c-horizontal-pipe-open {
  fill: url(#c-horizontal-pipe-open);
}
.c-vertical-ring,
.c-left-vertical-ring {
  stroke: #575757;
}
.c-vertical-ring,
.c-left-vertical-ring,
.cls-7 {
  stroke-miterlimit: 10;
  stroke-width: 2px;
}
.c-vertical-ring {
  fill: url(#c-vertical-ring);
}
.c-left-vertical-ring {
  fill: url(#c-left-vertical-ring);
}
.c-top-point {
  fill: url(#c-top-point);
}
.c-bottom-vertical-lines {
  fill: #5c5c5c;
}
.c-bottom-cup2 {
  stroke: #5c5c5c;
  fill: url(#c-bottom-cup2);
}
.c-nipel {
  fill: url(#c-nipel);
}
.c-bottom-cup {
  fill: url(#c-bottom-cup);
}
.c-nipel2 {
  fill: url(#c-nipel2);
}
.c-nipel-nuts {
  fill: #6e6648;
}
.c-nipel-nuts2 {
  fill: #ae9f61;
}
.c-nipel-nuts3 {
  fill: #cebc75;
}
.c-nipel-nuts4 {
  fill: #edd883;
}
.c-handle-focal {
  fill: #6e6755;
}
.c-handle {
  fill: url(#c-handle);
}
.c-handle-open {
  fill: url(#c-handle-open);
  transform-origin: 50% 39%;
  transform: rotate(90deg);
}
.compost-container-left {
  top: 130px;
  border-radius: 2px;
  border: 1px solid #000;
  position: absolute;
  font-weight: bold;
  font-size: 18px;
  right: 10px;
  padding: 0 5px;
  width: 55px;
  background: #66BB6A;
  height: 30px;
  z-index: 9;
}
.c-top-box {
  fill: url(#c-top-box);
}
.c-top-cup {
  fill: url(#c-top-cup);
}
.c-top-cup-line {
  fill: #575757;
}
#compost .valve-pipe-warning {
  fill: url(#linear-gradient-5-2);
}
/*************************************
        UI-expander-content-container   
*************************************/
.ui-expander-content-container .expander-section-container {
  padding: 10px 20px;
}
.ui-expander-content-container .edit-mode tbody {
  background: #edf4f7;
}
.ui-expander-content-container .edit-mode tbody tr:hover {
  background: none;
}
/************************
        UI-modal   
************************/
.ui-modal .modal-dialog {
  top: 102px;
  margin-bottom: 0;
  margin-top: 0;
}
.ui-modal .modal-dialog .modal-content {
  border: 3px solid #337ab7;
  border-radius: 6px;
  padding: 15px;
  max-height: 90vh;
  max-width: 95vw;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.ui-modal .modal-dialog .modal-content .al-mandatory {
  color: #A94442;
  margin-top: 4px;
  font-size: 10px;
}
.ui-modal .modal-dialog .modal-content .modal-inner-content {
  margin-top: 10px;
  max-height: 65vh;
  padding: 5px;
}
.ui-modal .modal-dialog.ap-large {
  width: 80%;
}
.ui-modal .modal .close {
  float: left;
}
.ui-modal .close.close-updates-state {
  float: right;
  color: #d24949;
  margin-left: 10px;
}
.ui-modal .modal-header {
  background: #fff;
  color: #6f6e6e;
  border-radius: 5px 5px 0 0;
  padding: 0px 10px 10px 10px;
}
.ui-modal .modal-footer {
  padding: 10px 10px 0 10px;
}
.ui-modal .font-bold {
  font-weight: bold;
}
.ui-modal .footer-close-btn {
  background: none;
  border: none;
  color: #999;
}
.ui-modal .footer-close-btn:focus {
  outline: none;
}
.ui-modal#controllers-actions-modal .modal-body {
  max-height: 600px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}
.ui-modal#controllers-actions-modal .filters-section {
  padding: 20px;
}
.ui-modal#controllers-actions-modal .filters-window select {
  font-size: 16px;
  width: 150px;
  height: 40px;
  border: 1px #ccc solid;
  border-radius: 2px;
  flex: 2;
}
.ui-modal#controllers-actions-modal .filters-window li {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.ui-modal#controllers-actions-modal .filters-window label {
  flex: 1;
}
.ui-modal#controllers-actions-modal .filters-window .sum-of-controllers {
  line-height: 40px;
}
.ui-modal#controllers-actions-modal#open-valve input[type="radio"] {
  margin-left: 5px;
}
.ui-modal#controllers-actions-modal#open-valve .modal-open-valve-button {
  text-align: center;
  margin: 30px 0 0 0;
}
.ui-modal#controllers-actions-modal#open-valve .modal-open-valve-button button {
  padding: 10px 50px;
  font-size: 16px;
}
.ui-modal#controllers-actions-modal#open-valve span {
  display: inline-block;
  margin: 0 5px;
}
.ui-modal#controllers-actions-modal#open-valve a {
  cursor: pointer;
}
.ui-modal#controllers-actions-modal#open-valve a:nth-child(2) {
  float: left;
}
.ui-modal#controllers-actions-modal#open-valve table {
  border: 1px solid #ccc;
  width: 100%;
  margin: 10px 0;
}
.ui-modal#controllers-actions-modal#open-valve table td {
  padding: 10px;
}
.ui-modal#controllers-actions-modal#open-valve table tr td:first-child {
  width: 30%;
}
.ui-modal#controllers-actions-modal#open-valve table tr:nth-child(2) {
  background: #edf4f7;
}
.ui-modal#controllers-actions-modal#open-valve table input[type="number"] {
  width: 50px;
  border-radius: 2px;
  border: 1px solid #ccc;
  padding: 2px;
}
.ui-modal#controllers-actions-modal h3 {
  display: inline-block;
  margin-right: 5px;
  color: #333333;
}
.ui-modal#controllers-actions-modal h5 {
  display: block;
  margin: 0 5px;
  padding: 3px;
  color: #fff;
  font-weight: bold;
}
.ui-modal .rtl .modal-footer,
.ui-modal .rtl .modal-header {
  text-align: right;
}
/************************
        UI-states   
************************/
.table-th-inticator {
  position: absolute;
  bottom: 10px;
  right: 5px;
}
.table-th-inticator.icon-no-entrance {
  color: #d9534f;
}
.table-th-inticator.icon-q {
  color: #68add5;
}
.table-th-inticator.fa-user {
  display: inline-block;
  color: #6baf3a;
  height: 16px;
  width: 16px;
}
/************************
        UI-edit-window-footer   
************************/
.ui-edit-window-footer {
  text-align: right;
  margin: 5px 0;
}
.ui-edit-window-footer .close-edit-window {
  background: none;
  border: none;
}
/* if RTL */
.rtl .ui-edit-window-footer {
  direction: rtl;
  text-align: left;
}
/************************
        UI-accented   
************************/
.ui-accented {
  clear: both;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
}
/************************
        UI-table-on-kendo   
************************/
.ui-table-on-kendo {
  border: 1px solid #ddd;
  margin-bottom: 5px;
}
.ui-table-on-kendo.grid-style-danger .k-grid-header th {
  background-color: #c35f5f;
  border: 1px solid #ddd;
  background-image: none;
  color: #fff;
}
.ui-table-on-kendo.grid-style-danger .k-grid-header .k-link {
  color: #fff;
}
.ui-table-on-kendo .k-grid-header th {
  background-color: #7a7a7a;
  padding: 5px;
  border: 1px solid #ddd;
  background-image: none;
  color: #fff;
}
.ui-table-on-kendo .k-grid-header .k-link {
  color: #fff;
}
.ui-table-on-kendo tr {
  background: none;
}
.ui-table-on-kendo tr:hover {
  background-color: #eef1f3;
  background-image: none;
}
.ui-table-on-kendo tr td {
  padding: 3px 5px;
  border: 1px solid #ddd;
}
.k-rtl .ui-table-on-kendo .k-grid-header {
  padding-left: 0 !important;
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .ui-table-on-kendo tr td {
    line-height: 45px;
  }
}
/************************
      UI-table-accumulators
************************/
/* to do : consider turn into generic table */
.ui-table-accumulators {
  margin: 0;
  width: 100%;
  border-spacing: 0;
  empty-cells: show;
  border-width: 0;
  outline: 0;
  border-color: #ccc;
}
.ui-table-accumulators tr {
  line-height: 30px;
}
.ui-table-accumulators th,
.ui-table-accumulators td {
  padding: 5px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  line-height: 1.6em;
  vertical-align: middle;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}
.ui-table-accumulators tr:hover {
  background-color: #eef1f3;
}
.ui-table-accumulators th {
  color: #fff;
  text-align: left;
  background-color: #7a7a7a;
}
/**************** RTL **********************/
.rtl .ui-table-accumulators th {
  text-align: right;
}
/************************
        UI-errors-window 
************************/
.ui-errors-window h4 {
  color: #68add5;
}
.ui-errors-window h4 span {
  margin: 5px;
}
.ui-errors-window .modal-body {
  max-height: 600px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ui-errors-window .badge {
  font-weight: bold;
  font-size: 14px;
}
.ui-errors-window .danger {
  color: #d24949;
}
.ui-errors-window table {
  width: 100%;
}
.ui-errors-window table tr:hover td {
  background: #e0e1e4;
}
.ui-errors-window table th {
  min-width: 55px;
  background: #d7d7d7;
  border: 1px solid #fff;
  padding: 5px;
}
.ui-errors-window table td {
  border: none;
  text-align: right;
  padding-top: 0;
  padding-bottom: 0;
}
.ui-errors-window table td:nth-child(1) {
  /*width: 55px;*/
  height: 45px;
  padding: 7px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  background: #fff;
  position: relative;
}
.ui-errors-window table td:nth-child(1) i {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  margin-left: -10px;
  color: orange;
}
.ui-errors-window table td:nth-child(3) i {
  margin: 5px;
}
.ui-errors-window table td:nth-child(4) {
  width: 70px;
  text-align: center;
}
/************************
        UI-col-xl   
************************/
.ui-col-xl-1,
.ui-col-xl-2,
.ui-col-xl-3,
.ui-col-xl-4,
.ui-col-xl-5,
.ui-col-xl-6,
.ui-col-xl-7,
.ui-col-xl-8,
.ui-col-xl-9,
.ui-col-xl-10,
.ui-col-xl-11,
.ui-col-xl-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
}
@media (min-width: 1350px) {
  .ui-col-xl-1 {
    width: 8.33333333%;
  }
  .ui-col-xl-2 {
    width: 16.66666667%;
  }
  .ui-col-xl-3 {
    width: 25%;
  }
  .ui-col-xl-4 {
    width: 33.33333333%;
  }
  .ui-col-xl-5 {
    width: 41.66666667%;
  }
  .ui-col-xl-6 {
    width: 50%;
  }
  .ui-col-xl-7 {
    width: 58.33333333%;
  }
  .ui-col-xl-8 {
    width: 66.66666667%;
  }
  .ui-col-xl-9 {
    width: 75%;
  }
  .ui-col-xl-10 {
    width: 83.33333333%;
  }
  .ui-col-xl-11 {
    width: 91.66666667%;
  }
  .ui-col-xl-12 {
    width: 100%;
  }
}
.rtl .ui-col-xl-1,
.rtl .ui-col-xl-2,
.rtl .ui-col-xl-3,
.rtl .ui-col-xl-4,
.rtl .ui-col-xl-5,
.rtl .ui-col-xl-6,
.rtl .ui-col-xl-7,
.rtl .ui-col-xl-8,
.rtl .ui-col-xl-9,
.rtl .ui-col-xl-10,
.rtl .ui-col-xl-11,
.rtl .ui-col-xl-12 {
  float: right;
}
/************************
        UI-scrollbar
************************/
.ui-scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
  border-radius: 4px;
}
.ui-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #F5F5F5;
  margin-left: 5px;
  margin-right: 5px;
}
.ui-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #68add5;
  background: -webkit-linear-gradient(#d2d4d8, #999999);
  /* For Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(#d2d4d8, #999999);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#d2d4d8, #999999);
  /* Standard syntax */
}
/********** Vertical Scrollbar**********/
.ui-V-scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
  border-radius: 4px;
}
.ui-V-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #F5F5F5;
  margin-left: 5px;
  margin-right: 5px;
}
.ui-V-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #68add5;
  background: -webkit-linear-gradient(to right, #d2d4d8, #999999);
  /* For Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(to right, #d2d4d8, #999999);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #d2d4d8, #999999);
  /* Standard syntax */
}
/************************
        UI-apdate-status   
************************/
.ui-update-status .modal-dialog {
  width: 750px;
  top: 102px;
  margin-bottom: 0;
  margin-top: 0;
}
.ui-update-status .modal-body {
  max-height: 500px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ui-update-status .cell-min-width-xl {
  min-width: 200px;
  width: 200px;
}
.ui-update-status .cell-min-width-sm {
  min-width: 85px;
}
.ui-update-status .cell-min-width-xxl {
  min-width: 250px;
}
.ui-update-status .zebra-row:nth-child(odd) {
  background: #ecfbf1;
}
.ui-update-status .zebra-row:nth-child(even) {
  background: #fbf6ec;
}
.ui-update-status .fa-check {
  color: #1da742;
}
.ui-update-status .fa-minus {
  color: #b37b09;
}
.ui-update-status .fa-times {
  color: #d24949;
}
.ui-update-status .fa-chevron-left,
.ui-update-status .fa-chevron-down {
  color: #555;
}
.ui-update-status .table-sub-head {
  background: #d4d9dc;
  line-height: 1.5em;
  border-top: 2px solid #fff;
}
.ui-update-status i {
  outline: none;
}
/***************************
        UI-selected-quick-nav-window   
***************************/
.ui-selected-quick-nav-window {
  position: absolute;
  width: 100%;
  right: 300px;
  top: 67px;
  background: #333333;
}
/*@import "ui-components/bootstrap-override";*/
/****************
    editProgramStep
*****************/
.edit-step-container {
  position: absolute;
  width: 550px;
  z-index: 1001;
  border-radius: 5px;
  border: 1px #999 solid;
  background: #fff;
  color: #333333;
  text-align: left;
  padding: 10px;
  top: 0;
  left: 0;
}
.edit-step-container th {
  min-width: 55px;
  background: #d7d7d7;
  border: 1px solid #fff;
  padding: 5px;
}
.edit-step-container .dialog-carret {
  position: absolute;
  height: 18px;
  width: 18px;
  top: -10px;
  left: 5px;
  background: #fff;
  border: 1px solid #999;
  border-right: 0;
  border-bottom: 0;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari */
  transform: rotate(45deg);
  /* Standard syntax */
}
.edit-step-container .bottom-section {
  margin-top: 50px;
}
.edit-step-container .attachedvalved-container,
.edit-step-container .un-attachedvalved-container {
  max-height: 250px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.edit-step-container .un-attachedvalved-container {
  background: #f2f3f7;
  margin-top: 20px;
}
.edit-step-container .un-attachedvalved,
.edit-step-container .attachedvalved {
  width: 100%;
}
.edit-step-container tr:hover {
  background: #e0e1e4 !important;
}
.edit-step-container th {
  min-width: 65px;
  background: #d7d7d7;
  border: 1px solid #fff;
}
.edit-step-container td {
  border: none;
  text-align: left;
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}
.edit-step-container td.cell-valve-number {
  text-align: center;
}
.edit-step-container td.cell-valve-number .icon-pipe-papillion {
  margin-left: -13px;
}
.edit-step-container .attachedvalved tr:hover {
  background: #f2f3f5 !important;
}
.edit-step-container .close-edit-step {
  display: inline-block;
  position: relative;
  float: left;
  height: 20px;
  width: 20px;
}
.edit-step-container .close-edit-step i {
  color: #999;
  position: relative;
  padding: 5px;
}
.edit-step-container td.add-remove-cell {
  width: 100px;
  text-align: center;
}
.edit-step-container th.portion {
  width: 130px;
}
.edit-step-container .input-group-addon {
  padding: 5px;
}
.edit-step-container .remove-valve {
  position: relative;
  width: 70px;
  color: #333333;
  background: #fff;
  border: 1px solid #999;
  border-radius: 2px;
}
.edit-step-container .remove-valve:hover {
  background: #f2f4f7;
}
.edit-step-container .remove-valve i.fa-trash {
  display: inline-block;
  margin-right: 5px;
  color: #d24949;
}
.edit-step-container .add-valve {
  position: relative;
  width: 70px;
  color: #333333;
  background: #fff;
  border: 1px solid #999;
  border-radius: 2px;
}
.edit-step-container .add-valve:hover {
  background: #f2f4f7;
}
.edit-step-container .add-valve i.fa-plus-circle {
  display: inline-block;
  margin-right: 5px;
  color: #4f91c1;
}
.edit-step-container .edit-step-footer {
  position: relative;
  text-align: right;
}
.edit-step-container .edit-step-footer .close-edit-step-window {
  background: none;
  border: none;
}
.rtl .edit-step-container {
  text-align: right;
}
.rtl .edit-step-container .un-attachedvalved td,
.rtl .edit-step-container .attachedvalved td {
  text-align: right;
}
.rtl .edit-step-container .un-attachedvalved .cell-valve-number .icon-pipe-papillion,
.rtl .edit-step-container .attachedvalved .cell-valve-number .icon-pipe-papillion {
  margin-left: -9px;
}
.rtl .edit-step-container .add-valve i.fa-plus-circle {
  margin-right: unset;
  margin-left: 5px;
}
.rtl .edit-step-container .remove-valve i.fa-trash {
  margin-right: unset;
  margin-left: 5px;
}
.rtl .edit-step-container td.cell-valve-number,
.rtl .edit-step-container td.add-remove-cell {
  text-align: center;
}
.rtl .edit-step-container .edit-step-footer {
  text-align: left;
}
/***************************
        UI-arrows-animation   
***************************/
.icon .fa-chevron-down {
  position: absolute;
  color: #fff;
  left: 50%;
  margin-left: -13px;
  font-weight: normal;
  font-size: 18px;
}
.arrow-animation {
  z-index: 1;
  opacity: 0.8;
}
.horizontal-animation {
  z-index: 1;
  opacity: 0.7;
  transform: rotate(270deg);
  top: 32px;
  left: -70px;
  position: absolute;
}
.horizontal-animation-compost {
  z-index: 1;
  opacity: 0.7;
  transform: rotate(270deg);
  top: 57px;
  left: -70px;
  position: absolute;
}
.animated-arrow-fast .animation-duration {
  animation: 0.9s infinite linear;
}
.animated-arrow-md .animation-duration {
  animation: 1.0s infinite linear;
}
.animated-arrow-slow .animation-duration {
  animation: 1.3s infinite linear;
}
.animated-arrow-1 {
  animation-name: arrow1 !important;
}
.animated-arrow-2 {
  animation-name: arrow2 !important;
}
.animated-arrow-3 {
  animation-name: arrow3 !important;
}
.animated-arrow-4 {
  animation-name: arrow4 !important;
}
.animated-arrow-5 {
  animation-name: arrow5 !important;
}
.animated-arrow-6 {
  animation-name: arrow6 !important;
}
@keyframes arrow1 {
  0% {
    opacity: 0;
    transform: translate(0, 0px);
  }
  50% {
    opacity: 1;
    transform: translate(0, 83px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 166px);
  }
}
@keyframes arrow2 {
  0% {
    opacity: 1;
    transform: translate(0, 41px);
  }
  50% {
    opacity: 1;
    transform: translate(0, 124px);
  }
  75% {
    opacity: 0.5;
    transform: translate(0, 166px);
  }
  76% {
    opacity: 0;
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 41px);
  }
}
@keyframes arrow3 {
  0% {
    opacity: 1;
    transform: translate(0, 83px);
  }
  50% {
    opacity: 0.5;
    transform: translate(0, 166px);
  }
  51% {
    opacity: 0;
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 83px);
  }
}
@keyframes arrow4 {
  0% {
    opacity: 0;
    transform: translate(0, 0px);
  }
  24% {
    opacity: 0;
    transform: translate(0, 0px);
  }
  25% {
    opacity: 0;
    transform: translate(0, 0px);
  }
  50% {
    opacity: 1;
    transform: translate(0, 41px);
  }
  51% {
    opacity: 0;
    transform: translate(0, 0px);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0px);
  }
}
@keyframes arrow5 {
  0% {
    opacity: 1;
    transform: translate(0, 124px);
  }
  24% {
    opacity: 1;
    transform: translate(0, 166px);
  }
  25% {
    opacity: 0;
    transform: translate(0, 0px);
  }
  50% {
    opacity: 0;
    transform: translate(0, 0px);
  }
  51% {
    opacity: 1;
    transform: translate(0, 41px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 124px);
  }
}
.ui-device-image .device-image {
  width: 80vw;
}
.k-grid-footer {
  padding-right: 0px !important;
  padding-left: 0px !important;
}
rtl .k-grid-footer {
  padding-left: 0px !important;
}
.k-grid-header {
  padding-right: 0px !important;
}
rtl .k-grid-header {
  padding-left: 0px !important;
}
.k-grid-header,
.k-grid-footer {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.k-grid-header.scroll-gap,
.k-grid-footer.scroll-gap {
  padding-left: 0px !important;
  padding-right: 17px !important;
}
.k-rtl .k-grid-header.scroll-gap,
.k-rtl .k-grid-footer.scroll-gap {
  padding-left: 17px !important;
  padding-right: 0px !important;
}
.k-grid td.numeric {
  direction: ltr;
}
.mobile-view .k-grid-header.scroll-gap,
.mobile-view .k-grid-footer.scroll-gap {
  padding-right: 0 !important;
}
.mobile-view .k-rtl .k-grid-header.scroll-gap,
.mobile-view .k-rtl .k-grid-footer.scroll-gap {
  padding-left: 0 !important;
}
/************************
        bootstrap and material override   
************************/
/*MD*/
md-input-container .md-input {
  padding: 4px;
  height: 34px;
}
/*BOOTSTRAP*/
.dropdown-menu {
  margin: 0;
}
.form-control {
  border-radius: 2px;
}
.btn {
  border-radius: 2px;
}
.rtl .pull-right {
  float: left !important;
}
.rtl .pull-left {
  float: right !important;
}
.rtl .fa-caret-right {
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Safari */
  transform: rotate(180deg);
}
.rtl .ap-direction-ltr {
  direction: ltr;
  text-align: left;
  /*@media (min-width: 768px) {
        }*/
}
.rtl .ap-direction-ltr th {
  text-align: left;
}
.rtl .ap-direction-ltr [class*='col-'] {
  float: left;
}
.rtl .ap-direction-ltr .close {
  float: right;
}
.rtl .ap-direction-ltr .nav-tabs > li {
  float: left;
}
.rtl .ap-direction-ltr .checkbox input[type="checkbox"] {
  position: static;
  margin-right: auto;
}
.rtl .highcharts-label.highcharts-tooltip span {
  direction: rtl;
  text-align: right;
}
.backdoor-templete .sub-group-grid {
  overflow-y: auto;
  height: 450px;
  overflow-x: hidden;
}
.backdoor-templete .data-column {
  text-align: center;
}
.backdoor-templete .modal-dialog {
  min-width: 85vw;
}
.backdoor-templete .modal-dialog .modal-body {
  max-height: 70vh;
  /*overflow-y: auto;*/
}
.backdoor-templete tr.selected td {
  background-color: #d7e0e8;
}
.backdoor-templete .register-props .checkbox {
  margin-left: 15px;
}
.backdoor-templete #grid_backdoor {
  max-height: 500px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.backdoor-templete .setbit {
  cursor: pointer;
}
.backdoor-templete .form-group {
  margin-bottom: 5px;
}
.backdoor-templete .btn-default {
  background-color: #ddd;
}
.backdoor-templete .btn-toggle {
  padding: 1px 8px;
  font-size: 12px;
}
.backdoor-templete .grid-header {
  background-color: #7a7a7a;
  color: white;
}
.backdoor-templete .rpt-table th {
  border: 2px solid #ddd;
  padding: 2px 8px !important;
  text-align: center;
}
.backdoor-templete .rpt-table tr td {
  border: 2px solid #ddd;
  padding: 1px 8px !important;
  text-align: center;
  cursor: pointer;
}
.backdoor-templete .grid-on-line-bit {
  background-color: #84a960;
  color: white;
}
.backdoor-templete .chbShowEventsCode {
  float: right;
  margin: 0px 0px -25px;
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .backdoor-templete .chbShowEventsCode {
    margin: 0;
  }
}
/* ==========================================================================
   Author's Modules styles
   ========================================================================== */
/************************
        UI-filters-window   
************************/
.ui-filters-window {
  z-index: 999;
}
.ui-filters-window .filters-section {
  background-color: #ececec;
  border-radius: 0px 0px 0px 5px;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 340px;
  float: right;
  color: #333333;
}
.ui-filters-window .dropdown-toggle,
.ui-filters-window input,
.ui-filters-window select {
  font-size: 16px;
  width: 190px;
  height: 40px;
  border: 1px #ccc solid;
  border-radius: 2px;
}
.ui-filters-window ul li {
  cursor: pointer;
}
.ui-filters-window .dropdown-menu {
  max-height: 380px;
}
.ui-filters-window .dropdown-toggle {
  position: relative;
  text-align: left;
  color: #555555;
  padding-right: 16px;
  padding-left: 16px;
}
.ui-filters-window .dropdown-toggle .caret {
  right: 6px;
  left: initial;
  position: absolute;
  top: 16px;
  border-top: 6px solid;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}
.ui-filters-window h3 {
  margin: 0;
  float: left;
}
.ui-filters-window label {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}
.ui-filters-window .close-filters-btn,
.ui-filters-window .clean-filters-btn {
  float: right;
  background: none;
  border: none;
}
.ui-filters-window .close-filters-btn:focus,
.ui-filters-window .clean-filters-btn:focus {
  outline: none;
}
.ui-filters-window .clean-filters-btn {
  color: #326e90;
}
.ui-filters-window .close-filters-btn {
  color: #999;
  padding: 5px 20px;
}
.ui-filters-window hr {
  margin: 0.5em 0 1em 0;
  border-color: #ccc;
}
.ui-filters-window #filters {
  display: inline-block;
  position: fixed;
  right: 0;
  z-index: 999;
  width: 410px;
  top: 155px;
}
.ui-filters-window #filters.expanded {
  transition-timing-function: ease-out;
  transition-duration: 0.3s;
  right: 20px;
}
.ui-filters-window #filters.collapsed {
  transition-timing-function: ease-out;
  transition-duration: 0.3s;
  right: -340px;
}
.ui-filters-window .collapsable {
  padding: 20px;
  width: 340px;
}
.ui-filters-window .panel-toggle {
  text-align: center;
  padding: 5px;
  color: #fff;
  font-size: 24px;
  outline: 0;
}
.ui-filters-window select {
  border-radius: 2px;
}
.ui-filters-window .panel-container {
  padding: 0;
  width: 410px;
}
.ui-filters-window .toggle-container {
  padding: 0;
  background-color: #68add5;
  border-radius: 20px 0px 0px 20px;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-right: -2px;
  z-index: 9;
  float: right;
}
.ui-filters-window .toggle-container.active {
  background-color: #efa042;
}
.ui-filters-window .toggle-container:hover {
  background-color: #3788b7;
}
.ui-filters-window .btn-filter-toggle {
  width: 117px;
}
.rtl .ui-filters-window .toggle-container {
  border-radius: 0px 20px 20px 0px;
  border-left: none;
  border-right: 1px solid #ccc;
  z-index: 9;
  margin-left: -2px;
  float: left;
}
.rtl .ui-filters-window .dropdown-toggle {
  text-align: right;
}
.rtl .ui-filters-window .dropdown-toggle .caret {
  left: 5px;
  right: initial;
}
.rtl .ui-filters-window .filters-section {
  float: left;
  border-left: 0;
  border-right: 1px solid #ccc;
  border-radius: 0px 0px 5px 0px;
}
.rtl .ui-filters-window .close-filters-btn,
.rtl .ui-filters-window .clean-filters-btn {
  float: left;
}
.rtl .ui-filters-window #filters {
  left: 0;
  right: initial;
}
.rtl .ui-filters-window #filters.expanded {
  left: 20px;
}
.rtl .ui-filters-window #filters.collapsed {
  left: -340px;
  height: 44px;
}
.rtl .ui-filters-window #filters.collapsed .panel-container {
  height: 44px;
}
.rtl .ui-filters-window h3 {
  float: right;
}
.k-grid-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ui-mobile-filters-window {
  z-index: 999;
  position: relative;
  margin-top: -65px;
}
.ui-mobile-filters-window input[type=search] {
  border-width: 0 0 1px 0;
  border-color: #333333;
  background: none;
  outline: none;
  width: 100%;
}
.ui-mobile-filters-window .row {
  margin-bottom: 10px;
}
.ui-mobile-filters-window li:nth-child(2) .row {
  margin-bottom: 0;
}
.ui-mobile-filters-window .filters-section {
  background-color: #f9f6f6;
  border: none;
  color: #333333;
}
.ui-mobile-filters-window input,
.ui-mobile-filters-window select {
  font-size: 16px;
  height: 40px;
  border: 1px #ccc solid;
  border-radius: 2px;
}
.ui-mobile-filters-window h3 {
  margin: 0;
  float: left;
}
.ui-mobile-filters-window label {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}
.ui-mobile-filters-window .close-filters-btn,
.ui-mobile-filters-window .clean-filters-btn {
  float: right;
  background: none;
  border: none;
}
.ui-mobile-filters-window .close-filters-btn:focus,
.ui-mobile-filters-window .clean-filters-btn:focus {
  outline: none;
}
.ui-mobile-filters-window .more-filters {
  outline: none;
}
.ui-mobile-filters-window .more-filters i {
  margin-right: 5px;
}
.ui-mobile-filters-window .more-filters,
.ui-mobile-filters-window .clean-filters-btn {
  color: #326e90;
}
.ui-mobile-filters-window .close-filters-btn {
  color: #999;
  padding: 5px 20px;
}
.ui-mobile-filters-window hr {
  margin: 0.5em 0 1em 0;
  border-color: #ccc;
}
.ui-mobile-filters-window #filters {
  display: inline-block;
  width: 100%;
  z-index: 999;
}
.ui-mobile-filters-window #filters.collapsed {
  height: 50px;
  overflow: hidden;
}
.ui-mobile-filters-window #filters.collapsed .filters-section {
  opacity: 0;
  visibility: hidden;
  margin-top: 0px;
  height: 50px;
  transition: all 0.2s ease-out;
}
.ui-mobile-filters-window #filters.expanded .filters-section {
  opacity: 1;
  visibility: visible;
  margin-top: 60px;
  height: auto;
  overflow: hidden;
  transition: all 0.2s ease-out;
}
.ui-mobile-filters-window .collapsable {
  padding: 5px;
}
.ui-mobile-filters-window .panel-toggle {
  text-align: left;
  color: #68add5;
  font-size: 24px;
  width: 40px;
  outline: 0;
  border: 2px solid #eee;
  text-align: center;
  border-radius: 2px;
}
.ui-mobile-filters-window select {
  border-radius: 2px;
}
.ui-mobile-filters-window .panel-container {
  padding: 0;
}
.ui-mobile-filters-window .toggle-container {
  z-index: 9;
  position: absolute;
  top: 0;
}
.ui-mobile-filters-window .toggle-container.active .panel-toggle {
  color: #efa042;
}
.rtl .ui-mobile-filters-window .toggle-container {
  z-index: 9;
  left: 0;
}
.rtl .ui-mobile-filters-window .close-filters-btn,
.rtl .ui-mobile-filters-window .clean-filters-btn {
  float: left;
}
.rtl .ui-mobile-filters-window h3 {
  float: right;
}
/****************
    valveProgram
*****************/
.valve-program .valve-num {
  display: block;
  line-height: 20px;
  float: right;
  position: relative;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  height: 40px;
  width: 40px;
  color: #333333;
}
.valve-program .valve-minute {
  display: inline-block;
  color: #000;
  font-size: 9px;
  line-height: 0.8;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 100%;
  width: 50px;
}
.valve-program .ul-steps-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.valve-program .ul-steps-container > li {
  padding-left: 0;
  padding-right: 0;
}
.valve-program .valve-num-container {
  position: relative;
}
.valve-program .icon-pipe-papillion {
  position: absolute;
  top: 13px;
  right: 50%;
  margin-right: -13px;
  color: orange;
}
.valve-program .step-container {
  border-radius: 4px;
  border: 1px solid #999;
  margin: 0 10px;
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 0 10px;
  background: #fff;
  /*margin-top: 10px;
    margin-bottom: 10px;*/
}
.valve-program .step-container .fa-chevron-left,
.valve-program .step-container .fa-chevron-right,
.valve-program .step-container .fa-plus {
  color: #555;
}
.valve-program .step-container .plus-container {
  position: absolute;
  left: -8px;
}
.valve-program .step-container .plus-container i {
  position: absolute;
  top: 13px;
  left: 50%;
  margin-left: 2px;
}
.valve-program .valve-program-design {
  float: left;
}
.valve-program .caret-container {
  padding-top: 10px;
}
.valve-program .fa-plus {
  margin: 0 3px;
  font-size: 14px;
}
.valve-program i.fa-plus-circle {
  top: 7px;
  right: 10px;
}
.valve-program .fa-chevron-left {
  height: 20px;
  width: 10px;
  font-size: 14px;
  display: inline-block;
  display: none;
}
.rtl .valve-program .valve-num {
  float: left;
}
.rtl .valve-program .valve-minute {
  right: 50%;
  margin-right: -25px;
}
.rtl .valve-program .ul-steps-container > li {
  padding-right: 0;
  padding-left: 0;
}
.rtl .valve-program .icon-pipe-papillion {
  left: 50%;
  margin-left: -13px;
}
.rtl .valve-program .valve-program-design {
  float: right;
}
.rtl .valve-program i.fa-plus-circle {
  top: 7px;
  left: 10px;
}
.rtl .valve-program .plus-container {
  position: absolute;
  left: -8px;
}
.rtl .valve-program .plus-container i {
  position: absolute;
  top: 13px;
  left: 50%;
  margin-left: 0px;
  margin-right: 2px;
}
.rtl .fa-plus {
  float: right;
}
.rtl .plus-container {
  right: unset;
  left: -8px;
}
.rtl .plus-container i {
  right: unset;
  left: 50%;
}
.rtl .fa-chevron-right {
  font-size: 14px;
  line-height: 20px;
  display: inline-block;
  /*display: none;*/
}
.rtl .icon-pipe-papillion {
  margin-left: -9px;
}
.rtl .fa-chevron-left {
  display: inline-block;
}
/****************
    valveTooltip
*****************/
valve-tooltip .tooltip-container {
  position: absolute;
  z-index: 999;
  bottom: 30px;
  left: 5px;
  margin-left: -125px;
  border-radius: 5px;
  border: 1px #d5f586 solid;
  background: #222;
  color: #fff;
  text-align: left;
}
.rtl valve-tooltip .tooltip-container {
  right: 5px;
  margin-right: -116px;
  text-align: right;
}
valve-tooltip div > div:not(.row) {
  padding: 0 7px;
}
valve-tooltip span:not(.header-valve) {
  color: #d5f586;
  font-weight: bold;
}
valve-tooltip .col-xs-6 {
  padding-right: 5px;
  padding-left: 5px;
}
valve-tooltip header .valve span:nth-child(2) {
  font-size: 22px;
}
valve-tooltip header {
  border-bottom: 1px solid #d5f586;
  margin: 0 3px;
  padding: 5px;
  font-size: 18px;
}
valve-tooltip header .valve {
  float: left;
}
valve-tooltip header .valve-state {
  float: right;
}
.rtl valve-tooltip header .valve {
  float: right;
}
.rtl valve-tooltip header .valve-state {
  float: left;
}
valve-tooltip .row {
  margin: 0;
}
valve-tooltip .tooltip-container {
  width: 250px;
}
valve-tooltip .tooltip-caret-container {
  position: absolute;
  z-index: 1;
  bottom: -15px;
  font-size: 25px;
  left: 50%;
  color: #222;
  margin-left: -10px;
}
valve-tooltip .tooltip-container {
  transition: visibility 0.4s ease-out, opacity 0.4s ease-out;
  visibility: hidden;
  opacity: 0;
}
valve-tooltip .tooltip-container.show-tooltip {
  transition: visibility 0.4s ease-out, opacity 0.4s ease-out;
  visibility: visible;
  opacity: 1;
}
#irrController irrigation-controller-programing .container h3 {
  margin-top: 0;
  border-bottom: 1px solid #999;
  display: block;
  padding: 15px 0;
}
irrigation-controller-programing #modal-inner-wrapper {
  height: 380px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}
irrigation-controller-programing .nav-pills > li > a {
  border-radius: 4px 4px 0 0 ;
}
irrigation-controller-programing .tab-content {
  color: white;
  background-color: #f2f4f7;
  padding: 5px 15px;
}
irrigation-controller-programing .container {
  width: 100%;
}
.modal-body installation h4,
.modal-body installation h3 {
  color: #333333;
}
.installation-form-section {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  color: #333333;
  border: 1px solid #ccc;
}
.modal-body installation div input {
  border: 1px solid #999;
}
.modal-body installation label {
  font-weight: normal;
}
.modal-body installation p:last-child {
  margin: 0;
}
.modal-body installation div textarea,
.modal-body installation div input {
  background: #e1e3e2;
}
.modal-body installation md-radio-button.md-checked .md-off {
  border-color: #466583;
}
.modal-body installation md-radio-button .md-on {
  background-color: #466583;
}
.modal-body installation md-switch.md-checked .md-bar {
  background-color: #9ab0c7;
}
.modal-body installation md-switch.md-checked .md-ink-ripple {
  color: #9ab0c7;
}
.modal-body installation md-radio-button.md-checked .md-ink-ripple,
.modal-body installation md-radio-group .md-checked .md-ink-ripple {
  color: #9ab0c7;
}
.modal-body installation md-switch.md-checked .md-thumb {
  background-color: #466583;
}
.modal-body installation div input[type=number] {
  width: 50px;
}
.modal-body installation #warning-restart label {
  width: 75%;
}
.modal-body installation div hr {
  border-color: #93a1ad;
}
.rtl .modal-body installation div md-switch {
  margin: 0;
}
.rtl .modal-body installation div md-switch,
.rtl .modal-body installation div md-checkbox,
.rtl .modal-body installation div textarea,
.rtl .modal-body installation div input {
  float: left;
  margin-left: 0;
}
.modal-body installation div md-checkbox {
  margin: 0 5px;
  background: #fff;
  line-height: inherit;
}
.modal-body installation .nav-pills > li.active > a:focus,
.modal-body installation .nav-pills > li.active > a:hover,
.modal-body installation .nav-pills > li.active > a {
  background-color: #778fa9;
}
.modal-body flow-rate span,
.modal-body flow-rate p,
.modal-body flow-rate h4,
.modal-body flow-rate h3 {
  color: #333333;
}
.modal-body .bottom-container {
  display: flex;
}
.modal-body .bottom-container .right {
  flex: 1;
  margin-left: 5px;
}
.modal-body .bottom-container .left {
  margin-right: 5px;
  display: flex;
  flex-direction: column;
  flex: 4;
}
.modal-body .bottom-container .left-box {
  display: flex;
  flex-direction: row;
}
.modal-body .bottom-container .data-section {
  flex: 1;
}
.modal-body flow-rate .inner-container .update-btn {
  float: left;
}
.modal-body flow-rate .inner-container span {
  display: inline-block;
}
flow-rate .inner-container .ap-button {
  margin: 0;
  background: #999;
  color: #fff;
}
flow-rate .inner-container .ap-button:hover {
  color: #333333;
}
flow-rate .row {
  margin: 0;
}
flow-rate .data-section {
  padding: 5px;
  background: #fff;
  border-radius: 4px;
  margin: 4px;
}
.rtl #flow-rate-grid .k-filter-row > th:first-child,
.rtl #flow-rate-grid.k-grid tbody td:first-child,
.rtl #flow-rate-grid.k-grid tfoot td:first-child,
.rtl #flow-rate-grid .k-grid-header th.k-header:first-child {
  border-left-width: 1px;
}
#flow-rate-grid tr:nth-child(odd) {
  background: #f0f0f1;
}
#flow-rate-grid tr:nth-child(even) {
  background: #fff;
}
.rtl #flow-rate-grid .k-grid-header .k-header .k-link {
  text-align: right;
}
#flow-rate-grid .k-grid-header .k-header .k-link {
  color: #fff;
  text-align: left;
}
.rtl #flow-rate-grid div.k-grid-header {
  direction: rtl;
  padding-right: 0px !important;
  padding-left: 0px !important;
}
#flow-rate-grid div.k-grid-header {
  direction: ltr;
  padding-right: 0px;
  padding-left: 0px !important;
}
#flow-rate-grid thead tr:first-child .k-header:nth-child(1) {
  border-bottom: 5px solid #f58686;
}
#flow-rate-grid thead tr:first-child .k-header:nth-child(2) {
  border-bottom: 5px solid #699ed4;
}
#flow-rate-grid thead tr:first-child .k-header:nth-child(3) {
  border-bottom: 5px solid #bb4391;
}
#flow-rate-grid thead tr:first-child .k-header:nth-child(4) {
  border-bottom: 5px solid #6fa271;
}
#flow-rate-grid thead tr:first-child .k-header:nth-child(5) {
  border-bottom: 5px solid #b5ab4f;
}
#flow-rate-grid thead tr:first-child .k-header {
  background: #f4f4f7;
  color: #333333;
  font-weight: bold;
}
#flow-rate-grid .k-grid-header .k-header {
  background-color: #555;
  background-image: none;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.margin-left-small {
  margin-left: 5px;
}
.margin-left-medium {
  margin-left: 20px;
}
.margin-left-large {
  margin-left: 40px;
}
.margin-right-small {
  margin-right: 5px;
}
.margin-right-medium {
  margin-right: 20px;
}
.margin-right-large {
  margin-right: 40px;
}
.no-padding {
  padding: 0px;
}
.padding-sides-small {
  padding: 0px 3px;
}
.direction-leftToRight {
  direction: ltr;
}
.rtl .margin-left-small {
  margin-right: 5px;
  margin-left: 0;
}
.rtl .margin-left-medium {
  margin-right: 20px;
  margin-left: 0;
}
.rtl .margin-left-large {
  margin-right: 40px;
  margin-left: 0;
}
.rtl .margin-right-small {
  margin-left: 5px;
  margin-right: 0;
}
.rtl .margin-right-medium {
  margin-left: 20px;
  margin-right: 0;
}
.rtl .margin-right-large {
  margin-left: 40px;
  margin-right: 0;
}
/* ==========================================================================
   Fontell0
   ========================================================================== */
@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?41052935');
  src: url('../fonts/fontello.eot?41052935#iefix') format('embedded-opentype'), url('../fonts/fontello.woff2?41052935') format('woff2'), url('../fonts/fontello.woff?41052935') format('woff'), url('../fonts/fontello.ttf?41052935') format('truetype'), url('../fonts/fontello.svg?41052935#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?41052935#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-user-icon:before {
  content: '\e800';
}
.icon-upload-cloud:before {
  content: '\e801';
}
.icon-star:before {
  content: '\e802';
}
.center-text {
  text-align: center !important;
}
.icon-management:before {
  content: '\e803';
}
.icon-logout:before {
  content: '\e804';
}
.icon-3-dots:before {
  content: '\e805';
}
.icon-main-screen:before {
  content: '\e806';
}
.icon-no-entrance:before {
  content: '\e807';
}
.icon-home:before {
  content: '\e808';
}
.icon-clock:before {
  content: '\e809';
}
.icon-q:before {
  content: '\e80a';
}
.icon-search:before {
  content: '\e80b';
}
.icon-star-1:before {
  content: '\e80c';
}
.icon-map-pin:before {
  content: '\e80d';
}
.icon-user:before {
  content: '\f007';
}
.icon-error-triangle:before {
  content: '\e80f';
}
.icon-edit:before {
  content: '\e810';
}
.icon-pipe-papillion:before {
  content: '\e813';
}
.icon-checkmark:before {
  content: '\e814';
}
.icon-closing-x:before {
  content: '\e815';
}
.icon-plus_in_circle:before {
  content: '\e816';
}
.icon-sort:before {
  content: '\f0dc';
}
.icon-sort-down:before {
  content: '\f0dd';
}
.icon-sort-up:before {
  content: '\f0de';
}
.icon-angle-left:before {
  content: '\f104';
}
.icon-angle-right:before {
  content: '\f105';
}
.icon-angle-up:before {
  content: '\f106';
}
.icon-angle-down:before {
  content: '\f107';
}
.table-print-layout {
  margin: auto;
}
.print-header,
.print-header-space,
.print-footer,
.print-footer-space {
  display: none;
}
.show-on-print {
  display: none !important;
}
@media print {
  #hc-water-by-grow-types {
    break-inside: avoid;
  }
  .table-print-layout {
    margin: unset;
  }
  .print-header {
    width: 100%;
    position: fixed;
    top: 0;
  }
  .print-footer {
    width: 100%;
    position: fixed;
    bottom: 0;
  }
  .print-header,
  .print-header-space,
  .print-footer,
  .print-footer-space {
    display: block;
    height: 100px;
  }
  .main-wrapper {
    padding: 0 !important;
    min-height: unset!important;
  }
  .ui-container-panel {
    min-width: unset !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .report-content-wrapper {
    width: 100% !important;
  }
  @page {
    size: landscape;
    margin: 8mm 8mm 8mm 8mm;
    
    /* wide reports need landscape orientation to avoid content being cut off */
    /* this affects the margin in the printer settings */
  }
  .show-on-print {
    display: block !important;
  }
  .hide-on-print {
    display: none !important;
  }
  .print-page-break {
    page-break-after: always;
  }
}
/* ==========================================================================  
  General styles
   ========================================================================== */
/*.confirm-delete-row{
    background-color: aliceblue;
    border: 1px solid silver;
    position: fixed;
    display: block;
    margin-top: 200px;
    z-index: 9;
    margin-left: 500px;
    padding: 10px;
	
}*/
.cursor-pointer {
  cursor: pointer;
}
.al-info-window-container {
  position: relative;
}
.al-info-window-container .al-info-window-overlay {
  z-index: 9;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.al-info-window-container .al-info-window-content {
  position: absolute;
  z-index: 10;
  left: -3px;
  top: 32px;
  font-size: 14px;
  width: 425px;
  max-width: 80vw;
  box-shadow: 2px 2px 20px 2px #ddd;
}
.width-fit-content {
  width: fit-content !important;
}
.color-dark-gray {
  color: #333333;
}
.validation-error {
  display: block;
  background-color: #a94442;
  color: white;
  border-radius: 0 0 4px 4px;
  padding: 2px 4px;
  margin-top: 0;
  text-align: left;
  font-size: 13px !important;
  text-align: right;
  font-weight: bold;
}
.no-communication-label {
  font-weight: 500;
  line-height: 46px;
  vertical-align: middle;
  font-size: 24px;
  color: #c35f5f;
  border: 1px solid #c35f5f;
  padding: 0px 6px;
  border-radius: 10px;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 3px;
}
.m-1 {
  margin-top: 1rem;
}
/* Mobile */
.only-for-mobile,
.ui-mobile-menu {
  display: none;
}
.strong {
  font-weight: bold;
}
.font-w-normel {
  font-weight: normal;
}
.display-flex {
  display: flex;
}
.force-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.input-min-width-x-small {
  min-width: 60px;
}
.input-min-width-x-small2 {
  min-width: 100px;
}
.input-min-width-small {
  min-width: 120px;
}
.input-min-width-small1 {
  min-width: 150px;
}
.input-min-width-small2 {
  min-width: 200px;
}
.input-min-width-medium {
  min-width: 360px;
}
.input-min-width-large {
  min-width: 500px;
}
.x-small-cell {
  width: 80px;
}
.small-cell {
  width: 150px;
}
.medium-cell {
  width: 250px;
}
.large-cell {
  width: 300px;
}
.x-large-cell {
  width: 400px;
}
.xx-large-cell {
  width: 600px;
}
.min-width-over-14-elements {
  min-width: 1620px;
}
.min-width-12-to-14-elements {
  min-width: 1366px;
}
.min-width-less-than-12-elements {
  min-width: 1280px;
}
.buttons-panel div {
  font-size: 16px;
  color: #6f6e6e;
  align-self: center;
}
.title-input {
  display: inline;
  width: 600px;
}
.field-title {
  font-size: 1.1em;
  font-weight: normal;
}
.readonly-field-value {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 20px;
  border: navajowhite;
}
.grouped-fields-container {
  width: 300px;
  border-left: solid #bbb 1px;
  height: 350px;
  padding: 12px;
}
.grouped-fields-container:last-child {
  border: none;
}
/* ==========================================================================
  Pronouncement classes
   ========================================================================== */
.dripping {
  color: #efa348;
}
.sprinkling {
  color: #dcfa50;
}
.splattering {
  color: #66aa66 a6;
}
.close-color-idicator {
  background-color: #fff;
}
.status.succes-color-indicator {
  font-size: 12px;
}
.status.succes-color-indicator-animate {
  border: 1px solid #5a9e55;
  background: linear-gradient(45deg, #4f924a, #7fc27a, #4f924a, #7fc27a, #4f924a, #7fc27a, #4f924a, #7fc27a, #4f924a);
  background-size: 400%;
  -webkit-animation: Gradient 1s ease-out infinite;
  -moz-animation: Gradient 1s ease-out infinite;
  animation: Gradient 1s ease-out infinite;
}
@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.status.close-color-idicator {
  color: #555;
  border: 1px solid #999;
  font-size: 12px;
}
.status.danger-color-indicator {
  font-size: 12px;
}
.status.unactive-color-indicator {
  font-size: 12px;
}
.unactive-color-indicator {
  background-color: #ccc;
}
.Q-color-indicator {
  width: 35px;
}
.succes-color-indicator {
  background-color: #7fc27a;
}
.danger-color-indicator {
  background-color: #d9534f;
}
.danger-indicator {
  color: #c35f5f;
}
/* ==========================================================================
 Graphic view
   ========================================================================== */
.graphic-view .no-margin {
  margin-left: 0;
  margin-right: 0;
}
.graphic-view .main-compost-filter {
  margin-right: 225px;
}
.graphic-view .main-plus-item {
  margin-right: 150px;
}
.graphic-view .main-valve {
  margin-right: 75px;
}
.rtl .no-margin {
  margin-left: 0;
  margin-right: 0;
}
.rtl .main-compost-filter {
  margin-right: 0;
  margin-left: 225px;
}
.rtl .main-plus-item {
  margin-right: 0;
  margin-left: 150px;
}
.rtl .main-valve {
  margin-right: 0;
  margin-left: 75px;
}
#graphic-valves-table td {
  border-top: none;
}
#graphic-valves-table .tooltip {
  top: 250px !important;
}
/* ==========================================================================
                                   Breadcrumbs
   ========================================================================== */
.breadcrumb-controller-name {
  font-weight: normal;
}
.breadcrumb-ControllersList_Header {
  font-weight: bold;
}
/* ==========================================================================
                                   Header section
   ========================================================================== */
.header-section {
  width: 100%;
  position: fixed;
  z-index: 99999;
  right: 0;
}
.header-wrapper {
  /*padding: 0 20px 0 0;*/
  background: #f4f6f7;
  height: 66px;
}
.header-wrapper a {
  color: #fff;
  text-decoration: none;
}
.header {
  border-right: 1px #999 solid;
}
.logo {
  width: 190px;
  padding: 0px 20px;
  /*padding: 0 0 0 20px;*/
  float: right;
  margin: 10px 0px 0px 10px;
  cursor: pointer;
  outline: none;
}
.bradcrumb-home {
  cursor: pointer;
  outline: none;
}
.app-version {
  float: right;
  padding-right: 10px;
  padding-top: 10px;
}
.app-version .app-version-number {
  text-align: center;
  display: block;
}
.conection-container {
  padding-left: 10px;
  text-align: center;
}
.conection-container .label {
  font-size: 1em;
}
.header .menu ul li {
  display: inline-block;
  list-style: none;
  text-align: center;
}
.header .menu ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
}
.header .menu ul li:hover a {
  color: #fff;
}
.header .menu ul .dropdown-menu {
  margin-top: 6px;
  background-color: #68add5;
}
.header .menu ul .dropdown-menu li {
  display: block;
}
.header .menu ul .dropdown-menu li:hover {
  background-color: #54a2cf;
}
.header .menu ul .dropdown-menu li:hover a {
  background-color: #54a2cf;
}
.header .menu ul li ul.submenu {
  background-color: #7c919e;
  display: none;
  position: absolute;
  width: 132px;
  margin-right: -5px;
  margin-top: 6px;
  -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.05);
}
.header .menu ul li ul.submenu li {
  display: block;
  width: 100%;
}
.header .menu ul li ul.submenu li a {
  color: #fff;
  line-height: 20px;
  padding: 5px 27px;
}
.header .menu ul li ul.submenu li:hover {
  background: #111;
}
.header .menu ul li:hover ul.submenu {
  display: block;
}
.header .menu ul li i.icon-arrow {
  display: none;
}
.user {
  padding: 8px 10px;
  color: #333333;
  position: relative;
  float: right;
  border-left: 1px solid #999;
  border-right: solid #999 1px;
  font-size: 12px;
  width: 165px;
}
.user:hover {
  background: #dae1e4;
  color: #000;
}
.user .row {
  margin-right: -5px;
  margin-left: -5px;
}
.user .col-xs-5,
.user .col-xs-7 {
  padding-right: 5px;
  padding-left: 5px;
}
.user .name-and-description {
  text-align: right;
}
.user .user-font {
  font-family: Assistant;
  font-size: 16px;
}
.user .btn-connection {
  display: inline;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 5px;
  padding: 4px;
}
.user .user-inner-container {
  line-height: 25px;
  cursor: pointer;
}
.user .user-inner-container .dicoennected {
  color: red;
  border: 1px solid red;
  border-radius: 2px;
}
.user .user-inner-container:focus {
  outline: none;
}
.user .user-inner-container .label-container {
  line-height: 14px;
}
.user .user-inner-container .name,
.user .user-inner-container .description {
  white-space: nowrap;
  /*max-width: 100px;*/
  overflow: hidden;
  text-overflow: ellipsis;
}
.user .icon-user-icon:before {
  font-size: 20px;
  color: #555;
}
.user .user-menu {
  position: absolute;
  background: #fff;
  border: #999 solid 1px;
  border-radius: 4px;
  width: 150px;
  top: 65px;
  left: 6px;
  z-index: 999;
  text-align: right;
}
.user .user-menu .arrow {
  display: inline-block;
  height: 10px;
  width: 10px;
  background: #fff;
  position: absolute;
  border-width: 0 0 1px 1px;
  border-color: #999;
  border-style: solid;
  transform: rotate(135deg);
  top: -5px;
  left: 15px;
}
.user .user-menu .log-out {
  display: block;
  border-top: 1px #999 solid;
}
.user .user-menu a {
  padding: 0 10px 10px 10px;
  display: block;
  color: #333333;
}
.user .user-menu a.change-password,
.user .user-menu a.log-out {
  padding-top: 10px;
}
.control-container {
  text-align: right;
  padding-right: 0px;
}
.dropdown-item-pointer {
  cursor: pointer;
}
.dropdown-item-design {
  padding-right: 10px;
}
.control-panel-menu {
  position: absolute;
  background: #ccc;
  border: #999 solid 1px;
  border-radius: 4px;
  width: 150px;
  top: 40px;
  left: 5px;
  z-index: 999;
  text-align: right;
}
nav.menu li:hover i {
  color: #fff;
}
.rtl {
  /*.header-wrapper {
        padding: 0 0 0 20px;
    }*/
}
.rtl .app-version {
  float: left;
  padding-left: 10px;
}
.rtl .user {
  text-align: left;
  float: left;
}
.rtl .header-section {
  left: 0;
}
.rtl .header {
  border-left: 1px #999 solid;
  border-right: 0;
}
.rtl .logo {
  float: left;
  margin: 10px 10px 0px 0;
  /*padding: 0 20px 0 0;*/
  padding: 0px 20px;
}
/************************************  End header section  */
.irrigation-plan-h4 {
  padding-right: 15px;
}
.add-program-btn,
.edit-table {
  border: #b2c7d9 1px solid;
  border-radius: 2px;
  background: #fff;
  color: #337ab7;
}
.add-program-btn .icon-plus,
.edit-table .icon-plus,
.add-program-btn .icon-edit,
.edit-table .icon-edit {
  float: left !important;
}
.edit-table[disabled] {
  opacity: 0.7;
  background: #DDD;
}
.edit-table[disabled]:hover {
  border: #b2c7d9 1px solid;
}
.rtl .add-program-btn .icon-plus,
.rtl .edit-table .icon-plus,
.rtl .add-program-btn .icon-edit,
.rtl .edit-table .icon-edit {
  float: right !important;
}
.edit-table {
  margin-left: 10px;
}
.remarks {
  line-height: 20px;
  margin: 10px 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.remarks textarea {
  width: 100%;
}
.edit-remarks-background {
  background: #edf4f7;
}
.rtl .edit-table {
  margin-left: unset;
  margin-right: 5px;
}
.edit-plus {
  border: #b2c7d9 1px solid;
  border-radius: 2px;
  background: #fff;
  color: #337ab7;
}
.edit-plus .icon-plus,
.edit-plus .icon-edit {
  float: right !important;
}
.add-program-btn {
  margin-left: 10px;
}
.rtl .add-program-btn {
  margin-right: 10px;
}
.cell-valve-number {
  width: 70px;
  height: 45px;
  text-align: center;
  position: relative;
}
.cell-valve-number .icon-pipe-papillion {
  position: absolute;
  left: 50%;
  margin-left: -11px;
  bottom: 0;
  color: orange;
}
.add-program-btn:hover,
.edit-table:hover {
  border-color: #337ab7;
}
.cell-reset-amount {
  width: 92px;
}
.table-in-modal {
  width: 33%;
  padding-left: 2%;
}
.modal-size {
  width: 400px;
}
.modal-size-for-mobile {
  width: 355px;
}
rtl .table-in-modal {
  /*padding-left:0;*/
  padding-right: 2%;
}
.table-in-modal-container {
  width: 90%;
}
.repeat-table-with-scroll2 {
  max-width: 100%;
  overflow-x: auto;
}
.modal-region-map .modal-content {
  height: 80vh;
}
.modal-region-map .modal-header h2 {
  display: inline-block;
  margin: 0 5px;
}
.modal-region-map .map-header {
  line-height: 40px;
  padding: 5px;
}
.button-management {
  padding: 6px 12px;
  font-size: 14px;
}
.controller-header-button {
  margin: 0 12px;
}
.buttons-panel .toggle-active-container {
  /*display: inline-block;*/
  height: 34px;
  border: 1px solid #999;
  border-radius: 2px;
  /*width: 123px;*/
}
.buttons-panel .toggle-active-container button {
  width: 60px;
  padding: 5px;
  border: none;
}
.buttons-panel .toggle-active-container button.btn-success {
  background: #68add5;
}
.buttons-panel .toggle-active-container button.btn-success:hover {
  background: #7ec3eb;
}
.buttons-panel .toggle-active-container.network-defense {
  width: 287px;
}
.buttons-panel .toggle-active-container.network-defense button {
  width: 95px;
}
.buttons-panel .notes {
  border-radius: 2px;
  border: 1px #ccc solid;
}
.buttons-panel .dropdown button {
  background: none;
}
.buttons-panel .dropdown-menu {
  right: 0;
  left: unset;
}
.buttons-panel .dropdown-menu > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
  cursor: pointer;
}
.buttons-panel .dropdown-menu > a:hover {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.buttons-panel .icon-star:before {
  color: #f7ce08;
  font-size: 24px;
}
.buttons-panel .icon-star:hover:before {
  color: #f9e275;
}
.buttons-panel .icon-3-dots:before {
  color: #333333;
}
.buttons-panel .icon-3-dots:hover:before {
  color: #777;
}
.mobile-toggle-active-container {
  display: inline-block;
  border: 1px solid #999;
  border-radius: 2px;
  width: 122px;
}
.mobile-toggle-active-container button {
  width: 60px;
  padding: 0 5px;
  border: none;
}
.mobile-toggle-active-container button.btn-success {
  background: #68add5;
}
.mobile-toggle-active-container button.btn-success:hover {
  background: #7ec3eb;
}
.mobile-toggle-active-container.network-defense {
  width: 287px;
}
.mobile-toggle-active-container.network-defense button {
  width: 95px;
}
.rtl .buttons-panel {
  /*.dropdown-menu {
            right: unset;
            left: 0;
        }*/
}
.region-text {
  width: 70%;
  float: right;
}
.map-container {
  width: 43px;
  cursor: pointer;
}
.map-container .st0 {
  fill: #75D26D;
}
.map-container .st1 {
  fill: #96C6E2;
}
.map-container .st2 {
  fill: #FBDB53;
}
.map-container .st3 {
  fill: #7a7a7a;
}
.map-container .st4 {
  fill: #FFFFFF;
}
.whatsapp-container {
  width: 43px;
}
.whatsapp-container-mobile {
  width: 20%;
}
.whatsapp-container img,
.whatsapp-container-mobile img {
  width: 100%;
}
.border-none {
  border: none;
}
.backgroung-none {
  background: none;
}
.main-wrapper {
  padding: 100px 20px 20px 20px;
  position: relative;
  background: #d2d4d8;
  min-height: 100vh;
}
.main-wrapper.show-loader-on-main-wrapper {
  opacity: 0.5;
}
.round-btn {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0 10px;
  background: none;
  cursor: pointer;
}
.round-btn .cls-1 {
  fill: #ddd;
}
.round-btn .cls-2 {
  fill: #bc1313;
}
.round-btn .cls-3 {
  fill: #6d0308;
}
.round-btn .cls-4 {
  fill: #d3404e;
}
.round-btn:hover .cls-1 {
  fill: #a01a1a;
}
.round-btn:hover .cls-2 {
  fill: #bc1313;
}
.round-btn:hover .cls-3 {
  fill: #6d0308;
}
.round-btn:hover .cls-4 {
  fill: #960e0e;
}
.faults-modal-btn {
  width: 145px;
  height: 34px;
  background: #fff;
  border-radius: 2px;
}
.faults-modal-btn.fault {
  color: #d9534f;
  border: 1px solid #d9534f;
}
.faults-modal-btn.fault .badge {
  background-color: #d9534f;
}
.faults-modal-btn.fault:hover {
  border-color: #b73737;
  color: #b73737;
  background-color: #f9f5f5;
}
.faults-modal-btn.no-fault {
  color: #68add5;
  border: 1px solid #68add5;
}
.faults-modal-btn.no-fault .badge {
  background-color: #68add5;
}
.faults-modal-btn.no-fault:hover {
  border-color: #3b86ee;
  color: #3b86ee;
  background-color: #f9f5f5;
}
/* ==========================================================================
   reports styles
   ========================================================================== */
.reports-thumbs {
  display: block;
  border-radius: 2px;
  box-shadow: 3px 3px 5px #ccc;
  border: 1px solid #ccc;
  padding: 5px;
  margin: 10px;
  color: #333333;
  text-decoration: none !important;
  font-weight: bold;
}
.reports-thumbs .thumb-caption {
  padding-top: 5px;
  font-size: 24px;
}
.reports-thumbs:hover {
  color: #333333;
  border: 1px solid #999;
  box-shadow: 5px 5px 10px #ccc;
}
.reports-thumbs:focus {
  color: #333333;
}
.reports-data .ng-dropdown-multiselect ul li {
  cursor: pointer;
}
.reports-data .ui-table-on-kendo .k-grid-header .k-link {
  padding-left: 0.6em;
  margin-left: 0px;
  margin-right: 0px;
}
/* ==========================================================================
   controller-programing-modal
   ========================================================================== */
.table-container {
  width: 100%;
  max-height: 490px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-audit-trail .modal-dialog {
  width: 75%;
  top: 102px;
  margin-bottom: 0;
  margin-top: 0;
}
.modal-audit-trail .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}
.modal-audit-trail .refresh-btn {
  background: #68add5;
  border: none;
  color: #fff;
  padding: 5px 20px;
}
.ui-modal-dialog .modal-table {
  max-height: 500px;
  overflow-y: auto;
  /*AskModiOrYuval*/
}
.ui-modal-dialog .modal-dialog-design {
  width: 80%;
  /*AskModiOrYuval*/
}
.ui-modal-dialog .modal-content-design {
  margin-top: 150px;
  /*AskModiOrYuval*/
}
.ui-modal-dialog .modal-text {
  text-align: right;
}
.ui-modal-dialog .modal-text-design {
  font-size: 17px;
  padding-top: 4px;
  margin-left: -15px;
}
@media (min-width: 1650px) {
  .repeat-table-with-scroll {
    max-width: 100%;
    overflow-x: auto;
  }
  #controller-programing-modal,
  #new-service-call-modal,
  #existing-service-call-modal {
    /*.modal-dialog {
            width: 1400px !important;
        }*/
  }
}
.valve-details-modal .modal-dialog {
  width: 95%;
  top: 102px;
  margin-bottom: 0;
  margin-top: 0;
}
.valve-details-modal .row {
  margin-top: 10px;
}
.valve-details-modal .open-close-valve button {
  font-size: 20px;
  padding: 10px 25px;
}
#modal-installment .modal-dialog {
  min-width: 80vw;
}
#modal-installment .modal-dialog .modal-body {
  min-height: 65vh;
}
#modal-installment .restart-controller-btn {
  background: #d24949;
  display: block;
  border: none;
  color: #fff;
  margin: 0 auto;
  padding: 5px 40px;
  border-radius: 2px;
}
#controller-programing-modal {
  /*.programing-install-view {
        max-height: 65vh;
        padding: 5px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }*/
}
#controller-programing-modal .modal-dialog {
  width: 95%;
  top: 102px;
  margin-bottom: 0;
  margin-top: 0;
}
#controller-programing-modal .expander-title-section {
  width: auto;
  outline: none;
}
#controller-programing-modal .ui-expander-content-container {
  border: 1px solid #ccc;
  border-top: 0;
  padding: 20px;
}
#controller-programing-modal .ui-expander-content-container .basic-data {
  background: #eee;
  border-radius: 2px;
}
#controller-programing-modal .ui-expander-content-container.programing-compost-view-container div {
  margin-bottom: 10px;
}
#controller-programing-modal .ui-expander-content-container.programing-compost-view-container label {
  float: right;
  font-weight: normal;
}
#controller-programing-modal .ui-expander-content-container.programing-compost-view-container .ui-grouped-radio-button,
#controller-programing-modal .ui-expander-content-container.programing-compost-view-container select {
  float: right;
  display: block;
  clear: right;
}
#controller-programing-modal .ui-expander-content-container.programing-compost-view-container select {
  padding-left: 10px;
  padding-right: 10px;
}
#controller-programing-modal .ui-expander-content-container .site-data textarea,
#controller-programing-modal .ui-expander-content-container .site-data input[type=text] {
  display: block;
  clear: right;
  border: 1px solid #999;
  background: none;
  border-radius: 2px;
}
#controller-programing-modal .ui-expander-content-container .site-data textarea::placeholder,
#controller-programing-modal .ui-expander-content-container .site-data input[type=text]::placeholder {
  color: #ccc;
}
#controller-programing-modal .ui-expander-content-container .site-data div {
  margin-bottom: 10px;
}
#controller-programing-modal .ui-tab-view-container {
  text-align: right;
}
#controller-programing-modal .programing-behavior-view-container label {
  font-weight: normal;
}
#controller-programing-modal .programing-behavior-view-container .ui-checkbox,
#controller-programing-modal .programing-behavior-view-container .ui-grouped-radio-button {
  margin-left: 5px;
}
#controller-programing-modal .programing-compost-view-container label,
#controller-programing-modal .programing-general-view-container label {
  font-weight: normal;
}
#controller-programing-modal .restart-controller-container {
  text-align: center;
}
#controller-programing-modal .restart-controller-container .confirm-restart-controller {
  padding: 5px 20px;
  border: 1px solid #d24949;
  border-radius: 2px;
  display: inline-block;
  margin: 10px auto;
}
#controller-programing-modal .restart-controller-container .confirm-restart-controller span {
  margin-left: 20px;
}
#controller-programing-modal .restart-controller-container .confirm-restart-controller .confirm {
  background: #d24949;
  border: none;
  color: #fff;
  border-radius: 2px;
}
#controller-programing-modal .restart-controller-container .confirm-restart-controller .cancel {
  border: none;
  border-bottom: 1px solid #999;
  background: none;
  margin-left: 10px;
}
#controller-programing-modal .header-above-table {
  margin: 20px 0;
}
.table-sticky {
  height: calc(100vh - 350px);
  overflow: auto;
  min-height: 250px;
}
.table-sticky-header {
  position: sticky;
  top: 0;
  background-color: white;
}
.valid-add-valve {
  color: silver;
}
.error-design {
  color: red;
  margin: 10px;
}
.header-above-input {
  margin-bottom: 0px;
  margin-left: 0px;
  margin-top: 20px;
  margin-right: 0px;
}
.header-above-table-repeat {
  margin-bottom: 20px;
  margin-left: 0px;
  margin-top: 20px;
  margin-right: 0px;
}
.header-above-table-kendo {
  margin-bottom: 0px;
  margin-left: 0px;
  margin-top: 20px;
  margin-right: 0px;
}
.table-repeat-tbody {
  overflow-y: auto;
}
.table-repeat-thead {
  overflow-y: hidden;
  margin-right: 10px;
}
.rtl .table-repeat-thead {
  margin-left: 10px;
  margin-right: 0px;
}
/* ==========================================================================
   search styles
   ========================================================================== */
#search button {
  background: none;
  border: none;
  line-height: 48px;
}
#search input[type=search] {
  line-height: 48px;
  font-size: 48px;
  border-width: 0 0 1px 0;
  border-color: #333333;
}
#search input[type=search]:focus {
  outline: none;
}
#search input::placeholder {
  font-size: 16px;
  color: #ccc;
}
#search .nav-pills > li.active > a {
  color: #333333;
  border-bottom: 3px solid #efa042;
  background: none;
  margin: initial;
}
#search .nav-pills > li > a {
  color: #999;
}
#search i {
  color: #999;
}
#search .search-result-row {
  padding: 5px;
}
/* ==========================================================================
  management styles
   ========================================================================== */
.management-thumbs {
  display: inline-block;
  padding: 5px;
  color: #333333;
  text-decoration: none !important;
  font-weight: bold;
}
.management-thumbs .thumb-caption {
  float: left;
  line-height: 35px;
  margin-left: 10px;
}
.management-thumbs .icon-container {
  border-radius: 4px;
  background: #68add5;
  padding: 10px;
  width: 40px;
  height: 40px;
  text-align: center;
  display: inline-block;
  float: left;
  color: #fff;
}
.management-thumbs:hover {
  color: #333333;
}
.management-thumbs:focus {
  color: #333333;
}
.rtl .thumb-caption {
  float: right;
  margin-right: 10px;
}
.rtl .icon-container {
  float: right;
}
/* ==========================================================================
   irrController styles
   ========================================================================== */
.irrigation-summary-info-and-actions {
  margin-bottom: 20px;
  height: 34px;
  text-align: left;
}
.irrigation-summary-info-and-actions .irriation-summary-filter {
  margin-right: 10px;
  border: 1px #999 solid;
  border-radius: 2px;
  display: inline-block;
}
.irrigation-summary-info-and-actions .irriation-summary-filter .filter-btn {
  float: right;
  text-align: center;
  background: #e9ebec;
  height: 50px;
  width: 100px;
  border: none;
  border-left: 1px solid #999;
  color: #999;
}
.irrigation-summary-info-and-actions .irriation-summary-filter .filter-btn:last-child {
  border: none;
}
.irrigation-summary-info-and-actions .irriation-summary-filter .filter-btn.filter-btn-active {
  color: #fff;
  background: #326e90;
}
.irrigation-summary-info-and-actions .results-section {
  flex: 2;
}
.irrigation-summary-info-and-actions .label-for-summary-filters {
  float: left;
  font-weight: bold;
}
.irrigation-summary-info-and-actions .label-for-summary-results {
  font-weight: bold;
}
.irrigation-summary-info-and-actions .actions-group .ui-switch {
  float: left;
  display: inline-block;
}
.irrigation-summary-info-and-actions .actions-group label {
  float: left;
  margin-right: 10px;
}
.irrigation-summary-info-and-actions .show-actions-btn {
  height: 34px;
  background: #fff;
  color: #68add5;
  border: 1px #68add5 solid;
  border-radius: 2px;
  padding: 5px 10px;
}
.irrigation-summary-info-and-actions .show-actions-btn:hover {
  border-color: #337ab7;
}
.irrigation-summary-info-and-actions .summary-filters-section {
  align-items: center;
}
.irrigation-summary-info-and-actions .summary-filters-section span {
  margin-right: 10px;
}
.irrigation-summary-info-and-actions .show-actions-button-section {
  margin-right: 20px;
}
.rtl .irrigation-summary-info-and-actions {
  text-align: right;
}
.rtl .irrigation-summary-info-and-actions .summary-filters-section span {
  margin-left: 10px;
  margin-right: 0;
}
.rtl .irrigation-summary-info-and-actions .actions-group .ui-switch {
  float: right;
  display: inline-block;
}
.rtl .irrigation-summary-info-and-actions .actions-group label {
  float: right;
  margin-right: 10px;
}
.refresh-output {
  padding-right: 0;
}
.refresh-output button {
  border-radius: 2px;
}
.refresh-output i {
  margin: 0 5px 0 0;
}
.rtl .refresh-output {
  padding-left: 0;
}
.rtl .refresh-output i {
  margin: 0 0 0 5px;
}
.design-name {
  width: 385px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  margin: 0 20px;
}
#irrController h1 {
  display: inline-block;
  font-weight: bold;
  margin-top: 0;
}
.chart-title {
  text-align: center;
}
#irrController .irrigation-controller-name {
  max-width: 385px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  margin: 0 20px;
}
.received-from-ctos {
  color: #00aa00;
}
.controller-name h1,
.controller-name h2 {
  display: inline-block;
  margin-top: 0;
}
.controller-name h2 {
  margin-right: 20px;
}
.nav.nav-pills {
  font-weight: bold;
  margin-bottom: 10px;
}
.nav.nav-pills > li.active > a {
  color: #333333;
  border-bottom: 3px solid #68add5;
  background: none;
}
.nav.nav-pills > li.active > a:focus,
.nav.nav-pills > li.active > a:hover {
  color: #333333;
}
#irrController .grid-container {
  margin: 0;
  position: relative;
}
#irrigation .grid-container {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 65vh;
}
.controller-programing-midal {
  width: 960px;
}
#irrController .fa-chec {
  display: inline-block;
  font: normal normal normal 24px/1 FontAwesome;
  font-size: 24px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
#irrController .fa-chec:before {
  content: "\f00c";
  color: #68add5;
}
#irrController h3 i {
  padding: 3px 0 3px 5px;
}
.rtl #irrController h3 i {
  padding: 3px 5px 3px 0;
}
#irrController h3 {
  display: inline-block;
}
#irrController .reports h3 {
  display: block;
}
#irrController .reports .date-filter,
#irrController .reports .date-range {
  margin-bottom: 20px;
}
#irrController .reports #columns-chart {
  direction: ltr;
}
#irrController .reports #columns-chart .highcharts-credits {
  display: none;
}
#irrController .reports #columns-chart .highcharts-title {
  left: 100px;
}
#irrController .reports #gauge-chart {
  direction: ltr;
  padding: 0px 30px;
}
#irrController .reports #gauge-chart .highcharts-credits {
  display: none;
}
#irrController .reports #gauge-chart .highcharts-root {
  height: 350px !important;
}
#irrController .reports #gauge-chart .highcharts-title {
  direction: rtl;
}
#irrController .reports #gauge-chart .highcharts-label-box.highcharts-data-label-box {
  width: auto;
}
#irrController .reports #gauge-chart .highcharts-axis-labels.highcharts-yaxis-labels text tspan {
  color: #333333 !important;
}
#irrController .reports #gauge-chart .highcharts-contextbutton {
  display: none;
}
#irrController .reports #gauge-chart .highcharts-data-label text {
  font-size: 30px !important;
  font-weight: bold;
  direction: ltr;
}
.rtl #irrController .reports .highcharts-axis-labels.highcharts-xaxis-labels {
  direction: rtl;
}
#irrController h3 .programNum {
  font-size: 14px;
  padding: 4px;
  display: inline-block;
  color: #fff;
  border-radius: 5px;
  background: #a7903c;
  margin: 0 2px;
  height: 21px;
  width: 21px;
  text-align: center;
  background: #d7d7d7;
  border-radius: 2px;
}
.num-of-results {
  font-size: 16px;
  padding: 4px;
  display: inline-block;
  color: white;
  border-radius: 2px;
  background: #68add5;
  margin: 0 2px;
  height: 25px;
  min-width: 25px;
  text-align: center;
}
#irrController .collapsed .collapse-caret-down {
  display: none;
}
#irrController .collapsed .collapse-caret-right {
  display: inline-block;
}
.rtl #irrController .collapsed .collapse-caret-right {
  display: none;
}
.rtl #irrController .collapsed .collapse-caret-left {
  display: none;
}
.rtl #irrController .collapsed .collapse-caret-left {
  display: inline-block;
}
#irrController .collapse-caret-down {
  display: inline-block;
}
#irrController .collapse-caret-left {
  display: none;
}
#irrController .collapse-caret-right {
  display: none;
}
.rtl #irrController .collapse-caret-left {
  display: none;
}
#irrController .collapse-caret-left,
#irrController .collapse-caret-down {
  text-align: center;
  width: 15px;
}
#irrController .ap-checkbox .md-label {
  display: none;
}
#irrController md-checkbox.md-checked .md-ink-ripple {
  color: #466583;
}
.control-details-row {
  margin-top: 20px;
}
/* ==========================================================================
   irrigation  Kendo overide styles
   ========================================================================== */
.active-irrigation {
  color: #68add5 !important;
}
.in-irrigation {
  color: #81dc31 !important;
}
.fault {
  color: #d24949 !important;
}
.irrigation-with-fault {
  color: #d28802 !important;
}
.no-communication {
  color: #fbdb53 !important;
}
.not-found {
  color: #ffffff !important;
}
.no-plc-communication {
  color: #fbdb53 !important;
}
.idle {
  color: #fbdb53 !important;
}
#irrigation .k-grid table {
  border-collapse: initial;
}
.grid-highlight-data {
  background-color: #cddc3954;
}
.grid-highlight-data-CurrentYearConsumption {
  background-color: #D6A3A2;
}
.grid-highlight-data-CurrentYearGray {
  background-color: #87CEFA;
}
.grid-highlight-data-color1 {
  color: #4169E1;
  font-weight: bold;
}
.grid-highlight-data-color2 {
  color: #E17093;
  font-weight: bold;
}
md-checkbox .md-icon {
  background: #fff;
  background-color: #fff;
  width: 25px;
  height: 25px;
  border-color: #999;
}
md-checkbox.md-checked .md-icon {
  background-color: #fff;
  color: #68add5;
}
md-checkbox.md-checked .md-icon:after {
  border-color: #68add5;
  left: 5.66667px;
  width: 11.66667px;
  height: 16.33333px;
}
md-checkbox .md-ink-ripple {
  color: #68add5;
}
#irrigation tr {
  background: #fff;
  line-height: 30px;
}
#irrigation tr td {
  border-bottom: 1px solid #ccc;
}
#irrigation thead tr:first-child .k-header {
  background: #fff;
  color: #333333;
  font-weight: bold;
}
#irrigation .k-grid-header .k-header {
  background-color: #7a7a7a;
  background-image: none;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
#irrigation .k-grid-header .k-header .k-link {
  color: #fff;
  text-align: left;
  line-height: 30px;
}
.rtl #irrigation .k-grid-header .k-header .k-link {
  text-align: right;
}
.rtl #irrigation div.k-grid-header {
  direction: rtl;
  padding-right: 0px;
}
.rtl #irrigation div.k-grid-content {
  direction: rtl;
}
#irrigation div.k-grid-header {
  direction: ltr;
  padding-right: 0px;
}
#irrigation div.k-grid-content {
  direction: ltr;
}
#irrigation .k-grid tr:hover {
  background-color: #f4f6f7;
}
#irrigation .k-grid td {
  white-space: nowrap;
}
/* ==========================================================================
   irrigation styles
   ========================================================================== */
#actionsModal .modal-column div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.modal select {
  border-radius: 2px;
}
.modal h4 {
  display: inline-block;
  margin-left: 5px;
}
.rtl .modal h4 {
  margin-left: unset;
  /*margin-right: 5px;*/
  font-size: 1.5em;
}
.modal h5 {
  display: block;
  margin: 0 5px;
  padding: 3px;
  color: #fff;
  font-weight: bold;
}
.modal-column:nth-child(1) h5 {
  background: #f58686;
}
.modal-column:nth-child(2) h5 {
  background: #699ed4;
}
.modal-column:nth-child(3) h5 {
  background: #bb4391;
}
.modal-column:nth-child(4) h5 {
  background: #6fa271;
}
.modal-open-valve td {
  padding: 5px;
}
.modal-open-valve input[type=number] {
  /*max-width:60px;*/
}
.modal-open-valve .modal-open-valve-button {
  text-align: center;
}
.modal-open-valve .modal-open-valve-button button {
  font-size: 20px;
  padding: 10px 30px;
}
.modal-open-valve .modal-open-valve-button.modal-open-valve-mobile button {
  font-size: 20px;
  padding: 10px 30px;
}
.modal-open-valve a {
  cursor: pointer;
  text-decoration: none;
}
.modal-open-valve a span {
  margin-right: 5px;
}
/* Regard to MD*/
.ap-warning {
  color: #bb4353;
}
.ap-toolbar:not(.md-menu-toolbar) {
  background-color: #7c919e;
}
.ap-toolbar {
  min-height: 50px;
}
.ap-toolbar .md-toolbar-tools {
  display: initial;
  height: 50px;
  line-height: 50px;
}
.ap-toolbar .md-toolbar-tools h2 {
  display: inline-block;
  float: left;
  line-height: 50px;
  padding-right: 20px;
}
.ap-toolbar .md-toolbar-tools .edit {
  float: right;
  line-height: 50px;
}
.rtl .ap-toolbar .md-toolbar-tools .edit {
  float: left;
}
.rtl .ap-toolbar .md-toolbar-tools h2 {
  float: right;
  padding-left: 20px;
  padding-right: 0;
}
.ap-button {
  padding: 3px 6px;
  margin: 6px 0;
  min-height: 0;
  min-width: 0;
  line-height: inherit;
}
.open-edit-window .ap-select {
  color: #333333;
  border: 1px solid #333333;
}
.open-edit-window .ap-input {
  color: #fff;
  border: 0;
  background: #668ca7;
}
.open-edit-window ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #d7e0e8;
}
.open-edit-window ::-moz-placeholder {
  /* Firefox 19+ */
  color: #d7e0e8;
}
.open-edit-window :-ms-input-placeholder {
  /* IE 10+ */
  color: #d7e0e8;
}
.open-edit-window :-moz-placeholder {
  /* Firefox 18- */
  color: #d7e0e8;
}
.ap-checkbox {
  margin: 0;
}
.ap-select:not([disabled]):focus .md-select-value,
header .ap-select .md-select-value:focus,
header .ap-select .md-select-value,
header .ap-select .md-select-icon,
header .ap-select .md-select-value.md-select-placeholder {
  color: #fff;
}
.md-button.ap-primary {
  color: #fff;
  background-color: #f1a448;
  padding: 0 6px;
}
.md-button.ap-primary.md-raised:not([disabled]):hover {
  background-color: #ce8732;
}
.view-setting .fa-desktop {
  color: #555;
  font-size: 14px;
}
.info-and-actions button i {
  margin: 0 5px;
}
#irrigation h1 {
  margin-top: 0;
  margin-bottom: 15px;
}
.info-and-actions > span:nth-child(2),
.info-and-actions > span:nth-child(3),
.info-and-actions > span:nth-child(4) {
  display: inline-block;
  padding-right: 20px;
  padding-left: 0;
}
.rtl .info-and-actions > span:nth-child(2),
.rtl .info-and-actions > span:nth-child(3),
.rtl .info-and-actions > span:nth-child(4) {
  padding-right: 0px;
  padding-left: 20px;
}
#irrigation .info-and-actions {
  float: left;
}
.rtl #irrigation .info-and-actions {
  float: right;
}
.info-and-actions select {
  border-radius: 2px;
  margin-left: 20px;
  height: 25px;
}
/* ==========================================================================
   Dashboard
   ========================================================================== */
.panels-container {
  min-height: 50px;
  margin-top: 4px;
}
.panels-container .dashboard-gauge-label .dashboard-label-value {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #2E6E91;
  font-family: 'Assistant';
}
.panels-container .dashboard-gauge-label .dashboard-label-title {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  color: #333;
  font-family: 'Assistant';
}
.panels-container .dashboard-widget {
  padding-top: 10px;
  padding-bottom: 10px;
}
.panels-container .dashboard-widget > div {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  height: 300px;
  background: #fff;
  overflow: hidden;
}
.panels-container .dashboard-widget > div h2 {
  margin: 0;
}
.panels-container .dashboard-widget > div .fa-cog {
  font-size: 24px;
  color: #999;
  margin: 0;
}
.panels-container .dashboard-widget > div .dashboard-widget-header {
  margin-bottom: 30px;
}
.panels-container .dashboard-widget > div .dashboard-widget-content {
  height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.panels-container .dashboard-widget > div .dashboard-widget-content-row {
  font-size: 18px;
  padding: 10px 0;
  border-bottom: 1px solid #dde1e4;
}
.panels-container .dashboard-widget > div .dashboard-widget-content-row span:not(:first-child) {
  margin-right: 15px;
}
.panels-container .dashboard-widget > div .numParam {
  font-size: 14px;
}
.panels-container .dashboard-widget > div .numParam.ap-warning {
  background: #bb4353;
  color: #fff;
}
.panels-container .dashboard-widget span {
  display: inline-block;
}
.panels-container .dashboard-widget span.numParam {
  margin-right: 10px;
  margin-left: 10px;
}
/* ==========================================================================
   bootstrap overide
   ========================================================================== */
.nav-touch {
  cursor: pointer;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: none;
  background-color: none;
  border-radius: 0;
}
.nav > li > a:hover,
.nav > li > a:focus {
  background-color: none;
  background: none;
}
.nav-pills > li.active > a {
  margin: 0 20px;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
ul {
  padding: 0;
  margin: 0;
}
h1 {
  margin-top: 0;
  color: #6f6e6e;
  font-size: 32px;
}
h2 {
  font-size: 24px;
}
/*.rtl .modal-body div input {
    float: right;
    margin-left: 5px;
    background: #e1e3e2;
}*/
.inner-height {
  height: 26px;
}
@media screen and (max-width: 767px) {
  .header {
    vertical-align: baseline;
  }
  nav.menu i {
    display: none;
  }
  .header nav.menu ul {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 0;
    margin-left: -1000px;
    z-index: 999999;
    background-color: #46aced;
    -moz-box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.3);
  }
  .header nav.menu.active {
    position: fixed;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
  }
  .header nav.menu.active ul {
    right: 0;
    -moz-transition: right 0.25s;
    -o-transition: right 0.25s;
    -webkit-transition: right 0.25s;
    transition: right 0.25s;
    width: 75vw;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .header nav.menu.active ul li {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .header nav.menu.active ul li:hover .submenu {
    display: none;
  }
  .header nav.menu.active ul li a {
    width: 100%;
  }
  .header nav.menu.active ul li a:hover {
    background: #5aaed5;
  }
  .header nav.menu.active ul li .flexbox-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .header nav.menu.active ul li .flexbox-container a {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }
  .header nav.menu.active ul li .flexbox-container i.icon-arrow {
    display: inline-block;
    height: 76px;
    width: 76px;
    padding: 30px 29px;
    text-align: center;
    cursor: pointer;
  }
  .header nav.menu.active ul li .flexbox-container i.icon-arrow:hover {
    background: #5aaed5;
  }
  .header nav.menu.active ul li .flexbox-container i.icon-arrow svg {
    height: 18px;
    width: 15px;
  }
  .header nav.menu.active ul li .submenu {
    max-height: 0;
    overflow: hidden;
    box-shadow: none;
  }
  .header nav.menu.active ul li.showSubmenu .submenu {
    max-height: 1000px;
    width: 100%;
    position: relative;
    display: block;
    overflow: inherit;
    background-color: #5aaed5;
  }
  .header nav.menu.active ul li.showSubmenu .submenu .subOption {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: none;
  }
  .header nav.menu.active ul li.showSubmenu .submenu .subOption a {
    padding: 15px 40px;
  }
  .header nav.menu.active ul li.showSubmenu .submenu .subOption a:hover {
    background: #1f4e70;
  }
  .header nav.menu.active ul li.showSubmenu i.icon-arrow {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .header nav.menu .hamburger {
    display: inline-block;
    position: absolute;
    top: 22px;
    left: 10px;
    padding: 12px 25px;
    color: #fff;
    cursor: pointer;
    z-index: 2;
  }
  .header nav.menu .hamburger span,
  .header nav.menu .hamburger span:before,
  .header nav.menu .hamburger span:after {
    left: 0;
    border-radius: 2px;
    height: 6px;
    width: 40px;
    background: #576976;
    position: absolute;
    display: block;
    content: '';
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .header nav.menu .hamburger span:before {
    top: -14px;
  }
  .header nav.menu .hamburger span:after {
    bottom: -14px;
  }
  .header nav.menu .hamburger.active span {
    background-color: transparent;
  }
  .header nav.menu .hamburger.active span:before,
  .header nav.menu .hamburger.active.active span:after {
    top: 0;
  }
  .header nav.menu .hamburger.active span:before {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .header nav.menu .hamburger.active span:after {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
.dimmer {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(252, 252, 252, 0.7);
  display: none;
}
.dimmer.active {
  display: block;
}
.no-scrolling {
  overflow: hidden;
  position: fixed;
}
.rtl {
  text-align: right;
  direction: rtl;
}
/*//// bootstrap override ///*/
.jumbotron {
  background: #fff;
}
.jumbotron h1 {
  color: #46aced;
}
/* end NAV */
* {
  box-sizing: border-box;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden {
  display: none !important;
}
/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}
.cell-active {
  background-color: #ddefe2;
  color: #333333;
}
.program-active td {
  background-color: #ddefe2;
  color: #333333;
}
.program-mismatch td {
  background-color: #565656;
}
.controller-active td {
  background-color: #ddefe2;
}
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.clearfix:after {
  clear: both;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 1260px) and (max-width: 1366px) {
  /* Style adjustments for small desktop screens */
  body {
    font-size: 12px;
  }
  h2 {
    font-size: 22px;
  }
  h4 {
    font-size: 16px;
  }
  .btn {
    font-size: 12px;
  }
  .faults-modal-btn {
    width: auto;
  }
  .md-container {
    zoom: 0.85;
  }
  .map-container {
    zoom: 0.6;
  }
  .col-xs-1,
  .col-sm-1,
  .col-md-1,
  .col-lg-1,
  .col-xs-2,
  .col-sm-2,
  .col-md-2,
  .col-lg-2,
  .col-xs-3,
  .col-sm-3,
  .col-md-3,
  .col-lg-3,
  .col-xs-4,
  .col-sm-4,
  .col-md-4,
  .col-lg-4,
  .col-xs-5,
  .col-sm-5,
  .col-md-5,
  .col-lg-5,
  .col-xs-6,
  .col-sm-6,
  .col-md-6,
  .col-lg-6,
  .col-xs-7,
  .col-sm-7,
  .col-md-7,
  .col-lg-7,
  .col-xs-8,
  .col-sm-8,
  .col-md-8,
  .col-lg-8,
  .col-xs-9,
  .col-sm-9,
  .col-md-9,
  .col-lg-9,
  .col-xs-10,
  .col-sm-10,
  .col-md-10,
  .col-lg-10,
  .col-xs-11,
  .col-sm-11,
  .col-md-11,
  .col-lg-11,
  .col-xs-12,
  .col-sm-12,
  .col-md-12,
  .col-lg-12 {
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after,
  *:first-letter,
  *:first-line {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
.md-datepicker-input-container {
  direction: ltr;
}
.md-datepicker-calendar-pane.md-whiteframe-z1.md-pane-open {
  z-index: 9999;
}
.sk-wave {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
/*mdp-time-picker {

    .md-errors-spacer {
        display: none;
    }
}*/
.dev-need-attn {
  background: yellow;
}
.input-number {
  direction: ltr;
}
/*.irrigation-stop-time-mdp {
    .md-icon-button {
        display: none;
    }
}*/
#request-loader {
  position: fixed;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  bottom: 5px;
  left: 5px;
  background-color: #333333;
  color: #fff;
  z-index: 99999;
  padding: 10px;
}
#request-loader .list-group {
  width: 200px;
  margin-bottom: 0;
}
#request-loader .list-group.dev-ins-large-bottom-message {
  width: 1000px;
}
#request-loader .list-group .request-loader-row {
  padding: 5px;
}
#request-loader .list-group .request-loader-row.list-group-item {
  background-color: inherit;
}
#request-loader .list-group .request-loader-row span:not(:last-child) {
  margin-left: 10px;
}
.disabled-text {
  color: #999;
}
.column-mark.active {
  background-color: #fbfcc4;
}
#customer-users-modal {
  z-index: 999999;
}
#customer-users-modal .modal-body {
  max-height: 75vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#customer-users-modal .user-online {
  background-color: #65ca65;
  color: white;
}
#customer-users-modal .ui-grouped-radio-button label {
  width: 100px;
}
.card {
  margin: 5px 0;
  padding: 5px;
  border: 1px solid silver;
  border-radius: 5px;
}
#update-status-modal .modal-dialog {
  width: 1400px;
}
.update-status-collapse {
  visibility: collapse;
}
.update-status-chevron {
  margin-top: 23px;
}
#future-events-modal .future-events-radio-grp label {
  width: 100px;
}
#modal-backdoor-operational .modal-dialog {
  min-width: 85vw;
}
#modal-backdoor-operational .modal-dialog .modal-body {
  max-height: 65vh;
  overflow-y: auto;
}
#modal-backdoor .modal-dialog {
  min-width: 85vw;
}
#modal-backdoor .modal-dialog .modal-body {
  max-height: 65vh;
  overflow-y: auto;
}
#modal-backdoor tr.selected td {
  background-color: #d7e0e8;
}
#modal-backdoor .register-props .checkbox {
  margin-left: 15px;
}
#modal-backdoor #grid_backdoor {
  max-height: 500px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#modal-backdoor .setbit {
  cursor: pointer;
}
.no-col-padding {
  padding: 0px !important;
}
.no-col-padding-right {
  padding-right: 0px !important;
}
.label-margin-top {
  margin-top: 5px;
}
#service-call .ui-grouped-radio-button.callServiceOption label {
  width: 190px;
}
#service-call .ui-grouped-radio-button.callServicePriority label {
  width: 80px;
}
#service-call .modal-body {
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#service-call .ui-expander-content-container {
  border: 1px solid #ccc;
  border-top: 0;
  padding: 20px;
}
.desktop-view .container-margin {
  margin-left: 50px;
  margin-top: 10px;
}
.center-screen-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.user-connected {
  padding: 5px;
  color: white;
  background-color: #7fc27a;
}
.user-disconnected {
  padding: 5px;
  color: white;
  background-color: #e88787;
}
.selected-row td {
  background-color: rgba(205, 220, 57, 0.33) !important;
}
#performance-goal .modal-body {
  max-height: 75vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#performance-goal .ui-grouped-radio-button label {
  width: 200px;
}
.toast {
  top: 105px;
  opacity: 1 !important;
}
.row-center {
  display: flex;
  align-items: center;
}
.controller-gray-water {
  padding: 5px;
  color: white;
  background-color: #8e00ff;
  display: block;
  /*margin-bottom: 10px;*/
  border-radius: 2px;
  text-align: center;
}
#grid_audit_trail .k-grid-content {
  max-height: 50vh;
  min-height: 50vh;
}
.Flow_High {
  font-weight: bold;
  color: indianred;
}
.Flow_Nominal {
  font-weight: bold;
  color: forestgreen;
}
.Flow_Low {
  font-weight: bold;
}
.interconnection-link {
  position: absolute;
  background-color: #68add5;
  height: 37px;
  width: 26px;
  margin: -92px 24px;
  bottom: -100px;
  z-index: 9;
  border-radius: 1px;
  border: 1px solid #558fb1;
  cursor: pointer;
}
.interconnection-link i {
  font-size: 1.5em;
  color: #f2f2f2;
  margin-top: 5px;
}
.interconnection-link.watering {
  background-color: #51985d;
}
.tr-error td {
  background-color: red;
}
#water-performance-design,
#water-performance-target,
#water-daily,
#water-monthly {
  /*.modal-dialog {
        width: 85vw;

        .modal-body {
            max-height: 70vh;
            overflow-y: auto;
            overflow-x: hidden;
        }

        
    }*/
}
#water-performance-design .k-grid-content,
#water-performance-target .k-grid-content,
#water-daily .k-grid-content,
#water-monthly .k-grid-content {
  max-height: 60vh;
  /*overflow-y: auto;*/
}
#grid_water-performance-target {
  /*width: 2300px;*/
}
/*#meterologicalStation {
        #hc-evoporation .highcharts-label.highcharts-series-label.highcharts-series-label-0 {
        display: none;
    }*/
#water-performance-target #hc-water-performance-target .highcharts-label.highcharts-series-label.highcharts-series-label-0 {
  display: none;
}
#grid-irrigation .k-grid-content {
  max-height: 65vh;
}
#map {
  height: 85vh;
}
.modal #map {
  height: 60vh;
}
.map-default-height {
  height: calc(80vh - 150px);
}
.highcharts-rootXXX g.highcharts-label:not(.highcharts-tooltip) {
  display: none;
}
#meterologicalStation #hc-evoporation .highcharts-label.highcharts-series-label.highcharts-series-label-0 {
  display: none;
}
#meterologicalStation #hc-evoporation .highcharts-rootXXX g.highcharts-label:not(.highcharts-tooltip) {
  display: none;
}
#meterologicalStation .flex {
  display: flex;
}
#meterologicalStation .flex > div {
  flex: 1 0 0;
  margin-left: 2%;
  margin-right: 2%;
}
.meterologicalStation-small-cell {
  width: 55px !important;
}
.hc-tooltip-series-color {
  width: 8px;
  padding: 4px;
  border-radius: 50%;
  display: block;
}
.hc-tooltip-series-header {
  /*font-family: "Lucida Grande";*/
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
}
.hc-tooltip-series-x-value {
  font-weight: bold;
}
.hc-tooltip-series-x-value-units {
  font-weight: bold;
}
#grid_eventsLog .k-grid-content {
  max-height: 65vh;
  /*min-height: 50vh;*/
  overflow-y: auto;
}
#grid_callServices .k-grid-content {
  max-height: 65vh;
  min-height: 50vh;
  overflow-y: auto;
}
#grid_callServices .k-grid-content tr:hover {
  cursor: pointer;
}
#grid_callServices td,
#grid_callServices th {
  text-align: right;
  font-weight: bold;
}
@media screen and (min-width: 767px) {
  #new-service-call-modal .modal-dialog,
  #existing-service-call-modal .modal-dialog {
    width: 1000px !important;
  }
  #new-service-call-modal .modal-dialog .modal-body,
  #existing-service-call-modal .modal-dialog .modal-body {
    overflow-x: hidden;
  }
}
@media screen and (max-width: 767px) {
  #new-service-call-modal .modal-dialog,
  #existing-service-call-modal .modal-dialog {
    width: auto !important;
  }
  #new-service-call-modal .form-group,
  #existing-service-call-modal .form-group {
    margin-left: 0;
    margin-right: 0;
  }
  #service-call .ui-grouped-radio-button.callServiceOption label {
    width: 105px;
  }
}
/*#network-defense-controllers-modal {
    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }
}*/
.network-defense-wrapper {
  max-height: 60vh;
  overflow-y: auto;
}
.squer-flow-indicator {
  width: 8px;
  height: 8px;
  background: red;
  border-radius: 2px;
  display: inline-block;
}
.compost-squer-flow-indicator {
  width: 8px;
  height: 8px;
  background: #66BB6A;
  border-radius: 2px;
  display: inline-block;
}
.controller-unsync {
  padding: 2px;
  background-color: red;
  color: white;
}
.monthly-report-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  padding-top: 18px;
}
.TotalDraftGoal-report {
  margin-right: 15px;
  padding-right: 15px;
}
.TotalDraftGoal-report-title {
  margin-left: 10px;
}
.TotalDraftGoal-report-title-icon {
  margin-left: 4px;
}
.DeterminationOfDraftGoal {
  color: #968888;
}
/*#grid_water-daily,
#grid_water-monthly,*/
#grid_water-performance-design .k-grid-content {
  max-height: 350px;
  /*calc(100vh - 600px);*/
  overflow-y: auto;
}
#grid_water-performance-design tr td.diff-cell {
  color: white;
  background-color: green;
  direction: ltr;
}
#grid_water-performance-design tr.diff-range td.diff-cell {
  background-color: red;
}
#grid_water-performance-design tr.neg-diff-range td.diff-cell {
  background-color: darkred;
}
#grid_water-daily .k-grid-content {
  max-height: 350px;
  /*calc(100vh - 500px);*/
  /*250px;*/
  overflow-y: auto;
}
#grid_water-monthly .k-grid-content {
  max-height: 350px;
  /*calc(100vh - 610px);*/
  /*250px;*/
  overflow-y: auto;
}
.new-service-call td {
  background-color: #ff9797;
}
.no-text-overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.pointer {
  cursor: pointer;
  outline: none;
}
/*input[type=number].numeric-time-picker::-webkit-inner-spin-button,
input[type=number].numeric-time-picker::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}*/
/*md-time-picker {
    ng-form {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        flex-direction: row-reverse;

        .time-colon {
            display: none;
        }
    }
}*/
#irrController .compost-week-day i.fa-chec:before {
  color: #f59f36;
}
.width-70-percent {
  width: 70%;
}
#non-sync-properties-modal .modal-body {
  max-height: 75vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.customer-account-status-label {
  color: #eeeff1;
  font-size: 16px;
  padding: 0 30px;
  line-height: 36px;
}
.btn-edit-future-event {
  padding: 2px 7px;
  color: #337ab7;
  border: 1px solid #337ab7;
  margin: 0;
  float: left;
  font-size: 16px;
}
.div-disabled {
  pointer-events: none;
  opacity: 0.5;
  background: #CCC;
}
#grid_costomer_selection button.select-customer {
  white-space: normal;
}
.form-group {
  /* Add a green text color and a checkmark when the requirements are right */
  /* Add a red text color and an "x" when the requirements are wrong */
}
.form-group .password-rules li,
.form-group li.password-rules {
  color: grey;
}
.form-group .password-rules li:before,
.form-group li.password-rules:before {
  position: relative;
  right: -5px;
  content: "-";
}
.form-group .valid {
  color: green;
}
.form-group .valid:before {
  position: relative;
  right: -5px;
  content: "✔";
}
.form-group .invalid {
  color: red;
}
.form-group .invalid:before {
  position: relative;
  right: -5px;
  content: "✖";
}