/*============================================================*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

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

/*============================================================*/
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

/*============================================================*/
body {
    min-width: 1182px;
    font-size: 13px;
    /*font-family: roboto;*/
    font-family: Roboto;
    font-weight: 400 !important;
    background-color: #fbfbfb;
}

div {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
supported by Chrome and Opera */
}

/*============================================================*/
svg {
    overflow: hidden;
}

svg .indicatorPath,
svg .hand polygon,
svg .hand path {
    transition: fill 1s ease;
    -webkit-transition: fill 1s ease;
    -ms-transition: fill 1s ease;
}

/*============================================================*/
/*
*	Header
*/
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 66px;
    background-color: #ffcd00;
    border-bottom: 1px solid #f5c500;
    z-index: 1000;
}

#header.LoggedOut {
    background-color: #ffffff !important;
    border-bottom: 1px solid #d5d5d5;
}

#header .logo {
    float: left;
    width: 102.5px;
    height: 45px;
    cursor: pointer;
}

#header .logo img {
    float: left;
    padding-left: 10px;
}

#header.LoggedOut .logo img {
    float: left;
    padding-left: 0;
    margin-top: -8px;
}

#header .menu {
    float: left;
    height: 100%;
    padding: 0 10px;
}

#header .menu .menuItem {
    float: left;
    position: relative;
    height: 100%;
    padding: 0 20px;
    cursor: pointer;
}

#header .menu .menuItem:hover {
    background-color: rgba(150, 150, 150, 0.05);
}

#header .menu .menuItem .text {
    display: block;
    float: left;
    font-size: 16px;
    font-weight: 600;
    color: #292929;
}

#header .menu .menuItem .items {
    background: #ffffff;
    position: absolute;
    display: none;
    top: 56px;
    left: -10px;
    min-width: 180px;
    padding: 6px 0;
    border-radius: 5px;
    box-shadow: 0px 10px 32px rgba(136, 136, 136, 0.3);
}

#header .menu .menuItem:hover .items {
    display: block;
}

#header .menu .menuItem .items .item {
    float: left;
    width: 100%;
    height: 36px;
    white-space: nowrap;
}

#header .menu .menuItem .items .item .itemText {
    display: block;
    float: left;
    width: 100%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    font-size: 14px;
    font-weight: 500;
    color: #7b7b7b;
    padding: 0 20px;
}

#header .menu .menuItem .items .item:hover {
    background-color: #fbfbfb;
}

#header .right {
    float: right;
    height: 100%;
}

#header .selectLanguage {
    float: left;
    background: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin-right: 20px;
    cursor: pointer;
}

#header .selectLanguage .selectedOption {
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    position: relative;
}

#header .selectLanguage .flag {
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    font-weight: 500;
    color: #808080;
}

#header .selectLanguage .options {
    display: none;
    position: absolute;
    width: 100%;
    top: -5px;
    left: -5px;
    background: #fff;
    z-index: 2;
    border-radius: 30px;
    padding: 5px;
    overflow: hidden;
}

#header .selectLanguage .options .flag {
    margin-bottom: 10px;
}

#header .selectLanguage .options .flag:hover {
    background: #ffcd00;
    color: #fff;
}

#header .selectLanguage .options .flag:last-child {
    margin-bottom: 0;
}

#header .selectLanguage.t2 {
    border: 1px solid #d5d5d5;
}

#header .selectLanguage.t2 .options {
    border: 1px solid #d5d5d5;
}

#header .select {
    float: left;
    width: 170px;
    height: 30px;
    background-color: #fff;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    font-weight: 500;
}

#header .select.hide {
    display: none;
}

#header .select .options {
    display: none;
    position: absolute;
    width: 100%;
    top: 38px;
    left: 0;
    background: #fff;
    z-index: 2;
    border-radius: 6px;
    max-height: 400px;
    overflow: auto;
    box-shadow: 0px 10px 32px rgba(136, 136, 136, 0.3);
}

#header .select .options::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
}

#header .select .options::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #adadad;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

#header .select .options::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #ffffff;
}

#header .select .options li {
    float: left;
    width: 100%;
    height: 32px;
}

#header .select .options li:hover {
    background: #ffcd00;
}

#header .select .options li:hover a {
    color: #ffffff;
}

#header .select .options li a {
    display: block;
    float: left;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #878787;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#header .select .options li.selected {
    background-color: rgba(205, 205, 205, 1);
    color: #ffffff;
    font-weight: 500;
}

#header .select .options::-webkit-scrollbar {
    display: none;
}

#header .select .selectedOption {
    float: left;
    width: 92px;
    color: #878787;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 0;
    padding-left: 10px;
}

#header .select::after {
    content: "";
    width: 11px;
    height: 11px;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0.6;
    background-size: contain;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhBxUONxE0ArT2AAAAq0lEQVRIx+3MLRKCUBSG4RcjYza4BYkWHaLBLRlcjMVKsZrcAA0DwyYsOoZjgPGPe+GcGxwDXzonPC8M+49FJEQBbsYIYM4ZoWBlwktyhJIFZAiCcGWt5imXRh2gak594sWFCjbPR5d458IWYo6GxCc/MQZLwsn1CS/XJTp5f6KXdydU3J9Qc3fCxF0JI28nzNyXMHBXwsi/EwG8Tuy4cWcfxutNmIbjYb/aA2JvzPaI51TvAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA3LTIxVDE0OjU1OjE3KzAyOjAwRgbx7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNy0yMVQxNDo1NToxNyswMjowMDdbSVMAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC);
}

#header .notifications {
    float: left;
    width: 42px;
    height: 100%;
    cursor: pointer;
    position: relative;
    font-weight: 500;
}

#header .notifications:hover {
    background-color: rgba(160, 160, 160, 0.05);
}

#header .notifications .notificationIcon {
    float: left;
    width: 20px;
    height: 24px;
    background-size: 20px;
    background-repeat: no-repeat;
}

#header .notifications .notificationList {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    width: 400px;
    background-color: #fff;
    border: 1px solid #d5d5d5;
}

#header .notifications .notificationList .empty {
    color: #989898;
    font-weight: 500;
    font-size: 18px;
    margin: 100px 0;
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 76px;
}

#header .notifications:hover .notificationList {
    display: block;
}

#header .notifications .notificationList::before {
    position: absolute;
    display: block;
    content: "";
    border: solid 6px transparent;
    border-top: none !important;
    top: -7px;
    right: 11px;
    border-bottom-color: #fff;
    border-width: 7px;
}

#header .notifications .notificationList ul {
    float: left;
    width: 100%;
    /*margin: 12px 0;*/
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

#header .notifications .notificationList ul::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
}

#header .notifications .notificationList ul::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #adadad;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

#header .notifications .notificationList ul::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #dddddd;
}

#header .notifications .notificationList ul li {
    float: left;
    width: 100%;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
}

#header .notifications .notificationList ul li .notifyRow {
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 12px;
}

#header .notifications .notificationList ul li .notifyRow::before {
    content: "";
    background-color: #ffcd00;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: absolute;
    left: -28px;
    top: 29px;
    display: none;
}

#header .notifications .notificationList ul li .notifyRow .icon {
    display: inline-block;
    min-width: 25px;
    min-height: 21px;
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: left;
}

#header .notifications .notificationList ul li .title {
    float: left;
    color: #616161;
    font-size: 15px;
    line-height: 1.3;
    margin-top: 18px;
    margin-bottom: 5px;
    width: 98%;
}

#header .notifications .notificationList ul li .time {
    float: left;
    width: 100%;
    color: #a0a0a0;
    font-size: 12px;
    line-height: 1;
    /*margin-bottom: 18px;*/
}

#header .notifications .notificationList ul li:hover {
    background: #f4f4f4;
}

#header .notifications .notificationList .showAll {
    float: left;
    width: 100%;
    height: 38px;
    background-color: #616161;
}

#header .notifications .notificationList .showAll a {
    float: left;
    color: #fff;
    margin-left: 10px;
}

#header .notifications .notificationList .showAll span {
    margin-right: 11px;
    float: right;
    width: 9px;
    height: 15px;
    background-size: 8px;
    display: block;
    background-repeat: no-repeat;
}

#header .right .selectedOption {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#header .right .options li a {
    width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#header .userArea {
    float: left;
    height: 100%;
    cursor: pointer;
    position: relative;
    font-weight: 500;
}

#header .userArea:hover {
    background-color: rgba(160, 160, 160, 0.05);
}

#header .userArea .username {
    color: #292929;
    font-size: 16px;
    float: left;
    padding: 0 12px;
    max-width: 135px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#header .userArea .userImage {
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 30px;
    margin: 0 5px;
    background-size: 30px 30px;
}

#header .userArea .userImage::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    bottom: 0;
    right: 0;
    background-size: 13px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANMAAADRCAYAAABWz4fSAAAb+klEQVR4nO2dfZhcVZ2g31tf3V3VVd3pJJ10J+l0EhJDGD5FKPG6YjGzgu3ooD6jA444ujur4z6zLCiIXyC4wwAj8MgoOqPMiARnHVZXJDA7rkUIhZQQAyYkhHyR7+40Sfq7ur7v/lHdbJN0kv4495xzq877PPUkfyTn96vu+95z7rnn/I7lOA4GtfxbMvWHbrVdKBSLf/y+y9e71b7h/xNQnUCtc8ff/XPzu+KrQ8A6N9oPhQJdbrRrOBmf6gRqnXlzo/NwSSSDXIxMipk3NzbP7Ri33fVQo9sxDEYm5cxpbmx2OcS65uaI2zEMGJmU4/NZrv8OmpuMTDIwMink63f+ICwjzpymSIuMOLWOkUkhY89Lrk8+NDbWm2cmCRiZFCJj8gHAsiwZYWoeI5NC5rZEpcgEcMvt3w/JilWrGJkUEgz6Zb00X2cmIdzHyKSIW+6Q21OY6XH3MTIpQtbkwzimZ3IfI5MiZE0+jDPH9EyuY2RSxNiaPGkEAtKez2oWI5MiGupD9bJjfvsfftohO2YtYWRSgKJp6nUdS+YbmVzEyKSA5csWLEfBtotYtCEmO2YtYWRSwFKFPcQ3v/UjMxHhEkYmydz8je8FFE4GrOvsmN+pKHbVY2SSzApFQ7xx2tta2lXFrnaMTJJZuqS1U3UOP3vi15epzqEaMTJJ5Jbbvx+SuB7vVKxrbo4033nfw1Lfc9UC2st08ze+p/riE8Y7L3lbHD2Kp6x7+4UrLlKdxExIptLhZCr9QdV5TIbWMj306ONr3nfFBf/xR//yxHmqc5kt3/6Hn3botEkvEPAH/vHH/3u16jymQzKVvgx4GfhFMpW+WXU+J2LpWoTyoUcfX9PZ0dpJ5U7elcsX8889/2rqm1/5z1nFqc2IZCr9fvTolSbSlXxmS1L3n2kyla4D7gBu5K0dwJcSdvwuNVmdjJYynSDSRLr27uvd++lrP7hNQVoz5mfrfn3Z2Kpt3WTCcZyu9c9uXX/Hl/9TRnUuk5FMpS8GfgSsOcU/uTlhx++WmNIp0U6m04g0Tlc2m89u+M22DX/79c8WJaY2I771nZ+0X3j+sgvQUKQJdD2T2rrhG1/6zLDqRMZJptJB4GvALZy58rAWQmkl0xREmkjXrt3du/7yuqt3uJzWjLn9nn+K2e8820ZvkcbpevY3r6ZuvekvBlUnkkylzwUeBi6Yxn+7KWHH73EppSmhjUzTFGmcrkwml3kmtXXDPbf/Vdml1GbE397/43mXXLzyErwh0jhdz7/wWvorN1x3XEXwZCrtB24CbgNmshhYqVBayDRDkSbStX3Hoe1/9emP7BGY1oy598GftF9wrvZDu1PR1XOkv+eaj1y5SWbQZCp9IfAgcOksm/piwo7/nYCUpo1ymQSINE7X8HB2+INXXr5BQFoz5u9/8FjnmtWL1+BNkcbpchyH7TsObf/8Zz7q6g1qTKJbgQ8JbFaJUEplEijSOF0Ar2zb/8pf/+Wf7hfU5pT58U/XXbCofW473hZpIl35fDG/cdOujV/9wqf6RTbskkQTkS6UMplcEGkiXbl8Mb95y97NN/+3T/S60P5b+M4PH1u+etWi1WPFHqtFpIl0FQrF4oGDx/b3Hh04HH/HqmzCjuen20gylY4BlwD/FfckmsgXEnb8WxLiAIpkclmkiXTlcoX8y1tef/mW6z95VHTjd337kdYLz1t2wdiWimqU6FSUgOeBx4FNwNCEz/DYnz7gPCryjH9WI3/VjTShpMskUaSJdI1m89nfb9778pdv+OSsZqpuuvVBX8eSeR2dS1s7ww11YWpLoulQRp/lajcm7Pi9bgeRKpMikSbSBZAZzWV6ewd6j7wx0HvL9X9+xh7rf9z7o5aOxfM62hbOWejz+XwYgbyI60JJk0kDkSajC8BxHHK5QjYQ8Af8fl/gFIXudcrbMDNuSNjx+9xqXIpMmopkqE1cE8r1Ma0RyaAZ9yZT6evdaNhVme68/8fzjEgGDblv7D2XUFwf5v3iqaf/QzTa0IgRyqAPjybs+LWiG3V9mPehq967oVx2tFqEaqhpdgOfdaNhKe8BXti48wXGZs4MBoXkgY8n7PiQG41LkenLN3zy+IGDRw9ihDKo5UsJO77RrcalvaG+7uMf2JwZzWUwQhnUsA64380AUpd7fOCP3rNe9ZYPQ01yGPhUwo67evFJXzv10ubXN2F6J4M8ysC1CTsufKHziUiX6Qufv6an50h/D0Yogxy+mbDj62UEUrKq95qPXLkplytMez+MwTBNngVulxVM2RL59c9uXY/pnQzucQy4JmHHS7ICKpPprts+W9y5u3sXRiiDO1yfsOMHZQZUunnrv1x39Y5SqWxWRxhEswlYKzuo8p2QW7bt24zpnQxi+aLb0+CToVymGz73Z4fNZIRBIE8m7HhSRWDlMgH87uXdGzG9k2H2lABlR81oIdNXb/xU/+DQqPIa1wbP888JO/6KquBayASw9dX92zC9k2F2uFbfYSooL488EU0PBDN4g96EHV+gMgFteiaAfL5oJiIMM0VpjXnQTKbuI309qnPQkYDfT319HXV1ISpl+wyT8IzqBLQ6yfxw9/HDS5fM76LGhnqhYJBwJEwwECAYDBAMBsf+HiQYDHBiHb9yuUyhUKBQKFIoFt/8e75QYGR4hBp9D75edQJaPTNB7Tw31dfX0xSL0hSL0tBQL6xdx3EYHh5hYGiIwcEhCgXtTyoVwTFgvooXtRPRqmcCKJedss83aUVVT2NZEAmHicViNMWihEJBl+JYRKONRKON0N5GZnSUgcGKWNlszpWYGvCiapFAQ5mqDZ/PR+v8ucyd20LA75ceP9zQQLihgbYFreRyeXrfOMrxPqFHLelAQXUCoKFMlqXXpMhMsSyLuS1zWNA6n0BAvkSTUVcXYsnidubPa+FwTy9DQ9ocrj5btPgBayiT94d4zU0x2ha2EgrN5Ixj96mvr2d5ZwfDwyMc7jnC6GhWdUqzRYsbsHYyeZnGSIS2tlbCDQ2qU5kSjY0RVp21nP7+AbqP9JLPazFamgmmZ6oWfD4fSxa309wUU53KjGhubqKpKUZ3Ty9vHD2mOp2ZYHqmaiAUDNLZuYSGenHT2yqwLIv2tgXU19dx8FA3ur0yOQNaXMdaGO1VIuEwK89a5nmRJtIyp5kVy5cSCGhxfU6Vc5OptPJrWXkCE7nz/ofnqc5hqnj0opsSHrxJtADCj4iZLlrJtKhtbjuar36wLGhvW8CSxe1VMfN4KkLBIGet6KTJO8+BV6hOQCuZFi5oXqg6h9NhWRadSzuYP2+u6lSk4PP56OxY7JXv+4eqE9BKpkDAr/WYafGiNmLRRtVpSKe9bYEXZirtZCpdpzIBbWS6+9uPtKrO4XTMm9dCy5xm1WkoY8niRUIX5LpAA3CZygS0kens1YvXoOnzUrSxkfaFWo9AXcfns1i2tIOg3hMu/11lcC1kuvP+h+dFwvVh1XlMRl1diKUdi6jiuYYpEwwG6Fy6ROeJlz9OptLvUhVci9vMhectvwANeyW/38eypR34Ja/2DgYC+H0+fD4Ly7Lw+Xz4xi7gcrlM2XEolx3KTplSqUyxJK2cNuFwAx2L29l34JC0mNPkLsBWEVj55sD7HvyXxeef23kemslkWbBsaUdlX5DrsSxCgQChYIBg4OSdtWeiXC6TLxbJj+28lUH3kV56e10/8mimfChhxx+XHdTfsfLS0IXnrZR3azuB4czgZT6f9aSq+Kdibssc16eE/T4fjQ31NIYbCAWD+P3+GQ2hLMsi4PdTFwrSUBfCsnyu91aNkQgDA4NSe8VpcN7r+w9+b1nHYqk9he/T116VB3ho7VPS9ws89Ojja/x+/SqE+Hw+Fi6Y7177lkWkoZ7maCOhoNgdt5Zl0VAXYk60kfq6EG493VgWLFyo7QTsOSiYjHjzQpYt1QP/+K+dnR2tnWg2vAOYP2+ua8uEGurqaI42Uu/yXifLsojUjwvrzndpikWJRLScNwK4O5lKf0xmwJN6BRlS3f3A2tZzzl6i5VR4IBCgdb744Z1lWcQiYcL1dVJnw3w+H9FwmIY6d95nti1UWvfxdPiAh5OptLRlRqccYrkl1Tfu/qfYxReuuBgNRQJY2DpfeG06v89HU2NE6TuacH0d0XCDcJEj4QaaYlGhbQokBPw8mUpfJCPYGa+acal+uPbJWUt1y+3fD9nvXG2jqUh1dSFaWsSucggGAjQ1RtDh0TAUDBKLhN+cZhdF28IFOr97igJPJVPps9wONOXf8Geuff+spLrngbULr7j8vIRlWVqKBOIvCr/f50pvMBsCfj/RSFjoS+i6upDuS61agVQylf6wm0Fm/J7ph2ufDI0LdiYe++Wv4i1zoi1o2iMB1NfX8baVK4S1Z1kWzY0RbcsZ5wsFhjKjwtorFAps275TWHsu8hjw+YQd7xXd8Ix/01Ppqb71nZ+0//rZ59+vu0gATTGxq6Kj4QZtRYLKkE/kpEQwGCQc9kQhmY8C25Kp9LWiGxa2AuKhtU+Fxp+vvnjrd33xd7wtPqc50ozmEo2z6qzlwlZFRxrqXZ/6FsXQSIa8oFUTvW8cpbtH+A3fTZ4Abk/Y8RdFNCZ0OdGmLdusvv6BK63KQ4InJILKXfrs1SuFtBXw+2lqjAhpSwblcpk+QcUos7kcr+3YLaQtyeynMvx7DEjPtNTyrGXatGWbb3BoOFYul8fHNJ6rFTVvbguL2sVssYiNnWbhJUayWbI5MUdjbd+xi5ygthRxCPhfwC+AjQk7PuXjYact04u/fyUwOpoNF4vFiVeM5wSayIplS2kU0JsEAwFi+q4IOCWO49A3NCykvFd3zxF63/D05TARB9gFvARsGv8k7PikX/C0Mr3w0pbQaDZbXyqVTrzVVs1Py+/3c87Zq4RMXzc1RpQU5xfBaC5PJjv7MskjmQy7du+dfUJ6s5+TBTv8FpnW/+aF5gnDtXGqRpzJmNPcRMeSRbNux6u90jiO49A3OISIJ+itr+6gKGkriEYceYs4YyIdO+FT1Yjar+TWYlJZWJYl7Fkv6qEJGIEs0PdFiCREbYEIeWzSYTKE/SxcOshNd2pepqCAHsXv92v9gnaqiPhZAFVZ5XYqeP8KmCWBwOzvotXQK0Fl06KIg9mCgjc8eoWalsnvrxQtmS1encGbjIBPgExVcnOZLjUtU1BArwQIEVIXhNxcPD4ZM1NqWiZRv3TR+4NUIuLZz/RMNYioX3o1TD6MI+LGYAl69vIa1XMVzAARs1fV1CuBuBuDiIkdr1HTMlmWgK9fZTKJ+jbV9Bw5VWpaJhFLXsrlsoBM9KEsaEtOsVBzy4lqW6aCoF+46hLTIhF1c5BVplknalumYkFIO+VyFckk4MZQLJaq6gYzVWpaJlFDkbJTPUM9ETeGoqCblNeoaZkKxSIibqClKnpuEvFdRA2fvUZNywRiJiGq6eIR8axTi89LYGQSI1OxWBXPCKK+RzXdXKZDzctUKMx+fO8AhaKW5xRNi7wgCcwzU40yIqiqab4KLiBR32FkRFylWC9R8zINDg4JaSdf8PZQr1AsCpnJyxcKjAoozOJFal6mbC4npM6b4ziMerheXCabE9KOqJuTF6l5mQAGBF0A2XzOky9wc4WCsLNpRf0svchkMs2d8KkJRN1NHQcyOe8NcUT1SqVSiZGRjJC2vMgpi1D+dtPmUC6Xqy+eXIASqrAE2DlnrxJWCMRLxShFFZ8E6OsfYP+BQ0La0hwHOAC8Bmwf/3Pa5ZE3bt4ayOVyoXy+EHIcZ2LP5mnBlixuF3Zg1/ixmzodcjYZxVKJgeERYe3t3X+QgYEpl+b2AhlgBxVh3pQG2JGw4yd1wUJOwfjd5q2+oeGR2AnVYD0lVywaZVnnEmHt6V7htVwuMzA8ImzLheM4vLLtNa9vSTkMPDn2+R1wYDonYgg9Umac517cFM7l8uOHHXlCKsuyWL1qBSGB5yrVh0JEBJ35JBLHcRgcyQibdAA4fryfA4cOC2tPEiXgt1TkWZew4y/PpjFXZBrnty9tDo2MZMbrD2svVXNTjKUdi4W2qePBZ0OZjLDVDlDp5bbv2OWlZURl4AfA10Qex+mqTONsSG+MTTiCRmupVq5YJvw4yfq6EJF69T1U2XEYzmSEL33q7T1K9xHPnBi4Cfhcwo6/ILphKTKN8/Rz6WbHYfxwAC1pjIRZsbxTeLuhQIBGhSevl0plBjMZ4c80xWKJ7a/t9MI2lH7gq8CDCTvuSrJSZQJIvbCpMZ/Ph9BYqGWdS4hFo8Lb9ft8RCNh/JJLg+ULBYZHs64sdzrU3cPRo8eFtyuYp4BPuXHC+kSkr4CwL7loOBQM5tH4pXB3d6+QTYMnUiqX6R8aZmQ0K2wW7XQUSyUGRzIMZUZdESmfL3DsWJ/wdgXzFPAnbosEipYT2Ze+fTiosVDZXI6+vn732s/n6R8aJpPNuXKRl8plhjOjDAyPuLpRr+dIr+6Le38FfDhhx6UsmpQ+zJvIhIkJ7YZ8wUCAVStXuF6Z1LIsQsEAoWCQYCAw47p1juOQLxTJFwtCZ+pOxchIhl179roeZxY8DXQl7Li0/SBKZQLYkH4xViyWtBQqEgmzYtlSaZMG46f3hYIB/D4fPsuatMKq4ziUHYdyuUypVCZfLEjdnJgvFNi5aw9FfTdEPgtclbDj4pZ3TAHlMgEkU+kWNJQJoKWlmSWL2pXmYFlWpUKqU5neVvk7K5fL7Ny9l6y+e5b6gVUJO/6G7MBabMGIRRsH0fT56fjxfo4eUztb5TgOpVKZUrms/Bll/4FDOosE8HUVIoEmMl18/h8ULcsqo6lQh7t7GBK4INSrdPf06r5faQvwXVXBtZAJ4L3vutS96bNZ4jiwb/9BITtyvUpf/wC9bxxVncaZ+OuEHVf2IKeNTADBYEDb6fJSqcTr+w5QErg41CtkMqMcOKj9Itb/mbDj61UmoJVM77704mHVOZyOXC7Hrt17yeVrp4caGBxi9+v7lD+rnQEH+JLqJLSSyQtkczl27nqd4Rp4hurtPcrefQe8sEfpdwk7vld1EtrJFAk3DKPpUG+cUqnEnr37lc/yuUW57LDvwCEvrQT/peoEQEOZLr3ofE+MoRzH4dDhHg4e6tZ9CDQtCoUiu/fspb9/QHUq0+Fx1QkA1Oax2AI5dryPXC7H0o4lnj8UOZMZZe++A14rvH9gtjtkRaFdzwQQCoW0ndWbjOGRDDt27aGvz1N38zcplct0H+ll1569XhMJ4AnVCYyjpUz2JRdpPas3GYVCgf0HD/Hazj0MDXkjfcdxOHrsONtf20lv71GvDleTqhMYxwzzBJPNZtmzdz+NjRHaFrYSbhC7BV4U/QODdPf0kvf+NL82G6qMTC4xPDzCzl2v09wUo21hq9CqR7NheGSE7u5eMqNVc1KFNu8ojEwu0z8wyMDgELFoI7FYlFg0Kn2iIpfLMzg0xMDAoLAjdDRCmzG1kUkCjuMwMDjEwOAQlgWRcJhYLEpTLEYoFHQlZiYzysDgEIODQ2RzYmqJa4rpmU7HCy9t9vYc82lwnMrs3/BIhsPdR6ivr6cpFiUSaSAYCBIIBqZVp9xxKkeJFotF8oU8Q0MjDA4NeamG3WwxMp2O4ZGMH003C4omm82etD/IsiyCwQDBQIDA2Hb2YCBA2XEoFosUCkUKxQLFQtGLU9mi0ebYDS1lAm5UnYBKHMchny+QzxeAqnvGEc0K4PeqkwBN3zMB71CdgMEzaHOtGJkMXkeba0U7mZKp9EJAbPV8QzVjZDoN2vxwDJ7g3GQqrf5UBIxMBu8TAC5QnQRoJlMylfYBH1Gdh8FzfFR1AqCZTMCfAmtUJ2HwHJ9LptILVCehjUxjvdLXVOdh8CRh4CbVSWgjE6ZXMswO5b2TFjKZXskggAbgZpUJaCETplcyiOGzY+8plaBcpmQqHQa+qToPQ1XQAPyNquDKZQLuorJY0WAQwV8kU+kuFYGVns+UTKUTwP+FGR+YZzBMRjfwBwk7LrVKqLKeKZlKR4GHMCIZxNMG/L3soCqHefcCSxXGN1Q3f5ZMpaWujFAyzEum0lcBT0oPbKg1jgLnJOy4lKLp0numZCo9B/iB7LiGmmQe8D1ZwVQM8x4A1J64bKglrk6m0p+QEUjqMC+ZSl8N/ExaQIOhQh+V2T1Xjz+U1jMlU+n5SOxyDYYJSHm0kDnMuxtolRjPYJjIVclU+mNuBpAp073AGxLjGQwTSQHr3AwgTaaEHd8CXIERyiCfFHBVwo67Wpdc6myeEcqgACkigYKpcSOUQSLSRAKFC12TqfS5wK+B+UoSqCyGfAZYP/bZQeXm4gP8Yx8f0AjYVG4AVwBnyU/VMAOkigTqV43LFmoDsBZYn7DjO2bSQDKVXkpFqi7gT9BjG4vhrUgXCRTLBNKEehW4OWHHfymy0WQqfT5wJ3CVyHY9wmHg34FtQB7Ijf05/vEBFwPvBi5C3iERSkQCDWQCV4XqAW4Ffpiw4yXBbb9JMpV+D5VNjpe6FUMDRqn07P8H+PeEHd861f+YTKUjQJyKWO8G3kNlGC0aZSKBJjKBcKEywD3APQk7Lu0wrGQq/WEq+2jaZMWUwBHgK8AjCTsu5AjCZCq9hsrN5wMi2htDqUigkUwgTKjNwMcTdvxVMVlNj2Qq3Ull+LNSRXyB5ID7gL9J2PEhNwIkU+nLqdz0Lp5lU8pFAs1kglkL9V3gxoQdz57xX7rI2DrEp4C3q8xjFjwG3JSw46+7HSiZSlvAx6gUQlk2gya0EAk0lAlmJFQf8JmEHf+5e1lNj7Ft+T+nMvPnFQaBjybs+K9kB06m0iHgdiqVWadaykAbkUBTmWBaQj0HXJOw4/vdz2p6jF0ga9GksPwZOAZcmbDjG1UmkUyl3wc8zJkXRWslEmgsE5xRqDKVocFtbs7UzZZkKl0HvAysVp3LaegB/ihhx19RnQhAMpVuAx4BEqf4J9qJBJrLBKcU6jDwiYQdf1pNVtMjmUq/k8oFoOML3gPAFQk7vlN1IhMZK5n9ZeA23jqNrqVI4AGZ4CShngSuS9jxo2qzmh7JVPo+4HrVeZzAXuDyhB3fpzqRU5FMpd8NPErlaFZtRQKPyARvCvVe4IGEHfdG0hMYKwO9BViuOpcJXJGw40nVSZyJZCo9l8rExB26igQekqkaSKbS76XSw+pQePORhB3/c9VJVBM6juGrlrFnPB0KyvQDN6pOotowMsnnUdUJALfIKsxYSxiZ5PMUoHLc/1vg+wrjVy1GJskk7Pgo8ITCFL7gxQkcL2BkUsO/Kor7BvAbRbGrHiOTGlQN9f4tYcfLCuLWBEYmBYwN9Vyt4XYKzMkjLmJkUkdKcrwSlV2yBpcwMqnjJcnxnk/Y8T7JMWsKI5M6fk9l5bsszBDPZYxMihhbY7ZLYsjnJMaqSYxMapE51NsuMVZNYmRSyyZJcfrM8iH3MTKpRVbP9JqkODWNkUktsmQyQzwJGJkUMrZb+KCEUEYmCRiZ1COjdzIyScDIpB4ZMplnJgkYmdTj9oxeEdjtcgwD8o75MJyap4GrXWx/NGHHCy62bxjj/wHvn8Sc6IznbAAAAABJRU5ErkJggg==);
}

#header .userArea .userAreaPopup {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    width: 230px;
    background-color: #fff;
    border: 1px solid #d5d5d5;
}

#header .userArea:hover .userAreaPopup {
    display: block;
}

#header .userArea .userAreaPopup::before {
    position: absolute;
    display: block;
    content: "";
    border: solid 6px transparent;
    border-top: none !important;
    top: -7px;
    right: 9px;
    border-bottom-color: #fff;
    border-width: 7px;
}

#header .userArea .userAreaPopup ul {
    float: left;
    width: 100%;
}

#header .userArea .userAreaPopup ul li {
    float: left;
    width: 100%;
    height: 45px;
}

#header .userArea .userAreaPopup ul li .icon {
    float: left;
    margin: 0 14px;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#header .userArea .userAreaPopup ul li .text {
    float: left;
    color: #a0a0a0;
    font-size: 15px;
}

#header .userArea .userAreaPopup ul li:hover .text {
    color: #707070;
}

#header .userArea .userAreaPopup ul li:hover .icon {
    filter: brightness(0.8);
}

#header .userArea .userAreaPopup ul li.on .text {
    color: #505050;
}

#header .userArea .userAreaPopup ul li.on .icon {
    filter: brightness(0.5);
}

#header .buttons {
    float: right;
    height: 100%;
    display: table;
    margin: 0 10px;
}

#header .buttons .button {
    float: left;
    border: 1px solid #ffcd00;
    font-weight: 500;
    font-size: 15px;
    color: #3f3f3f;
    padding: 9px 25px;
    margin: 16px 10px 16px 10px;
    cursor: pointer;
    border-radius: 4px;
}

#header .buttons .button.fill {
    background: #ffcd00;
    color: #3f3f3f;
}

#content .content-body .buttons {
    float: inherit;
    height: 100%;
    display: table;
}

#content .content-body .buttons .button {
    float: left;
    border: 1px solid #ffcd00;
    font-weight: 500;
    font-size: 15px;
    color: #3f3f3f;
    padding: 9px 26px;
    margin-top: 30px;
    cursor: pointer;
    border-radius: 20px;
}

#content .content-body .button.fill {
    background: #ffcd00;
    color: #3f3f3f;
}

/*#content .content-body .buttons .button:active {
    background-color: #FECC2F;
}*/
/*#content .content-body .buttons .button.selected {
    background-color: #FECC2F;
}*/
/*============================================================*/
/*
*	Content
*/
#content {
    margin-top: 67px;
    float: left;
    width: 100%;
    display: table;
    padding: 32px 0;
}

/*============================================================*/
#content .noCompanyError {
    float: left;
    width: 100%;
    height: 397px;
    background-size: contain;
}

#content .noCompanyError .errorContent {
    display: table;
    max-width: 1000px;
    padding-bottom: 10px;
}

