/**
 * 1.GLOBAL
 */
html, body {height: 100%;}

header, nav, section, article, aside, footer {
    display:block;
}

#title_below {
    margin-top: -10px;
}
.greenbox h2 {
    text-shadow: 1px 1px 1px #052409;
}
.page_trail h3 {
    /*border-top: 5px solid #458438;*/
}
aside h3 {
    font-size: 1.7em;
}
p {
    margin: 0 0 1.6em 0;
}

a.underline:hover {color: #29691f;}
::-webkit-input-placeholder {color: #e1e1e1; font-size: 11px; padding: 2px;}
::-moz-placeholder {color: #e1e1e1; font-size: 11px;}
:-ms-input-placeholder {color: #e1e1e1; font-size: 11px;}
.large ::-webkit-input-placeholder {font-size: 13px;}
.large ::-moz-placeholder {font-size: 13px;}
.large ::-ms-input-placeholder {font-size: 13px;}
.medium {
    font-size:13px;
    line-height: 1.5;
}

ol {margin-left: 25px;}
dl { margin: 0 0 1.5em 0; }
dl dt {color: #999999; font-weight: normal; }
dd { margin-left: 1.5em; }
table {width:100%; }
th, tr, td { padding: 0.1em 0.5em; vertical-align: middle; text-align: left; }
hr { background: #666; border: none; clear: both; float: none; height: 1px; margin: -1px 0 1.5em; width: 100%; }
fieldset { border: 1px solid #ccc; margin: .5em 0; padding: 1em; }
dt {
float: left;
clear: left;
text-align: right;
font-weight: bold;
padding-bottom: 5px;
}
dt:after {
content: ":";
}
dd {
text-align: right;
padding-bottom: 5px;
}
dt:hover,
dt:hover + dd {
    background: #f3f3f3;
}
td img {max-width:none;}
td img.user-image-img {max-width: 100%}


/**
 * 2.LAYOUT
 */
.container {padding-left: 20px; padding-right: 20px;}
.wrapper {clear: both; width: 100%; max-width: 1140px; margin: 0 auto;}
#container {min-height: 100%;}
#container2 {
    /*overflow:auto;*/
    padding-bottom: 190px;}
#container_footer {
    position: relative;
    min-height: 150px;
    margin-top: -206px;
    clear:both;
}
#header {
    margin: 0 0 0;
    padding: 5px 0 0 0;
    position: relative;
    height: 50px;
    display: flex;
}
#header > * {
    flex: 0 1 auto;
}
#header #logo {
    padding: 8px 1em 1px 0;
    display: inline-block;
    float: left;
}
#logo img {
    height: 30px;
    width: auto;
}
#logo_powered {
    font-size: 8px;
    color: #999999;
    position: absolute;
    margin-left: -77px;
    margin-top: 28px;
}
#pinkbike_powered {
    display: inline-block;
    color: #CCCCCC;
    font-size: 0.9em;
    text-shadow:0 1px 0 #ffffff;
    float: left;
    margin-top: 15px;
}
#pinkbike_powered:after {
    content: "by Pinkbike";
}
#main {position: relative;}
#headerwrapper {
    background-color: #fff;
}
#navwrapper {
    background: #29691f;
    border-top: 1px solid #fff;
    position: relative;
}
#footer {
    clear: both;
    position: relative;
    background: #323232 url(../../i/trailforks/footer_tile.png) repeat-x;
    background-position-y: bottom;
    height: 100%;
    color:#fff;
    overflow-y: hidden;
    padding: 20px 0;
}
#footer .wrapper .inner {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}
#footer .wrapper .inner::after { display: none; }
#footer_mountains {
    background: transparent url(../../i/trailforks/footer_mountains.png) no-repeat center;
    margin: 0 auto;
    height: 56px;
    width: 100%;
}
#footer2 ul {
    margin-left: 20px;
}
#footer2 ul:nth-child(1) {
    margin-left: 0;
}
#stickywrap {
    position: relative; top: 0px; left: 0px; width: 100%; z-index: 500;
}
#stickywrap.sticky {
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    background: #fff;
}
#sticky-placeholder {
    width: 100%;
}
#main, aside {padding-bottom: 20px;}

.regionPage .block {
    margin-bottom:50px;
}
table.region_reports td:nth-child(1) {
    width: 5%;
}
table.region_reports td:nth-child(2) {
    width: 25%;
}
table.region_reports td:nth-child(3) {
    width: 10%;
}
table.region_reports td:nth-child(4) {
    width: 15%;
}
table.region_reports td:nth-child(5) {
    width: 15%;
}
table.region_reports td:nth-child(6) {
    width: 30%;
}
.block .imgtbl {table-layout: fixed;}
.rotate180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    display: inline-block;
}
#footer3 {
    height: auto;
    position: relative;
}
#footer3 #downloadLinks img {
    max-width: 130px;
    width: 100%;
    height: auto;
}
#footer3 #downloadLinks a {
    flex: 0 1 auto;
    min-width: 0;
}

/* Footer responsive */
@media screen and (max-width: 1023px) {
    #footer #footer1 {
        flex: 0 0 13%;
        margin-right: 2%;
    }
    #footer #footer2 {
        flex: 1 1 0;
        min-width: 0;
        margin-right: 2%;
    }
    #footer #footer2 ul {
        margin-left: 10px;
    }
    #footer #footer3 {
        flex: 0 0 22%;
        width: 22%;
        margin-right: 0;
    }
    #footer #footer3 #downloadLinks {
        flex-direction: column;
    }
    #footer #footer3 #downloadLinks img {
        max-width: 120px;
    }
}

@media screen and (max-width: 767px) {
    #footer #footer1 {
        flex: 0 0 auto;
        width: auto;
        margin-right: 10px;
    }
    #footer #footer2 {
        flex: 1 1 0;
        min-width: 0;
        margin-right: 0;
    }
    #footer #footer2 ul {
        margin-left: 5px;
    }
    #footer #footer2 ul > li {
        padding: 10px;
    }
    #footer #footer3 {
        flex: 0 0 100%;
        width: 100%;
        margin-right: 0;
        padding-top: 15px;
    }
    #footer #footer3 #downloadLinks {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 639px) {
    #footer #footer1 {
        display: none;
    }
    #footer #footer2 {
        flex: 0 0 100%;
        width: 100%;
        margin-right: 0;
    }
}

@media screen and (max-width: 459px) {
    #footer #footer2 {
        display: flex;
        flex-wrap: wrap;
    }
    #footer #footer2 ul.floatleft {
        float: none !important;
        width: 50%;
        box-sizing: border-box;
        margin-left: 0;
    }
}
#app_banner {
    max-width: 100%;
    margin-top: -10px;
}
#app_banner:hover {
    opacity: 0.7;
}
#quickLinks {margin-top: 10px;}


/**
 * 3.STYLES
 */
#user_menu {
    text-align:right;
}

#user_menu a {color:#000!important;}
#user_menu a.button1:hover {
    color: #fff!important;
}
#menu > .header_search_wrapper:empty {
    display: none !important;
}
#menu > .header_search_wrapper {
    background-color: #1f4a19;
}
#menu .getpro {
    border-radius: 0;
}
#activitytype_menu .parent {
    padding: 3px 0 3px 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
    max-height: 30px;
}
#activitytype_menu .badgesquare {
    line-height: inherit;
}
#header_right #search {
    padding: 4px 4px;
    line-height: 1.5;
}
#header_left {
    margin-top: 9px;
    text-align:left;
    flex: 1 1 auto;
    white-space: nowrap;
}
#header_right {
    margin-top: 4px;
    text-align:right;
    flex: 1 1 auto;
    white-space: nowrap;
}
#header_right > div,
#header_left > div {
    display: inline-block;
}
#headerstats {
    margin-right: 20px;
}
#header_search form {
    margin-top: 5px;
}
#search {width:150px;}
#search_results {
    position:absolute;
    text-align: left;
    width: 650px;
    max-width: 100%;
    right:0;
    z-index:1001;
    opacity: 0.98;
    margin-right: 90px;
    overflow-x: clip;
}
#search_results h4 {
    color: #96bf91;
}
#search_results a {
    padding: 5px;
    display: block;
}
#search_results a:focus, #search_results a:active, #search_results .selected, #search_results a:hover {
    background-color: #fec200;
    color:#000;
    text-decoration: none;
}
#page_title {
    position: relative;
}
#page_title_right {
    float: right;
    font-size: 13px;
}
#page_title h1, h1#page_title {
    font-size: 2.5em;
    line-height: 1.7em;
    margin: 5px 10px 0 0;
    color: #333333;
    font-weight: bold;
    display: inline-block;
}
.title-page {
    color: #a8a8a8;
    font-size: 26px;
    font-weight: normal;
    line-height: 1.5;
}
.title-type {
    color: #a8a8a8;
    font-size: 26px;
    font-weight: normal;
    padding-right: 10px;
}
.title-type:before {
    content: '/';
    color: #CCCCCC;
    line-height: 1em;
    font-size: 80%;
}
#header_search input[type="submit"] {
    border-radius: 5px;
    padding: 6px 7px;
    line-height: normal;
}
.discount-strike {
    opacity: 0.4;
    text-decoration: line-through;
}
.copyText {
    position: absolute;
}


#ridingarea {text-shadow: none;}
.closeControl {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    color: #1C1D1F;
    justify-self: end;
    margin-left: auto;
}

