.wupp-switch {
position: relative;
display: inline-block;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05) !important;
width: 100px;
background-color: #ffffff;
height: 45px;
border: 1px solid #f4f5f7;
outline: none !important;
border-radius: 10px;
margin-bottom: 0;
}
.wupp-switch input {
opacity: 0;
width: 0;
height: 0;
}
.wupp-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: .4s;
transition: .4s;
}
.wupp-slider:before {
position: absolute;
content: "";
height: 33px;
width: 33px;
left: 6px;
bottom: 6px;
border-radius: 8px;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .wupp-slider:before {
background-color: #4caf50;
left: 35px;
color: white;
text-align: center;
font-size: 1.6rem;
content: '\2713';
}
input:focus + .wupp-slider:before {
box-shadow: none;
}
input:checked + .wupp-slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.wupp-input-root {
position: relative;
min-height: 40px;
}
.wupp-input {
position: absolute;
height: 40px;
}
.wupp-input-placeholder {
color: #ccc;
position: absolute;
font-size: .9rem;
top: 0;
left: 0;
padding: 8px 15px;
-webkit-transition: .4s;
transition: .4s;
}
.wupp-input-ph-active {
top: -22px !important;
color: black !important;
-webkit-transition: .4s !important;
transition: .4s !important;
}
.wupp-input-placeholder span {
padding: 4px;
}
.wupp-textarea {
padding: 8px 15px;
}
.wupp-textarea-plho span {
padding: 4px;
}
.wupp-textarea-plho {
top: 0;
right: 0;
min-height: 50px !important;
z-index: 120;
font-size: .9rem;
padding: 8px 15px;
color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.wupp-input-ph-active span {
background-color: white;
padding: 4px;
}
.wupp-drag-pnl {
border: dashed 4px #03A9F4;
min-height: 250px;
border-radius: 10px;
}
.wupp-input-file {
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0;
}
.wupp-cursor-pointer {
cursor: pointer !important;
}
.wupp-select {
background-color: #ffffff !important;
cursor: pointer;
border: 1px solid #f2f2f2;
border-radius: 4px;
padding: 6px 15px;
color: #adadc1;
}
.wupp-popup {
right: 0;
top: 40px;
border: 1px solid #e9ebf2;
padding: 0;
z-index: 256000;
}
.wupp-select-item {
padding: 9px 15px !important;
}
.h-active {
color: #0D0D0D;
}
.it-active {
color: white;
background-color: #03A9F4;
}
.wupp-color-input-c{
border: none;
width: 150px;
text-align: center;
outline: none;
}
.cursor-move {
cursor: move !important;
}
.move-i-class{
height: 75%;
width: 15px !important;
text-align: center;
}
h4 {
font-size: 1rem  !important;
}:root{
--gray : #cccccc !important;
--black : #333333 !important;
--darkBlue : #162447 !important;
--skyBlue : #00a1ab !important;
--liteBlack : #323232 !important;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body ,html{
width: 100%;
height: 100%;
}
input::placeholder{
-webkit-user-select: none;
}
#grettings{
z-index: 15;
}
#grettingsContainer{
background: var(--white);
}
#forms{
background: var(--white);
box-shadow: 1px 1px 40px var(--gray) , -1px -1px 40px var(--gray);
}
#container::before{
content: "";
position: absolute;
width: 80%; left: 10%;
height: 100%;
background: var(--white);
box-shadow: 1px 1px 40px var(--gray) , -1px -1px 40px var(--gray);
z-index: -1;
transform: rotate(-4deg);
}
h3 , h4{
top: -10%;
left: 35%;
z-index: 9999999;
font-size: initial !important;
}
#memberLogin{
top :-30% !important;
left: 22% !important;
}
#description{
font-size: 15px !important;
}
.fa{
font-size: 18px !important;
}
#formContainer{
z-index: 20;
box-shadow: 1px 1px 20px var(--gray) , -1px -1px 20px var(--gray);
background: var(--white);
} input[type=text] , input[type=password] , input[type=email] , input[type=tel]{
background: none !important;
outline: none !important;
border: none;
}
.lInputContainer{
position: relative;
border-bottom: 1px solid var(--gray) !important;
}
.lInputContainer::before{
content: "";
position: absolute;
width: 0;
height: 3px;
bottom: -2px;
left: 0;
transition: width 400ms cubic-bezier(.67,0,.4,.98);
}
.remMe{
font-size: 14px;
}
.fillBefore::before{
background: var(--primary) !important;
width: 100% !important;
}
.fillBeforeDanger::before{
background: var(--danger) !important;
width: 100% !important;
}
.fillBeforeSuccess::before{
background: var(--success) !important;
width: 100% !important;
}
.confirmCodeBorderLess{
border: none !important;
}
.txtBtn{
background: none !important;
border: none !important;
outline: none !important;
}
.txtBtn:hover{
filter: contrast(10);
}
.accountManage{
font-size: 0.9em;
}
.labels{
left: 0;
bottom: 1%;
}
.passwordLabel{
right: 0;
bottom: 1%;
}
.passwordLabel>svg{
cursor: pointer;
}
.svgs{
overflow: visible !important;
fill: none !important;
transition: all 900ms cubic-bezier(.71,-0.36,.56,1.41);
}
.eyeLine{
transform: scale(0);
transition: transform 300ms linear;
}
#wupp_sign_in_remember_me{
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 40px;
height: 18px;
border: 1px solid var(--primary);
border-radius: 20px;
cursor: pointer;
}
#wupp_sign_in_remember_me::before{
content: "";
position: absolute;
width: 15px;
height: 90%;
left: 3px;
top: 5%;
background: var(--gray);
border-radius: 50%;
transition: left 200ms linear;
}
#wupp_sign_in_remember_me:checked::before{
left: 52%;
background: var(--success) !important;
}
.userX{
transform: scale(0);
transition: transform 300ms linear;
}
.iconFocusPrimary{
stroke: var(--primary) !important;
}
.google-login-btn {
color: #fff !important;
background-color: #D44638;
} .moveToDown{
animation: moveDown 400ms ;
animation-timing-function:cubic-bezier(.67,0,.4,.98);
}
@keyframes moveDown{
from{
opacity: 1;
transform: translateY(0);
}to{
opacity: 0;
transform: translateY(120%);
}
}
.moveFromUp{
transform: translateY(-150%);
animation: moveUp 400ms ;
animation-timing-function: cubic-bezier(.67,0,.4,.98);
}
@keyframes moveUp{
from{
opacity: 0;
transform: translateY(-150%);
}to{
opacity: 1;
transform: translateY(0);
}
} textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
outline:0px !important;
-webkit-appearance:none;
box-shadow: none !important;
}
#wupp_pnl_sign_up{
background: var(--white) !important;
}
#wupp_pnl_sign_upContainer{
box-shadow: 1px 1px 20px var(--gray) , -1px -1px 20px var(--gray);
z-index: 20;
background: var(--white) !important;
}
#wupp_pnl_sign_up .reg-fileds-mainrow{
text-align: left;
}
#wupp_pnl_sign_up .reg-fileds-mainrow .form-group{
margin: 1rem auto 1rem auto;
}
#wupp_pnl_sign_up .reg-fileds-mainrow .form-group input{
border: 1px solid #b0b0b0;
}
#wupp_pnl_sign_up .reg-fileds-mainrow .fillBefore input {
border: 2px solid #1a60ec !important;
}
#wupp_pnl_sign_up .reg-fileds-mainrow .fillBeforeDanger input {
border: 2px solid #ff0101 !important;
}
.sInputContainer{
position: relative;
border-bottom: 1px solid var(--gray) ;
}
.sInputContainer::before {
content: "";
position: absolute;
width: 0;
height: 3px;
bottom: -2px;
left: 0;
transition: width 400ms cubic-bezier(.67,0,.4,.98);
}
.signupuserX{
transform: scale(0);
transition: transform 300ms linear;
}
#wupp_pnl_sign_upState{
transform: scaleY(0);
transition: transform 300ms linear;
} #wupp_authContainer{
box-shadow: 1px 1px 20px var(--gray) , -1px -1px 20px var(--gray);
background: var(--white);
z-index:20;
}
.confirmCodeAround input{
width: 10% !important;
border-bottom: 2px solid var(--success) !important;
margin: 0 10px 0 10px;
} #recoveryFormContainer{
z-index: 20;
box-shadow: 1px 1px 20px var(--gray) , -1px -1px 20px var(--gray);
background: var(--white);
z-index: 20;
}
.cInputContainer{
position: relative;
border-bottom: 1px solid var(--gray) !important;
}
.cInputContainer::before{
content: "";
position: absolute;
width: 0;
height: 3px;
bottom: -2px;
left: 0;
transition: width 400ms cubic-bezier(.67,0,.4,.98);
}
#new_password, #repeat_new_password {
border: 1px solid #b0b0b0;
}
#wupp_auth_forget .d-none {
display: none !important;
} #leftLgCircle{
stroke: var(--success);
stroke-width: 70;
left: 0;
top: 0;
z-index: 10;
}
#RightLgCircle{
stroke: var(--primary);
stroke-width: 90;
right: 0;
top: 0;
z-index: 10;
}
#leftMdCircle{
stroke: var(--success);
stroke-width: 60;
left: 0;
top: 0;
z-index: 10;
}
#RightMdCircle{
stroke: var(--primary);
stroke-width: 90;
right: 0;
top: 0;
transform: rotate(120deg);
z-index: 10;
}
.circleToBottom{
top: 80% !important;
}
.circleToTop{
top: -90% !important;
}
.confirmCircleToTop{
top: 0% !important;
}
.confirmCircleToBottom{
top: -10% !important;
}
.circleMdToBottom{
top: 52% !important;
}
.circleMdToTop{
top: -100% !important;
}
.confirmCircleMdToTop{
top: -70% !important;
}
.confirmCircleMdToBottom{
top: -30% !important;
}
.recoveryCircleMdToBottom{
top: 30% !important;
}
.recoveryCircleMdToTop{
top: -130% !important;
}
.circleClockDown{
top: -10% !important;
}
.circleClockUp{
top: -20% !important;
} #clockContainer{
transform: scaleY(0) ;
height: 0;
transition: transform 500ms linear;
}
.clockOn{
transform: scaleY(1) !important;
height: auto !important;
}
#clock{
width: 80px;
height: 80px;
border-radius: 100%;
box-shadow: 2px 2px 10px var(--gray);
line-height: 45px;
background: var(--white);
}
#second{
position: absolute;
width: 4px;
height: 128%;
top: 0%;
left: 47%;
transform: translateY(-15%);
border-radius: 20px;
z-index: -1;
animation: rotsec 1s infinite;
animation-timing-function: cubic-bezier(.71,-0.36,.56,1.41);
}
@keyframes rotsec{
from{
transform: rotate(0);
background: var(--primary);
box-shadow: 1px 1px 5px var(--primary);
}
to{
transform: rotate(360deg);
background: var(--gray);
box-shadow: 1px 1px 5px var(--gray);
}
}
#secondCounter{
font-size : 20px;
font-style: oblique;
text-shadow: 0 40px 5px var(--primary);
border-bottom: 2px solid var(--gray);
} #options{
left: 0;
top: 0;
z-index: 9999999;
}
#returnHome{
background: var(--white);
border-radius: 20px;
}
#returnHome>a{
text-decoration: none !important;
}
#returnHome:hover #arrowHome{
transform: translateX(-10px);
transition: transform 200ms linear;
}
#darkModeContainer{
background: var(--white);
border-radius: 20px;
box-shadow:  0 0 15px var(--gray) , 0 0 15px var(--liteBlack);
}
#night{
user-select: none;
right: -10px;
}
.moonOff{
animation-play-state: paused !important;
}
#night>svg{
fill: var(--darkBlue);
stroke: var(--skyBlue);
animation: moon 4s infinite;
}
@keyframes moon{
from{
transform: rotateY(0);
}
to{
transform: rotateY(360deg);
}
}
#darkMode{
position: relative;
background: none !important;
outline: none !important;
-webkit-appearance: none;
-moz-appearance: none;
width: 50px;
top:3px;
height: 20px;
border-radius: 20px;
border: 1px solid var(--yellow);
box-shadow: inset 1px 1px 3px var(--gray) ,inset -1px -1px 3px var(--gray);
transition: all 300ms cubic-bezier(.51,.5,.37,1.27);
}
#darkMode::before{
position: absolute;
content: "";
height: 100%;
left: 0;
top: -1%;
width: 27px;
background: var(--yellow);
border-radius: 20px;
border: 1px solid var(--white);
transition: left 300ms cubic-bezier(.51,.5,.37,1.27) ;
cursor: pointer;
}
#darkMode::after{
position: absolute;
content: "";
height: 5px ;
width: 5px;
top: 37%;
left: 40%;
background: var(--primary);
border-radius: 50%;
box-shadow:  0 0 10px var(--primary);
transition: left 300ms cubic-bezier(.51,.5,.37,1.27);
}
#darkMode:checked::before{
left: 20px;
background: var(--darkBlue) !important;
border: 1px solid var(--skyBlue) !important;
}
#darkMode:checked::after{
left: 40px;
background: var(--skyBlue);
box-shadow: 0 0 10px var(--skyBlue) , 0 0 10px var(--skyBlue);
}
#darkMode:checked{
background:var(--skyBlue) !important;
box-shadow: inset 0 0 3px 1px var(--liteBlack) ;
border: 1px solid var(--skyBlue);
}
#day{
user-select: none;
left: 22px;
top: -1px;
}
#day>svg{
fill: var(--yellow) !important;
stroke: var(--yellow) !important;
animation: sun 4s infinite;
}
.sunoff{
animation-play-state: paused !important;
}
.confirmCodeContainer {
direction: ltr !important;
}
.border-danger {
border-color: #dc3545!important;
}
@keyframes sun {
from{
transform: rotate(360deg);
}
to{
transform: rotate(0deg);
}
}
@media only screen and (max-width : 570px){
#container::before{
display: none;
height: 105% !important;
width: 95% !important;
left: 2.5% !important;
}
}
@media only screen and (max-width : 768px){
#description{
font-size: 14px;
}
#darkModeContainer{
height: 25px !important;
}
#returnHome>a{
text-align: center;
font-size: 14px;
}
h3{
font-size: 17px !important;
}
.remMe{
font-size: 13px !important;
}
.accountManage{
font-size: 0.9em !important;
padding: 0 10px;
}
#wupp_pnl_sign_in , #formContainer
, #recoveryForm , #recoveryFormContainer
,#wupp_pnl_sign_up , #wupp_pnl_sign_upContainer
,#wupp_auth , #wupp_authContainer
{
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
input[type=submit], button[type=button] {
width: 100% !important;
}
.login-with-otp{
margin-top: 5px;
}
}
@media only screen and (min-width : 768px){
#wupp_pnl_sign_in , #formContainer
, #recoveryForm , #recoveryFormContainer
,#wupp_pnl_sign_up , #wupp_pnl_sign_upContainer
,#wupp_auth , #wupp_authContainer
{
margin-left: auto !important;
margin-right: auto !important;
padding-left: auto !important;
padding-right: auto !important;
}
#wupp_pnl_sign_in, #wupp_pnl_forgot, #wupp_pnl_sign_up {
overflow-y: unset !important;
}
}body { }
.remember_me {
margin-right: unset !important;
margin-left: auto;
}
#wupp_sign_in_remember_me {
margin-left: 5px;
}
#options {
right: 0;
left: unset;
}
#RightLgCircle {
right: unset;
left: 0;
}
#RightLgCircle circle {
cx:-50;
}
#leftLgCircle {
left: unset;
right: 0;
}
#leftLgCircle circle {
cx:230;
}
.labels {
right: 0;
left: unset;
border-left: 1px solid #dee2e6!important;
border-right: unset !important;
}
.passwordLabel {
left: 0;
right: unset;
}
#wupp_pnl_sign_up .reg-fileds-mainrow {
text-align: right;
}
.accountManage {
text-align: right !important;
}