/*
  Global App CSS
  ----------------------
  Use this file for styles that should be applied to all components.
  For example, "font-family" within the "body" selector is a CSS property
  most apps will want applied to all components.

  Any global CSS variables should also be applied here.
*/

/* @import 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'; */

:root {
  --main-color-ui: #1010eb;
  --ui-accent: #1010eb;
  --ui-accent-alt: #0085ca;
  --ui-accent-soft: #2441e7;
  --ui-bg: #ffffff;
  --ui-bg-muted: #f2f2f2;
  --ui-bg-subtle: #f7f7f7;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-hover: #f0f0f0;
  --ui-surface-zebra: #f2f2f2;
  --ui-text: #212529;
  --ui-text-secondary: #3c3c3c;
  --ui-text-muted: #767676;
  --ui-text-soft: #666666;
  --ui-text-inverse: #ffffff;
  --ui-border: #cccccc;
  --ui-border-strong: #767676;
  --ui-border-light: #dedede;
  --ui-border-input: #767676;
  --ui-header-bg: #140f4b;
  --ui-header-text: #ffffff;
  /* Large chrome fills (top nav, table thead) — brand blue in light, dark surface in dark */
  --ui-bar-bg: #1010eb;
  --ui-thead-bg: #1010eb;
  --ui-sidebar-bg: #f2f2f2;
  --ui-sidebar-surface: #ffffff;
  --ui-link: #1010eb;
  --ui-danger: #d50000;
  --ui-danger-bg: #ffe6e6;
  --ui-danger-border: #ff4d4d;
  --ui-disabled-bg: #eeeeee;
  --ui-disabled-text: #cccccc;
  --ui-overlay: rgba(0, 0, 0, 0.6);
  --ui-table-hover: rgba(0, 0, 0, 0.075);
  --ui-input-bg: #ffffff;
  --ui-input-text: #767676;
  --ui-modal-bg: #ffffff;
  --ui-shadow: rgba(0, 0, 0, 0.15);
  --ui-success: #77bc1f;
  --ui-toggle-track: #e5e5e5;
  --ui-code-bg: #f7f7f7;
}

:root.theme-dark {
  --main-color-ui: #9aa0ff;
  --ui-accent: #9aa0ff;
  --ui-accent-alt: #6bb8de;
  --ui-accent-soft: #a8b0ff;
  --ui-bg: #12121c;
  --ui-bg-muted: #1a1a28;
  --ui-bg-subtle: #1e1e2e;
  --ui-surface: #1c1c2a;
  --ui-surface-elevated: #242438;
  --ui-surface-hover: #2a2a3e;
  --ui-surface-zebra: #1a1a28;
  --ui-text: #e8e8ef;
  --ui-text-secondary: #c8c8d4;
  --ui-text-muted: #a0a0b0;
  --ui-text-soft: #b0b0c0;
  --ui-text-inverse: #ffffff;
  --ui-border: #3a3a4e;
  --ui-border-strong: #5a5a70;
  --ui-border-light: #333348;
  --ui-border-input: #5a5a70;
  --ui-header-bg: #1a1a28;
  --ui-header-text: #e8e8ef;
  --ui-bar-bg: #1a1a28;
  --ui-thead-bg: #242438;
  --ui-sidebar-bg: #161624;
  --ui-sidebar-surface: #1c1c2a;
  --ui-link: #a8b0ff;
  --ui-danger: #ff6b6b;
  --ui-danger-bg: #3a1a1a;
  --ui-danger-border: #ff4d4d;
  --ui-disabled-bg: #2a2a3a;
  --ui-disabled-text: #666678;
  --ui-overlay: rgba(0, 0, 0, 0.75);
  --ui-table-hover: rgba(255, 255, 255, 0.08);
  --ui-surface-hover: #2e2e44;
  --ui-input-bg: #242438;
  --ui-input-text: #c8c8d4;
  --ui-modal-bg: #1c1c2a;
  --ui-shadow: rgba(0, 0, 0, 0.45);
  --ui-success: #8fd63a;
  --ui-toggle-track: #3a3a4e;
  --ui-code-bg: #242438;
  color-scheme: dark;
}

