:root {
  --tpgMainBackground: #17242E; /*Dark Blue*/
  --tpgSecondaryBackground: #475568; /*Light Blue*/
  --tpgLightBackground: #dadde1; /* Very light Blue/Grey*/
  --tpgMainHighlight: #72bf44; /*Green*/
  --tpgSecondaryHighlight: #BF4471; /*Purple*/
  --tpgRed: #BE4B49;
  --dp-font-family:'Arial' !important;
  --dp-font-size:12px !important;
  --dp-text-color:var(--tpgSecondaryBackground) !important;
}

/* NAVBAR */

/* Dropdown */
.dropdown-menu-notification {
  overflow-y: scroll;
  -ms-overflow-style: none;
  max-height: 18.75rem;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.dropdown-menu-notification::-webkit-scrollbar {
  display: none;
}


.help-block {
  background: #fff;
  display: block;
  padding: 9px 10px;
  font-size: 12px;
  border: 1px solid #cfd8dc;
  font-weight: 600;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  color: #89a1ab;
  position: relative;
}
.help-block--left:before {
  content: '';
  width: 0;
  height: 0;
  border: 5px solid black;
  border-color: transparent transparent #fff #fff;
  transform: rotate(45deg);
  position: absolute;
  left: -5px;
  box-shadow: -2px 2px 3px 0px rgba(0, 0, 0, 0.13);
  top: 12px;
}
.help-block--top {
  top: -8px;
  left: 15px;
  max-width: 270px;
}
.help-block--top:before {
  content: '';
  width: 0;
  height: 0;
  border: 5px solid black;
  border-color: transparent transparent #fff #fff;
  transform: rotate(133deg);
  position: absolute;
  left: 12px;
  box-shadow: -2px 2px 3px 0px rgba(0, 0, 0, 0.13);
  top: -5px;
}

.img-circle-border {
  border: .0625rem solid #ddd;
}

.card-map 
{
  border-bottom-right-radius: .25rem !important;
  border-bottom-left-radius: .25rem !important;
  margin: 0;
  padding: 0;
}

.card-body-map 
{
  border-bottom-right-radius: .25rem !important;
  border-bottom-left-radius: .25rem !important;
  margin: 0;
  padding: 0;
}

/* THEME COLOURS*/

body {
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tpgSecondaryBackground);
  text-align: left;
  background-color: var(--tpgSecondaryBackground) !important;
}

.layout-navbar-fixed .wrapper .sidebar-dark-tpg .brand-link:not([class*="navbar"]) {
  background-color: var(--tpgMainHighlight) !important;
}

.layout-sm-navbar-fixed .wrapper .sidebar-dark-tpg .brand-link:not([class*="navbar"]) {
  background-color: var(--tpgMainHighlight) !important;
}

.layout-md-navbar-fixed .wrapper .sidebar-dark-tpg .brand-link:not([class*="navbar"]) {
  background-color: var(--tpgMainHighlight) !important;
}

.layout-lg-navbar-fixed .wrapper .sidebar-dark-tpg .brand-link:not([class*="navbar"]) {
  background-color: var(--tpgMainHighlight) !important;
}

.layout-xl-navbar-fixed .wrapper .sidebar-dark-tpg .brand-link:not([class*="navbar"]) {
  background-color: var(--tpgMainHighlight) !important;
}

.sidebar-dark-tpg .nav-sidebar > .nav-item > .nav-link.active {
  /*background-color: var(--tpgMainHighlight);*/
  background-color: var(--tpgLightBackground);
  
  color: var(--tpgSecondaryHighlight);
  /*color: #ffffff;*/
}

.sidebar-dark-tpg .nav-sidebar.nav-legacy > .nav-item > .nav-link.active {
  border-color: var(--tpgMainHighlight);
}

[class*='sidebar-dark-tpg'] {
  background-color: var(--tpgSecondaryBackground) !important;
}

[class*='sidebar-dark-tpg'] .sidebar a {
  /*color: #C2C7D0;*/
  color: #ffffff;
}

[class*='sidebar-dark-tpg'] .nav-header {
  background: inherit;
  /*color: #d0d4db;*/
  color: #ffffff;
}

[class*='sidebar-dark-tpg'] .user-panel .status {
  background: rgba(255, 255, 255, 0.1);
  color: #C2C7D0;
}

[class*='sidebar-dark-tpg'] .nav-treeview > .nav-item > .nav-link {
  /*color: #C2C7D0;*/
  color: #d0d4db;
}

