@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('inter-v20-latin-300.woff2') format('woff2');
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('inter-v20-latin-400.woff2') format('woff2');
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
}		

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('inter-v20-latin-500.woff2') format('woff2');
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('inter-v20-latin-600.woff2') format('woff2');
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('inter-v20-latin-700.woff2') format('woff2');
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('inter-v20-latin-800.woff2') format('woff2');
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('inter-v20-latin-900.woff2') format('woff2');
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;
}

@font-face {
    font-family: Arial, Helvetica, sans-serif;
    src: url('arial.woff2') format('woff2'),
        url('arial.woff') format('woff'),
        url('arial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Medium.woff2') format('woff2'),
        url('Roboto-Medium.woff') format('woff'),
        url('Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Regular.woff2') format('woff2'),
        url('fonts/Quicksand-Regular.woff') format('woff'),
        url('fonts/Quicksand-Regular.ttf') format('truetype');
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
	font-family:'Inter',sans-serif;      
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Pulsing Image Styling */
#loader-image {
    width: 80px; /* Adjust size as needed */
    height: auto;
    animation: pulse 1.5s infinite ease-in-out;
	margin:auto;
}

@media screen and (max-width: 640px) {
	#loader-image {
	width:50px;						
	}
}

/* Keyframe Pulse Animation */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.6;
    }
}

.trx-sukcess {
    position: absolute;
    z-index: 1;
    background: #e6ffd2;
    color: #7cc046;
    padding: 10px;
    border: 1px solid #7cc046;
    left: 50%;
    top: 15px;
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 17px;
    -webkit-transform: translateY(-50%, 0%);
    -ms-transform: translateY(-50%, 0%);
    transform: translate(-50%, 0%);
    border-radius: 40px;
}

.trx-fail {
    position: absolute;
    z-index: 1;
    background: #fee9ec;
    color: rgb(231, 0, 27);
    padding: 10px;
    border: 1px solid rgb(231, 0, 27);
    left: 50%;
    top: 15px;
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 17px;
    -webkit-transform: translateY(-50%, 0%);
    -ms-transform: translateY(-50%, 0%);
    transform: translate(-50%, 0%);
    border-radius: 40px;
}

::placeholder {
    color: #9f9f9f;
    font-size: 14px;
    opacity: 0.8;
}

:-ms-input-placeholder {
    color: #9f9f9f;
    opacity: 0.8;
}

::-ms-input-placeholder {
    color: #9f9f9f;
    opacity: 0.8;
}

@-moz-document url-prefix() {
    .optass {
        display: none;
    }
}

@supports (-webkit-appearance: none) {
   .optass {			
		 font-size:2px;	
		 display:none;	
	}
}

.optass {
   font-size:2px;
   background: transparent;
}

body {
    font-family:'Inter',sans-serif;
    margin: 0px;
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
    color: #202020;
    background: #f2f2f2;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.loda-logo {
	width:120px; 
	height:auto; 
	position:fixed; 
	bottom:70px; 
	left:50%;  
	transform:translateX(-50%);
}


.reg-pls-wait {
    width: 100%;
    max-width: 400px;
    height: 100%;
    position: fixed;
    z-index: 1;
    display: none;
    left: 50%;
    -webkit-transform: translateY(-50%, 0%);
    -ms-transform: translateY(-50%, 0%);
    transform: translate(-50%, 0%);
}

.reg-pls-sp {
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 20px;
    margin-top: -50px;
    color: orange;
}

.bkout-ic {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 10px;
    background: #fff;
    cursor: pointer;
    border-radius: 1px solid #e4e4e4;
}

.bkout-ic:hover {
    background: #fafafa;
}

.optass {
    font-size: 5px;
    background: transparent;
}

@-moz-document url-prefix() {
    .optass {
        display: none;
    }
}

@supports (-webkit-appearance: none) {
   .optass {			
		display:none;		
	}
}

.ptl-mail-bak {
    position: fixed;
    top: 0px;
    bottom: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    max-width: 640px;
    background: #f2f2f2;
    left: 50%;
    -webkit-transform: translateY(-50%, 0%);
    -ms-transform: translateY(-50%, 0%);
    transform: translate(-50%, 0%);
}

