.jp-mobile-range-calendar-container{
    width: 100%;
    /*position: relative;*/
    height: 40px;
    /*padding:24px;*/
}

.jp-mobile-range-calendar-container .checkin-block {
    width: 50%;
    float: left;
}
.jp-mobile-range-calendar-container .checkin-block2 {
    width: 50%;
    float: right;
}
.chechin-block {
    display: inline-block;
    margin-right: 10px;
}
.chechin-block2 {
    display: inline-block;
}
.jp-mobile-range-calendar-container .datelabel {
    font-family: Montserrat-Regular;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.29;
    letter-spacing: normal;
    color: #435b73;
    margin-bottom: 12px;
}
.jp-mobile-range-calendar-container  input.react-datepicker-ignore-onclickoutside {
    font-family: Montserrat-bold;
    font-size: 20px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.3;
    letter-spacing: normal;
    color: #002642;
    border:none;
    outline: 0;
    border-bottom: solid 1px #435b73;
}
.jp-mobile-range-calendar-container  input {
    font-family: Montserrat-bold;
    font-size: 20px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.3;
    letter-spacing: normal;
    color: #002642;
    border:none;
    outline: 0;
    border-bottom: solid 1px #435b73;
    width: 140px;
}





.jp-mobile-range-calendar-container button.react-datepicker__navigation.react-datepicker__navigation--next {
    display: none;
}

.jp-mobile-range-calendar-container button.react-datepicker__navigation.react-datepicker__navigation--previous {
    display: none;
}
.jp-mobile-range-calendar-container .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before{
    display: none;
}
.jp-mobile-range-calendar-container .react-datepicker__month-container {
    /* box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 0.5); */
    background-color: #2a3c4d;
    width: 100%;
    color: rgba(255, 255, 255, 0.87);
    height:331px;
}

.jp-mobile-range-calendar-container .react-datepicker__header{
    background:none;
    border:none;
    padding-top:0px;
}
.jp-mobile-range-calendar-container  .react-datepicker__day-name {
    opacity: 0.56;
    font-family: Montserrat-Regular;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: rgba(255, 255, 255, 0.54);
    margin: 0px;
    padding:5px;
}
.jp-mobile-range-calendar-container .react-datepicker {
    
    width: 99.5%;
    border-radius: 0;
    border: none;
}

.jp-mobile-range-calendar-container .react-datepicker__month-dropdown-container.react-datepicker__month-dropdown-container--scroll{
    float:right;
}

.jp-mobile-range-calendar-container .react-datepicker__month-dropdown-container .react-datepicker__month-dropdown .react-datepicker__month-read-view--selected-month{
    color:#000;
}
.jp-mobile-range-calendar-container .react-datepicker__month-dropdown-container.react-datepicker__month-dropdown-container--scroll .react-datepicker__month-read-view--selected-month{
    float: right;
    font-family: Montserrat-bold;
    font-size: 19px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.26;
    letter-spacing: normal;
    color: #f8f4f4;
    margin-right:24px;
    
}
.jp-mobile-range-calendar-container .react-datepicker__year-dropdown-container.react-datepicker__year-dropdown-container--scroll {
    float: left;
    font-family: Montserrat-bold;
  font-size: 19px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.26;
  letter-spacing: normal;
  color: #dddddd;
  margin-left:24px;
  
}
.jp-mobile-range-calendar-container  .react-datepicker__header__dropdown.react-datepicker__header__dropdown--scroll {
    width: 100%;
    float: left;
    border-bottom: 1px solid hsla(0,0%,100%,.68)!important;
    padding: 20px 0px;
}
.jp-mobile-range-calendar-container  span.react-datepicker__month-read-view--down-arrow {
    display: none;
}
.jp-mobile-range-calendar-container  span.react-datepicker__year-read-view--down-arrow {
    display: none;
}
.jp-mobile-range-calendar-container .react-datepicker__month {
    margin: 0px;
    text-align: center;
    float: left;
    font-family: Montserrat-Regular;
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: rgba(255, 255, 255, 0.87);
  width: 100%;
}

.jp-mobile-range-calendar-container  .react-datepicker__day-names {
    float: left;
    width: 100%;
    margin-top: 17px;
    margin-left: -1px;
    opacity: 0.56;
    font-family: Montserrat;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: rgba(255, 255, 255, 0.54);
}

