.createNewRoutePanel {
    background-color: #f8f8f8;
    height: 100%;
    padding-top: 0;
}

.routeSideParent {
    height: 100%;
}

#routeABResultsParent .nano {
    height: calc(100% - 60px);
}

.createNewRoutePanel .nano {
    height: calc(100% - 330px);
}

@media only screen and (max-width: 721px) {
    .createNewRoutePanel .nano {
        height: calc(100% - 380px);
    }
}

.POIListPanel {
    height: calc(100% - 50px) !important;
    margin-top: 50px;
}

.printPanel {
    height: calc(100% - 110px) !important;
}

#print-panel-option-fit,
#print-panel-option-media,
#print-panel-option-route {
    width: 293px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 10px;
}

#routeEditExportImportWrapper {
    width: 100%;
    height: 75px;
    background: #fff;
    text-align: center;
    clear: both;
}

#routeEditExportImportWrapper > div {
    margin: 10px 20px;
    width: 75px;
    height: 55px;
    background: url("../images/main/general-interface-icons.png") no-repeat scroll -75px -400px;
    display: inline-block;
    cursor: pointer;
}

#routeEditExportImportWrapper > div#routeEditImport {
    background: url("../images/main/general-interface-icons.png") no-repeat scroll -500px -400px;
}

#routeEditExportImportWrapper .disabled {
    opacity: 0.5;
    cursor: default !important;
}

.createRouteTotalDistanceAndTime {
    height: 64px;
    background-color: #fff;
}

.routeLRSmallMargin,
.routeBSmallMargin {
    margin-left: 11px;
    margin-right: 11px;
}

.routeBSmallMargin {
    margin-bottom: 5px
}

#discRouteTitle {
    margin-bottom: 30px
}

.discRouteCount {
    font-weight: 400
}

#saveRouteTitle {
    font-weight: 400;
    font-size: large;
}

#saveRouteRating {
    font-size: 18px;
    margin-top: 20px;
}

#saveRouteNameInput {
    margin-top: 10px;
}

#saveRouteNoteInput {
    margin-top: 10px;
    margin-bottom: 30px;
    cursor: auto;
    width: 250px;
    padding: 10px;
    border: 1px solid #ebebeb;
    font: normal normal normal 13pt 'Source Sans Pro', sans-serif;
}

#saveRouteNameInputCount {
    font-size: 15px;
    margin-bottom: 5px;
    text-align: right;
    margin-right: 7px;
    font-weight: 300;
}

#saveRouteNoteInputCount {
    font-size: 15px;
    margin-bottom: 5px;
    text-align: right;
    margin-right: 7px;
}

#saveRouteImage {
    margin-top: 15px;
    font-size: 18px;
}

#saveRouteActivity {
    font-size: 18px
}

#saveRouteActivityForm {
    font-size: 18px
}

#saveRouteDifficulty {
    font-size: 18px
}

#saveRouteBtn {
    width: 334px;
    height: 60px;
    line-height: 60px;
    background-color: #f8f8f8;
    color: #00aeef;
    text-align: center;
    float: left;
}

#saveRouteBtn:hover {
    background-color: #ebebeb;
}

.saveRoutePanel {
    padding-bottom: 0 !important;
}

#saveRouteExtraSave {
    cursor: pointer;
    color: #3596d2;
    position: absolute;
    margin-top: -70px;
    margin-left: 258px;
}

#saveRouteImageContainer {
    font-weight: 400
}

#saveRouteRatingContainer {
    font-weight: 400
}

.saveRouteAddImage {
    margin-top: 5px;
    margin-bottom: 5px;
}

.saveRouteAddImageBtn {
    display: inline-block;
    margin-left: 5px;
    margin-top: 10px;
}

.saveRouteAddImageImgCreate {
    margin-top: 5px;
    float: left;
    height: 80px;
    width: 145px;
}

.saveRouteAddImageImgSave {
    margin-top: 5px;
    width: 284px;
}

#saveRouteWell {
    text-align: center
}

.saveRouteSectionTitle {
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 10px;
}

.addImageBtn {
    font-size: 18px;
    color: #3596d2;
    text-align: center;
    cursor: pointer;
}

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

/*             RouteDetails           */

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

#routeHeader {
    position: relative;
    text-align: center;
    padding-right: 100px;
    padding-left: 109px;
    margin-top: 27px;
    margin-right: 18px;
    margin-bottom: 30px;
}

#routeEditButton {
    position: absolute;
    margin-right: 0;
    text-align: right;
    float: right;
    margin-top: 9px;
    color: #3596d2;
    left: 281px;
    top: 9px;
}

.routeDetailRating,
.routeDetailRatingAlt {
    position: relative;
    width: 112px;
    text-align: right;
    margin-top: -18px;
    font-size: 15px;
    padding-right: 18px;
}

#routePartnerImageDiv {
    min-height: 37px;
    float: right;
    right: 18px;
    top: 18px;
    position: absolute;
    display: none;
}

