:root {
  --color-text: #d1d1d1;
  --color-text-link: #5faaff;
  --color-text-link-hover: #89cfff;
  --color-text-heading: #f0f0f0;
  --color-background: #1a1f2b;
  --alert-border-color: #253045;
  --alert-danger-color: #e74c3c;
  --icon-color-purple: #768bff;
  --icon-color-maroon: #5faaff;
  --icon-color-green: #4ade80;
  --icon-color-blue: #3b82f6;
  --top-bar-background: #232b3b;
  --top-bar-box-shadow: 0 8px 20px #00000088;
  --top-bar-border-bottom: 1px solid #2e3a4a;
  --chart-label-color: #d1d1d1;
  --chart-grid-color: #2d394d;
  font-size: 1rem;
}

* {
  transition: all 0.25s ease;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: 1rem;
}

/* Buttons */
.button {
  /* color: #f5f5f5;
  background: linear-gradient(145deg, #2b3b55 0%, #1f2b3e 100%);
  border: 1px solid #355074;
  border-radius: 8px;
  box-shadow: 0 2px 8px #0004, inset 0 1px 2px #000;
  font-weight: 500; */
    /* width: 100%; */
    color: #f5f5f5;
    border: 1px solid #61bfff;
    border-radius: 6px;
    box-shadow: 0 2px 8px #abd5ee, inset 0 1px 2px #c6e2f3;
    font-weight: 500;
    background: #22334b;
    padding: 8px 0px;
}
.button:hover {
  background: linear-gradient(145deg, #345274 0%, #22334b 100%);
  border-color: #5faaff;
  color: #ffffff;
}
.button:active {
  background: linear-gradient(145deg, #1f2b3e, #16202f);
  box-shadow: inset 1px 1px 6px #00000088;
  border-color: #3b82f6;
}

.button-login {

    width: 100%;
    color: #f5f5f5;
    border: 1px solid #61bfff;
    border-radius: 6px;
    box-shadow: 0 2px 8px #abd5ee, inset 0 1px 2px #c6e2f3;
    font-weight: 500;
    background: #22334b;
    padding: 8px 0px;
}
.button-login:hover {
  background: linear-gradient(145deg, #345274 0%, #22334b 100%);
  border-color: #5faaff;
  color: #ffffff;
}
.button-login:active {
  background: linear-gradient(145deg, #1f2b3e, #16202f);
  box-shadow: inset 1px 1px 6px #00000088;
  border-color: #3b82f6;
}


/* Cards */
.card {
  background-color: #232b3b;
  border-radius: 10px;
  border: 1px solid #2e3a4a;
  box-shadow: 0 2px 10px #00000080;
  overflow: hidden;
}
.card-content {
  color: #e4e4e4;
  padding: 1.25rem;
  text-shadow: 0 1px 1px #0008;
}

/* Inputs */
.form-control,
.form-select {
  background-color: #fff;
  color: #d1d1d1;
  border: 1px solid #355074;
  border-radius: 6px;
  box-shadow: inset 0 0 4px #0003;
  font-size:16px;
  font-weight:600;
}
.form-control:hover,
.form-select:hover {
  border-color: #5faaff;
}
.form-control:focus,
.form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 6px #3b82f6aa;
  background-color: #fff;
  color: #111a29;;
}

/* Top bar */
.top-bar-menu-link {
  background: transparent;
  padding: 0.6rem 1rem;
  border-radius: 6px;
}
.top-bar-menu-link:hover {
  background: #2c3a51;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
}
.top-bar-menu-link.active {
  background: linear-gradient(to right, #314563, #22334b);
  border-left: 3px solid #5faaff;
  color: #ffffff;
}

/* Panels */
.panel, .toolbar {
  /* background-color: #1f283a; */
  background: linear-gradient(135deg, #1360cc 0%, #1b2638 100%);
  border: 1px solid #2c3a51;
  border-radius: 6px;
  box-shadow: 0 2px 10px #0006;
  margin:40px 0;
  padding:35px;
}

/* Modals */
.modal {
  background-color: #1f283a;
  border: 1px solid #314563;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px #00000040, 0 8px 25px #000000e6;
}
.modal-title {
  color: #5faaff;
}
.modal-message {
  color: #dadada;
}

/* Tabs */
.tabs {
  background-color: #2b3b55;
  border-radius: 6px;
  border: 1px solid #3b4f6a;
  box-shadow: 0 1px 4px #00000040;
}
.tabs-item {
  color: #cacaca;
}
.tabs-item:hover,
.tabs-item[aria-selected="true"] {
  color: #5faaff;
}

/* Footer */
  .app-footer {
    color: #fff;
    border-top: 1px solid #2c3a51;
    text-align: center;
    font-weight:600;
    font-size:16px;
}
.app-footer-link {
  color: #fff;
  font-weight: 600;
}

/* Misc */
.icon-highlight,
.icon-highlight:hover {
  color: #dadada;
}

.icon-dim {
  color: gray;
  text-shadow: 1px 1px #0000004d;
}

.hint {
  color: #a2a2a2;
}

.login .error {
  color: #89cfff;
}