/*----------GLOBAL---------*/

* {
  border: 0;
  margin: 0;
  padding: 0;
}

:root {
  --c: #E69535;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: none;
}

ul {
  list-style: none;
}

/*----------HEADER---------*/

header {
  width: 100%;
  height: 45px;
}

header > ul {
  width: 100%;
  height: 100%;
  font-size: 0;
}

header > ul > li {
  display: inline-block;
  width: 50%;
  height: 100%;
}

header > ul > li#header_logo div {
  display: inline-block;
  cursor: pointer;
}

header > ul > li#header_logo div.menu {
  width: 40px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  background-size: auto 16px;
  margin-left: 10px;
  box-sizing: border-box;
}

header > ul > li#header_logo div.logo {
  width: 250px;
  height: 100%;
  line-height: 52px;
  background-image: url("/public/images/ista_logo_white_240x105.svg");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: left center;
  background-size: auto 22px;
  margin-left: 12px;
  padding-left: 56px;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 18px;
  font-style: italic;
  vertical-align: bottom;
}

header > ul > li#header_navigation {
  text-align: right;
  vertical-align: top;
}

header > ul > li#header_navigation > ul {
  display: inline-block;
  text-align: right;
  height: 100%;
  font-size: 0;
}

header > ul > li#header_navigation > ul > li {
  position: relative;
  display: inline-block;
  height: 100%;
  line-height: 45px;
  box-sizing: border-box;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 1001;
}

header > ul > li#header_navigation > ul > li:last-child {
  margin-right: 10px;
}

header > ul > li#header_navigation > ul > li span {
  display: inline-block;
  width: 20px;
  height: 45px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px auto;
  margin-right: 7px;
  vertical-align: top;
}

header > ul > li#header_navigation ul.menu {
  display: none;
  position: absolute;
  top: 45px;
  right: 0;
  width: auto;
  min-width: calc(100% + 10px);
  z-index: 60;
  border: 0 solid;
  border-top: 0;
  font-size: 0;
  box-shadow: 0px 2px 2px 0px rgba(11, 27, 81, 0.6);
}

header > ul > li#header_navigation ul.menu li {
  position: relative;
  text-align: left;
  padding: 0;
  margin: 0;
  line-height: 13px;
  white-space: nowrap;
}

header > ul > li#header_navigation ul.menu li a {
  display: inline-block;
  margin: 0;
  padding: 13px 23px 13px 12px;
  width: 100%;
  box-sizing: border-box;
}

header > ul > li#header_navigation ul.menu li b {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  transition: all 0.15s;
}

header > ul > li#header_navigation ul.menu li:hover b {
  opacity: 1;
}

header > #header_notice {
  display: none;
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: -200px;
  min-width: 380px;
  max-width: 500px;
  height: 33px;
  padding: 5px 8px;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
  z-index: 60;
}

header > #header_notice p {
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  margin: 0;
  color: #ffffff;
}

header > #header_notice:not(.load) span {
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  padding: 0 12px 0 0;
  display: inline-block;
  height: 18px;
  width: 18px;
  vertical-align: middle;
}

header > #header_notice:not(.load) span {
  background-image: url("/public/images/icon/svg/ffffff/info.svg");
}

header > #header_notice.info {
  background-color: #f9f3be;
  border: 1px solid #000;
}

header > #header_notice.info p {
  color: #333333 !important;
}

header > #header_notice.info span {
  background-image: url("/public/images/icon/svg/333333/info.svg");
}

header > #header_notice.warning {
  background-color: #ffa6a6;
  border: 1px solid #000;
}

header > #header_notice.warning p {
  color: #333333 !important;
}

header > #header_notice.warning span {
  background-image: url("/public/images/icon/svg/333333/warning.svg");
}

header > #header_notice.success {
  background-color: #a6ffb6;
  border: 1px solid #000;
}

header > #header_notice.success p {
  color: #333333 !important;
}

header > #header_notice.success span {
  background-image: url("/public/images/icon/svg/333333/tick.svg");
}

header > #header_notice.load span {
  display: inline-block;
  position: relative;
  font-size: 10px;
  margin: -2px 15px 0 0;
  text-indent: -9999em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(
    left,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: -webkit-linear-gradient(
    left,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(
    left,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: linear-gradient(
    to right,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 65;
  vertical-align: top;
}

header > #header_notice.load span:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}

header > #header_notice.load span:after {
  background: #00003C;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

header #header_notification > span {
  position: relative;
}

header #header_notification > span > b {
  display: none;
  position: absolute;
  top: 5px;
  left: -7px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background: red;
  border-radius: 100%;
  color: #ffffff;
  font-size: 14px;
}

header #header_notification > ul {
  position: relative;
  height: 308px;
  width: 320px !important;
  overflow-y: scroll;
  overflow-x: hidden;
  border-bottom: 3px solid #596A90 !important;
  z-index: 105 !important;
}

header #header_notification > ul.empty::after {
  position: absolute;
  top: 50%;
  left: 0;
  content: "No Notifications";
  font-size: 14px;
  font-weight: 200;
  color: #ffffff;
  width: 100%;
  margin-top: -20px;
  text-align: center;
}

header #header_notification > ul.loading::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #003372;
  background-image: url("/public/images/loader.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px;
}

header #header_notification > ul > li {
  border-bottom: 1px solid #003372;
}

header #header_notification > ul > li > a {
  padding: 11px 14px 11px 50px !important;
  background-image: url("/public/images/icon/svg/ffffff/notification.svg");
  background-repeat: no-repeat;
  background-size: 28px;
  background-position: left + 11px center;
}

header #header_notification > ul > li.ticket-create > a {
  padding: 11px 14px 11px 50px !important;
  background-image: url("/public/images/icon/svg/ffffff/ticket.svg");
  background-repeat: no-repeat;
  background-size: 28px;
  background-position: left + 11px center;
}

header #header_notification > ul > li.ticket-create-group > a {
  padding: 11px 14px 11px 50px !important;
  background-image: url("/public/images/icon/svg/ffffff/ticket.svg");
  background-repeat: no-repeat;
  background-size: 28px;
  background-position: left + 11px center;
}

header #header_notification > ul > li.consumption-report-ready > a {
  padding: 11px 14px 11px 50px !important;
  background-image: url("/public/images/icon/svg/ffffff/document.svg");
  background-repeat: no-repeat;
  background-size: 28px;
  background-position: left + 11px center;
}

header #header_notification > ul h3 {
  width: 100%;
  text-align: right;
  margin: 7px 0 0 0;
  color: #b7bdd0;
  font-size: 11px;
}

header #header_notification > ul h6 {
  white-space: normal;
}

header #header_notification > ul h6:first-child {
  margin-bottom: 6px;
  height: auto;
  line-height: 16px;
}

header #header_notification > ul li h6 span {
  display: none !important;
}

header #header_notification > ul li h6.title {
  padding-top: 0px;
  margin-bottom: 8px;
}

header #header_notification li.unread h6.title span.new {
  display: inline-block !important;
  padding: 3px 6px 2px 5px;
  margin-left: 7px;
  /* content:"new"; */
  position: absolute;
  top: 10px;
  right: 5px;
  font-size: 11px;
  line-height: 11px;
  height: auto;
  color: #ffffff;
  font-weight: 400;
  background: #73a908;
  border-radius: 4px;
  vertical-align: baseline;
  text-transform: uppercase;
}

/*----------MAIN---------*/

main {
  display: block;
  position: relative;
  width: 100%;
  height: calc(100% - 45px);
  overflow: hidden;
}

main > ul#main_wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
  height: 100%;
  font-size: 0;
}

main > ul#main_wrapper > li {
  display: inline-block;
  position: relative;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 100%;
  box-sizing: border-box;
  overflow: visible;
  vertical-align: top;
}

main > ul#main_wrapper > li#main_navigation {
  -webkit-flex: 1 1 250px;
  -ms-flex: 1 1 250px;
  flex: 1 1 250px;
  background: #333333;
  min-width: 250px;
  max-width: 250px;
  border-right: 7px solid #444444;
}

main > ul#main_wrapper > li#main_navigation.slimline {
  -webkit-flex: 1 1 65px;
  -ms-flex: 1 1 65px;
  flex: 1 1 65px;
  min-width: 65px;
  max-width: 65px;
}

main > ul#main_wrapper > li#main_quicksearch {
  -webkit-flex: 1 1 250px;
  -ms-flex: 1 1 250px;
  flex: 1 1 250px;
  background: #eeeeee;
  max-width: 250px;
  min-width: 250px;
  border-right: 1px solid #cccccc;
}

main > ul#main_wrapper > li#main_quicksearch.slimline {
  max-width: 30px;
  min-width: 30px;
}

main > ul#main_wrapper > li#main_body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 2 1 auto;
  -ms-flex: 2 1 auto;
  flex: 2 1 auto;
  width: 100%;
}

@media screen and (max-width: 1080px) {
  main > ul#main_wrapper > li#main_navigation:not(.slimline) {
    -webkit-flex: 1 1 220px;
    -ms-flex: 1 1 220px;
    flex: 1 1 220px;
    min-width: 220px;
    max-width: 220px;
  }
}

/*----------NAVIGATION---------*/

#main_navigation > ul {
  width: calc(100% + 7px);
  height: calc(100% - 60px);
  overflow: hidden;
  font-size: 0;
}

#main_navigation > ul > li {
  position: relative;
  width: calc(100% - 7px);
  min-height: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #444444;
}

#main_navigation.slimline > ul > li {
  padding-bottom: 1px;
}

#main_navigation > ul > li:last-child {
  border-bottom: 0;
}

#main_navigation > ul > li div.label {
  position: absolute;
  width: calc(100% - 10px);
  top: -11px;
  left: 8px;
  cursor: pointer;
}

#main_navigation > ul > li div.label span {
  padding: 0 8px 0 8px;
  background: #333333;
  font-size: 13px;
  font-weight: 600;
  color: #aaaaaa;
  text-transform: uppercase;
}

#main_navigation.slimline > ul > li div.label span {
  font-size: 0;
}

#main_navigation > ul > li div.label b {
  position: absolute;
  top: 2px;
  right: 8px;
  padding: 0 8px 0 8px;
  height: 10px;
  background: #333333;
}

#main_navigation.slimline > ul > li div.label b {
  display: none;
}

#main_navigation > ul > li div.label b:after {
  position: absolute;
  top: 6px;
  right: 4px;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 3.5px 0 3.5px;
  border-color: #aaaaaa transparent transparent transparent;
}

#main_navigation.slimline > ul > li div.label b:after {
  border-width: 0;
}

#main_navigation > ul > li div.label.hidden b:after {
  border-width: 0 3.5px 5px 3.5px;
  border-color: transparent transparent #aaaaaa transparent;
}

#main_navigation > ul > li#navigation_profile {
  max-height: 80px;
  white-space: nowrap;
  overflow: hidden;
}

#main_navigation .avatar {
  margin: 13px 0 13px 9px;
}

#main_navigation.slimline .avatar {
  width: 34px;
  height: 34px;
  border: 2px solid #666666;
  margin: 13px 0 13px 10px;
}

#main_navigation.slimline .avatar span {
  width: 34px;
  height: 34px;
  line-height: 34px;
  font-size: 19px;
  font-weight: 600;
}

#navigation_profile_detail {
  display: inline-block;
  width: auto;
  vertical-align: top;
  margin: 22px 0 0 10px;
}

#main_navigation.slimline #navigation_profile_detail li {
  font-size: 0 !important;
}

#main_navigation li#navigation_profile_detail_position {
  cursor: pointer;
}

#main_navigation li#navigation_profile_detail_position > span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 4px;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/public/images/icon/svg/ffffff/switch.svg");
  background-size: contain;
}

#main_navigation li#navigation_profile_detail_position:hover > span {
  transform: rotate(20deg);
  transition: 0.1s all;
}

#main_navigation > ul > li > ul.links {
  width: 100%;
  padding: 8px 0 6px 0;
  font-size: 0;
}

#main_navigation > ul > li > ul.links li div {
  position: relative;
  padding: 10px 0;
  cursor: pointer;
}

#main_navigation.slimline > ul > li > ul.links li div span {
  font-size: 0 !important;
}

#main_navigation > ul > li > ul.links li div b {
  display: none;
  position: absolute;
  top: 0;
  right: -6px;
  width: 6px;
  height: 100%;
}

#main_navigation > ul > li > ul.links li.selected div b {
  display: block;
}

#main_navigation > ul > li > ul.links li:not(.disabled):not(.empty) div:hover {
  background: #444444;
}

#main_navigation > ul > li > ul.links > li > ul.links li div {
  padding: 10px 0;
  margin-left: 17px;
  cursor: pointer;
  border-left: 1px solid #555555;
}

#main_navigation.slimline > ul > li > ul.links > li > ul.links li {
  display: none;
}

#main_navigation > ul > li > ul.links li span.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 10px 0 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
  vertical-align: top;
}

#main_navigation > ul > li > ul.links li.empty span {
  color: #999999 !important;
  padding-left: 24px;
}

#main_navigation > ul > li > ul.links li.disabled span.icon {
  background-size: 0;
}

#main_navigation.slimline > ul > li > ul.links li span.icon {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 18px;
  background-size: 20px;
}

#navigation_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-image: url("/public/images/powered_by_ista.svg");
  background-repeat: no-repeat;
  background-size: 210px;
  background-position: center;
}

#main_navigation.slimline #navigation_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-image: url("/public/images/powered_by_ista_slimline.svg");
  background-repeat: no-repeat;
  background-size: 40px;
  background-position: center;
}

#version {
  font-size: 11px; 
  color: #666666; 
  float:right;
  position: relative;
  bottom: -42px;
  margin-right: 5px;
}

#main_navigation.slimline #version {
  width: 100%;
  text-align: center;
  margin-right: 0px;
}

/*----------SWITCH CUSTOMER----------*/

#switch_customer {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(20, 28, 54, 0.85);
  z-index: 9999;
}

#switch_customer span.close {
  position: absolute;
  top: 55px;
  right: 10px;
  width: 30px;
  height: 30px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
  background-image: url("/public/images/icon/svg/ffffff/error.svg");
  cursor: pointer;
}

