.div-custom-menu-area {
    -webkit-animation:spin-animation 500ms;
    -moz-animation:spin-animation 500ms;
    animation:spin-animation 500ms;
    color: white;
    font-size: 10pt;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
}

#uploader-input {
    height: 27px;
    box-sizing: border-box;
    padding: 5px;
}

.s-input-btn {
    width: 70px;
    border: none;
    outline: none;
    background-color: #1e88e5 !important;
    margin: 5px;
    color: white;
    height: 30px;
    box-shadow: 4px 4px 6px 0 rgba(17, 51, 80, 0.5);
    border-radius: 3px;
    cursor: pointer;
}

@-moz-keyframes spin-animation { 0% { -moz-transform: rotateX(180deg); } 100% { -moz-transform: rotateX(360deg); } }
@-webkit-keyframes spin-animation { 0% { -webkit-transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(360deg); } }
@keyframes spin-animation { 0% { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(360deg); transform:rotateX(360deg); } }

.div-list-content .jgrid-son-content {
    background-image: linear-gradient(128deg, #393f48, #616368 51%, #393f48) !important;
}

.tz-invite-customer-btn{
    width: 150px;
    margin-top: -100px;
    height: 80px;
    cursor: pointer;
    text-align: center;
    line-height: 80px;
    color: #FFFFFF;
    border-radius: 2px;
    font-weight: bold;
}

.tz-tab-selected{
    background-color: #008ee7 !important;
    font-weight: bold;
    color: white;
}

.tz-selected-center-group{
    border: 10px solid #262c32 !important
}

.tz-table-broder{
    border-collapse: collapse;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
}

.tz-table-broder th, .tz-table-broder td {
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    min-height: 30px;
    min-width: 117px;
    max-width: 117px;
}

.table-card {
    background-color: #282c33;
    margin-top: 30px;
    margin-bottom: 30px;
    color: white;
    font-size: 10pt;
    font-family: sans-serif;
    font-weight: 300;
    width: 80%;
    max-width: 600px;
}

.table-card .table-card-head {
    text-align: center;
    height: 40px;
    border-bottom: 1px solid rgb(76, 80, 82);
    line-height: 40px;
    font-size: 12pt;
    font-weight: 600;
    color: white;
}

.table-card button {
    font-size: 14px;
    font-weight: 400;
    border: none;
    outline: none;
    background-color: transparent;
    color: white;
}

/* Browser */
@media screen and (min-width: 1100px) {
    .tz-tab{
        color: black;
        border-radius: 0px !important;
        line-height: 30px;
        width: 25%;
        cursor: pointer;
        background-color: #cccccc;
    }

    #tz-register-popup{
        width: 500px;
    }

    .tz-popup {
        width: 60%;
        left: 20%;
    }
}

/* Pad */
@media screen and (max-width: 1099px) and (min-width: 601px) {
    .tz-tab{
        color: black;
        border-radius: 0px !important;
        line-height: 30px;
        width: 40%;
        cursor: pointer;
        background-color: #cccccc;
    }

    #tz-register-popup{
        width: 500px;
    }

    .tz-popup {
        width: 70%;
        left: 15%;
    }
}


/* Phone*/
@media screen and (max-width: 600px) {
    .tz-tab{
        color: black;
        border-radius: 0px !important;
        line-height: 30px;
        width: 40%;
        cursor: pointer;
        background-color: #cccccc;
    }

    #tz-register-popup{
        width: 320px;
    }

    .tz-popup {
        width: 90%;
        left: 5%;
    }

    #tz-table-main-jattendance{
        zoom : 80%;
    }
}

.tz-popup {
    position: absolute;
    height: 80%;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    top: 10%;
    z-index: 5;
    box-sizing: border-box;
    background: #272c33;
}

.tz-popup .tz-popup-top {
    width: 100%;
    height: 50px;
}

.tz-popup .tz-popup-top h3 {
    margin-top: 10px;
    text-align: center;
    color: #ffffff;
}

.tz-popup .tz-popup-body {
    width: 100%;
    height: 85%;
    overflow: auto;
}

.tz-popup .off {
    font-size: 14pt;
    font-weight: 700;
    color: #616366;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.tz-popup .off:hover {
    color: #ff6200;
}

