/*
 * Generics
*/
body {
    background-color: Gainsboro;
    font-family: 'Oxygen', sans-serif;
    font-size: 12px;
}

select:disabled, input:disabled, textarea:disabled {
    color: gray;
    background-color: #F0F0F0;
    border: 1px solid #D0D0D0;
}

.invalidInput {
    color: red;
    padding: 3px;
    font-style: italic;
}

.lineSpace {
    height: 10px;
    line-height: 10px;
}

.fieldWidth {
    width: 100%;
}

.fieldHeight {
    height: 22px;
    line-height: 22px;
}

.rightAlign {
        text-align: right;
}

.centerAlign {
    text-align: center;
}

.verticalCenterAlign {
    vertical-align: middle;
}

.inline {
    display: inline;
}

.sideSpacing {
    padding-left: 5px;
    padding-right: 5px;
}

.bottomSpacing {
    margin-bottom: 5px;
}

.wideSpacing {
    padding: 10px;
}

.textAreaField {
    width: 100%;
    min-height: 80px;
    vertical-align: top;
}

.textSmall {
    font-size: 10px;
}

/*
 * Generic table divs
*/
.table {
    display: table;
    margin: 0px;
}

.tableHeader {
    display: table-row;
    font-weight: bold;
    background-color: #E0E0E0;
}

.tableHeaderLightBackground {
    display: table-row;
    font-weight: bold;
    background-color: #F5F5F5;
}

.tableRow, .tableRowOdd {
    display: table-row;
    background-color: white;
}

.tableRowNoBackground {
    display: table-row;
    margin:auto;
}

.tableRow:nth-child(2n+1) {
    background-color: #F5F5F5;
}

.tableRowOdd:nth-child(2n) {
    background-color: #F5F5F5;
}

.tableRowBold {
    display: table-row;
    font-weight: bold;
}

.tableCell {
    display: table-cell;
    border: 10px solid transparent;
}

.tableCellTop {
    display: table-cell;
    border: 10px solid transparent;
    vertical-align: top;
}

.tableCellTight {
    display: table-cell;
    border: 4px solid transparent;
}

.tableCellNarrow {
    display: table-cell;
    border-width: 5px 10px 5px 10px;
    border-style: solid;
    border-color: transparent;
}

.tableCellTight2 {
    display: table-cell;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
}

.tableCellTight2Right {
    display: table-cell;
    border-width: 2px;
    text-align: right;
    border-style: solid;
    border-color: transparent;
}

.tableCellSeparator {
    display: table-cell;
    height: 10px;
    background: linear-gradient(white, lightgrey);
}

.tableCellNoBorder {
    display: table-cell;
}

.tableTitle {
    font-weight: bold;
    background-color: #E0E0E0;
    border: 10px solid transparent;
}

.tableEndSeparator {
    height: 20px;
    border-bottom: 1px solid #E0E0E0;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    margin-bottom: 30px;
}

.tableEndSeparatorSlim {
    height: 10px;
    border-bottom: 1px solid #E0E0E0;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    margin-bottom: 10px;
}

.tableRowSeparator{
    height: 5px;
    border-bottom: 1px solid #E0E0E0;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    margin-bottom: 5px;
}

/*
 * Top parts
*/
#waitScreen {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: wait;
    background-color: rgba(0, 0, 0, 0);
    z-index: 20;
}

.waitScreenSection {
    position: absolute;
    width: 100%;
    height: 1500%;
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0);
    z-index: 20;
}

.sheetHolder {
    position: fixed;
    top: 50px;
    left: 0px;
    width: 100vw;
    height: calc(100vh - 50px);
    padding: 25px;
    overflow: auto;
}

#xomeTitleBar {
    position: fixed;
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 50px;
    top: 0px;
    left: 0px;
}

#xomeLogoDiv {
    position: relative;
    width: 110px;
    background-color: Tomato; /*#ff5c39; */
}

#xomeLogo {
    position: absolute;
    top: 5px;
    left: 20px;
    width: 70px;
    height: 40px;
}

#xomeTitles {
    position: relative;
    width: calc(100vw - 110px);
    height: 50px;
    line-height: 45px;
    color: white;
    background-color: #3F4A58;
    padding-left: 10px;
    font-size: 14px;
}

#bpoTitle {
    padding-left: 5px;
}

#leftMenu {
    position: fixed;
    top: 66px;
    left: 16px;
    width: 250px;
    height: calc(100vh - 66px - 16px);  /* -top -bottomMargin */
    border-radius: 8px;
    background-color: white;
    overflow: auto;
}

#topRightMenu {
    position: fixed;
    top: 0px;
    right: 0px;
    background-color: transparent;
}

#centerDiv {
    position: fixed;
    top: 50px;
    left: 282px;
    height: calc(100% - 50px);
    width: calc(100vw - 282px); /* -left */
    min-width: 800px;
    padding-right: 16px;
    padding-bottom: 16px;
    overflow: auto;
}

/*
 * Error
*/
#errorMessageHolder {
    position: fixed;
    top: 5px;
    right: 400px;
    padding: 5px;
    border-radius: 8px;
    background-color: white;
}

#errorMessage {
    margin: 0px 10px 0px 5px;
    color: red;
}

#errorDismissButton {
    height: 30px;
}

/*
 * Menu
*/
.menuTitle {
    padding: 5px 5px 5px 10px;
    font-size: 18px;
    border-bottom:2px solid Gainsboro;
}

.menuListing {
    font-size: 12px;
    line-height: 16px;
}

.menuIcon {
    width: 15px;
    height: 15px;
    margin: 2px 5px 5px 5px;
}