#switch_customer > div.wrapper {
  height: 100%;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

#switch_customer > div.wrapper > form {
  max-width: 500px;
  margin: 0 auto 12px auto;
  border-bottom: 1px solid #777777;
  text-align: left;
  font-size: 0;
}

#switch_customer > div.wrapper > form > label {
  font-size: 18px;
  color: #ffffff;
  text-align: left;
  font-weight: 400;
  width: 150px;
  box-sizing: border-box;
}

#switch_customer > div.wrapper > form > input {
  text-align: left;
  padding: 7px 8px;
  border-radius: 2px;
  width: 350px;
  font-size: 16px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

#switch_customer > div.wrapper > ul {
  position: relative;
  max-width: 500px;
  margin: 0 auto 12px auto;
  padding: 0 0 12px 0;
  font-size: 0;
  height: 200px;
}

#switch_customer.loading > div.wrapper > ul::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50px;
  background-image: url("/public/images/loader_darkback.gif");
}

#switch_customer > div.wrapper > ul > li {
  text-align: left;
  color: #cccccc;
  font-size: 14px;
  margin-left: 155px;
  padding: 9px 0;
}

#switch_customer.loading > div.wrapper > ul > li {
  display: none;
}

#switch_customer > div.wrapper > ul > li:hover {
  background-position: right;
  background-repeat: no-repeat;
  background-size: 14px;
  color: #ffffff;
  background-image: url("/public/images/icon/svg/ffffff/forward.svg");
  cursor: pointer;
}

#switch_customer > div.wrapper > div.link {
  max-width: 500px;
  margin: 0 auto;
  text-align: right;
}

#switch_customer > div.wrapper > div.link > a.cancel {
}

#switch_customer > div.wrapper > div.link > a:hover {
  text-decoration: underline;
  cursor: pointer;
}

html.blur header > *,
html.blur main ul#main_wrapper li > *,
html.blur .ui-dialog {
  filter: blur(5px) !important;
  -webkit-filter: blur(5px) !important;
}

/*----------QUICK SEARCH---------*/

#quicksearch_toggle {
  border-bottom: 1px solid #dddddd;
  height: 34px;
  line-height: 34px;
  cursor: pointer;
  transition: all 0.15s;
}

#quicksearch_toggle div {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  vertical-align: top;
}

#quicksearch_toggle div.open {
  display: inline-block;
  font-weight: 600;
  color: #555555;
  background-image: url("/public/images/icon/svg/333333/direction_left.svg");
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: left + 10px center;
  padding: 0 0 0 25px;
}

#quicksearch_toggle form.open {
  display: inline-block;
}

#main_quicksearch {
  overflow: hidden;
}

#main_quicksearch.slimline #quicksearch_toggle div.open {
  display: none;
}

#main_quicksearch.slimline form,
#main_quicksearch.slimline div#quicksearch_recent {
  opacity: 0;
}

#quicksearch_toggle div.close {
  display: none;
  background-image: url("/public/images/icon/svg/333333/thunderbolt.svg");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center center;
  opacity: 0.7;
}

#main_quicksearch.slimline #quicksearch_toggle div.close {
  display: inline-block;
}

#main_quicksearch form,
#main_quicksearch div#quicksearch_recent {
  width: 100%;
  padding: 7px 11px;
  box-sizing: border-box;
  transition: all 0.25s;
  opacity: 1;
}

#main_quicksearch form input {
  width: 100% !important;
  box-sizing: border-box;
}

#main_quicksearch form h6 {
  margin: 12px 0 16px 0;
}

#main_quicksearch form button {
  margin-top: 10px;
}

#main_quicksearch div#quicksearch_recent {
  border-top: 1px solid #cccccc;
  margin-top: 10px;
  padding-top: 16px;
}

#main_quicksearch div#quicksearch_recent h5 {
  display: none;
  padding-top: 5px;
}

#main_quicksearch div#quicksearch_recent a {
  display: block;
  width: 100%;
  padding: 2px 0 2px 20px;
  font-size: 13px;
  text-decoration: underline;
  color: #777777;
  margin-top: 4px;
  background-image: url("/public/images/icon/svg/333333/search.svg");
  background-repeat: no-repeat;
  background-position: left + 2px center;
  background-size: 13px;
  box-sizing: border-box;
}

#quicksearch_toggle:hover {
  background-color: #e2e2e2;
  background-position: left + 9px center;
}

/*----------DIALOG---------*/

.ui-dialog {
  position: relative !important;
}

.ui-dialog.headless .ui-dialog-titlebar {
  display: none;
}

.ui-dialog-content {
  overflow: visible !important;
}

.ui-dialog-content.loading::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("../images/loader.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px;
  background-color: rgba(255, 255, 255, 0.65);
}

.ui-dialog div.dialog-tab.hidden {
  display: none;
}

.ui-dialog h2 {
  width: 100%;
  text-align: center;
  margin: 10px 0 0 0;
}

.ui-dialog h5 {
  width: 100%;
  text-align: center;
  margin: 5px 0 20px 0;
}

.ui-dialog div.loader {
  width: 100%;
  height: 42px;
  margin: 16px 0 10px 0;
  background-image: url("../images/loader.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px;
}

.ui-dialog div.success,
.ui-dialog div.fail {
  width: 100%;
  height: 42px;
  margin: 16px 0 10px 0;
  text-align: center;
}

.ui-dialog div.success svg,
.ui-dialog div.fail svg {
  height: 38px;
  margin: 0 auto;
}

.ui-dialog div.success.fallback,
.ui-dialog div.fail.fallback {
  content: "";
  height: 38px;
  width: 38px;
  margin: 16px auto 10px auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ui-dialog div.success.fallback {
  background-image: url("/public/images/fallback/success.png");
}

.ui-dialog div.fail.fallback {
  background-image: url("/public/images/fallback/fail.png");
}

.ui-dialog span.titleicon {
  display: inline-block;
  width: 20px;
  height: 19px;
  margin-right: 8px;
  vertical-align: bottom;
  background-position: center;
  background-repeat: no-repeat;
}

.ui-dialog span.titleicon.lock {
  background-image: url("../images/icon/svg/333333/lock.svg");
  background-size: 15px;
}

.ui-dialog span.titleicon.ticket {
  background-image: url("../images/icon/svg/333333/ticket_single.svg");
  background-size: 16px;
}

.ui-dialog span.titleicon.payment {
  background-image: url("../images/icon/svg/333333/payment.svg");
  background-size: 19px;
}

.ui-dialog span.titleicon.assignee {
  background-image: url("../images/icon/svg/333333/user.svg");
  background-size: 19px;
}

.ui-dialog span.titleicon.link {
  background-image: url("../images/icon/svg/333333/link.svg");
  background-size: 19px;
}

.ui-dialog span.titleicon.twoway {
  background-image: url("../images/icon/svg/333333/twoway.svg");
  background-size: 19px;
}

/*----------SWAL----------*/

div.sweet-alert.loader > p {
  height: 46px;
  width: 100%;
  font-size: 0;
  background-image: url("/public/images/loader.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 46px;
  margin: 12px 0 7px 0;
}

/*div.sweet-alert.loader > h1 {
	margin:0 !important;
}*/

div.sweet-alert.loader button {
  color: #aaaaaa;
  font-size: 15px;
  margin-top: 7px !important;
  background-color: #ffffff !important;
}

div.sweet-alert.loader button:hover {
  background-color: #eeeeee !important;
}

/*----------BODY---------*/

.avatar {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid #666666;
  border-radius: 100%;
  background: #cccccc;
  vertical-align: top;
}

.avatar span {
  display: inline-block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 27px;
  font-weight: 600;
  color: #333333;
}

#body_header {
  position: relative;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: calc(100% - 20px);
  margin: 10px 10px 5px 10px;
  padding: 0;
  box-sizing: border-box;
}

#body_header div.flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  height: 34px;
  padding: 0 0 7px 0;
  border-bottom: 1px solid #999999;
}

#body_header_title {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  white-space: nowrap;
}

#body_header_title span {
  display: inline-block;
  width: 31px;
  height: 31px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
  vertical-align: top;
  margin-right: 6px;
}

#body_header_navigation {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  text-align: right;
}

#body_header_navigation a.button {
  margin-left: 10px;
}

#header_navigation_search input {
  background: none;
  width: 60px;
  margin: 0 -8px 0 -6px;
  padding: 4px 6px;
  transition: width 0.25s;
}

#header_navigation_search input:focus {
  width: 175px;
}

#body_tab_navigation {
  display: fixed;
  margin: 0;
  width: 100%;
  height: auto;
  max-height: 38px;
  text-align: left;
}

#body_tab_navigation > li {
  position: relative;
  font-size: 14px;
  padding: 8px 16px;
  margin: -1px 0 3px -1px;
  display: inline-block;
  cursor: pointer;
  border: 1px solid #999999;
  transition: background-color 0.25s;
}

#body_tab_navigation > li.hidden {
  opacity: 0.01;
}

#body_tab_navigation > li.ui-draggable-dragging {
  transition: none;
  border: 0;
  padding: 0;
  font-size: 0;
}

#body_tab_navigation > li.ui-draggable-dragging span {
  display: none;
}

#body_tab_navigation > li.ui-draggable-dragging::after {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 10px;
  content: "Drag Away to Open in New Tab";
  font-size: 14px;
  border: 1px solid #333333;
  border-radius: 3px;
  background: #444444;
  color: #ffffff;
  white-space: nowrap;
  z-index: 1000;
  cursor: pointer;
}

#body_tab_navigation > li.ui-draggable-dragging.release::after {
  content: "Release to Open in New Tab";
}

#body_tab_navigation > li.ui-draggable-dragging.cancel::after {
  content: "Cancel";
}

#body_tab_navigation > li:last-child {
  border-right: 1px solid #999999;
}

#body_tab_navigation > li.selected {
  background: #e6e6e6;
  text-shadow: 0.35px 0 0 #000000;
}

#body_tab_navigation > li > span {
  position: absolute;
  bottom: -4px;
  left: -1px;
  height: 2px;
  content: "";
  width: 100%;
  border-width: 1px;
  border-style: solid;
}

#body_tab_navigation > li:not(.selected) > span {
  background: #cccccc !important;
  border-color: #999999 !important;
  border-left-color: #cccccc !important;
}

#body_tab_navigation > li.selected > span {
  z-index: 1000;
}

#body_tab_navigation > li:not(.selected):hover {
  text-shadow: 0.35px 0 0 #000000;
  background: #eeeeee;
}

#body_tab_navigation > li > ul {
  display: none;
  position: absolute;
  top: 38px;
  right: -1px;
  border: 1px solid #999999;
  border-top: 0px;
  z-index: 1000;
  box-sizing: border-box;
}

#body_tab_navigation > li.more:hover > ul {
  display: block;
}

#body_tab_navigation > li.more:hover {
  border-bottom: 0;
}

#body_tab_navigation > li.more:hover > span {
  background: #eeeeee !important;
  border-top: 1px solid #eeeeee !important;
  border-bottom: 1px solid #eeeeee !important;
  border-left: 1px solid #999999 !important;
}

#body_tab_navigation > li > ul > li {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  text-shadow: none;
  text-align: center;
  background: #ffffff;
  transition: background-color 0.25s;
  white-space: nowrap;
}

#body_tab_navigation > li > ul > li:hover {
  background: #eeeeee;
  text-shadow: 0.35px 0 0 #000000;
}

#body_tab_navigation > li > ul > li:not(:last-child) {
  border-bottom: 1px solid #cccccc;
}

#body_main {
  -webkit-flex: 1 0;
  -ms-flex: 1 0;
  flex: 1 0;
  position: relative;
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  overflow-y: scroll !important;
  overflow-x: hidden;
  overflow: scroll;
}

#body_main_title {
  min-width: 100%;
  padding: 8px 5px;
  margin: 0 0 8px 0;
  box-sizing: border-box;
}

#body_main_title h6 {
  display: inline-block;
}

#body_main_title h6:hover {
  text-decoration: underline;
}

#body_main_title h6 img {
  max-height: 15px;
  max-width: 15px;
  padding: 0 9px 2px 9px;
  vertical-align: text-bottom;
}

#body_main div.banner {
  white-space: nowrap;
  width: calc(100% - 10px);
  margin: 0 5px 12px 5px;
  font-size: 13px;
  font-weight: 600;
  color: #4c442e;
  padding: 10px;
  text-align: center;
  background-color: #f9e6be;
  border: 1px solid #cdae5c;
  box-sizing: border-box;
}

#body_main div.banner.hidden {
  display: none;
}

#body_main div.banner > span {
  display: inline-block;
  height: 17px;
  width: 20px;
  margin-right: 7px;
  vertical-align: middle;
  background-image: url("../images/icon/svg/333333/info.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#body_main div.banner.announcement > span {
  height: 20px;
  width: 21px;
  background-image: url("../images/icon/svg/333333/announcement.svg");
}

#body_main div.banner.announcement-global > span {
  height: 23px;
  width: 24px;
  background-image: url("../images/icon/svg/333333/global_announcement.svg");
}

#body_main div.banner > h4 {
  white-space: normal;
  display: inline-block;
  max-width: calc(100% - 34px);
  text-align: left;
  box-sizing: border-box;
  vertical-align: middle;
}

ul#breadcrumbs + #body_main {
  margin-top: 29px;
}

ul#breadcrumbs {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  font-size: 0;
  box-sizing: border-box;
  padding: 7px 10px 3px 15px;
  background: rgba(255, 255, 255, 0.85);
  z-index: 100;
}

ul#breadcrumbs > li {
  position: relative;
  margin: 0 20px 0 4px;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #616161;
  box-sizing: border-box;
  vertical-align: top;
  text-decoration: underline;
  cursor: pointer;
}

ul#breadcrumbs > li:not(:last-child)::after {
  background-image: url("/public/images/icon/svg/333333/goto.svg");
  background-repeat: no-repeat;
  background-size: 8px;
  background-position: center;
  content: "";
  text-decoration: none !important;
  position: absolute;
  top: 0;
  right: -20px;
  height: 100%;
  width: 15px;
}

