.esriElevationProfile, .esriElevationProfileChartNode {
    height: 100%;
    width: 100%;
    min-height: 200px;
    margin: 0 auto 0 auto;
    overflow: hidden;
}

.esriElevationProfile .esriElevationProfileToolbar {
    position: absolute;
    float: right;
    text-align: right;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
}

.esriElevationProfile .esriRTL .esriElevationProfileToolbar {
    float: left;
    text-align: left;
}

.esriElevationProfile .esriElevationProfileToolbar .dijitButtonText {
    color: #eee;
    font-size: smaller;
    font-weight: bolder;
}

.esriElevationProfile .esriElevationProfileToolbar .dijitButtonNode {
    margin: 0;
    padding: 2px;
    background: none ;
    border: solid 1px transparent ;
    border-radius: 3px ;
}

.esriElevationProfile .esriElevationProfileToolbar .dijitHover {
    border: solid 1px #666 ;
}

.esriElevationProfile .esriElevationProfileToolbar .dijitActive {
    border: solid 1px #333 ;
}

.esriElevationProfile .esriElevationProfileToolbar .dijitArrowButtonInner {
    background-image: url(../images/buttonArrows.png) ;
}

.esriElevationProfile .esriElevationProfileMeasurePane {
    position: absolute;
    float: right;
    top: 32px;
    right: 6px;
    width: 250px;
    padding: 10px;
    background-color: #eee;
    color: #333;
    border-radius: 4px;
    border: solid 1px silver ;
    font-size: smaller;
}

.esriElevationProfile .esriElevationProfileMeasurePane .dijitDialogCloseIcon {
    z-index: 99;
}

.esriElevationProfile .esriElevationProfileLabel {
    color: #eee;
    font-weight: bolder;
    font-size: 0.7em;
    line-height: 1.0em;
}

.esriElevationProfile .esriElevationProfileGainLossLabel {
    width: 30%;
    position: absolute;
    bottom: 10px;
    left: 10px;
    text-align: left;
    white-space: nowrap;
    display: inline-block;
}

.esriElevationProfile .esriRTL .esriElevationProfileGainLossLabel {
    right: 10px;
    text-align: right;
}

.esriElevationProfile .esriElevationProfileSourceLabel {
    width: 30%;
    position: absolute;
    bottom: 14px;
    right: 10px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    word-wrap: normal;
    text-overflow: ellipsis;
    color: rgb(106,106,106);
    font-family: verdana;
}

.esriElevationProfile .esriRTL .esriElevationProfileSourceLabel {
    left: 10px;
    text-align: left;
}

.esriElevationProfile .esriElevationProfilePopupRequirementLabel {
    color: #ccc;
    padding-left: 6px;
    font-size: smaller;
}
.esriElevationProfile .esriElevationProfileDirectionLabel {
    width: auto;
    position: absolute;
    bottom: 14px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    word-wrap: normal;
    text-overflow: ellipsis;
    color: rgb(106,106,106);
    font-family: verdana; 
    font-weight: bolder;
    font-size: 0.7em;
    line-height: 1.0em;
}

.esriElevationProfile .esriElevationProfileDirectionButton {
    height: 35px;
    width: 50px;
    padding: 5px;    
    margin: 0 5px 5px 0; 
    align-items: center;    
    -webkit-box-sizing: border-box;
    cursor: pointer;     
    display: inline-flex;    
    position: absolute;
    bottom: 0px;   
}

.esriElevationProfile .esriElevationProfileDirectionButton:hover {
    border-color: #02ceff;
    color: #02ceff;          
}

.esriElevationProfile .esriElevationProfileDirectionButtonLabel {
    -webkit-box-align: center;    
    display: flex;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;    
    white-space: nowrap;
    font-family: "proxima-nova","Helvetica Neue",Arial,sans-serif;
    font-size: 12px;
    line-height: 14px;       
}

.esriElevationProfile .esriElevationProfileDirectionForward {
    background: url(../images/right-arrow-gray.svg) no-repeat 5px center;
    height: 30px;
    width: 50px;    
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;    
}

.esriElevationProfile .esriElevationProfileDirectionForward:hover {
    background: url(../images/right-arrow-hover.svg) no-repeat 5px center;
    height: 30px;
    width: 50px;    
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);    
}

.esriElevationProfile .esriElevationProfileDirectionReverse {
    background: url(../images/left-arrow-gray.svg) no-repeat 5px center;
    height: 30px;
    width: 50px;    
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;  
}

.esriElevationProfile .esriElevationProfileDirectionReverse:hover {
    background: url(../images/left-arrow-hover.svg) no-repeat 5px center;
    height: 30px;
    width: 50px;  
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);         
}

.esriElevationProfile .esriElevationProfileInfoNode {
    background: url(../images/info_16.png) no-repeat center;
    width: 16px;
    height: 16px;
    float: right;
    position: absolute;
    top: 14px;
    right: 30px;
    cursor: pointer; 
    border: 0; 
    border-style: none;
}

.esriElevationProfile .esriElevationProfileInfoNode .esriElevationProfileInfoText {
    visibility: hidden;
    width: 215px;
    background-color: #008000;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0px 5px 5px;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
    font-size: 9pt;
    font-family: Verdana;
    border: 1px solid #3a3a3a;
}

.esriElevationProfile .esriElevationProfileInfoNode:hover .esriElevationProfileInfoText {
    visibility: visible;
}