:root {
    --font-size-base: clamp(15px, 1.8vw, 16px);
    --font-size-tiny: calc(var(--font-size-base) * 0.7);
    --font-size-small: calc(var(--font-size-base) * 0.9);
    --font-size-normal: var(--font-size-base);
    --font-size-normal-plus: calc(var(--font-size-base) * 1.1);
    --font-size-medium: calc(var(--font-size-base) * 1.2);
    --font-size-title: calc(var(--font-size-base) * 1.3);
    --font-size-large: calc(var(--font-size-base) * 1.5);
    --font-size-extra-large: calc(var(--font-size-base) * 2);
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    font-family: 'Sora', sans-serif;
    font-size: 16px;

    --font-family: 'Sora', sans-serif;

    --primary-color: #a11014;
    /* --primary-trans-color: rgb(255, 63, 26); */
    --primary-trans-color: #c13034;

    --background-primary-color: rgb(248, 248, 248);

    --gray-1: #dcdfe6;

    --text-bold-1: 800;
    --text-bold-2: 600;
    --text-bold-3: 400;
    --text-bold-4: 200;
    --text-primary-color: black;
    /* --text-secondary-color: rgb(118, 118, 118); */
    --text-secondary-color: #87878c;
    --text-light-dard-color: #192024;

    --el-input-focus-border: black;
    --el-input-focus-border-color: black;
    --el-color-primary: var(--primary-color);

    --color-dividing-line: #b0b3b8;

    --fill-back-color: #e6ebef;
    --fill-back-color-dark: #363f45;

    --color-green: #00832dff;

}


.el-table .cell {
    word-break: keep-all;
    overflow-wrap: normal;
    text-overflow: clip;
}

.el-button {
    --el-button-hover-bg-color: white;
    --el-button-hover-text-color: black;
    --el-button-hover-border-color: black;
    --el-button-font-weight: var(--text-bold-3);
}



/* element UI customization */

.el-button:focus-visible {
    outline: none;
    outline-offset: 0px;
}

.el-button--primary {
    --el-button-hover-bg-color: var(--primary-trans-color);
    --el-button-bg-color: var(--primary-color);
    --el-button-active-bg-color: var(--primary-color);
    --el-button-hover-text-color: white;

    color: white;
    border: none;
}

.el-button--primary:focus {
    background-color: var(--primary-color);
}

.el-button--danger{
    --el-button-bg-color: black;
    --el-button-border-color: black;
    --el-button-hover-bg-color: black;
    --el-button-hover-text-color: white;
    --el-button-active-bg-color: black;
    --el-button-active-border-color: black;

}

.el-input {
    --el-input-focus-border: black;
    --el-input-focus-border-color: black;
    width: fit-content;
}

.el-input-300 {
    width: 300px;
}

.el-input-400 {
    width: 400px;
}

.el-input-500 {
    width: 500px;
}

.el-input-600 {
    width: 600px;
}

.el-input-700 {
    width: 700px;
}

.white-button {
    --el-button-hover-bg-color: white;
    --el-button-bg-color: white;
    --el-button-active-bg-color: white;
    --el-button-hover-text-color: black;
    color: black;
    border: none;
    min-width: 200px;
    font-family: var(--font-family);
}

.white-button:hover {
    /* move down 2px and move right 2px */
    transform: translateY(2px) translateX(2px);
}

.white-item-label {
    color: white;
    font-family: var(--font-family);
}

.el-dialog__body {
    padding: 0px 10px;
}

.el-dialog {
    min-width: 300px;
    max-width: 80%;
}

.vstack {
    display: flex;
    flex-direction: column;
}

.hstack {
    display: flex;
    flex-direction: row;
}

.vcenter {
    align-items: center;
}

.hcenter {
    justify-content: center;
}

.flex1 {
    flex: 1;
}

/* common page  */
.page-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page-header {
    transition: height 0.5s ease;
    background-color: var(--primary-color);
    color: white;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0px 10px;
    align-items: center;
    height: 50px;
    /* bottom shadow */
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);
    /* margin-bottom: 5px; */
}
.page-header-hidden {
    height: 0px;
}

.page-header-title {
    font-weight: var(--text-bold-2);
    font-size: var(--font-size-title);
    padding: 10px;
}

