@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(/font/Inconsolata.ttf) format('truetype');
}

@font-face {
  font-family: 'isocpeur';
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  src: url(/font/isocpeur.ttf) format('truetype');
}

.font-console {
  font-family: 'Inconsolata', Helvetica, sans-serif;
}

.font-iso {
  font-family: 'isocpeur';
}

/*******************/
/* global settings */
/*******************/
html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  background-color: #6c757d;
}

/******************/
/* dynamic header */
/******************/
#mainHeader {
  margin: 0;
  padding: 0;
  width: 100%;
  /*position: fixed;
  top: 0;*/
  background-color: #212529;
}

.header-img-min {
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.header-img-full {
  display: none;
}

@media screen and (min-width: 625px) {
  .header-img-min {
    width: 625px;
  }
}

@media screen and (min-width: 1035px) {
  .header-img-min {
    display: none;
  }
  .header-img-full {
    display: block;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 1553px) {
  .header-img-full {
    height: 150px;
  }
}

@media screen and (min-width: 2070px) {
  .header-img-full {
    height: 200px;
  }
}

/**********************/
/* dynamic columns */
/**********************/

/* initial size for extrasmall displays */
.sponsors-column { display: none; margin: 0 !important; padding: 0 !important; }
.main-column { width: 100%; margin: 0 !important; padding: 0 !important; }

/* give the central column a fixe width to prepare the arrival of the side bands */
@media screen and (min-width: 490px) {
  .main-column { width: 490px; }
}
/* arrival of the side bands */
@media screen and (min-width: 700px) {
  .sponsors-column { display: inline-block; width: 15%; }
  .main-column { width: 70%; }
}
/* columns stop to grow */
@media screen and (min-width: 1500px) {
  .sponsors-column { width: 225px; }
  .main-column { width: 70%; }
}

/********************/
/* sponsors columns */
/********************/
#left-sponsors, #right-sponsors {
  background-color: #ffffff;
  padding: 0 !important;
  align-items: center !important;
  text-align: center !important;
}

.sponsor-logo {
  padding: 0.25rem !important;
  max-width: 100%;
}

.sponsor-logo-60 {
  padding: 0.25rem !important;
  max-width: 60%;
}

.sponsor-logo-40 {
  padding: 0.25rem !important;
  max-width: 40%;
}

/***********************/
/* SVG main indicators */
/***********************/

.svg-box-text {
  font-family: 'isocpeur';
  fill: white;
  text-anchor: middle;
  text-align: center;
}

.svg-time-passed {
  font-family: 'isocpeur';
  fill: white;
  text-anchor: end;
  text-align: right;
}

.svg-time-left {
  font-family: 'isocpeur';
  fill: white;
  text-anchor: middle;
  text-align: center;
}

.svg-time-best {
  font-family: 'isocpeur';
  fill: #ee00ff;
  text-anchor: left;
  text-align: left;
}

/***************/
/* ranks table */
/***************/
.rank-header {
  font-family: 'isocpeur';
  color: #8080ff;
  vertical-align: middle;
  line-height: 0.8;
}

.rank-data {
  font-family: 'isocpeur';
  color: #ffffff;
  vertical-align: middle;
  line-height: 0.8;
}

.country-flag {
  max-height:18px;
  max-width:24px;
  height:auto;
  width:auto;
}

/* set common attributes */
.hrank-pos,
.hrank-dpos, 
.hrank-dpos-plus, 
.hrank-dpos-minus, 
.hrank-dtime, 
.hrank-pilot-id, 
.hrank-pilot-country, 
.hrank-pilot-name, 
.hrank-laps-count, 
.hrank-time-passage, 
.hrank-lap-time, 
.hrank-min-time,
.hrank-laps-final {
  margin: 0 !important;
  padding: 0.3rem 0.1rem !important;
}

.rank-pos,
.rank-dpos, 
.rank-dpos-plus, 
.rank-dpos-minus, 
.rank-dtime, 
.rank-pilot-id, 
.rank-pilot-country, 
.rank-pilot-name, 
.rank-laps-count, 
.rank-time-passage, 
.rank-lap-time, 
.rank-min-time,
.rank-laps-final {
  margin: 0 !important;
  padding: 0.3rem 0.1rem 0.1rem !important;
}

/* set individual spectific attributes */
.rank-pos { color: #00ffff; }
.rank-dpos-plus { color: #22ee22; }
.rank-dpos-minus { color: #ee2222; }
.rank-min-time-best { color: #22ee22; }
.rank-lap-time-best { color: #eeee22; }
.rank-pilot-name { text-align: left; }

/* set columns width relative to "0" width because cols contains mainly numbers */
.hrank-pos { width: 3ch; }
.hrank-dpos { width: 4ch; }
.hrank-dtime { width: 6ch; }
.hrank-pilot-id { width: 3ch; }
.hrank-pilot-country { width: 3ch; }
.hrank-laps-count { width: 3ch; }
.hrank-time-passage { width: 9ch; }
.hrank-lap-time { width: 6ch; }
.hrank-min-time { width: 6ch; }
.hrank-laps-final { width: 5ch; }

/* set minimal display hide */
@media screen and (max-width: 599px) {
  .rank-dpos, .rank-dtime, .rank-pilot-id, .rank-time-passage, .rank-lap-time { display: none; }
  .hrank-dpos, .hrank-dtime, .hrank-pilot-id, .hrank-time-passage, .hrank-lap-time { display: none; }
  .rank-pos, .rank-pilot-name, .rank-laps-count, .rank-min-time, .rank-laps-final { padding: 0.3rem 0.1rem 0.1rem !important; }
  .rank-pilot-country { padding: 0 0.1rem !important; }
}

/* break points */
@media screen and (min-width: 600px) {
  .hrank-dtime, .rank-dtime,.hrank-lap-time,.rank-lap-time { display: table-cell !important; }
  .rank-header, .rank-data { font-size: 1.1rem; }
  .rank-pos, .rank-pilot-name, .rank-laps-count, .rank-min-time, .rank-laps-final { padding: 0.4rem 0.2rem 0.2rem !important; }
  .rank-pilot-country { padding: 0.1 0.2rem !important; }
}

@media screen and (min-width: 800px) {
  .rank-header, .rank-data { font-size: 1.2rem; }
}

@media screen and (min-width: 1000px) {
  .hrank-dpos, .rank-dpos, .hrank-pilot-id ,.rank-pilot-id,
  .hrank-time-passage,.rank-time-passage { display: table-cell !important; }
  .rank-header, .rank-data { font-size: 1.4rem; }
}

@media screen and (min-width: 1600px) {
  .rank-header, .rank-data { font-size: 1.6rem; }
}