/* ============================================================
   member  —  會員中心(profile/教練行事曆/搜尋/fancybox)   〔單元〕
   ============================================================ */


.phone-verified-alert-block .input-code {
    padding: 10px;
    width: 100%;
    margin: 10px 0;
    border: 1px solid #d9d9d9;
}

.check-verify-code {
    border-radius: 5px;
    border: none;
    background-color: #b95755;
    color: #fff;
    padding: 10px;
    font-size: 15px;
    width: 33%;
}

.send-verify-code {
    border-radius: 5px;
    border: none;
    background-color: #8b8b8b;
    color: #fff;
    font-size: 15px;
    width: 65%;
    margin-right: 3px;
    padding: 10px 0;
    margin: auto;
}

.send-verify-code:disabled {
    background-color: rgba(130, 130, 130, 0.5);
    color: rgba(130, 130, 130, 0.5);
}


.profile-content {
    margin: 40px auto;
    max-width: 1450px;
}

.profile-content th,
.profile-content td {
    text-align: center;
    vertical-align: middle;
}

.profile-content .form-row {
    margin: 8px 0px;
}

.alert-message {
    font-size: 15px;
    color: rgb(211, 28, 49);
    font-weight: bold;
}

table,
td,
tr,
th {
    font-size: 15px;
}

.rwd-table th,
td {
    text-align: center;
}

.phone_verify .row {
    margin: 0px;
}

#send {
    margin: 20px 0px;
}

.license {
    width: fit-content;
    padding: 5px 10px;
    float: left;
    background-color: #ddd;
    margin: 5px;
    border-radius: 35px;
}

.edit-btn {
    width: 150px;
}

.profile-left-block {
    flex: 17%;
    max-width: 17%;
    padding-right: 15px;
    padding-left: 15px;
}

.profile-right-block {
    flex: 80%;
    max-width: 80%;
    padding-right: 15px;
    padding-left: 15px;
}

.send_float {
    display: none;
}

.btn-float {
    background: #9f353a;
    color: #fff !important;
    padding: 0.375rem 0.5rem;
}

.greetings-block p {
    font-size: 16px;
    font-weight: bold;
    background-color: #fde7e9;
    padding: 10px;
}

@media screen and (max-width: 451px) {
    #send-verify-code-phone {
        margin-top: 10px;
    }

    #send-verify-code-email {
        margin-top: 10px;
    }

    .rwd-table th {
        display: none;
    }

    .rwd-table td {
        display: block;
        border: none;
    }

    .rwd-table td:before {
        content: attr(data-th) " ";
        float: left;
        font-weight: bold;
    }

    .p-l-15 {
        padding-left: 15px;
    }

    #send_float {
        position: fixed;
        bottom: 64px;
        left: 0;
        border-radius: 0;
    }

    .greetings-block p {
        font-size: 12px;
        padding: 1px 5px;
    }
}

.quick-login-btn-block {
    width: 65%;
    margin: auto;
}

.quick-login-btn-block .login-button {
    width: 32%;
}

@media screen and (max-width: 1024px) {
    .quick-login-btn-block {
        width: 67%;
    }

    .quick-login-btn-block .login-button {
        width: 30%;
    }
}

@media screen and (max-width: 450px) {
    .quick-login-btn-block {
        width: 100%;
    }

    .swal2-content {
        padding: 0 1.2em !important;
    }
}

@media screen and (max-width: 320px) {
    .swal2-content {
        padding: 0 !important;
    }
}



/* 選單 */
.profile-left-block,
.profile-right-block {
    margin-top: 20px;
}

.profile-right-block form {
    font-size: 16px;
    margin-top: 20px;
}

.profile-right-block .label-title {
    font-weight: bold;
}

#left-menu-block-pc .profile-left-block {
    padding: 10px 0;
}

#left-menu-block-phone {
    display: none;
}

#left-menu-block-pc {
    background: #f7f7f7;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}

#left-menu-block-pc .title {
    padding: 5px 0;
    font-size: 17px;
    text-align: center;
    font-weight: bold;
}

#left-menu-block-pc .nav-link {
    color: #444;
    padding: unset;
    padding-left: 15px;
    text-align: left;
}

#left-menu-block-pc .nav-item {
    padding: 0.5rem 1rem;
}

.menu-active {
    color: #9f353a !important;
}

#left-menu-block-pc .menu-active {
    border-left: 3px solid #bd454b;
}

