/*https://stackoverflow.com/a/68192174*/


/* SEA THEME https://live.standards.site/seaglobal/page-4 */
:root {
    --sea-light: #f7faf5;
    --sea-dark: #031314;
    --sea-cyan-1: #305e5c;
    --sea-cyan-2: #468480;
    --sea-cyan-3: #5ca9a4;
    --sea-cyan-4: #73cec8;
    --sea-cyan-5: #8af5ed;
    --sea-orange: #fb6139;


    --bs-body-color: var(--sea-dark);
    --bs-link-color: var(--sea-cyan-1);
    --bs-link-hover-color: var(--sea-cyan-2);
}

/*Formatting of elements*/

.row {
    --bs-gutter-x: 0px;
}

.rc-slider-track {
    background-color: var(--sea-orange);
}

.rc-slider-handle {
    border-color: var(--sea-orange);
}

.rc-slider-dot {
    border-color: #999;
    background-color: #fff;
}

.rc-slider-dot-active {
    border-color: var(--sea-orange);
}

.rc-slider-rail {
    background-color: #999;
}

.rc-slider-mark-text {
    color: #777;
}

.rc-slider-mark-text-active {
    color: #222;
}


.dash-debug-menu {
    background-color: var(--sea-orange)!important;
}

body {
    background-color: #031314;
    background-image: url('https://sea-public.s3.ap-southeast-2.amazonaws.com/sea-background/Device_02_Dark.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Custom options to use where needed */

.text-light {
    color: var(--sea-light);
}

.widget-label {
    margin-top: 1rem;
    margin-bottom: 0rem;
}

/* Sidebar */
.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16rem;
    padding-top: 80px;
    padding-left: 2rem;
    padding-right: 1rem;
    /*background-color: #305e5c;*/
    background-color: rgba(3, 19, 20, 0.05);
    color: var(--sea-light);
    -webkit-backdrop-filter: blur(5px); /* for Safari */
    backdrop-filter: blur(5px);    /* blurring the elements behind the div */
}

.app-sidebar-icon {
    width: 25px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.sea-navbar-container {
    margin-left: 2rem;
    margin-right: 2rem;
}

.page-container-div {
        margin-left: 16rem;
        margin-right: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 56px;
        }

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 767.98px) {
  .app-sidebar {
    width: 80px;
      padding-left:8px;
      padding-right:8px;
  }
}

@media (max-width: 767.98px) {
  .page-container-div {
    margin-left: 80px;
      padding-left:0px;
      padding-right: 0px;
  }
}

.nav-pills div {
    padding-top: 5px;
    padding-bottom: 5px;
}

.nav-link {
    margin-bottom: 5px;
    margin-top: 5px;
}

.nav-link i {
    color: var(--sea-light);
}

.nav-pills {
    --bs-nav-link-color: #accbc8;
    --bs-nav-pills-link-active-color: var(--sea-light);
    --bs-nav-pills-link-active-bg: var(--sea-cyan-3);
    --bs-link-hover-color: var(--sea-light);
}

.nav-link:focus, .nav-link:hover {
    background-color: #305e5c;
}

/*Card Formatting*/

.card {
    background-color: rgba(247, 250, 245, 0.9);
    border-color: var(--sea-light);
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(5px); /* for Safari */
    backdrop-filter: blur(5px);    /* blurring the elements behind the div */
    width:100%;
}

.card a {
    text-decoration: unset; /* remove underline */
}


/* Plot options and spinners */

.main-svg {
    border-radius: 5px;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
}

.dash-spinner {
  background-image: url("https://sea-public.s3.ap-southeast-2.amazonaws.com/wedge-loader-2.gif");
  background-size: contain;
  background-repeat: no-repeat;
}

.dash-spinner * {
  display: none !important;
}

.dash-spinner {
    width: 100px !important;
    height: 100px !important;
}