:root {
    --df-cell-width: 26rem;
    --df-accordion-width: 24rem; /* 2 less than cell-width */
    --df-expandable-height: calc(100vh - 28rem);
    --df-cell-right-offset: -2rem;
    --df-here-blue: #4A86FF;
    --df-here-aqua: #48DAD0;
    --df-here-green: #15D081;
    --df-banner-height: 10rem;
    /*
    --global-size: 12;
    font-size: 12pt !important;
    --hds-font-baseline: 12 !important;
    */
}

.layer_6 {
    z-index: 6000;
}
.layer_5 {
    z-index: 5000;
}
.layer_4 {
    z-index: 4000;
}

#app {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow:hidden;
}

#app > * {
    flex: 1 0 0;
}

.home_container {
    width: 100%;
    height: 100%;
    display: flex;
}

.primary {
    width: fit-content;
    max-width: 32rem;
    min-width: 25rem;
    height: 100%;
    overflow-x: hidden;
}

.main {
    flex:1;
}

.truck-main {
    height: 100%;
    display: flex;
    justify-content: left;
    background-color: var(--hds-background-object);
}

.map-panel {
    flex: 1;
    position: relative;
}

.map-wrapper {
    position: relative;
    height: 100%;
    min-height: 20rem;
}

.map-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

body {
    background: white;
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 20rem;
    min-height: 100vh;
    overflow:hidden;
}

.container {
    border-bottom: .0625rem var(--hds-foreground-divider) solid;
}

.domMarker.container_marker {
    background-color: transparent !important;
    background-size: contain;
    border: none;
    border-radius: 0;
    height: 2.6rem;
    left: -1.1rem;
    top: -2.1rem;
    width: 2.1rem;
  }
  
  .domMarker {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.4rem 1.4rem, 2.2rem 2.2rem;
    border: 0.1rem solid rgba(50, 50, 50, 0.2);
    border-radius: 50%;
    height: 2rem;
    left: -1.1rem;
    top: -1.1rem;
    width: 2rem;
  }

  .truck-waypoint_label {
    font-size:1.0rem;
    font-style:normal;
    font-weight: bold;
    padding-bottom: 1em;
    position:absolute;
    width: 100%;
    left: 0em;
    bottom:-1.2em;
}

.component-card {
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-left: 2em;
    margin-bottom: 2em;
    background-color: var(--hds-gray-50);
    display: flex;
    flex-direction: column;
}

.fleet-detail-old {
    text-decoration:line-through;
  }

.route-qr-code {
    padding: 1rem;
}

.route-qr-code img {
    width: 75%;
}

.df_speedlimit_amer {
    width: 4rem;
    height: 5rem;
    border: .1em solid black;
    border-radius: .5em;
    overflow: hidden;
}

.df_speedlimit_label {
    width: calc(100% - .6rem);
    padding-left: .3rem;
    padding-right: .3rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    display: block;
}

.df_speedlimit_limit {
    width: calc(100% - .6rem);
    padding-left: .3rem;
    padding-right: .3rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    display: block;
    font-size: 2.25rem;
}

.fullscreen_control {
    position: absolute;
    /*
    Back to pixel positioning for this, lol



    right: 24px;
    bottom: 185px;
    width: 40px;
    height: 40px;
    */
    right: calc(1.5rem * (12/var(--global-size)));
    bottom: calc(11.5625rem * (12/var(--global-size)));
    width: calc(2.5rem * (12/var(--global-size)));
    height: calc(2.5rem * (12/var(--global-size)));
}

.mapbrowser_control {
    /*
    position: absolute;
    /*
    Back to pixel positioning for this, lol



    right: 24px;
    bottom: 185px;
    width: 40px;
    height: 40px;
    
    right: calc(1.5rem * (12/var(--global-size)));
    bottom: calc(1.5rem * (12/var(--global-size)));
    width: calc(2.5rem * (12/var(--global-size)));
    height: calc(2.5rem * (12/var(--global-size)));
    */
}

