@charset "UTF-8";
  
  .reservation-header {
    display: flex;
    padding: 0px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  
    border-radius: 0px;
  }
  
  .reservation-header-left {
    display: flex;
    height: 80px;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    margin: 10px 0;
  }
  
  .reservation-header-left p.header-title {
    color: #404040;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  
  .reservation-header-right>a {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    align-self: stretch;
  
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px;
  
    border-radius: 6px;
    background: #FF1493;
    border: none;
    text-decoration: none;
  }
  
  .reservation-header-right>a>span {
    font-size: 22px;
  }
  
  .reservation-table>table th, 
  .reservation-table>table td {
    border: 1px solid #b5d2f7 !important;
    text-align: left;
    padding: 0 12px;
    height: 60px;
    border-color: #ECEDEF !important;
  }
  
  .reservation-table>table th:last-child, 
  .reservation-table>table td:last-child {
    text-align: center;
  }
  
  .reservation-table>table td a {
    text-decoration: none;
  }

  .reservation-table>table td a.clinic-name {
    text-decoration: revert;
    color: #4a83bc;
  }
  
  .reservation-table>table td:last-child a {
    height: 32px;
    border-radius: 6px;
    border: none;
  
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
    padding: 6px 12px 6px 12px;
  }
  
  .reservation-table>table td:last-child .clinic-room {
    background: #FFF2F9;
    color: #FF1493;
  }
  
  .reservation-table>table td:last-child .cancel-reservation {
    background: #F0F5F8;
    color: #6C747B;
  }
  
  .reservation-table .form-table {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
  
    color: #565C67;
    font-size: 14px;
    font-style: normal;
    line-height: 16px;
    min-width: 1000px;
    border-collapse: collapse;
  }

  .my-menu-change {
    display: flex;
    padding: 16px 24px 40px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    align-self: stretch;
  
    border-radius: var(--radius-retangle, 0px);
    border: 1px solid var(--color-alias-border-light, #F2F3F5);
    background: var(--color-alias-background-primary, #FFF);
  
    box-shadow: 0px 2px 4px 0px rgba(46, 49, 56, 0.20), 0px 2px 2px 0px rgba(46, 49, 56, 0.20);
  }

  .format-header {
    color: #6C747B !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: normal !important;
  }
  .cancel-reservation, .add-accompanying-person {
    cursor: pointer;
  }

  /* popup */
  #cancel-reservation-dialog, #cancel-reservation-dialog-success {
    border: 0;
    background-color: #e5e5e500;
  }
  #cancel-reservation-dialog:focus-visible, #cancel-reservation-dialog-success:focus-visible {
    outline: none;
  }
  .cancel-reservation-box {
    display: flex;
    width: 600px;
    padding: 8px 32px 40px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;

    border-radius: 8px;
    border: 0;
    background: #FFF;
    box-shadow: 0px 8px 15px 2px rgba(46, 49, 56, 0.10), 0px 0px 2px 0px rgba(46, 49, 56, 0.20);
  }
  .cancel-reservation-header {
    display: flex;
    height: 60px;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-bottom: 1px solid #D0D2D8;
  }
  .cancel-reservation-header .title {
    display: flex;
    flex: 1 0 0;

    color: var(--color-secondary-600, #6C747B);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
  }
  .cancel-reservation-message {
    display: flex;
    padding: 24px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  .cancel-reservation-message>span {
    align-self: stretch;
    color: #2E3138;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .cancel-reservation-action {
    display: flex;
    padding: 0px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    align-self: stretch;
  }
  .cancel-reservation-header .close {
    cursor: pointer;
  }
  .cancel-reservation-action .update, 
  .cancel-reservation-action .cancel {
    display: flex;
    align-items: flex-start;
    flex: 1 0 0;

    height: 60px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
  }
  .cancel-reservation-action .update {
    background: #FF1493;
  }
  .cancel-reservation-action .cancel {
    background: #F0F5F8;
  }
  .cancel-reservation-action .update>span, 
  .cancel-reservation-action .cancel>span {
    display: flex;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    align-self: stretch;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
  }
  .cancel-reservation-action .update>span {
    color: #FFF;
  }
  .cancel-reservation-action .cancel>span {
    color: #6C747B;
  }
  .cancel-reservation-action>button:focus-visible {
    outline: none;
  }
  a.rsv-tel {
    pointer-events: none;
  }
  table.form-table tr th {
    text-align: center;
  }
  /* popup */
  @media screen and (max-width: 768px) {
    .reservation-header {
      display: flex;
      padding: 0px;
      align-items: center;
      flex-direction: column;
      gap: 8px;
      align-self: stretch;
      border-radius: 0px;
    }
    .reservation-header-right {
      width: 100%;
      margin-bottom: 40px;
    }
    .reservation-header-right>a {
      padding: 20px 16px;
    }
    .reservation-table {
      width: 100%;
      overflow-x: auto;
    }
    .format-header {
      text-align: center;
    }
    .cancel-reservation-box {
      width: unset;
    }
    .cancel-reservation-header .title {
      font-size: 17px;
    }
    a.rsv-tel {
      pointer-events: auto;
      text-decoration: revert !important;
      color: #4a83bc;
    }
    .cancel-reservation-action {
      flex-direction: column;
    }
    .cancel-reservation-action .update, .cancel-reservation-action .cancel {
      flex: unset;
      width: 100%;
    }
    .reservation-header-left {
      margin: 15px 0 !important;
    }
  }

a.disabled-meeting-room-btn {
  pointer-events: none;
  background-color: #cccccc !important;
  color: #666666 !important;
}
.add-accompanying-person-form {
  display: flex;
}

#add-acc-person-form input {
  height: 58px !important;
  border-radius: 6px !important;
  border: 1px solid #D0D2D8 !important;
  max-width: 100% !important;
  width: 270px;
}
#add-acc-person-form input:focus-visible {
  outline: none;
}

#add-acc-person-form div{
  flex-direction: column;
  display: flex;
  align-items: flex-start;
;
}
#add-acc-person-form {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.reservation-table>table td:last-child .add-accompanying-person {
  background: #FFF2F9;
  color: #FF1493;
  margin-left: 4px;
}
.add-accompanying-person-action .add>span,
.add-accompanying-person-action .cancel>span {
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  align-self: stretch;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}
.add-accompanying-person-action .add>span {
  color: #FFF;
}
.add-accompanying-person-action .cancel>span {
  color: #FFF !important;
}
.add-accompanying-person-action>button:focus-visible {
  outline: none;
}
.add-accompanying-person-header .close {
  cursor: pointer;
}
.add-accompanying-person-action .add,
.add-accompanying-person-action .cancel {
  display: flex;
  align-items: flex-start;
  flex: 1 0 0;

  height: 60px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.add-accompanying-person-action .add {
  background: #FF1493;
}
.add-accompanying-person-action .cancel {
  background: #8B969E !important;
}
.add-accompanying-person-header .title {
  display: flex;
  flex: 1 0 0;

  color: var(--color-secondary-600, #6C747B);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}
.add-accompanying-person-message p{
  margin: 0;
}
.add-accompanying-person-action {
  display: flex;
  padding: 0px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  align-self: stretch;
}
.add-accompanying-person-header {
  display: flex;
  height: 60px;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  border-bottom: 1px solid #D0D2D8;
}
.add-accompanying-person-box {
  display: flex;
  width: 700px;
  padding: 8px 32px 40px 32px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  border: 0;
  background: #FFF;
  box-shadow: 0px 8px 15px 2px rgba(46, 49, 56, 0.10), 0px 0px 2px 0px rgba(46, 49, 56, 0.20);
}

#add-accompanying-person-dialog {
  font-size: 14px;
}

.add-acc-container{
  border-radius: 6px;
  background: #F2F3F5;
  padding: 20px 40px;
  margin-top: 20px;
}

.add-acc-required-field {
  border-radius: 20px;
  background: #FF1493;
  color: #FFFFFF !important;
  font-size: 10px;
  line-height: normal;
  border: none !important;
  padding: 1px 8px;
  margin-left: 10px;
}

.add-accompanying-person-message-finish {
   display: flex;
   padding: 0;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
   align-self: stretch;
 }
.add-accompanying-person-message-finish>span {
  align-self: stretch;
  color: #2E3138;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

@media screen and (max-width: 778px) {
  .add-accompanying-person-box {
    width: 100% !important;
  }
  #add-acc-person-form {
    flex-direction: column;
  }
  #add-acc-person-form input {
    width: 100% !important;
    max-width: 100% !important;
  }
  .add-accompanying-person-action {
    flex-direction: column-reverse;
  }
  .add-accompanying-person-action .add, .add-accompanying-person-action .cancel {
    flex: unset;
    width: 100%;
  }
}

.reservation-table {
  max-height: 300px;
  overflow-y: scroll;
}