.nodeIcon {
    font-family: 'trailforks';
    font-weight:normal;
    font-style:normal;
    display:inline-block;
    font-size: 4px;
    color: #7b7b7b;
    -webkit-font-smoothing: antialiased;
}
.nodeIcon:before {
    content:"\e016";
}

.phoneicon:before {
    font-family: 'trailforks';
    color: #6B6B6B;
    content:"\e900";
    padding-right: 3px;
}
.iframe-container {z-index: 100;}
.content-container {
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: hidden;
}
#content-container {
    padding-top: 5px;
    padding-left: 15px;
    padding-right: 15px;
}
/*.iframeshim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10000;
    border: 0;
    overflow:hidden;
}*/


/**
 * 5.PHOTOS
 */
.photogrid {font-size:0;}
.photogrid .thumb {
    display: inline-block;
    margin-bottom:20px;
    font-size:12px;
    float: none;
    text-align: left;
    overflow: hidden;
    vertical-align: top;
}
.photogrid.single .thumb {
    display: block;
}
.boxcontent.photogrid .thumb {
    float: left;
}
.photogrid .thumb > a {
    display: block;
    overflow:hidden;
}
.photogrid .uDescription > a {display:block;}
.selecteditem {
border: 2px solid red;
}
.selecthelper {
    color: inherit;
    background: #000;
    opacity: 0.3;
}
.photogrid .thumb .crop-thumbnail img {
    max-width: 100%;
    display: block;
    height: 100%;
    margin: auto;
    border-radius: 8px;
}
.photogrid .thumbnail {
    display: block;
    width: 100%;
    -ms-background-position-x: center;
    -ms-background-position-y: center;
    background-position: center center;
    background-size: cover;
    border-radius: 8px;
}
.imageradius {
    border-radius: 8px;
}
.photogrid .videothumb .thumbnail {
    width: 100%!important;
    background-color: #000000;
    border-radius: 8px;
}
.photogrid .thumb p a {display: inline;}
#view-options {
    font-weight: bold;
    text-align: right;
    margin-bottom: 30px;
}
#view-options span {
    font-weight: normal;
}
#view-options > div {
    display: inline-block;
    margin-left: 25px;
}
#view-options #sViewMode label {
    font-size: 13px;
    margin-right: 4px;
}
#view-options #sViewMode {
    font-size: 0;
}
#view-options .option span {
    cursor: pointer;
}
#viewFull ,
#viewTop ,
#viewThumb {
    display: inline-block;
    float: none;
}
#size5 ,
#size4 ,
#size3 ,
#size2 ,
#size1 {
    color: #aaa;
    cursor: pointer;
}
#view-options .current {
    color: #000;
}
#viewThumb {
    float: right;
    width: 16px;
    height: 16px;
    color: inherit;
    background: url(../../i/sizefull.gif) -48px 0;
}

.thumb #viewThumb {
    background: url(../../i/sizefull.gif) -0 0;
}

#viewTop {
    float: right;
    width: 16px;
    height: 16px;
    background: url(../../i/sizefull.gif) -64px 0;
}
.topview #viewTop {
    background: url(../../i/sizefull.gif) -16px 0;
}

#viewFull {
    float: right;
    width: 16px;
    height: 16px;
    background: url(../../i/sizefull.gif) -79px 0;
}

.fullview #viewFull {
    background: url(../../i/sizefull.gif) -32px 0;
}

.show1 #show1 {
    color:#000;
    font-weight:bold;
}
#show1 {
    color:#aaa;
    cursor: pointer;
}

.show2 #show2 {
    color:#000;
    font-weight:bold;
}
#show2 {
    color:#aaa;
    cursor: pointer;
}

.show3 #show3 {
    color:#000;
    font-weight:bold;
}
#show3 {
    color:#aaa;
    cursor: pointer;
}
.topview .uPhotoSmall .uFullInfo, .topview .items-list .uFullInfo {
display: none;
}
#inList.thumb .caption {
display: none;
}
.caption {font-size: .9em;}
.albumOptions {position: relative; margin-bottom: 15px;}
#contentTotal {
    background: #C80000;
    border-radius: 4px;
    padding:3px;
    color:#fff;
    font-size:10px;
    min-width: 15px;
    text-align: center;
}
#contentTotal.ct_tr {
    right:0;
    position: absolute;
    margin-top:-75px;
}


/**
 * 6. FONTS
 */