.react-datepicker__day--range-start{
    width:24px;
    height: 24px;
    border-radius: 2px;
    background-color: #e59500;
    color:#fff;
    }
    .react-datepicker__day--in-range{
        width: 24px;
        height: 24px;
        border-radius: 0px;
        background-color: rgba(229, 149, 0, 0.62);
    }
    .react-datepicker__day--range-end{
        width:24px;
        height: 24px;
        border-radius: 2px;
        background-color: #e59500;
        color:#fff;
    }

    .jp-mobile-range-calendar-container .react-datepicker__day {
        cursor: pointer;
        font-family: Montserrat-Regular;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        text-align: center;
        color: rgba(255, 255, 255, 0.87);
    }

    .jp-mobile-range-calendar-container .react-datepicker__day, .react-datepicker__time-name {
       
        display: inline-block;
        width: 1.7rem;
        line-height: 1.7rem;
        text-align: center;
        margin: 0px;
        padding: 5px;
    }

    .jp-mobile-range-calendar-container .react-datepicker__year-dropdown,  .jp-mobile-range-calendar-container .react-datepicker__month-dropdown,  .jp-mobile-range-calendar-container .react-datepicker__month-year-dropdown {
        background-color: #2a3c4d;;
        position: absolute;
        width: 100%;
        left: 0;
        top: 67px;
        bottom: -350px;
        z-index: 1;
        text-align: center;
        border-radius: 0;
        border: none;
        font-family: Montserrat;
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.29;
        letter-spacing: normal;
        color: #faf7f7;
        height: 263px;
        overflow: scroll;
    }

    .jp-mobile-range-calendar-container .react-datepicker__month-option {
        padding: 16px 0px;
        border-bottom: solid 1px #435b73;
        font-family: Montserrat-bold;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.29;
  letter-spacing: normal;
  color: #faf7f7;
    }
    .jp-mobile-range-calendar-container  .react-datepicker__year-option{
        padding: 16px 0px;
        border-bottom: solid 1px #435b73;
        font-family: Montserrat-bold;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.29;
  letter-spacing: normal;
  color: #faf7f7;
        
}
.jp-mobile-range-calendar-container .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover {
    background-color: #e49633;
    }

    .jp-mobile-range-calendar-container .react-datepicker__day:hover {
        border-radius: 0.3rem;
        background-color: #e49633;
        }

    .jp-mobile-range-calendar-container .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
        background-color: #e49633;
        }

    .jp-mobile-range-calendar-container .react-datepicker__day--keyboard-selected:hover {
        background-color: #e49633;
        }
/* 
    .jp-mobile-range-calendar-container  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range {
            border-radius: 0.3rem;
            background-color: #e49633;
            color: #fff;
    
        } */
        .jp-mobile-range-calendar-container .react-datepicker__day--keyboard-selected {
            border-radius: 0.3rem;
            background-color: #e49633;
            color: #fff;
        }
        .jp-mobile-range-calendar-container .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
            background-color: rgba(229, 149, 0, 0.62);
            color: #fff;
        }
    .jp-mobile-range-calendar-container .react-datepicker__year-option.react-datepicker__year-option--selected_year{
        background-color: #e59500;
        border-radius: 0px;
    }
    .jp-mobile-range-calendar-container .react-datepicker__year-option.react-datepicker__year-option--selected_year span{
        display: none;
    }

    .jp-mobile-range-calendar-container .react-datepicker__month-option.--selected_month span {
        display: none;
    }

    .jp-mobile-range-calendar-container  .react-datepicker__month-option.--selected_month {
        background-color: #e59500;
        border-radius: 0px;
    }

    .jp-mobile-range-calendar-container .react-datepicker__day--selected {
      
        background-color: #e59500;
        color: #fff;
    } 
    .jp-mobile-range-calendar-container .react-datepicker__month--selecting-range .react-datepicker__day--in-range, .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range {
        background-color: rgba(229, 149, 0, 0.62);
        color: #fff;
    }

    .jp-mobile-range-calendar-container .react-datepicker-popper {
       
        transform: none!important;
        /* bottom: 0px; */
        top: unset!important;
        width: 100%;
        /* position: fixed !important; */
    }

    .jp-mobile-range-calendar-container .react-datepicker__day--outside-month {
        color: transparent!important;
        color: white;
        pointer-events: none;
        
    }

    .jp-mobile-range-calendar-container  .react-datepicker__month-read-view {
        visibility: unset!important;
    }

    .jp-mobile-range-calendar-container .react-datepicker__year-read-view{
        visibility: unset!important;
    }

   


    .jp-mobile-range-calendar-container .react-datepicker__month-dropdown .react-datepicker__month-read-view .react-datepicker__month-read-view--selected-month{
    color:#000;
}


