body, td, th, p, label, span, input, select, a, ul, ol, h1, h2, h3, h4, h5 {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

/* Window Chrome Scrollbar should be Hidden but, Some div need to show for x */
::-webkit-scrollbar {
    display: inherit;
    width: 0px;
}

::-webkit-scrollbar-corner {
    display: none;
}

html, body {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}

div {
    box-sizing: border-box;
}

/* IE + Edge + IOS Safari */

/* Browser */
.scroll-bar {
    overflow: scroll;
}

.scroll-bar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scroll-bar::-webkit-scrollbar-thumb {
    background: rgba(203, 203, 203, 0.62);
    border-radius: 3px;
}

@media screen and (min-width: 1100px) {
    #j-calendar-p {
        display: block;
    }

    table.broj-form-table {
        width: 50%;
    }

    #broj-register-popup {
        width: 500px;
        height: 800px;
    }

    .tz-popup {
        width: 60%;
        left: 20%;
        position: fixed;
        height: 80%;
        top: 10%;
    }

    .preview-popup {
        width: 60%;
        left: 20%;
        position: fixed;
        height: 80%;
        top: 5%;
    }
}

/* Pad */
@media screen and (max-width: 1099px) and (min-width: 601px) {
    #j-calendar-p {
        display: none;
    }

    table.broj-form-table {
        width: 80%;
    }

    #broj-register-popup {
        width: 500px;
        height: 800px;
    }

    .tz-popup {
        width: 70%;
        left: 15%;
        position: fixed;
        height: 80%;
        top: 10%;
    }

    .preview-popup {
        width: 70%;
        left: 15%;
        position: fixed;
        height: 80%;
        top: 10%;
    }
}

/* Phone*/
@media screen and (max-width: 600px) {
    #j-calendar-p {
        display: none;
    }

    table.broj-form-table {
        width: 80%;
    }

    #broj-register-popup {
        width: 320px;
        height: 568px;
    }

    .tz-popup {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .preview-popup {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
}

/* BroJCustomer Start */
.broj-customer-popup {
    border-left: 1px solid #ffffff;
    width: 80%;
    left: calc(10% + 25px);
    position: fixed;
    height: 96%;
    box-shadow: 14px 14px 24px 24px rgba(0, 0, 0, 0.5);
    top: 2%;
    z-index: 100;
    box-sizing: border-box;
    background: rgba(12, 13, 14, 0.7);
    font-family: sans-serif;
}

.broj-customer-popup-off {
    cursor: pointer;
    width: 45px;
    height: 45px;
    position: fixed;
    background: #f9f9f9;
    top: 2%;
    right: calc(10% - 76px);
    border-radius: 5px;
    z-index: 1000;
    color: black;
    font-size: 20pt;
    font-weight: 400;
    text-align: center;
    line-height: 48px;
}

.broj-customer-popup .label-button {
    background: transparent;
    width: 20px;
    height: 20px;
    padding: 0px;
    border: none;
    float: right;
    margin-left: 5px;
    margin-top: -5px;
    cursor: pointer;
    outline: none;
}

.broj-customer-popup .label-button img {
    width: 100%;
    height: 100%;
}

.broj-customer-popup .table {
    color: #b5aeae;
    width: 100%;
    font-weight: 300;
    font-size: 11pt;
}

.broj-customer-popup .table td {
    padding: 1px;
    border: none;
}

.broj-customer-popup .table td p {
    font-weight: 400;
}

.broj-customer-popup .table b {
    font-weight: 400;
}

/* BroJCustomer Left Can */
.broj-customer-popup .broj-customer-left-can {
    /*background-image: linear-gradient(120deg, #425f74 20%, #48606b, #455f6c);*/
    background: #2e2e2e;
    float: left;
    width: 200px;
    height: 100%;
}

.broj-customer-popup .broj-customer-left-can .left-can-preview {
    width: 100%;
    height: 200px;
    position: relative;
}

.broj-customer-popup .broj-customer-left-can .left-can-preview .preview {
    max-width: 60%;
    max-height: 70%;
    border-radius: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;
    right: 0px;
}

.broj-customer-popup .broj-customer-left-can .left-can-preview .broj-join {
    position: absolute;
    left: 45px;
    width: 110px;
    bottom: -3px;
    background: #fa6401;
    color: white;
    padding: 5px;
    border-radius: 3px;
    border: none;
    font-size: 9pt;
    cursor: pointer;
}

.broj-customer-popup .broj-customer-left-can .left-can-bodylog {
    height: calc(100% - 250px);
    overflow: auto;
    padding: 15px;
    box-sizing: border-box;
}

.broj-customer-popup .broj-customer-left-can .left-can-bodylog .bodylog-title-div {
    text-align: center;
    color: #cccccc;
    margin-bottom: 5px;
}

.broj-customer-popup .broj-customer-left-can .left-can-bodylog .bodylog-title-div .title-name {
    font-size: 18pt;
    font-weight: 600;
}

.broj-customer-popup .broj-customer-left-can .left-can-bodylog .bodylog-title-div .title-sub {
    font-size: 12pt;
    font-weight: 400;
}

.broj-customer-popup .broj-customer-left-can .left-can-bodylog .bodylog-all-div {
    overflow: hidden;
    padding: 15px 5px 15px 5px;
    box-sizing: border-box;
    border-top: 1px solid #cccccc;
    float: left;
    width: 100%;
}

.broj-customer-popup .broj-customer-left-can .left-can-bodylog .bodylog-all-div h2 {
    font-size: 12pt;
    font-weight: 400;
    margin-bottom: 5px;
    color: #cccccc;
}

.broj-customer-popup .broj-customer-left-can .left-can-bodylog .bodylog-all-div a {
    font-size: 11pt;
    font-weight: 400;
    color: #b6bfc5;
}

.broj-customer-popup .broj-customer-left-can .left-can-bodylog .bodylog-half-div {
    text-align: center;
    float: left;
    height: 55px;
    padding: 8px;
    width: 49%;
    box-sizing: border-box;
}

.broj-customer-popup .broj-customer-left-can .left-can-bodylog .bodylog-half-div h2 {
    font-size: 14pt;
    font-weight: 700;
    color: #cccccc;
}

.broj-customer-popup .broj-customer-left-can .left-can-bodylog .bodylog-half-div a {
    font-size: 12pt;
    font-weight: 300;
    color: #b6bfc5;
}

.broj-customer-popup .broj-customer-left-can .left-can-bottom {
    text-align: center;
    overflow: auto;
    padding: 15px;
    box-sizing: border-box;
    height: 50px;
}

.broj-customer-popup .broj-customer-left-can .left-can-bottom a {
    margin-left: 5px;
    color: white;
    font-size: 11pt;
    font-weight: 300;
}

.broj-customer-popup .broj-customer-left-can .left-can-bottom .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
    margin-right: 10px;
}

.broj-customer-popup .broj-customer-left-can .left-can-bottom .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.broj-customer-popup .broj-customer-left-can .left-can-bottom .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.broj-customer-popup .broj-customer-left-can .left-can-bottom .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.broj-customer-popup .broj-customer-left-can .left-can-bottom input:checked + .slider {
    background-color: #49e409;
}

.broj-customer-popup .broj-customer-left-can .left-can-bottom input:focus + .slider {
    box-shadow: 0 0 1px #49e409;
}

.broj-customer-popup .broj-customer-left-can .left-can-bottom input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.broj-customer-popup .broj-customer-left-can .left-can-bottom .slider.round {
    border-radius: 34px;
}

.broj-customer-popup .broj-customer-left-can .left-can-bottom .slider.round:before {
    border-radius: 50%;
}

/* BroJCustomer Middle Can */
.broj-customer-popup .broj-customer-middle-can {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background: #1e1e1e;
}

.broj-customer-popup .broj-customer-middle-can h4 {
    text-align: center;
    color: #636060;
    font-size: 12pt;
    font-weight: 400;
    margin-top: 10%;
}

