/* Variables */
:root {
  --main-bg-color: #1e2022;

  --main-text-color: #f5f5dc;

/* Background Colors */
/* #201e1e */

  --side-menu-button-color: #21612f;

  /* RIDE CARD COLOURS */
  /* Workout */
  --ride-card-workout-border-color: #21612f;
  --ride-card-workout-button-color: #21612f;
  /* Road Rides */
  --ride-card-roadride-border-color: #213b61;
  --ride-card-roadride-button-color: #213b61;
  /* Other Ride Card Colours */
  --ride-card-button-border-color: #757c77;
}

.color_picker {
  background-color: #b82b2b;
}

html,
body {
  /* height: 100%; */
  margin: 0;
  padding: 0;
  font-size: large;
  color: var(--main-text-color);;
}

body {
  /* height: 100vh;
  width: 100vw; */
  /* font-family: 'Sanchez', serif; */
  color: var(--main-text-color);
  background-color: var(--main-bg-color);
}

a {
  color: var(--main-text-color);;
}

/* Remove the navbar (Header) default margin-bottom and rounded borders */ 
.header {
  margin-bottom: 0;
  border-radius: 0;
  border: none;
  height: 80px;
  background-color: var(--main-bg-color); 
  color: var(--main-text-color);;
  /* text-align: center; */
  display: flex;
}

.menu-area {
  background-color: var(--main-bg-color);
  height: 80px;
  max-width: 50px;
  /* padding: 20px 0px; */
  /* text-align: center; */
  /* margin: auto; */
  display: none;
  justify-content: center;
  align-items: center;
  font-family: 'Brush Script MT', cursive;
}

.main-menu-button {
  background-color: var(--main-bg-color);
  border: none;
}

.logo-area {
  background-color: var(--main-bg-color);
  height: 80px;
  max-width: 1200px;
  /* padding: 20px 0px; */
  /* text-align: center; */
  /* margin: auto; */
  display: flex;
  justify-content: left;
  align-items: center;
  font-family: 'Brush Script MT', cursive;
}

.logo-header {
  /* height: 75px; */
  width: 180px;
}

.login-area {
  background-color: var(--main-bg-color);
  height: 80px;
  max-width: 200px;
  min-width: 150px;
  /* padding: 20px 0px; */
  /* text-align: center; */
  /* margin: auto; */
  display: flex;
  justify-content: right;
  align-items: center;
  font-family: 'Brush Script MT', cursive;
}


/* SideNav and MainContent areas */
.all-page-content {
  height: calc(100% - (80px + 0px));;
  background-color: #555;
}


/* * {
  box-sizing: border-box;
} */

.left-side-panel {
  /* width: calc(100% - (300px + 800px- 1px)); */
  height: calc(100% - 80px);
  background-color: var(--main-bg-color); 
}