#routeDetailName {
    margin-bottom: 5px;
    padding-right: 20px;
    padding-left: 20px;
    max-height: 140px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0;
    font: normal normal normal 15pt 'OS Gill Sans Regular', sans-serif;
    margin-left: 10px;
    margin-right: 10px;
}

.routeDetailBranding {
    display: inline-block;
    padding: 0 20px;
}

.routeDetailBranding span {
    margin-top: 14px;
    margin-left: 20px;
    float: left;
}

.route-details-branding-logo {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    float: left;
}

.route-detail-branding-tooltip-link {
    display: inline-block;
    float: right;
    margin-top: 10px;
}

.route-detail-branding-tooltip-title {
    font-size: 18px;
    float: left;
    margin-bottom: 10px;
}

.route-detail-branding-tooltip-content {
    float: left;
}

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

#routeDetailName h1 {
    all: inherit;
    margin: 0;
    padding: 0;
    font: normal normal normal 15pt 'OS Gill Sans Regular', sans-serif;
}

#routeDetailNote {
    width: 290px;
    text-align: left;
    padding-bottom: 5px;
    margin-left: 20px;
    line-height: 24px;
    color: #000000;
    overflow: hidden;
    font-size: 16px;
    font-family: 'Source Sans Pro', sans-serif;
}

#routeDetailNote h2 {
    all: inherit;
    font-size: 16px;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    white-space: pre-wrap;
}

#routeMoreButton {
    text-align: left;
    cursor: pointer;
    color: #3596d2;
    margin-bottom: 20px;
    margin-left: 20px;
}

#routeDetailDiff {
    width: 80px;
    height: 15px;
    padding: 3px;
    text-align: center;
    font-size: 15px;
    margin-top: 41px;
    margin-left: 18px;
    margin-bottom: 11px;
}

#routeDetailsLeft {
    width: 294px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    float: left;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 20px;
}

#routeDetailPart {
    text-align: center;
    width: 305px;
}

#routeDetailDist {
    float: left;
    margin-top: 16px;
    font-size: 14pt;
    width: 66px;
}

#routeDetailDur {
    float: left;
    margin-top: 16px;
    font-size: 14pt;
    text-align: center;
    margin-left: 25px;
}

#routeDetailType {
    width: 35px;
    margin-top: 4px;
    float: left;
}

#routeDetailRight {
    width: 100%;
    position: absolute;
    text-align: right;
    vertical-align: middle;
    bottom: 0;
    right: 18px;
    display: none;
}

#routeDetailSurf {
    display: block
}

#routeButtons {
    width: 320px;
    padding-bottom: 20px;
    margin-left: 14px;
    display: inline-block;
}

#routeButtons div:before {
    display: block;
    font-size: 14px;
    color: #333;
    margin-top: 36px;
    margin-right: 9px;
    white-space: pre-line;
}

#routeDetailExportRoute {
    background: url(../images/main/route-details/export.png) no-repeat 19px 7px / 28px;
    width: 75px;
    height: 55px;
}

#routeStarRate {
    padding-left: 17px;
    width: 290px;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 10px;
}

#routeDetailExportRoute:before {
    content: "Export\AGPX";
}

#routeDetailToRoute {
    background: url(../images/main/route-details/directions.png) no-repeat 20px 7px / 27px;
    width: 75px;
    height: 55px;
}

#routeDetailFavourite {
    background: url(../images/main/route-details/fav-not-selected.png) no-repeat 20px 5px / 27px;
    width: 75px;
    height: 55px;
}

#routeDetailFavourite:before {
    content: "Add to favourites";
}

#routeDetailFavourite.active {
    background: url(../images/main/route-details/fav-selected.png) no-repeat 18px 3px / 31px;
    width: 75px;
    height: 55px;
}

#routeDetailFavourite.active:before {
    content: "Added to favourites";
}

#routeDetailWeather {
    background: url(../images/main/general-interface-icons.png) no-repeat -159px -449px / 633px;
    width: 55px;
    height: 12px;
    margin-right: 0;
    margin-top: 17px;
    float: right;
}

#routeDetailShare {
    background: url(../images/main/route-details/share.png) no-repeat 20px 6px / 27px;
    width: 75px;
    height: 55px;
    margin-right: 0;
}

#routeDetailShare:before {
    content: "Send and share";
}

#routeDetailFly1,
#routeDetailFly2 {
    background: url(../images/3d/flythrough@2x.png) no-repeat 22px 9px / 24px;
    width: 75px;
    height: 55px;
    margin-right: 0;
    margin-left: 6px;
}

#routeDetailFly1:before {
    content: "Cinematic";
}

#routeDetailFly2:before {
    content: "Start \A fly-through";
}

.routeDirectionButtons {
    text-align: center;
    display: block;
    padding-top: 3px;
    padding-bottom: 9px;
    float: left;
    width: 30px;
    height: 30px;
}

.routeDirectionButtons:hover {
    opacity: 0.8;
}

