/* css version 7.8 */

/* global */
@font-face {
  font-family: speedee;
  src: url(assets/fonts/Speedee_W_Rg.ttf);
}
@font-face {
  font-family: speedee;
  src: url(assets/fonts/Speedee_W_Bd.ttf);
  font-weight: bold;
}
html * {
  font-family: speedee;
  font-weight: 400;
  font-style: normal;
  background-color: black;
  color: white;
}
a:link,
a:visited {
color: black;
background-color: inherit;
}
a:hover,
a:active {
color: rgb(201, 42, 32);
background-color: inherit;
}
.banner {
  display: table;
  height: 10vh;
  width: 100%;
  background-image: url(assets/images/burger_logo.png?v=5);
  background-size: contain;
  background-repeat: round;
}
.bannertitle {
  height: inherit;
  width: inherit;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: transparent;
  color: rgb(245, 187, 71);
  text-shadow: -0.1em 0em 0.5em white, 0.1em 0em 0.5em white,
    0em -0.1em 0.5em white, 0em 0.1em 0.5em white;
}
.button:hover,
.button:focus,
.button:active {
  background-color: rgb(201, 42, 32);
  border: solid 3px rgb(201, 42, 32);
  border-radius: 5px;
  color: rgb(245, 187, 71);
  cursor: pointer;
}
.button{
  justify-content: center;
  align-items: center;
  appearance: none;
  box-sizing: content-box;
  height: 60%;
  background-color: rgb(245, 187, 71);
  border: solid 3px rgb(245, 187, 71);
  color: rgb(201, 42, 32);
  border-radius: 5px;
  font-size: 16px;
}
.loadanimation{
  background-image: url(assets/images/mcflurry_animation.gif);
  height: 60vh;
  width: 100%;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
/* add.php, submit.php */
#name {
  grid-row: 1;
  grid-column: 1 / span 4;
  appearance: none;
  height: 60%;
  width: -webkit-fill-available;
  margin: 0px;
  padding: 0px;
  background-color: transparent;
}
.formtable {
  display: grid;
  width: inherit;
  height: 70vh;
  align-items: center;
  text-align: left;
  padding-top: 2vh;
  grid-template-rows: 5vh 5vh 5vh 2.5vh 5vh 20vh 5vh 5vh 5vh;
  grid-template-columns: 25% 25% 25% 25%;
}
#category{
  grid-row: 2;
  grid-column: 1 / span 4;
  height: 70%;
  appearance: none;
  outline: none;
}
#prioritylabel{
  grid-row: 3;
  grid-column: 1 / span 4;
  display: flex;
  justify-content: center;
  text-decoration: underline;
  font-weight: bold;
}
#prioritylow{
  grid-row: 4;
  grid-column: 1;
  display: flex;
  justify-content: left;
  padding-left: 25px;
}
#priorityhigh{
  grid-row: 4;
  grid-column: 4;
  display: inline-flex;
  justify-content: right;
  padding-right: 25px;
}
.slidecontainer{
  display: contents;
}
.slider {
  grid-row: 5;
  grid-column: 1 / span 4;
  appearance: none;
  width: inherit;
  height: 15px;
  border-radius: 50px;   
  border: solid 3px rgba(245, 187, 71, 0.3);
  outline: none;
  transition: border-color 0.5s;
}
.slider:hover,
.slider:focus,
.slider:active {
  transition: border-color 0.5s;
  border-color: rgb(245, 187, 71);
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 36px;
  height: 36px;
  background-image: url(assets/images/bigmac_btn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  cursor: pointer;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#issue{
  display: flex;
  justify-content: left;
  align-items: center;
  outline: none;
  box-sizing: content-box;
  grid-row: 6;
  grid-column: 1 / span 4;
  resize: none;
  
  width: inherit;
  height: 90%;
  margin: 3px;
}
#imagelabel {
  grid-row: 7;
  grid-column: 1 / span 4;
  display: flex;
  justify-content: center;
  text-decoration: underline;
  font-weight: bold;
}
#images {
  grid-row: 8;
  grid-column: 1 / span 4;
  height: 60%
}
#submitbtn{
grid-row: 9;
  grid-column: 1 / span 4;
  display: flex;
  
}

.dynamicborder{
  border: solid 3px rgba(245, 187, 71, 0.3);
  border-radius: 5px;
  transition: border-color 0.5s;
}
.dynamicborder:hover,
.dynamicborder:focus,
.dynamicborder:active {
  transition: border-color 0.5s;
  border-color: rgb(245, 187, 71);
}
h1, h2{
text-align: center;
}

/* repairlist.php, getrecord.php */

.hidden{
  display: none;
}
.issueColumn{
  width: 75vw;
  cursor: pointer;
}
.statusColumn {
  width: 25vw;
}
th {
  background-color: rgb(245, 187, 71);
  color: black;
  font-weight:bold;
  top: 0;
  position: sticky;
}
tr{
  background-color: inherit;
}
tr:nth-child(even) {
  background-color: rgba(245, 187, 71, 0.3);
}
tr:hover td,
tr:hover pre {
  transition: background-color 0.25s;
  background-color: rgb(245, 187, 71);
}
td{
  background-color: inherit;
}
.addbtn, .historybtn{
  height: 5vh;
  text-decoration: underline;
  font-weight: bold;
  text-align: center;
  background-color: rgb(245, 187, 71);
  color: rgb(201, 42, 32);
  border-radius: 5px;
}
.addbtn:hover,
.addbtn:focus,
.addbtn:active,
.historybtn:hover,
.historybtn:focus,
.historybtn:active{
  cursor: pointer;
  background-color: rgb(201, 42, 32);
  color: rgb(245, 187, 71);
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: black;
}
.nsnheader{
font-weight: bold;
text-decoration: underline;
font-size: larger;
background-color: rgb(245, 187, 71);
padding-left: 5px;
color: black;
position: sticky;
}
.storewrapper{
  background-color: rgba(245, 187, 71, 0.1);
  border-radius: 5px;
  border: solid 3px rgb(245, 187, 71);
  margin: 5px 5px 50px 5px;
}
.instructions{
  margin-left: 5px;
}
#sortButton{
  margin-left: 5px;
}