.reset_camera_control {
    position: absolute;
    /*
    Back to pixel positioning for this, lol



    right: 24px;
    bottom: 185px;
    width: 40px;
    height: 40px;
    */
    right: calc(1.5rem * (12/var(--global-size)));
    bottom: calc(15.0625rem * (12/var(--global-size)));
    width: calc(2.5rem * (12/var(--global-size)));
    height: calc(2.5rem * (12/var(--global-size)));
}
.reset_camera_control_blur {
    /*
    Back to pixel positioning for this, lol


    left: 0rem;
    top: 0rem;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    filter: blur(3px);

    */
    position: absolute;
    left: 0rem;
    top: 0rem;
    width: calc(2.5rem * (12/var(--global-size)));
    height: calc(2.5rem * (12/var(--global-size)));
    border-radius: calc(0.375rem * (12/var(--global-size)));
    filter: blur(calc(0.12rem * (12/var(--global-size))));
    background-color: var(--hds-gray-700);
    z-index: 100;
}
.reset_camera_control_icon {
    /*
    Back to pixel positioning for this, lol
    
    width: 2.5rem;
    height: 2.5rem;
    top: 0rem;
    left: 0rem;
    border-radius: 0.375rem;

    width: 40px;
    height: 40px;
    top: 0px;
    left: 0px;
    border-radius: 6px;
    */
    position:absolute;
    width: calc(2.5rem * (12/var(--global-size)));
    height: calc(2.5rem * (12/var(--global-size)));
    top: 0rem;
    left: 0rem;
    border-radius: calc(0.375rem * (12/var(--global-size)));
    background-color:#ffffff;
    z-index: 115;
}
.reset_camera_control_hds_icon {
    --hds-icon-color:var(--hds-gray-500);
    margin-left:calc(20% * (12/var(--global-size)));
    margin-top:calc(20% * (12/var(--global-size)));
    transform:scale(calc(1.0 * 12/var(--global-size)));
}
.df_scrollable_data {
    width: calc(100% + 3rem);
    overflow-y: scroll;
}
.df_data_block_70 {
    overflow-y: scroll;
    margin-right: 0rem; /*var(--df-cell-right-offset);*/
    width: var(--df-cell-width);
    scrollbar-width:none;
    max-height: calc(100vh - 17rem);
}
.df_data_block_50 {
    overflow-y: scroll;
    margin-right: var(--df-cell-right-offset);
    width: var(--df-cell-width);
    scrollbar-width:none;
    max-height: calc(100vh - 25rem);
}
.df_lightbox {
    position: absolute;
    display: block;
    box-sizing: border-box;
    padding: 0rem;
    margin: 0rem;
    left: 0rem;
    top: 0rem;
    bottom: 0rem;
    right: 0rem;
    overflow:hidden;
    z-index: 1200;
}
.df-guide {
    position: absolute;
    box-sizing: border-box;
    left: 0rem;
    top: 0rem;
    z-index: 1215;
    border: 0.125rem solid var(--hds-blue-onlight-400-040);
}
.df-guide-caption {
    position: absolute;
    left: 0rem;
    top: 0rem;
    padding-top: .3rem;
    background-color: var(--hds-white);
    max-width: 48rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: .3rem;
}
.df_param_label {
    font: var(--hds-body-small-font);
    letter-spacing: var(--hds-body-small-letter-spacing);
    color: var(--hds-foreground-secondary);
    line-height: .4rem;
}

/*

Asset badges

*/

.df-asset-badge {
    width:1rem;
    height:1rem;
    background-color:red;
    text-align: center;
    line-height: 1rem;
    display: block;
    border-radius:1rem;
    position: absolute;
    font-weight: bold;
    color: #ffffff;
    right: -.5rem;
    top: -.5rem;
}

/*

Task / Stop detail / location detail card

*/

.df-task-detail {
    width:16rem;
    height:4rem;
    display: block;
    position: absolute;
    left:-8.0rem;
    bottom:1.8rem;
    background-color: #ffffff;
    border: .075rem solid var(--hds-gray-600);
    box-shadow: 0rem 0rem 0.75rem -0.125rem var(--hds-gray-750);
    text-align: left;
    align-items: left;
    padding:.5rem;
}
.df-task-detail_extended {
    width:16rem;
    height:6.25rem;
    display: block;
    position: absolute;
    left:-8.0rem;
    bottom:2.8rem;
    background-color: #ffffff;
    border: .075rem solid var(--hds-gray-600);
    box-shadow: 0rem 0rem 0.75rem -0.125rem var(--hds-gray-750);
    text-align: left;
    align-items: left;
    padding:.5rem;
}
.df-task-detail div,.df-task-detail_extended div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1rem
}

