/*default*/
.custom-select-wrap {
  color: #585858;
  border: 0.05rem solid #ebebeb;
  display: block;
  border-radius: 0.4rem;
}
.dialog-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.custom-select-content {
  width: 100%;
}

.custom-select-content > .item-title {
  width: 50%;
  height: 2.4rem;
  line-height: 2.4rem;
  padding-left: 0.5rem;
}

.custom-select-content > .item-after {
  height: 2.4rem;
  line-height: 2.4rem;
  width: 50%;
  padding-left: 0.5rem;
  padding-right: 0.7rem;
}

.custom-bottom-icon-wrap {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translate(0, -50%);
}

.custom-select-content > .item-title-hide {
  display: none;
}

.smart-select-sheet > .toolbar-top {
  border-top: 0.05rem solid #eaeaea;
}

.smart-select-sheet .sheet-close {
  color: #ff6a02;
}

/*login page*/
.login-img-field {
  width: 100%;
  padding: 0 1rem;
  max-width: 16rem;
  margin: auto;
}

.login-img-field > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-block {
  padding: 0 1rem;
}

.login-title {
  width: 100%;
  text-align: center;
  padding-bottom: 1.15rem;
  padding-top: 2.5rem;
  color: #585858;
}

.login-input-wrap {
  width: 16rem;
  margin: auto;
  padding-bottom: 0.6rem;
  box-sizing: content-box;
}

.login-input-wrap > input {
  width: 100%;
  height: 2.4rem;
  border: 0.05rem solid #ebebeb;
  border-radius: 0.2rem;
  background-color: white;
  padding: 0 0.8rem;
}

.login-input-wrap > .input-focused {
  border: 0.05rem solid #db0101;
  caret-color: #db0101;
}

.login-input-wrap > input::placeholder {
  color: #9d9d9d;
}

.login-btn-wrap {
  padding-top: 0.6rem;
  width: 16rem;
  margin: auto;
}

.login-btn {
  background-color: #d7d7d7;
  width: 100%;
  height: 2.4rem;
  color: #ffffff;
  border-radius: 0.2rem;
  text-align: center;
  cursor: pointer;
  line-height: 2.4rem;
}

.active-btn {
  background-color: #db0101 !important;
}

.close-view-backArrow {
  width: 2rem;
  height: 2rem;
  text-align: center;
}

.find-pwd-btn {
  text-align: center;
  display: none;
}

.findSpan {
  color: #808080;
  text-decoration: underline;
}

/*login page end*/
/*home*/
.image-logo {
  width: 2rem;
  object-fit: cover;
  padding-left: 0.4rem;
}

.title {
  align-items: center;
  line-height: 0.75rem;
}

.home-btn {
  margin-bottom: 0.5rem;
  text-align: center;
  width: 100%;
  padding: 0.7rem 0;
  border-radius: 0.4rem;
  background-color: #db0101;
  color: white;
  font-weight: 600;
}

.btn-wraper-home {
  width: 100%;
  padding: 1rem;
}

.bg-background {
  background-color: #f7f7f7;
}

.title-text {
  font-weight: 400;
  font-size: 0.75rem;
}

.navbar-inner > .left-home {
  padding-left: 0.5rem;
}

.home-warp {
  padding: 0.2rem 1rem;
  padding-bottom: 1.9rem;
}

.home-notice {
  width: 100%;
  padding: 0.25rem 0.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: white;
  padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}