#content .noCompanyError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .noCompanyError .errorContent .errorIcon i {
    float: left;
    width: 82px;
    height: 82px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .noCompanyError .errorContent .errorTitle {
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}

#content .noCompanyError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

/*============================================================*/
#content .noDeviceError {
    float: left;
    width: 100%;
    height: 397px;
    background-size: contain;
}

#content .noDeviceError .errorContent {
    display: table;
    max-width: 1000px;
    padding-bottom: 10px;
}

#content .noDeviceError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .noDeviceError .errorContent .errorIcon i {
    float: left;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .noDeviceError .errorContent .errorTitle {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
}

#content .noDeviceError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

/*============================================================*/
#content .contentHead {
    float: left;
    width: 100%;
    height: 85px;
}

#content .contentHead .icon {
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 10px;
}

#content .contentHead .title {
    float: left;
    color: #b9a24c;
    font-size: 26px;
    font-weight: 500;
    max-width: 700px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#content .contentHead .buttons {
    float: right;
    height: 30px;
    margin-top: 28px;
}

#content .contentHead .buttons .select.time {
    float: right;
    margin: 0 10px;
    font-size: 16px;
    width: 160px;
    text-align: left;
    color: #b6bfce;
    height: 28px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    cursor: pointer;
    cursor: pointer;
    position: relative;
}

#content .contentHead .buttons .select.facility {
    float: right;
    margin: 0 10px;
    width: 200px;
    font-size: 16px;
    color: #b6bfce;
    height: 28px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    cursor: pointer;
    cursor: pointer;
    position: relative;
}

#content .contentHead .buttons .select.facility .options {
    width: 200px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: hidden;
}

#content .contentHead .buttons .select.device {
    float: right;
    margin: 0 10px;
    min-width: 200px;
    max-width: 300px;
    font-size: 14px;
    color: #666;
    height: 28px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    cursor: pointer;
    position: relative;
}

#content .contentHead .buttons .select.device .options {
    width: 280px;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: hidden;
}

#content .contentHead .buttons .select.device .options li.option-group-header {
    height: auto;
}

#content .contentHead .buttons .select.device .device-search-input:focus {
    border-color: #ffcd00;
}

#content .contentHead .buttons .select.facility .options li {
    float: none;
    display: block;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#content .contentHead .buttons .select.facility .options li.option {
    cursor: pointer;
}

#content .contentHead .buttons .select .options li.search-option {
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 10px;
    height: auto;
}

#content .contentHead .buttons .select .options li.search-option:hover {
    background: #f5f5f5;
}

#content .contentHead .buttons .select .facility-search-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

#content .contentHead .buttons .select .facility-search-input:focus {
    border-color: #ffcd00;
}

#content .contentHead .buttons .select .options {
    display: none;
    position: absolute;
    width: 100%;
    max-height: 280px;
    top: 40px;
    left: 0;
    background: #fff;
    z-index: 5;
    border-radius: 4px;
    overflow: auto;
    -ms-overflow-style: none;
    border-radius: 10px;
    box-shadow: 0px 10px 32px rgba(136, 136, 136, 0.3);
    scrollbar-width: none;
}

#content .contentHead .buttons .select .options li {
    float: left;
    width: 100%;
    height: 34px;
}

#content .contentHead .buttons .select .options li:last-child {
    border-bottom: none;
}

#content .contentHead .buttons .select .options li:hover {
    background: #ffcd00;
    color: #ffffff;
}

#content .contentHead .buttons .select.time .options li a {
    display: block;
    float: left;
    margin-left: 5px !important;
    width: 100%;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#content .contentHead .buttons .select.facility .options li a {
    display: block;
    padding: 0 10px;
    width: 100%;
    font-size: 14px;
    line-height: 34px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#content .contentHead .buttons .select .options li.selected {
    background-color: rgba(205, 205, 205, 1);
    color: #ffffff;
    font-weight: 500;
}

#content .contentHead .buttons .select .options::-webkit-scrollbar {
    display: none;
}

#content .contentHead .buttons .select .selectedOption {
    text-align: left;
    color: #b6bfce;
    font-size: 14px;
    padding: 4px 0;
    margin-left: 20px;
}

.facilityReport .contentHead .buttons .select .selectedOption {
    overflow: hidden;
    max-width: 230px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overlay .contentHead .buttons .select .selectedOption {
    overflow: hidden;
    max-width: 176px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#content .contentHead .buttons .select::after {
    content: "";
    width: 11px;
    height: 11px;
    position: absolute;
    top: 10px;
    right: 15px;
    opacity: 0.3;
    background-size: contain;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhBxUONxE0ArT2AAAAq0lEQVRIx+3MLRKCUBSG4RcjYza4BYkWHaLBLRlcjMVKsZrcAA0DwyYsOoZjgPGPe+GcGxwDXzonPC8M+49FJEQBbsYIYM4ZoWBlwktyhJIFZAiCcGWt5imXRh2gak594sWFCjbPR5d458IWYo6GxCc/MQZLwsn1CS/XJTp5f6KXdydU3J9Qc3fCxF0JI28nzNyXMHBXwsi/EwG8Tuy4cWcfxutNmIbjYb/aA2JvzPaI51TvAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA3LTIxVDE0OjU1OjE3KzAyOjAwRgbx7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNy0yMVQxNDo1NToxNyswMjowMDdbSVMAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC);
}

#content .contentHead .buttons .select .loader {
    opacity: 0;
    background-image: url(/assets/img/loader.gif);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    left: -36px;
    background-size: contain;
    z-index: 0;
    transition: transform ease 250ms;
    -webkit-transition: -webkit-transform ease 250ms;
    transform: translateX(40px);
    -webkit-transform: translateX(40px);
}

#content .contentHead .buttons .select.load .loader {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
}

#content .sections,
#content .sections2 {
    float: left;
    width: 100%;
    display: table;
}

#content .section {
    float: left;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 1.5px 20px 0 rgba(255, 205, 0, 0.14);
    margin-bottom: 32px;
}

#content .section.transparent {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

#content .section.half {
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
}

#content .section .innerSection {
    float: left;
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 1.5px 10px 0 rgba(255, 205, 0, 0.14);
}

#content .section .sectionHead {
    float: left;
    width: 97%;
    height: 80px;
}

#content .section .sectionHead .sectionTexts {
    float: left;
    margin-left: 32px;
}

#content .section .sectionHead .sectionTexts .sectionTitle {
    color: #b9a24c;
    font-size: 26px;
    cursor: pointer;
}

#content .section .sectionHead .sectionTexts .sectionDesc {
    margin-top: 7px;
    color: #b9a24c;
    color: #9da8bc;
    font-size: 14px;
}

#content .section .sectionHead .sectionTexts .sectionDesc b {
    font-weight: 500;
}

#content .section .sectionHead .buttons {
    float: right;
    margin: 0 16px;
}

#content .section .sectionHead .buttons .button {
    float: right;
    margin: 0 10px;
    width: 120px;
    text-align: center;
    font-size: 16px;
    color: #b6bfce;
    padding: 8px 8px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    cursor: pointer;
    background-color: #ffffff;
}

#content .section .sectionHead .buttons .button.disable {
    opacity: 0.5;
}

#content .section .sectionHead .buttons .button.on {
    background-color: #ffcd00;
    color: #ffffff;
}

#content .section .sectionHead .buttons .loader {
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 9px;
    left: -20px;
    background-size: contain;
    z-index: -1;
    transition: transform ease 250ms;
    -webkit-transition: -webkit-transform ease 250ms;
    transform: translateX(32px);
    -webkit-transform: translateX(32px);
}

#content .section .sectionHead .buttons.load .loader {
    transform: translateX(0);
    -webkit-transform: translateX(0);
}

#content .section.stepMaintenance .tubes .tube .switchContainer .loader {
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 140px;
    left: -20px;
    background-size: contain;
    z-index: -1;
    transition: transform ease 250ms;
    -webkit-transition: -webkit-transform ease 250ms;
    transform: translateX(32px);
    -webkit-transform: translateX(32px);
}

#content .section.stepMaintenance .tubes .tube .switchContainer.load .loader {
    transform: translateX(0);
    -webkit-transform: translateX(0);
}

#content .section .targets {
    float: left;
    width: 100%;
    width: calc(100% - 32px);
    width: -webkit-calc(100% - 32px);
    margin: 4px 0;
    margin-left: 32px;
}

#content .section .targets li {
    float: left;
    width: 172px;
    height: 21px;
}

#content .section .targets li span {
    float: left;
    padding: 6px;
    border-radius: 20px;
}

#content .section .targets li span i {
    float: left;
    width: 9px;
    height: 9px;
    border-radius: 9px;
}

#content .section .targets li a,
#content .section .targets li label {
    float: left;
    margin-left: 10px;
    color: #9da8bc;
    font-size: 14px;
}

#content .section .targets.li-auto li {
    width: auto;
}

/************* switchContainerSlider *************************/
#content .section .sectionHeadContent2 {
    margin-top: 20px;
}

#content .section .switchContainerSlider {
    margin-bottom: 0;
    float: left;
    padding-top: 4px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    display: inline;
}

#content .section .switchContainerSlider.detail {
    padding-top: 9px;
}

#content .section .switchContainerSlider .switchStatusText {
    margin: 0 auto;
    /*margin-top: 6px;*/
    text-align: center;
    color: #9da8bc;
    font-size: 14px;
    float: left;
}

#content .section .switchSlider {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    width: 40px;
    height: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #ffcd00;
    border-radius: 26px;
    background-color: #fff;
    -webkit-transition: background-color 0.3s ease-in, border-color 0.3s ease-in !important;
    transition: background-color 0.3s ease-in, border-color 0.3s ease-in !important;
    /*-moz-transform: translateY(10%);
-o-transform: translateY(10%);
-ms-transform: translateY(10%);
-webkit-transform: translateY(10%);
transform: translateY(10%);*/
}

#content .section .switchSlider span {
    float: left;
    padding: 6px;
    display: block;
    width: 10px;
    height: 10px;
    background: #ffcd00;
    position: relative;
    top: -5px;
    left: -2px;
    border-radius: 12px;
    -webkit-transition: background-color 0.3s ease-in, left 0.3s ease-in;
    transition: background-color 0.3s ease-in, left 0.3s ease-in;
}

#content .section .switchSlider.checked span {
    left: 20px;
}

/**************************************/
#content .section .targets li.s1 span {
    background-color: rgba(186, 214, 0, 0.15);
}

#content .section .targets li.s1 span i {
    background-color: #bad600;
}

#content .section .targets li.s2 span {
    background-color: rgba(255, 205, 0, 0.15);
}

#content .section .targets li.s2 span i {
    background-color: #ffcd00;
}

#content .section .targets li.s3 span {
    background-color: rgba(255, 71, 0, 0.15);
}

#content .section .targets li.s3 span i {
    background-color: #ec555e;
}

#whatShouldIDoPopup .select,
#content .section .select {
    float: right;
    margin: 0 10px;
    width: 160px;
    font-size: 16px;
    color: #b6bfce;
    height: 28px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    position: relative;
    cursor: pointer;
}

#whatShouldIDoPopup .select .selectedOption,
#whatShouldIDoPopup .select .options li #content .section .select .selectedOption,
#content .section .select .options li {
    cursor: pointer;
}

#content .section .select.time .options {
    text-align: center;
    display: none;
    position: absolute;
    width: 100%;
    max-height: 280px;
    top: 40px;
    left: 0;
    background: #fff;
    z-index: 5;
    border-radius: 4px;
    overflow: auto;
    -ms-overflow-style: none;
    border-radius: 10px;
    box-shadow: 0px 10px 32px rgba(136, 136, 136, 0.3);
}

#content .section .select.time .options li a {
    display: block;
    float: left;
    margin-left: 0px !important;
    width: 100%;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#content .filterArea .select.timeType .options li a {
    display: block;
    float: left;
    margin-left: 0px !important;
    width: 100%;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#content .filterArea .select.timeType {
    float: left;
    margin: 0 10px;
    width: 138px;
    font-size: 16px;
    text-align: center;
    color: #b6bfce;
    height: 28px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    cursor: pointer;
    cursor: pointer;
    position: relative;
}

#content .filterArea .select .options {
    display: none;
    position: absolute;
    width: 100%;
    max-height: 280px;
    top: 40px;
    left: 0;
    background: #fff;
    z-index: 5;
    border-radius: 4px;
    overflow: auto;
    -ms-overflow-style: none;
    border-radius: 10px;
    box-shadow: 0px 10px 32px rgba(136, 136, 136, 0.3);
}

#content .filterArea .select .options li {
    float: left;
    width: 100%;
    height: 34px;
}

#content .filterArea .select .options li:last-child {
    border-bottom: none;
}

#content .filterArea .select .options li:hover {
    background: #ffcd00;
    color: #ffffff;
}

#content .filterArea .select .options li.selected {
    background-color: rgba(205, 205, 205, 1);
    color: #ffffff;
    font-weight: 500;
}

#content .filterArea .select .options::-webkit-scrollbar {
    display: none;
}

#content .filterArea .select .selectedOption {
    text-align: center;
    color: #b6bfce !important;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 0;
    padding-right: 5px;
}

#content .filterArea .select::after {
    content: "";
    width: 11px;
    height: 11px;
    position: absolute;
    top: 10px;
    right: 15px;
    opacity: 0.3;
    background-size: contain;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhBxUONxE0ArT2AAAAq0lEQVRIx+3MLRKCUBSG4RcjYza4BYkWHaLBLRlcjMVKsZrcAA0DwyYsOoZjgPGPe+GcGxwDXzonPC8M+49FJEQBbsYIYM4ZoWBlwktyhJIFZAiCcGWt5imXRh2gak594sWFCjbPR5d458IWYo6GxCc/MQZLwsn1CS/XJTp5f6KXdydU3J9Qc3fCxF0JI28nzNyXMHBXwsi/EwG8Tuy4cWcfxutNmIbjYb/aA2JvzPaI51TvAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA3LTIxVDE0OjU1OjE3KzAyOjAwRgbx7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNy0yMVQxNDo1NToxNyswMjowMDdbSVMAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC);
}

#content.facilityReport .filterArea .seperatorLine {
    width: calc(100% - 490px);
    margin-left: 10px;
    float: left;
    height: 15px;
    border-bottom: 1px #ffcd00 solid;
}

#whatShouldIDoPopup .select .options,
#content .section .select .options {
    display: none;
    position: absolute;
    width: 100% !important;
    max-height: 280px;
    top: 40px;
    left: 0;
    background: #fff;
    z-index: 5;
    border-radius: 4px;
    overflow: auto;
    -ms-overflow-style: none;
    border-radius: 10px;
    box-shadow: 0px 10px 32px rgba(136, 136, 136, 0.3);
    scrollbar-width: none;
    z-index: 101;
}

#whatShouldIDoPopup .select .options li,
#content .section .select .options li {
    float: left;
    width: 100%;
    height: 34px;
}

#whatShouldIDoPopup .select .options li:last-child,
#content .section .select .options li:last-child {
    border-bottom: none;
}

#whatShouldIDoPopup .select .options li:hover,
#content .section .select .options li:hover {
    background: #ffcd00;
    color: #ffffff;
}

#whatShouldIDoPopup .select .options li a,
#content .section .select .options li a {
    display: block;
    float: left;
    margin-left: 5px;
    width: 280px;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#content .section .dashboardSectionHead .select .options li a {
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#whatShouldIDoPopup .select .options li a {
    width: 100%;
}

#whatShouldIDoPopup .select .options li.selected,
#content .section .select .options li.selected {
    background-color: rgba(205, 205, 205, 1);
    color: #ffffff;
    font-weight: 500;
}

#whatShouldIDoPopup .select .options li:hover a,
#whatShouldIDoPopup .select .options li.selected a,
#content .section .select .options li:hover a,
#content .section .select .options li.selected a {
    color: #ffffff !important;
}

#whatShouldIDoPopup .select .options::-webkit-scrollbar,
#content .section .select .options::-webkit-scrollbar {
    display: none;
}

#whatShouldIDoPopup .select .selectedOption,
#content .section .select .selectedOption {
    float: left;
    margin-left: 20px;
    text-align: center;
    color: #b6bfce;
    width: 100px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 0;
}

#content .section.dashboardReactiveRates .select .selectedOption,
#content .section.dashboardStepMaintenance .select .selectedOption,
#content .section.dashboardEnergyQuality .select .selectedOption {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
}

#content .section .select::after {
    content: "";
    width: 11px;
    height: 11px;
    position: absolute;
    top: 10px;
    right: 15px;
    opacity: 0.3;
    pointer-events: none;
    background-size: contain;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhBxUONxE0ArT2AAAAq0lEQVRIx+3MLRKCUBSG4RcjYza4BYkWHaLBLRlcjMVKsZrcAA0DwyYsOoZjgPGPe+GcGxwDXzonPC8M+49FJEQBbsYIYM4ZoWBlwktyhJIFZAiCcGWt5imXRh2gak594sWFCjbPR5d458IWYo6GxCc/MQZLwsn1CS/XJTp5f6KXdydU3J9Qc3fCxF0JI28nzNyXMHBXwsi/EwG8Tuy4cWcfxutNmIbjYb/aA2JvzPaI51TvAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA3LTIxVDE0OjU1OjE3KzAyOjAwRgbx7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNy0yMVQxNDo1NToxNyswMjowMDdbSVMAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC);
}

/*============================================================*/
/*
*	LandingPage
*/
#content .landingPageSection {
    float: left;
    width: 100%;
}

#content .landingPageSection.home {
    background-color: #fefbef;
    height: 500px;
    background-image: url(/assets/img/entes2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 1100px auto;
    background-position-x: right;
    background-position-y: bottom;
}

#content .landingPageSection .landingPageVideo {
    overflow: hidden;
    position: relative;
    float: left;
    width: 650px;
    border-radius: 5px;
    margin-top: 50px;
    box-shadow: 10px 10px 20px 0px rgba(50, 50, 50, 0.1);
    min-height: 367px;
}

#content .landingPageSection .landingPageVideo iframe {
    display: block;
    position: relative;
    z-index: 1;
}

#content .landingPageSection .landingPageVideo::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    border: 10px solid #f3f3f3;
    border-top: 10px solid #ffe375;
    border-radius: 50%;
    margin: -60px 0 0 -60px;
    padding: 50px;
    animation: loaderSpin 1s linear infinite;
    z-index: 0;
}

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

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

#content .landingPageSection .landingPageSectionRow {
    float: left;
    width: 100%;
    height: 250px;
    padding: 60px 0;
}

#content .landingPageSectionDescBox {
    float: left;
    width: 512px;
    color: #323232;
}

#content .landingPageSectionDescBox.r {
    float: right !important;
}

#content .landingPageSectionDescBox .landingPageSectionDescBoxTitle {
    float: left;
    width: 100%;
    font-size: 46px;
    font-weight: 500;
}

#content .landingPageSectionDescBox .landingPageSectionDescBoxContent {
    float: left;
    width: 100%;
    font-size: 19px;
    margin-top: 30px;
    line-height: 1.4;
    font-weight: 300;
}

#content .landingPageSectionDescBox .landingPageSectionDescBoxButton {
    float: left;
    margin-top: 30px;
    padding: 14px 30px;
    background-color: #323232;
    color: #ffffff;
    font-size: 16px;
    border-radius: 3px;
    cursor: pointer;
}

#content .contactForm .contactFormTitle {
    float: left;
    width: 100%;
    text-align: center;
    color: #393939;
    font-weight: 500;
    font-size: 36px;
    margin-top: 20px;
}

#content .contactForm .contactFormDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #393939;
    font-weight: 400;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#content .loginForDemo {
    display: table;
    margin: 0 auto;
    margin-top: 30px;
    padding: 14px 30px;
    background-color: #323232;
    color: #ffffff;
    font-size: 16px;
    border-radius: 3px;
    cursor: pointer;
}

/*============================================================*/
#content .section.dashboardSection {
    width: 98%;
    margin-left: 1%;
    min-height: 300px;
    position: relative;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-size: 100%;
}

#content .section.dashboardSection.half {
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
}

#content .section.dashboardSection.quarter {
    width: 23%;
    margin-left: 1%;
    margin-right: 1%;
}

#content .section.dashboardSection .dashboardSectionHead {
    float: left;
    position: relative;
    width: 100%;
    width: calc(100% - 32px);
    width: -webkit-calc(100% - 32px);
    padding: 10px 16px;
}

#content .section.dashboardSection .dashboardSectionHead .updateTime {
    float: left;
    width: 100%;
    color: #9da8bc;
    font-size: 12px;
}

#content .section.dashboardSection .dashboardSectionHead .updateTime b {
    font-weight: 500;
}

#content .section.dashboardSection .dashboardSectionHead .sectionHeadContent {
    float: left;
    padding: 10px 0;
    height: 24px;
    cursor: pointer;
}

#content .section.dashboardSection .dashboardSectionHead .sectionHeadContent i {
    float: left;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    margin-top: -2px;
}

#content .section.dashboardSection .dashboardSectionHead .sectionHeadContent .sectionHeadTitle {
    float: left;
    color: #b9a24c;
    font-weight: 500;
    font-size: 18px;
}

#content .section.dashboardSection .dashboardLoader {
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 100%;
    height: 100%;
    height: -webkit-calc(100% - 76px);
    height: calc(100% - 76px);
    background-size: contain;
    float: left;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.preloading {
    box-shadow: 0px 1.5px 20px 0 rgba(255, 205, 0, 0.35);
    background-image: url(/assets/img/dashboard_loader.gif);
    background-size: 350px;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 190px;
}

#content .section.preloading>*:not(.sectionHead) {
    opacity: 0;
}

#content .section.preloaded>* {
    opacity: 1;
    transition: opacity 0.3s linear;
}

#content .section.dashboardSection .dashboardSectionHead .buttons .button {
    float: left;
    margin: 0 10px;
    width: 120px;
    text-align: center;
    font-size: 16px;
    color: #b6bfce;
    padding: 8px 8px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    cursor: pointer;
    background-color: #ffffff;
}

#content .section.dashboardSection .dashboardSectionHead .buttons .button.disable {
    opacity: 0.3;
}

#content .section.dashboardSection .select .loader {
    opacity: 0;
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    left: -36px;
    background-size: contain;
    z-index: 0;
    transition: transform ease 250ms;
    -webkit-transition: -webkit-transform ease 250ms;
    transform: translateX(40px);
    -webkit-transform: translateX(40px);
}

#content .section.dashboardSection .select.load .loader {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
}

#content .section.dashboardSection .noCompanyError {
    float: left;
    width: 100%;
    height: 100%;
    height: -webkit-calc(100% - 76px);
    height: calc(100% - 76px);
    background-size: contain;
    background-color: #f6f6f6;
}

#content .section.dashboardSection .noCompanyError .errorContent {
    display: table;
    padding-bottom: 10px;
}

#content .section.dashboardSection .noCompanyError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.dashboardSection .noCompanyError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.dashboardSection .noCompanyError .errorContent .errorTitle {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 21px;
    line-height: 1.8;
}

#content .section.dashboardSection .noCompanyError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.dashboardSection .noDeviceError {
    float: left;
    width: 100%;
    height: 100%;
    height: -webkit-calc(100% - 76px);
    height: calc(100% - 76px);
    background-size: contain;
    background-color: #f6f6f6;
}

#content .section.dashboardSection .noDeviceError .errorContent {
    display: table;
    width: 350px;
    padding-bottom: 10px;
}

#content .section.dashboardSection .noDeviceError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.dashboardSection .noDeviceError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.dashboardSection .noDeviceError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 21px;
    line-height: 1.8;
    text-align: center;
}

#content .section.dashboardSection .noDeviceError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

/* dashboard Maps */
#content .section.dashboardMaps {
    height: 383px !important;
    overflow: hidden;
}

/* dashboardConsumptionSummary */
#content .section.dashboardConsumptionSummary {
    position: relative;
    height: 383px;
}

#content .section.dashboardConsumptionSummary .select {
    width: 100px !important;
    float: left;
}

#content .section.dashboardConsumptionSummary .select .selectedOption {
    margin-left: 0;
}

#content .section.dashboardConsumptionSummary .targets {
    position: absolute;
    right: 45px;
    top: 70px;
    z-index: 9;
    display: inline-block;
    width: auto;
}

/* #content .section.dashboardConsumptionSummary svg {
margin: 12px 0;
margin-top: 24px;
} */
#content .section.dashboardConsumptionSummary .instantDataTable::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
}

#content .section.dashboardConsumptionSummary .instantDataTable::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #adadad;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

#content .section.dashboardConsumptionSummary .instantDataTable::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #dddddd;
}

#content .section.dashboardConsumptionSummary .dravArea {
    fill: #fff;
}

#content .section.dashboardConsumptionSummary .rowRect {
    fill: rgba(0, 0, 0, 0);
}

#content .section.dashboardConsumptionSummary .rowText {
    fill: #b6bfce;
    font-family: "roboto";
    font-size: 11px;
    font-weight: 500;
}

#content .section.dashboardConsumptionSummary .rowLine {
    fill: none;
    stroke: #e5f3f7;
    stroke-miterlimit: 10;
}

#content .section.dashboardConsumptionSummary .col {}

#content .section.dashboardConsumptionSummary .col rect {
    fill: rgba(0, 0, 0, 0);
}

#content .section.dashboardConsumptionSummary .col .colLine {
    fill: none;
    stroke: #e5f3f7;
    stroke-miterlimit: 10;
}

#content .section.dashboardConsumptionSummary .col .colText {
    fill: #b6bfce;
    font-family: "roboto";
    font-size: 13px;
    font-weight: 500;
}

#content.overlay {
    position: relative;
}

#content.overlay::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    background-color: rgba(0, 0, 0, 0.5);
}

#content.overlay.active::before {
    opacity: 1;
    visibility: visible;
}

#content .userEditPanel {
    position: fixed;
    right: -50%;
    top: 67px;
    z-index: 999;
    background-color: #fff;
    box-shadow: -5px 0 15px 0px rgba(0, 0, 0, 0.1);
    width: 450px;
    height: 100%;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}

#content .tableContainer {
    overflow-y: auto;
    height: 100%;
}

#content .userEditPanel .general-table {
    padding-bottom: 140px;
}

#content .userEditPanel .general-table .actionButtons {
    padding-top: 30px;
    background-color: transparent !important;
    text-align: right !important;
}

#content .userEditPanel .general-table .yellowBorder {
    border: 1px solid #ffcd00;
}

#content .userEditPanel.show {
    opacity: 1;
    visibility: visible;
    right: 0;
}

#content .userEditPanel .panelHeader {
    border-bottom: 1px solid #ffcd00;
    padding: 5px 0;
    font-size: 18px;
    font-weight: 500;
    color: #727272;
    text-align: right;
    position: relative;
}

#content .userEditPanel .panelHeader .closePanel {
    display: block;
    position: absolute;
    left: 0;
    top: -15px;
    font-size: 40px;
    font-weight: 400;
    cursor: pointer;
}

#content .userEditPanel .general-table {
    border-spacing: 3px;
}

#content .userEditPanel .general-table thead th:first-child {
    background-color: #f2f2f2;
}

#content .userEditPanel .general-table thead th span.date {
    border: 1px solid #d0d0d0;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #f8f8f8;
    display: block;
    padding: 5px;
    display: block;
    position: relative;
}

#content .userEditPanel .general-table thead th span.next,
#content .userEditPanel .general-table thead th span.prev {
    position: absolute;
    top: 16px;
    width: 15px;
    height: 15px;
    font-size: 15px;
    pointer-events: all;
    cursor: pointer;
    display: none;
}

#content .userEditPanel .general-table thead th span.prev {
    left: -6px;
}

#content .userEditPanel .general-table thead th span.next {
    right: -6px;
}

#content .userEditPanel .general-table td input {
    border: 1px solid #d0d0d0;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 100px;
    outline: none;
    padding: 5px;
    background-color: #f8f8f8;
    text-align: center;
    font-size: 15px;
    color: #9da8bc;
    letter-spacing: -1px;
}

#content .userEditPanel .general-table td.yellow input {
    border-color: #d0d0d0;
}

#content .userEditPanel .general-table td:first-child {
    background-color: #eaf4f7;
    font-weight: 500;
    text-align: center;
}

/************* upLoader ********************/

.maps .upLoader,
#content .userEditPanel .upLoader {
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
}

.maps .upLoader.show,
#content .userEditPanel .upLoader.show {
    opacity: 1;
    visibility: visible;
}

.maps .upLoader .spinner,
#content .userEditPanel .upLoader .spinner {
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 50px;
    height: 50px;
    background-size: contain;
    z-index: 11;
}

.maps .upLoader {
    min-height: calc(100vh - 184px);
    top: 52px;
    background: #fff;
}

.maps .upLoader .spinner {
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 200px;
    height: 150px;
    background-size: cover;
}

/************* end upLoader ********************/

/* dashboardEnergyQuality */
.graphic {
    min-height: 180px !important;
}

.lastSevenDays {
    color: #9da8bc;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

#content .section.predictiveMaintenance .noCompanyError {
    color: #9da8bc;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

#content .section.dashboardPredictiveMaintenance,
#content .section.dashboardEnergyQuality {
    height: 640px;
}

#content .section.predictiveMaintenance {
    min-height: 600px !important;
}

#content .section.dashboardPredictiveMaintenance .sectionError,
#content .section.dashboardPredictiveMaintenance .noCompanyError,
#content .section.dashboardPredictiveMaintenance .noDeviceError {
    float: left;
    width: 100%;
    height: 564px;
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/predictive-maintenance-dashboard.PNG) no-repeat;
    background-size: 100%;
}

#content .section.dashboardEnergyQuality .sectionError,
#content .section.dashboardEnergyQuality .energyQuality.noCompanyError {
    float: left;
    width: 100%;
    height: 565px;
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/energyQualityReportBlurBackground.jpg) no-repeat;
    background-size: 100%;
}

#content .section.dashboardPredictiveMaintenance .sectionError .errorContent,
#content .section.dashboardEnergyQuality .sectionError .errorContent {
    display: table;
    padding-bottom: 10px;
}

#content .section.dashboardPredictiveMaintenance .sectionError .errorContent .errorIcon,
#content .section.dashboardEnergyQuality .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.dashboardPredictiveMaintenance .sectionError .errorContent .errorIcon i,
#content .section.dashboardEnergyQuality .sectionError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.dashboardPredictiveMaintenance .sectionError .errorContent .errorTitle,
#content .section.dashboardEnergyQuality .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 21px;
    line-height: 1.8;
    text-align: center;
}

#content .section.dashboardPredictiveMaintenance .sectionError .errorContent .errorDesc,
#content .section.dashboardEnergyQuality .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.dashboardPredictiveMaintenance .graphic {
    float: left;
    width: -webkit-calc(100% - 45px);
    margin-left: 45px;
    margin-top: 30px;
}

#content .section.dashboardPredictiveMaintenance .indicators {
    float: left;
    width: -webkit-calc(100% - 78px);
    margin-left: 78px;
    margin-top: 32px;
}

#content .section.dashboardEnergyQuality .indicators {
    float: left;
    width: 100%;
    margin-top: 32px;
}

#content .section.dashboardPredictiveMaintenance .indicators .icon {
    float: left;
    height: 208px;
    position: relative;
    min-width: 182px;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator {
    float: left;
    width: 273px;
    height: 208px;
}

#content .section.dashboardEnergyQuality .indicators .indicator {
    float: left;
    width: 200px;
    height: 240px;
    margin: 0 41px;
    position: relative;
    padding-bottom: 10px;
}

#content .section.dashboardPredictiveMaintenance .indicators .icon img {
    height: 120px;
    margin-top: 30px;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .indicatorContent {
    overflow: hidden;
    height: 156px;
}

#content .section.dashboardEnergyQuality .indicators .indicator .indicatorContent {
    overflow: hidden;
    height: 130px;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .indicatorName,
#content .section.dashboardEnergyQuality .indicators .indicator .indicatorName {
    color: #9da8bc;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 5px 0;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .indicatorValue {
    color: #9da8bc;
    float: left;
    width: 36%;
    text-align: center;
    font-size: 16px;
    padding: 7px 0;
    font-weight: bold;
    border: 2px solid #ffcd00;
    border-radius: 25px;
    margin-top: 0px;
    margin-left: 30%;
}

#content .section.dashboardEnergyQuality .indicators .indicator .indicatorValue {
    color: #9da8bc;
    float: left;
    width: 36%;
    text-align: center;
    font-size: 16px;
    padding: 5px 0;
    font-weight: bold;
    border: 2px solid #ffcd00;
    border-radius: 25px;
    margin-top: -14px;
    margin-left: 30%;
}

#content .section.dashboardPredictiveMaintenance .howToDoWrapper {
    float: left;
    width: 100%;
}

#content .section.dashboardPredictiveMaintenance .indicators .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px -30px;
}

#content .section.dashboardEnergyQuality .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px 0;
}

#content .section.dashboardPredictiveMaintenance .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.dashboardEnergyQuality .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.dashboardPredictiveMaintenance .howToDo span,
#content .section.dashboardEnergyQuality .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.dashboardPredictiveMaintenance .howToDo span i,
#content .section.dashboardEnergyQuality .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.dashboardPredictiveMaintenance .howToDo .text,
#content .section.dashboardEnergyQuality .howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .howToDoWrapper.type-1 .howToDo,
#content .section.dashboardEnergyQuality .indicators .indicator .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .howToDoWrapper.type-1 .howToDo span,
#content .section.dashboardEnergyQuality .indicators .indicator .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .howToDoWrapper.type-2 .howToDo,
#content .section.dashboardEnergyQuality .indicators .indicator .howToDoWrapper.type-2 .howToDo {
    background-color: #ffcd00 !important;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .howToDoWrapper.type-2 .howToDo span,
