#select-container {
	     position: absolute;
	     width: 60px;
	     height: 41px;
	     background: rgba(0,0,0,0.12);
	     top: 40px;
	     right: 274px;
	     transform: translateX(-50%);
	     border-radius: 10px;
	     border: 0.5px solid rgba(202, 219, 226, 0.40);
	     box-shadow: 0px 3px 6px rgba(79, 104, 113, 0.20);
	     overflow: hidden;
	     transition: height 0.2s ease-in-out, border-radius 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
     #select-container:hover {
	     height: 75px;
	    /* Can't use height: auto & transition effect */
	     border-radius: 8px;
	     box-shadow: 0px 7px 10px rgba(79, 104, 113, 0.30);
    }
     #select-container ul {
	     list-style-type: none;
	     position: relative;
         padding-left: 38px !important;
         padding-top: 17px !important;
    }
     #select-container ul li {
	     opacity: 1;
	     transition: opacity 0.2s ease-in-out;
    }
     #select-container ul li:first-child img {
	     cursor: default;
    }
     #select-container ul li img {
	     /*width: 50px;*/
	     height: 25px;
	     display: block;
	     left: 50%;
	     transform: translate(-70%, -40%);
	     margin-bottom: 8px;
	     /*border-radius: 50%;*/
	     border: 2px solid #fff;
	     box-shadow: 0px 0px 6px rgba(79, 104, 113, 0.30);
	     cursor: pointer;
	     transition: all 0.1s ease-in-out;
    }
     /*#select-container ul li img:hover {
	     box-shadow: 0px 5px 10px rgba(79, 104, 113, 0.30);
	     transform: translate(-103%, -40%) scale(1.08);
    }*/
    /* TOOLTIP STYLES */
     [tooltip] {
	     position: relative;
	    /* opinion 1 */
	     font-weight: bold;
    }
    /* Applies to all tooltips */
     [tooltip]::before, [tooltip]::after {
	     text-transform: none;
	    /* opinion 2 */
	     font-size: 12px;
	    /* opinion 3 */
	     line-height: 1;
	     user-select: none;
	     pointer-events: none;
	     position: absolute;
	     display: none;
	     opacity: 0;
    }
     [tooltip]::before {
	     content: '';
	     border: 5px solid transparent;
	    /* opinion 4 */
	     z-index: 1001;
	    /* absurdity 1 */
    }
     [tooltip]::after {
	     content: attr(tooltip);
	    /* magic! */
	    /* most of the rest of this is opinion */
	     font-family: Helvetica, sans-serif;
	     text-align: center;
	    /* Let the content set the size of the tooltips but this will also keep them from being obnoxious */
	     width: 40px;
	     white-space: nowrap;
	     overflow: hidden;
	     text-overflow: ellipsis;
	     padding: 3px 0px;
	     border-radius: 0.3ch;
	     box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
	     background: #465663;
	     color: #fff;
	     z-index: 1000;
	    /* absurdity 2 */
    }
    /* Make the tooltips respond to hover */
     [tooltip]:hover::before, [tooltip]:hover::after {
	     display: block;
    }
    /* don't show empty tooltips */
     [tooltip='']::before, [tooltip='']::after {
	     display: none !important;
    }
    /* FLOW: UP */
     [tooltip]:not([flow])::before, [tooltip][flow^="up"]::before {
	     bottom: 50%;
	     border-bottom-width: 0;
	     border-top-color: #465663;
    }
     [tooltip]:not([flow])::after, [tooltip][flow^="up"]::after {
	     bottom: calc(50% + 5px);
    }
     [tooltip]:not([flow])::before, [tooltip]:not([flow])::after, [tooltip][flow^="up"]::before {
	     left: -13.5px;
	     bottom: 40px;
	     transform: translate(-50%, -0.5em);
    }
     [tooltip][flow^="up"]::after {
	     left: -13.5px;
	     bottom: 45px;
	     transform: translate(-50%, -0.5em);
    }
    /* FLOW: DOWN */
     [tooltip][flow^="down"]::before {
	     top: 70%;
	     border-top-width: 0;
	     border-bottom-color: #465663;
    }
     [tooltip][flow^="down"]::after {
	     top: calc(70% + 5px);
    }
     [tooltip][flow^="down"]::before, [tooltip][flow^="down"]::after {
	     left: -13.5px;
         margin-top: -10px;
	     transform: translate(-50%, 0.5em);
    }
    /* KEYFRAMES */
     @keyframes tooltips-vert {
	     to {
		     opacity: 0.9;
		     transform: translate(-50%, 0);
	    }
    }
    /* FX All The Things */
     [tooltip]:not([flow]):hover::before, [tooltip]:not([flow]):hover::after, [tooltip][flow^="up"]:hover::before, [tooltip][flow^="up"]:hover::after, [tooltip][flow^="down"]:hover::before, [tooltip][flow^="down"]:hover::after {
	     animation: tooltips-vert 300ms ease-out forwards;
    }
    .tooltips:hover .tooltiptext {
        visibility: visible;
    }
    .tooltiptext {
        visibility: visible;
        width: 141px;
        background-color: rgba(255, 255, 255, 0);
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 0;
        top: 40px;
        right: 360px;
        line-height: 40px;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }