h1 {font-weight: 700;font-size: 30px;width: 100%;text-align: center;}
h2 {font-size: 20px;width: 100%;text-align: center;}

.pageHolder {width: 100%;max-width: 1440px;margin:50px auto;}

.calendarWrapper {width: 100%;max-width: 900px;min-height: 500px;background: white;margin: 25px auto;border-radius: 8px;box-shadow: 0 2px 18px 0 rgba(0,0,0,0.15);}
.calendarContent {padding: 25px 50px;}
.calendarHead > input {border: 1px solid #cecece;height: 35px;border-radius: 4px;color: #00569c;font-size: 16px;padding-left: 15px;max-width:120px;font-weight: 700;cursor: pointer;}

.calendarDates {margin-top: 25px;}
.timeTableHolder {display: flex;gap: 25px;margin-top: 25px;flex-wrap: wrap;justify-content: center;}
.dayNameHolder {font-size: 16px;font-weight: 700;}
.oneTime {display: inline-block;padding: 20px 30px;border:1px solid lightgrey;border-radius: 4px;font-size: 18px;cursor: pointer;font-weight: 600;width: 105px;}
.oneTime:hover {box-shadow: 0 2px 18px 0 rgba(0,0,0,0.15);transition: .4s;}
.oneTime.taken {background: indianred;cursor: auto;}
.oneTime.taken:hover {box-shadow: none;}

.successMessage {color: forestgreen;}


@media all and (max-width: 900px) {
    .calendarWrapper {width: 95%;}

    .customInput {font-size: 16px;}
}