.routeShowSection {
    float: left;
    position: relative;
    width: 314px;
    color: #000000;
    padding-top: 20px;
    padding-bottom: 22px;
    padding-left: 20px;
    cursor: pointer;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.routeShowSection:before,
.routeShowSectionOn:before {
    content: "";
    position: absolute;
    width: 13px;
    display: block;
    height: 9px;
    float: right;
    top: 27px;
    right: 22px;
    z-index: 0;
    background: url(../images/drop-arrow.png) 0 0 / 13px no-repeat;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.routeShowSectionOn:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.routeDetailPoint {
    position: relative;
    padding-left: 9px;
    margin-left: 12px;
    width: 273px;
    background: url(../images/main/route-line.png) repeat-y;
}

.routeDetailPoint:first-of-type,
.routeDetailPoint:last-of-type {
    background: none;
    position: relative;
}

.routeDetailPointNameTerminater:after {
    background: url(../images/main/route-line.png) repeat-y;
}

.sidePaneBodyCreateNewRoutePanel {
    padding-top: 0 !important;
}

.routePointStart:after {
    content: "";
    position: absolute;
    top: 44px;
    width: 2px;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../images/main/route-line.png) repeat-y;
}

.routePointEnd:after {
    content: "";
    position: absolute;
    height: 12px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../images/main/route-line.png) repeat-y;
}

.my-routes-routeDetailRun {
    background: url(../images/main/general-interface-icons.png) no-repeat -50px -151px / 633px;
    width: 19px;
    height: 25px;
    content: '';
    position: absolute;
    left: 50%;
    top: 16px;
    margin-left: -79px;
}

.my-routes-routeDetailCycle {
    content: '';
    position: absolute;
    left: 50%;
    top: 16px;
    margin-left: -79px;
    background: url(../images/main/general-interface-icons.png) no-repeat -86px -151px / 633px;
    width: 28px;
    height: 25px;
}

.my-routes-routeDetailWalk {
    content: '';
    position: absolute;
    left: 50%;
    top: 16px;
    margin-left: -79px;
    background: url(../images/main/general-interface-icons.png) no-repeat -27px -151px / 633px;
    width: 14px;
    height: 25px;
}

.my-routes-routeDetailOther {
    content: '';
    position: absolute;
    left: 50%;
    top: 16px;
    margin-left: -79px;
    background: url(../images/main/general-interface-icons.png) no-repeat -59px -151px / 633px;
    width: 28px;
    height: 25px;
}

.routeDetailRun {
    content: '';
    margin-top: 8px;
    background: url(../images/main/general-interface-icons.png) no-repeat -68px -151px / 633px;
    width: 19px;
    height: 25px;
}

.routeDetailCycle {
    content: '';
    margin-top: 8px;
    background: url(../images/main/general-interface-icons.png) no-repeat -107px -151px / 633px;
    width: 28px;
    height: 25px;
}

.routeDetailWalk {
    content: '';
    margin-top: 8px;
    background: url(../images/main/general-interface-icons.png) no-repeat -27px -151px / 633px;
    width: 14px;
    height: 25px;
}

#routeDetailElevDiagCanvas {
    margin-left: -18px;
}

.routeDetailPointEnd {
    border-left: none;
    margin-bottom: 20px;
}

.routeDetailTerminator {
    border-left: 2px solid #3596d2;
    height: 26px;
    margin-left: 12px;
}

.routeDetailCanvas {
    float: left;
    margin-left: -20px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    width: 20px;
}

.routeDetailExtra {
    font-size: 11pt;
    margin-left: 16px;
    display: none;
}

.routeDetailPointName {
    margin-left: 16px;
    color: #000000;
    padding-top: 17px;
    padding-bottom: 3px;
    padding-right: 15px;
    background-position: right 22px;
    background-repeat: no-repeat;
    background-size: 13px;
    cursor: pointer;
}

.routeDetailPointName:before {
    content: "";
    position: absolute;
    width: 13px;
    display: block;
    height: 9px;
    float: right;
    top: 23px;
    right: 2px;
    z-index: 1;
    background: url(./../images/drop-arrow.png) 0 0 / 13px no-repeat;
    -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);
}

.createRouteShowSectionOn > .routeDetailPointName:before {
    -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);
}

.routeDetailPointNameTerminater {

}

.routeTypeTerminatorBullet {
    margin-top: 12px;
    border-radius: 27px;
    background-color: #00aeef;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 31px;
    margin-left: -8px;
    font-size: 12pt;
    color: #ffffff;
}

.routeSectionDiv {
    display: none;
    margin-right: 18px;
    height: 0;
}

#routeRouteCard,
#routeRouteCardEdit {
    margin-right: 0;
    margin-left: 0;
}

.routeSectionDivOn {
    height: auto;
    display: block;
}

#routeDetailElevDiag.routeSectionDiv {
    display: block;
    overflow: hidden;
}

#routeDetailElevDiag.routeSectionDivOn {
    display: block;
    overflow: auto;
}