ul#breadcrumbs > li > a {
  color: inherit;
}

ul.body-section {
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -o-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
  font-size: 0;
}

ul.body-section.two-column {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

ul.body-section.flex-400 {
  width: calc(100% + 20px);
  margin-left: -10px;
}

@media screen and (max-width: 1265px) {
  ul.body-section.two-column input[type="text"],
  ul.body-section.two-column input[type="password"],
  ul.body-section.two-column input[type="file"],
  ul.body-section.two-column textarea {
    width: 185px;
  }
  ul.body-section.two-column textarea {
    width: 185px !important;
  }
  ul.body-section.two-column textarea.fullwidth {
    width: 347px !important;
  }
  ul.body-section.two-column div.input-edge {
    padding: 10px 0 0 150px;
    width: 347px;
    text-align: right;
    box-sizing: border-box;
  }
  ul.body-section.two-column form.autowidth .select2 {
    width: 197px !important;
  }
}

@media screen and (max-width: 1080px) {
  ul.body-section.two-column input[type="text"],
  ul.body-section.two-column input[type="password"],
  ul.body-section.two-column input[type="file"],
  ul.body-section.two-column textarea {
    width: 145px;
  }
  ul.body-section.two-column textarea {
    width: 145px !important;
  }
  ul.body-section.two-column textarea.fullwidth {
    width: 307px !important;
  }
  ul.body-section.two-column div.input-edge {
    padding: 10px 0 0 150px;
    width: 307px;
    text-align: right;
    box-sizing: border-box;
  }
  ul.body-section.two-column form.autowidth .select2 {
    width: 157px !important;
  }
}

ul.body-section.hidden {
  display: none;
}

ul.body-section > li {
  position: relative;
  -webkit-flex: 0 1 100%;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
  margin-bottom: 17px;
  padding: 7px 0;
  background-color: #ffffff;
  box-sizing: border-box;
}

ul.body-section > li.dropzone {
  content: "<span></span>";
  border: 2px dashed #cccccc;
  border-radius: 6px;
}

ul.body-section > li.dropzone > span {
  width: 100px;
  height: 100px;
  background: #000000;
}

ul.body-section > li.hidden {
  display: none;
}

ul.body-section.two-column > li {
  -webkit-flex: 0 49%;
  -ms-flex: 0 49%;
  flex: 0 49%;
}

ul.body-section.two-column > li:last-child {
  margin-right: 0;
}

ul.body-section.flex-400 > li {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 400px;
  min-height: 200px;
  /*height:200px;*/
  padding: 7px 0;
  margin: 0 10px;
}

ul.body-section.flex-250 > li {
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  min-width: 250px;
  min-height: 200px;
  height: 200px;
  padding: 7px 0;
  margin: 0 10px;
}

ul.body-section.flex-third > li {
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  min-width: 30%;
  min-height: 200px;
  height: 275px;
  padding: 7px 0;
  margin: 0 10px;
}

ul.body-section.flex-equal > li {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
}

ul.body-section > li div.section-header {
  position: relative;
  width: 100%;
  border-top: 1px solid #cccccc;
  margin-bottom: 22px;
}

ul.body-section > li div.section-header h3 {
  position: absolute;
  left: 0;
  top: -8px;
  background: #ffffff;
  padding-right: 10px;
}

ul.body-section > li ul.icons {
  position: absolute;
  right: 0;
  top: -8px;
  background: #ffffff;
  font-size: 0;
}

ul.body-section > li ul.icons > li {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 0;
  padding: 0;
  margin: 0;
  margin-left: 7px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.1s;
}

ul.body-section > li ul.icons > li:hover {
  opacity: 0.8;
}

ul.body-section > li ul.icons > li.action {
  background-image: url("/public/images/icon/svg/333333/node.svg");
  background-size: 15px;
}

ul.body-section > li ul.icons > li.sortable {
  background-image: url("/public/images/icon/svg/333333/sortable.svg");
  background-size: 11px;
}

ul.body-section > li ul.icons > li.hideable {
  background-image: url("/public/images/icon/svg/333333/arrow_open.svg");
  background-size: 10px;
}

ul.body-section > li.hidden ul.icons > li.hideable {
  background-image: url("/public/images/icon/svg/333333/arrow_closed.svg");
}

ul.body-section > li div.section-body {
  width: 100%;
  padding: 0 10px 0 15px;
  box-sizing: border-box;
  transition: 0.25s all;
}


ul.body-section > li.loading:not(.spinnerless)::after {
  position: absolute;
  top: 12px;
  content: "";
  width: 100%;
  height: calc(100% - 12px);
  background-image: url("../images/loader.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
}

ul.body-section > li div.section-footer {
  padding: 10px 5px 0 15px;
  text-align: left;
}

ul.selectable-list {
  position: relative;
  width: 100%;
  height: 500px;
  border: 1px solid #999999;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 7px 0 0 0;
}

ul.selectable-list.loading {
  opacity: 0.7;
  pointer-events: none;
}

ul.selectable-list.loading::after {
  position: absolute;
  top: 12px;
  content: "";
  width: 100%;
  height: calc(100% - 12px);
  background-image: url("../images/loader.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
}

ul.selectable-list:not(.loading).empty::after {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -10px;
  text-align: center;
  content: "No Options Available";
  font-size: 13px;
  color: #777777;
}

ul.selectable-list > li {
  padding: 5px 6px;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

ul.selectable-list > li:hover {
  background: #e6e6e6;
}

ul.selectable-list > li.selected {
  background: #3372da;
  color: #ffffff;
}

ul.selectable-list > li.global {
  background-position: center right + 4px;
  background-repeat: no-repeat;
  background-size: 16px;
  background-image: url("/public/images/icon/svg/333333/global.svg");
}

input.mapping-input,
input.search.linked,
input.search.unlinked,
input.search.group.assigned,
input.search.group.unassigned,
input.search.user.assigned,
input.search.user.unassigned,
input.search.customer.assigned,
input.search.customer.unassigned {
  width: 100%;
  box-sizing: border-box;
  background-image: url("../images/icon/svg/333333/search.svg");
  background-position: right + 5px center;
  background-repeat: no-repeat;
  background-size: 15px;
  margin: 0 0 0 0;
}

/*----------LAYOUT----------*/

ul.layout {
  list-style: none;
  font-size: 0;
}

ul.layout.gridlines > li {
  border: 1px solid #000000;
}

ul.layout > li {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  padding: 0 5px;
  width: 100%;
}

ul.layout.three-column > li {
  width: 33.33%;
}

ul.layout.two-column > li {
  width: 50%;
}

ul.layout.flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

ul.layout.flex > li {
  display: inline-block;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1;
  width: auto;
}

ul.layout.flex > li.no-flex {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: auto;
}

/*----------DASHBOARD---------*/

div#greeting > h1,
div#greeting > h2 {
  opacity: 0;
  transition: 0.35s all;
}

div#greeting > h1 {
  height: 31px;
}

div#greeting > h2 {
  height: 23px;
}

ul.list {
  width: 100%;
}

ul.list > li {
  width: 100%;
  height: auto;
  font-size: 14px;
  padding: 4px 4px 4px 25px;
  background-position: left center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

ul.list.ticket > li {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  background-image: url("/public/images/icon/svg/333333/ticket_single.svg");
  background-size: 16px;
}

ul.list.market > li {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  background-image: url("/public/images/icon/svg/333333/division.svg");
  background-size: 16px;
}

ul.list.search > li {
  background-image: url("/public/images/icon/svg/333333/search.svg");
  background-size: 16px;
  height: auto;
}

ul.list.alarm > li {
  background-image: url("/public/images/icon/svg/333333/warning.svg");
  background-size: 16px;
  height: auto;
}

ul.list.utility > li {
  background-size: 12px;
  height: auto;
}

ul.list.utility.gas > li {
  background-image: url("/public/images/icon/svg/ffffff/gas.svg");
}

ul.list.utility.electric > li {
  background-image: url("/public/images/icon/svg/ffffff/electric.svg");
}

ul.list.utility.water > li {
  background-image: url("/public/images/icon/svg/ffffff/water.svg");
}

ul.list.utility.heat > li {
  background-image: url("/public/images/icon/svg/ffffff/heat.svg");
}

ul.list.utility.cooling > li {
  background-image: url("/public/images/icon/svg/ffffff/cooling.svg");
}

ul.list.quicklinks > li {
  background-image: url("/public/images/icon/svg/333333/electric.svg");
  background-size: 10px;
  background-position: left + 3px center;
}

ul.list.report > li {
  background-image: url("/public/images/icon/svg/333333/graph.svg");
  background-size: 18px;
  background-position: left center;
}

ul.list.job > li {
  background-image: url("/public/images/icon/svg/333333/copy.svg");
  background-size: 16px;
  background-position: left center;
}

ul.list.job > li.review {
  background-image: url("/public/images/icon/svg/333333/preview.svg");
}

ul.list.job > li.ebill {
  background-image: url("/public/images/icon/svg/333333/email.svg");
  background-size: 14px;
  background-position: left + 1px center;
}

ul.list.job > li.postal {
  background-image: url("/public/images/icon/svg/333333/stamp.svg");
  background-size: 14px;
  background-position: left + 1px center;
}

ul.list.job > li.download {
  background-image: url("/public/images/icon/svg/333333/download.svg");
  background-size: 14px;
  background-position: left + 1px center;
}

ul.list.job > li.pending {
  background-image: url("/public/images/icon/svg/333333/pending.svg");
  background-size: 14px;
  background-position: left + 1px center;
}

ul.list.job > li.thunderbolt {
  background-image: url("/public/images/icon/svg/333333/thunderbolt.svg");
  background-size: 12px;
}

ul.list.job > li.invoice {
  background-image: url("/public/images/icon/svg/333333/invoice.svg");
}

ul.list.job > li.print {
  background-image: url("/public/images/icon/svg/333333/print.svg");
}

ul.list.job > li.queue {
  background-image: url("/public/images/icon/svg/333333/stack.svg");
}

ul.list.job > li.approved {
  background-image: url("../images/icon/svg/333333/tick.svg");
  background-size: 15px;
}

ul.list.job > li.rejected {
  background-image: url("../images/icon/svg/333333/error.svg");
  background-size: 12px;
}

ul.list.job > li.selected a {
  font-weight: 800;
  text-decoration: none !important;
}

ul.list > li > a > span {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

ul.list > li > a {
  position: relative;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  text-decoration: underline;
  color: #333333;
  cursor: pointer;
}

ul.list > li > a:hover::after {
  position: absolute;
  top: 0;
  content: "";
  display: inline-block;
  background-image: url("/public/images/icon/svg/333333/goto.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 9px;
  height: 18px;
  margin-left: 4px;
  vertical-align: baseline;
}

/*----------DETAIL GROUP----------*/

ul.stat {
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -o-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  font-size: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

ul.stat > li {
  -webkit-flex: 0 1 140px;
  -ms-flex: 0 1 140px;
  flex: 0 1 140px;
  height: auto;
  padding: 10px;
  text-align: center;
  border-radius: 2px;
  margin: 0 4px;
}

ul.stat > li h1 {
  color: #ffffff;
  font-weight: 200;
  font-size: 20px;
}

ul.stat > li h3 {
  color: #eeeeee;
  font-weight: 300;
}

ul.stat > li h1 span.overdue {
  display: none;
  width: 10px;
  height: 10px;
  line-height: 31px;
  border-radius: 100%;
  border: 2px solid #eeeeee;
  background: red;
  margin-left: 6px;
  margin-top: -4px;
  vertical-align: middle;
}

ul.stat > li h1 span.info {
  display: none;
  width: 14px;
  height: 14px;
  line-height: 31px;
  border-radius: 100%;
  background-image: url("/public/images/icon/svg/ffffff/info.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 6px;
  margin-top: -4px;
  vertical-align: middle;
  font-size: 8px;
  color: #003372;
}

ul.stat > li h1.overdue span.overdue {
  display: inline-block;
}

ul.stat > li h1.info span.info {
  display: inline-block;
}

/*----------TICKET SEARCH----------*/

ul.page-filter {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  font-size: 0;
  margin-bottom: 15px;
}

ul.page-filter > li {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: inline-block;
}

ul.page-filter > li:first-child span.select2-selection {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

ul.page-filter > li:not(:first-child):not(:last-child) span.select2-selection {
  border-radius: 0 !important;
}

ul.page-filter
  > li:not(:first-child)
  span.select2-selection[aria-expanded="false"] {
  border-left-color: #dddddd;
}

ul.page-filter > li:last-child span.select2-selection {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

ul.page-filter > li input.fullwidth {
  width: 100% !important;
}

/*----------STATUS---------*/

span.status.inline {
  display: inline-block;
  text-transform: uppercase;
  font-size: 11px;
  border: 1px solid #aaaaaa;
  color: #777777;
  padding: 3px 5px;
  border-radius: 3px;
  font-weight: 400;
  white-space: nowrap;
  background: #cccccc;
  min-width: 30px;
  text-align: center;
  height: auto !important;
  line-height: normal !important;
}

span.status.inline.input {
  display: inline-block;
  margin: 3px 0 6px 5px;
}

span.status.inline.holder {
  background: #ffffff;
  border-color: #ffffff;
  color: #ffffff;
  min-width: 1px;
}

span.status.inline.rejected,
span.status.inline.inactive,
span.status.inline.cancelled,
span.status.inline.overdue,
span.status.inline.onhold,
span.status.inline.notapproved,
span.status.inline.unabletovalidate,
span.status.inline.locked,
span.status.inline.expired,
span.status.inline.error,
span.status.inline.false,
span.status.inline.nodata,
span.status.inline.nousage,
span.status.inline.noreads,
span.status.inline.red {
  background: #bc3131;
  border-color: #9f2929;
  color: #ffffff;
}

span.status.inline.light-red {
  background: #ffb1b1;
  border-color: #ffb1b1;
  color: #000;
  font-size: 13px;
}
span.status.inline.light-green {
  background: #d4f8d3;
  border-color: #d4f8d3;
  color: #000;
  font-size: 13px;
}
span.status.inline.light-yellow {
  background: #fff0bb;
  border-color: #fff0bb;
  color: #000;
  font-size: 13px;
}

span.grey {
  color: grey;
  font-size: 13px;
}

span.status.inline.partialdata,
span.status.inline.gold {
  background: #daa520;
  border-color: #b98b15;
  color: #333333;
  font-weight: 600;
}

span.status.inline.missingreads,
span.status.inline.missingdata,
span.status.inline.orange {
  background: #f78e2f;
  border-color: #f7ab08;
  color: #333333;
  font-weight: 600;
}

span.status.inline.header {
  background: #c441b7;
  border-color: #9e3493;
  color: #ffffff;
}

span.status.inline.inprogress,
span.status.inline.unpaid,
span.status.inline.nextstep,
span.status.inline.sent,
span.status.inline.received,
span.status.inline.processing,
span.status.inline.processed,
span.status.inline.notscheduled,
span.status.inline.blue,
span.status.inline.repeat {
  background: #003372;
  border-color: #3b526b;
  color: #ffffff;
}

span.status.inline.awaitingcustomer,
span.status.inline.awaitingengineer,
span.status.inline.awaitingsupplier,
span.status.inline.duetoday,
span.status.inline.yellow,
span.status.inline.partial,
span.status.inline.pendingdata,
span.status.inline.pending,
span.status.inline.ready,
span.status.inline.creating,
span.status.inline.pending-processing,
span.status.inline.processing,
span.status.inline.pending-compression,
span.status.inline.compressing,
span.status.inline.pending-notification,
span.status.inline.notifying {
  background: #ffd351;
  border-color: #d9b945;
  color: #333333;
  font-weight: 600;
}

span.status.inline.resolved,
span.status.inline.closed,
span.status.inline.paid,
span.status.inline.accepted,
span.status.inline.authorised,
span.status.inline.active,
span.status.inline.approved,
span.status.inline.complete,
span.status.inline.available,
span.status.inline.credit,
span.status.inline.credit-invoice,
span.status.inline.credit-adjustment,
span.status.inline.approved-query,
span.status.inline.approved-sent,
span.status.inline.used,
span.status.inline.ok,
span.status.inline.true,
span.status.inline.scheduled,
span.status.inline.green {
  background: #13892b;
  border-color: #107122;
  color: #ffffff;
}

span.status.inline-large {
  display: inline-block;
  text-transform: uppercase;
  font-size: 13px;
  border: 1px solid #aaaaaa;
  color: #777777;
  padding: 3px 5px;
  border-radius: 3px;
  font-weight: 400;
  white-space: nowrap;
  background: #cccccc;
  min-width: 40px;
  text-align: center;
  height: auto !important;
  line-height: normal !important;
}

span.status.inline-large.green {
  background: #13892b;
  border-color: #107122;
  color: #ffffff;
}

span.status.inline-large.gold {
  background: #daa520;
  border-color: #b98b15;
  color: #333333;
  font-weight: 600;
}

span.status.inline-large.yellow {
  background: #ffd351;
  border-color: #d9b945;
  color: #333333;
  font-weight: 600;
}

span.status.inline-large.orange {
  background: #f78e2f;
  border-color: #f7ab08;
  color: #333333;
  font-weight: 600;
}

span.status.inline-large.red {
  background: #bc3131;
  border-color: #9f2929;
  color: #ffffff;
}

span.status.circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-width: 2px;
  border-style: solid;
  border-radius: 100%;
  margin: 0 10px 0 0;
  vertical-align: top;
}

span.status.circle.rejected,
span.status.circle.inactive,
span.status.circle.cancelled,
span.status.circle.overdue,
span.status.circle.onhold,
span.status.circle.notapproved,
span.status.circle.unabletovalidate,
span.status.circle.red {
  background: #bc3131;
  border-color: #9f2929;
}

span.status.circle.inprogress,
span.status.circle.unpaid,
span.status.circle.nextstep,
span.status.circle.sent,
span.status.circle.blue {
  background: #003372;
  border-color: #3b526b;
}

span.status.circle.awaitingcustomer,
span.status.circle.awaitingengineer,
span.status.circle.awaitingsupplier,
span.status.circle.yellow,
span.status.circle.partial,
span.status.circle.pending {
  background: #ffd351;
  border-color: #d9b945;
}

span.status.circle.resolved,
span.status.circle.closed,
span.status.circle.paid,
span.status.circle.accepted,
span.status.circle.authorised,
span.status.circle.active,
span.status.circle.approved,
span.status.circle.complete,
span.status.circle.credit,
span.status.circle.credit-invoice,
span.status.circle.credit-adjustment,
span.status.circle.approved-query,
span.status.circle.approved-sent,
span.status.circle.green {
  background: #13892b;
  border-color: #107122;
}

span.status.circle.orange {
  background: #f78e2f;
  border-color: #f7ab08;
}

span.status.loading {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 10px 0 0;
  vertical-align: top;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/public/images/loader.gif");
}

span.utility.inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 7px;
  vertical-align: top;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

div.utility-dashboard {
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -o-inline-flex;
  display: -ms-inline-flex;
  display: inline-block;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 7px;
  background-position: right;
}

div.utility-dashboard > a > span.utility-dashboard {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.3;
}

div.utility-dashboard > a > span.utility-dashboard.selected {
  width: 48px;
  height: 48px;
  opacity: 1;
}

div.utility-dashboard > a > span.electric {
  background-image: url("/public/images/icon/svg/ffffff/electric.svg");
}

div.utility-dashboard > a > span.heat {
  background-image: url("/public/images/icon/svg/ffffff/heat.svg");
}

div.utility-dashboard > a > span.cooling {
  background-image: url("/public/images/icon/svg/ffffff/cooling.svg");
}

div.utility-dashboard > a > span.water {
  background-image: url("/public/images/icon/svg/ffffff/water.svg");
}

div.utility-dashboard > a > span.gas {
  background-image: url("/public/images/icon/svg/ffffff/gas.svg");
}

span.utility.inline.electric {
  background-image: url("/public/images/icon/svg/ffffff/electric.svg");
}

span.utility.inline.heat {
  background-image: url("/public/images/icon/svg/ffffff/heat.svg");
}

span.utility.inline.cooling {
  background-image: url("/public/images/icon/svg/ffffff/cooling.svg");
}

span.utility.inline.water {
  background-image: url("/public/images/icon/svg/ffffff/water.svg");
}

span.utility.inline.gas {
  background-image: url("/public/images/icon/svg/ffffff/gas.svg");
}

span.utility.inline.bms {
  background-image: url("/public/images/icon/svg/00003C/power.svg");
}

span.utility.inline.hotwater {
  background-image: url("/public/images/icon/svg/ffffff/hot-water.svg");
}

span.utility.inline.ev {
  background-image: url("/public/images/icon/svg/ffffff/ev.svg");
}

span.utility.inline.pv {
  background-image: url("/public/images/icon/svg/ffffff/pv.svg");
}

span.utility.inline.oil {
  background-image: url("/public/images/icon/svg/ffffff/oil.svg");
}

span.utility.inline.fuel {
  background-image: url("/public/images/icon/svg/ffffff/fuel.svg");
}

span.utility.inline.heatcostallocator {
  background-image: url("/public/images/icon/svg/ffffff/heat-cost-allocator.svg");
}

ul.status-history {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  min-height: 19px;
  border-radius: 3px;
  opacity: 0.9;
  overflow: visible;
  white-space: nowrap;
}

ul.status-history::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 17px;
  background-color: #eeeeee;
  border-radius: 3px;
  z-index: -1;
}

ul.status-history > li {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 0;
  min-width: 25px;
  /* transition:1s width; */
}

ul.status-history > li > div.bar {
  height: 15px;
  border-width: 1px;
  border-style: solid;
  border-right-width: 0;
}

ul.status-history > li.blue > div.bar {
  background: #003372;
  border-color: #30455b;
  color: #ffffff;
}

ul.status-history > li.yellow > div.bar {
  background: #ffd351;
  border-color: #b99d3a;
  color: #333333;
}

ul.status-history > li.green > div.bar {
  background: #13892b;
  border-color: #0c5d1b;
  color: #ffffff;
}

ul.status-history > li.red > div.bar {
  background: #bc3131;
  border-color: #d40d0d;
  color: #ffffff;
}

ul.status-history > li:last-child > div.bar {
  border-right-width: 1px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

ul.status-history > li:first-child > div.bar {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

ul.status-history > li > div.label {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

ul.status-history > li > div.label > span {
  display: inline-block;
  position: relative;
  font-size: 11px;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  padding: 4px 7px;
  margin-top: 5px;
  border-radius: 3px;
}

ul.status-history > li > div.label > span > b {
  display: block;
}

.html-tooltip {
  text-align: center;
}

.html-tooltip h1 {
  font-size: 13px !important;
  color: #ffffff !important;
}

.html-tooltip h2 {
  font-size: 12px !important;
  color: #ffffff !important;
}

/*----------DASHBOARD---------*/

ul.metric {
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -o-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
}

ul.metric > li {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  border: 1px solid #4c5a7c;
  height: 100%;
  margin: 0 10px 10px 10px;
  border-radius: 2px;
  background: #003372;
  padding: 8px;
  vertical-align: middle;
  box-sizing: border-box;
  text-align: center;
}

ul.metric.fullwidth > li {
  margin: 0 0 10px 0;
}

ul.metric > li a {
  width: 100%;
}

ul.metric > li h1 {
  text-align: center;
  color: #ffffff;
  font-size: 40px;
  font-weight: 200;
  width: 100%;
}

ul.metric > li h2 {
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 200;
  white-space: nowrap;
  width: 100%;
}

div.metric {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  border: 1px solid #ffffff;
  height: 100%;
  margin: 0 10px 10px 10px;
  border-radius: 2px;
  background: #ffffff;
  padding: 8px;
  vertical-align: middle;
  box-sizing: border-box;
  text-align: center;
}

div.metric > a {
  width: 100%;
}

div.metric.disabled {
  pointer-events: none;
}

div.metric > a h1 {
  text-align: center;
  color: #003372;
  font-size: 60px;
  font-weight: 400;
  width: 100%;
}

div.metric > a h2 {
  text-align: center;
  color: #003372;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 600;
  white-space: nowrap;
  width: 100%;
}

div.metric > h1 {
  text-align: center;
  color: #003372;
  font-size: 60px;
  font-weight: 400;
  width: 100%;
}

div.metric > h2 {
  text-align: center;
  color: #003372;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 600;
  white-space: nowrap;
  width: 100%;
}

ul.tabbed {
  font-size: 12px;
}
ul.tabbed li {
  display: inline-block;
}
ul.tabbed li a {
  display: inline-block;
  padding: 5px;
  border: 1px solid #ccc;
  color: #888;
  border-radius: 5px 5px 0 0;
}
ul.tabbed li a.on {
  border-bottom: 1px solid #fff;
}
.performing-sites {
  border-top: 1px solid #ccc;
  width: 100%;
  padding-top: 40px;
  margin-top: -1px;
  padding-bottom: 40px;
  float: left;
  clear: both;
}
.performing-sites canvas {
  cursor: pointer;
}
table tr th {
  font-size: 13px;
  padding: 6px 6px;
  font-weight: bold;
}
.performing-sites table tbody tr td {
  border-bottom: none;
  padding: 3px;
  height: auto;
}
.success-arrow {
  position: relative;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8.5px 0 8.5px;
  border-color: green transparent transparent transparent;
}
.warning-arrow {
  position: relative;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 8.5px 10px 8.5px;
  border-color: transparent transparent #ffd351 transparent;
}
.danger-arrow {
  position: relative;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 8.5px 10px 8.5px;
  border-color: transparent transparent #c00 transparent;
}

/*----------PROGRESS-----------*/

ul.progress-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  list-style: none;
  width: 96%;
  height: 4px;
  overflow: visible;
  margin: 20px auto 70px auto;
}

ul.progress-bar::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #003372;
  border-radius: 16px;
}

ul.progress-bar > li {
  position: relative;
  flex: 1;
  text-align: center;
  font-size: 13px;
  padding: 20px 15px 0 15px;
  color: #aaaaaa;
  font-weight: 600;
}

ul.progress-bar > li::before {
  position: absolute;
  content: "";
  left: 50%;
  top: -12px;
  margin-left: -14px;
  width: 28px;
  height: 28px;
  border: 2px solid #003372;
  background-color: #ffffff;
  border-radius: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: center;
}

ul.progress-bar > li.done,
ul.progress-bar > li.active {
  color: #003372;
}

ul.progress-bar > li.done::before {
  background-image: url("/public/images/icon/svg/596a90/tick.svg");
}

ul.progress-bar > li.skip::before {
  background-image: url("/public/images/icon/svg/596a90/pending.svg");
}

ul.progress-bar > li.active::before {
  background-image: url("/public/images/icon/svg/596a90/here.svg");
}

/*----------VERIFICATION---------*/

ul.verification {
  display: inline-block;
  font-size: 0;
  width: auto;
  margin-left: -3px;
  z-index: 950;
}

ul.verification > li {
  display: inline-block;
  border: 1px solid #003372;
  width: 32px;
  height: 28px;
  vertical-align: middle;
  box-sizing: border-box;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  background-color: #003372;
  transition: all 0.25s;
}

ul.verification > li:hover {
  background-color: #7180a8;
}

ul.verification > li.incorrect {
  background-image: url("../images/icon/svg/misc/error.svg");
  background-size: 13px;
}

ul.verification > li.correct {
  border-left: 1px solid #aaaaaa;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  background-image: url("../images/icon/svg/misc/tick.svg");
  background-size: 16px;
}

ul.verification > li.reset {
  display: none;
}

ul.verification.reset > li.reset {
  display: inline-block;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  width: 64px;
  text-transform: uppercase;
  font-size: 12px;
  color: #ffffff;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}

ul.verification.reset > li:not(.reset) {
  display: none;
}

ul.verification > li.incorrect.selected {
  background-color: #f2b5b5;
}

ul.verification > li.correct.selected {
  background-color: #bbf2b5;
}

input.verification {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: #003372;
}

input.verification.correct {
  background-color: #cdffcb;
}

input.verification.incorrect {
  background-color: #ffcbcb;
}

h2.verification.success {
  color: #40b23f;
}

/*----------TICKET----------*/

form#attachment_upload {
}

ul.ticket-uploads {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 100%;
  border: 1px solid #e6e6e6;
  padding: 9px 0 0 9px;
  box-sizing: border-box;
  border-radius: 2px;
  overflow: visible;
}

ul.ticket-uploads.empty {
  border: 1px dashed #b7bdd0;
  padding: 0;
}

ul.ticket-uploads > li {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100px;
  flex: 1 0 100px;
  padding: 9px;
  margin: 0 9px 9px 0;
  border-radius: 2px;
  transition: 0.15s background-color;
  cursor: pointer;
  box-sizing: border-box;
}

ul.ticket-uploads.empty > li {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
  border: 0 !important;
  padding: 15px 0;
  margin: 0;
  text-align: center;
}

ul.ticket-uploads:not(.loading) > li:not(.empty):hover {
  background-color: #eeeeee;
}

ul.ticket-uploads > li.placeholder {
  padding: 0 9px !important;
  margin: 0 9px 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

ul.ticket-uploads > li.empty {
  cursor: default !important;
}

ul.ticket-uploads.init > li.empty {
  opacity: 0.01;
}

ul.ticket-uploads > li.upload {
  display: none;
  position: relative;
  border: 1px dashed #b7bdd0;
  border-radius: 3px;
}

ul.ticket-uploads > li.upload > label {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 100%;
  cursor: pointer;
}

ul.ticket-uploads > li.upload > label > input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

ul.ticket-uploads.loading > li.upload::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/public/images/loader.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  background-color: #ffffff;
}

ul.ticket-uploads > li > a {
  width: 100%;
  height: 100%;
}

ul.ticket-uploads > li:hover > a > span.delete {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  height: 20px;
  width: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/public/images/icon/svg/00003C/error.svg");
  background-size: 10px;
}

ul.ticket-uploads > li.upload div.icon,
ul.ticket-uploads > li.empty div.icon {
  background-size: 32px;
}

ul.ticket-uploads > li div.icon {
  width: 100%;
  height: 48px;
  background-image: url("/public/images/icon/filetype/unknown.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
}

ul.ticket-uploads > li div.icon.csv {
  background-image: url("/public/images/icon/filetype/csv.svg");
}

ul.ticket-uploads > li div.icon.doc,
ul.ticket-uploads > li div.icon.docx {
  background-image: url("/public/images/icon/filetype/doc.svg");
}

ul.ticket-uploads > li div.icon.jpg,
ul.ticket-uploads > li div.icon.jpeg {
  background-image: url("/public/images/icon/filetype/jpg.svg");
}

ul.ticket-uploads > li div.icon.pdf {
  background-image: url("/public/images/icon/filetype/pdf.svg");
}

ul.ticket-uploads > li div.icon.png {
  background-image: url("/public/images/icon/filetype/png.svg");
}

ul.ticket-uploads > li div.icon.ppt,
ul.ticket-uploads > li div.icon.pptx {
  background-image: url("/public/images/icon/filetype/ppt.svg");
}

ul.ticket-uploads > li div.icon.xls,
ul.ticket-uploads > li div.icon.xlsx {
  background-image: url("/public/images/icon/filetype/xls.svg");
}

ul.ticket-uploads > li div.icon.zip {
  background-image: url("/public/images/icon/filetype/zip.svg");
}

ul.ticket-uploads > li div.icon.empty {
  background-image: url("/public/images/icon/filetype/empty.svg");
}

ul.ticket-uploads > li div.icon.add {
  background-image: url("/public/images/icon/filetype/add.svg");
}

ul.ticket-uploads.empty > li div.icon {
  display: inline-block;
  height: 28px;
  width: 28px;
  background-size: 28px !important;
}

ul.ticket-uploads > li h5 {
  margin: 0;
  text-align: center;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 600;
  word-break: break-all;
  color: #003372;
  line-height: 12px;
  vertical-align: middle;
}

ul.ticket-uploads.empty > li h5 {
  margin-top: 0;
  display: inline-block;
  line-height: 28px;
  padding-left: 7px;
}

/*----------TABLE----------*/

span.inline-icon {
  display: block;
  width: 100%;
  min-height: 100%;
  padding: 3px 0 0 20px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center left;
  background-image: url("../images/icon/svg/misc/transaction_adjustment.svg");
  background-size: 14px;
  box-sizing: border-box;
}

span.inline-icon.invoice {
  background-image: url("../images/icon/svg/misc/transaction_invoice.svg");
}

span.inline-icon.payment {
  background-image: url("../images/icon/svg/misc/transaction_payment.svg");
}

span.inline-icon.comment-added {
  background-image: url("../images/icon/svg/misc/ticket_comment_add.svg");
}

span.inline-icon.comment-deleted {
  background-image: url("../images/icon/svg/misc/ticket_comment_add.svg");
}

span.inline-icon.watcher-added {
  background-image: url("../images/icon/svg/misc/ticket_watcher_add.svg");
}

span.inline-icon.watcher-deleted {
  background-image: url("../images/icon/svg/misc/ticket_watcher_delete.svg");
}

span.inline-icon.status-change {
  background-image: url("../images/icon/svg/misc/ticket_status_change.svg");
}

span.inline-icon.file-added {
  background-image: url("../images/icon/svg/misc/ticket_file_add.svg");
}

span.inline-icon.file-deleted {
  background-image: url("../images/icon/svg/misc/ticket_file_delete.svg");
}

span.inline-icon.ticket {
  background-image: url("../images/icon/svg/misc/ticket_single.svg");
}

span.inline-icon.assignee {
  background-image: url("../images/icon/svg/misc/ticket_assignee_change.svg");
}

span.inline-icon.yes {
  background-image: url("../images/icon/svg/misc/approved.svg");
}

span.inline-icon.no {
  background-image: url("../images/icon/svg/misc/rejected.svg");
}

span.inline-icon.partial {
  background-image: url("../images/icon/svg/misc/partial.svg");
}

span.inline-icon.up-arrow {
  background-image: url("../images/icon/svg/misc/up_arrow.svg");
}

span.inline-icon.down-arrow {
  background-image: url("../images/icon/svg/misc/down_arrow.svg");
}

span.inline-icon.gas {
  background-image: url("../images/icon/svg/ffffff/gas.svg");
}

span.inline-icon.electric {
  background-image: url("../images/icon/svg/ffffff/electric.svg");
}

span.inline-icon.water {
  background-image: url("../images/icon/svg/ffffff/water.svg");
}

span.inline-icon.heat {
  background-image: url("../images/icon/svg/ffffff/heat.svg");
}

span.inline-icon.cooling {
  background-image: url("../images/icon/svg/ffffff/cooling.svg");
}

span.inline-icon.hotwater {
  background-image: url("../images/icon/svg/ffffff/hot-water.svg");
}

span.inline-icon.ev {
  background-image: url("../images/icon/svg/ffffff/ev.svg");
}

span.inline-icon.pv {
  background-image: url("../images/icon/svg/ffffff/pv.svg");
}

span.inline-icon.oil {
  background-image: url("../images/icon/svg/ffffff/oil.svg");
}

span.inline-icon.fuel {
  background-image: url("../images/icon/svg/ffffff/fuel.svg");
}

span.inline-icon.heatcostallocator {
  background-image: url("../images/icon/svg/ffffff/heat-cost-allocator.svg");
}

/*----------TRANSACTION----------*/

span.transaction-status {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}

span.transaction-status.paid,
span.transaction-status.accepted {
  background-image: url("../images/icon/svg/misc/status_success.svg");
}

span.transaction-status.pending {
  background-image: url("../images/icon/svg/misc/status_pending.svg");
}

span.transaction-status.partial {
  background-image: url("../images/icon/svg/misc/status_partial.svg");
}

span.transaction-status.unpaid {
  background-image: url("../images/icon/svg/misc/status_failure.svg");
}

a.allocation {
  background-image: url("../images/icon/svg/333333/link.svg");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: left center;
  padding-left: 22px;
}

a.allocation.loading {
  background-image: url("../images/loader.gif");
}

tr.allocation td {
  display: none;
  background-color: #e6e6e6;
  border-color: #dddddd;
}

tr.allocation td span.indent {
  padding-left: 22px;
  background-image: url("../images/icon/svg/333333/link.svg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 16px;
}

tr.allocation td span.inline-icon.allocation {
  position: relative;
}

tr.allocation td span.inline-icon.allocation::before {
  position: absolute;
  content: "";
  top: -10px;
  left: 6px;
  width: 1px;
  height: calc(100% + 16px);
  border-left: 1px solid #777777;
}

tr.last td span.inline-icon.allocation::before {
  top: -10px;
  height: calc(100% + 2px);
}

tr.allocation td span.inline-icon.allocation::after {
  position: absolute;
  content: "";
  top: 6px;
  left: 6px;
  width: 8px;
  height: 1px;
  border-top: 1px solid #777777;
}

/*----------WORKFLOW----------*/

span.workflow-step {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/icon/svg/misc/workflow_step.svg");
  background-size: 14px;
}

/* ---------SMARTVALVE----------*/

span.valve-state {
  display: inline-block;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid #aaaaaa;
  background-color: #cccccc;
  border-radius: 100%;
  margin-top: 3px;
  margin-right: 2px;
}

span.valve-state.open {
  background-color: #34c76b;
}

span.valve-state.closed {
  background-color: #ed5b5b;
}

span.switch {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 18px;
  height: 30px;
  width: 126px;
  margin: 2px;
  background: #f6f6f6;
  border: 1px solid #aaaaaa;
  border-radius: 2px;
  padding: 5px 7px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  box-sizing: border-box;
  vertical-align: top;
  text-decoration: none;
  box-shadow: inset 0 0 2px 0 #cccccc;
  vertical-align: top;
}

span.switch:hover {
  background: #eeeeee;
}

span.switch::before,
span.switch::after {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  line-height: 28px;
  width: 50%;
  font-size: 13px;
  color: #777777;
  text-transform: uppercase;
  box-sizing: border-box;
  border-radius: 2px;
}

span.switch[data-state="open"]::before,
span.switch[data-state="closed"]::after {
  background: #003372;
  color: #ffffff;
  box-shadow: inset 0 0 0 0 #cccccc;
}

span.switch::before {
  content: "open";
  right: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

span.switch::after {
  content: "closed";
  left: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid #777777;
}

/*----------PAYMENT----------*/

li.fullpage-status {
  text-align: center;
}

li.fullpage-status div.status.hidden {
  display: none;
}

li.fullpage-status div.success,
li.fullpage-status div.fail,
li.fullpage-status div.loading {
  width: 100%;
  margin-bottom: 12px;
}

li.fullpage-status div.success svg,
li.fullpage-status div.fail svg {
  height: 50px;
  margin: 0 auto;
}

li.fullpage-status div.success.fallback,
li.fullpage-status div.fail.fallback {
  content: "";
  height: 50px;
  width: 50px;
  margin: 0 auto 12px auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

li.fullpage-status div.success.fallback {
  background-image: url("/public/images/fallback/success.png");
}

li.fullpage-status div.fail.fallback {
  background-image: url("/public/images/fallback/fail.png");
}

li.fullpage-status div.loading {
  height: 50px;
  background-image: url("/public/images/loader.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50px;
}

li.fullpage-status h2,
li.fullpage-status h5 {
  width: 100%;
  text-align: center;
}

li.fullpage-status h2 {
  margin-bottom: 3px;
}

li.fullpage-status button,
li.fullpage-status a.button {
  margin-top: 30px;
}

/*----------METERING----------*/

div.graph-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
}

div.graph-wrapper.hidden {
  display: none;
}

div.no-graph-data {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  line-height: 200px;
  z-index: 1000;
  font-size: 13px;
  text-align: center;
  color: #333333;
  font-weight: 600;
}

div.graph-wrapper.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/public/images/loader.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px;
  background-color: rgba(255, 255, 255, 0.35);
}

div#consumption_graph {
  position: absolute;
  width: 100%;
  height: 100%;
}

h4#consumption_graph_title {
  color: #000000;
  margin-bottom: 7px;
}

ul.meter-read-submit > li.input-header {
  margin: 5px 0;
}

ul.meter-read-submit > li.input-body {
  border-bottom: 1px solid #bbbbbb;
  margin-top: 8px;
  padding-bottom: 8px;
}

ul.meter-read-submit > li > ul.alert {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  font-size: 0;
}

ul.meter-read-submit > li.input-body > div > input {
  box-sizing: border-box;
  margin-bottom: 0;
}

ul.meter-read-submit > li.input-body > div > input[disabled] {
  padding-left: 0;
  padding-right: 0;
}

ul.meter-read-submit > li.input-body > div > input:not([disabled]) {
  margin-right: 10px;
}

ul.meter-read-submit > li > ul.alert > li {
  margin: 5px 0 0 0;
}

ul.meter-read-submit > li > ul.alert > li > h5 {
  margin: 0;
}

ul.meter-read-submit > li > ul.alert.error > li > h5 {
  color: #ff0000;
}

ul.meter-read-submit > li > ul.alert.warning > li > h5 {
  color: #ff6600;
}

a.meter-read-review {
  background-image: url("../images/icon/svg/333333/meter_read.svg");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: left center;
  padding-left: 22px;
}

a.meter-read-review.loading {
  background-image: url("../images/loader.gif");
}

tr.register td {
  display: none;
  background-color: #e6e6e6;
  border-color: #dddddd;
}

tr.register.warning td {
  display: none;
  background-color: #f5f788;
  border-color: #dddddd;
}

tr.register.warning td.warning {
  color: #ff6600;
}

/*----------LOGIN----------*/

#body_login {
  margin: 125px auto 0 auto;
  padding: 20px 12px;
  width: 450px;
  border: 1px solid #999999;
  border-radius: 2px;
  background: #e6e6e6;
  text-align: left;
}

#body_login span.logo {
  display: inline-block;
  background-image: url("/public/images/ista_dark.svg");
  background-size: auto 16px;
  background-repeat: no-repeat;
  background-position: center top + 2px;
  width: 42px;
  height: 20px;
  line-height: 20px;
  vertical-align: top;
}

#body_login h2 {
  margin-bottom: 17px;
}

#body_login h5 {
  white-space: normal;
  font-size: 12px;
  padding: 12px 50px 5px 50px;
  box-sizing: border-box;
  color: #555555;
}

#body_login label {
  width: 140px;
  text-align: right;
  padding: 0 12px 0 0;
}

#body_login div.buttons {
  margin-top: 15px;
  text-align: center;
}

#body_login div.buttons a,
#body_login div.buttons button {
  margin: 0 6px;
}

#body_login_footer {
  margin: 10px 0 0 0;
  width: 100%;
  height: 12px;
  font-size: 12px;
  color: #999999;
  font-weight: 400;
  text-align: center;
}

