#publish_approvalTopArea {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 32px;
    width: 100%;
}

.header-block__left {
    display: flex;
    align-items: center;

    h3 {
        font-family: Pretendard, sans-serif;
        font-size: 1rem;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: -0.02em;
        color: var(--color-text-bold);
        padding-right: 24px;
    }
}

.header-block__subtab {
    display: flex;
    align-items: center;

    &.none {
        display: none !important;
    }

    &::before {
        content: '';
        display: flex;
        width: 2px;
        height: 20px;
        background: var(--color-divider-light);
    }
}

.header-block__subtab-list {
    display: flex;
    align-items: center;
    margin-left: 24px;
}

.header-block__subtab-item {
    font-family: Pretendard, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 150%;
    letter-spacing: -0.2px;
    color: var(--color-text-disabled);

    &.tab_active {
        color: var(--color-text);
        text-decoration: underline;
        text-decoration-color: var(--color-divider-primary);
        text-underline-position: under;
        text-decoration-thickness: 2px;
    }

    & + & {
        margin-left: 20px;
    }
}

.header-block__right {
    display: flex;
    align-items: center;
}

.header-block__search-form {
    position: relative;
    display: flex;
}

.header-block__input {
    display: flex;
    align-items: center;
    padding: 7px 12px 7px 16px;
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    font-family: Pretendard, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 150%;
    letter-spacing: -0.2px;
    width: 321px;

    input {
        border: none;
        margin: 0 8px;
        width: 100%;

        &::placeholder {
            color: var(--color-input-text-placeholder);
        }
    }

    .header-block__input-icon-box {
        display: flex;
        align-items: center;
    }

    .header-block__input-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 2px;

        img {
            width: 14px;
            height: 14px;
            object-fit: contain;
        }
    }

    .header-block__input_icon--pointer {
        cursor: pointer;
    }
}

.header-block__search-option {
    position: absolute;
    top: calc(100% + 13px);
    right: 0;
    left: 0;
    background-color: var(--color-bg-default);
    width: 100%;
    height: fit-content;
    box-shadow: 3px 3px 10px 0 rgba(31, 31, 31, 0.15);
    border-radius: 16px;
    padding: 16px 24px;
    z-index: 2;

    &.none {
        display: none !important;
    }

    dl {
        display: grid;
        grid-template-columns: 64px 1fr;
        row-gap: 8px;
        margin-bottom: 16px;
        font-family: Pretendard, sans-serif;

        dt {
            font-size: 14px;
            font-weight: normal;
            line-height: normal;
            color: var(--color-text-subtle);
            padding: 8px 0;
        }
    }
}

.header-block__search-form-item {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    row-gap: 8px;
    margin-bottom: 13px;
    font-family: Pretendard, sans-serif;
}

.header-block__search-box-label {
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    color: var(--color-text-subtle);
}

.header-block__search-box-block {}

.header-block__search-option-btn-list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-block__search-option-search-btn {
    border: none;
    padding: 8px 26px;
    background-color: var(--color-button-bg-primary-fill);
    border-radius: 8px;
    font-family: Pretendard, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    letter-spacing: -0.2px;
    color: var(--color-text-inverse);

    &:hover {
        background-color: var(--color-button-bg-primary-fill-hover);
    }
}

.header-block__search-option-cancel-btn {
    border: none;
    padding: 8px 26px;
    background-color: var(--color-button-bg-secondary-fill);
    border-radius: 8px;
    font-family: Pretendard, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    letter-spacing: -0.2px;
    color: var(--color-text);
    margin-left: 8px;

    &:hover {
        background-color: var(--color-button-bg-secondary-fill-hover);
    }
}

.add_portlet_wrap {
    margin-left: 32px;
    cursor: pointer;

    ul {
        left: -150px;
        z-index: 1;
    }
}

.add_portlet_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    border-radius: 50%;
    margin-left: 16px;
}

.btn_portlet {
    border: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border-radius: 50%;
}

.btn_portlet:hover {
    background-color: var(--color-bg-subtler);
}

.btn_portlet::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    mask-image: url("../../img/svg/ic_portlet.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 20px 20px;
    background-color: var(--color-icon);
}

.header-block__filter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    margin-left: 16px;
    cursor: pointer;

    img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }
}

.split-bar {
    height: 14px;
    width: 1px;
    background-color: var(--color-divider-light);
    margin: 0 8px;
}

.option-block {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 8px 32px;
    border-bottom: 1px solid var(--color-divider-primary);
    background-color: var(--color-bg-default);
}

