.hello { padding: 40px 15px; text-align: center; } .controller_selection { padding-top: 10px; } .hidden { display: none; } .no-bullets { list-style-type: none; } .huge_text { font-size: 2.5em; } @media all and (orientation: portrait) { #bucket_image { width: 90%; cursor: pointer; } } @media all and (orientation: landscape) { #bucket_image { width: 40%; cursor: pointer; } } @media all and (orientation: portrait) { #alarm_image { width: 70%; cursor: pointer; } } @media all and (orientation: landscape) { #alarm_image { width: 30%; cursor: pointer; } } .clickable { cursor:pointer; } .sensorData { color: #101010; font-family: 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; } /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input {display:none;} /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } #chartHorizontalScroll { width: 100%; overflow-x: scroll; overflow-y: hidden; white-space:nowrap; }