.jp-mobile-range-calendar-container .react-datepicker__current-month.react-datepicker__current-month--hasYearDropdown.react-datepicker__current-month--hasMonthDropdown {
    transform: rotate(-90deg);
  font-family: Montserrat-bold;
  font-size: 19px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.26;
  letter-spacing: normal;
  color: #dddddd;
  position: absolute;
  top: 170px;
  left: -12%;
  right: 70%;
}

 .jp-mobile-range-calendar-container .react-datepicker__month-dropdown-container.react-datepicker__month-dropdown-container--scroll div:nth-child(2) span.react-datepicker__month-read-view--selected-month {
    font-family: Montserrat-bold;
    font-size: 19px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.26;
    letter-spacing: normal;
    color: #e59500;
}

.jp-mobile-range-calendar-container .react-datepicker__year-dropdown-container.react-datepicker__year-dropdown-container--scroll div:nth-child(2) span.react-datepicker__year-read-view--selected-year {
font-family: Montserrat-bold;
  font-size: 19px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.26;
  letter-spacing: normal;
  color: #e59500;
}

.jp-mobile-range-calendar-container .react-datepicker__year-dropdown-container.react-datepicker__year-dropdown-container--scroll div:first-child span:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent transparent #2a3c4d transparent;
    border-width: 5px 10px;
    right: 34px;
    top: 105px;
    margin-top: -48px;

}

.jp-mobile-range-calendar-container .react-datepicker__year-dropdown-container.react-datepicker__year-dropdown-container--scroll div:first-child span:before {
    content: '';
    position: absolute;
    border-style: solid;
    opacity: 0.69;
    border-color: transparent transparent #ffffff transparent;
    border-width: 5px 10px;
    right: 34px;
    top: 106px;
    margin-top: -50px;
} 



.jp-mobile-range-calendar-container .react-datepicker__year-dropdown-container.react-datepicker__year-dropdown-container--scroll div:nth-child(2) span.react-datepicker__year-read-view--selected-year:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent transparent #2a3c4d transparent;
    border-width: 5px 10px;
    left: 34px;
    top: 106px;
    margin-top: -49px;

}

.jp-mobile-range-calendar-container .react-datepicker__year-dropdown-container.react-datepicker__year-dropdown-container--scroll div:nth-child(2) span:before {
    content: '';
    position: absolute;
    border-style: solid;
    opacity: 0.69;
    border-color: transparent transparent #ffffff transparent;
    border-width: 5px 10px;
    left: 34px;
    top: 106px;
    margin-top: -50px;
}
/* 
.react-datepicker__month-dropdown-container.react-datepicker__month-dropdown-container--scroll div:nth-child(2) span.react-datepicker__month-read-view--selected-month:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent transparent #2a3c4d transparent;
    border-width: 11px 10px;
    right:34px;
    top: 94px;
    margin-top: -49px;

}

.react-datepicker__month-dropdown-container.react-datepicker__month-dropdown-container--scroll div:nth-child(2) span:before {
    content: '';
    position: absolute;
    border-style: solid;
    opacity: 0.69;
    border-color: transparent transparent #ffffff transparent;
    border-width: 10px;
    right:34px;
    top: 94px;
    margin-top: -49px;
} */

.jp-mobile-range-calendar-container .react-datepicker__day--disabled:hover {
    border-radius: 0.3rem;
    background-color: transparent;
    }



@media (min-width:320px) and (max-width:340px) {
    .jp-mobile-range-calendar-container input {
        font-size: 17px;
        width: 120px;
    }

    .jp-mobile-range-calendar-container input.react-datepicker-ignore-onclickoutside {
        font-size: 17px;
    }
    }