#tz-register-popup {
    height: auto;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 2px -2px #0E1119;
    text-align: center;
    position: relative;
}

#tz-register-popup button {
    padding: 10px;
    box-sizing: border-box;
    color: white;
    background: #ff6200;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    margin-right: 5px;
    margin-left: 5px;
}

#tz-register-popup span {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 10px;
    box-sizing: border-box;
    color: white;
    background: #19ff58;
    cursor: pointer;
    border: none;
    border-radius: 20px;
}

.div-list-top {
    white-space: nowrap;
    overflow-x: auto;
    text-align: right;
    height: 50px;
    padding: 11px;
    box-sizing: border-box;
    background-color: #393f48;
}

.div-window-top {
    height: 50px;
    background-color: #616368;
    padding-top: 7px;
    box-sizing: border-box;
}

.div-window-top .tab-parent {
    width: 90%;
    margin-left: 5%;
    background-color: #393f48;
    height: 36px;
    padding-top: 3px;
    box-sizing: border-box;
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
    overflow-x: auto;
}

.div-window-content {
    background-color: #616368;
}

.div-window-top .btn-window-menu {
    background-color: transparent;
    border: solid 1px #979797;
    border: none;
    width: 22%;
    min-width: 110px;
    margin-right: 5px;
    border-radius: 5px;
    cursor: pointer;
    height: 30px;
    color: white;
    outline: none;
    font-size: 13px;
}

.div-window-top .btn-window-menu:hover {
    background-color: #ff6200;
}

.div-window-top .btn-window-menu img {
    height: 20px;
    float: left;
    margin-top: -2px;
}

.div-list-top .btn-window-menu {
    background-color: #616368;
    border: none;
    width: 24%;
    min-width: 110px;
    margin-right: 2%;
    border-radius: 6px;
    cursor: pointer;
    height: 30px;
    color: white;
    outline: none;
    font-size: 12px;
}

.div-list-top .btn-window-menu:hover {
    background-color: #ff6200;
}

.div-list-top .btn-window-menu img {
    height: 18px;
    float: left;
    margin-top: -2px;
}

.div-list-top .btn-window-matrix {
    float: left;
    background: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    height: 30px;
    color: white;
    outline: none;
    font-size: 12px;
    line-height: 25px;
}

.div-list-top .btn-window-matrix:hover {
    background-color: #616368;
}

.div-list-top .btn-window-matrix img {
    height: 22px;
    float: left;
}

.div-list-content {
    overflow: auto;
    background-color: #393f48;
}

.selected {
    background-color: #1e88e5 !important;
}

#div-window-report {
    position: relative;
    overflow: auto;
}

.broj-login {
    font-family: NanumGothic;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    height: 34px;
    width: 120px;
    border: none;
    background: #ff6200;
    color: white;
    border-radius: 10px;
    margin-top: 50px;
    margin-left: 50px;
    cursor: pointer;
}

.broj-login:hover {
    background: #14b706;
}

.broj-login-h4 {
    font-family: NanumGothic;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    margin-top: 30px;
    color: white;
}

.div-goodbye {
    background-color: #272c33;
    margin: 20px auto;
    width: 70%;
    height: auto;
    padding: 20px 20px 50px 20px;
    box-sizing: border-box;
    position: relative;
    color: #808d97;
    position: relative;
}

.div-goodbye h2 {
    color: white;
    margin-bottom: 10px;
}

.div-goodbye button {
    width: 150px;
    height: 30px;
    cursor: pointer;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 12pt;
    background-color: #1e88e5;
    right: 10px;
    bottom: 10px;
    position: absolute;
    outline: none;
    border: none;
}

.div-goodbye .btn-goodbye {
    background: #ff6200;
}

.div-goodbye button:hover {
    background: #979797;
    color: white;
}

.trainer-authority-div {
    font-family: NanumGothic;
    top: 5px;
    right: 15px;
    position: absolute;
    background: #ff6102;
    font-size: 10pt;
    color: white;
    padding: 5px;
    border-radius: 5px;
}

#trainer-authority {
    height: 20px;
    cursor: pointer;
    background: white;
    outline: none;
    border: none;
}

.progress-type {
    color: #fe4d6d;
    font-weight: 600;
}

.complete-type {
    color: #5cb85c;
    font-weight: 600;
}

/* progress bar start */
.progressbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
    clear: both;
    z-index: 1000;
}

