@font-face {
  font-family: 'Calibri', sans-serif;
  font-style: normal;
  font-weight: 400;
  src: local('Calibri Regular'), local('Calibri-Regular'),
       url('v2_calibri-regular.ttf') format('truetype'); /* Legacy iOS */
}

html, body {
	margin: 0;
}

body {
	background-image: linear-gradient(to bottom, rgba(245,252,252,1), rgba(223,237,245,1));
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	height: 100%;
	position: relative;
	background-attachment: fixed;
	font-family: Calibri, sans-serif;
}

#language {
	line-height: 40px;
	vertical-align: center;
	cursor: pointer;

}

#language:hover {
	text-decoration: underline;	
}

.main {
	position:relative;
	min-height: calc(100vh - 40px);
	background-image: url('assets/v2_half-cengkeh.png');
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: auto 80%; 
}

.vpn-container {
	max-width: 1680px;
	margin-top: 30px;
}

.logo-bca {
	height: 60px;
}

.vpn-btn {
	background-color: rgb(2, 101, 178);
	width: 100%;
	margin: 0 auto;
	color: white;
	height: 40px;
	border-radius: 20px;
}

.error-btn {
	padding: .3em 2em !important;
}

.form-control:focus {
     -webkit-box-shadow: 0px 0px 5px  #4D90FE;
     box-shadow: 0px 0px 5px  #4D90FE;
}

.info-thumb {
 	text-align: center;
}

.info-thumb a {
	text-decoration: none;
}

.info-thumb span {
 	display: block;
}

.info-thumb img {
 	height: 50px;
}

.info-logo {
	line-height: 42px;
}

.logo-description {
	 display: block;
	 text-align: center;
}

.footer {
	position: absolute;
	padding: 0.5em;
	background-color: #f2f2f2;
	text-align: center;
	width: 100%;	
	height: 40px;
}

.footer-img {
	height: 25px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.password_input {
    -webkit-text-security: disc;
}

input, input:before, input:after {
	-webkit-user-select: initial;
	-khtml-user-select: initial;
	-moz-user-select: initial;
	-ms-user-select: initial;
	user-select: initial;
} 

/* BOX SHADOW */
.box-shadow {
	-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.1);
}

/* BORDER RADIUS */
.border-radius-15 {
	border-radius: 15px !important;
}

/* MARGIN */
.mt-3-7vh {
	margin-top: 7vh !important;	
}
.mt-3-5vh {
	margin-top: 5vh !important;	
}
.mt-6vh {
	margin-top: 6vh !important;	
}
.mt-10vh {
	margin-top: 10vh !important;	
}
.mt-46 {
	margin-top: 27.81px !important;	
}
.mb-2-3 {
	margin-bottom: 1rem !important;
}

/* PADDING */
.pt-4-5 {
	padding-top: 5rem!important
}
.p-0-pc {
	padding: 0px !important;
}

/* FONT */
.font-28-50 {
	font-size: calc(28px + (50 - 28) * ((100vw - 300px) / (3840 - 300)));
}
.font-28-44 {
	font-size: 44px !important;
}
.font-18-42 {
	font-size: calc(18px + (42 - 18) * ((100vw - 300px) / (3840 - 300))) !important;
}
.font-18-28 {
	font-size: 28px !important;
}
.font-14-28 {
	font-size: calc(14px + (28 - 14) * ((100vw - 300px) / (3840 - 300))) !important;
}
.font-14-24 {
	font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (3840 - 300)));
}
.font-14-16 {
	font-size: 16px !important;
}
.font-14-18 {
	font-size: 18px !important;
}
.font-14-20 {
	font-size: 20px !important;
}
.font-12-20 {
	font-size: calc(12px + (20 - 12) * ((100vw - 300px) / (3840 - 300)));
}
.font-12-16 {
	font-size: 16px !important;
}

/* TEXT */
.text-blue-bca-1 {
	color: rgb(31, 97, 152);
}
.text-blue-bca-2 {
	color: rgb(7, 93, 167);
}

