:root {
    --cdr-border: #ccc;
    --cdr-header-border: #bbb;
    --cdr-header-color: #cfd7ff;


    --cdr-odd-row: #eaeaea;
    --cdr-even-row: #f3f3f3;
    --cdr-group-row: #fffadf;
    --cdr-active-row: #ffb0ee;


    --filter-wildcard-color: #444;
    --filter-wildcard-active-color: #ff18ed;

    --important-date-background: #ffa3da;
    --weekend-background: #c6dfff;

    --filter-notify-active-color: #ff4df1;
    --filter-notify-color: #bfb0be;

    --filter-calltype-color: #212121;
    --filter-calltype-active-color: #ff18ed;

    --filter-calltype-transition1-color: #555;
    --filter-calltype-transition2-color: #ff4df1;


}


.left-panel .filters {
    position: relative;
    padding-left: .8rem;
    margin-bottom: .75rem;
}

.left-panel .filters > * {
    margin-bottom: .5rem;
}

    .left-panel .filters .filter .wrapper {
        display: flex; align-items: center;
    }
    .left-panel .filters .filter .value {
        flex: 1;
        min-width: 6rem;
        margin-right: .5rem;
        background-color: var(--textbox-background);
    }
    .left-panel .filters .filter .wildcard {
        width: 1.4rem;
        height: 1.4rem;
        margin-right: .5rem;
        padding: .1rem;
        cursor: pointer;
        fill: var(--filter-wildcard-color);
        transition: fill .15s;
    }
        .left-panel .filters .filter .wildcard.active {
            fill: var(--filter-wildcard-active-color);
        }
    .left-panel .filters .filter .status {
        width: .5rem;
        height: .5rem;
        background-color: var(--filter-notify-color);
        border-radius: .25rem;
        transition: background-color .2s ease-out;
    }
    .left-panel .filters .filter .status.active {
        background-color: var(--filter-notify-active-color);
    }


.left-panel .filters .call-types {
    display: flex;
    justify-content: space-between;
}
    .left-panel .filters .call-types .call-type {
        display: flex;
        flex-direction: column;
        margin-left: .5rem;
        margin-right: .5rem;
        cursor: pointer;
    }
        .left-panel .filters .call-types .call-type svg {
            height: 1.5rem;
            fill: var(--filter-calltype-color);
            transition: .15s fill;
        }
        .left-panel .filters .call-types .call-type span {
            margin-top: .25rem;
            font-size: 0.85rem;
            color: var(--filter-calltype-color);
            transition: .15s color;
        }
        .left-panel .filters .call-types .call-type.active svg {
            fill: var(--filter-calltype-active-color);
        }
        .left-panel .filters .call-types .call-type.active span {
            color: var(--filter-calltype-active-color);
        }
        .left-panel .filters .call-types .call-type:hover svg {
            fill: var(--filter-calltype-transition1-color);
        }
        .left-panel .filters .call-types .call-type:hover span {
            color: var(--filter-calltype-transition1-color);
        }
        .left-panel .filters .call-types .call-type.active:hover svg {
            fill: var(--filter-calltype-transition2-color);
        }
        .left-panel .filters .call-types .call-type.active:hover span {
            color: var(--filter-calltype-transition2-color);
        }




.left-panel .filters .buttons {
    display: flex;
    justify-content: space-between;
}
    .left-panel .filters .buttons > .button {
        flex: 1;
        min-width: fit-content;
        font-size: .9rem;
        font-weight: 500;
        margin-left: .5rem; margin-right: .5rem;
    }
    .left-panel .filters .buttons > .button:first-child {
        margin-left: 0;
    }
    .left-panel .filters .buttons > .button:last-child {
        margin-right: 0;
    }


.left-panel .settings {
    position: relative;
    padding-left: .8rem;
    margin-bottom: .75rem;
}
    .left-panel .settings .component {
        margin-bottom: .5rem;
        font-size: .9rem;
        text-align: left;
    }
    .left-panel .settings .component:last-child {
        margin-bottom: 0;
    }


.left-panel .new-entries {
    margin-top: .5rem;
    margin-bottom: .75rem;
    display: flex; flex-direction: column; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity .1s, visibility .1s;
}
.left-panel .new-entries.active {
    opacity: 1; visibility: visible;
}
    .left-panel .new-entries .text {
        display: flex; justify-content: space-around;
    }
    .left-panel .new-entries span {
        font-size: 1.1rem;
        margin-bottom: .5rem;
    }
        .left-panel .new-entries .num {
            font-weight: 600;
            color: var(--important);
        }
        .left-panel .new-entries .update {
            min-width: 7.5rem;
            font-size: .9rem;
        }




