/*
    Copyright (C) 2024 Nair and Associates, LLC
    All rights reserved.
    Warning: This computer program is protected by copyright and international
    treaties.  Unauthorized reproduction or distribution of this program, or any
    portion of it, may result in severe civil and criminal penalties, and will
    be prosecuted to the maximum extent possible under the law.
    Distributed under licensing agreement with Nair and Associates, LLC.
    For further information contact Nair and Associates, LLC at +1-301-529-5870
    or support@nair-assoc.com
*/

/*@import url("https://fonts.googleapis.com/css?family=Yantramanav:300,400,500,700,900"); */
/*@font-face{
  font-family:'Yantramanav'; 
  src:url(http://www.example.com/fonts/YourFont.otf); 
}*/

@font-face {
  font-family: "Yantramanav";
  src: url("../fonts/Yantramanav-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "Yantramanav";
  src: url("../fonts/Yantramanav-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Yantramanav";
  src: url("../fonts/Yantramanav-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Yantramanav";
  src: url("../fonts/Yantramanav-Bold.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Yantramanav";
  src: url("../fonts/Yantramanav-Black.ttf") format("truetype");
  font-weight: 900;
}

@font-face {
  font-family: "Yantramanav";
  src: url("../../fonts/Yantramanav-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "Yantramanav";
  src: url("../../fonts/Yantramanav-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Yantramanav";
  src: url("../../fonts/Yantramanav-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Yantramanav";
  src: url("../../fonts/Yantramanav-Bold.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Yantramanav";
  src: url("../../fonts/Yantramanav-Black.ttf") format("truetype");
  font-weight: 900;
}

@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Dancing Script";
  src: url("../../fonts/DancingScript-Regular.ttf") format("truetype");
  font-weight: 400;
}

/* =============================
GLOBAL RESETS 
================================*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  background: transparent;
}

article,
aside,
dialog,
figure,
footer,
header,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  background: transparent;
}

ins,
mark {
  text-decoration: none;
  color: #fff;
  background: #333;
}

mark {
  padding: 0 0.2em;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  cursor: help;
  border-bottom: 1px dotted #000;
}

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

hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}

::-moz-selection,
::-webkit-selection,
::selection {
  color: #fff;
  background: #333;
  text-shadow: none;
}

[type="submit"] {
  cursor: pointer;
}

/* =============================
GLOBAL RULES
================================*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  margin: 0;
  /* Set a 16px base size */
}

body {
  overflow: hidden;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25;
  margin: 0 auto;
  padding: 0;
  background-color: #f0fbff;
}

.body-scroll-y-active{
  overflow-y:auto;
  overflow-x:hidden;
}

body,
html {
  width: 100%;
  height: 100%;

  -webkit-overflow-scrolling: touch;
}

/* Set vertical rhythm */

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dd,
p,
figure,
pre,
table,
fieldset,
hr {
  /* margin-bottom: 24px;
    margin-bottom: 1.5rem;
    24px equivalent/fallback */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: normal;
}

img,
a img {
  max-width: 100%;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

*:focus {
  outline: none;
}

.reset-row-margin{
  margin-left:0px !important;
  margin-right:0px !important;
}

/* ==========================================================
GLOBAL TEMPLATE RULES
=============================================================*/

/* Font Light ============================================== */

.font-std-54-light {
  font-family: "Yantramanav", sans-serif;
  font-size: 54px;
  font-weight: 300;
  line-height: 1em;
  margin-bottom: 10px;
}

.font-std-40-light {
  font-family: "Yantramanav", sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1em;
  margin-bottom: 10px;
}

.font-std-25-light {
  font-family: "Yantramanav", sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1em;
}

.font-std-20-light {
  font-family: "Yantramanav", sans-serif;
  font-size: 20px;
  font-weight: 300;
}

.font-std-18-light {
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height:1.7em;
  margin-bottom:0px;
}

.font-std-16-light {
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 300;
}

.font-std-14-light {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 300;
}

/* Font Regular ============================================== */

.font-std-25-regular {
  font-family: "Yantramanav", sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1em;
}

.font-std-20-regular {
  font-family: "Yantramanav", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1em;
}

.font-std-18-regular {
  font-family: "Yantramanav", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.font-std-16-regular {
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.font-std-14-regular {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
}

.font-std-12-regular {
  font-family: "Yantramanav", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.font-std-10-regular {
  font-family: "Yantramanav", sans-serif;
  font-size: 10px;
  font-weight: 400;
}

.font-std-8-regular {
  font-family: "Yantramanav", sans-serif;
  font-size: 8px;
  font-weight: 400;
}

/* Font Medium ============================================== */

.font-std-20-medium {
  font-family: "Yantramanav", sans-serif;
  font-size: 20px;
  font-weight: 500;
}

.font-std-18-medium {
  font-family: "Yantramanav", sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.font-std-15-medium {
  font-family: "Yantramanav", sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.font-std-14-medium {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

/* Font Bold ============================================== */

.font-std-16-bold {
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.font-std-14-bold,
.boot-override .font-std-14-bold {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.font-std-12-bold {
  font-family: "Yantramanav", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.font-std-10-bold {
  font-family: "Yantramanav", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

/* Font Awesome ============================================ */

.font-fa-14 {
  font-size: 14px !important;
}

.font-fa-16 {
  font-size: 16px !important;
}

.font-fa-19 {
  font-size: 19px !important;
}

.font-fa-24 {
  font-size: 24px !important;
}

.font-fa-20 {
  font-size: 20px !important;
}

/* Colors  ================================================= */

.color-white,
.boot-override .color-white {
  color: #fff !important;
}

a:hover.color-white,
a:active.color-white {
  color: #fff;
}

.color-main-blue-s4 {
  color: #46b9ef;
}

a:hover.color-main-blue-s4 {
  color: #fff;
}

.color-main-gray {
  color: #eaf1f5;
}

.color-main-gray a {
  color: #eaf1f5;
}

.bg-main-gray {
  background-color: #eaf1f5;
}

.color-main-gray a:hover {
  color: #fff;
}

.color-main-gray-dark {
  color: #a3a3a3;
}

.color-warning-green,
.color-alert-green {
  color: #0d0;
}

.color-warning-red {
  color: #ff3b65;
}

.color-alert-red {
  color: #f00;
}

.bg-alert-red {
  background-color: #a40101;
}

.bg-alert-green {
  background-color: #2e9800;
}

.bg-alert-orange {
  background-color: #f87d33;
}

.bg-alert-yellow {
  background-color: #fac137;
}

.color-alert-yellow {
  color: #fac137;
}

/* Main Colors (UI) */

.bg-main-blue-s1 {
  background-color: #27425f;
}

.bg-main-blue-s2 {
  background-color: #2d4c6e;
}

.bg-main-blue-s3 {
  background-color: #34577d;
}

.bg-main-blue-s4 {
  background-color: #adcae8;
}

.bg-main-blue-s5 {
  background-color: #f0fbff;
}

.bg-main-blue-s6 {
  background-color: #f0fbff;
}

/*  Blues - Fonts */

.color-blue-s1,
.table-bordered-blue a {
  color: #34516f;
}

.table-bordered-blue a:hover,
.table-bordered-blue a:active,
.table-bordered-blue a:visited,
.table-bordered-blue a:focus {
  text-decoration: none;
}

.color-blue-s2 {
  color: #64819f;
}

.color-blue-s3 {
  color: #8eabc9;
}

.color-blue-s4,
.color-blue-s4:hover,
.color-blue-s4:active,
.color-blue-s4:visited {
  color: #adcae8;
}

.color-blue-s5 {
  color: #c4e1ff;
}

/*  Blues - Backgrounds */

.bg-blue-s1 {
  background-color: #34516f;
}

.bg-blue-s2,
.boot-override .bg-blue-s2 {
  background-color: #64819f;
}

.bg-blue-s2 a:hover {
  color: #64819f;
  border: 1px solid #64819f;
  background-color: #fff;
}

.bg-blue-s3 {
  background-color: #8eabc9;
}

.bg-blue-s4 {
  background-color: #adcae8;
}

.bg-blue-s5 {
  background-color: #c4e1ff;
}

/*  Blues - Buttons */

.button-blue-s1,
.button-blue-s1-white {
  display: inline-block;
  padding: 7px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #34516f;
}

.button-blue-s1:hover {
  color: #fff;
  background-color: #64819f;
}

.button-blue-s1-white:hover {
  color: #64819f;
  background-color: #fff;
}

.button-small-blue-s1 {
  display: inline-block;
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #34516f;
}

.button-small-blue-s1:hover {
  color: #fff;
  background-color: #64819f;
}

.button-blue-s2 {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #64819f;
}

.button-blue-s2:hover {
  color: #fff;
  background-color: #34516f;
  outline: 1px solid #fff;
}

.button-pink-s2 {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #d928dc;
}

.button-pink-s2:hover {
  color: #fff;
  background-color: #aa1ead;
  outline: 1px solid #fff;
}

.button-small-blue-s2 {
  display: inline-block;
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #64819f;
}

.button-small-blue-s2:hover {
  color: #fff;
  background-color: #34516f;
}

.button-blue-s3 {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #8eabc9;
}

.button-blue-s3:hover {
  color: #fff;
  background-color: #34516f;
  outline: 1px solid #fff;
}

/* Reds Buttons */

.button-warning-red {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #a40101;
}

.button-warning-red:hover {
  color: #fff;
  background-color: #840101;
}

/* Green Buttons */

.button-warning-green {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #2e9800;
}

.button-warning-green:hover {
  color: #fff;
  background-color: #267c00;
}

/* Orange */

.button-warning-orange {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #fa7f35;
}

.button-warning-orange:hover {
  color: #fff;
  background-color: #d26b2d;
}

/* Purple Buttons */
.button-purple-s1,
.button-purple-s1-white {
  display: inline-block;
  padding: 3px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #4e475e;
  height: 28px;
}

.button-purple-s1:hover {
  color: #fff;
  background-color: #8c859c;
}

.button-purple-s1-white:hover {
  color: #4e475e;
  background-color: #fff;
}

/* Purple Buttons */
.button-purple-s2 {
  display: inline-block;
  padding: 3px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #8c859c;
  height: 28px;
}

.button-purple-s2 .text-button,
.button-blue-s2 .text-button,
.button-green-s2 .text-button,
.button-green-s2-alt .text-button {
  margin-top: 4px;
}

.button-purple-s2:hover {
  color: #fff;
  background-color: #4e475e;
}

/* Transparent */
.button-transparent-to-green,
.button-transparent-to-red {
  cursor: pointer;
}

.button-transparent-to-green:hover {
  color: #0d0;
}

.button-transparent-to-red:hover {
  color: #ff0000;
}

/* Interface Buttons */

#button-delete {
  display: none;
}

#button-archive {
  display: none;
}

#button-mark-unread {
  display: none;
}

.button-white-blue {
  display: inline-block;
  padding: 3px 5px;
  cursor: pointer;
  vertical-align: top;
  background-color: #fff !important;
  height: 28px;
  color: #34516f !important;
  vertical-align: middle;
}

.button-white-blue:hover {
  color: #fff !important;
  background-color: #34516f !important;
  outline: 1px solid #fff !important;
}

.button-white-gray {
  display: inline-block;
  padding: 3px 12px;
  cursor: pointer;
  vertical-align: top;
  background-color: #fff !important;
  height: 28px;
  color: #34516f !important;
  vertical-align: middle;
}

.button-white-gray:hover {
  color: #34516f !important;
  background-color: #ecedef !important;
}

.button-white-green {
  display: inline-block;
  padding: 3px 12px;
  cursor: pointer;
  vertical-align: top;
  background-color: #fff !important;
  height: 28px;
  color: #186557 !important;
  vertical-align: middle;
}

.button-white-green:hover {
  color: #fff !important;
  background-color: #52ab73 !important;
}

.datepicker {
  background-color: #fff;
  color: #333;
  z-index: 999999 !important;
}

#nav_more {
  display: none;
}

.button-white-purple {
  display: inline-block;
  padding: 3px 5px;
  cursor: pointer;
  vertical-align: top;
  background-color: #fff !important;
  height: 28px;
  color: #4e475e !important;
  vertical-align: middle;
}

.button-white-purple:hover {
  color: #fff !important;
  background-color: #4e475e !important;
  outline: 1px solid #fff !important;
}

/*  Purples - Fonts */

.color-purple {
  color: #4e475e;
}

.color-purple-s1 {
  color: #4e475e;
}

.color-purple-s2 {
  color: #8c859c;
}

.table-bordered-purple a {
  color: #4e475e;
}

.table-bordered-purple a:hover,
.table-bordered-purple a:active,
.table-bordered-purple a:visited,
.table-bordered-purple a:focus {
  text-decoration: none;
}

/*  Purples - Backgrounds */

.bg-purple-s1 {
  background-color: #4e475e;
}

.bg-purple-s2 {
  background-color: #8c859c;
}

.bg-purple-s3 {
  background-color: #a8a1b8;
}

.bg-purple-s4 {
  background-color: #c7c0d7;
}

.bg-purple-s5 {
  background-color: #ded7ee;
}

/* Greens - Backgrounds */

.bg-green-s1 {
  background-color: #186557;
}

.bg-green-s1:hover {
  color: #186557;
  border: 1px solid #186557;
  background-color: #fff;
}

.bg-green-s2 {
  background-color: #52ab73;
}

.bg-green-s3 {
  background-color: #6ec78f;
}

.bg-green-s4 {
  background-color: #8de6ae;
}

.bg-green-s5 {
  background-color: #a4fdc5;
}

/*  Greens - Fonts */

.color-green-s1 {
  color: #186557;
}

.color-green-s2 {
  color: #52ab73;
}

.color-green-s3 {
  color: #6ec78f;
}

.color-green-s4,
.color-green-s4:hover,
.color-green-s4:active,
.color-green-s4:visited {
  color: #8de6ae;
}

.color-green-s5 {
  color: #a4fdc5;
}

/*  Greens - Buttons */

.button-green-s1,
.button-green-s1-white {
  display: inline-block;
  padding: 4px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #186557;
  height: 28px;
}

.button-green-s1:hover {
  background-color: #fff;
  height: 28px;
  color: #52ab73;
  outline: 1px solid #52ab73;
}

.button-green-s1-white:hover {
  color: #186557;
  background-color: #fff;
}

.button-green-s1-alt {
  display: inline-block;
  padding: 4px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #186557;
  height: 28px;
}

.button-green-s1-alt:hover {
  background-color: #52ab73;
  height: 28px;
  color: #fff;
}

.button-small-green-s1 {
  display: inline-block;
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #186557;
}

.button-small-green-s1:hover {
  color: #fff;
  background-color: #52ab73;
}

.button-green-s2,
.button-green-s2-alt {
  display: inline-block;
  padding: 3px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #52ab73;
  padding-top: 4px;
  height: 28px;
}

.button-gray-s2 {
  display: inline-block;
  padding: 3px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #929292;
  padding-top: 4px;
  height: 28px;
}

.button-gray-s2:hover {
  color: #fff;
  background-color: #6f6f6f;
}

.button-brown-s2 {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #91887f;
  padding-top: 4px;
  height: 28px;
}

.button-brown-s2:hover {
  color: #fff;
  background-color: #534a41;
}

.button-green-s2:hover {
  color: #fff;
  outline: 1px solid #fff;
  background-color: #186557;
}

.button-green-s2-alt:hover {
  color: #186557;
  background-color: #fff;
}

.button-small-green-s2 {
  display: inline-block;
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #52ab73;
}

.button-small-green-s2:hover {
  color: #fff;
  background-color: #6ec78f;
}

.text-button {
  display: inline-block;
}

/* Orange - Backgrounds */

.bg-orange-s1 {
  background-color: #8a3a02;
}

.bg-orange-s1:hover {
  color: #8a3a02;
  border: 1px solid #8a3a02;
  background-color: #fff;
}

.bg-orange-s2 {
  background-color: #c98a5d;
}

.bg-orange-s3 {
  background-color: #e4945c;
}

.bg-orange-s4 {
  background-color: #ffb581;
}

.bg-orange-s5 {
  background-color: #ffd3b3;
}

/* Brown - Backgrounds */

.bg-brown-s1 {
  background-color: #534a41;
}

.bg-brown-s1:hover {
  color: #534a41;
  border: 1px solid #534a41;
  background-color: #fff;
}

.bg-brown-s2 {
  background-color: #91887f;
}

.bg-brown-s3 {
  background-color: #ada49b;
}

.bg-brown-s4 {
  background-color: #ccc3ba;
}

.bg-brown-s5 {
  background-color: #e3dad1;
}

/* ltblue - Backgrounds */

.bg-ltblue-s1 {
  background-color: #016a76;
}

.bg-ltblue-s1:hover {
  color: #39aab7;
  border: 1px solid #39aab7;
  background-color: #fff;
}

.bg-ltblue-s2 {
  background-color: #39aab7;
}

.bg-ltblue-s3 {
  background-color: #55c6d3;
}

.bg-ltblue-s4 {
  background-color: #74e5f2;
}

.bg-ltblue-s5 {
  background-color: #9ef5ff;
}

/* red - Backgrounds */

.bg-red-s1 {
  background-color: #823340;
}

.bg-red-s1:hover {
  color: #c0717e;
  border: 1px solid #c0717e;
  background-color: #fff;
}

.bg-red-s2 {
  background-color: #c0717e;
}

.button-orange-s2 {
  display: inline-block;
  padding: 4px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #c87840;
  height: 28px;
}

.button-orange-s2:hover {
  color: #fff;
  outline: 1px solid #fff;
  background-color: #9c5e32;
}

.button-red-s2 {
  display: inline-block;
  padding: 4px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #c0717e;
  height: 28px;
}

.button-red-s2:hover {
  color: #fff;
  outline: 1px solid #fff;
  background-color: #823340;
}

.button-red-s1-alt {
  display: inline-block;
  padding: 4px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #823340;
  height: 28px;
}

.button-red-s1-alt:hover {
  background-color: #c0717e;
  height: 28px;
  color: #fff;
}

.bg-red-s3 {
  background-color: #dc8d9a;
}

.bg-red-s4 {
  background-color: #fbacb9;
}

.bg-red-s5 {
  background-color: #ffcdd5;
}

/* Brown - Backgrounds */

.bg-yellow-s1 {
  background-color: #565500;
}

.bg-yellow-s1:hover {
  color: #94933e;
  border: 1px solid #94933e;
  background-color: #fff;
}

.bg-yellow-s2 {
  background-color: #94933e;
}

.bg-yellow-s3 {
  background-color: #b0af5a;
}

.bg-yellow-s4 {
  background-color: #cfce79;
}

.bg-yellow-s5 {
  background-color: #e6e590;
}

/*  Red - Buttons */

.button-red-s1 {
  display: inline-block;
  padding: 4px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #ff0000;
  height: 28px;
}

.button-red-s1:hover {
  background-color: #d10000;
  height: 28px;
  color: #fff;
  outline: 1px solid #fff;
}

.dataRow2,
.dataRow4,
.dataRow6,
.dataRow8,
.dataRow10,
.dataRow12,
.dataRow14,
.dataRow16,
.dataRow18 {
  background-color: #dce3e6;
}

.totalRow {
  font-weight: bold;
}

/* Random Rules ============================================ */

.padding-t-80px {
  padding-top: 80px;
}

.padding-t-50px {
  padding-top: 50px;
}

.margin-t-50px {
  margin-top: 50px;
}

.padding-b-50px {
  padding-bottom: 50px;
}

.padding-t-40px {
  padding-top: 40px;
}

.margin-t-35px {
  margin-top: 35px;
}

.padding-t-30px {
  padding-top: 30px;
}

.margin-t-30px {
  margin-top: 30px;
}

.margin-b-30px {
  margin-bottom: 30px;
}

.margin-t-20px {
  margin-top: 20px;
}

.margin-t-10px {
  margin-top: 10px;
}

.padding-t-20px {
  padding-top: 20px;
}

.padding-b-20px {
  padding-bottom: 20px;
}

.margin-b-20px {
  margin-bottom: 20px;
}

.margin-t-15px {
  margin-top: 15px;
}

.padding-t-15px {
  padding-top: 15px;
}

.margin-t-10px {
  margin-top: 10px;
}

.padding-t-10px {
  padding-top: 10px;
}

.padding-b-10px {
  padding-bottom: 10px;
}

.padding-both-row {
  padding-left: 15px;
  padding-right: 15px;
}

.text-center,
.boot-override .text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.float-right {
  float: right;
}

.text-dropshadow-100 {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 1);
}

.text-dropshadow-75 {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
}

.text-dropshadow-50 {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.bg-black-40 {
  background-image: url("../img/bg-black-40.png");
  background-repeat: repeat;
}

.bg-black-gradient-40 {
  background-image: url("../img/bg-black-40-gradient.png");
  background-repeat: repeat-x;
  background-position: top center;
}

.bg-black-80 {
  background-image: url("../img/bg-black-80.png");
  background-repeat: repeat;
}

.table-middle-cell {
  display: table-cell;
  vertical-align: middle;
}

.compensate-fa {
  margin-top: -2px;
  vertical-align: middle !important;
}

.width-100 {
  width: 100%;
}

.fullscreen-100 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
}

.font-awesome-button-correct {
  font-size: 12px !important;
  vertical-align: -15% !important;
}

/* HR Colors  ================================================= */

.hr-blue {
  border-top: 1px solid #8eabc9;
}

.hr-purple {
  border-top: 1px solid #8c859c;
}

.hr-green {
  border-top: 1px solid #52ab73;
}

.hr-white {
  border-top: 1px solid #f0fbff;
}

/* Dropdowns  ================================================= */

/*  Simple Menu - Rollover */

.simple-dropdown-content,
.rate-dropdown-content,
.files-dropdown-content {
  position: absolute;
  display: none;
  right: 0;
  z-index: 1;
  width: max-content;
  margin-top: 25px;
  background-color: #253d58;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.mobile-header-customer-dropdown-content{
  right:auto;
  margin-top:33px;
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.mobile-header-customer-dropdown-content a{
  font-size: 18px !important;
    padding: 12px 28px !important;
    background-color: #124063;
}

.rate-dropdown-content,
.files-dropdown-content {
  width: 150px !important;
  text-align: left;
  right: auto;
}

.boolean-dropdown-content-purple {
  position: absolute;
  display: none;
  right: 0;
  z-index: 1;
  width: 250px;
  margin-top: 25px;
  background-color: #fff;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.dropdown-status-icon{
  margin-left:10px;
}

.simple-dropdown-button,
.simple-dropdown-button-vendor {
  width: auto;
  height: 27px;
  padding: 6px 10px;
  cursor: pointer;
  border-top: 1px solid #5e80a1;
  background-color: #000;
  background-color: #253d58;
}

.simple-dropdown-content a{
  cursor: pointer;
}

.simple-dropdown-content a:hover, .simple-dropdown-button:hover{
  background-color:#133c61 !important;
}

.simple-dropdown-button span,
,
.simple-dropdown-button-vendor span {
  margin: 0;
  padding: 0;
}

.simple-dropdown-button:hover,
.simple-dropdown-button-vendor:hover {
  background-color: #35577e;
}

.simple-dropdown-content a,
.rate-dropdown-content a,
.files-dropdown-content a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  border-top: 1px solid #64819f;
}

.boolean-dropdown-content-purple a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  border-top: 1px solid #888;
  color: #4e475e;
  text-align: left;
}

.boolean-dropdown-content-purple a:hover {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  border-top: 1px solid #64819f;
  background-color: #4e475e;
  color: #fff;
}

.simple-dropdown-content a:hover,
.rate-dropdown-content a:hover,
.files-dropdown-content a:hover {
  background-color: #34516f;
}

.rate-dropdown-content a:hover,
.files-dropdown-content a:hover {
  color: #fff;
  border: 0px;
  border-top: 1px solid #64819f;
}

.simple-dropdown-content.drop-white-blue a,
.rate-dropdown-content.drop-white-blue a,
.files-dropdown-content.drop-white-blue a {
  color: #34516f;
  background-color: #fff;
}

.simple-dropdown-content.drop-white-blue a:hover,
.rate-dropdown-content.drop-white-blue a:hover,
.files-dropdown-content.drop-white-blue a:hover {
  color: #fff;
  background-color: #34516f;
}

.simple-dropdown-content.drop-white-purple a,
.rate-dropdown-content.drop-white-purple a,
.files-dropdown-content.drop-white-purple a {
  color: #4e475e;
  background-color: #fff;
}

.simple-dropdown-content.drop-white-purple a:hover,
.rate-dropdown-content.drop-white-purple a:hover,
.files-dropdown-content.drop-white-purple a:hover {
  color: #fff;
  background-color: #4e475e;
}

.simple-dropdown-100 {
  width: 100%;
}

.calendar-button {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  /* padding: 6px 10px; */
  z-index: 10;
  height: 28px;
  /* width: 28px; */
  text-align: center;
  /* padding-left: 7px; */
  padding: 7px !important;
}

#div-mod-view .calendar-button {
  padding: 5px 10px !important;
}

#chart-loader-animated {
  width: 50px;
  height: 10px;
  outline: 1px solid #fff;
  background-color: transparent;
  display: inline-block;
  margin: 10px 15px;
  overflow: hidden;
  float: right;
  padding: 1px;
}

#cla-inner {
  width: 100%;
  height: 8px;
  color: #fff;
  position: relative;
  left: 0px;
  background-color: #fff;
  padding: 1px;
}
/*
.simple-dropdown:hover > .simple-dropdown-content {
    display: block;
}
*/

/* ==========================================================
Login Page
=============================================================*/

#full-screen-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: right top;
  background-size: cover;
  background-image: url('../img/landing-page-skyline-business-horiz.jpg');
}

#centered-title {
  position: relative;
  display: table;
  width: 100%;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
}

.bg-black {
  background-color: #000;
}

#login-page_system-name{
  text-align:center;
  padding: 15px 0px;
  /* background-color:#0000004f; */
}

.login-input {
    margin-top:0px;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    background-color: transparent;
    border-bottom: 1px solid #fff;
    padding:8px;
}

#api_output{
  display: inline-block;
    background-color: #0000006e;
    padding: 8px 15px 0px 15px;
}

.login-input::placeholder {
  color:#ffffff;
  opacity: .5; 
}

input::-moz-placeholder {
  color:#ffffff;
  opacity: .5; 
}

.login-page_links{
  color:#ffffffcb !important;
}

.login-page_requests{
  padding-top:15px;
}

.login-page_links:hover{
  color:#ffffff !important;
}

.login-page_request-form{
  background-color:#000000c5;
  padding:15px;
  padding-top:30px;
}

#login-page_fields label{
  color: #ffffff;
    font-size: 12px;
    margin-bottom: 0px;
    padding-top: 10px;
  /*position:absolute;
  clip: rect(1px, 1px, 1px, 1px);*/
}

legend {
  position:absolute;
  clip: rect(1px, 1px, 1px, 1px);
}

#login-page_fields input:focus-visible, #login-page_fields textarea:focus-visible{
  background-color: #042e6e6e;
}

#login-page_fields button:focus-visible{
  -webkit-box-shadow:0px 0px 16px 5px rgba(255,255,255,0.27);
-moz-box-shadow: 0px 0px 16px 5px rgba(255,255,255,0.27);
box-shadow: 0px 0px 16px 5px rgba(255,255,255,0.27);
}

.input-fa{
  font-family: "Yantramanav", "Font Awesome 5 Pro";
}

#login-page_fields input, #login-page_fields textarea{
  border-radius: 0;
  -webkit-appearance: none;
}

