.FullScreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 4100000;
    background-color: rgba(0, 0, 0, 0.5);
}

.LogInInputBoxError {
    border-color: #f00 !important;
}

.LogInInputBox {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: auto;
    position: relative;
    left: 0;
    margin-left: 18px;
    width: 270px;
    padding: 11px;
    border: 1px solid #e4e4e4;
    margin-bottom: 17px;
    font-size: 17px;
}

.pm-weak {
    background-color: #DB473B;
}

.pm-good {
    background-color: #eeaa00;
}

.pm-strong {
    background-color: #33cc33;
}

.Fade_Overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(255, 255, 255, 1.0);
    display: none;
    opacity: 0.0;
}

/****************/

/* Popup        */

/****************/

.PopUp, .DiscoverRoute_PopUp {
    position: absolute;
    opacity: 0.0;
    z-index: 10;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    -moz-transition-property: opacity;
    -moz-transition-duration: 0.5s;
    -o-transition-property: opacity;
    -o-transition-duration: 0.5s;
    transition-property: opacity;
    transition-duration: 0.5s;
    box-shadow: 0 0 55px rgba(0, 0, 0, 0.2);
}

.PopUp_Inner_Frame {
    border: none;
    /*
    width:262px;
    height:373px;
    */
    overflow: hidden;
}

.PopUp_Scroller {
    border: none;
    width: 285px;
    height: 373px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #fff;
}

#gridRefValue {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.PopUp_Canvas {
    position: relative;
}

.PopUp_Weather {
    text-align: right;
    width: 65px;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 15px;
}

.PopUp_Weather_Div img {
    vertical-align: bottom
}

.DiscoverRoute_PopUp {
    background-color: #fff;
}

.AB_PopUp_Extra {
    width: 194px;
    height: 69px;
}

.AB_PopUp_Extra:before {
    content: '';
    position: absolute;
    bottom: -32px;
    left: 87px;
    right: 0;
    border-color: #ffffff transparent transparent transparent;
    border-style: solid;
    border-width: 16px;
    width: 0;
    height: 0;
}

.AB_PopUp_Extra_Scroll {
    width: 224px;
    height: 69px;
}

.AB_PopUp_Extra_Canvas {
    width: 180px;
    padding-bottom: 0;
    padding: 9px 0 0 18px;
}

.AB_PopUp_Image {
    top: 16px;
}

.AB_PopUp_Image_Absolute {
    position: absolute;
    top: 16px;
}

.AB_PopUp_Details {
    margin-left: 57px;
    border-left: 1px #dedede dashed;
    padding-left: 15px;
    width: 95px;
}

.PopUp_Dropped_Pin, .PopUp_Poi_Pin {
    height: 200px
}

/****************/
/* Discover GUI */
/****************/

#Window_1_Discover {
    width: 290px;
    margin-left: 40px;
    margin-top: 20px;
}

#Window_1_Discover_List {
    position: relative;
    max-height: 350px;
    overflow-y: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border-left: 2px solid;
    border-top: 2px solid;
    border-bottom: 1px solid;
    border-right: 1px solid;
}

/****************/
/*  Gazetteer   */
/****************/

.GazItem {
    font-size: 12pt;
    cursor: pointer;
    display: block;
    padding: 10px 10px 10px 60px;
    line-height: 20px;
    background: rgba(255, 255, 255, 1) url(../images/main/search-bullet-directions.png) no-repeat 20px center;
}

.GazItem:hover {
    background-color: #f4f4f4;
}

/**********************/
/*Preferences Dialogue*/
/**********************/

.Pref_Activity_Unit_Cell {
    min-height: 16px;
    padding: 2px;
    border: 1px solid #e1e1e3;
}

/*Side Pane System*/
.SidePane {
    top: 60px;
    bottom: 0;
    left: -334px;
    width: 334px;
    position: fixed;
    z-index: 1;

    transition-property: left, right;
    transition-duration: 0.3s;

    -webkit-transition-property: left, right;
    -webkit-transition-duration: 0.3s;
}

.sidePaneBodyContainer {
    position: absolute;
    height: 100%;
    width: 334px;
    background-color: #ffffff;
    color: #5d5d5d;
}

.sidePaneAction {
    line-height: 50px;
    position: absolute;
    z-index: 101;
    margin-left: 20px;
}

.sidePaneBody {
    position: relative;
    display: inline-block;
    height: calc(100% - 50px);
    width: 100%;
    padding-left: 0 !important;
    background-color: #ffffff;
    pointer-events: auto;
    color: #5d5d5d;
    padding-top: 50px;
}

.sidePaneClose {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    font-size: 18px;
    z-index: 3000;
    width: 12px;
    height: 12px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 20px;
    background: url(../images/main/general-interface-icons.png) transparent no-repeat -60px 17px / 633px;
    right: 0;
}

.sidePaneClose:hover {
    opacity: 0.6;
}

.onboardingClose {
    display: inline-block;
    cursor: pointer;
    font-size: 18px;
    z-index: 3000;
    width: 12px;
    height: 12px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 20px;
    background: url(../images/main/general-interface-icons.png) transparent no-repeat -60px 17px / 633px;
    float: right;
    position: absolute;
    right: 0;
}

.onboardingClose:hover {
    opacity: 0.6;
}

.pin-popup-close {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    font-size: 18px;
    z-index: 3000;
    width: 12px;
    height: 12px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 20px;
    background: url(../images/main/general-interface-icons.png) transparent no-repeat -60px 17px / 633px;
    right: 0;
    top: 0;
}

.pin-popup-close:hover {
    opacity: 0.6;
}

.Side_Pane_Title, .Burger_Pane_Title, .SidePane_SubTitle {
    position: relative;
    padding-top: 21px;
    padding-right: 9px;
    padding-bottom: 15px;
    color: #000;
    border-top: 1px solid rgba(0, 0, 0, .05);
    text-align: center;
}

.SidePane_SubTitle {
    font-weight: 300;
    text-align: left;
    padding-top: 48px;
    border-top: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-left: 18px;
    margin-left: 0;
}

.Side_Pane_Sub_List_Inert {
    position: relative;
    padding: 17px 9px 17px 0;

}

.Side_Pane_Sub_List, .PrefsSubList {
    display: block;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    padding: 17px 9px 17px 30px;
    color: #5d5d5d;
}

.Side_Pane_Sub_List:hover {
    background-color: #f8f8f8;
    color: #5d5d5d;
    cursor: pointer;
    text-decoration: none;
}

.Side_Pane_Sub_List span {
    font-size: 10pt;
    width: calc(100% - 40px);
    display: block;
}

.Side_Pane_Sub_List span.main-top-bar-user-premium-badge, .Side_Pane_Sub_List div.link {
    font-size: 10pt;
    width: auto;
    display: inline-block;
}

.Side_Pane_Extra_Margin {
    padding-top: 40px
}

.CarouselOverlay {
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    transform-style: preserve-3d;
    z-index: 3000000;
    overflow: hidden;
    text-align: center;
}