.notice-wraper {
  width: 100%;
  height: 1.3rem;
  padding: 0rem 0.55rem;
  box-sizing: border-box;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.notice-wraper > .f7-icons {
  width: 1rem;
  text-align: center;
  color: #808080;
  font-size: 1rem !important;
}

.notice-wraper > .notice-title {
  text-align: left;
  width: 2rem;
  color: #808080;
  padding-left: 0.2rem;
}

.notice-wraper > .notice-text {
  width: calc(100% - 3.2rem);
  height: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.text-wraper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  user-select: none;
}

.notice-wraper > .notice-text > .text-wraper > .notice-texter {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-wrapper-trasn {
  transition: top 0.7s;
}

.home-block {
  width: 100%;
  margin-bottom: 1rem;
}

.main-first-block {
  background-color: #e3f1fe;
  padding: 0.7rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: flex-end;
  align-content: center;
  justify-content: center;
}

.first-left {
  width: 70%;
}

.first-left > .header-font {
  line-height: 1.35;
}

.first-right {
  width: 30%;
}

.first-right > img {
  width: 100%;
}

.infomation-small-block {
  margin-top: 0.4rem;
  color: #808080;
}

.home-main-title {
  padding: 0.3rem 0;
}

.second-block {
  background-color: #4d9eef;
  padding: 1rem 0.7rem;
  border-radius: 0.5rem;
  color: white;
}

.date-vacation {
  padding: 0 0.4rem;
  background-color: white;
  color: #4d9eef;
  border-radius: 0.2rem;
  display: inline-block;
  margin-bottom: 0.9rem;
}

.vaction-infomation {
  margin-bottom: 0.35rem;
}

.black-count {
  color: black;
  margin-right: 0.15rem;
}

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

.huge-wraper > .infomation-small-block {
  color: white;
}

.block-icon-wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
}

.home-btn-block {
  width: calc(100% / 4);
  box-sizing: border-box;
  padding: 0.5rem 0.2rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
  color: inherit;
}

.new-span {
  position: absolute;
  top: 0.1rem;
  left: 0.5rem;
  font-weight: 600;
  color: #db0101;
  text-shadow: 0.05rem 0 #f7f7f7, 0 0.05rem #f7f7f7, -0.05rem 0 #f7f7f7, 0 -0.05rem #f7f7f7;
}

.block-icon-inner {
  color: #4d9eef;
  margin-bottom: 0.3em;
  font-size: 1.5rem;
}
/*home end*/
/*user-amount*/
.amount-page-wraper {
  padding: 0.2rem 1rem 0.5rem;
}

.amount-select-wrap {
  margin-bottom: 0.3rem;
}

.amount-list-wrap {
  border-top: 0.1rem solid #808080;
  border-bottom: 0.1rem solid #808080;
  margin-bottom: 0.5rem;
  width: 100%;
}

.amount-list-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.amount-list-table tr td {
  border: 0.05rem solid #eaeaea;
  text-align: center;
  padding: 0.3rem 0.4rem;
}

.number-td {
  text-align: right;
}

.T-bg-color {
  background-color: #eaeaea !important;
  border: 0.05rem solid #eaeaea !important;
}

.e-bg-color {
  background-color: #f7face;
}

.d-bg-color {
  background-color: aliceblue;
}

.sumall-bg-color {
  background-color: #0351c7;
  border: 0.05rem solid #0351c7 !important;
  color: white;
}

.amount-title {
  padding-left: 0.2rem;
  padding-top: 0.2rem;
  padding-bottom: 0.4rem;
}

/*user-amount end*/
.postSearchPop-navi {
  width: 100%;
  height: 2.15rem;
  border-bottom: 0.05rem solid #f5f6f8;
  background-color: white;
}

.close-view-backArrow {
  width: 2rem;
  text-align: center;
  height: 100%;
  z-index: 1;
}

.idPwdFind-navi {
  width: 100%;
  height: 2.15rem;
  border-bottom: 0.05rem solid #f5f6f8;
}

.navi-top-text {
  padding-left: 2.85rem;
  width: 100%;
  line-height: 2.1rem;
  height: 2.1rem;
  color: #1e1e1e;
}

.close-view-backArrow > img {
  width: 0.45rem;
  height: 0.8rem;
}

/*changePass*/
.sub-info-pass {
  margin-left: 0.25rem;
  color: #808080;
}

.sub-time-down {
  margin-right: 0.25rem;
  color: #db0101;
}

.changePass-timer {
  text-align: right;
  padding-top: 0.1rem;
  padding-bottom: 0.2rem;
  padding-right: 1rem;
}

.changePass-title {
  padding-left: 1rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.changePass-input-wrap {
  padding: 0.2rem 1rem;
}

.changePass-input-wrap {
  width: calc(100% - 2rem);
  margin: auto;
  padding-bottom: 0.2rem;
  padding: 0 1rem 0.2rem 1rem;
  box-sizing: content-box;
}

.changePass-input-wrap > input {
  width: 100%;
  height: 2.4rem;
  border: 0.05rem solid #ebebeb;
  border-radius: 0.2rem;
  background-color: white;
  padding: 0 0.8rem;
}

.changePass-input-wrap > .input-focused {
  border: 0.05rem solid #db0101;
  caret-color: #db0101;
}

.changePass-input-wrap > input::placeholder {
  color: #9d9d9d;
}

.chagePass-btn {
  background-color: #d7d7d7;
  width: calc(100% - 2rem);
  margin: 0.2rem auto;
  height: 2.4rem;
  color: #ffffff;
  border-radius: 0.2rem;
  text-align: center;
  cursor: pointer;
  line-height: 2.4rem;
}

.text-infomation-error {
  margin-top: 0.2rem;
  color: #db0101;
  padding: 0 1rem;
}

.secondChoice {
  display: none;
}

.firstchoice {
  display: none;
}

/*changePass end*/
/*notice-list*/
.notice-top-info {
  padding: 0.2rem 1rem;
  color: #808080;
  text-align: right;
}

.notice-wrap {
  padding: 0 1rem;
  padding-bottom: 0.5rem;
}

.notice-block {
  padding: 0.5rem 0;
  border-top: 0.05rem solid #eaeaea;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  align-content: space-between;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.notice-text-onerow {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.notice-text-onerow > .inner-notice-content {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-user-text {
  padding-left: 0.2rem;
  padding-top: 0.4rem;
  color: #585858;
}

.notice-time-text {
  padding-right: 0.2rem;
  padding-top: 0.4rem;
  color: #808080;
}

.write-btn {
  padding-right: 0.3rem;
  text-decoration: underline;
  color: #4d9eef;
  text-underline-offset: 0.25rem;
}

.all-count-block {
  width: 100%;
  padding: 0.5rem 0;
  /* border-bottom: 0.05rem solid #eaeaea; */
}

.notice-text-onerow > .f7-icons {
  padding-right: 0.2rem;
  color: #4d9eef;
  font-size: 0.9rem !important;
}

.d-flex {
  display: flex;
}

.slide-toggle {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

.search-block {
  justify-content: space-between;
  gap: 10px;
}

.search-block > .material-icons {
  width: 2rem;
  text-align: center;
}

.search-bar {
  display: flex;
  align-items: center;
  border-radius: 0.3rem;
  background-color: #eaeaea;
  padding: 0 0.5rem 0 1rem;
  flex: 1;
  gap: 10px;
}

.search-bar input {
  flex: 1;
}

.search-bar .material-icons {
  font-size: 0.75rem;
  font-weight: bold;
  color: #aaa;
  text-align: center;
}

.search-block .search-btn {
  width: 2rem;
  background-color: #4d9eef;
}

.padding-0 {
  padding: 0;
}

.asdf {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
}

.icon-size {
  font-size: 1rem;
}

.go-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background-color: #90bce9;
  opacity: 0.7;
  z-index: 5;
  padding: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  cursor: pointer;
  color: #fff;
  height: fit-content;
  visibility: hidden;
}

.go-top .ripple-wave {
  --f7-touch-ripple-color: #4d9eef;
}

.vertical-middle-text {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  vertical-align: middle;
  height: 1.1rem;
}

.more-item {
  padding: 0.7rem 0;
  display: flex;
  justify-content: center;
  background-color: #4d9eef;
  opacity: 0.5;
  border-radius: 0.7rem 0.7rem 0 0;
  box-shadow: 0px -2px 3px #ddd;
  cursor: pointer;
  color: #fff;
  height: fit-content;
}

.more-item span {
  line-height: normal;
}

.more-item .ripple-wave {
  --f7-touch-ripple-color: #ddd;
}

/*notice-list end*/
/*notice-detail*/
.detail-top {
  padding: 0.5rem 1rem;
  width: 100%;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  align-content: space-between;
  justify-content: space-between;
}

.detail-date-text {
  color: #808080;
  /* padding-top: 0.1rem; */
}

.detail-title {
  padding: 0.2rem 0;
  /* width: calc(100% - 2rem); */
}

.detail-user-text {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-end;
  align-content: space-between;
  justify-content: space-between;
}

.detail-text-data {
  padding: 0.8rem 1rem;
  padding-bottom: 0.4rem;
}

.read-text-font {
  color: #808080;
  width: 2rem;
  text-align: right;
  /* padding-bottom: 0.2rem; */
}

.detail-bottom-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  align-content: space-between;
  justify-content: space-between;
}

/*notice-detail end*/
/*notice-request*/
.request-wraper {
  padding: 0.2rem 1rem;
}

.infomation-request-info {
  padding: 0.2rem 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  align-content: space-between;
  justify-content: space-between;
}

.input-border-wrap {
  margin-bottom: 1rem;
  padding: 0.4rem 0.3rem 0.4rem 0.6rem;
  border: 0.05rem solid #eaeaea;
  border-radius: 0.2rem;
}

.input-checker-wrap {
  padding: 0.2rem 0;
}

.BOARD_CHECKER_BOX {
  -webkit-appearance: button !important;
  display: inline-block;
  margin-right: 0.3rem;
}

.BOARD_DEFAULT_INPUT {
  width: 100%;
  box-sizing: border-box;
}

.request-text-wraper {
  border: 0.05rem solid #eaeaea;
  padding: 0.4rem 0.6rem;
  caret-color: #0351c7;
  margin-bottom: 0.5rem;
}

.BOARD_DEFAULT_TEXTAREA {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  min-height: 50vh;
  caret-color: #0351c7;
  line-height: 1.5;
}

.request-save-btn {
  width: 100%;
  padding: 0.5rem 0;
  text-align: center;
  color: white;
  background-color: #0351c7;
  border-radius: 0.2rem;
}

/* 태근 이미지 업로더 추가  */
.postWrite-title {
  padding: 0.4rem 0 0.7rem;
  color: #585858;
}

.button-arrow-btn {
  padding: 0 0.5rem;
}

.postWrite-block {
  padding-bottom: 0.4rem;
}

.postWrite-block > .postWrite-title {
  padding-left: 1rem;
  padding-right: 1rem;
}

.postWrite-img-box {
  padding-bottom: 100%;
  border-radius: 0.4rem;
}

.postWrite-block > .swiper {
  padding-left: 1rem;
  padding-right: 1rem;
}

.color-blue-count {
  color: #003399;
}

.text-align-center-div {
  text-align: center;
  color: #585858;
}

.plus-btn {
  color: #cfcfcf;
}

.plus-img-add {
  border: 0.05rem dashed #eaeaea;
  overflow: hidden;
}

.add-img-box {
  border: 0.05rem solid #eaeaea;
  overflow: hidden;
}

.add-img-box > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xbtn-img-btn {
  position: absolute;
  width: 1rem;
  height: 1rem;
  z-index: 1;
  text-align: center;
  background-color: white;
  top: 0;
  right: -0.5rem;
  border-radius: 50%;
}

.xbtn-img-btn > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.xbtn-img-btn > .border-div {
  border-radius: 0 0 0 0.4rem;
  border: 0.05rem solid #eaeaea;
  border-right: none;
  border-top: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 0.5rem;
}

/* 태근 이미지 업로더 추가 끝 */

/*notice-request end*/
/*my-page*/
.myPage-wraper {
  padding: 0.2rem 1rem;
}

.myPage-block {
  background-color: white;
  padding: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  align-content: space-between;
  justify-content: space-between;
  margin-bottom: 0.2rem;
  gap: 1rem;
}

.block-right {
  padding-right: 0.4rem;
  text-align: right;
  justify-self: end;
}

.my-page-btn {
  /* width: 100%; */
  width: calc(100% - 2rem);
  padding: 0.5rem 0;
  text-align: center;
  color: white;
  background-color: #585858;
  border-radius: 0.2rem;
  margin-bottom: 0.2rem;
  position: fixed;
  bottom: 0.8rem;
}

#changePass-btn {
  background-color: #db0101;
}

