/* Normalize.css */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}html,button,input,select,textarea{font-family:sans-serif;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0;}h2{font-size:1.5em;margin:0;}h3{font-size:1.17em;margin:0;}h4{font-size:1em;margin:0;}h5{font-size:0.83em;margin:0;}h6{font-size:0.75em;margin:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}blockquote{margin:1em 40px;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}p,pre{margin:1em 0;}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em;}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}q{quotes:none;}q:before,q:after{content:'';content:none;}small{font-size:75%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}dl,menu,ol,ul{margin:1em 0;}dd{margin:0 0 0 40px;}menu,ol,ul{padding:0 0 0 40px;}nav ul,nav ol{list-style:none;list-style-image:none;}img{border:0;-ms-interpolation-mode:bicubic;}svg:not(:root){overflow:hidden;}figure{margin:0;}form{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;white-space:normal;*margin-left:-7px;}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}button,input{line-height:normal;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible;}button[disabled],input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

@font-face {
    font-family: 'trailforks';
    src:url('../../i/trailforks/fonts/trailforks.eot?v=2');
    src: url('../../i/trailforks/fonts/trailforks.eot?v=2#iefix') format('embedded-opentype'),
    url('../../i/trailforks/fonts/trailforks.woff?v=2') format('woff'),
    url('../../i/trailforks/fonts/trailforks.ttf?v=2') format('truetype'),
    url('../../i/trailforks/fonts/trailforks.svg?v=2#trailforks') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PlusJakartaSans';
    src: url('../../c/fonts/PlusJakartaSans-VariableFont_wght.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

[data-icon]:before {
    font-family: 'trailforks';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* #debugbar {display: none} */
#debugbarbottom {display: none}
body {
    font-family: PlusJakartaSans,sans-serif!important;
    background-color: #fff;
    color: #636363;
    font-size: 1em;
    width: 100%;
    height: 100vh;
}
.container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas: "header" "main" "footer";
    grid-template-columns: 4fr;
    grid-template-rows: 68px 1fr 68px;
}
.container.appview {
    grid-template-areas: "main" "footer";
    grid-template-rows: 1fr 68px;
}
out-header {
    background-color: #222222;
    position: sticky;
    z-index: 20;
    display: block;
    top: 0;
    height: 68px;
}
.header {
    grid-area: header;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
    text-align: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 20px;
}
.main {
    grid-area: main;
    padding-top: 3em;
}
.footer {
    grid-area: footer;
}
.block {
    margin-bottom: 30px;
}
#title {
    margin: 0 auto;
    max-width: 1000px;
    margin-bottom: 2em;
}
#topContainer {
    margin: 0 auto;
    max-width: 1000px;
}
#mainContainer {
    margin: 0 auto;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 4em;
}
#mainLeft {
    margin-bottom: 2em;
}
.widecontent #mainContainer {
    display: block;
    max-width: 1200px;
}
.blankblock {
    background-color: #ffffff;
    padding: 10px;
}
.roundblock {
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e9e9e9;
    padding: 20px;
}
.logo {
    height: 30px;
}
.large {
    font-size: 1.5em;
}
.smaller {font-size:80%;}
.small {font-size:90%;}
.italic {font-style:italic;}
.bold {font-weight: bold;}
.grey, .grey a, a.grey {color:#666}
.grey2, .grey2 a, a.grey2 {color:#ccc}
.fullTime {
    display: none;
}
h1 {
    font-size: 2.1em;
    color: #333333;
    padding-bottom: 10px;
    font-weight: bold;
    letter-spacing: .03em;
}
h3 {
    color: #333333;
}
a {
    color: #0978b1;
    text-decoration: none;
}
.btn-menu {
    display: block;
    align-items: center;
    justify-content: center;
    padding: 10px;
    height: 44px;
    width: 44px;
    border: none;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    transition: 0.3s ease;
}
.btn-menu:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}
.btn-menu__bars {
    display: block;
    position: relative;
    width: 24px;
    height: 2px;
    border-radius: 3px;
    background-color: #fff;
    transition: 0.3s;
}
.btn-menu__bars:before, .btn-menu__bars:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: 0.3s;
}
.btn-menu__bars:before {
    transform: translate(0, -9px);
}
.btn-menu__bars:after {
    transform: translate(0, 9px);
}
.menu-open .btn-menu .btn-menu__bars {
    background-color: transparent;
}
.menu-open .btn-menu .btn-menu__bars:before {
    transform: rotate(45deg);
}
.menu-open .btn-menu .btn-menu__bars:after {
    transform: rotate(-45deg);
}
.listmenu > div:first-child {
    padding-top: 15px;
}
.listmenu > div:last-child {
    border-bottom: none;
}
.listmenu > div {
    padding: 30px 0;
    border-bottom: 1px solid #e9e9e9;
    display: grid;
    grid-template-columns: 0.1fr 2fr 0.2fr;
    grid-column-gap: 1em;
    cursor: pointer;
}
.listmenu img {
    margin-top: 8px;
}
.listmenu > div:hover {
    background-color: #f5f5f5;
}
.heading {
    color: #222222;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
.listmenu > div:hover .heading {
    color: #0978b1!important;
}
.backarrow {
    color: #222222;
    display: inline-block;
    width: 32px;
    height: 34px;
    line-height: 0.9em;
    display: inline-block;
    padding: 5px 8px;
    text-align: center;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.backarrow:hover {
    background-color: #dcdcdc;
    border-radius: 50%;
}
.formRow {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e9;
}
.padding-top-0 {
    padding-top: 0;
}
.formRow_checkbox {
    display: grid;
    grid-template-columns: 0.1fr 1fr;
    grid-column-gap: 15px;
}
.formRow_arrow {
    grid-template-columns: 0.1fr 1fr 0.1fr;
}
.formRow_checkbox > div:first-child {
    width: 40px;
}
.formRow_arrow > div:first-child {
    width: 50px;
}
.large input[type="checkbox"] {
    transform:scale(1.5, 1.5);
    margin-left: 5px;
}
input[type="checkbox"] {
    width: auto;
}
.margin-bottom-5 {
    margin-bottom: 5px;
}
.margin-bottom-10 {
    margin-bottom: 10px;
}
.red {
    color: #cc0000;
}
.green {
    color: #006700;
}
.black {
    color: #333333;
}
input, select {
    width: 100%;
    padding: 10px;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    box-sizing: border-box;
}
.button1 {
    display: inline-block;
    background-color: #ffd100;
    color: #000000;
    width: 100%;
    padding: 13px 20px;
    margin: 0;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s ease;
    text-align: center;
    box-sizing: border-box;
}
.button1.grey {
    background-color: #e9e9e9;
}
.button1.white {
    background-color: #fff;
    color: #000000;
    border: 2px solid #000000;
}
.button1:hover {
    background-color: #ffdc4e;
    color: #000000;
}
.center {
    text-align: center;
}
.makecols2 {
    -moz-column-count: 2;
    -moz-column-gap: 2.5em;
    -webkit-column-count: 2;
    -webkit-column-gap: 2.5em;
    column-count: 2;
    column-gap: 2.5em;
}
div.messages {
    background-color: #ffe69d;
    border-color: #fec200;
    color: #333333;
    background-position: 8px 8px;
    background-repeat: no-repeat;
    border: 1px solid;
    margin: 20px 0;
    padding: 10px
}
div.messages > div {
    display: flex;
    column-gap: 10px;
}
.floatright {float: right!important;}
.floatleft {float: left!important;}
.clickable {cursor: pointer;}
.settingsLinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}
.settingsLinks a:last-child {
    text-align: right;
}
.button1.green {
    background-color: #366b2d;
    border: 1px solid #060;
    color: #FFFFFF;
    background-image: none!important;
}
.garminconnectlink, .stravaconnectlink {
    background-color: #000000;
    color: #fff;
    display: block;
}
.nowrap {
    white-space: nowrap;
}
.none {
    display: none;
}
.table1 {
    width:100%;
    border-collapse:collapse;
    border-spacing: 0;
}
.table1 td, .table1 tbody th {
    padding: 6px;
    text-align: left;
    border-bottom: 1px solid #e7e7e7;
    height: 30px;
}
.table1 thead tr {
    background-color: #f3f3f3;
    color: #d2d2d2;
    font-weight: normal;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.table1 thead th {
    text-align: left;
    padding: 6px;
}

.badgesquare {
    color: #ffffff;
    font-weight: normal;
    background-color: black;
    padding: 3px 5px;
    border-radius: 1px;
    line-height: 1.9;
}
.badgesquare.yellow {
    background-color: #fec200;
    color:#fff;
}
.badgesquare.red {
    background-color: #cc0000;
    color:#fff;
}
.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; }
.closediv {
    font-size: 90%;
}

/** mobile responsive **/
@media (max-width: 768px) {
    .main {
        padding-top: 1em;
    }
    #title {
        margin: 10px;
    }
    h1 {
        font-size: 1.8em;
    }
    #mainContainer {
        display: block;
        margin: 0 10px;
    }
    .ridelogs_table thead {
        display: none;
    }
    .ridelogs_table td {
        border-bottom: none;
        height: auto;
    }
    .ridelogs_table tr {
        margin-top: 10px;
        padding-bottom: 10px;
        display: grid;
        grid-template-columns: 20px 0.5fr 1fr 0.5fr;
        grid-column-gap: 10px;
        border-bottom: 1px solid #e9e9e9;
    }
    .ridelogs_table td:nth-child(6) {
        display: none;
    }
    .ridelogs_table td:nth-child(7) {
        grid-row-start: 1;
        grid-column-start: 4;
        text-align: right;
    }
    .ridelogs_table td:nth-child(8) {
        grid-row-start: 2;
        grid-column-start: 4;
        text-align: right;
    }
    .ridelogs_table td:nth-child(4) {
        grid-row-start: 2;
        grid-column-start: 1;
    }
    .ridelogs_table td:nth-child(5) {
        grid-row-start: 2;
        grid-column-start: 3;
        grid-column-end: 4;
    }
}