.detailsSide {
    display: inline-block;
    width: 100px;
    font-weight: 300;
}

.routeDetailPointNote {
    margin-top: 18px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.routeDetailsOSGrid {
    font-weight: 400;
}

.routeDetailLat {
    font-weight: 400
}

.routeDetailLong {
    font-weight: 400
}

.routeLine {
    float: left;
    position: absolute;
    display: block;
    margin-left: -10px;
    height: 100%;
    width: 5px;
    border-left: 2px solid #3596d2;
}

#routeDetailStart {
    margin-top: 26px
}

.routeHideMe {
    display: none;
    border: none;
}

.routeDetailTerminator img {
    margin-right: 10px;
    margin-left: -7px;
    height: 16px;
    vertical-align: middle;
}

.routePointDot {
    float: left;
    margin-top: 13px;
    margin-left: -15px;
    height: 16px;
    width: 16px;
    vertical-align: middle;
}

.routePointDotMiddleNumber {
    border-radius: 27px;
    background-color: #00aeef;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 31px;
    margin-left: -8px;
    font-size: 12pt;
    color: #ffffff;
}

.routePointDotMiddle {
    background-color: #00aeef;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    border-radius: 20px;
    margin-left: 2px;
}

.routePointTerminator {
    margin-left: -16px;
    margin-top: 0;
}

.routePointTerminatorStart {
    margin-left: -16px;
    margin-top: 0;
}

.routePointTerminatorEnd {
    margin-top: 0;
}

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

/*               MyRoutes             */

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

#myRouteParent {
    height: 100%
}

#myRouteTitle {
    border-bottom: dashed 1px;
    font-size: large;
    font-weight: 400;
    margin-top: 10px;
    margin-right: 10px;
}

.myRouteOption {
    font-size: medium;
    margin-top: 10px;
    cursor: pointer;
}

.discoveredPrivate {
    height: 27px;
    width: 27px;
}

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

/*            DiscoverRoute           */

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

#discRouteHeader {
    text-align: center;
    padding-right: 50px;
    padding-left: 50px;
    margin-top: 27px;
    margin-right: 18px;
}

#discRouteTitle {
    line-height: 32px;
    font-weight: 400;
}

.discRouteFloatRight {
    float: right;
    color: #3596d2;
    margin-right: -32px;
    position: relative;
}

#discSelectRoute {
    margin-left: 18px;
    width: 100%;
    margin-right: 18px;
    margin-top: 10px;
}

#discSelectRouteTitle {
    margin: 10px 0 10px 0;
}

#discRouteMobile {
    display: none
}

#discSelectRouteOptions {
    margin-right: 36px;
    margin-bottom: 10px;
    height: auto;
}

#discSelectRouteType {
    margin: 4px auto 10px auto;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.discSelectRouteTypeObj {
    border: none;
    margin: 0;
    padding: 0;
    width: 57px;
}

#discSelectRouteDropDowns select {
    width: 100%;
    padding: 10px;
    color: #3596d2;
    font-size: 18px;
}

#discSelectDurationTitle {
    margin-top: -15px
}

#discSelectSortTitle {
    margin-top: -15px
}

#discoveredRouteListDiv {
    width: 100%
}

.discoveredRoutesList {
    display: block;
    overflow: hidden;
    margin-right: 11px;
}

#discRouteDetails {
    float: right;
    cursor: pointer;
    pointer-events: auto;
}

.discoveredListRoute {
    border: none;
    padding-left: 200px;
    padding-bottom: 30px;
    padding-top: 40px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.discoveredListRoute {
    border-top: 1px solid rgba(0, 0, 0, 0.05)
}

.discoveredListLeft {
    position: relative;
    float: left;
    margin-left: -198px;
    width: 182px;
    z-index: 100;
}

.discoveredListPartnerImage {
    position: relative;
    margin-right: 18px;
    z-index: 101;
    text-align: right;
}

/*.discoveredListDetails
{
    position:relative;
    width:100%;
	display: inline-block;
	font-size: 15px;
}
*/
.discoveredListDetails {
    position: absolute;
    display: inline-block;
    font-size: 15px;
    bottom: 34px;
    right: 0;
}

.discoveredListName {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    min-height: 45px;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 190px;
}

.discoveredListRating {
    position: relative;
    width: 100%;
    margin-bottom: 7px;
}

.discoveredListDiff {
    width: 80px;
    padding: 1px;
    text-align: center;
    font-size: 15px;
    margin-top: 6px;
}

.routeDiffLeisurely {
    padding: 0;
    border: 1px solid #2FAB62;
    color: #2FAB62;
}

.routeDiffModerate {
    padding: 0;
    border: 1px solid #F49C16;
    color: #F49C16;
}

.routeDiffChallenging {
    padding: 0;
    border: 1px solid #DB473B;
    color: #DB473B;
}

.discoveredListBottom {
    position: relative;
    padding-left: 20px;
    margin-bottom: 0;
}

.discoveredListType {
    width: 48px;
    height: 48px;
    margin-left: -48px;
    float: left;
}

.discoveredListType img {
    margin-top: 2px
}

.discoveredListBottomRight {
    position: relative;
    margin-bottom: 0;
    padding-top: 8px;
}

#discoveredListDist {
    width: 150px;
    margin-left: 5px;
    margin-top: 2px;
}