.nav-pills > li.active > a {
    background-color: lightblue;
}

.nav > li > a {
    padding: 5px;
    color: black;
}

.nav-pills > li > a {
    border-radius: 0px;
}

.active > .menuRef {
  color: white;
  text-decoration: none;
}

.menuRef:hover {
  text-decoration: none;
}


/*
 * Selected Comps Menu
*/
.selectedCompsMenu {
    padding: 5px 15px 0px 30px;
    background-color: white;
}

.selectedCompsMenuItems {
    position: relative;
    height: 21px;
    margin-bottom: 5px;
    border:2px solid gray;
    border-radius: 6px;
    background-color: lightblue;
}

.selectedCompsMenuItem {
    position: absolute;
    width: 160px;
    padding-left: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
}

.selectedCompsMenuItemHighlight {
    background-color: SkyBlue;
}

.selectedCompsMenuItemHover {
    background-color: PaleTurquoise;
}

.selectedCompsMenuDelete {
    position: absolute;
    right: 3px;
    font-size: 10px;
}

.selectedCompsMenuDelete:hover {
    color: #31b0d5;
}

.selectedCompsMenuDragText {
    padding-left: 5px;
    font-size: 10px;
    font-style: italic;
}

.selectedCompsMenuCollapseButton {
    margin-right: 10px;
}

.menuItemCompUnselected {
    background-color: #ffffe0;
    color: #5d5d5d;
}

.menuItemCompSelected {
    background-color: lightblue;
    color: #333;
}

/*
 * Buttons Menu
*/
.buttonsTableCellTitle {
    display: table-cell;
    border: 1px solid transparent;
    border-left: 40px solid transparent;
    border-bottom: none;
    color: #cdcdcd;
}

.buttonsTableCell {
    display: table-cell;
    border: 1px solid transparent;
    border-left: 40px solid transparent;
    border-bottom: none;
    color: white;
}

#buttonsPropertyAddress {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.buttonsMenuButton {
    display: inline;
    color: lightblue;
    margin-right: 5px;
    text-decoration: underline;
}

.buttonsMenuButton:hover {
    color: skyblue;
}

.buttonsMenuButton:focus {
    outline: none;
}

.buttonsMenuButtonDisabled {
    display: inline;
    color: lightgray;
    margin-right: 5px;
    text-decoration: underline;
    cursor: default;
}

.buttonsMenuButtonDisabled:focus {
    outline: none;
}

.buttonsSeparator {
    display: inline;
    border-left: 1px solid white;
    margin-right: 5px;
}

.buttonsMenuText {
    font-size:10px;
    color: white;
}

.smallButton {
    width: 100px;
    height: 20px;
    line-height: 10px;
    margin: 10px 10px 0px 10px;
    font-size: 10px;
}

.buttonsMenuLargeFont {
    font-size: 16px;
}

.buttonsMenuVeryLargeFont {
    font-size: 24px;
}
/*
 * Section
*/
.sectionHeader {
    position: relative;
    height: 35px;
    line-height: 35px;
    margin-top: 16px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: lightblue;
    font-size: 18px;
}

.sectionTitle {
    position: absolute;
    left: 20px;
}

.sectionCollapseButtonHolder {
    position: absolute;
    top: 4px;
    right: 20px;
    width: 20px;
    height: 20px;
}

.sectionCollapseButton {
    stroke: #669bbb;
    outline: 0px solid transparent;
}

.sectionCollapseButton:hover {
    stroke: #31b0d5;
}

.topRoundedCorners {
    border-radius: 8px 8px 0px 0px;
}

.allRoundedCorners {
    border-radius: 8px;
}

.sectionContainer {
    background-color: white;
    border-radius: 0px 0px 8px 8px;
}

.sectionHolder {
    padding: 20px;
}

.validationTitle {  
    color:white !important;
    font-size: 14px;
    height: 20px;
    line-height: 20px !important;
    padding-left: 5px !important;
}

/*
 * Subject Property
*/
#subjectPropertyData {
    width: 100%;
}

.subjectPropNameWidth {
    width: 10%;
    border-left-width: 10px;
    border-right-width: 5px;
}
.subjectPropNameWidthUAD {
    width: 25%;
    border-left-width: 10px;
    border-right-width: 5px;
}
.subjectPropValueWidth {
    width: 7%;
    border-left-width: 5px;
    border-right-width: 0px;
    text-align: right;
}
.subjectPropValueWidthQVal {
    width: 12%;
    border-left-width: 5px;
    border-right-width: 0px;
    text-align: right;
}
.subjectPropValueWidthUAD {
    width: 20%;
    border-left-width: 5px;
    border-right-width: 0px;
    text-align: right;
}
.subjectPropValueWidthWide {
    width: 82%;
    border-left-width: 5px;
    border-right-width: 0px;
    text-align: right;
}

.subjectPropSepWidth {
    width: 8%;
    border-right: 1px solid #E0E0E0;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.subjectPropSepWidthBlack {
    width: 8%;
    border-right: 1px solid black;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.subjectPropSepWidthQVal {
    width: 3%;
    border-right: 1px solid #E0E0E0;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.subjectPropSepWidthNoBorder {
    width: 8%;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.histInfoCellWidth {
    width: 25%;
}

#noHistoricalInfo, #noTransactionHistory {
    border: 10px solid transparent;
}

#histInfoMore, #transHistInfoMore, #showResolvedWarningsId, #showAutoApprovedId, #compInfoMore, #listingInfoMore {
    text-align: center;
}