/* BACKGROUND COLOR */
.bg-col-bca-blue {
	background-color: rgb(2, 101, 178) !important;
}

/* WIDTH */
.width-100 {
	width: 100px !important;
}
.w-450-90p {
	min-width: 450px !important;
}
.w-420 {
	width: 420px !important;
}

/* LINE-HEIGHT */
.line-height-20 {
	line-height: 1.2;
}

/* DISPLAY */
.d-none {
	display: none !important;
}


@media only screen and (max-width: 1600px)  {
	.vpn-container {
		max-width: 1200px;
		margin-top: -15px;
	}
	.logo-bca {
		height: 45px;
	}
	.mb-2-3 {
		margin-bottom: 0.5rem !important;
	}
	.font-28-44 {
		font-size: 32px !important;
	}
	.font-18-28 {
		font-size: 22px !important;
	}
	.font-14-20 { 
		font-size: 16px !important;
	}
	.font-12-16 { 
		font-size: 14px !important;
	}
	.w-420 { 
		width: 376px !important;
	}
	.w-450-90p {
		min-width: 406px !important;
	}
}
@media only screen and (max-width: 1200px)  {
	.vpn-container {
		max-width: 900px;
		margin-top: 15px;
	}
	.main {
		min-height: calc(var(--vh, 1vh) * 100 - 40px);
		background-size: auto 40%; 
	}	
	.font-28-44 {
		font-size: 30px !important;
	}
	.font-18-28 {
		font-size: 20px !important;
	}
	
}
@media only screen and (max-width: 992px)  {
	.vpn-container {
		max-width: 680px;
	}
	.logo-bca {
		height: 40px;
	}
	.font-28-44 {
		font-size: 28px !important;
	}
	.font-18-28 {
		font-size: 18px !important;
	}
	.font-14-16 {
		font-size: 14px !important;
	}
	.font-14-18 {
		font-size: 14px !important;
	}
	.font-14-20 { 
		font-size: 14px !important;
	}
	.font-12-16 { 
		font-size: 12px !important;
	}
	.w-420 { 
		width: 100% !important;
	}
	.w-450-90p {
		min-width: 90% !important;
	}
}
@media only screen and (max-width: 768px) {
	.vpn-container {
		padding-right: 3rem;
		padding-left:  3rem;
	}
	.main {
		background-size: auto 40%; 
	}
	.pt-4-5 {
		padding-top: 1.5rem!important
	}
}
@media only screen and (max-width: 568px) {
	.main {
		background-size: auto 30%; 
	}
	.vpn-container {
		padding-right: 15px;
		padding-left: 15px;
	}
	.info-thumb {
		text-align: left;
		margin-bottom: 5px;
	}
	.info-thumb span {
		display: inline;
	}
	.info-thumb img {
		height: 42px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.logo-description {
		display: inline;
		text-align: left;
	}
	.pr-0-mob {
		padding-right: 0px !important;
	}
	.p-0-pc {
		padding-left: 15px !important;
	}
	.text-left-mob {
		text-align: left;
	}
	.d-none-mob {
		display: none !important;
	}
	.mb-mobile {
		margin-bottom: 0.5rem !important;
	}
	.footer {
		height: auto;
		min-height: 40px;
	}
}
@media only screen and (max-width: 380px) {
	.main {
		background-size: auto 25%; 
	}
	.footer-img {
		height: 15px;
	}
	.footer-font-mob {
		font-size: 12px;
	}
}
@media only screen and (max-width: 991px) and (orientation: landscape) {	
	.landscape {
		margin-bottom: 150px;
	}
}

@media only screen and (max-height: 668px)  {
	.vpn-container {
		margin-top: 0px;
	}
	.logo-bca {
		height: 30px;
	}
	.mt-3-7vh {
		margin-top: 3vh !important;	
	}
	.mt-3-5vh {
		margin-top: 3vh !important;	
	}
}
@media only screen and (max-height: 568px)  {
	.mt-3-7vh {
		margin-top: 0.5rem !important;	
	}
	.mt-3-5vh {
		margin-top: 0.5rem !important;	
	}
}