#login-page_relative-footer .bottom-footer-login {
 /* position: relative !important;
  background-color: #000; */
}


.login-page_links:focus{
  text-decoration:underline;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #fff;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #fff;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
}

.login-submit {
  margin: 15px 0px;
  padding: 4px 20px 1px 20px;
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: transparent;
  background-image: url("../img/bg-black-40.png");
  background-repeat: repeat;
}

.login-submit:hover {
  background-color: #000;
}

@-webkit-keyframes autofill {
  to {
    color: #fff;
    background: transparent;
  }
}

input:-webkit-autofill {
  -webkit-animation-name: autofill;

  -webkit-animation-fill-mode: both;
}

/* ==========================================================
Header
=============================================================*/

/* TEST */

#header-fixed-position {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

/* TEST */

#footer-fixed-position {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

.main-content-container {
  display: inline-block;
  overflow: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  /* padding-top: 141px; */
  margin-bottom: 50px;
  margin-top: 139px;
}

#header-application {
  position: relative;
  z-index: 100;
  background-image: url("../img/header-background.png");
  background-position: center top;
  background-size: cover;
}

#header-contents-container {
  position: relative;
  height: 170px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

#header-search-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 200px;
  height: 25px;
  border-top: 1px #3181a6 solid;
  background-color: #253d58;
}

.searchbar-query {
  display: table;
  width: 100%;
  padding: 0 10px;
  border: 0;
  background-color: transparent;
  background-color: #253d58;
}

.searchbar-button {
  position: absolute;
  display: block;
  float: right;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  text-align: center;
  text-align: -webkit-center;
  border: 0;
  background-color: transparent;
}

.searchbar-button:hover {
  background-color: #3b6287;
}

.header-elements {
  position: relative;
  display: block;
  float: left;
  vertical-align: top;
}

/* Header   ================================================*/

#header-app-name-container {
  position: relative;
  display: table;
  padding: 15px 0 10px 0;
  text-align: right;
  height:100%;
}

#header-app-name-container-shadow {
  width: 100%;
  height: 10px;
  background-position: center;
  background-size: 100% 100%;
}

#header-alerts {
  position: relative;
  display: table;
  float: left;
  overflow: hidden;
  height: 33px;
  border-top: 1px #3181a6 solid;
  background-image: url("../img/bg-white-15.png");
  background-repeat: repeat;
}

#header-alerts-icon,
.hub-alerts-icon {
  position: relative;
  display: table;
  float: left;
  width: 33px;
  height: 33px;
  padding-top: 2px;
  text-align: center;
}

#header-alerts-message,
.hub-alerts-message {
  position: absolute;
  display: table;
  float: left;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  margin-top: 2px;
  margin-left: 40px;
  padding-right: 55px;
  vertical-align: middle;
  white-space: nowrap;
}

#header-main-menu-container,
#header-navigation-container {
  position: relative;
  height: 44px;
  margin: 0;
  background-image: url("../img/header-nav-background-tile.jpg");
  background-repeat: repeat;
  -webkit-box-shadow: inset 0 -5px 0 0 #cccece;
  -moz-box-shadow: inset 0 -5px 0 0 #cccece;
  box-shadow: inset 0 -5px 0 0 #cccece;
}

#header-navigation-container {
  background-image: url("../img/header-nav-background-tile-v2.jpg");
}

#header-main-menu-content,
#header-navivation-content {
  position: relative;
  display: block;
  overflow: hidden;
  height: 45px;
  margin: 0 auto;
  text-align: left;
  vertical-align: top;
}

.header-menu-item {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 10px 5px;
  cursor: pointer;
  vertical-align: top;
  color: #336491;

}

.nav-drop-button {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 9px 5px;
  cursor: pointer;
  vertical-align: top;
  color: #336491;
  height: 38px;
  width: 27px;
  border-right: 1px solid #cad1d4;
  -webkit-box-shadow: 0 5px 0 0 #cccece;
  -moz-box-shadow: 0 5px 0 0 #cccece;
  box-shadow: 0 5px 0 0 #cccece;
}

.first-nav-menu-item {
  border-left: 1px solid #cad1d4;
}

.header-menu-item-active.first-nav-menu-item {
  
}

.header-menu-item.first-nav-menu-item:hover {
  
}

.header-menu-item#navitem_more:hover {
  border-right: 1px solid transparent;
}

#navitem_mobile {
  border-left: 1px solid #cad1d4;
}

#navitem_mobile:hover {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
}

.header-menu-text-middle {
  position: relative;
  display: table;
  margin-top: 3px;
  padding-right: 5px;
}

.nav-icon {
  margin: 0 5px;
}

.header-menu-item:hover,
.nav-drop-button:hover,
.nav-drop-button-active:hover,
.header-menu-item-active:hover {
  position: relative;
  display: block;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  vertical-align: top;
  color: #fff;
  border-right: 1px solid #549cc3;
  background-image: url("../img/header-nav-background-tile-blue.jpg");
  background-repeat: repeat;
}

#header-navigation-container .header-menu-item:hover,
.nav-drop-button:hover,
.header-menu-item-active:hover {
  background-image: url("../img/header-nav-background-tile-blue-v2.jpg");
}

.header-menu-item-active {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 10px 5px;
  vertical-align: top;
  color: #fff;
  border-right: 1px solid transparent;
  background-image: url("../img/header-nav-background-tile-gray-v2.jpg");
  background-repeat: repeat;
  -webkit-box-shadow: 0 5px 0 0 #304d65;
  -moz-box-shadow: 0 5px 0 0 #304d65;
  box-shadow: 0 5px 0 0 #304d65;
}

.nav-drop-button-active {
  position: relative;
  cursor: pointer;
  display: block;
  float: left;
  margin: 0;
  padding: 9px 5px;
  vertical-align: top;
  color: #fff;
  background-image: url("../img/header-nav-background-tile-gray-v2.jpg");
  border-right: 1px solid transparent;
  background-repeat: repeat;
  -webkit-box-shadow: 0 5px 0 0 #304d65;
  -moz-box-shadow: 0 5px 0 0 #304d65;
  box-shadow: 0 5px 0 0 #304d65;
}

.nav-1px-border {
  position: relative;
  display: block;
  float: left;
  width: 1px;
  height: 40px;
  background-color: #cfd5da;
}

#header-main-menu-centered,
#header-navigation-centered {
  position: relative;
  display: inline-block;
  height: 40px;
}

#header-mobile-menu-centered,
#header-mobile-navigation-centered {
  position: relative;
  display: none;
  height: 45px;
}

#customer-application-name {
  text-transform: uppercase;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
  display:table-cell;
  vertical-align:middle;
}

#header-weather {
  position: relative;
}

.weather-icon {
  float: left;
  width: 36px;
  height: auto;
  margin-right: 10px;
  padding: 2px;
  background-color: #fff;
}

.weather-icon-hub {
  width: 50px;
  height: auto;
  margin-right: 10px;
  margin-bottom: 25px;
  padding: 2px;
  background-color: #fff;
}

#weather-refresh-button,
#weather-refresh-button-page {
  cursor: pointer;
}

#weather-refresh-button:hover,
#weather-refresh-button-page:hover {
  color: #0d0;
}

#customer-logo img {
  height: 75px;
  padding-right: 20px;
}

.header-container-left {
  float: left;
  width: 50%;
}

.header-container-right {
  width: 50%;
}

#header-logo-container {
  position: relative;
  float: left;
  height: 95px;
  padding: 10px 0;
}

#header-logo-container img {
  width: auto;
  height: 75px;
}

#header-personal-info-container {
  position: relative;
  float: left;
  padding: 0 10px;
}

#header-web-functions-container {
  position: relative;
  float: right;
}

#header-greeting-info {
  padding: 10px 0;
  border-bottom: 1px solid #8eabc9;
}

#header-weather-container {
  padding: 10px 0;
}

#header-share-container {
  position: relative;
  display: inline-block;
  max-width: 100px;
  padding: 6px 10px;
  vertical-align: top;
}

#header-search-social {
  display: inline-block;
  height: 25px;
  margin-bottom: 7px;
}

#header-customer-dropdown {
  display: table-cell;
  vertical-align:middle;
  z-index: 100;
}

#header-mobile-menu{
  display:none;
  height:75px;
}

#header-mobile-logo{
  height:100%;
  position:relative;
}

#header-mobile-logo img{
  width: auto; /* maintain aspect ratio */
}

.mobile-head-1, .mobile-head-2, .mobile-head-3{
  position:relative;
  display:inline-block;
  padding:0px;
  margin:0px;
  height:75px;
}

.mobile-head-1{
  width:20%;
  height: 100%; /* or specify your height */
  display: flex; /* optionally use flex to help center the SVG */
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */
  padding:7px;
}

.mobile-head-2{
  width:60%;
  display:table;
}

.mobile-head-3{
  width:20%;
}

.mobile-head-2 p{
  display:table-cell;
  height:75px;
  vertical-align:middle;
}

.header-bars{
  position: absolute;
  right: 23px;
  color: #fff;
  top: 21px;
  height: 90%;
  font-size: 30px;
}

#header-mobile-name{
  text-transform: uppercase;
  display:table;
  vertical-align:middle;
  color:#fff;
  text-align:center;
  font-weight:700;
  line-height:1.2em;
  text-align:center;
}

#mobile-header-logo{
  max-height:100%;
}

#header-mobile-links{
  display:none;
  z-index: 999;
  width: 100%;
  background-image: url(../img/header-background-modern-blue.svg);
  margin-top: 1px;
  position: absolute;
  background-repeat: repeat;
  background-size: 115%;
  background-color: #3a547a;
}

#header-mobile-links-container{
  overflow-x:hidden;
  width:100%;
  position:absolute;
}

#api-mobile-user-name{
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  display:inline-block;
}

#header-mobile-container{
  width:100%;
  overflow-x:hidden;
}

.mobile-wrapper {
  position: relative;
  height:100vh;
}

.submenu-options{
  display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
    padding:10px;
    max-height:275px;
    overflow:auto;
    line-height:1.2em;
}

.mobile-menu-item-main{
  font-family: "Yantramanav", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff !important;
  display:block;
  width:100%;
  border-bottom:1px solid #ffffff83;
  text-align:center;
  padding:10px;
  background-color:#145c937d;
  position:relative;
}

.mobile-menu-item-main-sub{
  font-family: "Yantramanav", sans-serif;
  font-size: 18px;
  padding: 9px 7px;
  background-color: #0c385aea;
  color: #fff;
  text-align: center;
  height: 100%;
  display: table;
    width: 100%;
}

.mobile-menu-text{
  display:table-cell;
  height:100%;
  vertical-align:middle;
}

.mobile-drop-arrow{
  position: absolute;
  right: 10px;
  top: 15px;
}

#mobile-header-customer-dropdown{
  text-align: center !important;
  padding:10px;
  border-bottom: 1px solid #ffffff83;
}

#mobile-customer-dropdown{
  display:inline-block;
}

#mobile-customer-header-button{
  padding: 7px 20px;
  height: auto;
  font-size: 18px;
  background-color: #145c93;
  border: 1px solid #114d7a;
}

#mobile-welcome{
  width:100%;
  padding:10px;
  text-align:center;
  border-bottom:1px solid #ffffff83;
  border-top:1px solid #ffffff83;
}

#mobile-sign-out-button{
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  display:inline-block;
  margin-left:10px;
  background-color: #145c93;
  padding:3px 10px;
  text-transform:uppercase;
  border:1px solid #114d7a
}


#navitem_more,
#last-hr {
  display: none;
}

.menu-dropdown-content,
.menu-mobile-dropdown-content {
  position: absolute;
  position: absolute;
  display: none;
  right: 0;
  z-index: 100;
  z-index: 1;
  width: 150px;
  margin-top: 10px;
  text-align: center;
  background-color: #253d58;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.menu-mobile-dropdown-content {
  width: 100%;
}

.menu-dropdown-content a,
.menu-mobile-dropdown-content a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: white;
  border-bottom: solid 1px #8eabc9;
}

.menu-mobile-dropdown-content a {
  padding: 10px 10px;
  border-bottom: solid 1px #8eabc9;
}

.menu-dropdown-content a:hover,
.menu-mobile-dropdown-content a {
  background-color: #34516f;
}

#sign-out-button:hover {
  text-decoration: underline;
}

#sign-out-button {
  cursor: pointer;
}

#button-header-collapse {
  position: absolute;
  top: 105px;
  right: 5px;
  width: 20px;
  height: 20px;
  padding: 0 4px;
  cursor: pointer;
  color: #fff;
  border: 1px solid #64819f;
  border-radius: 50%;
  background-color: #34516f;
  z-index: 300;
}

#button-header-collapse:hover {
  color: #34516f;
  background-color: #fff;
}

#button-sidebar-collapse-opened {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 100;
  width: 20px;
  height: 20px;
  padding: 0 4px;
  cursor: pointer;
  color: #fff;
  border: 1px solid #64819f;
  border-radius: 50%;
  background-color: #34516f;
  float: right;
}

#button-sidebar-collapse-closed {
  position: absolute;
  display: none;
  top: 160px;
  left: 5px;
  z-index: 501;
  width: 20px;
  height: 20px;
  padding: 0 4px;
  cursor: pointer;
  color: #fff;
  border: 1px solid #64819f;
  border-radius: 50%;
  background-color: #34516f;
}

.sidebar-close-icon {
  font-size: 12px;
  line-height: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sidebar-open-icon {
  font-size: 12px;
  line-height: 0px;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
}

#button-sidebar-collapse-opened:hover,
#button-sidebar-collapse-closed:hover {
  color: #34516f;
  background-color: #fff;
}

.collapse-icon {
  position: absolute;
  top: 2px;
  font-size: 12px !important;
  margin: 0;
}

.button-info-panel-collapse-opened,
.button-info-panel-remove-all,
.button-info-panel-detach,
.button-legend-detach {
  position: relative;
  z-index: 100;
  width: 20px;
  height: 20px;
  padding: 4px;
  cursor: pointer;
  color: #fff;
  display: inline-block;
  margin-right: 5px;
  font-size: 13px;
}

#button-info-panel-collapse-opened:hover,
#button-info-panel-collapse-closed:hover,
#button-info-panel-remove-all:hover,
#button-info-panel-detach:hover,
.button-legend-detach:hover {
  color: #34516f;
  background-color: #fff;
}

.button-legend-detach {
  height: 25px;
  width: 25px;
  display: table;
}

.button-info-panel-text {
  color: #fff;
  display: inline-block;
  vertical-align: top;
  padding-top: 3px;
}

.side-info-collapse-button-container {
  margin-bottom: 5px;
  background-color: #34516f;
}

#button-info-panel-collapse-closed {
  position: absolute;
  display: none;
  right: 5px;
  z-index: 100;
  width: 20px;
  height: 20px;
  padding: 0 4px;
  cursor: pointer;
  color: #fff;
  border: 1px solid #64819f;
  border-radius: 50%;
  background-color: #34516f;
  margin-top: 10px;
}

.collapse-vert-text-info-panel {
  color: #fff;
  background-color: #34516f;
  transform: rotate(-90deg);
  transform-origin: center top 0;
  margin-top: 70px;
  white-space: nowrap;
  left: -67px;
  position: absolute;
  padding: 2px 5px;
  border-radius: 3px;
}

/* ==========================================================
Inner Page Elements
=============================================================*/

#inner-page-search-container {
  position: relative;
  width: 100%;
  border: 1px solid #63809e;
  border-top: 1px solid #628ab5;
  -webkit-box-shadow: inset 0 1px 2px 0 rgba(99, 128, 158, 1);
  -moz-box-shadow: inset 0 1px 2px 0 rgba(99, 128, 158, 1);
  box-shadow: inset 0 1px 2px 0 rgba(99, 128, 158, 1);
}

#inner-page-dropdown-container {
  position: relative;
  padding: 7px 10px 5px 10px;
  vertical-align: top;
  border: 1px solid #63809e;
  border-top: 1px solid #628ab5;
  -webkit-box-shadow: inset 0 1px 2px 0 rgba(99, 128, 158, 1);
  -moz-box-shadow: inset 0 1px 2px 0 rgba(99, 128, 158, 1);
  box-shadow: inset 0 1px 2px 0 rgba(99, 128, 158, 1);
}

#inner-page-dropdown-container p {
  margin-top: 2px;
}

.inner-page-page-count {
  position: relative;
  padding: 7px 10px 6px 10px;
  vertical-align: top;
  border: 1px solid #63809e;
  border-top: 1px solid #628ab5;
  -webkit-box-shadow: inset 0 1px 2px 0 rgba(99, 128, 158, 1);
  -moz-box-shadow: inset 0 1px 2px 0 rgba(99, 128, 158, 1);
  box-shadow: inset 0 1px 2px 0 rgba(99, 128, 158, 1);
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #fff;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #fff;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
}

/* ==========================================================
Footers
=============================================================*/

.bottom-footer-login {
  position: absolute !important;
  bottom: 0;
}

.subscribe-input-container {
  position: relative;
  display: block;
  width: 77%;
  margin: 0 auto 15px auto;
  margin: 0;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid #eaf1f5;
  background-color: transparent;
}

.subscribe-input {
  width: 80%;
  margin-left: 15px;
  border: 0;
  background-color: transparent;
}

.subscribe-submit {
  display: inline-block;
  margin: 0 0;
  margin-top: 10px;
  padding: 2px 10px;
  border: 1px solid #eaf1f5;
  border-radius: 4px;
  background-color: transparent;
  background-image: url("../img/bg-black-40.png");
  background-repeat: repeat;
}

.subscribe-submit:hover {
  color: #fff;
  border: 1px solid #fff;
  background-color: #a3a3a3;
}

.searchbar-query {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 4px 5px;
  color: #fff;
}

.searchbar-query::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

.searchbar-query::-moz-placeholder {
  /* Firefox 19+ */
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

.searchbar-query:-ms-input-placeholder {
  /* IE 10+ */
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

.searchbar-query:-moz-placeholder {
  /* Firefox 18- */
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

/* Appliation Footer  ==============================================*/

#footer-application {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
  text-align: center;
  border-top: 2px solid #4c4c4c;
  background-image: url("../img/footer-background.jpg");
  background-repeat: repeat;
  background-position: center top;
}

#application-footer-info-container {
  position: relative;
  display: block;
  margin: 0 auto 0 auto;
  padding: 0 0;
  text-align: center;
}

.copyright-footer {
  display: inline-block;
  margin-top: 5px;
  cursor: pointer;
  vertical-align: top;
}

.copyright-footer:hover:hover > .copyright-box {
  display: block;
}

.copyright-box {
  position: absolute;
  display: none;
  width: 320px;
  margin-top: -425px;
  margin-left: -80px;
  padding: 20px;
  text-align: left;
  -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.39);
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.39);

  moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.39);
}

/* ==========================================================
Iframes
=============================================================*/

.iframe-full {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ==========================================================
Bootstrap Force Override (if all else fails!)
=============================================================*/

.boot-override .text-center th {
  font-weight: inherit;
  text-align: center;
}

.text-center th {
  text-align: center;
}

.boot-override .outline-blue-s2 tbody tr td,
.boot-override .outline-blue-s2 thead th {
  border: 1px solid #8eabc9;
}

.boot-override .outline-none tbody tr td,
.boot-override .outline-none thead th {
  border: none;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid #64819f;
  vertical-align: middle;
}

.table-bordered-blue,
.table-bordered-blue > thead > tr > th,
.table-bordered-blue > tbody > tr > td {
  border: 1px solid #7ca0c5;
  vertical-align: middle;
}

.table-bordered-purple,
.table-bordered-purple > thead > tr > th,
.table-bordered-purple > tbody > tr > td {
  border: 1px solid #8c859c;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-child(odd) > td,
tr.found {
  background-color: #edf5f7;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: #fff;
}

.container {
  width: 100% !important;
}

.table-bordered-green,
.table-bordered-green > thead > tr > th,
.table-bordered-green > tbody > tr > td {
  border: 1px solid #52ab73;
  vertical-align: middle;
}

.table-bordered-green a {
  color: #4e475e;
}

.table-bordered-green a:hover,
.table-bordered-green a:active,
.table-bordered-green a:visited,
.table-bordered-green a:focus {
  text-decoration: none;
}

.table-bordered-red,
.table-bordered-red > thead > tr > th,
.table-bordered-red > tbody > tr > td {
  border: 1px solid #c0717e;
  vertical-align: middle;
}

.table-bordered-red a {
  color: #c0717e;
}

.table-bordered-red a:hover,
.table-bordered-red a:active,
.table-bordered-red a:visited,
.table-bordered-red a:focus {
  text-decoration: none;
}

/* ==========================================================
Home Elements
=============================================================*/

#home-reports-section {
  display: none;
  width: 100%;
}

#home-button-container {
  text-align: right;
}