.fgrey {color: #999;}
.fgrey a {color: #999;}
.f10 {font-size: 10px;}
.f22 {font-size: 22px;}
.nostyle {text-decoration: none!important;}
.fblack {color: #000 !important;}
.newsimage {
    max-width: 220px;
}


/**
 * 7. PINKBIKE
 */
#login-info {
    display: none;
}
.tooltip {
    background-color: #efefef;
    border: 1px solid #999;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 10px 10px 10px;
    position: relative;
    color: #333333;
}
.close-it {
    display: inline-block;
    position: relative;
    float: right;
    background: url(../../i/propfull.gif) -80px 0 no-repeat;
    width: 16px;
    height: 16px;
    font-size: 0;
    margin-top: -7px;
    margin-right: -7px;
}
.tooltip-container {
    position: absolute;
    visibility: hidden;
    z-index: 9999;
    display: block;
    width: 100%;
    border: 1px solid #262626;
    border-radius: 5px;
    background-color: #fff;
}
#pbBox {
    z-index: 9999;
}
.tooltip-body {
    color: #666666;
}
.tooltip-button {
    display: inline-block;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    line-height: 15px;
    padding: 7px;
    width: auto;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 #639D1D;
    border: 1px solid #679422;
    background-color: #81A745;
    background: -moz-linear-gradient(center top, #B1D17F, #81A745) repeat scroll 0 0 #81A745;
    background: -webkit-gradient(linear, left top, left bottom, from(#B1D17F), to(#81A745));
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.tooltip-button2 {
    display: inline-block;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    line-height: 15px;
    padding: 7px;
    width: auto;
    color: #000000;
    text-shadow: 0 1px 0 #FFFFFF;
    border: 1px solid #AAAAAA;
    background-color: #F3F3F3;
    background: -moz-linear-gradient(center top, #FFFFFF, #F3F3F3) repeat scroll 0 0 #F3F3F3;
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F3F3F3));
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
#pbBox .tooltip {
    background-color: transparent;
    border:0;
}
#membership-badge {
    background: black;
    color:#ffd204;
    text-transform: none;
}
.proicon {
    font-size: 10px;
    padding: 2px 3px;
    width: 16px!important;
    height: 14px!important;
}
.withproicon {
    background-image: url(../../i/trailforks/logos/trailforks-logo-vert_notext_32.png);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: center;
    background-size: 16px;
    padding-left: 25px;
}
.avatarbig {
    position: absolute;
    top: 0;
    left: 0;
}
.avatarsmall {
    width: 12px!important;
    height: 10px!important;
    padding: 0;
}
.avatarlist {
    position: absolute;
    top: -1px;
    left: -5px;
}
.cardAvatar .avatarlist {
    position: absolute;
    top: -1px;
    left: -1px;
}
.photo_report_badge, .photo_featured_badge {
    position: absolute;
}
.video_featured_badge {
    position: absolute;
    right: 0;
}
.photo_activitytype {
    float: right;
    margin-left: 5px;
}
.photo_activitytype .badgesquare {
    text-transform: uppercase;
    padding: 1px 4px;
}
.iconlink img {
    vertical-align: top;
}
.iconlink span {
    padding-left: 3px;
    padding-right: 4px;
}
.paging-container {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    width:auto;
    margin-bottom:0;
}
.paging-nav-c3 {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #eeeeee;
    border: 1px solid #ddd;
    color: #777777;
    cursor: default;
    margin: 6px 6px;
    padding: 8px 10px;
}
.paging-middle {
    display: inline-block;
    max-width: 320px;
}
.paging-nav-c3 li {
    display: inline;
    padding-left: 1px;
    padding-right: 1px;
}
.paging-container ul {
    margin:0;
    padding:0;
}
.prev-page {
    margin-right: 6px;
}
.next-page {
    margin-left: 6px;
}
.paging-nav-c3 a, .paging-nav-c3 span { padding: 3px; }
.paging-nav-c3 a:hover { background: #AABED3; color: #EEE; }
.current-page a, .current-page a:hover { background: #6B92BC; color: #EEE; }
.rsb, .rsb-container {
    position: relative;
    z-index: 5;
    padding:5px;
}
.rsb-search-bg {
    background: #FFF;
    border: solid #1B5790;
    border-width: 1px 1px 0 1px;
    width: 200px;
    height: 34px;
    position: absolute;
    top: -34px;
    left: -1px;
    border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px;
    z-index: 4;
    margin:0!important;
}
.rsb-loading {
    background: url(../../i/load.gif) no-repeat 98% 50%;
}
.rsb-active {
    background: url(../../i/search_btn.gif) no-repeat 98% 50%;
}
.rsb-empty {
    padding: 4px 10px;
    font-weight: bold;
}
.rsb-toc {
  background: #FFF;
  padding: 5px 0;
  margin: 0;
  position: relative;
  z-index: 5;
  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}
.rsb-toc li {
  display: inline-block;
  padding: 1px 3px;
  margin: 5px 1px 5px 2px;
  font-size: 15px;
  text-align: center;
}
.rsb-toc li.rsb-empty-letter {
  color: #CCC;
  cursor: default;
}
.rsb-toc li.rsb-current {
  background: #105CFF;
  color: #FFF;
}
.rsb-toc li.rsb-current a {
  color: #FFF;
}
input.rsb-current {
  color: #105CFF;
}
.rsb-results {
  overflow: auto;
  position: relative;
}
.rsb-results ul {
  float: left;
}
.rsb-results li {
  padding: 2px 0 2px 11px;
  margin: 0 5px;
  text-indent: -8px;
}
.rsb-results li.rsb-single-item ,
.rsb-results li.rsb-current {
  background: #105CFF;
  font-weight: bold;
}
.rsb-results li.rsb-single-item a ,
.rsb-results li.rsb-current a {
  display: block;
  color: #FFF;
}
#pbBox {
    background: #FFFFFF;
    border-radius: 5px;
    z-index:165;
}


/**
 * 9. TABLES
 */
.table_columns td {
    border-right: 1px solid #dfdfdf;
}
/* One chevron per sortable column, rendered right after its own label. The old
   sort.png sat at `center right` of the header cell, which read as belonging to
   the next column along. */
table.tablesorter thead tr th.tablesorter-header > div {
    cursor: pointer;
    min-height: 20px;
}
table.tablesorter thead tr th.tablesorter-header > div::after {
    content: "\25BE";
    font-size: 9px;
    margin-left: 5px;
    opacity: .3;
}
table.tablesorter thead tr th.sorter-false > div {
    cursor:auto;
}
table.tablesorter thead tr th.sorter-false > div::after {
    content: none;
}
table.tablesorter thead tr th.tablesorter-header.tablesorter-headerDesc > div::after {
    content: "\25BE";
    opacity: 1;
    color: #212121;
}
table.tablesorter thead tr th.tablesorter-header.tablesorter-headerAsc > div::after {
    content: "\25B4";
    opacity: 1;
    color: #212121;
}
.statsTable thead tr {
    background: none;
}
.statsTable thead th {border:0; color:#000000;}
.statsTable tbody th {font-weight: normal;}
.tablemore {
    padding: 3px 6px;
    color: #666666;
    border: 1px; solid-color: #666666;
    background-color: #f3f3f3;
}
.tablemore5 tr:nth-child(n + 6) {
    display: none;
}
.tablemore5.tablemoreshow tr:nth-child(n + 6) {
    display: table-row;
}
.tablemore10 tr:nth-child(n + 11) {
    display: none;
}
.tablemore10.tablemoreshow tr:nth-child(n + 11) {
    display: table-row;
}
.tablemore20 tr:nth-child(n + 21) {
    display: none;
}
.tablemore20.tablemoreshow tr:nth-child(n + 21) {
    display: table-row;
}


/**
 * 9. MISC
 */
.centertext { text-align:center; }
.boxtitle {font-size:0;}
.boxtitle .title {
    font-size:14px;
    width:50%;
    display: inline-block;
    text-align: left;
}
.boxtitle .more {
    font-size:12px;
    width:50%;
    display: inline-block;
    text-align: right;
}
a.more, .more {color:#666;}
.page_trail .difficulty {
    float:right;
}
.report_links, .page_trail .date {font-size:80%;}
#subregionlist h5 {
    position: absolute;
    right: 10px;
    background-color: #ddd;
    color: #ffffff;
    padding: 4px;
    margin-top: -24px;
    border-radius: 5px;
}
.ui-dialog {
    z-index: 900;
    padding: 0;
}
.resultTotal {
    color:#ccc;
}
.trail_work {
    background-image: url(../../i/trailforks/shovel.png);
    background-repeat: no-repeat;
    width:16px;
    height: 16px;
    display:inline-block;
}
.filterForm {
    margin: 10px 0;
}
.formBlock {
    display: inline-block;
    margin-right:20px;
    vertical-align: top;
}
.filterForm .formBlock label {
    display: block;
    font-weight: bold;
}
ul.nostyle {
    padding: 0;
    margin: 0;
    list-style: none;
}
li.nostyle {
    padding: 0;
    margin: 0;
}
#filterActivityType .makecols2 {
    column-gap: 2em;
}
#traildetails_display .dicon_small {
    line-height: 11px;
}
#trail_details {
    margin-right: 20px;
    min-width: 300px;
    max-width: 300px;
}
.rightpadded20 > li {margin-right: 20px}
.hide_thead thead {display:none;}
.row-spacing-5 > li {margin-bottom: 5px;}
ul.nopad li {padding: 0;}
#sidebarFilter li {
    min-height: 25px;
}
#sidebarFilter .range_slider {
    border:0;
    margin-bottom: 5px;
    color:#000;
}
.ridingareas .title, .regions .title {
    font-size: 140%;
    font-weight: bold;
}
.ridingareas > li, .regions > li {
    margin-bottom: 0!important;
    padding-bottom: 20px;
}
.ridingareas li ul {
    font-size: 140%;
}
#subregions {
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
}
#subregions .photolink, #subregions .thumbnail {
    height: 150px!important;
}
#subregions > li {
    min-height: 66px;
}
aside #subregions > li {
    min-height: auto;
}
.play {
    position: absolute;
    width: 20px;
    height: 15px;
    margin: 5px 0 0 5px;
    background: url(../../i/play.png) no-repeat;
    background-size: 70%;
    z-index: 99;
}
#easyTooltip {
    padding:5px;
    border:4px solid #ccc;
    background:#f1f1f1;
    z-index:1010; /* above modal with z-index 1000 */
    max-width:300px;
    text-align:left;
    margin-top: 20px;
}
.star-rating {
    position: static;
}
.star-rating ul {
    unicode-bidi:bidi-override;
    direction:rtl;
    text-align: left;
    white-space: nowrap;
    display: inline-block;
}

.star-rating ul li {
    font-family: 'trailforks';
    font-weight:normal;
    font-style:normal;
    display:inline-block;
    font-size: 16px;
    text-shadow: 1px 1px 1px #fff;
}
.star-rating ul li:not(:first-child) {
    padding-right: 2px;
}

.star-rating li.star_readonly:before,
.star-rating li.star:before {
    content: "\e600";
    color: #ccc;
}
.star-rating.allowvoting ul:hover li.star:not(:hover):before{
    color: #ccc;
}

.star-rating.allowvoting li.star:hover:before,
.star-rating.allowvoting li.star:hover ~ li.star:before {
    content: "\e013";
    color: #fec200;
}
.star-rating li.star_readonly.filled:before,
.star-rating li.star.filled:before {
    color: #fec200;
    content:"\e013";
}

.star-rating li.star_readonly.half:before,
.star-rating li.star.half:before {
    color: #fec200;
    content:"\e01f";
}

.star-rating.allowvoting li {
    cursor: pointer;
}

.star-rating ul li.undo-vote:before {
    content: "\2715";
    color: #3A3A3A;
}

.star-rating ul .undo-vote:hover ~ li.star:before {
    color: #ccc;
}

.voted {
    -webkit-filter: hue-rotate(30deg);
}
.trail_status_block {margin: 0 0 20px 40px;}
.trailbuttons button {min-width: 65px; text-align: center;}
.ripError, .formErrorTop {
    color: #d60405;
}
.trailbulk .ripError {
    padding: 5px;
    color: #fff!important;
}
.box2col .term {
    float: left;
    width:50%;
    text-align: left;
    color: #999999;
}
.box2col .term:after, .termslist .term:after {content: ":";}
.box2col .definition {
    float: left;
    width:50%;
    text-align: left;
    overflow: hidden;
}
.termslist li {
    padding: 0 0 15px 0;
}
.termslist li:last-child {
    padding: 0;
}
.termslist .term {
    display: inline-block;
    min-width: 75px;
    color: #999999;
    vertical-align: top;
}
.termslist .definition {
    display: inline-block;
}
#trailstats_display .term {width:60%; font-size: 13px;}
#trailstats_display .definition {width:40%; text-align: right;}
#traildetails_display .term {width:40%;}
#traildetails_display .definition {width:60%;}
#traildetails_display > li {
    margin-bottom: 5px;
}
#traildetails_display > li:hover {
    background-color: #f1f1f1;
}
.routeLogoSmall {
    margin-top:5px;
    max-height:50px;
    overflow-y: hidden;
}

.greenbox.box2col .definition {color:#fff;}
.box2col > li {
    padding: 5px;
}
.box2col.greenbox > li {
    border-top: 1px solid #2e6628;
    border-bottom: 1px solid #132f10;
}
.box2col.greybox > li {
    border-top: 1px solid #565656;
    border-bottom: 1px solid #282828;
}
.box2col .definition .dicon_small {display: inline-block; margin-left: 5px;}
.ridelog_button_bar {
    margin-top: -40px;
}
/* ridelog stat strip: auto-fit columns so four values fall into a 2x2 in a narrow sidebar instead of overlapping */
#basicRidelogStats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}
#basicRidelogStats > div {
    float: none;
    width: auto;
    margin: 0;
}
#basicRidelogStats .large {
    white-space: nowrap;
}
.dropclick span {background: transparent url(../../i/trailforks/sort_desc.png) no-repeat center right; padding-right:10px;}
.dropclick:hover {
    background-color: #134810;
    color:#fff;
}
.dropclick.active {
  background-color: #508446;
  color: #fff!important;
}
.content-seperator-small {
    background-color: #ececec;
    margin: 15px 0;
}
.editContrib {
    background-color: #e9e9e9;
}
.small_icon img {
    width: 10px;
    opacity: 0.7;
}

