.container {
  /** modal **/
  --profile-modal-back-color: #0000004d;
  --profile-modal-body-back-color: #ffffff;
  --profile-modal-body-box-shadow-color: #0000004d;
  --profile-modal-icon-color: #5c5fc0;
  --profile-modal-icon-back-color: #eeeff9;
  --profile-modal-icon-hover-back-color: #c8cbf4;
  --profile-modal-icon-active-back-color: #adafdf;
  --profile-modal-seperator-color: #e1e1e1;
}
/*.container.dark-theme {*/
/** modal **/
/*--profile-modal-back-color: #ffffff4d;
    --profile-modal-body-back-color: #202124;
    --profile-modal-body-box-shadow-color: #0000004d;
    --profile-modal-icon-color: #5c5fc0;
    --profile-modal-icon-back-color: #eeeff9;
    --profile-modal-icon-hover-back-color: #c8cbf4;
    --profile-modal-icon-active-back-color: #adafdf;
    --profile-modal-seperator-color: #e1e1e1;
}*/
.page[data-name="organization"] > .container {
  --tab-active-color: #5c5fc0;
  --main-background-color: #f7f8fc;
  --default-bg-color: #fff;
  --default-box-shadow-color: #00000029;
  --main-text-color: #4c4c4c;
  --sub-text-color: #fff;
  /** organization list **/
  --org-list-title-text-color: #fff;
  --org-list-title-back-color: #5c5fc0;
  --list-header-border-color: #d1d1d1;
  --profile-border-color: #4c4c4c;
  --bookmark-icon-back-color: #5c5fc080;
  --bookmarked-back-color: #ffde00;
  --org-list-item-back-color: #fff;
  --org-list-item-border-color: #5c5fc080;
  --org-list-item-box-shadow-color: #5c5fc033;
  --org-tree-odd-back-color: #ffffff;
  --org-tree-even-back-color: #f8f6fc;
  --concurrent-position-text-color: #5c5fc0;
  --absence-text-color: #ff5a81;
  --state-all--text-color: #8a8a8a;
  --state-emp--text-color: #4285f4;
  --state-cop--text-color: #34a853;
  --state-vac--text-color: #e68a00;
  --state-bus--text-color: #d95c5c;
  /** tab **/
  --tab-separator-color: #d1d1d1;
  --active-tab-back-color: #5c5fc0;
  --active-tab-text-color: #fff;
  /** scroll bar **/
  --scroll-bar-color: #a2a2a2;
  --scroll-track-color: #e1e1e1;
}

/*.page[data-name="organization"] > .container.dark-theme {
    --tab-active-color: #5c5fc0;
    --main-background-color: #202124;
    --default-bg-color: #202124;
    --default-box-shadow-color: #00000029;
    --main-text-color: #e0e0e0;
    --sub-text-color: #4c4c4c;*/
/** organization list **/
/*--org-list-title-text-color: #fff;
    --org-list-title-back-color: #5c5fc0;
    --list-header-border-color: #d1d1d1;
    --profile-border-color: #4c4c4c;
    --bookmark-icon-back-color: #5c5fc080;
    --bookmarked-back-color: #ffde00;
    --org-list-item-back-color: #32333a;
    --org-list-item-border-color: #8a8a8a80;
    --org-list-item-box-shadow-color: #32333a80;
    --org-tree-odd-back-color: #5c5fc01a;
    --org-tree-even-back-color: #ffffff1a;
    --concurrent-position-text-color: #7578da;
    --absence-text-color: #df496c;
    --state-all--text-color: #8a8a8a;
    --state-emp--text-color: #4285f4;
    --state-cop--text-color: #34a853;
    --state-vac--text-color: #e68a00;
    --state-bus--text-color: #d95c5c;*/
/** tab **/
/*--tab-separator-color: #d1d1d1;
    --active-tab-back-color: #5c5fc0;
    --active-tab-text-color: #fff;*/
/** scroll bar **/
/*--scroll-bar-color: #a2a2a2;
    --scroll-track-color: transparent;
}*/

.page[data-name="organization"] .hide {
  display: none;
}

.page[data-name="organization"] .scrollbar {
  overflow: auto;
}

.page[data-name="organization"] .scrollbar::-webkit-scrollbar {
  width: 5px;
}

.page[data-name="organization"] .scrollbar::-webkit-scrollbar-thumb {
  background: var(--scroll-bar-color);
  border-radius: 20px;
}

.page[data-name="organization"] .scrollbar::-webkit-scrollbar-track {
  background: var(--scroll-track-color);
  border-radius: 20px;
}

