@charset "UTF-8";
.share_include {
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10005;
}

#wrapper-item {
    display: none;
}

#wrapper-msg .box__space {
    height: 0.75em;
}

#wrapper-template-select,
#wrapper-jobs-select,
#wrapper-folder-move,
#wrapper-folder,
#wrapper-invite-edit,
#wrapper-edit,
#wrapper-msg,
.box__wrapper__select,
#wrapper-crop {
    /* root 有設定 */
    /* --input-h: 36px; */

    pointer-events: auto;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* .box__wrapper__select {
    display: none;
} */

#wrapper-template-select .box__container,
#wrapper-jobs-select .box__container,
#wrapper-folder-move .box__container,
#wrapper-folder .box__container,
#wrapper-invite-edit .box__container,
#wrapper-edit .box__container,
#wrapper-msg .box__container,
.box__wrapper__select .box__container,
#wrapper-crop .box__container {
    position: relative;
    width: 100%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);

    display: flex;
    
    justify-content: center;
    align-items: center;
}

/* 隨著 視窗 改變 croppie 的可是範圍 */
#wrapper-template-select .box__container .box__body,
#wrapper-jobs-select .box__container .box__body,
#wrapper-folder-move .box__container .box__body,
#wrapper-folder .box__container .box__body,
#wrapper-invite-edit .box__container .box__body,
#wrapper-edit .box__container .box__body,
#wrapper-msg .box__container .box__body,
.box__wrapper__select .box__container .box__body,
#wrapper-crop .box__container .box__body {
    pointer-events: auto;
    position: relative;
    /* width: 90%; */
    border-radius: var(--border-radius-m);
    background-color: #fff;
    padding: 20px 20px;

    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
}

#wrapper-crop .box__container .box__body .body__croppie .cr-boundary {
    /* border: 1px solid var(--color-gray-light3);
    box-sizing: border-box; */
    outline: 1px solid var(--color-gray-light3);
}

#wrapper-crop .box__container .box__body .body__croppie .cr-slider-wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 15px auto;
}

#wrapper-crop .box__container .box__body .body__croppie .cr-slider-wrap .cr-slider {
    flex: 1;
}

#wrapper-crop .box__container .box__body .body__croppie .cr-slider-wrap .cr-rotate {
    width: 14%;
    min-width: 60px;
    margin-left: min(max(5%, 10px), 15px);
}

#wrapper-crop .box__container .box__body .body__action {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#wrapper-crop .box__container .box__body .body__action .action__btn {
    padding: calc(var(--fsize) * 0.25) calc(var(--fsize) * 1);
    position: relative;
    border: 1px solid var(--color-gray-light);
    box-sizing: border-box;
    border-radius: var(--border-radius-sm);
    margin: 0 calc(var(--fsize) * 0.5);
}

#wrapper-template-select .box__container .box__body,
#wrapper-jobs-select .box__container .box__body,
#wrapper-folder-move .box__container .box__body,
#wrapper-folder .box__container .box__body,
#wrapper-invite-edit .box__container .box__body,
#wrapper-edit .box__container .box__body,
#wrapper-msg .box__container .box__body,
.box__wrapper__select .box__container .box__body {
    --side: 20px;
    --con-h: calc(var(--fsize) * 1.5 * 8);
    width: calc(var(--fsize) * 35);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-sl);
    overflow: hidden;
    border: 1px solid var(--color-gray-light);
    box-sizing: border-box;
    background: #fff;

    padding: var(--side) 0;
}

#wrapper-template-select .box__container .box__body,
#wrapper-jobs-select .box__container .box__body,
#wrapper-folder-move .box__container .box__body,
#wrapper-folder .box__container .box__body,
#wrapper-invite-edit .box__container .box__body,
#wrapper-edit .box__container .box__body,
#wrapper-msg .box__container .box__body {
    width: calc(var(--fsize) * 25);
    height: initial;
    padding: calc(var(--side) * 1) 0 calc(var(--side) * 1.5) 0;
}

#wrapper-msg .box__container .box__body {
    padding: calc(var(--side) * 1.5) 0 calc(var(--side) * 2) 0;
}

