@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

:root {
    --sidebar-open-width: 256px;
    --sidebar-closed-width: 50px;
    --header-height: 60px;
    --sidebar-bg-color: #f2f2f2;
    --atlantis: #89D329;
    --dark-mint-green: #2ecc7;
    --kelly-green: #66B512;
    --pine: #2B6636;
    --kaitoke-green: #004422;
    --artyclick-sky-blue: #00BCFF;
    --rich-electric-blue: #0091DF;
    --venice-blue: #00617F;
    --nile-blue: #10384F;
    --radical-red: #FF3162;
    --debian-red: #D30F4B;
    --ship-grey: #443247;
    --dark-background: #4D5457;
    --bs-primary: #007bff;
    --primary: #007bff;
}

.brand {
    margin-left: auto;
    text-align: right;
    color: var(--radical-red) !important;

}

.navbar-brand {
    color: var(--radical-red) !important;
}

.nav-link {
    color: var(--ship-grey);
    font-weight: 100;
}

.nav-link:hover {
    font-weight: 250;

}

.nav-link.active {
    color: var(--primary) !important;
    font-weight: 200 !important;
    text-decoration: underline !important;
}

#user {
    color: var(--ship-grey);
}

#header {
    position:fixed;
    left:0; 
    padding: 16px;
    right:0;
    height: var(--header-height);
    /* border-bottom: 1px solid var(--ship-grey); */
    z-index: 1000;
}

#content.open {
    position: absolute;
    left: var(--sidebar-open-width); top:var(--header-height); right:0; bottom:0;
    padding: 0 1rem 0 1rem;
    margin: 0;
}
#content.closed {
    position: absolute;
    left: var(--sidebar-closed-width); top:var(--header-height); right:0; bottom:0;
    padding: 0 1rem 0 1rem;
    margin: 0;
}

#sidebar.open {
    width: var(--sidebar-open-width);
}

#sidebar.closed {
    width: var(--sidebar-closed-width);
}

#sidebar {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    padding: 2rem 1rem;
    background-color: #f8f9fa;
    overflow-y: auto;
    font-size: 12px;
    /* border-right: 1px solid var(--ship-grey); */
}

#sidebar-controls.closed {
    display: none;
}

#toggle-sidebar {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 10px;
    padding: 5px 10px;
}

.description {
    font-size: 10px;
}

#content {
    margin-left: var(--sidebar-open-width);
    margin-right: 2rem;
    padding: 2rem 1rem;
}

#description {
    font-size: 11px;
}

.previous-next-container {
    font-size: 12px;
}

.wordcloud-btn {
    border-radius: 40px;
    margin: 1px;
    cursor: pointer;
    white-space: nowrap;
    /* padding: 3px; */
}

.popover-filter {
    /* margin-top: 5px; */
    margin-bottom: 5px;
}

.filter-label {
    margin-bottom: 2px !important;
    margin-top: 5px !important;
    font-size: 10px !important;
    font-weight: 100;
}

.VirtualizedSelectOption {
    width: 100%;
    white-space: nowrap;
    font-size: 10px;
    /* overflow: scroll;
    text-overflow: ellipsis; */
}

.card-body {
    box-shadow: 2px 2px 2px lightgrey;
}

.dash-table-tooltip {
    z-index: 1000;
    background-color: grey;
}

.loader-wrapper{
    /* visibility: visible !important; */
    position:absolute;
    top: 20px;
    right: 20px;
}

/* restyle radio items */
.radio-group .form-check {
    padding-left: 0;
    width: 100%;
}

.radio-group .vert-btn-group > .form-check:not(:last-child){
    margin-bottom: 0;
}

.radio-group .vert-btn-group > .form-check:not(:first-child){
    margin-top: 0;
}

.btn-outline-primary{
    width: 100%;
    border-width: 0;
}
  
.Select-value {
    font-size: 10px !important;
}

/* 
#radios > div:first-child > label {
    border-bottom-width: 0;
}

#radios > div:not(:first-child, :last-child) > label{
    border-bottom-width: 0;
} */

.home-row-chart {
    height: 200px;
}

#last-updated {
    bottom: 1rem;
    /* right: 0; */
    position:  absolute;
    font-size: 12px;
}

/* Custom ag-grid theme for large blocks of text */
.dbc-ag-grid .ag-theme-alpine {
    --ag-alpine-active-color: var(--bs-primary);
    --ag-selected-row-background-color: rgba(var(--bs-primary-rgb), 0.3);
    --ag-row-hover-color: rgba(var(--bs-primary-rgb), 0.1);
    --ag-column-hover-color: rgba(var(--bs-primary-rgb), 0.1);
    --ag-input-focus-border-color: rgba(var(--bs-primary-rgb), 0.4);
    --ag-range-selection-background-color: rgba(var(--bs-primary-rgb), 0.2);
    --ag-range-selection-background-color-2: rgba(var(--bs-primary-rgb), 0.36);
    --ag-range-selection-background-color-3: rgba(var(--bs-primary-rgb), 0.49);
    --ag-range-selection-background-color-4: rgba(var(--bs-primary-rgb), 0.59);
    --ag-background-color: var(--bs-body-bg);
    --ag-foreground-color: var(--bs-body-color);
    --ag-border-color:  rgba(173,181,189, 0.40);
    --ag-cell-horizontal-border:  rgba(173,181,189, 0.20);
    --ag-secondary-border-color:  rgba(173,181,189, 0.20);
    --ag-header-background-color:  rgba(173,181,189, 0.20);
    --ag-odd-row-background-color:  rgba(173,181,189, 0.05);
    --ag-control-panel-background-color: var(--bs-body-bg);
    --ag-subheader-background-color:  var(--bs-body-bg);
    --ag-invalid-color: var(--bs-form-invalid-color);
    --ag-font-family: var(--bs-font-family);
    --ag-tooltip-background-color: var(--bs-gray-400);
  }