#histInfoMoreHolder, #transHistInfoMoreHolder, #resolvedShowHolder, #autoApprovedMoreHolder, #compsInfoMoreHolder {
    display: inline;
}

#histInfoMoreHolder:hover, #transHistInfoMoreHolder:hover, #resolvedShowHolder:hover , #autoApprovedMoreHolder:hover, #compsInfoMoreHolder:hover{
    color: #31b0d5;
}

#histInfoMoreHolder:focus, #transHistInfoMoreHolder:focus, #resolvedShowHolder:focus, #autoApprovedMoreHolder:focus, #compsInfoMoreHolder:focus{
    outline: none;
}


#histInfoMoreText, #transHistInfoMoreText, #compInfoMoreText, #listingInfoMoreText {
    display: inline;
    margin-right: 5px;
}

#histInfoMoreImg, #transHistInfoMoreImg, #compInfoMoreImg, #listingInfoMoreImg {
    width: 15px;
    height: 10px;
}

.additionalInfoWidth {
    width: 20%;
}

.additionalInfoSepWidth {
    width: 10%;
}

/*
 * Subject Neighborhood Info
*/
.neighborhoodWidth {
    width: 33%;
}
.neighborhoodWidthWide {
    width: 67%;
}

.neighborhoodCommentTitle {
    margin: 40px 10px 0px 10px;
}

.neighborhoodCommentTitleNoTopMargin {
    margin: 0px 10px 0px 10px;
}
.neighborhoodComments {
    width: 100%;
    height: 150px;
}

.neighborhoodMarketNameWidth {
    width: 25%;
}

.neighborhoodMarketDataWidth {
    width: 15%;
}


/*
 * Photos
*/
#photosSection {
    padding: 20px 20px 0px 20px;
}

#photosCarousel {
    height: 260px;
    width: 400px;
    padding: 20px 0px 0px 10px;
}

/*
 * Search map
*/
#mapSubjectPropFeaturesTitle {
    padding-bottom: 10px;
}

.mapFactTitle {
    padding-bottom: 4px;
}

.mapFactCheckBox {
    position: absolute;
    top: 0px;
    right: 7px;
}

.mapTableCellSubjPropHeader {
    display: table-cell;
    background-color: #E0E0E0;
    padding-left: 5px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

.mapTableCellSubjPropData {
    display: table-cell;
    background-color: #F5F5F5;
    padding-left: 5px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
}

.mapBorderedBox {
    margin: 5px;
    border: 1px solid #cccccc;
    padding: 7px;
}

.mapNarrowBorderedBox {
    position: relative;
    min-height: 53px;
    border: 1px solid #cccccc;
    padding: 2px 7px 5px 7px;
}

.mapTableCellFacts {
    display: table-cell;
    border: 5px solid transparent;
}

.mapFactWidth {
    width: 25%;
}

.mapWideFactWidth {
    width: 50%;
}

.mapSeparateField {
    padding: 10px;
}

#mapZipText {
    font-size: 10px;
    vertical-align: middle;
}

.mapDisableFact {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
}

#mapPriceSvg {
    width: 100%;
    height: 23px;
}

#mapPriceBackgroundLine {
    stroke: lightgrey;
    stroke-width: 2;
}

#mapPriceSelectLine {
    stroke: orangeRed;
    stroke-width: 2;
}

.mapPriceCircle {
    stroke: orangeRed;
    fill: white;
    stroke-width: 2;
}

#mapMinPrice {
    position: absolute;
    left: 7px;
    top: 35px;
}

#mapMaxPrice {
    position: absolute;
    right: 7px;
    top: 35px;
}

#mapButtonsHolder {
    margin: 10px 50px 20px 5px;
}

#mapResetFiltersButton {
    color: black;
    text-decoration: underline;
}

#mapResetFiltersButton:hover {
    color: blue;
}

#mapPropertySelection {
    margin: 10px 0px 0px 0px;
}

.mapCompPin{
    height: 30px;
    line-height: 30px;
    width: 25px;
    border: 2px;
    text-align: center;
    vertical-align: middle;
    background-image: url(/webclient/content/images/Icon-bluegrey.png)
 }
 
.mapCompSelectedPin{
    height: 30px;
    line-height: 30px;
    width: 25px;
    border: 2px;
    text-align: center;
    vertical-align: middle;
    background-image: url(/webclient/content/images/Icon-blue.png);
    z-index: 10;
 } 
 
 .mapCompListPin{
    height: 30px;
    line-height: 30px;
    width: 25px;
    border: 2px;
    text-align: center;
    vertical-align: middle;
    background-image: url(/webclient/content/images/Icon-greengrey.png)
 } 

 .mapCompListSelectedPin{
    height: 30px;
    line-height: 30px;
    width: 25px;
    border: 2px;
    text-align: center;
    vertical-align: middle;
    background-image: url(/webclient/content/images/Icon-green.png);
    z-index: 10;
 }  

.mapCompRentalPin {
    height: 30px;
    line-height: 30px;
    width: 25px;
    border: 2px;
    text-align: center;
    vertical-align: middle;
    background-image: url(/webclient/content/images/Icon-yellow.png);
    z-index: 10;
}

.mapOverlayText{
    position: relative;    
    font: 18pt;
    font-weight:bold;
    color: white;
 }

 .mapSubjectPropertyMarker {
    height: 30px;
    width: 25px;
    border: 2px;
    text-align: center;
    background-image: url(/webclient/content/images/Icon-orange-star.png);
    z-index: 10;
 }

