@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");

/* General settings */

:root {
    --yellow: #ffecb3;
    --background: #fefefe;
}

* {
    font-family: "Rubik", sans-serif;
}

html {
    font-size: 13px;
}

@media (min-width: 360px) {
    html {
        font-size: 15px;
    }
}

body {
    margin-top: 5.5rem;
    background-color: var(--background);
    scroll-behavior: smooth;
}

.text-justify {
    text-align: justify;
}

::selection {
    background-color: var(--yellow);
    color: #5b523c;
  }


/* General UI */

.grey-container {
    background-color: #EFF0F3 !important;
    border-radius: 0.9rem;
}

.non-interactive-overlay { /* overlay the whole page so interactions such as click on the page take no effects (primarly used in combination with blurring) */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 900;
}

.blurred {
    filter: blur(3px);
}

.blur-wrapper {
    filter: blur(3px);
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.blur-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.alert-style {
    margin-top: -1rem;
}

/* Login page */

body#login_page {
    --r: 1.53rem; /* control the size */
    --c1: #ECFFB3 /*color 1*/ 99%,#0000 101%;
    --c2: #FFC6B3 /*color 2*/ 99%,#0000 101%;
    
    --s:calc(var(--r)*.866);  /* .866 = cos(30deg) */
    --g0:radial-gradient(var(--r),var(--c1));
    --g1:radial-gradient(var(--r),var(--c2));
    --f:radial-gradient(var(--r) at calc(100% + var(--s)) 50%,var(--c1));
    --p:radial-gradient(var(--r) at 100% 50%,var(--c2));
    background:
        var(--f) 0 calc(-5*var(--r)/2),
        var(--f) calc(-2*var(--s)) calc(var(--r)/2),
        var(--p) 0 calc(-2*var(--r)),
        var(--g0) var(--s) calc(-5*var(--r)/2),
        var(--g1) var(--s) calc( 5*var(--r)/2),
        radial-gradient(var(--r) at 100% 100%,var(--c1)) 0 calc(-1*var(--r)),   
        radial-gradient(var(--r) at 0%   50% ,var(--c1)) 0 calc(-4*var(--r)),
        var(--g1) calc(-1*var(--s)) calc(-7*var(--r)/2),
        var(--g0) calc(-1*var(--s)) calc(-5*var(--r)/2),
        var(--p) calc(-2*var(--s)) var(--r),
        var(--g0) calc(-1*var(--s)) calc(var(--r)/ 2),
        var(--g1) calc(-1*var(--s)) calc(var(--r)/-2),
        var(--g0) 0 calc(-1*var(--r)),
        var(--g1) var(--s) calc(var(--r)/-2),
        var(--g0) var(--s) calc(var(--r)/ 2) 
        #FFC6B3; /* color 2 again here */
    background-size: calc(4*var(--s)) calc(6*var(--r));
}

.login-box {
    position: absolute;
    padding: 1.5rem;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    background-color: var(--yellow);
    box-shadow: 0rem 0.4rem 1.15rem rgba(0, 0, 0, 0.35);
    border-radius: .5rem;
}

@media (max-height: 500px) {
    .login-box {
        margin-top: 3rem;
    }
}

@media (max-height: 400px) {
    .login-box {
        margin-top: 6rem;
    }
}

@media (min-width: 475px) { 
    body#login_page {
        --r: 2.3rem;
    }

    .login-box {
        border-radius: 1rem;
        width: 27rem;
    }
}

@media (min-width: 576px) { 
    body#login_page {
        --r: 3.07rem;
    }

    .login-box {
        top: 50%;
        width: 30rem;
    }
}

.login-logo {
    width: 10rem;
}

.login-box-btn {
    padding: .9rem 1.2rem .9rem 3rem;
    margin: 2.5rem 0 .3rem 0;
    border: none;
    border-radius: 0.4rem;
    box-shadow: 0 -.1rem 0 rgba(0, 0, 0, .04), 0 .1rem .1rem rgba(0, 0, 0, .25);
    font-size: 1.1rem;
    width: 100%;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: #fff !important;
    background-repeat: no-repeat;
    background-position: 1rem 1.1rem;
}