#content .section.dashboardEnergyQuality .indicators .indicator .howToDoWrapper.type-2 .howToDo span {
    background-color: #ffcd00 !important;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .howToDoWrapper.type-2 .howToDo .text,
#content .section.dashboardEnergyQuality .indicators .indicator .howToDoWrapper.type-2 .howToDo .text {
    color: #616161 !important;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .howToDoWrapper.type-3 .howToDo,
#content .section.dashboardEnergyQuality .indicators .indicator .howToDoWrapper.type-3 .howToDo {
    background-color: #999999 !important;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .howToDoWrapper.type-3 .howToDo span,
#content .section.dashboardEnergyQuality .indicators .indicator .howToDoWrapper.type-3 .howToDo span {
    background-color: #999999 !important;
}

#content .section.dashboardPredictiveMaintenance .indicators .indicator .indicatorDesc,
#content .section.dashboardEnergyQuality .indicators .indicator .indicatorDesc {
    color: #9da8bc;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 5px 0;
}

#content .section.dashboardPredictiveMaintenance .indicatorError,
#content .section.dashboardEnergyQuality .indicatorError {
    float: left;
    width: 100%;
}

#content .section.dashboardPredictiveMaintenance .indicatorError .errorContent,
#content .section.dashboardEnergyQuality .indicatorError .errorContent {
    display: table;
    width: 200px;
    margin-top: 24px;
    padding-bottom: 10px;
}

#content .section.dashboardPredictiveMaintenance .indicatorError .errorContent .errorIcon,
#content .section.dashboardEnergyQuality .indicatorError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.dashboardPredictiveMaintenance .indicatorError .errorContent .errorIcon i,
#content .section.dashboardEnergyQuality .indicatorError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.dashboardPredictiveMaintenance .indicatorError .errorContent .errorTitle,
#content .section.dashboardEnergyQuality .indicatorError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 21px;
    line-height: 1.8;
    text-align: center;
}

#content .section.dashboardPredictiveMaintenance .indicatorError .errorContent .errorDesc,
#content .section.dashboardEnergyQuality .indicatorError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.dashboardEnergyQuality svg {
    width: 200px !important;
}

/* Step Maintenance */
#content .section.dashboardStepMaintenance {
    height: 432px;
}

#content .section.dashboardStepMaintenance .targets {
    width: 320px !important;
}

#content .section.dashboardStepMaintenance .targets li {
    width: 100px !important;
}

#content .section.dashboardStepMaintenance .total {
    float: right;
    height: 29px;
    margin-right: 12px;
}

#content .section.dashboardStepMaintenance .total i {
    float: left;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
}

#content .section.dashboardStepMaintenance .total a {
    float: left;
    color: #9da8bc;
    margin-left: 8px;
    font-size: 14px;
}

#content .section.dashboardStepMaintenance .tubesWrapper {
    float: left;
    width: 100%;
    margin-top: 12px;
}

#content .section.dashboardStepMaintenance .tubes {
    margin: 0 auto;
    display: table;
}

#content .section.dashboardStepMaintenance .tubes .tube {
    float: left;
    width: 150px;
    height: 284px;
    margin-right: 12px;
    position: relative;
}

#content .section.dashboardStepMaintenance .tubes .tube:last-child {
    margin-right: 0;
}

#content .section.dashboardStepMaintenance .tubes .tube::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    width: 1px;
    height: 120px;
    background-color: #e5e9f2;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

#content .section.dashboardStepMaintenance .tubes .tube:last-child:after {
    content: "";
    display: none;
}

#content .section.dashboardStepMaintenance .tubes .tube .tubeInner {
    float: left;
    width: 100%;
    height: 100%;
}

#content .section.dashboardStepMaintenance .tubes .tube .tubeInner .tubeContent {
    margin: 0 auto;
    width: 80px;
}

#content .section.dashboardStepMaintenance .tubes .tube .tubeInner .tubeContent svg {
    width: 80px !important;
    height: 237.14px !important;
}

#content .section.dashboardStepMaintenance .tubes .tube .tubeDetail {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.15);
    width: 96px;
    height: 128px;
    top: 86px;
    left: 27px;
    border-radius: 10px;
}

#content .section.dashboardStepMaintenance .tubes .tube .tubeDetail .tubeCount {
    text-align: center;
    margin: 8px 0;
    margin-top: 13px;
    color: #fff;
    font-size: 50px;
}

#content .section.dashboardStepMaintenance .tubes .tube .tubeDetail .text {
    text-align: center;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

#content .section.dashboardStepMaintenance .sectionError,
#content .section.dashboardStepMaintenance .stepMaintenance.noCompanyError {
    float: left;
    width: 100%;
    height: 356px;
    background: url(/assets/img/stepMaintenanceDashboardBlur.jpg) 0px 0px no-repeat;
    background-size: 100%;
}

#content .section.dashboardStepMaintenance .sectionError .errorContent {
    display: table;
    width: 250px;
    padding-bottom: 10px;
}

#content .section.dashboardStepMaintenance .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.dashboardStepMaintenance .sectionError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.dashboardStepMaintenance .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 21px;
    line-height: 1.8;
    text-align: center;
}

#content .section.dashboardStepMaintenance .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.dashboardStepMaintenance .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.dashboardStepMaintenance .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.dashboardStepMaintenance .howToDoWrapper.type-2 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.dashboardStepMaintenance .howToDoWrapper.type-2 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.dashboardStepMaintenance .howToDoWrapper.type-2 .howToDo .text {
    color: #fefbfb !important;
}

#content .section.dashboardStepMaintenance .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 28px 0;
}

#content .section.dashboardStepMaintenance .sectionError .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px 0;
}

#content .section.dashboardStepMaintenance .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.dashboardStepMaintenance .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.dashboardStepMaintenance .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.dashboardStepMaintenance .howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

/* Step Planning */
#content .section.dashboardStepPlanning {
    height: 573px;
    overflow: hidden;
}

#content .section.dashboardStepPlanning .tableWrapper {
    float: left;
    width: 98%;
    padding-bottom: 28px;
    height: 465px;
    overflow: auto;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.5);
}

#content .section.dashboardStepPlanning .tableWrapper::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
}

#content .section.dashboardStepPlanning .tableWrapper::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #adadad;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

#content .section.dashboardStepPlanning .tableWrapper::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #dddddd;
}

#content .section.dashboardStepPlanning .tableWrapper .table {
    width: 500px;
    margin: 0 auto;
    position: relative;
}

#content .section.dashboardStepPlanning .tableWrapper .table .absoluteLayer {
    position: absolute;
    top: -4px;
    right: 23px;
    width: 140px;
    height: 1046px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0 0 18px 0 rgba(255, 205, 0, 0.23);
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableHead {
    float: left;
    width: 100%;
    height: 36px;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableHead .col {
    float: left;
    text-align: center;
    color: #666666;
    font-size: 14px;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableHead .col:nth-child(1) {
    width: 50px;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableHead .col:nth-child(2) {
    width: 284px;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableHead .col:nth-child(3) {
    position: absolute;
    top: -1px;
    right: 24px;
    z-index: 4;
    height: 36px;
    width: 139px;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableHead .col:nth-child(3) a {
    display: block;
    float: left;
    width: 100%;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow {
    float: left;
    width: 100%;
    height: 36px;
    border-radius: 5px;
    margin-bottom: 12px;
    position: relative;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .col {
    float: left;
    height: 100%;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .col .col-container {
    margin: 0 auto;
    height: 100%;
    display: table;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .col .col-container .rowIconInner {
    margin-top: 9px;
    float: left;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .col .col-container .rowIconInner i {
    float: left;
    display: block;
    width: 22px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .col .col-container .rowIconInner a {
    margin-left: 3px;
    margin-top: 0;
    position: relative;
    top: 3px;
    float: left;
    text-align: center;
    font-size: 12px;
    color: #646467 !important;
    font-weight: 500;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .col .col-container a {
    margin-top: 11px;
    margin-left: 16px;
    float: left;
    display: block;
    text-align: center;
    color: #616161;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .col:nth-child(1) {
    width: 50px;
    background-color: #dddddd;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .check {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: 7px;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .col:nth-child(2) {
    width: 284px;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .col:nth-child(1) a {
    display: block;
    text-align: center;
    color: #7f7f7f;
    font-size: 14px;
    font-weight: 500;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow .col:nth-child(3) {
    position: absolute;
    top: -1px;
    right: 24px;
    z-index: 4;
    height: 100%;
    width: 139px;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow.s1 {
    border: 1px solid #bad600;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow.s1 .col:nth-child(3) {
    border: 1px dashed rgba(186, 214, 0, 0.5);
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow.s2 {
    border: 1px solid #ff0000;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow.s2 .col:nth-child(3) {
    border: 1px dashed rgba(255, 0, 0, 0.5);
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow.s2 .col:nth-child(2) a {
    color: #ec555e;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow.s3 {
    border: 1px solid #616161;
    z-index: 10;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow.s3 .col:nth-child(3) {
    border: 1px dashed #616161;
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow.s4 {
    border: 1px solid rgba(254, 132, 0, 0.7);
}

#content .section.dashboardStepPlanning .tableWrapper .table .tableRow.s4 .col:nth-child(3) {
    border: 1px dashed rgba(254, 132, 0, 0.5);
}

#content .section.dashboardStepPlanning .tableWrapper .table .emptyRow {
    float: left;
    width: 449px;
    height: 36px;
    background-size: 105% 116%;
    position: absolute;
    left: 50px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-position: -3px -3px;
}

#content .section.dashboardStepPlanning .tableWrapper .table .emptyRow a {
    float: left;
    display: block;
    width: 100%;
    text-align: center;
    color: #96aaa5;
    font-size: 16px;
    font-weight: 500;
}

#content .section.dashboardStepPlanning .sectionError {
    float: left;
    width: 100%;
    height: 497px;
    background-size: contain;
    background-color: #f6f6f6;
}

#content .section.dashboardStepPlanning .sectionError .errorContent {
    display: table;
    width: 250px;
    padding-bottom: 10px;
}

#content .section.dashboardStepPlanning .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.dashboardStepPlanning .sectionError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.dashboardStepPlanning .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 21px;
    line-height: 1.8;
    text-align: center;
}

#content .section.dashboardStepPlanning .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.dashboardStepPlanning .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.dashboardStepPlanning .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.dashboardStepPlanning .howToDoWrapper.type-2 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.dashboardStepPlanning .howToDoWrapper.type-2 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.dashboardStepPlanning .howToDoWrapper.type-2 .howToDo .text {
    color: #616161 !important;
}

#content .section.dashboardStepPlanning .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px 0;
}

#content .section.dashboardStepPlanning .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.dashboardStepPlanning .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.dashboardStepPlanning .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.dashboardStepPlanning .howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

/* Action List */
#content .section.dashboardActionList {
    min-height: initial;
}

#content .section.dashboardActionList .tableWrapper {
    float: left;
    width: 100%;
}

#content .section.dashboardActionList .dashboardLoader {
    height: 222px !important;
}

#content .section.dashboardActionList .tableWrapper .table {
    display: table;
    width: 98%;
    margin: 0 auto;
    position: relative;
}

#content .section.dashboardActionList .tableWrapper .table .tableHead {
    float: left;
    width: 100%;
    height: 36px;
}

#content .section.dashboardActionList .tableWrapper .table .tableHead .col {
    float: left;
    text-align: center;
    color: #6d6d6d;
    font-size: 14px;
    font-weight: 500;
}

#content .section.dashboardActionList .tableWrapper .table .tableHead .col:nth-child(1) {
    width: 50px;
    height: 100%;
}

#content .section.dashboardActionList .tableWrapper .table .tableHead .col:nth-child(2) {
    width: 600px;
}

#content .section.dashboardActionList .tableWrapper .table .tableHead .col:nth-child(3) {
    width: 180px;
}

#content .section.dashboardActionList .tableContent {
    float: left;
    width: 100%;
    max-height: 280px;
    overflow: auto;
    margin-bottom: 20px;
    overflow-x: hidden;
}

#content .section.dashboardActionList .tableContent::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
}

#content .section.dashboardActionList .tableContent::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #adadad;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

#content .section.dashboardActionList .tableContent::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #dddddd;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow {
    float: left;
    width: 100%;
    width: calc(100% - 10px);
    width: -webkit-calc(100% - 10px);
    height: 42px;
    border: 1px solid #ffcd00;
    border-radius: 5px;
    margin-bottom: 12px;
    position: relative;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .col {
    float: left;
    height: 100%;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .description {
    overflow-y: auto;
    max-width: 576px;
    max-height: 36px;
    padding: 3px;
}

#content .section.dashboardActionList .description::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
    height: 4px;
}

#content .section.dashboardActionList .description::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #adadad;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

#content .section.dashboardActionList .description::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #dddddd;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .col:nth-child(1) {
    width: 50px;
    background-color: #f5f5f5;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .col:nth-child(1) i {
    width: 24px;
    height: 24px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
    margin-top: 10px;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .col:nth-child(2) {
    width: 576px;
    margin-left: 24px;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .col:nth-child(2) a {
    float: left;
    display: block;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow.s0 .col:nth-child(2) a {
    color: #cb454a;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow.s1 .col:nth-child(2) a {
    color: rgba(254, 132, 0, 0.7);
}

#content .section.dashboardActionList .tableWrapper .table .tableRow.s2 .col:nth-child(2) a {
    color: #899d00;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .col:nth-child(3) {
    width: 180px;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .col:nth-child(3) a {
    float: left;
    width: 100%;
    display: block;
    text-align: center;
    color: #616161;
    font-size: 14px;
    font-weight: 500;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .button {
    float: right;
    width: 144px;
    background-color: #ffcd00;
    height: 32px;
    border-radius: 5px;
    margin-right: 6px;
    cursor: pointer;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .button a {
    display: table;
    color: #616161;
    font-size: 13px;
    font-weight: 500;
}

#content .section.dashboardActionList .tableWrapper .table .tableRow .snooze {
    float: left;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 50px;
    cursor: pointer;
}

#content .section.dashboardActionList .empty {
    position: relative;
    left: 50%;
    color: #989898;
    font-weight: 500;
    font-size: 17px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 32px 0;
    float: left;
    top: -30px;
}

#content .section.dashboardActionList .actionbtn a {
    color: #fff !important;
}

#content .section.dashboardReactiveRates {
    height: 431px;
}

#content .section.dashboardReactiveRates svg {
    overflow: visible !important;
}

#content .section.dashboardReactiveRates .indicators {
    float: left;
    width: 100%;
    margin-top: 32px;
}

#content .section.dashboardReactiveRates .indicators .indicator {
    float: left;
    width: 226px;
    height: 280px;
    margin: 0 28px;
    position: relative;
    padding-bottom: 10px;
}

#content .section.dashboardReactiveRates .indicators .indicator .indicatorContent {
    float: left;
    width: 100%;
    display: table;
    transition: opacity 400ms ease;
    -webkit-transition: opacity 400ms ease;
}

#content .section.dashboardReactiveRates .indicators .indicator .indicatorName {
    float: left;
    text-align: center;
    width: 100%;
    color: #9da8bc;
    font-weight: 500;
    font-size: 13px;
    margin: 0;
    margin-bottom: 10px;
}

#content .section.dashboardReactiveRates .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px 0;
}

#content .section.dashboardReactiveRates .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.dashboardReactiveRates .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.dashboardReactiveRates .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.dashboardReactiveRates .howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

#content .section.dashboardReactiveRates .sectionError,
#content .section.dashboardReactiveRates .reactiveRates.noCompanyError {
    float: left;
    width: 100%;
    height: 356px;
    background-image: url(/assets/img/reactiveRatesBlurBackground.jpg);
}

#content .section.dashboardReactiveRates .sectionError .errorContent {
    display: table;
    padding-bottom: 10px;
}

#content .section.dashboardReactiveRates .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.dashboardReactiveRates .sectionError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.dashboardReactiveRates .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 21px;
    line-height: 1.8;
    text-align: center;
}

#content .section.dashboardReactiveRates .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.dashboardReactiveRates .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.dashboardReactiveRates .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.dashboardReactiveRates .howToDoWrapper.type-2 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.dashboardReactiveRates .howToDoWrapper.type-2 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.dashboardReactiveRates .howToDoWrapper.type-2 .howToDo .text {
    color: #616161 !important;
}

#content .section.dashboardReactiveRates .switchContainerSlider {
    margin-bottom: 0;
    float: left;
    padding-top: 4px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    position: absolute;
    top: 90px;
    right: 10px;
}

#content .section.dashboardReactiveRates .switchSlider {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    width: 40px;
    height: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #ffcd00;
    border-radius: 26px;
    background-color: #fff;
    -webkit-transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
    transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
}

#content .section.dashboardReactiveRates .switchContainerSlider.detail {
    padding-top: 9px;
}

#content .section.dashboardReactiveRates .switchContainerSlider .switchStatusText {
    margin: 0 auto;
    text-align: center;
    color: #9da8bc;
    font-size: 14px;
    float: left;
}

#content .section.dashboardReactiveRates .switchSlider span {
    float: left;
    padding: 6px;
    display: block;
    width: 10px;
    height: 10px;
    background: #ffcd00;
    position: relative;
    left: -2px;
    border-radius: 12px;
    -webkit-transition: background-color 0.3s ease-in, left 0.3s ease-in;
    transition: background-color 0.3s ease-in, left 0.3s ease-in;
}

#content .section.dashboardReactiveRates .switchSlider.checked span {
    left: 20px;
}

/*============================================================*/
#content .section.stepMaintenance .tubes {
    float: left;
    width: 100%;
    margin-top: 32px;
}

#content .section.stepMaintenance .tubes .tube {
    float: left;
    width: 42px;
    height: 128px;
    margin: 0 28px;
    margin-bottom: 34px;
    position: relative;
    -webkit-transition: height ease 750ms;
    transition: height ease 750ms;
}

#content .section.stepMaintenance .tubes .tube.size2 {
    height: 178px;
}

#content .section.stepMaintenance .tubes .tube .tubeId {
    position: absolute;
    top: 26px;
    left: -19px;
    background-color: #eeeeee;
    border-radius: 3px;
    line-height: 1;
    width: 20px;
    height: 20px;
    z-index: 4;
}

#content .section.stepMaintenance .tubes .tube .tubeId a {
    float: left;
    display: block;
    color: #616161;
    font-size: 13px;
}

#content .section.stepMaintenance .tubes .tube .tubeIcon {
    position: absolute;
    top: 36px;
    left: 0;
    width: 100%;
}

#content .section.stepMaintenance .tubes .tube .tubeIconInner {
    margin: 0 auto;
    display: table;
}

#content .section.stepMaintenance .tubes .tube .tubeIcon i {
    float: left;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.stepMaintenance .tubes .tube .tubeIcon a {
    margin-left: 3px;
    position: relative;
    top: 1px;
    float: left;
    text-align: center;
    font-size: 12px;
    color: #646467;
    font-weight: 500;
}

#content .section.stepMaintenance .tubes .tube .tubeDetail {
    position: absolute;
    top: 60px;
    left: -6px;
    width: 54px;
    height: 38px;
    background: rgba(0, 0, 0, 0.29);
    border-radius: 10px;
}

#content .section.stepMaintenance .tubes .tube .tubeDetail .tubeDetailKey {
    float: left;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 11px;
}

#content .section.stepMaintenance .tubes .tube .tubeDetail .tubeDetailVal {
    float: left;
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    margin-top: 3px;
}

#content .section.stepMaintenance .tubes .tube .tubeDetail .tubeDetailInner {
    float: left;
    width: 100%;
    display: table;
}

#content .section.stepMaintenance .tubes .tube .tubeContent {
    width: 50px;
    margin: 0 auto;
}

#content .section.stepMaintenance .tubes .tube .switchContainer {
    margin: 14px auto;
    margin-bottom: 0;
}

#content .section.stepMaintenance .tubes .tube .switchContainer.disable {
    opacity: 0.3;
}

#content .section.stepMaintenance .tubes .tube .switchContainer .switchStatusText {
    margin: 0 auto;
    margin-top: 6px;
    text-align: center;
    color: #7d7d7d;
    font-size: 13px;
}

#content .section.stepMaintenance .tubes .tube .switch {
    margin: 0 auto;
    cursor: pointer;
    width: 32px;
    height: 16px;
    border-width: 1px;
    border-style: solid;
    border-color: #868686;
    border-radius: 26px;
    background-color: #fff;
    -webkit-transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
    transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
}

#content .section.stepMaintenance .tubes .tube .switch span {
    float: left;
    display: block;
    width: 12px;
    height: 12px;
    background: #868686;
    position: relative;
    top: 2px;
    left: 2px;
    border-radius: 12px;
    -webkit-transition: background-color 0.3s ease-in, left 0.3s ease-in;
    transition: background-color 0.3s ease-in, left 0.3s ease-in;
}

#content .section.stepMaintenance .tubes .tube .switch.checked {
    background-color: #bad600;
    border-color: #bad600;
}

#content .section.stepMaintenance .tubes .tube .switch.checked span {
    background-color: #ffffff;
    left: 18px;
}

#content .section.stepMaintenance .tubeError {
    float: left;
    width: 98px;
    height: 128px;
    position: absolute;
    top: 0;
    left: -28px;
    background: rgba(255, 255, 255, 0.85);
}

#content .section.stepMaintenance .tubeError .errorContent {
    display: table;
    width: 100%;
    margin-top: 24px;
    height: 158px;
    padding-bottom: 10px;
}

#content .section.stepMaintenance .tubeError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.stepMaintenance .tubeError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.stepMaintenance .tubeError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #3f3f3f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.stepMaintenance .sectionError {
    float: left;
    width: 100%;
    height: 258px;
    margin-top: 32px;
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/step-maintenance.png) 0px 10px no-repeat;
}

#content .section .stepMaintenance.noCompanyError {
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/step-maintenance-auth.png) 0px 10px no-repeat;
    background-size: 100%;
}

#content .section.stepMaintenance .sectionError .errorContent {
    display: table;
    max-width: 1000px;
    padding-bottom: 10px;
}

#content .section.stepMaintenance .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.stepMaintenance .sectionError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.stepMaintenance .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}

#content .section.stepMaintenance .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.stepMaintenance .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.stepMaintenance .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.stepMaintenance .howToDoWrapper.type-2 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.stepMaintenance .howToDoWrapper.type-2 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.stepMaintenance .howToDoWrapper.type-2 .howToDo .text {
    color: #616161 !important;
}

#content .section.stepMaintenance .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px 0;
}

#content .section.stepMaintenance .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.stepMaintenance .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.stepMaintenance .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

#content .section.stepMaintenance .sectionTitle,
#content .section.energyQuality .sectionTitle {
    overflow: hidden;
    white-space: nowrap;
    max-width: 1115px;
    text-overflow: ellipsis;
}

#content .section.reactiveRates .sectionTitle {
    overflow: hidden;
    white-space: nowrap;
    max-width: 520px;
    text-overflow: ellipsis;
}

#content .section.energyQuality .sectionError {
    float: left;
    width: 100%;
    height: 258px;
    margin-top: 32px;
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/energyQualityBlurBackground.png);
    background-size: 100%;
}

#content .section.energyQuality .sectionError .errorContent {
    display: table;
    max-width: 1000px;
    padding-bottom: 45px;
}

#content .section.energyQuality .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.energyQuality .sectionError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.energyQuality .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}

#content .section.energyQuality .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #3f3f3f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.energyQuality .indicators {
    float: left;
    width: 100%;
    margin-top: 32px;
}

#content .section.energyQuality .indicators .indicator {
    float: left;
    width: 220px;
    margin: 0 37px;
    position: relative;
    padding-bottom: 10px;
}

#content .section .predictiveMaintenance.noCompanyError {
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/predictive-maintenance.PNG);
    background-size: 100%;
    height: 620px;
}

#content .section.dashboardSection.dashboardPredictiveMaintenance .noCompanyError {
    float: left;
    width: 100%;
    height: 497px;
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/predictive-maintenance-dashboard.PNG);
    background-size: 100%;
}

#content .section.predictiveMaintenance .graphic {
    display: inline-block;
    width: -webkit-calc(100% - 56px);
    margin-left: 56px;
}

#content .section.predictiveMaintenance .sectionHead .sectionTexts .sectionTitle {
    cursor: auto;
}

#content .section.predictiveMaintenance .graphic .apexcharts-canvas {
    margin-top: 10px;
}

#content .section.predictiveMaintenance .tabs {
    width: -webkit-calc(100% - 86px);
    margin-left: 189px;
}

#content .section.predictiveMaintenance .tabs .parameterSetTab {
    color: #9da8bc;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    float: left;
    margin-right: 15px;
    padding-bottom: 5px;
}

#content .section.predictiveMaintenance .tabs .parameterSetTab input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
}

#content .section.predictiveMaintenance .tabs .parameterSetTab.active {
    color: #ffcd00;
    border-bottom: 2px solid #ffcd00;
}

#content .section.energyQuality .indicators .indicator .indicatorContent,
#content .section.predictiveMaintenance .indicators .indicator .indicatorContent {
    overflow: hidden;
    height: 120px;
}

#content .section.energyQuality .indicators .indicator .indicatorName,
#content .section.predictiveMaintenance .indicators .indicator .indicatorName {
    color: #9da8bc;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 5px 0;
}

#content .section.energyQuality .indicators .indicator .indicatorValue {
    color: #9da8bc;
    float: left;
    width: 35%;
    text-align: center;
    font-size: 16px;
    padding: 6px 0;
    font-weight: bold;
    border: 2px solid #ffcd00;
    border-radius: 25px;
    margin-top: 7px;
    margin-left: 30%;
}

#content .section.predictiveMaintenance .indicators .indicator .indicatorValue {
    color: #9da8bc;
    float: left;
    width: 35%;
    text-align: center;
    font-size: 17px;
    padding: 7px 0;
    font-weight: bold;
    border: 2px solid #ffcd00;
    border-radius: 25px;
    margin-top: 0px;
    margin-left: 30%;
}

#content .section.energyQuality .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px 0;
}

#content .section.energyQuality .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.energyQuality .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.energyQuality .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.energyQuality .howToDo .text,
#content .section.stepMaintenance .howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

#content .section.energyQuality .indicators .indicator .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.energyQuality .indicators .indicator .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.energyQuality .indicators .indicator .howToDoWrapper.type-2 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.energyQuality .indicators .indicator .howToDoWrapper.type-2 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.energyQuality .indicators .indicator .howToDoWrapper.type-2 .howToDo .text {
    color: #616161 !important;
}

#content .section.energyQuality .indicators .indicator .howToDoWrapper.type-3 .howToDo {
    background-color: #999999 !important;
}

#content .section.energyQuality .indicators .indicator .howToDoWrapper.type-3 .howToDo span {
    background-color: #999999 !important;
}

#content .section.energyQuality .indicators .indicator .indicatorDesc,
#content .section.predictiveMaintenance .indicators .indicator .indicatorDesc {
    color: #9da8bc;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 5px 0;
}

#content .section.energyQuality .indicatorError {
    float: left;
    width: 100%;
    height: 160px;
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/energy-quality2.png);
    background-size: 100%;
}

#content .section.energyQuality .indicatorError .errorContent {
    display: table;
    max-width: 1000px;
    margin: auto;
    margin-top: 40px;
    padding-bottom: 10px;
}

#content .section.energyQuality .indicatorError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.energyQuality .indicatorError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.energyQuality .indicatorError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}

#content .section.energyQuality .indicatorError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #3f3f3f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

/*=====================================================================================*/
#content .section.reactiveRates {
    height: 431px;
}

#content .section.reactiveRates .sectionHead,
#content .section.predictiveMaintenance .sectionHead {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#content .section.reactiveRates svg,
#content .section.predictiveMaintenance svg {
    overflow: visible !important;
}

#content .section.reactiveRates .indicators {
    float: left;
    width: 100%;
}

#content .section.predictiveMaintenance .indicators {
    float: left;
    width: 100%;
    width: -webkit-calc(100% - 78px);
    margin-left: 78px;
    margin-top: 32px;
}

#content .section.predictiveMaintenance .indicators .icon {
    float: left;
    height: 208px;
    position: relative;
    min-width: 182px;
}

#content .section.predictiveMaintenance .indicators .icon img {
    height: 120px;
    margin-top: 30px;
}

#content .section.predictiveMaintenance .indicators .indicator {
    float: left;
    width: 273px;
    height: 208px;
}

#content .section.reactiveRates .indicators .indicator {
    float: left;
    width: 226px;
    height: 280px;
    margin: 0 28px;
    position: relative;
    padding-bottom: 10px;
}

#content .section.reactiveRates .indicators .indicator .indicatorContent,
#content .section.predictiveMaintenance .indicators .indicator .indicatorContent {
    float: left;
    width: 100%;
    display: table;
    transition: opacity 400ms ease;
    -webkit-transition: opacity 400ms ease;
}

#content .section.reactiveRates .indicators .indicator .indicatorName {
    float: left;
    text-align: center;
    width: 100%;
    color: #9da8bc;
    font-weight: 500;
    font-size: 13px;
    margin: 0;
    margin-bottom: 10px;
}

#content .section.reactiveRates .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px -25px;
}

#content .section.predictiveMaintenance .howToDoWrapper {
    float: left;
    width: 100%;
}

#content .section.predictiveMaintenance .indicators .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px -29px;
}

#content .section.reactiveRates .howToDo,
#content .section.predictiveMaintenance .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.reactiveRates .howToDo span,
#content .section.predictiveMaintenance .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.reactiveRates .howToDo span i,
#content .section.predictiveMaintenance .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.reactiveRates .howToDo .text,
#content .section.predictiveMaintenance .howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

#content .section.reactiveRates .reactive_PF .sectionError,
#content .section.predictiveMaintenance .reactive_PF .sectionError {
    margin-top: -20px;
}

#content .section.reactiveRates .sectionError {
    float: left;
    width: 100%;
    height: 310px;
    margin-top: 12px;
    background: url(/assets/img/reactiveRatesBlurBackground.png) 10px 0px no-repeat;
    background-size: 550px;
}

#content .section.predictiveMaintenance .sectionError {
    float: left;
    width: 100%;
    height: 483px;
    margin-top: 8px;
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/predictive-maintenance-section.png);
}

#content .section.reactiveRates .sectionError .errorContent,
#content .section.predictiveMaintenance .sectionError .errorContent {
    display: table;
    max-width: 1000px;
    padding-bottom: 10px;
}

#content .section.reactiveRates .sectionError .errorContent .errorIcon,
#content .section.predictiveMaintenance .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.reactiveRates .sectionError .errorContent .errorIcon i,
#content .section.predictiveMaintenance .sectionError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.reactiveRates .sectionError .errorContent .errorTitle,
#content .section.predictiveMaintenance .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 21px;
    line-height: 1.8;
    text-align: center;
}

#content .section.reactiveRates .sectionError .errorContent .errorDesc,
#content .section.predictiveMaintenance .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.reactiveRates .howToDoWrapper.type-1 .howToDo,
#content .section.predictiveMaintenance .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.reactiveRates .howToDoWrapper.type-1 .howToDo span,
#content .section.predictiveMaintenance .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.reactiveRates .howToDoWrapper.type-2 .howToDo,
#content .section.predictiveMaintenance .howToDoWrapper.type-2 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.reactiveRates .howToDoWrapper.type-2 .howToDo span,
#content .section.predictiveMaintenance .howToDoWrapper.type-2 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.reactiveRates .howToDoWrapper.type-2 .howToDo .text {
    color: #fefbfb !important;
}

#content .section.predictiveMaintenance .howToDoWrapper.type-2 .howToDo .text {
    color: #fefbfb;
}

/*=====================================================================================*/
#content .section.StepPlanning .tableWrapper {
    float: left;
    width: 100%;
    padding-bottom: 28px;
}

#content .section.StepPlanning .tableWrapper .table {
    width: 500px;
    margin: 0 auto;
    position: relative;
}

#content .section.StepPlanning .tableWrapper .table .absoluteLayer {
    position: absolute;
    top: -4px;
    right: 23px;
    width: 140px;
    height: 1046px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0 0 18px 0 rgba(255, 205, 0, 0.23);
}

#content .section.StepPlanning .tableWrapper .table .tableHead {
    float: left;
    width: 100%;
    height: 36px;
}

#content .section.StepPlanning .tableWrapper .table .tableHead .col {
    float: left;
    text-align: center;
    color: #666666;
    font-size: 14px;
}

#content .section.StepPlanning .tableWrapper .table .tableHead .col:nth-child(1) {
    width: 50px;
}

#content .section.StepPlanning .tableWrapper .table .tableHead .col:nth-child(2) {
    width: 284px;
}

#content .section.StepPlanning .tableWrapper .table .tableHead .col:nth-child(3) {
    position: absolute;
    top: -1px;
    right: 24px;
    z-index: 4;
    height: 36px;
    width: 139px;
}

#content .section.StepPlanning .tableWrapper .table .tableHead .col:nth-child(3) a {
    display: block;
    float: left;
    width: 100%;
}

