| Current File : /home/drugfree/public_html/super/style.css |
@import url('css2-1');
body {
margin: 0;
padding: 0;
font-family: 'Mulish', sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #0147CD;
cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
select {
appearance: none;
}
.pwd {
position: relative;
}
.pwd i {
position: absolute;
top: 44%;
right: 0;
background: transparent;
color: black;
width: 10%;
text-align: left;
box-shadow: none;
cursor: pointer;
}
.popUp, .popUp2 {
position: fixed;
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
top: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
z-index: 9999999999999;
}
.popContainer {
background: white;
width: 80%;
max-width: 500px;
margin: 0 auto;
padding: 2em;
border-radius: 20px;
text-align: center;
}
.headd {
font-weight: 500;
font-size: 16px;
line-height: 136%;
margin-bottom: 18px;
color: #0147CD;
}
.bod {
font-weight: 400;
font-size: 14px;
line-height: 140%;
color: #FF3636;
margin-bottom: 30px;
}
.toop {
background: #F2F4FF;
border-radius: 15px 15px 0px 0px;
padding: 1em;
margin-bottom: 1em;
}
.bod2 {
font-weight: 500;
font-size: 20px;
line-height: 136%;
text-align: center;
color: #000000;
}
.bod3 {
font-weight: 600;
font-size: 14px;
line-height: 136%;
text-align: center;
color: #666666;
margin-bottom: 1em;
}
.selectType {
position: relative;
}
.selectType i {
position: absolute;
right: 5%;
top: 45%;
}
.container {
margin: 0 auto;
width: 90%;
max-width: 900px;
transition: .5s all;
}
.top-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2em;
}
.top-nav span {
color: #0147CD;
}
@media only screen and (min-width: 280px) {
.top-nav p {
font-weight: 400;
font-size: 10px;
line-height: 136%;
color: #666666;
}
.progress {
position: relative;
background: #D9D9D9;
width: 200px;
height: 4px;
margin-top: 34px;
margin-bottom: 20px;
}
.bar {
position: absolute;
background: #0147CD;
border-radius: 10px;
height: 4px;
width: 33.3%;
transition: .5s width;
}
.full-form {
position: relative;
width: 100%;
/* height: 680px; */
height: 80vh;
margin: 0 auto;
right: 0;
overflow-x: hidden;
}
.heading {
position: absolute;
}
.setup {
display: none;
}
.first {
position: absolute;
transition: .5s all;
width: 100%;
margin: 0 auto;
top: 10%;
}
.second, .third {
position: absolute;
width: 100%;
right: -200%;
transition: .5s all;
margin: 0 auto;
}
.second {
top: 10%;
}
.third {
top: 20%;
}
.heading p:first-child, .heading2 p:first-child, .auth {
font-weight: 700;
font-size: 18px;
line-height: 20px;
color: #1C2534;
/* margin-bottom: 8px; */
}
.heading p:last-child, .heading2 p:last-child, .provide {
font-weight: 700;
font-size: 12px;
line-height: 15px;
color: #909090;
margin-bottom: 25px;
}
.auth, .proOtp {
display: none;
}
form p {
font-weight: 700;
font-size: 11px;
line-height: 14px;
color: #7888A4;
margin-bottom: 8px;
}
.wait {
position: absolute;
right: 0;
top: 10px;
font-weight: 700;
font-size: 9px;
line-height: 11px;
text-align: right;
color: #909090;
}
.wait1 {
display: none;
}
input, select {
background: #FFFFFF;
border: 1px solid #868DA2;
border-radius: 10px;
width: 100%;
height: 40px;
padding: 5px 23px;
margin-bottom: 14px;
color: #1C2534;
font-family: inherit;
}
#button {
width: 100%;
background: #5C361A;
box-shadow: -3px 4px 14px rgba(0, 0, 0, 0.08);
border-radius: 10px;
color: white;
border: none;
cursor: pointer;
padding: 14px 0px;
font-size: 14px;
font-family: inherit;
font-weight: bold;
}
.btns button:first-child, .btns3 button:first-child{
margin-top: 10px;
margin-bottom: 1em;
}
.btns2 button:first-child {
margin: 1em 0em;
}
.btns button:last-child, .btns2 button:last-child, .btns3 button:last-child {
background: transparent;
color: #0147CD;
box-shadow: none;
}
.lar {
display: none;
}
.cancel {
display: none;
}
.first button {
margin-bottom: 1em;
}
.loginContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
max-width: 500px;
}
.loginImg {
display: none;
}
.login-part {
width: 100%;
height: 100%;
box-shadow: 0px 4px 10px 10px rgba(1, 71, 205, 0.1);
border-radius: 20px;
padding: 2em;
margin: 0 auto;
}
.showLarge {
display: none;
height: auto;
}
}
@media only screen and (min-width: 600px) {
.mainImg {
margin-left: 11%;
}
.top-nav p {
font-weight: 400;
font-size: 16px;
line-height: 136%;
color: #666666;
}
.top-nav img {
width: 80%;
height: auto;
}
.large {
display: flex;
justify-content: space-between;
align-items: center;
height: 87vh;
}
.full-form {
height: 85.5%;
/* height: 490px; */
overflow-y: scroll;
}
.full-form::-webkit-scrollbar {
display: none;
}
.first {
position: absolute;
transition: .5s all;
width: 88%;
margin: 0 auto;
top: 25%;
left: 0;
right: 0;
}
.second, .third {
position: absolute;
width: 88%;
right: -200%;
transition: .5s all;
margin: 0 auto;
top: 25%;
left: 0;
}
.third {
top: 35%;
max-width: 600px;
}
.progress-bar1 {
width: 10%;
}
.progress-bar {
display: none;
}
.progress1 {
position: relative;
background: #D9D9D9;
border-radius: 10px;
width: 4px;
height: 200px;
}
.bar1 {
position: absolute;
background: #0147CD;
border-radius: 10px;
width: 4px;
height: 33.3%;
transition: .5s height ease-in-out;
}
.full-form {
width: 90%;
max-width: 800px;
box-shadow: 0px 4px 10px 10px rgba(1, 71, 205, 0.1);
border-radius: 20px;
padding: 1.5em 3em;
}
.form1, .form2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 53px;
row-gap: 5px;
}
input, select {
height: 45px;
}
.cancel {
display: block;
background: transparent;
color: #0147CD;
box-shadow: none;
}
.heading p:first-child, .heading2 p:first-child, .auth {
line-height: 46px;
font-size: 28px;
}
.heading p:last-child, .heading2 p:last-child, .provide {
font-size: 16px;
line-height: 31px;
}
form p {
font-size: 14px;
}
button {
font-size: 15px;
}
.lar {
display: block;
}
.btns {
display: none;
}
.loginContainer {
width: 90%;
}
}
@media only screen and (min-width: 900px) {
.loginContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
max-width: 900px;
}
.mainFlex {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
gap: 45px;
flex: 1;
}
.login-part {
width: 62%;
height: 100%;
padding: 2em;
}
.loginImg {
display: block;
width: 65%;
}
.loginImg img {
width: 100%;
object-fit: cover;
height: auto;
}
.hidLarge {
display: none;
}
.showLarge {
display: block;
background: rgba(1, 71, 205, 0.05);
border-radius: 20px;
width: 100%;
text-align: center;
padding: 1em;
margin-top: 10px;
font-size: 16px;
}
}
.terms {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.terms input[type="checkbox"] {
width: 20px;
height: 20px;
margin-right: 10px;
vertical-align: middle;
margin-top: 13px;
}
@media (max-width: 480px) {
.terms {
flex-wrap: wrap;
align-items: flex-start;
}
.terms input[type="checkbox"] {
margin-right: 5px;
margin-bottom: -20px;
}
}