/*----------------------------------------------------------------------------*/
/*  Style rules for the The Villages Division 4 Softball 'draft' app/.      */
/*                Copyright (c) 2018 by David C. Morrill                      */
/*----------------------------------------------------------------------------*/

:root {
  /*-- Color definitions --*/
  
  --bcolor:             #0E6726; /* General border color */
  --header-bgcolor:     #044C17; /* Header background color */
  --header-color:       #FFFFFF; /* Header text color */
  --header-bcolor:      #FFFFFF; /* Header border color */
  --tabs-bcolor:        #FFFFFF; /* Tabs border color */
  --tab-bgcolor:        #A0C4A6; /* Active tab background color */
  --tab-color:          #075B16; /* Active tab text color */
  --tab-abgcolor:       #478D59; /* Tab background color */
  --tab-acolor:         #FFFFFF; /* Tab text color */
  --page-bgcolor:       #EFF5F0; /* Notebook page background color */
  --login-bgcolor:      #E2E2E2; /* Login panel background color */
  --label-color:        #044C17; /* Label text color */
  --round-bgcolor:      #D00000; /* Round button stopped background color */
  --error-bgcolor:      #D00000; /* Error message background color */
  --error-color:        #FFFFFF; /* Error message text color */
  --message-bgcolor:    #A0C4A6; /* Message background color */
  --message-color:      #000000; /* Message text color */
  --button-bgcolor:     #A0C4A6; /* Button background color */
  --button-hbgcolor:    #4AB465; /* Button hover background color */
  --button-color:       #000000; /* Button text color */
  --button-hcolor:      #FFFFFF; /* Button hover text color */
  --form-icolor:        #408C45; /* Form icon color */
  --draft-bgcolor:      #FCCB40; /* Draft picker background color */
  --draft-scolor:       #FFEBB1; /* Stopped draft picker button text color */
  --draft-color:        #000000; /* Draft picker text color */
  --tsplayer-color:     #065213; /* Team section player text color */
  --favorite-bgcolor:   #FFE69C; /* Favorite player info column bg color */
  --player-bgcolor:     #EFF5F0; /* Player info column background color */
  --player-color:       #065213; /* Player info column text color*/
  --player-dcolor:      #E8E8E8; /* Drafted player column background color */
  --player-scolor:      #71F8FF; /* Selected player background color */
  --player-asccolor:    #86C6E9; /* Selected player background color */
  --player-desccolor:   #FDA3A3; /* Selected player background color */
  --pitcher-color:      #E8E2D8; /* Pitcher info column background color */
  --round-tcolor:       #FFFFFF; /* Current round text color */
  --team-color:         #ADD5F1; /* Team background color */
  --teamname-bgcolor:   #044C17; /* Team name background color */
  --teamname-color:     #EFF5F0; /* Team name text color */
  --team-acolor:        #FCCB40; /* Active team background color */
  --team-dcolor:        #FC7272; /* Auto-draft team background color */
  --team-pcolor:        #7AA3CC; /* Team already picked background color */
  --flash-color:        #7AA3CC; /* Flashing control background color */
  --rankdrag-bgcolor:   #478D59; /* Dragging rank value background color */
  --rankdrag-color:     #FFFFFF; /* Dragging rank value text color */
  --user-bgcolor:       #FFE69C; /* User editable favorites field bg color */
  --user-ibgcolor:      #D00000; /* User editable favorites invalid bg color */
  --user-icolor:        #F0F0F0; /* User editable favorites invalid text color */
  --input-color:        #113384; /* User editable favorites input text color */
  --optbutton-bgcolor:  #478D59; /* Options page button background color */
  --optbutton-hbgcolor: #044C17; /* Options page button hover background color */
  --optbutton-dbgcolor: #DADADA; /* Options page button disabled background color */
  --optbutton-color:    #FFFFFF; /* Options page button text color */

  /*-- Size definitions --*/

  --teaminfo-width: 16rem;   /* Width of the team info section */
  --header-height:  3rem;    /* Height of page header section */
  --tabs-height:    3rem;    /* Height of the tabs section */
  --team-height:    2.5rem;  /* Height of items used as team buttons */
  --button-height:  3rem;    /* Height of items used as column header buttons */
  --picker-height:  4rem;    /* Height of items used as draft picker buttons */
}