.option-block__left {
    display: flex;
    align-items: center;
}

.option-block__require-wrap {
    display: flex;
}

.option-block__wrap {
    position: relative;
    padding: 3px 0;
    border: none;
    height: 32px;
    box-sizing: content-box;

    .search-input {
        display: none;
        width: calc(100% - 4px);
        max-width: none;
        margin: 2px auto;
        padding: 6px 10px 6px 16px;
        height: 32px;
    }

    &.active {

        .search-input {
            display: block;
        }
    }
}

.option-block__select-box.static {
    position: static;
}

.option-block__wrap {
    position: relative;
    padding: 3px 0;
    border: none;
    height: 32px;
    box-sizing: content-box;

    .search-input {
        display: none;
        width: calc(100% - 4px);
        margin: 2px auto;
        padding: 6px 10px 6px 16px;
        height: 32px;
    }

    &.active {

        .search-input {
            display: block;
        }
    }
}

.option-block__select-box {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;
    max-width: 203px;
    min-width: 125px;
    border: 1px solid var(--color-input-border);
    border-radius: 4px;
    padding: 6px 10px 6px 16px;
    height: 32px;
    font-family: Pretendard, sans-serif;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 150%;
    letter-spacing: -0.2px;

    &.listSelectType {
        position: relative;
    }


    & + & {
        margin-left: 5px !important;
    }

    .arrow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-image: none;
        padding: 0;
        width: 100%;
        color: var(--color-input-text);

        &::after {
            content: "";
            mask: no-repeat url("../../img/svg/ic_cmm_arrow_down.svg");
            background-color: var(--color-icon);
            mask-size: contain;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 12px;
            height: 7px;
        }
    }
}

.option-block__select-box:focus-within {
    background-color: var(--color-input-surface);
    border-color: var(--color-border-primary);
}

.select_period {
    position: relative;
}

.select_period > div {
    top: calc(100% + 3px);
    box-shadow: 3px 3px 10px 0px #1F1F1F26;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    width: fit-content;
    min-width: 100%;
}

.select_period .select_list .selected label {
    color: var(--color-text-primary);
}
.select-box-list {
    top: 100% !important;
    box-shadow: 3px 3px 10px 0px #1F1F1F26;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 8px;
    width: fit-content !important;
    min-width: 100% !important;
}

.select-box__wrap {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1000;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 8px;
    overflow: auto;
    box-shadow: 3px 3px 10px 0px #1F1F1F26;
    background-color: var(--color-bg-default);

    .select-box-list {
        position: static;
        border-radius: 0;
        border: none !important;
        box-shadow: none;
    }
}

.option-block__btn-list {
    display: flex;
    gap: 4px;

    &.none {
        display: none !important;
    }
}

.option-block__btn-item {
    text-align: center;
    display: flex;
    align-items: center;
    letter-spacing: -0.2px;
    color: var(--color-text);

    &.none {
        display: none;
    }
}

.option-block__btn {
    font-family: Pretendard, sans-serif !important;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 150%;
    background-color: var(--color-button-bg-outline);
    border: 1px solid var(--color-button-border-outline);
    border-radius: 4px;
    padding: 2px 16px;

    &.btn_view_label {
        background-position: 6px -160px;
    }

    &.btn_view_label.active {
        background-position: -26px -160px;
    }
}

.option-block__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /*width: 100%;*/
    column-gap: 16px;
}

.eap-list__icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;
    user-select: auto;
    cursor: pointer;
}

.eap-list__icon-button.none {
    display: none;
}

.eap-list__icon-button:hover {
    background-color: var(--color-bg-subtler);
}

.eap-list__print-btn {
    width: 24px;
    height: 24px;
    aspect-ratio: 1;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 18px 18px;
    mask-image: url("../../img/svg/ic_cmm_print_line.svg");
    background-color: var(--color-icon-on-subtler);
}

.option-block__splitter-btn-list {
    display: flex;
    align-items: center;

    li {
        width: 40px;
        height: 40px;
        padding: 8px;
        border-radius: 50%;

        & + & {
            margin-left: 4px;
        }

        &:hover {
            background-color: var(--color-bg-subtler);
        }
    }
}

.option-block__splitter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border:none;
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 18px 14px;
    background-color: var(--color-icon);
}

.option-block__splitter-btn--reset {
    mask-image: url("../../img/svg/ic_list_default.svg");

    &.active {
        background-color: var(--color-icon-primary);
    }
}

.option-block__splitter-btn--vertical {
    mask-image: url("../../img/svg/ic_vertical_default.svg");

    &.active {
        background-color: var(--color-icon-primary);
    }
}