/*POI Features*/

.Side_Tab_Base {
    position: relative;
    float: right;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform: rotate(90deg);
    transform-origin: 0 100%;
    text-align: left;
    pointer-events: auto;
    cursor: pointer;
    display: none;
    font-size: 18px;
    padding: 16px;
    width: 150px;
    margin-right: -175px;
    -webkit-transition: margin-right .5s;
    -moz-transition: margin-right .5s;
    transition: margin-right .5s;
}

.Side_Tab_Hidden {
    display: none
}

.Side_Tab_Base img {
    float: right;
    margin-top: 5px;
}

.Pref_Activity_Unit_Cell {
    display: inline-block;
    padding: 13px 11px 13px 11px;
    margin-right: 11px;
    margin-left: 48px;
    width: 55px !important;
    height: 22px;
}

.Pref_route_measurement_div {
    display: inline-block;
    position: absolute;
    top: 30px;
}

.Prefs_Mesurment_Selector,
.Prefs_Map_Selector,
.Prefs_Move_Map_Selector,
.Prefs_Tour_Selector,
.Prefs_Initial_Selector {
    pointer-events: auto;
    cursor: pointer;
}

.Prefs_Mesurment_Selector_Selected,
.Prefs_Map_Selector_Selected,
.Prefs_Move_Map_Selector_Selected,
.Prefs_Tour_Selector_Selected,
.Prefs_Initial_Selector_Selected {
    background-image: url(/osmaps/bundles/app/images/selected-tick.png);
    background-repeat: no-repeat;
    background-position: 90% 50%;
}

.PrefsSubListBackgroundOnTop {
    background-position: 90% 20%;
}

.input-error {
    border-color: #ef5350 !important;
}

.preferencesLocationDropX {
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    left: 231px;
    cursor: pointer;
    top: 12px;
}

.Prefs_Sub_List {
    position: relative;
    padding: 17px 9px 0px 30px;
    height: 55px;
}

/* Search functions */
#BingLocationResults {
    width: 334px;
    height: auto;
    position: absolute;
    left: 0;
    top: 60px;
}

.A2BBingLocationResults, .BingResults {
    position: absolute;
    left: -24px;
    overflow: hidden;
    z-index: 100;
    display: none;
    width: 334px;
    height: 100vh;
    background-color: #fff;
}

.GazSelected {
    background-color: #3596d2
}

.GazTown {
    color: #000000;
    padding: 0;
    margin: 0;
    font-weight: 400;
}

.GazPartial {
    font-weight: 400;
}

.GazCounty {
    color: #6d6d6d;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

/***
 * Weather view
 ***/
#weatherHeadRowOne {
    margin-left: 20px;
}

#weatherHeadRowTwo {
    margin-left: 20px;
}

#weatherHeadRowThree {
    margin-left: 10px;
}

#weatherHeadInfoImg {
    width: 70px;
    height: 70px;
    /* float: right; */
    margin-right: 18px;
    /*vertical-align: top;*/
    vertical-align: middle;
    margin-top: -15px;
}

#weatherHeadInfoName {
    font-size: 30px;
    line-height: 39px;
    color: #000;
    font-weight: 400;
    margin-top: -8px;
    font-family: "OS Gill Sans Regular", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#weatherHeadMaxTemp {
    font-size: 45px;
    line-height: 28px;
    color: #000;
    display: inline;
    font-weight: 400;
}

#weatherHeadMinTemp {
    display: inline;
    font-size: 24px;
    margin-right: 30px;
    line-height: 55px;
    vertical-align: top;
}

#rowThreeMaxTemp {
    display: inline;
    font-size: 24px;
    color: #000;
    line-height: 55px;
    vertical-align: top;
    font-weight: 400;
    text-align: center;
}

#weatherHeadWeather {
    font-size: 18px;
    line-height: 28px;
    color: #000;
    margin-left: 0;
    margin-top: -6px;
    margin-bottom: 5px;
}

#weatherHeadUV {
    display: inline;
    width: 50px;
    text-align: center;
    margin-right: 35px;
}

@media only screen and (max-width: 720px) {
    #weatherHeadUV {
        display: inline;
        width: 50px;
        text-align: center;
        margin-right: 20px;
    }
}

#weatherHeadWind {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    width: 106px;
    margin-top: -44px;
}

#weatherData {
    margin-top: 0;
    margin-bottom: 30px;
}

td {
    padding: 0;
}

#weatherDataTable {
    width: 100%;
    padding-left: 15px;
    padding-right: 10px;
    background-color: rgb(0, 174, 239);
    border-collapse: separate;
    border-spacing: 0px;
    padding-top: 12px;
    padding-bottom: 10px;
}

#weatherDataTable tr {

    height: 10px !important;
    font-size: 18px;
    color: white;

}

.weatherDataTimeCell {
    width: 35px;
    padding-right: 9px;
    padding-left: 5px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.weatherDataImageCell {

    padding-right: 0px;
    width: 40px;
    text-align: center;
    padding-top: 0px;

}

.weatherDataImageCell img {
    width: 40px;
    height: 40px;

}

.weatherDataTempCell {
    padding-left: 29px;
    padding-right: 0px;
    width: 32px;
}

.weatherDataHumidityCell {
    padding-left: 14px;
    padding-right: 0px;
    width: 30px;
}

.weatherDataWindCell {
    width: 30px;
    padding-left: 30px;
    font-size: 11px;
}

.weatherDataWindCell img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.weatherDataWindCellText {
    position: absolute;
    left: 0;
    text-align: center;
    width: 30px;
    top: 1px;
}

#weatherFooter {
    margin-right: 0;
    padding: 0;
    font-size: 15px;
    background-color: rgba(3, 156, 214, 1.0);
    height: 106px;
}

.weatherDayButton {
    display: inline-block;
    float: left;
    margin: 0;
    width: 66px;
    padding: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-right: none;
    line-height: 18px;
    background-color: rgba(3, 156, 214, 1.0);
    text-align: center;
    color: white;
    height: 95px;

}

.weatherDayButton:hover {
    background-color: rgb(0, 174, 239);
    cursor: pointer;
}

.weatherDayButtonNotSelected {
    background-color: rgba(3, 156, 214, 1.0);
    color: white;
    opacity: 0.6;
}

.weatherDayButtonSelected {
    background-color: rgb(0, 174, 239);
}

.weatherFooterImage {
    width: 100%;
    text-align: center;
    height: 32px;
}

.weatherDayButton img {
    width: 40px;
    height: 40px;
    padding-bottom: 5px;
}

.weatherFooterTemp {
    text-align: center;
    font-size: 15px;
    color: white;
    margin-top: 2px;
}

#weatherHeadInfo {
    margin-left: 18px;
    min-height: 78px;
}

#weatherMetOffice {
    margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Dialog box */

.dialogBody {
    position: relative;
    width: 263px;
    background-color: rgb(255, 255, 255);
    padding-bottom: 20px;
    font-size: 18px;
    text-align: center;
}

