/* ============================================================
   web-course-mgmt  —  我的課程管理   〔積木說明〕
   上課劵、簽到/評分、課程卡片、請假管理(.class-ticket-*/.course-block-*/請假)
   （由 all.css 拆分；純樣式區塊，改這裡不影響其他積木）
   ============================================================ */

/* 上課劵管理 */
.class-ticket-title {
    font-size: 20px;
    background-color: #ddd;
    padding: 5px 10px;
    font-weight: bold;
    margin: 10px 0;
    cursor: pointer;
}

.class-ticket-title span {
    float: right;
}

/* .class-ticket-item{padding: 5px 10px;} */
.class-ticket-item .coach-name {
    padding: 10px;
    background-color: #eee;
    color: #444;
}

.class-ticket-item .coach-name img {
    width: 55px;
}

.class-ticket-item .coach-name p {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
}

.class-ticket-item a {
    color: #3490dc;
}

.buy-items {
    font-size: 15px;
    background-color: #ddd;
    padding: 5px 10px;
    font-weight: bold;
    margin: 10px 0;
    cursor: pointer;
}

.use-over {
    opacity: 0.5;
}

.buy-items .time {
    float: right;
    color: rgb(180, 180, 180);
}

.buy-items p {
    display: inline-block;
}

.buy-items .class_time {
    color: rgb(22, 78, 233);
}

.user-use-list {
    display: none;
}

.ticket-block .search-input {
    font-size: 15px;
}

.ticket-block .status {
    width: 30px;
    height: 15px;
    vertical-align: middle;
}

.ticket-block .user-name {
    font-size: 20px;
    font-weight: bold;
}

.blue {
    color: blue
}

@media screen and (max-width: 450px) {
    .class-ticket-item {
        padding: 0px;
    }

    .class-ticket-title {
        font-size: 16px;
    }

    .user-use-list table,
    td,
    tr,
    th {
        font-size: 14px;
    }

    .buy-items {
        font-size: 12px;
    }
}

/* 上課劵管理 END */

/* 課程管理 */
.qrtimes-block {
    text-align: center;
    color: #9f353a;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    display: inline-block;
}

.edittime-block h2 {
    width: 100%;
    font-size: 20px;
    text-align: center;
    margin: 9px 0px;
}

.edittime-block p {
    width: 100%;
    font-size: 16px;
    margin: 5px 0px;
    text-align: left;
}

.course-block-pc .smail-text {
    font-size: 14px;
}

.course-block-pc .table td,
.course-block-pc .table th {
    padding: .75rem .35rem;
}

.star-score-comment {
    margin-top: 25px;
    font-size: 15px;
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.star-score-comment .title {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
}

#qrcode-button {
    display: none;
}

.signature-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100000;
    display: none;
}

.signature-bg #close-btn {
    color: #fff;
    font-size: 40px;
    position: absolute;
    top: 5%;
    right: 5%;
    cursor: pointer;
}

.signature-container {
    position: fixed;
    left: 16%;
    top: 18%;
    z-index: 100000;
    width: 70%;
    display: none;
}

.signature-container button {
    width: 42%;
    float: left;
    margin: 0 50px;
}

.signature-container #save {
    background-color: #9f353a;
}

.signature-container #clear {
    background-color: #222222;
    margin: unset;
    color: #fff;
}

.signature-container {
    height: 65%;
}

#signature {
    height: 100%;
}

#signature canvas {
    height: 100% !important;
}

#signatureparent {
    height: 100%;
}

.qrcode-block {
    text-align: center;
}

.booking-sign-block {
    width: 100%;
    margin-top: 25px;
}

.booking-sign-block button {
    background-color: #2085bc;
    color: #fff;
    width: 100%;
}

.booking-sign-block .booking-button {
    width: 47%;
    float: left;
    margin: 0 5px;
}

#submit-booking-sign {
    display: none;
}

/* .booking-sign-block .autograph{width: 100%;max-width: 500px;} */
/* .booking-sign-block .autograph img{width: 100%;} */
#submit-booking-sign {
    background-color: #9f353a;
}

.operating-badge {
    font-weight: bold;
    font-size: 14px;
    border-radius: unset;
    padding: unset;
}


@media screen and (max-width: 1024px) {
    .signature-container {
        width: 90%;
        left: 6%;
    }
}

@media screen and (max-width: 450px) {
    .signature-bg #close-btn {
        font-size: 30px;
        top: 1%;
    }

    .signature-container {
        top: 8%;
    }

    .signature-container button {
        margin: 0 20px;
    }

    .signature-container {
        height: 80%;
    }

    #signature canvas {
        height: 95% !important;
    }
}

@media screen and (max-width: 320px) {
    .booking-sign-block .booking-button {
        width: 46%;
        padding: 5px;
    }

    #signature canvas {
        height: 93% !important;
    }
}

/* 課程管理 END*/

/* 課程管理手機版 */
.course-block-phone {
    display: none;
}

.course-block-title p,
.course-block-item-information p {
    font-size: 14px;
    display: inline-block;
    padding: 10px;
    width: 22.2%;
    text-align: center;
    vertical-align: middle;
}