.right-side-panel {
  /* width: calc(100% - (300px + 800px - 1px)); */
  height: 100%;
  background-color: var(--main-bg-color); 
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
  height: auto;
  background-color: var(--main-bg-color); 
}


  /* Set gray background color and 100% height */
  .sidemenu {
    padding: 20px;
    background-color: var(--main-bg-color); 
    /* background-color: #756767;  */
    height: auto;
    min-width: 200px;
    /* width: 300px; */
    max-width: 300px;
    border-top: 2px solid #463b3b;
    text-align: center;
  }

  .sidemenu-holder {
    padding: 20px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
  }

  .side-menu-button {
    margin: 5px 0px 0px;
    width: 150px;
    height: 35px;
    border-radius: 10px;
    border: 1px solid #3b3a3a;
    background-color: var(--side-menu-button-color);
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* box-shadow: 5px 5px 5px lightblue; */
  }

  .main-content {
    height: calc(100% - 80px);
    max-width: 1200px;
    padding: 20px;
    /* width: 800px; */
    background-color: var(--main-bg-color); 
    overflow: auto;
    border-top: 2px solid #463b3b;
    font-size: medium;
  }


  /* Columns for the ride list */
  /* ul.ride-list {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  } */

  ul.ride-list, ul.numbers {
    float: left;
    flex-wrap: wrap;
    list-style-type: none;
  }
  ul li {
    /* flex: 1 0 33%; */
    width:50%; 
    float:left;
    padding: 10px;
  }

   /* WORKOUTS */
  .ride-card-workout {
    width: 350px;
    height: 150px;
    /* background-color: darkgreen; */
    border-radius: 10px;
    /* padding: 15px; */
    border: 2px solid var(--ride-card-workout-border-color);
  }

  .ride-card-header-workout {
    height: 25px;
    border-radius: 5px 5px 0px 0px;
    background-color: var(--ride-card-workout-border-color);
    text-align: center;
  }

  .ride-card-button-workout {
    width: 150px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--ride-card-button-border-color);
    background-color: var(--ride-card-workout-button-color);
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: 5px 5px 5px lightblue; */
  }

  /* ROAD RIDES */
  .ride-card-roadride {
    width: 350px;
    height: 150px;
    /* background-color: darkgreen; */
    border-radius: 10px;
    /* padding: 15px; */
    border: 2px solid var(--ride-card-roadride-border-color);
  }

  .ride-card-header-roadride {
    height: 25px;
    border-radius: 5px 5px 0px 0px;
    background-color: var(--ride-card-roadride-border-color);
    text-align: center;
  }

  .ride-card-button-roadride {
    width: 150px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--ride-card-button-border-color);
    background-color: var(--ride-card-roadride-button-color);
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: 5px 5px 5px lightblue; */
  }


  /* OTHER Ride Card SETTINGS */
  .ride-card-body {
    font-size: small;
    height: calc(100% - (65px));;
    padding: 0px 20px 0px 20px;
    background-color: var(--main-bg-color); 
    /* background-color: #706363; */
  }

  .ride-card-body-left {
    width: 50%;
    height: 100%;
    float: left;
    padding: 5px;
    /* border: 2px solid red; */
    background-color: var(--main-bg-color);
    text-align: left;
  }

  .ride-card-body-right {
    width: 50%;
    height: 100%;
    float: left;
    padding: 5px;
    /* border: 2px solid red; */
    background-color: var(--main-bg-color);
    text-align: right;
  }

  .ride-card-footer {
    height: 40px;
    padding: 5px;
    border-radius: 0px 0px 10px 10px;
    background-color: var(--main-bg-color); 
    /* background-color: #4b4141; */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  
  /* Ride Review Page */

  .ride-review-heading {
    color: #cfcfcf;
  }


  /* Ride Graphs */

  .chart-container {
    display: inline-block;
    position: relative; 
    width: 100%;
    height: 190px;
  }

  /* Scrollbar on the Rode Graph Page */

  /* This works on Firefox and soon other browsers */
  * {
    scrollbar-width: 20px;
    scrollbar-color: #3f3f3f #929292;
  }

  /* Works on Chrome, Edge and Safari... will fall back to above 'Scrollbar CSS' */
  *::-webkit-scrollbar {
    width: 12px;
  }
  
  *::-webkit-scrollbar-track {
    background: #929292;
    border: 3px solid var(--main-bg-color);
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: #3f3f3f;
    border-radius: 0px;
    border: 3px solid var(--main-bg-color);
  }



  
  /* Set black background color, white text and some padding */
  footer {
    /* background-color: var(--main-bg-color); */
    color: grey;
    /* padding: 15px; */
  }
  
  /* On small screens, set height to 'auto' for sidenav and grid */
  @media screen and (max-width: 820px) {

    /* .row.content {
      height: auto;
    }  */

    .left-side-panel, 
    .right-side-panel,
    .header.left-side-panel,
    .header.right-side-panel {
      /* width: calc(100% - (300px + 800px- 1px)); */
      display: none;
    }

    .menu-area {
      /* background-color: var(--main-bg-color);
      height: 80px;
      max-width: 50px; */
      /* padding: 20px 0px; */
      /* text-align: center; */
      /* margin: auto; */
      display: flex;
      justify-content: center;
      align-items: center;
      /* font-family: 'Brush Script MT', cursive; */
    }

    .sidemenu {
      display: none;
      height: auto;
      max-width: none;
      width: 100%;
      /* padding: 15px; */
      /* justify-content: left; */
    }

    .sidemenu.active {
      display: block;
    }


    /* .sidemenu-holder {
      margin-left: auto;
    margin-right: auto;
    } */

    .main-content {
      height: 100%;
      width: 100%;
      /* padding: 15px; */
      /* display: flex;
      justify-content: center;
      align-items: center; */
      /* text-align: center; */
    }

    .ride-card {
      width: 350px;
      height: 150px;
      margin: 0 auto;
      /* padding: 10px; */
      position: relative;
    }

    .ride-list {
      padding-inline-start: 0px;
      margin-block-end: 0em;
    }

    ul li {
      width:100%; 
      
      /* padding: 10px; */
    }

   
   

    .header {
      width: 100%;
    }

    .logo-area {
      width: 70%;
    }
    
    .login-area {
      width: 30%;
    }
  }

  @media screen and (max-width: 1200px) {
    /* .sidenav {
      height: auto;
      padding: 15px;
    } */

    .col-sm-1 {
      width: 3%;
    }

    ul li {
      /* flex: 1 0 33%; */
      width:100%; 
      float:left;
      padding: 10px;
    }

  }

  @media screen and (min-width: 1800px) {
    /* .sidenav {
      height: auto;
      padding: 15px;
    } */

    ul li {
      /* flex: 1 0 33%; */
      width:33.3333%; float:left;
      padding: 10px;
    }

  }

  @media screen and (min-width: 2400px) {
    /* .sidenav {
      height: auto;
      padding: 15px;
    } */

    ul li {
      /* flex: 1 0 33%; */
      width:33.3333%; float:left;
      padding: 10px;
    }

  }