@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto/Roboto.woff') format('woff'),             /* Modern browsers */
	     url('../fonts/Roboto/Roboto.ttf') format('truetype'),         /* Safari, Android, iOS */
	     url('../fonts/Roboto/Roboto.eot') format('embedded-opentype'),	/* IE9 Compat Modes */
	     url('../fonts/Roboto/Roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('../fonts/Roboto/Roboto.svg') format('svg');       		/* Legacy iOS */
}
@font-face {
	font-family: 'RobotoMono';
	src: url('../fonts/RobotoMono/RobotoMono.woff') format('woff'),             /* Modern browsers */
	     url('../fonts/RobotoMono/RobotoMono.ttf') format('truetype'),         /* Safari, Android, iOS */
	     url('../fonts/RobotoMono/RobotoMono.eot') format('embedded-opentype'),	/* IE9 Compat Modes */
	     url('../fonts/RobotoMono/RobotoMono.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('../fonts/RobotoMono/RobotoMono.svg') format('svg');       		/* Legacy iOS */
}
:root {
  --motion-fast: 0.15s;
  --motion-base: 0.2s;
  --motion-slow: 0.3s;

  --ease-standard: ease;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: 'Roboto' !important;
}
button {
  font-family: 'RobotoMono' !important;
}
a {
  color: var(--text-main);
}
a:hover {
  color: var(--text-main);
}

a.dropdown-toggle {
  text-decoration: none !important;
}
.no-padding {
  padding: 0px !important;
}
.padding-col {
  padding: 8px 30px;
}
.dropdown-menu {
  border: 1px solid var(--border-color);
}
.smallButton {
  font-family: 'RobotoMono';
  font-size: 12px;
  font-weight: 700;
}
.ges-icon {
  font-size: 20px;
}
.icon-connector {
  font-size: 32px;
}
.icon-connector-lg {
  font-size: 80px !important;
}
.icon-lg {
  font-size: 18px !important;
}
.icon-dash-card-small {
  font-size: 16px;
}
.icon-md {
  font-size: 14px;
}
.icon-small {
  font-size: 12px !important;
}
.icon-tiny {
  font-size: 8px !important;
}
.icon-arrow-revenues {
  font-size: 10px !important;
}
.title {
  font-family: 'RobotoMono';
  font-size: 12px !important;
  font-weight: 700;
  line-height: 14px;
}
.title-md {
  font-family: 'RobotoMono';
  font-size: 14px !important;
  font-weight: 700;
  line-height: 16px;
}
.bigTitle {
  font-family: 'RobotoMono';
  font-size: 16px !important;
  font-weight: 700;
  line-height: 18px;
}
.bigText {
  font-family: 'Roboto';
  font-size: 16px;
  line-height: 16px;
}
.text {
  font-family: 'Roboto' !important;
  font-size: 14px !important;
  line-height: 14px;
}
.infoText {
  font-family: 'Roboto';
  font-size: 12px !important;
  line-height: 12px;
  font-weight: 400 !important;
  color: var(--color-primary);
}
.currencyText {
  font-family: 'RobotoMono';
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: var(--color-primary);
}
.labelText {
  font-family: 'RobotoMono';
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
}
.bg-red {
  background-color: var(--color-red) !important;
}
.logout > .icon-login {
  transform: rotate(-90deg);
}
.small-button {
  font-family: 'RobotoMono';
  font-weight: 700;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  text-transform: uppercase;
}
/* TEXT COLORS */
.text-green {
  color: var(--color-green) !important;
}
.text-gray {
  color: var(--color-gray) !important;
}
.text-yellow {
  color: var(--color-yellow) !important;
}
.text-orange {
  color: var(--color-orange) !important;
}
.text-red {
  color: var(--color-red) !important;
}
.text-blue {
  color: var(--color-blue) !important;
} 
.text-purple {
  color: var(--color-purple) !important;
}
.text-dark-green {
  color: var(--color-dark-green) !important;
}
/* END TEXT COLORS */

/* NEW CONTENT HEADER */
.custom-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 0px 0px;
}

.custom-page-header .header-left {
  display: flex;
  flex-direction: column;
}

.custom-page-header .bigTitle {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.custom-page-header .header-right {
  display: flex;
  align-items: center;
}

.custom-page-header .breadcrumb {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px; 
  padding: 0;
  margin: 0;
  background: transparent;
  list-style: none;
}
.custom-page-header .breadcrumb li,
.custom-page-header .breadcrumb li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
  text-decoration: none;
}
.custom-page-header .breadcrumb li + li::before {
  content: "\e90e";
  font-family: 'ges-icons';
  display: inline-flex;
  align-items: center;
  margin-right: 0px;
  color: var(--color-primary);
  font-size: 12px;
}
.station-page-header {
  padding: 15px 15px 15px 25px;
}
/* END NEW HEADER */

.btnCreateConnectorName {
  margin-top: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
}
.connectorNameInput{
  width: 50%;
  margin-left: 15px;
}

.connectorNameModalBody {
  padding-left: 15px;
}
.formSelect {
  height: 34px;
  border-color: #d2d6de;
}
.fileInputFirmware {
  padding-top: 15px;
}
.file-upload-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

#selectedFileName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.station-content {
  padding: 0px 15px;
}
.content {
  border: 1px solid transparent;
  background-color: var(--bg-body);
  padding: 0px 15px;
}
/* DASHBOARD BOXES */
.small-box > .inner,
.report-box-body.inner {
  display: flex;
  padding: 8px 10px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: flex-end; /* allinea l'icona al fondo del testo */
}
.small-box > .inner .small-box-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.small-box .box-content {
  display: flex;
  flex-direction: column;
}

.small-box .icon {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-left: 12px;
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  line-height: 1;
  font-size: 32px;
  padding-bottom: 5px;
  color: var(--color-primary);
}
.small-box .icon i,
.small-box .icon span {
  display: block;
  line-height: 1;
}
.small-box:hover > .inner .icon {
  font-size: 32px;
  color: var(--color-primary);
  transition: none;
}
.report-box-body > .icon {
  font-size: 20px !important;
}
.dash-error-icon {
  color: var(--text-light) !important;
}
.small-box-footer {
  color: var(--text-light) !important;
  background-color: var(--color-primary) !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between; 
  gap: 0;
  align-items: flex-start;
  padding: 8px 10px !important;
  border-radius: 0px 0px 10px 10px;
}
.report-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0px;
  border-radius: 10px;
}
.report-box-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
  background-color: var(--color-primary);
  color: var(--text-light);
  border-bottom: none;
  border-radius: 10px 10px 0 0;

}
.report-box-body {
  position: relative;
  padding: 10px;
}

.report-box-body + .report-box-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px; 
  right: 10px;  
  height: 1px;
  background-color: var(--border-color);
}

.small-box, .breadcrumb, .box {
  border-radius: 10px;
}
.small-box:hover {
  color: var(--color-primary);
}
#rowMap:has(.box:not(.collapsed-box)),
#rowCharts:not(:has(.box.collapsed-box)) {
  display: flex;
  align-items: stretch;
}
#rowCharts canvas {
  width: 100% !important;
  height: 275px !important;
}

.row-equal > [class*="col-"] {
  display: flex;
}
.row-equal .small-box,
.row-equal .report-box {
  flex: 1;
}
.custom-footer {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px 10px 0px;
  gap: 8px;
  isolation: isolate;
  background: #FFFFFF;
  border-width: 0px solid;
  border-radius: 0px 0px 10px 10px;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
}
.custom-footer>.form-group {
  margin-bottom: 0px;
}
.mapSearchForm {
  width: 40%;
}   
.searchTextOnMapDashboard {

} 
.mapSearchInput {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 10px;
  gap: 10px;
  height: 40px !important;
  border-width: 1px 0px 1px 1px;
  border-style: solid;
  border-color: #D2D2D2;
  background-color: var(--bg-body);
  border-radius: 8px 0px 0px 8px !important;
  text-align: left !important;
}
.btnSearchMap {
  height: 40px !important;
  border-radius: 0px 8px 8px 0px !important;
  border-width: 1px 1px 1px 0px !important;
  border-style: solid !important;
  border-color: var(--border-color) !important;
  display: block !important;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  margin-bottom: 0px;
  white-space: nowrap;
}
.filter-item > * {
  flex-shrink: 0;
}
#status-stations {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
}
.containerConnectorsMap {
  padding: 10px;
}
/* cerchio icona */
.stationFilterDash {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--text-light);
  border-radius: 50%;
}
.stationFilterAvailable {
  background: var(--color-secondary);
}
.stationFilterOccupied {
  background: var(--color-orange);
}
.stationFilterError {
  background: var(--color-red);
}
.stationFilterOffline {
  background: var(--color-gray)
}
.icon-dash {
  font-size: 28px;
}
.checkBoxDash {
  position: absolute;
  opacity: 0;
}
.custom-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--input-bg);
  margin-bottom: 5px;
  flex-shrink: 0;
}
.custom-checkbox i {
  opacity: 0;
  font-size: 10px;
  color: var(--color-primary);
  transition: opacity 0.2s ease;
}

.checkBoxDash:checked + .custom-checkbox i {
    opacity: 1;
}

.checkBoxDash:checked + .custom-checkbox {
  background-color: var(--color-secondary);
}

/* badge  */
.badge {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  min-width: 16px;
  padding: 0px 4px;
  height: 13px;
  left: 28px;
  top: -3px;
  background: var(--color-secondary);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 100px;
  font-family: 'RobotoMono';
  font-size: 8px;
}
.center {
	text-align: center;
	margin: auto;
}
.small-box {
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
}
.small-box h3 {
  font-weight: 700 !important; 
  font-size: 40px;
  font-family: 'RobotoMono';
  padding-top: 5px !important; 
  margin-top: -7px !important; 
  margin-bottom: 0px !important; 
}
.small-box p {
  font-family: 'RobotoMono';
	font-weight: 700;
  font-size: 12px; 
  margin-bottom: 0px !important; 
}
/* END DASHBOARD */
.content-wrapper, .right-side {
  background-color: var(--bg-body) !important;
}
.icon-connector-status {
  font-size: 16px !important;
}