.page-header-logout {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex:1;
    font-size: var(--font-size-normal);
}

.page-header-logout a {
    color: white;
    padding: 10px;
    margin-left: 10px;
}


.page-body {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.page-left-menu {
    width: 180px;
    display: flex;
    flex-direction: column;
    padding: 10px 0px;
    border-right: 1px solid rgb(200, 200, 200);
    height: calc(100vh - 50px);
    overflow-y: auto;
}

.page-left-menu-container {
    display: flex;
    flex-direction: column;
}

.menu-items {
    display: flex;
    flex-direction: column;

}

.menu-items-title {
    padding: 10px 10px;
    font-size: var(--font-size-normal-plus);
    font-weight: bold;
    color: black;
    /* background-color: #e0e0e0; */
    border-bottom: 1px solid var(--fill-back-color);
    margin: 0px 10px 0px 5px;
}

.menu-item {
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.menu-item a {
    padding: 10px;
    color: var(--text-light-dard-color);
    margin: 2px 0px;
    font-size: .9rem;
    border-radius: 5px;
}


.menu-item a.menu-item-selected {
    background-color: var(--primary-color);
    color: white;
}

.menu-item a:hover {
    background-color: var(--fill-back-color);
    color: black;
}

.page-right-content {
    flex: 1;
    padding: 20px 20px;
    height: calc(100vh - 50px);
    overflow-y: auto;
}

.page-right-title {
    font-weight: var(--text-bold-2);
    font-size: var(--font-size-title);
    margin-bottom: 20px;
}

.page-head-ops {
    padding: 5px 0px;
}

.page-search-ops {
    padding: 10px 0px;
}

/* common component */
.help-tooltip {
    margin-left: 10px;
    font-size: 20px;
    color: gray;
}

.btn {
    cursor: pointer;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 10px;
    min-width: 120px;
    font-size: var(--font-size-normal);
    border-radius: 20px;

}

.btn:hover {
    background-color: var(--primary-trans-color);
}

.btn-default {
    background-color: white;
    color: black;
    border: 1px solid var(--gray-1)
}

.btn-default:hover {
    border: 1px solid black;
    background-color: white;
}

/* pop message window */
.pop_wrapper {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

}

.pop_loading_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
}

.pop_loading_icon {
    background-image: url("/image/merchant/loading.gif");
    background-size: cover;
    width: 50px;
    height: 50px;
}

.pop_loading_new_container {
    position: fixed;
    width: 100%;
    height: 100vh;
    display: none;
    left: 0px;
    top: 0px;
}

.pop_loading_new_wrapper {
    position: fixed;
    right: 20px;
    bottom: 20px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(247, 247, 247);
    border-radius: 5px;
    padding: 10px;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    max-width: 200px;
}

@keyframes loading-icon-rotate {
    100% {
        transform: rotate(360deg);
    }
}

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


.pop_msg_container {
    max-width: 500px;
    min-width: 300px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.pop_msg_body {
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    padding: 0px 20px;
}

.pop_title {
    padding: 5px 5px;
}

.pop_title_text {
    font-weight: bold;
    font-size: 1rem;
}

.pop_container_right {
    display: flex;
    flex-direction: column;
    flex:1;
    justify-content: center;
    align-items: center;
}

.pop_container_top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.pop_close {
    cursor: pointer;
}

.pop_msg_content {
    padding: 20px 0px 20px 10px;
    line-height: 1.5rem;
    text-align: center;
    font-size: var(--font-size-normal);
}

.pop_container_bottom {
    padding: 30px 0px 15px 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
}

/* login page */

.login-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    background: url("/image/merchant/login-bg.png");
    background-size: cover;
    color: white;
    padding-left: 100px;
}

.login-title {
    font-weight: var(--text-bold-1);
    font-size: 3rem;
    padding: 1rem;
    flex:1;
    display: flex;
    align-items: end;
}

.login-form {
    padding: 1rem;
    flex:1;
}
.login-footer {
    color:white;
    text-align: center;
    padding: 10px;
    font-size: var(--font-size-small);
}


/*  add item or edit item */

.addon-item-container {
    padding: 10px 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.addon-item {
    border: 2px solid var(--primary-color);
    display: inline;
    padding: 3px 10px;
    margin-right: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.size-info {
    flex:1;
    font-weight: var(--text-bold-2);
}

.selected-addon-item {
    border:1px solid orange;
    background-color: lightyellow;
}

.unselected-addon-item {
    border: 1px solid gray;
    background-color: white;
}


/* activate page */
.activate-container {
    padding: 50px 0px;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
}
.activate-form-title {
    padding: 10px 0px 20px 0px;
    font-weight: var(--text-bold-2);
    font-size: 1rem;
}

.activate-setting {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.activate-title {
    font-weight: var(--text-bold-2);
    font-size: 1.5rem;
    padding: 10px;
    text-align: center;
}

.activate-info {
    padding: 10px;
}

.activate-tips {
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5rem;
}

.activate-form {
    padding: 20px 0px;
    overflow: hidden;
    width: 100%;
}

/* select shop */
.select-shop-container {
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;

}
.select-shop-inner {
    background-color: white;
    border-radius: 10px;
    width: 40%;
    padding: 20px;
}
.select-shop-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px;
}

.select-shop-name {
    flex:1;
    font-size: 1rem;
}

.select-shop-address{
    margin-top: 10px;
    font-size: 14px;
    color: var(--text-secondary-color);
}

.select-shop-role {
}

.select-shop-item:hover, .select-shop-item:hover .select-shop-address {
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
}

/* index page */
.index-blocks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}
.index-block {
    border-radius: 5px;
    margin-right: 20px;
    margin-bottom: 20px;
    min-width: 160px;
    border: 1px solid var(--color-dividing-line);
    border-radius: 5px;
}

.index-block-title {
    /* background-color: var(--primary-color); */
    /* color: white; */
    padding: 0px 10px 10px 10px;
    text-align: center;
    font-size: var(--font-size-small);
    color: var(--text-secondary-color);
}
.index-block-value {
    font-weight: bold;
    text-align: center;
    padding: 20px;
    font-size: var(--font-size-large);
}

.setting-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid gray;
    max-width: 80%;
}

.settig-check-title {
    flex:1;
    font-size: var(--font-size-normal);
}

.setting-check-status {
    padding-left:20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.setting-check-status img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.index-ops {
    display: flex;
    flex-direction: column;
    padding: 10px 0px;
}
.index-op {
    display: flex;
    flex-direction: row;
    align-items:baseline;
    padding: 10px;
    border: 1px solid gray;
    margin-bottom: 10px;
    cursor: pointer;

}
.index-op-title {
    width: 200px;
}

.index-shop-status {
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
}

/* reservation */
.customer-msg {
    background-color: var(--primary-color);
    color: white;
    padding: 10px;
    margin: 10px 0px;
}


.r-detail-record-type {
    font-size: .8rem;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
    color: white;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
}


.r-detail-record-type-0 {
    background-color: green;
  }
  
  .r-detail-record-type-1 {
    background-color: green;
  }
  
  .r-detail-record-type-2 {
    background-color: red;
  }
  
  .r-detail-record-type-3 {
    background-color: green;
  }
  
  .r-detail-record-type-4 {
    background-color: red;
  }

  .r-detail-record-type-5 {
    background-color: red;
  }

  .r-detail-info {
    display: flex;
    flex-direction: column;
  }

  .r-detail-info {
    font-size: 1rem;
  }

  .r-detail-info-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0px;
  }

  .r-detail-info-item div:nth-child(1) {
    width: 30%;
  }

  .r-detail-info-item div:nth-child(2) {
    flex:1;
  }

  .r-detail-user {
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .r-detail-shop {
    background-color: var(--gray-1);
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  

  /* profile preview */
  .profile-preview {
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    border: 1px solid var(--text-secondary-color);
    padding: 10px;
    width: 450px;
  }

  .profile-photo-container {
    border-radius: 75px;
    height: 150px;
    width: 150px;
    overflow: hidden;
  }

  .profile-photo {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .profile-right {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    overflow: hidden;
  }

  .profile-name {
    font-size: var(--font-size-normal);
    font-weight: bold;
    padding: 10px 0px 5px 0px;
  }

  .profile-line {
    font-size: var(--font-size-normal);
    color: var(--text-secondary-color);
  }

  .tips {
    font-size: var(--font-size-small);
    color: black;
    padding: 10px 10px;
    background-color: #e6f6e6;
    border-left: 5px solid #009400;
    border-radius: 5px;
    line-height: 1.5rem;
    max-width: 800px;
    width: fit-content;
  }

  .tips-warning {
    font-size: var(--font-size-small);
    color: black;
    padding: 10px 10px;
    background-color: rgb(254, 240.3, 240.3);
    border-radius: 5px;
    line-height: 1.5rem;
    border-left: 5px solid rgb(196, 86.4, 86.4);
  }

  .message-page-container {
    padding: 50px 0px;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
  }

  .message-page-body-container {
    width: 50%;
  }

  .message-page-body {
    background-color: white;
    border-radius: 10px;
    padding: 50px 20px 50px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .message-page-title {
    font-weight: var(--text-bold-2);
    font-size: 1.5rem;
    padding: 20px 10px 0px 10px;
    text-align: center;
  }

  .message-page-tips {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 10px;
    text-align: center;
    color: var(--text-secondary-color);
  }
  .message-page-image {
    width: 50px;
    height: 50px;
  }

  .message-page-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .message-page-header-title {
    font-weight: bold;
    font-size: 2rem;
    padding: 20px 10px;
    color: white;
  }

  .message-page-header-right a {
    color: white;
    text-decoration: underline;
  }

  .message-page-footer {
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .message-page-footer a {
    color: white;
    text-decoration: underline;
  }

  .mobile-page-header {
    display: none;
  }

  .page-left-profile {
    display: none;
  }


.apps-info-item {
    border:1px solid gray;
    padding:3px;
    border-radius:5px;
    display:inline-block;
    background-color: var(--fill-back-color);
    transition: background-color 0.3s ease;
}

.apps-info-item:hover {
    /* slightly lighter than rgb(73, 73, 73); */
    background-color: rgb(100, 100, 100);
    cursor: pointer;
}

.store-icon {
    /* fill: white; */
}
  /* for mobile */
  @media (max-width: 768px) {
    .message-page-body-container {
      padding: 20px 0px;
      max-width: 90%;
    }

    .pop_msg_container {
        max-width: 90%;
        min-width: 70%;
    }

    .el-form-item {
        flex-direction: column;
    }

    .el-form-item__label {
        justify-content: flex-start;
        font-weight: bold;
    }

    .pop_msg_container {
        max-width: 90%;
    }

    .el-select {
        width: 100%;
    }

    .el-input {
        width: 100%;
    }

    .el-date-editor.el-input, .el-date-editor.el-input__wrapper {
        width: 100%;
    }

    .el-textarea {
        width: 100%;
    }

    .el-form-item__content {
        width: 100%;
    }

    .activate-container{
        padding: 10px 0px;
    }

    .activate-form-title {
        border-bottom: 1px solid var(--color-dividing-line);
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .page-header {
        display: none;
    }

    .mobile-page-header {
        background-color: var(--primary-color);
        color: white;
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
        align-items: center;
    }

    .page-left-menu-collapse {
        display: none;
    }
    .page-left-menu {
        display: none;
        position: absolute;
        left: -100%;
        top: 95px;
        background-color: white;
        z-index: 9999;
        width: 100%;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        border-right: none;
    }

    .page-right-content {
        padding-left: 10px;
    }

    .page-left-menu-collapse {
        display: none;
    }

    .tips {
        font-size: var(--font-size-normal);
    }

    .tips-warning {
        font-size: var(--font-size-normal);
    }


    .page-left-profile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    .pop_msg_content {
        font-size: var(--font-size-normal-bigger);
    }

    .el-dialog {
        width: 90%;
        min-width: auto;
    }

    #button_popup_close {
        width: 150px;
        border-radius: 20px;
    }

    .pop_container_bottom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
    }

    .pop_container_bottom button {
        width: 180px;
    }

    .el-input-300 {
        width: 100%;
    }
    
    .el-input-400 {
        width: 100%;
    }
    
    .el-input-500 {
        width: 100%;
    }
    
    .el-input-600 {
        width: 100%;
    }
    
    .el-input-700 {
        width: 100%;
    }

    .el-button--primary {
        width: 100%;
        padding: 20px 0px;
    }

    .el-input__inner {
        padding: 20px 0px;
    }

    .el-select__wrapper {
        padding: 13px 12px;
    }

  }