html.theme-dark,
html.theme-dark body {
  background-color: var(--ui-bg);
  color: var(--ui-text);
}

body {
  margin: 0px;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  background-color: var(--ui-bg);
  color: var(--ui-text);
}

.d-grid {
  display: grid;
  grid-template-columns: 1fr 3fr 3fr;
  gap: 10px;
}

.d-none {
  display: none;
}

.d-grid-mobile-modal-up {
  display: none;
}

.d-grid-mobile-modal-down {
  display: none;
}

.d-grid:nth-child(odd) {
  background-color: var(--ui-surface-zebra);
}
.d-grid:hover {
  background-color: var(--ui-surface-hover);
}

.swal2-popup.swal2-modal.swal2-show {
  width: 70%;
}

div {
  -ms-flex-line-pack: center;
  align-content: center;
}

.table-hover thead {
  background-color: var(--ui-thead-bg);
  color: var(--ui-header-text);
  margin: auto;
}

.table-hover tbody tr:hover,
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  color: var(--ui-text);
  background-color: var(--ui-surface-hover);
}

table.table.vertical-align-middle thead td {
  vertical-align: middle;
}

.swal2-show {
  &.terms {
    width: 45% !important;
    h2 {
      color: var(--main-color-ui);
      text-align: left;
      border-bottom: 1px solid var(--ui-border);
      padding-left: 5%;
      padding-bottom: 20px;
      padding-top: 0;
    }
  }
}

@media only screen and (min-width: 756px) and (max-width: 1200px) {
  .swal2-popup.swal2-modal.swal2-show {
    width: 80%;
  }
}

@media only screen and (min-width: 601px) and (max-width: 755px) {
  .swal2-popup.swal2-modal.swal2-show {
    width: 95%;
  }
}

@media (max-width: 599px) {
  .swal2-popup.swal2-modal.swal2-show {
    width: 95%;
  }

  .swal2-show {
    &.terms {
      margin-top: 30%;
    }
  }
  /* .d-grid-mobile-modal-up {
    display: grid;
    grid-template-columns: auto;
  } */

  /* .d-grid-6 {
    display: none;
  } */

  .d-grid-mobile-modal-down {
    display: grid;
    grid-template-columns: auto;
  }
}

.swal2-popup.swal2-modal.swal2-show .swal2-close {
  border: solid 1px var(--ui-text-muted);
  border-radius: 50px;
  padding: 0;
  margin: 10px 10px 0px 0px;
  color: var(--ui-text-muted);
  padding-bottom: 5px;
}
.swal2-popup.swal2-modal.swal2-show .swal2-close:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* SweetAlert2 dark theme */
html.theme-dark .swal2-popup {
  background: var(--ui-modal-bg) !important;
  color: var(--ui-text) !important;
  -webkit-box-shadow: 0 0 20px var(--ui-shadow);
  box-shadow: 0 0 20px var(--ui-shadow);
}

html.theme-dark .swal2-title,
html.theme-dark .swal2-html-container,
html.theme-dark .swal2-content {
  color: var(--ui-text) !important;
}

html.theme-dark .swal2-input,
html.theme-dark .swal2-textarea,
html.theme-dark .swal2-select {
  background: var(--ui-input-bg) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border-input) !important;
}

html.theme-dark .swal2-validation-message {
  background: var(--ui-danger-bg) !important;
  color: var(--ui-text) !important;
}

html.theme-dark .swal2-styled.swal2-confirm {
  background-color: var(--ui-accent) !important;
}

html.theme-dark .swal2-styled.swal2-cancel {
  background-color: var(--ui-border-strong) !important;
}

/* Bootstrap dark overrides */
html.theme-dark .table {
  color: var(--ui-text);
  background-color: var(--ui-surface);
}

