/* Index */
/*********/
#index { border: solid 1px #8d9297; }

/* +++ Index of Letters +++ */
#indexOfLetters {
    list-style:       none;
    margin:           0;
    padding:          0; 
    display:          flex;
    background-color: #f1f3f6;
    justify-content:  space-evenly;
    align-items:      stretch;
}

#indexOfLetters li {
    flex:            1;
    list-style-type: none;
    margin:          0;
    padding:         0;
}

#indexOfLetters > li > a {
    display:         block;
    color:           #0076d6;
    text-decoration: none;
    flex:            1;
    padding:         0.75rem 0.1rem;
    text-align:      center;
}

#indexOfLetters > li > a:hover {
    background-color: #dcdee0;
}

#indexOfLetters > li.selected > a {
    background-color: #c6cace;
    color:            #1c1d1f;
}
/* --- Index of Letters --- */

/* +++ Index of Articles +++ */
#sections-container { position: relative; width: 100%; }

#sections-container:not(.grid) #sections-div { overflow: auto; }

#sections-container:not(.grid) #sections-div #sections { white-space: nowrap; }

#sections { list-style: none; margin: 0; padding: 0; }
#sections > li { display: inline-block; list-style-type: none; margin: 0; padding: 0; }

#sections > li > a { display: block; padding: 0.5em; }

#sections > li > a:hover { background-color: #f1f3f6; }

#sections-container.grid { min-height: 500px; }
@media only screen and (max-width:  991px){ #sections-container.grid #sections { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } }
@media only screen and (min-width:  992px){ #sections-container.grid #sections { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } }
@media only screen and (min-width: 1200px){ #sections-container.grid #sections { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } }

#sections > .selected > a {
    cursor:          default;
    color:           #1c1d1f;
    text-decoration: none;
    font-weight:     bold;
}
#sections > .selected > a:hover { background-color: transparent !important; }
/* --- Index of Articles --- */

/* +++ Overflow Arrows +++ */
.overflowArrow {
    position:         absolute;
    display:          none;
    left:             0;
    cursor:           pointer;
    width:            20px;
    height:           100%;
    background-color: rgba(0, 189, 227, 0.5);
    text-indent:      -9999px;
    z-index:          1001;
    transition:       background-color 0.25s ease;
}
.overflowArrow.visible { display: block; }

#overflowLeftArrow { left: 0; }

#overflowRightArrow { left: calc(100% - 20px); }

.overflowArrow span {
    position:     absolute;
    display:      inline-block;
    top:          50%;
    left:         50%;
    height:       0;
    width:        0;
    border-color: rgba(255, 255, 255, 0.9);
    transition:   margin-right 0.15s ease;
}

#overflowLeftArrow span { margin: -6px 0 0 -3px; }
#overflowRightArrow span { margin: -6px 0 0  -8px; }

.overflowArrow:hover { background-color: rgba(0, 118, 214, 0.9); }
/* --- Overflow Arrows --- */
/*********/
/* Index */

/* Rankings */
/************/
.rankings-maps-container > div { min-width: 300px; }
.percentile-map img { width: 100%; }

:not(.flex-wrap) .percentile-map {
    width: 48%;
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
}
@media (max-width:767px) {
    :not(.flex-wrap) .percentile-map { width: 100%; }
}

.chart-wrapper {
    min-width: 510px;
    width: 100%;
}

canvas {
    width: 100%;
    height: 175px;
    background: #fff;
    border: 1px solid #ddd;
    display: block;
}
/************/
/* Rankings */