/* reference
https://stackoverflow.com/questions/54170313/how-to-make-the-react-day-picker-wide-to-fill-all-the-screen-in-a-web-app-mobile */


:root {
    --green_50: #e8f5e9; 
    --green_200: #c8e6c9; 
    --green_300: #81c784; 
    --green_400: #66bb6a; 
    --green_500: #4caf50; 
    --green_600: #43a047; 
    --green_pitchcamp: #72ae63;
    --orange_0: #f1632f;
  }

  

.arrow_box {
	position: relative;
	background: transparent;
	border: none;
}
.arrow_box:after, .arrow_box:before {
	left: 45%;
	top: -50px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(212, 209, 213, 0);
	border-left-color: var(--green_pitchcamp);
	border-width: 50px;
	margin-top: -50px;
}
.arrow_box:before {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #ffffff;
	border-width: 51px;
	margin-top: -51px;
}

  .DayPicker-Caption{
      background-color: var(--green_pitchcamp) !important;
      /* padding:10px; */
      margin: 0px;      
      color: #fff;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;

  }
.DayPicker-WeekdaysRow{
    /* background-color: var(--green_50); */
    border-bottom: solid 2px #fff !important;  
}
.rdp-month{
    margin-top: 0px !important;   
    margin-bottom: 0px !important; 
    margin-right: 0px !important;

    /* Used for Firefox PITCH-53 */
    width: 100% !important;

  }
  @media screen and (max-width: 600px) {
    .rdp-month {
        margin-top: 5px !important; 
        padding:0px;
        margin: 0px;
    }
  }

.rdp-nav_button_previous{
    /* background-image: url('/assets/images/icons/left_arrow.svg') !important;   */
    background-color: white; 
    /* margin-right: 40px !important;  */
    /* border-top-left-radius: 5px;
    border-bottom-left-radius: 5px; */

    border: solid #ededed 1px;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .rdp-nav_button_next{
    /* background-image: url('/assets/images/icons/right_arrow.svg') !important;    */
    background-color: white; 
    border: solid #ededed 1px;
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* .rdp-nav{
    top: 5px !important;;
    height: 40px !important;
    width: 40px !important;
} */

.rdp-table {
  width: 100%;
  height: 100%;
  max-width: 100% !important;
  /* border-collapse: unset !important; */
  border-collapse: collapse;
  border-spacing: 0;
  border: solid #ededed 1px;

}

.rdp-months {
  font-size: 14px;
  
}
@media screen and (max-width: 600px) {
  .rdp-months {
      font-size: 9px;
    }
  }

.rdp {
    position: relative;
    flex-direction: row;
    user-select: none;
    outline: none;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}


.DayPicker-Months {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}
.rdp-row{
  
  height: 100px !important;
  border-top: solid #ededed 1px;
  height: 100px !important;
  
}
@media screen and (max-width: 800px) {
  .rdp-row {
    height: 70px !important;
    }
  }


.rdp-cell{
  /* padding: 12px !important; */
  border-left: solid #ededed 1px;
}
.rdp-cell:hover{
  background-color: #e6eefd;
  border: solid #0069ff 1px;
}

.Selectable .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
    background-color: #dbdbdb !important;
    color: #000;
  }
  .Selectable .DayPicker-Day {
    border-radius: 0 !important;
  }
  .Selectable .DayPicker-Day--start {
      background-color: var(--green_400) !important;
      border-top-left-radius: 5% !important;
      border-bottom-left-radius: 5% !important;
    }
    
    .Selectable .DayPicker-Day--end {
        background-color: var(--green_400) !important;
    border-top-right-radius: 5% !important;
    border-bottom-right-radius: 5% !important;
  }
  
  .DayPicker-Day.DayPicker-Day--end.DayPicker-Day--selected.DayPicker-Day--outside, .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected.DayPicker-Day--outside{
      /* color: #ecf6fb !important; */
      background-color: transparent !important;
  }
  .DayPicker-Day.DayPicker-Day--today{
      color: var(--orange_0) !important;
  }

  


  /* .DayPicker-Day{

    height: 60px !important;
    width: 60px !important;
  } */