/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/

.btn.book.btn-with-icon.custom {
    background-color: #ffffff; /* 背景を白に */
    color: #000000; /* ボタン内のデフォルト文字を黒に */
    border: 1px solid #000000; /* 必要に応じて黒い枠線を追加 */
    padding: 10px 20px; /* ボタンの内側余白 */
    text-align: center; /* テキストを中央揃え */
    text-decoration: none; /* リンクの下線を削除 */
    display: inline-block; /* ボタンとして表示 */
    cursor: pointer; /* マウスホバー時のポインター変更 */
}

.btn.book.btn-with-icon.custom a {
    color: #000000 !important; /* リンクの文字色を黒に */
    text-decoration: none; /* リンクの下線を削除 */
    font-weight: bold; /* 必要に応じて強調 */
}

.btn.book.btn-with-icon.custom:hover {
    background-color: #f0f0f0; /* ホバー時に薄いグレーの背景 */
    color: #000000; /* 文字色はそのまま */
    border-color: #000000; /* 枠線もそのまま */
}

.btn.book.btn-with-icon.custom a:hover {
    color: #000000 !important;; /* ホバー時のリンク文字色も黒に */
    text-decoration: underline; /* 必要に応じて下線を追加 */
}

.help.help-info-block a {
    font-weight: bold;
    text-decoration: underline;
}

#sb_client_login_container {
    display: none;
}

#details .package-use-credits-msg {
    display: none;
}

.logged-out:after {
    content: "Login";
    display: block;
    /* または inline に応じて */
    font-size: 16px;
    /* 適切なフォントサイズに調整 */
    color: #000;
    /* テキストの色 */
    margin-left: -20px;
    /* アイコンとテキストの間隔を調整 */
    text-decoration: underline;
    /* テキストにアンダーラインを追加 */
}

.item-container {
    background-color: white;
}

.item-container__icon--sign-in {
    visibility: hidden;
    /* 元のアイコンを隠す */
}

#sb_booking_info .title-small {
    display: none;
}

#sb_booking_content .service-item.item .btn.select.custom a {
    font-size: 0;
    /* 元のテキストを視覚的に隠す */
    visibility: hidden;
    /* リンク自体はまだクリック可能 */
    display: inline-block;
    /* :after疑似要素のために必要 */
    width: 100%;
    /* コンテナの幅を保持 */
}

#sb_booking_content .service-item.item .btn.select.custom a:after {
    content: "See available slots";
    /* 新しいテキストを表示 */
    font-size: 16px;
    /* 新しいテキストのフォントサイズを指定 */
    visibility: visible;
    /* 新しいテキストを表示 */
    display: block;
    /* 新しいテキストをブロック要素として表示 */
}

#remind-password div.cap {
    font-size: 0;
    /* テキストを視覚的に隠す */
    color: transparent;
    /* テキストの色を透明にする */
    text-align: center;
    /* 中央揃え */
    position: relative;
}

#remind-password div.cap::after {
    content: 'Forgot password';
    font-size: 16px;
    /* 元のフォントサイズに戻す */
    color: initial;
    /* 元のテキストの色に戻す */
    position: relative;
    /* 絶対位置指定から相対位置指定に変更 */
}


.remind-pass.sb-client-remind-popup {
    text-align: center;
    /* 親要素を中央揃えに設定 */
    position: relative;
    /* 絶対位置指定の基準点を設定 */
    color: transparent;
    /* テキストの色を透明にする */
    font-size: 0px;
}

.remind-pass.sb-client-remind-popup::after {
    content: 'Forgot password';
    position: absolute;
    font-size: 14px;
    /* 元のフォントサイズに戻す */
    color: initial;
    /* 元のテキストの色に戻す */
    left: 0;
    right: 0;
    margin: auto;
    /* 水平方向の中央揃え */
    text-decoration: underline;
    /* これにより下線が追加されます */
}

@media (min-width: 768px) {
    #details .row {
        display: flex;
        flex-direction: row;
    }

    #details .row .col-sm-6:first-child {
        order: 2;
    }

    #details .row .col-sm-6:last-child {
        order: 1;
    }

}

