.c-mmd-main-page:not(.c-mmd-active-section) { display: none; }

.c-mmd-side-panel { position: relative; text-transform: capitalize; }
.c-mmd-side-panel > div { position: absolute; display: flex; flex-direction: column; width: 30vw; max-width: 600px; background: white; transform-origin: center; overflow: visible; transition: opacity .2s; }
.c-mmd-side-panel > div.c-mmd-content-visible { z-index: 1; }
.c-mmd-side-panel > div:not(.c-mmd-content-visible) { flex: 0 1 0; opacity: 0; /* z-index: -1; */ /* transition-delay: .2s; */ }


.c-mmd-table-loader, .c-mmd-table-error-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    height: 100%;
    font-size: 1.5rem;
}
.c-mmd-table-error-info { padding: 1.5rem; color: red; box-sizing: border-box; }
.c-mmd-table-error-info:empty { display: none; }


.c-mmd-return-icon {
    cursor: pointer;
    transition: all .2s linear;
}
.c-mmd-return-icon:hover {
    background: #46485b;
}


/* # Route Planner # */
#id-manage-layers-button.c-mmd-open {
    justify-content: start;
    border-radius: 8px 8px 0 0;
    z-index: 1;
}
#id-manage-layers-button:not(.c-mmd-open) > span:last-child { display: none; }

#id-manage-layers {
    flex-shrink: 0;
    max-width: 400px;
    max-height: 200px;
    padding: 1rem 1.5rem;
    background: white;
    border: 1px solid dodgerblue;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    overflow: hidden;
    transition: all .2s linear;
}
#id-manage-layers:not(.c-mmd-open) {
    max-width: 160px;
    max-height: 0;
    padding: 0;
    border: 0;
}
#id-manage-layers > div { display: flex; align-items: center; gap: .5rem; min-width: 280px; transition: opacity .2s .2s; }
#id-manage-layers > div:not(:first-child) { margin-top: 1rem; }
#id-manage-layers:not(.c-mmd-open) > div { opacity: 0; transition: opacity 0 0; }
#id-manage-layers > div .c-mmd-css-loader { width: 18px; height: 18px; margin: .5rem; box-sizing: border-box; }
#id-manage-layers > div.c-mmd-loading > *:not(.c-mmd-css-loader):not(button) { opacity: .8; pointer-events: none; }
#id-manage-layers > div.c-mmd-loading label > img, #id-manage-layers > div:not(.c-mmd-loading) .c-mmd-css-loader { display: none; }
#id-manage-layers > div label { color: darkgrey; font-size: .9rem; cursor: pointer; transition: color .2s; }
#id-manage-layers > div label img { padding: .5rem; }
#id-manage-layers > div label img.c-mmd-highlighted-icon { background: #313247; border-radius: 50%; }
#id-manage-layers > div label:hover { color: var(--primary-color); }
#id-manage-layers > div label:not(:hover) img.c-mmd-highlighted-icon, #id-manage-layers > div label:hover img:not(.c-mmd-highlighted-icon) { display: none; }
#id-manage-layers > div > a, #id-manage-layers > div > button { height: 30px; margin-left: .25rem; padding: .5rem; box-sizing: border-box; }

#id-route-planner-form {
	flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#id-route-planner-form > details { padding: 1rem 1.5rem; }
#id-route-planner-form > details[open] { flex: 1; overflow: auto; }
#id-route-planner-form > details:not(:first-of-type) { border-top: 1px solid #E8EAED; }
#id-route-planner-form > details[open] ~ details { border-width: 3px; }
#id-route-planner-form > details > summary > b { font-size: .9rem; text-transform: capitalize; }

@media screen and (min-width: 769px) {
	#id-route-planner .c-mmd-main-head .c-mmd-header-actions {
		height: 40px;
	}

	#id-route-planner-form > details > summary > b { font-size: 1.25rem; }
}

