@charset "UTF-8";
/* Poppins Font - latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins Font - latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins Font Bold - latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins Font Bold - latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins Font Black - latin-ext */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5Z1JlFc-K.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins Font Black - latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5Z1xlFQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
@media all and (orientation : landscape) and (max-device-width: 640px) { 
	h2{color:red;}横屏时字体红色
} 

@media all and (orientation : portrait) and (max-device-width: 767px){ 
	h2{color:green;}竖屏时字体绿色
} 
*/
.alert_overlay {
  z-index: 9995;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.alert_overlay .alert_msg {
  opacity: 0;
  max-width: 400px;
  width: 100%;
  position: absolute;
  left: 50%;
  background-color: #fff;
  -webkit-transform: translate(-50%, 100px) scale(0.5);
  transform: translate(-50%, 100px) scale(0.5);
  transition: all 0.2s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}
.alert_overlay.alert_show .alert_msg {
  opacity: 1;
  -webkit-transform: translate(-50%, 100px) scale(1);
  transform: translate(-50%, 100px) scale(1);
}

.alert_overlay .alert_msg .alert_title {
  font-size: 1.25rem;
  padding: 10px 15px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #c2cadd;
}
.alert_overlay .alert_msg .alert_content {
  padding: 10px 15px;
  font-size: 0.875rem;
  display: flex;
  justify-content: flex-start;
}
.alert_msg.alert_confirm .alert_content {
  padding: 15px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  min-height: 200px;
}

.alert_overlay .alert_msg .alert_content .alert_items {
  width: 100%;
  display: flex;
  margin-bottom: 3px;
}
.alert_overlay .alert_msg .alert_content .alert_items .alert_item {
  padding-right: 5px;
}
.alert_overlay .alert_msg .alert_buttons {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #c2cadd;
  padding: 10px;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior-y: contain;
}
.alert_msg.alert_confirm .alert_buttons {
  justify-content: center;
}

.alert_overlay .alert_msg .alert_buttons .alert_btn {
  -webkit-appearance: none;
  appearance: none;
  padding: 10px 15px;
  min-width: 60px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #c2cadd;
  cursor: pointer;
  font-size: 0.875rem;
}
.alert_overlay .alert_msg .alert_buttons .alert_btn:not(:last-child) {
  margin-right: 15px;
}
.alert_overlay .alert_msg .alert_buttons .alert_btn:hover:hover, .alert_overlay .alert_msg .alert_buttons .alert_btn:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.alert_overlay .alert_msg .alert_buttons .alert_btn.alert_btn_ok {
  background-color: #008c95;
  border: 1px solid #008c95;
  color: #fff;
}
.alert_overlay .alert_msg .alert_buttons .alert_btn.alert_btn_cancel {
  background-color: #ff3f3f;
  border: 1px solid #ff3f3f;
  color: #fff;
}

html, body {
  touch-action: manipulation;
}

html {
  font-size: 100.01%;
  font-size: 16px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /*@media only screen and (min-width: 1821px) {
  	font-size:32px;
  }*/
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: scroll;
  line-height: 1.33;
  letter-spacing: 0.5px;
  font-family: "Microsoft YaHei", Poppins, "Noto Sans TC", "Noto Sans SC", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  color: #282828;
  min-height: 100vh;
  /*max-width:1920px;	*/
  scroll-behavior: smooth;
}
body.modal-open {
  overflow-y: hidden;
}
body.modal-open section, body.modal-open nav {
  filter: blur(5px);
}
body.topmenufixed {
  padding-top: 135px;
}
@media (max-width: 992px) {
  body {
    line-height: 1.33;
    padding-top: 0px !important;
  }
  body.topmenufixed {
    padding-top: 110px !important;
  }
}
@media (max-width: 360px) {
  body {
    width: 100%;
    min-width: 360px;
    overflow-x: scroll !important;
  }
}

h1, h2, h3, h4, h5, h6, strong {
  /*all: initial;
  *{all: unset;}*/
  font-family: "Microsoft YaHei", Poppins, "Noto Sans TC", "Noto Sans SC", sans-serif;
  font-size: unset;
  font-weight: unset;
  margin-block-start: unset;
  margin-block-end: unset;
}

a {
  text-decoration: unset;
}
a.active, a:hover {
  text-decoration: unset;
}

*:focus {
  outline: none !important;
}

p {
  margin: 0;
}

/*ul,li{list-style:none;padding-left:0px;}*/
img {
  max-width: 100%;
}

* {
  box-sizing: border-box;
}

/**[data-self],*[data-blank],*[data-lang]{opacity:.25;}*/
*[data-href]:not([data-href=""]), *[data-self]:not([data-self=""]), *[data-blank]:not([data-blank=""]), *[data-lang]:not([data-lang=""]) {
  cursor: pointer;
  opacity: 1;
}

.fr-emoticon.fr-emoticon-img {
  background-repeat: no-repeat !important;
  font-size: inherit;
  height: 1em;
  width: 1em;
  min-height: 20px;
  min-width: 20px;
  display: inline-block;
  margin: -0.1em 0.1em 0.1em;
  line-height: 1;
  vertical-align: middle;
}

.search-container .search-items .search-item.header, .search-container .search-items .search-item.matchtitle, .pageoptions-container .float-container .float-subcon-btns .float-subcon-btn.iscurrent, .pageoptions-container .float-container .float-subcon-btns .float-subcon-btn.inactive, .waitingedit, .activing.btn, .activing.btnnobgc, .activing.btnupload, .activing.btngreen_light, .activing.btnyellow, .activing.btnpink, .activing.btnorange_yellow, .activing.btnorange_red, .activing.btnorange, .activing.btnpurple, .activing.btngreen, .activing.btnblue_dark, .activing.btnblue_light, .activing.btnblue, .activing.btnred, .activing.btnbrown, .activing.btnblack, .activing.btnwhite, .activing.btngray, .activing.btnfullwidth, .pagination-container .pagination-pages .pagination-page.active, .clickdisabled {
  pointer-events: none;
}

section#error_pages {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section#error_pages .error_container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 800px;
  min-height: 500px;
}
section#error_pages .error_container .error_content {
  width: 50%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section#error_pages .error_container .error_content h1 {
  margin-bottom: 0px;
}
section#error_pages .error_container .error_img {
  flex: 2;
}
@media (max-width: 992px) {
  section#error_pages .error_container {
    flex-direction: column;
  }
  section#error_pages .error_container .error_content {
    width: 100%;
  }
}

/*
#serialcookie{position:fixed;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:25px;background-color:rgba(100,100,100,0.75);font-size:14px;color:#000;text-align:center;line-height:1.5;}
#serialcookie-col-1{}
#serialcookie-col-2{display:flex;margin-left:50px;}
#serialcookie-reject, #serialcookie-accept{padding:15px 20px;cursor:pointer;transition:300ms;}
#serialcookie-reject{border:2px solid rgba(0, 0, 0, .2);color:#000;}
#serialcookie-reject:hover{border-color:rgba(0, 0, 0, .3);}
#serialcookie-accept{margin-left:20px;background-color:#000;color:#fff;}
#serialcookie-accept:hover{transform:translateY(-3px);box-shadow:0 10px 15px rgba(0, 0, 0, .15);}
*/
#serialcookie {
  z-index: 9999;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background-color: rgba(40, 40, 40, 0.75);
  font-size: 0.875rem;
  color: #fff;
  text-align: center;
  line-height: 1.5;
}
#serialcookie-col-2 {
  display: flex;
  margin-left: 50px;
}

#serialcookie-reject, #serialcookie-accept {
  padding: 15px 20px;
  cursor: pointer;
  transition: 300ms;
}

#serialcookie-reject {
  border: 2px solid rgba(40, 40, 40, 0.2);
  color: #282828;
}
#serialcookie-reject:hover {
  border-color: rgba(40, 40, 40, 0.3);
}

#serialcookie-accept {
  margin-left: 20px;
  background-color: #282828;
  color: #fff;
}
#serialcookie-accept:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px rgba(40, 40, 40, 0.15);
}

.ishidden {
  display: none !important;
  visibility: hidden !important;
}

.notvisible {
  visibility: hidden !important;
}

.clickdisabled {
  border: 1px solid #f2f3f5 !important;
  background-color: #c2cadd !important;
  color: #f2f3f5 !important;
  cursor: default !important;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior-y: contain;
}

.setCookieAgree {
  z-index: 9999;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(40, 40, 40, 0.75);
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease 0s;
}
.setCookieAgree.active {
  opacity: 1;
  transition: opacity 0.5s ease 0s;
}
.setCookieAgree .setCookieAgree-container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.setCookieAgree .setCookieAgree-container .description {
  text-align: left;
  color: #fff;
}
.setCookieAgree .setCookieAgree-container .btngroup {
  margin-left: 30px;
}

.container-fluid, .container, .container-xs {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 100%;
}

.container-xs {
  max-width: 600px;
}

.container {
  max-width: 1500px;
}
@media (max-width: 1600px) {
  .container {
    max-width: 1200px;
  }
}
@media (max-width: 1280px) {
  .container {
    max-width: 1050px;
  }
}
@media (max-width: 992px) {
  .container {
    max-width: 920px;
  }
}
@media (max-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (max-width: 576px) {
  .container {
    max-width: 540px;
  }
}

.container-flex {
  display: flex;
}

.container-offset {
  padding-left: 0px;
  padding-right: 0px;
}

.share-container {
  display: flex;
  padding-top: 30px;
  cursor: pointer;
}
.share-container img {
  height: 50px;
}

.share-items {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  flex-wrap: wrap;
}
.share-items .share-item {
  margin-bottom: 15px;
  border: 1px solid #8e8e90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((100% - 30px) / 2);
  height: 40px;
  cursor: pointer;
}
.share-items .share-item svg {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.share-items .share-item:hover {
  background-color: #fafafa;
}
.share-items .share-item.fullwidth {
  width: 100%;
  display: flex;
}
.share-items .share-item.fullwidth input {
  flex: 2;
  height: 100%;
  border: none;
  border-right: 1px solid #8e8e90;
  padding: 3px 5px;
}
.share-items .share-item.fullwidth span {
  width: 120px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.share-items .share-item.fullwidth:hover {
  background-color: transparent;
}
.share-items .share-item.fullwidth:hover span {
  background-color: #fafafa;
}

.pagination-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 15px auto;
}
.pagination-container .pagination-pages {
  display: flex;
}
.pagination-container .pagination-pages .pagination-page {
  padding: 5px 10px;
  cursor: pointer;
  margin: 3px;
  border: 1px solid transparent;
}
.pagination-container .pagination-pages .pagination-page.inactive {
  color: rgba(142, 142, 144, 0.5);
}
.pagination-container .pagination-pages .pagination-page:hover {
  background-color: rgba(142, 142, 144, 0.75);
}
.pagination-container .pagination-pages .pagination-page.active {
  border: 1px solid #8e8e90;
}

[data-tips] {
  position: relative;
}
[data-tips]:before, [data-tips]:after {
  z-index: 10;
  opacity: 0;
  position: absolute;
  -webkit-transition: all 0.18s ease-out;
  transition: all 0.18s ease-out;
}
[data-tips]:before {
  background: rgba(17, 17, 17, 0.9);
  border-radius: 4px;
  color: #fff;
  content: attr(data-tips);
  font-size: 0.75rem;
  padding: 0.5em;
  white-space: normal;
  width: 100%;
}
[data-tips]:after {
  content: "";
  border-width: 5px;
  border-style: solid;
}
[data-tips]:hover:before, [data-tips]:hover:after {
  opacity: 1;
}
[data-tips][data-tips-pos=left]:before, [data-tips][data-tips-pos=left]:after {
  top: 50%;
  -webkit-transform: translate3d(10px, -50%, 0);
  transform: translate3d(10px, -50%, 0);
}
[data-tips][data-tips-pos=left]:before {
  margin-right: 11px;
  right: 100%;
}
[data-tips][data-tips-pos=left]:after {
  margin-right: 5px;
  right: calc(100% - 4px);
  border-color: transparent transparent transparent #282828;
}
[data-tips][data-tips-pos=left]:hover:before, [data-tips][data-tips-pos=left]:hover:after {
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
[data-tips][data-tips-pos=right]:before, [data-tips][data-tips-pos=right]:after {
  top: 50%;
  -webkit-transform: translate3d(-10px, -50%, 0);
  transform: translate3d(-10px, -50%, 0);
}
[data-tips][data-tips-pos=right]:before {
  left: 100%;
  margin-left: 11px;
}
[data-tips][data-tips-pos=right]:after {
  left: calc(100% - 4px);
  margin-left: 5px;
  border-color: transparent #282828 transparent transparent;
}
[data-tips][data-tips-pos=right]:hover:before, [data-tips][data-tips-pos=right]:hover:after {
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}
[data-tips][data-tips-pos=up]:before, [data-tips][data-tips-pos=up]:after {
  left: 50%;
  -webkit-transform: translate3d(-50%, 10px, 0);
  transform: translate3d(-50%, 10px, 0);
}
[data-tips][data-tips-pos=up]:before {
  bottom: 100%;
  margin-bottom: 11px;
}
[data-tips][data-tips-pos=up]:after {
  bottom: calc(100% - 4px);
  margin-bottom: 5px;
  border-color: #282828 transparent transparent transparent;
}
[data-tips][data-tips-pos=up]:hover:before, [data-tips][data-tips-pos=up]:hover:after {
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
[data-tips][data-tips-pos=down]:before, [data-tips][data-tips-pos=down]:after {
  left: 50%;
  -webkit-transform: translate3d(-50%, -10px, 0);
  transform: translate3d(-50%, -10px, 0);
}
[data-tips][data-tips-pos=down]:before {
  margin-top: 11px;
  top: 100%;
}
[data-tips][data-tips-pos=down]:after {
  margin-top: 5px;
  top: calc(100% - 4px);
  border-color: transparent transparent #282828 transparent;
}
[data-tips][data-tips-pos=down]:hover:before, [data-tips][data-tips-pos=down]:hover:after {
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
[data-tips][data-tips-length=small]:before {
  width: 90vw;
  width: 150px;
}
[data-tips][data-tips-length=large]:before {
  width: 90vw;
  max-width: 300px;
}

.btn, .btnnobgc, .btnupload, .btngreen_light, .btnyellow, .btnpink, .btnorange_yellow, .btnorange_red, .btnorange, .btnpurple, .btngreen, .btnblue_dark, .btnblue_light, .btnblue, .btnred, .btnbrown, .btnblack, .btnwhite, .btngray, .btnfullwidth {
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior-y: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  color: #fff;
  margin: 5px;
}
.btnm0.btn, .btnm0.btnnobgc, .btnm0.btnupload, .btnm0.btngreen_light, .btnm0.btnyellow, .btnm0.btnpink, .btnm0.btnorange_yellow, .btnm0.btnorange_red, .btnm0.btnorange, .btnm0.btnpurple, .btnm0.btngreen, .btnm0.btnblue_dark, .btnm0.btnblue_light, .btnm0.btnblue, .btnm0.btnred, .btnm0.btnbrown, .btnm0.btnblack, .btnm0.btnwhite, .btnm0.btngray, .btnm0.btnfullwidth {
  margin: 0px;
}
.btn, .btnnobgc, .btnupload, .btngreen_light, .btnyellow, .btnpink, .btnorange_yellow, .btnorange_red, .btnorange, .btnpurple, .btngreen, .btnblue_dark, .btnblue_light, .btnblue, .btnred, .btnbrown, .btnblack, .btnwhite, .btngray, .btnfullwidth {
  font-size: 0.875rem;
  text-align: center;
}
.btn:hover:hover, .btnnobgc:hover:hover, .btnupload:hover:hover, .btngreen_light:hover:hover, .btnyellow:hover:hover, .btnpink:hover:hover, .btnorange_yellow:hover:hover, .btnorange_red:hover:hover, .btnorange:hover:hover, .btnpurple:hover:hover, .btngreen:hover:hover, .btnblue_dark:hover:hover, .btnblue_light:hover:hover, .btnblue:hover:hover, .btnred:hover:hover, .btnbrown:hover:hover, .btnblack:hover:hover, .btnwhite:hover:hover, .btngray:hover:hover, .btnfullwidth:hover:hover, .active.active.btn, .active.active.btnnobgc, .active.active.btnupload, .active.active.btngreen_light, .active.active.btnyellow, .active.active.btnpink, .active.active.btnorange_yellow, .active.active.btnorange_red, .active.active.btnorange, .active.active.btnpurple, .active.active.btngreen, .active.active.btnblue_dark, .active.active.btnblue_light, .active.active.btnblue, .active.active.btnred, .active.active.btnbrown, .active.active.btnblack, .active.active.btnwhite, .active.active.btngray, .active.active.btnfullwidth {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.activing.btn, .activing.btnnobgc, .activing.btnupload, .activing.btngreen_light, .activing.btnyellow, .activing.btnpink, .activing.btnorange_yellow, .activing.btnorange_red, .activing.btnorange, .activing.btnpurple, .activing.btngreen, .activing.btnblue_dark, .activing.btnblue_light, .activing.btnblue, .activing.btnred, .activing.btnbrown, .activing.btnblack, .activing.btnwhite, .activing.btngray, .activing.btnfullwidth {
  background-color: #b7b2ae;
  color: #b7b2ae;
}
.activing.btn:after, .activing.btnnobgc:after, .activing.btnupload:after, .activing.btngreen_light:after, .activing.btnyellow:after, .activing.btnpink:after, .activing.btnorange_yellow:after, .activing.btnorange_red:after, .activing.btnorange:after, .activing.btnpurple:after, .activing.btngreen:after, .activing.btnblue_dark:after, .activing.btnblue_light:after, .activing.btnblue:after, .activing.btnred:after, .activing.btnbrown:after, .activing.btnblack:after, .activing.btnwhite:after, .activing.btngray:after, .activing.btnfullwidth:after {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border-top: 1px solid #fff;
  animation: spin 2.5s linear infinite;
}

.btngroup {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.btngroup.jcsb {
  justify-content: space-between;
}
.btngroup.center {
  justify-content: center;
}

.btnfullwidth {
  width: 100% !important;
}
.btncenter {
  margin: 5px auto;
}
.btnflex2 {
  width: unset;
  flex: 2;
}
.btnlong {
  width: 270px;
}
.btnsquare {
  width: 135px;
  height: 135px;
  font-size: 1.5rem;
  font-weight: 700;
}
.btncircle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
}
.btnsmallsquare {
  width: 75px;
  height: 75px;
  font-weight: 700;
}
.btnsmall {
  width: 135px;
  height: 40px;
  border-radius: 5px;
  font-size: 0.875rem;
}
.btnsmallbig {
  width: 180px;
  border-radius: 5px;
  font-size: 0.875rem;
}
.btnsmaller {
  width: 90px;
  height: 35px;
  border-radius: 5px;
  font-size: 0.8125rem;
}
.btnsmaller.bigtext {
  font-size: 1.5rem;
}
.btnsmallauto {
  width: auto;
  min-width: 90px;
  height: 35px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  font-size: 0.8125rem;
}
.btnsmallauto.bigtext {
  font-size: 1.5rem;
}
.btnsmallest {
  width: 90px;
  height: 30px;
  border-radius: 5px;
  font-size: 0.875rem;
}
.btnsmallest.bigtext {
  font-size: 1.5rem;
}
.btngray {
  background-color: #8e8e90;
  color: #fff;
}
.btnwhite {
  background-color: #fff;
  color: #fff;
}
.btnblack {
  background-color: #282828;
  color: #fff;
}
.btnbrown {
  background-color: #630303;
  color: #fff;
}
.btnred {
  background-color: #ff3f3f;
  color: #fff;
}
.btnblue {
  background-color: #0379ab;
  color: #fff;
}
.btnblue_light {
  background-color: #3098e0;
  color: #fff;
}
.btnblue_dark {
  background-color: #024866;
  color: #fff;
}
.btngreen {
  background-color: #008c95;
  color: #fff;
}
.btnpurple {
  background-color: #8d09d7;
  color: #fff;
}
.btnorange {
  background-color: #c95c02;
  color: #fff;
}
.btnorange_red {
  background-color: #f75c2d;
  color: #fff;
}
.btnorange_yellow {
  background-color: #fa923c;
  color: #fff;
}
.btnpink {
  background-color: #fae3df;
  color: #fff;
}
.btnyellow {
  background-color: #fdda24;
  color: #fff;
}
.btngreen_light {
  background-color: #24b269;
  color: #fff;
}
.btnupload {
  background-color: rgba(3, 121, 171, 0.75);
  color: #fff;
  border-radius: 5px;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  font-size: 1rem;
  margin-top: 0;
}
.btnselected:after {
  content: "";
  width: 16px;
  height: 11px;
  background-image: url("../modules/icons/selected.webp");
  background-size: cover;
  bottom: 5px;
  right: 5px;
  position: absolute;
  display: inline-block;
}
.btnnobgc {
  border: 1px solid #c2cadd;
  background-color: transparent !important;
  color: #282828;
}
.btn.btnmt0, .btnmt0.btnfullwidth, .btnmt0.btngray, .btnmt0.btnwhite, .btnmt0.btnblack, .btnmt0.btnbrown, .btnmt0.btnred, .btnmt0.btnblue, .btnmt0.btnblue_light, .btnmt0.btnblue_dark, .btnmt0.btngreen, .btnmt0.btnpurple, .btnmt0.btnorange, .btnmt0.btnorange_red, .btnmt0.btnorange_yellow, .btnmt0.btnpink, .btnmt0.btnyellow, .btnmt0.btngreen_light, .btnmt0.btnupload, .btnmt0.btnnobgc {
  margin-top: 0;
}
.btn.btnmb0, .btnmb0.btnfullwidth, .btnmb0.btngray, .btnmb0.btnwhite, .btnmb0.btnblack, .btnmb0.btnbrown, .btnmb0.btnred, .btnmb0.btnblue, .btnmb0.btnblue_light, .btnmb0.btnblue_dark, .btnmb0.btngreen, .btnmb0.btnpurple, .btnmb0.btnorange, .btnmb0.btnorange_red, .btnmb0.btnorange_yellow, .btnmb0.btnpink, .btnmb0.btnyellow, .btnmb0.btngreen_light, .btnmb0.btnupload, .btnmb0.btnnobgc {
  margin-bottom: 0;
}

.btndisable {
  opacity: 0.25 !important;
  cursor: default !important;
  pointer-events: none !important;
}

.radio, .checkbox {
  display: inline-flex;
  align-items: center;
  padding-right: 15px;
}
.radio input, .checkbox input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  height: 24px;
  width: 24px;
  transition: all 0.15s ease-out 0s;
  cursor: pointer;
  margin: 0.4rem;
  border: 2px solid #c2cadd;
}
.radio input[type=radio], .checkbox input[type=radio] {
  border-radius: 50%;
}
.radio input[type=radio]:before, .checkbox input[type=radio]:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 1px;
  transform: scale(0);
  transition: all 0.2s ease-in-out;
}
.radio input[type=radio]:checked:before, .checkbox input[type=radio]:checked:before {
  background: #8e8e90;
  transform: scale(1);
}
.radio input[type=radio]#Status1:checked, .checkbox input[type=radio]#Status1:checked {
  border-color: #008c95;
}
.radio input[type=radio]#Status1:checked:before, .checkbox input[type=radio]#Status1:checked:before {
  background: #008c95;
}
.radio input[type=radio]#Status0:checked, .checkbox input[type=radio]#Status0:checked {
  border-color: #ff3f3f;
}
.radio input[type=radio]#Status0:checked:before, .checkbox input[type=radio]#Status0:checked:before {
  background: #ff3f3f;
}
.radio input[type=checkbox], .checkbox input[type=checkbox] {
  border-radius: 10%;
}
.radio input[type=checkbox]:before, .radio input[type=checkbox]:after, .checkbox input[type=checkbox]:before, .checkbox input[type=checkbox]:after {
  position: absolute;
  content: "";
  background: #fff;
}
.radio input[type=checkbox]:before, .checkbox input[type=checkbox]:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.radio input[type=checkbox]:after, .checkbox input[type=checkbox]:after {
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
  transition-delay: 0.2s;
}
.radio input[type=checkbox]:checked, .radio input[type=checkbox]:indeterminate, .checkbox input[type=checkbox]:checked, .checkbox input[type=checkbox]:indeterminate {
  background: #630303;
  border-color: transparent;
}
.radio input[type=checkbox]:checked:before, .checkbox input[type=checkbox]:checked:before {
  left: 0px;
  top: 13px;
  width: 10px;
  height: 2px;
}
.radio input[type=checkbox]:checked:after, .checkbox input[type=checkbox]:checked:after {
  right: 6px;
  bottom: 1px;
  width: 2px;
  height: 16px;
}

