@charset "UTF-8";
/*


 ************************
 *                      *
 *       zukalize       *
 *   Created By #zuka   *
 *                      *
 *       Version:       *
 *         26.8         *
 *                      *
 ************************

 *                                                                                  *
 *  Based on normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css  *
 *                                                                                  *


*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;800&display=swap");
* {
  transition: all 0.7s ease;
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  line-height: 1.3;
  min-height: 100vh;
  overflow-x: hidden;
}

footer {
  margin-top: auto;
}

a {
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
a:active, a:hover {
  outline-width: 0;
}
a:hover, a:focus, a:active, a:visited {
  color: inherit;
}

b,
strong {
  font-weight: bolder;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

input,
select,
textarea {
  width: 100%;
  font-size: inherit;
  font-family: inherit;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

menu {
  padding: 0;
  margin: 0;
}

figure {
  margin: 0;
}

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

i {
  text-align: center;
}

sub,
sup {
  font-size: 75%;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

small {
  font-size: 80%;
}

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

mark {
  background-color: #ff0;
  color: black;
}

audio,
video {
  display: inline-block;
}

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

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

/*
  END Zukalize
  Created By
                                                                     ***
                                                                     ***
                 ***       ***       ************    ***      ***    ***      ***    **********     ***
                ***       ***        **      ***     ***      ***    ***     ***    ***      ***     ***
           ********************             ***      ***      ***    ***    ***              ***      ***
              ***       ***                ***       ***      ***    ***   ***               ***       ***
             ***       ***                ***        ***      ***    ***  ***        ***********        ***
            ***       ***                ***         ***      ***    ***   ***      ***      ***       ***
        *******************             ***          ***      ***    ***    ***     ***      ***      ***
          ***       ***                ***     **    ***     ****    ***     ***    ***      ***     ***
         ***       ***                ***********    ******** ***    ***      ***    ********  **   ***


*/
a,
input,
select,
textarea,
button {
  border: 1px dashed transparent;
}
a:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
  border: 1px dashed #b0bec5;
}

#zuka-accessibility {
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 0 15px;
  background: #cfd8dc;
  border-radius: 20px 0 0 0;
  z-index: 26081986;
}
#zuka-accessibility .accessibility-menu-btn {
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 25px;
}
#zuka-accessibility .accessibility-menu-btn i {
  width: 50px;
  height: 50px;
  font-size: 50px;
  margin-left: 10px;
}
#zuka-accessibility menu {
  display: none;
}
#zuka-accessibility menu menuitem p {
  margin: 2px;
  padding-top: 5px;
  font-size: 20px;
  font-weight: 700;
  border-top: 1px solid;
}
#zuka-accessibility menu menuitem figure {
  display: flex;
  margin-bottom: 15px;
}
#zuka-accessibility menu menuitem figure label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 90px;
  height: 90px;
  margin: 2px;
  color: #37474f;
  background: #eceff1;
  cursor: pointer;
}
#zuka-accessibility menu menuitem figure label:hover, #zuka-accessibility menu menuitem figure label:focus {
  background: white;
}
#zuka-accessibility menu menuitem figure label i {
  font-size: 25px;
  margin-bottom: 5px;
}
#zuka-accessibility menu menuitem figure label input {
  background: transparent;
  white-space: normal;
  line-height: 1;
}
#zuka-accessibility menu menuitem figure label input:hover, #zuka-accessibility menu menuitem figure label input:focus {
  outline: none;
  text-decoration: underline;
  border: 1px dashed #b0bec5;
}

.accessibility-open {
  display: block !important;
}
.accessibility-open menu {
  display: block !important;
}

.font-content #zuka-accessibility menu menuitem figure label[for=font-content] {
  background: #607d8b;
  color: white;
}
.font-content #zuka-accessibility menu menuitem figure label[for=font-content] input {
  color: white;
}
.font-content body {
  font-family: "arial", "sans-serif" !important;
}

.links-content #zuka-accessibility menu menuitem figure label[for=links-content] {
  background: #607d8b;
  color: white;
}
.links-content #zuka-accessibility menu menuitem figure label[for=links-content] input {
  color: white;
}
.links-content a,
.links-content .btn-main {
  color: red !important;
  text-decoration: underline !important;
}

.light-contrast #zuka-accessibility menu menuitem figure label[for=light-contrast] {
  background: #607d8b;
  color: white;
}
.light-contrast #zuka-accessibility menu menuitem figure label[for=light-contrast] input {
  color: white;
}
.light-contrast body,
.light-contrast h1,
.light-contrast h2,
.light-contrast h3 {
  color: gray !important;
}
.light-contrast img {
  -webkit-filter: grayscale(100%) !important;
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%) !important;
}
.light-contrast a {
  color: black !important;
}

.hard-contrast #zuka-accessibility menu menuitem figure label[for=hard-contrast] {
  background: #607d8b;
  color: white;
}
.hard-contrast #zuka-accessibility menu menuitem figure label[for=hard-contrast] input {
  color: white;
}
.hard-contrast body,
.hard-contrast footer,
.hard-contrast h2 {
  background: black !important;
  color: yellow !important;
}
.hard-contrast h1,
.hard-contrast button {
  color: yellow !important;
}
.hard-contrast img {
  -webkit-filter: invert(100%) !important;
  /* Safari 6.0 - 9.0 */
  filter: invert(100%) !important;
}

.large-view #zuka-accessibility menu menuitem figure label[for=large-view] {
  background: #607d8b;
  color: white;
}
.large-view #zuka-accessibility menu menuitem figure label[for=large-view] input {
  color: white;
}
.large-view body {
  zoom: 1.2;
}

.xlarge-view #zuka-accessibility menu menuitem figure label[for=xlarge-view] {
  background: #607d8b;
  color: white;
}
.xlarge-view #zuka-accessibility menu menuitem figure label[for=xlarge-view] input {
  color: white;
}
.xlarge-view body {
  zoom: 1.5;
}
.xlarge-view body #zuka-accessibility {
  zoom: 0.8;
}

/*


 ******************************
 *                            *
 *        Tzook Asraf         *      **********  **********  **********
 *    #zuka mini-Style CSS    *      *           *           *
 *                            *      *           **********  **********
 *          Version:          *      *                    *           *
 *           26.8.0           *      **********  **********  **********
 *                            *
 ******************************

*/
h1, h2, h3, h4, h5 {
  font-family: "Montserrat", sans-serif;
  text-transform: unset;
  letter-spacing: 0;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
  margin-top: inherit;
}

h1 {
  font-weight: 800;
  font-size: 30px;
  margin: 0;
  line-height: 1;
}
h1 span {
  display: block;
  font-weight: 400;
  font-size: 35px;
}

h2 {
  font-weight: 300;
  font-size: 35px;
  padding: 0 0 30px;
  margin: 0 auto;
  line-height: 1;
}
h2 span {
  font-weight: 300;
  display: block;
  margin: 5px 0;
}

h3 {
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  padding-bottom: 20px;
  line-height: 1;
}
h3 span {
  font-weight: 400;
  font-size: 20px;
  display: block;
}

h4 {
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  margin: 5px 0;
}
h4 span {
  display: block;
  font-weight: 400;
  font-size: 14px;
}

h5 {
  font-weight: 300;
  font-size: 16px;
  margin: 0;
  line-height: 1;
}

h6 {
  font-weight: 300;
  font-size: 15px;
  margin: 10px 0;
}

p {
  line-height: 1.3;
}

b {
  font-weight: 600;
}

strong {
  font-weight: 800;
}

blockquote {
  display: inline-table;
  margin: 20px 0;
  font-weight: 600;
}

::-moz-selection {
  background: #beefde;
}

::selection {
  background: #beefde;
}

body {
  direction: ltr;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #3e3c3d;
  letter-spacing: 0;
}

header {
  z-index: 26081986;
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  background: white;
}

address {
  font-style: normal;
}

section {
  padding: 0;
  outline: none;
}

figure {
  display: flex;
}

a[data-target=link] {
  text-decoration: underline;
  color: #00b17c;
}
a[data-target=link]:hover {
  color: #4bc0c0;
}

svg {
  height: 100%;
}

button {
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  direction: inherit;
  color: inherit;
  white-space: nowrap;
  padding: 5px;
  background: transparent;
}

.wrapper {
  max-width: 1900px;
  padding: 0 50px;
  margin: auto;
}

.screen-reader-text {
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  word-wrap: normal !important;
}

svg.pi {
  height: 25px;
}

.alert-msg {
  padding: 15px;
  font-size: 12px;
  align-items: center;
}
.alert-msg .pi {
  height: 15px;
  margin-right: 10px;
}

.warning {
  background: #00b17c;
  color: #00b4d6;
}

.form-field label {
  display: inline-block;
  margin: 2px 0 5px;
}
.form-field input,
.form-field select {
  height: 35px;
  text-indent: 15px;
  border-radius: 10px;
  border: 1px solid #efefef;
}
.form-field input[type=date] {
  padding-right: 15px;
  text-indent: 8px;
}