.myPage-infomation {
  color: #808080;
  text-align: right;
  padding: 0.2rem 0;
}

/* .myPage-address .block-right {
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
} */
.myPage-address .block-left {
  align-content: center;
  display: flex;
  justify-content: space-between;
}

.myPage-address .block-left span {
  align-content: center;
  display: flex;
  justify-content: space-between;
}

.address-text {
  flex: 1;
  align-self: center;
}

.address-btn {
  color: #fafafa;
  background-color: #4d9eef;
  height: 1.5rem;
}

.myPage-address {
  gap: 0.3rem;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: initial;
}

.block-right div {
  display: flex;
  gap: 0.5rem;
}

.block-right div span:nth-child(1) {
  flex: 1;
}

.block-right div span:nth-child(2) {
  text-align: right;
  flex: 3;
}

.address-sheet {
  height: 100%;
}

.address-sheet .block {
  margin: 0.8rem 0;
}

.address-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  width: 100%;
}

.address-wrap input {
  border: 1px solid #ddd;
  border-radius: 0.3rem !important;
  padding: 0.5rem;
  width: 100%;
  height: 100%;
}

.address-wrap input:read-only {
  background-color: #f5f5f5;
}

.address-wrap .button {
  border: 1px solid #ddd;
  background-color: #f0f0f0;
  color: #212121;
  border-radius: 0.3rem !important;
  padding: 0.5rem;
  --f7-touch-ripple-color: #ddd;
}