.df-task-detail-name {
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1.25rem;
    margin-bottom:.35rem;
}

.df-task-detail-address {
    font-weight: 100;
    font-size: 0.625rem;
}

.df-task-detail-job-type {
    font-style: italic;
    font-size: 0.625rem;
}

.df-task-detail-availability {
    font-weight: 100;
    font-size: 0.625rem;
}

.df-location-detail {
    width:16rem;
    height:4rem;
    display: block;
    position: absolute;
    left: 5.375rem;
    top: 0.2rem;
    background-color: #ffffff;
    border: .075rem solid var(--hds-gray-600);
    box-shadow: 0rem 0rem 0.75rem -0.125rem var(--hds-gray-750);
    text-align: left;
    align-items: left;
    padding:.5rem;
}

/*

Geofence

*/

.geofence_banner {
    position: absolute;
    left: 0rem;
    right: 0rem;
    top: 0rem;
    z-index: 30;
}
.df-panel {
    border-right: 0.0625rem solid var(--hds-foreground-divider);
    background: var(--hds-background-secondary);
    overflow:hidden;
}
.df-panel-content {
    max-height: calc(100vh - 8rem);
    height: calc(100vh - 8rem);
    overflow-y: auto;
    width: 24.7rem;
    display: flex;
    flex-direction: column;
    scrollbar-width:none;
}
.df-panel-content::-webkit-scrollbar {
    display: none;
}
.df-panel-flex {
    flex:content;
    flex-basis: 10%;
}
.df-panel-spacer {
    flex:content;
    flex-basis: 100%;
}
.df-panel-subhead {
    margin-bottom: 0rem !important;
}
.df-training-mode {
    position: absolute;
    width: 100%;
    background-color: rgba(255,255,255,0.0);
    height: 100%;
    z-index: 1000;
}

/*

Guide elements

*/

.df-guide-demo {
    position: absolute;
    box-sizing: border-box;
    left: 0rem;
    top: 0rem;
    z-index: 1215;
    border: 0rem solid var(--hds-blue-onlight-400-040);
}
.df-guide-demo-anim {
    border: 0.1875rem solid var(--hds-blue-onlight-400-040);
    animation: df-guide-border-color 2s 1s infinite;
}
.df-guide-caption {
    position: absolute;
    box-sizing: border-box;
    left: 0rem;
    top: 0rem;
    z-index: 1215;
    background-color: #ffffff;
    padding: .3rem;
    border: 0.0625rem solid var(--hds-blue-onlight-400-040);
}

.df-subway {
    position: absolute;
    left: 4rem;
    right: 8rem;
    height: 6rem;
    bottom: 2rem;
    /*background-color: #ffffff;*/
    z-index: 1500;
}

.df-subway-caption {
    position: absolute;
    display: block;
    width: 100%;
    top: -9rem;
    height: 8rem;
    /*
    background-color: red;
    */
    overflow: hidden;
}

.df-subway-caption-new {
    position: absolute;
    display: block;
    bottom: 8rem;
    box-sizing: border-box;
    z-index: 1215;
    background-color: #ffffff;
    padding: .3rem;
    font-size: 1.125rem;
    left: 2rem;
    right: 2rem;
    border: 0.0625rem solid var(--hds-blue-onlight-400-040);
    box-shadow: 0rem 0rem 1rem -0.25rem var(--hds-gray-750);
    /*
    
    height: 8rem;
    background-color: red;
    overflow: hidden;
    
    */
}

