body {
    background: #C39143;
    color: #000000;
    text-align: center;
    padding: 20px;
}

body p {
    font-size: 20px;
}

.margin-top-bot-10 {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}

.mg-bt-10 {
    margin-bottom: 20px;
}

.timer_text {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

.body1 {
    padding: 20px;
}
.body1 .input-phone-label,.main-content .input-phone-label {
    text-align: left!important;
    margin-bottom: 0px;
    font-size: 24px;
    font-family: 'Roboto', 'Noto', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    font-weight: var(--font-weight--large);
    margin: 0.6em 0;
    padding: 0;
}

/* h1 */
.main-title {
    font-size: 28px;
    font-weight: 500;
}

.input-phone {
    width: 98%;
    height: 40px;
    font-size: 20px;
}

.login-btn {
    background-color: #330000;
    width: 100%;
    font-size: 24px;
    padding: 14px 0;
}

.back-btn {
    background-color: #C39143 !important;
    width: 100%;
    font-size: 24px;
    padding: 14px 0;
}

.toolbar {
    padding-top: 0!important;
    background-color: #C39143;
}
.custom-toolbar {
    margin-bottom: 10px;
}

.custom-toolbar .toolbar__title {
    color: #fff;
    font-weight: bold;
}
.custom-toolbar .left, .custom-toolbar .center, .custom-toolbar .right {
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex: 1; */
}

.main-content {
    margin-top: 50px;
}
.main-content p {
    font-size: 18px;
    color: #333;
    margin: 10px 0;
}

.terms-input,.privacy-input {
    width: 100%;
    height: 90px;
    font-size: 12px!important;
}

.check {
    margin-bottom: 10px;
}
.check-lbl {
    font-size: 16px;
    text-align: left;
}

.input-radio {
    text-align: left;
}

.radio-btn {
    transform: scale(1.5);
    margin-right: 0.5em;
    margin-left: 10px;
}

.error-message {
    color: red;
    font-size: 0.8rem;
    margin-top: 5px;
  }

.progress-circular {
    display: block; /* Ensures the loader doesn't break layout */
    margin: 10px auto; /* Centers the loader horizontally */
}

@media (min-width: 768px) {
    .body1 {
      max-width: 500px;
      margin: auto;
      padding: 40px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  
    .input-phone {
      width: 100%;
    }
  
    .login-btn {
      padding: 15px 30px;
      font-size: 18px;
    }
 }
.page__background {
    background-color: #C39143 !important;
}

.bottom-bar.customer {
    background-color: #330000!important;
    height: 80px;
    position: fixed !important;
    bottom: 0;
    overflow-x: auto;
    
}
.therapist_date_tab .separate .button--quiet {
    color: #000!important;
}
.ons-icon {
    font-size: 28px!important;
}
.customer .bottom-toolbar__label {
    font-size: 10px;
    line-height: 1;
	color:#FFFFFF;
}
.customer .bottom-toolbar__content {
    margin-top: 10px!important;
}
.tab-btn {
    width: 50%;
    color: #000000!important;
}
#active {
    background-color: #C39143;
    font-size: 20px;
    border: solid #330000;
    border-bottom: none;
    border-radius: 0%;
}
#passive {
    background-color: #7a5c2a;
    font-size: 20px;
    border-bottom: solid #330000;
    border-radius: 0%;
}
.cust-main-content {
    padding: 15px;
    margin-top: 0;
    border: solid #330000;
    border-top: none;
    /* height: 130vh; */
}
.input-title {
    text-align: left;
    font-size: 24px;
}
.input-calender, .input-time {
    width: 98%;
    height: 40px;
    font-size: 24px;
}
.input-datalist .select-input {
    font-size: 24px!important;
    height: 100%;
}
.select-input--material {
    background-image: none;
}
.input-datalist {
    padding: 3px 10px;
    font-size: 24px!important;
    width: 93%!important;
    height: 42px!important;
    background-color: #fff !important;
    background-image: none !important;
}
.input-datalist option {
    font-size: 24px!important;
}

.input-style {
    width: 85%;
    height: 40px;
    font-size: 24px;
}
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}
.input-style.input-field {
    width: 95%;
    height: 44px;
    font-size: 24px;
    padding: 0 10px;
    text-indent: 28px;
    border: none;
}
.input-icon {
    position: absolute;
    left: 10px;
}
.list{
    background-color: transparent !important;
}
.radio-button {
    transform: scale(1.5);
}
.list-item__center {
    /* font-size: 20px; */
}

.custom-toolbar {
    z-index: 9990!important;
}

#payjp_checkout_box input[type=button] {
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border-color: #000!important;
    color: #fff;
    background-image: none!important;
    background-color: #330000!important;
    width: 100%;
    font-size: 24px!important;
    padding: 14px 0!important;
    margin-top: 5px;
}

.login-btn {
    background-color: #330000!important;
    width: 100%;
    font-size: 24px!important;
    padding: 14px 0!important;
    margin-top: 5px;
}

/* Register */
.check-input {
    transform: scale(1.5); 
    margin-right: 5px;
}
.custom-toolbar {
    background-color: #C39143!important;
    position: fixed !important;
    top: 0;
}
.margin-top-bot-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.body1 {
    padding: 20px;
    margin-top: 10px;
}
.input-phone {
    width: 96%;
    height: 24px;
    font-size: 24px;
    padding: 5px;
}
.body1 .input-phone-label,.main-content .input-phone-label {
    text-align: left;
    margin-bottom: 0px;
    font-size: 24px;
    font-family: 'Roboto', 'Noto', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    font-weight: var(--font-weight--large);
    margin: 0.6em 0 0 0;
    padding: 0;
}

/* service menu */
.list-item__icon {
    font-size: 24px; /* Adjust size as needed */
}
.service-info-container {
    /* margin-top: 50px; */
    padding: 5px;
    background-color: #fff;
    width: 100%;
}
  
.service-info {
    display: flex;
    /* align-items: center; */
    text-align: left;
}
  
.service-image {
    width: 50px; /* Adjust size as needed */
    height: 50px; /* Adjust size as needed */
    margin-right: 8px;
}
  
.service-text {
    display: flex;
    flex-direction: column;
}
  
.service-name {
    font-weight: bold;
}
  
.service-price {
    color: #888;
    font-size: 24px;
}
.mini-service-price{
    font-size: 20px;
}
.dialog-container {
    padding: 20px;
    text-align: center; /* Center the content */
}
  
.dialog-image {
    width: 100%; /* Make the image responsive */
    max-width: 150px; /* Maximum width */
    margin-bottom: 10px; /* Space below the image */
}
  
.dialog-service-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px; /* Space below the service name */
 }
  
.dialog-service-duration,
.dialog-service-price {
    font-size: 16px;
    margin-bottom: 5px; /* Space below the duration and price */
}
  
  /* Additional styling for the close button */
