:root {
    --background: #7ebcbc;
    --border: #000000;
    --text: #000000;
    --prematch: #5dc43f;
    --auton: #00c082;
    --teleop: #00b6b7;
    --endgame: #00a7d4;
    --postmatch: #0093d3;
    --table-margin: 7px;
  }

@font-face {
    font-family: 'Audiowide';
    font-style: normal;
    font-weight: normal;
    /*src: local('Alexis'), url('../fonts/alex.woff') format('woff');*/
    src: url("../fonts/Audiowide-Regular.ttf") format('truetype');
}

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--background);
    background-color: var(--background);
}

.column {
    /*float: center;
    align-items: center;
    width: 33.33%; */
    flex:1;
    min-width: 0; /* prevents overflow */
    
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}


input[type=radio] {
    border: 0px;
    width: 2.5em; /* circular checkbox size*/
    height: 2.5em;
    vertical-align: middle;
}

input[type=checkbox] {
    border: 0px;
    width: 2em;
    height: 2em;
    vertical-align: middle;
}

button {
    width:2.5em;
    height:2.5em;
}

#prematch_table_left, #prematch_table_mid, #prematch_table_right, #auton_table_left, #auton_table_mid, #auton_table_right, #teleop_table_left, #teleop_table_mid, #teleop_table_right, #endgame_table_left, #endgame_table_mid, #endgame_table_right, #postmatch_table_left, #postmatch_table_mid, #postmatch_table_right {

    font-family : -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    text-align: center;
    color: var(--text);
    font-size: 23px;
    font-style: bold;
    letter-spacing: 0px;
    border-width: 1px;
    border-color: var(--border);
}

#prematch_table_left, #prematch_table_mid, #prematch_table_right {
    background-color: var(--prematch);
}

#auton_table_left, #auton_table_mid, #auton_table_right {
    background-color: var(--auton);
}

#teleop_table_left, #teleop_table_mid, #teleop_table_right {
    background-color: var(--teleop);
}

#endgame_table_left, #endgame_table_mid, #endgame_table_right {
    background-color: var(--endgame);
}

#postmatch_table_left, #postmatch_table_mid, #postmatch_table_right {
    background-color: var(--postmatch);
}

#prematchHeader1, #prematchHeader2{
    text-align: left;
    color: white;
    border-color: transparent;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 7px;
    margin-right: 7px;
    background: green;
    border-radius: 6px;
    box-shadow: 0px 2px 6px black;
}

#qrHeader1 {
    color: var(--text);
    text-align: left;
    margin:0;
}
#qrHeader2 {
    color: var(--text);
    margin:0;
}
    
.field-image {
    margin: 2vw;
}

.field-image-src{  
    background-position: center;
    border: 1px solid;
}

.main-panel{
    display: none;
    height: 100%;
    min-height: 100%;
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--text);
    background-color: var(--background);
    font-family : -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    text-align: justify;
}

#prematch{
    display: table;
}

#qr-code{
  text-align: center;
}

h1{
    font-family: Audiowide;
    text-align: center;
    border-style: groove;
    border-color: var(--border);
    border-width: 4px;
    font-size: 40px;
    padding: 10px; 
    font-weight: 350;
}
h2{
    font-family: Audiowide;
    text-align: center;
    font-size: 24px;
    font-weight: 250;
    text-decoration: underline;
}



.divider-info{
    font-style: italic;
    padding-top: 5px;
}

.team-info-header{
    position: fixed;
    width: 50%;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    top:5em;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    color: var(--text);
    font-size: 16px;
    letter-spacing: 1px;
}

.match-label{
    text-align: center;
    background-color: var(--background);
}

.half-button-l{
    width: 48%;
    margin: 1vw;
    height: 100%;
    font: roboto;
}

.half-button-r{
    flex-grow: 1;
    height: 100%;
    width: 48%;
    margin: 1vw;
    font: roboto;
}

.half-button-container{
    display: flex;
}