ul.table-search {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  background: #dddddd;
  margin: 0 0 12px 0;
  padding: 6px;
  box-sizing: border-box;
  text-align: right;
  border-radius: 1px;
  border: 1px solid #cccccc;
}

ul.table-search > li.pagination {
  -webkit-flex: 0;
  -ms-flex: 0;
  flex: 0;
  text-align: left;
  white-space: nowrap;
}

ul.table-search > li.pagination a.button {
  padding: 2px 10px !important;
  height: 22px !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
}

ul.table-search > li.pagination a.prev {
  background-image: url("../images/icon/svg/ffffff/direction_left.svg");
}

ul.table-search > li.pagination a.next {
  background-image: url("../images/icon/svg/ffffff/direction_right.svg");
}

ul.table-search > li.pagination h3.count {
  display: inline-block;
  color: #777777;
  font-size: 12px;
  padding: 0 10px;
  line-height: 25px;
}

ul.table-search > li.search {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: right;
}

ul.table-search > li.search .select2 {
  margin: 0 0 0 6px !important;
}

ul.table-search > li.search input {
  margin: 0 0 0 6px;
  width: 200px;
}

ul.table-search > li.search h3.highlight {
  padding: 2px 6px;
  margin-top: 2px;
  border-radius: 3px;
  color: #ffffff;
  background-color: #003372;
  border: 1px solid #666666;
  width: auto;
  display: inline-block;
  font-weight: 400;
  font-size: 13px;
  box-sizing: border-box;
  margin-left: 7px;
}

