@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700|Source+Code+Pro&display=swap");
/*********** Foundational styles *************/
/*********** Page styles *************/
body {
  font-family: "Open Sans", sans-serif;
  font-size: 0.8rem;
  color: #fff;
  padding: 25px;
  background: #2d2d2d;
  display: flex;
  flex-wrap: wrap;
  letter-spacing: 0.015rem;
}

a {
  color: rgba(45, 203, 211, 0.747);
  transition: color 0.25s ease;
}

a:hover {
  color: #2DCCD3;
}

h1 {
  margin: 0;
  font-size: 1.25rem;
}

h2.subtext {
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
}

h2 {
  margin: 0;
  font-size: 1rem;
}

main {
  flex-grow: 1;
  margin-right: 20px;
}
main h1 {
  font-size: 1.5rem;
}

img {
  max-width: 100%;
}

p {
  padding: 10px;
  margin: 0;
}

i {
  border: solid rgba(255, 255, 255, 0.493);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-right: 15px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.down {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

button {
  margin: 10px 0;
  padding: 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

textarea {
  font-family: "Source Code Pro", monospace;
  font-size: 0.8rem;
  border-radius: 4px;
  width: 100%;
}

input {
  font-family: "Source Code Pro", monospace;
  font-size: 0.8rem;
  border-radius: 4px;
  margin: 3px 5px;
  border: 0;
  border-bottom: 5px solid #b2becaa8;
  background-color: rgba(255, 255, 255, 0.075);
  padding: 4px;
}
input:hover {
  border-bottom: 5px solid #54D0FF;
  background-color: rgba(45, 45, 45, 0.281);
}
input:focus {
  outline: none;
  background-color: rgba(45, 45, 45, 0.219);
  border-bottom: 5px solid #54D0FF;
}
input:active {
  background-color: rgba(45, 45, 45, 0.699);
  border-bottom: 5px solid #00a8e6;
}

select {
  margin: 3px 5px;
}
select:focus {
  outline: none;
}

table {
  margin: 10px 0;
  width: 100%;
}
table tbody {
  margin: 0;
}
table tbody td {
  background-color: rgba(45, 45, 45, 0.699);
  margin: 0;
  width: 14.2857%;
  font-family: "Source Code Pro", monospace;
  letter-spacing: 0.15px;
  padding: 5px;
}

/*********** Section styles *************/
.steps {
  margin: 15px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}
.steps li {
  margin: 0;
  counter-increment: item;
  margin-bottom: 5px;
}
.steps li:before {
  margin-right: 10px;
  content: counter(item);
  font-size: 1rem;
  background: rgba(84, 209, 255, 0.671);
  border-radius: 100%;
  color: white;
  padding: 5px;
  width: 20px;
  height: 20px;
  text-align: center;
  display: inline-block;
}

section.form {
  flex-grow: 600;
}
section.form .label {
  width: 150px;
  margin: 3px 0;
}
section.form .cacheReq {
  border: none;
  margin-top: 10px;
  padding: 10px;
  transition: none;
  color: white;
  right: 0;
}
section.form .singleField {
  margin: 10px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}
section.form .singleField input {
  color: #fff;
  padding: 7px;
  width: 250px;
  transition: all 0.25s ease;
}
section.form .auth {
  background: rgba(255, 255, 255, 0.11);
  margin: 8px 0;
  padding: 18px;
  border-radius: 10px;
  max-width: 1500px;
}
section.form .auth .form-auth {
  margin: 20px 0;
}
section.form .services {
  background: rgba(255, 255, 255, 0.11);
  margin: 8px 0;
  padding: 18px;
  border-radius: 10px;
  max-width: 1500px;
}
section.form .services .form-services {
  font-weight: 300;
}
section.form .services .form-services .accHeader {
  margin: 10px 0;
}
section.form .services .form-services .accHeader .selectedService {
  padding: 5px 18px 15px 18px;
  background-color: rgba(45, 45, 45, 0.384);
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
section.form .services .form-services .accHeader .selectedService input[type=radio] {
  visibility: hidden;
}
section.form .services .form-services .accHeader .selectedService span {
  display: block;
  opacity: 0.35;
  font-style: italic;
}
section.form .services .form-services .accHeader .selectedService ul span {
  display: inline-block;
}
section.form .services .form-services .accHeader .selectedService label {
  display: block;
  position: relative;
  left: 0;
  top: 0;
  z-index: 9;
  margin: 10px;
  height: 12px;
}
section.form .services .form-services .accHeader .form-subservices {
  padding: 10px 0;
}
section.form .services .form-services .accHeader .form-subservices .checkboxes label {
  display: block;
  height: 20px;
}
section.form .services .form-services .accHeader .form-subservices .checkboxes input {
  cursor: pointer;
  width: 20px;
  margin-right: 10px;
}
section.form .services .form-services .accHeader h2 {
  padding: 15px;
  background-color: rgba(84, 209, 255, 0.664);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
section.form .services .form-services .accHeader h2:hover {
  cursor: pointer;
}
section.form .services .form-services .accHeader.hide h2 {
  color: rgba(255, 255, 255, 0.397);
  border-radius: 10px;
  background-color: rgba(84, 209, 255, 0.233);
  transition: background-color 0.25s;
}
section.form .services .form-services .accHeader.hide h2:hover {
  background-color: rgba(84, 209, 255, 0.411);
  color: rgba(255, 255, 255, 0.35);
}
section.form .services .form-services .accHeader.hide h2:active {
  background-color: rgba(84, 209, 255, 0.575);
  color: rgba(255, 255, 255, 0.5);
}
section.form .services .form-services .accHeader.hide div {
  display: none;
}
section.form .userinput {
  background: rgba(255, 255, 255, 0.11);
  margin: 8px 0;
  padding: 18px;
  border-radius: 10px;
  max-width: 1500px;
}
section.form .userinput .textarea {
  max-width: 70%;
}
section.form .userinput input {
  cursor: pointer;
  margin: 10px 0;
  border: 0;
  padding: 15px;
  transition: background-color 0.25s ease;
  background-color: rgba(84, 209, 255, 0.233);
}
section.form .userinput input:hover {
  transition: background-color 0.25s ease;
  background-color: rgba(84, 209, 255, 0.411);
}
section.form .userinput .form-userinput {
  margin: 10px 0;
}
section.form .userinput .form-userinput button {
  color: #fff;
  background-color: rgba(84, 209, 255, 0.411);
  width: 200px;
}
section.form .userinput .form-userinput button:hover {
  transition: background-color 0.25s ease;
  background-color: #00a8e6;
}
section.form .userinput .form-userinput button:active {
  background-color: indianred;
  border: none;
}
section.form .userinput .form-userinput button:focus {
  color: rgba(255, 255, 255, 0.25);
  background-color: rgba(84, 209, 255, 0.1);
  cursor: auto;
}

.results-tables {
  background: rgba(255, 255, 255, 0.11);
  margin: 8px 0;
  padding: 18px;
  border-radius: 10px;
  max-width: 1500px;
}
.results-tables span {
  display: inline-flex;
  border-radius: 10px;
  width: 10px;
  height: 10px;
  margin-right: 10px;
}
.results-tables div {
  margin: 15px 0;
}
.results-tables .succAfter span {
  background-color: #97D700;
}
.results-tables .unsuccAfter span {
  background-color: #E80517;
}

.isHidden {
  display: none;
}

.error span,
.success span {
  display: inline;
}

.error span {
  color: #E80517;
}

.success span {
  color: #97D700;
}

section.form .singleField input[type=number] {
  width: 80px;
}

.remove-button {
  background-color: white;
  margin: 0;
  border: 1px solid black;
  padding: 5px;
}
.remove-button:hover {
  background-color: #E80517;
}

.download-campus {
  margin-top: 50px;
}
.download-campus a {
  background-color: white;
  border-radius: 4px;
  padding: 12px;
  color: black;
  cursor: pointer;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

label[for=floor-level] .label {
  width: 300px;
}