#id-bulk-selection > details > div, #id-bulk-selection > details > span { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; text-transform: capitalize; }
.c-mmd-container-page details > label  { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; text-transform: capitalize; }
.c-mmd-container-page details > label > span { text-align: right; }
.c-mmd-container-page details > label > span.c-mmd-output { width: 15%; }
.c-mmd-container-page details input:not([type="checkbox"]), #id-route-planner-form select, .c-mmd-inside-balloon input, .c-mmd-inside-balloon select { flex: 1; }
.c-mmd-container-page details input[type="range"], .c-mmd-inside-balloon input[type="range"] { max-width: 50%; margin-left: auto; }


.c-mmd-container-page details > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; line-height: 1; cursor: pointer; }
.c-mmd-container-page details > summary > span.c-mmd-list-item-count {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 10px;
	height: 10px;
	padding: .5rem;
	background-color: #E1E2DD;
	border-radius: 50%;
}
details[open] > summary > span.c-mmd-list-item-count {
	background-color: #EDD6B6;
}
details > summary span.c-mmd-arrow {
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 1px solid;
	border-bottom: 1px solid;
	transform: translateX(-50%) rotate(-45deg);
	transition: transform .2s;
}
details > summary span.c-mmd-arrow:first-child { transform: rotate(-45deg); }
details[open] > summary span.c-mmd-arrow { transform: translateX(-50%) rotate(45deg); }
details[open] > summary span.c-mmd-arrow:first-child { transform: rotate(45deg); }

.c-mmd-summary-info {
	display: inline-flex;
	align-items: center;
}

.c-mmd-icons-container { display: flex; align-items: start; flex-wrap: wrap; }
.c-mmd-icons-container > div { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; width: 50%; margin-top: 1rem; }
.c-mmd-icons-container > div img { height: 15px; }


#id-vehicles-group-selector {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
#id-vehicles-group-selector a {
	border-bottom: 2px solid transparent;
	color: black;
	text-decoration: none;
}
#id-vehicles-group-selector a, #id-vehicles-group-selector a > select {
	font-weight: 600;
}
#id-vehicles-group-selector a.c-mmd-active {
	border-color: var(--primary-color);
}
#id-vehicles-group-selector a > select {
	height: auto;
	padding: 0;
	border: none;
}


.c-mmd-refresh-button { display: inline-flex; align-items: center; gap: .5rem; font-size: smaller; color: black; }

.c-mmd-vehicle-info-container { position: relative; padding: 1rem; border: 2px solid #E8EAED; border-radius: 8px; /* overflow: hidden; */ }
/* .c-mmd-vehicle-info-container:hover { background-color: #f8f8f8; } */
.c-mmd-vehicle-info-container:hover, .c-mmd-vehicle-info-container.c-mmd-selected { border-color: var(--primary-color); }
.c-mmd-vehicle-info-container.c-mmd-selected { background-color: rgba(48, 228, 157, 0.2); }
.c-mmd-vehicle-info-container.c-mmd-inside-balloon {
    width: 350px;
    margin: 5px 0 3px 5px;
    /* transform: translateZ(0); */ /* a fix for the infoWindow's content being blurry until hovered  */
}
.c-mmd-vehicle-info-container.c-mmd-inside-balloon:not(.c-mmd-selected):not(:hover) { border-color: transparent; }
.c-mmd-vehicle-info-container:not(.c-mmd-inside-balloon) {
    margin-top: 1rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    transition: all .2s;
}
.c-mmd-vehicle-info-container > label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; }
.c-mmd-vehicle-info-container > .c-mmd-vehicle-title { margin-bottom: 1.5rem; }
.c-mmd-vehicle-info-container > .c-mmd-vehicle-title h3 { display: flex; align-items: center; gap: .75rem; margin-bottom: 0; }
.c-mmd-vehicle-info-container .c-mmd-buttons-container { display: flex; justify-content: space-between; gap: .5rem; margin-block: 1rem; }
.c-mmd-vehicle-info-container > .c-mmd-buttons-container > button { flex-grow: 1; position: relative; width: calc(33% - 2rem); height: 30px; padding: .5rem; font-size: .8rem; transition: all .2s, flex 0s; }
.c-mmd-vehicle-info-container.c-mmd-selected .c-mmd-buttons-container button { border: 1px solid black; }
.c-mmd-vehicle-info-container.c-mmd-selected .c-mmd-buttons-container button:not(:hover) { background-color: transparent; }
/* .c-mmd-vehicle-info-container.c-mmd-selected > .c-mmd-buttons-container > button.c-mmd-view-on-map { background-color: white; color: var(--secondary-action-color); } */
.c-mmd-vehicle-info-container p { display: flex; gap: .5rem; margin-top: .5rem; }
.c-mmd-vehicle-info-container p b { flex-shrink: 0; width: 50px; text-transform: capitalize; }
.c-mmd-vehicle-info-container p input, .c-mmd-vehicle-info-container p select { flex: 1; position: relative; min-width: 130px; box-sizing: border-box; }