#chart-dd-0-load-container {
  width: 100%;
}

#home-container-hub,
#left-container-hub,
#left-container-hub-charts, #left-container-hub-archive {
  /*height: auto !important; */
  /*min-height hack*/
  height: 100%;
  min-height: 100%;
  /*min-height hack*/
  padding-bottom: 20px;
  /* overflow: auto;
    overflow-x:hidden; */
  overflow-y: auto;
}

#left-container-hub,
#left-container-hub-charts, #left-container-hub-archive,
#home-container-hub {
  width: 300px;
}

#home-container-hub {
  display: inline-block;
}

#left-container-hub {
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
}

#left-container-hub-charts, #left-container-hub-archive {
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
  position: absolute;
  padding-bottom: 200px;
}

#home-container-dashboard {
  display: inline-block;
  /* vertical-align: top; */
  /* float: left; */
  /* width: 100%; */
  /*width: calc(100% - 20px); */
  float: right;
  vertical-align: top;
}

#home-hub-alerts {
  position: relative;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 20px;
}

.home-hub-alert {
  position: relative;
  display: table;
  float: left;
  overflow: hidden;
  width: 100%;
  height: 33px;
  margin-bottom: 10px;
  border-top: 1px #3181a6 solid;
  background-color: #4b6582;
  /* background-image: url('img/bg-white-15.png'); */
  background-repeat: repeat;
}

.btn-alert-view {
  position: relative;
  display: table;
  float: right;
  top: 0;
  right: 0;
  z-index: 10;
  height: 35px;
  padding: 5px 10px;
  cursor: pointer;
  vertical-align: middle;
  border-left: 10px solid #4b6582;
  background-color: #64819f;
}

.btn-alert-view:hover {
  background-color: #27425f;
}

#home-hub-weather {
  position: relative;
  display: block;
  width: calc(100% + 30px);
  margin: 30px -15px 0 -15px;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
}

#home-hub-message {
  position: relative;
  padding-top: 20px;
  padding-bottom: 25px;
  padding-left: 15px;
  padding-right: 15px;
}

#home-hub-message {
  position: relative;
  display: inline-block;

  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 15px;
}

.hub-home-message-indiv {
  /* position: relative;
    display: table;
    background-image: url('img/bg-white-15.png');
    background-repeat: repeat;
    border-top: 1px #3181a6 solid;
    float: left;
    overflow: hidden;
    margin-bottom: 10px;
    height: 70px; */
  position: relative;
  display: table;
  float: left;
  overflow: hidden;
  width: 100%;
  height: 33px;
  height: 60px;
  margin-bottom: 10px;
  border-top: 1px #3181a6 solid;
  background-color: #4b6582;
  /* background-image: url('img/bg-white-15.png'); */
  background-repeat: repeat;
}

.hub-message-icon {
  position: relative;
  display: table;
  float: left;
  width: 33px;
  height: 100%;
  padding-top: 2px;
  text-align: center;
}

.hub-message-graphic {
  display: table-cell;
  vertical-align: middle;
}

.hub-message-message {
  position: absolute;
  display: table;
  float: left;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  margin-top: 7px;
  margin-left: 40px;
  padding-right: 55px;
  vertical-align: middle;
  white-space: nowrap;
}

.btn-message-view {
  position: relative;
  display: table;
  float: right;
  top: 0;
  right: 0;
  z-index: 10;
  height: 100%;
  padding: 5px 10px;
  cursor: pointer;
  vertical-align: middle;
  border-left: 10px solid #4b6582;
  background-color: #64819f;
}

.btn-message-view:hover {
  background-color: #27425f;
}

#featured-buttons {
  display: inline-block;
  float: right;
  clear: both;
  margin-top: -3px;
  vertical-align: middle;
}

/* ==========================================================
Modular Dropdown System
=============================================================*/

.nrg-drop-head {
  display: table;
  height: 30px;
}

.nrg-drop-settings,
.nrg-drop-button-w-settings,
.nrg-drop-button-wo-settings {
  position: relative;
  display: table;
  float: right;
  width: 28px;
  height: 30px;
  cursor: pointer;
  text-align: center;
  color: #fff;
}

.nrg-drop-button-wo-settings {
  position: absolute;
  display: table;
  float: right;
  width: 28px;
  height: 30px;
  cursor: pointer;
  text-align: center;
  color: #fff;
}

.nrg-drop-button-w-settings {
  right: 0;
  color: #fff;
}

.nrg-drop-button-w-settings:hover {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: #34516f;
  border-top: 1px solid #64819f;
  border-right: 1px solid #64819f;
  border-bottom: 1px solid #64819f;
  background-color: #fff;
}

.nrg-drop-button-wo-settings {
  right: 0;
  color: #fff;
}

.nrg-drop-button-wo-settings:hover {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-blue-s1:hover,
.nrg-drop-button-wo-settings.bg-blue-s1:hover,
.nrg-drop-settings.bg-blue-s1:hover {
  color: #34516f;
  border: 1px solid #34516f;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-blue-s2:hover,
.nrg-drop-button-wo-settings.bg-blue-s2:hover,
.nrg-drop-settings.bg-blue-s2:hover {
  color: #34516f;
  border: 1px solid #34516f;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-purple-s1:hover,
.nrg-drop-button-wo-settings.bg-purple-s1:hover,
.nrg-drop-settings.bg-purple-s1:hover {
  color: #4e475e;
  border: 1px solid #4e475e;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-purple-s2:hover,
.nrg-drop-button-wo-settings.bg-purple-s2:hover,
.nrg-drop-settings.bg-purple-s2:hover {
  color: #8c859c;
  border: 1px solid #8c859c;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-green-s1:hover,
.nrg-drop-button-wo-settings.bg-green-s1:hover,
.nrg-drop-settings.bg-green-s1:hover {
  color: #146d35;
  border: 1px solid #146d35;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-green-s2:hover,
.nrg-drop-button-wo-settings.bg-green-s2:hover,
.nrg-drop-settings.bg-green-s2:hover {
  color: #52ab73;
  border: 1px solid #52ab73;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-orange-s2:hover,
.nrg-drop-button-wo-settings.bg-orange-s2:hover,
.nrg-drop-settings.bg-orange-s2:hover {
  color: #c87840;
  border: 1px solid #c87840;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-brown-s2:hover,
.nrg-drop-button-wo-settings.bg-brown-s2:hover,
.nrg-drop-settings.bg-brown-s2:hover {
  color: #91887f;
  border: 1px solid #91887f;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-red-s2:hover,
.nrg-drop-button-wo-settings.bg-red-s2:hover,
.nrg-drop-settings.bg-red-s2:hover {
  color: #c0717e;
  border: 1px solid #c0717e;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-yellow-s2:hover,
.nrg-drop-button-wo-settings.bg-yellow-s2:hover,
.nrg-drop-settings.bg-yellow-s2:hover {
  color: #94933e;
  border: 1px solid #94933e;
  background-color: #fff;
}

.nrg-drop-button-w-settings.bg-ltblue-s2:hover,
.nrg-drop-button-wo-settings.bg-ltblue-s2:hover,
.nrg-drop-settings.bg-ltblue-s2:hover {
  color: #39aab7;
  border: 1px solid #39aab7;
  background-color: #fff;
}

.nrg-drop-settings:hover {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
}

.nrg-drop-settings:hover p {
  color: #34516f !important;
}

.nrg-drop-lvl-0 {
  margin-bottom: 5px;
  padding-right: 0;
}

.nrg-drop-lvl-1 {
  margin-bottom: 5px;
  padding: 0;
}

.nrg-drop-lvl-2 {
  display: none;
  margin-bottom: 5px;
}

.no-padding {
  padding: 0px !important;
}

.pad-r-10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

#left-column,
#center-column,
#right-column {
  padding-right: 0;
}

#org-reports-container,
#sys-reports-container,
#per-reports-container {
  display: none;
}

/* ==========================================================
Message, Alert Areas
=============================================================*/

#messages-reply-section,
#alerts-reply-section {
  display: none;
}

#message-reply-area {
  width: 100%;
  min-height: 150px;
  margin-top: 10px;
  padding: 10px;
}

#message-reply-subject {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
}

.message-reply-titles {
  position: relative;
  display: block;
  float: left;
  clear: both;
  margin-top: 20px;
}

#message-send-dropdown,
#alerts-send-dropdown {
  display: none;
  float: left;
}

#reply-dropdown-contents {
  position: absolute;
  left: 15px;
  width: 100%;
  padding-right: 15px;
  background-color: transparent;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0);
}

#reply-dropdown-contents a {
  display: inline-block;
  cursor: pointer;
  border: 1px solid #fff;
  background-color: #64819f;
}

#reply-dropdown-contents a:hover {
  display: inline-block;
  background-color: #27425f;
}

#message-priority-dropdown {
  float: left;
}

#priority-dropdown-contents {
  position: absolute;
  left: 15px;
  width: 100%;
  background-color: transparent;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0);
}

#priority-dropdown-contents a {
  display: inline-block;
  cursor: pointer;
  border: 1px solid #fff;
  background-color: #64819f;
}

#priority-dropdown-contents a:hover {
  display: inline-block;
  background-color: #27425f;
}

#message-send-alerts {
  position: relative;
  display: none;
  float: right;
  margin-top: 10px;
}

#messages-read,
#messages-unread {
  max-height: 249px;
}

#alerts-read,
#alerts-unread {
  max-height: 230px;
}

/* ==========================================================
Profile Change
=============================================================*/

#change-first-name,
#change-last-name,
#change-email,
#old-password,
#change-password1,
#change-password2 {
  width: 100%;
  margin-top: 10px;
  padding: 3px;
  border: 1px solid #8eabc9 !important;
}

#first-last-name-alerts,
#password-alerts {
  position: relative;
  display: none;
  float: right;
  margin-top: 10px;
}

/* Profile Page: Hiding Entries in "YOUR SAVED REPORTS" ===============================*/

#org-reports-container .report-type-reports {
  display: none;
}

#per-reports-container .report-type-usage-analysis {
  display: none;
}

.profile-page p{
  color:#fff !important;
}

.profile-page h1{
  padding:10px 0px !important;
}


/* ==========================================================
Contracts page
=============================================================*/

.popup-first-level {
  z-index: 1000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.popup-second-level {
  z-index: 2000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.popup-third-level {
  z-index: 3000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#popup-contracts-mod-number{
  padding: 13px 0px 13px 10px;
}

#button-contracts-edit-modifications{
  height:34px;
}

#add-contracts-vendor-name{
  vertical-align:middle;
}

#add-service-start-date, #add-service-end-date{
  padding-left: 26px !important;
}

#popup-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  text-align: center;
  cursor: pointer;
  display: none;
}

#overlay-black,
#overlay-black-2 {
  background-repeat: repeat;
  /*background-image: url("../img/bg-black-80.png"); */
  height: 100%;
  width: 100%;
  position: absolute;
}

#overlay-black {
  z-index: 75;
}

#fullscreen-hit {
  background-repeat: repeat;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 75;
}

#overlay-black-2 {
  z-index: 100;
  display: none;
}

.overlay-inner,
.overlay-inner-generic {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: repeat;
  background-image: url("../img/bg-black-60.png");
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: transparent;
  z-index: 50;
  cursor: pointer;
}

#popup-contracts,
#popup-funding,
#popup-descriptions,
#popup-accounts,
#popup-mod-contracts,
#popup-mod-funding,
#popup-multiple-selection,
#popup-multiple-selection-footer,
#popup-mod-edit,
#popup-mod-new,
#popup-mod-view,
#popup-multiple-utility,
#popup-report-group-name,
#popup-add-vendor,
#popup-edit-vendor,
#popup-add-vendor-alert,
#popup-edit-vendor-alert,
#popup-delete-vendor-warning,
#popup-delete-mod-warning,
#popup-delete-vendor-success,
#popup-multiple-setting-utility,
#popup-overall,
#popup-cpp-alerts,
#popup-cpp-simple,
#popup-cpp-edit-meter,
#popup-cpp-edits,
#popup-overall-secondary,
#popup-generic-message,
#popup-allocations,
#popup-collector,
#internal-popup-overall,
#external-popup-overall {
  position: absolute;
  display: table-cell;
  background-color: #eef5f8;
  top: 50%;
  left: 50%;
  height: 520px;
  width: 600px;
  vertical-align: middle;
  margin: -260px 0 0 -300px;
  border: 1px solid #63809e;
  z-index: 100;
}

#popup-report-group-name {
  height: 420px;
  width: 400px;
  margin: -210px 0 0 -200px;
}

#popup-overall,
#popup-overall-secondary,
#popup-cpp-alerts,
#popup-cpp-simple,
#popup-cpp-edit-meter,
#popup-cpp-edits {
  height: 400px;
  width: 400px;
  margin: -200px 0 0 -200px;
}

#popup-cpp-simple, #popup-cpp-edit-meter{
  height:auto;
}

#div-overall-close-button,
#internal-close-button,
#external-close-button,
#div-cpp-alerts-close-button,
#div-cpp-simple-close-button,
#div-cpp-edit-meter-close-button,
.div-cpp-edits-close-button,
#div-report-group-close-button,
.overall-close-button,
.overall-close-button-collector {
  position: absolute;
  top: 0px;
  right: 2px;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
}

.meter-entry-popup #div-overall-close-button{
  top:0px;
}

.meter-entry-popup #popup-overall-main{
  padding:10px;
}

.meter-entry-popup .cpp-button-center{
  margin-bottom:10px;
}

#div-overall-close-button{
  position: absolute;
  top: 9px;
  right: 9px;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
}

.box-hidden {
  right: 75px;
  margin-top: -3px;
}

.box-hidden p {
  display: inline-block;
  font-family: "Yantramanav", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1em;
  color: #fff;
  vertical-align: middle;
  cursor: pointer;
}

.small-bar {
  font-size: 14px;
}

.box-hidden input {
  cursor: pointer;
}

.div-cpp-edits-close-button {
  top: 5px;
  right: 5px;
  z-index: 50;
}

#div-overall-close-button:hover,
#internal-close-button:hover,
#external-close-button:hover,
.box-close:hover,
.box-copy:hover,
.box-sub:hover,
.config-popover:hover {
  color: #34516f;
}

.box-close:hover,
.box-copy:hover,
.box-sub:hover,
.config-popover:hover {
  color: #ffeb3b;
}

.box-sub-sub:hover,
.box-sub-copy:hover,
.box-sub-close:hover,
.config-popover:hover {
  color: #ffeb3b;
}

/*#popup-overall-searchbar,
#popup-overall-searchbar-secondary {
  margin: 0px auto;
  left: 25%;
  top: 50px;
  margin-bottom: 20px;
  display: none;
  position: absolute;
  padding: 2px 10px;
  width: 200px;
}
*/

#popup-overall-searchbar,
#popup-overall-searchbar-secondary {
  margin: 0px auto;
  display: none;
  position: relative;
  padding: 2px 10px;
  width: 50%;
  margin-top: 10px;
}

#popup-overall-content {
  display: none;
}

.popup-starter {
  position: absolute;
  display: table-cell;
  background-color: #eef5f8;
  top: 50%;
  left: 50%;
  height: 520px;
  width: 600px;
  vertical-align: middle;
  margin: -260px 0 0 -300px;
  border: 1px solid #63809e;
  z-index: 100;
}

#div-add-utilities,
#div-multiple-selection,
#div-multiple-selection-footer,
#div-add-funding,
#div-mod-edit,
#div-delete-vendor-success,
#div-edit-vendor-alert,
#div-add-vendor,
#div-mod-view,
#div-mod-new,
#div-delete-mod-warning {
  display: none;
}

.div-display-none {
  display: none;
}

#popup-mod-view {
  z-index: 105;
  width: 450px;
  margin: -260px 0 0 -225px;
}

#popup-mod-edit {
  z-index: 105;
  width: 450px;
  margin: -175px 0 0 -225px;
  height: 350px;
}

#popup-mod-new {
  z-index: 105;
  width: 600px;
  margin: -300px 0 0 -225px;
  height: 500px;
}

#popup-multiple-utility,
#popup-multiple-setting-utility {
  width: 350px;
  margin: -260px 0 0 -175px;
  height: 400px;
}

#popup-multiple-setting-vendor {
  width: 380px;
  margin: -260px 0 0 -190px;
}

#popup-select-customers {
  width: 350px;
  height: 300px;
  margin: -150px 0 0 -175px;
}

#popup-contracts {
  height: 525px;
  margin: -300px 0 0 -300px;
}

#popup-collector {
  height: 480px;
  margin: -240px 0 0 -300px;
}

#popup-multiple-selection,
#popup-multiple-selection-footer {
  width: 550px;
  margin: -260px 0 0 -275px;
}

#popup-add-vendor-alert {
  width: 300px;
  height: 260px;
  margin: -130px 0 0 -150px;
}

#popup-edit-vendor-alert {
  width: 300px;
  height: 160px;
  margin: -130px 0 0 -150px;
}

#popup-delete-vendor-warning,
#popup-delete-mod-warningm,
#popup-generic-message {
  width: 300px;
  height: 226px;
  margin: -113px 0 0 -150px;
}

#popup-delete-vendor-success {
  width: 300px;
  height: 150px;
  margin: -125px 0 0 -150px;
}

#container-selecton-content-full {
  height: 460px;
  overflow: hidden;
  overflow-y: auto;
}

#container-selecton-content-full-footer {
  height: 425px;
  overflow: hidden;
  overflow-y: auto;
}

#popup-funding,
#popup-mod-funding {
  height: 500px;
  width: 600px;
  margin: -250px 0 0 -300px;
}

#popup-allocations {
  height: 474px;
  width: 500px;
  margin: -237px 0 0 -200px;
}

#popup-overall-list,
#popup-cpp-alerts-list,
#popup-cpp-simple-list,
#popup-cpp-edit-meter-list,
#popup-cpp-edits-list {
  margin-top: -15px;
  width: 100%;
  height: 375px;
  overflow: auto;
}

#popup-overall-list {
  overflow-x: hidden;
  padding-bottom: 0px;
}

#popup-descriptions,
#popup-accounts {
  height: 300px;
  width: 300px;
  margin: -150px 0 0 -150px;
}

#div-account-select-all,
#div-account-select-all-secondary {
  display: none;
}

.popup-header,
.popup-header-footer,
.popup-header-secondary,
.popup-header-footer-secondary {
  display: table;
  width: 100%;
  height: 40px;
  background-color: #63809e;
  text-align: center;
}

.popup-header p,
.popup-header-footer p,
.popup-header-secondary p,
.popup-header-footer-secondary p {
  display: table-cell;
  vertical-align: middle;
}

.popup-footer,
.popup-footer-secondary {
  position: absolute;
  display: table;
  width: 100%;
  height: 60px;
  background-color: #d4e4f2;
  text-align: center;
  bottom: 0px;
  border-top: 1px solid #63809e;
  padding-top: 15px;
}

.input-white {
  margin-top: 10px;
  width: 100%;
  font-size: 14px;
  padding: 3px 5px;
  border: 1px solid #63809e;
  height: 28px;
}

.calendar-button-padding {
  padding-left: 7px;
}

.input-white-textarea {
  margin-top: 10px;
  width: 100%;
  font-size: 14px;
  padding: 3px 5px;
  height: 110px;
}

#contracts-popup-main,
#contracts-popup-main-footer {
  height: 380px;
  scroll: auto;
}

#report-group-name-main,
#report-group-name-main-footer {
  height: 380px;
  scroll: auto;
}

#funding-popup-main,
#funding-popup-main-edit,
#contract-popup-main {
  height: 380px;
  scroll: auto;
}

#funding-popup-main {
  overflow-y: scroll;
  overflow-x: hidden;
}

.button-add-another,
#contracts-popup-main,
#funding-popup-main,
#funding-popup-main-edit {
  color: #34516f;
}

.button-add-another:hover {
  color: #64819f;
}

#funding-document-container,
#contract-history-container {
  display: block;
}

#vendor-info-funding-section,
#vendor-info-modification-section,
#vendor-info-allocation-section {
  display: none;
}

.input-number {
  margin: 0px;
  width: 55px;
  text-align: center;
}

.input-number-large {
  margin: 0px;
  width: 100px;
  text-align: left;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

.contract-row,
.funding-row {
  cursor: pointer;
}

::-webkit-input-placeholder {
  color: #999;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #999;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #999;
}

:-ms-input-placeholder {
  color: #999;
}

table.dataTable thead th {
  position: relative;
  background-image: none !important;
}

#contract-page-table th {
  cursor: pointer;
}

.collapse-vert-text {
  color: #fff;
  background-color: #34516f;
  transform: rotate(-90deg);
  transform-origin: center top 0;
  margin-top: 90px;
  white-space: nowrap;
  left: -67px;
  position: absolute;
  padding: 2px 5px;
  border-radius: 3px;
}

/* ==========================================================
Data Tables
=============================================================*/

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
  position: absolute;
  float: right;
  top: 3px;
  right: 3px;
  display: block;
  font-family: FontAwesome;
}

table.dataTable thead th.sorting:after {
  content: "\f0dc";
  display: none;
  font-size: 0.6em;
  padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
  content: "\f0de";
  color: #fff;
  font-size: 0.6em;
  padding-top: 0.12em;
}
table.dataTable thead th.sorting_desc:after {
  content: "\f0dd";
  color: #fff;
  font-size: 0.6em;
  padding-top: 0.12em;
}

.dataTables_filter,
.dataTables_info,
.dataTables_length,
.dataTables_paginate {
  display: none;
}

#add-service-start-date,
#add-service-end-date,
#mod-edit-effective {
  padding-left: 30px;
}

.input-calendar-icon {
  position: absolute;
  margin: 15px 0px 0px 10px;
  color: white;
}

.input-calendar-icon-blue {
  position: absolute;
  margin: 6px 0px 0px 10px;
  color: #34516f;
}

.input-calendar-icon-purple {
  position: absolute;
  margin: 6px 0px 0px 10px;
  color: #4e475e;
}

.table-condensed > tbody > tr > td {
  padding: 8px !important;
}

.table td.fit,
.table th.fit {
  white-space: nowrap;
  width: 1%;
}

.dataTables_scrollHead {
  /*margin-bottom: -20px !important;*/
}

.dataTables_scrollBody {
  min-height: 65px;
}

#contract-page-table {
  margin-bottom: 0px !important;
}

#contract-page-table_wrapper {
  box-shadow: 0px 1px #7ca0c5;
}

#contract-page-table_wrapper thead {
  width: 100%;
  display: table-header-group;
}

.dataTables_scrollBody table {
  width: 100%;
  display: table;
}

/* ==========================================================
Settings Dropdown Section
=============================================================*/

.settings-dropdown-text-container {
  height: 28px;
  display: table;
}

.settings-dropdown-text {
  height: 28px;
  display: table-cell;
  vertical-align: middle;
}

.setting-customer-text {
  float: left;
  width: 100%;
  height: 14px;
  overflow: hidden;
  white-space: nowrap;
}

#setting-source-customer-text,
#setting-utility-text,
#setting-vendor-text {
  float: left;
  height: 14px;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  width: 85%;
}

#setting-vendor-list {
  height: 390px;
  overflow: auto;
  float: left;
  width: 100%;
}