.broj-customer-popup .broj-customer-middle-can h2 {
    margin-bottom: 5px;
    text-align: center;
    color: white;
    font-size: 12pt;
    font-weight: 400;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top {
    width: 100%;
    height: calc(100% - 250px);
    padding: 0px;
    box-sizing: border-box;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-ticketinfo {
    padding: 10px;
    margin: 10px;
    float: left;
    width: calc(50% - 20px);
    height: calc(50% - 20px);
    background: #353535;
    box-sizing: border-box;
    border-radius: 5px;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-ticketinfo .top-ticketinfo-content {
    height: calc(100% - 35px);
    overflow: auto;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-ticketinfo h3 {
    display: inline-block;
    color: white;
    font-size: 12pt;
    font-weight: 400;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-ticketinfo a {
    margin-left: 10pt;
    color: white;
    font-size: 11pt;
    font-weight: 300;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-lessoninfo {
    position: relative;
    padding: 10px;
    margin: 10px;
    float: left;
    width: calc(50% - 20px);
    height: calc(50% - 20px);
    background: #353535;
    box-sizing: border-box;
    border-radius: 5px;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-lessoninfo a {
    color: white;
    font-size: 11pt;
    font-weight: 300;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-lessoninfo .can-top-lessoninfo-content {
    height: calc(100% - 35px);
    overflow: auto;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-lessoninfo .can-top-lessoninfo-bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: center;
    width: 100%;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-lessoninfo .can-top-lessoninfo-bottom button {
    background: transparent;
    color: #cccccc;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 12pt;
    font-weight: 300;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-content {
    height: 250px;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-lockerinfo {
    position: relative;
    padding: 10px;
    margin: 10px;
    float: left;
    width: calc(50% - 20px);
    height: calc(50% - 20px);
    background: #353535;
    box-sizing: border-box;
    border-radius: 5px;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-lockerinfo a {
    color: white;
    font-weight: 300;
    font-size: 11pt;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-lockerinfo .can-top-lockerinfo-content {
    height: calc(100% - 35px);
    overflow: auto;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-lockerinfo .can-top-lockerinfo-bottom {
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: center;
    width: 100%;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-lockerinfo .can-top-lockerinfo-bottom button {
    background: transparent;
    color: #cccccc;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 12pt;
    font-weight: 300;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-sportsinfo {
    position: relative;
    padding: 10px;
    margin: 10px;
    float: left;
    width: calc(50% - 20px);
    height: calc(50% - 20px);
    background: #353535;
    box-sizing: border-box;
    border-radius: 5px;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-top .can-top-sportsinfo .top-sportsinfo-content {
    height: calc(100% - 35px);
    overflow: auto;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-content .can-top-healthinfo {
    padding: 10px;
    float: left;
    width: 50%;
    height: 250px;
    box-sizing: border-box;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-content .can-content-block {
    padding: 10px;
    float: left;
    width: calc(50% - 15px);
    height: 240px;
    box-sizing: border-box;
    background: #2e2e2e;
    overflow: scroll;
    position: relative;
    color: white;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-content .can-content-block h4 {
    text-align: center;
    margin: 0;
    font-weight: 700;
    font-size: 13pt;
    color: white;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-content .can-top-attendinfo {
    padding: 10px;
    float: left;
    width: 50%;
    height: 250px;
    box-sizing: border-box;
}

.broj-customer-popup .broj-customer-middle-can .middle-can-bottom {
    width: 100%;
    height: 250px;
    padding: 10px;
    box-sizing: border-box;
}

.broj-customer-popup .broj-customer-middle-can .can-bottom-top {
    width: 100%;
    height: 50px;
    padding: 8px 18px;
}

.broj-customer-popup .broj-customer-middle-can .can-bottom-top .tab-plus {
    float: right;
    background: #ff6200;
    color: white;
    border: none;
    outline: none;
    height: 31px;
    width: 70px;
    cursor: pointer;
    margin-top: 2px;
    margin-right: 1px;
    padding: 5px;
    border-radius: 5px;
}

.broj-customer-popup .broj-customer-middle-can .can-bottom-top .bottom-top-tab {
    width: auto;
    height: 100%;
    margin-right: 5px;
    color: #7f7f7f;
    font-size: 11pt;
    font-weight: 400;
    float: left;
    cursor: pointer;
    text-align: center;
    padding: 8px;
}

.broj-customer-popup .broj-customer-middle-can .can-bottom-top .bottom-top-tab:hover {
    color: #fefffd !important;
}

.broj-customer-popup .broj-customer-middle-can .can-bottom-content {
    width: calc(100% - 20px);
    margin: 0 10px 0 10px;
    height: calc(100% - 70px);
    background: #2e2e2e;
    position: relative;
    border-radius: 5px;
    padding: 15px 5px;
}

.broj-customer-popup .broj-customer-middle-can .can-bottom-content .blank {
    text-align: center;
    color: #979797;
    font-size: 11pt;
    top: 30%;
    position: absolute;
    width: 100%;
    font-weight: 400;
}

.broj-customer-popup .broj-customer-middle-can .can-bottom-content .label {
    position: absolute;
    right: 0px;
    width: auto;
}

.broj-customer-popup .broj-customer-middle-can .can-bottom-content .label button {
    float: left;
    width: auto;
}

/* BroJCustomer Right Can */
.broj-customer-popup .broj-customer-right-can {
    background: #dde2e2;
    position: relative;
    float: left;
    width: 200px;
    height: 100%;
}

.broj-customer-popup .broj-customer-middle-can .right-can-top {
    background: #353535;
    height: 50px;
    text-align: center;
    width: 100%;
}

.broj-customer-popup .broj-customer-middle-can .right-can-top img {
    width: 22px;
    position: relative;
    top: 10px;
    right: 2px;
}

.broj-customer-popup .broj-customer-middle-can .right-can-top input {
    width: 70%;
    height: 25px;
    background: transparent;
    display: inline-block;
    border: none;
    float: right;
    border-bottom: 1px solid #9c9fa0;
    text-align: center;
    outline: none;
    margin-top: 10px;
    color: #9c9fa0;
    margin-right: 30px;
}

.broj-customer-popup .broj-customer-middle-can .right-can-content {
    height: calc(100% - 50px);
    width: 100%;
}

.broj-customer-popup .broj-customer-middle-can .right-can-content .advice-content {
    background-color: #616161 !important;
    border-radius: 5px;
    font-size: 10pt !important;
    font-weight: 400 !important;
}

.broj-customer-popup .broj-customer-middle-can .right-can-content .advice-bottom {
    color: #565656 !important;
}

.broj-customer-popup .broj-customer-middle-can .right-can-content .jadvice-bottom .jadvice-bottom-textarea {
    background-color: #000000 !important;
    border-radius: 3px !important;
}

/* BroJCustomer End */

.manual-link {
    color: white;
    font-weight: 500;
    position: absolute;
    font-size: 12pt;
    top: 120px;
    right: 0px;
    margin: 30px;
    background: rgba(255, 7, 82, 0.7);
    padding: 10px;
}

.alarm-new-button {
    outline: none;
    position: absolute;
    top: -8px;
    left: 0px;
    height: auto;
    line-height: 10px;
    color: white;
    background-color: red;
    border: none;
    border-radius: 5px;
    padding: 3px;
    font-size: 4pt;
}

.broj-jplayer-rectangle {
    background-color: #000000 !important;
    border: solid 10px #3a3a3a !important;
}

.broj-jplayer-main-div {
    box-sizing: border-box;
}

.broj-jplayer-small-screen {
    position: absolute;
    z-index: 5;
}

.broj-jplayer-main-fullscreen {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0px !important;
    padding: 0px !important;
    border: none !important;
    background-color: #000000 !important;
}

.broj-button-cancel {
    width: 100px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #3fa9f5;
    padding: 2px;
    background-color: white;
    color: #3fa9f5;
}

.broj-input {
    border: 1px solid #2e2e2e;
    float: left;
    display: block;
    width: 100%;
    height: 36px;
    /* padding: 6px 12px; */
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.428571429;
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    background-color: rgb(46, 46, 46);
    background-image: none;
    overflow: visible;
}

.broj-input:focus {
    outline: none;
}

#jms_status {
    width: 120px;
    float: left;
    background: white;
    border: none;
    color: black;
    height: 30px;
    border-radius: 0px;
}

.file-input-zone input[type=file]::file-selector-button {
    margin-right: 20px;
    padding: 7px;
    cursor: pointer;
    transition: background .2s ease-in-out;
    background: #4a4a4a;
    border: none;
    border-radius: 5px;
    color: #fff;
}

.file-input-zone input[type=text] {
    padding: 7px;
    cursor: pointer;
    background: #4a4a4a;
    border: none;
    border-radius: 5px;
    color: #fff;
    margin: 10px 10px 10px 0;
}

.broj-input-post {
    width: 100% !important;
    display: block;
    height: 36px;
    padding: 6px 12px;
    font-size: 14px;
    box-sizing: border-box;
    line-height: 1.428571429;
    color: #666;
    background-color: #2e2e2e;
    background-image: none;
    margin-top: 2px;
    overflow: visible;
    border-radius: 5px;
    border: 1px solid #2e2e2e;
}

.post-button {
    width: 80px;
    background-color: #ff6200;
    color: white;
    border: none;
    height: 36px;
    margin-left: 4px;
}

.broj-textarea {
    float: left;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #b5aeae;
    background-color: #2e2e2e;
    background-image: none;
    border: 1px solid #2e2e2e;
    overflow: visible;
}

.broj-textarea:focus {
    outline: none;
}

.broj-button-ok {
    width: 100px;
    height: 30px;
    border-radius: 8px;
    border: none;
    padding: 2px;
    background-color: #3fa9f5;
    color: white;
}

table {
    border-collapse: collapse;
    border-spacing: 0px;
    border-style: none;
    padding: 0px;
}

.broj-necessary-border {
    border: 1px solid red !important;
}

.broj-blue {
    background-color: #1d88e5 !important;
}

.broj-gray {
    background-color: #5C5C5C !important;
}

input.broj-form:disabled {
    background-color: #cccccc !important;
}

button.broj-form:disabled {
    display: none;
}

select.broj-form:disabled {
    border: none !important;
    background-color: transparent !important;
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
}

.broj-image-delete-button {
    background: transparent;
    font-size: 20pt;
    border: none;
    color: #E3E6EF;
    outline: none;
}

.broj-button {
    outline: none;
    cursor: pointer;
    color: white;
    text-align: center;
    vertical-align: middle;
    border: none 0px;
    padding-left: 20px;
    padding-right: 20px;
    height: 35px;
    width: auto;
    font-size: 10pt;
    text-decoration: none;
    background: none;
}

/* Sidebar */
.broj-sidebar {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
}

.iframe-hide {
    display: none !important;
}

.broj-sidebar-button-one {
    float: left;
    cursor: pointer;
    background: none;
    border: none;
    height: 100%;
    outline: none;
    width: 54px;
}

.broj-sidebar-button-one img {
    width: 18px;
    height: 12px;
}

.broj-sidebar-button-two {
    left: 54px;
    float: left;
    cursor: pointer;
    background: none;
    border: none;
    height: 100%;
    outline: none;
    width: 176px;
    text-align: left;
    border-right: 1px solid rgb(26, 29, 31);
}

.broj-sidebar-button-two a {
    font-family: "ProductSans-Regular", Helvetica, Arial, serif;
    position: absolute;
    font-size: 22px;
    margin-left: 5px;
    margin-top: 3px;
    font-weight: 300;
    color: rgba(144, 145, 145, 1.0);
    text-align: left;
}

.broj-sidebar-button-two img {
    height: 28px;
    width: 48px;
    margin-left: 8px;
}

.broj-sidebar-divide {
    float: right;
    margin-top: 15px;
}

.broj-sidebar-divide button {
    position: relative;
    background: none;
    border: none;
    height: 100%;
    color: white;
    cursor: pointer;
    outline: none;
    float: left;
}

.broj-sidebar-divide select {
    cursor: pointer;
    width: auto;
    height: 100%;
    outline: none;
    font-size: 12px;
    color: white;
    background: none;
    border: none;
    margin-right: 3px;
}

.broj-sidebar-divide a {
    margin-right: 7px;
    font-size: 12px;
    float: left;
    margin-top: 1px;
}

.broj-sidebar-divide .broj-sidebar-button-img {
    height: 16px;
    float: left;
}

.broj-sidebar-divide .broj-sidebar-thumbnail {
    margin-top: -8px;
    width: 32px;
    height: 32px;
    border-radius: 100%;
}

.broj-sidebar .broj-sidebar-quicks {
    opacity: 0.95;
    background-color: #282c33;
    text-align: left;
}

.broj-sidebar .broj-sidebar-quicks button {
    outline: none;
    border: none;
    margin-left: 8px;
    margin-right: 8px;
    cursor: pointer;
}

.broj-sidebar .broj-sidebar-quicks .logo-img {
    width: 60px;
    height: 25px;
    margin-top: 10px;
    margin-left: 10px;
}

.broj-sidebar-account-arrow {
    width: 10px;
    height: 5px;
    margin-left: 10px;
    margin-right: 20px;
    position: relative;
    top: -12px;
}

.broj-account-list, .broj-oontalk-link-list {
    font-family: NotoSansKR, sans-serif;
    font-weight: 500;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    padding-left: 12px;
    cursor: pointer;
}

.broj-account-list:hover, .broj-oontalk-link-list:hover {
    background-color: #545454;
}

.logout-img {
    height: 20px;
    width: 20px;
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    cursor: pointer;
}

.broj-sidebar .broj-sidebar-quicks a {
    display: block;
    color: #3a3a3a;
}

.broj-sidebar .broj-sidebar-top {
    position: relative;
    height: auto;
    box-sizing: border-box;
}

.broj-sidebar .broj-sidebar-bottom {
    overflow: hidden;
    /*padding: 8px;*/
    box-sizing: border-box;
    height: 144px;
    width: 100%;
    color: #7a7c7d;
    /*border-top: 1px solid #7a7c7d;*/
    position: absolute;
    bottom: 0px;
}

.broj-sidebar .broj-sidebar-bottom h1 {
    font-size: 9pt;
    font-weight: 300;
    margin-bottom: 5px;
}

.broj-sidebar .broj-sidebar-bottom h2 {
    font-size: 9pt;
    font-weight: 300;
    margin-bottom: 3px;
}

.broj-sidebar .broj-sidebar-bottom a {
    color: #859298;
    font-size: 9pt;
    font-weight: 300;
    margin-left: 58px;
    border-bottom: 1px solid #859298;
}

.broj-jgroup-select, .broj-market-select {
    float: left;
    cursor: pointer;
    width: auto;
    height: 100%;
    min-width: 120px;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 11pt;
    font-weight: 600;
    color: white;
    background: none;
    border: none;
    margin-left: 10px;
    margin-right: 10px;
    box-sizing: border-box;
}

.broj-jgroup-select img, .broj-market-select img {
    width: 10px;
    height: 5px;
    float: right;
    margin-left: 10px;
    margin-top: 5px;
}

.broj-jgroup-popup {
    display: none;
    z-index: 100005;
    position: absolute;
    overflow: hidden;
    background: #171a1d;
    padding: 0px;
    width: 255px;
    cursor: pointer;
}

.broj-jgroup-popup .jgroup-popup-top {
    height: 45px;
    background: black;
    width: 100%;
    color: white;
    float: left;
}

.broj-jgroup-popup .jgroup-popup-top .jgroup-popup-search{
    width: 100%;
    height: 100%;
    background: none;
    outline: none;
    border: 1px solid #cccccc;
    border-radius: 3px;
    color: white;
    padding: 2px 6px;
}

.broj-jgroup-popup .jgroup-popup-body {
    max-height: 200px;
    height: auto;
    width: 100%;
    overflow: auto;
    float: left;
    border-bottom: 1px solid #000000;
}

.broj-jgroup-popup .jgroup-popup-body img {
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

.broj-jgroup-popup .jgroup-popup-body .jgroup-select-option {
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid #515356;
    color: white;
    cursor: pointer;
    float: left;
    font-size: 10pt;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.broj-jgroup-popup .jgroup-popup-body .jgroup-select-option:hover {
    background: #8e8e8e;
}
.broj-jgroup-popup .jgroup-popup-body .jgroup-select-option.active {
    background: #8e8e8e;
}

.broj-jgroup-popup .jgroup-popup-body .jgroup-select-option.active{
    background: #8e8e8e;
}

.broj-jgroup-popup .jgroup-popup-bottom {
    border-top: 1px solid #ffffff;
    height: 60px;
    background: black;
    width: 100%;
    float: left;
    display: flex;
}

.broj-jgroup-popup .jgroup-popup-bottom img {
    float: left;
    border-radius: 100%;
    height: 40px;
    max-width: 40px;
    margin-top: 8px;
    margin-left: 8px;
    cursor: pointer;
}

.broj-jgroup-popup .jgroup-popup-bottom .broj-level {
    font-size: 8pt;
    line-height: 22px;
    background: none;
    padding: 5px;
    text-align: left;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 12px;
    color: white;
    float: left;
}

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

.broj-jgroup-popup .jgroup-popup-bottom .broj-level:hover {
    color: #f3510b;
}

.broj-jgroup-popup .jgroup-popup-bottom .broj-bottom {
    margin-top: 15px;
    margin-right: 5px;
    float: right;
}

.broj-jgroup-popup .jgroup-popup-bottom .bottom-add-btn {
    border-radius: 16px;
    width: 142px;
    height: 36px;
    line-height: 31px;
    margin-bottom: 15px;
    background: #FB8333;
    margin: 5px 0px;
    display: flex;
    justify-content: center;
}

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

.jgroup-popup-bottom.gpopup-bottom-zone {
    justify-content: center;
    align-items: center;
}

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

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

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

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

.add-button {
    background-image: url('images/add-white.png');
}

/*.add-button:hover {*/
/*    background-image: url("images/new.png");*/
/*}*/

.add-button-zone {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-button-title {
    color: white;
}

/*.add-button-title:hover {*/
/*    color: #f3510b;*/
/*}*/


.broj-sidebar .broj-sidebar-ul {
    list-style: none;
}

.broj-sidebar .broj-sidebar-ul a {
    margin-left: 15px;
    font-family: NanumGothic;
    float: left;
    margin-top: 20px;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #607d8b;
}
.broj-sidebar .broj-sidebar-ul .broj-sidebar-li-direct {
    cursor: pointer;
    color: #181b1a;
    height: max-content;
    background: #2c2c2c;
    box-sizing: border-box;
    padding: 12px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-li {
    cursor: pointer;
    color: #181b1a;
    height: 50px;
    line-height: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #2c2c2c;
    position: relative;
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-li:hover{
    background: white !important;
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-li .wide-img {
    float: right;
    margin-right: 10px;
    margin-top: 17px;
    width: 12px;
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-li .narrow-img {
    float: right;
    margin-right: 12px;
    margin-top: 12px;
    height: 12px;
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-li .thumb-img {
    float: left;
    margin-left: 20px;
    margin-right: 4px;
    margin-top: 18px;
    width: 15px;
    height: 15px;
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-li-direct > .direct-btn{
    width: 100%;
    height: 48px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-li-direct > .direct-btn > .direct-title {
    margin-left: 12px;
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-ul-child {
    background: rgba(56, 63, 71, 0.6);
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-ul-child a {
    font-size: 11px;
    color: rgb(138, 152, 160);
}

.broj-sidebar .broj-sidebar-ul .broj-sidebar-ul-child .broj-sidebar-li {
    box-shadow: none;
    background: rgb(34, 34, 34);
}

.broj-sidebar .bottom-img {
    width: 30px;
    height: 30px;
    position: relative;
    bottom: -30px;
    left: 12px;
}

table.broj-form-table {
    color: #bdbdbd;
}

/* nav tag */
.broj-step-nav ul {
    padding-top: 10px;
}

/* 상단 여백 10px */
.broj-step-nav ul li {
    display: inline; /* 세로나열을 가로나열로 변경 */
    font: bold 12px Dotum; /* 폰트 설정 - 12px의 돋움체 굵은 글씨로 표시 */
    padding: 0 10px;
    border-radius: 10px;
    margin-left: 5px;
    cursor: pointer;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}

.broj-step-nav ul li:first-child {
    margin-left: 0px;
}

.broj-step-li-selected {
    background-color: #CCCCCC !important;
}

.broj-loading-popup {
    text-align: center;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #cccc;
    z-index: 100010;
    padding-top: 30px;
}

.broj-loading-popup img {
    width: 200px;
    margin-bottom: 20px;
}

.broj-loading-popup .loading-popup-s3 {
    text-align: center;
}

.broj-loading-popup .loading-popup-s3 h {
    color: #b12f2f;
    display: block;
    width: 250px;
    margin: auto;
    font-weight: 600;
    font-size: 12pt;
}

.broj-loading-popup .loading-popup-s3 progress {
    width: 250px;
}

.broj-menu-popup {
    width: 254px;
    z-index: 10001;
    background: rgb(40, 44, 51);
    overflow: auto;
    padding: 15px;
    position: absolute;
    color: white;
    font-size: 10pt;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    display: none;
}

.broj-sidebar .bottom-img {
    width: 30px;
    height: 30px;
    position: relative;
    bottom: -30px;
    left: 12px;
}

.broj-menu-popup button {
    background: none;
    cursor: pointer;
    padding: 5px 10px 5px 12px;
    border: 1px solid transparent;
}

.broj-menu-popup button:hover {
    background: #6B7770;;
}

.broj-menu-popup button img {
    width: 50px;
}

.broj-menu-popup button a {
    color: white !important;
    display: block;
    font-family: sans-serif;
    font-weight: 300;
    font-size: 8px;
    margin-top: 5px;
    margin-left: -3px;
    font-style: normal;
    float: none;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
}

.triangle {
    display: none;
    position: absolute;
    top: 0px;
    width: 0px;
    height: 0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid rgb(40, 44, 51);
}

.broj-popup-cube {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100005;
    width: 100%;
    height: 100%;
}

.broj-popup-cube .sk-folding-cube {
    width: 60px;
    height: 60px;
    margin: auto;
    left: 50%;
    position: absolute;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    bottom: 55%;
    z-index: 100;
}

.broj-popup-cube .sk-folding-cube .sk-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.broj-popup-cube .sk-folding-cube .sk-cube:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #b3fbd8;
    -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
    animation: sk-foldCubeAngle 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.broj-popup-cube .sk-folding-cube .sk-cube2 {
    -webkit-transform: scale(1.1) rotateZ(90deg);
    transform: scale(1.1) rotateZ(90deg);
}

.broj-popup-cube .sk-folding-cube .sk-cube3 {
    -webkit-transform: scale(1.1) rotateZ(180deg);
    transform: scale(1.1) rotateZ(180deg);
}

.broj-popup-cube .sk-folding-cube .sk-cube4 {
    -webkit-transform: scale(1.1) rotateZ(270deg);
    transform: scale(1.1) rotateZ(270deg);
}

.broj-popup-cube .sk-folding-cube .sk-cube2:before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.broj-popup-cube .sk-folding-cube .sk-cube3:before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.broj-popup-cube .sk-folding-cube .sk-cube4:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

.find-popup {
    position: absolute;
    height: 150px;
    width: 100px;
    z-index: 100005;
    box-sizing: border-box;
    background: #272c33;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 9pt;
    font-weight: 300;
}

.find-popup .find-popup-top {
    height: 20px;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
}

.find-popup .find-popup-body {
    height: calc(100% - 20px);
    overflow: auto;
}

.find-popup .find-popup-son {
    width: 100%;
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 22px;
    cursor: pointer;
    padding: 5px;
    box-sizing: border-box;
}

.find-popup .find-popup-body h2 {
    color: #6B7770;
    font-weight: 700;
    font-size: 10pt;
    text-align: center;
    margin-top: 30%;
}

.find-popup .find-popup-son:hover {
    background-color: #1e88e5;
}

.find-popup .off {
    font-size: 8pt;
    font-weight: 500;
    color: #cccccc;
    cursor: pointer;
}

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

.confirm-popup {
    padding: 15px;
    position: fixed;
    height: auto;
    width: auto;
    z-index: 100000;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.6);
    background-color: #ffffff;
    font-family: IropkeBatangM, sans-serif;
}

.confirm-popup .confirm-popup-bye {
    cursor: pointer;
    position: absolute;
    right: 2px;
    top: 8px;
    color: white;
    font-weight: 600;
    font-size: 12pt;
    background: transparent;
    border: none;
}

.confirm-popup .confirm-popup-bye:hover {
    color: #1b1b1b;
}

.confirm-popup .confirm-popup-top {
    height: 23px;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.6px;
    color: #000000;
}

.confirm-popup .popup-confirm-button {
    width: auto;
    cursor: pointer;
    text-align: center;
    padding: 5px;
    margin: 15px 10px 16px 10px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.47px;
    color: #000000;
    height: 32px;
    border-radius: 5px;
    border: solid 1px #979797;
    background-color: #ffffff;
    position: relative;
}

.confirm-popup .popup-confirm-button:hover {
    background: #0091ff;
    color: white;
}

.tz-popup {
    border-radius: 5px;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    z-index: 10001;
    box-sizing: border-box;
    background: #272c33;
}

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

.tz-popup .tz-popup-top h3 {
    margin-top: 20px;
    text-align: left;
    padding-left: 15px;
    color: #ffffff;
}

.tz-popup .tz-popup-body {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
}

.tz-popup .tz-popup-body .welcome-broj {
    display: inline-block;
    width: 30%;
    margin-left: 13%;
    margin-top: 25%;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    text-align: center;
    color: white;
    font-size: 16pt;
    cursor: pointer;
    font-weight: 800;
    border-radius: 5px;
    background-color: #1e88e5;
    min-height: 100px;
    line-height: 100px;
    box-sizing: border-box;
}

.tz-popup .tz-popup-body .welcome-broj:hover {
    box-shadow: 10px 10px 6px 0 rgba(0, 0, 0, 0.5);
    transition: box-shadow 500ms;
}

.tz-popup .tz-popup-body .broj-question-input {
    width: 80%;
    margin-top: 30px;
    margin-left: 10%;
    height: 40px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #18191b;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 11pt;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
}

.tz-popup .tz-popup-body .broj-question-textarea {
    width: 80%;
    margin-left: 10%;
    margin-top: 40px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #18191b;
    height: 40%;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 11pt;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    border: none;
    resize: none;
    color: white;
}

.tz-popup .tz-popup-body .broj-question-send {
    width: 100px;
    float: right;
    margin-right: 10%;
    margin-top: 40px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ff6200;
    height: 40px;
    font-family: sans-serif;
    font-weight: 400;
    font-size: 11pt;
    border: none;
    outline: none;
    color: white;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

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

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

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

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

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

.jticket-popup-top .jticket-popup-button {
    float: right;
    padding: 8px;
    border-radius: 3px;
    width: 100px;
    font-size: 14px;
    margin-right: 7px;
    background-color: #4a4a4a;
    font-family: NotoSansKR, sans-serif;
    text-align: center;
    color: #fff;
}

.tz-popup .jticket-coupon {
    border: none;
    background-color: transparent;
    background-size: contain;
    position: absolute;
    cursor: pointer;
    outline: none;
    width: 18px;
    height: 18px;
    background-image: url("images/coupon.png");
    left: 10px;
    top: 10px;
}

.payment-popup {
    background: rgb(16, 16, 16);
    height: 80%;
    width: 70%;
    overflow: auto;
    border-radius: 5px;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    z-index: 10001;
    box-sizing: border-box;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
}

.payment-popup-top {
    display: flex;
    justify-content: space-between;
    margin: 10px;
}

.payment-popup-top h3 {
    padding: 10px;
    color: #4a4a4a;
    font-size: 18px;
}

.payment-popup-body {
    padding: 0 10px;
}

.coupon-popup-body {
    height: 30%;
    padding: 0 14px;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.jticket-recommender {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 10;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

.jticket-recommender:focus {
    border: 3px solid #ff6600;
}

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

.jticket-popup-content {
    overflow: scroll;
    padding: 15px;
    height: calc(100% - 95px);
}

.jticket-popup-content .notice {
    border-top: 1px solid #7a7c7d;
    margin-top: 10px;
    padding: 20px;
}

.jticket-popup-content .notice h2 {
    font-size: 9pt;
    font-weight: 300;
    margin-bottom: 3px;
    color: #7a7c7d;
}

.jticket-popup-content .blank {
    text-align: center;
    margin-top: 20%;
    color: #797979;
    font-size: 14pt;
    font-weight: 700;
}

.jticket-popup-content .jticket-card {
    width: 80%;
    margin-left: 10%;
    margin-top: 40px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #18191b;
    height: auto;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    border: none;
    resize: none;
    color: white;
}

.jticket-popup-content .jticket-card .jticket-card-top {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid white;
}

.jticket-popup-content .jticket-card .jticket-card-top h1 {
    font-family: sans-serif;
    font-weight: 500;
    font-size: 13pt;
    float: left;
}

.jticket-popup-content .jticket-card .jticket-card-top button {
    float: right;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
}

.jticket-popup-content .jticket-card .jticket-card-body {
    width: 100%;
    height: auto;
}

.table-card {
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    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 {
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    border: none;
    outline: none;
    background-color: transparent;
    color: white;
}

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

.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: #ff6200;
    float: right;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.soon {
    background-color: #ff6200;
}

.good {
    background-color: #1e88e5;
}

.book {
    background-color: #20a464;
}

#snackbar {
    min-width: 250px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 100006;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    font-size: 17px;
    border-radius: 8px;
}

#snackbar.show {
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2s;
    animation: fadein 0.5s, fadeout 0.5s 2s;
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}


@-webkit-keyframes slide {
    100% {
        right: 0px;
    }
}

@keyframes slide {
    100% {
        right: 0px;
    }
}

.jhelp-popup {
    position: absolute;
    top: 0px;
    box-sizing: border-box;
    right: -350px;
    width: 450px;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 0s;
    animation: slide 0.5s forwards;
    animation-delay: 0s;
    z-index: 10000;
    padding: 30px;
    color: white;
}

.side-inner-popup {
    position: absolute;
    top: 54px;
    box-sizing: border-box;
    right: -350px;
    width: 220px;
    height: calc(100% - 54px);
    background: rgba(29, 29, 29, 0.9);
    z-index: 97;
    color: white;
    border-left: 1px solid rgba(29, 29, 29, 0.8);
}

.jhelp-popup-bye {
    position: absolute;
    top: 60px;
    right: 450px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-weight: 700;
    font-size: 20px;
    font-family: sans-serif;
    text-align: center;
    cursor: pointer;
    line-height: 60px;
    display: none;
    z-index: 100000;
}

.jhelp-popup .jhelp-popup-bye:hover, #jnewsfeed-popup-bye:hover {
    background: rgba(255, 255, 255, 0.8);
}

.jhelp-popup-big {
    position: absolute;
    top: 0px;
    right: 450px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-weight: 700;
    font-size: 20px;
    font-family: sans-serif;
    text-align: center;
    cursor: pointer;
    line-height: 60px;
    display: none;
    z-index: 100000;
}

.jhelp-popup .jhelp-popup-big:hover {
    background: rgba(255, 255, 255, 0.8);
}

.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);
}

@-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);
    }
}

.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;
}

.jslide-popup {
    position: absolute;
    top: 54px;
    box-sizing: border-box;
    right: -500px;
    width: 600px;
    height: calc(100% - 54px);
    background: rgba(0, 0, 0, 0.8);
    /*-webkit-animation: slide 0.5s forwards;*/
    /*-webkit-animation-delay: 0s;*/
    /*animation: slide 0.5s forwards;*/
    /*animation-delay: 0s;*/
    z-index: 9999;
    padding: 30px;
    color: white;
}

#jslide-popup-background {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    background-color: rgba(56, 56, 56, 0.6);
}

.jslide-popup-bye {
    position: absolute;
    top: 54px;
    right: 600px;
    width: 33px;
    height: 33px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-weight: 700;
    font-size: 20px;
    font-family: sans-serif;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    display: none;
    z-index: 10000;
    border-radius: 5px 0 0 5px;
}

.jslide-newsfeed-popup-bye {
    position: absolute;
    top: 56px;
    right: 3px;
    width: 33px;
    height: 33px;
    background: none;
    color: white;
    font-weight: 700;
    font-size: 20px;
    font-family: sans-serif;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    display: none;
    z-index: 98;
    border-radius: 5px 0 0 5px;
}

.jslide-popup .jslide-popup-bye:hover {
    background: rgba(255, 255, 255, 0.8);
}

.jslide-popup-big {
    position: absolute;
    top: 89px;
    right: 600px;
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-weight: 700;
    font-size: 20px;
    font-family: sans-serif;
    text-align: center;
    cursor: pointer;
    line-height: 46px;
    display: none;
    z-index: 9999;
    border-radius: 5px 0 0 5px;
}

.jslide-popup-fix {
    position: absolute;
    top: 51px;
    right: 182px;
    width: 34px;
    height: 34px;
    background: none;
    color: white;
    font-weight: 700;
    font-size: 20px;
    font-family: sans-serif;
    text-align: center;
    cursor: pointer;
    line-height: 46px;
    display: none;
    z-index: 9999;
    border-radius: 5px 0 0 5px;
}

.jslide-popup .jslide-popup-big:hover {
    background: rgba(255, 255, 255, 0.8);
}

.jslide-popup .jslide-popup-i {
    height: 60%;
    width: 100%;
}

.anounce-body-area .jslide-popup-i {
    height: 60%;
    width: 100%;
}

.jslide-popup .jslide-popup-m {
    height: 40%;
    width: 96%;
    margin-left: 2%;
}

.jslide-popup .jslide-popup-m .today-input {
    font-size: 11pt;
    outline: none;
    cursor: pointer;
    border: none;
    color: white;
    height: 20px;
    background: transparent;
}

.jslide-popup .jslide-popup-m .top {
    text-align: center;
    border-bottom: 1px solid #fffeff;
    font-size: 11pt;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 15px;
    color: white;
    height: 25px;
    position: relative;
}

.jslide-popup .jslide-popup-m .content {
    position: relative;
    height: calc(100% - 25px);
    width: 100%;
    overflow: auto;
}

.jslide-popup .jslide-popup-m div table {
    width: 100%;
}

.jslide-popup .jslide-popup-m div table thead {
    font-weight: 300;
    font-size: 11pt;
}

.jslide-popup .jslide-popup-m div table tbody {
    font-weight: 300;
    font-size: 10pt;
}

.jslide-popup .jslide-popup-m div table tbody tr {
    cursor: pointer;
}

.jslide-popup .jslide-popup-m div table tbody tr:hover {
    background-color: rgba(147, 105, 142, 0.82);
}

.jslide-popup .jslide-popup-m div table tbody tr td {
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
}

.jslide-popup .jslide-popup-m div .none {
    width: 100%;
    padding-top: 50px;
    font-size: 12pt;
    color: #6B7770;
    font-weight: 500;
    text-align: center;
}

.anounce-body-area .jslide-popup-top {
    text-align: center;
    width: 100%;
    height: 40px;
}

.anounce-body-area .jslide-popup-top input {
    cursor: pointer;
    outline: none;
    font-size: 14pt;
    color: white;
    height: 100%;
    background: none;
    border: none;
    margin-top: 6px;
    margin-left: 15px;
}

.anounce-body-area .jslide-popup-top button {
    background: none;
    border: none;
    outline: none;
    font-size: 14pt;
    color: white;
    font-weight: 500;
    cursor: pointer;
}

.anounce-body-area .jslide-popup-top #jslide-popup-count {
    position: absolute;
    left: 40px;
    top: 48px;
    font-weight: 500;
}

.anounce-body-area .jslide-popup-m {
    height: 40%;
    width: 96%;
    margin-left: 2%;
}

.anounce-body-area .jslide-popup-m .today-input {
    font-size: 11pt;
    outline: none;
    cursor: pointer;
    border: none;
    color: white;
    height: 20px;
    background: transparent;
}

.anounce-body-area .jslide-popup-m .top {
    text-align: center;
    border-bottom: 1px solid #fffeff;
    font-size: 11pt;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 15px;
    color: white;
    height: 25px;
}

.anounce-body-area .jslide-popup-m .content {
    position: relative;
    height: calc(100% - 25px);
    width: 100%;
    overflow: auto;
}

.anounce-body-area .jslide-popup-m div table {
    width: 100%;
}

.anounce-body-area .jslide-popup-m div table thead {
    font-weight: 300;
    font-size: 11pt;
}

.anounce-body-area .jslide-popup-m div table tbody {
    font-weight: 300;
    font-size: 10pt;
}

.anounce-body-area .jslide-popup-m div table tbody tr {
    cursor: pointer;
}

.anounce-body-area .jslide-popup-m div table tbody tr:hover {
    background-color: rgba(147, 105, 142, 0.82);
}

.anounce-body-area .jslide-popup-m div table tbody tr td {
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
}

.anounce-body-area .jslide-popup-m div .none {
    width: 100%;
    padding-top: 50px;
    font-size: 12pt;
    color: #6B7770;
    font-weight: 500;
    text-align: center;
}

.jslide-popup .jslide-popup-top {
    text-align: center;
    width: 100%;
    height: 40px;
}

.jslide-popup .jslide-popup-top input {
    cursor: pointer;
    outline: none;
    font-size: 14pt;
    color: white;
    height: 100%;
    background: none;
    border: none;
    margin-top: 6px;
    margin-left: 15px;
}

.jslide-popup .jslide-popup-top button {
    background: none;
    border: none;
    outline: none;
    font-size: 14pt;
    color: white;
    font-weight: 500;
    cursor: pointer;
}

.jslide-popup .jslide-popup-top #jslide-popup-count {
    /*position: absolute;*/
    /*left: 40px;*/
    /*top: 48px;*/
    width: 200px;
    height: 47px;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 30px;
    font-weight: 100;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: -2.73px;
    color: #ffffff;
    line-height: 47px;
}

.jslide-popup .jslide-popup-body {
    width: 100%;
    height: calc(100% - 40px);
}

.anounce-body-area .jslide-popup-body {
    width: 100%;
    height: calc(100% - 40px);
}

.jslide-popup .jslide-popup-btn {
    border: 1px solid white;
    color: white;
    position: absolute;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    background-color: #262c32;
    font-size: 9pt;
    font-weight: 300;
    left: 45px;
    bottom: 8px;
    padding: 10px 20px 10px 20px;
    box-sizing: border-box;
}

.anounce-body-area .jslide-popup-btn {
    border: 1px solid white;
    color: white;
    position: absolute;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    background-color: #262c32;
    font-size: 9pt;
    font-weight: 300;
    left: 45px;
    bottom: 8px;
    padding: 10px 20px 10px 20px;
    box-sizing: border-box;
}

.broj-sticker {
    z-index: 10;
    position: absolute;
    right: 0px;
    top: 200px;
    writing-mode: tb-rl;
    padding: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 10pt;
    border-radius: 5px 0px 0px 5px;
    cursor: pointer;
}

.broj-sticker:hover {
    background: #91e8e1;
}

.add-date-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    color: white;
    border-radius: 100%;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #1e88e5;
    font-size: 14pt;
    font-weight: 500;
}

.bye-date-btn {
    position: absolute;
    top: 5px;
    right: 60px;
    width: 50px;
    height: 50px;
    color: white;
    border-radius: 100%;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #ff6200;
    font-size: 14pt;
    font-weight: 300;
}

.check-date-btn {
    position: absolute;
    top: 5px;
    right: 115px;
    width: 50px;
    height: 50px;
    color: white;
    border-radius: 100%;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #5add4c;
    font-size: 14pt;
    font-weight: 300;
}

.add-input {
    position: absolute;
    bottom: 8px;
    right: 185px;
    width: 100px;
    height: 30px;
    color: black;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #ffffff;
    font-size: 9pt;
    font-weight: 300;
}

.push-button {
    position: absolute;
    bottom: 49px;
    right: 15px;
    width: 82px;
    height: 30px;
    border: 1px solid white;
    color: white;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    background-color: #272c33;
    font-size: 9pt;
    font-weight: 300;
}

.fix-btn {
    position: absolute;
    bottom: 8px;
    right: 185px;
    width: 80px;
    height: 30px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #20a464;
    font-size: 9pt;
    font-weight: 300;
}

.add-btn {
    position: absolute;
    bottom: 8px;
    right: 100px;
    width: 80px;
    height: 30px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #1e88e5;
    font-size: 9pt;
    font-weight: 300;
}

.bye-btn {
    position: absolute;
    bottom: 8px;
    right: 15px;
    width: 80px;
    height: 30px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #ff6200;
    font-size: 9pt;
    font-weight: 300;
}

.jpay-history-table {
    color: #747d8a;
    cursor: pointer;
    font-size: 11pt;
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 900px;
    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 {
    color: #fff;
    text-align: center;
}

.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;
}

.blank-h {
    text-align: center;
    color: #979797;
    margin-top: 30%;
}

.option-tiny-popup {
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
    position: absolute;
    padding: 10px;
    height: auto;
    width: 700px;
    z-index: 4;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 1);
    border-radius: 5px;
    color: white;
    font-size: 9pt;
    font-weight: 300;
}

.option-tiny-popup img {
    width: 15px;
    height: 15px;
    margin-bottom: 5px;
}

.option-tiny-popup .option-tiny-popup-top {
    height: 20px;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
}

.option-tiny-popup .option-tiny-popup-body {
    height: calc(100% - 20px);
    overflow: auto;
}

.option-tiny-popup .option-tiny-popup-body p {
    display: block;
}

.option-tiny-popup .option-tiny-popup-body select {
    outline: none;
    font-size: 10pt;
    color: white;
    height: 30px;
    cursor: pointer;
    margin: 5px 6px 15px 6px;
    background: black;
    border: 1px solid white;
}

.option-tiny-popup .option-tiny-popup-body input {
    padding-left: 5px;
    outline: none;
    font-size: 9pt;
    color: white;
    height: 30px;
    cursor: pointer;
    border-radius: 5px;
    background: none;
    box-sizing: border-box;
    border: 1px solid white;
    margin: 5px 6px 15px 0px;
}

.option-tiny-popup .option-tiny-popup-body textarea {
    background: none;
    resize: none;
    border: none;
    padding: 10px;
    height: 60px;
    width: 90%;
    color: white;
}

.option-tiny-popup .option-tiny-popup-body .input-date {
    width: 64%;
    float: left;
}

.option-tiny-popup .option-tiny-popup-body .input-date-half {
    width: 47%;
}

.option-tiny-popup .option-tiny-popup-body .input-number {
    width: 20%;
    margin-left: 5px;
}

.option-tiny-popup .option-tiny-popup-body a {
    color: rgb(238, 233, 233);
    font-size: 11pt;
    top: -7px;
    left: 6px;
    position: relative;
    font-weight: 400;
    margin-right: 38%;
}

.option-tiny-popup .off button {
    font-size: 8pt;
    font-weight: 500;
    color: #cccccc;
    cursor: pointer;
    width: 32%;
    background: none;
    outline: none;
    border: none;
}

.option-tiny-popup .off button:hover {
    color: #ff6200;
}

/* broj select */

.broj-select {
    box-sizing: border-box;
}

.broj-select p {
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    padding: 2px;
    font: 12px/20px "돋움", "dotum";
    height: 28px;
    color: rgb(51, 51, 51);
    overflow: hidden;
    cursor: pointer;
    font-size-adjust: none;
    font-stretch: normal;
    margin: 0 auto;
}

.broj-select p.on {
    background-position: right -160px;
    border: 1px solid rgb(0, 144, 227);
    color: rgb(0, 144, 227);
}

.broj-select .broj-sub {
    padding: 6px 0px;
    box-sizing: border-box;
    border: 1px solid rgb(171, 173, 179);
    left: 0px;
    top: 0px;
    display: none;
    position: relative;
    z-index: 10;
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 168px;
    background-color: rgb(255, 255, 255);
    margin: 0 auto;
}

.broj-select .broj-sub {
    width: 100%;
}

.broj-select .broj-sub .brojOptinList {
    width: 100%;
    overflow: hidden;
    float: left;
    display: inline-block;
    cursor: pointer;
    font: 12px/20px "돋움", "dotum";
}

.broj-select .broj-sub .brojOptinList:hover {
    background-color: rgb(108, 108, 108);
}

.broj-select .broj-sub .brojOptinList:hover li {
    color: rgb(255, 255, 255);
}

.broj-select .broj-sub .brojOptinList li {
    padding: 5px 15px;
    color: rgb(51, 51, 51);
}

.broj-select .broj-sub .brojOptinList li.brojSelectName {
    padding: 5px;
    width: 100%;
    display: inline;
}

#broj-attendance-browser-table {
    min-width: 100%;
    border: 1px solid #444444;
    border-collapse: collapse;
}

#broj-attendance-browser-table th, #broj-attendance-browser-table td {
    border: 1px solid #444444;
    min-width: 100px;
    height: 35px;
}

.broj-cover {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background: #131313a3;
}

.broj-cover-pos {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #131313a3;
}

.broj-cover-pos .off {
    font-size: 25pt;
    font-weight: 800;
    position: absolute;
    cursor: pointer;
    color: white;
    right: 10%;
    top: 4%;
    z-index: 1000054;
}

.broj-popup-cover {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background: #424242a3;
}

.broj-confirm-cover {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background: rgba(56, 56, 56, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.broj-confirm-cover .broj-confirm-popup {
    width: 480px;
    min-height: 160px;
    height: auto;
    border-radius: 5px;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.6);
    background-color: #ffffff;
    padding: 15px;
}

.broj-confirm-cover .broj-confirm-popup h2 {
    height: 23px;
    font-family: IropkeBatangM, sans-serif;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.6px;
    color: #000000;
    width: 100%;
    text-align: left;
}

.broj-confirm-cover .broj-confirm-popup .broj-confirm-contents {
    width: 100%;
    min-height: 75px;
    height: auto;
    padding: 15px 0 20px 0;
    font-family: IropkeBatangM, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.47px;
    color: #000000;
}

.broj-confirm-cover .broj-confirm-popup .btn-zone {
    width: 100%;
    height: 34px;
}

.broj-confirm-cover .broj-confirm-popup .btn-zone div {
    float: right;
    width: max-content;
    padding: 6px 15px;
    height: 38px;
    border-radius: 5px;
    border: solid 1px #979797;
    background-color: #ffffff;
    font-family: iropke batang;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
}

.broj-cover .off {
    font-size: 25pt;
    font-weight: 800;
    position: absolute;
    cursor: pointer;
    color: white;
    right: 10%;
    top: 4%;
    z-index: 1000054;
}

.broj-jpos-popup {
    box-sizing: border-box;
    z-index: 5;
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    box-shadow: 14px 14px 16px 0 rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    border: 20px solid #424242;
}

.broj-tiny-popup {
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    background: #1d88e5;
    padding: 0px;
    width: auto;
    cursor: pointer;
}

.broj-tiny-popup img {
    border-radius: 3px;
    width: 22px;
    height: 22px;
    margin: 4px;
    text-align: center;
    float: left;
}

.broj-tiny-popup img:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.jlist .credit-button, .jlistr .credit-button {
    background: #ff2238;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 4px;
    font-size: 9pt;
    font-weight: 300;
    cursor: pointer;
}

.jlist .credit-button:hover, .jlistr .credit-button:hover {
    background: #1e88e5;
}

.simple-popup {
    display: none;
    position: absolute;
    z-index: 100000;
    height: auto;
    border-radius: 3px;
    background: #d4d6d8;
}

.simple-popup .border {
    height: 1px;
    width: 100%;
    background: #6B7770;
}

.simple-popup .level {
    font-size: 10pt;
    outline: none;
    background: transparent;
    display: block;
    width: 100%;
    min-height: 25px;
    padding: 5px;
    box-sizing: border-box;
    border: none;
}

.simple-popup select {
    height: 30px;
}

.simple-popup button {
    font-size: 10pt;
    height: 25px;
    background: transparent;
    border: none;
    outline: none;
    width: 50%;
    cursor: pointer;
}

.simple-popup button:hover {
    background: #6B7770;
    color: white;
}

.simple-popup .level label {
    margin: 5px;
    font-size: 10pt;
    line-height: 20px;
    cursor: pointer;
}

.simple-popup .level input {
    margin-right: 3px;
}

#jgmd-gap-count-input {
    margin-top: 15px;
    font-size: 10pt;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    color: #9e9e9e;
    background: transparent;
    text-align: center;
    width: 80px;
}

.broj-translate-select {
    float: right;
    width: 120px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    height: 40px;
    font-size: 12pt;
}

#broj-iframe {
    border: none;
    width: 100%;
    height: 100%;
}

#j-calendar-p {
    background-color: rgb(23, 25, 30);
    width: 100%;
    color: #89898b;
    text-align: center;
    transform: rotate(0deg);
    font-family: "ProductSans-Bold", Helvetica, Arial, serif;
    font-size: 11px;
}

#j-calendar-nav {
    width: 100%;
    height: 50px;
    color: white;
}

#j-calendar-table {
    width: 100%;
    cursor: pointer;
    height: calc(100% - 50px);

}

#j-calender-title {
    font-family: "ProductSans-Bold", Helvetica, Arial, sans-serif;
    font-size: 14px;
    float: left;
    width: 45%;
    text-align: left;
    padding-top: 8%;
    padding-left: 5%;
    color: white;
}

.day-cell:hover {
    background: #454b4f;
    background-size: 100% 100%;
    color: white;
    border-radius: 30px;
}

.day-cell:active {
    background: #212426;
    background-size: 100% 100%;
    color: black;
    border-radius: 30px;
}

.day-top {

}

.sunday {

}

.saturday {

}

.j-calendar-btn {
    float: right;
    padding-left: 5%;
    padding-right: 2%;
    height: 30%;
    padding-top: 8%;
    width: 10%;
    cursor: pointer;
    font-family: "AppleSDGothicNeo-Bold", Helvetica, Arial, serif;
}

.calendar_arrow_btn {
    height: 60%;
}

.rotate180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.prevcell {
    color: rgba(165, 166, 168, 1.0);
}

#j-trainerlist-zone {
    width: 100%;
    height: 100%;
}

.popup-context-menu {
    position: absolute;
    display: inline-block;
    max-width: 26em;
    padding: .25em 0;
    margin: .3em;
    font-family: inherit;
    font-size: inherit;
    list-style-type: none;
    background: #fff;
    border: 1px solid #bebebe;
    border-radius: .2em;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    z-index: 2;
}

.popup-context-menuli:hover {
    background: rgb(229, 229, 231);
}

#j-trainer-search {
    width: 100%;
    height: 75px;
    padding: 5px 7px 5px 9px;
    margin-bottom: 2px;
}

#j-trainerlist-area {
    width: 100%;
    height: calc(100% - 75px);
    border-top: 1px solid #7a7c7d;
    padding: 5px 0 0 0;
    overflow: auto;
}

#trainer-search-icon {
    height: 20px;
    width: 20px;
    float: left;
}

#j-trainer-input {
    width: 75%;
    height: 25px;
    margin: 0 0 0 22px;
    background: rgb(23, 25, 29);
    border: none;
    color: #89898b;
    text-align: left;
    font-weight: 400;
    font-size: 10pt;
    outline: none;
    margin-top: 3px;
}

.j-trainer-profile {
    width: 100%;
    height: 49px;
}

.j-trainer-profile-img {
    width: 25px;
    height: 25px;
    width: 25px;
    border-radius: 50px;
    margin: 8px 14px 5px 7px;
}

.j-trainer-profile-name {
    height: 35px;
    margin: 4px 2px 4px 7px;
    width: 133px;
    float: right;
    color: rgb(255, 255, 255);
    font-weight: 400;
    font-size: 14px;
    line-height: 2.5;
    cursor: pointer;
}

.j-trainer-profile-label {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: 7px;
    float: right;
    border-radius: 5px;
    margin-right: 10px;
}

.j-trainer-profile-nameP {
    height: 100%;
    width: 100px;
    float: left;
    color: rgb(255, 255, 255);
    font-weight: 400;
    font-size: 14px;
    line-height: 2.5;
    cursor: pointer;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-side-btn {
    margin-top: 8px;
    background-color: #272c33;
    outline: none;
    color: white;
    font-size: 10pt;
    border: none;
    border-radius: 3px;
    font-weight: 400;
    cursor: pointer;
    height: 30px;
    width: 49%;
}

#bj-attendance-popup {
    width: 600px;
    height: 650px;
    z-index: 100000;
    position: absolute;
}

#bj-attendance-pictureBtn {
    text-align: center;
    width: 100%;
    height: 60px;
    color: white;
    position: absolute;
    font-size: 150%;
    bottom: 0px;
    line-height: 60px;
    background: #2B3F6B;
    font-weight: bold;
}

.broj-customer-popup .broj-customer-side-can {
    position: absolute;
    display: block;
    width: 35px;
    left: -36px;
    height: auto;
}

.broj-customer-popupbtn {
    height: 130px;
    width: 35px;
    background-color: #121212;
    outline: none;
    color: white;
    font-size: 10pt;
    padding: 8px;
    border: none;
    border-bottom: 1.5px solid black;
    font-weight: 400;
    cursor: pointer;
    margin-top: 2px;
}

.broj-customer-popupbtn-on {
    background: #f9f9f9;
    color: black;
}

.broj-customer-popup .broj-customer-middle-can .middle-center {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
}

.broj-customer-popup .broj-customer-middle-can .middle-right {
    float: left;
    width: 200px;
    height: 100%;

}

.broj-customer-popup .broj-customer-side-can .broj-customer-popupbtn .tab-icon {
    width: 18px;
    height: 18px;
    padding-bottom: 5px;
}

.newsfeeds-title-div {
    background-color: rgba(255, 255, 255, 0.0);
    height: 25px;
    width: calc(100% - 25px);
    margin: 12.5px;
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
    font-family: 'AppleSDGothicNeo-ExtraBold', Helvetica, Arial, serif;
    font-size: 15.0px;
    color: white;
    text-align: center;
    line-height: 19.0px;
    border-bottom: 2px solid #FE6821;
}

.anounce-tab-area {
    width: calc(100% - 25px);
    height: 40px;
    margin: 12.5px;
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
    font-family: 'AppleSDGothicNeo-ExtraBold', Helvetica, Arial, serif;
    font-size: 15.0px;
    color: white;
}

#broj-notice-title {
    padding-right: 5px;
    position: relative;
    width: 290px;
    float: right;
    margin-top: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
}

#broj-notice-title-div {
    color: white;
}

#broj-notice-title:hover {
    text-decoration: underline;
}

.anounce-tab-area .anounce-popup-tab {
    width: 50px;
    padding: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #2e2e2e;
    border-bottom: #337ab7 1px solid;
    float: left;
    margin-right: 4px;
    text-align: center;
    cursor: pointer;
}

.anounce-tab-area .anounce-popup-tab.active {
    color: white;
    border-bottom: #337ab7 2px solid;
    font-size: 16px;
    font-weight: 600;
    transition-property: font-size, color, font-weigh, border-bottom;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
    transition-delay: 0s;
}

.brand-select {
    background: #E91E63;
    border: none;
    color: white;
    width: 50px;
    float: left;
    height: 35px;
    margin-top: 2px;
    margin-left: 2px;
    outline: none;
    z-index: 100;
}

.suggest-ticket {
    position: absolute;
    top: 30px;
    color: red;
    background: #ffffff;
    left: 5%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid;
    cursor: pointer;
    font-size: 14pt;
    font-weight: 600;
}

.suggest-ticket {
    position: absolute;
    top: 30px;
    color: red;
    background: #ffffff;
    left: 5%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid;
    cursor: pointer;
    font-size: 14pt;
    font-weight: 600;
}

.notice-ticket h2 {
    font-weight: 400;
    font-size: 10pt;
    color: #cccccc;
}

.broj-customer-middle-can .can-bottom-top .customer_tab_button {
    cursor: pointer;
    width: 35px;
    height: 31px;
    background: #f9f9f9;
    border-radius: 5px;
    color: black;
    font-size: 20pt;
    font-weight: 400;
    text-align: center;
    float: right;
    margin: 2px 0 0 3px;
    border: none;
}

.handover-table {
    border-spacing: 1px;
    text-align: center;
    line-height: 1.5;
    border-collapse: collapse;
}

.handover-table th {
    width: 155px;
    padding: 10px;
    font-weight: 500;
    color: #b1afaf;
    background: #2e2e2e;
    border: 1px solid #3d3d3d;
    vertical-align: middle;
    text-align: center;
}

.handover-table td {
    width: 155px;
    padding: 10px;
    color: #b1afaf;
    background: #1d1d1d;
    border: 1px solid #3d3d3d;
    vertical-align: middle;
    text-align: center;
}

.handover-unit-title {
    color: white;
    margin: 5px 0;
    text-align: left;
    position: relative;
}

.handover-input-box {
    background: #363636;
    border: 1px solid #464646;
    color: #626262;
}

.middle-center .middle-can-top .customer-tickets-area {
    width: calc(100% - 20px);
    margin: 0 10px 10px 10px;
    background: #2e2e2e;
    height: 100%;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.middle-center .middle-can-top .customer-tickets-area .customer-tickets-zone {
    width: calc(50% - 12px);
    height: 100%;
    float: left;
    overflow: scroll;
}

.middle-center .middle-can-top .customer-tickets-area .customer-tickets-title {
    width: 100%;
    height: 30px;
    float: left;
    text-align: center;
    color: #fcfcfc;
}

.middle-center .middle-can-top .customer-tickets-area .customer-tickets-unit {
    width: 100%;
    height: auto;
}

.customer-tickets-unit .unit-title {
    float: left;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    padding: 13px 0 8px 0;
    height: 40px;
    color: #fe4301;
}

.customer-tickets-unit .unit-contents-box {
    float: left;
    border: 1px #737373 solid;
    height: 130px;
    color: #737373;
    font-size: 12px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;
    margin: 5px 0;
    position: relative;
}

.customer-tickets-unit .unit-contents-box:hover {
    background: #272727;
}

.customer-tickets-unit .unit-contents-box .contents-box-title {
    width: 100%;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    border-bottom: 1px solid #737373;
    overflow: hidden;
}

.customer-tickets-unit .unit-contents-box .contents-box-middle {
    width: 100%;
    height: 25px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    line-height: 24px;
    border-bottom: 1px solid #737373;
}

.customer-tickets-unit .unit-contents-box .contents-box-bottom {
    width: 100%;
    height: 25px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    line-height: 25px;
}

.customer-tickets-unit .unit-contents-box .bye-button {
    width: 18px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: 3px;
    cursor: pointer;
}

.customer-tickets-unit .unit-contents-box .fix-label {
    position: absolute;
    bottom: 5px;
    right: 3px;
    font-size: 12px;
    color: #a7a7a7;
    text-decoration: underline;
    cursor: pointer;
}

.middle-can-top .customer-tickets-area #buy-ticket-btn {
    position: absolute;
    right: 5px;
    width: fit-content;
    top: 5px;
    background: #fa6401;
    color: white;
    padding: 5px;
    border-radius: 3px;
    border: none;
    font-size: 9pt;
    cursor: pointer;
    outline: none;
}

.handover-table .handover-result-input {
    float: left;
    outline: none;
    background: #363636;
    border: 1px solid #464646;
    color: #b1afaf;
    width: 40px;
    height: 20px;
    text-align: center;
    margin-right: 4px;
}

.middle-can-top .customer-tickets-area .customer-tickets-zone .edit-btn {
    float: right;
    right: 5px;
    width: fit-content;
    background: #fa6401;
    color: white;
    padding: 3px;
    border-radius: 3px;
    border: none;
    font-size: 8pt;
    cursor: pointer;
    outline: none;
}

.custom-menu {
    width: 85px;
    height: min-content;
    padding: 8px 0 8px 0;
    margin: 0;
    border-radius: 5px;
    border: 1px solid #555;
    background: #222;
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    z-index: 101;
    display: flex;
    flex-direction: column;
}

.custom-menu .custom-menu-item {
    text-align: center;
    font-size: 16px;
    padding: 2px 11px 2px 10px;
    margin: 0 3px;
    border-radius: 3px;
    color: #ccc;
    cursor: pointer;
}

.custom-menu .custom-menu-item:hover {
    background: #505050;
}

.step-popup {
    width: 500px;
    left: calc((100% - 500px) / 2);
    position: fixed;
    height: 80%;
    top: 10%;
}

.step-popup .step-popup-img {
    width: 500px;
    height: 160px;
    float: left;
}

.step-popup .step-popup-body {
    overflow: auto;
    background: white;
    float: left;
    width: 100%;
}

.step-popup .step-popup-body .body-son {
    width: 100%;
    margin-top: 15px;
    height: auto;
    cursor: pointer;
}

.step-popup .step-popup-body .body-son .body-son-check {
    position: absolute;
    margin-left: 15px;
    width: 20px;
}

.step-popup .step-popup-body .body-son .body-son-content {
    margin-left: 45px;
    margin-right: 10px;
    padding-top: 2px;
    width: calc(100% - 50px);
    font-size: 12pt;
}

.step-popup .step-popup-body .body-count {
    width: 100%;
    height: 5px;
    margin-top: 20px;
    background: #cccccc;
}

.step-popup .step-popup-body .body-count div {
    height: 100%;
    float: left;
    background: #5dcc00;
}

.step-popup .step-popup-body .body-a {
    margin-right: 15px;
    font-size: 10pt;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.2px;
    color: #ff6400;
    cursor: pointer;
    float: right;
    text-decoration: underline;
}

.step-popup .step-popup-bottom {
    width: 100%;
    height: 60px;
    float: left;
    background: #1e1e1e;
}

.step-popup .step-popup-bottom .step-popup-button {
    border-radius: 3px;
    width: 50%;
    height: 100%;
    color: white;
    font-size: 10pt;
    border: none;
    float: left;
    cursor: pointer;
    outline: none;
}

.step-popup .step-popup-bottom .step-popup-button:hover {
    font-weight: 600;
}

.j-attendance-list {
    padding: 10px;
}

.j-attendance-list .j-attendance-top {
    height: 47px;
    margin-bottom: 27px;
    margin-left: 7px;
    justify-content: left;
    flex-direction: row;
}

.j-attendance-list .j-attendance-body {
    height: calc(100% - 74px);
    position: relative;
}

.j-attendance-list .j-attendance-body .customer-control-btn-zone {
    position: absolute;
    right: 0px;
    top: -30px;
    width: 472px;
    height: 27px;
    justify-content: space-around;
}

.j-attendance-list .j-attendance-body .customer-control-btn-zone .customer-control-btn {
    width: 113px;
    height: 27px;
    border-radius: 3px;
    background: #7f7f7f;
    cursor: pointer;
}

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

.broj-cover .flex-box {
    flex-direction: row;
}

.j-attendance-list .j-attendance-top .j-attendance-standard-date {
    width: 185px;
    height: 45px;
    font-family: NotoSansKR, sans-serif;
    font-size: 30px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: -2.73px;
    color: #ffffff;
    display: inline-block;
    line-height: 45px;
}

.j-attendance-list .j-attendance-top .j-attendance-date-btn {
    color: #ff6200;
    font-size: 28px;
    font-weight: 100;
    padding-bottom: 5px;
}

.j-attendance-list .j-attendance-body .customer-list-zone {
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    overflow: scroll;
    flex-direction: row;
}

.customer-info-box {
    width: 231px;
    height: 378px;
    border-radius: 5px;
    background-color: #1e1e1e;
    margin: 7px;
    padding: 10px;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid #1e1e1e;
}

.customer-info-box:hover {
    border: 1px solid rgb(0, 100, 255);
}

.customer-info-box.active {
    border: 1px solid rgb(0, 100, 255);
}

.customer-info-box .margin-left {
    margin-left: 0px;
}

.customer-info-box .margin-right {
    margin-right: 0px;
}

.customer-info-box .customer-info-top {
    width: 100%;
    height: 20px;
}

.customer-info-box .customer-info-top .customer-info-x {
    float: right;
    width: 16px;
    height: 16px;
    text-align: right;
    font-size: 20px;
    color: #979797;
    cursor: pointer;
}

.customer-info-box .customer-info-photo {
    width: 100%;
    height: 150px;
    margin: 5px 0 4px 0;
    position: relative;
    border-radius: 5px;
}

.customer-info-box .customer-info-pass {
    width: 100%;
    height: max-content;
    justify-content: space-around;
    flex-direction: column;
    gap: 3px;
}

.customer-info-box .customer-info-top .customer-status {
    width: 60px;
    height: 20px;
    border-radius: 5px;
    background-color: #d4e8e2;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.27px;
    color: #000000;
    float: left;
}

.customer-info-box .customer-info-top .visitoer-customer-status {
    width: 60px;
    height: 20px;
    border-radius: 5px;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.27px;
    float: left;
}


.customer-info-box .customer-info-top .vaccine-date-none-btn{
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    margin: 0px 0 0px 8px;
    width: max-content;
    height: 22px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #fe685a;
    border-radius: 3px;
    padding: 0px 5px;
}
.customer-info-box .customer-info-top .vaccine-date-none-btn>img{
    width: 16px;
    height: 16px;
    margin-left: 5px;
}
.customer-info-box .customer-info-top .vaccine-img-btn{
    margin: 2px 0 4px 8px;
    width: 84px;
    height: 23px;
    display: inline-flex;
    font-size: 10pt;
    font-weight: 400;
}

.customer-info-box .customer-info-top .vaccine-img-btn>img{
    width: 100%;
    height: 100%;
}

.customer-info-photo .photo-img {
    max-width: 100%;
    height: 100%;
}

.customer-info-photo .profile-area:hover {
    background: #8c8c8c94;
}

.customer-info-photo .profile-area {
    width: 211px;
    height: 43px;
    border-radius: 5px;
    background-color: rgba(17, 17, 17, 0.5);
    position: absolute;
    bottom: 0px;
    padding: 2px 0 2px 10px;
}

.customer-info-photo .profile-area h4 {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 20px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.82px;
    color: #ffffff;
}

.customer-info-photo .profile-area span {
    font-family: NotoSansKR, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: -1.27px;
    color: #ff4300;
    float: left;
}

.customer-info-photo .profile-area span div {
    font-family: NotoSansKR, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: -1.09px;
    color: #ffffff;
    padding-left: 3px;
    height: 14px;
    display: inline-block;
    position: relative;
    bottom: 2px
}

.customer-info-box .customer-info-pass .pass-uint-area {
    width: 100%;/*211px;*/
    height: 56px;
    border-radius: 3px;
    background-color: #2e2e2e;
    padding: 5px;
}

.customer-info-box .customer-info-pass .pass-uint-area .pass-uint-icon {
    width: 36px;/*48px;*/
    height: 46px;
    border-radius: 5px;
    float: left;
}

.customer-info-box .customer-info-pass .pass-uint-area .pass-uint-icon img {
    width: 32px;
    height: 32px;
}

.customer-info-box .customer-info-pass .pass-uint-area .pass-uint-info {
    width: calc(100% - 36px);/*153px;*/
    height: 100%;
    padding: 0 0 0 8px;
    float: right;
}

.height-half {
    width: 100%;
    height: 50%;
}

.text-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

.customer-info-box .customer-info-pass .pass-uint-area .pass-uint-info .pass-ticket-name {
    width: 146px;
    height: 17px;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.27px;
    color: #ffffff;
}

.customer-info-box .customer-info-pass .pass-uint-area .pass-uint-info .day-form {
    margin: 0;
    width: max-content;
    background: none;
    font-size: 12px;
}

.day-form {
    padding: 1px;
    width: 50px;
    height: 18px;
    border-radius: 3px;
    background-color: #585858;
    font-family: "AppleSDGothicNeo-SemiBold", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
    margin: 0 5px;
    text-align: center;
}

.remaining-day {
    position: relative;
    width: 100%;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.27px;
    color: #ffffff;
    justify-content: left;
    flex-direction: row;
}

.other-ticket {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.09px;
    color: #7f7f7f;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 5px;
}

.pass-locker-name {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.09px;
    color: #a4a4a4;
    padding-right: 4px;
}

.broj-detail-popup {
    position: absolute;
    width: 180px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 0 10px 0 #000000;
    border: solid 1px #979797;
    background-color: #353535;
    z-index: 100;
    padding: 5px 10px;
}

/*.broj-detail-popup:after {*/
/*    border-top: 0px solid #353534;*/
/*    border-left: 8px solid transparent;*/
/*    border-right: 0px solid transparent;*/
/*    border-bottom: 12px solid #353535;*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 15px;*/
/*    left: -9px;*/
/*}*/

/*.broj-detail-popup:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 12px;*/
/*    left: -13px;*/
/*    border-width: 20px 20px 0;*/
/*    border-style: solid;*/
/*    border-color: #979797 transparent;*/
/*    border-top: 3px solid transparent;*/
/*    border-left: 11px solid transparent;*/
/*    border-right: 0px solid transparent;*/
/*    border-bottom: 13px solid #979797;*/
/*    display: block;*/
/*    width: 2px;*/
/*}*/


.broj-detail-popup h3 {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 16px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.19px;
    color: #ffffff;
}

.broj-detail-popup .detail-unit {
    width: 160px;
    height: max-content;/*50px;*/
    margin: 5px 0;
    border-radius: 3px;
    background-color: #1e1e1e;
    padding: 5px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.detail-unit h4 {
    width: 154px;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.27px;
    color: #ffffff;
}

.detail-unit .unit-info-area {
    width: 100%;
    /*height: 18px;*/
    justify-content: flex-start;
    margin-top: 3px
}

.detail-unit .unit-info-area .day-form {
    margin-left: 0;
    display: inline-block;
}

/*--------------------------------------new customer popup-------------------------*/

.broj-customer-detail-parent {
    width: 88%;
    position: relative;
    height: calc(95% - 40px);
    max-height: 850px;
    box-shadow: 14px 14px 24px 24px rgba(0, 0, 0, 0.5);
    z-index: 100;
    box-sizing: border-box;
    background: #353535;
    font-family: sans-serif;
    border-radius: 3px;
}

.broj-popup-off {
    cursor: pointer;
    width: 39px;
    height: 42px;
    position: absolute;
    top: 0px;
    right: -40px;
    border-radius: 5px;
    font-size: 20pt;
    font-weight: 400;
    text-align: center;
    line-height: 48px;
}

.broj-customer-namezone {
    /*width: max-content;*/
    width: 100%;
    height: max-content;
    top: -33px;
    left: 0px;
    position: absolute;
    z-index: 100;
    /*background: #353535;*/
    border-radius: 3px 3px 0 0;
}

.broj-customer-namezone .add-customer-btn {
    float: right;
    width: 14px;
    height: 14px;
    padding: 9px 10px;
    cursor: pointer;
}

.broj-customer-namezone .customer-nametag {
    width: max-content;
    height: 35px;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 20px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    float: left;
    padding: 0 12px;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    min-width: 127px;
    background: #353535;
}
.broj-customer-namezone .customer-nametag .vaccine-date-none-btn{
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    margin: 2px 0 4px 8px;
    width: max-content;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fe685a;
    border-radius: 3px;
    padding: 0px 5px;
}
.broj-customer-namezone .customer-nametag .vaccine-date-none-btn>img{
    width: 16px;
    height: 16px;
    margin-left: 5px;
}
.broj-customer-namezone .customer-nametag .vaccine-img-btn{
    margin: 2px 0 4px 8px;
    width: 84px;
    height: 23px;
    display: inline-flex;
    font-size: 10pt;
    font-weight: 400;
}

.broj-customer-namezone .customer-nametag .vaccine-img-btn>img{
    width: 100%;
    height: 100%;
}

/*.broj-customer-namezone .customer-nametag.active:after{*/
/*    background-color: #efefef;*/
/*    bottom: 11px;*/
/*    content: '';*/
/*    display: block;*/
/*    height: 20px;*/
/*    right: 21%;*/
/*    position: absolute;*/
/*    transform: translate(-50%,0);*/
/*    width: 1px;*/
/*}*/

.broj-customer-namezone .add-customer-btn:hover {
    background: rgb(39, 39, 39);
}

.customer-detail-body {
    position: relative;
    width: 100%;
    height: 100%;
}

.detail-popup-info {
    width: 100%;
    height: 260px;
    border-bottom: #181818 3px solid;
}

.detail-popup-info .ticket-info {
    border-left: solid 1px #979797;
    width: 575px;
    height: calc(100% - 50px);
    float: right;
    margin: 3px 0;
}

.detail-popup-info .ticket-info .ticket-info-top {
    width: 100%;
    height: 46px;
    padding: 15px;
    float: right;
    border-bottom: solid 1px #979797;
}

.detail-popup-info .ticket-info .ticket-info-top .product-count {
    float: left;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #7f7f7f;
}

.detail-popup-info .ticket-info .ticket-info-bottom {
    width: 100%;
    height: calc(100% - 46px);
    padding: 15px;
    float: right;
}

.detail-popup-info .ticket-info .ticket-info-bottom .ticket-status-box {
    width: 25%;
    height: 100%;
    float: left;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding-left: 3px;
    position: relative;
}

.detail-popup-info .ticket-info .ticket-info-bottom .ticket-status-box .ticket-date {
    font-family: ProductSans, sans-serif;
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #929292;
}

.detail-popup-info .ticket-info .ticket-info-bottom .ticket-status-box .ticket-date span {
    font-family: ProductSans, sans-serif;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fa6400;
}

.detail-popup-info .ticket-info .ticket-info-bottom .ticket-status-box .ticket-name {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 13px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
}

.detail-popup-info .ticket-info .ticket-info-bottom .ticket-status-box .ticket-status-active {
    width: 64px;
    height: 17px;
    border-radius: 9px;
    background-color: #ffefe5;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000000;
    position: relative;
    left: -3px;
}

#lesson-left-btn {
    position: absolute;
    top: 1px;
    right: 56px;
    width: 7px;
    height: 15px;
    cursor: pointer;
}

#locker-left-btn {
    position: absolute;
    top: 1px;
    right: 40px;
    width: 7px;
    height: 15px;
    cursor: pointer;
}

#lesson-right-btn {
    position: absolute;
    top: 1px;
    right: 42px;
    width: 7px;
    height: 15px;
    cursor: pointer;
}

#locker-right-btn {
    position: absolute;
    top: 1px;
    right: 25px;
    width: 7px;
    height: 15px;
    cursor: pointer;
}

.detail-popup-info .ticket-info .ticket-info-bottom .ticket-status-box .ticket-status-none {
    width: 64px;
    height: 17px;
    border-radius: 9px;
    background-color: #f9f9f9;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #7f7f7f;
    position: relative;
    left: -3px;
}

.ticket-info-bottom .ticket-status-box .ticket-status-active img, .ticket-info-bottom .ticket-status-box .ticket-status-none img {
    width: 14px;
    height: 17px;
    padding-right: 2px;
}

.detail-popup-info .customer-info {
    width: calc(100% - 575px);
    height: calc(100% - 50px);
    float: left;
    margin: 3px 0;
}

.detail-popup-info .menu-category-zone {
    width: 100%;
    height: 50px;
    border-top: solid 1px #979797;
    padding: 10px 15px 10px 15px;
    justify-content: flex-start;
}

.detail-popup-info .menu-category-zone .menu-category-btn {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #7c7c7c;
    padding: 0 10px;
    cursor: pointer;
}

.detail-popup-info .menu-category-zone .menu-category-btn.active {
    position: relative;
    border-bottom: 1px solid #fa6400;
    padding-bottom: 10px;
    top: 5px;
    color: white;
    font-weight: bold;
}

.detail-popup-info .customer-info .customer-photo-zone {
    padding: 13px 15px 0;
    height: 100%;
    width: 123px;
    float: left;
    flex-direction: column;
    position: relative;
    justify-content: end;
}

.detail-popup-info .customer-info .customer-photo-zone .customer-photo {
    height: calc(100% - 40px);
    overflow: hidden;
    max-height: 103px;
    width: 100%;
    border-radius: 3px;
}

.detail-popup-info-view {
    width: 100%;
    height: calc(100% - 260px);
    flex-direction: column;
}

.mini-popup.flex-box {
    flex-direction: column;
}

.detail-popup-info-view.flex-box {
    flex-direction: column;
}

.detail-popup-info .customer-info .customer-status-zone {
    width: calc(100% - 128px);
    height: 51px;
    padding: 22px 15px 10px 0;
    float: right;
}

.detail-popup-info .customer-info .customer-status-zone img {
    float: right;
    height: 15px;
    width: 12px;
    cursor: pointer;
}

.detail-popup-info .customer-info .customer-info-detail {
    width: calc(100% - 128px);
    height: 100%;
    float: right;
    position: relative;
}

.detail-popup-info .customer-info .customer-info-detail ul {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.detail-popup-info .customer-info .customer-info-detail li {
    list-style: none;
}

.detail-popup-info .customer-info .customer-info-detail li img {
    float: right;
    height: 15px;
    width: 12px;
    cursor: pointer;
    margin-right: 10px;
}

.detail-popup-info .customer-info .customer-info-detail .info-title {
    width: 60px;
    height: 17px;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 13px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #7f7f7f;
    float: left;
    padding-top: 1px;
}
.detail-popup-info .customer-info .customer-info-detail .search-select{
    width: calc(100% - 80px);
    height: 26px;
    border: 1px solid white;
    border-radius: 3px;
    color: white;
    background: #3E3E3E;
    padding: 0px 6px;
    cursor: pointer;
    position: relative;
}

.detail-popup-info .customer-info .customer-info-detail .jgroup-list-popup{
    position: absolute;
    top: 0px;
    width: 40%;
    height: max-content;
    max-height: 400px;
    border: solid 1px #7C7C7C;
    background-color: #414141;
    color: #979797;
    border-radius: 3px;
    z-index: 1;
}

.detail-popup-info .customer-info .customer-info-detail .jgroup-list-popup > input{
    width: 100%;
    height: 32px;
    border-radius: 3px;
    border: solid 1px #7C7C7C;
    background-color: #414141;
    color: white;
    padding: 0px 6px 0px 30px;
    align-items: flex-start;
    box-sizing: border-box;
}

.detail-popup-info .customer-info .customer-info-detail .jgroup-list-popup li{
    position: relative;
    color: white;
    min-height: 20px;
}
.detail-popup-info .customer-info .customer-info-detail .jgroup-list-popup li:hover{
    color: #FA943D;
}
.detail-popup-info .customer-info .customer-info-detail .jgroup-list-popup li > button{
    display: none;
    position: absolute;
    right: 0px;
    width: 35px;
    height: 22px;
    background: white;
    outline: none;
    border: none;
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 17px;
    color: #FA943D;
    top: 0px;
    border-radius: 3px;
}

.detail-popup-info .customer-info .customer-info-detail .jgroup-list-popup li.active > button{
    display: block;
}

.detail-popup-info .customer-info .customer-info-detail li .info-content {
    width: calc(100% - 60px);
    height: 17px;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
    float: left;
    padding-left: 8px;
}

.detail-popup-info .customer-info .customer-info-detail .info-box {
    width: 250px;
    height: calc(100% - 40px);
    float: left;
    padding: 15px 5px 5px 0;
    position: relative;
}

.detail-popup-info .customer-info .customer-info-detail .memo-box {
    width: calc(100% - 250px);
    height: 100%;
    float: right;
    padding: 15px 5px 18px 5px;
    border-left: solid 1px #979797;
}

.detail-popup-info .customer-info .customer-info-detail .memo-box .memo-content {
    width: calc(100%);
    height: 100%;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
    float: left;
    overflow: scroll;
    padding-left: 5px;
}

.info-detail-label {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
    padding-top: 5px;
    height: 40px;
    flex-direction: column !important;
    width: 100%;
    position: relative;
}

.info-detail-label img {
    width: 25px;
    margin-right: 6px;
}

.detail-name-label {
    width: calc(100% - 30px);
    height: 21px;
    position: absolute;
    top: 11px;
    color: white;
    justify-content: flex-start;
    left: -5px;
    margin: 0px 10px 0px 15px;
    display: inline-flex;
    cursor: auto;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 15px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}

.customer-detail-body .day-form {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    width: max-content;
    height: 18px;
    border-radius: 3px;
    background-color: #585858;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 10px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000000;
    margin: 0 5px;
    text-align: center;
    float: left;
}

.circle {
    border-radius: 50%;
    width: 18px;
    height: 18px;
    padding-top: 2px;
    margin: 0 3px;
    text-align: center;
    font-size: 12px;
    display: inline-block;
    color: white;
    background: black;
}

.detail-popup-btn {
    width: 90px;
    height: 25px;
    border-radius: 4px;
    border: solid 1px #e5e5e7;
    background-color: #ffffff;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #252525;
    cursor: pointer;
}

.detail-popup-btn img {
    height: 13px;
    width: 13px;
    margin-right: 5px;
}

.ticket-info .detail-popup-btn {
    position: relative;
    top: -6px;
}

.display-header {
    width: 100%;
    height: 30px;
    justify-content: flex-start;
}

.display-header .active {
    font-weight: 700;
    color: #ffffff;
}

.display-header div {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 20px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #7c7c7c;
    padding-right: 20px;
    cursor: pointer;
}

.display-body {
    width: 100%;
    height: 100%;
    position: relative;
}

.display-body > label{
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-family: Noto Sans KR, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 17px;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    background: #353535;
}

.popup-basic-text {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
}

.popup-basic-button {
    border-radius: 17px;
    border: solid 1px #0090ff;
    background-color: #353535;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    margin-right: 5px;
}

.popup-basic-button.active {
    background: #0090ff;
}

.addholding-data-zone {
    width: 100%;
    height: auto;
    padding: 10px 5px 20px 34px;
    justify-content: flex-start;
}

.popup-basic-date {
    background: none;
    border: none;
    border-bottom: solid 1px #4d4d4d;
    color: white;
    width: 155px;
}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.popup-basic-number {
    background: none;
    border: none;
    border-bottom: solid 1px #979797;
    color: white;
}

.lesson-status-btn {
    width: 80px;
    height: 26px;
    border-radius: 3px;
    background-color: #7B7B7E;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    margin: 0 auto;
}

.popup-data-box {
    width: 120px;
    height: 40px;
    flex-direction: column;
    position: relative;
}

.popup-data-box input {
    background: none;
    border: none;
    border-bottom: solid 1px #979797;
    color: white;
    width: calc(100% - 40px);
    padding: 0px 30px 3px 10px;

}

.popup-data-box label {
    font-size: 12px;
    color: white;
    font-weight: 100;
    padding-bottom: 5px;
    width: 100%;
}

.popup-data-box span {
    font-size: 8px;
    font-weight: 100;
    position: absolute;
    left: 0;
    bottom: -15px;
}

.popup-basic-select {
    margin-right: 10px;
    margin-bottom: 3px;
    border-radius: 3px;
    background-color: #666666;
    color: white;
    display: inline-block;
    padding: 3px 20px 3px 3px;
    font-size: 13px;
    cursor: pointer;
    min-width: 83px;
}

.popup-basic-select:hover {
    background-color: #474747;
}

.ticket-list-select {
    width: 80px;
    padding: 3px;
    display: flex;
    font-size: 15px;
    justify-content: space-around;
    align-items: center;
    border-radius: 3px;
    border: solid 1px #0090ff;
    color: white;
    cursor: pointer;
    margin-right: 7px;
    min-width: 110px;
    position: relative;
}

.ticket-list-select.active {
    background-color: #0090ff;
}

.ticket-list-select > img {
    width: 10px;
    height: 5px;
    padding: 10px 5px 10px 8px;
    border-left: 1px solid #0090FF;
}

.ticket-list-select.active img {
    border-left: 1px solid #353535;
}

.mini-popup.popup-container {
    width: 500px;
    flex-direction: column;
    padding: 13px 15px 30px 15px;
    border-radius: 3px;
    box-shadow: 0 0 10px 0 #000000;
    border: solid 1px #979797;
    background-color: #353535;
    top: 30px;
    left: 0;
    font-size: 14px;
}

.basic-check-box {
    width: auto;
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    float: right;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
}

.basic-check-box img {
    width: 15px;
    height: 15px;
    margin-right: 6px;
}

.detail-popup-info-view .tab_plus {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.19px;
    margin: 5px 6px;
    padding: 5px;
    border-radius: 3px;
    float: right;
    cursor: pointer;
    color: rgb(0, 144, 255);
    border: 1px solid rgb(0, 144, 255);
    background: none;
    outline: none;
    height: 31px;
    width: 70px;
}

.detail-popup-info-view .tab_plus:hover {
    background: rgb(0, 144, 255);
    color: white;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.5em;
}

.fc .fc-toolbar-title {
    color: white;
}

.fc .fc-button-primary {
    background: none;
    border: none;
    color: #ff4300;
    margin: 0 35px;
}

.fc .fc-button-primary:hover {
    background: none;
    border: none;
    color: #ff7d00;
}

.fc .fc-button-primary:focus {
    background: none;
    border: none;
    color: #ffffff;
}

.fc-toolbar-chunk .fc-today-button {
    background: none;
    border: 1px solid #ff4300;
}

.fc-toolbar-chunk .fc-today-button:hover {
    background: none;
    border: 1px solid #ff7d00;
    color: #ff7d00;
}

.fc .fc-button-primary:disabled {
    background: none;
    opacity: 0.6;
    border: 1px solid #ff4300;
    color: #ff4300;
}

.fc th {
    text-align: right;
    color: white;
}

.fc .fc-daygrid-day-top {
    color: white;
}

.fc-theme-standard td, .fc-theme-standard th {
    border: none;
}

.fc-theme-standard .fc-scrollgrid {
    border: none;
}

.fc .fc-daygrid-day.fc-day-today {
    background: rgba(254, 67, 0, 0.81);
    border-radius: 3px;
}

.fc .fc-toolbar-title {
    font-size: 1.5em;
}

.fc .fc-daygrid-event {
    width: 8px;
    height: 8px;
    border-radius: 75px;
    left: 33px;
}

.broj-color {
    background: #ff4300;
    color: white;
}

.fc .fc-daygrid-more-link {
    color: white;
    margin-left: 10px;
    pointer-events: none;
}

.fc .fc-view-harness {
    background: #3e3e3e;
    border-radius: 3px;
}

.fc .fc-view-harness > div > table {
    position: relative;
    top: 5px;
    left: -5px;
}

.fc .fc-view-harness > div > table > tbody {
    height: 300px;
}

.reson-show-btn,
.attach-show-btn {
    position: relative;
    color: rgb(0, 144, 255);
    border: 1px solid rgb(0, 144, 255);
    float: none !important;
}

.popup-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10001;
}

.basic-popup {
    border: solid 1px #979797;
    max-height: 80%;
    max-width: 80%;
    box-shadow: 14px 14px 24px 24px rgba(0, 0, 0, 0.5);
    z-index: 100;
    box-sizing: border-box;
    background: #353535;
    font-family: AppleSDGothicNeo, sans-serif;
    border-radius: 3px;
}

.ticket-info-popup {
    border: solid 1px #979797;
    z-index: 30;
    font-family: AppleSDGothicNeo, sans-serif;
    background: #353535;
    position: absolute;
    max-height: none;
    max-width: none;
    width: 300px;
    height: auto;
    padding: 10px;
    border-radius: 3px;
}

.ticket-info-popup > div {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    width: 100%;
    height: 20px;
    margin: 0 0 5px 0;
    justify-content: flex-start;
    display: inline-flex;
}

.ticket-info-popup > div:nth-of-type(1) {
    font-weight: 600;
    font-size: 16px;
    height: 30px;
    margin: 0 0 10px 0;
}

#handover-popup {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 19px;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
    position: relative;
}


#handover-popup > img:nth-of-type(1) {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 15px;
}

