.login_splash{
    /* Login splash screen */
    /* background-image: linear-gradient( rgba(18, 100, 36, 0.6) , rgba(245, 160, 3, 0.6)),url('/assets/images/backgrounds/marshmellows.jpg') !important; */
  background-repeat: no-repeat;
  background-size: cover;
  
  }
  
  [class^="withRouter-Login"]{
    /* controls the gradient background when in mobile view the area behind the login box */
    background: linear-gradient(to right, rgb(70, 83, 52) 0%, #526B33 100%) !important;
  }
  
  /* Override the grid drop down so it's not long when in vertical mode so the next calendar button are always near the bottom of the dropdown */
  [data-testid="MonthGrid"] {
    height: 100% !important; /* Adjust as necessary */
  }

  
  .back_blocks_small{
  background-color:#f1632f;
  border-radius: 13px;
  padding: 2px;
  margin: auto;
  height: 20px;
  color:#fff;
  width: 80px;
  }
  
  
  .small_header {
    height: 350px !important; /* any arbitrary height but best at the minimum initial height you would want. */
    overflow: hidden;
    transition: all 0.5s ease;
  }
  .small_title {
    padding-top: 0px !important; /* any arbitrary height but best at the minimum initial height you would want. */
    transition: all 0.5s ease;
  }
  
  .white_stroke{
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
               0px 8px 13px rgba(0, 0, 0, 0.1),
               0px 18px 23px rgba(0, 0, 0, 0.1);
    color:white;
  }
  
  .bottom_border input{
    border-bottom: solid 1px #a0a0a0;
  }
  
  .gated_day_style{
    display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      height: 100%;
      width: 100%;
      border: 1px dashed white;
  }
  .non_gated_day_style{
    display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      height: 100%;
      width: 100%;
  }
  
  /* Kinda stuck at version 1.5.0 for the date picker.  In the newest version the z index is working fine with the material ui components.  
  this css will make it so the date picker range box is over the material ui components */
  .zme > div{
    z-index: 9999;
  }
  
  
  .sticky_menu {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #fff;
    
    
  }
  @media only screen and (min-width: 780px) {
    .sticky_menu {
      top: 0;
      position: -webkit-sticky;
      position: sticky;
    }
    .sticky_search_bar {
      top: -60px;
      position: -webkit-sticky;
      position: sticky;
    }
  }
  
  .sticky_search_bar {
    margin: 0;
    padding: 0;
    width: 100%;
    /* background-color: #BFFFF3; */
  }