#discoveredListDur {
    width: 150px;
    margin-left: 5px;
    margin-top: 2px;
}

#discoveredListType {
    width: 150px;
    margin-left: 5px;
    margin-top: 2px;
}

#discoveredListSurf {
    width: 150px;
    margin-left: 5px;
    margin-top: 2px;
}

#discoveredListOther {
    font-size: 12px;
    margin-left: 10px;
    height: 89px;
    width: 90px;
    float: right;
}

#discoveredListMore {
    width: 80px;
    margin-left: 5px;
    margin-top: 5px;
    float: right;
    cursor: pointer;
}

#discPopupContent {
    height: auto;
    overflow: hidden;
}

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

/*             DiscoverMine           */

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

#myDiscRouteParent {
    height: 100%
}

#myDiscCreateRouteBtn {
    margin-left: 10px;
    margin-top: 10px;
    width: 290px;
}

#myDiscRoutesArea {
    margin-top: 10px
}

#myDiscRoutesAreaTitle {
    font-size: x-large;
    font-weight: 400;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    border-top: dashed 1px;
}

#myDiscRouteTrails {
    position: relative;
    padding-top: 9px;
    font-size: large;
    height: 35px;
    font-weight: 400;
    margin-top: 15px;
    margin-left: -1px;
    border: solid 1px;
    width: 320px;
}

#myDiscRouteTrailsList {
    height: 0;
}

#myDiscRouteDirs {
    position: relative;
    padding-top: 9px;
    font-size: large;
    height: 35px;
    font-weight: 400;
    margin-left: -1px;
    border: solid 1px;
    width: 320px;
}

#myDiscRouteDirsList {
    height: 0;
}

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

/*             Create Route           */

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

#createRouteTypeImage {
    float: left;
    width: 48px;
    height: 33px;
    padding-top: 0;
}

#createRouteImg {
    margin-left: 0;
    float: left;
    height: 80px;
    width: 80px;
}

#createRouteName {
    margin-top: 88px;
    margin-bottom: 18px;
    margin-right: 36px;
    font-size: 39px;
    width: 305px;
    max-height: 117px;
    overflow: hidden;
}

.innerDistance {
    font-weight: 400
}

.innerTime {
    font-weight: 400
}

#createRoutePoints {
    margin-left: 20px;
    display: inline-block;
    width: 300px;
}

#routecard-toggle-map-waypoints {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#createRouteElevDiag {
    height: 163px;
    width: 100%;
    background-color: #fff;
    text-align: center;
    padding-bottom: 25px;
}

.createRoutePointEditContainer input {
    width: 230px !important;
    border: 1px solid #ebebeb;
}

.createRoutePointEditContainer textarea {
    width: 228px !important;
    height: 60px !important;
    border: 1px solid #ebebeb;
}

#createRouteShare {
    float: left;
    margin-left: 0;
    margin-top: 10px;
    width: 83px;
}

#createRouteShare {
    float: left;
    margin-left: 0;
    margin-top: 10px;
    width: 290px;
}

.createRoutePoint {
    padding-left: 9px;
    border-left: 2px solid #3596d2;
    margin-left: 12px;
    margin-right: 36px;
    background-position: right 13px;
    background-repeat: no-repeat;
    background-image: url(../images/drop-arrow.png);
    cursor: pointer;
    height: 60px;
}

.createRoutePointName {
    font-size: 18px;
    margin-left: 16px;
    padding-top: 12px;
    padding-bottom: 2px;
    width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 20px;
}

.createRoutePointDistToNext {
    font-size: 12px;
    position: absolute;
    margin-top: -17px;
    margin-left: 57px;
    text-align: center;
    background-color: #ffffff;
    width: 100px;
}

.createRoutePointDistNextLater {
    margin-bottom: -18px
}

.createRoutePointNotes {
    padding-bottom: 10px;
    margin-left: 16px;
    word-wrap: break-word;
}

.createRouteDetailPointEnd {
    border: none;
}

.createRouteDetailLine {
    font-size: 15px;
    font-weight: 400;
    margin-left: 16px;
}

.createRouteDetailLineLabel {
    width: 35%;
    font-weight: 300;
    display: inline-block;
}

.createRoutePointTitle {
    width: 160px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.createRoutePointDistance {
    float: right;
    width: 70px;
    text-align: right;
    margin-right: 10px;
    overflow: hidden;
}

.createRoutePointFooter {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 24px;
}

.createRoutePointFooterFirst {
    margin-top: 15px
}

.createRoutePointDistNextFirst {
    margin-top: -9px
}

.createRoutePointTotalDistance {
    color: #6d6d6d;
    padding-left: 16px;
}

.createRoutePointMoreContainer {
    padding-bottom: 8px;
}

#createRouteTotalTime {
    margin-top: 10px;
    height: 23px;
    float: right;
    width: 100px;
    margin-left: 23px;
}