/* TABLE DATATABLE */
.box-body.table-responsive {
  overflow-x: auto !important;
}

.box-body.table-responsive .dataTables_wrapper.dt-full-width {
  width: 100%;
}

/* reset ordering icons */
table.dataTable thead th:before,
table.dataTable thead th:after {
  content: "";
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  font-family: 'ges-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  bottom: 13px;
  right: 11px;
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-light);
}

table.dataTable thead th.sorting::after {
  content: "\e932" !important; /* icon-order */
  color: var(--border-color);
  opacity: 0.7;
}
table.dataTable thead th.red-header.sorting::after {
  content: "\e932" !important; /* icon-order */
  color: var(--text-light);
  opacity: 0.7;
}


table.dataTable thead th.sorting_asc::after {
  content: "\e93f" !important; /* icon-arrow-up */
  opacity: 1;
}

table.dataTable thead th.sorting_desc::after {
  content: "\e940" !important; /* icon-arrow-down */
  opacity: 1;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead th.sorting_asc_disabled::after,
table.dataTable thead th.sorting_desc_disabled::after {
  display: inline-block;
}
table.dataTable thead th.sorting_disabled {
  padding-right: 30px;
}
.table-responsive {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 20px 0px;
  gap: 0px;
}

.search-table-header {
  display: flex; 
  flex-direction: column; 
  align-items: flex-start;
  padding: 8px 0px;
  gap: 8px;
}
.search-table-header-station {
  display: flex; 
  flex-direction: column; 
  align-items: flex-start;
  padding: 8px;
  gap: 8px;
}
.search-table-header-no-search {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  min-height: 78px;
  padding: 8px 0;
  gap: 8px;

}
.search-table-header-input-container {
  display: flex; 
  gap: 5px; 
  width: 100%;
  align-items: center;
}
.column-search {
  max-width: 150px;
}

table.dataTable.dt-column-search thead th.sorting::after,
table.dataTable.dt-column-search thead th.sorting_asc::after,
table.dataTable.dt-column-search thead th.sorting_desc::after {
  font-family: 'ges-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  bottom: 25px;
  right: 11px;
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-light);
}

.table {
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.table.error-table {
  border: 1px solid var(--color-red);
}
table.dataTable tbody td {
  vertical-align: middle !important;
}
td {
  padding: 6px !important;
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}
td > div:not(.station-status) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
td > .station-label-container {
  display: flex;
  align-items: flex-start !important;
}
td > div:is(.btn-round) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
td > div:is(.station-status) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 4px;
}

tbody > td { 
  border: 0px solid !important;
}
.table>tbody>tr:not(:first-child)>td  { 
  border-top: 1px solid var(--border-color) !important;
}

tbody > tr, .odd {
  background-color: var(--bg-card) !important;
}
th {
  border: initial !important;
  padding: 0;
  background: var(--color-primary);
  color: var(--text-light);
  text-align: center;
  white-space: nowrap;
}
th.red-header {
  background: var(--color-red);
}

th:first-child {
  border-radius: 8px 0px 0px 0px;
}
th:last-child {
  border-radius: 0px 8px 0px 0px;
}
.table>thead>tr>th {
  padding: 0px
}
.th-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding: 12px 8px !important;
}
div.dataTables_wrapper div.dataTables_length select {
  margin-left: 10px !important;
  margin-right: 10px !important;
}
div.dataTables_wrapper div.dataTables_filter input {
	margin-left: 15px !important;
}
table.dataTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

table.dataTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}
.box-body.table-responsive .dataTables_wrapper > .row:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 30;
  margin: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* table length */

.dataTables_length label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-bottom: 10px;
  white-space: nowrap;
}

.dataTables_length label::after {
  content: "\e935";
  font-family: 'ges-icons' !important;
  font-size: 8px;
  line-height: 1;
  color: var(--text-main);
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  left: 130px;
  pointer-events: none;
}

.dataTables_length .length-prefix {
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 700;
}

.dataTables_length .length-suffix {
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 400;
}

.dataTables_length select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 36px;
  min-width: 72px;
  padding: 8px 34px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-body);
  color: var(--text-main);
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  cursor: pointer;
  outline: none;
}
/* end legth */
/* search */
.box-body.table-responsive {
  position: relative;
  overflow-x: auto;
}

.box-body.table-responsive .dataTables_filter {
  position: sticky;
  left: calc(100% - 350px);
  top: 0;
  z-index: 50;
  width: 350px;
  background: #fff;
  text-align: right;
  white-space: nowrap;
  margin-bottom: 8px;
}

.box-body.table-responsive .dataTables_filter label {
  white-space: nowrap;
}

.box-body.table-responsive .dataTables_filter input {
  display: inline-block;
  width: 260px;
}
/* end search */
/* info + pagination */
.dataTables_wrapper > div.row:last-child {
  display: flex;
  justify-content: center;
}
div.dataTables_wrapper div.dataTables_info {
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  padding: 20px 0px 20px 0px !important;
}
.dataTables_wrapper .row .col-sm-7 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.dataTables_wrapper .dataTables_paginate {
  position: sticky;
  right: 0;
  width: fit-content;
  margin-left: auto !important;
  z-index: 10;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  display: flex;
  margin: 0;
  gap: 5px;
}
.pagination > li.previous > a,
.pagination > li.next > a,
.pagination > li.previous.disabled > a,
.pagination > li.next.disabled > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: var(--color-primary) !important;
  color: var(--text-light) !important;
  border-radius: 8px !important;
  border: 1px solid transparent;
  font-size: 12px;
  padding: 10px;
}

.pagination > li.previous > a:hover,
.pagination > li.next > a:hover,
.pagination > li.previous.disabled > a:hover,
.pagination > li.next.disabled > a:hover {
  background-color: var(--border-color) !important;
}
.pagination > li.paginate_button > a {
  background-color: var(--bg-card);
  border-radius: 8px !important;
  border: 1px solid transparent;
}
.pagination > li.paginate_button.active > a {
  background-color: var(--border-color);
}
.pagination > li.paginate_button > a:hover,
.pagination > li.paginate_button.active > a:hover {
  background-color: var(--border-color);
  color: var(--text-light) !important;
  border: 1px solid transparent;
}
/* end info + pagination */

/* copy cell table */
.copy-cell-content {
  display: flex;
  flex-direction: row !important; 
  justify-content: center;
  align-items: center;
}

.cell-text {
  display: block;
  padding-right: 36px;
}

.copy-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  gap: 10px;
  border-radius: 50% !important;
  width: 30px;
  height: 30px;
  opacity: 0;
  background-color: var(--color-primary);
  color: var(--text-light);              
  border: 1px solid transparent;
  font-size: 14px;
}
td:hover .copy-btn {
  opacity: 1;
  pointer-events: auto;
}
/* end copy cell */
.data-action-cell {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* selected row */
table.dataTable tbody tr.selected, table.dataTable tbody th.selected, table.dataTable tbody td.selected {
  background-color: var(--color-secondary) !important;
  color: var(--text-main) !important;
}
table.dataTable tbody tr.selected a, table.dataTable tbody th.selected a, table.dataTable tbody td.selected a {
  color: var(--text-light) !important;
}

/* END DATATABLE */

/* STATION PAGE */
.current-station-page {
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  border-radius: 10px;
}
.nav-tabs-custom {
  box-shadow: none !important;
  margin-bottom: 0px;
}
.nav-tabs-custom>.tab-content {
  padding: 10px 10px 0px 10px;
}
.nav-tabs-custom > .nav-tabs {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  float: none !important;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-primary);
}
.nav-tabs-custom > .nav-tabs > li {
  float: none !important;
}
.nav-tabs-custom > .nav-tabs > li.header {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
}
.nav-tabs-custom > .nav-tabs > li.header h1 {
  margin: 0;
  line-height: 1;
}
.nav-tabs-custom > .nav-tabs {
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px;
}
.nav-tabs-custom > .nav-tabs > li {
  border-top: none !important;
  margin-bottom: 0 !important;
  margin-right: 5px;
  float: none !important;
}
.nav-tabs > li:first-child.active > a {
  border-top-right-radius: 10px;
}
.nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: transparent !important;
}
.nav-tabs-custom > .nav-tabs > li > a {
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  margin: 0;
  box-sizing: border-box;
  background: transparent;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover,
.nav-tabs-custom > .nav-tabs > li.active > a:focus {
  background: var(--color-secondary);
  color: var(--text-main);
  border-bottom: 1px solid transparent; 
}

/* station info */
.station-content-wrapper {
  padding-left: 20px;
  background-color: var(--bg-body);
}
.station-data {
  border-radius: 10px;
  border: 1px solid transparent;
}
.station-data-table {
  border: 1px solid transparent;
}
.station-data-table > tbody > tr > th {
  background-color: transparent;
  color: var(--text-main);
  font-family: 'RobotoMono';
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0%;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color) !important;
  text-align: start !important;
}