#content .section.StepPlanning .tableWrapper .table .tableRow {
    float: left;
    width: 100%;
    height: 36px;
    border-radius: 5px;
    margin-bottom: 12px;
    position: relative;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .col {
    float: left;
    height: 100%;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .col .col-container {
    margin: 0 auto;
    height: 100%;
    display: table;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .col .col-container .rowIconInner {
    margin-top: 9px;
    float: left;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .col .col-container .rowIconInner i {
    float: left;
    display: block;
    width: 22px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .col .col-container .rowIconInner a {
    margin-left: 3px;
    margin-top: 0;
    position: relative;
    top: 3px;
    float: left;
    text-align: center;
    font-size: 12px;
    color: #646467 !important;
    font-weight: 500;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .col .col-container a {
    margin-top: 11px;
    margin-left: 16px;
    float: left;
    display: block;
    text-align: center;
    color: #616161;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .col:nth-child(1) {
    width: 50px;
    background-color: #dddddd;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .check {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: 7px;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .col:nth-child(2) {
    width: 284px;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .col:nth-child(1) a {
    display: block;
    text-align: center;
    color: #7f7f7f;
    font-size: 14px;
    font-weight: 500;
}

#content .section.StepPlanning .tableWrapper .table .tableRow .col:nth-child(3) {
    position: absolute;
    top: -1px;
    right: 24px;
    z-index: 4;
    height: 100%;
    width: 139px;
}

#content .section.StepPlanning .tableWrapper .table .tableRow.s1 {
    border: 1px solid #bad600;
}

#content .section.StepPlanning .tableWrapper .table .tableRow.s1 .col:nth-child(3) {
    border: 1px dashed rgba(186, 214, 0, 0.5);
}

#content .section.StepPlanning .tableWrapper .table .tableRow.s2 {
    border: 1px solid #ff0000;
}

#content .section.StepPlanning .tableWrapper .table .tableRow.s2 .col:nth-child(3) {
    border: 1px dashed rgba(255, 0, 0, 0.5);
}

#content .section.StepPlanning .tableWrapper .table .tableRow.s2 .col:nth-child(2) a {
    color: #ec555e;
}

#content .section.StepPlanning .tableWrapper .table .tableRow.s3 {
    border: 1px solid #616161;
    z-index: 10;
}

#content .section.StepPlanning .tableWrapper .table .tableRow.s3 .col:nth-child(3) {
    border: 1px dashed #616161;
}

#content .section.StepPlanning .tableWrapper .table .tableRow.s4 {
    border: 1px solid rgba(254, 132, 0, 0.7);
}

#content .section.StepPlanning .tableWrapper .table .tableRow.s4 .col:nth-child(3) {
    border: 1px dashed rgba(254, 132, 0, 0.5);
}

#content .section.StepPlanning .tableWrapper .table .emptyRow {
    float: left;
    width: 449px;
    height: 36px;
    background-size: 105% 116%;
    position: absolute;
    left: 50px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-position: -3px -3px;
}

#content .section.StepPlanning .tableWrapper .table .emptyRow a {
    float: left;
    display: block;
    width: 100%;
    text-align: center;
    color: #96aaa5;
    font-size: 16px;
    font-weight: 500;
}

#content .section.StepPlanning .sectionError {
    float: left;
    width: 100%;
    height: 275px;
    background-size: contain;
    background-color: #f6f6f6;
}

#content .section.StepPlanning .sectionError .errorContent {
    display: table;
    max-width: 1000px;
    padding-bottom: 10px;
}

#content .section.StepPlanning .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.StepPlanning .sectionError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.StepPlanning .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}

#content .section.StepPlanning .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.StepPlanning .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.StepPlanning .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.StepPlanning .howToDoWrapper.type-2 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.StepPlanning .howToDoWrapper.type-2 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.StepPlanning .howToDoWrapper.type-2 .howToDo .text {
    color: #616161 !important;
}

#content .section.StepPlanning .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px 0;
}

#content .section.StepPlanning .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.StepPlanning .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.StepPlanning .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.StepPlanning .howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

#content .section.actionList .tableWrapper {
    float: left;
    width: 100%;
    padding: 18px 0;
}

#content .section.actionList .tableWrapper .table {
    width: 98%;
    margin: 0 auto;
    position: relative;
}

#content .section.actionList .tableWrapper .table .tableHead {
    float: left;
    width: 100%;
    height: 36px;
}

#content .section.actionList .tableWrapper .table .tableHead .col {
    float: left;
    text-align: center;
    color: #6d6d6d;
    font-size: 14px;
    font-weight: 500;
}

#content .section.actionList .tableWrapper .table .tableHead .col:nth-child(1) {
    width: 50px;
    height: 100%;
}

#content .section.actionList .tableWrapper .table .tableHead .col:nth-child(2) {
    width: 600px;
}

#content .section.actionList .tableWrapper .table .tableHead .col:nth-child(3) {
    width: 180px;
}

#content .section.actionList .tableWrapper .table .tableRow {
    float: left;
    width: 100%;
    height: 48px;
    border: 1px solid #ffcd00;
    border-radius: 5px;
    margin-bottom: 12px;
    position: relative;
}

#content .section.actionList .tableWrapper .table .tableRow .col {
    float: left;
    height: 100%;
}

#content .section.actionList .tableWrapper .table .tableRow .col:nth-child(1) {
    width: 50px;
    background-color: #f5f5f5;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#content .section.actionList .tableWrapper .table .tableRow .col:nth-child(1) i {
    width: 24px;
    height: 24px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
    margin-top: 10px;
}

#content .section.actionList .tableWrapper .table .tableRow .col:nth-child(2) {
    width: 576px;
    margin-left: 24px;
}

#content .section.actionList .tableWrapper .table .tableRow .col:nth-child(2) a {
    float: left;
    display: block;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
}

#content .section.actionList .tableWrapper .table .tableRow.s0 .col:nth-child(2) a {
    color: #cb454a;
}

#content .section.actionList .tableWrapper .table .tableRow.s1 .col:nth-child(2) a {
    color: rgba(254, 132, 0, 0.7);
}

#content .section.actionList .tableWrapper .table .tableRow.s2 .col:nth-child(2) a {
    color: #899d00;
}

#content .section.actionList .tableWrapper .table .tableRow .col:nth-child(3) {
    width: 180px;
}

#content .section.actionList .tableWrapper .table .tableRow .col:nth-child(3) a {
    float: left;
    width: 100%;
    display: block;
    text-align: center;
    color: #616161;
    font-size: 14px;
    font-weight: 500;
}

#content .section.actionList .tableWrapper .table .tableRow .button {
    float: right;
    width: 144px;
    background-color: #ffcd00;
    height: 32px;
    border-radius: 5px;
    margin-right: 6px;
    cursor: pointer;
}

#content .section.actionList .tableWrapper .table .tableRow .button a {
    display: table;
    color: #616161;
    font-size: 13px;
    font-weight: 500;
}

#content .section.actionList .tableWrapper .table .tableRow .snooze {
    float: left;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 50px;
    cursor: pointer;
}

#content .section.actionList .empty {
    position: relative;
    left: 50%;
    color: #989898;
    font-weight: 500;
    font-size: 17px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 32px 0;
    float: left;
}

/*============================================================*/
/*
*	Maps
*/
#content.maps .toolBox {
    position: fixed;
    top: 66px;
    right: 0;
    height: 100%;
    height: calc(100vh - 110px);
}

#content.maps .toolBox .toolBoxContent {
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 100%;
    transition: transform ease 500ms;
    -webkit-transition: -webkit-transform ease 500ms;
}

#content.maps .toolBox .toolBoxContent {
    box-shadow: 0px 1.5px 10px 0 rgba(0, 0, 0, 0.14);
    background-color: #fff;
}

#content.maps .toolBox .toolBoxContent .toolBoxHead {
    float: left;
    width: 100%;
    height: 52px;
    background-color: #404040;
}

#content.maps .toolBox .toolBoxContent .toolBoxHead .toolBoxHeadTitle {
    color: #ffffff;
    font-size: 14px;
    margin-left: 40px;
}

#content.maps .mapError {
    display: none;
    position: absolute;
    top: 66px;
    left: 0;
    background: #ca2e2e;
    width: 100%;
    width: calc(100% - 80px);
    width: -webkit-calc(100% - 80px);
    text-align: left;
    padding: 19px 40px;
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
}

#content.maps .mapError a {
    color: #464646;
    background: #ffffff;
    padding: 5px 20px;
    border-radius: 4px;
    margin-right: 12px;
}

#content.maps .toolBox .openOrClose {
    float: left;
    width: 24px;
    background-color: #292929;
    height: 100%;
    cursor: pointer;
}

#content.maps .toolBox .openOrClose i {
    float: left;
    width: 15px;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
    transition: transform 1500ms ease;
    -webkit-transition: transform 1500ms ease;
}

#content.maps .toolBox .openOrClose.t2 i {
    transform: translate(-50%, -50%) rotate(180deg);
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
}

#content.maps .toolBox .toolBoxContent .facilityList {
    float: left;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    height: calc(100% - 56px);
    height: -webkit-calc(100% - 56px);
    height: -moz-calc(100% - 56px);
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem {
    float: left;
    width: 33.33333%;
    height: auto;
    background-color: #ffffff;
    overflow: hidden;
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem:nth-child(odd) {
    background-color: rgba(97, 97, 97, 0.03);
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem .facilityItemtitle {
    float: left;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    color: #9da8bc;
    font-size: 18px;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem .facilityItemtitle a {
    color: #9da8bc;
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem ul {
    float: left;
    overflow: auto;
    max-height: 650px;
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem ul::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem ul::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #adadad;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem ul::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #dddddd;
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem ul li {
    float: left;
    width: 100%;
    margin: 8px 0;
    cursor: pointer;
    display: flex;
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem ul li i {
    float: left;
    width: 17px;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 10px;
    background-position: center;
}

#content.maps .toolBox .toolBoxContent .facilityList .facilityItem ul li a {
    float: left;
    width: 155px;
    color: #616161;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

#content.maps .toolBox .toolBoxContent.hide {
    transform: translateX(600px);
    -webkit-transform: translateX(600px);
    -ms-transform: translateX(600px);
}

#content.maps .toolBox .toolBoxContent.show {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
}

#content.maps .toolBox .search {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 32px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-top: 10px;
    margin-right: 18px;
    overflow: hidden;
    transition: transform ease 500ms;
    -webkit-transition: -webkit-transform ease 500ms;
}

#content.maps .toolBox .search input {
    float: left;
    border: none;
    padding: 0 10px;
    outline: none;
    height: 100%;
    margin: 0;
    font-family: roboto;
    font-weight: 500;
    width: 154px;
}

#content.maps .toolBox .search i {
    float: left;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}

#content.maps .toolBox .search.s1 {
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
}

#content.maps .toolBox .search.s2 {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
}

#content.maps .toolBox .showToolBoxWidget {
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    width: 100px;
    height: 52px;
    background-color: #000;
    transition: transform ease 750ms;
    -webkit-transition: -webkit-transform ease 750ms;
}

#content.maps .toolBox .showToolBoxWidget a {
    float: left;
    display: block;
    color: #ffffff;
    font-size: 12px;
    width: 75px;
    text-align: center;
    line-height: 1.3;
    font-weight: 400;
    font-size: 12px;
}

#content.maps .toolBox .showToolBoxWidget.show {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
}

#content.maps .toolBox .showToolBoxWidget.hide {
    transform: translateX(100px);
    -webkit-transform: translateX(100px);
    -ms-transform: translateX(100px);
}

/*============================================================*/
/*
*	Prices
*/
#content .pricesPage {
    float: left;
    width: 100%;
    background-color: rgb(255, 250, 230);
}

#content .pricesPage .pricesTableWrapper {
    float: left;
    width: 100%;
}

#content .pricesPage .pricesTable {
    margin: 90px auto;
    margin-bottom: 45px;
    display: table;
}

#content .pricesPage .pricesTableItem {
    float: left;
    width: 300px;
    height: 320px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 1px 18px 0 rgba(19, 19, 16, 0.26);
}

#content .pricesPage .pricesTableItem.on {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

#content .pricesPage .pricesTableItem .pricesTableItemTitle {
    float: left;
    width: 100%;
    margin: 30px 0;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 500;
    color: #3f3f3f;
    font-size: 22px;
}

#content .pricesPage .pricesTableItem .iconWrapper {
    float: left;
    width: 100%;
    margin: 10px 0;
}

#content .pricesPage .pricesTableItem .icon {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .pricesPage .pricesTableItem .pricesTableItemDesc {
    float: left;
    width: 100%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    text-align: center;
    padding: 0 20px;
    color: #3f3f3f;
    line-height: 1.2;
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0;
}

#content .pricesPage .pricesTableItem .startNowWrapper {
    float: left;
    width: 100%;
    margin: 10px 0;
}

#content .pricesPage .pricesTableItem .startNow {
    margin: 0 auto;
    background-color: #ffcd00;
    width: 220px;
    text-align: center;
    padding: 12px 0;
    border-radius: 5px;
    color: #626262;
    font-size: 19px;
    cursor: pointer;
}

#content .pricesPage .pricesTableItem .pricesTableItemPrice {
    float: left;
    width: 100%;
    margin: 8px 0;
}

#content .pricesPage .pricesTableItem .pricesTableItemPrice .text {
    float: left;
    width: 100%;
    text-align: center;
    color: #3f3f3f;
    font-size: 24px;
    margin-bottom: 8px;
}

#content .pricesPage .pricesTableItem .pricesTableItemPrice .price {
    float: left;
    width: 100%;
    text-align: center;
    color: #3f3f3f;
    font-size: 44px;
}

#content .pricesPage .pricesPWrapper {
    float: left;
    width: 100%;
}

#content .pricesPage .pricesP {
    margin: 48px auto;
    margin-bottom: 64px;
    width: 860px;
    display: table;
}

#content .pricesPage .pricesP .pricesPTitle {
    float: left;
    width: 100%;
    text-align: center;
    color: #393939;
    font-size: 38px;
    font-weight: 500;
    margin: 12px 0;
}

#content .pricesPage .pricesP .pricesPContent {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #393939;
    line-height: 1.3;
    font-weight: 400;
}

/*============================================================*/
#content .section.notifications ul {
    float: left;
    width: 100%;
}

#content .section.notifications ul li {
    float: left;
    width: 100%;
    height: 80px;
}

#content .section.notifications ul li .notifyRow {
    float: left;
    margin-left: 20px;
    height: 100%;
    position: relative;
}

#content .section.notifications ul li .notifyRow::before {
    content: "";
    display: none;
    background-color: #ffcd00;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    position: absolute;
    left: -45px;
    top: 33px;
}

#content .section.notifications ul li .notifyRow .icon {
    display: inline-block;
    min-width: 25px;
    min-height: 21px;
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: left;
}

#content .section.notifications ul li .title {
    color: #616161;
    font-size: 15px;
    line-height: 1;
    margin-top: 19px;
    margin-bottom: 12px;
    font-weight: 500;
}

#content .section.notifications ul li .time {
    color: #a0a0a0;
    font-size: 13px;
    line-height: 1;
}

#content .section.notifications ul li:hover {
    background: #f4f4f4;
}

#content .section.notifications .empty {
    color: #989898;
    font-weight: 500;
    font-size: 18px;
    margin: 100px 0;
    float: left;
    width: 100%;
    text-align: center;
}

/*Price Table*/
#content .pricesPage .pricesTableWrapper .productSectionTitle {
    float: left;
    width: 100%;
    font-size: 46px;
    font-weight: 500;
    margin: 30px 0px 50px;
    text-align: center;
}

#content .pricesPage .pricesTableItem .productTable {
    display: table;
    width: 100%;
}

#content .pricesPage .pricesTableItem .productTableRow {
    display: table-row;
}

#content .pricesPage .pricesTableItem .productTableHeading {
    background-color: #eee;
    display: table-header-group;
}

#content .pricesPage .pricesTableItem .productTableCell,
.productTableHead {
    display: table-cell;
    padding: 3px 10px 10px 2px;
}

#content .pricesPage .pricesTableItem .productTableHeading {
    background-color: #eee;
    display: table-header-group;
    font-weight: bold;
}

#content .pricesPage .pricesTableItem .productTableFoot {
    background-color: #eee;
    display: table-footer-group;
    font-weight: bold;
}

#content .pricesPage .pricesTableItem .productTableBody {
    display: table-row-group;
}

/*============================================================*/
/*
*	Tüketim Özeti
*/
#content .section.consumptionSummary {
    position: relative;
    height: 471px;
}

#content .section.consumptionSummary .targets li {
    width: initial !important;
    min-width: 50px !important;
    margin-right: 40px;
}

#content .section.dashboardConsumptionSummary #svgLoader,
#content .section.consumptionSummary #svgLoader {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 70px);
    background: url(/assets/img/dashboard_loader.gif) 50% 50%;
    background-size: contain;
    z-index: 99;
    background-repeat: no-repeat;
    background-size: 200px;
}

#content .section.consumptionSummary #svgLoader.bg-white {
    background-color: #fff;
}

#content .section.dashboardConsumptionSummary #svgLoader {
    top: 105px;
    height: calc(100% - 105px);
    z-index: 1;
}

#content .section.dashboardConsumptionSummary .total {
    position: relative;
    top: -30px;
    left: 220px;
    color: #9da8bc;
    font-size: 14px;
}

#content .section.dashboardConsumptionSummary .noCompanyError {
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/dashboard-consumption.png) no-repeat;
    background-size: 100%;
}

#content .section.consumptionSummary .targets li {
    margin-right: 10px;
}

#content .section.consumptionSummary .select {
    float: left;
}

#content .section.consumptionSummary .select.selectDataType {
    width: 99px;
}

#content .section.consumptionSummary .select.selectDataType .options {
    cursor: default;
}

#content .section.consumptionSummary .select.selectDataType .options li {
    cursor: pointer;
}

#content .section.consumptionSummary .select:first-child {
    margin-left: 5px;
}

#content .section.consumptionSummary .select .options li {
    padding: 0 10px;
}

#content .section.consumptionSummary .select {
    width: 153px;
}

#content .section.consumptionSummary .consumption-type-wrap .disabled:first-child {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#content .section.consumptionSummary .select .custom-crbox.options {
    top: 19px;
}

#content .section.consumptionSummary .select .custom-crbox li {
    height: auto;
    padding: 0;
}

#content .section.consumptionSummary .select .custom-crbox li:hover label {
    color: #fff !important;
}

#content .section.consumptionSummary .select .custom-crbox {
    position: relative;
}

#content .section.consumptionSummary .select .custom-crbox label::before {
    content: "";
    display: inline-block;
    margin-right: 8px;
    width: 11px;
    height: 11px;
    border-radius: 100%;
    border: 1px solid #707070;
    background-color: #fff;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

#content .section.consumptionSummary .select .custom-crbox input {
    visibility: hidden;
    position: absolute;
}

#content .section.consumptionSummary .select .custom-crbox label {
    display: block;
    padding: 10px;
    font-size: 15px;
    cursor: pointer;
}

#content .section.consumptionSummary .select .custom-crbox input.active~label,
#content .section.consumptionSummary .select .custom-crbox input:checked~label {
    background-color: rgb(255, 232, 140);
    color: #b18e00 !important;
    font-weight: 500;
}

#content .section.consumptionSummary .select .custom-crbox input.active~label::before,
#content .section.consumptionSummary .select .custom-crbox input:checked~label::before {
    background-color: #ffcd00;
}

#content .section.consumptionSummary .select .custom-crbox li.disabled label {
    background-color: transparent;
    color: #aaa !important;
}

#content .section.consumptionSummary .select .custom-crbox li.disabled label::before {
    background-color: #ddd !important;
    color: #aaa !important;
}

#content .section.consumptionSummary .datePickerSelect {
    float: left;
    margin: 0 10px;
    width: 136px;
    font-size: 16px;
    color: #b6bfce;
    height: 28px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    cursor: pointer;
    cursor: pointer;
    position: relative;
}

#content .section.consumptionSummary .datePickerSelect:last-child {
    border-color: #c5c5c5;
}

#content .section.consumptionSummary .datePickerSelect .selectedOption {
    float: left;
    text-align: center;
    color: #b6bfce;
    width: 110px;
    font-size: 15px;
}

#content .section.consumptionSummary .datePickerSelect .selectedOption {
    font-size: 13px;
}

#content .section.consumptionSummary .datePickerSelect .datePickerArea {
    display: none;
    position: absolute;
    top: 42px;
    right: 0;
    background-color: #ffcd00;
    border-radius: 6px;
}

#content .section.consumptionSummary .datePickerSelect .datePickerArea .select {
    display: none;
    width: 100px;
    background-color: #ffffff;
}

#content .section.consumptionSummary .datePickerSelect .datePickerArea .select.active {
    display: block;
}

#content .section.consumptionSummary .datePickerSelect .datePickerArea .selectedOption {
    width: 82px;
}

#content .section.consumptionSummary .datePickerSelect::after {
    content: "";
    width: 11px;
    height: 11px;
    position: absolute;
    top: 11px;
    right: 15px;
    opacity: 0.3;
    background-size: contain;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhBxUONxE0ArT2AAAAq0lEQVRIx+3MLRKCUBSG4RcjYza4BYkWHaLBLRlcjMVKsZrcAA0DwyYsOoZjgPGPe+GcGxwDXzonPC8M+49FJEQBbsYIYM4ZoWBlwktyhJIFZAiCcGWt5imXRh2gak594sWFCjbPR5d458IWYo6GxCc/MQZLwsn1CS/XJTp5f6KXdydU3J9Qc3fCxF0JI28nzNyXMHBXwsi/EwG8Tuy4cWcfxutNmIbjYb/aA2JvzPaI51TvAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA3LTIxVDE0OjU1OjE3KzAyOjAwRgbx7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNy0yMVQxNDo1NToxNyswMjowMDdbSVMAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC);
}

/******************/
#content.settings .field .datePickerSelect {
    float: right;
    margin: 10px 10px;
    width: 420px;
    font-size: 16px;
    color: #b6bfce;
    height: 28px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    cursor: pointer;
    cursor: pointer;
    position: relative;
}

#content.settings .field .datePickerSelect .selectedOption {
    float: left;
    text-align: center;
    color: #b6bfce;
    width: 110px;
    font-size: 15px;
}

#content.settings .field .datePickerSelect .selectedOption {
    font-size: 13px;
}

#content.settings .field .datePickerSelect .datePickerArea {
    display: none;
    position: absolute;
    top: 42px;
    right: 0;
    background-color: #ffcd00;
    border-radius: 6px;
}

#content.settings .field .datePickerSelect .datePickerArea .select {
    display: none;
    width: 100px;
    background-color: #ffffff;
}

#content.settings.field .datePickerSelect .datePickerArea .select.active {
    display: block;
}

#content.settings .field .datePickerSelect .datePickerArea .selectedOption {
    width: 82px;
}

#content.settings .field .datePickerSelect::after {
    content: "";
    width: 11px;
    height: 11px;
    position: absolute;
    top: 11px;
    right: 15px;
    opacity: 0.3;
    background-size: contain;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhBxUONxE0ArT2AAAAq0lEQVRIx+3MLRKCUBSG4RcjYza4BYkWHaLBLRlcjMVKsZrcAA0DwyYsOoZjgPGPe+GcGxwDXzonPC8M+49FJEQBbsYIYM4ZoWBlwktyhJIFZAiCcGWt5imXRh2gak594sWFCjbPR5d458IWYo6GxCc/MQZLwsn1CS/XJTp5f6KXdydU3J9Qc3fCxF0JI28nzNyXMHBXwsi/EwG8Tuy4cWcfxutNmIbjYb/aA2JvzPaI51TvAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA3LTIxVDE0OjU1OjE3KzAyOjAwRgbx7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNy0yMVQxNDo1NToxNyswMjowMDdbSVMAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC);
}

/******************/
#content .section.consumptionSummary svg {
    margin: 30px 0;
}

#content .section.consumptionSummary .dravArea {
    fill: #fff;
}

#content .section.consumptionSummary .rowRect {
    fill: rgba(0, 0, 0, 0);
}

#content .section.consumptionSummary .rowText {
    fill: #b6bfce;
    font-family: "roboto";
    font-size: 11px;
    font-weight: 500;
}

#content .section.consumptionSummary .rowLine {
    fill: none;
    stroke: #e5f3f7;
    stroke-miterlimit: 10;
}

#content .section.consumptionSummary .col {}

#content .section.consumptionSummary .col rect {
    fill: rgba(0, 0, 0, 0);
}

#content .section.consumptionSummary .col .colLine {
    fill: none;
    stroke: #e5f3f7;
    stroke-miterlimit: 10;
}

#content .section.consumptionSummary .col .colText {
    fill: #b6bfce;
    font-family: "roboto";
    font-size: 13px;
    font-weight: 500;
}

#content .section.consumptionSummary .empty,
#content .section.facilityReportConsumptionSummary .empty,
#content .section.dashboardConsumptionSummary .empty {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #989898;
    font-weight: 500;
    font-size: 17px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.4;
}

#content .section.consumptionSummary .noCompanyError {
    height: 378px !important;
}

#content .section.consumptionSummary .noDeviceError {
    height: 378px !important;
}

#content .section.consumptionSummaryBoxes {
    background-color: transparent;
    box-shadow: none;
}

#content .section.consumptionSummaryBoxes.hide {
    display: none;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList {
    float: left;
    width: 100%;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox {
    width: 270px !important;
    margin-right: 26px;
    margin-bottom: 22px;
    cursor: pointer;
    border: 3px solid rgba(0, 0, 0, 0);
    transition: border-color ease 500ms;
    -webkit-transition: border-color ease 500ms;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 205, 0, 0.5);
    -moz-box-shadow: 0px 0px 20px 0px rgba(255, 205, 0, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(255, 205, 0, 0.5);
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox.on {
    border-width: 3px;
    border-style: solid;
    border-color: #ffcd00;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox:nth-child(4n) {
    margin-right: 0 !important;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .boxHead {
    float: left;
    width: 257px;
    height: 48px;
    border-bottom: 3px solid #ffcd00;
    margin-left: 10px;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .icon {
    float: left;
    width: 36px;
    height: 36px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 6px 10px;
    margin-left: 0;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .title {
    float: left;
    color: #b9c0ce;
    font-weight: 500;
    font-size: 14px;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .boxTable {
    float: left;
    width: 100%;
    padding-bottom: 0px;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .boxTable .tableHead {
    float: left;
    width: 100%;
    padding: 10px 0;
    padding-top: 10px;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .boxTable .tableContent {
    float: left;
    width: 100%;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .boxTable .tableHead .col,
#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .boxTable .tableContent .col {
    float: left;
    min-height: 1px;
    color: #616161;
    text-align: center;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .boxTable .tableContent .row {
    float: left;
    width: 100%;
    border-top: 1px solid rgba(182, 191, 206, 0.3);
    padding: 10px 0;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .boxTable .tableHead .col.ct1 {
    width: 40%;
    font-weight: 500;
    color: #b9c0ce;
    opacity: 0.7;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .boxTable .tableHead .col.ct2 {
    width: 30%;
    font-weight: 500;
    line-height: 1.4;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .boxTable .tableContent .col.ct1 {
    width: 40%;
    font-weight: 500;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxList .consumptionSummaryBox .boxTable .tableContent .col.ct2 {
    width: 30%;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxListTitle {
    float: left;
    width: 100%;
    color: #8b8b8b;
    font-weight: 500;
    font-size: 18px;
    margin: 16px 0;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxListTitle span {
    float: left;
    margin: 0 6px;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxListTitle .listTitleItem {
    float: left;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxListTitle .listTitleItem.main:hover {
    color: #d0ba60;
    cursor: pointer;
}

#content .section.consumptionSummaryBoxes .consumptionSummaryBoxListTitle .listTitleItem.main:last-child:hover {
    color: #8b8b8b !important;
    cursor: initial !important;
}

/*============================================================*/
/*
*	Login
*/
.loginView {}

#content .loginView {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 65px;
    overflow: auto;
    background-color: #fbfbfb;
    transition: transform 500ms ease;
    -webkit-transition: -webkit-transform 500ms ease;
    -ms-transition: -ms-transform 500ms ease;
}

#content .loginView.noTransitions {
    transition: initial !important;
    -webkit-transition: initial !important;
    -ms-transition: initial !important;
}

#content .loginView .loginViewInner {
    min-width: 1168px;
}

#content .loginView.current {
    z-index: 10;
}

#content .loginView.hide {
    display: none;
}

#content .loginView.next {
    transform: translateX(100%) !important;
    -webkit-transform: translateX(100%) !important;
    -ms-transform: translateX(100%) !important;
}

#content .loginView.prev {
    transform: translateX(-100%) !important;
    -webkit-transform: translateX(-100%) !important;
    -ms-transform: translateX(-100%) !important;
}

#content .loginPBanner {
    float: left;
    width: 100%;
    /*height: 220px;*/
    padding-bottom: 105px;
    background-color: #ffcd00;
}

#content .loginPBanner .loginPBannerTitle {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 42px;
    color: #616161;
    margin-top: 27px;
    font-weight: 500;
}

#content .loginPBanner .loginPBannerdesc {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: #616161;
    margin-top: 20px;
}

#content .loginPanelWrapper {
    float: left;
    width: 100%;
}

#content .loginPanel {
    width: 640px;
    display: table;
    margin: 0 auto;
    background-color: #ffffff;
    position: relative;
    top: -85px;
    border-radius: 5px;
    margin-bottom: 50px;
}

#content .loginPanel .form {
    float: left;
    width: 100%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    padding: 35px 20px;
}

#content .loginPanel .form .register-after {
    margin-bottom: 30%;
    font-size: 22px;
    line-height: 35px;
}

#content .loginPanel .form .formError {
    float: left;
    width: 100%;
    height: 16px;
    margin-bottom: 20px;
}

#content .loginPanel .form .formError .formErrorInner {
    margin: 0 auto;
    display: table;
}

#content .loginPanel .form .formError i {
    float: left;
    width: 20px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .loginPanel .form .formError a {
    float: left;
    font-weight: 500;
    color: #e30000;
    font-size: 14px;
    margin-top: 1px;
    margin-left: 11px;
}

#content .loginPanel .form .or {
    float: left;
    width: 100%;
    height: 50px;
    position: relative;
    margin: 10px 0;
}

#content .loginPanel .form .or span {
    position: absolute;
    top: 24px;
    width: 92%;
    margin-left: 4%;
    height: 2px;
    background-color: #ffcd00;
    display: block;
}

#content .loginPanel .form .or a {
    display: table;
    background-color: #fff;
    margin: 0 auto;
    padding: 0 40px;
    font-size: 19px;
}

#content .loginPanel .form .fieldTitle {
    float: left;
    width: 92%;
    margin-left: 4%;
    color: #3f3f3f;
    font-size: 18px;
    margin-bottom: 14px;
    font-weight: 500;
}

#content .loginPanel .form .field,
.countryPhone {
    float: left;
    width: 92%;
    margin: 6px 0;
    margin-left: 4%;
    border: 1px solid #cdcdcd;
    height: 50px;
    border-radius: 4px;
    transition-property: border-color;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}

.countryPhone {
    width: 64% !important;
    float: none !important;
    margin-left: 17% !important;
}

/* #content .loginPanel .form .field:focus {
    outline: none;
    box-shadow: 2px 2px #ffcd00
} */

#content .loginPanel .form .field.info {
    height: 100%;
}

#content .loginPanel .form .field.info .info-cont {
    padding: 20px;
    line-height: 18px;
    /*max-height: calc(100vh - 385px);
        overflow-y: auto;*/
}

#content .loginPanel .form .field.info .info-cont::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#content .loginPanel .form .field.info .info-cont::-webkit-scrollbar-track {
    background: #e8ebef;
}

#content .loginPanel .form .field.info .info-cont::-webkit-scrollbar-thumb {
    background: #cacaca;
}

#content .loginPanel .form .field.on {
    border-color: #696969;
    /* border-color: #ffcd00;
    border-width: 2px;*/
    margin: 5px 0;
    margin-left: 4%;
}

#content .loginPanel .form .field.error {
    border-color: #d63737;
    border-width: 1px;
    background-size: 18px;
    margin: 5px 0;
    margin-left: 4%;
    background-position: calc(100% - 4px) 4px !important;
    background-repeat: no-repeat !important;
}

#content .loginPanel .form .field.error input {
    border: none !important;
}

#content .loginPanel .form .field i,
.countryPhone .i {
    float: left;
    width: 50px;
    height: 50px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

#content .loginPanel .form .field input,
.countryPhone input {
    float: left;
    border: none;
    padding: 0;
    outline: none;
    height: 100%;
    margin: 0;
    font-family: roboto;
    font-weight: 500;
    font-size: 15px;
    width: 488px;
    background: transparent;
}

#content .loginPanel .form .field input[type="checkbox"] {
    width: 20px;
}

#content .loginPanel .form .field span.SSL {
    display: inline-block;
    margin: 18px;
}

#content .loginPanel .form .field.focus {
    border: 1px solid #ffcd00;
}

#content .loginPanel .form .field .selectBox,
.countryPhone .selectBox {
    float: left;
    cursor: pointer;
    width: 500px;
    height: 100%;
    position: relative;
    border-radius: 5px;
}

#content .loginPanel .form .field .selectBox .selectedOption,
.countryPhone .selectBox .selectedOption {
    float: left;
    color: #787878;
    font-family: roboto;
    font-weight: 500;
    font-size: 15px;
}

#content .loginPanel .form .field .selectBox .options,
.countryPhone .selectBox .options {
    display: none;
    position: absolute;
    top: 3px;
    left: 1px;
    width: 100%;
    max-height: 200px;
    overflow: auto;
    background-color: #ffffff;
    box-shadow: 0 0 25px #eaeaea;
    z-index: 100;
    margin-bottom: 100px;
    border-radius: 4px;
}