ul.table-search > li.search h3.highlight.hidden {
  display: none;
}

ul.table-search > li.search h3.highlight.pending {
  background: #ffd351;
  border-color: #d9b945;
  color: #333333;
}

ul.table-search > li.search h3.highlight.rejected {
  background: #bc3131;
  border-color: #9f2929;
  color: #ffffff;
}

ul.table-search > li.search h3.highlight.approved {
  background: #13892b;
  border-color: #107122;
  color: #ffffff;
}

.dialog {
  display: none;
}

@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#graph_container {
  width: 100%;
  height: 250px;
}

/*----------ERROR----------*/

table.supported-browser-list {
  width: 500px;
  margin: 50px auto 0 auto;
  text-align: center;
}

table.supported-browser-list tr td {
  padding: 5px 0 10px 0;
  min-width: 125px;
  text-align: center;
  border: 0;
  font-size: 14px;
  font-weight: 600;
}

table.supported-browser-list tr td img {
  height: 55px;
}

/*----------DOCLIST----------*/

ul.list-view {
  display: inline-block;
  list-style: none;
  font-size: 0;
  vertical-align: top;
  margin-left: 7px;
  margin-top: 2px;
}

ul.list-view > li {
  display: inline-block;
  width: 26px;
  height: 23px;
  border: 1px solid #666666;
  box-sizing: border-box;
  background-color: #003372;
  background-position: center;
  background-repeat: no-repeat;
}

