/* created by Yap Shu Ci 201020 */
/* use for marketing-residential-mobile page */

* {
  box-sizing: border-box;
}

.marketing_res_form, .form_com_res {
  display: flex;
  flex-wrap: wrap;
}

.marketing_res_form ::placeholder , .form_com_res ::placeholder {
  color: #C3C6CF;
}

/* dropdown list */
.marketing_res_form select , .form_com_res select, #Salutation, #HearFromUs, 
#Property, #Phase, #State{
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  background-image: url(/scripts/images/dropdown.png); 
  background-repeat: no-repeat;
  background-position: right;
  background-position-y: 12px;
  padding: 10px 25px !important;
  /* border: 1px solid rgba(0, 0, 0, .15) !important;*/
  border-radius: 10px !important;
  height: 50px;
}


#ContactName, #ContactNo, #Email, #Message, #HearFromOthers, #Address, #monthBill {
	padding: 10px 25px !important;
	border-radius: 10px !important;
}

#HearFromUs {
  border: none;
}

#Message {
  height: 150px !Important;
}

.first {
  padding: 10px;
  flex: 50%;
}

.first-s, .first-s2 {
  /*flex: 50%;*/
  display: flex;
  flex-direction: row;
  border-radius: 10px;
}

.first-s{
  background-color: white;
}

.first-1{
  flex:20%;
  align-self: center;
}

.first-2{
  flex:80%;
}

.first-3{
  flex:30%;
  margin: 0px 10px;
}

.first-4{
  flex:70%;
}

.second , .second-s {
  padding: 0px 10px;
  flex: 50%;
  /*height: 50px;*/
}

.third , .fourth , .fifth, .sixth, .others {
  padding: 10px;
  flex: 100%;
  /*height: 50px;*/
}


#Message, #HearFromOthers {
  resize: none;
  border: none;
  border-radius: 10px;
  padding: 13px 13px;
  opacity: 1;
  height: 192px;
  display: block;
  width: 100%;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #fff;
  background-clip: padding-box;
}

#Message:focus, #HearFromOthers:focus {
  outline: none;
}

.metrics-before-res::after{
  content: 'RM';
  position: absolute;
  top: 13px;
  left: 15px;
  font-size: 14px;
  font-family: gothamrd-medium;
  display: block;
  color: rgba(0, 0, 0, 0.6);
  font-weight: bold;
}


.row-datadisplay .metrics-before-res::after{
  content: 'RM';
  position: absolute;
  top: 17px;
  left: 22px;
  font-size: 14px;
  font-family: gotham-book;
  display: block;
  color: #d0d3d6;
}

.form-submit{
  margin-top: 20px;
  box-shadow: none !important;
  margin-left: auto;
  margin-right: auto;
}
/*
.test::after{
content: attr(metrics);
position: absolute;
top: 12px;
left: 99px;
font-size: 14px;
font-family: gothamrd-medium;
display: block;
color: rgba(0, 0, 0, 0.6);
font-weight: bold;
/*flex: 60%;*/
/*
.second  .test::after{
content: attr(metrics);
position: absolute;
top: 7px;
left: 96px;
font-size: 14px;
font-family: gotham-book;
color: black;
} */

input + label {
  color: #999;
  font-family: Arial;
  font-size: .8em;
  position: relative;
  left: -240px;
  top: -30px;
}

input[required] + label:after {
  content:'*';
  color: red;
}


input[required]:invalid + label {
  display: inline-block;
}

input[required]:valid + label{
  display: none;
}

input[type="text"], input[type="email"], #HearFromOthers {
  height: 50px;
}

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-color: rgb(255,255,255) !important;
    background-image: none !important;

}

#popupLayer {
  max-width: 720px;
  background: white;
  padding: 25px;
  width: 95%;
  border-radius: 30px;
  margin: 6rem auto 0px auto;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

#darkOverlay {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  background-color: #00000090;
  z-index: 4;
  align-content: center;
}

.xtraCss {
  flex: 45%;
  margin-bottom: 10px;
}
.xtraCss2 {
  flex: 100%;
  margin-bottom: 20px;
}
.xtraCss3 {
  flex: 25%;
}
.first-s, #form_com_res input, #form_com_res select {
  border: 1px solid darkblue;
  border-radius: 30px !important;
  height: auto;
}
#form_com_res input, #form_com_res select {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
#form_com_res h3 {
  color: darkblue;
  text-align: center;
}

#btnSubmitForm {  
  background-color:green !important;      
  color:white !important;  
}
.seventh {
  display: flex;
}
.seventh input {
  align-self: flex-start;
  margin: 5px;
}
#iConsent {
  align-self: flex-start;
  padding-left: 10px;
  font-size: 12px;
  margin-bottom: 0px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
#popupLayer::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#popupLayer {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
.marketing_res_form select, .form_com_res select, #Salutation, #HearFromUs, #Property, #Phase, #State {
  background-position-y: 4px;
}
#closeBtnCont {
  display: flex;
  justify-content: end;
  margin-bottom: 0px;
}
#closeBtn {
  transform: scale(1.5);
  cursor: pointer;
  font-size: 20px;
}
  
  


@media only screen and (max-width: 768px) {
  .first, .second, .third{
    flex: 100%;
  }

  .first-s, .first-s2 {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    border-radius: 0px;
  }

  .first-1{
    flex:100%;
    width: 100%;
    margin-bottom: 20px;
  }

  .first-2, .first-3, .first-4{
    flex:100%;
  }

  .first-3{
    margin-right: 0px;
    margin-bottom: 20px;
  }

  .second-s {
    display: none;
  }

  .first-1 {
    margin-bottom: 0px;
    flex: 60%;
  }
  .first-s {
    flex-direction:row;
  }
  #ContactNo {
    margin-bottom: 10px;
  }
  .xtraCss, .xtraCss2 {
    margin-right: 10px;
  }
  #popupLayer {
    height: 80%;
  }
  #closeBtnCont {
    margin-bottom: 20px;
  }

}

@media only screen and (min-width: 769px) and (max-width: 991px) {
  .first-1{
    flex:35%;
  }

  .first-2{
    flex:65%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .first-1{
    flex:25%;
  }

  .first-2{
    flex:75%;
  }
}

@media screen and (max-width:425px) {
  #popupLayer {
    padding: 50px 20px;
  }
  .xtraCss {
    flex: 100%;
  }
}