/* LOGIN */
.page-login{
	background: #fff;
	width: 100%;
	overflow: hidden;
	width: 60vh;
}
.login-cover{
	position: relative;
	/* width: 56vh; */
}
.login-cover img.cover{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	object-position: center right;
}
/* .login-cover:before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, #212121 100%);
	z-index: 2;
} */
.login-cover .caption{
	position: relative;
	z-index: 3;
	padding: 40px;
}
/* .login-cover .caption h3{
	font-size: 22px;
} */
.align-items-center {
	padding: 18px;
/*	margin-top: 3vh;
  height: 71vh;*/
}

@media(max-width: 800px){
	/* .page-login{
		overflow: auto;
	} */
}
@media screen and (device-aspect-ratio: 40/71) {
	.input-group.flex-fill {
		width: 54vh;
	}
	a.w-45.btn.btn-secondary {
		width: 53vh;
	}
	.hstack.gap-1.ms-auto {
		/* width: 203px; */
	}
	span.ms-auto {
		font-size: 12px;
	}
	span.select2.select2-container.select2-container--default {
		width: 199px;
	}
	p {
		/* margin-left: -34px; */
		font-size: 11px;
	}
	p.tes {
		margin-top: 4px;
		margin-left: 1px;
	}
	.login-cover .caption h3 {
		font-size: 26px;
		margin-left: 0px;
	}
	.gap-1 {
		/* gap: 0.25rem!important; */
		/* width: 203px;  */
	}
	button.btn.btn-secondary.dropdown-toggle {
		width: 45vh;
	}
	.input-group { 
		margin-top: 7px;
		width: 256px;
	}
	div#panoDIV {
		margin-top: -67vh;
	}
	.hstack.gap-2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: stretch;
	}
	.hstack.gap-2.mb-3 {
		flex-direction: row;
	}
	a.btn.col-md.btn-primary {
		width: 53vh;
	}
	a.btn.col-md.btn-info {
		width: 53vh;
	}
	a.btn.col-md.btn-success {
		width: 53vh;
	}
	a.btn.btn-primary {
		width: 53vh;
	}
	a.btn.btn-primary.peta-data {
		width: 51vh;
	}
	a.btn.btn-info {
		width: 53vh;
	}
	a.btn.btn-success {
		width: 53vh;
	}
	/* h3 {
		font-size: 2px;
	} */
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {
	a.btn.btn-primary.login {
		width: 50vh;
	}
	a.btn.btn-primary.facebook {
		width: 44vh;
	}
	a.btn.btn-info.twitter {
		width: 44vh;
	}
	a.btn.btn-success.whatsapp {
		width: 44vh;
	}
	/* a.btn.btn-primary {
		width: 50vh;
	} */
	a.w-45.btn.btn-secondary {
		width: 53vh;
	}
	.hstack.gap-1.ms-auto {
		/* width: 231px; */
	}
	span.ms-auto {
		/* font-size: 11px; */
	}
	.gap-1 {
		/* gap: 0.25rem!important; */
		 /* width: 258px;  */
	}
	div#panoDIV {
		margin-top: -58vh;
	}
	.col-lg-7.text-nowrap.text-white {
		margin-left: -30px;
	}
	button.btn.btn-secondary.dropdown-toggle {
		width: 46vh;
	}
	.input-group { 
		margin-top: 7px;
		width: 307px;
	}
	.hstack.gap-2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: stretch;
	}
	.hstack.gap-2.mb-3 {
		flex-direction: row;
	}
	a.btn.col-md.btn-primary {
		width: 53vh;
	}
	a.btn.col-md.btn-info {
		width: 53vh;
	}
	a.btn.col-md.btn-success {
		width: 53vh;
	}
	/* a.btn.btn-primary {
		width: 41vh;
	} */
	a.btn.btn-primary.peta-data {
		width: 52vh;
	}
	/* a.btn.btn-info {
		width: 53vh;
	} */
	a.btn.btn-success {
		width: 53vh;
	}
	p.tes {
		margin-top: 4px;
		margin-left: 1px;
	}
  }

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {
	a.w-45.btn.btn-secondary {
		width: 53vh;
	}
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		width: 230px;
	}
	.hstack.gap-1.ms-auto {
		/* width: 231px; */
	}
	span.ms-auto {
		/* font-size: 12px; */
	}
	div#panoDIV {
		margin-top: -60vh;
	}
	.dropdown-menu.show {
		display: none;
	}
	.hstack.gap-2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: stretch;
	}
	.hstack.gap-2.mb-3 {
		flex-direction: row;
	}
	a.btn.btn-primary {
		width: 53vh;
	}
	a.btn.btn-primary.peta-data {
		width: 51vh;
	}
	a.btn.btn-info {
		width: 53vh;
	}
	a.btn.btn-success {
		width: 53vh;
	}
	a.btn.col-md.btn-primary {
		width: 53vh;
	}
	a.btn.col-md.btn-info {
		width: 53vh;
	}
	a.btn.col-md.btn-success {
		width: 53vh;
	}
	
	p {
		/* margin-left: -2px;
		font-size: 11px; */
	}
	.login-cover .caption h3 {
		font-size: 25px;
		margin-left: -3px;
	}
	.gap-1 {
		/* gap: 0.25rem!important; */
		 /* width: 231px;  */
	}
	button.btn.btn-secondary.dropdown-toggle {
		width: 46vh;
	}
	/* .input-group { 
		margin-top: 7px;
		width: 307px;
	} */
	div#panoDIV {
    margin-top: -60vh;
	}
	p.tes {
		margin-top: 4px;
		margin-left: 1px;
	}
	
  }