.button-flexible {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-right: 5px;
}

.jstree-default > .jstree-container-ul > .jstree-node {
}

.jstree-hovered {
  color: #4e475e !important;
}

.jstree-default .jstree-clicked {
  background-color: #8c859c !important ;
}

#archive-hierarchy-full-container .jstree-default .jstree-clicked {
  background-color: transparent !important;
  background: transparent !important;
}

#archive-hierarchy-full-container .jstree-default .jstree-clicked:hover {
  background-color: white !important;
  background: white !important;
  color: black;
}

#all-panel-settings,
#button-delete-chart,
#button-refresh-chart {
  display: none;
}

#button-refresh-chart {
  float: right;
}

#all-panel-settings {
  margin-top: 20px;
}

.side-container {
  width: 100%;
}

.jstree-default .jstree-search {
  color: #f3ff00 !important;
}

#button-setting-date-period {
  white-space: nowrap;
  overflow: hidden;
}

#node-searchbar {
  color: #a8a1b8;
  margin: 5px;
  padding-left: 8px;
  height: 28px;
  margin-left: 75px;
}

.node-sm-button {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.node-sm-icon {
  padding: 0;
  margin: 0;
  padding-top: 1px;
  margin-left: 4px;
  margin-top: 0px;
  margin-bottom: -2px;
  vertical-align: 0 !important;
  cursor: pointer;
}

#hierarchy-tree {
  margin-top: 7px;
}

.node-sm-button:hover {
  color: #4e475e;
}

.jstree-icon .jstree-themeicon {
  display: none !important;
}

.jstree-default .jstree-themeicon {
  width: 20px !important;
  margin-left: -10px !important;
  margin-right: 5px !important;
  display: none !important;
}

#settings-hide-show {
}

.lock-div {
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("../img/bg-black-50.png");
  background-repeat: repeat;
  position: absolute;
  z-index: 100;
  display: block;
}

.lock-div-dates {
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("../img/bg-black-50.png");
  background-repeat: repeat;
  position: absolute;
  z-index: 100;
  display: block;
}

.lock-div-times {
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("../img/bg-black-50.png");
  background-repeat: repeat;
  position: absolute;
  z-index: 100;
  display: block;
}

.lock-div-input {
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("../img/bg-black-50.png");
  background-repeat: repeat;
  position: absolute;
  z-index: 100;
  display: block;
}

#report-title {
  border: 0;
  background-color: #f0fbff;
  width: 400px;
}

.legend-overall,
.legend-popout-container .legend-overall {
  /* Font */
  font-family: "Yantramanav", sans-serif;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1em !important;

  fill: #34516f !important;
  color: #34516f;
  background-color: #64819f;
  background-repeat: repeat;
  border-top: #fff solid 1px;

  -webkit-box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.1);

  text-align: center;

  padding: 20px;
}

.chart-overall {
  /* Font */
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  fill: #34516f !important;
  color: #34516f;
}

.legend-scroll:after {
  content: "";
  display: block;
  height: 20px;
  width: 100%;
}

.tooltip-overall {
  background-color: #8eabc9 !important;
  border: #fff 1px solid;
  fill: #fff;
  color: #fff;
  padding: 20px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
}

.tooltip-inner {
  white-space: nowrap !important;
  max-width: none !important;
}

.button-setting-panel {
  white-space: nowrap;
  border: 1px solid #414e5a;
}

.button-onoff-toggle {
  height: 18px;
  width: 48px;
  background-position: 0 0; /*-20px;*/
  background-repeat: no-repeat;
  background-size: 45px 36px;
  background-image: url("../img/on-off-toggle.png");
  cursor: pointer;
}

/* Popout Version ===========================================*/
* {
  box-sizing: border-box;
}

/*REMOVED*/
#drag-handle {
  z-index: 50;
  position: relative;
  float: right;
  height: 100%;
  width: 5px;
  cursor: col-resize;
  display: none;
  background-color: #cccece;
}

.side-container {
  display: inline-block;
  margin-top: 7px;
}

.size-divs {
  margin: 0;
  display: inline-block;
  vertical-align: top;
}

.padding-0 {
  margin: 0;
  padding: 0;
}

.button-popout-sidepanel {
  position: relative;
  display: inline-block;
  margin: 20px;
  background-color: #ff6600;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

.display-none {
  display: none;
}

.ui-timepicker-wrapper {
  width: 100%;
}

.ui-timepicker-wrapper li {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
}

#errorTable {
  margin: 50px auto 0px auto;
  margin-top: 50px;
  margin-bottom: 50px;
  background-color: #823340;
  display: inline-block;
  padding: 10px 20px;
  border-right: 6px solid #4c1e26;
  border-left: 6px solid #4c1e26;
}

#errorTable svg {
  font-size: 17px;
}

#errorTable {
}

#errorTable tbody tr td {
  font-family: "Yantramanav", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1em;
  text-align: center;
  color: #fff;
}

label.upload-label input[type="file"] {
  position: absolute;
  top: -1000px;
  display: none;
}

.upload-label {
  display: inline-block;
  padding: 3px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #34516f;
  height: 28px;
  padding-top: 7px;

  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
}
.upload-label:hover,
.upload-label:hover span {
  background: #fff;
  color: #34516f !important;
}
.upload-label:active {
  background-color: #fff;
  color: #34516f;
}
.upload-label :invalid + span {
  color: #fff;
}
.upload-label :valid + span {
  color: #fff;
}

#page-preloader {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 100%;
  width: 100%;
  background: rgb(0,0,0);
background: radial-gradient(circle, rgba(0,0,0,1) 9%, rgba(35,72,112,1) 100%);

background-color: #172838;
opacity: 1;
background-size: 12px 12px;
background-image: repeating-linear-gradient(45deg, #1d3043 0, #1d3043 1.2000000000000002px, #172838 0, #172838 50%);

  z-index: 9999;
}

#page-preloader-centered {
  opacity: 1;
}

#page-preloader-centered {
  position: absolute;
  background-color: #253d58;
  width: 250px;
  height: auto;
  left: calc(50% - 125px);
  top: calc(50% - 130px);
  text-align: center;
  padding: 20px;
  border-top: 10px solid #6990bb;
  border-bottom: 10px solid #6990bb;
}

#loading-screen-logo img {
  height: 150px;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

#page-preloader-centered {
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1em;
  color: #fff;
}

.legendTable td {
  padding: 7px 5px;
}

.legendTable,
.legend-popout-container .legendTable {
  margin: 0 auto;
  background-color: #fff;
  outline: rgb(173, 202, 232) solid 1px;
  background-color: rgb(234, 241, 245);
  -webkit-box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.2);

  font-size: 14px !important;
  font-weight: 400;
}

.totalRow,
.legend-popout-container .totalRow {
  border-bottom: 1px solid rgb(173, 202, 232);
}

.legend-colour,
.legend-popout-container .legend-colour {
  border-left: 1px solid rgb(173, 202, 232);
}

.legend-name,
.legend-popout-container .legend-name {
  padding: 5px 10px;
}

.headerRow,
.legend-popout-container .headerRow {
  color: #fff;
  padding: 5px 10px;
  background-color: #34516f;
}

.headerRow th,
.legend-popout-container .headerRow th {
  text-align: center;
  padding: 5px 5px;
}

.legend-overall td,
.legend-popout-container .legend-overall td {
  text-align: left;
  padding: 5px 5px;
}

/* =============================
Charts Info Table
================================*/

.group_select {
  background-color: #34516f;
}

.chart-containment {
  /* position: relative; */
  overflow: hidden;
  border: rgb(173, 202, 232) solid 1px;
}

.chart-outer-wrap {
  display: table; /* !important; */
}

.chart-graph-legend-container {
  height: 100%;
  vertical-align: top;
  display: table-cell;
}

.chart-info-container {
  height: 100%;
  vertical-align: top;
  width: 20%;
  display: table-cell;
  border-left: 1px solid #fff;
  background-color: #34516f;
  -webkit-box-shadow: inset 3px 0px 2px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 3px 0px 2px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 3px 0px 2px 0px rgba(0, 0, 0, 0.1);

  padding: 5px;
}

.chart-info-popout {
  overflow-y: hidden;
  overflow-x: hidden;
  cursor: all-scroll;
  position: absolute !important;
}

.chart-info-popout .top-config-popout-header {
  background-color: #253d58;
}

.chart-info-popout .chart-info-container {
  width: 100%;
  height: calc(100% - 26px);
  padding: 10px;
  border-left: 0px;
}

.chart-info-popout .side-info-collapse-button-container {
  display: none;
}

.chart-info-popout-container {
  padding: 5px;
  overflow: auto;
}

.chart-info-popout #scroll-buffer {
  display: none;
}

.chart-indiv-info-card {
  outline: 1px solid #315b8a;
  background-color: #253d58;
  width: 100%;
  display: inline-block;
  padding-bottom: 15px;
  margin-bottom: 10px;
}

.chart-detail-info {
  color: #fff;
  padding: 0px 15px 0px 15px;

  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;

  text-align: left;
}

.chart-detail-top-bar {
  background-color: #ff7f0e;
  margin-bottom: 10px;

  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
}

.top-bar-text {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  color: #fff;
  padding-top: 3px;
  font-weight: 700;
  text-align: left;
  padding-left: 15px;
}

.chart-detail-info div {
}

.indiv-close-button {
  color: #fff;
}

.indiv-close-button:hover {
  color: #ccc;
}

.chart-detail-info hr {
  margin: 0.25em 0;
}

.indiv-node-name {
  width: 100%;
  background-color: #34516f;
  color: #fff;
  padding: 3px;
}

.no-chart-padding {
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================
Chart Top Settings Config Window
=============================================================*/

.top-info-config {
  height: 60px;
  width: 100%;
  float: left;
  background-color: #8eabc9;
  display: none;
}

.button-detatch-info-config {
}

#config-drag-window,
.chart-info-popout,
#legend-popout-0,
#legend-popout-1,
#legend-popout-2,
#legend-popout-3,
#legend-popout-4,
#legend-popout-5,
#legend-popout-6,
#legend-popout-7,
#legend-popout-8,
#legend-popout-9 {
  top: 200px;
  left: 200px;
  z-index: 999;
  height: 200px;
  width: 300px;
  position: absolute;
  background-color: #8eabc9;
  border: 1px solid #64819f;

  -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
}

.legend-popout,
.chart-info-popout {
  height: auto;
}

#config-drag-window {
  height: auto;
}

.legend-popout {
  background-color: #64819f;
}

.legend-popout .button-legend-detach {
  display: none;
}

.legend-popout-container {
  padding: 10px;
}

.chart-info-popout {
  height: 400px;
  width: 350px;
  background-color: #34516f;
}

.button-detached-close,
#button-detached-close,
.legend-button-detached-close,
.button-detached-minimized,
#button-detached-minimized,
.legend-button-detached-minimized {
  margin: 5px;
  float: right;
  color: #fff;
  cursor: pointer;
}

#top-info-drop-container {
  height: 100%;
  float: left;
  text-align: left;
  overflow: auto;
}

.ui-state-active {
  background-color: #52ab73 !important;
}

#button-config-close,
#button-config-detach,
.button-detached-close,
#button-detached-close,
#button-refresh-chart-top-settings,
#button-edit-chart-top-settings,
#button-delete-chart-top-settings,
#button-save-chart-top-settings,
#button-load-chart-top-settings,
#button-delete-chart-top-settings {
  cursor: pointer;
  color: #fff;
  margin: 5px;
  float: right;
}

#button-config-close:hover,
#button-config-detach:hover,
.button-detached-close,
#button-detached-close:hover,
#button-refresh-chart-top-settings:hover,
#button-delete-chart-top-settings:hover,
#button-edit-chart-top-settings:hover,
#button-save-chart-top-settings:hover,
#button-load-chart-top-settings:hover,
#button-delete-chart-top-settings:hover {
  color: #34516f;
}

.button-detached-close,
#button-detached-close {
  cursor: pointer;
  color: #fff;
  margin: 5px;
  float: right;
}

.button-detached-close,
.button-detached-close:hover,
#button-detached-close:hover,
#button-detached-minimized:hover,
.button-detached-minimized:hover,
.legend-button-detached-minimized:hover {
  color: #8eabc9;
}

#top-info-field-container {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  color: #fff;
}

.top-config-popout-header {
  background-color: #34516f;
  padding: 0px;
  color: #fff;

  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  color: #fff;
}

.top-config-popout-header p {
  float: left;
  padding: 5px 10px 0px 10px;
}

.top-panel-nav-button {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  color: #fff;

  position: relative;
  margin: 1px;
  padding: 5px 10px;
  background-color: #64819f;
  display: inline-block;
  outline: transparent;
  cursor: pointer;
}

#top-info-field-container #container-20-colors {
  display: none;
}

#container-20-colors {
  display: none;
}

#all-panel-settings #container-20-colors {
  display: block;
}

#all-panel-settings #button-update-colors {
  display: none;
}

.top-panel-nav-button:hover {
  background-color: #34516f;
}

#top-info-field-container hr,
#top-info-popout-field-container hr {
  display: none;
}

#top-info-field-container,
#top-info-popout-field-container {
  padding-top: 15px;
  display: table;
  background-color: #34516f;
}

#top-info-popout-field-container,
#top-info-popout-container {
  width: 100%;
  padding: 10px;
}

#top-info-popout-field-container {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  color: #fff;

  background-color: #64819f;
}

#top-info-field-container .col-md-12 {
  display: none !important;
}

.top-panel-button-close {
  margin-left: 8px;
  display: inline-block;
  font-size: 12px;
}

.top-panel-button-close:hover {
  color: #ff3b65;
}

.drag-message {
  color: #c7d4e2;
  font-family: "Yantramanav", sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1em;
  margin: 15px;
}

.field-message {
  color: #516e8c;
  font-family: "Yantramanav", sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1em;
  margin-top: 4px;
}

.color-block {
  display: inline-block;
  margin: 1px;
  height: 18px;
  width: 18px;
  border: 1px solid #fff;
}

.editing-color {
  border: 0px;
  width: 18%;
  margin: 10px 2%;
  height: 30px;
  text-align: center;
  color: #000;
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  cursor: pointer;
}

.cp-app {
  z-index: 9999999999999;
  border-radius: 0px !important;
}

.color-row-number {
  display: inline-block;
  margin: 5px;
  padding-top: 2px;
  vertical-align: top;
}

.popup-color-row-number {
  display: inline-block;
  margin: 3px;
  padding-top: 2px;
  vertical-align: top;
  padding-top: 15px;
  padding-left: 10px;
  width: 8%;
  text-align: center;
}

#left-side-multi-drag,
#right-side-multi-drag {
  position: absolute;
  display: inline-block;
  width: 43%;
  height: 360px;
  left: 10px;
  background-color: rgb(234, 241, 245);
  outline: rgb(173, 202, 232) solid 1px;
  overflow: auto;
  z-index: 10;
}

#right-bucket-sortable .sortable-placeholder {
  height: 25px !important;
  border: 1px dotted black;
  width: 96%;
  margin: 4px 2%;
}

#left-side-multi-drag {
  margin-top: 90px;
  height: 270px;
  overflow-x: hidden;
}

#right-side-multi-drag {
  left: auto;
  right: 10px;
}

#drag-middle-message {
  position: absolute;
  display: table;
  left: 280px;
  text-align: center;
  /* margin: 0 auto; */
  width: 97px;
  height: 360px;
  font-size: 40px;
}

#multi-add-all,
#multi-remove-all {
  display: table-cell;
  vertical-align: middle;
  cursor: pointer;
}

#multi-select {
  width: 100%;
}

#left-side-dropdown-container {
  position: absolute;
  display: inline-block;
  width: 43%;
  height: 360px;
  color: #64819f;
  left: 10px;
  z-index: 50;
  height: 45px;
  font-size: 13px;
}

#group-selection-single {
  position: relative;
  display: block;
  width: 100%;
  padding: 3px 7px;
  margin: 4px 0;
  font-size: 13px;
  cursor: pointer;
  outline: rgb(173, 202, 232) solid 1px;
}

.multi-drag-selection-item {
  position: relative;
  display: block;
  width: 96%;
  padding: 3px 25px 3px 7px;
  margin: 4px 2%;
  background-color: #34516f;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.multi-drag-selection-item:hover {
  background-color: #63809e;
}

.multi-select-dropped-button {
  position: relative;
  display: block;
  width: 96%;
  padding: 3px 20px 3px 7px;
  margin: 4px 2%;
  background-color: #52ab73;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.multi-select-button-close,
.multi-select-button-add {
  right: 7px;
  top: 5px;
  position: absolute;
}

.multi-select-button-close:hover {
  color: #ff3b65;
}

.multi-select-button-add:hover {
  color: #0d0;
}

/* ==========================================================
Archive Page
=============================================================*/
#archive-hierarchy-container,
#archive-browser-container {
}

#archive-tree-hierarchy-container {
  width: 100px;
}

#archive-hierarchy-container {
  float: left;
}

#archive-browser-container {
  overflow: auto;
  overflow-x: auto;
}

#archive-full-container,
#archive-full-header {
  position: relative;
  border: 1px solid #7ca0c5;
  background-color: #eaf1f5;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
}

#archive-full-container {
  overflow-x: auto;
}

#archive-hierarchy-full-container,
#archive-hierarchy-header {
}

#archive-full-header {
  position: relative;
  border: 1px solid #7ca0c5;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
  background-color: #336491;
}

#archive-hierarchy-full-container {
  padding-left: 5px;
}

#archive-full-header,
#archive-hierarchy-header {
  margin: 0;
  border-bottom: 0px;
  margin-top: 20px;
  padding: 5px;

  font-family: "Yantramanav", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}

#archive-hierarchy-header {
  font-size: 18px;
  text-decoration: underline;
  margin-top: 40px;
}

#archive-full-header {
  font-weight: 700;
  line-height: 1.6;
  padding-left: 10px !important;
}

.archive-viewer-panel {
  height: 100%;
  /* border: 1px solid #7ca0c5; */
  display: block;
  white-space: normal;
  border-right: solid #7ca0c5 1px;
  overflow-y: auto;
  overflow-x: hidden;
}

.archive-button-container {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  background-color: #f0fbff;
  overflow: hidden;
  margin: 1px 0px;
  /* margin: 5px; */
  /* height: 40px; */
}

.archive-next-button-icon .fas,
.archive-next-button-icon .fa {
  margin-top: 3px;
}

.archive-default-button {
  margin: 0px;
  color: #64819f;
  cursor: pointer;
  /* position: absolute; */
  float: left;
  /* line-height: 3em; */
  padding: 0px 0px;
  display: inline;
}

.archive-default-button:hover {
  background-color: #64819f;
  color: #fff;
}

.archive-button-text,
.archive-column-warning {
  display: inline-block;
  font-family: "Yantramanav", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1em;
  padding: 3px 8px 3px 8px;
  vertical-align: top;
  overflow: hidden;
}

#archive-main-container #page-header-h1 {
  padding: 0px;
}

.archive-page-container{
  padding-left:0px !important;
}

#archive-main-container{
  height:100vh; 
  overflow:hidden; 
  width:100%; 
}

.archive-column-warning {
  color: #64819f;
}

.archive-button-icon {
  display: inline-block;
  margin: 2px 0px 2px 4px;
  vertical-align: top;
}

.archive-next-button,
.archive-upload-button,
.archive-download-button,
.archive-delete-button {
  height: 100%;
  float: right;
  margin-right: 2px;
  margin-left: 3px;
  text-align: center;
  height: 18px;
  display: table;
  z-index: 10;
  position: relative;
  cursor: pointer;
  color: #fff;
  margin-top: -1px;
}

.archive-upload-button {
  color: #fff;
}

.archive-next-button:hover {
  display: table;
  z-index: 10;
  position: relative;
  cursor: pointer;
}

.archive-next-button-icon,
.archive-next-total-files {
  /*
    display: table-cell;
    vertical-align: middle;
    */
  font-size: 13px;
  margin-top: 0px;
}

.archive-next-total-files {
}

.right-button-container {
  display: inline-block;
  float: right;
  background-color: #64819f;
  padding-left: 1px;
  position: absolute;
  right: 0px;
  padding: 2px 2px;
}

.archive-blue {
  background-color: #64819f;
}

.archive-blue:hover {
  background-color: #253d58;
}

.archive-next-blue {
  color: #64819f;
}

.archive-next-blue:hover {
  color: #336491;
}

.archive-upload-blue {
  color: #64819f;
}

.archive-upload-blue:hover {
  color: #64819f;
}

.archive-purple {
  background-color: #8c859c;
}

.archive-purple:hover {
  background-color: #4e475e;
}

.archive-next-purple {
  background-color: #fff;
  border: 1px solid #8c859c;
  color: #8c859c;
}

.archive-next-purple:hover {
  background-color: #eaf1f5;
}

.archive-upload-purple {
  color: #8c859c;
}

.archive-upload-purple:hover {
  color: #4e475e;
}

.archive-green {
  background-color: #52ab73;
}

.archive-green:hover {
  background-color: #186557;
}

.archive-next-green {
  background-color: #fff;
  border: 1px solid #52ab73;
  color: #52ab73;
}

.archive-next-green:hover {
  background-color: #eaf1f5;
}

.archive-upload-green {
  background-color: #8de6ae;
  border: 1px solid #52ab73;
  border-left: 1px solid #499867;
  border-right: 0px;
  color: #186557;
}

.archive-upload-green:hover {
  background-color: #a4fdc5;
}

.archive-red {
  background-color: #c0717e;
}

.archive-red:hover {
  background-color: #823340;
}

.archive-next-red {
  background-color: #fff;
  border: 1px solid #c0717e;
  color: #c0717e;
}

.archive-next-red:hover {
  background-color: #eaf1f5;
}

.archive-upload-red {
  background-color: #fbacb9;
  border: 1px solid #c0717e;
  border-left: 1px solid #9e5d67;
  border-right: 0px;
  color: #823340;
}

.archive-upload-red:hover {
  background-color: #ffcdd5;
}

.archive-brown {
  background-color: #534a41;
}

.archive-brown:hover {
  background-color: #91887f;
}

.archive-next-brown {
  background-color: #fff;
  border: 1px solid #534a41;
  color: #534a41;
}

.archive-next-brown:hover {
  background-color: #eaf1f5;
}

.archive-orange {
  background-color: #c87840;
}

.archive-orange:hover {
  background-color: #8a3a02;
}

.archive-next-orange {
  background-color: #fff;
  border: 1px solid #c87840;
  color: #c87840;
}

.archive-next-orange:hover {
  background-color: #eaf1f5;
}

.archive-upload-orange {
  background-color: #ffb581;
  border: 1px solid #c87840;
  border-left: 1px solid #a76334;
  border-right: 0px;
  color: #8a3a02;
}

.archive-upload-orange:hover {
  background-color: #ffd3b3;
}

.archive-black {
  background-color: #565353 !important;
  color: white;
}

#overall-charts-container {
  padding: 0px;
}

#dropdown-popup {
  position: absolute;
  display: block;
  float: left;
  margin: 0;
  /*padding: 7px 10px;*/
  cursor: pointer;
  vertical-align: top;
  color: #336491;
  z-index: 999;
  background-color: #fff;
  /* background-image: url(../img/header-nav-background-tile-v2.jpg); */
  color: #336491;
  top: 43px;
  left: 0px;
  position: absolute;
  border: 1px solid #fff;
  /* box-shadow: 0px 0px 10px #fff; */
  border-top: 0px;
  border-bottom: 0px;
}

.arrow-up {
  width: 0;
  height: 0;
  position: absolute;
  margin-top: -10px;
}

.nav-arrow-up {
  font-size: 30px;
  margin-top: -9px;
  color: #336491;
}

.sub-link-button {
  padding: 7px 10px;
  color: #fff;
  min-width: 85px;
  text-align: left;
  border-bottom: 1px solid #fff;
  font-family: "Yantramanav", sans-serif;
  font-size: 15px;
  background-color: #336491;
}

