.react-grid-item {
  border-radius: 16px;
/*box-shadow: 0px 0px 6px 1px rgba(160, 160, 160, 0.8);*/
box-shadow: 0px 0px 6px 1px rgba(80, 80, 80, 0.8);
}


.item-top {
  height: 14px;
  line-height: 5px;
  padding-top:-5px;
  display: flex;
  cursor: grab;
  transition: background 200ms;
}
.item-top:hover{
  background-color: rgb(241, 241, 247);
}
.item-top:active{
  background-color: rgb(220, 220, 228);
  cursor: grabbing;
}
.item-top-content{
  display: none;
}
.item-top:hover .item-top-content{
  display: block;
  margin: auto;
  margin-top: -2px;
}
.item-top:active .item-top-content{
  display: block;
  margin: auto;
  margin-top: -2px;
}


.my-bold-header {
    font-weight: bold !important;
}

/* If you want the title and body separately */
.large-toast-container .bp5-toast-message,
.large-toast-container .bp5-toast-body {
  font-size: 1.2rem !important;

}

.bp5-toast-container {
    z-index: 1000;
}


/*html, body, #react-entry-point, .dash-app {*/
/*  height: 100%;*/
/*  margin: 0;*/
/*}*/

 /*make the top-level plotly wrapper fill its parent*/
/*.js-plotly-plot .plotly {*/
/*  width: 100% !important;*/
/*  height: 100% !important;*/
/*}*/

/* force the inner svg‐container to also stretch */
.js-plotly-plot .plotly .svg-container {
  width: 100% !important;
  height: 100% !important;
  /*min-height: 500px;*/
  /*overflow: auto;*/
}

/* and just to be safe, override the <svg> itself too */
/*.js-plotly-plot .plotly svg {*/
/*  width: 100% !important;*/
/*  height: 100% !important;*/
/*}*/


/*.item-top-content {*/
/*    position: absolute;*/
/*    top: 10px;  !* adjust as needed *!*/
/*    right: 10px; !* adjust as needed *!*/
/*    background: #007bff;*/
/*    color: white;*/
/*    padding: 4px 8px;*/
/*    border-radius: 4px;*/
/*    box-shadow: 0 2px 4px rgba(0,0,0,0.2);*/
/*    height: 30px;*/
/*}*/
body {
  color: inherit !important;
}


:where([data-mantine-color-scheme='dark']) .hljs {
    color: var(--mantine-color-dark-1);
    background: var(--mantine-color-dark-8);
}


:where([data-mantine-color-scheme='light']) .hljs {
    color: var(--mantine-color-gray-7);
    background: var(--mantine-color-gray-0);
}

:where([data-mantine-color-scheme='dark']) .bp5-heading {
    color: var(--mantine-color-dark-1);
}

:where([data-mantine-color-scheme='light']) .bp5-heading {
    color: var(--mantine-color-gray-7);
}

:where([data-mantine-color-scheme='dark']) .react-grid-layout {
  background-color: var(--mantine-color-dark-8);
  border-radius: 16px;
  /*margin-top: 4px;*/
}

:where([data-mantine-color-scheme='light']) .react-grid-layout {
  background-color: var(--mantine-color-gray-0);
  border-radius: 16px;
  /*margin-top: 4px;*/
}


:where([data-mantine-color-scheme='dark']) .ag-theme-alpine {
  --ag-alpine-active-color: #2196f3 !important;
  --ag-selected-row-background-color: rgba(33, 150, 243, 0.3) !important;
  --ag-row-hover-color: rgba(33, 150, 243, 0.1) !important;
  --ag-column-hover-color: rgba(33, 150, 243, 0.1) !important;
  --ag-input-focus-border-color: rgba(33, 150, 243, 0.4) !important;
  --ag-range-selection-background-color: rgba(33, 150, 243, 0.2) !important;
  --ag-range-selection-background-color-2: rgba(33, 150, 243, 0.36) !important;
  --ag-range-selection-background-color-3: rgba(33, 150, 243, 0.49) !important;
  --ag-range-selection-background-color-4: rgba(33, 150, 243, 0.59) !important;
  --ag-background-color: #181d1f !important;
  --ag-foreground-color: #fff !important;
  --ag-border-color: #68686e !important;
  --ag-secondary-border-color: rgba(88, 86, 82, 0.5) !important;
  --ag-modal-overlay-background-color: rgba(24, 29, 31, 0.66) !important;
  --ag-header-background-color: #222628 !important;
  --ag-tooltip-background-color: #222628 !important;
  --ag-odd-row-background-color: #222628 !important;
  --ag-control-panel-background-color: #222628 !important;
  --ag-subheader-background-color: #000 !important;
  --ag-invalid-color: #e02525 !important;
}