#ui-datepicker-div{width: 300px !important;}
li.option.selected.focus {
font-weight: 700 !important;
color: #000;
background-color: #ececec !important
}
.city-select:focus {
outline: none;
box-shadow: none
}
.select-city-section input {
width: 100%;
height: 40px;
line-height: 40px;
border: none;
border-bottom: 1px solid #000 !important;
border-radius: 0px;
padding-left: 55px;
color: #000;
font-size: 17px
}

.select-city-section input:focus {
outline: none
}

.city-select:before {
position: absolute;
top: 2px;
left: 20px;
font-family: FontAwesome;
font-size: 20px;
color: #222;
line-height: inherit
}

.city-select {
position: relative;
width: 100%
}

.city-select.nice-select {
width: 100%;
height: 36px;
line-height: 38px;
border: none;
border-bottom: 1px solid #000 !important;
border-radius: 0px
}

.city-select .current {
font-size: 16px;
padding-left: 32px
}

.city-select .current:before {
font-size: 20px
}

.city-select.nice-select {
margin-bottom: 20px
}

.city-select.nice-select {
width: 100%;
height: 45px;
line-height: 45px;
border-color: #222
}

.nice-select.city-select.city-select1 {
width: 50%;
margin-right: 15px
}

.alphabet-dropdown {
width: 50%;
margin-left: 15px
}

.city-select .current {
font-size: 18px;
padding-left: 40px;
color: #222;
font-weight: 500;
border-color: #222 !important
}

.city-select.nice-select::after {
height: 10px;
width: 10px;
top: 45%
}

.city-select .list {
width: 100%;
height: 330px;
overflow-y: auto !important;
box-shadow: 0 4px 10px rgba(0,0,0,.175) !important;
margin-top: 60px;
border-radius: 15px
}

.city-select .current:before {
content: "\f3c5";
position: absolute;
top: 0px;
left: 20px;
font-family: FontAwesome;
font-size: 24px;
color: #cf2428;
line-height: inherit
}

.city-select .list li {
padding: 10px;
font-size: 15px;
min-height: inherit;
line-height: 25px;
color: #222;
border-top: 1px solid #f6f6f6
}

.city-select .list li:first-child {
font-weight: 600;
background: #f3f3f3;
cursor: default
}

select.city-select {
width: 100%;
height: 50px;
line-height: 50px;
border-color: #222;
border-radius: 5px;
font-size: 19px;
padding: 0px 18px
}

.error-city {
position: relative
}

.error-city .text-danger {
position: absolute;
top: -15px
}

.nice-select .option.selected {
font-weight: normal !important
}

.nice-select .nice-select-search-box {
box-sizing: border-box;
position: absolute;
width: 100%;
margin-top: 5px;
top: 100%;
left: 0;
z-index: 8;
padding: 5px;
background: #FFF;
opacity: 0;
pointer-events: none;
border-radius: 5px 5px 0 0;
box-shadow: 0 0 0 1px rgba(68,88,112,.11);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(.75) translateY(-21px);
-ms-transform: scale(.75) translateY(-21px);
transform: scale(.75) translateY(-21px);
-webkit-transition: all .2s cubic-bezier(.5,0,0,1.25),opacity .15s ease-out;
transition: all .2s cubic-bezier(.5,0,0,1.25),opacity .15s ease-out
}

.nice-select .nice-select-search {
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: none;
color: #333;
display: inline-block;
vertical-align: middle;
padding: 7px 12px;
margin: 0 10px 0 0;
width: 100%!important;
min-height: 36px;
line-height: 22px;
height: auto;
outline: 0!important;
font-size: 15px
}

.nice-select.open .nice-select-search-box {
opacity: 1;
z-index: 10;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0)
}

.select_city_section {
width: 100%;
display: flex
}

.right_detail_section h4 {
font-weight: 500;
color: #222;
display: inline-block;
width: 100%
}

.time-variant {
margin-bottom: 20px
}

.time-variant ul {
margin: 0px;
padding: 0px;
list-style: none;
display: flex
}

.time-variant ul li {
width: 33.33%;
padding: 2px 5px;
text-align: center;
cursor: pointer;
overflow: hidden;
position: relative;
border: 1px solid #bdbbbb;
border-radius: 5px 0px 0px 5px;
}

.time-variant ul li:nth-child(2) {
border-left: none;
border-radius: 0px
}

.time-variant ul li:nth-child(3) {
border-left: none;
border-radius: 0px 5px 5px 0px
}

.time-variant ul li {
display: block;
font-weight: 600;
color: #6d6a6a;
margin-bottom: 4px
}
.time-variant ul li span {
color: #6d6a6a;
display:block;
}

.time-variant ul li:last-child {
margin-right: 0px
}

.calender-box {
padding: 0px;
position: relative;
cursor: pointer;
}

.calender-box.active-slot input {
font-weight: 600
}

.calender-box input {
border: none;
outline: none;
width: 100%;
height: 100%;
text-align: center;
font-size: 14px;
padding-top: 20px;
background: transparent;
cursor: pointer;
caret-color: transparent;
}
.calender-box:after {
content: "\f073";
position: absolute;
z-index: -1;
font-family: "FontAwesome";
color: #6d6a6a;
top: 1px;
left: 50%;
transform: translateX(-50%);
z-index:1;
}

