:root {
  --tblr-font-sans-serif: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}

/* Logo container styling */
.logo-container {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1050;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

body[data-bs-theme=dark] .logo-container {
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.logo-container:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Hide navbar by default and show on logo hover */
#full-nav {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: all 0.3s ease;
}

#logo:hover ~ #full-nav,
#full-nav:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Ensure navbar stays visible when hovering over it */
#full-nav:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Page wrapper width transitions */
.page-wrapper {
  transition: margin-left 0.3s ease, width 0.3s ease;
  margin-left: 0 !important;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.page-header {
  margin-left: 82px !important;
}

/* Remove the page-wrapper adjustments - keep it at full width always */
/* Only adjust page wrapper when navbar is actually visible */
/* #logo:hover ~ #full-nav ~ .page-wrapper,
#full-nav:hover ~ .page-wrapper,
#full-nav:hover + .page-wrapper {
  margin-left: 240px !important;
  width: calc(100vw - 240px);
  max-width: calc(100vw - 240px);
} */

/* Override any default page layout margins */
.page {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Ensure navbar slides in as overlay */
#full-nav {
  position: fixed;
  left: -240px; /* Start off-screen */
  top: 0;
  height: 100vh;
  z-index: 1040;
  width: 240px;
  background: var(--tblr-bg-surface);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

#logo:hover ~ #full-nav,
#full-nav:hover {
  left: 0;
}

.monospace {
  font-family: monospace;
}

.hidden {
  display: none;
}

.hidden-force {
  display: none !important;
}

.no-ul:hover {
  text-decoration: none;
}

.navbar-brand-image {
  height: 23px !important;
}

body[data-bs-theme=dark] .navbar-brand-image-dark {
  display: none;
}

body[data-bs-theme=light] .navbar-brand-image-light {
  display: none;
}

.nav-item.active {
  --tblr-navbar-active-border-color: #563736;
}

.bb-0 {
  border-bottom: 0px;
}

.bt-0 {
  border-top: 0px;
}

.ml-1 {
  margin-left: 1rem;
}

.ml-2 {
  margin-left: 2rem;
}

.ml-2px {
  margin-left: 2px;
}

.mr-1 {
  margin-right: 1rem;
}

.mt-15px {
  margin-top: 15px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.ta-center {
  text-align: center;
}

.ta-italics {
  font-style: italic;
}

.ta-bold {
  font-weight: bold;
}

.ta-ws-pw {
  white-space: pre-wrap;
}

.block {
  display: block;
}

.green {
  color: #00b300;
}

.red {
  color: #ff0000;
}

.footer {
  padding: 1rem !important;
}

.link-secondary {
  cursor: pointer;
}

body[data-bs-theme=dark] .text-primary {
  color: #FFFFFF !important;
}

body[data-bs-theme=light] .text-primary {
  color: #000000 !important;
}

.pointer {
  cursor: pointer;
}

.input-group-flat:focus-within {
  box-shadow: none !important;
  outline: none !important;
}

.form-selectgroup-input:focus {
  outline: 0 !important;
  display: none;
  border: 0px;
}

.nav-tabs .nav-link {
  border-bottom: 1px solid #DBDFE4;
}

.nav-tabs .nav-link.active {
  border-bottom: 0px;
}

.copy-button {
  top: 16px;
  right: 20px;
  /* Add your desired styling (e.g., background color, padding) */
  color: white;
  padding: 3px;
  cursor: pointer;
}

.main-diagram-holder {
  background-image: radial-gradient(circle, #dcdcdc 1px, #f9f9fa 1px);
  background-size: 20px 20px;
  border: 1px solid #cccdcd;
}

[data-bs-theme=dark] .main-diagram-holder {
  background-image: radial-gradient(circle, #444444 1px, #192433 1px);
  background-size: 20px 20px;
  border: 1px solid #25384f;
}

.resource-diagram {
  height: 100vh;
  width: 100%;
}

@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg {
    overflow: unset !important;
  }
}

/* AG Grid */
.ag-root-wrapper {
  border-radius: 3px !important;
}

.ag-with-header .ag-root-wrapper {
  border: 0px !important;
  border-radius: 0px;
}

.ag-header-cell-label {
  /* text-transform: uppercase; */
  font-size: 11px;
}

.ag-theme-quartz-dark .ag-header-cell-label {
  /* text-transform: uppercase; */
  font-size: 11px;
}

.ag-theme-alpine .ag-filter {
  /* font-size: 14px; */
  background-color: #F8FAFC;
}

.ag-theme-alpine .ag-paging-panel {
  background-color: #F8FAFC !important;
  border-top: 0px !important;
}

/* JSON Content Cell Styles */
.json-cell-content {
  max-height: 300px !important;
  overflow-y: auto !important;
  line-height: 1.5 !important;
  width: 500px;
  margin: 6px;
}

.ag-theme-quartz-dark {
  --ag-header-background-color: #1B2432 !important;

  /* --ag-border-color: #ECEEF1 !important;
  --ag-row-border-color: #ECEEF1 !important;
  --ag-foreground-color: #3f123f !important;
  --ag-background-color: #ffffff !important;
  --ag-header-foreground-color: #616876 !important;
  --ag-secondary-foreground-color: #616876 !important;
  
  --ag-odd-row-background-color: #ffffff !important;
  --ag-header-column-resize-handle-color: #ECEEF1 !important;
  --ag-grid-size: 6px !important;
  --ag-list-item-height: 15px !important; */
}

.wut-table-mini {
  --ag-grid-size: 6px !important;
}

/* .ag-row {
  z-index: 1 !important;
}

.ag-cell-focus {
  overflow: visible !important;
} */

/* END AG GRID */

.ta-code {
  width: 100%;
  border: 0px;
  background-color: #1f2839;
  color: #ffffff;
  font-family: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
  padding: 1rem;
  border-radius: 4px;
  overflow: auto;
}

.ta-code::selection {
  background: #ffffff;
  color: #1f2839;
}

.nav-link-white a {
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
}

/* On hover on chat-item, make the background grey and change the cursor to a pointer */
body[data-bs-theme=light] .chat-item:hover {
  background-color: #f8f9fa;
  cursor: pointer;
}

body[data-bs-theme=dark] .chat-item:hover {
  background-color: #1e2939;
  cursor: pointer;
}

body[data-bs-theme=dark] .border-end {
  border-right-color: #222e40 !important;
}

body[data-bs-theme=dark] .response-card {
  background-color: #171f2b;
}

body[data-bs-theme=dark] #pre-request {
  background-color: #182433 !important;
}

body[data-bs-theme=light] #pre-request {
  background-color: #ffffff !important;
  color: black !important;
}

body[data-bs-theme=light] #pre-response {
  background-color: #f7f8fb !important;
  color: black !important;
}

body[data-bs-theme=light] #div-col-response {
  background-color: #f7f8fb !important;
  color: black !important;
}