.dialog-close-btn {
    margin-top: 15px;
}
.pagination-controls {
    padding: 14px 0!important;
}
.pag-button {
    width: 120px!important;
    color: #fff!important;
    background-color: #330000!important;
    font-size: 24px!important;
    padding: 14px 0!important;
}

/* therapist serach */
.therapist-card {
    display: flex;
    align-items: center;
    background: #fff; /* Adjust the background as needed */
    border-radius: 8px; /* Rounded corners for the card */
    padding: 10px; /* Padding around the content */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    margin-bottom: 10px; /* Space between cards */
    width: 90%!important;
}
  
.therapist-image {
    width: 60px; /* Adjust as needed */
    height: 60px; /* Adjust as needed */
    border-radius: 30px; /* Circular image */
    object-fit: cover;
    margin-right: 15px;
}
  
.therapist-details {
    flex-grow: 1;
}
  
.top-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
  
.customer-therapist-name {
    font-size: 1rem; /* Adjust as needed */
    font-weight: bold;
}
  
.favorite-icon {
}
  
.therapist-rating {
    display: flex;
}
  
.rating-star {
    color: yellow; /* Or any color you want for the stars */
    margin-right: 2px; /* Space between stars */
}
  
.therapist-experience {
    font-size: 0.85rem; /* Adjust as needed */
    color: #666; /* Or any color for contrast */
    margin-top: 4px; /* Space from the rating */
}
  

/* therapist profile */
.profile-container {
    text-align: center;
    margin-top: 50px;
    /* rest of your styling */
}

.profile-image {
    width: 200px; /* adjust as needed */
    height: 200px; /* adjust as needed */
    border-radius: 100px; /* circular image */
    margin: 0 auto; /* center the image */
    display: block;    /* rest of your styling */
    object-fit: cover; /* 画像が潰れるのを回避 */
}

.name-and-favorite {
    display: flex;
    justify-content: center;
    align-items: center;
    /* rest of your styling */
}

.customer-therapist-name {
    /* margin-right: 10px; */
    font-size: 24px;
    margin: 20px;
}

.favorite-icon-on {
    color: red;
    border: none;
    background-color: inherit;
}
.favorite-icon {
    color: #d6d6d6; /* or your chosen color */
    /* rest of your styling */
    border: none;
    background-color: inherit;

}

.ratings {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: yellow;
    margin: 20px 0;
    /* rest of your styling */
}

.filled-star {
    color: gold; /* or your chosen color for stars */
    /* rest of your styling */
}
.empty-star{
    color: gray;
}
.message-area {
    width: 90%;
    margin: 10px auto; /* center the text area */
    /* rest of your styling */
}

#active_profile, #passive_profile {
    background-color: #C39143;
    color: black!important;
    font-size: 20px!important;
    width: 170px!important;
}
#active_profile {
    border-bottom: solid;
}
.profile-details-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.therapist-gender-experience {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 10px;
}

.therapist-gender, .therapist-experience {
    display: flex;
    align-items: center;
    font-size: 24px;
}

.gender-icon, .experience-icon {
    margin-right: 5px;
    color: white;
}


/* お知らせ */
.oshirase-list-item {
    background-color: #fff!important;
    padding: 10px 15px !important;;
    margin-bottom: 10px!important;
    /* display: flex!important;
    flex-direction: column!important;
    align-items: flex-start!important;
    padding: 10px!important;
    border-bottom: 1px solid #ccc!important;  */
}
.status {
    font-weight: bold;
    margin-bottom: 5px;
    width: 100%!important;
    color: black;
}
.status-unread {
    color: red;
    font-size: 24px!important;
}
.customer-message {
    font-size: 24px!important;
    width: 100%!important;
    color: #000;
}
.notification-details-container {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}
  
.notification-details-container p,
.notification-details-container li {
    color: #333;
    font-size: 20px;
}
  
.details ul {
    list-style-type: none;
    padding: 0;
}
  
.details ul li {
    margin-bottom: 5px;
}
  
.greeting, .follow-up {
    font-weight: bold;
}
  
.therapist, .service {
    margin-top: 10px;
    font-weight: bold;
}

/* Payment */
.payment h1, .payment h2 {
    color: #333;
}

.payment p, .coupon-selection label, #payment p {
    margin-left: 20px;
    color: #000000;
}

.input-datalist, #point {
    margin: 10px 0;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.coupon-selection label {
    display: block;
}

.flex-start {
    display: flex;
    align-items: center;
}

.flex-start input[type="text"] {
    margin-left: 10px;
    flex-grow: 1;
}

.btn-right.customer {
    width: 40%!important;
    margin-bottom: 10px!important;
    text-align: center;
    background-color: #330000!important;
    color: #FFFFFF!important;
    font-size: 24px!important;
    padding: 14px 0!important;
    margin-top: 5px;
}
.card-add{
    display: flex!important;
    justify-content: space-around!important;

}

/* booking time  */
.time-selection-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px;
}
  
.time-btn {
    width: calc(25% - 10px);
    margin-bottom: 10px;
    text-align: center;
    background-color: #330000!important;
    color: #FFFFFF!important;
}
  
.time-btn.selected {
    background-color: #4CAF50; /* Or any color indicating selection */
    color: white;
}
  
/* 口コミ評価登録 Css */
.page-review-rating .page__background {
    background-color: #C39143 !important;
}
.reviewrating-container {
    margin-top: 50px;
    padding: 0px 20px;   
}
.customer-reviewrating-title{
  font-weight: bold;
  font-size: 24px;
}
.therapistinfo-container{
    text-align: left;
    font-weight: bold;
    font-size: 20px;
}
.reviewratinginfo-container{
    margin-top: 15px;
    text-align: left;
}
.reservation-datetime{
    margin-left: 20px;
}
.reviewrating-container .comment-input.customer {
    width: 95%;     
    overflow: auto;
    height: 200px;
    border: none;
    border-radius: 2px;
    font-size: 24px;
}
.reservation-btn-container{
    margin-top: 15px;
}
.customer-reservationcreate-btn {
    background-color:#330000 !important;
    width: 100%;
    font-size: 24px!important;
    padding: 14px 0!important;
    margin-top: 5px;
}
.customer-reservationskip-btn {
    top: 15px;
    background-color:  #330000 !important;
    width: 100%;
    font-size: 24px!important;
    padding: 14px 0!important;
    margin-top: 5px;
}
.rating-container{
    margin-top: 20px;
}
.reviewrating-container .review-title{       
    font-weight: bold;  
    color: #FFFFFF!important;
    text-align: left;
	font-size: 24px;
}
.result-rating-rate{
    display: flex;
    align-items: center;
}
.number_rating{
    font-size: 20px;
    color: #fff700;
}

