@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/* Apply the hand cursor to all clickable elements */
a, button, .nav-link, [role="button"] {
    cursor: pointer;
}

.dash-table-container th[data-dash-column="article_title"] {
    position: relative;
}

.dash-table-container th[data-dash-column="article_title"] .header-content {
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.dash-table-container th[data-dash-column="article_title"]::after {
    content: "\f059";  /* FontAwesome question mark */
    font-family: 'Font Awesome 6 Free';
    margin-left: 8px;
    font-size: 16px;
    color: black;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.dash-tooltip {
    border-radius: 0 !important;
}

.dash-table-tooltip {
    border-radius: 0 !important;
}

body {
    font-family: 'Roboto', sans-serif; /* Apply Roboto font to the entire body */
}

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