body {
  font-family: 'Arial', sans-serif;
  background-color: #f7fafc;
  color: #2d3748;
  margin: 0;
  padding: 20px;
}

#promotional-banner {
  text-align: center;
  background-color: #805ad5;
  color: #ffffff;
  margin: -20px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}

#promotional-banner strong a {
  color: #ffffff;
}

q {
  border-left: 2px solid #805ad5;
  margin-left: 20px;
  padding: 8px;
}

.section {
  border-bottom: 2px solid #805ad5;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  background-color: #fff;
}

.section * {
  margin-left: 10px;
}

#intro p strong,
#download p strong,
p#try-it-out strong {
  margin-left: 0;
}

h1, h2 {
  color: #805ad5;
}

.section h2, .section pre {
  margin-left: 0;
}

pre {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
}

.success {
  margin-left: 0;
}

#click #success {
  color: #553c9a;
  display: none;
  background-color: #e9d8fd;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #b794f4;
}

#intercept .error, #click .error {
  margin-top: 10px;
  color: #742a2a;
  background-color: #fed7d7;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #feb2b2;
}

button {
  background-color: #805ad5;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #6b46c1;
}

#click button {
  margin-top: 10px;
}

textarea {
  width: 97%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
}

label {
  margin-bottom: 5px;
  color: #805ad5;
}

#check label:not(label[for="signature-textarea-with-checkbox"]) {
  margin-left: 0;
}

input[type="checkbox"] {
  margin-left: 10px;
}

#on, #off {
  margin-right: 5px;
}

#check-radio #on-off {
  color: green;
}

strong {
  color: #805ad5;
}

select {
  width: 98.5%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background-color: #f8f9fa;
}

#file-upload {
  margin-top: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin-left: 0 !important; /*TODO: Find a way to not need !important*/
}

ul li {
  background-color: #f8f9fa;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  color: #2d3748;
}

ul li:last-child {
  margin-bottom: 0;
}

ul li:hover {
  background-color: #edf2f7;
  cursor: pointer;
}

a {
  color: #805ad5;
  transition: color 0.3s ease;
}

a:hover {
  color: #6b46c1;
}

input[type="range"] {
  height: 10px;
  margin: 10px 0;
  background-color: #edf2f7;
  border: none;
  border-radius: 5px;
  outline: none;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: #805ad5;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: #805ad5;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  background-color: #edf2f7;
  border: none;
  border-radius: 5px;
}

input[type="range"]::-moz-focus-inner {
  border: 0;
}

input[type="date"] {
  appearance: none;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  outline: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  color: #805ad5;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

input[type="date"]::-moz-placeholder {
  color: transparent;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="date"]:focus {
  border-color: #805ad5;
}

#password-input input[type="password"], #password-input input[type="text"], #copy-paste input[type="number"] {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}

#password-input input[type="password"]:focus, #password-input input[type="text"]:focus, #copy-paste input[type="number"]:focus {
  outline: none;
  border-color: #805ad5;
  box-shadow: 0 0 5px rgba(128, 90, 213, 0.2);
}

#password-input div label, #password-input div input[type="password"], #password-input div input[type="text"] {
  margin-left: 0;
  margin-top: 20px;
}

#password-input input[type="checkbox"] {
  margin-top: 20px;
}

#copy-paste div {
  margin-left: 0;
  margin-bottom: 20px;
}

#copy-paste form * {
  margin-left: 0;
}

#copy-paste .success {
  margin-left: 10px;
  color: #553c9a;
  background-color: #e9d8fd;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #b794f4;
}

#copy-paste .error {
  margin-left: 10px;
  color: #742a2a;
  background-color: #fed7d7;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #feb2b2;
}

#copy-paste span {
  margin-left: 0;
}

#copy-paste button {
  margin-left: 10px;
}

footer p {
  padding-top: 12px;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  #promotional-banner {
    margin-right: -40px;
  }

  #promotional-banner {
    line-height: 1.5em;
    padding-left: 20px;
    padding-right: 40px;
  }

  h1 {
    font-size: 26px;
  }

  h2 {
    font-size: 24px;
  }

  .section {
    padding: 10px;
    margin-bottom: 10px;
  }

  .section * {
    margin-left: 0;
  }

  button {
    font-size: 14px;
    padding: 8px 16px;
  }

  textarea {
    width: calc(100% - 20px);
    padding: 8px;
    margin-top: 8px;
  }

  #password-input input[type="password"], #password-input, input[type="text"] {
    margin-top: 10px;
  }

  select {
    width: calc(100% - 20px);
    padding: 8px;
    margin-top: 8px;
  }

  pre {
    font-size: 18px;
  }

  #copy-paste input[type="number"] {
    margin-top: 10px;
  }

  #copy-paste .success, #copy-paste .error {
    margin-left: 0;
  }
}