#createRouteTotalDistance {
    margin-top: 10px;
    height: 23px;
    float: right;
    width: 150px;
    margin-right: 0;
    margin-left: 0;
}

#create-route-route-type-select div:nth-child(2) {
    margin-left: 42px;
}

#create-route-route-type-select div:first-child,
#save-route-route-type-select div:first-child {
    display: none;
}

#create-route-route-type-select {
    width: 270px;
    margin-left: 32px;
}

#create-route-route-type-select {
    width: 334px;
    margin-left: 0px;
    height: 64px;
    background-color: white;
    z-index: 1;
    margin-top: 0px;
}

@media only screen and (min-width: 721px) {
    #create-route-panel-button-save {
        display: none;
    }
}

.saveRoutePointTotalDistance {
    color: #6d6d6d;
    background-color: #f8f8f8;
    margin-top: 10px;
    height: 23px;
    float: right;
    width: 152px;
    padding-bottom: 30px;
}

.saveRouteTotalTime {
    margin-top: 10px;
    height: 23px;
    float: right;
    width: 100px;
}

.moreLessOption {
    margin-top: 0px;
}

.routeDetailNotesAuto {
    height: auto
}

.routeMoreHide {
    display: none
}

#createRoutePOIToggle {
    float: left;
    cursor: pointer;
    margin-right: 36px;
    margin-left: 22px;
    margin-top: 20px;
    display: none
}

#autoFocus {
    float: left;
    cursor: pointer;
    margin-right: 36px;
    margin-left: 3px;
    margin-top: 20px;
}

#createRoutePOIToggleImage {
    margin-left: 10px;
    vertical-align: middle;
}

#createRouteButtons {
    position: absolute;
    width: 340px;
    display: flex;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 -1px 4px #ccc;
    z-index: 120;
    text-align: center;
}

#createRouteButtons .Basic_Btn {
    width: 109px;
    height: 60px;
    line-height: 60px;
    float: left;
    background-color: #f8f8f8;
    color: #00aeef;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

#createRouteButtons .Basic_Btn:hover {
    background-color: #ebebeb;
}

#createRouteButtons .Basic_Btn_Off {
    background-color: #f8f8f8;
    color: #ebebeb;
}

.createRoutePointInputName {
    margin-top: 15px;
    padding: 11px;
    font-size: 16px;
    margin-left: 5px;
    width: 200px;
    color: #5d5d5d;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.createRoutePointInputNote {
    margin-top: 5px;
    padding: 11px;
    font-size: 16px;
    margin-left: 5px;
    width: 200px;
    color: #5d5d5d;
    border: 1px solid rgba(0, 0, 0, 0.05);
    resize: none;
}

.createRoutePointInputNoteClear {
    margin-top: 38px;
    margin-left: 18px;
    position: absolute;
}

.createRoutePointCommit {
    cursor: pointer;
    font-size: 18px;
    color: #3596d2;
    text-align: center;
    margin-top: 75px;
    position: relative;
    width: 300px;
    height: 30px;
    padding-bottom: 18px;
}

.createRoutePointCommit div {
    float: left;
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 10px;
}

.Basic_Btn_Black {
    display: inline-block;
    width: 100px;
    background-color: #000;
    text-align: center;
    color: #3596d2;
    cursor: pointer;
    height: 66px;
}

.Basic_Btn_Black p {
    margin: 0;
    padding: 0;
    margin-top: -10px;
}

.Basic_Btn_Black img {
    margin: 0;
    padding: 0;
    margin-top: 10px;
}

.Basic_Btn_Black_Off {
    color: #5d5d5d
}

.createRoutePointEdit {
    float: right;
    margin-right: 16px;
    display: none;
}

.innerNote {
    font-weight: 400
}

.createRoutePointEditContainer {
    position: absolute;
    top: -10px;
    left: 14px;
    background-color: #f8f8f8;
}

.routeDetailsNotesAuto {
    height: auto
}

.routeDetailsNotesCompressed {
    max-height: 120px;
}

/* ABRoute Reskin */

#routeABResultsDetails {
    margin-bottom: 20px;
    width: 293px;
}

#routeABUtilityButtons {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #f8f8f8;
}

#routeABGetBtn {
    margin-left: 62px;
    margin-top: 30px;
    color: #ffffff;
    background-color: #3596d2;
    margin-bottom: 20px;
}

#routeABSearch {
    background-color: #f8f8f8;
    padding-top: 20px;
}

#routeABSearch .routeABSearchInputHolder {
    border: 1px solid #ebebeb;
    margin-left: 18px;
    display: inline-block;
    background-color: white;

}

