/* original */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap&subset=cyrillic,greek,latin-ext');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
/* #page-wrapper {
        padding-top: 30px !important;
    } */

.bg-danger {
  background-color: #f4d2d3 !important;
}

/* 
  .navbar-nav > li{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  .nav-link {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  /* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
  left: auto !important;
  right: 0px;
}

nav a {
  color: white;
  text-decoration: none;
}

.dropdown .nav-link {
  color: #fff;
  text-decoration: none;
}

.dropdown .dropdown-menu a {
  color: #033C73;
}

.dropdown-menu {
  min-width: 200px;
}

.container .dropdown .dropdown-menu a:hover {
  color: #fff;
  background-color: #b91773;
  border-color: #fff;

}

.navbar-dark .navbar-nav .nav-link:hover {
  color: rgba(255, 255, 255, 1);
}

/* this deals with giving font-awesome icons badges since they were deprecated in BS4 */
*.icon-blue {
  color: #0088cc;
}

*.icon-white {
  color: white;
  padding-right: 2rem;
}

i {
  text-align: left;
  /* vertical-align:middle; */
  position: relative;
}

.badge:after {
  content: attr(data-count);
  /* position: absolute; */

  /* background: rgba(0,0,255,1); */
  /* height:1rem; */
  /* top:1rem;
    right:1.5rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;; */
  font-size: 1rem;
  /* border-radius: 50%; */
  color: white;
  /* border:1px solid blue; */
}

html {
  min-height: 100%;
  /* make sure it is at least as tall as the viewport */
  position: relative;
}

body {
  height: 100%;
  /* force the BODY element to match the height of the HTML element */
}


#sidebar {
  overflow: hidden;
  z-index: 3;
  max-width: 180px;
}

#sidebar .list-group {
  min-width: 250px;
  background-color: #023c73;
  min-height: 100vh;
}

#sidebar i {
  margin-right: 6px;
}

#sidebar .list-group-item {
  border-radius: 0;
  background-color: #04519b;
  color: rgba(255, 255, 255, 0.8);
  border-left: 0;
  border-right: 0;
  white-space: nowrap;
}

#sidebar .list-group-item:hover {
  color: #fff;
}

/* highlight active menu */
#sidebar .list-group-item:not(.collapsed) {
  background-color: #222;
}

/* closed state */
#sidebar .list-group .list-group-item[aria-expanded="false"]::after {
  content: " \f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}

/* open state */
#sidebar .list-group .list-group-item[aria-expanded="true"] {
  background-color: #033C73;
}

#sidebar .list-group .list-group-item[aria-expanded="true"]::after {
  content: " \f0da";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}

/* level 1*/
#sidebar .list-group .collapse .list-group-item,
#sidebar .list-group .collapsing .list-group-item {
  padding-left: 20px;
  background-color: #fff;
  color: #033C73;
}

#sidebar .list-group .collapse .list-group-item:hover,
#sidebar .list-group .collapsing .list-group-item:hover {
  background-color: #2FA4E7;
}

/* level 2*/
#sidebar .list-group .collapse>.collapse .list-group-item,
#sidebar .list-group .collapse>.collapsing .list-group-item {
  padding-left: 30px;
}

/* level 3*/
#sidebar .list-group .collapse>.collapse>.collapse .list-group-item {
  padding-left: 40px;
}

@media (max-width:767px) {

  #sidebar {
    min-width: 35px;
    max-width: 40px;
    overflow-y: auto;
    overflow-x: visible;
    transition: all 0.25s ease;
    transform: translateX(-45px);
    position: fixed;
  }

  #sidebar.show {
    transform: translateX(0);
  }

  #sidebar::-webkit-scrollbar {
    width: 0px;
  }

  #sidebar,
  #sidebar .list-group {
    min-width: 35px;
    overflow: visible;
    position: relative;
  }

  /* overlay sub levels on small screens */
  #sidebar .list-group .collapse.show,
  #sidebar .list-group .collapsing {
    position: relative;
    z-index: 1;
    width: 190px;
    top: 0;
  }

  #sidebar .list-group>.list-group-item {
    text-align: center;
    padding: .75rem .5rem;
  }

  /* hide caret icons of top level when collapsed */
  #sidebar .list-group>.list-group-item[aria-expanded="true"]::after,
  #sidebar .list-group>.list-group-item[aria-expanded="false"]::after {
    display: none;
  }
}

.collapse.show {
  visibility: visible;
}

.collapsing {
  visibility: visible;
  height: 0;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: 100%;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}


#sidebarLeft {
  overflow: hidden;
  z-index: 3;
  max-width: 180px;
}

#sidebarLeft .list-group {
  min-width: 250px;
  background-color: #023c73;
  min-height: 100vh;
}

#sidebarLeft i {
  margin-right: 6px;
}

#sidebarLeft .list-group-item {
  border-radius: 0;
  background-color: #04519b;
  color: rgba(255, 255, 255, 0.8);
  border-left: 0;
  border-right: 0;
  white-space: nowrap;
  text-align: left;
}

#sidebarLeft .list-group-item:hover {
  color: #fff;
}

/* highlight active menu */
#sidebarLeft .list-group-item:not(.collapsed) {
  background-color: #222;
}

/* closed state */
#sidebarLeft .list-group .list-group-item[aria-expanded="false"]::after {
  content: " \f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}

/* open state */
#sidebarLeft .list-group .list-group-item[aria-expanded="true"] {
  background-color: #033C73;
}

#sidebarLeft .list-group .list-group-item[aria-expanded="true"]::after {
  content: " \f0da";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}

/* level 1*/
#sidebarLeft .list-group .collapse .list-group-item,
#sidebarLeft .list-group .collapsing .list-group-item {
  padding-left: 20px;
  background-color: #fff;
  color: #033C73;
}

/* level 2*/
#sidebarLeft .list-group .collapse>.collapse .list-group-item,
#sidebarLeft .list-group .collapse>.collapsing .list-group-item {
  padding-left: 30px;
}

/* level 3*/
#sidebarLeft .list-group .collapse>.collapse>.collapse .list-group-item {
  padding-left: 40px;
}

@media (max-width:767px) {

  #sidebarLeft {
    min-width: 35px;
    max-width: 40px;
    overflow-y: auto;
    overflow-x: visible;
    transition: all 0.25s ease;
    transform: translateX(45px);
    position: fixed;
  }

  #sidebarLeft.show {
    transform: translateX(0);
  }

  #sidebarLeft::-webkit-scrollbar {
    width: 0px;
  }

  #sidebarLeft,
  #sidebarLeft .list-group {
    min-width: 35px;
    overflow: visible;
    position: relative;
  }

  /* overlay sub levels on small screens */
  #sidebarLeft .list-group .collapse.show,
  #sidebarLeft .list-group .collapsing {
    position: relative;
    z-index: 1;
    width: 190px;
    left: -150px;
    top: 0;
  }

  #sidebarLeft .list-group>.list-group-item {
    text-align: center;
    padding: .75rem .5rem;
  }

  /* hide caret icons of top level when collapsed */
  #sidebarLeft .list-group>.list-group-item[aria-expanded="true"]::after,
  #sidebarLeft .list-group>.list-group-item[aria-expanded="false"]::after {
    display: none;
  }
}


.toast-title {
  font-weight: bold;
}

.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

.toast-message a,
.toast-message label {
  color: #FFFFFF;
}

.toast-message a:hover {
  color: #CCCCCC;
  text-decoration: none;
}

.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
  line-height: 1;
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}

.rtl .toast-close-button {
  left: -0.3em;
  float: left;
  right: 0.3em;
}

button.approve,
button.decline {
  border: 0;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  padding: 4px 12px;
}