#content .loginPanel .form .field .selectBox .options .option,
.countryPhone .selectBox .options .option {
    float: left;
    width: 100%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    color: #787878;
    font-weight: 400;
    font-size: 13px;
}

#content .loginPanel .form .field .selectBox .options .option.hideBySearch,
.countryPhone .selectBox .options .option.hideBySearch {
    display: none;
}

#content .loginPanel .form .field .selectBox .options .option.selected,
.countryPhone .selectBox .options .option.selected {
    background-color: rgba(205, 205, 205, 0.4);
    font-weight: 500;
}

#content .loginPanel .form .field .selectBox .options .option:hover,
.countryPhone .selectBox .options .option:hover {
    background-color: #f5f5f5;
    font-weight: 500;
}

#content .loginPanel .form .field .selectBox .i,
.countryPhone .selectBox .i {
    position: absolute;
    top: 19px;
    right: 15px;
    width: 14px;
    height: 14px;
    opacity: 0.5;
    background-size: contain;
}

#content .loginPanel .form .field .selectBox .searchArea,
.countryPhone .selectBox .searchArea {
    float: left;
    width: 100%;
    height: 42px;
    border-bottom: 1px solid #ebebeb;
}

#content .loginPanel .form .field .selectBox .searchArea input,
.countryPhone .selectBox .searchArea input {
    float: left;
    width: 100%;
    border: none;
    margin: 0;
    height: 100%;
    padding: 0;
    width: calc(100% - 42px) !important;
    width: -webkit-calc(100% - 42px) !important;
    margin-left: 42px !important;
}

#content .loginPanel .form .field .selectBox i,
.countryPhone .selectBox i {
    position: absolute;
    top: 13px;
    left: 13px;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    display: block;
}

#content .loginPanel .form .field .selectBox .list,
.countryPhone .selectBox .list {
    float: left;
    width: 100%;
    overflow: auto;
    max-height: 156px;
}

#content .loginPanel .form .field .formCheckBox,
.countryPhone .selectBox {
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 4px;
}

/* #content.settings .field .formCheckBox{
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    margin-top:0px;
} */

#content .loginPanel .form .field .text2,
#content.settings .field .text2 {
    float: left;
    color: #898989;
    font-size: 14px;
    font-weight: 500;
    margin-left: 8px;
}

#content .loginPanel .form .field .text2 b {
    color: #ffcd00;
    cursor: pointer;
    text-decoration: underline;
}

#content .loginPanel .form .field .selectBox .loader {
    display: none;
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 15px;
    right: 44px;
    background-size: contain;
}

#content .loginPanel .form .field .selectBox.loadFV .loader,
#content .loginPanel .form .field .selectBox.load .loader {
    display: block;
}

#content .loginPanel .form .field .fieldName {
    float: left;
    margin-left: 15px;
    font-size: 15px;
    font-weight: 500;
    color: #616161;
}

#content .loginPanel .form .field #mac_address {
    float: right;
    height: 32px;
    margin-top: 8px;
    font-size: 15px;
    margin-right: 10px;
    width: 400px;
    background: none;
    outline: none;
    border: 1px solid #e5e5e5;
    padding: 0 10px;
    border-radius: 5px;
    font-family: "roboto";
    color: #616161;
    font-weight: 500;
}

#content .loginPanel .form #reCAPTCHA.on,
#content .loginPanel .form #reCAPTCHARP.on {
    margin: 12px auto;
    display: table;
}

#content .loginPanel .form .submitArea {
    float: right;
    position: relative;
    margin-top: 12px;
    margin-right: 4%;
}

#content .loginPanel .form .submitArea.back {
    float: left;
    position: relative;
    margin-top: 12px;
    margin-right: 4%;
}

#content .loginPanel .form .skipArea {
    float: right;
    position: relative;
    margin-top: 12px;
    margin-right: 4%;
}

#content .loginPanel .form .button {
    padding: 12px 50px;
    background-color: #898989;
    color: #fff;
    border-radius: 5px;
    font-size: 17px;
    cursor: pointer;
}

#content .loginPanel .form .button.back {
    margin-left: 24px;
}

#content .loginPanel .form .button.disabled {
    opacity: 0.5;
}

#content .loginPanel .form .submitArea .loader {
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 12px;
    left: -22px;
    background-size: contain;
    z-index: 0;
}

#content .loginPanel .form .text {
    float: left;
    color: #898989;
    font-size: 14px;
    font-weight: 500;
    margin: 12px 5%;
}

#content .loginPanel .loginWithLinkedin {
    float: left;
    cursor: pointer;
    width: 92%;
    margin-left: 4%;
    border-radius: 5px;
    height: 55px;
    background-color: #0274b3;
}

#content .loginPanel .loginWithLinkedin i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center;
}

#content .loginPanel .loginWithLinkedin a {
    display: block;
    width: 80%;
    width: calc(100% - 52px);
    width: -webkit-calc(100% - 52px);
    text-align: center;
    font-weight: 500;
    color: #fff;
    font-size: 18px;
}

#content .loginPanel .resetPasswordsended {
    float: left;
    width: 100%;
    display: none;
}

#content .loginPanel .resetPasswordsended .title {
    float: left;
    width: 100%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    font-size: 17px;
    font-weight: 500;
    margin: 0 20px;
    padding: 16px 0;
    border-bottom: 1px solid #ececec;
}

#content .loginPanel .resetPasswordsended .text {
    float: left;
    width: 100%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    font-size: 15px;
    line-height: 1.4;
    margin: 0 20px;
    padding: 16px 0;
}

#content .loginPanel .resetPasswordsended .text span {
    font-weight: 500;
    font-size: 18px;
}

/*============================================================*/
/*
*	Footer
*/
#footer {
    float: left;
    width: 100%;
    background-color: #393939;
    /*height: 100px;*/
    position: relative;
}

#footer .footerInner {
    float: left;
    width: 100%;
    width: calc(100% - 160px);
    width: -webkit-calc(100% - 160px);
    height: 100%;
    /*margin: 0 80px;*/
    position: relative;
}

#footer .logo {
    /*position: absolute;*/
    top: 20px;
    right: 10px;
}

#footer .copyright {
    position: absolute;
    /*bottom: 20px;
left: 0;*/
    bottom: 0;
    left: 0;
    color: #c0c0c0;
    font-size: 15px;
}

#footer .footerMenu {
    float: left;
    /*width: 50%;*/
    margin-top: 12px;
}

#footer .footerMenu .footerMenuTitle {
    float: left;
    width: 100%;
    color: #fff;
    font-size: 20px;
    margin: 12px 0;
    text-align: left;
    font: Regular 18px/36px Proxima Nova;
    letter-spacing: 0;
    color: #ffffff;
    opacity: 1;
    font-size: 18px;
}

#footer .footerMenu .footerMenuTitle a {
    color: #ffffff;
}

#footer .footerMenu ul {
    float: left;
    width: 100%;
}

#footer .footerMenu ul li {
    float: left;
    width: 100%;
    color: #c0c0c0;
    padding: 6px 0;
    font-size: 15px;
    cursor: pointer;
}

.footer {
    width: 100%;
    color: #3f3f3f;
    font-size: 14px;
    text-align: center;
    font-family: "roboto";
    opacity: 0.5;
    clear: both;
    text-align: center;
    margin: 0px 0px 0px 0px;
    background-color: #b7b7b7;
}

#version {
    padding: 18px;
    text-align: center;
}

.holdon {
    font-size: 25px;
}

body>svg {
    display: none !important;
}

.pageContent>.settings {
    /*min-height: calc(100vh - 169px) !important;*/
    height: calc(100vh - 169px) !important;
    margin-bottom: 0;
    /*padding-bottom: 120px;*/
    padding-bottom: 58px;
}

.pageContent>#content {
    /*min-height: calc(100vh - 201px);*/
    height: calc(100vh - 201px);
    margin-bottom: 0;
    /*padding-bottom: 120px;*/
    padding-bottom: 58px;
}

.pageContent>.abouts {
    padding-bottom: 0px !important;
}

.pages {
    font-size: 15px;
    line-height: 23px;
    color: #646464;
}

.layout-title {
    font-weight: 300;
    font-size: 24px;
    text-align: center;
    margin-top: 30px;
    color: #000;
    display: block;
    width: 100%;
    background-color: #f5f5f5;
    border-bottom: 3px solid #fbd04b;
    padding: 15px 30px;
    border-radius: 3px;
    margin-bottom: 30px;
}

/*============================================================*/
/*
*	Settings
*/
#content.settings .settingsMenu {
    float: left;
    width: 200px;
    margin-top: 50px;
}

#content.settings .settingsMenu .settingsMenuItem {
    float: left;
    width: 100%;
    height: 48px;
    border-bottom: 1px solid #f1efef;
    cursor: pointer;
}

#content.settings .settingsMenu .settingsMenuItem:last-child {
    border-bottom: none;
}

#content.settings .settingsMenu .settingsMenuItem.on i {
    opacity: 1;
}

#content.settings .settingsMenu .settingsMenuItem.on a {
    color: #616161;
}

#content.settings .settingsMenu .settingsMenuItem:hover {
    background-color: #fafafa;
}

#content.settings .settingsMenu .settingsMenuItem:hover i {
    opacity: 0.6;
}

#content.settings .settingsMenu .settingsMenuItem i {
    float: left;
    width: 48px;
    height: 48px;
    background-size: auto 22px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
}

#content.settings .settingsMenu .settingsMenuItem a {
    float: left;
    color: #a0a0a0;
    font-size: 15px;
    font-weight: 500;
}

#content.settings .settingsMenuContent {
    margin-top: 50px;
    float: left;
    margin-left: 50px;
    padding: 30px 15px;
    width: 840px;
    border: 1px solid #e8e8e8;
    background-color: #ffffff;
}

#content.settings .settingsMenuContent.viewAdminDevices {
    width: 940px;
}

#content.settings .facilityContent .switchContainerSlider {
    margin-bottom: 0;
    float: left;
    padding-top: 4px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    position: relative;
    top: 26px;
    right: 10px;
    width: 400px;
}

#content.settings .facilityContent .switchContainerSlider .switchSlider {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    width: 40px;
    height: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #ffcd00;
    border-radius: 26px;
    background-color: #fff;
    -webkit-transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
    transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
}

#content.settings .facilityContent .switchContainerSlider.detail {
    padding-top: 9px;
}

#content.settings .facilityContent .switchContainerSlider .switchStatusText {
    margin: 0 auto;
    text-align: center;
    color: #9da8bc;
    font-size: 14px;
    float: left;
}

#content.settings .facilityContent .switchContainerSlider .switchSlider span {
    float: left;
    padding: 6px;
    display: block;
    width: 10px;
    height: 10px;
    background: #ffcd00;
    position: relative;
    top: -5px;
    border-radius: 12px;
    -webkit-transition: background-color 0.3s ease-in, left 0.3s ease-in;
    transition: background-color 0.3s ease-in, left 0.3s ease-in;
}

#content.settings .facilityContent .switchContainerSlider .switchSlider.checked span {
    left: 20px;
}

#content.settings .settingsMenuContentItem {
    float: left;
    width: 100%;
    display: none;
}

#content.settings .settingsMenuContentItem.configDevice .threeDotMenuContainer {
    position: absolute;
    right: -20px;
    top: 22px;
    transition: 0.2s ease;
}

#content.settings .settingsMenuContentItem.configDevice .field:hover .threeDotMenuContainer {
    opacity: 1;
}

#content.settings .settingsMenuContentItem.hidden {
    display: none !important;
}

#content.settings .settingsMenuContentItem .error-input,
#content.settings .settingsMenuContentItem .error-areas .invalid.select-container .select2-container {
    border-color: #ffcd00 !important;
}

#content.settings .sectionTitle {
    float: left;
    width: 100%;
    width: calc(100% - 12px);
    width: -webkit-calc(100% - 12px);
    border-bottom: 1px solid #ffcd00;
    font-size: 17px;
    color: #7b7b7b;
    padding: 12px 6px;
    font-weight: 500;
    margin: 14px 0;
}

#content.settings .backButton {
    float: left;
    cursor: pointer;
    padding: 8px 0;
}

#content.settings .backButton i {
    float: left;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
}

#content.settings .backButton i.vmiddle {
    vertical-align: middle;
}

#content.settings .backButton a {
    float: left;
    color: #7b7b7b;
    font-size: 14px;
    font-weight: 500;
    margin-left: 6px;
}

#content.settings .field {
    float: left;
    width: 100%;
    height: 50px;
    background-color: #f8f8f8;
    margin: 5px 0;
    border-radius: 3px;
}

#content.settings .fieldMac {
    height: 350px;
    float: left;
    width: 100%;
    background-color: #f8f8f8;
    margin: 5px 0;
    border-radius: 3px;
}

#content.settings .fieldMac .fieldItem {
    float: left;
    width: 100%;
    margin: 15px;
    text-align: center;
    font-size: 19px;
    color: #7b7b7b;
}

#content.settings .fieldMac .fieldItem .Typeface {
    font-size: 26px;
    line-height: 56px;
    color: #616161;
    font-weight: 500;
}

#content.settings .fieldMac .fieldItem .inputmac {
    text-transform: uppercase;
    width: 300px;
    /* height: 51px; */
    border-radius: 5px;
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #e8e8e8;
    text-align: center;
    font-size: 27px;
    outline: none;
}

#content.settings .fieldMac .fieldItem .submit {
    margin-top: 0;
    margin-left: 15px;
    padding: 17px 25px;
}

#content.settings .fieldMac .fieldItem .inputmac::-webkit-input-placeholder {
    color: #c7c7c7;
}

#content.settings .fieldMac .fieldItem .inputmac::-moz-placeholder {
    color: #c7c7c7;
}

#content.settings .fieldMac .fieldItem .inputmac:-ms-input-placeholder {
    color: #c7c7c7;
}

#content.settings .fieldMac .fieldItem .inputmac:-moz-placeholder {
    color: #c7c7c7;
}

#content.settings .sectionLink {
    float: right;
    border-bottom: 1px solid #dedede;
    font-size: 17px;
    color: #7b7b7b;
    padding: 9px 6px;
    font-weight: 500;
    margin: 14px 0;
    text-align: right;
    display: inline-block;
    cursor: pointer;
}

#content.settings .fieldDevicePanel {
    height: 145px;
    width: 50%;
    border-radius: 3px;
    text-align: center;
    background-color: #f8f8f8;
    margin-bottom: 55px;
    padding-bottom: 14px;
    color: #7b7b7b;
}

#content.settings #fieldDevices {
    display: none;
}

#content.settings .fieldDevices {
    float: left;
    width: 100%;
    margin-top: 30px;
}

#content.settings .fieldDevicePanel .fieldItem {
    margin: 15px;
    font-size: 19px;
}

#content.settings .addDeviceButton {
    width: 50px;
    height: 50px;
    font-size: 35px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    background-color: #ffffff;
    border-radius: 100%;
    color: #bababa;
    cursor: pointer;
}

#content.settings .settingsMenuContent #scanCpManual,
#content.settings .settingsMenuContent #deviceConfigAction {
    text-align: center;
}

#content.settings .settingsMenuContent #scanCpManual.disabled::before,
#content.settings .settingsMenuContent .scan-device-manuel-btn.disabled::before,
#content.settings .settingsMenuContent #deviceConfigAction.disabled::before {
    content: "";
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    margin-bottom: -10px;
    position: relative;
    display: inline;
    float: left;
    margin-left: -80px;
    background-size: contain;
    z-index: 0;
}

#content.settings .settingsMenuContent .scan-device-manuel-btn>div,
#content.settings .settingsMenuContent #scanCpManual>div,
#content.settings .settingsMenuContent #deviceConfigAction>div {
    background-color: orange;
    width: 0;
    height: 41px;
    border-radius: 5px;
    float: left;
    display: inline;
    margin: -12px 0 -40px -50px;
}

#content.settings .field .fieldName {
    float: left;
    margin-left: 15px;
    font-size: 15px;
    font-weight: 500;
    color: #616161;
}

#content.settings .field input.formCheckBox {
    margin-top: 0%;
    float: right;
    height: 32px;
    font-size: 15px;
    margin-right: 10px;
    width: 12px !important;
    background: none;
    outline: none;
    border: 1px solid #e5e5e5;
    padding: 0 10px;
    border-radius: 5px;
    font-family: "roboto";
    color: #616161;
    font-weight: 500;
}


#content.settings .field input,
#whatShouldIDoPopup input {
    float: right;
    height: 32px;
    margin-top: 8px;
    font-size: 15px;
    margin-right: 10px;
    width: 400px;
    background: none;
    outline: none;
    border: 1px solid #e5e5e5;
    padding: 0 10px;
    border-radius: 5px;
    font-family: "roboto";
    color: #616161;
    font-weight: 500;
}

.countryPhone input {
    border: none !important;
    margin-top: 0px !important;
    padding: 0px !important;
}

#content.settings .field input.readonly {
    border: none;
    cursor: default;
}

#content.settings .field input.loading {
    background-image: url(/assets/img/dashboard_loader.gif);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
}

/* field actions Items*/
#content.settings .field .fieldActions {
    float: right;
    margin-right: 10px;
}

#content.settings .fieldActions .fieldActionsInner .fieldAction .fieldActionInner a {
    display: block;
    color: #616161;
    font-weight: 500;
    margin-left: 10px;
    font-size: 15px;
}

#content.settings .field .fieldActions .fieldActionsInner {
    margin: 0 auto;
    display: table;
}

#content.settings .field .fieldActions .fieldActionsInner .fieldAction.active {
    background-color: #ffcd00;
}

#content.settings .field .fieldActions .fieldActionsInner .fieldAction.active a {
    color: #fff;
}

#content.settings .field .fieldActions .fieldActionsInner .fieldAction {
    float: left;
    height: 32px;
    margin-top: 8px;
    font-size: 15px;
    width: 188px;
    background: none;
    outline: none;
    border: 1px solid #e5e5e5;
    padding: 0 10px;
    font-family: "roboto";
    color: #616161;
    font-weight: 500;
    cursor: pointer;
}

#content.settings .field .fieldActions .fieldActionsInner .fieldAction:first-child {
    border-right: none;
    border-radius: 5px 0px 0 5px;
}

#content.settings .field .fieldActions .fieldActionsInner .fieldAction:last-child {
    border-radius: 0px 5px 5px 0px;
}

#content.settings .field .fieldActions .fieldActionsInner .fieldAction .fieldActionInner {
    display: block;
    margin: 0 auto;
    height: 100%;
    text-align: center;
}

#content.settings .field .fieldActions .fieldActionsInner .fieldAction.singleItem {
    width: 400px !important;
}

#content.settings .field .fieldActions .fieldActionsInner .fieldAction.singleItem:focus {
    border: 1px #696969 solid;
}

#content.settings .field .fieldActions .fieldActionsInner .fieldAction.singleItem:last-child {
    border-radius: 5px;
}

#content.settings .settingsMenuContentItem #providerNameDiv .providerWrapper {
    float: right;
    position: relative;
}

#content.settings .settingsMenuContentItem #providerNameDiv .providerWrapper input {
    float: none;
}

#content.settings .settingsMenuContentItem .providerWrapper span.unit {
    display: inline-block;
    width: auto;
    text-align: right;
    color: #a8a8a8;
    height: 32px;
    margin-top: 18px;
    font-size: 15px;
    margin-right: -385px;
    float: right;
}

#content.settings .settingsMenuContentItem #providerNameDiv .providerWrapper span.unit {
    right: 38px;
}

#content.settings .settingsMenuContentItem .testSmsButton {
    width: 19%;
    font-size: 13px;
    padding: 9px;
    margin-top: 8px;
}

#content .loginPanel .form .field span#providerUnit {
    float: right !important;
    width: 100px !important;
    color: #a8a8a8 !important;
    font-weight: 200;
    margin-top: -32px;
}

#inputAdvProviderName {
    width: 200px !important;
}

#content.settings .field.noSpin input[type="number"]::-webkit-outer-spin-button,
#content.settings .field.noSpin input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#content.settings .field.noSpin input[type="number"] {
    -moz-appearance: textfield;
}

#content.settings .space {
    float: left;
    width: 100%;
    height: 40px;
}

#content.settings .submit {
    float: right;
    margin-top: 12px;
    margin-left: 24px;
    padding: 12px 50px;
    background-color: #898989;
    color: #fff;
    border-radius: 5px;
    font-size: 17px;
    cursor: pointer;
}

#content.settings .submit.scan-device-manuel-btn>span {
    position: relative;
    z-index: 1;
}

#content.settings .submit.scan-device-manuel-btn>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
}

#content.settings .submit.disabled {
    opacity: 0.5;
}

#content.settings .connectionCapacities {
    float: left;
    width: 100%;
}

#content.settings .connectionCapacities .connectionCapacitiesItem {
    float: left;
    margin: 5px;
    background-color: #f8f8f8;
    padding: 7px 10px;
    border-radius: 4px;
    color: #484848;
}

#content.settings .field.error,
#content .field.error,
#content.settings .foundedDevicesContainer input.error,
#content.settings .foundedDevicesContainer .select.error,
#content.settings .configDevice input.error,
#content.settings .configDevice .select.error {
    background-size: 11px;
    background-position: calc(100% - 14px) 12px !important;
    background-repeat: no-repeat !important;
    /*background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MDcuMiA1MDcuMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTA3LjIgNTA3LjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8Y2lyY2xlIHN0eWxlPSJmaWxsOiNGMTUyNDk7IiBjeD0iMjUzLjYiIGN5PSIyNTMuNiIgcj0iMjUzLjYiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0FEMEUwRTsiIGQ9Ik0xNDcuMiwzNjhMMjg0LDUwNC44YzExNS4yLTEzLjYsMjA2LjQtMTA0LDIyMC44LTIxOS4yTDM2Ny4yLDE0OEwxNDcuMiwzNjh6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzczLjYsMzA5LjZjMTEuMiwxMS4yLDExLjIsMzAuNCwwLDQxLjZsLTIyLjQsMjIuNGMtMTEuMiwxMS4yLTMwLjQsMTEuMi00MS42LDBsLTE3Ni0xNzYgIGMtMTEuMi0xMS4yLTExLjItMzAuNCwwLTQxLjZsMjMuMi0yMy4yYzExLjItMTEuMiwzMC40LTExLjIsNDEuNiwwTDM3My42LDMwOS42eiIvPgo8cGF0aCBzdHlsZT0iZmlsbDojRDZENkQ2OyIgZD0iTTI4MC44LDIxNkwyMTYsMjgwLjhsOTMuNiw5Mi44YzExLjIsMTEuMiwzMC40LDExLjIsNDEuNiwwbDIzLjItMjMuMmMxMS4yLTExLjIsMTEuMi0zMC40LDAtNDEuNiAgTDI4MC44LDIxNnoiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zMDkuNiwxMzMuNmMxMS4yLTExLjIsMzAuNC0xMS4yLDQxLjYsMGwyMy4yLDIzLjJjMTEuMiwxMS4yLDExLjIsMzAuNCwwLDQxLjZMMTk3LjYsMzczLjYgIGMtMTEuMiwxMS4yLTMwLjQsMTEuMi00MS42LDBsLTIyLjQtMjIuNGMtMTEuMi0xMS4yLTExLjItMzAuNCwwLTQxLjZMMzA5LjYsMTMzLjZ6Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);*/
}

#content.settings .field.error input,
#content .field.error input,
#content.settings .field.error .select,
#content.settings .foundedDevicesContainer input.error,
#content.settings .foundedDevicesContainer .select.error,
#content.settings .configDevice input.error,
#content.settings .configDevice .select.error {
    border-style: solid !important;
    /*border-width: 1.5px !important;*/
    border-width: 1px !important;
    border-color: #d63737 !important;
    transition-property: border-color;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}

#content.settings .field.error input[type="number"]::-webkit-inner-spin-button {
    opacity: 0.5;
}

#content.settings .foundedDevicesContainer input.error,
#content.settings .foundedDevicesContainer .select.error,
#content.settings .configDevice .select.error,
#content.settings .configDevice input.error {
    background-size: 14px;
    background-position: calc(100% - 6px) 5px !important;
}

#content.settings .field .select {
    cursor: pointer;
    float: right;
    position: relative;
    height: 32px;
    margin-top: 8px;
    margin-right: 10px;
    width: 400px;
    background: none;
    outline: none;
    border: 1px solid #e5e5e5;
    padding: 0 10px;
    color: #616161;
    border-radius: 5px;
}

#content.settings .field .select .selectedOption {
    float: left;
    color: #787878;
    font-family: roboto;
    font-weight: 500;
    font-size: 15px;
}

#content.settings .field .facilityNamesSelectBox .selectedOption {
    overflow: hidden;
    white-space: nowrap;
    max-width: 376px;
    text-overflow: ellipsis;
}

#content.settings .field .facilityNamesSelectBox .option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#content.settings .field .select .options {
    display: none;
    position: absolute;
    top: -5px;
    font-size: 15px;
    left: -1px;
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 0 25px #eaeaea;
    z-index: 100;
    margin-bottom: -150px;
    border-radius: 4px;
    max-height: 243px;
}

#content.settings .field .select .options .option {
    float: left;
    width: 100%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    color: #787878;
    font-weight: 400;
    font-size: 13px;
}

#content.settings .field .select .options .option.hideBySearch {
    display: none;
}

#content.settings .field .select .options .option.selected {
    background-color: rgba(205, 205, 205, 0.4);
    font-weight: 500;
}

#content.settings .field .select .options .option:hover {
    background-color: #f5f5f5;
    font-weight: 500;
}

#content.settings .field .select .i {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 14px;
    height: 14px;
    opacity: 0.5;
    background-size: contain;
}

#content.settings .field .select .list {
    float: left;
    width: 100%;
    overflow: auto;
    max-height: 200px;
}

#content.settings .field .select .list.min {
    max-height: 140px;
}

#content.settings .field .select .searchArea {
    float: left;
    width: 100%;
    height: 42px;
    border-bottom: 1px solid #ebebeb;
}

#content.settings .field .select .searchArea input {
    float: left;
    width: 100%;
    border: none;
    margin: 0;
    height: 100%;
    padding: 0;
    width: calc(100% - 42px) !important;
    width: -webkit-calc(100% - 42px) !important;
    margin-left: 42px !important;
}

#content.settings .field .select .searchArea i {
    position: absolute;
    top: 13px;
    left: 13px;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    display: block;
}

#content.settings .field .select .loader {
    display: none;
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 7px;
    right: 44px;
    background-size: contain;
}

#content.settings .field .select.loadFV .loader,
#content.settings .field .select.load .loader {
    display: block;
}

.deviceLoader {
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    float: right;
    background-size: contain;
    margin-top: 20px;
    display: none;
}

#content.settings .sectionHead {
    float: left;
    width: 100%;
}

#content.settings .sectionHead .sectionHeadTitle {
    float: left;
    font-size: 18px;
    color: #616161;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    max-width: 845px;
    text-overflow: ellipsis;
}

#content.settings .sectionHead .actionButton {
    float: right;
    cursor: pointer;
    width: 120px;
    height: 30px;
    border-radius: 26px;
    background-color: #ffcd00;
}

#content.settings .sectionHead .actionButton.virtualDeviceButton {
    width: 170px;
    margin-right: 5px;
}

#content.settings .sectionHead .actionButton .actionButtonInner {
    display: table;
    margin: 0 auto;
}

#content.settings .sectionHead .actionButton .actionButtonInnerV {
    float: left;
    height: 30px;
}

#content.settings .sectionHead .actionButton i {
    color: #616161;
    font-weight: 500;
    font-size: 20px;
    float: left;
    margin-right: 6px;
}

#content.settings .sectionHead .actionButton a {
    float: left;
    display: block;
    font-size: 14px;
    color: #616161;
    font-weight: 500;
}

#content.settings .tabs,
#content .facilityReportSection .tabs,
.facilityReportSectionInstantValues .tabs {
    float: left;
    width: 100%;
    height: 30px;
    display: table;
    margin-top: 20px;
    margin-bottom: 14px;
}

#content.settings .licenseCenters .tabs {
    display: inline-flex;
    height: 60px;
    text-align: center;
}

#content.settings .tabs .tab,
#content .facilityReportSection .tabs .tab,
.facilityReportSectionInstantValues .tabs .tab {
    float: left;
    height: 100%;
    margin: 0 6px;
    cursor: pointer;
}

#content.settings .tabs .tab.active,
#content .facilityReportSection .tabs .tab.active,
.facilityReportSectionInstantValues .tabs .tab.active {
    color: #ffcd00;
    border-bottom: 2px solid #ffcd00;
}

#content.settings .tabs .tab a,
#content .facilityReportSection .tabs .tab a,
.facilityReportSectionInstantValues .tabs .tab a {
    float: left;
    color: #7b7b7b;
    font-size: 16px;
    font-weight: 500;
}

#content.settings .tabs .tab.active a,
#content .facilityReportSection .tabs .tab.active a,
.facilityReportSectionInstantValues .tabs .tab.active a {
    color: #ffcd00;
}

#content .facilityReportSectionInstantValues .select .ln {
    float: right !important;
    color: #c0c0c0;
    padding-right: 5px;
    padding-left: 5px;
}

.section.facilityReportSectionInstantValues div.updateTime.hidden {
    visibility: hidden !important;
}

#content .section .streams,
#content .section .streams .options li a,
#content .section .streams .selectedOption {
    width: 280px !important;
    text-align: left;
}

#content .section .streams .selectedOption .ln {
    margin-right: 20px;
    color: #c0c0c0;
}

#content .section .streams .selected .ln,
#content .section .streams li:hover .ln {
    color: #f0f0f0;
}

#content.settings .listHead {
    float: left;
    width: 100%;
    height: 44px;
    margin: 10px 0;
    border-radius: 5px;
    background-color: #f8f8f8;
}

#content.settings .listHead .search {
    position: relative;
    float: right;
    margin-right: 10px;
    width: 175px;
    height: 25px;
    border: 1px solid #ffcd00;
    border-radius: 25px;
}

#content.settings .listHead .search input {
    float: left;
    font-family: "roboto";
    color: #7b7b7b;
    font-weight: 500;
    font-size: 13px;
    width: 100%;
    width: calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
    width: calc(100% - 50px);
    height: 100%;
    border: none;
    background: none;
    padding: 0;
    padding-left: 16px;
    padding-right: 40px;
    outline: none;
}

#content.settings .listHead .search i {
    position: absolute;
    top: 5px;
    right: 12px;
    width: 14px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
}

#content.settings .emptyLicance {
    float: left;
    width: 400px;
    padding: 10px 0;
}

#content.settings .emptyLicance .text {
    float: left;
    color: #616161;
    font-size: 13px;
    font-weight: 500;
}

#content.settings .emptyLicance .addLicance {
    float: left;
    width: 400px;
    margin-top: 16px;
    background-color: #f8f8f8;
    cursor: pointer;
    border-radius: 4px;
}

#content.settings .emptyLicance .addLicance i {
    margin: 14px auto;
    display: table;
    width: 32px;
    height: 32px;
    background-size: contain;
}

#content.settings .emptyLicance .addLicance a {
    margin: 0 auto;
    display: table;
    color: #494949;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 14px;
}

#content.settings .actions {
    float: left;
    width: 100%;
    margin: 10px 0;
}

#content.settings .actions .actionsInner {
    margin: 0 auto;
    display: table;
}

#content.settings .actions .actionsInner .action {
    float: left;
    cursor: pointer;
    width: 410px;
    height: 50px;
    background-color: #f8f8f8;
    border-radius: 4px;
}

#content.settings .actions .actionsInner .action:hover {
    background-color: #f5f5f5;
}

#content.settings .actions .actionsInner .action .actionInner {
    display: table;
    margin: 0 auto;
    height: 100%;
}

#content.settings .actions .actionsInner .action .actionInner i {
    float: left;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
}

#content.settings .actions .actionsInner .action .actionInner a {
    float: left;
    display: block;
    color: #616161;
    font-weight: 500;
    margin-left: 10px;
    font-size: 15px;
}

#content.settings .actions .actionsInner .action .actionInner span {
    background-color: #898989;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    padding: 3px;
    border-radius: 45px;
    font-size: 15px;
    display: block;
    float: right;
    width: 14px;
    text-align: center;
    margin-left: 10px;
}

#content.settings .actions .actionsInner .action.active {
    background-color: #ffcd00;
}

#content.settings .actionContents {
    float: left;
    width: 100%;
}

#content.settings .actionContents .actionContent {
    float: left;
    width: 100%;
    display: none;
}

#content.settings .or {
    float: left;
    width: 100%;
    height: 50px;
    position: relative;
    margin: 10px 0;
}

#content.settings .or span {
    position: absolute;
    top: 24px;
    width: 92%;
    margin-left: 4%;
    height: 2px;
    background-color: #f8f8f8;
    display: block;
}

#content.settings .or a {
    display: table;
    background-color: #fff;
    margin: 0 auto;
    padding: 0 40px;
    font-size: 19px;
}

#content.settings .list {
    float: left;
    width: 100%;
}

#content.settings .list .listItem {
    float: left;
    width: 100%;
    cursor: pointer;
    height: 42px;
    background-color: #f8f8f8;
    margin: 4px 0;
    position: relative;
    border-radius: 4px;
}

#content.settings .list .listItem .facilityName {
    max-width: calc(100% - 200px) !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#content.settings .configDevice .field {
    position: relative;
}

#content.settings .configDevice .field .param-status {
    position: absolute;
    left: -30px;
    top: 18px;
}

#content.settings .configDevice .field .param-status i {
    width: 24px;
    height: 19px;
    display: inline-block;
    background-size: 24px 19px;
}

