.kbkgBasicEstimatorArea {
    display: flex;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
}
.kbkgBasicEstimator {
	padding: 0;
    width: 100%;
    max-width: 400px;
	box-sizing: border-box;
	font-family: Inter, sans-serif !important;
}
.kbkgBasicEstimator button, .kbkgBasicEstimator input, .kbkgBasicEstimator optgroup, 
.kbkgBasicEstimator select, .kbkgBasicEstimator textarea {
    font-size: 13.3333px;
    line-height: 15px;    
}
.kbkgBasicEstimator .basicArea {
    padding: 4px;
    width: 99%;
	margin-bottom: 0.75rem;
}
.kbkgBasicEstimator .areaHolder {
    width: 100%;
}
.kbkgBasicEstimator .labelArea {
    font-weight: 600;
	color: #284074;
	font-size: 16px;
	margin-bottom: 5px;
}
.kbkgBasicEstimator .textField {
    border-radius: 6px;
    width: 100%;
    height: 41px;
    padding: 0.75rem 1.25rem;
    border: 1px solid #d1cfcf;
    outline: none;
}
.kbkgBasicEstimator .dateField {
    border-radius: 6px;
    width: 100%;
    height: 41px;
    padding: 0.75rem 1.25rem;
    border: 1px solid #d1cfcf;
    outline: none;
}
.kbkgBasicEstimator .selectorField {
    border-radius: 1px;
    width: 100%;
    height: 41px;
    padding: 0.75rem 1.25rem;
    border: 1px solid #d1cfcf;
    outline: none;
}
.kbkgBasicEstimator .validationMessage {
	color: red;
}
.kbkgBasicEstimator .shortTermRentalValueText {
	display: inline-block;
	font-weight: 600;
    color: #284074;
    font-size: 16px;
}
.kbkgBasicEstimator .left-arrow {
  appearance: none; /* Removes default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml;utf8,<svg stroke='%23d7d5d5' fill='none' stroke-width='2' width='22' height='22' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  cursor: pointer;
}
.kbkgBasicEstimator .flex {
	display: flex;
    gap: 13px;
    margin-top: 15px;
}
.kbkgBasicEstimator .slideon input:checked~.slideon-slider {
	background-color: #284074;
}
.kbkgBasicEstimator .price-label {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between text and icon */
}
.kbkgBasicEstimator .info-icon {
  width: 12px;
  height: 12px;
  border: 2px solid #000;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  cursor: pointer;
}
.kbkgBasicEstimator .info-icon::before {
  content: "i"; /* the letter inside the circle */
  font-family: Inter, sans-serif !important;
  font-weight: bold;
  font-size: 10px;
  line-height: 1;
  position: relative;
  top: 1.3px;
}
.kbkgBasicEstimator .estimate-btn {
	background-color: #2a7be4;       /* bright blue */
	color: #ffffff;                  /* white text */
    text-decoration: none !important;
	font-family: "Inter", Sans-serif !important;
    font-size: 16px;
    font-weight: bold;
    text-transform: capitalize;
	border: none;
	border-radius: 8px;              /* rounded corners */
	/* padding: 12px 16px; */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;                        /* space between text and arrow */
	transition: background-color 0.2s ease;
	height: 46px;
}
.kbkgBasicEstimator .estimate-btn-text {
	font-weight: 700;
	font-size: 16px;
	font-family: Inter, sans-serif !important;
}
.kbkgBasicEstimator .estimate-btn:hover {
	background-color: #284074;       /* bright blue */
	color: #ffffff; 
}
.kbkgBasicEstimator .arrow {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  background: url("data:image/svg+xml;utf8,<svg stroke='%23ffffff' fill='none' stroke-width='3' width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='8 5 16 12 8 19'/></svg>") no-repeat right 12px center;
  /* background-color: #2a7be4;
  color: #ffffff; */
  border: none;
  /* border-radius: 6px; */
  padding: 12px 16px;
  font-size: 16px;
  /* cursor: pointer; */
}
@media screen and (min-width: 1000px) and (max-width: 1110px) {
   .kbkgBasicEstimatorArea {
	flex-wrap: nowrap;
   }
}

@media screen and (min-width: 1111px) and (max-width: 1130px) {
  .kbkgBasicEstimator {
    flex: 1 1 0%;
  }
}

@media screen and (min-width: 1131px) and (max-width: 1200px) {
  .kbkgBasicEstimator {
    flex: 1 1 0%;
  }
}


@media screen and (min-width: 901px) and (max-width: 999px) {
  .kbkgBasicEstimatorArea {
	flex-wrap: nowrap;
   }
}

@media screen and (min-width: 800px) and (max-width: 900px) {
  	.kbkgBasicEstimatorArea {
	  flex-wrap: nowrap;
   	}
}

@media screen and (min-width: 700px) and (max-width: 800px) {
  	.kbkgBasicEstimatorArea {
		flex-direction: column;
		align-items: center;
		gap: 0; /* optional spacing between stacked items */
  	}
}

@media screen and (min-width: 100px) and (max-width: 699px) {
  	.kbkgBasicEstimatorArea {
		flex-direction: column;
		align-items: center;
		gap: 0; /* optional spacing between stacked items */
  	}
    .kbkgBasicEstimator .textField {
		width: 100%;
	}
}