body {
  font-family: "montserrat", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 14pt;
  background-color: linen;
  padding: 0px;
  margin: 0px;
}

table, th, td {
  padding: 2px;
  border: 1px solid gray;
  border-collapse: collapse;
}

nav {
  position: fixed;
  background-color: gray;
  color: white;
  font-weight: 500;
  overflow: hidden;
  display: block;
  min-width: 320px;
  width: 100%;
  opacity: 0.7;
  padding-left: 30px;
}

/* Make the list of links take up the whole width of the nav */
nav ul {  
  list-style: none;
  float: left;
  padding: 0pt;
  margin: 0pt;
  padding-right: 20pt;
}
  
nav ul li {  
  display: block;
  float: left;
}

nav ul li a {
  display: block;
  font-family: "montserrat", sans-serif;
  font-weight: 500;
  color: white;
  padding: 10pt;
  padding-left: 10pt;
  padding-right: 10pt;
  text-decoration: none;
}

.noborder {
    border: none;
    padding: 10px;
}

table.answer {
    border: 2px solid;
    border-color: linen;
    margin-left: 10px;
}

table.answer tr td {
    border: none;
}

.big {
    font-size: 18pt;
}

.fixed {
    position: fixed;
}

.message {
    border: 1px solid;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 1rem;
}

.message-error {
    color: red;
    border-color: red;
    background-color: #ffeaea;
}

.message-info {
    color: green;
    border-color: green;
    background-color: #eaffea;
}

.question {
    border: 5px solid;
    border-color: linen;
    padding: 15pt;
    margin: 15pt;
    background-color: #ffffffaa;
}

.box-1 { width: 100px; }
.box-1-5 { width: 150px; }
.box-2 { width: 200px; }
.box-2-5 { width: 250px; }
.box-3 { width: 300px; }
.box-4 { width: 400px; }
.box-5 { width: 500px; }
.box-6 { width: 600px; }
.box-7 { width: 700px; }
.box-8 { width: 800px; }
.box-9 { width: 900px; }
.box-10 { width: 1000px; }
.box-11 { width: 1100px; }
.box-12 { width: 1200px; }
.box-14 { width: 1400px; }

.grading {
    border: none;
    padding: 10px;
}

.grading thead, .grading tbody, .grading td, .grading tr, .grading th {
    border: 3px solid;
    border-color: linen;
    background-color: #ffffffaa;
    padding: 5px;
}

.mono {
    font-family: monospace;
    font-weight: 500;
}

.wager {
    padding: 10pt 15pt;
    margin: 5pt 0pt 20pt;
    font-weight: 500;
    color: white;
    font-size: 14pt;
    max-width: 210px;
    background-color: gray;
}

select {
    padding: 5px 10px;
    margin: auto 5pt;
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    font-size: 14pt;
}

.clearbutton {
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    color: gray;
    padding: 5px 10px;
    margin: 5px 5px 0px 0px;
    text-decoration: none;
    border-radius:5px;
}

.buttonlike {
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    color: white;
    background-color: gray;
    padding: 5px 10px;
    margin: 5px 5px 0px 0px;
    text-decoration: none;
    border-radius:5px;
}

button {
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    color: white;
    background-color: gray;
    padding: 5px 10px;
    margin: 5pt 5pt 5pt 0pt;
    border-radius:5px;
    font-size: 14pt;
    border: none;
}

.danger {
    border: 1px solid;
    color: red;
    border-color: red;
    background-color: #ffeaea;
}

button:disabled {
    color: #DDDDDD;
    background-color: #BBBBBB;
}

input.correct-response {
    -moz-box-shadow: 0 0 10px green;
    -webkit-box-shadow: 0 0 10px green;
    box-shadow: 0 0 10px green;
}

input.incorrect-response {
    -moz-box-shadow: 0 0 10px red;
    -webkit-box-shadow: 0 0 10px red;
    box-shadow: 0 0 10px red;
}

label.correct-response {
    font-family: "montserrat", sans-serif;
    font-weight: 600;
}

label.incorrect-response {
    font-family: "montserrat", sans-serif;
    font-weight: 300;
    color: gray;
}

input[type='text'], input[type='password'], input[type='number'], input[type='file'] {
    font-family: "montserrat", sans-serif;
    font-size: 14pt;
}

textarea {
  font-family: "montserrat", sans-serif;
  font-weight: 500;
  font-size: 14pt;
}

input[type='checkbox'], input[type='radio'] {
    width:20px;
    height:20px;
    background:gray;
    border:2px solid linen;
}

input[type='radio'] {
    width:15px;
    height:15px;
    background:gray;
    border:2px solid linen;
}

/* Change the color of links on hover */
nav ul li a:hover {
  background-color: blue;
  color: pink;
}

/* Add a color to the active/current link */
nav ul li a.active {
  color: pink;
}

.logout {
  float: right;
}

.content {
  padding: 60px;
}

.inline {
   display: inline-block;
   vertical-align: top;
   padding: 0px;
   padding-left: 5px;
   padding-right: 5px;
   margin: 0px;
}

.small {
  font-size: 10pt;
}

.hidden {
    display: none;
}

dt {
    font-weight: 700;
}