:root{
  --card-width:300px;

  @media(max-width:500px){ 
  --card-width:260px;
  }
  @media screen and (min-width:768px) and (max-height:840px) {
    --card-width:500px;  
  } 
}

.gm-style-iw {
  padding: 0px!important;
  max-width:var(--card-width)!important; 
}

.gm-style .gm-style-iw-c, .gm-style .gm-style-iw { overflow: visible;}


.gm-style-iw > div {
  border-radius: 0;
  overflow: visible!important;
  width: var(--card-width);
  max-width:var(--card-width)!important; 
}

.gm-style-iw .gm-style-iw-chr { position: absolute; z-index: 1; width: 30px; right: 0;}
.gm-style-iw .gm-style-iw-chr > button {display: flex!important;align-items: center;justify-content: center;text-align: center;right: -15px!important;top: -15px!important;border-radius: 50%;opacity: 1;background: var(--color-secondary)!important;width: 30px!important;height: 30px!important;}
.gm-style-iw .gm-style-iw-chr > button span {background-color: #fff!important;margin: 0!important;width: 20px!important;height: 20px!important;}

.gm-style .controls:not(.info-window-control) {
  /* this adjusts the size of all the controls */
  background-color: rgb(255 255 255 / 70%);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  box-sizing: border-box;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 300;
  text-align: center;
  user-select: none;
  padding: 5px;
  width: 54px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 5px;
  border-radius: 5px;
}

.gm-style .controls:not(.info-window-control) button {
 border: 0;
 background-color: var(--color-primary);
 color: #fff;
 width: 44px;
 height: 44px;
 border-radius: 5px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 2rem;
 cursor: pointer;
}

.gm-style .controls:not(.info-window-control) button:hover {background: var(--color-secondary);}

.gm-style .controls.zoom-control {
 display: flex;
 flex-direction: column;
 height: auto;
}


.gm-style .controls.zoom-control.disabled button, .gm-style .controls.zoom-control button.disabled {background-color: #ddd; color: #999; pointer-events: none; cursor: not-allowed; }

.gm-style .controls.maptype-control {
 display: flex;
 flex-direction: row;
 width: auto;
}

.gm-style .controls.maptype-control button {
 display: inline-block;
 font-size: 0.5em;
 margin: 0 1px;
 padding: 0 6px;
}

.gm-style .controls.maptype-control.maptype-control-is-map .maptype-control-map {
 font-weight: 700;
}

.gm-style .controls.maptype-control.maptype-control-is-satellite .maptype-control-satellite {
 font-weight: 700;
}

.gm-style .controls.fullscreen-control.is-fullscreen button {background-color: var(--color-secondary);}
.gm-style .controls.fullscreen-control.is-fullscreen button i::before {content: "\f066";}

.gm-style .controls button.draw-map-control { font-size: 1.8rem;}

.gm-style .controls button.draw-map-control.enabled.active{ background-color: var(--color-secondary);}
.gm-style .controls button.draw-map-control.disabled{ background-color: #ddd; color: #999; pointer-events: none; cursor: not-allowed; display: none;}

.gm-style .controls button.draw-reset-control.enabled { background-color: var(--color-error);}
.gm-style .controls button.draw-reset-control.disabled.reload { background-color: var(--color-error);}
.gm-style .controls button.draw-reset-control.disabled:not(.reload){ background-color: #ddd; color: #999; pointer-events: none; cursor: not-allowed;}

.gm-style .controls.info-window-control {display: none;margin:0;height: 175px;width:100%;width: 700px;left: calc(50% - 350px)!important;background-color: #ffffff;border-radius: 5px;margin-bottom: 20px;box-shadow: 0px 0px 3px 3px rgb(0 0 0 / 5%);}
.gm-style .controls.info-window-control .info-window-control-close {position: absolute;right: -15px;top: -15px;width: 30px;height: 30px;border: none;outline: none;border-radius: 50%;background: var(--color-secondary);color: #fff;font-size: 1.4rem;text-align: center;display: flex;align-items: center;justify-content: center;cursor: pointer; z-index: 2;}


.gm-style .controls button.search-map-control {background-color: var(--color-secondary); }
.gm-style .controls button.search-map-control.disabled { display: none;}



.map-property-card {display: flex;width:var(--card-width);}

.map-property-card .map-property-card--container {position: relative;display: flex;flex: auto;flex-direction: column;height: 100%; width:100%;border-radius: 5px;}

.map-property-card .map-property-card--image {width: 100%;height: 100%;position: relative;}
.map-property-card .map-property-card--image::after {content: "";padding-top: 65%;display: block;overflow: hidden;}
.map-property-card .map-property-card--image .prop-image {width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 5px 5px 0 0px; position: absolute;}

.map-property-card .map-property-card--image .prop-agent {position: absolute;bottom: -10px;right: 10px;height: 45px;display: flex;gap: 5px;}
.map-property-card .map-property-card--image .prop-agent .agent-img{width: 45px;height: 45px;}
.map-property-card .map-property-card--image .prop-agent .agent-img img{width: 100%;height: 100%;object-fit: cover;object-position: center; }

.map-property-card .map-property-card--info {display: flex;flex-direction: column;flex: 2;gap: 15px;padding: 15px; width: var(--card-width); max-width:var(--card-width)!important; overflow: hidden;}

.map-property-card .map-property-card--top-dets {display: flex;justify-content: space-between;width: 100%;padding-bottom: 10px;border-bottom: 1px solid #ddd;align-items: flex-end;}
.map-property-card .map-property-card--top-dets .map-property-card--price {position: relative;color: var(--color-primary);display: flex;flex-direction: column;line-height: normal;gap: 0px;}
.map-property-card .map-property-card--top-dets .map-property-card--price .status {font-size: 1.3rem;color: #666;}
.map-property-card .map-property-card--top-dets .map-property-card--price .amount{font-size: 2.2rem;font-weight: 600;font-family: var(--font-title);}
.map-property-card .map-property-card--top-dets .map-property-card--price .amount .smalltext{ font-size: 1.4rem;color: #666;font-weight: 400;}


.map-property-card .map-property-card--top-dets .map-property-card--icons {display: flex;flex-direction: row;gap: 15px;}
.map-property-card .map-property-card--top-dets .map-property-card--icons li {display: flex;flex-direction: row;align-items: center;gap: 5px;font-size: 1.4rem;color: #999;font-weight: 400;position: relative;width: auto!important;}
.map-property-card .map-property-card--top-dets .map-property-card--icons span i {font-size: 1.8rem;position: relative;color: #999;}
.map-property-card .map-property-card--top-dets .map-property-card--icons li:not(:last-child)::after {position: absolute;content: "";top: 15%;right: calc(-1  * (var(--grid-gap--large) / 2));width: 1px;height: 75%;background: #ddd;opacity: 0;}
.map-property-card .map-property-card--top-dets .map-property-card--icons span i.icon-bedroom {font-size: 2rem;}
.map-property-card .map-property-card--top-dets .map-property-card--icons span i.icon-bathroom {top: -2px;font-size: 1.9rem;}
.map-property-card .map-property-card--top-dets .map-property-card--icons li i.icon-house-alt {font-size: 2.4rem;}
.map-property-card .map-property-card--top-dets .map-property-card--icons li i.icon-receptions { top: 1px;} 

.map-property-card .map-property-card--main-dets {display: flex;width: 100%;flex-direction: column;gap: 0;align-items: flex-start;overflow: hidden;}
.map-property-card .map-property-card--main-dets .prop-headline{color: #666;position: relative;font-size: 1.3rem;text-transform: capitalize;font-weight: 300;margin-bottom: 5px;}

.map-property-card .map-property-card--main-dets  .prop-address{color: var(--color-primary);position: relative;font-size: 1.8rem;text-transform: capitalize;font-weight: 400;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;}
.map-property-card .map-property-card--main-dets  .prop-address strong {font-weight: 500;}
.map-property-card .map-property-card--main-dets .prop-address-2{color: #666;position: relative;font-size: 1.5rem;text-transform: capitalize;font-weight: 400;margin-top: 2px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;}



.map-property-card  .ribbon-top { --d:12px; --w:200px; --c: var(--color-secondary); position: absolute; top: 0; right: 0; transform: translate(29.29%, -100%) rotate(45deg);color: #fff;text-align: center;width: var(--w);transform-origin: bottom left;padding:5px 0 calc(var(--d) + 5px);  background: linear-gradient(rgba(0,0,0,0.6) 0 0) bottom/100% var(--d) no-repeat var(--c);clip-path:polygon(0 100%,0 calc(100% - var(--d)),50% calc(100% - var(--d) - var(--w)/2),100% calc(100% - var(--d)),100% 100%,calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)));z-index:9;font-family: var(--font-title);font-size: 1.6rem;display:flex;flex-direction:column;font-weight: 500;}
  
.map-property-card  .ribbon-top.left {left:0;right:auto;transform: translate(-29.29%, -100%) rotate(-45deg);transform-origin: bottom right;}
.map-property-card  .ribbon-top.right {right: 0;left: auto;transform: translate(29.29%, -100%) rotate(45deg);transform-origin: bottom left;}

.map-property-card  .prop-sale-status{font-size: 1.3rem;padding: 6px 8px;background: var(--color-secondary);display: flex;color: #fff;border-radius: 5px;position: absolute;bottom: 10px;left: 10px;z-index: 3;text-transform: capitalize;font-weight: 600;}
.map-property-card  .prop-sale-status.sale-sold {background-color: var(--color-primary);color: #fff!important;}



@media screen and (min-width:768px) and (max-height:840px) {

  .map-property-card { height: 160px;}
  .map-property-card .map-property-card--container { flex-direction: row;}
  .map-property-card .map-property-card--image { width: 200px; height: 100%;}
  .map-property-card .map-property-card--image .prop-image { border-radius: 5px 0 0 5px;}
  .map-property-card .map-property-card--image .prop-agent { bottom: 10px; height: 40px;}
  .map-property-card .map-property-card--image .prop-agent .agent-img { width: 40px; height: 40px;}
  .map-property-card .map-property-card--info { width: 300px;}
  .map-property-card .prop-sale-status{ font-size: 1.2rem;padding: 4px 6px;}
  
}


@media screen and (max-width:767px) {
  .gm-style .controls:not(.info-window-control) { width: 40px; margin: 4px 10px;}
  .gm-style .controls:not(.info-window-control) button{ width: 30px; height: 30px;font-size: 1.6rem;}

  .gm-style .controls.info-window-control{ margin-bottom: 0px; width: 100%; left: 0!important; bottom: 0; border-radius: 0; z-index: 9999999; height: 160px;}
  .gm-style .controls.info-window-control .info-window-control-close { right: 0; top: 0; border-radius: 0 0 0 5px;}

  .map-property-card .map-property-card--top-dets {gap: 10px;}

  .map-property-card .map-property-card--main-dets .prop-address-2{font-size: 1.4rem;}

  .map-property-card .map-property-card--top-dets .map-property-card--price .amount{font-size: 2rem;}

  .map-property-card .map-property-card--top-dets .map-property-card--icons { gap: 10px;}
  .map-property-card .map-property-card--top-dets .map-property-card--icons span i{ font-size: 1.6rem;}
  .map-property-card .map-property-card--top-dets .map-property-card--icons span i.icon-bedroom{ font-size: 1.8rem;}
}


@media screen and (max-width:500px) {

  .map-property-card .map-property-card--info{gap: 10px;}

  .map-property-card .map-property-card--top-dets{padding-bottom: 8px;}

  .map-property-card .map-property-card--top-dets .map-property-card--price .status { font-size: 1.2rem;}
  .map-property-card .map-property-card--top-dets .map-property-card--price .amount {font-size: 1.8rem;}
  .map-property-card .map-property-card--top-dets .map-property-card--price .amount .smalltext{ font-size: 1.2rem;}

  
  .map-property-card .map-property-card--image .prop-agent {height: 40px;}
  .map-property-card .map-property-card--image .prop-agent .agent-img{width: 40px;height: 40px;}
  .map-property-card .map-property-card--image::after { padding-top: 55%;}

  .map-property-card  .prop-sale-status{font-size: 1.2rem;padding: 4px 6px;}

  .map-property-card .map-property-card--main-dets .prop-headline {font-size: 1.2rem;}
  .map-property-card .map-property-card--main-dets .prop-address-2 {font-size: 1.4rem;}
  .map-property-card .map-property-card--main-dets .prop-address {font-size: 1.6rem;}
}