html{ width: 100%; height: 100%; margin: 0px; background-color: #14181b; } body{ position: relative; width: 100%; padding-top: 20px; padding-bottom: 130px; min-height: calc(100% - 150px); max-width: 1000px; min-width: 500px; margin: auto; background-color: #1f262b; } div.login { position: absolute; left: calc(50% - 200px); top: calc(50% - 100px); margin-left: 0px; margin-top: 0px; width: 400px; height: 200px; background-color: #14181b00; border-radius: 8px; border: 0px solid #fff; } div.inputbox { position: relative; left: 0px; top: 0px; margin-left: 0px; margin-top: 20px; width: 100%; height: 40px; background-color: #14181b; border-radius: 8px; border: 1px solid #fff; } .input { position: absolute; left: 25px; top: 50%; margin-left: -0px; margin-top: -15px; width: calc(100% - 50px); height: 30px; text-align: center; color:#fff; font-size: 15pt; font-family:Arial, "lucida console", sans-serif; border: 0px solid #fff; background-color: transparent; outline: 0 none; } input[id="name-input"]::-webkit-input-placeholder { color: #ffffff; } #short-btn { position: absolute; width: 150px; margin-left: calc(50% - 75px); margin-top: 20px; } #copy-btn { position: absolute; width: 150px; margin-left: calc(50% - 75px); margin-top: 20px; } #bottom-link-btn { position: fixed; width: 150px; left: calc(50% - 75px); bottom: 20px; } #logout-link-btn { position: fixed; width: 100px; right: 10px; top: 10px; } .btn-blue{ cursor: pointer; height: 40px; background-color: #00BCD4; box-shadow: 3px 3px 10px #333; border-radius: 20px; } .btn-green{ cursor: pointer; height: 40px; background-color: #009688; box-shadow: 3px 3px 10px #333; border-radius: 20px; } .btn-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15pt; color:#fff; font-family:Arial, "lucida console", sans-serif; } .sym_btn-red{ cursor: pointer; height: 40px; width: 40px; background-color: #E53935; border-radius: 20px; box-shadow: 3px 3px 10px #333; float: left; } .sym_btn-blue{ cursor: pointer; height: 40px; width: 40px; background-color: #1E88E5; border-radius: 20px; box-shadow: 3px 3px 10px #333; float: left; } .sym_btn-invisible{ cursor: pointer; height: 40px; width: 40px; background-color: #fff0; border-radius: 20px; float: left; } img.icon { margin-top: 8px; margin-left: 8px; } .title { text-align: center; width: 100%; color:#fff; font-size: 30pt; font-family:"Roboto", bold, sans-serif; } .title2 { margin-top: 20px; text-align: center; width: 100%; color:#fff; font-size: 20pt; font-family:"Roboto", bold, sans-serif; } #login-title { position: absolute; top: 0px; margin-bottom: 30px; } .box-dark{ position: relative; margin: auto; width: calc(100% - 50px); max-width: 600px; background-color: #1f262b; box-shadow: 3px 3px 10px #333; border: 2px solid #fff; border-radius: 10px; color: #fff; font-size: 15pt; font-family:"Roboto", regular, sans-serif; } #user-line{ position: relative; margin: auto; width: calc(100% - 0px); height: 50px; max-width: 600px; background-color: #1f262b; border: 1px solid #fff; border-radius: 10px; } #new_user-btn{ position: relative; margin-top: 30px; width: 250px; } #create_user-btn{ position: relative; top: 50px; width: 250px; } table{ position: relative; margin: auto; width: calc(100% - 50px); max-width: 600px; background-color: #1f262b; box-shadow: 3px 3px 10px #333; border: 2px solid #fff; border-collapse: separate; border-spacing: 2px; border-radius: 10px; color: #fff; font-size: 15pt; font-family:"Roboto", regular, sans-serif; } tr{ margin: auto; border: 1px solid #fff; } th{ margin: auto; border: 0px solid #aaa; background-color: #546E7A; padding: 20px; border-radius: 8px; } td{ margin: auto; border: 0px solid #aaa; background-color: #37474F ; padding: 10px; border-radius: 8px; } td.left,th.left{ border-radius: 8px 0px 0px 8px; } td.right,th.right{ border-radius: 0px 8px 8px 0px; } td.mid,th.mid{ border-radius: 0px 0px 0px 0px; } #new-user-box{ position: fixed; width: 500px; height: 200px; left: calc(50% - 250px); top: calc(50% - 100px); display: none; } #change-user-box{ position: fixed; width: 400px; height: 300px; left: calc(50% - 200px); top: calc(50% - 150px); display: none; } .error{ position: absolute; bottom: 10px; left: 10px; height: 150px; width: 250px; background-color: #E53935; border-radius: 15px; } #error-box{ display: none; }