#handover-popup > div:nth-of-type(1) {
    padding: 24px;
    width: 100%;
    height: 137px;
}

#handover-popup > div:nth-of-type(1) span {
    font-weight: 800;
    cursor: none;
}

#handover-popup > div:nth-of-type(2) {
    padding: 24px 30px;
    width: 100%;
    height: calc(100% - 190px);
}

#handover-popup > div:nth-of-type(3) {
    width: 100%;
    height: 53px;
}

#handover-nav-btn-zone {
    margin-top: 24px;
    width: calc(100% - 20px);
    height: 41px;
    background-color: #292929;
    position: relative;
}

#left-arrow-border {
    width: 0px;
    height: 0px;
    position: absolute;
    left: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid #353535;
    border-bottom: 21px solid transparent;
}


#right-arrow-border {
    width: 0px;
    height: 0px;
    position: absolute;
    right: -20px;
    border-top: 20px solid transparent;
    border-left: 20px solid #292929;
    border-bottom: 21px solid transparent;
}

.handover-nav-btn {
    width: 153px;
    height: 41px;
    color: #9a9a9a;
    display: inline-flex;
    background-size: 100% 100%;
    position: relative;
}

#handover-popup > div:nth-of-type(2) .handover-basic-box {
    width: 300px;
    height: 151px;
    padding: 24px;
    float: left;
    position: relative;
}

