theme.css

@tailwind base;
@tailwind components;
@tailwind utilities;


/* Light theme */
:root {
  --background-start-rgb: rgb(214, 219, 220);
  --background-end-rgb: rgb(255, 255, 255);
  --color-text: #000;
  --color-background: #FFF;
  --color-row-even: #dadfeb;
  --color-row-odd: #c3d0eb;
  --color-row-hover: #e5eaf3;
  --color-button: #e0e2e8;
  --color-button-text: #000;
  --color-button-hover: #cfd3dd;
  --color-switch-button: rgb(200, 200, 200);
  --color-switch-off: rgb(100, 100, 100);
  --color-switch-on: rgb(20, 20, 20);
  --color-blocked: rgba(255, 255, 255, 0.7);
  --color-operation-account-management: #b010bf;
  --color-operation-witness-management: #008080;
  --color-operation-witness-voting: #008050;
  --color-operation-posting: #ffbe0b;
  --color-operation-curation: #fb5607;
  --color-operation-transfer: #8338ec;
  --color-operation-market: #FF69B4;
  --color-operation-vesting: #780028;
  --color-operation-proposal: #78c814;
  --color-operation-custom: #80003e;
  --color-operation-other: #3a86ff;
  --color-link: #1e4f9c;
  --color-operation-perspective-incoming: #ecf2ff;

  --color-yellow: #d2c518;
  --color-light-blue: #2ba7b0;
  --color-dark-blue: #160855;
  --color-blue: #0041F3;
  --color-turquoise: #00D9FF;
  --color-red: #991b1b;
  --color-orange: #FFAC33;
  --color-light-green: #15a017;
  --color-light-gray: #ADA9A9DC;
  --color-dark-gray: #292F3D;
}

/* Dark theme */
.dark {
  --background-start-rgb: rgb(40, 40, 40);
  --background-end-rgb: rgb(60, 60, 60);
  --color-text: #FFF;
  --color-background: #292F3D;
  --color-row-even: #48526b;
  --color-row-odd: #333b4c;
  --color-row-hover: #5c6a89;
  --color-button: #5c6a89;
  --color-button-text: #FFF;
  --color-button-hover: #48526b;
  --color-switch-button: rgb(200, 200, 200);
  --color-switch-off: rgb(100, 100, 100);
  --color-switch-on: rgb(20, 20, 20);
  --color-blocked: rgba(255, 255, 255, 0.7);
  --color-operation-account-management: #b010bf;
  --color-operation-witness-management: #008080;
  --color-operation-witness-voting: #008050;
  --color-operation-posting: #ffbe0b;
  --color-operation-curation: #fb5607;
  --color-operation-transfer: #8338ec;
  --color-operation-market: #FF69B4;
  --color-operation-vesting: #780028;
  --color-operation-proposal: #78c814;
  --color-operation-custom: #80003e;
  --color-operation-other: #3a86ff;
  --color-link: #00D9FF;
  --color-operation-perspective-incoming: #48526b;

  --color-yellow: #FFF351;
  --color-light-blue: #6AF5FF;
  --color-dark-blue: #160855;
  --color-blue: #0041F3;
  --color-turquoise: #00D9FF;
  --color-red: #FF0000;
  --color-orange: #FFAC33;
  --color-light-green: #64FFAA;
  --color-light-gray: #ADA9A9DC;
  --color-dark-gray: #444c5e;
}

* {
  color: var(--color-text);
}

body {
  background-color: var(--background-start-rgb)
}


pre {
  white-space: pre-wrap;
  /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
}

.rdp-dropdown{
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important; 
}
.rdp-dropdown option {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important; 
}
/*AutoCompleteInput Styles*/
.scrollbar-autocomplete {
  max-height: 18rem; 
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-bg) var(--scrollbar-thumb);
}

.scrollbar-autocomplete::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-autocomplete::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}

.scrollbar-autocomplete::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
  border: 3px solid var(--scrollbar-bg);
}

.overflow-hidden {
  overflow: hidden;
}

.autocomplete-result-container {
  display: flex;
  flex-direction: column;
  background-color: var(--theme-bg);
  box-shadow: var(--theme-shadow);
  border-radius: 0.5rem;
  margin-top: 0.25rem;
  max-height: 24rem;
  overflow-y: auto;
}

.autocomplete-result-item {
  padding: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: left;
  text-align: left;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease;
}

.autocomplete-result-item:hover {
  background-color: var(--explorer-light-gray);
}

.autocomplete-result-item {
  border-top: 1px solid var(--gray-200);
  text-align: left;

}

.autocomplete-result-link {
  color: var(--color-link);
  text-decoration: none;
}

.autocomplete-result-label {
  color: var(--explorer-dark-gray);
}

.autocomplete-result-highlight {
  color: var(--explorer-turquoise);
}
/*End AutoCompleteInput Styles*/