:root {
  --coned-dark-grey: 42, 42, 42;
  --coned-medium-grey: 84, 84, 84;
  --coned-dark-blue: 0, 86, 148;
  --coned-light-blue: 6, 155, 215;
  --coned-grey: 230, 230, 230;
  --coned-white: 255, 255, 255;
  --coned-yellow: 235, 172, 0;
  --coned-green: 0, 148, 86;
  --coned-violet: 148, 0, 86;
  --coned-red: 148, 0, 0;
  --coned-black: 0, 0, 0;

  --main-background-colour: #2A2A2A;
  --secondary-background-colour: rgba(var(--coned-grey), 1.0);
  --highlight-colour: rgba(var(--coned-dark-blue), 1.0);
  --text-colour: #ffffff;
  --tertiary-background-colour: rgba(var(--coned-dark-grey), 0.8);
  --tertiary-border-colour: rgba(var(--coned-light-blue), 0.5);

  --header-highlight-colour: rgba(var(--coned-light-blue), 1.0);
  --header-background-colour: #ffffff;
  --header-text-colour: #2A2A2A;

  --contrast-background-colour: rgba(var(--coned-dark-grey), 1.0);
  --contrast-text-colour: rgba(var(--coned-white), 1.0);
  --contrast-highlight-colour: rgba(var(--coned-light-blue), 1.0);

  --input-text-colour: rgba(var(--coned-white), 1.0);
  --input-background-colour: rgba(var(--coned-light-blue), 1.0);
  --input-border-colour: rgba(var(--coned-light-blue), 0.5);

  --default-link-colour: rgba(var(--coned-violet), 1.0);
  --contrast-link-colour: rgba(var(--coned-green), 1.0);

  --button-background-colour: rgba(var(--coned-light-blue), 1.0);
  --button-text-colour: rgba(var(--coned-white), 1.0);
  --button-link-colour: rgba(var(--coned-white), 1.0);
  --button-border-colour: rgba(var(--coned-white), 0.5);
  --button-hover-background-colour: rgba(var(--coned-violet), 1.0);
  --button-hover-text-colour: rgba(var(--coned-light-blue), 1.0);
  --button-hover-border-colour: rgba(var(--coned-light-blue), 1.0);

  --table-border-colour: rgba(var(--coned-white), 0.25);

  --ui-widget-border-colour: rgba(var(--coned-violet), 0.25);
}

::-webkit-scrollbar-button {
  /* background-color: var(--button-background-colour);
  height: 0.5em;
  border-radius: 10px; */
  display: none;
}

::-webkit-scrollbar-thumb {
  background-color: var(--button-background-colour);
  border-radius: 0.5em;
}

::-webkit-scrollbar-track {
  background-color: var(--button-background-colour);
  border-radius: 0.5em;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}

.openidSignin {
  background-image: unset;
}

.msSignInDark {
  background-image: url(../static/image/ms-symbollockup_signin_dark.png);
}

.conedLoginButtons:hover {
  color: var(--coned-light-blue);
}

div.sidebarbuttons {
  font-size: 20px;
}

div.flex-container.settings {
  padding-right: 1em;
  margin-right: 1.5em;
  margin-left: 1.5em;
}

/* div.conedAccessOptions,
div.conedLoginOptions {
  background-color: rgba(0, 0, 0, 0.4);
  height: 26rem;
  width: 100%;
  margin: 10%;
  margin-top: 3%;
  display: flex;
  flex-direction: column;
  gap: 45px;
  position: relative;
  border-radius: 1em;
} */

div.conedAccessOptions {
  background-color: rgba(0, 0, 0, 0.4);
  gap: 0px;
  width: 40%;
  margin-right: 2rem;
  margin-top: 4rem;
  flex-direction: column;
  display: flex;
  position: relative;
  border-radius: 1em;
  min-width: 30%;
  height: fit-content;
  padding-bottom: 0.7em;
}

div.portalLinks {
  color: #72BAD8;
  display: flex;
  gap: 15px;
}

div.portalLinks a {
  display: flex;
  flex-direction: row;
  gap: 15px;
  color: #72BAD8 !important;
}