@media screen and (max-width: 768px) {
	.c-mmd-vehicle-info-container p input, .c-mmd-vehicle-info-container p select {
		min-width: 100px;
	}
}

#id-plan-routes-button-container {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.c-mmd-providers-container {
    max-height: 40vh;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid #E8EAED;
    font-size: .9rem;
    overflow: auto;
}


#id-plans-list > details {
	padding: 1.5rem;
}
#id-plans-list > details:not(:first-child) {
	padding-top: 1.5rem;
	border-top: 1px solid #E8EAED;
}

.c-mmd-routes-container > details {
    margin-block: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    overflow: hidden;
	transition: opacity .2s;
}
.c-mmd-routes-container > details:not(.c-mmd-checked) { opacity: .5; }
.c-mmd-routes-container > details > summary { padding: .75rem; }
.c-mmd-routes-container > details[open] > summary { position: relative; box-shadow: 0 0 8px rgba(0, 0, 0, .2); z-index: 1; }

.c-mmd-route-stop { position: relative; padding: 1.5rem; background: white; cursor: pointer; transition: background .2s; }
.c-mmd-route-stop:hover, .c-mmd-route-stop.c-mmd-active { background-color: #fafafa; }
.c-mmd-route-stop label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; }
.c-mmd-route-stop p { width: 100%; font-size: .85rem; color: #7e7e7e; }

.c-mmd-route-summary {
    background: linear-gradient(0deg, rgba(63, 186, 139, 0.5), rgba(63, 186, 139, 0.5)), linear-gradient(264.61deg, #30E49D 4.03%, #010912 95.25%);
	border-top: 1px solid #E8EAED;
    text-align: center;
    color: white;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}
.c-mmd-route-summary > div { display: flex; justify-content: space-around; padding: 1rem; }
.c-mmd-route-summary-bottom-row > div p { font-size: .8rem; font-weight: 300; }

.c-mmd-elevation-container { flex-direction: column; border-block: 1px solid rgba(237, 237, 237, 0.22); }
.c-mmd-elevation-chart {
    position: relative;
    margin-bottom: 2rem;
    margin-left: calc(1rem + var(--margin-left)); /* the variable is set when building the elevation chart in evfleet_routeplanner.js */
}
.c-mmd-elevation-chart .c-mmd-chart-axis-elevation {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    text-align: left;
    font-size: .7rem;
}
.c-mmd-elevation-chart .c-mmd-chart-axis-elevation .c-mmd-chart-axis-measurement {
    flex-grow: 1;
    width: 100%;
    border-top: 1px solid rgba(237, 237, 237, 0.22);
}
.c-mmd-elevation-chart .c-mmd-chart-axis-elevation .c-mmd-chart-axis-measurement:last-child {
    border-bottom: 1px solid rgba(237, 237, 237, 0.22);
}
.c-mmd-elevation-chart .c-mmd-chart-axis-elevation .c-mmd-chart-axis-measurement span {
    display: inline-block;
    color: white;
    transform: translate(calc(-100% - 7px), -50%);
}
.c-mmd-elevation-chart .c-mmd-chart-axis-distance {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    text-align: right;
    font-size: .7rem;
}
.c-mmd-elevation-chart .c-mmd-chart-axis-distance .c-mmd-chart-axis-measurement {
    flex-grow: 1;
    display: flex;
    justify-content: end;
    align-items: end;
    height: calc(100% + 20px);
    border-right: 1px dashed rgba(237, 237, 237, 0.22);
}
.c-mmd-elevation-chart .c-mmd-chart-axis-distance .c-mmd-chart-axis-measurement:first-child {
    border-left: 1px dashed rgba(237, 237, 237, 0.22);
}
.c-mmd-elevation-chart .c-mmd-chart-axis-distance .c-mmd-chart-axis-measurement span {
    display: inline-block;
    width: 100%;
    padding-right: 5px;
    color: white;
}

.c-mmd-error-msg {
    text-align: center;
    font-size: small;
    color: red;
}

.c-mmd-side-panel-header {
	position: sticky;
    top: 0;
    display: flex;
    background-color: white;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
    z-index: 2;
}
.c-mmd-side-panel-header > .c-mmd-header-tab {
	flex: 1;
	justify-content: center;
	height: 60px;
	border-bottom: 2px solid transparent;
	border-radius: 0;
}
.c-mmd-side-panel-header > .c-mmd-header-tab.c-mmd-active { background-color: rgba(48, 228, 157, 0.2); border-color: var(--primary-color); }
/* .c-mmd-side-panel-header > .c-mmd-header-tab > img { transition: filter .2s; }
.c-mmd-side-panel-header > .c-mmd-header-tab.c-mmd-active > img { filter: invert(1); } */

@media screen and (min-width: 769px) {
	.c-mmd-side-panel-header > .c-mmd-header-tab {
		font-size: 1.25rem;
	}
}
@media screen and (min-width: 1025px) {
	.c-mmd-side-panel-header > .c-mmd-header-tab {
		font-size: 1.25rem;
	}
}

.c-mmd-side-panel-footer {
    margin-top: auto;
    background: white;
    z-index: 1;
}
.c-mmd-side-panel-footer > * {
	border-top: 1px solid #E8EAED;
	padding: 1rem;
}

.c-mmd-remove-saved-plan {
    display: flex;
    margin-left: auto;
    padding: .25rem;
    border-radius: 5px;
}
.c-mmd-remove-saved-plan:hover { background: var(--action-color); }
.c-mmd-remove-saved-plan:hover img { filter: invert(1); }

/* Popup Overlay */
.c-mmd-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    z-index: -1;
    backdrop-filter: blur(2px);
    transition: opacity .2s, z-index 0s .2s;
}
.c-mmd-popup-overlay.c-mmd-popup-active { opacity: 1; z-index: 100; transition: opacity .2s; }

/* CSS for the popup container */
.c-mmd-popup-overlay > .c-mmd-popup-container {
    display: flex;
    flex-direction: column;
    width: 55%;
    height: 90%;
    margin: auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
	overflow: hidden;
}

@media screen and (max-width: 1024px) {
	.c-mmd-popup-overlay > .c-mmd-popup-container {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
}

#id-geotab-integration-vehicle > .c-mmd-popup-container {
    width: 60% !important;
}

.c-mmd-popup-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
	flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem;
    z-index: 1;
}

