/* ----- Font ----- */

@font-face {
  font-family: "Roboto Condensed";
  src: url("/cxc/public/font/RobotoCondensed-Light.ttf");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("/cxc/public/font/RobotoCondensed-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

:root {
  --primary-font-family: "Roboto Condensed";
}

* {
  font-family: var(--primary-font-family);
}

/* ----- Font ----- */

/* ----- Light-/Darkmode ----- */

html > body {
  height: 100vh;
  background: #f4f5f7;
  color: var(--text-color);

  /* Text color */
  --text-color: #172b4d;
  --text-disabled-color: #505764;

  /* Headline colors */
  --h1: #211b19;
  --h2: #333;

  /* Input color */
  --input-background-color: #fafbfc;

  /* Modal and Container background color*/
  --modal-background-color: #fff;

  /* Header */
  --header-background-color: #f8f9fa;

  /* Tooltip */

  /* Link and Buttons */
  --button-background-color: #e6e7eb;
  --button-hover-background-color: #d6d7db;
  --link-color: #0245c0;
  --link-active-color: var(--text-color);

  /* Table */
  --table-head-color: #465166;

  /* AUI-Messages */
  --error-icon-color: #de350b;
  --error-message-background-color: #ffebe6;
  --success-icon-color: #00875a;
  --success-message-background-color: #e3fcef;
}

html > body.dark {
  background: #1d2021;
  color: var(--text-color);

  /* Text color */
  --text-color: #f1efe3;
  --text-disabled-color: #c4c4c4;

  /* Headline */
  --h1: #211b19;
  --h2: #bdc7ce;

  /* Input color */
  --input-background-color: #353535;

  /* Modal and Container background color*/
  --modal-background-color: #252525;

  /* Header */
  --header-background-color: #222526;

  /* Link and Buttons */
  --button-background-color: #3c3e40;
  --button-hover-background-color: #4c4d50;
  --link-color: #3bb2fe;
  --link-active-color: #61d1ff;

  /* Table */
  --table-head-color: #a4b0c4;

  /* AUI-Messages */
  --error-icon-color: #ff0000;
  --error-message-background-color: #6e2c2c;
  --success-icon-color: #00df6b;
  --success-message-background-color: #2d5847;
}

/* ----- Light-/Darkmode ----- */

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}

.notice {
  color: lightgray;
  font-size: smaller;
  padding-left: inherit;
}

/* ----- Navigationbar ----- */

nav.navbar {
  background-color: var(--header-background-color) !important;
  padding: 20px;
}

button#projectButton.aui-button,
nav.navbar a.aui-button {
  color: var(--text-color);
  background-color: var(--header-background-color);
}

button#projectButton.aui-button.active-navbar-button,
nav.navbar a.aui-button.active-navbar-button {
  background-color: var(--button-background-color);
}

button#projectButton.aui-button:hover,
nav.navbar a.aui-button:hover {
  background-color: var(--button-hover-background-color);
}

button#projectButton.project-button {
  margin-left: 20%;
}

button.profile {
  background-color: var(--button-background-color);
}

button.profile,
span#darkMode {
  height: 40px !important;
  border-radius: 50px !important;
  color: var(--text-color);
}

span#darkMode {
  margin-left: auto;
  margin-right: 10px;
  width: 40px !important;
}

.profile-icon,
#darkMode {
  font-size: 25px;
}


span#darkMode.fa-sun {
  padding: 7px;
}

span#darkMode.fa-moon {
  padding: 7px 9px;
}

ul.nav-tabs li.nav-item a {
  color: var(--link-color);
}

ul.nav-tabs li.nav-item a.active {
  background-color: var(--input-background-color);
  color: var(--link-active-color);
}

/* ----- Navigationbar ----- */

/* ----- Dropdown ----- */

aui-dropdown-menu.aui-dropdown2[role="menu"] {
  background-color: var(--modal-background-color);
  color: var(--text-color);
}

aui-dropdown-menu.aui-dropdown2[role="menu"] aui-item-link a[role="menuitem"] {
  color: var(--text-color);
}

/* ----- Dropdown ----- */

/* ----- Button ----- */

button.close,
div.modal-header button.close,
aui-select button.aui-button {
  color: var(--text-color);
  opacity: 1;
}

.aui-button[aria-disabled="true"].aui-button-primary,
.aui-button[disabled].aui-button-primary {
  background-color: #5075ccbf;
}

