:root{
  --main:rgb(14, 163, 238);
  --sub_main:rgb(44, 176, 242);
  --dark:rgb(107, 105, 105);
  --light:rgb(103, 197, 248);
  --light-dark:#aaa;
}
body{
font-family: "Montserrat",sans-serif;
min-height: 100vh!important;
display: flex;
flex-direction: column;
overflow-x: hidden!important;
}
/*logo and navbar*/
.logo{
  margin-left: 25px!important;
}
.logo>:first-child{
color:var(--main);
font-weight: bold;
text-shadow: 1px 1px #ddd;
font-size: 1.5rem;
}
.logo>:nth-child(2){
  color:var(--dark);
  font-size: 1.4rem;
  font-weight: 800;
}
.logo>:nth-child(3){
  color:var(--main);
  font-weight: bold;
  text-shadow: 1px 1px #ddd;
  font-size: 1.5rem;
}
.navbar-menu{
box-shadow: 2px 1px 1px #828282;
}
.navbar-bts{
cursor: pointer;
}
/*search*/
.search{
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
margin-top: 10px;
margin-bottom: 50px;
display: flex;
flex-direction: column;
}
.search>form>.searchbar{
display: flex;
flex-direction: row;
width: 100%;
gap:5px;
}
.search>form>.searchbar>input{
width: 100%;
border-radius: 8px;
text-indent: 10px;
border: 0.5px solid #ccc;

}
.search>form>.searchbar>button{
  background: var(--main);
  padding: 10px;
  cursor: pointer;
  border-radius: 8px;
  padding-inline: 20px;
  color:#fff;
  border: none;
}
.search>form>.searchbar>button:hover{
  background: var(--sub_main);
  border: none;
}
.search>form>.filters{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 2px;
margin-top:10px;
gap:10px;

}
.search>form>.filters>span{
  display: flex;
  flex-direction: column;
}
.search>form>.filters>span>label{
  color:var(--main);
  word-wrap: break-word;
  font-weight: 500;
}
.search>form>.filters>span>select{
  border-radius: 4px;
  background: #eee;
  min-height: 30px;
  border:0.5px solid #ccc ;
  cursor: pointer
}
.search>form>.filters>span>input{
  border:0.5px solid #ccc ;
  cursor: pointer;
  border-radius: 4px;
  background: #eee;
  min-height: 30px;
  min-width: 50px!important;
  width: 100px;
}
/*content wrapper*/
.content_wrapper{
  width: 100%!important;
  flex:1 0 auto;
  min-height: calc(100vh - 100px);
  
}
.home-view{
  width: 100%;
  height: 450px;
  min-height: 450px;
  max-height: 500px;
}
/*footer*/
.ft{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
background:#eee;
flex-shrink: 0;
height: 100px;
position: relative;
margin:auto;

}
.ft-top{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap:20px;
margin-bottom: 10px;
}
.ft-top>span>a{
color:var(--dark);
font-size: 14px;
}
.ft-top>span>a:hover{
  text-decoration: none;
  color:var(--light-dark);
}

.ft-bottom{
  color: var(--light-dark);
  font-size: 13px;
  text-align: center;
}
.ft-list{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  gap:10px;
}
/*form*/
.reg_frm{
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: 800px;
  padding: 50px;
  
}

.reg_frm>div{
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-top: 10px;
}
.reg_frm>div>label{
  font-weight: bold;

}
.reg_frm>div>select{
  border-radius: 4px;
  border: 0.5px solid #ddd;
  background: #eee;
  cursor: pointer;
  padding-inline: 10px;
}
.reg_frm>div>input{
  border-radius: 4px;
  border: 0.5px solid #ddd;
  background: #eee;
  cursor: pointer;
  padding-inline: 10px;
}
.reg_frm>div>label{
  font-weight: bold;
  color: var(--dark);
}
.reg_frm>button:hover{
  background: var(--sub_main);
}
.reg_frm>button{
  margin-top: 10px;
  font-weight: bold;
  background: var(--main);
  border-radius: 4px;
  border: 0.5px solid #ddd;
  color: #fff;
  padding-block: 10px;
  cursor: pointer;
}
.reg_header>label{
  font-weight: bold;
  font-size: 1rem;
  color: var(--main)!important;
}
.reg_frm>.checkbox{
justify-content: left;
text-align: left!important;
 
}.reg_frm>.checkbox>input{
  width:fit-content;
}
/*listing*/
.listing{
display: flex;
text-align: center;
flex-direction: column;
padding-block: 20px;
}
.listing>span{
  width: 100%;
  text-align: center;
  color:var(--main);
  
}
.property_list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap:10px;
justify-content: left;
}

