@charset "UTF-8";
/* cocopharm, smartmedipay main style css */


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox  */
input[type='number'] {
    -moz-appearance: textfield;
}

.container.page-container {
    gap: 30px;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.h100 {
    height: 100%;
}

.w100 {
    width: 100% !important;
}

.orange {
    color: #F0632D;
    font-weight: bold;
}

.txt_blue b {
    color: #448CCB;
}

.disabled {
    color: #c9c9c9;
}

.l_container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
        gap: 30px;
}

/* 상단메뉴 */
.top-menu {
    width: 100%;
}

.top-menu,
.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    height: 65px;
}

.txt_width {
    font-weight: bold;
    width: 60px;
    display: inline-block;
}

.type-container select {
    width: 83.8%;
    height: 28px;
}

.lf_box {
    display: flex;
    width: 400px;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px 0;
}

.lf_box>* {
    height: 50%;
}


/* 달력 */
.date-container label {
    position: relative;
    width: 41.2%;
    display: inline-block;
}

.date-container label input {
    width: 100%;
    line-height: 25px;
}

.fa-calendar-alt {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.date-container {
    position: relative;
}

.date-container .hide_box {
    position: absolute;
    top: 0;
    left: 64.4px;
    width: 164.9px;
    height: 30px;
    background-color: #eaeaea;
    border: 1px solid #aaa;
    border-radius: 0px;
    display: none;
}

.date-container .hide_box:last-child {
    left: 233.7px;
}

.flatpickr-current-month {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-size: 18px;
}

.flatpickr-months {
    margin-bottom: 10px;
}

.flatpickr-monthDropdown-months {
    order: 2;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #000;
    font-weight: 400;
}

.numInputWrapper {
    order: 1;
    margin-right: 10px;
}

.numInputWrapper select {
    border: none;
    font-weight: 400;
}

.numInputWrapper .arrowUp,
.numInputWrapper .arrowDown {
    display: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover{
    background-color: #fff;
}


/* 버튼박스 */
.prevBox,
.dateButton {
    width: 110px;
    border-radius: 5px;
}

.dateButton {
    border: 1px solid #000;
    background: #fff;
    transition: 0.1s;
    cursor: pointer;
}

.dateButton:hover {
    background-color: #F9F9F9;
}

.dateButton.action {
    border: 1px solid #F0632D;
    color: #F0632D;
}

input.dateButton.action {
    /* color: #000; */
    outline: #F0632D;
}

.dateButton.action input {
    pointer-events: auto;
}

.searchBtn {
    width: 200px;
    height: 65px;
    border-radius: 5px;
    background-color: #000;
    color: #fff;
}



/* 전일 박스 스타일 */
.prevBox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3px 0;
}

.prevBox>* {
    height: 50%;
}

input.numinput {
    width: 100%;
    padding: 0;
    text-align: center;
    color: #F0632D;
    border: 1px solid #BBBBBB;
    border-radius: 5px;
    box-sizing: border-box;
}

.numinput::placeholder {
    color: #BBBBBB;
    text-align: center;
}

/* 차트 */
#chart_wrap {
    position: relative;
    width: 100%;
    height: 530px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.chart_body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto;
}

.chart_section {
    height: 0;
    overflow: hidden;
    transition: 0.5s;
}

.chart_section.on {
    height: 550px;
}

.open_chart {
    width: 100%;
}

.open_chart p {
    width: fit-content;
    margin: 0 auto;
    font-size: 18px;
    cursor: pointer;
}

.toggle-text.on>i {
    transform: rotate(180deg);
}


/* 차트 범례 색깔박스 위치 (코코팜) */

#cocopharm_page .label_color_box span {
    position: absolute;
    top: 503.3px;
    width: 43.9px;
    height: 18.3px;

}

#cocopharm_page .label_color_box span:nth-child(1) {
    background-color: #ACE6EF;
    border: 4px solid #27AAE1;
    left: 426.7px;
}

#cocopharm_page .label_color_box span:nth-child(2) {
    background-color: #E8ACD6;
    border: 3.9px solid #EC008C;
    left: 556.2px;
}

/* 차트 범례 색깔박스 위치 (스마트) */

#smart_page .label_color_box span {
    position: absolute;
    top: 503.3px;
    width: 43.2px;
    height: 18.3px;
}


#smart_page .label_color_box span:nth-child(1) {
    background-color: #E8ACD6;
    border: 3.9px solid #EC008C;
    left: 121px;
}


#smart_page .label_color_box span:nth-child(2) {
    background-color: #ACE6EF;
    border: 4px solid #27AAE1;
    left: 356.9px;
}

#smart_page .label_color_box span:nth-child(3) {
    background-color: #FFFFAC;
    border: 4px solid #FFFF24;
    left: 595.9px;
   
}


#smart_page .label_color_box span:nth-child(4) {
    background-color: #A8EFD6;
    border: 3.9px solid #00A79D;
     left: 858.9px;
}



/* 총합테이블 */
.table-container {
    margin-top: 50px;
}

.total_table {
    border: 1px solid #000;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
}

.total_table th,
.total_table td {
    border: 1px solid #000;
    padding: 20px 0;
    width: 20%;
}

.total_table * {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}


/* 테이블 */

.view-table {
    border-collapse: collapse;
    /* border: 1px solid #000;  */
}

table.dataTable th {
    border-top: 1px solid #000;
    line-height: 1.3;
}

.table_section {
    position: relative;
}

.view-table th {
    vertical-align: middle;
}