.review-rating-list .list-item{
    background-color: white !important;
    border: solid 1px #FFFFFF;
    padding: 0 20px;
    margin: 10px 4px 4px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #000 !important;  
}
.comment-title{
   margin-left: 15px;
}
.review-rating{   
    margin-top: 10px;
    display: flex;
  
}
/* サービスメニュー登録 css */
.page-service-menu  .page__background {
    background-color: #C39143 !important;    
}
.servicemenu-container {
    padding: 20px;
    margin-top:100px;
    text-align: left;
    background-color: #fff;
}
  
.servicemenu-image {
    width: 100%;   
}
  
.servicemenu-name {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
 }

.servicemenu-duration,
.servicemenu-price,.servicemenu-description {
    font-size: 24px;
    margin-bottom: 5px;
    margin-right: 10px;
    font-weight: bold;
}

/* 予約リスト Css */
.page-reservation .page__background {
    background-color: #C39143 !important;
}
.reservation-container {   
    padding: 0px 20px;   
}
.reservation-title{
  font-weight: bold;
  font-size: 24px;
}

.reservation-list .list-item{
    background-color: white !important;
    border: solid 1px #FFFFFF;
    padding: 0 20px;
    margin: 10px 4px 4px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #000 !important;
    font-size: 24px;
}
.page-reservation .pagination-controls {   
    margin:50px 0px!important;
}
.reservation-info{
    margin-top:30px;

}
.reservation-therapist-name {
    font-size: 24px; /* Adjust as needed　remからpxへ */
    font-weight: bold;
 }
 .reservationinfo-container{
    text-align: left;
    font-weight: bold;
    margin-left: 20px;
    font-size:24px;
}

.customer-reservationcontacttherapist-btn {    
    /* background-color:#330000 !important;
    width: 70% !important;
    margin:20px 50px  !important;  */
    background-color:#330000 !important;
    width: 100%;
    font-size: 24px!important;
    padding: 14px 0!important;
    margin-top: 10px!important;
}
.reservation-info .policy-text{
    padding: 30px;
    font-weight: bold;
    font-size: 24px;
 
}
.reservation-info .cancellation-policy-label{
    text-align: left;
    margin-left: 60px;
    font-weight: bold;
    font-size: 24px;
}
.reservation-info .cancellation-policy {
    margin-top: 10px;
    width: 100%;     
    overflow: auto;
    height: 200px;
    border: none;
    border-radius: 2px;
    font-size: 12px;
}
.reservation-info .cancel-agree-checkbox{
    text-align: left;
    /* margin-left: 60px; */
}

/* css追加_inoue */

/*-----下記は変更------*/
/* .custom-toolbar {
    background-color: #C39143!important;
} */
.body1 {
    /* margin-top: 10px; */
    box-shadow: none;
}
.toolbar{
    background-image: none!important;
    box-shadow: none!important;
}

.notification-details-container {
 text-align: left;
 margin-top: 56px;
}
  
.greeting, .follow-up {
    margin: 0;
}
  
.therapist, .service {
    margin: 0;
}
.back-btn {
    box-shadow: none!important;
}

/* .therapist, .service {
    margin-top: 10px; <-これを削除
    font-weight: bold;
} */

.input-icon {
    position: absolute;
    left: 20px;
}
.input-with-icon {
    justify-content: center;
    /* position: relative;
    display: flex;
    align-items: center; */
}
.card-bgcolor{
    background-color: #C39143!important;
    box-shadow: none!important;
}

.card.customer{
    background-color: #C39143!important;
    box-shadow: none!important;
}

.react-calendar {
    width: 100%!important;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff!important;
    font-size: 24px!important;
}
.react-calendar__navigation__label__labelText , .react-calendar__navigation__label__labelText--from{
    font-size: 26px;
}
.react-calendar__tile{
    color: rgb(0, 0, 0);
}

.react-calendar__tile--now{
    color: black;
}

.time-btn{
    margin: 5px!important;
    height: 50px!important;
    font-size: 20px!important;
    padding:7px 0 0 0!important;
}
.time-btn:active{
        transform: translateY(4px);
        border-bottom: solid 4px #627295;
}

.list-item.customer{
    background-color: #C39143!important;
    border: none;
}
.list-item.customer .center{
    color: #000!important;
    font-size: 20px;

}
/* .center.customer{
    font-size: 18px;
    color: white;
    font-weight: bold;
    padding: auto;
    /* padding-right: 100px; 
} */
.list-item__radio{
    transform: scale(1.5);    
}

.service-name {
    color: #000;
    font-size: 24px;
}
.mini-service-name{
    font-size: 20px;
}
div.page__background{
    background-color: #C39143!important;

}
.input-datalist {
    width: 98%!important;
}
.input-style.input-field {
    width: 98%;
    padding-left: 35px;
}
.button--quiet.button.customer{
    color: white!important;
    background-color: #330000 !important;
}
.switch__toggle{
    background-color: gray!important;
    
}
:checked + .switch__toggle{
    background-color: #330000!important;
    box-shadow:inset 0 0 0 2px #330000!important ; 
}

.customer-therapist-name{
    color: #000;
}

.list-item__title{
    color: #000;
    font-size: 24px;
}
.list-item.customer{
    border: none!important;
}
h3.customer{
    background-color: #C39143!important;
    margin: 0!important;
}
.button--outline{
    border: none!important;
}
ons-page.customer .page__content{
    min-width:280px;
    max-width: 500px;
    height: 100vh;
}

ons-list.customer-bgcolor{
    background-image: none;
}

body{
    overflow: auto!important;
    overscroll-behavior-y:none;
}

.list.customer{
    /* margin-top: 30px; */

}

.customer-service-info-container {
    margin-top: 50px;
    padding: 5px;
    background-color: #fff;
}
.bottom-toolbar__content .button.customer{ /* 画面を小さくしてもアイコン白のまま */
    color: white!important;
    background-color: #330000 !important;
}

.customer-point{
    font-size: 24px;
    width: 100px;
    margin-left: 10px;
}
.body1.payment{
    /* height: calc(100% + 300px);  */
}
/* 上の高さ指定　レスポンシブ対応で使ってほしい */
.customer-bottom-btn{
    width: 85%;
    margin: 0;
    position: fixed !important;
    bottom: 0;
    overflow-x: auto;
    background-color: #C39143;
}

/* サービスメニュー選択のポップアップ */
#popup{
    min-width: 400px;
    width:50%;
    height: 90%;
    background:#3300008f;
    padding:10px 0;
    box-sizing:border-box;
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 999;
    overflow-wrap: break-all;
  
  }
  
  #popup img{
      width: 100%;
      height: auto;
      /* background-color: white; */
      
      
  }

  #popup h2 {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    background-color: white;
}

#popup h3 {
    margin: 0;
    font-size: 22px;
    color: #000;
    background-color: white;
}

#popup p {
    margin: 0;
    font-size: 20px;
    color: #000;
    background-color: white;
}

  input[type="checkbox"].s-menu-popup{
    display:none;
  }
  
  input[type="checkbox"]:checked + #popup {
    display:block;
    transition:.2s;
  }
