a:link {
  text-decoration: none;
}

.fa-asterisk {
	color: red;
	font-size: 12px;
}

.btn-submit {
	font-family: Arial, Helvetica, sans-serif;
}

.form-control {
	font-size: 0.9rem;
}

.bg-unifi-color {
	background-color: #F47B20;
}

.unifi-color {
	color: #F47B20;
}

.border-unifi-color {
	border: 1px solid #F47B20;
}

.hover-unifi-color:hover {
	background-color: rgba(244,123,32,0.7);
}

.hover-unifi-color-with-border:hover {
	background-color: rgba(244,123,32,0.7);
}

.bg-time-color {
	background-color: #B7006D;
}

.time-color {
	color: #B7006D;
}

.border-time-color {
	border: 1px solid #B7006D;
}

.hover-time-color:hover {
	background-color: rgba(183,0,109,0.7);
}

.hover-time-color-with-border:hover {
	background-color: rgba(183,0,109,0.7);
}

.bg-maxis-color {
	background-color: #006633;
}

.maxis-color {
	color: #006633;
}

.border-maxis-color {
	border: 1px solid #006633;
}

.hover-maxis-color:hover {
	background-color: rgba(0, 102, 51,0.7);
}

.hover-maxis-color-with-border:hover {
	background-color: rgba(0, 102, 51,0.7);
}

/* digi */
.bg-digi-color {
	background-color: #FFCC00;
}

.digi-color {
	color: #FFCC00;
}

.border-digi-color {
	border: 1px solid #FFCC00;
}

.hover-digi-color:hover {
	background-color: rgba(255, 204, 0,0.7);
}

.hover-digi-color-with-border:hover {
	background-color: rgba(255, 204, 0,0.7);
}

/* celcom */
.bg-celcom-color {
	background-color: #0195d1;
}

.celcom-color {
	color: #0195d1;
}

.border-celcom-color {
	border: 1px solid #0195d1;
}

.hover-celcom-color:hover {
	background-color: rgba(1, 149, 209,0.7);
}

.hover-celcom-color-with-border:hover {
	background-color: rgba(1, 149, 209,0.7);
}

.main-content-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;	
}

.application-form-wrapper::before {
	position: absolute;
	left: 50%;
	right: 0;
	top: 0;
	bottom: 0;
	content: '';
	z-index: -1;
	display: block;
}

.unifi-before::before {
	background-color:#F47B20;
}

.time-before::before {
	background-color:#B7006D;
}

.maxis-before::before {
	background-color:#006633;
}

.digi-before::before {
	background-color:#FFCC00;
}

.celcom-before::before {
	background-color:#0195d1;
}

.application-form-wrapper label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
  margin-bottom: 0.2rem;
}

.application-form-wrapper .asterisk-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
  margin-bottom: 0.2rem;
}

.application-form-wrapper .form-head-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.application-form-wrapper .form-head-wrapper .title {
	font-family: Arial, Helvetica, sans-serif;
}

.application-form-wrapper .form-head-wrapper .subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
}

.application-form-wrapper .form-head-wrapper .description {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-size: 14px;
}

.left-content {
	position: relative;
}

.left-content::before {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	content: '';
	z-index: -1;
}

.left-content .left-content-title {
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-size: 1.3rem;
}

.left-content .left-content-social-media-wrapper a i {
	color: #ffffff;
	font-size: 1.9rem;
}

.left-content .left-content-social-media-wrapper a i:hover {
	color: #000000;
}

.left-content .left-content-social-media-wrapper .social-media-title {
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-size: 1.4rem;
}

.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #00549D;
	font-weight: bold;
}
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #F47B20;
	font-weight: bold;
}

.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #00549D;
	font-weight: bold;
}

.unifi-text-style {
	font-family: Arial, Helvetica, sans-serif;
	color: #F47B20;
	font-weight: bold;
}

.unifi-text-style-2 {
	font-family: Arial, Helvetica, sans-serif;
	color: #00549D;
	font-weight: bold;
}

.streamyx-text-style {
	font-family: Arial, Helvetica, sans-serif;
	color: #523031;
	font-weight: bold;
}

.maxis-text-style {
	font-family: Arial, Helvetica, sans-serif;
	color: #293895;
	font-weight: bold;
}

.maxis-text-style-2 {
	font-family: Arial, Helvetica, sans-serif;
	color: #00CC33;
	font-weight: bold;
}

.time-text-style {
	font-family: Arial, Helvetica, sans-serif;
	color: #F0008E;
	font-weight: bold;
}

.confirmation-page-wrapper {

}

.confirmation-page-wrapper .confirmation-page-img i {
	background-color: cadetblue;
  color: white;
  padding: 2rem;
  font-size: 3rem;
  border-radius: 100%;
}

.confirmation-page-wrapper .card {
	background-color: whitesmoke;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.confirmation-page-wrapper .confirmation-page-content {
		
}

.confirmation-page-wrapper .confirmation-page-package-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1;
}

.confirmation-page-wrapper .confirmation-page-package-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
}

.confirmation-page-wrapper .confirmation-page-content .confirmation-page-package-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

.confirmation-page-wrapper .confirmation-page-social-media-wrapper i {
	color: #000000;
}

.confirmation-page-wrapper .confirmation-page-social-media-wrapper a:hover i {
	color: #F47B20;
}

.confirmation-page-wrapper .track-your-order-wrapper i, span {
	color: #000000;
}

.confirmation-page-wrapper .track-your-order-wrapper span {
	font-family: Arial, Helvetica, sans-serif;
}

.confirmation-page-wrapper .track-your-order-wrapper a:hover i {
	color: #F47B20;
}

.confirmation-page-wrapper .track-your-order-wrapper a:hover span {
	color: #F47B20;
}

@media only screen and (max-width:1400px) {
	.modal-content {
	  width: 88%;
	}
}

@media only screen and (max-width:1000px) {
	.modal-content {
  	width: 79%;
	}
}

@media only screen and (max-width:992px) {
	.modal-content {
    width: 89%;
  }
}

@media only screen and (max-width:767px) {
	.application-form-wrapper::before {
		display: none;
	}
	.modal-content {
    width: 99%;
	}
}

@media only screen and (max-width:348px) {
	.modal-content {
	  width: 99%;
	}
}

/* smallest screen */
@media only screen and (max-width:320px) {
	.g-recaptcha {
    transform: scale(0.7);
    display: flex;
    justify-content: center;
	}
	.modal-content {
	  width: 99%;
	}
}