html:after {
    content: "";
    background-image:
        url('/-/media/Images/ZurichLife/unitprice/checkbox-selected-focused.svg'),
        url('/-/media/Images/ZurichLife/unitprice/checkbox-selected-hovered.svg'),
        url('/-/media/Images/ZurichLife/unitprice/checkbox-selected-inactive.svg'),
        url('/-/media/Images/ZurichLife/unitprice/checkbox-unselected-focused.svg'),
        url('/-/media/Images/ZurichLife/unitprice/checkbox-unselected-hovered.svg'),
        url('/-/media/Images/ZurichLife/unitprice/checkbox-unselected-inactive.svg'),
        url('/-/media/Images/ZurichLife/unitprice/question-enabled-icon.svg'),
        url('/-/media/Images/ZurichLife/unitprice/question-hoverd-icon.svg'),
        url('/-/media/Images/ZurichLife/unitprice/close-enabled-icon.svg'),
        url('/-/media/Images/ZurichLife/unitprice/close-hoverd-icon.svg'),
        url('/-/media/Images/ZurichLife/unitprice/refresh-Hovered.svg');
}

body.theme-desktop {
    overflow-x: auto !important;
}

.adj-w-26 {
    width: 26% !important;
}

.adj-w-33 {
    width: 33% !important;
}

.adj-w-34 {
    width: 34% !important;
}

.adj-w-44 {
    width: 44% !important;
}

.sp-only-show,
.pc-only-show {
    display: none;
}

.error-message {
    color: red !important;
}

.table-btn-icon {
    width: 16px;
    height: 16px;
    background-image: url('/-/media/Images/ZurichLife/unitprice/question-enabled-icon.svg');
    background-size: cover;
    vertical-align: sub;
}

@media (hover: hover) {
    .table-btn-icon:hover {
        background-image: url('/-/media/Images/ZurichLife/unitprice/question-hoverd-icon.svg');
    }
}

.table-btn-icon:focus-visible {
    opacity: var(--opacity-default);
    color: var(--color-white);
    outline: -webkit-focus-ring-color auto 1px !important;
    background-image: url('/-/media/Images/ZurichLife/unitprice/question-hoverd-icon.svg');
}

.table-btn-icon:active,
.table-btn-icon.pressed {
    outline: none !important;
    background-image: url('/-/media/Images/ZurichLife/unitprice/question-hoverd-icon.svg');
}

.condition-input-section {
    background-color: rgba(31, 177, 230, 0.1);
    overflow: hidden;
}

.dropdown-menu:focus-visible {
    outline: unset !important;
}

.arrow-down-icon {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.yearMonth-selection-icon {
    width: 16px;
    height: 16px;
}

.prevent-safari-touch {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.period-selection-pullDown-menu li:last-child,
.specialAccount-selection-pullDown-menu li:last-child,
.yearMonth-selection-pullDown-menu li:last-child {
    padding-bottom: 8px;
}

.specialAccount-selection-pullDown-item-input {
    opacity: 0 !important;
    width: 24px;
    height: 24px;
    margin: 8px 5px 8px 10px !important;
}

.checkbox-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    pointer-events: none;
    margin: 8px 5px 8px 10px !important;
}

ul li input[type="checkbox"]:not(:checked)+.checkbox-icon {
    background-size: cover;
    background-image: url('/-/media/Images/ZurichLife/unitprice/checkbox-unselected-inactive.svg');
}

ul li input[type="checkbox"]:checked+.checkbox-icon {
    background-size: cover;
    background-image: url('/-/media/Images/ZurichLife/unitprice/checkbox-selected-inactive.svg');
}

@media (hover: hover) {

    ul li input[type="checkbox"]:not(:checked):hover+.checkbox-icon {
        background-size: cover;
        background-image: url('/-/media/Images/ZurichLife/unitprice/checkbox-unselected-hovered.svg');
    }

    ul li input[type="checkbox"]:checked:hover+.checkbox-icon {
        background-size: cover;
        background-image: url('/-/media/Images/ZurichLife/unitprice/checkbox-selected-hovered.svg');
    }
}

ul li input[type="checkbox"]:not(:checked):focus+.checkbox-icon {
    background-size: cover;
    background-image: url('/-/media/Images/ZurichLife/unitprice/checkbox-unselected-focused.svg');
}

ul li input[type="checkbox"]:checked:focus+.checkbox-icon {
    background-size: cover;
    background-image: url('/-/media/Images/ZurichLife/unitprice/checkbox-selected-focused.svg');
}

.yearMonth-selection-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.4px;
    text-align: left;
    color: #2167AE;
}

.yearMonth-selection-fromToHead-from {
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.4px;
    text-align: left;
    color: #2167AE;
}

.yearMonth-selection-fromToHead-to {
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.4px;
    text-align: left;
    color: #2167AE;
}

.yearMonth-selection-container {
    flex-direction: row;
    align-items: center;
    text-align: right;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    min-height: 29px;
}

.yearMonth-selection-pullDown-year,
.yearMonth-selection-pullDown-month {
    align-self: stretch;
    flex-direction: row;
    gap: 8px;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    border-radius: 0;
    outline: none;
    border: none;
    background: none;
    border-bottom: 1px solid #91bfe3;
}

