/* CSS Rules for Preview App */

:root {
    /* Suffix legend:
       -bgcolor:  background color
       -ebgcolor: enabled background color
       -dbgcolor: disabled background color
       -bcolor:   border color
       -tcolor:   text color
       -etcolor:  enabled text color
       -dtcolor:  disabled text color
    */
    --app-bgcolor:         #404040;  /* Application background color */
    --header-bgcolor:      #144600;  /* Header background color */
    --content-bgcolor:     #F0F0F0;  /* Content area background color */
    --title-tcolor:        #FFFFFF;  /* Title text color */
    --button-tcolor:       #F5BC53;  /* Button text color */
    --button-bcolor:       #A0A0A0; /* Button border color */
    --table-hbgcolor:      #4D4D4D; /* Table header background color */
    --table-htcolor:       #F0F0F0; /* Table header text color */
    --row-bgcolor:         #D5E4D7; /* Table cell background color */
    --row-bgcolor2:        #ADC6B1; /* Alternate table cell background color */
    --winning-bgcolor:     #ADC6B1;  /* Winning streak background color */
    --losing-bgcolor:      #EAC1C1;  /* Losing streak background color */
    --losing-bgcolor2:     #D68E8E;  /* Alternate losing streak background color */
    --ascending-bgcolor:   #3691BF;  /* Sort ascending background color */
    --descending-bgcolor:  #E04141;  /* Sort descending background color */
  
    --header-height: 2.75rem;          /* Height of the app header area */
}

/* Main CSS rules */

body {
    font-family: arial;
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    user-select: none;
}
  
body, div, span, center {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
    
/* Top Level layout and styling */

.container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#app {
  background-color: var(--app-bgcolor);
}

#content {
  top: var(--header-height);
  background-color: var(--content-bgcolor);
}

.row {
  display: flex;
  background-color: var(--row-bgcolor);
}

.row:nth-child(2n) {
  background-color: var(--row-bgcolor2);
}

.row div {
  text-align: center;
  min-width: 8%;
  max-width: 8%;
  overflow-x: hidden;
}

.row div:nth-child(5), .row div:nth-child(9) {
  min-width: 15%;
  max-width: 15%;
}

.row div.team {
  flex-grow: 1;
  text-align: left;
  max-width: 100%
}

#standings {
  background-color: var(--row-bgcolor);
  top: calc(2 * var(--header-height));
  overflow-y: scroll;
}

#standings .row div.losing {
  background-color: var(--losing-bgcolor);
}

#standings .row:nth-child(2n) div.losing {
  background-color: var(--losing-bgcolor2);
}

#table {
  top: var(--header-height);
  height: calc(2 * var(--header-height));
} 

#table.row {
  background-color: var(--table-hbgcolor);
  color: var(--table-htcolor);
}

#table.row div {
  padding: 11px 8px 11px 8px;
}

.row {
  border-bottom: 1px solid var(--button-bcolor);
}

.row div {
  border-right: 1px solid var(--button-bcolor);
  padding: 4px 8px 2px 8px;
}

#table.row .ascending {
  background-color: var(--ascending-bgcolor);
}

#table.row .descending {
  background-color: var(--descending-bgcolor);
}

#dialogbg {
  background-color: #000000;
  opacity: 0;
  z-index: 10;
  transform: translateX(100%);
  transition: opacity 0.75s ease-in;
}

#dialogbg.open {
  opacity: 0.75;
  transform: translateX(0%);
}

#dialogbg.closing {
  opacity: 0;
  transform: translateX(0%);
}
  
#header {
  display: flex;
  height: var(--header-height);
  background-color: var(--header-bgcolor);
  color: var(--label-tcolor);
  border-bottom: 1px solid var(--button-bcolor);
}

.title {
  flex-grow: 1;
  padding-top: 12px;
  text-align: center;
  font-size: 1.2rem;
  color: var(--title-tcolor);
  border-right: 1px solid var(--button-bcolor);
}

.button {
  padding: 12px 12px 0 12px;
  color: var(--field-tcolor);
  font-size: 1.2rem;
  border-right: 1px solid var(--button-bcolor);
} 

#header span {
  white-space: nowrap;
  overflow-x: hidden;
}

span.button {
  color: var(--button-tcolor);
}

/* Icon definitions */

@font-face {
  font-family: 'icons';
  src: url('../lib/tvsis.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

 /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
}
 
.icon-help:before {
  content: "H";
}

.iconbutton {
  color: var(--icon-tcolor);
  padding: 6px 12px 0 12px;
  font-size: 2.2rem;
  opacity: 1;
  transition: opacity 0.75s;
}

/* Hacks */

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}