.two-layers-field {
  position: relative;
}
.two-layers-field .radio-set {
  margin-right: 25px;
}
.two-layers-field .calendar-btn-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  overflow: hidden;
  background: #424040;
  padding: 5px 0;
  z-index: 2;
  align-items: baseline;
  height: 47px;
}
.two-layers-field .calendar-btn-toggle > figure {
  width: calc(100% - 25px);
  pointer-events: none;
  opacity: 0;
  flex-direction: column;
}
.two-layers-field .calendar-btn-toggle input {
  text-indent: 5px;
  border-radius: 5px;
  margin-right: 2px;
  background: transparent;
  border-color: #838383;
  color: white;
  margin-bottom: 8px;
}
.two-layers-field .calendar-btn-toggle input[type=submit] {
  text-indent: 0;
  width: 55px;
  color: white;
  background: #00b4d6;
  border-color: #00b4d6;
}
.two-layers-field .calendar-btn-toggle .calendar-btn {
  color: #00b4d6;
  width: 25px;
}
.two-layers-field .calendar-btn-toggle .calendar-btn .fa-times {
  display: none;
}

.calendarDateOpen .calendar-btn-toggle {
  width: calc(100% + 20px);
  padding: 5px 0 5px 20px;
  border-radius: 0 0 15px 0;
  height: auto;
}
.calendarDateOpen .calendar-btn-toggle > figure {
  pointer-events: all;
  opacity: 1;
}
.calendarDateOpen .calendar-btn-toggle .calendar-btn .fa-calendar-alt {
  display: none;
}
.calendarDateOpen .calendar-btn-toggle .calendar-btn .fa-times {
  display: inline-block;
}

.multi-inputs > figure {
  gap: 5px;
}
.multi-inputs .time-range {
  align-items: center;
}
.multi-inputs .time-range input {
  width: 75px;
}
.multi-inputs .time-range label {
  position: relative;
  text-align: center;
}
.multi-inputs .time-range label small {
  position: absolute;
  margin: auto;
  top: 100%;
  right: 0;
  left: 0;
}

.horizontal-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkbox-field .checkbox-set label {
  cursor: pointer;
}
.checkbox-field .checkbox-set label .like-an-input {
  width: 24px;
  height: 23px;
  text-indent: 0;
  border-radius: 5px;
  border: 1px solid #838383;
  background: #545152;
  display: inline-block;
  vertical-align: baseline;
  margin-right: 2px;
}
.checkbox-field .checkbox-set label .like-an-input i {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 2px;
  opacity: 0;
}
.checkbox-field .checkbox-set input {
  display: none;
}
.checkbox-field .checkbox-set input:checked ~ .like-an-input i {
  opacity: 1;
  color: #00b4d6;
}
.checkbox-field .toggle-checkbox {
  border: 1px solid #efefef;
  border-radius: 50px;
  width: 40px;
}
.checkbox-field .toggle-checkbox i {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 50px;
  padding-right: 2px;
  margin: 0 20px 0 0;
}
.checkbox-field .toggle-checkbox input {
  display: none;
}
.checkbox-field .toggle-checkbox input:checked ~ i {
  margin: 0 0 0 20px;
  background: #00b4d6;
  border-color: #00b4d6;
  color: white;
}

.search-field {
  display: flex;
  align-items: center;
}
.search-field label button {
  padding: 0;
}
.search-field label button .pi {
  height: 20px;
}

.select-field .select {
  position: relative;
}
.select-field .select:after {
  content: "❯";
  position: absolute;
  right: 15px;
  top: 10px;
  transform: rotate(90deg);
}
.select-field .select select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.radio-field label {
  cursor: pointer;
}
.radio-field input[type=radio] {
  display: none;
}
.radio-field .radio-set label {
  flex-grow: 1;
}
.radio-field .radio-set label span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid #efefef;
  text-align: center;
  line-height: 1;
}
.radio-field .radio-set label:first-child span {
  border-radius: 7px 0 0 7px;
}
.radio-field .radio-set label:last-child span {
  border-radius: 0 7px 7px 0;
}
.radio-field .radio-set label input:checked + span {
  background: #00b4d6;
  color: white;
}
.radio-field .radio-set label input:checked + span .pi {
  fill: white;
}
.radio-field li {
  border: 1px solid #00b17c;
  padding: 0 8px;
}
.radio-field li:first-child, .radio-field li:last-child {
  border: none;
}

.extent-field {
  position: relative;
  overflow: hidden;
}
.extent-field > .btn {
  min-width: 145px;
}
.extent-field > .btn:hover {
  background: rgba(255, 255, 255, 0.3);
}
.extent-field .extend-menu {
  position: absolute;
  align-items: center;
  justify-content: center;
  background: #beefde;
  top: 0;
  right: -100%;
  height: 100%;
  width: 100%;
}
.extent-field .extend-menu svg {
  pointer-events: none;
  height: 14px;
}
.extent-field .extend-menu label {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.extent-field .extend-menu label > button {
  border: 1px solid;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.extent-field .extend-menu label input {
  width: 32px;
  height: 32px;
  text-align: center;
  text-indent: 0;
  font-weight: 600;
  margin: 0 2px;
}
.extent-field .extend-menu button {
  display: flex;
}
.extent-field .extend-menu button[name=cancel] svg {
  transform: scale(0.8);
}
.extent-field .extendMenuOpen {
  right: 0;
}

.darken-form .form-field label {
  color: #00b4d6;
}
.darken-form .form-field input, .darken-form .form-field select {
  border: 1px solid #838383;
  background: #545152;
  color: white;
}
.darken-form .radio-field .radio-set label {
  color: white;
}
.darken-form .radio-field .radio-set label span {
  border: 1px solid #838383;
}
.darken-form .radio-field .radio-set label input:checked + span {
  background: #918c8e;
}
.darken-form .checkbox-field .checkbox-set label {
  color: white;
}

.phinergy-app .a-btn {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 25px;
  border-radius: 10px;
  border: 1px solid #00b17c;
  white-space: nowrap;
}
.phinergy-app .a-btn:hover {
  background: #beefde;
}
.phinergy-app .a-primary {
  background: #00b4d6;
  color: white;
}
.phinergy-app .a-primary:hover {
  color: #00b4d6;
}

.btn {
  margin: 0;
  padding: 8px 20px;
  border-radius: 5px;
  border: 1px solid;
  white-space: nowrap;
}
.btn:hover {
  background: #E0E0E0;
}

.btn-primary {
  border-color: #00b4d6;
}
.btn-primary:hover {
  background: #00b4d6;
  color: white;
}

.btn-fill {
  border-color: #00b4d6;
  background: #00b4d6;
  color: white;
}
.btn-fill:hover {
  background: #8ddeed;
  color: white;
}

.btn-like-link {
  border: none;
  background: transparent;
}
.btn-like-link:hover {
  background: transparent;
  text-decoration: underline;
}

.btn-delete {
  background: transparent;
  color: #E53A35;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  padding: 0;
}
.btn-delete:hover {
  background: #FFCDD2;
  color: #E53A35;
}

.mobile-view {
  display: none;
}

.app-header {
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 80px;
}
.app-header .logo {
  height: 40px;
  transform: translateY(-1px);
}
.app-header i {
  font-size: 20px;
}
.app-header nav {
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 auto 0 50px;
}
.app-header nav button {
  display: none;
}
.app-header nav ul {
  display: flex;
  align-items: center;
}
.app-header nav ul li {
  height: 50px;
  padding: 30px 15px 0;
  border-left: 1px solid #efefef;
  min-width: 140px;
}
.app-header nav ul li a {
  white-space: nowrap;
}
.app-header nav ul .currentPage a {
  font-weight: 600;
}
.app-header .actions-toggle {
  display: none;
}
.app-header .station-action {
  align-items: center;
}
.app-header .station-action form {
  margin-right: 20px;
}
.app-header .user-area {
  margin-left: 20px;
}
.app-header .user-area .notification-btn {
  position: relative;
  margin: 0 15px;
}
.app-header .user-area .notification-btn i {
  font-size: 25px;
}
.app-header .user-area .notification-btn span {
  background: #E53A35;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  position: absolute;
  bottom: 3px;
  right: -3px;
}
.app-header .user-area .user-profile {
  display: flex;
  align-items: center;
  background: transparent;
}
.app-header .user-area .user-profile .pi {
  margin-right: 10px;
}
.app-header .user-area .user-profile:hover {
  background: #beefde;
}
.app-header .logo-wl {
  margin-left: 15px;
}

.drop-menu-user {
  position: relative;
}
.drop-menu-user .menu-user {
  position: absolute;
  top: 140%;
  left: -15%;
  width: 160%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.33);
  background: white;
  border-radius: 10px;
  padding: 20px;
  display: none;
}
.drop-menu-user .menu-user:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: calc(50% + 3px);
  bottom: 100%;
  margin-left: -9px;
  border: 6px solid transparent;
  border-bottom-color: white;
}
.drop-menu-user .menu-user i {
  margin: 0 10px 10px 0;
}