.mapSubjectPropertyMarker2 {
    height: 30px;
    width: 25px;
    border: 2px;
    text-align: center;
    background-image: url(/webclient/content/images/Icon-orange-star-2.png);
    z-index: 10;
}

 #mapInfoWindow {
     font-size: 10px;
     min-width: 200px;
 }

 #mapInfoWindowTitle {
     font-weight: bold;
     color: darkblue;
 }

 .mapInfoWindowCellWidth {
     width: 50%;
 }

 #mapInfoWindowSelectComp {
     margin-top: 5px;
 }

/*
 * Selected Comps
*/
.selectedCompsNameWidth {
    width: 12%;
    font-weight: bold;
}

.selectedCompsDataWidth {
    width: 22%;
}
.selectedCompsDataWidthQVal {
    width: 30%;
}

.selectedCompsAdjustedTableCellLeft {
    border-right: 2px solid transparent;
}

.selectedCompsAdjustedTableCellRight {
    border-left: 2px solid transparent;
}

.selectedCompsPhoto {
    width: 150px;
    height: 150px;
}



.selected-comparables-tables-wrapper .tableRow {
    height: 46px;
}

.selected-comparables-tables-wrapper .tableCell {
    white-space: nowrap;
}

#comparables-slider-wrapper {
    position: relative;
    text-align: center;
}
#comparables-slider {
    position: relative;
    display: inline-block;
    overflow-x: hidden;
}
#comparables-slider:after {
    content: "";
    display: table;
    clear: both;
    margin-left: 0;
    padding-left: 0;
}
  
#comparables-slider .comparables-slide {
    float: left;
    width: 100px;
    display: block;
}
#comparables-slider .comparables-slide img {
    display: block;
    width: 100%;
    height: auto;
    outline: 2px solid #fff;
}
#comparables-slider {
    outline: none;
}
  
#comparables-slider-handle,
#comparables-slider-handle-two {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* width: 600px; */
    box-sizing: border-box;
    /* border: 1px solid #000000; */
    background: rgba(255,255,255,0.6)
}

.comparables-slider-wrapper {
    position: relative;
    text-align: center;
}
.comparables-slider {
    position: relative;
    display: inline-block;
    overflow-x: hidden;
}
.comparables-slider:after {
    content: "";
    display: table;
    clear: both;
    margin-left: 0;
    padding-left: 0;
}
  
.comparables-slider .comparables-slide {
    float: left;
    width: 100px;
    display: block;
}
.comparables-slider .comparables-slide img {
    display: block;
    width: 100%;
    height: auto;
    outline: 2px solid #fff;
}
.comparables-slider {
    outline: none;
}
  
.comparables-slider-handle,
.comparables-slider-handle-two {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* width: 600px; */
    box-sizing: border-box;
    /* border: 1px solid #000000; */
    background: rgba(255,255,255,0.6)
}
  
#controlled-div {
    overflow-x: scroll;
}
#controlled-div div {
    width: 2000px;
}
#controlled-div span {
    width: 200px;
    height: 300px;
    float: left;
}





/*
 * Repairs
*/
.repairImageWidth {
    width: 130px;
}

.repairCategoryWidth {
    width: 150px;
}

.repairCostWidth {
    width: 100px;
}

.repairImage {
    width: 120px;
    height: 80px;
    vertical-align: top;
}

.repairField {
    width: 100%;
    vertical-align: top;
}

.concernCategoryWidth {
    width: 150px;
}

.concernCommentWidth {
    width: 70%;
}

.concernAddRemoveWidth {
    width: 150px;
}


/*
 * Agent comments
*/
.agentDescriptionWidth {
    width: 35%;
}
.agentDescriptionWidthQVal {
    width: 30%;
}

.agentCommentsWidth {
    width: 65%;
}

/*
 * Broker Price Opinion
*/
.bpoContentWidth {
    width: 20%;
}

.bpoSepWidth {
    width: 1%;
    border-left: 1px solid #E0E0E0;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}


.signoffSectionWidth{
    width: 35%;
}

.tabsdemoDynamicHeight md-content {
  background-color: transparent !important; 
}

.tabsdemoDynamicHeight md-content md-tabs {
    background: #f6f6f6;
    border: 1px solid #e1e1e1; 
}

.tabsdemoDynamicHeight md-content md-tabs md-tabs-wrapper {
      background: white; 
}

.tabsdemoDynamicHeight md-content {
    margin-top: 0; 
}

.drop-box {
    background: #F8F8F8;
    border: 5px dashed #DDD;
    width: 170px;
    text-align: center;
    padding: 50px 10px;
}

.drop-box2 {
    background: #F8F8F8;
    border: 5px dashed #DDD;
    width: 120px;
    height: 70px;
    text-align: center;
    padding: 2px 2px;
    margin-left: 2px;
}

.uploadUserButton {
    width: 15px;
    height: 18px;
    text-align: center;
    padding: 5px 5px;
    cursor: pointer;
    background-image: url(/webclient/content/images/UploadIcon.png)
}

.progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #CCC;
}

.progress div {
    font-size: smaller;
    background: orange;
    width: 0;
}

.selectedrecord table {
    background-color: #d0fff0  !important;
}
.largedistance {
    color: #ff0000  !important;
}


 .drop-box.dragover, .drop-box2.dragover  {
    border: 5px dashed blue;
}