/*-- Document wide style 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;
}

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

#app {
  bottom: 0;
}

#app.haspicker {
  bottom: var(--picker-height);
}

#main {
  right: var(--teaminfo-width);
}

#teaminfo {
  left: unset;
  width: var(--teaminfo-width);
}

#header {
  display: flex;
  height: var(--header-height);
  background-color: var(--header-bgcolor);
  color: var(--header-color);
  border: 1px solid var(--header-bcolor);
}

#date, #time {
  width: 10rem;
  padding-top: 11px;
  font-size: 1.4rem;
  text-align: center;
}

#title {
  flex-grow: 1;
  padding-top: 11px;
  font-size: 1.4rem;
  text-align: center;
  border-left: 1px solid var(--header-bcolor);
  border-right: 1px solid var(--header-bcolor);
}

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

#tabs {
  display: flex;
  bottom: unset;
  height: var(--tabs-height);
  font-size: 1.4rem;
  text-align: center;
  border-bottom: 1px solid var(--tabs-bcolor);
}

.tab {
  flex-grow: 1;
  padding-top: 11px;
  background-color: var(--tab-bgcolor);
  color: var(--tab-color);
  border-right: 1px solid var(--tabs-bcolor);
}

.tab.active {
  background-color: var(--tab-abgcolor);
  color: var(--tab-acolor);
}

#pages {
  top: var(--tabs-height);
}

.page {
  background-color: var(--page-bgcolor);
  border-top: 1px solid var(--bcolor);
  border-bottom: 1px solid var(--bcolor);
  border-left: 1px solid var(--bcolor);
  transition: transform 0.7s;
}

.scrollable {
  overflow-y: scroll;
}

.page.left.active, .page.right.active {
  transform: translateX(0);
}

.page.left {
  transform: translateX(-100%);
}

.page.right {
  transform: translateX(100%);
}

.flexrow {
  display: flex;
  justify-content: center;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.label {
  padding: 17px 8px 4px 0;
  font-size: 1rem;
  color: var(--label-color);
}

#loginpanel {
  background-color: var(--login-bgcolor);
  border-top: 1px solid var(--bcolor);
  transform: translateY(100%);
  transition: transform 0.7s;
}

#loginpanel.active {
  transform: translateY(-1px);
}

#loginsection {
  margin: 30px 70px;
  padding: 15px;
  border: 1px solid #147315;
  border-radius: 11px;
}

.button {
  margin: 9px;
  padding: 7px 15px 6px 15px;
  background-color: var(--button-bgcolor);
  color: var(--button-color);
  border-radius: 7px;
  transition: background-color 0.25s, color 0.25s;
}

.button:hover {
  background-color: var(--button-hbgcolor);
  color: var(--button-hcolor);
}

.message {
  margin: 15px;
  padding: 9px 8px 8px 8px;
  font-size: 1.4rem;
  text-align: center;
  background-color: var(--message-bgcolor);
  color: var(--message-color);
  border-radius: 5px;
}

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

/*-- Material design style input field --*/

#loginsection input::-webkit-input-placeholder {
  font-family: 'roboto', sans-serif;
  font-size: 0.75rem;
  color: var(--form-icolor);
  transition: all 0.3s ease-in-out;
}

#loginsection input {
  margin: 0 25px 10px 0;
  width: 119px;
  display: block;
  border: none;
  padding: 15px 0 5px 0;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--form-icolor);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, var(--form-icolor) 4%);
  background-position: -119px 0;
  background-size: 119px 100%;
  background-repeat: no-repeat;
  color: #0E6252;
}

