/* html margin-left */
.margin-5px{
  margin-left: 5px;
  margin-top: 5px;
}

/* restyle radio items */
.radio-group .form-check {
    padding-left: 0;
    margin-top: 3px;
    margin-left: 5px;
  }
  
  .radio-group .btn-group > .form-check:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .radio-group .btn-group > .form-check:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
  }

.dropdown-container {
    display: grid;
    /*width: 55%;*/
    margin-bottom: 5px;
}

.button-justify-start {
  justify-self: start;
}

.map-graph {
  float: none;
  /*overflow: scroll;*/
  /*border: thin grey dashed;*/
}

.button-margin {
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 3px;
  margin-right: 3px;
}

.button-group {
  margin-left: 10px;
}


/* fix width of hidden input element to prevent overflow in x direction (scrollbar) */
#upload-sunray-file input {
  width: 100%;
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/montserrat-v25-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* keep buttons in navbar to the right */
.navbar-collapse {
  flex-grow: 0;
}

/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/montserrat-v25-latin-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/montserrat-v25-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* visible background during wait spinner */
.loader-wrapper > div {
  visibility: visible !important;
}

/************************* Start of Responsive App Page *************************/
/* 
      These changes are primarily focused on 
      adjusting the styling of components that
      are added automatically by dash or to make
      global changes to make it feel more "app-like" 
*/

/* Make sure html doesn't overflow our viewport */
html {
  height: 100vh;
  height: 100dvh;   /* better viewport sizing for mobile devices */
  width: 100vw;
  width: 100dvw;    /* better viewport sizing for mobile devices */
  margin: 0;
  overflow: auto;
}

/* Dash adds tons of classless divs that we need to expand to the available space */
body{
  height:100%;
  overflow: hidden;
}
#react-entry-point > div:first-of-type > div:first-of-type{
    overflow: hidden;
    flex-grow: 1;
}
#_pages_content{
    height: 100%;
}

/* Make sure we can still scroll when needed for pages like the Settings accordians */
#_dash-app-content, 
#_dash-app-content > div:not([class]),
#_pages_content,
#_pages_content > div {
  overflow: auto;
}

/* Set the root of our app to be contained within the viewport */
#react-entry-point > div:first-of-type,
#_dash-app-content > div:first-of-type {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Hide empty page div */
#_pages_dummy {
  display: none;
}

/* Hide scrollbars */
html::-webkit-scrollbar {
  display: none;
}

html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Adjust heights of map divs to allow them to be responsive to available space */
.map-graph, .dash-graph {
  height: 100%;
}

.dash-graph > div:not([class]){
  height: unset;
}

.dash-graph > div:first-of-type {
  display: none;
}
/************************* End of Responsive App Page *************************/


/************************* Start of Card Group Customizations ******************/