.drop-box.dragover-err {
    border: 5px dashed red;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.tableText{
    font-size:80%;
    font-weight: normal;
 }

.headerText{
    font-size:75%;
    font-weight: bold;
 }

.headerTextLarge{
    font-size:100%;
    font-weight: bold;
    padding-left:10px;
    padding-right:10px;
 }

.rowHighlight{
    background-color: rgb(91, 192, 222) !important;
}

.textBoxClass{
    height:100px;
}

.listingSheetTitle {
    text-align: center;
}

.listingMainPicture {
    text-align: center;
    align-items: center;
    width: 800px;
    margin: auto;
}

.tableMainPicture {
    width: 800px;
    margin: 0 auto;
}

.tableMainPictureSmallTable {
    margin: 0 auto;
}

.searchDiv {
    width: 800px;
    text-align: center;
    align-items: center;
}

.tableSearch {
    width: 800px !important;
    margin: 0 auto;
    text-align: left !important;

}

.leftalignDiv{
    text-align: left !important;
    margin: auto;
    padding-left:10px;
}

.centeralignDiv{
    text-align: center !important;
    margin: auto;
}


.tableHistorySummary {
    width: 1024px;
    margin: 0 auto;
}

.tableHistoryDetails {
    width: 512px;
    margin: 0 auto;
}

.requiredFieldSuccess {
    border: 1px solid #005826 !important;
}

.selectedRequiredFieldSuccess {
    border: 3px solid #005826 !important;
}

.requiredFieldUnresolved {
    border: 1px solid red !important;
}

.requiredFieldUnresolvedBackground {
    background-color: #fdd9df;
}

.selectedRequiredFieldUnresolved {
    border: 3px solid red !important;
}

.submitErrorField {
    border: 3px solid black;
}


.stateField {
    width: 50px;
}

.carretButton{
    float:right; 
    height:20px !important; 
    padding-top:0 !important;
    line-height:16px; 
    color:black;
    text-align:center;
    vertical-align: top;
}

.activeValidationMessage{
    color:#ea440e;
}
.activeValidationMessageHeader{
    background-color:#ea440e;
}

.resolvedValidationMessage{
    color:darkgreen;
}
.resolvedValidationMessageHeader{
    background-color:darkgreen;
}

.brokerPriceOpinionHeader {
    border-bottom: 2px solid black;
    margin-bottom: 10px;
}

.carousel-indicators{
    top:10px;
    height: 20px;
}

.xvaAcceptButton{
    height: 57px;
    width: 40px;
    border: 1px;
    text-align: center;
    background-image: url(/webclient/content/images/AcceptButton.png)
 }

.xvaRejectButton{
    height: 57px;
    width: 40px;
    border: 1px;
    text-align: center;
    background-image: url(/webclient/content/images/RejectButton.png)
 }

.sortorder:after {
  content: '\25b2';   
}
.sortorder.reverse:after {
  content: '\25bc';
}

.userModifiedAdjustment{
    background-color: lightblue;
}

.automatedAdjustment{
    background-color: lightgoldenrodyellow;
}

.inconsistentDataSource {
    background-color: #f9d5ae;
}

.photoDeleteButton{
    height: 20px;
    width: 20px;
    border: 1px;
    outline: none;
    background-image: url(/webclient/content/images/DeletePhoto.png)
}

.photoDeleteButtonSmall{
    height: 18px;
    width: 15px;
    text-align: center;
    padding: 5px 5px;
    cursor: pointer;
    outline: none;
    background-image: url(/webclient/content/images/DeleteIcon_small.png)
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="date"]::-webkit-outer-spin-button,
input[type="date"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  position: absolute;
  top:50%;
  left:50%;
  vertical-align:central;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*
 * Disclaimer
*/
.dafiDisclaimerFontSize {
    font-size: 14px;
}

.dafiDisclaimerHeading {
    line-height: 1.8em;
    vertical-align: top;
}

.dafiDisclaimerBold {
    font-weight: bold;
}

.dafiDisclaimerUnderline {
    text-decoration: underline;
}

.selectedDataSource {
    text-align: left;
    outline: none;
    font-weight: bold;
}

.unSelectedDataSource {
    text-align: left;
    outline: none;
}

.floatingSearchLabel {
    top: -8px;
    font-size: 11px;
    left: 14px;
    z-index: 1;
    background-color: white;
    position: absolute;
    padding-left: 5px;
    padding-right: 5px;
    color: #666;
}

.autoCompleteBox {
    top: 30px;
    left: 0px;
    z-index: 1;
    width: 100%;
    background-color: white;
    position: absolute;
    color: #665;
    max-height: 182px;
    overflow-y: auto;
    border-bottom: solid 1px;
    border-left: solid 1px;
    border-right: solid 1px;
    border-radius: 0px 0px 3px 3px;
    border-color: lightgray;
}

.customCompDlgClose {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 10px;
    font-weight:bolder;
    font-size: 14px;
}

.customCompDlgAddCompActive {
    background-color: #337ab7;
    border-color: #2e6da4;
    padding: 2px;
    color: white;
    font-size: 12px;
}

#qappBPOLogoDivi {
    position: relative;
    width: 230px;
    line-height: 4;
    background-color: rgb(63, 74, 88);
}

#qappBPOTitlesi {
    position: relative;
    width: calc(100vw - 230px);
    height: 50px;
    line-height: 45px;
    color: white;
    background-color: rgb(63, 74, 88);
    padding-left: 10px;
    font-size: 14px;
}



@media only screen and (min-width: 1600px) {
    .comparable-filters-column {
        max-width: 40%;
    }
    
    .comparable-map-column {
        max-width: 60%;
    }
    .layout-row > .comp-age-filter {
        max-width: 100%;
    }
    .layout-row > .comp-price-filter, .layout-row > .comp-proptype-filter {
        max-width: 50%;
    }
}

@media only screen and (min-width: 1280px) and (max-width: 1599px) {
    .comparable-filters-column {
        max-width: 100%;
    }
    
    .comparable-map-column {
        max-width: 100%;
    }
    
}

