button.settings { background: transparent; border: none; color: white; padding: 20px 20px; text-align: center; text-decoration: none; font-size: 20px; cursor: pointer; border-radius: 5px; display: table-cell; } .buttons { position: absolute; right: 10px; top: 10px; } i.material-icons { font-size: 30px; display: inline; color: #ffffff; } li.items { list-style: none; margin: 0; padding-top: 30px; } .modal { display: none; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; input { opacity: 0; width: 0; height: 0; } } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; :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: #FF4F4E; } input:focus+.slider { box-shadow: 0 0 1px #FF4F4E; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%; } .title { float: left; } .blurslider { margin-top: 7px; -webkit-appearance: none; width: 200px; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; float: right; ::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #FF4F4E; cursor: pointer; } ::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #FF4F4E; cursor: pointer; } } .dropdown { position: relative; display: block; float: right; padding: 10px; border: none; background: #ecf0f1; } label.switch, p.switch { display: inline; } label.switch { float: right; } li.items { list-style: none; margin: 0; padding-top: 30px } .modal { display: none } .modal-content { max-height: 500px; } img { max-width: 100%; margin-top: 20px; }