@mixin underline-effect($bg:rgb(var(--bs-red-origin))){
    &:hover::after{
        content: '';
        width:100%;
        height:2px;
        position:absolute;
        bottom:-5px;
        left:0%;
        background-color:$bg;
        transition:0.2s;
        animation: hover-line 0.2s linear;
    }
}

@mixin dot-effect {
    position: relative;
    &:hover::before {
        content: '';
        width: 4px;
        height: 4px;
        position: absolute;
        top: -5px;
        left: 47%;
        background-color: rgb(var(--bs-red-origin));
        transition: 0.2s;
        border-radius: 50%;
    }
}


div.dt-processing {
    &> div:last-child {
        &> div {
            background-color: rgb(var(--bs-red)) !important;
        }
    }
}
.btns-memo-style{
    display:inline;
    width:auto;
    position:absolute;
    right:0;
    top:0;
    z-index:1;
    button{
        &:hover{
            i.bi::before{animation:sidebarShake 0.3s infinite linear alternate;}
        }
        &.active{
            color:rgb(var(--bs-red));
        }            
    }
}
.dt-buttons .dt-button-down-arrow {display:none;}
.table{table-layout:fixed; width:100%;
    .none{padding:50px 0; text-align:center;}
    .ico{display:inline-block; width:8px; height:8px; border-radius:50%;
        &.green{background:rgb(var(--bs-green));}
        &.red{background:rgb(var(--bs-red-danger));}
    }
    .nowrap{
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }

    .badge-0{
        display:none;
    }
    td{
        .regi-form {
            width:100%;
            textarea {
                width: calc(100% - 90px);
            }
        }
        .memo-item {
            display:flex;
            justify-content:space-between;
            padding:10px 0;
            &:not(:last-child){
                border-bottom:2px dashed rgb(var(--bs-gray-pearl));
            }
        }
        .memo-list{float:left; width:75%;}
        .btn-budget{margin:1rem auto 0; display: flex; justify-content: space-between; width:80%; max-width:100px;
            button:hover{color: rgb(var(--bs-blue));}
        }
    }
}

.table-default{
    min-width:1400px;
    --bs-table-hover-bg:rgb(var(--bs-pink-pearl));
    --bs-table-striped-bg:rgba(var(--bs-black), 0.031);
    font-size:0.813rem;
    thead{
        th{font-size:0.875rem; text-align:center; vertical-align:middle; line-height:1.4; background-color: var(--bs-table-bg) !important;
            &:not(:last-child){border-right:1px dashed rgb(var(--bs-gray-pearl));}
        }
        tr.sum-row {
            th {background-color: rgb(var(--bs-gray-100)) !important;border-right:1px dashed rgb(var(--bs-dark));color:rgb(var(--bs-dark));}
        }
    }
    .data-total {
        th{
            background-color:rgb(var(--bs-white)) !important;
            color:rgb(var(--bs-black));
            font-size:100%;
            &:not(:last-child){border-right:1px dashed rgb(var(--bs-gray-pearl));}
        }
    }
    tfoot{
        td{background-color: rgb(var(--bs-gray-400)) !important;}
    }
    tbody{
        th{position:relative; font-weight:400; border-right:1px dashed rgb(var(--bs-gray-pearl));}
        td{position:relative; text-align:center; vertical-align:middle; word-break:break-word;
            &:not(:last-child){border-right:1px dashed rgb(var(--bs-gray-pearl));}
        }
    }
    .btn-area{position:absolute; bottom:4px; left:0; width:100%; box-sizing:border-box; padding:0 0.4rem;
        .btn{
            &.btn-outline-secondary{background:rgb(var(--bs-white));}
            &:hover,
            &:focus{background:var(--bs-btn-hover-bg);}
        }
        .btn-reflesh,
        .btn-paper{width:20px; height:20px; overflow:hidden; padding:0; font-size:0.750rem; line-height:20px;}
        .btn-arrow{width:20px; height:20px; overflow:hidden; padding:0; font-size:1.125rem; line-height:20px; border-radius:50%;}
    }
}
.table-event{ min-width:1400px;
    thead{
        th{font-size:13px; text-align:center; vertical-align:middle; line-height:1.4;
            &:not(:last-child){border-right:1px dashed rgb(var(--bs-gray-pearl));}
        }
    }
    td{padding:5px; font-size:13px; vertical-align:middle;}
    input[type="text"]{padding:5px; font-size:13px;}
    .r-border{border-right:1px dashed rgb(var(--bs-gray-pearl));}
}
.table-data{text-align:center;
    th,
    td{padding:20px 10px;}
    thead{
        th{background:rgb(var(--bs-white-spring));}
    }
}
.table-modal{font-size:13px; vertical-align:middle;
    thead{
        th{text-align:center; background:rgb(var(--bs-white-spring));}
    }
    .btn{margin:0 0 0 10px; font-size:13px;}
    td{
        input[type="text"]{height:25px;}
    }
}
.table-left-header{font-size:13px; vertical-align:middle;
    th{text-align:center; background:rgb(var(--bs-white-spring));}
    td{
        input,
        select{font-size:13px;}
    }
    .btn{min-width:80px;}
    * + .btn{margin-left:10px;}
}
.table-sm{min-width:1000px;}