#routeABSearch .routeABSearchInputHolder.abRouteInputFocus {
    background-image: url(../images/clear_notes.png);
    background-position: right 10px center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#routeABSearch .routeABSearchInputHolder .abRouteInput {
    border: 0px;
    padding-right: 0px;
    margin-right: 30px;
    background-color: transparent;
}

#routeABType {
    padding-left: 20px;
    padding-top: 10px;
    background-color: #f8f8f8;
}

#routeABType img {
    cursor: pointer;
    margin-right: 18px;
}

#routeABTypeDrive {
    margin-top: 0;
}

#routeABReverse {
    margin-top: 20px;
    width: 30px;
    float: right;
    height: 99px;
    margin-right: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    background: url(../images/reverse_directions.png) #f8f8f8 no-repeat center center;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

#routeABReverse:hover {
    background: url(../images/reverse_directions.png) #f0f0f0 no-repeat center center;
}

#routeOptions {
    font-weight: 400;
    margin-top: 22px;
    margin-left: 20px;
    width: 294px;
}

.routeSearchArea {
    background: url(../images/main/route-line.png) repeat-y;
    margin-left: 24px;
    padding-top: 18px;
    position: relative;
}

.routeSearchArea:first-of-type {
    padding-top: 2px;
}

.routeSearchAreaBullet {
    background: url(../images/route-point-map.png) no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -9px;
    top: 27px;
}

.routeSearchArea:first-of-type > .routeSearchAreaBullet {
    left: -9px;
    top: 0;
    height: 31px;
    background: url(../images/pin-start.png) #f8f8f8 no-repeat center bottom;
}

.routeSearchArea:last-of-type > .routeSearchAreaBullet {
    left: -9px;
    top: 26px;
    height: 24px;
    background: url(../images/pin-end.png) #f8f8f8 no-repeat center top;
}

.abRouteInputFocus, .window_1_search_focus {
    background-image: url(../images/clear_notes.png);
    background-position: right -17px center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.window_1_search_focus {
    background-position: right 10px center;
}

.abRouteInputDeletable {
    background-image: url(../images/icon_remove_red.png);
    background-position: right 10px center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.ABButton {
    color: #000;
    cursor: pointer;
    margin-left: 20px;
}

.ABButton span {
    padding-right: 10px;
}

.ABButton_Disabled {
    color: #6d6d6d;
    cursor: default;
}

.abrouteSelectorCheckBox {
    margin-top: 18px;
    padding-top: 25px;
    padding-left: 15px;
    padding-bottom: 0;
    width: 246px;
    font-size: 18px;
    color: #000000;
    background-image: url(../images/check-unselected.png);
    background-position: right;
    background-position-y: 25px;
    background-repeat: no-repeat;
    padding-bottom: 10px;
    cursor: pointer;
    font-weight: 300;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.abrouteSelectorCheckBoxSelected {
    background-image: url(../images/check-selected.png)
}

#routeABResultsDestList > div {
    padding-left: 15px;
}

#routeABResultsDestList {
    background-color: #f8f8f8;
    width: 334px;
    padding-bottom: 24px;
    padding-top: 14px;
    margin-left: 5px;
}

.routeSearchAreaResult {
    margin-top: 7px;
    margin-left: 5px;
    width: 270px;
}

#routeABResultsFastest {
    padding-left: 86px;
    width: 250px;
    margin-top: 24px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#routeABResultsFastest img {
    float: left;
    margin-left: -64px;
    margin-top: -7px;
    vertical-align: middle;
}

#routeABResultsFastest div {
    float: left;
    margin-right: 30px;
}

#routeABResultsFastest div:last-of-type {
    margin-right: 0;
}

.abResultListItem {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    padding-left: 40px;
    padding-bottom: 10px;
    padding-top: 20px;
    padding-right: 20px;
    width: 274px;
}

.abResultListItem:hover > div > div {
    color: #267ab0;
}

.abResultListItem > .abResultListItemImg {
    float: left;
    margin-left: -32px;
}

.abResultListItemImg img {
    width: 30px;
    margin-left: 6px;
}

.roadNameChangeSign {
    min-width: 31px;
    height: 14px;
    border: 1px solid #000;
    border-radius: 2px;
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    max-width: 59px;
    overflow: hidden;
}

#routeABAddDest img {
    margin-top: 3px
}

.abRouteResultsListDist {
    width: 100px;
    margin-left: 58px;
    background-color: #ffffff;
    position: relative;
    margin-bottom: -64px;
    font-size: 15px;
    text-align: center;
}

.firstABRouteResultsListDist {
    margin-bottom: -56px
}

.abRoutTotalAccumulate {
    color: #8d8d8d
}

#routeABResultsButtonsWrapper {
    bottom: 0;
    box-shadow: 0 -1px 4px #ccc;
    position: absolute;
    width: 334px;
    margin-left: auto;
    margin-right: auto;
    background-position: top;
    background-image: url(../images/weather_gradient.png);
    background-repeat: repeat-x;
    z-index: 120;
}