/* #wrapper-folder .box__container .box__body, */
#wrapper-invite-edit .box__container .box__body,
#wrapper-edit .box__container .box__body,
#wrapper-msg.is-main .box__container .box__body {
    width: max(min(85%, 600px), calc(var(--fsize) * 25));
}

/* #wrapper-template-select .box__container .box__body,
#wrapper-jobs-select .box__container .box__body, */
#wrapper-folder-move .box__container .box__body,
#wrapper-folder .box__container .box__body {
    width: max(min(85%, 500px), calc(var(--fsize) * 25));
}

#wrapper-template-select .box__container .box__body,
#wrapper-jobs-select .box__container .box__body {
    width: max(min(85%, 400px), calc(var(--fsize) * 25));
}


#wrapper-template-select .box__container .box__body .body__title,
#wrapper-jobs-select .box__container .box__body .body__title,
#wrapper-folder-move .box__container .box__body .body__title,
#wrapper-folder .box__container .box__body .body__title,
#wrapper-invite-edit .box__container .box__body .body__info,
#wrapper-invite-edit .box__container .box__body .body__title,
#wrapper-edit .box__container .box__body .body__title,
#wrapper-msg .box__container .box__body .body__title,
.box__wrapper__select .box__container .box__body .body__title {
    /* padding: 0 calc(var(--fsize) * 1.5); */
    padding: 0 calc(var(--fsize) * 2);
    display: flex;
    justify-content: center;
    align-items: center;
}

#wrapper-template-select .box__container .box__body .body__title,
#wrapper-jobs-select .box__container .box__body .body__title,
#wrapper-folder-move .box__container .box__body .body__title {
    justify-content: space-between;
    padding: 0 calc(var(--side) * 1.5 + var(--side) * 1.5);
}

#wrapper-folder-move .box__container .box__body .body__title .title__add {
    position: relative;
    display: flex;

    /* padding: calc(var(--fsize) * 0.35) calc(var(--fsize) * 2); */
    padding: calc(var(--fsize) * 0.3) calc(var(--fsize) * 1.5);
    border-radius: var(--border-radius-sm);
    outline: 1px solid var(--color-purple);
    justify-content: center;
}

#wrapper-invite-edit .box__container .box__body .body__title,
#wrapper-edit .box__container .box__body .body__title {
    justify-content: flex-start;
}

#wrapper-invite-edit .box__container .box__body .body__info {
    justify-content: flex-start;
    align-items: center;
    margin-top: calc(var(--fsize));
}

#wrapper-invite-edit .box__container .box__body .body__info .info__photo {
    position: relative;
    width: 75px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    margin-right: calc(var(--fsize));

    border: 1px solid var(--color-gray-light3);
    box-sizing: border-box;
}

#wrapper-invite-edit .box__container .box__body .body__info .info__con {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

#wrapper-invite-edit .box__container .box__body .body__info .info__con .con__name {
    font-size: calc(var(--fsize) * 1.2);
    font-weight: 500;
    /* margin-bottom: calc(var(--fsize) * 0.75); */
}

#wrapper-invite-edit .box__container .box__body .body__info .info__con .con__data {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: calc(var(--fsize) * 0.9);
}

#wrapper-invite-edit .box__container .box__body .body__info .info__con .con__data .data__item {
    position: relative;
    background-color: var(--color-aqua);
    border-radius: var(--border-radius-ll);
    padding:  calc(var(--fsize) * 0.25) calc(var(--fsize) * 1);
}

#wrapper-invite-edit .box__container .box__body .body__info .info__con .con__data .data__item {
    margin: calc(var(--fsize) * 0.5) calc(var(--fsize) * 0.35) 0 0;
}


#wrapper-template-select .box__container .box__body .body__title > p,
#wrapper-jobs-select .box__container .box__body .body__title > p,
#wrapper-folder-move .box__container .box__body .body__title > p,
#wrapper-folder .box__container .box__body .body__title > p,
#wrapper-invite-edit .box__container .box__body .body__title > p,
#wrapper-edit .box__container .box__body .body__title > p,
#wrapper-msg .box__container .box__body .body__title > p {
    font-weight: 500;
}

