/*--------Index--------------*/
.HospTitle {
    font-size: 24px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}

.BookDesc {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color);
}

.DescBlock {
    background-color: var(--bgcolor);
    border-radius: 20px;
    margin-top: 10px;
    width: calc(100% / var(--cnt) - 8px);
}

.QText {
    font-weight: 600;
    font-size: 20px;
}

.EText {
    font-weight: 600;
    font-size: 18px;
    color: blue;
}

.OptionInput {
    width: calc(100% / var(--cnt) - 8px);
    margin-right: 4px;
    margin-left: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    max-width: 100% !important;
    border: 1px solid #10747e !important;
    font-weight: 600;
    font-size: 20px;
}

.Captcha-Img {
    width: calc(100% / var(--cnt) - 8px);
    cursor: pointer;
}

@media(max-width:576px) {

    .DescBlock {
        background-color: var(--bgcolor);
        border-radius: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: calc(100% - 8px);
    }

    .img-book {
        width: 100%;
    }
}

@media(min-width:576px) {

    .DescBlock {
        background-color: var(--bgcolor);
        border-radius: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: calc(100% - 8px);
    }

    .img-book {
        width: calc(50% - 8px);
    }
}

@media(min-width:768px) {

    .DescBlock {
        background-color: var(--bgcolor);
        border-radius: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: calc(100% - 8px);
    }

    .img-book {
        width: calc(50% - 8px);
    }
}

@media(min-width:992px) {

    .DescBlock {
        background-color: var(--bgcolor);
        border-radius: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 2px;
        margin-right: 2px;
        width: calc(100% / var(--cnt) - 8px);
    }

    .img-book {
        width: calc(25% - 8px);
    }
}

@media(min-width:1200px) {

    .DescBlock {
        background-color: var(--bgcolor);
        border-radius: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 2px;
        margin-right: 2px;
        width: calc(100% / var(--cnt) - 8px);
    }

    .img-book {
        width: calc(25% - 8px);
    }
}



@media(min-width:1460px) {

    .DescBlock {
        background-color: var(--bgcolor);
        border-radius: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 2px;
        margin-right: 2px;
        width: calc(100% / var(--cnt) - 8px);
    }

    .img-book {
        width: calc(25% - 8px);
    }
}

/*--------Index--------------*/

/*--------Prescription--------------*/

.pre-pt {
    font-size: 18px;
    font-weight: bold;
    margin: 2px 3px;
    color: #832e1c;
}

.pre-desc {
    font-size: 24px;
    font-weight: bold;
    margin: 2px 3px;
    color: #000000;
}

.pre-txt {
    font-size: 20px;
    font-weight: bold;
    padding-top: 0.8%;
    padding-bottom: 0.8%;
    display: contents;
    line-height: 2.5;
}

.pre-txt span {
    width: calc(100% / var(--cnt) - 8px);
    text-align: center;
}

.prx-date-block {
    width: 100%;
}

.chosenText {
    font-size: var(--size);
    font-weight: bold;
    color: var(--color);
    align-content: center;
}

.chosenBtn {
    border: 2px solid #b5412d;
    border-radius: 10px;
    background-color: transparent;
    color: #b5412d;
    font-size: 1.3rem;
}

.chosenBtn:hover {
    border: 2px solid #b5412d;
    border-radius: 10px;
    background-color: #b5412d;
    color: #fffcd1;
    font-size: 1.3rem;
}


.card-block {
    background-color: #b5412d;
    color: #ffffff;
    width: 100%;
    margin: 10px 4px;
    border-radius: 10px;
}

.block-title {
    font-size: var(--size);
    font-weight: bold;
    margin: 2px 3px;
    //width: calc(100% / var(--cnt) - 8px);
    //width: 100%;
    color: var(--color);
    text-align: center;
}

.date-Condition {
    width: calc(100% / var(--cnt) - 8px);
}

.dateBlock {
    width: calc(100% / var(--cnt) - 8px);
    margin: 4px 4px !important;
    border: solid #E7D198 2px;
    border-radius: 10px;
}

.dateBlock:hover {

    background-color:#F0E4D3
}

.date-css {
    background-color: #832e1c;
    color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    line-height: 1;
    margin: 3% 2%;
    max-width: 80px;
    width: 24%;
}

.date-css .title {
    font-size: var(--size);
    font-weight: bold;
    text-align: center;
    width: 100%;
    align-content: center;
}

.rbook-css {
    display: flex;
    flex-wrap: wrap;
    line-height: 1;
    margin: 1% 3%;
    max-width: 80px;
    width: 24%;
}