button.approve {
  background: #3ed0b6;
}

button.decline {
  background: #e65f5f;
}

div#result {
  background: #fff;
  display: block;
  width: 90%;
  max-width: 1100px;
  margin: 15px auto;
  padding: 8px 12px;
  color: #6c757d;
  border-radius: 5px;
  box-shadow: 0 0 5px rgb(0 0 0 / 2%);
  border: 2px solid #8d9ca924;
}

h1.admin-dashboard {
  font-size: 32px;
  margin-top: 30px;
  margin-bottom: 60px;
}

div#result.top-result-bar {
  width: 100vw !important;
  background: #3ed0b6;
  border-radius: 0;
  margin: 0;
  max-width: 100vw !important;
  text-align: center;
  color: #fff;
  font-size: 14px;
  background: rgb(50 145 227);
  display: none;
}

.top-result-bar {
  width: 100vw !important;
  background: #3ed0b6;
  border-radius: 0;
  margin: 0;
  max-width: 100vw !important;
  text-align: center;
  color: #fff;
  font-size: 14px;
  display: none;
  padding: 8px 12px;
}

.top-result-bar.error {
  background-color: #dc3545;
}

.home-hero-container p.lead.smaller {
  font-size: 15px;
}

span.ip {
  font-size: 12px;
  color: #adb5bd;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 0px 4px;
}

.home-hero-container h2 {
  color: #fff;
  margin-bottom: 30px;
}

.buttons-section {
  margin-top: 70px;
}

a.large-white-tile {
  background: #fff;
  padding: 75px 17px 17px 17px;
  min-width: 280px;
  display: inline-block;
  border-radius: 10px;
  color: #495057;
  font-size: 18px;
  font-family: 'poppins', 'roboto', sans-serif;
  box-shadow: 0 0 20px rgb(0 0 0 / 5%);
  font-weight: 500;
  margin-right: 10px;
  margin-bottom: 30px;
}

a.large-white-tile:hover {
  color: #007bff;
  text-decoration: none;
  outline: 4px solid rgb(161 198 238 / 38%);
  transform: scale(1);
}

a.large-white-tile:focus {
  outline-color: #007bff;
}

a.large-white-tile.my-fountains {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 90 40' style='enable-background:new 0 0 90 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%230B7CC0;%7D .st1%7Bfill:%230D4671;%7D .st2%7Bfill:%2330A9B8;%7D .st3%7Bfill:%23398ABA;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M8.37,9.85c4.37,0.09,8.47,1.31,12.41,3.1c6.3,2.87,11.72,6.87,15.75,12.59c0.41,0.58,0.75,1.22,1.13,1.82 c0.11,0.18,0.25,0.4,0.08,0.54c-0.17,0.14-0.4-0.04-0.53-0.17c-0.83-0.84-1.7-1.62-2.62-2.36c-5.34-4.32-11.37-6.95-18.22-7.76 c-2.86-0.34-5.69-0.29-8.56-0.08c-2.06,0.15-4.11-0.33-5.33-2.35c-0.97-1.6-0.57-3.23,1.03-4.22C4.99,10.04,6.65,9.81,8.37,9.85z' /%3E%3Cpath class='st1' d='M43.6,32.54c0.03,0.21,0.05,0.42,0.08,0.63c-0.18,0.56,0.05,1.1,0.03,1.65c-0.02,0.41,0.39,1.07-0.46,1.19 c-0.68-0.45-0.65-1.23-0.8-1.89c-1.62-6.84-5.31-12.39-10.6-16.93c-3.05-2.61-6.49-4.63-10.06-6.45c-1.24-0.63-2.43-1.33-3.38-2.36 c-0.28-0.3-0.56-0.61-0.77-0.95c-0.66-1.04-1.06-2.17-0.41-3.33c0.63-1.13,1.79-1.28,2.96-1.19c2.38,0.19,4.42,1.31,6.33,2.59 c9.05,6.08,14.83,14.37,16.85,25.17C43.59,31.27,43.21,31.96,43.6,32.54z'/%3E%3Cpath class='st1' d='M46.25,30.96c2.22-11.77,8.54-20.64,18.9-26.62c1.41-0.81,2.94-1.46,4.64-1.46c2.56-0.01,3.7,1.89,2.46,4.16 c-0.93,1.69-2.46,2.72-4.12,3.56c-2.42,1.23-4.78,2.56-7.03,4.08c-6.12,4.14-10.53,9.61-13.13,16.57 c-0.62,1.66-0.98,3.33-1.33,5.04c-0.15,0.19-0.13,0.56-0.44,0.55c-0.33-0.02-0.28-0.34-0.3-0.58 C45.73,34.47,46.35,32.74,46.25,30.96z'/%3E%3Cpath class='st0' d='M81.48,9.99c0.98-0.03,1.95,0.06,2.89,0.3c1.95,0.5,3.07,1.62,3.12,3.11c0.06,1.7-1.16,3.26-3.05,3.74 c-1.03,0.26-2.08,0.37-3.18,0.24c-3.43-0.4-6.85-0.19-10.23,0.47c-6.14,1.21-11.63,3.78-16.41,7.83c-0.12,0.1-0.23,0.24-0.36,0.28 c-0.36,0.1-0.64,0.71-1.04,0.32c-0.37-0.37,0.03-0.71,0.26-1.05c1.99-2.91,4.5-5.32,7.34-7.36c4.23-3.05,8.75-5.58,13.85-6.91 C76.9,10.38,79.17,10.02,81.48,9.99z'/%3E%3Cpath class='st2' d='M43.87,21.23c0,0.92,0.01,1.84,0,2.76c0,0.31-0.05,0.7-0.41,0.72c-0.36,0.02-0.41-0.37-0.48-0.68 c-0.68-2.85-1.74-5.54-3.09-8.14c-1.71-3.31-4-6.15-6.74-8.66c-0.68-0.62-1.34-1.25-1.81-2.07c-0.47-0.81-0.68-1.68-0.12-2.44 c0.58-0.78,1.49-0.78,2.39-0.55c1.92,0.48,3.38,1.7,4.65,3.11c3.05,3.36,4.59,7.43,5.36,11.84C43.86,18.47,43.97,19.84,43.87,21.23 z'/%3E%3Cpath class='st2' d='M45.66,21c0.21-5.58,1.65-11.02,5.61-15.56c1.28-1.47,2.75-2.76,4.72-3.26c0.88-0.22,1.82-0.28,2.41,0.49 c0.62,0.81,0.38,1.72-0.14,2.58c-0.43,0.72-1,1.3-1.61,1.84c-5.09,4.46-8.12,10.16-9.93,16.59c-0.06,0.2-0.06,0.41-0.11,0.6 c-0.05,0.2-0.13,0.42-0.37,0.44c-0.33,0.02-0.42-0.26-0.43-0.51C45.75,23.23,45.72,22.26,45.66,21z'/%3E%3Cpath class='st3' d='M43.25,36c0.59-0.43,0.37-0.99,0.23-1.53c-0.12-0.47-0.47-0.97,0.2-1.31c0.5,1.65,0.18,3.33,0.19,5 c0,0.12,0.01,0.34-0.23,0.3c-0.09-0.02-0.21-0.09-0.23-0.16C43.22,37.55,42.62,36.82,43.25,36z'/%3E%3Cpath class='st3' d='M46.25,30.96c0.3,1.72-0.29,3.4-0.23,5.11c0.03,0.86,0.3,0.48,0.62,0.21c0,0.25,0.07,0.52,0,0.75 c-0.13,0.45-0.09,1.21-0.7,1.13c-0.39-0.05-0.21-0.78-0.21-1.21C45.71,34.94,45.69,32.93,46.25,30.96z'/%3E%3Cpath class='st3' d='M43.6,32.54c-0.48-0.57-0.31-1.23-0.24-1.87C43.73,31.26,43.69,31.89,43.6,32.54z'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 84px;
  background-repeat: no-repeat;
  background-position: 15px 20px;
}