#routeABResultsButtons {

}

.abRouteResultsButton {
    text-align: center;
}

.abRouteResultsButtonDisabled {
    opacity: 0.5;
    cursor: default;
}

#routeABElevDiag {
    margin-left: -8px;
    padding-bottom: 10px;
    height: 114px;
    background-color: #ffffff;
}

#abRouteStartLabel {
    position: fixed;
    top: 14px;
    left: 69px;
    z-index: 200;
    font-weight: 400;
    font-size: 18px;
    text-align: right;
    width: 55px;
}

.drivingDirectionDistance {
    color: #bcbcbc;
    padding-bottom: 7px;
}

.abRouteResultsListDetail,
.drivingDirectionDistance {
    margin-left: 17px;
}

.routeABSearchLabel {
    position: absolute;
    top: 13px;
    left: 57px;
    font-weight: 400;
    font-size: 18px;
    width: 55px;
    color: #000;
    text-align: right;
}

.createRouteFooter {
    background-position: top;
    background-image: url(../images/weather_gradient.png);
    background-repeat: repeat-x;
    padding-top: 26px;
    z-index: 120;
    position: absolute;
    width: 334px;
    bottom: 0;
}

.abErrorMessage {
    display: none;
    width: 293px;
    font-size: 17px;
    color: #F00;
    text-align: center;
    margin-top: 17px;
}

#saveRouteNameContainer,
#saveRouteNote {
    background-color: #f8f8f8;
    float: left;
    width: 293px;
    padding-left: 20px;
    padding-right: 20px;
}

#saveRouteRating,
#saveRouteActivity,
#saveRouteDifficulty,
#saveRouteSurface,
#saveRouteViewSettings {
    float: left;
    width: 293px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
}

#saveRouteLineStyleTitle {
    float: left;
    width: 100%;
}

.panelGrey {
    background-color: #f8f8f8;
    float: left;
    width: 334px;
    position: relative;
    z-index: 1;
}

#routeKeywordFilter {
    background: white;
    position: absolute;
    width: 354px;
}

.dpn-paths-description > div:nth-child(even) {
    float: left;
    width: 140px;
    margin-top: 4px;
}

.dpn-paths-description > div:nth-child(odd) {
    width: 48px;
    float: left;
    margin-top: 11px;
    margin-right: 20px;
    margin-left: 1px;
}

.dpn-paths-description > div:nth-child(1) {
    border-bottom: 3px dashed #D381A1;
}

.dpn-paths-description > div:nth-child(3) {
    border-bottom: 3px dotted #D381A1;
}

.dpn-paths-description > div:nth-child(5) {
    border-bottom: 3px solid #D381A1;
}

.dpn-magnet-description > div {
    float: left;
    padding-left: 35px;
    width: 245px;
    margin-bottom: 10px;
}

.dpn-help-header {
    margin-top: 10px;
    float: left;
}

.dpn-help-header:nth-of-type(2) {
    margin-top: 18px;
}

.dpn-magnet-description > div:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 24px;
    margin-top: 3px;
    margin-left: -40px;
}

.dpn-magnet-description > div:nth-child(1):before {
    background: url(../images/main/general-interface-icons.png) no-repeat 1px -844px;
}

.dpn-magnet-description > div:nth-child(2):before {
    background: url(../images/main/general-interface-icons.png) no-repeat 1px -814px;
}

.dpn-magnet-description > div:nth-child(3):before {
    background: url(../images/main/general-interface-icons.png) no-repeat 1px -874px;
}

.route-details-direction {
    font-size: 11pt;
    margin-top: 2px;
    display: block;
}

.route-details-stub-top {
    width: 10px;
    height: 33px;
    position: absolute;
    background-color: #fff;
    margin-left: -10px;
    z-index: 1;
    top: 33px;
}

.route-details-stub-top-start {
    top: 39px !important;
    height: 25px;
}

.route-details-stub-top-stop {
    height: 12px !important;
}

.route-details-stub-bottom {
    width: 10px;
    height: 22px;
    position: absolute;
    background-color: #fff;
    margin-left: -10px;
    z-index: 1;
}

.createRoutePointMoreContainerMenu {
    margin-left: 16px;
    padding-bottom: 8px;
    margin-top: 8px;
    font-size: 12pt;
}

.routeDetailExtra > .createRoutePointMoreContainerMenu {
    margin-left: 0 !important;
    margin-top: 7px !important;
}

#routeDetailElevDiag {
    margin: 0;
    float: left;
    width: 334px;
}

.routecard-toggle-all-waypoints {
    text-align: left;
    margin-top: 15px;
}

.routecard-toggle-all-waypoints div:first-child {
    display: inline-block;
    margin-top: -36px;
    padding-left: 20px;
    padding-right: 6px;
    vertical-align: middle;
}

.routecard-toggle-all-waypoints div:nth-child(2) {
    display: inline-block;
    width: 220px;
}