.handover-basic-box input {
    background: none;
    border: none;
    border-bottom: solid 1px #4d4d4d;
    color: white;
    width: 240px;
    height: 50px;
    margin-top: 10px;
    font-size: 23px;
    font-weight: 300;
    padding-left: 10px;
}

.popup-basic-select {
    margin-right: 10px;
    margin-bottom: 3px;
    padding: 3px;
    border-radius: 3px;
    background-color: #666666;
    color: white;
    width: 240px;
    height: 50px;
}

.handover-ticket-box {
    width: 100%;
    height: 50px;
    padding: 12px 12px 15px 10px;
    margin: 10px 0;
    border-radius: 3px;
    background-color: #292929;
    overflow: hidden;
}

.handover-ticket-box .title {
    flex-direction: row;
    justify-content: flex-start;
    position: relative;
}

.handover-ticket-box .title span {
    max-width: 600px;
}

.basic-checkbox {
    flex-direction: row;
    cursor: pointer;
    display: inline-flex;
}

.handover-ticket-box .title .basic-checkbox {
    position: absolute;
    top: 5px;
    right: 3px;
    cursor: pointer;
    flex-direction: row;
}

.basic-checkbox > div {
    width: 15px;
    height: 15px;
    background: white;
    border-radius: 5px;
    border: 1px grey solid;
    margin-right: 5px;
}