[class*='sidebar-dark-tpg'] .nav-sidebar > .nav-item > .nav-link {
  /*color: #C2C7D0;*/
  color: #d0d4db;
}

[class*='sidebar-dark-tpg'] .nav-treeview > .nav-item > .nav-link:hover, 
[class*='sidebar-dark-tpg'] .nav-treeview > .nav-item > .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.1);
  /*color: #ffffff;
  color: var(--tpgSecondaryHighlight);*/
  color: var(--tpgMainBackground) !important;
}
[class*='sidebar-dark-tpg'] .nav-sidebar .nav-item > .nav-link:hover,
[class*='sidebar-dark-tpg'] .nav-sidebar .nav-item > .nav-link:focus {
  /*color: #ffffff;*/
  color: var(--tpgSecondaryHighlight);
}

[class*='sidebar-dark-tpg'] .nav-treeview > .nav-item > .nav-link.active, 
[class*='sidebar-dark-tpg'] .nav-treeview > .nav-item > .nav-link.active:hover, 
[class*='sidebar-dark-tpg'] .nav-treeview > .nav-item > .nav-link.active:focus {
  background-color: rgba(255, 255, 255, 0.9);
  /*background-color: var(--tpgSecondaryBackground)*/
  color: var(--tpgMainBackground);
}

[class*='sidebar-dark-tpg'] .nav-flat .nav-item .nav-treeview .nav-treeview {
  border-color: rgba(255, 255, 255, 0.9);
}

[class*='sidebar-dark-tpg'] .nav-flat .nav-item .nav-treeview > .nav-item > .nav-link, 
[class*='sidebar-dark-tpg'] .nav-flat .nav-item .nav-treeview > .nav-item > .nav-link.active {
  border-color: rgba(255, 255, 255, 0.9);
}

/* WEATHER CARD */

.card-weather-forecast {
  font-weight: bold;
  font-size: 1.6rem;
}

.card-weather-day {
  font-size: 1rem; 
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
}

.icon-weather {
  color: var(--tpgMainHighlight);
  z-index: 0;
}

.icon-green {
  color: var(--tpgMainHighlight);
}

.icon-weather > i {
  font-size: 40px;
  position: absolute;
  right: 25%;
  top: 0px;
  transition: all 0.3s linear;
}

.br-r-2 {
  border-right: 2px solid #eceff1 !important;
}

.badge-danger {
  background-color: var(--tpgRed) !important;
}

.multiselect, .multiselect:hover, .multiselect:focus {
  background-color: transparent;
  color: #37474f; /*var(--tpgSecondaryBackground)*/
}

ul.multiselect-container > li.active > a, ul.multiselect-container > li.active > a:hover, ul.multiselect-container > li.active > a:focus {
  background-color: transparent;
}

ul.multiselect-container > li.active > a:hover, ul.multiselect-container > li.active > a:focus {
  background-color: #f5f5f5;
}

ul.multiselect-container > li > a > label.checkbox {
  border: 0px;
  background-color: transparent;
  width: 100%;
  padding-left: 0.3rem;
  line-height: auto;
  height: auto;
}

.btn-green-style {
  background-color: var(--tpgMainHighlight) !important;
  border-color: var(--tpgMainHighlight) !important;
}
.btn-green-style:hover {
  background-color: #66ab3d !important;
  border-color: #66ab3d !important;
}

.btn-red-style {
  background-color: var(--tpgRed) !important;
}

.btn-link {
  font-weight: 400;
  color: var(--tpgMainHighlight) !important;
  text-decoration: none;
}

.btn-link:hover {
  color: var(--tpgSecondaryHighlight) !important;
  text-decoration: underline;
}

.table-serial-num {
  border: none;
  outline: none;
  min-width: 10rem;
  box-shadow: none !important;
  background: transparent !important;

}

.table-borderless-element {
  border: none;
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
}

.table-fw-version {
  border: none;
  outline: none;
  min-width: 8rem;
  box-shadow: none !important;
  background: transparent !important;

}

.table-auto-width {
  display: inline-block;
  width: auto !important;
}

th {
  color: var(--tpgSecondaryBackground);
}

a:hover {
  color: var(--tpgSecondaryHighlight);
  text-decoration: none;
}

/*===============================================
  G. External Pages - login, register,
  screenlock, coming-soon, forgotpw
================================================= */
body.external-page {
  min-height: 0;
  overflow: auto;
}