.center list-item__center{
    height: 0;
}
/* --------------------------- */
/* .customer .ons-icon { 星評価やハートのところにも影響があったためコメント化してます
    color:#FFFFFF;
} */


/* 予約詳細 */
.page-service-menu {
    padding: 20px;
    
}

.custmer.dialog-btn {
    background-color: #330000;
}


.custmer-dialog-contaner .dialog {
    width: 90%;
    min-width: 280px;
    
}

.custmer-dialog-contaner {
    background-color: #00000080;
}

.custmer-dialog-contaner img {
    width: 100%;
    height: auto;
}

.icon-container {
    position: relative;
}
  
.unread-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    z-index: 1;
}

.payjs-outer {
    width: 96%;
    height: 24px;
    font-size: 24px!important;
    padding: 5px;
    background-color: #fff;
}
.InputContainer {
    font-size: 24px!important;
    display: block;
    height: 40px;
}
#cardNumber {
    font-size: 24px!important;
    height: 30px;
}
.InputContainer .InputElement {
    position: absolute;
    top: 0;
    font-size: 24px;
    display: block;
    height: 20px;
    margin-top: 10px;
}
.fakeInput {

}

/* チェット画面 */
/* チャットコメントの日時 　顧客側*/
.client-message .message-bubble.unread .sent-at {
    color: #FFFFFF !important;
}

/* チャットコメントの日時  セラピスト側*/
.therapist-message .message-bubble.unread .sent-at {
    color: #000000 !important;
}


.chat-list {
    background-color: #C39143 !important;
    background-image: none;
}

.chat-list .list-item{
    background-color: #C39143 !important;
    font-size: 20px;
    border: none;
}

.send-message-bar input {
    font-size: 20px !important;
}

.send-message-bar ons-button {
    font-size: 80px!important;
}

/* 予約履歴リスト */
 .resevatinhistry-list .list-item {
    background-color: #d8d8d8 !important;
    color: #000000 !important;
 }

 /* booking_time_select */
.button.default {
    background-color: blue !important;
}

.button-grey {
    background-color: grey !important;
}

.button.orange {
    background-color: orange !important;
}

.button.green {
    background-color: green !important;
}

/* シフト詳細登録画面・稼働詳細確認画面（下部時間帯の左寄せ） 2024/7/30 追加 */
.customer_siftbutton::before{
    content:"";
    display: block;
    width:20%;
    order:1;
    padding: 5px;
  }
  .customer_siftbutton::after{
    content:"";
    display: block;
    width:20%;
    padding: 5px;
  }

/* サービス予約確認画面（キャンセルポリシー追加）　2024/08/28　追加 */
.confirm .policy-text{
    padding: 10px;
    font-size: 20px;
 
}
.confirm .cancellation-policy-label{
    font-size: 20px;
    text-align: left;
}
.confirm .cancellation-policy {
    margin-top: 10px;
    width: 100%;     
    overflow: auto;
    height: 100px;
    border: none;
    border-radius: 2px;
    font-size: 12px;
    Resize: none
}
.confirm .cancel-agree-checkbox{
    text-align: left;
}

/* 24/10/18追加 ボタンとボタン間のスペース調整 */
.button-spacing {
    margin-bottom: 20px; /* 必要に応じて値を調整 */
}



/* 低解像度時の設定 */
@media (max-width:420px) {
    .pag-button {
        width: 68px!important;
        color: #fff!important;
        background-color: #330000!important;
        font-size: 20px!important;
        padding: 14px 0!important;
    }
}
.chat-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: auto !important;
  height: 78% !important;
  display: flex;
  flex-direction: column;
}

.chat-message {
  display: flex !important;
  padding: 4px 10px !important;
  margin: 10px 0 !important;
  width: 100%;
}

.therapist-message .message-bubble {
  margin-right: auto !important;
  background-color: #f0f0f0 !important; /* Light grey bubble for the therapist */
  color: black !important;
  text-align: left !important;
}

.client-message .message-bubble {
  margin-left: auto !important;
  background-color: #007aff !important; /* Blue bubble for the client */
  color: white !important;
  text-align: left !important;
}

.message-bubble {
  max-width: 70% !important;
  padding: 8px 12px !important;
  border-radius: 18px !important;
  margin-bottom: 4px !important;
  word-break: break-word !important;
  position: relative;
}

.message-content {
  display: block !important;
}

.sent-at {
  display: block !important;
  text-align: right !important;
  font-size: 0.7em !important;
  margin-top: 4px !important;
  color: #888 !important;
}

/* Send message bar styling */
.send-message-bar ons-input {
  flex: 1 !important;
  margin-right: 8px !important;
}

.send-message-bar ons-button {
  padding: 0 !important;
  line-height: 0 !important; /* Aligns the icon vertically */
}

/* Adjustments for Onsen UI specific components */
.list__item {
  padding: 0 !important; /* Remove padding from list items */
}

/* Styles to indicate read/unread status */
.unread .message-content {
  font-weight: bold !important; /* Make unread messages bold */
}

.read .message-content {
  font-weight: normal !important; /* Read messages have normal font weight */
}

/* Send message bar styling */
.send-message-bar {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  /* margin-top: -50px; */
  /* position: absolute; */
  height: 130px;

}
.send-message-bar.ios {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  /* margin-top: -50px; */
  /* position: absolute; */
  height: 180px;

}

.send-message-bar input {
  flex: 1;
  /* border: 1px solid #ccc; */
  border-radius: 20px;
  padding: 10px;
  margin-right: 10px;
  outline: solid 1px #ccc;
  font-size: 14px;
  box-sizing: border-box;
}

.send-message-bar button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.send-message-bar button:hover {
  background-color: #0056b3;
}

.send-message-bar button:active {
  background-color: #004494;
}


/* menu */
.staff-dashboard {
    display: flex;
    height: 100vh;
}
  
.content {
    flex-grow: 1!important;
    overflow: auto!important;
    background-color: #12cdd4 !important;
}

.sidemenu {
    width: 220px!important;
    background-color: #12cdd4!important;
    /* padding: 20px!important; */
    min-height: 9000vh!important;
}

.sidemenu .list-item {
    background-color: #0ca789;
    font-size: 20px;
    border-bottom: 4px solid;
    border-color: #ffffff;
    color: #ffffff;
}
.staff-main-content .page__content {
    background-color: #12cdd4!important;
    width: 1350px;
    height: 100vh;
    padding: 0 20px 0 20px !important;
}

.list-item{
    background-color: #0ca789;
    font-size: 20px;
    border-bottom: 4px solid;
    border-color: #ffffff;
    color: #ffffff!important;
}

/* .page__background {
    background-color: #12cdd4!important;
}*/

/*.main-content {
    background-color: #ffffff;
    min-height: 100vh;
    margin-top: 10px;
}*/


/* therapist list  */
.staff-main-title {
    color: #ffffff;
    font-size: 28px;
    text-align: left;
    margin-top: 10px;;
}