ul.list-view > li:hover,
ul.list-view > li.selected {
  background-color: #7180a8;
  cursor: pointer;
}

ul.list-view > li:first-child {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

ul.list-view > li:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-left: 0;
}

ul.list-view > li.table {
  background-image: url("/public/images/icon/svg/ffffff/menu.svg");
  background-size: 12px;
}

ul.list-view > li.grid {
  background-image: url("/public/images/icon/svg/ffffff/grid.svg");
  background-size: 11px;
}

ul.doclist {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  min-height: 200px;
}

ul.doclist.empty::before {
  position: absolute;
  content: "No Documents to Display";
  top: 3px;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  z-index: 3;
  font-size: 13px;
  color: #353535;
  text-align: center;
}

ul.doclist.loading::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  background-image: url("/public/images/loader.gif");
  z-index: 3;
}

ul.doclist > li {
  width: 200px;
  padding: 10px;
}

ul.doclist > li > div.info {
  padding: 0 27px 0 5px;
  word-wrap: break-word;
}

ul.doclist > li > div.info h2 span.destination {
  display: inline-block;
  width: 13px;
  margin-right: 7px;
  height: 23px;
  background-image: url("../images/icon/svg/333333/download.svg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 13px;
  vertical-align: top;
}

ul.doclist > li > div.info h2 span.destination.ebill {
  background-image: url("../images/icon/svg/333333/email.svg");
}

ul.doclist > li > div.info h2 span.destination.postal {
  background-image: url("../images/icon/svg/333333/postal.svg");
}

ul.doclist > li > div.info h2 > span.id {
  color: #777777;
  font-size: 11px;
  vertical-align: middle;
}

ul.doclist > li.approved > div.info {
  background-position: center right + 3px;
  background-repeat: no-repeat;
  background-size: 20px;
  background-image: url("/public/images/icon/svg/misc/approved.svg");
}

ul.doclist > li.rejected > div.info {
  background-position: center right + 3px;
  background-repeat: no-repeat;
  background-size: 20px;
  background-image: url("/public/images/icon/svg/misc/rejected.svg");
}

ul.doclist > li span.thumbnail {
  display: block;
  position: relative;
  width: 200px;
  height: 283px;
  margin-bottom: 8px;
  border: 1px solid #cccccc;
}

ul.doclist > li:hover span.thumbnail {
  border: 1px solid #b7bdd0;
}

ul.doclist > li.approved span.thumbnail {
  border: 1px solid #67da62;
}

ul.doclist > li.rejected span.thumbnail {
  border: 1px solid #ff6c6c;
}

ul.doclist > li.loading:not(:hover) span.thumbnail::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  background-image: url("/public/images/loader.gif");
}

ul.doclist > li.approved span.thumbnail::before,
ul.doclist > li.rejected span.thumbnail::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.15;
}

ul.doclist > li.approved span.thumbnail::before {
  background-color: #67da62;
}

ul.doclist > li.rejected span.thumbnail::before {
  background-color: #ff6c6c;
}

ul.doclist > li:not(.approved):not(.rejected):hover span.thumbnail::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #b7bdd0;
  opacity: 0.35;
}

ul.doclist > li span.thumbnail > img {
  width: 100%;
  height: 100%;
}

ul.doclist > li span.thumbnail > div.menu {
  display: table;
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

ul.doclist > li:hover span.thumbnail > div.menu {
  opacity: 1;
}

ul.doclist > li.approved span.thumbnail button.approve,
ul.doclist > li.rejected span.thumbnail button.approve,
ul.doclist > li.approved span.thumbnail button.reject,
ul.doclist > li.rejected span.thumbnail button.reject {
  display: none;
}

ul.doclist > li span.thumbnail > div.menu > div.wrapper {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

ul.doclist > li span.thumbnail > div.menu button {
  display: inline-block;
  min-width: 110px;
}

ul.doclist > li span.thumbnail > div.menu button span {
  display: inline-block;
  width: 14px;
  height: 18px;
  margin-top: -4px;
  margin-right: 7px;
  vertical-align: bottom;
  background-position: center;
  background-repeat: no-repeat;
}

ul.doclist > li span.thumbnail > div.menu button.approve span {
  background-image: url("/public/images/icon/svg/ffffff/tick.svg");
  background-size: 13px;
}

ul.doclist > li span.thumbnail > div.menu button.review span {
  background-image: url("/public/images/icon/svg/ffffff/preview.svg");
  background-size: 14px;
}

ul.doclist > li span.thumbnail > div.menu button.destination span {
  background-image: url("/public/images/icon/svg/ffffff/twoway.svg");
  background-size: 14px;
}

ul.doclist > li span.thumbnail > div.menu button.reject span {
  background-image: url("/public/images/icon/svg/ffffff/error.svg");
  background-size: 11px;
}

table#document_review_table tr a.reject,
table#document_review_table tr a.destination,
table#document_review_table tr a.approve {
  opacity: 0.5;
  pointer-events: none;
}

table#document_review_table tr.pending a.reject,
table#document_review_table tr.pending a.destination,
table#document_review_table tr.pending a.approve {
  opacity: 1;
  pointer-events: all;
}

table#document_review_table a.thumbnail {
  position: relative;
}

table#document_review_table a.thumbnail:hover > span {
  display: block;
}

table#document_review_table a.thumbnail > span {
  display: none;
  position: absolute;
  width: 150px;
  height: 208px;
  left: 50%;
  margin-left: -75px;
  top: -215px;
  background: #ffffff;
  border: 1px solid #aaaaaa;
  border-radius: 3px;
  box-shadow: 0 0 1px 0 #cccccc;
  padding: 3px;
  box-sizing: border-box;
}

table#document_review_table a.thumbnail > span::after {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -7px;
  margin-left: -4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: #ffffff transparent transparent transparent;
}

table#document_review_table a.thumbnail > span::before {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -8px;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 9px 0 9px;
  border-color: #aaaaaa transparent transparent transparent;
}

table#document_review_table a.thumbnail > span > img {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
}

table#document_review_table a.thumbnail > span > span.loader {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px;
  background-image: url("/public/images/loader.gif");
}

td span.destination {
  padding-left: 22px;
  background-image: url("../images/icon/svg/333333/download.svg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 16px;
}

td span.destination.ebill {
  background-image: url("../images/icon/svg/333333/email.svg");
  background-size: 14px;
}

td span.destination.postal {
  background-image: url("../images/icon/svg/333333/stamp.svg");
}

ul.dialog-docrender-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

ul.dialog-docrender-wrapper li {
}

ul.dialog-docrender-wrapper li.document {
  flex: 1 0 0;
  background-color: #525659;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px;
  background-image: url("/public/images/loader.gif");
}

ul.dialog-docrender-wrapper li.info {
  flex: 0 0 285px;
  padding: 5px 17px;
  box-sizing: border-box;
  border-left: 1px solid #cccccc;
}

ul.dialog-docrender-wrapper li.info h1,
ul.dialog-docrender-wrapper li.info h2 {
  word-break: break-all;
  text-align: left;
}
ul.dialog-docrender-wrapper li.info div.split {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

ul.dialog-docrender-wrapper li.info div.split > h4 {
  flex: 1;
}

ul.dialog-docrender-wrapper li.info div.split > h4:last-child {
  text-align: right;
}

ul.dialog-docrender-wrapper ul.flex-column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
}

ul.dialog-docrender-wrapper ul.flex-column > li:first-child {
  flex: 1;
}

ul.dialog-docrender-wrapper ul.flex-column > li:last-child {
  flex: 0;
}

ul.dialog-docrender-wrapper div.status {
  display: none;
  width: 100%;
  border: 1px solid #000;
  padding: 7px 7px;
  margin-top: 10px;
  text-align: center;
  box-sizing: border-box;
}

ul.dialog-docrender-wrapper div.status.approved {
  border-color: #54b351;
  color: #30662e;
  background-color: #b4ffb3;
}

ul.dialog-docrender-wrapper div.status.rejected {
  border-color: #d82b2b;
  color: #a62121;
  background-color: #fabcbc;
}

/*style the box*/
.gm-style .gm-style-iw {
  background-color: #fff !important;
  top: 0 !important;
  left: 0 !important;
  min-width: 250px !important;
  min-height: 120px !important;
  padding: 8px 8px 8px 14px;
  display: block !important;
  border-radius: 10px;
  border: 4px solid #003372;
  position: relative;
  z-index: 9999;
  overflow: hidden;
}
/*style the arrow*/
.gm-style .gm-style-iw-t::after {
  background: #fff;
  z-index: 99999999;
  position: absolute;
  margin-top: -5px;
}

.gm-style div div div div div div div div {
  background-color: #fff !important;
  padding: 0;
  margin: 0;
  padding: 0;
  top: 0;
  color: #333;
  font-size: 18px;
}

/*style the link*/
.gm-style div div div div div div div div a {
  color: #f1f1f1;
  font-weight: bold;
}

#infowindow {
  display: block;
  text-align: center;
  overflow: hidden;
}
#infowindow h3.infotitle {
  margin-top: 15px;
  max-width: 260px;
}
#infowindow h3.infotitle a {
  text-align: center;
  color: #333;
  font-size: 17px;
}
#infowindow p {
  font-size: 12px;
  color: #888;
  margin: 0;
  width: 100%;
  display: block;
  max-width: 260px;
  text-align: center;
}
#infowindow .details {
  text-align: left;
  padding-left: 20px;
  margin: 20px 10px 15px;
}
#infowindow .details label {
  font-weight: bold;
  display: inline-block;
  min-width: 160px;
  color: #333;
  text-align: left;
}
#infowindow .status.circle {
  min-width: 10px !important;
  max-width: 10px !important;
  height: 10px !important;
  padding: 0 !important;
  margin: 0;
  vertical-align: middle;
  width: 10px;
}
#infowindow table th {
  font-size: 12px;
}
#infowindow span.utility.inline {
  margin: 0;
}
.arrow-right {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #fff;
}
.arrow-left {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #fff;
}
.bold {
  font-weight: bold;
}
#report_body {
  width: 100%;
  height: 800px;
  position: relative;
}
#report_body #chart {
  width: 100%;
  height: 500px;
}
#utilities {
  font-size: 1rem;
  position: absolute;
  right: 125px;
  z-index: 9;
}

#near-term-chart {
  width: 100%;
}

#long-term-chart {
  width: 100%;
}

