/* CSS for ptime */


/* roboto-condensed-200 - latin */
@font-face {font-display: swap;font-family: 'Roboto Condensed';font-style: normal;font-weight: 200;src: url('/fts/roboto-condensed-v27-latin-200.woff2') format('woff2');}
/* roboto-condensed-600 - latin */
@font-face { font-display: swap; font-family: 'Roboto Condensed'; font-style: normal; font-weight: 600; src: url('/fts/roboto-condensed-v27-latin-600.woff2') format('woff2');}
@font-face { font-family: 'Scope One'; font-style: normal; font-display: swap; font-weight: 400;
  src: url('/fts/scope-one-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*
 * https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j
 * https://css-tip.com/screen-dimension/
*/
@property --100vw { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --100vh { syntax: "<length>"; initial-value: 0px; inherits: false; }

:root { --100vw: 100vw; --100vh: 100vh; --px-width: calc(tan(atan2(var(--100vw), 1px))); --px-height: calc(tan(atan2(var(--100vh), 1px)));
  /* calc() wrapper required for Safari, bug: // https://bugs.webkit.org/show_bug.cgi?id=263000 */
  /* GENERAL Basic definitions -> var() */
	--shadow:2px -2px 6px 1px #cbcbcb;
	--darkborder: 1px solid #222;
	--midborder: 1px solid #777;
	--lightborder: 1px solid #eee;
	--blueborder: 1px solid rgba(29,112,183,0.8);
	--darkbg: hsl(200, 96%, 40%);
	--disable: 1px dotted #666;
	--grey: #777;
	--light-grey: #eee;
	--lgreen: rgba(153, 255, 153, 0.2);
	--med-grey: #666;
	--dark-grey: #444;
	--highlight-color: #2980b9;
	--valid: 1px solid green;
	--invalid: 1px solid red;
	/*Animation styles*/
	--timing: .4s;
	--ease: cubic-bezier(0.865, 0.140, 0.095, 0.870);
	--phiblue: rgba(29,112,183,0.8);
	--orangebox: 1px solid rgba(255, 105, 0, 1);
	--blueback: rgba(29,112,183,0.9);
	--midblueback: rgba(29,112,183,0.4);
	--lightblueback: rgba(29,112,183,0.2);
	--lightlightblueback: rgba(29,112,183,0.1);
	--dorangeback: rgba(255, 105, 0, 0.9);
	--lorangeback: rgba(255, 105, 0, 0.25);
}
/*generalities*/
.w100 {width:100%;} .w04 {width:4%;} .w05 {width:5%;} .w075{width:7.5%} .w10 {width:10%;} .w125{width:12.5%} .w15 {width:15%} .w20 {width:20%} .w25 {width:25%} .w30 {width:30%;} .w40 {width:40%;} .w50 {width:50%;} .w60 {width:60%;} .w70 {width:70%;} .w80 {width:80%;}
.mr05{margin-right:0.5em;}.mr03{margin-right:0.3em;}
.ml03{margin-left:0.3em;}
body{background-color:white;font-family: 'Roboto Condensed';font-weight:200;font-size:1.1rem;height: calc(var(--px-height) * 1px);
width: calc(var(--px-width) * 1px);}
button, input[type="submit"], input[type="reset"] {	background: none;color: inherit;border: none;padding: 0;font: inherit;cursor: pointer;outline: inherit;}
#page {max-width:1275px;margin:auto;min-height:600px;width:calc(var(--px-width) * 0.8 * 1px);background-color:#fff;}
#page.ifr {max-width:450px;margin:0;min-height:0;height:150px;/*width:calc(var(--px-width) * 0.8 * 1px)*/;}
#container {max-width:1275px;min-height:550px;height:auto;padding:2em 14%;margin-left:-4px;} 
#kopf {margin:auto;margin-left:-4px;height:84px;border-bottom:var(--blueborder);background-color:rgba(244,244,244,0.6);min-width:820px;max-width:1275px;}
#headcontainer {display:flex;justify-content:space-between;}
#foot {margin:auto;margin-left:-4px;height:50px;min-width:820px;max-width:1275px;background-color:rgba(244,244,244,0.6);border-top:var(--blueborder);font-family:Roboto Condensed;padding:1em;display:flex;justify-content:space-between;}
.main {display:flex}
.left {margin-right:2.5%; width:47.5%;}
.right {margin-left:2.5%; width:47.5%;}
a {text-decoration: none;}
.link {font-family:'Roboto Condensed';color: var(--phiblue);cursor:pointer;font-size:1.05rem;}
h1 {font-size:1.9rem;font-family:Roboto Condensed;font-weight:600 !important;color:var(--phiblue);margin-bottom:0.5rem;} 
h2 {font-size:1.5rem;font-family:Roboto Condensed;font-weight:600 !important;color:var(--phiblue);margin-bottom:0.5rem;text-align:left;}
h3 {font-size:1.3rem;font-family:Roboto Condensed;font-weight:600 !important;color:var(--phiblue);text-align:left;}
h4 {font-size:1.1rem;font-family:Roboto Condensed;font-weight:600 !important;color:var(--phiblue);}

.runner {width:50%;min-width:5em;margin-right:0.5em;text-align:left;}
.rang {width:20px;margin-right:0.5em;text-align:left;}
.klub1 {margin-right:0.5em;text-align:left;}
.klub2 {width:5%;min-width:2em;margin-right:0.5em;text-align:left;}
.result {width:60px;margin:0;padding:0;text-align:right;}
.zz {width:58px;text-align:right;}
.flex {display:flex;}
.ndsp {display:none;}
.narrow {display:none;}
.philink {text-align:right;}
.logowrap {width:90px;padding:10px;margin: 0 1.7em 0 1em;}
.ndsp {display:none;}
.navbox {font-size:1.1em; padding:2px 0.5em;margin-top:2.7rem;font-weight:300;color:rgba(100, 100, 100, 0.8);cursor:pointer;}
.navbox.active {color:var(--phiblue);cursor:default;}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box;}
.btn, input[type=submit] {padding:7px 8px;background-color:var(--med-grey);border: var(--darkborder);box-shadow:var(--shadow);color:white;border-radius:5px;cursor:pointer;font-family:'Roboto Condensed';font-size:1em;}
.btn.cat {background-color:var(--phiblue);border:var(--blueborder);font-weight:600;font-size:1.4rem;}
.btn.tit {background-color:#fff;border:var(--blueborder);font-weight:600;font-size:1.5rem;color:var(--phiblue)}
/*datepicker*/
.ui-datepicker-title,.ui-datepicker-calendar {font-family:'Roboto Condensed';}
#ui-datepicker-div {width:200px;}

.clock {font-family:Roboto Condensed;font-weight:600;font-size:10rem;color:white;position:relative;top:200px;left:50%:auto;z-index:1000;text-shadow:4px 5px 5px black;}
.center {text-align:center;}
/* FORM ELEMENTS*/
.errform {width:80%;text-align:right;font-size:0.8em;color:red;}
input.valid {background-color:green;border:var(--valid);}
input.invalid {border: var(--invalid);}
/*label*/
.formgroup {font-family:Roboto Condensed;margin-bottom:5px;}
label {display:block;}
/* Selects */
select {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 5px;font-size: 1rem;width:auto;border: var(--blueborder);padding:0 1.8em 1px 0.4em;background-color:white;font-family:'Roboto condensed'!important;font-weight:200;height:38px;font-size:1.1em;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAIAAAAY12rUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJFJREFUeNpi/P//PwM1ABMDlcAgNOjy089kaPv4/c+jd99RDMpafhmISDXFZ+qp6Yceooh++Pbbpvto5rJL/4kDuNQz4JEj3hSoQUSahV8NA5HqCNrEQIxqYtzLQFAPkSHIgN8XxMcDI9ZMC0kputK8wOQKJKdF6hJOXeTFEbEugruLn5OFyOTOOFoeEQQAAQYAae5A514WfKgAAAAASUVORK5CYII=);
background-position: right;background-repeat: no-repeat;}
select:focus + .focus {font-family:'Roboto Condensed';font-weight:100;position: absolute;top: -1px;left: -1px;right: -1px;bottom: -1px;border: 2px solid var(--select-focus);border-radius: inherit;}
/*select:has(option[value="0"]:checked){border:1px solid red;}*/
select:not(:has(option[value="0"]:checked)){border: var(--blueborder)}
select:disabled:not(:has(option[value="0"]:checked)),select:disabled:has(option[value="0"]:checked){border:var(--disable)}
/*File Upload*/
.tahir{background-color: var(--dark-grey); padding: 6px 10px; border-radius: 5px;color:white;font-family:Roboto Condensed;
}
/*checkboxes*/
input[type="checkbox"] {
	/* Remove most all native input styles */-webkit-appearance: none;appearance: none;
	/* For iOS < 15 */background-color: var(--lightbg);
	margin: 0;font: inherit;color: currentColor;width: 1.15em;height: 1.15em;border: var(--blueborder);border-radius: 0.15em;transform: translateY(-0.075em);  display: grid;place-content: center;}
input[type="checkbox"]::before {content: "";width: 0.65em;height: 0.65em;clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);transform: scale(0);transform-origin: bottom left;transition: 120ms transform ease-in-out;box-shadow: inset 1em 1em var(--darkbg);
/* Windows High Contrast Mode */background-color: CanvasText;}
input[type="checkbox"]:checked::before {transform: scale(1);}
input[type="checkbox"]:disabled {border:1px dotted #666;}

/*text inputs*/
input[type="text"],input[type="password"] {-webkit-appearance: none;appearance: none;
	/* For iOS < 15 */background-color: var(--lightbg);
	padding-left:6px;font: inherit;color: currentColor;height: 2em;border: var(--midborder);border-radius: 5px;font-family:'Roboto Condensed';font-size:1.1em;height:2em;background:white;}
input[type="text"]:disabled {border: var(--disable);color:var(--grey);}
.admin input {margin-right:0.3em;}
textarea {font-family:Roboto Condensed;font-size:1.1em;}
/*Overlay*/
.overlay { position: fixed;top: calc((var(--px-height) * 1px)-900px); bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.75); transition: opacity 500ms; visibility: hidden; opacity: 0;}
.overlay:target {visibility: visible;opacity: 1;}
.popup { margin: 30px auto; padding: 20px; background: #fff; border-radius: 6px; max-width:920px; min-width:320px; position: relative; transition: all 5s ease-in-out; }
.popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; }
.popup .close:hover { color: #06D85F; }
.popup .content { max-height: 30%; overflow: auto; }

.grptit {font-weight:bold;color:white;margin-right:0.4em;font-size:18px;height:24px;padding:4px 6px 3px 6px;border:thin solid #666;background-color:#666;border-radius:4px;}.catgrp{display:none;margin:0;padding:0;} h2, h3 {margin:0;padding:0;} h3 {font-weight:300;}	.tab {margin:0.5em 0;}	.resline {height:21px;width:auto;}	.result {margin:0 -1em;padding:0 1em;height:auto;background-color:#fff;} #container {min-height:500px;}
	.send, .code {font-weight:300;font-size:20px;font-family:'Roboto Condensed';padding:2px 8px;} .code {border-radius: 4px;height:32px!important;border:1px solid grey;text-align:center;margin-right:0.5em;}
	

/*Email*/
div.email > span:nth-child(2) { display: none; }
/** Global **/
*, *:before, *:after { box-sizing: border-box; }
/* Classes for standard parser*/
.dload {font-family:Roboto Condensed;margin-bottom:4px;}
.dload .imgicon {height:16px;margin-right:3px;display:inline-block;}

/*** Accordion ***/
/* Basic Accordion Styles */
.accordion { position: relative;  
  /* Radio Inputs */
  input[name='panel'] { display: none; }
  /* Labels */
  label {
	transition: all var(--timing) var(--ease); display: block; padding: 0.6em 1em 1.5em; width: 100%; height:2.5rem; border-bottom: 0.1em solid hsl(200, 96%, 80%); color: hsl(0, 100%, 100%); font-size: 1.1rem; line-height: 1rem; cursor: pointer; }
  input:checked + label { color: $highlight-color;     
}
/* Panel Content */
  .accordion__content {overflow: hidden;max-height: 0em;position: relative;padding: 0 1.5em;display: block;padding: 0 1em;width: 100%;background: hsl(0, 1%, 90%);transition: all 0.5s ease;    
    	.accordion__header {padding: 1em 0;}
    .accordion__body {		
    }
  } 
}
input[name='panel']:checked ~ .accordion__content { /* Get this as close to what height you expect */ max-height: 50em;transition: all 1s ease!important;  }

li {
	position: relative;
	list-style-type: none;
	list-style-position: outside;
}

.blist > li::before {
	content: "▷"; /* Default bullet */
	color: orange;
	margin-right: 6px;
	margin-left:-18px;
}





@media only screen and (min-width: 600px) {	body {background-color:rgba(87,167,241,0.20);}	#page {margin:auto;padding:1em;max-width:900px;background-color:#fff;height:auto;} #head {height:170px;}h2{padding:0;} .tab {height:2em;} .back {display:block;} .klub1 {display:block;width:13em} .klub2 {display:none;}}
  
/*MEDIA QUERIES*/
@media (max-width: 1500px) {
	#page {max-width:1200px;margin:auto;min-height:550px;min-width:1001px; width:calc(var(--px-width) * 0.8 * 1px);background-color:#fff;}
	#container {max-width:960px;min-height:550px;height:auto;padding:0 2em;} 
	#foot,#kopf {width:90%;min-width:1000px;}	
}
@media (max-width: 1000px) {
	#page {max-width:900px;margin:auto;min-height:550px;min-width:801px; width:90%;background-color:#fff;}
	#container {max-width:900px;min-height:550px;height:auto;padding:0 2em;} 
	/*.left, .right {width:49%;}*/
	#foot,#kopf {max-width:1000px;min-width:800px;}
	.clock {font-size:9rem;position:relative;top:180px;left:50%:auto;z-index:1000;text-shadow:4px 5px 5px black;}
	.runner {width:40%;}
}
@media (max-width: 800px) {
	#page {max-width:800px;margin:auto;min-height:550px;min-width:701px; width:100%;background-color:#fff;}
	#container {max-width:800px;min-height:550px;height:auto;padding:0 2em 0 1em;}
	#foot,#kopf {width:100%;} 
	.main {display:block;}
	.left, .right {width:100%;}
	.wide {display:none;}
	.narrow {display:block;}
	#hamburger-menu { display: inline;}
	.runner {width:40%;}
	.clock {font-size:7.5rem;position:relative;top:160px;left:50%:auto;z-index:1000;text-shadow:4px 5px 5px black;}
}
@media (max-width: 700px) {
	#foot,#kopf {width:100%;} 
	#page {max-width:700px;margin:auto;min-height:550px;min-width:601px; width:100%;background-color:#fff;}
	#container {max-width:800px;min-height:550px;height:auto;padding:0 1em;}
	.clock {font-size:6rem;position:relative;top:180px;left:50%:auto;z-index:1000;text-shadow:4px 5px 5px black;}
	.philink {display:none;}
	.runner {width:40%;}
}
@media (max-width: 600px) {
	#page {max-width:600px;margin:auto;min-height:550px;min-width:320px; width:100%;margin-left:-8px;background-color:#fff;padding:0 1em;}
	#foot,#kopf {margin:0 1em 0 -1em;max-width:555px;width:100%;} 
	#container {height:auto;min-height:550px;padding:0 1em;} 
	.main {display:block;}
	.left, .right {width:100%;}
	.clock {font-size:5rem;position:relative;top:180px;left:50%:auto;z-index:1000;text-shadow:4px 5px 5px black;}
	.runner {width:40%;}
} 
@media only screen and (max-width: 600px) and (min-width: 381px) {#page {max-width:599px;-webkit-text-size-adjust: auto;} .back {display:block;} .klub1 {width:32%} .klub2 {display:none; .klub {display:none;} .runner {width:44%;}
}
@media only screen and (max-width: 380px) {	#page {max-width:380px;height:auto;}	.tab {min-height:auto;padding-bottom:2em;} .back {display:block;} .klub1 {display:none;} .klub2 {display:none;} .klub {display:none;} .runner {width:80%;}
}