.kotak { color: #000; cursor: pointer } .fade_in { opacity: .9 } .fade_in:hover { opacity: 1; background: #e1e1e1 } .blink { animation: blinker 2s linear infinite; color: #000 } @keyframes blinker { 50% { opacity: 0 } } .form-control[readonly] { cursor: not-allowed } textarea.form-control { height: 110px } .password .glyphicon, #password2 .glyphicon { display: none; right: 15px; position: absolute; top: 12px; cursor: pointer } .password { position: relative } .password input[type='password'] { padding-right: 30px } #img { height: 120px; width: 180px } #bottom { margin-bottom: -85px } .loader { position: absolute; top: calc(50% - 100px); left: calc(50% - 43px); width: 100px; height: 100px; border-radius: 80%; perspective: 800px } #back-loader { display: -ms-flexbox; display: flex; background-color: #fff; height: 100%; width: 100%; position: fixed; left: 0; top: 0; z-index: 9999 } .bch { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50% } .bch.one { left: 0; top: 0; animation: rotate-one 1s linear infinite; border-bottom: 5px solid red } .bch.two { animation: rotate-two 1s linear infinite; border-right: 5px solid red } .bch.three { animation: rotate-three 1s linear infinite; border-top: 5px solid red } @-webkit-keyframes load7 { 0%, 80%, 100% { box-shadow: 0 1.5em 0 -1.3em red } 40% { box-shadow: 0 1.5em 0 0 red } } @keyframes load7 { 0%, 80%, 100% { box-shadow: 0 1.5em 0 -1.3em red } 40% { box-shadow: 0 1.5em 0 0 red } } @keyframes rotate-one { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg) } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg) } } @keyframes rotate-two { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg) } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg) } } @keyframes rotate-three { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg) } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg) } } .password-toggle-icon { position: absolute; top: 80%; right: 10px; transform: translateY(-50%); cursor: pointer } .password-toggle-icon i { font-size: 18px; line-height: 1; color: #646464; transition: color .3s ease-in-out; margin-bottom: 20px } .password-toggle-icon i:hover { color: #000 } @media (max-width: 767.98px) { #img { margin-left: 150px } #bottom { margin-bottom: -35px } }