.df-subway-caption-strip {
    position: absolute;
    display: block;
    top: 0rem;
    height: 7rem;
    /*
    background-color: green;
    */
}
.df-subway-stop-caption {
    position: absolute;
    top: 0rem;
    height: 7rem;
    width: calc(100vw - 48rem);
    /*
    background-color: blue;
    */
}
.df-stop-caption-text {
    position: absolute;
    box-sizing: border-box;
    left: 0rem;
    top: 0rem;
    z-index: 1215;
    background-color: #ffffff;
    padding: .3rem;
    font-size: 1.125rem;
    width: 100%;
    border: .0625rem solid var(--hds-blue-onlight-400-040);
    box-shadow: 0rem 0rem 1rem -0.25rem var(--hds-gray-750);
}

.df-subway-strip {
    position: absolute;
    display: block;
    width: 100%;
    top: calc(50% - .32rem);
    height: .64rem;
    background-color: var(--hds-blue-onlight-300);
    z-index:215;
}
.df-subway-strip-bg {
    position: absolute;
    display: block;
    width: 100%;
    top: calc(50% - .32rem);
    height: .64rem;
    background-color: var(--hds-gray-300);
    z-index: 200;
}
.df-subway-strip-complete {
    right: 0rem;
    width: auto;
    left: 0rem;
    right: 0rem;
    background-color: var(--hds-blue-ondark-400);
    z-index: 220;
}
.df-subway-stop,.df-subway-stop-bg {
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 2.5rem;
    height: 2.5rem;
    top: calc(50% - 1.25rem);
    border-radius: 1.25rem;
}
.df-subway-stop {
    border: .25rem solid var(--hds-blue-ondark-400);
    background-color: #ffffff;
    z-index: 230;
}
.df-subway-stop-bg {
    border: .25rem solid var(--hds-gray-300);
    background-color: var(--hds-gray-50);
    z-index: 215;
}
.df-subway-stop-hint {
    position: absolute;
    display: block;
    box-sizing: border-box;
    border: 0.1875rem solid transparent;
    animation: df-subway-hint-border-color 2s 1s infinite;
    /*border: .25rem solid var(--hds-blue-ondark-400);*/
    width: 3.5rem;
    height: 3.5rem;
    top: calc(50% - 1.75rem);
    margin-left: -.50rem;
    border-radius: 1.75rem;
    z-index: 230;
}
.df-subway-marker {
    position: absolute;
    display: block;
    box-sizing: border-box;
    border: 0rem solid var(--hds-gray-50);
    background-color: var(--hds-gray-300);
    width: 1.5rem;
    height: 1.5rem;
    top: calc(50% - 0.75rem);
    margin-left: -.75rem;
    border-radius: 1.5rem;
    z-index: 250;
}
.df-subway-marker-inner {
    position: absolute;
    display: block;
    box-sizing: border-box;
    border: 0rem solid var(--hds-blue-onlight-300);
    background-color: var(--hds-blue-onlight-300);
    width: 1.5rem;
    height: 1.5rem;
    top: calc(50% - 0.75rem);
    border-radius: 1.5rem;
    z-index: 255;
}

@keyframes df-subway-hint-border-color {
    0% {
        border-color: transparent;
        
    }
    20% {
        border-color: var(--hds-blue-ondark-400);
    }
    60% {
        border-color: var(--hds-blue-ondark-400);
    }
    100% {
        border-color: transparent;
    }
}

@keyframes df-guide-border-color {
    0% {
        border-color: var(--hds-blue-onlight-400-040);
    }
    50% {
        border-color: transparent;
    }
    100% {
        border-color: var(--hds-blue-onlight-400-040);
    }
}

@keyframes df-guide-alert {
    0% {
        border-color: var(--hds-negative);
    }
    50% {
        border-color: transparent;
    }
    100% {
        border-color: var(--hds-negative);
    }
}

/*

Datavis elements.

*/

.df_donut {
    display: block;
}
.df_donut_ring {
    display: block;
    position: absolute;
}

/*

IAA

*/

