/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);;
}

/* Header */
.main-header {
  display: none !important;
}

.content-wrapper {
  margin-top: 0 !important;
  min-height: 100vh !important;
}

/* Sidebar */
.main-sidebar li {
  list-style: none !important;
}

.sidebar-custom {
  border: none !important;
  margin-top: -10rem !important;
}

.layout-fixed .main-sidebar-custom .sidebar-custom {
  height: 100% !important;
}

.custom-control > p {
  margin-left: 1.75rem !important;
}

.nav-sidebar > .nav-item i:not(.right) {
  margin-right: 0.2rem !important;
  text-align: center !important;
  width: 1.6rem !important;
  margin-left: 0.05rem !important;
  font-size: .875rem !important;
}

#LeftSideBarContent-menu .nav-link.treeview-link.active {
  color: var(--primary) !important;
}

/* Navbar */
.tabbable > .nav-pills {
  padding: 0.5rem 0.5rem !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 3px !important;
  margin: 2px 7.5px 8px 7.5px !important;
  background: rgba(255, 255, 255, .05) !important;
  backdrop-filter: blur(0.25rem) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) !important;
}

.tabbable > .nav-pills > .nav-item > a {
  padding: 0.5rem 0.7rem !important;
}

.tabbable > .nav-pills > .nav-item + .nav-item {
  margin: 0 0.1rem !important;
}

.col-sm-2:has(> ul.flex-column.simple-card) {
  padding: 0 !important;
  margin-left: 15px !important;
  margin-right: 15px !important;
  flex: 0 0 calc((100% / 6) - 30px) !important;
}

.col-sm-2:has(> ul.flex-column.simple-card) ~ .col-sm-10 {
  margin-left: -7.5px;
  margin-right: -7.5px;
  padding: 0;
}

ul.nav.nav-pills.flex-column:not(.nav-sidebar) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 15px 10px !important;
  background: #fff !important;
  height: calc(100vh - 80px) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) !important;
}

.dark-mode ul.nav.nav-pills.flex-column:not(.nav-sidebar) {
  background: #343a40 !important;
}

ul.nav.nav-pills.flex-column:not(.nav-sidebar) > li.nav-item + li.nav-item:before {
  margin-bottom: 0.125rem !important;
  content: '' !important;
  height: 1px !important;
  width: calc(100% - 20px) !important;
  background: var(--primary) !important;
  position: absolute !important;
}

/* Box/Cards */
.card {
  margin-bottom: .5rem !important;
}

.card-header {
  padding: 0.5rem 0.75rem !important;
}

.card:has(> .simple-card) > .card-header {
  padding: 0 !important;
  display: none !important;
}

.card:has(> .simple-card) > .card-body {
  padding: .5rem !important;
}

.card-tools .dropdown-menu {
  padding: 0 !important;
}

.card-tools .dropdown-menu > a.shiny-download-link {
  width: 100% !important;
  color: var(--primary) !important;
}

.card-outline > .card-header > .card-tools i {
  color: var(--primary) !important;
}

div:has(> .simple-card):before {
  top: 0 !important;
  left: 0 !important;
  border-top: 0.1875rem solid #000 !important;
  border-left: 0.1875rem solid #000 !important;
}

div:has(> .simple-card):after {
  top: 0 !important;
  right: 0 !important;
  border-top: 0.1875rem solid #000 !important;
  border-right: 0.1875rem solid #000 !important;
}

.simple-card:before {
  bottom: 0 !important;
  left: 0 !important;
  border-bottom: 0.1875rem solid #000 !important;
  border-left: 0.1875rem solid #000 !important;
}

.simple-card:after {
  bottom: 0 !important;
  right: 0 !important;
  border-bottom: 0.1875rem solid #000 !important;
  border-right: 0.1875rem solid #000 !important;
}

div:has(> .simple-card):before, div:has(> .simple-card):after,
.simple-card:before, .simple-card:after {
  content: "" !important;
  position: absolute !important;
  height: 0.5rem !important;
  width: 0.5rem !important;
  border-color: var(--primary-light-10) !important;
  margin: -0.0625rem;
  z-index: 1;
}