.sub-link-button:hover {
  color: #fff;
  min-width: 85px;
  text-align: left;
  border-bottom: 1px solid #fff;
  font-family: "Yantramanav", sans-serif;
  font-size: 15px;
  background-color: #34516f;
}

.breadcrumb-buttons {
  color: #fff !important;
  cursor: pointer;
}

#full-screen-content {
  height: 100vh;
  overflow: hidden;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.cpp-main-panels {
  height: 100vh;
  text-align: center;
}

.cpp-inner-panels {
  /* height: 100%; */
  overflow: auto;
}

.padding-sm {
  padding: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.padding-sm-l {
  padding-left: 8px;
}

.padding-sm-r {
  padding-right: 8px;
}

/* ==========================================================
CPP Data
=============================================================*/

.cpp-btn-blue-s1 {
  background-color: #34516f;
}

.cpp-btn-blue-s1:hover {
  background-color: #3f6286;
}

.cpp-btn-blue-s2 {
  background-color: #64819f;
}

.cpp-btn-blue-s2:hover {
  background-color: #88a8ca;
}

.cpp-btn-green-s1 {
  background-color: #52ab73;
}

.cpp-btn-green-s1:hover {
  background-color: #5dc182;
}

.cpp-btn-red-s1 {
  background-color: #c1717e;
}

.cpp-btn-red-s1:hover {
  background-color: #d97f8e;
}

.cpp-btn-purple-s1 {
  background-color: #4e475e;
}

.cpp-btn-purple-s1:hover {
  background-color: #665d7b;
}

.cpp-button-active-blue {
  background-color: #dee8ec !important;
}

.cpp-button-active-blue .cpp-button-text,
.cpp-button-active-blue .cpp-button-icon {
  color: #34516f !important;
  z-index: 10;
}

.cpp-button-active-blue .cpp-background-color {
  opacity: 0.9;
  z-index: -1;
}

.cpp-button-center {
  max-height: 100px;
  display: table;
  width: 80%;
  cursor: pointer;
  margin-bottom: 20px;
  margin-left: 10%;
  text-align: center;
  line-height: 1em !important;
  padding: 10px 10px;
}

.cpp-input-field {
  height: 40px;
  display: inline-block;
  width: 90%;
  margin-bottom: 20px;
  padding: 0px 20px;

  color: #7b7a7a;
  text-align: left;
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
}

#main-panels-2 .cpp-input-field {
  height: 40px;
  display: inline-block;
  width: 90%;
  margin-bottom: 20px;
  padding: 0px 20px;

  color: #7b7a7a;
  text-align: left;
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
  max-width: 400px;
  margin: 20px 20px 30px 20px;
}

.cpp-edit-input-field {
  height: 40px;
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  padding: 0px 20px;

  color: #7b7a7a;
  text-align: left;
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  text-align: center;
  margin-bottom: 18px;
  font-weight: 700;
}

#table-overflow-wrap{
  width:98%;
  margin-right:2%;
  overflow-x:auto;
}

.cpp-panel-header {
  display: table;
  height: 75px;
  padding: 15px;
  width: 100%;

  color: #fff;
  text-align: left;
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
}

.panel03-minmax {
  color: #fff;
  text-align: left;
  font-family: "Yantramanav", sans-serif;
  font-size: 12px;
  text-align: center;
  margin-top: -25px;
  margin-bottom: 25px;
}

.cpp-panel-header-inner {
  display: table-cell;
  vertical-align: middle;
  border-bottom: 1px solid #fff;
}

.cpp-number-circle {
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 15px;
  height: 25px;
  width: 25px;
  text-align: center;
  margin-right: 10px;

  line-height: 25px;
}

.cpp-header-text {
  display: inline-block;
}

.cpp-button {
  height: 50px;
  display: inline-block;
  width: 90%;
  margin: auto 5%;
  cursor: pointer;
  margin-bottom: 20px;
}

#main-panels-2 .cpp-button {
  height: 50px;
  display: inline-block;
  width: 90%;
  max-width: 400px;
  cursor: pointer;
  margin: 0px 20px 30px 20px;
}

.cpp-button-alert {
  height: 50px;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  margin-bottom: 20px;
}

.cpp-button-icon {
  color: #fff;
  width: 50px;
  height: 100%;
  position: relative;
  font-size: 21px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  float: left;
}

.cpp-button-text {
  color: #fff;
  height: 100%;
  position: relative;
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  line-height: 52px;
  display: inline-block;
  vertical-align: top;
  float: left;
  padding: 0px 20px;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
}

.cpp-button-text-window {
  color: #fff;
  height: 100%;
  position: relative;
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  line-height: 1.4em;
  display: table-cell;
  text-align: center;
  vertical-align: top;
  float: left;
  padding-left: 10px;
  width: 100%;
}

#popup-cpp-edit-meter-content,
#popup-cpp-edits-content {
  font-size: 16px !important;
}

#popup-cpp-edit-meter-content{

}

.popup-alerts-header,
.popup-simple-header,
.popup-edit-meter-header {
  float: left;
  background-color: red;
  width: 30px;
  height: 100%;
  display: table;
}

.popup-alerts-center-header,
.popup-simple-center-header,
.popup-edit-meter-center-header {
  display: table-cell;
  vertical-align: middle;
  width: 30px;
}

#cpp-alerts-popup-title,
#cpp-simple-popup-title,
#cpp-edit-meter-popup-title,
#cpp-edits-popup-title {
  transform: rotate(-90deg);
  white-space: nowrap;
  position: absolute;
  left: -20px;
}

#cpp-edit-meter-popup-title {
  left: -15px;
}

#cpp-edits-popup-title {
  left: -30px;
}

#popup-cpp-alerts-content,
#popup-cpp-simple-content,
#popup-cpp-edit-meter-content,
#popup-cpp-edits-content {
  color: #fff;
  padding: 30px;
}

.icon-middle {
  vertical-align: middle;
  display: inline-block;
  margin-top: 14px;
  z-index: 10;
}

.cpp-background-color {
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.panel-alt-container {
  width: 100%;
  bottom: 0;
  margin-top: 30px;
  padding-top: 30px;
  display: inline-block;
}

.button-active-arrow {
  color: #dee8ec;
  position: absolute;
  right: 3%;
  font-size: 35px;
  margin-top: 7px;
}

#div-cpp-alerts-close-button,
#div-cpp-simple-close-button,
#div-cpp-edit-meter-close-button {
  z-index: 100;
}

.group-report-popup-button {
  background-color: #253d58;
  text-align: center;
  line-height: 1.4em;
}

.group-report-popup-button .nrg-drop-button-wo-settings:hover {
  color: #253d58;
}

.dropdown-reports-indiv {
  text-align: center;
  padding: 0px 15px;
}

.group-report-popup-button hr {
  margin: 3px;
}

.hover-external-link:hover {
  color: #64819f;
  text-decoration: none;
}

.dropdown-reports-indiv a:hover {
  text-decoration: none;
}

.report-button-background {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.delete-group-button {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #ff4747;
  cursor: pointer;
}

.edit-group-button {
  position: absolute;
  top: 5px;
  left: 5px;
  color: #4dc54d;
  cursor: pointer;
}

.alf.fa-tag {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.delete-group-button:hover,
.edit-group-button:hover {
  color: #fff;
}

.delete-group-button {
  padding: 2px;
}

.edit-group-button {
  padding: 2px;
}

.customer-save-container {
  height: 100px;
  overflow-y: auto;
  padding: 0px 15px;
}

.cpp-data-warning {
  margin-top: -30px;
  background-color: #9a3f52;
  margin-left: 25px;
  margin-right: 25px;
  padding: 5px 0px;
  color: white;
  display: none;
}

#api-data-table {
  margin: 15px;
  margin-bottom: 30px;
  width: 100%;
  min-width:600px;

  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
  color: #fff;
}

#api-data-table_wrapper {
  position: relative;
  clear: both;
  width: 95%;
  display: inline-block;
}

#api-data-table thead th {
  font-size: 18px;
  padding: 10px;
  background-color: #43825a;
  color: #fff;
}

#api-data-table tbody td {
  border: 1px solid #5ba978;
  padding: 10px;
}

#api-data-table_paginate {
  display: block;
  text-align: center;
}

#api-data-table_paginate a {
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
  color: #fff;
  padding: 10px 20px;
  background-color: #325d42;
  cursor: pointer;
  border: solid 1px transparent;
}

#api-data-table_paginate a:hover {
  text-decoration: none;
  background-color: #46805b;
  border: solid 1px #325d42;
}

.icon-td {
  text-align: center;
  padding: 10px 0px !important;
  cursor: pointer;
}

#api-data-table tr:nth-child(even) {
  background: #e0e0e0;
  color: #325d42;
}

#api-data-table tr:nth-child(odd) {
  background: #ffffff;
  color: #325d42;
}

#api-data-table tr:nth-child(even) {
  background: #ffffff;
  color: #325d42;
}

#api-data-table th {
  background-color: transparent;
}

#api-data-table tr:nth-child(even) .icon-edit-td {
  background-color: #34516f !important;
  color: #fff;
}

#api-data-table tr:nth-child(odd) .icon-edit-td {
  background-color: #64819f !important;
  color: #fff;
}

#api-data-table tr:nth-child(even) .icon-delete-td {
  background-color: #842121 !important;
  color: #fff;
}

#api-data-table tr:nth-child(odd) .icon-delete-td {
  background-color: #b12e2e !important;
  color: #fff;
}

.disabled.day {
  opacity: 0.2;
}

.field-divs {
  display: inline-block;
  /* width: 90%; */
  min-width: 400px;
  vertical-align:top;
}
/*
.icon-delete-td{
    background-color: #711f1f !important;
}

*/

#realtime-legend {
  text-align: left;
  padding: 0px;
  height: 185px;
  overflow-y: auto;
}

.legend-card-text {
  display: inline-block;
}

#snapshot-legend {
  text-align: left;
  height: 130px;
  overflow-y: auto;
}

.rt-window-card-close {
  font-size: 18px;
  cursor: pointer;
  margin-top: -2;
  margin-right: -5;
  margin-left: 15px;
}

.legend-card-container {
  max-height: 140px;
  max-width: 23.7%;
  background-color: #ffffff;
  color: #64819f;
  display: inline-block;
  margin: 10px 0 10px 1%;
  vertical-align: top;
  position: relative;
}

.legend-card-data {
  padding: 10px;
}

.legend-card-header {
  width: 100%;
  padding: 5px 10px;
  color: #fff;
}

.legend-card-update-data {
  padding: 2px 2px;
}

.check-box {
  height: auto;
  float: left;
  margin-top: 4px;
  margin-right: 10px;
  font-size: 18px;
}

.legend-more-button {
  color: #fff;
  padding: 5px 10px;
  width: 125px;
  text-align: center;
  display: none;
}

.rt-indicator-color {
  color: #34516f;
}

#rt-chart-controls {
  display: inline-block;
  cursor: pointer;
  color: #fff;
  margin-top: 6px auto;
}

#rt-target-value {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  color: #34516f;
  padding: 2px 7px;
  width: 50px;
  text-align: center;
}

#chart-loading-overlay,
#chart-snapshot-overlay {
  display: block;
  opacity: 1;
  background-image: url(../img/bg-black-80.png);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 500;
}

#chart-dragging-overlay,
#chart-removing-overlay,
#chart-rate-overlay {
  display: none;
  opacity: 1;
  background-image: url(../img/bg-black-80.png);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 500;
}

#chart-dragging-text,
#chart-removing-text,
#chart-rate-text {
  font-family: "Yantramanav", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1em;
  color: #fff;
  top: 50%;
  position: relative;
}

#chart-loading-text,
#chart-snapshot-text {
  font-family: "Yantramanav", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1em;
  color: #fff;
  top: 50%;
  position: relative;
}

.rt-window-card-close {
  font-size: 18px;
  cursor: pointer;
  margin-top: -2;
  margin-right: -5;
}

.modal-title {
  font-size: 18px;
  color: #fff;
  display: inline-block;
}

.modal-content {
  border-radius: 0px;
}

.modal-header {
  color: #fff;
  background-color: #64819f;
  text-align: center;
}

.modal-header .close {
  color: #fff;
}

.modal-body {
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1em;
  color: #34516f;
}

#dt-warning-footer {
  display: inline-block;
  float: left;
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1em;
  color: #34516f;
  padding-top: 5px;
}

.apexcharts-active {
  color: #fff;
}

#chart-01-container .apexcharts-tooltip-title,
#chart-02-container .apexcharts-tooltip-title,
#chart-03-container .apexcharts-tooltip-title {
  color: #336491 !important;
}

#chart-01-container .apexcharts-active,
#chart-02-container .apexcharts-active,
#chart-03-container .apexcharts-active {
  color: #336491 !important;
}

.download-available {
  position: relative;
  background-color: #eef5f8;
  display: inline-block;
  padding: 2px 7px;
  margin-bottom: 5px;
  border-radius: 20px;
  color: #34516f;
  z-index: 40000;
  cursor: pointer;
}

.download-available:hover {
  background-color: #fff;
  display: inline-block;
  padding: 2px 7px;
  margin-bottom: 5px;
  border-radius: 20px;
  color: #63809e;
}

.download-batch {
  display: inline-block;
  padding: 2px 3px 2px 3px;
  margin-bottom: 5px;
  color: #eef5f8;
  border-radius: 20px;
}

.devtools-dropdown-menu {
  right: 0;
  z-index: 1;
  border-radius: 0;
  width: 250px;
  color: #fff !important;
  /* margin-top: 25px; */
  background-color: #253d58;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.dropdown-menu > li > a {
  color: white;
  padding: 0px 7px;
}

.dropdown-menu > li > a:hover {
  background-color: #35577e;
  color: white;
  background-image: none;
}

.meter-drag-item {
  height: 45px;
  cursor: pointer;
}

#chart-timer {
  font-family: "Yantramanav", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-align: right;
  display: inline-block;
  padding-right: 10px;
}

#total-statistics-button {
  display: table;
  float: right;
  position: relative;
}

#meter-data-table th {
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

#meter-data-table td {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #fff;
}

#screenshot-copyright {
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #fff;
  padding: 20px;
}

#meter-data-table.table-bordered > thead > tr > th,
#meter-data-table.table-bordered > tbody > tr > td {
  border: 1px solid white;
}

#meter-data-table > tbody > tr > td,
#meter-data-table > thead > tr > th {
  padding: 2px;
}

#screenshot-loader {
  text-align: center;
  display: inline-block;
  margin: auto;
  padding: 5px 10px;
  border-right: 5px solid #34516f;
  border-left: 5px solid #34516f;
  top: calc(50% - 20px);
  left: calc(50% - 70px);
  position: absolute;
}

#drag-disable-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 999;
  display: none;
  background-image: url("../img/bg-black-80.png");
  background-repeat: repeat;
  text-align: center;
  padding-top: 20px;
  font-family: "Yantramanav", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

#total-rate-dropdown,
#files-download-dropdown {
  vertical-align: middle;
  margin-top: -5px;
  display: inline-block;
  margin-left: 10px;
  width: 150px !important;
}

.realtime-button,
.files-button {
  width: 150px !important;
}

.dashboard-iframe {
  display: inline-block;
  vertical-align: top;
}

#master-overlay {
  z-index: 9999999;
  background-color: #e4eff3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.dashboard-chart-container {
  height: 300px;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 10px;
}

#search-cpp {
  display: inline-block;
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #253d58;
}

#search-cpp input {
  height: 28px;
}

/*
.page-template-page-cpp-data-php #header-navigation-container{display:none;}
.page-template-page-cpp-data-php #header-navigation-container {margin-top:-2000px;}
.page-template-page-cpp-data-php #button-header-collapse{}

*/

.page-access-overlay {
  background-color: #fff;
  width: 100%;
  height: 100%;
  z-index: 100;
  position: absolute;
  text-align: center;
  padding-top: 50px;
}

#page-denied-warning {
  text-align: center;
}

/* Added for report spreadsheet-style display - 10/20/2019 - Manasseh Katz */

.spreadsheet_table tr:nth-child(even) {
  background: #e4f1ff;
}
.spreadsheet_table tr:nth-child(odd) {
  background: #fff;
}

.spreadsheet_table .spreadsheet_row_header,
.spreadsheet_table .spreadsheet_row_header th,
.spreadsheet_table .spreadsheet_row_grandtotal {
  font-family: "Yantramanav", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2em;
  background-color: #8c859c !important;
  color: #fff;

  padding: 3px 5px;
}

.spreadsheet_table .spreadsheet_row_subtotal {
  font-family: "Yantramanav", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2em;
  background-color: #52ab73 !important;
  color: #fff;

  padding: 3px 5px;
}

.spreadsheet_table {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2em;
  color: #34516f !important;
  background-color: #145c93 !important;
  /* background-color: transparent !important; */
}

.spreadsheet_table td {
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
  border: 1px solid #adcae8;
}

.spreadsheet_cell_int,
.spreadsheet_cell_decimal {
}

.spreadsheet_table {
  margin: 10px;
  width: calc(100% - 20px);
}

.spreadsheet_table tbody {
  overflow: auto;
  display: block;
}

.spreadsheet_table thead,
.spreadsheet_table tbody tr,
.spreadsheet_table tfoot {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.spreadsheet_table thead tr:after,
.spreadsheet_table tfoot tr:after {
  /*creates a "cell" at the end of the header to compensate for the scrollbar width 
  content: ''; 
  width:17px; 
  display:table-cell;
  background-color: #8c859c;
  */
}

#cpp-panel-2-meter-id-3-date,
#cpp-panel-2-meter-id-3-time {
  /* display: none; */
}

.datepicker-days .datepicker,
.datepicker-days .table-condensed {
  width: 350px;
  /* height: 350px; */
  font-size: medium;
}

.datepicker-dropdown {
  padding: 0px !important;
}

.ui-timepicker-list li {
  font-size: 150%;
  margin: 12px 0px !important;
}

.ui-timepicker-wrapper {
  width: 350px !important;
  height: 350px !important;
  max-height: 350px !important;
}

.cpp-panel-header {
  cursor: pointer;
}

.data-chart .spreadsheet_table {
  width: auto !important;
  table-layout: auto;
}
.data-chart .spreadsheet_table th {
  white-space: nowrap;
  position: sticky;
}

.data-chart .spreadsheet_table td,
.data-chart .spreadsheet_table th {
  width: auto;
}

.data-chart .spreadsheet_table thead {
  width: auto;
  display: table-header-group;
}

.data-chart tbody tr {
  display: table-row;
}

.data-chart tbody {
  display: table-row-group;
}

.data-chart tfoot {
  display: table-footer-group;
}

.data-chart {
  overflow: auto;
}

.fix-15-margins {
  margin-right: 0px !important;
  margin-left: 0px !important;
}

.add-15-paddings {
  padding-left: 15px;
  padding-right: 15px;
}

.button-edit-contract {
  cursor: pointer;
  display: block;
}

.tooltip {
  pointer-events: none;
}

#contracts-popup-main {
  margin: 0px !important;
}

/* HELP SECTION */

#activate-help {
  margin-left: 3px;
}

.help-overlay {
  position: absolute;

  background-color: rgba(255, 16, 240, 0.5);
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
}

td .tooltip {
  position: absolute;
}

p {
  margin-bottom: 0px !important;
}


/* -----------------------------------------
Modern Stylesheet 
Created January 25th, 2022
------------------------------------------*/

/* ------------------------------------------
Disable features that are not currently used. 
------------------------------------------ */
#header-alert-section {
  display: none;
}

#header-left-side-info {
  float: right;
}

#header-application,
#header-navigation-container {
  background-image: url("../img/header-background-modern-blue.svg");
  background-size: cover;
}

#header-navigation-container {
  background-position: center bottom;
  box-shadow: none;
  -webkit-box-shadow: none;
  text-align: center;
  height: 39px;
}

#theme-switcher-button{
  position: absolute;
  float: right;
  right: 40px;
  top: 10px;
  /* margin-right: 3; */
  cursor: pointer;
  color: #fff;
  color: #fff;
  display: block;
  opacity:.5;
  background: #df78ff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display:none;
}

.first-nav-menu-item {
  border-left: 0px;
}

.header-menu-item,
.nav-drop-button,
.header-menu-item-active {
  padding: 10px 8px;
  color: #fff;
  border-right: 0px;
  box-shadow: none;
  -webkit-box-shadow: none;
  background-image: none;
}

.header-menu-item-active:hover {
  background-image:none;
  background-blend-mode: multiply;
  padding: 10px 8px;
  color: #fff;
  
  box-shadow: none;
  -webkit-box-shadow: none;
}

.header-menu-item-active {
  background-color: #2f5265 !important;
  /*background-image: url("../img/header-background-modern-blue.svg"); */
  background-blend-mode: multiply;
}

.nav-drop-button,
.nav-drop-button:hover {
  padding: 10px 0px;
  margin-left: -34px;
  margin-right:5px;
}

.nav-drop-button:hover {
  background-color: transparent;
  color: #253d58;
  border-right: 0px;
  box-shadow: none;
  -webkit-box-shadow: none;
  background-image: none;
}

#button-load-report-group, #button-create-report-group{
  display:none;
}

#button-load-report, #button-save-chart, #button-save-as-chart, #button-delete-report{
  display:table;
}

#header-navigation-container .header-menu-item:hover {
  background-image: url('../img/header-background-modern-blue.svg');
  background-size: 300%;
  background-position: center;
  color: #fff;
  background-color: #375162;
  background-blend-mode: overlay;
}

#customer-dropdown-middle-aligner {
  height: 50px;
  display: table;
}
#header-customer-dropdown {
  display: table-cell;
  vertical-align: middle;
}

#overall-header {
  max-width: 100%;
}

.header-info,
#header-personal-info-container {
  height: 50px;
}

#header-personal-info-container {
  display: table;
  padding: 0px;
}

#header-greeting-info {
  border-bottom: 0px;
  padding: 0px;
  display: table-cell;
  vertical-align: middle;
}

#header-logo-container {
  padding: 3px 10px;
  height: 50px;
}

#customer-logo img {
  height: 39px;
  width: auto;
  padding-right: 5px;
}

#overall-header .simple-dropdown-content {
  left: 15px;
}

#customer-application-name {
  font-size: 16px;
}

#button-header-collapse {
  top: 60px;
}

#home-content-container {
  margin-top: 118px;
}

.page-color-background {
  background: rgb(23, 37, 54);
  background: linear-gradient(90deg, rgba(23, 37, 54, 1) 0%, rgba(37, 61, 88, 1) 27%, rgba(37, 61, 88, 1) 73%, rgba(23, 37, 54, 1) 100%);
}

.main-content-container {
  background: transparent;
}

#header-fixed-position {
  border-bottom: 1px solid #000;
}

.visually-hidden { 
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
  clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}


#save-dash-content .save-dropdown-button {
  float: left !important;
}

#save-customer-dropdown .float-right{
  float:none !important;
}

#dashboard-save-button {
  left: auto !important;
  transform: none !important;
  margin-top: 10px;
  height:33px;
  padding-top:7px;
}

#dash-name{
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  vertical-align: bottom;
}

.grid-stack-item-content .content-container {
  padding: 10px;
  padding-top: 4px;
}

.external-link-button, .module-more-features{
  color: #145c93;;
  border: none;
  border-left: none;
  border-right: none;
  z-index: 999999 !important;
  position: absolute;
  background-color: transparent;
  border-radius: 0px;
  right: 1px;
  top: 0px;
  cursor:pointer;
}

#home-container-dashboard #dashboard-button-section

.module-more-features{
  right: 8px;
  top: 4px;
}

.window-undock{
  right:20px;
}

.external-link-button a:link, .window-undock a:link,
.external-link-button a:visited, .window-undock a:visited {
  color: #145c93;;
}