#demo_iframe_container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background-color: gray;
    z-index: 2000;
    left: 100%;
  }
  
  #demo_iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0px;
  }
  

  /*

  CES 2025

  */
  .kiosk_landing,.kiosk_bg,.kiosk_bg:before,.kiosk_landing_banner,.kiosk_container,.kiosk_landing_banner_bg {
    width: 100vw;
}
.kiosk_landing,.kiosk_bg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0px;
    top: 0px;
}
.kiosk_bg {
    /*
    This is just used to position and blur the background image.
    */
    filter: blur(5px);
}
.kiosk_bg:before {
    content:"";
    height: 100%;
    left: 0rem;
    top: 0rem;
    background: url("../data/images/load_bg.png");
    background-position: 47% 35%;
    position: absolute;
}
.kiosk_landing_banner {
    /*
    Container for all banner elements (logo, text, background gradient)
    */
    height: var(--df-banner-height);
    position: absolute;
}
.kiosk_logo {
    /*
    This is used to position the HERE logo in the top left.
    */
    position: relative;
    margin-left: 4rem;
    margin-top: 2.5rem;
}


.kiosk_landing_banner_text {
    font-size: 40pt;
    font-weight: bold;
    position: absolute;
    top: 0rem;
    left: 14rem;
    font: var(--hds-headline-01-mega-font);
    height: var(--df-banner-height);
    line-height: var(--df-banner-height);
    min-width: 50vw;
    overflow:hidden;
    text-overflow:ellipsis;
}
.kiosk_landing_banner_bg {
    height: var(--df-banner-height);
    position: absolute;
    left: 0px;
    top: 0px;
    background:  linear-gradient(135deg, var(--df-here-blue) 0%, var(--df-here-aqua) 100%);
    opacity:0.7;
}
.kiosk_container {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 10rem;
    height: calc(100vh - var(--df-banner-height));
}

.kiosk_chapter_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 2rem;
}
.kiosk_chapter_card {
    max-width: 20rem;
    max-height: 37rem;
    padding: 2rem;
    background-color: #ffffff;
    position:relative;
    box-shadow: 10px 5px 14px var(--hds-gray-500);
    flex-shrink: 1;
    flex-grow:1.5;
    display: flex;
    flex-direction: column;
    overflow:hidden;
    row-gap: 1rem;
}
.kiosk_chapter_card:before {
    display: block;
    position: absolute;
    margin-left: -2rem;
    margin-top: -2rem;
    width: calc(100% + 4rem);
    height: 1.5rem;
    background: linear-gradient(135deg, var(--df-here-blue) 0%, var(--df-here-aqua) 100%);
    content:"";
}
.kiosk_chapter_title {
    font-weight: 800;
    font-family: var(--hds-headline-01-font-family);
    font-size:20pt;
    display: flex;
    flex-direction: row;
}
.kiosk_caption {
    font-weight: 100;
    font-family: var(--hds-body-font-family);
    font-size:14pt;
    display: flex;
    flex-direction: row;
}
.kiosk_image {
    display: flex;
    flex-direction: row;
    max-width: 22rem;
    max-height: 25rem;
    flex-basis: 25rem;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
}
.kiosk_image img {
    width: 100%;
}
.kiosk_spacer {
    display: flex;
    flex-direction: row;
    flex-basis: 0rem;
    flex-grow: 10;
    flex-shrink: 1;
}
.kiosk_action {
    display: flex;
    flex-direction: row;
    align-self: center;
}