#loginsection input:focus, #form input:valid {
  box-shadow: none;
  outline: none;
  background-position: 0 0;
}

#loginsection input:focus::-webkit-input-placeholder, 
#loginsection input:valid::-webkit-input-placeholder {
  font-size: 11px;
  transform: translateY(-19px);
  visibility: visible !important;
}

/*-- Header area related style rules --*/

#playerinfo {
  display: flex;
  flex-direction: column;
  right: 20vw;
}

#teams {
  top: var(--header-height);
  background-color: var(--page-bgcolor);
  border: 1px solid var(--bcolor);
  overflow-y: scroll;
}

#teamspage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  padding: 5px;
  justify-content: center;
}

.teamsection {
    width: 17rem;
    margin: 5px;
}

.teamname {
  padding: 7px 0 6px 0;
  text-align: center;
  font-size: 1.3rem;
  background-color: var(--teamname-bgcolor);
  color: var(--teamname-color);
}

.teamsectionplayer {
  padding: 5px 4px 4px 6px;
  border: 1px solid var(--bcolor);
  border-top: none;
  color: var(--tsplayer-color);
}

.teamsectionplayer.pitcher {
  font-weight: bolder;
}

.rankA { background-color: #9AAC9A; }
.rankB { background-color: #BACBBA; }
.rankC { background-color: #D7E3D7; }

.playerdata {
  position: absolute;
  top: 0;
  left: 0;
  right: 17px;
  height: var(--button-height);
  display: flex;
  font-size: 1.3rem;
  border-bottom: 1px solid var(--bcolor);
}

.playerdata div {
  padding-top: 12px;
  text-align: center;
  border-right: 1px solid var(--bcolor);
}

#saving {
  padding-left: 12px;
  font-size: 1.4rem;
}

#roundbutton {
  position: relative;
  padding-top: 11px;
  text-align: center;
  font-size: 1.4rem;
  height: var(--header-height);
  background-color: var(--header-bgcolor);
  color: var(--round-tcolor);
  border-top: 1px solid var(--header-bcolor);
  border-bottom: 1px solid var(--header-bcolor);
  border-right: 1px solid var(--header-bcolor);
}

#roundbutton.stopped{
  background-color: var(--round-bgcolor);
}

.time {
  left: unset;
  padding: 10px 6px 0 0;
  width: 4rem;
  text-align: right;
  font-size: 1rem;
}

#info {
  color: #FCCB40;
}

#roundclock.time {
  padding: 14px 6px 0 0;
}

#draftpicker {
  top: unset;
  height: var(--picker-height);
  display: flex;
  min-height: var(--picker-height);
  font-size: 1.4rem;
  border: 1px solid var(--bcolor);
  border-top: none;
  background-color: var(--draft-bgcolor);
}

#draftpicker.hidden {
  display: none;
}

#draftpicker div {
  padding: 20px 20px 0 20px;
  border-right: 1px solid var(--bcolor);
}

#draftpicker #curdraft {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

#draftpicker.stopped {
  color: var(--draft-scolor);
}

.playercolumn {
  white-space: nowrap;
  overflow-x: hidden;
}

.headercolumn {
  white-space: nowrap;
  overflow-x: hidden;
  background-color: var(--header-color);
}

.headercolumn.ascending {
  background-color: var(--player-asccolor);
}

.headercolumn.descending {
  background-color: var(--player-desccolor);
}

.draftcolumn {
  width: 3.8rem;
  min-width: 3.8rem;
}

.deletecolumn {
  width: 2rem;
  min-width: 2rem;
}

.namecolumn {
  width: 15rem;
  min-width: 15rem;
}

.players.container {
  top: var(--button-height);
  overflow-y: scroll;
}

#players.filtered .namecolumn, #players.filteredpos .poscolumn {
  background-color: #C8E8FF;
}

.codecolumn {
  width: 2.75rem;
  min-width: 2.75rem;
  text-align: center;
}