.dashboard-controls-background{
  background-image: url('../img/header-background-modern-blue.svg');
  background-position-x: center;
  display:inline-block;
  width: calc(100% + 60px);
  margin-left: -30px; 
}

.non-dashboard-controls-background{
  position:relative;
  background-image: url('../img/header-background-modern-blue.svg');
  background-position-x: center;
  display: inline-block;
  width: 100%;
  z-index:2;
}

.main-charts-page .dashboard-controls-background{
  width: calc(100% - 30px);
    margin-left: 0px;
}

.main-charts-page .controls-background-color{
  margin-left:15px;
  width:calc(100% - 30px);
}

#dashboard-button-section .hr-blue {
  display: none;
}

#home-container-dashboard #dashboard-button-section {
position:relative;
  width:100%;
  text-align:center;
  height:38px;
  margin-bottom:0px;
  margin-top:2px;
  margin-bottom:2px;
}

.realtime-button-section{
  height:auto !important;
}

.content-container.data-chart{
  margin-bottom:15px;
}

.popup-container .content-container.data-chart{
  margin-bottom:0px;
}

.static-chart-heading {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1em;
  /* background-color: #007bff; */
  color: #145c93;
  padding: 5px 10px;
  text-transform: capitalize;
}

/*.static-chart-heading .chart-name{
  display:none;
}
*/

.popup-header .dash-asof{
  display:block;
  margin-top:-4px;
}

#shortcut-link{
  display: inline-block;
    margin-left: 12px;
    cursor:pointer;

}

.calendar-button a:hover {
  outline: 0px !important;
}

.dashboard-controls-background .font-page-header{
  z-index:2;
  position:relative;
}

.font-page-header{
  display: inline-block;
  /*height: 38px;*/
  margin-bottom:0px;
  vertical-align: top;
}

.page-template-page-dash-creator-layout .font-page-header{
  color: #ffffff;
  padding: 10px 20px;
}

/* for other pages */
.font-page-header.page-id-charts, 
.page-template-page-cpp .font-page-header{
  color: #ffffff;
  padding: 10px 20px;
}

#report-title{
  color: #ffffff;
  background-color:transparent;
  width:auto;
}

.font-page-header{
  color: #ffffff;
    padding: 10px 20px;
    display:inline-block;
}

#dashboard-edit-buttons {
  display: inline-block;
  padding: 5px 5px 5px 0px;
  vertical-align: top;
  /* float: right; */
}

.controls-background-color{
  background-color: #145c93;
  width: calc(100% + 30px);
  height: calc(100% + 1px);
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -15px;
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.rt-controls-background-color{
  background-color: #145c93;
  width: 100%;
  height: calc(100% + 1px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.rt-header-adjust{
  z-index:2;
  position:relative;
}


.dash-main-nav{
  margin-left: 5px !important;
  outline:1px solid #86c5df;
  float:right;
  height:30px;
  width:30px;
  z-index: 10;
  padding:0px !important;
}

.button-icon-rainbow-s2 {

}

#resize-overlay{
  z-index: 100;
  width: 100%;
  position: absolute;
}

.dash-asof{
  font-size:10px;
  text-transform: none;
  opacity:.75;
  display:inline-block;
}

.chart-containment{
  border:none;
}

.chart-outer-wrap{
  visibility: hidden;
}

.asof-footer{
  position: absolute;
  bottom: -1px;
  z-index: 50;
  color: #fff;
  width: 100%;
  background-color: #145c93;
  padding-left:10px;
  text-align:center;
}

.asof-footer-charts{
      position: absolute;
      bottom: -15px;
      left: 0px;
      z-index: 50;
      color: #fff;
      width: 100%;
      background-color: #145c93;
      padding-left: 10px;
}

#popup-overall-list label{
  margin-bottom:0px;
  text-align:middle;
}

.button-green-s2-popup,
.button-green-s2-alt-popup {
  display: inline-block;
  padding: 7px 12px;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #52ab73 !important;
}
/* ------------------------------------------
START TABLES Styles : Only used for Tables
------------------------------------------ */

.content-container .spreadsheet_table {
  margin: 0px; 
}

.content-container .spreadsheet_table th {
  color: #000 !important;
}

.content-container .spreadsheet_table tr:nth-child(even) {
  background: #007bff2e;
}

.data-chart .spreadsheet_table {
  height: 100%;
  width: 100% !important;
  display: table;
}

/* ------------------------------------------
END TABLES Styles : Only used for Tables
------------------------------------------ */

.iframe-scroll {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

#grid-stack-container {
  margin-bottom: 50px;
  outline:0px;
}


.container-fluid{
  padding:0px;
}

.container-fluid.dashboard-fluid{
  padding:0px 15px;
  overflow-x: hidden;
}

.data-chart .spreadsheet_table th{
  white-space:normal;
}



.data-chart tfoot, .data-chart .spreadsheet_table thead{
  background-color: #145c93;
  color: #fff !important;
}

.content-container .spreadsheet_table th{
  color: #fff !important;
}

#header-navigation-content{
  height:39px;
}

#dashboard-buttons-hidden-section{
  display:none;
  color: #fff;
  text-align: center;
  height: 12px;
  cursor:pointer;
  width:100px;
  left: 50%;
  transform: translateX(-50px);
  position: relative;
  margin-top: -5px;
  color: #19aded;
  cursor:pointer;
}

.apexcharts-yaxis-title-text{
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.static-version .apexcharts-menu-icon svg{
  fill: #ffffff!important;
}

.apexcharts-canvas.static-version{
  box-shadow: rgb(111, 154, 199) -1px 28px 0px -1px inset;
}

#internal-popup-main{
  font-family: "Yantramanav", sans-serif;
  font-size: 13px;
  font-weight: 400;
  padding:10px 15px;
}

.sortable-link-button{
  display: block;
  cursor: pointer;
  vertical-align: top;
  color: #fff;
  background-color: #34516f;
  margin: 3px 0px;
  cursor:pointer;
}

.sortable-link-button p{
  padding: 7px 12px;
  display:inline-block;
}

.delete-link-button{
  display: inline-block;
    float: right;
    right: 0px;
    height:29px;
}

.delete-link-button:hover{
  outline:0px;
}

.external-link-field{
  display:inline-block;
  margin:2px;
  width:80%;
}

.module-link-button{
  padding:7px 11px !important;
  margin:2px 2px;
  cursor: pointer;
  vertical-align: top;
  color: #fff !important;
}

.module-link-button:hover{
  box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2);
}

.box-edit-content{
  position: relative;
    display: inline-block;
    cursor: pointer;
    color: #fff;
}

#header-searchbar{
  display: inline-block;
  color: #fff;
  vertical-align: top;
  padding-top: 5px;
  cursor: pointer;
  z-index: 100;
  width: 30px;
  overflow: hidden;
  white-space: nowrap;
  padding-left:5px;
}

.search-open, .search-collapse{
  display: inline;
  padding-top: 4px;
  vertical-align:middle;
}

#main-search{
  border-radius: 10px;
  border: 0px;
  margin-left: 10px;
  margin-right:10px;
  width: 521px;
  padding: 0px 10px;
  display: inline;
  font-family: "Yantramanav", sans-serif;
  font-size: 13px;
  font-weight: 400;
  height: 30px;
}

#search-query-window{
  background-color: #317eaab3;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding:10px;
    z-index: 999;
    position: absolute;
    border-bottom: 1px solid #145c93;
    border-left: 1px solid #145c93;
    border-right: 1px solid #145c93;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;

}

#noresults{
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  color:rgb(255, 255, 255);
}

.main-search-item{
  background-color: #fafafa;
  font-size: 13px;
  display: inline-block;
  padding: 6px 14px;
  margin: 2px;
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  color:#000;
  display:none;
}

.main-search-item:hover{
  background-color:#e9f4ff;
}

.main-search-item:hover :before{
  font-family: "Font Awesome 5 Pro";
  content: "\f0da";
  position: absolute;
  margin-left: -8px;
   
}

#report-title{
  display: inline-block;
    margin-left: 5px;
}

#button-sidebar-collapse-closed{
  border:0px;
}

.preloader-text{
  color:#fff !important;
}

#popup-advanced-filtering{
  text-align: center;
  padding-top: 8px;
  max-width:100%!important;
}

.adv-filter{
  width: calc(33.333% - 6px);
    padding: 2px;
    box-sizing: border-box;
    text-align: left;
    padding-top: 4px;
    padding-left: 6px;
}

.adv-filter:hover{
  background-color: #706b7d;
}

.adv-filter label{
  vertical-align: middle;
  margin-top: 4px;
  margin-right: 5px;
  cursor: pointer;
  color:#fff;
}

.adv-filter input{
  cursor:pointer;
}

.adv-checkbox{
  margin-right:3px;
}

.realtime-yaxis-labels{
  padding:10px;
}

#adv-filter-title{
  width: 100%;
  margin: 0 auto;
  display: block;
  margin-bottom:10px;
}

#adv-filter-list{
  display:none;
  flex-wrap: wrap;
  background-color: #8c859c;
  margin-top: -9px;
  padding: 10px;
}

#rt-drop-0{
  text-align: center;
}

#rt-drop-0-container{
  width: calc(100% - 30px);
  margin-left:15px;
}

#realtime-timing-container{
  width: 100%;
}

#rt-chart-controls{
  padding: 10px;
    padding-bottom: 5px;
    margin-top:-3px;
    width: calc(100% - 30px);
    border-top: 1px solid #2f87b4;
}

#report-heading{
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color:#34516f;
  text-align:center;
  background-color:rgb(255, 255, 255);
  margin: 0px 15px;
}

#realtime-timing-container #report-heading{
  font-family: "Yantramanav", sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #ffffff !important;
    text-align: center;
    background-color: rgb(111 154 199);
}

#chart-dd-0-container{
  margin-top:0px !important;
}

#hierarchy-tree .jstree-anchor{
  color:#fff;
}

#chart-00{
  box-shadow: inset 1px -75px 0px -1px #6f9ac7;
}

#apexcharts-xaxis-label{
  color:#fff;
}

#tree-hierarchy-s-all{
  padding-top:3px;
}

#main-table{
  font-family: "Yantramanav", sans-serif;
  font-size: 15px;
  font-weight: 400;
  background-color:#deefff;
  border:1px solid #145c93;
}

.dataTables_scroll thead{
  font-size:14px;
  font-style:bold;
  white-space:nowrap;
  text-align:left;
  background-color:#145c93;
  color:#fff;
  padding:0px;
  cursor:pointer;
  display:table-header-group;
}
#main-table .even{
  background-color:#deefff;
}

.dataTables_scroll th, #main-table td{
  padding:7px;
}

.dataTables_scroll th{
  border-right:1px solid #fff;
}

#main-table td{
  border-right:1px solid #b6d7f7;
}

#main-table th, td {
 
}

.table-link{
  color: #000;
  cursor: pointer;
}

#search-container{
  width:100%;
  text-align:center;
  display:inline-block;
  font-family: "Yantramanav", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color:#fff;
}

#tableSearchField{
  width: 50%;
  margin-top: 10px;
  margin-bottom: -5px;
  position: relative;
  background-color: #145c93;
  border: 1px solid #fff;
  color: #fff;
  padding: 5px 10px;
}

#tableSearchField input::placeholder {
  color: #ffffff
}


.dataTables_scroll .dataTable thead th.sorting:after,
.dataTables_scroll .dataTable thead th.sorting_asc:after,
.dataTables_scroll .dataTable thead th.sorting_desc:after {
  position: absolute;
  float: right;
  top: 3px;
  right: 3px;
  display: block;
  font-family: "Font Awesome 5 Pro";
}

.dataTables_scroll .dataTable thead th.sorting:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f0dc";
  font-size: 0.6em;
  padding-top: 0.12em;
}
.dataTables_scroll .dataTable thead th.sorting_asc:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f0de";
  color: #fff;
  font-size: 0.6em;
}
.dataTables_scroll .dataTable thead th.sorting_desc:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f0dd";
  color: #fff;
  font-size: 0.6em;
}

.dataTables_scroll{
    overflow:auto;
}

#archive-header, .archive-header{
  color:#ffffff;
}

#archive-full-header .breadcrumb-buttons{
  
}

.apexcharts-active {
  color: #fff;
}

#chart-00.apexcharts-tooltip-title,
#chart-00 .apexcharts-tooltip-title,
#chart-00 .apexcharts-tooltip-title {
  color: #ffffff !important;
}

#chart-00 .apexcharts-active,
#chart-00 .apexcharts-active,
#chart-00 .apexcharts-active {
  color: #ffffff !important;
}

#static-legend{
  text-align:left;
  width:100%;
  background-color: #64819f;
  border-top: 1px solid #e1e2e3;
  bottom: 0;
    position: absolute;
}

.apexcharts-legend-series{
  cursor: pointer !important;
}

.apexcharts-legend-series{
  height: 40px;
  padding: 10px 17px;
}

.apexcharts-legend-text{
}

.apexcharts-legend-marker{
}

#static-legend .legend-card-update-data{
  text-align: center;
  padding: 3px 10px 5px 10px;
}

#static-legend .rt-window-card-close{
  margin-left:5px;
}

.card-checkbox{
  height: 18px;
  width: 18px;
  border: 0px;
  outline: 0px;
  float: right;
  margin-right: 2px;
  margin-top: -2px;
}

#static-pagination{
 padding:8px 10px;
 
}

.pagination-center{
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height:1em;
}

#static-pagination .fas{
  font-size:20px;
  margin:0px 10px;
  vertical-align:middle;
}

.pagination-left, .pagination-center, .pagination-right{
  display:inline-block;
}

.pagination-arrow-left, .pagination-arrow-t-right, .pagination-arrow-t-left, .pagination-arrow-right{
  cursor:pointer;
}

.pagination-arrow-left:hover, .pagination-arrow-t-right:hover, .pagination-arrow-t-left:hover, .pagination-arrow-right:hover{
  color:#243b52;
};

.legend-card-update-data{
  padding: 2px 2px;
}

#json-data{
  display:none;
}

.load-button-more-info{
  position: absolute;
  margin-left: 10px;
  margin-top: 10px;
}

.dark-grey-tooltip{
  color:rgb(156, 156, 156)
}

#masterlist-button{
  display: inline-block;
  color: #fff;
  vertical-align: top;
  padding-top: 12px;
  cursor: pointer;
  z-index: 100;
  width: 20px;
  /* overflow: hidden; */
  white-space: nowrap;
  margin-left: 10px;
}

#mlr-search-counter{
  display:inline-block;
  line-height: 1em;
    vertical-align: middle;
    text-align: left;
}

.popover-content-window{
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color:#ffffff;
}

.popover {
  background-color: #000 !important;
}

.bs-popover-auto[x-placement^=bottom] .arrow::after, .bs-popover-bottom .arrow::after{
  border-bottom-color: #000000 !important;
}

.collapse-icon{
  margin-top:2px !important;
  margin-left:1px;
}

.menu-no-name{
  padding-right:0px;
}

.std-menu-item{
  border-right:1px solid #ffffff3d;
  background-color:#145c9366;
}

.drop-menu-item-class{
  padding-right:35px;
}

.last-nav-button, .last-nav-button:hover{
  border-right:0px;
}

#archive-loader{
  background-color: #ffffffc2;
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  z-index: 20;
}

#dropdown-row{
  text-align:center;
}

#dropdown-row label{
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color:#000;
}

#dropdown-row input{ 
  margin-right: 5px;
  vertical-align: middle;
  margin-top: -3px;
}

#dropdown-row input[type="text"] { 
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color:#000;
  margin-left:4px;
  height:25px;
}

.module-dropdown-links{
  width: 100%;
  color: #fff;
  padding: 6px 10px;
  background-color: #2391c2;
  cursor:pointer;
}

.module-dropdown-links p{
  display:inline-block;
}

.dropdown-icon-module {
  padding-left:7px;
  display:inline-block;
  font-size: 12px;
}

.module-dropdown-alllinks{
  width: 100%;
  display: none;
  background-color: #fff;
  padding: 3px;
  border: solid 1px #2391c2;
}

.module-dropdown-alllinks .module-link-button{
  width:100%;
}

.module-dropdown-alllinks .module-link-button{
  margin: 1px 0px;
}

#response-time{
  position:absolute;
  top:0;
  right:15;
  z-index:999;
  color:#fff;
  font-size:10px;
}

.rt-legend-card-info:hover{
  cursor:pointer;
  background-color:transparent !important;
  border:none !important;
}

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
    border-top-color: rgb(0, 0, 0) !important; // Any color here
}

.leg-value-val, .leg-current-val, .leg-average-val{
  font-weight:bold;
}

.legend-complex-card .legend-card-data{
  padding-top:2px !important;
}

.legend-complex-card .leg-value-val{
  font-weight:normal;
  border-bottom: 1px solid #d0d4d9;
  margin-bottom:5px;
}

.legend-complex-card{
  text-align:center;
  max-height:100vh;
}

.legend-complex-card .rt-window-card-close, .legend-complex-card .check-box, .legend-complex-card .leg-value{
  display:none !important;
}

.legend-complex-card .leg-current-val{
  line-height:1.2em;
  font-size: 175%;
  padding: 0px 25px;
}

.legend-complex-card .leg-average-val{
  line-height:1.2em;
  font-size: 125%;
  padding: 0px 25px;
}

.legend-complex-card .rt-indicator-color{
  font-size: 75%;
}

/* Complex Legend Headers */

.legend-complex-card .leg-current, .legend-complex-card .leg-average {
  display:block;
  width:100%;
  margin-top:7px;
}

.legend-complex-card .leg-current{
  margin-top:11px;
}

.legend-complex-card .legend-card-header{
  text-align:center;
}

.legend-complex-card .legend-card-data{
  padding:0px;
}

.legend-complex-card .legend-card-header:hover .rt-window-card-close{
  display:inline-block !important;
}

.legend-complex-card .legend-card-update-data{
  padding:0px;
}

.legend-complex-card.legend-card-container{
  max-width:none;
  display: inline-block;
}

.legend-complex-card .legend-card-text{
  width:100%;
}

.legend-complex-card[data-color="#8c859c"] .legend-options-footer, 
.legend-complex-card[data-color="#52ab73"] .legend-options-footer, 
.legend-complex-card[data-color="#c87840"] .legend-options-footer, 
.legend-complex-card[data-color="#56a395"] .legend-options-footer, 
.legend-complex-card[data-color="#91887f"] .legend-options-footer, 
.legend-complex-card[data-color="#c0717e"] .legend-options-footer,
.legend-complex-card[data-color="#64819f"] .legend-options-footer{
  background-color:#8c859c !important;
  display:block;
  color:#fff;
  padding:15px 15px;
  line-height:1.5em !important;
  margin-top:10px;
  width:100%;
}

.legend-complex-card[data-color="#52ab73"] .legend-options-footer{
  background-color:#52ab73 !important;
}

.legend-complex-card[data-color="#c87840"] .legend-options-footer{
  background-color:#c87840 !important;
}

.legend-complex-card[data-color="#56a395"] .legend-options-footer{
  background-color:#56a395 !important;
}

.legend-complex-card[data-color="#91887f"] .legend-options-footer{
  background-color:#91887f !important;
}

.legend-complex-card[data-color="#c0717e"] .legend-options-footer{
  background-color:#c0717e !important;
}

.legend-complex-card[data-color="#64819f"] .legend-options-footer{
  background-color:#64819f !important;
}


[data-color="#8c859c"]{
  color:#8c859c !important;
}

[data-color="#52ab73"]{
  color:#52ab73 !important;
}

[data-color="#c87840"]{
  color:#c87840 !important;
}

[data-color="#56a395"]{
  color:#56a395 !important;
}

[data-color="#91887f"]{
  color:#91887f !important;
}

[data-color="#c0717e"]{
  color:#c0717e !important;
}

[data-color="#64819f"]{
  color:#64819f !important;
}


.legend-complex-card .color-blue-s1, .legend-complex-card .rt-indicator-color{
  color:inherit;
}

.legend-card-container{
  max-width:none;
  display:inline-block;
}

#iframe-loading{
  z-index:1000;
  background-color:rgb(255, 255, 255);
  height:100%;
  width:100%;
  position:absolute;

  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#iframe-loading #chart-loading-text{
  position: absolute;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:16px;
  color:#317fab;
}

#iframe-loading #chart-loading-text #rt-load-messaging{
  margin-left:10px;
}

#bvs-import-main-container, .bvs-content-outer{
  background-color: #f0fbff;
}

#page-preloader-centered{
  outline:#ffffff9e solid 1px;
}

.statics-xaxis-label tspan{
  transform: rotate(-0.25turn);
}
/* ================================================================= */
/* START BLUES Theme */
/* ================================================================= */

/* COLOR SET */
.theme-blues.bg1{ background-color:#145c93;}
.theme-blues.bg2{ background-color:#2391c2;}
.theme-blues.bg3{ background-color:#86c5df;}
.theme-blues.bg4{ background-color:#8c859c;}
.theme-blues.bg5{ background-color:#89be78;}
.theme-blues.bg6{ background-color:hsl(0, 0%, 57%);}

.page-template.theme-blues{
  background: rgb(0,0,0);
background: radial-gradient(circle, rgba(0,0,0,1) 9%, rgba(35,72,112,1) 100%);

background-color: #172838;
opacity: 1;
background-size: 12px 12px;
background-image: repeating-linear-gradient(45deg, #1d3043 0, #1d3043 1.2000000000000002px, #172838 0, #172838 50%);
}

#header-application.theme-blues, #header-navigation-container.theme-blues, #header-mobile-menu.theme-blues{
  background-image: url('../img/header-background-modern-blue.svg');
}

#header-navigation-container.theme-blues, .theme-blues #rt-chart-controls{
}

.theme-blues #header-fixed-position{
  border-bottom: 1px solid #000;
}

.theme-blues #page-preloader-centered{
  border-top: 10px solid rgb(25 173 237);
  border-bottom: 10px solid rgb(25 173 237);
}

.theme-blues .dashboard-controls-background, .theme-blues .non-dashboard-controls-background{
  background-image: url('../img/header-background-modern-blue.svg');
  background-size:200%;
  background-position:center;
  color:#fff;
}

g.yLabel-0{
  display:none;
}


.theme-blues,
.theme-blues .static-chart-heading,
.theme-blues #report-heading,
.theme-blues a:link, 
.theme-blues a:visited{
  color:#145c93;
}

.theme-blues .ql-editor h1,
.theme-blues .ql-editor h2, 
.theme-blues .ql-editor h3, 
.theme-blues .ql-editor h4, 
.theme-blues .ql-editor p{
  color:#ffffff;
}

.theme-blues .transp-active .svg-container text, .theme-blues .transp-active .svg-container .tick{
  fill:#ffffff;
}

.theme-blues .transp-active .svg-container .domain, .theme-blues .transp-active .svg-container .tick line{
  stroke:#ffffff !important;
}

#dashboard-buttons-hidden-section.theme-blues{
  color: #19aded;
}

.header-menu-item.theme-blues{
  color:#fff !important;
}

.header-menu-item.theme-blues:hover, .header-menu-item-active.theme-blues{
  background-image: url('../img/header-background-modern-blue.svg');
    background-size: 300%;
    background-position: center;
    color: #fff;
    background-color: #375162;
    background-blend-mode: overlay;
}

.header-menu-item-active.theme-blues:hover{
  background-blend-mode: multiply;
}

.theme-blues .asof-footer, .theme-blues #page-preloader-centered, #customer-header-button.theme-blues, .simple-dropdown-content.theme-blues, #button-header-collapse.theme-blues, .sub-link-button.theme-blues, .theme-blues .customer-save-item{
  background-color: #145c93;
  color:#fff !important;
}

.nav-drop-button.theme-blues{
  color:#fff;
}

.nav-drop-button.theme-blues:hover{
  color:#243b52;
}

