.input-alert{
  padding-left: 3px;
  display: block;
}
#map, #map1{
  height: 300px;
  width: 100%;
}
#map button, #map1 button{
  background-color: #fff !important;
}
.message{
  display: flex;
}
.select2-container{
  width: 100% !important;
}
.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link{
    border: 1px solid #222;
}
.title-tambah{
  position: relative;
}
.title-tambah::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 1em;
  border-radius: 5px;
  background: linear-gradient(135deg, #222222, #999896);
}
.nav-item:hover {
/*  width: 5em;
  height: 5em;
  border-radius: 50%;*/
  border-radius: 0.8rem;
  background-color: #d6d6d6;
}
#kota-select-parent{
  width: 58%;
}
/*.nav-pills .nav-link{
  width: 5em;
  height: 5em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}*/

.nav-link .fas{
  font-size: 2em;
}
#noborder{
  border: none;
}
.detail{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 12px 0;
}
.detail .input-box {
  margin-bottom: 15px;
  width: calc(100% / 2 - 20px);
}
.detail .input-2-box {
  margin-bottom: 15px;
  width: 50%;
  /*display: inline;*/
}
.detail .input-3-box {
    margin-bottom: 15px;
    width: calc(100% / 3 - 20px);
}
.detail .input-4-box {
  margin-bottom: 15px;
  width: calc(100% / 4 - 20px);
}
.detail .input-5-box {
  margin-bottom: 15px;
  width: calc(100% / 5 - 20px);
}
.detail .input-box .input-box-span {
    display: block;
    font-weight: 600;
    /*margin-bottom: 5px;*/
    color: #222;
    /*font-size: 1.3em;*/
}
.detail .input-4-box .input-box-span {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #222;
    font-size: 1em;
}
.detail .input-3-box .input-box-span {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #222;
    font-size: 1.2em;
}
.detail .input-box input,.detail .input-box select, .detail .input-4-box input, 
.detail .input-4-box select,
.detail .input-2-box select,
.detail .input-2-box input ,
.detail .input-3-box select,
.detail .input-3-box input {
    height: 45px;
    width: 100%;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid #ccc;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}
.dropzone{
  min-height: 300px;
}
.dropzone .dz-message {
    text-align: center;
    margin: 4em 0;
}
/*.select2-container--default .select2-selection--single {
    height: 45px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 45px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}*/
.detail .input-box input:focus,
.detail .input-box textarea:focus,
.detail .input-box select:focus,
.detail .input-2-box input:focus,
.detail .input-4-box input:focus,
.detail .input-4-box select:focus,
.detail .input-3-box input:focus,
.detail .input-3-box select:focus,
.select2-container--default .select2-selection--single:focus{
  border-color: #222;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple:focus{
border-top-color: #222;
border-bottom-width: 1px ;
border-right-color: #222;
border-left-color: #222;
}
.select2-container--default .select2-selection--single,  
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
}
.select2-dropdown{
  border-color: #222;
  border-bottom-width: 2px;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    padding-left: 15px;
    border: 1px solid #ccc;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}
.input-group .select2-container--default .select2-selection--single{
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
.input-group{
  flex-wrap: nowrap;
}
[data-step='1'] .input-group button{
  height: 35px;
}
.input-group button{
  display: flex;
  align-items: center;
  background-color: #222 !important;
  color: #fff;
  border: 1px solid #222;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group button:hover{
  color: white;
  background-color: #0a0a0a !important;
}
.button-next1{
  height: 45px;
  margin: 35px 0;
}
 .button-next1 input, .button-next1 a {
    height: 100%;
    width: 100%;
    border-radius: 5px;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #222;
}
.button-next1 input:hover,
.button-next1 a: hover{
  background-color: #0a0a0a;
}
.button-next2{
  height: 45px;
  margin: 35px 0;
  display: flex;
  justify-content: space-around;
}
 .button-next2 input,
 .button-next2 a{
    height: 100%;
    width: calc(100% / 2 - 20px);
    border-radius: 5px;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #222;
}
.button-next2 input:hover.
.button-next2 a:hover{
  background-color: #0a0a0a;
}
.input-box2{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}
#kota-select-parent .btn{
border-bottom-width: 2px;
border-radius: 5px;
border: 1px solid #222;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: #222;
color: #fff;
}
#alamat-1 .input-group .kiri-botak,
.tambah-form-group .kiri-botak{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.input-box #kecamatan select,
#kecamatan select{
  width: auto;
}
.input-box .input-group textarea{
  width: 100%;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 15px;
  border: 1px solid #ccc;
  border-bottom-width: 2px;
  transition: all 0.3s ease;
}
input:disabled{
  background-color: #e9ecef;
}
#calculator, #calculator2, .border-kiri{
  border-radius: 5px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
#spek-1 .detail .input-box .xbotak{
  border-radius: 0;
}
#harga-1 .detail .input-box .xbotak,
.tambah-card-detail .tambah-form-group .xbotak{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
#harga-1 .detail .input-box .xbotak2,
.tambah-card-detail .tambah-form-group .xbotak2{
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.input-box .input-group .btn-check,
.tambah-form-group .btn-check {
  background-color: #6c757d !important;
  border-color: #6c757d;
}
.input-box .input-group .btn-check:hover{
  background-color: #adb5bd !important;
  border-color: #adb5bd;
}
/*.detail .input-2-box select{
  padding-left: 0;
}*/
.pt-32{
  padding-top: 32px;
}
#spek-1 #satuan_tanah_panjang, #spek-1 #satuan_bangunan_panjang {
  border: none;
}
#spek-1.detail .input-2-box {
    margin-bottom: 15px;
    width: 35%;
}
#spek-1 .w-10{
  width: 10%;
}
#spek-1 .w-15,
.w-15{
  width: 15%;
}
#spek-1 .w-20,
.w-20{
  width: 20%;
}
#spek-1 .w-30{
  width: 30%;
}
.w-30{
  width: 30%;
}
.w-35{
  width: 35%;
}
.w-40{
  width: 30%;
}
.w-55{
  width: 55%;
}
.w-60{
  width: 60%;
}
.w-70{
  width: 70%;
}
#spek-1 .w-60{
  width: 60%;
}
#spek-1 .w-80,
.w-80{
  width: 80%;
}
#spek-1 .w-90{
  width: 90%;
}
.select2-container .select2-selection--single .select2-selection__rendered{
  padding-left: 0;
}  
.detail .input-3-box {
    margin-bottom: 15px;
    width: calc(100% / 3 - 20px);
}