.staff-input-box {
    height: 36px;
    width: 320px;
    font-size: 20px;
    margin: 10px 0px 0 -10px;
    padding: 0 0 0 0px;
    border: none;
    -webkit-appearance: none;
    /* background-color: #ffffff; */
}

/* 各画面のボタン　*/
.search-btn, .review-rating-button, .reservationcancelfee-button, .termsRegist-btn, .button_nav, .staff-button {
    height: 36px!important;
    font-size: 18px!important;
    padding: 10 18px!important;
    background-color: #0ca789!important;
    color: #ffffff!important;
    margin: 10px 10px 0 0 !important;
    text-align: center;
}

/* .staff-input-box .text-input--material {
    background-image:none;
    font-size: 28px;
}
*/
.staff-input-box .search-input {
    width: 300px;
    height: 36px;
}

.staff-input-box .search-input--material {
    background-size: 24px;
    font-size: 18px;
    padding: 0 24px 0 50px;
    text-align: left;
}

.staff-input-box .search-input--material::placeholder {
    font-size: 18px;
}


 /* サービスメニュー登録 css */
 .page-servicemenu-staff  .page__background {
    background-color:  #12cdd4 !important;
}

 .servicemenu-content {
    padding: 0 50px 0 50px !important;
}
 .flexcontent-servicemenu {  
    display:flex;
    margin: 0 0 20px 10px;
    width: 400px;
 }
 .servicemenu-title, .reservationcancel-title {
    color: #ffffff;
    font-size: 28px;
    padding-top: 10px;
    text-align: left;
}
 .flexcontent-servicemenu  .servicemenu-button {
    background-color: #0ca789;
    color: #ffffff;
    width: 150px;
    font-size: 24px;
    margin: 30px 30px 20px 0px;
    height: 48px;
    padding: 10px 0 10px 0;
    text-align: center;
    cursor: pointer
}

 .servicemenu-button-container{
    display:flex; 

 }
.servicemenu-button-container .servicemenu-button, .image-create-button {
    background-color: #0ca789;
    color: #ffffff;
    width: 150px;
    font-size: 18px;
    margin: 30px 30px 20px 0px;
    height: 36px;
    padding: 2px 0 0px 0;
    text-align: center;
    cursor: pointer
}

.service-menu-list {
    border-color: #FFFFFF;
    border-radius: 4px;   
    margin: 0 10px 0 10px;
    min-width: 1000px;
    /* overflow: auto; */
    
 }
 
 .service-menu-list  a{
    color: blue;
    text-decoration:underline;
    cursor: pointer;
 
 }
 
 .service-menu-list  table {
     width: 100%;
     max-width:1800px;  
     background-color: #FFFFFF;
 }
 
 .service-menu-list  thead {
    background-color: #0ca789;
    position: sticky;
    top: 0;
    left: 0;
    height: 50px;
    color: #FFFFFF;
 }
 
 .service-menu-list  th {
    font-size: 24px;
    line-height: 1em;
 }

 .service-menu-list  td {
    font-size: 24px;
    padding: 0 10px 0 10px;
 } 
 .textcenter {
    text-align: center;
}
 .page-servicemenu-staff .button_pagination {
    background-color: #0ca789;
    width: auto;    
    font-size: 100%;
    margin: 10px;
    cursor: pointer
}

.servicemenucreate-container {  
    margin: 0 0 20px 10px;
    width: 400px;
 }
 .inputcontent .image-create-button{
    background-color: #0ca789;
}

 .inputcontent {
    width: 600px;
    margin-left: 10px;
    margin-right: auto;
    text-align: left;
}
.inputcontent label {
    color: #FFFFFF;
    font-size: 24px;
}
.inputcontent li,.data-text-20 {
    color: #FFFFFF;
    font-size: 20px;

}


.inputcontent .application-date-container{
    display:flex;
    width: 500px;
    margin-top: 80px;
}
.application-date-container .application-date {
    width: 210px;
    height: 35px;   
    margin: 20 0px;
    border: none;
    border-radius: 2px;
    font-size: 20px;
    text-align: center;
}
.inputcontent .servicename-input,.time-input,.price-input{
    width: 450px;
    height: 30px; 
    margin: 20 0px;
    border: none;
    border-radius: 2px;
    font-size: 20px;
    padding: 0 10px 0 10px;
}
.inputcontent .time-input,.price-input{
    text-align: right;
}

.inputcontent .reservationdate_input{
    width: 210px;
    height: 30px;   
    margin: 20 0px;
    border: none;
    border-radius: 2px;
    font-size: 20px;
    text-align: center;
}
.inputcontent .detailinfo-input {
    width: 500px;     
    overflow: auto;
    height: 200px;
    border: none;
    border-radius: 2px;
    resize: none;
}

/* サービスメニュー新規作成・詳細確認画面　2024/7/24　追加 */
.intended-use{
    margin-left: 10px;
    color: white;
    font-size: 16px;
}

input.intended-use{
    margin-left:10px;
}

/* 口コミ評価確認 css */
.page-reviewrating-staff  .page__background {
    background-color:  #12cdd4 !important;
}

.reviewrating-content {
    padding: 10px 50px 0 10px!important;
}
.reviewrating-content .button_pagination {
    background-color: #0ca789;
    width: auto;    
    font-size: 100%;
    margin: 10px;
    cursor: pointer
}
.flexcontent-reviewrating {
    display:flex;
    margin: 0 0 20px 10px;
    width: 400px;
 }
.rating-container-staff{
    margin-top: 10px;
    text-align: left;
    margin-left: 60px;
}
.review-rating-list-staff {
    border-color: #FFFFFF;
    border-radius: 4px;
    /* height:410px;  */
    margin: 20px 10px 0 10px;
    /* min-width: 1000px; */
    /* overflow: auto; */  
 }
 .review-rating-list-staff  a{
    color: blue;
    text-decoration:underline;
    cursor: pointer;
 
 }
 
 .review-rating-list-staff  table {
     width: 100%;
     max-width:1800px;  
     background-color: #FFFFFF;
 }
 
 .review-rating-list-staff  thead {
    background-color: #0ca789;
    position: sticky;
    top: 0;
    left: 0;
    height: 50px;
    color: #FFFFFF;
 }
 
 .review-rating-list-staff  th {
    font-size: 24px;
    line-height: 1em;
 }

 .review-rating-list-staff td {
    font-size: 24px;
    padding: 0 10px 0 10px;
 } 
 .review-rating-button-container{
    display:flex; 

 }
/*.flexcontent-reviewrating .review-rating-button {
    background-color: #0ca789;
    color: #ffffff;
    width: 150px;
    font-size: 24px;
    margin: 30px 50px 20px 0px;
    height: 48px;
    padding: 10px 0 10px 0;
    text-align: center;
    cursor: pointer
}
*/

.number_rating {
    font-size: 32px !important;
}