.address-h {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.address-h div {
  flex: 1;
  height: 2rem;
}

.address-v {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.address-v input {
  height: 2rem;
}

/* .address-h input {
    min-width: 40%;
} */
.address-modal-wrap {
  display: none;
  position: relative;
  height: 50%;
  /* border: 1px solid black; */
  box-shadow: 0px 0px 1px black;
  box-sizing: border-box;
}

.address-modal-wrap img {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: -1px;
  z-index: 1;
}

.myPage-img {
  height: 3.5rem;
  width: 2.7rem;
  display: flex;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  border: 2px solid #4d9eef;
  color: #4d9eef;
  box-sizing: border-box;
}

.myPage-img img {
  height: 3.2rem;
  width: 2.5rem;
}

/*my-page end*/
/*vacation-list*/
.vacation-top {
  width: 100%;
  padding: 0.4rem 1rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.icon-and-text {
  height: 2rem;
  position: relative;
  animation: fadeinUpCostom 1s;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-end;
  justify-content: center;
  margin-bottom: 0.3rem;
  animation-fill-mode: backwards;
}

.vacation-icon {
  font-size: 1.2rem !important;
  color: #4d9eef;
  margin-right: 0.4rem;
}

.vacation-text {
  font-size: 1rem;
  font-weight: 600;
  color: #4d9eef;
}

.vacation-top-center {
  color: #808080;
  padding: 0.4rem 0 0.2rem 0;
  animation: fadeinUpCostom 0.5s;
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.7s;
  animation-fill-mode: backwards;
}

.vacation-bottom-center {
  color: #1e1e1e;
  padding: 0.2rem 0;
  animation: fadeinUpCostom 0.5s;
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.7s;
  animation-fill-mode: backwards;
  margin-bottom: 0.6rem;
}

.color-my-vacation {
  color: #0351c7;
}

.vacation-wraper {
  padding: 0 1rem 0.4rem 1rem;
  animation: fadeinUpCostom 0.5s;
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.7s;
  animation-fill-mode: backwards;
}

.vacation-btn-field {
  padding-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-end;
  justify-content: flex-end;
}

.vacation-btn {
  padding: 0.1rem 0.4rem;
  background-color: white;
  border: 0.05rem solid #0351c7;
  border-radius: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-weight: 600;
  color: #0351c7;
}

.vacation-btn > .f7-icons {
  font-weight: 600;
  color: #0351c7;
  margin-right: 0.2rem;
}

.vacation-block-data {
  padding: 0.3rem 0.2rem;
  background-color: white;
  margin-bottom: 0.2rem;
  border-radius: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.vacation-block-right {
  width: 2.5rem;
  text-align: center;
  color: #0351c7;
}

.vacation-block-left {
  width: calc(100% - 2.5rem);
  color: #1e1e1e;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.vacation-block-left > .f7-icons {
  color: #0351c7;
  width: 1rem;
  text-align: center;
  display: block;
}

.vacation-block-left > .subject-font {
  width: calc(100% - 1rem);
  display: block;
  word-break: break-all;
}

.status-div {
  padding: 0.1rem 0.2rem;
  border: 0.05rem solid #0351c7;
  border-radius: 0.2rem;
}

.status-SUBMIT {
  border: 0.05rem solid #808080 !important;
  color: #808080 !important;
}

.status-APPROVAL {
  border: 0.05rem solid #0351c7 !important;
  color: #0351c7 !important;
}

.status-REJECT {
  border: 0.05rem solid #db0101 !important;
  color: #db0101 !important;
}

/*vacation-list end*/
/*popover-vacation*/
.popover-bottom-custom {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.popover-bottom-btn {
  width: calc(50% - 0.5rem);
  text-align: center;
  padding: 0.3rem 0;
  background-color: #4d9eef;
  border-radius: 0.3rem;
  color: white;
}

.router-custom-center-popover > .popover-inner {
  word-break: break-all;
  width: 100%;
  overflow: auto;
  background-color: #f7f7f7;
  border-radius: 0.3rem;
  max-height: calc(100vh - 3rem);
}

.router-custom-center-popover {
  transform: translate(-50%, -50%) !important;
  left: 50%;
  top: 50%;
  box-shadow: none;
  background: none;
  width: 90vw;
}

@media (orientation: landscape) {
  .router-custom-center-popover {
    width: 70vh;
  }

  .popover-box {
    height: 70vh;
  }
}

.date-search-box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.5rem;
}

.input-date-search-box {
  width: calc(50% - 0.5rem);
  position: relative;
  border: 0.05rem solid #0351c7;
  border-radius: 0.3rem;
  padding: 0.2rem;
}

.input-date-search-box > .input-data-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.2rem;
  color: #4d9eef;
}

.custom-cal {
  position: absolute;
  color: #0351c7;
  right: 0.1rem;
  top: 50%;
  transform: translate(0, -50%);
  z-index: -1;
}

.spanCetner-post {
  width: 1rem;
  text-align: center;
}

.popover-vacation-title {
  padding: 0.3rem 0.5rem;
}

.date-total-count {
  text-align: center;
  color: #585858;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.huge-total-count {
  margin: 0 0.2rem;
  font-weight: 600;
  color: #0351c7;
}

.date-textarea-box {
  padding: 0 0.5rem;
  padding-bottom: 0.5rem;
}

.date-textarea-box > textarea {
  border: 0.05rem solid #0351c7;
  border-radius: 0.2rem;
  height: 10rem;
  resize: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0.2rem;
}

.choise-btn {
  background-color: #f7face;
  color: #1e1e1e;
}

.customer-item-content {
  width: 100%;
  padding: 0.2rem 0.5rem;
}

.customer-item-inner {
  padding: 0.4rem 0.5rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  border: 0.05rem solid #0351c7;
  border-radius: 0.2rem;
}

.customer-item-title {
  width: 5rem;
  color: #1e1e1e;
  font-weight: 600;
}

.item-after {
  color: #585858;
}

/*popover-vacation end*/
/*sign-list*/
.signList-wraper {
  padding: 0.4rem 0;
}

.list-top-title {
  padding: 0.2rem 1rem;
}

.search-btn-wrap {
  padding: 0.3rem 0.5rem;
  text-align: center;
}

.search-btn {
  width: 100%;
  border-radius: 0.3rem;
  background-color: #ff6a02;
  color: white;
  padding: 0.35rem 0;
}

.content-wraper {
  padding: 0 0.5rem;
  padding-top: 0.3rem;
}

.content-block {
  margin-bottom: 0.4rem;
  background-color: white;
  width: 100%;
  padding: 0.2rem 0;
  padding-bottom: 0.4rem;
  border-radius: 0.2rem;
}

.content-subject {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  padding: 0.2rem;
  border-radius: 0.2rem;
}

.content-btn-block {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-end;
  align-content: center;
}

.content-btn {
  width: 30%;
  border-radius: 0.3rem;
  padding: 0.1rem 0;
  text-align: center;
  background-color: #808080;
  color: white;
}

.approve-btn {
  background-color: #0351c7;
}

.reject-btn {
  background-color: #db0101;
}

.center-custom {
  justify-content: center !important;
}

/*sign-list end*/
/*popover-sign*/
.popover-one-text-data {
  padding: 0.2rem 0.5rem;
  font-weight: 600;
}

.popover-table-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-end;
  align-content: center;
  width: calc(100% - 1rem);
  padding: 0.3rem 0;
  margin: 0 auto;
  margin-bottom: 0.2rem;
  background-color: #0351c7;
  border-radius: 0.2rem;
  color: lightyellow;
}

.popover-table-th {
  width: 3rem;
  font-weight: 600;
  text-align: center;
  border-right: 0.05rem solid #9d9d9d;
}

.popover-table-td {
  padding-left: 0.2rem;
}

.popover-table-td.two-td {
  width: calc(50% - 3rem);
}

.popover-table-td.one-td {
  width: calc(100% - 3rem);
}

.popover-remart-text-data {
  width: calc(100% - 1rem);
  margin: 0 auto;
  margin-top: 0.2rem;
  margin-bottom: 0.4rem;
  padding: 0.3rem 0.2rem;
  border: 0.05rem solid #4d9eef;
  min-height: 6rem;
}

/*popover-sign end*/
/*message-list*/
.message-list-icon {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex-direction: column;
}

.message-search-fleid {
  margin-top: 0.4rem;
  width: 100%;
  background-color: #eaeaea;
  border-radius: 0.8rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.icon-wraper-message {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  width: 100%;
  padding-left: 0.4rem;
}

.message-search-wraper {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  width: calc(100% - 3rem);
}

.message-search-input {
  padding-left: 0.3rem !important;
  box-sizing: border-box !important;
  width: calc(100% - 1rem);
}

.message-search-wraper > .f7-icons {
  width: 1rem;
}

.message-search-xbtn {
  width: 3rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: right;
  text-align: center;
  cursor: pointer;
  padding-right: 0.3rem;
}

.icon-message {
  font-size: 1.1rem;
  color: #808080;
  margin: 0 0.5rem;
}

.chat-bubble-show {
  font-size: 1rem !important;
}

.message-field-block {
  display: none !important;
}

.message-list-div {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem;
  width: calc(100% - 0.2rem);
  height: 3.8rem;
  background-color: white;
  margin: 0 auto;
  margin-bottom: 0.2rem;
}

.left-icon-box {
  width: 3rem;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.left-icon-box > .f7-icons {
  font-size: 2.2rem;
  color: #4d9eef;
}

.message-inner {
  width: calc(100% - 6.5rem);
  height: 100%;
  padding: 0 0.4rem 0 0.6rem;
}

.message-title {
  padding-bottom: 0.3rem;
}

.message-texter {
  color: #585858;
}

.message-time {
  width: 3.5rem;
  height: 100%;
  color: #dadada;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-content: center;
  justify-content: space-between;
}

.message-list-wraper {
  width: 100%;
}

.no-read-count {
  background-color: #db0101;
  width: 1rem;
  height: 1rem;
  text-align: center;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.targeting-div {
  background-color: #ececec;
  transition: all ease 0.5s 0s;
}

/*message-list end*/
/*message-detail*/
.message-detail-all {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-content: center;
  justify-content: space-between;
  background-color: white;
}

.message-detail-wraper {
  width: 100%;
  overflow: auto;
  position: relative;
}

.message-input-wraper {
  width: 100%;
  border-top: 1px solid #dfdfdf;
  height: 95px;
  background-color: white;
  overflow: auto;
  padding-top: 5px;
  flex-shrink: 0;
  position: relative;
}

.input-textarea {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-bottom: 5px;
}

.send-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  height: 40px;
  background-color: #f7f7f7;
  color: #808080;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.send-btn-active {
  background-color: #0351c7;
  color: white;
}

.system-wraper {
  width: 80%;
  padding: 0.2rem 0;
  text-align: center;
  color: #585858;
  margin: 0.4rem auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.system-wraper > .f7-icons {
  margin-right: 0.2rem;
}

.message-wraper {
  width: 100%;
  padding-bottom: 0.2rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-content: center;
  justify-content: center;
}

.my-message-inner {
  background-color: #4d9eef;
  color: white;
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
  position: relative;
}

.my-messages {
  justify-content: flex-end;
  padding-right: 0.5rem;
}

.my-message-time {
  color: #808080;
  margin-right: 0.2rem;
  width: 3rem;
  display: none;
  text-align: right;
  align-self: stretch;
  flex-direction: row;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: flex-end;
}

.tail-message .my-message-time {
  display: flex;
}

.my-message {
  max-width: calc(100% - 3rem);
  flex-shrink: 300;
}

.first-message {
  position: relative;
}

.my-messages.first-message .my-message-inner {
  border-bottom-right-radius: 0;
}

.my-messages.first-message .my-message-inner:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 0.3rem solid transparent;
  border-left-color: #4d9eef;
  border-right: 0;
  border-bottom: 0;
  margin-top: 0;
  margin-right: -0.3rem;
}

.other-messages {
  justify-content: flex-start;
  padding-left: 0.5rem;
}

.other-message {
  flex-shrink: 300;
}

.other-message-user {
  width: 2rem;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 0.2rem;
}

.other-message-user > img {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  display: none;
}

.other-message-user > .f7-icons {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  display: none;
  text-align: center;
}

.other-messages.first-message .other-message-user * {
  display: block;
}

.other-name {
  display: none;
  padding-bottom: 0.2rem;
}

.other-messages.first-message .other-message .other-name {
  display: block;
}

.other-message-time {
  color: #808080;
  margin-left: 0.2rem;
  width: 3rem;
  display: none;
  text-align: left;
  align-self: stretch;
  flex-direction: row;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: flex-start;
}

.tail-message .other-message-time {
  display: flex;
}

.other-message-inner {
  background-color: #e5e5e5;
  color: #1e1e1e;
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
  position: relative;
}

.other-messages.first-message .other-message-inner {
  border-top-left-radius: 0;
}

.other-messages.first-message .other-message-inner:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 0.3rem solid transparent;
  border-right-color: #e5e5e5;
  border-left: 0;
  border-bottom: 0;
  margin-top: 0;
  margin-left: -0.3rem;
}

.last-message-wraper {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 80%;
  display: none;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.last-message-info {
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 0.05rem solid #eaeaea;
  background-color: #f7f7f7;
  color: #585858;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  max-width: 80%;
}

.last-user-name {
  width: 2rem;
  flex-shrink: 0;
  font-weight: 600;
}

.showTime {
  display: flex !important;
}

.user-wraper {
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  max-height: calc(100% - 8rem);
  overflow-y: auto;
}

.user-data {
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  border-bottom: 0.05rem solid #f7f7f7;
}

.user-round-data {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.2rem;
  border-radius: 50%;
  overflow: hidden;
  border: 0.05rem solid #f7f7f7;
}

.user-round-data > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-round-data > .f7-icons {
  font-size: 1.6rem;
  text-align: center;
}

.user-text {
  min-width: 6rem;
  text-align: left;
  padding: 0 0.3rem;
}

.user-text-infomation {
  width: 100%;
  text-align: center;
  padding: 0.5rem 0.4rem;
}

.detailOpen {
  width: 9rem !important;
}

.add-btns {
  width: 100%;
  color: #808080;
  padding: 0.5rem;
  border-bottom: 0.05rem solid #eaeaea;
  text-align: right;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.add-btns > .f7-icons {
  margin-right: 0.3rem;
}

/*message-detail end*/
/*message-list-long-click*/
.long-custom {
  justify-content: center;
}

.long-click-wraper {
  padding: 1rem;
}

/*message-list-long-click end*/
/*message-add*/
.messageAdd-width {
  width: 90%;
  margin: 0.4rem auto;
}

.message-add-data {
  padding: 0.4rem 0.4rem;
  width: 100%;
  height: 70vh;
  overflow-y: auto;
  padding-top: 0;
}

.right-view-div {
  width: 2rem;
  text-align: center;
}

/*message-add end*/
/*attend-list*/
.attend-date-search-box {
  padding: 0.2rem;
  text-align: center;
  position: relative;
  width: 80%;
  margin: 0.4rem auto;
}

.attend-date-search-box > .input-data-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.2rem;
  color: #1e1e1e;
  text-align: center;
}

.attend-header {
  width: calc(100% - 2rem);
  margin: 0 auto;
  margin-bottom: 0.7rem;
  text-align: center;
  color: white;
  background-color: #4d9eef;
  padding: 0.1rem 0;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.attend-header > .f7-icons {
  margin-right: 0.5rem;
}

.attend-header-color {
  background-color: #808080;
}

.holyday-data {
  margin-bottom: 0.5rem;
  width: 100%;
  padding: 0 1rem;
}

.holyday-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding-bottom: 0.2rem;
}

.holyday-items {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  padding: 0.3rem 0.4rem;
  background-color: white;
}

.holyday-type {
  width: 5rem;
  color: #4d9eef;
}

.holyday-user {
  width: calc(100% - 5rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.noflex-shink {
  flex-shrink: 0;
  margin-right: 0.2rem;
}

.holyday-postion {
  margin-left: 0.2rem;
  color: #7e7c00;
}

.holyday-dept {
  text-align: right;
}

.reason-title {
  color: #0351c7;
}

.attend-data {
  margin-bottom: 0.5rem;
  width: 100%;
  display: none;
}

.attend-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding-bottom: 0.2rem;
}

.attend-items {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  padding: 0.3rem 0.4rem;
  background-color: white;
}

.attend-type {
  width: 5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
}

.attend-user {
  width: calc(100% - 5rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.noflex-shink {
  flex-shrink: 0;
  margin-right: 0.2rem;
}

.attend-postion {
  margin-left: 0.2rem;
  color: #7e7c00;
}

.attend-dept {
  text-align: right;
}

.attendcss03 {
  color: #4d9eef;
}

.attendcss02 {
  color: #db0101;
}

.attendcss01 {
  color: #1e1e1e;
}

.attend-date {
  margin-left: 0.2rem;
  margin-top: 0.05rem;
}

.attend-warper-div {
  padding: 0 1rem;
}

.attend-workplace {
  width: 100%;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  padding: 0.2rem 0.5rem;
}

.attend-workplace > .downArrow {
  display: none;
}

.attend-workplace-active {
  background-color: #585858;
  color: white;
}

.attend-workplace-active > .downArrow {
  display: block !important;
}

.attend-workplace-active > .upArrow {
  display: none !important;
}

.attend-warper-div-active > .attend-data {
  display: block !important;
}

.workplaceCount {
  margin-left: 0.5rem;
}

.work-places-name {
  min-width: 3rem;
}

.attend-workplace-titles {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.count-color {
  color: #db0101;
}

/*attend-list end*/
/* workLog-list START*/
#workLogList .input-date-search-box {
  border-color: #ddd;
  /* background-color: #fcfcfc; */
}

#workLogList .input-date-search-box i {
  color: #212121;
}

#work-list {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.work-item {
  /* border-top: 1px solid #ddd; */
  padding: 0.6rem;
  display: flex;
  justify-content: left;
  gap: 1rem;
  box-shadow: 0 0 3px #ccc;
  background-color: #fcfcfc;
  border-radius: 0;
}

.work-item-left {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.55rem;
  color: #fcfcfc;
  border-radius: 100%;
  background-color: #90bce9;
  height: 100%;
}

.work-item-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

#work-list .button {
  text-overflow: initial;
  white-space: initial;
  height: 3.76rem;
  width: 100%;
  vertical-align: initial;
  text-align: initial;
  font-weight: initial;
  text-transform: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  line-height: inherit;
  color: inherit;
  --f7-touch-ripple-color: #ddd;
}

#work-list .more-item {
  height: fit-content;
}

#work-list .button > span + span {
  margin: 0;
}

.work-item-title {
  font-weight: bold;
}

.work-item-content {
  color: #808080;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.work-btn {
  color: #fff;
  background-color: #4d9eef;
}

#work-log-list .date-search-box {
  padding: 0;
}

.work-search-box {
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 0.5rem;
}

.work-search-box .search-btn {
  width: 100%;
}

.work-write-btn {
  width: calc(100% - 2rem);
  position: fixed;
  bottom: 0.5rem;
}

#workLogList .go-top {
  bottom: 2.5rem;
}

#workLogList .notice-wrap {
  padding-bottom: 2.25rem;
}

#work-log-list #FROM_DATE,
#work-log-list #TO_DATE {
  color: #212121;
}

/* workLog-list END*/
/* workLog-add START*/
.work-add-list {
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: calc(100vh - 2.5rem);
  /* height: 100vh; */
}

#work-log-add .input-date-search-box {
  padding: 0;
  border: none;
}

#work-log-add #I_WORK_DATE,
#work-log-add .input-date-search-box i {
  color: #212121;
}

#work-log-add .custom-cal {
  right: 0.35rem;
}

#work-log-add .work-write-btn {
  position: initial;
  width: 100%;
  /* margin-bottom: 0.5rem; */
}

#work-log-add .customer-item-inner {
  flex-direction: row-reverse;
  border: 1px solid #ddd;
  height: 2rem;
  border-radius: 0.3rem;
}

#work-log-add .customer-item-content {
  padding: 0;
}

#work-log-add .customer-item-title {
  text-align: end;
  width: fit-content;
}

#work-log-add .item-after {
  color: #212121;
}

.work-add-block-h {
  display: flex;
  gap: 0.5rem;
  /* padding-bottom: 0.35rem; */
  /* border-bottom: 1px solid #eaeaea; */
}