.station-data-table > tbody > tr > td {
  background-color: transparent;
  color: var(--text-main);
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0%;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color) !important;
  border-top: 1px solid transparent;
}
.station-data-table .label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-right: 16px;
}
.station-data-table > tbody > tr.no-border > th,
.station-data-table > tbody > tr.no-border > td {
  border: 1px solid transparent !important;
}
/* station map */
.station-map-body {
  padding: 0px;
}
.station-map-header {
  padding: 10px !important;
}
.station-map-footer {
  display: flex;
  justify-content: flex-start;
  align-content: center;
}
/* end station map */
/* connectors info in table */
.connectors {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.connector-card {
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.connector-main {
  width: 100%;
  min-height: 74px;
  padding: 12px 8px;
  background: #f4f4f4;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.connector-name {
  font-size: 12px;
  line-height: 12px;
  font-family: 'Roboto';
  text-align: center;
}
div.connector-status > span {
  margin-right: 0px;
}
.connector-status {
  min-height: 20px;
}
.station-data-table .connector-status .label {
  margin-right: 0;
}
.connector-number {
  width: 100%;
  padding: 6px 0;
  background: #1f2333;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-family: 'RobotoMono';
  font-size: 12px;
  line-height: 14px;
}
/* end container connectors */

/* station charts */
.station-chart-header {
  padding-top: 10px !important;
  padding-bottom: 16px !important;
  padding-left: 10px !important;
}
.chart-inputs {
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 10px;
}

.chart-inputs > .col-md-4 {
  float: none !important;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

.chart-inputs .form-group {
  margin-bottom: 0;
}

.chart-inputs .checkbox-inline-custom {
  margin-left: auto;
}

.chart-footer {
  padding: 0px;
}

/* end station charts */

/* end station info */

/* logs box */
.logs-row {
  margin-top: 32px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 32px;
}
.logs-row-customers {
  margin-left: 0px;
  margin-right: 0px;
}
.logs-container {
  padding: 0px;
}
.logs-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.chat {
  padding: 10px;
}
.logs-box {
  margin-bottom: 0px;
}
.logs-area {
  background-color: var(--bg-body) !important;
  color: var(--text-main);
}
/* end logs box */

/* station settings page */
.station-settings-row {
  padding: 0px 15px 5px 15px;
}
.collapsable-box-header {
  padding: 16px 10px !important;
  max-height: 53px;
  min-height: 53px;
}
.has-error select.form-control {
  border-color: var(--color-red) !important;
  box-shadow: none !important;
}
.inputs-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 10px;
  max-width: 100%;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 40px;
  padding: 8px 34px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  cursor: pointer;
  outline: none;
}

.duallistbox-container {
  border: 1px solid transparent !important;
}
.secondary-box-header {
  padding: 8px 10px !important;
}
.moveall, .removeall {
  border-radius: 8px 8px 0px 0px !important;
}
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
  margin-left: 0px;
}
.bootstrap-duallistbox-container select.form-control {
  border-radius: 0 0 8px 8px !important;
  background-clip: padding-box;
}
.bootstrap-duallistbox-container select.form-control::-webkit-scrollbar {
  width: 10px;
}

.bootstrap-duallistbox-container select.form-control::-webkit-scrollbar-track {
  background: transparent;
  border-bottom-right-radius: 8px;
}

.bootstrap-duallistbox-container select.form-control::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 8px;
}

hr {
  border: 0;
  border-top: 1px solid var(--divider-color);
  margin-top: 20px;
  margin-bottom: 35px;
}
hr.divider-small {
  border: 0;
  border-top: 1px solid var(--divider-color);
  margin-top: 20px;
  margin-bottom: 20px;
}
hr.divider-tiny {
  border: 0;
  border-top: 1px solid var(--divider-color);
  margin-top: 0px;
  margin-bottom: 20px;
}

.configuration-map-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  gap: 8px;
}
.map-config-title {
  margin: 0px;
}
.configuration-map-header .header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  margin-right: auto;
}
.configuration-map-header .header-right {
  gap: 8px;
  display: flex;
  align-items: center;
  margin-left: auto;
}

#searchBoxMapEditStationForm {
  min-width: 350px;
  max-width: 100% !important;
}

#searchBoxMapEditStationForm .input-group {
  display: flex;
  width: 100%;
}

#searchBoxMapEditStationText {
  min-width: 290px;
  flex: 1 1 auto;
  width: auto;
  min-height: 40px;
}

#searchBoxMapEditStationForm .input-group-btn {
  display: flex;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
}

#searchBoxMapEditStationForm .input-group-btn .btn {
  height: 40px;
  white-space: nowrap;
}
#map_edit_station_location {
  height: 470px;
	width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.form-group.has-error .help-block {
  color: var(--color-red);
}
.help-block {
  font-size: 12px;
}
.form-group.has-error label {
  color: var(--color-red);
}

.energy-remove-wrapper,
.impact-remove-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin-top: 20px;
}
.energy-source-row,
.impact-source-row {
	align-items: end;
}
.center-items {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 8px 16px 8px;
}
.tariffNotification {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
}
.capabilitiesConnectorContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.capabilitiesConnectorContainer .label-text {
  padding-left: 0px !important;
}

.checkBoxDash:disabled + .custom-checkbox {
  opacity: 0.5;
  cursor: not-allowed;
}
.checkBoxDash:disabled:checked + .custom-checkbox i {
	opacity: 0.5;
}
.checkbox-no-margin {
  padding-left: 0px !important;
}
.no-margin-top {
  margin-top: 0px;
}
.form-checkbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
}
.form-checkbox-margin {
  margin-top: 6px;
}
.custom-radio-margin {
  margin-right: 20px;
}

.hidden-file-input {
	display: none !important;
}
#logoFrame {
  max-width: 500px; 
  max-height: 175px;
}
#custom-file-upload {
	margin-bottom: 0;
	cursor: pointer;
}
.vertical-order {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.form-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.form-select-wrapper select {
  width: 100%;
  padding-right: 34px; 
}

.form-select-wrapper::after {
  content: "\e935"; 
  font-family: 'ges-icons';
  position: absolute;
  right: 10px;
  top: 67%;
  transform: translateY(-50%);
  font-size: 8px;
  color: var(--text-main);
  pointer-events: none; 
  z-index: 1000;
}
.openingTimes-table {
  border: 1px solid var(--dark-border-color) !important;
  border-collapse: separate !important;
}
.bottom-left-radius {
  border-bottom-left-radius: 8px;
}
.bottom-right-radius {
  border-bottom-right-radius: 8px;
}
.opening-time-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding-bottom: 5px;
}

.time-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 6px;
  max-width: 140px;
}

.remove-time {
  align-self: center;
}

.time-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.additionalInfo-select-wrapper {
  position: relative;
}

.additionalInfo-select-wrapper select {
  width: 100%;
  padding-right: 34px;
}

.additionalInfo-select-wrapper::after {
  content: "\e935";
  font-family: 'ges-icons';
  position: absolute;
  right: 10px;
  top: 20px;
  transform: translateY(-50%);
  font-size: 8px;
  color: var(--text-main);
  pointer-events: none;
  line-height: 1;
}
.additionalInfo-textarea {
  resize: vertical;
}
.textarea-wrapper {
  position: relative;
}