.login-box .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: bottom;
    margin-right: .5rem;
    cursor: pointer;
}

.login-box-btn:hover,
.login-box-btn:active,
.login-box-btn:target {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 .2rem .4rem rgba(0, 0, 0, .25);
}

.login-box-btn:disabled {
    filter: grayscale(100%);
    background-color: #ebebeb;
    box-shadow: 0 -.1rem 0 rgba(0, 0, 0, .04), 0 .1rem .1rem rgba(0, 0, 0, .25);
    cursor: not-allowed;
}

/* New Record Page */

.new-record-card-heading {
    margin-bottom: 2.3rem;
  }
  
  @media (min-width: 768px) {
    .new-record-card-heading {
      margin-bottom: 3.2rem;
    }
  }

/* Terms and Conditions Page */

body#terms_page h2, body#terms_page h3 {
    scroll-margin-top: 4rem;
}

body#terms_page {
    margin-top: 5rem;
}

body#terms_page h3 {
    margin: 1.3rem 0 .6rem;
}

body#terms_page h2 {
    margin-bottom: .7rem;
}

/* Main navigation */

.navbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 0;
    padding-left: .5rem;
    background-color: var(--yellow);
}

.navbar-logo {
    transition: opacity 0.5s ease;
}

.navbar h1 {
    display: block;
    margin: .5rem 0 0 .5rem;
}

.navbar .navbar-toggler {
    border: 0;
    padding: .3 .5 .3 .3rem;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 3px #ffecb3
}

.navbar .offcanvas {
    max-width: 14.4rem;
    background-color: var(--yellow);
}

.navbar .offcanvas .offcanvas-header {
    justify-content: center;
    padding-bottom: 0;
}

.navbar .nav-link {
    color: #000;
}

.navbar .nav-link-disabled {
    color: #999;
    pointer-events: none;
    cursor: default;
}

.nav-item-text {
    margin-left: 0.4rem;
}

/* Forms - Radio selects */

.form-container {
    margin-bottom: .8rem;
}

.form-header {
    margin: .5rem 0 1rem 0;
}

.radio-container .radio-option {
    padding: .3rem;
    border: none;
}

@media (min-width: 360px) {
    .radio-container .radio-option {
        min-width: 3.3rem;
    }
}

@media (min-width: 475px) { 
    .form-select {
        width: 21rem;
    }

    .radio-container .radio-option {
        width: 5rem;
    }
}

@media (min-width: 576px) { 
    .form-select {
        width: 26rem;
    }
}

@media (min-width: 768px) {
    .form-select {
        width: 38rem;
    }

    .form-container {
        margin-bottom: 1.3rem;
    }

    .form-header {
        margin: .8rem 0 1.5rem 0;
    }

    .radio-container .radio-option {
        width: 8rem;
    }
}

@media (min-width: 992px) {
    .form-select {
        width: 52rem;
    }

    .form-container {
        margin-bottom: 1.8rem;
    }

    .form-header {
        margin: .8rem 0 1.5rem 0;
    }

    .radio-container .radio-option {
        width: 10rem;
    }
}

.radio-container input[type="radio"] + label {
    transition: all 200ms;
  }

.radio-container input[type="radio"]:not(:checked) + label.red    { background-color: rgba(254, 138, 167, 0.2); }
.radio-container input[type="radio"]:not(:checked) + label.orange { background-color: rgba(251, 178, 198, 0.2); }
.radio-container input[type="radio"]:not(:checked) + label.yellow { background-color: rgba(250, 216, 117, 0.2); }
.radio-container input[type="radio"]:not(:checked) + label.green  { background-color: rgba(170, 215, 132, 0.2) }
.radio-container input[type="radio"]:not(:checked) + label.lime   { background-color: rgba(129, 182, 160, 0.2) }