div.portalLinks i {
  align-self: center;
}

div.conedAccessOptionsItems {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: 0 1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

div.usefulLinks {
  margin-left: 30px;
}

div #conedForgotten,
div #conedLogin {
  background-color: rgba(0, 0, 0, 0.4);
  height: 26rem;
  width: 90%;
  align-items: center;
  margin: 10%;
  margin-top: 2%;
  display: flex;
  flex-direction: column;
  border-radius: 1em;
}

div.conedDescription {
  display: flex;
  flex-direction: column;
  width: 55%;
  height: 100%;
  position: relative;
  max-width: 60%;
  margin-left: 2rem;
  margin-top: 3rem;
  margin-right: 2rem;
}

div.conedPageTop {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 10%;
  flex-wrap: wrap;
  justify-content: space-between;
}

div.conedMain {
  display: flex;
  flex-direction: row;
  height: 90%;
  width: 100%;
  margin-top: 7vw;
  position: relative;
  justify-content: space-between;
}

.logo {
  width: 50%;
  z-index: 999;
  align-self: center;
  float: left;
}

.headerLink {
  display: block;
  width: 100%;
  height: 100%;
}

.logintable {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  flex-direction: column;
  gap: 10px
}

.logintable input {
  color: var(--main-background-colour);
}

#conedForgotten input,
.logintable input.settings-input {
  width: 20em;
  border-radius: 2em;
  background-color: rgba(43, 66, 110, 0.8) !important;
  border: none;
  padding-left: 2.5em;
  color: #ffffff;
}

.logintable input.settings-input::placeholder {
  color: #ffffff;
}

.conedIcons {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#usermenu h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

button.loginPage {
  background-color: rgb(56, 67, 106);
  border: none;
  border-radius: 4em;
  cursor: pointer;
}

button {
  font-family: 'M+ P Type-2 (basic latin) Regular', Geneva, sans-serif;
  font-weight: bold;
  color: rgba(var(--coned-white), 1.0)
}

button.sidebarmenu {
  background-color: rgb(39, 60, 78);
  border: none;
  padding: 8px 10px;
  display: inline-flex;
  flex-direction: row;
  margin: 5px 2px;
  gap: 10px;
  cursor: pointer;
  border-radius: 50px;
}

button.sidebarmenu:hover {
  color: #9f9f9f;
}

.sidebarbuttons a div {
  color: #ffffff;
}

.sidebarbuttons a div:hover {
  color: #dfdfdf;
}

.form-container {
  margin-top: 3rem;
}

.form-container input,
.form-container .login {
  width: 100%;
  margin: 5px 0;
  height: 45px;
  vertical-align: middle;
  font-size: 16px;
}

.form-container input {
  border: 1px solid #dddfe2;
  color: #1d2129;
  padding: 0 8px;
  outline: none;
}

.form-container input:focus {
  border-color: #1877f2;
  box-shadow: 0 0 0 2px #e7f3ff;
}

header {
  background: var(--header-background-colour);
  color: var(--header-text-colour);
  max-height: 4rem;
  min-height: 4rem;
  font-weight: bold;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.logobox {
  padding-top: 10px;
}

span.CC-Licence {
  background-image: url(../resource/CC_Licence.png);
  width: 88px;
  height: 31px;
  display: flex;
  background-repeat: no-repeat;
}

div#ccDiv {
  display: flex;
  margin: 0;
}

p#ccParagraph {
  font-size: 9px;
  margin: 0.4em;
  opacity: 0;
  display: none;
}

span.backgroundImage1 {
  background-image: url(../resource/coned.svg);
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(2px);
  z-index: 0;
}