.dialogButtonGroup {
    position: relative;
    display: block;
    padding-top: 30px;
}

.dialogButtonGroup > div {
    width: 200px;
    height: 40px;
    background-color: #0079c9;
    font: normal normal normal 11pt "Source Sans Pro", sans-serif;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
    border-radius: 40px;
    border: 1px solid #5dc5ea;
    cursor: pointer;
    display: block;
    margin: auto;
    margin-bottom: 10px;
}

.abRouteResultsButton {
    width: 100%;
    height: 60px;
    line-height: 60px;
    float: left;
    background-color: #f8f8f8;
    color: #00aeef;
}

.dialogButton {
    border: 1px solid #3596d2;
    font-size: 18px;
    height: 40px;
    text-align: center;
    width: 195px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    color: #ffffff;
    background-color: #3596d2;
}

.dialogButtonAlt {
    color: #3596d2;
    background-color: #ffffff;
}

.dialogText {
    width: 190px;
    padding-top: 35px;
    display: inline-block;
    overflow: hidden;
}

.Window_1_GlobalWait_Outer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 265px;
    height: 155px;
    margin-left: -132px;
    margin-top: -62px;
}

#Window_1_GlobalWaitFrameBody {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1.0);
    text-align: center;
}

#Window_1_GlobalWaitFrameBody_wait {
    margin-top: 25px
}

#Window_1_GlobalWaitFrameBodyMessages {
    text-align: center;
    height: 24px;
    font-size: 18px;
    background-color: rgba(255, 255, 255, 0.0);
    overflow-y: none;
    width: 100%;
    margin-top: 33px;
    margin-left: auto;
    margin-right: auto;
}

/**
 * Call To Action
 **/

.VersionInfo {
    position: relative;
    padding: 27px 9px 15px 30px;
    border-top: 1px solid rgba(0, 0, 0, .05);
    font-size: 12px;
    color: gray;
}

.routeFilters {
    padding-left: 20px;
    margin-top: 10px;
    border-bottom: 1px solid #f2f2f2;
}

.routeOptions {
    margin-right: 36px;
    margin-bottom: 10px;
    height: auto;
}

#MyRoutesSearchBox {
    padding: 0px;
    border: none;
    outline: none;
    width: 220px;
}

.Standard_Side_Text_Box {
    width: 190px;
    padding: 0;
    border: none;
    outline: none;
}

.Standard_Side_illusion_Span {
    padding-left: 7px;
    padding-bottom: 7px;
    padding-top: 7px;
    padding-right: 27px;
    border: 1px solid #ebebeb;
    border-radius: 1px;
    margin-right: 0px;
    width: 190px;
}

.Standard_Side_Drop_List {
    position: absolute;
    right: 36px;
    left: 0;
    overflow-x: hidden;
    font-weight: 300;
    z-index: 10;
    display: none;
}

.sidePaneTitle {
    line-height: 50px;
    text-align: center;
    font-weight: 400;
    background-color: #fff;
    z-index: 101;
    width: 100%;
    position: absolute;
    font-size: 18px;
}

.searchArea {
    margin-bottom: 20px
}

.OptionsSelection,
.OptionsSelectionSelected {
    display: inline-block;
    padding: 6px;
    color: #5d5d5d;
}

.OptionsSelectionCaption,
.OptionsSelection {
    display: inline-block;
    padding: 6px;
    color: #5d5d5d;
}

.OptionsSelection:hover {
    color: #5dc5ea;
    text-decoration: underline;
    cursor: pointer;
}

.OptionsSelectionSelected {
    color: #00aeef;
    cursor: pointer;
}

.elevationPopup {
    width: 70px !important;
    height: auto;
    padding: 10px !important;
    margin-top: -3px;
}

.elevationPopup:before {
    content: '';
    position: absolute;
    bottom: -32px;
    left: 30px !important;
    right: 0;
    border-color: #ffffff transparent transparent transparent;
    border-style: solid;
    border-width: 16px;
    width: 0;
    height: 0;
}

.preferencesLocationDrop {
    height: 50px;
    width: 203px;
    position: relative;
    margin-top: 10px;
    margin-left: -10px;
}

.customLocationInputDisabled {
    height: 40px;
    font-size: 18px;
    background-color: #ffffff;
    color: #5d5d5d;
    padding-left: 11px;
    width: 166px;
    padding-right: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 300;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text;
    background-image: url(../images/clear_notes.png);
    background-position: right 10px center;
    background-repeat: no-repeat;
}

.customLocationInputDisabled {
    background-color: #ffffff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.customLocationResults {
    display: none;
    text-align: left;
    background-color: rgba(255, 255, 255, 1.0);
    border: 1px solid;
    border-color: rgba(230, 230, 230, 1.0);
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 5px 10px 5px 11px;
}

.dialogTitle {
    font-weight: 400;
    margin-bottom: -10px;
    padding-top: 35px;
}

.center {
    text-align: center;
}

#import-route-container {
    padding-top: 60px;
}

#change-password-container {
    height: 100%;
    padding: 20px;
}

.sidePaneBodyContainer .common-box-busy {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/spinner.gif) no-repeat center #ffffff;
    z-index: 50000;
    left: 0;
    top: 0;
    opacity: 0.7;
    display: none;
    -moz-transition: width 0.01s, height 0.01s;
    -webkit-transition: width 0.01s, height 0.01s;
    -o-transition: width 0.01s, height 0.01s;
    transition: width 0.01s, height 0.01s;
}

.Window_1_Pref_Unit_Value_puwalk:after {
    background: url(../images/main/general-interface-icons.png) no-repeat -20px -629px / 633px;
}

.Window_1_Pref_Unit_Value_purun:after {
    background: url(../images/main/general-interface-icons.png) no-repeat -65px -629px / 633px;
}

.Window_1_Pref_Unit_Value_pucycle:after {
    background: url(../images/main/general-interface-icons.png) no-repeat -106px -629px / 633px;
}

.Window_1_Pref_Unit_Value_puwalk:after,
.Window_1_Pref_Unit_Value_purun:after,
.Window_1_Pref_Unit_Value_pucycle:after {
    content: "";
    width: 30px;
    height: 30px;
    top: 24px;
    left: 25px;
    position: absolute;
    display: inline-block;
    overflow: hidden;
}

#create-route-close-toolbar {
    display: none;
}

#duplicate-route {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 812px;
    top: 82px;
    width: 58px;
    text-align: center;
    background: #fff url(../images/copy.png) no-repeat 26px 11px / 31px;
    display: none;
}

@media (hover: hover) {
    #duplicate-route.active:hover,
    #duplicate-route:hover {
        background-color: #f8f8f8;
    }
}

#create-route-save {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 749px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-save.disabled {
    background-color: #ffffff !important;
    color: #000000 !important;
}

#create-route-cancel {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 686px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-snap {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 613px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-draw {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 550px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-draw.disabled {
    background-color: #ffffff !important;
    color: #000000 !important;
}