a.large-white-tile.add-fountain {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 90 40' style='enable-background:new 0 0 90 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%230B7CC0;%7D%0A%3C/style%3E%3Cpath class='st0' d='M21.87,37.88c-9.78,0-17.74-7.96-17.74-17.74S12.09,2.39,21.87,2.39c9.78,0,17.74,7.96,17.74,17.74 S31.66,37.88,21.87,37.88z M21.87,4.5c-8.62,0-15.63,7.01-15.63,15.63s7.01,15.63,15.63,15.63c8.62,0,15.63-7.01,15.63-15.63 S30.49,4.5,21.87,4.5z'/%3E%3Cg%3E%3Cg%3E%3Cpath class='st0' d='M22.96,11.06v8.02h7.71v2.05h-7.71v8.08h-2.18v-8.08h-7.71v-2.05h7.71v-8.02H22.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 92px;
  background-repeat: no-repeat;
  background-position: 15px 18px;
}


.home-hero-container p.lead {
  margin-bottom: 20px;
  max-width: 540px;
  color: #adb5bd;
}

.home-hero-container p.lead a {
  color: inherit;
  text-decoration: underline;
  font-weight: 400;
}

.home-hero-container p.lead a:hover {
  color: #fff;
}


.login-hero {
  background-color: #222;
  height: calc(100vh - 60px);
  margin: 0;
  background-image: url(../../images/fpk.jpg);
  background-size: cover;
  background-position: bottom center;
  padding: 0;
}

.login-hero .overlay {
  padding: 40px;
  width: 100%;
  height: 100%;
  background: rgba(30, 30, 30, .5);
}

.overlay #logo {
  height: 90px;
  margin-top: 90px;
  margin-left: 0;
  margin-right: 0;
}

.login-hero h1 {
  color: #fff;
  font-size: 31px;
  margin-top: 45px;
  margin-bottom: 0;
}

.login-hero h4 {
  color: #fff;
  font-size: 16px;
  margin-top: 10px;
}

.login-page .footer {
  position: absolute;
  bottom: 20px;
  font-size: 12px;
  color: #fff;
  width: calc(100% - 80px);
}

#login-form input[type="text"],
#login-form input[type="password"] {
  border: none;
  height: 50px;
  margin-top: 1.25rem;
  background-color: #fff;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  transition: background-color .3s ease;
  display: block;
  width: 100%;
  font-size: 15px;
  color: #495057;
  border-radius: 4px;
  border: 1px solid transparent;
}

#login-form input:focus {
  box-shadow: none !important;
  border: 1px solid #007bff;
  outline: 3px solid rgba(0, 123, 255, .25);

}

a.button-a.register {
  background-color: #222;
  color: #fff !important;
  height: 50px;
  margin-top: 10px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  transition: background-color .3s ease;
  display: block;
  width: 100%;
  font-size: 15px;
  border-radius: 4px;
  border: 1px solid transparent;
  display: inline-block;
  line-height: 50px;
  text-align: center;
}

.alert {
  width: 100%;
  padding: 6px 6px;
  margin: 0;
  border-radius: 0;
}

.login-page-footer footer {
  display: none;
}

.alert-danger {
  background: #dc3545;
  color: #fff;
  text-align: center;
  font-size: 13px;
}

ul.home-list-devices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

ul.home-list-devices li a {
  background: #fff;
  padding: 20px;
  margin: 0px 15px 10px 0px;
  display: inline-block;
  width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .04);
  box-shadow: 0 0 8px rgba(0, 0, 0, .02);
  border-radius: 5px;
  background: #fff;
  color: rgb(89, 93, 110);
  font-weight: 500;
  font-size: 16px;
  min-height: 87px;
  line-height: 20px;
}

ul.home-list-devices li a:hover {
  color: #007bff;
  text-decoration: none;
  outline: 4px solid rgb(188 194 201 / 15%);
}

h3.my-fountains-on-home {
  margin-top: 40px;
  font-family: 'poppins';
  margin-bottom: 20px;
  font-size: 15px;
  color: #ccc;
}

ul.active-schedules {
  list-style: none;
  padding: 0;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 15px;
}

ul.active-schedules li div.small-title {
  font-size: 13px;
  color: #adb5bd;
}

ul.active-schedules li div.port-tile {
  color: rgb(93 96 107);
  /* font-weight: 500; */
  font-size: 18px;
  text-transform: capitalize;
}

ul.active-schedules li {
  background: #fff;
  width: 220px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .02);
  padding: 17px;
  border-left: 4px solid rgb(62 208 182);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

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

.homepage-account-details p {
  color: #6c757d;
  margin-bottom: 0;
  border-bottom: 2px solid #e9ecef;
  line-height: 40px;
}

.homepage-account-details a.btn {
  margin-top: 30px;
}

a.button-a.register:hover {
  text-decoration: none;
  background: #495057;
}

a.small-link {
  color: #ccc;
  font-size: 13px;
  margin-top: 13px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

a.small-link:hover {
  color: rgb(93 96 107);
  text-decoration: none;
}

#login-form button[type="submit"] {
  background-color: #3cceb4 !important;
  color: #fff !important;
  height: 50px;
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  transition: background-color .3s ease;
  display: block;
  width: 100%;
  font-size: 15px;
  border-radius: 4px;
  border: 1px solid transparent;
}

form#login-form {
  width: 570px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'poppins', 'roboto', sans-serif;
}

#login-form h2 {
  font-size: 26px;
  text-align: center;
  color: #67666e;
  font-weight: 500;
  margin-bottom: 50px;
  -webkit-font-smoothing: antialiased;
}

@media screen and (max-width: 992px) {
  .login-hero {
    height: auto;
  }

  form#login-form {
    position: inherit;
    max-width: 350px;
    display: block;
    margin: 0 auto;
    margin-top: 40px;
    top: 0;
    left: 0;
    transform: none;
  }

}







































/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}

div#home-hero {
  width: 100%;
  min-height: 700px;
  background: rgb(74 78 88);
  display: flex;
  align-items: center;
}

.home-hero-container {
  padding-top: 30px;
  padding-bottom: 40px;

}

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  left: 12px;
}

.toast-top-right {
  top: 12px;
  right: 12px;
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

#toast-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  /*overrides*/
}

#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#toast-container>div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  border-radius: 4px;
  background-position: 15px center;
  background-repeat: no-repeat;
  box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  color: #FFFFFF;
  opacity: 1;
  font-size: 13px;
}

#toast-container>div.rtl {
  direction: rtl;
  padding: 15px 50px 15px 15px;
  background-position: right 15px center;
}

#toast-container>div:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, .4);
  opacity: 1;
  cursor: pointer;
}

#toast-container>.toast-info {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMCAzMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzAgMzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNSwzMEM2LjgyLDMwLDAuMTcsMjMuMzUsMC4xNywxNS4xN0MwLjE3LDYuOTksNi44MiwwLjM0LDE1LDAuMzRjOC4xOCwwLDE0LjgzLDYuNjUsMTQuODMsMTQuODMNCglDMjkuODMsMjMuMzUsMjMuMTgsMzAsMTUsMzB6IE0xNSwyLjc5Yy02LjgzLDAtMTIuMzgsNS41NS0xMi4zOCwxMi4zOFM4LjE3LDI3LjU1LDE1LDI3LjU1YzYuODMsMCwxMi4zOC01LjU1LDEyLjM4LTEyLjM4DQoJUzIxLjgzLDIuNzksMTUsMi43OXoiLz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNSwyMy44MWMtMC43LDAtMS4yNi0wLjQ1LTEuMjYtMVYxNC4xYzAtMC41NSwwLjU2LTEsMS4yNi0xYzAuNywwLDEuMjYsMC40NSwxLjI2LDF2OC43MQ0KCQlDMTYuMjYsMjMuMzYsMTUuNjksMjMuODEsMTUsMjMuODF6Ii8+DQoJPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTUiIGN5PSIxMCIgcj0iMS41OSIvPg0KPC9nPg0KPC9zdmc+DQo=") !important;
  background-size: 24px;

}