.handover-ticket-box .row-data {
    width: 100%;
    padding-left: 37px;
    justify-content: flex-start;
    flex-direction: row;
}

.handover-ticket-box .row-data .row-data-title {
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #9a9a9a;
    margin-right: 15px;
}

.handover-ticket-box .row-data .date-input {
    background: none;
    border: none;
    border-bottom: solid 1px #4d4d4d;
    color: white;
    width: 190px;
    height: 15px;
    font-size: 15px;
    font-weight: 300;
    margin-right: 10px;
    text-align: center;
}

.handover-ticket-box .row-data .period-input {
    background: #4d4d4d;
    color: white;
    display: inline-block;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 3px;
}

.popup-basic-button2 {
    border-radius: 0px;
    border: solid 1px #4d4d4d;
    background-color: #4d4d4d;
    color: white;
    font-size: 20px;
    padding: 5px 10px;
    cursor: pointer;
}

.popup-basic-button2.active {
    background: #0090ff;
    border: solid 1px #0090ff;
}

.locker-list-zone {
    width: 100%;
    height: 195px;
    background: #4d4d4d;
    padding: 10px;
    overflow: scroll;
}

.locker-list-zone .locker-box {
    width: 336px;
    height: 48px;
    padding: 12px 15px;
    font-size: 16px;
    background: none;
    border: 1px solid #979797;
    margin: 20px 0;
    position: relative;
    cursor: pointer;
}

