.panels{
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 300px;
}
 
.panel{
  width: 50%;
  border: 2px solid grey;
  border-left-width: 0;
  padding: 20px;
}

.panel:first-child{
  border-left-width: 2px;
  border-radius: 3px 0px 0px 3px;
}

.panel:last-child{
  border-right-width: 2px;
  border-radius: 0px 3px 3px 0px;
}

p{
  margin: 0;
  font-size: 18px;
}

.btn{
  padding: 5px;
  font-size: 16px;
  margin-bottom: 10px;
}

.table{
  margin:10px;
  border: 1px solid grey;
  border-radius: 3px;
}

.table-row{
  display: grid;
  grid-template-columns: .75fr .5fr .5fr .5fr 1fr;
  border-top: 1px solid grey;
}

.table-row:first-child{
  border-top: none;
}

.table-box{
  border-left: 1px solid grey;
  padding:5px;
}

.table-box:first-child{
  border-left: none;
}

#map {
  height: 500px;
  width: 100%;
  margin-top:10px;
}

#city-mod .inputs input,#city-mod .inputs button{
  width: 200px;
  height:40px;
  margin: 0px 10px;
  border: solid 2px var( --e-global-color-primary );
  color: var( --e-global-color-text );
  font-size:16px !important;
  font-weight: 500 !important;
}

#city-mod .inputs label{
  font-size: 18px;
  font-family: "Lato";
  font-weight: 600;
  color: var( --e-global-color-text );
}

#city-mod button:hover, #city-mod button:focus{
  background-color: var( --e-global-color-primary ) !important;
  color:white !important;
}

#city-mod .inputs{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

#city-mod .inputs div{

}

h2 span{
  display: block;
}

#init_zipcode{
  width:100px !important;
  border: solid 2px var( --e-global-color-primary );
  padding:5px 10px;
  font-size: 18px;
}

#init_radius_input{
  width:100px !important;
  border: solid 2px var( --e-global-color-primary );
  padding:5px 10px;
  font-size: 18px;
}

#init_radius_slider{
  width:500px;
  display: inline-block;
  margin-left: 10px;
}

#init_city_mod_submit .elementor-button{
  cursor:pointer !important;
}

#city-mod-container, #detail-sec, #price-sec ,#city_table_cont{
  display: none;
}

#sign_up_modal_cont{
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.631);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#sign_up_modal{
  width: 500px;
  height: min-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  background-color: white;
  padding: 30px 20px;
  border-radius: 10px;
  border: solid 2px var( --e-global-color-primary );
}

#modal_close_cont{
  position: absolute;
  top: 63px;
  right: 91px;
  width: 100%;
  height: min-content;
  display: flex;
  justify-content: end;

}

#modal_close{
  cursor: pointer;
  color: white;
  width: min-content;
  height: min-content;
}

#modal_close svg{
  width: 30px;
  fill:white;
  max-width: 30px;
}

#sign_up_modal h3{
text-align: center;
}

#sign_up_modal .sign_up_field.field_100{
width: 100%;
}

#sign_up_modal .sign_up_field.field_50{
  width: calc(50% - 20px);
}

.sign_up_field{
margin: 5px 10px !important;
}

#sign_up_form{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
}


#sign_up_form .btn{
  width: 200px;
  height:40px;
  margin: 0px 10px;
  border: solid 2px var( --e-global-color-primary );
  color: var( --e-global-color-text );
  font-size:16px !important;
  font-weight: 500 !important;
}

#sign_up_form .btn{
  width: 200px;
  height:40px;
  margin: 10px 10px;
  border: solid 2px var( --e-global-color-primary );
  color: var( --e-global-color-text );
  font-size:16px !important;
  font-weight: 500 !important;
}
#sign_up_form .btn:hover{ 
  background-color: var( --e-global-color-primary ) !important;
  color:white !important;
}

#modal_msg_box {
  padding: 10px;
  background-color: lightcoral;
  color:rgb(71, 71, 71);
  border-radius: 5px;
  margin: 5px;
  width: 100%;
  display: block;
}

#modal_msg_box .modal_msg_label{
  float: left;
  font-weight: bold;
  font-size: 14px;
  font-style: italic;
  margin-right: 5px;
}

#modal_msg_box .modal_msg_content{
  font-size: 14px;
  color:rgb(71, 71, 71);
  margin-bottom: 0px;
}

#modal_msg_box .modal_msg_link{
  text-decoration: underline;
  color: rgb(71, 71, 71);
}

.city_check{
  height: 26px;
  width: 24px;
  margin: 0px auto;
}

#services{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin:20px 0px;
}

#services .service_cont{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding:5px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  min-width: 300px;
  margin: 5px 10px;
  flex: 1;
}

#services .service_cont .service_title{
  font-size: 18px;
  font-weight: 600;
  font-family: 'Roboto';
  width: max-content;
  margin: 0px;
}