.course-block-title p {
    background-color: #5d5d5d;
    color: #fff;
}

.course-block-item-information .operating {
    width: 100%;
}

.course-block-item-btn {
    border-bottom: solid 1px #d4d4d4;
    height: 39px;
    background-color: #ebecec;
    color: #4d4d4d;
    font-size: 14px;
    text-align: center;
    line-height: 39px;
    font-weight: bold;
}

.course-block-item-btn i {
    color: #4d4d4d;
    margin-left: 10px;
}

.course-block-detail {
    background-color: #f1f2f4;
}

.course-block-detail div {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.course-block-detail .detail-title {
    width: 48%;
    text-align: right;
    margin-right: 20px;
}

.course-block-detail span {
    display: block;
    float: left;
    text-align: left;
    padding: 10px 0px;
    font-size: 13px;
    color: #5d5d5d;
}

.course-block-detail div a {
    margin: 7px 0px;
}

.operating-block {
    padding: 10px 0px;
    text-align: center;
}

.review-btn-groups {
    display: inline-block;
}

.review-btn {
    width: 74px;
    border: none;
    border-radius: 2rem;
    display: block;
    float: left;
}

.review-btn,
.review-btn a {
    color: #fff;
    margin-top: 3px;
}

.review-yes {
    background-color: #398e5f;
    margin-right: 5px;
}

.review-no {
    background-color: #9f353a;
}

.course-block-phone button {
    margin: auto;
}

.course-block-phone .review-btn-groups {
    width: 100%;
    display: flex;
}

.course-block-phone .review-btn {
    width: 70px;
}

.course-block-phone .review-yes {
    margin-left: 24px;
}

.course-block-phone .course-block-item {
    box-shadow: 1px 0px 5px 1px #d4d4d4;
    margin-bottom: 10px;
}

.change-review-btn-groups .review-yes {
    margin: unset;
}


.class-time {
    width: 32.3% !important;
}

.choose-course-block #makeuptime {
    background-color: #fff !important;
}

@media screen and (max-width: 770px) {
    .course-block-pc {
        display: none;
    }

    .course-block-phone {
        display: block !important;
    }

    .course-block-item {
        box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.3);
        margin-top: 8px;
    }

    .class-time {
        width: 32% !important;
    }
}

@media screen and (max-width: 450px) {

    .course-block-title p,
    .course-block-item-information p {
        font-size: 12px;
        width: 21.2%;
    }
}

@media screen and (max-width: 320px) {

    .course-block-title p,
    .course-block-item-information p {
        width: 19.75%;
        padding: 10px 4px;
        font-size: 12px;
    }

    .class-time {
        width: 37% !important;
    }
}

/* 課程管理按鈕們 */
.operating-btn {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    border: 0px;
    border-radius: 26px;
    color: #fff;
    cursor: pointer;
    padding: 0px 6px;
    font-size: 14px;
}

.operating-btn:hover {
    color: #fff;
}

.operating-btn i {
    margin-right: 6px;
}

.punch-btn {
    background-color: #2085bc;
}

.make-up-btn {
    background-color: #ffa300;
    margin: 0px !important;
}

.noshow-btn {
    background-color: #db6646;
}

.modify-btn {
    background-color: #3b9363;
}

.check-btn {
    background-color: #9f353a;
}

.score-btn {
    background-color: #f5e021;
    color: #4e4040;
}

/* 課程管理按鈕們 END */


/* 請假管理 */
.hint-word {
    color: #b1263b;
    font-weight: bold;
}

.profile-content {
    font-size: 14px;
}

.class-info {
    background-color: #eee;
    padding: 10px;
    border-radius: 5px;
}

.class-info p {
    margin-left: 10px;
}

.leave-status p {
    padding: 10px;
    margin: 10px 0px;
    color: #fff;
}

.leave-status .notyet {
    background-color: rgb(128, 127, 127);
}

.leave-status .success {
    background-color: rgb(31, 148, 89);
}

.leave-status .reject {
    background-color: rgb(255, 135, 36);
}

.return-button {
    float: right;
    margin-top: 5px;
    border-radius: 2rem;
}

.leave-reason {
    max-width: 300px;
    font-size: 14px;
    text-align: justify !important;
}

.leave-time {
    max-width: 100px;
    font-size: 14px;
}

.show-proof-button {
    font-size: 12px;
    padding: unset;
    display: block;
    margin: auto;
}

.show-proof-button:hover {
    color: #292524;
}

.show-proof {
    max-width: 80%;
    text-align: center;
}

.show-proof img {
    max-width: 80%;
}

@media (max-width: 768px) {
    .leave-reason {
        max-width: unset;
        text-align: center !important;
    }

    .leave-time {
        max-width: unset;
    }

    .show-proof {
        width: 100%;
    }

    .show-proof img {
        max-width: 90%;
    }

}


.return-button {
    float: right;
    margin-top: 5px;
    border-radius: 2rem;
}

/* 請假管理 END */