/******************************************************************
** Organization
*******************************************************************/
.page[data-name="organization"] .organization {
  --organization-font-size: var(--md-font);
}
.page[data-name="organization"] .org-container-top {
  /*    background-color: #5c5fc0;*/
  color: white;
  display: flex;
  flex-direction: column;
  /*    height: 100%;*/
  max-width: 100%;
  /*    min-width: 1430px;*/
  /*    min-height: 100%;*/
  /* width: calc(100% - 190px); */
}

.page[data-name="organization"] .org-container-top .org-title-text {
  display: flex;
  border: 1px solid #5c5fc0;
  border-radius: 10px 10px 0px 0px;
  background-color: #5c5fc0;
  color: white;
  width: 100%;
  min-height: 50px;
  justify-content: space-between;
  align-items: center;
  font-size: var(--xlg-font);
  font-weight: var(--normal-font);
  padding: 0 0 0 20px;
}

.page[data-name="organization"] .org-container-top .org-search-bar {
  display: flex;
  gap: 10px;
}

.page[data-name="organization"] .org-container-top .org-search {
  display: flex;
  flex-direction: row;
  /*        margin-right: 90px;*/
}

.page[data-name="organization"] .org-container-top .org-search-input {
  position: relative;
  border: 1px solid #5c5fc0;
  padding: 9px 40px 8px 12px;
  border-radius: 100px;
  width: 350px;
  height: 30px;
  outline: none;
  transition: border-color 0.3s ease;
  background-color: white;
}

.page[data-name="organization"] .org-search-result-wrapper {
  position: absolute;
  height: 200px;
  width: 500px;
  background-color: white;
  top: 100%;
  right: 0;
  z-index: 50;
  box-shadow: 0 4px 10px 0 var(--default-box-shadow-color);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page[data-name="organization"] .org-search-result-wrapper:has(.org-search-result.no-result) {
  display: none;
}

.page[data-name="organization"] .org-search-options:has(+ .org-search-result.no-result) {
  border: none;
}

.page[data-name="organization"] .org-search-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 1px solid var(--list-header-border-color);
  padding-bottom: 5px;
}
.page[data-name="organization"] .org-search-options .org-search-option {
  height: 25px;
}

.page[data-name="organization"] .org-search-result {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.page[data-name="organization"] .org-search-result li {
  display: flex;
  align-items: center;
  height: 30px;
  border-bottom: 1px solid var(--list-header-border-color);
  cursor: pointer;
}
.page[data-name="organization"] .org-search-result li:last-child {
  border: none;
}

.page[data-name="organization"] .organization .org-content-wrapper {
  --org-structure-min-width: 350px;
  --org-list-min-width: 950px;
}
.page[data-name="organization"] .organization .org-content-wrapper {
  display: flex;
  flex: 1;
  min-width: calc(var(--org-structure-min-width) + var(--org-list-min-width));
  height: 100%;
  min-height: 0;
}

.page[data-name="organization"] .org-structure-container {
  min-width: var(--org-structure-min-width);
  width: var(--org-structure-min-width);
  height: 100%;
  border-radius: 3px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--tab-separator-color);
}

.page[data-name="organization"] .button-group {
  bottom: 2%;
  position: absolute;
  min-width: 280px;
  width: 280px;
  padding: 10px 10px 10px 0;
  justify-items: left;
}

.page[data-name="organization"] .org-add-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4c4c4c;
  width: 60px;
  height: 30px;
  cursor: pointer;
}

/************* 부서 정보 카드 *************/

.page[data-name="organization"] .org-info-card {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background-color: white;
  border-bottom: 1px solid var(--tab-separator-color);
  height: 45px;
}

.page[data-name="organization"] .org-dept-info-card {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  justify-content: center;
  padding: 8px 20px;
  height: 100%;
}

.page[data-name="organization"] .org-dept-info-card .dept-path {
  display: flex;
  gap: 10px;
  font-size: var(--sm-font);
  align-items: end;
}

.page[data-name="organization"] .org-dept-info-card .dept-path span.clickable-path {
  cursor: pointer;
}

.page[data-name="organization"] .dept-info-wrapper {
  display: flex;
  justify-content: space-between;
}

.page[data-name="organization"] .dept-profile {
  display: flex;
  color: white;
  gap: 5px;
  align-items: center;
}

.page[data-name="organization"] .dept-basic-icon {
  color: #696bab;
  display: flex;
  align-items: center;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  justify-content: center;
}
.page[data-name="organization"] .dept-basic-icon svg {
  --center: #6163ac;
}

.page[data-name="organization"] .dept-name {
  font-size: var(--md-font);
  color: var(--main-text-color);
  display: flex;
  align-items: center;
  /* font-weight: var(--bold-font); */
}
.page[data-name="organization"] .dept-name.dept-path {
  gap: 10px;
  align-items: center;
  font-size: var(--md-font);
}

.page[data-name="organization"] .dept-count-wrapper {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 100%;
  padding-left: 5px;
}