html.theme-dark .table td,
html.theme-dark .table th {
  border-color: var(--ui-border-light);
}

html.theme-dark .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--ui-surface-zebra);
}

html.theme-dark .table-hover tbody tr:hover,
html.theme-dark .table-hover tbody tr:hover > td,
html.theme-dark .table-hover tbody tr:hover > th {
  color: var(--ui-text) !important;
  background-color: var(--ui-surface-hover) !important;
}

html.theme-dark .form-control,
html.theme-dark .custom-select,
html.theme-dark select,
html.theme-dark input:not([type='checkbox']):not([type='radio']),
html.theme-dark textarea {
  background-color: var(--ui-input-bg);
  color: var(--ui-text);
  border-color: var(--ui-border-input);
}

html.theme-dark .form-control:focus,
html.theme-dark .custom-select:focus,
html.theme-dark select:focus,
html.theme-dark input:focus,
html.theme-dark textarea:focus {
  background-color: var(--ui-input-bg);
  color: var(--ui-text);
  border-color: var(--ui-accent);
}

html.theme-dark .form-control::-webkit-input-placeholder {
  color: var(--ui-text-muted);
}

html.theme-dark .form-control::-moz-placeholder {
  color: var(--ui-text-muted);
}

html.theme-dark .form-control:-ms-input-placeholder {
  color: var(--ui-text-muted);
}

html.theme-dark .form-control::-ms-input-placeholder {
  color: var(--ui-text-muted);
}

html.theme-dark .form-control::placeholder {
  color: var(--ui-text-muted);
}

html.theme-dark .card,
html.theme-dark .modal-content,
html.theme-dark .dropdown-menu {
  background-color: var(--ui-surface-elevated);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

html.theme-dark .dropdown-item {
  color: var(--ui-text);
}

html.theme-dark .dropdown-item:hover,
html.theme-dark .dropdown-item:focus {
  background-color: var(--ui-surface-hover);
  color: var(--ui-text);
}

html.theme-dark .list-group-item {
  background-color: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

html.theme-dark .text-muted {
  color: var(--ui-text-muted) !important;
}

html.theme-dark .text-dark {
  color: var(--ui-text) !important;
}

html.theme-dark .bg-white {
  background-color: var(--ui-surface) !important;
}

html.theme-dark .bg-light {
  background-color: var(--ui-bg-subtle) !important;
}

html.theme-dark .border,
html.theme-dark .border-top,
html.theme-dark .border-bottom,
html.theme-dark .border-left,
html.theme-dark .border-right {
  border-color: var(--ui-border) !important;
}

html.theme-dark a:not(.btn) {
  color: var(--ui-link);
}

html.theme-dark .btn-primary {
  background-color: var(--ui-accent);
  border-color: var(--ui-accent);
}

html.theme-dark .btn-outline-primary {
  color: var(--ui-accent);
  border-color: var(--ui-accent);
}

html.theme-dark .btn-outline-primary:hover {
  background-color: var(--ui-accent);
  color: var(--ui-text-inverse);
}

html.theme-dark .btn-light,
html.theme-dark .btn-secondary {
  background-color: var(--ui-surface-elevated);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

html.theme-dark .close,
html.theme-dark .modal-header .close {
  color: var(--ui-text);
  text-shadow: none;
  opacity: 0.8;
}

html.theme-dark .nav-tabs .nav-link {
  color: var(--ui-text-muted);
}

html.theme-dark .nav-tabs .nav-link.active {
  background-color: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

html.theme-dark .pagination .page-link {
  background-color: var(--ui-surface);
  color: var(--ui-link);
  border-color: var(--ui-border);
}

html.theme-dark .pagination .page-item.active .page-link {
  background-color: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-text-inverse);
}

html.theme-dark .pagination .page-item.disabled .page-link {
  background-color: var(--ui-disabled-bg);
  color: var(--ui-disabled-text);
}