span.backgroundImage2 {
  background-image: url(../resource/coned-background-2.png);
  position: absolute;
  width: 100vw;
  height: -webkit-fill-available;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

span.dermsLoginLogo {
  background-image: url(../resource/coned.svg);
  background-size: contain;
}

span.dermsLogo {
  background-image: url(../resource/coned.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: block;
  width: 7em;
  height: 50%;
  margin-left: -0.4em;
}

div.logoAndDashMenu {
  display: flex;
  align-items: center;
  padding: 0 1em 0 1em;
}

div.conedLogo {
  display: flex;
  align-items: center;
  height: calc(100% - 1em);
  width: 100%;
  padding: 0;
  justify-content: center;
}

span.conedIcons.conedBlueLogo {
  background-image: url(../resource/coned-icon-blue.svg);
  width: 250px;
  height: 35px;
  display: flex;
}

.conedDashHomeIconsSingle {
  display: inline-block;
  height: 40px;
  width: 40px;
}

span.conedIcons.conedAccountIcon {
  background-image: url(../resource/icons/account-icon.svg);
  display: inline-block;
  height: 50px;
  width: 50px;
}

span.conedIcons.conedApiTickIcon {
  background-image: url(../resource/icons/api-tick-icon.svg);
  height: 25px;
  width: 25px;
  display: inline-block;
}

span.conedIcons.conedBspPinIcon {
  background-image: url(../resource/icons/bsp-pin.svg);
}

span.conedIcons.conedGspAndBspIcon {
  background-image: url(../resource/icons/gsp-and-bsp.svg);
  height: 40px;
  width: 40px;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  display: inline-block;
}

span.conedIcons.conedBulkUploadIcon {
  background-image: url(../resource/icons/bulk-upload-icon.svg);
  height: 50px;
  width: 50px;
}

span.conedIcons.conedDashboardIcon {
  background-image: url(../resource/icons/dashboard-icon.svg);
  height: 25px;
  width: 25px;
}

span.conedIcons.conedDashboardColouredIcon {
  background-image: url(../resource/icons/dashboard-coloured-icon.svg);
  height: 25px;
  width: 25px;
  display: block;
  padding-left: 15px;
}

span.conedIcons.conedDashEditIcon {
  background-image: url(../resource/icons/dash-edit-icon.svg);
  height: 50px;
  width: 50px;
}

span.conedIcons.conedDateRangeIcon {
  background-image: url(../resource/icons/date-range-icon.svg);
}

span.conedIcons.conedExcelExportIcon {
  background-image: url(../resource/icons/excel-export-icon.svg);
  height: 40px;
  width: 40px;
  display: inline-block;
}

span.conedIcons.conedFavouriteIcon {
  background-image: url(../resource/icons/favourite-icon.svg);
  height: 40px;
  width: 40px;
  display: inline-block;
}

span.conedIcons.conedGenericMapPinIcon {
  background-image: url(../resource/icons/generic-map-pin-icon.svg);
}

span.conedIcons.conedGspPinIcon {
  background-image: url(../resource/icons/gsp-pin.svg);
}

span.conedIcons.conedHelpInfoIcon {
  background-image: url(../resource/icons/help-info-icon.svg);
}

span.conedIcons.conedInfoIcon {
  background-image: url(../resource/icons/info-icon.svg);
}

span.conedIcons.conedLogOutIcon {
  background-image: url(../resource/icons/log-out-icon.svg);
  display: inline-block;
  height: 20px;
  width: 20px;
}

span.conedIcons.conedLtdsIcon {
  background-image: url(../resource/icons/ltds-icon.svg);
}

span.conedIcons.conedLogov1Icon {
  background-image: url(../resource/coned.svg);
  display: flex;
  position: relative;
  height: 100%;
  width: 25%;
  margin-top: 4vh;
  margin-left: 1vw;
  background-size: 50%;
}

span.conedIcons.conedLogov2Icon {
  background-image: url(../resource/icons/coned-logo-full-version2.svg);
}

span.conedIcons.conedLogov3Icon {
  background-image: url(../resource/icons/coned-logo-full-version3.svg);
  position: relative;
  width: 420px;
  height: 125px;
}

span.conedIcons.conedLogoBetaIcon {
  background-image: url(../resource/icons/coned-logo-full-version5.svg);
  position: relative;
  width: 420px;
  height: 125px;
}

span.conedIcons.conedLogoSimpleIcon {
  background-image: url(../resource/icons/coned-logo-simplified-version.svg);
  position: relative;
  display: flex;
  width: 10rem;
  height: 1.5rem;
  margin: 10px;
}

span.conedIcons.conedSettingsIcon {
  background-image: url(../resource/icons/coned-settings-icon.svg);
  height: 50px;
  width: 50px;
}

span.conedIcons.conedNewAddIcon {
  background-image: url(../resource/icons/new-add-icon.svg);

}

span.conedIcons.conedRealTimePinIcon {
  background-image: url(../resource/icons/real-time-pin-icon.svg);

}

span.conedIcons.conedRealTimeRefreshIcon {
  background-image: url(../resource/icons/real-time-refresh-icon.svg);
}

span.conedIcons.conedSearchDataIcon {
  background-image: url(../resource/icons/search-data-icon.svg);
  height: 50px;
  width: 50px;
}

span.conedShareDashIcon {
  background-image: url(../resource/icons/share-dash-icon.svg);
  height: 40px;
  width: 40px;
  display: inline-block;
}

span.conedIcons.conedconedIcon {
  background-image: url(../resource/icons/coned-icon.svg);
  display: flex;
  position: relative;
  width: 25%;
  height: 100%;
  background-size: 70%;
  margin-top: 4vh;
  margin-right: 8vw;
}

span.conedIcons.conedSubstationPinIcon {
  background-image: url(../resource/icons/substation-pin.svg);
}

span.conedIcons.conedSecondarySubstationPinIcon {
  background-image: url(../resource/icons/secondary-pin.svg);
}

span.conedIcons.conedUserSettingsIcon {
  background-image: url(../resource/icons/user-settings-icon.svg);
  display: inline-block;
  height: 20px;
  width: 20px;
}

span.conedIcons.conedVisibilityEyeIcon {
  background-image: url(../resource/icons/visibility-eye-icon.svg);
  height: 50px;
  width: 50px;
  margin-top: -25px;
  position: absolute;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.dashboard-map-popup .mapboxgl-popup-content {
  animation: fadeIn 1s;
  border-radius: 15px !important;
  width: max-content;
  background-color: rgba(var(--coned-grey), 1.0);
  padding: 0;
}

.mapboxgl-popup-close-button {
  font-size: 40px;
  margin-right: 0.7rem;
  margin-top: 0.9rem;
  background-color: rgba(0, 0, 0, 0) !important;
  box-shadow: none !important;
  outline: none;
}

.mapboxgl-popup-close-button:hover {
  background-color: rgba(0, 0, 0, 0) !important;
}

.popup-default {
  animation: fadeIn 1s;
  text-align: left;
  color: black;
  margin: 1.5em .5rem 1em .5rem !important;

}

.dashboard-map-popup h2,
h3 {
  text-align: left;
}

.dashboard-map-popup .title-container {
  background-color: rgba(var(--coned-medium-grey), 1.0);
  padding: 10px;
  padding-right: 45px;
  border-radius: 14px 14px 0px 0px;
}

div.popup-default a span {
  display: inline-flex;
}

div.popup-default a button {
  text-align: center;
}


a.table-link:link,
a.table-link:hover,
a.table-link:visited,
a.table-link:active {
  font-size: 1.5em;
}

.csvdl {
  opacity: 1.0;
}

.switch {
  display: inline-block;
  height: 40px;
  position: relative;
  width: 60px;
  pointer-events: auto;
  cursor: pointer;
}

.switch input {
  display: none;
}

.slider {
  background-color: #91989D;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

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

input:checked+.slider {
  background-color: #66bb6a;
}

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

.slider.round {
  border-radius: 34px;
}

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


span.chartswitch {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 20px;
  position: relative;
  z-index: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0rem 0.5rem;
  border-radius: 100%;
}

span.buttondisabledline {
  background-image: url(../resource/icons/button-disabled-line.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  display: none;
  z-index: 1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

h1.dashboard-title {
  font-weight: normal;
  font-size: 32px;
}

.dashtitle {
  width: max-content;
}

div.scrolltable {
  overflow-y: scroll;
  max-height: 100%;
  height: calc(100% - 100px);
}

table.dashtable {
  margin: 0 0.25em 0.25em 0.25em;
}

table.dashtable tr:nth-child(even) {
  background: #C4C8CB;
  color: black;
}

table.dashtable tr:nth-child(odd) {
  background: #ECECEC;
  color: black;
}

table.dashtable thead {
  position: sticky;
  top: 0;
}

table.dashtable thead tr th {
  background: var(--main-background-colour);
  color: white;
  font-weight: bold;
  text-align: left;
}

table.dashtable.borders {
  border-collapse: separate;
  border-spacing: 0;
}

table.dashtable.borders tbody tr td {
  border-right: 2px dashed #777E83;
  max-width: 100%;
  max-height: 100%;

}

table.dashtable.borders tbody tr td.tableValue {
  color: #003E66;
  font-weight: bold;
}

h2.tabletitle {
  border-bottom-color: #64A1BB;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  font-weight: bolder;
  text-align: left;
}

/* h3.charttitle{
  border-bottom-color: #64A1BB;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  font-weight: bolder;
  text-align: left;
} */


div.shareTable {
  overflow: hidden;
  position: absolute;
  right: 1rem;
  text-align: center;
}

.gridim-dashboard {
  overflow: auto;
}

.mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
  background-color: rgba(var(--coned-grey), 1.0);
  border-radius: 50px;
}

.mapboxgl-canvas {
  border-radius: 1em;
}

cell.dashboard {
  margin: 0.5em;
}

div.sidebarHeader {
  display: flex;
  height: 3rem;
  width: auto;
  padding: 0 5px;
  align-items: center;
  background-color: rgba(var(--coned-dark-blue), 1.0);
  border-radius: 10px 10px 0 0;
}

div.sidebarContent {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  height: calc(100% - 7.4rem);
  padding: 8px;
  grid-gap: 8px;
  gap: 15px;
  overflow-x: auto;
  background-color: rgba(var(--coned-grey), 1);
  color: rgba(var(--coned-black), 1);
  position: relative;
  border-radius: 0 0 10px 10px;
}

h2.sidebarHeaderText {
  margin-left: 1rem;
}


/* Remove default bullets */
/* Remove margins and padding from the parent ul */
ul.sidebarTree {
  list-style-type: none;
  margin: 0;
  padding-left: 20px;
}

ul.sidebarTree li {
  text-align: left;
}

li.treeItem {
  display: flex;
}

/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none;
  /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: rgba(var(--coned-black), 0.7);
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nest {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.nest.active {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  padding-inline-start: 10px;
}

div.sidebarContent input {
  color: black;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 1rem;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  text-align: left;
}

div.sidebarContent .searchbar i {
  position: relative;
  left: -30px;
  top: 21px;
}

div.sidebarContent .searchbar {
  width: fit-content;
  display: flex;
  flex-flow: nowrap;
  margin-bottom: 10px;
  align-self: center;
  flex-grow: 0;
}

div.sidebarContent .searchbar .icon {
  color: black;
}


div.sidebarDiv {
  position: absolute;
  bottom: 2%;
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

div.itemDiv {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(var(--coned-black), 1);
  border-bottom: 1px solid rgba(var(--coned-black), 0.4);
  padding: 0.2em 0;
}

div.itemDiv span.conedIcons {
  background-image: url("../resource/der-pin.svg");
}



.legend {
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  max-width: 12rem;
}

.keyHeader {
  font-size: 1em;
  text-align: center;
  color: #fff;
  background-color: rgba(var(--coned-dark-blue), 1.0);
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 0;
  border-radius: 14px 14px 0 0;
  margin-top: 0;
  border: 1px solid rgba(var(--coned-grey), 1.0);
  border-bottom: none;
}

div.keyContent {
  background-color: rgba(var(--coned-grey), 1.0);
  color: rgba(var(--coned-black), 0.7);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border-radius: 0 0 14px 14px;
  border: 1px solid rgba(var(--coned-grey), 1.0);
}

div.keyContentItem {
  display: flex;
  padding: 0.1em;
}

.legend h4 {
  margin: 4px 0 4px;
}

.legend div span {
  align-self: center;
  background-position: left;
  background-position-x: 0.25em;
  text-align: left;
  flex-grow: 0;
}

span.itemIcon {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


div.sidebarLink {
  padding: 5px;
}


.gridster-box-filled {
  text-align: left;
  overflow-y: hidden;
  box-shadow: unset;
  border: unset;
  background-color: unset;
}

.gridim-dashboard input {
  background-color: rgba(0, 0, 0, 0.7);
  color: rgba(var(--coned-grey), 1.0);
  border: rgba(var(--coned-dark-blue), 0.5) 1px solid;
  border-radius: 0.5em;
  padding: 0.5em;
}

input.mapboxgl-ctrl-geocoder--input {
  border: none;
  background-color: unset;
}

.dashboard-share .share-link-container {
  border: unset;
}

select {
  background-color: var(--input-background-colour);
  color: var(--input-text-colour);
  font-size: medium;
  appearance: auto;
  width: 100%;
  border-radius: 2rem 2rem 2rem 2rem;
  padding: 0.5rem;
}

.chart-switch-label {
  position: absolute;
  background-color: var(--main-background-colour);
  color: var(--text-colour);
  opacity: 0.7;
  padding: 0.5em;
  border: 1px solid var(--text-colour);
  border-radius: 0.25em;
  font-family: 'Quicksand', Arial, Helvetica, sans-serif, Geneva, sans-serif;
}

.dashboard-share {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 50em;
  border: 1px solid var(--highlight-colour);
  border-radius: 0.5em;
  background-color: rgba(var(--coned-dark-grey), 1);
  ;
  padding: 0.5em;
}

.dashboard-share h3 {
  padding: 0;
  margin: 0 0 0.5em 0;
  border-bottom: none;
}

.ui-tabs-nav li.ui-tabs-active a {
  color: var(--contrast-text-colour) !important;
}

.ui-tabs-nav li.ui-tabs-active {
  background: var(--contrast-highlight-colour) !important;
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
  border-radius: 10px 0 10px 0;
}

.sidebarmenudetail {
  z-index: 10;
}

.dashboard-loading-container {
  height: calc(100vh - 4em);
  width: 100vw;
  top: 4em;
  left: 0;
  z-index: 5;
}

.dashboard-loading-container span i:first-of-type {
  color: var(--header-background-colour) !important;
}

.dashboard-loading-container span i:last-of-type {
  color: var(--input-background-colour) !important;
}

.gridim-dashboard .invalid {
  background-color: unset;
}

.logonameoverlay {
  top: 20px;
  font-size: 32px;
}

.der-dashboard-button {
  background-color: var(--button-background-colour);
  border: 1px solid var(--contrast-background-colour);
  border-radius: 0.5em;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
}

.der-dashboard-button:hover {
  background-color: var(--button-hover-background-colour);
}

.der-changeable-element {
  display: flex;
  gap: 0.25em;
  flex-direction: row;
}

.der-label-heading {
  font-weight: bold;
  background-color: rgba(var(--coned-dark-blue), 1.0);
  font-size: large;
  height: auto;
  border-radius: 0.5em;
  border: 1px solid rgba(var(--coned-white), 0.5);
  padding: 1em 0;
}

.der-label-rating {
  padding: 0.5em;
  background-color: rgba(var(--coned-dark-blue), 0.5);
  height: auto;
  border-radius: 0.5em 0 0 0.5em;
}

.der-label-asset {
  padding: 0.5em;
  background-color: rgba(var(--coned-green), 0.5);
  height: auto;
  border-radius: 0.5em 0 0 0.5em
}

.der-label-connection {
  padding: 0.5em;
  background-color: rgba(var(--coned-violet), 0.5);
  height: auto;
  border-radius: 0.5em 0 0 0.5em;
}

.der-label-location {
  padding: 0.5em;
  background-color: rgba(var(--coned-red), 0.5);
  height: auto;
  border-radius: 0.5em 0 0 0.5em;
}

div.homepagelink {
  border: 1px solid rgba(var(--coned-dark-blue), 1.0);
}

div.homepagelink:hover {
  border: 1px solid rgba(var(--coned-white), 1.0);
}

div.homepagelink:hover a {
  color: rgba(var(--coned-white));
}

div.homepagelink:hover {
  background-color: var(--tertiary-background-colour);
  transition: 0.3s;
}

div.homepagelink a {
  color: rgba(var(--coned-dark-blue), 1.0);
}