.profile-left-block em {
    border-radius: 50%;
    display: inline-block;
    background: #bd454b;
    color: #fff;
    line-height: 16px;
    width: 16px;
    text-align: center;
    font-size: 12px;
}

.now-time {
    text-align: center;
}


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

    .profile-left-block,
    .profile-right-block {
        margin-top: 0px;
    }

    #left-menu-block-pc {
        display: none;
    }

    #left-menu-block-phone {
        display: block;
    }

    #left-menu-block-phone select {
        width: 100%;
        padding: 10px;
    }

    .profile-left-block {
        max-width: 100%;
        position: fixed;
        top: 48px;
        z-index: 4;
        background-color: #4d4d4d;
    }

    .profile-right-block {
        max-width: 100%;
        flex: auto;
        margin-top: 60px;
    }

    /* new */
    .head-person-fix {
        position: fixed;
        width: 100%;
        z-index: 1001;
        top: 50px;
        left: 0px;
    }

    .head-person-fix li {
        float: left;
        width: 33.33%;
    }

    .head-person-fix ul {
        height: 31px;
        overflow: hidden;
        transition: all 0.8s;
        background-color: rgba(51, 51, 51, 0.8);
    }

    .head-person-fix li a {
        display: block;
        color: #CCCCCC;
        font-size: 13px;
        font-weight: bold;
        line-height: 18px;
        padding: 6px 0px;
        text-align: center;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background: rgba(51, 51, 51, 0.8);
    }

    .head-person-fix li a.not-complete {
        background-color: rgba(144, 8, 6, 0.8);
    }

    .showdown {
        display: block;
        background: rgba(0, 0, 0, 0.9);
        ;
        line-height: 25px;
        color: #fff !important;
        font-size: 12px;
        text-align: center;
    }

    .showdown i {
        margin-left: 5px;
    }

    .head-person-fix .ul-hight {
        height: auto;
    }

    .now-time {
        display: none;
    }

}

/* 選單 END */

/* 教練行事曆 */
.fancybox-is-open .fancybox-bg {
    opacity: .4;
}

.fancybox-can-swipe .fancybox-content,
.fancybox-can-pan .fancybox-content {
    padding: 1.25em;
    border-radius: .3125em;
}

.fancybox-content .fancy-title {
    font-weight: 600;
    color: #595959;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.fancybox-content .fancy-btn {
    outline: none;
    box-shadow: none;
    border-radius: .25em;
    font-size: 1.0625em;
    margin: .3125em;
    padding: .625em 2em;
    font-weight: 500;
    border: none;
    color: #fff;
}

.fancybox-content .del-class {
    background-color: rgb(185, 87, 85);
}

.fancybox-content .select-user {
    background-color: #444444;
}

.fancybox-content .fancy-booking-text {
    color: #fff;
    text-align: center;
    font-size: 15px;
    padding: 5px 0;
}

.fancybox-content .booking-time {
    text-align: center;
    margin-top: 5px;
}

.fancybox-content .booking-time span {
    font-size: 14px;
    margin-right: 5px;
}

.fancybox-content .booking-time .booking_time_up,
.booking-time .booking_time_down {
    color: blue;
}

.fancybox-content .fancy-booking-text.completed {
    background-color: #2e8b60;
}

.fancybox-content .fancy-booking-text.punchnotyet {
    background-color: #ff7600;
}

.fancybox-content .fancy-booking-text.booked {
    background-color: #e1e1e1;
    color: #999;
}

#calendar .fc-more {
    display: block;
    background-color: rgb(58, 114, 167);
    color: #fff;
    line-height: 40px;
    border-radius: 3px;
}

.booking .fc-content .fa-times {
    display: none;
}

.coach-calendar .explanation-btn {
    border: 1px #444 solid;
    background: none;
    border-radius: 4px;
    font-size: 12px;
}

.explanation-block-phone {
    display: none;
}

.explanation-content {
    display: none;
}

.checked {
    background-color: #444444 !important;
}

.explanation-left-block {
    width: 60%;
    float: left;
}

.color-icon {
    border: 1px #ddd solid;
    display: inline-block;
    padding: 5px 15px;
    margin-bottom: 10px;
    margin-right: 10px;
    font-size: 13px;
}

.color-icon li {
    float: left;
    margin-right: 8px;
}

.color-icon li span {
    width: 10px;
    height: 10px;
    line-height: 10px;
    display: inline-block;
    margin-right: 5px;
    margin-right: 3px;
}