.c-mmd-popup-content {
    flex: 1;
    border: 1px solid #ddd;
    border-inline: none;
    overflow-y: auto;
}

.c-mmd-popup-footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem;
}

/* CSS for the table */
.c-mmd-destination-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	gap: 0 1rem;
	margin: .5rem;
    padding: 1rem;
    background: #f8f8f8;
    border-radius: 10px;
	transition: background-color .2s;
}
.c-mmd-destination-row:hover { background-color: whitesmoke; }


.c-mmd-popup-content table {
    border-spacing: 0;
    width: 100%;
}

.c-mmd-popup-content table th,
.c-mmd-popup-content table td {
    padding-inline: 1rem;
    text-align: center;
    white-space: nowrap;
}
.c-mmd-popup-content table th { padding-block: 1rem; font-weight: 500; font-size: .9rem; }

.c-mmd-popup-content table td input,
.c-mmd-popup-content table td select {
    width: 100%;
    padding: 4px;
    border: 1px solid #E8EAED;
    border-radius: 4px;
    box-sizing: border-box;
}
.c-mmd-popup-content table td input.c-mmd-empty-field { color: grey; }

.c-mmd-cs-inputs { display: inline-flex; flex-wrap: wrap; gap: .25rem 2%; width: 200px; }
.c-mmd-cs-inputs > * { max-width: 48%; }