body.external-page #main {
  overflow: hidden;
  /*background: url("../../../img/patterns/backgrounds/1.jpg") no-repeat top center #2d494d;*/
}

body.login-page {
  background: url("../../../img/patterns/backgrounds/1.jpg") no-repeat top center #2d494d;
}
body.external-page #main:before {
  display: none;
}
body.external-page #canvas-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
body.external-page #content .admin-form {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  margin-top: 8%;
}
/*
body.external-page #content .card {
  box-shadow: 0 1px 40px 0 rgba(0, 0, 0, 0.3);
}
body.external-page #content .card-header {
  padding: 32px 10px 15px;
}*/
body.external-page .login-links {
  font-size: 15px;
  color: #DDD;
}
body.external-page .login-links a {
  color: #DDD;
  font-weight: 300;
}
body.external-page .login-links a.active {
  color: #FFF;
  font-weight: 600;
}
body.external-page .login-links a:hover,
body.external-page .login-links a:focus {
  color: #FFF;
  text-decoration: none;
}
body.external-page .coming-soon-title {
  text-align: center;
  color: #FFF;
  font-size: 40px;
  font-weight: 400;
  margin-top: 70px;
  margin-bottom: 20px;
}

/* */

.center-block {
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mw500 {
  max-width: 500px !important;
}

.img-responsive {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}


.admin-form .button.login-btn:hover {
  color: #fff;
  background: var(--tpgMainHighlight) !important;
}

.btn-danger {
  color: #ffffff;
  background-color: var(--tpgRed) !important;
  border-color: var(--tpgRed) !important;
  box-shadow: none;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #e57373 !important;
  border-color: #e57373 !important;
}

/* CUSTOM BUTTONS */

.custom-map-control-button {
  /*background-color: #fff; 
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  */
  margin: 20px;
  /*font: 400 18px Roboto, Arial, sans-serif;*/
  font-size: 16px !important;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}

.text-lightGray {
  color:#9c9c9c;
}

.text-ghostGray, .form-control::placeholder{
  color: rgba(177, 178, 183, 0.64);
}

.pseudo-link{
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
}

.pseudo-link:hover {
  color: var(--tpgSecondaryHighlight);
}
.form-control-range{
  accent-color: var(--tpgMainHighlight);
  background: white;
  outline: none
}

.crud-form{
  background-color:#ffffff;
  border-radius:5px
}
.crud-form .row{
  border-top:#d2d2d2 1px solid;
  border-right:#d2d2d2 1px solid;
  border-left:#d2d2d2 1px solid;
  border-collapse: collapse;
}

.crud-form .row:last-child{
  border-top:0;
  padding-bottom:10px;
  border-bottom:#d2d2d2 1px solid;
}

.crud-row .col {
  margin-top:auto;
  margin-bottom: auto;
  padding-top:12px;
  padding-bottom:12px;
}

.crud-row:nth-child(even){
  background-color: #efefee;
}

.crud-grid{
  background-color:#ffffff;
  border-radius:5px
}
.crud-grid .row{
  border-top:#d2d2d2 1px solid;
  border-right:#d2d2d2 1px solid;
  border-left:#d2d2d2 1px solid;
  border-collapse: collapse;
}
.crud-grid .crud-row-header{
  font-weight: bold;
}
.crud-grid .row:last-child{
  border-bottom:#d2d2d2 1px solid;
}

.column-header{
  color:#798e70;
  background-color: #ffffff;
  border:#d2d2d2 1px solid;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.search-icon {
  margin-left: -40px;
  z-index: 100;
  width: 30px;
  height: 30px;
}

.cursor-pointer {
  cursor:pointer
}

.bg-paginator {
  background-color:var(--tpgMainHighlight);
  color:white;
}

.required:after {
  content:" *";
  color: var(--tpgRed);
}

.multiselect_data_form .multiselect-container li {
  min-width:275px;
}


#historical_data_form .multiselect-container li {
  min-width:275px;
}

.multiselect-container > li.disabled {display:none}
.multiselect__tag {
  background-color: var(--tpgGreen) !important;
}
#content_wrapper {
  padding:2px;
}

.content-wrapper > .content {
  padding: 0;
}

.text-secondary {
  color:var(--tpgSecondaryBackground)
}

@media only screen and (max-width: 600px) {
  .chart-card .card-body {
    padding:0;
  }
}
.multiselect__tag {
  background-color: var(--tpgGreen) !important;
}