@font-face {
    font-family: 'droid_sansregular';
    src: url('DroidSans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {
  font-family: 'droid-sansregular', 'Calibri', 'Arial', sans-serif;
  margin: 0px;
  padding: 0px;

}

html * {
  /*calculate box sizes at the border (including padding)*/
  box-sizing:border-box; 
}

h2 {
  margin-top: 0px;
  margin-bottom: 15px;
}

#container {
width:100%;
margin: auto;
 background-color: #fff;
}

#header {
  flex-grow:8;
  z-index: 1;
  display: flex;
  border-bottom: 1px solid #999;
  position: sticky;
  background-color: #f5f5f5;
  cursor: pointer;
  font-size: 1.3em;
  font-weight: bold;
}
.header {
  padding: 15px 0px 15px 15px;
  width: 100%;
  top: 0px;
  white-space:nowrap;
  text-overflow: ellipsis;
  flex-shrink: 2;
  overflow: hidden;
}

.livestream {
  cursor: pointer;
  flex-shrink: 1;
  padding: 15px 0px 15px 0px;
  white-space:nowrap;
  overflow: clip;
  text-overflow: ellipsis;
  font-weight: normal;
  color: #0964b4;
  display: none;
  flex-basis: 135px;
}

.refresh {
  cursor: pointer;
  flex-shrink:1;
  padding: 15px 0px 15px 0px;
  flex-basis: 40px;
}
#cont {
/*when header is fixed, need this margin but using sticky...
margin-top: 58px;*/
}
/* Style the button that is used to open and close the collapsible content  - comp year*/
.year, .report {
  background-color: #d4d4d4;
  color: #000;
  cursor: pointer;
  padding: 12px 10px 12px 40px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.1em;
  font-weight: bold;
}

/*grouping favourites*/
.group {
  border-bottom: solid 5px pink;
  border-left: solid 5px pink;
}

 /*override because the year is larger than the standard report*/
.report {
  padding: 10px 5px 10px 40px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .year:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default - events in year*/
.yearevents, .reportpeople {
  /*padding: 0 15px;*/
  
  overflow: hidden;
  background-color: #f1f1f1;
} 

.defaulthide {
  display: none;
}

.vsv {
  text-transform: uppercase;
  color: #999;
  padding-top: 5px;
}

.event, .comp, .people {
  background-color: #fff;
  color: #000;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.1em;
  border-bottom: 1px solid #999;
}
.event {
  padding: 6px 0px 6px 10px;
}
.comp {
  display: flex;
  align-items: center;
}
.comp_title {
  flex-grow: 8;
  padding: 10px 5px;
}
.comp_image {
  width: 42px;
  height: 42px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
  margin-left: 5px;
}

.pad5 {
  width: 5px;
}

#scoreboard {
  display: none;
  position: sticky; /*fixed*/
  /*left: 0;*/
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding-top: 3px;
}

#sb_nownext {
  background-color: #d5d8d7;
  text-align: center;
  padding: 8px 0px;
  cursor: pointer;
}

#sb_cont {
  height: 200px;
  overflow-y: scroll;
}

.sb_box {
  vertical-align:top;
  display: flex;
}

.sb_inner {
  flex-grow: 8;
  color: #fff;
  background-color: #0066bc;
  text-align: center;
  margin: 2px 0px;
}

.sb_image {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-grow: 1;
}

.sb_comp {
  padding: 8px 0px;
}

.sb_flag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  font-size: 2.7em;
}

.sb_bib:before {
  content: '(';
}
.sb_bib {
  text-align: right;
  flex-grow: 1;
}
.sb_bib:after {
  content: ')';
}

.sb_name {
  flex-grow: 0;
  padding: 0px 6px;
}

.sb_score {
  text-align: left;
  flex-grow: 1;
}

.sb_row2 {
  display: flex;
}

.sb_row3 {
  display: flex;
  padding: 4px 0px;
}

.sb_prevscore:before {
  content: 'Prev:';
  padding-right: 4px;
}

.favourite, .favourite_s {
  /*float:right;*/
  display: inline-block;
  padding: 0px 5px 10px 10px;
}

.favourite:after {
  content: '\01f90d';
}

.favourite_s:after {
  content: '\02764\0fe0f';
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.comp:hover, .event:hover, .people:hover {
  background-color: #eef;
}

.people {
 /* height: 100px;*/
display: flex;
padding: 8px 5px 8px 6px;

}

/*all elements within the poeople class box*/
.people * {
  /*border: solid 1px black;*/
 
}

.flag, .mid, .end, .video, .score, .position {
  display: inline-block;
}

.flag {
font-size: 1.7em;
padding-right: 5px;
flex-shrink:0;
}


.mid {
 /* width: 200px;*/
/* padding-right:15px;*/
flex-grow:8;
}

.end {

    width: 129px;
  flex-shrink: 0;
}
.uend {
  background-color: pink;
  visibility: hidden;
}
.more {
  /*width: 148px;*/
  text-align: right;
  text-transform: uppercase;
  color: #0065bc;
    font-weight: bold;
    padding-top: 10px;
    font-size: 0.8em;
}
.video {
  width:24px;
  text-align: right;
}
.score {
    width: 55px;
    text-align: right;
    font-weight: 600;
}
.position {
    width: 45px;
    text-align: right;
    background: #e9e9e9;
    margin-left:5px;
    -webkit-clip-path: polygon(10px 0px, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(10px 0px, 100% 0%, 100% 100%, 0% 100%);
    padding-right: 5px;
  }
#gold {
 background: #fc0;
}
#silver {
 background: #bebebe;
}
#bronze {
 background: #c18256;
}



.name {
  /*height: 40px;*/
}
.club {
  /*height: 40px;*/
  font-size: 0.8em;
}

.name_vidlink {
  color: #0065bd;
}


#pop_bg {
position: fixed;
width:100%;
height:100%;
top: 0px;
display: none;
z-index: 2;
}
#pop_bg:before {
content: '';
position: fixed;
width:100%;
height:100%;
background-color: #888;
opacity: 0.5;
top: 0px;
}

#pop_up {
  /*margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  */
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
   border-radius: 25px;
   background-color: #fff;
   opacity: 1;
   padding: 30px;
   min-width: 260px;
}


#pop_up:after {
  margin-top: 30px;
  content: attr(btn);
  color: #0b9284;
  display: block;
  text-align: right;
    cursor: pointer;
}

#pop_ok {
  color: #0b9284
}

.vid_button, .filterlist {
  cursor: pointer;
  margin: auto;
  width: 74%;
  background-color: #f5f5f5;;
  border: 2px solid #d4d4d4;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  display: inline-block;
}

.viddl_button {
  cursor: pointer;
  margin: auto;
  width: 39px;
  background-color: #f5f5f5;
  border: 2px solid #d4d4d4;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  display: inline-block;
}

.loader {
  border: 8px solid #f5f5f5;
  border-radius: 50%;
  border-top: 8px solid #0065bd;
  border-bottom: 8px solid #0065bd;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  
    display: inline-block;
    background-color: #f5f5f5;
    text-align: center;
    padding-top: 4px;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#about {
padding:15px;
}
#video {
width: 100%
}
.vidbg {
background-color:#000;
}

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
/*
this works nicely but the absolute positioning for the .end doesn't help
need to refactor that stuff as css grid or something rather than using absolute then this will work nicely
*/
#container {
width:992px;
  border-left: 1px solid black;
  border-right: 1px solid black;
}
body {
 background-color: #ddd;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}