@media only screen and (max-width: 1599px) {
    /* move the top right menu bellow the logo and title */
    .consolidated #topRightMenu {
        position: relative;
        background-color:rgb(63, 74, 88);
    }
    .consolidated #qappBPOTitles {
        width: auto;
    }
    .consolidated #centerDiv {
        top: 130px;
    }
    .consolidated #leftMenu {
        top: 140px;
    }
    .consolidated #xomeTitleBar {
        position: relative;
        height: auto;
        background-color:rgb(63, 74, 88);
    }
    .topRightTable {
        padding: 5px 0;
    }
    /* end block */
}


.padding-5px {
    padding:5px;
}

.padding-20 {
    padding: 20px;
}
.padding-w20 {
    padding-left: 20px;
    padding-right: 20px;
}
.padding-h20 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.padding-w40 {
    padding-left: 40px;
    padding-right: 40px;
}
.padding-h40 {
    padding-top: 40px;
    padding-bottom: 40px;
}
.width-100p {
    width:100%;
}
.margin-b10 {
    margin-bottom: 10px;
}
.margin-b20 {
    margin-bottom: 20px;
}
.margin-b30 {
    margin-bottom: 30px;
}

.margin-t10 {
    margin-top: 10px;
}
.margin-t20 {
    margin-top: 20px;
}
.margin-t30 {
    margin-top: 30px;
}
.margin-l10 {
    margin-left: 10px;
}
.margin-l20 {
    margin-left: 20px;
}
.margin-l30 {
    margin-left: 30px;
}
.margin-r10 {
    margin-right: 10px;
}
.margin-r20 {
    margin-right: 20px;
}
.margin-r30 {
    margin-right: 30px;
}

.initialize-order-modal .modal-dialog {
    width: 600px !important;
}

.q-vendor-templates {
    /* width: 220px; */
    position: fixed;
    z-index: 100;
    top: 100px;
    right: 30px;
    width: 512px;
}

.vendor-templates-item {
    position: relative;
    display: flex;
    border-bottom: 1px solid #eeeeee;
    justify-content: flex-start;

}
.vendor-templates-row {
    position: relative;
    /* border-bottom: 1px solid #eeeeee; */
    display: flex;
    justify-content: space-between;
    justify-content: flex-start;
    width: 100%;
    padding: 5px 16px;
}
.vendor-templates-row.wrap {
    flex-wrap: wrap;
}
.vendor-templates-row.right {
    justify-content: flex-end;
}

.vendor-templates-row:hover {
    background-color: #f5f5f5;

}

.vendor-templates-row:hover .vendor-template-edit-icon {
    display: block;
}
.vendor-templates-row:hover .vendor-template-select-button {
    display: block;
}
.vendor-templates-row:hover .vendor-template-copy-button {
    display: block;
}
.vendor-templates-titles-row p {
    font-size: 11px;
    font-weight: bold;
    color: #3f4a58;
}
.vendor-templates-row p {
    margin-bottom: 0;
}

.vendor-templates-row .vtr-label {
    width: 25%;
    padding-right: 10px;
}
.vendor-templates-row .vtr-content {
    /* display: flex; */
    white-space: pre-wrap;
    /* padding-right: 10px; */
    min-height: 32px;
    /* width: calc(75% - 34px); */
    /* width: calc(100% - 34px); */
    width: 100%;

}
.vendor-templates-row .vtr-content.expanded {
    padding-right: 0;
    /* width: 75%; */
    width: 100%;

}
.vendor-templates-column {
    display: flex;
    flex-direction: column;
}
.vendor-templates-column.center {
    justify-content: center;
}
.vendor-templates-cell {
    display: flex;
    font-weight: 700;
    /* padding: 2px 0; */
}
.vendor-templates-cell.info {
    font-weight: 400;
    flex-direction: row;
    align-items: center;
} 

.q-vendor-template-save-button {
    display: flex;
    align-items: center;
    padding: 2px 5px 2px 2px;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid #3f4a58;
    background-color: #ffffff;
    border-radius: 3px;
}

.q-vendor-template-save-button:hover {
    background-color: #f0f0f0;
    border: 1px solid #337ab7;
    color: #3f4a58;
    
}

.q-vendor-template-save-button svg {
    margin-right: 3px;
}

.q-vendor-template-save-button span {
}

.vendor-template-edit-icon {
    display: none;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    font-size: 14px;
    padding: 5px 5px;
    /* margin-bottom: 10px; */
}

.vendor-template-edit-icon svg {
    display: block;
    stroke: #3f4a58;
    width: 20px;
    height: 20px;
}

.vendor-template-edit-icon:hover svg {
    stroke: #337ab7;
}

.vendor-template-select-button {
    display: none;
    margin: 0 6px;
    color: #ffffff;
    background-color: #337ab7;
    border: 1px solid #337ab7;
    border-radius: 3px;
    font-size: 14px;
    padding: 5px 5px;
    cursor: pointer;
}
.vendor-template-select-button svg {
    display: block;
    width: 20px;
    height: 20px;
}

.vendor-template-select-button:hover {
    background-color: #3f91d8;
}

.vendor-template-copy-button {
    display: none;
    /* margin-top: 10px; */
    color: #ffffff;
    background-color: lightblue;
    border: 1px solid lightblue;
    border-radius: 3px;
    font-size: 14px;
    padding: 5px 5px;
    cursor: pointer;
}
.vendor-template-copy-button svg {
    display: block;
    width: 20px;
    height: 20px;
}