.dlogbar {
    font-size: 12px;
}
li.featured_country {
    margin-bottom: 30px;
}
li.featured_country .box2 {border: 1px solid #ddd;}

.stravacolor, a.stravacolor {color: #f26522;}
.strava_icon {
    width: 16px!important;
    height: 16px!important;
    max-width: none !important;
}
#nearby_slider {margin: 30px 0 10px 0;}
#nearby_range {
    width:25px;
    font-size:90%;
    border:1px solid #999;
    color:#999;
    padding:2px;
    margin: -15px 0 0 -5px;
    text-align: center;
}
#filterLocation input, #filterLocation select {max-width:150px; overflow-x: hidden;}

.leftalign th, .leftalign {text-align: left;}

progress {display: none;}
.progressbar {
    width: 100%;
    height: 18px;
    display: block;
    /* Important Thing */
    -webkit-appearance: none;
    border: none;
}
.progressbar::-webkit-progress-bar {
    background: #999;
    border-radius: 5px;
    padding: 2px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2);
}
.progressbar::-webkit-progress-value {
    border-radius: 5px;
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
    background:
        -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
        -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
        -webkit-linear-gradient(left, #f3f3f3, #46b415);
    background-size: 25px 14px, 100% 100%, 100% 100%;
    -webkit-animation: move 15s linear 0 infinite;
}
.progressbar.complete {
    -webkit-animation-play-state: paused
}
@-webkit-keyframes move {
    0% {background-position: -100px 0, 0 0, 0 0}
    100% {background-position: 0 0, 0 0, 0 0}
}
#trailOverviewSearch .block {margin-bottom: 0;}
#welcomeblock {
    background: #143e18 url(../../i/trailforks/greenmap_background.jpg) repeat-x top;
    border-radius: 15px;
    color: #669966;
    font-size:90%;
    margin-top: -8px;
    padding-top: 10px;
}
#welcomeblock h3 {
    font-size:14px;
    font-weight: bold;
    color: #ccffcc!important;
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 3px;
}
#welcomeblock a {
    color: #669966;
}
#welcomeblock p {
    margin-bottom: 0;
}
#block-central-welcome-block {
    margin-bottom: 20px;
}
#welcomeblock .icon {
    float: left;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-image: url(../../i/trailforks/welcome_icons.png);
    background-size: 120px 60px;
}
.column20 {width: 20%; float: left;}
.icon_trails {background-position: 0 0;}
.icon_reports {background-position: 90px 0;}
.icon_tracking {background-position: 30px 0;}
.icon_events {background-position: 60px 0;}
.icon_maps {background-position: 0 30px;}
.icon_rides {background-position: 90px 30px;}
.icon_challenge {background-position: 60px 30px;}
.icon_directory {background-position: 30px 30px;}
#home_slider .col-2 {padding-top: 20px;}

div.statusmessages {
    border-color: #be7;
    color: #234600;
    background-color: #f8fff0;
}
div.error {
    color: #8c2e0b;
    border-color: #ed541d;
    background-color: #fef5f1;
}
#footer a, .footerlink {
    color:#999;
}

.homesearch input {
    border: 4px solid #ccc;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
#search {
    border: 1px solid #BBB;
    padding: 5px 4px;
}

.content_stats {
    text-align: center;
    vertical-align: top;
    width:100%;
}

.content_stats li {
    display: inline-block;
    margin-bottom:10px;
    font-size: 12px;
    min-height: 22px;
    text-align: center;
    width:10%;
    padding-right:10px;
}
.content_stats li span {
    display: inline-block;
    padding: 2px 7px;
    border: 2px solid #000000;
    border-radius: 4px;
    margin-right: 3px;
    background: #000000 url(../../i/trailforks/stat_background.png) top repeat-x;
    color: #ffffff;
    font-weight: bold;
}
.content_stats li a {
    display: block;
}
.stacked .content_stats li {
    text-align: left;
    display: block;
    width: auto;
}
.stacked .content_stats li a, .stacked .content_stats li span {
    display: inline;
}

#social-bar {
    margin-bottom: 10px;
}
#social-bar > div {
    display: inline-block;
    padding-right: 5px;
}
.share-button {
    display:inline-block;
    font-weight:700;
    text-decoration:none;
    text-align:center;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    color:#FFF;
    font-size:13px;
    padding:4px 8px;
    cursor: pointer;
    border-radius: 8px;
}
.share-button-twitter {
    background-color:#00ABF0;
}
.share-button-facebook {
    background-color:#3b5998;
}
.share-button-pinterest {
    background-color:#cc0011;
}
.share-button:active {
    background-color:#353535;
}

.mobilelink {display: none;}

.margin0 {margin: 0!important;}

.printSafe {margin: 0 auto; max-width: 1000px;}
.printLabel {
    display: inline-block;
    min-width: 20px;
    background-color: #333333;
    color:#fff;
    padding:2px;
    text-align: center;
    margin-right: 5px;
}
#printLogo {
    position:absolute;
    z-index:200;
}
#legend li {
    overflow: hidden;
    white-space:nowrap;
}
@media print {
    #printButton {
        display: none;
    }
}
.page_print {
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
}
.page_print h3 {
    font-size: 120%;
    margin-bottom: 0;
}
.page_print #trailAssociationLogo {display: none;}
.tab_icons {
    position:absolute;
    margin: -35px 0 0 350px;
}
.tab_icons a {padding:0 5px}

.diff td {
    max-width: 500px;
    word-wrap:break-word;
}

.hidden_trail {
    font-style: italic;
}
.private_trail {
    font-style: italic;
    text-decoration: line-through;
}
.highlight_field input {
    border:1px solid #366b2d;
}
.difficulty_right {
    float: right;
    margin: 0 0 5px 0;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed, .video-container .vjscontainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.vjsoverlay .vjsdescription a h3 {
    color: #fff!important;
}

.weather_small img {width:50px;}

#layers_button {
    position: absolute;
    border:1px solid #818181;
    background-color: #fff;
    color:#000;
    margin: 7px;
    left:0;
    top:0;
    z-index: 120;
    padding:2px 4px;
    cursor: pointer;
}
.control_expanded {
    padding-top: 0;
}
#opaquetrails {
    display: none;
}
.iframeborder iframe {border:1px solid #000;}
iframe {max-width: 100%;}

#user-details {
    width:100%;
}
#tt {position:absolute; display:block; z-index:200;}

.fullwidth .wrapper {max-width: 95%;}
.widecontent #content-container .wrapper {
    max-width: 1600px;
}
.widecontent #content-container {
    padding: 5px 15px 0 15px;
}
.widecontent.topnarrow #pageheader {
    max-width: 1140px;
}
.fillpage #content-container {
    margin-top: 0;
    padding-top: 0;
    padding: 0;
}
.fillcontent #content-container {
    padding: 0;
    margin-top: 0;
}
.fillcontent #mainwrapper {
    max-width: 100%
}
.fillpage .wrapper {
    clear: both;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
.fillpage #main {
    padding-bottom: 0;
}
.fillpage #tdMap, .fillpage #tdSide {
    padding: 0;
}
#loginLinks > li {margin-left: 15px;}
#outside-header-links {
    background-color: #fec200;
    color: #000000;
    position: absolute;
    z-index: 800;
    top: 36px;
    left: 0;
    width: 100%;
    text-align: center;
}
#outside-menu-close {
    margin: 10px;
}
#outside-header-links ul {
    max-width: 300px;
    margin: 0 auto;
    text-align: left;
}
#outside-header-links a {
    color: #000000;
}
#userLink {
    white-space: nowrap;
    width: 38px;
    display: inline-block;
    padding-left: 5px;
}
.header_button {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
    color: #333;
    padding: 1px 3px 1px 0;
    line-height: 2;
}
.header_button.active {
    background-color: #ececec;
}

#navwrapper #navigation {
    white-space: nowrap;
}
#navwrapper #activitytype_menu .parent {
    padding: 3px 0 2px 6px;
    white-space: nowrap;
}
#navwrapper #activitytype_menu .parent,
#navwrapper .header_button {
    border-color: #587d49;
    box-shadow: none;
}

#navigation .header_button {
    display: inline-block;
}
#search_button {
    padding: 1px 8px;
    text-align: center;
}
#userLink > span {
    display: inline;
}
#userLink .none {
    display: none;
}
.sortList li {
    padding: 8px;
    border: 1px solid #ddd;
    background-color: #eeeeee;
    margin-bottom:5px;
}
.sortList li a {padding:0 10px;}
.handle {cursor: pointer;}

#userLinks {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #e9e9e9;
    z-index:900;
    text-align: left;
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.45);
    -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.45);
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
    width: 150px;
    right:5px;
    font-size:110%;
}
#userLinks li {display: block;}
#userLinks a {
    color:#666!important;
    padding: 7px 9px 7px 9px;
    display: block;
    border-bottom: 1px solid #e9e9e9;
    text-decoration: none;
    font-weight: normal;
}
#userLinks a:hover {
    background-color: #1f4b1a;
    color:#96bf91!important;
}
.search_highlight {
    background-color: #d60403;
    color:#fff;
    padding:0 2px;
}
#firstchartop {
    overflow-x:hidden;
    white-space:nowrap;
}