#content.settings .configDevice .field.loading::before,
#content.settings .list .listItem.loading::before {
    content: "";
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    position: absolute;
    background-size: contain;
    left: -27px;
    top: 12px;
}

#content.settings .list .listItem.header {
    pointer-events: none;
    background-color: #ffffff;
    border-radius: 0;
    align-items: center;
    padding: 15px 0 !important;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
    border-bottom: 1px solid #ffcd00 !important;
}

#content.settings .developer-screen .list .listItem.goto {
    background-color: #f8f8f8;
    cursor: pointer;
}

#content.settings .sectionTitle .licenceEditHeader {
    color: #ffcd00;
}

#content.settings .nextButton i {
    float: left;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
}

#content.settings .nextButton a {
    float: left;
    color: #7b7b7b;
    font-size: 14px;
    font-weight: 500;
    margin-left: 6px;
}

#content.settings .list .listItem.type2 {
    height: 100px;
}

#content.settings .list .listItem.type2 .facilityImage {
    float: left;
    width: 80px;
    height: 80px;
    background-color: #f2f2f2;
    border-radius: 4px;
    margin: 0 24px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#content.settings .list .listItem.type2 .facilityName {
    float: left;
    color: #616161;
    font-size: 19px;
    font-weight: 500;
}

#content.settings .list .listItem .threeDotsSelect {
    display: none;
    position: absolute;
    width: 120px;
    top: 0;
    right: 0;
    max-height: 280px;
    background-color: #ffffff;
    overflow: auto;
    -ms-overflow-style: none;
    z-index: 10;
    border-radius: 5px;
    box-shadow: 0px 10px 32px rgba(136, 136, 136, 0.3);
}

#content.settings .list .listItem .threeDotsSelect .option {
    float: left;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    color: #b6bfce;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

#content.settings .list .listItem .threeDotsSelect .option:hover {
    background: #ffcd00;
    color: #ffffff;
}

#content.settings .list .listItem .threeDotsSelect .option.disabled {
    color: #cccfde;
    pointer-events: none;
}

#content.settings .list .listItem .threeDotsSelect .option.disabled:hover {
    background: initial;
    color: #cccfde;
    pointer-events: none;
}

#content.settings .list .listItem .col {
    float: left;
    width: 25%;
}

#content.settings .list .listItem .col:nth-child(5) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#content.settings .list .listItem.hideBySearch {
    display: none !important;
}

#content.settings .list .listItem {
    background-color: #f8f8f8;
    transition: all 0.2s linear;
}

#content.settings .devices .list .listItem.listHover {
    background-color: #ebf4f8;
}

#content.settings .list .listItem .status {
    position: absolute;
    top: -14px;
    left: 0;
    padding: 0;
    height: 42px;
    width: auto;
    z-index: 10;
}

#content.settings .devices .list .listItem .status::after {
    background: transparent;
    content: "";
    position: absolute;
    right: -15px;
    top: 0;
    height: 100%;
    width: 15px;
}

#content.settings .devices .list .listItem .status:hover .comm {
    width: 200px;
}

#content.settings .devices .list .listItem .status:hover .comm span {
    opacity: 1;
}

#content.settings .devices .list .listItem .status .comm {
    background-color: #cbcbcb;
}

#content.settings .devices .list .listItem .status .comm.healty {
    background-color: #bbd700;
}

#content.settings .devices .list .listItem .status .comm.risky {
    background-color: #fed757;
}

#content.settings .devices .list .listItem .status .comm.unHealty {
    background-color: #e9384b;
}

#content.settings .devices .list .listItem .status .comm.noConnection {
    background-color: #cbcbcb;
}

#content.settings .devices .list .listItem .status .comm.healty-now {
    background-color: #bbd700 !important;
}

#content.settings .devices .list .listItem .status .comm.risky-now {
    background-color: #fed757 !important;
}

#content.settings .devices .list .listItem .status .comm.unHealty-now {
    background-color: #e9384b !important;
}

#content.settings .devices .list .listItem .status .comm.noConnection-now {
    background-color: #cbcbcb !important;
}

#content.settings .licenseCenters .list .listItem .status,
#content.settings .list.licenceList .listItem .status {
    top: 0;
}

#content.settings .developer-screen .list .listItem .status,
#content.settings .licenseCenters .list .listItem .status,
#content.settings .list.licenceList .listItem .status::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    border-radius: 4px 0 0 4px;
    background-color: #cbcbcb;
}

#content.settings .devices .list .listItem .comm {
    color: #fff;
    text-align: center;
    height: 100%;
    width: 6px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
    transition: width ease 500ms;
    -webkit-transition: width ease 500ms;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0.95;
    z-index: 1;
}

#content.settings .devices .list .listItem .status span {
    display: block;
    font-size: 15px;
    opacity: 0;
    transition: opacity 0.3s linear;
}

#content.settings .devices .list .listItem .status span:last-child {
    font-size: 11px;
}

#content.settings .devices .list .listItem .deviceName {
    font-size: 14px;
    font-weight: 500;
    margin-left: 20px;
}

#content.settings .devices .list .listItem .commContext {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.3s linear;
    height: auto;
}

#content.settings .devices .list .listItem.listHover .commContext {
    opacity: 1;
}

#content.settings .devices .list .listItem.listHover .il-inner .default {
    opacity: 0;
}

#content.settings .devices .list .listItem.listHover .virtual-counter .default {
    opacity: 0.4;
}

#content.settings .devices .list .listItem .default {
    transition: opacity 0.3s linear;
    opacity: 1;
}

#content.settings .devices .list .listItem .commContext i {
    font-style: italic;
}

#content.settings .list .listItem .status .tooltip {
    visibility: hidden;
    width: 120px;
    text-align: center;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 20%;
    left: 50%;
    opacity: 0;
    transition: opacity 0.3s;
    color: #8c8c8c;
    font-size: 12px;
    padding: 5px;
    padding-bottom: 8px;
    background: #ffffff;
    border-radius: 6px;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0px 4.5px 17px 0 rgba(7, 41, 60, 0.3);
}

#content.settings .list .listItem .status .tooltip:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    margin-top: -1px;
    border-color: #ffffff transparent transparent transparent;
}

#content.settings .list .listItem .status:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

#content.settings .list .listItem .status.alarm .tooltip .header {
    color: #ffcd00;
    padding: 5px;
    font-size: 14px;
}

#content.settings .list .listItem .status.warning .tooltip .header {
    color: #ffcd00;
    padding: 5px;
    font-size: 14px;
}

#content.settings .list .listItem .status.alarm {
    background-color: #ffcd00;
}

#content.settings .list .listItem .status.warning {
    background-color: #ffcd00;
}

#content.settings .list .listItem .status.active::after {
    background-color: #bad600;
}

#content.settings .list .listItem .status.passive::after {
    background-color: #d5d5d5;
}

#content.settings .developer-screen .list .listItem .status.active,
#content.settings .licenseCenters .list .listItem .status.active {
    background-color: #bad600;
}

#content.settings .licenseCenters .list .listItem .status.passive {
    background-color: #d5d5d5;
}

#content.settings .licenseCenters .list .listItem .status.deactive {
    background-color: #d5d5d5;
}

#content.settings .list .listItem .status.connectionProblemsWithClients {
    background-color: #4e9cb5;
}

#content.settings .list .listItem .status.inVisibleTag {
    display: none;
}

#content.settings .list .listItem .col.noLicense {
    -ms-opacity: 0.2;
    opacity: 0.2;
}

#content.settings .list .listItem .col:nth-child(2) {
    width: 20%;
    color: #616161;
    font-size: 14px;
    margin-left: 24px;
}

#content.settings .list .listItem .col:nth-child(3) {
    width: 25%;
    color: #8c8c8c;
    font-size: 14px;
    text-align: center;
}

#content.settings .list .listItem .col:nth-child(4) {
    width: 25%;
    color: #8c8c8c;
    font-size: 14px;
    text-align: center;
}

#content.settings .list .listItem .col:nth-child(5) {
    width: 20%;
    color: #8c8c8c;
    font-size: 14px;
    text-align: center;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem.header .col:nth-child(1) {
    width: 25%;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem.header .col:nth-child(2) {
    width: 15%;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem.header .col:nth-child(3) {
    width: 18%;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem.header .col:nth-child(4) {
    width: 20%;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem.header .col:nth-child(5) {
    width: 19%;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem .il-inner .col:nth-child(1) {
    width: 33%;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem .il-inner .col:nth-child(2) {
    width: 18%;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem .il-inner .col:nth-child(3) {
    width: 23%;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem .il-inner .col:nth-child(4) {
    width: 24%;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem .il-inner .col:nth-child(5) {
    width: 19.7%;
}

#content.settings .devices .custom-device-list.list.viewAdminDevices .listItem .virtual-counter .col {
    width: 21%;
}

#content.settings .licenseCenters .list .listItem .col:nth-child(2) {
    width: 30% !important;
}

#content.settings .licenseCenters .list .listItem .col:nth-child(3) {
    width: 25% !important;
}

#content.settings .licenseCenters .list .listItem .col:nth-child(4) {
    width: 20% !important;
}

#content.settings .licenseCenters .list .listItem .col:nth-child(5) {
    width: 10% !important;
}

#content.settings .licenseCenters .list .listItem .col:nth-child(6) {
    width: 10% !important;
    color: #8c8c8c;
    font-size: 14px;
    text-align: center;
}

#content.settings .list .listItem .menu {
    float: right;
    width: 30px;
    height: auto;
    margin-top: 6px;
    cursor: pointer;
    position: relative;
}

#content.settings .facilities .list .listItem .menu {
    margin-top: 30px;
    margin-right: 10px;
    display: block;
    width: 40px;
    height: 40px;
    transition: 0.2s ease;
}

#content.settings .settingsMenuContent .myFacilities.noCompanyError {
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/my-facilities.png) no-repeat;
    background-size: 100%;
    height: 440px;
}

#content.settings .licenseCenters .list .listItem .menu {
    margin-top: 20px;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.2s ease;
}

#content.settings .editLicenseCenter.newAdditional input:not(.not-none),
#content.settings .editLicenseCenter.newAdditional .select:not(.not-none) {
    pointer-events: none !important;
    border-color: transparent;
}

#content.settings .editLicenseCenter.newAdditional .datePickerSelect {
    pointer-events: none;
    border: transparent;
}

#content.settings .editLicenseCenter.newAdditional .datePickerSelect .selectedOption {
    font-size: 15px;
    color: #616161;
    font-weight: 500;
    text-align: left;
    padding-left: 10px;
}

#content.settings .editLicenseCenter.newAdditional .datePickerSelect::after,
#content.settings .editLicenseCenter.newAdditional .i-selectbox-bottomArrow {
    display: none;
}

#content.settings .list .listItem .menu:hover {
    background-color: rgb(230, 230, 230);
}

#content.settings .list .listItem .menu i {
    width: 16px;
    height: 16px;
    display: table;
    background-size: contain;
    opacity: 0.3;
    background-repeat: no-repeat;
}

#content.settings .sectionImageHead {
    float: left;
    width: 100%;
    height: 100px;
    margin-bottom: 12px;
}

#content.settings .sectionImageHead .image {
    float: left;
    cursor: pointer;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px 100px;
}

#content.settings .users-container .users-list .photo-wrap.uploading::after,
#content.settings .sectionImageHead .image.uploading::after {
    content: "";
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 999;
    margin-left: 75px;
    margin-top: 75px;
    background-size: contain;
}

#content.settings .users-container .users-list .photo-wrap.uploading i {
    display: none;
}

#content.settings .users-container .users-list .photo-wrap.uploading::after {
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -10px;
    pointer-events: none;
}

#content.settings .sectionImageHead .name {
    float: left;
    margin-left: 20px;
    color: #616161;
    font-size: 28px;
    font-weight: 500;
}

#content.settings .workingDays {
    float: right;
    position: relative;
}

#content.settings .workingDays .workingDaysTitle {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    top: -38px;
    font-size: 16px;
    font-weight: 500;
    color: #616161;
}

#content.settings .workingDays .day {
    float: left;
    width: 50px;
    height: 58px;
    cursor: pointer;
}

#content.settings .workingDays .day .text {
    float: left;
    width: 100%;
    text-align: center;
    color: #616161;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

#content.settings .workingDays .day span {
    float: left;
    width: 32px;
    height: 32px;
    background-color: #8a888b;
    border-radius: 32px;
    margin-left: 9px;
    transition: background-color ease 100ms;
    -webkit-transition: background-color ease 100ms;
}

#content.settings .workingDays .day.on span {
    background-color: #ffcd00;
}

#content.settings .helpHead {
    float: left;
    width: 100%;
    height: 64px;
    margin-bottom: 32px;
}

#content.settings .helpHead i {
    float: left;
    width: 64px;
    height: 64px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content.settings .helpHead .texts {
    float: left;
    margin-left: 14px;
}

#content.settings .helpHead .texts .text1 {
    font-size: 14px;
    color: #898989;
}

#content.settings .helpHead .texts .text2 {
    font-size: 26px;
    color: #616161;
    margin-top: 4px;
    font-weight: 500;
}

.col .liststatus.active {
    background-color: #bad600;
}

.col .liststatus.passive {
    background-color: #d5d5d5;
}

.col .liststatus {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 6px;
    z-index: 10;
    background-color: #d5d5d5;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    transition: width ease 500ms;
    -webkit-transition: width ease 500ms;
}

#content.settings .tableWrapper .table {
    display: table;
    width: 98%;
    margin: 0 auto;
    position: relative;
}

#content.settings .tableWrapper .table {
    width: 98%;
    margin: 0 auto;
    position: relative;
}

#content.settings .tableWrapper .table .tableHead {
    float: left;
    width: 100%;
    height: 44px;
    background-color: #f8f8f8;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom: 1px solid #d5d5d5;
}

#content.settings .tableWrapper .table .tableHead .col {
    float: left;
    text-align: center;
    color: #6d6d6d;
    font-size: 14px;
    font-weight: 500;
}

#content.settings .tableWrapper .table .tableHead .col:nth-child(1) {
    width: 50px;
    height: 100%;
}

#content.settings .tableWrapper .table .tableHead .col:nth-child(2) {
    width: 380px;
}

#content.settings .tableWrapper .table .tableHead .col:nth-child(3) {
    width: 380px;
}

#content.settings .tableWrapper .table .tableRow {
    float: left;
    width: 100%;
    height: 48px;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

#content.settings .tableWrapper .table .tableRow:nth-child(even) {
    background-color: #fafafa;
}

#content.settings .tableWrapper .table .tableRow .col {
    float: left;
    height: 100%;
}

#content.settings .tableWrapper .table .tableRow .col a {
    float: left;
    width: 100%;
    display: block;
    color: #6d6d6d;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

#content.settings .tableWrapper .table .tableRow.gift {
    border: 1px solid #bad600;
}

#content.settings .tableWrapper .table .tableRow .col:nth-child(1) {
    width: 50px;
    cursor: pointer;
}

#content.settings .tableWrapper .table .tableRow .col:nth-child(1) input {
    margin: 0;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    display: table;
}

#content.settings .tableWrapper .table .tableRow .col:nth-child(2) {
    width: 380px;
}

#content.settings .tableWrapper .table .tableRow .col:nth-child(3) {
    width: 380px;
}

#content.settings .tableWrapper .table .tableRow .button {
    float: right;
    width: 144px;
    background-color: #ffcd00;
    height: 32px;
    border-radius: 5px;
    margin-right: 6px;
    cursor: pointer;
}

#content.settings .tableWrapper .table .tableRow .button a {
    display: table;
    color: #616161;
    font-size: 13px;
    font-weight: 500;
}

#content.settings .tableWrapper .table .tableRow .snooze {
    float: left;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 50px;
    cursor: pointer;
}

#content.settings .empty {
    position: relative;
    left: 50%;
    color: #989898;
    font-weight: 500;
    font-size: 17px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 32px 0;
    float: left;
}

#content.settings .foundedDevicesContainer {
    float: left;
    width: 100%;
    display: none;
}

#content.settings .foundedDevicesContainer .modemHead {
    float: left;
    width: 100%;
    height: 170px;
    background-color: #f8f8f8;
    border-radius: 3px;
}

#content.settings .foundedDevicesContainer .modemHead .inputTitle {
    float: left;
    width: 100%;
    padding: 0px 12px;
    padding-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #919191;
}

#content.settings .foundedDevicesContainer .modemHead .image {
    float: left;
    width: 102px;
    height: 112px;
    margin: 0 28px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#content.settings .foundedDevicesContainer .modemHead .macAddress {
    float: left;
    width: 112px;
    margin: 0 28px;
    text-align: center;
    padding-top: 12px;
    font-size: 12px;
    font-weight: 500;
    color: #919191;
}

#content.settings .foundedDevicesContainer .modemHead input {
    float: left;
    width: 100%;
    margin: 6px 0;
    margin-left: 8px;
    background-color: #ffffff;
    border: none;
    outline: none;
    border-radius: 5px;
    height: 42px;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 500;
    color: #717171;
    font-family: roboto;
    margin-bottom: 5px;
}

#content.settings .foundedDevicesContainer .select {
    cursor: pointer;
    float: left;
    position: relative;
    height: 42px;
    width: 100%;
    background: #ffffff;
    outline: none;
    border: none;
    padding: 0 12px;
    color: #616161;
    margin: 6px 0;
    margin-left: 8px;
    border-radius: 5px;
}

#content.settings .foundedDevicesContainer .select.embedded {
    cursor: pointer;
    float: left;
    position: relative;
    height: 42px;
    width: 400px;
    background: #ffffff;
    outline: none;
    border: none;
    padding: 0 12px;
    color: #616161;
    margin: 6px 0;
    border-radius: 5px;
    margin-bottom: 18px;
}

#content.settings .foundedDevicesContainer .select .selectedOption {
    float: left;
    color: #787878;
    font-family: roboto;
    font-weight: 500;
    font-size: 15px;
}

#content.settings .foundedDevicesContainer .select .options {
    display: none;
    position: absolute;
    top: -5px;
    font-size: 15px;
    left: -1px;
    width: 100%;
    max-height: 200px;
    overflow: auto;
    background-color: #ffffff;
    box-shadow: 0 0 25px #eaeaea;
    z-index: 100;
    margin-bottom: 100px;
    border-radius: 4px;
}

#content.settings .foundedDevicesContainer .select .options .option {
    float: left;
    width: 100%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    color: #787878;
    font-weight: 400;
    font-size: 13px;
}

#content.settings .foundedDevicesContainer .select .options .option.hideBySearch {
    display: none;
}

#content.settings .foundedDevicesContainer .select .options .option.selected {
    background-color: rgba(205, 205, 205, 0.4);
    font-weight: 500;
}

#content.settings .foundedDevicesContainer .select .options .option:hover {
    background-color: #f5f5f5;
    font-weight: 500;
}

#content.settings .foundedDevicesContainer .select .i {
    position: absolute;
    top: 14px;
    right: 15px;
    width: 14px;
    height: 14px;
    opacity: 0.5;
    background-size: contain;
}

#content.settings .foundedDevicesContainer .select .list {
    float: left;
    width: 100%;
    overflow: auto;
    max-height: 156px;
}

#content.settings .foundedDevicesContainer .select .searchArea {
    float: left;
    width: 100%;
    height: 42px;
    border-bottom: 1px solid #ebebeb;
}

#content.settings .foundedDevicesContainer .select .searchArea input {
    float: left;
    width: 100%;
    border: none;
    margin: 0;
    height: 100%;
    padding: 0;
    width: calc(100% - 42px) !important;
    width: -webkit-calc(100% - 42px) !important;
    margin-left: 42px !important;
}

#content.settings .foundedDevicesContainer .select .searchArea i {
    position: absolute;
    top: 13px;
    left: 13px;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    display: block;
}

#content.settings .foundedDevicesContainer .select .loader {
    display: none;
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 7px;
    right: 44px;
    background-size: contain;
}

#content.settings .foundedDevicesContainer .select.loadFV .loader,
#content.settings .foundedDevicesContainer .select.load .loader {
    display: block;
}

#content.settings .foundedDevicesContainer .select.disabled,
#content.settings .foundedDevicesContainer input.disabled {
    pointer-events: none;
    background: transparent !important;
}

#content.settings .foundedDevicesContainer .select.disabled .i-selectbox-bottomArrow {
    background: transparent;
}

#content.settings .foundedDevicesContainer .desc {
    float: left;
    width: 100%;
    padding: 8px 0;
    color: #c6c6c6;
    font-size: 12px;
}

#content.settings .foundedDevicesContainer .deviceList {
    float: left;
    width: 100%;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem {
    float: left;
    width: 100%;
    margin-right: 12px;
    margin-bottom: 12px;
    background: transparent !important;
    height: 100% !important;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .deviceItem {
    background-color: #f8f8f8;
    position: relative;
    z-index: 9;
    height: 100%;
}

/*==========================  donanım muayene edildiğinde - sanal cihaz için ==========================*/

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter input {
    border: 1px solid #e5e5e5;
    width: 100%;
    background: transparent;
    width: 225px;
    height: 38px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter .col:nth-child(1) {
    width: 7%;
    font-size: 11px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter .col:nth-child(2) {
    width: 34%;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter .col:nth-child(3) {
    width: 39%;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter .col:nth-child(4) {
    width: 20%;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter {
    margin-top: 8px;
    margin-left: 70px;
    cursor: default;
    background-color: #f8f8f8;
    position: relative;
    padding: 5px 0;
    color: #616161;
    font-size: 14px;
    border-radius: 3px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter:last-child::before {
    top: -18px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter::before,
#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter::after {
    content: "";
    position: absolute;
    left: -35px;
    top: -7px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter::before {
    background-color: #898989;
    width: 2px;
    height: 100%;
    padding-bottom: 8px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter:last-child::before {
    padding-bottom: 0;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter::after {
    background-color: #898989;
    height: 2px;
    width: 35px;
    bottom: 18px;
    top: inherit;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .virtual-counter .icon {
    vertical-align: middle;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem.embedded {
    float: left;
    width: 100%;
    margin-right: 12px;
    margin-bottom: 12px;
    background-color: #f8f8f8;
    height: 300px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem.embedded.onlyDiag {
    height: 215px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem:nth-child(3n) {
    margin-right: 0;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem input {
    float: left;
    width: 100%;
    margin-bottom: 16px;
    background-color: #ffffff;
    border: none;
    outline: none;
    border-radius: 5px;
    height: 38px;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 500;
    color: #717171;
    margin-bottom: 12px;
    font-family: roboto;
}

#content.settings .foundedDevicesContainer .deviceList .image {
    background-size: 95.6px 83px;
    width: 95.8px;
    height: 83px;
    margin: 22px 22px 0 22px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

#content.settings .foundedDevicesContainer .deviceList .image.gray {
    background-image: url(/assets/img/commAttempts/deviceStandard.png);
}

#content.settings .foundedDevicesContainer .deviceList .image.green {
    background-image: url(/assets/img/commAttempts/devHealty.png);
}

#content.settings .foundedDevicesContainer .deviceList .image.yellow {
    background-image: url(/assets/img/commAttempts/devRisky.png);
}

#content.settings .foundedDevicesContainer .deviceList .image.red {
    background-image: url(/assets/img/commAttempts/devUnhealty.png);
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .deviceModel {
    text-align: left;
    color: #a3a3a3;
    font-weight: 500;
    font-size: 16.8px;
    margin-top: 22px;
    margin-bottom: 18px;
    float: left;
    width: 100%;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .deviceNad {
    text-align: center;
    color: #919191;
    font-weight: 500;
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 16px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .deviceName {
    width: 400px;
    height: 42px;
    margin-bottom: 1px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .inputTitle {
    float: left;
    width: 100%;
    padding-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #919191;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .diagTitle {
    font-size: 15px;
    color: #7b7b7b;
    padding-left: 0;
    padding-top: 0;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .diagResult.loading {
    background-image: url(/assets/img/dashboard_loader.gif);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: top;
    min-height: 35px;
    float: left;
    width: 100%;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .diagResultItem {
    font-size: 15px;
    float: left;
    color: #a0a0a0;
    padding-left: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    line-height: 19px;
    margin-bottom: 12px;
    width: 100%;
    animation: slide-down 0.4s ease;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .info {
    font-size: 10px;
    float: left;
    color: #cccccc;
    width: 100%;
    animation: slide-down 0.4s ease;
    margin-bottom: 6px;
    margin-top: -3px;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .retryDiag {
    float: left;
    margin-left: 0;
    margin-right: 24px;
    margin-top: 0;
    margin-bottom: 5px;
    color: #616161;
    border: 1px solid #c1c1c1;
    background-color: white;
    font-size: 11.5px;
    line-height: 20px;
    padding: 6.5px 20px;
    color: #7b7b7b;
    font-weight: 500;
    animation: slide-down 0.4s ease;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .retryDiag:hover {
    color: black;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .diagResultItem.i-icon-warning {
    color: #e2b600;
}

#content.settings .foundedDevicesContainer .deviceList .deviceListItem .diagResultItem.i-icon-alert {
    color: #fc0e1c;
}

#content.settings .foundedDevicesContainer .newDevicesTitle {
    float: left;
    width: 100%;
    color: #ffcd00;
    font-size: 15px;
    padding: 12px 0;
    font-weight: 500;
    margin-top: 20px;
}

/*=======================================================*/
#content.settings .configDevice .field .select,
#content.settings .configDevice .field input {
    width: 200px;
}

#content.settings .configDevice .field .inputWrapper,
#content.settings .configDevice .field .selectWrapper {
    float: right;
    position: relative;
}

#content.settings .configDevice .field .inputWrapper input,
#content.settings .configDevice .field .selectWrapper .select {
    float: none;
    width: 200px;
}

#content.settings .configDevice .field .inputWrapper input::placeholder {
    float: right;
    color: #00000066 !important;
    font-size: 13px;
    font-weight: 400;
    margin-top: 10px;
}

#content.settings .configDevice .field span.unit {
    display: inline-block;
    position: absolute;
    right: 40px;
    top: 20px;
    width: auto;
    text-align: right;
    color: rgba(0, 0, 0, 0.4);
}

#content.settings .configDevice .field .inputWrapper span.unit {
    right: 38px;
}

#content.settings .configDevice .field .tag-resources span.unit {
    right: 30px;
}

#content.settings .configDevice .field .tag-resources .select-container span.unit {
    top: 12px;
    pointer-events: none;
}

#content.settings .configDevice .deviceActions {
    float: left;
    margin-bottom: 5px;
    width: 100%;
}

#content.settings .configDevice .deviceAction {
    float: left;
    margin-left: 0;
    margin-right: 24px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #616161;
    border: 1px solid #c5c5c5;
    background-color: white;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 40px;
}

#content.settings .configDevice .deviceAction>div {
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 10px;
    background-size: 20px;
    margin-left: -10px;
}

#content.settings .configDevice .field .selectWrapper .unit:hover {
    cursor: pointer;
}

#content.settings .configDevice .field .inputWrapper .unit:hover {
    cursor: text;
}

/*=======================================================*/
#content.settings .configParameters .categories {
    float: left;
    width: 100%;
    display: table;
    padding: 6px 0;
    margin-top: 20px;
}

#content.settings .configParameters .groups {
    float: left;
    width: 100%;
    padding: 4px 0;
}

#content.settings .configParameters .listItems {
    float: left;
    width: 100%;
    padding: 4px 0;
}

#content.settings .configParameters .categories .categoryItem {
    float: left;
    width: 100%;
    display: table;
    margin: 4px 0;
}

#content.settings .configParameters .categories .categoryItem .groupItem {
    float: left;
    width: 97%;
    margin: 4px 0;
    margin-left: 3%;
    display: table;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem {
    float: left;
    width: 97%;
    height: 42px;
    background-color: #f8f8f8;
    margin: 2px 0;
    margin-left: 3%;
    border-radius: 3px;
    position: relative;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem.error {
    background-color: #ca2e2e;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem.error .itemKey {
    color: #ffffff;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemKey {
    float: left;
    margin-left: 12px;
    color: #616161;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    width: 50%;
    width: calc(50% - 32px);
    width: -webkit-calc(50% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemValue {
    float: right;
    margin-right: 12px;
    width: 50%;
    width: calc(50% - 12px);
    width: -webkit-calc(50% - 12px);
    height: 32px;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem input {
    padding-left: 12px;
    width: 50%;
    width: calc(50% - 12px);
    width: -webkit-calc(50% - 12px);
    border: none;
    outline: none;
    background-color: #ffffff;
    border-radius: 3px;
    font-family: roboto;
    color: #696969;
    font-weight: 500;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem select {
    cursor: pointer;
    width: 50%;
    width: calc(50% - 12px);
    width: -webkit-calc(50% - 12px);
    border: none;
    border-radius: 3px;
    outline: none;
    padding-left: 7px;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem>input.itemValue {
    width: 50%;
    width: calc(50% - 24px);
    width: -webkit-calc(50% - 24px);
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemValue .TimePickerItem {
    float: left;
    height: 34px;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemValue .TimePickerItem .changeNumber {
    float: left;
    width: 20px;
    height: 34px;
    margin: 0 2px;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemValue .TimePickerItem .changeNumber .up {
    float: left;
    width: 20px;
    height: 17px;
    cursor: pointer;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemValue .TimePickerItem .changeNumber .down {
    float: left;
    width: 20px;
    height: 17px;
    cursor: pointer;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemValue .TimePickerItem .changeNumber .i {
    float: left;
    width: 11px;
    height: 11px;
    background-size: contain;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemValue .TimePickerItem .changeNumber .down .i {
    transform: translate(-50%, -50%) rotate(180deg);
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemValue::placeholder {
    color: #cccccc;
    opacity: 1;
    font-weight: 500;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemValue:-ms-input-placeholder {
    color: #cccccc;
    font-weight: 500;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .itemValue::-ms-input-placeholder {
    color: #cccccc;
    font-weight: 500;
}

#content.settings .configParameters .categories .categoryItem .groupItem .listItem .unitName {
    position: absolute;
    right: -40px;
    width: 40px;
    text-align: center;
    z-index: 100;
    font-size: 12px;
    font-weight: 500;
}

#content.settings .configParameters .categories .itemHead {
    float: left;
    width: 100%;
    height: 42px;
    background-color: #f8f8f8;
    position: relative;
    cursor: pointer;
    border-radius: 4px;
}

#content.settings .configParameters .categories .itemHead .title {
    float: left;
    margin-left: 12px;
    color: #616161;
    font-size: 16px;
    font-weight: 500;
}

#content.settings .configParameters .categories .itemHead .i {
    position: absolute;
    right: 15px;
    width: 14px;
    height: 14px;
    opacity: 0.5;
    background-size: contain;
    transition: transform ease-out 300ms;
}

#content.settings .configParameters .categoryItem[is-open="1"]>.itemHead .i {
    transform: translateY(-50%) rotate(180deg);
}

#content.settings .configParameters .groupItem[is-open="1"]>.itemHead .i {
    transform: translateY(-50%) rotate(180deg);
}

#content.settings .configParameters .TimePickerItem input {
    text-align: center;
}

#content.settings .configParameters .fixedFooter {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    border-top: 1px solid #d5d5d5;
    background-color: #f8f8f8;
    z-index: 200;
}

#content.settings .configParameters .fixedFooter .submit {
    float: right;
    margin-top: 0;
    margin-right: 32px;
    padding: 12px 50px;
    background-color: #898989;
    color: #fff;
    border-radius: 5px;
    font-size: 17px;
    cursor: pointer;
}

#content.settings .configParameters .fixedFooter .submit.disable {
    opacity: 0.5;
}

/* settings device communication attempt counts */
#content.settings .settingsMenuContent .devices.noCompanyError {
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/devices.png) no-repeat;
    background-size: 100%;
    height: 910px;
}

#content.settings .devices .commAttemptSection {
    -webkit-display: flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
}

#content.settings .devices .contentHead {
    height: 35px;
}

#content.settings .devices .updateTime {
    color: #a2adbe;
    margin-bottom: 5px;
}

#content.settings .devices .updateTime b {
    font-weight: 500;
}

#content.settings .devices .contentHead .title {
    font-size: 20px;
}

#content.settings .devices .icon.i-icon-deviceIcon {
    width: 15px;
    height: 15px;
    margin-left: 0;
}

#content.settings .devices .item {
    float: left;
    width: 195px;
    color: #9ea9bb;
    margin-right: 20px;
}

#content.settings .devices .item:last-child {
    margin-right: 0;
}

#content.settings .devices .item img {
    width: 75px;
    height: 65px;
    margin-right: 15px;
}

#content.settings .devices .item .attemptCount {
    font-size: 35px;
    font-weight: 600;
}

#content.settings .devices .item .commAttemptContent {
    font-size: 16px;
}

#content.settings .devices .custom-device-list .listItem.header .col {
    font-size: 14px !important;
    color: #8c8c8c;
}

#content.settings .devices .custom-device-list .listItem.header .col:first-child {
    font-size: 14px !important;
    color: #616161;
    width: 29%;
}

#content.settings .devices .custom-device-list .listItem .col {
    margin-left: 0;
}

#content.settings .devices .custom-device-list .listItem.header .col:nth-child(3) {
    width: 20%;
}

#content.settings .devices .custom-device-list .listItem {
    height: auto;
    padding: 6px 0;
}

#content.settings .devices .custom-device-list .listItem .status {
    top: 0;
    height: 100%;
}

#content.settings .devices .custom-device-list .listItem .deviceName {
    display: block;
    margin-left: 23px;
}

#content.settings .devices .custom-device-list .listItem .default {
    margin-left: 5px;
}

