/* Global CSS variables */
:root {
  /* Pastel pallette bg */
  --priColor1: #111111;
  --priColor2: #333333;
  --priColor3: #555555;
  --priColor4: rgba(45, 45, 45, 0.9);

  /* Pastel pallette fg */
  --secColor: #C1FFD7;
  --terColor: #B5DEFF;
  --quaColor: #e2d9ff;

  /* Other colors */
  --greenColor: #44BB44;
  --orangeColor: #FFBB44;
  --redColor: #FF4444;
}

/* Default font size which Bootstrap picks up */
html {font-size: 14px;}

/* Fixed width columns */
.col-withdraw-date {width: 110px;}
.col-withdraw-amount {width: 80px;}
.col-holdings-title-image {width: 16px;}
.col-edit {width: 50px;}

/* Coin logo images */
.img-holdings-title-image {
  width: 16px;
  height: 16px;
}

.img-help-logo-image {
  width: 48px;
  height: 48px;
}

/* Loading spinner in footer */
#footerLoading {
  margin-left: auto;
  margin-right: auto;
  width: 20px;
  height: 20px;
  color: var(--secColor);
}

/* All tabs and pages wwe need to hide until logged in */
#portfolioTab,
#holdingsTab,
#holdingsData,
#holdingsEdit,
#portfolioData,
#capitalEdit,
#interestEdit,
#withdrawalEdit,
#registerForm,
#accountEdit,
#resetPasswordForm,
#footerLoading,
#footerAll {
  display: none;
}

/* Classes to change text colors */
.green-col {color: var(--greenColor) !important;}
.orange-col {color: var(--orangeColor) !important;}
.red-col {color: var(--redColor) !important;}

/* Standard dark mode for major elements */
html,
body,
.card,
.card-body,
.nav-tabs .nav-item,
.nav-tabs .nav-item .nav-link.active {
  background-color: var(--priColor1);
  color: var(--quaColor);
}

/* Tab items */
.nav-tabs .nav-item {
  background-color: var(--priColor2);
  font-size: 15px;
}

/* All tab links */
.nav-tabs .nav-item .nav-link {
  color: var(--secColor);
  padding-left: 7px;
  padding-right: 7px;
}

/* Active tab links */
.nav-tabs .nav-item .nav-link.active {
  color: var(--secColor);
  font-weight: bold;
}

/* All <a> links in all states */
a:link, a:hover, a:active, a:visited {
  color: var(--secColor) !important;
}

/* Fixed footer */
.footer {
  background-color: var(--priColor4);
  color: var(--terColor);
}

/* Header colors */
h5, h4, h3 {
  color: var(--terColor);
}

/* Input focus glowing border color */
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 1px var(--terColor) !important;
}

/* Input caret color */
.form-control,
.form-select {
  caret-color: var(--terColor) !important;
}

/* Form fields */
input,
select,
.card {
  background-color: var(--priColor2) !important;
  border: 1px solid var(--priColor3) !important;
  color: var(--quaColor) !important;
}

/* Need a custom 'lightgrey' caret as default SVG is dark grey and looks invisible in dark mode */
select {
  background: var(--priColor2) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='lightgrey' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px !important;
}

/* Override border for buttons */
.btn {
  border-width: 1px !important;
  border-color: var(--secColor) !important;
}