.view-table th[colspan="2"] {
    text-align: center;
    /* 좌우 중앙 */
}

.dataTables_scroll {
    margin-top: 10px;
}


/* 테이블 dom(버튼, 정렬) */

.dataTables_length {
    top: -191px;
    left: 0;
}


.dt-buttons,
.dataTables_length {
    position: absolute;
    width: fit-content;
}

.dt-buttons {
    top: -191px;
    left: 140px;
}

.dt-buttons * {
    color: #fff;
}

.dt-buttons .fa-file-excel,
.dt-buttons .fa-print {
    display: none;
}

.buttons-print,
.buttons-excel {
    background-color: #002F7B;
    width: 60px;
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
}

.buttons-excel {
    background-color: #268F6B;
}


/* 1200px 이하 */
@media only screen and (max-width: 1199px) {


    /* 기간조회 */
    .lf_box {
        width: 320px;
    }

    .date-container label {
        width: 37%;
    }

    .date-container label input {
        width: 97%;
    }

    .type-container select {
        width: 74%;
    }

    .top-menu,
    .button-container {
        gap: 10px;
    }

    /* 기간버튼 */
    .prevBox,
    .dateButton {
        width: 90px;
    }

    .date-container .hide_box {
        left: 64.4px;
        width: 115px;
    }

    .date-container .hide_box:last-child {
        left: 187px;
    }

    /* 차트범례 색깔박스 위치 */
   
    #cocopharm_page .label_color_box span:nth-child(1) {
        left: 325px;
    }

    #cocopharm_page .label_color_box span:nth-child(2) {
        left: 454.4px;
    }


    #smart_page .label_color_box span {
        top: 448.3px;
    }

    #smart_page .label_color_box span:nth-child(1) {
        left: 120px;
    }

    #smart_page .label_color_box span:nth-child(2) {
        left: 355px;
    }

    #smart_page .label_color_box span:nth-child(3) {
        left: 593.9px;
    }
    #smart_page .label_color_box span:nth-child(4) {
        left: 389px;
        top: 504px;
    }
    .dataTables_length, .dt-buttons {
        top: -201px; 
    }

}

@media only screen and (max-width: 991px) {


    .top-menu,
    .button-container {
        height: auto;
    }

    #smart_page .dataTables_length,
    #smart_page .dt-buttons {
        top: -201px;
    }

    .searchBtn {
        width: 90px;
        height: 49px;
    }

    /* 차트범례 색깔박스 위치 */
    #cocopharm_page .label_color_box span:nth-child(1) {
        left: 215px;
    }

    #cocopharm_page .label_color_box span:nth-child(2) {
        left: 344.4px;
    }

    #smart_page .label_color_box span:nth-child(1) {
        left: 141px;
    }

    #smart_page .label_color_box span:nth-child(2) {
        left: 377px;
    }

    #smart_page .label_color_box span:nth-child(3) { 
        top: 503px;
        left: 148px;
    }

    #smart_page .label_color_box span:nth-child(4) { 
        top: 503.4px;
        left: 411px;
    }  

}

@media only screen and (max-width: 764px) {

    /* 차트범례 색깔박스 위치 */
    #chart_wrap {
        height: 460px;
        width: 500px;
    }

    #cocopharm_page .label_color_box span {
        top: 433px;
    }


    #cocopharm_page .label_color_box span:nth-child(1) {
        left: 107px;
    }

    #cocopharm_page .label_color_box span:nth-child(2) {
        left: 235.4px;
    }



    #smart_page .label_color_box span {
        top: 393px;
    }

    #smart_page .label_color_box span:nth-child(1) {
        top: 269px;
        left: 151px;
    }

    #smart_page .label_color_box span:nth-child(2) {
        top: 322.9px;
        left: 149.4px;
    }

    #smart_page .label_color_box span:nth-child(3) {
        left: 137px;
        top: 379px;
    }
    
    #smart_page .label_color_box span:nth-child(4) {
        left: 169px;
        top: 433px;
    }
}

@media only screen and (max-width: 500px) {
    #chart_wrap {
        height: 500px;
        width: 360px;
    }

    #cocopharm_page .label_color_box span {
        top: 269px;
    }

    #cocopharm_page .label_color_box span:nth-child(1) {
        top: 418.1px;
        left: 133.4px;
    }

    #cocopharm_page .label_color_box span:nth-child(2) {
      top: 473px;
        left: 101.4px;
    }


    #smart_page .label_color_box span {
        top: 278.3px;
    }

    #smart_page .label_color_box span:nth-child(1) {
        top: 309px;
        left: 81px;
    }

    #smart_page .label_color_box span:nth-child(2) {
        top: 363px;
        left: 79px;
    }
    #smart_page .label_color_box span:nth-child(3) {
        left: 66.2px;
        top: 420px;
    }

    #smart_page .label_color_box span:nth-child(4) {
      top: 473.4px;
    left: 99px;
    }
}



 /* 모바일 */ 
@media only screen and (max-width: 430px) {

    
   .lf_box {
        width: 100%;
    }
    .top-menu, .button-container {
        flex-direction: column;
    } 

    .total_table * {
        font-size: 14px;
    }
    table.dataTable thead th, table.dataTable thead td,
    .total_table th, .total_table td {
        min-width: 60px;
    }

     .prevBox {
        width: 100%; 
     }

   .dateButton {
        width: 100%;
        height: 36px;
    }

    .total_table {
        margin-top:30px;
    }

    #smart_page .dataTables_length, #smart_page .dt-buttons {
        top: -241px;
    }
 }