/*--------*/
/* .button {
    background-color: #0ca789;
} */



.flexcontainer {
    position: relative;
    display: flex;
}

/* セラピストリストページ*/
.List {
    border-color: #FFFFFF;
    border-radius: 4px;
    /* height:300px; */
    width: 100%;
    margin: 0 0px 0 0px;
    min-width: 1000px;
    overflow: auto;
    
 }
 
 .List a{
    color: blue;
    text-decoration:underline;
    cursor: pointer;
 
 }
 
 .List table {
     width: 100%;
     max-width:1250px;
     background-color: #FFFFFF;
 }
 
 .List thead {
    background-color: #0ca789;
    position: sticky;
    top: 0;
    left: 0;
    height: 50px;
    color: #FFFFFF;
 }
 
 .List th {
    font-size: 18px;
    line-height: 1em;
 }
 
 .List tr {
 } 
 
 .List td {
    font-size: 16px;
 /*   text-align: left; */
    padding: 0 0px 0 0px;
 } 
 
/* 規約確認画面 */

.terms-textarea, .policy-textarea, .cancel-textarea {
    margin: 0 20px 0 20px;
    height: 150px; 
    width: 90%;
    resize: vertical;
}

/* ログリスト */

input#startdate.application-date,input#enddate.application-date {
    height: 30px;
    width: 200px;
    font-size: 20px;
    text-align: center;
}

.date-input-container label {
    color: #ebebc0;
    font-weight: bold;
}




/*サイドバー　タグ用*/
.staff_splittercnten {
    background-color:"#12cdd4";

}


/* 予約キャンセル料設定 ,会員プロファイル,規約登録*/
.reservationcancel-page, .basetable, .customer-profile-contaner, .registration-form {
    font-size: 20px;
    text-align: left;
    margin: 0 20px 0 20px;
    color: #ffffff;

}

.customercancell-fee, .predaypena-fee, .todaypena-fee {
    text-align: right;
    padding: 0 5px 0 0;
    font-size: 20px;
    width: 180px;
    height: 30px;
}

.cancell-date-containers .application-date {
    height: 30px;
    width: 200px;
    font-size: 20px;
    text-align: center;

}

.reservationcancel-button-container {
    position: absolute;
    left: 350px;
    font-size: 20px;
}


/*セラピストプロファイル*/
.staff-therapistprofile-contaner .profile-image {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin: 0 auto;
    display: block;
}


/* シフト編集画面 */

.shift-time-selection-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15px;
}

.shift-time-btn {
    width: calc(25% - 10px);
    margin-bottom: 10px;
    text-align: center;
    background-color: #0ca789;
    color: #FFFFFF!important;
}


.shift-time-selection-container .shift-time-btn {
    background-color: #ccc; 

}

.shift-time-selection-container .shift-time-btn .selected {
    background-color: #0ca789 !important;
}


/* 会員プロファイル */
.customer-profile-contaner {
    text-align: left;
    margin: 0 20px 0 20px;
}

.customer-profile-msg {
    background-color: #ffffff;
    height: 400px;
    width: 400px;
}

.staff-main-content .page__background {
    background-color: #12cdd4!important;

}

.page-staff-side-manu .page__background {
    background-color: #0ca789!important;
}

.page-staff-side-manu .page__content {
    background-color: #0ca789!important;

}


/* ナビゲーション　ページカウント*/
.page-nav-count {
    margin: 0 10px;
    padding-top: 20px;
}

/* セラピストプロファイル　rating*/
.therapist-name {
    color: #ffffff;
}

.staff-therapistproflie-ratings {
    margin: 10px 0;
}

.staff-therapistproflie-ratings .rating-value {
    margin: 5px 15px 0 -40px;
    font-size: 24px;
    color: gold;

}

.therapist-profile-message-area {
    resize: none;
    width: 400px;
    height: 100px !important;
    overflow-y: auto;
    font-size: 18px;
}

.staff-therapist-gender-select {
    background-color: #ffffff;
}

.staff-therapist-experience {
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 24px;
}

.profile-details-container-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0px;

}
.therapist-gender-experience-data {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 0px;
}

.profile-details-container-data .gender-icon, .profile-details-container-data .experience-icon {
    color: #ffffff;
}

.staff-main-content label, .staff-unit-text{
    color: #ffffff;
    font-size: 20px;
}

.staff-unit-text{
    margin: 10px 0 0 10px;
    position: absolute;
}


.staff-input-therapistprofile, .staff-inputbox {
    width: 96%;
    height: 30px;
    font-size: 20px;
    padding: 0 5px 0 5px;
    margin-bottom: 15px;

}

.staff-input-therapistprofile.experience {
    width: 50px;
    height: 30px;
    font-size: 20px;
    padding: 0 5px 0 5px;
    margin-top: 15px;
} 

.staff-input-therapistprofile-select {
    padding: 0px 10px;
    font-size: 20px;
    width: 93%;
    height: 30px;
    background-color: #fff !important;
    margin-bottom: 15px;
}

.staff-input-therapistprofile-select .select-input--material {
    background-image: none!important;
    margin-top: 0px;
}
.staff-input-therapistprofile-select.destination .select-input {
    text-align: right;
}

.staff-therapistprofile-button {
    width: 168px;
    height: 48px!important;
    font-size: 24px!important;
    padding: 10px 18px!important;
    background-color: #0ca789!important;
    color: #ffffff!important;
    margin: 10px 15px 0 0 !important;
}

.staff-button {
    height: 36px!important;
    font-size: 18px!important;
    padding: 10 18px!important;
    background-color: #0ca789!important;
    color: #ffffff!important;
    margin: -10px 10px 0 0 !important;
}

/* 報酬管理 */
.compensation-item {
    display: flex;
    margin-left: 50px;
}
.compensation-item span {
    width: 120px;
    display: flex;
    font-size: 20px;
    color: #ffffff;
}


.compensation-input {
    background-color: #ffffff;
    background-image: none;
    height: 30px;
    margin: 0 5px 10px 10px;
    width: 150px;
}
.compensation-input .text-input {
    text-align: right;
    font-size: 20px;

}

.staff-compensation-button, .staff-custmerprofile-button, .staff-profile-button, .staff-large-button  {
    width: 270px;
    height: 48px!important;
    font-size: 24px!important;
    padding: 10px 18px!important;
    background-color: #0ca789!important;
    color: #ffffff!important;
    margin: 10px 15px 0 0 !important;
    text-align: center;
}



/* サービス予約 */
.staff-popup-input {  /* Popupの入力 */
    width: 100%;
    font-size: 20px;
}

.page__content::-webkit-scrollbar {
    display: none;
}

/* セラピスト 稼働履歴 */
.status-unconfirmed {
    background-color: rgba(255, 0, 0, 0.3); /* 薄い赤 */
}
  
.status-confirmed {
    background-color: rgba(255, 255, 255, 0.8); /* 薄い白 */
}
  