.radio-container input[type="radio"]:checked + label.red    { background-color: rgba(254, 138, 167, 1); }
.radio-container input[type="radio"]:checked + label.orange { background-color: rgba(251, 178, 198, 1); }
.radio-container input[type="radio"]:checked + label.yellow { background-color: rgba(250, 216, 117, 1) }
.radio-container input[type="radio"]:checked + label.green  { background-color: rgba(170, 215, 132, 1) }
.radio-container input[type="radio"]:checked + label.lime   { background-color: rgba(129, 182, 160, 1) }

/* Forms - Sliders */

.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1rem;
    background: #ddd;
    outline: none;
    border-radius: 5rem;
    margin-bottom: .5rem;
}

.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.8rem;
    height: 1.8rem;
    background: var(--yellow);
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #343a40;
}

.custom-slider::-moz-range-thumb {
    width: 1.8rem;
    height: 1.8rem;
    background: var(--yellow);
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #343a40;
}

/* Forms - Activities multiselect */

.activity-activities-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between;
}
  
.activity-item {
    width: calc(50% - 0.46rem);
    height: calc(50% - 0.46rem);
    margin: 0.25rem;
}

.activity-container input[type="checkbox"] + label {
    padding: .5rem 0 .4rem 0;
}

@media (min-width: 360px) {
    .activity-item {
        width: calc(25% - 0.15rem);
        height: calc(25% - 0.15rem);
        margin: 1px;
    }

    .activity-name-text {
        font-size: .85rem;
    }
}

@media (min-width: 475px) { 
    .activity-item {
        width: calc(25% - 0.46rem);
        height: calc(25% - 0.46rem);
        margin: 0.23rem;
    }

    .activity-name-text {
        font-size: 1rem;
    }
}

@media (min-width: 576px) { 
    .activity-item {
        width: calc(25% - 0.76rem);
        height: calc(25% - 0.76rem);
        margin: 0.38rem;
    }

    .activity-container input[type="checkbox"] + label {
        padding: 1rem 0;
    }
}

@media (min-width: 720px) {
    .activity-item {
        width: calc(12.5% - 0.3rem);
        height: calc(12.5% - 0.3rem);
        margin: 0.15rem;
    }
}

.activity-container input[type="checkbox"] + label {
    width: 100%;
    border: 0;
}

.activity-container input[type="checkbox"]:checked + label {
    background-color: var(--yellow);
    border-radius: 0.7rem;
}

/* Forms - Submit */

.btn-submit-form {
    background-color: var(--yellow) !important;
    width: 100%;
    transition: background-color 100ms;
}

.btn-submit-form:hover {
    background-color: #fadb7d !important;
}

/* Dashboard */

body#dashboard_page h2 {
    margin-bottom: .8rem;
}

@media (min-width: 1200px) { 
    body#dashboard_page h2 {
        margin-bottom: 1.2rem;

    }
}

.hide-streak {
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    color: #5b523c;
}

.streak-style-level-1 {
    font-size: 1.1rem;
}

.streak-style-level-2 {
    font-size: 1.2rem;
}

.streak-style-level-3 {
    font-size: 1.3rem;
    color: #b87333;
}

.streak-style-level-4 {
    font-size: 1.4rem;
    color: #b0b0b0;
}

.streak-style-level-5 {
    font-size: 1.5rem;
    color: #e6c200;
}

.streak-style-level-6 {
    font-size: 1.6rem;
    color: #3cb371;
}