.char-counter {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 12px;
  color: var(--border-color);
  background: transparent;
  padding: 0 4px;
  pointer-events: none;
}
.footer-save-changes{
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 10px;
}
.btn-save-settings {
  min-width: 200px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* end station settings */

/* remote control */
.left-data {
  display: flex;
  justify-content: flex-start;
  justify-items: center;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  margin-right: auto;
}
.right-data {
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.row-flex-center {
  display: flex;
  align-items: center;
}
.containerConnectors {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.containerConnector {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 8px;
}
.containerConnectorLevel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Input */
.containerConnector input.form-control {
  width: 100%;
  box-sizing: border-box;
}

/* Bottoni */
.containerConnector button,
.containerConnector .btn-group,
.containerConnector .dropdown-menu-custom {
  width: 100%;
}

/* Bottone dropdown */
.containerConnector .btn-group > button {
  width: 100%;
}

/* Pulsanti normali */
.containerConnector .btn-icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
}

.border-group-top {
  border-radius: 8px 8px 0px 0px !important;
}
.border-group-bottom {
  border-radius: 0px 0px 8px 8px !important;
}
.button-logo-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 15px;
}
/* end remote control */

/* END STATION PAGE */

/* OPERATOR PAGE */
.form-control {
  min-height: 40px;
  border-radius: 8px;
}
.btn-default {
  border: 1px solid var(--color-primary) !important;
}
.btn-default.active.focus {
  background-color: var(--bg-card) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  box-shadow: none;
}
.btn-default.active {
  background-color: var(--bg-card) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  box-shadow: none;
}
.btn.active.focus {
  outline: none !important;
}
#optionSolo.disabled,
#optionMulti.disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.date-column {
  white-space: nowrap;
}
/* END OPERATOR PAGE */
/* REVENUES PAGE */
.centered-row {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.revenues-cards {
  display: flex;
  gap: 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  align-items: stretch;
}
.revenue-card {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: flex-end;
  gap: 20px;
  min-width: 0;
}

.revenue-main {
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 125px;
}
.percentage-label {
  padding-bottom: 8px;
}
.vertical {
  width: 1px;
  align-self: stretch;
  background-color: var(--border-color);
  border: none;
  margin: 0;
}
/* END REVENUES */
.action-buttons-table {
  display: flex; 
  flex-direction: row !important; 
  align-items: center !important; 
  justify-content: space-between !important;
}
.action-buttons-only-table {
  display: flex; 
  flex-direction: row !important; 
  align-items: center !important; 
  justify-content: center !important;
}
.overflow-allow {
  overflow: visible !important;
}
.top-layer {
  z-index: 1000;
}
/* BOOTSTRAP DATETIME PICKER */
.bootstrap-datetimepicker-widget {
	background-color: var(--bg-card) !important;
	border: 1px solid var(--color-primary) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	padding: 0 !important;
}

.bootstrap-datetimepicker-widget a,
.bootstrap-datetimepicker-widget a:hover,
.bootstrap-datetimepicker-widget a:focus,
.bootstrap-datetimepicker-widget .btn,
.bootstrap-datetimepicker-widget [class^="icon-"],
.bootstrap-datetimepicker-widget [class*=" icon-"] {
  text-decoration: none !important;
}

.bootstrap-datetimepicker-widget table {
	width: 100%;
	margin: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background-color: var(--bg-card) !important;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th,
.bootstrap-datetimepicker-widget table thead tr:nth-child(2) th {
	background-color: var(--color-primary) !important;
	color: var(--text-light) !important;
	border-radius: 0 !important;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:first-child {
	border-top-left-radius: 8px !important;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:last-child {
	border-top-right-radius: 8px !important;
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
	color: var(--color-primary) !important;
}

.bootstrap-datetimepicker-widget table td {
	padding: 0 !important;
}

.bootstrap-datetimepicker-widget table td.day:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	color: var(--color-primary) !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
	background-color: var(--color-primary) !important;
	color: var(--text-light) !important;
	text-shadow: none !important;
}

.bootstrap-datetimepicker-widget table td.today:before {
	border-bottom-color: var(--color-primary) !important;
}

.bootstrap-datetimepicker-widget .btn,
.bootstrap-datetimepicker-widget .picker-switch,
.bootstrap-datetimepicker-widget .prev,
.bootstrap-datetimepicker-widget .next {
	background-color: var(--color-primary) !important;
	color: var(--text-light) !important;
	border: 0 !important;
}

/* disable hover on cells only on buttons */

.bootstrap-datetimepicker-widget td:has(a[data-action]):hover {
	background: transparent !important;
}
/* no hover timepicker cells */

.bootstrap-datetimepicker-widget .timepicker-picker td:hover,
.bootstrap-datetimepicker-widget .timepicker-picker td a:hover,
.bootstrap-datetimepicker-widget .timepicker-picker td span:hover {
	background-color: transparent !important;
}

/* hover only on caret button */

.bootstrap-datetimepicker-widget .timepicker-picker a[data-action]:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	border-radius: 6px !important;
}
/* control buttons */

.bootstrap-datetimepicker-widget a[data-action],
.bootstrap-datetimepicker-widget .picker-switch a,
.bootstrap-datetimepicker-widget td a[data-action] {
	width: 100% !important;
	height: 34px !important;
	min-width: 100% !important;
	padding: 0 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	background: transparent !important;
	color: var(--color-primary) !important;
	border-radius: 6px !important;
}

/* button hover */

.bootstrap-datetimepicker-widget a[data-action]:hover,
.bootstrap-datetimepicker-widget td a[data-action]:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	color: var(--color-primary) !important;
}

/* icons */

.bootstrap-datetimepicker-widget a[data-action] span,
.bootstrap-datetimepicker-widget a[data-action] i,
.bootstrap-datetimepicker-widget .picker-switch a span,
.bootstrap-datetimepicker-widget .picker-switch a i,
.bootstrap-datetimepicker-widget a span {
	font-size: 14px !important;
	line-height: 1 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
/* END DATETIME PICKER */

.modal-content {
  border-radius: 8px;
}
.close {
  color: var(--color-primary);
  opacity: 1;
}
.close:hover {
  color: var(--bg-sidebar-hover);
  opacity: 1;
}
.modal-header {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-color);
}
.modal-title {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 0px;
}    
.modal-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--border-color);
  text-align: left;
}
.input-group-addon { 
  border: initial !important;
  background-color: transparent !important;
}
input[type=text], input[type=time], select { 
  border-radius: 8px;
}
textarea { 
  border-radius: 8px !important;
}
.input-sm { 
  border-radius: 8px !important;
}
input[type=time].form-control {
  line-height: 1.42857143 !important;
}
.box-footer, .box { 
  background-color: var(--bg-card);
}
.box {
  border-top: 1px solid transparent;
  display: flex;
  flex-direction: column;
}
.box-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.box > .box-body {
    display: flex !important;
    overflow: hidden;
    max-height: 1000px;
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;

    transition:
        max-height .28s cubic-bezier(.4, 0, .2, 1),
        opacity .18s ease,
        transform .28s cubic-bezier(.4, 0, .2, 1),
        padding-top .28s cubic-bezier(.4, 0, .2, 1),
        padding-bottom .28s cubic-bezier(.4, 0, .2, 1);
}
.box.collapsed-box > .custom-header {
  border-radius: 10px;
}
.box.collapsed-box > .box-body {
    max-height: 0;
    opacity: 0;
    transform: scaleY(.96);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}
.box > .box-body,
.box > .box-footer {
  display: flex;
  overflow: hidden;
  max-height: 100000px;
  opacity: 1;
  transform: scaleY(1);
  transform-origin: top;

  transition:
    max-height .28s cubic-bezier(.4, 0, .2, 1),
    opacity .18s ease,
    transform .28s cubic-bezier(.4, 0, .2, 1),
    padding-top .28s cubic-bezier(.4, 0, .2, 1),
    padding-bottom .28s cubic-bezier(.4, 0, .2, 1);
}

.box.collapsed-box > .box-body,
.box.collapsed-box > .box-footer {
  max-height: 0;
  opacity: 0;
  transform: scaleY(.96);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
}

.box-footer {
  border-radius: 0px 0px 10px 10px;
  border: 1px solid transparent;
}
.box-footer:not(.custom-footer) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  gap: 10px;
  border-radius: 0px 0px 10px 10px;
  align-self: stretch;
}
.box-footer .button-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 10px;
}

.chart-footer {
  padding: 0px 10px 0px 10px;
}
.box, box-shadow, box-shadow  {
  box-shadow: initial !important;
}
.border-box {
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

/* BUTTONS */ 
.btn { 
  display: inline-flex;
  padding: 8px 16px;
  gap: 10px;
  font-size: 12px !important;
  border-radius: 100px;
  border: 1px solid transparent !important;
  background-color: var(--color-primary);
  color: var(--text-light);
  text-transform: uppercase;
  font-family: 'RobotoMono';
  font-weight: 700;
}
.btn:hover {
  opacity: 0.5;
  color: var(--text-light);
}
.btn:focus {
  background-color: var(--border-color);
  color: var(--text-light);
}
.btn i {
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
}

.btn-ncColors {
  background-color: var(--color-secondary) !important;
  color: var(--text-main) !important;
}
.btn-danger {
  background-color: var(--color-red) !important;
  color: var(--text-light) !important;
}
.btn-yellow {
  background-color: var(--color-yellow) !important;
  color: var(--text-light) !important;
}
.btn-yellow:hover {
  opacity: 0.5;
  color: var(--text-light) !important;
}
.btn-ncColors:hover {
  opacity: 0.5;
  color: var(--text-main) !important;
}
.btn-danger:hover {
  opacity: 0.5;
  color: var(--text-light) !important;
}
.btn-round {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 10px;
  border-radius: 50% !important;
  width: 41px;
  height: 41px;
}
.btn-round-small {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
  padding: 0;
  margin: 0;
  border-radius: 50% !important;
  box-sizing: border-box;
  line-height: 1;
}
.openingTimes-buttons {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: center !important;
  padding: 0px;
  gap: 8px;
}

.btn-icon { 
  display: flex;
  padding: 8px 16px;
  gap: 10px;
  font-size: 12px !important;
  border-radius: 100px;
  border: 0px solid transparent !important;
  background-color: var(--color-primary);
  color: var(--text-light);
  text-transform: uppercase;
  font-family: 'RobotoMono';
  font-weight: 700;
}
.btn-icon:focus {
  background-color: var(--border-color);
  color: var(--text-light);
}
.btn-icon:hover {
  opacity: 0.5;
  color: var(--text-light);
}
.btn-icon i {
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
}
/* END BUTTONS */ 
/* INPUTS */
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.select-wrapper select {
  width: 100%;
  padding-right: 34px; 
}
select.custom-display {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 36px;
  min-width: 160px;
  padding: 8px 34px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-body);
  color: var(--text-main);
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  cursor: pointer;
  outline: none;
}
.select-wrapper::after {
  content: "\e935"; 
  font-family: 'ges-icons';
  position: absolute;
  right: 10px;
  top: 20px;
  transform: translateY(-50%);
  font-size: 8px;
  color: var(--text-main);
  pointer-events: none; 
}
.select-wrapper-modal {
  position: relative;
  display: inline-block;
  width: 100%;
}
.select-wrapper-modal select {
  width: 100%;
  padding-right: 34px; 
}
.select-wrapper-modal::after {
  content: "\e935"; 
  font-family: 'ges-icons';
  position: absolute;
  right: 56%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  color: var(--text-main);
  pointer-events: none; 
}
.form-control {
  border: 1px solid var(--border-color);
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}
.form-control:focus {
  border: 1px solid var(--color-primary);
}
.input-group .form-control:last-child {
  border-radius: 8px;
}
.input-group .form-control:first-child {
  border-radius: 8px;
}
.form-group.has-error .form-control, .form-group.has-error .input-group-addon {
  border-color: var(--color-red);
  box-shadow: none;
}
.has-error .input-group-addon {
  color: var(--color-red);
}
.form-group.has-error .help-block {
  color: var(--color-red);
}
.form-group.has-success .form-control, .form-group.has-success .input-group-addon {
  border-color: var(--color-dark-green);
  box-shadow: none;
}
.has-success .input-group-addon {
  color: var(--color-dark-green);
}
.form-group.has-success .help-block {
  color: var(--color-dark-green);
}
.form-group.has-success label {
  color: var(--color-dark-green);
}
input[type="text"] {
  border-radius: 8px;
  border: 1px solid var(--border-color);
  min-height: 40px;
}
input[type="text"]:focus {
  border: 1px solid var(--color-primary);
}
input[type="search"]:focus {
  border: 1px solid var(--color-primary);
}
input[type="number"] {
  border-radius: 8px;
  border: 1px solid var(--border-color);
  min-height: 40px;
}
input[type="number"]:focus {
  border: 1px solid var(--color-primary);
}
/* END INPUTS */

