
.history-header-wrap { position: fixed; z-index: 50; top: 0; left: 50%; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1024px; height: 60px; transform: translateX(-50%); background: #fff; }
.history-header-wrap .btn-back { position: absolute; top: 0; left: 4px; height: 60px; padding: 0 17px; background: transparent; border: none; }
.history-header-wrap .btn-dot { position: absolute; top: 10px; right: 0; height: 60px; padding: 0 20px; background: transparent; border: none; }

.payment-history-detail-header-wrap { position: fixed; z-index: 50; top: 0; left: 50%; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1024px; height: 60px; transform: translateX(-50%); }
.payment-history-detail-header-wrap .btn-back { position: absolute; top: 0; left: 4px; height: 60px; padding: 0 17px; background: transparent; border: none; }

.history-btn-light-gray {
    color: #fff;
    border: 1px solid #F2F3F5;
    background: #F2F3F5;
}

.history-btn-dark-gray-4F4F4F {
    color: #fff;
    border: 1px solid #4F4F4F;
    background: #4F4F4F;
}

.fz-13 {
    font-size: 13px !important;
}

.fz-17 {
    font-size: 17px !important;
}

.fz-21 {
    font-size: 21px !important;
}

.fz-22 {
    font-size: 22px !important;
}

.fz-24 {
    font-size: 24px !important;
}

.fz-25 {
    font-size: 25px !important;
}

.fz-28 {
    font-size: 28px !important;
}

.fz-30 {
    font-size: 30px !important;
}


/* 배달비, 결제내역 부분 */
/*.history-main-pay-tab { border-bottom: 1px solid #ddd; height: 32px; }*/
/*.history-main-pay-tab a { line-height: 30px; padding:0 15px; font-size: 19px; color: #C4C4C4;}*/
/*.history-main-pay-tab a.active { position: relative; font-weight: bold; color: #2358a0; }*/
/*.history-main-pay-tab a.active::after { content: ''; position: absolute; left: 0; bottom: -20px; width: 100%; height: 4px; background: #2358a0; }*/

.history-main-pay-tab div { line-height: 27px; padding:0 15px; font-size: 18px; color: #C4C4C4;}
.history-main-pay-tab div.active { position: relative; color: #2358a0; }
.history-main-pay-tab div.active::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: #2358a0; }

.quick-history-tab div { line-height: 27px; padding:0 15px; font-size: 18px; color: #C4C4C4;}
.quick-history-tab div.active { position: relative; color: #4F4F4F; }
.quick-history-tab div.active::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: #4F4F4F; }

.paying-btn { border: 1px solid #C4C4C4 !important; background-color: #C4C4C4 !important; color: white; font-size: 15px; border-radius: 20px; padding: 3px 10px 3px 10px; }
.paying-reject-btn { border: 1px solid #FF4545 !important; background-color: #FF4545 !important; color: white; font-size: 15px; border-radius: 20px; padding: 3px 10px 3px 10px; }
.all-amount-radius { width: 100%; display: block; border-radius: 10px; }
.payment-history-section:first-child { padding : 20px 20px 15px; }
.payment-history-section:not(:first-child) { padding : 0px 20px 15px; }

/* 납입중, 납입내역 부분 */
.history-pay-tab { border-bottom: 1px solid #ddd; height: 32px; }
.history-pay-tab a { line-height: 30px; padding:0px 15px; font-size: 17px; color: #B8B8B8;}
.history-pay-tab a.active { position: relative; font-weight: bold; color: #4F4F4F; }
.history-pay-tab a.active::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 100%; height: 2px; background: #4F4F4F; }
.screening-gray-btn {
    border: 1px solid #F4F4F7; background-color: #F4F4F7; border-radius: 20px; padding: 3px 10px 3px 10px; font-size: 13px; margin-left: auto;
}
.screening-red-btn {
    border: 1px solid #FF4545; background-color: #FF4545; color: white; border-radius: 20px; padding: 3px 10px 3px 10px; font-size: 13px; margin-left: auto;
}


/* 결제내역 부분 */
.history-pay-tab { border-bottom: 1px solid #C4C4C4; height: 32px; }
.history-pay-tab a { line-height: 30px; padding:0px 15px; font-size: 16px; color: #C4C4C4;}
.history-pay-tab a.active-payment-status { position: relative; font-weight: 700; color: #2358a0; }
.history-pay-tab a.active-payment-status::after { content: ''; position: absolute; left: 0; bottom: -15px; width: 100%; height: 2px; background: #2358a0; }
.history-pay-tab-new { position: relative;}
.history-pay-tab-new::after { position: absolute; content: ''; right: 5px; width: 6px; height: 6px; border-radius: 50px; background: #FF4141; }


/* HistoryMonthSelect Popup */
.history-select-popup-list { padding-top: 30px; position: absolute; left: 0; bottom: 0; z-index: 5; width: 100%; height: 60%; background: #fff; border-radius: 20px 20px 0 0;  }
.history-select-popup-list > h5 { line-height: 25px; height: 60px; font-size: 16px; font-weight: 400; text-align: center; padding-bottom: 30px;}
.history-select-popup-list > div > ul { overflow: auto; height: 100%; width: 100%; text-align: center; }
.history-select-popup-list > div > ul > li:not(:first-child) { margin-top: 50px; }
.history-select-popup-list > div > ul > li:last-child { margin-bottom: 50px; }

.fee-tit {
    font-size: 17px;
    text-align: end;
}
.fee-tit > em {
    font-size: 14px;
}

.fee-body {
    font-size: 14px;
    color: #ADB6BD;
}

.top-box-tit {
    font-size: 18px;
    color: #4F4F4F !important;
}

.top-box2 {
    position: relative; padding: 15px 20px; width: 100%;
}

.white-box-br-10 {
    background: #fff;
    border-radius: 10px;
}

.white-box-br-10 .p-box {
    padding: 10px 15px;
}

.white-box-br-10 .p-box .search-history {
   margin-top: 10px;
}

.white-box-br-10 .p-box .search-history em {
    font-size: 14px;
    color: #4F4F4F;
}

.white-box-br-10 .p-box .search-history span {
    font-size: 14px;
    color: #808080;
}

.white-box-br-15 {
    background: #fff;
    border-radius: 15px;
    padding: 21px 15px;
}

.active-costType {
    color: #fff;
    border: 1px solid #2358a0;
    background: #2358a0;
}

.not-active-costType {
    color: #A09E9E;
    border: 1px solid #fff;
    background: #fff;
}

.active-paymentType {
    color: #fff;
    border: 1px solid #2358a0;
    background: #2358a0;
}

.not-active-paymentType {
    color: #A09E9E;
    border: 1px solid #DDDDDD;
    background: #fff;
}

.active-selectedMonth {
    color: #2358a0;
    font-weight: 500;
    font-size: 24px;
}

.not-active-selectedMonth {
    color: #A09E9E;
    font-weight: 400;
    font-size: 21px;
}

.btn-gray-4F4F4F {
    color: #fff;
    border: 1px solid #4F4F4F;
    background: #4F4F4F;
}

.btn-gray-E8E8E8 {
    color: #808080;
    border: 1px solid #E8E8E8;
    background: #E8E8E8;
}

.color-blue-5064AF {
    color: #5064AF;
}

.color-gray-F4F4F7 {
    color: #F4F4F7;
}

.color-gray-4F4F4F {
    color: #4F4F4F;
}

.color-gray-A09E9E {
    color: #A09E9E;
}

.color-gray-C4C4C4 {
    color: #C4C4C4;
}

.color-gray-BBB5B5 {
    color: #BBB5B5;
}

.bg-gray-F4F4F7 {
    background-color: #F4F4F7;
}

.bg-gray-4F4F4F {
    background-color: #4F4F4F;
}

.bg-gray-C4C4C4 {
    background-color: #C4C4C4;
}

.bg-gray-E8E8E8 {
    background-color: #E8E8E8;
}

.bg-red-FF4545 {
    background-color: #FF4545;
}


/* requestCancelSuccess */
.check_pink_image {
    width: 55px !important;
}

.check_pink_tit {
    color: #4F4F4F !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

.check_pink_body {
    color: #4F4F4F !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 0px !important;
}

button.pay-btn2:first-child {
    border-radius: 50px;
    padding: 0px 5px;
    line-height: 30px;
    width: 65px;
    height: 35px;
    word-break: keep-all;
    margin-right: 20px;
}

button.pay-btn2:not(:first-child) {
    border-radius: 50px;
    padding: 0px 5px;
    line-height: 30px;
    width: 65px;
    height: 35px;
    word-break: keep-all;
    margin-left: 5px;
}

button.pay-btn3 {
    border-radius: 50px;
    padding: 0px 5px;
    line-height: 30px;
    width: 75px;
    height: 35px;
    word-break: keep-all;
}

/* paymentHistoryDetail */
.payment-detail-tit {
    color: #4F4F4F;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
}

.payment-detail-tit:not(:first-child) {
    color: #4F4F4F;
    margin-top: 25px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
}

.payment-detail-body-tit {
    color: #A09E9E;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 400;
}

.payment-detail-body-content {
    color: #4F4F4F;
    font-size: 15px;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 15px;
}

.payment-done-tit {
    color: #5D8BE1 !important;
    font-weight: 700 !important;
}

.payment-cancel-tit {
    color: #F42F2F !important;
    font-weight: 700 !important;
}

.cancel-popup {
    color: #4F4F4F;
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 10px;
}

/* PaymentHistoryDetail */
.pg-detail-top-box {
    position: relative;
    width: 100%;
    padding: 5px 25px 20px;
}

.pg-detail {
    position: relative;
    width: 100%;
    padding: 20px 25px !important;
}

.pg-detail h5 {
    color: #4F4F4F;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 400;
}

.pg-detail .pg-detail-title {
    color: #A09E9E;
    font-size: 15px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 10px;
}

.pg-detail .pg-detail-contents {
    color: #4F4F4F;
    font-size: 15px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 10px;
}

/* paymentSMSHistoryDetail */
.payment-SMS-detail-top-box {
    border: 1px solid #DDDDDD;
    background-color: #FAFAFA;
    border-radius: 5px;
    padding: 20px 15px;
}

.payment-SMS-detail-tit {
    color: #808080;
    font-size: 16px;
    font-weight: 400;
}

.payment-SMS-detail-body {
    color: #4F4F4F;
    font-size: 16px;
    font-weight: 500;
}

.search-box {
    border-radius: 5px;
    background: #F3F4F6;
    width: 100%;
    height: 50px;
    border: 1px solid #F3F4F6;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 500;
    color: #4F4F4F;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ChargeSalesHistory */
/*.sales-history-all-section:first-child { padding : 25px 20px 0px; }*/
/*.sales-history-all-section:not(:first-child) { padding : 10px 20px 0px; }*/
/*.sales-history-all-section:last-child { padding : 15px 20px; }*/
.sales-history-all-section { padding : 10px 20px; }

.sales-history-paying-section:first-child { padding: 20px 20px 0px; }
.sales-history-paying-section:not(first-child) { padding: 15px 20px 0px; }
.sales-history-paying-section:last-child { padding: 15px 20px; }

.sales-history-not-paying-section:first-child { padding: 11px 20px 0px; }
.sales-history-not-paying-section:not(first-child) { padding: 16px 20px 0px; }
.sales-history-not-paying-section:last-child {padding: 16px 20px; }