.delivery-type ul {
margin: 0px;
padding: 0px;
list-style: none;
display: flex
}

.delivery-type ul li {
width: 33.33%;
overflow: hidden;
border: 1px solid #dadada;
text-align: center;
position: relative;
cursor: pointer;
border-radius: 5px 0px 0px 5px;
}

.delivery-type ul li:nth-child(2) {
border-left: none;
border-radius: 0px
}

.delivery-type ul li:nth-child(3) {
border-left: none;
border-radius: 0px 5px 5px 0px
}

.delivery-type ul li:last-child {
margin-right: 0px
}

.delivery-type {
margin-bottom: 20px
}

.delivery-charge {
position: absolute;
font-size: 11px;
text-align: right;
right: 2px;
top: 9px;
color: #000;
font-weight: 500;
display: none
}

.delivery-charge:after {
content: "";
background: #f9f5ec;
width: 59px;
height: 63px;
transform: rotate(27deg);
position: absolute;
top: -17px;
right: -8px;
z-index: -1;
border-left: 1px solid #dadada
}

.delivery-charge:before {
content: "";
width: 59px;
height: 63px;
transform: rotate(27deg);
position: absolute;
top: -17px;
right: -8px;
border-left: 1px solid #dadada
}

.select-time-slot {
border: 1px solid #dadada;
border-radius: 5px;
height: 49px;
text-align: center;
}
.select-time-slot:after{
display: inline-block;
content: "\f078";
font-family: FontAwesome;
border: none;
position: absolute;
right: 10px;
font-size: 14px;
top: 14px;	
}

.select-time-slot:hover {
border: 1px solid #dadada
}

.select-time-slot:active {
background: #fff !important;
color: #000 !important;
border-color: #dadada !important
}

.delivery-time-slot {
margin-bottom: 10px;
float: left;
width: 100%
}

.delivery-time-slot .dropdown-menu {
border-radius: 0px 0px 15px 15px !important;
overflow: hidden;
}

.delivery-time-slot .dropdown-menu li{
border-bottom:1px solid #efefef;
font-size: 15px;
  line-height: 21px;
}

.delivery-time-slot .dropdown-menu li a{
padding:10px 5px;
}

.delivery-time-slot .dropdown-menu li:last-child{
border-bottom:none;
}

.delivery-time-slot select {
padding: 7px 10px;
width: auto;
border: 1px solid #dadada;
outline: none;
float: left;
margin-right: 15px;
background: #fff;
height: 44px;
border-radius: 5px;
font-size: 15px
}

.mid-box-section {
display: flex;
align-items: center;
width: 100%;
float: left
}
.time-box {
padding: 0;
min-width: 33.33%;
white-space: nowrap;
text-align: center;
border: 1px solid #dadada;
color: #000;
font-weight: 600;
background: #ececec;
margin-right: 20px;
float: left;
border-radius: 5px
}

.mid-box-section span {
padding-top: 5px;
display: inline-block;
font-size: 14px
}

.color-heighlight {
color: #f00
}

.option-time-unavailable {
position: relative
}

.option-time {
z-index: 9
}

.delivery-time-slot .dropdown-item {
text-align: center
}

.delivery-time-slot .dropdown-item:active {
color: var(--bs-dropdown-link-hover-color);
background-color: var(--bs-dropdown-link-hover-bg)
}

.option-time-unavailable:after {
content: "";
background: red;
position: absolute;
height: 2.5px;
width: 155px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
.time-variant ul li.active-slot span {
color: #000
}

.time-variant ul li.active-slot {
color: #000
}
.active-slot {
background: #ececec;
color: #000;
font-weight: 600
}
.delivery-time-slot button[aria-expanded="false"] {
    background: #ececec;
    font-weight: 600
}
div#ui-datepicker-div{z-index:9999!important;}

@media(min-width: 768px){
    .time-variant ul li {font-size: 15px;height: 49px;}
    .time-variant ul li span {font-size: 14px;}
    .delivery-type ul li{padding: 11px 10px;font-size: 15px;height: 49px;}
    .mid-box-section {margin-bottom: 30px;margin-top: 20px;}
    .time-box {height: 49px;line-height: 49px;font-size: 15px;}
    .calender-box:after {font-size: 18px;}
    .right_detail_section h4 {font-size: 16px;margin-bottom: 10px;}
    .select-time-slot {font-size: 16px;line-height: 21px;}
}
@media(max-width: 767px){
    .time-variant ul li {font-size: 13px;height: 45px;}
    .time-variant ul li span {font-size: 12px;}
    .time-box{padding: 0px 10px;width: fit-content;height: 48px;line-height: 48px;font-size: 13px;}
    .delivery-time-slot .btn-group{width: 100%!important;}
    .mid-box-section {margin-bottom: 15px;margin-top: 10px;}
    .calender-box:after {font-size: 14px;}
    .right_detail_section h4 {font-size: 14px;margin-bottom: 6px;}
    .select-time-slot {font-size: 15px;line-height: 20px;}
}
@media(min-width:481px) and (max-width: 767px){
    .delivery-type ul li{padding: 8px 10px;font-size: 14px;line-height: 18px;height: 48px;}
}
@media(max-width:480px){
    .delivery-type ul li{padding: 4px 10px;font-size: 13px;height: 48px;display: flex;align-items: center;justify-content: center;}
}