/* sanal donanım için eklenilen css kodları
-------------------------------------------
*/
#content.settings .devices .custom-device-list .listItem {
    height: auto;
    padding: 6px 0;
}

#content.settings .devices .custom-device-list .listItem .status {
    top: 0;
    height: 100%;
}

#content.settings .devices .custom-device-list .listItem .deviceName {
    display: block;
    margin-left: 23px;
}

#content.settings .devices .custom-device-list .listItem .default {
    margin-left: 5px;
}

#content.settings .devices .custom-device-list .listItem {
    padding: 0;
    background: transparent;
}

#content.settings .devices .custom-device-list .listItem .il-inner .col:first-child {
    width: 34.2%;
}

#content.settings .devices .custom-device-list .listItem .virtual-counter.one-hardware::before {
    height: calc(100% - 10px);
    top: -8px !important;
}

#content.settings .devices .custom-device-list .listItem .virtual-counter {
    margin-top: 8px;
    margin-left: 70px;
    background-color: #f8f8f8;
    position: relative;
    padding: 5px 0;
    color: #616161;
    font-size: 14px;
    border-radius: 3px;
}

#content.settings .devices .custom-device-list .listItem .virtual-counter:last-child::before {
    top: -18px;
}

#content.settings .devices .custom-device-list .listItem .virtual-counter::before,
#content.settings .devices .custom-device-list .listItem .virtual-counter::after {
    content: "";
    position: absolute;
    left: -35px;
    top: -7px;
}

#content.settings .devices .custom-device-list .listItem .virtual-counter::before {
    background-color: #898989;
    width: 2px;
    height: 100%;
    padding-bottom: 8px;
}

#content.settings .devices .custom-device-list .listItem .virtual-counter:last-child::before {
    padding-bottom: 0;
}

#content.settings .devices .custom-device-list .listItem .virtual-counter::after {
    background-color: #898989;
    height: 2px;
    width: 35px;
    bottom: 18px;
    top: inherit;
}

#content.settings .devices .custom-device-list .listItem .virtual-counter .icon {
    vertical-align: middle;
    width: 45px;
    display: inline-block;
}

#content.settings .devices .custom-device-list .listItem .virtual-counter span>span {
    display: inline-block;
    width: 180px;
}

#content.settings .devices .custom-device-list .listItem.listHover {
    background-color: transparent;
}

#content.settings .devices .custom-device-list .p-relative,
#content.settings .devices .custom-device-list .deviceName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 190px;
}

#content.settings .devices .custom-device-list .deviceName.deviceEPCModel label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 115px;
}

#content.settings .devices .custom-device-list .accordion-wrap .sub-devices-wrap {
    display: none;
}

#content.settings .devices .custom-device-list .accordion-wrap .il-inner>div .deviceName {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#content.settings .devices .custom-device-list .accordion-wrap .il-inner>div .deviceName button {
    background-color: #ececec;
    line-height: 100%;
    color: #616161;
    border: 0;
    cursor: pointer;
    padding: 7px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    outline: none;
    position: relative;
    background-repeat: no-repeat;
}

#content.settings .devices .custom-device-list .accordion-wrap .il-inner>div .deviceName button i {
    width: 19px;
    height: 14px;
    background-size: 100%;
}

#content.settings .devices .custom-device-list .accordion-wrap .il-inner>div .deviceName button::after {
    content: "\2BC6";
    position: absolute;
    right: 3px;
    font-size: 14px;
    margin-top: -7px;
    top: 50%;
    line-height: 100%;
}

#content.settings .devices .custom-device-list .accordion-wrap .il-inner>div .deviceName button.active::after {
    transform: rotate(-180deg);
}

#content.settings .list .listItem .il-inner {
    position: relative;
    background-color: #f8f8f8;
    padding: 5px 0;
    border-radius: 3px;
}

#content.settings .list .listItem .il-inner .menu {
    width: 32px;
}

/* ------------------------------------------- */

/*============================================================*/
/*
*   Facility Report
*/
#content.facilityReport .updateTime {
    display: none;
}

#content.facilityReport .facilityReportSection.facilityReportDetail {
    height: 243px;
}

#content.facilityReport .sections {
    margin-bottom: -10px;
}

#content.facilityReport .sections2 {
    margin-top: 20px;
}

#content.facilityReport .noCompanyError {
    height: 328px !important;
}

#content.facilityReport .noDeviceError {
    height: 328px !important;
}

#content.facilityReport .buttons .select {
    float: left !important;
}

#content.facilityReport .buttons .button {
    float: left;
    margin: 0 10px;
    font-size: 15px;
    color: #b6bfce;
    padding: 6px;
    border-radius: 26px;
    cursor: pointer;
    margin-top: -10px;
    display: table;
}

#content.facilityReport .buttons .button img {
    float: left;
}

#content.facilityReport .buttons .button span {
    width: 60px;
    vertical-align: middle;
    padding-left: 7px;
    padding-top: 5px;
    display: table-cell;
}

#content.facilityReport .buttons .button:hover span {
    color: #ffcd00;
}

#content.facilityReport .buttons .button.disable {
    opacity: 0.4;
    cursor: default;
}

#content.facilityReport .datePickerSelect {
    float: left;
    margin: 0 10px;
    width: 136px;
    font-size: 16px;
    color: #b6bfce;
    height: 28px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    cursor: pointer;
    cursor: pointer;
    position: relative;
}

#content.facilityReport .facilityReportConsumptionSummary .switchContainerSlider {
    float: right;
    margin-top: -5px;
    margin-right: 50px;
}

#content.facilityReport .facilityReportConsumptionSummary .select {
    width: auto;
}

#content.facilityReport .facilityReportConsumptionSummary .select .selectedOption {
    margin-left: 0;
}

#content.facilityReport .datePickerSelect .selectedOption {
    float: left;
    text-align: center;
    color: #b6bfce;
    width: 110px;
    font-size: 15px;
}

#content.facilityReport .datePickerSelect .selectedOption {
    font-size: 13px;
}

#content.facilityReport .datePickerSelect .datePickerArea {
    display: none;
    position: absolute;
    top: 42px;
    right: 0;
    background-color: #ffcd00;
    border-radius: 6px;
}

#content.facilityReport .datePickerSelect .datePickerArea .select {
    display: none;
    width: 100px;
    background-color: #ffffff;
}

#content.facilityReport .datePickerSelect .datePickerArea .select.active {
    display: block;
}

#content.facilityReport .datePickerSelect .datePickerArea .selectedOption {
    width: 82px;
}

#content.facilityReport .datePickerSelect::after {
    content: "";
    width: 11px;
    height: 11px;
    position: absolute;
    top: 9px;
    right: 15px;
    opacity: 0.3;
    background-size: contain;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhBxUONxE0ArT2AAAAq0lEQVRIx+3MLRKCUBSG4RcjYza4BYkWHaLBLRlcjMVKsZrcAA0DwyYsOoZjgPGPe+GcGxwDXzonPC8M+49FJEQBbsYIYM4ZoWBlwktyhJIFZAiCcGWt5imXRh2gak594sWFCjbPR5d458IWYo6GxCc/MQZLwsn1CS/XJTp5f6KXdydU3J9Qc3fCxF0JI28nzNyXMHBXwsi/EwG8Tuy4cWcfxutNmIbjYb/aA2JvzPaI51TvAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA3LTIxVDE0OjU1OjE3KzAyOjAwRgbx7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNy0yMVQxNDo1NToxNyswMjowMDdbSVMAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC);
}

#content .section.facilityReportSection {
    width: 98%;
    margin-left: 1%;
    min-height: 100px;
    position: relative;
}

#content .section.facilityReportSection.half {
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
}

#content .section.facilityReportSection .facilityReportSectionHead {
    float: left;
    position: relative;
    width: 100%;
    width: calc(100% - 32px);
    width: -webkit-calc(100% - 32px);
    padding: 10px 16px;
    padding-bottom: 2px;
    padding-top: 5px;
}

#content .section.facilityReportSection .facilityReportSectionHead .updateTime,
.section.facilityReportSectionInstantValues .updateTime {
    float: left;
    width: 100%;
    color: #9da8bc;
    font-size: 12px;
}

.instantValuesPopup .section.facilityReportSection .facilityReportSectionHead .updateTime,
.section.facilityReportSectionInstantValues .updateTime {
    width: auto;
}

#content .section.facilityReportSection .facilityReportSectionHead .updateTime b,
.section.facilityReportSectionInstantValues .updateTime b {
    font-weight: 500;
}

#content .section.facilityReportSection .facilityReportSectionHead .sectionHeadContent,
.section.facilityReportSectionInstantValues .sectionHeadContent {
    float: left;
    padding: 10px 0;
    height: 24px;
    cursor: pointer;
}

#content .section.facilityReportSection .facilityReportSectionHead .sectionHeadContent i,
.section.facilityReportSectionInstantValues .sectionHeadContent i {
    float: left;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
}

#content .section.facilityReportSection .facilityReportSectionHead .sectionHeadContent .sectionHeadTitle,
.section.facilityReportSectionInstantValues .sectionHeadContent .sectionHeadTitle {
    float: left;
    color: #b9a24c;
    font-weight: 500;
    font-size: 18px;
    white-space: nowrap;
    max-width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#content .section.facilityReportSection .dashboardLoader,
.section.facilityReportSectionInstantValues .dashboardLoader {
    background-image: url(/assets/img/dashboard_loader.gif);
    width: 100%;
    height: 100%;
    height: 60%;
    min-height: 200px;
    background-size: contain;
    float: left;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.facilityReportSection.facilityReportConsumptionSummary .dashboardLoader {
    margin-top: 50px;
    height: 200px;
}

#content .section.facilityReportSection.facilityReportSectionStepMaintenance .dashboardLoader {
    margin-top: 50px;
    height: 200px;
}

#content .section.facilityReportSection.facilityReportSectionEnergyQuality .dashboardLoader {
    margin-top: 50px;
    height: 200px;
}

#content .section .dashboardLoader {
    background-image: url(/assets/img/dashboard_loader.gif);
    display: block;
    width: 100%;
    height: 100%;
    height: -webkit-calc(100% - 76px);
    height: calc(100% - 76px);
    background-size: contain;
    float: left;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.facilityReportSection .facilityReportSectionHead .buttons .button {
    float: left;
    margin: 0 10px;
    width: 120px;
    text-align: center;
    font-size: 16px;
    color: #b6bfce;
    padding: 8px 8px;
    border: 1px solid #ffcd00;
    border-radius: 26px;
    cursor: pointer;
    background-color: #ffffff;
}

#content .section.facilityReportSection .facilityReportSectionHead .buttons .button.disable {
    opacity: 0.5;
}

#content .section.facilityReportSection.facilityReportSection .facilityDetailInner {
    display: table;
    margin: 0 auto;
    position: relative;
    padding-left: 5px;
}

#content .section.facilityReportSection.facilityReportSection .facilityDetailInner .facilityDetailListSection {
    float: left;
    width: 520px;
    display: table;
    margin: 0 19px;
    margin-bottom: 32px;
}

#content .section.facilityReportSection.facilityReportSection .facilityDetailInner .facilityDetailListSection .facilityDetailListSectionItem {
    float: left;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 5px;
}

#content .section.facilityReportSection.facilityReportSection .facilityDetailInner .facilityDetailListSection .facilityDetailListSectionItem .key {
    float: left;
    padding: 10px;
    font-size: 16px;
    color: rgb(157, 168, 188);
    width: 120px;
    background-color: #f7f7f7;
    margin-right: 5px;
    padding-left: 10px;
    border-radius: 5px 0 0 5px;
}

#content .section.facilityReportSection.facilityReportSection .facilityDetailInner .facilityDetailListSection .facilityDetailListSectionItem .val {
    float: left;
    padding: 10px;
    font-size: 16px;
    color: #a7a8ad;
    width: 350px;
    background-color: #f7f7f7;
    padding-left: 10px;
    border-radius: 0 5px 5px 0;
}

#content .section.facilityReportSection .commonResourceDropdown {
    position: relative;
    z-index: 100;
}

.section.facilityReportSectionInstantValues .dashboardLoader {
    margin-top: -320px;
    height: 200px !important;
}

.section.facilityReportSectionInstantValues.error .table-view {
    background-size: 1137px 522px !important;
    background-repeat: no-repeat;
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/instantDataBlurBackground.png);
}

.virtualDeviceWarning,
.EPCWarning {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    font-size: 20px;
    background-size: 1109px 445px;
    background-position-y: 20px;
    background-position-x: 24px;
    background-repeat: no-repeat;
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/instantDataBlurBackground.png);
}

.virtualDeviceWarning .i-maps-warning-e2,
.EPCWarning .i-maps-warning-e2 {
    display: flex;
    height: 80px;
    margin-bottom: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.section.facilityReportSectionInstantValues .sectionContent::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
}

.section.facilityReportSectionInstantValues .sectionContent::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #adadad;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.section.facilityReportSectionInstantValues .sectionContent::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #dddddd;
}

.section.facilityReportSectionInstantValues .sectionError {
    display: none;
    margin-top: -130px;
    padding-bottom: 55px;
}

.section.facilityReportSectionInstantValues.error .sectionError {
    display: block;
}

.section.facilityReportConsumptionSummary .sectionError .errorContent,
.section.facilityReportSectionInstantValues .sectionError .errorContent {
    display: table;
    max-width: 1000px;
    padding-bottom: 10px;
}

.section.facilityReportConsumptionSummary .sectionError .errorContent .errorIcon,
.section.facilityReportSectionInstantValues .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

.section.facilityReportConsumptionSummary .sectionError .errorContent .errorIcon i,
.section.facilityReportSectionInstantValues .sectionError .errorContent .errorIcon i {
    float: left;
    width: 80px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.section.facilityReportConsumptionSummary .sectionError .errorContent .errorTitle,
.section.facilityReportSectionInstantValues .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}

.section.facilityReportConsumptionSummary .sectionError .errorContent .errorDesc,
.section.facilityReportSectionInstantValues .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

.section.facilityReportSectionInstantValues {
    height: auto;
}

.section.facilityReportSectionInstantValues table {
    border-spacing: 5px;
    border-collapse: separate;
    padding: 0 0px 0 37px;
    color: #686868;
    font-size: 15px;
}

.section.facilityReportSectionInstantValues .sectionContent {
    width: calc(100% - 20px);
    max-height: 365px;
    min-height: 365px;
    overflow-y: auto;
}

.section.facilityReportSectionInstantValues .sectionContent table {
    margin-top: -5px;
    overflow: hidden;
}

.section.facilityReportSectionInstantValues .facilityReportSectionHead {
    margin-bottom: 15px;
}

.section.facilityReportSectionInstantValues .sectionHeaderContent {
    width: calc(100% - 20px);
}

.section.facilityReportSectionInstantValues .filterContent {
    width: calc(100% - 70px);
    display: block;
    margin: 0 0 0 38px;
}

.section.facilityReportSectionInstantValues .tabs {
    float: left !important;
    width: calc(100% - 15px) !important;
    margin-top: 0;
}

.section.facilityReportSectionInstantValues .tabs .measurementTypeTab {
    float: right !important;
}

.section.facilityReportSectionInstantValues .sectionHeadContent .threeDotMenuContainer .menu {
    margin-top: 8px;
}

.section.facilityReportSectionInstantValues .sectionHeadContent .threeDotMenuContainer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.2s ease;
}

.section.facilityReportSectionInstantValues .sectionHeadContent .threeDotMenuContainer.show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.facilityReportSectionInstantValues .select.facilityResource {
    width: 280px !important;
    float: right;
    margin-top: -5px;
}

.section.facilityReportSectionInstantValues .select.facilityResource .selectedOption {
    margin-left: 5px;
    text-align: left !important;
    max-width: 260px !important;
}

.section.facilityReportSectionInstantValues .select.facilityResource li {
    padding-left: 9px;
}

.select .options {
    cursor: default;
}

.select .options li {
    cursor: pointer;
}

.section.facilityReportSectionInstantValues .select.facilityResource .groupTitle {
    /*border-bottom: 1px solid #ffcd00;*/
    height: 20px !important;
    padding: 5px;
    color: #ababab;
    margin-top: 10px;
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 1px;
    text-align: left;
    font-weight: bold;
    pointer-events: none;
}

.section.facilityReportSectionInstantValues .select.facilityResource .groupTitle {}

.section.facilityReportSectionInstantValues .select.facilityResource li.groupTitle:hover {
    background-color: transparent !important;
    cursor: initial;
}

.section.facilityReportSectionInstantValues .select.facilityResource li a {
    width: 190px;
}

.section.facilityReportSectionInstantValues table th {
    min-width: 192px;
    background-color: #ebf4f9;
    height: 35px;
    vertical-align: middle;
    color: #444444;
    border-radius: 5px;
}

.section.facilityReportSectionInstantValues table th:first-child {
    width: 285px;
    background-color: transparent;
}

.section.facilityReportSectionInstantValues table td:first-child {
    width: 270px;
}

.section.facilityReportSectionInstantValues table td {
    background-color: #f2f2f2;
    height: 15px;
    padding: 12px 10px 8px 20px;
    vertical-align: middle;
    border-radius: 5px;
    text-align: right;
}

.section.facilityReportSectionInstantValues table td span.loading {
    background-image: url(/assets/img/loading.gif);
    opacity: 0.5;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-top: -10px;
    margin-right: 54px;
    background-repeat: no-repeat;
    background-position-x: right;
}

.section.facilityReportSectionInstantValues table tr.hidden {
    display: none;
}

.section.facilityReportSectionInstantValues table td span:first-child {
    text-align: right;
}

.section.facilityReportSection table td.hover-red,
.section.facilityReportSection table td.hover-green,
.section.facilityReportSection table td.hover-yellow {
    color: #fff !important;
}

.section.facilityReportSection table td.hover-red span,
.section.facilityReportSection table td.hover-green span,
.section.facilityReportSection table td.hover-yellow span {
    color: #fff !important;
}

.section.facilityReportSectionInstantValues table td[colspan="2"] span:last-child {
    min-width: 50px;
    display: inline-block;
    text-align: left;
    margin-left: 5px;
    color: #aaaaaa;
}

.section.facilityReportSectionInstantValues table td:first-child {
    background-color: #ebf4f9;
    color: #444444;
    text-align: left;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 0;
}

.section.facilityReportSectionInstantValues table tr td:first-child span:first-child {
    width: calc(100% - 55px);
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
    word-break: break-word;
}

.section.facilityReportSectionInstantValues table tr td:first-child span:nth-child(2) {
    margin-left: 2px;
    color: #aaaaaa;
    font-size: 11px;
    text-align: left;
    display: inline-block;
    width: 53px;
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
    word-break: break-word;
}

.section.facilityReportSectionInstantValues table tr.digitalSeperatorRow {
    height: 10px;
}

.section.facilityReportSectionInstantValues table tr.digital td:not(:first-child) {
    padding: 5.5px;
}

.section.facilityReportSectionInstantValues table tr.digital .digit {
    width: 16px;
    height: 16px;
    border: 4px solid rgba(255, 255, 255, 0.5);
    background-color: transparent;
    border-radius: 100%;
    float: right;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    margin-left: -2px;
}

.section.facilityReportSectionInstantValues table tr.digital .digit.off {
    background-color: #b8c5d8;
}

.section.facilityReportSectionInstantValues table tr.digital .digit.on {
    background-color: #bad602;
}

@keyframes digitFlashing {

    /* yeşil */
    0% {
        background-color: #bad602;
    }

    60% {
        background-color: #bad602;
    }

    /* gri */
    65% {
        background-color: #b8c5d8;
    }

    100% {
        background-color: #b8c5d8;
    }
}

.section.facilityReportSectionInstantValues table tr.digital .digit.flashing {
    animation: digitFlashing 1.75s ease-in infinite;
    background-color: #b8c5d8;
}

.section.facilityReportSectionInstantValues table tr.digital .prmAndState {
    width: 60px;
    height: 25px;
    float: left;
}

.section.facilityReportSectionInstantValues table tr.digital .state {
    color: #aaaaaa;
    width: 60px;
    height: 10px;
    text-align: left;
    font-size: 8px;
}

.section.facilityReportSectionInstantValues table tr.digital .digitPrm {
    width: 60px;
    height: 12px;
    float: left;
    text-align: left;
    font-size: 11px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*datatable tüketim özeti*/
.section.dashboardConsumptionSummary {
    height: auto;
}

.section.dashboardConsumptionSummary table {
    border-spacing: 5px;
    font-weight: 500;
    border-collapse: separate;
    color: #686868;
    font-size: 15px;
}

.section.dashboardConsumptionSummary .sectionContent {
    width: calc(100% - 20px);
    max-height: 365px;
    min-height: 365px;
    overflow-y: auto;
}

.section.dashboardConsumptionSummary .sectionContent table {
    margin-top: -5px;
    overflow: hidden;
}

.section.dashboardConsumptionSummary .facilityReportSectionHead {
    margin-bottom: 15px;
}

.section.dashboardConsumptionSummary .sectionHeaderContent {
    width: calc(100% - 20px);
}

.section.dashboardConsumptionSummary table th {
    min-width: auto;
    background-color: #ebf4f9;
    height: 35px;
    vertical-align: middle;
    border-radius: 5px;
}

.section.dashboardConsumptionSummary table th:first-child {
    width: 170px;
}

.section.dashboardConsumptionSummary table td {
    background-color: #f2f2f2;
    height: 15px;
    min-width: 153px;
    padding: 12px 10px 8px 20px;
    vertical-align: middle;
    border-radius: 5px;
    text-align: right;
}

.section.dashboardConsumptionSummary table td span.loading {
    background-image: url(/assets/img/loading.gif);
    opacity: 0.5;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-top: -10px;
    margin-right: 54px;
    background-repeat: no-repeat;
    background-position-x: right;
}

.section.dashboardConsumptionSummary table tr.hidden {
    visibility: collapse;
}

.section.dashboardConsumptionSummary table td span:first-child {
    text-align: right;
}

.section.dashboardConsumptionSummary table td.hover-red,
.section.dashboardConsumptionSummary table td.hover-green,
.section.dashboardConsumptionSummary table td.hover-yellow {
    color: #fff !important;
}

.section.dashboardConsumptionSummary table td.hover-red span,
.section.dashboardConsumptionSummary table td.hover-green span,
.section.dashboardConsumptionSummary table td.hover-yellow span {
    color: #fff !important;
}

.section.dashboardConsumptionSummary table td[colspan="2"] span:last-child {
    min-width: 50px;
    display: inline-block;
    text-align: left;
    margin-left: 5px;
    color: #aaaaaa;
}

.section.dashboardConsumptionSummary table td:first-child {
    background-color: #ebf4f9;
    text-align: left;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 0;
}

.section.dashboardConsumptionSummary table tr td:first-child span:first-child {
    width: calc(100% - 55px);
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
    word-break: break-word;
}

.section.dashboardConsumptionSummary table tr td:first-child span:nth-child(2) {
    margin-left: 2px;
    color: #aaaaaa;
    font-size: 11px;
    text-align: left;
    display: inline-block;
    width: 53px;
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
    word-break: break-word;
}

.section.dashboardConsumptionSummary table tr.digitalSeperatorRow {
    height: 10px;
}

.section.dashboardConsumptionSummary table tr.digital td:not(:first-child) {
    padding: 5.5px;
}

.section.dashboardConsumptionSummary table tr.digital .digit {
    width: 16px;
    height: 16px;
    border: 4px solid rgba(255, 255, 255, 0.5);
    background-color: transparent;
    border-radius: 100%;
    float: right;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    margin-left: -2px;
}

.section.dashboardConsumptionSummary table tr.digital .digit.off {
    background-color: #b8c5d8;
}

.section.dashboardConsumptionSummary table tr.digital .digit.on {
    background-color: #bad602;
}

.section.dashboardConsumptionSummary table tr.digital .prmAndState {
    width: 60px;
    height: 25px;
    float: left;
}

.section.dashboardConsumptionSummary table tr.digital .state {
    color: #aaaaaa;
    width: 60px;
    height: 10px;
    text-align: left;
    font-size: 8px;
}

.section.dashboardConsumptionSummary table tr.digital .digitPrm {
    width: 60px;
    height: 12px;
    float: left;
    text-align: left;
    font-size: 11px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*-------------*/
/*#content .section.facilityReportSectionInstantValues table tr td:first-child span:nth-child(2){
margin-left:2px;
color:#aaaaaa;
font-size: 11px;
}*/
.section.facilityReportSectionInstantValues .updateTime {
    display: block !important;
    text-align: right;
    margin-top: 5px;
    padding-top: 12px;
    margin-bottom: -50px;
}

.section.facilityReportSectionInstantValues .updateTime span {
    display: inline;
}

.section.facilityReportSectionInstantValues .updateTime span:nth-child(2) {
    font-weight: bold;
    display: inline-block;
    margin-left: 5px;
}

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* facilityReportConsumptionSummary */
#content .section.facilityReportConsumptionSummary {
    height: 457px;
}

#content .section.facilityReportConsumptionSummary .targets {
    width: 500px;
}

#content .section.facilityReportConsumptionSummary.error {
    background-image: url(/assets/img/facilityReportConsumptionSummaryBlur.jpg);
    background-size: 1137px 394px;
    background-position-y: 52px;
    background-position-x: 10px;
    background-repeat: no-repeat;
}

#content .section.facilityReportConsumptionSummary svg {
    margin: 30px 0;
}

#content .section.facilityReportConsumptionSummary .dravArea {
    fill: #fff;
}

#content .section.facilityReportConsumptionSummary .rowRect {
    fill: rgba(0, 0, 0, 0);
}

#content .section.facilityReportConsumptionSummary .rowText {
    fill: #b6bfce;
    font-family: "roboto";
    font-size: 11px;
    font-weight: 500;
}

#content .section.facilityReportConsumptionSummary .rowLine {
    fill: none;
    stroke: #e5f3f7;
    stroke-miterlimit: 10;
}

#content .section.facilityReportConsumptionSummary .col {}

#content .section.facilityReportConsumptionSummary .col rect {
    fill: rgba(0, 0, 0, 0);
}

#content .section.facilityReportConsumptionSummary .col .colLine {
    fill: none;
    stroke: #e5f3f7;
    stroke-miterlimit: 10;
}

#content .section.facilityReportConsumptionSummary .col .colText {
    fill: #b6bfce;
    font-family: "roboto";
    font-size: 13px;
    font-weight: 500;
}

/* Reactive Rates */
#content .section .reactiveRates.noCompanyError {
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/reactive-rates.png) no-repeat;
}

#content .section.facilityReportReactiveRates {
    height: 323px;
}

#content .section.facilityReportReactiveRates .charts {
    float: left;
    width: 100%;
    display: table;
}

#content .section.facilityReportReactiveRates .charts .chart {
    float: left;
    width: 50%;
    display: table;
    padding: 18px 0;
}

#content .section.facilityReportReactiveRates .charts .chart .chartContent {
    float: left;
    width: 100%;
    display: table;
}

#content .section.facilityReportReactiveRates .charts .chart .chartContent svg {
    display: table;
    margin: 0 auto;
}

#content .section.facilityReportReactiveRates .charts .chart .chartName {
    float: left;
    text-align: center;
    width: 100%;
    color: #9da8bc;
    font-weight: 500;
    font-size: 13px;
    margin: 0;
    margin-bottom: 10px;
}

#content .section.facilityReportReactiveRates .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.facilityReportReactiveRates .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.facilityReportReactiveRates .howToDoWrapper.type-2 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.facilityReportReactiveRates .howToDoWrapper.type-2 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.facilityReportReactiveRates .howToDoWrapper.type-2 .howToDo .text {
    color: #616161 !important;
}

#content .section.facilityReportReactiveRates .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px 0;
}

#content .section.facilityReportReactiveRates .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.facilityReportReactiveRates .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.facilityReportReactiveRates .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.facilityReportReactiveRates .howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

#content .section.facilityReportReactiveRates .empty {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #989898;
    font-weight: 500;
    font-size: 17px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.4;
}

/* Step Maintenance */
#content .section.facilityReportSectionStepMaintenance {
    height: 431px;
}

#content .section.facilityReportSectionStepMaintenance .targets {
    width: 320px !important;
}

#content .section.facilityReportSectionStepMaintenance .targets li {
    width: 100px !important;
}

#content .section.facilityReportSectionStepMaintenance .total {
    float: right;
    height: 29px;
    margin-right: 12px;
}

#content .section.facilityReportSectionStepMaintenance .total i {
    float: left;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
}

#content .section.facilityReportSectionStepMaintenance .total a {
    float: left;
    color: #9da8bc;
    margin-left: 8px;
    font-size: 14px;
}

#content .section.facilityReportSectionStepMaintenance .tubesWrapper {
    float: left;
    width: 100%;
    margin-top: 24px;
}

#content .section.facilityReportSectionStepMaintenance .tubes {
    margin: 0 auto;
    display: table;
}

#content .section.facilityReportSectionStepMaintenance .tubes .tube {
    float: left;
    width: 150px;
    height: 284px;
    margin-right: 12px;
    position: relative;
}

#content .section.facilityReportSectionStepMaintenance .tubes .tube:last-child {
    margin-right: 0;
}

#content .section.facilityReportSectionStepMaintenance .tubes .tube::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    width: 1px;
    height: 120px;
    background-color: #e5e9f2;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

#content .section.facilityReportSectionStepMaintenance .tubes .tube:last-child:after {
    content: "";
    display: none;
}

#content .section.facilityReportSectionStepMaintenance .tubes .tube .tubeInner {
    float: left;
    width: 100%;
    height: 100%;
}

#content .section.facilityReportSectionStepMaintenance .tubes .tube .tubeInner .tubeContent {
    margin: 0 auto;
    width: 80px;
}

#content .section.facilityReportSectionStepMaintenance .tubes .tube .tubeInner .tubeContent svg {
    width: 80px !important;
    height: 237.14px !important;
}

#content .section.facilityReportSectionStepMaintenance .tubes .tube .tubeDetail {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.15);
    width: 96px;
    height: 128px;
    top: 86px;
    left: 27px;
    border-radius: 10px;
}

#content .section.facilityReportSectionStepMaintenance .tubes .tube .tubeDetail .tubeCount {
    text-align: center;
    margin: 8px 0;
    margin-top: 13px;
    color: #fff;
    font-size: 50px;
}

#content .section.facilityReportSectionStepMaintenance .tubes .tube .tubeDetail .text {
    text-align: center;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

#content .section.facilityReportSectionStepMaintenance .sectionError {
    float: left;
    width: 100%;
    height: 367px;
    background: url(/assets/img/stepMaintenancePageBlur.jpg) 10px 0px no-repeat;
    background-size: 550px 367px;
}

#content .section.facilityReportSectionStepMaintenance .sectionError .errorContent {
    display: table;
    max-width: 1000px;
    padding-bottom: 10px;
}

#content .section.facilityReportSectionStepMaintenance .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.facilityReportSectionStepMaintenance .sectionError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.facilityReportSectionStepMaintenance .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}

#content .section.facilityReportSectionStepMaintenance .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.facilityReportSectionStepMaintenance .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.facilityReportSectionStepMaintenance .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.facilityReportSectionStepMaintenance .howToDoWrapper.type-2 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.facilityReportSectionStepMaintenance .howToDoWrapper.type-2 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.facilityReportSectionStepMaintenance .howToDoWrapper.type-2 .howToDo .text {
    color: #616161 !important;
}

#content .section.facilityReportSectionStepMaintenance .howToDoWrapper {
    display: none;
    float: left;
    width: 100%;
    margin: 8px 0;
    margin-top: 36px;
}

#content .section.facilityReportSectionStepMaintenance .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.facilityReportSectionStepMaintenance .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.facilityReportSectionStepMaintenance .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.facilityReportSectionStepMaintenance .howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

/* Energy Quality */
#content .section .energyQuality.noCompanyError {
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/energy-quality.png) 10px -6px;
}

#content .section.facilityReportSectionEnergyQuality {
    height: 431px;
}

#content .section.facilityReportSectionEnergyQuality .sectionError {
    float: left;
    width: 100%;
    height: 367px;
    background-image: url(/assets/img/energyQualityReportPageBlurBackground.jpg);
    background-size: 548px 367px;
    background-position-x: 10px;
    background-repeat: no-repeat;
}

#content .section.facilityReportSectionEnergyQuality .sectionError .errorContent {
    display: table;
    max-width: 1000px;
    padding-bottom: 10px;
}

#content .section.facilityReportSectionEnergyQuality .sectionError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.facilityReportSectionEnergyQuality .sectionError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.facilityReportSectionEnergyQuality .sectionError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}

#content .section.facilityReportSectionEnergyQuality .sectionError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.facilityReportSectionEnergyQuality .indicators {
    float: left;
    width: 100%;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator {
    float: left;
    width: 200px;
    height: 159px;
    margin: 0 41px;
    position: relative;
    padding-bottom: 10px;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .indicatorContent {
    overflow: hidden;
    height: 120px;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .indicatorName {
    color: #9da8bc;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 5px 0;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .indicatorValue {
    color: #9da8bc;
    float: left;
    width: 36%;
    text-align: center;
    font-size: 16px;
    padding: 5px 0;
    font-weight: bold;
    border: 2px solid #ffcd00;
    border-radius: 25px;
    margin-top: -8px;
    margin-left: 30%;
}

#content .section.facilityReportSectionEnergyQuality .howToDoWrapper {
    float: left;
    width: 100%;
    margin: 8px 0;
    display: none;
}

#content .section.facilityReportSectionEnergyQuality .howToDo {
    margin: 0 auto;
    background-color: #faad1496;
    width: 120px;
    height: 22px;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
}

