@charset "UTF-8";
input[type=checkbox][id^=myCheckbox] {
  display: none;
}

label > span {
  font-size: 12px;
  padding-top: 5px;
  display: block;
  color: #553892;
}

label {
  border: 1px solid #cfd0d4;
  padding: 5px 0px 5px 0px;
  display: block;
  position: relative;
  cursor: pointer;
  background-color: #fcfdff;
  border-radius: 3px;
  text-align: center;
}

label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid #553892;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  width: 54px;
  height: 46px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked + label {
  border-color: #553892;
}

:checked + label:before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
  z-index: 1;
}

:checked + label img {
  transform: scale(0.9);
  z-index: -1;
}

.feature-icon {
  width: 82px;
  float: left;
  margin-right: 20px;
}

h1 {
  text-align: center;
  color: #553892;
  font-size: 26px;
  padding: 45px 0px 25px 0px;
}

.proterty-info {
  width: 100%;
  float: left;
  margin-bottom: 50px;
  box-shadow: 1px 1px 5px 5px rgba(207, 208, 212, 0.3);
  border-radius: 3px;
  padding-bottom: 30px;
}

.proterty-info > h2 {
  text-align: left;
  background: #424242;
  color: #ffffff;
  padding: 15px 2% 15px 2%;
  font-size: 18px;
}

.proterty-row {
  width: 100%;
  float: left;
  padding: 20px 2% 0px 2%;
}

.radio-area {
  float: left;
  margin-right: 20px;
  font-size: 16px;
  color: #553892;
}

.title-2,
.title-3 {
  text-align: left;
  display: block;
  padding-bottom: 10px;
  font-size: 16px;
  color: #553892;
  font-weight: normal;
}

.title-3 {
  color: #43575e;
}

.info-p1 {
  width: 17%;
  margin-right: 3%;
  float: left;
}

.info-p2 {
  width: 17%;
  margin-right: 3%;
  float: left;
}

.info-p3 {
  width: 30%;
  margin-right: 3%;
  float: left;
}

.info-p4 {
  width: 27%;
  float: left;
}

.input-box {
  border: 1px solid #cfd0d4;
  border-radius: 3px;
  padding: 10px 15px 10px 15px;
  width: 100%;
  box-shadow: 1px 1px 5px 5px rgba(207, 208, 212, 0.1);
  background-color: #fcfdff;
}

.proterty-row > textarea {
  background-color: #fcfdff;
  width: 100%;
  border: 1px solid #cfd0d4;
  margin-bottom: 10px;
  border-radius: 3px;
  box-shadow: 1px 1px 5px 5px rgba(207, 208, 212, 0.1);
}

.remark {
  color: #b6229c;
  font-size: 18px;
}

.contact-p1 {
  width: 31%;
  float: left;
  margin-right: 3.2%;
}

.contact-p2 {
  width: 31%;
  float: left;
  margin-right: 3.2%;
}

.contact-p3 {
  width: 31%;
  float: left;
}

.proterty-btn {
  background-color: #7d5ca9;
  text-align: center;
  color: #ffffff;
  width: 100%;
  float: left;
  margin-bottom: 50px;
  padding: 20px 0px 20px 0px;
  font-size: 16px;
}

::-moz-placeholder {
  color: #8e959f;
  opacity: 0.8;
}

:-ms-input-placeholder {
  color: #8e959f;
  opacity: 0.8;
}

::placeholder {
  color: #8e959f;
  opacity: 0.8;
}

:-ms-input-placeholder {
  color: #8e959f;
}

::-ms-input-placeholder {
  color: #8e959f;
}

.rent-btn {
  color: #553892;
  border: 1px solid #cfd0d4;
  box-shadow: 1px 1px 5px 5px rgba(207, 208, 212, 0.1);
  width: 49%;
  float: left;
  text-align: center;
  padding: 17px 0px 17px 0px;
  margin-right: 2%;
}

.rent-btn:last-child {
  margin-right: 0%;
}

.rent-btn.active {
  border: 1px solid #774175;
  background-color: #774175;
  color: #ffffff;
}

.proterty-container {
  width: 100%;
  margin: 0 auto;
  max-width: 850px;
}

.price-p1 {
  width: 30%;
  float: left;
}

.status-p2 {
  width: 68%;
  float: left;
  margin-left: 2%;
}

.status-btn {
  color: #553892;
  border: 1px solid #cfd0d4;
  box-shadow: 1px 1px 5px 5px rgba(207, 208, 212, 0.1);
  width: 32%;
  float: left;
  text-align: center;
  padding: 12px 0px 12px 0px;
  margin-right: 2%;
  font-size: 16px;
}

.status-btn:last-child {
  margin-right: 0%;
}

.status-btn.active {
  border: 1px solid #774175;
  background-color: #774175;
  color: #ffffff;
}

.address-p1 {
  width: 30%;
  float: left;
  margin-right: 2%;
}

.address-p2 {
  width: 30%;
  float: left;
  margin-right: 2%;
}

.address-p3 {
  width: 10.5%;
  float: left;
  margin-right: 2%;
}

.address-p4 {
  width: 10.5%;
  float: left;
  margin-right: 2%;
}

.address-p5 {
  width: 10.5%;
  float: left;
}

.address-p1 > span,
.address-p2 > span {
  display: inline-block;
  padding-right: 2%;
  color: #553892;
  font-size: 16px;
  padding-bottom: 10px;
}

.address-p3 > span,
.address-p4 > span,
.address-p5 > span {
  display: inline-block;
  padding-left: 5%;
  color: #553892;
  font-size: 16px;
  padding-bottom: 10px;
}

.address-p1 > .input-box,
.address-p2 > .input-box {
  display: inline-block;
  width: 100%;
}

.address-p3 > .input-box,
.address-p4 > .input-box,
.address-p5 > .input-box {
  display: inline-block;
  width: 100%;
}

@media screen and (max-width: 900px) {
  .proterty-container {
    padding-left: 5%;
    padding-right: 5%;
  }
}
@media screen and (max-width: 850px) {
  .radio-area {
    margin-right: 10px;
    font-size: 14px;
  }

  .address-p1 > span,
.address-p2 > span {
    padding-bottom: 8px;
    font-size: 14px;
  }

  .address-p1,
.address-p2 {
    width: 48%;
    margin-bottom: 15px;
    font-size: 14px;
  }

  .address-p3,
.address-p4,
.address-p5 {
    width: 31%;
  }

  .address-p3 > span,
.address-p4 > span,
.address-p5 > span {
    font-size: 14px;
  }

  .title-2,
.title-3,
.rent-btn,
.status-btn,
.remark {
    font-size: 14px;
  }

  .info-p1,
.info-p2,
.info-p3,
.info-p4 {
    width: 47%;
    margin-bottom: 10px;
  }

  .address-p1 > .input-box,
.address-p2 > .input-box {
    width: 100%;
  }
}
@media screen and (max-width: 400px) {
  .radio-area {
    font-size: 12px;
  }

  .address-p1 > span,
.address-p2 > span {
    font-size: 12px;
  }

  .address-p1,
.address-p2 {
    font-size: 12px;
  }

  .address-p3 > span,
.address-p4 > span,
.address-p5 > span {
    font-size: 12px;
  }

  .title-2,
.title-3,
.rent-btn,
.status-btn,
.remark {
    font-size: 12px;
  }
}