.banrounded {border-radius: 1rem;} .tbl-left { text-align: left; } .tbl-right { text-align: right; } .tbl-center { text-align: center; } .tbl-top { vertical-align: top; } .tbl-bottom { vertical-align: bottom; } .tbl-middle { vertical-align: middle; } #ban-skpause{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:5000}#ban-skpause-inner{position:absolute;top:50%;left:50%;font-size:30px;color:#fff;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.sktoggle{cursor:pointer;display:inline-block}.sktoggle-switch{display:inline-block;background:#d1d1d1;border-radius:14px;width:54px;height:28px;position:relative;vertical-align:middle;transition:background .25s}.sktoggle-switch:before,.sktoggle-switch:after{content:""}.sktoggle-switch:before{display:block;background:linear-gradient(to bottom,#fff 0%,#eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,0.25);width:20px;height:20px;position:absolute;top:4px;left:4px;transition:left .25s}.sktoggle:hover .sktoggle-switch:before{background:linear-gradient(to bottom,#fff 0%,#fff 100%);box-shadow:0 0 0 1px rgba(0,0,0,0.5)}.sktoggle-checkbox:checked + .sktoggle-switch{background:#33C3F0}.sktoggle-checkbox:checked + .sktoggle-switch:before{left:30px}.sktoggle-checkbox{position:absolute;visibility:hidden}.sktoggle-label{margin-left:5px;position:relative;top:2px;font-weight:400} .skprogressbar {background-color: white; border-radius: 9px;padding: 2px;border: 1px solid #d1d1d1;}.skprogressbar-div {background-color: #33C3F0;height: 14px;border-radius: 7px;} .preloadcontainer { height: 100vh; width: 100vw; font-family: Helvetica } .loader { height: 20px; width: 250px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto } .loader--dot { animation-name: loader; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; height: 20px; width: 20px; border-radius: 100%; background-color: #000; position: absolute; border: 2px solid #fff } .loader--dot:first-child { background-color: #8cc759; animation-delay: .5s } .loader--dot:nth-child(2) { background-color: #8c6daf; animation-delay: .4s } .loader--dot:nth-child(3) { background-color: #ef5d74; animation-delay: .3s } .loader--dot:nth-child(4) { background-color: #f9a74b; animation-delay: .2s } .loader--dot:nth-child(5) { background-color: #60beeb; animation-delay: .1s } .loader--dot:nth-child(6) { background-color: #fbef5a; animation-delay: 0s } .loader--text { position: absolute; top: 200%; left: 0; right: 0; width: 4rem; margin: auto } .loader--text:after { content: "Loading"; font-weight: 700; animation-name: loading-text; animation-duration: 3s; animation-iteration-count: infinite } @keyframes loader { 15% { transform: translateX(0) } 45% { transform: translateX(230px) } 65% { transform: translateX(230px) } 95% { transform: translateX(0) } } @keyframes loading-text { 0% { content: "Loading" } 25% { content: "Loading." } 50% { content: "Loading.." } 75% { content: "Loading..." } } .italic { font-style: italic }