@media (hover: hover) {

    .yearMonth-selection-pullDown-year:hover,
    .yearMonth-selection-pullDown-month:hover {
        border-bottom: 2px solid #2167AE;
    }
}

.yearMonth-selection-pullDown-year:focus-visible,
.yearMonth-selection-pullDown-month:focus-visible {
    border-bottom: 2px solid #2167AE;
}

.yearMonth-selection-pullDown-year:active,
.yearMonth-selection-pullDown-month:active,
.yearMonth-selection-pullDown-year.pressed,
.yearMonth-selection-pullDown-month.pressed {
    border-bottom: 2px solid #2167AE;
}

.yearMonth-selection-pullDown-text-year,
.yearMonth-selection-pullDown-text-month {
    flex: 1;
    position: relative;
    letter-spacing: 0.5px;
    line-height: 24px;
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 24px;
    align-items: center;
    font-size: 14px;
    color: #2167ae;
}

.yearMonth-selection-pullDown-menu {
    border: none;
    box-shadow: -2px 10px 10px rgba(0, 0, 0, 0.1), 2px 10px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 16px 24px;
    background-color: #ECEEEF;
    max-height: 350px;
    padding: 8px 0px;
    overflow-y: auto;
    position: absolute;
    transform: translate(0px, 0px);
    display: none;
    z-index: 1;
}

.specialAccount-selection-pullDown-menu::-webkit-scrollbar,
.yearMonth-selection-pullDown-menu::-webkit-scrollbar {
    width: 10px;
    background: #ECEEEF;
}

.specialAccount-selection-pullDown-menu::-webkit-scrollbar-track,
.yearMonth-selection-pullDown-menu::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 4px;
    margin-bottom: 4px;
}

.specialAccount-selection-pullDown-menu::-webkit-scrollbar-thumb,
.yearMonth-selection-pullDown-menu::-webkit-scrollbar-thumb {
    background: #2167AE;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
}

.yearMonth-selection-from-year ul {
    width: 85px;
}

.yearMonth-selection-from-month ul {
    width: 68px;
}

.yearMonth-selection-pullDown-item {
    display: block;
    width: 100%;
    padding: 4px 16px;
    clear: both;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    color: #23366F !important;
    font-size: 14px;
    font-weight: 400 !important;
    line-height: 24.5px;
    letter-spacing: 0.25px;
    text-align: left;
    transition: all 0s;
}

@media (hover: hover) {
    .yearMonth-selection-pullDown-item:hover {
        color: #23366F !important;
        background-color: #FFFFFF;
    }
}

.yearMonth-selection-pullDown-item:focus-visible {
    color: #23366F !important;
    background-color: #FFFFFF;
    transition: none;
    outline-color: rgb(35, 54, 111);
    outline-offset: -1px;
}

.yearMonth-selection-pullDown-item:active,
.yearMonth-selection-pullDown-item.pressed {
    color: #23366F !important;
    background-color: #FFFFFF;
}

.yearMonth-from-yearText,
.yearMonth-from-monthText {
    font-size: 14px;
    font-weight: 400;
    line-height: 24.5px;
    letter-spacing: 0.25px;
    text-align: left;
    color: #23366F;
    width: 14px;
    height: 25px;
    gap: 0px;
}

.yearMonth-connectMark {
    padding: 0px 8px;
}

.yearMonth-to-year,
.yearMonth-to-month {
    gap: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24.5px;
    letter-spacing: 0.25px;
    text-align: left;
}

.yearMonth-to-yearText,
.yearMonth-to-monthText {
    gap: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24.5px;
    letter-spacing: 0.25px;
    text-align: left;
}

.status-reset-icon {
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    text-align: right;
}

.special-account-name-td {
    display: flex;
    align-items: center;
}

.special-account-color {
    width: 12px;
    height: 12px;
    margin-right: 12px;
    padding-right: 12px;
    border-radius: 2px;
}

.m-heading-lv5__inner::before {
    display: none;
}

.content-footer {
    background-color: #E4E9EC;
    overflow: hidden;
}

.d-none {
    display: none !important;
}

.cover-div {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.dialog-div {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 1);
    z-index: 10001;
    overflow-wrap: break-word;
}

.text-end {
    text-align: right !important;
}