.progressbar .progress {
    background: #f3a359; /*-- Color of the bar --*/
    height: 23px;
    width: 100%;
    max-width: 0%;
    float: left;
    -webkit-animation: progress 2s 1 forwards;
    -moz-animation: progress 2s 1 forwards;
    -ms-animation: progress 2s 1 forwards;
    animation: progress 2s 1 forwards;
}

.progressbar .progress .pbaranim {
    font-family: NanumGothic;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 25px;
    height: 23px;
    width: 100%;
    text-align: center;
    color: black;
    overflow: hidden;
    background: url('../images/common/7uo1osj.gif') repeat-x;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=5);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=5);
    filter: alpha(opacity=5);
}

#tz-attendance-check-all{
    cursor: pointer;
}

/* table tbody srcoll */
.fixed_header{
    /*width: 400px;*/
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
    display:block;
    width: 100%;
    overflow-y: auto;
    height: 100%;
}

.fixed_header thead tr {
    display: block;
}


.fixed_header th, .fixed_header td {
    padding: 5px;
    text-align: left;
    width: 50%;
}

.first-center th:first-child, .first-center td:first-child {
    width: 50px;
    text-align: center;
}

/*input:focus {*/
    /*outline: none;*/
/*}*/

#tz-table-jattendance {
    color: #747d8a;
    width: 80%;
    font-size: 11pt;
    max-width: 600px;
    font-weight: 500;
    font-family: sans-serif;
}

#tz-table-jattendance select {
    width: 80%;
    padding: 5px;
    outline: none;
    background-color: #272c33;
    color: white;
    border: none;
}

#tz-table-jattendance thead {
    background-color: #272c33;
    color:#fff;
}

#tz-table-jattendance th, #tz-table-jattendance td {
    min-height: 30px;
    padding: 6px;
    min-width: 30px;
    max-width: 95px;
    line-height: 2;
}

#tz-table-jattendance tr{
    min-height: 30px;
    border-bottom:1px solid #4e6671;
}

#tz-table-jattendance > tbody > tr:nth-child(odd){
    background-color:rgb(50, 56, 64);
    border-bottom:1px solid #4e6671;
}

#tz-table-jattendance > tbody > tr:nth-child(even) {
    background: transparent;
}

.broj-level {
    margin-top: 40px;
    font-size: 8pt;
    height: 20px;
    line-height: 22px;
    background: none;
    color: #85939c;
    padding: 5px;
    border-radius: 5px;
    bottom: 10px;
    cursor: pointer;
}

.broj-level b {
    font-size: 9pt;
}

.broj-level:hover {
    color: #1e88e5;
}

.broj-bottom {
    font-size: 9pt;
    height: 20px;
    line-height: 22px;
    background: none;
    color: white;
    padding: 5px;
    border-radius: 5px;
    bottom: 10px;
    cursor: pointer;
}

.broj-bottom button {
    width: 18px;
    height: 18px;
    cursor: pointer;
    outline: none;
    background-color: transparent;
    border: none;
    background-size: contain;
}

.history-button {
    margin-right: 10px;
    background-image: url("../submodules/common/jlib/BroJUI/images/history-hover.png");
}

.history-button:hover {
    background-image: url("../submodules/common/jlib/BroJUI/images/history.png");
}

.ticket-button {
    margin-right: 10px;
    background-image: url("../submodules/common/jlib/BroJUI/images/ticket-hover.png");
}

.ticket-button:hover {
    background-image: url("../submodules/common/jlib/BroJUI/images/ticket.png");
}

.add-button {
    background-image: url("../submodules/common/jlib/BroJUI/images/new.png");
}

.add-button:hover {
    background-image: url("../submodules/common/jlib/BroJUI/images/new-hover.png");
}

.jticket-popup-top {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
}

.jticket-popup-top .jticket-popup-tab {
    width: 20%;
    display: inline-block;
    height: 40px;
    line-height: 42px;
    border-radius: 5px 5px 0px 0px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    color: #818f97;
    margin-right: 0px;
}

.jticket-popup-top .jticket-popup-tab:hover {
    color: #65ace6;
    border-bottom: 2px solid #65ace6;
}

.jticket-selected {
    color: #65ace6 !important;
    border-bottom: 2px solid #65ace6 !important;
}

