/* Fonts
--------------------------------------- */
/* Img Path
--------------------------------------- */
/* Color Scheme
--------------------------------------- */
/* Shadow
--------------------------------------- */
/* Radius
--------------------------------------- */
/* Line Height
--------------------------------------- */
/* Animations
--------------------------------------- */
/* Breakpoints
--------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap");
:root {
  --input-text-border-color: #C5C5C5;
  --input-text-back-color: white;
  --color-table-header-bg: #0055BB;
  --color-table-header-text: white;
  --color-block-information-panel-bg: #F2F2F2;
  /* panel
  --color-panel-menu-bg: #e0e0e0;
  --color-panel-menu-hover: #EDEBFD;
  --color-panel-bg: #ffffff;
  --color-popup-panel-bg: #ffffff;
  --color-footer-bg: #eaeaea; */
  /* form element */
  --color-form-element-bg: white;
  --color-form-element-text: #333333;
  --color-form-element-border: #C5C5C5;
  --color-form-element-focus: #EDEBFD;
  --color-form-element-hover: #EDEBFD;
  /* input-text */
  --input-text-text-color: #333333;
  --input-text-back-color: var(--color-form-element-bg);
  --input-text-back-color-focus: var(--color-form-element-focus);
  --input-text-border-color: var(--color-form-element-border);
  --input-text-border-color-focus: #0055BB;
  --input-text-border-radius: 4px;
  --input-text-padding: 12px;
  --input-text-height: 48px;
  /* input-checkbox */
  --input-checkbox-border-radius: 4px;
  /* input-radio */
  --input-radio-checked-color: #0055BB;
  /* checkbox-panel */
  --color-checkbox-panel-checked: #0055BB;
  --color-checkbox-panel-focus: #EDEBFD;
  /* item */
  --color-item-hover: #EDEBFD;
  --color-item-focus: #EDEBFD;
  --color-item-current: #EDEBFD;
}

/* Fonts
--------------------------------------- */
/* Img Path
--------------------------------------- */
/* Color Scheme
--------------------------------------- */
/* Shadow
--------------------------------------- */
/* Radius
--------------------------------------- */
/* Line Height
--------------------------------------- */
/* Animations
--------------------------------------- */
/* Breakpoints
--------------------------------------- */
:root {
  --input-text-border-color: #C5C5C5;
  --input-text-back-color: white;
  --color-table-header-bg: #0055BB;
  --color-table-header-text: white;
  --color-block-information-panel-bg: #F2F2F2;
  /* panel
  --color-panel-menu-bg: #e0e0e0;
  --color-panel-menu-hover: #EDEBFD;
  --color-panel-bg: #ffffff;
  --color-popup-panel-bg: #ffffff;
  --color-footer-bg: #eaeaea; */
  /* form element */
  --color-form-element-bg: white;
  --color-form-element-text: #333333;
  --color-form-element-border: #C5C5C5;
  --color-form-element-focus: #EDEBFD;
  --color-form-element-hover: #EDEBFD;
  /* input-text */
  --input-text-text-color: #333333;
  --input-text-back-color: var(--color-form-element-bg);
  --input-text-back-color-focus: var(--color-form-element-focus);
  --input-text-border-color: var(--color-form-element-border);
  --input-text-border-color-focus: #0055BB;
  --input-text-border-radius: 4px;
  --input-text-padding: 12px;
  --input-text-height: 48px;
  /* input-checkbox */
  --input-checkbox-border-radius: 4px;
  /* input-radio */
  --input-radio-checked-color: #0055BB;
  /* checkbox-panel */
  --color-checkbox-panel-checked: #0055BB;
  --color-checkbox-panel-focus: #EDEBFD;
  /* item */
  --color-item-hover: #EDEBFD;
  --color-item-focus: #EDEBFD;
  --color-item-current: #EDEBFD;
}

/*Fonts
--------------------------------------- */
/* Common
--------------------------------------- */
html {
  background-color: white;
  color: #333333;
  font-family: "Inter", "Noto Sans JP", FontAwesome, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "pkna";
}

a {
  color: #4145C7;
  text-decoration: none;
}

