@charset 'utf-8';


/**************/
/*** Resets ***/
/**************/

html, body, p, div, img, h1, h2, h3, h4, h5, li, ul, ol, dl, dd, dt, form, table, td, tr, a {margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px;}
.clear-div {clear: both;}

html {font-size: 100%;}

body {width: 100%; height: 100vh; color: #444444; background: #f3f3f3; font-size: 12px; font-weight: 300;}


* {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}


input:focus, textarea:focus, select:focus {outline: none;}




/***************/
/*** General ***/
/***************/



.clearDiv {clear: both;}


.container {width: 100%; min-width: 100%; margin: auto; font-size: 0rem;}

.content {width: 100%; font-size: 0rem; padding: 20px;}





.searchButton {position: fixed; bottom: 25px; right: 25px; z-index: 1000; width: 65px; height: 65px; border-radius: 100%; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.30); text-align: center; font-size: 1.7rem; color: #ffffff; padding-top: 18px; text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.30); cursor: pointer;}

.searchButton > .progress {font-size: 0.9rem; text-align: center; display: none; margin-top: 8px; font-weight: bold;}



.grayButton {display: inline-block; font-size: 0.7rem; color: #222222; text-align: center; vertical-align: top; height: 35px; background: linear-gradient(#fcfcfc, #f8f8f8); border-radius: 3px; padding: 10px; cursor: pointer; border: 1px solid #e0e4ec;}
.grayButton.wide {width: 100%;}

.grayButton.skinny {height: 20px; line-height: 20px; font-size: 0.55rem; display: inline-block; vertical-align: top; padding: 0px; width: calc(25% - 3px);}




.headerContainer {position: fixed; height: 80px; bottom: 0px; z-index: 300;}
.header {padding: 0px; padding-left: 20px; padding-right: 20px;}
.header > .logo {float: left; display: none;}
.header > .logo > img {max-height: 45px;}
.header > .links {width: 100%; font-size: 1.4rem; color: #ffffff; min-height: 80px;}
.header > .links > li {list-style-type: none;}
.header > .links > li.icon {display: inline-block; vertical-align: top; margin-left: 25px; margin-right: 25px; color: #ffffff; text-align: center; margin-top: 25px;}
.header > .links > li.icon a {color: #ffffff;}
.header > .links > li.icon .label {font-size: 0.65rem; color: #ffffff; margin-top: 5px;}
.header > .links > li.icon i {display: block;}
.header > .links > li.icon img {max-width: 25px; display: block; margin: auto; height: 20px;}
.header > .links > li.icon svg {max-width: 25px; color: #ffffff; fill: #ffffff; stroke: #ffffff; height: 20px;}



@media (max-width: 799px)
{
}

@media (min-width: 800px)
{

.headerContainer {width: 80px; max-width: 80px; min-width: 0px; height: 100%;}
.header {width: 80px; padding: 0px;}
.header > .logo {float: none; margin-bottom: 40px; text-align: center; padding-top: 20px; display: block;}
.header > .logo > img {max-width: 45px;}
.header > .links {float: none; text-align: center;}
.header > .links > li.menu {display: none;}
.header > .links > li.icon {display: block; width: 80px; height: 80px; text-align: center; font-size: 1.0rem; padding-top: 22px; margin-left: 0px; margin-right: 0px; margin-top: 0px;}
.header > .links > li.icon > a {display: block; width: 100%; height: 100%; color: #ffffff;}
.header > .links > li.icon > a:hover {color: #ffffff;}
.header > .links > li.icon:hover {background-color: rgba(255, 255, 255, 0.1);}
.header > .links > li.icon img {margin-botom: 10px;}

}




.mainContainer {height: 100%; background-color: #ffffff;}
.mainContent {height: 100%; padding: 0px;}


@media (max-width: 799px)
{
}

@media (min-width: 800px)
{

.mainContainer {position: fixed; margin-top: 0px; margin-left: 80px; width: calc(100% - 80px); min-width: 0px;}
.mainContent {padding: 0px;}

}





.filters {display: block; background-color: #f3f3f3; padding-top: 0px; margin-top: 80px;}
.filters::-webkit-scrollbar {display: none;}


.filters > h1 {width: 100%; color: #222222; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 3px; padding: 20px; border-bottom: 1px solid #e0e4ec; position: -webkit-sticky; position: sticky; top: 80px; background: linear-gradient(#fcfcfc, #f8f8f8); z-index: 100; height: 56px;}

.filters > .filterBlock {border-top: 1px solid #ffffff; display: none; overflow: hidden;}
.filters > .filterBlock:nth-of-type(n-1) {border-bottom: 1px solid #e0e4ec;}
.filters > .filterBlock:last-of-type {border-bottom: none;}

.filters > .filterBlock.active {display: block;}

.filters > h2 {width: 100%; font-size: 0.75rem; cursor: pointer; position: -webkit-sticky; position: sticky; top: 54px; background: linear-gradient(#fcfcfc, #f8f8f8); z-index: 100; border-bottom: 1px solid #e0e4ec; border-top: 1px solid #ffffff; padding: 20px; height: 56px;}
.filters > h2 > i {float: right; padding-top: 0px; font-size: 1.0rem;}
.filters > h2::after {float: right; content: " "; font-family: "Font Awesome 5 Free"; font-weight: 900;}

.filters > h2.active::after {content: " ";}

.filters > h2.general {top: 136px;}
.filters > h2.location {top: 136px;}
.filters > h2.building {top: 136px;}
.filters > h2.property {top: 136px;}
.filters > h2.records {top: 136px;}

.filter {margin-bottom: 20px; padding-left: 20px; padding-right: 20px;}
.filter:first-of-type {margin-top: 20px;}
.filter:last-of-type {margin-bottom: 40px;}
.filter > h3 {font-size: 0.7rem; color: #222222; margin-bottom: 6px;}
.filter > select {display: block; height: 50px; width: 100%; border: 1px solid #e0e4ec; background-color: #ffffff; border-radius: 3px; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-left: 10px; padding-right: 10px; font-size: 0.8rem;}
.filter > input {display: inline-block; height: 40px; width: 100%; border: 1px solid #e0e4ec; background-color: #ffffff; border-radius: 3px; padding-left: 10px; padding-right: 10px; font-size: 0.8rem; -webkit-appearance: none;}
.filter > input.date {width: calc(100% - 42px); margin-right: 10px;}
.filter > input:nth-of-type(n+2) {margin-top: 5px;}

.filter > input[type="file"] {padding-top: 5px;}

.filter > .toggleHolder {display: inline-block; width: 32px; position: relative; top: -3px; vertical-align: middle;}


.filter > .multiSelect {font-size: 0.9rem; background-color: #ffffff; max-height: 210px; overflow-y: scroll; padding-top: 5px; padding-bottom: 5px; border-radius: 3px; border: 1px solid #e0e4ec;}

.filter .option {padding: 10px; cursor: pointer; padding-top: 5px; padding-bottom: 5px;}
.filter .option:nth-child(n+2) {}
.filter .option:hover {background-color: #f5f6f7;}

.filter .option > .checkbox {width: 25px; height: 25px; border: 1px solid rgba(0, 0, 0, 0.3); background-color: #ffffff; padding: 3px; border-radius: 3px; display: inline-block; vertical-align: top; margin-right: 3px; margin-top: -4px;}
.filter .option > .checkbox > .inner {width: 100%; height: 100%; border-radius: 3px;}

.filter .option > .checkbox.indent1 {margin-left: 10px;}
.filter .option > .checkbox.indent2 {margin-left: 20px;}


.filter > .multiText {display: block; min-height: 30px; width: 100%; border: 1px solid #e0e4ec; background-color: #ffffff; border-radius: 3px; padding-left: 10px; padding-right: 10px; text-align: left; padding-top: 10px; padding-bottom: 10px;}
.filter > .multiText .item {display: block; width: 100%; padding: 15px; color: #ffffff; font-size: 0.8rem; border-radius: 3px; vertical-align: top; margin-bottom: 5px;}
.filter > .multiText .item:last-child {margin-bottom: 13px;}
.filter > .multiText .item > span {display: block; float: left; width: calc(100% - 25px);white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.filter > .multiText .item > i {display: block; float: right; width: 15px; margin-left: 10px; padding-top: 2px; cursor: pointer; text-align: right;}
.filter > .multiText > input {display: block; border: none; background-color: #ffffff; padding: 0px; padding-left: 5px; width: 100%; font-size: 0.7rem;}

.filter > .map {width: 100%; height: 200px;}

.filter .customValueHolder {margin-bottom: 20px;}
.filter .customValueHolder > input {display: block; width: 100%; height: 20px; line-height: 20px; padding-left: 5px; margin-bottom: 5px; border: 1px solid #e0e4ec;}
.filter .customValueHolder > .name {font-size: 0.7rem; display: inline-block; vertical-align: top; width: 109px; line-height: 35px;}
.filter .customValueHolder > .edit {margin-right: 5px;}
.filter .customValueHolder > .delete {}


@media (max-width: 799px)
{
}

@media (min-width: 800px)
{

.filters > h1 {top: 0px;}

.filters > h2.general {top: 56px;}
.filters > h2.location {top: 56px;}
.filters > h2.building {top: 56px;}
.filters > h2.property {top: 56px;}
.filters > h2.records {top: 56px;}


/*
.filters > h2.general {top: 56px;}
.filters > h2.location {top: 112px;}
.filters > h2.building {top: 168px;}
.filters > h2.property {top: 224px;}
.filters > h2.records {top: 280px;}
*/


.filters {display: block; float: left; width: 250px; height: 100%; border-right: 1px solid #e0e4ec; padding-bottom: 20px; padding-top: 0px; box-shadow: -2px 0px 6px inset rgba(0, 0, 0, 0.00); overflow-y: scroll; margin-top: 0px;}

.filter > input {height: 30px; padding-left: 5px; padding-right: 5px; font-size: 0.7rem;}
.filter > select {height: 30px; padding-left: 5px; padding-right: 5px; font-size: 0.7rem;}

.filter > .multiSelect {font-size: 0.7rem;}
.filter .option > .checkbox {width: 15px; height: 15px; padding: 2px; margin-top: -1px;}

.filter > .multiText .item {padding: 5px; padding-left: 10px; padding-right: 10px; font-size: 0.7rem;}

}





.results {display: block; background-color: #fafafa; margin-top: 0px;}
.results::-webkit-scrollbar {display: none;}

.results > .title {width: 100%; border-bottom: 1px solid #e0e4ec; background: linear-gradient(#fcfcfc, #f8f8f8); padding-left: 20px; padding-right: 20px; border-top: 1px solid #ffffff; position: -webkit-sticky; position: sticky; top: 80px; z-index: 100; height: 56px;}

.results > .title > h1 {display: inline-block; width: auto; color: #222222; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 3px; padding-top: 19px; padding-bottom: 20px;}
.results > .title > .toggle {display: inline-block; background-color: #f3f3f3; border-radius: 3px; border: 1px solid #e0e4ec; float: right; margin-top: 8px;}
.results > .title > .toggle > .option {padding-left: 13px; padding-right: 13px; font-size: 0.9rem; color: #999999; text-align: center; display: inline-block; vertical-align: top; height: 35px; line-height: 35px; border-right: 1px solid #ffffff; border-top: 1px solid #ffffff; cursor: pointer; text-shadow: 0px -1px 0px rgba(255, 255, 255, 1.0);}
.results > .title > .toggle > .option:first-of-type {border-top-left-radius: 3px;}
.results > .title > .toggle > .option:nth-of-type(n+2) {border-left: 1px solid #e0e4ec;}
.results > .title > .toggle > .option:last-of-type {border-right: none; border-top-right-radius: 3px;}

.results > .title > .toggle > .option.active {background-color: #ffffff; box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.10) inset; border-top: none; border-right: none; color: #666666;}

.results > .subtitle {width: 100%; border-top: 1px solid #ffffff; border-bottom: 1px solid #e0e4ec; background: #fcfcfc; padding-left: 20px; padding-right: 20px; position: -webkit-sticky; position: sticky; top: 136px; z-index: 100; height: 55px;}
.results > .subtitle > .resultCount {font-size: 0.8rem; text-align: center; display: inline-block; height: 51px; line-height: 51px; margin-right: 20px;}
.results > .subtitle > .pages {display: inline-block; height: 51px; line-height: 51px; float: right; font-size: 0.8rem;}
.results > .subtitle > .pages > input {width: 75px; height: 25px; border-radius: 2px; margin-top: 13px; padding-left: 5px; padding-right: 5px; font-size: 0.75rem; text-align: center; border: 1px solid #e0e4ec;}
.results > .subtitle > .pages > i {font-size: 1.0rem; margin-left: 5px; margin-right: 10px; margin-top: 10px;}

.results > .resultBlock {/*box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.12); border-bottom: 2px solid rgba(0, 0, 0, 0.2);*/ border-bottom: 1px solid #e0e4ec; display: none;}
.results > .resultBlock.visible {display: block;}

.results > .resultBlock > .data {border-top: 1px solid #ffffff; padding: 20px; padding-bottom: 55px; background-color: #ffffff;}
.results > .resultBlock > .data h3 {font-weight: 300; font-size: 0.7rem; color: #222222; margin-bottom: 6px;}
.results > .resultBlock > .data h3:nth-of-type(n+2) {margin-top: 20px;}
.results > .resultBlock > .data .button {border-radius: 3px; text-align: center; font-size: 0.9rem; color: #ffffff; padding: 10px; width: 100%; cursor: pointer; margin-top: 20px;}
.results > .resultBlock > .data select {display: block; width: 100%; height: 50px; width: 100%; border: 1px solid #e0e4ec; background-color: #ffffff; border-radius: 3px; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-left: 10px; padding-right: 10px; font-size: 0.8rem;}
.results > .resultBlock > .data input {display: block; height: 50px; width: 100%; border-radius: 3px; padding-left: 10px; padding-right: 10px; font-size: 0.8rem;}

.exportFields {margin-bottom: 40px;}
.exportFields > .exportField {margin-top: 40px;}
.exportFields > .exportField > h3 {text-decoration: underline;}
.exportFields > .exportField > h4 {font-weight: 300; font-size: 0.7rem;}
.exportFields > .exportField > textarea {display: block; width: 100%; max-width: 600px; height: 100px; border-radius: 3px; border: 1px solid #e0e4ec; padding: 10px;}



@media (max-width: 799px)
{
}

@media (min-width: 800px)
{

.results {display: block; float: left; width: calc(100% - 250px); height: 100%; overflow: none; border-left: 1px solid #ffffff; margin-top: 0px;}

.results > .title {position: static;}

/*
.results > .title.general {top: 0px;}
.results > .title.stats {top: 56px;}
.results > .title.export {top: 112px;}
*/

.results > .subtitle {top: 57px;}

.results > .resultBlock {height: calc(100% - 57px); overflow-y: scroll;}
.results > .resultBlock::-webkit-scrollbar {display: none;}
.results > .resultBlock > .data {min-height: 100%;}


.results > .resultBlock > .data select {max-width: 300px; height: 30px; font-size: 0.7rem;}
.results > .resultBlock > .data input {max-width: 300px; height: 30px; font-size: 0.7rem;}

.results > .resultBlock > .data .button {font-size: 0.7rem; max-width: 300px;}

}





/*
.results > .resultBlock > .data > .item {border: 1px solid #e0e4ec; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.12); background-color: #ffffff; display: inline-block; vertical-align: top; margin-right: 20px; margin-bottom: 20px; width: 100%; padding-bottom: 10px;}
*/

.results > .resultBlock > .data > .item {display: inline-block; vertical-align: top; margin-right: 20px; margin-bottom: 20px; width: 100%;}

.results > .resultBlock > .data > .item > .mainImage {display: block; width: 100%; height: 200px; background-size: cover; background-position: center center; border: 1px solid #e0e4ec; position: relative; margin-bottom: 8px;}
.results > .resultBlock > .data > .item > .mainImage > .status {position: absolute; top: -10px; left: 10px; padding: 15px; padding-top: 5px; padding-bottom: 5px; background-color: #ffffff; font-size: 0.65rem; text-align: center; font-weight: 700; border: 1px solid #e0e4ec;}

.results > .resultBlock > .data > .item > .mainImage > .price {position: absolute; top: -10px; right: 10px; padding: 15px; padding-top: 5px; padding-bottom: 5px; background-color: #ffffff; font-size: 0.65rem; text-align: center; font-weight: 700; border: 1px solid #e0e4ec;}

.results > .resultBlock > .data > .item  > .title {width: 100%; padding-bottom: 5px;}
.results > .resultBlock > .data > .item  > .title > h2 {width: 100%; font-size: 0.85rem;}

.results > .resultBlock > .data > .item > .location {width: 100%; padding-bottom: 5px;}
.results > .resultBlock > .data > .item > .location > h2.neighborhood {font-size: 0.65rem; font-weight: 300;}
.results > .resultBlock > .data > .item > .location > h2.borough {font-size: 0.65rem; font-weight: 300;}

.results > .resultBlock > .data > .item > .status {width: 100%; padding-bottom: 5px;}
.results > .resultBlock > .data > .item > .status > h2 {text-align: left; width: 100%; font-size: 0.65rem;}

.results > .resultBlock > .data > .item > .structure {width: 100%; font-weight: 300; font-size: 0.75rem; padding-bottom: 5px;}
.results > .resultBlock > .data > .item > .structure > h2.rooms {text-align: left; width: 100%; font-size: 0.65rem; font-weight: 300;}



.results > .resultBlock > .data > table.list {font-size: 0.7rem; table-layout: fixed; padding-right: 20px; cursor: pointer;}
.results > .resultBlock > .data > table.list > thead > tr {}
.results > .resultBlock > .data > table.list > thead > tr > td {font-weight: bold;}
.results > .resultBlock > .data > table.list > tbody > tr {}
.results > .resultBlock > .data > table.list > tbody > tr:hover {background-color: #f3f3f3;}
.results > .resultBlock > .data > table.list > tbody > tr > td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.results > .resultBlock > .data > table.list tr > td.include {text-align: left; min-width: 40px;}
.results > .resultBlock > .data > table.list tr > td.edit {text-align: left; min-width: 40px;}
.results > .resultBlock > .data > table.list tr > td.address {text-align: left; min-width: 150px;}
.results > .resultBlock > .data > table.list tr > td.unit {text-align: center; min-width: 100px;}
.results > .resultBlock > .data > table.list tr > td.price {text-align: right; min-width: 140px;}
.results > .resultBlock > .data > table.list tr > td.date {text-align: center; min-width: 140px;}
.results > .resultBlock > .data > table.list tr > td.borough {text-align: center; min-width: 150px;}
.results > .resultBlock > .data > table.list tr > td.area {text-align: center; min-width: 150px;}
.results > .resultBlock > .data > table.list tr > td.neighborhood {text-align: center; min-width: 200px;}
.results > .resultBlock > .data > table.list tr > td.sqft {text-align: center; min-width: 150px;}
.results > .resultBlock > .data > table.list tr > td.rooms {text-align: center; min-width: 100px;}
.results > .resultBlock > .data > table.list tr > td.type {text-align: center; min-width: 150px;}
.results > .resultBlock > .data > table.list tr > td.propertyType {text-align: center; min-width: 150px;}





.results > .resultBlock > .data > .map {width: 100%; height: 100%;}


@media (max-width: 449px)
{

.results > .resultBlock > .data > .item {margin-bottom: 40px;}

}


@media (min-width: 450px) and (max-width: 849px)
{

.results > .resultBlock > .data > .item {width: calc(50% - 20px);}

.results > .resultBlock > .data > .item > .mainImage {height: 150px;}

}

@media (min-width: 850px) and (max-width: 899px)
{

.results > .resultBlock > .data > .item {width: 100%;}

.results > .resultBlock > .data > .item > .mainImage {height: 250px;}

}

@media (min-width: 900px) and (max-width: 1099px)
{

.results > .resultBlock > .data > .item {width: calc(50% - 20px);}

}

@media (min-width: 1100px) and (max-width: 1299px)
{

.results > .resultBlock > .data > .item {width: calc(33% - 20px);}

}

@media (min-width: 1300px) and (max-width: 1499px)
{

.results > .resultBlock > .data > .item {width: calc(25% - 20px);}

}

@media (min-width: 1500px)
{

.results > .resultBlock > .data > .item {width: calc(20% - 20px);}

}




.signInContainer {background-color: #f3f3f3; height: 100%;}
.signInContent {padding: 0px;}

.signInBox {width: 100%; max-width: 500px; margin: auto; margin-top: 80px; }
.signInBox > h1 {width: 100%; color: #222222; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 3px; padding: 20px; border-bottom: 1px solid #e0e4ec; background: linear-gradient(#fcfcfc, #f8f8f8); border-top: 1px solid #ffffff; text-align: left;}
.signInBox > .fields {padding: 20px; background-color: #ffffff;}
.signInBox > .fields input {width: 100%; height: 50px; line-height: 50px; padding-left: 10px; font-size: 0.8rem; text-align: left; padding-right: 10px; border: 1px solid #e0e4ec; display: block; margin-bottom: 10px; border-radius: 3px; background-color: #ffffff;}
.signInBox > .fields .button {width: 100%; height: 50px; line-height: 50px; font-size: 0.8rem; text-align: center; color: #ffffff; font-weight: bold; margin-top: 20px; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5); cursor: pointer; border-radius: 3px;}

.signInBox > .fields ul {display: block; list-style-type: none; font-size: 0rem; margin-bottom: 40px;}
.signInBox > .fields ul li {display: block; width: 100%; font-size: 0.9rem;}

.signInBox > .fields ul.success li {color: #00aa00; text-align: center;}
.signInBox > .fields ul.error li {color: #aa0000; text-align: left;}


@media (max-width: 799px)
{


}

@media (min-width: 800px)
{

.signInBox {margin-top: 200px; border-bottom: 2px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.12);}
.signInBox > .fields {padding: 40px;}
.signInBox > .fields > input {height: 40px; line-height: 40px;}
.signInBox > .fields > .button {height: 40px; line-height: 40px;}

}







.overlayContainer {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1000; display: none;}
.overlayContainer.active {display: block;}





.popup {position: absolute; margin: auto; width: 100%; border-radius: 3px; border: 1px solid #e0e4ec; border-top: 1px solid #e0e4ec; padding: 0px; z-index: 1000; background-color: #ffffff;}

.popup > .titleBar {width: 100%; height: 25px; background: linear-gradient(#F5F5F5, #E1DFE1); border-top-left-radius: 2px; border-top-right-radius: 2px; position: relative; border: 1px solid #d9d9d9; border-top: 1px solid #ffffff; border-bottom: 1px solid #cfd3dc;}
.popup > .titleBar > h1 {text-align: center; font-size: 0.75rem; font-weight: 400; line-height: 25px; color: #000000;}
.popup > .titleBar > .close {border-radius: 20px; background-color: #FF605C; border: 1px solid #e14940; width: 12px; height: 12px; position: absolute; top: 6px; left: 6px;}

.popup > h1 {width: 100%; color: #ffffff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 3px; padding: 20px; /*border: 1px solid #801723;*/ border-left: none; border-right: none; /*border-bottom: 1px solid #a92433;*/ /*background: linear-gradient(#fcfcfc, #f8f8f8);*/ text-align: left; border-top-left-radius: 2px; border-top-right-radius: 2px;}
.popup > h1 > .title {float: left; width: calc(100% - 50px); text-align: left; font-family: inherit; padding-top: 3px;}
.popup > h1 > .icons {float: right; width: 50px; text-align: right;}
.popup > h1 > .icons > i {cursor: pointer;}

.popup > .map {width: 100%; background-color: #f3f3f3; height: 500px; border-top: 1px solid #ffffff;}


.popup > .bottom {padding: 20px; background-color: #ffffff; text-align: right; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;}
.popup > .bottom > .button {display: inline-block; font-size: 0.7rem; color: #ffffff; text-align: center; vertical-align: top; height: 35px; border-radius: 3px; margin-left: 10px; padding: 10px; cursor: pointer;}
.popup > .bottom > .button:hover {background-color: #e5243b;}
.popup > .bottom > .button.active {background-color: #f7273f; font-weight: 600;}
.popup > .bottom > .grayButton {display: inline-block; font-size: 0.7rem; color: #222222; text-align: center; vertical-align: top; height: 35px; background: linear-gradient(#fcfcfc, #f8f8f8); border-radius: 3px; margin-left: 10px; padding: 10px; cursor: pointer; border: 1px solid #e0e4ec;}

.popup > .middle {width: 100%; height: 500px; background-color: #f3f3f3; overflow-y: scroll;}
.popup > .middle::-webkit-scrollbar {display: none;}

.popup > .middle > h2 {font-size: 0.7rem; padding-bottom: 8px; border-bottom: 1px solid #e0e4ec; margin-bottom: 20px; letter-spacing: 0.1rem; text-transform: uppercase;}

.popup > .middle > .group {margin-top: 20px; margin-bottom: 40px;}
.popup > .middle > .group > .field {margin-bottom: 20px;}
.popup > .middle > .group > .field > h3 {font-size: 0.7rem; font-weight: 300; text-align: left; margin-bottom: 5px;}
.popup > .middle > .group > .field > input {width: 100%; display: block; height: 50px; border-radius: 3px; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-left: 10px; padding-right: 10px; font-size: 0.8rem; border: 1px solid #e0e4ec; background-color: #ffffff;}
.popup > .middle > .group > .field > textarea {width: 100%; display: block; height: 150px; border-radius: 3px; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 10px; font-size: 0.8rem; border: 1px solid #e0e4ec; background-color: #ffffff; resize: vertical;}


@media (max-width: 799px)
{

.popup {padding: 0px;}

.popup > h1 {position: -webkit-sticky; position: sticky; top: 0px; z-index: 200;}

.popup > .middle {/*height: calc(100% - 45px);*/ height: auto;}

}

@media (min-width: 800px) and (max-width: 1099px)
{

.popup {padding: 0px;}

.popup > h1 {position: -webkit-sticky; position: sticky; top: 0px; z-index: 200;}

.popup > .middle {height: auto;}

}

@media (min-width: 1100px)
{

.popup {margin-top: 50px; max-width: 1200px;}

}




.searchResultPopup {max-width: 1100px;}
.searchResultPopup > h1 {font-size: 0.9rem;}

.searchResultPopup > .middle {border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; position: relative; background-color: #ffffff;}

.searchResultPopup > .middle h3 {flex-grow: 1; font-size: 0.7rem; border-right: 1px solid #e0e4ec; border-bottom: 1px solid #e0e4ec; display: inline-block; vertical-align: bottom; width: auto; text-align: center; padding-left: 5px; padding-right: 5px; padding-bottom: 8px; padding-top: 8px; background-color: #f5f5f5; cursor: pointer; position: relative; cursor: pointer; font-weight: 100;}
.searchResultPopup > .middle h3.active {background-color: #ffffff; z-index: 15; border-bottom: 1px solid #ffffff;}

.searchResultPopup > .middle .pics {text-align: left; overflow-x: scroll; white-space: nowrap;}
.searchResultPopup > .middle .pics::-webkit-scrollbar {display: none;}
.searchResultPopup > .middle .pics > .pic {width: 150px; height: 150px; background-position: center center; background-size: cover; display: inline-block; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; margin-top: 10px;}
.searchResultPopup > .middle .pics > .pic:first-child {margin-left: 10px;}
.searchResultPopup > .middle .pics > .pic:last-child {margin-right: 10px;}
.searchResultPopup > .middle .pics > img {width: 100%; max-width: 150px; vertical-align: top; margin-left: 5px; margin-right: 5px; margin-bottom: 10px;}
.searchResultPopup > .middle .map {}

.searchResultPopup > .middle .general {text-align: left; margin-bottom: 40px; display: none;}
.searchResultPopup > .middle .general.active {display: block;}
.searchResultPopup > .middle .general > .block {width: calc(50% - 20px); display: inline-block; margin-left: 10px; margin-right: 10px; vertical-align: bottom; border: 1px solid #e0e4ec; border-radius: 2px; background-color: #ffffff; padding: 15px;}
.searchResultPopup > .middle .general > .block > h5 {font-size: 0.8rem; text-align: center; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.searchResultPopup > .middle .general > .block > h4 {font-size: 0.55rem; text-align: center; font-weight: 100; text-transform: uppercase; letter-spacing: 0.1rem; margin-bottom: 6px; color: #aaaaaa;}
.searchResultPopup > .middle .general > .block > h5.link {cursor: pointer;}
.searchResultPopup > .middle .general > .block > h5.link:hover {text-decoration: underline;}

.searchResultPopup > .middle .general > p {display: block; font-size: 0.8rem; text-align: left;}

.searchResultPopup > .middle .general > ul {font-size: 0rem; list-style-type: none; width: 100%; padding: 20px;}
.searchResultPopup > .middle .general > ul > li {width: calc(20% - 20px); height: 20px; font-size: 0.7rem; list-style-type: square; list-style-position: inside; float: left;}

.searchResultPopup > .middle .general.tabbed {background-color: #ffffff; position: relative; top: -2px; z-index: 10; padding: 20px;}
.searchResultPopup > .middle .general.tabbed > .block {border: none;}

.searchResultPopup > .middle > .tabbed > .block {border: none;}



.tabbedViewContainer {position: relative;}
.tabbedViewContainer .tabHolder {white-space: nowrap; overflow-x: scroll; display: flex; position: sticky; top: 0px; z-index: 200;}
.tabbedViewContainer .tabHolder::-webkit-scrollbar {display: none;}







@media (max-width: 799px)
{

.searchResultPopup > .middle {text-align: left;}
.searchResultPopup > .middle > h3 {width: auto; margin: auto; margin-right: 1px;}
.searchResultPopup > .middle > h3.active {width: auto;}

.searchResultPopup > .middle .general > .block {width: calc(50% - 20px);}

.searchResultPopup > .middle .general > ul > li {width: calc(50% - 20px);}

}

@media (min-width: 800px) and (max-width: 949px)
{

.searchResultPopup > .middle .general > .block {width: calc(33% - 20px);}

}

@media (min-width: 950px)
{

.searchResultPopup > .middle .general > .block {width: calc(20% - 20px);}

}


.searchResultPopup .tableHolder {width: 100%; overflow-x: scroll;}
.searchResultPopup .tableHolder::-webkit-scrollbar {display: none;}

.searchResultPopup table {font-size: 0.7rem; border-collapse: separate; min-width: 100%;}
.searchResultPopup table::-webkit-scrollbar {display: none;}

.searchResultPopup table > thead > tr {height: 50px; background-color: #ffffff; cursor: pointer;}
.searchResultPopup table > tbody > tr {height: 50px; background-color: #ffffff; cursor: pointer;}
.searchResultPopup table > tbody > tr:hover {background-color: #fafafa;}
.searchResultPopup table > tbody > tr > td {border-bottom: 1px solid #e0e4ec; border-top: 1px solid #ffffff;}
.searchResultPopup table > tbody > tr > td:first-child {}
.searchResultPopup table > tbody > tr > td:last-child {}
.searchResultPopup table > tbody > tr:last-child > td {border-bottom: none;}

.searchResultPopup table th {font-weight: 300; text-transform: uppercase; border-bottom: 1px solid #e0e4ec; color: #aaaaaa; font-size: 0.6rem;}
.searchResultPopup table th:first-child {}
.searchResultPopup table th:last-child {}

.propertyTable {width: 1000px;}
.propertyTable .address {text-align: left; width: 100px; padding-left: 10px;}
.propertyTable .unit {text-align: left; width: 60px; padding-left: 10px; font-weight: bold;}
.propertyTable .price {text-align: right; width: 70px;}
.propertyTable .date {text-align: center; width: 70px;}
.propertyTable .rooms {text-align: center; width: 30px;}
.propertyTable .status {text-align: center; width: 80px;}
.propertyTable .sqft {text-align: center; width: 50px;}

.recordTable {width: 1000px;}
.recordTable .type {text-align: left; width: 100px; padding-left: 10px;}
.recordTable .date {text-align: center; width: 70px;}
.recordTable .price {text-align: right; width: 70px;}
.recordTable .brokerage {text-align: center; width: 80px;}
.recordTable .source {text-align: center; width: 80px; text-overflow: ellipsis; white-space: nowrap;}
.recordTable .sourceOrigin {text-align: center; width: 80px; text-overflow: ellipsis; white-space: nowrap;}
.recordTable .status {text-align: center; width: 50px;}

.documentTable {width: 800px;}
.documentTable th {}
.documentTable .title {text-align: left; width: 100px; padding-left: 10px;}
.documentTable .type {text-align: center; width: 150px;}
.documentTable .source {text-align: center; width: 150px;}
.documentTable .date {text-align: center; width: 75px;}
.documentTable .download {text-align: center; width: 50px;}





@media (max-width: 799px)
{
}

@media (min-width: 800px)
{

/*
.searchResultPopup > .middle > .pics {float: left; width: 50%;}
.searchResultPopup > .middle > .map {float: right; width: 50%;}
*/

}











@media (max-width: 799px)
{
}

@media (min-width: 800px)
{

.popup > .middle > .field > input {height: 30px; line-height: 30px; padding-left: 5px; padding-right: 5px; font-size: 0.7rem;}

}





.mapResultPopup {width: 200px; background-color: #ffffff; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);}

.mapResultPopup .mapboxgl-popup-content {padding: 0px;}

.mapResultPopupContent {width: 100%;}

.mapResultPopupContent > .mainImage {display: block; width: 100%; height: 150px; background-size: cover; background-position: center center; position: relative; margin-bottom: 8px;}
.mapResultPopupContent > .mainImage > .status {position: absolute; top: -10px; left: 10px; padding: 15px; padding-top: 5px; padding-bottom: 5px; background-color: #ffffff; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2); font-size: 0.65rem; text-align: center; border-radius: 20px; font-weight: 700; border: 1px solid #eoe4ec;}
.mapResultPopupContent > .mainImage > .price {position: absolute; top: -10px; right: 10px; padding: 15px; padding-top: 5px; padding-bottom: 5px; background-color: #ffffff; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2); font-size: 0.65rem; text-align: center; border-radius: 20px; font-weight: 700; border: 1px solid #eoe4ec;}

.mapResultPopupContent > .title {width: 100%; padding-left: 10px; padding-right: 10px;}
.mapResultPopupContent > .title > h2 {font-size: 0.80rem; text-align: left; margin-bottom: 0px;}

.mapResultPopupContent > .location {width: 100%; padding-left: 10px; padding-right: 10px;}
.mapResultPopupContent > .location > h2 {font-size: 0.65rem; font-weight: 300;}

.mapResultPopupContent > .status {width: 100%; padding-left: 10px; padding-right: 10px;}
.mapResultPopupContent > .status > h2 {text-align: left; width: 100%; font-size: 0.65rem;}

.mapResultPopupContent > .structure {width: 100%; font-weight: 300; font-size: 0.75rem; padding-left: 10px; padding-right: 10px;}
.mapResultPopupContent > .structure > h2 {text-align: left; width: 100%; font-size: 0.65rem; font-weight: 300;}





.boundaryPolygonPopup {font-size: 0.7rem;}
.boundaryPolygonPopup > h2 {margin-bottom: 5px;}
.boundaryPolygonPopup > h3 {font-weight: 100;}





.mapOverlayElement {position: absolute; z-index: 2000;}
.mapOverlayElement .mapButton {padding-left: 13px; padding-right: 13px; font-size: 0.75rem; color: #999999; text-align: center; display: inline-block; vertical-align: top; height: 40px; line-height: 40px; cursor: pointer; background-color: #ffffff; border-radius: 3px; }
.mapOverlayElement .mapButton i {font-size: 0.9rem; }
.mapOverlayElement .mapButton i.spinning {animation: spin 1s linear infinite;}
.mapOverlayElement .mapButton:first-of-type {border-top-left-radius: 3px;}
.mapOverlayElement .mapButton:nth-of-type(n+2) {border-left: 1px solid #e0e4ec;}
.mapOverlayElement .mapButton:last-of-type {border-right: none; border-top-right-radius: 3px;}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.mapOverlayElement > .mapMenu {background-color: #ffffff; border-radius: 3px; width: 350px; height: auto;}
.mapOverlayElementShadow {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);}

.mapOverlayElement > .mapMenu .bars {color: #777777; font-size: 1.0rem; padding-top: 11px; padding-left: 12px; cursor: pointer; width: 40px; display: inline-block; vertical-align: top;}

.mapOverlayElement > .mapMenu .section {width: 100%; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;}
.mapOverlayElement > .mapMenu .section h3 {font-size: 0.7rem; font-weight: bold;}

.mapOverlayElement > .mapMenu .checkbox {display: inline-block; vertical-align: top; width: 49%;}
.mapOverlayElement > .mapMenu input[type="checkbox"] {width: 15px; height: 15px; display: inline-block; vertical-align: middle;}

.mapOverlayElement > .mapMenu .search {display: inline-block; vertical-align: top; width: calc(100% - 40px - 40px - 10px);}
.mapOverlayElement > .mapMenu .search input[type="text"] {width: 100%; background-color: #ffffff; border: none; padding-left: 20px; vertical-align: top; height: 40px; font-size: 0.75rem;}

.mapOverlayElement > .mapMenu .mapMenuSearchButton {display: inline-block; vertical-align: top; width: 40px; height 40px; font-size: 0.9rem; text-align: center; color: #888888; line-height: 40px;}








.onoffswitchTitle {display: inline-block; font-size: 0.8rem; vertical-align: top; line-height: 35px; margin-right: 10px;}

.onoffswitch {
    display: inline-block;
    vertical-align: top;
    position: relative; width: 70px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border-radius: 3px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 35px; padding: 0; line-height: 35px;
    font-size: 0.8rem; color: white;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "On";
    padding-left: 10px;
    color: #FFFFFF;
    text-align: left;
}
.onoffswitch-inner:after {
    content: "Off";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 24px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    left: 0px;
    right: 36px;
    border-radius: 3px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    left: 34px;
    right: 0px; 
}