@keyframes bronzeShine {
    10%, 90% {
        background: none;
        -webkit-background-clip: text;
        -webkit-text-fill-color: inherit;
        text-shadow: none;
      }
      35%, 65% {
        background: linear-gradient(
          120deg,
          transparent 0%,
          #cd7f32 50%,
          transparent 100%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
        background-position: 200% 0;
      }
  }
  
.bronze-text {
position: relative;
animation: bronzeShine 7s infinite;
overflow: hidden;
}

@keyframes silverShine {
    10%, 90% {
        background: none;
        -webkit-background-clip: text;
        -webkit-text-fill-color: inherit;
        text-shadow: none;
      }
      35%, 65% {
        background: linear-gradient(
          120deg,
          transparent 0%,
          #c0c0c0 50%,
          transparent 100%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
        background-position: 200% 0;
      }
}
  
.silver-text {
position: relative;
animation: silverShine 7s infinite;
overflow: hidden;
}

@keyframes goldShine {
    10%, 90% {
      background: none;
      -webkit-background-clip: text;
      -webkit-text-fill-color: inherit;
      text-shadow: none;
    }
    35%, 65% {
      background: linear-gradient(
        120deg,
        transparent 0%,
        #ffd700 50%,
        transparent 100%
      );
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
      background-position: 200% 0;
    }
}
  
.gold-text {
    color: #ddbf11;
    position: relative;
    animation: goldShine 7s infinite;
    overflow: hidden;
}

@keyframes emeraldShine {
    10%, 90% {
      background: none;
      -webkit-background-clip: text;
      -webkit-text-fill-color: inherit;
      text-shadow: none;
    }
    35%, 65% {
      background: linear-gradient(
        120deg,
        transparent 0%,
        #50c878 50%,
        transparent 100%
      );
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
      background-position: 200% 0;
    }
}

.diamond-text {
    position: relative;
    animation: emeraldShine 7s infinite;
    overflow: hidden;
}

.lose-streak-warning {
    margin-top: 0.5rem;
    font-size: .8rem;
    color: #F44336
}

.section-heading-icon {
    padding: 0.25rem;
    width: 1.9rem;
    height: 1.9rem;
    background-color: #FFEEBC;
    border-radius: 0.6rem;
}

.section-heading-save-view-button {
    background-color: #EFF0F3 !important;
    border-radius: 0.6rem;
    padding: 0.3rem 0.45rem 0.3rem 0.3rem;
}

.section-heading-save-view-button-text {
    font-size: .9rem;
}

.settings-item {
    background-color: #EFF0F3 !important;
    padding: 0.75rem 0.6rem 0.75rem 1rem;
    border-radius: 0.9rem;
}

.settings-item-primary-text {
    font-size: 1rem;
}

.settings-item-secondary-text {
    font-size: .8rem;
    color: #999999;
}

.dashboard-activity-item {
    min-width: 100%;
    border: 1px solid #e6e6e6 !important;
    padding: 0.75rem 0.6rem 0.75rem 1rem;
    border-radius: 0.92rem;
}

.time-period-drawer label {
    border: 0;
}

.time-period-drawer input[type="radio"]:checked + label {
    color: #997100;
}

.time-period-drawer input[type="radio"]:checked {
    accent-color: #997100 !important;
}

.legend-color {
    width: .7rem;
    height: .7rem;
}

.legend-text {
    font-size: 1rem;
    color: rgb(51, 51, 51)
}

.donut-chart-wrapper {
    overflow-x: auto;
    user-select: none; /* prevents text from being highlighted while dragging */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: 1.2rem;
}


.donut-chart-item {
    display: flex;
    flex-direction: column;
    width: 75%;
    max-width: 18.8rem;
    margin: 0.25rem;
    margin-right: 0.5rem;
    background-color: #EFF0F3;
    border-radius: 1.2rem;
}

.donut-chart-item h3 {
    text-align: center;
    white-space: nowrap;
    padding-top: 1rem;
}

.donut-chart-item div {
    padding-bottom: 1rem;
}

.donut-chart-item canvas {
    max-height: 12rem;
}

.activated-graph-chart-type {
    background-color: #FFE9AA !important;
    padding: 1rem .7rem .8rem 1rem;
    border-radius: .9rem;
    border-width: 0px;
    height: 2.4rem;
}

.activated-graph-chart-type button {
    background-color: #FFE9AA;
    padding: 0;
}

.unactivated-graph-chart-type {
    padding: 1rem .7rem .9rem .7rem;
    background-color: #eff0f3;
    border-radius: .9rem;
    border-width: 0.15rem;
    border-color: #8e815b;
    height: 2.4rem;

}

.unactivated-graph-chart-type button {
    padding: 0;
    background-color: #eff0f3;
    color: #8e815b;
}

.pie-chart-heading {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: -1rem;
}

@media (min-width: 340px) { 
    .pie-chart-heading {
        margin-bottom: -0.6%;
    }
}

@media (min-width: 370px) { 
    .pie-chart-heading {
        margin-bottom: -0.6%;
    }
}


@media (min-width: 390px) { 
    .pie-chart-heading {
        margin-bottom: 0;
    }
}

.chart-selector .border {
    flex-grow: 1;
}

.chart-selector input + label {
    transition: all 200ms;
  }

.chart-selector input:not(:checked) + label.yellow { background-color: #ffecb352; }
.chart-selector input:checked + label.yellow { background-color: var(--yellow); }

.chart {
    height: 17rem !important;
    margin: 1rem 0 1rem -.8rem !important;
    padding-left: 0.4rem;
}

.chart-disabled-container {
    display: flex;
    flex-direction: column;
    max-width: 23rem;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    white-space: nowrap;
}

@media (min-width: 388px) {
    .chart-disabled-container {
        flex-direction: row;
    }
}

.chart-disabled-container p:first-child {
    display: flex;
    justify-content: center;
    margin-right: 0.4rem
}

.badge {
    display: inline-block;
    color: #000;
    width: 3.5rem;
}

.best-badge {
    background-color: rgba(0, 255, 0, .6) !important;
}

.second-best-badge {
    background-color: rgba(127, 255, 0, .55) !important;
}

.average-badge {
    background-color: rgba(255, 255, 0, .75) !important;
}

.second-worst-badge {
    background-color: rgba(255, 127, 0, .6) !important;
}

.worst-badge {
    background-color: rgba(255, 0, 0, .6) !important;
}

.unknown-badge {
    background-color: rgb(160, 164, 167) !important;
}

.median-select {
    width: 8rem;
}

.activity-table {
    border-collapse: separate;
    border-spacing: 0.15rem;
    background-color: #e6e6e6;
}

.activity-table th {
    background-color: #eff0f3;
    font-size: .9rem;
    font-weight: 400;
}

.activity-table td {
    font-size: .9rem;
    font-weight: 400;
    border-bottom: 0;
}

.progress {
    width: 50%;
    height: 20px;
}

.progress-filler {
    background-color: #ffecb3;
    width: 100% !important;
    transform: scaleX(0); /* using transform scaleX instead of width logic so it is possible to specify transform-origin left or right */
}

.border-radius-on-left-side {
    border-radius: 5px 0px 0px 5px;
}

.border-radius-on-right-side {
    border-radius: 0px 5px 5px 0px;
}

.metrics-correlation-scales {
    font-size: 0.8rem;
}

.highlighted { /* highlights the content with background color and animation */
    background: linear-gradient(to right, var(--yellow) 0%, var(--yellow) 100%);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    animation: highlightAnimation 1s ease forwards;
  }
  
  /* Keyframes to animate the background-size */
  @keyframes highlightAnimation {
    0% {
      background-size: 0% 100%;
    }
    100% {
      background-size: 100% 100%;
    }
  }

.new-record-button:hover {
    /* on navigating to new record page via this button this keeps the original background-color before JS hides the button
    (otherwise the background-color wound dissapear sooner than the button itself) */
    background-color: var(--yellow) !important;
}

.new-record-button {
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem .9rem .9rem .9rem;
    border-radius: 50%;
    font-size: 1rem;
    text-align: center;
    position: fixed;
    bottom: .8rem;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--yellow);
    transition: background-color 300ms;
    z-index: 100;
    border: 0 !important;
}

.footer-menu {
    width: 100%;
    max-width: 64rem;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    z-index: 1000;
    background-color: white;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.footer-menu-item {
   border-radius: 1rem;
   padding: 0.75rem 0.5rem 0.75rem 0.5rem;
}

.footer-menu-item-text {
    font-size: .9rem;
    color: #999999;
 }

.footer-menu-item-active {
    background-color: #EFF0F3;
 }

 .footer-menu-item-active span {
    color: #000;
 }

.cookie-bar {
    display: none !important; /* hidden by default, showing only if not cookie consent */
    position: fixed;
    top: 100%;
    width: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 1000;
    background-color: var(--yellow) !important;
    border: 1px solid #343a40;
}

/* All records page */

.grabbable {
    cursor: grab;
}

#all_records_container {
    width: 100%;
    overflow-x: auto;
    scrollbar-color: var(--yellow) transparent;
    scrollbar-width: thin;
}

#all_records_container:active {
    cursor: grabbing;
}

#all_records_container::-webkit-scrollbar {
    width: .5rem;
}