.menuUserOpen .menu-user {
  display: block;
}

.main-page {
  height: 100vh;
  padding: 80px 15px 15px;
}

.aside-panel-layout {
  display: flex;
  height: 100%;
}
.aside-panel-layout .filters-panel {
  width: 40px;
}
.aside-panel-layout .main-area {
  width: calc(100% - 40px);
}

.panelIsOpen .filters-panel {
  width: 350px;
}
.panelIsOpen .main-area {
  width: calc(100% - 350px);
}

.filters-panel {
  color: white;
  background: #545152;
  position: relative;
}
.filters-panel:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #545152;
  z-index: 26;
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease;
}
.filters-panel .pi-filter {
  position: absolute;
  top: 28px;
  right: 10px;
  height: 20px;
  fill: #00b4d6;
  opacity: 1;
  visibility: visible;
  z-index: 27;
}
.filters-panel .pi-filter circle {
  fill: transparent;
}
.filters-panel .indicator-on circle {
  fill: #E53A35;
}
.filters-panel .btn-sidebar {
  position: absolute;
  right: -34px;
  width: 35px;
  height: 40px;
  border-radius: 0 10px 10px 0;
  top: 19px;
  background: #545152;
  border: none;
  z-index: 5;
}
.filters-panel .btn-sidebar .pi {
  height: 18px;
  transform: scale(-1);
  fill: white;
}
.filters-panel .filters-area {
  height: 100%;
  overflow: hidden;
}
.filters-panel .filters-area > section {
  padding: 20px;
}
.filters-panel .filters-area > section > p .pi {
  fill: white;
  height: 9px;
}
.filters-panel .filters-area .checkbox-field .checkbox-set input:checked ~ .like-an-input i {
  opacity: 1;
  color: white;
}
.filters-panel .filters-area .top-panel {
  background: #424040;
}
.filters-panel .filters-area .filter-by {
  background: #424040;
  padding: 20px 40px 20px 20px;
  height: 80px;
}
.filters-panel .filters-area .filter-by .search-field {
  padding: 0;
  border-bottom: 1px solid white;
}
.filters-panel .filters-area .filter-by .search-field input {
  background: transparent;
  border: none;
  padding: 0;
  text-indent: 0;
}
.filters-panel .filters-area .filter-by .search-field input::-webkit-input-placeholder {
  /* Edge */
  color: white;
}
.filters-panel .filters-area .filter-by .search-field input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}
.filters-panel .filters-area .filter-by .search-field input::placeholder {
  color: white;
}
.filters-panel .filters-area .filter-by .search-field label {
  margin: 0;
}
.filters-panel .filters-area .filter-by .search-field label button .pi {
  margin-top: 5px;
  height: 20px;
  fill: white;
}
.filters-panel .filters-area .filters-title {
  opacity: 0;
  padding: 15px 40px 5px 20px;
}
.filters-panel .filters-area .select-recent-filter {
  position: relative;
  height: 46px;
}
.filters-panel .filters-area .select-recent-filter button .pi {
  fill: white;
  height: 9px;
}
.filters-panel .filters-area .select-recent-filter .filter-list-drop {
  height: 26px;
  overflow: hidden;
  width: 83%;
  z-index: 1;
}
.filters-panel .filters-area .select-recent-filter .filter-list-drop ul {
  padding: 5px 0 13px;
}
.filters-panel .filters-area .select-recent-filter .filter-list-drop ul li {
  display: flex;
  justify-content: space-between;
}
.filters-panel .filters-area .select-recent-filter .filter-list-drop ul li > button {
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filters-panel .filters-area .select-recent-filter .filter-list-drop ul li .action-buttons {
  display: none;
}
.filters-panel .filters-area .select-recent-filter .filter-list-drop ul li:hover .action-buttons {
  display: flex;
}
.filters-panel .filters-area .selectDropOpen .filter-list-drop {
  position: absolute;
  height: auto;
  overflow: visible;
  width: 90%;
  padding: 0 10px 10px;
  border-radius: 6px;
  background: #545152;
  box-shadow: 0 0 15px #232222;
}
.filters-panel .filters-area .selectDropOpen button:focus {
  outline: none;
  border: 1px dashed transparent;
}
.filters-panel .filters-area .selectDropOpen .toggle-menu-btn {
  color: #00b4d6;
}
.filters-panel .filters-area .selectDropOpen .toggle-menu-btn .pi {
  fill: #00b4d6;
  transform: scale(-1);
}
.filters-panel .filters-area .recent-filters {
  opacity: 0;
  height: calc(100% - 200px);
  overflow-y: scroll;
  padding: 0 20px;
  margin: 0 17px 0 3px;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.filters-panel .filters-area .recent-filters .btns-action {
  background: #424040;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 5px;
  text-align: center;
}
.filters-panel .filters-area .recent-filters .btns-action .btn {
  margin: 0 3px;
}
.filters-panel .filters-area .recent-filters::-webkit-scrollbar {
  width: 4px;
  cursor: pointer;
}
.filters-panel .filters-area .recent-filters::-webkit-scrollbar-track {
  background: #424040;
  border: 1px solid #545152;
}
.filters-panel .filters-area .recent-filters::-webkit-scrollbar-thumb {
  background: #918c8e;
  border-radius: 20px;
}
.filters-panel .filters-area .recent-filters::-webkit-scrollbar-thumb:hover {
  background: #959595;
}
.filters-panel .filters-area .form-aside-list li {
  padding: 20px 0;
  border-bottom: 1px solid #424040;
}
.filters-panel .filters-area .fields-inline {
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
}
.filters-panel .filters-area .fields-inline p {
  margin: 0 5px;
}
.filters-panel .filters-area .fields-inline .select {
  flex-grow: 1;
}
.filters-panel .filters-area .city .inputs {
  display: none;
}
.filters-panel .filters-area .coordinates .inputs {
  min-height: 32px;
  gap: 5px;
}
.filters-panel .filters-area .coordinates .select {
  display: none;
}

.aside-content-layout {
  display: flex;
  height: 100%;
}
.aside-content-layout > aside {
  width: 25%;
  min-width: 300px;
  max-width: 380px;
}
.aside-content-layout > main {
  overflow: auto;
  width: 90%;
  padding-left: 40px;
}

.card-section {
  background: white;
  box-shadow: 0 0 5px #e0e0e0;
  border-radius: 10px;
  margin-bottom: 30px;
  padding: 40px;
}

.cono-list span {
  width: calc( 100% / 5 - 35px);
  padding: 10px 15px;
  flex-grow: 1;
}
.cono-list .table-btn {
  width: 35px;
  padding: 0;
  flex-grow: unset;
}
.cono-list .table-btn i {
  cursor: pointer;
  padding: 10px 5px;
}
.cono-list .table-btn i:hover {
  background: rgba(75, 192, 192, 0.2);
  color: #4bc0c0;
}
.cono-list .header-list {
  background: #00b4d6;
  border-radius: 6px;
  overflow: hidden;
  font-weight: 600;
  cursor: pointer;
}
.cono-list .header-list .table-btn {
  visibility: hidden;
}
.cono-list .header-list span:hover {
  background: rgba(75, 192, 192, 0.2);
}
.cono-list .header-list .asc {
  position: relative;
  color: #4bc0c0;
}
.cono-list .header-list .asc:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #4bc0c0;
  position: absolute;
  top: 17px;
  right: 5px;
}
.cono-list .header-list .desc {
  position: relative;
  color: #4bc0c0;
}
.cono-list .header-list .desc:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #4bc0c0;
  position: absolute;
  top: 17px;
  right: 5px;
}
.cono-list .chart-el {
  height: 0;
  padding: 0;
  overflow: hidden;
}
.cono-list .chart-el .chartjs-render-monitor {
  margin: auto;
}
.cono-list .open-chart {
  height: 25vw;
  padding: 20px 0;
}
.cono-list ul li {
  border-top: 1px solid #efefef;
  padding: 20px 0;
}
.cono-list ul li figure {
  align-items: center;
}

.chart-box {
  position: relative;
  padding-left: 30px;
}
.chart-box .y-axis {
  transform: rotate(-90deg);
  position: absolute;
  left: 0;
  bottom: 25%;
  width: 0;
  height: 0;
  text-align: center;
  white-space: nowrap;
  font-size: 25px;
}

.chart-box .y-axis-small {
  transform: rotate(-90deg);
  position: absolute;
  left: 0;
  bottom: 25%;
  width: 0;
  height: 0;
  text-align: center;
  white-space: nowrap;
  font-size: 20px;
}