tbody .selected {
  background-color: var(--bg-selected);
  color: var(--text-light);
}
.icheck-map {
	margin-left: 2px;
	margin-right: 9px;
}		
#barNotification {
	display:none;
	color: white;
}
.barNotificationLogin {
	position: absolute;
  right: 0px;
  width: 281px;
  padding: 4px;
	color: white;
}
#barNotificationText{
	font-size: 20px;
}
.notificationOrangeTransparent {
	background-color: rgba(255, 152, 0, 0.56);
}
.notificationOrange {
	background: var(--color-orange);
  color: var(--text-main);
}
.notificationBluInfo {
	background-color: var(--color-blue);
  color: var(--text-main);
}
.notificationRed {
	background-color: var(--color-red);
  color: var(--text-light);
}
.notificationGreen {
	background-color: var(--color-secondary);
  color: var(--text-main);
}
.singleStationButtonWithMargin {
	margin-top: 14px;
}
.modalDiagnosticFileTextarea {
	width: 100%;
  height: 367px;
}

.alert-danger {
  background-color: var(--color-red) !important;
  color: var(--text-light) !important;
  border: 1px solid transparent !important;
}
.alert-warning {
  background-color: var(--color-orange) !important;
  color: var(--text-light) !important;
  border: 1px solid transparent !important;
}
.alert-success {
  background-color: var(--color-green) !important;
  color: var(--text-main) !important;
  border: 1px solid transparent !important;
}
/* LABELS */
label {
  margin-bottom: 0px;
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
}
.label { 
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  gap: 10px;
  text-transform: uppercase;
  font-family: 'RobotoMono';
  font-weight: 700;
  font-size: 12px;
}

.label-text {
  display: inline-block;
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 700;
}
.label-text-normal {
  display: inline-block;
  font-family: 'Roboto';
  font-size: 12px;
  font-weight: 400;
}
.label-success {
  color: var(--color-green) !important;
  background-color: color-mix(in srgb, var(--color-green) 10%, transparent) !important;
}
.label-danger {
  color: var(--color-red) !important;
  background-color: color-mix(in srgb, var(--color-red) 10%, transparent) !important;
}
.label-purple {
  color: var(--color-purple) !important;
  background-color: color-mix(in srgb, var(--color-purple) 10%, transparent) !important;
}
.label-gray {
  color: var(--color-gray) !important;
  background-color: color-mix(in srgb, var(--color-gray) 10%, transparent) !important;
}
.label-info {
  color: var(--text-main) !important;
  background-color: color-mix(in srgb, var(--text-main) 10%, transparent) !important;
}
.label-orange {
  color: var(--color-orange);
  background-color: color-mix(in srgb, var(--color-orange) 10%, transparent) !important;
}
.label-yellow {
  color: var(--color-yellow);
  background-color: color-mix(in srgb, var(--color-yellow) 10%, transparent) !important;
}
.label-brown {
  background-color: #8a6d3b !important;
}
.label-sm {
  font-size: 12px;
}
.label-md {
  font-size: 16px;
}
.label-lg {
  font-size: 20px;
}

button.label {
  border: 0px transparent;
}

/* END LABELS */

.station-status-time {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}

.containerConnectorsButtonMoreInfo {
	text-align: center;
	margin-top: -1px;
	float: left;
}
.centerInBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.callout.callout-danger {
  background-color: rgb(from var(--color-red) r g b / 0.2) !important;
	color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
}
.listMultiProviders {
  width: 100%;
}
@media (min-width: 1400px) {
	.small-box h3 {
		font-size: 40px !important; 
	}
}
@media (min-width: 768px) and (max-width: 1400px) {
	.small-box h3 {
		font-size: 40px !important; 
	}
	
	#map_canvas {
		height: 372px !important
	}
}

.box.box-solid.box-info {
  border: 1px solid var(--border-color);
}
.box.box-solid.box-info>.box-header {
	color: initial !important;
  background: var(--bg-card);
  background-color: var(--bg-card);
}
.box-header.custom-header {
  border-radius: 10px 10px 0px 0px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.box-header.custom-header .header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 8px;
  margin-right: auto;
}
.box-header.custom-header .header-right {
  gap: 8px;
  display: flex;
  align-items: center;
}

.box-tools {
  position: relative !important;
  top: 0px !important;
  right: 0px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tool-icon {
  font-size: 18px;
  color: var(--color-primary);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool-icon:hover {
  opacity: 0.8;
}

.box-header.custom-header .header-icon {
  font-size: 20px;
  color: var(--color-primary);
  line-height: 1;
}

.box-header.custom-header .box-title {
  margin: 0;
}

.box-header.custom-header .collapse-trigger {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 18px;
  color: var(--color-primary);
  cursor: pointer;
  line-height: 1;
}
.box-tools .collapse-trigger {
  position: static !important;
}
.checkbox-inline-custom {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  cursor: pointer;
  vertical-align: middle;
}

.centered-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.main-header .sidebar-toggle {
	color: var(--color-primary);
}
.main-header .sidebar-toggle:hover {
	background: var(--bg-header);
  color: var(--color-primary);
}
.sidebar-collapse #cloudLastUpdate {
	display: none;
}
.sidebar-collapse .logo-lg {
	display: none;
}
.lockscreen-logo {
	color: #e5f6ff;
}
.linkColor {
	color: #dfe9fe !important;
}
.textWhite {
	color: white;
}
.timeLockScreen {
	padding: 53px;
    font-size: 40px;
    color: whitesmoke;
}
.lockscreen-credentials button {
	height: 34px !important;
	background-color: #ececec !important;
}
.lockscreen-credentials .input-group {
	left: -7px !important;
}
.lockscreen-item {
	background: transparent !important;
}
.lockscreen-image {
	background: transparent;
	border: 20px solid #fff;
	width: 80px;
	height: 80px;
}
.callout {
  padding: 8px 16px;
}
.callout-no-margin {
  margin-bottom: 0px;
}
.callout-info {
  background-color: var(--bg-card) !important;
  color: var(--text-main);
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
}
.callout a {
  text-decoration: none;
}
.dropdown-menu>li>a {
  color: var(--text-main);
}
@media (min-width: 768px) {
    .modal-dialog {
        width: 900px;
        margin: 30px auto;
    }
    .modal-dialog-sm {
      width: 300px;
      margin: 30px auto;
    }
    .modal-assignTerminal {
      height: auto;
    }
    .addEditOperatorModalDialog {
      width: 950px;
    }
}
@media (min-width: 950px){
  .addEditOperatorModalDialog {
    width: 950px;
  }
}
.urlges {
    display: none;
}
.cloud-twitter {
  position:relative;
  padding:9px;
  margin:20px 0% 0px 0%;
  color: var(--text-main);
  background: var(--bg-sidebar);
  border-radius:10px;
  border: 1px solid var(--border-color);
}

@media screen and (max-width: 992px) {
  .cloud-twitter {
    margin-top: 40px;
  }
}
.openMultiProviderModal {
  float: right;
}

.cloud-twitter::after {
  content: "";
  position: absolute;
  top: -30px;
  left: 10%;
  border: 15px solid color-mix(in srgb, var(--border-color) 0%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--border-color) 100%, transparent) !important;
  display: block;
  width: 0;
}
.preloader-wrapper {
  position: fixed;
  z-index: 999;
  height: 11em;
  width: 2em;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#map_canvas {
	height: 406px;
}

/* SIDEBAR OVVERIDE */
.sidebar-collapse .sidebar-menu a {
	margin-left: 0px !important;
}

.sidebar {
  width: 100%;
  margin: 0;
  padding-left: 10px;   /* reset ul */
  padding-right: 10px;
  list-style: none;
  box-sizing: border-box;
}
.sidebar-menu,
.sidebar-menu > li,
.sidebar-menu > li > a {
  width: 100%;
  box-sizing: border-box;
}
.main-sidebar {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 0px 0px;
  gap: 32px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: var(--bg-header);
  border-right: 1px solid var(--border-color);
  box-shadow: 0px 8px 15px rgba(255, 255, 255, 0.15);
}
.sidebar-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 0px 0px 15px;
  gap: 16px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 1;
}
.sidebar-menu>ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 6px;
  flex: none;
  order: 0;
  flex-grow: 1;
  align-self: stretch;
}
.sidebar-menu>li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 10px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}
.sidebar-menu>li>a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  gap: 8px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  text-decoration: none;
  color: var(--color-primary);
}
.sidebar-menu>li>a>span {
  font-family: 'RobotoMono';
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  display: flex;
  align-items: flex-start;
  color: var(--color-primary);
}
.sidebar-menu > li > a .icon-caret-down {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.sidebar-menu > li {
  border-radius: 10px;
  /*transition: background-color 0.2s ease;*/
}
.sidebar-menu > li.active:not(.has-submenu) {
  background-color: var(--color-primary);
  padding: 8px 10px;
  border-radius: 10px;
}
.sidebar-menu > li.active:not(.has-submenu) > a,
.sidebar-menu > li.active:not(.has-submenu) > a span,
.sidebar-menu > li.active:not(.has-submenu) > a i {
  color: var(--text-light);
}
.sidebar-menu > li.has-submenu.active > a .icon-caret-down,
.sidebar-menu > li.has-submenu.open > a .icon-caret-down {
  transform: rotate(180deg);
}
.sidebar-menu > li:not(.has-submenu):hover {
  background-color: color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}
/* TREEVIEW OPEN MENU */
.sidebar-menu .treeview-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  border: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height var(--motion-base) var(--ease-smooth),
    opacity var(--motion-fast) var(--ease-smooth),
    transform var(--motion-base) var(--ease-smooth);
}

/* SUBMENU aperto */
.sidebar-menu > li.has-submenu.active > .treeview-menu,
.sidebar-menu > li.has-submenu.menu-open > .treeview-menu,
.sidebar-menu > li.has-submenu.open > .treeview-menu,
.sidebar-menu .treeview-menu.menu-open {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}
.sidebar-menu > li,
.sidebar-menu > li.has-submenu {
  border: 1px solid transparent;
}
.sidebar-menu > li.has-submenu {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 10px;
  gap: 0px;
  border-radius: 10px;
  background: transparent;
}
.sidebar-menu > li.has-submenu > .treeview-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: calc(100% + 20px);
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -8px;
  padding: 0;
}