#toast-container>.toast-error {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMCAzMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzAgMzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNSwxMC41OGMwLjcsMCwxLjI2LDAuNDUsMS4yNiwxdjYuMjFjMCwwLjU1LTAuNTYsMS0xLjI2LDFjLTAuNywwLTEuMjYtMC40NS0xLjI2LTF2LTYuMjENCgkJQzEzLjc0LDExLjAzLDE0LjMxLDEwLjU4LDE1LDEwLjU4eiIvPg0KCTxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE1IiBjeT0iMjEuMzkiIHI9IjEuNTkiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNS44OCw0LjcxTDE1Ljg4LDQuNzFMMTUuODgsNC43MSBNMTUsNi4yNGwxMC41LDE4LjE5aC0yMUwxNSw2LjI0IE0xNSwyLjcyYy0wLjUsMC0xLDAuMjUtMS4yOCwwLjc0DQoJCUwxLjQ1LDI0LjcxYy0wLjU3LDAuOTksMC4xNCwyLjIyLDEuMjgsMi4yMmgyNC41NGMxLjE0LDAsMS44NS0xLjIzLDEuMjgtMi4yMkwxNi4yOCwzLjQ2QzE2LDIuOTcsMTUuNSwyLjcyLDE1LDIuNzJMMTUsMi43MnoiLz4NCjwvZz4NCjwvc3ZnPg0K") !important;
  background-size: 28px;
}

#toast-container>.toast-success {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}

#toast-container>.toast-warning {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMCAzMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzAgMzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNSwxMC41OGMwLjcsMCwxLjI2LDAuNDUsMS4yNiwxdjYuMjFjMCwwLjU1LTAuNTYsMS0xLjI2LDFjLTAuNywwLTEuMjYtMC40NS0xLjI2LTF2LTYuMjENCgkJQzEzLjc0LDExLjAzLDE0LjMxLDEwLjU4LDE1LDEwLjU4eiIvPg0KCTxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE1IiBjeT0iMjEuMzkiIHI9IjEuNTkiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNS44OCw0LjcxTDE1Ljg4LDQuNzFMMTUuODgsNC43MSBNMTUsNi4yNGwxMC41LDE4LjE5aC0yMUwxNSw2LjI0IE0xNSwyLjcyYy0wLjUsMC0xLDAuMjUtMS4yOCwwLjc0DQoJCUwxLjQ1LDI0LjcxYy0wLjU3LDAuOTksMC4xNCwyLjIyLDEuMjgsMi4yMmgyNC41NGMxLjE0LDAsMS44NS0xLjIzLDEuMjgtMi4yMkwxNi4yOCwzLjQ2QzE2LDIuOTcsMTUuNSwyLjcyLDE1LDIuNzJMMTUsMi43MnoiLz4NCjwvZz4NCjwvc3ZnPg0K") !important;
  background-size: 24px;
}

#toast-container.toast-top-center>div,
#toast-container.toast-bottom-center>div {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#toast-container.toast-top-full-width>div,
#toast-container.toast-bottom-full-width>div {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.toast {
  background-color: #030303;
}

.toast-success {
  background-color: #52be97;
}

.toast-error {
  background-color: #ad3942;
}

.toast-info {
  background-color: rgba(0, 0, 0, .8)
}

.toast-warning {
  background-color: #F89406;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}

/*Responsive Design*/
@media all and (max-width: 240px) {
  #toast-container>div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }

  #toast-container>div.rtl {
    padding: 8px 50px 8px 8px;
  }

  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }

  #toast-container .rtl .toast-close-button {
    left: -0.2em;
    right: 0.2em;
  }
}


#map {
  height: 100%;
  width: 100%
}

.map-container {
  width: 50%;
  height: calc(100vh - 60px);
  background: #222;
}

.row.dashboard-all-row {
  padding: 0;
  margin: 0;
}

.row.dashboard-all-row .col-md-6 {
  padding: 0;
  margin: 0;
}

#dashboard-all-content {
  padding: 40px;
  max-width: 740px;
  height: calc(100vh - 60px);
  overflow-y: scroll;
}

#dashboard-all-content .dashboard-all-card {
  padding: 10px;
  width: 50%;
}

div#the-content {
  padding-top: 60px;
}

.card-inner-container:hover {
  text-decoration: none;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, .02);
  color: inherit;
}

.card-inner-container {
  border: 1px solid rgba(0, 0, 0, .04);
  display: block;
  box-shadow: 0 0 8px rgba(0, 0, 0, .02);
  width: 100%;
  border-radius: 5px;
  padding: 20px;
  color: inherit;
  position: relative;
  background: #fff;

}

.dashboard-all-card h3.fountain-title {
  font-size: 16px;
}

.dashboard-all-card h3.fountain-title.has-error:after {
  content: '';
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMCAzMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzAgMzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNSwxMC41OGMwLjcsMCwxLjI2LDAuNDUsMS4yNiwxdjYuMjFjMCwwLjU1LTAuNTYsMS0xLjI2LDFjLTAuNywwLTEuMjYtMC40NS0xLjI2LTF2LTYuMjENCgkJQzEzLjc0LDExLjAzLDE0LjMxLDEwLjU4LDE1LDEwLjU4eiIvPg0KCTxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjE1IiBjeT0iMjEuMzkiIHI9IjEuNTkiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNS44OCw0LjcxTDE1Ljg4LDQuNzFMMTUuODgsNC43MSBNMTUsNi4yNGwxMC41LDE4LjE5aC0yMUwxNSw2LjI0IE0xNSwyLjcyYy0wLjUsMC0xLDAuMjUtMS4yOCwwLjc0DQoJCUwxLjQ1LDI0LjcxYy0wLjU3LDAuOTksMC4xNCwyLjIyLDEuMjgsMi4yMmgyNC41NGMxLjE0LDAsMS44NS0xLjIzLDEuMjgtMi4yMkwxNi4yOCwzLjQ2QzE2LDIuOTcsMTUuNSwyLjcyLDE1LDIuNzJMMTUsMi43MnoiLz4NCjwvZz4NCjwvc3ZnPg0K") !important;
  background-size: 14px;
  background-position: center 2px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #d33c3c;
  border-radius: 60px;
  position: absolute;
  margin-left: 6px;

}

.dashboard-all-card .online-status:after {
  content: 'searching';
  padding: 2px 10px;
  ;
  font-weight: 500;
  color: #fff;
  border-radius: 200px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  background: #ddd;
  display: block;
  position: absolute;
  top: 18px;
  right: 14px;
}

.dashboard-all-card .online-status.online:after {
  content: 'ONLINE';
  background-color: #3cceb4;
}

.dashboard-all-card .online-status.offline:after {
  content: 'OFFLINE';
}

.card-inner-container .divider {
  width: 100%;
  border-top: 1px solid rgba(93, 96, 107, .1);
  margin-top: 15px;
  margin-bottom: 20px;
}

.card-inner-container .card-meta {
  font-size: 14px;
  color: rgba(93, 96, 107, 1);
  margin-bottom: 2px;
}