button.light-button {
  border-style: hidden;
  background-color: inherit;
  margin-left: 0;
  margin-right: auto;
  width: auto;
  height: min-content;
}

/* ----- Button ----- */

/* ----- Paginationbar ----- */

.pageNavigation {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

.page-navigation-button {
  padding: 0px 5px !important;
  display: inline-block;
}

.page-navigation-button.current-page {
  border: solid 1px #fc6505;
  border-radius: 0.375rem;
}

.page-navigation-button:hover {
  cursor: pointer;
}

/* ----- Paginationbar ----- */

/* ----- Tabs ----- */

main {
  display: flex !important;
  justify-content: center;
}

section {
  padding: 20px;
  background-color: var(--modal-background-color);
}

.tabs-section {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* ----- Tabs ----- */

/* ----- Input ----- */

.error {
  color: red;
  margin-top: 10px;
}

.select-header {
  margin-bottom: 10px;
}

form.aui:not(.aui-legacy-forms) select.select:not([size]),
input.form-control,
aui-select input[type="text"].text {
  background-color: var(--input-background-color);
  color: var(--text-color);
}

aui-select,
aui-select.selectfield,
aui-select input {
  max-width: 100%;
  width: 100%;
  padding: 0;
}

aui-select input[type="text"].text {
  background-color: var(--input-background-color);
  border: none;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
}

/* ----- Input ----- */

/* ----- Modal ----- */

div.modal.show div.modal-dialog,
div.modal.show div.modal-dialog div.modal-content {
  background-color: var(--modal-background-color);
  border-radius: 0.5rem;
}

.modal-header h5 {
  color: var(--h2);
}

.modal-body form.aui {
  width: 100% !important;
}

.modal-body form.aui div.field-group {
  padding: 0px;
}

.modal-body form.aui div.field-group label,
.modal-body form.aui div.mb-3 label {
  color: var(--text-color);
}

.modal-body form.aui div.field-group label {
  margin-left: auto;
  width: auto;
  float: none;
  display: table-cell;
  padding-bottom: 5px;
}

.modal-body form.aui div.field-group span aui-select {
  max-width: 100%;
  --aui-form-placeholder-text-color: var(--text-color);
  --aui-form-placeholder-disabled-text-color: var(--text-disabled-color);
}

.modal-body form.aui div.field-group span aui-select input[type="text"] {
  background-color: var(--input-background-color);
  border: none;
  padding-left: 10.5px;
  color: var(--text-color);
}

.modal-body form.aui p.note.field-group {
  width: fit-content;
  display: table-caption;
  color: lightgray;
  font-size: x-small;
  padding: 0px;
  margin-top: -10px;
  margin-bottom: 5px;
}

.modal-body form.aui p.note.field-group span.aui-icon.icon-required {
  top: 0px;
}

/* ----- Modal ----- */

/* ----- Tab ----- */

.tab-content {
  background-color: var(--modal-background-color);
}

.tab-panel {
  display: none;
}

/* ----- Tab ----- */

/* ----- AUI-Messages ----- */

div.aui-message-error:after {
  color: var(--error-icon-color);
}

div.aui-message-error {
  color: var(--text-color);
  background-color: var(--error-message-background-color);
}

div.aui-message-success:after {
  color: var(--success-icon-color);
}

div.aui-message-success {
  color: var(--text-color);
  background-color: var(--success-message-background-color);
}

/* ----- AUI-Messages ----- */

/* ----- Tooltip/Caption ----- */

table > .tooltiptext {
  opacity: 0;
  transition: 0.2s ease-in-out;
  border-radius: 15px;
  position: absolute;
  transform: translate(100%, -100%);
  font-size: 0.9rem;
  margin: 0 auto;
}

.tooltiptext:hover {
  padding: 10px;
  opacity: 1;
  background-color: #344563;
  color: white;
  transform: translate(100%, -120%);
}

/* ----- Tooltip/Caption ----- */

/* ----- Footer ----- */

.footer-body {
  background-color: inherit;
}

/* ----- Footer ----- */

/* ----- Responsivity ----- */

@media only screen and (min-width: 300px) {
  html {
    zoom: 0.5;
  }
}

@media only screen and (min-width: 600px) {
  html {
    zoom: 0.7;
  }
}

@media only screen and (min-width: 800px) {
  html {
    zoom: 0.9;
  }
}

@media only screen and (min-width: 1000px) {
  html {
    zoom: 1;
  }
}

/* ----- Responsivity ----- */