.utility-Heat,
.utility-Energy {
  border-color: #ff5050 !important;
  cursor: pointer;
}
.utility-Energy span {
  display: inline-block;
  text-align: center;
}
.utility-Energy span b {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 4px 0 4px;
  border-color: #333333 transparent transparent transparent;
  margin: -2px -4px 0 4px;
  vertical-align: middle;
}
.utility-Electric {
  border-color: #ff9900 !important;
}
.utility-Gas {
  border-color: #cc66ff !important;
}
.utility-Water {
  border-color: #4572a7 !important;
}
.utility-Humidity {
  border-color: #bbbbbb !important;
}
.utility-Cooling {
  border-color: #4572a7 !important;
}
.utility-EV {
  border-color: #84B400 !important;
}
.utility-PV {
  border-color: #F29D38 !important;
}
.utility-Oil {
  border-color: #000000 !important;
}
.utility-Fuel {
  border-color: #50038C !important;
}
.utility-Heat-Cost-Allocator {
  border-color: #50038C !important;
}
.utility-Energy:hover,
.utility-Energy.on {
  background: rgba(108, 132, 185, 0.1);
}

#utilities li {
  font-size: 0.8rem;
  font-weight: bold;
  width: auto;
  display: inline-block;
  padding: 5px;
}
#utilities > li {
  position: relative;
  float: right;
  display: inline-block;
  padding: 6px 16px;
  font-size: 16px;
  font-weight: 600;
  margin-left: 3px;
  margin-top: -10px;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  transition: all 0.25s;
  border: 1px solid;
  border-top: 10px solid;
}
span.tooltip-event {
  display: block;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #555;
  border: 1px solid #729a07;
  border-radius: 2px;
  padding: 3px 4px;
  margin: 6px 0 0 0;
  text-align: center;
  color: #fff;
  background-color: #73a908;
  background-image: -moz-linear-gradient(top, #8bc009, #73a908);
  background-image: -webkit-linear-gradient(top, #8bc009, #73a908);
}
#eventlog,
#addevent,
#summary {
  display: inline-block;
  width: 46%;
  min-width: 300px;
  margin: 20px 10px 60px;
  font-size: 14px;
  border: 1px solid #000;
  border-radius: 1px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  background: linear-gradient(
    135deg,
    #f4f4f4 0%,
    #e8e8e8 45%,
    #e9e9e9 65%,
    #eeeeee 100%
  );
  box-shadow: 0px 0px 4px 0px #ddd;
  float: left;
  box-sizing: border-box;
  height: 310px;
  position: relative;
  top: 20px;
}
.eventlog {
  max-height: 185px;
  overflow-y: scroll;
}
span.note {
  float: none !important;
  /* line-height:1 !important */
}
#eventlog h3,
#addevent h3,
#summary h3 {
  text-align: left;
  font-size: 15px;
  color: #555;
  font-weight: 300;
  text-transform: uppercase;
  padding: 0 0 6px 0;
  margin: 0 0 8px 0;
  border-bottom: 1px solid #999;
}
#eventlog span.delete {
  position: relative;
  top: 0;
  right: 4px;
  width: 24px;
  height: 24px;
  display: block;
  background-image: url("/public/images/icon/svg/596a90/error.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 12px;
  transition: all 0.2s ease;
}
#eventlog table {
  margin-top: 20px;
}
#eventlog table td {
  cursor: pointer;
  padding: 5px;
  font-size: 1rem;
}
#summary .table tr.border-bottom td {
  border-bottom: 1px solid #bbb;
}
#addevent input,
#addevent select {
  padding: 6px;
  min-width: 150px;
  font-size: 0.8rem;
  color: #333;
  border: 1px solid #ccc;
}
#addevent input[type="text"],
#addevent div.input,
#addevent textarea {
  width: auto !important;
  max-width: 100% !important;
}
#addevent label {
  width: 120px !important;
}
#addevent .s2 {
  width: auto !important;
}
#eventlog tr.event_selected {
  background: #ace;
}
.search-icon {
  background: url(/public/images/icon/svg/000000/search.svg) no-repeat;
  background-size: 100%;
  opacity: 0.3;
  width: 14px;
  height: 14px;
  display: block;
  position: absolute;
  top: 12px;
  right: 22px;
}
.highcharts-contextmenu {
  display: block;
  width: 180px;
  min-height: 20px;
  font-size: 12px;
  padding-left: 10px !important;
  padding-right: 10px !important;
  cursor: pointer;
  margin-left: 100px;
  margin-top: 5px;
}
.highcharts-contextmenu > * {
  cursor: pointer;
  min-height: 23px;
  font-size: 14px;
  line-height: 22px;
  padding: 5px !important;
}
.highcharts-menu {
  padding: 8px;
  background: #fff;
}
.highcharts-menu-item:hover {
  background: #f0f0f0;
}
.highcharts-button-symbol {
  display: none !important;
}
.highcharts-button-box {
  width: 150px;
}
.highcharts-plot-line-label {
  transform: rotate(0);
}
.highcharts-contextbutton {
  max-width: 80px !important;
  width: 80px !important;
}
#eventlog span.delete.search {
  cursor: pointer;
  width: 14px;
  height: 14px;
  display: block;
  position: absolute;
  top: 12px;
  right: 22px;
}
.highcharts-plot-line-label {
  width: 40px;
  height: 40px;
  display: block;
  background: green;
}
.highcharts-range-selector-buttons {
  display: none;
}
#gmap {
  position: relative;
}
#map_sidebar {
  height: 800px;
  display: none;
  background: #fff;
  /*width:340px;*/
  width: 20px;
  position: absolute;
  top: 30px;
  right: 0;
  border-left: 2px solid #003372;
}
#sidebarHTML {
  display: none;
}
#map_sidebar .side_toggle {
  height: 40px;
  width: 18px;
  background: #003372;
  position: absolute;
  left: -18px;
  top: calc(50% - 30px);
  border-radius: 3px 0 0 3px;
  color: #fff;
  cursor: pointer;
}
#map_sidebar .side_toggle span {
  color: #fff;
  position: relative;
  top: 19px;
  margin: 5px;
  opacity: 0.9;
}
#map_sidebar .side_toggle:hover span {
  opacity: 1;
}
#map_sidebar label {
  min-width: 150px;
}
#map_sidebar label.long {
  min-width: 200px;
}
#map_sidebar .sidebar_data span {
  font-size: 13px;
  font-weight: 600;
  line-height: 27px;
  height: 27px;
  float: right;
  clear: right;
}
#map_sidebar .filters,
#map_sidebar .sidebar_data {
  padding: 0 20px;
}
#map_sidebar .filters span.utility.inline {
  margin: 6px 0;
}
#map_sidebar .filters input {
  position: relative;
  top: 1px;
}
#map_sidebar h2 {
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid #003372;
}
#map_sidebar div#sidebarHTML h2 {
  margin: 30px 15px 20px;
}
#map_sidebar h3 {
  color: #333;
  margin: 5px 15px;
  font-size: 16px;
  font-weight: normal;
}
#map_sidebar div.filters h2 {
  margin: 0px 15px;
}
#map_sidebar div span.break {
  display: block;
  height: 0;
  width: 100%;
  border-top: 1px solid #cccccc;
  margin: 12px 0 4px 0;
}
#map_sidebar h3 span {
  font-weight: bold;
  text-transform: none;
  width: 170px;
  display: inline-block;
  padding-left: 5px;
}
#map_sidebar #clearFilters {
  padding: 2px 8px;
  position: relative;
  top: 6px;
  margin-right: 10px;
  font-size: 12px;
  color: #003372;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
}
#map_sidebar .maptab {
  display: inline-block;
  height: 25px;
  font-size: 14px;
  border: 1px solid #ccc;
  background: #fff;
  padding: 6px 14px 8px;
  line-height: 25px;
  position: relative;
  overflow: hidden;
  padding: 4px 11px 4px;
  top: -4px;
  color: #222;
}
#map_sidebar .maptab.on {
  background: none;
  top: 0;
  padding: 6px 14px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid #fff;
  font-weight: bold;
}
#map_sidebar #spend_content,
#map_sidebar #consumption_content {
  border-top: 1px solid #ccc;
  padding: 5px 0 0 5px;
  margin-top: -5px;
  padding-top: 15px;
}
.maptab.disable {
  opacity: 0.3;
  pointer-events: none;
}
.mclusterIcon {
  padding-top: 2%;
  line-height: 50px;
  display: inline-block;
  vertical-align: middle;
  background-position: "0 0";
  font-size: 16px;
  font-family: "Source Sans Pro, Arial, sans-serif";
  font-weight: bold;
}
.mclusterIcon.cluster-1 {
  line-height: 50px;
}
.mclusterIcon.cluster-2 {
  /*	line-height:63px;*/
  line-height: 50px;
}
.mclusterIcon.cluster-3 {
  /*	line-height:73px;*/
  line-height: 50px;
}
.mclusterIcon.cluster-4 {
  /*	line-height:83px;*/
  line-height: 50px;
}
.mclusterIcon.cluster-5 {
  /*	line-height:95px;*/
  line-height: 50px;
}
#mtd_pie,
#ytd_pie,
#mtd2_pie,
#mtd3_pie,
#mtd_consumption_pie,
#ytd_consumption_pie,
#mtd2_consumption_pie,
#mtd3_consumption_pie {
  height: 180px;
  width: 300px;
  padding-left: 2px;
}
#mtd2_pie,
#mtd3_pie,
#mtd2_spend,
#mtd3_spend,
#mtd2_consumption,
#mtd3_consumption,
#mtd2_spend,
#mtd3_spend {
  display: none;
}
#map_sidebar .sidebar_data #consumption_content table span {
  float: none;
}
#map_sidebar .sidebar_data #consumption_content table span.utility {
  height: 17px;
}
#map_sidebar .success-arrow,
#map_sidebar .warning-arrow,
#map_sidebar .danger-arrow {
  margin: 0 2px !important;
  padding: 0 !important;
  float: none !important;
  height: 0 !important;
}
.budget_filters,
.consumption_filters {
  margin: 0 0 30px;
  display: none;
  width: 100%;
}
.budget_filters input,
.consumption_filters input {
  position: relative;
  top: 2px;
}
#underBudgetTotal,
#overBudgetTotal,
#wellOverBudgetTotal,
#consumption_underBudgetTotal,
#consumption_overBudgetTotal,
#consumption_wellOverBudgetTotal {
  float: none !important;
  position: relative;
  top: 0;
}
.charttip {
  line-height: 18px !important;
  font-size: 13px;
  display: block !important;
  position: fixed;
  z-index: 999;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(100, 100, 100, 0.6);
  padding: 6px 10px;
  margin-left: -8px;
}
.charttip span {
  width: auto !important;
  float: none !important;
}
.charttip hr,
.sidebar_budgets hr {
  height: 1px;
  background: #ccc;
  width: 100%;
  margin: 5px 0;
}
.sidebar_budgets hr {
  max-width: 60%;
  margin: 10px auto 20px;
}
.text-danger {
  color: #c00;
}
.text-bold {
  font-weight: 600;
}
.text-success {
  color: #080;
}
.text-muted {
  color: #777;
}
.table-striped th {
  background: #f0f0f0;
}
.table-striped th {
  vertical-align: bottom;
}
.sparkline {
  stroke: red;
  fill: none;
}
.sparkline.sparkline-text-success {
  stroke: green;
  fill: none;
}
.sparkline {
  stroke: red;
  fill: rgba(255, 0, 0, 0.3);
}
.sparkline.sparkline-text-success {
  stroke: green;
  fill: rgba(50, 255, 50, 0.3);
}
.sparkline--spot {
  stroke: #333;
  fill: #333;
}
.sparkline--cursor {
  stroke: #333;
}
.sparkline--fill {
  fill: rgba(255, 0, 0, 0.3);
}
.sparkline-text-success.sparkline--fill {
  fill: rgba(50, 255, 50, 0.3);
}
.sparkline--line {
  stroke: #333;
}
label.left-padding {
  padding-left: 10px;
}
.pointer {
  cursor: pointer;
}
.table-hover tr:hover {
  background: rgba(108, 132, 185, 0.1);
}
.table-hover tr.on {
  background: rgba(108, 132, 185, 0.3);
}
a.button.minuteview {
  background-image: url(../images/icon/svg/ffffff/minuteview.svg);
  padding: 2px 10px !important;
  height: 22px !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border: 1px solid #003372;
}
a.button.bms {
  background-image: url(../images/icon/svg/ffffff/application.svg);
  padding: 2px 10px !important;
  height: 22px !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border: 1px solid #003372;
}
.this_month {
  font-size: 14px;
  width: 100%;
  max-width: 100%;
  font-weight: bold;
  margin: 0 0 15px 0;
}
.this_month select {
  padding: 3px;
  border: 1px solid #ccc;
  font-weight: bold;
  font-size: 14px;
}
.sidebar_budgets {
  margin: 10px -20px;
}
.sidebar_data .mtd {
  display: none;
}
/* .switch {
  position:relative;
  display:inline-block;
	width:50px;
  height:34px;
  min-width:50px !important;
}
.switch input {
  opacity:0;
  width:0;
  height:0;
}
.slider {
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#003372;
  -webkit-transition:.2s;
  transition:.2s;
	border-radius:34px;
	height:26px !important;
}
.slider.onoff {
  background-color:#888;
}
.switch.alarm .slider {
  background-color:#888;
}
.switch.alarm input:checked + .slider {
  background-color:#c00;
}
.slider:before {
  position:absolute;
  content:"";
	height:22px;
	width:22px;
	left:1px;
	bottom:2px;
  background-color:white;
  -webkit-transition:.4s;
  transition:.4s;
	border-radius:50%;
}
input:checked + .slider {
  background-color:#003372;
}
input:focus + .slider {
  box-shadow:0 0 1px #003372;
}
input:checked + .slider:before {
  -webkit-transform:translateX(26px);
  -ms-transform:translateX(26px);
  transform:translateX(26px);
} */

div.list_view_meter_level.hidden {
  display: none;
}

div.list_view_building_level.hidden {
  display: none;
}

div.meter_portfolio_meter_level.hidden {
  display: none;
}