.chart-box .x-axis {
  text-align: center;
}
.chart-box .p-chart {
  justify-content: center;
  height: 100%;
  min-height: 230px;
}
.chart-box .p-chart > figure {
  justify-content: flex-end;
  flex-direction: column;
  padding: 30px 0;
  flex-grow: 1;
  text-align: center;
  position: relative;
}
.chart-box .p-chart > figure b {
  font-weight: 300;
  height: 30px;
  padding-top: 5px;
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid black;
}
.chart-box .p-chart .the-col {
  position: relative;
  background: #00b4d6;
  border-radius: 6px 6px 0 0;
  margin: 0 6px;
}
.chart-box .p-chart .the-col strong {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
}

.horizontal-chart-box .title {
  margin: 20px 0 35px;
}
.horizontal-chart-box .title label {
  width: 80px;
}
.horizontal-chart-box .p-chart > figure {
  padding: 0 80px;
  position: relative;
  align-items: center;
}
.horizontal-chart-box .p-chart > figure label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 80px;
  padding-top: 11px;
  border-right: 1px solid black;
}
.horizontal-chart-box .p-chart .the-col {
  position: relative;
  background: #00b4d6;
  height: 30px;
  margin: 6px 0;
  border-radius: 0 6px 6px 0;
}
.horizontal-chart-box .p-chart .the-col strong {
  position: absolute;
  top: 6px;
  left: calc(100% + 10px);
  white-space: nowrap;
}

.events-list-page {
  padding: 80px 0 0;
}
.events-list-page .events-list-main-area {
  background: #F7F7F7;
  padding: 20px 20px 20px 50px;
  overflow: auto;
}
.events-list-page .filters-area h3 {
  color: #00b4d6;
  font-weight: 400;
  font-size: 18px;
  padding-bottom: 5px;
}
.events-list-page .filters-area .toggle-checkbox i {
  background: #cbcbcb;
  border-color: #cbcbcb;
}
.events-list-page .filters-area .recent-filters {
  height: calc(100% - 345px);
  padding: 30px 20px 80px;
}
.events-list-page .filters-area .select-recent-filter {
  position: relative;
  height: 26px;
  top: 8px;
}
.events-list-page .filters-area .Events-type-list {
  border-bottom: 1px solid #424040;
}
.events-list-page .filters-area .Events-type-list ul li {
  padding: 8px 0;
  border-bottom: 1px solid gray;
}
.events-list-page .filters-area .Events-type-list ul li:last-child {
  border-bottom: none;
}
.events-list-page .filters-area .Events-type-list ul li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.events-list-page .filters-area .Events-type-list ul li button span {
  margin: 0 10px 0 auto;
  min-width: 36px;
}
.events-list-page .filters-area .Events-type-list ul li button span i {
  margin-right: 5px;
  color: #E53A35;
}
.events-list-page .filters-area .Events-type-list ul li button .pi {
  height: 13px;
  transform: rotate(-90deg);
  fill: white;
}
.events-list-page .filters-area .Events-type-list ul li .positive-data i {
  transform: scale(-1);
  color: #66BB6A;
}
.events-list-page .filters-area .Events-type-list ul li .currentData {
  font-weight: 600;
}
.events-list-page .filters-area .darken-form .form-field label {
  color: white;
}
.events-list-page .charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  grid-auto-flow: dense;
}
.events-list-page .charts-grid .card-section {
  padding: 25px 20px 10px;
  margin: 0;
}
.events-list-page .charts-grid .card-section h3 {
  font-weight: 300;
  font-size: 22px;
}

