/* ========= General ===========*/
body {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  line-height: 1.6em;
  padding: 0;
  margin: 0;
  background-color: #84a98c;
}

p,
td {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  color: #292929;
}

hr {
  color: darkslategrey;
  border-style: dashed;
  border-width: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

h1 {
  font-size: calc(130% + 1vw);
  font-weight: normal;
}

h2 {
  font-size: 1.2em;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 0;
}

a {
  color: #385456;
}

a:hover {
  color: #84a98c !important;
  text-decoration: none;
}

a:visited {
  color: #522b47;
  text-decoration: line-through;
}

ul,
ol {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  color: #292929;
}

ul {
  list-style-type: square;
}

/* ========= Assignment 1 ===========*/

#container {
  width: 70%;
  margin: auto;
  padding: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav #return {
  background-color: #2f3e46;
  color: white;
}

.topnav #return:hover {
  background-color: #ddd;
  color: black;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black !important;
}

/* Style the content */
.content {
  background-color: #cad2c5;
  padding: 10px;
}

/* Style the Assessement*/
.assessment {
  background-color: #cad2c5;
  padding: 10px;
}

.assessment > h2 {
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
}

/* Style the footer */
.footer {
  background-color: #f2f2f2;
  text-align: center;
}

a.linkWrong:visited {
  text-decoration: line-through;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  text-align: center;
  flex-direction: row;
  padding: 20px;
}

.flex-container > img {
  padding: 5%;
}

.flex-container > div {
  padding: 20px;
  align-items: center;
  margin: auto;
}

.flex-container > div > h2 {
  font-weight: bold;
  text-decoration: underline;
}

/* ========= Assessment ===========*/
.feedbackAnswer {
  font-size: calc(300% + 1vw);
  font-weight: bolder;
  margin: 20px;
}

.feedbackExplaination {
  margin: 20px;
}

.questionContainer > input {
  /* Button*/
  background-color: #385456;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 10spx 0 rgba(0, 0, 0, 0.19);
}

.questionContainer > input:hover {
  cursor: pointer;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.questionDiv {
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.questionBody {
  overflow: clip;
  align-items: center;
}

.questionContainer {
  border-style: solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*=========Assignment 2=================*/

.formheader {
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
  vertical-align: top;
  color: #275828;
  padding: 20px;
}

.deckRecText {
  text-align: center;
  align-items: center;
  justify-content: center;
}

#deckRec {
  text-align: center;
  align-items: center;
  justify-content: center;
}

#deckRecTitle {
  font-size: calc(100% + 1vw);
  font-weight: bolder;
  margin: 20px;
  padding: 10px;
}

#deckRec > input {
  /* Button*/
  background-color: #385456;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 10spx 0 rgba(0, 0, 0, 0.19);
}

#deckRec img {
  height: fit-content;
  width: 50%;
}

#deckRec > input:hover {
  cursor: pointer;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

#deckRecContainer {
  border-style: solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#deckRecContainer > img {
  width: 50%;
}

/* Checkboxes */

/* Customize the label (the container) */
.checkboxContainer {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-items: center;
}

/* Hide the browser's default checkbox */
.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 30%;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkboxContainer:hover input ~ .checkmark {
  background-color: #c6e6c7;
}

/* When the checkbox is checked, add a blue background */
.checkboxContainer input:checked ~ .checkmark {
  background-color: #4caf50;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkboxContainer input:checked ~ .checkmark:after {
  display: block;
}

.checkboxContainer input:disabled {
  cursor: not-allowed;
}

/* Style the checkmark/indicator */
.checkboxContainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.noPrefContainer {
  display: block;
  position: relative;
  margin: 12px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
}

/* Create a custom checkbox */
.noPrefContainer .checkmark {
  position: absolute;
  top: 5%;
  left: 15%;
  height: 18px;
  width: 18px;
  background-color: #eee;
}

/* Hide the browser's default checkbox */
.noPrefContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* On mouse-over, add a grey background color */
.noPrefContainer:hover input ~ .checkmark {
  background-color: #c6e6c7;
}

/* When the checkbox is checked, add a blue background */
.noPrefContainer input:checked ~ .checkmark {
  background-color: #4caf50;
}

/* Show the checkmark when checked */
.noPrefContainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.noPrefContainer .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Radio Buttons */

/* Customize the label (the container) */
.radioContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radioContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.rcheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radioContainer:hover input ~ .rcheckmark {
  background-color: #c6e6c7;
}

/* When the radio button is checked, add a blue background */
.radioContainer input:checked ~ .rcheckmark {
  background-color: #4caf50;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.rcheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked ~ .rcheckmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radioContainer .rcheckmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* Select */

.custom-select {
  /* Personalize */
  flex: 1;
  padding: 0 1em;
  color: #fff;
  background-color: #327134;
  background-image: none;
  cursor: pointer;
}

.custom-select:disabled {
  /* Personalize */
  cursor: not-allowed;
}

/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */
.custom-select {
  position: relative;
  display: flex;
  width: 20em;
  height: 3em;
  border-radius: 0.25em;
  overflow: hidden;
}
/* Arrow */
.custom-select::after {
  content: "\25BC";
  position: absolute;
  top: 0;
  right: 0;
  padding: 1em;
  background-color: #fff;
  transition: 0.25s all ease;
  pointer-events: none;
}

/* Range Slider */

.range-slider {
  width: 80%;
  margin: 50px auto;
  text-align: center;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80%;
  height: 10px;
  border-radius: 5px;
  background: #333;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin-top: 20px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}
.range-price {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.range-price label {
  margin-right: 5px;
}
.range-price input {
  width: 50%;
  padding: 5px;
  text-align: center;
}
.range-price input:first-of-type {
  margin-right: 15px;
}

input[type="number"] {
  width: 50%;
  padding: 6px 10px;
  margin: 4px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.slider:disabled {
  /* Personalize */
  cursor: not-allowed;
}
.sliderInput:disabled {
  /* Personalize */
  cursor: not-allowed;
}

input[type="text"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="submit"] {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  height: 120%;
  width: 120%;
}

input[type="reset"] {
  background-color: #fe5f55;
  border: none;
  height: 20%;
  width: 20%;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

.button {
  background-color: #04aa6d; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: 1px solid green;
}

#divwithtext {
  width: 50%;
}
textarea {
  width: 100%;
  height: 80%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

table {
}