.option-block__splitter-btn--horizontal {
    mask-image: url("../../img/svg/ic_horizontal_default.svg");

    &.active {
        background-color: var(--color-icon-primary);
    }
}

.contents__block {
    display: flex;
    height: 100%;
}

.contents-list__splitter-wrap {
    position: relative;
}

.contents-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.contents-grid__wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.contents-grid__vertical-wrap {
    display: none;
    //flex-direction: column;
    //height: 100%;
    //overflow: hidden;
}

.vertical .contents-grid__vertical-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.contents-grid__block {
    display: grid;
    grid-template-columns: 84px minmax(700px, 1fr) 244px;
    border-bottom: 1px solid var(--color-divider-lighter);
}

.contents-grid__block--header {
    place-items: center;
    background-color: var(--color-bg-subtler);
    padding: 11px 46px 11px 0;
    min-width: 750px;
}

.contents-grid__ofc-block {
    display: grid;
    grid-template-columns: 84px minmax(500px, 1fr) 240px 244px;
    border-bottom: 1px solid var(--color-divider-lighter);
}

.contents-grid__vertical-block {
    display: grid;
    grid-template-columns: 84px minmax(720px, 1fr);
    border-bottom: 1px solid var(--color-divider-lighter);
}


.contents-grid__header-item {
    width: 100%;
    text-align: center;
    font-family: Pretendard, sans-serif;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: var(--color-text-bold);
    font-size: 1rem;
}

.contents-list__block {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.contents-grid__item-block {
    padding: 16px 32px 8px 0;
    min-width: 750px;
}

.contents-grid--center {
    justify-self: center;
    align-self: center;
}

.contents-grid__item-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 3px;
    padding-right: 60px;
    width: 100%;
}

.contents-item-info__top-block {
    display: flex;
    align-items: center;
}

.contents-item-info__title-cl {
    & + .contents-item-info__top-item::before {
        content: '';
        display: inline-block;
        height: 12px;
        width: 2px;
        background-color: var(--color-divider-light);
        border-radius: 4px;
        margin-right: 8px;
    }
}

.contents-item-info__top-item {
    display: flex;
    align-items: center;
    margin-right: 8px;
    font-family: Pretendard, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 150%;
    letter-spacing: -0.2px;
    color: var(--color-text);
}

.contents-item-info__title-cl-txt {
    display: flex;
    align-items: center;
    color: var(--color-text-primary);

    &::before {
        content: "";
        display: inline-block;
        margin-right: 6px;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: var(--color-bg-primary);
    }
}

.contents-item-info__title-block {
    display: flex;
    align-items: center;
    width: 100%;
}

.contents-item-info__badge-block {
    display: flex;
    align-items: center;
}

.contents-item-info__badge {
    padding: 0 6px;
    font-family: Pretendard, sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 150%;
    letter-spacing: -0.2px;
    border-radius: 4px;
    text-align: center;
    width: max-content;
    margin-right: 8px;

    &.emergency {
        background-color: var(--color-bg-danger);
        color: var(--color-text-inverse);
    }

    &.recall {
        background-color: var(--color-bg-warning);
        color: var(--color-text-inverse);
    }

    &.reject {
        background-color: var(--accent-gray-500);
        color: var(--color-text-inverse);
    }

    &.return {
        background-color: var(--accent-purple-900);
        color: var(--color-text-inverse);
    }

    &.receive {
        background-color: var(--accent-green-900);
        color: var(--color-text-inverse);
    }

    &.send {
        background-color: var(--accent-blue-500);
        color: var(--color-text-inverse);
    }

    &.ofc-send {
        background-color: var(--accent-blue-700);
        color: var(--color-text-inverse);
    }

    &.ofc-wait {
        background-color: var(--accent-blue-300);
        color: var(--color-text-inverse);
    }

    &.ofc-stop {
        background-color: #fff;
        border: 1px solid #FF4D4D;
        color: #FF4D4D;
    }

    &.ofc-arrive {
        background-color: var(--accent-blue-950);
        color: var(--color-text-inverse);
    }

    &.ofc-receive {
        background-color: var(--accent-orange-500);
        color: var(--color-text-inverse);
    }

    &.ofc-accept {
        background-color: var(--accent-green-900);
        color: var(--color-text-inverse);
    }

    &.ofc-all-accept,
    &.ofc-10 {
        background-color: var(--color-bg-default);
        border: 1px solid var(--accent-blue-500);
        color: var(--accent-blue-500);
    }

    &.req-resend {
        background-color: var(--accent-orange-900);
        color: var(--color-text-inverse);
    }

    &.ofc-20,
    &.ofc-30 {
        background-color: var(--color-bg-default);
        border: 1px solid var(--accent-gray-900);
        color: var(--accent-gray-900);
    }
}

