/* root set */
:root {

  --color-primary:#ED594D;
  --color-primary-black:#111;
  --color-primary-tint:#E9E9E9;
  --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;

  --m-font-size-subtab-basic:15px;
  --m-font-size-subtab-larger:17px;
  --m-font-size-subtab-largest:19px;


}

/* _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,
._sys-m-only-flx,
._sys-m-only-block {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-no-ellipsis {text-overflow:unset !important;white-space:unset !important;}

/* _sys form */
._sys-ip-switch {display:inline-flex;align-items:center;min-height:24px;}
._sys-ip-switch input[type="checkbox"]{height:0;width:0;visibility:hidden;}
._sys-ip-switch input[type="checkbox"] + label {position:relative;display:block;width:44px !important;height:27px !important;line-height:27px !important;padding-left:0 !important;background:#DADADA;border-radius:99px;cursor:pointer;text-indent:-9999px;}
._sys-ip-switch input[type="checkbox"] + label:before {display:none !important;}
._sys-ip-switch input[type="checkbox"] + label:after {content:'';opacity:1 !important;width:20px !important;height:20px !important;position:absolute;left:3px !important;top:3px !important;background-image:none !important;background:#fff !important;box-shadow: 0px 0px 7px 0px #0000001C;border-radius:99px;transform:scale(1) !important;transition: 0.1s;}
._sys-ip-switch input[type="checkbox"]:checked + label {background:var(--color-primary);padding-left:0 !important;}
._sys-ip-switch input[type="checkbox"]:checked + label:after {left:100% !important;transform:translateX(calc(-100% - 3px)) scale(1) !important}
._sys-ip-switch input[type="checkbox"] + label:active:after {width:10px;}

/* _sys alarm set */
._sys-alarm-set {display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 22px;background-color:#fff;border-top:1px solid #F3F3F3}
._sys-alarm-set .txt {color:#999;font-size:15px;font-weight:500;line-height:140%;letter-spacing:-0.4px;}
._sys-alarm-set:has(input[type="checkbox"]:checked) .txt {color:var(--color-primary);}

/* _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 ._sys-list-info {height:20px;display:flex;align-items:center;margin-top:3px;line-height:150%;}
._sys-list-item ._sys-list-info .updated {font-size:13px;font-weight:400;color:#999;line-height:100%;letter-spacing:-0.4px;}
._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-alarm-wrapper ._sys-list-item ._sys-list-desc {margin-top:2px;font-size:16px;line-height:150%;}
body.larger ._sys-list-item ._sys-list-title,
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;}
body.larger ._sys-list-item ._sys-list-info {height:21px}
body.larger ._sys-list-item ._sys-list-info .updated {font-size:14px;}
/* 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,
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;}
body.largest ._sys-alarm-wrapper ._sys-list-item ._sys-list-desc {font-size:18px;margin-top:2px;line-height:150%;}
body.largest ._sys-list-item ._sys-list-info {height:23px;}
body.largest ._sys-list-item ._sys-list-info .updated {font-size:15px;}

.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-list-type-alarm */
._sys-alarm-wrapper ._sys-list-item {padding:18px 30px;border-radius:10px}
._sys-alarm-wrapper ._sys-list-item.important {background-color:#FFFFF5;}
._sys-alarm-wrapper ._sys-list-item ._sys-list-title {line-height:150%;}
._sys-alarm-wrapper ._sys-list-item ._sys-list-profile {padding-left:52px;padding-top:0;}
._sys-alarm-wrapper ._sys-list-item ._sys-list-thumb {width:40px;height:40px;border:0;}
._sys-alarm-wrapper ._sys-list-item ._sys-list-desc {margin-top:2px;color:#666;font-size:14px;line-height:150%;}
._sys-alarm-wrapper ._sys-list-item + ._sys-list-item {margin-top:12px;}

/* _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-weight:700;border:none;}
._sys-subtab-group ._sys-subtab-item .bt-tab span {display:block;line-height:100%;font-size:var(--font-size-subtab-basic);}
._sys-subtab-group.type-user ._sys-subtab-item .active {background-color:#000;color:#fff;}
._sys-subtab-group.type-driver ._sys-subtab-item .active {background-color:#000;color:#fff;}
body.larger ._sys-subtab-group ._sys-subtab-item .bt-tab > span {font-size:var(--font-size-subtab-larger);}
body.largest ._sys-subtab-group ._sys-subtab-item .bt-tab > span {font-size:var(--font-size-subtab-largest);}

/* _sys-dropdown-menu */
._sys-dropdown-menu {position:absolute;background-color:#fff;box-shadow:0px 1px 10px 0px #00000014;border-radius:9px;border:1px solid #E9E9E9}

/* _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-black);}
._sys-btn-cancel {color:#333;background-color:var(--color-primary-tint);font-weight:400;}

/* 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-m-only-flx {display:flex !important;}
  ._sys-m-only-block {display:block !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-item + ._sys-list-item {margin-top:10px;}

  /* _sys-list-type-chat */
  ._sys-chat-wrapper {margin-top:0;}

  /* _sys-list-type-alarm */
  ._sys-alarm-wrapper ._sys-list-group {padding:20px;}
  ._sys-alarm-wrapper ._sys-list-item {padding:16px;}

  /* _sys-subtab */
  ._sys-subtab-wrapper {padding:14px 20px;background-color:#fff}
  ._sys-subtab-group ._sys-subtab-item .bt-tab span {font-size:var(--m-font-size-subtab-basic);}
  body.larger ._sys-subtab-group ._sys-subtab-item .bt-tab > span {font-size:var(--m-font-size-subtab-larger);}
  body.largest ._sys-subtab-group ._sys-subtab-item .bt-tab > span {font-size:var(--m-font-size-subtab-largest);}

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

}