.vendor-template-copy-button:hover {
    background-color: rgb(124, 212, 241);
}

/* .vendor-template-actions {
    position: relative;
    width: 34px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
} */
.vendor-template-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    /* width: 34px; */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.vendor-template-actions.expanded {
    width: auto;
}


.vtr-open-icon {
    display: none;
    position: absolute;
    z-index: 5;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    font-size: 14px;
    padding: 4px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    
}
.vtr-open-icon:hover {
    background-color: #fbfbfb;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    
}
.vtr-open-icon:hover svg {
    stroke: #337ab7;
    
}
.vtr-open-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.vendor-template-no-templates {
    width: 100%;
    padding: 10px;
    margin: 10px 16px;
    /* border: 2px solid #e0e0e0; */
    text-align: center;
    background-color: whitesmoke;
    border-radius: 3px;
}

.vendor-templates-search-input {
    border: 1px solid #3f4a58;
}
.vt-content-input,
.vt-label-input {
    border-radius: 2px;
    box-shadow: none;
    border: 1px solid #3f4a58;
    outline: none;
}

.vt-label-input.danger {
    border: 1px solid red;
}

.vendor-templates-edit-wrap {
    padding: 5px 16px;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.vendor-templates-edit-wrap .vtr-label {
    margin-bottom: 10px;
}

.vendor-template-edit-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.vendor-template-edit-actions-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.vendor-template-edit-checkbox {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 0;
}
.mapping-services-color {
    position: relative;   
}
.mapping-services-color.disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #c7c7c7;
    border: 1px solid #73787e;
}


/* qt-slider */

.qt-slider-wrapper {
    position: relative;
    height: 52px;
    margin: 10px 0 0;
    padding: 0 20px;
    width: 100%;
}

.qt-slider-back-bar {
    position: absolute;
    height: 12px;
    width: 100%;
    top: 20px;
    border-radius: 10px;
    background: lightgrey;
}

.qt-slider-cursor {
    position: absolute;
    bottom: 34px;
    left: 0;
    height: 30px;
    width: 25px;
    background-image: url(/webclient/content/images/Icon-orange-star.png);
}


/* custom map control */
.custom-control-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none rgb(255, 255, 255);
    border: 0px;
    margin: 10px;
    padding: 0px;
    text-transform: none;
    appearance: none;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    height: 40px;
    width: 40px;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
    overflow: hidden;
}
.custom-control-button svg {
    stroke: #737373;
}

.custom-control-button:hover svg {
    stroke: #474747;
}

/* mapping servies */
.q-map-ser-panel-wrap {
    position: relative;
}

.q-map-ser-panel-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #E0E0E0;
}
.q-map-ser-panel-top-title {
    display: flex;
    align-items: center;
}
.q-map-ser-panel-top-title p {
    display: inline-block;
    margin: 0;
    margin-right: 10px;
    font-weight: bold;
}

.q-map-ser-panel-top-switch {
    display: inline-block;
}

.q-map-ser-panel-top-caret {
    display: flex;
    align-items: center;
}
.q-map-ser-panel-top-caret svg:hover {
    background: #eeeeee;
    border-radius: 50px;
    cursor: pointer;
}
.q-map-ser-panel-top-caret.active {
    transform: rotate(180deg);
}

.q-map-ser-panel-content {
    display: none;
    /* position: absolute; */
    /* left: 0; */
    /* right: 0; */
    /* top: 30px; */
    /* padding: 10px; */
    background: #ffffff;
    border-bottom: 1px solid #E0E0E0;
    /* border-radius: 3px; */
    /* border-top: 1px solid #9c9c9c; */
    /* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); */
}
.q-map-ser-panel-content.active {
    display: block;
}

.q-ms-icon {
    stroke: #9c9c9c;
    fill: #9c9c9c;
}
.q-ms-icon:hover {
    stroke: #7c7c7c;
    fill: #7c7c7c;
}

.flex-wrapper {
    display: flex;
}

.flex-wrapper.cols {
    flex-direction: column;
}

.flex-wrapper.space-between {
    justify-content: space-between;
}
.flex-wrapper.v-align {
    align-items: center;
}


.mapping-services-tabs {
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 5px;
}
.mapping-services-tab-item {
    flex: 1;
    border-bottom: 2px solid transparent;
    padding: 5px 5px 3px 5px;
    text-align: center;
    cursor: pointer;
    
}
.mapping-services-tab-item.active,
.mapping-services-tab-item:hover {
    border-color: lightblue;
    font-weight: bold;
}
.mapping-services-tab-item:hover {
    background-color: #f5f5f5;
}
/* mapping services end*/



.ms-legend-slider-wrapper {
    /* position: absolute; */
    /* top: 0; */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    /* pointer-events: none; to allow hover on legend items */
}

.ms-legend-slider-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid black;
    cursor: grab;
}

.ms-slider-handle-start,
.ms-slider-handle-end {
    display: none;
    top: 0;
    bottom: 0;
    border: 1px solid #000;
    background: white;
    align-items: center;
    transition: padding 150ms ease-in-out;
    
}
.ms-slider-handle-start {
    border-right: none;
    border-radius: 3px 0 0  3px;
}
.ms-slider-handle-end {
    border-left: none;
    border-radius: 0 3px 3px 0;
}

.ms-legend-wrap:hover .ms-slider-handle-start.active,
.ms-legend-wrap:hover .ms-slider-handle-end.active {
    display: flex !important;
    opacity: 0.65;
}
.ms-slider-handle-start.active:hover,
.ms-slider-handle-end.active:hover {
    opacity: 1 !important;
    cursor: pointer;
    padding: 0 4px;
}

