:root {
  --primary-color: #c16b00;
  --secondary-color: #fc851b;
  --third-color: #fefbf6;
  --border-color: #f0e8dd;
  --font-color:#666;
  --title-color: #000;
  --font-size: 14px;
  --font-size-small: 12px;
  --icon-width: 28px;
  --icon-height: 28px;
  --icon-size: 11px;
  --title-size-h1: 18px;
  --title-size-h2: 16px;
  --font-family: 'Poppins',sans-serif;
  --a-color: #40a1ef;
  --bold: 600px;
  --normal: 400px;
  --line-height: 18px;

  /* color */
  --white:#fff;

}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,
video {font-size: 100%; font: inherit; padding: 0; border: 0; margin: 0; vertical-align: baseline;}
html{ overflow-x: hidden;}
body {font-family: var(--font-family); line-height: 25px; padding: 0; margin: 0; background: #0c223c; font-size: var(--font-size); color: var(--title-color); overflow-x: hidden;}
* {margin: 0; padding: 0;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ""; content: none;}
table {border-collapse: collapse; border-spacing: 0; font-family: var(--font-family);}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,section { display: block;}
p {margin: 0 0 0px; padding: 0; font-family: var(--font-family); color: var(--font-color); font-size: var(--font-size); line-height: 1;}
a {border: none; color: var(--a-color); outline: none; text-decoration: none; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;
  -ms-transition: all 0.5s; font-family: var(--font-family);}
a:hover, a:focus {text-decoration: none !important;}
img {border: none; outline: none; max-width: 100%; height: auto;}
ul {list-style: none;}
span, address, select, option, label, li, small, div, table {font-family: var(--font-family);}
input, textarea {border: none; outline: none; font-family: var(--font-family);}
a:hover, a:focus, a:active, a:visited {text-decoration: none;}
select:hover, select:focus, select:active {border: none; outline: none;}
h1, h2, h3, h4, h5, h6 {font-family: var(--font-family); font-weight: var(--bold); color: var(--title-color);}
strong {font-weight: var(--bold);}
::-webkit-input-placeholder {color: var(--title-color);}
:-ms-input-placeholder {color: var(--title-color);}
::placeholder {color: var(--title-color);}
button:hover, button:focus, button:active, button:visited { background-color: var(--third-color);}
#root p{ line-height: 23px;}
#root span{ line-height: 23px;}
#root p span{ line-height: 23px;}
.wrapper {margin: 0px auto; width: 100%; height: auto;  background-size: 100% 12.4%; padding: 0px;}
.wrapper_margin {margin: 10px; position: relative; overflow: hidden;}
.page-padding {padding: 0 12px;}
.small-font {font-size: var(--font-size-small);}
.marginTopandBottom {margin-top:5px;margin-bottom: 20px;}

/* ----------button------------ */
button {background: none; border: none;}
button:hover,
button:focus,
button:active,
button:visited {outline: none; border: none; }
.btn-primary:hover, .btn-primary:focus{ border: none !important; box-shadow: none !important;}
button.common_mainbtn {background-color: var(--secondary-color) !important; padding: 10px; border: none; text-align: center; color: var(--white); font-weight: var(--bold); 
  text-transform: uppercase; border-radius: 5px;}
button.common_mainbtn:hover, button.common_mainbtn:focus{background-color: var(--secondary-color) !important;}

/*---------------sliding_part-------------*/
.bottom_sliding_sec {position: fixed; bottom: 0px; width: 100%; left: 0; background: rgba(0,0,0,0.7); padding: 10px; z-index: 35;}
.yiju_logosec { display: flex;}
.yiju_logosec p {color: var(--white); padding: 0 0 0 0; position: relative; top: 10px; left: 12px; font-size: var(--title-size-h1);}
.detailapp_btn .common_mainbtn {font-size: var(--font-size); border-radius: 5px; padding: 7px 10px; margin: 6px 0px 0 0;}

/*-------------login_required---------------*/
.loginrequired_sec {background: url(/css/images/login_reqimg.png) center center no-repeat; background-size: cover; width: 100%; height: 100%; margin: 0 0 -10px 0; padding: 51px 10px;
  text-align: center; position: relative; border-radius: 5px;}
.loginrequired_sec p {color: var(--white); font-size: var(--font-size); margin: 0 0 30px 0; padding: 0 10px;}
.loginrequired_sec.common_mainbtn{width: 80%;}

/* ------------page------------ */
.section_margin {margin-bottom: 20px;}
.block{ display: block;}
.main_headingsec {padding-bottom: 15px; position: relative;}
.main_headingsec h1 { font-size: var(--title-size-h1); font-weight: var(--bold); background: url(/css/images/heading_bg.png) left bottom no-repeat; margin: 0 0 0px 0; padding: 0 0 8px 0;}
.main_headingsec p {color: var(--font-color); font-size: var(--font-size-small); line-height: 18px !important; margin: 0; padding: 0;}
.main_headingsec a {border-radius: 25px; background: #fff; border: 1px solid #cecece; padding: 0px 7px; color: var(--font-color); position: absolute; top: 0; right: 0; font-size: var(--font-size);
  line-height: 22px;}
.newsimg_sec {float: left; width: 150px; margin: 0 10px 0 0; border-right: 3px solid #fff; overflow: hidden;}
.newsdetail_sec {background: #fff3e8; border-radius: 0px; width: 280px; overflow: hidden; margin-right: 20px; height: 110px; border: 1px solid #ffead7; }
.newsimg_sec {float: left; width: 150px; margin: 0 10px 0 0; border-right: 3px solid #fff; overflow: hidden; height: 110px;}
.newsimg_sec img{ height: inherit; width: 100%;}
.news_contsec h2 {color: var(--title-color); font-weight: var(--bold); font-size: var(--font-size); padding: 5px 0 0;}
.news_contsec p {line-height: 16px; font-size: var(--font-size); height: 95px; overflow: hidden; text-overflow: ellipsis; width: 105px;}


.inner_listingsec {background: var(--third-color); border-radius: 0px; width: 150px; padding-bottom: 10px; margin-right: 8px; border: 1px solid var(--border-color); overflow: hidden;}
.listing_imgsec {height: 110px; overflow: hidden; margin-bottom: 10px;}
.listing_imgsec img {width: 100%; height: 100%;}
div#listing_list { margin-top: 15px;} 
.listing_detsec {margin: 0 10px; position: relative;}
.listing_detsec h2 {font-size: var(--title-size-h2); font-weight: var(--bold); margin-bottom: 0px; color: var(--primary-color);}
.listing_detsec span {font-size: var(--font-size-small); display: block; padding: 5px 0 0 0; color: var(--font-color); line-height: 16px !important; width: 98%; text-overflow: ellipsis; overflow: hidden;
  white-space: inherit;}
.listing_detsec span i {margin: 0 5px 0 0;font-size: var(--icon-size);}
.listing_detsec ul {display: flex; justify-content: space-between; margin-top: 8px; margin-bottom: 5px;}
.listing_detsec ul li {display: flex;align-items: center;}
.listing_detsec ul li p {color: var(--font-color); font-size: var(--font-size-small); margin: 0; line-height: 15px !important;}
.listing_detsec ul li i {margin-right: 4px; font-size: var(--icon-size); color: var(--font-color); margin-top: 0px;}
.listing_detsec span.flex-container {display:flex !important;align-items: baseline;}
.listingsec-btm {margin-top: 5px;border-top: 1px solid var(--border-color);padding-top: 8px;}
.listingsec-btm div:last-child {right:0;position:absolute;}
.listingsec-btm p {margin: 0;font-size: var(--font-size-small);line-height: 1.3em !important;}
.property_status {position: absolute; top: -5px; right: 0;}
.property_status button {border-radius: 5px; background: var(--secondary-color); padding: 0 8px; font-size: 10px; color: var(--white); font-weight: var(--normal); text-transform: uppercase;}


/* -----------walk score----------- */
#ws-footer{ display: none;}

/*--------------slider------------------*/
.variable-width { position: relative;}
.variable-width:after {position: absolute; right: 0; top: 0; height: 100%; width: 0%; content: ""; background: rgba(255, 255, 255, 0.6);}

/* Style the tab */
.tab {overflow: hidden; border-bottom: 1px solid #eeeeee !important; flex-wrap: nowrap !important;}
/* Style the buttons that are used to open the tab content */
.tab button {background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 10px 13px; transition: 0.3s;
  font-size: var(--font-size); color: var(--font-color); font-weight: var(--bold);}
.tab button:hover { background-color: var(--font-color) !important; border-radius: 7px 7px 0px 0px;}
.tab button.active {background-color: var(--secondary-color) !important; font-weight: var(--bold); color: var(--white) !important; border-radius: 7px 7px 0px 0px;}
.tabcontent {display: none; padding: 6px 12px; border: 1px solid #eeeeee; border-top: none;}
.panel {padding: 0 5px; background-color: var(--white); max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; margin: 5px 0 0 0;}

/*--------------detail_page---------------*/
.detcontact_fieldsec input, .detcontact_fieldsec select, .detcontact_fieldsec textarea, .detcontact_fieldsec p {border: 1px solid #ffead1; display: block; padding: 8px; width: 100%; border-radius: 5px; height: 40px; margin: 0 0 8px 0px; box-sizing: border-box; font-size: var(--font-size); padding: 8px 8px 8px 10px; background-color: var(--third-color);}
.detcontact_fieldsec p{padding: 8px 8px 8px 30px;}
.detail_contactsec  .main_headingsec p {color: var(--title-color); font-size: var(--font-size); line-height: 18px !important; margin: 16px 0 0 0; font-weight: var(--bold);}
.detail_contactsec .tab-content .tabcontent {border: none; padding: 0;}
.condodetcont_sec input, .condodetcont_sec textarea{padding: 8px 8px 8px 30px !important; }

.inputsel_iconsec span#title {font-weight: var(--bold); font-size: var(--title-size-h2); color: var(--secondary-color);}
.inputsel_iconsec span#brief {font-size: var(--font-size);}
#qrImageBlock, #hdImageBlock{ margin-bottom: 10px;}
.inputsel_iconsec{ position: relative;}
.inputsel_iconsec i {position: absolute; top: 13px; left: 7px; font-size: var(--font-size); color: var(--primary-color); }

.developer_compsec, .developer_compnamesec, .occupancy_datesec {color: var(--title-color); padding: 8px 0 0px; font-size: var(--font-size-small); font-weight: var(--bold); line-height: 14px;}
.developer_compsec strong, .developer_compnamesec strong, .occupancy_datesec strong{color: var(--primary-color);}

div#newsDetail { margin: 10px;}

button.btncont_field {background: var(--secondary-color); width: 100%; padding: 10px; border: none; text-align: center; color: var(--white); font-weight: var(--bold); text-transform: uppercase; border-radius: 5px;}
.detcontact_fieldsec button.btncont_field {background: var(--secondary-color); width: 100%; padding: 10px; border: none; text-align: center; color: var(--white); font-weight: var(--bold); text-transform: uppercase; border-radius: 5px;}
.condodetcont_sec input, .condodetcont_sec textarea{padding: 8px 8px 8px 30px !important; }
.detcontact_fieldsec textarea {height: 80px;}
.detcontact_fieldsec button.btn-primary {background-color: var(--secondary-color) !important; width: 100%; padding: 10px; border: none; text-align: center; color: var(--white); font-weight: var(--bold); 
  text-transform: uppercase; border-radius: 5px;}
.detcontact_fieldsec button.btn-primary:hover, .detcontact_fieldsec button.btn-primary:focus{background-color: var(--secondary-color) !important;}

.agent_detsec {background: #F2F2F2; border-radius: 6px; padding: 15px; position: relative; border: 1px solid #dedede; margin: 20px 0 50px 0;}
.agentfull_detsec { padding: 10px 0 0 0;}
.agentfull_detsec ul {display: flex; flex-wrap: nowrap;}
.agentfull_detsec ul li {/* width: 50%; */ margin: 0 5px 0 0px; background-color: var(--white);}
.agentfull_detsec ul li a {border: 1px solid var(--secondary-color); display: flex; color: var(--white); border-radius: 4px; padding: 2px 6px;}
.agentfull_detsec ul li i {color: var(--secondary-color); padding: 0; border-radius: 3px; float: left; margin: 6px 7px 0 0; font-size: var(--font-size);}
.agentfull_detsec ul li p {margin: 0; padding: 0; line-height: 23px !important; font-size: var(--font-size); color: var(--title-color); text-transform: uppercase; font-weight: var(--bold);}
.agentfull_detsec ul li strong {font-size: var(--font-size); display: block; width: 100%; color: var(--title-color); font-weight: var(--bold);}

.outer_agentdet_sec .main_agentpic_sec{ float: none;}
.mainqrcode_sec {text-align: right; margin: 0; position: absolute; top: 15px; right: 10px;}
.mainqrcode_sec img {width: 140px;}
.mainqrcode_sec h2 {font-size: var(--font-size); font-weight: var(--bold); color: var(--title-color); margin: 0 0px 6px 0px;}
.main_agentpic_sec {margin: 0; width: 90px; overflow: hidden; border-radius: 50%; height: 90px; border: 2px solid var(--white); float: right;}
.main_agentdetsec h2 {font-size: var(--title-size-h2); font-weight: var(--bold); margin-bottom: 6px; color: var(--title-color);}
.main_agentdetsec h3 {font-size: var(--font-size); background: var(--secondary-color); display: initial; padding: 4px 7px; color: var(--white);}
.main_agentdetsec p strong {color: var(--title-color); font-weight: var(--bold);}
.main_agentdetsec p {font-size: var(--font-size); line-height: 18px !important; padding: 12px 0 0 0; color: var(--font-color); margin: 0;}
.agent_description_mainsec { padding: 0; width: 100%;}
.agent_description_mainsec p {font-size: var(--font-size); line-height: 25px !important; color: var(--font-color); margin: 0;}
.agent_description_mainsec h5 {color: var(--title-color); font-size: var(--font-size); margin: 10px 0 10px 0px; font-weight: var(--bold);}
.main_agentdetsec {width: 65%;}

.main_agentdetsec h3 span {color: var(--font-color); }
.main_agentdetsec ul {display: flex;}
.main_agentdetsec ul li a {background: var(--third-color); color: var(--primary-color); padding: 7px 7px; border-radius: 4px; margin: 0 3px 0 0; font-size: var(--font-size);}
.evaluation_detsec ul li {display: block; width: 100%; overflow: hidden; padding: 8px 0 0;}
.evaluation_detsec ul li p {float: left; font-weight: var(--bold); line-height: 24px;}
.evaluation_detsec ul li strong {float: right; line-height: 1; background: var(--secondary-color); color: var(--white); padding: 4px 7px; border-radius: 4px;}
small.file_smalldesc {font-size: var(--font-size); line-height: 14px; display: block; color: var(--font-color); margin: -2px 0 15px 1px;}
span.file_input {font-weight: 600; font-size: var(--font-size);}

.common_infosec ul li {width: 100%; display: block; overflow: hidden; padding: 3px 0; border-bottom: 1px solid #efefef;}
.common_infosec ul li:last-child {border: none;}
.common_infosec ul li p {float: left; margin: 0; color: var(--font-color); width: 35%;}
.common_infosec ul li strong {float: right; line-height: 1; font-weight: var(--bold); width: 65%;}
.common_infosec ul li strong p {text-align: right; width: 100%; font-weight: var(--bold); color: var(--title-color);}
.description_mainsec {margin: 15px 0;}
.description_mainsec h2 {font-size: var(--font-size); font-weight: var(--bold);}
.description_mainsec p {line-height: 20px;}

ul.main_historysec li {display: flex; padding: 10px 0 0; border-bottom: 1px solid #efefef;}
ul.main_historysec li:last-child {padding-bottom: 0px;}
.main_historysec .newsdetail_sec{ height: auto; width: 100%; border-radius: 5px; padding: 10px;}
.main_historysec .newsimg_sec {width: 110px; margin: 0 10px 0 0; border-radius: 5px; border-right: 0px; float: left;}
.main_historysec .news_contsec {width: 220px; overflow: visible; float: left;}
.main_historysec .news_contsec h2{overflow: visible;}

.common_infosec ul li div { width: 100%;}
.common_infosec ul li div div:first-child {text-align: left; width: 50% !important; font-size: var(--font-size); font-weight: var(--bold);}
.common_infosec ul li div div:last-child {text-align: right; width: 50% !important; font-size: var(--font-size); font-weight: var(--bold);}

.main_headingsec h4 {font-size: var(--font-size); display: block; width: 100%; text-align: center; margin: 0; padding: 0; color: var(--font-color); font-weight: var(--bold);}
#pro-btn-mf {color: var(--primary-color); background-color: var(--third-color); border-color: var(--third-color); font-size: var(--font-size); padding: 5px 10px; font-weight: var(--bold);}
#pro-btn-mf:hover, #pro-btn-mf:focus{ background-color: var(--third-color) !important; border-color: var(--third-color) !important;}

.banner_sec .inner_bannersec{ height: auto;}
.banner_sec .inner_bannersec img{ height: auto;}

.inner_bannersec {height: 300px; overflow: hidden;}
.inner_bannersec img{ width: auto; margin: auto; height: 100%;} 

.inner_prohistory_sec {position: relative; height: 100%;}

.hide_propertysec {
  position: absolute;
  height: 97%;
  width: 100%;
  text-align: center;
  background: url(/css/images/history_bg.png) center center repeat;
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  z-index: 12;
}
.inner_hidepropsec i {font-size: 40px;}
.inner_hidepropsec p {font-size: var(--title-size-h1); text-transform: uppercase; margin: 10px 0 10px 0px; font-weight: var(--bold);}
.inner_hidepropsec button.common_mainbtn {padding: 6px 10px; font-size: var(--font-size);}

#listing_list .inner_listingsec{ width: 100%; margin-right: 0px; margin-bottom: 15px;}
#listing_list .inner_listingsec .listing_imgsec{ height: 250px;}
#listing_list .inner_listingsec .listing_detsec h2 {font-size: var(--title-size-h2);}
#listing_list .inner_listingsec .listing_detsec ul{ justify-content: start;}
#listing_list .inner_listingsec .listing_detsec ul li {display: flex; margin: 0 25px 0 0;}
#listing_list .inner_listingsec .listing_detsec ul li p{ font-size: var(--font-size);}
#listing_list .inner_listingsec .listing_detsec span {font-size: var(--font-size); padding: 4px 0 6px 0;}

.lineBlock {
  padding: 3px 0;
  border-bottom: 1px solid #efefef;
  font-size: var(--font-size);
  display: flex;
}
.lineBlock p {
  margin-bottom: 0;
}
.lineBlock div {
  position: absolute;
  right: 0;
}

.iframe_overlay {
  width: 100%;
  height:100%;
  position:relative;
}
.iframe_overlay_cover {
  z-index: 999;
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: transparent;
}

/* -------------- LOADING ------------- */
.skeleton-box {
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: #f5f4f4;
}
.skeleton-box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  animation: shimmer 2s infinite;
  content: '';
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
 }
}