.color-icon .fc-event {
    display: inline-block !important;
}

.analysis-block {
    display: inline-block;
    border: 1px #ddd solid;
    padding: 5px 15px;
    line-height: 28px;
    float: left;
}

.analysis-block p {
    width: 100%;
    clear: both;
}

.analysis-block input {
    height: 28px;
    margin-right: 5px;
    border-radius: 5px;
    border: 1px #afacac solid;
}

.analysis-block button {
    background-color: #444444;
    color: #fff;
    padding: 0 10px;
    font-size: 13px;
}

.analysis-block .submit-button {
    text-align: right;
}

.analysis-block .submit-button #search {
    background-color: #2d9559;
    color: #fff;
}

.analysis-block .submit-button #clearDate {
    background-color: #9f353a;
    color: #fff;
}

.analysis-block label {
    float: left;
    font-weight: bold;
    margin-right: 5px;
    margin-bottom: unset;
}

.analysis-block label .analysis-box {
    float: left;
}

.analysis-block .analysis-box ul {
    display: flow-root;
}

.analysis-block .analysis-box label {
    line-height: 20px;
}

.analysis-block .analysis-box li {
    width: 34%;
    float: left;
    font-size: 13px;
    line-height: 20px;
}

.profile-right-block .coach-calendar #calendar {
    margin-top: unset;
}

.coach-calendar .operating-block {
    display: inline-block;
    width: 65%;
}

.coach-calendar .operating-block .set-class {
    width: 33%;
    float: left;
    text-align: left;
}

.coach-calendar .operating-block .choose-class-operating {
    width: 67%;
    float: left;
    text-align: left;
}

.coach-calendar .operating-block button {
    display: inline-block;
    border: 0px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    height: 36px;
}

.coach-calendar .operating-block .set-class-btn {
    background-color: #315481;
    color: #fff;
    width: 48%;
}

.coach-calendar .operating-block .set-class-btn:hover {
    opacity: 0.8;
}

.coach-calendar .operating-block .choose-class-btn {
    background-color: #f78849;
    color: #fff;
    width: 32%;
}

.coach-calendar .operating-block .choose-class-btn:hover {
    opacity: 0.8;
}

.coach-calendar .unbooking .fc-content {
    position: unset !important;
}

.coach-calendar .unbooking .fc-content .fa-times {
    top: 0 !important;
}

.coach-calendar .fc-content {
    color: #fff;
}

.coach-calendar .unbooking {
    background-color: rgb(172, 172, 172);
}

.coach-calendar .rolebooking {
    background-color: #247BA0 !important;
}

.coach-calendar .checked {
    background-color: #eb5050 !important;
}

.coach-calendar .booked {
    background-color: #717271 !important;
}

.coach-calendar .setuserclass {
    background-color: #ffc400 !important;
    color: #444 !important;
}

.coach-calendar .setuserclass .fc-content {
    color: #444 !important;
}

.coach-calendar .overtime {
    background-color: #e6e3e3 !important;
    color: #ccc !important;
}

.coach-calendar .completed {
    background-color: #36ad71 !important;
}

.coach-calendar .punchnotyet {
    background-color: #ff8800 !important;
}

.coach-calendar .editclass {
    background-color: #8554b3 !important;
}

.course-type-item {
    display: inline-block;
}

.course-type-item .course-name {
    width: 30%;
    display: inline-block;
    float: left;
    text-align: right;
    padding-right: 8px;
}

.course-type-item .time-option {
    float: left;
}

@media screen and (max-width: 1024px) {
    .coach-calendar .operating-block .set-class {
        width: 50%;
    }

    .explanation-left-block {
        width: 44%;
    }
}

@media screen and (max-width: 770px) {
    .explanation-left-block {
        width: 40%;
    }

    .profile-right-block .card-body {
        padding: 10px;
    }

    .open-class-block {
        padding-left: unset;
    }

    .course-type-item {
        padding: unset;
    }

    .course-type-item .course-name {
        width: 40%;
    }
}