.box__wrapper__select .box__container .box__body .body__title .btn__cross {
    position: absolute;
    right: calc(var(--fsize) * 1.5);
    display: flex;
}

#wrapper-template-select .box__container .box__body .body__cross,
#wrapper-jobs-select .box__container .box__body .body__cross,
#wrapper-folder-move .box__container .box__body .body__cross,
#wrapper-folder .box__container .box__body .body__cross,
#wrapper-invite-edit .box__container .box__body .body__cross,
#wrapper-edit .box__container .box__body .body__cross,
#wrapper-msg .box__container .box__body .body__cross {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 calc(var(--fsize) * 1.5);
}

#wrapper-template-select .box__container .box__body .body__cross .btn__cross,
#wrapper-jobs-select .box__container .box__body .body__cross .btn__cross,
#wrapper-folder-move .box__container .box__body .body__cross .btn__cross,
#wrapper-folder .box__container .box__body .body__cross .btn__cross,
#wrapper-invite-edit .box__container .box__body .body__cross .btn__cross,
#wrapper-edit .box__container .box__body .body__cross .btn__cross,
#wrapper-msg .box__container .box__body .body__cross .btn__cross {
    position: relative;
}

#wrapper-template-select .box__container .box__body .body__cross .btn__cross > img,
#wrapper-jobs-select .box__container .box__body .body__cross .btn__cross > img,
#wrapper-folder-move .box__container .box__body .body__cross .btn__cross > img,
#wrapper-folder .box__container .box__body .body__cross .btn__cross > img,
#wrapper-invite-edit .box__container .box__body .body__cross .btn__cross > img,
#wrapper-edit .box__container .box__body .body__cross .btn__cross > img,
#wrapper-msg .box__container .box__body .body__cross .btn__cross > img {
    margin: 0;
}

.box__wrapper__select .box__container .box__body .body__title .btn__cross > img {
    margin: 0;
}

.box__wrapper__select .box__container .box__body .body__selected {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 calc(var(--fsize) * 1.5);
    margin-top: calc(var(--fsize) * 0.5);
}