.card-inner-container .card-meta strong {
  font-weight: 500;
}

.online-status.offline~p.card-meta {
  opacity: .3;
}


.info_content {
  max-width: 300px;
  min-width: 100px;
  padding: 5px;


}

.info_content h3 {
  font-size: 14px;
  margin: 0;
  margin-bottom: 5px;
}

.info_content p {
  font-size: 13px;
  margin: 0;
  font-weight: 400;
  color: #777;
}

.dashboard-all-header {
  padding: 30px 12px;
  margin-bottom: 30px;
}

.dashboard-all-header h2 {
  font-size: 52px;
  font-weight: 600;
  color: #45454d;
  letter-spacing: -0.04em;
}

span.user-name {
  background: #fff;
  padding: 3px 6px;
  border: 1px solid #dedfe5;
  border-radius: 4px;
  font-size: 11px;
  color: #57575b;
}

.db-indicator.db-ok {
  background-color: rgb(62, 208, 182);
}

h4.nav-fountain-title {
  color: #fff;
  font-size: 18px;
  /* font-family: 'poppins', 'roboto', arial, sans-serif; */
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  margin-right: 10px;
  line-height: 32px;
  margin-left: -7px;
  font-weight: 500;
  letter-spacing: 0.3px;
  /* border-right: 1px solid #555; */
  padding-right: 20px;
}

.db-indicator {
  width: 40px;
  height: 17px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  background-color: #cfd0d4;
  line-height: 17px;
  color: #fff;
  border-radius: 90px;
  display: inline-block;
  margin-right: 6px;
}

tr.auth-request.added {
  opacity: .3;
}

tr.auth-request {
  transition: opacity .4s linear;
}

#request-device .form-modal {
  width: 450px;
  margin: 0 auto;
  margin-top: 50px;
  max-width: 95%;
  background-color: #ebecf1;
  padding: 40px;
  border-radius: 7px;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .03);
  text-align: center;
}

#request-device .form-modal input {
  text-align: center;
  padding: 27px 10px;
}

.dashboard-all-header h3 {
  font-size: 30px;
  font-weight: 300;
  color: #45454d70;
} 

span.meta-location {
  font-size: 14px;
  display: block;
  color: rgba(89, 93, 110, .4);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.hero {
  padding-top: 80px;
  padding-bottom: 20px;
}

div#device-container {
  background: #2f3842;
  text-align: center;
  padding: 80px 10px;
  margin-bottom: 70px;
}

div#loading {
  width: 120px;
  height: 120px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

span.log-title {
  font-size: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 500;
  color: #adb5bd;
}

.log-element {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #495057;
}

.log-element:last-child {
  margin-bottom: 0;
}

ul.logs {
  padding: 0;
  list-style: none;
}

ul.logs li.log-li {
  background: #fff;
  margin-bottom: 28px;
  padding: 20px 24px;
  border-radius: 6px;
  box-shadow: 0 0 20px rgb(68 128 151 / 5%);
}

/*SCHEDULE*/





div.tab-header {
  background: #fff;
  border-radius: 4px;
  padding: 20px 30px;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 2px 0 0px rgba(0, 0, 0, 0.02);
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

div.automation-tile {
  background: #fff;
  border-radius: 4px;
  padding: 20px 30px;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 2px 0 0px rgba(0, 0, 0, 0.02);
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;

}

.form-check {
  position: relative;
  display: inline-block;
  padding: 0;
    margin-right: 6px;
}


.form-check label:hover {
  background: #bbd0e552;
}

.form-check label {
  font-size: 14px;
  padding: 8px 17px 8px 40px;
  border-radius: 6px;
  background: #d9e1e952;
  cursor: pointer;
  position:relative;
}

fieldset.ifpart,
fieldset.thenpart {
  border: 2px solid #dee2e6;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  margin-top: 15px;
  padding-top: 0;
}

fieldset.ifpart legend,
fieldset.thenpart legend {
  width: auto;
  font-size: 16px;
  padding: 0px 20px;
  font-weight: 400;
  color: #adb5bd;
  margin: 0;
}

div.tab-header:after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%0A%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='10px' y='10px' viewBox='0 0 96 96' enable-background='new 0 0 96 96' xml:space='preserve'%3E%3Cpolygon fill='%23595d6e' points='96,14 82,0 48,34 14,0 0,14 34,48 0,82 14,96 48,62 82,96 96,82 62,48 '/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 80%;
  position: absolute;
  right: 30px;
  top: calc(50% - 15px);
  opacity: .8;
  transform: rotate(45deg);
  transform-origin: 18px 15px;
  transition: transform .3s;
  background-size: 14px;
}

.fade-scale {
  transform: scale(1.1);
  opacity: 0;
  transition: all .4s cubic-bezier(0.33, 1, 0.68, 1);
}

.fade-scale.show {
  opacity: 1;
  transform: scale(1);

}

div.tab-header.active:after {
  transform: rotate(0);
  opacity: 1;

}