/* Styling to use the CardGroup styling in a single row at smaller screen sizes */
@media (max-width: 584px){
  .card-group .card:not(:last-of-type){
    margin-right: 0 !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group .card:not(:first-of-type){
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}

/* Helper classes to trucate text */
.truncate-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.stateCardHeader
{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.stateCardBody
{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/************************* End of Card Group Customizations ********************/


/************************* Start of Map Controls Size Adjustment ****************/
.modebar {
  width: 100%;
  justify-content: center;
  display: flex;
  top: -4px;
}

.js-plotly-plot .plotly .modebar-group {
  padding-left: 0;
  max-height: 36px;
}

.js-plotly-plot .plotly .modebar-btn {
  font-size: 24px !important;
  line-height: 24px !important;
  height: unset !important;
  padding: 3px 8px !important;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-items: center;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 374px){
  .js-plotly-plot .plotly .modebar-btn {
      font-size: 18px !important;
      line-height: 18px !important;
      padding: 3px 4px !important;
  }
}

@media (max-width: 310px){
  .js-plotly-plot .plotly .modebar-btn {
      font-size: 16px !important;
      line-height: 16px !important;
  }
}
/************************* End of Map Controls Size Adjustment ******************/

#_pages_content {
    padding-bottom: env(safe-area-inset-bottom); 
}

/* Log Table*/
.log_table
{
    font-size: 0.8rem;
    text-align: left;
}

.log_table tbody td:nth-child(2){
    overflow-wrap: anywhere;
}

/* Progress bar */
.progress-bar-visible
{
    opacity: 0.9;
    transition-duration: 0.5s;
    transition-property: opacity;
}

.progress-bar-hidden
{
    opacity: 0.0;
    transition-duration: 1s;
    transition-property: opacity;
}

/* Progress bar container */
.progress-bar-container-visible
{
    backdrop-filter: blur(2px);
    transition-duration: 0.5s;
    transition-property: backdrop-filter
}

.progress-bar-container-hidden
{
    backdrop-filter: blur(0px);
    transition-duration: 1s;
    transition-property: backdrop-filter
}

/* Modebar and plot styling */
.modebar
{
    top: 0.3rem !important;
    right: 0px !important;
}
.modebar-group
{
    backdrop-filter: blur(2px);
    top: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}
.modebar-btn svg
{
    top: 0px !important;
}
.plotly [data-title]::before
{
    display: none !important;
}
.plotly [data-title]::after
{
    display: none !important;
}
.plotly-notifier
{
    display: none !important;
}
/* .main-svg
{
    -webkit-mask: linear-gradient(to top,  transparent 0%, #ffff 0.3rem calc(100% - 0.3rem), transparent 100%);
}
.svg-container:first-child:before
{
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    backdrop-filter: blur(2px);
    pointer-events: none;

    -webkit-mask: linear-gradient(to top,  #ffff 0%, transparent 0.3rem calc(100% - 0.3rem), #ffff 100%);
} */
.infolayer
{
    transform: translateY(2.25rem);
}
.annotation:last-child
{
    transform: translateY(-2.5rem);
}
.navbar-toggler:focus
{
    box-shadow: none !important;
}
.navbar-toggler:active
{
    text-decoration: none !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.1rem !important;
}

/* Schedule */
.schedule-day{}
.schedule-day:nth-child(even){
    background-color: rgba(0, 0, 0, 0.041);
}

/* Zoom */
#_pages_content
{
    pointer-events: all;
}

/* Chart rows */
.chart-row
{
    margin-right: 0;
    margin-left: 0;
}

.chart-item
{
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    margin-top: 1rem;
    padding-bottom: 0.5rem;
    background-color: rgba(255, 255, 255, 0.02);
}

.chart-label
{
    text-align: center;
    margin-bottom: 0;
    margin-top: 0.2rem;
    width:100%;
    font-size: 0.95rem;
}

.chart-slider
{
    padding-bottom: 0.1rem !important;
}

.chart-item-separator
{
    position: relative;
}
.chart-item-separator::before
{
    content: "";
    display: block;
    position: absolute;
    top: calc(0.25rem + 15%);
    right: 0rem;
    z-index: 2;
    width: 100%;
    height: 70%;
    border-right: 1px solid #0000001e;
}

.DayPickerKeyboardShortcuts_show
{
    display: none;
}

.chart-item .list-group-item
{
    background-color: transparent;
    border: 1px solid rgba(150, 150, 150, 0.2);
    border-right: 0;
    border-left: 0;
    border-top: 0;
}
.chart-item .list-group
{
    position: relative;
}
.chart-item .list-group::before
{
    content: "";
    display: block;
    width: 7.5rem;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-top: 1px solid rgba(150, 150, 150, 0.2);
    border-top-left-radius: 0.4rem;
}

.chart-item .list-group-item p
{
    opacity: 0.65;
}
.chart-item .list-group-item small
{
    opacity: 0.9;
}

.chart-item .list-group-item:not(:last-child)::before
{
    content: "";
    display: block;
    width: 100%;
    height: 70%;
    position: absolute;
    left: 0;
    top: 15%;
    border-right: 1px solid rgba(150, 150, 150, 0.2);
}

.chart-item .list-group-item:last-child
{
    /* background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) calc(100% - 0.4rem), rgba(14, 197, 233, 0.226) 100%); */
}

.chart-stats
{
    overflow-y: scroll;
    overflow-x: hidden;
}
.chart-stats::-webkit-scrollbar
{
    width: 1rem;
    margin-right: 0.1rem;
}
.chart-stats::-webkit-scrollbar-track
{
    background: transparent;
}
.chart-stats::-webkit-scrollbar-thumb {
  background: rgb(132 132 132 / 19%);
  border-radius: 1rem;
  border: 0.3rem solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}
.chart-stats::-webkit-scrollbar-thumb:hover {
  background: rgb(122 122 122 / 37%);
  border: 0.3rem solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}

/* Dark */
.main-svg
{
    background: transparent !important;
}

.form-switch
{
    height: 100%;
    padding: 0;
}
.form-switch > .form-check-input
{
    height: 1.5rem;
    max-height: 100%;
    width: unset;
    aspect-ratio: 2 / 1;
    margin: 0;
    cursor: pointer;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.Select-control
{
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-border-color);
}
.Select.is-disabled > .Select-control 
{
    background-color: #83838369;
    cursor: not-allowed;
}
.Select-menu-outer {
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    color: var(--bs-body-color);
}
.Select.is-focused > .Select-control 
{
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.Select-value-label
{
    color: var(--bs-body-color) !important;
}

.x2tick > text,
.y2tick > text,
.xtick > text,
.ytick > text
{
    fill: var(--bs-body-color) !important;
}

.modebar-group
{
    background-color: transparent !important;
}
.modebar-btn .icon path
{
    fill: var(--bs-body-color) !important;
    opacity: 0.3;
}
.modebar-btn.active .icon path
{
    fill: var(--bs-body-color) !important;
    opacity: 0.8;
}
.modebar-btn:not(.active):hover .icon path
{
    fill: var(--bs-body-color) !important;
    opacity: 0.5;
}

.annotation-text-g > .cursor-pointer > text
{
    fill: var(--bs-body-color) !important;
}

.rc-slider-rail
{
    background-color: rgba(129, 129, 129, 0.349);
}
.rc-slider-disabled
{
    background-color: rgba(189, 189, 189, 0.233);
}

[data-bs-theme=light]
{
    --bs-primary-hover:#66a593;
    --bs-primary-active:#5e9787;

    --bs-success-hover: #49ad85;
    --bs-success-active: #45a37e;

    --bs-danger-hover: #d96645;
    --bs-danger-active: #cc6041;

    --bs-info-hover: #6cc3d5;
    --bs-info-active: #569caa;
}

[data-bs-theme=dark]
{
    --bs-body-bg:#272727;
    --bs-body-bg-rgb:39,39,39;

    --bs-body-color: rgb(212, 212, 212);
    --bs-body-color-rgb:212,212,212;

    --bs-light: rgb(50, 50, 50);
    --bs-light-rgb: 50, 50, 50;

    --bs-primary:rgb(94, 160, 141);
    --bs-primary-rgb:94,160,141;
    --bs-primary-hover:rgb(82, 139, 123);
    --bs-primary-active:rgb(73, 124, 110);

    --bs-success: rgb(72, 171, 132);
    --bs-success-rgb: 72, 171, 132;
    --bs-success-hover: rgb(63, 150, 115);
    --bs-success-active: rgb(56, 133, 102);

    --bs-danger: rgb(209, 96, 61);
    --bs-danger-rgb: 209, 96, 61;
    --bs-danger-hover: rgb(187, 86, 55);
    --bs-danger-active: rgb(165, 76, 49);

    --bs-warning: rgb(212, 168, 73);
    --bs-warning-rgb: 212, 168, 73;

    --bs-info: rgb(96, 176, 192);
    --bs-info-rgb: 96, 176, 192;
    --bs-info-hover: rgb(86, 157, 172);
    --bs-info-active: rgb(77, 142, 155);
}

.btn
{
    --bs-btn-disabled-opacity: 0.5
}
.btn-primary
{
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-danger {

    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger-hover);
    --bs-btn-hover-border-color: var(--bs-danger-hover);
    --bs-btn-active-bg: var(--bs-danger-active);
    --bs-btn-active-border-color: var(--bs-danger-active);
    --bs-btn-disabled-bg: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
}
.btn-success {

    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success-hover);
    --bs-btn-hover-border-color: var(--bs-success-hover);
    --bs-btn-active-bg: var(--bs-success-active);
    --bs-btn-active-border-color: var(--bs-success-active);
    --bs-btn-disabled-bg: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
}
.btn-info {

    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: var(--bs-info-hover);
    --bs-btn-hover-border-color: var(--bs-info-hover);
    --bs-btn-active-bg: var(--bs-info-active);
    --bs-btn-active-border-color: var(--bs-info-active);
    --bs-btn-disabled-bg: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}