/* General */
body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.container {
  margin: auto;
  max-width: 980px;
  padding: 30px 10px;
}

.javascript-only {
  display: none;
}

/* Navbar */
.navbar {
  display: flex;
  margin: auto;
  max-width: 1000px;
  text-decoration: none;
  background-color: #F7F7F7;
  color: black;
  align-items: stretch;
}

@media only screen and (max-width: 800px) {
  .navbar {
    flex-direction: column;
  }
}

.navbar-element {
  padding: 10px;
  color: black;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background-color: #00000000;
  font-size: initial;
  display: flex;
  align-items: center;
}

.navbar-element.selected {
  background-color: #E9E9E9;
}

.navbar-element:hover {
  background-color: #D7D7D7;
  border: none;
}

.navbar-element-image {
  padding: 5px;
  height: 40px;
}

/* Grid */
.width-1 { width: 8.3333%; }
.width-2 { width: 16.6666%; }
.width-3 { width: 25%; }
.width-4 { width: 33.3333%; }
.width-5 { width: 41.6666%; }
.width-6 { width: 50%; }
.width-7 { width: 58.3333%; }
.width-8 { width: 66.6666%; }
.width-9 { width: 75%; }
.width-10 { width: 83.3333%; }
.width-11 { width: 91.6666%; }
.width-12 { width: 100%; }

@media only screen and (max-width: 800px) {
  .width-1-sm { width: 8.3333%; }
  .width-2-sm { width: 16.6666%; }
  .width-3-sm { width: 25%; }
  .width-4-sm { width: 33.3333%; }
  .width-5-sm { width: 41.6666%; }
  .width-6-sm { width: 50%; }
  .width-7-sm { width: 58.3333%; }
  .width-8-sm { width: 66.6666%; }
  .width-9-sm { width: 75%; }
  .width-10-sm { width: 83.3333%; }
  .width-11-sm { width: 91.6666%; }
  .width-12-sm { width: 100%; }
}

/* Forms */
.form-group {
  display: flex;
  flex-wrap: wrap;
  margin: 2px 0;
}

.form-label {
  padding: 5px;
}

.form-input {
  padding: 5px 8px;
  margin: 2px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #6F6F6F;
  border-radius: 7px;
  flex-grow: 1;
}

.form-field {
  display: flex;
}

textarea.form-input {
  height: 80px;
  resize: vertical;
}

@media only screen and (max-width: 800px) {
  .form-group {
    flex-direction: column;
  }
  
  .form-input {
    padding: 10px;
    font-size: medium;
  }
}

/* Buttons */
[class*=button] {
  appearance: auto;
  padding: 5px 8px;
  margin: 2px;
  height: 32px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-radius: 7px;
  font-family: inherit;
  font-size: small;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  [class*=button] {
    padding: 10px;
    font-size: medium;
  }
}

.button-submit {
  background-color: #9FFF9F;
  border-color: #007F00;
}

.button-new {
  background-color: #9FFF9F;
  border-color: #007F00;
}

.button-edit {
  background-color: #9F9FFF;
  border-color: #00007F;
}

.button-delete {
  background-color: #FF7F7F;
  border-color: #7F0000;
}

/* Text formatting */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Error list */
.error-list {
  padding: 5px 5px 5px 23px;
  background-color: #FF8F9F;
  color: #7F0000;
  border: 1px solid #7F0000;
  border-radius: 4px;
}

.notify-list {
  padding: 5px 5px 5px 23px;
  background-color: #9FFF9F;
  color: #005F00;
  border: 1px solid #005F00;
  border-radius: 4px;
}

/* Accordion */
.accordion-item {
  border: 1px solid #0000007F;
  border-radius: 10px;
  margin-top: 3px;
}

.accordion-item > * {
  border-radius: inherit;
  padding: 5px 10px;
}

.accordion-item-radio:checked ~ .accordion-item-hidewhenopen {
  display: none;
}

.accordion-item-radio, .accordion-deselector {
  display: none;
}

.accordion-item-radio:not(:checked) ~ .accordion-item-content {
  display: none;
}

.accordion-item-radio:checked ~ * .accordion-expander {
  transform: rotate(-90deg);
}

/* Credential Styling */
.credential-title {
  background-color: #00000020;
  display: flex;
}

.credential-title > * {
  min-width: 30%;
}

@media only screen and (max-width: 800px) {
  .credential-title {
    flex-direction: column;
  }
}