.simple-dropdown-content.theme-blues a:hover, .sub-link-button.theme-blues:hover, .theme-blues .collapse-vert-text, .theme-blues #button-sidebar-collapse-closed{
  background-color: #145c93;
  color:#fff;
  text-decoration:none;
}

a:hover{
  text-decoration:none !important;
}

#sign-out-button.theme-blues, .nav-arrow-up.theme-blues{
  color:#fff !important;
}

.theme-blues .content-container .spreadsheet_table tr:nth-child(even){
  background:#c3dffa;
}

.theme-blues #div-overall-close-button:hover{
  color:#4d7fb2;
}

.theme-blues .themed-bottom-border{
  border-bottom: 1px solid #4d7fb2;
}

.theme-blues #overall-popup-title, .theme-blues .button-blue-s1{
  background-color:#145c93;
}

.theme-blues .button-blue-s1:hover{
  background-color:#4d7fb2;
}

.theme-blues .data-chart tfoot, .theme-blues .data-chart .spreadsheet_table thead{
  background-color: #145c93d4;
  color: #fff !important;
}

.theme-blues .spreadsheet_table td{
  border: 1px solid #a5c6e7;
}

.theme-blues .content-container .spreadsheet_table th{
  color: #fff !important;
}

.theme-blues #popup-overall, .theme-blues #button-header-collapse{
  border:#4d7fb2;
}

.theme-blues #customer-header-button{
  border-top: 1px solid #6889a2;
}

.theme-blues #footer-application{
  background-image: url('../img/header-background-modern-blue.svg');
  border-top:0px;
}


/* ================================================================= */
/* END BLUES Theme */
/* ================================================================= */

/* ================================================================= */
/* START minty Theme */
/* ================================================================= */
.page-template.theme-minty{
  background: rgb(40,80,131);
background: linear-gradient(110deg, rgb(22 46 76) 22%, rgb(40 80 131) 51%, rgb(22 46 76) 79%)
}

#header-application.theme-minty, #header-navigation-container.theme-minty{
  background-image: url('../img/header-background-modern-minty.jpg');
}

#header-navigation-container.theme-minty, .theme-minty #rt-chart-controls{
  border-top: 1px solid #42c59b;
}

.theme-minty #header-fixed-position{
  border-bottom: 1px solid #42c59b;
}

.theme-minty #page-preloader-centered{
  border-top: 10px solid #42c59b;
  border-bottom: 10px solid #42c59b;
}

.theme-minty .dashboard-controls-background{
  background-image:  url('../img/header-background-modern-minty.jpg');
  background-position:center;
  background-size:200%;
  color:#fff;
}

.theme-minty .dash-main-nav{
  outline: 1px solid #72b9a2
}


.theme-minty,
.theme-minty .static-chart-heading,
.theme-minty #report-heading,
.theme-minty a:link, 
.theme-minty a:visited{
  color:#279f78;;
}

.theme-minty .ql-editor h1,
.theme-minty .ql-editor h2, 
.theme-minty .ql-editor h3, 
.theme-minty .ql-editor h4, 
.theme-minty .ql-editor p{
  color:#279f78;
}

.theme-minty .transp-active .svg-container text, .svg-container .tick{
  fill:#ffffff;
}

.theme-minty .transp-active .svg-container .domain, .theme-minty .transp-active .svg-container .tick line{
  stroke:#ffffff; !important;
}

#dashboard-buttons-hidden-section.theme-minty{
  color: #42c59b;
}

.header-menu-item.theme-minty{
  color:#fff !important;
}

.header-menu-item.theme-minty:hover, .header-menu-item-active.theme-minty{
  background-image: url('../img/header-background-modern-minty-blue.jpg')  !important;;
  background-blend-mode: normal !important;
  color:#fff !important;
}

.header-menu-item-active.theme-minty:hover{
  background-blend-mode: multiply;
}

.theme-minty #page-preloader-centered, #customer-header-button.theme-minty, .simple-dropdown-content.theme-minty, #button-header-collapse.theme-minty, .sub-link-button.theme-minty, .theme-minty .customer-save-item{
  background-color: #285083;
  color: #ffffff !important;
  cursor:pointer;
}

.theme-minty #customer-header-button, .theme-minty .simple-dropdown-content a, .theme-minty .simple-dropdown-content-save a{
  border-top: 1px solid #91b5e3
}


.simple-dropdown-content.theme-minty a:hover, .sub-link-button.theme-minty:hover,  .theme-minty .collapse-vert-text, .theme-minty #button-sidebar-collapse-closed{
  background-color: #3d73b7;
  color:#fff; !important;
  text-decoration:none;
}

.nav-drop-button.theme-minty{
  color:#fff;
}

.nav-drop-button.theme-minty:hover{
  color:#285083;
}

a:hover{
  text-decoration:none !important;
}

#sign-out-button.theme-minty, .nav-arrow-up.theme-minty{
  color:#d3fff1 !important;
}

.theme-minty .content-container .spreadsheet_table tr:nth-child(even){
  background:#d3fff1;
}

.theme-minty #div-overall-close-button:hover{
  color:#84efcd;;
}

.theme-minty .themed-bottom-border{
  border-bottom: 1px solid #71c7ab
}

.theme-minty #popup-overall{
  background-color:#fff;
}

.theme-minty #overall-popup-title, .theme-minty .button-blue-s1, .theme-minty #button-header-collapse{
  background-color:#279f78;;
}

.theme-minty .button-blue-s1:hover, theme-minty .simple-dropdown-content-save a:hover{
  background-color:#1e8061;;
}

.theme-minty .asof-footer, .theme-minty #left-container-hub-charts, .theme-minty #left-container-hub-archive, .theme-minty .data-chart tfoot, .theme-minty .data-chart .spreadsheet_table thead{
  background-color: #279f78;
  color: #fff !important;
}

.theme-minty .bg-blue-s2, .theme-minty .bg-blue-s3, .theme-minty #button-sidebar-collapse-opened{
  background-color:#285083;
  border:0px;
}

.theme-minty .bg-purple-s2, .theme-minty .bg-purple-s3{
  background-color:#3972bb;
}

.theme-minty .color-blue-s4{
  color:#ffffff;
}

.theme-minty .spreadsheet_table td{
  border: 1px solid #8ddbc1;
}

.theme-minty .content-container .spreadsheet_table th{
  color: #fff !important;
}



.theme-minty #footer-application{
  background-image: url('../img/header-background-modern-minty.jpg');
  border-top:0px;
}


/* ================================================================= */
/* END minty Theme */
/* ================================================================= */

/* ================================================================= */
/* START Midnight Theme */
/* ================================================================= */
.page-template.theme-midnight{
  background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(32,30,38,1) 33%, rgba(32,30,38,1) 62%, rgba(0,0,0,1) 100%);
}

#header-application.theme-midnight, #header-navigation-container.theme-midnight{
  background-image: url('../img/header-background-modern-midnight.jpg');
}


#header-navigation-container.theme-midnight, .theme-midnight #rt-chart-controls{
  border-top: 1px solid #665f70;
}

.theme-midnight #header-fixed-position{
  border-bottom: 1px solid #665f70;
}

.theme-midnight #page-preloader-centered{
  border-top: 10px solid #665f70;
  border-bottom: 10px solid #665f70;
}


.theme-midnight,
.theme-midnight #report-heading,
.theme-midnight .static-chart-heading,
.theme-midnight a:link, 
.theme-midnight a:visited{
  color:#403c50;
}

.theme-midnight .ql-editor h1,
.theme-midnight .ql-editor h2, 
.theme-midnight .ql-editor h3, 
.theme-midnight .ql-editor h4, 
.theme-midnight .ql-editor p{
  color:#9e97bb;
}

.theme-midnight .transp-active .svg-container text, 
.theme-midnight .transp-active .svg-container .tick{
  fill:#ffffff;
}

.theme-midnight .transp-active .svg-container .domain, .theme-midnight .transp-active .svg-container .tick line{
  stroke:#ffffff; !important;
}

.theme-midnight .dashboard-controls-background{
  background-image:  url('../img/header-background-modern-midnight.jpg');
  color:#fff;
}

#dashboard-buttons-hidden-section.theme-midnight{
  color: #665f70;
}

.theme-midnight .dash-main-nav{
  outline: 1px solid #8d8d8d;
}

.header-menu-item.theme-midnight{
  color:#fff !important;
}

.header-menu-item.theme-midnight:hover, .header-menu-item-active.theme-midnight{
  background-image: url('../img/header-background-modern-midnight.jpg')  !important;;
  background-blend-mode: multiply !important;
  color:#fff !important;
}

.header-menu-item-active.theme-midnight:hover{
  background-blend-mode: multiply;
}

.theme-midnight #page-preloader-centered, #customer-header-button.theme-midnight, .simple-dropdown-content.theme-midnight, #button-header-collapse.theme-midnight, .sub-link-button.theme-midnight, .theme-midnight .customer-save-item{
  background-color: #16151a;
  color: #ffffff !important;
}

.nav-drop-button.theme-midnight{
  color:#fff;
}

.nav-drop-button.theme-midnight:hover{
  color:#9e97bb;
}

.simple-dropdown-content.theme-midnight a:hover, .sub-link-button.theme-midnight:hover, .theme-midnight .collapse-vert-text, .theme-midnight #button-sidebar-collapse-closed{
  background-color: #403c50;;
  color:#fff !important;
  text-decoration:none;
}

a:hover{
  text-decoration:none !important;
}

#sign-out-button.theme-midnight, .nav-arrow-up.theme-midnight {
  color: #8a8691 !important;
}

.theme-midnight .content-container .spreadsheet_table tr:nth-child(even){
  background:#ddd9e7;
}

.theme-midnight #div-overall-close-button:hover{
  color:#c0b8d3;
}

.theme-midnight .themed-bottom-border{
  border-bottom: 1px solid #645a7c;
}

.theme-midnight #overall-popup-title, .theme-midnight .button-blue-s1{
  background-color:#3b3940;
}

.theme-midnight .button-blue-s1:hover{
  background-color:#403c50;
}

.theme-midnight .asof-footer, .theme-midnight #left-container-hub-charts, .theme-midnight #left-container-hub-archive, .theme-midnight .data-chart tfoot, .theme-midnight .data-chart .spreadsheet_table thead{
  background-color: #3e3b46;
  color: #fff !important;
}

.theme-midnight .bg-blue-s2, .theme-midnight .bg-blue-s3, .theme-midnight #button-sidebar-collapse-opened{
  background-color:#9283af;
  border:0px;
}

.theme-midnight .bg-purple-s2, .theme-midnight .bg-purple-s3{
  background-color:#655a83;
}

.theme-midnight .color-blue-s4{
  color:#9283af;
}

.theme-midnight .spreadsheet_table td{
  border: 1px solid #bdbdbd;
}

.theme-midnight .content-container .spreadsheet_table th{
  color: #fff !important;
}

.theme-midnight #popup-overall, .theme-midnight #button-header-collapse{
  border:#403c50;
}

.theme-midnight #customer-header-button{
  border-top: 1px solid #5d5774;
}

.theme-midnight .simple-dropdown-content-save a:hover {
  background-color: #403c50;
}

.theme-midnight .simple-dropdown-content a, .theme-midnight .simple-dropdown-content-save a{
  border-top:1px solid #464350;
}

.theme-midnight #footer-application{
  background-image: url('../img/header-background-modern-midnight.jpg');
  border-top:0px;
}

.theme-midnight #search-query-window{
    background-color: #0d1a22b3;
      border-bottom: 1px solid #0d1a22;
      border-left: 1px solid #0d1a22;
      border-right: 1px solid #0d1a22;
  
}




/* ================================================================= */
/* END Midnight Theme */
/* ================================================================= */

/* ================================================================= */
/* START DARK Theme */
/* ================================================================= */
.page-template.theme-dark{
  background: rgb(57,47,41);
  background: #000;
}

#header-application.theme-dark, #header-navigation-container.theme-dark{
  background-image: url('../img/header-background-modern-dark.jpg');
}

#header-navigation-container.theme-dark, .theme-dark #rt-chart-controls{
  border-top: 1px solid #4b4b4b;
}

.theme-dark #header-fixed-position{
  border-bottom: 1px solid #4b4b4b;
}

.theme-dark #page-preloader-centered{
  border-top: 10px solid #000000;
  border-bottom: 10px solid #000000;
}


.theme-dark,
.theme-dark #report-heading,
.theme-dark .static-chart-heading,
.theme-dark a:link, 
.theme-dark a:visited{
  color:rgb(152, 152, 152);
}

.theme-dark .ql-editor h1,
.theme-dark .ql-editor h2, 
.theme-dark .ql-editor h3, 
.theme-dark .ql-editor h4, 
.theme-dark .ql-editor p{
  color:#a3a3a3;
}

.theme-dark .transp-active .svg-container text, 
.theme-dark .transp-active .svg-container .tick{
  fill:#ffffff;
}

.theme-dark .transp-active .svg-container .domain, .theme-dark .transp-active .svg-container .tick line{
  stroke:#ffffff; !important;
}

.theme-dark .dashboard-controls-background{
  background-image:  url('../img/header-background-modern-dark.jpg');
  color:#fff;
}

#dashboard-buttons-hidden-section.theme-dark{
  color: #4b4b4b;
}

.theme-dark .dash-main-nav{
  outline: 1px solid #8d8d8d;
}

.header-menu-item.theme-dark{
  color:#a3a3a3 !important;
}

.header-menu-item.theme-dark:hover, .header-menu-item-active.theme-dark{
  background-image: url('../img/header-background-modern-dark.jpg')  !important;;
  background-blend-mode: multiply !important;
  color:#a3a3a3 !important;
}

.header-menu-item-active.theme-dark:hover{
  background-blend-mode: multiply;
}

.theme-dark #page-preloader-centered, #customer-header-button.theme-dark, .simple-dropdown-content.theme-dark, #button-header-collapse.theme-dark, .sub-link-button.theme-dark, .theme-dark .customer-save-item{
  background-color: #444343;
    color: #a3a3a3 !important;
}

.nav-drop-button.theme-dark{
  color:#fff;
}

.nav-drop-button.theme-dark:hover{
  color:#727272;
}

.simple-dropdown-content.theme-dark a:hover, .sub-link-button.theme-dark:hover, .theme-dark .collapse-vert-text, .theme-dark #button-sidebar-collapse-closed{
  background-color: 282828;;
  color:#a3a3a3; !important;
  text-decoration:none;
}

a:hover{
  text-decoration:none !important;
}

#sign-out-button.theme-dark, .nav-arrow-up.theme-dark{
  color:#d9d9d9 !important;
}

.theme-dark .content-container .spreadsheet_table tr:nth-child(even){
  background:#d9d9d9;
}

.theme-dark #div-overall-close-button:hover{
  color:#5e5e5e;;
}

.theme-dark .themed-bottom-border{
  border-bottom: 1px solid rgb(65, 64, 64);
}

 .theme-dark #overall-popup-title, .theme-dark .button-blue-s1{
  background-color:#000;;
}

.theme-dark .button-blue-s1:hover{
  background-color:rgb(65, 65, 65);;
}

.theme-dark .asof-footer, .theme-dark #left-container-hub-charts, .theme-dark #left-container-hub-archive, .theme-dark .data-chart tfoot, .theme-dark .data-chart .spreadsheet_table thead{
  background-color: #444343;
    color: #a3a3a3 !important;
}

.theme-dark .bg-blue-s2, .theme-dark .bg-blue-s3, .theme-dark #button-sidebar-collapse-opened{
  background-color:#959494;
  border:0px;
}

.theme-dark .bg-purple-s2, .theme-dark .bg-purple-s3{
  background-color:#707070;
}

.theme-dark .color-blue-s4{
  color:#959494;
}

.theme-dark .spreadsheet_table td{
  border: 1px solid #b7b3b0;
}

.theme-dark .content-container .spreadsheet_table th{
  color: #fff !important;
}

.theme-dark #popup-overall, .theme-dark #button-header-collapse{
  border:#000;
}

.theme-dark #customer-header-button{
  border-top: 1px solid #585858;
}

.theme-dark .simple-dropdown-content-save a:hover {
  background-color: #51433a;
}

.theme-dark .simple-dropdown-content a, .theme-dark .simple-dropdown-content-save a{
  border-top:1px solid #383838;
}

.theme-dark #footer-application{
  background-image: url('../img/header-background-modern-dark.jpg');
  border-top:0px;
}

.theme-dark #search-query-window{
  background-color: #000000b3;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}

.theme-dark .main-search-item{
  color:#000000 !important;
}

/* ================================================================= */
/* END DARK Theme */
/* ================================================================= */

/* ================================================================= */
/* START OUTRUN Theme */
/* ================================================================= */
.page-template.theme-outrun{
  background: rgb(96,12,40);
  background: linear-gradient(180deg, #053242 0%, #02749d 45%, #02749d 55%, #fd678e 100%);

}

#header-application.theme-outrun, #header-navigation-container.theme-outrun{
  background-image: url('../img/header-background-modern-outrun.jpg');
}

#header-navigation-container.theme-outrun, .theme-outrun #rt-chart-controls{
  border-top: 1px solid #70d8ff;
}

.theme-outrun #header-fixed-position{
  border-bottom: 1px solid #70d8ff;
}

.theme-outrun #page-preloader-centered{
  border-top: 10px solid #70d8ff;
  border-bottom: 10px solid #70d8ff;
}


.theme-outrun,
.theme-outrun #report-heading,
.theme-outrun .static-chart-heading,
.theme-outrun a:link, 
.theme-outrun a:visited{
  color:#e75988;
}

.theme-outrun .ql-editor h1,
.theme-outrun .ql-editor h2, 
.theme-outrun .ql-editor h3, 
.theme-outrun .ql-editor h4, 
.theme-outrun .ql-editor p{
  color:#ffffff;
}

.theme-outrun .transp-active .svg-container text, 
.theme-outrun .transp-active .svg-container .tick{
  fill:#ffffff;
}

.theme-outrun .transp-active .svg-container .domain, .theme-outrun .transp-active .svg-container .tick line{
  stroke:#ffffff; !important;
}

.theme-outrun .dashboard-controls-background{
  background-image:  url('../img/header-background-modern-outrun-pink.jpg');
  color:#fff;
}

.theme-outrun .dash-main-nav{
  outline: 1px solid #ffadc0;
}

.header-menu-item.theme-outrun{
  color:#fff !important;
}

.header-menu-item.theme-outrun:hover, .header-menu-item-active.theme-outrun{
  background-image: url('../img/header-background-modern-outrun-pink.jpg')  !important;;
  background-blend-mode: normal !important;
  color:#fff !important;
}

#dashboard-buttons-hidden-section.theme-outrun{
  color: #70d8ff;
}

.header-menu-item-active.theme-outrun:hover{
  background-blend-mode: multiply;
}

.theme-outrun #page-preloader-centered, #customer-header-button.theme-outrun, .simple-dropdown-content.theme-outrun, #button-header-collapse.theme-outrun, .sub-link-button.theme-outrun, .theme-outrun .customer-save-item{
  background-color: #e75988;
  color: #ffffff !important;
}

.nav-drop-button.theme-outrun{
  color:#fff;
}

.nav-drop-button.theme-outrun:hover{
  color:#e75988;
}

.simple-dropdown-content.theme-outrun a:hover, .sub-link-button.theme-outrun:hover,  .theme-outrun .collapse-vert-text, .theme-outrun #button-sidebar-collapse-closed{
  background-color: #b14b6d;;
  color:#fff; !important;
  text-decoration:none;
}

a:hover{
  text-decoration:none !important;
}

#sign-out-button.theme-outrun, .nav-arrow-up.theme-outrun{
  color:#fff !important;
}

.theme-outrun .content-container .spreadsheet_table tr:nth-child(even){
  background:#ffe4ed;
}

.theme-outrun #div-overall-close-button:hover{
  color:#a0cedb;
}

.theme-outrun .themed-bottom-border{
  border-bottom: 1px solid #b2c7cd;
}

.theme-outrun #overall-popup-title, .theme-outrun .button-blue-s1{
  background-color:#0095c0;
}

.theme-outrun .button-blue-s1:hover{
  background-color:#057191;
}

.theme-outrun .asof-footer, .theme-outrun #left-container-hub-charts, .theme-outrun #left-container-hub-archive, .theme-outrun .data-chart tfoot, .theme-outrun .data-chart .spreadsheet_table thead{
  background-color: #0095c0;
  color: #fff !important;
}

.theme-outrun .bg-blue-s2, .theme-outrun .bg-blue-s3, .theme-outrun #button-sidebar-collapse-opened{
  background-color:#f86486;
  border:0px;
}

.theme-outrun .bg-purple-s2, .theme-outrun .bg-purple-s3{
  background-color:#bd526a;
}

.theme-outrun .color-blue-s4{
  color:#f9d7e2;
}

.theme-outrun .spreadsheet_table td{
  border: 1px solid #8dcbdd;
}

.theme-outrun .content-container .spreadsheet_table th{
  color: #fff !important;
}

.theme-outrun #popup-overall, .theme-outrun #button-header-collapse{
  border:#775235;
}

.theme-outrun #customer-header-button{
  border-top: 1px solid #e5adbf
}

.theme-outrun .simple-dropdown-content-save a:hover {
  background-color: #51433a;
}

.theme-outrun .simple-dropdown-content a, .theme-outrun .simple-dropdown-content-save a{
  border-top:1px solid #f99bba;
}

.theme-outrun #footer-application{
  background-image: url('../img/header-background-modern-outrun.jpg');
  border-top:0px;
}

.theme-tricks #search-query-window{
  background-color: #0098c4b3;
    border-bottom: 1px solid #0098c4;
    border-left: 1px solid #0098c4;
    border-right: 1px solid #0098c4;
}


/* ================================================================= */
/* END OUTRUN Theme */
/* ================================================================= */

/* ================================================================= */
/* START superhero Theme */
/* ================================================================= */
.page-template.theme-superhero{
  background: rgb(96,12,40);
background: linear-gradient(196deg, rgb(0 7 33) 20%, rgb(88 13 30) 50%, rgb(82 20 31) 55%, rgb(2 7 33) 80%)
}

#header-application.theme-superhero, #header-navigation-container.theme-superhero{
  background-image: url('../img/header-background-modern-superhero.jpg');
}

#header-navigation-container.theme-superhero, .theme-outrun #rt-chart-controls{
  border-top: 1px solid #ab233a;
}

.theme-superhero #header-fixed-position{
  border-bottom: 1px solid #ab233a;
}

.theme-superhero #page-preloader-centered{
  border-top: 10px solid #ab233a;
  border-bottom: 10px solid #ab233a;
}


.theme-superhero,
.theme-superhero #report-heading,
.theme-superhero .static-chart-heading,
.theme-superhero a:link, 
.theme-superhero a:visited{
  color:#a7092d;
}

.theme-superhero .ql-editor h1,
.theme-superhero .ql-editor h2, 
.theme-superhero .ql-editor h3, 
.theme-superhero .ql-editor h4, 
.theme-superhero .ql-editor p{
  color:#ffffff;
}

.theme-superhero .transp-active .svg-container text, 
.theme-superhero .transp-active .svg-container .tick{
  fill:#ffffff;
}

.theme-superhero .transp-active .svg-container .domain, .theme-superhero .transp-active .svg-container .tick line{
  stroke:#ffffff; !important;
}

.theme-superhero .dashboard-controls-background{
  background-image:  url('../img/header-background-modern-superhero.jpg');
  color:#fff;
}

.theme-superhero .dash-main-nav{
  outline: 1px solid #7b87a9;
}

.header-menu-item.theme-superhero{
  color:#fff !important;
}

.header-menu-item.theme-superhero:hover, .header-menu-item-active.theme-superhero{
  background-image: url('../img/header-background-modern-superhero-red.jpg')  !important;;
  background-blend-mode: normal !important;
  color:#fff !important;
}

