/*
//produces errors with displaying on desktop
@media (orientation: landscape) {
  body {
    max-width:400px;
  }
}*/

html, body {
  margin: 0;
  padding: 0;
  /*background-color:black;
  color:white;*/
  font-family: arial;
  
}

div .mycell {
  display: table-column;
  display: table-cell;
}
div .mycell:first-child {
    padding-right:1.5em;
}

legend .legendcenter {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}
.statsTitle {
	text-align:center;
	/*vertical-align:middle;*/
	padding-top:15px; /* TODO use vertical-align instead */
}

.tir {
  font-size: 2em;
}

.pourcentage {
  font-size: 3.4em;
}

.shotFrequency {
  float: right;
  font-size: 0.8em;
  text-align: center;
}

.shotFrequencyNoFloat {
  font-size: 0.8em;
  text-align: center;
}

.bt {
  font-size: 2em;
}

.btMinus {
  font-size: 2em;
  margin-left:4px
}

.btActionDanger {
  background-color:red;
  color:white;
  padding:2.5px 6px;
  border: 1px solid gray;
  border-radius:4px;
}
.btActionDanger:hover {
 filter: brightness(85%);
}
.btActionSafe {
  background-color:green;
  color:white;
  padding:2.5px 6px;
  border: 1px solid gray;
  border-radius:4px;
}
.btActionSafe:hover {
 filter: brightness(85%);
}

.goalieSelector {
  margin-bottom:2em;
}

 /* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-top: none;
  border-bottom: none;
} 

/* hall of fame */
table tr:nth-child(odd) td {
    background-color: lightgray;
}

/* graph */
.line {
    fill: none;
    stroke: #ffab00;
    stroke-width: 3;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  font-size: 10px;
}



/* score buttons */
.scoreButtonsGroup {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(4, 100px);
}
.scoreButtonRight {
	grid-column:3;
	justify-self: end;
}
.scoreButtonLabel {
	grid-column:2;
	font-size:0.7em;
	padding:0.1em;
	text-align:center;
}


/* selector for left/right/both teams */
.focusActivitySelector input[type=radio] {
	display:none;
}
.focusActivitySelector input[type=radio] + label {
	padding:5px 5px;
	margin-right: -5px;
	border: 1px solid rgba(0, 0, 0, 0.2);

}
.focusActivitySelector input[type=radio] + label {
	background-color: #e4e4e4;
	transition: background-color 0.3s ease;
}
.focusActivitySelector input[type=radio]:checked + label {
	background-color: #a5dc86;
	transition: background-color 0.3s ease;
}
.focusActivitySelector label:hover {
	cursor: pointer;
}
.focusActivitySelector label:first-of-type {
	border-radius: 5px 0 0 5px;
}
.focusActivitySelector label:last-of-type {
	border-radius: 0 5px 5px 0;
}


  /* Conteneur du pourcentage */
  .pct {
    --pct: 50%;                 /* valeur par défaut (modifiable inline) */
    position: relative;
    width: 50px;               /* largeur de la "cellule graphique" */
    height: 21px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
  }
  /* zone colorée proportionnelle */
  .pct .fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--pct);
    background: linear-gradient(90deg, #A8E6A1, #7CD992);
    transition: width 300ms ease;
  }
  /* texte (au-dessus de la couleur) */
  .pct .label {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: #111;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  }
  
  
  

/*tooltips on mobile */
@media (pointer: coarse), (hover: none) {
  [title] {
    position: relative;
    display: inline-flex;
    justify-content: center;
  }
  [title]:focus::after {
    content: attr(title);
    position: absolute;
    top: 90%;
    color: #000;
    background-color: #fff;
    border: 1px solid;
    width: fit-content;
    padding: 3px;
    font-size: 10px;
	font-size: small; line-height: 1
  }

}


/* tooltip, source = https://kazzkiq.github.io/balloon.css/ */
:root{--balloon-border-radius: 2px;--balloon-color: rgba(16,16,16,0.95);--balloon-text-color: #fff;--balloon-font-size: 12px;--balloon-move: 4px}button[aria-label][data-balloon-pos]{overflow:visible}[aria-label][data-balloon-pos]{position:relative;cursor:pointer}[aria-label][data-balloon-pos]:after{opacity:0;pointer-events:none;transition:all 0.18s ease-out 0.18s;text-indent:0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;font-weight:normal;font-style:normal;text-shadow:none;font-size:var(--balloon-font-size);background:var(--balloon-color);border-radius:2px;color:var(--balloon-text-color);border-radius:var(--balloon-border-radius);content:attr(aria-label);padding:.5em 1em;position:absolute;white-space:nowrap;z-index:10}[aria-label][data-balloon-pos]:before{width:0;height:0;border:5px solid transparent;border-top-color:var(--balloon-color);opacity:0;pointer-events:none;transition:all 0.18s ease-out 0.18s;content:"";position:absolute;z-index:10}[aria-label][data-balloon-pos]:hover:before,[aria-label][data-balloon-pos]:hover:after,[aria-label][data-balloon-pos][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-visible]:after,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before,[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after{opacity:1;pointer-events:none}[aria-label][data-balloon-pos].font-awesome:after{font-family:FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}[aria-label][data-balloon-pos][data-balloon-break]:after{white-space:pre}[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after{white-space:pre-line;word-break:break-word}[aria-label][data-balloon-pos][data-balloon-blunt]:before,[aria-label][data-balloon-pos][data-balloon-blunt]:after{transition:none}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before{transform:translate(-50%, 0)}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after{left:0}[aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before{left:5px}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after{right:0}[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before{right:5px}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before{transform:translate(0, 0)}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:before,[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{bottom:100%;transform-origin:top;transform:translate(0, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="up"]:after{margin-bottom:10px}[aria-label][data-balloon-pos][data-balloon-pos="up"]:before,[aria-label][data-balloon-pos][data-balloon-pos="up"]:after{left:50%;transform:translate(-50%, var(--balloon-move))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before,[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{top:100%;transform:translate(0, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:after{margin-top:10px}[aria-label][data-balloon-pos][data-balloon-pos^="down"]:before{width:0;height:0;border:5px solid transparent;border-bottom-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="down"]:after,[aria-label][data-balloon-pos][data-balloon-pos="down"]:before{left:50%;transform:translate(-50%, calc(var(--balloon-move) * -1))}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after,[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before,[aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before,[aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before{transform:translate(0, -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after,[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{right:100%;top:50%;transform:translate(var(--balloon-move), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="left"]:after{margin-right:10px}[aria-label][data-balloon-pos][data-balloon-pos="left"]:before{width:0;height:0;border:5px solid transparent;border-left-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after,[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{left:100%;top:50%;transform:translate(calc(var(--balloon-move) * -1), -50%)}[aria-label][data-balloon-pos][data-balloon-pos="right"]:after{margin-left:10px}[aria-label][data-balloon-pos][data-balloon-pos="right"]:before{width:0;height:0;border:5px solid transparent;border-right-color:var(--balloon-color)}[aria-label][data-balloon-pos][data-balloon-length]:after{white-space:normal}[aria-label][data-balloon-pos][data-balloon-length="small"]:after{width:80px}[aria-label][data-balloon-pos][data-balloon-length="medium"]:after{width:150px}[aria-label][data-balloon-pos][data-balloon-length="large"]:after{width:260px}[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:380px}@media screen and (max-width: 768px){[aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after{width:90vw}}[aria-label][data-balloon-pos][data-balloon-length="fit"]:after{width:100%}