.dialog-close-btn {
    content: '';
    padding: 0;
    margin: 16px 16px 8px 0px;
    border: none;
    background-image: url('/-/media/Images/ZurichLife/unitprice/close-enabled-icon.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: inherit;
}

@media (hover: hover) {
    .dialog-close-btn:hover {
        background-image: url('/-/media/Images/ZurichLife/unitprice/close-hoverd-icon.svg');
    }
}

.dialog-close-btn:focus-visible {
    outline: -webkit-focus-ring-color auto 1px !important;
    background-image: url('/-/media/Images/ZurichLife/unitprice/close-hoverd-icon.svg');
}

.dialog-close-btn:active,
.dialog-close-btn.pressed {
    outline-width: 0 !important;
    background-image: url('/-/media/Images/ZurichLife/unitprice/close-hoverd-icon.svg');
}

.modal-content {
    display: flex;
    flex-direction: column;
    padding: 0px 30px 48px 30px;
}

.modal-div-bottom-border-col {
    border-bottom: 1px solid rgba(145, 191, 227, 1);
}

.modal-title-font {
    color: rgba(35, 54, 111, 1);
}

.modal-item-name-font-col {
    color: rgba(33, 103, 174, 1);
}

.modal-item-value-font-col {
    color: rgba(35, 54, 111, 1);
}

.overflow-hidden {
    overflow: hidden !important;
}

/* pc版のクラス */

.theme-desktop {

    .pc-only-show {
        display: block !important;
    }
}

.theme-desktop .l-article h1 {
  font-size: 3.6rem;
  line-height: 4.4rem;
  color: #000;
}
.theme-desktop.theme-single .l-main {

    .condition-input-area {
        margin: 32px 90px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .first-row {
        display: flex;
        gap: 32px;
        align-items: flex-start;
        min-height: 51px;
    }

    .period-selection-area {
        width: 289px;
        flex-direction: column;
        align-items: flex-start;
        display: flex;
        justify-content: flex-start;
        gap: 4px;
    }

    .period-selection-title {
        flex: 1;
        letter-spacing: 0.25px;
        line-height: 21px;
        font-weight: 600;
        position: relative;
        color: #2167ae;
        font-size: 14px;
    }

    .period-selection-icon,
    .specialAccount-selection-icon {
        width: 24px;
        height: 24px;
    }

    .period-selection-pullDown {
        align-self: stretch;
        flex-direction: row;
        gap: 8px;
        font-size: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0;
        border-radius: 0;
        outline: none;
        border: none;
        background: none;
        border-bottom: 1px solid #91bfe3;
    }

    @media (hover: hover) {
        .period-selection-pullDown:hover {
            border-bottom: 2px solid #2167AE;
        }
    }

    .period-selection-pullDown:focus-visible {
        border-bottom: 2px solid #2167AE;
    }

    .period-selection-pullDown:active,
    .period-selection-pullDown.pressed {
        border-bottom: 2px solid #2167AE;
    }

    .period-selection-pullDown-text {
        flex: 1;
        position: relative;
        letter-spacing: 0.5px;
        line-height: 24px;
        display: flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 24px;
        align-items: center;
        font-size: 16px;
        color: #2167ae;
    }

    .period-selection-area ul {
        border: none;
        box-shadow: rgba(0, 0, 0, 0.1) -2px 10px 10px, rgba(0, 0, 0, 0.1) 2px 10px 10px;
        border-radius: 0px 0px 16px 16px;
        background-color: #ECEEEF;
        width: 470px;
        max-height: 350px;
        padding: 8px 0px;
        overflow-y: auto;
        position: absolute;
        transform: translate(0px, 51px);
        display: none;
        z-index: 1;
    }

    ul li {
        list-style-position: inside;
    }

    .period-selection-pullDown-item {
        display: block;
        width: 100%;
        padding: 4px 16px;
        clear: both;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        color: #23366F !important;
        font-size: 14px;
        font-weight: 400 !important;
        line-height: 24.5px;
        letter-spacing: 0.25px;
        text-align: left;
        transition: all 0s;
    }

    @media (hover: hover) {
        .period-selection-pullDown-item:hover {
            color: #23366F !important;
            background-color: #FFFFFF;
        }
    }

    .period-selection-pullDown-item:focus-visible {
        color: #23366F !important;
        background-color: #FFFFFF;
        transition: none;
        outline-color: rgb(35, 54, 111);
        outline-offset: -1px;
    }

    .period-selection-pullDown-item:active,
    .period-selection-pullDown-item.pressed {
        color: #23366F !important;
        background-color: #FFFFFF;
    }

    .specialAccount-selection-area {
        width: 289px;
        flex-direction: column;
        align-items: flex-start;
        display: flex;
        justify-content: flex-start;
        gap: 4px;
    }

    .specialAccount-selection-title {
        flex: 1;
        letter-spacing: 0.25px;
        line-height: 21px;
        font-weight: 600;
        position: relative;
        color: #2167ae;
        font-size: 14px;
    }

    .specialAccount-selection-pullDown {
        align-self: stretch;
        flex-direction: row;
        gap: 8px;
        font-size: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0;
        border-radius: 0;
        outline: none;
        border: none;
        background: none;
        border-bottom: 1px solid #91bfe3;
    }

    @media (hover: hover) {
        .specialAccount-selection-pullDown:hover {
            border-bottom: 2px solid #2167AE;
        }
    }

    .specialAccount-selection-pullDown:focus-visible {
        border-bottom: 2px solid #2167AE;
    }

    .specialAccount-selection-pullDown:active,
    .specialAccount-selection-pullDown.pressed {
        border-bottom: 2px solid #2167AE;
    }

    .specialAccount-selection-pullDown-text {
        flex: 1;
        position: relative;
        letter-spacing: 0.5px;
        line-height: 24px;
        display: flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 24px;
        align-items: center;
        font-size: 16px;
        color: #2167ae;
    }

    .specialAccount-selection-area ul {
        border: none;
        box-shadow: rgba(0, 0, 0, 0.1) -2px 10px 10px, rgba(0, 0, 0, 0.1) 2px 10px 10px;
        border-radius: 0px 0px 16px 16px;
        background-color: rgb(236, 238, 239);
        width: 470px;
        max-height: 350px;
        padding: 8px 0px;
        overflow-y: auto;
        position: absolute;
        transform: translate(0px, 51px);
        display: none;
        z-index: 1;
    }

    .specialAccount-selection-area ul li {
        height: 40px;
        display: flex;
        align-items: center;
    }

    .specialAccount-selection-pullDown-item-label {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.5px;
        text-align: left;
        color: #23366F;
        width: 240px;
        height: 24px;
    }

    .function-button-area {
        flex-direction: row;
        align-items: center;
        text-align: right;
        display: flex;
        justify-content: flex-start;
        gap: 32px;
    }

    .status-reset-button {
        gap: 4px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 0;
        outline: none;
        border: none;
        background: none;
        padding: 0px;
        max-width: 141.75px;
    }

    @media (hover: hover) {
        .status-reset-button:hover {
            outline-width: 0;
        }

        .status-reset-button:hover .status-reset-font {
            color: #5495CF;
        }

        .status-reset-button:hover .status-reset-icon {
            content: url('/-/media/Images/ZurichLife/unitprice/refresh-Hovered.svg');
        }
    }

    .status-reset-button:focus-visible {
        outline: -webkit-focus-ring-color auto 1px !important;
    }

    .status-reset-button:focus-visible .status-reset-font {
        color: #5495CF;
    }

    .status-reset-button:focus-visible .status-reset-icon {
        content: url('/-/media/Images/ZurichLife/unitprice/refresh-Hovered.svg');
    }

    .status-reset-button:active,
    .status-reset-button.pressed {
        outline-width: 0 !important;
    }

    .status-reset-button:active .status-reset-font {
        color: #5495CF;
    }

    .status-reset-button:active .status-reset-icon {
        content: url('/-/media/Images/ZurichLife/unitprice/refresh-Hovered.svg');
    }

    .status-reset-font {
        color: #2167ae;
        position: relative;
        letter-spacing: 0.25px;
        line-height: 24.5px;
        text-align: right;
        vertical-align: middle;
        font-size: 14px;
    }

    .graph-reflect-button {
        overflow: hidden;
        border-radius: 0;
        outline: none;
        border: none;
        background: none;
        max-width: 170px;
        margin-top: 6px;
        margin-bottom: 6px;
        margin-left: 12px;
        margin-right: 12px;
    }

    @media (hover: hover) {

        .graph-reflect-button:hover .graph-reflect-container {
            background-color: #5495CF;
        }
    }

    .graph-reflect-button:focus-visible {
        outline: -webkit-focus-ring-color auto 1px !important;
        border-radius: 28px;
    }

    .graph-reflect-button:focus-visible .graph-reflect-container {
        background-color: #5495CF;
    }

    .graph-reflect-button:active .graph-reflect-container,
    .graph-reflect-button.pressed .graph-reflect-container {
        background-color: #5495CF;
    }

    .graph-reflect-container {
        border-radius: 28px;
        background-color: #2167ae;
        align-items: center;
        padding: 8px 16px;
        gap: 8px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        vertical-align: middle;
    }

    .graph-reflect-font {
        position: relative;
        letter-spacing: 0.25px;
        line-height: 24.5px;
        text-align: center;
        color: #fff;
        vertical-align: middle;
        font-size: 14px;
    }

    .yearMonth-selection-fromToHead-to {
        padding-left: 156px;
    }

    .content-footer {
        padding-bottom: 40px;
    }

    .dialog-close-btn {
        width: 24px;
        height: 24px;
    }

    .modal-title-div {
        padding: 0px 24px 8px 24px;
    }

    .modal-item-div {
        padding: 16px 14px 16px 24px;
    }

    .modal-title-font {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.5px;
        text-align: left;
    }

    .modal-item-font {
        font-size: 14px;
        font-weight: 400;
        line-height: 24.5px;
        letter-spacing: 0.25px;
        text-align: left;
    }

    .status-reset-button:disabled .status-reset-font {
        opacity: 0.65;
        color: #2167ae;
    }

    .status-reset-button:disabled .status-reset-icon {
        opacity: 0.65;
        content: unset;
    }

    .graph-reflect-button:disabled .graph-reflect-container {
        opacity: 0.65;
        background-color: #2167ae;
    }
}

/* sp版のクラス */
.theme-mobile {

    @media (min-width: 768px) {

        .l-breadNav {
            width: 1250px;
            margin: 50px auto;
            padding: 0 25px;
        }

        .dialog-close-btn {
            width: 24px;
            height: 24px;
        }

        .modal-title-div {
            padding: 0px 24px 8px 24px;
        }

        .modal-item-div {
            padding: 16px 14px 16px 24px;
        }

        .modal-title-font {
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            letter-spacing: 0.5px;
            text-align: left;
        }

        .modal-item-font {
            font-size: 14px;
            font-weight: 400;
            line-height: 24.5px;
            letter-spacing: 0.25px;
            text-align: left;
        }
    }

    @media (max-width: 767px) {

        .dialog-close-btn {
            width: 20px;
            height: 20px;
        }

        .modal-title-div {
            padding: 0px 0px 8px 0px;
        }

        .modal-item-div {
            padding: 8px 14px 8px 16px;
        }

        .modal-title-font {
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            letter-spacing: 0.25px;
            text-align: left;
        }

        .modal-item-font {
            font-size: 12px;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: 0.4px;
            text-align: left;
        }
    }

    .sp-only-show {
        display: block !important;
    }

}

.theme-mobile.theme-multi .l-main {

    .yearMonth-selection-container {
        min-height: 28px;
    }

    @media (min-width: 768px) {

        .fxb-container {
            width: 100%;
            max-width: 1250px;
            padding: 0 25px;
            margin: 0 auto;
        }

        .fxb-row {
            margin: 0 -25px;
            overflow: hidden;
        }

        .fxb-col-12 {
            padding: 0 25px;
            margin: 0;
        }

        h1 {
            margin: 0;
            padding: 10px 0;
            color: #000;
            background-color: #FFF;
        }

        h4 {
            padding: 0 0 0 16px;
        }

        h4:before {
            height: 24px;
            top: -2px;
            left: 0;
        }

        .condition-input-area {
            margin: 32px 90px;
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .first-row {
            display: flex;
            gap: 32px;
            align-items: flex-start;
            min-height: 51px;
        }

        .period-selection-area {
            width: 289px;
            min-width: 289px;
            flex-direction: column;
            align-items: flex-start;
            display: flex;
            justify-content: flex-start;
            gap: 4px;
        }

        .period-selection-title {
            flex: 1;
            letter-spacing: 0.25px;
            line-height: 21px;
            font-weight: 600;
            position: relative;
            color: #2167ae;
            font-size: 14px;
        }

        .period-selection-icon,
        .specialAccount-selection-icon {
            width: 24px;
            height: 24px;
        }

        .period-selection-pullDown {
            align-self: stretch;
            flex-direction: row;
            gap: 8px;
            font-size: 16px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0;
            border-radius: 0;
            outline: none;
            border: none;
            background: none;
            border-bottom: 1px solid #91bfe3;
        }

        @media (hover: hover) {
            .period-selection-pullDown:hover {
                border-bottom: 2px solid #2167AE;
            }
        }

        .period-selection-pullDown:focus-visible {
            border-bottom: 2px solid #2167AE;
        }

        .period-selection-pullDown:active,
        .period-selection-pullDown.pressed {
            border-bottom: 2px solid #2167AE;
        }

        .period-selection-pullDown-text {
            flex: 1;
            position: relative;
            letter-spacing: 0.5px;
            line-height: 24px;
            display: flex;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 24px;
            align-items: center;
            font-size: 16px;
            color: #2167ae;
        }

        .period-selection-area ul {
            border: none;
            box-shadow: rgba(0, 0, 0, 0.1) -2px 10px 10px, rgba(0, 0, 0, 0.1) 2px 10px 10px;
            border-radius: 0px 0px 16px 16px;
            background-color: #ECEEEF;
            width: 470px;
            max-height: 350px;
            padding: 8px 0px;
            overflow-y: auto;
            position: absolute;
            transform: translate(0px, 51px);
            display: none;
            z-index: 1;
        }

        ul li {
            list-style-position: inside;
        }

        .period-selection-pullDown-item {
            display: block;
            width: 100%;
            padding: 4px 16px;
            clear: both;
            text-decoration: none;
            white-space: nowrap;
            background-color: transparent;
            border: 0;
            color: #23366F !important;
            font-size: 14px;
            font-weight: 400 !important;
            line-height: 24.5px;
            letter-spacing: 0.25px;
            text-align: left;
            transition: all 0s;
        }

        @media (hover: hover) {
            .period-selection-pullDown-item:hover {
                color: #23366F !important;
                background-color: #FFFFFF;
            }
        }

        .period-selection-pullDown-item:focus-visible {
            color: #23366F !important;
            background-color: #FFFFFF;
            transition: none;
            outline-color: rgb(35, 54, 111);
            outline-offset: -1px;
        }

        .period-selection-pullDown-item:active,
        .period-selection-pullDown-item.pressed {
            color: #23366F !important;
            background-color: #FFFFFF;
        }

        .specialAccount-selection-area {
            width: 289px;
            min-width: 289px;
            flex-direction: column;
            align-items: flex-start;
            display: flex;
            justify-content: flex-start;
            gap: 4px;
        }

        .specialAccount-selection-title {
            flex: 1;
            letter-spacing: 0.25px;
            line-height: 21px;
            font-weight: 600;
            position: relative;
            color: #2167ae;
            font-size: 14px;
        }

        .specialAccount-selection-pullDown {
            align-self: stretch;
            flex-direction: row;
            gap: 8px;
            font-size: 16px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0;
            border-radius: 0;
            outline: none;
            border: none;
            background: none;
            border-bottom: 1px solid #91bfe3;
        }

        @media (hover: hover) {
            .specialAccount-selection-pullDown:hover {
                border-bottom: 2px solid #2167AE;
            }
        }

        .specialAccount-selection-pullDown:focus-visible {
            border-bottom: 2px solid #2167AE;
        }

        .specialAccount-selection-pullDown:active,
        .specialAccount-selection-pullDown.pressed {
            border-bottom: 2px solid #2167AE;
        }

        .specialAccount-selection-pullDown-text {
            flex: 1;
            position: relative;
            letter-spacing: 0.5px;
            line-height: 24px;
            display: flex;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 24px;
            align-items: center;
            font-size: 16px;
            color: #2167ae;
        }

        .specialAccount-selection-area ul {
            border: none;
            box-shadow: rgba(0, 0, 0, 0.1) -2px 10px 10px, rgba(0, 0, 0, 0.1) 2px 10px 10px;
            border-radius: 0px 0px 16px 16px;
            background-color: rgb(236, 238, 239);
            width: 470px;
            max-height: 350px;
            padding: 8px 0px;
            overflow-y: auto;
            position: absolute;
            transform: translate(0px, 51px);
            display: none;
            z-index: 1;
        }

        .specialAccount-selection-area ul li {
            height: 40px;
            display: flex;
            align-items: center;
        }

        .specialAccount-selection-pullDown-item-label {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            letter-spacing: 0.5px;
            text-align: left;
            color: #23366F;
            width: 240px;
            height: 24px;
        }

        .function-button-area {
            flex-direction: row;
            align-items: center;
            text-align: right;
            display: flex;
            justify-content: flex-start;
            gap: 32px;
        }

        .status-reset-button {
            gap: 4px;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            align-items: center;
            border-radius: 0;
            outline: none;
            border: none;
            background: none;
            padding: 0px;
            max-width: 141.75px;
        }

        @media (hover: hover) {
            .status-reset-button:hover {
                outline-width: 0;
            }

            .status-reset-button:hover .status-reset-font {
                color: #5495CF;
            }

            .status-reset-button:hover .status-reset-icon {
                content: url('/-/media/Images/ZurichLife/unitprice/refresh-Hovered.svg');
            }
        }

        .status-reset-button:focus-visible {
            outline: -webkit-focus-ring-color auto 1px !important;
        }

        .status-reset-button:focus-visible .status-reset-font {
            color: #5495CF;
        }

        .status-reset-button:focus-visible .status-reset-icon {
            content: url('/-/media/Images/ZurichLife/unitprice/refresh-Hovered.svg');
        }

        .status-reset-button:active,
        .status-reset-button.pressed {
            outline-width: 0 !important;
        }

        .status-reset-button:active .status-reset-font {
            color: #5495CF;
        }

        .status-reset-button:active .status-reset-icon {
            content: url('/-/media/Images/ZurichLife/unitprice/refresh-Hovered.svg');
        }

        .status-reset-font {
            color: #2167ae;
            position: relative;
            letter-spacing: 0.25px;
            line-height: 24.5px;
            text-align: right;
            vertical-align: middle;
            font-size: 14px;
        }

        .graph-reflect-button {
            overflow: hidden;
            border-radius: 0;
            outline: none;
            border: none;
            background: none;
            max-width: 170px;
            margin-top: 6px;
            margin-bottom: 6px;
            margin-left: 12px;
            margin-right: 12px;
        }

        @media (hover: hover) {

            .graph-reflect-button:hover .graph-reflect-container {
                background-color: #5495CF;
            }
        }

        .graph-reflect-button:focus-visible {
            outline: -webkit-focus-ring-color auto 1px !important;
            border-radius: 28px;
        }

        .graph-reflect-button:focus-visible .graph-reflect-container {
            background-color: #5495CF;
        }

        .graph-reflect-button:active .graph-reflect-container,
        .graph-reflect-button.pressed .graph-reflect-container {
            background-color: #5495CF;
        }

        .graph-reflect-container {
            border-radius: 28px;
            background-color: #2167ae;
            align-items: center;
            padding: 8px 16px;
            gap: 8px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            vertical-align: middle;
        }

        .graph-reflect-font {
            position: relative;
            letter-spacing: 0.25px;
            line-height: 24.5px;
            text-align: center;
            color: #fff;
            vertical-align: middle;
            font-size: 14px;
        }

        .yearMonth-selection-fromToHead-to {
            padding-left: 156px;
        }

        .content-footer {
            padding-bottom: 40px;
        }

        .status-reset-button:disabled .status-reset-font {
            opacity: 0.65;
            color: #2167ae;
        }

        .status-reset-button:disabled .status-reset-icon {
            opacity: 0.65;
            content: unset;
        }

        .graph-reflect-button:disabled .graph-reflect-container {
            opacity: 0.65;
            background-color: #2167ae;
        }
    }

    @media (max-width: 767px) {

        .condition-input-area {
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding: 16px 0px;
        }

        .first-row {
            display: flex;
            gap: 32px;
            align-items: flex-start;
            min-height: 46px;
        }

        .period-selection-area {
            width: 289px;
            flex-direction: column;
            align-items: flex-start;
            display: flex;
            justify-content: flex-start;
            gap: 2px;
        }

        .period-selection-title {
            flex: 1;
            letter-spacing: 0.4px;
            line-height: 18px;
            font-weight: 600;
            position: relative;
            color: #2167ae;
            font-size: 12px;
        }

        .period-selection-icon,
        .specialAccount-selection-icon {
            width: 16px;
            height: 16px;
        }

        .period-selection-pullDown {
            align-self: stretch;
            flex-direction: row;
            gap: 8px;
            font-size: 16px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0;
            border-radius: 0;
            outline: none;
            border: none;
            background: none;
            border-bottom: 1px solid #91bfe3;
        }

        @media (hover: hover) {
            .period-selection-pullDown:hover {
                border-bottom: 2px solid #2167AE;
            }
        }

        .period-selection-pullDown:focus-visible {
            border-bottom: 2px solid #2167AE;
        }

        .period-selection-pullDown:active,
        .period-selection-pullDown.pressed {
            border-bottom: 2px solid #2167AE;
        }

        .period-selection-pullDown-text {
            flex: 1;
            position: relative;
            display: flex;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 24px;
            align-items: center;
            font-size: 14px;
            color: #2167ae;
            font-size: 14px;
            font-weight: 400;
            line-height: 24.5px;
            letter-spacing: 0.25px;
            text-align: left;
        }

        .period-selection-area ul {
            border: none;
            box-shadow: -2px 10px 10px rgba(0, 0, 0, 0.1), 2px 10px 10px rgba(0, 0, 0, 0.1);
            border-radius: 0px 0px 16px 16px;
            background-color: #ECEEEF;
            width: 337px;
            padding: 8px 0px;
            overflow-y: auto;
            position: absolute;
            transform: translate(0px, 45px);
            display: none;
            z-index: 1;
        }

        ul li {
            list-style-position: inside;
        }

        .period-selection-pullDown-item {
            display: block;
            width: 100%;
            padding: 4px 16px;
            clear: both;
            text-decoration: none;
            white-space: nowrap;
            background-color: transparent;
            border: 0;
            color: #23366F !important;
            font-size: 14px;
            font-weight: 400 !important;
            line-height: 24.5px;
            letter-spacing: 0.25px;
            text-align: left;
            transition: all 0s;
        }

        @media (hover: hover) {
            .period-selection-pullDown-item:hover {
                color: #23366F !important;
                background-color: #FFFFFF;
            }
        }

        .period-selection-pullDown-item:focus-visible {
            color: #23366F !important;
            background-color: #FFFFFF;
            transition: none;
            outline-color: rgb(35, 54, 111);
            outline-offset: -1px;
        }

        .period-selection-pullDown-item:active,
        .period-selection-pullDown-item.pressed {
            color: #23366F !important;
            background-color: #FFFFFF;
        }

        .specialAccount-selection-area {
            width: 289px;
            flex-direction: column;
            align-items: flex-start;
            display: flex;
            justify-content: flex-start;
            gap: 2px;
            min-height: 46px;
        }

        .specialAccount-selection-title {
            flex: 1;
            letter-spacing: 0.4px;
            line-height: 18px;
            font-weight: 600;
            position: relative;
            color: #2167ae;
            font-size: 12px;
        }

        .specialAccount-selection-pullDown {
            align-self: stretch;
            flex-direction: row;
            gap: 8px;
            font-size: 16px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0;
            border-radius: 0;
            outline: none;
            border: none;
            background: none;
            border-bottom: 1px solid #91bfe3;
        }

        @media (hover: hover) {
            .specialAccount-selection-pullDown:hover {
                border-bottom: 2px solid #2167AE;
            }
        }

        .specialAccount-selection-pullDown:focus-visible {
            border-bottom: 2px solid #2167AE;
        }

        .specialAccount-selection-pullDown:active,
        .specialAccount-selection-pullDown.pressed {
            border-bottom: 2px solid #2167AE;
        }

        .specialAccount-selection-pullDown-text {
            flex: 1;
            position: relative;
            letter-spacing: 0.25px;
            line-height: 24.5px;
            display: flex;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 24px;
            align-items: center;
            font-size: 14px;
            color: #2167ae;
        }

        .specialAccount-selection-area ul {
            border: none;
            box-shadow: rgba(0, 0, 0, 0.1) -2px 10px 10px, rgba(0, 0, 0, 0.1) 2px 10px 10px;
            border-radius: 0px 0px 16px 16px;
            background-color: rgb(236, 238, 239);
            width: 90%;
            max-height: 350px;
            overflow-y: auto;
            position: absolute;
            transform: translate(0px, 45px);
            display: none;
            z-index: 1;
            padding: 8px 0px;
        }

        .specialAccount-selection-area ul li {
            height: 40px;
            display: flex;
            align-items: center;
        }

        .specialAccount-selection-pullDown-item-label {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            letter-spacing: 0.5px;
            text-align: left;
            color: #23366F;
            width: 240px;
            height: 24px;
        }

        .function-button-area {
            width: 289px;
            flex-direction: row;
            align-items: center;
            text-align: right;
            display: flex;
            justify-content: flex-start;
            gap: 16px;
        }

        .status-reset-button {
            gap: 4px;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            align-items: center;
            border-radius: 0;
            outline: none;
            border: none;
            background: none;
            padding: 0px;
            max-width: 141.75px;
        }

        @media (hover: hover) {
            .status-reset-button:hover {
                outline-width: 0;
            }

            .status-reset-button:hover .status-reset-font {
                color: #5495CF;
            }

            .status-reset-button:hover .status-reset-icon {
                content: url('/-/media/Images/ZurichLife/unitprice/refresh-Hovered.svg');
            }
        }

        .status-reset-button:focus-visible {
            outline: -webkit-focus-ring-color auto 1px !important;
        }

        .status-reset-button:focus-visible .status-reset-font {
            color: #5495CF;
        }

        .status-reset-button:focus-visible .status-reset-icon {
            content: url('/-/media/Images/ZurichLife/unitprice/refresh-Hovered.svg');
        }

        .status-reset-button:active,
        .status-reset-button.pressed {
            outline-width: 0 !important;
        }

        .status-reset-button:active .status-reset-font {
            color: #5495CF;
        }

        .status-reset-button:active .status-reset-icon {
            content: url('/-/media/Images/ZurichLife/unitprice/refresh-Hovered.svg');
        }

        .status-reset-font {
            color: #2167ae;
            position: relative;
            letter-spacing: 0.4px;
            line-height: 21px;
            text-align: right;
            vertical-align: middle;
            font-size: 12px;
            font-weight: 400;
        }

        .graph-reflect-button {
            justify-content: center;
            gap: 4px;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            align-items: center;
            border-radius: 0;
            outline: none;
            border: none;
            background: none;
            max-width: 170px;
            margin-top: 6px;
            margin-bottom: 6px;
            margin-left: 12px;
            margin-right: 12px;
        }

        @media (hover: hover) {

            .graph-reflect-button:hover .graph-reflect-container {
                background-color: #5495CF;
            }
        }

        .graph-reflect-button:focus-visible {
            outline: -webkit-focus-ring-color auto 1px !important;
            border-radius: 28px;
        }

        .graph-reflect-button:focus-visible .graph-reflect-container {
            background-color: #5495CF;
        }

        .graph-reflect-button:active .graph-reflect-container,
        .graph-reflect-button.pressed .graph-reflect-container {
            background-color: #5495CF;
        }

        .graph-reflect-container {
            border-radius: 28px;
            background-color: #2167ae;
            align-items: center;
            padding: 8px 16px;
            gap: 8px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            vertical-align: middle;
        }

        .graph-reflect-font {
            position: relative;
            letter-spacing: 0.4px;
            line-height: 21px;
            text-align: center;
            color: #fff;
            vertical-align: middle;
            font-size: 12px;
            font-weight: 400;
        }

        .yearMonth-selection-title,
        .yearMonth-selection-fromToHead-from,
        .yearMonth-selection-fromToHead-to {
            font-size: 10px;
        }

        .yearMonth-selection-fromToHead-to {
            padding-left: 158px;
        }

        .yearMonth-selection-container {
            font-size: 12px;
        }

        .yearMonth-from-yearText,
        .yearMonth-from-monthText {
            font-size: 12px;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: 0.4px;
            text-align: left;
        }

        .yearMonth-to-year,
        .yearMonth-to-month {
            font-size: 12px;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: 0.4px;
            text-align: left;
        }

        .yearMonth-to-yearText,
        .yearMonth-to-monthText {
            font-size: 12px;
            font-weight: 400;
            line-height: 18px;
            letter-spacing: 0.4px;
        }

        .yearMonth-selection-pullDown-text-year,
        .yearMonth-selection-pullDown-text-month {
            font-size: 12px;
            font-weight: 400;
            line-height: 21px;
            letter-spacing: 0.4px;
            text-align: left;
        }

        .content-footer {
            padding: 16px 0px;
        }

        .content-footer .m-list-bullet {
            margin-top: unset;
        }

        .status-reset-button:disabled .status-reset-font {
            opacity: 0.65;
            color: #2167ae;
        }

        .status-reset-button:disabled .status-reset-icon {
            opacity: 0.65;
            content: unset;
        }

        .graph-reflect-button:disabled .graph-reflect-container {
            opacity: 0.65;
            background-color: #2167ae;
        }
    }
}

@media (min-width: 768px) and (min-height: 668px) {

    .dialog-div {
        width: 610px;
        height: 667px;
        border-radius: 24px;
    }

}

@media (min-width: 768px) and (max-height: 667px) {

    .dialog-div {
        height: 90%;
    }

}

@media (max-width: 767px) {

    .dialog-div {
        width: 100%;
        height: 100%;
    }

}

@media (max-width: 369px){

    #unit_price_table th:nth-child(2),
    #unit_price_table td:nth-child(2) {
        padding-left: 0.4em;
        padding-right: 0.4em;
    }

    #fluctuation_rate_table th:nth-child(1),
    #fluctuation_rate_table td:nth-child(1) {
        padding-left: 0.1em;
        padding-right: 0.1em;
    }

    #fluctuation_rate_table th:nth-child(2),
    #fluctuation_rate_table td:nth-child(2) {
        padding-left: 0.2em;
        padding-right: 0.2em;
    }

    #fluctuation_rate_table th:nth-child(3),
    #fluctuation_rate_table td:nth-child(3) {
        padding-left: 0.2em;
        padding-right: 0.2em;
    }
}