@media screen and (max-width: 450px) {
    .fc-center {
        display: none;
    }

    .fc-toolbar {
        display: block !important;
    }

    .explanation-block-phone {
        display: inline-block;
    }

    .explanation-block-pc {
        display: none;
    }

    .profile-right-block #calendar td,
    .profile-right-block #calendar th {
        font-size: 12px;
    }

    .profile-right-block #calendar .fc-more {
        line-height: 17px;
        height: 53px;
    }

    .profile-right-block .card {
        border: unset;
    }

    .profile-right-block .card-body {
        padding: 0px;
    }

    .profile-right-block .fc-time-grid .fc-slats td {
        height: 49px;
    }

    /* .profile-right-block .fc-event{height: 48px;} */
    .profile-right-block .fc-event-container .long-text {
        line-height: 13px !important;
        padding: 0px;
    }

    .profile-right-block #calendar .fa-times {
        -webkit-transform: scale(0.5);
    }

    .color-icon,
    .analysis-box {
        width: 100%;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .analysis-box {
        margin-right: 0px;
    }

    .color-icon p,
    .analysis-box p {
        font-size: 12px;
        float: left;
        margin-left: 10px;
    }

    .analysis-box-phone {
        margin-top: 10px;
    }

    #coach-calendar .coach-calendar-s-time {
        background-color: #fff !important;
    }

    .explanation-content div {
        width: 100%;
        padding: unset;
        display: inline-block;
        margin: unset;
        font-size: 12px;
        padding: 0 5px;
    }

    .coach-calendar .operating-block {
        width: 100%;
    }

    .coach-calendar .operating-block .set-class {
        width: 100%;
        text-align: center;
    }

    .coach-calendar .operating-block .choose-class-operating {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .coach-calendar .fc-content .fa-times {
        right: -5px;
    }

    .analysis-block {
        margin-top: 10px;
    }

    .analysis-block label {
        width: 100%;
        margin-top: 5px;
    }

    .analysis-block button {
        padding: 0 5px;
    }

    .analysis-block .analysis-box ul {
        display: block;
    }

}

@media screen and (max-width: 350px) {
    .analysis-block input[type=date] {
        width: 48%;
        float: left;
    }

    .analysis-block button {
        padding: 0 4px;
    }
}

/* 社群管理 */
#videoform {
    margin-top: 20px;
}

.form-check-inline {
    display: inline-block;
}

.form-check-label {
    margin-left: 10px;
    font-weight: bold;
}

.form-group {
    margin-top: 20px;
}

/* 教練新增文章 */
.upload-img img {
    width: 100%;
}

/* 搜尋區塊 */
.search-block {
    width: 100%;
    background-color: #eee;
    padding: 10px;
    border: 1px #d4d2d2 solid;
    border-radius: 5px;
}

.search-text {
    font-size: 17px;
    font-weight: bold;
    margin: 10px;
    margin: 2px 10px;
}

.booking-search-input {
    width: 24% !important;
}

.search-block .search-input {
    width: 32%;
    float: left;
    margin: 2px;
    margin-bottom: 5px;
}

.search-block .search-datetime {
    width: 38%;
    float: left;
    margin: 2px;
}

.search-block .search-datetime .input-group {
    width: 100%;
}

.search-calendar-datetime {
    width: 100%;
    margin: 15px 0px;
}

.search-btn {
    background-color: #5d5d5d;
    color: #fff;
    border-radius: 40px;
    margin-left: 10px;
    padding: 2px 15px;
}

.user-cancel-list-block .search-block .search-input {
    width: 24%;
}


@media screen and (max-width: 1024px) {
    .search-block .search-datetime {
        width: 43%;
    }
}

@media screen and (max-width: 450px) {
    .fix-search-block-btn {
        line-height: 15px;
        font-weight: bold;
        display: block !important;
        width: 25px;
        color: #fff !important;
        font-size: 12px;
        position: fixed;
        right: 0;
        top: 300px;
        background: #333333;
        padding: 5px 0px;
        text-align: center;
        border: 1px solid #fff;
        z-index: 2;
        opacity: 0.8;
    }

    .search-block {
        display: none;
    }

    .search-block .search-input,
    .search-block .search-datetime {
        width: 100%;
    }

    .search-btn {
        margin-left: 0px;
        margin-top: 10px;
        width: 49%;
        padding: unset;
        font-size: 13px;
    }

    .search-calendar-datetime a {
        font-size: 14px;
    }

    .booking-search-input {
        width: 48% !important;
    }

}

@media screen and (max-width: 365px) {
    .search-calendar-datetime i {
        width: 100%;
    }

    .search-calendar-datetime a {
        font-size: 11px;
        width: 32%;
        padding: 3px 6px;
    }
}

/* 搜尋區塊 END */