/*********************************************
>> 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-section {
    fill: rgba(255, 0, 0, 0.2);
}

.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-section {
  fill: rgba(255, 0, 0, 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
 **/