body {background-image: url(../../assets/login/Login-bg.webp) !important;}

/*Language Translate*/
.MyGoogleTranslate {text-align: right; margin: 10px; position: absolute; right: 0px; z-index: 9;}
.MyGoogleTranslate .dropdown {display: inline-block;}
.MyGoogleTranslate .nav-link {background: #6982ba; color: #fff; border-radius: 35px; padding: 5px 10px;}
.MyGT {text-align: right; position: fixed; right: 26%; left: 0px; z-index: 9999; top: 17px;}
@media only screen and (max-width: 600px) {
    .MyGT {text-align: left; position: fixed; right: 0px; left: 35%; z-index: 9999; top: 17px;}
}

.mymoonlogin .card {margin: 25% 8% 0% 8%; border-radius: 20px; background-color: #1e6a70;
background-image: url(../../assets/login/loginBoxBg1.png); background-size: 25rem 25rem; position:relative; box-shadow: #00000030 0px 10px 20px, #0000003b 0px 6px 6px;}
.mymoonlogin .card, .mymoonlogin .card:before { width: stretch; height: stretch;}
.mymoonlogin .card:before {position: absolute; 	content: " "; z-index: 1;
background-image:url(../../assets/login/loginBoxBg2.svg); background-size: 75rem 50rem;}
.mymoonlogin .card-body {border-radius: 20px; outline: 2px #ffffffa6 solid;outline-offset: -10px; position: relative; z-index: 2; background:#35436ddb;}
.mymoonlogin .card .card-body .loginHead {position: absolute; left: 0px; top: -150px;}
.mymoonlogin .card .card-body .loginHead img {width: 140px;}
.mymoonlogin .card .card-body .loginHead img:last-child{position: absolute; left: 0;}
.mymoonlogin .card .card-body .loginHeadLogo {text-align:center; margin-bottom: 25px;}
.mymoonlogin .card .card-body .loginHeadLogo img{width: 180px;}
.mymoonlogin .card .card-body .loginHead1 {position: relative;}
.mymoonlogin .card .card-body .loginHead1 img{width: 80px; position: absolute; top: -60px; left: -60px;}
.mymoonlogin .card .card-body .loginHead1 img:last-child{left: auto; right: -60px; top: -100px;}
.mymoonlogin .card .card-body .formBox{margin-bottom: 20px; position:relative;}
.mymoonlogin .card .card-body .formBox label.error {position: absolute; bottom: -17px; font-size: 12px;
font-weight: 800; left: 20px;}
.mymoonlogin .card .card-body .formBox .form-control{border-radius: 50px 0px 0px 50px; border: 1px #6982ba solid;}
.mymoonlogin .card .card-body .formBox .input-group-text{border-radius: 0px 50px 50px 0px; background: #6282b9; color: #fff; border: 1px #6982ba solid;}
.mymoonlogin .card .card-body .formBox1 {padding: 5px 0px; color: #fff; font-size: 13px; margin-bottom: 15px;}
.mymoonlogin .card .card-body .formBox1 a{color:#fff;}
.mymoonlogin .card .card-body .footerbtn {margin: 25px 0px; text-align:center;}
.mymoonlogin .card .card-body .footerbtn .btn-info {min-width: 80%; font-size: 16px; font-weight: 900;
text-transform: uppercase; line-height: 22px; padding: 10px 10px; color: #021643; box-shadow: 0px 3px 5px #00000045, inset 1px 4px 5px #ffffffb3, inset -1px -4px 5px #00000014; outline: 3px #06060633 solid ; outline-offset: -8px; border: 3px solid #60520b; background: radial-gradient(at center, #e9dda1, #7f5e1c); border-radius: 20px; transition: 1.5s;}
.mymoonlogin .card .card-body .footerbtn .btn-info:hover {transform: scale(1.04); transition: .5s;}
.mymoonlogin .card .card-body .LoginFoot img {position: absolute; bottom: -5%; right: -22%; width: 35%;}
.moonpreneur-login .form-check-input:checked {background-color: #1fa4ff; border-color: #1fa4ff;}
/*SelectYourAccount*/
.moonpreneur-login .SelectYourAccount {background-color: #ffffff70; display: block;  margin: 8px 0;
    position: relative; border-radius: 5px;}
.moonpreneur-login .SelectYourAccount label {font-size: 14px; padding: 5px 8px; width: 100%; display: block; text-align: left;
  color: #474d56; cursor: pointer; position: relative; z-index: 2; transition: color 200ms ease-in;
  overflow: hidden; border-radius: 5px
}
.moonpreneur-login .SelectYourAccount label:before {width: 10px; height: 10px; border-radius: 50%; content: "";
  background-color: #8f76d4; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale3d(1, 1, 1); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0; z-index: -1;
}
.moonpreneur-login .SelectYourAccount label:after {
  width: 25px; height: 25px; content: "";  border: 2px solid #ededed;  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;  background-position: 0px 1px; background-size: 30px;  border-radius: 50%;  z-index: 2;
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer;  transition: all 200ms ease-in;
}
.moonpreneur-login .SelectYourAccount input:checked ~ label {color: #fff;}
.moonpreneur-login .SelectYourAccount input:checked ~ label:before {
  transform: translate(-50%, -50%) scale3d(56, 56, 1); opacity: 1;
}
.moonpreneur-login .SelectYourAccount input:checked ~ label:after {background-color: #8f76d4; border-color: #fff;}
.moonpreneur-login .SelectYourAccount input {width: 25px; height: 25px; order: 1;  z-index: 2;
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer; visibility: hidden;
}

@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.Roboblink{
	text-decoration: RoboDogblink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1.2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

/* Robot Flying */
.MoondroneBox{position: absolute; margin: 20px; width:100%; height:300px; overflow:hidden;}
.MoondroneBox .MoondroneBody{width:160px; position:absolute; right:15%; top:30%;
    transform:translate(-50%,-50%); animation: droneFloat 6s ease-in-out infinite;}

.MoondroneBox .MoondroneBody img:nth-child(1){width:100%;}
.MoondroneBox .MoondroneBody img:nth-child(2), .MoondroneBox .MoondroneBody img:nth-child(3){
width:60px; position:absolute; animation: rotation .2s linear infinite;}
.MoondroneBox .MoondroneBody img:nth-child(2){top:6px; left:-7px;}
.MoondroneBox .MoondroneBody img:nth-child(3){top:2px; right:-9px;}

@keyframes rotation{ 
100%{transform:rotateY(360deg);}
}
/* floating movement */
@keyframes droneFloat{
    0%{ transform: translate(-50%,-50%) translate(0px,0px); }
    25%{ transform: translate(-50%,-50%) translate(40px,-20px); }
    50%{ transform: translate(-50%,-50%) translate(-60px,60px); }
    75%{ transform: translate(-50%,-50%) translate(20px,-10px); }
    100%{ transform: translate(-50%,-50%) translate(0px,0px); }
}

.move {
    -webkit-animation-name: wobble;
    animation-name: wobble;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-transform-origin: 50% 100%;
}

@-webkit-keyframes wobble {
    0% {-webkit-transform: none; transform: none;}
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@media only screen and (max-width: 768px) {
    .MoondroneBox .MoondroneBody {width: 120px;}
    .MoondroneBox .MoondroneBody img:nth-child(2), .MoondroneBox .MoondroneBody img:nth-child(3) {
        width: 49px;}
    .mymoonlogin .card .card-body .loginHead {top: -110px;}
    .mymoonlogin .card .card-body .loginHead img {width: 110px;}
    .mymoonlogin .card .card-body .LoginFoot img {bottom: -4%; right: -9%; width: 22%;}
}


/*OTP Popup Verification*/
.OTP-Popup-Verification {max-width: 380px;}
.OTP-Popup-Verification .modal-content {border-radius: 15px; text-align: center; background: #38496e;
color: #fff;}
.OTP-Popup-Verification .modal-content .modal-body .close-jq-toast-single {background: #ff0000d4;
box-shadow: -2px 2px 4px #000; font-size: 16px; font-weight: 800;}
.OTP-Popup-Verification .modal-content .modal-body .close-jq-toast-single:hover {background: #ff0000;
box-shadow: 0px 0px;}
.OTP-Popup-Verification .modal-content .modal-body img {max-width: 100%; margin: 20px;}
.OTP-Popup-Verification .modal-content .modal-body p {font-size: 16px; margin: 10px 0px;}
.OTP-Popup-Verification .modal-content .modal-body h6 {color: #f5ce00; font-style: italic;}
.OTP-Popup-Verification .modal-content .modal-body .OTPBox {display: flex;}
.OTP-Popup-Verification .modal-content .modal-body .OTPBox input {margin: 10px 3px; text-align: center;
font-size: 22px; font-weight: 900; color: #1f9fff; padding: 3px; background-color: #fff;}
.OTP-Popup-Verification .modal-content .modal-body button {min-width: 80%; font-size: 15px; font-weight: 900;
text-transform: uppercase; padding-top: 12px; color: #021643; box-shadow: 0px 3px 5px #00000045, inset 1px 4px 5px #ffffffb3, inset -1px -4px 5px #00000014;
outline: 3px #06060633 solid; outline-offset: -8px; border: 3px solid #60520b; background: radial-gradient(at center, #e9dda1, #7f5e1c);
border-radius: 20px; transition: 1.5s; margin: 5px 0px;}
.OTP-Popup-Verification .modal-content .modal-body button:hover {transform: scale(1.04);
    transition: .5s;}