.APO__box-shadow {
    /* box-shadow: 0px 0px 4px rgba(39, 45, 61, 0.1), 0px 0px 4px rgba(39, 45, 61, 0.06); */
    border: 1px solid #e0eaf9;
}
.APO__custhaserror {
    color: #e22727;
    font-size: 14px;
    margin-top: -13px;
    margin-bottom: 16px;
}
.APO__hover:hover, .service-wrapper.selected, .APO__boxed.selected {
    background-color: #fafafa;
    border-color: #1e75ff;
}
.APO__hover:hover * {
    color: #3c5d95;
}
.APO__hover:hover .gray-badge {
    background-color: #1e75ff;
    color: #fff;
}
.APO__hover:hover svg path{
    fill: #1e75ff!important;
}
.APO__title {
    text-transform: capitalize!important;
    color: #252525;
}
.APO__mutetext {
    font-size: 14px;
}
.gray-badge {
    /* position: absolute;
    right: 0;
    bottom: 16px; */
    background-color: #eaeaea;
    border-radius: 5px;
    padding: 1px 8px;
    font-size: 14px;
    line-height: normal;
    color: #242627;
}
.APO__typeicon {
    font-size: 28px;
    color: #49505f;
}
.APO__OptionIcon {
    font-size: 24px;
    color: #49505f;
}

/* staff css */
.__selectStaff hr {
    width: 30px;
    height: 2px;
    background-color: #ccc;
    border-radius: 4px;
    border: none;
}
.__Staffname:first-letter, .__StaffRole:first-letter {
    text-transform: capitalize!important;
}

/* boxed  design css */
.APO__boxedlayout .APO__boxed {
    width: calc(50% - 8px);
    word-break: break-word;
}

/* booking slots */
.APO__Timeslots {
    padding: 8px;
    width: 100%;
    cursor: pointer;
}
.APO__Timeslots:not(.breakHour){
    color: #1e75ff;
    border: 1px solid #1e75ff;
}
.APO__Timeslots:hover:not(.breakHour), .APO__Timeslots.selected:not(.breakHour) {
    color: #fff;
    background-color: #1e75ff;
}
.APO__Timeslots.breakHour {
    cursor: not-allowed;
    background-color: #eee;
    border-color: var(--gray-100);
}

/* order detail box css */
.APO__insertOrderD {
    background-color: #fafafa;
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    border-top: 1px solid #e0eaf9;
    border-radius: 16px 16px 0px 0px;  
    overflow: hidden;
    max-height: 100%;
}
.APO__insertOrderD.orderDminimized .APO__roundedicon svg {
    transform: rotate(180deg);
}
/* .APO__insertOrderD.orderDminimized {
    bottom: -145px !important;
}
.APO__insertOrderD.orderDminimized .APO__orderDContent, .APO__insertOrderD.orderDminimized .APO__bookingBtn {
    display: none;
} */
.APO__insertOrderD.fillcontactDetail {
    /* height: calc(100% - 67px); */
    /* top: 64px; */
    border-radius: 0px;
    overflow-y: auto;
    border-top: none;
}
/* .APO__insertOrderD.fillcontactDetail::-webkit-scrollbar {
    display: none;
} */
 .tryAgainBtn{
    background-color: #f34e52;   
    color: #fff;
    font-size: 17px;
    cursor: pointer;
 }
.APO__orderDright {
    max-width: 60px;
    word-wrap: break-word;
}
.APO__orderDetail .APO__title{
    font-size: 17px!important;
}
.APO__AllbooikgList .addnewAPO {
    position: absolute;
    right: 10px;
    left: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    bottom: 32px;
    padding: 0;
    z-index: 1;
}
.APO__bookingBtn{
    background-color: #1e75ff!important;   
    color: #fff!important;
    cursor: pointer!important;
}
.APO__bookingBtn:disabled {
    opacity: .5!important;
    cursor: not-allowed!important;
}
.APO__insertOrderD.fillcontactDetail .APO__orderDetail{
    padding-bottom: 90px;
}
.APO__insertOrderD.fillcontactDetail .APO__bookingBtn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    width: calc(100% - 20px* 2);
    margin: 0 auto;
}
.APO__insertOrderD.fillcontactDetail .APO__orderDContent:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0eaf9;
    bottom: -19px;
    margin-left: -20px;
    margin-right: -20px;
}
.APO__Confirmwrapper {
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0px;
    width: 100%;
    overflow-y: auto;
    max-height: 100%;
}
.APO__confirmContent {
    background-color: #fafafa;
    box-shadow: 0px 0px 4px rgba(39, 45, 61, 0.1), 0px 0px 4px rgba(39, 45, 61, 0.06);
}
.APO__Confirmwrapper .APO__loader{
    background-color: #2db007;
    color: #fff;
    font-size: 20px;
}

a[href="javascript:void(0)"].service-wrapper {
    cursor: no-drop;
}

/* Location css */
.locationDirectionIcon {
    position: absolute;
    top: 21px;
    right: 8px;
    z-index: 1;
    width: 30px;
    height: 19px;
}

/* loader mask screen */
.APO__screenmask {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: rgb(255, 255, 255, 0.8);
    z-index: 10;
}
.APO__screenmask.show {
    visibility: visible;
    opacity: 1;
}
.APO__screenmask.hide .APO__loader{
    display: none;
}
.APO__loader {
    border-radius: 50%;
    position: relative;
}
.btn__loader.APO__spin {
    border-radius: 50%;
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--primary-color);
    border-right-color: var(--primary-light-color);
    animation: APO__rotate 1s linear infinite
  }
.APO__screenmask .APO__spin {
    animation: APO__rotate 1s linear infinite
}
.APO__screenmask .APO__spin:before {
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #1e75ff;
    animation: APO__prixClipFix 2s linear infinite ;
}

.APO__successCheck {
    background-color: #2db007;
}
.APO__successCheck, .APO__failCheck {
    animation: APO_pop 1.2s ease-in-out;
}
.APO__successCheck:before, .APO__successCheck:after{
    background-color: #fff;
    transform-origin: 0% 50%;
    content: "";
    height: 4px;
    position: absolute;
    border-radius: 5px;  
}
.APO__successCheck:before {
    width: 25.6px;
    top: 62%;
    left: 44%;
    transform: rotate(-47deg);
    animation: baseGrow 1s;
}
.APO__successCheck:after {
    width: 16px;
    top: 64%;
    left: 47%;
    transform: rotate(-135deg);
    animation: tipGrow 1s;
} 

.APO__failCheck {
    background-color: #ffcccb;
}
.APO__failCheck:before, .APO__failCheck:after {
    content: "";
    position: absolute;
    width: 32px;
    height: 4px;
    border-radius: 5px;
    background: #8b0000;
    transform-origin: 50% 50%;
    top: calc(50% - 2px);
}
.APO__failCheck:before{
    transform: rotate(45deg);
    animation: leftIn 0.3s linear;
    left: calc(50% - 16px);
}
.APO__failCheck:after {
    transform: rotate(-45deg);
    animation: rightIn 0.3s linear;
    right: calc(50% - 16px);
}

@keyframes APO_pop {
    0% {
      transform: scale(1);
    }
    80% {
      transform: scale(1);    
    }
    100% {
      transform: scale(1.1);
    }
}
@keyframes tipGrow {
    0% {
        width: 0px;
        left: 0;
        top: 0;
    }
    25% {
        width: 0px;
        left: 0;
        top: 0; 
    }
    50% {
        top: 0%;
        left: 0%;
        width: 0;
    }
    75% {
        top: 0%;
        left: 0%;
        width: 0px;
    }
    100% {
        top: 64%;
        left: 47%;
        width: 16px;
    }
}

@keyframes baseGrow {
    0% {
        width: 0;
    }
    90% {
        width: 0;
    }
    100% {
        width: 25.6px;
    }
}

@keyframes leftIn {
    0% {
      left: 0;
      top: 0;
      width: 0;
    }
    100% {
      top: calc(50% - 2px);
      left: calc(50% - 16px);
      width: 32px;
    }
}
  
  @keyframes rightIn {
    0% {
      rigth: 0;
      top: 0;
      width: 0;
    }
    100% {
      top: calc(50% - 2px);
      right: calc(50% - 16px);
      width: 32px;
    }
}

@keyframes APO__rotate {
    100%   {transform: rotate(360deg)}
}

@keyframes APO__prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}