/*********************************************
>> if any CSS doesn't get applied at first
>> try to add !important as there might be
>> a default value needing to be overwritten.
>> Known cases are curve filling
>> and font-sizes
*********************************************/

/** Dark Theme Styling - Map Control **/

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-stroke:not(.mtk-elevation-curve-surface) {
  stroke-width: 0px;
  stroke-opacity: 0;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-stroke.mtk-elevation-curve-surface {
  stroke-width: 0.7rem;
  stroke-opacity: 1;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-fill {
  fill: #fff;
  opacity: 0.5 !important;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-bar {
  stroke: #ff3b3b;
  stroke-width: 0.2rem;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-label,
.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-surface-label {
  font-size: 3.6rem !important;
  fill: #efefef;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-x-axe {
  stroke: #606060;
  stroke-width: 0.4rem;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-y-axe {
  stroke: #606060;
  stroke-width: 0.4rem;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-x-grid {
  stroke: #606060;
  stroke-width: 0.3rem;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-y-grid {
  stroke: #606060;
  stroke-width: 3px;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-background {
  fill: #000;
  opacity: 0.6;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-close {
  stroke: #ddd;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-axe-label {
  font-size: 3.3rem !important;
  fill: #efefef;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-start-point {
  fill: #efefef;
  stroke: #efefef;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-start-label {
  font-size: 3.3rem !important;
  fill: #efefef;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-end-point {
  fill: #efefef;
  stroke: #efefef;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-end-label {
  font-size: 3.3rem !important;
  fill: #efefef;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-top-point {
  fill: #efefef;
  stroke: #efefef;
  stroke-width: 0.3rem;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-top-label {
  font-size: 3.3rem !important;
  fill: #efefef;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-poi-point {
  opacity: 0.9;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-poi-point:hover {
  opacity: 1;
}

.mtk-elevation-profile.mtk-elevation-control .mtk-elevation-curve-poi-label {
  font-size: 3.3rem !important;
  fill: #efefef;
}

/** Dark Theme Styling - Extern Container **/

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-stroke:not(.mtk-elevation-curve-surface) {
  stroke: #000;
  stroke-width: 0.2rem;
  stroke-opacity: 0.2;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-stroke.mtk-elevation-curve-surface {
  stroke-width: 0.4rem;
  stroke-opacity: 1;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-fill {
  fill: #5d5d5d;
  opacity: 0.5 !important;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-bar {
  stroke: #ff3b3b;
  stroke-width: 0.1rem;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-label,
.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-surface-label {
  font-size: 2.9rem !important;
  fill: #555;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-x-axe {
  stroke: #000;
  stroke-width: 0.2rem;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-y-axe {
  stroke: #000;
  stroke-width: 0.2rem;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-x-grid {
  stroke-width: 0px;
  stroke-opacity: 0;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-y-grid {
  stroke: #000;
  stroke-width: 0.2rem;
  stroke-opacity: 0.1;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-axe-label {
  font-size: 2.3rem !important;
  fill: #555;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-start-point {
  fill: #555;
  stroke: #555;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-start-label {
  font-size: 2.3rem !important;
  fill: #555;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-end-point {
  fill: #555;
  stroke: #555;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-end-label {
  font-size: 2.3rem !important;
  fill: #555;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-top-point {
  fill: #555;
  stroke: #555;
  stroke-width: 0.2rem;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-top-label {
  font-size: 2.3rem !important;
  fill: #555;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-poi-point {
  opacity: 0.4;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-poi-point:hover {
  opacity: 0.6;
  cursor: pointer;
}

.mtk-elevation-profile.mtk-elevation-container .mtk-elevation-curve-poi-label {
  font-size: 2.3rem !important;
  fill: #555;
}

/**  all text labels
  .mtk-elevation-text
**/

/** grouped by ".mtk-elevation-axe-label"
  .mtk-elevation-x-axe-label
  .mtk-elevation-y-axe-label
  .mtk-elevation-x-axe-info
  .mtk-elevation-y-axe-info
**/