.q-map-cog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.q-map-cog-icon:hover {
    background: #eeeeee;
    border-radius: 50px;
    cursor: pointer;
}
.q-map-cog-icon:hover svg,
.q-map-cog-icon.active svg {
    stroke: #337ab7;
}

.ms-create-range-button:hover,
.ms-create-range-button.active {
    color: #337ab7;
}

.ms-create-range-button:hover svg,
.ms-create-range-button.active svg {
    stroke: #337ab7;
}

.ms-clear-range-button:hover{
    color: #337ab7;
}

.ms-invert-range-button:hover {
    color: #337ab7;
}
.ms-invert-range-button:hover svg {
    stroke: #337ab7;
}

.ms-actions-wrapper {
    position: relative;
}

.ms-actions-drawer {
    position: absolute;
    display: none;
    flex-direction: column;
    top: 100%;
    right: 0;
    z-index: 100;

    background: none rgb(255, 255, 255);
    border: 0px;
    text-transform: none;
    appearance: none;
    user-select: none;
    border-radius: 2px;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
    overflow: hidden;
}

.q-map-cog-icon:hover + .ms-actions-drawer,
.ms-actions-drawer:hover {
    display: flex;
}

.ms-action-drawer-item {
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    padding: 5px 7px;
}
.ms-action-drawer-item:hover {
    background-color: whitesmoke;
    color: #337ab7;
}
.ms-action-icon {
    margin-right: 3px;
}
.ms-action-drawer-item.disabled,
.ms-action-drawer-item.disabled:hover {
    color: #5a5a5a;
    background-color: #f5f5f5;
    cursor: default;
}
.ms-create-range-notification {
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    text-align: center;
    color: red;
    padding: 5px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 2px;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;

}
.ms-close-range-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 5px;
    top: 0;
    bottom: 0;
}


/* History Sheet Start*/
.d-flex {
    display: flex;
}
.history-summary-content {
    width: 100%;
    max-width: 1024px;
    background-color: #FFFFFF;
}

.history-summary-content:nth-child(2n+1) {
    background-color: #F5F5F5;
}
.history-summary-content .flex-table-row {
    background-color: #FFFFFF;
}
.history-summary-content .flex-table-row:nth-child(2n) {
    background-color: #F5F5F5;
}
.tableHistorySummary .flex-table-cell {
    padding: 0;
}
.mls-history-compare-table-wrap .flex-table-row {
    background-color: #FFFFFF;
}
.mls-history-compare-table-wrap .flex-table-row:nth-child(2n+1) {
    background-color: #F5F5F5;
}

.mls-history-compare-table-wrap .flex-table-cell {
    padding: 5px;
}

.mls-listing-info-table .flex-table-cell {
    padding: 5px;
}

@media (max-width:1024px) {
    .history-summary-item-wrap {
        flex-direction: column;
    }
    .history-summary-image-wrap {
        display: flex;
        justify-content: center;
    }
    .history-summary-content .tableHistoryDetails  {
        width: 100%;
        max-width: 100% !important;
        padding: 0 20px;
    }
    .tableHistorySummary {
        max-width: 100%;
    }
    
}
/* History Sheet End*/


.pad-5px {
    padding: 5px;
}

.flex-table {
    display: flex;
    justify-content: stretch;
    flex-direction: column;
}

.flex-table-row {
    display: flex;
    justify-content: stretch;
    flex-direction: row;
}
.flex-table-row-title {
    background-color: #E0E0E0;
}
.flex-table-row.odd {
    background-color:#F5F5F5;
}

.flex-table-cell {
    padding: 10px 5px;
    flex: 1 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flex-table-cell.title {
    background-color: #E0E0E0;
}
.flex-table-cell input,
.flex-table-cell select {
    align-self: flex-start;
}
.flex-table-cell select {
    height: 21px;
}
.flex-table-cell.center {
    justify-content: center;
}
.flex-table-cell.right {
    justify-content: flex-end;
}
.flex-table-cell.v-center {
    align-items: center;
}

.flex-table-cell-split {
    display: flex;
    justify-content: space-between;
}

.flex-table-label {
    word-break: break-word;
}


.flex-cell-name {
    min-width: 25%;
}

.flex-table-cell.col-10p {
    flex: 1 1 10%;
    max-width: 10%;
}
.flex-table-cell.col-2 {
    flex: 1 1 16.67%;
    max-width: 16.67%;
}
.flex-table-cell.col-20p {
    flex: 1 1 20%;
    max-width: 20%;
}
.flex-table-cell.col-3 {
    flex: 1 1 25%;
    max-width: 25%;
}
.flex-table-cell.col-4 {
    flex: 1 1 33.333%;
    max-width: 33.333%;
}
.flex-table-cell.col-6 {
    flex: 1 1 50%;
    max-width: 50%;
}
.flex-table-cell.col-8 {
    flex: 1 1 66.666%;
    max-width: 66.666%;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

.xxl-modal-window {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.xxl-modal-window .modal-dialog {
    width: auto;
    max-width: 1200px;
    /* min-width: 900px; */
    min-width: 0;
    display: flex;
}
.xxl-modal-window .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    width: 100%;
}

.xxl-modal-window .modal-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.xxl-modal-window .text-center {
    max-width:100%;
    height:calc(90vh - 154px);
    aspect-ratio: 1.33;
}

.xxl-modal-window .xxl-modal-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* max-width:100%; */
    /* max-height:calc(90vh - 154px); */
}
.xxl-modal-window .carousel-indicators li {
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2), 1px 1px 1px inset rgba(0,0,0, 0.2);
}