.ces_demo_landing,.ces_demo_bg {
    height: 100vh;
    position: absolute;
    left: 0rem;
    top: 0rem;
}
.ces_demo_bg {
    z-index: 5001;
    filter: blur(5px);
}
.ces_demo_bg:before {
    content:"";
    width: 100%;
    height: 100%;
    left: 0rem;
    top: 0rem;
    background: url("../data/images/load_bg.png");
    background-position: 47% 35%;
    position: absolute;
}
.demo_landing_banner {
    height: 11rem;
    position: absolute;
    z-index: 5002;
    padding-left: 5rem;
    padding-top: 3.5rem;
}
.demo_landing_banner_text {
    font-size: 40pt;
    font-weight: bold;
    position: absolute;
    top: 3.6rem;
    left: 15rem;
    font: var(--hds-headline-01-mega-font);
}
.demo_landing_banner_bg {
    height: 11rem;
    position: absolute;
    left: 0px;
    top: 0px;
    background:  linear-gradient(135deg, var(--df-here-blue) 0%, var(--df-here-aqua) 100%);
    opacity:0.7;
    z-index: 5001;
}
.demo_card_spacer {
    flex-basis:40%;
}
.demo_card_spacer_inner {
    flex-basis:32rem;
}
.demo_card_ces {
    width: 20rem;
    height: 37rem;
    padding: 2rem;
    background-color: #ffffff;
    position:relative;
    box-shadow: 10px 5px 14px var(--hds-gray-500);
    flex-basis: 26rem;
    flex-shrink: 0;
    overflow:hidden;
}
.demo_card_ces:before {
    display: block;
    position: absolute;
    margin-left: -2rem;
    margin-top: -2rem;
    width: 30rem;
    height: 1.5rem;
    background: linear-gradient(135deg, var(--df-here-blue) 0%, var(--df-here-aqua) 100%);
    content:"";
}
.demo_card_ces #ces_demo_title {
    font-weight: 800;
    font-family: var(--hds-headline-01-font-family);
    font-size:20pt;
    display: inline-block;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.demo_card_ces img {
    width: 100%;
}
.demo_card_free_demo {

}
.demo_card_free_demo_container {
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    transform: scale(1.6);
    z-index: 6000;
    opacity:0.5;
}

/*

Documentation 

*/

.df_doc_args {
    position:relative;
    max-width: 65vw;
}

.df_doc_args li {
    line-height: 1.5rem !important;
    font-size: 10pt;
    padding: 0rem !important;
    margin: 0rem !important;
}
.df_doc_argname {
    font-family: monospace;
}

.df_doc_child {
    font-size: 11pt;
}


.df_doc_argbox_list {
    display: flex;
    flex-direction: column;
}
.df_doc_argbox {
    display: flex;
    flex-direction: row;
}
.df_doc_argbox_type {
    display: flex;
    flex-basis: 6rem;
    flex-grow: 0;
    flex-shrink: 1.5;
    min-width: 6rem;
}
.df_doc_argbox_data {
    display: flex;
    flex-grow: 5;
    flex-shrink: 0;
}

/*

Map Browser (2025)

*/

.df-map-browser {
    position: absolute;
    right: 5.5rem;
    bottom: 1.5rem;
    max-width: 32rem;
    background-color: var(--hds-white);
    box-shadow: 0rem 0rem 0.75rem -0.125rem var(--hds-gray-750);
    z-index: 5000;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
    border-radius: 0.8rem;
}

.df-map-browser-row {
    display: flex;
    flex-direction: row;
    /*justify-content: center;*/
    column-gap: 1rem;
}

.df-map-type {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.df-map-large {
    flex-basis: 6rem;
    max-width: 6rem;
    flex-shrink: 0;
    flex-grow: 2;
    height: 6.5rem;
}
.df-map-small {
    flex-basis: 4rem;
    max-width: 4rem;
    flex-shrink: 0;
    flex-grow: 2;
    height: 5.5rem;
}
.df-map-img {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    border-radius: .2rem;
    background-color: var(--df-here-aqua);
    border-style: solid;
    border-width: .15rem;
    position:relative;
    border-color: var(--hds-gray-300);
}
.df-map-img-bg {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("./res/data/images/ces25_ev_lng.png");
    background-size: 250%;
    background-position: center;
}
.df-map-img-selected {
    border-width: 0.2rem;
    border-color: var(--df-here-blue) !important;
}
.df-map-caption {
    display: flex;
    flex-direction: row;
    /*font: var(--hds-body-small-font);*/
    margin-top:.5rem;
}
.df-map-options-row {
    display: flex;
    flex-direction: row;
    justify-content: left;
    column-gap: 1rem;
    margin-top:1rem;
    margin-bottom:1rem;
    flex-basis: 2rem;
    flex-grow: 4;
    flex-shrink: 0;
}
.df-options-header {
    font: var(--hds-headline-04-font);
}
.df-options-subheader {
    font: var(--hds-headline-05-font);
}

.df-map-spacer-bottom {
    border-bottom: .1rem solid var(--hds-gray-300);
}