div.tab-header.enabled {
  border-left: 4px solid rgb(62 208 182);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

div.automation-tile.enabled {
  border-left: 4px solid rgb(62 208 182);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

div.tab-header h3 {
  margin: 0;
}

div.tab-header h3 span.slot-desc {
  color: #49505770;
  display: inline-block;
  margin-left: 30px;
}

.expander-content {
  background: #e9ecefe6;
  width: 100%;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  transition: max-height 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  max-height: 00.001px;



}

.expander-content.expanded {
  transition: max-height 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 440px;
}



.tab-headerr.add-tab h3 {
  color: #fff;
  margin: 0;
}

.tab-headerr.add-tab:hover {
  opacity: .9;
}

div.tab-headerr {
  background: #fff;
  border-radius: 4px;
  padding: 20px 30px;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 2px 0 0px rgba(0, 0, 0, 0.02);
  position: relative;

}

div.tab-headerr h3:before {
  content: '';
  background-image: url("data:image/svg+xml,%0A%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='10px' y='10px' viewBox='0 0 96 96' enable-background='new 0 0 96 96' xml:space='preserve'%3E%3Cpolygon fill='%23ffffff' points='96,14 82,0 48,34 14,0 0,14 34,48 0,82 14,96 48,62 82,96 96,82 62,48 '/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 14px;
  display: inline-block;
  width: 14px;
  height: 14px;
  transform: translate(1px, 1px) rotate(45deg);
  margin-right: 12px;

}

.tab-headerr.add-tab {
  background: #3cceb4;
}

.inner-content {
  padding: 30px;
  padding-top: 20px;
}

div#scheduledata,
#portdata,
#inputportdata {
  display:none;
}

.modal-header {
  background: rgb(50 145 227);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0;
}

.modal-content {
  border: 0;
}

a.small-button {
  background: #000000cf;
  color: #fff;
  border-radius: 9000px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

#modaltitle {
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
}

.close {
  color: #fff;
  opacity: .7;
  text-shadow: none;
}

.close:hover {
  color: #fff;
  opacity: 1;
}
.notifications-enabled .automation-title:after {
	content: ' ';
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23ADB5BD;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M9.86,4c2.21,0,4.41,0,6.62,0c1.06,0,1.7,0.62,1.7,1.69c0.01,2.78,0.01,5.56,0,8.35c0,1.06-0.64,1.69-1.7,1.69 c-4.43,0-8.86,0-13.29,0c-1.01,0-1.56-0.5-1.68-1.51C1.49,14,1.48,13.79,1.48,13.58c0-2.48,0-4.96,0-7.44c0-0.21,0-0.42,0.03-0.63 C1.63,4.5,2.18,4,3.19,4C5.41,4,7.63,4,9.86,4z M3.61,5.23C3.65,5.3,3.67,5.34,3.7,5.37c1.81,1.66,3.62,3.33,5.45,4.98 c0.51,0.46,0.89,0.42,1.43-0.07c1.64-1.49,3.28-2.99,4.92-4.48c0.17-0.16,0.38-0.29,0.56-0.43c-0.04-0.05-0.08-0.1-0.11-0.15 C11.86,5.23,7.76,5.23,3.61,5.23z M3.59,14.49c4.21,0,8.29,0,12.45,0c-0.14-0.16-0.23-0.26-0.32-0.35 c-1.08-0.99-2.19-1.95-3.24-2.96c-0.37-0.36-0.58-0.33-0.9,0.02c-0.51,0.55-1.16,0.77-1.92,0.74c-0.74-0.04-1.27-0.43-1.77-0.91 c-0.14-0.14-0.25-0.28-0.48-0.06c-0.85,0.81-1.73,1.6-2.6,2.39C4.43,13.7,4.05,14.06,3.59,14.49z M2.71,13.6 c0.08-0.02,0.13-0.02,0.16-0.05c1.22-1.13,2.43-2.26,3.65-3.39c0.21-0.19,0.19-0.32-0.02-0.51C5.61,8.87,4.75,8.07,3.88,7.28 C3.51,6.94,3.13,6.62,2.71,6.26C2.71,8.76,2.71,11.17,2.71,13.6z M16.96,6.24c-0.14,0.12-0.21,0.17-0.27,0.23 c-1.14,1.03-2.27,2.08-3.43,3.09c-0.32,0.28-0.3,0.45-0.01,0.71c0.83,0.75,1.64,1.52,2.46,2.28c0.39,0.36,0.79,0.72,1.25,1.13 C16.96,11.16,16.96,8.75,16.96,6.24z'/%3E%3C/g%3E%3C/svg%3E%0A");
	background-repeat:no-repeat;
	display:inline-block;
	width:18px;
	height:18px;
	opacity:.4;
	transform:translate(8px,4px);
}
input[type="checkbox"] + .form-check-label:before {
  content: ' ';
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 200px;
  display: inline-block;
  border: 1px solid #e9ecef;
  transform: translate(-5px,5px);
  position: absolute;
  left: 16px;
  top: 3px;
} 
.form-check input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked + .form-check-label:before {
  background-color: #3cceb4;
  border-color: #3cceb4;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M20.21,6.98c-0.09-0.55-0.43-1.02-0.94-1.29c-0.7-0.36-1.5-0.22-2.1,0.38l-7.65,7.65l-0.29-0.29 c-0.68-0.68-1.35-1.36-2.04-2.03c-0.7-0.69-1.8-0.7-2.5-0.02C4,12.07,4,13.18,4.68,13.87c1.2,1.21,2.4,2.41,3.61,3.61 c0.33,0.33,0.75,0.5,1.21,0.5c0.08,0,0.16,0,0.24-0.01c0.41-0.05,0.77-0.23,1.1-0.57l7.35-7.35c0.52-0.51,1.03-1.03,1.54-1.55 C20.12,8.09,20.3,7.54,20.21,6.98z'/%3E%3C/svg%3E%0A");
  background-repeat:no-repeat;
  background-size: 16px;
      background-position: 1px center;
  
}


.weekDays-selector input {
  display: none !important;
}

.weekDays-selector input[type=checkbox]+label {
  display: inline-block;
  border-radius: 6px;
  background: #dddddd;
  height: 20px;
  width: 40px;
  margin-right: 3px;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.weekDays-selector input[type=checkbox]:checked+label {
  background: #007bff;
  color: #ffffff;
}

.automation-title {
  font-size: 13px;
  color: #adb5bd;
  margin-bottom: 10px;
}

span.code-1,
span.code-2,
span.code-3 {
  font-size: 18px;
  font-family: monospace;
  padding: 5px 8px;
  border-radius: 6px;
  margin: 3px;
}

span.code-1 {
  background: rgb(0 123 255 / 9%);
  border: 2px solid rgb(0 123 255 / 50%);
  color: #185fab;
}

span.code-2 {
  background: rgb(255 200 0 / 9%);
  border: 2px solid rgb(255 200 0 / 50%);
  color: rgb(238 177 40);
}

span.code-3 {
  background: rgb(12 230 9 / 9%);
  border: 2px solid rgb(110 200 10 / 50%);
  color: rgb(111 184 29 / 1);

}

.event-info {
  font-size: 20px;
  color: rgb(93 96 107);
  line-height: 46px;
}

div.tab-header.automation-tile::after {
  display: none;
}

.port-actions {
  font-size: 24px;
  color: #495057;
  text-transform: capitalize;
}

.schedule-tile-description {
  font-size: 13px;
  color: #adb5bd;
}

.schedule-tile-info {
  margin-bottom: 10px;
}

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

  .map-container {
    height: 50vh;
    width: 100vw;
  }

  .card-inner-container {
    width: 100%;

  }

  #dashboard-all-content .dashboard-all-card {
    padding: 10px;
    width: 50%;
  }

  #dashboard-all-content {
    padding: 30px;
    max-width: 740px;
    height: auto;
    overflow-y: initial;
  }
}


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

  #dashboard-all-content .dashboard-all-card {
    padding: 10px;
    width: 100%;
  }

  #dashboard-all-content {
    padding: 15px;
    max-width: 100%;
    height: auto;
    overflow-y: initial;
  }
}



/*original end*/


body {
  background-color: #f5f6fa;
  font-family: "roboto", arial, sans-serif;
}

header.top-header {
  background-color: #212327;
  width: 100%;
  position: fixed;
  z-index: 999;
}

img#logo {
  height: 46px;
  margin-top: 7px;
  margin-bottom: 7px;
  margin-right: 20px;
}

nav.main-menu {
  background-color: #212327;
  padding: 0 0px;
}

footer p.copyrights {
  font-size: 14px;
  color: #323232;
}

footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ccc;
}


ul.main-menu .dropdown-menu a.dropdown-item,
ul.side-menu .dropdown-menu a.dropdown-item {
  color: rgba(116, 120, 141, .8);
  font-size: 13px;
  font-weight: 500;
}

ul.main-menu .dropdown-menu a.dropdown-item:hover,
ul.side-menu .dropdown-menu a.dropdown-item:hover {
  color: rgb(83, 85, 95);
  background-color: transparent;
}

ul.main-menu li.nav-item {
  display: inline-block;
  margin-right: 10px;
  padding: 0;

}

ul.main-menu li.nav-item.current a {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: #ccc;
}

ul.main-menu li.nav-item a {
  font-size: 14px;
  color: #ccc;
  font-weight: 400;
  padding: 6px 14px !important;
  border-radius: 4px;

}

ul.main-menu li.nav-item a:hover,
ul.main-menu li.nav-item a.current {
  text-decoration: none;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

ul.side-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: right;
  color: #fff;
  padding-top: 0px;
}

ul.side-menu li.side-menu-item {
  display: inline-block;
  margin-right: 0px;
}