table.dataTable{
    border-right: 1px dashed var(--bs-border-color);
    tr:not(:first-child) {
        th{
            &:last-of-type {border-right:1px dashed rgb(var(--bs-gray-pearl));}
        }
    } 
    th, td{
        &.dt-type-center{
            text-align:center !important;
        }
    }
}
div.dataTables_scrollBody{
    &>table{padding-bottom:3rem;}
}
//통합광고관리 - 캼페인 - 제목 아래 테이블 (~~건 결과) id="total" -> .data-total 변경
// 현재 td 말고 th로 레이아웃 되어 있음 확인필요
table thead .data-total td{color:rgb(var(--bs-black)); text-align:center;}
.dt-buttons .btn-group .btn > span {font-size:.825em;}


/* 2024024 이벤트 관리 페이지 css 추가 */
.dtfh-floatingparent thead{
    &> tr > th,
    &> tr > td {text-align:center !important;}
}

.sub-contents-wrap {
    .dt-container {
        table.dataTable {
            thead {
                tr {
                    th, td {//통합광고관리
                        text-align: center;
                    }
                    .sorting_asc:before,
                    .sorting_desc:after {
                        color: rgb(var(--bs-white));
                        opacity: 1;
                    }
                }
            }
            tbody {
                tr{ 
                    td {
                        position:relative;
                        padding:12px 0;
                        &.drfc-fixed-left:last-child {
                            z-index: 2;
                        }
                    }
                    &.abnormal {
                        td {
                        background-color: rgb(var(--bs-white-baja));
                        }
                    }
                    &.active {
                        td {
                            border-top: 5px solid rgb(var(--bs-gray-400));
                            &:first-of-type {
                                border-left: 5px solid rgb(var(--bs-gray-400));
                            }
                            &:last-of-type {
                                border-right: 5px solid rgb(var(--bs-gray-400));
                            }
                        }
                    }
                    &.active + tr.active { 
                        td {
                            border-top:0;
                            border-bottom: 5px solid rgb(var(--bs-gray-400));
                        }
                    }
                    &:hover {
                        &> * {
                            box-shadow: inset 0 0 0 9999px rgba(var(--bs-black), 0.075);
                        }
                    }
                }
            }
            tfoot {
                tr {
                    th, td {
                        text-align:center;
                    }
                }
            }
            textarea{
                &.consultation {
                    padding: 0;
                    width: 100%;
                    border: none;
                    background: transparent;
                }
            }
            select{
                &.data-del {
                    padding: 3px;
                    border-radius: 4px;
                    font-size: 98%;
                    letter-spacing: -1px;
                }
            }
            button {
                &.save {
                    background-color: rgb(var(--bs-blue-azure));
                    color: rgb(var(--bs-white));
                    margin-top: 0.25rem;
                    padding: 0.4rem 1rem;
                    border-radius: 4px;
                }
                &.delete {
                    background-color: rgb(var(--bs-black));
                    color: rgb(var(--bs-white));
                    margin-top: 0.25rem;
                    padding: 0.4rem 1rem;
                    border-radius: 4px;
                    transition: 0.5s;
                    &:hover {
                        box-shadow: inset 0 -3em 0 0 rgb(var(--bs-red-origin));
                    }
                }
            }
            .media_box{//통합광고관리
                i{display:inline-block; width:28px; height:28px;}
                .facebook{
                    @include bg('ico_facebook.png', center, 0);//var.scss
                    background-size:100% auto;
                }
                .kakao{
                    @include bg('ico_kakao.png', center, 0);//var.scss
                    background-size:100% auto;
                }
                .google{
                    @include bg('ico_google.png', center, 0);//var.scss
                    background-size:100% auto;
                } 
            }
            .codeBox{
                .codeBtn{
                    padding:0;
                    .bi-c-circle{
                        font-size: 1.15rem;
                        &:hover{cursor: pointer;}
                    }
                }
                span{
                    margin-left: 5px;
                }
            }
            .mediaName{
                p{margin-bottom:0.5rem; text-align: left;}
                button{position: absolute !important; bottom: 0; right: 0;
                    i{font-size: 1.25rem;}
                }
                
            }
            .landing-box{
                > button{display: block; margin: 0 auto;}
            }
            //select 통합광고관리
            select.form-select{font-size:0.75rem; background-position:right .25rem center; padding: .375rem 0.25rem .375rem .35rem;  background-size:10px 10px; position: absolute; top:44%; left:50%; transform: translate(-50%, -50%); width:88%;}
            button.btn-history{position: absolute; bottom: 0; right: 0;}
            .is_stop{color:rgb(var(--bs-red-origin));}
        }
    }
    //자동화 목록 사용중
    .dt-container{
        .dt-button-collection{
            .dt-button-split{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: stretch;
                button.dt-button{margin: 0; display: inline-block; width: 0; flex-grow: 1; flex-shrink: 0; flex-basis: 50px;
                    &:first-child{padding-right: 3em;}
                    &:last-child{margin-left: -1px; padding-left: 0.75em; padding-right: 0.75em; z-index: 2;}
                }
                button.dt-button-split-drop{min-width: 33px; flex: 0;}
            }
        }
        .dt-buttons{z-index:1; text-align: left; margin-bottom:1rem;
            i.bi-list{color:rgb(var(--bs-dark-metal)); transition:all 0.3s; font-size:150%;
                &:hover::before{animation:rotate-turn 0.3s infinite linear alternate;}
            }
        }
        .paging{
            padding-top:1.755em; 
            position:sticky; 
            bottom:0; 
            background-color:rgb(var(--bs-white-spring));
        }      
        .dataTables_length{
            margin-bottom:2rem;
            select{
                padding:0.2rem 1rem; 
                background-color:rgb(var(--bs-white)); 
                border-radius:4px; 
                border:1px dashed rgb(var(--bs-dark-metal));}
        }
        .dt-info{
            text-align:left;
            i.bi{
                display:inline-block;
                vertical-align:top;
                padding-right:6px;
                font-size:110%;
                color:rgb(var(--bs-red-origin));
            }
            > span{position:relative;
                &:hover{
                    font-weight:900;
                }
                @include underline-effect($bg:rgb(var(--bs-gray-gunsmoke)));
            }          
        }
    }
    .ads_status.enabled, .ads_status.disabled {position:absolute;left:12px;top:50%;transform:translate(0,-50%);}
    // .event_seq {padding:0 0 0 18px;}
    .btn_search {position:absolute;right:0;bottom:0;z-index:1;padding:5px;}
    .another_url{position:absolute; right:-10px;top:-7px; font-size:470%;opacity:.3;}
    a[target=event_pop] {
        display:block;position:relative;z-index:1;
    }
}