.c-mmd-radio-selector {
    display: flex;
    border: 1px solid #E8EAED;
    border-radius: 6px;
    overflow: hidden;
}
.c-mmd-radio-selector input { display: none; }
.c-mmd-radio-selector label {
	flex-grow: 1;
    min-width: 50px;
    padding: .5rem .75rem;
    text-align: center;
    cursor: pointer;
	transition: background .2s;
}
.c-mmd-radio-selector label:hover { background-color: whitesmoke; }
.c-mmd-radio-selector label:not(:first-child) { border-left: 1px solid #E8EAED; }
.c-mmd-radio-selector input:checked + label {
    background-color: var(--primary-color);
    /* color: white; */
}

.c-mmd-destinations-file-container > div {
	margin: auto;
	padding: 1.5rem;
	background-color: white;
	border-radius: 10px;
	box-shadow: 0 0 8px rgba(0, 0, 0, .1);
}
.c-mmd-destinations-file-container > div > label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	width: 350px;
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	border: 3px dashed lightgray;
	border-radius: 10px;
	cursor: pointer;
}
.c-mmd-destinations-file-container > div > label.c-mmd-dragging { border-color: var(--secondary-action-color-hvr); }
.c-mmd-destinations-file-container > div > label * { pointer-events: none; }

#id-vehicles-destinations > h3,
#id-charge-panner-vehicles-destinations > h3 { display: flex; justify-content: center; align-items: center; height: 100%; }
#id-vehicles-destinations h3:not(:last-child),
#id-charge-panner-vehicles-destinations h3:not(:last-child) {
	display: none;
}

/* # Charge Planner # */
#id-vehicles-list-for-charge {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 1rem;
	margin-top: 1rem;
}
#id-vehicles-list-for-charge .c-mmd-vehicle-info-container {
	width: calc(25% - .75rem);
	margin-top: 0;
	box-sizing: border-box;
}


/* # Vehicles Management # */
#id-vehicles-distance-container { flex: 1; padding-inline: 1rem 1.5rem; overflow-y: scroll; }
#id-vehicles-distance-container > div {  width: 100%; margin-block: 1.5rem; padding: 1.5rem; border-radius: 8px; box-shadow: 0px 0px 14px rgba(0, 0, 0, .1); box-sizing: border-box; transition: 0.2s; }
#id-vehicles-distance-container > div:hover { background-color: rgba(66, 143, 214, .2);  }
#id-vehicles-distance-container > div p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

#id-vehicle-editor-form label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; cursor: pointer; }
#id-vehicle-editor-form label:first-child { margin-top: 0; }
#id-vehicle-editor-form label > b { flex-shrink: 0; width: 35%; text-transform: capitalize; }
#id-vehicle-editor-form label > span { text-align: right; }
#id-vehicle-editor-form label > span.c-mmd-output { width: 15%; }
#id-vehicle-editor-form input:not([type="checkbox"]), #id-vehicle-editor-form select { flex: 1; min-width: 0; }
#id-vehicle-editor-form input[type="range"] { padding: 0; }
#id-vehicle-editor-form input[type="range"]::-webkit-slider-thumb { outline: 2px solid white; border-radius: 50%; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.35); cursor: pointer; }