.page[data-name="organization"] .dept-count-wrapper .count-item {
  font-size: var(--sm-font);
}

/* select box custom */
.page[data-name="organization"] .org-custom-select {
  width: 217px;
  height: 32px;
  padding: 2px 7px;
  font-size: var(--sm-font);
  color: #333;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
  appearance: none; /* Remove default dropdown arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9l6 6 6-6"%3E%3C/path%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 10px; /* Adjusted arrow size */
}

/* Add a custom dropdown arrow */
.page[data-name="organization"] .org-custom-select-container::after {
  content: "\\25BC"; /* Downward triangle arrow */
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 12px;
  color: #333;
  pointer-events: none;
}

/* Hover and focus styles */
.page[data-name="organization"] .org-custom-select:hover {
  background-color: #f1f1f1;
}

.page[data-name="organization"] .org-custom-select:focus {
  border-color: #5c5fc0;
  box-shadow: 0 0 5px #5c5fc0;
}

.page[data-name="organization"] #positionSelect option:disabled {
  color: #828282;
}

/*business-trip-modal*/
.page[data-name="organization"] .businesstrip {
  position: absolute;
  background-color: white;
  color: #ff5a81;
  padding: 3px 7px;
  font-size: var(--sm-font) !important;
  border-radius: 5px;
  box-shadow: 0px 3px 6px #00000029;
  white-space: nowrap;
  display: none;
  z-index: 1000;
}

/******************************************************************
** organization list
*******************************************************************/
.page[data-name="organization"] .org-list-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  max-height: var(--body-height);
  height: 100%;
  min-height: 0;
  padding-bottom: 0.9375rem;
  min-width: var(--org-list-min-width);
  width: calc(100% - var(--org-structure-min-width));
}

.page[data-name="organization"] .org-list-title {
  height: 50px;
  display: flex;
  padding: 13px;
  border-radius: 0 3px 0 0;
  background-color: var(--org-list-title-back-color);
}

.page[data-name="organization"] .org-list-subtitle {
  display: flex;
  flex: 1;
}

.page[data-name="organization"] .org-list-title * {
  color: var(--org-list-title-text-color);
}

.page[data-name="organization"] .bookmark {
  cursor: pointer;
  line-height: var(--sm-height);
  display: flex;
  justify-content: center;
  align-items: center;
}

.page[data-name="organization"] .bookmark.bookmarked {
  color: var(--bookmarked-back-color);
}

.page[data-name="organization"] .unit-title {
  padding: 0 0.5rem;
  line-height: var(--sm-height);
  display: flex;
  align-items: center;
  font-size: var(--xlg-font);
}

.page[data-name="organization"] .unit-state {
  flex: 1;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 1rem;
}
/******************************************************************/
.page[data-name="organization"] .org-list-wrapper {
  flex: 1;
  display: flex;
  height: calc(var(--body-height) - 130px);
  width: 100%;
  height: 100%;
  min-height: 0;
  background-color: #f7f8fc;
  border-radius: 0 0 10px 0;
}

.page[data-name="organization"] .org-list {
  /*    --col-1-width: 350px;*/
  /*    --col-2-width: 350px;*/
  /*    --col-3-width: 350px;*/
  /*    --col-4-width: 233px;*/
  position: relative;
  padding: 0 0.9375rem 0 0;
  /*    flex: 1;*/
  background-color: #ffffff;
  width: 100%;
  max-height: 100%;
}

.page[data-name="organization"] .org-list.scrollbar::-webkit-scrollbar-button:vertical:start:decrement,
.page[data-name="organization"] .org-list.scrollbar::-webkit-scrollbar-button:vertical:start:increment {
  display: block;
  height: 15px;
  pointer-events: none;
}

.page[data-name="organization"] .org-list.scrollbar::-webkit-scrollbar-button:vertical:end:decrement {
  display: block;
  width: 25px;
}