//통합광고관리 
.table.advLogTable.dataTable{
    &>thead.table-dark {
        tr {
            th {
                background:rgb(var(--bs-black));
            }         
        }  
    }
}

//계정별통계 팝업 table
.sub-contents-wrap {
    table.dataTable.accountStatTable {
        border-bottom:1px solid var(--bs-border-color);
        thead {
            tr {
                th {
                    padding:10px;
                    background: rgb(var(--bs-white-spring));
                    border-left-width: 1px;
                    text-align: center;
                    font-size: 14px;
                }
            }
        }
        tbody {
            tr {
                td {
                    font-size: 13px;
                    border-left-width: 1px;
                    padding:10px;
                    word-break:break-all;
                    .media_box i{
                        width:20px;
                        height:20px;
                    }
                }
            }
        }
        tfoot {
            tr {
                th {
                    font-size: 13px;
                    padding:10px 5px;
                    border-top-width:1px;
                    border-left-width:1px;
                    border-bottom:1px solid rgb(var(--bs-red-primary));
                    background-color:rgb(var(--bs-white-spring));
                    word-break:break-all;
                }
            }
        }
    }
}
//20240724 통합DB 테스트 시 테이블 표기 추가
.db-manage-contaniner {
    .deviceTable {
        tbody {
            tr {
                &.on {
                    td {
                        background-color:rgb(var(--bs-gray-soft-peach));
                    }
                }
            }
        }
    }
}
// 20240516 테이블 너비 조절
div.dt-scroll-head {
    table.dataTable {
        width:100% !important;
    }
} 
div.dt-scroll-body {
    table.table.dataTable{
        width:100% !important;
    }
}