#create-route-delete {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 487px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-delete.disabled {
    background-color: #ffffff !important;
    color: #000000 !important;
}

#create-route-undo {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 424px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-undo.disabled {
    background-color: #ffffff !important;
    color: #000000 !important;
}

#create-route-style {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 361px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-style.disabled {
    background-color: #ffffff !important;
    color: #000000 !important;
}

#create-route-marker {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 362px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-grid {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 279px;
    top: 82px;
    width: 50px;
    text-align: center;
}

#create-route-expand {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 216px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-style-close {
    position: absolute;
    right: 40px;
    top: 13px;
}

#create-route-style-close:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 30px;
    background: url(../images/main/general-interface-icons.png) transparent no-repeat -17px 17px;
    margin-top: -17px;
    margin-left: 1px;
}

#create-route-print {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 153px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-print.disabled {
    background-color: #ffffff !important;
    color: #000000 !important;
}

#create-route-help {
    padding: 11px;
    font-size: 11pt;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 41px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 90px;
    top: 82px;
    width: 41px;
    text-align: center;
}

#create-route-style-container {
    z-index: 10;
    position: absolute;
    right: 361px;
    top: 165px;

}

#PreferencesRouteStyle, #PreferencesCesium {
    cursor: pointer;
    border-bottom: none;
}

#PreferencesRouteStyle:before, #PreferencesCesium:before {
    content: "";
    position: absolute;
    width: 13px;
    display: block;
    height: 9px;
    float: right;
    top: 25px;
    right: 22px;
    z-index: 0;
    background: url(../images/drop-arrow.png) no-repeat 0 0/13px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#PreferencesRouteStyle.closed:before, #PreferencesCesium.closed:before {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

#preferences-route-style-container {
    border-bottom: 1px solid #f2f2f2;
}

#create-route-style-popup {
    padding: 11px;
    font-size: 11pt;
    background-size: 45px 33px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #ffffff;
    cursor: pointer;
    width: 293px;
    text-align: center;
}

@media only screen and (max-width: 720px) {
    #create-route-other-options.mobile-hidden,
    #create-route-tools.mobile-hidden {
        display: none;
    }

    #create-route-other-options {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #fff;
        height: 73px;
        z-index: 1;
    }
}

#create-route-grid-popup {
    padding: 7px;
    font-size: 11pt;
    background-size: 45px 33px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10px;
    padding-top: 8px;
    padding-left: 35px;
    background-color: #ffffff;
    cursor: pointer;
    position: absolute;
    right: 198px;
    top: 165px;
    width: 111px;
    height: 93px;
    text-align: justify;
}

@media only screen and (min-width: 1179px) {

    #create-route-grid-popup.expand {
        top: 97px !important;
    }

    #create-route-style-container.expand {
        top: 97px !important;
    }
}

@media only screen and (min-width: 1051px) and (max-width: 1279px) {

    #create-route-save {
        right: 153px;
        top: 165px;
    }

    #create-route-cancel {
        right: 90px;
        top: 165px;
    }

    #duplicate-route {
        right: 216px;
        top: 165px;
    }

    #create-route-grid-popup {
        right: 199px;
    }

    #create-route-close-toolbar {
        display: none;
    }

    #create-route-save.expand {
        top: 90px !important;
        transition: 0.5s linear all;
    }

    #create-route-cancel.expand {
        top: 90px !important;
        transition: 0.5s linear all;
    }

    #create-route-grid-popup.expand {
        top: 97px !important;
    }

    #create-route-style-container.expand {
        top: 97px !important;
    }

}

@media only screen and (min-width: 375px)and (max-width: 470px) {

    #create-route-style-close:before {
        margin-top: -12px;
        margin-left: 7px;
    }
}

@media only screen and (min-width: 470px)and (max-width: 620px) {

    #create-route-style-close:before {
        margin-top: -6px;
        margin-left: 9px;
    }

}

@media only screen and (min-width: 620px)and (max-width: 700px) {

    #create-route-style-close:before {
        margin-top: 2px;
        margin-left: 24px;
    }

}

@media only screen and (max-width: 720px) {

    #toolbar-close {
        margin-left: 76%;
        margin-top: -34px;
    }

    #create-route-style-container {
        margin-left: -158px;
        left: 50%;
        top: 66px;
    }

    #create-route-help {
        left: 60%;
        width: 20%;
        height: 32px;
        display: inline-block !important;
        padding: 0px;
        padding-top: 41px;
        z-index: 1;
        bottom: 0px !important;
        top: initial !important;
        right: initial !important;
    }

    #create-route-grid {

        left: 40%;
        width: 20%;
        height: 32px;
        display: inline-block !important;
        padding: 0px;
        padding-top: 41px;
        z-index: 1;
        bottom: 0px !important;
        top: initial !important;
        right: initial !important;
    }

    #create-route-print {
        display: none !important;
    }

    #create-route-expand {
        display: none !important;
    }

    #create-route-save {
        left: 0px !important;
        width: 20%;
        height: 32px;
        display: inline-block !important;
        padding: 0px;
        padding-top: 41px;
        z-index: 2;
        bottom: 0px !important;
        top: initial !important;
        right: initial !important;
    }

    #create-route-cancel {
        left: 20% !important;
        width: 20%;
        height: 32px;
        display: inline-block !important;
        padding: 0px;
        padding-top: 41px;
        z-index: 2;
        bottom: 0px !important;
        top: initial !important;
        right: initial !important;
    }

    #create-route-grid-popup {
        z-index: 1;
        right: 70px;
        top: 65px;
        width: 105px;
        padding: initial;
        padding-left: 17px;
        text-align: justify;
    }

    #create-route-snap {
        left: 0px !important;
        width: 20%;
        height: 32px;
        display: inline-block !important;
        padding: 0px;
        padding-top: 41px;
        z-index: 1;
        bottom: 72px !important;
        top: initial !important;
        right: initial !important;
    }

    #create-route-close-toolbar {
        left: 80%;
        width: 20%;
        height: 32px;
        display: inline-block;
        padding: 0px;
        padding-top: 41px;
        z-index: 1;
        bottom: 0px;
        top: initial !important;
        right: initial;
        font-size: 11pt;
        background-size: 24px 24px;
        background-repeat: no-repeat;
        background-position-y: center;
        background-position-x: 10px;
        background-color: #ffffff;
        cursor: pointer;
        position: absolute;
        text-align: center
    }

    #create-route-close-toolbar.create {
        bottom: 72px;
        top: auto !important;
    }

    #create-route-close-toolbar:before {
        content: '';
        position: absolute;
        width: 26px;
        height: 30px;
        background: url(../images/main/general-interface-icons.png) transparent no-repeat -60px 14px/633px;
        margin-top: -48px;
        right: 10px;
    }

    .create-route-placeholder {
        width: 20%;
        height: 32px;
        display: inline-block;
        padding: 0;
        padding-top: 41px;
        z-index: 1;
        bottom: 0;
        top: initial;
        right: initial;
        font-size: 11pt;
        background-size: 24px 24px;
        background-repeat: no-repeat;
        background-position-y: center;
        background-position-x: 10px;
        background-color: #ffffff;
        cursor: pointer;
        position: absolute;
        text-align: center
    }

    #create-route-placeholder-one {
        left: 40%;
    }

    #create-route-placeholder-two {
        left: 60%;
    }

    .standardToolbar-gridRef {
        left: 0% !important;
    }

    .standardToolbar-help {
        left: 20% !important;
    }

    .standardToolbar-close {
        left: 80% !important;
        bottom: 0px !important;
    }

    .standardToolbar-gridRef-popup {
        right: 62px;
        top: 329px;
    }

    .standardToolbar-style-popup {

    }

    #tools-button {
        left: 20px;
        bottom: 20px;
        cursor: pointer;
        position: absolute;
        margin-top: 2px;
        width: 48px;
        height: 48px;
        border-radius: 30px;
        background: url(../images/tools-icon.png) no-repeat center center / 30px;
        background-color: #323232;
    }

    #tools-button:hover {
        background-color: #6d6d6d;
    }

    #create-route-draw {
        left: 20% !important;
        width: 20%;
        height: 32px;
        display: inline-block !important;
        padding: 0px;
        padding-top: 41px;
        z-index: 1;
        bottom: 72px !important;
        top: initial !important;
        right: initial !important;
    }

    #create-route-delete {
        left: 40% !important;
        width: 20%;
        height: 32px;
        display: inline-block !important;
        padding: 0px;
        padding-top: 41px;
        z-index: 1;
        bottom: 72px !important;
        top: initial !important;
        right: initial !important;
    }

    #create-route-undo {
        left: 60% !important;
        width: 20%;
        height: 32px;
        display: inline-block !important;
        padding: 0px;
        padding-top: 41px;
        z-index: 1;
        bottom: 72px !important;
        top: initial !important;
        right: initial !important;
    }

    #create-route-style {
        left: 80% !important;
        width: 20%;
        height: 32px;
        display: inline-block !important;
        padding: 0px;
        padding-top: 41px;
        z-index: 2;
        bottom: 0px !important;
        top: initial !important;
        right: initial !important;

    }
}

