/* * As you may have guessed, a little custom css is part of our project. */ body { padding-top: 5rem; } .content-box { padding: 1rem 0.5rem; text-align: center; } .chart-box { /*border: 1px solid grey;*/ } /* This container will allow scaling svg, so we don't need to care about it in d3.js */ .svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; /* aspect ratio */ vertical-align: top; overflow: hidden; } .svg-content-responsive { display: inline-block; position: absolute; top: 0; /* not 10px, but 0 instead */ left: 0; } .line { fill: none; stroke-width: 2px; } .frame { width: 100%; height: 185px; padding: 4px; border: 2px solid black; background-color: #EEEEEE;} .frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; } .frame .slidee li { float: left; margin: 0 5px 0 0; padding: 0; width: 150px; height: 100%; border: 2px solid gray; background-color: white; } .scrollbar { width: 100%; height: 16px; margin-top: 4px; background-color: hsl(0, 0%, 94.1%); border: 1px solid hsl(0, 0%, 50.0%); } .scrollbar .handle { width: 100px; /* overriden if dynamicHandle: 1 */ height: 100%; background: #222; } .coursename { font-size: 8pt; font-weight: bold; } .courseimagecontainer { height: 75%; width: 100%; height: 7em; display: flex; align-items: center; justify-content: center; } .courseimage { margin-left: auto; margin-right: auto; } #toggle-btn{ text-align: center; } #icon-up-arrow{ width: 1%; height: 1%; }