/*
<div class="switch">
	<span>OFF</span>
	<label class="switchstyle">
	  <input type="checkbox">
	  <span class="slider"></span>
	</label>
	<span>ON</span>
</div>
*/
.switch {
  position: relative;
  display: flex;
  height: 40px;
  align-items: center;
}
.switch .switchstyle {
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
}
.switch .switchstyle input[type=checkbox] {
  opacity: 0;
  position: absolute;
}
.switch .switchstyle input[type=checkbox]:checked + .slider {
  background-color: #008c95;
}
.switch .switchstyle input[type=checkbox]:checked + .slider:before {
  -webkit-transform: translateX(26px);
  transform: translateX(26px);
  left: 32px;
}
.switch .switchstyle .slider {
  display: flex;
  width: 80px;
  height: 24px;
  position: relative;
  cursor: pointer;
  background-color: #c2cadd;
  transition: 0.4s;
  border-radius: 34px;
}
.switch .switchstyle .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  top: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.switch .switchstyle.big {
  margin-left: 10px;
  margin-right: 10px;
}
.switch .switchstyle.big input:checked + .slider:before {
  left: 98px;
}
.switch .switchstyle.big .slider {
  width: 150px;
  height: 30px;
}
.switch .switchstyle.big .slider:before {
  height: 24px;
  width: 24px;
  left: 3px;
  top: 3px;
}
.switch .switchstyle.small {
  margin-left: 0px;
  margin-right: 0px;
}
.switch .switchstyle.small input:checked + .slider:before {
  left: 8px;
}
.switch .switchstyle.small .slider {
  width: 50px;
  height: 18px;
}
.switch .switchstyle.small .slider:before {
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
}
.switch1.red .switchstyle input:checked + .slider {
  background-color: #ff3f3f;
}

.dropdown {
  position: relative;
}
.dropdown .header-lang {
  background: url("../modules/icons/droparrow_white.webp") no-repeat scroll transparent;
  background-position: calc(100% - 15px) center;
  width: 60px;
  font-size: 0.8775rem;
  display: inline-flex;
  cursor: pointer;
}
.dropdown .dropdown-content input:first-child {
  z-index: -1;
  position: absolute;
}
.dropdown.show .dropdown-content .form-input {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.dropdown .dropdown-items {
  z-index: 9900;
  display: none;
}
.dropdown.show .dropdown-items {
  display: flex;
}

.dropdown.ishover:hover .dropdown-items {
  display: flex;
}

.dropdown .dropdown-items {
  flex-direction: column;
  overflow-y: auto;
  min-width: 100%;
  /*width:100%;*/
  width: auto;
  white-space: nowrap;
  padding-right: 2px;
  max-height: 400px;
  position: absolute;
  left: 0px;
  top: calc(100% + 0px);
  background-color: white;
  /*padding-top:$grid_gutters / 2;
  padding-bottom:$grid_gutters / 2;*/
  border: 1px solid rgba(40, 40, 40, 0.5);
  border-radius: 5px;
}
.dropdown .dropdown-items .dropdown-search {
  position: sticky;
  top: 0px;
  background-color: rgba(142, 142, 144, 0.1);
  left: 0;
  padding: 5px 10px;
  display: flex;
  /*width: calc(100% - 10px);*/
}
.dropdown .dropdown-items .dropdown-search input {
  flex: 2;
  height: 30px;
  font-size: 1.125rem;
  border-radius: 5px;
}
.dropdown .dropdown-items .dropdown-search span {
  width: 60px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(142, 142, 144, 0.15);
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 2px;
  cursor: pointer;
}
.dropdown .dropdown-items .dropdown-search span:hover {
  background-color: rgba(142, 142, 144, 0.5);
}
.dropdown .dropdown-items .dropdown-item {
  cursor: pointer;
  color: #282828;
  padding: 7.5px 10px;
  display: flex;
  align-items: center;
}
.dropdown .dropdown-items .dropdown-item:not(:last-child) {
  border-bottom: 1px solid #c2cadd;
}
.dropdown .dropdown-items .dropdown-item img {
  width: 50px;
  margin-right: 15px;
}
.dropdown .dropdown-items .dropdown-item span {
  font-size: 0.875rem;
  font-style: italic;
}
.dropdown .dropdown-items .dropdown-item span.emoji {
  font-size: 2.5rem;
  margin-right: 5px;
  font-style: normal;
}
.dropdown .dropdown-items .dropdown-item:hover {
  color: #282828 !important;
  background-color: #8e8e90;
}
.dropdown .dropdown-items .dropdown-item:hover span {
  color: #282828 !important;
}
.dropdown .dropdown-items .dropdown-item.inactive {
  display: none;
}
.dropdown .dropdown-items .dropdown-item.disable {
  cursor: default !important;
  pointer-events: none;
  color: #8e8e90;
  background-color: #c2cadd;
}
.dropdown .dropdown-items.active {
  display: flex;
}

.formrow {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
.formrow .formcol {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
}
.formrow .formcol.formcol-half {
  width: calc((100% - 30px / 2) / 2);
}
.formrow .title {
  color: #8e8e90;
  font-size: 0.875rem;
}

.sepTitle-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.sepTitle {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
}
.sepTitle::before {
  content: "";
  width: 5px;
  height: 38px;
  border-radius: 1px;
  flex-shrink: 0;
  background-color: #c2cadd;
}
.sepTitle span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  min-width: 120px;
  height: 40px;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 4px 4px 0;
  white-space: nowrap;
  color: #282828;
  background-color: rgba(194, 202, 221, 0.12);
}
.sepTitle::after {
  content: "";
  flex: 1;
  height: 0;
  border-bottom: 1px dashed #c2cadd;
  margin-left: 10px;
}
.sepTitle.small::before {
  height: 22px;
}
.sepTitle.small span {
  height: 22px;
  padding: 2px 10px;
  font-size: 0.75rem;
}
.sepTitle.long span {
  min-width: 200px;
}
.sepTitle.gray::before {
  background-color: #8e8e90;
}
.sepTitle.gray span {
  background-color: rgb(238.05, 238.05, 238.35);
}
.sepTitle.white::before {
  background-color: #fff;
}
.sepTitle.white span {
  background-color: white;
}
.sepTitle.black::before {
  background-color: #282828;
}
.sepTitle.black span {
  background-color: rgb(222.75, 222.75, 222.75);
}
.sepTitle.brown::before {
  background-color: #630303;
}
.sepTitle.brown span {
  background-color: rgb(231.6, 217.2, 217.2);
}
.sepTitle.red::before {
  background-color: #ff3f3f;
}
.sepTitle.red span {
  background-color: rgb(255, 226.2, 226.2);
}
.sepTitle.blue::before {
  background-color: #0379ab;
}
.sepTitle.blue span {
  background-color: rgb(217.2, 234.9, 242.4);
}
.sepTitle.blue_light::before {
  background-color: #3098e0;
}
.sepTitle.blue_light span {
  background-color: rgb(223.95, 239.55, 250.35);
}
.sepTitle.blue_dark::before {
  background-color: #024866;
}
.sepTitle.blue_dark span {
  background-color: rgb(217.05, 227.55, 232.05);
}
.sepTitle.green::before {
  background-color: #008c95;
}
.sepTitle.green span {
  background-color: rgb(216.75, 237.75, 239.1);
}
.sepTitle.purple::before {
  background-color: #8d09d7;
}
.sepTitle.purple span {
  background-color: rgb(237.9, 218.1, 249);
}
.sepTitle.orange::before {
  background-color: #c95c02;
}
.sepTitle.orange span {
  background-color: rgb(246.9, 230.55, 217.05);
}
.sepTitle.orange_red::before {
  background-color: #f75c2d;
}
.sepTitle.orange_red span {
  background-color: rgb(253.8, 230.55, 223.5);
}
.sepTitle.orange_yellow::before {
  background-color: #fa923c;
}
.sepTitle.orange_yellow span {
  background-color: rgb(254.25, 238.65, 225.75);
}
.sepTitle.pink::before {
  background-color: #fae3df;
}
.sepTitle.pink span {
  background-color: rgb(254.25, 250.8, 250.2);
}
.sepTitle.yellow::before {
  background-color: #fdda24;
}
.sepTitle.yellow span {
  background-color: rgb(254.7, 249.45, 222.15);
}
.sepTitle.green_light::before {
  background-color: #24b269;
}
.sepTitle.green_light span {
  background-color: rgb(222.15, 243.45, 232.5);
}
.sepTitle.transparent::before {
  display: none;
}
.sepTitle.transparent span {
  background-color: transparent;
  padding-left: 0;
  font-weight: 700;
  font-size: 1.25rem;
}
.sepTitle.transparent::after {
  margin-left: 6px;
}
.sepTitle.jcbetween::after {
  display: none;
}
.sepTitle.jcbetween span.gray {
  background-color: rgb(238.05, 238.05, 238.35);
  border-left: 5px solid #8e8e90;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.gray:hover:hover, .sepTitle.jcbetween span.gray:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.white {
  background-color: white;
  border-left: 5px solid #fff;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.white:hover:hover, .sepTitle.jcbetween span.white:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.black {
  background-color: rgb(222.75, 222.75, 222.75);
  border-left: 5px solid #282828;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.black:hover:hover, .sepTitle.jcbetween span.black:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.brown {
  background-color: rgb(231.6, 217.2, 217.2);
  border-left: 5px solid #630303;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.brown:hover:hover, .sepTitle.jcbetween span.brown:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.red {
  background-color: rgb(255, 226.2, 226.2);
  border-left: 5px solid #ff3f3f;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.red:hover:hover, .sepTitle.jcbetween span.red:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.blue {
  background-color: rgb(217.2, 234.9, 242.4);
  border-left: 5px solid #0379ab;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.blue:hover:hover, .sepTitle.jcbetween span.blue:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.blue_light {
  background-color: rgb(223.95, 239.55, 250.35);
  border-left: 5px solid #3098e0;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.blue_light:hover:hover, .sepTitle.jcbetween span.blue_light:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.blue_dark {
  background-color: rgb(217.05, 227.55, 232.05);
  border-left: 5px solid #024866;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.blue_dark:hover:hover, .sepTitle.jcbetween span.blue_dark:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.green {
  background-color: rgb(216.75, 237.75, 239.1);
  border-left: 5px solid #008c95;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.green:hover:hover, .sepTitle.jcbetween span.green:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.purple {
  background-color: rgb(237.9, 218.1, 249);
  border-left: 5px solid #8d09d7;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.purple:hover:hover, .sepTitle.jcbetween span.purple:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.orange {
  background-color: rgb(246.9, 230.55, 217.05);
  border-left: 5px solid #c95c02;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.orange:hover:hover, .sepTitle.jcbetween span.orange:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.orange_red {
  background-color: rgb(253.8, 230.55, 223.5);
  border-left: 5px solid #f75c2d;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.orange_red:hover:hover, .sepTitle.jcbetween span.orange_red:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.orange_yellow {
  background-color: rgb(254.25, 238.65, 225.75);
  border-left: 5px solid #fa923c;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.orange_yellow:hover:hover, .sepTitle.jcbetween span.orange_yellow:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.pink {
  background-color: rgb(254.25, 250.8, 250.2);
  border-left: 5px solid #fae3df;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.pink:hover:hover, .sepTitle.jcbetween span.pink:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.yellow {
  background-color: rgb(254.7, 249.45, 222.15);
  border-left: 5px solid #fdda24;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.yellow:hover:hover, .sepTitle.jcbetween span.yellow:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.sepTitle.jcbetween span.green_light {
  background-color: rgb(222.15, 243.45, 232.5);
  border-left: 5px solid #24b269;
  border-radius: 0 4px 4px 0;
  color: #282828;
  cursor: pointer;
}
.sepTitle.jcbetween span.green_light:hover:hover, .sepTitle.jcbetween span.green_light:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}

.waitingedit input {
  background-image: none;
}

.input-wrap {
  display: flex;
  align-items: center;
}
.input-wrap img {
  height: 25px;
  margin-left: 3px;
  margin-right: 5px;
}
.input-wrap .form-input {
  flex: 2;
}
.input-wrap .input-extend-btn {
  width: 120px;
  height: 40px;
  margin-left: 2px;
  border-radius: 5px;
  border: 1px solid #c2cadd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  cursor: pointer;
}
.input-wrap .input-extend-btn:hover, .input-wrap .input-extend-btn.active {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
  color: #fff;
}
.input-wrap.btnhide .input-extend-btn {
  display: none;
}
.input-wrap.editdisable .form-input {
  pointer-events: none !important;
  background-color: #8e8e90;
  color: #fff;
}
.input-wrap.editdisable.editing .form-input {
  pointer-events: auto !important;
  background-color: #fff;
  color: #282828;
}

input[type=radio][disabled], input[type=checkbox][disabled] {
  background-color: #8e8e90 !important;
}

.form-input::-webkit-input-placeholder, .form-textarea::-webkit-input-placeholder {
  color: #8e8e90;
  opacity: 1;
}
.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
  color: #8e8e90;
  opacity: 1;
}
.form-input:-ms-input-placeholder, .form-textarea:-ms-input-placeholder {
  color: #8e8e90;
  opacity: 1;
}
.form-input, .form-textarea {
  /*background-color:transparent;*/
  background-color: #fff;
  border: 1px solid #c2cadd;
  padding: 6px 15px;
  width: 100%;
  color: #282828;
  font-size: 0.875rem;
  letter-spacing: 0.125rem;
  border-radius: 5px;
}
.form-input:read-only, .form-textarea:read-only {
  background-color: rgba(242, 243, 245, 0.15) !important;
  color: #8e8e90;
}
.form-input:read-only.form-dropdown, .form-textarea:read-only.form-dropdown {
  background-color: #fff !important;
  color: #282828;
}
.form-input:read-only.form-dropdown.readonly, .form-textarea:read-only.form-dropdown.readonly {
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior-y: contain;
  background-color: #f2f3f5 !important;
  color: #8e8e90 !important;
  cursor: default !important;
}
.form-input.readonly, .form-textarea.readonly {
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior-y: contain;
  /*border: 1px solid $color_border !important;*/
  background-color: #f2f3f5 !important;
  color: #8e8e90 !important;
  cursor: default !important;
  background-blend-mode: overlay;
  /*background-image:none !important;*/
  pointer-events: none;
}
.form-input.border-radius-half, .form-textarea.border-radius-half {
  border-radius: 20px;
}
.form-input.liketext, .form-textarea.liketext {
  border: none !important;
  /*pointer-events: none;*/
  /*@include user_notselect;*/
  padding-left: 0px;
  font-size: 1rem;
  letter-spacing: 1px;
}

.form-input {
  height: 40px;
}
.form-input.form-dropdown, .form-input.form-date, .form-input.form-time, .form-input.form-search, .form-input.form-number {
  padding-left: 30px !important;
  cursor: pointer;
  background: #ffffff no-repeat scroll 3px center;
}
.form-input.form-dropdown {
  background-image: url("../../modules/icons/droparrow.webp");
  background-position: calc(100% - 3px) center;
  padding-left: 15px !important;
}
.form-input.form-date {
  background-image: url("../../modules/icons/calendar.webp");
}
.form-input.form-time {
  background-image: url("../../modules/icons/timeclock.webp");
}
.form-input.form-search {
  background-image: url("../../modules/icons/search.webp");
}
.form-input.form-number {
  background-image: url("../../modules/icons/number.webp");
}
.form-input.wauto {
  width: auto;
}

.form-textarea {
  height: 100px;
  resize: vertical;
}
@media (max-width: 768px) {
  .form-textarea {
    height: 80px;
  }
}