.work-add-block-v {
  display: flex;
  flex-direction: column;
}

.work-add-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.work-add-content input,
.work-add-content textarea {
  width: 100%;
  border: 1px solid #ddd;
  padding: 0.35rem 0.5rem !important;
  border-radius: 0.3rem;
  /* background-color: #fafafa; */
}

.work-add-content input {
  height: 2rem;
}

.work-add-content textarea {
  flex: 1;
  background-color: #fafafa;
}

.work-add-title {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 2.5rem;
}

.work-add-textarea {
  flex: 1;
}

.work-add-block-v .work-add-title {
  margin-bottom: 0.3rem;
}

.date-ago-box {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}

.date-ago-btn {
  flex: 1;
  color: #212121;
  border: 1px solid #ddd;
  background-color: #fcfcfc;
  --f7-touch-ripple-color: #ddd;
}

#ac-btn {
  height: 100%;
  width: 100%;
  visibility: hidden;
}

.work-project-item {
  display: flex;
  gap: 0.5rem;
}

.work-project-item .button {
  background-color: #4d9eef;
  color: white;
  padding: 0 0.7rem;
}

/* workLog-add END*/
/* workLog-detail START*/
.work-detail-title {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
  gap: 0.3rem;
  justify-content: space-between;
}

.work-detail-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.work-detail-content {
  padding: 0.5rem 0;
  flex: 1;
  white-space: pre-line;
}