#content .section.facilityReportSectionEnergyQuality .howToDo span {
    background-color: #faad14;
    width: 33px;
    height: 33px;
    display: block;
    position: absolute;
    top: -6px;
    border-radius: 32px;
    box-shadow: 3px 0.2px 4px 0 rgba(0, 0, 0, 0.14);
}

#content .section.facilityReportSectionEnergyQuality .howToDo span i {
    display: block;
    width: 5px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

#content .section.facilityReportSectionEnergyQuality .howToDo .text {
    color: #fefbfb;
    font-size: 10px;
    text-align: center;
    margin-left: 30px;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .howToDoWrapper.type-1 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .howToDoWrapper.type-1 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .howToDoWrapper.type-2 .howToDo {
    background-color: #faad1496 !important;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .howToDoWrapper.type-2 .howToDo span {
    background-color: #faad14 !important;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .howToDoWrapper.type-2 .howToDo .text {
    color: #616161 !important;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .howToDoWrapper.type-3 .howToDo {
    background-color: #999999 !important;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .howToDoWrapper.type-3 .howToDo span {
    background-color: #999999 !important;
}

#content .section.facilityReportSectionEnergyQuality .indicators .indicator .indicatorDesc {
    display: none;
    color: #9da8bc;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 5px 0;
}

#content .section.facilityReportSectionEnergyQuality .indicatorError {
    float: left;
    width: 100%;
}

#content .section.facilityReportSectionEnergyQuality .indicatorError .errorContent {
    display: table;
    max-width: 1000px;
    margin-top: 24px;
    padding-bottom: 10px;
}

#content .section.facilityReportSectionEnergyQuality .indicatorError .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.facilityReportSectionEnergyQuality .indicatorError .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.facilityReportSectionEnergyQuality .indicatorError .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}

#content .section.facilityReportSectionEnergyQuality .indicatorError .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.facilityReportSectionEnergyQuality svg {
    width: 200px !important;
}

/*============================================================*/
@-webkit-keyframes loading-animation {

    0%,
    100% {
        -webkit-transform: translate(-34px, 0);
        transform: translate(-34px, 0);
    }

    50% {
        -webkit-transform: translate(96px, 0);
        transform: translate(96px, 0);
    }
}

@keyframes loading-animation {

    0%,
    100% {
        -webkit-transform: translate(-34px, 0);
        transform: translate(-34px, 0);
    }

    50% {
        -webkit-transform: translate(96px, 0);
        transform: translate(96px, 0);
    }
}

#loaderWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

#loader {
    position: fixed;
    border-radius: 5px;
    width: 150px;
    top: 200px;
    left: 50%;
    z-index: 1002;
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#loader .logo {
    float: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

#loader .logo img {
    margin: 0 auto;
    display: table;
    width: calc(100% - 40px);
}

#loader .loadAnimationBar {
    float: left;
    width: 80%;
    height: 2px;
    margin: 20px auto;
    margin-left: 10%;
    border-radius: 2px;
    background-color: #ddd;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#loader .loadAnimationBar .loadAnimationInnerBar {
    height: 100%;
    width: 68px;
    position: absolute;
    background-color: #ffcd00;
    border-radius: 2px;
    -webkit-animation: loading-animation 1.5s infinite ease;
    animation: loading-animation 1.5s infinite ease;
}

/*============================================================*/
#whatShouldIDoPopupWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1000;
}

#whatShouldIDoPopup {
    position: fixed;
    width: 640px;
    min-height: 260px;
    padding-bottom: 32px;
    background: #ffffff;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    z-index: 1002;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0px 4.5px 17px 0 rgba(7, 41, 60, 0.3);
}

#whatShouldIDoPopup .icon {
    position: absolute;
    top: -60px;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    background-color: #ffcd00;
    color: #ffffff;
    font-weight: 500;
    font-size: 120px;
    text-align: center;
}

#whatShouldIDoPopup .icon.alarmCategory0 {
    background-color: #ffcd00;
}

#whatShouldIDoPopup .icon.alarmCategory1 {
    background-color: #ffcd00;
}

#whatShouldIDoPopup input.mailAddressMultiple.error {
    border-style: solid !important;
    border-width: 1.5px !important;
    border-color: #d63737 !important;
    transition-property: border-color;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    background-size: 11px;
    background-position: calc(100% - 8px) 7px !important;
    background-repeat: no-repeat !important;
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MDcuMiA1MDcuMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTA3LjIgNTA3LjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8Y2lyY2xlIHN0eWxlPSJmaWxsOiNGMTUyNDk7IiBjeD0iMjUzLjYiIGN5PSIyNTMuNiIgcj0iMjUzLjYiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0FEMEUwRTsiIGQ9Ik0xNDcuMiwzNjhMMjg0LDUwNC44YzExNS4yLTEzLjYsMjA2LjQtMTA0LDIyMC44LTIxOS4yTDM2Ny4yLDE0OEwxNDcuMiwzNjh6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzczLjYsMzA5LjZjMTEuMiwxMS4yLDExLjIsMzAuNCwwLDQxLjZsLTIyLjQsMjIuNGMtMTEuMiwxMS4yLTMwLjQsMTEuMi00MS42LDBsLTE3Ni0xNzYgIGMtMTEuMi0xMS4yLTExLjItMzAuNCwwLTQxLjZsMjMuMi0yMy4yYzExLjItMTEuMiwzMC40LTExLjIsNDEuNiwwTDM3My42LDMwOS42eiIvPgo8cGF0aCBzdHlsZT0iZmlsbDojRDZENkQ2OyIgZD0iTTI4MC44LDIxNkwyMTYsMjgwLjhsOTMuNiw5Mi44YzExLjIsMTEuMiwzMC40LDExLjIsNDEuNiwwbDIzLjItMjMuMmMxMS4yLTExLjIsMTEuMi0zMC40LDAtNDEuNiAgTDI4MC44LDIxNnoiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik0zMDkuNiwxMzMuNmMxMS4yLTExLjIsMzAuNC0xMS4yLDQxLjYsMGwyMy4yLDIzLjJjMTEuMiwxMS4yLDExLjIsMzAuNCwwLDQxLjZMMTk3LjYsMzczLjYgIGMtMTEuMiwxMS4yLTMwLjQsMTEuMi00MS42LDBsLTIyLjQtMjIuNGMtMTEuMi0xMS4yLTExLjItMzAuNCwwLTQxLjZMMzA5LjYsMTMzLjZ6Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
}

#whatShouldIDoPopup input.mailAddressMultiple::placeholder,
#whatShouldIDoPopup input.mailAddressMultiple::-webkit-input-placeholder {
    color: #cccccc;
}

#whatShouldIDoPopup .inlineError {
    height: 16px;
    color: #e30000;
    font-size: 14px;
    visibility: collapse;
}

#whatShouldIDoPopup .inlineError i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    margin: 0 4px -4px 0;
}

#whatShouldIDoPopup .mailAddressMultiple.error+.inlineError {
    visibility: visible;
}

#whatShouldIDoPopup .title {
    float: left;
    width: 100%;
    text-align: center;
    font-weight: 500;
    color: #616161;
    font-size: 30px;
    margin: 80px 0 40px 0;
}

#whatShouldIDoPopup .desc {
    float: left;
    width: 100%;
    width: calc(100% - 80px);
    width: -webkit-calc(100% - 80px);
    width: calc(100% - 80px);
    padding: 0 40px;
    text-align: center;
    color: #646464;
    font-size: 16px;
    line-height: 1.5;
}

#whatShouldIDoPopup .desc b {
    font-weight: 500;
}

/*============================================================*/
#AdvancedRegisterPopupWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.66);
    z-index: 1000;
}

#AdvancedRegisterPopup {
    position: fixed;
    width: 640px;
    min-height: 260px;
    padding-bottom: 32px;
    background: #ffffff;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    z-index: 1002;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0px 4.5px 17px 0 rgba(7, 41, 60, 0.3);
}

#AdvancedRegisterPopup .title {
    color: #ffcd00;
    float: left;
    width: 100%;
    width: calc(100% - 24px);
    width: -webkit-calc(100% - 24px);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 24px;
    margin-left: 24px;
}

#AdvancedRegisterPopup .desc {
    float: left;
    color: #626262;
    width: 100%;
    width: calc(100% - 24px);
    width: -webkit-calc(100% - 24px);
    font-size: 16px;
    line-height: 1.3;
    margin-top: 16px;
    margin-left: 24px;
}

#AdvancedRegisterPopup .info {
    float: left;
    color: #626262;
    width: 100%;
    width: calc(100% - 24px);
    width: -webkit-calc(100% - 24px);
    font-size: 12px;
    line-height: 1.3;
    margin-top: 16px;
    margin-left: 24px;
}

#AdvancedRegisterPopup .button,
#whatShouldIDoPopup .button {
    float: right;
    width: 200px;
    background-color: #ffcd00;
    height: 42px;
    border-radius: 5px;
    margin-top: 32px;
    margin-right: 24px;
    cursor: pointer;
}

#AdvancedRegisterPopup .button a,
#whatShouldIDoPopup .button a {
    display: table;
    color: #616161;
    font-size: 16px;
    font-weight: 500;
}

/*============================================================*/
#AppPopupWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.66);
    z-index: 1000;
}

#AppPopup {
    position: fixed;
    width: 640px;
    min-height: 260px;
    max-height: 800px;
    overflow: auto;
    background: #ffffff;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    z-index: 1002;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0px 4.5px 17px 0 rgba(7, 41, 60, 0.3);
    color: #626262;
    font-size: 16px;
    line-height: 1.3;
}

#AppPopup p {
    padding: 10px 0;
}

#AppPopup .AppPopupInner {
    float: left;
    width: 100%;
    width: calc(100% - 52px);
    width: -webkit-calc(100% - 52px);
    width: calc(100% - 52px);
    margin: 10px;
    padding: 16px;
    max-height: 748px;
    overflow: auto;
}

#AppPopup .AppPopupInner::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
}

#AppPopup .AppPopupInner::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #adadad;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

#AppPopup .AppPopupInner::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #dddddd;
}

/*============================================================*/
.dialogBoxWrapper {
    position: fixed;
    top: 66px;
    left: 0;
    width: 100%;
    z-index: 100;
    max-height: 500px;
    overflow: auto;
}

.dialogBox {
    float: left;
    width: 100%;
    min-width: 1222px;
    background-color: #03344b;
    height: 66px;
    position: relative;
}

.dialogBox .text {
    float: left;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 500;
}

.dialogBox .close {
    float: right;
    width: 66px;
    height: 100%;
    cursor: pointer;
}

.dialogBox .close:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dialogBox i {
    float: left;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
}

.dialogBox .action {
    float: right;
    height: 28px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 0 24px;
    cursor: pointer;
    margin-right: 12px;
}

.dialogBox .action .actionText {
    color: #03344b;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
}

.dialogBoxWrapper::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 2px;
}

.dialogBoxWrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #adadad;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.dialogBoxWrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #dddddd;
}

/*============================================================*/
/* Payment Form */
.paymentFormPopupWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 220;
    display: block;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.21);
}

.paymentFormPopupWrapper .paymentFormPopup {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #ffffff;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 6px;
    overflow: hidden;
}

#paymentForm {
    width: 420px;
    background: #ededed;
    border-radius: 4px;
    overflow: hidden;
}

#paymentForm .paymentFormSectionTitle {
    float: left;
    width: 100%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    padding: 8px 20px;
    padding-top: 18px;
    font-size: 24px;
    font-weight: 500;
    color: #484848;
}

#paymentForm .form {
    float: left;
    width: 100%;
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    padding: 6px 20px;
}

#paymentForm .form .field {
    float: left;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 4px;
}

#paymentForm .form .field.h {
    float: left;
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
}

#paymentForm .form .field .fieldTitle {
    float: left;
    width: 100%;
    padding: 7px 0;
    font-size: 13px;
    color: #727272;
    font-weight: 500;
}

#paymentForm .form .field input {
    float: left;
    width: 100%;
    width: -webkit-calc(100% - 12px);
    width: calc(100% - 12px);
    height: 32px;
    padding-left: 12px;
    border: none;
    outline: none;
    background-color: #ffffff;
    border-radius: 4px;
    font-family: roboto;
    color: #696969;
    font-weight: 500;
}

#paymentForm .submit {
    float: left;
    width: 98%;
    width: calc(98% - 40px);
    width: -webkit-calc(98% - 40px);
    margin: 14px 20px;
    position: relative;
    left: 1%;
    margin-bottom: 20px;
    font-size: 16px;
    padding: 12px 0;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    background-color: #ffcd00;
    font-weight: 500;
    color: #292929;
}

/*============================================================*/
.app-container {
    width: 100%;
    width: 1182px;
    margin: 0 auto;
    height: 100%;
    padding: 0 20px;
}

.app-container.wide {
    width: calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    min-width: 1182px;
}

.app-container.viewAdminDevices {
    width: 1282px;
}

.app-container.wide.viewAdminDevices {
    min-width: 1282px;
}

.aboutText {
    line-height: 1.6;
    text-align: left;
    font-size: 15px;
    letter-spacing: 0;
    color: #3f3f3f;
    opacity: 1;
}

.aboutText span {
    font-size: 15px;
}

.aboutText ul {
    margin-bottom: 15px;
    padding-left: 30px;
}

.aboutText li::before {
    content: "\2022";
    color: #fbd04b;
    font-weight: bold;
    display: inline-block;
    width: 20px;
    font-size: 20px;
}

.aboutText li {
    list-style: none;
}

.openSourceText {
    line-height: 2.5;
    text-align: left;
    font-size: 15px;
    letter-spacing: 0;
    color: #3f3f3f;
    opacity: 1;
    list-style-type: disc;
}

.dataPolicyText {
    line-height: 2.5;
    text-align: left;
    font-size: 15px;
    letter-spacing: 0;
    color: #3f3f3f;
    opacity: 1;
    list-style-type: disc;
}

.aboutButton {
    background: #fecc2f 0% 0% no-repeat padding-box;
    border: 1px solid #fecc2f;
    border-radius: 25px;
    opacity: 1;
}

.app-center {
    position: relative;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.app-center-vertical {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.app-center-horizantal {
    position: relative;
    left: 50%;
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/*============================================================*/
.ui-widget {
    font-family: roboto !important;
    font-size: 15px !important;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    height: 25px !important;
}

.ui-datepicker.ui-widget.ui-widget-content {
    border: 1px solid #ffcd00 !important;
}

.ui-datepicker-header.ui-widget-header {
    background: rgba(255, 205, 0, 0.65) !important;
}

.ui-datepicker .ui-state-active {
    background: #ffcd00 !important;
    border: 1px solid #999999 !important;
}

.ui-datepicker-month,
.ui-datepicker-year,
.ui-datepicker-month option {
    outline: none !important;
}

.datePicker.monthly .ui-datepicker-calendar,
.datePicker.monthly .ui-datepicker-prev,
.datePicker.monthly .ui-datepicker-next {
    display: none;
}

.datePicker.monthly .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: right !important;
    margin-right: 8px !important;
}

.datePicker.monthly .ui-datepicker-title {
    margin: 0 !important;
}

.datePicker.monthly .ui-datepicker {
    width: 200px !important;
    padding-bottom: 3px;
}

.datePickerArea {
    box-shadow: 0px 10px 32px rgba(136, 136, 136, 0.3);
}

/*===============================================================*/
#TechSupportPopupWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.66);
    z-index: 1000;
}

#TechSupportPopup {
    position: fixed;
    width: 640px;
    min-height: 260px;
    padding-bottom: 32px;
    background: #ffffff;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    z-index: 1002;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0px 4.5px 17px 0 rgba(7, 41, 60, 0.3);
}

#TechSupportPopup .title {
    color: #ffcd00;
    float: left;
    width: 100%;
    width: calc(100% - 24px);
    width: -webkit-calc(100% - 24px);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 24px;
    margin-left: 24px;
}

#TechSupportPopup .desc {
    float: left;
    color: #626262;
    width: 100%;
    width: calc(100% - 24px);
    width: -webkit-calc(100% - 24px);
    font-size: 16px;
    line-height: 1.3;
    margin-top: 16px;
    margin-left: 24px;
}

#TechSupportPopup .button {
    float: right;
    width: 200px;
    background-color: #ffcd00;
    height: 42px;
    border-radius: 5px;
    margin-top: 32px;
    margin-right: 24px;
    cursor: pointer;
}

#TechSupportPopup .button a {
    display: table;
    color: #616161;
    font-size: 16px;
    font-weight: 500;
}

#TechSupportPopupWrapperLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
}

/*===============================================================*/
.cf::after {
    display: block;
    content: "";
    clear: both;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.ul-style {
    margin-left: 15px !important;
    list-style: disc !important;
}

#header .right .button.goAdvancedRegisterBtn {
    float: left;
    width: 170px;
    background-color: #ffcd00;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    display: block;
    margin-right: 10px;
    margin-top: 17px;
    border: 0.5px solid #ddaa00;
}

#header .right .button.goAdvancedRegisterBtn a {
    display: table;
    color: #3f3f3f;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.threeDotMenuContainer .menu {
    float: right;
    width: 30px;
    height: auto;
    margin-top: 3px;
    cursor: pointer;
    position: relative;
}

.threeDotMenuContainer .menu i {
    width: 16px;
    height: 16px;
    display: table;
    background-size: contain;
    opacity: 0.3;
    background-repeat: no-repeat;
}

.threeDotMenuContainer .menu.sub.hide {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
}

.threeDotMenuContainer .threeDotsSelect {
    display: none;
    position: absolute;
    width: 120px;
    top: 100%;
    right: 0;
    max-height: 280px;
    background-color: #ffffff;
    overflow: auto;
    -ms-overflow-style: none;
    z-index: 10;
    border-radius: 5px;
    box-shadow: 0px 10px 32px rgba(136, 136, 136, 0.3);
}

.threeDotMenuContainer .threeDotsSelect.show {
    display: block;
}

.threeDotMenuContainer .threeDotsSelect .option {
    float: left;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    color: #b6bfce;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.threeDotMenuContainer .threeDotsSelect .option:hover {
    background: #ffcd00;
    color: #ffffff;
}

.threeDotMenuContainer .threeDotsSelect .option.red:hover {
    background-color: #e83c4c;
}

.generalGrayButton {
    margin-left: 8px;
    padding: 10px 20px;
    background-color: #898989;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
    border: none;
    width: 160px;
    outline: none;
}

.noCategoryClass .select2-results .select2-results__message {
    display: none !important;
}

#content.settings .settingsMenuContent .userAlarms.noCompanyError {
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/user-alarms.png) no-repeat;
    background-size: 100%;
    height: 465px;
}

/*============================================================*/
/*===== Sentinel IT Instruction ==============================*/
/*============================================================*/
.IT_Instruction_Content {
    font-family: roboto;
    font-size: 14px;
}

.IT_Instruction_Content h1 {
    font-size: 20px;
}

.IT_Instruction_Content ul {
    display: block;
    list-style-type: disc;
    padding-left: 40px;
}

.confluenceTable {
    border-collapse: collapse;
    margin: 5px 0 5px 2px;
    width: auto;
}

.confluenceTable th.confluenceTh {
    border: 1px solid #ccc;
    background: #f5f5f5;
    padding: 3px 4px 3px 4px;
    text-align: center;
}

.confluenceTable td.confluenceTd {
    border: 1px solid #ccc;
    padding: 3px 4px 3px 4px;
}

.confluenceTable td {
    vertical-align: middle;
}

#whatShouldIDoPopup.instantValuesPopup {
    width: 1138px;
    height: 550px;
    margin-left: -10px;
}

#whatShouldIDoPopup.instantValuesPopup .title {
    display: none;
}

#whatShouldIDoPopup.instantValuesPopup .desc {
    display: none;
}

#whatShouldIDoPopup.instantValuesPopup .section.facilityReportSectionInstantValues .facilityReportSectionHead {
    height: 30px;
    margin-top: 10px;
    margin-left: 40px;
    margin-right: 30px;
    margin-bottom: 30px;
    padding: 10px 5px;
}

/* #whatShouldIDoPopup.instantValuesPopup .section.facilityReportSectionInstantValues {
    margin-left: -10px;
} */

#whatShouldIDoPopup.instantValuesPopup .section.facilityReportSectionInstantValues .tabs {
    width: calc(100% + 5px) !important;
}

#whatShouldIDoPopup.instantValuesPopup .dashboardLoader {
    margin-top: -300px;
}

/*============================================================*/
input::-webkit-input-placeholder {
    color: #aaaaaa !important;
}

input::-moz-placeholder {
    color: #aaaaaa !important;
}

input:-ms-input-placeholder {
    color: #aaaaaa !important;
}

input:-moz-placeholder {
    color: #aaaaaa !important;
}

.select .selectedOption:not([data-value]),
.select .selectedOption[data-value=""],
.select .selectedOption[data-value="null"] {
    color: #aaaaaa !important;
}

.disableSelect {
    opacity: 0.6;
    pointer-events: none;
}

/*====================== phones ======================================*/

#content.settings .field .phones {
    width: 432px;
}

.countryPhone {
    margin-top: 50px;
    height: 45px;
}

#content.settings .field .phones input {
    width: 325px;
    border-radius: 0 5px 5px 0;
    border-left: 0 !important;
    border-left-color: transparent !important;
    padding-left: 0;
}

.countryPhone input {
    width: 325px !important;
    padding-left: 0 !important;
}

#content.settings .field .phones .select .i,
.countryPhone .select .i {
    right: auto;
    left: 5px;
}

#content.settings .field .phones .select,
.countryPhone .select {
    margin-right: 0;
    border-radius: 5px 0 0 5px;
    border-right: 0 !important;
    border-right-color: transparent !important;

    padding-left: 25px;
    padding-right: 0;
    padding-right: 5px;
    width: auto;
    float: left;
}

#content.settings .field .phones .options,
.countryPhone .options {
    top: 35px;
    width: 420px;
}

#content.settings .field .testButton .inputPhone {
    width: 60%;
}

#content.settings .field .testButton input {
    width: 235px;
}

.smsFormatWarning {
    font-size: 12px;
    color: #898989;
}

/********************** loginPanel ************************/

#content.login .field .phones input {
    width: 400px;
    height: 47px;
}

#content.login .field .phones .selectBox {
    width: auto;
    height: 47px;
    padding-left: 20px;
    padding-right: 5px;
}

#content.login .field .phones .selectBox .i {
    top: 18px;
    left: 0;
}

#content.login .field .phones .options {
    width: 500px !important;
    top: 47px !important;
}

/********************** Sentinel loginPanel ************************/

#content .loginView .field .phones input,
.countryPhone input {
    width: 400px !important;
    height: 47px !important;
}

#content .loginView .field .phones .selectBox,
.countryPhone .selectBox {
    width: auto;
    height: 47px;
    padding-left: 20px;
    padding-right: 5px;
}

.countryPhone .selectBox {
    width: 55px !important;
    height: 47px !important;
}

#content .loginView .field .phones .selectBox .i,
.countryPhone .selectBox .i {
    top: 18px;
    left: 0;
}

#content .loginView .field .phones .options,
.countryPhone .options {
    width: 350px !important;
    top: 47px !important;
}

#content.settings .settingsMenuContent .tariffList.noCompanyError {
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/tariff-list.png) no-repeat;
    background-size: 100%;
    height: 730px;
}

#content .tariff-assignment table tr.SameTariff {
    opacity: 0.7;
}

#content .tariff-assignment table tr td {
    text-align: left;
    font-size: 15px;
    height: 30px;
    vertical-align: middle;
}

#content .tariff-assignment table tr td:not(:empty):last-child {
    font-size: 13px;
}

#content .tariff-assignment table tr th {
    font-weight: bold;
}

#content .tariff-assignment table tr td:first-child,
#content .tariff-assignment table tr th:first-child {
    background-color: transparent;
    padding-left: 0;
}

.custom-radio:checked,
.custom-radio:not(:checked) {
    position: absolute;
    left: -9999px;
}

.custom-radio:checked+label,
.custom-radio:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #9da8bc;
    height: 21px;
    margin-bottom: 0;
    font-size: 15px;
}

.custom-radio:checked+label:before,
.custom-radio:not(:checked)+label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 19px;
    height: 19px;
    border: 1px solid #9da8bc;
    border-radius: 100%;
    background: #fff;
}

.custom-radio:checked+label:after,
.custom-radio:not(:checked)+label:after {
    content: "";
    width: 15px;
    height: 15px;
    background: #ffcd00;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.custom-radio:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.custom-radio:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

#content .tariff-assignment .section .sectionHead {
    border-bottom: 1px solid #ffcf00;
    height: auto;
    min-height: 88px;
    margin-left: 5px;
    margin-bottom: 13px;
    width: 1124px;
}

#content .tariff-assignment .section .sectionHead .selectedCountInfo {
    font-size: 15px;
    font-weight: 500;
    text-align: right;
    color: #9da8bc;
    margin-top: 5px;
}

#content .tariff-assignment .section .sectionHead #radioAll+label {
    font-weight: 600;
}

#content .tariff-assignment .tariffTitle {
    float: left;
    position: relative;
    width: 1081px;
    margin-left: 44px;
    margin-bottom: 12px;
}

#content .tariff-assignment .tariffTitle .ui-select-multiple.ui-select-bootstrap input.ui-select-search {
    width: 250px !important;
}

#content .tariff-assignment .tariffHeader {
    position: absolute;
    bottom: 0;
}

#content .tariff-assignment .tariffName {
    height: 32px;
    font-size: 27px;
    font-weight: bold;
    text-align: left;
    color: #9da8bc;
    width: 670px;
}

#content .tariff-assignment .tariffNameDesc {
    font-size: 19px;
    font-weight: 500;
    text-align: left;
    color: #9da8bc;
    width: 670px;
}

#content .tariff-assignment .facilityTags {
    margin-top: 15px;
}

#content .tariff-assignment .ui-select-container {
    min-height: 24px;
    padding: 13px 12px 5px !important;
    width: 385px !important;
}

#content #frGraph.blur {
    background: url(/assets/img/periodicBlurBackground.png);
    width: 100%;
    height: 400px;
}

#content .section.facilityReportSectionInstantValues .chart-area .errorContent {
    display: table;
    max-width: 1000px;
    padding-bottom: 10px;
    margin-top: -250px;
}

#content .section.facilityReportSectionInstantValues .chart-area .errorContent .errorIcon {
    float: left;
    width: 100%;
}

#content .section.facilityReportSectionInstantValues .chart-area .errorContent .errorIcon i {
    float: left;
    width: 55px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#content .section.facilityReportSectionInstantValues .chart-area .errorContent .errorTitle {
    float: left;
    width: 100%;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
}

#content .section.facilityReportSectionInstantValues .chart-area .errorContent .errorDesc {
    float: left;
    width: 100%;
    text-align: center;
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 12px;
    margin-bottom: 15px;
}

#content .section.facilityReportSectionInstantValues .rowText.small {
    font-size: 10px !important;
}

.translate-x-anim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(0);
    transition: 0.3s linear;
}

.hide-element {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.2s ease;
    transform: translateX(10%);
}

/**/
.search-input-container {
    background: #fff;
    border-radius: 26px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    display: none;
}

.search-input-container #searchID {
    background: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 26px;
    outline: none;
    color: #b6bfce;
}

.search-input-container i {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    display: block;
}

.streams.custom-selectbox.open-options .search-input-container {
    display: block;
}

[disabled="disabled"],
[disabled="true"],
.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: default !important;
    color: #b6bfce !important;
    background-color: #eee;
}

.disabled.o-100 {
    opacity: 1 !important;
}

.disabled.pe-all {
    pointer-events: all;
    opacity: 1;
}

.datepicker-quick-buttons {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
}

.datepicker-quick-buttons .submit {
    position: relative;
    background-color: white;
    color: #9da8bc;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 9px;
    opacity: 1;
    height: 38px;
    line-height: 38px;
    margin-top: 12px;
    text-align: center;
    transition: 0.2s ease all;
}

.datepicker-quick-buttons .submit:hover {
    background-color: #f9d237;
    color: #ffffff;
}

.datepicker-quick-buttons .submit.active {
    background-color: #ffcc00;
    color: #ffffff;
}

.overflow-visible {
    overflow: inherit !important;
}

/*============================================================*/
.custom-apex-chart-css.hide-chart {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.custom-apex-chart-css.hide-chart {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hide-elem {
    display: none !important;
}

/*=========================Tab Key================================*/
div.select:focus,
.datePickerSelect:focus,
.general-datepicker:focus,
.selectLanguage:focus {
    border-color: #696969ba !important;
    outline-style: none;
}

.facilityManagement a:focus,
.energyComparison a:focus,
.actionButtonInner a:focus,
.socials:first-child:focus,
.buttons>a:focus,
.back-button:focus,
.footerMenuTitle a:focus,
.logo a:focus,
.logo:focus,
.socials a:focus,
.socials a img:focus,
.flag,
.field:focus,
.yesConfirm a:focus,
.addDeviceButton:focus,
.goAdvancedRegister:focus,
#header .buttons .button:focus,
.notificationIcon:focus,
.userArea:focus,
.wait:focus

/*,
.select-container*/
    {
    outline: none;
}

.landingPageSectionDescBoxButton:focus,
.startNow:focus,
.logo a:focus,
.actionRegister:focus,
.actionLogin:focus,
.loginPanel .form .text:focus,
#companyAction:focus,
#userInfoAction:focus,
#myFacilityAction:focus,
#myFacilityDeleteAction:focus,
.actionButton:focus,
.actionbtn:focus,
.button:focus,
#saveDeviceAuto:focus,
.sectionLink:focus,
.addDeviceButton:focus,
#editDeviceManual:focus,
#removeDeviceManual:focus,
.scan-device-manuel-btn:focus,
#deviceConfigAction:focus,
#btnContinue:focus,
.retryDiag:focus,
#editCpManual:focus,
#removeCpManual:focus,
#scanCpManual:focus,
#saveLicenseCenterManual:focus,
.actionResetPassword:focus,
.actionAdvancedRegister:focus,
.actionAdvancedRegisterStep2:focus,
.actionElectricalInformation:focus,
.actionAdvancedRegisterAddDevice:focus,
.skipAddDevice:focus,
#saveDeviceManual:focus,
#saveCpManual:focus,
.ui-select-match:focus,
.facility-building-content .form-group:focus {
    outline-color: #6969697a !important;
}

#header .buttons .button:focus,
.doAction:focus,
.cancelAction:focus,
.yesConfirm:focus,
.footerMenuTitle a:focus,
.socials img:focus,
.logo:focus,
.goAdvancedRegister:focus,
.field:focus,
.addDeviceButton:focus,
.selectLanguage:focus,
.app-center-vertical:focus,
.notificationIcon:focus,
.userArea:focus {
    border: 1px solid #696969ba !important;
}

#userInfoAction:focus,
#companyAction:focus,
#myFacilityAction:focus,
#myFacilityDeleteAction:focus,
.actionRegister:focus,
.actionLogin:focus,
#editDeviceManual:focus,
#removeDeviceManual:focus,
.scan-device-manuel-btn:focus,
#deviceConfigAction:focus,
#btnContinue:focus,
.retryDiag:focus,
#editCpManual:focus,
#removeCpManual:focus,
#scanCpManual:focus,
.gray-button:focus,
#saveLicenseCenterManual:focus,
.actionResetPassword:focus,
.actionAdvancedRegister:focus,
.actionAdvancedRegisterStep2:focus,
.actionElectricalInformation:focus,
.actionAdvancedRegisterAddDevice:focus,
.skipAddDevice:focus,
.actionAdvancedRegisterFinal:focus,
#saveDeviceAuto:focus,
#saveDeviceManual:focus,
#saveCpManual:focus {
    border-radius: 4px !important;
}

.submitArea button,
.skipArea button,
#userInfoAction,
#companyAction,
#myFacilityAction,
#myFacilityDeleteAction {
    border: none;
}

/*=================================================================*/
.sectionImageHead .name {
    max-width: calc(100% - 120px) !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.facility-building-container .fb-detail-panel .fc-h-auto .form-control {
    max-height: 100%;
}

.facility-building-container .fb-detail-panel .fc-h-auto .ui-select-bootstrap .ui-select-choices-row>span {
    padding: 0;
}

.facility-building-container .fb-detail-panel .fc-h-auto .ui-select-bootstrap .ui-select-choices-row>span .item {
    padding: 12px 20px;
}

.facility-building-container .noCompanyError {
    background-size: 100%;
    min-height: 872px;
    background: repeating-linear-gradient(136deg,
            rgba(255, 255, 255, 0),
            rgba(251, 251, 251, 0.04) 0px,
            rgba(230, 230, 230, 0.6) 2px,
            rgba(244, 244, 244, 0) 5px),
        url(/assets/img/facility-building.png) no-repeat;
}

.table-fixed {
    table-layout: fixed;
}

.fb-not-auth .noCompanyError {
    height: 0 !important;
}

.fb-not-auth .noCompanyError .errorContent {
    width: 100% !important;
}

.disable-option {
    pointer-events: none !important;
}

.custom-scrollbar::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: transparent;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #aaa;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(left, #8391a6, #536175);
}

#apiKeyCopyAndClose:hover {
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

#whatShouldIDoPopup .desc textarea {
    resize: none;
    border: none;
}

/*api key showCustomModal div*/
#apiKeyCopyAndClose {
    display: inline-flex;
}

/* api key showCustomModal div span text*/
#apiKeyCopyAndCloseText {
    margin: 7px 0px 0px 7px;
}

#dvSwaggerLink {
    font-size: small;
}