html, body { height: 100%; margin: 0; padding: 0; } #main { position: fixed; width: 100%; height: 100%; left: 0; top: 0; } #app { width: 100%; height: 100%; } .appCenter { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) translate(0,-20px); } .alertUnsafe{ position: absolute; width: 100%; z-index: 9999; } .hideAlertButton{ position: fixed; } .clickTrough{ height: 50px; pointer-events: none; z-index: 1; } /* No arrows on numeric inputs */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .bottomBar { position: fixed; bottom: 0; width: 100%; height: 40px; } .amboss{ fill:url(#SVGID_1_); } .advancedSwitch{ width: 20; left: 50%; transform: translate(62px, 0px); margin-right: 0; margin-left: auto; } .bottomItem { margin: 0; top: -14px; } .profileNickname { margin: 0; left: -16px; } .newAvatar { border-radius: 50%; border: 2px solid #555; filter: drop-shadow(1px 1px 1px #000000); height: 200px; width: 200px; } .profileAvatar { border: 0.5px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); left: 35px; } .smallAvatar { border: 0.5px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); } .flippedSmallAvatar { transform: scaleX(-1); border: 0.3px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); } .phoneFlippedSmallAvatar img{ transform: scaleX(-1); border: 1.3px solid #1976d2; -webkit-filter: grayscale(100%); filter: grayscale(100%) brightness(150%) contrast(150%) drop-shadow(0.7px 0.7px 0.7px #000000); } .phoneFlippedSmallAvatar:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; border: 2.4px solid #1976d2; box-shadow: inset 0px 0px 35px rgb(255, 255, 255); } .bookAvatar { border-radius: 50%; transform: scaleX(-1); border: 0.3px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); }