/* スマートフォン画面用のスタイル (画面幅が768px未満の場合) */
@media (max-width: 767px) {

    #client-login .tab-pd {
        display: flex;
        flex-direction: column;
    }

    #client-login .client-login-bar {
        order: 2;
        /* 元々2番目にあった要素を1番目に移動 */
    }

    #client-login .custom-form {
        order: 1;
        /* 元々1番目にあった要素を2番目に移動 */
    }

    #client-login .row {
        display: flex;
        flex-direction: column;
    }

    /* 最初のcol-sm-6要素（サインインフォーム）を2番目に */
    #client-login .row .col-sm-6:first-child {
        order: 2;
    }

    /* 2番目のcol-sm-6要素（サインアップフォーム）を1番目に */
    #client-login .row .col-sm-6:last-child {
        order: 1;
    }

    #details .row {
        display: flex;
        flex-direction: column;
    }

    #details .row .col-sm-6:first-child {
        order: 1;
    }

    #details .row .col-sm-6:nth-child(2) {
        order: 2;
        /* 2番目のcol-sm-6要素を2番目に */
    }

    #details .row .col-sm-6:nth-child(2) .package-use-credits-msg {
        display: none;
    }

    #details .buttons-container {
        margin-top: 150px;
    }

    #sb_membership_container {
        position: relative;
        top: -250px;
        z-index: 1;
        /* 他の要素より前面に来るように調整 */
    }

    #sb_additional_fields {
        margin-top: -100px;
    }
}

#sb_additional_fields:before {
    content: "Please answer the questions below so the instructor can tailor the session for you.";
    display: block;
    /* もしブロックレベル要素として表示したい場合 */
    /* その他のスタイリングプロパティもここに追加できます */
}


#client-login .border {
    display: none;
}

.form-group.phone {
    display: none;
}

#events h3 {
    /* add your css rule here */
}


#events p.duration,
#events div.duration {
    /* add your css rule here */
}


#events p.description,
#events div.description {
    /* add your css rule here */
}


#events .selectedEvent {
    /* add your css rule here */
}


#events input.reserve_time_btn {
    /* add your css rule here */
}


#events input.select_another_btn {
    /* add your css rule here */
}


#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
    /* add your css rule here */
}


#eventForm #save_button {
    /* add your css rule here */
}


div.ui-widget-content {
    /* add your css rule here */
}


div.ui-widget-header {
    /* add your css rule here */
}


#timeline-container table.timeline {
    /* add your css rule here */
}


.timeline td.not_worked_time {
    /* add your css rule here */
}


.timeline td.free_time {
    /* add your css rule here */
}


.timeline td.selected_time {
    /* add your css rule here */
}


.timeline td.reserved_time {
    /* add your css rule here */
}


div#loading {
    /* add your css rule here */
}


#start_date-block-container .zend_form dt,
start_date-block-container .zend_form dt b,
start_date-block-container .zend_form dd label {
    /* add your css rule here */
}/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/


.help.help-info-block a {
    font-weight: bold;
    text-decoration: underline;
}

#sb_client_login_container {
    display: none;
}

#details .package-use-credits-msg {
    display: none;
}

.logged-out:after {
    content: "Login";
    display: block;
    /* または inline に応じて */
    font-size: 16px;
    /* 適切なフォントサイズに調整 */
    color: #000;
    /* テキストの色 */
    margin-left: -20px;
    /* アイコンとテキストの間隔を調整 */
    text-decoration: underline;
    /* テキストにアンダーラインを追加 */
}

.item-container {
    background-color: white;
}

.item-container__icon--sign-in {
    visibility: hidden;
    /* 元のアイコンを隠す */
}

#sb_booking_info .title-small {
    display: none;
}

#sb_booking_content .service-item.item .btn.select.custom a {
    font-size: 0;
    /* 元のテキストを視覚的に隠す */
    visibility: hidden;
    /* リンク自体はまだクリック可能 */
    display: inline-block;
    /* :after疑似要素のために必要 */
    width: 100%;
    /* コンテナの幅を保持 */
}

#sb_booking_content .service-item.item .btn.select.custom a:after {
    content: "See available slots";
    /* 新しいテキストを表示 */
    font-size: 16px;
    /* 新しいテキストのフォントサイズを指定 */
    visibility: visible;
    /* 新しいテキストを表示 */
    display: block;
    /* 新しいテキストをブロック要素として表示 */
}