#all_records_container::-webkit-scrollbar-track {
    border-radius: 1rem;
}

#all_records_container::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 1rem;
}

.table-legend {
    padding-top: 4.1rem;
    cursor: pointer;
}

.table-legend div span {
    display: block;
    margin: .21rem .3rem;
}

.table.all-records {
    border-collapse: collapse;
    width: 100%;
}

table.all-records td, table.all-records th {
    white-space: nowrap;
    padding: 0;
    text-align: center;
}

table.all-records th {
    transform: rotate(210deg);
    writing-mode: vertical-lr;
    vertical-align: top;
    white-space: nowrap;
    padding: 0;
    position: relative;
    left: .83rem;
    top: -.15rem;
    font-weight: normal;
    font-size: .85rem;
}

table.all-records td {
    vertical-align: top;
    transition: background-color .1s linear;
    transition: border-radius .1s linear;
}

table.all-records td div {
    margin: .15em;
    border-radius: 100%;
    width: 1.4rem;
    height: 1.4em;
}

table.all-records td button {
    background-color: #ddd;
    border: none;
    border-radius: .3rem;
    padding: 0 .25rem;
    margin: .2rem 0 .5rem 0;
}

.deactivated div {
    background-color: #eee !important;
    box-shadow: none !important;
}

.highlighted-column {
    background-color: #555;
}