#dashboard-buttons-hidden-section.theme-superhero{
  color: #ab233a;
}

.header-menu-item-active.theme-superhero:hover{
  background-blend-mode: multiply;
}

.theme-superhero #page-preloader-centered, #customer-header-button.theme-superhero, .simple-dropdown-content.theme-superhero, #button-header-collapse.theme-superhero, .sub-link-button.theme-superhero, .theme-superhero .customer-save-item{
  background-color: #a7092d;
  color: #ffffff !important;
}

.nav-drop-button.theme-superhero{
  color:#fff;
}

.nav-drop-button.theme-superhero:hover{
  color:#a7092d;
}

.simple-dropdown-content.theme-superhero a:hover, .sub-link-button.theme-superhero:hover, .theme-superhero .collapse-vert-text, .theme-superhero #button-sidebar-collapse-closed{
  background-color: #b14b6d;;
  color:#fff; !important;
  text-decoration:none;
}

a:hover{
  text-decoration:none !important;
}

#sign-out-button.theme-superhero, .nav-arrow-up.theme-superhero{
  color:#fff !important;
}

.theme-superhero .content-container .spreadsheet_table tr:nth-child(even){
  background:#dfc5cb;
}

.theme-superhero #div-overall-close-button:hover{
  color:#a0cedb;
}

.theme-superhero .themed-bottom-border{
  border-bottom: 1px solid #b2c7cd;
}

.theme-superhero #overall-popup-title, .theme-superhero .button-blue-s1{
  background-color:#1e263b;
}

.theme-superhero .button-blue-s1:hover{
  background-color:#2e3b5b;
}

.theme-superhero .asof-footer, .theme-superhero #left-container-hub-charts, .theme-superhero #left-container-hub-archive, .theme-superhero .data-chart tfoot, .theme-superhero .data-chart .spreadsheet_table thead{
  background-color: #a7092d;
  color: #fff !important;
}

.theme-superhero .bg-blue-s2, .theme-superhero .bg-blue-s3, .theme-superhero #button-sidebar-collapse-opened{
  background-color:#1d263b;
  border:0px;
}

.theme-superhero .bg-purple-s2, .theme-superhero .bg-purple-s3{
  background-color:#050d26;
}

.theme-superhero .color-blue-s4{
  color:#dfc5cb;
}

.theme-superhero .spreadsheet_table td{
  border: 1px solid #d795a4;
}

.theme-superhero .content-container .spreadsheet_table th{
  color: #fff !important;
}

.theme-superhero #popup-overall, .theme-superhero #button-header-collapse{
  border:#1e263b;
}

.theme-superhero #customer-header-button{
  border-top: 1px solid #e5adbf
}

.theme-superhero .simple-dropdown-content-save a:hover {
  background-color: #b2c2ea;
}

.theme-superhero .simple-dropdown-content a, .theme-superhero .simple-dropdown-content-save a{
  border-top:1px solid #f99bba;
}

.theme-superhero #footer-application{
  background-image: url('../img/header-background-modern-superhero.jpg');
  border-top:0px;
}

.theme-superhero #search-query-window{
  background-color: #000721b3;
    border-bottom: 1px solid #000721;
    border-left: 1px solid #000721;
    border-right: 1px solid #000721;
}


/* ================================================================= */
/* END superhero Theme */
/* ================================================================= */

/* ================================================================= */
/* START tricks Theme */
/* ================================================================= */
.page-template.theme-tricks{
  background: rgb(18,17,17);
  background: linear-gradient(180deg, rgba(18,17,17,1) 24%, rgb(37 33 30) 48%, #6c2913 66%, #6c2913 80%, #6c2913 97%);
}

#header-application.theme-tricks, #header-navigation-container.theme-tricks{
  background-image: url('../img/header-background-modern-trick-and-treat.jpg');
}

#header-navigation-container.theme-tricks, .theme-tricks #rt-chart-controls{
  border-top: 1px solid #e35221;
}

.theme-tricks #header-fixed-position{
  border-bottom: 1px solid #e35221;
}

.theme-tricks #page-preloader-centered{
  border-top: 10px solid #e35221;
  border-bottom: 10px solid #e35221;
}


.theme-tricks,
.theme-tricks #report-heading,
.theme-tricks .static-chart-heading,
.theme-tricks a:link, 
.theme-tricks a:visited{
  color:#403d39;
}

.theme-tricks .ql-editor h1,
.theme-tricks .ql-editor h2, 
.theme-tricks .ql-editor h3, 
.theme-tricks .ql-editor h4, 
.theme-tricks .ql-editor p{
  color:#e35221;
}

.theme-tricks .transp-active .svg-container text, 
.theme-tricks .transp-active .svg-container .tick{
  fill:#ffffff;
}

.theme-tricks .transp-active .svg-container .domain, .theme-tricks .transp-active .svg-container .tick line{
  stroke:#ffffff; !important;
}

.theme-tricks .dashboard-controls-background{
  background-image:  url('../img/header-background-modern-trick-and-treat.jpg');
  color:#fff;
}

.theme-tricks .dash-main-nav{
  outline: 1px solid #b1a7a0;
}

.header-menu-item.theme-tricks{
  color:#fff !important;
}

#dashboard-buttons-hidden-section.theme-tricks{
  color: #e35221;
}

.header-menu-item.theme-tricks:hover, .header-menu-item-active.theme-tricks{
  background-image: url('../img/header-background-modern-trick-and-treat-orange.jpg')  !important;;
  background-blend-mode: normal !important;
  color:#fff !important;
}

.header-menu-item-active.theme-tricks:hover{
  background-blend-mode: multiply;
}

.theme-tricks #page-preloader-centered, #customer-header-button.theme-tricks, .simple-dropdown-content.theme-tricks, #button-header-collapse.theme-tricks, .sub-link-button.theme-tricks, .theme-tricks .customer-save-item{
  background-color: #e35221;
  color: #ffffff !important;
}

.nav-drop-button.theme-tricks{
  color:#fff;
}

.nav-drop-button.theme-tricks:hover{
  color:#b74a1e;
}

.simple-dropdown-content.theme-tricks a:hover, .sub-link-button.theme-tricks:hover, .theme-tricks .collapse-vert-text, .theme-tricks #button-sidebar-collapse-closed{
  background-color: #b74a1e;;
  color:#fff; !important;
  text-decoration:none;
}

a:hover{
  text-decoration:none !important;
}

#sign-out-button.theme-tricks, .nav-arrow-up.theme-tricks{
  color:#fff !important;
}

.theme-tricks .content-container .spreadsheet_table tr:nth-child(even){
  background:#f1e1db;
}

.theme-tricks #div-overall-close-button:hover{
  color:#e2ab96;;
}

.theme-tricks .themed-bottom-border{
  border-bottom: 1px solid #b2c7cd;
}

.theme-tricks #overall-popup-title, .theme-tricks .button-blue-s1{
  background-color:#403c39;
}

.theme-tricks .button-blue-s1:hover{
  background-color:#5d5854;
}

.theme-tricks .asof-footer, .theme-tricks #left-container-hub-charts, .theme-tricks #left-container-hub-archive, .theme-tricks .data-chart tfoot, .theme-tricks .data-chart .spreadsheet_table thead{
  background-color: #e35221;
  color: #fff !important;
}

.theme-tricks .bg-blue-s2, .theme-tricks .bg-blue-s3, .theme-tricks #button-sidebar-collapse-opened{
  background-color:#322e2b;
  border:0px;
}

.theme-tricks .bg-purple-s2, .theme-tricks .bg-purple-s3{
  background-color:#665e57;
}

.theme-tricks .color-blue-s4{
  color:#ffffff;
}

.theme-tricks .spreadsheet_table td{
  border: 1px solid #ffd9cc;
}

.theme-tricks .content-container .spreadsheet_table th{
  color: #fff !important;
}

.theme-tricks #popup-overall, .theme-tricks #button-header-collapse{
  border:#403c39;
}

.theme-tricks #customer-header-button{
  border-top: 1px solid #edc4b6
}

.theme-tricks .simple-dropdown-content-save a:hover {
  background-color: #fcc0ac;
}

.theme-tricks .simple-dropdown-content a, .theme-tricks .simple-dropdown-content-save a{
  border-top:1px solid #fcc0ac;
}

.theme-tricks #footer-application{
  background-image: url('../img/header-background-modern-trick-and-treat.jpg');
  border-top:0px;
}

.theme-tricks #search-query-window{
  background-color: #312d2ab3;
    border-bottom: 1px solid #312d2a;
    border-left: 1px solid #312d2a;
    border-right: 1px solid #312d2a;
}


/* ================================================================= */
/* END tricks Theme */
/* ================================================================= */



/* Custom Styles, Mainly transferred from the Gridstack installation */

/* Grid Stack */
.grid-stack-item {
  color: #fff;
}

.gridstack {
  height: 100% !important;
}

.grid-stack-item .grid-stack-item-content {
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  width: auto;
  z-index: 0 !important;
  background-color: #dfefff;
  outline: 2px dashed #949494;
  font-size: 13px;
  /*padding: 10px;
  padding-top: 22px;
  overflow: hidden; */
  padding-top: 5px;
  overflow: visible !important;
}

.grid-stack-nested {
  background-color: #707070;
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100% !important;
  width: 100%;
  z-index: 100 !important;
  padding: 0px;
  font-size: 13px;
  padding-top: 0px;
}

.content-container {
  text-align: center;
  position: absolute;
  top: 5;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

.popup-container .content-container {
  text-align: center;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 99;
}

.grid-stack-nested .grid-stack-nested {
  background-color: #404040;
}

.grid-stack-nested .grid-stack-item-content {
  inset: 1px 3px 3px 1px;
}

.grid-stack-nested .grid-stack-item {
  margin: 1px;
}

.grid-stack-nested .grid-stack-item-content {
  background-color: #585858;
}

.grid-stack-nested .grid-stack-nested .grid-stack-item-content {
  background-color: #282828;
}

.box-text {
  position: absolute;
  top: 2px;
  left: 5px;
}

.grid-stack-item .ui-resizable-handle {
  color: #fff;
}

.grid-stack > .grid-stack-item > .ui-resizable-se {
  background-color: #fff;
  border-radius: 15px;
}

.grid-stack-item[gs-h="1"] {
  height: 10%;
}

.grid-stack-item[gs-h="2"] {
  height: 120px;
}

.grid-stack-item {
  min-height: 10%;
}

#grid-stack-sandbox {
  position: relative;
  z-index: 300;
  /*overflow:hidden */
}

#grid-stack-stable-sandbox .grid-stack-item .grid-stack-item-content {
  padding: 0px;
  padding-top: 0px;
  overflow: hidden;
}

#grid-stack-stable-sandbox .grid-stack-nested {
  background-color: transparent;
}

#grid-stack-stable-sandbox .grid-stack-item {
  margin: 0;
}

#grid-stack-stable-sandbox .grid-stack-nested .grid-stack-item-content {
  inset: 0px !important;
}

#grid-stack-stable-sandbox .grid-stack-nested .grid-stack-item .grid-stack-item-content {
  inset: 0;
}

#grid-stack-bg-grid {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.grid-bg-column {
  display: inline-block;
  background-color: transparent;
}

.grid-stack-inner {
  width: 100%;
  height: 100%;
  background-color: #333;
}

.box-text,
.box-sub,
.box-copy,
.box-close {
  z-index: 5;
}

#grid-stack-stable-sandbox .grid-stack-item .grid-stack-item-content {
  background-color: #3d3d3d !important;
}

#grid-stack-stable-sandbox .div-hidden .grid-stack-item-content {
  background-color: transparent;
}

#grid-stack-stable-sandbox .div-active .grid-stack-item-content {
  background-color: #616161 !important;
}

#grid-stack-stable-sandbox .div-hidden .grid-stack-item-content.div-active {
  background-color: #979797 !important;
}

#grid-stack-stable-sandbox .div-hidden .grid-stack-item-content.div-active .grid-stack-item-content.div-active {
  background-color: #c2c2c2 !important;
}

.white-purple-nav,
.white-red-nav {
  color: #fff;
}

.white-purple-nav:hover {
  color: #ffeb3b;
}

.white-red-nav:hover {
  color: #ffeb3b;
}

.div-hidden {
  outline: dashed 2px #34516f;
}

.level-1-hover {
  position: absolute;
  top: -10px;
  left: 0px;
  width: 30px;
  height: 10px;
  background-color: #293f57;
}

#dashboard-button-section {
  margin-bottom: 10px;
  position: relative;
  display: block;
  height: 25px;
}

.dash-main-nav {
  display: table;
  position: relative;
  float: right;
  margin-left: 10px;
}

#fileinput {
  display: none;
}

.dash-main-nav-inner {
  display: table-cell;
  vertical-align: middle;
}

#home-container-dashboard {
  padding-top: 0px;
}

.background-grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.grid-bg-column {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#grid-stack-bg-grid .grid-bg-column {
  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.popover-title,
.popover-header {
  display: none;
}

.popover-content,
.popover-body {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  color: #fff;
  padding: 7px 10px;
}

.popover-hr {
  margin: 7px 0px;
  padding: 0px;
}

.popover {
  background-color: #000;
}

input[type="color"] {
  height: 20px;
  width: 30px;
}

input[type="number"] {
  display: inline-block;
  width: 50px;
  height: 20px;
  color: #000;
  margin-left: 5px;
}

#cpp-panel-1-meter-id-2-number{
  display: inline-block;
  width: 90%;
  height: 50px;
  color: #000;
  margin-left: 5px;
}

.popover.top > .arrow:after {
  border-top-color: rgb(0, 0, 0);
}

.popover-close,
.popover-features-close {
  text-align: right;
  padding-bottom: 5px;
  margin-right: -7;
  margin-top: -3;
  cursor: pointer;
  vertical-align: top;
  position: absolute;
  right: 10px;
  top: 5px;
}

.popover-heading {
  color: #ffeb3b;
}

.popover-close:hover {
  color: rgb(106, 106, 106);
}

.bg-picker {
  width: 160px;
  color: #000;
  cursor: pointer;
}

.color-container {
  width: 160px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 2px;
  cursor: pointer;
}

.box-content-visual,
.box-remove-content {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #fff;
}

.control-rollover-trigger {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box-close,
.small-bar,
.box-sub-close,
.box-copy,
.box-sub-copy,
.box-sub,
.box-sub-sub,
.box-hidden,
.config-popover {
  position: relative;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
}

.small-bar {
  font-size: 14px;
  margin: 0px 4px;
  vertical-align: top;
}
.box-remove-content {
  display: none;
}

.box-content-data {
  position: relative;
  display: inline-block;
  font-size: 13px;
  cursor: pointer;
  color: #fff;
}

.box-content-visual:hover {
  color: #ffeb3b;
}

#fileinput {
  float: right;
}

.popover-button {
  display: inline-block;
  background-color: #52ab73;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid #fff;
  cursor: pointer;
  color: #fff;
}

.popover-button:hover {
  background-color: #428d5e;
}

.layer-editor {
  /* background-color: rgba(255,255,255,.1); */
  position: relative;
  /* left: 10; */
  /* right: 10; */
  /* top: 10; */
  /* bottom: 10; */
  height: calc(100% - 22px);
  border: 1px solid #fff;
}

.content-button-controls {
  position: relative;
  text-align: center;
  background-color: #64819f;
  margin: 0 auto;
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid #fff;
  margin-top: -27;
  width: 195px;
  margin-left: -88px;
  left: 50%;
  visibility: hidden;
}

.controls-level-1 {
  background-color: #64819f;
}

.controls-level-2 {
  background-color: #4e475e;
}

.controls-level-3 {
  background-color: #52ab73;
  width: 150px;
  margin-left: -75px;
}

.ql-editor {
  color: #000;
  overflow: hidden;
  padding: 0px;
  display: table;
  width: 100%;
}

.ql-editor p {
  /*display: table-cell;
  vertical-align: middle;
  width:100%;
  */
}

.layer-editor {
  z-index: 900;
}

.ql-snow {
  font-family: "Yantramanav", sans-serif !important;
}

.ql-toolbar .ql-stroke {
  fill: none;
  stroke: #336491;
}

.ql-toolbar .ql-fill {
  fill: #336491;
  stroke: none;
}

.ql-toolbar .ql-picker {
  color: #336491;
}

.ql-toolbar {
  background-color: #b2d2f3;
  position: relative;
  /* right: 50%; */
  /* margin-right: -250px; */
  padding: 0px !important;
  height: 25px;
  z-index: 901;
  width: 530px;
  /* top: -25; */
  margin-left: 50%;
  left: -265px;
  border-radius: 5px;
}

.ql-snow.ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 20px;
  padding: 3px 3px;
  width: 18px;
  color: #fff;
}

.ql-toolbar.ql-snow .ql-formats {
  margin-right: 0px;
}

.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: "Yantramanav", sans-serif;
  padding: 8px;
  padding-right: 30px !important;
}

.collapse-toolbar {
  float: right;
  font-size: 15px;
  margin-right: 5px;
  color: #336491;
  position: absolute;
  right: 1px;
  top: 2px;
  cursor: pointer;
  background-color: #fff;
  padding: 2px;
  border-radius: 20px;
}

.expand-toolbar {
  position: absolute;
  top: 1px;
  right: 1px;
  color: #336491;
  cursor: pointer;
  z-index: 901;
  background-color: #fff;
  padding: 2px;
  border-radius: 20px;
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: relative;
  margin-top: -24px;
  right: 0;
  /* top: 20px; */
  width: 18px;
  vertical-align: middle;
}

.ql-snow .ql-picker.ql-size,
.ql-snow .ql-picker.ql-header {
  width: auto;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #000;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  stroke: #000;
  color: #000;
  z-index: 2;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #000;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before {
  content: "Normal";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "Normal";
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before {
  content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before {
  content: "20px";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
  font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before {
  content: "24px";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: "24px";
  font-size: 24px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before {
  content: "28px";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
  font-size: 28px;
}

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.0"]::before {
  content: "1.0";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.0"]::before {
  content: "1.0" !important;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.2"]::before {
  content: "1.2";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.2"]::before {
  content: "1.2" !important;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.5"]::before {
  content: "1.5";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.5"]::before {
  content: "1.5" !important;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.6"]::before {
  content: "1.6";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.6"]::before {
  content: "1.6" !important;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1.8"]::before {
  content: "1.8";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.8"]::before {
  content: "1.8" !important;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2.0"]::before {
  content: "2.0";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2.0"]::before {
  content: "2.0" !important;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2.4"]::before {
  content: "2.4";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2.4"]::before {
  content: "2.4" !important;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2.8"]::before {
  content: "2.8";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2.8"]::before {
  content: "2.8" !important;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="3.0"]::before {
  content: "3.0";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3.0"]::before {
  content: "3.0" !important;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="4.0"]::before {
  content: "4.0";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4.0"]::before {
  content: "4.0" !important;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="5.0"]::before {
  content: "5.0";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5.0"]::before {
  content: "5.0" !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="yantramanav"]::before {
  content: "Yantramanav";
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="yantramanav"]::before {
  content: "Yantramanav";
  font-family: "Yantramanav";
  font-weight: 400;
}
.ql-font-yantramanav {
  font-family: "Yantramanav";
  font-weight: 400;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"]::before {
  content: "Roboto";
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before {
  content: "Roboto";
  font-family: "Roboto";
  font-weight: 400;
}
.ql-font-roboto {
  font-family: "Roboto";
  font-weight: 400;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="dancingscript"]::before {
  content: "Dance Script";
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="dancingscript"]::before {
  content: "Dance Script";
  font-family: "Dancing Script", cursive;
  font-weight: 400;
}
.ql-font-dancingscript {
  font-family: "Dancing Script", cursive;
  font-weight: 400;
}

/* Default Layer Editor Styles */

.layer-editor {
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1em;
  color: #000;
}

.rollover-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: pointer;
}

.layer-iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.iframe-input,
.iframe-sizing,
.iframe-height,
.iframe-width {
  position: relative;
  z-index: 10;
  width: 100%;
}

.iframe-sizing {
  margin-top: 10px;
}

.iframe-open {
  position: absolute;
  top: 0;
  right: 0;
}

.iframe-data {
  background-color: #4e475e;
  display: block;
  position: relative;
  z-index: 9;
  text-align: left;
  padding: 15px;
  font-family: "Yantramanav", sans-serif;
  font-size: 16px;
}

.iframe-input-field,
.iframe-input-height,
.iframe-input-width {
  color: #000;
  font-family: "Yantramanav", sans-serif;
  font-size: 14px;
  max-width: 500px;
  min-width: 200px;
  width: 50%;
  display: inline-block;
  height: 28px;
  margin-right: -4px;
  border: 0px;
}

.iframe-input {
  margin-top: 5px;
}

.iframe-text-label {
  font-size: 13px;
  margin-right: 5px;
  color: #8c859c;
  width: 100%;
  display: block;
}

.iframe-input-container {
  display: inline-block;
  margin-right: 10px;
}

.iframe-input-height,
.iframe-input-width {
  width: 100px;
  min-width: 100px;
  display: inline-block;
}

.iframe-input-width,
.iframe-input-field {
  margin-right: 2px;
}

.iframe-go,
.iframe-setsize {
  display: inline-block;
  float: none;
  margin-left: 0px !important;
}

.iframe-scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

#save-layout-only,
#saveas-layout-only,
#save-layout-dashboard,
#saveas-layout-dashboard {
  margin-right: 3px;
  margin-top: 15px;
}

.window-checkbox-label {
  vertical-align: middle;
  cursor: pointer;
}

#dashboard-save-button {
  width: auto;
  left: 50%;
  transform: translateX(-50%);
}

#dash-save-center {
  width: 100%;
  text-align: center;
}

#dash-name {
  display: inline-block;
  margin-left: 5px;
}

.save-dropdown-button {
  width: 250px;
  height: 27px;
  padding: 6px 10px;
  cursor: pointer;
  border-top: 1px solid #5e80a1;
  background-color: #000;
  background-color: #253d58;
  float: left;
  margin-top: 3px;
}

.save-dropdown-button span {
  margin: 0;
  padding: 0;
}

.save-dropdown-button:hover {
  background-color: #35577e;
}

#save-customer-text {
  margin-top: 15px;
}

.simple-dropdown-content-save {
  position: relative;
  display: none;
  right: 0;
  z-index: 1;
  width: 250px;
  background-color: #253d58;
  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
  float: left;
}

.simple-dropdown-content-save a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  border-top: 1px solid #64819f;
}

.simple-dropdown-content-save a:hover {
  background-color: #34516f;
}

.simple-dropdown-content-save.drop-white-blue a {
  color: #34516f;
  background-color: #fff;
}

.customer-save-item {
  cursor: pointer;
}

[data-layercontent="staticChart"] {
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-bottom: 0px !important;
  padding-top: 5px !important;
  overflow: hidden !important;
}

.disable-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#delete-layout-controls-button {
  display: none;
}
#save-layout-controls-button {
  display: none;
}
#save-as-layout-controls-button {
  display: none;
}
#add-div-button {
  display: none;
}
#revert-layout-controls-button {
  display: none;
}
#forward-layout-controls-button {
  display: none;
}

.apexcharts-tooltip,
.apexcharts-tooltip-text-z-label,
.apexcharts-tooltip-text-z-value,
.apexcharts-tooltip-y-group {
  background: transparent;
  color: #fff !important;
}

.grid-stack-item {
  outline-color: #b5c7da;
  outline-offset: -3px;
  outline-style: solid;
}

.apexcharts-align-left {
  inset: auto 0px -5px -15px !important;
}

.spreadsheet_table .spreadsheet_row_header,
.spreadsheet_table .spreadsheet_row_header th,
.spreadsheet_table .spreadsheet_row_grandtotal {
  background-color: transparent !important;
}

#chart-loader-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 9999999;
}

.chart-name {
  text-align: left;
}


input[type=number]{
  padding:12px 5px;
}