.handover-basic-input {
    height: 60px;
    width: 350px;
    font-size: 20px;
    margin-top: 20px;
    margin-left: 53px;
    padding: 0 10px;
    opacity: 0.6;
    border-color: white;
}

.basic-text-area {
    width: 600px;
    height: 120px;
    padding: 10px;
    border-radius: 5px;
    border: solid 0.5px #979797;
    background-color: #666666;
    color: white;
}

.basic-label {
    display: inline-block;
    padding: 15px 5px;
    width: calc(50% - 10px);
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
}

.dashboard-detail-area {
    width: 100%;
    height: auto;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    margin: 0 0 15px;
    border-radius: 3px;
    background-color: #3e3e3e;
    padding: 0 10px 0 0;
    position: relative;
}

.dashboard-detail-area .data-icon-zone {
    height: 100%;
    width: 100px;
    float: left;
    border-radius: 3px;
    padding: 20px 0;
}

.dashboard-detail-area .data-icon-zone.active:hover {
    cursor: pointer;
}

.dashboard-detail-area .data-icon-zone.active:hover div {
    background: #343434;
}

.dashboard-detail-area .dashboard-detail-list {
    height: auto;
    width: calc(100% - 100px);
    float: left;
    min-height: 100%;
    flex-direction: column;
    padding: 10px 0;
}