.iconbutton {
    display: inline-block;
    padding: 3px;
    border:1px solid #ccc;
    border-radius:3px;
    font-size:120%;
    background: #f4f4f4;
    font-family: 'trailforks';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.settingsIcon:before {
    content: "\e00c";
}
#trailAssociationLogo, #page_title_container #bikeparkLogo {
    position:absolute;
    top: 10px;
    right: 0;
}
#maintainers li {padding-bottom: 10px}
#maintainersTable li {
    width:31%;
    padding-right:2%;
    overflow: hidden;
}
#maintainersTable img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 25px;
}
#maintainers .user-image {width: 25px; height: 25px;}
.block img {
    max-width: 100%;
    height: auto;
}
.block img.newsimage {max-width: 220px; border-radius: 8px;}

ul.grid li {margin-bottom: 10px;}

.thumb_small {
    width:50px;
    max-height:50px;
    overflow: hidden;
}
.thumb_small img {
    width:100%;
    max-height:inherit;
}
.sortnavoff:link {
    background-color: #e9e9e9;
}

#fb-root {display: none;} /* responsive facebook like box */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {width: 100% !important;}

.page_directory th {
    font-weight: bold;
    width: 100px;
    vertical-align: top;
}
.morelink:after {
    content: "»";
}
.title-type .dicon_small {
    vertical-align: middle;
    font-size: 24px;
    line-height: 23px;
    margin-bottom: 4px;
    margin-left: 5px;
}
#ui-datepicker-div {z-index: 125!important;}
.ui-slider.ui-widget-content {
    z-index: 120;
}
#contributeMapRow {background: transparent!important; padding: 0;}
#contributeBottomLinks input[type="submit"]:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
td.counter {
    background-color: #ececec;
    text-align: center;
    color: #000;
}
td.counter a {color: #000;}
.table1 tbody tr:hover td.counter {
    background-color: #fec200 !important;
}
ul.toggleable-area {
    padding: 0;
    background-color: #E9E9E9;
    color: #616443;
    border: 1px solid #d3d3d3;
}
ul.toggleable-area li {
    padding: 3px;
    border-bottom: 1px solid #fff;
}
ul.toggleable-area li:last-child {border-bottom: none;}

/* fluid 3 column layout */
#fluidLeftFixedRight {
    display:table;
}
#leftcolumn, #rightcolumn {
    display:table-cell;
    width:250px;
    min-width: 250px;
    padding-left: 20px;
}
#fluidLeftFixedRight #main {
    display:table-cell;
    vertical-align: top;
}
.browseMap #main {width: 100%}
.browseMap #rightcolumn {min-width: 250px;}
#headerHelp {
    float: right;
    margin-top: 5px;
}
#regionParking {
    margin-top: 10px;
    float: right;
}
#underSlideLink {
    position: absolute;
    z-index: 200;
    right: 0;
    margin-top: -45px;
}
#userHome h3 {
    font-size: 120%;
}
#userHome .news-box2 .f22 {
    color: #006784;
    font-size: 140%!important;
    font-weight: normal;
}
@media screen and (min-width: 800px) {
    #userHome #videoflexthumbs .videothumb {
        max-width: 265px;
    }

    #userHome #videoflexthumbs .videothumb:last-child {
        margin-right: 0;
    }

    #userHome #videoflexthumbs .videothumb .thumbnail {
        width: 265px;
        height: 144px;
    }
}
#addFavRegions:hover {text-decoration: underline;}

#activityFeed {
    padding-bottom: 50px;
}

/* dashboard feed */
.block .activity {
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    overflow: hidden;
}
.activity .icon {
    position: absolute;
    top: 15px;
}
.activity .title {
    margin-left: 38px;
    font-size: 14px;
    color: #000;
    padding-top: 15px;
}
.activity .date {
    font-weight: normal;
    color: #999;
    margin: 2px 0 15px 38px;
    font-size: 10px;
    display: inline-block;
}
.activity .main {
    color: #111;
    font-size: 13px;
    margin: 0 0 15px;
    line-height: 16px;
}
.activity .remove-btn {display: none;}

/* comments */
#sort-container a {
    border-radius: 25px;
    padding: 2px 12px;
    color: #787878;
}
#sort-container a.sortnavon {
    background-color: #4f4f4f;
    color: #FFF;
    font-weight: 700;
}
#comment_wrap .textbox {
    height: 80px;
    margin-bottom: 10px;
}
.ridingareas.inline > li {
    vertical-align: top;
    margin-right: 5%;
}
#browseRegions .featured_country {
    column-span: all;
}
.greyscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}
.routeLabel {
    background-color: #fec200;
    color: #000;
}
.ridelogLabel {
    background-color: #acacac;
    color: #fff;
}
#ridelogTrails {
    overflow-y: scroll;
    max-height: 500px;
}
#ridelogReports {
    overflow-y: scroll;
    max-height: 440px;
}
#ridelogLifts, #ridelogJumps {
    overflow-y: scroll;
    max-height: 300px;
}
.breadcrumb_buttons li {
    display: inline;
}
.breadcrumb_buttons li span {
    display: block;
    float: left;
    background: #4f4f4f;
    text-align: center;
    padding: 4px 10px 4px 20px;
    position: relative;
    margin: 0 10px 0 0;
    font-size: 12px;
    text-decoration: none;
    color: #fff;

}
.breadcrumb_buttons li span:after {
    content: "";
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 15px solid #4f4f4f;
    position: absolute; right: -15px; top: 0;
    z-index: 1;
}

.breadcrumb_buttons li span:before {
    content: "";
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 15px solid #fff;
    position: absolute; left: -3px; top: 0;
}

.breadcrumb_buttons li:first-child span {
    border-top-left-radius: 5px; border-bottom-left-radius: 5px;
}
.breadcrumb_buttons li:first-child span:before {
    display: none;
}
.breadcrumb_buttons li:last-child span {
    padding-right: 30px;
    border-top-right-radius: 15px; border-bottom-right-radius: 15px;
}
.breadcrumb_buttons li:last-child span:after {
    display: none;
}
.breadcrumb_buttons li span:hover {
    background: #fdcc08;
}
.breadcrumb_buttons li span:hover:after {
    border-left-color: #fdcc08;
}
#beta {
    float: left;
    margin-top: 15px;
}
#trail_info, #route_info {position: relative;}
#page_title .translateLink {
    top: 1px;
    left: 0;
    right: auto;
}
#page_title_container {
    position: relative;
    padding: 2px;
    display: flex;
}
#page_title_container > div:first-child {
    flex: 0 0 90%;
    text-align: left;
}
#page_title_container > div:last-child {
    flex: 1;
    text-align: right;
}
#page_title_container #page_title h1 {
    margin-bottom: 0;
}
.translateLink {
    position: absolute;
    right: 0;
    top: 5px;
    margin-top: 15px;
    background-color: #d4d4d4;
    color: #666666;
    padding: 3px!important;
    font-size: 10px!important;
    line-height: 10px!important;
    cursor: pointer;
    opacity: 0.9;
}
.comtext {
    position: relative;
}
#trail_description .translateLink {
    top: 15px;
}
#region_description, #trail_description, #report_description {
    word-wrap: break-word;
}
#trail_description {
    margin-top: 19px;
}
#trail_description a {text-decoration: none;}

#announcement {
    text-align: center;
}
#announcement a {
    display: block;
    background-color: #fec200;
    color: #000;
    padding: 3px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #ffd989;
}
#hide_announcement {
    float: right;
    padding-top: 3px;
    padding-right: 10px;
}

.startIcon {
    font-family: 'trailforks';
    font-weight:normal;
    font-style:normal;
    display:inline-block;
    font-size: 12px;
    color: #42d030;
    -webkit-font-smoothing: antialiased;
}
.startIcon:before {
    content:"\e016";
}
/* Red SQUARE (not a circle) so start vs end is distinguishable by shape, not
   colour alone — accessible for colour-blind users. Sized in em off font-size so
   the .endIconSmall variant (route planner) still scales down. */
.endIcon {
    display:inline-block;
    box-sizing: border-box;
    font-size: 12px;
    width: 1em;
    height: 1em;
    background-color: #cc0000;
    border: 0.16em solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.endIcon:before {
    content:"";
}
.endIconSmall {
    font-size: 8px;
}

#homeFavReportsInner {
    max-height: 87px;
    overflow-y: auto;
    overflow-x: hidden;
}
#homeFavReportsInner .badge {
    position: inherit;
    font-size: 9px;
    float: right;
}
#homeFavReports .helpLink {
    font-size: 10px;
    opacity: 0.4;
}
#pageInfo {
    position: absolute;
    z-index: 99;
    padding: 10px;
    background-color: #000;
    opacity: 0.7;
    margin: 10px 7px;
}
#pageInfo h1 {
    font-size: 2.2em;
    color: #ffffff;
    margin: 0;
}
#pageInfo h1 a {
    color: #ffffff;
}
#pageInfo h1 a:hover {
    color: #666!important;
}
#pageInfo .breadcrumb {
    color: #ccc;
    font-size: 0.8em;
    background-color: #4b4b4b;
    padding: 3px;
    overflow-x: hidden;
    white-space: nowrap;
}


/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }


/* activity type intro modal */
.featherlight.tf-actintro-modal,
.featherlight.tf-actintro-modal:last-of-type {
    background: rgba(0, 0, 0, 0.75);
}
.featherlight.tf-actintro-modal .featherlight-content {
    padding: 0;
    border-bottom: 0;
    width: 92%;
    max-width: 780px;
    max-height: 90%;
    overflow-y: auto;
    border-radius: 12px;
}
.featherlight.tf-actintro-modal .featherlight-close-icon {
    background: transparent;
    color: #666;
    font-size: 22px;
}
#tfActIntro {
    padding: 22px;
}
.tfActIntro-title {
    font-size: 20px;
    font-weight: bold;
    color: #2a2a2a;
    margin-bottom: 8px;
    padding-right: 30px;
}
.tfActIntro-intro {
    color: #666;
    margin: 0 0 8px 0;
    line-height: 1.4;
}
.tfActPick-group {
    margin-top: 12px;
}
.tfActPick-groupTitle {
    font-weight: bold;
    font-size: 14px;
    color: #2a2a2a;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 4px;
    margin-bottom: 7px;
}
.tfActPick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}
.tfActPick-list li {
    margin: 0;
    padding: 0;
}
.tfActPick-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: 100%;
    /* must not rely on featherlight's `.featherlight * {box-sizing:border-box}` —
       outside the lightbox the padding would be added to height:100% and the box
       would overflow its grid cell, closing up the gaps */
    box-sizing: border-box;
    text-align: left;
    background: #f4f4f4;
    border: 2px solid #f4f4f4;
    border-radius: 8px;
    padding: 9px 10px;
    cursor: pointer;
    color: #2a2a2a;
    font-size: 13.5px;
    line-height: 1.2;
}
.tfActPick-opt:hover {
    background: #e7e7e7;
    border-color: #e7e7e7;
}
.tfActPick-opt.selected {
    border-color: #366b2d;
    background: #fff;
}
.tfActPick-icon {
    font-size: 21px;
    flex: 0 0 auto;
}
.tfActPick-label {
    flex: 1 1 auto;
}
/* the header picker is a real radio form — the whole box is the label and the
   input itself is hidden, so it styles identically to the popup's buttons */
.tfActPick-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.tfActPick-count {
    display: block;
    font-size: 11px;
    color: #959595;
    margin-top: 2px;
}
/* save sits in the last column of the final group's row, filling the gap left by
   that group being short of a full row. -2/-1 keeps it in the last column at
   every breakpoint as the column count drops */
.tfActPick-submit {
    grid-column: -2 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.tfActIntro-foot {
    margin-top: 14px;
    text-align: center;
}
.tfActIntro-skip {
    background: none;
    border: 0;
    color: #666;
    text-decoration: underline;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 14px;
}
@media screen and (max-width: 768px) {
    .featherlight.tf-actintro-modal .featherlight-content {
        width: 96%;
        max-width: none;
        max-height: 94%;
        margin: 0;
        border-radius: 12px;
    }
    #tfActIntro {
        padding: 18px 14px;
    }
    .tfActIntro-title {
        font-size: 18px;
    }
    .tfActPick-list {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 480px) {
    #tfActIntro {
        padding: 16px 12px;
    }
    /* drop the second lead paragraph, the picker itself makes the point */
    .tfActIntro-intro + .tfActIntro-intro {
        display: none;
    }
    .tfActPick-group {
        margin-top: 10px;
    }
    .tfActPick-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .tfActIntro-foot {
        margin-top: 10px;
    }
}


/* photo modal */
.tf-photo-modal .featherlight-content {
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    border-bottom: 0;
    width: 95%;
    height: 95%;
    margin: 0;
    background-color: #232323;
}
.tf-photo-modal .featherlight-close-icon {
    background: #666;
    color: #fff;
}
.photo-modal#fluidLeftFixedRight {
    width: 100%;
    height: 100%;
}
.photo-modal #rightcolumn {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    background-color: #f3f3f3;
}
.photopage #photomain {
    width: calc(100% - 270px);
}
.photopage #rightcolumn {
    padding-top: 0;
}
.photo-modal #rightcolumn .inner {
    overflow-y:auto;
}
.photo-modal #photomain {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}
.tf-photo-modal #photomain {
    vertical-align: middle;
}
.tf-photo-modal #photomain {
    background-color: #232323;
    padding-bottom: 0;
}
.photopage #content-container {
    background-color: #f3f3f3;
}
.tf-photo-modal .largeimage img {
    margin-bottom: -5px;
}
.photopage .largeimage img {
    box-shadow: 0 0 8px rgba(50,50,50,.4);
}
.photopage .photo-modal {
    margin: 10px auto;
}
.photo-modal .img-responsive-size-container {
    margin-bottom: -5px;
    display: inline;
}
.largeimage.next-img-hover, .largeimage.prev-img-hover {
    position: relative;
    cursor: pointer;
}
.largeimage.next-img-hover:after ,
.largeimage.prev-img-hover:after {
    font-family: 'trailforks';
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    font-size: 4em;
    vertical-align: middle;
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align:   center;
    -webkit-align-items: center;
    -ms-flex-align:  center;
    align-items: center;
    top: 0;
    bottom: 0;
    height: 100%;
    color: #fff;
    text-shadow: 0 0 5px #222;
}
.largeimage.prev-img-hover:after {
    content: "\e603";
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    left: 15px;
}
.largeimage.next-img-hover:after {
    content: "\e603";
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    right: 15px;
}

.navbox {
    cursor: default;
    margin: 0 auto 10px auto;
    color: #777;
}
.navbox-top {
    display: block;
    padding: 8px 10px;
    background: #fff;
    border-radius: 5px 5px 0 0;
    border: 1px solid #ddd;
    font-size: 16px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.navbox-top .subtitle {
    font-size: 10px;
    color: #555;
    display: block;
    margin-top: 3px;
    text-align: center;
}
.navbox-top.target-hover, .navbox-top:hover {
    color: #fff;
    background: #b0b0b0;
    border-color: #b0b0b0;
    z-index: 2;
    text-decoration: none;
}
.navbox-next, .navbox-prev {
    text-align: center;
    display: inline-block;
    font-size: 13px;
    color: #ccc;
    margin-top: -1px;
}
.navbox-prev {
    border-radius: 0 0 0 5px;
    float: left;
    width: 50%;
}
.navbox-next {
    width: 50%;
}
.navbox-next a, .navbox-next span,
.navbox-prev a, .navbox-prev span {
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px 8px;
    display: block;
    position: relative;
    z-index: 1;
}
.navbox-prev a, .navbox-prev span {
    border-radius: 0 0 0 5px;
}
.navbox-next a, .navbox-next span {
    border-radius: 0 0 5px 0;
}
.navbox-prev a:hover,
.navbox-next a:hover,
.navbox-prev a.target-hover,
.navbox-next a.target-hover {
    color: #fff;
    border-color: #b0b0b0;
    background: #b0b0b0;
    z-index: 2;
    text-decoration: none;
}

.stats {
    font-size: 0;
    padding: 0;
}
.stats .stat {
    font-size: 8px;
    display: inline-block;
    padding: 7px;
    text-align: center;
}
.stats .stat:first-child {
    border-left: 0;
}
.stat .stat-num {
    display: block;
    font-size: 16px;
}
.stat .stat-label {
    color: #777;
    text-transform: uppercase;
    font-size: 10px;
}

#rightcolumn dl {
    font-size: 12px;
    margin: 0;
}
#rightcolumn dt {
    width: 80px;
    float: left;
    display: inline-block;
    color: #555;
    font-weight: bold;
    font-size: 11px;
    text-align: left;
}
#rightcolumn dd {
    margin-left: 90px;
    margin-bottom: 3px;
    color: #666;
    text-align: left;
}
#rightcolumn dd .time {
    color: #666 !important;
}

#rightcolumn .ibox {
    padding: 8px;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
    margin: 10px 0;
}
#rightcolumn .ibox .heading {
    clear: left;
    color: #777;
    font-size: 10px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}
#rightcolumn .user-image-img {
    max-width: 40px;
}
#rightcolumn #comment_wrap .user-image-img {
    max-width: 25px;
}
#rightcolumn .commentowner, #rightcolumn .alt2 {
    background-color: transparent;
}
#rightcolumn .cmcont {
    margin-bottom: 5px;
}
#rightcolumn #comment_wrap .textbox {
    height: 20px;
    min-height: 20px;
    margin-bottom: 0;
}
#rightcolumn .commentreply2 {
    margin-left: 27px;
}
.phototraillinks {
    font-size: 90%;
    text-align: center;
}
.phototraillinks a {
    color: #cccccc;
}
.phototraillinks .grey {
    color: #cccccc;
}
.description img {
    max-width: 100%!important;
    height: auto!important;
}
.route_preview {
    width: 75px;
    height: 75px;
    max-width: none!important;
}


#videoflexthumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-count: 5;
}
#videoflexthumbs .videothumb {
    max-width: 220px;
    margin-bottom: 20px;
    margin-right: 15px;
    vertical-align: center;
}
#videoflexthumbs .videothumb .thumbnail {
    width: 220px;
    height: 124px;
    display: block;
    overflow: hidden;
    border-radius: 8px;
}
#videoflexthumbs .videothumb .thumbnail img {
    width: 100%;
    height: auto;
}
#videoflexthumbs .videothumb .video_title {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3em;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    margin: 6px 0;
    font-weight: bold;
}
#videoflexthumbs .videothumb .channel_logo {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
#videoflexthumbs .videothumb .duration {
    z-index: 40;
    position: absolute;
    margin: 2px 2px;
    background-color:  rgba(0, 0, 0, 0.6);
    padding: 2px;
    color: #ffffff;
    font-size: 10px;
}
.news-photo-element-height {
    padding-bottom: 0!important;
}
#routeSectionList li span {
    padding-right: 5px;
}
.seCount {
    padding: 2px 5px;
    width:18px;
    vertical-align:top;
}
#activitytype_submenu .inner {
    max-width: 780px; /* matches the intro popup so the grouped grid holds 4 per row */
}
#activitytype_submenu .smaller {
    margin-left: 48px;
}