ul.simple-card:before, ul.simple-card:after {
  top: calc(100vh - 80px - 0.5rem) !important;
}

/* Shiny Inputs */
label {
  margin-bottom: 0 !important;
}

#AppBodyContent-login-panel input {
  height: calc(1.75rem + 2px) !important;
}

.form-control textarea {
  margin-bottom: 0.75rem !important;
}

.form-group:has(.selectize-control) {
  margin-bottom: 0.125rem !important;
}

.dark-mode a:not(.btn):hover {
  color: var(--light) !important;
}

.btn-primary.focus, .btn-primary:focus {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0 rgba(var(--primary), .5);
}

.bootstrap-select .btn:not(:disabled):not(.disabled) {
    border: 1px solid var(--primary) !important;
}

.bootstrap-select .btn:not(:disabled):not(.disabled):before {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: var(--primary) !important;
  opacity: .25 !important;
  content: '' !important;
  position: absolute !important;
}

.dark-mode .bootstrap-select .btn:not(:disabled):not(.disabled):before {
  background: none !important;
}

.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single {
  background-color: var(--primary) !important;
}

.irs--shiny .irs-bar,
.irs--shiny .irs-line {
  top: 1.5rem !important;
  height: 0.25rem !important;
}

.irs--shiny .irs-bar {
  border-top: 1px solid var(--primary) !important;
  border-bottom: 1px solid var(--primary) !important;
  background: var(--primary) !important;
}

.irs--shiny .irs-handle {
  top: 1.125rem !important;
  width: .875rem !important;
  height: .875rem !important;
  border-radius: .875rem !important;
}

/* Shiny Elements */
.dark-mode .shiny-input-panel {
  background: #343a40 !important;
}

.carousel-control-prev-icon {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  background: var(--primary);
}

/* Shiny Widgets */
.sw-dropdown-content {
  margin-left: -262px !important;
}

/* Plotly */
.js-plotly-plot .plotly svg.main-svg {
  background: none !important;
}

.js-plotly-plot .plotly g.legend > rect.bg {
  fill: none !important;
}

.dark-mode .js-plotly-plot .plotly path {
  stroke: var(--light) !important;
}

.dark-mode .js-plotly-plot .plotly .plot path {
  stroke-opacity: 0 !important;
}

.dark-mode .js-plotly-plot .plotly text {
  fill: var(--light) !important;
}

.js-plotly-plot .plotly .modebar {
    top: -0rem !important;
    right: 0 !important;
}

.js-plotly-plot .plotly .modebar .modebar-group {
    padding: 0 !important;
}

.js-plotly-plot .plotly .modebar .modebar-group:has(.plotlyjsicon) {
    display: none !important;
}

.js-plotly-plot .plotly .modebar .modebar-btn {
    padding: .125rem !important;
    display: inline-flex !important;
}

.js-plotly-plot .plotly .modebar .modebar-btn > a > svg {
    height: .875rem !important;
}

.js-plotly-plot .plotly g.infolayer > g > text {
    font-size: calc(.875rem * 1.15) !important;
}

/* Template */
.inline-btns > .form-group {
  display: inline-block !important;
  vertical-align: top !important;
  width: calc(100% - (2.125rem * 4)) !important;
}

.inline-btns > *:not(.form-group) {
  margin-top: 1.4375rem !important;
  display: inline-block !important;
}

.report-btns > .form-group,
.report-btns .shiny-input-panel > .shiny-flow-layout > div > .form-group,
.report-btns .selectize-control {
  display: inline-block !important;
  vertical-align: top !important;
  width: 100% !important;
  margin-bottom: 0.25rem !important;
}

.glass {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(.25rem);
  -webkit-backdrop-filter: blur(.25rem);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

i.glass {
  border-radius: 15px;
  width: 55px;
  height: 55px;
  line-height: 55px;
  backdrop-filter: blur(25px);
  background: rgba(255, 255, 255, 0.03) !important;
}

i.glass::before {
  font-size: 32px;
  vertical-align: top;
}