.highlighted-column-button {
    background-color: #555 !important;
    padding-top: .2rem !important;
    margin-top: 0 !important;
    width: 100%;
    border-radius: 0 0 .3rem .3rem !important;
}

.highlighted-column-button .bi-eye-fill {
    fill: #eee;
}

table.all-records tr:first-child .highlighted-column {
    border-radius: .3rem .3rem 0 0;
}

.highlighted-column.deactivated div {
    opacity: 0;
}

.metrics-value-selector .border {
    flex-grow: 1;
}

.metrics-value-selector input + label {
    transition: all 200ms;
    border-radius: 1rem;
    border: none !important;
}

.metrics-value-selector input[type="checkbox"]:not(:checked) + label.red    { background-color: rgba(254, 138, 167, 0.2); }
.metrics-value-selector input[type="checkbox"]:not(:checked) + label.orange { background-color: rgba(251, 178, 198, 0.2); }
.metrics-value-selector input[type="checkbox"]:not(:checked) + label.yellow { background-color: rgba(250, 216, 117, 0.2); }
.metrics-value-selector input[type="checkbox"]:not(:checked) + label.green  { background-color: rgba(170, 215, 132, 0.2) }
.metrics-value-selector input[type="checkbox"]:not(:checked) + label.lime   { background-color: rgba(129, 182, 160, 0.2) }

.metrics-value-selector input[type="checkbox"]:checked + label.red    { background-color: rgba(254, 138, 167, 1); }
.metrics-value-selector input[type="checkbox"]:checked + label.orange { background-color: rgba(251, 178, 198, 1); }
.metrics-value-selector input[type="checkbox"]:checked + label.yellow { background-color: rgba(250, 216, 117, 1) }
.metrics-value-selector input[type="checkbox"]:checked + label.green  { background-color: rgba(170, 215, 132, 1) }
.metrics-value-selector input[type="checkbox"]:checked + label.lime   { background-color: rgba(129, 182, 160, 1) }