.dashboard-detail-area .buy-active {
    color: #737373;
    border-radius: 3px;
}

.dashboard-detail-area .buy-active:hover {
    border: 1px solid #323232;
    cursor: pointer;
}

.ticket-stick-graph {
    position: relative;
    width: 100%;
    height: 40px;

}

.ticket-stick-graph > div:nth-of-type(1) {
    width: 100%;
    height: 20px;
    position: relative;
}

.ticket-stick-graph > div:nth-of-type(2) {
    width: 100%;
    height: 7px;
    background-color: #323232;
    position: relative;
}

.dashboard-tickte-stick {
    position: relative;
    height: 100%;
    background: none;
    float: left;

}

.dashboard-tickte-stick .tickte-stick-active {
    position: absolute;
    height: 100%;
    background: #fa6400;
    right: 0px;
    overflow: hidden;
    color: white;
    font-size: 13px;
}

.basic-gray-font {
    font-family: NotoSansKR, sans-serif;
    font-size: 11px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #7c7c7c;
    position: absolute;
}

.basic-black-box {
    position: relative;
    width: 100%;
    height: 36px;
    padding: 5px 15px;
    border-radius: 3px;
    background-color: #272727;
    margin-bottom: 3px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.basic-black-box .category-box {
    max-width: 110px;
    padding: 4px 12px;
    margin: 6px 12px 6px 0px;
    height: 22px;
    font-family: NotoSansKR, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.67px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    width: max-content;
    flex-shrink: 1;
    display: inline-block;
    position: relative;
    overflow: hidden;
    background: #A875FF;
}

.dashboard-detail-list .category-set-popup {
    position: absolute;
    width: 300px;
    min-height: 250px;
    padding: 0px;
    border-radius: 3px;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%), 0 2px 4px 0 rgb(0 0 0 / 50%);
    background-color: #383838;
    border: 1px solid #4A4A4A;
}

.dashboard-detail-list .category-set-popup .category-box {
    max-width: 110px;
    padding: 4px 12px;
    margin: 6px 12px 6px 0px;
    height: 22px;
    font-family: NotoSansKR, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.67px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    width: max-content;
    flex-shrink: 1;
    display: inline-block;
    position: relative;
    overflow: hidden;
    background: #A875FF;
    cursor: pointer;
}

.dashboard-detail-list .category-set-popup > div:nth-child(1){
    width: 100%;
    height: max-content;
    background: #4A4A4A;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    min-height: 34px;
    padding: 0px 12px;
    box-sizing: border-box;
}
.dashboard-detail-list .category-set-popup > label:nth-child(2){
    height: 30px;
    padding: 6px 12px;
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    display: block;
    color: #A4A4A4;
    text-align: left;
}
.dashboard-detail-list .category-set-popup > div:nth-child(3){
    width: 100%;
    height: 180px;
    background: #383838;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    min-height: 34px;
}

.dashboard-detail-list .category-set-popup > div:nth-child(3) > ul{
    width: 100%;
    height: 100%;
}

.dashboard-detail-list .category-set-popup > div:nth-child(3) > ul > li{
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 12px;
}
.basic-black-box:hover {
    border: transparent 1px solid;
}

.preview-popup {
    border-radius: 5px;
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.5);
    z-index: 10001;
    box-sizing: border-box;
    background: #090909;
}

.preview-popup .preview-popup-top {
    width: 100%;
    height: 50px;
    float: left;
}

.preview-popup .preview-popup-top h3 {
    margin-top: 20px;
    text-align: left;
    padding-left: 15px;
    color: #ffffff;
}

.preview-popup .preview-popup-body {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
}

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

#ui-datepicker-div {
    max-block-size: fit-content;
    z-index: 10003 !important;
}

.rotate {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.picture-popup-container {
    width: 600px;
    height: 500px;
    background: rgb(29 29 29);
    z-index: 101;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 19px;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
    position: relative;
}

.holding-color {
    background: rgba(185, 42, 210, 0.7);
}

.holding-color:hover {
    cursor: pointer;
    background: rgb(185, 42, 210);
}

.jsales-imminent-popup {
    width: 800px;
    max-width: calc(100% - 60px);
    position: relative;
}

.dday-clock-zone {
    width: 100%;
    padding: 20px;
    font-family: AppleSDGothicNeo, sans-serif;
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: black;
    background: white;
    border-radius: 20px;
    text-align: center;
}

.add-disabel-style {
    pointer-events: none;
    background-color: rgb(0, 0, 0) !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
    margin-right: 10px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #64ace6;
}

input:focus + .slider {
    box-shadow: 0 0 1px #64ace6;
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

p#toggle-label {
    margin: 0px 10px;
    float: right;
    font-size: 15px;
    font-weight: bold;
    line-height: 30px;
}

.mfp-bg {
    z-index: 10011 !important;
}

.mfp-wrap {
    z-index: 10011 !important;
}

#broj-seting-popup-background {
    background: #131313a3;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    font-family: NotoSansKR,sans-serif;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fafafa;
}
#broj-seting-popup-background .flex-box{
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
#broj-seting-popup-background>div{
    max-width: 490px;
    width: 100%;
    height: max-content;
    border-radius: 5px;
    background-color: #2c2c2c;
}

#broj-seting-popup-background>div .seting-popup-content{
    width: 100%;
    height: calc(100% - 54px);
    padding: 24px;
}

#broj-seting-popup-background>div .seting-popup-content>h3{
    font-family: NotoSansKR,sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    height: 27px;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

#broj-seting-popup-background>div .seting-popup-content>h5{
    padding-top: 24px;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #bfbfbf;
}

#broj-seting-popup-background>div .seting-popup-content>label{
    padding-top: 23px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #a4a4a4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#broj-seting-popup-background>div .seting-popup-content>div{
    padding-top: 23px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #a4a4a4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#broj-seting-popup-background>div .seting-popup-content>div>select{
    width: 172px;
    height: 26px;
    margin: 0 0 0 7px;
    padding: 1px 33px 3px 16px;
    border-radius: 2px;
    background-color: #666;
    color: white;
}

#broj-seting-popup-background>div .seting-popup-content>div>select>option{
    color: black;
}

#broj-seting-popup-background>div .seting-popup-btnlist{
    width: 100%;
    height: 54px;
}
#broj-seting-popup-background>div .seting-popup-btnlist>button{
    width: 50%;
    height: 100%;
    background: #4a4a4a;
    font-size: 16px;
    font-weight: bold;
    outline: none;
    border: none;
    color: #fafafa;
    cursor: pointer;
}
#broj-seting-popup-background>div .seting-popup-btnlist>button:hover{
    font-size: 17px;
}
.broj-date-input-box{
    width: 180px;
    height: 25px;
    border-bottom: 2px solid #4d4d4d;
    padding-bottom: 1px;
    padding-right: 27px;
    position: relative;
}

.broj-date-input-box>img{
    width: 18px;
    height: 18px;
    position: absolute;
    right: 0px;
    cursor: pointer;
}

.broj-date-input-box>input{
    font-family: NotoSansKR,sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.54px;
    color: #fff;
    background: none;
    outline: none;
    border: none;
    height: 100%;
    width: 100%;
    text-align: right;
}

#broj-custom-confirm{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: #00000070;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 100009;
}
#broj-custom-confirm > div{
    max-width: 450px;
    max-height: 336px;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 15px;
    background: white;
}

#broj-custom-confirm > div > img{
    position: absolute;
    right: 24px;
    top: 24px;
    height: 24px;
    width: 24px;
    cursor: pointer;
}

#broj-custom-confirm > div > div:nth-child(2){
    height: 84px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px 15px 0px 0px;
}

#broj-custom-confirm > div > div:nth-child(2) > img {
    width: 45px;
    height: 40px;
}