body[data-bs-theme=dark] .form-hint {
  color: #8d939b !important;
}

body[data-bs-theme=dark] .btn-dark {
  --tblr-btn-bg: #233f62 !important;
}

.mhmf {
  height: calc(100vh - 140px) !important;
}

.mhmfa {
  height: calc(100vh - 200px) !important;
}

.ts-control {
  flex-wrap: nowrap !important;
}

.ts-wrapper {
  min-height: 0px !important;
  height: 36px !important;
}

.ts-dropdown {
  z-index: 10000000 !important;
}

.input-group>.ts-wrapper:first-of-type {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

/* TREE */

.tree {
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}


.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  padding-left: 0px;
}

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s
}

.tree li::after,
.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc
}

.tree li:only-child::after,
.tree li:only-child::before {
  display: none
}

.tree li:only-child {
  padding-top: 0
}

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none
}

.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0
}

.tree li:first-child::after {
  border-radius: 5px 0 0;
  -webkit-border-radius: 5px 0 0;
  -moz-border-radius: 5px 0 0
}

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px
}

.tree li a {
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 14px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s
}

.tree li a:hover,
.tree li a:hover+ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4
}

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul ul::before,
.tree li a:hover+ul::before {
  border-color: #94a0b4
}

.tree-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.tree-subtext {
  font-size: 10px;
  color: #8d939b;
}

.tree-selected {
  background-color: #c8e4f8 !important;
}

.tree-hover {
  background-color: #c8e4f8;
}

body[data-bs-theme=dark] .tree-hover {
  background-color: #3c699f;
}

body[data-bs-theme=dark] .tree-selected {
  background-color: #3c699f !important;
}

body[data-bs-theme=dark] .tree li a {
  color: #fff !important;
}

body[data-bs-theme=dark] .tree-subtext {
  color: #b9b9b9 !important;
}

body[data-bs-theme=dark] .tree li a:hover,
body[data-bs-theme=dark] .tree li a:hover+ul li a {
  background: #3c699f !important;
}

.org-detail-policy-link,
.policy-detail-target-link,
.treeobj,
.btn-link,
.card-link {
  cursor: pointer;
}

.policy-grid-cell-direct {
  background-color: #5bb053;
}

.policy-grid-cell-inherited {
  /* background-color: #83d07c; */
  background-color: #4ec743;
}

.policy-grid-cell-none {
  background-color: #c54640;
}

.hero-fade {
  width: 50%;
}

@media screen and (min-width: 800px) {
  .modal-dialog-right {
    margin-right: 0 !important;
    margin-top: 0 !important;
    height: 100%;
  }
}

.smaller {
  font-size: 0.8rem;
}

/* Fix for weird color in tom-select multi-select dropdown remove button in dark mode */
body[data-bs-theme=dark] .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid var(--tblr-dark-mode-border-color);
}

#div-request-content {
  overflow: scroll
}

.select-resource-dd {
  min-width: 400px;
  max-width: 400px;
  height: 41px !important;
}

.select-region-dd {
  min-width: 200px;
  height: 41px !important;
}

.select-account-dd {
  min-width: 185px;
  max-width: 185px;
  height: 41px !important;
}

.select-org-dd {
  min-width: 300px;
  height: 41px !important;
}

.select-policy-dd {
  min-width: 300px;
  height: 41px !important;
}

#table-dropdown-menu {
  min-width: 200px;
  /* Adjust this value as needed */
  width: max-content;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: auto;
}

.column-toggle-item {
  padding: 0.5rem 1.2rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.column-toggle-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.column-toggle-item .form-switch {
  padding-left: 2.5em;
  margin-bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
}

.column-toggle-item .form-check-input {
  margin-left: -2.5em;
  margin-right: 0.5em;
}

.column-toggle-item .form-check-label {
  flex-grow: 1;
  text-align: left;
}

#table-dropdown-menu h4 {
  padding: 0.5rem 1.2rem;
  margin-bottom: 0px;
}

#table-dropdown-menu hr {
  margin: 2px;
}

.modal-no-border-radius .modal-content {
  border-radius: 0px;
}

.vh100 {
  height: 100vh;
}