.sidebar-menu > li.has-submenu.active {
  gap: 8px;
}
.sidebar-menu .treeview-menu > li.active {
  margin-top: -3px;
  margin-bottom: -3px;
}
.sidebar-menu > li.has-submenu.active,
.sidebar-menu > li.has-submenu.open,
.sidebar-menu > li.menu-open {
  gap: 8px;
  background: var(--bg-header);
  border-color: var(--border-color);;
}
.sidebar-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
  line-height: 14px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.sidebar-menu .treeview-menu > li > a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--color-primary);
  background: transparent;
  box-sizing: border-box;
  border-radius: 0;
  font-size: 12px !important;
}
.sidebar-menu .treeview-menu > li > a::before { 
  content: "•"; 
  margin-right: 8px; 
  color: var(--color-primary); 
  font-size: 14px; line-height: 1; 
}

.sidebar-menu > li.has-submenu > a > span {
  flex: 1;
  text-align: left;
}
.sidebar-menu .treeview-menu > li.active > a {
  background: var(--color-primary);
  color: var(--text-light);
  border-radius: 0;
}

.sidebar-menu .treeview-menu > li.active > a::before {
  color: var(--text-light);
}
.sidebar-menu .treeview-menu > li.active:first-child {
  margin-top: 0;
}
.sidebar-menu .treeview-menu > li.active:last-child {
  margin-bottom: 0;
}
.sidebar-menu .treeview-menu > li:last-child > a {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* END TREEVIEW OPEN MENU */

.sidebar-menu li,
.sidebar-menu li a,
.sidebar-menu .treeview-menu,
.sidebar-menu .treeview-menu li a {
  transition: none;
}


/* SIDEBAR COLLAPSED */
body.sidebar-mini.sidebar-collapse .main-sidebar,
body.sidebar-mini.sidebar-collapse .sidebar,
body.sidebar-mini.sidebar-collapse .sidebar-menu {
  overflow: visible !important;
}

body.sidebar-mini.sidebar-collapse .sidebar-menu > li {
  position: relative;
}

body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li > a > span,
body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li:hover > a > span,
body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li > a > .icon-caret-down {
  display: none !important;
}

body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li > a > .ges-icon {
  margin: 0 !important;
  padding: 0 !important;
}

body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.has-submenu > .treeview-menu,
body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.has-submenu.active > .treeview-menu,
body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.has-submenu.open > .treeview-menu,
body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.has-submenu.menu-open > .treeview-menu {
  display: none !important;
  position: absolute !important;
  top: 0 !important;
  left: calc(100% + 8px) !important;
  width: auto !important;
  min-width: 210px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
  background: var(--bg-header, #fff) !important;
  border: 1px solid var(--border-color, #ddd) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 10000;
}

body.sidebar-mini.sidebar-collapse
.sidebar-menu > li.has-submenu:hover > .treeview-menu {
  display: flex !important;
  flex-direction: column;
}

body.sidebar-mini.sidebar-collapse
.sidebar-menu > li.has-submenu > .treeview-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 10px;
  height: 100%;
}

body.sidebar-mini.sidebar-collapse
.treeview-menu > li {
  width: 100%;
  margin: 0 !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

body.sidebar-mini.sidebar-collapse
.treeview-menu > li > a {
  display: flex !important;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
  color: var(--color-primary, #333) !important;
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
}
body.sidebar-mini.sidebar-collapse
.treeview-menu > li > a:hover {
  background-color: var(--bg-sidebar-hover);
}

body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.has-submenu > .treeview-menu {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 1px var(--border-color, #ddd),
    0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.has-submenu > .treeview-menu > li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.has-submenu > .treeview-menu > li > a {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.has-submenu > .treeview-menu > li:first-child > a {
  border-radius: 8px 8px 0 0 !important;
}

body.sidebar-mini.sidebar-collapse
.sidebar-menu > li.has-submenu > .treeview-menu > li:last-child > a {
  border-radius: 0 0 8px 8px !important;
}

body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.has-submenu > .treeview-menu > li:first-child > a:hover {
  border-radius: 8px 8px 0 0 !important;
}

body.sidebar-mini.sidebar-collapse
.sidebar-menu > li.has-submenu > .treeview-menu > li:last-child > a:hover {
  border-radius: 0 0 8px 8px !important;
}

body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li > a > span,
body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li:hover > a > span,
body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.active > a > span,
body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.menu-open > a > span {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: static !important;
}
body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li:hover > a > span:not(.pull-right),
body.sidebar-mini.sidebar-collapse
  .sidebar-menu > li.active > a > span:not(.pull-right) {
  display: none !important;
  left: auto !important;
  top: auto !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* END SIDEBAR */

/* NAVBAR OVERRIDE */

.navbar-static-top {
  background-color: var(--bg-header);
  border: none;
  border-bottom: 1px solid var(--border-color) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.notice-banner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-notification);
  color: var(--text-notification);
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.35;
  box-sizing: border-box;
}


.notice-banner-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.notice-banner-title {
  font-weight: 700;
  margin-right: 6px;
}
.navbar-bottom-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0px;
  box-sizing: border-box;
}

/* left: toggle */
.navbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* toggle */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  padding: 0;
}


/* menu right */
.navbar-custom-menu {
  display: flex;
  align-items: center;
}

.navbar-custom-menu .navbar-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.navbar-custom-menu .navbar-nav > li {
  display: flex;
  align-items: center;
}
.notifications-menu {
  display: flex !important;
}
.notifications-menu>a {
  display: flex !important;
  font-size: 24px;
  padding: 10px !important;
  color: var(--text-main);
}
.notifications-menu .badge {
  left: 22.5px;
  top: 8px;
}
.current-user {
  font-family: 'Roboto';
  font-size: 12px;
  line-height: 14px !important;
  font-weight: 700;
}
.barMember {
  font-family: 'Roboto';
  font-size: 12px;
  line-height: 14px !important;
  font-weight: 400;
  float: right;
}

.logout {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  padding: 10px !important;
  gap: 8px;
  background: var(--color-primary);
  border-radius: 100px;
}
.nav>li>a:hover {
  opacity: 0.5 !important;
  background-color: var(--color-primary);
  color: var(--text-light);
}
.errorNotification:hover {
  opacity: 0.5 !important;
  background-color: transparent !important;
  color: var(--text-main) !important;
}
/* user menu */
.user-menu {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.user-menu span {
  line-height: 1.2;
}

/* END NAVBAR */

.logoTextSidebar {
	font-size: 22px;
  text-align: center;
  padding-bottom: 42px;
}

.logo-lg img {
	width: 100%;
  padding: 25px !important;
  margin-top: -15px !important; 
  margin-bottom: 22px !important;
}

@media screen and (max-width: 500px) {
  .main-footer {
	   font-size: 11px;
  }
}

.main-footer{
  background: var(--bg-header) !important;
}

/* LOGIN PAGE */

.loginBackground { 
    background-size: 100% 100%;
    background-attachment: fixed;
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAQACAIAAAAP+8yGAAACoklEQVR4Xu3dwQ0CMQxEUTtKvbRCC3RqjtwR3g3WSwP/MDOObaIlH89XdJ4VzQcAACBiZzcgMvs1AAAAAFCu3WiR3YCYcKMBACh2AKopgFJBA7Xoo4Fip1TQAEAtkmQASXZlalsAJLk/aC59AICdSQNJ7ge4DwRN0ORAbypociAHgsamliHWmlwkB7oKnZ0caH7lQA40v3LApmqRHPiBAsBCSvsOYCHFpuZkfZEcsCmbsqn2/XSbchGAHLApm3q9D6Cz07YAaB19oZWLaCAHbHoiwBf52BRADtiUTb1KAJAD384B8Gkbzx4APOyWAwAjlKCx6eQky4GgyYGgCZocAAiapSCAoLkPJBnA03QASZZkGgAoFVpHczKAWmQIVIsAAOxNARQ7AAB9kUEcQLn+/gCopgAAbjQ3Gg1cOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANV8aAAAAADwi7Pr/5+DVt2tAQAAgGK3I6oZUANEBgDQtigVACFoYQBhUwBBEzQAORA0NmVTOWBTADYlMptyEQCbEhnAOzsALjpPA88e6rJ3FUTmIi7Sm3IRF3ERkS1miaxUEFmpILJSURN6UyIT2QhlALHxIjKRiUxk+yKTPpGJbNInMpEN4sMARAawDBG06SIL2goi21UIGpFpcJlNjbFENuEQmQY0MGUaQEyZRBY0QRM0U6YpkwZEFjTrHFMmDTS/RCayKdOUacoUNH+4I2hENmX2AIhMZGMskWlgjCUyke2LNF5EJjINiExkGy8bL8uQCSIbxIlspcZFJn0iE1mpsEogsjGWi7iIi4jMRVzERfamAJaC52sAwEUANl5sCsCmXGRG89e6bEoDOWBTADmQAwBBk4MRAABJFjQAAIBqPvdrAPAGv7GBbaSCtb0AAAAASUVORK5CYII=);
}
.loginFixForm { 
	display: table-cell;
	vertical-align: middle;
}
.loginForm { 
  padding-top: 17px;
  background: white;
  border-radius: 8px;
  height: 410px;
  overflow: hidden;
  width: 350px;
  margin: -15px auto 0 auto;
}
.loginRowPassword {
	margin-top: 16px;
}
.loginForm .header { 
  text-align: center;
  font-size: 19px;
}
.loginForm .logo { 
	width: 30px;
  height: 30px;
}
.loginBody {
	padding: 12px 40px 0px 40px;
}
.loginButton {
    min-width: 100%;
    margin-top: 10px;
}
.loginFooter {
	color: white;
	bottom: 0;
	position: absolute;
	width: 100%;
	text-align: right;
	font-size: 87%;
}
.turnstile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px; /* Adjust as needed */
  margin: 0 auto; 
}
.lockScreenFooter {
	color: white;
    position: absolute;
    bottom: 0;
    font-size: 87%;
    right: 5px;
}
.lockscreen-name {
	font-size: 23px;
    margin-bottom: 31px;
    color: white;
}
@media (max-width: 767px) {
	.bodyLogin.form-box {
		width: 90%;
	}
}
/* END LOGIN */

/* CONTENT PAGES */

.box.box-primary {
  border: 1px solid var(--border-color);
}
.content-header {
  padding: 15px;
}
/* END CONTENT PAGES */

/* SMART CHARGING */
.smart-charging-table-header-row {
  display: table-row;
}
#tableChargingProfiles_wrapper {
  width: 100%;
}
.smart-charging-table-header {
  text-align: center;
}
.footer-left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.footer-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

/* END SMART CHARGING */

/* TARIFF SECTION */
.faq-container {
  padding: 0px 30px;
}
.tariff-table-filters {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 0px 8px 0px 8px;
}
.input-group-search-tariff {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.input-group-search-tariff .id-tariff-search {
  flex: 1;
  border-radius: 8px 0px 0px 8px !important;
}

.input-group-search-tariff .input-group-btn {
  display: flex;
  flex: 0 0 auto;
}

.input-group-search-tariff .btn-search-tariff {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px !important;
  border-radius: 0px 8px 8px 0px !important;
}

.input-group-search-tariff .input-group {
  display: flex;
  width: 100%;
}

.input-group-search-tariff .input-group-btn {
  display: flex;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
}

.input-group-search-tariff .input-group-btn .btn {
  height: 40px;
  white-space: nowrap;
}
.tariff-groups-table-box {
  padding: 0px !important;
}
#tableTariffs.tariff-groups-table-custom {
  width: 100% !important;
  border-collapse: collapse;
  table-layout: auto;
  margin-top: 10px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-left: 0px !important;
  border-right: 0px !important;
}

#tableTariffs.tariff-groups-table-custom thead th {
  padding: 10px 8px;
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
  white-space: normal !important;
  line-height: 1.2;
  vertical-align: middle;
  background-color: transparent !important;
  text-align: left !important;
}

#tableTariffs.tariff-groups-table-custom tbody td {
  padding: 10px 8px;
  border-top: 1px solid var(--border-color);
  vertical-align: middle;
  white-space: nowrap;
}

#tableTariffs.tariff-groups-table-custom tbody tr {
  cursor: pointer;
}