img,
canvas,
svg,
video {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

ol,
ul {
  list-style: none;
}

em {
  font-style: normal;
}

strong {
  font-weight: inherit;
}

label {
  cursor: pointer;
}

br.sponly {
  display: none;
}
@media only screen and (max-width: 768px) {
  br.sponly {
    display: block;
  }
}

@media only screen and (max-width: 768px) {
  br.pconly {
    display: none;
  }
}

/*----------------------------------------
    Button
--------------------------------------- */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.icon--xs {
  width: 12px;
  height: 12px;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--md {
  width: 20px;
  height: 20px;
}

.icon--lg {
  width: 24px;
  height: 24px;
}

.icon--reverse {
  transform: scaleY(-1);
}

.icon--white {
  color: white;
}

.icon--gray {
  color: #9F9F9F;
}

.icon--green {
  color: #45B976;
}

.icon--orange {
  color: #BF8924;
}

.icon--red {
  color: #E85555;
}

.icon--blue {
  color: #0055BB;
}

.icon--alert {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_alert.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_alert.svg");
}

.icon--calendar {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_calendar.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_calendar.svg");
}

.icon--check {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_check.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_check.svg");
}

.icon--checkbox {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_checkbox.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_checkbox.svg");
}

.icon--clip {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_clip.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_clip.svg");
}

.icon--clock {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_clock.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_clock.svg");
}

.icon--close {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_close.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_close.svg");
}

.icon--doctor {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_doctor.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_doctor.svg");
}

.icon--edit {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_edit.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_edit.svg");
}

.icon--email {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_email.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_email.svg");
}

.icon--eye {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_eye.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_eye.svg");
}

.icon--filter {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_filter.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_filter.svg");
}

.icon--hospital {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_hospital.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_hospital.svg");
}

.icon--info {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_info.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_info.svg");
}

.icon--loope {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_loope.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_loope.svg");
}

.icon--map {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_map.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_map.svg");
}

.icon--money {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_money.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_money.svg");
}

.icon--plus {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_plus.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_plus.svg");
}

.icon--save {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_save.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_save.svg");
}

.icon--search {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_search.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_search.svg");
}

.icon--select {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_select.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_select.svg");
}

.icon--school {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_school.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_school.svg");
}

.icon--trash {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_trash.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_trash.svg");
}

.icon--user {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_user.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_user.svg");
}

.icon--wrench {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_wrench.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/ic_wrench.svg");
}

.icon--menu-company {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_company.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_company.svg");
}

.icon--menu-message {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_message.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_message.svg");
}

.icon--menu-mypage {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_mypage.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_mypage.svg");
}

.icon--menu-resume {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_resume.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_resume.svg");
}

.icon--menu-search {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_search.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_search.svg");
}

.icon--menu-setting {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_setting.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_setting.svg");
}

.icon--menu-open {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_open.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_open.svg");
}

.icon--menu-close {
  mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_close.svg");
  -webkit-mask-image: url("https://beyonted.blob.core.windows.net/img/icon/menu_close.svg");
}

/* Button
--------------------------------------- */
.flex-main-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0055BB;
  color: white;
  border-radius: 4px;
  line-height: 1;
}
.flex-main-button:hover {
  opacity: 0.8;
}
.flex-main-button .icon {
  width: 24px;
  height: 24px;
}
@media only screen and (max-width: 768px) {
  .flex-main-button .icon {
    width: 20px;
    height: 20px;
  }
}

.flex-second-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #0055BB;
  color: #0055BB;
  border-radius: 4px;
  background-color: white;
  line-height: 1;
}
.flex-second-button:hover {
  opacity: 0.8;
}
.flex-second-button-alert {
  border-color: #C71919;
  color: #C71919;
}

.flex-button-alert {
  background-color: #C71919;
}

.flex-button-large {
  display: inline-flex;
  min-width: 420px;
  padding: 0px 24px;
  height: 64px;
  font-size: 24px;
  font-weight: 700;
  gap: 8px;
}
@media only screen and (max-width: 768px) {
  .flex-button-large {
    min-width: 280px;
    height: 56px;
    padding: 20px 8px;
    font-size: 20px;
  }
}

.flex-button-medium {
  display: inline-flex;
  padding: 0px 24px;
  height: 48px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  gap: 8px;
}
@media only screen and (max-width: 768px) {
  .flex-button-medium {
    padding: 0px 12px;
    height: 40px;
    font-size: 16px;
    gap: 4px;
  }
}

.flex-button-small {
  display: inline-flex;
  padding: 0px 12px;
  height: 36px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  gap: 6px;
}
@media only screen and (max-width: 768px) {
  .flex-button-small {
    padding: 8px 8px;
    height: 32px;
    font-size: 16px;
  }
}
.flex-button-small .icon {
  width: 20px;
  height: 20px;
}