.tambah-card{
  background-color: #fff;
  border: 1px solid rgba(var(--b6a,219,219,219),1);
  border-radius: 0.7rem;
  padding: 24px;
  animation: fade 250ms ease-in-out forwards;
}
.tambah-card-detail{
    display: flex;
  flex-wrap: wrap;
  justify-content: space-between;s
}
.tambah-form-group{
  /*display: flex;*/
  /*flex-direction: column;*/
  margin-bottom: 1rem;
  width: calc(100% / 2 - 20px);
}
.tambah-form-group3{
  margin-bottom: 1rem;
  width: calc(100% / 3 - 20px);
}
.tambah-form-group4{
  margin-bottom: 1rem;
  width: calc(100% / 4 - 20px);
}

.tambah-form-group  label,
.tambah-form-group3  label,
.tambah-form-group4  label,
.tambah-card-detail .col222{
  font-weight: 600;
  color: #222;
  margin: 0;
  width: 100%;
}
.tambah-form-group input,
.tambah-form-group select,
.tambah-form-group3 input,
.tambah-form-group3 select,
.tambah-form-group4 input,
.tambah-form-group4 select{
  font-size: 14px;
  width: 100%;
  height: 35px;
  outline: none;
  padding: 0 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  transition: border-color 500ms ease;
}
.tambah-form-group input:focus,
.tambah-form-group select:focus,
.tambah-form-group3 input:focus,
.tambah-form-group3 select:focus,
.tambah-form-group4 input:focus,
.tambah-form-group4 select:focus{
  border-color: #222;
}
.button-next-container{
  display: flex;
  justify-content: center;
}
.button-next-container .btn-next11{
  height: 35px;
/*  width: 100%;
  padding: 0 5px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s ease;*/
  color: white;
  background-color: #222;
  border-radius: 999px;
  padding: 0 16px;
  cursor: pointer;
}
.button-next-container2{
    display: flex;
    justify-content: space-between;
}
.button-next-container2 .btn-next12{
  height: 35px;
/*  width: calc(100% / 2 - 20px);
  padding: 0 15px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;*/
  color: white;
  background-color: #222;
  border-radius: 999px;
  padding: 0 16px;
  cursor: pointer;
}
/*.btn-next11:hover,
..btn-next12:hover{
  background-color: #0a0a0a;
}*/
.select2-container--default .select2-selection--single {
    background-color: #fff;
    outline: none;
    font-size: 14px;
    border-radius: 5px;
    padding-left: 10px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}
.step-title{
  text-align: center;
  color: #222;
}
.tambah-card.active{
  animation: slide 250ms 125ms ease-in-out both;
}
.multi-step-form{
  overflow: hidden;
  position: relative;
}
.hide{
  display: none;
}