@media only screen and (min-width: 721px) and (max-width: 1050px) {

    #create-route-close-toolbar {
        display: none;
    }

    #create-route-save {
        top: 246px;
        right: 153px;
    }

    #create-route-cancel {
        right: 90px;
        top: 246px;
    }

    #duplicate-route {
        right: 216px;
        top: 246px;
    }

    #create-route-style-container {
        right: 92px;
        top: 329px;
    }

    #create-route-snap {
        right: 342px;
        top: 165px;
    }

    #create-route-draw {
        right: 279px;
        top: 165px;
    }

    #create-route-delete {
        right: 216px;
        top: 165px;
    }

    #create-route-undo {
        right: 153px;
        top: 165px;
    }

    #create-route-style {
        right: 90px;
        top: 165px;
    }

    #create-route-snap.expand {
        top: 120px !important;
        transition: 0.5s linear all;
    }

    #create-route-draw.expand {
        top: 120px !important;
        transition: 0.5s linear all;
    }

    #create-route-delete.expand {
        top: 120px !important;
        transition: 0.5s linear all;
    }

    #create-route-undo.expand {
        top: 120px !important;
        transition: 0.5s linear all;
    }

    #create-route-style.expand {
        top: 90px !important;
        transition: 0.5s linear all;
    }

    #create-route-cancel.expand {
        top: 197px !important;
        transition: 0.5s linear all;
    }

    #create-route-save.expand {
        top: 197px !important;
        transition: 0.5s linear all;
    }

    #create-route-grid-popup.expand {
        top: 277px !important;
    }

    #create-route-style-container.expand {
        top: 277px !important;
    }
}

/*create-route-save*/
#create-route-save:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -428px -794px / 633px;
    left: 50%;
    top: 13px;
    margin-left: -11px;
}

#create-route-save.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-save:hover,
    #create-route-save.active:hover,
    #create-route-save:hover {
        background-color: #f8f8f8;
    }
}

#create-route-save.active:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -428px -826px / 633px;
}

#create-route-save.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -428px -858px / 633px !important;
}

/*************** END ***************/

/*create-route-cancel*/
#create-route-cancel:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -480px -801px / 633px;
    left: 50%;
    top: 16px;
    margin-left: -8px;
}

#create-route-cancel.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-cancel.active:hover,
    #create-route-cancel:hover {
        background-color: #f8f8f8;
    }
}

#create-route-cancel.hover:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -480px -833px / 633px;
}

#create-route-cancel.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -480px -865px / 633px !important;
}

/*************** END ***************/

/*create-route-snap*/
#create-route-snap:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -19px -795px / 633px;
    left: 50%;
    top: 13px;
    margin-left: -11px;
}

#create-route-snap.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

#create-route-snap.disabled {
    background-color: #ffffff !important;
    color: #000000 !important;
}

@media (hover: hover) {
    #create-route-snap:hover,
    #create-route-snap.active:hover,
    #create-route-snap:hover {
        background-color: #f8f8f8;
    }
}

#create-route-snap.active:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -19px -827px / 633px;
}

#create-route-snap.disabled-by-map:before,
#create-route-snap.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -19px -859px / 633px !important;
}

/*************** END ***************/

/*create-route-draw*/
#create-route-draw:before {
    content: '';
    position: absolute;
    width: 36px;
    height: 19px;
    background: url(../images/main/general-interface-icons.png) no-repeat -50px -798px / 633px;
    left: 43%;
    top: 13px;
    margin-left: -11px;
}

#create-route-draw.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-draw:hover,
    #create-route-draw.active:hover,
    #create-route-draw:hover {
        background-color: #f8f8f8;
    }
}

#create-route-draw.active:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -50px -830px / 633px;
}

#create-route-draw.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -50px -862px / 633px !important;
}

/*************** END ***************/

/*create-route-delete*/
#create-route-delete:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -109px -798px / 633px;
    left: 50%;
    top: 15px;
    margin-left: -10px;
}

#create-route-delete.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-delete:hover,
    #create-route-delete.active:hover,
    #create-route-delete:hover {
        background-color: #f8f8f8;
    }
}

#create-route-delete.active:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -109px -830px / 633px;
}

#create-route-delete.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -109px -862px / 633px !important;
}

/*************** END ***************/

/*create-route-undo*/
#create-route-undo:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -152px -794px / 633px;;
    left: 50%;
    top: 13px;
    margin-left: -13px;
}

#create-route-undo.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-undo:hover,
    #create-route-undo.active:hover,
    #create-route-undo:hover {
        background-color: #f8f8f8;
    }
}

#create-route-undo.active:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -152px -826px / 633px;;
}

#create-route-undo.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -152px -858px / 633px !important;
}

/*************** END ***************/

