/* FOOTER */
div.footer p {
  color: #bababa;
  font-size: 9pt;
  line-height: 1.3em;
}

div.footer p a {
  color: #bababa;
}

div.footer p a:visited {
  color: #bababa;
}

a {
  color: #9eb6dd;
}

/* a:visited {
  color: #995bd7;
} */
a:hover {
  background-color: rgba(81, 91, 112, 0.7);
  /* background-color: rgba(0, 0, 0, 0.18); */
}

div#heading {
  display: flex;
  margin-top: 18px;
}

div#logo {
  margin-right: 20px;
}

div#title h3 {
  margin-top: -5px;
  margin-left: 2px;
  font-weight: 200;
}

body {
  background-color: #1a1b1e; /* #374151; */
  color: #DEDEDE;
  line-height: 1.4em;
  width: 55%;
  min-width: 750px;
  margin: 15px auto;
  padding-left: 15px;
  padding-right: 15px;
  font-family: "Play", sans-serif;
  /* min-height: 500px; */
}

div.flexcontainer {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: flex-start; 
}

div.flexitem {
  /* width: 48%; */
  /* width: fit-content; */
  margin: 0px 20px;

}

div#welcome-text {
  /* flex-basis: auto; */

  flex-basis: 45%;
} 

div#banner {
  text-align: center;
  background-color: #DEDEDE;
  color: #374151;
  font-weight: bold;
  width: 100%;
  margin: 0px;
}

input[type="file"] {
  display: none;
}

#label-upload-doc {
  border: 1px solid #ccc;
  display: inline-block;
  /* padding: 6px 12px; */
  /* height: 24px; */
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 6px;
  cursor: pointer;
}

#label-upload-doc:hover {
  background-color: #2d2e33;
  text-decoration: underline;
}

.action-button {
  border: 1px solid #44a9b7;
  background-color: #44a9b7;
  display: inline-block;
  /* padding: 6px 12px; */
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 6px;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.action-button:hover {
  background-color: #55b8c5; 
  text-decoration: underline;
}

.content-area {
  padding-left: 15px;
  padding-right: 15px;
}

.small-text {
  /* color: #bababa; */
  font-size: 0.8rem;
  line-height: 1.3em;
}

textarea {
  width: 66%;
  height: 55px;
  padding: 12px;
  border: 1px solid #ccc;
  background-color: #23272a;
  /* font-family: Arial, sans-serif; */
  font-size: 13px;
  border-radius: 6px;
  color: #DEDEDE;
}

textarea::placeholder {
  color: #999;
}

#faq {
  line-height: 1em;
}

#faq p {
  padding-left: 15px;
  padding-right: 15px;
}

#back-to-summarize:hover {
  text-decoration: underline;
  cursor: pointer;
}


.spin {
  border: 3px solid #556177;
  border-radius: 50%;
  border-top: 3px solid #DEDEDE;
  width: 20px;
  height: 20px;
  margin-top: 1rem;
  -webkit-animation: spin 0.43s cubic-bezier(.7,.05,.4,.88) infinite;
  animation: spin 0.43s cubic-bezier(.7,.05,.4,.88) infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#demo-gif {
  /* border: 1px solid #ccc;
  background-color: #23272a;
  border-radius: 6px;
  display: block;
  margin: 0 auto; */
  display: block;
  margin: auto;
  /* width: 800px; */
  width: 100%;
  max-width: 800px;
}

.demo-gif-class {
  position: relative;
  display: inline-block;
  background-color: #25262b;
  /* padding: 10px; */
  padding: 2%;
  /* margin-left: 40px;
  margin-right: 40px; */
  /* line-height: 1rem; */
  margin: auto;
}
.demo-gif-class h2 {
  margin-top: 0.4rem;
}

.demo-gif-class::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: -5px;
  left: -5px;
  background-color: #44a9b7;
  z-index: -1;
}

#stats h3, #stats ul {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  
}