/* root set */
:root {

    --color-primary:#ED594D;
    --color-primary-tint:#FFE3E3;
    --color-label-active-bg:#32C563;
    --color-label-active-text:#fff;
    --color-label-passive-bg:#E9E9E9;
    --color-label-passive-text:#757575;
  
    --font-size-subtab-basic:16px;
    --font-size-subtab-larger:18px;
    --font-size-subtab-largest:20px;
  
  }
  
  /* _sys-css-common */
  ._sys-flex-mid-left {display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;}
  ._sys-flex-mid-center {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
  ._sys-flex-mid-right {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
  ._sys-flex-mid-btw {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}
  ._sys-iflex-mid-left {display:inline-flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;}
  ._sys-iflex-mid-center {display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;}
  ._sys-iflex-mid-right {display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
  ._sys-iflex-mid-btw {display:inline-flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}
  
  /* _sys sub common */
  ._sys-maintitle {padding:50px 0 40px 0;font-size:40px;font-weight:700;letter-spacing:-0.4px;text-align:center;line-height:48px;}
  ._sys-icon {text-indent:-9999px;overflow:hidden;}
  ._sys-m-br {display:none !important;}
  ._sys-m-only {display:none !important;}
  ._sys-page-prev {display:inline-flex;width:40px;height:40px;border:0;background:url("/static/images/_sys-ico-page-prev-white.svg") no-repeat 50% 50%;}
  
  /* _sys-list-common */
  ._sys-list-group * {box-sizing:border-box;}
  ._sys-list-item {position:relative;padding:28px 24px;background-color:#fff;border-radius:12px;box-shadow:0px 0px 20px 0px #0000000F;}
  ._sys-list-item ._sys-list-detail-link {display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;}
  ._sys-list-item + ._sys-list-item {margin-top:16px;}
  ._sys-list-item ._sys-list-title {width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:16px;font-weight:700;color:#000;letter-spacing:-0.4px;line-height:20px}
  ._sys-list-item ._sys-list-title .icn-wrapping-badge {display:inline-block;vertical-align:middle;margin-top:-2px;width:14px;height:14px;background:url(/static/images/icn_wrapping.svg) no-repeat 50% 50% !important;}
  ._sys-list-item ._sys-list-title .route {display:flex;align-items:center;gap:3px;font-size:16px;line-height:20px;font-weight:700;color:#000;letter-spacing:-0.4px;}
  ._sys-list-item ._sys-list-status {min-height:20px;margin-top:8px;}
  ._sys-list-item ._sys-list-status .badge {display:inline-flex;justify-content:center;align-items:center;height:20px;margin-right:4px;border-radius:100px;color:var(--color-label-active-text);font-size:12px;line-height:100%;white-space:nowrap;}
  ._sys-list-item ._sys-list-status .badge.is-reserved {width:52px;background-color:var(--color-label-active-bg);}
  ._sys-list-item ._sys-list-status .date {color:#999;font-size:13px;font-weight:500;letter-spacing:-0.4px;}
  ._sys-list-item ._sys-list-desc {width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-top:12px;font-size:15px;line-height:18px;letter-spacing:-0.4px;color:#333}
  ._sys-list-item:has(._sys-list-func) ._sys-list-desc {padding-right:120px}
  ._sys-list-item ._sys-list-func {position:absolute;right:24px;top:28px;bottom:30px;width:100px;text-align:right;}
  ._sys-list-item ._sys-list-func .count {position:absolute;top:50%;right:0;transform:translateY(-50%);display:inline-block;min-width:18px;height:18px;border-radius:50%;line-height:18px;text-align:center;color:#fff;font-size:12px;font-weight:700;background-color:var(--color-primary);}
  ._sys-list-item ._sys-list-func .updated {position:absolute;bottom:0;right:0;display:block;line-height:14.4px;color:#999;font-size:12px;letter-spacing:-0.4px}
  ._sys-list-item ._sys-list-func .badge {position:absolute;top:50%;right:0;transform:translateY(-50%);display:inline-flex;justify-content:center;align-items:center;height:20px;padding:0 5px;border-radius:100px;font-size:12px;line-height:100%;white-space:nowrap;}
  ._sys-list-item ._sys-list-func .badge.is-chat-end {background-color:var(--color-label-passive-bg);color:var(--color-label-passive-text)}
  /* larger */
  body.larger ._sys-list-item ._sys-list-status {margin-top:12px}
  body.larger ._sys-list-item ._sys-list-desc {margin-top:15px;line-height:19px;}
  body.larger ._sys-list-item ._sys-list-title .route {font-size:18px;}
  body.larger ._sys-list-item ._sys-list-status .badge {width:55px;height:21px;font-size:13px;}
  body.larger ._sys-list-item ._sys-list-status .date {font-size:14px;}
  body.larger ._sys-list-item ._sys-list-func .badge {font-size:13px;height:21px}
  body.larger ._sys-list-item ._sys-list-desc {font-size:16px;}
  /* largest */
  body.largest ._sys-list-item ._sys-list-status {margin-top:12px}
  body.largest ._sys-list-item ._sys-list-desc {margin-top:15px;line-height:20px;}
  body.largest ._sys-list-item ._sys-list-title .route {font-size:20px;}
  body.largest ._sys-list-item ._sys-list-status .badge {width:59px;height:22px;font-size:14px;}
  body.largest ._sys-list-item ._sys-list-status .date {font-size:15px;}
  body.largest ._sys-list-item ._sys-list-func .badge {font-size:14px;height:22px}
  body.largest ._sys-list-item ._sys-list-desc {font-size:17px;}
  
  .type-user ._sys-list-item {padding:30px}
  .type-user ._sys-list-item ._sys-list-desc {margin-top:10px;}
  .type-user ._sys-list-item ._sys-list-status {position:absolute;bottom:-4px;left:2px}
  .type-user ._sys-list-item ._sys-list-func .badge,
  .type-user ._sys-list-item ._sys-list-func .count {margin-top:-8px}
  .type-user ._sys-list-item ._sys-list-func .updated {bottom:auto;top:7px;}
  .type-user ._sys-list-item:has(._sys-list-func) ._sys-list-title {padding-right:50px}
  .type-user ._sys-list-item:has(._sys-list-func) ._sys-list-desc {padding-right:40px}
  ._sys-list-item ._sys-list-profile {position:relative;padding-left:64px;min-height:56px;padding-top:4px}
  ._sys-list-item ._sys-list-thumb {position:absolute;top:0;left:0;width:56px;height:56px;border-radius:50%;overflow:hidden;border:0.5px solid #DADADA}
  ._sys-list-item ._sys-list-thumb img {display:block;width:100%;height:100%;object-fit:contain;}
  ._sys-list-item ._sys-list-bottom {padding-top:16px;margin-top:15px;border-top:1px solid #F3F3F3}
  ._sys-list-item .resrved-info {display:inline-flex;align-items:center;height:17px;}
  ._sys-list-item .resrved-info span {display:inline-flex;position:relative;color:#757575;font-size:14px;line-height:1;font-weight:500;letter-spacing:-0.4px;}
  ._sys-list-item .resrved-info span + span {padding-left:5px;margin-left:5px}
  ._sys-list-item .resrved-info span + span:before {content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);display:block;width:1px;height:12px;background:#757575;}
  ._sys-list-item .detail-info {height:17px;}
  ._sys-list-item .est-price {display:inline-block;font-size:14px;font-weight:700;letter-spacing:-0.4px;line-height:1;color:var(--color-primary)}
  
  /* _sys-list-type-chat */
  ._sys-chat-wrapper {max-width:760px;margin:40px auto 0 auto;}
  
  /* _sys-subtab */
  ._sys-subtab-wrapper {display:flex;justify-content:center;}
  ._sys-subtab-wrapper * {box-sizing:border-box;}
  ._sys-subtab-group {display:inline-flex;align-items:center;gap:4px;padding:4px;background-color:#E9E9E9;border-radius:100px;}
  ._sys-subtab-group ._sys-subtab-item .bt-tab {display:inline-flex;align-items:center;justify-content:center;min-width:154px;padding:12px 10px;border-radius:100px;color:#999;font-size:var(--font-size-subtab-basic);font-weight:700;border:none;}
  ._sys-subtab-group ._sys-subtab-item .bt-tab span {display:block;line-height:100%;}
  ._sys-subtab-group.type-user ._sys-subtab-item .active {background-color:var(--color-primary);color:#fff;}
  ._sys-subtab-group.type-driver ._sys-subtab-item .active {background-color:#fff;color:var(--color-primary);}
  body.larger .bt-tab > span {font-size:var(--font-size-subtab-larger);}
  body.largest .bt-tab > span {font-size:var(--font-size-subtab-largest);}

  /* _sys-btn-group */
  ._sys-btn-group {display:flex;margin-top:30px;gap:8px;}
  ._sys-btn {flex:1;display:inline-flex;align-items:center;justify-content:center;height:56px;font-size:16px;font-weight:700;border-radius:10px;box-sizing:border-box;border:0;}
  ._sys-btn-submit {color:#fff;background:var(--color-primary);}
  ._sys-btn-cancel {color:var(--color-primary);background-color:var(--color-primary-tint)}
  
  /* debug */
  .test-resizer {position:fixed;top:100px;right:200px;z-index:10}
  
  @media screen and (max-width: 703px) {
  
    /* _sys sub common */
    ._sys-maintitle {display:none;}
    ._sys-m-br {display:block !important;}
    ._sys-m-only {display:inline-flex !important;}
  
    /* _sys-list-common */
    ._sys-list-group {padding:20px 16px 45px 16px}
    ._sys-list-item {padding:18px 16px}
    ._sys-list-item:has(._sys-list-func) ._sys-list-desc {padding-right:60px}
    ._sys-list-item ._sys-list-func {width:50px;bottom:20px;right:16px;top:18px}
    .type-user ._sys-list-item {padding:16px}
    ._sys-list-item ._sys-list-bottom {padding-top:12px;margin-top:11px;}
    .type-user ._sys-list-item ._sys-list-func .badge, 
    .type-user ._sys-list-item ._sys-list-func .count {margin-top:-4px}
  
    /* _sys-list-type-chat */
    ._sys-chat-wrapper {margin-top:0;}
  
    /* _sys-subtab */
    ._sys-subtab-wrapper {padding:14px 20px;background-color:#fff}

  
    /* debug */
    .test-resizer {position:fixed;top:0;right:0;left:0;z-index:100}
  
  }