div.meter_portfolio_building_level.hidden {
  display: none;
}

tr.market-tracker-trade-period-expansion td {
  display: none;
  background-color: #ffffe6;
  border-color: #ffffcc;
}


.topnav {
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04aa6d;
  color: white;
}

.grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 5%;
}

.square {
  aspect-ratio: 1/ 1;

  display: flex;

  /* align-items: center; */

  padding: 5%;

  background-color: #fff;

  color: #000;

  font-size: large;

  flex-direction: row;

  justify-content: center;

  border-radius: 10px;

  margin-top: 20px;

  box-shadow: 0px 0px 2px 2px lightgray;

  border: 0.5px solid grey;
}

.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
  color: #000 !important;

  background-color: #f1f1f1 !important;
}

.w3-round-large {
  border-radius: 8px;

  width: 230px;
}

.w3-container,
.w3-panel {
  padding: 0.01em 16px;
}

.w3-blue,
.w3-hover-blue:hover {
  color: #fff !important;

  background-color: #00003C !important;
}

.tablePrices {
  display: inline-block;
}

#main_body div.markettracker.hidden {
  display: none;
}

.userContractBox {
  box-sizing: border-box;
  display: inline-block;

  padding: 16px;

  width: 354px;
  height: 100px;

  background: #ffffff;
  border: 1px solid #fef5f3;

  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  margin-bottom: 20px;
}

.userStrategyBox {
  box-sizing: border-box;

  float: left;
  clear: left;
  display: inline-block;

  padding: 5px;
  gap: 8px;

  width: 100%;
  height: auto;
  margin-top: 6px;

  /* Brand / White */

  background: #ffffff;
  border: 1px solid #fef5f3;
  /* Elevation / L */

  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

.marketPricesOverviewBoxMonth {
  display: inline-block;
  float: left;
  clear: both;
}
.marketPricesOverviewBoxQuarter {
  display: inline-block;
  float: left;
  clear: both;
}
.marketPricesOverviewBoxSeason {
  display: inline-block;
  float: left;
  clear: both;
}
.marketPricesOverviewBoxAnnual {
  display: inline-block;
  float: left;
  clear: both;
}
ul.mt-period-overview {
  display: inline-block;
  text-align: center;
  gap: 8px;
  background: #ffffff;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  float: left;
  clear: both;
}
ul.mt-period-overview > li {
  padding: 25px 50px 25px 50px;
  font-size: 20px;
  width: 120px;
  cursor: pointer;
  float: left;
}

ul.mt-period-overview-quarter {
  display: inline-block;
  text-align: center;
  gap: 8px;
  background: #ffffff;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  float: left;
  clear: both;
}
ul.mt-period-overview-quarter > li {
  padding: 25px 50px 25px 50px;
  font-size: 20px;
  width: 120px;
  cursor: pointer;
  float: left;
}
ul.mt-period-overview-season {
  display: inline-block;
  text-align: center;
  gap: 8px;
  background: #ffffff;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  float: left;
  clear: both;
}
ul.mt-period-overview-season > li {
  padding: 25px 50px 25px 50px;
  font-size: 20px;
  width: 120px;
  cursor: pointer;
  float: left;
}
ul.mt-period-overview-annual {
  display: inline-block;
  text-align: center;
  gap: 8px;
  background: #ffffff;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  float: left;
  clear: both;
}
ul.mt-period-overview-annual > li {
  padding: 25px 50px 25px 50px;
  font-size: 20px;
  width: 120px;
  cursor: pointer;
  float: left;
}
ul.mt-latest-price-overview {
  display: inline-block;
  width: 220px;
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}
ul.mt-latest-price-overview > li {
  padding: 0px 45px 0px 45px;
  font-size: 20px;
  cursor: pointer;
  width: auto;
  text-align: center;
}
.tableSquares {
  float: left;
  box-sizing: border-box;

  width: 220px;
  height: 280px;
  left: 507px;
  top: 73px;

  margin-top: -10px;

  border: 0.5px solid #d8d8d8;
  border-right: none;
  border-top: none;
}
.tableSquares.tall {
  height: 330px; /* Increased height when peak is present */
}

.tableSquares:last-child { 
  border-right:  0.5px solid #d8d8d8; 
}

ul.mt-strategy-list {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
}
ul.mt-strategy-list > li {
  padding: 10px;
  font-size: 20px;
  width: 100%;
  cursor: pointer;
  float: left;
}

#mt_add_strategy {
  clear: left;
  float: right;
}

.mt_edit_strategy {
  clear: left;
  float: right;
}

.strategyInput {
  float: left;
  clear: left;
  width: 99% !important;
  max-height: 200px;
  font-size: 20px;
  border: 0.5px solid #d8d8d8;
  white-space: pre-wrap;
}

.strategyAdd {
  font-size: 20px;
  float: left;
  clear: both;
  padding: 10px 0px 5px 0px;
}

.latest-price {
  width: 85px;
  height: 31px;
  left: 226px;
  top: 452px;

  font-style: normal;
  font-weight: 520;
  font-size: 24px !important;
  line-height: 31px;

  padding-top: 30px !important;
  padding-bottom: 20px !important;
  color: #000000;
}

.peak-container {
  display: flex;
  align-items: baseline; /* Align text and values on the same line */
  gap: 4px; /* Adjust spacing between items */
  padding-bottom: 20px !important;
}

.peak-latest-price {
  width: auto;
  height: auto;
  font-style: normal;
  font-weight: 520;
  font-size: 19px !important;
  line-height: normal;
  color: #000000;
}

.peak-latest-price-text {
  font-style: normal;
  font-weight: 520;
  font-size: 13.3px !important;
  color: #8b8e98;
}

.prior-price {
  width: 48px;
  height: 16px;

  font-style: normal;
  font-weight: 520;
  font-size: 13.3px !important;
  line-height: 120%;
  padding-bottom: 20px !important;
  color: #8b8e98;
}

.position-closed {
  left: 16.25%;
  right: 78.68%;
  font-style: normal;
  font-weight: 520;
  font-size: 14px !important;
  line-height: 18px;
  /* identical to box height */

  text-align: right;

  /* #333333 - Dark Grey */
  padding-bottom: 5px !important;
  color: #333333;
}

.direction {
  width: 11px;
  height: 29px;

  font-style: normal;
  font-weight: 530;
  font-size: 19.2px !important;
  line-height: 150%;

  padding-bottom: 20px !important;

  /* identical to box height, or 29px */

  /* Inside auto layout */
}

.strategy {
  float: left;
  clear: left;
  font-size: 30px !important;
  padding-top: 30px !important;
}

.positive {
  text-align: center;
  height: 29px;

  font-style: normal;
  font-weight: 530;
  font-size: 19.2px !important;
  line-height: 150%;
  color: #4da088;
}

.negative {
  text-align: center;
  height: 29px;

  font-style: normal;
  font-weight: 530;
  font-size: 19.2px !important;
  line-height: 150%;
  color: #ee7955;
}
.no-trend {
  text-align: center;
  height: 29px;

  font-style: normal;
  font-weight: 530;
  font-size: 19.2px !important;
  line-height: 150%;
  color: #e2a000;
}

progress {
  height: 15px;
  width: 80%;
  border-radius: 3px;
  margin-left: 10%;
  /* padding-top: 20px; */
}
progress:before,
progress:after {
  content: attr(data-value);
}

progress::-webkit-progress-bar {
  background-color: #e7e7e7;
  border-radius: 3px;
}
progress.electric::-webkit-progress-value {
  background-color: #E69535; 
  /* var(--c); */
  border-radius: 3px;
}
progress.gas::-webkit-progress-value {
  background-color: #A352CC;
  border-radius: 3px;
}

.direction-container-red {
  width: auto;
  height: 31px;
  margin-left: 60px;
  margin-right: 60px;
  margin-bottom: 20px;

  /* UI/Interaction/Orange - A 05 */

  background: rgba(230, 63, 12, 0.05);
  border-radius: 6px;
}

.direction-container-green {
  width: auto;
  height: 31px;
  margin-left: 60px;
  margin-right: 60px;
  margin-bottom: 20px;

  /* UI/Interaction/Orange - A 05 */

  background: #f2f8f7;
  border-radius: 6px;
}

.direction-container-yellow {
  width: auto;
  height: 31px;
  margin-left: 60px;
  margin-right: 60px;
  margin-bottom: 20px;

  /* UI/Interaction/Orange - A 05 */

  background: #fff8e3;
  border-radius: 6px;
}

#sparkline {
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 20px;
}

#contract_number {
  width: auto;
  height: 31px;

  font-size: 16px !important;

  text-align: center;

  color: #000000;
  clear: left;
  float: right;
  cursor: pointer;

  width: 24px;
  height: 24px;
  background: #ffc888;
  border-radius: 50%;
}

#contract_edit {
  width: auto;
  height: 31px;

  font-style: normal;
  font-weight: 500;
  font-size: 13.33px;
  margin-top: 15px;

  cursor: pointer;
  text-decoration: underline;

  color: #0069c2;
  /* clear: left; */
  float: right;

}

#create_mt_customer{
  margin: 0 !important;
}

#contract_customer_name {
  width: auto;
  height: 31px;

  font-size: 22px !important;

  color: #000000;
  clear: left;
  float: left;
}

#contract_date_period {
  width: auto;
  height: 31px;

  font-style: normal;
  font-weight: 500;
  font-size: 13.33px;
  margin-top: 15px;

  color: #000000;
  clear: left;
  float: left;
}

.icon-arrow-up {
  width: 20px;
  height: 20px;
  background-size: 20px auto;
  float: left;
  margin: 5px;
}
.icon-arrow-down {
  width: 20px;
  height: 20px;
  background-size: 20px auto;
  float: left;
  margin: 5px;
}
.icon-arrow-horizontal {
  width: 20px;
  height: 20px;
  background-size: 20px auto;
  float: left;
  margin: 5px;
}

#last_updated_date {
  /* Copy / Regular / p Big */

  font-weight: 500;
  font-size: 15px;
  /* identical to box height, or 29px */

  color: #000000;
  margin-right: 10px;
}

#compare_date {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 160%;
  color: #8b8e98;
}

#reset_date {
  background-color: white;
  color: #003978;
  border: 0px;
  text-decoration: underline;
  margin-right: auto;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.strategy-title {
  font-weight: 520;
  font-size: 20px !important;
  line-height: 31px;

  padding-top: 20px !important;
  padding-bottom: 20px !important;
  color: #000000;

  clear: left;
  float: left;
}
#add_prices_form {
  padding: 1rem;
}

.btn {
  /* border: 3px solid #1a1a1a; */
  display: inline-block;
  padding: 3px;
  position: relative;
  text-align: center;
  /* border-radius: 1rem; */
  /* -webkit-transition: background 600ms ease, color 600ms ease;
	transition: background 600ms ease, color 600ms ease; */
}

input[type="radio"].toggle {
  display: none;
}
input[type="radio"].toggle + label {
  cursor: pointer;
  min-width: 60px;
  width: 120px;
}
input[type="radio"].toggle + label:hover {
  background: none;
  color: #1a1a1a;
}
input[type="radio"].toggle + label:after {
  background: #1a1a1a;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  -webkit-transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
  border-right: 0;
  background: #e6e6e6;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
input[type="radio"].toggle.toggle-left + label:after {
  left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
  margin-left: -5px;
  background: #e6e6e6;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
input[type="radio"].toggle.toggle-right + label:after {
  left: -100%;
}
input[type="radio"].toggle:checked + label {
  cursor: default;
  color: #fff;
  -webkit-transition: color 200ms;
  transition: color 200ms;
  background: #003372;
  transition: .3s ease-out all;
}
input[type="radio"].toggle:checked + label:after {
  left: 0;
}

.commentaryInput {
  float: left;
  clear: left;
  width: 100% !important;
  height: 100px;
  max-height: 200px;
  font-size: 15px;
  border: 0.5px solid #d8d8d8;
  white-space: pre-wrap;
}

.tab_box {
  width: 45%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(229, 229, 229);
  position: relative;
}

.tab_box .tab_btn {
  font-size: 16px;
  font-weight: 600;
  color: #919191;
  background: none;
  border: none;
  cursor: pointer;
}

.tab_btn.active {
  color: #535353;
}

#line {
  position: absolute;
  top: 34px;
  left: 0px;
  width: 85px;
  height: 3px;
  background-color: #535353;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.expanded-chart {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  background: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}


.mt-chart{
  width:100%; height:100%;
}

.hidden {
  display: none;
}

button#trade_export {
  float: right;
  margin-bottom: 1.5rem;
}
button#trade_add {
  float: right;
  margin-bottom: 1.5rem;
}

.overview-top-bar {
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 20px;
  width: 880px;
}

button#submit_strategy {
  float: right;
}

button#electricity_select {
  box-sizing: border-box;

  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  gap: 10px;

  width: 76px;
  height: 30px;

  /* background: #FFE7CB; */
  border-radius: 4px;
  border-color: #f29d38;
  background: #FFE7CB;

  font-weight: 500;
  font-size: 13px;
  line-height: 160%;
  color: #000;

}

button#gas_select {
  box-sizing: border-box;

  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  gap: 10px;

  width: 76px;
  height: 30px;

  background: #fff;
  border-radius: 4px;
  border-color: #CC66FF;

  font-weight: 500;
  font-size: 13px;
  line-height: 160%;
  color: #000;

}
button#electricity_select.hidden{
  display: none;
}

button#gas_select.hidden{
  display: none;
}

.utility_switch{
  display: flex;
  position: relative;
  align-items: center !important;
}

/* table progress bar */

ul.table-progress-bar {
  width: 100%;
  height: 14px;
  border-radius: 3px;
  background-color: #CCCCCC;
  font-size: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

ul.table-progress-bar > li {
  display: inline-block;
  height: 100%;
  border-right: 1px solid #eeeeee;
}

ul.table-progress-bar > li.yellow {
  background-color: #ffd351;
}

ul.table-progress-bar > li.green {
  background-color: #13892b;
}

ul.table-progress-bar > li.red {
  background-color: #bc3131;
}