:root {
  --theme-blue-accent: #0A91F0;    /* 10, 145, 240 */
  --theme-blue-secondary: #0A64F0; /* 10, 100, 240 */

  --theme-orange-accent: #F0910A;    /* 240, 145, 10 */
  --theme-orange-highlight: #F0640A; /* 240, 100, 10 */

  --theme-message-error-background: #FF000085;
  --theme-message-info-background:  #0A91F085;
}

html {
  font-size: 16px;
  font-family: sans-serif;
}


body {
  margin: 0px 0px 60px 0px;
}

main {
  margin: 0px 10px 0px 10px;
}

footer {
  margin: 10px 10px 0px 10px;
}


/* Navbar */
.navbar {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  min-height: 48px;
}


.nav-item {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: white;
  border: 1px solid;
  background-color: var(--theme-blue-secondary);
}

.nav-item:hover {
  background-color: var(--theme-blue-accent);
}

/* Has to come AFTER the :hover so that it'll appear on mobile */
.nav-item:active {
  background-color: var(--theme-blue-accent);
}

.nav-item-active {
  background-color: var(--theme-blue-accent);
  font-weight: bold;
}


/* Content */
h1 {
  font-size: 28px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
  margin: 5px;
}

h4 {
  font-size: 18px;
  margin: 5px 0px;
}

h5 {
  font-size: 16px;
  margin: 5px 0px;
}


/* Tables */
th {
  font-size: 16px;
  font-weight: bold;
}


/* Message Containers */
.message-container {
  margin-top: 5px;
  margin-bottom: 5px;

  border-radius: 5px;
}

.message-container p {
  margin: 5px;
  font-size: 16px;
}

.message-container.error{
  background-color: var(--theme-message-error-background);
  border: 2px solid red;
}

.message-container.info {
  background-color: var(--theme-message-info-background);
  border: 2px solid blue;
}

/* Form */
form fieldset {
  border: 2px solid #0b0c0c;
}

form label {
  font-size: 18px;
  font-weight: bold;
}

form input {
  min-height: 40px;
  font-size: 18px;
  padding: 5px;
  border: 2px solid #0b0c0c;
}

form input[type=text]:focus {
  outline: 3px solid var(--theme-blue-secondary);
}

.form-label {
  display: block;
  width: 100%;
}

.checkbox-label {
  cursor: pointer;
}

form input[type=checkbox] {
  min-height: 35px;
  min-width: 35px;
}


form select {
  width: 100%;
  font-size: 18px;
  vertical-align: middle;
  box-sizing: border-box;
  min-height: 40px;
  border: 2px solid #0b0c0c;
  padding: 5px;
  background-color: #fff;
}


form input[type=submit] {
  cursor: pointer;
  min-height: 48px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--theme-blue-secondary);
  border: none;
  color: white;
  width: 100%;
}

form input[type=submit]:hover {
  background-color: var(--theme-blue-accent);
}

form input[type=submit]:active {
  background-color: var(--theme-blue-accent);
}

#danger {
  background-color: red;
}

#danger:hover {
  background-color: var(--theme-message-error-background);
}

#danger:active {
  background-color: var(--theme-message-error-background);
}




form input[type=radio] {
  min-width: 40px;
  min-height: 40px;
  vertical-align: middle;
  margin-top: -1px;
}



/* Details */
details {
  margin: 10px 0px 10px 0px;
}

details summary {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  color: var(--theme-blue-secondary);
}

details summary span {
  text-decoration: underline;
}

details[open] summary {
  color: var(--theme-blue-accent);
}


/* Session Specific */

.session-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.session-link-item {
  text-align: center;
  margin: 5px;
  min-height: 35px;
}


.game-list {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  min-height: 48px;
}

.game-list-details {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.game-list-details-player {
  width: 40%;
}

.game-list-details-middle {
  width:20%;
  vertical-align: middle;
}

.game-list-actions {
  width: 100%;
}

.game-list-actions a p {
  font-size: 18px;
}

.game-list-actions input[type=submit] {
  width: 100%;
  margin: 5px 0px;
}