.pointIcon {
    font-family: 'trailforks';
    font-weight:normal;
    font-style:normal;
    display:inline-block;
    font-size: 14px;
    color: #458338;
    -webkit-font-smoothing: antialiased;
}
.pointIcon:before {
    content:"\e016";
}
#activitytype_select input[type=radio] {
    display: none;
}
#activitytype_select .flex li {
    min-width: 170px;
    text-align: left;
}
#activitytype_select .flex li:hover {
    background-color: #f3f3f3;
}
ol.circles-list {
    list-style-type: none;
    margin: 0;
    margin-left: 4em;
    padding: 0;
    counter-reset: li-counter;
}
ol.circles-list > li{
    position: relative;
    margin-bottom: 70px;
    padding-left: 4.5em;
    min-height: 3em;
}
ol.circles-list > li:before {
    position: absolute;
    top: 0;
    left: -0.6em;
    width: 1.2em;
    height: 1.2em;

    font-size: 2.5em;
    line-height: 1.2;
    text-align: center;
    padding: 10px;
    color: #f5f5f5;

    border: 3px solid #c5c5c5;
    border-radius: 50%;
    background-color: #3f4041;
    content: counter(li-counter);
    counter-increment: li-counter;
}
#contestgrid > li {
    min-height: 217px;
}
.trail-left .elevationchart, .trail-left #__elevation_chart_target__0 {
    height: 317px;
    margin-bottom: 20px;
}
/* contribute bulk trail form */
#actEditTable {
    width:100%;
    border-collapse:collapse;
    border-spacing: 0;
}
#actEditTable td, #actEditTable tbody th {
    padding:5px;
    text-align: left;
    border-bottom: 1px solid #ccc;
    height: 30px;
}
#actEditTable thead tr {
    background-color:#333333;
    color:#cccccc;
    filter: none;
}
#actEditTable thead th {
    border: 1px solid #000;
    text-align: left;
    padding:5px;
    filter: none;
}
#actEditTable thead th > b {
    margin:5px;
    display: block;
    min-height: 20px;
}
#actEditTable td.selected {
    background-color: #29691f;
}
table.row-highlight tbody > tr:hover > td {
    background-color: #f2ffef !important;
}
/* HOVER ROW highlight colors */
table.hover-highlight tbody > tr:hover > td, /* override tablesorter theme row hover */
table.hover-highlight tbody > tr.odd:hover > td,
table.hover-highlight tbody > tr.even:hover > td {
    background-color: #ffff98 !important;
}
/* HOVER COLUMN highlight colors */
.hover-highlight tbody tr td:hover::after,
.hover-highlight tbody tr th:hover::after {
    background-color: #ffa!important;
}
.hover-highlight td:hover::after, .hover-highlight th:hover::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 999em;
    left: 0;
    top: -555em;
    z-index: -1;
}
.hover-highlight{
    overflow: hidden;
}
.hover-highlight td, .hover-highlight th {
    position: relative;
    outline: 0;
}
table.hover-highlight, table.hover-highlight tbody > tr > td,
table.hover-highlight tbody tr.even > th,
table.hover-highlight tbody tr.even > td,
table.hover-highlight tbody tr.odd > th,
table.hover-highlight tbody tr.odd > td {
    background: transparent;
}
table.hover-highlight td:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -3;
}
/* contribute bulk trail form */

/* welcome page */
.section {
    position: relative;
    word-wrap: break-word;
    margin-bottom: 40px;
}
.section-fullscreen {
    padding-top: 80px;
    padding-bottom: 3rem;
}
.section-container {
    position: relative;
    word-wrap: break-word;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1140px;
}
.section-padding {
    padding: 40px 0;
}
.section-grey-bg {
    background-color: #f3f3f3;
}
.parallax-mirror {
    background-color: #333333;
}
.fontshadow {
    text-shadow: 2px 2px 2px #000;
}
.darkTransBG {
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
}
.imgblock {
    display: inline-block;
}
.grid-cell .photogrid .thumb {
    display: block;
    margin-bottom: 0;
}
/* welcome page */
.outside-black-banner {
    background-color: #333333;
}
#main .outside-black-banner {
    border-radius: 6px;
}
.outside-black-banner2 {
    background-color: #000000;
}
#outsideMenu {
    margin: 10px 5px 0 0;
}
#menu #outsideMenu {
    margin: 0;
}
#menu #outsideMenu a {
    padding: 10px 15px 0 15px;
    height: 26px;
}
#menu #outsideMenu .yellowdownarrow {
    zoom: 0.7;
    -moz-transform: scale(0.7);
}
.outside-yellow-banner {
    background-color: #FDD20A;
    background-image: url("../../i/trailforks/outside_O_background2.svg");
    background-position: bottom right;
    background-repeat: no-repeat;
    color: #000000;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    max-width: 450px;
    margin: 0 auto;
}
#outside_new {
    margin: 0 auto;
    margin-bottom: 30px;
}
#outside_new > div {
    background-color: #000000;
    background-image: url("../../i/trailforks/outside_O_background.svg");
    background-position: bottom right;
    background-repeat: no-repeat;
}
#pro_new {
    margin: 0 auto;
    margin-bottom: 30px;
    padding: 0 15px;
}
#pro_new > div {
    background-color: #F5F5F5;
}
#outside_new img, #pro_new img {
    width: 90%;
    max-width: 200px;
    min-height: 37px;
}
.planblock {
    margin-bottom: 5px;
    max-width: 400px;
    border-radius: 8px;
    min-height: 120px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
}
.yellowdownarrow {
    background-color: #FDD20A;
    color: #000000;
    border-radius: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    position: relative;
}
.yellowdownarrow:after {
    width: 0;
    height: 0;
    border-left: 5px solid #FDD20A;
    border-right: 5px solid #FDD20A;
    border-top: 6px solid #000000;
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 5px;
}
.backarrow {
    border: solid #919191;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
#appview_nav a {
    padding: .8em 1em;
    font-size: 14px;
    line-height: 20px;
}
.vhack {
    height: 100%;
}
.vhack,
.vhack ~ * {
    display: inline-block;
    vertical-align: middle;
}

.act_mtb {
    background-color: #29691f;
}
.act_ebike {
    background-color: #000000;
}
.act_horse {
    background-color: #595e21;
}
.act_hike {
    background-color: #503725;
}
.act_trailrun {
    background-color: #59963e;
}
.act_moto {
    background-color: #fd7717;
}
.act_mototrials {
    background-color: #fd5028;
}
.act_atv {
    background-color: #d12123;
}
.act_snowmobile {
    background-color: #3b5999;
}
.act_snowshoe {
    background-color: #3eadd1;
}
.act_skialpine {
    background-color: #1493ff;
}
.act_skibc {
    background-color: #3b5999;
}
.act_skixc {
    background-color: #2e6ed8;
}

.cmp-revoke-consent {
    bottom: revert!important;
    left: revert!important;
    padding: revert!important;
}

.survey li {
    display: flex;
    align-items: flex-start
}
.survey input {
    margin-right: 10px;
    margin-top: 4px;
}
#tourHelper {
    position: fixed;
    bottom: 5px;
    right: 10px;
    z-index: 100;
}
#tour_resume {
    position: fixed;
    bottom: 30px;
    right: 80px;
    z-index: 100;
}
.responsive-wrapper { /* Appsflyer smart banner */
    z-index: 999!important;
}
.badgecount .bcc {
    position: absolute;
    background-color: #366b2d;
    color: #fff;
    padding: 0px 6px;
    font-size: 10px!important;
    border-radius: 6px;
    text-shadow: none;
    margin-top: -10px;
    margin-right: -10px;
    line-height: 18px;
    z-index: 20;
}
#notificationMenu .icon {
    display: inline-block;
    width: 13px;
}
.cursor-move {
    cursor: move;
}
.block-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 20px;
    line-height: 1;
    color: #e7e7e7;
    cursor: pointer;
}
.block-close:hover { color: #333; }
#filterActivityType .makecols2 {
    display: block;
}

#filterSorting label {
    display: inline-block; width: 60px;
}

#trail_info {
    position: relative;
}
#updateDescriptionContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #f3f3f3;
    border: 1px solid #DDD;
    border-radius: 5px;
    width: fit-content;
    padding: 8px;
    margin: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#quickDescription {
    width: 100%;
    box-sizing: border-box;
}
#updateDescriptionTitleContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.page_trail .routecardtitle {
    font-size: 14px!important;
}
@media (max-width: 767px) {
    .page_trail .trailbuttons {
        margin: 20px 0 20px 0!important;
    }
    .page_trail #mapViewMenu {
        display: none;
    }
    .page_trail #trail_info2 {
        margin-top: 20px;
    }
    .page_trail #comment_wrap {
        margin-bottom: 20px;
    }
    .page_trail .block {
        margin-bottom: 60px;
    }
    .page_trail #commentform {
        padding-bottom: 20px;
    }
    .page_trail #recent_reports .badge {
        display: none;
    }
    .page_trail #updateDescriptionContainer {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        z-index: 0;
        background-color: #CCC;
        border: 1px solid #666;
        border-radius: 5px;
        width: fit-content;
        padding: 12px;
        margin-bottom: 15px;
    }
    .page_trail #basicTrailStats {
        margin-bottom: 20px!important;
    }
    .page_trail .mapcontainer {
        text-align: center;
        margin-bottom: 20px;
    }
    .page_trail .mapcontainer img {
        width: 100%;
    }
}


