/** SURPASSPORT.com - Desktop App(s) Stylesheet
 *
 *  Copyright (c) 2020 Adrian Geissel. All Rights Reserved.
 *  Unauthorised use prohibited without written Licence Agreement
 */

@import url(./css/slider.css);


#surpassport-app>div { width:100vw; height:100vh; margin: 0; background: white; }
#surpassport-app:not(.logged-in)>div.app-pathway {
  background: #d5e1cd url(./res/surpassport-splash-pathway.jpg) repeat scroll center center;
  background-size:cover;
}
#surpassport-app:not(.logged-in)>div.app-camps {
  background: #d5e1cd url(./res/surpassport-splash-camps.jpg) repeat scroll center center;
  background-size:cover;
}
#surpassport-app:not(.logged-in)>div.app-community {
  background: #d5e1cd url(./res/surpassport-splash-camps.jpg) repeat scroll center center;
  background-size:cover;
}
#surpassport-app:not(.logged-in)>div.app-safeguarding {
  background: #d5e1cd url(./res/surpassport-splash-safeguarding.jpg) repeat scroll center center;
  background-size:cover;
}

#surpassport-app>div>.grid { font-size: 10pt; }
.row.footer { background: transparent; }
.row.footer .copyright { color: #9b9b9bc0; text-align: center; font-size: 0.8em; padding:0.5em; }

.modal, .modal .dialogbox>.grid, .modal .dialogbox.grid { font-size: 1em; }
.modal .dialogbox { text-align: left; }

.ag-form.button { background: rgba(153,153,153,0.2); }
.contain>.grid.list-view>.items.fixed-height { max-height: 70vh; }
.list-item { font-size: 9pt; min-height: 3.4em; }

header { box-shadow: 0px 0px 8px 0px #9b9b9b; padding:0; border-bottom: 1px solid #9b9b9ba0; }
header .logo { text-align: center; }
header .logo>img { margin: 1em 0 0 0; max-height: 4rem; }
header .options .option { text-align: center; margin-top:0.3em; width: 9.9% !important; max-width: 7em !important; }
header .options .option svg { font-size: 3em; margin: 0.3em 0 0; color: #9b9b9b; }
header .options .option label { display: block; padding: 0.2em 0.3em 0.3em 0.3em; color: #9b9b9b; margin-bottom: -1px; border-radius: 0.4em; }
header .options .option.profile { float: right; }
header .options .option.switcher { width: 12% !important; }
header .options .option.active svg { color: #3e7e4a; }
header .options .option.active label { background: #3e7e4a; color: white; }

.title { background: #3e7e4a; color: white; margin-bottom: 0.5em; font-size: 1.3em; font-weight: normal; font-family: 'Roboto Condensed', sans-serif; }
.title>.cell { padding: 0.2em 0.5em 0.3em 0.5em; }
.title a { text-decoration: none; }
.title a::after { content: " >"; }

main.grid { margin: 1em 0px 0px 1em !important; padding: 1em 0px 0px 1em; border-top-left-radius: 1em; background: white; }

.modal>div.dialogbox.wider { min-width: 70vw; max-width:95vw; }
.modal>div.dialogbox.full-screen { width: 95vw; height: 90vh; }
.modal>div.dialogbox.portrait { max-width: 40vw; max-height: 90vh; }
.dialogbox:not(.confirm)>.grid, .dialogbox.grid:not(.confirm) { min-height: 55vh; }

.sign-up .logo-bar { height: 7em; transition: all 0.455s ease-in-out; padding-top: 0.5em; }
.sign-up .logo-bar>.cell { text-align: center; padding:0; max-height: 5em;  }
.sign-up .logo-bar>.cell>img { border: 1em solid white;  background: white; border-radius: 1em; transition: all 0.225s ease-in-out; height:4em; }
.sign-up .logo-bar.splash>.cell>img { transform: scale(3.4) translateY(80%);  }

.sign-up .form-block { background: #ffffff; border-radius:1em; padding: 0.5em 1em 3.25em 1em; position: relative; font-size:0.9em; }
.sign-up .form-block .buttons { position: absolute; bottom: 0; left: 0; right: 0; }
.sign-up .form-block .buttons>.cell { padding:0.5em; }
.sign-up .sports-line { box-shadow: 0px 0px 8px 0px #9b9b9b; padding-top:0.55em; margin-bottom: -0.5em; background:white; text-align: center; }

.sign-up .row.footer { position: absolute; bottom: 0; left: 0; right: 0; }
.sign-up .row.footer .copyright { text-align: right; padding-right: 3em; }

.app-pathway .athlete .athlete-medical-alert { color: white; background: #4632ff; padding: 0.5em 0; }


.grid.slider>.content>.slide { background: #ffffff; padding: 0.65em; border-radius: 1.6em; transform: scaleX(-1) translateX(100%); transition: all 0.375s ease-in-out; overflow: hidden; }
.grid.slider>.content>.slide:empty { background: transparent; }
.grid.slider>.content>.slide.visible { transform: translateX(0%); }
.grid.slider>.content>.slide h4 { color: #bf4246; padding: 0.1em; margin: -0.35em -0.25em 0.5em -0.35em; font-family: 'Crimson Text', serif; font-weight: normal; font-style: italic; font-size: 2.5em; text-align: center; background: #88888850; }
.grid.slider>.content>.slide p,
.grid.slider>.content>.slide li { color: #1a1a1a; font-family: 'Roboto', sans-serif; line-height: 1.5em; font-size: 1.15em; margin-bottom: 0.5em; letter-spacing: 0.015em; }
.grid.slider>.content>.slide hr { opacity: 0; clear: both; }
.grid.slider>.content>.slide hr + p { font-size: smaller; font-style: italic; }
.grid.slider>.content>.slide li { margin-bottom: 0.25em; }
.grid.slider>.content>.slide p>img { max-height: 1.5em; float: right; }
.grid.slider>.content>.slide p em,
.grid.slider>.content>.slide li em { color: #3e7e4a; display:inline-block; background: #85bf4240; padding: 0 0.25em; text-shadow: 1px 1px 0 white;
   }
.grid.slider>.content>.slide p strong,
.grid.slider>.content>.slide li strong { font-family: 'Roboto Condensed'; font-style: italic; display: inline-block; transform: scaleY(1.12); text-decoration: none; text-transform: capitalize; }
.grid.slider>.content>.slide p strong em,
.grid.slider>.content>.slide li strong em { text-decoration: none; }
.grid.slider>.content>.slide .buttons { margin-top: 2em; }

.grid.slider>.controls { background: #DDDDDD40; margin-top: 0.5em; }
.grid.slider>.controls>.index>i { background: #9b9b9b; }
.grid.slider>.controls>.index>i.current { background: #3e7e4a; }

table { border-collapse: collapse; }
table>thead { background: #9b9b9b; }
table>thead>tr { font-size: 0.8em; }
table>thead>tr>th { height:2.4em; color: white; border:1px solid #DDD; padding:0 1em; box-sizing: border-box; }
table>thead>tr>th.sorted { position: relative; }
table>thead>tr>th.sorted.asc::before { content: "\2191"; position: absolute; right: 0.2em; }
table>thead>tr>th.sorted.desc::before { content: "\2193"; position: absolute; right: 0.2em; }
table>thead>tr>th:first-child { text-align: left; }
table>thead>tr>th:first-child>.cell:first-child { padding:0.25em 0.25em 0 0.25em ; }
table>thead>tr>th:first-child input { background:transparent; color:inherit; padding:0.1rem; font-size: 1rem; font-style:italic; font-weight: normal; width:75%; border:0; margin:0; vertical-align: middle; }
table>thead>tr>th:first-child input:focus { outline:0; }
table>thead>tr>th:first-child .icon>svg { font-size:2em; }
table>tbody>tr:nth-of-type(odd), table>tbody>tr:nth-of-type(odd)>td { background:#F8F8F8; }

table>tbody>tr>td:nth-of-type(even) { background:#3E7E4A06; }


table>tbody>tr:last-child { border-bottom:0.25em solid #9b9b9b; }
table>tbody>tr>td { background: white; border:1px solid #ECECEC; min-width: 6em; text-align: center; box-sizing: border-box; position: relative; height:4em; }
table>tbody>tr>td.unlicenced { cursor: pointer; background:repeating-linear-gradient(-75deg,#ebebeb80,#ebebeb80 4px,transparent 4px,transparent 8px); color: #666; }
table>tbody>tr>td.unlicenced>svg { color: #CCC; }
table>tbody>tr>td.clickable { cursor: pointer; }
table>tbody>tr>td.unlicenced::after,
table>tbody>tr>td.clickable::after { content: " "; display: block; top: 0; right: 0; border: 0.15em solid #9b9b9bC0; border-bottom-color: transparent; border-left-color: transparent; width: 0px; height: 0px; position: absolute; }
table>thead>tr>th:first-child, table>tbody>tr>td:first-child { min-width:28vw !important; text-align: left; }

.worksheet { position: absolute; top:0; right:0; bottom:0; left:0; overflow:scroll; scrollbar-width: none; -ms-overflow-style: none; }
.worksheet::-webkit-scrollbar { width: 0; background: transparent; }
.worksheet table>thead>tr>th { position: sticky !important; top:-2px; z-index: 300; background: #9b9b9b; white-space: nowrap; }
.worksheet:not(.singular) table>tbody>tr>td:first-child { position: sticky; left:-1px; z-index: 500; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 95%, rgba(255,255,255,0) 100%); }
.worksheet:not(.singular) table>tbody>tr:nth-of-type(odd)>td:first-child { background: linear-gradient(90deg, rgba(244,244,244,1) 0%, rgba(244,244,244,1) 95%, rgba(244,244,244,0) 100%); }
.worksheet:not(.singular) table>thead>tr>th:first-child { position: sticky; left:-1px; z-index: 600; }

.worksheet.singular { position: static; padding-bottom: 1.5em; }
.worksheet.singular:not(.preview) tr>:first-child { min-width: 6em !important; text-align: center; }
.worksheet.singular.preview tbody>tr>td { min-width: 10em !important; }

.worksheet table>tbody>tr>td>em { position: absolute; box-sizing: border-box; text-align: left;
  font-size: 0.7em;
  font-style: normal;
  background: #9b9b9b80;
 }
 .worksheet table>tbody>tr>td>em>svg {
   margin-left: 0.2em;
 }

.worksheet table>tbody>tr>td>i { position: absolute; top:0.1em; left:0; right: 0; box-sizing: border-box; text-align: center;
  font-size: 0.66em;
  font-style: normal;
  color: #9b9b9b;
 }

.worksheet table>tbody>tr>td>u { position: absolute; bottom:0.15em; left:0; right: 0; box-sizing: border-box; text-align: center;
  font-size: 0.66em;
  font-style: normal;
  text-decoration: none;
  color: #9b9b9b;
 }

.worksheet .relative-age-offset { min-width: 3em; }
.worksheet .relative-age-offset>em { top: 0.85em; bottom: 0.85em; text-align: center; font-size: 1em; text-shadow: 0 0 3px white;
  display: flex;
  align-items: center;
}
.worksheet .relative-age-offset>em.mid { width:20%; left:50%; transform: translateX(-50%); }
.worksheet .relative-age-offset>em.pos { left:50%; background:#00bcd4; }
.worksheet .relative-age-offset>em.neg { right:50%; background: #cb676a; }

.worksheet .height>em,
.worksheet .checklist>em,
.worksheet .weight>em,
.worksheet .gametime>em,
.worksheet .metric>em,
.worksheet .workrate>em,
.worksheet .matchplay>em,
.worksheet .percent-adult-height>em { left: 0; top: 0.95em; bottom: 0.95em; font-size: 0.9em; box-sizing: border-box; padding-left: 0.25em; background: #3e7e4a; color: white;
  white-space: nowrap;
  text-shadow: 0 0 3px #3e7e4a;
  display: flex;
  align-items: center;
}

.worksheet .matchplay>em {
  background-color: #80adea40;
  left: 0;
  width: 100%;
  text-shadow: none;
}
.worksheet .matchplay>em+s,
.worksheet .gametime>em+s { position: absolute; left:0; right:0; bottom: 0.75em; height:0.25em;  background: #3d618e40; font-size: 0.9em; }

.worksheet .height>em>span:first-child,
.worksheet .weight>em>span:first-child,
.worksheet .gametime>em>span:first-child,
.worksheet .metric>em>span:first-child {
  position: absolute;
    z-index: 100;
}

.worksheet .gametime>em { background-color: #80adea40; color: #1b4175; text-shadow: 0 0 3px white; }
.worksheet .matchplay>span { position: absolute; top:0.5em; bottom:0.5em; width:2px; transform: translateX(-50%); background: #9b9b9b40; }

.worksheet .workrate>em.below-avg,
.worksheet .metric>em.below-avg,
.worksheet .percent-adult-height>em.below-avg { background: #85bf42; text-shadow: none; }

.worksheet .workrate>em.above-avg,
.worksheet .metric>em.above-avg,
.worksheet .percent-adult-height>em.above-avg { background: #335F65; text-shadow: none; }

.worksheet .workrate>em.at-risk,
.worksheet .metric>em.at-risk,
.worksheet .percent-adult-height>em.at-risk { background: #b74246; text-shadow: none; }

.worksheet .metric>em+s { position: absolute; left:0; right:0; bottom: 0.95em; height:0.5em;  background: #9b9b9bC0; font-size: 0.9em; }

.worksheet .checklist>em { left:0; background: transparent; padding: 0; }
.worksheet .checklist>em>span { display:inline-block; height:100%; content: " "; overflow: hidden; text-shadow: 0 0 2px #9b9b9b; font-size: 0.8em; text-align: center; color: white; box-sizing: border-box; padding-top: 0.1em; }
.worksheet .checklist>em>span:not(:first-child) { border-left: 1px solid #FFF4; }
.worksheet .checklist>em>span>svg { display:block; width:auto; margin:0 auto; font-size: 1.3em; }

.worksheet .weight>em { background: #9b9b9b; text-shadow: 0 0 3px #9b9b9b; }
.worksheet .height>em, .worksheet .weight>em, .worksheet .metric>em { background: #85bf42; }
.worksheet .height>span { position: absolute; top:0.85em; bottom:0.85em; width:2px; transform: translateX(-50%) scaleY(1.1); background: #b74246; }
.worksheet .weight>em>span, .worksheet .height>em>span { position: relative; z-index:100; }
.worksheet .weight>em>.recharts-responsive-container,
.worksheet .height>em>.recharts-responsive-container { position:absolute; bottom:0; left:0; right:0; z-index: 50; }

.recharts-tooltip-wrapper .custom-tooltip {margin:0;border:1px solid #9b9b9b;background:white;padding:0.5em;};
.recharts-tooltip-wrapper .custom-tooltip p {margin:0; }

.worksheet .mood:not(.ag-form) { font-size:0.8em; }

.worksheet span.average { position: absolute; top:0.05em; bottom:0.05em; width:0; border-left:1px dashed #85bf4280; box-sizing: content-box; }
.worksheet .workrate>em.rate {

      width: 1.7em;
      right: 0.1em;
      left: auto;
      text-align: center;
      border-radius: 0.5em;
      top: 1.5em;
      bottom: auto;
      font-size: 0.9em;
      display: inline-block;
      line-height: 1.7em;
      padding: 0;
}

.challenge-series>div { display:inline-block; box-sizing: border-box; position:relative; padding-top: 2em; margin-bottom:0.2em; }
.challenge-series>div::after { position: absolute; content: ""; display: block; bottom: -2px; left:1px; right:1px; height:2px; background: #9b9b9b; }
.challenge-series>div.today::after { background-color: transparent; border-top: 1.5em solid #9B9B9B30; border-bottom: 0.3em solid #9B9B9B30; height: 0; box-sizing: border-box; bottom:-0.2em; }
.challenge-series>div.projected { opacity:0; }
.challenge-series>div>span { position: absolute; display:block; left: 50%; top:50%; background: transparent; opacity: 0.8; font-size: 1.3em; text-shadow: 1px 1px 0 #9b9b9b; }
.challenge-series>div>span:not(.chnull)::after { content: "\2192"; }
.challenge-series>div>span.chnull, .challenge-series>div>span.chNaN { display: none; }
.challenge-series>div>span.ch0 { color: #65b3c3; }
.challenge-series>div>span.ch0,
.challenge-series>div>span.ch1 { color: #7cf34c; }
.challenge-series>div>span.ch2 { color: #c8ed50; }
.challenge-series>div>span.ch3 { color: #e7bd53; }
.challenge-series>div>span.ch4 { color: #ec8e53; }
.challenge-series>div>span.ch5 { color: #f05f51; }
.challenge-icon { width: 1.2em; height: 2em; display: inline-block; text-align:center; }
.challenge-icon>span { font-size:0.6em; display: flex; justify-content: center; align-items: center; text-shadow: 0 0 0.5em #9b9b9bC0; color: white; overflow: visible; }
.challenge-icon>span.norm { background-color: #85bf42; }
.challenge-icon>span.risk { background-color: #b74246; }

.journaling-series>div { display:inline-block; box-sizing: border-box; position:relative; padding-top: 2em; margin-bottom:0.2em; }
.journaling-series>div::after { position: absolute; content: ""; display: block; bottom: -2px; left:1px; right:1px; height:2px; background: #9b9b9b; }
.journaling-series>div.today::after { background-color: transparent; border-top: 1.5em solid #9B9B9B30; border-bottom: 0.3em solid #9B9B9B30; height: 0; box-sizing: border-box; bottom:-0.2em; }
.journaling-series>div>span { position: absolute; display:block; left: 50%; bottom:0.1em; background: #e0e0e0c0; opacity: 0.8; font-size: 1.3em; height:60%; width:80%; }
.journaling-series>div.null > span, .journaling-series > div > span.chnull, .journaling-series > div > span.chNaN { display: none; }