.ptl-mail-con {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.ptl-mail-fom {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 30px;
}

.comp-cls-ic {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    margin-top: 8px;
    cursor: pointer;
    background: #eee;
}

@media screen and (min-width: 641px) {
    .comp-cls-ic {
        margin-top: 2px;
    }
}

.comp-cls-ic:hover {
    background: #e7e7e7;
}

.comp-hed1 {
    display: block;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin-top: 40px;
    font-weight: bold;
    font-size: 15px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}

.comp-hed2 {
    display: block;
    color: #6c2bd9;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 17px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}

/*====================================================================================
    LOGIN OPTIONS
======================================================================================*/
.logopt-dv {width:100%; height:100%; background:rgba(0,0,0,0.5); position:fixed; z-index:4; top:0px; left:0px; right:0px; bottom:0px; display:flex; }
.logopt-sec {width:100%; max-width:400px; border-radius:15px; margin:auto; background:#fff; box-sizing:border-box; padding-left:15px; padding-right:15px; padding-bottom:15px;}
.logopt-1 {width:100%; height:80px; line-height:80px; font-size:20px; border-bottom:1px solid #ddd; text-align:center;}
.logopt-2, .logopt-3 {width:100%; margin-left:auto; margin-right:auto; max-width:350px; height:90px; display:flex; position:relative;}
.logopt-sp1 {
  width: 100%;
  max-width:350px;
  height: 50px;
  border: 1px solid #e7e7e7;
  background: #fff;
  border-radius: 14px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  transition: .25s;
  box-sizing: border-box;
  margin-top:15px;
  margin-left:auto;
  margin-right:auto;
}
.logopt-sp1:hover {background:#fafafa;}
.logopt-sp2 {width:100%; max-width:270px; background:rgb(0, 127, 210); color:#fff; border-radius:5px; margin:auto; padding:15px; text-align:center; cursor:pointer; font-size:16px; font-weight:bold; box-sizing:border-box;}
@media screen and (max-width: 420px) {
    .logopt-dv { 
        box-sizing:border-box;
		padding-left:10px;
		padding-right:10px;
    }
}

/*====================================================================================
    LOGIN LABELS
======================================================================================*/

.lediv {
    display: flex;
    width: 100%;
    font-size: 16px;
}

.lediv2 {
    font-size: 16px;
    margin-top: 10px;
}

.lespa {
    font-weight: bold;
    margin-top: auto;
    margin-bottom: auto;
}

.lgn1,
.lgn2 {
    padding:15px 10px !important;
	border-radius:14px !important;
}

/*====================================================================================
    ALTERNATIVE PLACEHOLDERS
======================================================================================*/
.ind-altple1,
.ind-altple2,
.lgn-altple1,
.lgn-altple2 {
    position: absolute;
    font-size: 12px;
    margin-top: 7px;
    margin-left: 11px;
    color: #9f9f9f;
    opacity: 0.8;
    transition: 0.2s ease all;
}

/*====================================================================================
    INDEX
======================================================================================*/
.ind-logo {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 40px;
    width: 120px;
    height: auto;
    display: block;
}

@media screen and (max-width: 400px) {
    .ind-logo {
        width: 120px;
        height: auto;
    }
}

.txtinputs {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    outline: none;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 15px;
}

.txtinputs-attch {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 7px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    outline: none;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 15px;
}

@media screen and (min-width: 310px) and (max-width: 360px) {

    .txtinputs,
    .txtinputs-attch {
        width: 100%;
    }
}

.txtinputs:focus,
.txtinputs-attch:focus {
    border: 1px solid #6c2bd9;
}

.fogpas {
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    display: block;
    width: 100%;
}

@media screen and (max-width: 799px) {
    .fogpas {
        padding-top: 25px;
    }
}

.fogpas-lnk,
.fogt-lnk {
    text-decoration: none;
    color:#6C2BD9;
}

.fogpas-lnk:hover,
.fogt-lnk:hover {
    cursor: pointer;
}

.phndv, .passdv {
  margin-top: 10px;
  position: relative;
}

.ind-getapp {
    background: #fff;
    width: 100%;
    max-width: 450px;
    padding-top: 20px;
    padding-bottom: 25px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-sizing: border-box;
}

@media screen and (max-width: 799px) {
    .ind-getapp {
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 500px) {
    .ind-getapp {
        margin-bottom: 0px;
    }
}

.ind-getappin {
    text-align: center;
    padding-top: 0px;
    padding-bottom: 15px;
}

.ind-appsdv {
    display: flex;
    width: 280px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 309px) {
    .ind-appsdv {
        display: block;
        width: 135px;
        height: auto;
    }
}

.ind-apstore {
    width: 135px;
    height: 40px;
}

.ind-gogstore {
    width: 135px;
    height: 40px;
    margin-left: 10px;
}

@media screen and (max-width: 309px) {
    .ind-gogstore {
        margin-top: 10px;
        margin-left: 0px;
    }
}
/*====================================================================================
    REGISTRATION
======================================================================================*/

.reg-main {
    width: 100%;
    height: 100%;
    max-width: 1100px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding-top: 15px;
}

@media screen and (max-width: 799px) {
    .reg-main {
        position: fixed;
        bottom: 0px;
        max-width: 100%;
        padding-top: 0px;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 100%;
        display: block;
        -webkit-transform: none;
        transform: none;
        overflow-y: auto;
    }
}

.rgHD {
    display: flex;
    width: 100%;
    height: 60px;
    position: relative;
}

.rgHD-sp {
    margin: auto;
    font-weight: bold;
    font-size: 17px;
}

.reg-inner {
    width: 100%;
    max-width: 450px;
    margin: auto;
}

@media screen and (max-width: 799px) {
    .reg-inner {
        padding: 15px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 500px) {
    .reg-inner {
        padding: 10px;
        box-sizing: border-box;
    }
}

.regform {
    background: #fff;
    width: 100%;
    min-height: 100px;
    box-sizing: border-box;
    padding-top: 25px;
    padding-bottom: 40px;
    border: 1px solid #ddd;
    border-radius: 12px;
}

@media screen and (min-width: 800px) {
    .regform {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (min-width: 340px) and (max-width: 799px) {
    .regform {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media screen and (max-width: 339px) {
    .regform {
        padding-left: 10px;
        padding-right: 10px;
        border: none;
    }
}

.reg-intro {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    margin-top: -32px;
    margin-bottom: 15px;
    color: #999999;
}

.lgn-intro {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    margin-top: -25px;
    margin-bottom: 30px;
    color: #999999;
}

.rgTxt {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    resize: none;
    font-size: 14px;
    line-height: 20px;
    height: 80px;
}

.dk-imgdv {
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.dk-img1,
.dk-img2 {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center center;
}

.dk-inpdv {
    display: flex;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    outline: none;
    border: 1px solid #ddd;
    overflow: hidden;
}

.dk-inp-rnd {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    box-sizing: border-box;
    padding: 7px;
    margin-left: 5px;
}

.dk-inp-sp {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
}

.dk-inp1,
.dk-inp2 {
    width: 100%;
    height: 40px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
}

.reginputs {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    outline: none;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 15px;
}

.reginputs:focus {
    border: 1px solid rgb(108, 43, 217);
}

@media screen and (min-width: 310px) and (max-width: 360px) {
    .reginputs {
        width: 100%;
    }
}

.reginputs:nth-child(2) {
    margin-top: 10px;
}

.dobdv {
    margin-top: 10px;
    position: relative;
}

.cardob-expla {
    position: absolute;
    height: 150px;
    width: 100%;
    z-index: -1;
    margin-top: -164px;
    margin-left: -10px;
    width: calc(100% + 20px);
    display: none;
}

.dob-expla {
    background: #fff;
    border-radius: 8px;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.3);
    line-height: 20px;
    bottom: 0px;
}

.msg-dt-tri {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 13px solid #c9c9c9;
    -ms-transform: rotate(270deg);
    /* IE 9 */
    transform: rotate(270deg);
    margin-left: 61px;
    margin-top: 5px;
    position: absolute;
}

.dt-tri-inner {
    position: relative;
    top: -11px;
    left: 2px;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-right: 12px solid #fff;
    color: #fff;
}

.dobleb {
    margin-bottom: 10px;
}

.regqz-icon {
    margin-left: 7px;
    cursor: pointer;
    font-size: 18px !important;
    position: absolute;
    left: 52px;
    margin-top: -2px;
    color: #999999;
}

.dobdv-inner {
    display: flex;
    width: 100%;
    position: relative;
}

.dob-a {
    width: 33.3%;
    box-sizing: border-box;
    padding-right: 5px;
    position: relative;
}

.dob-b {
    width: 33.3%;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
}

.dob-c {
    width: 33.3%;
    box-sizing: border-box;
    padding-left: 5px;
    position: relative;
}

.dayselect,
.monthselect,
.yearselect,
.catselect {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    background: #fafafa;
    outline: none;
    font-size: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dwn-ic1 {
    position: absolute;
    right: 5px;
    font-size: 15px;
    font-weight: bold;
    padding-right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}

.dwn-ic2 {
    position: absolute;
    right: 5px;
    font-size: 15px;
    font-weight: bold;
    padding-right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}

.dwn-ic3 {
    position: absolute;
    right: 0px;
    font-size: 15px;
    font-weight: bold;
    padding-right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}

.genderdv,
.namedv {
    margin-top: 10px;
    position: relative;
}

.genderdv-leb {
    margin-bottom: 10px;
}

.gender-inner,
.name-inner {
    display: flex;
    width: 100%;
}

.name-a {
    width: 50%;
    box-sizing: border-box;
    padding-right: 5px;
}

.name-b {
    width: 50%;
    box-sizing: border-box;
    padding-left: 5px;
}

.gen-a {
    width: 33.3%;
    box-sizing: border-box;
    padding-right: 5px;
}

.gen-b {
    width: 33.3%;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
}

.gen-c {
    width: 33.3%;
    box-sizing: border-box;
    padding-left: 5px;
}


.male-leb,
.female-leb,
.custom-leb {
    width: 100%;
    display: flex;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    height: 40px;
    box-sizing: border-box;
    background: #fafafa;
    outline: none;
    font-size: 15px;
    cursor: pointer;
    position: relative;
}

#m-rad,
#f-rad,
#c-rad {
    margin-top: auto;
    margin-bottom: auto;
}

.gensp {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    margin-left: 25px;
}

@media screen and (max-width: 470px) {
    .gensp {
        margin-left: 21px;
    }
}

.dv-snbatt {
    width: 100%;
    height: 58px;
	position:relative;
}

.out-TpSUC {
    display: block;
    color: #42b62a;
    font-weight: bold;
    font-size: 17px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    max-width: 400px;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: -20px;
    line-height: 24px;
}

.out-TpERR {
    display: block;
    color: #e52d44;
    font-weight: bold;
    font-size: 17px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    max-width: 400px;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: -20px;
    line-height: 24px;
}

.ind-signup-sbmt {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    background: linear-gradient(135deg,#6c2bd9,#8b5cf6);
    color: #fff;
    border: none;
    outline: none;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.fkEM {
    z-index: 1;
}

.regbtn-fk {
    text-align:center; 
	padding:10px; 
	box-sizing:border-box; 
	width:100%; 
    background:linear-gradient(135deg,#6c2bd9,#8b5cf6); 
	color:#fff; 
	border:none; 
	outline:none;
	border-radius:5px;
	font-size:15px; 
	cursor:pointer; 
	position:absolute; 
	bottom: 0px;
}

.regbtn-fk-nm {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    background: linear-gradient(135deg,#6c2bd9,#8b5cf6);
    color: #fff;
    border: none;
    outline: none;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
}

.ADDregbtn-fk {
    display: none !important;
}

.usFK {
   background: linear-gradient(135deg,#6c2bd9,#8b5cf6);
}

.ind-carInputs {
    max-width: 350px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.reg-carInputs {
    max-width: 360px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.usanembtn {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    background:rgba(108, 43, 217, 0.5);
    color: #fff;
    border: none;
    outline: none;
    border-radius: 5px;
    font-size: 15px;
    cursor:no-drop;
    position: absolute;
    bottom: 0px;
}

.sp-avail {
    position: absolute;
    color: #42b62a;
    right: 0;
    display: none;
}

.sp-taken {
    position: absolute;
    color: #e52d44;
    right: 0;
    display: none;
}

/*====================================================================================
    LOGIN
======================================================================================*/
.lgn-main {
    width: 100%;
    height: 100%;
    max-width: 1100px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: flex;
}

@media screen and (max-width: 799px) {
    .lgn-main {
        position: fixed;
        bottom: 0px;
        max-width: 100%;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 100%;
        display: block;
        -webkit-transform: none;
        transform: none;
        overflow-y: auto;
    }
}

.lgn-inner {
    width: 100%;
    max-width: 1100px;
    margin: auto;
}

@media screen and (min-width: 800px) {
    .lgn-inner {
        margin-top: auto;
        margin-bottom: auto;
    }
}

@media screen and (max-width: 799px) {
    .lgn-inner-ext {
        padding-left: 10px;
		padding-right: 10px;
        box-sizing: border-box;
    }
}

.lgnform {
    background: #fff;
    width: 100%;
    max-width: 450px;
    min-height: 100px;
    box-sizing: border-box;
    padding-top: 30px;
    padding-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 800px) {
    .lgnform {
        padding-left: 40px;
        padding-right: 40px;
        min-height: 370px;
    }
}

@media screen and (max-width: 799px) {
    .lgnform {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media screen and (max-width: 340px) {
    .lgnform {
        border: none;
    }
}

.lgn-sbmt {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    background: linear-gradient(135deg,#6c2bd9,#8b5cf6);
    cursor: pointer;
    color: #fff;
    border: none;
    outline: none;
    border-radius:14px;
    font-size: 15px;
    position: absolute;
    bottom: 0px;
}

.lgnbtn-fk {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    background: linear-gradient(135deg,#6c2bd9,#8b5cf6);
    cursor: pointer;
    color: #fff;
    border: none;
    outline: none;
    border-radius:14px;
    font-size: 15px;
    position: absolute;
    bottom: 0px;
}

.bitUS {
    display: none;
}

.ADDlogi {
    display: none !important;
}

.SUGLOG {
    display: block;
    background: purple;
    width: 150px !important;
    height: 18px;
    position: fixed !important;
    top: 0px;
    left: 50%;
    -webkit-transform: translateY(-50%, 0%);
    -ms-transform: translateY(-50%, 0%);
    transform: translate(-50%, 0%);
    opacity: 0;
}

/*====================================================================================
    PASSWORD RESET
======================================================================================*/
.pas-main {
    width: 100%;
    height: 100%;
    max-width: 1100px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: flex;
}

@media screen and (max-width: 799px) {
    .pas-main {
        position: fixed;
        bottom: 0px;
        max-width: 100%;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 100%;
        display: block;
        -webkit-transform: none;
        transform: none;
        overflow-y: auto;
    }
}

.pas-inner {
    width: 100%;
    max-width: 1100px;
    margin: auto;
}

@media screen and (min-width: 800px) {
    .pas-inner {
        margin-top: auto;
        margin-bottom: auto;
    }
}

@media screen and (max-width: 799px) {
    .pas-inner-ext {
        padding: 15px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 500px) {
    .pas-inner-ext {
        padding: 10px;
        box-sizing: border-box;
    }
}

.psrstform {
    background: #fff;
    width: 100%;
    max-width: 450px;
    min-height: 100px;
    box-sizing: border-box;
    padding-top: 30px;
    border: 1px solid #ddd;
    border-radius: 12px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 800px) {
    .psrstform {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (max-width: 799px) {
    .psrstform {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media screen and (max-width: 340px) {
    .psrstform {
        border: none;
    }
}

.lock-dv {
    font-size: 35px;
    width: 80px;
    height: 80px;
    border: 2px solid #202020;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.lock-ic {
    margin: auto;
}

.rstqz {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding-top: 15px;
    margin-bottom: 20px;
}

.rstqz1 {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding-top: 15px;
}

.rstqz2 {
    text-align: center;
    font-size: 15px;
    padding-top: 5px;
    padding-bottom: 20px;
    color: #999999;
    line-height: 20px;
}

.indfog-or {
    height: 30px;
    font-size: 14px;
    color: #ddd;
    text-align: center;
    display: flex;
    position: relative;
    margin-top: 20px;
}

.orline {
    width: 100%;
    background: #ddd;
    height: 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.fogor-sp {
    margin: auto;
    background: #fff;
    padding: 0px 15px;
    z-index: 1;
}

.fognew-ac {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    display: block;
    width: 100%;
    font-weight: bold;
}

.fognew-ac-lnk {
    text-decoration: none;
    color: #202020;
}

.fog-bck {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 40px;
    text-align: center;
    display: block;
    width: 100%;
    font-weight: bold;
    border-top: 1px solid #ddd;
}

@media screen and (min-width: 800px) {
    .fog-bck {
        width: calc(100% + 80px);
        margin-left: -40px;
    }
}

@media screen and (min-width: 340px) and (max-width: 799px) {
    .fog-bck {
        width: calc(100% + 30px);
        margin-left: -15px;
    }
}

.fog-bck-lnk {
    margin-top: 30px;
    text-decoration: none;
    color: #202020;
}

.pas-reset-sbmt {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    background: rgba(108, 43, 217, 0.5);
    color: #fff;
    border: none;
    outline: none;
    margin-top: 20px;
    border-radius: 5px;
    font-size: 15px;
}

.pas-reset-sbmt-fk {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    background:#6c2bd9;
    color: #fff;
    border: none;
    outline: none;
    margin-top: 20px;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    cursor: pointer;
}

.pas-reset-nonexist {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    background:#6C2BD9;
    color: #fff;
    border: none;
    outline: none;
    margin-top: 20px;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    cursor: pointer;
}

/*====================================================================================
    CONTACT US
======================================================================================*/
.con-main {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
}

.con-bck {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-align: center;
    display: block;
    width: 100%;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}

@media screen and (min-width: 800px) {
    .con-bck {
        width: calc(100% + 80px);
        margin-left: -40px;
    }
}

@media screen and (min-width: 340px) and (max-width: 799px) {
    .con-bck {
        width: calc(100% + 30px);
        margin-left: -15px;
    }
}

.con-bck-lnk {
    margin-bottom: 30px;
    text-decoration: none;
    color: #202020;
}

.con-bck-lnk:hover {
    color:#6c2bd9;
}

.conform {
    background: #fff;
    width: 100%;
    min-height: 100px;
    box-sizing: border-box;
    padding-bottom: 20px;
	margin-top:auto;
	margin-bottom:auto;
}

@media screen and (min-width: 800px) {
    .conform {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media screen and (min-width: 340px) and (max-width: 799px) {
    .conform {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media screen and (max-width: 339px) {
    .conform {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.con-main {
    background: #f2f2f2;
    width: 100%;
    height: 100%;
    max-width: 540px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 50%;
    -webkit-transform: translateY(-50%, 0%);
    -ms-transform: translateY(-50%, 0%);
    transform: translate(-50%, 0%);
	display:flex;
}

.ptl-conform {
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 500px) and (min-height: 550px) {
    .ptl-conform {
        position: relative;
        margin-top: -60px;
        padding-top: 10px;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@media screen and (max-width: 640px) {
    .ptl-conform {
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 15px;
    }
}

@media screen and (min-width: 600px) {
    .conform {
        border-radius:12px;
		box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    }
	
	.con-main {
        box-sizing:border-box;
		height:calc(100% + 60px);
    }
}

.inpcon:nth-child(2) {
    margin-top: 10px;
}

.carCateg-dv {
    width: 100%;
    position: relative;
    margin-top: 10px;
}

#rqComp {
    padding-bottom: 0px;
    height: 60px;
    margin-top: -60px;
}

@media screen and (max-width: 640px) {
    #rqComp {
        margin-top: -50px;
    }
}

.inpcon:nth-child(4) {
    margin-top: 10px;
}

.ptl-para2,
.ptl-para3,
.ptl-para4 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    outline: none;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 14px;
    resize: none;
    margin-top: 10px;
    font-family: "Inter", sans-serif;
    font-family: 15px;
    line-height: 24px;
    height: 150px;
}

.contxtarea {
	margin-top: 10px;
	margin-left: auto;
    margin-right: auto;
	font-family: "Inter", sans-serif;
	width: 100%;
	line-height: 24px;
	box-sizing: border-box;
	padding: 10px;
    border-radius: 5px;
	background:#fafafa;
	border:1px solid #ddd;
	outline: none;
	min-height:116px;
    resize: none;
    overflow-y: auto;
}

.contxtarea:focus,
.ptl-para2:focus,
.ptl-para3:focus,
.ptl-para4:focus {
    border: 1px solid rgb(108, 43, 217);
}

.car-rcaptre {
    width: 100%;
    display: flex;
    margin-top: 10px;
    min-height: 40px;
    position: relative;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.recdv1 {
    margin: auto;
    font-size: 20px;
    padding: 0px;
}

.recdv2 {
    margin: auto;
    font-size: 20px;
    color: red;
    display: none;
}

@media screen and (max-width: 360px) {
    .recdv2 {
        font-size: 17px;
    }
}

.recap-inp {
    padding: 0px 10px;
    border: 1px solid #ddd;
    background: #fafafa;
    width: 50px;
    box-sizing: border-box;
    outline: none;
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
}

.rec-lod-ic {
    position: absolute;
    font-size: 20px;
    position: absolute;
    margin-left: -10px;
    color: rgba(32, 32, 32, 0.4);
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    animation: div-rotate 0.9s infinite steps(8);
}

@keyframes rec-lod-ic {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes div-rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

.con-sbmt {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    background: rgba(108, 43, 217, 0.5);
    color: #fff;
    border: none;
    outline: none;
    margin-top: 20px;
    border-radius: 5px;
    font-size: 15px;
}

/*====================================================================================
    INPUT PASSWORDS
======================================================================================*/
.ind-shwspan,
.reg-shwspan,
.lgn-shwspan,
.nwpas1-shwspan,
.nwpas2-shwspan {
    position: absolute;
    right: 2px;
    font-size: 14px;
    font-weight: bold;
    padding-right: 10px;
    color: #898989;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    display: none;
    z-index: 1;
    background: #fafafa;
}

.ind-hidespan,
.reg-hidespan,
.lgn-hidespan,
.nwpas1-hidespan,
.nwpas2-hidespan {
    position: absolute;
    right: 2px;
    font-size: 14px;
    font-weight: bold;
    padding-right: 10px;
    color: #898989;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    display: none;
}

/*====================================================================================
    SUCCESS AND ERRORS
======================================================================================*/
.lgnsucces,
.rstsucces,
.nwsucces {
    color: #23c802;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    margin-top: 15px;
    line-height: 20px;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
}

.consucces {
    color: #23c802;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    margin-bottom: 15px;
    line-height: 20px;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
}

.confail {
    color: #e52d44;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    margin-bottom: 15px;
    line-height: 20px;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
    display: none;
}

.em-sendera {
    color: #e52d44;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    margin-bottom: 15px;
    line-height: 20px;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
}

#randm2 {
    box-sizing: border-box;
    border-radius: 5px;
    outline: none;
    border: none;
    background: #fff;
    font-weight: bold;
    font-size: 30px;
}

.con-sbmt-fk {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    background: linear-gradient(135deg,#6c2bd9,#8b5cf6);
    color: #fff;
    border: none;
    outline: none;
    margin-top: 20px;
    border-radius: 5px;
    font-size: 15px;
    position: absolute;
    cursor: pointer;
}

.em-checker {
    display: block;
    background: yellow;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 50%;
    -webkit-transform: translateY(-50%, 0%);
    -ms-transform: translateY(-50%, 0%);
    transform: translate(-50%, 0%);
    z-index: -1;
    visibility: hidden;
    max-width: 400px;
    text-align: center;
}

.indt0-er,
.indt1-er,
.indt2-er,
.indt3-er,
.indt4-er,
.lgn0-er,
.lgn1-er,
.lgn2-er,
.lgn3-er,
.lgn4-er,
.reg-er,
.nwps0-er,
.nwps1-er {
    color: #e52d44;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 20px;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
    padding-left: 10px;
    width: calc(100% + 20px);
    margin-left: -10px;
    font-size: 14px;
    display: none;

}

.reg-erPHn,
.reg-erPSW {
    margin-bottom: 0px;
}

.suc-ic,
.era-ic {
    display: inline-block;
    font-size: 17px;
}

.reg-bk-lgn {
    color:#6C2BD9;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    margin-top: 25px;
    line-height: 20px;
    position: relative;
    box-sizing: border-box;
    width: calc(100% + 20px);
    margin-left: -10px;
    font-size: 14px;
}

@-moz-document url-prefix() {
    .reg-bk-lgn {
        width: 100%;
        margin-left: 0px;
        font-size: 15px;
    }
}

.reg-bklgn-lnk {
    color:#6C2BD9;
    text-decoration: none;
}

.reg-bklgn-lnk:hover {
    text-decoration: underline;
}

.reg-agtms {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: #9f9f9f;
    opacity: 0.8;
}

.agrmt-lnk {
    color: #9f9f9f;
    text-decoration: underline;
    cursor: pointer;
}

/*====================================================================================
    CUSTOM CHECKBOX AND RADIO BUTTONS (EDIT PROFILE)
======================================================================================*/
.ide {
    display: block;
    position: relative;
}

.ide input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.checkide {
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 0;
    left: 10px;
    height: 16px;
    width: 16px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.ide:hover input~.checkide {
    background-color: #e7e7e7;
}

/* When the radio button is checked, add a blue background */
.ide input:checked~.checkide {
    background-color: #6c2bd9;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkide:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.ide input:checked~.checkide:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.ide .checkide:after {
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/***********************************************
    OUTSIDE SKELE
***********************************************/
.outsyd-skele {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 7;
    background:#fff;
}

.outsyd-skel-ptl {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
}

.outsyd-skele-cont {
    width: 100%;
    max-width: 1366px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    display: flex;
}

@media screen and (max-width: 1090px) {
    .outsyd-skele-cont {
        background: #fff;
    }
}

/***********************************************
    ROTATING THE ICON 
***********************************************/
.spine-icon-lg {
    animation: rotateMyicon 0.9s infinite steps(8);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    position: relative;
    font-size: 30px;
    width: 30px;
    height: 30px;
    margin: auto;
    /***The centered icon **/
    color: #cdcdcd;
    display: inline-block;
}

@keyframes rotateMyicon {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*=================================================
  OUTFOOTER
==================================================*/
.outfuter {
    box-sizing: border-box;
    padding-top: 15px;
    padding-bottom: 15px;
	padding-left: 15px;
    padding-right: 15px;
    border-top: 1px solid #ddd;
	display:flex; /* places the links in a row */
	flex-wrap:wrap;
    justify-content:center; /* centers the whole row */
    gap:12px 15px;  /* 10px between rows, 15px between columns */
	min-height:0px;
	font-size:13px;
}

@media screen and (max-width: 500px) {
    .outfuter {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.footer-lnk {
    color:#999;
    text-decoration:none;
	cursor:pointer;
	border:none;
	outline:none;
}

@media screen and (min-width: 881px) and (max-width: 1200px){
	.footer a:nth-child(3) {
        display:none;
    }
	.footer-lnk:last-child  {
        display:none;
    }
}

.footer-lnk:hover {
   color:#6c2bd9;
}

.tam-cpryt {
    width: 90px;
    height: 17px;
    display: flex;
    color: #999999;
    font-size: 14px;
}

.tam-cpryt-a {
    position: relative;
}

.tam-cpryt-b {
    width: 14px;
    height: 17px;
    text-align: center;
    line-height: 17px;
    position: relative;
    padding-top: 0px;
    box-sizing: border-box;
    margin-left: 4px;
    margin-right: 0px;
}

.tam-cpryt-c {
    position: relative;
}

.cpryt-ic {
    text-align: center;
}