ul.side-menu li.side-menu-item.current a {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

ul.side-menu li.side-menu-item a {
  font-size: 13px;
  color: #ccc;
  font-weight: 300;
  padding: 8px 12px;
  border-radius: 4px;
}

ul.side-menu li.side-menu-item a:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.dashboard-header {
  padding-bottom: 60px;
  background-color: #212328;
  font-family: 'Poppins', 'Roboto', arial, sans-serif;
  margin-bottom: 30px;
}

.dashboard-header .container {
  padding-top: 50px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.dashboard-header h1 {
  font-size: 32px;
  color: #fff;
  font-family: 'Poppins', 'Roboto', arial, sans-serif;
}

h2.subtitle.page-dashboard {
  color: #888;
  font-size: 16px;
}

span.fountain-status {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background: #5a5a5a;
  padding: 0 9px;
  display: inline-block;
  height: 16px;
  color: #ccc;
  line-height: 17px;
  position: relative;
  top: -2px;
  border-radius: 100px;
  left: 5px;
  opacity: 0;
  transition: opacity .2s ease-out;
  font-family: 'Poppins', 'Roboto', arial, sans-serif;
}

span.fountain-status.offline {
  opacity: 1;
}

span.fountain-status.online {
  opacity: 1;
  background: #3cceb4;
  color: #fff;
}

select.f-select.form-control {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 15px 46px 15px 20px;
  border-radius: 200px !important;
  -webkit-appearance: none;
  font-size: 16px;
  line-height: 16px;
  color: rgb(93, 96, 107);
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNUE1RjZFO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsNy4zbDIuOC0yLjhsOS4yLDkuM2w5LjItOS4zTDI0LDcuM0wxMiwxOS41TDAsNy4zeiIvPgo8L3N2Zz4K');
  background-size: 16px;
  background-position: calc(100% - 18px) center;
  background-repeat: no-repeat;
}

select.f-select.small-select {
  font-size: 13px;
  padding: 6px 30px 6px 10px;
  background-size: 12px;
  background-position: calc(100% - 11px) center;
  background-repeat: no-repeat;
}

input.f-input.small-input {
  font-size: 13px;
  padding: 5px 10px;
  line-height: 18px;
}

input[type="time"].f-input.small-input {
  text-align: center;
  min-height: 30px;
  min-width: 90px;
}

input.f-input {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 10px 20px;
  border-radius: 200px !important;
  -webkit-appearance: none;
  font-size: 16px;
  line-height: 26px;
  color: rgb(93, 96, 107);
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 15px;
}

input.f-input::placeholder {
  color: rgba(93, 96, 107, .3)
}

input.f-input.large-width {
  width: 500px;
  max-width: 100%;
}

button.f-button {
  background-color: rgb(62, 208, 182);
  border: 1px solid rgb(62, 208, 182);
  padding: 15px 30px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: all .15s linear;
}

button.f-button:hover {
  background-color: rgba(62, 208, 182, .8);
  border-color: rgb(62, 208, 182);
}

button.f-button:active {
  background-color: rgb(58, 192, 168) !important;
  box-shadow: 0 0 0 0.2rem rgba(62, 208, 182, .4);
  outline: none;
  border: 1px solid rgb(62, 208, 182);
}

button.f-button.secondary {
  background-color: rgb(136, 150, 170);
  border-color: rgb(136, 150, 170);
}

button.f-button.secondary:hover {
  background-color: rgba(136, 150, 170, .8);
  border-color: rgb(136, 150, 170);
}

p.lead {
  margin-bottom: 50px;
}

a.f-button-simple {
  background-color: rgb(50, 145, 227);
  border-color: rgb(50, 145, 227);
  padding: 15px 30px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: all .15s linear;
}

a.f-button-simple:hover {
  background-color: rgba(50, 145, 227, .8);
  border-color: rgb(50, 145, 227);
  text-decoration: none;
}

.error-bar {
  background: #c60027;
  text-align: center;
  color: #fff;
  font-size: 12px;
  padding: 12px 6px;
}

.loading {
  position: relative;
  border-radius: 50%;
  background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
  animation: animate 1.2s linear infinite;
  filter: blur(10px)
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }

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

.loading span {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
}

.loading span:nth-child(1) {
  filter: blur(5px);
}

.loading span:nth-child(2) {
  filter: blur(10px);
}

.loading span:nth-child(3) {
  filter: blur(25px);
}

.loading span:nth-child(4) {
  filter: blur(50px);
}

.loading:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: #fff;
  border: solid white 5px;
  border-radius: 50%;
}

.success-bar {
  background: rgb(62, 208, 182);
  text-align: center;
  color: #fff;
  font-size: 12px;
  padding: 12px 6px;
}

a.f-button-simple:active {
  background-color: rgb(40, 135, 217) !important;
  border: 1px solid rgb(50, 145, 227);
  box-shadow: 0 0 0 0.2rem rgba(50, 145, 227, .4);
}

button.f-button.secondary:active {
  background-color: rgb(126, 140, 160) !important;
  box-shadow: 0 0 0 0.2rem rgba(126, 140, 160, .3);
  outline: none;
  border: 1px solid rgb(126, 140, 160);
}

button.f-button.blue {
  background-color: rgb(50, 145, 227);
  border-color: rgb(50, 145, 227);
}

button.f-button.blue:hover {
  background-color: rgba(50, 145, 227, .8);
  border-color: rgb(50, 145, 227);
}

button.f-button.blue:active {
  background-color: rgb(40, 135, 217) !important;
  border: 1px solid rgb(50, 145, 227);
  box-shadow: 0 0 0 0.2rem rgba(50, 145, 227, .4);
}




h3.port-name {
  display: inline-block;
  font-size: 16px;
  margin-right: 20px;
  color: rgb(93, 96, 107);
  width: 60px
}


.settings-block {
  border-bottom: 1px dashed rgba(93, 96, 107, .08);
  padding: 20px 0 5px 0;

}

.map-photo-container {
  width: 480px;
  height: 200px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 30px;
  max-width:100%;
  overflow:hidden;
}

.map-photo-container img.map-photo {
  position: absolute;
  top: 0;
  left: 0;
  /*filter: grayscale(20%) brightness(1.05);*/
  border-radius: 4px;
}

h1 {
  font-size: 43px;
  color: rgb(93, 96, 107);
}

.settings-section {
  padding: 50px 0;
  border-bottom: 1px solid rgba(93, 96, 107, .13);
}

.settings-section h2 {
  font-size: 22px;
  margin-bottom: 15px
}

#location-sub-section {
  background: rgba(0, 0, 0, .0);
  text-align: center;
  padding: 20px;
}

.settings-section p {
  max-width: 600px;
  color: rgba(93, 96, 107, .8);
}

.location-modal {
  width: 480px;
  max-width: 98%;
  background: #fff;
  border-radius: 4px;
  padding-bottom: 20px;

  box-shadow: 0 0 0 12px rgba(0, 0, 0, .02);
  margin-bottom: 20px;
  margin-top: 20px;
}

.location-modal label {
  color: rgba(93, 96, 107, .9);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 12px;
}

p.small-text {
  font-size: 13px;
  max-width: 400px;
  color: rgb(116, 120, 141)
}

.text-muted {
  font-size: 15px;
  color: rgb(116, 120, 141);
  opacity: .5;
}

.lighter {
  color: rgb(149, 156, 182);
}


input#address.f-input {
  min-width: 340px;
}

.receive-time {
  text-align: left;
  padding-top: 20px;
  margin-top: 20px;
}


.dashboard-panel {
  padding: 30px;
}

h3 {
  font-size: 17px;
  color: rgb(89, 93, 110);
}

p.small-text {
  font-size: 13px;
  max-width: 400px;
  color: rgb(116, 120, 141)
}

.text-muted {
  font-size: 15px;
  color: rgb(116, 120, 141);
  opacity: .5;
}

.lighter {
  color: rgb(149, 156, 182);
}

.dashboard-panel.no-padding {
  padding: 0;
}

.cards {
  margin-bottom: 30px;
}

ul#inputs-status,
ul#outputs-list {
  list-style-type: none;
  text-indent: 0;
  margin: 0;
  padding: 0;
  cursor: default;
  -webkit-touch-callout: none;
  /* iOS Safari */
  user-select: none;
}