.right-panel .cdr {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .cdr .table {
        display: flex;
        flex-direction: column;
        min-width: 1000px;
    }

        .cdr .header {
            display: flex;
            background-color: var(--cdr-header-color);
            border: 1px solid var(--cdr-header-border);
            user-select: none;
        }

            .cdr .header .cell {
                border-right: 1px solid var(--cdr-header-border);
            }

            .cdr .header .cell-group {
                padding: 0;
                flex-grow: 0;
                border: none;
                display: flex;
            }

            .cdr .header .cell-group_col {
                flex-direction: column;
                align-items: stretch;
            }

                .cdr .header .cell-group_col > .cell:not(:last-child) {
                    border-bottom: 1px solid var(--cdr-header-border);
                    padding-top: .25rem;
                    padding-bottom: .25rem;
                }

                .cdr .header .cell-group_row > .cell:last-of-type {
                    border-right: 1px solid var(--cdr-header-border);
                }

            .cdr .header .cell-clickable-area {
                padding-top: .25rem;
                padding-bottom: .25rem;
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;
                cursor: pointer;
            }

                .cdr .header .cell.sortable .name {
                    color: var(--link-normal-color);
                    transition: .15s color;
                }

                    .cdr .header .cell.sortable .cell-clickable-area:hover .name {
                        color: var(--link-active-color);
                    }

                .cdr .header .cell.sortable .sort-button {
                    display: none;
                    width: .7rem;
                    height: .7rem;
                    margin-left: .4rem;
                    cursor: pointer;
                    transition: .15s fill, .3s transform;
                    transform-origin: center center;
                    justify-content: center;
                    align-items: center;
                }

                    .cdr .header .cell.sortable .sort-button.sort-asc {
                        display: flex;
                        transform: rotate(180deg);
                    }

                    .cdr .header .cell.sortable .sort-button.sort-desc {
                        display: flex;
                    }

                    .cdr .header .cell.sortable .cell-clickable-area:hover .sort-button {
                        fill: var(--link-active-color);
                    }


            .cdr .cell {
                flex-grow: 1;

                display: flex;
                justify-content: center;
                align-items: center;

                border-right: 1px solid var(--border);
                padding-left: .75rem;
                padding-right: .75rem;
                min-height: 1.35rem;
            }

            .cdr .cell:last-of-type {
                border-right: none;
            }

            .cdr .cell.cell_id { min-width: 3.5rem; max-width: 3.5rem; }
            .cdr .cell.cell_dailyct { min-width: 6rem; max-width: 6rem; }
            .cdr .cell.cell_type { min-width: 4.5rem; max-width: 4.5rem; }
            .cdr .cell.cell_date { min-width: 8.5%; max-width: 8.5%; }
            .cdr .cell.cell_source { min-width: 12.5%; flex-basis: 100%; }
            .cdr .cell.cell_destination { min-width: 12.5%; flex-basis: 100%; }
            .cdr .cell.cell_total-duration { min-width: 5rem; max-width: 5rem; }
            .cdr .cell.cell_call-duration { min-width: 5rem; max-width: 5rem; }
            .cdr .cell.cell_result { min-width: 8rem; max-width: 8rem; }
            .cdr .cell.cell_records { min-width: 7rem; max-width: 7rem; }


        .cdr .body {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--cdr-border);
            border-top: none;
            max-height: calc(100vh - 12rem);
            overflow-x: hidden;
        }

            .cdr .body .entry:nth-child(even) {
                background-color: var(--cdr-even-row);
            }

            .cdr .body .entry:nth-child(odd) {
                background-color: var(--cdr-odd-row);
            }

            .cdr .body .entry {
                display: flex;
                min-height: 2.5rem;
                transition: background-color .1s;
            }
            .cdr .body .entry.active {
                background-color: var(--cdr-active-row);
            }

                .cdr .body .cell {
                    font-size: 0.95rem;
                }

                    .cdr .body .cell .image {
                        width: 1.5rem;
                        height: 1.5rem;
                    }

                    .cdr .body .cell .image.link {
                        width: 1.25rem;
                        height: 1.25rem;
                        cursor: pointer;
                        transition: fill .15s;
                        margin-left: .4rem;
                        margin-right: .4rem;
                    }

                        .cdr .body .cell .image.link:hover {
                            fill: var(--control-selected);
                        }

            .cdr .body .entry.group {
                background-color: var(--cdr-group-row);
                display: flex;
                align-items: center;
                padding-left: 1rem; padding-right: 1rem;
            }
            .cdr .body .entry.group:not(:nth-child(2)) {
                border-top: 1px solid var(--cdr-border);
            }
            .cdr .body .entry.group:not(:last-child) {
                border-bottom: 1px solid var(--cdr-border);
            }
                .cdr .body .entry.group .group-text {
                    font-size: 1.2rem;
                    font-weight: 500;
                    min-width: 8rem;
                    text-align: left;
                }
                .cdr .body .entry.group .stats {
                    display: flex;
                    align-items: center;
                    margin-left: 1rem;
                }
                    .cdr .body .entry.group .stats .image {
                        width: 1.35rem;
                        height: 1.35rem;
                        margin-right: .5rem;
                        margin-left: 2rem;
                    }
                .cdr .body .entry.group .stats .num-calls {
                    text-align: left;
                    min-width: 1.5rem;
                }


        .cdr .body .no-cdrs {
            display: none;
            flex-direction: column;
            align-items: center;
            padding-bottom: 2rem;
        }
        .cdr .body .no-cdrs.active {
            display: flex;
        }
        .cdr .body .no-cdrs .text {
            font-size: 2rem;
        }

    .cdr .controls {
        min-height: 2.5rem;
        max-height: 2.5rem;

        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 1rem;

        user-select: none;
    }

        .cdr .controls .button {
            width: 1.5rem;
            height: 1.5rem;
            margin-left: .75rem;
            margin-right: .75rem;
        }

            .cdr .controls .button.active {
                cursor: pointer;
            }

            .cdr .controls .button { fill: var(--control-disabled); transition: fill .15s; }
            .cdr .controls .button.active { fill: var(--control-enabled); }
            .cdr .controls .button.active:hover { fill: var(--control-selected); }

        .cdr .controls .status {
            margin-left: 2rem;
            margin-right: 2rem;
            font-size: 1.15rem;
            min-width: 5rem;
        }

        .cdr .controls .goto-page {
            margin-left: 1rem;
            width: 3.5rem;
        }