@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	.col-lg-7.text-nowrap.text-white{
		margin-left: -36px;
}
/* button.btn.btn-secondary.dropdown-toggle {
	width: 47vh;
} */
.input-group { 
	margin-top: 7px;
	/* width: 307px; */
}

}

@media only screen and (device-aspect-ratio: 768/1024) and (orientation : portrait) {
	/* .ms-auto {
		font-size: 8px;
	} */
	/* header.navbar {
		z-index: 200 !important;
		height: 8vh;
		width: 76vh;
	} */
	/* button.btn.btn-secondary.dropdown-toggle {
		width: 64vh;
	} */
	/* .input-group { 
		margin-top: 7px;
		width: 654px;
	} */
	p.tes {
		margin-top: -26;
		margin-left: 100px;
	}
	.tombol-kembali {
		width: 115px;
	}
}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
	button.btn.btn-secondary.dropdown-toggle {
		width: 64vh;
	}
	.input-group { 
		margin-top: 7px;
		width: 281px;
	}
	button.btn.btn-secondary.dropdown-toggle {
		width: 38vh;
	}
	div#panoDIV {
		margin-top: -52vh;
	}
}

@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
	.input-group { 
		/* margin-top: 7px; */
		width: 20%;
	}
	a.d-flex.justify-content-center.btn.btn-secondary {
		width: 117px;
	}
	
}

/* @media  screen and (max-width: 1366px) {
	.input-group { 
		margin-top: 7px;
		width: 307px;
	}
} */

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
	/* button.btn.btn-secondary.dropdown-toggle {
		width: 647px;
	} */
	
}


@media only screen and (min-width: 411px) and (max-width: 731px) {
	.hstack.gap-1.ms-auto {
		/* width: 284px; */
	}
	.gap-1 {
		/* gap: 0.25rem!important; */
		 /* width: 297px;  */
	}
	button.btn.btn-secondary.dropdown-toggle {
		width: 42vh;
	}
	.input-group.flex-fill { 
		margin-top: 7px;
		width: 396px;
	}
	div#panoDIV {
		margin-top: -53vh;
	}
	p.tes {
		margin-top: 4px;
		margin-left: 1px;
	}
	/* .hstack.gap-2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: stretch;
	}
	a.btn.col-md.btn-primary {
		width: 53vh;
	}
	a.btn.col-md.btn-info {
		width: 53vh;
	}
	a.btn.col-md.btn-success {
		width: 53vh;
	} */
}
@media screen 
  and (device-width: 412px) 
  and (device-height: 823px) 
  and (-webkit-device-pixel-ratio: 3.5) 
  and (orientation: portrait) {
	a.btn.btn-info.twitter {
		width: 41vh;
	}
	a.w-45.btn.btn-secondary {
		width: 44vh;
	}
	.hstack.gap-1.ms-auto {
		/* width: 278px; */
	}
	button.btn.btn-secondary.dropdown-toggle {
		width: 47vh;
	}
	.input-group { 
		margin-top: 7px;
		/* width: 307px; */
	}
	div#panoDIV {
		margin-top: -47vh;
	}
	.hstack.gap-2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: stretch;
	}
	.hstack.gap-2.mb-3 {
		flex-direction: row;
	}
	a.btn.col-md.btn-primary {
		width: 53vh;
	}
	a.btn.col-md.btn-info {
		width: 53vh;
	}
	a.btn.col-md.btn-success {
		width: 53vh;
	}
	a.btn.btn-primary {
		width: 53vh;
	}
	a.btn.btn-info {
		width: 53vh;
	}
	a.btn.btn-success {
		width: 53vh;
	}
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
	a.btn.btn-primary.login {
		width: 43vh;
	}
	a.btn.btn-primary {
		width: 41vh;
	}
	span.ms-auto {
		/* font-size: 13px; */
	}
	div#panoDIV {
		margin-top: -47vh;
	}
	.gap-1 {
		/* gap: 0.25rem!important; */
		 /* width: 263px;  */
	}
	button.btn.btn-secondary.dropdown-toggle {
		width: 38vh;
	}
	.input-group.flex-fill { 
		margin-top: 7px;
		width: 359px;
	}
	.hstack.gap-2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: stretch;
	}
	.hstack.gap-2.mb-3 {
		flex-direction: row;
	}
	a.btn.col-md.btn-primary {
		width: 43vh;
	}
	a.btn.col-md.btn-info {
		width: 43vh;
	}
	a.btn.col-md.btn-success {
		width: 43vh;
	}
	/* a.btn.btn-primary {
		width: 44vh;
	} */
	/* a.w-45.btn.btn-secondary {
		width: 44vh;
		align-items: center;
		margin-left: 5vh;
	} */
	a.btn.btn-info {
		width: 44vh;
	}
	a.btn.btn-success {
		width: 44vh;
	}
}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) {  
	a.btn.btn-primary {
		width: 51vh;
	}
  }