@import "/css/defaultTop.css";

@import "/css/flexDefault.css";

@import "/css/media.css";

:root,
:root.Glasgow {
  --dark: var(--black);
  --light: var(--skyblue);
  --back: wheat;
  background-color: var(--back);
}

:root {
  --black: #000000;
  --skyblue: #6fafe9;
  --white: #ffffff;
  --green: #00aa00;
  --grey: #c0c0c0;
  --pinkish: #f0a0b0;
  --greenyellow: #adff2f;
}

.container {
  overflow: auto;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.formHeader {
  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
}

.pageBody {
  overflow: auto;
  height: calc(100% - 17vmax);
}

form,
table {
  background-color: var(--light);
  color: var(--dark);

  border: .15rem solid var(--dark);
  border-collapse: separate;
  border-spacing: 0 .25vmax;
  border-radius: inherit;
}

div,
table,
form {
  margin: .5vmax;
  padding: .25vw;
}

form table,
form fieldset {
  float: left;

  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

legend {
  font-weight: bold;
}

form>legend {
  color: var(--light);
  background-color: var(--dark);
}

form>select {
  float: left;

  margin: inherit;
  padding: inherit;
}

label [for="CompYY"] {
  font-weight: bolder;
  font-size: 1.17rem;
}

input[type=text],
select,
textarea,
reset {
  width: 95%;

  border-radius: inherit;
  resize: vertical;
}

table>thead,
table>tbody {
  border: .15rem solid var(--dark);
}

th,
td {
  padding: .2vmin;
}

td>img.icon {
  cursor: pointer;
  width: 25px;
  margin: 0px;
}

tr:nth-child(odd) {
  background-color: var(--grey);
}

.sortable th {
  cursor: pointer;
  text-decoration: underline;
}

#fixList .Home,
#PlayOffs .Home {
  text-align: right;
  padding: 0 .75vmin;
}

#fixList .v,
#PlayOffs .v {
  text-align: center;
  padding: 0 .75vmin;
}

#fixList .Away,
#PlayOffs .Away {
  text-align: left;
  padding: 0 .75vmin;
}

#fixList .Mywin,
#PlayOffs .Mywin {
  background-color: var(--greenyellow);
  font-weight: bold;
}

#fixList .win,
#PlayOffs .win {
  font-weight: bold;
}

#fixList .loss,
#PlayOffs .loss {
  background-color: var(--pinkish);
  font-weight: bold;
}

#fixList .draw,
#PlayOffs .draw {
  background-color: darkgray;
  font-weight: bold;
}

#fixList .Wk {
  font-weight: lighter;
  text-align: center;
  font-size: x-small;
}

#League tr.hidden>td,
.eFormFixts tr.hidden>td {
  padding: 0px;
}

#League tr.hidden,
.eFormFixts tr.hidden {
  visibility: collapse;
  height: 0px;
}

#League tr.top4_URC {
  visibility: visible;
  height: .25vh;
  background-color: black;
}

#League tr.top8_URC {
  visibility: visible;
  height: .25vh;
  background-color: red;
}

#League td.Team:before {
  /* sized to accomodate largest current team name */
  content: '';
  display: block;
  width: 6rem;
}

caption {
  font-weight: bold;
  caption-side: bottom;
}

th.ID_Match,
td.ID_Match,
tr[class*='ScoreUpd_'] {
  display: none;
}

#League td:not(.Team),
#Stats td:not(.team) {
  text-align: right;
  padding: 0 .33vmin;
}

td>fieldset {
  clear: both;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

td>fieldset[id*='home'] {
  float: right;
}

td>fieldset[id*='away'] {
  float: left;
}

td>fieldset label {
  float: right;
  clear: both;
}

form#mainForm,
div.fixList {
  overflow: auto;

  -ms-flex-negative: 2;
  flex-shrink: 2;

  background-color: var(--light);
  color: var(--dark);
  border: .15rem solid var(--dark);
}

div.fixList>table>thead>tr {
  background-color: var(--dark);
  color: var(--light);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) and (orientation:portrait),
only screen and (max-height: 300px) and (orientation:landscape) {

  body {
    font-size: calc(0.45rem + 1vw);
    margin: 1vmin;
    padding: .3vmin;

    border-radius: .5rem;
  }

  div,
  table,
  form {
    margin: auto;
    padding: inherit;
    border-radius: inherit;

    overflow: auto;
  }
}