.work-detail-content span {
  font-size: 1rem;
  font-weight: 600;
  line-height: 2.3rem;
}

/* workLog-detail END*/
/* workLog-list-admin START*/
#workLogListAdmin .date-search-box {
  margin: 0;
  justify-content: space-between;
}

#workLogListAdmin .input-date-search-box {
  background-color: #fcfcfc;
  /* background-color: transparent; */
  border-color: transparent;
  border-color: #555;
  /* box-shadow: 0 1px 2px #ddd; */
  --f7-touch-ripple-color: #ddd;
}

#workLogListAdmin .input-date-search-box i {
  color: #555;
}

#workLogListAdmin .input-date-search-box input {
  /* text-align: center; */
  font-size: 1rem;
}

#workLogListAdmin .custom-cal {
  right: 0.35rem;
}

#workLogListAdmin .work-write-btn {
  position: initial;
  width: 100%;
  /* margin-bottom: 0.5rem; */
}

#workLogListAdmin .customer-item-inner {
  flex-direction: row-reverse;
  border: 1px solid #ddd;
  height: 1.8rem;
  border-radius: 0.3rem;
  margin-bottom: 0.5rem;
  background-color: #fcfcfc;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
}

#workLogListAdmin .customer-item-content {
  padding: 0;
}

#workLogListAdmin .customer-item-title {
  text-align: end;
  width: fit-content;
}