ul#inputs-status li,
ul.manual-operation-buttons li {
  color: rgb(89, 93, 110);
  font-size: 17px;
  display: block;
  border-bottom: 0px solid rgba(149, 156, 182, .1);
  padding: 20px 20px;
  position: relative;
  background-color: #fff;
  margin-bottom: 12px;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.03);
  font-family: 'poppins', 'roboto', arial, sans-serif;
}

span.port-label {
  display: block;
  font-size: 10px;
  opacity: .3;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

ul#inputs-status li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

ul#inputs-status li:after,
ul#output-status li:after {
  content: 'OFF';
  width: 45px;
  height: 20px;
  border-radius: 90px;
  display: block;
  background-color: rgba(149, 156, 182, .4);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: #fff;
  font-weight: 500;
  text-align: center;
  line-height: 20px;
}

ul#inputs-status li.input0:after {
  content: 'OFF';
}

ul#inputs-status li.input1:after {
  content: 'ON';
}


ul#inputs-status li.input0:after {
  background-color: rgba(149, 156, 182, .35);
}

ul#inputs-status li.input1:after {
  background-color: rgba(50, 145, 227, 1);

}

ul#inputs-status li.error-input.input1:after {
  background-color: rgba(227, 50, 50, 1);
}

ul#output-status li.active:after {
  content: 'ON';
  background: #3cceb4;
}

li.manual-operation-item {
  user-select: none;
  -webkit-touch-callout: none;
}

ul.manual-operation-buttons {
  list-style-type: none;
  padding: 0;
  margin: 0;
  cursor: default;
}

ul.manual-operation-buttons.enabled li {
  cursor: pointer;
}

ul.manual-operation-buttons.enabled li:hover {
  box-shadow: 0 0 0 3px rgba(149, 156, 182, .1);
}

.enabled .toggle,
.enabled .toggle:after {
  cursor: pointer;
}

.manual-operation-buttons li:after {
  transition: opacity .3s;
}

.manual-operation-buttons.enabled li:after {
  opacity: 0;
  transition: opacity .3s;
}


.toggle {
  width: 50px;
  height: 26px;
  background: rgba(149, 156, 182, .15);
  border-radius: 90px;
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);

}

.toggle:after {
  content: '';
  width: 22px;
  height: 22px;
  background: rgba(50, 145, 227, .4);
  display: block;
  border-radius: 300px;
  position: relative;
  top: 2px;
  left: 2px;
  transform: translateX(0);
  transition: transform .2s ease-out, opacity .4s linear;
}


.toggled .toggle:after {
  transform: translateX(24px);
  background: #4193ea;
  background: rgba(50, 145, 227, 1);
  transition: transform .2s ease-out, opacity .4s linear;
}

li.manual-operation-item.active span.label:after {
  content: 'ACTIVE';
  display: inline-block;
  background: #3cceb4;
  font-size: 9px;
  font-weight: 500;
  color: #fff;
  padding: 0px 7px;
  border-radius: 900px;
  height: 14px;
  line-height: 14px;
  position: relative;
  top: -2px;
  letter-spacing: 0.6px;
  left: 7px;
  opacity: 0;
}

.enabled li.manual-operation-item span.label:after {
  opacity: 1;
}

li.manual-operation-item span.label:after {
  content: '';
  opacity: 0;
  transition: opacity .2s ease-out;
}

li.manual-operation-item:last-child {
  border: none;
}



ul.manual-operation-buttons .toggle,
ul.manual-operation-buttons .toggle:after {
  opacity: 0;
  cursor: default;
}

ul.manual-operation-buttons.enabled .toggle,
ul.manual-operation-buttons.enabled .toggle:after {
  opacity: 1;
  cursor: pointer;
}

.manual-mode-container {
  margin-bottom: 20px;
  margin-top: 17px;
  user-select: none;
}

.manual-mode-container label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(89, 93, 110, .4);
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: 1.2px;
}

.manual-mode-container input:checked+label {
  color: rgba(89, 93, 110, .8);
}


#location-sub-section {
  background: rgba(0, 0, 0, .0);
  text-align: center;
  padding: 20px;
}




.admin-settings .map-photo-container {
  width: 100%;
  height: 380px;
  border-radius: 6px;
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  background: #ced4da;
  border: 3px solid #ced4da;
}

.admin-settings .map-photo-container img.map-photo {
  position: absolute;
  /*filter: grayscale(20%) brightness(1.05);*/
  object-fit: cover;
}

.location-encoded-data {
  margin-top: 30px;
}

.form-group.sub-form {
  background-color: rgba(161, 169, 180, 0.07);

  padding: 30px;
  border-radius: 8px;

}

.form-group.sub-form h4 {
  font-size: 20px;
}

.form-group.sub-form label {
  font-size: 15px;
  color: #555;
  margin-top: 10px;
  margin-bottom: 2px
}




.admin-settings {
  padding: 30px;
  padding-right: 300px;
}

div#panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  background-color: #222;
  height: 100%;
  color: #ccc;
  font-family: 'consolas', courier;
  font-size: 14px;
  padding: 40px;
  line-height: 1.44em;
  overflow-y: scroll;
}

div#panel code {
  color: #ccc !important;
}

div#panel pre {
  color: #ccc !important;
}

select.ff-select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNUE1RjZFO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAsNy4zbDIuOC0yLjhsOS4yLDkuM2w5LjItOS4zTDI0LDcuM0wxMiwxOS41TDAsNy4zeiIvPgo8L3N2Zz4K');
  background-size: 14px;
  background-position: calc(100% - 14px) center;
  background-repeat: no-repeat;
}

input.f-input::placeholder,
input::placeholder {
  color: rgba(93, 96, 107, .3) !important;
}

.admin-settings h3.port-name {
  display: inline-block;
  font-size: 14px;
  margin-right: 10px;
  color: rgb(93, 96, 107);
  width: 50px
}

.admin-settings .settings-block {
  border-bottom: 1px dashed rgba(93, 96, 107, .08);
  padding: 15px 0 0px 0;

}

.ports-area {
  margin-top: 40px;
  margin-bottom: 40px;
}

.ports-area .settings-block:last-child {
  border-bottom: 0;
}



.spinner {
  width: 20px;
  height: 20px;
  background-color: #3cceb4;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  float: right;
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0)
  }

  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}


@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container>div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  .settings-block * {
    display: block!important;
    width: 100%!important;
    margin-bottom: 14px;
}
  #toast-container>div.rtl {
    padding: 8px 50px 8px 8px;
  }

  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }

  #toast-container .rtl .toast-close-button {
    left: -0.2em;
    right: 0.2em;
  }

  a.large-white-tile {
    width: 100%;
  }

  div.tab-header h3 {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}
div.tab-header {
 padding: 17px 14px!important;
}
div.tab-header h3 span.slot-desc {
  margin-left: 6px!important;
}
div.tab-header:after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%0A%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='10px' y='10px' viewBox='0 0 96 96' enable-background='new 0 0 96 96' xml:space='preserve'%3E%3Cpolygon fill='%23595d6e' points='96,14 82,0 48,34 14,0 0,14 34,48 0,82 14,96 48,62 82,96 96,82 62,48 '/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 80%;
  position: absolute;
  right: 20px;
  top: calc(50% - 8px);
  opacity: .8;
  transform: rotate(45deg);
  transform-origin: 19px 18px;
  transition: transform .3s;
  background-size: 10px;
}

ul.home-list-devices {
  display: block;
}
ul.home-list-devices li a {
  width: 100%;
}

}

@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container>div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
  h3.port-name {
    display: block;
    margin-bottom: 20px;
}
  #toast-container>div.rtl {
    padding: 15px 50px 15px 15px;
  }
}