/* Loading zones — shown until figures finish rendering */
.cpsp-loading-zone.is-loading .cpsp-loading-content {
    display: none;
}

.cpsp-loading-zone:not(.is-loading) .cpsp-loading-indicator {
    display: none;
}

.cpsp-loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 12rem;
    padding: 2rem;
    color: #333;
    /*font-size: 1.1rem;*/
}

.cpsp-loading-indicator .fa-spinner {
    /*font-size: 1.5rem;*/
    color: #a5113f;
}

#summaries-data-zone .cpsp-loading-indicator,
#yearly-trends-data-zone .cpsp-loading-indicator {
    min-height: 20rem;
}

/*table stuff*/
table.dataTable thead .sorting_asc {
    background-image: url(/src/img/sorting-icons/sort_asc.png);
}
table.dataTable thead .sorting_desc {
    background-image: url(/src/img/sorting-icons/sort_desc.png);
}
table.dataTable thead .sorting {
    background-image: url(/src/img/sorting-icons/sorting_both.png);
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center right;
}

/*sticky menu css*/
.controlDiv {
    border-right: 2px solid #ccc;
    /*border-radius:10px;*/
    /*margin-bottom: 10px;*/
    left: 30px;
    background-color: white;
    z-index: 1000;
    width: auto;
    height: auto;
    font-size: 1em;
}  

.labelGroup {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.controlDiv label, .controlDiv input {
    margin: 0;
}

label.parentCheckbox {
    font-weight: normal;
}

.mb-4 {
    /* margin-top: 10px; */
    margin-top: 0px;
    margin-bottom: 0px;
    /*padding: 1rem;*/
}

#controlContainer {
    /*padding-top: 0;*/
    /*padding-bottom: 80px;*/
    position: sticky;
    top: 10px;
}

#viz-container {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 0;
    padding: 0;
    /*padding-left: 10px;*/
}

.parentCheckbox {
    font-size: 16px;
}

.visualizations-container {
    margin-left: 20px;
}

/*figure css*/
.table-responsive {
    padding-right: 2px;
}

.tick>line, .domain {
    stroke: #ccc;
}

.bar-chart .bar-label, .bar-chart .n-axis-title, .bar-chart .c-axis-title, 
#annualTrendContainer .bar-label, #annualTrendContainer .n-axis-title, #annualTrendContainer .c-axis-title{
    font-size: 15px;
}
.bar-chart .c0 .tick text {
    font-size: 13px;
}

/*#fig3Container .n .domain{*/
/*    display: none;*/
/*}*/

#fig1Container .c0 .tick text {
    font-size: 12px;
}

.bar-label {
    font-size: 16px;
}

/*slider*/
rect.overlay {
	stroke: black;
	fill: #bfbfbf66
}

rect.selection {
    fill: #4682b4a3;
    stroke: black;
    /*rx: 8px*/
    fill-opacity: 1;
    outline: -webkit-focus-ring-color auto 5px;
}

rect.selection:focus {
    fill: steelblue;
}

#labelleft, #labelright {
    dominant-baseline: hanging;
    font-size: 12px;
    text-anchor: middle;
}

/*#labelleft {*/
/*	text-anchor: end;*/
/*}*/

/*#labelright {*/
/*	text-anchor: start;*/
/*}*/
#slider-range .tick text{
    text-anchor: middle;
    dominant-baseline: hanging;
    /*font-size: 16px;*/
}


/*smaller than md*/
@media all and (max-width: 991px) {
    #viz-container {
        display: inline-block
        /*gap: 0;*/
        /*padding: 0;*/
        /*padding-left: 10px;*/
    }
    #controlContainer {
        padding-top: 0;
        padding-bottom: 0px;
    }
    .visualizations-container {
        margin-left: 0px;
    }
    .controlDiv {
        border: none;
        /*left: 30px;*/
        /*background-color: white;*/
        /*z-index: 1000;*/
        /*width: auto;*/
        /*height: auto;*/
        /*font-size: 1em;*/
    } 
    
    /*#annualTrendContainer .bar-label, #annualTrendContainer .n-axis-title, #annualTrendContainer .c-axis-title {*/
    /*    font-size: 20px;*/
    /*}*/
    
    .bar-chart .bar-label, .bar-chart .n-axis-title, .bar-chart .c-axis-title 
    /*, #annualTrendContainer .bar-label, #annualTrendContainer .n-axis-title, #annualTrendContainer .c-axis-title*/
    {
        font-size: 20px;
    }
    #annualTrendContainer .bar-label, #annualTrendContainer .n-axis-title, #annualTrendContainer .c-axis-title {
        font-size: 16px;
    }
    .bar-chart .c0 .tick text {
        font-size: 15px;
    }
}
/*larger than col-md*/
@media all and (min-width: 992px) {
    #slider-range {
        height: 400px;
        max-width: 150px;
    }
    #slider-range svg {
        transform: translate(-130px, 160px) rotate(90deg);
    }
    #slider-range .tick text {
        transform: translate(0, 8px) rotate(-90deg);
        text-anchor: end;
        dominant-baseline: auto;
    }
    #labelleft, #labelright {
        /*transform: translate(0, 8px) rotate(-90deg);*/
        dominant-baseline: auto;
        text-anchor: end;        
    }
    .mb-4 {
        /* margin-top: 10px; */
        /*margin-top: 0px;*/
        padding: 1rem;
    }
    
    #annualTrendContainer .bar-label, #annualTrendContainer .n-axis-title, #annualTrendContainer .c-axis-title {
        font-size: 15px;
    }
    
    .bar-chart .bar-label, .bar-chart .n-axis-title, .bar-chart .c-axis-title 
    /*, #annualTrendContainer .bar-label, #annualTrendContainer .n-axis-title, #annualTrendContainer .c-axis-title*/
    {
        font-size: 18px;
    }
}