.jticket-popup-content {
    overflow: auto;
    padding: 15px;
}

.tz-popup-body .jgrid-son-content {
    background-color: #34373a !important;
}

.jticket-popup-content .jgrid-son-content {
    background-image: linear-gradient(128deg, #b5b5b5, #e8e8e8 51%, #b5b5b5) !important;
}

.jticket-popup-content .jgrid-son-content h2 {
    color: black !important;
}

.jticket-popup-content .jgrid-bodyzone-son table td {
    color: black !important;
}

.jticket-popup-content .jgrid-son-content .son-content-title h3 {
    color: black !important;
}

.jticket-popup-content .jgrid-son-content table h4 {
    color: black !important;
}

.jpay-history-table {color: #F5F5F5; cursor:pointer; font-size:11pt; margin-top:10px; margin-bottom:10px; min-width: 700px; width:90%; text-align:right; border-collapse:collapse}
.jpay-history-table tr {padding: 5px; border-bottom:1px solid #4e6671}
.jpay-history-table th, .jpay-history-table td {padding:8px 10px; text-align: center}
.jpay-history-table thead th {font-size: 20px; color: #1e88e5; text-align:center; border-bottom: solid 2px; border-bottom-color : #1b1b1b}
.jpay-history-table tbody th {text-align:left; width:12%}
.jpay-history-table tbody tr.odd {background-color:rgb(50, 56, 64);}
.jpay-history-table tbody tr:hover {color: #1e88e5}
.jpay-history-table button {
    border: none;
    width: 60%;
    height: 30px;
    border-radius: 5px;
    background: #64ace6;
    font-size: 8pt;
    color: white;
    cursor: pointer;
}


.end-period {
    margin-top: 30px;
    margin-left: 5%;
    margin-right: 5%;
    padding: 50px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
    background-color: #e6e0e0;
}

.end-period h3 {
    display: inline-block;
}

.end-period img {
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
}

.end-period p {
    font-size: 10pt;
}

.end-period button {
    width: 100px;
    height: auto;
    line-height: 22px;
    font-size: 11pt;
    font-weight: 600;
    background: #5ca8e4;
    float: right;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
}

.flex-box{
    display: flex;
    justify-content: center;
    align-items: center;
}

.certificate_confirm_popup{
    width: 600px;
    height: 450px;
    background: #5e5e5e;
    position: absolute;
    border-radius: 3px;
    color: white;
}

.certificate_confirm_popup img{
    height: 200px;
    border-radius: 3px;
}

.certificate_confirm_popup button{
    width: 50%;
    font-size: 25px;
    height: 60px;
    position: absolute;
    bottom: 0px;
}

.certificate_confirm_popup textarea{
    width: calc(100% - 30px);
    height: 100px;
    margin: 30px;
}

.customer-open-btn{
    position: absolute;
    z-index: 100;
    font-weight: 800;
    width: 66px;
    height: 26px;
    border-radius: 5px;
    background: url("../images/open_list_btn.png");
    background-size: 100% 100%;
}

.customer-open-btn:active{
    background: url("../images/open_list_active_btn.png");
    background-size: 100% 100%;
}

.card-reader-input {
    width: 240px;
    display: block;
    margin-top: 15px;
    height: 40px;
    padding: 5px;
    border-radius: 5px;
    border: 3px solid #1dffb9;
}

.card-reader-input-button {
    width: 240px;
    height: 35px;
    background: #33feb9;
    font-size: 13px;
    border: 3px solid #ffffff;
    color: white;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}
.market-document-btn {
    background-color: #1E88E5;
}

/* Solution display none*/
.broj-sidebar-button-two {
    border-right: 0px !important;
}

#broj-notice-title, .broj-jgroup-select, .choose-language-box, .choose-dark-mode-box, .notice-talk-box, .select-service-box, .broj-guide-box {
    display: none;
}

.broj-sidebar-account-arrow {
    top: 0px;
}

.broj-sidebar-divide a {
    color: #FFFFFF;
}

/*header {*/
/*    background: rgb(30,136,229);*/
/*    background: linear-gradient(90deg, rgba(30,136,229,1) 0%, rgba(255,255,255,1) 50%, rgba(30,136,229,1) 100%);*/
/*}*/

/* market css */
.broj-sidebar .broj-sidebar-ul .broj-sidebar-li {
    height: 48px;
}

.broj-sidebar .broj-sidebar-ul a {
    font-size: 14px;
    font-weight: 700;
    margin-top: 16px;
    color: #ffffff;
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-ul-child > .broj-sidebar-li {
    height: 42px;
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-ul-child a {
    font-size: 12px;
    font-weight: 500;
    margin-left: 36px;
    margin-top: 13px;
}
.market-page-zone{
    width: 100%;
    min-height: 100%;
    height: max-content;
    padding: 0px 19px 0px 24px;
}
.market-page-zone .flex-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.require-notice {
    width: max-content;
    float: right;
    position: relative;
    top: -20px;
    right: 25px;
    color : #6EBD8D;
    font-size: 14px;
}

.market-input-box, .market-label-box {
    height: 34px;
    border: none;
    border-radius: 3px;
    outline: none;
    background-color: #4a4a4a;
    color: #ffffff;
}

.market-label-box {
    display: inline-block;
    line-height: 34px;
    width: 286px;
    text-indent: 10px;
    font-size: 14px;
    cursor: pointer;
}

.branch-connection-box {
    display: flex;
}

.branch-connection-toggle {
    width: max-content;
    height: max-content;
    display: inline-flex;
    justify-content: space-between;
    flex-direction: row;
}

.branch-connection-toggle .toggle-label {
    font-family: NotoSansKR, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
}

.branch-connection-toggle .switch .slider.round {
    border-radius: 34px
}

.branch-connection-toggle .switch {
    position: relative;
    display: inline-block;
    width: 30px !important;
    height: 16px;
    margin: 0px;
}

.branch-connection-toggle .switch .slider.round:before {
    border-radius: 50%;
}

.branch-connection-toggle .switch .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 15px;
    left: 2px;
    bottom: 2px;
    background-color: white;
}

.input-box-container {
    width: calc(100% - 48px);
    min-width: 900px;
    height: max-content;
    background: #222222;
    border-radius: 3px;
    margin: 0 24px 24px 24px;
    padding: 12px 12px 12px 12px;
}

.input-box-title {
    color: #A4A4A4;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
}

.input-subtitle-container {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.input-sub-title {
    float: left;
    color: #A4A4A4;
    font-size: 14px;
    width: 160px;
    line-height: 34px;
}

.address-inputbox-container {
    width: 600px;
    margin-top: 12px;
}

.search-address-btn {
    width: 94px;
    height: 34px;
    margin-left: 12px;
    font-size: 12px;
    text-align: center;
    background-color: #4a4a4a;
    color: #ffffff;
    border: none;
    border-radius: 3px;
}

.search-address-btn:hover {
    background-color: #5c5c5c;
}

.bank-info-wrap {
    width: 650px;
    margin-left: 160px;
    margin-top: 12px;
}

.select-point-list,
.select-bank-list,
.select-pg-list,
.select-group-list {
    width: 286px;
    height: 34px;
    border: none;
    border-radius: 3px;
    outline: none;
    background-color: #4a4a4a;
    text-indent: 10px;
    color: #ffffff;
    -webkit-appearance: none;
    display: inline-block;
    background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
}

.market-submit-btn {
    position: absolute;
    right: 0;
    width: 110px;
    height: 48px;
    line-height: 48px;
    margin-right: 28px;
    border: none;
    border-radius: 3px;
    background-color: #6EBD8D;
    color: #ffffff;
    text-align: center;
}
.market-product-btn, .membership-product-btn{
    background: #65B49F;
    color: white;
}
.market-body-search-zone .flex-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.market-body-search-zone{
    width: 100%;
    padding: 12px;
    height: max-content;
    background: #222222;
    border-radius: 5px;
    font-family: NotoSansKR sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A4A4A4;
    margin-bottom: 24px;
}
.market-body-search-zone > h3 {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 12px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.market-body-search-zone .market-block-contents{
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.market-body-search-zone .market-block-contents summary {
    display: block;
    width: 160px;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.market-calculate-section-warp {
    display: flex;
    min-width: 900px;
    margin: 24px 24px 24px 24px;
}

.market-calculate-search-zone, .market-calculate-sales-search-zone{
    position: relative;
    min-width: 620px;
    height: 330px;
    padding: 12px;
    background: #222222;
    border-radius: 5px;
    font-family: NotoSansKR sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A4A4A4;
}

.market-calculate-search-zone {
    width: 100%;
    min-width: 800px;
    height: 220px;
    margin-right: 0;
}

.market-calculate-sales-search-zone {
    width: 70%;
    margin-right: 24px;
}

.market-calculate-search-zone .flex-box,
.market-calculate-sales-search-zone .flex-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.market-calculate-search-zone > h3,
.market-calculate-sales-search-zone > h3,
.market-calculate-zone > h3,
.market-detail-calculate-zone > h3 {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 12px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.market-calculate-search-zone .market-block-contents,
.market-calculate-sales-search-zone .market-block-contents {
    width: 100%;
    height: max-content;
    margin-bottom: 12px;
    /*display: flex;*/
    /*flex-direction: row;*/
    /*align-items: flex-start;*/
    /*justify-content: flex-start;*/
}

.market-calculate-search-zone .market-block-contents summary,
.market-calculate-sales-search-zone .market-block-contents summary {
    display: inline-block;
    width: 160px;
}

.market-calculate-search-zone .market-block-contents select,
.market-calculate-sales-search-zone .market-block-contents select{
    width: 200px;
    height: 35px;
    padding: 6px 12px;
    border: none;
    border-radius: 3px;
    color : #FFFFFF;
    background: #4A4A4A;
}

.market-calculate-search-zone .market-block-contents input,
.market-calculate-sales-search-zone .market-block-contents input {
    width: 200px;
    height: 35px;
    padding: 6px 12px;
    border: none;
    border-radius: 3px;
    background: #323232;
    color : #FFFFFF;
    box-sizing: border-box;
}

.market-calculate-zone, .market-detail-calculate-zone {
    position: relative;
    width: 30%;
    min-width: 240px;
    height: 330px;
    padding: 12px;
    background: #222222;
    border-radius: 5px;
    font-family: NotoSansKR sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A4A4A4;
}

.market-detail-calculate-zone {
    height: 170px;
}

#market-calculate-criteria-wrap {
    display: none;
}

#market-calculate-criteria-wrap.active {
    display: block;
}

#market-calculate-search-number-wrap {
    display: none;
}

#market-calculate-search-number-wrap.active {
    display: block;
}

.market-calculate-standard-period-btn {
    box-sizing: border-box;
    border : 1px solid #4a4a4a;
    color: #FFFFFF;
}

.market-calculate-standard-period-btn.active {
    border : 1px solid #1E88E5;
    color: #1E88E5;
}

#sales-period-start{
    border : 1px solid #323232;
}

#sales-period-start.active{
    border: 1px solid #1E88E5;
}

#sales-period-start.error{
    border: 1px solid #DA5D58;
}

#sales-period-finish{
    border : 1px solid #323232;
}

#sales-period-finish.active{
    border: 1px solid #1E88E5;
}

#sales-period-finish.error{
    border: 1px solid #DA5D58;
}