.contents-item-info__title {
    position: relative;
    font-family: Pretendard, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.2px;
    color: var(--color-text);
    cursor: pointer;
    max-width: 100%;

    &:hover {
        text-decoration: underline;
        text-decoration-color: var(--color-text);
        text-underline-position: under;
    }

    &.bold {
        font-weight: 600;
    }

    > span {
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
    }
}

.contents-item-info__appr-line-block {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 6px;
    width: 100%;
    overflow: hidden;
}

.contents-item-info__appr-line {
    display: flex;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;

    &.current {
        color: var(--color-text-primary-dark);
    }
}

.contents-item-info__appr-line-txt {
    font-family: Pretendard, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.contents-item-info__appr-line--name {
    max-width: 136px;

    &.ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.content-item-info__appr-line--arrow {
    background-repeat: no-repeat;
    background-position: center;
    height: 14px;

    &.sequence {
        background-image: url('../../img/svg/ic_appr_sequence_gray.svg');
        background-size: 13px 14px;
        min-width: 13px;
    }

    &.send {
        background-image: url('../../img/svg/ic_appr_send_gray.svg');
        background-size: 10px 14px;
        min-width: 10px;
    }

    &.parallel {
        background-image: url('../../img/svg/ic_appr_parallel_gray.svg');
        background-size: 1px 14px;
        min-width: 1px;
    }
}

.ellipsis-dots {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 5px;
    background-color: var(--color-bg-default);
    display: none;

    &.visible {
        display: block;
    }

    .dot {
        display: inline-block;
        width: 2px;
        height: 2px;
        border-radius: 50%;
        background-color: var(--color-bg-disabled);
        vertical-align: bottom;
    }
}

.contents-item-info__bottom-block {
    display: flex;
    align-items: flex-start;
}
.contents-item-info__flex {
    display: flex;
}
.contents-item-info__bottom-txt {
    font-family: Pretendard, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.2px;
    color: var(--color-text-subtle);
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;

    & + & {
        margin-left: 12px;
    }

    & + &::before {
        content: '';
        margin-right: 12px;
        height: 14px;
        width: 1px;
        background-color: var(--color-divider-light);
    }

    & > span {
        & + & {
            margin-left: 8px
        }
    }
}

.contents-item-info__bottom-icon-block {
    display: flex;
    align-items: center;
    //margin-left: 16px;
    column-gap: 16px;
}

.contents-item-info__bottom-icon-item {
    display: flex;
    align-items: center;
    column-gap: 6px;
    color: var(--color-text-subtle);
    cursor: pointer;
}

.contents-item-info__bottom-icon {
    width: 20px;
    height: 20px;
    mask-position: center;
    background-color: var(--color-icon);
    mask-repeat: no-repeat;

    &.attach {
        mask-image: url("../../img/svg/attach-disable-icon.svg");
        mask-size: 13px 14px;
    }

    &.opinion {
        mask-image: url("../../img/svg/chat-disable-icon.svg");
        mask-size: 15px 15px;
    }

    &.change {
        mask-image: url("../../img/svg/settingsboard-disable-icon.svg");
        mask-size: 14px 16px;
    }

    &:hover {
        background-color: var(--color-icon);
    }
}

.contents-item-info__bottom-cnt {
    font-family: Pretendard, sans-serif;
    font-size: 0.813rem;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.2px;

    &.active {
        color: var(--color-text-danger);
    }
}

.contents-item-info__label-block {
    display: flex;
    align-items: center;
}

.contents-item-info__label {
    display: flex;
    align-items: center;
    background-color: var(--color-bg-primary-subtler);
    border: 1px solid var(--color-border-primary);
    border-radius: 4px;
    padding: 2px 2px 2px 6px;
}

.contents-item-info__label-name {
    font-family: Pretendard, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.2px;
    color: var(--color-text-primary);
    margin-right: 6px;
}

.contents-item-info__label-del-btn {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.contents-item-info__label-del-icon {
    mask-image: url("../../img/svg/ic_cmm_close.svg");
    mask-position: center;
    mask-size: 7px 7px;
    mask-repeat: no-repeat;
    background-color: var(--color-icon);
    display: block;
    width: 100%;
    height: 100%;
}

.contents-grid__task-status {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-default);
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    min-width: 60px;
    padding: 6px 0;
    font-family: Pretendard, sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 24px;
    letter-spacing: -0.2px;
    color: var(--color-text-primary);
    cursor: pointer;

    &:hover {
        background-color: #5C74D81A;
    }
}

.contents-grid__item-emp {
    display: flex;
    align-items: center;
    font-family: Pretendard, sans-serif;
    line-height: 150%;
    letter-spacing: -0.2px;
}

.contents-grid__item-emp-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    width: 44px;
    height: 44px;
    overflow: hidden;
    margin-right: 16px;
    min-width: 44px;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.contents-gird__item-emp-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.contents-grid__item-emp {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    width: fit-content;
    cursor: pointer;
}

.contents-grid__item-emp-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100px;

    &::after {
        content: attr(data-pos-name);
        position: absolute;
        left: calc(100% + 8px);
        top: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 100px;
    }
}

.contents-grid__item-inst-name {
    font-family: Pretendard, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 21px;
    letter-spacing: -0.2px;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.contents-grid__item-inst-name {
    font-family: Pretendard, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text);
}

.contents-grid__item-dept-name {
    font-family: Pretendard, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-subtle);
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    overflow: hidden;
}


