.article .polopoly_embed { max-width: 100%; } #one-hundred-container { width: 100%; font-family: 'CTVSans-Regular', 'CTV Sans', Arial, Helvetica, sans-serif; max-width: 750px; margin: 0 auto; min-width: 400px; } .bar-svg { min-width: 370px; } .one-hundred-chart { position: relative; /*box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);*/ border: 1px solid #d3d3d3; border-radius: 2px; min-height: 350px; padding: 0; margin: 10px auto; } .dropdown-div { position: relative; text-align: center; } .chart-options { padding: 25px 10px 15px; margin: 25px 15px 15px; border: 1px solid #d3d3d3; border-radius: 2px; } .chart-options-title { border-radius: 2px; border: 1px solid #d3d3d3; position: absolute; left: 15px; top: -12px; background: white; color: #333; padding: 3px 10px; font-size: 14px; font-family: 'CTVSans-Bold', 'CTV Sans', Arial, Helvetica, sans-serif; line-height: 1; } .hundred-dropdown { -webkit-appearance: none; -moz-appearance: none; pointer-events: all; height: 23px; width: 140px; font-size: 14px; padding: 0 0px 0 5px; font-family: 'CTVSans-Bold', 'CTV Sans', Arial, Helvetica, sans-serif; color: black; border: none; cursor: pointer; } .drop-container { position: relative; display:inline-block; border: 1px solid #333; border-radius: 2px; margin: 3px 7px; } .drop-container:after { content: '>'; font-size: 16px; font-family: 'CTVSans-Regular', 'CTV Sans', Arial, Helvetica, sans-serif; color: #333; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); right: 1px; margin-right: 5px; pointer-events: none; position: absolute; top: 3px; background: white; line-height: 1; } .drop-black { margin-top: 62px; background: #333; } .drop-gold { margin-top: 0px; background: goldenrod; } .hundred-dropdown:focus { outline: none; } .slider-div { position: relative; background: #ffffff; display: grid; grid-template-columns: 60px 1fr; } .slider-div > p { font-size: 20px; margin: 0; } .light { position:relative; top: -2px; margin-left: 5px; font-size: 12px; color: #aaa; } .tip-light { font-size: 10px; } .slider { margin-top: 11px; -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: #333; outline: none; opacity: 1; -webkit-transition: .2s; transition: opacity .2s; margin-bottom: 15px; border-radius: 0px; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fafbfc; border: 3px solid #333; cursor: pointer; } .slider::-moz-range-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fafbfc; border: 3px solid #333; cursor: pointer; } .source-div { position: relative; padding: 0px 15px 0px; border-top: 1px solid #d3d3d3; line-height: 28px; } .source-div > p { width: 70%; margin: 3px; } .source-img { position: absolute; right: 15px; top: 5px; height: 20px; } .source-img > img{ height: 15px; } .bold { font-weight: 700; }