.calendar {
        border: 1px solid #199ad64d;
        padding: 8px 0px 11px 0px;
        display: inline-block;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        background: white;
        position: relative;
        z-index: 100;
 
    }
    .calendar th, .calendar td { 
        padding: 5px;
        text-align: center;
        cursor: pointer;
    }
    .calendar td {
        width: 130px;
    }
/*    .calendar th:hover, .calendar td:hover {
        background-color: #007bff;
        color: #fff;
    }*/
    .calendar .selected {
        background-color: #007bff;
        color: #fff;
    }
    .day-content, .desc_box {
        padding: 0px 15px 15px 16px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        margin-top: 10px;
    }
    .day-content {
        /*display: none;*/
        opacity: 0;
        width: 500px;
        margin: auto;
        text-align: center;
        position: relative;
        z-index: 1;
    }
    td{transition: 0.1s all;}
    .pe{pointer-events: none}
    button {
        width: 75px;
        height: 50px;
    }
    .container, .calendar{
        margin:auto;
        width: 900px;
        position:relative;
        display:none;
    }
    .customer{
        margin: auto;
        width: 450px;
        text-align: center;
        padding: 18px;
    }
    .cellisDate {
        border: 1px solid #dfdfdf;
    }
    .desc{font-size: 14px; color: #555;}
    @keyframes slideDown {
        0% {
            transform: translateY(-100%);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .slide-down {
        animation: slideDown 0.4s cubic-bezier(.46,.03,.52,.96) forwards;
    }


.ce{text-align:center;}
.checkmark__circle{stroke-dasharray: 166;stroke-dashoffset: 166;stroke-width: 2;stroke-miterlimit: 10;stroke: #7ac142;fill: none;animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards}
.checkmark{width: 56px;height: 56px;border-radius: 50%;display: inline-block;stroke-width: 2;stroke: #fff;stroke-miterlimit: 10;box-shadow: inset 0px 0px 0px #7ac142;animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both}.checkmark__check{transform-origin: 50% 50%;stroke-dasharray: 48;stroke-dashoffset: 48;animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards}@keyframes stroke{100%{stroke-dashoffset: 0}}@keyframes scale{0%, 100%{transform: none}50%{transform: scale3d(1.1, 1.1, 1)}}@keyframes fill{100%{box-shadow: inset 0px 0px 0px 30px #7ac142}}

 

.checkmark_x {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fillx .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark_circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #c15842;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark_check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fillx {
  100% {
    box-shadow: inset 0px 0px 0px 30px #ff0000cc;
  }
}






.image-wrapper2 {
    display: block;
    margin: 0 auto 5px auto;
    max-width: 100%;
    width: 400px;
    height: auto;
}
.image-wrapper2 img {
  height: auto;
  max-width: 100%;
}
.shine {
  position: relative;
  overflow: hidden;
}
.shine::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  content: "";
  display: block;
  height: 100%;
  left: -75%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 50%;
  z-index: 2;

}
.shine:hover::before, .shine:focus::before {
  animation: shine 0.85s;
}
@keyframes shine {
  100% {
    left: 125%;
  }
}


 @media (prefers-reduced-motion: reduce) {
  .shine:hover {
    filter: none;
    transform: none;
  }
}















#calendar {
  font-family: Arial, sans-serif;
}

.day {
  display: inline-block;
  width: 40px;
  text-align: center;
  margin-bottom: 5px;
}


.responsive-image {
    display: block;
    margin: 0 auto 5px auto;
    max-width: 100%;
    width: 400px;
    height: auto;
}
.b {
  font-weight: bold;
}

/* Media query for smaller screens */
@media screen and (max-width: 1200px) {
.responsive-image, .image-wrapper2 {
  max-width: 70%;
}
}


.fR{float:right;}
.red{color:#ff0000b8;}