#broj-custom-confirm .custom-confirm-content{
    height: calc(100% - 84px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 12px;
    flex-direction: column;
}

#broj-custom-confirm .custom-confirm-content > h3{
    height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    font-family: NotoSansKR,sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000;
}

#broj-custom-confirm .custom-confirm-content > div:nth-child(2){
    width: 100%;
    height: calc(100% - 150px);
    padding: 12px;
    border-radius: 8px;
    border: solid 1px #979797;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000;
}
#broj-custom-confirm .custom-confirm-content > div:nth-child(3){
    width: 100%;
    height: 100px;
    padding: 12px 0px;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
}

#broj-custom-confirm .custom-confirm-content > div:nth-child(3) label {
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #eb5252;
    height: 18px;
    width: 100%;
    text-align: left;
}

#broj-custom-confirm .custom-confirm-content > div:nth-child(3) button{
    outline: none;
    background: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    border-radius: 28px;
    border: solid 1px #979797;
    width: max-content;
    height: 36px;
    min-width: 100px;
}

#broj-custom-confirm .custom-confirm-content label{
    display: inline-block;
}

.description-show-zone{
    position: absolute;
    width: max-content;
    height: max-content;
    padding: 12px;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000;
    border-radius: 4px;
    background-color: #fff;
}


#customer-detail-sub-cover{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10006;
    display: flex;
    justify-content: center;
    align-items: center;
}

#customer-detail-sub-cover .flex-box{
    flex-direction: row !important;
}
#customer-detail-sub-cover > div {
    width: 100%;
    height: 100%;
    max-width: 900px;
    max-height: 672px;
    border-radius: 8px;
    background: #2c2c2c;
    font-family: NotoSansKR, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #a4a4a4;
}
#customer-detail-sub-cover > div > div:nth-child(1) {
    height: 44px;
    width: 100%;
    padding: 24px 24px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#customer-detail-sub-cover > div > div:nth-child(1) > h4 {
    font-family: NotoSansKR, sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
}
#customer-detail-sub-cover > div > div:nth-child(2) {
    height: 112px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 24px;
}
#customer-detail-sub-cover > div > div:nth-child(3), #customer-detail-sub-cover > div > div:nth-child(4) {
    height: calc(100% - 212px);
    width: 100%;
    padding: 0px 24px 24px;
}
#customer-detail-sub-cover > div > div:nth-child(5) {
    height: 56px;
    width: 100%;
    display: flex;
}
#customer-detail-sub-cover > div > div:nth-child(5) > button{
    outline: none;
    border: none;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    background: #7c7c7c;
    font-family: NotoSansKR, sans-serif;
    font-size: 20px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    flex: 1;
}
#customer-detail-sub-main,#customer-detail-sub-main2{
    font-family: NotoSansKR, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
}
#customer-detail-sub-main > .customer-detail-sub-setting-box,#customer-detail-sub-main2 > .customer-detail-sub-setting-box{
    width: 100%;
    height: max-content;
}
.customer-detail-sub-setting-box > div:nth-child(1) label {
    margin-right: 12px;
    font-size: 16px;
    width: 19px;
    color: #fa943d;
    display: inline-block;
}
.customer-detail-sub-setting-box > div:nth-child(1) span{
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #a4a4a4;
    margin-left: 24px;
}
.customer-detail-sub-setting-box > .holding-setting-basic .setting-basic-inner{
    background: #4A4A4A;
    border-radius: 3px;
    padding: 24px;
    width: 94%;
    height: max-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.customer-detail-sub-setting-box > .holding-setting-basic .setting-basic-inner > .item-box{
    background: #7C7C7C;
    width: calc(50% - 6px);
    height: 58px;
    padding: 12px;
    display: inline-flex;
    color: white;
    margin-bottom: 12px;
    cursor: pointer;
}
.customer-detail-sub-setting-box > .holding-setting-basic .setting-basic-inner > .item-box label{
    display: block;
    height: 50%;
    padding: 0px 12px;
}
.customer-detail-sub-setting-box > .holding-setting-basic .setting-basic-inner > .item-box.active{
    color: #F8933C;
    border: 1px solid #F8933C;
}
.customer-detail-sub-setting-box > .holding-setting-basic .setting-basic-inner > .item-box > div{
    width: calc(100% - 20px);
    height: 100%;
    justify-content: flex-start;
}
.customer-detail-sub-setting-box > .holding-setting-basic .setting-basic-inner > .item-box > img{
    width: 20px;
    height: 20px;
}
.customer-detail-sub-setting-box > .holding-setting-basic {
    width: 100%;
    padding: 24px 0px 24px 31px;
    height: max-content;
    box-sizing: border-box;
    position: relative;
}
.customer-detail-sub-setting-box button{
    width: 92px;
    height: 27px;
    margin-left: 12px;
    padding: 7px 7px;
    border-radius: 3px;
    background-color: #4a4a4a;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

.customer-detail-sub-setting-box select{
    height: 27px;
    margin-left: 12px;
    padding: 7px 7px;
    border-radius: 3px;
    background-color: #4a4a4a;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    cursor: pointer;
    border: none;
}

.customer-detail-sub-setting-box > .holding-setting-basic > textarea{
    width: 100%;
    max-width: 769px;
    height: 200px;
    padding: 12px;
    border-radius: 3px;
    background-color: #4a4a4a;
    color: white;
    border: none;
    resize: none;
}
.customer-detail-sub-setting-box > .holding-setting-basic > .holding-basic-row {
    width: calc(100% - 166px);
    height: 33px;
    position: relative;
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ccc;
}
.customer-detail-sub-setting-box > .holding-setting-basic > .holding-basic-row .broj-holding-date-box {
    height: 31px;
    width: 125px;
    padding: 0px 20px 0px 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #4a4a4a;
    position: relative;
}
.customer-detail-sub-setting-box > .holding-setting-basic > .holding-basic-row .broj-holding-date-box input {
    color: white;
    font-size: 12px;
    border: none;
    width: 100%;
    height: 100%;
    background: none;
    font-weight: normal;
    outline: none;
}
.customer-detail-sub-setting-box > .holding-setting-basic > .holding-basic-row .broj-holding-date-box img {
    position: absolute;
    right: 0px;
    top: 8px;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.customer-detail-sub-setting-box > .holding-setting-basic > .holding-basic-row .holding-count-input {
    width: 180px;
    height: 33px;
    border-radius: 3px;
    border-bottom: 1px solid rgb(73, 73, 73);
    display: inline-flex;
    padding: 0px 93px 6px 16px;
    position: relative;
    margin: 0px 12px;
}
.holding-setting-basic > .holding-basic-row .holding-count-input > img {
    width: 16px;
    height: 16px;
    position: absolute;
    cursor: pointer;
}
.holding-setting-basic > .holding-basic-row .holding-count-input > input {
    color: white;
    font-size: 12px;
    border: none;
    width: 100%;
    height: 100%;
    background: none;
    font-weight: normal;
    text-align: center;
    outline: none;
}
.holding-setting-basic > .holding-basic-row .holding-count-input > 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: #ffffff;
    position: absolute;
    right: 0px;
    top: 6px;
    width: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.holding-setting-basic .holding-check-box {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.holding-setting-basic .holding-check-box > input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.holding-setting-basic .holding-check-box > label {
    color: white;
    cursor: pointer;
}
.holding-setting-basic .holding-check-box.none-active{
    opacity: 0.6;
    pointer-events: none;
}
.holding-setting-basic .holding-toggle-box {
    width: 90px;
    height: max-content;
}
.holding-setting-basic .holding-toggle-box p.toggle-label {
    font-family: NotoSansKR, sans-serif;
    font-size: 8px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    padding: 5px 0;
}
.holding-setting-basic .holding-toggle-box .switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    margin: 0px;
}

.holding-setting-basic .holding-toggle-box input {
    opacity: 0;
    width: 0;
    height: 0;
}

.holding-setting-basic .holding-toggle-box .slider.round {
    border-radius: 34px;
}

.holding-setting-basic .holding-toggle-box .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 15px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.holding-setting-basic .holding-toggle-box .slider.round:before {
    border-radius: 50%;
}

.holding-setting-basic .holding-toggle-box input.active + .slider:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

.holding-setting-basic .holding-toggle-box .slider.active {
    background: #5697ee;
}
.holding-setting-basic .holding-ticket-box{
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    border-radius: 3px;
    border: solid 1px #4a4a4a;
    margin: 12px 0px;
    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;
    -webkit-transition: .4s;
    transition: .4s;
    overflow: hidden;
}

.holding-setting-basic .holding-ticket-box.active{
    -webkit-transition: .4s;
    padding: 12px;
    transition: .4s;
    height: 146px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.holding-setting-basic .holding-ticket-box.none-active{
    pointer-events: none;

}
.holding-setting-basic .holding-ticket-box img {
    width: 24px;
    cursor: pointer;
}

.holding-setting-basic .holding-ticket-box > div:nth-child(1) {
    justify-content: space-between;
    flex-direction: row;
}

.holding-setting-basic .holding-ticket-box .holding-info-row{
    font-family: NotoSansKR,sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #a4a4a4;
    justify-content:flex-start;
}
.holding-setting-basic .holding-ticket-box .holding-info-row > label{
    width: 100px;
    display: inline-flex;
}
#crm-schedule-management-zone > div:nth-child(1){
    width: 500px;
    height: 250px;
    display: inline-block;
    background: #222222;
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 12px;
}
#crm-schedule-management-zone > div:nth-child(1) .day{
    font-size: 16px;
}
#crm-schedule-management-zone > div:nth-child(2){
    width: 100%;
    height: calc(100% - 262px);
    display: inline-block;
}

.change-trainer-history-button {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    border: solid 1px #414141;
    border-radius: 3px;
    background-color: #414141;
    font-family: NotoSansKR,sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.4px;
    color: #fff;
    padding: 0px 12px;
}

.change-trainer-history-button:hover {
    border: solid 1px #fa6400;
}

#change-trainer-history-popup {
    width: 500px;
    max-height: 200px;
    height: auto;
    padding: 0px;
    z-index: 1;
    left: -149px;
    position: absolute;
    top: 39px;
}

.change-trainer-history-button-arrow {
    width: 10px;
    height: 5px;
    margin-left: 10px;
}

.change-trainer-history-table {
    text-align: center;
}

table.change-trainer-history-table {
    border-collapse: separate;
    border-spacing: 0px;
    text-align: center;
    line-height: 1.5;
}
table.change-trainer-history-table th {
    width: 155px;
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    color: #ffffff;
    background: #1e1e1e;
    border: 1px solid #4A4A4A;
}
table.change-trainer-history-table td {
    width: 155px;
    padding: 10px;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    background: #414141;
    color: #ffffff;
    border: 1px solid #4A4A4A;
}

#contract-print-btn,#contract-download-btn{
    opacity: 0.7;
}

#contract-print-btn:hover,#contract-download-btn:hover{
    opacity: 1;
}

.contract-preview-popup-background {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: #11111140;
    z-index: 10002;
}
.detail-popup-info-view .fc .fc-daygrid-day-bottom {
    color: white !important;
}

.text-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

.authority-category-top {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.authority-category-top > .authority-category-tab {
    color : #bdbdbd;
    font-size: 18px;
    width: 15%;
    text-align: center;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
}

.authority-category-top > .authority-category-tab.authority-category-selected {
    border-bottom: 3px solid #8CBCFA;
    font-size: 20px;
    color: #FFFFFF;
}

.authority-popup-content {
    overflow: scroll;
    padding: 15px;
    height: calc(100% - 130px);
}

.setting-title {
    width: 200px;
    color: #FFFFFF;
    font-size: 14pt;
    font-weight: 500;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFFFFF;
}

.setting-table {
    width: 100%;
    color: #808f97;
    margin-bottom: 32px;
    text-align: center;
}
.setting-table > tbody > tr > td:nth-child(1) {
    text-align: left;
}

.setting-table td {
    padding: 5px;
}

.setting-button {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 150px;
    height: 60px;
    outline: none;
    cursor: pointer;
    background-color: #8CBCFA;
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 400;
}
.holding-product-status-box.customer-table-status-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width : 40px;
    height: 20px;
}

.jticket-popup-certificate-notice-wrap {
    display: flex;
    flex-direction: row;
    justify-content: right;
    color: #FFFFFF;
}

.jticket-popup-certificate-notice-wrap > .certificate-notice-box {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.jticket-popup-certificate-notice-wrap > .certificate-notice-box > img {
    width: 18px;
    height: 18px;
}

.jticket-popup-certificate-notice-wrap > .certificate-notice-box > div {
    text-decoration: underline;
    cursor: pointer;
}

.enter-possible-day-and-time-row .day-unit.info-edit {
    background: #2E2E2E;
}

.enter-possible-day-and-time-row .remove-section-btn.info-edit {
    background-color: #2E2E2E;
}

.enter-possible-day-and-time-row .day-unit.info-class-edit {
    background: #4a4a4a;
}

.enter-possible-day-and-time-row .remove-section-btn.info-class-edit {
    background-color: #4a4a4a;
}

.broj-guide-box {
    display: flex;
    align-items: center;
    position: relative;
    width: max-content;
    float: right;
    margin-top: 18px;
    margin-right: 12px;
    cursor: pointer;
    gap: 6px;
}

.broj-guide-box > img {
    width: 18px;
    height: 18px;
}

.broj-guide-box > div {
    font-size: 14px;
    color: #fa943d;
    text-decoration: underline;
}

.oontalk-invite-popup-box {
    user-select: none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /*width: 480px;*/
    min-width: 480px;
    width: max-content;
    height: 620px;
    /*height: calc(95% - 40px);*/
    max-height: 850px;
    box-shadow: 14px 14px 24px 24px rgb(0 0 0 / 50%);
    z-index: 100;
    box-sizing: border-box;
    background: #FFFFFF;
    font-family: sans-serif;
    border-radius: 12px;
}

.oontalk-invite-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    color: #FFFFFF;
    width: 100%;
    height: 60px;
    background-color: #2E2E2E;
}

.oontalk-invite-popup-header-title {
    font-size: 18px;
    font-weight: bold;
}

.oontalk-invite-popup-header-title-box {
    display: flex;
    align-items: center;
    gap: 6px;
}

.oontalk-invite-popup-header-title-box > img {
    filter: brightness(100);
    width: 18px;
    height: 18px;
}

.oontalk-invite-popup-close-button {
    cursor: pointer;
}

.oontalk-invite-popup-close-button > img {
    width : 18px;
    height: 18px;
    filter: brightness(100);
}

.oontalk-invite-popup-notice-wrap {
    height: 100px;
    background-color: #383838;
    color: #FFFFFF;
    padding: 24px;
}

.oontalk-invite-popup-body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100% - 160px);
    background-color: #383838;
    color: #FFFFFF;
}

.oontalk-invite-popup-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    width: 360px;
    height: calc(100% - 60px);
    background-color: #383838;
    color: #FFFFFF;
}

/* time-range-next-day */
.time-range-next-day-container {
    display: flex;
    gap: 12px;
    color: #FFFFFF;
}
.time-range-next-day-time-picker {
    outline: none;
    border: none;
    background: none;
    width: 113px;
    height: 27px;
    padding-bottom: 3px;
    border-bottom: 1px solid #4a4a4a;
    color: white;
    font-size: 14px;
}
.time-range-next-day-badge {
    display: flex;
    padding: 2px 4px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background-color: #DEECF6;
    color: #1786FF;
    font-size: 12px;
    font-weight: 700;
}
.time-range-next-day-box {
    display: flex;
    gap: 6px;
}
.time-range-next-day-label {
    display: flex;
    text-align: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}