.status-completed {
    background-color: rgba(128, 128, 128, 0.3); /* 薄い灰色 */
}
  
.status-cancelled {
    background-color: rgba(255, 255, 0, 0.3); /* 薄い黄色 */
}
  
.status-full-cancellation {
    background-color: rgba(255, 165, 0, 0.3); /* 薄い橙 */
}
  
.status-treatment-started {
    background-color: rgba(0, 128, 0, 0.3); /* 薄い緑 */
}

.staff_siftbutton::after{
    content:"";
    display: block;
    width:25%;
    padding: 2px;
  }

.staff-input-datalist {
    padding: 5px 8px 0px 5px;
    margin: 10px 0px 0px 0px;
    /* font-size: 24px!important; */
    width: 320px;
    background-color: #fff !important;
    background-image: none !important;
}

.reservation-list-th {
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
    padding: 10px;
    gap: 10px;
}

.reservation-list-th .ons-icon {
    pointer-events: none;
}

.service-option {
    display: flex;
    flex-direction: column;
  }
  
  .service-name {
    font-weight: bold;
  }
  
  .service-details {
    font-size: 0.9em;
    color: gray;
  }
  
.therapist .page__background {
    background-color: #414bb2 !important;
}
body:has(.therapist){
    background-color: #414bb2 !important;
}
.therapist.bottom-bar {
    background-color: #2d9bf0 !important;
    height: 80px !important;
    position: fixed !important;
    bottom: 0;
    overflow-x: auto;
}

.bottom-toolbar__content .button {
    /* color: #000!important; */
    color: #404040 !important;

}

.ons-icon {
    font-size: 28px !important;
}

.bottom-toolbar__label {
    font-size: 10px;
    line-height: 1;
}

.bottom-toolbar__content {
    margin-top: 10px !important;
}

.tab-btn {
    width: 50%;
    color: #000000 !important;
}
/* 顧客側のベース色変更に伴い下記スタイルをコメント化　2024/7/31 変更 */
/* #active {
    background-color: #e1cbcb;
    font-size: 20px;
    border: solid #330000;
    border-bottom: none;
    border-radius: 0%;
} */

.list {
    background-repeat: initial !important;
}

.page-review-rating-therapist .pag-button {
    width: 120px !important;
    color: #fff !important;
    background-color: #2d9bf0 !important;
    font-size: 24px !important;
    padding: 14px 0 !important;
}

.page-review-rating-therapist .pagination-controls {
    margin: 50px 0px !important;
}

/* 口コミ評価登録 Css */
.page-review-rating-therapist .page__background {
    background-color: #414bb2 !important;
}

.reviewrating-container-therapist {
    padding: 0px 20px;
}

.reviewrating-title {
    font-weight: bold;
    font-size: 24px;
    color: #fff;
}

.therapistinfo-container {
    text-align: left;
    font-weight: bold;
}

.reviewratinginfo-container {
    margin-top: 15px;
    text-align: left;
}

.reservation-datetime {
    margin-left: 20px;
}

.reviewrating-container .comment-input {
    width: 350px;
    overflow: auto;
    height: 200px;
    border: none;
    border-radius: 2px;
}

.reservation-btn-container {
    margin-top: 15px;
}

.reservationcreate-btn {
    background-color: #eba62e !important;
    width: 100%;
    font-size: 24px !important;
    padding: 14px 0 !important;
    margin-top: 5px;
}

.reservationskip-btn {
    top: 15px;
    background-color: #dad5d5 !important;
    width: 100%;
    font-size: 24px !important;
    padding: 14px 0 !important;
    margin-top: 5px;
}

.rating-container {
    margin-top: 20px;
}

.reviewrating-container .review-title {
    font-weight: bold;
    color: #FFFFFF !important;
    text-align: left;
}

.result-rating-rate {
    display: flex;
    align-items: center;
}

.number_rating {
    font-size: 20px;
    color: #fff700;
}

.review-rating-list .list-item {
    background-color: white !important;
    border: solid 1px #FFFFFF;
    padding: 0 20px;
    margin: 10px 4px 4px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #000 !important;

}

.comment-title {
    margin-left: 15px;
}

.review-rating {
    margin-top: 10px;
    display: flex;

}

.therapist {
    color: #FFFFFF;
}

ons-page.therapist .page__content {
    min-width: 280px;
    max-width: 500px;
    height: 100vh;
    padding: 0 20px 0 20px;
    margin: 0 auto;
    color: #FFFFFF;

}

ons-page.therapist .page__content::-webkit-scrollbar {
    display: none;
}


.therapist .reservation-container {
    padding: initial;
}

.therapist .pag-button {
    color: #fff !important;
    background-color: #2d9bf0 !important;
    width: 100px !important;
}

.pag-count {
    color: #fff;
    margin-top: 20px;
}

.therapist-custom-toolbar,
.therapist-custom-toolbar .back-btn {
    background-color: #414bb2 !important;
    color: #FFFFFF !important;
}

.therapist-custom-toolbar .toolbar__title {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 24px;
}

.therapist .pagination-controls {
    display: flex;
    justify-content: space-between;
}

.therapist .profile-container {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    position: relative;
}


.therapist.dialog-btn {
    background-color: #2d9bf0;
}

.therapist .shifttime-btn-contaner {
    width: 23.5%;
    height: 42px;
    color: #FFFFFF;
    padding: 2px;
    line-height: 37px;

}

.therapist .shifttime-btn {
    width: 100%;
    height: 100%;
    line-height: 42px;
    font-size: 20px;
    background-color: #2d9bf0;
}

.therapist .profile-inputbox {
    background-color: #FFFFFF;
    width: 98%;
    padding: 5px;
    height: 30px;

}

.therapist .profile-inputbox .text-input {
    font-size: 24px;
    height: 30px;
}




.therapist .profile-selectbox {
    background-color: #FFFFFF;
    width: 98%;
    padding: 5px;
    height: 35px;
    margin-right: 5px;
}

.therapist .profile-selectbox .select-input {
    text-align: right;

}

.therapist .text-input--underbar,
.therapist .select-input--underbar {
    border-bottom: none;
    background-image: none;
}

.therapist .address_regist_button {
    width: 100px;
    height: 50px;
    margin-left: auto;
    margin-top: 5px;
    font-size: 20px;
    padding: 8px 0;
    background-color: #2d9bf0;
    display: flex;
    justify-content: center;
}

.therapist .dialog {
    width: 90%
}

.therapist .timer-btn {
    background-color: #2d9bf0;
    width: 100%;
    font-size: 24px;
    padding: 14px 0;
}

.therapist .alert-dialog {
    width: 90%
}

.therapist.alert-dialog-title,
.therapist.alert-dialog-content {
    text-align: center;
    font-size: 24px;

}




/* inoue_CSS */

/* ---------------------------------------------------------------------------------- */

h1.therapist {
    color: white;
    font-weight: bold;
}