.form-input-content {
  position: relative;
  width: 100%;
  min-height: 200px;
  background-color: transparent;
  border: 1px solid #c2cadd;
  border-radius: 5px;
}
.form-input-content input {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border: none;
  border-bottom: 1px solid #c2cadd;
}
.form-input-content .inputcontent {
  padding: 10px 15px;
  display: flex;
  flex-wrap: wrap;
}
.form-input-content .inputcontent .list {
  margin-right: 15px;
  display: flex;
  align-items: baseline;
}
.form-input-content .inputcontent .list span {
  color: #8e8e90;
  text-decoration-line: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.form-input-content .inputcontent .list .del {
  display: inline-flex;
  font-size: 0.75rem;
  cursor: pointer;
  color: #282828;
  margin-left: 3px;
}

.form-input-eyes {
  display: flex;
  width: 100%;
}
.form-input-eyes .eyepwd {
  margin-left: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.form-input-eyes .eyepwd img:last-child {
  display: none;
}
.form-input-eyes.inactive .eyepwd img:first-child {
  display: none;
}
.form-input-eyes.inactive .eyepwd img:last-child {
  display: block;
}

.form-inputtextarea {
  width: 100%;
  min-height: 200px;
  background-color: transparent;
  border: 1px solid #c2cadd;
  border-radius: 5px;
}
.form-inputtextarea input {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border: none;
  border-bottom: 1px solid #c2cadd;
}
.form-inputtextarea .form-inputtextarea-content {
  padding: 10px 15px;
}

.form-input-select {
  width: 100%;
  min-height: 200px;
  background-color: transparent;
  border: 1px solid #c2cadd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.form-input-select input {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border: none;
  border-bottom: 1px solid #c2cadd;
}
.form-input-select .form-input-select-content {
  padding: 10px 15px;
  background-color: rgba(242, 243, 245, 0.5);
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}
.form-input-select .form-input-select-content .list {
  margin-right: 15px;
  margin-bottom: 15px;
  display: flex;
  height: 30px;
  align-items: center;
  border: 1px solid rgba(40, 40, 40, 0.5);
  border-radius: 5px;
  background-color: #fff;
}
.form-input-select .form-input-select-content .list span {
  color: #282828;
  /*@include set_underline();*/
  font-size: 0.875rem;
  padding: 3px 6px;
}
.form-input-select .form-input-select-content .list .del {
  display: inline-flex;
  font-size: 1.125rem;
  cursor: pointer;
  color: rgba(255, 63, 63, 0.5);
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid rgba(40, 40, 40, 0.5);
}
.form-input-select .form-input-select-content .list .del:hover {
  color: #ff3f3f;
}

.editreadonly .form-input, .editreadonly .form-input:read-only, .editreadonly .form-dropdown {
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior-y: contain;
  background-color: #fafafa !important;
  cursor: default !important;
  background-blend-mode: overlay;
  background-image: none !important;
  pointer-events: none;
}

.loading {
  z-index: 9990;
  display: block;
  position: relative;
  width: 100px;
  height: 100px;
  margin: 80px auto;
  border-radius: 50%;
  border-top: 2px solid #c95c02;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loading:before {
  content: "";
  position: absolute;
  top: 15%;
  left: 15%;
  right: 15%;
  bottom: 15%;
  border-radius: 50%;
  border-top: 2px solid #630303;
  -webkit-animation: spin-reserve 1s linear infinite;
  animation: spin-reserve 1s linear infinite;
}
.loading:after {
  content: "";
  position: absolute;
  top: 35%;
  left: 35%;
  right: 35%;
  bottom: 35%;
  border-radius: 50%;
  border-top: 1px solid #ff3f3f;
  -webkit-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}
.loading.small {
  width: 70px;
  height: 70px;
}
.loading.btnloading {
  width: 20px;
  height: 20px;
  margin: 0px auto;
  border-top-color: #8e8e90;
}
.loading.btnloading:before {
  display: none;
}
.loading.btnloading:after {
  display: none;
}
.loading.white {
  border-top-color: #fff;
}
.loading.white:before {
  border-top-color: #fff;
}
.loading.white:after {
  border-top-color: #fff;
}

/* Loading Mask（提交數據時的遮罩效果）*/
.mask-loading {
  z-index: 9999;
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0px;
  top: 0px;
  background-color: rgba(40, 40, 40, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin-reserve {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.close {
  position: relative;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.close::before, .close::after {
  content: "";
  width: 25px;
  height: 2px;
  background-color: #c2cadd;
  position: absolute;
  display: inline-block;
  top: 15px;
  left: 3px;
}
.close::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.close::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.close:hover::before, .close:hover::after {
  background-color: #8a94ac;
}
.close.red::before, .close.red::after {
  background-color: #ff3f3f;
}
.close.red:hover::before, .close.red:hover::after {
  background-color: #282828;
}

.modal {
  display: none;
  position: fixed;
  z-index: 9900;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
.modal.show {
  display: flex;
  justify-content: center;
}
.modal .modal-dialog.modal-dialog-centered {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.modal .modal-dialog.modal-dialog-flex-aicenter {
  display: flex;
  align-items: center;
}
.modal .modal-dialog .mymodal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #f2f3f5;
  border-radius: 2px;
  width: calc(100vw - 8px);
  height: calc(100vh - 8px);
  margin: 0px auto;
  padding: 10px;
}
.modal .modal-dialog .mymodal-content .mymodal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
}
.modal .modal-dialog .mymodal-content .mymodal-body {
  position: relative;
  flex: 2;
  padding: 15px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #c2cadd;
  border-radius: 10px;
}
.modal .modal-dialog .mymodal-content .mymodal-body iframe {
  border: none;
}
.modal .modal-dialog .mymodal-content .mymodal-footer {
  display: flex;
  justify-content: flex-end;
}
.modal .modal-dialog .mymodal-content.modal-hints {
  padding: 0;
}
.modal .modal-dialog .mymodal-content.modal-hints .mymodal-body {
  padding: 0;
}
.modal .modal-dialog .mymodal-content.modal-msg {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 0;
  max-width: 300px;
  max-height: 200px;
}
.modal .modal-dialog .mymodal-content.modal-msg .mymodal-body {
  padding: 0;
}
.modal .modal-dialog .mymodal-content.modal-auto {
  height: unset !important;
  min-width: 300px;
  max-width: 900px;
  max-height: 100%;
}
.modal .modal-dialog .mymodal-content.modal-view {
  max-width: unset;
  width: calc(100vw - 10px);
  height: calc(100vh - 10px);
  background-color: #fafafa;
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
}
.modal .modal-dialog .mymodal-content.modal-view .mymodal-header {
  background-color: #fff;
  padding: 5px 15px;
}
.table {
  background-color: #fff;
  width: 100%;
}
.table-bordered {
  border-top: 1px solid rgba(183, 178, 174, 0.5);
  border-left: 1px solid rgba(183, 178, 174, 0.5);
  border-radius: 3px;
}
.table-bordered th,
.table-bordered td {
  border-bottom: 1px solid rgba(40, 40, 40, 0.05);
  border-right: 1px solid rgba(183, 178, 174, 0.5);
  padding: 0.3rem;
}
.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 1.125px;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(40, 40, 40, 0.05);
}
.table-striped tbody tr:hover {
  background-color: #fafafa;
}
.table-striped.dragable tbody tr:hover {
  /*cursor: move;*/
}
.table.dataTable thead th, .table.dataTable tfoot th {
  color: #8e8e90;
  font-weight: normal;
  border-bottom: 2px solid #c2cadd;
}
.table.dataTable thead th.sorting_desc, .table.dataTable thead th.sorting_asc, .table.dataTable tfoot th.sorting_desc, .table.dataTable tfoot th.sorting_asc {
  color: #8e8e90;
}
.table.dataTable thead th.buttons, .table.dataTable tfoot th.buttons {
  width: 240px;
}

.gotopage-container {
  z-index: 1000;
  /*position:absolute;
  right:0px;*/
  margin-left: 45px;
}
.gotopage-container .gotopage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gotopage-container .gotopage .title {
  padding-right: 15px;
}
.gotopage-container .gotopage .content {
  border: 1px solid #c2cadd;
  border-radius: 3px;
  padding: 2px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gotopage-container .gotopage .content input {
  border: none;
  width: 40px;
  height: 23px;
  text-align: center;
  background-color: transparent;
}
.gotopage-container .gotopage .content .gotobtn {
  cursor: pointer;
  background-color: #630303;
  color: #fff;
  font-size: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 25px;
  border-radius: 3px;
}
.gotopage-container .gotopage .content .gotobtn:hover:hover, .gotopage-container .gotopage .content .gotobtn:hover.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}

/* Tooltip */
/*
<div class="tooltip right">
	<div class="btncyanblue" data-self="<?php echo __ROOTPATH__ . 'contactus/';?>">To ContactUs</div>
	<div class="tooltip-content"><img src="<?php echo __ROOTPATH__;?>images/32.jpg" />also known as Euclid of Alexandria, was a Greek mathematician, often referred to as the "Father of Geometry".</div>
</div>
*/
.tooltip {
  position: relative;
  display: table;
}
.tooltip .tooltip-content {
  position: absolute;
  z-index: 9999;
  width: 360px;
  height: 180px;
  border-radius: 5px;
  padding: 15px;
  font-size: 0.875rem;
  line-height: 1.125;
  box-shadow: 1px 1px 1px rgba(139, 139, 139, 0.5);
  background-color: #282828;
  color: #fff;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transform: scale3d(0.3, 0.3, 0.3);
  transition: opacity 0.2s, transform 0.2s;
}
.tooltip .tooltip-content::after {
  content: "";
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-width: 10px;
}
.tooltip .tooltip-content img {
  position: relative;
  display: block;
}
.tooltip .tooltip-content .tooltip-text {
  flex: 2;
  padding: 10px;
}
.tooltip.toup .tooltip-content {
  transform-origin: 50% 100%;
  left: calc(50% - 360px / 2);
  bottom: calc(100% + 10px);
}
.tooltip.toup .tooltip-content::after {
  left: 50%;
  top: 100%;
  border-top-color: #282828;
  margin-left: -10px;
}
.tooltip.todown .tooltip-content {
  transform-origin: 50% 0%;
  left: calc(50% - 360px / 2);
  top: calc(100% + 10px);
}
.tooltip.todown .tooltip-content::after {
  left: 50%;
  bottom: 100%;
  border-bottom-color: #282828;
  margin-left: -10px;
}
.tooltip.toleft .tooltip-content {
  transform-origin: 100% 50%;
  left: calc(-10px - 360px);
  top: calc(50% - 180px / 2);
}
.tooltip.toleft .tooltip-content::after {
  left: 100%;
  top: 45%;
  border-left-color: #282828;
}
.tooltip.toright .tooltip-content {
  transform-origin: 0% 50%;
  left: calc(100% + 10px);
  top: calc(50% - 180px / 2);
}
.tooltip.toright .tooltip-content::after {
  right: 100%;
  top: 45%;
  border-right-color: #282828;
}
.tooltip:hover .tooltip-content {
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
}

.pwa-install-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(40, 40, 40, 0.7);
  z-index: 99999;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pwa-install-overlay.active {
  display: flex;
  opacity: 1;
  -webkit-animation: fadeIn 0.3s ease 1;
  animation: fadeIn 0.3s ease 1;
}

.pwa-install-modal {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 400px;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.pwa-install-overlay.active .pwa-install-modal {
  transform: translateY(0);
  -webkit-animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
  animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
}

.pwa-install-header {
  display: flex;
  align-items: center;
  padding: 20px 20px 15px;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

.pwa-install-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}
.pwa-install-icon svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.pwa-install-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0;
  flex: 1;
}

.pwa-install-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.pwa-install-close:hover {
  background-color: #f5f5f5;
}
.pwa-install-close svg {
  width: 16px;
  height: 16px;
}

.pwa-install-body {
  padding: 20px;
}

.pwa-install-info {
  color: #666;
  line-height: 1.5;
  margin-bottom: 25px;
  font-size: 15px;
  text-align: center;
}

.pwa-install-buttons {
  display: flex;
  gap: 12px;
}
.pwa-install-buttons.column {
  flex-direction: column;
}

.pwa-install-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwa-install-btn.pwa-install-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.pwa-install-btn.pwa-install-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.pwa-install-btn.pwa-install-primary:active {
  transform: translateY(0);
}
.pwa-install-btn.pwa-install-secondary {
  background: #f5f5f5;
  color: #666;
}
.pwa-install-btn.pwa-install-secondary:hover {
  background: #e8e8e8;
}

.addpwa-button-container {
  z-index: 9999;
  position: fixed;
  width: 100%;
  bottom: 0px;
  left: 0px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 3px;
}
.addpwa-button-container .addpwa-button {
  width: 100%;
  padding-bottom: 30px;
  border-radius: 10px;
  background-color: #e6e6e6;
  color: #3e3e3e;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
}
.addpwa-button-container .addpwa-button .addpwa-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.addpwa-button-container .addpwa-button .addpwa-head .addpwa-title {
  font-weight: bold;
}
.addpwa-button-container .addpwa-button .addpwa-head .addpwa-close {
  position: relative;
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.addpwa-button-container .addpwa-button .addpwa-head .addpwa-close::before, .addpwa-button-container .addpwa-button .addpwa-head .addpwa-close::after {
  content: "";
  width: 25px;
  height: 2px;
  background-color: #5f8acf;
  position: absolute;
  top: 11px;
}
.addpwa-button-container .addpwa-button .addpwa-head .addpwa-close::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.addpwa-button-container .addpwa-button .addpwa-head .addpwa-close::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.addpwa-button-container .addpwa-button .addpwa-head .addpwa-close:hover::before, .addpwa-button-container .addpwa-button .addpwa-head .addpwa-close:hover::after {
  background-color: #3e3e3e;
}
.addpwa-button-container .addpwa-button .addpwa-body {
  padding: 15px 15px 0px 15px;
}
.addpwa-button-container .addpwa-button .addpwa-body .addpwa-infos {
  color: #8a8a8a;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.addpwa-button-container .addpwa-button .addpwa-body .addpwa-btns {
  display: none;
  flex-direction: column;
  padding-top: 15px;
}
.addpwa-button-container .addpwa-button .addpwa-body .addpwa-btns.active {
  display: flex;
}
.addpwa-button-container .addpwa-button .addpwa-body .addpwa-btns .addpwabtn {
  width: 150px;
  height: 40px;
  border-radius: 5px;
  user-select: none;
  overscroll-behavior-y: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  margin: 15px auto;
  background-color: #282828;
  color: #fff;
}
.addpwa-button-container .addpwa-button .addpwa-body .addpwa-btns .addpwabtn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.addpwa-button-container .addpwa-button .addpwa-body .addpwa-btns .addpwa-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.addpwa-button-container .addpwa-button .addpwa-body .addpwa-btns .addpwa-item .addpwa-item-icon {
  width: 50px;
  text-align: center;
}
.addpwa-button-container .addpwa-button .addpwa-body .addpwa-btns .addpwa-item .addpwa-item-icon img {
  height: 30px;
}

#notification-permission-prompt {
  max-width: 250px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9000;
}
#notification-permission-prompt p {
  width: 100%;
}

.notification-guidance {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(40, 40, 40, 0.8);
  color: #fff;
  z-index: 2000;
  padding: 20px;
  box-sizing: border-box;
}

.addpwa-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(40, 40, 40, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
.addpwa-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.show-in-mobile {
  display: none !important;
}
.show-in-mobile.nav-loginname {
  pointer-events: none;
  font-style: italic;
  flex: 2;
  justify-content: flex-end;
  padding-right: 10px;
}
.show-in-mobile.nav-logout {
  color: #fff;
  background-color: #ff3f3f;
}
@media (max-width: 992px) {
  .show-in-mobile {
    display: inline-flex !important;
  }
}

.menu-container {
  z-index: 9000;
  background-color: #fff;
  width: 100%;
  height: 50px;
  transition: width 0.4s ease;
  display: flex;
  box-shadow: 2px 2px 5px rgba(194, 202, 221, 0.5);
}
.menu-container .menu-logo .header-logo {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.menu-container .menu-logo .header-logo img {
  height: 30px;
}
.menu-container .menu-logo .navbar-toggler {
  display: none;
  width: 32px;
  height: 26px;
  align-items: center;
  cursor: pointer;
}
.menu-container .menu-logo .navbar-toggler .navbar-toggler-icon {
  width: 100%;
  height: 2px;
  background-color: #282828;
  position: relative;
}
.menu-container .menu-logo .navbar-toggler .navbar-toggler-icon::before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #282828;
  position: absolute;
  left: 0px;
  top: -10px;
}
.menu-container .menu-logo .navbar-toggler .navbar-toggler-icon::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #282828;
  position: absolute;
  left: 0px;
  top: 10px;
}
.menu-container .menu-logname {
  display: flex;
  align-items: center;
  font-style: italic;
  text-decoration: underline;
  font-size: 0.875rem;
  padding: 0 10px;
}
.menu-container .menu-logout {
  background-color: #ff3f3f;
  color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  max-width: 100px;
  width: 100%;
}
.menu-container .menu-logout:hover, .menu-container .menu-logout.active {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
}

.menu-navs {
  flex: 2;
  display: flex;
  flex-direction: row;
}
.menu-navs .menu-nav {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-right: 1px solid rgba(194, 202, 221, 0.1);
  padding: 7.5px 10px;
}
.menu-navs .menu-nav img {
  height: 25px;
  margin-right: 5px;
}
.menu-navs .menu-nav span {
  font-size: 0.875rem;
}
.menu-navs .menu-nav:hover {
  background-color: rgba(194, 202, 221, 0.5);
  color: #630303;
}
.menu-navs .menu-nav.active {
  background-color: #c2cadd;
  color: #630303;
}
.menu-navs .menu-nav.menu-dropdown {
  background: url("../../modules/icons/droparrow.webp") no-repeat calc(100% - 7px) center;
  padding-right: 25px;
  display: inline-flex;
}
.menu-navs .menu-nav.menu-dropdown .menu-dropdown-items {
  z-index: 9900;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  min-width: 150%;
  width: auto;
  white-space: nowrap;
  max-height: 400px;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  box-shadow: 2px 2px 5px rgba(194, 202, 221, 0.5);
}
.menu-navs .menu-nav.menu-dropdown .menu-dropdown-items .menu-dropdown-item {
  cursor: pointer;
  color: #282828;
  padding: 10px 10px 10px 20px;
  display: flex;
  align-items: center;
  border-right: none;
}
.menu-navs .menu-nav.menu-dropdown .menu-dropdown-items .menu-dropdown-item:not(:last-child) {
  border-bottom: 1px solid #0379ab;
}
.menu-navs .menu-nav.menu-dropdown .menu-dropdown-items .menu-dropdown-item img {
  height: 15px;
  margin-right: 5px;
}
.menu-navs .menu-nav.menu-dropdown .menu-dropdown-items .menu-dropdown-item span {
  font-size: 0.875rem;
  font-style: italic;
}
.menu-navs .menu-nav.menu-dropdown .menu-dropdown-items .menu-dropdown-item:hover {
  color: #fff;
  background-color: #282828;
}
.menu-navs .menu-nav.menu-dropdown .menu-dropdown-items .menu-dropdown-item.active {
  color: #fff;
  background-color: #c2cadd;
}
.menu-navs .menu-nav.menu-dropdown.activing {
  background-color: rgba(194, 202, 221, 0.15);
  color: #630303;
}
.menu-navs .menu-nav.menu-dropdown.activing .menu-dropdown-items {
  display: flex;
}
@media (max-width: 992px) {
  .menu-navs {
    display: none;
  }
  .menu-navs .menu-nav {
    width: calc((100% - 8px) / 4);
    padding: 7.5px 5px;
    border-right: none;
    margin: 1px;
    border-bottom: 1px solid rgba(194, 202, 221, 0.25);
    justify-content: center;
  }
  .menu-navs .menu-nav img {
    display: none;
  }
  .menu-navs .menu-nav span {
    font-size: 0.875rem;
  }
  .menu-navs .menu-nav.admin-logout {
    background-color: #ff3f3f !important;
  }
  .menu-navs .menu-nav.menu-dropdown.activing .menu-dropdown-items {
    background-color: #c2cadd;
    color: #fff;
  }
  .menu-navs .menu-nav.menu-dropdown.activing .menu-dropdown-items .menu-dropdown-item {
    padding-left: 10px;
  }
  .menu-navs.show {
    z-index: 9000;
    display: flex;
    position: absolute;
    right: 0px;
    top: 51px;
    width: 100%;
    max-width: 320px;
    height: calc(100vh - 50px);
    background-color: #f2f3f5;
    flex-direction: column;
    box-shadow: 2px 2px 10px rgba(194, 202, 221, 0.5);
  }
  .menu-navs.show .menu-nav {
    width: 100%;
    justify-content: flex-start;
  }
}

section.topbottom, section.leftright {
  flex-direction: column;
}
section.leftright .page-container {
  flex: 2;
}
section.leftright .page-container .menu-logname {
  flex: 2;
  justify-content: flex-end;
}
section.leftright .page-container .menu-navs {
  flex: unset;
  flex-direction: column;
  width: 200px;
}
@media (max-width: 992px) {
  section .menu-logname, section .menu-logout {
    display: none !important;
  }
  section .menu-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-right: 10px;
  }
  section .menu-logo .navbar-toggler {
    display: flex !important;
  }
  section.leftright .page-container .menu-navs {
    width: 100% !important;
  }
}

.loginpages {
  padding: 0;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: first baseline;
  min-height: 100vh;
  padding-top: 90px;
}
.loginpages .loginpages-container {
  display: flex;
  flex-direction: column;
  margin: 0px auto;
  max-width: 450px;
  width: 100%;
  border-radius: 10px;
  border: none;
  background-color: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior-y: contain;
}
.loginpages .loginpages-container .login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 15px 20px;
  border-bottom: 1px solid #eee;
  flex-direction: column;
}
.loginpages .loginpages-container .login-logo .img {
  display: flex;
  margin-bottom: 10px;
}
.loginpages .loginpages-container .login-logo .img img {
  height: 60px;
}
.loginpages .loginpages-container .login-logo .content {
  font-size: 1.5rem;
  padding-left: 0;
  font-weight: 700;
  color: #333;
}
.loginpages .loginpages-container .login-container {
  padding: 30px;
}
.loginpages .loginpages-container .login-container .title {
  margin-bottom: 25px;
  font-size: 0.95rem;
  color: #666;
  text-align: center;
}
.loginpages .loginpages-container .login-container .formrow {
  margin-bottom: 20px;
}
.loginpages .loginpages-container .login-container .form-input {
  border: 2px solid rgba(194, 202, 221, 0.5);
  border-radius: 12px;
  height: 52px;
  padding: 0 18px;
  font-size: 1rem;
  background-color: rgba(242, 243, 245, 0.15);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.loginpages .loginpages-container .login-container .form-input:focus {
  border-color: #0379ab;
  outline: none;
  box-shadow: 0 0 0 2px rgba(3, 121, 171, 0.2);
}
.loginpages .loginpages-container .login-container .form-input::placeholder {
  color: #aaa;
}
.loginpages .loginpages-container .login-container .btngreen {
  max-width: 200px;
  transition: transform 0.2s, box-shadow 0.2s;
}

section {
  min-height: 100vh;
  display: flex;
}

.checkboxs {
  display: flex;
  flex-wrap: wrap;
}
.checkboxs.readonly {
  pointer-events: none;
}
.checkboxs.readonly input[type=checkbox]:checked {
  background: #8e8e90 !important;
}

.page-container {
  flex: 2;
  display: flex;
  width: 100%;
}
.page-container .itemslist-container {
  z-index: 1;
  position: relative;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 8px 3px rgba(142, 142, 144, 0.25);
  transition: all 0.3s ease 0.1s;
}
.page-container .itemslist-container img:not(.fr-draggable) {
  max-height: 20px;
}
.page-container .itemslist-container .view-items {
  display: flex;
  justify-content: space-between;
}
.page-container .itemslist-container .view-items .viewitemtitle {
  width: 33.3333333333%;
  margin-bottom: 15px;
  font-size: 1.25rem;
  line-height: 1.33;
  display: flex;
  flex-direction: column;
}
.page-container .itemslist-container .view-items .viewitemtitle span {
  color: #8e8e90;
  font-size: 0.875rem;
}
.page-container {
  /*.itemedit-container{display:none;}*/
}
.page-container.editmode .pages-filter, .page-container.editmode .itemslist-container, .page-container.editmode .gotopage-container, .page-container.editmode .pages-options-container {
  display: none;
  transition: all 0.8s ease 0s;
}
.page-container.editmode .itemedit-container {
  display: flex;
}
.page-container.indent .menu-container {
  width: 60px;
  transition: width 0.8s ease 0s;
}
.page-container.indent .menu-container .menu-navs .menu-nav span {
  opacity: 0;
  font-size: 0rem;
  transition: opacity 0.1s ease 0s;
}
@media (max-width: 992px) {
  .page-container {
    flex-direction: column;
  }
}

span.gray {
  color: #8e8e90 !important;
}
span.white {
  color: #fff !important;
}
span.black {
  color: #282828 !important;
}
span.brown {
  color: #630303 !important;
}
span.red {
  color: #ff3f3f !important;
}
span.blue {
  color: #0379ab !important;
}
span.blue_light {
  color: #3098e0 !important;
}
span.blue_dark {
  color: #024866 !important;
}
span.green {
  color: #008c95 !important;
}
span.purple {
  color: #8d09d7 !important;
}
span.orange {
  color: #c95c02 !important;
}
span.orange_red {
  color: #f75c2d !important;
}
span.orange_yellow {
  color: #fa923c !important;
}
span.pink {
  color: #fae3df !important;
}
span.yellow {
  color: #fdda24 !important;
}
span.green_light {
  color: #24b269 !important;
}
span.tourl {
  color: #0379ab;
  cursor: pointer;
}
span.tourl:after {
  content: "→";
  font-size: 0.75rem;
  margin-left: 3px;
}
span.tourl:hover {
  font-style: italic;
}
span.color_block {
  width: 60px;
  height: 20px;
  margin-right: 10px;
}
span.color_block.gray {
  background-color: #8e8e90 !important;
}
span.color_block.white {
  background-color: #fff !important;
}
span.color_block.black {
  background-color: #282828 !important;
}
span.color_block.brown {
  background-color: #630303 !important;
}
span.color_block.red {
  background-color: #ff3f3f !important;
}
span.color_block.blue {
  background-color: #0379ab !important;
}
span.color_block.blue_light {
  background-color: #3098e0 !important;
}
span.color_block.blue_dark {
  background-color: #024866 !important;
}
span.color_block.green {
  background-color: #008c95 !important;
}
span.color_block.purple {
  background-color: #8d09d7 !important;
}
span.color_block.orange {
  background-color: #c95c02 !important;
}
span.color_block.orange_red {
  background-color: #f75c2d !important;
}
span.color_block.orange_yellow {
  background-color: #fa923c !important;
}
span.color_block.pink {
  background-color: #fae3df !important;
}
span.color_block.yellow {
  background-color: #fdda24 !important;
}
span.color_block.green_light {
  background-color: #24b269 !important;
}

.pagewrapper-container {
  flex: 2;
  max-width: 100%;
  overflow-x: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: rgba(242, 243, 245, 0.25);
  padding: 15px 15px 60px 15px;
}
@media (max-width: 992px) {
  .pagewrapper-container {
    padding: 2px;
  }
}

.pagewrapper-title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.pagewrapper-title-container .breadcrumbs {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1.5rem;
  margin-bottom: 15px;
}
.pagewrapper-title-container .breadcrumbs span {
  color: #8e8e90;
}
.pagewrapper-title-container .breadcrumbs span:hover {
  color: #282828;
}
.pagewrapper-title-container .breadcrumbs span:after {
  content: "-";
  margin-left: 8px;
  margin-right: 8px;
  color: #282828;
}
.pagewrapper-title-container .breadcrumbs .subtitle {
  display: inline-flex;
  font-size: 0.875rem;
  color: #c2cadd;
  line-height: 1;
  width: 100%;
}
.pagewrapper-title-container .pagewrapper-title {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  font-size: 1.5rem;
  margin-bottom: 15px;
}
.pagewrapper-title-container .pagewrapper-title.flex-row {
  justify-content: flex-start;
  flex-direction: row;
  align-items: last baseline;
}
.pagewrapper-title-container .pagewrapper-title img {
  margin-right: 15px;
}
.pagewrapper-title-container .pagewrapper-title .booking-switch-icon {
  display: flex;
  margin-left: 10px;
  font-size: 0.875rem;
}
.pagewrapper-title-container .pagewrapper-title .booking-switch-icon img {
  width: 24px;
  margin-right: 2px !important;
}
.pagewrapper-title-container.fdcolumn {
  flex-direction: column;
  height: auto;
  justify-content: flex-start;
  align-items: baseline;
}
.pagewrapper-title-container.fdcolumn .breadcrumbs {
  margin-bottom: 0;
}

.hotelsubbtns {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.hotelsubbtns .btnsmaller {
  margin-left: 0;
  margin-top: 0;
}
.hotelsubbtns .btnsmaller.active {
  background-color: #8d09d7;
  pointer-events: none;
}

.pagewrapper-title-button {
  cursor: pointer;
  margin-left: 15px;
}
.pagewrapper-title-button img {
  height: 40px;
}

.pagewrapper-viewcontainer {
  margin-bottom: 30px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.pagewrapper-viewcontainer .viewitems {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgba(142, 142, 144, 0.05);
  border-radius: 15px;
  padding: 10px 15px;
}
.pagewrapper-viewcontainer .viewitems.viewsimple {
  height: 120px;
}
.pagewrapper-viewcontainer .viewitems.viewsimple .viewall {
  height: 100%;
}
.pagewrapper-viewcontainer .viewitems.viewfull {
  width: 100%;
  margin-bottom: 15px;
}
.pagewrapper-viewcontainer .viewitems.viewhalf {
  width: calc((100% - 30px / 3 * 2) / 2);
  margin-bottom: 15px;
  margin-right: 15px;
}
.pagewrapper-viewcontainer .viewitems.viewhalf:nth-child(2n) {
  margin-right: 0;
}
.pagewrapper-viewcontainer .viewitems.viewthird {
  width: calc((100% - 2 * 30px / 3 * 2) / 3);
  margin-bottom: 15px;
  margin-right: 15px;
}
.pagewrapper-viewcontainer .viewitems.viewthird:nth-child(3n) {
  margin-right: 0;
}
.pagewrapper-viewcontainer .viewitems.viewquar {
  width: calc((100% - 3 * 30px / 3 * 2) / 4);
  margin-bottom: 15px;
  margin-right: 15px;
}
.pagewrapper-viewcontainer .viewitems.viewquar:nth-child(4n) {
  margin-right: 0;
}
.pagewrapper-viewcontainer .viewitems .viewitem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable {
  width: 100%;
  /*height:200px;*/
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.gray {
  border: 1px solid #8e8e90;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.white {
  border: 1px solid #fff;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.black {
  border: 1px solid #282828;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.brown {
  border: 1px solid #630303;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.red {
  border: 1px solid #ff3f3f;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.blue {
  border: 1px solid #0379ab;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.blue_light {
  border: 1px solid #3098e0;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.blue_dark {
  border: 1px solid #024866;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.green {
  border: 1px solid #008c95;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.purple {
  border: 1px solid #8d09d7;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.orange {
  border: 1px solid #c95c02;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.orange_red {
  border: 1px solid #f75c2d;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.orange_yellow {
  border: 1px solid #fa923c;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.pink {
  border: 1px solid #fae3df;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.yellow {
  border: 1px solid #fdda24;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable.green_light {
  border: 1px solid #24b269;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable .viewrow {
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable .viewrow .viewcol {
  width: 15%;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable .viewrow .viewcol.flex2 {
  flex: 2;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable .viewrow.header {
  font-weight: 700;
  color: #8e8e90 !important;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewtable .viewrow.header .code {
  color: #8e8e90 !important;
}
.pagewrapper-viewcontainer .viewitems .viewitem .total {
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
}
.pagewrapper-viewcontainer .viewitems .viewitem .icon {
  display: flex;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10px;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title {
  font-size: 1.25rem;
  line-height: 1.5;
  color: #282828;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.gray {
  color: #8e8e90;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.white {
  color: #fff;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.black {
  color: #282828;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.brown {
  color: #630303;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.red {
  color: #ff3f3f;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.blue {
  color: #0379ab;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.blue_light {
  color: #3098e0;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.blue_dark {
  color: #024866;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.green {
  color: #008c95;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.purple {
  color: #8d09d7;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.orange {
  color: #c95c02;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.orange_red {
  color: #f75c2d;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.orange_yellow {
  color: #fa923c;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.pink {
  color: #fae3df;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.yellow {
  color: #fdda24;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .title.green_light {
  color: #24b269;
  line-height: 1.25;
}
.pagewrapper-viewcontainer .viewitems .viewitem .brief .content {
  color: #8e8e90;
  font-size: 0.75rem;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color {
  width: 9px;
  height: 33px;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.gray {
  background-color: #8e8e90;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.white {
  background-color: #fff;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.black {
  background-color: #282828;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.brown {
  background-color: #630303;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.red {
  background-color: #ff3f3f;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.blue {
  background-color: #0379ab;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.blue_light {
  background-color: #3098e0;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.blue_dark {
  background-color: #024866;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.green {
  background-color: #008c95;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.purple {
  background-color: #8d09d7;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.orange {
  background-color: #c95c02;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.orange_red {
  background-color: #f75c2d;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.orange_yellow {
  background-color: #fa923c;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.pink {
  background-color: #fae3df;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.yellow {
  background-color: #fdda24;
}
.pagewrapper-viewcontainer .viewitems .viewitem .view-color .color.green_light {
  background-color: #24b269;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall {
  flex: 2;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: flex-end;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color {
  width: 13px;
  height: 33px;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.gray {
  background-color: #8e8e90;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.white {
  background-color: #fff;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.black {
  background-color: #282828;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.brown {
  background-color: #630303;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.red {
  background-color: #ff3f3f;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.blue {
  background-color: #0379ab;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.blue_light {
  background-color: #3098e0;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.blue_dark {
  background-color: #024866;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.green {
  background-color: #008c95;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.purple {
  background-color: #8d09d7;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.orange {
  background-color: #c95c02;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.orange_red {
  background-color: #f75c2d;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.orange_yellow {
  background-color: #fa923c;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.pink {
  background-color: #fae3df;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.yellow {
  background-color: #fdda24;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .color.green_light {
  background-color: #24b269;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .tourl {
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  color: #8e8e90;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}
.pagewrapper-viewcontainer .viewitems .viewitem .viewall .tourl:after {
  content: "";
  background: url("../../modules/icons/arrow01.png");
  background-size: cover;
  width: 16px;
  height: 4.5px;
  display: inline-flex;
  margin-left: 5px;
}
@media (max-width: 992px) {
  .pagewrapper-viewcontainer .viewitems .viewitem {
    padding: 5px 6px;
  }
  .pagewrapper-viewcontainer .viewitems .viewitem.viewhalf, .pagewrapper-viewcontainer .viewitems .viewitem.viewthird, .pagewrapper-viewcontainer .viewitems .viewitem.viewquar {
    width: 100%;
    margin-right: 0;
  }
  .pagewrapper-viewcontainer .viewitems .viewitem .viewtable .viewrow {
    font-size: 0.875rem;
  }
}
.pagewrapper-viewcontainer .viewitems .viewitem-all {
  display: flex;
  justify-content: flex-end;
}
.pagewrapper-viewcontainer .viewitems .viewitem-all .tourl {
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  color: #8e8e90;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}
.pagewrapper-viewcontainer .viewitems .viewitem-all .tourl:after {
  content: "";
  background: url("../../modules/icons/arrow01.png");
  background-size: cover;
  width: 16px;
  height: 4.5px;
  display: inline-flex;
  margin-left: 5px;
}

.pagewrapper-maincontainer {
  display: flex;
  width: 100%;
}
@media (max-width: 992px) {
  .pagewrapper-maincontainer {
    flex-direction: column;
  }
}

.pageconent-container {
  flex: 2;
  /*width:calc(100% - 250px);*/
  /*background-color:$color_white;*/
  /*border-radius:10px;*/
}
.pageconent-container.fullwidth {
  width: 100%;
}
.pageconent-container.bggray {
  background-color: transparent;
  border-radius: 0px;
}
.pageconent-container .exportrecord-container {
  background-color: #8e8e90;
  padding: 30px 15px 60px 15px;
  border-radius: 15px;
  box-shadow: 2px 2px 2px rgba(142, 142, 144, 0.5);
}

.pageoptions-container {
  z-index: 1000;
  width: 100px;
  padding-left: 15px;
}
.pageoptions-container .float-container {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 165px;
  height: calc(100vh - 160px - 40px);
  justify-content: flex-end;
}
.pageoptions-container .float-container.flexbetween {
  justify-content: space-between;
}
.pageoptions-container .float-container .float-subcon-btns {
  display: flex;
  flex-direction: column;
}
.pageoptions-container .float-container .float-subcon-btns .float-subcon-btn {
  border-radius: 10px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-bottom: 15px;
}
.pageoptions-container .float-container .float-subcon-btns .float-subcon-btn span {
  color: #fff;
  font-size: 1.125rem;
}
.pageoptions-container .float-container .float-subcon-btns .float-subcon-btn span:after {
  content: "→";
  margin-left: 5px;
}
.pageoptions-container .float-container .float-subcon-btns .float-subcon-btn.cyanblue {
  background-color: #0379ab;
}
.pageoptions-container .float-container .float-subcon-btns .float-subcon-btn.purple {
  background-color: #8d09d7;
}
.pageoptions-container .float-container .float-subcon-btns .float-subcon-btn.blue {
  background-color: #0379ab;
}
.pageoptions-container .float-container .float-subcon-btns .float-subcon-btn.inactive {
  background-color: #f2f3f5;
}
.pageoptions-container .float-container .float-subcon-btns .float-subcon-btn.inactive span {
  color: #c2cadd;
}
.pageoptions-container .float-container .float-subcon-btns .float-subcon-btn.isnotcurrent {
  width: 90%;
  height: 40px;
}
.pageoptions-container .float-container .float-subcon-btns .float-subcon-btn:hover, .pageoptions-container .float-container .float-subcon-btns .float-subcon-btn.active {
  background-image: linear-gradient(rgba(40, 40, 40, 0.4) 0 0);
}
.pageoptions-container .float-container .float-btns-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.pageoptions-container .float-container .float-btns-container .float-btns-item {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 15px;
  color: #fff;
  font-size: 0.875rem;
  cursor: pointer;
}
.pageoptions-container .float-container .float-btns-container .float-btns-item:hover, .pageoptions-container .float-container .float-btns-container .float-btns-item.active {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
}
.pageoptions-container .float-container .float-btns-container .float-btns-item img {
  width: 22px;
}
.pageoptions-container .float-container .float-btns-container .float-btns-item.back {
  background-color: #8e8e90;
}
.pageoptions-container .float-container .float-btns-container .float-btns-item.import {
  background-color: #0379ab;
}
.pageoptions-container .float-container .float-btns-container .float-btns-item.del {
  background-color: #ff3f3f;
}
.pageoptions-container .float-container .float-btns-container .float-btns-item.confirm {
  background-color: #008c95;
}
@media (max-width: 992px) {
  .pageoptions-container {
    width: 100%;
    padding-left: 0;
    padding-top: 15px;
  }
  .pageoptions-container .float-container {
    top: unset;
    bottom: 15px;
    height: unset;
  }
  .pageoptions-container .float-container .float-btns-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.view-container {
  background-color: #fff;
  margin-bottom: 150px;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.view-container .view-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.view-container .view-items.mb {
  margin-bottom: 30px;
}
.view-container .view-items.mt {
  margin-top: 30px;
}
.view-container .view-items .btncyanblue {
  margin-bottom: 0px;
  margin-right: 90px;
}
.view-container .view-items .btncyanblue::after {
  content: "";
  width: 90px;
  height: 1px;
  background-color: #d4d4d4;
  position: absolute;
  top: 50%;
  left: 150px;
}
.view-container .view-items .viewitemtitle {
  width: 33.3333333333%;
  margin-bottom: 15px;
  font-size: 1.25rem;
  line-height: 1.33;
  display: flex;
  flex-direction: column;
}
.view-container .view-items .viewitemtitle span {
  color: #8e8e90;
  font-size: 0.875rem;
  line-height: 2;
}
.view-container .view-items .viewitemtitle .input {
  width: calc(100% - 30px);
  height: 40px;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid #c2cadd;
  background-color: #f2f3f5;
  color: #8e8e90;
  font-size: 0.875rem;
}

.exportoptions-container {
  background-color: #fff;
  border-radius: 15px;
  padding: 0 15px 60px;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  box-shadow: 2px 2px 2px rgba(142, 142, 144, 0.5);
}
.exportoptions-container.record {
  background-color: #8e8e90;
  padding-bottom: 30px;
}
.exportoptions-container.record #itemslist_wrapper {
  margin-top: -30px;
}
.exportoptions-container .bigtitle {
  font-size: 1.5rem;
  margin-top: 15px;
}
.exportoptions-container .export-items {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}
.exportoptions-container .export-items:not(:last-child) {
  /*border-bottom:1px solid $color_border;*/
}
.exportoptions-container .export-items.nobdb {
  border-bottom: none !important;
}
.exportoptions-container .export-items .exporttitle {
  width: 100px;
  font-size: 1.25rem;
  line-height: 1.33;
  display: flex;
  flex-direction: column;
}
.exportoptions-container .export-items .exporttitle span {
  color: #8e8e90;
  font-size: 0.875rem;
}
.exportoptions-container .export-items.jcstart {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.exportoptions-container .export-items.jcstart .exporttitle {
  width: 33.3333333333%;
  margin-bottom: 15px;
}
.exportoptions-container .export-items .opt-items {
  flex: 2;
  padding-right: 80px;
  display: flex;
  flex-wrap: wrap;
}
.exportoptions-container .export-items .opt-items .opt-item {
  display: flex;
  flex-direction: column;
  padding-right: 10px;
  margin-bottom: 10px;
}
.exportoptions-container .export-items .opt-items .opt-item.short {
  width: 200px;
}
.exportoptions-container .export-items .opt-items .opt-item.short .dropdown-item {
  font-size: 0.75rem;
}
.exportoptions-container .export-items .opt-items .opt-item.long {
  width: 300px;
}
.exportoptions-container .export-items .opt-items .opt-item.long .dropdown-item {
  font-size: 0.75rem;
}
.exportoptions-container .export-items .opt-items .opt-item .title {
  color: #8e8e90;
  font-size: 0.875rem;
}
.exportoptions-container .export-items .opt-items .opt-break {
  width: 100%;
}
.exportoptions-container .export-items .opt-items .btn, .exportoptions-container .export-items .opt-items .btnfullwidth, .exportoptions-container .export-items .opt-items .btngray, .exportoptions-container .export-items .opt-items .btnwhite, .exportoptions-container .export-items .opt-items .btnblack, .exportoptions-container .export-items .opt-items .btnbrown, .exportoptions-container .export-items .opt-items .btnred, .exportoptions-container .export-items .opt-items .btnblue, .exportoptions-container .export-items .opt-items .btnblue_light, .exportoptions-container .export-items .opt-items .btnblue_dark, .exportoptions-container .export-items .opt-items .btngreen, .exportoptions-container .export-items .opt-items .btnpurple, .exportoptions-container .export-items .opt-items .btnorange, .exportoptions-container .export-items .opt-items .btnorange_red, .exportoptions-container .export-items .opt-items .btnorange_yellow, .exportoptions-container .export-items .opt-items .btnpink, .exportoptions-container .export-items .opt-items .btnyellow, .exportoptions-container .export-items .opt-items .btngreen_light, .exportoptions-container .export-items .opt-items .btnupload, .exportoptions-container .export-items .opt-items .btnnobgc {
  margin-right: 5px;
}
.exportoptions-container .export-items .btns {
  width: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.exportoptions-container .export-items .btns .btngreen, .exportoptions-container .export-items .btns .btnpurple, .exportoptions-container .export-items .btns .btnblue, .exportoptions-container .export-items .btns .btncyanblue {
  margin-right: 0px !important;
  margin-bottom: 10px;
}
.exportoptions-container .export-items .btns.flexend {
  justify-content: flex-end;
}

.filteroptions-container {
  display: flex;
  flex-direction: column;
}
.filteroptions-container .filter-items {
  display: flex;
  justify-content: space-between;
}
.filteroptions-container .filter-items:not(:last-child) {
  border-bottom: 1px solid #c2cadd;
}
.filteroptions-container .filter-items.nobdb {
  border-bottom: none !important;
}
.filteroptions-container .filter-items .filtertitle {
  width: 100px;
  font-size: 1.25rem;
  line-height: 1.33;
  display: flex;
  flex-direction: column;
  padding-right: 15px;
}
.filteroptions-container .filter-items .filtertitle span {
  color: #8e8e90;
  font-size: 0.875rem;
}
.filteroptions-container .filter-items .opt-items {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}
.filteroptions-container .filter-items .opt-items .opt-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 10px;
}
.filteroptions-container .filter-items .opt-items .opt-item .title {
  color: #8e8e90;
  font-size: 0.875rem;
}
.filteroptions-container .filter-items .opt-items .opt-item input {
  height: 35px;
}
.filteroptions-container .filter-items .btns {
  width: 180px;
  display: flex;
  flex-direction: column;
}
.filteroptions-container .filter-items .btns .btngreen, .filteroptions-container .filter-items .btns .btnpurple, .filteroptions-container .filter-items .btns .btnblue, .filteroptions-container .filter-items .btns .btncyanblue {
  margin-right: 0px !important;
  margin-bottom: 10px;
}
.filteroptions-container .filter-items .btns.flexend {
  justify-content: flex-end;
}

.itemedit-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.itemedit-warning {
  padding-top: 30px;
  color: #ff3f3f;
  font-size: 0.875rem;
}
.itemedit-warning span {
  text-decoration-line: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.itemedit-btns {
  display: flex;
  padding-top: 10px;
}
.itemedit-btns .btnxs + .btnxs {
  margin-left: 15px;
}

.form-input-group {
  display: flex;
  align-items: center;
}
.form-input-group span {
  margin-left: 15px;
  margin-right: 15px;
}

.itemedit-customerform {
  background-color: rgba(242, 243, 245, 0.5);
  width: 100%;
}
.itemedit-customerform .checkboxs {
  display: flex;
  flex-wrap: wrap;
}
.itemedit-customerform .checkboxs .checkbox {
  width: 20%;
}
.itemedit-customerform .checkboxs .checkbox.quar {
  width: 25%;
}
.itemedit-customerform .checkboxs .checkbox label {
  display: flex;
  align-items: center;
}
.itemedit-customerform .checkboxs .checkbox label img {
  margin-right: 5px;
}

.itemedit-form {
  padding-bottom: 15px;
}
.itemedit-form .itemedit-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.itemedit-form .itemedit-content input {
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
  max-width: 90px;
}
.itemedit-form .itemedit-content .itemedit-text.total {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.itemedit-form .itemedit-content.fd_column {
  flex-direction: column;
  align-items: first baseline;
}
.itemedit-form .itemedit-row {
  /*margin-bottom:$grid_gutters / 2;*/
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.itemedit-form .itemedit-row .colhalf {
  width: calc((100% - 30px / 2) / 2);
}
.itemedit-form .itemedit-row .colthird {
  width: calc((100% - 2 * 30px / 2) / 3);
}
.itemedit-form .itemedit-row .colthird2 {
  width: calc(100% - (100% - 2 * 30px / 2) / 3 - 30px / 2);
}
.itemedit-form .itemedit-row .colquar {
  width: calc((100% - 3 * 30px / 2) / 4);
}
.itemedit-form .itemedit-row .colquar3 {
  width: calc(100% - (100% - 3 * 30px / 2) / 4 - 30px / 2);
}
.itemedit-form .itemedit-row .colsix {
  width: calc((100% - 5 * 30px / 2) / 6);
}
.itemedit-form .itemedit-row .colsix5 {
  width: calc(100% - (100% - 5 * 30px / 2) / 6 - 30px / 2);
}
.itemedit-form .itemedit-row .coleight {
  width: calc((100% - 7 * 30px / 2) / 8);
}
.itemedit-form .itemedit-row .colten {
  width: calc((100% - 9 * 30px / 2) / 10);
}
.itemedit-form .itemedit-row .coltwelve {
  width: calc((100% - 11 * 30px / 2) / 12);
}
.itemedit-form .itemedit-row .coltwentyfour {
  width: calc((100% - 23 * 30px / 2) / 24);
}
.itemedit-form .itemedit-row .colflex2 {
  flex: 2;
}
.itemedit-form .itemedit-row .colfull {
  width: 100%;
}
.itemedit-form .itemedit-row .colhalf-ms {
  flex-direction: row !important;
  align-items: center;
}
.itemedit-form .itemedit-row .colhalf-ms span {
  padding-right: 5px;
}
@media (max-width: 992px) {
  .itemedit-form .itemedit-row .colhalf, .itemedit-form .itemedit-row .colthird, .itemedit-form .itemedit-row .colthird2, .itemedit-form .itemedit-row .colquar, .itemedit-form .itemedit-row .colquar3, .itemedit-form .itemedit-row .colsix, .itemedit-form .itemedit-row .colsix5, .itemedit-form .itemedit-row .coleight, .itemedit-form .itemedit-row .colten, .itemedit-form .itemedit-row .coltwelve, .itemedit-form .itemedit-row .coltwentyfour {
    width: 100%;
  }
  .itemedit-form .itemedit-row .colhalf-ms {
    width: calc((100% - 30px / 2) / 2) !important;
  }
  .itemedit-form .itemedit-row .itemedit-next {
    display: none;
  }
}
.itemedit-form .itemedit-row .colclear {
  flex: 2;
}
.itemedit-form .itemedit-row .itemedit-col {
  position: relative;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.itemedit-form .itemedit-row .itemedit-col.nopr {
  padding-right: 0px;
}
.itemedit-form .itemedit-row .itemedit-col.nomb {
  margin-bottom: 0px;
}
.itemedit-form .itemedit-row .itemedit-col .title {
  color: rgba(40, 40, 40, 0.5);
  font-size: 0.875rem;
  margin-bottom: 3px;
}
.itemedit-form .itemedit-row .itemedit-col .title span.required {
  color: #ff3f3f;
}
.itemedit-form .itemedit-row .itemedit-col .title span.required:after {
  content: "*";
  margin-left: 3px;
}
.itemedit-form .itemedit-row .itemedit-col .title span.selectall {
  cursor: pointer;
  font-size: 0.6667rem;
  margin-left: 10px;
  text-transform: uppercase;
}
.itemedit-form .itemedit-row .itemedit-col .title span.selectall:hover {
  color: #0379ab;
}
.itemedit-form .itemedit-row .itemedit-col .title span.selectall.active {
  color: #0379ab;
}
.itemedit-form .itemedit-row .itemedit-col .title span.selectall.active:hover {
  color: #8e8e90;
}
.itemedit-form .itemedit-row .itemedit-col .subtitle {
  color: rgba(142, 142, 144, 0.75);
  font-size: 0.75rem;
  font-style: italic;
}
.itemedit-form .itemedit-row .itemedit-col .checkboxs {
  height: 100%;
}
.itemedit-form .itemedit-row .itemedit-col .checkboxs .form-input {
  height: 34px;
}
.itemedit-form .itemedit-row .itemedit-col .radios {
  min-height: 30px;
}
.itemedit-form .itemedit-row .itemedit-col .radios .remark {
  color: #ff3f3f;
  font-size: 0.875rem;
}
.itemedit-form .itemedit-row .itemedit-col .customerdel {
  color: #ff3f3f;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 5px;
  font-size: 0.75rem;
}
.itemedit-form .itemedit-row .itemedit-col .customerdel:hover {
  text-decoration: underline;
}
.itemedit-form .itemedit-row .itemedit-col.flexcolumn .checkboxs {
  display: flex;
  flex-direction: column;
}
.itemedit-form .itemedit-row .itemedit-col.flexcolumn .radio {
  display: flex;
}
.itemedit-form .itemedit-row .itemedit-col .alarm {
  font-size: 0.875rem;
  color: #ff3f3f;
}
.itemedit-form .itemedit-row .itemedit-col .alarm span {
  color: #0379ab;
  border-bottom: 1px solid #0379ab;
}
.itemedit-form .itemedit-row.itemedit-row-header .itemedit-col {
  margin-bottom: 5px;
  font-weight: 700;
  background-color: rgba(194, 202, 221, 0.25);
  padding: 3px 5px;
}
.itemedit-form .itemedit-row.itemedit-row-header .itemedit-col .title {
  margin-bottom: 0px;
}
.itemedit-form .itemedit-row.addmr .itemedit-col {
  margin-right: 10px;
}
.itemedit-form .itemedit-row.addmr .itemedit-col.itemedit-next {
  margin-right: 0;
}

.set_project_progress {
  display: flex;
  justify-content: center;
  align-items: end;
}

.itemedit-staypay-container {
  /*display:flex;*/
}

.uploadcontainer {
  display: flex;
}
.uploadcontainer .uploadwrapper {
  flex: 2;
  display: flex;
  justify-content: flex-start;
}
.uploadcontainer .uploadwrapper.attachfiles-container {
  flex-direction: column;
}
.uploadcontainer .uploadwrapper .attachfilesitems {
  /*width:400px;*/
  flex: 2;
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}
.uploadcontainer .uploadwrapper .attachfilesitems .attachfilesitem {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.uploadcontainer .uploadwrapper .attachfilesitems .attachfilesitem span {
  color: #8e8e90;
  text-decoration-line: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  line-height: 1.15;
}
.uploadcontainer .uploadwrapper .attachfilesitems .attachfilesitem span img {
  max-height: 50px;
  border-radius: 5px;
}
.uploadcontainer .uploadwrapper .attachfilesitems .attachfilesitem .del {
  color: #ff3f3f;
  text-decoration: none;
  cursor: pointer;
  /*font-size:.875rem;*/
  display: flex;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(142, 142, 144, 0.5);
  padding-bottom: 5px;
  margin-left: 5px;
  color: #fff;
  background-color: #ff3f3f;
}
.uploadcontainer .uploadwrapper .attachfilesitems .attachfilesitem .del:hover {
  background-color: rgba(142, 142, 144, 0.5);
}
.uploadcontainer .uploadwrapper .attachfilesitems.fdrow {
  flex-direction: row;
  padding-bottom: 0;
  flex-wrap: wrap;
}
.uploadcontainer .uploadwrapper .attachfilesitems.fdrow .attachfilesitem {
  margin-top: 0;
  margin-right: 10px;
  align-items: baseline;
}
.uploadcontainer .uploadwrapper .attachfilesitems.fdrow .attachfilesitem .del {
  position: absolute;
  right: 0px;
}
.uploadcontainer .uploadwrapper.uploadfile {
  position: relative;
  background-color: #f2f3f5;
  border: 1px dotted #8e8e90;
  border-radius: 5px;
  width: 100%;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.uploadcontainer .uploadwrapper.uploadfile .uploadicon {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.uploadcontainer .uploadwrapper.uploadfile .uploadicon .content {
  border-bottom: 1px solid #c2cadd;
  margin-top: 15px;
  color: #8e8e90;
  font-size: 0.875rem;
}
.uploadcontainer .uploadwrapper.uploadfile .uploadphoto {
  display: none;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 95%;
  height: 95%;
}
.uploadcontainer .uploadwrapper.uploadfile .uploadphoto .imgwrapper {
  position: relative;
  max-width: 95%;
  max-height: 95%;
}
.uploadcontainer .uploadwrapper.uploadfile .uploadphoto img {
  position: relative;
  max-width: 95%;
  max-height: 95%;
}
.uploadcontainer .uploadwrapper.uploadfile .btns {
  position: absolute;
  top: 15px;
  right: 15px;
  display: none;
}
.uploadcontainer .uploadwrapper.uploadfile .btns img {
  margin-left: 15px;
  cursor: pointer;
}
.uploadcontainer .uploadwrapper.uploadfile .leftbtns {
  position: absolute;
  bottom: 15px;
  left: 15px;
  display: none;
}
.uploadcontainer .uploadwrapper.uploadfile .leftbtns img {
  width: 32px;
  cursor: pointer;
}
.uploadcontainer .uploadwrapper.uploadfile.draging {
  background-color: #8e8e90;
}
.uploadcontainer .uploadwrapper.uploadfile.active {
  background-color: #fff;
}
.uploadcontainer .uploadwrapper.uploadfile.active .uploadicon {
  display: none;
}
.uploadcontainer .uploadwrapper.uploadfile.active .uploadphoto, .uploadcontainer .uploadwrapper.uploadfile.active .btns, .uploadcontainer .uploadwrapper.uploadfile.active .leftbtns {
  display: flex;
}
.uploadcontainer .uploadaffixinfo {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding-left: 15px;
}
.uploadcontainer .uploadaffixinfo .title {
  margin-bottom: 0px !important;
}
.uploadcontainer .uploadaffixinfo .line {
  width: 100%;
  height: 1px;
  background-color: #f2f3f5;
  margin-top: 10px;
  margin-bottom: 10px;
}

.dataTables_wrapper {
  /*margin-top:-35px;*/
  margin-bottom: 30px;
}
.dataTables_wrapper .dataTables_filter {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.dataTables_wrapper .dataTables_filter label {
  flex: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.dataTables_wrapper .dataTables_filter label span {
  display: none;
}
.dataTables_wrapper .dataTables_filter label input[type=search] {
  background-image: url(../../modules/icons/search.webp);
  background-repeat: no-repeat;
  background-position: 10px center;
  border: 1px solid #c2cadd;
  border-radius: 10px;
  padding: 6px 15px 6px 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 35px;
  width: 250px;
}
.dataTables_wrapper .dataTables_filter label .dropdown {
  width: unset;
  margin-right: 10px;
}
.dataTables_wrapper .dataTables_filter label .dropdown .dropdown-content input {
  width: unset;
  border-radius: 1px;
}
.dataTables_wrapper .dataTables_filter label .dropdown .dropdown-content input:first-child {
  display: none;
}
.dataTables_wrapper .dataTables_filter label .dropdown .dropdown-content input:last-child {
  font-size: 0.875rem;
  padding-right: 0px;
}
.dataTables_wrapper .dataTables_filter label .dropdown .dropdown-items {
  min-width: unset;
}
.dataTables_wrapper .dataTables_paginate {
  float: unset;
  text-align: unset;
  padding-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button .pageicon {
  background-image: url(../../modules/icons/pagedirection.webp);
  background-repeat: no-repeat;
  background-size: cover;
  width: 9px;
  height: 7px;
  display: block;
}
.dataTables_wrapper .dataTables_paginate .paginate_button .pageicon.next {
  transform: rotate(180deg);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled .pageicon {
  opacity: 0.25;
}
.dataTables_wrapper table {
  font-size: 0.875rem;
}
.dataTables_wrapper table thead tr th {
  padding: 5px 5px !important;
  text-align: left;
}
.dataTables_wrapper table thead tr th.widthxxs {
  width: 30px !important;
}
.dataTables_wrapper table thead tr th.widthxxs .checkbox {
  padding-right: 0px;
}
.dataTables_wrapper table thead tr th.widthxs {
  width: 50px !important;
}
.dataTables_wrapper table thead tr th.widthsx {
  width: 75px !important;
}
.dataTables_wrapper table thead tr th.widthsm {
  width: 100px;
}
.dataTables_wrapper table thead tr th.widthmd {
  width: 150px;
}
.dataTables_wrapper table thead tr th.widthlg {
  width: 200px;
}
.dataTables_wrapper table thead tr th.widthxl {
  width: 250px;
}
.dataTables_wrapper table thead tr th.widthxxl {
  width: 300px;
}
.dataTables_wrapper table tfoot tr {
  position: relative;
}
.dataTables_wrapper table tfoot tr td {
  overflow: visible;
}
.dataTables_wrapper table tfoot tr td input {
  padding: 3px 5px !important;
  height: 30px;
}
.dataTables_wrapper table td {
  position: relative;
  /*
  text-overflow: ellipsis;
  white-space: nowrap !important;
  overflow: hidden;
  */
  padding: 3px 5px !important;
}
.dataTables_wrapper table td.widthxxs {
  width: 30px !important;
}
.dataTables_wrapper table td.widthxxs .checkbox {
  padding-right: 0px !important;
}
.dataTables_wrapper table td .ezpdf {
  max-height: 30px;
}
.dataTables_wrapper table td.editdisable {
  background-color: #8e8e90;
}
.dataTables_wrapper table td .extendbtns {
  display: flex;
}
.dataTables_wrapper table td .waitingedit, .dataTables_wrapper table td .waitingedit input.form-dropdown {
  /*pointer-events: none;*/
  pointer-events: auto !important;
  height: unset !important;
  border: unset !important;
  padding: unset !important;
  color: unset !important;
  font-size: unset !important;
  border-radius: unset !important;
  background-image: none !important;
  background-color: transparent !important;
  resize: none !important;
}
.dataTables_wrapper table td .editing {
  background-color: #fff;
}
.dataTables_wrapper table td.dragableicon {
  display: flex;
  align-items: center;
  height: 40px;
}
.dataTables_wrapper table td.dragableicon img {
  height: 16px;
  margin-right: 10px;
}
.dataTables_wrapper table td .moneyhide.ishide {
  color: transparent;
  position: relative;
}
.dataTables_wrapper table td .moneyhide.ishide:after {
  content: "...";
  color: #282828;
  position: absolute;
  left: 0px;
}
.dataTables_wrapper table td span.iscolor {
  display: flex;
  align-items: center;
  width: 150px;
  height: 30px;
  padding-left: 10px;
  color: #fff;
}
@media (max-width: 992px) {
  .dataTables_wrapper table td {
    padding: 8px 5px !important;
  }
}
.dataTables_wrapper table tr.isdragableicon {
  position: relative;
}
.dataTables_wrapper table tr.isdragableicon:after {
  content: "";
  background-image: url("../../modules/icons/sortable.webp");
  background-size: contain;
  width: 11px;
  height: 17px;
  position: absolute;
  left: 4px;
  top: 7px;
  cursor: move;
}
.dataTables_wrapper table tr.isdragableicon td:first-child {
  padding-left: 22px !important;
}
.dataTables_wrapper table tr.isorange {
  background-color: rgba(201, 92, 2, 0.75);
  color: #fff !important;
}
.dataTables_wrapper table tr.isred {
  background-color: rgba(255, 63, 63, 0.75);
  color: #fff !important;
}
.dataTables_wrapper table tr.isblue {
  background-color: rgba(3, 121, 171, 0.75);
  color: #fff !important;
}
.dataTables_wrapper table tr.trediting:after {
  display: none;
}
.dataTables_wrapper table tr.trediting td {
  overflow: visible;
}
.dataTables_wrapper table tr.trediting td.dragableicon img {
  display: none;
}
.dataTables_wrapper table tr.trediting td:first-child {
  padding-left: 10px;
}
.dataTables_wrapper table tr.trediting td input {
  height: 30px;
  padding: 3px 5px;
}
.dataTables_wrapper table.table-flex {
  border: none !important;
}
.dataTables_wrapper table.table-flex thead {
  display: none;
}
.dataTables_wrapper table.table-flex tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.dataTables_wrapper table.table-flex tbody tr {
  border: none !important;
  background-color: #fff !important;
  width: calc(25% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
}
.dataTables_wrapper table.table-flex tbody tr td {
  display: flex !important;
  border: none !important;
  max-width: unset !important;
  padding: 0 !important;
  position: relative;
}
.dataTables_wrapper table.table-flex tbody tr td .img {
  position: relative;
  display: flex;
}
.dataTables_wrapper table.table-flex tbody tr td .img::after {
  content: "";
  background-color: rgba(100, 100, 100, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
.dataTables_wrapper table.table-flex tbody tr td .title {
  position: absolute;
  left: 15px;
  bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.dataTables_wrapper table.table-flex tbody tr td .title .status {
  margin-right: 10px;
}
.dataTables_wrapper .itemopts {
  display: flex;
  justify-content: center;
}
.dataTables_wrapper .itemopts .itemopt {
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  margin-right: 8px;
}
.dataTables_wrapper .itemopts .itemopt.hidden {
  display: none;
}
.dataTables_wrapper .itemopts .itemopt.btndisable {
  opacity: 0.25 !important;
  cursor: default !important;
  pointer-events: none !important;
}
.dataTables_wrapper .itemopts .itemopt.itemopteditcopy {
  background-image: url(../../modules/icons/editcopy.webp);
}
.dataTables_wrapper .itemopts .itemopt.itemoptcopy {
  background-image: url(../../modules/icons/copy.webp);
}
.dataTables_wrapper .itemopts .itemopt.itemoptview {
  background-image: url(../../modules/icons/search.webp);
}
.dataTables_wrapper .itemopts .itemopt.itemoptinlineedit {
  background-image: url(../../modules/icons/inlineedit.webp);
}
.dataTables_wrapper .itemopts .itemopt.itemoptconfirm {
  background-image: url(../../modules/icons/confirm.webp);
}
.dataTables_wrapper .itemopts .itemopt.itemoptprint {
  background-image: url(../../modules/icons/print.webp);
}
.dataTables_wrapper .itemopts .itemopt.itemoptcancel {
  background-image: url(../../modules/icons/cancel.webp);
}
.dataTables_wrapper .itemopts .itemopt.itemoptedit {
  background-image: url(../../modules/icons/edit.webp);
}
.dataTables_wrapper .itemopts .itemopt.itemoptdel {
  background-image: url(../../modules/icons/del.webp);
}
.dataTables_wrapper .itemopts .itemopt.itemoptselect {
  display: flex;
  align-items: center;
}
.dataTables_wrapper .itemopts .itemopt.item_opt_edit {
  display: none;
}
.dataTables_wrapper .itemopts .item_opt_edit {
  display: none;
}
.dataTables_wrapper .itemopts .inactive {
  display: none !important;
}
@media (max-width: 992px) {
  .dataTables_wrapper .itemopts .itemopt.itemoptedit {
    display: none;
  }
  .dataTables_wrapper .itemopts .item_opt_edit {
    display: flex;
  }
}

.update-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.radioswitchs {
  display: flex;
  width: 300px;
  height: 40px;
  border: 2px solid #c2cadd;
  background-color: #fff;
  position: relative;
}
.radioswitchs input {
  z-index: -1;
  position: absolute;
}
.radioswitchs .radioswitch {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #282828;
  cursor: pointer;
}
.radioswitchs .radioswitch.active {
  color: #fff;
  background-color: #008c95;
}
.radioswitchs .radioswitch:not(:last-child) {
  border-right: 1px solid #8e8e90;
}

.adminpagepermission .checkboxs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}
.adminpagepermission .checkboxs .checkbox {
  min-width: 245px;
}
.adminpagepermission .checkboxs .checkbox label {
  margin-left: 5px;
  font-size: 0.875rem;
}
.adminpagepermission .checkboxs .checkbox.empty {
  width: 100%;
  height: 5px;
  border-bottom: 1px solid #c2cadd;
  margin-bottom: 5px;
}

.tfootbtn {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.keyword-search-items {
  z-index: 100;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: calc(100% - 15px);
  max-width: 540px;
  left: 0px;
  /*top:calc(100% + 0px);*/
  top: 40px;
  background-color: #fff;
  border-top: 1px solid #c2cadd;
  border-left: 1px solid #c2cadd;
  box-shadow: 2px 2px 2px rgba(142, 142, 144, 0.5);
  max-height: 295px;
  overflow: hidden;
}
.keyword-search-items .keyword-search-item {
  cursor: pointer;
  border-right: 1px solid #c2cadd;
  border-bottom: 1px solid #c2cadd;
  padding: 7px 15px;
}
.keyword-search-items .keyword-search-item span {
  font-size: 0.75rem;
}
.keyword-search-items .keyword-search-item:hover {
  color: #fff;
  background-color: #8e8e90;
}

input[type=range] {
  width: 360px;
}

.clock-timepicker {
  background: url("../icons/timeclock.webp") no-repeat scroll #ffffff;
  background-position: calc(100% - 15px);
  position: relative;
  display: block;
  width: 100%;
}
.clock-timepicker .form-input {
  min-width: 100% !important;
}

.ul_pics {
  display: flex;
  flex-direction: column;
}
.ul_pics li {
  margin-bottom: 5px;
  height: 30px;
  display: flex;
}
.ul_pics li .name {
  border: 1px solid #008c95;
  padding: 3.75px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}
.ul_pics li .progress {
  flex: 2;
  position: relative;
  background-color: #8e8e90;
}
.ul_pics li .progress .percent {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 0.75rem;
}
.ul_pics li .progress .bar {
  background-color: rgba(0, 140, 149, 0.75);
  display: block;
  width: 0%;
  height: 30px;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
  transition: width 0.6s ease;
  opacity: 0.8;
}

.autocomplete-dropdown {
  position: absolute;
  border: 1px solid #ddd;
  background: white;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

.autocomplete-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f1f1f1;
  transition: background-color 0.2s;
}

.autocomplete-item:hover {
  background-color: #e3f2fd;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.mymodal-cropper-container {
  display: flex;
  justify-content: space-between;
}
.mymodal-cropper-container .mymodal-cropper-area {
  flex: 2;
}
.mymodal-cropper-container .mymodal-cropper-preview {
  display: none;
  width: 300px;
}
.mymodal-cropper-container .mymodal-cropper-preview .preview {
  overflow: hidden;
  width: 200px;
  height: 200px;
  margin: 0px auto;
  border: 1px solid red;
}

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior-y: contain;
}
.cropper-container img {
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}
.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.3333333333%;
  left: 0;
  top: 33.3333333333%;
  width: 100%;
}
.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.3333333333%;
  top: 0;
  width: 33.3333333333%;
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}
.cropper-center::before, .cropper-center::after {
  background-color: #eee;
  content: " ";
  display: block;
  position: absolute;
}
.cropper-center::before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}
.cropper-center::after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}
.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}
.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}
.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}
.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}
.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}
.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}
.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}
.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}
.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}
.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}
.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}
.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}
.cropper-point.point-se::before {
  background-color: #39f;
  bottom: -50%;
  content: " ";
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

.hotelroomdetail-tabs {
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}
.hotelroomdetail-tabs .nav-item-break {
  width: 71.4285714286%;
  line-height: 0;
}
.hotelroomdetail-tabs .nav-item-bd {
  border-bottom: 1px solid #dee2e6;
}
.hotelroomdetail-tabs.nav-tabs .nav-item {
  margin-bottom: 0px;
}

.tablist-items {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dee2e6;
}
.tablist-items .tablist-item {
  position: relative;
  flex: 1;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  padding: 10px 10px;
}
.tablist-items .tablist-item.active {
  color: #c95c02;
  border-bottom: 2px solid #c95c02;
}
.tablist-items .tablist-item:hover {
  color: #c95c02;
}
.tablist-items .tablist-item:not(:last-child):after {
  content: "";
  width: 2px;
  height: calc(100% - 2px);
  background-color: #d6d7d8;
  position: absolute;
  right: 0px;
  top: 1px;
}

.tabcontent-items {
  padding-top: 30px;
}
.tabcontent-items.smallpt {
  padding-top: 10px;
}
.tabcontent-items.nopt {
  padding-top: 0;
}
.tabcontent-items .tabcontent-item {
  display: none;
}
.tabcontent-items .tabcontent-item.active {
  display: flex;
  flex-direction: column;
}

#hotelinfo {
  font-size: 0.875rem;
}
#hotelinfo ul li {
  margin-bottom: 7.5px;
}

#foodinfo .item {
  display: flex;
  border-bottom: 1px solid #8e8e90;
  font-size: 0.875rem;
}
#foodinfo .item .title {
  width: 25%;
  color: #630303;
  text-align: left;
  padding: 10px 6px;
}
#foodinfo .item .content {
  flex: 2;
  color: #282828;
  text-align: left;
  padding: 10px 6px;
}
#foodinfo .item.header {
  color: #0379ab;
  border-bottom: 1px solid #630303;
}

#serviceinfo .title {
  color: #8d09d7;
  font-family: Himalaya;
  font-size: 16px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
}
#serviceinfo ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding-left: 0;
}
#serviceinfo ul li {
  flex-basis: 33%;
  margin-bottom: 3px;
  margin-top: 5px;
}
#serviceinfo ul li img {
  margin-right: 20px;
  width: 20px;
}
#serviceinfo hr {
  border-color: #8e8e90;
}

.upload_thumbs {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

.upload_title {
  background-color: #be9e5d;
  color: #fff;
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.upload_thumb {
  display: flex;
  align-items: center;
}
.upload_thumb .title {
  cursor: pointer;
}
.upload_thumb .jsdelhotelpdf {
  color: #f00;
  font-size: 2rem;
  padding-left: 15px;
  cursor: pointer;
}

.mixitup-filters {
  display: flex;
  margin-bottom: 15px;
}
.mixitup-filters .mixitup-filter {
  cursor: pointer;
  color: #8e8e90;
  width: 150px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.125rem;
}
.mixitup-filters .mixitup-filter.active {
  color: #630303;
}

.mixitup-items {
  display: flex;
  flex-wrap: wrap;
}
.mixitup-items .mixitup-item {
  margin-right: 15px;
  margin-bottom: 15px;
}
.mixitup-items .mixitup-item img {
  max-height: 100px !important;
  cursor: pointer;
}
.mixitup-items .mixitup-item.inactive {
  display: none;
}

.tabulator-container {
  max-width: 100%;
  overflow-x: auto !important;
  overflow: visible !important;
}

.tabulator-total-container {
  background-color: rgba(3, 121, 171, 0.9);
  padding: 10px;
  border-radius: 5px;
  color: #fff !important;
  margin-bottom: 15px;
}

.red-header[role=columnheader] {
  color: #ff3f3f;
  font-weight: 700;
}

.tabulator .tabulator-row .tabulator-cell.p0 {
  padding: 0 !important;
}
.tabulator .tabulator-row .tabulator-cell.files img {
  height: 20px;
}
.tabulator .tabulator-row .tabulator-cell .icon-items img {
  height: 20px;
  margin-right: 10px;
}
.tabulator .tabulator-row .tabulator-cell {
  /*
  [data-action="duplicate"]{
      width:unset;
      font-size:.75rem;
      color:$color_blue;
      &:hover{
          color:rgba($color_blue,.5);
      }
  }
  */
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title span {
  padding-left: 5px;
  color: #ff3f3f;
  font-style: italic;
}

@media (max-width: 992px) {
  .tabulator .tabulator-footer .tabulator-footer-contents .tabulator-paginator .tabulator-page {
    margin: 1px;
    font-size: 0.75rem;
    width: 35px;
  }
  .tabulator .tabulator-footer .tabulator-footer-contents .tabulator-paginator label {
    font-size: 0.75rem;
  }
}

.tabulator-paginator label {
  margin-right: 5px;
}
.tabulator-paginator .tabulator-page-size {
  margin-right: 10px;
}

/*
.tabulator-container{
	.tabulator-row{
		.tabulator-cell{
			&[tabulator-field=funds_amount]{
				display:none;
			}
		}
	}
	.tabulator-headers{
		.tabulator-col{
			&[tabulator-field=funds_amount]{
				display:none;
			}
		}	
	}
}
*/
/*
.tabulator-container[data-table=tbl_expenses]:not(.showbygrid){
	[tabulator-field=funds_amount]{
		display:none;
	}
}
*/
.tabulator-container.showbygrid {
  border: none;
  background-color: transparent;
}
.tabulator-container.showbygrid .tabulator-header {
  border-bottom: none;
}
.tabulator-container.showbygrid .tabulator-header .tabulator-header-contents {
  display: none;
}
.tabulator-container.showbygrid .tabulator-footer {
  margin-top: 5px;
}
.tabulator-container.showbygrid .tabulator-footer .tabulator-calcs-holder {
  display: none !important;
}
.tabulator-container.showbygrid .tabulator-tableholder .tabulator-table {
  display: flex;
  flex-wrap: wrap;
}
.tabulator-container.showbygrid .tabulator-row {
  width: calc((100% - 20px) / 2);
  margin: 4px;
  /*flex-direction:column;*/
  display: flex;
  flex-wrap: wrap;
  border-radius: 5px;
  border: 1px solid rgba(142, 142, 144, 0.75);
  padding: 10px;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell {
  border-right: none;
  /*width: 100% !important;*/
  padding: 3px !important;
  /*label{
  	width:60px;
  	text-align:left;
  }*/
  /*&[tabulator-field=funds_expend],&[tabulator-field=funds_income]{
  	display:none !important;
  }
  &[tabulator-field=funds_amount]{
  	display:inline-flex !important;
  }*/
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_type {
  flex: 2 !important;
  height: auto !important;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_amount, .tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_agent {
  display: inline-block;
  width: 22% !important;
  min-width: 1px !important;
  height: auto !important;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_date {
  width: 22% !important;
  height: auto !important;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell.options {
  justify-content: flex-end;
  width: 100% !important;
  height: auto !important;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_title, .tabulator-container.showbygrid .tabulator-row .tabulator-cell.remark, .tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_info {
  /*flex: 1 0 100%;*/
  width: 100% !important;
  height: auto !important;
  color: #8e8e90 !important;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_title label, .tabulator-container.showbygrid .tabulator-row .tabulator-cell.remark label, .tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_info label {
  /*font-weight:700;*/
  margin-right: 5px;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_title .under-line, .tabulator-container.showbygrid .tabulator-row .tabulator-cell.remark .under-line, .tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_info .under-line {
  text-decoration: underline;
  margin-right: 4px;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell.funds_title {
  font-weight: 700;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell.files {
  width: 8% !important;
  justify-content: flex-end;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-cell.files img {
  max-height: 30px !important;
  margin: 1px;
}
.tabulator-container.showbygrid .tabulator-row .tabulator-col-resize-handle {
  display: none;
}
.tabulator-container.showbygrid .tabulator-row.special-row {
  flex-direction: row;
  justify-content: space-between;
}
.tabulator-container.showbygrid .tabulator-row-funds-title-remark {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 992px) {
  .tabulator-container.showbygrid .tabulator-row {
    /*width:calc((100% - 20px) / 2);*/
    width: 100%;
  }
}

@media (max-width: 992px) {
  .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell[tabulator-field=funds_type], .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell[tabulator-field=funds_date], .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell[tabulator-field=files], .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell[tabulator-field=funds_info], .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell[tabulator-field=actions] {
    display: none;
  }
  .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell.funds_amount {
    width: 50% !important;
  }
  .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell.funds_amount[tabulator-field=funds_income]:before {
    content: "總收入：";
  }
  .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell.funds_amount[tabulator-field=funds_expend]:before {
    content: "總支出：";
  }
  .tabulator .tabulator-footer .tabulator-calcs-holder {
    /*display:none;*/
  }
}

.tabulator-button {
  display: flex;
  justify-content: flex-end;
}
.tabulator-button img {
  height: 40px;
}
@media (max-width: 992px) {
  .tabulator-button {
    flex: unset;
    width: 100%;
  }
}

.tabulator-counter {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  /*color:$color_gray;*/
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.75);
}
.tabulator-counter span {
  padding-right: 15px;
  color: #fff;
}
.tabulator-counter span.income {
  /*color:$color_green;*/
}
.tabulator-counter span.expend {
  /*color:$color_blue;*/
}
.tabulator-counter span {
  /*color:$color_black;*/
}
.tabulator-counter span.overdraw {
  color: #ff3f3f;
  font-weight: 700;
}
.tabulator-counter .tabulator-totalincome, .tabulator-counter .tabulator-totalexpend, .tabulator-counter .tabulator-totalleft {
  width: 20%;
  max-width: 240px;
}
@media (max-width: 992px) {
  .tabulator-counter {
    flex-wrap: wrap;
  }
  .tabulator-counter .tabulator-totalincome, .tabulator-counter .tabulator-totalexpend, .tabulator-counter .tabulator-totalleft, .tabulator-counter .tabulator-totalnotpay {
    width: 25%;
    font-size: 0.875rem;
  }
}
@media (max-width: 576px) {
  .tabulator-counter .tabulator-totalincome, .tabulator-counter .tabulator-totalexpend, .tabulator-counter .tabulator-totalleft, .tabulator-counter .tabulator-totalnotpay {
    width: 50%;
    font-size: 1rem;
    letter-spacing: 0.1;
    margin-bottom: 10px;
  }
}

.toggle-gridtable-button {
  width: 40px;
  height: 40px;
  background-image: url("../icons/gridtable.png"); /* 替換為你的圖片 URL */
  background-position: top; /* 顯示圖片上半部分 */
  overflow: hidden; /* 隱藏多餘的部分 */
  background-size: cover;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-left: 10px;
  cursor: pointer;
}
.toggle-gridtable-button.active {
  background-position: bottom;
}
@media (max-width: 992px) {
  .toggle-gridtable-button {
    /*display:none;*/
  }
}

.quick-expenses {
  border-radius: 5px;
  background-color: #fff;
  padding: 6px;
  margin-bottom: 15px;
  display: none;
  transition: all 0.5s ease;
}
.quick-expenses.active {
  display: flex;
}

.expensesfiles {
  position: absolute;
  height: 50px;
  left: 150px;
  bottom: 0px;
}

.tabulator-controls .tabulator-control.flex2 {
  flex: 2;
  justify-content: flex-end;
  padding-left: 5px;
  padding-right: 5px;
}
.tabulator-controls .tabulator-control.flex2 .date-picker-wrapper {
  width: 100%;
  max-width: 300px;
}
.tabulator-controls .tabulator-control .form-input {
  width: 150px;
}
.tabulator-controls .tabulator-control .form-input.form-date {
  transition: all 0.5s ease;
  width: unset;
  max-width: 300px;
}
.tabulator-controls .tabulator-control .tabulator-search {
  width: 100%;
  max-width: 250px;
}
@media (max-width: 992px) {
  .tabulator-controls {
    flex-direction: column;
  }
  .tabulator-controls .tabulator-control {
    flex: 1;
    flex-wrap: wrap;
  }
  .tabulator-controls .tabulator-control.month-list {
    width: 20%;
  }
  .tabulator-controls .tabulator-control .input-wrap {
    /*width: calc(100% - 180px - 20px);*/
  }
  .tabulator-controls .tabulator-control .btnlong {
    flex: 2;
    width: unset;
    font-size: 0.875rem;
  }
  .tabulator-controls .tabulator-control .btnsmall {
    width: 100px;
  }
  .tabulator-controls .tabulator-control input {
    padding: 3px 6px !important;
    font-size: 0.75rem;
  }
  .tabulator-controls .tabulator-control input.form-dropdown {
    background-position: calc(100% - 5px) center;
  }
  .tabulator-controls .tabulator-control input.form-date {
    background-position: 5px center;
    padding-left: 30px !important;
    letter-spacing: 1px;
  }
  .tabulator-controls .tabulator-control .tabulator-search {
    width: 100%;
    max-width: 250px;
  }
  .tabulator-controls .tabulator-control.flex2 {
    flex: unset;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

.booking-filters {
  display: flex;
  align-items: center;
}
.booking-filters .search-title {
  margin-left: 10px;
  margin-right: 5px;
  font-size: 0.875rem;
}
.booking-filters .search-title.noml {
  margin-left: 0px;
}
.booking-filters .form-input {
  height: 30px;
}

/*
.tabulator-col,.tabulator-cell{
	&[tabulator-field=funds_amount]{
		display:none !important;
	}
	@include screen_breakpoints_down($screen_md){
		&[tabulator-field=files],&[tabulator-field=funds_income],&[tabulator-field=funds_expend]{
			display:none !important;
		}
		&[tabulator-field=funds_amount]{
			display:inline-flex !important;
		}
	}
}
*/
.print-area {
  display: flex;
  flex-direction: column;
  border: 1px solid #f00;
  width: 1200px;
  padding: 15px;
}

.printpage {
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  width: 210mm;
  height: 297mm;
  min-height: 297mm;
  max-width: 210mm;
  background-color: #fff;
  padding: 6mm 8mm;
  font-size: 0.875rem;
}

.print-header {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.print-header .print-header-item {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
  font-size: 0.875rem;
}
.print-header .print-header-item .flex2 {
  flex: 2;
}
.print-header .print-header-item.mbbig {
  margin-bottom: 30px;
}
.print-header .print-header-item.jc-center {
  justify-content: center;
}
.print-header .print-header-item .print-header-title {
  font-size: 1.5rem;
  font-weight: 700;
}
.print-header .print-header-item .print-header-title img {
  height: 50px;
}
.print-header .print-header-item .print-header-top {
  display: flex;
  font-size: 0.75rem;
  flex-direction: column;
  justify-content: flex-end;
}
.print-header .print-header-item .print-header-top .content {
  display: flex;
  justify-content: space-between;
}
.print-header .print-header-item .print-header-subtitle {
  width: 40%;
}
.print-header .print-header-item .print-header-subtitle.fullwith {
  width: 100%;
}
.print-header .print-header-item .print-header-subtitle img {
  height: 40px;
}
.print-header .print-header-item .print-header-subtitle span {
  display: inline-block;
  width: 150px;
  text-align: right;
  padding-right: 10px;
}

.quotation-items .quotation-item > div {
  padding: 5px 10px;
}
.quotation-items .quotation-item {
  display: flex;
}
.quotation-items .quotation-item .flex2 {
  flex: 2;
}
.quotation-items .quotation-item .item {
  width: 100px;
}

.bdl {
  border-left: 1px solid rgba(194, 202, 221, 0.75);
}

.bdr {
  border-right: 1px solid rgba(194, 202, 221, 0.75);
}

.bdlt {
  border-left: 1px solid rgba(194, 202, 221, 0.75);
  border-top: 1px solid rgba(194, 202, 221, 0.75);
}

.bdrb {
  border-right: 1px solid rgba(194, 202, 221, 0.75);
  border-bottom: 1px solid rgba(194, 202, 221, 0.75);
}

.padding {
  padding: 6px 10px;
}

.paddingbig {
  padding: 10px 10px;
}

.usage-row .itemedit-col {
  margin-bottom: 5px !important;
}
.usage-row .form-input {
  height: 35px !important;
}

.usage-items {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 0.75rem;
}
.usage-items .usage-body {
  display: flex;
}
.usage-items .usage-body .usage-location {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.usage-items .usage-body .usage-materials {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.usage-items .usage-body .usage-materials .usage-materials-chars {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
}
.usage-items .usage-body .usage-materials .usage-materials-chars .usage-materials-char {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.usage-items .usage-body.footer {
  background-color: rgba(0, 140, 149, 0.05);
}
.usage-items .usage-item {
  display: flex;
  justify-content: center;
}
.usage-items .usage-item.colfull {
  width: 100%;
  color: #ff3f3f;
  font-size: 1rem;
}

.printpage-signs {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  margin-bottom: 10px;
}
.printpage-signs .printpage-sign {
  width: 35%;
  display: flex;
  flex-direction: column;
}
.printpage-signs .printpage-sign .blank {
  height: 100px;
  border-bottom: 2px solid #282828;
  display: flex;
  align-items: center;
}
.printpage-signs .printpage-sign .blank img {
  height: 85px;
}
.printpage-signs .printpage-sign .remark {
  font-size: 0.75rem;
}

.printpage-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.printpage-header .printpage-header-infos {
  flex: 2;
  display: flex;
  flex-direction: column;
}
.printpage-header .printpage-header-infos .printpage-header-logo {
  height: 40px;
  display: flex;
  margin-bottom: 15px;
}
.printpage-header .printpage-header-infos .printpage-header-item {
  line-height: 1.33;
}
.printpage-header #orderqrcode {
  position: relative;
  display: inline-flex;
}
.printpage-header #orderqrcode canvas {
  position: absolute;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 0px;
  }
  html, body {
    margin: 0 auto;
    padding: 0;
    width: 210mm;
    height: 297mm;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .notprint {
    display: none !important;
  }
  .print-area {
    border: none;
    width: unset;
    max-width: 210mm;
  }
}
.login-third {
  display: flex;
}
.login-third .login_with_microsoft {
  margin-top: 15px;
  border: 1px solid #acacac;
  border-radius: 5px;
  width: auto;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  font-size: 0.875rem;
  cursor: pointer;
}
.login-third .login_with_microsoft img {
  height: 25px;
}
.login-third .login_with_microsoft span {
  margin-left: 10px;
}
.login-third .login_with_microsoft:hover {
  background-color: rgba(0, 140, 149, 0.15);
}

.btnmt {
  margin-top: 30px;
}

.adminpage-container {
  width: 100%;
}

.adminhome-content {
  color: #fff;
  background-color: #008c95;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
}
.adminhome-content .adminhome-content-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.adminhome-content .adminhome-content-head .adminhome-content-head-logo {
  flex: 2;
  display: flex;
  justify-content: center;
}
.adminhome-content .adminhome-content-head .adminhome-content-head-logo img {
  height: 30px;
}
.adminhome-content .adminhome-content-head .adminhome-content-head-logout {
  cursor: pointer;
}
.adminhome-content .adminhome-content-body {
  flex: 2;
  display: flex;
  align-items: center;
  padding: 15px;
}
.adminhome-content .adminhome-content-body .title {
  font-size: 2.5rem;
}

.pagehead-container {
  color: #fff;
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2.25rem;
}
.pagehead-container.red {
  background-color: #ff3f3f;
}
.pagehead-container.purple {
  background-color: #8d09d7;
}
.pagehead-container.green {
  background-color: #008c95;
}
.pagehead-container.blue {
  background-color: #0379ab;
}
.pagehead-container.orange {
  background-color: #c95c02;
}
.pagehead-container .pagehead-toback {
  display: flex;
  align-items: center;
  font-size: 3.5rem;
  line-height: 0.75;
}
.pagehead-container .pagehead-toback img {
  height: 40px;
}
.pagehead-container .pagehead-title {
  flex: 2;
  display: flex;
  justify-content: center;
}

.adminhome-menus {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 15px;
}
.adminhome-menus .adminhome-menu {
  width: calc((100% - 4 * 30px / 2) / 5);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.adminhome-menus .adminhome-menu:hover .icon img {
  transform: scale(1.05);
}
.adminhome-menus .adminhome-menu .icon {
  display: flex;
}
.adminhome-menus .adminhome-menu .icon img {
  transition: all 0.8s ease 0s;
}
.adminhome-menus .adminhome-menu .title {
  font-size: 0.875rem;
}
@media (max-width: 1280px) {
  .adminhome-menus .adminhome-menu {
    width: calc((100% - 3 * 30px / 2) / 4);
  }
}

.mode-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mode-switcher .mode-label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}
.mode-switcher .mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  color: #555;
}
.mode-switcher .mode-btn i {
  font-size: 0.9rem;
}
.mode-switcher .mode-btn:hover {
  border-color: #0379ab;
  color: #0379ab;
  background: #f0f7ff;
}
.mode-switcher .mode-btn.active {
  background: #0379ab;
  color: #fff;
  border-color: #0379ab;
}

.group-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.group-item:hover {
  background: #e8f4fc;
}
.group-item.selected {
  background: #e3f2fd;
  border-left: 3px solid #0379ab;
}
.group-item .group-name {
  font-weight: 500;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.group-item .group-name .count {
  font-size: 0.75rem;
  color: #999;
  font-weight: normal;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
}
.group-item .group-name .has-children {
  color: #999;
  font-size: 0.8rem;
}

.child-page {
  padding: 8px 15px 8px 35px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.85rem;
  color: #666;
  transition: background 0.2s;
}
.child-page:hover {
  background: #f0f7ff;
}
.child-page.selected {
  background: #e3f2fd;
  color: #0379ab;
}

.admin-header {
  flex-direction: column;
  text-align: center;
  font-size: 0.85rem;
  min-width: 80px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-mode .perm-h-action {
  width: 25%;
}

.page-mode-tip {
  margin-top: 15px;
  padding: 12px 15px;
  background: #f0f7ff;
  border: 1px solid #cce5f6;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-mode-tip i {
  color: #0379ab;
}

.p1excel-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.p1excel-container .p1excel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.25rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #f8f9fb 0%, #f0f3f8 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.p1excel-container .p1excel-header .header-left h1 {
  font-size: 1.35rem;
  color: #2c3e50;
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.p1excel-container .p1excel-header .header-left .header-subtitle {
  font-size: 0.8rem;
  color: #95a5a6;
}
.p1excel-container .function-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.p1excel-container .function-panel .panel-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(52, 152, 219, 0.1);
}
.p1excel-container .function-panel .panel-title .icon {
  margin-right: 0.5rem;
}
.p1excel-container .function-panel .panel-title .icon-upload::before {
  content: "▲";
  color: #24b26f;
  font-size: 0.85em;
}
.p1excel-container .function-panel .panel-title .icon-download::before {
  content: "▼";
  color: #3498db;
  font-size: 0.85em;
}
.p1excel-container .function-panel .upload-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.p1excel-container .function-panel .upload-area .file-browse-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 14px;
  border: 2px dashed #bdc3c7;
  border-radius: 8px;
  background: rgba(52, 152, 219, 0.03);
  overflow: hidden;
}
.p1excel-container .function-panel .upload-area .file-browse-box:hover {
  border-color: #3498db;
}
.p1excel-container .function-panel .upload-area .file-browse-box .filename-display {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  font-size: 0.875rem;
  color: #7f8c8d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p1excel-container .function-panel .upload-progress {
  display: none;
  margin-top: 0.75rem;
}
.p1excel-container .function-panel .upload-progress .progress-bar {
  width: 100%;
  height: 6px;
  background: #ecf0f1;
  border-radius: 3px;
  overflow: hidden;
}
.p1excel-container .function-panel .upload-progress .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #24b26f, #2ecc71);
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s;
}
.p1excel-container .function-panel .upload-progress .progress-text {
  font-size: 0.8rem;
  color: #7f8c8d;
  margin-top: 4px;
}
.p1excel-container .function-panel .result-area {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  display: none;
}
.p1excel-container .function-panel .result-area.success {
  display: block;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}
.p1excel-container .function-panel .result-area.error {
  display: block;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}
.p1excel-container .function-panel .result-area .result-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.p1excel-container .function-panel .result-area .result-detail {
  font-size: 0.9rem;
  line-height: 1.6;
}
.p1excel-container .function-panel .result-area .result-detail span {
  font-weight: 600;
}
.p1excel-container .function-panel .download-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.p1excel-container .function-panel .download-area .date-input-group {
  display: flex;
  gap: 1rem;
  flex: 1;
  min-width: 320px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input {
  flex: 1;
  min-width: 140px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input label {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 4px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdde1;
  border-radius: 8px;
  font-size: 0.9rem;
  box-sizing: border-box;
  background: #fafafa;
  cursor: pointer;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input[readonly] {
  background: #fff;
}
.p1excel-container .function-panel .download-area .name-type-group {
  margin-top: 1rem;
}
.p1excel-container .function-panel .download-area .name-type-group label {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 0.4rem;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes {
  display: flex;
  gap: 0.5rem;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 60px;
  border: 2px solid #dcdde1;
  border-radius: 8px;
  cursor: pointer;
  background: #fafafa;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
  transition: all 0.2s;
  user-select: none;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box .check-mark {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.85rem;
  color: #27ae60;
  opacity: 0;
  transition: opacity 0.2s;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box:hover {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.05);
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box.selected {
  border-color: #27ae60;
  background: rgba(39, 174, 96, 0.06);
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box.selected .check-mark {
  opacity: 1;
}
@media (max-width: 576px) {
  .p1excel-container {
    padding: 1rem 0.5rem;
  }
  .p1excel-container .function-panel .upload-area,
  .p1excel-container .function-panel .download-area {
    flex-direction: column;
    align-items: stretch;
  }
  .p1excel-container .function-panel .download-area .date-input-group {
    flex-direction: column;
    min-width: unset;
  }
  .p1excel-container .function-panel .download-area .name-type-group .name-type-boxes {
    flex-wrap: wrap;
  }
  .p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box {
    width: calc(50% - 0.25rem);
  }
}

.adminpage-items {
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
}
.adminpage-items .adminpage-item-head {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #fff;
}
.adminpage-items .adminpage-item-head.orderstatus8 {
  background-color: #c95c02;
}
.adminpage-items .adminpage-item-head.orderstatus9 {
  background-color: #008c95;
}
.adminpage-items .adminpage-item-head.orderstatus10 {
  background-color: #0379ab;
}
.adminpage-items .adminpage-item {
  position: relative;
  width: 100%;
  padding: 5px 10px;
  box-shadow: 1px 2px 3px 1px rgba(58, 62, 65, 0.25);
  /*border-bottom-left-radius:$grid_gutters / 6;
  border-bottom-right-radius:$grid_gutters / 6;*/
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 15px;
}
.adminpage-items .adminpage-item.picked {
  background-color: rgba(0, 140, 149, 0.25);
}
.adminpage-items .adminpage-item .adminpage-item-row {
  display: flex;
}
.adminpage-items .adminpage-item .adminpage-item-row span {
  color: #8e8e90;
  width: 150px;
  text-align: right;
  padding-right: 10px;
}
.adminpage-items .adminpage-item .adminpage-item-row span.span_block {
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #8e8e90;
  padding: 5px 10px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
.adminpage-items .adminpage-item .adminpage-item-row span.span_block:hover {
  background-color: #8e8e90;
  color: #fff;
}
.adminpage-items .adminpage-item .adminpage-item-row img {
  height: 40px;
  margin-right: 10px;
}
.adminpage-items .adminpage-item .adminpage-item-row.indent {
  padding-left: 15px;
  font-size: 0.875rem;
  color: #8e8e90;
}
.adminpage-items .adminpage-item .btnupdate {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  font-size: 0.875rem;
  margin-left: 0;
  margin-right: 0;
}
.adminpage-items .adminpage-item.hasorderstatus:before {
  border-style: solid;
  border-width: 40px;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
}
.adminpage-items .adminpage-item.hasorderstatus:after {
  color: #fff;
  content: attr(data-label);
  font-size: 0.75rem;
  position: absolute;
  right: 2px;
  top: 16px;
  transform: rotate(45deg);
}
.adminpage-items .adminpage-item.orderstatus1:before {
  border-color: #c95c02 #c95c02 transparent transparent;
}
.adminpage-items .adminpage-item.orderstatus2:before {
  border-color: #008c95 #008c95 transparent transparent;
}
.adminpage-items .adminpage-item.orderstatus3:before {
  border-color: #0379ab #0379ab transparent transparent;
}
.adminpage-items .adminpage-item.orderstatus4:before {
  border-color: #8d09d7 #8d09d7 transparent transparent;
}
.adminpage-items .adminpage-item.orderstatus5:before {
  border-color: #8e8e90 #8e8e90 transparent transparent;
}

.mode-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mode-switcher .mode-label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}
.mode-switcher .mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  color: #555;
}
.mode-switcher .mode-btn i {
  font-size: 0.9rem;
}
.mode-switcher .mode-btn:hover {
  border-color: #0379ab;
  color: #0379ab;
  background: #f0f7ff;
}
.mode-switcher .mode-btn.active {
  background: #0379ab;
  color: #fff;
  border-color: #0379ab;
}

.group-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.group-item:hover {
  background: #e8f4fc;
}
.group-item.selected {
  background: #e3f2fd;
  border-left: 3px solid #0379ab;
}
.group-item .group-name {
  font-weight: 500;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.group-item .group-name .count {
  font-size: 0.75rem;
  color: #999;
  font-weight: normal;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
}
.group-item .group-name .has-children {
  color: #999;
  font-size: 0.8rem;
}

.child-page {
  padding: 8px 15px 8px 35px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.85rem;
  color: #666;
  transition: background 0.2s;
}
.child-page:hover {
  background: #f0f7ff;
}
.child-page.selected {
  background: #e3f2fd;
  color: #0379ab;
}

.admin-header {
  flex-direction: column;
  text-align: center;
  font-size: 0.85rem;
  min-width: 80px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-mode .perm-h-action {
  width: 25%;
}

.page-mode-tip {
  margin-top: 15px;
  padding: 12px 15px;
  background: #f0f7ff;
  border: 1px solid #cce5f6;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-mode-tip i {
  color: #0379ab;
}

.p1excel-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.p1excel-container .p1excel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.25rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #f8f9fb 0%, #f0f3f8 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.p1excel-container .p1excel-header .header-left h1 {
  font-size: 1.35rem;
  color: #2c3e50;
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.p1excel-container .p1excel-header .header-left .header-subtitle {
  font-size: 0.8rem;
  color: #95a5a6;
}
.p1excel-container .function-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.p1excel-container .function-panel .panel-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(52, 152, 219, 0.1);
}
.p1excel-container .function-panel .panel-title .icon {
  margin-right: 0.5rem;
}
.p1excel-container .function-panel .panel-title .icon-upload::before {
  content: "▲";
  color: #24b26f;
  font-size: 0.85em;
}
.p1excel-container .function-panel .panel-title .icon-download::before {
  content: "▼";
  color: #3498db;
  font-size: 0.85em;
}
.p1excel-container .function-panel .upload-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.p1excel-container .function-panel .upload-area .file-browse-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 14px;
  border: 2px dashed #bdc3c7;
  border-radius: 8px;
  background: rgba(52, 152, 219, 0.03);
  overflow: hidden;
}
.p1excel-container .function-panel .upload-area .file-browse-box:hover {
  border-color: #3498db;
}
.p1excel-container .function-panel .upload-area .file-browse-box .filename-display {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  font-size: 0.875rem;
  color: #7f8c8d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p1excel-container .function-panel .upload-progress {
  display: none;
  margin-top: 0.75rem;
}
.p1excel-container .function-panel .upload-progress .progress-bar {
  width: 100%;
  height: 6px;
  background: #ecf0f1;
  border-radius: 3px;
  overflow: hidden;
}
.p1excel-container .function-panel .upload-progress .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #24b26f, #2ecc71);
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s;
}
.p1excel-container .function-panel .upload-progress .progress-text {
  font-size: 0.8rem;
  color: #7f8c8d;
  margin-top: 4px;
}
.p1excel-container .function-panel .result-area {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  display: none;
}
.p1excel-container .function-panel .result-area.success {
  display: block;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}
.p1excel-container .function-panel .result-area.error {
  display: block;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}
.p1excel-container .function-panel .result-area .result-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.p1excel-container .function-panel .result-area .result-detail {
  font-size: 0.9rem;
  line-height: 1.6;
}
.p1excel-container .function-panel .result-area .result-detail span {
  font-weight: 600;
}
.p1excel-container .function-panel .download-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.p1excel-container .function-panel .download-area .date-input-group {
  display: flex;
  gap: 1rem;
  flex: 1;
  min-width: 320px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input {
  flex: 1;
  min-width: 140px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input label {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 4px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdde1;
  border-radius: 8px;
  font-size: 0.9rem;
  box-sizing: border-box;
  background: #fafafa;
  cursor: pointer;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input[readonly] {
  background: #fff;
}
.p1excel-container .function-panel .download-area .name-type-group {
  margin-top: 1rem;
}
.p1excel-container .function-panel .download-area .name-type-group label {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 0.4rem;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes {
  display: flex;
  gap: 0.5rem;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 60px;
  border: 2px solid #dcdde1;
  border-radius: 8px;
  cursor: pointer;
  background: #fafafa;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
  transition: all 0.2s;
  user-select: none;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box .check-mark {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.85rem;
  color: #27ae60;
  opacity: 0;
  transition: opacity 0.2s;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box:hover {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.05);
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box.selected {
  border-color: #27ae60;
  background: rgba(39, 174, 96, 0.06);
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box.selected .check-mark {
  opacity: 1;
}
@media (max-width: 576px) {
  .p1excel-container {
    padding: 1rem 0.5rem;
  }
  .p1excel-container .function-panel .upload-area,
  .p1excel-container .function-panel .download-area {
    flex-direction: column;
    align-items: stretch;
  }
  .p1excel-container .function-panel .download-area .date-input-group {
    flex-direction: column;
    min-width: unset;
  }
  .p1excel-container .function-panel .download-area .name-type-group .name-type-boxes {
    flex-wrap: wrap;
  }
  .p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box {
    width: calc(50% - 0.25rem);
  }
}

.permission-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.permission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #eee;
  background: #fafbfc;
}
.permission-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #333;
}

.view-toggle {
  display: flex;
  gap: 8px;
}
.view-toggle button {
  padding: 8px 18px;
  border: 1px solid #acacac;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}
.view-toggle button:hover {
  border-color: #0379ab;
  color: #0379ab;
}
.view-toggle button.active {
  background: #0379ab;
  color: #fff;
  border-color: #0379ab;
}

.permission-content {
  display: flex;
  border-top: 1px solid #eee;
}
.permission-content.permission-content-bypage {
  display: block;
}

.admin-list {
  width: 200px;
  border-right: 1px solid #eee;
  background: #fafbfc;
  height: 500px;
  overflow-y: auto;
}
.admin-list h3 {
  margin: 0;
  padding: 15px 20px;
  font-size: 0.9rem;
  color: #666;
  background: #f0f2f5;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 1;
}

.permission-panel {
  flex: 2;
  padding: 10px 20px;
  height: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.permission-panel h3 {
  margin-bottom: 15px;
}
.permission-panel #permissionForm {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.admin-item {
  padding: 8px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.admin-item:hover {
  background: #e8f4fc;
}
.admin-item.selected {
  background: #e3f2fd;
  border-left: 3px solid #0379ab;
}
.admin-item .name {
  font-weight: 500;
  color: #333;
  margin-bottom: 3px;
}
.admin-item .class {
  font-size: 0.8rem;
  color: #999;
}

.permission-table-horizontal {
  width: 100%;
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.permission-table-horizontal .perm-h-header,
.permission-table-horizontal .perm-h-row {
  display: flex;
  width: 100%;
}
.permission-table-horizontal .perm-h-page-col {
  width: 30%;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.permission-table-horizontal .perm-h-actions-col {
  width: 70%;
  display: flex;
  box-sizing: border-box;
}
.permission-table-horizontal .perm-h-actions-col .perm-h-action {
  width: 25%;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.permission-table-horizontal .perm-h-header {
  background: #f5f7fa;
  border-bottom: 2px solid #e0e0e0;
  font-weight: 600;
  color: #555;
  position: sticky;
  top: 0;
  z-index: 10;
  padding-right: 17px;
}
.permission-table-horizontal .perm-h-header .perm-h-actions-col .perm-h-action {
  border-left: 1px solid #e0e0e0;
}
.permission-table-horizontal .perm-h-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.permission-table-horizontal .perm-h-body .perm-h-row {
  border-bottom: 1px solid #eee;
  transition: background 0.15s;
}
.permission-table-horizontal .perm-h-body .perm-h-row:hover {
  background: #fafbfc;
}
.permission-table-horizontal .perm-h-body .perm-h-row.perm-h-row-child {
  background: #fafafa;
}
.permission-table-horizontal .perm-h-body .perm-h-row.perm-h-row-child .perm-h-page-col {
  padding-left: 40px;
  position: relative;
}
.permission-table-horizontal .perm-h-body .perm-h-row.perm-h-row-child .perm-h-page-col::before {
  content: "└─";
  position: absolute;
  left: 15px;
  color: #bbb;
  font-size: 0.85rem;
}
.permission-table-horizontal .perm-h-body .perm-h-row.perm-h-row-child .perm-h-page-col .page-name.child {
  font-weight: 400;
  color: #666;
  font-size: 0.9rem;
}
.permission-table-horizontal .perm-h-body .perm-h-row .perm-h-page-col .page-name {
  font-weight: 500;
  color: #333;
}
.permission-table-horizontal .perm-h-body .perm-h-row .perm-h-actions-col .perm-h-action {
  border-left: 1px solid #f0f0f0;
}

.perm-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
}
.perm-checkbox input[type=checkbox] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #0379ab;
}

.super-admin-notice {
  padding: 40px;
  text-align: center;
  background: #fff9e6;
  border: 1px solid #ffe58f;
  border-radius: 8px;
  margin-top: 20px;
}
.super-admin-notice p {
  margin: 0;
  color: #ad6800;
  font-size: 1rem;
}

.badge-super {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: #ff4d4f;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.no-selection {
  text-align: center;
  color: #999;
  padding: 80px 20px;
}
.no-selection p {
  font-size: 1.1rem;
}

.page-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-list-item {
  margin: 12px 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}
.page-list-item.parent-page {
  background: #e8f4fc;
  border: 1px solid #cce5f6;
}
.page-list-item .page-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.page-list-item .page-title {
  font-weight: 600;
  color: #333;
}
.page-list-item .page-key {
  font-size: 0.75rem;
  color: #666;
  font-family: monospace;
}

.admin-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #ddd;
}
.admin-checkbox-item input[type=checkbox] {
  cursor: pointer;
  accent-color: #0379ab;
}
.admin-checkbox-item label {
  cursor: pointer;
  margin: 0;
  font-size: 0.9rem;
  color: #555;
}

.page-children-view {
  list-style: none;
  padding: 0 0 0 20px;
  margin: 10px 0 0 0;
}
.page-children-view .page-list-item {
  background: #fff;
  border: 1px solid #eee;
}

#map, #map_canvas {
  height: 100vh;
  width: 100vw;
  margin: 0px;
  padding: 0px;
}

.landmark {
  z-index: 100;
  background-color: rgba(142, 142, 144, 0.5);
  position: absolute;
  border: 2px dotted #ff3f3f;
}

.patrol-items {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(40, 40, 40, 0.5);
  border-top: 1px solid rgba(40, 40, 40, 0.5);
}
.patrol-items .patrol-item {
  display: flex;
}
.patrol-items .patrol-item.abandon {
  text-decoration: line-through;
}
.patrol-items .patrol-item .patrol-col {
  border-right: 1px solid rgba(40, 40, 40, 0.5);
  border-bottom: 1px solid rgba(40, 40, 40, 0.5);
  padding: 5px 10px;
  width: 16.6666666667%;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}
.patrol-items .patrol-item .patrol-col .title {
  min-width: 60px;
  text-align: right;
}
.patrol-items .patrol-item .patrol-col .flex2 {
  flex: 2;
}
.patrol-items .patrol-item .patrol-col.jcend {
  justify-content: flex-end;
}
.patrol-items .patrol-item .patrol-col.colfull {
  width: 100%;
}
.patrol-items .patrol-item .patrol-col.colhalf {
  width: 50%;
}
.patrol-items .patrol-item .patrol-col.colquar {
  width: 25%;
}
.patrol-items .patrol-item .patrol-col.colsix {
  width: 16.6666666667%;
}
.patrol-items .patrol-item .patrol-col.coleight {
  width: 12.5%;
}
.patrol-items .patrol-item .patrol-col.colcheckbox {
  width: 60px;
  justify-content: flex-start;
}
.patrol-items .patrol-item .patrol-col.colcheckbox img {
  width: 20px;
}
.patrol-items .patrol-item .patrol-col.flex2 {
  flex: 2;
}
.patrol-items .patrol-item .patrol-col .checkboxs .checkbox {
  padding-right: unset;
  width: unset !important;
}
.patrol-items .patrol-item.header {
  background-color: rgba(0, 140, 149, 0.25);
  color: #282828;
}
.patrol-items .patrol-item.header .patrol-col .checkboxs .checkbox {
  background-color: transparent;
}
.patrol-items .patrol-item.header .patrol-col .checkboxs .checkbox input {
  background-color: #fff;
}

.mode-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mode-switcher .mode-label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}
.mode-switcher .mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  color: #555;
}
.mode-switcher .mode-btn i {
  font-size: 0.9rem;
}
.mode-switcher .mode-btn:hover {
  border-color: #0379ab;
  color: #0379ab;
  background: #f0f7ff;
}
.mode-switcher .mode-btn.active {
  background: #0379ab;
  color: #fff;
  border-color: #0379ab;
}

.group-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.group-item:hover {
  background: #e8f4fc;
}
.group-item.selected {
  background: #e3f2fd;
  border-left: 3px solid #0379ab;
}
.group-item .group-name {
  font-weight: 500;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.group-item .group-name .count {
  font-size: 0.75rem;
  color: #999;
  font-weight: normal;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
}
.group-item .group-name .has-children {
  color: #999;
  font-size: 0.8rem;
}

.child-page {
  padding: 8px 15px 8px 35px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.85rem;
  color: #666;
  transition: background 0.2s;
}
.child-page:hover {
  background: #f0f7ff;
}
.child-page.selected {
  background: #e3f2fd;
  color: #0379ab;
}

.admin-header {
  flex-direction: column;
  text-align: center;
  font-size: 0.85rem;
  min-width: 80px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-mode .perm-h-action {
  width: 25%;
}

.page-mode-tip {
  margin-top: 15px;
  padding: 12px 15px;
  background: #f0f7ff;
  border: 1px solid #cce5f6;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-mode-tip i {
  color: #0379ab;
}

.p1excel-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.p1excel-container .p1excel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.25rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #f8f9fb 0%, #f0f3f8 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.p1excel-container .p1excel-header .header-left h1 {
  font-size: 1.35rem;
  color: #2c3e50;
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.p1excel-container .p1excel-header .header-left .header-subtitle {
  font-size: 0.8rem;
  color: #95a5a6;
}
.p1excel-container .function-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.p1excel-container .function-panel .panel-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(52, 152, 219, 0.1);
}
.p1excel-container .function-panel .panel-title .icon {
  margin-right: 0.5rem;
}
.p1excel-container .function-panel .panel-title .icon-upload::before {
  content: "▲";
  color: #24b26f;
  font-size: 0.85em;
}
.p1excel-container .function-panel .panel-title .icon-download::before {
  content: "▼";
  color: #3498db;
  font-size: 0.85em;
}
.p1excel-container .function-panel .upload-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.p1excel-container .function-panel .upload-area .file-browse-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 14px;
  border: 2px dashed #bdc3c7;
  border-radius: 8px;
  background: rgba(52, 152, 219, 0.03);
  overflow: hidden;
}
.p1excel-container .function-panel .upload-area .file-browse-box:hover {
  border-color: #3498db;
}
.p1excel-container .function-panel .upload-area .file-browse-box .filename-display {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  font-size: 0.875rem;
  color: #7f8c8d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p1excel-container .function-panel .upload-progress {
  display: none;
  margin-top: 0.75rem;
}
.p1excel-container .function-panel .upload-progress .progress-bar {
  width: 100%;
  height: 6px;
  background: #ecf0f1;
  border-radius: 3px;
  overflow: hidden;
}
.p1excel-container .function-panel .upload-progress .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #24b26f, #2ecc71);
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s;
}
.p1excel-container .function-panel .upload-progress .progress-text {
  font-size: 0.8rem;
  color: #7f8c8d;
  margin-top: 4px;
}
.p1excel-container .function-panel .result-area {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  display: none;
}
.p1excel-container .function-panel .result-area.success {
  display: block;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}
.p1excel-container .function-panel .result-area.error {
  display: block;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}
.p1excel-container .function-panel .result-area .result-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.p1excel-container .function-panel .result-area .result-detail {
  font-size: 0.9rem;
  line-height: 1.6;
}
.p1excel-container .function-panel .result-area .result-detail span {
  font-weight: 600;
}
.p1excel-container .function-panel .download-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.p1excel-container .function-panel .download-area .date-input-group {
  display: flex;
  gap: 1rem;
  flex: 1;
  min-width: 320px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input {
  flex: 1;
  min-width: 140px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input label {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 4px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdde1;
  border-radius: 8px;
  font-size: 0.9rem;
  box-sizing: border-box;
  background: #fafafa;
  cursor: pointer;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input[readonly] {
  background: #fff;
}
.p1excel-container .function-panel .download-area .name-type-group {
  margin-top: 1rem;
}
.p1excel-container .function-panel .download-area .name-type-group label {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 0.4rem;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes {
  display: flex;
  gap: 0.5rem;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 60px;
  border: 2px solid #dcdde1;
  border-radius: 8px;
  cursor: pointer;
  background: #fafafa;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
  transition: all 0.2s;
  user-select: none;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box .check-mark {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.85rem;
  color: #27ae60;
  opacity: 0;
  transition: opacity 0.2s;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box:hover {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.05);
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box.selected {
  border-color: #27ae60;
  background: rgba(39, 174, 96, 0.06);
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box.selected .check-mark {
  opacity: 1;
}
@media (max-width: 576px) {
  .p1excel-container {
    padding: 1rem 0.5rem;
  }
  .p1excel-container .function-panel .upload-area,
  .p1excel-container .function-panel .download-area {
    flex-direction: column;
    align-items: stretch;
  }
  .p1excel-container .function-panel .download-area .date-input-group {
    flex-direction: column;
    min-width: unset;
  }
  .p1excel-container .function-panel .download-area .name-type-group .name-type-boxes {
    flex-wrap: wrap;
  }
  .p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box {
    width: calc(50% - 0.25rem);
  }
}

.search-container {
  z-index: 9900;
  display: flex;
  position: absolute;
  width: calc(100vw - 100px);
  left: 0px;
  bottom: calc(100% + 3px);
  background-color: #fff;
  border-left: 1px solid #8e8e90;
  border-top: 1px solid #8e8e90;
  color: #282828;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 3px #8e8e90;
  overflow: hidden;
}
.search-container .search-items {
  width: 50%;
  border-right: 1px solid #8e8e90;
  border-bottom: 1px solid #8e8e90;
  flex-direction: column;
}
.search-container .search-items .search-item {
  display: flex;
  padding: 7.5px 10px;
  cursor: pointer;
  font-size: 0.75rem;
  border-top: 1px solid rgba(142, 142, 144, 0.5);
}
.search-container .search-items .search-item:hover {
  color: #fff;
  background-color: #8e8e90;
}
.search-container .search-items .search-item.matchtitle {
  color: #282828;
  font-size: 1rem;
}
.search-container .search-items .search-item.header {
  color: #8e8e90;
  border-bottom: 1px solid rgba(142, 142, 144, 0.5);
  padding: 7.5px 10px;
}
.search-container .search-items .search-item.footer {
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 15px;
}
.search-container .search-items .search-item .drugname {
  flex: 2;
}
.search-container .search-items .search-item .drugname.brokerage:before {
  content: "";
  display: inline-flex;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  margin-right: 3px;
}
.search-container .search-items .search-item .drugname.high:before {
  background-color: #008c95;
}
.search-container .search-items .search-item .drugname.low:before {
  background-color: #ff3f3f;
}
.search-container .search-items .search-item .drugbrand {
  width: 20%;
}
.search-container .search-items .search-item .drugelement {
  width: 30%;
}
.search-container .search-items .search-item .drugavoid {
  width: 15%;
}
.search-container .search-items .search-item span {
  color: #ff3f3f;
}

.mode-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mode-switcher .mode-label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}
.mode-switcher .mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  color: #555;
}
.mode-switcher .mode-btn i {
  font-size: 0.9rem;
}
.mode-switcher .mode-btn:hover {
  border-color: #0379ab;
  color: #0379ab;
  background: #f0f7ff;
}
.mode-switcher .mode-btn.active {
  background: #0379ab;
  color: #fff;
  border-color: #0379ab;
}

.group-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.group-item:hover {
  background: #e8f4fc;
}
.group-item.selected {
  background: #e3f2fd;
  border-left: 3px solid #0379ab;
}
.group-item .group-name {
  font-weight: 500;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.group-item .group-name .count {
  font-size: 0.75rem;
  color: #999;
  font-weight: normal;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
}
.group-item .group-name .has-children {
  color: #999;
  font-size: 0.8rem;
}

.child-page {
  padding: 8px 15px 8px 35px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.85rem;
  color: #666;
  transition: background 0.2s;
}
.child-page:hover {
  background: #f0f7ff;
}
.child-page.selected {
  background: #e3f2fd;
  color: #0379ab;
}

.admin-header {
  flex-direction: column;
  text-align: center;
  font-size: 0.85rem;
  min-width: 80px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-mode .perm-h-action {
  width: 25%;
}

.page-mode-tip {
  margin-top: 15px;
  padding: 12px 15px;
  background: #f0f7ff;
  border: 1px solid #cce5f6;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-mode-tip i {
  color: #0379ab;
}

.p1excel-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.p1excel-container .p1excel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.25rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #f8f9fb 0%, #f0f3f8 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.p1excel-container .p1excel-header .header-left h1 {
  font-size: 1.35rem;
  color: #2c3e50;
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.p1excel-container .p1excel-header .header-left .header-subtitle {
  font-size: 0.8rem;
  color: #95a5a6;
}
.p1excel-container .function-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.p1excel-container .function-panel .panel-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(52, 152, 219, 0.1);
}
.p1excel-container .function-panel .panel-title .icon {
  margin-right: 0.5rem;
}
.p1excel-container .function-panel .panel-title .icon-upload::before {
  content: "▲";
  color: #24b26f;
  font-size: 0.85em;
}
.p1excel-container .function-panel .panel-title .icon-download::before {
  content: "▼";
  color: #3498db;
  font-size: 0.85em;
}
.p1excel-container .function-panel .upload-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.p1excel-container .function-panel .upload-area .file-browse-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 14px;
  border: 2px dashed #bdc3c7;
  border-radius: 8px;
  background: rgba(52, 152, 219, 0.03);
  overflow: hidden;
}
.p1excel-container .function-panel .upload-area .file-browse-box:hover {
  border-color: #3498db;
}
.p1excel-container .function-panel .upload-area .file-browse-box .filename-display {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  font-size: 0.875rem;
  color: #7f8c8d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p1excel-container .function-panel .upload-progress {
  display: none;
  margin-top: 0.75rem;
}
.p1excel-container .function-panel .upload-progress .progress-bar {
  width: 100%;
  height: 6px;
  background: #ecf0f1;
  border-radius: 3px;
  overflow: hidden;
}
.p1excel-container .function-panel .upload-progress .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #24b26f, #2ecc71);
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s;
}
.p1excel-container .function-panel .upload-progress .progress-text {
  font-size: 0.8rem;
  color: #7f8c8d;
  margin-top: 4px;
}
.p1excel-container .function-panel .result-area {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  display: none;
}
.p1excel-container .function-panel .result-area.success {
  display: block;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}
.p1excel-container .function-panel .result-area.error {
  display: block;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}
.p1excel-container .function-panel .result-area .result-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.p1excel-container .function-panel .result-area .result-detail {
  font-size: 0.9rem;
  line-height: 1.6;
}
.p1excel-container .function-panel .result-area .result-detail span {
  font-weight: 600;
}
.p1excel-container .function-panel .download-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.p1excel-container .function-panel .download-area .date-input-group {
  display: flex;
  gap: 1rem;
  flex: 1;
  min-width: 320px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input {
  flex: 1;
  min-width: 140px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input label {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 4px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdde1;
  border-radius: 8px;
  font-size: 0.9rem;
  box-sizing: border-box;
  background: #fafafa;
  cursor: pointer;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input[readonly] {
  background: #fff;
}
.p1excel-container .function-panel .download-area .name-type-group {
  margin-top: 1rem;
}
.p1excel-container .function-panel .download-area .name-type-group label {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 0.4rem;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes {
  display: flex;
  gap: 0.5rem;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 60px;
  border: 2px solid #dcdde1;
  border-radius: 8px;
  cursor: pointer;
  background: #fafafa;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
  transition: all 0.2s;
  user-select: none;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box .check-mark {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.85rem;
  color: #27ae60;
  opacity: 0;
  transition: opacity 0.2s;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box:hover {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.05);
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box.selected {
  border-color: #27ae60;
  background: rgba(39, 174, 96, 0.06);
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box.selected .check-mark {
  opacity: 1;
}
@media (max-width: 576px) {
  .p1excel-container {
    padding: 1rem 0.5rem;
  }
  .p1excel-container .function-panel .upload-area,
  .p1excel-container .function-panel .download-area {
    flex-direction: column;
    align-items: stretch;
  }
  .p1excel-container .function-panel .download-area .date-input-group {
    flex-direction: column;
    min-width: unset;
  }
  .p1excel-container .function-panel .download-area .name-type-group .name-type-boxes {
    flex-wrap: wrap;
  }
  .p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box {
    width: calc(50% - 0.25rem);
  }
}

.mode-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mode-switcher .mode-label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}
.mode-switcher .mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  color: #555;
}
.mode-switcher .mode-btn i {
  font-size: 0.9rem;
}
.mode-switcher .mode-btn:hover {
  border-color: #0379ab;
  color: #0379ab;
  background: #f0f7ff;
}
.mode-switcher .mode-btn.active {
  background: #0379ab;
  color: #fff;
  border-color: #0379ab;
}

.group-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.group-item:hover {
  background: #e8f4fc;
}
.group-item.selected {
  background: #e3f2fd;
  border-left: 3px solid #0379ab;
}
.group-item .group-name {
  font-weight: 500;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.group-item .group-name .count {
  font-size: 0.75rem;
  color: #999;
  font-weight: normal;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
}
.group-item .group-name .has-children {
  color: #999;
  font-size: 0.8rem;
}

.child-page {
  padding: 8px 15px 8px 35px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.85rem;
  color: #666;
  transition: background 0.2s;
}
.child-page:hover {
  background: #f0f7ff;
}
.child-page.selected {
  background: #e3f2fd;
  color: #0379ab;
}

.admin-header {
  flex-direction: column;
  text-align: center;
  font-size: 0.85rem;
  min-width: 80px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-mode .perm-h-action {
  width: 25%;
}

.page-mode-tip {
  margin-top: 15px;
  padding: 12px 15px;
  background: #f0f7ff;
  border: 1px solid #cce5f6;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-mode-tip i {
  color: #0379ab;
}

.p1excel-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.p1excel-container .p1excel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.25rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #f8f9fb 0%, #f0f3f8 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.p1excel-container .p1excel-header .header-left h1 {
  font-size: 1.35rem;
  color: #2c3e50;
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.p1excel-container .p1excel-header .header-left .header-subtitle {
  font-size: 0.8rem;
  color: #95a5a6;
}
.p1excel-container .function-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.p1excel-container .function-panel .panel-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(52, 152, 219, 0.1);
}
.p1excel-container .function-panel .panel-title .icon {
  margin-right: 0.5rem;
}
.p1excel-container .function-panel .panel-title .icon-upload::before {
  content: "▲";
  color: #24b26f;
  font-size: 0.85em;
}
.p1excel-container .function-panel .panel-title .icon-download::before {
  content: "▼";
  color: #3498db;
  font-size: 0.85em;
}
.p1excel-container .function-panel .upload-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.p1excel-container .function-panel .upload-area .file-browse-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 14px;
  border: 2px dashed #bdc3c7;
  border-radius: 8px;
  background: rgba(52, 152, 219, 0.03);
  overflow: hidden;
}
.p1excel-container .function-panel .upload-area .file-browse-box:hover {
  border-color: #3498db;
}
.p1excel-container .function-panel .upload-area .file-browse-box .filename-display {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  font-size: 0.875rem;
  color: #7f8c8d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p1excel-container .function-panel .upload-progress {
  display: none;
  margin-top: 0.75rem;
}
.p1excel-container .function-panel .upload-progress .progress-bar {
  width: 100%;
  height: 6px;
  background: #ecf0f1;
  border-radius: 3px;
  overflow: hidden;
}
.p1excel-container .function-panel .upload-progress .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #24b26f, #2ecc71);
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s;
}
.p1excel-container .function-panel .upload-progress .progress-text {
  font-size: 0.8rem;
  color: #7f8c8d;
  margin-top: 4px;
}
.p1excel-container .function-panel .result-area {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  display: none;
}
.p1excel-container .function-panel .result-area.success {
  display: block;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}
.p1excel-container .function-panel .result-area.error {
  display: block;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}
.p1excel-container .function-panel .result-area .result-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.p1excel-container .function-panel .result-area .result-detail {
  font-size: 0.9rem;
  line-height: 1.6;
}
.p1excel-container .function-panel .result-area .result-detail span {
  font-weight: 600;
}
.p1excel-container .function-panel .download-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.p1excel-container .function-panel .download-area .date-input-group {
  display: flex;
  gap: 1rem;
  flex: 1;
  min-width: 320px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input {
  flex: 1;
  min-width: 140px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input label {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 4px;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdde1;
  border-radius: 8px;
  font-size: 0.9rem;
  box-sizing: border-box;
  background: #fafafa;
  cursor: pointer;
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
.p1excel-container .function-panel .download-area .date-input-group .date-input input[readonly] {
  background: #fff;
}
.p1excel-container .function-panel .download-area .name-type-group {
  margin-top: 1rem;
}
.p1excel-container .function-panel .download-area .name-type-group label {
  display: block;
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 0.4rem;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes {
  display: flex;
  gap: 0.5rem;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 60px;
  border: 2px solid #dcdde1;
  border-radius: 8px;
  cursor: pointer;
  background: #fafafa;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c3e50;
  transition: all 0.2s;
  user-select: none;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box .check-mark {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.85rem;
  color: #27ae60;
  opacity: 0;
  transition: opacity 0.2s;
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box:hover {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.05);
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box.selected {
  border-color: #27ae60;
  background: rgba(39, 174, 96, 0.06);
}
.p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box.selected .check-mark {
  opacity: 1;
}
@media (max-width: 576px) {
  .p1excel-container {
    padding: 1rem 0.5rem;
  }
  .p1excel-container .function-panel .upload-area,
  .p1excel-container .function-panel .download-area {
    flex-direction: column;
    align-items: stretch;
  }
  .p1excel-container .function-panel .download-area .date-input-group {
    flex-direction: column;
    min-width: unset;
  }
  .p1excel-container .function-panel .download-area .name-type-group .name-type-boxes {
    flex-wrap: wrap;
  }
  .p1excel-container .function-panel .download-area .name-type-group .name-type-boxes .name-type-box {
    width: calc(50% - 0.25rem);
  }
}

/* ===== OPRE Import 頁面樣式 ===== */
.opre-import-wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 10px;
}

/* ===== 頁頭 ===== */
.opre-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.opre-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 6px;
}

.opre-header .header-subtitle {
  color: #888;
  font-size: 0.9rem;
}

/* ===== 上傳網格（單一卡片居中） ===== */
.upload-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
}

.single-upload {
  margin-left: unset;
}

@media (max-width: 860px) {
  .upload-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== 卡片 ===== */
.upload-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 24px;
  transition: box-shadow 0.2s;
}

.upload-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.card-icon {
  font-size: 2rem;
  line-height: 1;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 3px;
}

.card-desc {
  font-size: 0.82rem;
  color: #999;
}

/* ===== 拖放區域 ===== */
.dropzone {
  border: 2px dashed #d0d5dd;
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  background: #fafbfc;
  transition: all 0.25s;
  position: relative;
}

.dropzone:hover {
  border-color: #667eea;
  background: #f8f9ff;
}

.dropzone-hover {
  border-color: #667eea !important;
  background: #eef0ff !important;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

.dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dropzone-icon {
  font-size: 2.4rem;
  opacity: 0.5;
}

.dropzone-text span {
  display: block;
  font-size: 0.95rem;
  color: #555;
  font-weight: 500;
}

.dropzone-sub {
  font-size: 0.8rem !important;
  color: #aaa !important;
  font-weight: 400 !important;
  margin-top: 4px;
}

.dropzone-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.file-icon {
  font-size: 1.6rem;
}

.file-info {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.file-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 0.78rem;
  color: #999;
  margin-top: 2px;
}

.file-remove {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fee;
  color: #e74c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
}

.file-remove:hover {
  background: #fdd;
}

/* ===== 按鈕 ===== */
.card-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn, .btnfullwidth, .btngray, .btnwhite, .btnblack, .btnbrown, .btnred, .btnblue, .btnblue_light, .btnblue_dark, .btngreen, .btnpurple, .btnorange, .btnorange_red, .btnorange_yellow, .btnpink, .btnyellow, .btngreen_light, .btnupload, .btnnobgc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-weight: 500;
}

.btn-sm {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.88rem;
}

.btn-outline {
  background: #fff;
  border: 1.5px solid #d0d5dd;
  color: #555;
}

.btn-outline:hover {
  border-color: #667eea;
  color: #667eea;
  background: #f8f9ff;
}

.btn-primary {
  background: #667eea;
  color: #fff;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.btn-primary:hover {
  background: #5a67d8;
  transform: translateY(-1px);
}

.btn-primary.btndisable, .btn-primary.activing {
  opacity: 0.5;
  pointer-events: none;
  transform: none;
}

/* ===== 進度條 ===== */
.upload-progress {
  display: none;
  margin-top: 16px;
}

.progress-track {
  height: 5px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  width: 0%;
  transition: width 0.35s;
}

.progress-label {
  font-size: 0.78rem;
  color: #999;
  margin-top: 6px;
}

/* ===== 結果 ===== */
.upload-result {
  margin-top: 16px;
  border-radius: 10px;
  overflow: hidden;
}

.upload-result.success {
  display: block !important;
  border: 1px solid #c3e6cb;
}

.upload-result.error {
  display: block !important;
  border: 1px solid #f5c6cb;
}

.result-body {
  padding: 14px 16px;
  font-size: 0.88rem;
  line-height: 1.7;
}

.upload-result.success .result-body {
  background: #d4edda;
  color: #155724;
}

.upload-result.error .result-body {
  background: #f8d7da;
  color: #721c24;
}

.result-stat {
  font-weight: 700;
  font-size: 1.1rem;
}

.result-stat.muted {
  font-weight: 400;
  color: #666;
  margin-left: 6px;
}

.result-err {
  color: #856404;
  font-size: 0.82rem;
}

.result-link {
  display: inline-block;
  margin-top: 6px;
  color: #667eea;
  font-weight: 600;
  text-decoration: underline;
  font-size: 0.85rem;
}

.result-link:hover {
  color: #5a67d8;
}

/* ===== 文件列表 ===== */
.file-list {
  margin-top: 10px;
  padding: 8px 12px;
  background: #f8f9fb;
  border-radius: 8px;
  max-height: 100px;
  overflow-y: auto;
}

.file-item {
  font-size: 0.8rem;
  color: #666;
  padding: 3px 0;
  border-bottom: 1px solid #eee;
}

.file-item:last-child {
  border: none;
}

/* ===== 底部 ===== */
.opre-footer {
  margin-top: 12px;
  padding: 16px 20px;
  background: #f8f9fb;
  border-radius: 10px;
  border: 1px solid #eee;
}

.footer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #888;
}

.footer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #667eea;
  flex-shrink: 0;
}

/* ===== OPRE Edit 頁面樣式 ===== */
.opre-edit-container {
  width: 100%;
}

.p1excel-header {
  margin-bottom: 20px;
}

.p1excel-header h1 {
  font-size: 1.5rem;
  margin: 0 0 5px;
}

.p1excel-header .header-subtitle {
  color: #888;
  font-size: 0.875rem;
}

.edit-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.toolbar-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-item select {
  height: 35px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  min-width: 280px;
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===== 區段切換按鈕 ===== */
.section-toggles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
  gap: 8px;
}

.section-toggles-left {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.section-toggles-right {
  flex-shrink: 0;
}

/* ===== 篩選列（分類網格佈局） ===== */
.filter-section {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  margin: 15px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px) {
  .filter-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.filter-grid-section {
  margin-bottom: 6px;
}

.filter-grid-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #667eea;
  border-bottom: 2px solid #667eea;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.filter-grid-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-grid-items label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  padding: 3px 7px;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.filter-grid-items label:hover {
  background: #eef0ff;
}

.filter-grid-items label input {
  width: 12px;
  height: 12px;
}

/* ===== Tabulator ===== */
.tabulator-section {
  background: #fff;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
}

.tabulator-search {
  width: 200px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s;
}

.tabulator-search:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}

.section-toggles-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.opre-expand-btn {
  cursor: pointer;
  text-align: center;
  font-size: 1rem;
  color: #667eea;
  user-select: none;
}

.opre-expand-btn:hover {
  transform: scale(1.2);
}

/* ===== 結果 ===== */
.result-area {
  margin-top: 10px;
  padding: 10px;
  border-radius: 6px;
  font-size: 0.875rem;
}

.result-area.success {
  background: #e8f5e9;
  color: #2e7d32;
}

.result-area.error {
  background: #ffebee;
  color: #c62828;
}

/* ============================================================
   行詳情 Modal — 左右分欄
   ============================================================ */
.opre-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.opre-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.opre-modal-split {
  width: 95%;
  max-width: 1400px;
  height: 85vh;
}

/* 標題列 */
.opre-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.opre-modal-header h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a2e;
}

.opre-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5f5f5;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.opre-modal-close:hover {
  background: #fee;
  color: #e74c3c;
}

/* 左右分欄容器 */
.opre-modal-split-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ─── 左側：Monthly 編輯區（獨立滾動） ─── */
.opre-modal-left {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  border-right: 1px solid #e8e8e8;
}

.opre-detail-section {
  margin-bottom: 18px;
}

/* 入庫服務費區段 — 綠色背景 */
.opre-section-fees {
  background: #e8f5e9;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #c8e6c9;
}

.opre-section-fees .opre-detail-section-title {
  border-bottom-color: #4caf50;
  color: #2e7d32;
}

.opre-detail-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #667eea;
  border-bottom: 2px solid #667eea;
  padding-bottom: 5px;
  margin-bottom: 8px;
}

.opre-detail-grid {
  display: grid;
  gap: 4px 10px;
}

/* 主表區段一律 4 列 */
.opre-modal-left > .opre-detail-section .opre-detail-grid,
.opre-modal-left > .opre-stock-block .opre-detail-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* 出庫明細多組並排時改用 2 列 */
.opre-stock-blocks:not(.single-stock) .opre-stock-block .opre-detail-grid {
  grid-template-columns: 1fr 1fr;
}

.opre-detail-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.opre-detail-item:has(.form-input[data-field=remark]),
.opre-detail-item:has(.form-input[data-field=remark2]) {
  grid-column: 1/-1;
}

.opre-detail-label {
  font-size: 0.7rem;
  color: #888;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opre-detail-label:hover {
  color: #333;
}

.opre-detail-item .form-input {
  font-size: 0.82rem;
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.opre-detail-item .form-input:focus {
  border-color: #667eea;
  outline: none;
  box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.2);
}

/* ─── 右側：Plan 對照區（獨立滾動） ─── */
.opre-modal-right {
  width: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.opre-plan-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: #5a67d8;
  padding: 12px 14px 8px;
  border-bottom: 2px solid #e0e5ff;
}

.opre-plan-search {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.opre-plan-label {
  font-size: 0.82rem;
  color: #666;
  white-space: nowrap;
}

.opre-plan-input {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.82rem;
}

.opre-plan-input:focus {
  border-color: #667eea;
  outline: none;
}

.opre-plan-go {
  padding: 5px 14px;
  border-radius: 6px;
  background: #667eea;
  color: #fff;
  border: none;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.opre-plan-go:hover {
  background: #5a67d8;
}

/* ===== 出庫明細區塊（Modal 內，左右排列） ===== */
.opre-stock-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.opre-stock-block {
  flex: 1 1 0;
  min-width: 400px;
  background: #fafbff;
  border: 2px solid #d4daf0;
  border-radius: 8px;
  padding: 8px 10px;
}

.opre-stock-block-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #4338ca;
  padding: 6px 8px;
  margin: -8px -10px 8px;
  background: linear-gradient(135deg, #eef0ff, #e0e5ff);
  border-bottom: 2px solid #b3bfff;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.opre-plan-ref {
  font-size: 0.75rem;
  font-weight: 500;
  color: #666;
  background: #f0f2ff;
  padding: 1px 8px;
  border-radius: 8px;
  margin-left: auto;
  white-space: nowrap;
}

/* 出庫明細內的區段標題（比主表標題更小） */
.opre-stock-block .opre-detail-section {
  margin-bottom: 6px;
}

.opre-stock-block .opre-detail-section-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: #7c8db5;
  border-bottom: 1px solid #dce2f5;
  padding-bottom: 3px;
  margin-bottom: 4px;
}

.opre-no-stock {
  text-align: center;
  color: #999;
  font-size: 0.85rem;
  padding: 20px;
  background: #f8f9fb;
  border-radius: 8px;
}

/* Modal 標題旁的出庫明細數 */
.opre-modal-stock-count {
  font-size: 0.8rem;
  color: #666;
  background: #f0f2ff;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: auto;
  margin-right: 10px;
}

/* Plan 結果區（獨立滾動） */
.opre-plan-results {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}

.opre-plan-hint, .opre-plan-muted, .opre-plan-loading, .opre-plan-err {
  font-size: 0.82rem;
  color: #999;
  padding: 10px 0;
  text-align: center;
}

.opre-plan-err {
  color: #e74c3c;
}

/* Plan 結果卡片 */
.opre-plan-card {
  background: #fff;
  border: 1px solid #e0e5ff;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.opre-plan-card:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.opre-plan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  background: #f0f2ff;
  border-bottom: 1px solid #e0e5ff;
}

.opre-plan-card-awb {
  font-weight: 600;
  font-size: 0.85rem;
  color: #1a1a2e;
}

.opre-plan-card-port {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: #667eea;
  color: #fff;
  font-weight: 500;
}

.opre-plan-card-body {
  padding: 6px 10px;
}

.opre-plan-card-row {
  display: flex;
  gap: 6px;
  padding: 2px 0;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(194, 202, 221, 0.15);
}

.opre-plan-card-row:last-child {
  border-bottom: none;
}

.opre-plan-card-lbl {
  color: #999;
  min-width: 80px;
  flex-shrink: 0;
}

.opre-plan-card-val {
  color: #333;
  word-break: break-all;
}

.opre-plan-card-rmk {
  color: #666;
  font-style: italic;
}

/* Plan 卡片操作按鈕 */
.opre-plan-actions {
  display: flex;
  gap: 4px;
  padding: 6px 10px 8px;
  border-top: 1px solid #e0e5ff;
}

.opre-plan-btn-use, .opre-plan-btn-add {
  flex: 1;
  padding: 4px 0;
  border: none;
  border-radius: 5px;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.opre-plan-btn-use {
  background: #e8f5e9;
  color: #2e7d32;
}

.opre-plan-btn-use:hover {
  background: #c8e6c9;
}

.opre-plan-btn-add {
  background: #e3f2fd;
  color: #1565c0;
}

.opre-plan-btn-add:hover {
  background: #bbdefb;
}

/* PDF 圖示按鈕 */
.opre-plan-pdf {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  line-height: 0;
}

.opre-plan-pdf-icon {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  transition: transform 0.15s;
}

.opre-plan-pdf:hover .opre-plan-pdf-icon {
  transform: scale(1.2);
}