.pagination__wrap {
    display: flex;
    justify-content: space-between;
    padding: 9px 32px;
    background-color: var(--color-bg-subtler);
    border: 1px solid var(--color-divider-light);
}

.pagination__left-block {
    display: flex;
    align-items: center;
}

.pagination__right-block {}

.pagination__input-block {
    display: flex;
    align-items: center;
    font-family: Pretendard, sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 24px;
    letter-spacing: -0.2px;
    color: var(--color-input-text);
}

.pagination__select-label {
    margin-right: 14px;
}

.pagination-disp-cnt__select-box {
    width: 82px;
}

.pagination.vertical {
    display: flex;
}

.pagination.vertical .this_page {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}


.sort-approval__container {
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-left: 32px;
}

.sort-approval {
    display: flex;
    position: relative;
    align-items: center;
    min-width: 152px;
    padding: 4px 0;
    font-family: Pretendard, sans-serif;
    letter-spacing: -0.2px;
}

.sort-approval__label {
    font-size: 14px;
    line-height: 1.5;
    padding-bottom: 4px;
}

.sort-approval__current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
    background-color: var(--color-bg-default);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-subtle);
    line-height: 1.4;
    border-radius: 4px;
    border: 1px solid var(--color-input-border);
    padding-left: 16px;
    padding-right: 8px;

    &.desc {

        svg {
            transform: rotate(180deg);
        }
    }

    &.active {
        font-weight: 600;
        border-color: var(--color-input-border-primary);
        color: #3F4150;

        path {
            stroke: var(--color-text-primary);
        }
    }
}

.sort-approval__options {
    display: none;
    position: absolute;
    left: 0;
    flex-direction: column;
    background-color: var(--color-bg-default);
    top: 100%;
    z-index: 1000;
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--color-border-light);
    box-shadow: 0px 2px 4px 0px #00000026;


    &.active {
        display: flex;
    }
}

.sort-approval__option {
    display: flex;
    align-items: center;
    padding: 6px 0 6px 8px;
    column-gap: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;

    a {
        color: var(--color-text-subtle);
    }


    &:hover {

        a {
            color: var(--color-text);
        }
    }

    svg {
        visibility: hidden;
    }

    &.active {

        svg {
            visibility: visible;
        }

        path {
            stroke: var(--color-text-primary);
        }

        a {
            color: var(--color-text-primary);
        }
    }

    &.desc {

        svg {
            transform: rotate(180deg);
        }
    }
}

.sort-approval__option svg {
}

.mail_list_label {
    z-index: 50;
}

.left {
    text-align: left;
}

#eapApprList_lastOrderApproval {
    margin-left: 32px;
}

#eapApprList_eapListButtonSet {
    margin-left: 16px;
    margin-right: 0;
}

#eapApprList_selectViewTypeLabel {
    margin-right: 0 !important;
}

#eapApprList_formTypeCondition {
    overflow-y: scroll;
}

.content-title-wrap {
    display: flex;
    column-gap: 5px;
    align-items: center;
    width: 100%;
}

.btn_new-window {
    text-indent: -9999px;
    flex: none;
    border: 0;
    width: 16px;
    height: 16px;
    mask-image: url(../../img/svg/ic_cmm_external-link.svg);
    mask-size: 10px 10px;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--color-icon);
}