/*create-route-style*/
#create-route-style:before {
    content: '';
    position: absolute;
    width: 28px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -195px -794px / 633px;;
    left: 50%;
    top: 13px;
    margin-left: -13px;
}

#create-route-style.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-style:hover,
    #create-route-style.active:hover,
    #create-route-style:hover {
        background-color: #f8f8f8;
    }
}

#create-route-style.active:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -195px -826px / 633px;;
}

#create-route-style.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -195px -858px / 633px;
!important;
}

/*************** END ***************/

/*create-route-marker*/
#create-route-marker:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -152px -330px / 633px;;
    margin-top: -27px;
    margin-left: 14px;
}

#create-route-marker.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-marker.active:hover,
    #create-route-marker:hover {
        background-color: #f8f8f8;
    }
}

#create-route-marker.hover:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -300px -852px / 633px;;
}

#create-route-marker.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -300px -882px / 633px;
!important;
}

/*************** END ***************/

/*create-route-gridRef*/
#create-route-grid:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -243px -795px / 633px;
    left: 50%;
    top: 13px;
    margin-left: -14px;
}

#create-route-grid.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-grid:hover,
    #create-route-grid.active:hover,
    #create-route-grid:hover {
        background-color: #f8f8f8;
    }
}

#create-route-grid.active:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -243px -827px / 633px;
}

#create-route-grid.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -243px -859px / 633px !important;
}

/*************** END ***************/

/*create-route-expand*/
#create-route-expand:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -290px -794px / 633px;
    left: 50%;
    top: 13px;
    margin-left: -11px;
}

#create-route-expand.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-expand:hover,
    #create-route-expand.active:hover,
    #create-route-expand:hover {
        background-color: #f8f8f8;
    }
}

#create-route-expand.active:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -290px -826px / 633px;
}

#create-route-expand.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -290px -858px / 633px !important;
}

#main-top-bar-expand {
    display: none;
}

@media only screen and (max-width: 720px) {

    #main-top-bar-expand {
        content: '';
        display: block;
        width: 26px;
        height: 24px;
        background: url(../images/main/general-interface-icons.png) no-repeat -209px -572px / 460px;
        position: absolute;
        right: 20px;
        top: 9px;
        cursor: pointer;
        z-index: 1000;
    }

    #main-top-bar-expand.expand {
        content: '';
        display: block;
        width: 30px;
        height: 30px;
        background: url(../images/main/general-interface-icons.png) #444444 no-repeat -205px -618px / 460px;
        position: absolute;
        right: 20px;
        top: 18px;
        cursor: pointer;
        z-index: 1000;
    }

    #main-top-bar-expand.flyover {
        display: none;
    }

}

/*************** END ***************/

/*create-route-print*/
#create-route-print:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -382px -794px / 633px;
    left: 50%;
    top: 13px;
    margin-left: -11px;
}

#create-route-print.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-print:hover,
    #create-route-print.active:hover,
    #create-route-print:hover {
        background-color: #f8f8f8;
    }
}

#create-route-print.active:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -382px -826px / 633px;
}

#create-route-print.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -382px -858px / 633px !important;
}

/*************** END ***************/

/*create-route-help*/
#create-route-help:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    background: url(../images/main/general-interface-icons.png) no-repeat -342px -794px / 633px;
    left: 50%;
    top: 12px;
    margin-left: -13px;
}

#create-route-help.active {
    background-color: #f8f8f8;
    color: #0067B0;
}

@media (hover: hover) {
    #create-route-help:hover,
    #create-route-help.active:hover,
    #create-route-help:hover {
        background-color: #f8f8f8;
    }
}

#create-route-help.active:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -342px -826px / 633px;
}

#create-route-help.disabled:before {
    background: url(../images/main/general-interface-icons.png) no-repeat -342px -858px / 633px !important;
}

/*************** END ***************/
.dpn-directions {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 349px;
    margin-left: -57px;
    padding-right: 40px;
}

.dpn-directions li {
    min-height: 45px;
    padding: 0;
    margin: 0;
    padding-top: 8px;
    padding-bottom: 2px;
    font-size: 12pt;
    background-repeat: no-repeat;
    background-position: 40px 6px;
    padding-left: 85px;
    cursor: pointer;
}

.dpn-directions li.dpn-hazard {
    background-image: url(../images/abresults/hazards/hazard-s.png);
    background-position: 44px 4px;
    background-repeat: no-repeat;
}

.dpn-directions li.active,
.dpn-directions li.active:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.dpn-directions li:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dpn-directions-3 {
    background-image: url(../images/abresults/TurnLeft.png);
}

.dpn-directions-2 {
    background-image: url(../images/abresults/TurnLeft.png);
}

.dpn-directions-1 {
    background-image: url(../images/abresults/BearLeft.png);
}

.dpn-directions0 {
    background-image: url(../images/abresults/Continue.png);
}

.dpn-directions1 {
    background-image: url(../images/abresults/BearRight.png);
}

.dpn-directions2 {
    background-image: url(../images/abresults/TurnRight.png);
}

.dpn-directions3 {
    background-image: url(../images/abresults/TurnRight.png);
}

.tooltipster-default {
    border: 2px solid #fff;
    background: #fff;
    color: #000;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
}

.tooltipster-default .tooltipster-content {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 16px;
    padding: 12px 15px !important;
    overflow: hidden;
}

.saveParentContainer {
    height: 100%;
}

#saveParent {
    width: 334px;
    float: left;
    height: calc(100% - 143px);
}

@media only screen and (max-width: 1024px) {
    #print-preview {
        left: -1000px !important;
    }
}

#print-preview {
    position: absolute;
    bottom: 20px;
    background: #fff;
    padding: 10px 10px 0 10px;
    left: 357px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

#print-preview.active {
    bottom: -316px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

#print-preview.landscape.active {
    bottom: -233px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

#print-preview-toggle {
    background: #fff;
    padding: 10px 35px 10px 15px;
    display: block;
    width: 40px;
    top: -40px;
    left: 0;
    position: absolute;
}

#print-preview-toggle:after {
    content: "Hide";
}

#print-preview-toggle.active:after {
    content: "Show";
}

#print-preview-toggle:before {
    content: "";
    position: absolute;
    width: 13px;
    display: block;
    height: 9px;
    float: right;
    top: 16px;
    right: 18px;
    z-index: 0;
    background: url(../images/drop-arrow.png) no-repeat 0 0 / 13px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

#print-preview-toggle.active:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#print-preview-map {
    width: 198px;
    height: 281px;
    position: relative;
}

#print-preview-map.landscape {
    width: 281px;
    height: 198px;
}

#print-preview-description {
    line-height: 36px;
    margin-top: -11px;
    text-align: center;
}

#print-preview-map-disable-interaction {
    width: 178px;
    height: 261px;
    border: 10px solid #fff;
    position: absolute;
    z-index: 1;
}

#print-preview-map-disable-interaction.landscape {
    width: 261px;
    height: 178px;
}