#tableTariffs.tariff-groups-table-custom tbody tr:hover {
  background-color: var(--color-secondary) !important;
  color: var(--text-main) !important;
}

#tableTariffs.tariff-groups-table-custom tbody tr.selected {
  background-color: var(--color-secondary) !important;
  color: var(--text-main);
}

#tableTariffs.tariff-groups-table-custom th:nth-child(1),
#tableTariffs.tariff-groups-table-custom td:nth-child(1) {
  width: 32%;
}

#tableTariffs.tariff-groups-table-custom th:nth-child(2),
#tableTariffs.tariff-groups-table-custom td:nth-child(2) {
  width: 48%;
}

#tableTariffs.tariff-groups-table-custom th:nth-child(3),
#tableTariffs.tariff-groups-table-custom td:nth-child(3) {
  width: 20%;
  text-align: center;
}
.numUpdates {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 100px;
  margin: 0 auto;
}
#tableTariffs tbody tr.selected .numUpdates {
  background-color: var(--color-primary);
  color: var(--text-light);
}

.tariff-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.pagination>li>a {
  background: var(--bg-body);
  color: var(--text-main);
}

#tableTariffs_wrapper {
  padding: 10px;
}
#singleTariffCards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.single-tariff-card-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.action-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.single-tariff-card-active {
  border-left: 2px solid var(--color-green);
  padding: 8px;
  border-radius: 8px;
}
.single-tariff-card-historic {
  border-left: 2px solid var(--color-gray);
  padding: 8px;
  border-radius: 8px;
}
.single-tariff-card-toActivate {
  border-left: 2px solid var(--color-purple);
  padding: 8px;
  border-radius: 8px;
}
.single-tariff-card-planned {
  border-left: 2px solid var(--color-purple);
  padding: 8px;
  border-radius: 8px;
}
.single-tariff-card-body {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding-top: 8px;
  justify-content: space-between;
}
.tariff-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tariff-field strong {
  white-space: nowrap;
  display: flex;
  gap: 3px;
}
.single-tariff-card-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tariff-parking-row {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  justify-content: space-between;
}

.tariff-parking-row .tariff-field {
  flex: 1;
}
.tariff-note {
  width: 100%;
  padding-top: 10px;
}

.tariff-note strong {
  white-space: normal;
  display: block;
}
.pagination>.active>a, 
.pagination>.active>a:hover, 
.pagination>.active>span, 
.pagination>.active>span:focus, 
.pagination>.active>span:hover {
  z-index: 3;
  cursor: default;
  background-color: var(--text-main);
  border-color: var(--text-light);
}

#layoutCheckReservation {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
/* END TARIFF SECTION */

/*********************
  DATERANGEPICKER OVVERRIDE
**********************/
.daterangepicker {
  background: var(--drp-bg);
  border: 1px solid var(--drp-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  color: var(--drp-text);
  font-family: 'RobotoMono', monospace;
  font-size: 12px;
  padding: 8px;
}

.daterangepicker:before,
.daterangepicker:after {
  display: none;
}
.daterangepicker .ranges {
  margin: 0;
}

.daterangepicker .ranges ul {
  width: 100%;
}
.daterangepicker .input-mini.active {
  border-color: 1px solid var(--color-primary);
}
.daterangepicker .daterangepicker_input i {
  top: 14px;
}

.daterangepicker .ranges li {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--drp-text);
  padding: 8px 10px;
  margin-bottom: 4px;
  font-family: 'RobotoMono', monospace;
  font-size: 12px;
  font-weight: 700;
}

.daterangepicker .ranges li:hover {
  background: var(--drp-hover);
}

.daterangepicker .ranges li.active {
  background: var(--drp-primary);
  color: var(--text-light);
}
.daterangepicker .calendar-table {
  background: transparent;
  border: 0;
}

.daterangepicker .calendar-table table {
  background: transparent;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  background-color: var(--bg-card);
  color: var(--drp-text);
  font-family: 'RobotoMono', monospace;
  font-size: 12px;
}

.daterangepicker th.month {
  color: var(--drp-text);
  font-size: 12px;
  font-weight: 700;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background: var(--drp-hover);
  border-radius: 8px;
}

.daterangepicker td.in-range {
  background: color-mix(in srgb, var(--drp-primary) 25%, transparent);
  color: var(--drp-text);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: var(--drp-primary);
  color: var(--text-light);
  border-radius: 8px;
}

.daterangepicker td.end-date {
  border-radius: 0px 8px 8px 0px;
}
.daterangepicker td.start-date {
  border-radius: 8px 0px 0px 8px;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  color: var(--drp-muted);
  background: transparent;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: var(--drp-muted);
}
.daterangepicker .drp-selected,
.daterangepicker input.input-mini,
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  background: var(--drp-input-bg);
  color: var(--drp-text);
  border: 1px solid var(--drp-border);
  border-radius: 8px;
  font-family: 'RobotoMono', monospace;
  font-size: 12px;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  padding: 4px 6px;
}
.daterangepicker .drp-buttons {
  border-top: 1px solid var(--drp-border);
  padding: 8px;
}

.daterangepicker .drp-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'RobotoMono', monospace;
  font-size: 12px !important;
  font-weight: 700;
  text-transform: uppercase;
  border: 0 !important;
  box-shadow: none;
}

.daterangepicker .drp-buttons .applyBtn {
  background: var(--drp-primary);
  color: var(--text-light);
}

.daterangepicker .drp-buttons .cancelBtn {
  background: var(--drp-surface);
  color: var(--drp-text);
}

.stars-wrapper {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-direction: row !important;
}

.star {
  display: inline-flex;
}

.rating-star-svg {
  width: 16px;
  height: 16px;
}

.star.filled {
  color: var(--text-main);
}

.star.empty {
  color: var(--bg-card);
}


/*********************
  CIRCLE
**********************/
/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */
.preloader-wrapper {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 48px; }
  .preloader-wrapper.small {
    width: 36px;
    height: 36px; }
  .preloader-wrapper.big {
    width: 64px;
    height: 64px; }
  .preloader-wrapper.active {
    /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
    -webkit-animation: container-rotate 1568ms linear infinite;
    animation: container-rotate 1568ms linear infinite; }

@-webkit-keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg); } }

@keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.spinner-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0; }