.therapist .text-left {
    text-align: left;
    /* margin-left: 10px; */
    color: white;
}

ons-input.therapist {
    background-color: white;
    width: 90%;
    height: 40px;
}

ons-input.therapist input.text-input--underbar {
    font-size: 24px !important;
    border-bottom: none;
    height: 40px;

}

ons-toolbar.toolbar.therapist {
    background-color: #414bb2 !important;
}

ons-button.therapist.back-btn {
    background-color: #414bb2 !important;
}

div.therapist.center {
    color: white;
    margin: auto;
    text-align: center;
}

.therapist .button_full {
    width: 100%;
    /* margin: auto; */
    margin-top: 20px;
    font-size: 24px;
    padding: 14px 0;
    background-color: #2d9bf0;
}

/* お客様コメント画面 */

.cust_ases {
    width: 90%;
    margin: auto !important;
}

ons-list-item.therapist,
ons-list-item.therapist .list-item__center {
    background-color: white;
    color: black;
}

input.therapist.age {
    font-size: 24px;
    width: 50px;
    margin: 10px;
    padding: 0 10px;
    color: #000;
}

.therapist.comment-age-right {
    display: flex;
    justify-content: end;
}

textarea.therapist.add-comment {
    margin-top: 20px;
    height: 70px;
    width: 90%;
    font-size: 24px;
    color: black;
}

/* inoue_css 2024/05/02 */

/* 紹介文登録 */
.photo-container img {
    border-radius: 50%;
    width: 240px;
    height: 240px;
    margin: 0 auto;
    /* center the image */
    display: block;
    /* rest of your styling */
    object-fit: cover;
}

textarea.therapist {
    margin-top: 20px;
    height: 120px;
    width: 90%;
    font-size: 24px;
    color: black;
    resize: none;

}

.profile-row {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.profile-cell {
    height: 50px;
    margin-left: 5px;
    padding: 0 0 10px 0;
}

.profile-history {
    font-size: 24px;
}

.profile-select {
    background-color: white;
    height: 40px !important;
    width: 68px;
    font-size: 24px;
    padding-top: 10px;
    color: #000;
    margin-right: 10px;
}

.profile-input input {
    background-color: white;
    height: 50px;
    padding-left: 7px;
    width: 50px !important;
    font-size: 24px;
}

ons-icon.profile-icon {
    font-size: 40px !important;
    padding-top: 10px;
}

/* inoue_css 2024/05/07 */

.therapist.oshirase-list-item {
    color: black;
}

.card.therapist {
    color: black;
    font-size: 24px;
}

.therapist.osirase-syousai {
    padding-left: 10px;
    color: black;
}

span.therapist.osirase-syousai {
    padding-left: 40px;
}

.therapist .summary {
    background-color: #2d9bf0;
    padding: 10px;
    text-align: left;
    color: black;
    font-size: 24px;
}

.summaryfeeld {
    list-style: none;
}

.therapist.kadou-syousai-touroku {
    font-size: 24px;
}

ons-button.therapist.all-slot {}

ons-button.free {
    /* 空き時間 */
    background-color: blue !important;
}

ons-icon.free {
    color: blue;
    font-size: 16px !important;
}

ons-button.rsv {
    /* 予約済 */
    background-color: orange !important;
}

ons-icon.rsv {
    color: orange;
    font-size: 16px !important;
}

ons-button.prep {
    /* 非稼働時間 */
    background-color: gray !important;
}

ons-icon.prep {
    color: gray;
    font-size: 16px !important;
}

ons-button.nwt {
    /* 段取り時間 */
    background-color: green !important;
}

ons-icon.nwt {
    color: green;
    font-size: 16px !important;
}

.icon-1 {
    display: flex;
    justify-content: space-between;
}

.icon-2 {
    display: flex;
    justify-self: flex-start;
}

/* inoue_css 2024/05/10 */
.therapist .input-datalist {
    width: 100% !important;
}

.button.default {
    background-color: blue !important;
}

.button.grey {
    background-color: grey !important;
}

.button.orange {
    background-color: orange !important;
}

.button.green {
    background-color: green !important;
}

/* カレンダー用 */
/* 年月日　の文字サイズ　*/
.react-calendar__month-view__weekdays__weekday {
    color: #5990ab;
    margin-bottom: 0;
}


/* REACTCarenderの土曜を青字 */
.react-calendar .react-calendar__month-view__days__day--weekend:nth-child(7n-0) {
    color: #00F;
}

.react-calendar .react-calendar__month-view__days__day--weekend:nth-child(7n+1) {
    color: #F00;
    /* 日曜日の文字を赤色に */
}

.react-calendar__month-view__weekdays__weekday--weekend:first-child {
    color: red;
    /* 日曜日のタイトルを赤色に */
}

.react-calendar__month-view__weekdays__weekday--weekend:last-child {
    color: blue;
    /* 土曜日のタイトルを青色に */
}

/* セラピスト側　Chatの設定 */

.t-chat-list {
    background-color: #aebbff !important;
    background-image: none;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: auto !important;
    height: 78% !important;
    display: flex;
    flex-direction: column;
}

.t-chat-list .list-item {
    background-color: #aebbff !important;
    font-size: 20px;
    border: none;
}

/* スケジュール時間のボタン表示 */
.operation-time .button.default,
.operation-time .button.orange,
.operation-time .button.grey,
.operation-time .button.green,
.operation-time .button.blue,
.operation-time .button.button-blue,
.operation-time .button.button-grey {
    padding: 0 4px;
}
/* 施術開始画面（延長機能追加） 2024/7/24 追加 */
.therapist .extension-list{
    background-color: white;
    padding-left: 20px;
}

.error-message{
    color: red;
}

/* シフト詳細登録画面・稼働詳細確認画面（下部時間帯の左寄せ） 2024/7/30 追加 */
.therapist_siftbutton::before{
    content:"";
    display: block;
    width:20%;
    order:1;
    padding: 5px;
  }
  .therapist_siftbutton::after{
    content:"";
    display: block;
    width:20%;
    padding: 5px;
  }

/* 低解像度時の設定 */
@media (max-width:430px) {
    .therapist .pag-button {
        width: 68px !important;
        color: #fff !important;
        background-color: #2d9bf0 !important;
        font-size: 20px !important;
        padding: 14px 0 !important;
    }

    .therapist .shifttime-btn {
        width: 90%;
        height: 90%;
        line-height: 40px;
        font-size: 20px;
        background-color: #2d9bf0;
        padding: 0 0 0 0;

    }

    .profile-history {
        font-size: 20px;
    }

}

/* 画像登録 */

.photo-dialog .dialog-container{
    padding: 0;
}

.photo-dialog .list-item{
    background-color: #313139;
    padding-right: 10px;
    padding-left: 10px;
    border: 0;
}

.photo-dialog .list-item .list-item__center{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.photo-dialog .list-icon{
    font-size:  24px;
    color: white;
}