.rbook-css .desc {
    font-size: var(--size);
    font-weight: bold;
    color: var(--color);
    text-align: center;
    width: 100%;
    align-content: center;
}

.cnd-css {
    display: flex;
    flex-wrap: wrap;
    line-height: 1;
    margin: 1% 3%;
    max-width: 180px;
    width: 48%;
}

.cnd-css .desc {
    font-size: 20px;
    font-weight: 500;
    color: #6d4414;
    text-align: center;
    width: 100%;
    align-content: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.cnd-css .desc img {
    max-width: 15%;
    height: auto;
}

.date-select {
    width: 100%;
    text-align: center;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 24px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

@media(max-width:576px) {

    .pre-txt span {
        width: calc(400% / var(--cnt) - 8px);
        text-align: center;
    }

    .pre-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 1.5;
    }

    .dateBlock {
        width: calc(100%);
        margin: 4px 4px !important;
    }
}

@media(min-width:576px) {

    .pre-txt span {
        width: calc(400% / var(--cnt) - 8px);
        text-align: center;
    }

    .pre-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 1.5;
    }

    .dateBlock {
        width: calc(100%);
        margin: 4px 4px !important;
    }
}

@media(min-width:768px) {

    .pre-txt span {
        width: calc(200% / var(--cnt) - 8px);
        text-align: center;
    }

    .pre-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 2.5;
    }

    .dateBlock {
        width: calc(200% / var(--cnt) - 8px);
        margin: 4px 4px !important;
    }

    .date-css {
        background-color: #832e1c;
        color: #FFFFFF;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 3% 1%;
        max-width: 80px;
        width: 24%;
    }

    .date-css .title {
        font-size: var(--size);
        font-weight: bold;
        text-align: center;
        width: 100%;
        align-content: center;
    }

    .rbook-css {
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 1% 1%;
        max-width: 80px;
        width: 24%;
    }

    .rbook-css .desc {
        font-size: var(--size);
        font-weight: bold;
        color: var(--color);
        text-align: center;
        width: 100%;
        align-content: center;
    }

    .cnd-css {
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 1% 1%;
        max-width: 180px;
        width: 45%;
    }

    .cnd-css .desc {
        font-size: 18px;
        font-weight: 500;
        color: #6d4414;
        text-align: center;
        width: 100%;
        align-content: center;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .cnd-css .desc img {
        max-width: 15%;
        height: auto;
    }
}

@media(min-width:992px) {

    .pre-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 2.5;
    }

    .pre-txt span {
        width: calc(100% / var(--cnt) - 8px);
        text-align: center;
    }

    .pre-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 2.5;
    }

    .pre-txt span {
        width: calc(200% / var(--cnt) - 8px);
        text-align: center;
    }


    .dateBlock {
        width: calc(132% / var(--cnt) - 8px);
        margin: 4px 4px !important;
    }

    .date-css {
        background-color: #832e1c;
        color: #FFFFFF;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 3% 0%;
        max-width: 80px;
        width: 25%;
    }

    .date-css .title {
        font-size: calc(var(--size) - 3px);
        font-weight: bold;
        text-align: center;
        width: 100%;
        align-content: center;
    }

    .rbook-css {
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 1% 0%;
        max-width: 80px;
        width: 25%;
    }

    .rbook-css .desc {
        font-size: var(--size);
        font-weight: bold;
        color: var(--color);
        text-align: center;
        width: 100%;
        align-content: center;
    }

    .cnd-css {
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 1% 0%;
        max-width: 180px;
        width: 48%;
    }

    .cnd-css .desc {
        font-size: 16px;
        font-weight: 500;
        color: #6d4414;
        text-align: center;
        width: 100%;
        align-content: center;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .cnd-css .desc img {
        max-width: 15%;
        height: auto;
    }
}