.page[data-name="organization"] .org-list > ul {
  list-style-type: none;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ===================================
   구성원 리스트 헤더 (List header)
=================================== */
.page[data-name="organization"] .org-list {
  /* --list-grid-template-columns: 75px 2fr 3fr 2fr 3fr 2fr 50px 50px 30px; */
  --list-grid-template-columns: 59px 2fr 3fr 2fr 3.5fr 2fr 50px 50px;
  --ss-scroll-right-bottom: 4px;
}
/* grid-area */
/* namePosDutHeader deptHeader phoneHeader emailHeader statusHeader */
.page[data-name="organization"] .col-header.name-pos-dut-header {
  grid-area: namePosDutHeader;
}
.page[data-name="organization"] .col-header.dept-header {
  grid-area: deptHeader;
}
.page[data-name="organization"] .col-header.phone-header {
  grid-area: phoneHeader;
}
.page[data-name="organization"] .col-header.email-header {
  grid-area: emailHeader;
  justify-content: right;
}
.page[data-name="organization"] .col-header.work-type-header {
  grid-area: statusHeader;
  justify-content: center;
}

.page[data-name="organization"] .list-header {
  position: sticky;
  top: 0;
  background-color: var(--default-bg-color);
  display: grid;
  border-bottom: 1px solid var(--list-header-border-color);
  /* padding: 0.625rem 20px; */
  padding: 0.625rem 16px;
  grid-template-columns: var(--list-grid-template-columns);
  grid-template-areas: ". namePosDutHeader deptHeader phoneHeader emailHeader statusHeader . .";
  gap: 10px;
  place-items: center;
  height: 45px;
}

.page[data-name="organization"] .col-header {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  font-weight: var(--bold-font);
}

.page[data-name="organization"] .col-header.col-mini {
  width: var(--xxlg-font);
  /*        height: var(--xxlg-font);*/
  padding: 0;
  visibility: hidden;
}

/* ==============================
   구성원 리스트 (List)
============================== */
/* grid-area */
/* profile namePosDut dept phone email status chat msg drag groupDept */
.page[data-name="organization"] .profile {
  grid-area: profile;
}
.page[data-name="organization"] .name-pos-dut-wrapper {
  grid-area: namePosDut;
}
.page[data-name="organization"] .info-dept {
  grid-area: dept;
}
.page[data-name="organization"] .phone {
  grid-area: phone;
}
.page[data-name="organization"] .email {
  grid-area: email;
}
.page[data-name="organization"] .status-wrapper {
  grid-area: status;
}
.page[data-name="organization"] .chat-icon {
  grid-area: chat;
}
.page[data-name="organization"] .msg-icon {
  grid-area: msg;
}
.page[data-name="organization"] .drag-icon {
  grid-area: drag;
}
/* group grid-area */
.page[data-name="organization"] .info-name {
  grid-area: groupDept;
}

.page[data-name="organization"] .org-list-item {
  display: grid;
  height: 60px;
  grid-template-columns: var(--list-grid-template-columns);
  /* grid-template-areas: "profile namePosDut dept phone email status chat msg drag"; */
  grid-template-areas: "profile namePosDut dept phone email status chat msg";
  gap: 10px;
  cursor: pointer;
  place-items: center;
  border-bottom: 1px solid var(--list-header-border-color);
  word-break: break-word;
  /* padding: 0 20px; */
  padding: 0 16px;
  place-items: center;
}

.page[data-name="organization"] .org-list-item.org-group-item {
  /* grid-template-areas: "profile groupDept groupDept . . . chat msg drag"; */
  grid-template-areas: "profile groupDept groupDept . . . chat msg";
}
.page[data-name="organization"] .list-item {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page[data-name="organization"] .list-item {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 특이케이스 */
.page[data-name="organization"] .list-item.justify-left {
  justify-content: left;
}
.page[data-name="organization"] .list-item.justify-right {
  justify-content: right;
}
.page[data-name="organization"] .list-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* .page[data-name="organization"] .list-item-wrapper .list-item {
    width: 100%;
} */
.page[data-name="organization"] .org-list-item .list-item:not(.list-item-icon) {
  font-size: var(--organization-font-size);
}

.page[data-name="organization"] .list-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--xlg-font);
  width: var(--xlg-font);
  height: var(--xlg-font);

  color: #696bab;
}
.page[data-name="organization"] .list-item-icon svg {
  --center: #6163ac;
}
.page[data-name="organization"] .org-list-container .list-item-icon svg {
  width: 35px;
  height: 35px;
}
.page[data-name="organization"] .org-list-item:hover {
  background-color: #f0f0f0;
}

.page[data-name="organization"] .list-item-profile {
  justify-self: start;
}

.page[data-name="organization"] .profile-image {
  width: 43px;
  height: 43px;
  min-width: 43px;
  min-height: 43px;
  border-radius: 50%;
  border: 1px solid #999cbe;
  display: flex;
  align-items: center;
  overflow: hidden;
  /*    color: #999cbe;*/
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.page[data-name="organization"] .profile-basic-icon {
  width: 43px;
  height: 43px;
  min-width: 43px;
  min-height: 43px;
  border-radius: 50%;
  border: 1px solid #999cbe;
  display: flex;
  align-items: center;
  overflow: hidden;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  justify-content: center;
  font-size: 34px;
  color: #999cbe;
}

/* 이름 / 직급 / 직책 영역 */
.page[data-name="organization"] .org-list-item:not(.org-group-item) .info-name {
  align-items: end;
}
.page[data-name="organization"] .org-list-item .list-item .info-position-duty {
  align-items: start;
  font-size: var(--sm-font);
}
/* 근무 형태 영역 */
.page[data-name="organization"] .list-item-wrapper.status-wrapper {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.page[data-name="organization"] .list-item.concurrent-position.filled {
  display: flex;
  padding: 0px 10px;
  width: fit-content;
  height: 30px;
  border-radius: 0.5rem;
  color: #5c5fc0;
  border: 1px solid #5c5fc0;
  justify-content: center;
  align-items: center;
}
/* 아이콘 영역 */
.page[data-name="organization"] .chat-icon,
.page[data-name="organization"] .msg-icon {
  width: var(--xxlg-font);
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 26px;
  color: #696bab;
}

.page[data-name="organization"] .contact-group .state {
  font-size: var(--sm-font);
}

/******************************************************************
** organization structure
*******************************************************************/
.page[data-name="organization"] .org.tab-group {
  position: relative;
  flex: 1;
  min-height: 0;
  padding-bottom: 50px;
}

.page[data-name="organization"] .org .tab-content {
  overflow: auto;
  border-radius: 0px 0px 0px 0px;
  scrollbar-width: none;
  display: none;
  height: 100%;
  width: auto;
}
.page[data-name="organization"] .org .tab-content.active {
  display: block;
}
.page[data-name="organization"] .org .tab-content::-webkit-scrollbar {
  display: none;
}

.page[data-name="organization"] .custom-track {
  width: 3px;
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 15px;
  bottom: 15px;
  right: 5px;
  background-color: var(--fake-scroll-track-color);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.page[data-name="organization"] .custom-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
  background: var(--fake-scroll-bar-color);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
/******************************************************************
** tree
*******************************************************************/
.page[data-name="organization"] .group-domain-root h3,
.page[data-name="organization"] .group-domain-root ul {
  margin: 0;
}

.page[data-name="organization"] .list-mng {
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.page[data-name="organization"] .list-mng.show {
  display: block;
}

.page[data-name="organization"] .tree-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  height: 30px;
  font-size: var(--organization-font-size);
  cursor: pointer;
  background-color: var(--default-bg-color);
  min-width: fit-content;
}

.page[data-name="organization"] .tree-label a {
  text-decoration: none;
}

.page[data-name="organization"] .tree-label.odd {
  background-color: var(--org-tree-odd-back-color);
}

.page[data-name="organization"] .tree-label.even {
  background-color: var(--org-tree-even-back-color);
}

.page[data-name="organization"] .tree-label.focus {
  background-color: #5c5fc041;
}

.page[data-name="organization"] .tree-label:hover a {
  text-decoration: underline;
}

.page[data-name="organization"] .tree-label:hover {
  filter: brightness(95%);
}

.page[data-name="organization"] .tree-label:active {
  filter: brightness(90%);
}

.page[data-name="organization"] .label-icon {
  font-size: 1.2rem;
}

/** Tab custom 스타일 *********************************************/
.page[data-name="organization"] .org.tab-btn-group {
  border: none;
  /*    border-radius: 10px 0 0 0;*/
}

.page[data-name="organization"] .org .tab-separator {
  width: 1px;
  background-color: var(--tab-separator-color);
}

.page[data-name="organization"] .org .tab-btn {
  border: none;
  padding: 0;
  height: 45px;
  font-size: var(--organization-font-size);
  background-color: var(--default-bg-color);
  border-bottom: 1px solid var(--tab-separator-color) !important;
}

.page[data-name="organization"] .org .tab-btn.active::before {
  display: none;
}
/**/
.page[data-name="organization"] .tab-btn.active {
  background-color: #7c7fdd;
  color: var(--active-tab-text-color);
  cursor: initial;
  border-bottom: #adafdf;
}

.page[data-name="organization"] .org .tab-content {
  background-color: var(--default-bg-color);
}
/** modal custom **************************************************/
.page[data-name="organization"] .group-profile-modal * {
  color: var(--main-text-color);
}

.page[data-name="organization"] .group-profile-modal .modal-background {
  background-color: var(--profile-modal-back-color);
}

.page[data-name="organization"] .group-profile-modal .modal-body {
  background-color: var(--profile-modal-body-back-color);
  box-shadow: 2px 3px 6px var(--profile-modal-body-box-shadow-color);
}

.page[data-name="organization"] .group-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page[data-name="organization"] .group-profile-modal .modal-body {
  padding: 40px 35px 25px;
  width: fit-content;
  height: fit-content;
  min-width: 0;
  min-height: 0;
}

.page[data-name="organization"] .modal-profile-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.page[data-name="organization"] .profile-title {
  font-size: var(--xxlg-font);
}

.page[data-name="organization"] .group-profile-modal .profile-img {
  width: 70px;
  height: 70px;
  max-width: 70px;
  max-height: 70px;
  border-radius: 70px;
  border: 1px solid #999cbe;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page[data-name="organization"] .group-profile-modal .profile-img .list-item-icon {
  font-size: 70px;
  width: 50px;
  height: 50px;
}
.page[data-name="organization"] .group-profile-modal .profile-img .list-item-icon svg {
  font-size: inherit;
  width: inherit;
  height: inherit;
}

.page[data-name="organization"] .group-profile-modal .org-profile-img {
  width: 70px;
  height: 70px;
  max-width: 70px;
  max-height: 70px;
  border-radius: 70px;
  border: 1px solid #999cbe;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.page[data-name="organization"] .group-profile-modal .profile-img * {
  font-size: 3.75rem;
  color: #999cbe;
}

.page[data-name="organization"] .icon-btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}

.page[data-name="organization"] .icon-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 50px;
  background-color: var(--profile-modal-icon-back-color);
  cursor: pointer;
}

.page[data-name="organization"] .icon-btn span {
  color: var(--profile-modal-icon-color);
}

.page[data-name="organization"] .icon-btn:hover {
  background-color: var(--profile-modal-icon-hover-back-color);
}

.page[data-name="organization"] .icon-btn:active {
  background-color: var(--profile-modal-icon-active-back-color);
}

.page[data-name="organization"] .icon-btn.bookmark-icon {
  background-color: var(--profile-modal-icon-active-back-color);
}

.page[data-name="organization"] .icon-btn.bookmark-icon span {
  color: var(--sub-text-color);
}

.page[data-name="organization"] .icon-btn.bookmark-icon:hover {
  background-color: var(--profile-modal-icon-hover-back-color);
}

.page[data-name="organization"] .icon-btn.bookmark-icon:active {
  background-color: var(--profile-modal-icon-back-color);
}

.page[data-name="organization"] .bookmark-icon span.bookmarked {
  color: var(--bookmarked-back-color);
}

.page[data-name="organization"] .modal-unit-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
}

.page[data-name="organization"] .modal-unit-state span {
  min-width: 6.25rem;
  display: flex;
}

/** profile image modal  **/
.page[data-name="organization"] .modal.image-modal .modal-body {
  padding: 0;
}
.page[data-name="organization"] .modal.image-modal .modal-close-btn {
  display: none;
}
.page[data-name="organization"] .modal.image-modal .image-modal-content {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page[data-name="organization"] .modal.image-modal .image-modal-img {
  width: 100%;
  height: 100%;
  max-width: 800px;
  max-height: 800px;
  min-width: 300px;
  min-height: 300px;
  object-fit: cover;
  /* aspect-ratio: 1 / 1; */
  border-radius: 10px;
  box-shadow: none;
}

/** people **/
.page[data-name="organization"] .profile-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: max-content;
}

.page[data-name="organization"] .profile-seperator {
  width: 100%;
  height: 1px;
  background-color: var(--profile-modal-seperator-color);
}

.page[data-name="organization"] .profile-row {
  display: flex;
  padding: 0 10px;
  gap: 30px;
}

.page[data-name="organization"] .detail-title {
  /* min-width: 3rem; */
  flex: 2 0 75px;
  min-width: 75px;
  color: #888888;
}

.page[data-name="organization"] .detail-content-group {
  flex: 3 0 200px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page[data-name="organization"] .detail-content {
  font-size: var(--sm-font);
}

.page[data-name="organization"] .abc {
  flex: 1;
}
/** floating btn **************************************************/
.page[data-name="organization"] .floating-btn {
  display: none;
}

/** set dept **************************************************/
.page[data-name="organization"] .set-dept {
  padding: 16px 12px 14px;
  background-color: #ffffff;
  border-radius: 10px;
  width: 80%;
  height: 80%;
  max-width: 80%;
  max-height: 80%;
  background-color: #ffffff;
}

.page[data-name="organization"] .set-dept-wrap {
  padding-top: 25px;
}
.page[data-name="organization"] .set-dept-title {
  width: 100%;
  height: 30px;
  padding-bottom: 46px;
}
.page[data-name="organization"] .set-dept-list-area {
  display: flex;
  padding: 0 0 9px 10px;
  align-items: center;
  width: 100%;
  gap: 35px;
}

.page[data-name="organization"] .set-dept-list {
  font-size: var(--sm-font);
  font-weight: var(--normal-font);
  color: #777777;
  width: 80px;
}

.page[data-name="organization"] .set-dept-input {
  display: flex;
  align-items: center;
  padding-top: 3px;
  border: 1px solid #5c5fc0 !important;
  border-radius: 5px !important;
  width: 217px;
  height: 32px;
  text-align: left;
  color: #242424 !important;
  font-weight: var(--sm-font) !important;
  padding-left: 5px !important;
}

.page[data-name="organization"] .set-dept-calendar {
  border: 1px solid #5c5fc0;
  width: 70px;
  height: 32px;
  border-right: none;
  border-radius: 5px 0 0 5px;
}

.page[data-name="organization"] .set-dept-icon-area {
  display: flex;
  width: 23px;
  border: 1px solid #5c5fc0;
  height: 32px;
  border-left: none;
  color: #5c5fc0;
  border-radius: 0 5px 5px 0;
  align-items: center;
  font-size: var(--lg-font);
}

.page[data-name="organization"] .set-dept-from-date {
  display: flex;
  align-items: center;
}

.page[data-name="organization"] .set-dept-to-date {
  display: flex;
  align-items: center;
}

.page[data-name="organization"] input:focus {
  outline: 0px solid #5c5fc0;
}

.page[data-name="organization"] input[type="text"] {
  font-size: var(--sm-font);
}

.page[data-name="organization"] .set-dept-submit {
  width: 100%;
  height: 37px;
  border: 1px solid #5c5fc0;
  border-radius: 5px;
  background-color: #5c5fc0;
  color: white;
  text-align: center;
  align-content: center;
  cursor: pointer;
}

.page[data-name="organization"] .radio-line {
  display: flex;
  flex-direction: row;
}
.page[data-name="organization"] .dept-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  height: 29px;
  font-size: var(--sm-font);
}
.page[data-name="organization"] .dept-mng {
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

/* #region 모바일 전체 (해상도 1023px ~ ) */
@media all and (max-width: 1023px) {
  .page[data-name="organization"] .page-block-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 10px;
  }
  .page[data-name="organization"] .page-block {
    /* gap: 0px; */
  }
  .page[data-name="organization"] .page-block-header {
    padding: 5px 5px 0 5px;
  }
  .page[data-name="organization"] .organization {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 5px;
  }
  .page[data-name="organization"] .org-header {
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .page[data-name="organization"] .h-separator {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid var(--tab-separator-color);
    /* padding-top: 5px; */
  }
  /* #region 리스트 부분 */
  .page[data-name="organization"] .org-list-wrapper {
    flex: 1;
    min-height: 0;
  }
  .page[data-name="organization"] .org-list-wrapper.ss-container {
    --ss-scroll-right-bottom: -5px;
    --ss-scrollbar-size: 5px;
  }
  .page[data-name="organization"] .org-list {
    padding: 5px;
    background-color: transparent;
    width: 100%;
    height: fit-content;
    min-height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .page[data-name="organization"] .org-item {
    width: 100%;
    height: 75px;
    background-color: #fff;
    box-shadow: var(--default-box-shadow);
    /* box-shadow: 0 0 3px 0px var(--default-box-shadow-color); */
    border-radius: 5px;
    /* border: 1px solid var(--list-header-border-color); */
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 10px;
  }
  .page[data-name="organization"] .org-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
  }
  .page[data-name="organization"] .org-item-img-wrapper {
    height: 100%;
    aspect-ratio: 1/1;
  }
  .page[data-name="organization"] .org-item-img {
    height: 100%;
    width: 100%;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #999cbe;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page[data-name="organization"] .org-item-img .material-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #696bab;
  }
  .page[data-name="organization"] .org-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
  }
  .page[data-name="organization"] .org-item-img svg {
    --center: #6163ac;
    width: 35px;
    height: 35px;
  }
  .page[data-name="organization"] .org-item-img .material-icons:has(svg) {
    color: #999cbe;
  }
  .page[data-name="organization"] .org-item-name {
    display: flex;
    align-items: end;
    gap: 5px;
  }
  .page[data-name="organization"] .org-item-name-text {
    /* font-weight: var(--bold-font); */
  }
  .page[data-name="organization"] .org-item-posi-duty {
    font-size: var(--xsm-font);
  }
  .page[data-name="organization"] .org-item-dept-text {
    font-size: var(--sm-font);
    color: #777777;
  }
  .page[data-name="organization"] .org-item-status {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 5px;
  }
  .page[data-name="organization"] .org-concurrent {
    color: #5c5fc0;
    font-size: var(--sm-font);
  }
  .page[data-name="organization"] .org-item.dept .count-item {
    color: #777777;
  }
  /* #endregion */

  /* #region path, count 부분 */
  .page[data-name="organization"] .dept-path,
  .page[data-name="organization"] .dept-info-wrapper {
    border-radius: 5px;
  }
  .page[data-name="organization"] .dept-path {
    font-size: var(--sm-font);
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .page[data-name="organization"] .dept-info-wrapper {
    padding: 0 5px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* box-shadow: 0 0 3px 0px var(--default-box-shadow-color); */
    box-shadow: var(--default-box-shadow);
    background-color: #d5d6ef;
    /* background-color: #f9f9fb; */
    /* border: 1px solid var(--tab-separator-color); */
  }
  .page[data-name="organization"] .dept-count-wrapper {
    align-items: center;
    padding: 0;
  }
  .page[data-name="organization"] .dept-info {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 100%;
    padding: 0 10px;
  }
  .page[data-name="organization"] .dept-message,
  .page[data-name="organization"] .dept-detail {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page[data-name="organization"] .dept-message .material-icons,
  .page[data-name="organization"] .dept-detail .material-icons {
    font-size: var(--xlg-font);
  }
  .page[data-name="organization"] .dept-info-separator {
    width: 1px;
    height: 70%;
    background-color: var(--main-text-color);
  }
  /* #endregion */

  /* #region 상세 모달 */
  /** modal custom **************************************************/
  .page[data-name="organization"] .group-profile-modal .modal-body {
    border-radius: 10px;
  }
  .page[data-name="organization"] .group-profile-modal * {
    color: var(--main-text-color);
  }

  .page[data-name="organization"] .group-profile-modal .modal-background {
    background-color: var(--profile-modal-back-color);
  }

  .page[data-name="organization"] .group-profile-modal .modal-body {
    background-color: var(--profile-modal-body-back-color);
    box-shadow: 2px 3px 6px var(--profile-modal-body-box-shadow-color);
  }

  .page[data-name="organization"] .group-modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .page[data-name="organization"] .group-profile-modal .modal-body {
    padding: 40px 35px 25px;
    width: fit-content;
    height: fit-content;
    min-width: 0;
    min-height: 0;
  }

  .page[data-name="organization"] .modal-profile-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .page[data-name="organization"] .profile-title {
    font-size: var(--xxlg-font);
  }

  .page[data-name="organization"] .group-profile-modal .profile-img {
    width: 70px;
    height: 70px;
    max-width: 70px;
    max-height: 70px;
    border-radius: 70px;
    border: 1px solid #999cbe;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .page[data-name="organization"] .group-profile-modal .org-profile-img {
    width: 70px;
    height: 70px;
    max-width: 70px;
    max-height: 70px;
    border-radius: 70px;
    border: 1px solid #999cbe;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .page[data-name="organization"] .group-profile-modal .profile-img * {
    font-size: 3.75rem;
    color: #999cbe;
  }

  .page[data-name="organization"] .icon-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
  }

  .page[data-name="organization"] .icon-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 50px;
    background-color: var(--profile-modal-icon-back-color);
    cursor: pointer;
  }

  .page[data-name="organization"] .icon-btn span {
    color: var(--profile-modal-icon-color);
  }

  .page[data-name="organization"] .icon-btn:hover {
    background-color: var(--profile-modal-icon-hover-back-color);
  }

  .page[data-name="organization"] .icon-btn:active {
    background-color: var(--profile-modal-icon-active-back-color);
  }

  .page[data-name="organization"] .icon-btn.bookmark-icon {
    background-color: var(--profile-modal-icon-active-back-color);
  }

  .page[data-name="organization"] .icon-btn.bookmark-icon span {
    color: var(--sub-text-color);
  }

  .page[data-name="organization"] .icon-btn.bookmark-icon:hover {
    background-color: var(--profile-modal-icon-hover-back-color);
  }

  .page[data-name="organization"] .icon-btn.bookmark-icon:active {
    background-color: var(--profile-modal-icon-back-color);
  }

  .page[data-name="organization"] .bookmark-icon span.bookmarked {
    color: var(--bookmarked-back-color);
  }

  .page[data-name="organization"] .modal-unit-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
  }

  .page[data-name="organization"] .modal-unit-state span {
    min-width: 6.25rem;
    display: flex;
  }

  /** profile image modal  **/
  .page[data-name="organization"] .modal.image-modal .modal-body {
    padding: 0;
  }
  .page[data-name="organization"] .modal.image-modal .modal-close-btn {
    display: none;
  }
  .page[data-name="organization"] .modal.image-modal .image-modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page[data-name="organization"] .modal.image-modal .image-modal-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 300px;
    min-height: 300px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    box-shadow: none;
  }

  /** people **/
  .page[data-name="organization"] .profile-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: max-content;
  }

  .page[data-name="organization"] .profile-seperator {
    width: 100%;
    height: 1px;
    background-color: var(--profile-modal-seperator-color);
  }

  .page[data-name="organization"] .profile-row {
    display: flex;
    padding: 0 10px;
    gap: 30px;
  }

  .page[data-name="organization"] .detail-title {
    /* min-width: 3rem; */
    flex: 2 0 75px;
    min-width: 75px;
    color: #888888;
  }

  .page[data-name="organization"] .detail-content-group {
    flex: 3 0 200px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .page[data-name="organization"] .detail-content {
    font-size: var(--sm-font);
  }

  .page[data-name="organization"] .abc {
    flex: 1;
  }
  /* #endregion */
  .page[data-name="organization"] .hide {
    display: none;
  }
}
/* #endregion */