#nextButton1, #nextButton2, #nextButton9, #nextButton10, .clearForm{
    font-family: Audiowide;
    padding: 10px;
    margin-right: 7px;
    background-color: var(--prematch);
    text-decoration: none;
    display: inline-block;
    width:fit-content;
}

#nextButton3, #nextButton4, #nextButton5, #nextButton6, #nextButton7, #nextButton8, .undoButton{
    font-family: Audiowide;
    background-color: var(--background); 
    padding: 10px;
    color: var(--text);
}

#prevButton7, #prevButton8, #prevButton9{
    font-family: Audiowide;
    background-color: var(--background); 
    padding: 10px;
    position: absolute;
    top: 1em;
    left: 48%;
}

#prevButton1, #prevButton2, #prevButton3, #prevButton4, #prevButton5, #prevButton6{
    font-family: Audiowide;
    background-color: var(--background); 
    padding: 10px;
    color: var(--text);
    
}

#prematch_table{
    font: Audiowide;
    text-align: center;
}

table {
    border-radius: 00px;
    box-shadow: 0px 0px 8px;
    margin: var(--table-margin);
    margin-top: 7px;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 10px;
    width: calc(100% - calc(2 * var(--table-margin)));

}


td {
    padding: 8px 4px;
    vertical-align: middle;  /* ensures text and inputs align on the same baseline */
}

/* Right-align label column, left-align input column */
td:first-child {
    padding-right: 15px;
    white-space: nowrap;  /* prevents label text from wrapping */
}



td input[type=radio] {
    display: inline-block;
    margin: 2px 4px;
}

input {
    font-size: 16px;
    font: roboto;
    text-align: center;
}

.title {
    width: "50%";
    text-align: right;
}

.field {
    width: "50%";
    text-align: left;
}

.divider-header{
    font-family: Audiowide;
    text-align: center;
    font-size: 24px;
    font-weight: 250;
    padding-bottom: 0px;
    color: black;
}

#qr-table {
    text-align: center;
    color: var(--text);
    background-color: var(--background);
}

/*I'm adding rounded corners because its the easiest step towards changing a UI from looking out the mid 2000s to the 2020s -Jamie */ 
input, button, select, textarea, .divider-header, .team-info-header, .column {
  border-radius: 6px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

#fullscreen-btn {
      /* positioning */
      position: fixed;
      bottom: 28px;
      left: 6%;
      transform: translateX(-50%);
      z-index: 9999;
 
      /* size & shape */
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0 22px;
      height: 46px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.18);
 
      /* colour */
      background: rgba(20, 20, 20, 0.72);
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      color: #f0f0f0;
 
      /* type */
      font-family: 'Georgia', serif;
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
 
      cursor: pointer;
      transition:
        background  0.25s ease,
        border-color 0.25s ease,
        transform    0.18s ease,
        box-shadow   0.25s ease;
 
      box-shadow: 0 4px 24px rgba(0,0,0,0.45);
    }
 
    #fullscreen-btn:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.38);
      box-shadow: 0 6px 32px rgba(0,0,0,0.55);
      transform: translateX(-50%) translateY(-2px);
    }
 
    #fullscreen-btn:active {
      transform: translateX(-50%) translateY(0px) scale(0.97);
    }
 
    /* SVG icons inside the button */
    #fullscreen-btn svg {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.25s ease;
    }
 
    #fullscreen-btn:hover svg {
      transform: scale(1.15);
    }
 
    /* hide/show the correct icon */
    #fullscreen-btn .icon-exit { display: none; }
    #fullscreen-btn.is-fullscreen .icon-enter { display: none; }
    #fullscreen-btn.is-fullscreen .icon-exit  { display: block; }
 
    /* label text swap */
    #fullscreen-btn .label-enter { display: inline; }
    #fullscreen-btn .label-exit  { display: none; }
    #fullscreen-btn.is-fullscreen .label-enter { display: none; }
    #fullscreen-btn.is-fullscreen .label-exit  { display: inline; }