#print-preview-map > div {
    position: absolute !important;
    background-color: #ebebe4;
    left: 0;
    top: 0;
}

/**********************Expand******************/

#main-top-bar.expand {
    visibility: hidden;
    transition: 0.8s linear all;
    opacity: 0;
}

.toolbarButton.expand {
    top: 12px !important;
    transition: 0.5s linear all;
}

.SidePane.expand {
    visibility: hidden;
    transition: 0.8s linear all;
    opacity: 0;
}

#Window_1_Content.expand {
    position: initial;
}

#create-route-grid.expand {
    top: 12px;
}

@media only screen and (min-width: 721px) {
    #zoom-slider.expand {
        top: 12px !important;
        transition: 0.5s linear all;
    }
}

.context-help-content {
    width: 280px;
    height: 100%;
    float: left;
}

.context-help-content-title {
    font-weight: 400;
    margin-bottom: 10px;
    float: left;
    width: 100%;
}

.context-help-close {
    position: relative;
}

.context-help-subtitle {
    clear: both;
    width: 100%;
    float: left;
}

.context-help-close:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 30px;
    background: url(../images/main/general-interface-icons.png) transparent no-repeat -65px 13px / 633px;
    margin-top: -16px;
    z-index: 1;
    right: 0px;
}

.context-help-index-items span {
    clear: both;
    float: left;
    line-height: 22px;
}

.context-help-discover-routes-icons div {
    float: left;
    margin-top: 10px;
    padding-left: 60px;
}

.context-help-discover-routes-icons div:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 1;
    left: 10px;
}

.context-help-discover-routes-icons div:nth-child(1):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -1px -307px / 633px;
    width: 60px;
}

.context-help-discover-routes-icons div:nth-child(2):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -18px -151px / 633px;
    left: 20px;
}

.context-help-discover-routes-icons div:nth-child(3):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -62px -151px / 633px;
    left: 20px;
}

.context-help-discover-routes-icons div:nth-child(4):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -105px -146px / 633px;
    left: 20px;
}

.context-help-discover-routes-icons div:nth-child(5):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -80px -248px / 633px;
    width: 60px;
}

.context-help-discover-routes-icons {
    margin-bottom: 10px;
    float: left;
}

.context-help-create-route-icons > div {
    float: left;
    margin-top: 20px;
    padding-left: 35px;
}

.context-help-create-route-icons > div:before {
    content: '';
    position: absolute;
    width: 27px;
    height: 30px;
    z-index: 1;
    margin-top: 6px;
    left: 13px;
}

.context-help-create-route-icons > div:nth-child(1):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -18px -795px / 633px;
}

.context-help-create-route-icons > div:nth-child(2):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -62px -798px / 633px;
}

.context-help-create-route-icons > div:nth-child(3):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -111px -789px / 633px;
}

.context-help-create-route-icons > div:nth-child(4):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -154px -796px / 633px;
}

.context-help-create-route-icons > div:nth-child(5):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -195px -795px / 633px;
}

.context-help-create-route-icons > div:nth-child(6):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -244px -795px / 633px;
}

.context-help-create-route-icons > div:nth-child(7):before {
    background: url(../images/main/general-interface-icons.png) no-repeat -288px -788px / 633px;
}

.context-help-create-route-help-link {
    clear: both;
    float: left;
    margin-top: 20px;
}

.context-help-ncn-lines > div {
    display: block;
    width: 210px;
    padding-left: 40px;
}

.context-help-ncn-lines > div:before {
    content: '';
    margin-top: 3px;
    position: absolute;
    width: 30px;
    border-top-width: 8px;
    border-top-style: solid;
    z-index: 1;
    left: 11px;
}

.context-help-ncn-lines > div:nth-child(1):before {
    border-top-color: #FBB764;
}

.context-help-ncn-lines > div:nth-child(2):before {
    margin-top: 6px;
    border-top-width: 3px;
    border-top-style: dashed;
    border-top-color: #FBB764;
}

.context-help-ncn-lines > div:nth-child(3):before {
    border-top-color: #253773;
}

.context-help-ncn-lines > div:nth-child(4):before {
    margin-top: 6px;
    border-top-width: 3px;
    border-top-color: #253773;
    border-top-style: dashed;
}

.context-help-ncn-lines > div:nth-child(5):before {
    border: 1px solid white;
    width: 17px;
    height: 17px;
    background-color: red;
    content: '6';
    text-align: center;
    color: white;
    box-shadow: 0 0 3px 1px darkgrey;
    font-weight: 600;
}

.dpn-paths-description {
    margin-top: 10px;
    margin-bottom: 13px;
    max-width: 260px;
    float: left;
}

.tooltipster-fullscreen .tooltipster-content {
    padding: 0 !important;
}

.context-help-content .nano-content {
    padding: 10px;
}

.context-help-gs-area {
    padding-left: 20px;
}

.context-help-gs-area > div:before {
    content: '';
    margin-top: 2px;
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 1;
    left: 11px;
    border: 1px solid #000;
    background-color: #00aeef;
}

.context-help-gs-area > div:nth-child(1):before {
    background-color: #52B6AC;
}

.context-help-gs-area > div:nth-child(2):before {
    background-color: #FDB657;
}

.context-help-gs-area > div:nth-child(3):before {
    background-color: #84C687;
}

.context-help-gs-area > div:nth-child(4):before {
    background-color: #FEDC5E;
}

.context-help-gs-area > div:nth-child(5):before {
    background-color: #DCE67C;

}

.context-help-gs-area > div:nth-child(6):before {
    background-color: #B89E97;
}

.context-help-gs-area > div:nth-child(7):before {
    background-color: #8682C2;
}

.context-help-gs-area > div:nth-child(8):before {
    background-color: #02b19f;
}

.context-help-gs-area > div:nth-child(9):before {
    background-color: #9faed0;
}

.context-help-gs-area > div:nth-child(10):before {
    background-color: #fcd6af;
}

@media only screen and (min-width: 0px)and (max-width: 730px) {

    .tooltipster-fullscreen {
        opacity: 1;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        position: relative;
        left: 0 !important;
    }

    .tooltipster-fullscreen .tooltipster-box {
        margin-top: 0 !important;
    }

    .tooltipster-fullscreen .nano {
        position: absolute;
        max-height: inherit !important;
        height: 100% !important;
        width: 100% !important;
        overflow: hidden;

    }

}

.elevation-model {
    background: #ffffff;
}

.elevation-model > div {
    padding-bottom: 20px;
    padding-top: 12px;
    text-align: center;
}

#elevation-model-big-container {
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 350px;
    height: 150px;
    background-color: #fff;
    opacity: 0;
    transition: 0.3s ease all;
}

@media only screen and (max-width: 720px) {
    #elevation-model-big-container {
        display: none !important;;
    }
}

#elevation-model-big {
    clear: both;
}

#elevation-model-big-container.offscreen {
    bottom: -250px;
}

#elevation-model-big-container.active {
    bottom: -110px;
}