/*----------------------------------------
Form
--------------------------------------- */
::-webkit-input-placeholder,
::placeholder,
:-ms-input-placeholder {
  color: #B3B3B3;
}

.input-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
}
@media only screen and (max-width: 768px) {
  .input-fields {
    max-width: 100%;
    width: 100%;
  }
}
.input-fields .field-panel {
  width: 100%;
}

.field-panel {
  display: grid;
  gap: 8px;
}
.field-panel--long {
  width: 280px;
}
.field-panel--long .input-text {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .field-panel--long {
    width: 100%;
  }
}
.field-panel--full {
  width: 100%;
}
.field-panel--append > div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.field-panel.postal-code {
  width: 100px;
}
.field-panel.address {
  width: 400px;
}
@media only screen and (max-width: 768px) {
  .field-panel.address {
    flex-basis: 100%;
  }
}

.field-name {
  font-size: 14px;
  line-height: 1.25;
}

.field-fixed {
  color: #8E8E8E;
}

.input-error {
  width: 100%;
  color: #C71919;
  font-weight: 700;
  margin-top: -4px;
  line-height: 1.25;
  display: none;
}

.message-text {
  width: 100%;
  margin-top: -4px;
  color: #8E8E8E;
  line-height: 1.25;
  display: none;
}

.input-record {
  border: 1px solid var(--input-text-border-color);
  border-radius: var(--input-text-border-radius);
  background-color: var(--input-text-back-color);
  height: var(--input-text-height);
  padding: 0px var(--input-text-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input-record:focus {
  border-color: var(--input-text-border-color-focus);
  background-color: var(--input-text-back-color-focus);
}
.input-record[name=RecordList] {
  border: none;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  background: none;
  padding: 0px;
}
.input-record[name=UserSnsAccountList] {
  border: none;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
}
.input-record[name=ExperienceList], .input-record[name=JobExperienceList] {
  border: none;
  border-radius: 0px;
  background: none;
  padding: 0px;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.input-record[name=UserQualificationList], .input-record[name=UserCertificationList], .input-record[name=UserAffiliationList] {
  border: none;
  border-radius: 0px;
  background: none;
  padding: 0px;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.input-record[selection-mode=Single] {
  border-radius: 4px;
}
.input-record .data-record-panel {
  line-height: 28px;
}
.input-record.nationality {
  width: 160px;
}
.input-record.prefecture {
  width: 120px;
}
.input-record.sns-service-name {
  width: 120px;
}
.input-record.school-type {
  width: 140px;
}

.input-text[input-date=true] {
  width: fit-content;
}
.input-text--sm {
  width: 48px;
}
.input-text.name {
  width: 120px;
}
.input-text.phone-number {
  width: 160px;
}
.input-text.annual-income {
  width: 100px;
}
.input-text.hourly-wage, .input-text.daily-wage {
  width: 100px;
}
.input-text input[name=MinAnnualIncome],
.input-text input[name=ContractAnnualIncome],
.input-text input[name=MaxAnnualIncome] {
  width: 100px;
}
@media only screen and (max-width: 768px) {
  .input-text input[name=MinAnnualIncome],
  .input-text input[name=ContractAnnualIncome],
  .input-text input[name=MaxAnnualIncome] {
    width: 80px;
  }
}

.input-textarea input[type=text] {
  width: 100%;
  border: 1px solid var(--input-text-border-color);
  border-radius: var(--input-text-border-radius);
  background-color: var(--input-text-back-color);
  height: var(--input-text-height);
  padding: 0px var(--input-text-padding);
}
.input-textarea input[type=text]:focus {
  border-color: var(--input-text-border-color-focus);
  background-color: var(--input-text-back-color-focus);
}
.input-textarea textarea {
  width: 100%;
  min-height: 56px;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
  background-color: white;
  resize: vertical;
  padding: 8px 8px;
  line-height: 1.5;
  vertical-align: middle;
}
.input-textarea textarea:focus-within {
  border-color: #0055BB;
  background-color: #EDEBFD;
}
@media only screen and (max-width: 768px) {
  .input-textarea textarea {
    min-height: 80px;
  }
}
.input-textarea--full {
  display: flex;
  width: 100%;
}
.input-textarea--md textarea {
  min-height: 80px;
}
@media only screen and (max-width: 768px) {
  .input-textarea--md textarea {
    min-height: 126px;
  }
}
.input-textarea--lg textarea {
  min-height: 126px;
}
@media only screen and (max-width: 768px) {
  .input-textarea--lg textarea {
    min-height: 160px;
  }
}

.input-radio {
  display: inline-flex;
  align-items: center;
}

.input-checkbox {
  display: inline-flex;
  vertical-align: middle;
}
.input-checkbox label {
  padding-right: 0;
}
.input-checkbox .box .checked {
  display: none;
}
.input-checkbox input:checked ~ .box {
  border-color: #0055BB;
  background: #EDEBFD url("https://beyonted.blob.core.windows.net/img/icon/ic_box_checked.svg") no-repeat center center;
  background-size: 16px 12px;
}
.input-checkbox input:checked ~ .text {
  color: black;
}

.data-record-panel {
  padding: 4px;
}

.checkbox-list {
  display: flex;
  gap: 8px 12px;
  align-items: center;
  flex-wrap: wrap;
}

.checkbox-panel > label .checkbox {
  flex: 0 0 50px;
  height: 24px;
  margin: 0px;
}
.checkbox-panel > label .checkbox input:checked + span {
  background: var(--color-checkbox-panel-focus) url("https://beyonted.blob.core.windows.net/img/icon/ic_toggle_checked.svg") no-repeat 6px 50%;
}
.checkbox-panel > label .checkbox input:checked + span:after {
  left: 28px;
  background: var(--color-checkbox-panel-checked);
}
.checkbox-panel > label .checkbox input:focus + span:after {
  border-color: rgba(0, 0, 0, 0.3);
}
.checkbox-panel > label .checkbox span {
  background: #F2F2F2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 50px;
}
.checkbox-panel > label .checkbox span:focus {
  border-color: #0055BB;
}
.checkbox-panel > label .checkbox span:after {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  left: 2px;
  top: 2px;
  box-shadow: none;
}

select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  font-size: 16px;
  border: 1px solid var(--input-text-border-color);
  border-radius: var(--input-text-border-radius);
  height: var(--input-text-height);
  padding: 0px 28px 0px var(--input-text-padding);
  background: var(--input-text-back-color) url("https://beyonted.blob.core.windows.net/img/icon/select_bullet.svg") no-repeat calc(100% - 4px) 50%;
}
@media only screen and (max-width: 768px) {
  select {
    font-size: 14px;
  }
}
select:focus {
  border-color: var(--input-text-border-color-focus);
  background-color: var(--input-text-back-color-focus);
}

.file-upload {
  width: fit-content;
}

/*----------------------------------------
System
--------------------------------------- */
.flatpickr-calendar {
  position: absolute;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading-image {
  /* Spinner size and color */
  width: 24px;
  height: 24px;
  border-top-color: var(--color-glay-04);
  border-left-color: var(--color-glay-04);
  /* Additional spinner styles */
  animation: spinner 400ms linear infinite;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-style: solid;
  border-width: 2px;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
}
.loading-image.large {
  width: 64px;
  height: 64px;
  border-width: 6px;
}
.loading-image.slow {
  animation: spinner 1s linear infinite;
}

.indicator {
  display: none;
  transition: opacity 500ms ease-in;
}

.htmx-request .indicator {
  display: initial;
}

.htmx-request.indicator {
  display: initial;
}

.time-yyyyMMdd-HHmmss {
  width: 110px;
  flex: 0 0 110px;
}

.time-yyyyMMdd-HHmm {
  width: 90px;
  flex: 0 0 90px;
}

.color-square-panel {
  display: inline-block;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

/*----------------------------------------------------------
PopupPanel
----------------------------------------------------------*/
.right-popup-panel {
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  width: 60%;
  max-width: 100dvw;
  height: 100svh;
  z-index: 150;
  overflow: hidden;
  background-color: var(--color-panel-bg);
  box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 480px) {
  .right-popup-panel {
    width: 100%;
  }
}
.right-popup-panel > .content-panel {
  display: grid;
  grid-template-rows: calc(100svh - 72px) 72px;
  position: relative;
  height: 100svh;
}
.right-popup-panel > .content-panel > .content-main-panel {
  height: calc(100svh - 72px);
  overflow-y: auto;
}
.right-popup-panel > .content-panel > .footer-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 12px;
  height: 72px;
  background-color: #EDEDFD;
}
.right-popup-panel > .content-panel > .footer-panel .button {
  flex-shrink: 0;
}
.right-popup-panel > .content-panel > .footer-panel .text {
  font-size: 13px;
  color: #8E8E8E;
  line-height: 1.25;
}
@media only screen and (max-width: 768px) {
  .right-popup-panel > .content-panel > .footer-panel .text {
    font-size: 12px;
  }
}
.right-popup-panel > .content-panel .data-record-panel {
  width: 100%;
}
.right-popup-panel > .content-panel .data-record-panel:hover {
  background-color: var(--color-form-element-bg);
}
.right-popup-panel:has(.agent-mail-log-info-panel) {
  width: 1024px;
}
.right-popup-panel:has(.invoice-info-panel) {
  width: 600px;
}
.right-popup-panel:has(.web-access-log-info-panel) {
  width: 1024px;
}
.right-popup-panel:has(.error-log-info-panel) {
  width: 1024px;
}

.full-size-image-popup-panel {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--color-body-bg);
}
.full-size-image-popup-panel .image-panel {
  width: 100vw;
  height: calc(100dvh - 48px);
  overflow: scroll;
}
.full-size-image-popup-panel .image-panel img {
  margin: 0 auto;
}
.full-size-image-popup-panel .footer-panel {
  height: 48px;
  padding: 0 12px;
  bottom: 0;
  display: flex;
  align-items: center;
}
.full-size-image-popup-panel .footer-panel .setting-panel {
  display: flex;
  align-items: center;
}
.full-size-image-popup-panel .footer-panel .setting-panel .image-size {
  flex: 0 0 60px;
  margin: 0 10px;
}
.full-size-image-popup-panel .footer-panel .setting-panel .image-size-slider {
  width: calc(100dvw - 200px);
}
.full-size-image-popup-panel .footer-panel .button-panel {
  flex: 0 0 80px;
  margin: 0 4px 0 auto;
}
.full-size-image-popup-panel .footer-panel .button-panel .button {
  display: inline-block;
}

.select-color-popup-panel {
  position: absolute;
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
  width: 330px;
  z-index: 150;
}
.select-color-popup-panel .scroll-container-panel {
  height: 320px;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
}
.select-color-popup-panel .scroll-container-panel .color {
  width: 32px;
  height: 32px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

[drag=true] {
  cursor: move;
}
[drag=true][draging=true] {
  position: absolute;
  z-index: 200;
}

[drop-zone-panel=true][draging=true] {
  background-color: var(--color-drop-target-bg);
}

.notification-popup-panel {
  position: absolute;
  top: 64px;
  left: auto;
  right: 16px;
  width: 300px;
  max-width: 100dvw;
  min-height: 100px;
  max-height: calc(100svh - 200px);
  z-index: 160;
  overflow: hidden;
  background-color: white;
  box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0px 12px;
}
@media only screen and (max-width: 768px) {
  .notification-popup-panel {
    top: 48px;
    right: 8px;
  }
}
.notification-popup-panel .notification-record-panel {
  padding: 12px 0px;
  border-bottom: 1px solid #D4D4D4;
}
.notification-popup-panel .notification-record-panel:last-child {
  border-bottom: none;
}

.user-setting-popup-panel {
  position: absolute;
  top: 64px;
  left: auto;
  right: 16px;
  width: 160px;
  max-width: 100dvw;
  max-height: calc(100svh - 200px);
  z-index: 160;
  overflow: hidden;
  background-color: white;
  box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media only screen and (max-width: 768px) {
  .user-setting-popup-panel {
    top: 48px;
    right: 8px;
  }
}
.user-setting-popup-panel .menu-link {
  display: block;
  padding: 8px;
  border-radius: 2px;
}
.user-setting-popup-panel .menu-link:hover {
  background-color: #F3F3F3;
  text-decoration: underline;
}

.dialog-popup-panel[open] {
  border-radius: 8px;
  box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.1);
}
.dialog-popup-panel[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}
.dialog-popup-panel[open] > .content-panel {
  padding: 16px 16px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  align-items: center;
}
.dialog-popup-panel[open] > .content-panel .text {
  min-height: unset;
  font-size: 16px;
  line-height: 1.25;
}
.dialog-popup-panel[open] > .content-panel .button-panel {
  gap: 12px;
  margin: 0;
}
.dialog-popup-panel[open] > .content-panel .button-panel .button {
  border-radius: 4px;
  padding: 0px 16px;
  width: auto;
  height: 40px;
}
.dialog-popup-panel[open] > .content-panel .button-panel .button:hover {
  opacity: 0.8;
}
.dialog-popup-panel[open] > .content-panel .button-panel .button[confirm-yes=true] {
  background-color: #0055BB;
  color: white;
}
.dialog-popup-panel[open] > .content-panel .button-panel .button[confirm-no=true] {
  border: 2px solid #0055BB;
  color: #0055BB;
}