.poscolumn {
  width: 2.75rem;
  min-width: 2.75rem;
  text-align: center;
}

.runnercolumn {
  width: 2.8rem;
  min-width: 2.8rem;
  text-align: center;
}

.volunteercolumn {
  width: 2rem;
  min-width: 2rem;
  text-align: center;
}

.bacolumn {
  width: 3rem;
  min-width: 3rem;
  text-align: center;
}

.notescolumn {
  flex-grow: 1;
  min-width: 16rem;
}

.notescolumn.fixedsize {
  flex-grow: 0;
  max-width: 16rem;
}

.rankcolumn {
  width: 3.5rem;
  min-width: 3.5rem;
  text-align: center;
}

.rankcolumn:hover, 
.usernotes:hover, 
.usernotes:hover .userinput, 
.rankcolumn:hover .userinput {
  background-color: #FCF4DB;
}

.usercolumn, .usernotes, .userinput {
  background-color: var(--user-bgcolor);
}

.rankcolumn.invalid, .rankcolumn.invalid .userinput {
  background-color: var(--user-ibgcolor);
  color: var(--user-icolor);
}

input.userinput {
  width: 100%;
  border: none;
  font-size: 1rem;
  padding: 0;
  color: var(--input-color);
}

.userinput:focus {
  outline: none;
}

.rankcolumn.dragging {
  background-color: var(--rankdrag-bgcolor);
  color: var(--rankdrag-color);
}

.digit {
  width: 4rem;
  text-align: center;
}

.clicked {
  background-color: var(--flash-color);
}

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

.player.favorite, .player.favorite.pitcher {
  background-color: var(--favorite-bgcolor);
}

.player div {
  padding: 5px 4px 4px 4px;
  border-right: 1px solid var(--bcolor);
  border-bottom: 1px solid var(--bcolor);
}

.player .draftcolumn {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  background-color: var(--draft-bgcolor);
  color: var(--draft-color);
}

.player.selected div, #curdraft.selected, 
#players.filtered .player.selected .namecolumn {
  background-color: var(--player-scolor);
}

.player.pitcher {
  background-color: var(--pitcher-color);
}

.team {
  position: relative;
  padding-top: 10px;
  text-align: center;
  font-size: 1.2rem;
  height: var(--team-height);
  background-color: var(--team-color);
  border-bottom: 1px solid var(--bcolor);
}

.team.active {
  background-color: var(--team-acolor);
}

.team.picked {
  background-color: var(--team-pcolor);
}

.team.autodraft {
  background-color: var(--team-dcolor);
}

.teamplayers {
}

.teamplayer {
  padding: 5px 4px 4px 6px;
  border-bottom: 1px solid var(--bcolor);
  background-color: var(--player-dcolor);
}

.teamplayer.pitcher {
  font-weight: bolder;
}

.option {
  display: flex;
  align-items: center;
  margin: 20px;
}

.optionspanel {
  margin: 0 auto 0 auto;
  width: 67%;
  border: 1px solid var(--optbutton-bgcolor);
  border-radius: 9px;
  margin-top: 30px;
}

.optbutton {
  padding: 7px 8px 6px 8px;
  font-size: 1.4rem;
  min-width: 12rem;
  text-align: center;
  background-color: var(--optbutton-bgcolor);
  color: var(--optbutton-color);
  border-radius: 7px;
}

.optbutton:hover {
  background-color: var(--optbutton-hbgcolor);
}

.optbutton.disabled, .optbutton.disabled:hover {
  background-color: var(--optbutton-dbgcolor);
}

.optdesc {
  margin-left: 15px;
  font-size: 1.1rem;
}

/*-- 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-true:before {
  content: "N";
  color: #759776;
  font-size: 0.8rem;
}

.icon-delete:before {
  content: "C";
  color: #D00000;
  font-size: 1.2rem;
}

.icon-saving:before {
  content: "W";
}

/* Hacks 

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

*/