#remind-password div.cap {
    font-size: 0;
    /* テキストを視覚的に隠す */
    color: transparent;
    /* テキストの色を透明にする */
    text-align: center;
    /* 中央揃え */
    position: relative;
}

#remind-password div.cap::after {
    content: 'Forgot password';
    font-size: 16px;
    /* 元のフォントサイズに戻す */
    color: initial;
    /* 元のテキストの色に戻す */
    position: relative;
    /* 絶対位置指定から相対位置指定に変更 */
}


.remind-pass.sb-client-remind-popup {
    text-align: center;
    /* 親要素を中央揃えに設定 */
    position: relative;
    /* 絶対位置指定の基準点を設定 */
    color: transparent;
    /* テキストの色を透明にする */
    font-size: 0px;
}

.remind-pass.sb-client-remind-popup::after {
    content: 'Forgot password';
    position: absolute;
    font-size: 14px;
    /* 元のフォントサイズに戻す */
    color: initial;
    /* 元のテキストの色に戻す */
    left: 0;
    right: 0;
    margin: auto;
    /* 水平方向の中央揃え */
    text-decoration: underline;
    /* これにより下線が追加されます */
}

@media (min-width: 768px) {
    #details .row {
        display: flex;
        flex-direction: row;
    }

    #details .row .col-sm-6:first-child {
        order: 2;
    }

    #details .row .col-sm-6:last-child {
        order: 1;
    }

}

/* スマートフォン画面用のスタイル (画面幅が768px未満の場合) */
@media (max-width: 767px) {

    #client-login .tab-pd {
        display: flex;
        flex-direction: column;
    }

    #client-login .client-login-bar {
        order: 2;
        /* 元々2番目にあった要素を1番目に移動 */
    }

    #client-login .custom-form {
        order: 1;
        /* 元々1番目にあった要素を2番目に移動 */
    }

    #client-login .row {
        display: flex;
        flex-direction: column;
    }

    /* 最初のcol-sm-6要素（サインインフォーム）を2番目に */
    #client-login .row .col-sm-6:first-child {
        order: 2;
    }

    /* 2番目のcol-sm-6要素（サインアップフォーム）を1番目に */
    #client-login .row .col-sm-6:last-child {
        order: 1;
    }

    #details .row {
        display: flex;
        flex-direction: column;
    }

    #details .row .col-sm-6:first-child {
        order: 1;
    }

    #details .row .col-sm-6:nth-child(2) {
        order: 2;
        /* 2番目のcol-sm-6要素を2番目に */
    }

    #details .row .col-sm-6:nth-child(2) .package-use-credits-msg {
        display: none;
    }

    #details .buttons-container {
        margin-top: 150px;
    }

    #sb_membership_container {
        position: relative;
        top: -250px;
        z-index: 1;
        /* 他の要素より前面に来るように調整 */
    }

    #sb_additional_fields {
        margin-top: -100px;
    }
}

#sb_additional_fields:before {
    content: "Please answer the questions below so the instructor can tailor the session for you.";
    display: block;
    /* もしブロックレベル要素として表示したい場合 */
    /* その他のスタイリングプロパティもここに追加できます */
}


#client-login .border {
    display: none;
}

.form-group.phone {
    display: none;
}

#events h3 {
    /* add your css rule here */
}


#events p.duration,
#events div.duration {
    /* add your css rule here */
}


#events p.description,
#events div.description {
    /* add your css rule here */
}


#events .selectedEvent {
    /* add your css rule here */
}


#events input.reserve_time_btn {
    /* add your css rule here */
}


#events input.select_another_btn {
    /* add your css rule here */
}


#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
    /* add your css rule here */
}


#eventForm #save_button {
    /* add your css rule here */
}


div.ui-widget-content {
    /* add your css rule here */
}


div.ui-widget-header {
    /* add your css rule here */
}


#timeline-container table.timeline {
    /* add your css rule here */
}


.timeline td.not_worked_time {
    /* add your css rule here */
}


.timeline td.free_time {
    /* add your css rule here */
}


.timeline td.selected_time {
    /* add your css rule here */
}


.timeline td.reserved_time {
    /* add your css rule here */
}


div#loading {
    /* add your css rule here */
}


#start_date-block-container .zend_form dt,
start_date-block-container .zend_form dt b,
start_date-block-container .zend_form dd label {
    /* add your css rule here */
}