@keyframes slide{
  0%{
    transform: translateX(200%);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade{
  0%{
    transform: translateX(0);
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translateX(200%);
  }
}

.progressbar{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 0 2rem 0;
  counter-reset: step;
}
.progressbar::before, .progress{
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  background-color: #dcdcdc;
}
.progress{
  background: linear-gradient(-45deg,var(--primary-color1),var(--primary-color2));
  width: 0%;
  transition: 0.3s ease-in-out;
}
.progress-step{
  width: 35px;
  height: 35px;
  background-color: #dcdcdc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.progress-step::before{
  counter-increment: step;
  content: counter(step);
}
.progress-step::after{
  content: attr(data-title);
  position: absolute;
  top: calc(100% + 0.5rem);
  font-size: 0.80rem;
  color: #666;
}
.progress-step.active{
  background: linear-gradient(-45deg, var(--primary-color1),var(--primary-color2));
  color: #fff;
}



.btn-select {
    background-color: #222;
    color: white !important;
}
input[type='button']{
  transition: ease-in-out;
  width: 100%;
}
/*#include div:last-child input{
  background-color: #222;
  color: #fff;
}*/
#include label{
  font-weight: 600;
    color: #222;
    margin: 0;
    width: 100%;
}
#persen-komisi{
  border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.grats-title{
  font-weight: 500;
}
.grats{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.check-label{
  height: 100px;
  width: 100px;
  display: inline-block;
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-left-color: #5cb85c;
  animation: rotate 1.2s linear infinite;
  margin-bottom: 8px;
}
@keyframes rotate{
  50%{
    border-left-color: #00FF00;
  }
  75%{
    border-left-color: #00FF00;
  }
  100%{
    transform: rotate(360deg);
  }
}
.check-label .checklist{
  display: none;
}
.check-label .checklist:after{
  position: absolute;
  content: "";
  top: 51%;
  left: 19%;
  transform: scaleX(-1) rotate(135deg);
  height: 56px;
  width: 28px;
  border-right: 4px solid #5cb85c;
  border-top: 4px solid #5cb85c;
  transform-origin: left top;
  animation: check-icon 0.8s ease;
}
@keyframes check-icon{
  0%{
    height: 0;
    width: 0;
    opacity: 1;
  }
  20%{
    height: 0;
    width: 28px;
    opacity: 1;
  }
  40%{
    height: 56px;
    width: 28px;
    opacity: 1;
  }
  100%{
    height: 56px;
    width: 28px;
    opacity: 1;
  }
}
.check{
  display: none;
}
.check:checked ~ label .checklist{
  display: block;
}
.check:checked ~ label{
  position: relative;
  animation: none;
  border-color: #00FF00;
  transition: border 0.5s ease-out;
}
.success,.success2{
  background-color: #fff;
  border: 1px solid rgba(var(--b6a,219,219,219),1);
  border-radius: 0.7rem;
  padding: 24px;
}
.success2{
  border: none;
}
#tambahPerumahan{
  top: 0;
}
#tambahPerumahan .modal-dialog-scrollable{
  position: absolute;
  width: 100%;
  bottom: 0;
}
.pac-container{
  z-index: 2147483647;
}
.sukses-title{
  color: #5cb85c;
  margin-bottom: 7px;
}
.back-to-login .btn-link{
  background-color: var(--primary-color1);
    padding: 11px 16px;
    border-radius: 999px;
    color: #fff;
    margin-top: 10px;
    cursor: pointer;
}

.back-to-login .btn-back{
    padding: 11px 16px;
    border-radius: 999px;
    margin-top: 10px;
    border: 1px solid #ebebeb;
}


.surat-exp{
  display: none;
}

.back-to-mylisting{
  display: none;
}
.aktifkan-listing{
  display: none;
  gap: 1rem;
}
.keterangan {
  font-size: 12px;
  flex: 1;
  width: 60%;
}

@media (max-width: 1050px){
  .detail .input-4-box{
    width: calc(100% / 2 - 20px);
  }  
  .detail .input-4-box .input-box-span{
    font-size: 1.3em;
  }
  .tambah-form-group4{
    width: calc(100% / 2 - 20px);
  }
}
@media (max-width:584px){
  #info-1{
    max-width: 100%;
  }
  .detail .input-box, .input-2-box,.detail .input-4-box, .detail .input-3-box, .tambah-form-group, .tambah-form-group4{
    margin-bottom: 15px;
    width: 100%;
  }
  #spek-1 .detail .input-4-box{
    width: calc(100% / 2 - 20px);
  }  
  #spek-1 .detail .mb-0-584{
    margin-bottom: 0;
  }
  #info-1 .detail,
  .tambah-card-detail{
    /*max-height: 536px;*/
    overflow-y: scroll;
  }
  .tambah-form-group3{
    width: 100%;
  }
  #alamat-1 .detail{
    max-height: 400px;
    overflow-y: scroll;
  }
  #spek-1 .detail{
    max-height: 400px;
    overflow-y: scroll;
  }
  .detail::-webkit-scrollbar{
    width: 5px;
  }
  .detail .input-4-box .input-box-span {
    font-size: 1.3em;
  }
  #spek-1 .detail .input-box .w-90{
    width: 80%;
  }
  #spek-1 .detail .input-box .w-10{
    width: 20%;
  }
}
@media (max-width: 944px){
  .detail .input-2-box .input-box-span{
    font-size: 1.2em;
  }
}
@media (max-width: 769px){
  #spek-1 .detail .input-2-box .input-box-span{
    font-size: 1.1em;
  }
/*  #spek-1 .detail .input-3-box select{
    margin-top: 30px;
  }*/
}