.positive-field0 div, .negative-field4 div { background-color: rgba(254, 118, 127, 1); }
.positive-field1 div, .negative-field3 div { background-color: rgba(251, 178, 198, 1); }
.positive-field2 div, .negative-field2 div { background-color: rgba(250, 216, 117, 1) }
.positive-field3 div, .negative-field1 div { background-color: rgba(170, 215, 132, 1) }
.positive-field4 div, .negative-field0 div { background-color: rgba(129, 182, 160, 1) }

.record-details .activities {
    font-size: .85rem;
}

.note-container {
    background-color: #eee;
    border-radius: .5rem;
}

/* Drawers */

.drawer .offcanvas-bottom {
    border-radius: 2rem 2rem 0 0;
    height: auto;
}

.drawer-heading {
    text-align: center;
    margin-bottom: 1rem;
 }

 .drawer-submit-button {
    margin: 1rem 0 .4rem 0;
    border-color: var(--yellow) !important;
    background-color: var(--yellow) !important;
    height: 2.3rem;
    width: 100%;
    transition: background-color 100ms;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drawer-submit-button:hover {
    background-color: #fadb7d !important;
}

.drawer-submit-button span {
    font-size: .9rem;
}

.drawer-cancel-button {
    height: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drawer-cancel-button span {
    font-size: .9rem;
    color: #999999;
}

.drawer-select-item {
    background-color: #eff0f3;
}

.drawer-select-item input:not(:checked) + label {
    background-color: #eff0f3;
}

.drawer-select-item input[type="checkbox"]:checked + label,
.drawer-select-item input[type="radio"]:checked + label { 
    background-color: #fef4d5;
    border: 1px solid #ffe9aa;
 }

.drawer-select-item input:focus:not(:checked) + label, /* If unchecking, change immediately to unchecked color (don't wait until the focus is lost) */
.drawer-select-item input:focus-within:not(:checked) + label {
    background-color: #eff0f3;
}

/* Help page */

body#help_page p {
    text-align: justify;
}

body#help_page li {
    text-align: justify;
    margin-bottom: .5rem;
}

body#help_page {
    margin-top: 5rem;
}

body#help_page h3 {
    margin: 1.3rem 0 .5rem;
}

@media (min-width: 992px) { 
    body#help_page h3 {
        margin: 2rem 0 .6rem;
    }
}

body#help_page h2 {
    margin-bottom: .7rem;
}

.btn-submit-query {
    background-color: var(--yellow) !important;
    transition: background-color 100ms;
}

.btn-submit-query:hover {
    background-color: #fadb7d !important;
}

/* Notifications page */

body#notifications_page p {
    text-align: justify;
}

.switch {
    width: 3.5rem !important;
    height: 2rem !important;
    background-color: #eee;
    cursor: pointer;
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28 109, 162, 140, 1 %29'/%3e%3c/svg%3e")
        !important;
}

.switch:checked {
    background-color: #81b6a0;
    border: .2rem solid #81b6a0;
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28 0, 0, 0, 0.6 %29'/%3e%3c/svg%3e")
        !important;
}

.switch:not(:checked), .switch:active {
    border: .2rem solid #ddd;
}

@keyframes spinning {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

.spinner {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.7;
    animation: spinning 2s linear infinite;
}

.spinner-hidden {
    opacity: 0 !important;
}

/* Support us page */

body#support_page p {
    text-align: justify;
}

/* ::-webkit-scrollbar {
    width: 15px;
  } */

  /* Track */
  /* ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 0.76rem;
  } */
   
  /* Handle */
  /* ::-webkit-scrollbar-thumb {
    background: #212529;
    border-radius: 0.76rem;
  } */
  
  /* Handle on hover */
  /* ::-webkit-scrollbar-thumb:hover {
    background: #212529
  } */