@charset "UTF-8";
section.sessions-list .type-select { display: flex; justify-content: center; margin: 20px 0; }

section.sessions-list .type-select * { padding: 10px 20px; }

section.sessions-list .type-select *:first-child { border-radius: 15px 0 0 15px; }

section.sessions-list .type-select *:last-child { border-radius: 0 15px 15px 0; }

section.sessions-list .type-select a { background-color: #CCC; color: #333; }

section.sessions-list .type-select a:hover { text-decoration: none; }

section.sessions-list .type-select span, section.sessions-list .type-select a:hover { background-color: #ea2127; color: #FFF; }

section.sessions-list .type-select * { transition: background-color 0.3s, color 0.3s; }

section.sessions-list div.filters { text-align: center; }

section.sessions-list div.filters select { max-width: 200px; }

section.sessions-list div.no-sessions { margin: 30px 0; }

section.sessions-list div.sessions div.header { margin: 10px 0; font-size: 1.4em; border-top: 1px solid #CCC; padding: 10px 0 0 10px; }

section.sessions-list div.sessions div.header:first-child { border-top: none; }

section.sessions-list div.sessions .row { color: #2c2c2c; display: block; font-family: RaceBox-Light, serif; padding: 5px 10px; border-radius: 2px; transition: background-color 0.3s, color 0.3s, border-radius 0.8s, background-position 0.8s; background-position: center right 30px; font-size: 1.2em; /* @media (max-width: 500px) { .description {display: inline-block} .description, .export {padding:10px 0 0} .export {float:right} overflow:auto; padding: 0 0 10px 0; margin: 0; } */ }

section.sessions-list div.sessions .row:hover { background: #ea2127; background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path stroke="%23FFFFFF" stroke-width="4px" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M 5,17 13,10 5,3" /></svg>'); background-repeat: no-repeat; background-position: center right 5px; text-decoration: none; border-radius: 15px; }

section.sessions-list div.sessions .row:hover * { color: white; }

section.sessions-list div.sessions .row > * { display: inline-block; text-align: right; color: #666; }

section.sessions-list div.sessions .row > *:first-child { width: 60px; }

section.sessions-list div.sessions .row > *:nth-child(2) { width: 80px; }

section.sessions-list div.sessions .row > *:nth-child(3) { width: 100px; }

section.sessions-list div.sessions .row > *:nth-child(4) { width: 100px; }

section.sessions-list div.sessions .row .xl { width: 250px; }

section.sessions-list div.sessions .row > *:first-child { text-align: left; }

section.sessions-list div.sessions .row > *:last-child { text-align: right; }

section.sessions-list div.sessions .row .time { color: #ea2127; font-weight: bold; }

section.sessions-list div.sessions .row:hover .time { color: white; font-weight: normal; }

@media (max-width: 600px) { section.sessions-list div.sessions .row { font-size: 1em; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } section.sessions-list div.sessions .row > *:first-child { display: none; } section.sessions-list div.sessions .row > *:nth-child(2) { text-align: left; } }

section.sessions-list a.export { margin-left: 20px; }

section.login > div.c, section.change-password > div.c { max-width: 500px; }

section.login > div.c .errors p, section.change-password > div.c .errors p { color: #ea2127; font-size: 1.2em; }

section.login > div.c div.form-row, section.change-password > div.c div.form-row { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 0 0 0; }

section.login > div.c div.form-row label, section.change-password > div.c div.form-row label { display: inline-block; height: 34px; line-height: 34px; }

section.login > div.c div.form-row input, section.change-password > div.c div.form-row input { flex-grow: 2; margin: 0; }

section.login > div.c div.submit-row, section.change-password > div.c div.submit-row { text-align: center; margin-top: 15px; }

section.login > div.c label { min-width: 100px; }

section.change-password > div.c label { min-width: 180px; }

section.forgotten-password > div.c { max-width: 500px; }

section.forgotten-password > div.c .errors p { color: #ea2127; font-size: 1.2em; }

section.forgotten-password > div.c div.formrow { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 0 0 0; }

section.forgotten-password > div.c div.formrow label { display: inline-block; min-width: 180px; height: 34px; line-height: 34px; }

section.forgotten-password > div.c div.formrow input { flex-grow: 2; margin: 0; }

section.forgotten-password > div.c div.submitrow { text-align: center; margin-top: 15px; }

section.my-session-export div.session-description { /* background:#fdeae3; padding:20px; */ text-align: center; margin: 30px 0; }

section.my-session-export div.export-settings div.formrow { min-height: 35px; margin: 10px 0; }

section.my-session-export div.export-settings div.formrow p { margin: 5px 18px 5px 0; }

section.my-session-export div.export-settings label { min-width: 200px; display: inline-block; }

section.my-session-export div.export-settings ul.csv-software-list li { padding: 10px 0; }

section.my-session-export div.backlink { margin: 20px 0 0; }

/* These are used on few pages (login, forgotten password, etc) */
p.accent { font-weight: bold; }

p.beta-warning { color: #666; text-align: center; }

@keyframes arrowjump { 0% { top: 0; }
  25% { top: -7px; }
  50% { top: 0; }
  75% { top: -2px; }
  100% { top: 0; } }

#session-export-modal > div { max-width: 600px; }

#session-export-modal .contents { text-align: center; }

#session-export-modal .contents .formats a { display: inline-block; width: 120px; height: 120px; box-sizing: border-box; padding: 48px 45px 42px 5px; color: white; text-align: center; font-size: 24px; background: url(/assets/img/download-format-no-arrow.svg) center no-repeat; position: relative; }

#session-export-modal .contents .formats a::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(/assets/img/download-format-just-arrow.svg) center no-repeat; }

#session-export-modal .contents .formats a:hover { text-decoration: none; }

#session-export-modal .contents .formats a:hover::after { animation-name: arrowjump; animation-duration: 0.5s; animation-timing-function: ease-in-out; }

#session-share-modal > div { max-width: 500px; }

#session-share-modal .contents { position: relative; }

#session-share-modal .contents > * { margin-bottom: 20px; }

#session-share-modal .contents > .bottom { margin-bottom: 10px; }

#session-share-modal .contents input, #session-share-modal .contents button { margin: 0; }

#session-share-modal .contents .access-row { display: flex; justify-content: space-between; align-items: center; }

#session-share-modal .contents .access-row h4 { display: inline-block; }

#session-share-modal .contents .access-row select { padding-right: 30px; }

#session-share-modal .contents .sharing-mode { display: none; }

#session-share-modal .contents .sharing-mode.restricted .top { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }

#session-share-modal .contents .sharing-mode.restricted .top h4 { flex-grow: 2; margin: 0; padding: 0; }

#session-share-modal .contents .sharing-mode.restricted .followers { max-height: 300px; overflow: auto; }

#session-share-modal .contents .sharing-mode.restricted .followers .empty { display: none; color: #2c2c2c; text-align: center; padding: 30px; font-family: 'RaceBox-Light'; }

#session-share-modal .contents .sharing-mode.restricted .followers.no-followers .empty { display: block; }

#session-share-modal .contents .sharing-mode.restricted .followers .follower { display: grid; grid-template: 1fr 1fr / 1fr 32px; gap: 5px 10px; margin: 5px 10px 5px 0; padding: 5px 0; border-bottom: 1px solid #808186; }

#session-share-modal .contents .sharing-mode.restricted .followers .follower:last-child { border-bottom: none; }

#session-share-modal .contents .sharing-mode.restricted .followers .follower .name { grid-row: 1; grid-column: 1; font-size: 1.2em; }

#session-share-modal .contents .sharing-mode.restricted .followers .follower .email { grid-row: 2; grid-column: 1; font-size: 0.8em; color: #2c2c2c; }

#session-share-modal .contents .sharing-mode.restricted .followers .follower .delete { grid-row: 1 / span 2; grid-column: 2; align-self: center; height: 20px; background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path stroke="%23ea2127" stroke-width="3px" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M 2,2 18,18 M 2,18 18,2" /></svg>'); }

#session-share-modal .contents .sharing-mode.restricted .followers .follower .status { grid-row: 1 / span 2; grid-column: 2; align-self: center; height: 32px; background: url(/assets/img/yes-no.svg) no-repeat; background-position: -32px 0; }

#session-share-modal .contents .sharing-mode.restricted .followers .follower.allowed .status { background-position: 0 0; }

#session-share-modal .contents .sharing-mode.restricted .followers:empty:after { content: 'No one has access to this session but you'; text-align: center; padding: 10px; color: #9d9d9d; font-size: 0.8em; display: block; }

#session-share-modal .contents .bottom { display: flex; justify-content: space-between; flex-direction: row-reverse; }

#session-share-modal .contents .session-link-copied { position: absolute; opacity: 0; display: none; bottom: 0; left: 50%; margin: 0 0 0 -50px; width: 100px; background: #666; color: white; text-align: center; padding: 10px; border-radius: 5px 5px 0 0; }

#session-share-modal .contents.invite { display: none; }

#session-share-modal .contents.invite .email-input-container input { display: block; width: 100%; }

#session-share-modal .contents.invite .email-input-container .error { display: none; font-size: 0.8em; color: #ea2127; margin: 10px 0; font-weight: bold; }

#session-share-modal .contents.invite .email-input-container.error .error { display: block; }

#session-share-modal .contents.invite label { display: flex; gap: 10px; align-items: center; }

#session-share-modal .contents.invite label span { flex-grow: 2; }

#session-share-modal .contents.invite textarea { width: 100%; height: 80px; margin: 10px 0; resize: none; display: none; }

#session-share-modal .contents.invite.contents-enabled textarea { display: block; }

#session-share-modal .contents.main { display: block; }

#session-share-modal .contents.invite, #session-share-modal .contents.user-not-found-prompt { display: none; }

#session-share-modal.invite-mode .contents.main { display: none; }

#session-share-modal.invite-mode .contents.invite { display: block; }

#session-share-modal.user-not-found-prompt-mode .contents.main { display: none; }

#session-share-modal.user-not-found-prompt-mode .contents.user-not-found-prompt { display: block; }

@keyframes progressBar { 0% { background-position-x: -400%; }
  100% { background-position-x: 500%; } }

#session-share-modal.loading-s > div:after { content: ' '; position: absolute; top: 0; height: 10px; width: 100%; background-size: 80% 100%; background-clip: padding-box; background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><rect fill="%23ea212766" width="20px" height="20px"></rect></svg>'); background-repeat: no-repeat; animation: 2s ease-in-out progressBar; animation-iteration-count: infinite; }

.video-player { display: none; }

.video-player.visible { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 40px; }

.video-player.visible video { max-height: 80vh; max-width: 100%; }

.video-player.visible .controls { /* display:grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; */ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; }

.video-player.visible .controls input.dt { width: 120px; }

.video-player.visible button.round { border: 1px solid #ea2127; background: white; width: 34px; height: 34px; border-radius: 17px; font-size: 16px; font-family: Arial, sans-serif; font-weight: bold; color: #ea2127; padding: 0; text-align: center; }

.video-player.visible button.round:hover, .video-player.visible button.round.inverted { background: #ea2127; color: white; }

.video-player.visible .visible-in-edit-offset-mode { display: none; }

.video-player.visible .hidden-in-edit-offset-mode { display: inline-block; }

.video-player.visible.edit-offset-mode .visible-in-edit-offset-mode { display: inline-block; }

.video-player.visible.edit-offset-mode .hidden-in-edit-offset-mode { display: none; }

.video-player.visible .unlink { display: none; }

#session-videos-modal > div { max-width: 500px; }

#session-videos-modal .contents.list .no-videos-text { display: none; }

#session-videos-modal .contents.list.has-no-videos .no-videos-text { display: block; text-align: center; font-size: 1.2em; padding: 40px 0; }

#session-videos-modal .contents.list.has-no-videos .no-videos-text p { font-size: 0.8em; }

#session-videos-modal .contents.list.has-no-videos .videos-list { display: none; }

#session-videos-modal .contents.list .videos-list { overflow-y: auto; overflow-x: hidden; max-height: 600px; }

#session-videos-modal .contents.list .videos-list .video-row { margin: 5px 0; padding: 5px; display: grid; grid-template-rows: auto; grid-template-columns: 150px auto 100px; grid-template-areas: "thumbnail meta actions"; grid-column-gap: 10px; }

#session-videos-modal .contents.list .videos-list .video-row:hover { background-color: #CCCCCC; }

#session-videos-modal .contents.list .videos-list .video-row .thumbnail { grid-area: thumbnail; max-height: 150px; max-width: 150px; }

#session-videos-modal .contents.list .videos-list .video-row .meta { font-size: 0.8em; grid-area: meta; }

#session-videos-modal .contents.list .videos-list .video-row .meta .video-name { font-weight: bold; text-overflow: ellipsis; }

#session-videos-modal .contents.list .videos-list .video-row .actions { grid-area: actions; text-align: right; }

#session-videos-modal .contents.list .videos-list .video-row .actions a { cursor: pointer; display: block; }

#session-videos-modal .contents.upload-progress progress { width: 100%; }

#session-videos-modal .contents .bottom { display: flex; justify-content: space-between; flex-direction: row-reverse; }

#session-videos-modal .contents { display: none; }

#session-videos-modal.state-list .contents.list { display: block; }

#session-videos-modal.state-upload .contents.upload { display: block; }

#session-videos-modal.state-upload-progress .contents.upload-progress { display: block; }

#session-videos-modal.state-upload-failed .contents.upload-failed { display: block; }

#session-select-compare-modal > div { max-width: 500px; }

#session-select-compare-modal .filter-info, #session-select-compare-modal .toggle-incomplete { font-family: 'RaceBox-Light', 'RaceBox', sans-serif; color: #666; font-size: 0.8em; }

#session-select-compare-modal .list { overflow-y: scroll; max-height: calc(100vh - 150px); min-height: 100px; }

#session-select-compare-modal .list .group { padding: 0; border: 1px solid #CCCCCC; }

#session-select-compare-modal .list .group .sessions { max-height: 0; transition: max-height 0.5s ease-in-out; overflow: hidden; }

#session-select-compare-modal .list .group.open .sessions { max-height: 500px; }

#session-select-compare-modal .list .group .heading { font-family: RaceBox-Light, sans-serif; font-size: 1.2em; display: flex; flex-direction: row; justify-content: space-between; cursor: pointer; padding: 10px; color: #ea2127; }

#session-select-compare-modal .list .group .session { display: grid; grid-template-columns: 40px 70px 1fr 80px; grid-gap: 5px; padding: 5px 10px; border-top: 1px solid #CCCCCC; cursor: pointer; }

#session-select-compare-modal .list .group .session .idx { grid-column: 1; }

#session-select-compare-modal .list .group .session .laps, #session-select-compare-modal .list .group .session .runs { grid-column: 2; }

#session-select-compare-modal .list .group .session .owner { grid-column: 3; white-space: nowrap; text-overflow: ellipsis; }

#session-select-compare-modal .list .group .session .best { grid-column: 4; text-align: right; }

#session-select-compare-modal .list .group .session:hover { background-color: #CCCCCC; }

#session-delete-modal > div { max-width: 600px; }

#session-delete-modal .contents .bottom { display: flex; justify-content: space-between; flex-direction: row-reverse; }

#session-delete-modal .contents { display: none; }

#session-delete-modal.state-main .contents.main { display: block; }

#session-delete-modal.state-deleted .contents.deleted { display: block; }

#session-delete-modal.state-delete-failed .contents.delete-failed { display: block; }

section.session-analysis { margin: 30px 20px; }

section.session-analysis .title { display: flex; justify-content: space-between; flex-wrap: wrap; }

section.session-analysis .title h1 { color: #ea2127; line-height: 40px; margin: 0; vertical-align: baseline; }

section.session-analysis .session-buttons button.analysis-button { display: inline-block; width: 30px; height: 30px; border: none; position: relative; padding: 0; border-radius: 5px; transition: background-color 0.5s, filter 0.5s; }

section.session-analysis .session-buttons button.analysis-button::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/assets/img/analysis-buttons-red.svg); background-size: auto 100%; }

section.session-analysis .session-buttons button.analysis-button:focus, section.session-analysis .session-buttons button.analysis-button:active { outline: 0; box-shadow: none; }

section.session-analysis .session-buttons button.analysis-button:not(.active):hover, section.session-analysis .session-buttons button.analysis-button.active { background-color: #ea2127; }

section.session-analysis .session-buttons button.analysis-button:not(.active):hover::before, section.session-analysis .session-buttons button.analysis-button.active::before { filter: grayscale(100%) brightness(255); }

section.session-analysis .session-buttons button.analysis-button.map-toggle::before { background-position: 0 0; }

section.session-analysis .session-buttons button.analysis-button.bike-mode-toggle::before { background-position: 40% 0; }

section.session-analysis .session-buttons button.analysis-button.units-toggle::before { background-position: 10% 0; }

section.session-analysis .session-buttons button.analysis-button.share::before { background-position: 20% 0; }

section.session-analysis .session-buttons button.analysis-button.download::before { background-position: 30% 0; }

section.session-analysis .session-buttons button.analysis-button.videos::before { background-position: 50% 0; }

section.session-analysis .session-buttons button.analysis-button.compare::before { background-position: 60% 0; }

section.session-analysis .session-buttons button.analysis-button.delete::before { background-position: 70% 0; }

section.session-analysis .session-buttons.page-bottom { text-align: right; }

@media (min-width: 921px) { section.session-analysis .session-buttons.page-bottom { display: none; } }

@media (max-width: 920px) { section.session-analysis .session-buttons.page-top { display: none; } }

section.session-analysis .summary { background: #F0F0F0; padding: 20px; }

@media (min-width: 600px) { section.session-analysis .summary { display: grid; } section.session-analysis .summary.track { grid-template-columns: 1fr auto; grid-template-rows: auto auto; grid-template-areas: "track-name-container session0-meta-container" "session0-best-lap-container session0-meta-container"; } section.session-analysis .summary.track.comparing { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; grid-template-areas: "track-name-container track-name-container track-name-container" "session0-meta-container vs-symbol session1-meta-container"; } section.session-analysis .summary.drag { grid-template-columns: auto 1fr auto; grid-template-rows: auto; grid-template-areas: "session0-drag-best-results . session0-meta-container"; } section.session-analysis .summary.drag.comparing { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; grid-template-areas: "session0-drag-best-results . session1-drag-best-results" "session0-meta-container . session1-meta-container"; } section.session-analysis .summary.comparing .vs-symbol { grid-area: vs-symbol; position: relative; } section.session-analysis .summary.comparing .vs-symbol::before { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px; text-align: center; line-height: 40px; color: #333; font-family: 'RaceBox-Light', 'RaceBox', sans-serif; border: 1px solid #333; border-radius: 50%; content: "vs"; } }

section.session-analysis .summary .track-name-container { grid-area: track-name-container; }

section.session-analysis .summary .session-best-lap-container.session0 { grid-area: session0-best-lap-container; }

section.session-analysis .summary .session-best-results.session0 { grid-area: session0-drag-best-results; }

section.session-analysis .summary .session-best-results.session1 { grid-area: session1-drag-best-results; }

section.session-analysis .summary > .track-name-container span, section.session-analysis .summary > .session-best-lap-container span, section.session-analysis .summary > .session-best-results span { text-transform: uppercase; color: #999; font-size: .8em; }

section.session-analysis .summary > .track-name-container h4, section.session-analysis .summary > .session-best-lap-container h4, section.session-analysis .summary > .session-best-results h4 { text-transform: uppercase; color: #ea2127; font-size: 2em; margin-bottom: 20px; }

section.session-analysis .summary > .track-name-container h4 span:first-child, section.session-analysis .summary > .session-best-lap-container h4 span:first-child, section.session-analysis .summary > .session-best-results h4 span:first-child { color: #666; }

section.session-analysis .summary .meta-container { display: table; margin-bottom: auto; }

section.session-analysis .summary .meta-container.session0 { grid-area: session0-meta-container; }

section.session-analysis .summary .meta-container.session1 { grid-area: session1-meta-container; }

section.session-analysis .summary .meta-container > div { display: table-row; }

section.session-analysis .summary .meta-container > div > span { display: table-cell; }

section.session-analysis .summary .meta-container > div > span:first-child { padding-right: 20px; color: #666; white-space: nowrap; }

@media (min-width: 600px) { section.session-analysis .summary .meta-container > div > span:first-child { text-align: right; } }

section.session-analysis .summary .meta-container > div > span:last-child { width: 100%; }

@media (max-width: 601px) { section.session-analysis .summary .meta-container { margin-top: 20px; } }

section.session-analysis .summary:not(.comparing) .session-index-and-date-container { display: none; }

section.session-analysis .summary:not(.comparing) .meta-container .session-best-lap-container { display: none; }

section.session-analysis .summary:not(.comparing) .meta-container.session1 { display: none; }

section.session-analysis .summary.comparing > .session-best-lap-container { display: none; }

section.session-analysis .summary.comparing .meta-container.session0 span:last-child { color: #1840cd; }

section.session-analysis .summary.comparing .meta-container.session1 span:last-child { color: #fa1120; }

section.session-analysis .top-part { margin-top: 20px; }

@media (min-width: 600px) { section.session-analysis .top-part:not(.with-video-horizontal):not(.comparing) { display: grid; grid-template-columns: 250px auto; grid-template-rows: auto; grid-template-areas: "left-summary map-container"; } }

@media (min-width: 900px) { section.session-analysis .top-part.with-video-horizontal { display: grid; grid-template-columns: 250px 1fr minmax(auto, 1fr); grid-template-rows: auto; grid-template-areas: "left-summary map-container video"; } }

@media (min-width: 600px) { section.session-analysis .top-part.comparing { display: grid; grid-template-columns: 250px 1fr 250px; grid-template-rows: auto; grid-template-areas: "left-summary map-container right-summary"; } }

section.session-analysis .top-part .lap-summary, section.session-analysis .top-part .run-summary { background-color: #F0F0F0; border: 1px solid #CCC; grid-area: left-summary; justify-self: stretch; align-self: stretch; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: start; }

section.session-analysis .top-part .lap-summary .cell, section.session-analysis .top-part .run-summary .cell { margin-top: 5px; }

section.session-analysis .top-part .lap-summary .cell .title, section.session-analysis .top-part .lap-summary .cell .value, section.session-analysis .top-part .run-summary .cell .title, section.session-analysis .top-part .run-summary .cell .value { display: block; text-align: center; padding: 3px 10px; }

section.session-analysis .top-part .lap-summary .cell .title, section.session-analysis .top-part .run-summary .cell .title { color: #666; font-size: 0.8em; }

section.session-analysis .top-part .lap-summary .cell .value, section.session-analysis .top-part .run-summary .cell .value { font-size: 1.4em; font-family: RaceBox-Light, sans-serif; }

@media (max-width: 600px) { section.session-analysis .top-part .lap-summary .cell, section.session-analysis .top-part .run-summary .cell { display: flex; justify-content: space-between; flex-wrap: nowrap; padding: 10px; } section.session-analysis .top-part .lap-summary .cell .title, section.session-analysis .top-part .lap-summary .cell .value, section.session-analysis .top-part .run-summary .cell .title, section.session-analysis .top-part .run-summary .cell .value { font-size: 1em; font-family: RaceBox-Light, sans-serif; } }

section.session-analysis .top-part .lap-summary .cell.invisible, section.session-analysis .top-part .run-summary .cell.invisible { display: none; }

section.session-analysis .top-part .lap-summary .select select, section.session-analysis .top-part .run-summary .select select { width: 100%; border-width: 0 0 1px 0; margin: 0; }

section.session-analysis .top-part .lap-summary .select select:focus, section.session-analysis .top-part .run-summary .select select:focus { box-shadow: none; }

section.session-analysis .top-part .lap-summary button, section.session-analysis .top-part .run-summary button { width: 100%; border-width: 1px 0 0 0; margin: auto 0 0 0; }

section.session-analysis .top-part .lap-summary .session-exit-comparison-trigger, section.session-analysis .top-part .run-summary .session-exit-comparison-trigger { display: none; }

section.session-analysis .top-part:not(.comparing) .lap-summary.session1, section.session-analysis .top-part:not(.comparing) .run-summary.session1 { display: none; }

section.session-analysis .top-part.comparing .lap-summary.session1, section.session-analysis .top-part.comparing .run-summary.session1 { grid-area: right-summary; }

section.session-analysis .top-part.comparing .lap-summary.session0 .cell, section.session-analysis .top-part.comparing .run-summary.session0 .cell { color: #1840cd; }

section.session-analysis .top-part.comparing .lap-summary.session1 .cell, section.session-analysis .top-part.comparing .run-summary.session1 .cell { color: #fa1120; }

section.session-analysis .top-part .driving-line-container { grid-area: map-container; justify-self: stretch; min-height: 600px; position: relative; border: 1px solid #CCC; box-sizing: border-box; }

section.session-analysis .top-part .driving-line-container > * { width: 100%; height: 100%; position: absolute; }

section.session-analysis .top-part .video-player { grid-area: video; justify-self: stretch; align-self: stretch; }

section.session-analysis .chart-container { position: relative; }

section.session-analysis .chart-container .chart-zoom-hint { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); background-position: center center; background-repeat: no-repeat; pointer-events: none; transition: opacity ease-in-out; }

section.session-analysis .chart-container .chart-zoom-hint:before { content: 'Use ctrl + scroll to zoom the chart'; font-size: 1.2em; color: #F0F0F0; position: absolute; top: 50%; left: 0; margin-top: -20px; text-align: center; width: 100%; }

section.session-analysis.track .chart-container { height: 300px; }

section.session-analysis.drag { /* .chart-container {height:600px} */ }

section.session-analysis.drag .summary .session-best-results { display: table; }

section.session-analysis.drag .summary .session-best-results h4 { display: table-row; font-size: 1.5em; margin: 0; }

section.session-analysis.drag .summary .session-best-results h4 span { padding: 5px 0; display: table-cell; vertical-align: bottom; }

section.session-analysis.drag .summary .session-best-results h4 span:first-child { padding-right: 40px; }

section.session-analysis.drag .summary .session-best-results h4 span:last-child { text-align: right; }

section.session-analysis.drag .chart-container { grid-area: map-container; }

section.custom-track-preview #track-map-container { width: 100%; height: 600px; position: relative; }

section.custom-track-preview #track-map-container > * { width: 100%; height: 100%; position: absolute; }

section.pick-page form.pick input[type~=text] { width: 100%; }

section.pick-page form.pick .main-select { width: 100%; height: auto; }

section.leaderboard .sessions-list { display: grid; grid-template-columns: 50px auto 140px 70px; row-gap: 10px; }

section.leaderboard .sessions-list > div:nth-child(4n+2) div { color: #9d9d9d; }

section.leaderboard .sessions-list > div:nth-child(4n) { text-align: right; }

section.leaderboard .sessions-list p { grid-column: 1 / span 4; }

div.pager .listTablePager { margin-top: 20px; display: flex; flex-wrap: nowrap; justify-content: space-between; }

div.pager .listTablePager div { display: inline-block; }

div.pager .listTablePager .links a, div.pager .listTablePager .links span { margin: 0 10px; }

@media (max-width: 500px) { div.pager .listTablePager .links a, div.pager .listTablePager .links span { margin: 0 5px; } }

header .android-app-link { background: #fff; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #CCC; }

header:has(.shipping-info-banner) > .android-app-link { position: relative; top: 30px; }

section.manage-videos .videos .video { color: #2c2c2c; font-family: RaceBox-Light, serif; padding: 5px 10px; border-radius: 2px; transition: background-color 0.3s, color 0.3s, border-radius 0.8s, background-position 0.8s; margin: 10px 0; display: grid; grid-template-columns: 150px auto; grid-template-rows: 20px 20px auto; gap: 5px 10px; text-align: left; }

section.manage-videos .videos .video img { grid-row: 1 / span 3; grid-column: 1; max-width: 150px; max-height: 90px; justify-self: center; align-self: center; border-radius: 10px; }

section.manage-videos .videos .video .r1 { grid-row: 1; grid-column: 2; }

section.manage-videos .videos .video .r2 { grid-row: 2; grid-column: 2; }

section.manage-videos .videos .video .r3 { grid-row: 3; grid-column: 2; font-size: 0.8em; }

section.manage-videos .videos .video .track-name, section.manage-videos .videos .video .drag-discipline { font-weight: bold; }

section.manage-videos .videos .video .cloud-status.error { color: #ea2127; font-weight: bold; }

section.manage-videos .videos .video:hover { background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path stroke="%23FFFFFF" stroke-width="4px" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M 5,17 13,10 5,3" /></svg>'); background-color: #ea2127; background-repeat: no-repeat; background-position: center right 5px; text-decoration: none; border-radius: 15px; }

section.manage-videos .videos .video:hover * { color: white; }

section.manage-videos .videos .video:hover .cloud-status.error { color: white; }

.low-stock-banner { border: 5px solid #ea2127; border-radius: 5px; text-align: center; padding: 5px; color: #ea2127; }

.low-stock-banner > div:first-child { font-size: 1.3em; margin-bottom: 5px; text-transform: uppercase; }

.low-stock-banner > div:last-child { font-size: 1.1em; }

.low-stock-banner.tilt { position: absolute; top: 0px; right: 0px; transform: rotate(-10deg); background: rgba(255, 255, 255, 0.5); }

div.products-list { display: flex; justify-content: space-evenly; flex-wrap: wrap; align-items: stretch; }

div.products-list > a, div.products-list > div { width: 300px; display: flex; flex-direction: column; position: relative; color: #2c2c2c; padding: 20px 10px; transition: background-color 0.5s, border-radius 0.5s; cursor: pointer; }

div.products-list > a:hover, div.products-list > div:hover { background-color: #e4e4ec; text-decoration: none; border-radius: 20px; }

div.products-list > a .img, div.products-list > div .img { position: relative; height: 200px; }

div.products-list > a .img img, div.products-list > div .img img { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }

div.products-list > a h3, div.products-list > div h3 { text-align: center; }

div.products-list > a ul, div.products-list > div ul { text-align: left; flex-grow: 2; }

div.products-list > a .availability-warning, div.products-list > div .availability-warning { color: #ea2127; margin: 20px 0; text-align: center; }

div.products-list > a .buttons a, div.products-list > div .buttons a { margin: 0 5px; }

div.products-list > a .buttons a.see-more, div.products-list > div .buttons a.see-more { display: inline-block; margin-bottom: 20px; }

div.products-list > a > .red-button, div.products-list > div > .red-button { align-self: center; }

div.products-list > a p.price, div.products-list > div p.price { margin-top: 0; font-size: 24px; }

div.products-list > a p.price strike, div.products-list > div p.price strike { font-size: 18px; }

div.products-list > a p.price strong, div.products-list > div p.price strong { color: #ea2127; }

div.products-list > a:hover { text-decoration: none; }

section.checkout .form h3 { margin: 10px 0; }

section.checkout .form div.row { margin-bottom: 10px; position: relative; }

section.checkout .form div.row > input[type~=text] { width: 100%; padding-top: 20px; height: 48px; }

section.checkout .form div.row input[type~=text] + label { box-sizing: border-box; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: #666; font-family: RaceBox-Regular; padding: 5px 16px 0 16px; font-size: 0.8em; height: auto; transition: height 0.1s, padding 0.1s, font-size 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }

section.checkout .form div.row > input[type~=email] { width: 100%; padding-top: 20px; height: 48px; }

section.checkout .form div.row input[type~=email] + label { box-sizing: border-box; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: #666; font-family: RaceBox-Regular; padding: 5px 16px 0 16px; font-size: 0.8em; height: auto; transition: height 0.1s, padding 0.1s, font-size 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }

section.checkout .form div.row > input[type~=number] { width: 100%; padding-top: 20px; height: 48px; }

section.checkout .form div.row input[type~=number] + label { box-sizing: border-box; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: #666; font-family: RaceBox-Regular; padding: 5px 16px 0 16px; font-size: 0.8em; height: auto; transition: height 0.1s, padding 0.1s, font-size 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }

section.checkout .form div.row > input[type~=tel] { width: 100%; padding-top: 20px; height: 48px; }

section.checkout .form div.row input[type~=tel] + label { box-sizing: border-box; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: #666; font-family: RaceBox-Regular; padding: 5px 16px 0 16px; font-size: 0.8em; height: auto; transition: height 0.1s, padding 0.1s, font-size 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }

section.checkout .form div.row input.full-placeholder + label { font-size: 1.2em; padding: 13px 15px 13px 15px; height: 48px; }

section.checkout .form div.row select { height: 48px; }

section.checkout .form div.row select + label { display: none; }

section.checkout .form div.row.subregion-select select, section.checkout .form div.row select.country-select { width: 100%; }

section.checkout .form div.row.invalid { border: 1px solid red; }

section.checkout .form div.row input[readonly], section.checkout .form div.row select[readonly] { background-color: #E0E0E0; }

section.checkout .form div.row input[readonly]:focus, section.checkout .form div.row select[readonly]:focus { border-color: #808186; box-shadow: none; }

section.checkout .form div.row input, section.checkout .form div.row select { margin: 0; }

section.checkout .form .country-specific { display: none; }

section.checkout .form input[type~=text]:required, section.checkout .form input[type~=text]:valid, section.checkout .form input[type~=email]:required, section.checkout .form input[type~=email]:valid, section.checkout .form input[type~=number]:required, section.checkout .form input[type~=number]:valid, section.checkout .form input[type~=tel]:required, section.checkout .form input[type~=tel]:valid { background-position: right 5px top 50%; background-repeat: no-repeat; padding-right: 20px; transition: background-image 0.2s ease-in-out; }

section.checkout .form input[type~=text]:required, section.checkout .form input[type~=email]:required, section.checkout .form input[type~=number]:required, section.checkout .form input[type~=tel]:required { background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16"><text x="0" y="21" font-size="24px" font-family="sans-serif" fill="%23ea2127">*</text></svg>'); }

section.checkout .form input[type~=text]:required:valid, section.checkout .form input[type~=email]:required:valid, section.checkout .form input[type~=number]:required:valid, section.checkout .form input[type~=tel]:required:valid { background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><text x="0" y="16" font-size="24px" font-family="sans-serif" fill="green">✓</text></svg>'); }

section.checkout .form input, section.checkout .form select { margin: 0; }

section.manage-subscription-plan .current-subscription-description { text-align: left; font-size: 0.9em; }

section.manage-subscription-plan .subscription-proration-note { font-size: 0.8em; }

section.manage-subscription-plan .available-to-purchase a.button { display: inline-block; padding: 6px 30px; line-height: 34px; height: 34px; }

.current-subscription { background: #e4e4ec; padding: 10px 20px; border-radius: 20px; text-align: left; }

.current-subscription h3 { padding-left: 30px; background: url(/assets/img/cloud-storage.svg) no-repeat left center; background-size: 20px; margin-bottom: 10px; }

.current-subscription p { margin: 10px 0 0; font-size: 0.8em; }

.current-subscription .progress { height: 10px; background: #fff; border-radius: 5px; overflow: hidden; }

.current-subscription .progress div { background: green; height: 8px; margin: 1px; border-radius: 4px 0 0 4px; }

.current-subscription .progress .div.full { background: red; }

.current-subscription a { float: right; }

/*# sourceMappingURL=webapp.css.map */