.c-mmd-form-buttons { display: flex; justify-content: end; align-items: center; gap: .75rem; }

.c-mmd-vehicle-info-inside-balloon p { display: flex; justify-content: space-between; margin-block: .5rem; text-transform: capitalize; }
.c-mmd-vehicle-info-inside-balloon p > b { flex-shrink: 0; width: 35%; }
.c-mmd-vehicle-info-inside-balloon p > span { text-align: right; }

#id-vehicle-editor-form li, .c-mmd-select-driver-assign {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
    margin-top: 1rem;
}

#id-telematics-data-container {
	margin-top: 1rem;
	transition: opacity .2s;
}
#id-telematics-data-container.c-mmd-disabled {
	opacity: .5;
	cursor: not-allowed;
}
#id-telematics-data-container.c-mmd-disabled > * {
	pointer-events: none;
}


/* # Sites Management # */
#id-site-editor-form > label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; cursor: pointer; }
#id-site-editor-form > label:first-child { margin-top: 0; }
#id-site-editor-form > label > b { flex-shrink: 0; width: 35%; }
#id-site-editor-form > label > span { text-align: right; }
#id-site-editor-form > label > span.c-mmd-output { width: 15%; }
#id-site-editor-form > label > input:not([type="checkbox"]), #id-site-editor-form > label > select { flex: 1; min-width: 0; }
#id-site-editor-form li, #id-site-editor-form > .c-mmd-new-site-charger, #id-site-editor-form > .c-mmd-new-site-charger > div > div { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
#id-site-editor-form > .c-mmd-new-site-charger > div > div { margin-top: .5rem; }
#id-site-editor-form > .c-mmd-new-site-charger input, #id-site-editor-form > .c-mmd-new-site-charger, .c-mmd-body-evfleet select { flex: 1; min-width: 0; }

.c-mmd-site-info-inside-balloon { padding: .25rem; }
.c-mmd-site-info-inside-balloon p { display: flex; justify-content: space-between; gap: .5rem; margin-top: .5rem; text-transform: capitalize; }
.c-mmd-site-info-inside-balloon p > b { flex-shrink: 0; width: 35%; }
.c-mmd-site-info-inside-balloon p > span { text-align: right; }

.c-mmd-chargers-row {
	display: flex;
	flex-direction: column;
	align-items: start;
    padding: 1rem;
    border-top: 1px solid #E8EAED;
    border-bottom: 5px solid var(--primary-color);
}
.c-mmd-chargers-row > .tabulator {
	box-shadow: 0 0 8px rgba(0 0 0 / .1);
	border-radius: 6px;
}

.c-mmd-marker-info-bubble, .c-mmd-multiple-vehicles-info-bubble {
	position: absolute;
	top: 0;
	left: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid;
	text-align: center;
	z-index: 1;
}
.c-mmd-marker-info-bubble {
	width: 20px;
	height: 20px;
	background-color: var(--primary-color);
	border-radius: 50%;
	color: white;
	transform: translate(-50%, -50%);
}
.c-mmd-multiple-vehicles-info-bubble {
	left: auto;
	right: 90%;;
    padding: .2rem;
    background-color: white;
    border-color: darkgray;
    border-radius: 5px;
    white-space: nowrap;
}


/* Charging Stations */
#id-providers-table { position: fixed; max-height: 50vh; padding: 1rem; background: white; border-radius: 5px; overflow: auto; box-shadow: 0 0 8px rgba(0, 0, 0, .1); z-index: 1; }
#id-providers-table label, .c-mmd-providers-container label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; cursor: pointer; }

#id-cs-per-maxkw-summary > div > div { display: flex; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid #E8EAED; }

