/*********************************************************************
 *                                                                   *
 * Purpose: Defines the styles for some commonly used html elements  *
 *                                                                   *
 * What it Contains:                                                 *
 *      - positioning of the buttons and filter dropdowns for the    *
 *          graphs                                                   *
 *********************************************************************/

/* For small phone screeens */
@media screen and (max-width: 600px) {
    body { 
        font-size: calc(0.8em + 1vw) !important; 
    }

    main {
        font-size: calc(0.8em + 1vw) !important;
    }
    
    h1 {
        font-size: calc(1.7em + 1vw) !important; 
    }
    
    h3 {
        font-size: calc(1em + 1vw) !important; 
    }

    .btn {
        font-size: calc(0.6em + 1vw) !important;
        margin: 3px 0;
    }

    .graphExtra {
        float: left !important;
    }

    #notes-table {
        table-layout:fixed !important;
    }

    .chart-legend {
        width: 90%;
    }

    .interestedLinkIcon {
        height: calc(2.5em + 1vw) !important;
    }

    .notes-table-wide {
        display: none !important;
    }

    .notes-table-xl {
        display: block !important;
    }
}

.graphExtra {
    margin: 10px 0 0 0;
    float: right;
}

#lowerGraphFilterGroupsButton {
    position:relative;
}

.graphTableContainer {
    overflow: auto !important;
}

.lowerGraphTableContainer {
    max-height: 500px;
}

.sortIcon {
    margin-left: 10px;
}

.lowerTableHeader {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: #fff;
}

.lowerGraphBtnIcon {
    width: 18px;
    height: 18px;
}

.interestedLinkIcon {
    width: auto;
    height: 70px;
    float: right;
}

.noFocusOutline:focus {
    outline: none;
}

.notes-table-wide {
    display: block;
}

.notes-table-xl {
    display: none;
}