.market-calculate-zone .market-block-contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 45px;
}

.market-detail-calculate-zone .market-block-contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.market-block-contents > .market-calculate-amount {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    font-size: 16px;
    color: #FFFFFF;
}

#market-amount-payment-section {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 12px;
}

.market-calculate-info-wrap {
    font-size: 16px;
    margin-bottom: 24px;
}

.market-calculate-info-wrap > .market-calculate-info {
    text-align: right;
}

#calculate-list-table-wrap .brojlist .brojlist-container .brojlist-table .brojlist-table-tbody tr:hover {
    color: #1E88E5 !important;
}

.calculate-confirm-btn {
    margin: 6px 0;
    background-color: #1E88E5;
    color: #FFFFFF;
}

.calculate-confirm-btn:hover {
    background-color: #3494E8;
    color: #FFFFFF;
}

.calculate-success-btn {
    margin: 6px 0;
    background-color: #4A4A4A;
    color: #FFFFFF;
    pointer-events: none;
    cursor: auto;
}

.input-pg-container .market-pg-info-wrap {
    display: flex;
    gap: 12px;
    margin: 20px 0 0 160px;
}
.input-pg-container .pg-name-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 392px;
    gap: 24px;
}

.input-pg-container .pg-name-mid-box {
    display: flex;
    gap: 12px;
    width: 100%;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}