/* --- Login page --- */ html { width: 100%; height: 100%; } .register-inner { display: flex; align-items: center; background: -webkit-linear-gradient(left, #3931af, #00c6ff); .register{ background: -webkit-linear-gradient(left, #3931af, #00c6ff); //margin-top: 3%; padding: 3%; } .register-left{ text-align: center; color: #fff; // margin-top: 4%; } .register-left input{ border: none; border-radius: 1.5rem; padding: 2%; width: 60%; background: #f8f9fa; font-weight: bold; color: #383d41; //margin-top: 30%; margin-bottom: 3%; cursor: pointer; } .register-right{ background: #f8f9fa; border-top-left-radius: 10% 50%; border-bottom-left-radius: 10% 50%; min-height: 28vw; } .register-left img{ margin-top: 15%; margin-bottom: 5%; width: 25%; -webkit-animation: mover 2s infinite alternate; animation: mover 1s infinite alternate; } @-webkit-keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } @keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } .register-left p{ font-weight: lighter; padding: 10%; padding-bottom: 15px; margin-top: -9%; } .register .register-form{ padding: 10%; margin-top: 10%; padding-top: 4%; padding-bottom: 4%; } .btnRegister{ float: left; margin-top: 0; border: none; border-radius: 1.5rem; /* padding: 2%; */ background: #0062cc; color: #fff; font-weight: 600; width: 50%; cursor: pointer; } .register .nav-tabs{ margin-top: 3%; border: none; background: #0062cc; border-radius: 1.5rem; float: right; width: 48%; } .register .nav-tabs .nav-link{ padding: 2%; height: 34px; width: 100%; font-weight: 600; color: #fff; border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; } .register .nav-tabs .nav-link:hover{ border: none; } .register .nav-tabs .nav-link.active{ // width: 60%; color: #0062cc; border: 2px solid #0062cc; border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; justify-content: center; align-items: center; display: flex; } .register-heading{ text-align: center; margin-top: 8%; margin-bottom: -15%; color: #495057; } .bg-img-login { height: 14vw; min-height: 220px; margin-top: -4vw; } .text-sm { font-size: 14px !important } ::placeholder { color: #BDBDBD; opacity: 1; font-weight: 300 } :-ms-input-placeholder { color: #BDBDBD; font-weight: 300 } ::-ms-input-placeholder { color: #BDBDBD; font-weight: 300 } input, textarea { padding: 10px 12px 10px 12px; border: 1px solid lightgrey; border-radius: 2px; margin-bottom: 5px; margin-top: 2px; width: 100%; height: 42px; box-sizing: border-box; color: #2C3E50; font-size: 15px; letter-spacing: 1px } input:focus, textarea:focus { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: 1px solid #304FFE; outline-width: 0 } button:focus { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; outline-width: 0 } a { color: inherit; cursor: pointer } .btn-blue { background-color: #1A237E; width: 150px; color: #fff; border-radius: 2px } .btn-blue:hover { background-color: #000; cursor: pointer } .bg-blue { color: #fff; background-color: #1A237E } @media screen and (max-width: 991px) { .logo { margin-left: 0px } .image { width: 300px; height: 220px } .border-line { border-right: none } .card2 { border-top: 1px solid #EEEEEE !important; margin: 0px 15px } .register-inner .register .nav-tabs { width: 95%; } } .result_login { margin-top: 100px; position: absolute; z-index: 5; right: 12px; top: -32px; width: 48%; border-radius: 2px; overflow: hidden; } } @media screen and (max-width: 991px) { .register-inner .register .nav-tabs { width: 95%; } }