.elevation-model-description > div {
    float: left;
    margin: 10px;
    margin-bottom: 0;
}

.elevation-model-description > div:first-child {
    margin-top: 6px;
}

.elevation-model-description > div:last-child {
    float: right;
    position: relative;
    margin-right: 20px;
}

#elevation-model-toggle:before {
    content: "";
    position: absolute;
    width: 13px;
    display: block;
    height: 9px;
    float: right;
    top: 7px;
    right: 0;
    z-index: 0;
    background: url(../images/drop-arrow.png) no-repeat 0 0 / 13px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

#elevation-model-toggle:after {
    padding-right: 20px;
    content: "Hide";
}

#elevation-model-toggle.active:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#elevation-model-toggle.active:after {
    content: "Show";
}

.elevation-model-description-time,
.elevation-model-description-distance {
    min-width: 90px;
}

.elevation-model-description-activity {
    background: url(../images/main/general-interface-icons.png) -17px -218px / 633px;
    width: 28px;
    height: 25px;
}

.nvtooltip {
    display: none !important;
}

#create-route-elevation-model-info {
    margin-top: -25px;
    padding-bottom: 5px;
    text-align: center;
}

#route-details-elevtion-total-ascent-container {
    margin-top: 6px;
    margin-bottom: 20px;
}

#route-details-elevtion-lowest {
    margin-right: 16px;
}

.onscreen-controls {
    margin-top: 15px;
}

.onscreen-controls div {
    line-height: 30px;
    padding-left: 40px;
    position: relative;
}

.onscreen-controls > div:before {

    width: 30px;
    height: 30px;
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
}

.onscreen-controls > div:nth-child(1):before {
    background: url(../images/3d/3D_view.png) #444444 no-repeat 0 0 / 30px;
}

.onscreen-controls > div:nth-child(2):before {
    background: url(../images/3d/2D_view.png) #444444 no-repeat 0 0 / 30px;
}

.onscreen-controls > div:nth-child(3):before {
    background: url(../images/3d/standard_view.png) #444444 no-repeat 0 0 / 30px;
}

.onscreen-controls > div:nth-child(4):before {
    background: url(../images/3d/preview_pan.png) #444444 no-repeat 0 0 / 30px;
}

.onscreen-controls > div:nth-child(5):before {
    background: url(../images/3d/HDbtn.png) #444444 no-repeat 0 0 / 30px;
}

.onscreen-controls-rotate {
    width: 260px;
    margin-top: 10px;
}

.onscreen-controls-rotate > div {
    float: left;
    width: 80px;
    line-height: 60px;
}

.onscreen-controls-rotate > div:nth-child(1) {
    text-align: right;
    padding-right: 20px;
}

.onscreen-controls-rotate > div:nth-child(3) {
    text-align: left;
    padding-left: 20px;
}

.onscreen-controls-rotate > div:nth-child(2) {
    background: url(../images/3d/controls/3d_Viewer.png) no-repeat 0 0 / 60px;
    width: 60px;
    height: 60px;
}

.onscreen-controls-mouse > div {
    padding-left: 25px;
    margin-top: 10px;
    min-height: 30px;
    line-height: 20px;
}

.onscreen-controls-mouse > div:nth-child(1) {
    background: url(../images/3d/controls/mouse_lmb.png) no-repeat 0 0 / 15px;
}

.onscreen-controls-mouse > div:nth-child(2) {
    background: url(../images/3d/controls/mouse_mmb.png) no-repeat 0 0 / 15px;
}

.onscreen-controls-title {
    display: inline-block;
}

.onscreen-controls-keys {
    text-align: center;
}

.onscreen-controls-keys > div {
    display: inline-block;
    font-size: 12px;
    width: 62px;
    text-align: center;
    padding-top: 48px;
    height: 30px;
}

.onscreen-controls-keys-row-1 > div:nth-child(1) {
    background: url(../images/3d/controls/left_arrow.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-1 > div:nth-child(2) {
    background: url(../images/3d/controls/up_arrow.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-1 > div:nth-child(3) {
    background: url(../images/3d/controls/down_arrow.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-1 > div:nth-child(4) {
    background: url(../images/3d/controls/right_arrow.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-2 > div:nth-child(1) {
    background: url(../images/3d/controls/Wletterkey.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-3 > div:nth-child(1) {
    background: url(../images/3d/controls/Aletterkey.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-3 > div:nth-child(2) {
    background: url(../images/3d/controls/Sletterkey.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-3 > div:nth-child(3) {
    background: url(../images/3d/controls/Dletterkey.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-4 > div:nth-child(1) {
    background: url(../images/3d/controls/Zletter.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-4 > div:nth-child(2) {
    background: url(../images/3d/controls/Cletter.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-5 > div:nth-child(1) {
    background: url(../images/3d/controls/Qletter.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-5 > div:nth-child(2) {
    background: url(../images/3d/controls/Eletter.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-6 > div,
.onscreen-controls-keys-row-7 > div {
    padding-top: 14px;
}

.onscreen-controls-keys-row-6 > div:nth-child(3),
.onscreen-controls-keys-row-7 > div:nth-child(3) {
    width: 100%;
    padding-top: 0;
}

.onscreen-controls-keys-row-6 > div:nth-child(1) {
    background: url(../images/3d/controls/Ctrl.png) no-repeat center 0 / 44px;
}

.onscreen-controls-keys-row-6 > div:nth-child(2) {
    background: url(../images/3d/controls/mouse_lmb.png) no-repeat center 12px / 15px;
}

.onscreen-controls-keys-row-7 > div:nth-child(1) {
    background: url(../images/3d/controls/shftkey.png) no-repeat center 0 / 54px;
}

.onscreen-controls-keys-row-7 > div:nth-child(2) {
    background: url(../images/3d/controls/mouse_lmb.png) no-repeat center 12px / 15px;
}

.context-help-gs-entry-1 {
    background: url(../images/legend/greenspaces-pedestrian.png) no-repeat -38px -8px / 90px;
    padding-left: 20px;
}

.context-help-gs-entry-2 {
    background: url(../images/legend/greenspaces-vehicle.png) no-repeat -38px -8px / 90px;
    padding-left: 20px;
}

.no-routes-found {
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    color: #6d6d6d;
    margin-bottom: 30px;
    margin-top: 30px;
}

#preferences-3d-container > div {
    margin-bottom: 20px;
}

#preferences-3d-container > div > div {
    padding-top: 10px;
    margin-left: 30px;
    margin-right: 20px;
}

#preferences-3d-container > div > div:first-of-type {
    margin-bottom: 20px
}

#cesiumContour {
    width: 50px;
}

#preferences-3d-container > div > div > div {
    display: inline-block;
    vertical-align: middle;
    width: 130px;
}

#preferences-3d-container > div > div > div .nice-select {
    width: 130px;
}

#preferences-3d-container > div > div > div .nice-select ul {
    width: 128px;
}

#preferences-3d-container {
    display: inline-block;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 20px;
    width: 100%;
}