body{
	margin: 0px auto;
	font-family: "Poppins", sans-serif;
	font-size:14px;
	/* animation-name: loadingpage; */
	/* animation-duration: 0.5s; */
}

.nframe{
	position:fixed;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	background-image: url(../../assets/images/background/blueback.jpg);
	background-size: cover;
}

.nlogin{
    width: 1000px;
    height: 640px;
    background: #ffffff1c;
    /* background: linear-gradient(-45deg, #2c6ba4c9, #123a5fcf, #2674babd, #2c6ba4d9); */
    display: flex;
    justify-content: flex-end;
    background-position: center;
    background-size: cover;
    border-radius: 32px;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.npanel{
    width: 300px;
    height: 606px;
    text-align: center;
    /* margin: 40px; */
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeInAnimation;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.npanel img{
    width: 168px;
    margin: 10px auto;
}

.nhead{
    font-size:16px;
    font-weight:500
}

.nsub{
    font-size:14px;
    font-weight:400
}
.ninput{
    display: grid;
    gap: 12px;
}

.phonegroup{
    border: 1px solid #d5d5d5;
    display:flex;
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    height: 51px;
}

.nphone{
    display:flex;
    gap:4px;
    align-items:center;
    margin: 12px;
    padding-right:8px;
    border-right: 1px solid #d5d5d5;
    font-size: 18px;
    font-weight:500;
}

.nphone img{
    height:16px!important;
    width:auto!important;
}

.error{
	width:calc(100% - 404px);
	height: calc(100% - 0px);
	margin-right:4px;
	background-size: cover;
	background-image: url(../../assets/images/background/error.jpg);
	opacity:0.5;
}

.leftto{
	background:#fff;
	width: calc(60% - 32px);
	height: calc(100% - 32px);
	border-radius: 21px;
	margin: 16px;
	background-image: url(../../assets/images/background/login_front2.jpg);
	background-size: cover;
}

.righto{
	width: 400px;
	height: calc(100% - 0px);
	background-size: cover;
	/* background-image: url(../../assets/images/login/wpattern.jpg); */
	display: flex;
	justify-content: center;
	align-items: center;
}

.topy{
	height: 380px;
	width:100%;
}

.heads{
	font-size: 24px;
	font-weight:500;
	color: #8bd1ff;
}

.slogs{
	font-size:16px;
	font-weight:600;
	color: #fff;
}

.subs{
	font-size: 15px;
	font-weight: 500;
	color: #fff;
}

.subscheck{
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px;
}

.forms{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.groups{
	display:flex;
	flex-direction:column;
	gap:8px;
	width: 100%;
}

.button_1{
	border:none;
	padding: 16px;
	border-radius:8px;
	width:100%;
	background: #ffffff;
	color: #5d5d5d;
	font-weight: 600;
	font-size: 15px;
	cursor:pointer;
	transition:0.2s;
}

.button_1:hover{
	background: #edf8ff;
	transition:0.2s;
}

.button_2{
	border: 2px solid #ffffff40;
	padding: 14px;
	border-radius:8px;
	width:100%;
	background: none;
	cursor:pointer;
	font-weight: 600;
	font-size:15px;
	transition:0.2s;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.button_2:hover{
	border: 2px solid #ffffff;
	transition:0.2s;
}

.map, .map-wrapper {
	width: 100%!important;
	height: 100%!important;
}

.map-wrapper{
	width: calc(100% - 404px)!important;
	height: calc(100% - 32px)!important;
	margin: 16px;
	border-radius: 10px;
	overflow: hidden;
}

input[type="number" i] {
    border:none;
    width:-webkit-fill-available;
    font-size: 18px;
    font-weight:500;
    font-family: "Poppins", sans-serif;
    background:none;
    letter-spacing: 4px;
}

input[type="number" i]:focus {
    border:none;
	outline:none;
}

input[type="text" i] {
    border:none;
    width:-webkit-fill-available;
    font-size:14px;
    font-weight:500;
    font-family: "Poppins", sans-serif;
    background:none;
    letter-spacing:20px;
    text-align:center;
    jar;
    padding-left: 20px;
}

input[type="text" i]:focus {
    border:none;
	outline:none;
}

input[type="checkbox" i] {
   width: 24px;
   height: 24px;
   margin: 0px;
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
    transform: translate3d(0px, 0, 0);
    height: max-content!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
}

.swiper-slide img {
  width: 70%!important;
  height: 70%!important;
  margin: 0px auto!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
}

.swiper-slide {
  background: none!important;
}

.swiper-pagination-bullet-active {
    background: #ffffff!important;
}

	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}

	@keyframes fadeInAnimation {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

@media only screen and (max-width: 600px) {
	.map, .map-wrapper {
		display:none!important;
	}


	.nlogin{
    background: #ffffff00;
    height: 100%;
 }
	
	.error{
		display:none!important;
	}	

	.leftto{
		display:none!important;
	}
	
	.righto{
		width: 100%;
	}	
	
	.npanel{
	    width: calc(100% - 32px);
	    max-width:400px;
	    height: calc(100% - 64px);
	    justify-content: space-around;
	    gap: 0px;
	}

	.swiper-slide img {
	 max-width: 260px;
	}	

	.topy{
		height: calc(100% - 250px);
		overflow: auto;
		width:100%;
	}
	
}


@media only screen and (max-width: 375px) {

	.swiper-slide img {
	 max-width: 220px;
	}	

	.topy{
		height: 385px;
		width:100%;
	}
	
}