.spinner-blue,
.spinner-blue-only {
  border-color: #4285f4; }

.spinner-red,
.spinner-red-only {
  border-color: #db4437; }

.spinner-yellow,
.spinner-yellow-only {
  border-color: #f4b400; }

.spinner-green,
.spinner-green-only {
  border-color: #0f9d58; }

/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name,
 * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */
.active .spinner-layer.spinner-blue {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .spinner-layer.spinner-red {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .spinner-layer.spinner-yellow {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .spinner-layer.spinner-green {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .spinner-layer.spinner-blue-only,
.active .spinner-layer.spinner-red-only,
.active .spinner-layer.spinner-yellow-only,
.active .spinner-layer.spinner-green-only,
.active .spinner-layer.spinner-primary-color-only {
  /* durations: 4 * ARCTIME */
  opacity: 1;
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg); }
  /* 0.5 * ARCSIZE */
  25% {
    -webkit-transform: rotate(270deg); }
  /* 1   * ARCSIZE */
  37.5% {
    -webkit-transform: rotate(405deg); }
  /* 1.5 * ARCSIZE */
  50% {
    -webkit-transform: rotate(540deg); }
  /* 2   * ARCSIZE */
  62.5% {
    -webkit-transform: rotate(675deg); }
  /* 2.5 * ARCSIZE */
  75% {
    -webkit-transform: rotate(810deg); }
  /* 3   * ARCSIZE */
  87.5% {
    -webkit-transform: rotate(945deg); }
  /* 3.5 * ARCSIZE */
  to {
    -webkit-transform: rotate(1080deg); }
  /* 4   * ARCSIZE */ }

@keyframes fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg); }
  /* 0.5 * ARCSIZE */
  25% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg); }
  /* 1   * ARCSIZE */
  37.5% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg); }
  /* 1.5 * ARCSIZE */
  50% {
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg); }
  /* 2   * ARCSIZE */
  62.5% {
    -webkit-transform: rotate(675deg);
    transform: rotate(675deg); }
  /* 2.5 * ARCSIZE */
  75% {
    -webkit-transform: rotate(810deg);
    transform: rotate(810deg); }
  /* 3   * ARCSIZE */
  87.5% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg); }
  /* 3.5 * ARCSIZE */
  to {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg); }
  /* 4   * ARCSIZE */ }

@-webkit-keyframes blue-fade-in-out {
  from {
    opacity: 1; }
  25% {
    opacity: 1; }
  26% {
    opacity: 0; }
  89% {
    opacity: 0; }
  90% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes blue-fade-in-out {
  from {
    opacity: 1; }
  25% {
    opacity: 1; }
  26% {
    opacity: 0; }
  89% {
    opacity: 0; }
  90% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes red-fade-in-out {
  from {
    opacity: 0; }
  15% {
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  51% {
    opacity: 0; } }

@keyframes red-fade-in-out {
  from {
    opacity: 0; }
  15% {
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  51% {
    opacity: 0; } }

@-webkit-keyframes yellow-fade-in-out {
  from {
    opacity: 0; }
  40% {
    opacity: 0; }
  50% {
    opacity: 1; }
  75% {
    opacity: 1; }
  76% {
    opacity: 0; } }

@keyframes yellow-fade-in-out {
  from {
    opacity: 0; }
  40% {
    opacity: 0; }
  50% {
    opacity: 1; }
  75% {
    opacity: 1; }
  76% {
    opacity: 0; } }

@-webkit-keyframes green-fade-in-out {
  from {
    opacity: 0; }
  65% {
    opacity: 0; }
  75% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes green-fade-in-out {
  from {
    opacity: 0; }
  65% {
    opacity: 0; }
  75% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */
.gap-patch {
  position: absolute;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit; }

.gap-patch .circle {
  width: 1000%;
  left: -450%; }

.circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit; }
  .circle-clipper .circle {
    width: 200%;
    height: 100%;
    border-width: 3px;
    /* STROKEWIDTH */
    border-style: solid;
    border-color: inherit;
    border-bottom-color: transparent !important;
    border-radius: 50%;
    -webkit-animation: none;
    animation: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0; }
  .circle-clipper.left .circle {
    left: 0;
    border-right-color: transparent !important;
    -webkit-transform: rotate(129deg);
    -ms-transform: rotate(129deg);
    transform: rotate(129deg); }
  .circle-clipper.right .circle {
    left: -100%;
    border-left-color: transparent !important;
    -webkit-transform: rotate(-129deg);
    -ms-transform: rotate(-129deg);
    transform: rotate(-129deg); }

.active .circle-clipper.left .circle {
  /* duration: ARCTIME */
  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.active .circle-clipper.right .circle {
  /* duration: ARCTIME */
  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg); } }

@keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg); } }

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg); } }

@keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg); } }

#spinnerContainer.cooldown {
  /* duration: SHRINK_TIME */
  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); }

@-webkit-keyframes fade-out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fade-out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

#mdb-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  /* change if the mask should have another color then white */
  z-index: 9998;
  /* makes sure it stays on top */
  height: 100%;
  width: 100%; }

.accordion .card {
  border-bottom: 1px solid #eee;
  box-shadow: none; }
  .accordion .card .card-header {
    padding: 1rem 1.5rem;
    background: transparent;
    border-bottom: 0; }
    .accordion .card .card-header a:not(.collapsed) .rotate-icon {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg); }
  .accordion .card .fa-angle-down {
    float: right; }
  .accordion .card .card-block {
    padding-top: .25rem; }

.collapsible-body {
  display: none; }
/***For Smart Charging********/  

.dropdown-menu {
  padding: 5px !important;
  font-weight:normal !important;
  max-width: 350px;
}

.table .table-condensed {
	color:black;
    margin-bottom: 0px; 
}

/**********FONT GES***********/
@font-face {
  font-family: 'ges-icons';
  src:  url('../fonts/ges-icons.eot?pmpsui');
  src:  url('../fonts/ges-icons.eot?pmpsui#iefix') format('embedded-opentype'),
    url('../fonts/ges-icons.ttf?pmpsui') format('truetype'),
    url('../fonts/ges-icons.woff?pmpsui') format('woff'),
    url('../fonts/ges-icons.svg?pmpsui#ges-icons') format('svg'),
    url('../fonts/ges-icons-new.ttf?pmpsui') format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'ges-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-arrow-down-fill:before {
  content: "\e952";
}
.icon-arrow-up-fill:before {
  content: "\e953";
}
.icon-help:before {
  content: "\e951";
}
.icon-mail:before {
  content: "\e950";
}
.icon-lock:before {
  content: "\e94f";
}
.icon-add-admin:before {
  content: "\e930";
}
.icon-add-station:before {
  content: "\e94d";
}
.icon-add-user:before {
  content: "\e94e";
}
.icon-chart:before {
  content: "\e94c";
}
.icon-star-filled:before {
  content: "\e94b";
}
.icon-star-empty:before {
  content: "\e94a";
}
.icon-edit:before {
  content: "\e948";
}
.icon-edit-customer:before {
  content: "\e947";
}
.icon-remote:before {
  content: "\e946";
}
.icon-exchange:before {
  content: "\e945";
}
.icon-clock:before {
  content: "\e944";
}
.icon-circle:before {
  content: "\e942";
}
.icon-order:before {
  content: "\e932";
}
.icon-arrow-up:before {
  content: "\e93f";
}
.icon-arrow-down:before {
  content: "\e940";
}
.icon-close:before {
  content: "\e941";
}
.icon-currency-money:before {
  content: "\e93c";
}
.icon-currency-euro:before {
  content: "\e929";
}
.icon-currency-dollar:before {
  content: "\e93d";
}
.icon-currency-pound:before {
  content: "\e93e";
}
.icon-play:before {
  content: "\e936";
}
.icon-stop:before {
  content: "\e937";
}
.icon-percent:before {
  content: "\e938";
}
.icon-coupon:before {
  content: "\e939";
}
.icon-lock-open:before {
  content: "\e93a";
}
.icon-trash:before {
  content: "\e93b";
}
.icon-type_combo_1:before {
  content: "\e91f";
}
.icon-type_3c:before {
  content: "\e943";
}
.icon-type_3a:before {
  content: "\e920";
}
.icon-type_2:before {
  content: "\e921";
}
.icon-type_1:before {
  content: "\e922";
}
.icon-type_unknown:before {
  content: "\e923";
}
.icon-type_schuko:before {
  content: "\e924";
}
.icon-type_combo_2:before {
  content: "\e925";
}
.icon-type_chademo:before {
  content: "\e926";
}
.icon-reviews:before {
  content: "\e927";
}
.icon-update:before {
  content: "\e928";
}
.icon-users:before {
  content: "\e92a";
}
.icon-check:before {
  content: "\e92b";
}
.icon-info:before {
  content: "\e92c";
}
.icon-search:before {
  content: "\e92d";
}
.icon-reservation:before {
  content: "\e92e";
}
.icon-imagesmode:before {
  content: "\e92f";
}
.icon-notification:before {
  content: "\e931";
}
.icon-station-available:before {
  content: "\e901";
}
.icon-station-occupied:before {
  content: "\e902";
}
.icon-station-error:before {
  content: "\e933";
}
.icon-station-offline:before {
  content: "\e903";
}
.icon-list:before {
  content: "\e904";
}
.icon-refresh:before {
  content: "\e905";
}
.icon-location:before {
  content: "\e906";
}
.icon-logout:before {
  content: "\e907";
}
.icon-login:before {
  content: "\e949";
}
.icon-excel:before {
  content: "\e908";
}
.icon-csv:before {
  content: "\e909";
}
.icon-dashboard:before {
  content: "\e90a";
}
.icon-qr:before {
  content: "\e90b";
}
.icon-plus:before {
  content: "\e90c";
}
.icon-minus:before {
  content: "\e900";
}
.icon-caret-up:before {
  content: "\e934";
}
.icon-caret-down:before {
  content: "\e935";
}
.icon-caret-left:before {
  content: "\e90d";
}
.icon-caret-right:before {
  content: "\e90e";
}
.icon-copy:before {
  content: "\e90f";
}
.icon-updates:before {
  content: "\e910";
}
.icon-calendar:before {
  content: "\e911";
}
.icon-nc-logo:before {
  content: "\e912";
}
.icon-wallet:before {
  content: "\e913";
}
.icon-bolt:before {
  content: "\e914";
}
.icon-settings:before {
  content: "\e915";
}
.icon-document:before {
  content: "\e916";
}
.icon-admin:before {
  content: "\e917";
}
.icon-user:before {
  content: "\e918";
}
.icon-recharges:before {
  content: "\e919";
}
.icon-phone:before {
  content: "\e91a";
}
.icon-error:before {
  content: "\e91b";
}
.icon-credit-card:before {
  content: "\e91c";
}
.icon-ev-charger:before {
  content: "\e91d";
}
.icon-eye:before {
  content: "\e91e";
}