@media(min-width:1200px) {

    .pre-txt {
        font-size: 16px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 2.5;
    }

    .pre-txt span {
        width: calc(100% / var(--cnt) - 8px);
        text-align: center;
    }

    .dateBlock {
        width: calc(100% / var(--cnt) - 8px);
        margin: 4px 4px !important;
    }

    .date-css {
        background-color: #832e1c;
        color: #FFFFFF;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 3% 0%;
        max-width: 80px;
        width: 25%;
    }

    .date-css .title {
        font-size: calc(var(--size) - 5px);
        font-weight: bold;
        text-align: center;
        width: 100%;
        align-content: center;
    }

    .rbook-css {
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 1% 0%;
        max-width: 80px;
        width: 25%;
    }

    .rbook-css .desc {
        font-size: calc(var(--size) - 2px);
        font-weight: bold;
        color: var(--color);
        text-align: center;
        width: 100%;
        align-content: center;
    }

    .cnd-css {
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 1% 0%;
        max-width: 180px;
        width: 48%;
    }

    .cnd-css .desc {
        font-size: 0.9em;
        font-weight: 500;
        color: #6d4414;
        text-align: center;
        width: 100%;
        align-content: center;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .cnd-css .desc img {
        max-width: 15%;
        height: auto;
    }
}

@media(min-width:1460px) {

    .pre-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 2.5;
    }

    .pre-txt span {
        width: calc(100% / var(--cnt) - 8px);
        text-align: center;
    }

    .pre-txt span .chosenDate {
        font-size: var(--size);
    }

    .dateBlock {
        width: calc(100% / var(--cnt) - 8px);
        margin: 4px 4px !important;
    }

    .date-css {
        background-color: #832e1c;
        color: #FFFFFF;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 3% 0%;
        max-width: 80px;
        width: 25%;
    }

    .date-css .title {
        font-size: calc(var(--size));
        font-weight: bold;
        text-align: center;
        width: 100%;
        align-content: center;
    }

    .rbook-css {
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 1% 0%;
        max-width: 80px;
        width: 25%;
    }

    .rbook-css .desc {
        font-size: calc(var(--size) - 0px);
        font-weight: bold;
        color: var(--color);
        text-align: center;
        width: 100%;
        align-content: center;
    }

    .cnd-css {
        display: flex;
        flex-wrap: wrap;
        line-height: 1;
        margin: 1% 0%;
        max-width: 180px;
        width: 48%;
    }

    .cnd-css .desc {
        font-size: 1.1em;
        font-weight: 500;
        color: #6d4414;
        text-align: center;
        width: 100%;
        align-content: center;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .cnd-css .desc img {
        max-width: 15%;
        height: auto;
    }
}
/*--------Prescription--------------*/

/*--------QueryBooking--------------*/

.queryTitle {
    font-size: var(--size);
    font-weight: bold;
    color: var(--color);
    align-content: center;
}

.QueryBlock {
    width: 100%;
    margin: 4px 4px !important;
    border: solid #E7D198 2px;
    border-radius: 10px;
}

.Qdate-css {
    background-color: #ed5d24;
    color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    line-height: 1;
    margin: 10px 5px;
    max-width: 100px;
    width: 24%;
}

.Qdate-css .title {
    font-size: var(--size);
    font-weight: bold;
    text-align: center;
    width: 100%;
    align-content: center;
}

.QMedNum-css {
    display: flex;
    flex-wrap: wrap;
    line-height: 1;
    margin: 10px 5px;
}

.QMedNum-css .desc {
    font-size: var(--size);
    font-weight: bold;
    color: var(--color);
    text-align: center;
    width: 100%;
    align-content: center;
}

.madeMed_img {
    max-width: 15%;
    height: auto;
}

@media(max-width:576px) {

    .queryTitle {
        font-size: 20px;
        font-weight: bold;
        color: var(--color);
        align-content: center;
    }


    .query-txt span {
        width: calc(400% / var(--cnt) - 8px);
        text-align: center;
    }

    .query-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 1.5;
    }

    .dateBlock {
        width: calc(100%);
        margin: 4px 4px !important;
    }
}

@media(min-width:576px) {

    .query-txt span {
        width: calc(400% / var(--cnt) - 8px);
        text-align: center;
    }

    .query-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 1.5;
    }
}

@media(min-width:768px) {

    .query-txt span {
        width: calc(200% / var(--cnt) - 8px);
        text-align: center;
    }

    .query-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 2.5;
    }
}

@media(min-width:992px) {

    .query-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 2.5;
    }

    .query-txt span {
        width: calc(100% / var(--cnt) - 8px);
        text-align: center;
    }

    .query-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 2.5;
    }

    .query-txt span {
        width: calc(200% / var(--cnt) - 8px);
        text-align: center;
    }
}

@media(min-width:1200px) {

    .query-txt {
        font-size: 16px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 2.5;
    }

    .query-txt span {
        width: calc(100% / var(--cnt) - 8px);
        text-align: center;
    }
}

@media(min-width:1460px) {

    .query-txt {
        font-size: 20px;
        font-weight: bold;
        padding-top: 0.8%;
        padding-bottom: 0.8%;
        display: contents;
        line-height: 2.5;
    }

    .query-txt span {
        width: calc(100% / var(--cnt) - 8px);
        text-align: center;
    }
}

/*--------QueryBooking--------------*/