.property{
border: 0.5px solid #ccc;
width: fit-content;
min-width:250px;
width: 350px;
max-width: 500px;
padding: 10px;
border-radius: 4px;
}
.prop_icon{
  width:20px!important;
  height: 20px!important;
  color:var(--main)!important;
  fill:var(--main)!important;
}
.property>div{
  width:100%;
  height: 150px;
  overflow: hidden;
}
.property>span>span{
  display: flex;
  justify-content: left;
  
}
.property>span>span>.detail{
 display: inline-flex;
 padding-block: 10px;
 margin-left: 10px;
 gap:5px;
 word-wrap: normal;
 word-break: keep-all;
}
.property>div>img{
  width:100%;
  height: 100%;
}
.login-form{
  display: flex;
  flex-direction: column;
  gap:25px;
  padding: 50px;
  min-width: 300px;
  width: 400px;
  max-width: 500px;
  margin-top: 50px;
  background: #cce6f3;
}
.login-form>input{

cursor: pointer;
}
.login-wrapper{
  display: flex;
  flex-direction: row;

  justify-content: center;
}
.admin-wrapper{
  flex-direction: row;
  flex-wrap: nowrap;
  display:flex;
  margin-top:10px;
  gap:10px;
  min-height: 500px;
 
  padding: 10px;
}
.admin-menu{
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap:10px;
  border: 1px solid #eee;
  min-height: 100%!important;
  
  flex-grow: 1;
  margin-top: 10px;

  border-radius: 4px;
}
.admin-menu>a>*:hover{
  background: #78bef0;
  text-decoration:  none!important;
}
.admin-menu>a:hover{
  text-decoration:  none!important;
}
.admin-menu>a>*{
  border-radius: 4px;
  border: 1px solid #ccc;
  padding-block:3px;
  padding-inline: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-decoration: none;
}
.admin-content{
padding: 10px;

margin-top: 10px;
border: 1px solid #eee;
width: 100%;
min-height: 100%;
}

/*icons*/
.icon{
  width:18px;
  height: 18px;
}
.form-msg {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: 500px;
  padding:15px;
  border-radius: 4px;
  margin-top: 10px;
  border: 1px solid #eee;
}
.form-msg  *{
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
} 
.btn-center{
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center!important;
 
}
/*thumbnail*/
.thumbnail{
  min-width: 300px;
  max-width: 300px;
  height: fit-content;
  border-radius: 4px;
  padding: 4px;
  background: #9abfef;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.thumbnail span img{
  width: 100%;
  height: auto;
}
.thumbnail span {
  width: 100%;

 
}
.thumbnail > *{
  max-width: 300px;
}
.temp-thumb{
  width: 100%;
  height: 200px;
  background: #7c94c0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.icon2{
  width: 36px;
  height: 36px;
}
.temp-thumb>span{
  max-width: 300px;
  overflow-x: hidden;
  flex-direction: row;
  flex-wrap: wrap;
  
}
.temp-thumb-text{

  word-break:keep-all;
}
.img-list{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap:10px; 
}
.img-uploaded{
  flex-direction: row!important;
  flex-wrap: wrap!important;
}
.img-btns{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap:5px;
}
.view-btn{
  margin-left: -50px;
}
.view-btn-container{
 position: absolute;
  z-index:200;
 
  text-align: left;

  margin: 0px;
}
.book-box{
display: flex;
flex-direction: row;
flex-wrap: wrap;

margin-top: 25px;
height: fit-content;
gap:10px;
padding: 10px;
margin-bottom: 5px;
}
.prop-dt{
height: 100%;
max-width: 300px;
padding: 5px;
}
.prop-dt span{
  width: 100%;
}
.prop-dt div{
  width: 100%;
  min-width: 200px;
  max-height: 300px;
  overflow: hidden;
  padding: 5px;
  border-radius: 4px;
}
.prop-dt div img{
  width: 100%;
  height: auto;
}
.book-form{
  height: 100%;
  
  padding: 5px;
}
.book-form form{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  gap:5px;
  padding:5px;
  height: 100%;
}
.book-form form >*{
  width: 100%;
}
.book-form form>*>textarea{
  width: 100%;
  overflow-y: auto;
  max-height: 100px;
}
.book-form form>*>input {
  width: 100%;
}
.booking
{
  min-height: 100%;
  overflow-y: scroll;
}
.book-info{
  font-size: 1.0rem;
}
.popup{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 2;
  text-align: center;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.popup .popup-dialog{
  background: #eee;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  max-width: 800px;
  width: 500px;
  height: 500px;
  min-width: 300px;
  min-height: 500px;
  max-height: 600px;
  overflow-y: auto;
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.popup .popup-dialog >*{
  width: 100%;
}
.popup .popup-dialog .form-group{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.popup .popup-dialog .form-group >*{
  width: 100%;
  text-align: left;
  padding: 2px;
  padding-inline: 5px;
}
.popup-text{
  width: 100%;
  min-height: 150px;
  background: #fff;
}
.popup-active{
  display: flex!important;
}
.border-custom{
  border: 1px solid #ddd!important;
}