.fullscreen { width: 100%; height: 100vh; max-width: 100%; max-height: 100vh; z-index: 1; position: relative; overflow: hidden; } .fullscreen_centered { z-index: 2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .height_100-55 { height: calc(100% - 55px); } .mediumbox { width: 60vh; max-height: auto; } .padding_25 { padding: 25px; } .bordered_4px { border: 4px solid #383838; } .center_text { text-align: center; } .justify_text { text-align: justify; } .image_block { width: 128px; height: 128px; background-color: #b9b9b9; display: inline-block; margin-right: 20px; cursor: pointer; background-size: cover; background-repeat: no-repeat; background-position: center; } .form_elements { margin-top: 20px; } .meter { height: 20px; /* Can be anything */ position: relative; /* background: #555; */ -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; /* padding: 10px; */ /* box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3); */ } .meter > span { display: block; height: 100%; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: rgb(80, 80, 80); background-image: linear-gradient( center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69% ); box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; transition-duration: 500ms; } .meter > span:after, .animate > span > span { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient( -45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); z-index: 1; background-size: 50px 50px; animation: move 2s linear infinite; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; } .animate > span:after { display: none; } @keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } .meter > span:after, .animate > span > span { animation: move 2s linear infinite; }