.c-mmd-marker-with-label { display: flex; justify-content: center; }
.c-mmd-marker-with-label > b {
    position: absolute;
    bottom: 2px;
    padding: 0 2px;
    background: rgba(0, 0, 0, .3);
    border-radius: 3px;
    text-align: center;
    color: white;
}

.c-mmd-cs-info-inside-balloon { padding-top: .5rem; }
.c-mmd-cs-info-inside-balloon p { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; text-transform: capitalize; }

#id-reload-cs-button:not(.c-mmd-loading) > span { display: none; }		

#id-cs-editor-form > label { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; cursor: pointer; }
#id-cs-editor-form > label:first-child { margin-top: 0; }
#id-cs-editor-form > label > b { flex-shrink: 0; width: 35%; text-transform: capitalize; }
#id-cs-editor-form > label > span { text-align: right; }
#id-cs-editor-form > label > span.c-mmd-output { width: 15%; }
#id-cs-editor-form > label > input:not([type="checkbox"]), #id-cs-editor-form > label > select { flex: 1; min-width: 0; }


#id-charging-popup-container {
    display: flex;
    flex-direction: column;
}

.c-mmd-chart-wrapper {
    display: flex;
    justify-content: center;
}
.c-mmd-chart-container {
    width: 75%;
    height: 100%;
    margin: 0 auto 3rem;
    position: relative;
	/* padding-top: 37.5%;  */
    overflow: hidden;
}
.c-mmd-chart-wrapper .c-mmd-chart-container.c-mmd-smaller-container {
	width: 80%;
    height: 100%;
	/* padding-top: 25%; */
}
.c-mmd-chart-wrapper .c-mmd-chart-container canvas {
	/* position: absolute; */
    display: block;
    /* top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
}

/* override Charts js re-render */
#id-daily-electricity-chart{
    width: 100%!important;
    height: 100%!important; 
}


#id-charging-schedule-date-pick {
	position: sticky;
	top: 0;
	background-color: white;
	text-align: center;
	box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
	z-index: 2;
    display: flex;
}
#id-charging-schedule-date-pick input {
	display: none;
}
#id-charging-schedule-date-pick label {
	flex: 1;
	padding: 1rem;
    color: #676b71;
	cursor: pointer;
	transition: all .2s;
}
#id-charging-schedule-date-pick input:checked + label {
	background-color: var(--primary-color);
	color: white;
}
#id-charging-schedule-date-pick input:checked + label, #id-charging-schedule-date-pick label:hover {
	font-weight: bold;
}

#id-login-modal {
    width: 25vw;
    max-width: 95%;
    margin: auto;
    padding: 2rem;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, .3);
    box-sizing: border-box;
}

#id-lang-buttons-container, #id-lang-buttons-container a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
}
#id-lang-buttons-container a img { height: 20px; border-radius: 2px; box-shadow: 0 0 4px rgba(0, 0, 0, .2); }

#id-login-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-block: 2rem;
}

#id-login-modal label {
    display: block;
    margin-bottom: 2rem;
    color: #8D969A;
    text-transform: capitalize;
    font-size: 16px;
    font-family: 'Arial';
}
#id-login-modal label input:not([type="checkbox"]):not([type="range"]),
#id-login-modal label select {
    width: 100%;
    height: 40px;
    margin-top: .25rem;
}

#id-error-msg {
    margin-bottom: 2rem;
    text-align: center;
    color: #CD432D;
    font-size: 16px;
}

#id-login-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#id-login-form #id-remember-me {
    display: flex;
    gap: .25rem;
    margin: 0;
    cursor: pointer;
}
#id-login-form #id-remember-me input + span {
    transition: color .2s;
}
#id-login-form #id-remember-me input:checked + span {
    color: black;
}

#id-login-dialog {
    border: none;      /* Remove border */
    padding: 0;        /* Remove padding */
    background: none;  /* Remove background */
    box-shadow: none;  /* Remove shadow */
  }