/* Announcement Modal */
#announcementModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.6);
    max-width: 100%!important;
}
#announcementModalInner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 10px;
    width: 480px;
    max-width: calc(100% - 32px)!important;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
#announcementModal .announcement-close-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px 0;
}
#announcementClose {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    padding: 0;
}
#announcementBody {
    padding: 0 28px 20px;
}
#announcementCta {
    padding: 0 28px 28px;
    display: none;
}
#announcementCtaBtn {
    display: inline-block;
    text-decoration: none;
}
@media (max-width: 600px) {
    #announcementModalInner {
        max-height: 100vh;
        max-width: 100%;
        border-radius: 0;
        width: 100%;
    }
}
.none { display: none; }
/* Activity type reference list - grouped id/icon/colour rows used by the
   /about/metadata/ documentation page. The swatch and icon colours are
   data-driven from trailforks_getActivityTypes(), so only the geometry is
   defined here. */
.tf-actgroup {
    margin: 0 0 18px;
}
.tf-actgroup__title {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
}
.tf-actgroup__info {
    margin: 0 0 8px;
    font-size: 12px;
    color: #888;
}
.tf-actlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tf-actlist__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    line-height: 1.4;
    border-radius: 3px;
}
/* trail=true - trails can be built and rated for these. See the legend on
   /about/metadata/ for what that actually changes. */
.tf-actlist__item--trail {
    background: #ececec;
}
.tf-actlegend {
    margin: 0 0 20px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
}
.tf-actlegend__row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.tf-actlegend__row + .tf-actlegend__row {
    margin-top: 8px;
}
.tf-actlegend__key {
    flex-shrink: 0;
    width: 26px;
    height: 15px;
    margin-top: 2px;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
    background: #fff;
}
.tf-actlegend__key--trail {
    background: #ececec;
    border-color: #d5d5d5;
}
.tf-actlist__swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.15);
    flex-shrink: 0;
}
.tf-actlist__icon {
    font-size: 17px;
    line-height: 1;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.tf-actlist__id {
    min-width: 22px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.tf-actlist__hex {
    margin-left: auto;
    font-size: 11px;
    color: #aaa;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .tf-actlist {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Weather block (.tfweather)

   Rendered by the RMS `weather` op and shared by the trail page, the region
   page and the MapV2 trail detail panel, so it is styled in core rather than
   in any one of those stylesheets. Sizes are fluid so the same markup works in
   a full-width page column and in a ~500px map panel.
   --------------------------------------------------------------------------- */
.tfweather {
    margin-bottom: 15px;
}
.tfweather__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.tfweather__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #8a8a8a;
}
.tfweather__place {
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
    color: #111111;
}
.tfweather__date {
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}
.tfweather__now {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 0 16px;
}
.tfweather__nowmain {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.tfweather__icon {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
}
.tfweather__temp {
    font-size: 40px;
    line-height: 44px;
    font-weight: 700;
    color: #111111;
}
.tfweather__caption {
    font-size: 14px;
    color: #4a4a4a;
}
.tfweather__stats {
    text-align: right;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}
.tfweather__stat--hl {
    color: #111111;
    font-weight: 600;
}
.tfweather__forecast {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
}
.tfweather__day {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.tfweather__dayname {
    font-size: 13px;
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 4px;
}
.tfweather__dayicon {
    width: 40px;
    height: 40px;
}
.tfweather__dayhigh {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
}
.tfweather__daylow {
    font-size: 14px;
    color: #8a8a8a;
}
.tfweather__dayrain {
    margin-top: 4px;
    font-size: 12px;
    color: #a0a0a0;
}
/* Precipitation reads as the exception, so only wet days get colour */
.tfweather__dayrain.is-wet {
    color: #1493ff;
    font-weight: 600;
}
.tfweather__iconlink {
    display: inline-block;
    line-height: 0;
}

/* ---------------------------------------------------------------------------
   Static star row — shared component

   Read-only stars rendered as ★ characters, coloured by `.is-on`,
   `.is-half` and `.is-off`. Size comes from the container's font-size, so the
   same markup serves the big ratings summary and a 13px review row. For an
   interactive rating use star_rating() instead, which brings its own widget.
   --------------------------------------------------------------------------- */
.tf-stars {
    white-space: nowrap;
    letter-spacing: 1px;
}
.tf-stars .is-on,
.tf-stars .is-half {
    color: #111111;
}
.tf-stars .is-half {
    opacity: .45;
}
.tf-stars .is-off {
    color: #d0d0d0;
}
/* Modifier: the site's gold rather than the default black */
.tf-stars--gold .is-on,
.tf-stars--gold .is-half {
    color: #fec200;
}

/* ---------------------------------------------------------------------------
   Ratings summary — shared component

   Average, ratings count and a 5-to-1 breakdown. Used by the trail page's
   reviews section and the map panel's Reviews tab, so it lives in core rather
   than the map-only sheet. Rendered by Trailforks_Trail_Snippets_Ratingssummary.
   --------------------------------------------------------------------------- */
.tf-ratings {
    margin-bottom: 6px;
}
.tf-ratings__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
}
.tf-ratings__avg {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tf-ratings__score {
    font-size: 34px;
    line-height: 41px;
    font-weight: 700;
    color: #000000;
}
.tf-ratings__stars {
    font-size: 18px;
}
.tf-ratings__count {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 16px;
    border-left: 1px solid #e0e0e0;
    color: #000000;
    text-decoration: none;
}
.tf-ratings__count-value {
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
}
.tf-ratings__count-label {
    font-size: 13px;
}
.tf-ratings__breakdown {
    padding-bottom: 12px;
}
.tf-ratings__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.tf-ratings__rownum {
    width: 10px;
    text-align: center;
    font-size: 15px;
}
.tf-ratings__rowstar {
    color: #111111;
    font-size: 13px;
}
.tf-ratings__bar {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 100px;
    background: #e4e4e4;
    overflow: hidden;
}
.tf-ratings__fill {
    display: block;
    height: 100%;
    border-radius: 100px;
    background: #111111;
}
.tf-ratings__pct {
    width: 42px;
    text-align: right;
    font-size: 14px;
}

/* Rider skill score: profile block (profile/snippets/skill.php) and riders-like-you block */
.tf-skill__row { margin-bottom: 12px; }
.tf-skill__row--provisional { opacity: .75; }
.tf-skill__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tf-skill__activity { font-weight: 600; }
.tf-skill__score strong { font-size: 18px; }
.tf-skill__bar { display: flex; height: 8px; margin: 4px 0; overflow: hidden; border-radius: 4px; background: #eeeeee; }
.tf-skill__seg { display: block; height: 100%; }
.tf-skill__seg--1 { background: #ffffff; box-shadow: inset 0 0 0 1px #cccccc; }
.tf-skill__seg--2 { background: #46b414; }
.tf-skill__seg--3 { background: #148cf0; }
.tf-skill__seg--4 { background: #000000; }
.tf-skill__seg--5 { background: #be0014; }
.tf-skill__seg--6 { background: #ff8500; }
.tf-skill__mix .dicon_small { vertical-align: middle; }
.tf-skill__note { margin-top: 4px; }
/* "Show all" activity types: a native details toggle, label swaps on open */
.tf-skill__more > summary { display: inline-block; margin-bottom: 12px; cursor: pointer; list-style: none; }
.tf-skill__more > summary::-webkit-details-marker { display: none; }
.tf-skill__more > summary::after { content: ' \25BE'; }
.tf-skill__more[open] > summary::after { content: ' \25B4'; }
.tf-skill__more-hide, .tf-skill__more[open] .tf-skill__more-show { display: none; }
.tf-skill__more[open] .tf-skill__more-hide { display: inline; }
/* "Fits your skill" chip on trails and routes: a .tf-pill tinted by how the challenge compares with the viewer's score */
.tf-skillfit { font-size: 12px; padding: 2px 8px; vertical-align: middle; }
.tf-skillfit--easy { --tf-pill-color: #546e7a; --tf-pill-bg: #eceff1; }
.tf-skillfit--fits { --tf-pill-color: #2e7d32; --tf-pill-bg: #e8f5e9; }
.tf-skillfit--stepup { --tf-pill-color: #a35f00; --tf-pill-bg: #fff3e0; }
.tf-skillfit--above { --tf-pill-color: #c62828; --tf-pill-bg: #ffebee; }
/* route planner: trails on the plan above the rider's skill score */
.tf-skillwarn { margin: 0 0 8px; line-height: 1.6; }
/* Discover Friends tab: riders at your level near you to follow */
.tf-friends__suggest { margin-top: 16px; }
.tf-friends__suggesthead { margin: 0 0 4px 8px; font-size: 13px; font-weight: 600; color: #1c1d1f; }
/* its own row class: the tab's JS treats a click on .tf-friends__member as focusing that friend */
.tf-friends__suggestrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; }
.tf-friends__suggest .follow-action-btn { flex: 0 0 auto; }
.tf-friends__avatar--none { display: inline-block; background: #e6e6e6; }
/* Riders like you (region/snippets/riderslikeyou.php): region page block; cards are the shared trail / route detail cards */
.tf-likeyou__sub { margin: 0 0 6px; }
.tf-likeyou__km { margin-bottom: 10px; }
.tf-likeyou__heading { margin: 16px 0 8px; font-size: 16px; }