#workLogListAdmin .item-after {
  color: #212121;
}

#workLogListAdmin .search-bar {
  background-color: #fcfcfc;
  border: 1px solid #ddd;
  height: 1.8rem;
  margin-bottom: 0.5rem;
}

#workLogListAdmin .date-prev-btn,
#workLogListAdmin .date-next-btn {
  font-size: 1.8rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  color: #555;
  --f7-touch-ripple-color: #ddd;
}

.address-book-radio,
.work-admin-radio {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.address-book-radio .item-radio,
.work-admin-radio .item-radio {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.5rem;
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  background-color: #fcfcfc;
}

.radio-active {
  background-color: #4d9eef !important;
  border-color: #4d9eef;
  color: #fcfcfc;
}

.search-box {
  margin-bottom: 0.5rem;
}

#workLogList .item-link,
#workLogAdd .item-link,
#workLogListAdmin .item-link {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* workLog-list-admin END*/
/* address-book-admin END*/
#addressBook .search-bar {
  background-color: #fcfcfc;
  border: 1px solid #ddd;
  height: 1.8rem;
  margin-bottom: 0.5rem;
}

#addressBook .list {
  margin: 0;
}

#addressBook .list ul,
.address-book-item-title {
  margin-bottom: 0.3rem;
}

.address-book-item-title,
#addressBook .item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#addressBook tr {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#addressBook th {
  border-right: 1px solid #ccc;
  background-color: #fafafa;
  width: 2.5rem;
}

#addressBook table,
#addressBook th,
#addressBook td {
  border-collapse: collapse;
  text-align: center;
}

#addressBook table {
  width: 100%;
  /* border-top: 1px solid black;
    border-bottom: 1px solid black; */
}

#addressBook th,
#addressBook td {
  padding: 0.3rem;
}

#addressBook .block {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

#addressBook .accordion-item-opened .item-content {
  background-color: #d7e7f8;
  color: #003399;
}

#addressBook .total-box {
  /* border-bottom: 1px solid #ddd; */
}

.address-book-link a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  color: #212121;
}

.address-book-link a span {
  line-height: 100%;
}

.address-book-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
}

.address-book-img span,
.address-book-img img {
  width: 2.5rem;
  height: 3.2rem;
  border-radius: 1.5rem;
  border: 2px solid #4d9eef;
  color: #4d9eef;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* address-book-admin END*/

/* mailing START */

.mail-flex-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mail-flex-inline {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.mail-btn-primary {
  position: initial;
  width: 100%;
  color: #fff;
  background-color: #4d9eef;
}

.mail-list-title {
  display: flex;
  box-sizing: border-box;
  align-items: center;
}

.mail-list-title label {
  padding: 16px;
}

.mail-list-title h2 {
  padding: 16px;
}

.mail-list-title {
  display: flex;
  box-sizing: border-box;
  align-items: center;
}

.mail-list .item-link .item-inner:before {
  content: "";
}

.mail-filter-btn {
  padding: 0.1rem 0.4rem;
  background-color: white;
  border: 0.05rem solid #0351c7;
  border-radius: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-weight: 600;
  color: #0351c7;
}

.mail-filter-btn > .f7-icons {
  font-weight: 600;
  color: #0351c7;
  margin-right: 0.2rem;
}

.mail-filter-btn.active {
  border: 0.05rem solid #db0101;
  color: #db0101;
}

#mail-popup-selectRecipient table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

.mail-form-wrapper {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.5rem;
  height: calc(100vh - 3rem);
  /*overflow-y: auto;*/
}

.mail-form-toolbox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mail-editor-wrapper {
  flex-grow: 1;
}

/* mailing END */

/*Modal index Set*/
#app-preload-first {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  flex-direction: column;
  gap: 10px;
}
.app-first-preloader {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(0, 0, 0, 0.1);
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spinner 0.8s linear infinite;
  margin: 0 auto;
}
.app-first-message {
  font-size: 16px;
  color: #333;
  text-align: center;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
/*Modal index Set end*/
/*Login Set*/
.login-page-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-page-block {
  width: 26rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 2rem;
  border-radius: 1rem;
  background-color: aliceblue;
}
@media (max-width: 480px) {
  .login-page-block {
    height: 100%;
    width: 100%;
    border-radius: 0;
  }
}
.login-image-block {
  width: 90%;
  display: flex;
  gap: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.login-image-block > img {
  width: 100%;
}
.login-image-block > div {
  color: #5c5fc0;
  height: 24px;
}
.login-page-input-box {
  width: 100%;
  border: 1px solid #5c5fc0;
  border-radius: 5px;
  overflow: hidden;
}
.login-page-input-box > input {
  width: 100%;
  padding: 12.5px 10px;
  text-align: left;
  background-color: white;
}
.login-page-input-box > input::placeholder {
  text-align: center;
}
.login-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #5c5fc0;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  height: 50px;
}
/*Login End*/