.station-data {
  background: #F7F7F7;
  padding: 120px 40px 10px;
}
.station-data time {
  display: flex;
  margin-left: 10px;
  align-items: baseline;
}
.station-data time span {
  font-size: 13px;
  background: #3e3c3d;
  color: white;
  margin: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 5px;
}
.station-data .station-details {
  background: white;
  box-shadow: 0 0 5px #e0e0e0;
  border-radius: 10px;
  height: 100%;
}
.station-data .station-details .scroll-content {
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.station-data .station-details .scroll-content > section {
  overflow-y: scroll;
  margin: 10px 5px 65px;
  /* width */
  /* Handle */
  /* Track */
  /* Handle on hover */
}
.station-data .station-details .scroll-content > section::-webkit-scrollbar {
  width: 4px;
  cursor: pointer;
}
.station-data .station-details .scroll-content > section::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 20px;
}
.station-data .station-details .scroll-content > section::-webkit-scrollbar-track {
  background: #dadada;
  border: 1px solid white;
}
.station-data .station-details .scroll-content > section::-webkit-scrollbar-thumb:hover {
  background: #959595;
}
.station-data .station-details .station-info {
  padding: 25px;
  background: #F7F7F7;
}
.station-data .station-details .station-info h1 {
  font-size: 25px;
  font-weight: 300;
  padding: 0;
}
.station-data .station-details .station-info .station-status {
  padding: 20px 0;
  font-size: 16px;
  align-items: center;
}
.station-data .station-details .station-info .station-status i {
  margin-right: 10px;
}
.station-data .station-details .station-info .station-status .Active i {
  color: #FCB316;
}
.station-data .station-details .station-info .btn {
  width: 100%;
  padding: 8px;
}
.station-data .station-details .station-info .btn .pi {
  height: 10px;
  transform: rotate(-90deg);
}
.station-data .station-details .information-list {
  padding: 10px 25px 70px;
}
.station-data .station-details .information-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-bottom: 1px solid #efefef;
}
.station-data .station-details .information-list li p {
  white-space: nowrap;
  padding-left: 10px;
}
.station-data .station-details .edit-info {
  padding: 10px 25px 100px;
}
.station-data .station-details .edit-info li {
  padding: 20px 0;
  border-bottom: 1px solid #efefef;
}
.station-data .station-details .btns-action {
  background: white;
  padding: 15px 40px;
  position: absolute;
  width: 100%;
  bottom: 0;
}
.station-data .station-details .btns-action .btn {
  width: 100%;
}
.station-data .backup-time-section {
  position: relative;
}
.station-data .backup-time-section .callCenter-tooltip {
  position: absolute;
  top: 30px;
  right: 40px;
  padding: 10px 20px;
  border-radius: 6px;
  background: #F7F7F7;
  font-size: 16px;
}
.station-data .backup-time-section .callCenter-tooltip:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #F7F7F7 transparent transparent transparent;
}
.station-data .backup-time-section .callCenter-tooltip .pi {
  height: 15px;
  margin: 0 5px;
  transform: translate(3px, 2px);
}
.station-data .backup-time-section .backup-times-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  grid-auto-flow: dense;
}
.station-data .backup-time-section .backup-times-list li {
  background: #beefde;
  grid-column-end: span 2;
  display: flex;
  align-items: center;
  padding: 20px 25px;
  border-radius: 10px;
  font-size: 16px;
}
.station-data .backup-time-section .backup-times-list li > p {
  margin: 0 auto 0 15px;
}
.station-data .backup-time-section .backup-times-list li > .btn {
  padding: 2px 5px;
  font-size: 13px;
}
.station-data .backup-time-section .backup-times-list .row-full {
  grid-column-end: span 2;
  grid-row-end: span 3;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: #F7F7F7;
}
.station-data .backup-time-section .backup-times-list .row-full .icon {
  position: relative;
}
.station-data .backup-time-section .backup-times-list .row-full .icon .pi {
  height: 50px;
}
.station-data .backup-time-section .backup-times-list .row-full .icon i {
  position: absolute;
  font-size: 20px;
  background: #F7F7F7;
  padding: 2px;
  right: -7px;
  bottom: -7px;
}
.station-data .backup-time-section .backup-times-list .row-full > b {
  font-size: 30px;
  margin: 5px 0 0;
}
.station-data .backup-time-section .backup-times-list .row-full > p {
  margin: 0 auto;
}
.station-data .backup-time-section .backup-times-list .row-full .alert-msg {
  position: absolute;
  bottom: 0;
}
.station-data .backup-time-section .backup-times-list .bg-lb {
  background: #8ddeed;
}
.station-data .backup-time-section .backup-times-list .bg-lb .icon i {
  background: #8ddeed;
}
.station-data .backup-time-section .backup-times-list .col-2 {
  grid-column-end: span 2;
}
.station-data .backup-time-section .battery-bar-capacity {
  padding: 60px 0;
}
.station-data .backup-time-section .battery-bar-capacity .unit {
  flex-direction: column;
  overflow: hidden;
}
.station-data .backup-time-section .battery-bar-capacity .unit:first-child .process-bar {
  border-radius: 10px 0 0 10px;
}
.station-data .backup-time-section .battery-bar-capacity .unit:last-child b {
  visibility: hidden;
}
.station-data .backup-time-section .battery-bar-capacity .unit:last-child .process-bar {
  border-radius: 0 10px 10px 0;
}
.station-data .backup-time-section .battery-bar-capacity .unit b {
  text-align: center;
  border-bottom: 2px solid #00b17c;
  padding-bottom: 10px;
  margin: 0 2px 10px;
  position: relative;
}
.station-data .backup-time-section .battery-bar-capacity .unit b:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  margin-top: 0;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: #00b17c;
}
.station-data .backup-time-section .battery-bar-capacity .unit .process-bar {
  height: 40px;
  border: 1px solid #efefef;
  margin: 5px 0;
}
.station-data .backup-time-section .battery-bar-capacity .unit .process-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background-color: #beefde;
  background: repeating-linear-gradient(-45deg, #b2e8d5, #b2e8d5 2px, #beefde 2px, #beefde 5px);
}
.station-data .backup-time-section .battery-bar-capacity .unit small {
  margin-left: auto;
  font-weight: 800;
}
.station-data .backup-time-section .battery-bar-capacity .lightBlue-unit b {
  border-bottom: 2px solid #00b4d6;
}
.station-data .backup-time-section .battery-bar-capacity .lightBlue-unit b:before {
  border-top-color: #00b4d6;
}
.station-data .backup-time-section .battery-bar-capacity .lightBlue-unit .process-bar i {
  background-color: #8ddeed;
  background: repeating-linear-gradient(-45deg, #87d3e0, #87d3e0 2px, #8ddeed 2px, #8ddeed 5px);
}
.station-data .backup-time-section .remaining-time {
  background: #F7F7F7;
  padding: 20px 40px;
  border-radius: 10px;
}
.station-data .backup-time-section .remaining-time > figure {
  align-items: center;
  flex-wrap: wrap;
}
.station-data .backup-time-section .remaining-time time span {
  background: #8ddeed;
  color: #3e3c3d;
  font-weight: 600;
  font-size: 18px;
  width: 32px;
  height: 30px;
}
.station-data .backup-time-section .remaining-time .alert-msg {
  margin-left: auto;
}
.station-data .backup-time-section .remaining-time .alert-msg .pi {
  fill: gray;
  height: 20px;
}
.station-data .backup-time-section .remaining-time .btn {
  line-height: 1;
}
.station-data .backup-time-section .remaining-time .extent-field .extend-menu {
  background: #F7F7F7;
}
.station-data .backup-time-section .remaining-time .extent-field .extend-menu label input {
  background: black;
  color: white;
}
.station-data .events-section > figure {
  gap: 10px;
}
.station-data .events-section > figure .card-section {
  width: 50%;
  box-shadow: none;
  border: 1px solid #efefef;
  padding: 30px;
}
.station-data .events-section .filters-area {
  flex-wrap: wrap;
  padding: 0 0 30px;
}
.station-data .events-section .radio-field {
  display: flex;
  align-items: center;
}
.station-data .events-section .radio-field label {
  margin: 0;
}
.station-data .events-section .radio-field label span {
  padding: 7px 10px;
}
.station-data .events-section .radio-field .radio-set {
  margin: 0 10px;
}
.station-data .events-section .fa-calendar-alt {
  color: #00b4d6;
}
.station-data .events-section .btns-action {
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.station-data .events-section .btns-action .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 5px;
  flex-grow: 1;
  border-color: #E0E0E0;
}
.station-data .events-section .btns-action .btn span {
  color: #E53A35;
  margin-left: 10px;
}
.station-data .events-section .btns-action .btn span i {
  margin: 0 5px 0 0;
}
.station-data .events-section .btns-action .positive span {
  color: #66BB6A;
}
.station-data .events-section .btns-action .positive span i {
  transform: rotate(180deg);
}

.dashboard-page {
  padding: 80px 0 0;
}
.dashboard-page .map-element {
  height: calc(100% - 80px);
  overflow: scroll;
  overflow-x: hidden;
}
.dashboard-page .map-element i {
  position: absolute;
  border-radius: 50px;
  height: 20px;
  width: 20px;
  z-index: 2;
  cursor: pointer;
}
.dashboard-page .map-element .the-map {
  width: 100%;
}
.dashboard-page .dashboard-main-area {
  position: relative;
  width: calc(100% - 40px);
}
.dashboard-page .map-dashboard-area .menu-bar {
  background: #E0E0E0;
  height: 80px;
}
.dashboard-page .map-dashboard-area .menu-bar .topics {
  padding: 0 20px;
  height: 100%;
}
.dashboard-page .map-dashboard-area .menu-bar .topics > figure {
  justify-content: center;
  align-items: center;
  padding: 0 30px;
  border-left: 1px solid white;
  opacity: 1;
}
.dashboard-page .map-dashboard-area .menu-bar .topics > figure:first-child {
  border-left: none;
}
.dashboard-page .map-dashboard-area .menu-bar .topics > figure img {
  margin-left: 20px;
}
.dashboard-page .map-dashboard-area .menu-bar .topics > figure a {
  font-weight: 300;
  display: block;
  margin-top: 5px;
  font-size: 13px;
}
.dashboard-page .map-dashboard-area .menu-bar .topics > figure a .pi {
  height: 9px;
}
.dashboard-page .map-dashboard-area .menu-bar .topics > figure > b {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 0.8;
  padding: 10px;
  margin: 10px 10px auto;
  color: #00b4d6;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .deprecation {
  position: relative;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .deprecation .drop-list {
  position: absolute;
  top: 100%;
  width: 100%;
  background: #E0E0E0;
  z-index: 3;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 6px grey;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .deprecation .drop-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 30px;
  border-top: 1px solid white;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .deprecation .drop-list li b {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 0.8;
  padding: 10px;
  margin: 10px 10px auto;
  color: #00b4d6;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field {
  display: flex;
  align-items: center;
  background: transparent;
  position: absolute;
  right: 30px;
  z-index: 5;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field h4 {
  margin-right: 10px;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field .radio-set label {
  transition: none;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field .radio-set label span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-color: #545152;
  transition: none;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field .radio-set label span .pi {
  height: 20px;
  fill: #545152;
  transition: none;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field .radio-set label span .pi path {
  transition: none;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field .radio-set label:first-child span {
  border-radius: 6px 0 0 6px;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field .radio-set label:last-child span {
  border-radius: 0 6px 6px 0;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field .radio-set label input:checked + span {
  background: #545152;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field .radio-set label input:checked + span .pi {
  fill: white;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .backup-bars {
  position: relative;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .backup-bars .rotate {
  position: absolute;
  left: 4px;
  top: 20px;
  transform: rotate(-90deg);
  line-height: 1;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .backup-bars ul {
  display: flex;
  align-items: flex-end;
  height: 50px;
  padding-right: 5px;
  border-bottom: 1px solid;
  margin-left: 35px;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .backup-bars ul li {
  width: 10px;
  margin: 0 1px;
  background: #00b4d6;
  border-radius: 6px 6px 0 0;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .station-status-info ul {
  display: flex;
  align-self: flex-end;
  padding: 13px 0;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .station-status-info ul li {
  padding: 0 15px;
  text-align: center;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .station-status-info ul li b {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .station-status-info .status-bars {
  height: 100%;
  margin-left: 25px;
  position: relative;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .station-status-info .status-bars:before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  border-top: 1px solid;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .station-status-info .status-bars li {
  display: flex;
  flex-direction: column;
  padding: 0 5px;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .station-status-info .status-bars li b {
  margin-top: auto;
  border-radius: 6px 6px 0 0;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .station-status-info .status-bars li small {
  padding-top: 5px;
}
.dashboard-page .map-dashboard-area .menu-bar .topics .radio-field span {
  border: 1px solid;
}
.dashboard-page .map-dashboard-area .events-bar {
  background: white;
  box-shadow: 0 0 5px #e0e0e0;
  border-radius: 10px;
  border-radius: 10px;
  width: calc(100% - 60px);
  margin: auto;
  padding: 10px 30px;
  position: absolute;
  left: 30px;
  bottom: 30px;
  text-align: center;
  z-index: 6;
}
.dashboard-page .map-dashboard-area .events-bar .title-bar {
  justify-content: space-between;
}
.dashboard-page .map-dashboard-area .events-bar .title-bar h5 {
  font-size: 13px;
  margin: auto;
}
.dashboard-page .map-dashboard-area .events-bar .title-bar .a-primary {
  padding: 2px 5px;
}
.dashboard-page .map-dashboard-area .events-bar .title-bar .a-primary:hover {
  background: #00b4d6;
  color: white;
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar {
  direction: rtl;
  align-items: center;
  position: relative;
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar > button {
  position: absolute;
  right: -30px;
  top: 13px;
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar > button svg {
  height: 15px;
  pointer-events: none;
  transform: rotate(-90deg);
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar > button[name=next] {
  right: unset;
  left: -30px;
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar > button[name=next] svg {
  transform: rotate(90deg);
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar > figure {
  direction: ltr;
  width: 100%;
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar > figure > div {
  width: 120px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-grow: 1;
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar > figure > div b {
  margin-top: auto;
  position: relative;
  color: #00b4d6;
  border-top: 1px solid #E0E0E0;
  padding-top: 4px;
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar > figure > div b:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 1px;
  background: #E0E0E0;
  top: -20px;
  left: 0;
  right: 0;
  margin: auto;
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar figure div {
  position: relative;
}
.dashboard-page .map-dashboard-area .events-bar .history-events-bar figure div i {
  background: #3e3c3d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-size: 9px;
  height: 14px;
  width: 14px;
  cursor: pointer;
}
.dashboard-page .map-list-area {
  padding: 20px 30px 20px 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F7F7F7;
  z-index: 4;
  display: none;
}
.dashboard-page .map-list-area .station-list {
  overflow: auto;
  max-height: calc(100% - 65px);
}
.dashboard-page .map-list-area .station-list ul li {
  padding: 5px 0;
}
.dashboard-page .map-list-area .station-list .checkbox-field .checkbox-set label {
  margin: 0;
}
.dashboard-page .map-list-area .station-list .checkbox-field .checkbox-set label .like-an-input {
  background: transparent;
  border-color: white;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
}
.dashboard-page .map-list-area .station-list .checkbox-field .checkbox-set label input:checked ~ .like-an-input i {
  color: white;
}
.dashboard-page .map-list-area .station-list .header-list {
  color: white;
  align-items: center;
}
.dashboard-page .map-list-area .station-list span {
  width: calc( 100% / 10);
  padding: 10px;
}
.dashboard-page .map-list-area .station-list .row-index {
  width: 38px;
}
.dashboard-page .map-list-area .station-list .stationName {
  min-width: 80px;
  max-width: 120px;
}
.dashboard-page .map-list-area .station-list .stationID {
  min-width: 80px;
  max-width: 100px;
}
.dashboard-page .map-list-area .station-list .location {
  min-width: 120px;
}
.dashboard-page .map-list-area .station-list .grouptd {
  min-width: 100px;
  max-width: 130px;
}
.dashboard-page .map-list-area .station-list .status {
  min-width: 80px;
}
.dashboard-page .map-list-area .station-list .status time span {
  padding: 3px;
  border-radius: 4px;
  background: #F7F7F7;
}
.dashboard-page .map-list-area .station-list .automaticExtend .form-field {
  display: inline-block;
}
.dashboard-page .map-list-area .station-list .automaticExtend .fa-clock {
  font-size: 15px;
  margin-left: 15px;
}
.dashboard-page .map-list-area .station-list .automaticExtend .toggle-checkbox {
  transform: scale(0.8);
  background: #d6d6d6;
}
.dashboard-page .map-list-area .station-list .automaticExtend .toggle-checkbox i {
  background: #a7a7a7;
  border-color: #a7a7a7;
  color: white;
}
.dashboard-page .map-list-area .station-list .automaticExtend .toggle-checkbox input:checked ~ i {
  background: #00b4d6;
  border-color: #00b4d6;
  color: white;
}
.dashboard-page .map-list-area .station-list .table-btn {
  width: 70px;
}
.dashboard-page .map-list-area .station-list .table-btn .pi {
  fill: #00b4d6;
  height: 14px;
  transform: rotate(-90deg) translateX(-2px);
}
.dashboard-page .map-list-area .station-list .table-btn i {
  color: #00b4d6;
}
.dashboard-page .map-list-area .station-list .list {
  background: white;
}
.dashboard-page .map-list-area .station-list .list .checkbox-field .checkbox-set label .like-an-input {
  border-color: black;
}
.dashboard-page .map-list-area .station-list .list .checkbox-field .checkbox-set label input:checked ~ .like-an-input i {
  color: black;
}
.dashboard-page .list-view .map-list-area {
  display: block;
}

.panelIsOpen .filters-panel {
  width: 350px;
}
.panelIsOpen .filters-panel:before {
  content: "";
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.2s ease;
}
.panelIsOpen .filters-panel .pi-filter {
  opacity: 0;
  visibility: hidden;
}
.panelIsOpen .filters-panel .btn-sidebar {
  background: #424040;
}
.panelIsOpen .filters-panel .btn-sidebar .pi {
  transform: scale(1);
  fill: #00b4d6;
}
.panelIsOpen .filters-panel .filters-area {
  overflow: auto;
  width: 100%;
}
.panelIsOpen .filters-panel .filters-area .filters-title {
  opacity: 1;
}
.panelIsOpen .filters-panel .filters-area .recent-filters {
  opacity: 1;
}
.panelIsOpen .dashboard-main-area {
  width: calc(100% - 350px);
}

.phinergy-app .dashboard-page .map-element .tooltip {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phinergy-app .dashboard-page .map-element .tooltip > i {
  border-radius: 50px;
  height: 18px;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phinergy-app .dashboard-page .map-element .tooltip > i svg {
  height: 12px;
  fill: white;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip {
  position: absolute;
  top: 100%;
  padding: 10px;
  display: none;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip > div {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.33);
  background: white;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  min-width: 320px;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip > div:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: calc(50% + 3px);
  bottom: 100%;
  margin-left: -9px;
  border: 6px solid transparent;
  border-bottom-color: white;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip > div div > figure:first-child {
  padding-bottom: 10px;
  border-bottom: 1px solid #efefef;
  margin-bottom: 10px;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip > div figure {
  justify-content: space-between;
  align-items: flex-start;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip > div h3 {
  color: #00b4d6;
  font-weight: 700;
  font-size: 16px;
  padding-bottom: 10px;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip > div h4 {
  white-space: nowrap;
  margin: 10px 0;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip > div h4 .pi {
  height: 15px;
  transform: translate(5px, 3px);
  fill: #E53A35;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip > div .status i {
  position: static;
  color: #54ad69;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip > div .a-btn {
  display: block;
  text-align: center;
  border-color: #00b4d6;
  margin-top: 20px;
}
.phinergy-app .dashboard-page .map-element .tooltip .the-tooltip > div .a-btn .pi {
  transform: translate(5px, 2px) rotate(-90deg);
  height: 12px;
}
.phinergy-app .dashboard-page .map-element .tooltip:hover {
  z-index: 4;
}
.phinergy-app .dashboard-page .map-element .tooltip:hover .the-tooltip {
  display: block;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip {
  display: none;
  background: white;
  box-shadow: 0 0 5px #e0e0e0;
  border-radius: 10px;
  position: absolute;
  top: calc(100% + 20px);
  left: -155px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.33);
  width: 330px;
  padding: 20px;
  font-style: normal;
  text-align: left;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom-color: white;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip div > figure:first-child {
  padding-bottom: 10px;
  border-bottom: 1px solid #efefef;
  margin-bottom: 10px;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip figure {
  justify-content: space-between;
  align-items: flex-start;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip h3 {
  color: #00b4d6;
  font-weight: 700;
  font-size: 16px;
  padding-bottom: 10px;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip h4 {
  margin: 10px 0;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip h4 .pi {
  height: 15px;
  transform: translate(5px, 3px);
  fill: #E53A35;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip .status i {
  position: static;
  color: #54ad69;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip .a-btn {
  display: block;
  text-align: center;
  border-color: #00b4d6;
  margin-top: 20px;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip .a-btn .pi {
  transform: translate(5px, 2px) rotate(-90deg);
  height: 12px;
}
.phinergy-app .dashboard-page .tooltip-hover .the-tooltip:hover {
  display: block;
}
.phinergy-app .dashboard-page .tooltip-hover:hover .the-tooltip {
  display: block;
}
.phinergy-app .dashboard-page .events-bar .history-events-bar .tooltip {
  position: absolute;
  display: flex;
  justify-content: center;
  padding: 5px;
}
.phinergy-app .dashboard-page .events-bar .history-events-bar .tooltip .the-tooltip {
  position: absolute;
  bottom: 100%;
  padding: 10px;
  display: none;
}
.phinergy-app .dashboard-page .events-bar .history-events-bar .tooltip .the-tooltip > div {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.33);
  background: white;
  border-radius: 10px;
  padding: 10px;
}
.phinergy-app .dashboard-page .events-bar .history-events-bar .tooltip .the-tooltip > div:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: calc(50% + 3px);
  top: 100%;
  margin-left: -9px;
  border: 6px solid transparent;
  border-top-color: white;
}
.phinergy-app .dashboard-page .events-bar .history-events-bar .tooltip .the-tooltip > div .station-short-info {
  margin: 5px 10px 0;
  white-space: nowrap;
  text-align: left;
}
.phinergy-app .dashboard-page .events-bar .history-events-bar .tooltip .the-tooltip > div .station-short-info h3 {
  color: #00b4d6;
  font-weight: 700;
  font-size: 16px;
  padding: 0;
}
.phinergy-app .dashboard-page .events-bar .history-events-bar .tooltip .the-tooltip > div .station-short-info h4 {
  margin: 5px 0;
}
.phinergy-app .dashboard-page .events-bar .history-events-bar .tooltip:hover .the-tooltip {
  display: block;
}

.loading {
  height: 0;
  width: 0;
  padding: 20px;
  border: 6px solid #beefde;
  border-right-color: #00b17c;
  border-radius: 50px;
  animation: rotate 1s infinite linear;
  position: absolute;
  left: calc( 50% - 21px);
  top: 55%;
  display: none;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.login-page {
  background: #F7F7F7;
  padding: 50px;
}
.login-page .login-area {
  height: 100%;
  align-items: center;
  justify-content: center;
}
.login-page .login-area .login-box {
  margin: 0;
  text-align: center;
}
.login-page .login-area .login-box .logo {
  width: 180px;
}
.login-page .login-area .login-box h2 {
  margin: 20px 0;
  font-size: 30px;
}
.login-page .login-area .login-box .form-box {
  flex-direction: column;
  position: relative;
}
.login-page .login-area .login-box .form-box .form-field {
  text-align: left;
}
.login-page .login-area .login-box .form-box .btn-fill {
  margin: 20px 0 0 auto;
}
.login-page .login-area .login-box .error-msg {
  text-align: left;
  background: #FFCDD2;
  color: #E53A35;
  overflow: hidden;
  padding: 0;
  margin: 0;
  height: 0;
}
.login-page .login-area .notValid {
  box-shadow: 0 0 5px #E53A35;
}
.login-page .login-area .notValid .error-msg {
  padding: 10px;
  margin-top: 30px;
  height: 52px;
}
.login-page .login-area .success {
  box-shadow: 0 0 5px #66BB6A;
}
.login-page .login-area .success .form-box {
  opacity: 0.2;
}
.login-page .login-area .success .loading {
  display: block;
}

.middle-line {
  position: relative;
}
.middle-line:before {
  border-top: 1px solid #beefde;
  content: "";
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

@media screen and (max-width: 1700px) {
  .app-header nav {
    margin: 0 auto 0 40px;
  }
  .app-header nav ul li {
    min-width: 100px;
  }
  .app-header .action-box .a-btn {
    padding: 8px 15px;
  }

  .panelIsOpen .map-dashboard-area .menu-bar .topics > figure {
    padding: 0 20px;
  }
  .panelIsOpen .map-dashboard-area .menu-bar .topics figure:not(.station-status-info) {
    opacity: 0;
  }
  .panelIsOpen .map-dashboard-area .menu-bar .topics figure.graph {
    opacity: 1;
  }
  .panelIsOpen .map-dashboard-area .menu-bar .topics figure.display-type {
    opacity: 1;
    border-color: transparent;
  }
  .panelIsOpen .map-dashboard-area .menu-bar .topics div.display-type {
    opacity: 1;
  }

  .battery-bar p {
    height: 45px;
  }

  .station-data .backup-time-section .backup-times-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .station-data .backup-time-section .backup-times-list li {
    grid-column-end: span 4;
  }
  .station-data .backup-time-section .backup-times-list .row-full {
    grid-column-end: span 2;
    min-height: 220px;
  }
}
@media screen and (max-width: 1500px) {
  .app-header .action-box {
    position: relative;
  }
  .app-header .action-box .actions-toggle {
    display: block;
  }
  .app-header .action-box .station-action {
    justify-content: center;
    position: absolute;
    top: 140%;
    left: -255px;
    width: 540px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.33);
    background: white;
    border-radius: 10px;
    padding: 20px;
    display: none;
  }
  .app-header .action-box .station-action:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: calc(50% + 3px);
    bottom: 100%;
    margin-left: -9px;
    border: 6px solid transparent;
    border-bottom-color: white;
  }
  .app-header .actionBoxOpen .fa-search-location:before {
    content: "";
  }
  .app-header .actionBoxOpen .station-action {
    display: flex;
  }
}
@media screen and (max-width: 1400px) {
  .dashboard-page .map-dashboard-area .menu-bar .topics figure.graph {
    display: none;
  }

  .station-data .backup-time-section .battery-bar-capacity .unit b {
    min-height: 45px;
  }
  .station-data .backup-time-section .callCenter-tooltip {
    top: -10px;
  }
  .station-data .events-section > figure {
    flex-direction: column;
  }
  .station-data .events-section > figure .card-section {
    width: 100%;
  }
}
@media screen and (max-width: 1220px) {
  .app-header {
    padding: 0 20px;
  }
  .app-header .logo {
    height: 35px;
  }
  .app-header nav {
    margin: 0 auto 0 20px;
  }
  .app-header nav ul li {
    padding: 30px 10px 0;
    min-width: 110px;
  }

  .panelIsOpen .filters-panel {
    width: 300px;
  }
  .panelIsOpen .main-area {
    width: calc(100% - 300px);
  }

  .dashboard-page .filters-panel .filters-area .recent-filters .select-field .select:after {
    right: 10px;
  }
  .dashboard-page .filters-panel .filters-area .recent-filters .select-field .select select {
    text-indent: 10px;
  }
  .dashboard-page .filters-panel .filters-area .recent-filters .btns-action .btn {
    padding: 8px 10px;
  }

  .events-list-page .charts-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 1023px) {
  .only-desktop {
    display: none;
  }

  .wrapper {
    padding: 0 25px;
  }

  .main-page:not(.login-page) {
    display: none;
  }

  .app-header nav {
    margin: 0;
  }

  .station-action,
.user-area {
    display: none;
  }

  .mobile-view {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 100vh;
    padding: 25px;
  }
  .mobile-view i {
    font-size: 40px;
    margin: 40px;
  }
}
@media screen and (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
}

/*# sourceMappingURL=phinergy-style.css.map */



.leaflet-container .leaflet-tile-pane {
  filter: grayscale(0.9);
}
.leaflet-container .leaflet-control-container .leaflet-left {
  top: 10px;
  right: 15px;
  left: unset;
}
.leaflet-container .leaflet-control-container .leaflet-control-zoom {
  margin: 0;
  border: none;
}

.leaflet-container .leaflet-control-container .leaflet-control-zoom a {
  margin-top: 5px;
  border: none;
  box-shadow: 0 0 10px #E0E0E0;
  border-radius: 50px;
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theMainMap {
  width: calc(100vw - 20px);
  height: calc(100vh - 165px);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  margin: auto;
}

.stationInfo li {
  padding: 10px 0;
  border-bottom: 1px solid #E0E0E0;
}
.stationInfo li:last-child {
  border-bottom: none;
}
.stationInfo figure {
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.stationInfo p {
  margin: 0;
}
.stationInfo b {
  line-height: 1;
  display: block;
}
.stationInfo .a-radius {
  color: #00b4d6;
  padding: 5px 20px;
  display: block;
  width: fit-content;
  margin: 10px auto 0;
}
.stationInfo .a-radius:hover {
  color: white;
}
.stationInfo .connection-status p:before {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
}
.stationInfo .connection-status .standby:before {
  color: #66BB6A;
}
.stationInfo .connection-status .active:before {
  color: #FCB316;
}
.stationInfo .connection-status .service:before {
  color: #E53A35;
}
.stationInfo .connection-status .off:before {
  color: #9E9E9E;
}




/* *****| zukaPhinergy Improve CSS May 2023 |***** */
.boxCircleLight-indication {
  font-size: 13px;
  background: white;
  border: 1px solid #E0E0E0;
  border-radius: 50px;
  padding: 5px 15px;
}
.boxCircleLight-indication i {
  color: #E53A35;
}

.gridOn i {
  color: #66BB6A;
}

.timer {
  align-items: center;
  gap: 5px;
}
.timer time {
  margin: 0;
  background: #00b4d6;
  padding: 6px;
  border-radius: 4px;
  font-weight: 600;
}

.toggle-checkbox-box {
  text-align: center;
}
.toggle-checkbox-box .ball-indicator {
  background: white;
  border: 1px solid #E0E0E0;
  height: 20px;
  width: 40px;
  border-radius: 50px;
  display: block;
  margin: auto;
  position: relative;
}
.toggle-checkbox-box .ball-indicator:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  height: 16px;
  width: 16px;
  border-radius: 50px;
  background: #E0E0E0;
}
.toggle-checkbox-box input {
  display: none;
}
.toggle-checkbox-box label span {
  font-size: 12px;
}

.toggleChecked .ball-indicator:before {
  background: #00b4d6;
  left: unset;
  right: 1px;
}

.phinergy-app .station-data-page .remaining-time,
.phinergy-app .station-data-page .backup-times-list,
.phinergy-app .station-data-page .battery-bar-capacity {
  display: none;
}

.station-data .backup-time-section .callCenter-tooltip {
  top: -10px;
}

 .capacity-backup-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.capacity-backup-boxes li {
  width: 43%;
  flex-grow: 1;
  background: #E0E0E0;
  border-radius: 5px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.capacity-backup-boxes li .icon {
  position: relative;
  padding: 0 3px 3px 0;
  margin-bottom: 5px;
}
.capacity-backup-boxes li .icon svg.pi {
  height: 50px;
  transform: scaleX(-1);
}
.capacity-backup-boxes li .icon i {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 20px;
}
.capacity-backup-boxes li b {
  font-size: 26px;
}

.extend-times {
  padding: 10px 0;
  gap: 10px;
  flex-wrap: wrap;
}
.extend-times > figure {
  background: #F7F8F7;
  flex-grow: 1;
  width: 49%;
  min-width: 400px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  border-radius: 5px;
}
.extend-times > figure .mainContent {
  margin: 0 auto 0 15px;
}
.extend-times .remaining-box .Active {
  color: #66BB6A;
}
.extend-times .remaining-box .Standby {
  color: #FCB316;
}
.extend-times .extended-box h3 {
  padding: 0;
}

.Standby-STATUS > figure {
  color: #CBC2C2;
}
.Standby-STATUS .timer time {
  background: #E0E0E0;
}


.maintenance-section .maintenance-layout .machine-info {
  align-items: flex-start;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 20px;
}
.maintenance-section .maintenance-layout .machine-info p {
  border-left: 1px solid #E0E0E0;
  padding: 0 15px;
}
.maintenance-section .maintenance-layout .machine-info p b {
  display: block;
}
.maintenance-section .maintenance-layout .main-content {
  gap: 50px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.top-page {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid #E0E0E0;
  margin-bottom: 15px;
}





@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.bp-area {
  position: relative;
  width: 700px;
  margin: auto;
}
.bp-area .radio-select {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  width: fit-content;
  margin: auto;
  z-index: 1;
}
.bp-area .radio-select b {
  display: block;
  padding: 10px;
}
.bp-area .radio-select ul {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #E0E0E0;
  border-radius: 50px;
  overflow: hidden;
}
.bp-area .radio-select ul li label {
  padding: 5px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #E0E0E0;
  cursor: pointer;
}
.bp-area .radio-select ul li:last-child label {
  border-right: none;
}
.bp-area .radio-select ul li:hover {
  background: #beefde;
}
.bp-area .radio-select ul li input {
  display: none;
}
.bp-area .radio-select ul .checked {
  background: #beefde;
  color: #00b17c;
}
.bp-area .loopType {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 0;
}
.bp-area .loopType > img {
  width: 100%;
}
.bp-area .loopType .layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 13px;
}
.bp-area .loopType .layers .text {
  position: absolute;
  width: 50px;
  line-height: 1;
  text-align: center;
}
.bp-area .loopType .layers .temperature-wt-top {
  bottom: 35.7%;
  left: 58.8%;
  text-align: right;
}
.bp-area .loopType .layers .temperature-wt-bottom {
  bottom: 30.7%;
  left: 58.8%;
  text-align: right;
}
.bp-area .loopType .layers .temperature-nv2 {
  bottom: 40.1%;
  left: 49.5%;
  text-align: left;
}
.bp-area .loopType .layers .preMb {
  bottom: 26.1%;
  left: 49.5%;
  text-align: left;
}
.bp-area .loopType .layers .plop {
  position: absolute;
  height: 24px;
}
.bp-area .loopType .layers .plop-black {
  fill: #002235;
  bottom: 8.6%;
  left: 66.9%;
  animation-duration: 0.8s;
}
.bp-area .loopType .layers .plop-green {
  fill: #00c350;
  bottom: 15.6%;
  left: 40.5%;
  animation-duration: 1.8s;
}
.bp-area .loopType .layers .plop-yellow {
  fill: #ffb203;
  bottom: 29.6%;
  left: 28.3%;
  animation-duration: 1.8s;
}
.bp-area .loopType .layers .plop-blue {
  fill: #0ea5ff;
  bottom: 20.6%;
  left: 20.5%;
  animation-duration: 1.8s;
}
.bp-area .loopType .layers .plop-red {
  fill: #ff0a00;
  bottom: 18.6%;
  left: 51.2%;
  animation-duration: 0.8s;
}
.bp-area .loopType .layers .vent {
  width: fit-content;
  position: relative;
  align-items: center;
  justify-content: center;
}
.bp-area .loopType .layers .vent .bg-vent {
  height: 26px;
}
.bp-area .loopType .layers .vent .plop-vent {
  position: absolute;
  height: 20px;
}
.bp-area .loopType .layers .train-vent {
  width: 70px;
  justify-content: space-between;
  position: absolute;
}
.bp-area .loopType .layers .train-vent .vent .bg-vent {
  height: 22px;
}
.bp-area .loopType .layers .train-vent .vent .plop-vent {
  height: 16px;
}
.bp-area .loopType .layers .train-1-l {
  bottom: 60.5%;
  left: 67.9%;
}
.bp-area .loopType .layers .train-2-r {
  bottom: 60.5%;
  left: 80%;
}
.bp-area .loopType .layers .vent-blue {
  position: absolute;
  bottom: 34.2%;
  left: 8%;
}
.bp-area .loopType .layers .Ls {
  width: 10px;
  height: 10px;
  display: block;
  background: #f7e4b9;
  border-radius: 50%;
  position: absolute;
}
.bp-area .loopType .layers .Lon {
  background: #ffb203;
}
.bp-area .loopType .layers .l1 {
  bottom: 21%;
  left: 61.5%;
}
.bp-area .loopType .layers .l2 {
  bottom: 42%;
  left: 61.5%;
}
.bp-area .loopType .layers .l3 {
  bottom: 47%;
  left: 61.5%;
}
.bp-area .loopType .layers .l4 {
  bottom: 47%;
  left: 95%;
}
.bp-area .loopType .layers .l5 {
  bottom: 42%;
  left: 95%;
}
.bp-area .loopType .layers .l6 {
  bottom: 71.2%;
  left: 61.5%;
}
.bp-area .loopType .layers .l7 {
  bottom: 73%;
  left: 95%;
}
.bp-area .loopType .layers .l8 {
  bottom: 68%;
  left: 95%;
}
.bp-area .loopType .layers .indicator-circle {
  width: 14px;
  height: 14px;
  display: block;
  background: #E53A35;
  border-radius: 50%;
  position: absolute;
}
.bp-area .loopType .layers .INDIon {
  background: #66BB6A;
}
.bp-area .loopType .layers .blackBuoy {
  bottom: 43.7%;
  left: 56.9%;
}
.bp-area .loopType .layers .toggle-switch {
  background: #e4ebef;
  border: 2px solid;
  border-radius: 50px;
  width: 50px;
  height: 22px;
  padding: 0 2px;
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
}
.bp-area .loopType .layers .toggle-switch:before {
  content: "OFF";
}
.bp-area .loopType .layers .toggle-switch:after {
  content: "";
  width: 14px;
  height: 14px;
  background: #E53A35;
  border-radius: 50%;
}
.bp-area .loopType .layers .switchOn:before {
  content: "ON";
}
.bp-area .loopType .layers .switchOn:after {
  background: #66BB6A;
}
.bp-area .loopType .layers .toggleSwitchMain {
  bottom: 62.8%;
  left: 45.2%;
}
.bp-area .loopType .layers .toggleSwitchSecondary {
  bottom: 70%;
  left: 87.9%;
}
.bp-area .loopType .layers .toggleSwitchAl {
  bottom: 5%;
  left: 33%;
}
.bp-area .loopType .layers .line-switch {
  position: absolute;
  height: 20px;
  width: 20px;
  background: #ffffff;
  border-bottom: 2px solid;
  border-radius: 0 30px 0 0;
  transform: rotate(-45deg);
}
.bp-area .loopType .layers .switchLineOn {
  opacity: 0;
}
.bp-area .loopType .layers .heaterBlackSwitch {
  border-bottom-color: #000;
  bottom: 37%;
  left: 46.3%;
}
.bp-area .loopType .layers .heaterRedSwitch {
  border-bottom-color: #ff0a00;
  bottom: 13%;
  left: 46.3%;
}
.bp-area .loopType .layers .power-dir {
  width: 20px;
  height: 20px;
  font-size: 20px;
  position: absolute;
  bottom: 77.8%;
  left: 49.4%;
}
.bp-area .loopType .layers .powerOut {
  transform: scale(-1);
}
.bp-area .loopType .layers .amDC {
  bottom: 46%;
  left: 74.2%;
}
.bp-area .loopType .layers .amAL {
  bottom: 46%;
  left: 33.7%;
}
.bp-area .loopType .layers .amBB {
  bottom: 36%;
  left: 57%;
}
.bp-area .loopType .layers .voltALDown {
  bottom: 11%;
  left: 4.2%;
}
.bp-area .loopType .layers .voltALUp {
  bottom: 26%;
  left: 9.2%;
}
.bp-area .loopType .layers .voltHeater {
  bottom: 26%;
  left: 33.5%;
}
.bp-area .loopType .layers .voltMain {
  bottom: 72%;
  left: 59.2%;
}
.bp-area .loopType .layers .voltBB {
  bottom: 24%;
  left: 62.8%;
}
.bp-area .loopType .layers .soc {
  width: 74px;
  bottom: 4.4%;
  left: 61%;
}
.electrolyteLoop .washLoop,
.electrolyteLoop .workLoop {
  opacity: 0;
}

.washLoop .electrolyteLoop,
.washLoop .workLoop {
  opacity: 0;
}

.workLoop .electrolyteLoop,
.workLoop .washLoop {
  opacity: 0;
}

.pi {
  height: 18px;
}