//통합DB관리 페이징 & 모달 자동화등록 팝업 검색 후 페이지네이션
.dt-paging{
    float:unset; text-align: center; padding-top:1.755em; padding-bottom:1.755em;
    .dt-paging-button{
        border:none; padding:0.25rem 0.5rem;
        &.disabled,
        &.disabled:hover{
            color:rgb(var(--bs-silver-aluminium)) !important;
        }
        &:hover{
            color:rgb(var(--bs-red-origin)) !important; 
            border:none; 
            background:none; 
            transition:0.2s;
        }
        &:not(.previous,.next,.current){
            @include dot-effect;
            @include underline-effect;
        }
        &.current{
            color:rgb(var(--bs-white)) !important; 
            background-color:rgb(var(--bs-red-origin)); 
            border:none; 
            padding:0.2rem 1rem; 
            border-radius:4px;
            &:hover{
                color:rgb(var(--bs-white)) !important; 
                background-color:rgb(var(--bs-red-origin)); 
                border:none;
            }
        } 
        &:active{
            background:none; 
            border:none;
        }
    }            
}
.db-table-responsive {position:relative;}

//회원관리 - 광고주/광고대행사 팝업
.company-contaniner{
    table.dataTable.adAccountListTable {
        text-align: center;
        border-bottom: 1px solid rgb(var(--bs-gray-300));
        thead {
            tr{
                &:first-child {
                    th{
                        border-bottom: 1px solid rgb(var(--bs-gray-300));
                    }
                }
                
                th {
                    padding:.5rem .5rem;
                    background-color:rgb(var(--bs-white-spring));
                    color:rgb(var(--bs-black));
                    border-left: 1px solid rgb(var(--bs-gray-300));
                    border-top: 1px solid rgb(var(--bs-gray-300));
                }
            }
        }
        tbody tr{
            th{
                &:nth-child(2){width:20%;}
                &:nth-child(3){width:15%;}
                &:nth-child(4){width:25%;}
            }
            td{
                border-left: 1px solid rgb(var(--bs-gray-300));
                padding:.3rem 0 !important;
                &:nth-child(2){width:20%;}
                &:nth-child(3){width:15%;}
                &:nth-child(4){width:25%;}
                &.dt-empty {
                    padding:1rem 0 !important;
                }
            }
        } 
    }
    table.dataTable.userTable {
        text-align: center;
        border-bottom: 1px solid rgb(var(--bs-gray-300));
        thead {
            tr{
                &:first-child {
                    th{
                        border-bottom: 1px solid rgb(var(--bs-gray-300));
                    }
                }
                th {
                    padding:.5rem .5rem;
                    background-color:rgb(var(--bs-white-spring));
                    color:rgb(var(--bs-black));
                    border-left: 1px solid rgb(var(--bs-gray-300));
                    border-top: 1px solid rgb(var(--bs-gray-300));
                }
            }
        }
        tbody tr{
            td{
                border-left: 1px solid rgb(var(--bs-gray-300));
                padding:.3rem 0 !important;
            }
        } 
    }
}

//시간차관리 datatable
.dayOffModal {
    .dataTable.table-modal {
        border-bottom-width:1px;
        width:100%;
        thead{
            tr{
                th{
                    background:rgb(var(--bs-white-spring));
                    border-left-width:1px;
                    text-align:center;
                }
                &:last-child{
                    th{
                        border-bottom-width:1px;
                    }
                }
                &:not(first-child) {
                    th {
                        &:last-of-type{
                            border-right:1px solid rgb(var(--bs-gray-pearl));
                        }
                    }
                }
            }
        }
        tbody{
            tr{
                td{
                    border-left-width:1px;
                }
                &:last-child{
                    td {
                        border-bottom-width:1px;
                    }
                }
            }
        }
    }
}

.issueDetail {
    table.dataTable.table-bordered {
        thead {
            tr{
                &:first-child {
                    th{
                        border-bottom: 1px solid rgb(var(--bs-gray-300));
                    }
                }
                th {
                    padding:.5rem .5rem;
                    background-color:rgb(var(--bs-white-spring));
                    color:rgb(var(--bs-black));
                    border-left: 1px solid rgb(var(--bs-gray-300));
                    border-top: 1px solid rgb(var(--bs-gray-300));
                }
            }
        }
        tbody{
            tr{
                &:last-child {
                    td{
                        border-bottom-width:1px;
                    }
                }
                td{
                    
                    border-left-width:1px;
                }
            }
        }
    }
    
}
@media (min-width: 768px) {
    .dt-container{
        .col-md-7{width:100%;}
        .col-md-5{width:auto;}
    }
}

@include x-large{//1400px

}

@include large{//1200px
}
@include medium{//1024px
    .table-data{text-align:center;
        th,
        td{padding:10px;}
    }
}
@include small{//768px

}