.box__wrapper__select .box__container .box__body .body__selected .selected__action {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.box__wrapper__select .box__container .box__body .body__selected .selected__action .action__status > p > span {
    font-weight: 500;
}

.box__wrapper__select .box__container .box__body .body__selected .selected__action .action__toggle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box__wrapper__select .box__container .box__body .body__selected .selected__action .action__toggle > img {
    height: calc(var(--fsize) * 0.75);
    width: auto;
    margin-left: calc(var(--fsize) * 0.5);
}

.box__wrapper__select .box__container .box__body .body__selected .selected__action .action__toggle::before {
    content: "展開已選項目";
    position: relative;
    display: flex;
}

.box__wrapper__select .box__container .box__body .body__selected .selected__action .action__toggle.is-toggled::before {
    content: "收合已選項目";
}

.box__wrapper__select .box__container .box__body .body__selected .selected__action .action__toggle.is-toggled > img {
    transform: scaleY(-1);
}

.box__wrapper__select .box__container .box__body .body__selected .selected__list {
    position: relative;
    margin-top: calc(var(--fsize) * 0.5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    /* min-height: calc(var(--fsize) * 3.5); */
}

.box__wrapper__select .box__container .box__body .body__selected .selected__list .list__item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;

    background-color: var(--color-gray-light4);
    border-radius: var(--border-radius-ll);

    border: 1px solid var(--color-gray-light3);
    box-sizing: border-box;
    
    padding: calc(var(--fsize) * 0.3) calc(var(--fsize) * 1.5);
    margin: calc(var(--fsize) * 0.25) calc(var(--fsize) * 0.4) calc(var(--fsize) * 0.25) 0;
}

/* action__btn */
.box__wrapper__select .box__container .box__body .body__selected .selected__list .action__btn {
    min-height: calc(var(--fsize) * 3.5);
    display: flex;
    align-items: center;
}

.box__wrapper__select .box__container .box__body .body__selected .selected__list .action__btn .btn__filtered__clear {
    color: var(--color-gray-dark);
}

.box__wrapper__select .box__container .box__body .body__selected .selected__list .action__btn .btn__filtered__clear > img {
    filter: initial;
}

.box__wrapper__select .box__container .box__body .body__con {
    flex: 1;
    margin-top: calc(var(--fsize) * 0.5);

    position: relative;
    display: flex;
    overflow: auto;

    border-top: 1px solid var(--color-gray-light3);
    border-bottom: 1px solid var(--color-gray-light3);
    box-sizing: border-box;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts {
    flex: 1;
    position: relative;
    width: 100%;
    height: var(--con-h);
    overflow: auto;

    display: flex;
    flex-direction: column;

    border-right: 1px solid var(--color-gray-light3);
    box-sizing: border-box;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data {
    position: relative;
    width: 50%;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item,
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label {
    position: relative;
    width: 100%;
    padding: calc(var(--fsize) * 0.45) calc(var(--fsize) * 1.5);
    
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:rgba(70, 238, 208, 0.25);
    opacity: 0;
    z-index: 1;
}

/* .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:rgba(70, 238, 208, 0.25);
    opacity: 1;
    z-index: 0;
    display: flex;
} */

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label.is-actived::before {
    opacity: 1;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label > p {
    position: relative;
    z-index: 2;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label > p::before {
    --csize: calc(var(--fsize) * 1.2);
    content: attr(data-num);
    position: absolute;
    width: var(--csize);
    height: var(--csize);
    background-color: var(--color-purple);
    border-radius: 100%;
    
    color: #fff;
    font-size: calc(var(--fsize) * 0.75);
    font-family: var(--font-barlow);

    display: none;
    justify-content: center;
    align-items: center;

    top: 50%;
    right: calc(var(--fsize) * 1);
    transform: translate(0%, -50%);
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label > p.is-show::before {
    display: flex;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label > p::after {
    content: "";
    position: absolute;
    width: calc(var(--fsize) * 0.4);
    aspect-ratio: 8/14;
    right: 0;
    top: 50%;
    background: url(../images/common/arrow-icon-right.svg) no-repeat;
    background-position: center;
    background-size: 100%;
    transform: translate(0, -50%);
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts .parts__list {
    position: relative;
    display: none;
    z-index: 3;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list {
    position: relative;
    width: 100%;
    height: var(--con-h);
    display: none;
    flex-direction: column;
    overflow: auto;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list.is-show {
    display: flex;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts label .parts__list .list__item > label,
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item > label {
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    /* width: fit-content; */
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts label .parts__list .list__item > label {
    margin: calc(var(--fsize) * 0.5) 0;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts label .parts__list .list__item > label::before,
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item > label::before {
    --size: calc(max(var(--fsize), 16px) * 1);
    content: '';
    position: relative;
    width: var(--size);
    height: var(--size);
    top: 0;
    left: 0;

    border: 1px solid;
    box-sizing: border-box;
    display: inline-block;

    border-radius: var(--border-radius-ss2);
    margin-right: calc(var(--fsize) * 0.5);
    border-color: var(--color-gray-light);

    background-color: #fff;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts label .parts__list .list__item > label::after,
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item > label::after {
    --border-w: 2px;
    content: '';
    position: absolute;
    top: calc(50% - var(--fsize) * 0.4);
    left: 6px;
    width: 4px;
    height: 9px;

    border: solid #fff;
    border-width: 0 var(--border-w) var(--border-w) 0;
    transform: rotate(45deg);
    opacity: 0;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts label .parts__list .list__item > label.is-actived::before,
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item > label.is-actived::before {
    border-color: var(--color-purple);
    background-color: var(--color-purple);
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts label .parts__list .list__item > label.is-actived::after,
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item > label.is-actived::after {
    opacity: 1;
}

/* select__radio 右邊單選 */
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts label .parts__list .list__item > label.select__radio::before,
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item > label.select__radio::before {
    border-radius: 50%
}


.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts label .parts__list .list__item > label.select__radio::after,
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item > label.select__radio::after {
    --size: calc(max(var(--fsize), 16px));
    --ssize: calc(var(--size) * 0.55);
    top: 50%;
    left: calc((var(--size) - var(--ssize)) * 0.5);
    width: var(--ssize);
    height: var(--ssize);

    border-radius: 50%;
    border: none;
    transform: rotate(0) translate(0%, -50%);
    background-color: var(--color-purple);
    opacity: 0;
}


.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts label .parts__list .list__item > label.select__radio.is-actived::before,
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item > label.select__radio.is-actived::before {
    border-color: var(--color-purple);
    background-color: #fff;
}

.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts label .parts__list .list__item > label.select__radio.is-actived::after,
.box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list .list__item > label.select__radio.is-actived::after {
    opacity: 1;
}

#wrapper-template-select .box__container .box__body .body__btn,
#wrapper-jobs-select .box__container .box__body .body__btn,
#wrapper-folder-move .box__container .box__body .body__btn,
#wrapper-folder .box__container .box__body .body__btn,
#wrapper-invite-edit .box__container .box__body .body__btn,
#wrapper-edit .box__container .box__body .body__btn,
#wrapper-msg .box__container .box__body .body__btn,
.box__wrapper__select .box__container .box__body .body__btn {
    margin-top: var(--side);
    display: flex;
    justify-content: center;
    align-items: center;
}

.box__wrapper__select .box__container .box__body .body__btn .btn__ok {
    width: 40%;
}

#wrapper-template-select .box__container .box__body .body__btn .btn__cancel,
#wrapper-template-select .box__container .box__body .body__btn .btn__ok,
#wrapper-jobs-select .box__container .box__body .body__btn .btn__cancel,
#wrapper-jobs-select .box__container .box__body .body__btn .btn__ok,
#wrapper-folder-move .box__container .box__body .body__btn .btn__cancel,
#wrapper-folder-move .box__container .box__body .body__btn .btn__ok,
#wrapper-folder .box__container .box__body .body__btn .btn__cancel,
#wrapper-folder .box__container .box__body .body__btn .btn__ok,
#wrapper-invite-edit .box__container .box__body .body__btn .btn__cancel,
#wrapper-invite-edit .box__container .box__body .body__btn .btn__ok,
#wrapper-edit .box__container .box__body .body__btn .btn__cancel,
#wrapper-edit .box__container .box__body .body__btn .btn__ok,
#wrapper-msg .box__container .box__body .body__btn .btn__cancel,
#wrapper-msg .box__container .box__body .body__btn .btn__ok {
    width: min(36%, 115px);
}

#wrapper-template-select .box__container .box__body .body__btn .btn__cancel,
#wrapper-jobs-select .box__container .box__body .body__btn .btn__cancel,
#wrapper-folder-move .box__container .box__body .body__btn .btn__cancel,
#wrapper-folder .box__container .box__body .body__btn .btn__cancel,
#wrapper-invite-edit .box__container .box__body .body__btn .btn__cancel,
#wrapper-edit .box__container .box__body .body__btn .btn__cancel,
#wrapper-msg .box__container .box__body .body__btn .btn__cancel {
    margin-right: calc(var(--fsize));
}

#wrapper-template-select .box__container .box__body .body__btn,
#wrapper-jobs-select .box__container .box__body .body__btn,
#wrapper-folder-move .box__container .box__body .body__btn,
#wrapper-folder .box__container .box__body .body__btn {
    margin-top: calc(var(--fsize) * 2.5);
}

#wrapper-template-select .box__container .box__body .body__btn,
#wrapper-jobs-select .box__container .box__body .body__btn,
#wrapper-folder-move .box__container .box__body .body__btn {
    margin-top:0
}

#wrapper-invite-edit .box__container .box__body .body__btn,
#wrapper-edit .box__container .box__body .body__btn,
#wrapper-msg .box__container .box__body .body__btn {
    /* margin-top: calc(var(--fsize) * 1.5); */
    margin-top: calc(var(--fsize) * 2);
}

#wrapper-template-select .box__container .box__body .body__form,
#wrapper-jobs-select .box__container .box__body .body__form,
#wrapper-folder-move .box__container .box__body .body__form,
#wrapper-folder .box__container .box__body .body__form,
#wrapper-invite-edit .box__container .box__body .body__form,
#wrapper-edit .box__container .box__body .body__form,
#wrapper-msg .box__container .box__body .body__msg {
    /* padding: 0 calc(var(--fsize) * 1.5); */
    padding: 0 calc(var(--fsize) * 2);
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: calc(var(--fsize) * 1);
}

#wrapper-template-select .box__container .box__body .body__form,
#wrapper-jobs-select .box__container .box__body .body__form,
#wrapper-folder-move .box__container .box__body .body__form {
    margin: calc(var(--fsize) * 1) 0;
}

#wrapper-msg .box__container .box__body .body__msg.is-empty {
    margin-top: 0;
}

#wrapper-template-select .box__container .box__body .body__form,
#wrapper-jobs-select .box__container .box__body .body__form,
#wrapper-folder-move .box__container .box__body .body__form,
#wrapper-folder .box__container .box__body .body__form,
#wrapper-invite-edit .box__container .box__body .body__form,
#wrapper-edit .box__container .box__body .body__form {
    justify-content: flex-start;
}

#wrapper-template-select .box__container .box__body .body__form,
#wrapper-jobs-select .box__container .box__body .body__form,
#wrapper-folder-move .box__container .box__body .body__form {
    border-top: 1px solid var(--color-gray-light3);
    border-bottom: 1px solid var(--color-gray-light3);

    /* padding: var(--side) calc(var(--side) * 1.5 + var(--side) * 1.5); */
    padding: var(--side) 0;
}

#wrapper-template-select .box__container .box__body .body__form .form__con,
#wrapper-jobs-select .box__container .box__body .body__form .form__con,
#wrapper-folder-move .box__container .box__body .body__form .form__con,
#wrapper-folder .box__container .box__body .body__form .form__con,
#wrapper-invite-edit .box__container .box__body .body__form .form__con,
#wrapper-edit .box__container .box__body .body__form .form__con {
    position: relative;
    width: 100%;
}

#wrapper-template-select .box__container .box__body .body__form .form__con,
#wrapper-jobs-select .box__container .box__body .body__form .form__con,
#wrapper-folder-move .box__container .box__body .body__form .form__con,
#wrapper-folder .box__container .box__body .body__form .form__con {
    display: flex;
    justify-content: center;
}

#wrapper-template-select .box__container .box__body .body__form .form__con,
#wrapper-jobs-select .box__container .box__body .body__form .form__con,
#wrapper-folder-move .box__container .box__body .body__form .form__con {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__list,
#wrapper-template-select .box__container .box__body .body__form .form__con .con__list .list__input,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list .list__input,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list .list__input {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__list,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list {
    height: min(max(30dvh, calc(var(--fsize) * 8)), calc(var(--fsize) * 14));
    overflow: auto;
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__list .list__input,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list .list__input,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list .list__input {
    pointer-events: auto;
    padding: 0 calc(var(--side) * 1.5 + var(--side) * 1.5);
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__label,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__label,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__label {
    padding: 0 calc(var(--side) * 1.5 + var(--side) * 1.5);
    margin-bottom: calc(var(--fsize) * 1);
}

#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single label.is-not-work {
    pointer-events: none;
    opacity: 0.5;
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label {
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    --size: calc(max(var(--fsize), 16px) * 1);
    display: flex;
    align-items: center;
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label > span,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label > span,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label > span {
    flex: 1;
    margin-left: calc(var(--fsize) * 0.5);
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label:not(:first-child),
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label:not(:first-child),
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label:not(:first-child) {
    margin-top: calc(var(--fsize))
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label::before,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label::before,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label::before {
    content: '';
    position: relative;
    width: var(--size);
    height: var(--size);
    top: 0;
    left: 0;
    border: 1px solid;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 100%;
    border-color: var(--color-gray-light);
    background-color: #fff;
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label::after,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label::after,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label::after {
    content: '';
    position: absolute;
    width: calc(var(--size) * 0.5);
    height: calc(var(--size) * 0.5);
    /* top: calc(var(--size) * 0.5); */
    left: calc(var(--size) * 0.25);
    background-color: var(--color-purple);
    border-radius: 100%;
    opacity: 0;
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label.is-actived::before,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label.is-actived::before,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label.is-actived::before {
    border-color: var(--color-purple);
}

#wrapper-template-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label.is-actived::after,
#wrapper-jobs-select .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label.is-actived::after,
#wrapper-folder-move .box__container .box__body .body__form .form__con .con__list .list__input.for-single > label.is-actived::after {
    opacity: 1;
}

/* #wrapper-folder-move .box__container .box__body .body__form .form__con .con__item, */
#wrapper-folder .box__container .box__body .body__form .form__con .con__item {
    width: 80%;
    min-width: 280px;
    /* position: relative;
    display: flex;
    justify-content: center; */
}

/* #wrapper-folder .box__container .box__body .body__form .form__con .con__item .item__input {
    width: 80%;
    min-width: 280px;
} */

#wrapper-invite-edit .box__container .box__body .body__form .form__con {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item {
    width: 100%;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-template,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-template {
    width: 30%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-template .item__label,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-template .item__label {
    margin-right: calc(var(--fsize) * 0.5);
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save {
    margin-left: 5%;
    width: 65%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save {
    margin-left: calc(var(--fsize) * 1.5);
    width: 50%;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save .item__label,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save .item__label {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save .item__label > label,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save .item__label > label {
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    --size: calc(max(var(--fsize), 16px) * 1);
    display: flex;
    align-items: center;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save .item__label > label > span,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save .item__label > label > span {
    margin-left: calc(var(--fsize) * 0.25);
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save .item__label > label::before,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save .item__label > label::before {
    content: '';
    position: relative;
    width: var(--size);
    height: var(--size);
    top: 0;
    left: 0;
    border: 1px solid;
    box-sizing: border-box;
    display: inline-block;
    border-radius: var(--border-radius-ss2);
    border-color: var(--color-gray-light);
    background-color: #fff;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save .item__label > label::after,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save .item__label > label::after {
    --border-w: 2px;
    content: '';
    position: absolute;
    top: calc(50% - var(--fsize) * 0.4);
    left: 6px;
    width: 4px;
    height: 9px;
    border-radius: initial;
    border: solid #fff;
    border-width: 0 var(--border-w) var(--border-w) 0;
    transform: rotate(45deg);
    opacity: 0;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save .item__label > label.is-actived::after,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save .item__label > label.is-actived::after {
    opacity: 1;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save .item__label > label.is-actived::before,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save .item__label > label.is-actived::before {
    background-color: var(--color-purple);
}




.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save .item__input,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save .item__input {
    margin-left: calc(var(--fsize) * 0.5);
}


.list__panel[data-item-type='dialog'] .panel__form .form__con .con__action,
.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item:not(:first-child),
#wrapper-folder .box__container .box__body .body__form .form__con .con__item:not(:first-child),
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item:not(:first-child),
#wrapper-edit .box__container .box__body .body__form .form__con .con__item:not(:first-child) {
    margin-top: calc(var(--fsize) * 0.75);
}

#wrapper-folder .box__container .box__body .body__form .form__con .con__item .item__input,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item .item__input,
#wrapper-edit .box__container .box__body .body__form .form__con .con__item .item__input {
    margin-top: calc(var(--fsize) * 0.25);
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item .item__input,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item .item__input {
    flex: 1;
    width: 100%;
    pointer-events: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item .item__input .input__frame,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item .item__input .input__frame {
    padding: 10px 20px;
    position: relative;
    width: 100%;
    min-height: var(--input-h);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: 1px solid var(--color-gray);
    box-sizing: border-box;
    border-radius: var(--border-radius-sm);
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item .item__input .input__frame .frame__action,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item .item__input .input__frame .frame__action {
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    display: flex;
    z-index: 0;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item .item__input .input__frame .frame__action .action__select,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item .item__input .input__frame .frame__action .action__select {
    /* padding: 0px 15px 0 15px; */
    padding: 0px 20px;
    position: relative;
    width: 100%;
    height: var(--input-h);
    display: flex;
    /* justify-content: flex-end; */
    justify-content: space-between;
    align-items: center;
    /* color: var(--color-gray-light); */
    font-size: calc(var(--fsize) * 0.9);
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-template .item__input .input__frame .frame__action .action__select,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-template .item__input .input__frame .frame__action .action__select {
    padding: 0px 10px;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item .item__input .input__frame .frame__action .action__select > img,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item .item__input .input__frame .frame__action .action__select > img {
    width: 10px;
}

.list__panel[data-item-type='dialog'] .panel__form .form__con .con__item .item__input .input__frame .frame__selected,
#wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item .item__input .input__frame .frame__selected {
    /* padding: 0px 15px; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#wrapper-msg .box__container .box__body .body__msg .msg__con {
    position: relative;
    /* width: 85%; */
    width: 88%;
    text-align: center;
}

#wrapper-msg.is-min .box__container .box__body {
    width: calc(var(--fsize) * 15);
}

#wrapper-msg.is-left .box__container .box__body .body__msg .msg__con {
    text-align: left;
}

#wrapper-msg.is-processing .box__container .box__body .body__btn,
#wrapper-msg.is-min .box__container .box__body .body__btn {
    display: none;
}
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
@media screen and (min-width:320px) {
    #wrapper-invite-edit .box__container .box__body .body__info .info__photo {
        width: 80px;
    }

    .list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-template,
    #wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-template {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save,
    #wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save {
        margin-left: 0;
        width: 100%;
    }


    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list,
    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts {
        /* height: calc(100dvh - var(--side) * 3 - var(--fsize) * 6); */
        height: initial;
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts .parts__list {
        margin-top: calc(var(--fsize) * 0.5);
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label .parts__list.is-mobile .list__item {
        display: flex;
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data.is-pc {
        display: none;
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label {
        margin-bottom: calc(var(--fsize) * 0.1);
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label::before {
        opacity: 1;
        height: calc(var(--fsize) * 2.4);
    }

    /* .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label::after {
        display: flex;
    } */

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label > p::after {
        transform: translate(0, -50%) rotate(90deg);
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label.is-toggled > p::after {
        transform: translate(0, -50%) rotate(270deg);
    }

    .box__wrapper__select .box__container .box__body {
        height: 100%;
        border-radius: 0;
    }
}
@media screen and (min-width:360px) {}
@media screen and (min-width:390px) {}
@media screen and (min-width:414px) {}
@media screen and (min-width:500px) {}
@media screen and (min-width:600px) {
    .list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-template {
        width: 30%;
        flex-direction: row;
        align-items: center;
    }

    .list__panel[data-item-type='dialog'] .panel__form .form__con .con__item.is-save {
         margin-left: calc(var(--fsize) * 1.5);
        width: 50%;
    }
}

@media screen and (min-width:1024px) {
    #wrapper-invite-edit .box__container .box__body .body__info .info__photo {
        width: 75px;
    }

    #wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-template {
        width: 30%;
        flex-direction: row;
        align-items: center;
    }

    #wrapper-invite-edit .box__container .box__body .body__form .form__con .con__item.is-save {
        margin-left: 5%;
        width: 65%;
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data .data__list,
    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts {
        height: var(--con-h);
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts .parts__list {
        margin-top: calc(var(--fsize) * 0);
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label .parts__list.is-mobile .list__item {
        display: none;
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__data.is-pc {
        display: flex;
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label {
        margin-bottom: 0;
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label::before {
        opacity: 0;
        height: 100%;
    }

    /* .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label::after {
        display: none;
    } */

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label > p::after {
        transform: translate(0, -50%) rotate(0deg);
    }

    .box__wrapper__select .box__container .box__body .body__con .con__wrap .wrap__parts > label.is-toggled > p::after {
        transform: translate(0, -50%) rotate(0deg);
    }

    .box__wrapper__select .box__container .box__body {
        height: initial;
        border-radius: var(--border-radius-m2);
    }

}
@media screen and (min-width:1280px) {

}
@media screen and (min-width:1366px) {}
@media screen and (min-width: 1440px) {}
@media screen and (min-width: 1680px) {}
@media screen and (min-width: 1920px) {}
@media screen and (min-width: 2560px) {}